/* COSMEDI 共通スタイル。記事・相場ページ・トップで共有する。 */
:root{
  --coral:#ff7a8a;--coral-d:#e85c6e;--soft:#ffecef;--bg:#fff5f6;
  --ink:#4a4046;--sub:#96868c;--faint:#c2b3b8;--line:#f6e2e5;
  --yellow:#ffd35c;--teal:#3ec5c0;--pink:#ffa48f;
}
*{box-sizing:border-box}
body{margin:0;font-family:"Zen Maru Gothic","Hiragino Maru Gothic ProN",sans-serif;color:var(--ink);background:#fff;line-height:2;font-size:15.5px}
a{color:inherit;text-decoration:none}

/* --- 共通ヘッダー --- */
.hd{display:flex;justify-content:space-between;align-items:center;max-width:720px;margin:0 auto;padding:14px 20px}
.hd .logo{font-weight:900;font-size:20px;color:var(--coral);letter-spacing:.04em}
.hd .logo b{color:var(--pink)}
.gnav{display:flex;gap:16px;font-size:13px;font-weight:700;color:var(--sub)}
.gnav a:hover{color:var(--coral-d)}

.wrap{max-width:680px;margin:0 auto;padding:4px 20px 60px}
.bc{font-size:11.5px;color:var(--faint);margin:2px 0 14px}
.bc a{color:var(--sub)}
.kick{display:inline-block;background:var(--coral);color:#fff;font-size:12px;font-weight:900;padding:5px 14px;border-radius:999px}
h1{font-weight:900;font-size:26px;line-height:1.55;margin:12px 0 10px;letter-spacing:-.01em}
h2{font-size:20px;font-weight:900;margin:40px 0 10px;letter-spacing:-.01em}
h3{font-size:16px;font-weight:900;margin:0 0 8px}
p{margin:0 0 16px}
.meta{font-size:12px;color:var(--faint);margin-bottom:22px}
.lede{font-size:16px;line-height:2.1;margin:0 0 8px}
.sub{font-size:13.5px;color:var(--sub);margin:0 0 12px}

/* --- 要点ボックス(LLM引用用の完結文) --- */
.keypoints{background:var(--bg);border-left:4px solid var(--coral);border-radius:0 16px 16px 0;padding:14px 18px;margin:20px 0}
.keypoints .kp-t{font-size:12.5px;font-weight:900;color:var(--coral-d);margin-bottom:6px}
.keypoints ul{margin:0;padding-left:18px}
.keypoints li{font-size:13px;line-height:1.9;margin:4px 0}

/* --- データ表現 --- */
.big-fact{background:var(--bg);border-radius:20px;padding:24px 22px;margin:22px 0;text-align:center}
.big-fact .n{font-size:52px;font-weight:900;color:var(--coral-d);line-height:1.15;letter-spacing:-.02em}
.big-fact .l{font-size:13.5px;color:var(--sub);margin-top:6px}
.facts3{display:flex;gap:10px;margin:22px 0}
.facts3 .f{flex:1;background:var(--bg);border-radius:18px;padding:16px 8px;text-align:center}
.facts3 .n{font-size:26px;font-weight:900;color:var(--coral-d);line-height:1.2}
.facts3 .l{font-size:11px;color:var(--sub);margin-top:4px;line-height:1.6}
.bar-wrap{margin:18px 0}
.bar-row{display:flex;align-items:center;gap:10px;margin:9px 0}
.bar-row .lb{width:132px;font-size:12.5px;font-weight:700;text-align:right;flex-shrink:0;line-height:1.5}
.bar-row .tr{flex:1;background:var(--bg);border-radius:99px;height:28px}
.bar-row .fl{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--pink),var(--coral-d));display:flex;align-items:center;justify-content:flex-end;padding-right:10px;color:#fff;font-size:12px;font-weight:900;min-width:64px}
.bar-row .n{font-size:11px;color:var(--faint);width:50px;flex-shrink:0}
.card{background:#fff;border:2px solid var(--line);border-radius:18px;padding:6px 18px;margin:12px 0}
.row{display:flex;justify-content:space-between;align-items:center;padding:12px 3px;border-bottom:1.5px dashed #f6d5da}
.row:last-child{border-bottom:none}
.row .nm{font-weight:700;font-size:14.5px}
.row .mt{font-size:11.5px;color:var(--sub)}
.row .pr{font-weight:900;font-size:16px;color:var(--coral-d)}
.step{background:var(--bg);border-radius:18px;padding:6px 20px 14px;margin:18px 0}
.step .s{padding:13px 2px;border-bottom:1.5px dashed #f6d5da;font-size:14px;line-height:1.85}
.step .s:last-child{border-bottom:none}
.step .s b{color:var(--coral-d)}
.step .tag{display:inline-block;font-size:11px;font-weight:900;background:#fff;color:var(--coral-d);padding:2px 10px;border-radius:999px;margin-right:6px}

/* --- 注意・実用 --- */
.warn{background:#fff8ec;border:2px solid #ffe3ac;border-radius:18px;padding:18px 20px;margin:20px 0;font-size:14px;line-height:1.95}
.tips{background:linear-gradient(160deg,#fff1f3,#fff8f4);border:2.5px solid var(--coral);border-radius:20px;padding:20px 22px;margin:24px 0;font-size:14.5px;line-height:2.1}
.tips b{color:var(--coral-d)}
.ask{background:linear-gradient(160deg,#fff1f3,#fff8f4);border:2.5px solid var(--coral);border-radius:20px;padding:20px;margin:24px 0;font-size:14.5px;line-height:2;text-align:center}
.ask .q{display:inline-block;background:var(--coral);color:#fff;font-weight:900;font-size:16px;padding:10px 24px;border-radius:999px;margin-top:10px}
.cta{display:block;background:var(--teal);color:#fff;font-weight:900;text-align:center;padding:15px;border-radius:16px;margin:28px 0;font-size:15px}
.method{background:var(--bg);border-radius:16px;padding:16px 18px;font-size:12.5px;color:var(--sub);line-height:1.9;margin-top:36px}
.method b{color:var(--ink)}
.rel-links{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}
.rel-links a{background:var(--soft);color:var(--coral-d);font-size:13px;font-weight:700;padding:8px 15px;border-radius:999px}

/* --- 記事一覧カード --- */
.art{display:block;background:#fff;border:2px solid var(--line);border-radius:20px;padding:20px 22px;margin:14px 0;transition:.15s}
.art:hover{border-color:var(--coral);transform:translateY(-2px)}
.art .cat{font-size:11.5px;color:var(--coral-d);font-weight:900}
.art h2{font-size:17.5px;font-weight:900;line-height:1.6;margin:6px 0}
.art p{font-size:13px;color:var(--sub);margin:0;line-height:1.85}
.art .num{font-size:28px;font-weight:900;color:var(--coral-d);float:right;margin-left:14px;line-height:1.2}

/* --- 共通フッタ --- */
.sitefoot{border-top:2px solid var(--line);margin-top:40px;padding-top:20px}
.sitefoot .cite{background:var(--bg);border-radius:14px;padding:12px 16px;font-size:12px;line-height:1.85;color:var(--sub)}
.sitefoot .cite b{color:var(--ink)}
.fnav{display:flex;gap:14px;flex-wrap:wrap;margin:16px 0 10px;font-size:12.5px;font-weight:700;color:var(--sub)}
.legal{font-size:11px;color:var(--faint);line-height:1.85;margin:0}
@media(max-width:480px){.facts3{flex-direction:column}.gnav{gap:11px;font-size:12px}}

/* --- 記事内の個別コンポーネント --- */
.vs{display:flex;gap:12px;margin:20px 0}
.vs .side{flex:1;border-radius:18px;padding:18px 16px;text-align:center}
.vs .a{background:var(--soft)}.vs .b{background:#eef7f6}
.vs .nm{font-size:13px;font-weight:700;line-height:1.6}
.vs .tag{display:inline-block;font-size:10.5px;font-weight:700;padding:2px 10px;border-radius:999px;margin-top:4px;background:#fff}
.vs .a .tag{color:var(--coral-d)}.vs .b .tag{color:#1a8f88}
.vs .pr{font-size:27px;font-weight:900;margin-top:8px}
.vs .a .pr{color:var(--coral-d)}.vs .b .pr{color:#1a8f88}
.vs .sub2{font-size:11px;color:var(--sub)}
.pricebar{margin:20px 0}
.pricebar .row{display:flex;align-items:center;gap:10px;margin:10px 0;border:none;padding:0}
.pricebar .nm{width:88px;font-size:13px;font-weight:700;text-align:right;flex-shrink:0}
.pricebar .tr{flex:1;background:var(--bg);border-radius:99px;height:30px}
.pricebar .fl{height:100%;border-radius:99px;display:flex;align-items:center;justify-content:flex-end;padding-right:11px;color:#fff;font-size:12.5px;font-weight:900}
.pricebar .n{font-size:11px;color:var(--faint);width:52px;flex-shrink:0}
.duel{margin:20px 0}
.duel .row{display:flex;align-items:center;gap:8px;margin:10px 0;border:none;padding:0}
.duel .nm{width:118px;font-size:12.5px;font-weight:700;text-align:right;flex-shrink:0;line-height:1.5}
.duel .track{flex:1;display:flex;height:26px;border-radius:99px;overflow:hidden;background:var(--bg)}
.duel .kr{background:linear-gradient(90deg,var(--coral-d),var(--pink));display:flex;align-items:center;padding-left:9px;color:#fff;font-size:11px;font-weight:900;min-width:34px}
.duel .jp{background:linear-gradient(90deg,#7bd0cc,var(--teal));display:flex;align-items:center;justify-content:flex-end;padding-right:9px;color:#fff;font-size:11px;font-weight:900;min-width:34px}
.duel .legend{display:flex;justify-content:space-between;font-size:11.5px;color:var(--sub);margin-bottom:4px;padding:0 4px}
.rank{background:var(--bg);border-radius:18px;padding:8px 18px 12px;margin:18px 0}
.rank .r{display:flex;justify-content:space-between;align-items:center;padding:11px 2px;border-bottom:1.5px dashed #f6d5da;font-size:14px}
.rank .r:last-child{border-bottom:none}
.rank .r .v{color:var(--coral-d);font-weight:900}
.scatter{background:var(--bg);border-radius:18px;padding:18px;margin:20px 0;text-align:center}
.scatter svg{max-width:100%;height:auto}
.scatter .cap{font-size:12px;color:var(--sub);margin-top:8px;line-height:1.7}
.flip{background:var(--bg);border-radius:20px;padding:22px;margin:22px 0}
.flip .row{display:flex;justify-content:space-between;align-items:center;padding:10px 4px;border-bottom:1.5px dashed #f6d5da}
.flip .row:last-child{border-bottom:none}
.flip .lb{font-size:13.5px;font-weight:700}
.flip .lb small{display:block;font-weight:500;font-size:11px;color:var(--sub)}
.flip .pr{font-size:22px;font-weight:900}
.flip .lo{color:#1a8f88}.flip .hi{color:var(--coral-d)}
.clinic{display:flex;justify-content:space-between;align-items:center;padding:13px 3px;border-bottom:1.5px dashed #f6d5da}
.clinic:last-of-type{border-bottom:none}
.clinic .nm{font-weight:700;font-size:14.5px}
.clinic .mt{font-size:11.5px;color:var(--sub)}
.clinic .pr b{color:var(--coral-d);font-size:16px;font-weight:900}

/* --- トップページ --- */
.hero{background:var(--bg);padding:34px 20px 30px;text-align:center}
.hero .in{max-width:640px;margin:0 auto}
.hero .badge{display:inline-block;background:#fff;color:var(--coral-d);font-weight:700;font-size:11.5px;padding:6px 16px;border-radius:999px;border:2px solid var(--coral)}
.hero h1{font-size:33px;line-height:1.4;margin:16px 0 12px}
.hero p{font-size:14.5px;color:var(--sub);margin:0 0 22px;line-height:1.9}
.hero p b{color:var(--ink)}
.herocta{display:inline-block;background:var(--coral);color:#fff;font-weight:900;font-size:16px;padding:15px 42px;border-radius:999px;box-shadow:0 5px 18px rgba(255,122,138,.35)}
.hero .chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:18px}
.hero .chips a{background:#fff;border:1.5px solid var(--coral);color:var(--coral-d);border-radius:999px;padding:6px 15px;font-size:12.5px;font-weight:700}
.sec{display:flex;align-items:center;justify-content:space-between;margin:38px 0 14px}
.sec h2{margin:0;font-size:19px}
.sec .all{font-size:12.5px;color:var(--sub);font-weight:700}
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.tcard{background:#fff;border:2px solid var(--line);border-radius:18px;padding:16px 10px;text-align:center;transition:.15s}
.tcard:hover{border-color:var(--coral);transform:translateY(-2px)}
.tcard .e{font-size:24px}
.tcard .nm{font-size:13px;font-weight:700;margin-top:4px}
.tcard .pr{font-size:18px;font-weight:900;color:var(--coral-d);margin-top:4px}
.tcard .n{font-size:10.5px;color:var(--faint)}
.feat{display:flex;gap:14px;align-items:center;background:#fff;border:2px solid var(--line);border-radius:18px;padding:16px 18px;margin:11px 0;transition:.15s}
.feat:hover{border-color:var(--coral);transform:translateY(-2px)}
.feat .fnum{font-size:26px;font-weight:900;color:var(--coral-d);flex-shrink:0;width:66px;text-align:center;line-height:1.2}
.feat .fcat{font-size:11px;color:var(--coral-d);font-weight:900}
.feat .fttl{font-size:15px;font-weight:900;line-height:1.55;margin:3px 0}
.feat p{font-size:12.5px;color:var(--sub);margin:0;line-height:1.75}
.report-cta{display:block;background:linear-gradient(135deg,var(--teal),#5fd4cf);color:#fff;border-radius:20px;padding:22px 24px;margin:12px 0}
.report-cta .rl{font-size:12.5px;font-weight:700;opacity:.95}
.report-cta .rt{font-size:20px;font-weight:900;margin:4px 0 6px}
.report-cta .rd{font-size:12.5px;opacity:.95;line-height:1.8}
.bizbar{background:var(--soft);border-radius:18px;padding:18px 22px;display:flex;justify-content:space-between;align-items:center;gap:14px;margin:34px 0 10px}
.bizbar .tx{font-size:12.5px;color:var(--sub);line-height:1.85}
.bizbar .tx b{display:block;color:var(--ink);font-size:14px;margin-bottom:3px}
.bizbar a{background:var(--coral);color:#fff;font-weight:700;padding:11px 20px;border-radius:999px;font-size:12.5px;white-space:nowrap}
/* --- 統計テーブル(月次レポート) --- */
.tblwrap{overflow-x:auto;margin:16px 0}
table.stat{width:100%;border-collapse:collapse;font-size:13px}
table.stat th{background:var(--bg);padding:10px 8px;text-align:left;font-weight:900;font-size:11.5px;color:var(--sub);white-space:nowrap}
table.stat td{padding:11px 8px;border-bottom:1.5px dashed var(--line)}
table.stat td.r,table.stat th.r{text-align:right}
table.stat td.sm{font-size:11.5px;color:var(--sub)}
table.stat tbody tr:hover{background:#fffafb}
@media(max-width:600px){.tgrid{grid-template-columns:repeat(2,1fr)}.hero h1{font-size:27px}.bizbar{flex-direction:column;text-align:center}.feat{flex-direction:column;text-align:center}}

/* --- ヒーロー内の判定ツール --- */
.herotool{display:flex;gap:8px;max-width:520px;margin:0 auto;background:#fff;border-radius:16px;padding:10px;box-shadow:0 6px 22px rgba(255,122,138,.18);flex-wrap:wrap}
.herotool select{flex:1 1 140px;border:2px solid var(--line);border-radius:12px;padding:12px 10px;font:700 14px "Zen Maru Gothic",sans-serif;color:var(--ink);background:#fff;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' stroke='%23e85c6e' stroke-width='2' fill='none'/></svg>");background-repeat:no-repeat;background-position:right 12px center}
.herotool .hin{flex:1 1 120px;display:flex;align-items:center;border:2px solid var(--line);border-radius:12px;padding:0 12px;background:#fff}
.herotool .hin input{flex:1;border:0;outline:0;font:900 20px/1 "Zen Maru Gothic",sans-serif;color:var(--ink);width:100%;padding:12px 0;background:transparent}
.herotool .hin input::placeholder{color:#e2ced3;font-weight:700}
.herotool .hin span{font-size:13px;font-weight:700;color:var(--sub)}
.herotool button{flex:0 0 auto;border:0;background:var(--coral);color:#fff;font:900 14px "Zen Maru Gothic",sans-serif;padding:0 22px;border-radius:12px;cursor:pointer}
.herotool button:active{transform:translateY(1px)}
.hnote{font-size:12px;color:var(--sub);margin:12px 0 0}
.tcard .cond{font-size:10.5px;color:var(--sub);margin-top:2px;line-height:1.4;min-height:2.2em;display:flex;align-items:center;justify-content:center;padding:0 4px}
/* --- 折りたたみ --- */
details.fold{margin:18px 0}
details.fold>summary{cursor:pointer;font-weight:900;font-size:15px;padding:13px 16px;background:var(--bg);border-radius:14px;list-style:none;display:flex;justify-content:space-between;align-items:center}
details.fold>summary::-webkit-details-marker{display:none}
details.fold>summary::after{content:"＋";color:var(--coral-d);font-weight:900}
details.fold[open]>summary::after{content:"−"}
details.fold[open]>summary{border-radius:14px 14px 0 0}
.art .num{font-size:19px;line-height:1.25;text-align:center;width:86px}
.feat .fnum{font-size:22px;line-height:1.25}

/* --- 図（chart.py が生成するインラインSVG） --- */
/* SVGを画面幅いっぱいに伸ばすと、モバイルで図中の文字が半分の大きさになって
   読めなくなる。max-width で伸びを止め、中央に置く。 */
.fig{margin:18px 0;padding:0}
.fig svg{width:100%;height:auto;display:block;margin:0 auto}
.figcap{font-size:11.5px;color:var(--sub);line-height:1.75;text-align:center;
  margin-top:7px;padding:0 8px}
.fig[hidden]{display:none}

/* 相場ページ：判定ツール直下の価格分布 */
.histwrap{background:#fff;border-radius:20px;padding:16px 14px 12px;margin:14px 0 22px;
  box-shadow:0 4px 18px rgba(255,122,138,.10)}
.histlb{font-size:13px;font-weight:900;color:var(--coral-d);text-align:center;
  letter-spacing:.02em}
.histnote{font-size:11px;color:var(--faint);text-align:center;margin-top:2px}

/* --- 院リストの住所とリンク --- */
/* リンクは所在地・公式情報の確認用。予約導線には飛ばさない（/about.html 参照）。
   掲載する全院に機械的に付ける。一部にだけ付けると推奨の表示になってしまう。 */
.clinic{align-items:flex-start}
.clinic .ci{flex:1;min-width:0;padding-right:10px}
.clinic .ad{font-size:11.5px;color:var(--faint);line-height:1.6;margin-top:3px}
.lks{display:flex;gap:7px;margin-top:7px;flex-wrap:wrap}
.lks .lk{display:inline-block;font-size:11.5px;font-weight:700;color:var(--coral-d);
  background:var(--bg);border-radius:99px;padding:4px 11px;text-decoration:none;
  border:1px solid var(--line)}
.lks .lk:hover{background:var(--soft)}
/* 確認済みの公式サイトは色で区別（ラベルでも区別しているので色だけに頼らない） */
.lks .lk.ok{color:#1a8f88;border-color:#bfe8e5;background:#f0fbfa}
.lks .lk.ok:hover{background:#e2f6f4}

/* ===== デスクトップ =====================================================
   記事本文は 680px のまま。日本語16pxで1行40字前後は読みやすさの適正で、
   広げると逆に読みにくくなる（新聞や書籍が段組にするのと同じ理由）。
   一方、カード一覧・表・グラフは幅があるほど良い。読む面と一覧の面を分ける。
   .wrap.wide を付けたページだけ広がる。 */
@media(min-width:1000px){
  /* ヘッダーは常に広い器に合わせる。サイトの枠は広く、読む列は中央に細く。 */
  .hd{max-width:1100px}
  .wrap.wide{max-width:1100px}

  /* 施術カード: 3列 → 5列 */
  .wrap.wide .tgrid{grid-template-columns:repeat(5,1fr)}

  /* 記事一覧: 1列 → 2列 */
  .wrap.wide .art{margin:0}
  .artgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:14px 0}

  /* 図は少しだけ大きく。上げすぎると図中の文字が肥大する */
  .fig svg{max-width:620px}

  /* 表は器いっぱいに使えるので文字を少し大きく */
  .wrap.wide table.stat{font-size:14px}

  /* ヒーローの見出しは広い画面でこそ効かせる */
  .hero h1{font-size:44px}
  .hero .in{max-width:760px}
}
@media(min-width:1400px){
  .hd,.wrap.wide{max-width:1240px}
  .wrap.wide .tgrid{grid-template-columns:repeat(6,1fr)}
}