@charset "UTF-8";
/* ===== プランページ（plan/）共通変数 ===== */
.plan {
	--c-text: #333;
	--c-btn: #9fa0a0;
	--f-serif: "Noto Serif JP", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
	--f-sans: "Noto Sans JP", "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic ProN", sans-serif;
	--f-en: "Jost", "Josefin Sans", "Noto Sans JP", sans-serif;
	--f-en-serif: "Cormorant Garamond", "Times New Roman", "Noto Serif JP", serif;
	color: var(--c-text);
	font-family: var(--f-serif);
	line-height: 2;
}
.plan img { max-width: 100%; height: auto; display: block; }
.plan :where(ul) { list-style: none; margin: 0; padding: 0; }
.plan .pc { display: inline; }
.plan .sp { display: none; }

/* ===== プラン導入 ===== */
.plan { padding-top: 100px; } /* 固定ヘッダー分（PC 100px） */
.plan-intro { text-align: center; padding: 3.5rem 0 5.5rem; }
.plan.plan2 { padding-top: 3.5rem; margin-top: 100px; } /* 間取り詳細（e.php／kg.php）：タイトルをPLANトップと同じ見せ方に */
.plan.plan2 .plan__title { text-align: center; }
.plan.plan2 .plan5 img { margin: 0 auto; } /* 間取り図を中央に */
.plan.plan2 .btnList { list-style: none; }
.plan h2.plan__title { /* 旧CSS（.plan h2：白文字）より優先 */
	font-family: var(--f-en);
	font-weight: 300;
	letter-spacing: .06em;
	font-size: clamp(1.5rem, 2.083vw, 2.5rem);
	line-height: 1.2;
	color: var(--c-text); /* 2026-10 修正：共通CSSの見出し色（白）を上書きし、タイトルが見えない不具合を解消 */
	padding: 0;
	margin: 0 0 3rem; /* タイトルと挿し絵の余白を少し広げる（PC） */
}
.plan__icon { width: clamp(3.5rem, 5.2vw, 6.2rem); margin: 0 auto 2.5rem; }
.plan__lead {
	font-size: clamp(1.1rem, 1vw + .5rem, 1.6rem);
	letter-spacing: .1em;
	line-height: 1.8;
	margin: 0 0 1.5rem;
}
.plan__body {
	font-size: clamp(.85rem, .4vw + .55rem, 1rem);
	letter-spacing: .04em;
	line-height: 2.2;
	margin: 0 0 4.5rem;
}
.plan__btn { margin: 0; }
.plan__btn a {
	display: inline-block;
	width: clamp(12rem, 15.2vw, 18.3rem); /* 292/1920 */
	background: var(--c-btn);
	color: #fff;
	text-decoration: none;
	font-size: clamp(1rem, .7vw + .5rem, 1.3rem);
	letter-spacing: .1em;
	line-height: 1;
	padding: .75em 0;
	transition: opacity .3s;
}
.plan__btn a:hover { opacity: .7; }

/* ===== 間取り一覧（各タイプのバナー画像を横並び） ===== */
.plan-list { width: 65.42%; margin: 0 auto; padding: 5.5rem 0 6rem; } /* 1256/1920 */
.plan-list__inner { width: 61.6%; margin: 0 auto; } /* PC：バナー2枚（各28.8%＝36%の20%減）＋間隔4%＝61.6%を中央に。注意書きは左のバナーの左端に揃う */
.plan-cards {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 2rem 6.49%; /* 4%／61.6% */
}
.plan-card { width: 46.75%; } /* 28.8%／61.6% */
.plan-card a { display: block; transition: opacity .3s; }
.plan-card a:hover { opacity: .7; }
.plan-card img { width: 100%; }
.plan-list__note {
	font-family: var(--f-sans);
	font-size: clamp(.65rem, .3vw + .45rem, .8rem);
	line-height: 1.6;
	margin: .8rem 0 0;
}

/* ===== SP ===== */
@media (max-width: 1023px) {
	.plan .pc { display: none; }
	.plan .sp { display: inline; }
	.plan { padding-top: 76px; }
	.plan.plan2 { padding-top: 2.5rem; margin-top: 76px; }
	.plan-intro { padding: 2.5rem 0 3rem; }
	.plan h2.plan__title { margin-bottom: calc(2.25rem - 15px); } /* SP：挿し絵の上を15px詰める（従来2.25rem） */
	.plan__icon { margin-bottom: calc(2.5rem - 15px); } /* SP：挿し絵の下を15px詰める */
	.plan__body { width: 90%; margin: 0 auto 3rem; text-align: left; }
	.plan-list { width: 90%; padding: 3rem 0 4rem; }
	.plan-list__inner { width: 70%; } /* SP：バナーは全体の70%・1列 */
	.plan-cards { gap: 1.5rem 0; }
	.plan-card { width: 100%; }
}
/* ===== タブレット（768〜1023px）個別調整 ===== */
@media (min-width: 768px) and (max-width: 1023px) {
	.plan-cards { gap: 1.5rem 4%; }
	.plan-card { width: 48%; }
}
@charset "utf-8";



/*スマホ*/
@media screen and (max-width:768px){
/* ナビ */
/* 設備・仕様内ナビ */
.plan h2{font-weight:700;padding:90px 0px 10px 0px;text-align:center;margin:0px auto 0px auto;color:#fff;letter-spacing:2px;font-size: clamp(16px, 1.4vw, 22px);font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝","ＭＳ 明朝", serif;}
	
	
	
.btnList {
    width:90%;
    margin: 1rem auto 2rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 91%;
}

.btnList li{
	width: 100%;
    margin-bottom: 15px;
}

.btnList li a {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 14px;
    color: #fff;
    background: #59607c;
    letter-spacing: 0.1rem;
    line-height: 3;
    text-decoration:none; 
    transition: .3s all;
}

.btnList li a:hover {opacity: 0.8;}

.plan1 {width:96%;height:auto;margin:0px auto 0px auto;padding: 20px 0px 0px 0px;text-align:center;}
.plan1 img{max-width:100%;}

	
.subnavi1 {width:85%;margin: 30px auto 0px auto;font-weight: 600;}
.subnavi1:after {content: "";clear: both;display: block;}
.subnavi1 li {float: left;width: 100%;text-align: center;box-sizing: border-box;line-height: 36px;font-size:100%;border: 1px solid #ccc;background-color: #868687;color: #fff;margin: 0px 1% 10px auto;}
.subnavi1 a {display: block;text-decoration: none;color: #000;background-color: #fff;color: #000;}
.subnavi1 li:nth-child(4) {margin: 0px auto 0px auto;}

 .hvr-fade {display: inline-block;vertical-align: middle;;transform: perspective(1px) translateZ(0);box-shadow: 0 0 1px transparent;overflow: hidden;-webkit-transition-duration: 0.5s;transition-duration: 0.5;-webkit-transition-property: color, background-color;transition-property: color, background-color;}

.hvr-fade:hover, .hvr-fade:focus, .hvr-fade:active {background-color: #000;color: white; padding: 0px 0px 0px 0px;}
	

.title {margin: 7% auto 5% auto;font-size: clamp(0.8rem, 1.2vw, 1.2em); color:#000;font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝","ＭＳ 明朝", serif;line-height: 150%;font-weight: 400; text-align:center;}
.designfont2 {width:100%;margin:0px auto 0px auto;padding: 0px 0px 4% 0px;text-align:left;line-height:160%;font-size: clamp(0.9rem, 1.1vw, 1.1rem); letter-spacing: 0px; font-weight: 400; letter-spacing:1px;}
.designtext{margin: 0px auto 0px auto; text-align:left; padding: 0px 0px 10px 0px;line-height:160%;;font-size: clamp(0.8rem, 1.0vw, 1.0rem);color:#000;}
.accesscap{width:100%;height:auto;margin:9% auto 6% auto;padding: 0px 0px 0px 0px;text-align:left;font-size: clamp(0.7rem, 0.8vw, 0.8rem);font-weight: 400;line-height:140%;}
	
.designfont22 {width:100%;margin:0px auto 0px auto;padding: 0px 0px 0px 0px;text-align:left!important;line-height:150%;font-size: clamp(1.0rem, 1.2vw, 1.2rem); font-weight: 400; letter-spacing:0px;}
.designtext2{margin: 3% auto 0px auto; text-align:left; padding: 0px 0px 10px 0px;line-height:150%;;font-size: clamp(0.8rem, 1.0vw, 1.0rem);color:#000;}
.designtext1{margin: 3% auto 0px auto; text-align:left; padding: 1% 0px 1% 0px;line-height:160%;;font-size: clamp(0.8rem, 1.0vw, 1.0rem);color:#000;}
	
.plan6{max-width:980px;width:90%;height:auto;margin:0px auto 0px auto;padding: 2% 0px 0px 0px;text-align:center;}
.plan6-left{float:left;width:100%;height:auto;text-align:left;margin: 30px 0px 0px 0px;}
.plan6-right{float:right;width:100%;height:auto;text-align:left;margin: 30px 0px 0px 0px;}

.plan66{max-width:980px;width:90%;height:auto;margin:40px auto 0px auto;padding: 0px 0px 0px 0px;text-align:center;background-color:#f3f4f4}

.plan7{max-width:980px;width:90%;height:auto;margin:6% auto 0% auto;padding: 0px 0px 0px 0px;}
.plan7-left{float:left;width:100%;height:auto;text-align:left;margin: 0px 0px 20px 0px;}
.plan7-right{float:right;width:100%;height:auto;text-align:left;margin: 0px 0px 0px 0px;padding: 0px 0px 0px 0px;}

.plan4{width:100%;height:auto;margin:2% auto 0% auto;padding: 3% 0% 2% 0%;text-align:center;background:#150201}
.plan5{width:90%;height:auto;margin:0% auto 0% auto;padding: 20px 5% 2% 5%;text-align:center;background:#fff}

.f-container2 {display: flex;flex-wrap: wrap;justify-content: flex-start;max-width:980px;width: 90%;margin: 0px auto 20px auto;padding: 0px 0px 30px 0px; } 
.f-item2 {width: 45%;margin-right: 2.5%;margin-left: 2.5%;margin-top: 0px; text-align:left;font-size: 90%; }
.f-item2 img{ width: 100%;margin-bottom: 8px;}
	
.plancap{ width:90%;height: auto;margin: 0px auto 0px auto;padding: 30px 0px 30px 0px;font-size:75%;text-align:center;line-height:150%;font-weight: 400;}
.plancap2{max-width:980px;width:90%;height: auto;margin: 0px auto 0px auto;padding: 30px 0px 30px 0px;font-size:70%;text-align:left;line-height:150%;font-weight: 400;}
	
.airplan{width:90%;height:auto;margin:5% auto 0px auto;padding: 3% 5% 3% 5%;text-align:center;background:#f3f4f4 }
	
.btnList {
    width:90%;
    margin: 2rem auto 2rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 91%;
}

.btnList li{
	width: 100%;
    margin-bottom: 15px;
}

.btnList li a {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 14px;
    color: #fff;
    background: #59607c;
    letter-spacing: 0.1rem;
    line-height: 3;
    text-decoration:none; 
    transition: .3s all;
}

.btnList li a:hover {opacity: 0.8;}
	
	
#land::before {
  content: "";
  display: block;
  height: 100px;
  margin-top: -100px;
  visibility: hidden;
} 
#air::before {
  content: "";
  display: block;
  height: 100px;
  margin-top: -100px;
  visibility: hidden;
}
#fine::before {
  content: "";
  display: block;
  height: 100px;
  margin-top: -100px;
  visibility: hidden;
}
}


/*PC*/
@media screen and (min-width:769px){
	

	
/* ナビ */
.subnavi1 {max-width:200px;width:90%;margin: 50px auto 0px auto;font-weight: 600;text-align: center;}
.subnavi1:after {content: "";clear: both;display: block;}
.subnavi1 li {float: left;width: 100%;text-align: center;box-sizing: border-box;line-height: 36px;font-size:100%;border: 1px solid #ccc;background-color: #868687;color: #fff;margin: 0px 1% 0px auto;}
.subnavi1 a {display: block;text-decoration: none;color: #000;background-color: #fff;color: #000;}
.subnavi1 li:nth-child(4) {margin: 0px auto 0px auto;}
	
 .hvr-fade {display: inline-block;vertical-align: middle;;transform: perspective(1px) translateZ(0);box-shadow: 0 0 1px transparent;overflow: hidden;-webkit-transition-duration: 0.5s;transition-duration: 0.5;-webkit-transition-property: color, background-color;transition-property: color, background-color;}
	
.hvr-fade:hover, .hvr-fade:focus, .hvr-fade:active {background-color: #000;color: white; padding: 0px 0px 0px 0px;}

.title {margin: 7% auto 5% auto;font-size: clamp(1.2rem, 1.4vw, 1.4em); color:#fff;font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝","ＭＳ 明朝", serif;line-height: 150%;font-weight: 400; text-align:center;}
.designfont2 {width:100%;margin:0px auto 0px auto;padding: 0px 0px 30px 0px;text-align:center;line-height:160%;font-size: clamp(1.2rem, 1.4vw, 1.4rem); letter-spacing: 0px; font-weight: 400; letter-spacing:1px;}
.designtext{margin: 0px auto 0px auto; text-align:center; padding: 0px 0px 10px 0px;line-height:200%;;font-size: clamp(0.8rem, 1.0vw, 1.0rem);color:#000;}
.accesscap{width:80%;height:auto;margin:9% auto 3% auto;padding: 0px 0px 0px 0px;text-align:center;font-size: clamp(0.7rem, 0.8vw, 0.8rem);font-weight: 400;line-height:140%;}
	
.designfont22 {width:100%;margin:0px auto 0px auto;padding: 0px 0px 0px 0px;text-align:left!important;line-height:160%;font-size: clamp(1.2rem, 1.4vw, 1.4rem); font-weight: 400; letter-spacing:0px;}
.designtext2{margin: 3% auto 0px auto; text-align:left; padding: 0px 0px 10px 0px;line-height:160%;;font-size: clamp(1.0rem, 1.2vw, 1.2rem);color:#000;}
.designtext1{margin: 0px auto 0px auto; text-align:left; padding: 1% 0px 1% 0px;line-height:160%;;font-size: clamp(0.8rem, 1.0vw, 1.0rem);color:#000;}
	
.plan1 {width:80%;height:auto;margin:0px auto 0px auto;padding: 30px 0px 50px 0px;text-align:center;}
.plan1	img {max-width: 100%;height: auto;display: block;margin:0px auto 0px auto;}
	
.plan h2{font-weight:700;padding:140px 0px 0px 0px;text-align:center;margin:0px auto 0px auto;color:#fff;letter-spacing:2px;font-size: clamp(16px, 1.8vw, 24px);font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝","ＭＳ 明朝", serif;}
	
	
.btnList {
    max-width: 730px;
    margin: 5rem auto 2rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 91%;
}

.btnList li{
	width: 49%;
    margin-bottom: 15px;
}

.btnList li a {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 16px;
    color: #fff;
    background: #59607c;
    letter-spacing: 0.1rem;
    line-height: 3;
    text-decoration:none; 
    transition: .3s all;
}

.btnList li a:hover {opacity: 0.8;}

	
.plan6{max-width:980px;width:90%;height:auto;margin:0px auto 0px auto;padding: 2% 0px 0px 0px;text-align:center;}
.plan6-left{float:left;width:46%;height:auto;text-align:left;margin: 30px 0px 0px 0px;}
.plan6-right{float:right;width:46%;height:auto;text-align:left;margin: 30px 0px 0px 0px;}

.plan66{max-width:980px;width:90%;height:auto;margin:40px auto 0px auto;padding: 0px 0px 0px 0px;text-align:center;background-color:#f3f4f4}

.plan7{max-width:980px;width:90%;height:auto;margin:6% auto 0% auto;padding: 0px 0px 0px 0px;}
.plan7-left{float:left;width:45%;height:auto;text-align:left;margin: 0px 0px 20px 0px;}
.plan7-right{float:right;width:53%;height:auto;text-align:left;margin: 0px 0px 0px 0px;padding: 0px 0px 0px 0px;}


.plan4{width:100%;height:auto;margin:0% auto 0% auto;padding: 3% 0% 2% 0%;text-align:center;background:#150201}
.plan5{width:100%;height:auto;margin:2% auto 0% auto;padding: 3% 0% 2% 0%;text-align:center;background:#fff}
	
.f-container2 {display: flex;flex-wrap: wrap;justify-content: flex-start;max-width:980px;width: 80%;margin: 0px auto 5% auto } 
.f-item2 {width: 30%;margin-right: 1.5%;margin-left: 1.5%;margin-top: 20px; text-align:left;font-size: 90%; }
.f-item2 img{ width: 100%;margin-bottom: 8px;}
	
.plancap{ width:90%;height: auto;margin: 0px auto 0px auto;padding: 30px 0px 30px 0px;font-size:75%;text-align:center;line-height:150%;font-weight: 400;}
.plancap2{max-width:980px;width:90%;height: auto;margin: 0px auto 0px auto;padding: 30px 0px 30px 0px;font-size:75%;text-align:center;line-height:150%;font-weight: 400;}
	
.airplan{width:90%;height:auto;margin:5% auto 0px auto;padding: 3% 5% 3% 5%;text-align:center;background:#f3f4f4 }
	
#land::before {
  content: "";
  display: block;
  height: 100px;
  margin-top: -100px;
  visibility: hidden;
} 
#air::before {
  content: "";
  display: block;
  height: 100px;
  margin-top: -100px;
  visibility: hidden;
}
#fine::before {
  content: "";
  display: block;
  height: 100px;
  margin-top: -100px;
  visibility: hidden;
}
}



@media print {
    /* 不要な要素を非表示（継続） */
    .footer, .hidden-print, .headertop, .hdrleft, .hdrright, .gnavibg, .gnavi, .infobg, .footer4,
    .ptitle, h2, .footerbg, .gnavi2bg, .form, .header, .headerbg, 
    .plansubnavi1, .copyright, #page-top, .topobi1, .btnList {
        display: none !important;
    }

    /* 1. ページ自体の余白をゼロに強制固定 */
    @page {
        margin: 0;
    }

    /* 2. bodyの設定変更：transformをやめ、zoomか幅指定で調整 */
    body {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        /* transformの代わりにzoomを使うと、余計な空白ページが出にくくなります */
        zoom: 0.7; 
    }

    /* 3. 各コンテナの「高さ」をリセットし、上詰めに設定 */
    .wrap, .plan, .plan4, .plan5 {
        width: 100% !important;
        height: auto !important; /* 高さを自動にして、中身に合わせる */
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        float: none !important;
        position: static !important; /* 位置固定を解除 */
    }

    /* 4. 画像の上下余白を排除 */
    .plan5 img {
        display: block;
        margin: 0 auto !important;
        max-width: 100%;
        height: auto !important;
        page-break-inside: avoid; /* 画像の途中でページを割らない */
    }
}