/* =========================================================
   トップページ固有(元:mock/top-v5-r27.html)
   背景の並び:ヒーロー(白)→施術方針の入口(クリーム)→特徴(白)→こんな方へ(クリーム)
              →はじめての方へ(白)→営業時間とアクセス(クリーム)→ご予約(赤い帯+白)→フッター(白)
   ========================================================= */

/* ---------- ヒーロー ---------- */
.hero{
  position:relative; min-height:90vh; min-height:90svh;
  display:grid; place-items:center; overflow:hidden;
  clip-path:inset(0);   /* 固定背景をヒーロー内に閉じ込める */
  padding:96px clamp(20px,5vw,48px) 72px;
}
/* 背景:淡いグラデーション(スクロールしても背景は動かない) */
.hero-bg{
  position:fixed; inset:0; z-index:0;
  background:
    radial-gradient(70% 60% at 8% 0%, rgba(237,238,245,.7) 0%, rgba(237,238,245,0) 70%),
    radial-gradient(120% 90% at 85% 100%, #F3E9DB 0%, rgba(250,246,240,0) 62%),
    linear-gradient(168deg, #FFFFFF 0%, #FFFFFF 24%, #FBF6EE 56%, #F7EFE4 100%);
}
.hero-bg::after{
  content:""; position:absolute; border-radius:50%;
  width:58vmax; height:58vmax; right:-16vmax; bottom:-24vmax;  /* モックでは全幅この大きさ(幅ごとの指定は後の上書きで消えていた) */
  background:radial-gradient(circle, rgba(246,208,201,.72) 0%, rgba(251,226,222,.45) 40%, rgba(254,236,234,0) 70%);
}
.hero-inner{position:relative; z-index:2; text-align:left; max-width:820px; will-change:transform} /* 第21回 作業D 追加(D-10):PC も文字は左寄せ(前は中央) */

.catch{margin:0; font-family:var(--mincho); font-weight:500; font-size:clamp(1.95rem, 1rem + 4.2vw, 4.1rem); line-height:1.55; letter-spacing:.1em; color:var(--ink)}
.catch span{display:block}
.sub{margin:clamp(22px,3.4vw,34px) 0 0; font-size:clamp(.88rem, .8rem + .35vw, 1.02rem); letter-spacing:.08em; color:var(--ink-soft); display:inline-flex; align-items:center; flex-wrap:wrap; justify-content:flex-start}
.sub .name{color:var(--ink); font-weight:500}
.sub .bar{display:inline-block; width:1px; height:1em; background:rgba(33,33,33,.3); margin:0 .9em}
.cta-row{margin-top:clamp(30px,4.4vw,44px)}
.info{margin:22px 0 0; font-size:.88rem; letter-spacing:.06em; color:var(--ink-soft); display:flex; justify-content:flex-start; flex-wrap:wrap; gap:4px 22px}
.info b{font-weight:500; color:var(--blue)}

/* ---------- 背骨の線画の置き場所(文字のすぐ左に並べる・スクロールでゆっくり動く。線画そのものは base.css) ----------
   第21回 作業D 追加(D-10・院長決定 10/17):PC(961px〜)も 960px 以下と同じ「線画|文字」の2列。線画と文字のまとまりをページの中央に
   (前は線画を画面の左端〈left:clamp(24px, 3vw + 30px, 130px)・bottom:3%・高さ min(74%,580px)〉に置き、文字は中央寄せだった) */
.hero-layout{
  position:relative; z-index:2; display:grid; grid-template-columns:auto auto;
  align-items:center; justify-content:center; column-gap:clamp(56px,5vw,88px);
}
.hero-deco{
  position:relative; z-index:1; pointer-events:none;
  height:min(62vh,540px); aspect-ratio:96/470; will-change:transform; /* 第21回 追加(X-1・院長決定 案1):箱は前の 96:470 のまま。中の viewBox(背骨と骨盤・大腿骨なし 38 10 96 410)は縦横比を保って箱の幅いっぱい・上下の真ん中に収まる(96:410 にすると箱が広がり、スマホで文字が崩れたため) */
}

/* 入口アニメーション */
.fx{opacity:0; transform:translateY(14px)}
.is-in .fx{animation:fadeUp .9s var(--ease) forwards}
.is-in .fx.d1{animation-delay:.15s} .is-in .fx.d2{animation-delay:.45s} .is-in .fx.d3{animation-delay:.85s}
.is-in .fx.d4{animation-delay:1.1s} .is-in .fx.d5{animation-delay:1.3s}
@keyframes fadeUp{to{opacity:1; transform:none}}

/* 画面幅に応じたレイアウト
   1. 広い画面(961px〜):イラストと文字を横に並べる。文字は左揃え(第21回 作業D 追加で、前の「文字は中央・イラストは左下」から変更)
   2. タブレット・小さめのPC(721〜960px):イラストと文字を横に並べる。文字は左揃え
   3. スマホ(〜720px):横並びのまま、イラストを文字の高さに合わせて細身に */
@media (max-width:960px){
  .hero{place-items:center; padding:96px clamp(20px,5vw,48px) 64px; min-height:min(90svh,760px); min-height:min(calc(var(--oc-hero-svh,1svh) * 90),760px)}
  /* 第25回 P-1(院長決定 10/21・第24回の案2):高さ(svh・vmax)を、開いたときに front.js が一度だけ測った値(--oc-hero-svh・--oc-hero-vmax)で決める。
     Google アプリ・LINE の中のブラウザでは、スクロールで上下の帯が消えると svh も変わり、線画が大きくなって文字が押されていたため。
     Safari では測った値が今の svh・vmax と同じなので見た目は変わらない。JS が動かないときは既定値(1svh・1vmax)= 前と同じ */
  .hero-bg::after{width:calc(var(--oc-hero-vmax,1vmax) * 58); height:calc(var(--oc-hero-vmax,1vmax) * 58); right:calc(var(--oc-hero-vmax,1vmax) * -16); bottom:calc(var(--oc-hero-vmax,1vmax) * -24)}
  .hero-layout{
    position:relative; z-index:2; display:grid; grid-template-columns:auto minmax(0,600px);
    align-items:center; justify-content:center;
    column-gap:clamp(48px,7vw,84px);
  }
  .hero-deco{position:relative; left:auto; bottom:auto; height:clamp(400px,58vw,540px)}
  .hero-inner{text-align:left}
  .sub,.info{justify-content:flex-start}
}
@media (max-width:720px){
  .hero{padding:84px 16px 48px}
  .hero-layout{grid-template-columns:auto minmax(0,1fr); column-gap:24px}
  .hero-deco{height:clamp(330px,52svh,410px); height:clamp(330px,calc(var(--oc-hero-svh,1svh) * 52),410px)} /* 第25回 P-1:上の .hero と同じ(開いたときの高さで固定) */
  .catch{font-size:clamp(1.45rem, .4rem + 5vw, 2.1rem); letter-spacing:.05em}
  .sub{flex-direction:column; align-items:flex-start; gap:2px; margin-top:18px; font-size:.85rem} .sub .bar{display:none}
  .cta-row{margin-top:26px}
  .info{flex-direction:column; gap:2px; margin-top:16px; font-size:.86rem}
}
@media (max-width:380px){
  .hero-layout{column-gap:20px}
}

/* ---------- 施術方針への入口(重要なので余白は大きく) ---------- */
.sec-concept{background:var(--cream2); padding:clamp(96px,14vw,176px) 0}
.concept-grid{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); column-gap:clamp(40px,5vw,80px); align-items:start}
.concept-head{display:grid; grid-template-columns:auto 1fr; column-gap:clamp(20px,2.4vw,30px)}
.concept-mark{width:22px; height:auto; grid-row:1 / span 2; margin-top:4px}
.concept-mark svg{width:22px; height:132px}
.concept-title{margin:0; font-family:var(--mincho); font-weight:500; font-size:clamp(1.4rem,.75rem + 1.55vw,2.05rem); line-height:1.75; letter-spacing:.05em}
.concept-title span{display:block; white-space:nowrap}
.concept-body{padding-top:clamp(0px,3.2vw,40px)}
.concept-body p{margin:0 0 1.2em; font-size:clamp(.94rem,.9rem + .15vw,1.02rem); line-height:2.05; letter-spacing:.04em; max-width:30em}
@media (max-width:960px){
  .concept-grid{grid-template-columns:1fr; row-gap:40px; max-width:640px}
  .concept-body{padding-top:0; padding-left:calc(22px + clamp(20px,2.4vw,30px))}
}
@media (max-width:720px){
  .concept-head{column-gap:16px}
  .concept-mark, .concept-mark svg{width:16px}
  .concept-mark svg{height:104px}
  .concept-title{font-size:clamp(1.2rem,.6rem + 3.2vw,1.6rem); letter-spacing:.04em}
  .concept-body{padding-left:32px}
  .concept-body p{line-height:1.95}
  .concept-body .pc{display:none}
}
@media (max-width:380px){ .concept-body{padding-left:0} }

/* ---------- 院の特徴3つ ---------- */
.sec-features{background:var(--white); padding:clamp(88px,12vw,148px) 0}
.features{list-style:none; margin:clamp(44px,6vw,72px) 0 0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:clamp(28px,4vw,56px)}
.feature{position:relative; padding-top:clamp(28px,3vw,36px)}
.feature::before{content:""; position:absolute; left:0; right:0; top:0; height:1px; background:rgba(27,32,135,.16); transform-origin:left center}
.f-icon{width:52px; height:52px; margin-bottom:22px}
.f-title{margin:0 0 12px; font-family:var(--mincho); font-weight:500; font-size:clamp(1.05rem,.95rem + .3vw,1.18rem); line-height:1.6; letter-spacing:.04em}
.f-text{margin:0; font-size:.95rem; line-height:1.95; color:#4a4a4a; letter-spacing:.03em}
@media (max-width:960px){
  .features{grid-template-columns:1fr; row-gap:0}
  .feature{display:grid; grid-template-columns:52px minmax(0,1fr); column-gap:clamp(20px,4vw,36px); padding:28px 0 32px}
  .feature:last-child{border-bottom:1px solid rgba(27,32,135,.16)}
  .f-icon{margin:2px 0 0}
}
@media (max-width:720px){
  .feature{grid-template-columns:40px minmax(0,1fr); column-gap:18px}
  .f-icon{width:40px; height:40px}
  .f-text{font-size:.94rem}
}

/* ---------- こんな方へ ---------- */
.sec-foryou{background:var(--cream2); padding:clamp(88px,12vw,148px) 0}
.types{margin-top:clamp(40px,5vw,60px); display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(16px,2.4vw,28px)}
.type{background:var(--white); border-radius:6px; padding:clamp(32px,4vw,48px) clamp(26px,3.6vw,48px) clamp(30px,3.6vw,44px); position:relative}
.type::before{content:""; position:absolute; top:0; left:clamp(26px,3.6vw,48px); width:32px; height:2px; background:var(--red)}
.type.care::before{background:var(--blue)}
.t-kind{margin:0 0 10px; font-size:.8rem; letter-spacing:.12em; color:var(--red); font-weight:500}
.type.care .t-kind{color:var(--blue)}
.t-title{margin:0 0 22px; font-family:var(--mincho); font-weight:500; font-size:clamp(1.1rem,1rem + .45vw,1.34rem); line-height:1.65; letter-spacing:.06em}
.t-list{list-style:none; margin:0; padding:0}
.t-list li{position:relative; margin:0; padding:12px 0 12px 22px; border-top:1px solid rgba(33,33,33,.07); font-size:.93rem; letter-spacing:.03em; line-height:1.7}
.t-list li::before{content:""; position:absolute; left:2px; top:1.32em; width:7px; height:7px; border-radius:50%; border:1px solid var(--red)}
.type.care .t-list li::before{border-color:var(--blue)}
/* 第18回 B4:カードの下・小さな文の後ろの入口のリンク(介護予防・交通事故) */
.oc-type-link{margin-top:16px; font-size:.88rem; gap:10px; line-height:1.6}
.first-grid .n .oc-link{display:flex; width:max-content; max-width:100%}
.first-grid .v.v-wrap{white-space:normal} /* 第18回 B1:「けが・交通事故は/保険が使えます」は2行に分かれてよい */
.prep-note{margin:26px 0 0; font-size:.88rem; color:var(--ink-soft); letter-spacing:.04em}
.prep-note .oc-link{display:inline-flex; margin:0 0 0 10px; font-size:.86rem}
@media (max-width:720px){
  .types{grid-template-columns:1fr}
  .t-list li{font-size:.9rem}
  .prep-note .oc-link{display:flex; width:max-content; margin:12px 0 0}
}

/* ---------- はじめての方へ ---------- */
.sec-first{background:var(--white); padding:clamp(88px,12vw,140px) 0}
.first-lead{margin:16px 0 0; font-size:.95rem; color:var(--ink-soft)}
.first-grid{margin:clamp(36px,5vw,52px) 0 0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); column-gap:clamp(20px,3vw,40px)}
.first-grid > div{border-top:1px solid rgba(27,32,135,.18); padding-top:20px}
.first-grid dt{font-size:.86rem; letter-spacing:.08em; color:var(--blue); margin:0 0 10px}
.first-grid dd{margin:0}
.first-grid .v{display:block; font-family:var(--mincho); font-weight:500; font-size:clamp(1.15rem,1rem + .5vw,1.4rem); letter-spacing:.04em; line-height:1.5; white-space:nowrap}
.first-grid .v small{font-family:var(--gothic); font-size:.8rem; font-weight:400; color:var(--ink-soft); margin-left:.3em}
.first-grid .n{display:block; margin-top:8px; font-size:.84rem; line-height:1.75; color:var(--ink-soft)}
@media (max-width:960px){ .first-grid{grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:28px} }
@media (max-width:720px){
  .first-grid{grid-template-columns:1fr; row-gap:0}
  .first-grid > div{display:grid; grid-template-columns:6.4em minmax(0,1fr); column-gap:14px; padding:16px 0 18px; align-items:baseline}
  .first-grid > div:last-child{border-bottom:1px solid rgba(27,32,135,.18)}
  .first-grid dt{margin:0; font-size:.82rem}
  .first-grid .v{font-size:1.12rem}
  .first-grid .n{font-size:.82rem; margin-top:4px}
}

/* ---------- 営業時間とアクセス ---------- */
.sec-access{background:var(--cream2); padding:clamp(88px,12vw,148px) 0}
.access-grid{margin-top:clamp(40px,5vw,60px); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); column-gap:clamp(36px,5vw,72px); align-items:start}
.addr{margin:32px 0 0; font-style:normal}
.addr p{margin:0 0 6px; font-size:.92rem; letter-spacing:.03em; line-height:1.85}
.addr .station{display:flex; flex-wrap:wrap; align-items:center; gap:4px 18px; margin-top:10px; font-size:.86rem; color:var(--ink-soft)}
.addr .station b{font-weight:500; color:var(--blue)}
/* 看板の目印のオクト君:40px(第11回・院長決定。文字と縦の中央をそろえる) */
.addr .sign{display:inline-flex; align-items:center; gap:9px}
.addr .sign img{width:40px; height:auto; display:block}
/* お電話:ひかえめな電話の形(base.css の .oc-tellink・第9回)。下の「アクセスを見る」とは押せる範囲どうしで 18px 空けて、指で押し分けられるように */
.addr .oc-tellink{margin-top:8px}
.access-grid .addr + .oc-link{margin-top:18px}
.access-grid .oc-link{margin-top:26px}
.oc-link.map-open{margin-top:14px} /* 第18回 C1:地図の下の「Googleマップで開く」も、ほかのリンクと同じ見え方に */
@media (max-width:960px){
  .access-grid{grid-template-columns:1fr; row-gap:44px}
}


/* ---------- 動きを減らす設定のとき ---------- */
@media (prefers-reduced-motion:reduce){
  .fx{opacity:1!important; transform:none!important; animation:none!important}
  .feature::before,.type::before{animation:none!important; transition:none!important; opacity:1!important; transform:none!important}
}
/* 第20回 作業B(B1-4):「これからの備え」のカードの1行(本文と同じ大きさ)と、その下の2つのリンクを縦に */
.t-more{margin:18px 0 0; font-size:.93rem; letter-spacing:.03em; line-height:1.7}
.type .oc-type-link{display:flex; width:max-content; max-width:100%}
.t-more + .oc-type-link{margin-top:8px}
.oc-type-link + .oc-type-link{margin-top:10px}
@media (max-width:720px){ .t-more{font-size:.9rem} }
/* 第20回 作業B(B-16):320px 前後のヒーロー。見出し「背骨と股関節から、」・ボタン「ご予約・お問い合わせ」・「(水曜・日曜午後・祝日休み)」を、それぞれ1行に */
@media (max-width:360px){
  .hero-layout{column-gap:14px}
  .catch{font-size:clamp(1.15rem, .1rem + 5.5vw, 1.45rem); letter-spacing:.03em}
  .hero .oc-btn{padding:15px 12px 15px 16px; gap:8px; font-size:.84rem; letter-spacing:.03em; white-space:nowrap}
  .info{font-size:.8rem}
}
/* 第20回 作業B(B-16):「施術の考え方」── 320px で見出しの1行(折り返さない)が列ごと右へ広げ、本文の右の余白がなくなっていた
   → 列を中身の幅で広げない(minmax(0,1fr))・320px 前後は見出しを少し小さく(右の余白をほかと同じ 20px に) */
@media (max-width:960px){ .concept-grid{grid-template-columns:minmax(0,1fr)} }
@media (max-width:360px){ .concept-title{font-size:1.1rem; letter-spacing:.03em} }