/* =========================================================================
   かねこ美容クリニック 共通CSS（全ページ共通読み込み）
   ★更新：見出し・本文ともに基本ゴシック体に統一。スマホでの文字サイズ・
   行間を拡大し、読みやすさを優先したトークン設計に変更しています。
   英字の小さなアクセント（eyebrowラベル等）にのみ Cormorant Garamond を
   残しています（主要な可読テキストには使用しません）。
   - デザイントークン / header / footer / 固定予約バー / ローダー / 汎用アニメーション
   - セクション固有のCSS（トップのHERO、症例一覧のグリッド等）はここに含めない。
     各テンプレート側で個別に enqueue すること（パフォーマンス最適化のため）。
   ========================================================================= */

:root{
  --porcelain:#FFFFFF;--porcelain-2:#F9F7F3;--card:#FFFFFF;--blush:#E3D2C8;
  --ink:#211E1A;--ink-soft:#6B655C;--ink-faint:#A39C90;--bronze:#9A7B4F;--line:#D9D2C6;
  --maxw:1280px;--gutter:clamp(20px,5vw,72px);--sect-y:clamp(72px,10vh,140px);
  /* ▼ フォント：見出し・本文とも基本ゴシック。--f-lat は英字アクセントのみに限定使用 */
  --f-disp:"Zen Kaku Gothic New",sans-serif;--f-body:"Zen Kaku Gothic New",sans-serif;--f-lat:"Cormorant Garamond",serif;--f-mincho:"Shippori Mincho",serif;
  --ease:cubic-bezier(.16,1,.3,1);--head-h:58px;
  --fs-base:16px;
}

/* ---- base reset（SWELL標準スタイルの上に必要分のみ上書き） ---- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;font-size:var(--fs-base);}
body{margin:0;background:var(--porcelain);color:var(--ink);font-family:var(--f-body);font-weight:400;line-height:1.95;letter-spacing:.02em;font-size:1rem;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
html.lenis,html.lenis body{height:auto;}
.lenis.lenis-smooth{scroll-behavior:auto!important;}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain;}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
::selection{background:var(--blush);color:var(--ink);}
a:focus-visible,button:focus-visible,select:focus-visible{outline:2px solid var(--bronze);outline-offset:4px;}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);}
.center{display:flex;justify-content:center;}

/* ---- 汎用テキスト・ボタン（全ページで使用） ---- */
.eyebrow{font-family:var(--f-lat);font-size:.8rem;letter-spacing:.38em;text-transform:uppercase;color:var(--bronze);font-weight:500;display:inline-flex;align-items:center;gap:.9em;}
.eyebrow::before{content:"";width:42px;height:1px;background:var(--bronze);opacity:.6;}
.h-sect{font-family:var(--f-disp);font-weight:700;font-size:clamp(1.45rem,5.4vw,3rem);line-height:1.5;letter-spacing:.02em;margin:.4em 0 0;}
.lead{color:var(--ink-soft);font-weight:400;font-size:1.05rem;line-height:1.95;max-width:100%;}
.tlink{font-family:var(--f-body);font-weight:500;letter-spacing:.04em;font-size:.92rem;color:var(--bronze);display:inline-flex;gap:.6em;align-items:center;}
.tlink::after{content:"→";transition:transform .4s var(--ease);}
.tlink:hover::after{transform:translateX(6px);}
.btn{font-family:var(--f-body);font-weight:500;font-size:1rem;letter-spacing:.04em;padding:1.15em 2.4em;border-radius:999px;display:inline-block;transition:all .4s var(--ease);align-content: center;}
.btn-fill{
  background:var(--ink);
  color:var(--porcelain);box-shadow:0 14px 30px -16px rgba(33,30,26,.6);}.btn-fill:hover{background:var(--bronze);transform:translateY(-2px);}
.btn-line{border: 1px solid var(--ink);
  color: var(--ink);}
  .btn-line:hover{background:var(--ink);color:var(--porcelain);transform:translateY(-2px);}
.btn-blush{background:var(--blush);color:var(--ink);}.btn-blush:hover{background:var(--bronze);color:var(--porcelain);transform:translateY(-2px);}
.btn-lg{font-size:1.08rem;padding:1.3em 3em;}

/* ---- 汎用スクロールアニメーション（全ページ共通・common.js が発火／控えめな動き） ---- */
.js:not(.reduced) [data-reveal]{opacity:0;transform:translateY(14px);}
.js:not(.reduced) [data-split]{opacity:0;}
[data-split]{display:block;}
[data-split] .line{display:block;}
.c-mask{display:inline-block;overflow:hidden;vertical-align:top;line-height:1.5;}
.c-in{display:inline-block;will-change:transform;}

/* ---- ヘッダー ---- */
.header{position:fixed;top:0;left:0;width:100%;z-index:100;padding:clamp(16px,2.2vw,28px) var(--gutter);transition:padding .5s var(--ease),background-color .5s var(--ease),box-shadow .5s var(--ease);}
.header.scrolled{padding-block:13px;background:rgba(247,244,239,.9);backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(33,30,26,.06);}
/* ★更新：以前は .header 自体が幅100%のままflexコンテナになっており、大画面PCで
   ロゴとナビが画面端いっぱいまで広がって間延びしていた。背景バー（.header）は
   フルブリードのまま、中身（.header-inner）だけを他セクションの .wrap と同じ
   最大幅（--maxw：1280px）に揃えて中央寄せにする。 */
.header-inner{width:100%;max-width:var(--maxw);margin-inline:auto;display:flex;align-items:center;justify-content:space-between;}
/* ★更新：明朝体（和文対応のShippori Mincho）を使用。カラーはご指定の#204465に変更。 */
.brand{font-family:var(--f-mincho);font-weight:700;font-size:1.22rem;letter-spacing:.03em;color:#204465;}
.brand small{display:block;font-family:var(--f-body);font-weight:400;font-size:.56rem;letter-spacing:.24em;color:var(--ink-soft);margin-top:2px;}
.nav{display:flex;align-items:center;gap:clamp(14px,1.7vw,26px);}
.nav a{font-size:.9rem;font-weight:500;letter-spacing:.02em;position:relative;padding:.2em 0;white-space:nowrap;}
.nav a:not(.cta-btn)::after{content:"";position:absolute;left:0;bottom:-2px;width:100%;height:1px;background:var(--bronze);transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease);}
.nav a:not(.cta-btn):hover::after,.nav a.current::after{transform:scaleX(1);transform-origin:left;}
.nav a.current{color:var(--bronze);}
.header .cta-btn{font-size:.88rem;font-weight:500;letter-spacing:.02em;color:var(--porcelain)!important;background:var(--ink);padding:.9em 1.5em;border-radius:999px;transition:all .4s var(--ease);}
.header .cta-btn:hover{background:var(--bronze);transform:translateY(-1px);}
.menu-toggle{display:none;}
/* ★更新：justify-content:center のまま中身が画面の高さを超えると、上側の内容に
   スクロールで到達できなくなる不具合があったため flex-start に変更し、
   代わりに padding-top で開閉ボタン分の余白を確保している。 */
.m-overlay{position:fixed;inset:0;z-index:150;background:var(--porcelain);display:flex;flex-direction:column;justify-content:flex-start;gap:6px;padding:calc(var(--gutter) + 44px) var(--gutter) var(--gutter);transform:translateY(-100%);transition:transform .7s var(--ease);overflow-y:auto;}
.m-overlay.open{transform:translateY(0);}
/* ★更新：文字サイズを1.5rem→1.05rem程度に縮小し、スマホでも見やすく調整。 */
/* ★更新：英語ラベルと日本語ラベルが横並びだと、長い項目名（例：カウンセリング
   予約フォーム）で折り返して2行になってしまっていた。.m-label でグループ化し、
   英語を小さく上に・日本語を下に縦積みする構成に変更（矢印は右端に独立配置）。 */
.m-overlay a{font-family:var(--f-disp);font-weight:700;font-size:.98rem;padding:.85em 0;letter-spacing:.01em;display:flex;align-items:center;border-bottom:1px solid var(--line);}
.m-overlay .m-label{display:flex;flex-direction:column;gap:.25em;}
.m-overlay .en{font-family:var(--f-lat);font-size:.56rem;letter-spacing:.16em;color:var(--bronze);}
.m-overlay a.current{color:var(--bronze);}
.m-overlay .m-ar{color:var(--bronze);font-size:1.1rem;margin-left:auto;padding-left:.6em;}
.m-overlay .m-list{display:flex;flex-direction:column;}

/* ★追加：お急ぎの方向けの電話バナー（SBC・水の森を参考） */
.m-urgent{background:var(--porcelain-2);border-radius:8px;padding:1em 1.2em;display:flex;flex-direction:column;align-items:center;gap:.3em;text-align:center;margin-bottom:14px;}
.m-urgent-label{font-size:.76rem;color:var(--ink-soft);font-weight:500;}
.m-urgent-tel{font-family:var(--f-disp);font-weight:700;font-size:1.5rem;color:var(--ink);letter-spacing:.02em;}
.m-urgent-hours{font-size:.7rem;color:var(--ink-faint);}

/* ★追加：WEB予約・LINE相談のクイックアクションボタン */
.m-quick-acts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:22px;}
.m-quick-btn{display:flex;align-items:center;justify-content:center;padding:.95em 0;border-radius:6px;font-family:var(--f-body);font-weight:700;font-size:.92rem;letter-spacing:.01em;}
.m-quick-btn--fill{background:var(--ink);color:var(--porcelain);}
.m-quick-btn--line{background:#06C755;color:#fff;}

/* ★更新：診療一覧アコーディオンも文字サイズ・区切り線をリストと統一 */
.m-overlay .m-accordion{border-bottom:1px solid var(--line);}
.m-overlay .m-accordion summary{font-family:var(--f-disp);font-weight:700;font-size:.98rem;padding:.85em 0;letter-spacing:.01em;list-style:none;cursor:pointer;display:flex;align-items:center;}
.m-overlay .m-accordion summary::-webkit-details-marker{display:none;}
.m-overlay .m-accordion-arrow{font-size:.9rem;color:var(--bronze);transition:transform .3s;flex:0 0 auto;margin-left:auto;padding-left:.6em;}
.m-overlay .m-accordion[open] .m-accordion-arrow{transform:rotate(180deg);}
.m-overlay .m-accordion-panel{display:flex;flex-direction:column;gap:2px;padding:0 0 .8em 1.1em;}
.m-overlay .m-accordion-panel a{font-family:var(--f-body);font-weight:500;font-size:.92rem;padding:.55em 0;letter-spacing:.01em;color:var(--ink-soft);border-bottom:0;}

/* ★追加：診療一覧アコーディオン内の入れ子サブアコーディオン（目元→埋没／切開）。
   既存の.m-accordion関連の定義は変更せず、新しいクラス名として追加している。 */
.m-overlay .m-subaccordion{margin:2px 0;}
.m-overlay .m-subaccordion summary{font-family:var(--f-body);font-weight:500;font-size:.92rem;padding:.55em 0;letter-spacing:.01em;list-style:none;cursor:pointer;display:flex;align-items:center;color:var(--ink-soft);}
.m-overlay .m-subaccordion summary::-webkit-details-marker{display:none;}
.m-overlay .m-subaccordion-arrow{font-size:.8rem;color:var(--bronze);transition:transform .3s;flex:0 0 auto;margin-left:auto;padding-left:.6em;}
.m-overlay .m-subaccordion[open] .m-subaccordion-arrow{transform:rotate(180deg);}
.m-overlay .m-subaccordion-panel{display:flex;flex-direction:column;gap:2px;padding:0 0 .5em 1.1em;}
.m-overlay .m-subaccordion-panel a{font-family:var(--f-body);font-weight:400;font-size:.86rem;padding:.5em 0;letter-spacing:.01em;color:var(--ink-faint);border-bottom:0;}
.m-close{position:absolute;top:0px;right:var(--gutter);background:none;border:0;font-size:1.8rem;cursor:pointer;z-index:1;}

/* ---- フッター ---- */
.footer{background:var(--ink);color:var(--porcelain);padding:clamp(58px,9vh,96px) 0 calc(clamp(28px,4vh,44px) + 64px);}
.footer-top{display:flex;justify-content:space-between;gap:48px;flex-wrap:wrap;}
.footer .brand{color:var(--porcelain);}
.footer .brand small{color:rgba(247,244,239,.55);}
.footer-nav{display:flex;gap:clamp(20px,3vw,54px);flex-wrap:wrap;}
.footer-col h4{font-family:var(--f-body);font-weight:700;font-size:.8rem;letter-spacing:.1em;color:var(--blush);margin:0 0 1.3em;}
.footer-col a{display:block;font-size:.92rem;color:rgba(247,244,239,.75);font-weight:400;margin-bottom:1em;transition:color .3s;}
.footer-col a:hover{color:var(--porcelain);}
.footer-bottom{margin-top:clamp(46px,7vh,76px);padding-top:26px;border-top:1px solid rgba(247,244,239,.14);display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:.78rem;color:rgba(247,244,239,.5);font-weight:400;}

/* ---- 固定予約バー ---- */
.fixed-bar{position:fixed;left:0;bottom:0;width:100%;z-index:90;display:grid;grid-template-columns:repeat(3,1fr);transform:translateY(110%);transition:transform .55s var(--ease);box-shadow:0 -2px 24px rgba(33,30,26,.1);}
.fixed-bar.show{transform:translateY(0);}
.fixed-bar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:.9em 0;font-size:.88rem;font-weight:500;letter-spacing:.02em;transition:opacity .3s;}
.fixed-bar a .en{font-family:var(--f-lat);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;opacity:.7;}
.fixed-bar .fb-tel{background:var(--porcelain);color:var(--ink);}
.fixed-bar .fb-line{background:#06C755;color: #fff;}
.fixed-bar .fb-web{background:var(--ink);color:var(--porcelain);}
.fixed-bar a:hover{opacity:.82;}

/* ---- レスポンシブ（ヘッダーのハンバーガー切替＋スマホの可読性強化） ---- */
@media (max-width:820px){
  :root{--head-h:54px;}
  .nav{display:none;}
  .menu-toggle{display:flex;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px;}
  .menu-toggle span{width:26px;height:1.5px;background:var(--ink);}
  /* ★追加：明朝体ロゴがスマホ幅では大きすぎてバランスが崩れていたため縮小・字間調整。 */
  .brand{font-size:1rem;letter-spacing:.01em;}
}
@media (max-width:600px){
  :root{--fs-base:17px;}
  body{line-height:2.0;}
  .lead{font-size:0.75rem;line-height:2.0;}
  .btn{font-size:0.8rem;padding:1.15em 2em;width: 90%;text-align: center;}
  .footer-col a{font-size:.94rem;}
}

/* 動きを減らす設定のユーザーへの配慮 */
@media (prefers-reduced-motion: reduce){
  .header,.fixed-bar,.m-overlay,.btn,.tlink::after{transition:none!important;}
}
/* =========================================================================
   ▼ 下層固定ページ共通コンポーネント（/price /menu /concerns /faq /doctor /clinic /lp 等で共通使用）
   ★更新：見出しを含め基本ゴシックに統一。スマホでの文字サイズ・行間を拡大。
   ========================================================================= */

/* ---- ページ共通ヒーロー（パンくず＋見出し＋リード＋医療広告注意書き） ---- */
.page-hero{position:relative;padding:clamp(120px,17vh,176px) 0 clamp(40px,6vh,68px);background:radial-gradient(120% 80% at 78% 8%,#F2E7DE,rgba(242,231,222,0) 60%),linear-gradient(180deg,#F4EFE8,var(--porcelain));}
.crumb{font-family:var(--f-body);font-size:.82rem;font-weight:500;letter-spacing:.02em;color:var(--ink-faint);margin-bottom:1.4em;display:flex;gap:.7em;align-items:center;flex-wrap:wrap;}
.crumb a:hover{color:var(--bronze);}
.crumb .sep{opacity:.5;}
.page-hero h1{font-family:var(--f-disp);font-weight:700;font-size:clamp(2rem,7vw,3.2rem);letter-spacing:.01em;margin:.34em 0 0;line-height:1.45;}
.page-hero .lead{margin-top:1.3em;max-width: 100%;}

.notice{border:1px solid var(--line);background:rgba(255,255,255,.5);border-radius:6px;padding:clamp(18px,2.4vw,24px) clamp(20px,2.8vw,28px);margin-top:clamp(26px,4vh,38px);font-size:.88rem;line-height:1.95;color:var(--ink-soft);font-weight:400;display:flex;gap:14px;}
.notice b{font-weight:700;color:var(--ink);font-family:var(--f-disp);letter-spacing:0;}
.notice .ic{flex:0 0 auto;font-family:var(--f-body);font-weight:500;font-size:.78rem;letter-spacing:.04em;color:var(--bronze);border:1px solid var(--bronze);border-radius:999px;padding:.25em .9em;height:fit-content;}

/* ---- 追従ジャンプナビ（カテゴリー間の移動。/price /menu /concerns 等で使用） ---- */
.jumpnav{position:sticky;top:var(--head-h);z-index:80;background:rgba(247,244,239,.92);backdrop-filter:blur(12px);border-block:1px solid var(--line);}
.jumpnav .wrap{padding-block:12px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.jumpnav .wrap::-webkit-scrollbar{display:none;}
.jumpnav-list{display:flex;gap:8px;width:max-content;}
.jumpnav-list a{font-size:.9rem;font-weight:500;letter-spacing:.01em;padding:.6em 1.3em;border-radius:999px;border:1px solid var(--line);color:var(--ink-soft);white-space:nowrap;transition:all .3s var(--ease);}
.jumpnav-list a:hover{border-color:var(--bronze);color:var(--ink);}
.jumpnav-list a.active{background:var(--ink);border-color:var(--ink);color:var(--porcelain);}

/* ---- ページ共通CTAバンド／LINEブロック（cases等と共通） ---- */
.ctaband{padding-block:clamp(54px,8vh,90px);background:var(--ink);color:var(--porcelain);text-align:center;}
.ctaband h2{font-family:var(--f-disp);font-weight:700;font-size:clamp(1.5rem,5vw,2.4rem);letter-spacing:.01em;line-height:1.5;margin:0;}
.ctaband p{color:rgba(247,244,239,.72);font-weight:400;font-size:1rem;line-height:1.9;margin:.9em 0 0;}
.ctaband .acts{margin-top:clamp(26px,3.4vh,36px);display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
.ctaband .btn-fill{background:var(--blush);color:var(--ink);}.ctaband .btn-fill:hover{background:#fff;}
.ctaband .btn-line{border-color: #06C755;
  background: #06C755;color:var(--porcelain);}.ctaband .btn-line:hover{background:var(--porcelain);color:var(--ink);}
.lineblk{padding-block:var(--sect-y);}
.lineblk .inner{background:var(--porcelain-2);border-radius:10px;padding:clamp(34px,5vw,64px);display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(28px,4vw,56px);align-items:center;}
.lineblk h2{font-family:var(--f-disp);font-weight:700;font-size:clamp(1.35rem,4.4vw,2rem);letter-spacing:.01em;line-height:1.55;margin:.3em 0 .5em;}
.lineblk p{color:var(--ink-soft);font-weight:400;font-size:.98rem;line-height:1.9;margin:0;}
.lineblk .acts{display:flex;flex-direction:column;gap:12px;}
.lineblk .acts .btn{text-align:center;}

@media (max-width:980px){.lineblk .inner{grid-template-columns:1fr;}}
@media (max-width:600px){
  .page-hero h1{font-size:clamp(1.9rem,8vw,2.6rem);}
  .notice{font-size:.92rem;}
  .jumpnav-list a{font-size:.92rem;padding:.65em 1.3em;}
  .ctaband h2{font-size:clamp(1.45rem,7vw,1.4rem);}
  .ctaband p{font-size:.98rem;}
  .lineblk h2{font-size:clamp(1.35rem,6.5vw,1.7rem);}
}

/* =========================================================================
   お悩みから探す：顔写真＋放射状ラベルのダイアグラム（.cdg）
   トップページ・/concerns/ ページの両方で共通使用。スマホでも同じ
   ダイアグラムを表示する（簡易チップへの切り替えは行わない）。
   ========================================================================= */
.cdg{position:relative;width:100%;max-width:520px;margin-inline:auto;aspect-ratio:4/4.4;}
/* .cdg-face-wrap{position:absolute;top:4%;left:31%;width:38%;height:86%;border-radius:clamp(50px,13vw,90px) clamp(50px,13vw,90px) 14px 14px;overflow:hidden;box-shadow:0 20px 50px -24px rgba(33,30,26,.35);} */
.cdg-face-wrap {
  /* position: absolute; */
  top: 4%;
  left: 31%;
  /* width: 38%; */
  height: 86%;
  /* border-radius: clamp(50px, 13vw, 90px) clamp(50px, 13vw, 90px) 14px 14px; */
  overflow: hidden;
  /* box-shadow: 0 20px 50px -24px rgba(33, 30, 26, .35); */
}


.cdg-face{display:block;width:100%;height:100%;object-fit:cover;object-position:center 12%;}
.cdg-face-fade{position:absolute;top:0;left:0;width:100%;height:14%;background:linear-gradient(to bottom,var(--porcelain) 0%,rgba(247,244,239,0) 100%);pointer-events:none;}
.cdg-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
.cdg-lines line{stroke:var(--ink-faint);stroke-width:.35;stroke-dasharray:1.4 1.6;}
.cdg-dot{position:absolute;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:#fff;box-shadow:0 0 0 1px var(--ink-faint),0 2px 6px rgba(0,0,0,.15);z-index:2;}
.cdg-col{position:absolute;top:0;width:40%;height:100%;}
.cdg-col-left{left:0;}
.cdg-col-right{right:0;}
.cdg-pill{position:absolute;transform:translateY(-50%);display:inline-flex;align-items:center;gap:.4em;background:var(--blush);color:var(--ink);font-size:.82rem;font-weight:500;letter-spacing:.005em;padding:.55em 1em;border-radius:999px;white-space:nowrap;box-shadow:0 8px 18px -12px rgba(33,30,26,.3);transition:transform .3s var(--ease),background .3s var(--ease);}
.cdg-col-left .cdg-pill{left:0;}
.cdg-col-right .cdg-pill{right:0;}
.cdg-pill:hover{background:var(--bronze);color:var(--porcelain);transform:translateY(-50%) translateX(0) scale(1.04);}
.cdg-ar{font-weight:700;color:var(--bronze);transition:color .3s;}
.cdg-pill:hover .cdg-ar{color:var(--porcelain);}

/* ---- スマホ：文字サイズ・余白を詰めて、狭い画面でも収まるようにする ---- */
@media (max-width:560px){
  .cdg{max-width:400px;aspect-ratio:4/4.6;}
  .cdg-pill{font-size:.66rem;padding:.42em .7em;gap:.3em;}
  .cdg-dot{width:6px;height:6px;margin:-3px 0 0 -3px;}
}
@media (max-width:380px){
  .cdg{max-width:340px;}
  .cdg-pill{font-size:.6rem;padding:.38em .6em;}
}

/* .sec-head は2ページ以上で使うため共通化（元 page-front.css より移設） */
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:clamp(30px,5vh,52px);}

/* =========================================================================
   ★追加：[kaneko_case_slider] の画像クリックで開く、拡大表示モーダル。
   複数のページ・複数のスライダーで共通利用するため common.css に配置。
   ========================================================================= */
.kaneko-modal-overlay{position:fixed;inset:0;z-index:9999;background:rgba(33,30,26,.82);display:none;align-items:center;justify-content:center;padding:24px;}
.kaneko-modal-overlay.is-open{display:flex;}
.kaneko-modal-box{position:relative;max-width:min(92vw,900px);max-height:90vh;}
.kaneko-modal-box img{display:block;max-width:100%;max-height:90vh;width:auto;height:auto;border-radius:6px;box-shadow:0 30px 60px -20px rgba(0,0,0,.5);}
.kaneko-modal-close{position:absolute;top:-14px;right:-14px;width:40px;height:40px;border-radius:50%;background:var(--porcelain);border:1px solid var(--line);color:var(--ink);font-size:1.3rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 22px -10px rgba(0,0,0,.4);}
.kaneko-modal-close:hover{color:var(--bronze);border-color:var(--bronze);}
@media (max-width:600px){
  .kaneko-modal-close{top:-42px;right:0;background:rgba(247,244,239,.9);}
}

/* =========================================================================
   ★追加：症例詳細ページ（single.php）のBefore/After表示。以前の2枚画像
   ドラッグ比較（.ba/.ba-img/.ba-handle等）から、1枚のBefore/After合成画像
   （case_ba_image）表示に統一。single.php専用のCSSファイルが手元にないため、
   ここ（common.css）に追加しています。もし single.php 用の別ファイルを
   お使いの場合は、そちらに移していただいて構いません。
   ========================================================================= */
.case-ba-single{margin:0;border-radius:8px;overflow:hidden;background:var(--porcelain-2);box-shadow:0 20px 40px -26px rgba(33,30,26,.28);}
.case-ba-single img{width:100%;height:auto;display:block;}
/* ★追加：メインBA画像とサブ画像（ギャラリー）の間に余白を追加 */
.case-ba-wrap .case-gallery-inline{margin-top:20px;}
/* クリックで拡大表示するボタンの見た目リセット（single.php等、.tmt-contentスコープ外でも使う共通クラス） */
.kaneko-img-btn-reset{display:block;width:100%;padding:0;margin:0;border:0;background:none;cursor:zoom-in;font:inherit;text-align:left;}

/* =========================================================================
   ★追加：「¥156,000 → ¥146,000」のような通常価格→割引後価格の表記（kaneko_yen_label()、
   functions.php）の見た目のフォールバック。/price・施術エリア・施術詳細の各ページでは
   page-price.css 側の同名クラスが後から読み込まれ優先されるため、実際の表示は主に
   そちらで決まります。それ以外のページでkaneko_yen_label()を使った場合の保険として、
   ここにも同じデザインを用意しています。
   ★更新：「¥◯,◯◯◯ OFF」バッジ（.pt-price-off）は廃止したため削除。
   ========================================================================= */
.pt-price-set{display:inline-flex;align-items:baseline;gap:.5em;flex-wrap:wrap;}
.pt-price-before{position:relative;display:inline-block;text-decoration:none;color:var(--ink-faint,#a39c90);opacity:.85;}
.pt-price-before::after{content:"";position:absolute;left:-3%;right:-3%;top:52%;height:2px;background:currentColor;transform:rotate(-9deg);}
.pt-price-after{color:var(--bronze,#9A7B4F);}