@charset "UTF-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Barlow&display=swap');

/* ==========================================================================
   base / utility
   庚午中には n_common/css/style.css が無いため、
   衣山駅「近居のススメ」が依存していた共通クラスを本ページ内に持たせている。
   ========================================================================== */
#pageWrap {
	padding: 0 0 2%;
	font-family: 'Noto Serif JP', serif;
	text-align: left;
}
#pageWrap h2, #pageWrap h3, #pageWrap h4, #pageWrap h5 {
	font-weight: normal;
}
#pageWrap *, #pageWrap *:before, #pageWrap *:after {
	box-sizing: border-box;
}
#pageWrap img {
	width: 100%;
	max-width: none;
}
#pageWrap a {
	transition: 0.3s;
}
#pageWrap a:hover {
	opacity: 0.6;
	text-decoration: none;
}
.flex-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.wrapWidth {
	width: 100%;
	margin: 0 auto;
}
.boxWidth {
	width: 96%;
	max-width: 1200px;
	margin: 0 auto;
}
br.brSp {
	display: none;
}
.engTxtDin {
	font-family: "Barlow", sans-serif;
	font-weight: 400;
	font-style: normal;
}
.capImg {
	position: relative;
}
.capImg::after {
	content: "image";
	font-size: 10px;
	position: absolute;
	right: 0.3em;
	bottom: 0.1em;
	color: #fff;
}
.capBk::after {
	color: #000;
}
.capAtt::after {
	content: attr(data-cap);
}

/* スクロールアニメーション（js/kinkyo.js で .is-show を付与） */
.fadein {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.8s ease, transform 0.8s ease;
}
.fadein.is-show {
	opacity: 1;
	transform: translateY(0);
}

.notes-area {
	margin: 0 auto;
}

/* 見学予約CTA（merit ページの .merit-cta に準拠） */
.info-area.kinkyo-cta {
	width: 100%;
	margin: 0;
	padding: 2.5rem 20px;
	background: #f2f2f2;
	text-align: center;
}
.info-area.kinkyo-cta .kinkyo-cta__lead {
	font-family: 'Noto Serif JP', serif;
	font-size: 1.25rem;
	line-height: 1.6;
	color: #333;
	margin-bottom: 1rem;
	letter-spacing: 0.1em;
}
.info-area.kinkyo-cta .info-btn1 li {
	margin-left: auto;
	margin-right: auto;
}
@media screen and (max-width: 768px) {
	.info-area.kinkyo-cta {
		padding: 1.5rem 20px;
	}
	.info-area.kinkyo-cta .kinkyo-cta__lead {
		font-size: 1rem;
	}
}

@media screen and (max-width: 599px) {
	br.brSp {
		display: inline;
	}
}

/* ==========================================================================
   kinkyo
   ========================================================================== */
/* ページヘッダーは共通（SP180px／PC400px）より低くする。このページのみ */
#child .c-pagetitle__outer,
#parent .c-pagetitle__outer {
	height: 120px;
}
#child .c-pagetitle em,
#parent .c-pagetitle em {
	margin-bottom: 10px;
}
@media (min-width: 959px) {
	#child .c-pagetitle__outer,
	#parent .c-pagetitle__outer {
		height: 240px;
	}
}

#sec01 {}

#sec02 {
	padding: 5% 0 2%;
}
#sec02 .h3Box h3 {
	text-align: center;
	font-size: 30px;
	letter-spacing: 0.2em;
}
#sec02 .h3Box p.lead,
#sec04 .lead {
	font-size: 20px;
	font-size: clamp(15px, 1.8vw, 19px);
	text-align: center;
	padding: 1em 0;
	letter-spacing: 0.1em;
}
.btns {
	max-width: 1000px;
	padding: 30px 0;
}
.btns a {
	width: 48%;
}
.btns a:hover {
	opacity: 1 !important;
}
/* 表示中の世帯側のボタンは薄くする */
#child .btns a:nth-child(1),
#parent .btns a:nth-child(2) {
	filter: saturate(50%);
	opacity: 0.5;
}
#child .btns a:nth-child(1):hover,
#parent .btns a:nth-child(2):hover {
	filter: saturate(110%);
	opacity: 1;
}

#sec03 {
	background-color: #d2e5f6;
	padding-bottom: 6%;
}
#parent #sec03 {
	background-color: #eaf4eb;
}
#sec03 h4,
#sec04 h4,
#sec05 h4 {
	font-size: 30px;
	color: #1c4e84;
	font-weight: bold;
	border-bottom: #1c4e84 solid 1px;
	margin: 1em auto;
}
#parent #sec03 h4,
#parent #sec04 h4,
#parent #sec05 h4 {
	color: #006934;
	border-bottom: #006934 solid 1px;
}
#sec03 .flex {
	max-width: 1000px;
}
#sec03 .flex .itemBox {
	width: 46%;
	margin-bottom: 30px;
}
#sec03 .flex .itemBox .imgBox {
	border: #1c4e84 solid 2px;
}
#parent #sec03 .flex .itemBox .imgBox {
	border: #006934 solid 2px;
}
#sec03 .flex .itemBox dt {
	color: #1c4e84;
	font-size: 24px;
	font-size: clamp(17px, 2.1vw, 23px);
	height: 2.8em;
	line-height: 1.1;
	display: flex;
	align-items: center;
	position: relative;
	padding-left: 1.5em;
}
#parent #sec03 .flex .itemBox dt {
	color: #006934;
}
#sec03 .flex .itemBox dt span {
	position: absolute;
	font-size: 200%;
	left: 0;
}
#sec03 .flex .itemBox dd {
	font-size: 17px;
	font-size: clamp(14px, 1.4vw, 17.6px);
	line-height: 1.3;
}
#sec03 .flex .itemFlex {
	width: 100%;
	display: flex;
	align-items: center;
}
#sec03 .flex .itemFlex .imgBox {
	width: 46%;
}
#sec03 .other h5 {
	font-size: 26px;
	color: #1c4e84;
}
#parent #sec03 .other h5 {
	color: #006934;
}
#sec03 .support {
	max-width: 800px;
	padding: 3% 0;
}
#sec03 .meritBox {
	max-width: 1000px;
	background-color: #fff;
	border: #ee7c00 solid 3px;
}
#sec03 .meritBox h3 {
	background-color: #ee7c00;
	color: #fff;
	text-align: center;
	font-size: 26px;
	line-height: 1.1;
	padding: 0.6em;
}
#sec03 .meritBox h3 span {
	font-size: 160%;
}
#sec03 .meritBox .flex {
	padding: 30px 0;
}
#sec03 .meritBox .flex dl {
	width: 50%;
	padding: 0 20px;
}
#sec03 .meritBox .flex dl:nth-child(1) {
	border-right: #999 solid 1px;
}
#sec03 .meritBox .flex dt {
	font-size: 40px;
	font-size: clamp(24px, 3vw, 36px);
	text-align: center;
	color: #ee7c00;
	line-height: 1.2;
}
#sec03 .meritBox .flex dd {
	text-align: center;
	font-size: 18px;
	padding-top: 0.5em;
}
#sec03 .meritBox p {
	text-align: center;
	font-size: 18px;
	padding-bottom: 1em;
}
#sec03 .meritBox p a {
	color: #ee7c00;
	text-decoration: underline;
}

#sec04, #sec05 {
	background-color: #d2e5f6;
	padding-bottom: 6%;
}
#parent #sec04, #parent #sec05 {
	background-color: #eaf4eb;
	padding-bottom: 6%;
}
#sec04 .mainImg,
#sec05 .mainImg {
	position: relative;
}
/* 見出し画像は各ページの既存写真を流用するため、比率を揃えてトリミング表示 */
#sec04 .mainImg img,
#sec05 .mainImg img {
	aspect-ratio: 2048 / 759;
	object-fit: cover;
	display: block;
}
#sec04 .mainImg .note,
#sec05 .mainImg .note {
	position: absolute;
	right: 0.5em;
	bottom: 0.3em;
	font-size: 10px;
	color: #fff;
	text-shadow: 0 0 3px rgba(0,0,0,0.6);
}
#sec05 .mainImg .note .spNote {
	display: none;
}
/* 親世帯PLANは4:3の1102号室写真を使うため、窓側が残るよう切り位置を上寄りに */
#parent #sec05 .mainImg img {
	object-position: center 40%;
}
/* 親世帯ページは見出しが下端に付くので、撮影注記は上端へ逃がす */
#parent #sec04 .mainImg .note,
#parent #sec05 .mainImg .note {
	top: 0.3em;
	bottom: auto;
}
#sec04 .mainImg h3, #sec05 .mainImg h3 {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	font-size: 34px;
	color: #fff;
	padding: 0.5em;
	background: #106694;
	background: linear-gradient(90deg, rgba(16, 102, 148, 0) 0%, rgba(16, 102, 148, 1) 50%, rgba(16, 102, 148, 0) 100%);
	text-align: center;
	line-height: 1.2;
}
#parent #sec04 .mainImg h3, #parent #sec05 .mainImg h3 {
	background: #006934;
	background: linear-gradient(90deg, rgba(0,105,52,0) 0%, rgba(0,105,52,1) 50%, rgba(0,105,52,0) 100%);
}
#sec04 .mainImg h3.parent_h3,
#sec05 .mainImg h3.parent_h3 {
	bottom: 0;
	top: unset;
}
#sec04 .mainImg h3 span, #sec05 .mainImg h3 span {
	font-size: 70%;
	display: block;
}
#sec04 .lead {
	padding: 0 0 1em 0;
}
#sec04 .itemWrap {
	max-width: 1000px;
	padding: 3% 0;
}
#sec04 .itemWrap h5 {
	width: 100%;
	border-bottom: #1c4e84 solid 1px;
	font-size: 24px;
	letter-spacing: 0.2em;
	font-weight: 400;
	margin-bottom: 20px;
}
#parent #sec04 .itemWrap h5 {
	border-bottom: #006934 solid 1px;
}
#sec04 .itemWrap h5 span {
	display: inline-block;
	font-size: 36px;
	color: #1c4e84;
	width: 4em;
}
#parent #sec04 .itemWrap h5 span {
	color: #006934;
}
#sec04 .itemWrap .txtBox {
	width: 32%;
	font-size: 18px;
	text-align: justify;
}
#sec04 .itemWrap .itemBox {
	width: 21%;
}
#sec04 .itemWrap .itemBox.itemBox_wide {
	width: 32%;
}
/* 周辺環境ページの写真（578×408／482×200）を同じ比率で並べる */
#sec04 .itemWrap .itemBox .imgBox img {
	aspect-ratio: 578 / 408;
	object-fit: cover;
	display: block;
}
#sec04 .itemWrap .itemBox p {
	letter-spacing: 0.05em;
	line-height: 1.2;
	padding-top: 0.5em;
	font-size: 15px;
}
#sec04 .itemWrap .itemBox p span {
	font-size: 200%;
	color: #1c4e84;
}
#parent #sec04 .itemWrap .itemBox p span {
	color: #006934;
}
#sec04 .itemWrap .itemBox p small {
	display: block;
	font-size: 80%;
	line-height: 1.2;
}

/* クルマがなくても暮らせる（親世帯）：健康・利便・暮らし・交通を1枠にまとめる */
#sec04 .carfree {
	background-color: #fff;
	border: #006934 solid 3px;
	margin-top: 3%;
	padding-bottom: 2%;
}
#sec04 .carfree > h5 {
	background-color: #006934;
	color: #fff;
	text-align: center;
	font-size: 26px;
	line-height: 1.2;
	padding: 0.6em;
	letter-spacing: 0.1em;
}
#sec04 .carfree > h5 span {
	font-size: 140%;
}
#sec04 .carfree > .lead {
	text-align: center;
	font-size: 18px;
	font-size: clamp(14px, 1.6vw, 18px);
	padding: 1.2em 20px 0;
	line-height: 1.6;
}
#sec04 .carfree .itemWrap {
	width: 92%;
	margin: 0 auto;
}

/* 間取り */
#sec05 .mainImg h3 span {
	font-size: 130%;
	display: inline;
}
#sec05 .planBox {
	max-width: 1000px;
	background-color: #fff;
	padding: 3% 3% 2%;
	align-items: flex-start;
}
#sec05 .planBox .planName {
	width: 100%;
	max-width: 820px;
	margin: 0 auto 3%;
}
#sec05 .planBox .planLead {
	width: 100%;
	text-align: center;
	font-size: 22px;
	font-size: clamp(16px, 2vw, 22px);
	color: #1c4e84;
	line-height: 1.4;
	padding-bottom: 1.5em;
}
#parent #sec05 .planBox .planLead {
	color: #006934;
}
/* PCは間取り図を主役に（1296×2052の縦長）、面積・ポイント・返済例はやや小さく */
#sec05 .planBox .planImg {
	width: 60%;
}
#sec05 .planBox .planImg .mark {
	padding-top: 10px;
}
#sec05 .planBox .planInfo {
	width: 36%;
}
#sec05 .planBox .planInfo figure {
	margin-bottom: 20px;
}

@media screen and (max-width: 959px) {
	#sec02 .h3Box h3 {
		font-size: clamp(24px, 3.5vw, 28px);
		letter-spacing: 0.1em;
	}
	#sec03 > .flex {
		max-width: 400px;
	}
	#sec03 .flex .itemBox, #sec03 .flex .itemFlex .imgBox {
		width: 100%;
	}
	#sec03 .meritBox h3 {
		font-size: clamp(22px, 3.0vw, 24px);
	}
	#sec03 .meritBox h3 span {
		font-size: 150%;
	}
	#sec03 .meritBox .flex dt {
		font-size: clamp(22px, 3vw, 26px);
	}
	#sec03 .meritBox .flex dd br {
		display: none;
	}
	#sec04 .mainImg h3, #sec05 .mainImg h3 {
		font-size: clamp(28px, 3.8vw, 30px);
	}
	#sec04 .itemWrap h5 {
		font-size: clamp(16px, 2.2vw, 18px);
	}
	#sec04 .itemWrap h5 span {
		font-size: clamp(28px, 3.8vw, 30px);
	}
	#sec04 .itemWrap .txtBox {
		width: 100%;
		font-size: clamp(14px, 2vw, 16px);
		padding-bottom: 1em;
	}
	#sec04 .itemWrap .itemBox {
		width: 30%;
	}
	#sec04 .itemWrap .itemBox.itemBox_wide {
		width: 48%;
	}
	#parent #sec04 .mainImg h3, #parent #sec05 .mainImg h3 {
		background: #006934;
	}
	#sec04 .carfree > h5 {
		font-size: clamp(20px, 3vw, 24px);
	}
	/* SPは planName → 面積・ポイント → planLead → 間取り図 → 返済例 の順に並べ替える。
	   返済例だけ planImg より後ろへ回すため、planInfo を display:contents にして
	   中の figure を planBox 直下のフレックスアイテムとして扱い、order で入替える
	   （DOM順はPC用のまま）。 */
	#sec05 .planBox .planInfo {
		display: contents;
	}
	#sec05 .planBox .planName {
		order: 1;
		margin-bottom: 7%;
	}
	#sec05 .planBox .planInfo figure:nth-child(1) {
		order: 2;
	}
	#sec05 .planBox .planInfo figure:nth-child(2) {
		order: 3;
	}
	#sec05 .planBox .planLead {
		order: 4;
	}
	#sec05 .planBox .planImg {
		order: 5;
	}
	#sec05 .planBox .planInfo figure:nth-child(3) {
		order: 6;
	}
	#sec05 .planBox .planImg {
		width: 100%;
		max-width: 648px;
		margin: 0 auto;
	}
	/* 面積・ポイントは少し小さくセンター、返済例（3つめ）は planName と同じ幅で最下部 */
	#sec05 .planBox .planInfo figure {
		width: 80%;
		max-width: 480px;
		margin: 0 auto 14px;
	}
	#sec05 .planBox .planInfo figure:nth-child(3) {
		width: 100%;
		max-width: none;
		margin: 30px auto 0;
	}
}

@media screen and (max-width: 599px) {
	#sec05 .mainImg .note .pcNote {
		display: none;
	}
	#sec05 .mainImg .note .spNote {
		display: inline;
	}
	#sec02 .h3Box h3 {
		font-size: clamp(16px, 4.6vw, 18px);
		letter-spacing: 0em;
	}
	#sec02 .h3Box p.lead, #sec04 .lead {
		font-size: clamp(13px, 3.7vw, 15px);
		text-align: justify;
		letter-spacing: 0em;
	}
	.btns {
		width: 80%;
	}
	.btns a {
		width: 100%;
		margin-bottom: 5px;
	}
	#sec03 h4, #sec04 h4, #sec05 h4 {
		font-size: clamp(18px, 5.1vw, 20px);
		margin: 0.5em auto;
	}
	#sec03 > .flex {
		width: 90%;
	}
	#sec03 .flex .itemBox dt, #sec03 .other h5 {
		font-size: clamp(16px, 4.6vw, 18px);
		margin-top: 0.5em;
		margin-bottom: 0.5em;
	}
	#sec03 .flex .itemBox dd {
		font-size: clamp(13px, 3.7vw, 15px);
	}
	#sec03 .meritBox h3 {
		font-size: clamp(16px, 4.6vw, 18px);
		line-height: 1.3;
	}
	#sec03 .meritBox h3 span {
		font-size: 130%;
	}
	#sec03 .meritBox .flex {
		padding: 0;
	}
	#sec03 .meritBox .flex dl {
		width: 100%;
		padding: 20px 20px;
	}
	#sec03 .meritBox .flex dl:nth-child(1) {
		border-right: none;
		border-bottom: #999 solid 1px;
	}
	#sec03 .meritBox .flex dt {
		font-size: clamp(20px, 6vw, 23px);
	}
	#sec03 .meritBox .flex dd, #sec03 .meritBox p {
		font-size: clamp(13px, 3.7vw, 15px);
		text-align: justify;
	}
	#sec03 .meritBox p {
		padding: 0 20px 20px;
		line-height: 1.3;
	}
	#sec04 .mainImg h3, #sec05 .mainImg h3 {
		position: static;
		font-size: clamp(19px, 5.3vw, 21px);
		padding: 1em 0.5em;
	}
	#sec04 .mainImg img, #sec05 .mainImg img {
		aspect-ratio: 4 / 3;
	}
	#sec04 .itemWrap h5 {
		font-size: clamp(14px, 4vw, 16px);
	}
	#sec04 .itemWrap h5 span {
		font-size: clamp(19px, 5.3vw, 21px);
	}
	#sec04 .itemWrap .txtBox {
		font-size: clamp(13px, 3.7vw, 15px);
		text-align: justify;
	}
	#sec04 .itemWrap .itemBox {
		width: 75%;
		max-width: 300px;
		margin: 0 auto;
		margin-bottom: 30px;
	}
	#sec04 .itemWrap .itemBox.itemBox_wide {
		width: 75%;
	}
	#sec04 .itemWrap .itemBox p {
		font-size: clamp(14px, 4vw, 16px);
		text-align: center;
	}
	#sec04 .carfree > h5 {
		font-size: clamp(16px, 4.6vw, 18px);
	}
	#sec04 .carfree > .lead {
		text-align: justify;
	}
	#sec05 .planBox {
		padding: 5% 4%;
	}
	#sec05 .planBox .planLead br {
		display: none;
	}
}