/* =========================================================
   院紹介(/about/)固有 ── 元:mock/about-v4.html
   年表はモックの .tl を .career に改名(曜日表とぶつからないように)
   院長の写真(第7回)── 元:about/about-v7.html(院長はパターン C)。モックの .pp-c は .oc-pp
   院内のご案内(第16回)── 元:about/about-room-v1.html。モックの .wide は .oc-wide、.room は .oc-room、.pair は .oc-pair、
     .chip は base.css の .oc-chip。写真の箱・ピントの出方は base.css と site.js
   ========================================================= */

/* ---------- 院長あいさつ ---------- */
.greet{max-width:40em; margin-top:clamp(28px,4vw,40px)}
.greet p{margin:0 0 1.3em; font-size:1rem; line-height:2.1; letter-spacing:.03em}
.greet p.greet-key{font-family:var(--mincho); font-size:clamp(1.12rem,1rem + .5vw,1.34rem); line-height:1.9; padding-left:18px; border-left:2px solid var(--red); margin-top:1.8em}
.greet p.sign{text-align:right; font-size:.9rem; color:var(--ink-soft)}
.sign .name{font-family:var(--mincho); font-size:1.3rem; color:var(--ink); letter-spacing:.14em; margin-left:.6em}

/* ---------- 院長プロフィール ---------- */
.prof-grid{margin-top:clamp(28px,4vw,44px); display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); column-gap:clamp(32px,5vw,72px); align-items:start}
.prof-name{margin:0; display:flex; align-items:baseline; gap:14px; flex-wrap:wrap}
.prof-name .name{font-family:var(--mincho); font-size:clamp(1.6rem,1.3rem + 1vw,2rem); letter-spacing:.16em}
.prof-name .kana{font-size:.82rem; color:var(--ink-soft); letter-spacing:.1em}
.prof-q{margin:6px 0 0; font-size:.9rem; color:var(--blue); letter-spacing:.08em}
.likes{margin:26px 0 0}
.likes > div{padding:14px 0; border-top:1px solid rgba(33,33,33,.1)}
.likes dt{font-size:.8rem; color:var(--blue); letter-spacing:.08em; margin-bottom:4px}
.likes dd{margin:0; font-size:.92rem; line-height:1.9}
.likes dd p{margin:0}
.likes dd p + p{margin-top:.5em}
/* 年表 */
.career{list-style:none; margin:0; padding:0 0 0 26px; position:relative}
.career::before{content:""; position:absolute; left:6px; top:10px; bottom:14px; width:1px; background:rgba(27,32,135,.25)}
.career li{position:relative; padding:0 0 22px}
.career li::before{content:""; position:absolute; left:-25px; top:.55em; width:11px; height:11px; border-radius:50%; background:#fff; border:1.5px solid rgba(27,32,135,.55); transform:scale(0); transition:transform .45s var(--ease) .15s}
.career li.on::before{transform:none}
.career li.now::before{border-color:var(--red); background:var(--red)}
.career b{display:block; font-family:var(--mincho); font-weight:500; font-size:1.06rem; letter-spacing:.04em}
.career span{display:block; font-size:.88rem; color:var(--ink-soft); line-height:1.8; margin-top:2px}
.career li.now b{color:var(--red-soft)}

/* ---------- 院長プロフィール:院長の写真(パターン C) ----------
   箱は院長の切り抜きと同じ大きさ(幅 320px まで・左寄せ)。後ろに淡い赤のぼかしの丸
   第18回(2026/10/14):右の縦書きのひと言を外したので、箱を写真の大きさに合わせた(前は 400:430 の箱の左下に幅 76%)
   動き(動きのあるページだけ。site.js が .oc-pp に .oc-pf を付け、.oc-in で出す。--oc-d は始まりの時刻)
     院長:下から 12px・0.15秒後 */
.oc-pp{position:relative; width:min(100%,320px); margin:0 0 26px}
.oc-pp__glow{position:absolute; left:-10%; top:8%; width:85%; aspect-ratio:1; border-radius:50%; background:radial-gradient(closest-side,rgba(231,50,39,.10),rgba(231,50,39,0))}
.oc-pp__person{position:relative; width:100%}
.oc-pp__person img{display:block; width:100%; height:auto}
.oc-pp.oc-pf.oc-in .oc-pp__glow{transition:opacity 1.2s ease var(--oc-d,0s)}
.oc-pp.oc-pf.oc-in .oc-pp__person{transition:opacity .9s ease calc(var(--oc-d,0s) + .15s), transform 1.1s var(--ease) calc(var(--oc-d,0s) + .15s)}
.oc-pp.oc-pf:not(.oc-in) .oc-pp__glow{opacity:0}
.oc-pp.oc-pf:not(.oc-in) .oc-pp__person{opacity:0; transform:translateY(12px)}

/* ---------- 院内のご案内(第16回:元 about/about-room-v1.html) ----------
   ① ワイド写真:本文の幅の外に出して画面の横幅いっぱい(最大 1440px で中央)。1440px より広い画面では左右に余白ができるので、そのときだけ角を丸める
      切り方(object-fit:cover):1024px 以上 21:9/600〜1023px 16:9(左寄り)/599px 以下 4:3(<source> の 4:3 の写真をそのまま)
      チップ:900px 以上は左下で、写真の左端から 20px・下から 18px(2026/10/13 院長:文の左端にはそろえない)。899px 以下は左上(左下だと手前のストレッチポールのロゴに重なる。
        指示書はスマホ〈599px 以下〉だけ左上だが、600〜820px ほどでもロゴに重なったので、余裕をみて 899px まで左上にした)
   ② 説明:1024px 以上は2列(左に h3・本文、右に器具のタグ)、それより狭いと1列
   ③ 施術室・受付:600px 以上は2列、599px 以下は1列で縦に並べる(横スライドはしない)。写真は 4:3 */
.oc-roomwide{margin-top:clamp(28px,4vw,44px); container-type:inline-size}
.oc-wide{max-width:1440px; margin:0 auto; border-radius:0}
.oc-wide img{aspect-ratio:21/9; height:auto; object-fit:cover; object-position:50% 55%}
.oc-wide .oc-chip{left:20px; bottom:18px}
@container (min-width:1441px){ .oc-wide{border-radius:6px} }
.oc-room{margin-top:28px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px 48px; align-items:start}
.oc-room .tools{margin:0}
.oc-psec .oc-room h3,.oc-psec .oc-pair h3{margin:0 0 8px; font-size:1.08rem; display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 10px}
.oc-room h3 small,.oc-pair h3 small{font-family:var(--gothic); font-size:.78rem; color:var(--ink-soft); font-weight:400; letter-spacing:.06em}
.oc-room p,.oc-pair p{margin:0; font-size:.9rem; line-height:1.9; color:var(--ink-soft)}
.tools{list-style:none; margin:12px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:6px}
.tools li{font-size:.8rem; padding:4px 10px; border-radius:999px; background:var(--cream2); color:var(--ink)}
.oc-pair{margin-top:56px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:28px 24px}
.oc-pair figure{margin:0; display:flex; flex-direction:column; gap:14px}
.oc-pair figcaption{margin:0; text-align:left; font-size:inherit; line-height:inherit; opacity:1} /* Arkhe の figcaption(真ん中寄せ・小さい文字・薄い)を打ち消す */
.oc-pair .oc-photo{aspect-ratio:4/3}
.oc-pair .oc-photo img{height:100%; object-fit:cover}
@media (max-width:1023px){
  .oc-wide img{aspect-ratio:16/9; object-position:22% 50%}
  .oc-room{grid-template-columns:minmax(0,1fr); gap:14px}
}
@media (max-width:899px){
  .oc-wide .oc-chip{left:var(--oc-pad); top:14px; bottom:auto}
}
@media (max-width:599px){
  .oc-wide img{aspect-ratio:4/3; object-position:50% 50%}
  .oc-wide .oc-chip{left:14px}
  .oc-pair{grid-template-columns:minmax(0,1fr); gap:36px; margin-top:44px}
}

/* ---------- 「オクト」の由来 ---------- */
.name-grid{display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:clamp(28px,5vw,64px); align-items:center}
/* 「オクト」の由来のアイコン(第18回 D3):画面に全部入って、見出しが出てから 0.4秒後に、1.2秒かけて回って止まる(page-about.js)
   .is-wait は JS が動くときだけ付く(動かないとき・動きを減らす設定では、最初から止まった形) */
.octo{width:clamp(84px,11vw,128px)}
.octo.is-wait{transform:rotate(-120deg) scale(.86); opacity:0}
.octo.is-wait.is-spin{transform:none; opacity:1; transition:transform 1.2s cubic-bezier(.16,1,.3,1), opacity .5s ease}
.octo img{display:block; width:100%; height:auto}

/* ---------- 院の概要(Arkhe の表のスタイル:枠線・セルの余白 !important・灰色の見出しを打ち消す) ---------- */
.otable{width:100%; max-width:760px; margin-top:clamp(24px,3.5vw,36px); border:0; border-collapse:collapse}
.otable th,.otable td{--ark-padding--cell:16px 6px; border:0; border-bottom:1px solid rgba(33,33,33,.1); background:none; word-break:normal; text-align:left; vertical-align:top; font-size:.95rem; line-height:1.85}
.otable tr:first-child th,.otable tr:first-child td{border-top:1px solid rgba(27,32,135,.2)}
.otable th{width:8.5em; font-weight:400; color:var(--blue); font-size:.88rem; letter-spacing:.06em; white-space:nowrap}
.otable .oc-link--s{margin-top:2px}

@media (max-width:820px){
  .prof-grid{grid-template-columns:1fr; row-gap:32px}
}
@media (max-width:720px){
  .greet p{font-size:.96rem; line-height:2}
  .otable th{width:auto; display:block; --ark-padding--cell:14px 2px 0; border-bottom:0}
  .otable td{display:block; --ark-padding--cell:2px 2px 14px}
  .otable tr:first-child td{border-top:0}
  .name-grid{grid-template-columns:1fr; row-gap:18px}
  .octo{width:84px}
}
@media (prefers-reduced-motion:reduce){
  .career li::before{transform:none}
}