/* =========================================================
   施術方針(/concept/)固有 ── 元:mock/concept-v9.html
   モックの比較用の候補(太いアイコン・別案の動き・比較パネル)は入れていない
   「施術と運動の両方で」の写真(第7回)── 元:concept/concept-v10.html。モックの .duo〜 は .oc-duo〜
     写真の箱・画面の端まで広げる部品・ピントの出方は base.css と site.js
   ========================================================= */

/* ---------- 痛いところだけを見ない ---------- */
.scenes{list-style:none; margin:clamp(28px,4vw,40px) 0 0; padding:0; display:grid; gap:10px}
.scenes li{font-family:var(--mincho); font-size:clamp(1.05rem,.95rem + .4vw,1.25rem); letter-spacing:.06em; padding-left:18px; border-left:2px solid var(--red-pale)}
.scenes + .oc-lead{margin-top:clamp(24px,3vw,32px)}

/* ---------- なぜ、背骨(胸椎)と股関節なのか ---------- */
.why-grid{margin-top:clamp(32px,4vw,48px); display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:clamp(36px,6vw,80px); align-items:center}
.why-fig{width:clamp(96px,11vw,128px)}
/* 第21回 追加(U-3):線画は読み進めるあいだ文の横の同じ高さにとどまる(段の終わりで段と一緒に上へ流れる)。止まる高さはヘッダーの下 24px
   第21回 追加(Y-2・院長の iPhone で「とどまっている間にカクカクぶれる」):止まる高さは固定(ヘッダーの出し入れで動かさない。引っこんでいるあいだは上が少し空く)。
   第26回 Q-2(院長決定 10/21・案①):Y-2 で付けた will-change:transform を外して比べる(iPhone 12 mini の Safari でまだぶれるため。だめなら元に戻す)。止まる高さの固定はそのまま */
.why-fig{align-self:start; position:sticky; top:calc(var(--oc-header-h) + 24px + env(safe-area-inset-top,0px))}
.why-fig svg{width:100%; height:auto; aspect-ratio:116/410} /* 第21回 追加(V-1):大腿骨なしの viewBox 26 10 116 410 に合わせる(大腿骨ありに戻すなら 116/470) */
.why-body > p{margin:0 0 1.1em; font-size:.98rem; line-height:2}
.why-body strong,.oc-duo-tx strong{font-weight:700; color:inherit} /* 第21回 追加(U-1):要点の太字。色・大きさは本文のまま */
.rel{list-style:none; margin:4px 0 22px; padding:0; display:grid; gap:10px}
.rel li{display:grid; grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr); align-items:center; gap:12px; padding:16px 18px; background:#fff; border-radius:8px; box-shadow:0 0 0 1px rgba(33,33,33,.07)}
.rel .from{display:flex; align-items:center; gap:10px; font-size:.95rem}
.rel .dot{display:inline-block; flex:none; width:12px; height:12px; border-radius:50%; border:2px solid var(--red); background:var(--red-pale)}
.rel .arrow svg{width:20px; height:20px; fill:none; stroke:var(--ink-soft); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.rel .to{font-size:.95rem}
.rel .to b{font-family:var(--mincho); font-weight:500; font-size:1.12rem; color:var(--blue); margin-right:.2em}
.why-body > p.key{font-family:var(--mincho); font-size:clamp(1.1rem,1rem + .5vw,1.35rem); line-height:1.8; letter-spacing:.05em; padding:6px 0 6px 18px; border-left:2px solid var(--red)}

/* ---------- 施術と運動の両方で(写真2段。大きい写真に小さい写真を重ねる) ---------- */
.oc-duo{margin-top:clamp(40px,6vw,64px); display:grid; gap:clamp(72px,10vw,120px)}
.oc-duo-row{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); column-gap:clamp(36px,5.5vw,72px); align-items:center}
.oc-duo-row.rev{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.oc-duo-row.rev .oc-duo-ph{order:2}
.oc-duo-ph{position:relative}
.oc-duo-ph .oc-duo-big{border-radius:0 6px 6px 0}
.oc-duo-row.rev .oc-duo-ph .oc-duo-big{border-radius:6px 0 0 6px}
/* 小さい写真:大きい写真の角から少しはみ出す位置に重ねる。まわりに地の色(白)の 6px の縁+うすい影
   位置は段ごとに data-small(PC・タブレット)/data-small-sp(スマホ)で指定:tr=右上・br=右下・tl=左上・bl=左下(第8回)
   上下にはみ出す分だけ、段の上(t)または下(b)に余白をとる */
.oc-duo-ph .oc-duo-small{position:absolute; width:44%; border-radius:6px; box-shadow:0 0 0 6px #fff, 0 14px 32px rgba(0,0,0,.10); overflow:hidden}
@media (min-width:721px){
  .oc-duo-ph[data-small^="b"]{padding-bottom:clamp(40px,6vw,64px)}
  .oc-duo-ph[data-small^="t"]{padding-top:clamp(40px,6vw,64px)}
  .oc-duo-ph[data-small^="b"] .oc-duo-small{bottom:0}
  .oc-duo-ph[data-small^="t"] .oc-duo-small{top:0}
  .oc-duo-ph[data-small$="r"] .oc-duo-small{right:-8%}
  .oc-duo-ph[data-small$="l"] .oc-duo-small{left:-8%}
}
@media (min-width:721px) and (max-width:960px){
  .oc-duo-ph[data-small$="r"] .oc-duo-small{right:-4%}
  .oc-duo-ph[data-small$="l"] .oc-duo-small{left:-4%}
}
.oc-duo-tx .oc-en{margin-bottom:8px}
.oc-psec .oc-duo-tx h3{margin:0 0 14px; font-size:clamp(1.3rem,1.1rem + .6vw,1.6rem); letter-spacing:.08em}
.oc-duo-tx p{margin:0; font-size:.95rem; line-height:2; color:var(--ink-soft)}
.oc-duo-tx p + p{margin-top:12px} /* 第21回 追加(U-1):段落に分けたので、段落の間を 12px(見本 sample-21-why-sp.html) */
/* 最後の1行は、写真の段から十分離す */
.oc-note.oc-duo-after{margin-top:clamp(56px,7vw,80px)}
@media (max-width:720px){
  .oc-duo-row,.oc-duo-row.rev{grid-template-columns:1fr; row-gap:26px}
  .oc-duo-row.rev .oc-duo-ph{order:0}
  /* スマホも PC と同じ組み方(第9回・見本 concept-v11.html):大きい写真は幅 88% で PC と同じ側の画面の端に寄せ(端の側は角丸なし)、
     小さい写真(幅 44%)は反対側の角に重ねる。小さい写真の端は本文の箱の端にそろえる */
  .oc-duo-ph.oc-bleed-l{margin-right:0}
  .oc-duo-ph.oc-bleed-r{margin-left:0}
  .oc-duo-ph .oc-duo-big{width:88%; border-radius:0 6px 6px 0}
  .oc-duo-row.rev .oc-duo-ph .oc-duo-big{margin-left:auto; border-radius:6px 0 0 6px}
  .oc-duo-ph .oc-duo-small{width:44%}
  /* 小さい写真の位置は data-small-sp(tr=右上・br=右下・tl=左上・bl=左下)。はみ出す分(幅の 16%)の余白を上か下にとる */
  .oc-duo-ph[data-small-sp^="b"]{padding-bottom:16%}
  .oc-duo-ph[data-small-sp^="t"]{padding-top:16%}
  .oc-duo-ph[data-small-sp^="b"] .oc-duo-small{bottom:0}
  .oc-duo-ph[data-small-sp^="t"] .oc-duo-small{top:0}
  .oc-duo-ph[data-small-sp$="r"] .oc-duo-small{right:0}
  .oc-duo-ph[data-small-sp$="l"] .oc-duo-small{left:0}
}

/* ---------- 施術の流れ ---------- */
.steps4{list-style:none; margin:clamp(28px,4vw,40px) 0 0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px}
.steps4 li{position:relative; padding:22px 20px 22px; background:#fff; border-radius:8px; box-shadow:0 0 0 1px rgba(27,32,135,.12)}
.steps4 .shead{display:flex; align-items:center; gap:14px; margin-bottom:14px}
.steps4 .n{display:grid; place-items:center; margin:0; width:24px; height:24px; border-radius:50%; border:1.5px solid var(--red-soft); color:var(--red-soft); font-family:var(--mincho); font-size:.78rem}
.steps4 b{display:block; font-family:var(--mincho); font-weight:500; font-size:1.08rem; margin-bottom:6px}
.steps4 li > span:last-child{font-size:.88rem; color:var(--ink-soft); line-height:1.8}
.steps4 li:nth-child(2){transition-delay:.1s; --o:.15s}
.steps4 li:nth-child(3){transition-delay:.2s; --o:.3s}
.steps4 li:nth-child(4){transition-delay:.3s; --o:.45s}
@media (max-width:960px){ .steps4{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* 4つのアイコン:入ってきたら線で描かれ、そのあとゆっくり動き続ける(サイトで唯一の例外)
   画面外では止める(.vis が外れる → assets/js/page-concept.js)・動きを減らす設定では止める */
.sic{display:block; width:46px; height:46px}
.sic svg{display:block; width:100%; height:100%; overflow:visible; fill:none; stroke:rgba(27,32,135,.7); stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round}
.sic .r{stroke:var(--red)}
.sic .fl{stroke:rgba(27,32,135,.35)}
.sic .dw{stroke-dasharray:1.02; stroke-dashoffset:1.02}
.steps4 li.on .sic .dw{animation:draw .9s var(--ease) forwards; animation-delay:calc(var(--o,0s) + .3s)}
/* ① チェックが順に付いては消える */
.sic .pop{opacity:0; transform-box:fill-box; transform-origin:center; transform:scale(.6)}
.steps4 li.on .sic .pop{animation:chkLoop 4s var(--ease) infinite}
.steps4 li.on .sic .p1{animation-delay:calc(var(--o,0s) + 1s)}
.steps4 li.on .sic .p2{animation-delay:calc(var(--o,0s) + 1.35s)}
.steps4 li.on .sic .p3{animation-delay:calc(var(--o,0s) + 1.7s)}
@keyframes chkLoop{0%,70%{opacity:1; transform:none} 80%,86%{opacity:0; transform:scale(.6)} 94%,100%{opacity:1; transform:none}} /* 第20回 作業B(B-18):完成形で始まり、1周の約8割は完成形 */
/* ② 腕を上げ下げ/④ 腹筋の上げ下げ */
.sic .mv{transform-box:view-box; transform-origin:var(--ox) var(--oy); transform:rotate(var(--r)) translate(var(--tx),var(--ty)); opacity:0}
.steps4 li.on .sic svg[data-step="2"] .mv{opacity:1; animation:armLoop 3s var(--ease) infinite; animation-delay:calc(var(--o,0s) + 1s)}
@keyframes armLoop{0%,62%{transform:none} 76%,84%{transform:rotate(var(--r))} 98%,100%{transform:none}} /* 第20回 作業B(B-18):完成形で始まり、約7割は完成形 */
.steps4 li.on .sic svg[data-step="4"] .mv{opacity:1; animation:situpLoop 2.6s ease-in-out infinite; animation-delay:calc(var(--o,0s) + 1s)}
@keyframes situpLoop{0%,62%{transform:none} 76%,84%{transform:rotate(var(--r))} 98%,100%{transform:none}} /* 第20回 作業B(B-18):④ の描きかけに見える時間を短く。約7割は完成形 */
/* ③ お辞儀しながら手を伸ばす */
.sic .bow{transform-box:view-box; transform-origin:18.4px 11.8px}
.sic .reach{transform-box:view-box; transform-origin:19.3px 7.4px}
.steps4 li.on .sic .bow{animation:bowLoop 2.2s ease-in-out infinite; animation-delay:calc(var(--o,0s) + 1s)}
.steps4 li.on .sic .reach{animation:reachLoop 2.2s ease-in-out infinite; animation-delay:calc(var(--o,0s) + 1s)}
@keyframes bowLoop{0%,62%{transform:none} 80%{transform:rotate(-24deg)} 98%,100%{transform:none}} /* 第20回 作業B(B-18) */
@keyframes reachLoop{0%,62%{transform:none} 72%{transform:scale(.8)} 84%{transform:scale(1.12)} 98%,100%{transform:none}} /* 第20回 作業B(B-18):③ も完成形(大きさ 1)で始まる */
/* 画面外では止める */
.steps4 li:not(.vis) .sic *{animation-play-state:paused!important}

/* ---------- 大切にしていること(区切り線が左からのびる) ---------- */
.values{list-style:none; margin:clamp(28px,4vw,40px) 0 0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:clamp(24px,3vw,40px)}
.values li{position:relative; padding-top:20px}
.values li::before{content:""; position:absolute; left:0; right:0; top:0; height:1px; background:rgba(218,74,63,.45); transform:scaleX(0); transform-origin:left center; transition:transform 1s var(--ease) .2s}
.values li.on::before{transform:none}
.values b{display:block; font-family:var(--mincho); font-weight:500; font-size:clamp(1.08rem,1rem + .3vw,1.22rem); line-height:1.65; margin-bottom:10px}
.values span{font-size:.9rem; color:var(--ink-soft); line-height:1.9}
.values li:nth-child(2){transition-delay:.1s} .values li:nth-child(3){transition-delay:.2s}
.values li:nth-child(2)::before{transition-delay:.35s} .values li:nth-child(3)::before{transition-delay:.5s}
#value .oc-next{margin-top:clamp(40px,5vw,56px)}

@media (max-width:720px){
  .why-grid{grid-template-columns:72px minmax(0,1fr); column-gap:18px; align-items:start}
  .why-fig{width:72px}
  .rel li{grid-template-columns:1fr; gap:4px; padding:14px 14px}
  .rel .arrow{display:none}
  .rel .to{padding-left:22px; font-size:.9rem}
  .rel .to::before{content:"→ "; color:var(--ink-soft)}
  .why-body > p.key{font-size:1.06rem}
  .steps4{grid-template-columns:1fr; gap:10px}
  .steps4 li{display:block}
  .steps4 .shead{margin-bottom:10px}
  .steps4 b{margin-bottom:2px}
  .sic{width:40px; height:40px}
  .values{grid-template-columns:1fr; row-gap:24px}
}

@media (prefers-reduced-motion:reduce){
  .sic *{animation:none!important; opacity:1!important; transform:none!important}
  .sic .dw{stroke-dashoffset:0!important}
  .values li::before{transform:none}
}
/* 第20回 作業B(B-25):見出し帯の説明文の最後の「す。」だけが次の行に落ちないよう、最大幅を2文字分広げる */
.oc-page-lead{max-width:38em}
/* 第20回 作業B(B-18):動き出すまでの待ち時間も、各ループの最初の形(完成形)で見せる */
.steps4 li.on .sic .pop,
.steps4 li.on .sic svg[data-step="2"] .mv,
.steps4 li.on .sic svg[data-step="4"] .mv,
.steps4 li.on .sic .bow,
.steps4 li.on .sic .reach{animation-fill-mode:backwards}