@charset "utf-8";

/* フォレスタ守山 / プラン（PC・SPデザイン 2026.09） */
.is-plan-page {
  --plan-ink: #465164;
  --plan-muted: #75818d;
  --plan-beige: #eeeeee;
}
.l-page.plan { padding: 90px 0 0; }
.plan picture, .plan picture img { display: block; width: 100%; height: auto; }
.plan h1, .plan h2, .plan h3 { font-weight: 400; }
.plan button { font: inherit; cursor: pointer; }
.plan a:focus-visible, .plan button:focus-visible, .plan-page-top:focus-visible {
  outline: 3px solid #b99555;
  outline-offset: 5px;
}
.plan-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.plan-sp-only { display: none; }

/* 写真は縦横比を固定し、フェードと緩やかなズームで切り替える。 */
.plan-slider { position: relative; overflow: hidden; isolation: isolate; touch-action: pan-y; }
.plan-slider__track { position: relative; height: 100%; }
.plan-slider__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease; }
.plan-slider__slide.is-active { opacity: 1; z-index: 1; }
.plan-slider__slide picture, .plan-slider__slide picture img { height: 100%; }
.plan-slider__slide img { object-fit: cover; }
.plan-hero.is-ready .plan-slider__slide.is-active img { animation: plan-photo-zoom 6.5s linear both; }
@keyframes plan-photo-zoom { from { transform: scale(1.045); } to { transform: scale(1); } }
.plan-hero { aspect-ratio: 2880 / 1715; color: #fff; }
.plan-hero__heading {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  pointer-events: none; text-align: center;
  animation: plan-title-in 1.8s ease both;
}
.plan-hero__heading h1 { font-family: garamond, serif; font-size: clamp(40px, 4.2vw, 80px); line-height: 1; letter-spacing: .17em; padding-left: .17em; }
.plan-hero__heading p { font-family: garamond, serif; font-size: clamp(12px, 1.25vw, 24px); letter-spacing: .17em; margin-top: .6em; }
@keyframes plan-title-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.plan a.plan-hero__view { position: absolute; right: 7%; bottom: 6%; z-index: 2; color: #fff; font-family: sans-serif; font-size: 12px; letter-spacing: .1em; display: flex; gap: 40px; align-items: center; padding: 10px 0; border-bottom: 1px solid #fff; }
.plan-hero__view span { font-size: 25px; line-height: .5; }
.plan-slider__controls[hidden] { display: none; }
.plan-slider__controls { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.plan-slider__controls button { pointer-events: auto; border: 0; }
.plan-slider__dots { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); display: flex; }
.plan-slider__dots button { position: relative; width: 32px; height: 32px; padding: 0; background: transparent; }
.plan-slider__dots button::after { content: ""; position: absolute; inset: 11px; border-radius: 50%; background: #fff; opacity: .55; transition: opacity .3s; }
.plan-slider__dots button[aria-pressed="true"]::after { opacity: 1; }
.plan-slider__arrow { position: absolute; top: calc(50% - 24px); width: 30px; height: 48px; background: rgba(255,255,255,.9); }
.plan-slider__arrow::before { content: ""; display: block; width: 12px; height: 12px; border-top: 1px solid var(--plan-ink); border-right: 1px solid var(--plan-ink); margin: auto; transform: rotate(45deg); }
.plan-slider__arrow--prev { left: 15px; }
.plan-slider__arrow--prev::before { transform: rotate(-135deg); }
.plan-slider__arrow--next { right: 15px; }
.plan-stories { background: var(--plan-ink); }
.plan-story { display: grid; grid-template-columns: 1fr 1fr; background: var(--plan-ink); color: #fff; }
.plan-story__gallery { aspect-ratio: 288 / 343; }
.plan-story--reverse .plan-story__gallery { grid-column: 2; grid-row: 1; }
.plan-story--reverse .plan-story__copy { grid-column: 1; grid-row: 1; }
.plan-story__copy { display: flex; flex-direction: column; justify-content: center; text-align: center; padding: 8%; }
.plan-story__copy h2 { font-family: garamond, serif; font-size: clamp(32px, 3.65vw, 70px); letter-spacing: .06em; line-height: 1.2; }
.plan-story__lead { font-size: clamp(15px, 1.25vw, 24px); line-height: 1.9; letter-spacing: .2em; margin-top: 2.5em; }
.plan-story__text { font-size: clamp(11px, .84vw, 16px); line-height: 2.5; margin-top: 2em; }
/* PCではナビゲーションを表示せず、縦スクロールだけで写真を横移動。 */
@media (min-width: 801px) {
  .plan-story .plan-slider__controls { display: none; }
  .plan-story .plan-slider__slide img { animation: none; transform: none; }
  .plan-story.is-scroll-pinned {
    /* 画像幅はセクションの1/2。写真の288:343に合わせて高さを決める。 */
    height: auto;
    aspect-ratio: 576 / 343;
    min-height: 0;
    overflow: hidden;
  }
  .plan-story.is-scroll-pinned .plan-story__gallery { height: 100%; min-width: 0; aspect-ratio: 288 / 343; }
  .plan-story.is-scroll-pinned .plan-slider__track { display: flex; width: 100%; will-change: transform; }
  .plan-story.is-scroll-pinned .plan-slider__slide {
    position: relative;
    inset: auto;
    flex: 0 0 100%;
    min-width: 0;
    height: 100%;
    opacity: 1;
    z-index: auto;
    transition: none;
    overflow: hidden;
  }
  .plan-story.is-scroll-pinned .plan-slider__slide img { animation: none; transform: none; }
  .plan-story.is-scroll-pinned .plan-story__copy { min-width: 0; padding: 5%; }
}


/* 告知・区画図・号地へのリンク */
.plan-overview { padding: clamp(100px, 14vw, 270px) 0 clamp(100px, 11vw, 210px); }
.plan-announcement { width: min(60%, 1138px); margin: auto; }
.plan-announcement__price { width: 76.63%; margin: 60px auto 0; }
.plan-map { width: min(64%, 1200px); margin: clamp(120px, 15vw, 285px) auto 0; text-align: center; }
.plan-map figcaption { display: inline-block; font-size: clamp(18px, 1.8vw, 34px); letter-spacing: .12em; border-bottom: 1px solid; padding: 0 .15em .15em; margin-bottom: 45px; }
.plan-lot-nav { width: min(70%, 1320px); margin: 110px auto 0; display: flex; gap: 5%; }
.plan-lot-nav a { display: block; flex: 1; min-width: 0; box-shadow: 5px 7px 9px #0002; transition: transform .3s, opacity .3s; }
.plan-lot-nav a:hover { transform: translateY(-5px); opacity: .8; }

/* 背景はデザインPDFに埋め込まれた素材を書き出して使用。 */
.plan-design { padding: 130px 0 110px; background: var(--plan-beige) url(../../img/04plan/plan_design_bg.webp) no-repeat center top; background-size: 100% auto; color: var(--plan-muted); }
.plan-design__intro { text-align: center; }
.plan-design__intro h2 { font-family: garamond, serif; font-size: clamp(40px, 5.2vw, 100px); line-height: 1; }
.plan-design__subtitle { width: min(55%, 865px); margin: 45px auto 0; }
.plan-design__text { font-size: clamp(12px, .84vw, 16px); line-height: 2.5; margin: 30px auto 0; width: 90%; }
.plan-design__map { width: min(62.5%, 1200px); margin: 45px auto 80px; }
.plan-design__panel { width: min(83%, 1600px); margin: auto; padding: 95px min(5%, 96px); background: #fff; color: var(--plan-ink); }
.plan-area-title { margin-bottom: 65px; }
.plan-private-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 7.14%; row-gap: 85px; }
.plan-private-grid__item:first-child, .plan-private-grid__item:last-child { grid-column: 1 / -1; }
.plan-common { margin-top: 180px; }
.plan-common__item + .plan-common__item { margin-top: 80px; }
.plan-design__visit { text-align: center; margin-top: 130px; }
.plan-design__visit p { font-size: clamp(16px, 1.6vw, 28px); letter-spacing: .14em; line-height: 1.6; }
.plan a.plan-action { position: relative; display: flex; align-items: center; justify-content: center; width: 460px; max-width: 100%; min-height: 76px; padding: 18px 60px; background: linear-gradient(105deg, #831b22, #480e13); color: #fff; font-size: 17px; letter-spacing: .2em; }
.plan a.plan-action::after { content: ""; position: absolute; right: 26px; width: 34px; height: 7px; background: url(../img/btn_arrow_white.svg) no-repeat center / contain; transition: transform .3s; }
.plan a.plan-action:hover { opacity: .8; }
.plan a.plan-action:hover::after { transform: translateX(5px); }
.plan-design__visit .plan-action { width: 460px; margin: 60px auto 0; }
.plan a.plan-action--request { background: linear-gradient(105deg, #32744c, #132e21); }

/* 各号地の間取りはPC/SPの専用画像をそのまま表示する。 */
.plan-homes__heading { text-align: center; background: #a08c76; color: #fff; padding: 70px 0 55px; }
.plan-homes__heading h2 { font-family: garamond, serif; font-size: 70px; line-height: 1; letter-spacing: .25em; padding-left: .25em; }
.plan-homes__heading span { display: block; font-family: 'Zen Old Mincho', serif; font-size: 15px; letter-spacing: .15em; margin-top: 18px; }
.plan-homes__intro { font-size: clamp(16px, 1.65vw, 30px); letter-spacing: .18em; line-height: 1.8; text-align: center; margin: 100px 5% 80px; }
.plan-home { width: min(73%, 1400px); margin: 0 auto; scroll-margin-top: 120px; }
.plan-home + .plan-home { margin-top: 200px; }
.plan-home__layout { margin-top: 80px; }
.plan-home__photos { width: 83.34%; margin: 70px auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 5%; }
.plan-final-actions { display: flex; justify-content: center; gap: 45px; width: 90%; margin: 240px auto 200px; }
a.plan-page-top { display: flex; align-items: center; justify-content: center; gap: 30px; padding: 40px 0; background: #181a17; color: #b7a58d; font-family: garamond, serif; font-size: 18px; letter-spacing: .2em; }
.plan-page-top span { font-size: 24px; }
.plan [data-plan-reveal].is-pending { opacity: 0; transform: translateY(24px); }
.plan [data-plan-reveal] { transition: opacity .8s ease, transform .8s ease; }

@media (max-width: 800px) {
  .l-page.plan { padding: 0; }
  .plan-sp-only { display: inline; }
  .plan-hero { aspect-ratio: 960 / 1238; }
  .plan-hero__heading h1 { font-size: clamp(32px, 7.5vw, 48px); }
  .plan-hero__heading p { font-size: clamp(9px, 2.15vw, 14px); letter-spacing: .12em; }
  .plan a.plan-hero__view { font-size: 10px; bottom: 8%; right: 5%; gap: 18px; }
  .plan-slider__dots { bottom: 4px; }
  .plan-slider__dots button { width: 30px; height: 36px; }
  .plan-slider__dots button::after { inset: 13px 10px; }
  .plan-slider__arrow { width: 24px; height: 46px; }
  .plan-slider__arrow--prev { left: 12px; }
  .plan-slider__arrow--next { right: 12px; }
  .plan-story { display: flex; flex-direction: column; }
  .plan-story__gallery { width: 100%; aspect-ratio: 960 / 738; }
  .plan-story .plan-slider__controls { display: none; }
  .plan-story .plan-slider.is-ready .plan-slider__slide.is-active img { animation: plan-photo-zoom 6.5s linear both; }
  .plan-story__copy { padding: 10% 4% 8%; }
  .plan-story__copy h2 { font-size: clamp(32px, 8.6vw, 55px); }
  .plan-story__lead { font-size: clamp(16px, 4.1vw, 27px); line-height: 1.65; letter-spacing: .12em; margin-top: 2em; }
  .plan-story__text { font-size: clamp(13px, 3.3vw, 21px); line-height: 1.9; margin-top: 1.25em; }
  .plan-overview { padding: 22% 0 19%; }
  .plan-announcement { width: 88%; }
  .plan-announcement__price { width: 99.3%; margin-top: 8%; }
  .plan-map { width: 100%; margin-top: 21%; }
  .plan-map figcaption { font-size: clamp(18px, 4.4vw, 28px); margin-bottom: 5%; }
  .plan-lot-nav { width: 72%; flex-direction: column; gap: 35px; margin-top: 16%; }
  .plan-design { padding: 19% 0 14%; background-size: auto 1050px; }
  .plan-design__intro h2 { font-size: clamp(32px, 9.4vw, 60px); }
  .plan-design__subtitle { width: 78%; margin-top: 9%; }
  .plan-design__text { font-size: clamp(13px, 3.35vw, 21px); line-height: 1.85; width: 94%; margin-top: 8%; }
  .plan-design__map { width: 100%; margin: 9% auto 12%; }
  .plan-design__panel { width: 92%; padding: 5% 2.3% 10%; }
  .plan-area-title { margin-bottom: 3%; }
  .plan-private-grid { display: flex; flex-direction: column; gap: 75px; }
  .plan-common { margin-top: 100px; }
  .plan-common__item + .plan-common__item { margin-top: 65px; }
  .plan-design__visit { margin: 70px 2% 0; }
  .plan-design__visit p { font-size: clamp(15px, 3.5vw, 22px); line-height: 1.8; }
  .plan a.plan-action { font-size: clamp(14px, 3.4vw, 22px); min-height: 58px; padding: 16px 42px 16px 25px; letter-spacing: .13em; }
  .plan a.plan-action::after { right: 18px; width: 27px; }
  .plan-design__visit .plan-action { width: 90%; margin-top: 35px; }
  .plan-homes__heading { padding: 9% 0 8%; }
  .plan-homes__heading h2 { font-size: clamp(32px, 8vw, 52px); }
  .plan-homes__heading span { font-size: 12px; margin-top: 12px; }
  .plan-homes__intro { font-size: clamp(15px, 3.5vw, 22px); line-height: 1.8; letter-spacing: .12em; margin: 12% 3% 10%; }
  .plan-home { width: 94%; scroll-margin-top: 80px; }
  .plan-home + .plan-home { margin-top: 22%; }
  .plan-home__layout { margin-top: 8%; }
  .plan-home__photos { width: 93.3%; grid-template-columns: 1fr; gap: 25px; margin-top: 9%; }
  .plan-final-actions { width: 77%; flex-direction: column; align-items: center; gap: 25px; margin: 22% auto 40%; }
  .plan-final-actions .plan-action { width: 100%; }
  a.plan-page-top { padding: 30px 0; font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .is-plan-page, html:has(.is-plan-page) { animation: none; }
  .plan *, .plan *::before, .plan *::after { animation: none !important; transition: none !important; }
  .plan [data-plan-reveal].is-pending { opacity: 1; transform: none; }
}