@charset "UTF-8";
/**
 * モージャマ コア — フロントの見た目。
 *
 * **テーマではなくプラグインが持つ。**
 * 表・グラフ・カード・診断・口コミ・調査ページの図は、すべてこのプラグインが
 * 出しているHTML。見た目を別のテーマに置いていくと、テーマを変えた時点で
 * 全部崩れる。入れ物（ヘッダー・フッター・本文の外枠）だけをテーマに任せる。
 *
 * **ヘッダー・フッター・パンくずの装飾は持っていない。** そこはテーマの領分。
 *
 * デザインの方針は、角丸・影・色付きの縁を装飾として使わないこと。
 * 階層は文字の大小・太さ・余白・罫・背景の切り替えで作る。
 * 例外は円（形そのものが意味を持つもの）と、本文の上に浮くものの影だけ。
 */
/* デザイントークン（docs/18.4） */
:root{
  /*
   * 青は3段。見出しと数字＝濃い青、図の主役＝中くらい、面を塗る＝明るい青。
   * 白文字を載せる色は、すべて白との差を測って4.5:1以上のものにしてある。
   *   #1B4F8F 8.2:1 ／ #1F5FA9 6.4:1 ／ #2E79C4 4.5:1
   */
  --navy:#1B4F8F; --navy-d:#143C6B; --navy-l:#2E79C4;
  /*
   * オレンジは2つに分ける。
   *
   * **白文字を載せるほうは明るくできない。**
   * 図で使う #F0892B に白文字を置くと2.5:1で、基準の4.5:1に遠く届かない。
   * ボタンや文字に使う --accent は 4.75:1 のものを据え置き、
   * 図だけ明るいオレンジ（--accent-bright）を使う。
   */
  --accent:#C74A12;            /* 白文字でコントラスト比4.75:1（WCAG AA） */
  --accent-h:#A63C0C;
  --accent-bright:#F0892B;     /* 図の面だけ。白文字を載せないこと */
  --teal:#1F7A6D; --teal-l:#E6F2F0;
  --salon:#2E7CB8; --warn:#B45309;
  /* 独自調査の2本を見分けるための色。男性＝青系、女性＝赤紫系。
     どちらも白地で4.5:1以上。色だけに意味を持たせず、必ず凡例に数字を添える。 */
  --men:#1F5FA9; --men-l:#EAF2FB;
  --women:#A33A6B; --women-l:#FBEFF4;
  --bg:#F4F8FC; --card:#fff; --line:#E2E8F0;
  --txt:#1B2733; --muted:#5A6B7B; --faint:#8494A3;
  /*
   * 本文の幅。**ページの種類で変えない。**
   *
   * テーマ側（arkhe_child/style.css）が見出しとパンくずを同じ幅にそろえるので、
   * ここを変えるときは向こうも直すこと。片方だけ変えると左端がずれる。
   *
   * 900pxの根拠：13.5pxの文章で約67文字／行。
   * サイドバーを外して1169pxになったときは87〜102文字／行になり、
   * 目が行頭に戻る距離が長すぎた（2026-10-16 実測）。
   * 幅の広い料金表はこの幅に収まらず横スクロールになるが、
   * 表のために文章を読みにくくするほうが損だと判断した。
   */
  --mjm-measure:900px;
  /* 画面下に固定する帯の高さ。本文の下余白と、Arkheの「上へ戻る」の位置もこれで決める。 */
  --mjm-cta-h:58px;
  /*
   * 角丸と影。
   *
   * **以前はどちらも使わない方針で、0とnoneにしてあった。**
   * 2026-10-16にサイト運営者の判断で、カードの形を持たせる方向に変えた。
   * 元の考え（囲みを増やすと部品の見分けがつかなくなる）は今も正しいので、
   * **影はごく薄くして、囲みそのものは増やさない。**
   * 階層は引き続き、文字の大小・太さ・余白・罫で作る。
   *
   * ここを0とnoneに戻せば、サイト全体が元の平らな見た目に戻る。
   * 124か所がこのトークンを見ている。
   */
  --radius:8px;
  --shadow:0 1px 3px rgba(27,79,143,.07), 0 1px 2px rgba(27,79,143,.05);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--txt);
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP","Yu Gothic",sans-serif;
  font-size:15px;line-height:1.75;-webkit-font-smoothing:antialiased;
}
a{color:inherit}
img{max-width:100%;height:auto}
.wrap{max-width:1080px;margin:0 auto;padding:0 16px}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* 見出し */
.sh{display:flex;align-items:baseline;gap:14px;margin-bottom:6px}
.sh h2{font-size:20px;margin:0}
.sh .more{margin-left:auto;font-size:13px;color:var(--teal);text-decoration:none;font-weight:700;white-space:nowrap}
.sdesc{color:var(--muted);font-size:13.5px;margin:0 0 18px}
section{padding:36px 0}

/* パネル・カード */
.panel{background:#fff;border:1px solid var(--line);border-radius: var(--radius);padding:20px;box-shadow:var(--shadow)}
.notice{background:#FFF8E8;border:1px solid #F0DFB4;border-left:3px solid #D19A2E;
  border-radius: var(--radius);padding:12px 15px;font-size:12.5px;color:#6B5522;margin-bottom:16px;line-height:1.75}

/* バッジ */
.bdg{font-size:11px;font-weight:700;border-radius: var(--radius);padding:2px 8px;color:#fff;display:inline-block}
.bdg.c{background:var(--navy)} .bdg.s{background:var(--salon)}
.bdg.g{background:var(--teal-l);color:var(--teal)}

/* テーブル */
.tw{background:#fff;border:1px solid var(--line);border-radius: var(--radius);overflow:hidden;box-shadow:var(--shadow)}

/*
 * 横スクロールできることを示す（docs/18.4）
 *
 * 表は min-width を持つため狭い画面では必ずはみ出すが、
 * 画面内に収まって見えるとスクロールできることに気づけない。
 * 左右端の影で「まだ続きがある」ことを示す。
 * background-attachment: local を使うと、スクロール位置に応じて
 * 影が自動的に消える（JavaScript不要）。
 */
.tscroll{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  background:
    linear-gradient(to right, #fff 30%, rgba(255,255,255,0)) left center,
    linear-gradient(to left,  #fff 30%, rgba(255,255,255,0)) right center,
    radial-gradient(farthest-side at 0 50%, rgba(16,40,64,.16), rgba(16,40,64,0)) left center,
    radial-gradient(farthest-side at 100% 50%, rgba(16,40,64,.16), rgba(16,40,64,0)) right center;
  background-repeat:no-repeat;
  background-size:44px 100%, 44px 100%, 15px 100%, 15px 100%;
  background-attachment:local, local, scroll, scroll;
}

/* 狭い画面では、影に加えて文言でも示す */
@media(max-width:900px){
  .tw::before{
    content:"← 横にスクロールできます →";
    display:block;text-align:center;
    font-size:11.5px;color:var(--muted);
    padding:7px 12px;background:var(--bg);border-bottom:1px solid var(--line);
  }
}
table.cmp{border-collapse:collapse;width:100%;min-width:760px;font-size:13px}
table.cmp th,table.cmp td{padding:11px 13px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
table.cmp thead th{background:#F7FAFC;font-size:11.5px;color:var(--muted);font-weight:700}
table.cmp tbody tr:hover{background:#FAFCFD}
table.cmp tbody tr:last-child td{border-bottom:0}
/* ブランド名の列。運営法人名が長いため、列幅の上限を決めて表全体が広がるのを防ぐ */
td.nm{font-weight:700;white-space:normal;min-width:170px;max-width:250px}
td.nm .sub{display:block;font-size:11px;color:var(--faint);font-weight:400;line-height:1.5}
/* ロゴ付きの施設名は Mojama_Brand_Logo::cell() が .mjm-brandcell で出す */
td.nm .mjm-brandcell .tx{min-width:0}
td.pr{font-weight:800;color:var(--accent);white-space:normal;min-width:130px}
td.pr .cv{display:block;font-size:10.5px;color:var(--muted);font-weight:400;line-height:1.45}
.na{color:var(--faint);font-weight:400}
.free{color:var(--teal);font-weight:700}
.paid{color:var(--warn);font-weight:700}

/* リンクグリッド */
.linkgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.lc{background:#fff;border:1px solid var(--line);border-radius: var(--radius);padding:13px 15px;text-decoration:none;display:block}
.lc:hover{border-color:var(--teal)}
.lc b{display:block;font-size:13.5px;margin-bottom:2px}
.lc span{font-size:11.5px;color:var(--muted)}

/* チップ */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius: var(--radius);
  padding:7px 12px;text-decoration:none;font-size:13px;background:#fff}
.chip:hover{border-color:var(--teal);background:var(--teal-l)}
.chip .c{font-size:11.5px;color:var(--muted)}

.src{font-size:11.5px;color:var(--faint);margin-top:10px}
.src a{color:var(--teal)}

/* 検索結果カード（src/scripts/search.ts が生成するため、スコープ外のスタイルとして定義する） */
.rcard{background:#fff;border:1px solid var(--line);border-radius: var(--radius);padding:18px;
  box-shadow:var(--shadow);margin-bottom:14px;display:grid;grid-template-columns:1fr 250px;gap:18px}
.rc-l{min-width:0}
.rc-top{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:6px}
.rcard h3{font-size:18px;margin:0 0 2px}
.rcard h3 a{text-decoration:none}
.rcard h3 a:hover{color:var(--accent)}
.rcard .op{font-size:11.5px;color:var(--faint);margin:0 0 10px}
.rcard .feats{list-style:none;padding:0;margin:0 0 10px;font-size:12.5px}
.rcard .feats li{display:flex;gap:7px;margin-bottom:5px;color:var(--muted);line-height:1.55}
.rcard .feats .ck{color:var(--teal);font-weight:700;flex-shrink:0}
.rcard .caution{font-size:12.5px;color:var(--warn);background:#FFF9F2;border-radius: var(--radius);padding:7px 11px;margin:0}
.rc-r{border-left:1px solid var(--line);padding-left:18px;display:flex;flex-direction:column}
.rc-r .pl{font-size:11.5px;color:var(--muted)}
.rc-r .pv{font-size:25px;font-weight:800;color:var(--accent);line-height:1.2}
.rc-r .pv small{font-size:12px;color:var(--muted);font-weight:500}
.rc-r .cov{font-size:11.5px;color:var(--muted);background:var(--bg);border-radius: var(--radius);padding:6px 9px;margin:7px 0 4px;line-height:1.5}
.rc-r .eff{font-size:12px;color:var(--muted);margin:0 0 10px}
.rc-r .eff b{color:var(--txt)}
.rc-r .eff .s{font-size:11.5px}
.rc-r .na{font-size:12.5px;color:var(--faint);margin-bottom:10px}
.rbtns{margin-top:auto;display:flex;gap:7px}
.btn-d{flex:1;text-align:center;background:var(--navy);color:#fff;text-decoration:none;
  border-radius: var(--radius);padding:9px;font-size:13px;font-weight:700}
.btn-d:hover{background:var(--navy-d)}
.btn-c{border:1px solid var(--line);background:#fff;border-radius: var(--radius);padding:9px 11px;font-size:12.5px;cursor:pointer}
.btn-c[aria-pressed="true"]{border-color:var(--navy);color:var(--navy);font-weight:700}
.fav{border:1px solid var(--line);background:#fff;border-radius: var(--radius);width:37px;cursor:pointer;color:var(--faint)}
.fav[aria-pressed="true"]{color:var(--accent);border-color:var(--accent)}

/* 適用中の条件チップ */
.ac{display:inline-flex;align-items:center;gap:6px;background:var(--navy);color:#fff;border:0;
  border-radius: var(--radius);padding:5px 13px;font-size:12.5px;cursor:pointer}
.ac span{opacity:.75;font-size:14px}
.ac.clear{background:#fff;color:var(--teal);border:1px solid var(--line)}
.sg{border:1px solid var(--line);background:#fff;border-radius: var(--radius);padding:9px 15px;cursor:pointer;text-align:left}
.sg:hover{border-color:var(--teal);background:var(--teal-l)}
.sg b{display:block;font-size:13px}
.sg span{font-size:11.5px;color:var(--muted)}
.nosugg{color:var(--muted);font-size:13px}
.err{background:#fff;border:1px solid var(--line);border-radius: var(--radius);padding:20px;color:var(--warn)}

@media(max-width:920px){
  .rcard{grid-template-columns:1fr}
  .rc-r{border-left:0;border-top:1px solid var(--line);padding-left:0;padding-top:14px}
}

/* 診断（src/scripts/diagnosis.ts が生成） */
.qnum{display:inline-block;background:var(--teal-l);color:var(--teal);font-size:12px;font-weight:700;
  border-radius: var(--radius);padding:3px 11px;margin-bottom:12px}
.q h1{font-size:23px;margin:0 0 8px;line-height:1.5}
.q .hint{color:var(--muted);font-size:13px;margin:0 0 22px}
.opts{display:grid;gap:10px}
.opt{display:flex;align-items:flex-start;gap:13px;background:#fff;border:1px solid var(--line);
  border-radius: var(--radius);padding:15px 17px;cursor:pointer;text-align:left;font-size:15px;box-shadow:var(--shadow);width:100%}
.opt:hover{border-color:var(--teal);background:#FAFDFC}
.opt.sel{border-color:var(--teal);background:var(--teal-l);border-width:2px;padding:14px 16px}
.opt .mk2{width:22px;height:22px;border-radius:50%;border:2px solid var(--line);flex-shrink:0;margin-top:2px}
.opt.sel .mk2{border-color:var(--teal);background:var(--teal);position:relative}
.opt.sel .mk2::after{content:"✓";color:#fff;font-size:13px;position:absolute;left:4px;top:-2px}
.opt b{display:block;font-size:15px;margin-bottom:2px}
.opt>span>span{font-size:12.5px;color:var(--muted);line-height:1.6;display:block}
.psel{width:100%;padding:13px;border:1px solid var(--line);border-radius: var(--radius);font-size:15px;background:#fff}
.navbtns{display:flex;gap:10px;margin-top:24px}
/* 選ぶと次へ進むので、最初の設問では中身が無い。余白だけ残さない */
.navbtns:empty{display:none}
.bk{border:1px solid var(--line);background:#fff;border-radius: var(--radius);padding:12px 22px;font-size:14px;cursor:pointer;font-weight:700}
.nx{flex:1;background:var(--navy);color:#fff;border:0;border-radius: var(--radius);padding:12px;font-size:15px;font-weight:700;cursor:pointer}
.privacy{font-size:11.5px;color:var(--faint);text-align:center;margin-top:16px}
.rhead h1{font-size:25px;margin:0 0 6px}
.rhead p{font-size:13.5px;color:var(--muted);margin:0 0 20px}
.yourans{background:#fff;border:1px solid var(--line);border-radius: var(--radius);padding:16px 18px;
  box-shadow:var(--shadow);margin-bottom:18px}
.yourans h2{font-size:13px;margin:0 0 10px;color:var(--muted);display:flex;align-items:center}
.redo{margin-left:auto;font-size:12.5px;color:var(--teal);font-weight:700;background:0;border:0;cursor:pointer}
.tags{display:flex;gap:7px;flex-wrap:wrap}
.tg{background:var(--bg);border-radius: var(--radius);padding:4px 12px;font-size:12.5px}
.tg b{color:var(--navy)}
.warnbox{background:#FFF8E8;border:1px solid #F0DFB4;border-left:3px solid #D19A2E;border-radius: var(--radius);
  padding:12px 15px;font-size:12.5px;color:#6B5522;margin-bottom:16px;line-height:1.75}
.rcards{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}
.rc{background:#fff;border:1px solid var(--line);border-radius: var(--radius);padding:17px;
  box-shadow:var(--shadow);display:flex;flex-direction:column}
.rc.top{border-color:var(--teal);border-width:2px;padding:16px}
.ax{display:inline-block;background:var(--navy);color:#fff;font-size:11px;font-weight:700;
  border-radius: var(--radius);padding:3px 10px;margin-bottom:11px;align-self:flex-start}
.rc.top .ax{background:var(--teal)}
.bdgs{display:flex;gap:6px;margin-bottom:9px;flex-wrap:wrap}
.rc h3{font-size:17px;margin:0 0 2px}
.rc .op{font-size:11.5px;color:var(--faint);margin:0 0 11px}
.rc .amt{font-size:23px;font-weight:800;color:var(--accent);line-height:1.2}
.rc .amt small{font-size:12px;color:var(--muted);font-weight:500}
.rc .cov{font-size:11.5px;color:var(--muted);background:var(--bg);border-radius: var(--radius);padding:6px 9px;margin:7px 0 12px;line-height:1.5}
/* 口コミ。当サイトの採点ではなく利用者の申告なので、料金ほど目立たせない */
.rc .rvw{font-size:13px;font-weight:700;color:var(--teal);margin:-6px 0 12px}
.rc .rvw small{font-size:11px;color:var(--muted);font-weight:400}
.why{font-size:12.5px;margin-bottom:11px}
.why h4{font-size:12px;color:var(--teal);margin:0 0 6px}
.why ul{margin:0;padding:0;list-style:none}
.why li{display:flex;gap:7px;margin-bottom:5px;color:var(--muted);line-height:1.6}
.why .ck{color:var(--teal);font-weight:700;flex-shrink:0}
.nomatch{font-size:12px;background:#FFF9F2;border-radius: var(--radius);padding:8px 11px;margin-bottom:12px;color:var(--warn);line-height:1.6}
.nomatch b{display:block;font-size:11.5px;margin-bottom:2px}
.rc .btn{margin-top:auto;display:block;text-align:center;background:var(--navy);color:#fff;
  text-decoration:none;border-radius: var(--radius);padding:10px;font-size:13.5px;font-weight:700}
.rc.top .btn{background:var(--accent)}
.rc .vd{font-size:11px;color:var(--faint);margin:8px 0 0;text-align:right}
.after{background:#fff;border:1px solid var(--line);border-radius: var(--radius);padding:20px;
  box-shadow:var(--shadow);margin-top:20px}
.after h3{font-size:16px;margin:0 0 10px}
.after p{font-size:13.5px;color:var(--muted);margin:0 0 14px}
.lks{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.lk{border:1px solid var(--line);border-radius: var(--radius);padding:12px 14px;text-decoration:none;display:block}
.lk:hover{border-color:var(--teal)}
.lk b{display:block;font-size:13px;margin-bottom:2px}
.lk span{font-size:11.5px;color:var(--muted)}
.disc{background:#F1F5F8;border-radius: var(--radius);padding:14px 16px;font-size:12.5px;color:var(--muted);
  margin-top:18px;line-height:1.75}
@media(max-width:900px){
  .rcards,.lks{grid-template-columns:1fr}
  .q h1{font-size:19px}
}

@media(max-width:900px){
  .linkgrid{grid-template-columns:1fr}
}

/* 比較リストの比較表（src/scripts/listpage.ts が生成） */
table.cmptbl{border-collapse:collapse;width:100%;font-size:13px;table-layout:fixed}
table.cmptbl th,table.cmptbl td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line);
  border-left:1px solid var(--line);vertical-align:top;width:230px}
table.cmptbl thead th{background:#F7FAFC;font-size:14px;font-weight:700;position:sticky;top:0}
table.cmptbl thead th a{text-decoration:none}
table.cmptbl thead th .sub{display:block;font-size:11px;color:var(--faint);font-weight:400;margin-top:3px}
table.cmptbl th.rh{background:#F7FAFC;font-size:12px;color:var(--muted);font-weight:700;
  border-left:0;width:130px;white-space:nowrap}
table.cmptbl tbody tr:last-child td,table.cmptbl tbody tr:last-child th{border-bottom:0}
table.cmptbl .cv{display:block;font-size:11px;color:var(--muted);font-weight:400;line-height:1.5;margin-top:4px}
table.cmptbl td.pr{font-weight:800;color:var(--accent);font-size:16px}
table.cmptbl td.pr small{font-size:11.5px;font-weight:500;color:var(--muted)}
table.cmptbl td.ok{color:var(--teal);font-weight:700}
table.cmptbl td.ng{color:var(--faint)}
table.cmptbl td.sm{font-size:12px;color:var(--muted)}
table.cmptbl .btn-d{display:block;margin-bottom:7px}
table.cmptbl .rm{width:100%;border:1px solid var(--line);background:#fff;border-radius: var(--radius);
  padding:8px;font-size:12px;color:var(--muted);cursor:pointer}
table.cmptbl .rm:hover{border-color:var(--warn);color:var(--warn)}
.shared{background:#FFF8E8;border:1px solid #F0DFB4;border-left:3px solid #D19A2E;border-radius: var(--radius);
  padding:12px 15px;font-size:12.5px;color:#6B5522;margin-bottom:14px;line-height:1.75}
.shared .sb{display:flex;gap:8px;margin-top:9px;flex-wrap:wrap}
.shared button{border:1px solid #E0CB95;background:#fff;border-radius: var(--radius);padding:7px 14px;
  font-size:12.5px;color:#6B5522;cursor:pointer}
.shared button:hover{border-color:#D19A2E}
.copy{margin:0 0 12px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.copy button{border:1px solid var(--line);background:#fff;border-radius: var(--radius);padding:7px 14px;
  font-size:12.5px;cursor:pointer}
.copy button:hover{border-color:var(--teal);color:var(--teal)}
.copy .s{font-size:11.5px;color:var(--faint)}
@media(max-width:900px){
  table.cmptbl{table-layout:auto;min-width:640px}
  table.cmptbl th.rh{position:sticky;left:0;z-index:1}
}

/* ------------------------------------------- ブランドページの要点
 * 本文の前に、このページで何が分かるかを並べる。
 *
 * **公式で確認した値と、利用者の申告を見分けられるようにする。**
 * 同じ並びに置くので、札ごとに出所を書き、色も分ける。
 */
.mjm-brand-summary {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 6px;
	margin: 22px 0 30px;
}

.mjm-brand-summary ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.mjm-brand-summary li {
	border-right: 1px solid var(--line);
}

.mjm-brand-summary li:last-child { border-right: 0; }

/* 札ごとページ内の該当する節へのリンクにする */
.mjm-brand-summary a {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 13px 15px;
	height: 100%;
	text-decoration: none;
	color: inherit;
	border-radius: var(--radius);
}

.mjm-brand-summary a:hover { background: var(--bg); }
.mjm-brand-summary a:hover .sr .cv { transform: translateX(2px); }

.mjm-brand-summary .lb {
	font-size: 11.5px;
	color: var(--muted);
	font-weight: 700;
}

.mjm-brand-summary .vv {
	font-size: 21px;
	font-weight: 800;
	line-height: 1.25;
	color: var(--txt);
}

.mjm-brand-summary .vv small {
	font-size: 12px;
	font-weight: 500;
	color: var(--muted);
	margin-left: 1px;
}

.mjm-brand-summary .vv .st { color: #F5A623; margin-right: 2px; }

.mjm-brand-summary .nt {
	font-size: 11px;
	color: var(--faint);
	line-height: 1.5;
}

/* 出所。公式＝紺、利用者＝緑。文字でも必ず書く（色だけに頼らない） */
.mjm-brand-summary .sr {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	font-size: 10.5px;
	font-weight: 700;
	border-radius: var(--radius);
	padding: 1px 7px;
	align-self: flex-start;
	margin-top: auto;
}

.mjm-brand-summary .sr .cv { transition: transform .15s; }

.mjm-brand-summary .src-official .sr { background: #EEF3F8; color: var(--navy); }
.mjm-brand-summary .src-users .sr { background: var(--teal-l); color: var(--teal); }

/* 公式の数値を基準にしたいので、利用者申告の札は少しだけ引く */
.mjm-brand-summary .src-users .vv { color: var(--teal); }

/*
 * 札の下の一文。
 *
 * **札と同じ囲みの中に置く。** 別の箱にすると要点が2つに割れる。
 * 札の並びとは罫で区切り、文字は本文より小さくする。
 */
.mjm-summary-line {
	margin: 0;
	border-top: 1px solid var(--line);
	padding: 11px 15px 12px;
	font-size: 12.5px;
	line-height: 1.75;
	color: var(--txt);
}

/*
 * 出所の札。**色だけに意味を持たせず、文字でも必ず書く。**
 * 公式＝紺、利用者＝緑。札の並びと同じ色分けにそろえる。
 */
.mjm-summary-src {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 7px;
	font-size: 10.5px;
	font-weight: 700;
	white-space: nowrap;
	background: var(--teal-l);
	color: var(--teal);
}

.mjm-summary-src.is-official {
	background: #EEF3F8;
	color: var(--navy);
}

@media (max-width: 720px) {
	.mjm-brand-summary ul { grid-template-columns: 1fr 1fr; }
	.mjm-brand-summary li { border-bottom: 1px solid var(--line); }
	.mjm-brand-summary li:nth-child(2n) { border-right: 0; }
	.mjm-brand-summary li:nth-last-child(-n+2) { border-bottom: 0; }
	.mjm-brand-summary .vv { font-size: 18px; }
	.mjm-brand-summary a { padding: 12px; }
}

/*
 * 札と目次から飛んだ先の見出しが、固定ヘッダーの下に隠れないようにする。
 * 飛んだのに何も変わっていないように見えるのを防ぐ。
 *
 * **目次ができたので、節を1つでも外すと飛び先が隠れる。**
 * ブランドページの節はすべて並べる。
 *
 * **ヘッダーの高さは画面幅で違う。**
 * スマホは口コミ件数の帯が付いて76px、PCは帯を使わないので64px（実測）。
 * Arkhe のスムーススクロールはヘッダーの高さを測り直すので影響を受けないが、
 * このCSSが効くのは外部から #id つきで直接来たときなので、別に合わせる。
 */
.mjm-block-prices,
.mjm-block-fees,
.mjm-block-actual,
.mjm-block-reviews,
.mjm-block-machines,
.mjm-block-payment,
.mjm-block-attributes,
.mjm-block-basic,
.mjm-block-shops { scroll-margin-top: 84px; }

@media (min-width: 1000px) {
	.mjm-block-prices,
	.mjm-block-fees,
	.mjm-block-actual,
	.mjm-block-reviews,
	.mjm-block-machines,
	.mjm-block-payment,
	.mjm-block-attributes,
	.mjm-block-basic,
	.mjm-block-shops { scroll-margin-top: 76px; }
}

/* ===================================================== 口コミ件数の札
 *
 * ヘッダーの帯に置く。**数字だけを大きくして、単位と見出しは添える。**
 * 「口コミ数」と「件」まで大きくすると、肝心の数字が埋もれる。
 *
 * 色は本文の金額と同じ --accent。ヘッダーで新しい色を足さない。
 */
.mjm-rvb {
	display: inline-flex;
	align-items: baseline;
	gap: 3px;
	line-height: 1.2;
	color: var(--txt);
	text-decoration: none;
	white-space: nowrap;
}

.mjm-rvb__lb,
.mjm-rvb__u {
	font-size: 12px;
	font-weight: 700;
	color: var(--muted);
}

.mjm-rvb__n {
	font-size: 20px;
	font-weight: 800;
	color: var(--accent);
	font-variant-numeric: tabular-nums;
}

a.mjm-rvb:hover .mjm-rvb__n { color: var(--accent-h); }

/*
 * PCはロゴと同じ行に出る（.l-header__right）。
 *
 * **ロゴの画像が高さ48pxあるので、札も相応の大きさが要る。**
 * 20pxの数字だと、ロゴの横で注記のように見える。
 * 数字だけを上げ、「口コミ数」「件」は添えたままにする。
 */
.mjm-rvb.is-pc {
	gap: 4px;
	padding-left: 18px;
	border-left: 1px solid var(--line);
}

.mjm-rvb.is-pc .mjm-rvb__n { font-size: 28px; }

.mjm-rvb.is-pc .mjm-rvb__lb,
.mjm-rvb.is-pc .mjm-rvb__u { font-size: 13px; }

/* スマホはロゴの上の細い帯。高さが20pxしかないので小さく収める。 */
.mjm-rvb.is-sp .mjm-rvb__n { font-size: 18px; }

.mjm-rvb.is-sp .mjm-rvb__lb,
.mjm-rvb.is-sp .mjm-rvb__u { font-size: 11px; }

/* ===================================================== 口コミを投稿するボタン
 *
 * ヘッダーと、画面下の固定帯の両方で使う。
 */
.mjm-rvbtn {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	padding: 9px 16px;
	background: var(--accent);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	border-radius: var(--radius);
}

.mjm-rvbtn:hover { background: var(--accent-h); color: #fff; }
.mjm-rvbtn .cv { transition: transform .15s; }
.mjm-rvbtn:hover .cv { transform: translateX(2px); }

/* ヘッダーはロゴの行に並ぶので、札と同じ高さに収める */
.mjm-rvbtn.is-pc { padding: 10px 18px; font-size: 13.5px; }

/*
 * 口コミ全体の集計の節。
 * 中身は口コミのサマリー部品そのままなので、ここは囲みと余白だけ。
 */
.mjm-rv-report { margin: 36px 0; }
.mjm-rv-report > .sdesc { margin-bottom: 14px; }
.mjm-rv-report .mjm-xlink { margin-top: 14px; }

/*
 * 図は2枚ずつ並べる。
 *
 * **1枚ずつ縦に積むと、4枚で画面2つぶんになる。**
 * トップの中ほどにあるので、ここで読み終えずに下へ進めるようにする。
 * 狭い画面では1列。棒グラフのラベルが折り返して読めなくなるため。
 */
.mjm-rv-report .sv-charts {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px 26px;
}

.mjm-rv-report .sv-charts > .mjm-chart { margin: 0; }

@media (max-width: 700px) {
	.mjm-rv-report .sv-charts { grid-template-columns: 1fr; gap: 26px; }
}

/* ===================================================== 項目別の評価の分布
 *
 * 表のセルに「件数」と「割合」を並べる。
 * **割合だけにしない。** 回答数が項目ごとに違うので、
 * 割合だけでは何件の話か分からない。
 */
.mjm-rv-breakdown .cmp .cv {
	display: inline-block;
	margin-left: 6px;
	font-size: 11.5px;
	color: var(--muted);
	font-weight: 400;
}

/* ===================================================== 回数の分布
 *
 * 口コミの棒グラフ（.mjm-rv-bars）と同じ形にそろえる。
 * **同じサイトの中で棒の形を2種類作らない。**
 */
.mjm-sess-bars {
	list-style: none;
	margin: 12px 0 10px;
	padding: 0;
}

.mjm-sess-bars li {
	display: grid;
	grid-template-columns: 6.5em minmax(0, 1fr) 6.5em;
	align-items: center;
	gap: 10px;
	margin-bottom: 7px;
}

.mjm-sess-bars .bl { font-size: 13px; font-weight: 700; }

.mjm-sess-bars .bt {
	height: 10px;
	background: var(--bg);
	border-radius: var(--radius);
	overflow: hidden;
}

.mjm-sess-bars .bf {
	display: block;
	height: 100%;
	background: var(--navy-l);
}

/* 利用者の回答は、公式の数字と色を変える（出所が違う） */
.mjm-sess-bars.is-felt .bf { background: var(--teal); }

.mjm-sess-bars .bv {
	font-size: 13px;
	font-weight: 700;
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.mjm-sess-bars .bv small {
	display: block;
	font-size: 10.5px;
	font-weight: 400;
	color: var(--faint);
}

@media (max-width: 600px) {
	.mjm-sess-bars li { grid-template-columns: 5.4em minmax(0, 1fr) 5.4em; gap: 8px; }
	.mjm-sess-bars .bl { font-size: 12.5px; }
}

/* 件数などを数字の横に小さく添える（区分の比較表・相場表） */
.mjm-benchmark .cmp .cv,
.mjm-part-compare .cmp .cv {
	display: inline-block;
	margin-left: 5px;
	font-size: 11px;
	color: var(--faint);
	font-weight: 400;
}

/* ===================================================== よくある質問
 *
 * **開閉にJavaScriptを使わない。** details と summary で足りる。
 * 閉じていても検索エンジンには中身が読める。
 */
.mjm-rv-faq { margin: 8px 0 0; }

.mjm-faq-item {
	border-bottom: 1px solid var(--line);
}

.mjm-faq-item summary {
	position: relative;
	list-style: none;
	cursor: pointer;
	padding: 15px 34px 15px 0;
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.6;
	color: var(--navy);
}

.mjm-faq-item summary::-webkit-details-marker { display: none; }

/* 開閉の印。＋と− */
.mjm-faq-item summary::after {
	content: "＋";
	position: absolute;
	right: 4px;
	top: 15px;
	font-size: 14px;
	color: var(--faint);
}

.mjm-faq-item[open] summary::after { content: "−"; }

.mjm-faq-item summary:hover { color: var(--accent); }

.mjm-faq-body {
	padding: 0 0 16px;
}

.mjm-faq-body p {
	margin: 0 0 9px;
	font-size: 13.5px;
	line-height: 1.85;
	color: var(--muted);
}

.mjm-faq-body p:last-child { margin-bottom: 0; }
.mjm-faq-body b { color: var(--txt); }
.mjm-faq-body a { color: var(--teal); font-weight: 700; }

/* ===================================================== 契約前に確認すること
 *
 * 「いまの口コミ」と「確認すること」を左右に並べる。
 * **囲みは作らない。** 項目の区切りは罫と余白だけ。
 */
.mjm-rv-point {
	margin: 22px 0 0;
	padding-top: 16px;
	border-top: 1px solid var(--line);
}

.mjm-rv-point dl {
	display: grid;
	grid-template-columns: 7.5em minmax(0, 1fr);
	gap: 8px 16px;
	margin: 0;
	font-size: 13.5px;
	line-height: 1.85;
}

.mjm-rv-point dt {
	color: var(--muted);
	font-weight: 700;
	font-size: 12.5px;
	white-space: nowrap;
}

.mjm-rv-point dd { margin: 0; }

@media (max-width: 600px) {
	.mjm-rv-point dl { grid-template-columns: 1fr; gap: 2px; }
	.mjm-rv-point dd { margin-bottom: 8px; }
}

/* 評価の項目の一覧。箇条書きを横に並べる */
.mjm-rv-fields {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 10px 0 12px;
	padding: 0;
}

.mjm-rv-fields li {
	padding: 4px 11px;
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	font-size: 12.5px;
	font-weight: 700;
}

/* ===================================================== 施設ごとの評判
 *
 * **社ごとにカードを作らない。** 17社ぶん同じ箱が並ぶと、
 * どれも同じに見えて中身の違いが伝わらなくなる。
 * 区切りは上の罫1本と余白だけにする。
 */
.mjm-rv-brand {
	margin: 26px 0 0;
	padding-top: 20px;
	border-top: 1px solid var(--line);
}

.mjm-rv-brand .bh {
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 10px;
}

.mjm-rv-brand .nm { margin: 0; font-size: 17px; line-height: 1.5; }
.mjm-rv-brand .nm a { text-decoration: none; color: var(--navy); }
.mjm-rv-brand .nm a:hover { text-decoration: underline; }

.mjm-rv-brand .sc {
	margin: 0 0 0 auto;
	display: flex;
	align-items: baseline;
	gap: 9px;
	white-space: nowrap;
}

.mjm-rv-brand .sc .v {
	font-size: 19px;
	font-weight: 800;
	color: var(--txt);
	font-variant-numeric: tabular-nums;
}

.mjm-rv-brand .sc .c { font-size: 12px; color: var(--muted); }

/* 高い項目・低い項目。2列で並べ、狭い画面では1列 */
.mjm-rv-brand .bp {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 4px 14px;
	margin: 0 0 12px;
	font-size: 13px;
}

.mjm-rv-brand .bp dt { color: var(--muted); white-space: nowrap; }
.mjm-rv-brand .bp dd { margin: 0; }
.mjm-rv-brand .bp dd b { margin-left: 5px; font-variant-numeric: tabular-nums; }

@media (max-width: 600px) {
	.mjm-rv-brand .sc { margin-left: 0; }
}

/* 根拠として引く口コミ。囲みは作らず、左の罫だけで引用と分かるようにする */
.mjm-rv-quotes {
	list-style: none;
	margin: 10px 0 24px;
	padding: 0;
}

.mjm-rv-quotes li {
	margin: 0 0 12px;
	padding: 0 0 0 14px;
	border-left: 3px solid var(--line);
}

.mjm-rv-quotes .qb {
	margin: 0 0 5px;
	font-size: 13.5px;
	line-height: 1.8;
}

.mjm-rv-quotes .qm {
	margin: 0;
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
	font-size: 12px;
}

.mjm-rv-quotes .qm a { color: var(--navy); font-weight: 700; }

.mjm-rv-quotes .sc { color: var(--muted); }
.mjm-rv-quotes .sc b { color: var(--txt); font-size: 13px; margin-left: 3px; }

/*
 * 口コミ節の終わりに置く投稿の案内。
 * **囲みは罫だけ。** 本文の中なので、広告のような箱にしない。
 */
.mjm-rv-cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-top: 22px;
	padding: 16px 18px;
	border: 1px solid var(--line);
	background: var(--bg);
}

.mjm-rv-cta__txt {
	margin: 0;
	flex: 1 1 260px;
	font-size: 13px;
	line-height: 1.75;
	color: var(--muted);
}

@media (max-width: 600px) {
	.mjm-rv-cta { padding: 14px; }
	.mjm-rv-cta .mjm-rvbtn { width: 100%; justify-content: center; }
}

/* ===================================================== 画面下に固定する帯
 *
 * **常に画面に居座るので、ボタンは1つだけにする。**
 * 選ばせる場所にすると、どのページでも判断を迫ることになる。
 *
 * 狭い画面では説明文を出さない。ボタンだけ残す。
 */
.mjm-cta-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	min-height: var( --mjm-cta-h, 58px );
	padding: 9px 16px calc( 9px + env( safe-area-inset-bottom ) );
	background: rgba( 255, 255, 255, .96 );
	border-top: 1px solid var(--line);
	backdrop-filter: blur( 6px );
}

.mjm-cta-bar__txt {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--muted);
}

.mjm-cta-bar .mjm-rvbtn { padding: 11px 24px; font-size: 14px; }

/*
 * 帯のぶんだけ下に余白を作る。
 * **これが無いと、フッターの著作権表示が帯の裏に隠れる。**
 */
body.mjm-has-cta { padding-bottom: var( --mjm-cta-h, 58px ); }

@media (max-width: 600px) {
	.mjm-cta-bar__txt { display: none; }
	.mjm-cta-bar { padding-left: 14px; padding-right: 14px; }
	.mjm-cta-bar .mjm-rvbtn { width: 100%; justify-content: center; }
}

/* ===================================================== ページ内の目次
 *
 * **1万字を超えるページで、どこに何があるかを先に見せる。**
 * 出来上がったHTMLの見出しから作るので、出ていない節は並ばない。
 *
 * 囲みは罫だけにする。影を足すと、すぐ上の要点の箱と重さが並んで
 * ページの頭が箱だらけになる。
 */
.mjm-toc {
	border: 1px solid var(--line);
	padding: 14px 16px 15px;
	margin: 0 0 30px;
	background: #fff;
}

.mjm-toc-ttl {
	margin: 0 0 9px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .08em;
	color: var(--muted);
}

.mjm-toc ol {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: mjm-toc;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2px 20px;
}

.mjm-toc li {
	counter-increment: mjm-toc;
	margin: 0;
}

.mjm-toc a {
	display: flex;
	gap: 8px;
	align-items: baseline;
	padding: 4px 0;
	font-size: 13px;
	line-height: 1.6;
	text-decoration: none;
	color: var(--txt);
}

.mjm-toc a::before {
	content: counter( mjm-toc );
	flex: none;
	min-width: 1.3em;
	font-size: 11px;
	font-weight: 700;
	color: var(--faint);
	font-variant-numeric: tabular-nums;
}

.mjm-toc a:hover { color: var(--teal); }
.mjm-toc a:hover::before { color: var(--teal); }

@media (max-width: 600px) {
	.mjm-toc ol { grid-template-columns: 1fr; }
}

/* ===================================================== トップの導入
 *
 * **囲みを作らない。**
 * ここは掲載数と調査の規模を見せる場所。強弱は文字の大小・太さ・余白・罫で作る。
 * 箱と影を足すと、中身より入れ物のほうが先に目に入る。
 *
 * **H1は持たない。** ページタイトルはテーマが出す。
 * ここはそのタイトルの下に続く導入なので、上の余白を詰める。
 */
.mjm-front-hero {
	margin: 0 0 10px;
}

.mjm-front-hero .kicker {
	margin: 0 0 9px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .14em;
	color: var(--muted);
}

/*
 * 見出しの副題。<h1> の外に置いても中に置いても同じ見た目になるようにする。
 * 段落として置いたときに既定の下余白が付かないよう、四辺とも指定する。
 */
/*
 * **幅は、いまの文言が1行に収まる値にしてある。**
 * 「モージャマ｜メンズ脱毛のリアルがわかる調査レポート」は30pxで751px（25.0em）。
 * 19emだと必ず折り返し、「調査レポート」の4文字だけが2行目に落ちていた。
 * 文言を長くするときは、ここも測り直すこと。
 */
.mjm-front-title {
	font-size: 30px;
	font-weight: 800;
	color: var(--navy);
	line-height: 1.38;
	letter-spacing: .005em;
	margin: 0 0 13px;
	max-width: 26em;
}

@media (max-width: 760px) {
	.mjm-front-title { font-size: 23px; line-height: 1.45; margin-bottom: 11px; }
}

/*
 * ヒーローの箇条書き。
 *
 * **印は文字で作らず、CSSの疑似要素で出す。**
 * 「✓」を本文に書くと、読み上げで「チェックマーク」と読まれ、
 * コピーしたときにも混ざる。見た目だけの印は本文に入れない。
 */
.mjm-front-points {
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: 34em;
}

.mjm-front-points li {
	position: relative;
	margin: 0 0 6px;
	padding-left: 24px;
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.7;
	color: var(--txt);
}

.mjm-front-points li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: .55em;
	width: 11px;
	height: 6px;
	border-left: 2px solid var(--accent);
	border-bottom: 2px solid var(--accent);
	transform: rotate(-45deg);
}

@media (max-width: 760px) {
	.mjm-front-points li { font-size: 13.5px; padding-left: 21px; }
}

/* ---------------- 掲載数のカード
 *
 * **もとは罫だけで区切った帯だった。**
 * 2026-10-16にカードへ変更（運営者の判断）。
 * 数字より箱が先に目に入らないよう、縁は細い罫1本、影はごく薄く、
 * 背景は白のまま。色は付けない。
 */
.mjm-figures {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
	margin: 26px 0 0;
}

.mjm-figures > div {
	min-width: 0;
	padding: 15px 18px;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
}

.mjm-figures dt {
	font-size: 11.5px;
	font-weight: 700;
	color: var(--muted);
	line-height: 1.5;
}

.mjm-figures dd {
	margin: 1px 0 0;
	font-size: 34px;
	font-weight: 800;
	color: var(--navy);
	line-height: 1.2;
	letter-spacing: -.02em;
	font-feature-settings: "tnum";
}

.mjm-figures dd span {
	font-size: 12px;
	font-weight: 700;
	color: var(--muted);
	letter-spacing: 0;
	margin-left: 3px;
}

.mjm-figures dd small {
	display: block;
	font-size: 11px;
	font-weight: 400;
	color: var(--faint);
	letter-spacing: 0;
	line-height: 1.55;
}

/* ---------------- このサイトでわかること
 *
 * 入口はカードではなく目次として組む。雑誌の中身案内と同じで、行と罫だけ。
 * 見出しは機能名ではなく「読みたくなる問い」にしてある。
 */
.mjm-index { margin: 30px 0 0; }

.mjm-front-hero .mjm-index .toc-h {
	margin: 0 0 3px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .12em;
	color: var(--muted);
	line-height: 1.6;
}

/*
 * **もとは罫だけの目次だった。** 2026-10-16にカードへ変更（運営者の判断）。
 * 押せる範囲がカードの形で分かるぶん、入口としては迷いにくい。
 */
/*
 * **詳細度を上げている。**
 * テーマ（Arkhe）が本文の ul に padding-left を入れており、
 * 同じ詳細度の `.mjm-index ul { padding: 0 }` では負けて
 * 左に21px寄っていた（実測）。掲載数のカードと左端がそろわない。
 */
.mjm-front-hero .mjm-index ul,
.mjm-index ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.mjm-index li {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
}

.mjm-index a {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 1.2em;
	grid-template-areas: "t a" "d a";
	align-items: center;
	column-gap: 14px;
	padding: 15px 18px 14px;
	text-decoration: none;
	border-radius: var(--radius);
}

.mjm-index b {
	grid-area: t;
	font-size: 16.5px;
	font-weight: 700;
	color: var(--navy);
	line-height: 1.5;
	margin-bottom: 3px;
}

.mjm-index span {
	grid-area: d;
	font-size: 12.5px;
	color: var(--muted);
	line-height: 1.6;
}

.mjm-index a::after {
	grid-area: a;
	content: "→";
	text-align: right;
	color: var(--faint);
	font-size: 15px;
}

.mjm-index a:hover { background: #F6F9FB; }
.mjm-index a:hover b { text-decoration: underline; }
.mjm-index a:hover::after { color: var(--accent); }

.mjm-hero-note {
	margin: 22px 0 0;
	padding-top: 13px;
	border-top: 1px solid var(--line);
	font-size: 12px;
	color: var(--faint);
	line-height: 1.85;
	max-width: 64em;
}

.mjm-hero-note b { color: var(--muted); font-weight: 700; }
.mjm-hero-note a { color: var(--teal); font-weight: 700; }

@media (max-width: 1000px) {
	.mjm-figures { gap: 10px; }
	.mjm-figures > div { padding: 13px 14px; }
	.mjm-figures dd { font-size: 29px; }
}

@media (max-width: 760px) {
	.mjm-front-hero .kicker { font-size: 11px; letter-spacing: .1em; }
	.mjm-front-title { font-size: 23px; line-height: 1.45; margin-bottom: 11px; }
	.mjm-front-points { margin-top: 11px; }

	/* 掲載数は2×2のカード */
	.mjm-figures { margin-top: 20px; grid-template-columns: 1fr 1fr; gap: 10px; }
	.mjm-figures > div { padding: 12px 13px; }
	.mjm-figures dt { font-size: 11px; }
	.mjm-figures dd { font-size: 28px; }

	.mjm-index { margin-top: 24px; }
	/*
	 * **上の指定と同じ詳細度で書くこと。**
	 * 上は `.mjm-front-hero .mjm-index ul` でテーマに勝つよう強めてある。
	 * ここを `.mjm-index ul` だけにすると負けて、狭い画面でも2列のまま残る。
	 */
	.mjm-front-hero .mjm-index ul,
	.mjm-index ul { grid-template-columns: 1fr; gap: 10px; }
	.mjm-index a { padding: 13px 15px 12px; }
	.mjm-index b { font-size: 15.5px; }
	.mjm-index span { font-size: 12px; }
	.mjm-hero-note { margin-top: 18px; }
}

/* ===================================================== 統計ブロック */
.stats {
	display: flex;
	background: #fff;
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow);
	flex-wrap: wrap;
}

.stat {
	flex: 1;
	min-width: 150px;
	padding: 14px 18px;
	border-right: 1px solid var(--line);
	color: var(--txt);
}

.stat:last-child { border-right: 0; }
.stat .l { font-size: 11.5px; color: var(--muted); }
.stat .v { font-size: 23px; font-weight: 800; line-height: 1.3; }
.stat .v.sm { font-size: 15px; padding-top: 5px; }
.stat .v small { font-size: 12px; font-weight: 500; color: var(--muted); }

.mjm-area-intro .note {
	font-size: 11.5px;
	color: var(--muted);
	padding: 12px 0 0;
	margin: 0;
}

/* ===================================================== カード */
.mjm-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 15px;
}

@media (max-width: 900px) {
	.mjm-cards { grid-template-columns: 1fr; }
}

.card {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 17px;
	display: flex;
	flex-direction: column;
	box-shadow: var(--shadow);
	height: 100%;
	color: var(--txt);
}

.card .axis {
	display: inline-block;
	background: var(--navy);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	border-radius: var(--radius);
	padding: 3px 9px;
	margin-bottom: 12px;
	align-self: flex-start;
}

.card .top {
	display: flex;
	gap: 7px;
	margin-bottom: 10px;
	flex-wrap: wrap;
}

.bname {
	font-size: 17px;
	font-weight: 700;
	margin: 0 0 3px;
	line-height: 1.45;
	color: var(--txt);
}

.bname a { text-decoration: none; }
.bname a:hover { color: var(--accent); }

.boper {
	font-size: 11.5px;
	color: var(--faint);
	margin: 0 0 12px;
}

.card .reason {
	font-size: 12px;
	color: var(--muted);
	background: #F2F8F7;
	border-left: 2px solid var(--teal);
	padding: 8px 10px;
	border-radius: var(--radius);
	margin: 11px 0;
	line-height: 1.6;
}

.card .reason b { color: var(--teal); }

.card .feats {
	list-style: none;
	padding: 0;
	margin: 11px 0 14px;
	font-size: 12.5px;
}

.card .feats li {
	display: flex;
	gap: 7px;
	margin-bottom: 5px;
	color: var(--muted);
	line-height: 1.55;
}

.card .feats .ck {
	color: var(--teal);
	font-weight: 700;
	flex-shrink: 0;
}

.cfoot {
	margin-top: auto;
	display: flex;
	gap: 8px;
	align-items: center;
	padding-top: 6px;
}

.vdate {
	font-size: 11px;
	color: var(--faint);
	margin: 9px 0 0;
	text-align: right;
}

/* ===================================================== 料金＋施術範囲 */
.pwc { margin: 4px 0 6px; }

.pwc-name {
	font-size: 11.5px;
	color: var(--muted);
	margin: 0;
}

.pwc-amt {
	font-size: 25px;
	font-weight: 800;
	color: var(--accent);
	line-height: 1.2;
	margin: 0;
}

.pwc-amt.na {
	font-size: 14px;
	font-weight: 500;
	color: var(--faint);
}

.pwc-amt small {
	font-size: 12px;
	color: var(--muted);
	font-weight: 500;
}

/* 施術範囲。金額と必ずセットで出るので、金額の直下に固定して見せる */
.pwc-cov {
	font-size: 11.5px;
	color: var(--muted);
	background: var(--bg);
	border-radius: var(--radius);
	padding: 6px 9px;
	margin: 7px 0 4px;
	line-height: 1.5;
}

.pwc-eff {
	font-size: 12px;
	color: var(--muted);
	margin: 0;
}

.pwc-eff b { color: var(--txt); }
.pwc-eff .s { font-size: 11.5px; display: block; }

/* ===================================================== 見出し・セクション */
.mjm-main section > h2 {
	font-size: 20px;
	margin: 0 0 6px;
}

.mjm-main section > h3,
.mjm-main .th {
	font-size: 15px;
	margin: 18px 0 8px;
}

.mjm-kv th {
	background: #F7FAFC;
	width: 150px;
	color: var(--muted);
	font-size: 12px;
}

/*
 * URLをそのまま出す欄。
 *
 * 表のセルは既定で nowrap なので、長いURLだと横に伸びて
 * 狭い画面で表ごとはみ出す。ここだけ折り返しを許す。
 */
.mjm-kv .mjm-url {
	white-space: normal;
	word-break: break-all;
	font-size: 13px;
}

.mjm-kv td:has(.mjm-url) { white-space: normal; }

.mjm-hours td { text-align: center; }

/* ===================================================== 2カラムパネル */
.two {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

@media (max-width: 900px) {
	.two { grid-template-columns: 1fr; }
}

.ph { margin: 0 0 3px; font-size: 16px; }
.pd { color: var(--muted); font-size: 12.5px; margin: 0 0 14px; }
.tiny { font-size: 11.5px; color: var(--faint); margin: 12px 0 0; }
.chip.is-empty { color: var(--faint); background: var(--bg); }

/* ===================================================== 店舗一覧 */
.shops {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
}

@media (max-width: 900px) {
	.shops { grid-template-columns: 1fr; }
}

.shop {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 14px;
	box-shadow: var(--shadow);
}

.shop .h {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	margin-bottom: 4px;
}

.shop .nm {
	font-weight: 700;
	font-size: 14.5px;
	margin: 0;
	flex: 1;
}

.shop .nm a { text-decoration: none; }
.shop .nm a:hover { color: var(--accent); }

.shop .br { font-size: 11.5px; color: var(--faint); margin: 0 0 8px; }

.shop dl {
	margin: 0;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 3px 10px;
	font-size: 12.5px;
}

.shop dt { color: var(--muted); white-space: nowrap; }
.shop dd { margin: 0; }

.shop .unk {
	color: var(--faint);
	font-size: 12px;
	background: var(--bg);
	border-radius: var(--radius);
	padding: 6px 9px;
	margin: 8px 0 0;
}

.shop .unk a { color: var(--teal); }
.shop .lk { margin: 10px 0 0; }
.shop .lk a { font-size: 12.5px; text-decoration: none; color: var(--teal); font-weight: 700; }

.lk a { color: var(--teal); text-decoration: none; font-weight: 700; }
.shop .lk { display: flex; gap: 14px; flex-wrap: wrap; }

/* 市区町村ごとのまとめ。東京都は131院あるため、
   ひと続きの一覧にすると目的の店舗にたどり着けない */
.mjm-city {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	margin-bottom: 10px;
	box-shadow: var(--shadow);
}

.mjm-city > summary {
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding: 13px 17px;
	cursor: pointer;
	font-weight: 700;
	font-size: 14.5px;
}

.mjm-city > summary .c {
	font-size: 12px;
	color: var(--muted);
	font-weight: 400;
}

.mjm-city[open] > summary { border-bottom: 1px solid var(--line); }
.mjm-city .shops { padding: 14px 17px; }
.mjm-city .shop { box-shadow: none; }

/* ------------------------------------------- 都道府県の目次（店舗一覧）
 * 市区町村だけ並べると、全国展開の施設ではどの県の店舗か分からない。
 * 地方ごとのカードに都道府県と院数を並べ、そこから各県へ飛ばす。
 * 地方の区切りは地域ページと同じマスタを使っている。
 */
.mjm-pref-index {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
	margin-bottom: 22px;
	/* 県が1つしか無い地方のカードを、行の高さに引き伸ばさない */
	align-items: start;
}

.mjm-pref-index .rg {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.mjm-pref-index .rgh {
	display: flex;
	align-items: baseline;
	gap: 10px;
	background: #EEF3F8;
	border-bottom: 1px solid var(--line);
	padding: 10px 14px;
}

.mjm-pref-index .rgh .nm {
	margin: 0;
	font-weight: 700;
	font-size: 14.5px;
	color: var(--navy);
}

.mjm-pref-index .rgh .c {
	margin: 0 0 0 auto;
	font-size: 11.5px;
	color: var(--muted);
	white-space: nowrap;
}

.mjm-pref-index .rgh .c b { font-size: 14px; color: var(--txt); }

.mjm-pref-index ul {
	list-style: none;
	margin: 0;
	padding: 10px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 7px;
}

/* 中身はラベル。見た目はリンクのままにする */
.mjm-pref-index a,
.mjm-pref-index label {
	display: flex;
	align-items: center;
	gap: 7px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 9px 11px;
	font-size: 13px;
	text-decoration: none;
	color: var(--txt);
	background: #fff;
	cursor: pointer;
}

.mjm-pref-index a:hover,
.mjm-pref-index label:hover { border-color: var(--navy); background: var(--bg); }

/* 選んでいる県が目次でも分かるようにする */
.mjm-shops-pref .mjm-pref-radio:checked + .mjm-pref { scroll-margin-top: 80px; }

.mjm-pref-index .p { font-weight: 700; }
.mjm-pref-index .n { margin-left: auto; font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.mjm-pref-index .cv { color: var(--faint); font-size: 12px; }

/*
 * 都道府県ごとの中身。
 *
 * **選ばれた県だけ出す。**
 * 目次の下に47県ぶんの見出しを並べると、目次と同じ内容が2回出て、
 * 画面が伸びるだけになる。
 * :target で切り替えるので、JavaScriptは要らない。
 */
/*
 * 切り替えはラジオで行う。
 *
 * **:target だけに頼らない。** Arkhe はページ内リンクのクリックを
 * preventDefault して history.pushState でURLを書き換えるため、
 * ブラウザがフラグメント遷移をせず :target が一致しない。
 * :target の行を残すのは、外部から直接リンクされたときのため。
 */
.mjm-pref-radio {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	margin: 0;
}

.mjm-shops-by-pref .mjm-pref { display: none; }
.mjm-pref-radio:checked + .mjm-pref { display: block; }
.mjm-shops-by-pref .mjm-pref:target { display: block; }

/* キーボードで選んでいるあいだ、どの県にいるか分かるようにする */
.mjm-pref-radio:focus-visible + .mjm-pref { outline: 2px solid var(--teal); outline-offset: 2px; }

/* 県を選ぶまでの案内。選んだら消す */
.mjm-pref-hint {
	font-size: 12.5px;
	color: var(--muted);
	background: var(--bg);
	border-radius: var(--radius);
	padding: 11px 14px;
	margin: 0;
}

.mjm-shops-by-pref:has(.mjm-pref:target) .mjm-pref-hint,
.mjm-shops-by-pref:has(.mjm-pref-radio:checked) .mjm-pref-hint { display: none; }

.mjm-pref {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	/* ヘッダーが固定なので、飛んだときに見出しが隠れないようにする */
	scroll-margin-top: 76px;
}

.mjm-pref .ph {
	display: flex;
	align-items: baseline;
	gap: 12px;
	padding: 13px 17px;
	border-bottom: 1px solid var(--line);
}

.mjm-pref .ph .nm { margin: 0; font-weight: 700; font-size: 15px; }
.mjm-pref .ph .c { font-size: 12px; color: var(--muted); font-weight: 400; margin-left: 7px; }

.mjm-pref .ph .ar {
	margin-left: auto;
	font-size: 12px;
	color: var(--teal);
	text-decoration: none;
	white-space: nowrap;
}

.mjm-pref .ph .ar:hover { text-decoration: underline; }

/* 地域ページへのリンクが出たときは、こちらを右端から外す */
.mjm-pref .ph .ar + .bk { margin-left: 14px; }

.mjm-pref .ph .bk {
	margin-left: auto;
	font-size: 12px;
	color: var(--teal);
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

.mjm-pref .ph .bk:hover { text-decoration: underline; }

/* ===================================================== ページ間の導線
 * **本文の中から、比べ直せる場所へ出す。**
 * 1社のページだけ見ても高いか安いかは分からない。
 * 目立たせすぎず、しかし見落とさない程度に置く。
 */
.mjm-xlink {
	margin: 0 0 12px;
	font-size: 13px;
}

.mjm-xlink a {
	color: var(--teal);
	text-decoration: none;
	border-bottom: 1px solid var(--line);
	padding-bottom: 1px;
}

.mjm-xlink a:hover { border-color: var(--teal); }

.mjm-axis-link {
	display: inline-block;
	margin-left: 8px;
	font-size: 12px;
	color: var(--teal);
	text-decoration: none;
	white-space: nowrap;
}

.mjm-axis-link:hover { text-decoration: underline; }

.mjm-pref .shops { padding: 14px 17px; }
.mjm-pref .shop { box-shadow: none; }

@media (max-width: 900px) {
	.mjm-pref-index { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px) {
	.mjm-pref-index { grid-template-columns: 1fr; gap: 11px; }
	.mjm-pref-index ul { grid-template-columns: 1fr 1fr; }
}

/* ===================================================== 検索 */
.mjm-search-head {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	margin-bottom: 12px;
}

.mjm-hits { margin: 0; font-size: 14px; }
.mjm-hits b { font-size: 20px; color: var(--accent); }
.mjm-sort { margin-left: auto; font-size: 12.5px; color: var(--muted); }
.mjm-sort select { padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }

.mjm-applied {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 14px;
}

.mjm-open-filters {
	display: none;
	width: 100%;
	border: 1px solid var(--line);
	background: #fff;
	border-radius: var(--radius);
	padding: 11px;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	margin-bottom: 12px;
	color: var(--txt);
}

.mjm-search-body {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: 20px;
	align-items: start;
}

.mjm-filters {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 16px;
	box-shadow: var(--shadow);
	position: sticky;
	top: 72px;
}

.mjm-filters fieldset {
	border: 0;
	padding: 0;
	margin: 0 0 16px;
}

.mjm-filters legend {
	font-size: 12px;
	font-weight: 700;
	color: var(--muted);
	padding: 0;
	margin-bottom: 7px;
}

.mjm-filters select {
	width: 100%;
	padding: 9px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: #fff;
	font-size: 13px;
}

.mjm-filters label {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 13px;
	padding: 4px 0;
	cursor: pointer;
	color: var(--txt);
}

.mjm-filters label em {
	margin-left: auto;
	font-style: normal;
	font-size: 11px;
	color: var(--faint);
}

.mjm-reset {
	width: 100%;
	border: 1px solid var(--line);
	background: #fff;
	border-radius: var(--radius);
	padding: 9px;
	font-size: 12.5px;
	cursor: pointer;
	color: var(--muted);
}

.mjm-zero {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 22px;
	box-shadow: var(--shadow);
}

.mjm-sugg {
	display: grid;
	gap: 9px;
	margin-top: 12px;
}

@media (max-width: 900px) {
	.mjm-search-body { grid-template-columns: 1fr; }
	.mjm-open-filters { display: block; }
	.mjm-filters { display: none; position: static; }
	.mjm-filters.open { display: block; }
}

/* ===================================================== 診断
 * 見出しタグを使わず p に見出し用のクラスを当てている。
 * ページ内に埋め込んだときに見出しの階層を壊さないため。
 */
.mjm-start {
	display: block;
	width: 100%;
	background: #fff;
	border: 2px solid var(--teal);
	border-radius: var(--radius);
	padding: 18px;
	cursor: pointer;
	text-align: left;
	box-shadow: var(--shadow);
	color: var(--txt);
}

.mjm-start b { display: block; font-size: 16px; margin-bottom: 3px; }
.mjm-start span { font-size: 12.5px; color: var(--muted); }

.mjm-prog { margin: 16px 0; }
.mjm-step { font-size: 11.5px; color: var(--muted); margin: 6px 0 0; text-align: right; }

.qtitle { font-size: 23px; font-weight: 700; margin: 0 0 8px; line-height: 1.5; }
.rtitle { font-size: 25px; font-weight: 700; margin: 0 0 6px; }
.rcname { font-size: 17px; font-weight: 700; margin: 0 0 2px; }
.whyh { font-size: 12px; color: var(--teal); margin: 0 0 6px; font-weight: 700; }
.yah { font-size: 13px; margin: 0 0 10px; color: var(--muted); display: flex; align-items: center; font-weight: 700; }
.afth { font-size: 16px; font-weight: 700; margin: 0 0 10px; }

@media (max-width: 900px) {
	.qtitle { font-size: 19px; }
}

/* ===================================================== 条件別 */
.mjm-axes {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
}

@media (max-width: 900px) {
	.mjm-axes { grid-template-columns: 1fr; }
}

.mjm-axis {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 15px 17px;
	text-decoration: none;
	display: block;
	box-shadow: var(--shadow);
	color: var(--txt);
}

.mjm-axis:hover { border-color: var(--teal); }
.mjm-axis b { display: block; font-size: 15px; margin-bottom: 3px; }
.mjm-axis .n { font-size: 12px; color: var(--accent); font-weight: 700; }
.mjm-axis .c { display: block; font-size: 11.5px; color: var(--muted); margin-top: 6px; line-height: 1.6; }

.mjm-criteria { margin-bottom: 18px; }
.mjm-criteria-h { font-size: 12px; color: var(--muted); font-weight: 700; margin: 0 0 6px; }
.mjm-criteria p { margin: 0 0 6px; font-size: 14px; }

/* ===================================================== 地域の入口 */
.mjm-region { margin-bottom: 20px; }

.mjm-region-h {
	font-size: 14px;
	margin: 0 0 8px;
	display: flex;
	align-items: baseline;
	gap: 8px;
}

.mjm-region-h a { text-decoration: none; }
.mjm-region-h a:hover { color: var(--accent); }
.mjm-region-h .c { font-size: 11.5px; color: var(--muted); font-weight: 400; }

/* ===================================================== 更新履歴 */
.mjm-updates { list-style: none; padding: 0; margin: 0; }

.mjm-update {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 17px 19px;
	box-shadow: var(--shadow);
	margin-bottom: 13px;
}

.mjm-update.is-high { border-left: 3px solid var(--accent); }

.mjm-update-meta {
	display: flex;
	gap: 8px;
	align-items: center;
	font-size: 12px;
	color: var(--muted);
	margin-bottom: 7px;
	flex-wrap: wrap;
}

.mjm-update-h { font-size: 16px; margin: 0 0 9px; }

.mjm-diff {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 5px 12px;
	background: var(--bg);
	border-radius: var(--radius);
	padding: 11px 13px;
	font-size: 12.5px;
	margin: 0 0 11px;
}

.mjm-diff dt { color: var(--muted); white-space: nowrap; font-weight: 700; }
.mjm-diff dd { margin: 0; }

.mjm-update-detail { font-size: 13.5px; color: var(--muted); }
.mjm-update-detail p { margin: 0 0 8px; }

/* ===================================================== 部位ページ */
.mjm-part-lead { font-size: 15px; margin-bottom: 8px; }

.mjm-blocks { display: grid; gap: 12px; }

.mjm-block {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 15px 17px;
	box-shadow: var(--shadow);
}

.mjm-block h3 { font-size: 15px; margin: 0 0 5px; }
.mjm-block p { margin: 0; font-size: 13.5px; color: var(--muted); line-height: 1.8; }

.mjm-flow { counter-reset: step; list-style: none; padding: 0; margin: 0; }

.mjm-flow li {
	counter-increment: step;
	position: relative;
	padding: 0 0 16px 42px;
	border-left: 2px solid var(--line);
	margin-left: 13px;
}

.mjm-flow li:last-child { border-left-color: transparent; padding-bottom: 0; }

.mjm-flow li::before {
	content: counter(step);
	position: absolute;
	left: -14px;
	top: 0;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--navy);
	color: #fff;
	display: grid;
	place-items: center;
	font-size: 12.5px;
	font-weight: 700;
}

.mjm-flow b { display: block; font-size: 14.5px; margin-bottom: 3px; }
.mjm-flow span { font-size: 13px; color: var(--muted); line-height: 1.8; }

.mjm-faq details {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 13px 16px;
	margin-bottom: 9px;
	box-shadow: var(--shadow);
}

.mjm-faq summary { font-weight: 700; cursor: pointer; font-size: 14.5px; }
.mjm-faq p { margin: 10px 0 0; font-size: 13.5px; color: var(--muted); line-height: 1.85; }

/* ===================================================== 本文（固定ページ） */
.mjm-editorial { font-size: 15px; }

/*
 * 上下の余白。
 *
 * もともとは本文を包む <section> に付いていた（section { padding: 36px 0 }）。
 * ブロックに変換すると <section> が無くなるので、そのままでは余白が消える。
 *
 * section が残っているページには足さない。足すと二重になる。
 * /guide/ や /beginner/ のように section を区切りとして複数置いている
 * ページがあり、そこは今までどおりに保つ必要がある。
 */
.mjm-editorial:not(:has(> section)) { padding: 36px 0; }
/*
 * 見出しの下の紺の線。
 * 元サイトでは本文ページ11枚すべてに入っていたが、移植時に落ちていた。
 * 線が無いと、節の切れ目が本文に埋もれて読みにくい。
 */
.mjm-editorial h2 {
	font-size: 18px;
	margin: 32px 0 10px;
	padding-bottom: 7px;
	border-bottom: 2px solid var(--navy);
}

/* 最初の見出しは上に余白を取らない（リード文との間が空きすぎる） */
.mjm-editorial > h2:first-child { margin-top: 0; }
.mjm-editorial h3 { font-size: 16px; margin: 24px 0 8px; }
.mjm-editorial p { margin: 0 0 12px; line-height: 1.85; }
.mjm-editorial ul,
.mjm-editorial ol { margin: 0 0 14px; padding-left: 1.4em; line-height: 1.75; }
.mjm-editorial li { margin-bottom: 7px; }

/*
 * 本文の文字サイズ。
 *
 * 元サイトは一律ではなく、ページによって15pxと14pxを使い分けていた。
 * 条文や手順のように読む量が多いページを14pxにして、1行に入る字数を増やしている。
 * 15pxのページ（運営者情報・編集方針・広告について・選定基準）は
 * 上の .mjm-editorial の指定のまま。
 */
.mjm-page-privacy,
.mjm-page-terms,
.mjm-page-contact,
.mjm-page-guide,
.mjm-page-beginner { font-size: 14px; }

/* お問い合わせだけ箇条書きがさらに小さい */
.mjm-page-contact li { font-size: 13.5px; }
.mjm-editorial a { color: var(--teal); }
.mjm-editorial table { width: 100%; border-collapse: collapse; margin-bottom: 16px; }
.mjm-editorial th,
.mjm-editorial td { border: 1px solid var(--line); padding: 9px 12px; text-align: left; font-size: 13.5px; }
.mjm-editorial th { background: #F7FAFC; }

/*
 * 本文の中の小さな部品（リード文・補足・強調の囲み）。
 *
 * **ブロック変換とは関係なく、以前から効いていなかった。**
 * 元のAstroサイトでは各ページの <style> に書かれていたため、
 * WordPressへ移したときに漏れていた。クラスは本文に残っていたので、
 * 見た目だけが素のテキストに戻っていた。
 *
 * 値は元サイトの指定に合わせている（ページごとに13.5〜14.5pxと
 * ばらつきがあったので、本文用に一本化した）。
 */
.mjm-editorial .lead {
	font-size: 14.5px;
	color: var(--muted);
	line-height: 1.85;
	margin: 0 0 26px;
}

/* 補足。読み飛ばしてよい情報であることが分かるよう、地の色を敷く */
.mjm-editorial .note {
	font-size: 12.5px;
	color: var(--muted);
	background: var(--bg);
	border-radius: var(--radius);
	padding: 11px 14px;
	margin: 0 0 14px;
	line-height: 1.8;
}

/* 読み落とすと困ること（サーバーに送信されない等）を囲む */
.mjm-editorial .hl {
	background: var(--teal-l);
	border-left: 3px solid var(--teal);
	border-radius: var(--radius);
	padding: 13px 16px;
	margin-bottom: 14px;
}

.mjm-editorial .hl p { margin: 0; line-height: 1.8; }

.mjm-editorial .sm { font-size: 12.5px; color: var(--muted); }
.mjm-editorial .rev { font-size: 12px; color: var(--faint); margin-top: 24px; }

/* ===================================================== 本文のページ別の部品
 *
 * 元のAstroサイトは各ページの <style> にスタイルを閉じて書いていた。
 * WordPressへ移したときに本文のHTMLだけが移り、スタイルが残されたため、
 * 囲みや番号付きの手順が素のテキストに戻っていた。
 *
 * **ページごとに仕切って書くこと。** 同じクラス名が別の意味で使われている。
 * 仕切りは page.php が付けている mjm-page-<スラッグ>。
 *
 * 値は元サイトの指定をそのまま移している。
 * Astroでは scoped CSS のため !important が要った箇所があるが、
 * ここではクラスを2つ重ねて強さを確保しているので付けていない。
 */

/* ------------------------------------------------------------ 共通の部品 */

/*
 * グループブロックの中に入る、WordPress の中間の囲み。
 *
 * **これがあるせいで、親子の指定（> ）が外れる。**
 * 書いた形      : <div class="steps"><div class="step">
 * 実際に出る形  : <div class="steps"><div class="wp-block-group__inner-container"><div class="step">
 *
 * 対策は2つ必要。
 *   1. display:contents で中間の箱を無かったことにする（これが無いと
 *      .three の3列が効かない。中間の箱だけが1個の子として並んでしまう）
 *   2. セレクタは「> 」ではなく子孫（空白）で書く。display:contents は
 *      見た目を変えるだけで、HTMLの親子関係は変わらないため
 */
.mjm-editorial .wp-block-group > .wp-block-group__inner-container { display: contents; }

/* 出典のまとまり（よくある質問・用語集） */
.mjm-editorial .srcs {
	background: #F1F5F8;
	border-radius: var(--radius);
	padding: 16px 20px;
	font-size: 12.5px;
	color: var(--muted);
}

/*
 * b と strong の両方を書く理由。
 * ブロックに変換すると <b> は <strong> に置き換わる（編集画面が <b> を保持しないため）。
 * 片方だけだと、変換したページで太字の見た目が外れる。
 */
.mjm-editorial .srcs b,
.mjm-editorial .srcs strong { color: var(--txt); font-size: 13px; }
.mjm-editorial .srcs ul { margin: 9px 0 0; padding-left: 1.3em; }
.mjm-editorial .srcs li { margin-bottom: 6px; line-height: 1.75; }
.mjm-editorial .srcs a { color: var(--teal); }

/* ページ内の飛び先（よくある質問・用語集） */
.mjm-editorial .jump {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 26px;
}

.mjm-editorial .jump a {
	border: 1px solid var(--line);
	background: #fff;
	border-radius: var(--radius);
	padding: 8px 15px;
	font-size: 13px;
	text-decoration: none;
}

.mjm-editorial .jump a:hover { border-color: var(--teal); background: var(--teal-l); color: var(--teal); }

/*
 * ページ内リンクの飛び先が、固定ヘッダの下に隠れないようにする。
 *
 * **ヘッダの高さに合わせること。** 元サイトの値（80px）をそのまま
 * 移していたが、WordPress版のヘッダはこれより高く、飛んだ先の見出しが
 * ヘッダに隠れていた。実測は PC 61px / 900px以下 108px（メニューが2段になる）。
 * 少し余裕を足した値を入れている。
 */
.mjm-editorial .grp,
.mjm-editorial h2[id],
.mjm-editorial h3[id] { scroll-margin-top: 76px; }

.mjm-editorial .grp { margin-bottom: 30px; }

@media (max-width: 900px) {
	.mjm-editorial .grp,
	.mjm-editorial h2[id],
	.mjm-editorial h3[id] { scroll-margin-top: 122px; }
}

/* ------------------------------------------------------------ お問い合わせ */
.mjm-page-contact .cards { display: grid; gap: 14px; }

.mjm-page-contact .cc {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 18px 20px;
	box-shadow: var(--shadow);
}

.mjm-page-contact .cc h3 { font-size: 15.5px; margin: 0 0 8px; }
.mjm-page-contact .cc p { font-size: 13.5px; }
.mjm-page-contact .cc p:last-child { margin-bottom: 0; }

/*
 * この2つは .cc の中の <p> なので、上の .cc p より強く書く必要がある。
 * 元サイトが !important を付けていたのは同じ理由。
 * ここではクラスを足して強さで解決している。
 */
.mjm-page-contact .cc p.need { margin-bottom: 4px; font-size: 12.5px; color: var(--muted); }

.mjm-page-contact .cc p.how {
	font-size: 12.5px;
	color: var(--muted);
	background: var(--bg);
	border-radius: var(--radius);
	padding: 9px 12px;
}

/* ------------------------------------------------------------ 選定基準 */
/*
 * ここでの .sub2 は小見出し。基礎知識ページの .sub2 とは別物（下を参照）。
 *
 * セレクタが長いのには理由がある。このページはブロックに変換済みで、
 * 見出しに wp-block-heading が付く。ファイルの後ろにある
 * 「.mjm-editorial h3.wp-block-heading」と強さが並ぶと、後ろが勝ってしまう。
 * .mjm-editorial を重ねて（同じ要素に両方のクラスが付いている）強くしている。
 */
.mjm-editorial.mjm-page-selection-policy h3.sub2 {
	font-size: 15.5px;
	margin: 26px 0 8px;
	color: var(--navy);
}

/* ------------------------------------------------------------ よくある質問 */
.mjm-editorial .qa {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	margin-bottom: 9px;
}

.mjm-editorial .qa summary {
	padding: 15px 18px 15px 44px;
	font-size: 14.5px;
	font-weight: 700;
	cursor: pointer;
	list-style: none;
	position: relative;
	line-height: 1.6;
}

.mjm-editorial .qa summary::-webkit-details-marker { display: none; }

.mjm-editorial .qa summary::before {
	content: "Q";
	position: absolute;
	left: 18px;
	top: 14px;
	width: 20px;
	height: 20px;
	background: var(--navy);
	color: #fff;
	border-radius: var(--radius);
	font-size: 12px;
	text-align: center;
	line-height: 20px;
	font-weight: 700;
}

.mjm-editorial .qa summary::after {
	content: "＋";
	position: absolute;
	right: 18px;
	top: 15px;
	color: var(--faint);
	font-size: 13px;
}

.mjm-editorial .qa[open] summary::after { content: "−"; }
.mjm-editorial .qa[open] summary { border-bottom: 1px solid var(--line); }

.mjm-editorial .qa .a { padding: 15px 18px 16px 44px; position: relative; }

.mjm-editorial .qa .a::before {
	content: "A";
	position: absolute;
	left: 18px;
	top: 15px;
	width: 20px;
	height: 20px;
	background: var(--teal);
	color: #fff;
	border-radius: var(--radius);
	font-size: 12px;
	text-align: center;
	line-height: 20px;
	font-weight: 700;
}

.mjm-editorial .qa .a p { margin: 0; font-size: 13.5px; line-height: 1.9; color: var(--muted); }

/* ここでの .fin は注意書き。基礎知識・はじめての方へでは灰色の補足になる */
.mjm-page-faq .fin {
	background: #FFF8E8;
	border: 1px solid #F0DFB4;
	border-left: 3px solid #D19A2E;
	border-radius: var(--radius);
	padding: 13px 16px;
	font-size: 12.5px;
	color: #6B5522;
	line-height: 1.85;
	margin-top: 20px;
}

/* ------------------------------------------------------------ 用語集 */
.mjm-page-glossary .grp { margin-bottom: 32px; }
.mjm-page-glossary .glead { font-size: 12.5px; color: var(--muted); margin: 0 0 14px; line-height: 1.8; }
.mjm-page-glossary dl { margin: 0; }

/*
 * 用語1つ分のカード。
 * ブロックに開いたときに <div class="t"> から <dl class="t"> に変えている
 * （1語＝1ブロックにするため）。dl には既定の上下余白があるので消す。
 */
.mjm-page-glossary .t {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 15px 18px;
	box-shadow: var(--shadow);
	margin: 0 0 9px;
}

.mjm-page-glossary dt { font-size: 15px; font-weight: 700; margin-bottom: 6px; }
.mjm-page-glossary dt .rd { font-size: 11.5px; color: var(--faint); font-weight: 400; margin-left: 9px; }
.mjm-page-glossary dd { margin: 0; }
.mjm-page-glossary dd p { margin: 0; font-size: 13.5px; line-height: 1.85; color: var(--muted); }

/* 言い換え・別名 */
.mjm-page-glossary .dt2 {
	font-size: 12px;
	background: var(--teal-l);
	border-radius: var(--radius);
	padding: 7px 11px;
	margin-top: 8px;
	color: var(--teal);
}

.mjm-page-glossary .dt2 b,
.mjm-page-glossary .dt2 strong { font-weight: 700; }

/* 補足 */
.mjm-page-glossary .nt {
	font-size: 12.5px;
	background: var(--bg);
	border-radius: var(--radius);
	padding: 8px 12px;
	margin-top: 8px;
	color: var(--muted);
	line-height: 1.75;
}

.mjm-page-glossary .lk { margin-top: 9px; }
.mjm-page-glossary .lk a { font-size: 12.5px; font-weight: 700; text-decoration: none; color: var(--teal); }
.mjm-page-glossary .cav { margin: 12px 0 0; line-height: 1.85; border-top: 1px solid var(--line); padding-top: 11px; }

/* ------------------------------------------------------------ 基礎知識 */
/*
 * .gh は元サイトでは紺のページヘッダだったが、WordPress版では
 * 見出しはテーマが出しており、本文に残っているのは
 * リード文だけ。紺の帯をもう一度敷くと二重になるため、導入文として扱う。
 */
/*
 * 本文の幅は .mjm-main（--mjm-measure）が全ページ共通で持つ。
 *
 * **基礎知識と初心者向けだけ820pxにしていたのをやめた。**
 * 同じサイトの中でページごとに本文の幅と位置が違うと、
 * 行き来したときに画面が落ち着かない。
 */

.mjm-page-guide h3 { font-size: 15.5px; margin: 24px 0 10px; }

/* 目次 */
.mjm-page-guide .toc {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 16px 20px;
	box-shadow: var(--shadow);
	margin-top: 22px;
}

.mjm-page-guide .toc b { font-size: 12.5px; color: var(--muted); }
.mjm-page-guide .toc ol { margin: 8px 0 0; padding-left: 1.3em; }
.mjm-page-guide .toc li { margin-bottom: 5px; font-size: 13.5px; }

/* 数字を並べた囲み */
.mjm-page-guide .big { display: flex; gap: 12px; flex-wrap: wrap; margin: 0 0 14px; }

.mjm-page-guide .bg1 {
	flex: 1;
	min-width: 210px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 15px 18px;
	box-shadow: var(--shadow);
}

.mjm-page-guide .bg1 .l { font-size: 11.5px; color: var(--muted); margin-bottom: 3px; }
.mjm-page-guide .bg1 .v { font-size: 24px; font-weight: 800; color: var(--accent); line-height: 1.25; }
.mjm-page-guide .bg1 .v small { font-size: 13px; color: var(--muted); font-weight: 500; }

/* 施術範囲の一覧 */
.mjm-page-guide ul.cov { list-style: none; padding: 0; }

.mjm-page-guide ul.cov li {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 10px 14px;
	margin-bottom: 7px;
	font-size: 13px;
}

.mjm-page-guide ul.cov li b,
.mjm-page-guide ul.cov li strong { color: var(--accent); }
.mjm-page-guide ul.cov li span { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }

/* 表の中の折り返すセル。ここでの .sub2 は小さな注記（選定基準の .sub2 とは別物） */
.mjm-page-guide td.wrap-td {
	white-space: normal;
	min-width: 170px;
	font-size: 11.5px;
	color: var(--muted);
	line-height: 1.55;
}

.mjm-page-guide td.wrap-td .sub2 { display: block; font-size: 11px; color: var(--faint); margin-top: 2px; }

.mjm-page-guide .steps li { margin-bottom: 9px; }

.mjm-page-guide .fin,
.mjm-page-beginner .fin {
	background: #F1F5F8;
	border-radius: var(--radius);
	padding: 14px 16px;
	font-size: 12.5px;
	color: var(--muted);
	margin: 30px 0 0;
	line-height: 1.8;
}

/* ------------------------------------------------------------ はじめての方へ */
.mjm-page-beginner h3 { font-size: 15.5px; margin: 0 0 7px; }
.mjm-page-beginner .three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }

.mjm-page-beginner .tc {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 16px 18px;
	box-shadow: var(--shadow);
	position: relative;
}

.mjm-page-beginner .tc .n {
	position: absolute;
	top: -9px;
	left: 16px;
	background: var(--accent);
	color: #fff;
	font-size: 11.5px;
	font-weight: 700;
	border-radius: 999px;
	width: 22px;
	height: 22px;
	text-align: center;
	line-height: 22px;
}

.mjm-page-beginner .tc h3 { margin-top: 6px; font-size: 14.5px; }
.mjm-page-beginner .tc p { font-size: 12.5px; color: var(--muted); margin: 0; line-height: 1.75; }

/*
 * 手順。番号は数えて出すので、本文側に番号を書かなくてよい。
 *
 * **1項目の中に見出し・段落・ボタンが入るため、リストでは表せない。**
 * ブロックに開いたときに、箇条書き(ol/li)から入れ子のグループ(.steps .step)に
 * 置き換えている。CSSカウンタは要素の種類を問わず数えられるので、
 * 「STEP 1」「STEP 2」の採番は今までどおり自動で出る。
 */
.mjm-page-beginner .steps { counter-reset: st; margin: 0; padding: 0; }

.mjm-page-beginner .steps .step {
	counter-increment: st;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 18px 20px 18px 62px;
	box-shadow: var(--shadow);
	margin-bottom: 12px;
	position: relative;
}

.mjm-page-beginner .steps .step::before {
	content: "STEP " counter(st);
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 48px;
	background: var(--navy);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	writing-mode: vertical-rl;
	display: flex;
	align-items: center;
	justify-content: center;
	letter-spacing: .08em;
	border-radius: var(--radius);
}

.mjm-page-beginner .acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

.mjm-page-beginner .ac2 {
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 8px 14px;
	font-size: 12.5px;
	text-decoration: none;
	background: #fff;
}

.mjm-page-beginner .ac2:hover { border-color: var(--teal); background: var(--teal-l); color: var(--teal); }

.mjm-page-beginner .range { display: flex; gap: 12px; flex-wrap: wrap; margin: 12px 0 8px; }

.mjm-page-beginner .rg {
	flex: 1;
	min-width: 200px;
	background: var(--bg);
	border-radius: var(--radius);
	padding: 12px 15px;
}

.mjm-page-beginner .rg .l { font-size: 11.5px; color: var(--muted); margin-bottom: 2px; }
.mjm-page-beginner .rg .v { font-size: 19px; font-weight: 800; color: var(--accent); line-height: 1.3; }
.mjm-page-beginner .rg .v small { font-size: 12px; color: var(--muted); font-weight: 500; }

@media (max-width: 900px) {
	.mjm-page-beginner .three { grid-template-columns: 1fr; }
	.mjm-page-beginner .steps .step { padding: 16px 16px 16px 50px; }
}

/* ------------------------------------------------------------ トップページ
 *
 * トップは front-page.php が出しており、.mjm-editorial で包んでいない。
 * 仕切りは .mjm-front になる。
 */
.mjm-front .qa {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	margin-bottom: 8px;
}

.mjm-front .qa summary {
	padding: 14px 18px 14px 42px;
	font-size: 14.5px;
	font-weight: 700;
	cursor: pointer;
	list-style: none;
	position: relative;
	line-height: 1.6;
}

.mjm-front .qa summary::-webkit-details-marker { display: none; }

.mjm-front .qa summary::before {
	content: "Q";
	position: absolute;
	left: 16px;
	top: 13px;
	width: 20px;
	height: 20px;
	background: var(--navy);
	color: #fff;
	border-radius: var(--radius);
	font-size: 12px;
	text-align: center;
	line-height: 20px;
	font-weight: 700;
}

.mjm-front .qa summary::after {
	content: "＋";
	position: absolute;
	right: 18px;
	top: 14px;
	color: var(--faint);
	font-size: 13px;
}

.mjm-front .qa[open] summary::after { content: "−"; }
.mjm-front .qa[open] summary { border-bottom: 1px solid var(--line); }

.mjm-front .qa-a { padding: 14px 18px 15px 42px; }
.mjm-front .qa-a p { margin: 0; font-size: 13.5px; line-height: 1.9; color: var(--muted); }

.mjm-front .faqs { display: grid; gap: 8px; }
.mjm-front .chk { list-style: none; padding: 0; }
.mjm-front .mrt { list-style: none; padding: 0; }
.mjm-front .lbl { font-size: 13px; font-weight: 700; color: var(--navy); margin: 18px 0 7px; }
.mjm-front .flow { counter-reset: fl; list-style: none; padding: 0; }

/* ============================================ 料金表
 *
 * **施術範囲を省いて列を減らす、という解決はしない。**
 * 「料金は施術範囲とセットでしか出さない」が当サイトの前提のため、
 * 範囲を隠すと比較として成立しなくなる。
 *
 * **狭い画面でも表のまま出す。**
 * 以前は720px以下で1社=1枚のカードに組み替えていたが、
 * スマホでもPCと同じ表で見たいという判断に合わせてやめた。
 * 列は .tscroll の横スクロールで見る（スクロールの案内も出る）。
 *
 * 金額の列を先に置き、長いプラン・施術範囲を右端にしてあるので
 * （price-table.php ほか）、スクロールせずに総額まで読める。
 * data-label はテンプレート側に残してあるため、カードに戻したくなったら
 * このファイルにメディアクエリを足すだけでよい。
 */
/*
 * 本文の表の指定を、ショートコードが出す表（.cmp）に当てない。
 *
 * **本文ページに置いたときだけ見た目が変わってしまう。**
 * .mjm-editorial td（全周に罫線）が table.cmp td（下線のみ）と
 * 同じ強さで、style.css が後に読まれるため勝っていた。
 * その結果、同じ料金表でも /price/ では格子、部位ページでは下線だけ、
 * という食い違いが起きていた。tokens.css の値に戻す。
 */
.mjm-editorial table.cmp { margin: 0; }

.mjm-editorial table.cmp th,
.mjm-editorial table.cmp td {
	border: 0;
	border-bottom: 1px solid var(--line);
	padding: 11px 13px;
	font-size: 13px;
}

.mjm-editorial table.cmp tbody tr:last-child td { border-bottom: 0; }

/* スマホでは施設名の列を細くする
 *
 * 施設名の列は上限250pxで、「湘南美容クリニック」のような長い名前だと
 * 上限まで広がる。**390pxの画面では7割を1列が占めていた。**
 * そのせいで、列を並べ替えても実質総額が最初の画面に入らなかった。
 *
 * 150pxまで下げ、名前を折り返させる。150＋種別81＋実質総額100＝331pxで、
 * 画面の内側（390pxのとき357px）に実質総額まで収まる。
 *
 * **table.cmp を頭に付けるのは、強さを合わせるため。**
 * table.cmp td{white-space:nowrap} が td.nm{white-space:normal} より強く、
 * クラスだけでは折り返しの指定が効かない。
 */
@media (max-width: 480px) {

	/*
	 * **下限を0にしてはいけない。**
	 * 最初 min-width:0 にしたところ、表の計算が列を54pxまで潰し、
	 * 施設名が1文字ずつ縦に折り返して読めなくなった。
	 * 140pxを下限にする（140＋種別81＋実質総額100＝321pxで画面に収まる）。
	 */
	table.cmp td.nm {
		min-width: 140px;
		max-width: 150px;
		white-space: normal;
	}

	/* 見出しも折り返させる。折り返さないと、ここが列幅の下限になる */
	table.cmp thead th:first-child { white-space: normal; }

	/*
	 * ロゴを名前の上に積む。
	 * 横に並べたままだと、ロゴ36pxと余白を引いた残り70pxほどに
	 * 名前が入ることになり、4〜5文字で折り返して行数が増える。
	 * 縦に積めば名前に幅をすべて使える。
	 */
	table.cmp td.nm .mjm-brandcell {
		display: block;
	}

	table.cmp td.nm .mjm-brandcell .lg {
		display: block;
		margin-bottom: 4px;
	}

	/*
	 * 運営会社名は狭い画面では隠す。
	 *
	 * 「TCB東京中央美容外科（医療法人社団創彩会／医療法人社団
	 * メディカルフロンティア ほか）」のように長く、140pxの列だと
	 * 5行ほどになって、その行だけ極端に高くなる。
	 *
	 * **.sub をまとめて隠さない。** 同じクラスで区分のバッジや院数も
	 * 出しており、そちらは狭い画面でも必要。運営会社名にだけ付けた
	 * .op を狙う（Mojama_Brand_Logo::cell の $sub_class）。
	 * 運営会社は各社のページに載っているので、情報は失われない。
	 */
	table.cmp td.nm .sub.op { display: none; }
}


/* ===================================================== サイトマップ */
.mjm-links {
	list-style: none;
	padding: 0;
	margin: 0 0 16px;
	display: flex;
	flex-wrap: wrap;
	gap: 7px 16px;
}

.mjm-links a { font-size: 13.5px; color: var(--teal); text-decoration: none; }
.mjm-links a:hover { text-decoration: underline; }

/* ===================================================== 投稿一覧 */
.mjm-postlist { display: grid; gap: 12px; }

.mjm-postcard {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 17px;
	box-shadow: var(--shadow);
}

.mjm-postcard h2 { font-size: 17px; margin: 0 0 6px; }
.mjm-postcard h2 a { text-decoration: none; }
.mjm-postcard p { margin: 0; font-size: 13.5px; color: var(--muted); }

.mjm-searchform { display: flex; gap: 8px; max-width: 420px; }

.mjm-searchform input {
	flex: 1;
	padding: 10px 12px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	font-size: 14px;
}

.mjm-searchform button {
	background: var(--navy);
	color: #fff;
	border: 0;
	border-radius: var(--radius);
	padding: 10px 20px;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
}

/* ===================================================== トップページの注記 */
.topnote {
	background: #F1F5F8;
	border-radius: var(--radius);
	padding: 13px 16px;
	font-size: 12.5px;
	color: var(--muted);
	margin-bottom: 16px;
	line-height: 1.85;
}

.topnote p { margin: 0; }
.topnote a { color: var(--teal); }

/* =====================================================================
   口コミ（ユーザー一次情報DB）
   ---------------------------------------------------------------------
   公式情報と見た目で区別する。利用者の申告であることが
   ひと目で分かるよう、公式データの表とはカードの質感を変えている。
   ===================================================================== */

.bdg.rv { background: #7A4B1F; }
.bdg.src { background: #6B5522; }

/* ---------------------------------------------------- 評価サマリー */
.mjm-rv-summary {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 20px;
	box-shadow: var(--shadow);
	margin-bottom: 18px;
}

.mjm-rv-head {
	display: flex;
	gap: 24px;
	align-items: flex-start;
	flex-wrap: wrap;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--line);
}

.mjm-rv-count .n { font-size: 30px; font-weight: 800; line-height: 1.1; }
.mjm-rv-count .u { font-size: 14px; font-weight: 700; margin-left: 2px; }
.mjm-rv-count .l { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; }

.mjm-rv-overall { flex: 1; min-width: 200px; }
.mjm-rv-overall .v { font-size: 34px; font-weight: 800; color: var(--accent); line-height: 1.1; }
.mjm-rv-overall .l { font-size: 12px; color: var(--muted); margin-left: 8px; }
.mjm-rv-overall .c { display: block; font-size: 11.5px; color: var(--faint); margin-top: 4px; line-height: 1.6; }
.mjm-rv-overall.is-few .l { font-size: 14px; font-weight: 700; color: var(--txt); margin: 0; }

.mjm-rv-source {
	font-size: 12px;
	color: var(--muted);
	margin: 12px 0 0;
	line-height: 1.7;
}

.mjm-rv-source .c { display: block; font-size: 11.5px; color: var(--faint); }

.mjm-rv-h { font-size: 14px; margin: 18px 0 9px; }

/* 棒グラフ。CSSだけで描いている（JavaScript不要） */
.mjm-rv-bars,
.mjm-rv-dist {
	list-style: none;
	padding: 0;
	margin: 0;
}

/*
 * ラベル列は固定幅にする。
 *
 * **max-content にしてはいけない。** グリッドは li ごとに閉じているので、
 * 行ごとに違う幅になり、棒の開始位置がそろわなくなる。
 * 幅は一番長いラベル「予約の取りやすさ」（13pxで約108px）が
 * 折り返さない値にしてある。ラベルを増やすときは実測して決めること。
 */
.mjm-rv-bars li,
.mjm-rv-dist li {
	display: grid;
	grid-template-columns: 9em 1fr 3em;
	gap: 10px;
	align-items: center;
	margin-bottom: 7px;
	font-size: 13px;
}

.mjm-rv-dist li { grid-template-columns: 6em 1fr 3em 4em; }

/*
 * 改行はグリッドの桁を壊すので出さない。
 *
 * この行は <span> だけで組んでいる。本文整形（wpautop）が
 * <span> と <span> のあいだの改行を <br> に変えると、
 * その <br> がグリッドアイテムとして1マスを占め、
 * 棒と数値が1つずつ後ろへずれる。
 * 根本の原因はPHP側で直してあるが、ここでも止めておく。
 */
.mjm-rv-bars li > br,
.mjm-rv-dist li > br { display: none; }

.mjm-rv-bars .lb,
.mjm-rv-dist .lb { color: var(--muted); }

.mjm-rv-bars .bar,
.mjm-rv-dist .bar {
	background: var(--bg);
	border-radius: var(--radius);
	height: 10px;
	overflow: hidden;
}

.mjm-rv-bars .fill,
.mjm-rv-dist .fill {
	display: block;
	height: 100%;
	background: var(--teal);
	border-radius: var(--radius);
}

.mjm-rv-dist .fill { background: var(--navy-l); }

.mjm-rv-bars .vv,
.mjm-rv-dist .vv { font-weight: 800; text-align: right; }
.mjm-rv-bars .vv.na { font-weight: 400; color: var(--faint); }
.mjm-rv-dist .n { font-size: 11.5px; color: var(--faint); text-align: right; }

.mjm-rv-note {
	background: #FFF8E8;
	border: 1px solid #F0DFB4;
	border-left: 3px solid #D19A2E;
	border-radius: var(--radius);
	padding: 11px 14px;
	font-size: 12px;
	color: #6B5522;
	line-height: 1.8;
	margin: 14px 0 0;
}

@media (max-width: 600px) {
	.mjm-rv-bars li { grid-template-columns: 9em 1fr 2.6em; font-size: 12.5px; }
	.mjm-rv-dist li { grid-template-columns: 5em 1fr 2.6em 3.4em; font-size: 12.5px; }
}

/* ------------------------------------------------------------ ロゴ
 * 各社の正規ロゴが登録されていればそれを、無ければ頭文字の印を出す。
 * **印はロゴではない。** 行を見分けるための目印なので、控えめに置く。
 */
.mjm-logo-img,
.mjm-logo-mark {
	display: block;
	border-radius: var(--radius);
	object-fit: contain;
	background: #fff;
}

.mjm-logo-img { border: 1px solid var(--line); }

/* カード（TOP3・条件別一覧）の見出し */
.card .bhead {
	display: flex;
	align-items: center;
	gap: 11px;
	margin-bottom: 2px;
}

.card .bhead .lg { flex: none; }
.card .bhead .bname { margin: 0; min-width: 0; }

/* ブランドページの見出し */
/*
 * ロゴの下に白い台を敷く。
 *
 * ヒーローの背景が紺なので、紺の目印はそのままだと沈む。
 * 各社の正規ロゴも、白背景を前提にした透過PNGが多く、
 * 紺の上に置くと読めなくなる。
 */
/* 診断結果のカード */
.rchead {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 2px;
}

.rchead .lg { flex: none; }
.rchead .rcname { margin: 0; min-width: 0; }

/* ------------------------------------------------------ 口コミ1件 */
.mjm-rv-item {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 16px 18px;
	box-shadow: var(--shadow);
	margin-bottom: 12px;
}

/* 一覧（施設をまたぐ）では、どの施設の口コミかを左に固定して読ませる */
.mjm-rv-item.has-brand {
	display: grid;
	grid-template-columns: 190px 1fr;
	gap: 18px;
}

.mjm-rv-side .lg { display: block; margin-bottom: 8px; }

.mjm-rv-side .bn {
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.5;
	margin: 0;
}

.mjm-rv-side .bc {
	font-size: 11.5px;
	color: var(--muted);
	margin: 2px 0 10px;
}

.mjm-rv-side .more {
	font-size: 11.5px;
	color: var(--teal);
	font-weight: 700;
	text-decoration: none;
	line-height: 1.6;
	display: inline-block;
}

.mjm-rv-side .more:hover { text-decoration: underline; }

.mjm-rv-item-head {
	display: flex;
	gap: 10px;
	align-items: center;
	flex-wrap: wrap;
	margin-bottom: 10px;
}

.mjm-rv-item-head time {
	margin-left: auto;
	font-size: 11.5px;
	color: var(--faint);
}

/*
 * 星。
 *
 * 0.5刻みで塗る。四捨五入すると 3.5 と 3.9 が同じ見た目になり、
 * 数字と印象が食い違う。
 */
.mjm-rv-stars-view { display: inline-flex; gap: 1px; font-size: 16px; line-height: 1; }
.mjm-rv-stars-view .s { color: var(--line); }
.mjm-rv-stars-view .s.on { color: #F5A623; }
.mjm-rv-stars-view .s.half {
	background: linear-gradient(90deg, #F5A623 50%, var(--line) 50%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.mjm-rv-score {
	font-weight: 800;
	font-size: 16px;
	color: var(--txt);
	flex-shrink: 0;
}

.mjm-rv-item-head .sv {
	font-size: 11px;
	color: #6B5522;
	background: #FFF8E8;
	border-radius: var(--radius);
	padding: 2px 8px;
}

.mjm-rv-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 10px;
	align-items: center;
	font-size: 12px;
}

.mjm-rv-brand,
.mjm-rv-shop { color: var(--teal); text-decoration: none; font-weight: 700; }
.mjm-rv-brand:hover,
.mjm-rv-shop:hover { text-decoration: underline; }

.mjm-rv-item-ratings {
	list-style: none;
	padding: 0;
	margin: 0 0 10px;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.mjm-rv-item-ratings li {
	background: var(--bg);
	border-radius: var(--radius);
	padding: 4px 10px;
	font-size: 12px;
}

.mjm-rv-item-ratings .lb { color: var(--muted); }
.mjm-rv-item-ratings .vv { font-weight: 800; margin-left: 5px; }

/*
 * 事実の札。
 *
 * 拾い読みするときに効くのは本文より先にこの並びなので、
 * 表形式をやめて横一列の札にした。入っていない項目は札ごと出さない。
 */
.mjm-rv-facts {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 10px;
	padding: 0;
}

.mjm-rv-facts li {
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 4px 11px;
	font-size: 12px;
	line-height: 1.6;
	white-space: nowrap;
}

.mjm-rv-facts .k { color: var(--muted); margin-right: 5px; }
.mjm-rv-facts .v { font-weight: 700; }

.mjm-rv-body { font-size: 13.5px; line-height: 1.9; margin: 0 0 10px; }

.mjm-rv-hidden {
	font-size: 12px;
	color: var(--muted);
	background: var(--bg);
	border-radius: var(--radius);
	padding: 9px 12px;
	margin: 0 0 10px;
	line-height: 1.7;
}

.mjm-rv-foot {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
	font-size: 11.5px;
	color: var(--faint);
	margin: 0;
}

.mjm-rv-foot .sv { color: #6B5522; }

/* --------------------------------------------------- 口コミの比較表
 * 「順位」は口コミ件数の多い順という意味で、当サイトの評価ではない。
 * 表の下の注記と必ずセットで出すこと。
 */
.mjm-rank .cmp th,
.mjm-rank .cmp td { vertical-align: middle; }

.mjm-rank .rk {
	width: 58px;
	text-align: center;
	font-weight: 700;
	color: var(--muted);
}

.mjm-rank .mjm-crown { font-size: 19px; line-height: 1; }
.mjm-rank .mjm-crown.r1 { color: #E8B320; }
.mjm-rank .mjm-crown.r2 { color: #9AA7B2; }
.mjm-rank .mjm-crown.r3 { color: #C08A52; }

.mjm-rank .nmh { min-width: 190px; }

.mjm-brandcell {
	display: flex;
	align-items: center;
	gap: 10px;
}

.mjm-brandcell .lg { flex: none; }

.mjm-brandcell .tx a {
	font-weight: 700;
	text-decoration: none;
	color: var(--txt);
	line-height: 1.45;
	display: block;
}

.mjm-brandcell .tx a:hover { color: var(--accent); text-decoration: underline; }
.mjm-brandcell .tx .sub { display: block; font-size: 11px; color: var(--muted); }

/* 評価の数値。総合だけ背景を付けて、拾い読みの起点にする */
.mjm-sc { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; white-space: nowrap; }
.mjm-sc .st { color: #F5A623; font-size: 12px; }

.mjm-sc.is-strong {
	background: #FFF6E6;
	border: 1px solid #F3DCA9;
	border-radius: var(--radius);
	padding: 5px 11px;
	font-size: 15px;
}

.mjm-sc.is-strong .st { font-size: 14px; }

.mjm-rank .dt { width: 128px; }

.mjm-rank-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	background: var(--navy);
	color: #fff;
	text-decoration: none;
	border-radius: var(--radius);
	padding: 8px 12px;
	font-size: 12.5px;
	font-weight: 700;
	white-space: nowrap;
}

.mjm-rank-btn:hover { background: var(--navy-d); }

@media (max-width: 720px) {
	/* 左の施設名を固定して、横に送っても何の行か分かるようにする */
	.mjm-rv-item.has-brand { grid-template-columns: 1fr; gap: 12px; }

	/*
	 * 1列目はロゴの実寸にあわせる。
	 * px で決め打ちすると、呼び出し側が大きさを変えたときに文字と重なる。
	 */
	.mjm-rv-side {
		display: grid;
		grid-template-columns: auto 1fr;
		gap: 2px 11px;
		align-items: center;
		padding-bottom: 12px;
		border-bottom: 1px solid var(--line);
	}

	.mjm-rv-side .lg { grid-row: span 2; margin: 0; }
	.mjm-rv-side .bc { margin: 0; }
	.mjm-rv-side .more { grid-column: 1 / -1; margin-top: 6px; }

	.mjm-rv-facts li { white-space: normal; }
}

/* ------------------------------------------------------ 一覧の操作 */
.mjm-rv-filters {
	display: flex;
	flex-direction: column;
	gap: 9px;
	margin-bottom: 14px;
}

.mjm-rv-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	align-items: center;
}

.mjm-rv-filter .lb {
	font-size: 11.5px;
	color: var(--muted);
	font-weight: 700;
	min-width: 3.6em;
}

.mjm-rv-filter .chip { font-size: 12.5px; padding: 5px 11px; text-decoration: none; }
.mjm-rv-filter .chip.is-on { background: var(--navy); color: #fff; border-color: var(--navy); }
.mjm-rv-filter .chip.is-on .c { color: rgba(255, 255, 255, .75); }

/* ===================================================== フッターの内部リンク
 *
 * テーマのフッターの中に入る（arkhe_start_footer_inner）。
 * 背景は自分で持つ。テーマのフッター色の設定に関わらず、
 * 白文字が読める状態を保つため。
 */
.mjm-fnav {
	background: var(--navy);
	color: #fff;
	padding: 30px 0 22px;
}

.mjm-fnav__inner {
	max-width: calc(var(--mjm-measure, 900px) + 40px);
	margin-inline: auto;
	padding-inline: 20px;
}

.mjm-fcols {
	display: grid;
	/* 列数は固定しない。部位別の列を足して5列になっても、1枚だけ
	   次の行に落ちないようにする（4列固定だとそうなる）。 */
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 20px;
	padding-bottom: 20px;
	border-bottom: 1px solid rgba(255, 255, 255, .14);
}

.mjm-fcol {
	display: flex;
	flex-direction: column;
	gap: 7px;
	min-width: 0;
}

.mjm-fcol b {
	font-size: 11.5px;
	color: rgba(255, 255, 255, .55);
	letter-spacing: .06em;
	margin-bottom: 2px;
}

.mjm-fcol a {
	color: rgba(255, 255, 255, .88);
	text-decoration: none;
	font-size: 12.5px;
	line-height: 1.5;
}

.mjm-fcol a:hover { color: #fff; text-decoration: underline; }

.mjm-fdisc {
	background: rgba(0, 0, 0, .18);
	border-radius: var(--radius);
	padding: 12px 15px;
	font-size: 11.5px;
	color: rgba(255, 255, 255, .75);
	margin-top: 16px;
	line-height: 1.7;
}

.mjm-fdisc p { margin: 0; }
.mjm-fdisc p + p { margin-top: 6px; }
.mjm-fdisc a { color: #9FD6CD; }

.mjm-fmeta {
	font-size: 11.5px;
	color: rgba(255, 255, 255, .6);
	line-height: 1.9;
	margin: 16px 0 0;
}

@media (max-width: 760px) {
	.mjm-fcols { grid-template-columns: repeat(2, 1fr); gap: 22px 16px; }
}

/* ===================================================== タブの切り替え（共通）
 *
 * **JavaScriptを使わない。** ラジオとCSSだけで切り替える。
 * ラジオはタブとパネルより前に置いてあり、:checked ~ で後ろの兄弟を選ぶ。
 * 動かない環境でも、既定で開いているパネルの中身はそのまま読める。
 *
 * **部位の切り替え（.mjm-partpick）と、料金表の回数タブ（.mjm-plantab）が
 * これを共有する。** 見た目も操作も同じ部品を2つ書くと、
 * 片方だけ直したときに挙動が食い違う。
 * それぞれに固有の中身の体裁だけを、下のブロックで足す。
 */
.mjm-tabs__tog {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.mjm-tabs__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 14px 0 0;
}

.mjm-tabs__tab {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 7px 13px;
	background: #fff;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
}

.mjm-tabs__tab:hover { border-color: var(--navy-l); }
.mjm-tabs__tab .c { font-size: 11.5px; color: var(--muted); font-weight: 400; }

/* パネルは既定で隠し、選ばれたものだけ出す。
 *
 * **idでは書けない。** idはページ内で重複しないよう毎回変わるため、
 * 何番目のラジオかで対応づける。ラジオとタブとパネルは同じ順で並べてある。
 * **組数を超えたタブは、押しても何も開かない。**
 * 壊れ方が静かなので、余裕を持たせたうえで、
 * plan-table.php 側でも組数（$tab_limit）を見て止めている。
 *
 * 部位は最大11。料金表の回数タブは、実測（2026年10月・54都道府県）で
 * 最大12（東京都・神奈川県のヒゲ。回数10種＋無制限＋すべて）。
 * 社を増やすと回数の種類も増えるので、16組ぶん書いておく。
 */
.mjm-tabs__panel { display: none; }

.mjm-tabs__tog:nth-of-type(1):checked ~ .mjm-tabs__panels .mjm-tabs__panel:nth-child(1),
.mjm-tabs__tog:nth-of-type(2):checked ~ .mjm-tabs__panels .mjm-tabs__panel:nth-child(2),
.mjm-tabs__tog:nth-of-type(3):checked ~ .mjm-tabs__panels .mjm-tabs__panel:nth-child(3),
.mjm-tabs__tog:nth-of-type(4):checked ~ .mjm-tabs__panels .mjm-tabs__panel:nth-child(4),
.mjm-tabs__tog:nth-of-type(5):checked ~ .mjm-tabs__panels .mjm-tabs__panel:nth-child(5),
.mjm-tabs__tog:nth-of-type(6):checked ~ .mjm-tabs__panels .mjm-tabs__panel:nth-child(6),
.mjm-tabs__tog:nth-of-type(7):checked ~ .mjm-tabs__panels .mjm-tabs__panel:nth-child(7),
.mjm-tabs__tog:nth-of-type(8):checked ~ .mjm-tabs__panels .mjm-tabs__panel:nth-child(8),
.mjm-tabs__tog:nth-of-type(9):checked ~ .mjm-tabs__panels .mjm-tabs__panel:nth-child(9),
.mjm-tabs__tog:nth-of-type(10):checked ~ .mjm-tabs__panels .mjm-tabs__panel:nth-child(10),
.mjm-tabs__tog:nth-of-type(11):checked ~ .mjm-tabs__panels .mjm-tabs__panel:nth-child(11),
.mjm-tabs__tog:nth-of-type(12):checked ~ .mjm-tabs__panels .mjm-tabs__panel:nth-child(12),
.mjm-tabs__tog:nth-of-type(13):checked ~ .mjm-tabs__panels .mjm-tabs__panel:nth-child(13),
.mjm-tabs__tog:nth-of-type(14):checked ~ .mjm-tabs__panels .mjm-tabs__panel:nth-child(14),
.mjm-tabs__tog:nth-of-type(15):checked ~ .mjm-tabs__panels .mjm-tabs__panel:nth-child(15),
.mjm-tabs__tog:nth-of-type(16):checked ~ .mjm-tabs__panels .mjm-tabs__panel:nth-child(16) {
	display: block;
}

/* 選ばれているタブを濃紺で塗る（どれを見ているかが分かるように） */
.mjm-tabs__tog:nth-of-type(1):checked ~ .mjm-tabs__tabs .mjm-tabs__tab:nth-child(1),
.mjm-tabs__tog:nth-of-type(2):checked ~ .mjm-tabs__tabs .mjm-tabs__tab:nth-child(2),
.mjm-tabs__tog:nth-of-type(3):checked ~ .mjm-tabs__tabs .mjm-tabs__tab:nth-child(3),
.mjm-tabs__tog:nth-of-type(4):checked ~ .mjm-tabs__tabs .mjm-tabs__tab:nth-child(4),
.mjm-tabs__tog:nth-of-type(5):checked ~ .mjm-tabs__tabs .mjm-tabs__tab:nth-child(5),
.mjm-tabs__tog:nth-of-type(6):checked ~ .mjm-tabs__tabs .mjm-tabs__tab:nth-child(6),
.mjm-tabs__tog:nth-of-type(7):checked ~ .mjm-tabs__tabs .mjm-tabs__tab:nth-child(7),
.mjm-tabs__tog:nth-of-type(8):checked ~ .mjm-tabs__tabs .mjm-tabs__tab:nth-child(8),
.mjm-tabs__tog:nth-of-type(9):checked ~ .mjm-tabs__tabs .mjm-tabs__tab:nth-child(9),
.mjm-tabs__tog:nth-of-type(10):checked ~ .mjm-tabs__tabs .mjm-tabs__tab:nth-child(10),
.mjm-tabs__tog:nth-of-type(11):checked ~ .mjm-tabs__tabs .mjm-tabs__tab:nth-child(11),
.mjm-tabs__tog:nth-of-type(12):checked ~ .mjm-tabs__tabs .mjm-tabs__tab:nth-child(12),
.mjm-tabs__tog:nth-of-type(13):checked ~ .mjm-tabs__tabs .mjm-tabs__tab:nth-child(13),
.mjm-tabs__tog:nth-of-type(14):checked ~ .mjm-tabs__tabs .mjm-tabs__tab:nth-child(14),
.mjm-tabs__tog:nth-of-type(15):checked ~ .mjm-tabs__tabs .mjm-tabs__tab:nth-child(15),
.mjm-tabs__tog:nth-of-type(16):checked ~ .mjm-tabs__tabs .mjm-tabs__tab:nth-child(16) {
	background: var(--navy);
	color: #fff;
	border-color: var(--navy);
}

.mjm-tabs__tog:nth-of-type(1):checked ~ .mjm-tabs__tabs .mjm-tabs__tab:nth-child(1) .c,
.mjm-tabs__tog:nth-of-type(2):checked ~ .mjm-tabs__tabs .mjm-tabs__tab:nth-child(2) .c,
.mjm-tabs__tog:nth-of-type(3):checked ~ .mjm-tabs__tabs .mjm-tabs__tab:nth-child(3) .c,
.mjm-tabs__tog:nth-of-type(4):checked ~ .mjm-tabs__tabs .mjm-tabs__tab:nth-child(4) .c,
.mjm-tabs__tog:nth-of-type(5):checked ~ .mjm-tabs__tabs .mjm-tabs__tab:nth-child(5) .c,
.mjm-tabs__tog:nth-of-type(6):checked ~ .mjm-tabs__tabs .mjm-tabs__tab:nth-child(6) .c,
.mjm-tabs__tog:nth-of-type(7):checked ~ .mjm-tabs__tabs .mjm-tabs__tab:nth-child(7) .c,
.mjm-tabs__tog:nth-of-type(8):checked ~ .mjm-tabs__tabs .mjm-tabs__tab:nth-child(8) .c,
.mjm-tabs__tog:nth-of-type(9):checked ~ .mjm-tabs__tabs .mjm-tabs__tab:nth-child(9) .c,
.mjm-tabs__tog:nth-of-type(10):checked ~ .mjm-tabs__tabs .mjm-tabs__tab:nth-child(10) .c,
.mjm-tabs__tog:nth-of-type(11):checked ~ .mjm-tabs__tabs .mjm-tabs__tab:nth-child(11) .c,
.mjm-tabs__tog:nth-of-type(12):checked ~ .mjm-tabs__tabs .mjm-tabs__tab:nth-child(12) .c,
.mjm-tabs__tog:nth-of-type(13):checked ~ .mjm-tabs__tabs .mjm-tabs__tab:nth-child(13) .c,
.mjm-tabs__tog:nth-of-type(14):checked ~ .mjm-tabs__tabs .mjm-tabs__tab:nth-child(14) .c,
.mjm-tabs__tog:nth-of-type(15):checked ~ .mjm-tabs__tabs .mjm-tabs__tab:nth-child(15) .c,
.mjm-tabs__tog:nth-of-type(16):checked ~ .mjm-tabs__tabs .mjm-tabs__tab:nth-child(16) .c {
	color: rgba(255, 255, 255, .75);
}

/* キーボードで操作したときに、どのタブにいるか見えるようにする */
.mjm-tabs__tog:focus-visible ~ .mjm-tabs__tabs .mjm-tabs__tab { outline: none; }
.mjm-tabs__tog:nth-of-type(1):focus-visible ~ .mjm-tabs__tabs .mjm-tabs__tab:nth-child(1),
.mjm-tabs__tog:nth-of-type(2):focus-visible ~ .mjm-tabs__tabs .mjm-tabs__tab:nth-child(2),
.mjm-tabs__tog:nth-of-type(3):focus-visible ~ .mjm-tabs__tabs .mjm-tabs__tab:nth-child(3),
.mjm-tabs__tog:nth-of-type(4):focus-visible ~ .mjm-tabs__tabs .mjm-tabs__tab:nth-child(4),
.mjm-tabs__tog:nth-of-type(5):focus-visible ~ .mjm-tabs__tabs .mjm-tabs__tab:nth-child(5),
.mjm-tabs__tog:nth-of-type(6):focus-visible ~ .mjm-tabs__tabs .mjm-tabs__tab:nth-child(6),
.mjm-tabs__tog:nth-of-type(7):focus-visible ~ .mjm-tabs__tabs .mjm-tabs__tab:nth-child(7),
.mjm-tabs__tog:nth-of-type(8):focus-visible ~ .mjm-tabs__tabs .mjm-tabs__tab:nth-child(8),
.mjm-tabs__tog:nth-of-type(9):focus-visible ~ .mjm-tabs__tabs .mjm-tabs__tab:nth-child(9),
.mjm-tabs__tog:nth-of-type(10):focus-visible ~ .mjm-tabs__tabs .mjm-tabs__tab:nth-child(10),
.mjm-tabs__tog:nth-of-type(11):focus-visible ~ .mjm-tabs__tabs .mjm-tabs__tab:nth-child(11),
.mjm-tabs__tog:nth-of-type(12):focus-visible ~ .mjm-tabs__tabs .mjm-tabs__tab:nth-child(12),
.mjm-tabs__tog:nth-of-type(13):focus-visible ~ .mjm-tabs__tabs .mjm-tabs__tab:nth-child(13),
.mjm-tabs__tog:nth-of-type(14):focus-visible ~ .mjm-tabs__tabs .mjm-tabs__tab:nth-child(14),
.mjm-tabs__tog:nth-of-type(15):focus-visible ~ .mjm-tabs__tabs .mjm-tabs__tab:nth-child(15),
.mjm-tabs__tog:nth-of-type(16):focus-visible ~ .mjm-tabs__tabs .mjm-tabs__tab:nth-child(16) {
	outline: 2px solid var(--navy-l);
	outline-offset: 2px;
}

/* ----- 料金表の回数タブ ----------------------------------------------
 *
 * **パネルに枠を付けない。** 中身が表そのもので、表には枠がある。
 * 枠の中に枠が入ると、二重線になって行が読みにくくなる。
 */
.mjm-plantab { margin: 0 0 6px; }
.mjm-plantab .mjm-tabs__tabs { margin-top: 0; }
.mjm-plantab .mjm-tabs__panels { margin-top: 14px; }

.mjm-plantab .mjm-tabs__note {
	margin: 0 0 10px;
	font-size: 12.5px;
	line-height: 1.8;
	color: var(--muted);
}

.mjm-plantab .mjm-tabs__note b { color: var(--txt); }

/* ----- 部位の切り替えに固有の体裁 ------------------------------------- */
.mjm-partpick__panels {
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: #fff;
	box-shadow: var(--shadow);
	padding: 18px;
	margin-top: -1px;
}

/* 選択中の見出し行（支払額の中央値／効果を実感した回数） */
.mjm-partpick__lead {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
	margin: 0 0 18px;
}

.mjm-partpick__lead dt {
	font-size: 11.5px;
	color: var(--muted);
	font-weight: 700;
	margin-bottom: 4px;
}

.mjm-partpick__lead dd {
	margin: 0;
	font-size: 26px;
	font-weight: 800;
	color: var(--navy);
	line-height: 1.2;
}

.mjm-partpick__lead dd .u { font-size: 15px; margin-left: 2px; }
.mjm-partpick__lead dd .na { font-size: 18px; font-weight: 700; }

.mjm-partpick__lead dd small {
	display: block;
	font-size: 11.5px;
	color: var(--muted);
	font-weight: 400;
	margin-top: 5px;
}

.mjm-partpick h4 {
	font-size: 14px;
	margin: 20px 0 8px;
}

.mjm-partpick h4:first-of-type { margin-top: 0; }

@media (max-width: 560px) {
	.mjm-partpick__lead { grid-template-columns: 1fr; gap: 14px; }
	.mjm-partpick__panels { padding: 14px; }
	.mjm-partpick__lead dd { font-size: 23px; }
}

/* ===================================================== 施術範囲の比較
 *
 * ○×だけの表にしない。公式の表記を同じ行に並べ、
 * 判定が当サイトの読み替えではないことを見せる。
 */
.mjm-coverage .mk {
	display: inline-block;
	width: 1.2em;
	font-weight: 800;
	text-align: center;
}

.mjm-coverage .tx { font-size: 12px; }
.mjm-coverage td.ok { color: var(--navy); font-weight: 700; }
.mjm-coverage td.out { color: var(--accent); font-weight: 700; }
.mjm-coverage td.unk { color: var(--faint); font-weight: 400; }

.mjm-cov-labels {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 12.5px;
}

.mjm-cov-labels li { margin: 0 0 4px; }
.mjm-cov-labels li:last-child { margin-bottom: 0; }
.mjm-cov-labels li::before { content: "「"; }
.mjm-cov-labels li::after { content: "」"; }

/* 施術者の体制。引用文は本文より小さく、出典はさらに小さく。 */
.mjm-staff-quotes {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 12.5px;
}

.mjm-staff-quotes li { margin: 0 0 4px; }
.mjm-staff-quotes li:last-child { margin-bottom: 0; }
.mjm-staff-quotes li::before { content: "「"; }
.mjm-staff-quotes li::after { content: "」"; }

.mjm-staff .nt {
	font-size: 11.5px;
	color: var(--muted);
	margin: 5px 0 0;
}

.mjm-staff .nt a { color: var(--teal); }
.mjm-staff td.ok { color: var(--navy); font-weight: 700; }
.mjm-staff td.out { color: var(--accent); font-weight: 700; }
.mjm-staff td.unk { color: var(--faint); font-weight: 400; }

.mjm-rv-total { font-size: 12px; color: var(--muted); margin: 0 0 10px; }

/* 続きを見る
 *
 * ページ送りではなく、同じ場所に足す（reviews.js）。
 * 横いっぱいの1本にして、口コミの列の終わりだと分かるようにする。
 */
.mjm-rv-more {
	display: flex;
	justify-content: center;
	margin: 16px 0 0;
}

.mjm-rv-more[hidden] { display: none; }

.mjm-rv-more-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 46px;
	width: 100%;
	max-width: 420px;
	padding: 10px 20px;
	border: 1px solid var(--navy);
	border-radius: var(--radius);
	background: #fff;
	color: var(--navy);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
}

.mjm-rv-more-btn:hover { background: var(--men-l); }

.mjm-rv-more-btn::after {
	content: "";
	width: 7px;
	height: 7px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
}

/* 読み込み中。文字が消えると押せたのか分からないので、薄くするだけにする。
 * **すでに読んでいる口コミのほうは薄くしない。** 足すだけなので。 */
.mjm-rv-more-btn.is-loading { opacity: .55; pointer-events: none; }

/* ------------------------------------------------------ 投稿フォーム
 *
 * 設問が多いので、1問ずつ枠で区切って番号を振る。
 * 「あと何問あるか」「いまどこを答えているか」が分かる状態にする。
 *
 * 配色はサイトの色をそのまま使う（番号と送信はネイビー、必須は強調色）。
 * このフォームだけ別の色にすると、同じサイトに見えなくなる。
 */
.mjm-rv-open {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 14px 18px;
	box-shadow: var(--shadow);
	margin-top: 18px;
}

.mjm-rv-open > summary {
	font-weight: 700;
	cursor: pointer;
	font-size: 14.5px;
}

/* 単独で置かれたとき（投稿ページ）は、フォーム全体をカードにする */
.mjm-rv-formwrap > .mjm-rv-form > .mjm-rv-intro { margin-bottom: 14px; }

/* アイコン。文字と同じ色・同じ大きさで並ぶようにする */
.mjm-rv-form .mjm-ic,
.mjm-rv-intro .mjm-ic {
	width: 1.05em;
	height: 1.05em;
	flex: none;
	vertical-align: -.16em;
}

/* --------------------------------------------------------- 上部の案内 */
.mjm-rv-intro {
	display: flex;
	align-items: center;
	gap: 14px;
	background: linear-gradient(180deg, #EEF4FA 0%, #E7EFF7 100%);
	border: 1px solid #D6E3EF;
	border-radius: var(--radius);
	padding: 16px 18px;
}

.mjm-rv-intro .ic {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	flex: none;
	border-radius: 50%;
	background: var(--navy);
	color: #fff;
}

.mjm-rv-intro .ic .mjm-ic { width: 22px; height: 22px; }

.mjm-rv-intro .tx b {
	display: block;
	font-size: 18px;
	line-height: 1.5;
	color: var(--navy);
}

.mjm-rv-intro .tx span {
	display: block;
	font-size: 12.5px;
	color: var(--muted);
	line-height: 1.7;
}

/* ------------------------------------------------------------ 設問の枠 */
.mjm-rv-sec {
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: #fff;
	padding: 4px 16px 16px;
	margin: 12px 0 0;
}

.mjm-rv-form legend {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 14.5px;
	font-weight: 700;
	padding: 0;
	margin: 14px 0 12px;
	/* legend は float できないので、幅いっぱいに置く */
	width: 100%;
}

/* 設問の番号 */
.mjm-rv-form legend .no {
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	flex: none;
	border-radius: 50%;
	background: var(--navy);
	color: #fff;
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1;
}

.mjm-rv-form legend .tt { line-height: 1.4; }

/*
 * 必須・任意のしるし。
 *
 * クラス名に mjm- を付けている。素の .opt はテーマの診断で
 * 「幅いっぱいの選択肢カード」に使っており、名前がぶつかると
 * 見出しが1文字ずつ折り返して崩れる。
 */
.mjm-rv-req,
.mjm-rv-opt {
	display: inline-block;
	width: auto;
	font-size: 11px;
	font-weight: 700;
	border-radius: var(--radius);
	padding: 2px 8px;
	line-height: 1.6;
	flex: none;
}

.mjm-rv-req { background: var(--accent); color: #fff; }
.mjm-rv-opt { background: var(--bg); color: var(--muted); border: 1px solid var(--line); }

.mjm-rv-field { display: block; margin: 12px 0; }

.mjm-rv-field .lb {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 700;
	margin-bottom: 5px;
	color: var(--txt);
}

.mjm-rv-field .lb .mjm-ic { color: var(--navy-l); }

.mjm-rv-field .hint,
.mjm-rv-form .hint {
	display: block;
	font-size: 11.5px;
	color: var(--muted);
	margin-top: 5px;
	line-height: 1.7;
}

.mjm-rv-form input[type="text"],
.mjm-rv-form input[type="number"],
.mjm-rv-form input[type="month"],
.mjm-rv-form select,
.mjm-rv-form textarea {
	width: 100%;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 11px 13px;
	font-size: 15px;
	font-family: inherit;
	color: var(--txt);
	background: #fff;
	-webkit-appearance: none;
	appearance: none;
}

.mjm-rv-form textarea { line-height: 1.8; resize: vertical; min-height: 120px; }

/*
 * 開く向きの印。
 *
 * appearance:none で枠を自前にすると、ブラウザの矢印も一緒に消える。
 * 矢印が無い select は入力欄と見分けが付かないので、必ず自前で置く。
 * .mjm-rv-sel の中の select には、親が疑似要素で矢印を置いている。
 */
.mjm-rv-form select:not(.mjm-rv-sel select) {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%235A6B7B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 13px center;
	background-size: 12px 12px;
	padding-right: 34px;
}

.mjm-rv-form input:focus-visible,
.mjm-rv-form select:focus-visible,
.mjm-rv-form textarea:focus-visible {
	outline: 2px solid var(--navy-l);
	outline-offset: 1px;
	border-color: var(--navy-l);
}

/* ------------------------------------------- アイコン付きの選択（施設・店舗） */
.mjm-rv-sel {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 0 12px;
	background: #fff;
}

.mjm-rv-sel:focus-within {
	border-color: var(--navy-l);
	outline: 2px solid var(--navy-l);
	outline-offset: 1px;
}

.mjm-rv-sel > .mjm-ic {
	width: 20px;
	height: 20px;
	color: var(--navy);
}

.mjm-rv-sel select {
	border: 0;
	padding: 12px 26px 12px 0;
	background: transparent;
}

.mjm-rv-sel select:focus-visible { outline: 0; }

/* 開く向きの印。select の見た目を自前で作っているので、印も自前で置く */
.mjm-rv-sel::after {
	content: "";
	position: absolute;
	right: 14px;
	width: 9px;
	height: 9px;
	border-right: 2px solid var(--muted);
	border-bottom: 2px solid var(--muted);
	transform: translateY(-3px) rotate(45deg);
	pointer-events: none;
}

.mjm-rv-fixed {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 700;
	font-size: 15px;
	margin: 0;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 12px 14px;
	background: var(--bg);
}

.mjm-rv-fixed .mjm-ic { width: 20px; height: 20px; color: var(--navy); }

.mjm-rv-form .unitbox { display: flex; align-items: stretch; gap: 0; }

.mjm-rv-form .unitbox input { border-radius: var(--radius); }

.mjm-rv-form .unitbox .unit {
	display: grid;
	place-items: center;
	font-size: 14px;
	font-weight: 700;
	color: var(--muted);
	white-space: nowrap;
	border: 1px solid var(--line);
	border-left: 0;
	border-radius: var(--radius);
	background: var(--bg);
	padding: 0 12px;
	min-width: 46px;
}

.mjm-rv-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px 16px;
}

/* --------------------------------------------------------- 部位の選択 */
.mjm-rv-checks {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 9px;
}

.mjm-rv-checks label {
	display: flex;
	align-items: center;
	gap: 9px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 12px 13px;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	background: #fff;
	transition: border-color .15s, background .15s;
}

.mjm-rv-checks label:hover { border-color: var(--navy-l); }

.mjm-rv-checks input {
	width: 18px;
	height: 18px;
	flex: none;
	accent-color: var(--navy);
	margin: 0;
}

.mjm-rv-checks label:has(input:checked) {
	border-color: var(--navy);
	background: #EEF3F8;
	color: var(--navy);
}

.mjm-rv-checks label:has(input:focus-visible) {
	outline: 2px solid var(--navy-l);
	outline-offset: 1px;
}

/* ------------------------------------------------------------- 評価 */
.mjm-rv-stars {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	background: var(--bg);
	border-radius: var(--radius);
	padding: 9px 12px;
	margin-top: 8px;
}

.mjm-rv-stars .lb {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 13.5px;
	font-weight: 700;
	min-width: 9.5em;
}

.mjm-rv-stars .lb .mjm-ic { color: var(--navy); width: 18px; height: 18px; }

.mjm-rv-stars .stars { display: flex; gap: 6px; margin-left: auto; }

.mjm-rv-stars label { cursor: pointer; }

/*
 * ラジオは隠すが、読み上げと操作は残す。
 * display:none にすると、キーボードで選べなくなる。
 */
.mjm-rv-stars input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.mjm-rv-stars .st {
	display: grid;
	place-items: center;
	width: 46px;
	height: 40px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: #fff;
	font-size: 14px;
	font-weight: 700;
	color: var(--muted);
	transition: border-color .15s, background .15s, color .15s;
}

.mjm-rv-stars label:hover .st { border-color: var(--navy-l); color: var(--navy); }

.mjm-rv-stars input:checked + .st {
	background: var(--navy);
	border-color: var(--navy);
	color: #fff;
}

.mjm-rv-stars input:focus-visible + .st {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

/* ------------------------------------------------------- 文字数の表示 */
.mjm-rv-counter {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin: 6px 0 0;
}

.mjm-rv-counter .hint { margin-top: 0; }

.mjm-rv-counter output {
	margin-left: auto;
	font-size: 12px;
	color: var(--faint);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.mjm-rv-counter output.is-near { color: var(--accent); font-weight: 700; }

/* --------------------------------------------------------- ハニーポット
 * 人には見せない。display:none だと埋めない機械があるため、位置で隠す。
 */
.mjm-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.mjm-rv-privacy {
	background: #F1F5F8;
	border-radius: var(--radius);
	padding: 13px 15px;
	font-size: 12px;
	color: var(--muted);
	line-height: 1.85;
	margin: 14px 0 0;
}

.mjm-rv-privacy b { display: block; color: var(--txt); margin-bottom: 3px; }

.mjm-rv-submit {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	background: var(--navy);
	color: #fff;
	border: 0;
	border-radius: var(--radius);
	padding: 16px 32px;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	margin-top: 14px;
	width: 100%;
	box-shadow: var(--shadow);
}

.mjm-rv-submit .mjm-ic { width: 20px; height: 20px; }

.mjm-rv-submit:hover { background: var(--navy-d); }

.mjm-rv-submit:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.mjm-rv-ok {
	background: var(--teal-l);
	border: 1px solid var(--teal);
	border-left: 3px solid var(--teal);
	border-radius: var(--radius);
	padding: 12px 15px;
	font-size: 13px;
	color: var(--teal);
	margin-bottom: 16px;
	font-weight: 700;
}

/* ------------------------------------------------------- 狭い画面 */
@media (max-width: 720px) {
	.mjm-rv-checks { grid-template-columns: repeat(2, 1fr); }
	.mjm-rv-grid { grid-template-columns: 1fr; }

	.mjm-rv-intro { gap: 11px; padding: 14px; }
	.mjm-rv-intro .ic { width: 38px; height: 38px; }
	.mjm-rv-intro .ic .mjm-ic { width: 19px; height: 19px; }
	.mjm-rv-intro .tx b { font-size: 16px; }

	.mjm-rv-sec { padding: 2px 13px 14px; }

	/*
	 * 評価は縦に積む。横並びのままだと、項目名と数字が
	 * どちらも潰れて押しにくくなる。
	 */
	.mjm-rv-stars { gap: 7px; }
	.mjm-rv-stars .lb { min-width: 0; width: 100%; }
	.mjm-rv-stars .stars { margin-left: 0; width: 100%; }
	.mjm-rv-stars .st { width: 100%; height: 44px; }
	.mjm-rv-stars label { flex: 1; }

	.mjm-rv-counter { flex-direction: column; gap: 4px; }
	.mjm-rv-counter output { margin-left: 0; }
}

/* ===================================================== 余白の調整 */
/*
 * 本文の幅と位置。**全ページ共通。**
 *
 * テーマの本文欄はサイドバーの有無で幅が変わるため、ここで受け止める。
 * 見出しとパンくずも同じ幅にそろえてあるが、そちらはテーマ側
 * （arkhe_child/style.css）の担当。Arkheのマークアップに当てる指定なので、
 * テーマを変えたら作り直すことになる。
 */
.mjm-main {
	max-width: var( --mjm-measure, 900px );
	margin-left: auto;
	margin-right: auto;
}

.mjm-main > section:first-child { padding-top: 30px; }
.mjm-brand-actions { max-width: 460px; margin: 10px 0 40px; }
/* ============================================ ブロックエディタの標準ブロック
 *
 * 本文を管理画面でブロックに置き換えていくための見た目。
 *
 * **ショートコードが出す表とブロックの表を、同じ見た目にする。**
 * プラグインの表は .cmp、ブロックの表は .wp-block-table で、
 * クラスがまったく別物になる。同じページに両方が並ぶので、
 * 揃えておかないと「ここだけ作りかけ」に見える。
 *
 * ここはテーマの担当（docs/20.1）。プラグイン側には入れない。
 */

/* -------------------------------------------------------------- 表
 *
 * **セレクタの書き方に理由がある。消さないこと。**
 *
 * WordPressは表ブロックのCSS（wp-includes/blocks/table/style.min.css）を、
 * テーマのstyle.cssより「後」に読み込む。本文を描くときに初めて
 * 「このページに表ブロックがある」と分かって足す作りのため、順番は動かせない。
 *
 * 強さが同じなら後に読まれた方が勝つ。つまり .wp-block-table td と書いても
 * コアの .wp-block-table td に負ける（コアは padding:.5em、border:1px solid）。
 *
 * そこで、コアとぶつかる指定だけ table を一段挟んで書いている。
 *   コア   .wp-block-table td        （弱い）
 *   こちら .wp-block-table table td  （強い）
 * !important は使わない。使うと管理画面で色を選んだときに効かなくなる。
 *
 * ぶつかっていない指定（下の .wp-block-table 本体など）は素直に書いてよい。
 */
.wp-block-table {
	margin: 18px 0 22px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
}

.wp-block-table table {
	border-collapse: collapse;
	width: 100%;
	font-size: 13.5px;
	/*
	 * .mjm-editorial table の margin-bottom:16px を打ち消す。
	 * 残すと枠の内側に余白が落ちて、表の下だけ白い帯ができる。
	 */
	margin: 0;
	/*
	 * プラグインの表のような min-width は入れない。
	 * 列数が決まっていない手書きの表に下限を付けると、
	 * 2〜3列しかないのに横スクロールが出る。
	 */
}

/* コアの padding:.5em / border:1px solid に勝つため table を挟む */
.wp-block-table table th,
.wp-block-table table td {
	padding: 11px 14px;
	text-align: left;
	border: 0;
	border-bottom: 1px solid var(--line);
	line-height: 1.75;
	/* 手書きの表は文章が入るので折り返す（.cmp は nowrap だが用途が違う） */
	white-space: normal;
	vertical-align: top;
}

/* コアは thead に 3px、tfoot に 3px の線を引く。こちらの細い線に戻す */
.wp-block-table table thead { border-bottom: 1px solid var(--line); }
.wp-block-table table tfoot { border-top: 1px solid var(--line); }

.wp-block-table table thead th {
	background: #F7FAFC;
	font-size: 12px;
	color: var(--muted);
	font-weight: 700;
	white-space: nowrap;
	vertical-align: middle;
}

.wp-block-table table tbody tr:hover { background: #FAFCFD; }
.wp-block-table table tbody tr:last-child td { border-bottom: 0; }
.wp-block-table table tfoot td { background: #F7FAFC; font-weight: 700; }

/* 1列目が見出しの役割をしている表（左に項目名が並ぶ形） */
.wp-block-table table tbody th { background: #F7FAFC; font-weight: 700; }

/*
 * 列が多い表だけ横スクロールさせる。
 *
 * 既定で min-width を入れない理由は上に書いたとおり（2〜3列で無駄に横スクロールが出る）。
 * ただし4〜5列の表をスマホで潰すと、1文字ずつ折り返して読めなくなる。
 *
 * 使い方: ブロックの「高度な設定 → 追加CSSクラス」に mjm-wide と入れる。
 * 入れるかどうかは実際にスマホ幅で見て決めること。
 */
.wp-block-table.mjm-wide table { min-width: 620px; }

.wp-block-table figcaption {
	font-size: 11.5px;
	color: var(--muted);
	padding: 9px 14px;
	border-top: 1px solid var(--line);
	background: var(--bg);
	text-align: left;
	margin: 0;
}

/*
 * 縞模様のスタイル。
 * コアは背景を透明にし、縞を薄いグレーにする。外枠と白地はこちらで描くので、
 * figure を足して（= 強くして）打ち消す。
 */
figure.wp-block-table.is-style-stripes {
	border: 1px solid var(--line);
	background: #fff;
	border-collapse: collapse;
}

.wp-block-table.is-style-stripes table tbody tr:nth-child(odd) { background: #FAFCFD; }
.wp-block-table.is-style-stripes table tbody tr:hover { background: #F2F7FA; }

@media (max-width: 720px) {
	.wp-block-table table { font-size: 12.5px; }
	.wp-block-table table th,
	.wp-block-table table td { padding: 9px 11px; }
}

/* ---------------------------------------------------------- 見出し・本文 */
.mjm-main .wp-block-heading { line-height: 1.5; }
.mjm-main h2.wp-block-heading { font-size: 20px; margin: 34px 0 10px; }
.mjm-main h3.wp-block-heading { font-size: 16.5px; margin: 26px 0 8px; }
.mjm-main h4.wp-block-heading { font-size: 14.5px; margin: 20px 0 6px; }

/*
 * 固定ページの本文では、上の指定を使わず本文の見出しに揃える。
 *
 * **ブロックに変換したページだけ見出しが変わってしまうのを防ぐ。**
 * 変換前は .mjm-editorial h2（18px・紺の下線）だが、変換すると
 * h2 に wp-block-heading が付き、上の .mjm-main h2.wp-block-heading が
 * 勝って20px・線なしの余白になる。同じ作りのページで見出しが揃わなくなる。
 *
 * 強さが同じなので、必ず上の指定より後ろに置くこと。
 */
.mjm-editorial h2.wp-block-heading {
	font-size: 18px;
	margin: 32px 0 10px;
	padding-bottom: 7px;
	border-bottom: 2px solid var(--navy);
}

.mjm-editorial h3.wp-block-heading { font-size: 16px; margin: 24px 0 8px; }

/*
 * ページ別の見出し。必ず上の指定より後ろに置くこと（強さが同じため）。
 *
 * この2ページは元サイトで19pxだった。節を <section> で区切っていたので
 * 以前は「section > h2」で当てていたが、ブロックに開いて section を
 * 外したため、ページ側のクラスで指定し直している。
 */
.mjm-editorial.mjm-page-guide h2,
.mjm-editorial.mjm-page-beginner h2 { font-size: 19px; margin: 30px 0 12px; padding-bottom: 8px; }

.mjm-editorial.mjm-page-beginner h3 { font-size: 15.5px; margin: 0 0 7px; }
.mjm-editorial.mjm-page-guide h3 { font-size: 15.5px; margin: 24px 0 10px; }
.mjm-editorial.mjm-page-beginner .tc h3 { margin-top: 6px; font-size: 14.5px; }
.mjm-editorial.mjm-page-selection-policy h3.sub2 { font-size: 15.5px; margin: 26px 0 8px; color: var(--navy); }

/*
 * 段落には .wp-block-paragraph が付く（WordPress 7.x が出力時に足す）。
 * ただし、ここで行間を指定しない。
 *
 * 指定すると .mjm-editorial p（行間1.9）より強くなり、
 * 固定ページをブロックに変換しただけで本文の行間が動いてしまう。
 * 段落の見た目は、これまでどおり各ページ側の指定に任せる。
 */
.mjm-main .wp-block-list { line-height: 1.95; }

.mjm-main .wp-block-list { padding-left: 1.4em; margin: 12px 0 18px; }
.mjm-main .wp-block-list li { margin-bottom: 6px; }

/*
 * 固定ページの本文は、変換前と同じ余白・行間にする。
 * ここを揃えておかないと、ブロックに変換しただけで見た目が動く。
 * 値は .mjm-editorial ul/ol と必ず同じにすること。
 * ul を足して（= 強くして）上のブロック用の指定より優先させる。
 */
.mjm-editorial ul.wp-block-list,
.mjm-editorial ol.wp-block-list { margin: 0 0 14px; line-height: 1.75; }
.mjm-editorial ul.wp-block-list li,
.mjm-editorial ol.wp-block-list li { margin-bottom: 7px; }

/* ------------------------------------------------------------ 引用・区切り */
.wp-block-quote {
	border-left: 3px solid var(--line);
	margin: 20px 0;
	padding: 4px 0 4px 16px;
	color: var(--muted);
	font-size: 13.5px;
}

.wp-block-quote cite {
	display: block;
	font-size: 11.5px;
	color: var(--faint);
	font-style: normal;
	margin-top: 6px;
}

/*
 * コアは border-top:2px solid（色の指定なしで文字色）を後から当ててくる。
 * hr を足して勝たせる。表と同じ理由（上の「表」の注意書きを参照）。
 */
hr.wp-block-separator {
	border: 0;
	border-top: 1px solid var(--line);
	margin: 30px 0;
}

/* ------------------------------------------------------------ 画像・囲み */
.wp-block-image { margin: 20px 0; }
.wp-block-image img { border-radius: var(--radius); }

.wp-block-image figcaption {
	font-size: 11.5px;
	color: var(--muted);
	margin-top: 7px;
	text-align: left;
}

.wp-block-group.has-background {
	border-radius: var(--radius);
	padding: 18px 20px;
}

.wp-block-code,
.mjm-main pre {
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 14px 16px;
	font-size: 12.5px;
	line-height: 1.8;
	overflow-x: auto;
}

/* ------------------------------------------------------------ ボタン
 * 並べ方は本来 WordPress 側のCSSが持っているが、
 * 読み込み順や無効化で落ちるとボタンが重なる。ここでも指定しておく。
 */
.wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 20px 0;
}

.wp-block-button { margin: 0; }

.wp-block-button__link {
	display: inline-block;
	background: var(--navy);
	color: #fff;
	border-radius: var(--radius);
	padding: 12px 24px;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	line-height: 1.5;
}

.wp-block-button__link:hover { background: var(--navy-d); }

.wp-block-button.is-style-outline .wp-block-button__link {
	background: 0;
	color: var(--navy);
	border: 1px solid var(--navy);
}

/* ------------------------------------------------------------ 段組み
 *
 * 縦積みの指定は書かない。
 * コアが 781px以下で flex-basis:100%!important を当てており、
 * しかもテーマより後に読まれるので、ここに書いても上書きされるだけ。
 * 幅を変えたくなったときは、この一文を読んでからにすること。
 */
.wp-block-columns { margin: 20px 0; }

/* =====================================================================
 * トップページの見せ方
 *
 * **カードを並べない。**
 * 角丸と影と色付きの縁で区画を作ると、どの節も同じ見た目になり、
 * 中身の違いが伝わらなくなる。ここでは
 * 文字の大小・太さ・余白・罫・背景の切り替えだけで階層を作る。
 *
 * **色は数値そのものに使い、入れ物には使わない。**
 * グラフの帯には色を付けるが、節や項目を色分けはしない。
 * ===================================================================== */

/* ------------------------------------------------------------ 節の見出し
 *
 * 下の太い罫で節の始まりを示す。左の縦線や背景の箱は使わない。
 */
.mjm-front > h2.wp-block-heading {
	font-size: 26px;
	font-weight: 800;
	line-height: 1.45;
	color: var(--navy);
	margin: 54px 0 0;
	padding: 0 0 9px;
	border-bottom: 2px solid var(--navy);
}

.mjm-front > h2.wp-block-heading:first-child { margin-top: 32px; }

.mjm-front > h2.wp-block-heading + p {
	margin: 13px 0 20px;
	font-size: 13.5px;
	color: var(--muted);
	line-height: 1.9;
	max-width: 54em;
}

/* 節の終わりに置く「詳しく見る」行 */
.mjm-front > p > a[href]:only-child { font-weight: 700; color: var(--teal); }

@media (max-width: 760px) {
	.mjm-front > h2.wp-block-heading { font-size: 20px; margin-top: 40px; }
	.mjm-front > h2.wp-block-heading + p { font-size: 13px; margin-bottom: 16px; }
}

/*
 * 条件別TOP3。
 * 3つを同じ形の箱で並べると「3位まである順位表」に見えてしまう。
 * 箱をやめ、上の罫と観点のラベルだけで3つの欄として見せる。
 */
.mjm-front .mjm-top3 .card {
	border: 0;
	border-top: 2px solid var(--navy);
	background: none;
	padding: 13px 0 0;
}

/* ------------------------------------------------------------ 診断
 *
 * ここだけ地色を変える。**ページで背景を切り替えるのはこの1か所だけ。**
 * 読み物ではなく操作する場所だということを、囲みではなく面で示す。
 */
.mjm-front .mjm-diagnosis {
	background: #F1F5F8;
	border: 0;
	border-radius: var(--radius);
	padding: 26px 16px;
	margin: 0 -16px;
}

@media (max-width: 760px) {
	.mjm-front .mjm-diagnosis { padding: 18px 16px; }
}

/* ------------------------------------------------------------ 比較表の折りたたみ
 *
 * 先頭だけ見せ、残りはボタンで開く。
 * **全件が最初からHTMLに入っている。** 隠しているのは表示だけで、
 * 読み上げと検索エンジンには全件が見えている。
 */
.mjm-collapse-tog {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.mjm-collapse .is-more { display: none; }
.mjm-collapse-tog:checked ~ .tscroll .is-more { display: table-row; }

.mjm-collapse-btn {
	display: block;
	text-align: center;
	padding: 14px;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--navy);
	border-top: 1px solid var(--line);
	cursor: pointer;
}

.mjm-collapse-btn:hover { background: #F6F9FB; }
.mjm-collapse-btn .o::after { content: " ▾"; }
.mjm-collapse-btn .c::after { content: " ▴"; }
.mjm-collapse-btn .c { display: none; }
.mjm-collapse-tog:checked ~ .mjm-collapse-btn .o { display: none; }
.mjm-collapse-tog:checked ~ .mjm-collapse-btn .c { display: inline; }

/* キーボードで開けることが分かるように、焦点はボタン側に出す */
.mjm-collapse-tog:focus-visible ~ .mjm-collapse-btn {
	outline: 2px solid var(--teal);
	outline-offset: -2px;
}

/* ------------------------------------------------------------ 独自調査
 *
 * 男性・女性の違いは、**グラフの帯の色だけ**で示す。
 * 背景・枠・ボタンまで色分けすると、調査の中身より色が目に入る。
 */
.mjm-survey {
	--sv: var(--men);
	margin: 0;
}

.mjm-survey.is-women { --sv: var(--women); }

.mjm-survey .sv-lead {
	margin: 0 0 22px;
	font-size: 14.5px;
	line-height: 1.95;
	color: var(--txt);
	max-width: 46em;
}

/* ---------------- 大きく出す数字 */
.mjm-survey .sv-kpis {
	list-style: none;
	margin: 0 0 32px;
	padding: 0;
	display: flex;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}

.mjm-survey .sv-kpis li {
	flex: 1 1 0;
	min-width: 0;
	padding: 15px 20px;
	border-left: 1px solid var(--line);
	display: flex;
	flex-direction: column;
}

.mjm-survey .sv-kpis li:first-child { border-left: 0; padding-left: 0; }
.mjm-survey .sv-kpis li:last-child { padding-right: 0; }

/* 見出し→数字→補足の順に読ませる。HTMLの順番は変えずに並びだけ入れ替える */
.mjm-survey .sv-kpis b {
	order: 1;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--muted);
	line-height: 1.55;
}

.mjm-survey .sv-kpis .v {
	order: 2;
	margin-top: 3px;
	font-size: 40px;
	font-weight: 800;
	color: var(--sv);
	line-height: 1.12;
	letter-spacing: -.025em;
	font-feature-settings: "tnum";
}

.mjm-survey .sv-kpis .v small {
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0;
	margin-left: 2px;
}

.mjm-survey .sv-kpis .s { order: 3; font-size: 11px; color: var(--faint); line-height: 1.6; }

/* ---------------- 図 */
.mjm-survey .sv-charts { display: grid; gap: 32px; }

/*
 * 図は単体でも使う（調査ページのショートコード）。
 * **色は図が自分で決める。** 親の指定に頼ると、単体で置いたときに色が出ない。
 */
/*
 * 図は白いカードに載せる（2026-10-16・運営者の判断）。
 * ページの地色が薄い青なので、白にするだけで1枚ずつ切り分かる。
 * 縁は細い罫1本、影はごく薄く。図より枠が目立たないようにする。
 */
.mjm-chart {
	--sv: var(--men);
	margin: 20px 0 26px;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 18px 20px 20px;
}

@media (max-width: 760px) {
	.mjm-chart { padding: 15px 15px 17px; }
}

.mjm-chart.is-women { --sv: var(--women); }

/* 後悔のように、良し悪しが反転する図は色を変える */
.mjm-chart.tone-warn { --sv: var(--warn); }

/* ダイジェストの中では並びの間隔をグリッド側で決める */
.sv-charts > .mjm-chart { margin: 0; }

.mjm-chart figcaption {
	margin-bottom: 14px;
	padding-bottom: 7px;
	border-bottom: 1px solid var(--line);
}

/* 見出しを出さない場合（すぐ上のH2・H3が見出しの役目をしている） */
.mjm-chart figcaption.is-note-only {
	margin-bottom: 12px;
	padding-bottom: 6px;
}

.mjm-chart figcaption b {
	display: block;
	font-size: 16px;
	font-weight: 700;
	color: var(--navy);
	line-height: 1.5;
}

.mjm-chart figcaption span {
	display: block;
	font-size: 11px;
	color: var(--faint);
	margin-top: 3px;
}

/* 帯グラフ。幅がそのまま割合 */
.mjm-chart .sv-stack {
	display: flex;
	height: 32px;
	background: var(--bg);
}

.mjm-chart .sv-stack .sv-sg {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
}

.mjm-chart .sv-stack .sv-sg i {
	font-style: normal;
	font-size: 11px;
	font-weight: 700;
	color: #fff;
	font-feature-settings: "tnum";
}

/*
 * 内訳の色。濃い順に並べる。
 * **色だけで意味を伝えない。** 必ず凡例に名称と数値を添えること。
 *
 * 色は変数で持つ。帯・凡例・円グラフの3か所で同じ色を使うので、
 * **1か所で決めて使い回す。** 片方だけ直すと、同じ区分が図によって違う色になる。
 */
/*
 * 区分の色は「濃い青 → 明るい青 → オレンジ → 灰」。
 *
 * **3番目でオレンジに変える。** 青の濃淡だけで4段作ると、
 * 3番目と4番目の差が小さく、凡例を見ないと区別がつかない。
 * 色だけに意味を持たせない決まりは変わらないので、凡例には必ず数値を添える。
 *
 * オレンジは面にだけ使う。白文字は2.5:1で読めないため、
 * 帯の中の数字は濃い文字にする（下の .c2 .c3 .c4 の指定）。
 */
.mjm-chart {
	--c1: var(--sv);
	--c2: #6CACE4;
	--c3: var(--accent-bright);
	--c4: #C9D0D8;
	--c5: #8A98A6;
	/*
	 * c6は「その他」用。**ここまでしか色が無い。**
	 * 円グラフは var(--c7) を参照すると値が無く、
	 * conic-gradient 全体が無効になって円が消える。
	 * 区分が7つ以上になるものは、呼び出し側でまとめること。
	 */
	--c6: #6B7785;
}

.mjm-chart.is-women {
	--c2: #C78AA6;
	--c3: #E3C6D3;
}

.mjm-chart .sv-sg.c1, .mjm-chart .sv-sw.c1 { background: var(--c1); }
.mjm-chart .sv-sg.c2, .mjm-chart .sv-sw.c2 { background: var(--c2); }
.mjm-chart .sv-sg.c3, .mjm-chart .sv-sw.c3 { background: var(--c3); }
.mjm-chart .sv-sg.c4, .mjm-chart .sv-sw.c4 { background: var(--c4); }
.mjm-chart .sv-sg.c5, .mjm-chart .sv-sw.c5 { background: var(--c5); }
.mjm-chart .sv-sg.c6, .mjm-chart .sv-sw.c6 { background: var(--c6); }
/*
 * 帯の中に重ねる数字の色。
 * **白のままにしてよいのは c1 だけ。**
 * 明るい青・オレンジ・灰の上では、白は2〜3:1で読めない。
 * 濃い文字なら6:1以上になる（実測）。
 */
.mjm-chart .sv-sg.c2 i,
.mjm-chart .sv-sg.c3 i,
.mjm-chart .sv-sg.c4 i,
.mjm-chart .sv-sg.c5 i { color: var(--txt); }

/* ---------------- 円グラフ
 *
 * **全体に対する割合を見せる設問にだけ使う**（単一回答・合計100%・4項目以下）。
 * 角度と面積で比べることになるため、わずかな差や順位の読み取りには向かない。
 * そういう設問は帯グラフ（stack）か棒グラフ（bars）のままにしてある。
 */
.mjm-chart .sv-donut-wrap {
	display: flex;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
}

.mjm-chart .sv-donut-box {
	position: relative;
	flex: 0 0 auto;
	width: 148px;
	height: 148px;
}

.mjm-chart .sv-donut {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: var(--pie);
	/*
	 * 中心を抜いてドーナツにする。
	 * mask を解釈しないブラウザでは円グラフのまま出る（割合の示し方としては正しい）。
	 */
	-webkit-mask: radial-gradient(circle, transparent 54%, #000 54.5%);
	mask: radial-gradient(circle, transparent 54%, #000 54.5%);
}

/* 真ん中の数字。円は中心を抜いているので、別の層として重ねる */
.mjm-chart .sv-donut-center {
	position: absolute;
	inset: 0;
	margin: 0;
	display: grid;
	place-content: center;
	text-align: center;
	pointer-events: none;
}

.mjm-chart .sv-donut-center .dv {
	display: block;
	font-size: 24px;
	font-weight: 800;
	color: var(--sv);
	line-height: 1.15;
	letter-spacing: -.02em;
	font-feature-settings: "tnum";
}

.mjm-chart .sv-donut-center .dl {
	display: block;
	font-size: 11.5px;
	font-weight: 700;
	color: var(--muted);
	line-height: 1.5;
}

.mjm-chart .sv-donut-wrap .sv-legend { flex: 1 1 210px; margin: 0; min-width: 0; }

@media (max-width: 520px) {
	.mjm-chart .sv-donut-wrap { gap: 14px; justify-content: center; }
	.mjm-chart .sv-donut-box { width: 128px; height: 128px; }
	.mjm-chart .sv-donut-center .dv { font-size: 21px; }
	.mjm-chart .sv-donut-wrap .sv-legend { flex: 1 1 100%; }
}

/* 凡例 */
.mjm-chart .sv-legend {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
	display: grid;
	gap: 7px;
}

.mjm-chart .sv-legend li {
	display: flex;
	align-items: baseline;
	gap: 9px;
	font-size: 12.5px;
	line-height: 1.5;
}

.mjm-chart .sv-legend .sv-sw {
	flex: 0 0 10px;
	width: 10px;
	height: 10px;
	transform: translateY(1px);
}

.mjm-chart .sv-legend .lb { flex: 1 1 auto; min-width: 0; color: var(--muted); }
.mjm-chart .sv-legend b { font-weight: 800; font-feature-settings: "tnum"; }
.mjm-chart .sv-legend small { font-size: 11px; color: var(--faint); }

/* 部位別のように、同じ凡例を上に1つだけ置く場合 */
.mjm-chart .sv-legend.is-top {
	margin: 0 0 13px;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
}

.mjm-chart .sv-legend.is-top li { font-size: 11.5px; }
.mjm-chart .sv-legend.is-top .lb { flex: 0 0 auto; }

/* 項目ごとの帯（複数回答） */
.mjm-chart .sv-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }

.mjm-chart .sv-bars li {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 92px;
	grid-template-areas: "l v" "t t";
	align-items: baseline;
	column-gap: 12px;
	row-gap: 6px;
}

.mjm-chart .sv-bars .bl { grid-area: l; font-size: 13px; line-height: 1.55; }

.mjm-chart .sv-bars .bv {
	grid-area: v;
	text-align: right;
	font-size: 15px;
	font-weight: 800;
	color: var(--sv);
	font-feature-settings: "tnum";
	/* 「66.1% 160人」で折り返すと数字が読みにくいので、列幅のほうを確保する */
	white-space: nowrap;
}

.mjm-chart .sv-bars .bv small { font-size: 10.5px; color: var(--faint); font-weight: 400; margin-left: 4px; }

.mjm-chart .sv-bars .bt {
	grid-area: t;
	display: block;
	height: 8px;
	background: var(--bg);
}

.mjm-chart .sv-bars .bf { display: block; height: 100%; background: var(--sv); }

/*
 * 項目がひとつだけの図。
 *
 * 棒にしても比べる相手がいないので、数字をそのまま大きく出す。
 * 色は teal。このサイトでは「無料」「該当する」など、良い向きの値に使っている色で、
 * すぐ下に並ぶ後悔の図（オレンジ）と向きが違うことが色でも分かる。
 */
.mjm-chart.is-figure { --sv: var(--teal); }

.mjm-chart .sv-figure {
	display: flex;
	align-items: baseline;
	gap: 16px;
	flex-wrap: wrap;
}

.mjm-chart .sv-figure .v {
	margin: 0;
	font-size: 54px;
	font-weight: 800;
	color: var(--sv);
	line-height: 1.05;
	letter-spacing: -.03em;
	font-feature-settings: "tnum";
}

.mjm-chart .sv-figure .v small { font-size: 22px; font-weight: 700; letter-spacing: 0; margin-left: 2px; }
.mjm-chart .sv-figure .t b { display: block; font-size: 14px; line-height: 1.5; }
.mjm-chart .sv-figure .t span { font-size: 12px; color: var(--faint); }

.mjm-chart .sv-body {
	margin: 12px 0 0;
	font-size: 13px;
	color: var(--muted);
	line-height: 1.85;
	max-width: 46em;
}

@media (max-width: 760px) {
	.mjm-chart .sv-figure { gap: 12px; }
	.mjm-chart .sv-figure .v { font-size: 44px; }
	.mjm-chart .sv-figure .v small { font-size: 18px; }
}

/* 部位別の帯を縦に並べる */
.mjm-chart .sv-matrix { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }

.mjm-chart .sv-matrix li {
	display: grid;
	grid-template-columns: 6.5em minmax(0, 1fr);
	align-items: center;
	gap: 12px;
}

.mjm-chart .sv-matrix .ml { font-size: 13px; font-weight: 700; }
.mjm-chart .sv-matrix .sv-stack { height: 28px; }

/* ---------------- 注記と導線 */
.mjm-survey .sv-caution {
	margin: 26px 0 0;
	padding-top: 12px;
	border-top: 1px solid var(--line);
	font-size: 12px;
	color: var(--muted);
	line-height: 1.85;
}

.mjm-survey .sv-src { margin: 7px 0 0; font-size: 11px; color: var(--faint); line-height: 1.7; }

.mjm-survey .sv-cta { margin: 20px 0 0; }

/* 塗りつぶしのボタンにはしない。本文の続きとして読める太い下線にする */
.mjm-survey .sv-cta a {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 7px 0 8px;
	border-bottom: 2px solid var(--navy);
	color: var(--navy);
	text-decoration: none;
	font-size: 15.5px;
	font-weight: 700;
}

.mjm-survey .sv-cta a::after { content: "→"; }
.mjm-survey .sv-cta a:hover { color: var(--accent); border-bottom-color: var(--accent); }

@media (max-width: 760px) {
	.mjm-survey .sv-lead { font-size: 13.5px; margin-bottom: 18px; }

	/* 数字は2×2。罫だけで区切る */
	.mjm-survey .sv-kpis { flex-wrap: wrap; margin-bottom: 26px; }
	.mjm-survey .sv-kpis li { flex: 0 0 50%; padding: 13px 0; border-left: 0; }
	.mjm-survey .sv-kpis li:nth-child(odd) { padding-right: 14px; border-right: 1px solid var(--line); }
	.mjm-survey .sv-kpis li:nth-child(even) { padding-left: 14px; }
	.mjm-survey .sv-kpis li:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
	.mjm-survey .sv-kpis .v { font-size: 31px; }
	.mjm-survey .sv-kpis b { font-size: 11.5px; }

	.mjm-survey .sv-charts { gap: 26px; }
	.mjm-chart figcaption b { font-size: 14.5px; }
	.mjm-chart .sv-matrix li { grid-template-columns: 5.2em minmax(0, 1fr); gap: 9px; }
	.mjm-chart .sv-matrix .ml { font-size: 12px; }
	.mjm-chart .sv-bars li { grid-template-columns: minmax(0, 1fr) 92px; }
	.mjm-chart .sv-bars .bl { font-size: 12.5px; }

	/* 指で押す場所なので、狭い画面では行いっぱいに広げる */
	.mjm-survey .sv-cta a {
		display: flex;
		justify-content: space-between;
		width: 100%;
		padding: 15px 0;
		border-top: 1px solid var(--line);
	}
}

/* =====================================================================
 * /clinic/ /salon/ の比較ページ
 *
 * 表が続くページなので、節の切れ目と目次で現在地を示す。
 * 見た目の作りはトップと同じ（囲みを作らず、罫と文字の大小で分ける）。
 * ===================================================================== */
.mjm-brand-archive { padding-bottom: 44px; }

.mjm-brand-archive h1 {
	font-size: 30px;
	font-weight: 800;
	color: var(--navy);
	line-height: 1.38;
	letter-spacing: .005em;
	margin: 30px 0 0;
}

.mjm-archive-lead {
	margin: 14px 0 0;
	font-size: 14.5px;
	line-height: 1.95;
	color: var(--muted);
	max-width: 46em;
}

.mjm-archive-lead b { color: var(--txt); font-weight: 700; }

/* ---------------- 目次
 *
 * **表が多いページでは目次が無いと目的の表まで届かない。**
 * 特に狭い画面では、上から順にスクロールするしかなくなる。
 */
.mjm-archive-toc {
	margin: 30px 0 0;
	padding-top: 12px;
	border-top: 1px solid var(--navy);
}

/* 目次の見出し。<h2> にすると見出しの並びに混ざるので、段落にして見た目だけ整える */
.mjm-archive-toc .toc-h {
	margin: 0 0 9px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .12em;
	color: var(--muted);
	line-height: 1.6;
}

.mjm-archive-toc ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	row-gap: 9px;
}

.mjm-archive-toc li { flex: 0 0 50%; min-width: 0; padding-right: 12px; }

.mjm-archive-toc a {
	font-size: 13.5px;
	font-weight: 700;
	color: var(--navy);
	text-decoration: none;
}

.mjm-archive-toc a::before { content: "→ "; color: var(--faint); font-weight: 400; }
.mjm-archive-toc a:hover { color: var(--accent); text-decoration: underline; }

/* ---------------- 節 */
.mjm-brand-archive h2 {
	font-size: 24px;
	font-weight: 800;
	color: var(--navy);
	line-height: 1.45;
	margin: 52px 0 0;
	padding: 0 0 9px;
	border-bottom: 2px solid var(--navy);
	/* 固定ヘッダーの下に見出しが隠れないようにする（目次から飛んだとき） */
	scroll-margin-top: 76px;
}

.mjm-brand-archive h3 {
	font-size: 16.5px;
	font-weight: 700;
	margin: 30px 0 10px;
	color: var(--txt);
}

.mjm-brand-archive .sdesc {
	margin: 13px 0 18px;
	line-height: 1.9;
	max-width: 54em;
}

.mjm-brand-archive .sdesc b { color: var(--txt); font-weight: 700; }

/* 次に読む場所への1行 */
.mjm-more { margin: 15px 0 0; }

.mjm-more a {
	font-size: 14px;
	font-weight: 700;
	color: var(--teal);
	text-decoration: none;
}

.mjm-more a::after { content: " ›"; }
.mjm-more a:hover { text-decoration: underline; }

.mjm-brand-archive .fin {
	margin: 46px 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--line);
	font-size: 12px;
	color: var(--faint);
	line-height: 1.85;
}

.mjm-brand-archive .fin a { color: var(--teal); font-weight: 700; }

/*
 * 脱毛機の列。
 * 機種名を4つ並べる社があり、他の列と同じ nowrap だと表が極端に広がる。
 */
.mjm-ptable td.mc {
	white-space: normal;
	min-width: 190px;
	max-width: 330px;
	line-height: 1.6;
}

@media (max-width: 760px) {
	.mjm-brand-archive h1 { font-size: 23px; line-height: 1.45; }
	.mjm-brand-archive h2 { font-size: 19px; margin-top: 40px; }
	.mjm-brand-archive h3 { font-size: 15px; margin-top: 24px; }
	.mjm-archive-lead { font-size: 13.5px; margin-top: 11px; }
	.mjm-brand-archive .sdesc { font-size: 13px; }
	.mjm-archive-toc li { flex: 0 0 100%; padding-right: 0; }
	.mjm-ptable td.mc { max-width: none; min-width: 0; }
}

/* ------------------------------------------------------------ 引用のしかた
 *
 * 他のメディアがこの調査を引用するときに、出典とリンクごと持っていけるようにする。
 * **図の付属物なので、図そのものより目立たせない。** 閉じた状態が既定。
 */
.mjm-cite {
	margin-top: 16px;
	border-top: 1px solid var(--line);
	padding-top: 10px;
}

.mjm-cite > summary {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--teal);
	cursor: pointer;
	list-style: none;
	padding: 3px 0;
}

.mjm-cite > summary::-webkit-details-marker { display: none; }
.mjm-cite > summary::before { content: "＋"; font-weight: 700; }
.mjm-cite[open] > summary::before { content: "−"; }
.mjm-cite > summary:hover { color: var(--accent); text-decoration: underline; }

.mjm-cite-body { padding-top: 10px; }

.mjm-cite-note {
	margin: 0 0 8px;
	font-size: 11.5px;
	color: var(--muted);
	line-height: 1.8;
}

/*
 * 引用用のテキスト。
 * **等幅にして改行をそのまま見せる。** 貼り付けたときの形が事前に分かる。
 */
.mjm-cite-text {
	display: block;
	width: 100%;
	padding: 11px 12px;
	border: 1px solid var(--line);
	background: var(--bg);
	color: var(--txt);
	font-family: ui-monospace, SFMono-Regular, Menlo, "Hiragino Sans", "Noto Sans JP", monospace;
	font-size: 12px;
	line-height: 1.8;
	resize: vertical;
}

.mjm-cite-act {
	margin: 9px 0 0;
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.mjm-cite-copy {
	border: 1px solid var(--navy);
	background: var(--navy);
	color: #fff;
	font-size: 12.5px;
	font-weight: 700;
	padding: 9px 16px;
	cursor: pointer;
}

.mjm-cite-copy:hover { background: var(--navy-d); border-color: var(--navy-d); }

.mjm-cite-done { font-size: 11.5px; font-weight: 700; line-height: 1.6; }
.mjm-cite-done.is-ok { color: var(--teal); }
.mjm-cite-done.is-ng { color: var(--warn); }

/*
 * 引用リンクで飛んできた人の着地点。
 * 固定ヘッダーの下に図が隠れると、何を指しているのか分からなくなる。
 */
.mjm-chart { scroll-margin-top: 76px; }

@media (max-width: 760px) {
	.mjm-cite-text { font-size: 11.5px; padding: 10px; }
	.mjm-cite-copy { width: 100%; padding: 12px; }
	.mjm-cite-act { gap: 8px; }
}

/* ブランドページ：脱毛方式（機種表の前に出す1行） */
.mjm-machine-methods {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin: 0 0 12px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--line);
	font-size: 14px;
}

.mjm-machine-methods b {
	flex: 0 0 auto;
	font-size: 12px;
	font-weight: 700;
	color: var(--muted);
}

.mjm-machine-methods span { font-weight: 700; color: var(--navy); }

/* ===================================================== 掲載の多い都道府県
 *
 * [mojama_area_top] の一覧。
 * **数も順位も数え直したものが入る。**本文に書いた県別の院数は
 * 掲載を増やすたびにずれ、多い順の並びまで入れ替わっていた。
 */
.mjm-areatop {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
	list-style: none;
	margin: 14px 0 0;
	padding: 0;
}

.mjm-areatop a {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 6px;
	padding: 10px 12px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: #fff;
	color: inherit;
	text-decoration: none;
	font-size: 13px;
}

.mjm-areatop a:hover { border-color: var(--navy-l); }
.mjm-areatop .nm { font-weight: 700; }
.mjm-areatop .n { font-weight: 800; color: var(--navy); }
.mjm-areatop .n small { font-size: 11px; font-weight: 400; margin-left: 1px; color: var(--muted); }

@media (max-width: 760px) {
	.mjm-areatop { grid-template-columns: repeat(2, 1fr); }
}

/* 未定義のキーを書いてしまったときの印（編集できる人にだけ出る） */
.mjm-stat-missing {
	background: #FFF1B8;
	color: #7A5B00;
	font-size: .9em;
	padding: 0 4px;
	border-radius: 3px;
}