@charset "utf-8";
/*
 * Moon² Lessons — 共通スタイル
 *
 * ここ1本を直せば、全レッスンの見た目が変わります。ページ側にCSSを書かないこと。
 * 色は3つの変数だけで決まり、値はテンプレートが種類（曜日）から流し込みます。
 *   --cat       その曜日の色
 *   --cat-pale  淡色（帯・バッジの地）
 *   --cat-mid   中間色（マーカー）
 */

:root{
  --ink:#171513;
  --ink-2:#55504a;
  --ink-3:#8b847c;
  --paper:#fbfaf7;
  --rule:#ded8ce;
  --warn:#a8402c;      /* 注意。全曜日で共通 */
  --warn-pale:#fdf4f2;
  /* --cat / --cat-pale / --cat-mid はテンプレートが出力する */
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

.m2-body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","Noto Sans JP",sans-serif;
  font-size:16px;line-height:1.85;
  font-feature-settings:"palt" 1;   /* 和文の字詰め。ここが効くと一気に印刷物寄りになる */
}
/* 左右の余白は --pad 1本で決める。曜日タブが画面幅いっぱいに広がるために
   負のマージンを使うので、両者がずれると横スクロールが出る。 */
.m2-sheet{--pad:1.5rem;max-width:43rem;margin:0 auto;padding:0 var(--pad) 7rem}
.m2-mincho,.m2-body h1,.m2-content h2{
  font-family:"Hiragino Mincho ProN","Yu Mincho",YuMincho,"Noto Serif JP",serif;
}

/* ── 曜日タブ ───────────────────────────────── */
.m2-week{display:flex;margin:0 calc(-1 * var(--pad)) 3rem;border-bottom:1px solid var(--rule)}
.m2-week a{
  flex:1;text-align:center;padding:.75rem .2rem;font-size:.78rem;text-decoration:none;
  color:var(--ink-3);border-bottom:3px solid transparent;letter-spacing:.02em;
}
.m2-week a b{display:block;font-size:.95rem;font-weight:700;margin-bottom:.05rem}
.m2-week a:hover{color:var(--c)}
.m2-week a.on{color:var(--c);border-bottom-color:var(--c);background:var(--p)}

/* ── 扉 ─────────────────────────────────────── */
.m2-tobira{border-bottom:4px solid var(--cat);padding-bottom:1.5rem;margin-bottom:2.4rem}
.m2-kind{
  display:inline-block;background:var(--cat);color:#fff;
  font-family:"Hiragino Mincho ProN","Yu Mincho",serif;
  font-size:.78rem;letter-spacing:.22em;padding:.22rem .85rem;margin:0 0 1rem;
}
.m2-body h1{font-size:clamp(1.7rem,5vw,2.3rem);line-height:1.55;font-weight:600;margin:0}
.m2-sub{margin:.85rem 0 0;color:var(--ink-2);font-size:.95rem}

/* ── 本文 ───────────────────────────────────── */
.m2-content p{margin:0 0 1.25rem}
.m2-content strong{font-weight:700}
.m2-lead{font-size:1.03rem;color:var(--ink-2)}
.m2-content a{color:var(--cat)}

/* 章。見出しの直前に <p class="m2-num">第一章</p> を置く */
.m2-num{
  font-family:"Hiragino Mincho ProN","Yu Mincho",serif;
  display:inline-block;background:var(--cat-pale);color:var(--cat);
  border-left:3px solid var(--cat);padding:.2rem .9rem;margin:4rem 0 1rem;
  font-size:.9rem;letter-spacing:.22em;
}
.m2-content h2{font-size:1.35rem;font-weight:600;line-height:1.6;margin:0 0 1.3rem}
.m2-num + h2{margin-top:0}
.m2-content h2:not(.m2-num + h2){margin-top:3.4rem}
.m2-content h3{font-size:.98rem;font-weight:700;margin:2.2rem 0 .5rem}

/* 要点のマーカー */
.m2-key{background:linear-gradient(transparent 60%,var(--cat-mid) 60%);font-weight:700}

/* 番号付きの箇条（和数字は本文側で書く） */
.m2-kajo{margin:1.6rem 0 0;padding:0;list-style:none}
.m2-kajo li{display:flex;gap:1rem;margin:0 0 1.4rem;align-items:baseline}
.m2-kajo .n{
  font-family:"Hiragino Mincho ProN","Yu Mincho",serif;flex:none;
  width:1.9rem;height:1.9rem;border-radius:50%;display:grid;place-items:center;
  background:var(--cat);color:#fff;font-size:.95rem;
}
.m2-kajo b{display:block}
.m2-kajo .d{color:var(--ink-2);font-size:.95rem}

/* ── 図版。囲むのはここだけ ─────────────────── */
.m2-zu{border:1px solid var(--rule);background:#fff;margin:2.2rem 0}
.m2-zu-h{
  font-family:"Hiragino Mincho ProN","Yu Mincho",serif;
  font-size:.85rem;letter-spacing:.2em;color:#fff;background:var(--cat);padding:.5rem 1.1rem;
}
/* 列の多い表を入れても、スマホでページ全体が横に伸びないようにする。
   はみ出す分は図版枠の中だけでスクロールさせる。 */
.m2-zu-b{padding:1.5rem 1.1rem;overflow-x:auto}
/* 図版枠の中に表を入れたとき、上に余白が二重に付かないようにする */
.m2-zu-b > .m2-kondate:first-child{margin-top:0}
.m2-zu-b > *:last-child{margin-bottom:0}
.m2-zu svg,.m2-zu img{display:block;width:100%;height:auto}
.m2-zu .cap{font-size:.85rem;color:var(--ink-3);margin:1rem 0 0;line-height:1.75}

/* SVGの色は必ずCSS側で当てる。
   fill="var(--cat)" のようにプレゼンテーション属性へ書くと、
   Safari の一部バージョンで解決されず図が黒一色になる。 */
.m2-zu svg .box{fill:var(--cat-pale);stroke:var(--cat);stroke-width:1.5}
.m2-zu svg .boxline{fill:none;stroke:var(--cat);stroke-width:1.8}
.m2-zu svg .lbl{fill:var(--cat)}
.m2-zu svg .sub{fill:#55504a}
.m2-zu svg .warn{fill:#a8402c}
.m2-zu svg .gray{fill:#8b847c}
.m2-zu svg .arrow{stroke:#8b847c;stroke-width:1.5;fill:none}
.m2-zu svg .catstroke{stroke:var(--cat);fill:none}
.m2-zu svg .catfill{fill:var(--cat)}
.m2-zu svg .catpale{fill:var(--cat-pale)}
.m2-zu svg .rule{stroke:#ded8ce;stroke-width:1}

/* 写真 */
.m2-shashin{margin:2.2rem 0}
.m2-shashin img{width:100%;height:auto;display:block;border:1px solid var(--rule)}
.m2-shashin figcaption{font-size:.85rem;color:var(--ink-3);margin-top:.6rem}

/* ── 基準音 ─────────────────────────────────── */
.m2-tones{display:flex;flex-wrap:wrap;gap:.35rem;margin:0 0 .9rem}
.m2-tones button{
  font:inherit;font-size:.92rem;font-weight:600;font-variant-numeric:tabular-nums;
  padding:.5rem .85rem;min-width:3.3rem;cursor:pointer;
  background:#fff;color:var(--ink);border:1px solid var(--rule);border-radius:0;transition:.12s;
}
.m2-tones button:hover{border-color:var(--cat);color:var(--cat)}
.m2-tones button[aria-pressed="true"]{background:var(--cat);color:#fff;border-color:var(--cat)}
.m2-stop{
  font:inherit;font-size:.86rem;padding:.45rem .95rem;cursor:pointer;
  background:#fff;border:1px solid var(--rule);color:var(--ink-2);
}

/* ── メトロノーム ───────────────────────────── */
.m2-metro{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}
.m2-metro label{display:flex;align-items:center;gap:.6rem;font-size:.88rem;color:var(--ink-2)}
.m2-metro input[type=range]{accent-color:var(--cat);width:11rem;max-width:48vw}
.m2-bpm-out{font-variant-numeric:tabular-nums;font-weight:700;min-width:2.4rem;text-align:right}
.m2-unit{font-size:.8rem;color:var(--ink-3)}
.m2-metro-toggle{
  font:inherit;font-size:.88rem;padding:.4rem 1.1rem;cursor:pointer;margin-left:auto;
  background:#fff;border:1px solid var(--rule);color:var(--ink-2);
}
.m2-metro-toggle[aria-pressed="true"]{background:var(--cat);border-color:var(--cat);color:#fff}
.m2-beat{display:flex;gap:.3rem}
.m2-beat i{width:.55rem;height:.55rem;border-radius:50%;background:var(--rule);display:block}
.m2-beat i.on{background:var(--cat)}

/* ── 献立表 ─────────────────────────────────── */
.m2-kondate{border-collapse:collapse;width:100%;font-size:.95rem;margin:1.6rem 0 0}
.m2-kondate th,.m2-kondate td{border-bottom:1px solid var(--rule);padding:.8rem .5rem;text-align:left;vertical-align:top}
.m2-kondate thead th{
  font-family:"Hiragino Mincho ProN","Yu Mincho",serif;font-weight:600;
  font-size:.82rem;letter-spacing:.15em;color:#fff;background:var(--cat);border-bottom:none;
}
.m2-kondate td.t{white-space:nowrap;width:3.9rem}
.m2-kondate td.t span{
  display:inline-block;background:var(--cat-pale);color:var(--cat);
  font-size:.8rem;font-weight:700;padding:.05rem .5rem;font-variant-numeric:tabular-nums;
}
.m2-kondate td.c{width:2rem}
.m2-kondate input[type=checkbox]{margin:.35rem 0 0;accent-color:var(--cat);width:1.05rem;height:1.05rem}
.m2-kondate tbody tr:hover{background:#fff}
/* 列の多い表は .m2-scroll で囲む。
   table 自身に overflow-x を掛けても min-width が箱の幅になってしまい、
   ページごと横に伸びる。囲む側でスクロールさせるのが確実。 */
.m2-scroll{overflow-x:auto;margin:1.6rem 0;-webkit-overflow-scrolling:touch}
.m2-scroll > .m2-kondate{margin:0}

/* 3列の資料表。自動の列幅だと1列目が潰れて不自然に折り返すので指定する。 */
.m2-kondate.wide{min-width:34rem;table-layout:fixed}
.m2-kondate.wide th:nth-child(1),.m2-kondate.wide td:nth-child(1){width:26%}
.m2-kondate.wide th:nth-child(2),.m2-kondate.wide td:nth-child(2){width:33%}

/* 表のなかの年・補足。本文より一段引いて見せる */
.m2-kondate .yr{display:block;color:var(--ink-3);font-size:.85em;line-height:1.6;margin-top:.15rem}
.m2-kondate tr.done td{color:var(--ink-3)}
.m2-kondate tr.done td b{text-decoration:line-through}

/* ── 注意・エビデンス・勘違い ───────────────── */
.m2-chui{
  border-left:4px solid var(--warn);background:var(--warn-pale);
  padding:.9rem 1.1rem;margin:1.8rem 0;color:var(--ink-2);font-size:.94rem;
}
.m2-chui b{color:var(--warn)}
.m2-evidence{
  border:1px dashed var(--cat-mid);background:var(--cat-pale);
  padding:1.3rem 1.2rem;margin:2.6rem 0;color:var(--ink-2);font-size:.9rem;
}
.m2-evidence > b:first-child{
  font-family:"Hiragino Mincho ProN","Yu Mincho",serif;display:block;
  color:var(--cat);font-size:.85rem;letter-spacing:.18em;margin-bottom:.4rem;
}
.m2-evidence cite{display:block;font-style:normal;font-size:.82rem;color:var(--ink-3);margin-top:.6rem}
/* 出典一覧。
   日本語の説明を主、英語の書誌を従にする。学術書式をそのまま並べると
   読者が身構えるので、何を調べた研究かが先に読めるようにしている。 */
.m2-sources{margin:1.4rem 0 0;padding-left:1.4rem;font-size:.92rem;line-height:1.8;color:var(--ink)}
.m2-sources li{margin:0 0 1.3rem}
.m2-sources b{font-weight:700}
.m2-sources .cite{
  display:block;font-size:.78rem;color:var(--ink-3);line-height:1.6;
  margin-top:.15rem;word-break:break-word;
}
.m2-sources a{font-size:.82rem;word-break:break-all}
.m2-sources .chk{
  display:inline-block;margin-left:.4rem;background:var(--cat-pale);color:var(--cat);
  font-size:.72rem;font-weight:700;padding:.04rem .5rem;white-space:nowrap;
}
/* 本文が読めていないものは色を変えて、確かさの差を目で分かるようにする */
.m2-sources .chk.yobi{background:#f3efe6;color:#8a6d1f}

/* 勘違いの各項目に添える、根拠の出どころ */
.m2-gokai .src{
  display:block;margin-top:.35rem;font-size:.79rem;color:var(--ink-3);
}
.m2-gokai .src::before{content:"根拠：";}

.m2-gokai{margin:1.4rem 0 0}
.m2-gokai dt{font-weight:700;color:var(--ink-2);margin:1.5rem 0 .2rem}
.m2-gokai dt::before{content:"×";color:var(--warn);margin-right:.5rem;font-weight:700}
.m2-gokai dd{margin:0;padding-left:1.5rem}

/* ── 会員限定 ───────────────────────────────── */
.m2-locked{border:1px solid var(--rule);background:#fff;padding:1.6rem 1.4rem;margin:2rem 0;text-align:center}
.m2-locked p{margin:0 0 .8rem}
.m2-cta{
  display:inline-block;background:var(--cat);color:#fff;text-decoration:none;
  padding:.6rem 1.8rem;margin-top:.5rem;font-weight:700;
}

.m2-foot{
  margin-top:5rem;border-top:1px solid var(--rule);padding-top:1.1rem;
  color:var(--ink-3);font-size:.84rem;display:flex;justify-content:space-between;gap:1rem;
}

@media (max-width:600px){
  .m2-sheet{--pad:1.2rem;padding-bottom:4rem}
  .m2-num{margin-top:3rem}
  .m2-week a{font-size:.68rem;padding:.6rem .1rem;letter-spacing:0}
  .m2-week a b{font-size:.85rem}
  .m2-metro-toggle{margin-left:0}
}

/* 印刷。生徒が紙で持ちたい場合に備える */
@media print{
  .m2-week,.m2-tones,.m2-stop,.m2-metro,.m2-cta{display:none}
  .m2-body{background:#fff;font-size:11pt}
  .m2-sheet{max-width:none;padding:0}
  .m2-zu{break-inside:avoid}
}

/* ── メトロノームの追加操作 ─────────────────── */
.m2-metro-opt{display:flex;gap:1.1rem;flex-wrap:wrap;width:100%;margin-top:.2rem}
.m2-metro-opt label{font-size:.84rem;color:var(--ink-3);cursor:pointer}
.m2-metro-opt input{accent-color:var(--cat);margin-right:.3rem}
/* 拍のランプ。合わせる相手なので、控えめだと使えない */
.m2-beat i{width:.9rem;height:.9rem;transition:background .04s}
.m2-beat i.quiet{background:transparent;box-shadow:inset 0 0 0 1px var(--rule)}
.m2-metro-state{font-size:.8rem;color:var(--warn);font-weight:700;min-width:5rem}

/* ── 音階 ───────────────────────────────────── */
.m2-scale{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap}
.m2-scale-read{
  font-family:"Hiragino Mincho ProN","Yu Mincho",serif;
  display:grid;place-items:center;flex:none;width:4.2rem;height:3.2rem;
  border:1px solid var(--rule);background:#fff;color:var(--ink-3);
  font-size:1.15rem;font-weight:600;transition:.08s;
}
.m2-scale-read.lit{background:var(--cat);border-color:var(--cat);color:#fff}
.m2-scale-label{font-size:.88rem;color:var(--ink-2);line-height:1.6}
.m2-scale-toggle{
  font:inherit;font-size:.88rem;padding:.4rem 1.1rem;cursor:pointer;margin-left:auto;
  background:#fff;border:1px solid var(--rule);color:var(--ink-2);
}

/* ── 手本の音源 ─────────────────────────────── */
.m2-audio{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;font-size:.88rem}
.m2-audio audio{height:2.2rem;max-width:100%}
.m2-audio.is-empty{color:var(--ink-3);background:#fff;border:1px dashed var(--rule);padding:.7rem .9rem}
.m2-rate{display:flex;gap:.25rem}
.m2-rate button{
  font:inherit;font-size:.76rem;padding:.25rem .55rem;cursor:pointer;
  background:#fff;border:1px solid var(--rule);color:var(--ink-3);
}
.m2-rate button[aria-pressed="true"]{background:var(--cat);border-color:var(--cat);color:#fff}

/* ── ドリル ─────────────────────────────────
   教科書が「なぜ」、ドリルが「どうやる」。
   道具を本文の外に置くと結局やらないので、手順のすぐ上に埋める。 */
.m2-drill{border:1px solid var(--cat-mid);background:#fff;margin:2.4rem 0}
.m2-drill-h{
  display:flex;align-items:baseline;gap:.7rem;
  background:var(--cat);color:#fff;padding:.6rem 1.1rem;
}
.m2-drill-h b{font-family:"Hiragino Mincho ProN","Yu Mincho",serif;font-size:1.02rem;flex:1}
.m2-drill-id{
  font-size:.72rem;font-weight:700;letter-spacing:.1em;
  background:rgba(255,255,255,.22);padding:.1rem .45rem;flex:none;
}
.m2-drill-time{font-size:.8rem;opacity:.85;flex:none}
.m2-drill-b{padding:1.2rem 1.1rem}
.m2-drill-b > *:first-child{margin-top:0}
.m2-drill-spec{font-size:.9rem;margin-bottom:1.4rem}
.m2-drill-spec td.t{width:4.4rem}
.m2-drill-spec tr:last-child td{border-bottom:none}
.m2-drill .m2-metro,.m2-drill .m2-scale,.m2-drill .m2-audio{
  background:var(--cat-pale);padding:.9rem 1rem;margin:0 0 1rem;
}
.m2-drill-steps{margin:1.4rem 0 0;padding-left:1.3rem;font-size:.95rem;line-height:1.9}
.m2-drill-steps li{margin-bottom:.5rem}
.m2-drill-steps li::marker{color:var(--cat);font-weight:700}
.m2-drill-judge{
  border-left:4px solid var(--cat);background:var(--cat-pale);
  padding:.9rem 1.1rem;margin:1.6rem 0 0;font-size:.94rem;color:var(--ink-2);
}
.m2-drill-judge > b:first-child{
  font-family:"Hiragino Mincho ProN","Yu Mincho",serif;display:block;
  color:var(--cat);font-size:.8rem;letter-spacing:.18em;margin-bottom:.35rem;
}
.m2-drill-note{font-size:.88rem;color:var(--ink-3);margin:.9rem 0 0;line-height:1.8}

@media (max-width:600px){
  .m2-scale-toggle{margin-left:0}
  .m2-drill-b{padding:1rem .9rem}
  .m2-drill-h{padding:.6rem .9rem}
}

/* ── キー選択 ───────────────────────────────
   一度選べば localStorage に残り、全ページで同じキーになる。
   ドリルごとに選ばせない。 */
.m2-keys{display:flex;align-items:center;gap:.35rem;width:100%;margin-top:.3rem}
.m2-keys .m2-unit{margin-right:.2rem}
.m2-keys button{
  font:inherit;font-size:.8rem;padding:.28rem .7rem;cursor:pointer;line-height:1.3;
  background:#fff;border:1px solid var(--rule);color:var(--ink-2);
}
.m2-keys button span{font-size:.72rem;color:var(--ink-3);margin-left:.3rem}
.m2-keys button[aria-pressed="true"]{background:var(--cat);border-color:var(--cat);color:#fff}
.m2-keys button[aria-pressed="true"] span{color:#fff;opacity:.75}

/* ── 秒数計 ─────────────────────────────────── */
.m2-timer{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap}
.m2-timer-read{
  font-variant-numeric:tabular-nums;
  display:grid;place-items:center;flex:none;width:5rem;height:3.2rem;
  border:1px solid var(--rule);background:#fff;color:var(--ink-2);
  font-size:1.35rem;font-weight:700;
}
.m2-timer-read.lit{background:var(--cat);border-color:var(--cat);color:#fff}
.m2-timer-read.done{background:var(--cat-pale);border-color:var(--cat);color:var(--cat)}
.m2-timer-toggle{
  font:inherit;font-size:.88rem;padding:.4rem 1.1rem;cursor:pointer;margin-left:auto;
  background:#fff;border:1px solid var(--rule);color:var(--ink-2);
}
.m2-drill .m2-timer{background:var(--cat-pale);padding:.9rem 1rem;margin:0 0 1rem}
@media (max-width:600px){ .m2-timer-toggle{margin-left:0} }

/* 週メニューから道具への案内 */
.m2-tip{
  font-size:.85rem;color:var(--ink-3);margin:.7rem 0 0;line-height:1.7;
  border-left:2px solid var(--rule);padding-left:.8rem;
}
/* 献立のなかのドリルへのリンク。IDを目印にするので等幅で揃える */
.m2-kondate a b{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.82rem;letter-spacing:.02em;
}

/* ── 入口：今日やること ─────────────────────
   一覧を出すだけの棚にしない。開いた瞬間に「今日これ」が見えている状態を作る。 */
.m2-today{border:1px solid var(--cat-mid);background:#fff;margin:2rem 0 3rem}
.m2-today-h{
  display:flex;align-items:baseline;gap:.8rem;
  background:var(--cat);color:#fff;padding:.7rem 1.1rem;
}
.m2-today-h span{
  font-size:.74rem;font-weight:700;letter-spacing:.1em;flex:none;
  background:rgba(255,255,255,.22);padding:.1rem .5rem;
}
.m2-today-h b{font-family:"Hiragino Mincho ProN","Yu Mincho",serif;font-size:1.02rem}
.m2-today-b{padding:1.2rem 1.1rem;text-align:center}
.m2-today-b p{margin:0 0 .9rem}
.m2-today-b p:last-child{margin:0}

/* いま何週目か */
.m2-now{
  display:inline-block;margin-left:.5rem;background:var(--cat);color:#fff;
  font-size:.7rem;font-weight:700;padding:.05rem .45rem;vertical-align:.1em;
}

/* ── 入口：カード ───────────────────────────
   種類の色を各カードが持つ。--cat ではなく --c を使う。
   一覧では複数の色が同時に並ぶので、ページ変数では表せない。 */
.m2-cards{display:grid;gap:.9rem;margin:1.6rem 0 0}
.m2-card{
  display:block;text-decoration:none;color:var(--ink);
  border:1px solid var(--rule);border-left:4px solid var(--c);
  background:#fff;padding:.9rem 1.1rem;transition:.12s;
}
.m2-card:hover{border-color:var(--c);background:var(--p)}
.m2-card-t{
  display:inline-block;background:var(--p);color:var(--c);
  font-size:.72rem;font-weight:700;padding:.05rem .5rem;margin-bottom:.4rem;
}
.m2-card b{display:block;font-size:1rem;line-height:1.6;margin-bottom:.25rem}
.m2-card-x{display:block;font-size:.85rem;color:var(--ink-3);line-height:1.7}
.m2-card-m{display:block;font-size:.76rem;color:var(--ink-3);margin-top:.4rem}

/* 本文中のリンク色（.m2-content a）は詳細度が高く、ボタンやカードの
   色指定に勝ってしまう。文字が背景と同色になって消えるので、明示的に戻す。 */
.m2-content a.m2-cta{color:#fff}
.m2-content a.m2-card{color:var(--ink);text-decoration:none}
.m2-content a.m2-card b{color:var(--ink)}
.m2-content a.m2-card .m2-card-x,
.m2-content a.m2-card .m2-card-m{color:var(--ink-3)}
.m2-content a.m2-card .m2-card-t{color:var(--c)}

/* ── プラン表 ───────────────────────────────
   3つ並べる。教材の中身は同じで、違うのは質問できる回数だけ。
   そこが伝わらないと、高いほうが良い教材だと誤解される。 */
.m2-plans{display:grid;gap:1rem;margin:2rem 0 0}
.m2-plan{
  position:relative;border:1px solid var(--rule);background:#fff;
  padding:1.4rem 1.2rem;display:flex;flex-direction:column;gap:.45rem;
}
.m2-plan.is-push{border-color:var(--cat);border-width:2px;padding:1.3rem 1.1rem}
.m2-plan-tag{
  position:absolute;top:-.7rem;left:1.1rem;background:var(--cat);color:#fff;
  font-size:.7rem;font-weight:700;padding:.15rem .6rem;letter-spacing:.05em;
}
.m2-plan-n{
  font-family:"Hiragino Mincho ProN","Yu Mincho",serif;
  font-size:1.05rem;color:var(--cat);letter-spacing:.08em;
}
.m2-plan-p{font-size:1.9rem;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.2}
.m2-plan-p i{font-style:normal;font-size:.82rem;font-weight:400;color:var(--ink-3);margin-left:.3rem}
.m2-plan-s{font-size:.84rem;color:var(--ink-3)}
.m2-plan-q{font-size:.92rem;color:var(--ink-2);border-top:1px solid var(--rule);padding-top:.6rem;margin-top:.3rem}
.m2-plan-x{font-size:.86rem;color:var(--ink-3);line-height:1.75;flex:1}
.m2-plan .m2-cta{align-self:stretch;text-align:center;margin-top:.7rem}
.m2-plan-q.is-none{color:var(--ink-3)}
.m2-plan-q.is-none b{font-weight:400}
/* 枚数が変わっても崩れないように、列数を固定しない。
   2枚のときに4列指定が残っていると、細長い箱が2つ左に寄る。 */
@media (min-width:660px){
  .m2-plans{grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
}
/* 4列は本文幅（43rem）に収まらない。プラン表だけ外へ広げる。
   縮めて詰め込むと、価格とボタンが折り返して安っぽくなる。 */
@media (min-width:1000px){
  .m2-plans{gap:1rem}
  .m2-plan{padding:1.5rem 1.3rem}
}
.m2-plan-p{white-space:nowrap}
.m2-plan .m2-cta{padding:.6rem .8rem;white-space:nowrap}

/* ── 無料公開の回の末尾 ─────────────────────
   検索から来た人が最初に触るのはここ。読み終わった位置に置く。
   会員には出さない（買った人に売り込まない）。 */
.m2-sasoi{
  border-top:2px solid var(--cat);background:var(--cat-pale);
  padding:1.6rem 1.3rem;margin:4rem 0 0;
}
.m2-sasoi b:first-child{
  font-family:"Hiragino Mincho ProN","Yu Mincho",serif;display:block;
  color:var(--cat);font-size:.85rem;letter-spacing:.18em;margin-bottom:.6rem;
}
.m2-sasoi p{margin:0 0 .8rem}
.m2-sasoi ul{margin:.6rem 0 1.1rem;padding-left:1.3rem;font-size:.93rem;line-height:1.9}
.m2-sasoi ul li::marker{color:var(--cat)}
.m2-sasoi .m2-cta{display:block;text-align:center}
.m2-content a.m2-sasoi-x{color:var(--ink-3);font-size:.84rem}

/* ── 申し込み前の確認 ─────────────────────────
   継続課金であることと解約の条件を、買う直前に出す。
   小さく畳んだり、別ページに追い出したりしない。あとで必ずもめる。 */
.m2-kiyaku{
  border:1px solid var(--rule);background:#fff;
  padding:1.2rem 1.2rem;margin:1.6rem 0 0;font-size:.9rem;color:var(--ink-2);
}
.m2-kiyaku > b:first-child{
  font-family:"Hiragino Mincho ProN","Yu Mincho",serif;display:block;
  color:var(--cat);font-size:.8rem;letter-spacing:.18em;margin-bottom:.6rem;
}
.m2-kiyaku ul{margin:0;padding-left:1.3rem;line-height:1.95}
.m2-kiyaku ul li::marker{color:var(--cat)}
.m2-kiyaku p{margin:.9rem 0 0;font-size:.85rem}

/* 先行価格。通常価格に取り消し線を引いて並べる */
.m2-plan-p s{font-size:.55em;font-weight:400;color:var(--ink-3);margin-right:.25rem}
.m2-plan-u{
  font-size:.8rem;color:var(--cat);background:var(--cat-pale);
  padding:.4rem .6rem;line-height:1.7;
}
.m2-plan-u b{font-weight:700}


/* ── テーマの中に置かれたときの防御 ───────────
 * 固定ページ（/hibitore/ など）では、うちの HTML がテーマの本文領域に
 * 直接入る。**`.m2-content` は存在しない。**
 * テーマの a 要素の色・下線・背景がボタンやカードに乗ってしまうので、
 * ここだけは詳細度と !important で押さえる。
 * テーマは差し替わりうるので、相手を特定した指定はしない。
 */
a.m2-cta,
a.m2-cta:link,
a.m2-cta:visited,
a.m2-cta:hover,
a.m2-cta:focus,
a.m2-cta:active{
  color:#fff !important;
  background:var(--cat) !important;
  background-image:none !important;
  text-decoration:none !important;
  border:0 !important;
  box-shadow:none !important;
  border-radius:0 !important;
  display:inline-block;
  font-weight:700;
}
.m2-plan a.m2-cta{display:block;text-align:center}
a.m2-cta:hover{opacity:.88}

/* カード・図版・表の中のリンクも、テーマの装飾を落とす */
.m2-plan a,
.m2-zu a,
.m2-kondate a,
.m2-sasoi a,
.m2-chui a{
  background:none !important;
  box-shadow:none !important;
}
.m2-card,.m2-card:link,.m2-card:visited{
  color:var(--ink) !important;
  text-decoration:none !important;
  background:#fff !important;
}
.m2-card:hover{background:var(--p) !important}

/* 見出しや箇条書きに、テーマの余白・記号が乗らないようにする */
.m2-zu ul,.m2-sasoi ul,.m2-chui ul{list-style:disc}
.m2-plans{list-style:none}


/* ── 申込フォーム（Paid Member Subscriptions）───
 * 買う直前の画面。テーマ任せだと入力欄の枠が消え、送信ボタンが
 * ただのリンクの大きさになる。**ここが頼りなく見えると、そこで止まる。**
 * 相手のクラス名にだけ当てる。テーマには触らない。
 */
.pms-form{max-width:34rem;margin:0 auto}
.pms-form-fields-wrapper{list-style:none;margin:0;padding:0}
.pms-field{margin:0 0 1.3rem;list-style:none}
.pms-field label{
  display:block;font-size:.9rem;font-weight:700;color:var(--ink-2);margin:0 0 .35rem;
}
.pms-field input[type=text],
.pms-field input[type=email],
.pms-field input[type=password],
.pms-form input[type=text],
.pms-form input[type=email],
.pms-form input[type=password]{
  width:100%;font:inherit;font-size:1rem;
  padding:.7rem .8rem;
  border:1px solid var(--rule) !important;
  border-radius:0 !important;
  background:#fff !important;
  color:var(--ink) !important;
  box-shadow:none !important;
}
.pms-form input[type=text]:focus,
.pms-form input[type=email]:focus,
.pms-form input[type=password]:focus{
  outline:none;border-color:var(--cat) !important;
}

/* プランの選択肢。ラジオが小さくて押しにくいので箱ごと押せるようにする */
.pms-subscription-plan{
  border:1px solid var(--rule);padding:.9rem 1rem;margin:0 0 .6rem;background:#fff;
}
.pms-subscription-plan label{display:flex;align-items:center;gap:.6rem;font-weight:400;cursor:pointer}
.pms-subscription-plan input[type=radio]{accent-color:var(--cat);width:1.1rem;height:1.1rem;margin:0}

/* 送信ボタン。**申し込みの最後の一押しなので、大きく確実に** */
.pms-form input.pms-form-submit,
.pms-form input[name="pms_register"]{
  display:block;width:100%;
  font:inherit;font-size:1.05rem;font-weight:700;
  padding:.95rem 1.5rem;margin:1.8rem 0 0;
  background:var(--cat) !important;
  color:#fff !important;
  border:0 !important;border-radius:0 !important;
  box-shadow:none !important;text-shadow:none !important;
  cursor:pointer;
}
.pms-form input.pms-form-submit:hover{opacity:.88}

/* 割引コードの「Apply」は控えめに。主役は上のボタン */
.pms-form input#pms-apply-discount{
  font:inherit;font-size:.88rem;padding:.5rem 1.1rem;
  background:#fff !important;color:var(--ink-2) !important;
  border:1px solid var(--rule) !important;border-radius:0 !important;
  box-shadow:none !important;cursor:pointer;
}

/* 会員ページの表 */
.pms-account-section-wrapper table{width:100%;border-collapse:collapse}
.pms-account-section-wrapper th,
.pms-account-section-wrapper td{
  border-bottom:1px solid var(--rule);padding:.8rem .6rem;text-align:left;vertical-align:top;
}