/* =========================================================
   Octo Child 共通ルール(全ページ)
   元:mock/top-v5-r27.html(見た目・動きはモックのまま。後から上書きされていた値はまとめ直した)
   共通部品のクラス名には接頭辞 oc- をつける(.tl の衝突事故の再発防止)
   ========================================================= */

/* ---------- 色・文字・動き(変数はここ1か所) ---------- */
:root{
  --red:#E73227;      /* ロゴの赤:ロゴ・線画・曜日表の日祝の文字だけ */
  --red-soft:#DA4A3F; /* やわらげた赤:ボタン・赤い帯・○・リンク */
  --red-soft-rgb:218,74,63;
  --blue:#1B2087;     /* 曜日表の「土」・線画の補助(紺のベタ面は使わない) */
  --ink:#212121; --ink-soft:#4f4f4f;
  --white:#FFFFFF; --cream:#FAF6F0; --cream2:#F7F1E8; --gray:#F7F7F7;
  --red-pale:#FEECEA; --blue-pale:#EDEEF5;
  --line:rgba(27,32,135,.42);
  /* LINE の緑:LINE の目印のアイコン(予約の丸アイコン)にだけ使う。見出し・線・背景など、ほかの場所には使わない */
  --line-green:#06C755;
  /* 書体は今後見直す可能性あり。差し替えはこの2行だけ */
  --mincho:"Shippori Mincho","Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;
  --gothic:"Noto Sans JP","Hiragino Sans","Yu Gothic",sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  --oc-header-h:72px;
}
@media (max-width:960px){ :root{--oc-header-h:66px} }
@media (max-width:720px){ :root{--oc-header-h:64px} }

/* ---------- Arkhe の基本スタイルの打ち消し ---------- */
/* Arkhe は html の文字サイズを min(16px,4vw)・字間 .025em にしている → モック(16px・字間なし)に戻す */
html{font-size:100%; letter-spacing:normal; scroll-behavior:smooth}
body{font-family:var(--gothic); color:var(--ink); background:var(--white); -webkit-font-smoothing:antialiased; line-height:1.8; font-size:1rem}
a{color:inherit}
small{opacity:1} /* Arkhe は small を薄く(opacity .75)している */
/* 固定ヘッダーの下に本文が隠れないように(トップのヒーロー・各ページの見出し帯は自分で余白を持つので対象外) */
.oc-site:not(.oc-front):not(.oc-page) .l-content{padding-top:calc(var(--oc-header-h) + env(safe-area-inset-top,0px))}

/* ---------- 小さな道具 ---------- */
.oc-nb{display:inline-block}
/* 第22回 Z-5・Z-6:短い文は文節(言葉のまとまり)で折り返す。切れ目はテンプレートの <wbr>(作業のときに文節の区切りを出して書き込んだ。サイトにスクリプトは足していない)
   keep-all:日本語の文字と文字の間では折り返さない/overflow-wrap:anywhere:入りきらないときだけ、どこでも折り返す(はみ出し・横スクロールを出さない保険) */
/* クラスを2つ重ねて強くしている(表のセルの word-break:normal〈.oc-pp-table td など〉より優先させるため) */
.oc-phrase.oc-phrase{word-break:keep-all; overflow-wrap:anywhere}
.oc-vh{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* ---------- セクションの共通 ---------- */
.oc-sec{position:relative; z-index:3; scroll-margin-top:var(--oc-header-h)}
/* 本文の箱:最大幅・左右の余白(写真を画面の端まで広げる量 --oc-bleed もここから計算する)
   --oc-vw は画面の幅(スクロールバーを除く)。site.js が入れる。入るまでは 100vw */
:root{--oc-max:1080px; --oc-pad:clamp(20px,5vw,48px); --oc-vw:100vw; --oc-bleed:calc((var(--oc-vw) - min(var(--oc-max), var(--oc-vw))) / 2 + var(--oc-pad))}
.oc-wrap{max-width:var(--oc-max); margin:0 auto; padding:0 var(--oc-pad)}
.oc-sec-head{max-width:640px}
.oc-eyebrow{margin:0 0 14px; font-size:.8rem; letter-spacing:.16em; color:var(--blue); font-weight:500}
.oc-sec-title{margin:0; font-family:var(--mincho); font-weight:500; font-size:clamp(1.5rem,1.1rem + 1.4vw,2.1rem); line-height:1.6; letter-spacing:.1em}

/* ---------- スクロールで現れる(型1・2026/10/08 院長決定) ----------
   動きを付けるのは トップの上半分・施術方針・院紹介 だけ(inc/template-tags.php の octo_rv())
   ・動きあり:JS(site.js)がブロック(.oc-reveal)の中を段に分けて class を付けて隠し、順に .oc-in で出す
       .oc-f 枠・カード(ぼかし → くっきり)/.oc-m 中見出し/.oc-s 小見出し/.oc-b 本文。最後にブロックに .on(アイコン・線画など)
       隠すのは JS が class を付けた要素だけ(JS が動かないときは、すべて最初から見えている)
       transition は .oc-in が付いたとき(出すとき)だけ。隠すときは一瞬で(見えている状態から隠れていく動きが見えないように)
       長さ・距離などは JS の定数(site.js の MV)から --oc-f-d などに入る
   ・演出なし(.oc-static):最初から .on が付いている。アイコン・線画などは描き終わった状態で出す */
.oc-f:not(.oc-in){opacity:0; filter:blur(var(--oc-f-blur,6px)); transform:scale(var(--oc-f-scale,.98))}
.oc-f.oc-in{transition:opacity var(--oc-f-d,.6s) ease-out, filter var(--oc-f-d,.6s) ease-out, transform var(--oc-f-d,.6s) ease-out}
.oc-m:not(.oc-in){opacity:0; transform:translateY(var(--oc-m-y,10px))}
.oc-m.oc-in{transition:opacity var(--oc-m-d,.5s) var(--ease), transform var(--oc-m-d,.5s) var(--ease)}
.oc-s:not(.oc-in){opacity:0; transform:translateY(var(--oc-s-y,8px))}
.oc-s.oc-in{transition:opacity var(--oc-s-d,.45s) var(--ease), transform var(--oc-s-d,.45s) var(--ease)}
.oc-b:not(.oc-in){opacity:0; transform:translateY(var(--oc-b-y,4px))}
.oc-b.oc-in{transition:opacity var(--oc-b-d,.45s) ease-out, transform var(--oc-b-d,.45s) ease-out}
/* 例外:.oc-live を付けた要素は、演出なしのブロックの中でも動く(道順の線・電話ボタンの合図など、情報を伝えるための動き。第8回)
   この仕組みは !important なので、動かす要素には必ず .oc-live を付ける(付けないと、動きの長さが0になって止まる) */
.oc-static, .oc-static *:not(.oc-live), .oc-static *:not(.oc-live)::before, .oc-static *:not(.oc-live)::after{animation-duration:0s!important; animation-delay:0s!important}

/* ---------- 写真(第7回)----------
   .oc-photo:写真の箱(ぼかしが外にはみ出さないよう overflow:hidden)。<img> は inc/template-tags.php の octo_photo()
   .oc-bleed-l / .oc-bleed-r:本文の幅から、左/右の画面の端まで広げる(広げた側の角は丸めない。720px 以下は左右とも画面いっぱい・角丸なし)
   .oc-chip:写真の左下の小さなラベル
   出方「ピント」:動きのあるブロックの中だけ、site.js が .oc-pf を付けて隠し、.oc-in で出す(値は site.js の MV.ph)
     演出なしのページ・prefers-reduced-motion・JS が動かないときは .oc-pf が付かないので、最初から普通に見えている */
.oc-psec{overflow-x:clip}
.oc-photo{position:relative; margin:0; overflow:hidden; border-radius:6px}
.oc-photo img{display:block; width:100%; height:auto}
.oc-bleed-l{margin-left:calc(-1 * var(--oc-bleed))}
.oc-bleed-r{margin-right:calc(-1 * var(--oc-bleed))}
.oc-photo.oc-bleed-l{border-radius:0 6px 6px 0}
.oc-photo.oc-bleed-r{border-radius:6px 0 0 6px}
@media (max-width:720px){
  .oc-bleed-l,.oc-bleed-r{margin-left:calc(-1 * var(--oc-pad)); margin-right:calc(-1 * var(--oc-pad))}
  .oc-photo.oc-bleed-l,.oc-photo.oc-bleed-r{border-radius:0}
}
.oc-chip{position:absolute; z-index:3; left:14px; bottom:14px; display:inline-flex; align-items:center; gap:7px; padding:5px 12px 5px 10px; border-radius:999px; background:rgba(255,255,255,.92); color:var(--ink); font-size:.76rem; letter-spacing:.06em; line-height:1.4; box-shadow:0 2px 10px rgba(0,0,0,.08); pointer-events:none}
.oc-chip::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--blue); opacity:.7}
/* 小さな英字の見出し(Photo guide・TREATMENT など) */
.oc-en{display:block; font-family:var(--gothic); font-size:.72rem; letter-spacing:.22em; color:var(--blue); opacity:.7; text-transform:uppercase; margin-bottom:6px}
/* ピント:透明・ぼかし・少し大きい → くっきり(--oc-d は site.js が入れる始まりの時刻) */
.oc-photo.oc-pf.oc-in img{transition:opacity var(--oc-ph-o,.9s) ease var(--oc-d,0s), filter var(--oc-ph-f,1.1s) ease var(--oc-d,0s), transform var(--oc-ph-t,1.6s) var(--ease) var(--oc-d,0s)}
.oc-photo.oc-pf:not(.oc-in) img{opacity:0; filter:blur(var(--oc-ph-blur,12px)); transform:scale(var(--oc-ph-scale,1.04))}
.oc-photo.oc-pf.oc-in .oc-chip{transition:opacity .5s ease calc(var(--oc-d,0s) + var(--oc-ph-chip,.75s)), transform .6s var(--ease) calc(var(--oc-d,0s) + var(--oc-ph-chip,.75s))}
.oc-photo.oc-pf:not(.oc-in) .oc-chip{opacity:0; transform:translateY(6px)}

/* ---------- 押せる電話ボタン(.oc-telbtn・第8回。元:sample-08.html の「2」) ----------
   白い地の丸いボタン。左に紺の丸+白い電話のアイコン(予約の帯の「お電話」と同じ)、中に番号と「タップで電話をかける」(PC は「お電話でご相談ください」)、右に「›」
   画面に入ったとき1回だけ、アイコンが小さく揺れる(site.js が .oc-ring を付ける。くり返さない・動きを減らす設定では揺らさない)
   演出なしのページでも、押せることを伝える合図として揺らす(揺れる部分に .oc-live) */
.oc-telbtn{display:flex; align-items:center; gap:14px; max-width:360px; margin-top:18px; padding:12px 18px 12px 12px; background:#fff; border:1.5px solid rgba(27,32,135,.22); border-radius:999px; box-shadow:0 4px 14px rgba(27,32,135,.10); color:var(--ink); text-decoration:none; transition:transform .15s ease, box-shadow .2s ease; -webkit-tap-highlight-color:transparent}
.oc-telbtn:active{transform:scale(.98); box-shadow:0 1px 6px rgba(27,32,135,.12)}
.oc-telbtn:focus-visible{outline:2px solid var(--blue); outline-offset:3px}
.oc-telbtn__ic{flex:0 0 44px; display:grid; place-items:center; width:44px; height:44px; border-radius:50%; background:var(--blue); color:#fff}
.oc-telbtn__bell{display:block; width:20px; height:20px; transform-origin:50% 50%}
.oc-telbtn__bell svg{display:block; width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.oc-telbtn.oc-ring .oc-telbtn__bell{animation:ocRing .9s ease-in-out 1}
@keyframes ocRing{0%,100%{transform:rotate(0)} 15%{transform:rotate(-14deg)} 30%{transform:rotate(12deg)} 45%{transform:rotate(-9deg)} 60%{transform:rotate(6deg)} 75%{transform:rotate(-3deg)}}
.oc-telbtn__tx{display:flex; flex-direction:column; line-height:1.3}
.oc-telbtn__num{font-family:var(--mincho); font-size:1.45rem; letter-spacing:.04em; white-space:nowrap}
/* 360px 以下は番号を少し小さく(320px で番号が2行に折り返さないように・第10回) */
@media (max-width:360px){ .oc-telbtn{gap:12px} .oc-telbtn__num{font-size:1.3rem} }
.oc-telbtn__act{margin-top:2px; font-size:.74rem; letter-spacing:.06em; color:var(--blue)}
.oc-telbtn__act .pc{display:none}
.oc-telbtn__go{margin-left:auto; font-size:1.3rem; color:var(--blue); opacity:.7}
@media (hover:hover) and (pointer:fine){
  .oc-telbtn__act .sp{display:none}
  .oc-telbtn__act .pc{display:inline}
  .oc-telbtn:hover{box-shadow:0 6px 18px rgba(27,32,135,.16)}
}

/* ---------- ひかえめな電話の形(.oc-tellink・第9回。元:sample-08.html の「3」) ----------
   枠・影なし。左に紺の丸(30px)+白い電話のアイコン、「お電話」+番号(番号の下に紺のうすい線)、スマホだけ右に「タップで発信」
   押したとき(PC はマウスを乗せたときも)番号に淡い赤のマーカー(サイト共通のリンクと同じ色・同じ考え方)。動きはなし
   押せる範囲の高さは 44px(すぐ下のリンクと指で押し分けられるように) */
.oc-tellink{--oc-mk:rgba(var(--red-soft-rgb),0); display:inline-flex; align-items:center; gap:10px; min-height:44px; margin-top:14px; color:var(--ink); text-decoration:none; -webkit-tap-highlight-color:transparent}
.oc-tellink__ic{flex:0 0 30px; display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--blue); color:#fff}
.oc-tellink__ic svg{display:block; width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.oc-tellink__lb{font-size:.82rem; color:var(--ink-soft)}
.oc-tellink__num{font-family:var(--mincho); font-size:1.25rem; letter-spacing:.04em; border-bottom:1px solid rgba(27,32,135,.35); background:linear-gradient(transparent 46%, var(--oc-mk) 46%, var(--oc-mk) 76%, transparent 76%) no-repeat 0 0 / 100% 100%}
.oc-tellink:active,.oc-tellink:focus-visible{--oc-mk:rgba(var(--red-soft-rgb),.18)}
.oc-tellink__num{--oc-mk:inherit}
.oc-tellink:focus-visible{outline:2px solid var(--blue); outline-offset:4px}
.oc-tellink__act{margin-left:2px; font-size:.72rem; color:var(--blue)}
@media (hover:hover) and (pointer:fine){
  .oc-tellink__act{display:none}
  .oc-tellink__num{transition:--oc-mk .3s var(--ease)}
  .oc-tellink:hover{--oc-mk:rgba(var(--red-soft-rgb),.18)}
}

/* ---------- 線のアイコン(第11回。SVG は inc/icons.php の octo_ic() / octo_ic_s()) ----------
   .oc-ic:うすい紺の丸 52px+アイコン 30px(スマホは 48px / 28px)。.is-red でうすい赤の丸(赤い地の段・帯)
   .oc-ic-s:丸なしの小さいアイコン 22px(表の項目名など)。線は紺 62%
   線は紺・太さ 1.25・端は丸。class="r" の線だけ赤。動きはなし */
.oc-ic{display:grid; place-items:center; flex:none; width:52px; height:52px; border-radius:50%; background:rgba(27,32,135,.07)}
.oc-ic.is-red{background:rgba(218,74,63,.10)}
.oc-ic svg{display:block; width:30px; height:30px; fill:none; stroke:var(--blue); stroke-width:1.25; stroke-linecap:round; stroke-linejoin:round}
.oc-ic-s{display:inline-grid; place-items:center; flex:none}
.oc-ic-s svg{display:block; width:22px; height:22px; fill:none; stroke:rgba(27,32,135,.62); stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round}
.oc-ic svg .r,.oc-ic-s svg .r{stroke:var(--red-soft)}
/* 見出しの左にアイコン(カード・2列の枠の h3) */
.oc-h-ic{display:flex; align-items:center; gap:14px}
/* STEP にアイコン(.oc-steps に .oc-steps--ic):縦に並ぶ STEP は文字の左に丸。赤い地の段(.first)はうすい赤の丸 */
.oc-steps--ic .oc-step{padding-left:clamp(88px,9vw,104px)}
.oc-steps--ic .oc-step > .oc-ic{position:absolute; left:clamp(22px,2.6vw,32px); top:24px}
.oc-steps--ic .oc-step.first > .oc-ic{background:rgba(218,74,63,.10)}
@media (max-width:720px){
  .oc-ic{width:48px; height:48px}
  .oc-ic svg{width:28px; height:28px}
  .oc-h-ic .oc-ic{width:46px; height:46px}
  .oc-h-ic .oc-ic svg{width:26px; height:26px}
  .oc-steps--ic .oc-step{padding-left:84px}
  .oc-steps--ic .oc-step > .oc-ic{left:20px}
}

/* ---------- 予約ボタン(角丸 6px・やわらげた赤。触れると 2px 浮いて白地に赤へ。押したときは浮かない) ---------- */
.oc-btn{
  position:relative; overflow:hidden; isolation:isolate;
  display:inline-flex; align-items:center; gap:22px;
  padding:18px 32px 18px 42px; border-radius:6px; border:1px solid var(--red-soft);
  text-decoration:none; color:#fff; background:var(--red-soft);
  font-size:1rem; letter-spacing:.12em; font-weight:500;
  box-shadow:0 2px 4px -1px rgba(var(--red-soft-rgb),.25);
  transition:background-color .4s var(--ease), color .4s var(--ease), box-shadow .45s var(--ease), transform .45s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.oc-btn > span{position:relative; z-index:2}
.oc-btn svg{display:block; width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.oc-btn__arrow{display:block; transition:transform .45s var(--ease), color .4s var(--ease)}
.oc-btn__label{display:block; transition:color .4s var(--ease)}
.oc-btn:hover{background:#fff; color:var(--red-soft); transform:translateY(-2px); box-shadow:0 16px 30px -12px rgba(var(--red-soft-rgb),.45), 0 4px 10px -4px rgba(var(--red-soft-rgb),.2)}
.oc-btn:hover .oc-btn__arrow{transform:translateX(4px)}
.oc-btn:active{background:#fff; color:var(--red-soft); transform:none}
.oc-btn:focus-visible{outline:2px solid var(--blue); outline-offset:3px}
@media (max-width:720px){
  .oc-btn{font-size:.95rem; letter-spacing:.08em; padding:16px 22px 16px 26px; gap:14px}
}
@media (max-width:380px){
  .oc-btn{padding:16px 18px 16px 22px; gap:12px; letter-spacing:.06em}
}

/* ---------- リンクの見え方(サイト共通・第18回 作業C:案B1 ── 見本 sample-18-links.html) ----------
   「→」付きの単独のリンク(.oc-link)と文中リンク(.oc-prose a)。ナビ・プルダウン・MENU・フッター・パンくず・ボタン・ご予約の帯のカード・電話のボタンは対象外
   - 文字は本文と同じ黒・やや太く(500)。下線はなし
   - 淡い赤のマーカーを、文字の下から 38% の高さに最初から敷く。色はサイトのマーカーの色(--oc-mk-c:--red-soft の 18%)
   - 触れる(PC)・押す(スマホの :active)・キーボードで選ぶと、マーカーが文字全体の高さへ下から広がる(0.25秒)
   - .oc-link の矢印は細い線の SVG(octo_link_arrow():18×10・線 1.3・#DA4A3F)。文字との間 10px。PC で触れると右へ 3px
   - 文中リンクは矢印なし。行をまたいでもマーカーが各行に敷かれる(box-decoration-break: clone)
   - 動きを減らす設定では動かさない */
@property --oc-mk{syntax:'<color>'; inherits:false; initial-value:rgba(218,74,63,0)} /* 電話の番号(.oc-tellink)で使う */
:root{--oc-mk-c:rgba(var(--red-soft-rgb),.18)}
.oc-link,.oc-prose a{
  color:var(--ink); font-weight:500; text-decoration:none; letter-spacing:.05em;
  background-image:linear-gradient(var(--oc-mk-c),var(--oc-mk-c)); background-repeat:no-repeat; background-position:0 100%; background-size:100% 38%;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
  transition:background-size .25s ease;
}
.oc-link{display:inline-flex; align-items:center; gap:10px; margin-top:14px; padding:2px 2px 0; font-size:.92rem}
.oc-prose a{padding:0 1px}
.oc-link svg.oc-link__arw{flex:none; width:18px; height:10px; overflow:visible; fill:none; stroke:var(--red-soft); stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round; transition:transform .25s ease}
.oc-link:active,.oc-prose a:active,
.oc-link:focus-visible,.oc-prose a:focus-visible{background-size:100% 100%; color:var(--ink)}
.oc-link:focus-visible,.oc-prose a:focus-visible{outline:2px solid var(--blue); outline-offset:4px}
@media (hover:hover){
  .oc-link:hover,.oc-prose a:hover{background-size:100% 100%; color:var(--ink)}
  .oc-link:hover svg.oc-link__arw{transform:translateX(3px)}
}
@media (prefers-reduced-motion:reduce){
  .oc-link,.oc-prose a,.oc-link svg.oc-link__arw{transition:none}
  .oc-link:hover svg.oc-link__arw{transform:none}
}

/* ---------- 住所(郵便番号のあとで改行。番地までと建物名は、それぞれ途中で折り返さない) ---------- */
.oc-addr__street,.oc-addr__bldg{white-space:nowrap}

/* ---------- ヘッダー(2026/10/07 作り直し) ----------
   ロゴ:SVG(英字なし)。横幅 PC 220px/タブレット 210px/スマホ 画面の約半分(最大 200px)
   帯の高さ:PC 72px/タブレット 66px/スマホ 64px(--oc-header-h。見出し帯の上の余白もこれに連動)
   PC はページ名を横に並べる。〜960px は右上がメニューボタン(三本線+MENU) */
.oc-header{
  position:fixed; inset:0 0 auto 0; z-index:20; padding-top:env(safe-area-inset-top,0px);
  background:rgba(255,255,255,.92); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(33,33,33,.06);
}
.admin-bar .oc-header{top:var(--wp-admin--admin-bar--height,32px)}
.oc-header__wrap{max-width:1200px; margin:0 auto; height:var(--oc-header-h); padding:0 clamp(16px,4vw,40px); display:flex; align-items:center; justify-content:space-between; gap:20px}
.oc-logo{display:block; flex:none; text-decoration:none}
.oc-logo img{display:block; width:220px; height:auto}
.oc-header__actions{display:flex; align-items:center; gap:20px; flex:none}
.oc-header__tel{text-decoration:none; font-size:.95rem; letter-spacing:.06em; display:flex; align-items:baseline; gap:8px; white-space:nowrap}
.oc-header__tel small{font-size:.72rem; color:var(--ink-soft)}
/* 「ご予約」(第19回 案B:白い地+赤い四角のカレンダー。触れると 2px 浮いて、枠と文字が赤に) */
.oc-header__btn{display:inline-flex; align-items:center; gap:12px; padding:6px 20px 6px 6px; text-decoration:none; color:var(--ink); background:#fff; border:1px solid rgba(var(--red-soft-rgb),.28); border-radius:6px; box-shadow:0 1px 2px rgba(33,33,33,.05); font-size:.92rem; font-weight:500; letter-spacing:.12em; white-space:nowrap; transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .4s var(--ease), color .4s var(--ease)}
.oc-header__btn-ic{flex:none; display:grid; place-items:center; width:34px; height:34px; border-radius:5px; background:var(--red-soft); color:#fff}
.oc-header__btn-ic svg{display:block; width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
@media (hover:hover){
  .oc-header__btn:hover{transform:translateY(-2px); border-color:var(--red-soft); color:var(--red-soft); box-shadow:0 14px 26px -14px rgba(var(--red-soft-rgb),.5), 0 3px 8px -4px rgba(var(--red-soft-rgb),.2)}
}
.oc-header__btn:active{transform:none}
.oc-header__btn:focus-visible{outline:2px solid var(--blue); outline-offset:3px}
/* PC:ページ名を横に並べる(ナビなのでマーカーの演出はなし) */
.oc-gnav{margin-left:auto}
.oc-gnav ul{list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:clamp(16px,1.8vw,26px)}
.oc-gnav a{display:block; padding:6px 0; font-size:.88rem; letter-spacing:.08em; text-decoration:none; color:var(--ink); white-space:nowrap; transition:color .25s var(--ease)}
.oc-gnav a:hover,.oc-gnav a[aria-current="page"]{color:var(--red-soft)}
.oc-gnav a:focus-visible{outline:2px solid var(--blue); outline-offset:3px}
/* メニュー・料金のプルダウン(第18回 B3・幅 961px 以上)
   印(▾)を押す/キーボードで印に合わせて Enter/マウスを乗せると開く。閉じる:外を押す・Esc・マウスが離れて 0.3秒(site.js)
   .oc-gnav__sub は透明の箱(リンクから枠までのすき間でも閉じないように)。見た目は中の .oc-gnav__panel */
.oc-gnav__has{position:relative; display:flex; align-items:center; gap:2px}
.oc-gnav__tg{display:grid; place-items:center; width:22px; height:30px; margin:0 -4px 0 0; padding:0; border:0; border-radius:4px; background:none; color:var(--ink-soft); cursor:pointer}
.oc-gnav__tg svg{width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; transition:transform .2s var(--ease)}
.oc-gnav__tg[aria-expanded="true"] svg{transform:rotate(180deg)}
.oc-gnav__tg:hover{color:var(--red-soft)}
.oc-gnav__tg:focus-visible{outline:2px solid var(--blue); outline-offset:1px}
.oc-gnav__sub{position:absolute; z-index:40; top:100%; left:50%; padding-top:14px; transform:translate(-50%,4px); opacity:0; visibility:hidden; transition:opacity .18s var(--ease), transform .18s var(--ease), visibility 0s linear .18s}
.oc-gnav__has.is-open .oc-gnav__sub{opacity:1; visibility:visible; transform:translate(-50%,0); transition:opacity .18s var(--ease), transform .18s var(--ease), visibility 0s}
.oc-gnav ul.oc-gnav__panel{display:block; min-width:188px; margin:0; padding:6px; list-style:none; background:#fff; border:1px solid rgba(27,32,135,.14); border-radius:8px; box-shadow:0 14px 30px -20px rgba(0,0,0,.28)}
.oc-gnav__panel a{display:flex; align-items:center; min-height:44px; padding:0 14px; border-radius:5px; font-size:.82rem; letter-spacing:.06em; color:var(--ink); white-space:nowrap}
.oc-gnav__panel a:hover,.oc-gnav__panel a:focus-visible{background:var(--red-pale); color:var(--ink)}
.oc-gnav__panel a:focus-visible{outline:2px solid var(--blue); outline-offset:-2px}
@media (prefers-reduced-motion:reduce){
  .oc-gnav__sub,.oc-gnav__has.is-open .oc-gnav__sub{transform:translate(-50%,0); transition:none}
  .oc-gnav__tg svg{transition:none}
}
/* メニューボタン(〜960px)・閉じるボタン:紺の線。押せる大きさ 48×48px */
.oc-menu-btn,.oc-menu-close{appearance:none; -webkit-appearance:none; display:none; flex-direction:column; align-items:center; justify-content:center; gap:1px; width:48px; height:48px; margin-right:-6px; padding:0; border:0; border-radius:6px; background:none; color:var(--blue); cursor:pointer; font:inherit; -webkit-tap-highlight-color:transparent}
.oc-menu-btn__icon{display:block; width:26px; height:26px}
.oc-menu-btn__icon svg{display:block; width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round}
.oc-menu-btn__t{font-size:.6rem; letter-spacing:.14em; line-height:1}
.oc-menu-btn:focus-visible,.oc-menu-close:focus-visible{outline:2px solid var(--blue); outline-offset:2px}
.oc-menu-btn:active,.oc-menu-close:active{background:var(--blue-pale)}
@media (max-width:1080px){
  /* 961〜1080px はナビが窮屈になるので、お電話の表示を省く(お電話はご予約の帯・メニューから) */
  .oc-header__tel{display:none}
}
@media (max-width:960px){
  .oc-logo img{width:210px}
  .oc-gnav,.oc-header__tel,.oc-header__btn{display:none}
  .oc-menu-btn,.oc-menu-close{display:flex}
  /* 第19回:下へ読むとヘッダーが引っこむ(html.oc-hdr-hide・site.js)。引っこんでいるあいだは右上に丸い MENU だけ */
  .oc-header{transition:transform .35s var(--ease)}
  .oc-hdr-hide .oc-header{transform:translateY(-100%)}
  .oc-menu-fab{position:fixed; z-index:21; top:calc(8px + env(safe-area-inset-top,0px)); right:calc(10px + env(safe-area-inset-right,0px)); width:46px; height:46px; margin:0; gap:0; border-radius:50%;
    background:rgba(255,255,255,.9); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); box-shadow:0 4px 14px -6px rgba(33,33,33,.35), 0 0 0 1px rgba(33,33,33,.06);
    opacity:0; visibility:hidden; transform:scale(.85); transition:opacity .3s var(--ease), transform .3s var(--ease), visibility 0s linear .3s}
  .oc-menu-fab .oc-menu-btn__icon{width:22px; height:22px}
  .oc-menu-fab .oc-menu-btn__t{font-size:.5rem}
  .oc-hdr-hide .oc-menu-fab{opacity:1; visibility:visible; transform:none; transition:opacity .3s var(--ease), transform .3s var(--ease), visibility 0s}
}
.oc-menu-fab{display:none}
@media (max-width:960px){ .oc-menu-fab{display:flex} }
@media (max-width:720px){
  .oc-logo img{width:min(50vw,200px)}
}
@media (max-width:600px){
  /* WordPress の管理バーはこの幅では上に固定されない */
  .admin-bar .oc-header{top:0}
}

/* ---------- メニューの画面(〜960px。白い地が 0.2 秒でふわっと現れる。横から滑り込む動きは使わない) ---------- */
.oc-menu{position:fixed; inset:0; z-index:50; display:none; flex-direction:column; background:transparent; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px); overflow-y:auto; overscroll-behavior:contain; opacity:0; visibility:hidden; transition:opacity .2s var(--ease), visibility 0s linear .2s, background-color 0s linear .2s}
/* 第19回 追加1:閉じているあいだは背景を透明に(iOS 26 の Safari が、画面の下のふちにかかる白い面を下のバーの裏に広げないように)。開いているあいだだけ白
   追加2:閉じているあいだは display:none(最初の状態と閉じたあとを同じに)。開く直前に .is-shown、閉じる動きが終わったら外す(site.js) */
.oc-menu.is-shown{display:flex}
.oc-menu.is-open{background:#fff}
.oc-menu.is-open{opacity:1; visibility:visible; transition:opacity .2s var(--ease), visibility 0s}
.oc-menu__bar{flex:none; display:flex; align-items:center; justify-content:space-between; height:var(--oc-header-h); padding:0 clamp(16px,4vw,40px); border-bottom:1px solid rgba(33,33,33,.06)}
.oc-menu__panel{width:100%; max-width:560px; margin:0 auto; padding:12px clamp(20px,5vw,48px) 40px}
.oc-menu__pages{list-style:none; margin:0; padding:0}
.oc-menu__pages li{border-bottom:1px solid rgba(33,33,33,.08)}
.oc-menu__pages a{display:block; padding:15px 4px; font-family:var(--mincho); font-weight:500; font-size:1.12rem; letter-spacing:.08em; text-decoration:none; color:var(--ink)}
.oc-menu__pages a[aria-current="page"]{color:var(--red-soft)}
.oc-menu__pages a:active{background:var(--red-pale)}
/* MENU の「メニュー・料金」の下の6つ(第18回 B3:小さく字下げして、いつも表示) */
.oc-menu__sub{list-style:none; margin:-6px 0 0; padding:0 0 10px 20px}
.oc-menu__pages .oc-menu__sub li{border-bottom:0}
.oc-menu__pages .oc-menu__sub a{padding:9px 4px; min-height:44px; box-sizing:border-box; display:flex; align-items:center; font-family:var(--gothic); font-weight:400; font-size:.9rem; letter-spacing:.06em; color:var(--ink-soft)}
.oc-menu__h{margin:36px 0 12px; font-size:.8rem; letter-spacing:.12em; color:var(--blue)}
/* ご予約の3つ:固定フッターと同じ考え方(白い地+色つきの丸アイコン)。縦に並べて横幅いっぱい
   名前は黒の太字、補足(電話番号など)は小さい文字で名前の下。ネット予約が「準備中」の間は控えめな表示のまま */
.oc-menu__ways{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr; gap:10px}
.oc-menu__ways a{display:grid; grid-template-columns:32px 1fr; grid-template-areas:"i l" "i m"; align-items:center; column-gap:12px; min-height:56px; padding:8px 16px; border-radius:10px; background:#fff; border:1px solid rgba(33,33,33,.08); box-shadow:0 8px 22px rgba(33,33,33,.14), 0 2px 6px rgba(33,33,33,.08); color:var(--ink); text-decoration:none; -webkit-tap-highlight-color:transparent}
.oc-menu__ways a:active{background:#F7F4F0}
.oc-menu__ways .is-pending{display:flex; align-items:center; gap:12px; min-height:52px; padding:8px 18px; border:1px solid rgba(27,32,135,.16); border-radius:10px; color:var(--ink-soft)}
.oc-menu__i{flex:none; width:24px; height:24px}
.oc-menu__i svg{display:block; width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
.oc-menu__ways a .oc-menu__i{grid-area:i; display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--oc-ic); color:#fff}
.oc-menu__ways a .oc-menu__i svg{width:19px; height:19px; stroke-width:1.6}
.oc-menu__ways a .oc-menu__l{grid-area:l; align-self:end; font-size:.95rem; font-weight:600; letter-spacing:.06em; line-height:1.4}
.oc-menu__ways a .oc-menu__m{grid-area:m; align-self:start; font-size:.78rem; color:var(--ink-soft); letter-spacing:.04em; line-height:1.4}
.oc-menu__ways .is-pending .oc-menu__i{color:var(--blue); opacity:.6}
.oc-menu__ways .is-pending .oc-menu__l{font-size:.95rem; letter-spacing:.08em}
.oc-menu__ways .is-pending .oc-menu__m{margin-left:auto; font-size:.9rem}
.oc-menu__hours{margin:20px 0 0; font-size:.82rem; line-height:1.8; color:var(--ink-soft)}
.oc-menu a:focus-visible{outline:2px solid var(--blue); outline-offset:2px}
.oc-menu__ways a:focus-visible{outline-offset:3px}
/* メニューを開いている間は、後ろのページをスクロールさせない */
html.oc-menu-open,html.oc-menu-open body{overflow:hidden}
@media (min-width:961px){ .oc-menu,.oc-menu.is-shown{display:none} }


/* ---------- 営業日の表(院長の2段形式+ショップカードの曜日表) ---------- */
.oc-sched-wrap{margin-top:20px; max-width:420px}
.oc-sched-wrap--big{max-width:520px; margin:0 0 28px}
.oc-sched{--oc-r1:56px; width:100%; border:0; border-collapse:collapse; table-layout:fixed; text-align:center} /* --oc-r1:上の段の高さ */
/* Arkhe の表のスタイル(枠線・セルの余白 !important・灰色の見出し)を打ち消す */
.oc-sched th,.oc-sched td{--ark-padding--cell:0; text-align:center; vertical-align:middle; border:0; background:none; word-break:normal}
.oc-sched thead th{--ark-padding--cell:4px 0 8px; font-family:var(--mincho); font-weight:500; font-size:.95rem; color:var(--ink); border-bottom:1px solid rgba(33,33,33,.55)}
.oc-sched thead th.oc-sched__sat{color:#2E3A9E}
.oc-sched thead th.oc-sched__hol{color:var(--red)}
.oc-sched tbody th,.oc-sched tbody td{height:52px; border-bottom:1px solid rgba(33,33,33,.08)}
.oc-sched tbody tr:first-child > *{height:var(--oc-r1)} /* 第18回 D2:寝顔と「休み」を上の段(横線より上)に収める(前は 48px) */
.oc-sched .oc-sched__tl{width:5.6em; font-family:var(--gothic); font-weight:400; font-size:.86rem; color:var(--ink); line-height:1.35; text-align:left; white-space:nowrap}
.oc-sched__ok{display:inline-block; width:20px; height:20px; border-radius:50%; border:2px solid var(--red-soft); vertical-align:middle}
.oc-sched__no{color:#8a8a8a; font-size:1rem}
/* お休みは寝顔オクト君+「休み」。オクト君を上の段の ○ となるべく同じ高さに
   第18回 D2:寝顔と「休み」の文字を、上の段の中(横線より上)に収める(上の段を少し高く・寝顔を少し小さく・文字との間をつめた) */
.oc-sched td.oc-sched__off{vertical-align:top; position:relative}
/* 第18回 E1:段の間の横線は上の段の各マスの下の線。休みのマスは2段をまたぐ1つのマス(rowspan="2")で、段の境目がなく線が切れていた
   → 休みのマスの中の、上の段の高さ(--oc-r1)の所に、ほかの列と同じ線を引く */
.oc-sched td.oc-sched__off::after{content:""; position:absolute; left:0; right:0; top:calc(var(--oc-r1) - .5px); border-top:1px solid rgba(33,33,33,.08); pointer-events:none} /* 表の線は境目の真ん中に引かれるので 0.5px 上へ */
.oc-sched__rest{display:inline-flex; flex-direction:column; align-items:center; gap:1px; margin-top:12px}
.oc-sched__rest img{display:block; width:26px; height:auto}
.oc-sched__rest-t{font-size:.74rem; color:var(--ink-soft); line-height:1.15}
@media (min-width:721px){
  .oc-sched-wrap--big .oc-sched thead th{font-size:1rem}
  .oc-sched-wrap--big .oc-sched tbody th,.oc-sched-wrap--big .oc-sched tbody td{height:60px}
  .oc-sched-wrap--big .oc-sched{--oc-r1:66px}
  .oc-sched-wrap--big .oc-sched tbody tr:first-child > *{height:var(--oc-r1)} /* 上の60pxの指定より後に書く */
  .oc-sched-wrap--big .oc-sched .oc-sched__tl{width:7em; font-size:.92rem}
  .oc-sched-wrap--big .oc-sched__ok{width:24px; height:24px}
  .oc-sched-wrap--big .oc-sched__rest img{width:30px}
  .oc-sched-wrap--big .oc-sched__rest{margin-top:13px; gap:2px}
  .oc-sched-wrap--big .oc-sched__rest-t{font-size:.78rem}
}
@media (max-width:720px){
  .oc-sched .oc-sched__tl{width:5.4em; font-size:.8rem}
  .oc-sched thead th{font-size:.88rem}
  .oc-sched__ok{width:18px; height:18px}
  .oc-sched__rest img{width:24px}
  .oc-sched__rest-t{font-size:.72rem}
}
@media (max-width:380px){
  .oc-sched .oc-sched__tl{width:4.9em; font-size:.74rem}
}
@media (max-width:340px){
  /* 320px 前後:時間の文字が月曜の ○ に近づきすぎないよう、少し小さく(2026/10/07 院長要望) */
  .oc-sched .oc-sched__tl{width:62px; font-size:.68rem}
}

/* ---------- ページの先頭へ戻るボタン(第19回)----------
   画面の高さの 1.5倍より下で、上へ戻そうとしたときだけ出る(html.oc-totop-on・site.js)。下へ読むと消える
   下の予約ボタンが出ているとき(html.oc-sticky-on)はその上 10px、出ていないときは下 24px */
.oc-totop{position:fixed; z-index:29; right:calc(12px + env(safe-area-inset-right,0px)); bottom:calc(24px + env(safe-area-inset-bottom,0px)); width:44px; height:44px; padding:0; border:0; background:none; cursor:pointer; display:grid; place-items:center; -webkit-tap-highlight-color:transparent;
  opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity .3s var(--ease), transform .3s var(--ease), bottom .35s var(--ease), visibility 0s linear .3s}
.oc-totop__c{display:grid; place-items:center; width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,.94); border:1px solid rgba(27,32,135,.25); color:var(--blue); box-shadow:0 4px 12px -6px rgba(33,33,33,.3)}
.oc-totop__c svg{display:block; width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.oc-totop-on .oc-totop{opacity:1; visibility:visible; transform:none; transition:opacity .3s var(--ease), transform .3s var(--ease), bottom .35s var(--ease), visibility 0s}
.oc-totop:focus-visible{outline:2px solid var(--blue); outline-offset:1px; border-radius:50%}
.oc-totop:active .oc-totop__c{background:var(--blue-pale)}
@media (max-width:720px){
  /* 下の予約ボタン(下 12px+高さ 48px+枠 2px)の上 10px */
  .oc-sticky-on .oc-totop{bottom:calc(72px + env(safe-area-inset-bottom,0px))}
}

/* ---------- ご予約・お問い合わせ(赤い帯は見出しまで。小さな文字はすべて白い面へ) ---------- */
.oc-contact{background:var(--white); padding:0 0 clamp(72px,9vw,112px)}
.oc-contact__band{background:var(--red-soft); color:#fff; padding:clamp(80px,10vw,120px) 0 clamp(110px,12vw,140px)}
.oc-contact__head{text-align:center}
.oc-contact__band .oc-sec-title{color:#fff; font-weight:500}
.oc-contact__mark{display:block; width:84px; height:auto; margin:0 auto 26px}
.oc-contact__body{position:relative; margin-top:clamp(-96px,-8vw,-72px)}
.oc-contact__panel{max-width:960px; margin:0 auto; background:#fff; border-radius:8px; padding:28px clamp(12px,2vw,24px) 10px; box-shadow:0 26px 50px -30px rgba(110,24,16,.45), 0 1px 4px rgba(0,0,0,.05)}
.oc-contact__lead{margin:0 0 4px; text-align:center; color:var(--ink-soft); font-size:.95rem; letter-spacing:.04em}
.oc-channels{list-style:none; margin:16px auto 0; padding:0; max-width:960px; display:grid; grid-template-columns:repeat(3,1fr); color:var(--ink)}
.oc-channels li + li{border-left:1px solid rgba(27,32,135,.14)}
.oc-ch{display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; padding:26px 20px 28px; text-decoration:none; border-radius:6px; transition:background-color .35s var(--ease); -webkit-tap-highlight-color:transparent}
.oc-ch__icon{width:30px; height:30px; margin-bottom:10px; color:var(--blue); transition:color .35s var(--ease)}
.oc-ch__icon svg{display:block; width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.15; stroke-linecap:round; stroke-linejoin:round}
.oc-ch__label{font-size:.8rem; letter-spacing:.14em; color:var(--ink-soft)}
.oc-ch__main{font-family:var(--mincho); font-weight:500; font-size:clamp(1rem,.82rem + .45vw,1.26rem); letter-spacing:.04em; line-height:1.5; white-space:nowrap}
.oc-ch__note{font-size:.82rem; color:var(--ink-soft); letter-spacing:.04em}
.oc-ch__go{display:inline-flex; align-items:center; gap:8px; margin-top:12px; font-size:.8rem; letter-spacing:.1em; color:var(--red-soft)}
.oc-ch__go svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; transition:transform .45s var(--ease)}
a.oc-ch:hover{background:rgba(255,255,255,.78)}
a.oc-ch:hover .oc-ch__icon{color:var(--red)}
a.oc-ch:hover .oc-ch__go svg{transform:translateX(4px)}
.oc-ch:focus-visible{outline:2px solid var(--blue); outline-offset:-2px}
.oc-contact__form{text-align:center; margin:clamp(30px,4vw,44px) 0 0; font-size:.86rem; color:var(--ink-soft)}
.oc-contact__form .oc-link{margin-top:10px; font-size:.86rem}
@media (max-width:720px){
  .oc-contact__mark{width:62px; margin-bottom:22px}
  .oc-contact__band{padding:72px 0 104px}
  .oc-contact__body{margin-top:-76px}
  .oc-contact__panel{padding:22px 16px 4px}
  .oc-contact__lead{font-size:.9rem}
  .oc-channels{grid-template-columns:1fr; border-top:1px solid rgba(27,32,135,.14)}
  .oc-channels li + li{border-left:0; border-top:1px solid rgba(27,32,135,.14)}
  .oc-ch{display:grid; grid-template-columns:30px 1fr auto; grid-template-areas:"icon label go" "icon main go" "icon note go"; align-items:center; text-align:left; column-gap:18px; row-gap:0; padding:18px 6px; border-radius:0}
  .oc-ch__icon{grid-area:icon; margin:0; width:26px; height:26px}
  .oc-ch__label{grid-area:label; font-size:.74rem}
  .oc-ch__main{grid-area:main; font-size:1.08rem}
  .oc-ch__note{grid-area:note; font-size:.8rem}
  .oc-ch__go{grid-area:go; margin:0}
  .oc-ch__go .t{display:none}
  .oc-ch__go svg{width:18px; height:18px}
}

/* ---------- フッター ---------- */
.oc-footer{position:relative; z-index:3; background:var(--white); border-top:1px solid rgba(33,33,33,.06); padding:clamp(48px,6vw,64px) 0 clamp(28px,4vw,36px)}
.oc-footer__grid{display:flex; flex-wrap:wrap; justify-content:space-between; gap:28px 48px}
.oc-footer__name{display:flex; align-items:center; gap:10px; margin:0 0 12px}
.oc-footer__name img{display:block; height:46px; width:auto}
.oc-footer__nap{margin:0; font-size:.88rem; line-height:1.9; color:var(--ink-soft); font-style:normal}
.oc-footer__nap a{text-decoration:none}
.oc-footer__nav{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px 28px; align-self:center}
.oc-footer__nav a{font-size:.84rem; letter-spacing:.08em; text-decoration:none}
.oc-footer__nav a:hover{color:var(--red-soft)}
.oc-footer__bottom{margin:clamp(36px,5vw,48px) 0 0; display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 28px}
.oc-footer__privacy{font-size:.78rem; letter-spacing:.08em; color:#767676; text-decoration:none}
.oc-footer__privacy:hover{color:var(--red-soft)}
.oc-footer__copy{margin:0; font-size:.78rem; letter-spacing:.08em; color:#767676}
@media (max-width:720px){
  .oc-footer{padding-bottom:calc(28px + env(safe-area-inset-bottom,0px))} /* 固定フッターはフッターが見えている間は引っ込む */
  .oc-footer__nav{gap:10px 22px}
}

/* ---------- スマホ固定フッター(浮いている帯。お電話・ネット予約・LINE を同じ扱いで) ----------
   白い地+色つきの丸アイコン(アイコンは文字の左)。2026/10/07 院長が比較ページで「D 横並び・3色」を選んだ形
   丸の色:お電話=紺/ネット予約=やわらげた赤/LINE=LINE の緑(緑は LINE の目印にだけ使う)
   出し入れは下から 8px+ふわっと 0.25 秒(assets/js/site.js)。ご予約の赤い帯とフッターが見えている間は引っ込む */
.oc-sticky{display:none}
.oc-sticky .is-tel,.oc-menu__ways .is-tel{--oc-ic:var(--blue)}
.oc-sticky .is-reserve,.oc-menu__ways .is-reserve{--oc-ic:var(--red-soft)}
.oc-sticky .is-line,.oc-menu__ways .is-line{--oc-ic:var(--line-green)}
@media (max-width:720px){
  /* 第19回 追加1:iOS 26 の Safari は、画面の下のふちの近くにある固定した要素「そのもの」の背景色を、下のバーの裏に広げて塗る
     → 固定した .oc-sticky は透明(背景・影・ぼかしなし)にして、白い地・枠・角丸・影は中の .oc-sticky__in に移した(見た目は前と同じ) */
  .oc-sticky{
    position:fixed; z-index:30; left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom,0px)); /* 第19回 追加5(2026/10/14 院長決定):12px。これより小さいと iPhone の Safari の下のバーに白い帯が出た(?oc_gap= で試した結果) */
    display:block; background:transparent;
    pointer-events:none; /* 追加3:固定した箱はどの状態でも動かさない(透明・影なし・位置はいつも 6px)。引っこんでいるあいだは押せないだけ */
  }
  .oc-sticky.show{pointer-events:auto}
  /* 追加3:引っこむ・出る動きは中の白い箱だけで(前と同じ:8px 下がって消える/下から上がって出る・0.25秒)。引っこんでいるあいだは visibility:hidden で押せない */
  .oc-sticky__in{display:grid; grid-template-columns:repeat(3,1fr); overflow:hidden; background:#fff; border:1px solid rgba(33,33,33,.08); border-radius:12px; box-shadow:0 8px 22px rgba(33,33,33,.14), 0 2px 6px rgba(33,33,33,.08);
    opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity .25s var(--ease), transform .25s var(--ease), visibility 0s linear .25s}
  .oc-sticky.show .oc-sticky__in{opacity:1; visibility:visible; transform:none; transition:opacity .25s var(--ease), transform .25s var(--ease), visibility 0s}
  .oc-sticky a{display:flex; flex-direction:row; align-items:center; justify-content:center; gap:8px; height:48px; text-decoration:none; font-size:13px; font-weight:600; letter-spacing:.04em; color:var(--ink); white-space:nowrap; -webkit-tap-highlight-color:transparent}
  .oc-sticky a + a{border-left:1px solid rgba(33,33,33,.08)}
  .oc-sticky a:active{background:#F7F4F0}
  .oc-sticky__i{flex:none; display:grid; place-items:center; width:29px; height:29px; border-radius:50%; background:var(--oc-ic); color:#fff}
  .oc-sticky__i svg{display:block; width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
  .oc-sticky a:focus-visible{outline:2px solid var(--blue); outline-offset:-3px}
}
@media (max-width:360px){
  /* 320px 前後:「ネット予約」が欄に収まるよう、丸と間を少し小さく */
  .oc-sticky a{gap:5px; letter-spacing:.02em}
  .oc-sticky__i{width:25px; height:25px}
  .oc-sticky__i svg{width:15px; height:15px}
}

/* =========================================================
   トップと各ページで共通の部品(2ページ以上で使うもの)
   ========================================================= */

/* ---------- Arkhe の外枠(最大幅・余白・上下マージン)を、トップとテンプレートで作ったページだけ外す ---------- */
.oc-front .l-content__body.l-container,
.oc-page .l-content__body.l-container{max-width:none; margin:0; padding:0; display:block}

/* ---------- 背骨の線画(トップのヒーロー・施術方針。描くのは assets/js/spine.js。親に .is-in で描き始める) ---------- */
.spine-svg{display:block; width:100%; height:100%; overflow:visible}
.spine-svg .v{fill:none; stroke:var(--line); stroke-width:1; stroke-linecap:round; stroke-linejoin:round}
.spine-svg .v.th{stroke:var(--red); stroke-width:1.1}
.spine-svg .draw{stroke-dasharray:1.02; stroke-dashoffset:1.02}
.is-in .spine-svg .draw,.oc-reveal.on .spine-svg .draw{animation:draw 1.1s var(--ease) forwards}
/* 骨盤・大腿骨・ふんわりした色の面:線ではなく「形と色」で */
.spine-svg .ol{fill:none; stroke:var(--line); stroke-width:1; stroke-linecap:round; stroke-linejoin:round}
.spine-svg .ol.accent{stroke:var(--red); stroke-width:1.2}
.spine-svg .soft{opacity:0; transform-box:fill-box; transform-origin:center; transform:scale(.94)}
.is-in .spine-svg .soft,.oc-reveal.on .spine-svg .soft{animation:softIn 1.4s var(--ease) forwards}
@media (max-width:720px){
  .spine-svg .v{stroke-width:1.35} .spine-svg .v.th{stroke-width:1.45}
  .spine-svg .ol{stroke-width:1.35} .spine-svg .ol.accent{stroke-width:1.6}
}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes softIn{to{opacity:1; transform:none}}

/* ---------- 背骨のマーク(見出しの横。入ってきたときに一度だけ描かれる) ---------- */
.oc-mark svg{display:block; overflow:visible}
.oc-mark .m{fill:none; stroke:var(--red); stroke-width:1.1; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1.02; stroke-dashoffset:1.02}
.oc-mark .m.b{stroke:var(--line); stroke-width:1}
.oc-reveal.on .oc-mark .m{animation:draw 1s var(--ease) forwards}

/* ---------- 線で描くアイコン(トップの特徴・施術方針の「施術と運動」。入ってきたときに一度だけ。大きさは使う側で) ---------- */
.f-icon svg{display:block; width:100%; height:100%; overflow:visible; fill:none; stroke:rgba(27,32,135,.62); stroke-width:1.25; stroke-linecap:round; stroke-linejoin:round}
.f-icon .r{stroke:var(--red); stroke-width:1.2}
.f-icon .dw{stroke-dasharray:1.02; stroke-dashoffset:1.02}
.oc-reveal.on .f-icon .dw{animation:draw 1.1s var(--ease) forwards; animation-delay:.25s}
.f-icon .dot{opacity:0}
.oc-reveal.on .f-icon .dot{animation:fadeOnly .35s var(--ease) forwards; animation-delay:calc(.7s + var(--i) * .05s)}
@keyframes fadeOnly{to{opacity:1}}
/* カレンダーの土日がほんのり色づく */
.f-icon .rf{fill:var(--red-pale); fill-opacity:0}
.oc-reveal.on .f-icon .rf{animation:draw 1.1s var(--ease) .25s forwards, fillIn .8s var(--ease) 1.25s forwards}
@keyframes fillIn{to{fill-opacity:1}}
/* 両腕がゆっくり上がって、伸びをする */
.f-icon .arm{transform-box:view-box; transform-origin:24px 18.5px}
.f-icon .armL{transform:rotate(-88deg)}
.f-icon .armR{transform:rotate(88deg)}
.oc-reveal.on .f-icon .arm{animation:armUp 1.2s var(--ease) 1.05s forwards}
@keyframes armUp{to{transform:none}}
/* 背骨が下から一つずつ積み上がり、最後に股関節 */
.f-icon .vt{stroke-dashoffset:0; opacity:0; transform-box:fill-box; transform:translateY(5px)}
.oc-reveal.on .f-icon .vt{animation:stackIn .55s var(--ease) forwards; animation-delay:calc(.3s + var(--i) * .15s)}
@keyframes stackIn{to{opacity:1; transform:none}}
.oc-reveal.on .f-icon .hip{animation-delay:1.15s}

/* ---------- 「施術はすべて院長が担当します」+→リンクの行 ---------- */
.oc-next{margin-top:clamp(36px,5vw,52px); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px 32px; padding-top:24px; border-top:1px solid rgba(33,33,33,.08)}
.oc-staff{margin:0; font-size:.88rem; color:var(--ink-soft); display:flex; flex-direction:column; align-items:flex-start; gap:4px; flex-wrap:wrap}
.oc-staff .lead2{font-size:.95rem; color:var(--ink)}
.oc-staff .who{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap}
.oc-staff .name{font-family:var(--mincho); font-size:1.2rem; color:var(--ink); letter-spacing:.12em}
.oc-staff .q{font-size:.84rem}
.oc-next .oc-link{margin:0; font-size:.88rem}

/* ---------- 定休日の行(曜日表の下) ---------- */
.oc-hours{margin:0; border-top:1px solid rgba(27,32,135,.16)}
.oc-hours > div{display:grid; grid-template-columns:9.6em 1fr; align-items:baseline; padding:16px 2px; border-bottom:1px solid rgba(33,33,33,.08)}
.oc-hours dt{font-size:.88rem; letter-spacing:.06em; color:var(--ink-soft)}
.oc-hours dd{margin:0; font-family:var(--gothic); font-size:.95rem; letter-spacing:.06em; color:var(--ink)}
@media (max-width:720px){
  .oc-hours > div{grid-template-columns:8.4em 1fr; padding:14px 2px}
  .oc-hours dt{font-size:.8rem}
}

/* ---------- 地図(Google マップの埋め込み) ---------- */
.oc-map{position:relative; border-radius:6px; overflow:hidden; background:var(--gray); aspect-ratio:4/3.4}
.oc-map iframe{position:absolute; inset:0; width:100%; height:100%; border:0; filter:saturate(.55) contrast(.96)}
@media (max-width:960px){ .oc-map{aspect-ratio:16/11} }
@media (max-width:720px){ .oc-map{aspect-ratio:4/3.6} }

@media (prefers-reduced-motion:reduce){
  .spine-svg .soft{opacity:1!important; transform:none!important; animation:none!important}
  .spine-svg .draw{stroke-dashoffset:0!important; animation:none!important}
  .oc-mark .m{stroke-dashoffset:0!important; animation:none!important}
  .f-icon .dw,.f-icon .dot,.f-icon .vt,.f-icon .arm{animation:none!important; transition:none!important; opacity:1!important; transform:none!important; stroke-dashoffset:0!important}
  .f-icon .rf{fill-opacity:1!important}
  .oc-toc .ic path,.oc-toc .ic rect,.oc-toc .ic circle{animation:none!important; stroke-dashoffset:0!important}
}

/* =========================================================
   各ページ(施術方針・院紹介・アクセス など)で共通の部品
   元:mock/concept-v9.html ほか(料金ページ用に書かれていた共通の指定を含む)
   ========================================================= */

/* Arkhe は見出しの行間を 1.5 にしている → モック(本文と同じ 1.8)に戻す。
   強さは Arkhe の h1〜h4 と同じにして(:where)、クラスで行間を決めている見出し(ご予約の帯など)はそちらを優先する */
:where(.oc-page) h1,:where(.oc-page) h2,:where(.oc-page) h3,:where(.oc-page) h4{line-height:1.8}

/* スマホだけ・PC だけの改行 */
br.oc-sp{display:none}
@media (max-width:720px){ br.oc-sp{display:inline} br.oc-pc{display:none} }

/* ---------- ページの見出し帯(パンくず・背骨のマーク・タイトル・キャッチ・リード) ---------- */
.oc-page-head{position:relative; z-index:3; background:linear-gradient(170deg,#fff 0%,#fff 40%,var(--cream2) 100%); padding:calc(var(--oc-header-h) + env(safe-area-inset-top,0px) + clamp(48px,7vw,88px)) 0 clamp(48px,6vw,72px)}
.oc-crumb{margin:0 0 18px; font-size:.82rem; color:var(--ink-soft)}
.oc-crumb a{text-decoration:none; color:var(--ink-soft)}
.oc-crumb a:hover{color:var(--red-soft)}
.oc-ph{display:grid; grid-template-columns:auto 1fr; column-gap:clamp(18px,2.4vw,30px); align-items:start}
.oc-ph__mark{width:22px; height:auto; grid-row:1 / span 2; margin-top:6px}
.oc-ph__mark svg{width:22px; height:120px}
.oc-ph__kicker{margin:0 0 8px; font-size:.84rem; letter-spacing:.12em; color:var(--blue)}
.oc-page-title{margin:0; font-family:var(--mincho); font-weight:500; font-size:clamp(1.8rem,1.3rem + 1.8vw,2.6rem); letter-spacing:.1em}
.oc-ph__catch{margin:20px 0 0; font-family:var(--mincho); font-weight:500; font-size:clamp(1.2rem,1rem + .9vw,1.6rem); line-height:1.7; letter-spacing:.06em}
.oc-page-lead{margin:18px 0 0; max-width:36em; font-size:.98rem; line-height:2; color:var(--ink-soft)}
@media (max-width:720px){
  .oc-ph__mark,.oc-ph__mark svg{width:14px}
  .oc-ph__mark svg{height:96px}
}

/* ---------- ページの中のセクション(白・クリームを交互に) ---------- */
.oc-psec{position:relative; z-index:3; padding:clamp(72px,10vw,120px) 0; scroll-margin-top:var(--oc-header-h)}
.oc-psec.cream{background:var(--cream2)}
.oc-psec.white{background:#fff}
.oc-psec h2{margin:0; font-family:var(--mincho); font-weight:500; font-size:clamp(1.4rem,1.1rem + 1vw,1.9rem); letter-spacing:.08em; line-height:1.6}
.oc-psec h3{margin:0 0 14px; font-family:var(--mincho); font-weight:500; font-size:1.15rem; letter-spacing:.06em}
.oc-lead{margin:16px 0 0; max-width:38em; font-size:1rem; line-height:2; color:var(--ink-soft)}
.oc-note{margin:0 0 1em; font-size:.88rem; color:var(--ink-soft); line-height:1.85}

/* ---------- 「→」付きリンク(小さめ・改行しない。文中や表の中で使う) ---------- */
.oc-link.oc-link--s{margin-top:10px; font-size:.88rem; white-space:nowrap}

/* ---------- 白いカード(2列/3列) ---------- */
.oc-cards2{margin-top:clamp(28px,4vw,40px); display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px}
.oc-cards2 > div{padding:24px 24px 22px; background:#fff; border-radius:8px; box-shadow:0 0 0 1px rgba(33,33,33,.07)}
.oc-cards2 p{margin:0; font-size:.95rem; line-height:1.9}
@media (max-width:720px){ .oc-cards2{grid-template-columns:1fr} }
.oc-what{margin-top:clamp(28px,4vw,40px); display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
.oc-what > div{padding:20px 20px 22px; background:#fff; border-radius:8px; box-shadow:0 0 0 1px rgba(33,33,33,.07)}
.oc-what b{display:block; font-family:var(--mincho); font-weight:500; font-size:1.02rem; margin-bottom:6px}
.oc-what span{font-size:.86rem; color:var(--ink-soft); line-height:1.8}
.oc-what > div:nth-child(2){transition-delay:.12s}
.oc-what > div:nth-child(3){transition-delay:.24s}
.oc-what .f-icon{width:46px; height:46px; margin-bottom:14px}
@media (max-width:960px){ .oc-what .f-icon{margin-top:2px} } /* モックではトップの特徴アイコンの指定がここにも効いていた */
@media (max-width:820px){ .oc-what{grid-template-columns:1fr} }

/* ---------- ページ内の目次(アイコン+文字・枠あり。料金ページの6つのボタン) ---------- */
.oc-toc{list-style:none; margin:30px 0 0; padding:0; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; max-width:900px}
.oc-toc a{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; min-height:92px; padding:14px 6px 12px; background:#fff; border:1px solid rgba(27,32,135,.18); border-radius:8px; text-decoration:none; text-align:center; transition:border-color .3s var(--ease), color .3s var(--ease)}
.oc-toc svg{width:30px; height:30px; fill:none; stroke:var(--blue); stroke-width:1.25; stroke-linecap:round; stroke-linejoin:round; transition:stroke .3s var(--ease)}
.oc-toc span{font-size:.86rem; letter-spacing:.04em; line-height:1.4}
.oc-toc a:hover{border-color:var(--red-soft); color:var(--red-soft)}
.oc-toc a:hover svg{stroke:var(--red-soft)}
.oc-toc a:active{background:#FFF4F2; border-color:var(--red-soft)}
.oc-toc a:focus-visible{outline:2px solid var(--blue); outline-offset:2px}
.oc-toc .ic{display:grid; place-items:center; width:40px; height:40px; border-radius:50%; transition:background-color .35s var(--ease)}
.oc-toc .ar{display:none}
/* アイコンは入ってきたときに線で描かれる(左から順に少しずつ遅れて) */
.oc-toc .ic path,.oc-toc .ic rect,.oc-toc .ic circle{stroke-dasharray:1.02; stroke-dashoffset:1.02}
.oc-toc .tt.on .ic path,.oc-toc .tt.on .ic rect,.oc-toc .tt.on .ic circle{animation:draw 1s var(--ease) forwards; animation-delay:calc(.2s + var(--d,0s))}
.oc-toc path[stroke-dasharray]{animation:none!important; stroke-dashoffset:0!important}
.oc-toc .tt:nth-child(2){transition-delay:.06s; --d:.08s}
.oc-toc .tt:nth-child(3){transition-delay:.12s; --d:.16s}
.oc-toc .tt:nth-child(4){transition-delay:.18s; --d:.24s}
.oc-toc .tt:nth-child(5){transition-delay:.24s; --d:.32s}
.oc-toc .tt:nth-child(6){transition-delay:.3s; --d:.4s}
@media (max-width:720px){
  .oc-toc{grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; margin-left:-30px; width:calc(100% + 30px)}
  .oc-toc .tt{grid-column:span 2}
  .oc-toc a{min-height:84px}
  .oc-toc span{font-size:.8rem}
}

/* ---------- 料金の表記 ---------- */
.yen{font-family:var(--mincho); font-weight:500; letter-spacing:.03em}
.tax{font-size:.74em; color:var(--ink-soft); margin-left:.2em; font-family:var(--gothic); font-weight:400}

/* ---------- 料金・介護予防・交通事故のページで使う部品(第6回で page-price.css から移動・oc- を付けた) ---------- */
/* STEP(横に3つ。820px 以下は縦。.first は淡い赤。矢印は .on で出る) */
.oc-steps{list-style:none; margin:clamp(36px,5vw,52px) 0 0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0}
.oc-step{position:relative; padding:28px clamp(18px,2.4vw,30px) 30px; background:#fff; border:1px solid rgba(27,32,135,.14); transition:opacity .6s var(--ease), transform .6s var(--ease)}
.oc-step + .oc-step{border-left:0}
.oc-step:first-child{border-radius:8px 0 0 8px}
.oc-step:last-child{border-radius:0 8px 8px 0}
.oc-step + .oc-step::before{content:""; position:absolute; left:-11px; top:50%; width:20px; height:20px; background:#fff; border-top:1px solid rgba(27,32,135,.25); border-right:1px solid rgba(27,32,135,.25); transform:translateY(-50%) rotate(45deg); z-index:2; opacity:0; transition:opacity .4s var(--ease) .5s}
.oc-step.on + .oc-step.on::before{opacity:1}
.oc-step .no{display:inline-block; font-size:.78rem; letter-spacing:.14em; color:var(--blue); margin-bottom:10px}
.oc-step .t{display:block; font-family:var(--mincho); font-weight:500; font-size:1.18rem; letter-spacing:.06em; margin-bottom:8px}
.oc-step .c{display:block; font-size:.86rem; color:var(--ink-soft); line-height:1.8; min-height:3.6em}
.oc-step .p{display:block; margin-top:14px; padding-top:14px; border-top:1px solid rgba(33,33,33,.08); font-size:.84rem; color:var(--ink-soft); line-height:1.6}
.oc-step .p b{font-family:var(--mincho); font-weight:500; font-size:1.3rem; color:var(--ink); letter-spacing:.03em; margin:0 .15em}
.oc-step .p small{display:block; font-size:.76rem; margin-top:2px}
.oc-step.first{background:#FFF8F6; border-color:rgba(218,74,63,.35)}
.oc-step.first + .oc-step{border-left:0}
.oc-step.first + .oc-step::before{background:#FFF8F6; border-color:rgba(218,74,63,.35)}
.oc-steps .oc-step:nth-child(2){transition-delay:.15s}
.oc-steps .oc-step:nth-child(3){transition-delay:.3s}
@media (max-width:820px){
  .oc-steps{grid-template-columns:minmax(0,1fr)} /* 第20回 作業B(A-2):1fr だと中身の幅で右へはみ出すため */
  .oc-step,.oc-step:first-child,.oc-step:last-child{border-radius:0}
  .oc-step:first-child{border-radius:8px 8px 0 0}
  .oc-step:last-child{border-radius:0 0 8px 8px}
  .oc-step + .oc-step{border-left:1px solid rgba(27,32,135,.14); border-top:0}
  .oc-step.first + .oc-step{border-left:1px solid rgba(27,32,135,.14)}
  .oc-step + .oc-step::before{left:50%; top:-11px; transform:translateX(-50%) rotate(135deg)}
  .oc-step .c{min-height:0}
}
/* 強調の枠(初回限定・医療機関との併用など。左にラベルと大きな文字、右に説明) */
.oc-offer{margin-top:clamp(36px,5vw,48px); display:grid; grid-template-columns:auto 1fr; align-items:center; gap:18px 36px; padding:clamp(24px,3vw,34px) clamp(22px,3.4vw,40px); background:#fff; border:1px solid rgba(218,74,63,.4); border-radius:8px}
.oc-offer .lbl{display:inline-block; padding:5px 12px; border-radius:999px; background:var(--red-soft); color:#fff; font-size:.8rem; letter-spacing:.12em}
.oc-offer .big{display:block; margin-top:10px; font-family:var(--mincho); font-weight:500; font-size:clamp(1.5rem,1.2rem + 1vw,2rem); letter-spacing:.04em}
.oc-offer p{margin:0; font-size:.92rem; line-height:1.9; color:var(--ink-soft)}
@media (max-width:720px){ .oc-offer{grid-template-columns:1fr} }
/* 丸印のリスト(白い枠) */
.oc-howto{margin-top:clamp(28px,4vw,40px); padding:24px clamp(20px,3vw,32px); background:#fff; border-radius:8px; box-shadow:0 0 0 1px rgba(33,33,33,.07)}
.oc-howto ul{margin:0; padding:0; list-style:none}
.oc-howto li{position:relative; padding:6px 0 6px 22px; font-size:.95rem; line-height:1.85}
.oc-howto li::before{content:""; position:absolute; left:2px; top:1.05em; width:8px; height:8px; border-radius:50%; border:1.5px solid var(--red-soft)}
/* 2列の白い枠(720px 以下は1列) */
.oc-cover{margin-top:clamp(28px,4vw,40px); display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px}
.oc-cover > div{padding:22px 22px 20px; background:#fff; border-radius:8px; box-shadow:0 0 0 1px rgba(33,33,33,.07)}
.oc-cover ul{margin:0; padding:0 0 0 1.2em; font-size:.95rem; line-height:1.95}
@media (max-width:720px){ .oc-cover{grid-template-columns:1fr} }
/* 番号つきの流れ(白い枠。.on で番号が順に) */
.oc-flow{margin-top:clamp(28px,4vw,40px); padding:26px clamp(20px,3vw,34px); background:#fff; border-radius:8px; box-shadow:0 0 0 1px rgba(27,32,135,.14)}
.oc-flow ol{margin:14px 0 0; padding:0; list-style:none; counter-reset:f}
.oc-flow li{counter-increment:f; position:relative; padding:10px 0 10px 44px; font-size:.92rem; line-height:1.85; border-top:1px dashed rgba(33,33,33,.1); opacity:0; transform:translateY(6px); transition:opacity .5s var(--ease), transform .5s var(--ease)}
.oc-flow li:first-child{border-top:0}
.oc-flow li::before{content:counter(f); position:absolute; left:0; top:10px; width:28px; height:28px; border-radius:50%; border:1.5px solid var(--red-soft); color:var(--red-soft); font-size:.86rem; display:grid; place-items:center; font-family:var(--mincho)}
.oc-flow.on li{opacity:1; transform:none}
.oc-flow.on li:nth-child(2){transition-delay:.15s}
.oc-flow.on li:nth-child(3){transition-delay:.3s}
/* 白いカードを1列で(幅 640px まで)・カードの中の料金 */
.oc-cards2.one{grid-template-columns:minmax(0,640px)}
.oc-cards2 .yen{display:block; font-size:1.3rem; margin:6px 0 10px}

/* ---------- 動きを減らす設定のとき ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  .oc-f,.oc-m,.oc-s,.oc-b{opacity:1!important; filter:none!important; transform:none!important; transition:none!important}
  .oc-telbtn.oc-ring .oc-telbtn__bell{animation:none}
  .oc-pf img,.oc-pf .oc-chip,.oc-pf .oc-pp__glow,.oc-pf .oc-pp__person{clip-path:none!important; opacity:1!important; filter:none!important; transform:none!important; transition:none!important}
  .oc-flow li{opacity:1!important; transform:none!important}
  .oc-step + .oc-step::before{opacity:1!important}
  .oc-sticky,.oc-sticky.show,.oc-sticky__in,.oc-sticky.show .oc-sticky__in,.oc-menu,.oc-menu.is-open{transition:none}
  .oc-header,.oc-menu-fab,.oc-hdr-hide .oc-menu-fab,.oc-totop,.oc-totop-on .oc-totop,.oc-header__btn{transition:none}
  .oc-header__btn:hover{transform:none}
}
/* 第20回 作業B(B1-22):「窓口負担 0円」のすぐ下の注(本文と同じ大きさ) */
.oc-cards2 p.oc-yen-note{margin:-2px 0 10px}
/* 第20回 作業B(B1-23):対象の箱の箇条書きの下の小さい注 */
.oc-cover__note{margin:8px 0 0; font-size:.8rem; line-height:1.8; color:var(--ink-soft)}
/* 第20回 作業B(A-2):STEP の枠・中の段・電話ボタンが、狭い画面で右へはみ出さないように */
.oc-step{min-width:0; max-width:100%; box-sizing:border-box}
.oc-step > *{max-width:100%}
.oc-step .oc-telbtn{width:100%; max-width:100%; box-sizing:border-box}
@media (max-width:360px){
  .oc-steps--ic .oc-step{padding-left:66px; padding-right:16px}
  .oc-steps--ic .oc-step > .oc-ic{left:12px}
  .oc-step .oc-telbtn{gap:10px; padding-right:12px}
}
/* 第20回 作業B(B-15):320px で2・3行目の区切り線がカードの右へはみ出していた(1fr が中身の幅で広がる)→ 行を枠の中に収め、→ の右に 16px */
@media (max-width:720px){
  .oc-channels{grid-template-columns:minmax(0,1fr)}
  .oc-channels li{min-width:0; max-width:100%; box-sizing:border-box}
  .oc-ch{grid-template-columns:30px minmax(0,1fr) auto; max-width:100%; box-sizing:border-box; padding-right:16px}
}
/* 第20回 作業B(B-24):375×812 で「お電話・ネット予約・LINE」まで最初の画面に入るよう、行を少し詰める(大きい項目 64→56px・メニュー・料金の下の6項目 44→40px) */
.oc-menu__pages a{padding-top:11px; padding-bottom:11px}
.oc-menu__pages .oc-menu__sub a{padding-top:7px; padding-bottom:7px; min-height:40px}
/* 第20回 作業B(B-14):曜日表
   - 375px 前後:時間の文字(折り返さない)が月曜の ○ に触れていた → 時間の列を 84px に(320px 前後は今までどおり 62px・小さい文字)
   - 寝顔のオクト君の中心を、上の段の ○ の中心(段の高さの半分)にそろえる(「休み」はその下) */
@media (max-width:380px) and (min-width:341px){ .oc-sched .oc-sched__tl{width:84px} }
.oc-sched__rest{margin-top:calc(var(--oc-r1) / 2 - 12.85px)}  /* 寝顔 26px(高さ 25.7px)の半分 */
@media (min-width:721px){ .oc-sched-wrap--big .oc-sched__rest{margin-top:calc(var(--oc-r1) / 2 - 14.85px)} } /* 30px */
@media (max-width:720px){ .oc-sched__rest{margin-top:calc(var(--oc-r1) / 2 - 11.9px)} } /* 24px */
/* 第20回 作業B(B-16):1文字だけの行を残さない
   - 本文・見出し・表のセルは、最後の行が短くなりすぎないよう、ブラウザに折り返しを整えてもらう(text-wrap:pretty。対応していないブラウザは今までどおり)
   - 狭い画面(360px 以下)だけで改行する <br class="oc-sp">(指示書の br.sp。.sp は電話ボタンの中で別の意味に使っているので名前を分けた) */
p, li, dd, dt, h1, h2, h3, h4, figcaption, label{text-wrap:pretty} /* 表のセル(td・th)には付けない(狭い列で1文字ずつ縦に並んだため) */
br.oc-sp{display:none}
@media (max-width:360px){
  br.oc-sp{display:inline}
  .oc-telbtn__act{letter-spacing:.02em}
}
/* 第20回 作業B(A-2):320px 前後では、STEP の中の電話ボタンを左の字下げ(アイコンの列)の分だけ左へ広げ、番号と「›」を枠の中に。下の小さい文字は1行に */
@media (max-width:360px){
  .oc-steps--ic .oc-step .oc-telbtn{margin-left:-54px; width:calc(100% + 54px); max-width:calc(100% + 54px)}
  .oc-step .oc-telbtn__act{white-space:nowrap}
}
/* 第20回 作業B(B-15):320px 前後で大きい文字(メニューを選んで予約・LINE公式アカウント)が右の → に重ならないよう、少し小さく・間を詰める */
@media (max-width:360px){
  .oc-ch{column-gap:12px}
  .oc-ch__main{font-size:.98rem; letter-spacing:.02em}
}