@charset "utf-8";

/* フォレスタ守山 / もりやま展示場（PC・SPデザイン 2026.10） */
.is-modelhouse-page { --mh-ink: #272525; }
.l-page.modelhouse { padding: 90px 0 0; color: var(--mh-ink); }
.modelhouse picture, .modelhouse picture img { display: block; width: 100%; height: auto; }
.modelhouse img { display: block; width: 100%; height: auto; }
.modelhouse h1, .modelhouse h2 { margin: 0; font-weight: 400; }
.modelhouse a:focus-visible, .is-modelhouse-page .menu-btn:focus-visible { outline: 3px solid #b99555; outline-offset: 5px; }
.is-modelhouse-page button.menu-btn { padding: 0; border: 0; background: transparent; cursor: pointer; }

/* 1440pxのPCデザインを基準に写真と装飾を配置。 */
.modelhouse-hero { position: relative; aspect-ratio: 1440 / 2486; background: url(../../img/07modelhouse/mv_bg.jpg) center top / 100% auto; }
.modelhouse-hero > * { position: absolute; }
.modelhouse-hero__leaves { width: 42.92% !important; top: -7.5vw; right: 0; pointer-events: none; }
.modelhouse-hero__title { top: 5.75%; left: 30.67%; width: 38.66%; }
.modelhouse-hero__photo01 { top: 15%; left: 15.28%; width: 36.94%; }
.modelhouse-hero__lead { top: 15.4%; left: 57.5%; width: 31.98%; }
.modelhouse-hero__photo02 { top: 26.1%; left: 60%; width: 24.68%; }
.modelhouse-hero__squirrel { top: 42.7%; left: 0; width: 20.23% !important; pointer-events: none; }
.modelhouse-hero__photo03 { top: 47.3%; left: 18.8%; width: 23.29%; }
.modelhouse-hero__story { top: 48%; left: 48.47%; margin: 0; font-size: clamp(13px, 1.6vw, 23px); line-height: 1.9; letter-spacing: .04em; }
.modelhouse-hero__branch { top: 59.5%; right: 0; width: 23.61% !important; pointer-events: none; }
.modelhouse-hero__photo04 { top: 65.3%; left: 47.87%; width: 36.76%; z-index: 1; }
.modelhouse-hero__street { bottom: 0; left: 0; width: 100%; }

/* 展示場区画図・3棟のアンカー・ほか13棟の暮らし */
.modelhouse-overview { position: relative; padding: 0 0 0; background: url(../../img/07modelhouse/mh_bg.jpg) center top / 100% auto no-repeat; }
.modelhouse-overview__badge { position: relative; width: 30.1%; max-width: 433px; aspect-ratio: 433 / 355; margin: 0 auto; }
.modelhouse-overview__badge img { position: absolute; top: -29.3%; left: 0; }
.modelhouse-overview__text { text-align: center; font-size: clamp(18px, 2.15vw, 31px); line-height: 1.8; letter-spacing: .09em; margin: min(3.3vw, 48px) 3% 0; }
.modelhouse-overview h2 { text-align: center; font-size: clamp(22px, 2.8vw, 40px); line-height: 1.6; letter-spacing: .14em; margin: min(3.8vw, 55px) 3% 0; }
.modelhouse-overview__signature { width: 14.22%; max-width: 205px; margin: 8px 23% 0 auto; }
.modelhouse-lot-guide { display: grid; grid-template-columns: 42.5% 52%; column-gap: 5.5%; align-items: center; width: min(69.45%, 1000px); margin: min(6.9vw, 100px) auto 0; }
.modelhouse-lot-nav { display: flex; flex-direction: column; gap: min(2.5vw, 36px); }
.modelhouse-lot-nav a { display: block; transition: opacity .3s, transform .3s; }
.modelhouse-lot-nav a:hover { opacity: .8; transform: translateY(-4px); }
.modelhouse-lot-map { margin: 0; }
.modelhouse-other-homes { width: min(69.45%, 1000px); margin: min(6.3vw, 90px) auto 0; }

.modelhouse-campaign { width: min(69.45%, 1000px); margin: min(8.34vw, 120px) auto; }
.modelhouse-campaign a { display: block; }
.modelhouse-campaign a:hover { opacity: .8; }
.modelhouse-campaign__notes { font-size: clamp(10px, .9vw, 13px); line-height: 1.3; margin-top: 8px; text-align: justify; font-family: "Yu Mincho", "Hiragino Mincho ProN", serif; }

/* 各棟の間取りはPC/SP専用画像を切り替え、文字・寸法の配置を維持。 */
.modelhouse-homes { width: min(83.34%, 1200px); margin: 0 auto; }
.modelhouse-home { --home-color: #96c4b9; border-radius: min(2.36vw, 34px); overflow: hidden; background: var(--home-color); scroll-margin-top: 110px; }
.modelhouse-home--50 { --home-color: #e49e56; }
.modelhouse-home--24 { --home-color: #9cb47a; }
.modelhouse-home + .modelhouse-home { margin-top: min(8.34vw, 120px); }
.modelhouse-home__heading { padding: min(6.5vw, 94px) 3% min(5vw, 72px); text-align: center; }
.modelhouse-home__heading p { font-size: clamp(17px, 2.08vw, 30px); line-height: 2; letter-spacing: .28em; margin: 0 0 min(4.4vw, 63px); }
.modelhouse-home__heading h2 { width: 33.05%; margin: 0 auto; }
.modelhouse-home--50 .modelhouse-home__heading h2 { width: 30.84%; }
.modelhouse-home--24 .modelhouse-home__heading h2 { width: 32.86%; }
.modelhouse-home__plan { background: #e9ece4; }
.modelhouse-home__details { padding: min(7.3vw, 105px) 0 min(5.6vw, 80px); }
.modelhouse-home__details picture { width: 67.34%; margin: 0 auto; }
.modelhouse a.modelhouse-detail-link { display: flex; justify-content: center; align-items: center; width: 320px; max-width: 80%; min-height: 76px; margin: min(6.45vw, 93px) auto 0; padding: 12px 20px; border-radius: 100px; background: #272424; color: #fff; font-size: clamp(14px, 1.6vw, 23px); letter-spacing: .15em; text-align: center; }
.modelhouse a.modelhouse-detail-link:hover { background: #453e37; }

.modelhouse-visit { padding: min(8.3vw, 120px) 4% min(9.5vw, 137px); background: url(../../img/07modelhouse/cta_bg.jpg) center / cover; text-align: center; }
.modelhouse-visit p { font-size: clamp(18px, 2.08vw, 30px); line-height: 1.8; letter-spacing: .08em; margin: 0; }
.modelhouse-visit h2 { width: min(40%, 525px); margin: min(4.16vw, 60px) auto 0; }
.modelhouse-visit__actions { display: flex; justify-content: center; gap: 20px; margin-top: min(5vw, 72px); }
.modelhouse-visit__actions a { display: flex; align-items: center; justify-content: center; width: 310px; min-height: 73px; color: #fff; background: #369638; font-size: 30px; letter-spacing: .08em; }
.modelhouse-visit__actions a:nth-child(2) { background: #942327; }
.modelhouse-visit__actions a:hover { opacity: .8; }
.modelhouse-access iframe { display: block; width: 100%; height: clamp(400px, 41.67vw, 600px); }
.modelhouse-disclaimer { width: calc(100% - 36px); margin: 20px auto 0; font-size: 10px; line-height: 1.8; }

@media (max-width: 800px) {
  .l-page.modelhouse { padding-top: 0; }
  .is-modelhouse-page #header, .is_scroll .is-modelhouse-page #header { background: #fff; }
  .is-modelhouse-page .h__id img { filter: none; }
  .is-modelhouse-page .menu-btn .bar { background: #222; }
  .is-modelhouse-page.is-open-menu .menu-btn .bar { background: #fff; }
  .modelhouse-hero { aspect-ratio: 600 / 2026; background-image: url(../../img/07modelhouse/mv_bg_sp.jpg); }
  .modelhouse-hero__leaves { width: 51.5% !important; top: -9.5vw; }
  .modelhouse-hero__title { top: 7.4%; left: 12.67%; width: 74.67%; }
  .modelhouse-hero__photo01 { top: 16.14%; left: 5.83%; width: 51.5%; }
  .modelhouse-hero__photo02 { top: 22.8%; left: 63.17%; width: 30.92%; }
  .modelhouse-hero__squirrel { top: 36.5%; width: 44.83% !important; }
  .modelhouse-hero__lead { top: 40.4%; left: 20.67%; width: 58.61%; }
  .modelhouse-hero__photo03 { top: 53.2%; left: 5.83%; width: 33.27%; }
  .modelhouse-hero__story { top: 55.3%; left: 44.4%; font-size: clamp(9px, 2.833vw, 22px); line-height: 2; letter-spacing: 0; }
  .modelhouse-hero__branch { top: 49.25%; width: 40% !important; }
  .modelhouse-hero__photo04 { top: 71.8%; left: 27%; width: 61.67%; }
  .modelhouse-hero__street { width: 100%; }
  .modelhouse-overview { background-image: url(../../img/07modelhouse/mh_bg_sp.jpg); }
  .modelhouse-overview__badge { width: 50.82%; max-width: none; aspect-ratio: 305 / 250; }
  .modelhouse-overview__badge img { top: -27.6%; }
  .modelhouse-overview__text { font-size: clamp(13px, 3.75vw, 27px); line-height: 1.75; letter-spacing: .03em; margin-top: 4vw; }
  .modelhouse-overview h2 { font-size: clamp(15px, 4.5vw, 34px); letter-spacing: .04em; margin: 6.4vw 3% 0; }
  .modelhouse-overview__signature { width: 24%; max-width: none; margin: 1vw 5.8% 0 auto; }
  .modelhouse-lot-guide { display: flex; flex-direction: column; width: 100%; margin-top: 13.33vw; }
  .modelhouse-lot-map { order: -1; width: 63.33%; }
  .modelhouse-lot-nav { width: 58.5%; gap: 5vw; margin-top: 10vw; }
  .modelhouse-other-homes { width: 80%; margin-top: 12vw; }
  .modelhouse-campaign { width: 88.33%; margin: 15vw auto; }
  .modelhouse-campaign__notes { font-size: clamp(10px, 2.16vw, 15px); line-height: 1.3; margin-top: 8px; }
  .modelhouse-homes { width: 88.33%; }
  .modelhouse-home { border-radius: 4vw; scroll-margin-top: 80px; }
  .modelhouse-home + .modelhouse-home { margin-top: 8.33vw; }
  .modelhouse-home__heading { padding: 10vw 4% 7.5vw; }
  .modelhouse-home__heading p { font-size: clamp(12px, 2.833vw, 22px); line-height: 1.9; letter-spacing: .12em; margin-bottom: 6.5vw; }
  .modelhouse-home__heading h2 { width: 61%; }
  .modelhouse-home--50 .modelhouse-home__heading h2 { width: 56.9%; }
  .modelhouse-home--24 .modelhouse-home__heading h2 { width: 60.6%; }
  .modelhouse-home__details { padding: 8.33vw 0 9.33vw; }
  .modelhouse-home__details picture { width: 90.57%; }
  .modelhouse a.modelhouse-detail-link { width: 51%; max-width: none; min-height: 44px; margin-top: 9.66vw; padding: 3vw 1.5vw; font-size: clamp(12px, 3.16vw, 22px); letter-spacing: .08em; }
  .modelhouse-visit { padding: 14.66vw 3% 18.66vw; }
  .modelhouse-visit p { font-size: clamp(12px, 3.33vw, 24px); line-height: 1.9; letter-spacing: .02em; }
  .modelhouse-visit h2 { width: 65.6%; margin-top: 7vw; }
  .modelhouse-visit__actions { display: none; } /* SPは画面下の固定ボタンに集約。 */
  .modelhouse-access iframe { height: 75vw; min-height: 280px; max-height: 500px; }
  .modelhouse-disclaimer { width: 88.33%; margin-top: 5vw; font-size: clamp(10px, 2.66vw, 17px); line-height: 1.7; }
}

@media (prefers-reduced-motion: reduce) {
  .is-modelhouse-page, .is-modelhouse-page * { animation: none !important; transition: none !important; }
}