/* ==========================================================
   SUNPRO SELECT トップページ（front-page.php 専用）
   元デザイン: lp/sunpro-select/concepts/g-essential-shinshu.html（4案目）
   ========================================================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --paper:#f3f2ee;--white:#fff;--ink:#111211;--muted:#686b67;--line:#d8d8d2;
  --green:#7f8765;--green-dark:#4b513d;--sand:#c8bb91;--accent:#7bd100;--ease:cubic-bezier(.16,1,.3,1);
  /* ヘッダー（css/site-header.css）の高さ。ヒーローは一番上の高さ（--header-h）の下から始め、ページ内の移動先はスクロール後の高さ（--header-h-min）の下にそろえる */
  --header-h:96px;--header-h-min:72px;--adminbar-h:0px;
  /* 書体は物件ページ v2（css/lp-v2.css）と同じ。明朝はしっぽり明朝 500、本文・注記は Zen Kaku Gothic New 500 */
  --font-serif:'Shippori Mincho','Noto Serif JP','YuMincho','游明朝',serif;
  --font-gothic:'Zen Kaku Gothic New','Noto Sans JP','Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic Medium','Yu Gothic',Meiryo,sans-serif;
}
/* ログイン中は WordPress の管理バーの高さ分、固定ヘッダーとページ内リンクの着地位置を下げる */
.admin-bar{--adminbar-h:32px}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  min-width:320px;background:var(--paper);color:var(--ink);
  font-family:var(--font-serif);font-size:16px;font-weight:500;line-height:2;
  letter-spacing:.065em;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}button{font:inherit}img{display:block;max-width:100%}ul{list-style:none}
main [id]{scroll-margin-top:calc(var(--header-h-min) + var(--adminbar-h))}
.inner{width:min(100% - 80px,1280px);margin-inline:auto}
.eyebrow{display:flex;align-items:center;gap:16px;margin-bottom:28px;font-family:'Montserrat',sans-serif;font-size:.72rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase}
.eyebrow::before{content:'';width:36px;height:2px;background:var(--accent)}

/* ヘッダーは、物件ページ v2 と共通の css/site-header.css */

/* Hero（背景画像は front-page.php の --panel-image で指定する） */
.hero{height:100svh;min-height:720px;padding-top:var(--header-h);background:var(--ink);position:relative;overflow:hidden}
.hero__media{
  position:absolute;inset:var(--header-h) 0 0;display:grid;grid-template-columns:minmax(0,42fr) minmax(0,38fr) minmax(210px,20fr);grid-template-rows:minmax(0,34fr) minmax(0,66fr);gap:12px;background:var(--ink);
}
.hero__panel{
  position:relative;overflow:hidden;opacity:0;animation:heroReveal 1.1s var(--ease) forwards;
}
/* 写真は疑似要素に敷き、パネルごとに速さと向きを変えてゆっくりズーム・移動させる */
.hero__panel::before{content:'';position:absolute;inset:0;background-image:var(--panel-shade),var(--panel-image);background-size:cover;background-repeat:no-repeat;background-position:var(--panel-position,center);animation:heroDrift var(--drift-duration,8s) ease-in-out infinite alternate;will-change:transform}
.hero__panel--intro{grid-column:1;grid-row:1;--panel-shade:linear-gradient(rgba(13,15,12,.06),rgba(13,15,12,.22));--panel-position:center 56%;--drift-duration:8.5s;--drift-x:-2%;--drift-y:1.5%}
.hero__panel--main{grid-column:2;grid-row:1/3;animation-delay:.08s;--panel-shade:linear-gradient(rgba(13,15,12,.02),rgba(13,15,12,.24));--panel-position:48% center;--drift-duration:10s;--drift-x:1.5%;--drift-y:-2%}
.hero__panel--side-a{grid-column:3;grid-row:1;animation-delay:.16s;--panel-shade:linear-gradient(rgba(13,15,12,.02),rgba(13,15,12,.2));--drift-duration:7.5s;--drift-x:2%;--drift-y:2%}
.hero__panel--side-b{grid-column:3;grid-row:2;animation-delay:.24s;--panel-shade:linear-gradient(rgba(13,15,12,.02),rgba(13,15,12,.22));--panel-position:52% center;--drift-duration:9.5s;--drift-x:-1.5%;--drift-y:-2%}
@keyframes heroReveal{from{opacity:0;transform:scale(1.035)}to{opacity:1;transform:scale(1)}}
@keyframes heroDrift{from{transform:scale(1.04) translate3d(0,0,0)}to{transform:scale(1.16) translate3d(var(--drift-x,0),var(--drift-y,0),0)}}
.hero__content{grid-column:1;grid-row:2;z-index:2;container-type:inline-size;display:flex;flex-direction:column;justify-content:flex-end;padding:24px clamp(30px,3.4vw,58px) clamp(62px,8vh,92px) clamp(28px,5vw,76px);background:var(--ink);color:#fff}
.hero__label{display:flex;align-items:center;gap:18px;margin-bottom:24px;font-family:'Montserrat',sans-serif;font-size:.72rem;font-weight:700;letter-spacing:.25em;text-transform:uppercase;color:#e7e3d4;opacity:0;animation:fadeUp .9s .2s var(--ease) forwards}
.hero__label::before{content:'';width:42px;height:2px;background:var(--sand)}
.hero h1{font-size:clamp(2.15rem,2.75vw,3.4rem);font-weight:500;line-height:1.42;letter-spacing:.055em;text-shadow:0 3px 26px rgba(0,0,0,.22)}
.hero h1 span{display:block;opacity:0;transform:translateY(32px);animation:fadeUp 1.1s var(--ease) forwards}
.hero h1 span:nth-child(1){animation-delay:.35s}.hero h1 span:nth-child(2){animation-delay:.55s}
.hero__lead{margin-top:22px;font-size:clamp(.84rem,.92vw,.96rem);font-weight:500;line-height:1.75;letter-spacing:.08em;color:rgba(255,255,255,.9);opacity:0;animation:fadeUp 1s .8s var(--ease) forwards}
@keyframes fadeUp{to{opacity:1;transform:translateY(0)}}
.hero__cta{
  position:absolute;right:0;bottom:0;z-index:3;width:min(360px,30vw);min-height:76px;padding:0 30px;
  display:flex;align-items:center;justify-content:space-between;background:var(--white);color:var(--ink);
  font-weight:500;letter-spacing:.1em;transition:background .3s ease,color .3s ease;
}
/* マウスを重ねると、文字の下に #7bd100 の線が伸びる（背景の色は変えない） */
.hero__cta span{position:relative}
.hero__cta span::after{content:'';position:absolute;left:0;right:0;bottom:-8px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.hero__cta:hover span::after,.hero__cta:focus-visible span::after{transform:scaleX(1)}
.hero__cta i{font-size:1.4rem}
/* PC（1001px以上）はヒーローの文章を大きくして、黒い余白を減らす。見出しは黒い枠の幅（cqi）に合わせ、2行目を折り返さない */
@media(min-width:1001px){
  .hero__content{padding:24px clamp(24px,2.4vw,46px) clamp(62px,8vh,92px) clamp(28px,4vw,76px)}
  .hero__label{margin-bottom:30px;font-size:clamp(.72rem,.8vw,.92rem)}
  .hero h1{font-size:clamp(2rem,10cqi,5rem)}
  .hero__lead{margin-top:30px;font-size:clamp(.95rem,1.15vw,1.25rem)}
}
/* 高さの低いPC画面（800px以下）では、文章が黒い枠からはみ出さないよう余白と行間を詰める */
@media(min-width:1001px) and (max-height:800px){
  .hero__label{margin-bottom:16px}
  .hero__lead{margin-top:16px;line-height:1.8}
}

/* Concept */
.concept{padding:150px 0 170px;background:var(--paper);overflow:hidden;overflow:clip}
/* 各セクションの大見出し：左に英字ラベルと見出し、右に説明文を下端そろえで置く（全セクション共通） */
/* 説明文は右端にそろえた同じ幅の列（最大520px）に置く。見出しの長さで説明文の幅や位置が変わらないようにする */
.section-lead{display:grid;grid-template-columns:minmax(0,1fr) min(520px,42%);gap:clamp(40px,5vw,100px);align-items:end;margin-bottom:64px}
.section-lead h2{font-size:clamp(2rem,4vw,3.8rem);font-weight:500;line-height:1.65;letter-spacing:.09em;word-break:auto-phrase}
.section-lead h2 em{font-style:normal;color:var(--green-dark)}
.section-lead__copy{max-width:none;color:#4f524e;font-size:1rem;line-height:1.8;letter-spacing:.08em}
.section-lead--dark .eyebrow{color:var(--sand)}.section-lead--dark .section-lead__copy{color:rgba(255,255,255,.74)}

/* Living story */
.living-story{padding:0 0 170px;background:var(--paper);overflow:hidden;overflow:clip}
.living-gallery{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:clamp(220px,23vw,320px);gap:16px}
.living-gallery figure{position:relative;overflow:hidden;background:#d8d8d2}
.living-gallery img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.living-gallery figure:hover img{transform:scale(1.035)}
/* 写真一覧: スクロールに合わせて、写真ごとに違う速さで枠の中を上下に動かす（動かすのは js/top.js。参考: 大和ハウス The Residence Designs）
   枠から外が見えないよう、写真は枠より大きく敷く。--drift は動く量（% 単位の数値）
   スマホ・タブレットと、動きを減らす設定では動かさない */
@media (min-width:1001px){
  .living-gallery figure img{position:relative;top:-20%;height:140%;will-change:translate}
  .living-gallery__wide img{--drift:16}
  .living-gallery__tall img{--drift:-10}
  .living-gallery__small img{--drift:14}
  .living-gallery__mid img{--drift:-18}
  .living-gallery__full img{--drift:12}
}
@media (prefers-reduced-motion:reduce){
  .living-gallery figure img{translate:none!important}
}
.living-gallery figcaption{position:absolute;left:18px;bottom:16px;padding:6px 9px;background:rgba(10,11,10,.72);color:#fff;font-family:'Montserrat',var(--font-gothic);font-size:.61rem;font-weight:500;line-height:1.5;letter-spacing:.12em;backdrop-filter:blur(7px)}
.living-gallery__wide,.living-gallery__tall,.living-gallery__small{grid-column:span 2}
.living-gallery__mid,.living-gallery__full{grid-column:span 3}
.living-story__note{margin-top:14px;color:var(--muted);font-size:.72rem;line-height:1.6;text-align:right;letter-spacing:.08em}

/* Residences（一覧のスライダーは css/residence-slider.css。物件ページ v2 と共通） */
.residences{padding:150px 0;background:#fff;overflow:clip}
@media(max-width:720px){.residence-filter{margin:-6px 0 20px}.residence-filter__label{flex-basis:100%}.residence-filter__chip{min-height:40px;padding:0 15px}}

/* Features */
.features{padding:160px 0;background:var(--ink);color:#fff;position:relative;overflow:hidden;overflow:clip}

/* Aftercare */
.aftercare{padding:150px 0;background:#e8eadf;overflow:hidden;overflow:clip}
.aftercare__visual{position:relative;padding:52px 44px 44px;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.aftercare__steps{display:grid;grid-template-columns:repeat(3,1fr);margin-top:0;border-bottom:1px solid var(--ink)}
.aftercare__step{min-height:330px;padding:38px 30px 42px;border-right:1px solid var(--ink);position:relative;overflow:hidden}
.aftercare__step::before{content:attr(data-step);position:absolute;right:-.03em;top:-.12em;font-family:'Montserrat',sans-serif;font-size:8rem;font-weight:700;line-height:1;color:transparent;-webkit-text-stroke:1px rgba(75,81,61,.13);pointer-events:none}
.aftercare__step:last-child{border-right:0}.aftercare__step-label{position:relative;z-index:1;display:block;padding-left:50px;font-family:'Montserrat',sans-serif;font-size:.68rem;font-weight:700;letter-spacing:.18em;color:var(--green-dark)}.aftercare__step-label::before{content:'';position:absolute;left:0;top:50%;width:34px;height:2px;margin-top:-1px;background:var(--green-dark)}.aftercare__timing{position:relative;z-index:1;display:block;margin-top:34px;color:var(--green-dark);font-size:clamp(1.35rem,2vw,1.85rem);font-weight:500;line-height:1.25;letter-spacing:.1em}
.aftercare__step h3{position:relative;z-index:1;margin-top:54px;font-size:1.4rem;font-weight:500;line-height:1.6;letter-spacing:.08em}.aftercare__step p{position:relative;z-index:1;margin-top:16px;max-width:350px;color:var(--muted);font-size:.9rem;line-height:1.7}
.aftercare__note{margin-top:24px;color:var(--muted);font-size:.8rem;line-height:1.65}

/* Closing */
.closing{padding:160px 0;background:var(--ink);color:#fff;text-align:center}
.closing__inner{width:min(100% - 48px,900px);margin:auto}.closing .eyebrow{justify-content:center;color:#f0ead6}
.closing h2{font-size:clamp(2.1rem,4.6vw,4.4rem);font-weight:500;line-height:1.65;letter-spacing:.1em;word-break:auto-phrase}
.closing__inner>p{margin:30px auto 50px;max-width:720px;line-height:1.8;color:rgba(255,255,255,.84)}
/* 来場予約・お問い合わせ（css/cta.css の暗い背景用 .cta--dark）。幅はトップページの .inner、上下の余白はこのセクションで持つ */
.closing__cta .cta .inner{width:100%;padding:24px 0 0}
/* 説明文と来場予約の枠をつなぐ縦線。画面に入ってから上から下へ伸びる */
.closing__line{height:clamp(56px,7vw,96px);margin:-14px auto 10px}
.closing__line span{display:block;width:1px;height:100%;margin:0 auto;background:var(--accent);transform:scaleY(0);transform-origin:top center;transition:transform 1.2s var(--ease) .25s}
.closing__line.is-visible span{transform:scaleY(1)}
@media(prefers-reduced-motion:reduce){.closing__line span{transform:none;transition:none}}
/* 本文・注記・説明はゴシック体にする（物件ページ v2 と同じ）。見出し・キャッチ・ボタン・ラベルは明朝のまま
   カードの説明文・流れの図の説明・住まい一覧の説明は、それぞれの部品の CSS で決めている */
.hero__lead,.section-lead__copy,.living-story__note,.aftercare__step p,.aftercare__note,.closing__inner>p:not(.eyebrow){font-family:var(--font-gothic);letter-spacing:.04em}

/* Footer */

/* PC（1200px以上）は本文の左右の余白を広めにとる（.inner の幅は下の @media） */
main>section{position:relative}
@media(min-width:1200px){
  .inner{width:min(100% - 200px,1280px)}
}
/* 慣性スクロール（Lenis）が動いているあいだは、CSS のなめらかスクロールを止めて二重に動かないようにする */
html.lenis{scroll-behavior:auto}

/* スクロールで文字や写真を表示する動きは、物件ページ v2 と共通の css/reveal.css */

@media(max-width:1000px){
  :root{--header-h:64px;--header-h-min:64px}
  .inner{width:min(100% - 48px,1280px)}
  .hero{height:auto;min-height:940px}.hero__media{grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);grid-template-rows:170px 140px 150px minmax(0,1fr);gap:8px}.hero__panel--main{grid-column:1;grid-row:1/3}.hero__panel--intro{grid-column:2;grid-row:1}.hero__panel--side-a{grid-column:2;grid-row:2}.hero__panel--side-b{grid-column:1/3;grid-row:3;--panel-position:center 48%}.hero__content{grid-column:1/3;grid-row:4;padding:28px 40px 102px}.hero h1{font-size:clamp(2.2rem,6vw,3.25rem)}.hero__lead{max-width:720px}.section-lead{gap:50px}
  .aftercare__steps{grid-template-columns:1fr}.aftercare__step{min-height:0;border-right:0;border-bottom:1px solid var(--ink)}.aftercare__step:last-child{border-bottom:0}.aftercare__step h3{margin-top:28px}
  .aftercare__visual{padding-inline:24px}
  .section-lead{grid-template-columns:1fr;gap:30px}.section-lead__copy{max-width:640px}
}
@media(max-width:782px){
  .admin-bar{--adminbar-h:46px}
}
@media(max-width:720px){
  .inner{width:min(100% - 32px,1280px)}
  .hero{min-height:920px}.hero__media{grid-template-rows:160px 130px 140px minmax(0,1fr);gap:7px}.hero__content{padding:24px 24px 96px}.hero__label{margin-bottom:18px;font-size:.62rem;line-height:1.7;letter-spacing:.18em}.hero__label::before{width:28px}.hero h1{font-size:clamp(1.75rem,10cqi,2.8rem);line-height:1.36}.hero__lead{margin-top:18px;font-size:.82rem;line-height:1.6;letter-spacing:.07em}.hero__lead br{display:none}
  .hero__cta{width:100%;min-height:68px;padding:0 22px}
  .concept,.residences,.features,.aftercare,.closing{padding:100px 0}.living-story{padding-bottom:100px}.section-lead{grid-template-columns:1fr;gap:30px;margin-bottom:48px}
  .living-gallery{grid-template-columns:1fr;grid-auto-rows:260px;gap:10px}.living-gallery__wide,.living-gallery__tall,.living-gallery__small,.living-gallery__mid,.living-gallery__full{grid-column:1}.living-gallery figcaption{left:10px;bottom:10px;font-size:.55rem}
  .aftercare__visual{overflow-x:auto;padding:44px 18px 30px}
}
@media(max-width:600px){
  /* 画面幅600px以下では管理バーがスクロールで消えるため、ヘッダーは上端に固定する */
  .admin-bar{--adminbar-h:0px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero__panel,.hero__label,.hero h1 span,.hero__lead{animation:none!important;transition:none!important;opacity:1!important;transform:none!important}.residence-viewport{scroll-behavior:auto}.hero__panel::before{animation:none!important}}

/* スマホ（720px以下）: 1行の字数が少ないので、本文の行間と字間を詰める（2026-10-30 ユーザー依頼「もっとつめて」。行間 1.65・字間 .02em） */
@media(max-width:720px){.section-lead__copy,.closing__inner>p:not(.eyebrow){line-height:1.65;letter-spacing:.02em}}