/* =========================================================
   mc.css — マーチャントクラブ 共通スタイル
   トップ・入口ページ・投稿・固定ページの全部がこの1枚を読む。
   実装時は emanon-premium-child/assets/mc.css に置き、
   functions.php から親テーマの後に enqueue する（!important は使わない）。
   直したら必ず ?v= を上げること。
   ========================================================= */

/* =========================================================
   現行トップの全要素・全画像をそのまま踏襲。
   配色 = 白地 × 水色（主役）。ピンクは"差し"にとどめる。
     ・ボタンは水色の単色。混ぜると浮くので混ぜない
     ・ピンクを使うのは 締めのCTA1つ／現在地の点／✓／ホバーの罫 だけ
   ========================================================= */
:root{
  --ink:#12161c; --ink-2:#4b5560; --ink-3:#8b95a1;
  --bg:#fff; --bg2:#f2fbff; --line:#e3eff4;
  --aq:#14bedc;    /* 水色（主役） */
  --aq-d:#0e97b0;  /* 水色の濃い方（ホバー・文字） */
  --aq-t:#0a8098;  /* 白地で読ませる水色 */
  --pk:#ff3d8b;    /* パッションピンク（差し） */
  --pk-t:#e01a6f;
  /* 本文の組み。既定のまま（15px・行間2.3・46rem）だと1行48字になり、
     行が離れて「文字の羅列」に見える。1行34字前後・行間2.0・やや字間を開ける。 */
  --fs:18px;        /* 本文。note の記事本文と同じ（実測：18px / 行間36px / 柱620px） */
  --lh:2.0;         /* 行間。18×2.0＝36px。note と同値 */
  --ls:.02em;       /* 字間 */
  --mw:38rem;       /* 1行の長さ（約33字） */
  /* 記事本文（WordPressの素のHTMLを自動整形する側）の2つの幅。
     文字の柱と写真の幅が離れすぎると、写真だけが浮いて見える。
     この2つは必ずセットで決める。width-lab.preview.html で比べられる。 */
  --mwb:760px;      /* 記事本文の柱（約41字）。写真と同じ幅にそろえる */
  --media:760px;    /* 写真・ギャラリーの幅。柱と同一 */
  --media-video:900px;  /* 動画だけは少し外に出す（柱の1.18倍） */
  --gap-p:40px;     /* 段落と段落のあいだ。行間(36px)より明確に広く取る */
  --ink-b:#2b333c;  /* 本文の色。中間グレーより締める */
  --jp:"Hiragino Sans","Noto Sans JP","Yu Gothic Medium",sans-serif;
  --en:"Helvetica Neue",Arial,sans-serif;
  /* 見本ページだけ上に黒い帯（.tag）が乗る。本番は 0 で、ヘッダーが画面の一番上に付く */
  --tagh:0px;
}
body:has(> .tag){--tagh:31px}
/* ログイン中は WordPress の管理バーが上に乗る。潜り込ませない */
body.admin-bar{--barh:32px}
@media(max-width:782px){ body.admin-bar{--barh:46px} }
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--jp);
  line-height:1.9;-webkit-font-smoothing:antialiased;font-feature-settings:"palt";overflow-x:hidden}
img{max-width:100%;display:block}

/* ---------- 日本語の改行 ----------
   放っておくと「…ください。／い。」のように最後の行に1〜2文字だけ残る。
   実測で 32/32/2字 → 29/25/12字 に直ることを確認して入れている。
     word-break:auto-phrase … 文節の切れ目で折り返す（日本語向け）
     text-wrap:pretty       … 最後の行が極端に短くなるのを避ける
     text-wrap:balance      … 見出しは各行の長さを揃える
     line-break:strict      … 禁則処理を厳しく
   `.nb`（nowrapのかたまり）はこれより強いので、これまでの指定はそのまま効く。 */
body{word-break:auto-phrase;line-break:strict}
p,li,dd,dt,figcaption,.lead,.cap,.note2,.v2{text-wrap:pretty}
h1,h2,h3,h4,.h2,.qt,.t6,.qbig p,.credoline,.leadline,.say h2,.idcard .rl2,.prose .lead3,
.exp h3,.t12 h3,.nx h3,.pil h3,.six h3,.vc p,.note p{text-wrap:balance}

/* ★ `a{color:inherit}` だけでは足りない。親テーマ Emanon が同じ詳細度(0,0,1)で
   `a{color:#004e8e}` を出しており、しかも **mc.css より後ろ**に読まれるので負ける。
   `body` を1つ足して (0,0,2) にすれば、順番に関係なく勝てる。
   これを入れないと、色を書いていないリンク（.nx や .t12 .c など）の文字が濃紺になる。
   ホバー側の打ち消しはファイル末尾にまとめてある。 */
a{color:inherit;text-decoration:none}
body a{color:inherit}

.tag{position:fixed;top:0;left:0;right:0;z-index:500;background:var(--ink);color:#fff;
  font-size:11.5px;letter-spacing:.14em;padding:8px 18px}
.wrap{max-width:1220px;margin:0 auto;padding:0 30px;position:relative;z-index:2}
#bar{position:fixed;left:0;top:calc(var(--tagh) + var(--barh,0px));height:2px;width:0;background:var(--aq);z-index:499}

/* 右の縦タブ */
/* 右端の追尾タブ。
   ★ 2026-08-12 まで、水色(#14bedc)とピンク(#ff3d8b)の**べた塗りが2つ隣り合って**いた。
     どちらも彩度が最大なので互いにチカチカして、菅さんに「蛍光色がチカチカして見えづらい／
     全体のバランスを見た時に醜い」と言われた。
     色は「面」でなく「1本の線」に減らし、面はすりガラスの黒にした。
   ★ 白いすりガラス案も作ったが、**白地の下層ページ（19枚中17枚）でほぼ消えた**ので却下。
     黒なら映像の上でも白地でも同じように読める（実測で確認）。
   色は hover のときだけ面に戻る（＝押せることは伝わる）。 */
.tabs{position:fixed;right:0;top:52%;transform:translateY(-50%);z-index:340;display:flex;flex-direction:column;gap:10px}
.tabs a{writing-mode:vertical-rl;font-size:12.5px;letter-spacing:.16em;font-weight:600;
  padding:22px 13px;color:#fff;background:rgba(16,22,28,.72);backdrop-filter:blur(10px);
  border-left:3px solid transparent;
  transition:padding .35s,background .35s,border-color .35s}
.tabs a.a{border-left-color:#5ad3e8}
.tabs a.p{border-left-color:#ff8fbb}   /* ピンクは線1本だけ＝差し */

/* 左の現在地 */
.idx{position:fixed;left:20px;top:50%;transform:translateY(-50%);z-index:330;display:flex;flex-direction:column;gap:13px}
.idx a{display:block;width:20px;height:2px;background:rgba(18,22,28,.18);transition:all .4s}
.idx a.on{background:var(--pk);width:38px}   /* ピンクはここが2つ目 */

/* 背景エフェクト */
.fx{position:relative;overflow:hidden;isolation:isolate}
.fx>canvas.ml-fx{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}
.fx>.wrap,.fx>.bleed{position:relative;z-index:2}
.fx::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,.64))}
.fx.soft::after{background:radial-gradient(135% 105% at 18% 36%,rgba(255,255,255,.88),rgba(255,255,255,.52) 78%)}
.glow{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .6s;
  background:radial-gradient(460px circle at var(--mx,50%) var(--my,50%),rgba(20,190,220,.16),transparent 70%)}


/* ---------- ヘッダー ---------- */
.hd{position:fixed;top:calc(var(--tagh) + var(--barh,0px));left:0;right:0;z-index:350;transition:background .4s,box-shadow .4s}
/* 映像の上だと白文字が沈む。ヘッダーの裏だけに薄い暗幕を敷く（下へ抜ける） */
/* 暗幕は「映像を隠す幕」ではなく「文字の足場」。濃く広く敷くほど、
   上端が黒い帯に見えてメニューが映像から浮く（2026-08-12 菅さん指摘）。
   映像の上端は実測で平均輝度211＝かなり明るいので、薄くしすぎても読めない。
   .66 → .34（50%）→ 0 で、下端が映像に溶ける長さに詰めてある。 */
.hd::before{content:"";position:absolute;left:0;right:0;top:0;height:172%;z-index:-1;pointer-events:none;
  background:linear-gradient(rgba(6,14,20,.66),rgba(6,14,20,.34) 50%,rgba(6,14,20,0));
  transition:opacity .4s}
.hd.solid::before{opacity:0}
.hd.solid{background:rgba(255,255,255,.95);backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--line)}
/* max-width と margin は .hd-in と必ず同じ値にすること。
   ここが全幅のままだと、1920px で電話・SNS の右端が .hd-in より 240px も外に出て
   「上下の段が大きくずれている」ように見える（2026-08-12 実測・菅さん指摘）。 */
.hd-top{display:flex;align-items:center;flex-wrap:wrap;row-gap:2px;gap:14px;padding:6px 30px;font-size:11.5px;
  color:rgba(255,255,255,.92);letter-spacing:.05em;justify-content:flex-end;max-width:1440px;margin:0 auto}
.hd.solid .hd-top{color:var(--ink-2)}
/* 電話・アクセス
   ★ color を必ず自分で書くこと。親テーマ Emanon の `a{color:#004e8e}`（濃紺）は
     継承より強いので、書かないと電話番号もSNSの丸も青くなる（2026-08-12 菅さん指摘
     「非常に醜い」／実測 rgb(0,78,142)）。フッターで同じ事故を起こしたのと同じ原因。 */
.hd-top .ut,.hd-top .sns a{color:inherit}
.hd-top .ut{display:inline-flex;align-items:center;gap:7px;padding:5px 4px;
  transition:color .3s;text-shadow:0 1px 10px rgba(0,0,0,.45)}
.hd.solid .hd-top .ut{text-shadow:none}

.hd-top .ut svg{width:14px;height:14px;fill:currentColor;opacity:.72;flex:none}

.hd-top .ut b{font-family:var(--en);font-size:13px;font-weight:700;letter-spacing:.06em}
.hd-top .sep{width:1px;height:12px;background:currentColor;opacity:.28}
/* SNS：丸のアイコンボタン */
.hd-top .sns{display:inline-flex;align-items:center;gap:6px;margin-left:2px}
.hd-top .sns a{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  border:1px solid currentColor;opacity:.6;transition:all .3s}
.hd-top .sns a svg{width:12px;height:12px;fill:currentColor}


/* 上下対称の余白。以前は上4px/下13pxで、上に .hd-top（48px）が乗っていた。
   その行を外したので、ここを対称にしないとロゴが上に張り付いて見える。 */
.hd-in{display:flex;align-items:center;gap:22px;padding:13px 30px;max-width:1440px;margin:0 auto}
.logo{font-family:var(--en);font-size:15px;letter-spacing:.24em;font-weight:700;color:#fff;
  white-space:nowrap;transition:color .4s;text-shadow:0 1px 10px rgba(0,0,0,.5)}
.hd.solid .logo{color:var(--ink);text-shadow:none}
.logo i{display:inline-block;width:8px;height:8px;background:var(--aq);margin-right:9px}
.nav{display:flex;gap:20px;margin-left:auto;flex-wrap:wrap}
.nav a{font-size:12px;color:#fff;letter-spacing:.02em;line-height:1.5;text-shadow:0 1px 10px rgba(0,0,0,.55);
  padding-bottom:4px;border-bottom:1px solid transparent;transition:color .4s,border-color .3s;text-align:center}
.hd.solid .nav a{color:var(--ink-2);text-shadow:none}

.nav a b{display:block;font-weight:600;font-size:13.5px}
.nav a span{display:block;font-size:11px;opacity:.82;margin-top:2px}
/* 映像の上にいるときだけさらに少し大きく・影を強く。
   暗幕を薄くしたぶんの読みやすさをここで取り返す。白ヘッダー(.solid)には効かせない。 */
.hd:not(.solid) .nav a b{font-size:14.5px;text-shadow:0 1px 2px rgba(0,0,0,.75),0 2px 18px rgba(0,0,0,.55)}
.hd:not(.solid) .nav a span{font-size:11px;opacity:.92;text-shadow:0 1px 2px rgba(0,0,0,.8)}
/* 検索：丸のまま置いておいて、押すと横に伸びる。中身はWPの本物のGETフォーム */
.srch{display:flex;align-items:center;height:30px;border:1px solid rgba(255,255,255,.42);
  border-radius:15px;color:#fff;transition:border-color .35s,background .35s}
.hd.solid .srch{border-color:var(--line);color:var(--ink-2)}
.srch button{width:28px;height:28px;flex:none;display:grid;place-items:center;
  background:none;border:0;padding:0;color:inherit;cursor:pointer}
.srch button svg{width:14px;height:14px;fill:currentColor;opacity:.8}
.srch input[type=search]{width:0;opacity:0;padding:0;border:0;background:none;outline:none;
  font:inherit;font-size:12px;color:inherit;transition:width .4s cubic-bezier(.4,.4,0,1),opacity .3s}
.srch input::placeholder{color:currentColor;opacity:.5}
.srch.open{background:rgba(255,255,255,.1)}
.hd.solid .srch.open{background:#f2f5f7;border-color:transparent}
.srch.open input[type=search]{width:150px;opacity:1;padding:0 4px 0 14px}

.hd-cta{font-size:11.5px;letter-spacing:.08em;background:var(--aq);color:#fff;padding:11px 18px;font-weight:700}

/* ---------- ボタン（単色。混ぜない） ---------- */
.acts{display:flex;flex-wrap:wrap;gap:13px;margin-top:34px}
.btn{display:inline-flex;align-items:center;gap:11px;background:var(--aq);color:#fff;
  font-size:14px;font-weight:700;letter-spacing:.05em;padding:18px 36px;border:0;cursor:pointer;
  transition:transform .3s cubic-bezier(.4,.4,0,1),box-shadow .3s,background .3s}

.btn.pink{background:var(--pk)}                       
.btn.glass{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.42);color:#fff;backdrop-filter:blur(6px)}

.btn.ghost{background:none;border:1px solid var(--aq);color:var(--aq-t);font-weight:700}

.btn i{font-style:normal;font-family:var(--en);opacity:.72}

/* ---------- ヒーロー ---------- */
.hero{position:relative;height:100vh;min-height:600px;overflow:hidden;background:#0d1418}
.hero .stage{position:absolute;inset:0;overflow:hidden;will-change:transform,filter}
/* ★ 動画ファイルには上下の黒帯が焼き込まれている（2026-08-12 実測）。
   a943947191ed…mp4 は 1920×1080 だが、絵は中央の 1920×820（＝2.34:1 のシネスコ）だけで、
   上下 130px ずつが真っ黒。object-fit:cover は「動画の絵」ではなく「動画のコマ」を
   合わせるので、黒帯もそのまま画面に出る。結果、画面の上下12%が黒い帯になり、
   その中にグローバルメニューが乗るため「映像から浮いた黒帯」に見えていた。
   1080/820 = 131.707% に伸ばし、はみ出した (131.707-100)/2 = 15.854% を上へ逃がして
   黒帯だけを切り落とす。.stage の overflow:hidden とセット（外すと映像が下へ漏れる）。
   別の動画に差し替えるときは黒帯の実測値からこの2つの数字を出し直すこと。 */
.hero video{position:absolute;left:0;top:-15.854%;width:100%;height:131.707%;object-fit:cover}
.hero .scrim{position:absolute;inset:0;
  background:linear-gradient(102deg,rgba(6,14,20,.76) 0%,rgba(6,14,20,.4) 40%,rgba(6,14,20,0) 70%),
             linear-gradient(to top,rgba(6,14,20,.62),transparent 46%)}
.hero .tint{position:absolute;inset:0;mix-blend-mode:soft-light;opacity:.5;
  background:linear-gradient(120deg,#14bedc 0%,rgba(20,190,220,.25) 60%,transparent 100%)}
.hero .in{position:absolute;left:0;right:0;bottom:0;padding:0 0 82px;z-index:3}
.kick{display:inline-flex;align-items:center;gap:12px;font-family:var(--en);font-size:10.5px;
  letter-spacing:.36em;color:#7fe4f5;font-weight:700}
.kick::before{content:"";width:30px;height:2px;background:var(--aq)}
.hero h1{margin:22px 0 0;color:#fff;font-size:clamp(36px,7vw,88px);font-weight:700;line-height:1.2;
  letter-spacing:.01em;text-shadow:0 2px 44px rgba(0,0,0,.34)}
.hero .sub{margin:22px 0 0;color:#e6edf1;font-size:15.5px;max-width:32rem;line-height:2.1}
.hero .snd{position:absolute;right:78px;bottom:96px;z-index:4;font-family:var(--en);font-size:10px;
  letter-spacing:.22em;color:#fff;font-weight:700;background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.32);padding:10px 16px;cursor:pointer;backdrop-filter:blur(6px)}
.hero .scroll{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:4;
  font-family:var(--en);font-size:9.5px;letter-spacing:.3em;color:rgba(255,255,255,.75)}
.hero .scroll::after{content:"";display:block;width:1px;height:34px;background:rgba(255,255,255,.55);
  margin:10px auto 0;transform-origin:top;animation:drip 2.2s cubic-bezier(.4,.4,0,1) infinite}
@keyframes drip{0%{transform:scaleY(0)}45%{transform:scaleY(1)}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- 見出しの型 ---------- */
.sec{padding:130px 0}
.lab{display:inline-flex;align-items:center;gap:11px;font-family:var(--en);font-size:10.5px;
  letter-spacing:.32em;color:var(--aq-t);font-weight:700}
.lab::before{content:"";width:28px;height:2px;background:var(--aq)}
.h2{margin:30px 0 0;font-size:clamp(26px,4.4vw,52px);font-weight:700;line-height:1.4}
/* 効かせたい語は3通りを使い分ける。全部同じだと単調になる。
   a=水色＋ピンクの下線 ／ p=ピンク＋水色の下線 ／ g=水色→ピンクのグラデ文字
   ※ inline-block にすると語が1つの塊になり、後ろの助詞1文字だけが次行に落ちる
     （「挑戦者の道へ」の「へ」）。inline のまま background で線を引く。 */
em.a,em.p,em.g{font-style:normal;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
em.a{color:var(--aq-d);background-image:linear-gradient(var(--pk),var(--pk));
  background-repeat:no-repeat;background-size:100% 3px;background-position:0 calc(100% - .1em)}
em.p{color:var(--pk-t);background-image:linear-gradient(var(--aq),var(--aq));
  background-repeat:no-repeat;background-size:100% 3px;background-position:0 calc(100% - .1em)}
em.g{background-image:linear-gradient(100deg,var(--aq) 0%,#7ab4dd 46%,var(--pk) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
/* 語＋直後の助詞を1かたまりにして、1文字だけの行送りを防ぐ。
   ※ ここを <span> にしてはいけない。reveal-2.js の rise は「:scope>span」を
     "中の箱"とみなすため、この span が拾われて display:block にされ、
     行が1つ余分に空く（「ビジネスコミュニティ。」だけ離れて見えた原因）。 */
.nb{white-space:nowrap;font-weight:inherit}
.lead{margin:24px 0 0;font-size:18px;color:var(--ink-b);max-width:34rem;line-height:1.95;
  letter-spacing:.015em}

/* ---------- 文章の面＋写真の横並び。CREEDは写真が右、ROADは左（交互にする） ----------
   ※ 写真自体の解像度がそこまで高くないので、全幅で敷かずに半分の枠に収める */
.wrap.creed,.wrap.road{display:grid;gap:0;align-items:center}
.wrap.creed{grid-template-columns:1fr 1.02fr}
.wrap.road{grid-template-columns:1.02fr 1fr}
/* 見出しは面の外・上に独立させる（他の節と同じ大きさで通す） */
.head-out{position:relative;z-index:3;margin-bottom:44px}
.creed .panel,.road .panel{background:#f5f9fb;padding:56px 54px;position:relative;z-index:3}
.creed .panel .lead,.road .panel .lead{max-width:none;margin-top:0}
.creed .panel .lead + .lead,.road .panel .lead + .lead{margin-top:26px}
.creed .panel .acts,.road .panel .acts{margin-top:38px}
/* 指針の1行。ここは埋もれさせない */
.guide{display:inline-block;margin:26px 0 0;padding:11px 22px;font-size:13.5px;font-weight:700;
  letter-spacing:.16em;color:var(--aq-t);background:#fff;border:1px solid var(--aq)}
.creed figure,.road figure{margin:0;overflow:hidden;position:relative;z-index:2}
.creed figure{margin-left:-40px}
.road  figure{margin-right:-40px}
.creed figure img,.road figure img{width:100%;aspect-ratio:4/3;object-fit:cover}

/* =========================================================
   本文から1フレーズを昇格させた見出し
   長い段落の前に置いて、いきなり文字が始まらないようにする。
   本文の言葉をそのまま使うので、内容が増えない。
   ========================================================= */
.read p.pull,.pull{margin:0 0 34px;font-size:clamp(21px,2.7vw,32px);font-weight:700;line-height:1.72;
  letter-spacing:.01em;color:var(--ink);max-width:22em;text-wrap:balance}
.pull em{font-style:normal;color:var(--aq-d);
  background-image:linear-gradient(var(--pk),var(--pk));background-repeat:no-repeat;
  background-size:100% 3px;background-position:0 calc(100% - .08em);
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
/* 段落の締めを一段強く出す */
.read p.closer,.closer{margin:36px 0 0;padding-top:26px;border-top:1px solid var(--line);
  font-size:clamp(17px,2vw,21px);font-weight:700;line-height:1.9;color:var(--pk-t);
  letter-spacing:.01em;text-wrap:balance}

/* =========================================================
   「こんな方は大歓迎です」— 来る人の言葉として見せる
   薄い箱に小さなチェックを並べると、大事な所なのに素通りされる。
   箱をやめ、1つずつを台詞として大きく置く。
   ========================================================= */
.voices4{margin:52px auto 46px;position:relative;z-index:2;border-top:1px solid var(--line);
  max-width:var(--mw)}
.voices4 .v4{position:relative;display:grid;grid-template-columns:auto 1fr;gap:22px;
  align-items:baseline;padding:26px 0 24px 0;border-bottom:1px solid var(--line);
  transition:padding-left .4s cubic-bezier(.4,.4,0,1)}
.voices4 .v4::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;
  background:linear-gradient(90deg,var(--aq),var(--pk));transform:scaleX(0);transform-origin:left;
  transition:transform .55s cubic-bezier(.4,.4,0,1)}


.voices4 .qm4{font-family:var(--en);font-size:40px;line-height:.7;color:var(--aq);
  transition:color .35s}

.voices4 .tx4{font-size:clamp(17px,2.1vw,21px);font-weight:700;line-height:1.85;color:var(--ink);
  letter-spacing:.01em;text-wrap:balance}

@media(max-width:960px){
  .voices4 .v4{gap:14px;padding:20px 0 18px}
  .voices4 .qm4{font-size:30px}
}

/* ---------- 数字 ---------- */
.figs{display:grid;grid-template-columns:repeat(3,1fr);margin-top:70px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.fig{padding:52px 12px 56px;text-align:center;border-left:1px solid var(--line)}
.fig:first-child{border-left:0}
/* 何の数字かを先に読ませる。ラベルを上・はっきりと */
.fig .lb{display:block;font-size:14px;font-weight:700;letter-spacing:.1em;color:var(--ink);
  margin-bottom:18px}
.fig .lb::after{content:"";display:block;width:26px;height:2px;background:var(--aq);
  margin:12px auto 0}
.fig b{display:block;font-family:var(--en);font-size:clamp(52px,7.4vw,92px);font-weight:700;
  line-height:.95;letter-spacing:-.03em;color:var(--aq)}
.fig b em{font-style:normal;font-size:.3em;margin-left:6px;color:var(--ink-2);font-family:var(--jp);
  font-weight:700;letter-spacing:0}

/* ---------- 3本柱（現行どおり写真つき） ---------- */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:70px}
.pil{background:#fff;border:1px solid var(--line);overflow:hidden;
  transition:transform .45s cubic-bezier(.4,.4,0,1),box-shadow .45s}

.pil figure{margin:0;aspect-ratio:16/10;overflow:hidden;background:var(--bg2)}
.pil figure img{width:100%;height:100%;object-fit:cover;transition:transform .8s}

.pil .bd{padding:28px 26px 32px}
.pil .no{font-family:var(--en);font-size:22px;letter-spacing:.1em;color:var(--aq-t);font-weight:700;line-height:1.2}
.pil h3{margin:12px 0 0;font-size:19px;font-weight:700;line-height:1.55}
.pil p{margin:14px 0 0;font-size:13.5px;color:var(--ink-2);line-height:2.1}

/* ---------- 手にする未来 6項目（写真つき） ---------- */
.six{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:64px}
.six .card{background:#fff;border:1px solid var(--line);overflow:hidden;
  transition:transform .45s cubic-bezier(.4,.4,0,1),box-shadow .45s}

.six figure{margin:0;aspect-ratio:16/10;overflow:hidden;background:var(--bg2)}
.six figure img{width:100%;height:100%;object-fit:cover;transition:transform .8s}

.six .bd{padding:26px 24px 30px}
/* ★ 10.5px は「番号」ではなく「小さな札」に見える（2026-08-12 菅さん「極小すぎる」）。
   数字として読める大きさにする。スマホではさらに一段上げる（下のスマホ用ブロック）。 */
.six .n{font-family:var(--en);font-size:22px;letter-spacing:.1em;color:var(--aq-t);font-weight:700;line-height:1.2}
.six h3{margin:12px 0 0;font-size:16.5px;font-weight:700;line-height:1.65}
.six p{margin:13px 0 0;font-size:13.5px;color:var(--ink-2);line-height:2.1}

/* ---------- 声（帯） ---------- */
.rail{display:flex;gap:22px;overflow-x:auto;margin-top:34px;padding:6px 30px 28px;
  scroll-snap-type:x mandatory;position:relative;z-index:2}
.rail::-webkit-scrollbar{height:3px}
.rail::-webkit-scrollbar-thumb{background:var(--aq)}
.vc{flex:0 0 330px;min-width:0;scroll-snap-align:start;background:#fff;border:1px solid var(--line);
  padding:0 0 28px;transition:transform .4s cubic-bezier(.4,.4,0,1),box-shadow .4s}

.vc figure{margin:0;overflow:hidden;aspect-ratio:4/3;background:var(--bg2)}
.vc figure img{width:100%;height:100%;object-fit:cover;transition:transform .9s}

.vc .bd{padding:24px 26px 0}
.vc p{font-size:13.5px;color:var(--ink-2);line-height:2.1;margin:0}
.vc .nm{margin-top:20px;padding-top:15px;border-top:1px solid var(--line);font-size:14px;font-weight:700}
.vc .rl{font-size:11px;letter-spacing:.1em;color:var(--pk-t);margin-top:4px}

/* ---------- 会員サムネのスライダー（現行の24枚） ---------- */
.strip{position:relative;z-index:2;margin-top:56px;overflow:hidden}
.strip .row{display:flex;gap:12px;width:max-content;animation:slide 64s linear infinite}
.strip .row.rev{animation-direction:reverse;margin-top:12px}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.strip .cell{flex:0 0 146px;min-width:0;height:146px;overflow:hidden;background:var(--bg2)}
.strip .cell img{width:100%;height:100%;object-fit:cover;transition:transform .8s,filter .5s}


/* ---------- メンバーの声20件（サムネつきカード） ---------- */
.notes{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:56px}
.note{display:block;background:#fff;border:1px solid var(--line);overflow:hidden;
  transition:transform .4s cubic-bezier(.4,.4,0,1),box-shadow .4s,border-color .4s}

.note figure{margin:0;aspect-ratio:16/9;overflow:hidden;background:var(--bg2)}
.note figure img{width:100%;height:100%;object-fit:cover;transition:transform .8s}

.note .bd{padding:18px 18px 22px}
.note .cat{font-family:var(--en);font-size:9.5px;letter-spacing:.2em;color:var(--pk-t);font-weight:700}
.note p{margin:8px 0 0;font-size:13px;font-weight:600;line-height:1.85}

/* ---------- 書籍：スライダー（小さめ） ---------- */
.books{position:relative;z-index:2;margin-top:52px;overflow:hidden}
.books .row{display:flex;gap:14px;width:max-content;animation:slide 56s linear infinite}
/* flex項目の min-width は既定 auto ＝ 画像の実寸まで膨らむ。0 を明示しないと縮まない */
.books img{flex:0 0 101px;width:101px;min-width:0;aspect-ratio:3/4;object-fit:cover;background:var(--bg2);
  box-shadow:0 6px 18px rgba(14,151,176,.12);transition:transform .5s cubic-bezier(.4,.4,0,1),box-shadow .5s}


/* ---------- 代表 ---------- */
.rep{display:grid;grid-template-columns:.82fr 1.18fr;gap:70px;align-items:center}
.rep figure{margin:0;overflow:hidden;position:relative}
.rep figure img{width:100%;aspect-ratio:4/5;object-fit:cover}
.rep figure::before{content:"";position:absolute;left:-16px;top:-16px;right:32px;bottom:32px;
  border:1px solid var(--aq);z-index:-1}
.rep h2{margin:18px 0 0;font-size:clamp(21px,3vw,35px);font-weight:700;line-height:1.45}
.rep p{margin:20px 0 0;font-size:14px;color:var(--ink-2);line-height:2.2}

/* ---------- 中央寄せの節 ---------- */
.mid{max-width:var(--mw);margin:0 auto;text-align:center}
.mid p{font-size:var(--fs);color:var(--ink-b);line-height:var(--lh);letter-spacing:var(--ls);
  margin:var(--gap-p) 0 0;text-align:left}
.mid .acts{justify-content:center}

/* ---------- さあ、今日は誰を（動画） ---------- */
.credo{position:relative;overflow:hidden;min-height:70vh;display:flex;align-items:center;
  background:#0d1418;padding:110px 0 120px}
.credo video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.6}
.credo .scrim{position:absolute;inset:0;background:linear-gradient(rgba(6,14,20,.44),rgba(6,14,20,.68))}
.credo .wrap{text-align:center;color:#fff}
.credo h2{margin:20px 0 0;font-size:clamp(26px,5vw,60px);font-weight:700;line-height:1.4;text-shadow:0 2px 40px rgba(0,0,0,.4)}
/* 見出しは最大60px。本文が15pxだと落差が大きすぎて、締めの一文が添え物に見える
   （2026-08-12 菅さん）。本文の基準（.lead 18px）に合わせる。 */
.credo p{margin:30px 0 0;font-size:18px;color:#eaf1f5;line-height:2.15;letter-spacing:.01em}
.credo .lab{color:#7fe4f5;justify-content:center}
.credo .ph{max-width:860px;margin:44px auto 0}

/* ---------- 個別相談 ---------- */
.cons{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;
  background:#fff;border:1px solid var(--line);padding:56px;position:relative;z-index:2}
.cons::before{content:"";position:absolute;left:0;top:0;right:0;height:3px;background:var(--aq)}
.cons h2{margin:16px 0 0;font-size:clamp(26px,3.9vw,46px);font-weight:700;line-height:1.42}
.cons h2 em{font-style:normal;color:var(--aq-d)}
/* 「何の話なのか」が読み取れず、ただの締めの囲みに見えていた。
   サービス名そのものを大きく出し、限定の条件は差し色のピンクで添える */
.cons .big{margin:22px 0 0;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  font-size:clamp(22px,2.7vw,33px);font-weight:600;letter-spacing:.07em;color:var(--aq-d);line-height:1.4}
.cons .big span{font-size:13px;font-weight:600;letter-spacing:.08em;color:#fff;
  background:var(--pk);padding:6px 14px;border-radius:999px;white-space:nowrap}
.cons .cap{margin:14px 0 0;font-size:16.5px;font-weight:500;color:var(--ink-2);line-height:1.9}
.cons p{margin:20px 0 0;font-size:16px;color:var(--ink-2);line-height:2.15}

/* ---------- THE GIFT ---------- */
.gift{position:relative;overflow:hidden;padding:120px 0;
  background:linear-gradient(120deg,#e9faff 0%,#ffffff 58%,#fff2f7 100%)}
.gift::before,.gift::after{content:"";position:absolute;border-radius:50%;filter:blur(72px);z-index:0}
.gift::before{width:540px;height:540px;left:-150px;top:-170px;background:rgba(20,190,220,.34);animation:f1 16s ease-in-out infinite}
.gift::after{width:420px;height:420px;right:-120px;bottom:-150px;background:rgba(255,61,139,.16);animation:f2 19s ease-in-out infinite}
@keyframes f1{0%,100%{transform:translate(0,0)}50%{transform:translate(60px,50px)}}
@keyframes f2{0%,100%{transform:translate(0,0)}50%{transform:translate(-50px,-40px)}}
.gift .wrap{position:relative;z-index:2}
.gift h2{margin:18px 0 0;font-size:clamp(24px,3.8vw,42px);font-weight:700;line-height:1.45;text-align:center}
.gift .ph{max-width:860px;margin:34px auto 0;overflow:hidden}
.gift .body{max-width:42rem;margin:30px auto 0;font-size:14.5px;color:var(--ink-2);line-height:2.3}
.gift .body p{margin:0 0 16px}
.chk{max-width:42rem;margin:32px auto 0;display:grid;gap:12px;padding:0}
.chk li{list-style:none;display:flex;gap:13px;align-items:flex-start;background:rgba(255,255,255,.78);
  border:1px solid rgba(20,190,220,.26);padding:16px 20px;font-size:14px;line-height:1.9}
.chk li::before{content:"✓";flex:none;font-weight:700;color:var(--pk);font-size:15px}
/* 締めの登録フォーム。2026-08-12 菅さん「もっとオシャレに／文字が小さい」。
   ・上辺に水色→ピンクの細い帯を1本（このページで唯一の“差し”）
   ・角の内側に薄い水色のにじみを置いて、白い箱が浮いて見えるようにする
   ・影を少し深く、余白を広げる */
.form{position:relative;max-width:36rem;margin:44px auto 0;background:#fff;
  border:1px solid var(--line);padding:44px 40px 40px;overflow:hidden;
  box-shadow:0 24px 64px rgba(14,151,176,.16)}
.form::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;
  background:linear-gradient(90deg,var(--aq) 0%,var(--aq) 62%,var(--pk) 100%)}
.form::after{content:"";position:absolute;right:-90px;bottom:-90px;width:240px;height:240px;
  border-radius:50%;background:radial-gradient(circle,rgba(20,190,220,.16),transparent 70%);
  pointer-events:none}
.form > *{position:relative;z-index:1}
.form h3{margin:0;font-family:var(--en);font-size:26px;font-weight:700;letter-spacing:.14em;
  line-height:1.5;text-align:center;color:var(--ink)}
.form h3 .sub2{display:block;margin-top:8px;font-family:var(--jp);font-size:13.5px;
  font-weight:500;letter-spacing:.02em;color:var(--ink-3)}
.form .row2{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap}
.form input{flex:1 1 240px;border:1px solid var(--line);padding:17px 18px;font:inherit;font-size:15.5px;
  outline:none;transition:border-color .3s,box-shadow .3s}
.form input:focus{border-color:var(--aq);box-shadow:0 0 0 3px rgba(20,190,220,.16)}
/* MyASP の登録フォーム。送信ボタンは <input type="submit"> なので .btn を当て直す */
.form .myForm{margin:0}
.form input[type=submit].btn{flex:0 0 auto;padding:17px 34px;border:0;color:#fff;background:var(--aq);
  font:inherit;font-size:15.5px;font-weight:700;letter-spacing:.06em;cursor:pointer}

.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.form .note2{margin:22px 0 0;font-size:12.5px;color:var(--ink-2);text-align:center;line-height:2.1}

/* ---------- フッター ---------- */
.ft{background:#16181A;color:#c9ccd0;padding:78px 0 26px}
.ft-g{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:38px}
.ft h4{font-size:12.5px;letter-spacing:.08em;color:#fff;font-weight:700;margin:0 0 16px}
.ft ul{list-style:none;margin:0;padding:0}
.ft li{font-size:13px;line-height:2.35}
/* フッターのリンク色。
   親テーマ Emanon が `a, .c-link{color:#004e8e}`（濃紺）を当てており、
   ほぼ黒の背景(#16181A)に沈んで**コントラスト比 2.10**＝ほぼ読めない状態だった（2026-08-12 実測）。
   mc.css の a は color:inherit なので、ここで明示しないと親テーマの色が勝つ。
   本文(#c9ccd0)より一段明るくして「押せる」ことが分かるようにする。比 12.6。 */
.ft a{color:#dfe3e7;transition:color .18s}
.ft a:focus-visible{color:#7fe4f5}
.ft .lg{font-family:var(--en);font-size:17px;letter-spacing:.24em;color:#fff;font-weight:700}
.ft .lg i{display:inline-block;width:8px;height:8px;background:var(--aq);margin-right:8px}
.ft .cp{border-top:1px solid #2a2d31;margin-top:48px;padding-top:20px;font-size:11.5px;color:#7b8188}

@media(max-width:1100px){ .notes{grid-template-columns:repeat(2,1fr)} }
@media(max-width:560px){
  .figs{grid-template-columns:1fr}
  .fig{border-left:0;border-top:1px solid var(--line);padding:34px 8px 38px}
  .fig:first-child{border-top:0}
}
@media(max-width:960px){
  /* 見本の帯。2行になるとヘッダーに被るので1行に留める（本番には無い要素） */
  .tag{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .idx,.tabs{display:none}
  .hero{height:auto;min-height:0;padding-top:64vh}
  .hero .stage{height:64vh;inset:auto 0 auto 0;top:0}
  .hero .in{position:relative;padding:0 0 56px}
  .hero .snd{bottom:auto;top:64vh;transform:translateY(-140%);right:20px}
  .hero .scroll{display:none}
  .sec,.gift{padding:76px 0}
  .pillars,.six,.notes{grid-template-columns:1fr}
  .fig{padding:38px 8px 42px}
  .fig .lb{font-size:12.5px;letter-spacing:.06em}
  .rep,.cons{grid-template-columns:1fr;gap:30px}
  .wrap.creed,.wrap.road{grid-template-columns:1fr}
  .creed .panel,.road .panel{padding:34px 24px}
  .head-out{margin-bottom:28px}
  .creed figure,.road figure{margin:0;order:-1}
  .cons{padding:34px}
  .rep figure::before{display:none}
  .ft-g{grid-template-columns:1fr 1fr}
  .strip .cell{flex-basis:104px;height:104px}
  .books img{flex-basis:83px;width:83px}
  .form{padding:24px}
}

/* =========================================================
   下層ページ用の追加。トップの部品はそのまま使い、
   足りないものだけをここに書く。
   ========================================================= */

/* ---------- 下層のヒーロー（動画ではなく白地＋エフェクト） ---------- */
/* 上の余白はヘッダーの実測（--hdh。mc.js が入れる）に足して決める。
   196px 決め打ちだったが、ヘッダーが110→71pxに縮んだので空きすぎていた。
   ここが厚いと、下の顔写真の帯が最初の1画面に入らない（2026-08-12 菅さん指摘）。 */
/* ヘッダー下端からラベルまでの空きは実測で決める。以前は100px空いていた（菅さん指摘）。
   +34px で 66px。ヘッダーの高さが変わっても追従する（--hdh は mc.js が実測して入れる）。 */
.phero{position:relative;overflow:hidden;padding:calc(var(--hdh,71px) + 24px) 0 0;background:#fff}
/* 他の下層ページ（.ahead.lg h1）と同じ上限にそろえる。ここだけ74pxで大きかった。 */
.phero h1{margin:14px 0 0;font-size:clamp(30px,4.8vw,66px);font-weight:700;line-height:1.26;letter-spacing:.01em}
.phero .lead{margin-top:18px;max-width:40rem}
/* ★ ここは「クラブが何を尊重しているか」を言い切る一文で、このページで最も大事な文
   （菅さん 2026-08-12「非常に大事な文面なので、目立たせる形でも良い」）。
   小さいグレーの補足ではなく、水色の短い罫を頭に置いた声明として見せる。 */
.phero .under{max-width:46rem;margin:0 auto;padding:52px 30px 0;text-align:center;
  font-size:clamp(17px,1.5vw,21px);font-weight:500;color:var(--ink);
  line-height:2.15;letter-spacing:.02em;position:relative;z-index:2}
.phero .under::before{content:"";display:block;width:44px;height:2px;
  background:var(--aq);margin:0 auto 26px}
@media(max-width:700px){
  .phero .under{padding-top:38px;font-size:min(4.6vw,19px);line-height:2.05;text-align:left}
  .phero .under::before{margin:0 0 20px}
}

/* ---------- 現在地（グローバルメニュー） ---------- */
.nav a.on{border-color:var(--aq)}
.hd.solid .nav a.on b{color:var(--aq-t)}

/* ---------- 引用：会話と信条 ---------- */
.quote{max-width:44rem;margin:52px auto 0;position:relative;z-index:2}
.quote p{margin:0 0 14px;padding-left:28px;border-left:3px solid var(--aq);
  font-size:clamp(16px,2vw,21px);font-weight:600;line-height:2.1}
.quote p:last-child{margin-bottom:0}
.qbig{position:relative;z-index:2;text-align:center;margin-top:64px}
.qbig p{margin:0;font-size:clamp(22px,4vw,46px);font-weight:700;line-height:1.55}
.qbig .cap{margin-top:24px;font-size:13.5px;color:var(--ink-3);letter-spacing:.06em}

/* ---------- 理念4つ ---------- */
.vals{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:56px;position:relative;z-index:2}
.val{background:#fff;border:1px solid var(--line);padding:40px 36px 44px;
  transition:transform .45s cubic-bezier(.4,.4,0,1),box-shadow .45s,border-color .45s}

.val .k{font-size:clamp(30px,3.6vw,44px);font-weight:700;line-height:1;color:var(--aq-d);letter-spacing:.06em}
.val .t{margin-top:16px;font-size:13.5px;font-weight:700;color:var(--pk-t);letter-spacing:.04em}
.val p{margin:20px 0 0;font-size:13.5px;color:var(--ink-2);line-height:2.15}
.val p + p{margin-top:16px}

/* ---------- 写真2枚並び ---------- */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:52px;position:relative;z-index:2}
.duo figure{margin:0;overflow:hidden}
.duo img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .9s}


/* ---------- 1枚だけ広く敷く写真 ---------- */
.solo{position:relative;z-index:2;margin:52px auto 0;max-width:900px;overflow:hidden}
.solo img{width:100%;aspect-ratio:16/9;object-fit:cover}

/* ---------- 次に読む3枚 ---------- */
.next3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:52px}
.nx{display:block;background:#fff;border:1px solid var(--line);padding:36px 32px 38px;
  transition:transform .45s cubic-bezier(.4,.4,0,1),box-shadow .45s,border-color .45s}

.nx .n{font-family:var(--en);font-size:10.5px;letter-spacing:.24em;color:var(--aq-t);font-weight:700}
.nx h3{margin:14px 0 0;font-size:20px;font-weight:700;line-height:1.5}
.nx p{margin:13px 0 0;font-size:13.5px;color:var(--ink-2);line-height:2.05}
.nx .go{margin-top:24px;font-family:var(--en);font-size:11px;letter-spacing:.16em;
  color:var(--aq-t);font-weight:700}


/* ---------- クラブの根幹の一言。本文に混ぜず独立させる ----------
   この頁で一番大事な言葉なので、リード文の中に流し込まない。 */
/* 1画面に顔写真2列まで収めるため、ここの上下も詰めてある（2026-08-12・実測で決めた）。
   この節に要素を足したら、下の帯の下端が画面に入るか測り直すこと。 */
.credoline{position:relative;z-index:2;margin:24px 0 0;padding:2px 0 4px 26px;
  border-left:4px solid var(--aq);font-size:clamp(20px,3.2vw,36px);font-weight:700;
  line-height:1.6;letter-spacing:.01em}
.phero .lead{margin-top:24px;max-width:38rem;font-size:15px}

/* 「喜ばせようか！」の直後だけ、帯を目一杯広く敷く */
.band.wide{max-width:1220px;margin-top:56px}
@media(max-width:960px){ .credoline{margin-top:24px;padding-left:16px;border-left-width:3px} }

/* ---------- 本文写真は「切らない」 ----------
   実測すると、この頁の写真はすべて 2.2〜3.8:1 の横長コマ割り帯だった。
   4:3 の半分枠に入れると真ん中しか残らず、写真ごとに意図が壊れる。
   だから比率を指定せず、見出しの下に一本そのまま敷く。作法はこれ1つ。 */
/* ★ 読み込み中の下地（--bg2）は figure ではなく **img** に持たせる（2026-08-13）。
   figure に敷くと、下に付けた figcaption の裏まで薄い水色が回り、
   白い節の中に説明文だけ色帯が出てしまう。 */
.band{position:relative;z-index:2;max-width:1040px;margin:46px auto 0;overflow:hidden}
.band img{display:block;width:100%;height:auto;background:var(--bg2)}
.band + .band{margin-top:18px}
/* 帯写真の説明文（2026-08-13）。原文（DB）では図の下に付いていたが、
   新デザインを作るときに落としていた。**写真の説明であって見出しではない**ので、
   小さく・薄く・中央に。他ページの figcaption と同じ作法にそろえる。 */
.band figcaption{margin-top:14px;font-size:11.5px;font-weight:500;letter-spacing:.1em;
  color:var(--ink-3);text-align:center;line-height:1.9}
@media(max-width:700px){ .band figcaption{margin-top:11px;font-size:11px;letter-spacing:.06em} }

/* 例外は代表の正方形写真だけ。これは「場面」ではなく「語り手」なので文章の横に置く */
.talk{display:grid;grid-template-columns:.58fr 1.42fr;gap:58px;align-items:start;margin-top:48px;
  position:relative;z-index:2}
.talk figure{margin:0;position:relative;overflow:hidden}
.talk figure img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover}
.talk figure::before{content:"";position:absolute;left:-14px;top:-14px;right:26px;bottom:26px;
  border:1px solid var(--aq);z-index:-1}
.talk .who{margin-top:18px;font-size:13.5px;font-weight:700}
.talk .who span{display:block;margin-top:5px;font-size:11px;font-weight:500;color:var(--ink-3);letter-spacing:.06em}

/* 読み物の版面。写真が全幅になった分、文字は1本の柱にそろえる */
.read{max-width:var(--mw);margin:46px auto 0;position:relative;z-index:2}
.read p{margin:0 0 var(--gap-p);font-size:var(--fs);color:var(--ink-b);line-height:var(--lh);
  letter-spacing:var(--ls)}
.read p:last-child{margin-bottom:0}
.talk .read{margin:0;max-width:none}

@media(max-width:960px){
  .talk{grid-template-columns:1fr;gap:26px}
  .talk figure::before{display:none}
  .band,.read{margin-top:30px}
}

@media(max-width:960px){
  .phero{padding:132px 0 0}
  .vals,.next3,.duo{grid-template-columns:1fr}
  .val{padding:28px 24px 32px}
  .nx{padding:26px 24px 28px}
}

/* =========================================================
   WordPress の本文をそのまま整える（ここが今回の肝）
   ---------------------------------------------------------
   投稿1,068件・固定ページ120件の本文は、すでに
     h2 / h3 / p / figure>img / figcaption / ul / table /
     hr / blockquote / wp-block-embed / wp-block-gallery
   の並びでしかない。だからテンプレート側でこの並びに
   見た目を当てておけば、菅さんが WordPress の編集画面で
   書いたものが、そのまま新しいデザインで表示される。
   ページごとに HTML を書き起こす必要はない。
   ========================================================= */
.mc-body{position:relative;z-index:2;max-width:1220px;margin:56px auto 0;padding:0 30px}

/* 文字は1本の柱（--mwb）。見出しも本文も同じ左端。写真だけが --media まで外に出る */
.mc-body > p,.mc-body > ul,.mc-body > ol,.mc-body > blockquote,
.mc-body > h3,.mc-body > h4,.mc-body > hr,.mc-body > .toc-box,
.mc-body > table,.mc-body > .wp-block-table{max-width:var(--mwb);margin-left:auto;margin-right:auto}

.mc-body p{margin-top:0;margin-bottom:var(--gap-p);font-size:var(--fs);color:var(--ink-b);line-height:var(--lh);
  letter-spacing:var(--ls)}
.mc-body p:empty{display:none}              /* 編集で残った空行を詰める */
.mc-body p > br + br{content:"";display:block;height:12px}
.mc-body a{color:var(--aq-t);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;transition:color .3s}

.mc-body strong,.mc-body b{font-weight:700;color:var(--ink)}

/* 見出し。入口ページの head-out と同じ「水色の短い罫＋大きめ」 */
.mc-body h2{max-width:var(--mwb);margin:96px auto 0;padding-top:26px;position:relative;
  font-size:clamp(23px,3.4vw,40px);font-weight:700;line-height:1.5;letter-spacing:.01em}
.mc-body h2::before{content:"";position:absolute;left:0;top:0;width:28px;height:2px;background:var(--aq)}
.mc-body h2 + p,.mc-body h2 + ul,.mc-body h2 + ol,.mc-body h2 + figure,
.mc-body h2 + .wp-block-embed,.mc-body h2 + .wp-block-gallery{margin-top:34px}
.mc-body h3{margin:64px auto 0;padding-left:15px;border-left:3px solid var(--aq);
  font-size:19px;font-weight:700;line-height:1.7}
.mc-body h3 + p,.mc-body h3 + ul,.mc-body h3 + ol,.mc-body h3 + figure,
.mc-body h3 + .wp-block-embed,.mc-body h3 + .wp-block-gallery{margin-top:26px}
.mc-body h4{margin:44px auto 0;font-size:16px;font-weight:700}
.mc-body > *:first-child{margin-top:0}

/* 写真は切らない。柱の外へ出して一本の帯にする */
.mc-body figure{margin:52px auto 44px;max-width:var(--media)}
.mc-body figure img{display:block;width:100%;height:auto}
.mc-body figure a{display:block;text-decoration:none}
/* 元画像より大きく引き伸ばさない。JS が実寸を測って figure の幅を止める。
   古い記事の小さな写真がボケて見えるのを、上げ直さずに防ぐ */
.mc-body figure[data-nat]{max-width:min(var(--media),var(--nat))}
.mc-body figcaption{margin-top:13px;font-size:12px;color:var(--ink-3);text-align:center;line-height:1.9}

/* 丸い顔写真（Emanon の is-style-image__circle）。帯にせず小さく丸く残す */
.mc-body figure.is-style-image__circle{max-width:none;margin:48px auto 34px}
.mc-body figure.is-style-image__circle img{width:92px;height:92px;max-height:none;margin:0 auto;
  border-radius:50%;object-fit:cover;box-shadow:0 8px 22px rgba(14,151,176,.18)}

/* ギャラリー（wp-block-gallery）。段組はそのまま活かして余白だけ整える */
.mc-body .wp-block-gallery{max-width:var(--media);margin:52px auto 44px}
.mc-body .blocks-gallery-grid{display:grid;gap:14px;list-style:none;margin:0;padding:0;
  grid-template-columns:repeat(3,1fr)}
.mc-body .wp-block-gallery.columns-2 .blocks-gallery-grid{grid-template-columns:repeat(2,1fr)}
.mc-body .wp-block-gallery.columns-4 .blocks-gallery-grid{grid-template-columns:repeat(4,1fr)}
.mc-body .blocks-gallery-item figure{margin:0;max-width:none;overflow:hidden}
.mc-body .blocks-gallery-item img{width:100%;max-height:none;aspect-ratio:3/2;object-fit:cover;
  transition:transform .8s}

/* ★★ ギャラリーだけ左に寄っていた（2026-08-13 菅さん「途中途中の画像の寄せ方がバグっている」）
   /teacher/ 実測（1280px）：本文と1枚写真は 260〜1020（中央）なのに、
   ギャラリー2つだけ **60〜820／60〜788**＝**200px 左へずれていた**。

   犯人は WordPress コアが後ろから出しているインラインCSS：
     .wp-block-gallery:not(.has-nested-images){margin:0}   ← 詳細度(0,2,0)
   こちらの `.mc-body .wp-block-gallery{margin:52px auto 44px}` も **同じ(0,2,0)** なので、
   **順番で負けて** margin-left が 0 に戻されていた。

   → 親テーマ・コアの後出しに勝つには **body を1つ足す**（フッターの色・ヘッダーの色・
   ホバーの灰色に続いて4度目。[[parent-theme-link-color-specificity]] と同じ型）。
   直下の子だけに当てる（`>`）。ギャラリーの中の figure は margin:0 のままにする。 */
body .mc-body > figure,
body .mc-body > .wp-block-gallery,
body .mc-body > .wp-block-embed{margin-left:auto;margin-right:auto}


/* 動画の埋め込み。16:9を保つ */
.mc-body .wp-block-embed{max-width:var(--media-video);margin:52px auto 44px}
.mc-body .wp-block-embed__wrapper{position:relative;aspect-ratio:16/9;background:#0d1418}
.mc-body .wp-block-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* 目次（Emanon の toc-box） */
/* 囲みの中に13.5pxを詰めると「ブログの目次」に見える。
   箱をやめ、罫と余白と番号で見せる（Q&Aと同じ言語）。文字は本文並みまで上げる。 */
.mc-body .toc-box{margin:64px auto 0;background:none;border:0;padding:0}
.mc-body .toc-box__header{font-size:12.5px;font-weight:700;letter-spacing:.22em;color:var(--aq-t);
  display:flex;align-items:center}
.mc-body .toc-box__header::before{content:"";width:28px;height:2px;background:var(--aq);
  margin-right:13px;flex:none}
.mc-body .contents-outline{margin-top:22px;border-top:1px solid var(--line)}
/* ★ Emanon はインラインCSSで `.indent_2.contents-outline__ol{list-style-type:decimal}` を
   出している。**同じ詳細度(0,2,0)なので順番で負け**、ブラウザの「1. 2. 3.」と
   こちらの「01 02 03」が**二重に並んでいた**（2026-08-13 実測）。
   `body` を1つ足して (0,2,1) で勝つ。 → [[parent-theme-link-color-specificity]] */
body .mc-body .contents-outline__ol{margin:0;padding:0;list-style:none;counter-reset:toc}
.mc-body .contents-outline__item{position:relative;counter-increment:toc;
  border-bottom:1px solid var(--line)}
.mc-body .contents-outline__item a{display:grid;grid-template-columns:56px 1fr;align-items:baseline;
  padding:16px 0 15px;font-size:16px;font-weight:600;line-height:1.8;color:var(--ink);
  letter-spacing:.01em;text-decoration:none;
  transition:color .3s,transform .4s cubic-bezier(.4,.4,0,1)}
/* ★★ 2026-08-13：**目次が縦に伸びきる不具合**（1項目233px・目次全体2,928px）。
   Emanon が同じ疑似要素に**下線アニメ**を仕込んでいた：
     .contents-outline__item .toc-box_link::before{
       content:""; position:absolute; top:100%; left:0; width:100%; height:1px; opacity:0 }
   こちらは `content` と文字の見た目しか上書きしていなかったので、
   **position:absolute / width:100% / height:1px / opacity:0 がそのまま残り**、
   番号が「絶対配置の見えない1pxの帯」になっていた。
   → 番号が格子から外れる → 格子の中身が本文テキストだけになる
   → 1列目（56px）に文字が入り、56px幅で折り返して1項目233pxに膨らむ。
   **疑似要素を作り直すときは、親テーマが入れた指定を1つずつ打ち消すこと。**
   → [[parent-theme-link-color-specificity]] */
.mc-body .contents-outline__item a::before{content:counter(toc,decimal-leading-zero);
  position:static;width:auto;height:auto;opacity:1;transform:none;background:none;
  font-family:var(--en);font-size:13px;font-weight:700;color:var(--aq);letter-spacing:.08em;
  transition:color .3s}


/* 見出し3以下は番号を振らず、枝として置く */
.mc-body .contents-outline__ol .contents-outline__ol{margin:0 0 0 56px;
  border-top:1px solid var(--line)}
.mc-body .contents-outline__ol .contents-outline__ol .contents-outline__item{border-bottom:0}
.mc-body .contents-outline__ol .contents-outline__ol .contents-outline__item a{
  grid-template-columns:24px 1fr;padding:12px 0 13px;font-size:14.5px;font-weight:500;
  color:var(--ink-2)}
.mc-body .contents-outline__ol .contents-outline__ol .contents-outline__item a::before{
  content:"–";color:var(--aq);font-size:13px;
  position:static;width:auto;height:auto;opacity:1;transform:none;background:none}
.mc-body .toc-btn__switch{display:none}

/* リスト・引用・区切り・表 */
.mc-body ul,.mc-body ol{margin-top:0;margin-bottom:24px;padding-left:1.35em}
.mc-body li{font-size:var(--fs);color:var(--ink-b);line-height:var(--lh);letter-spacing:var(--ls)}
.mc-body ul li::marker{color:var(--aq)}
.mc-body blockquote{margin:40px auto;padding:2px 0 2px 26px;border-left:4px solid var(--aq)}
.mc-body blockquote p{font-size:16px;font-weight:600;color:var(--ink)}
.mc-body hr{margin:72px auto 0;border:0;border-top:1px solid var(--line)}
.mc-body table{width:100%;border-collapse:collapse;margin:40px auto 0;font-size:14px}
.mc-body th,.mc-body td{border:1px solid var(--line);padding:14px 16px;line-height:1.9;text-align:left}
.mc-body th{background:var(--bg2);font-weight:700;white-space:nowrap}

/* 旧エディタの記事は <figure> が無く、<p> の中に裸の <img class="aligncenter"> が入っている。
   このままだと写真が文字の柱に閉じ込められるので、JS が付ける .mc-figp で写真扱いにする。
   （2015年前後の記事はほぼこの形。1,068件のうち相当数がここに該当する） */
.mc-body p.mc-figp{max-width:min(var(--media),var(--nat,var(--media)));margin:44px auto;text-align:center}
.mc-body p.mc-figp img{display:block;width:100%;height:auto;margin:0 auto}
.mc-body p.mc-figp a{display:block}
/* 縦長写真は幅で合わせると縦に伸びすぎる。上限を別に持つ */
.mc-body p.mc-figp.is-tall{max-width:min(560px,var(--nat,560px))}
.mc-body figure[data-tall]{max-width:min(560px,var(--nat,560px))}

/* =========================================================
   動画。YouTube / Vimeo を貼っただけの姿にしない。
   クリックするまで再生プレイヤーを読み込まないので、
   写真の多い記事でも軽い（旧記事は1ページに何本も入っている）。
   ========================================================= */
.mc-body .mc-vid{position:relative;max-width:var(--media-video);margin:60px auto 52px;
  aspect-ratio:16/9;background:#0b1116;overflow:hidden}
.mc-body .mc-vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.mc-vid__plate{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:none;
  display:block;overflow:hidden;cursor:pointer;font:inherit;color:inherit}
.mc-vid__plate::before{content:"";position:absolute;left:0;top:0;right:0;height:3px;z-index:4;
  background:linear-gradient(90deg,var(--aq),var(--pk))}
.mc-vid__thumb{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;
  filter:saturate(.82);transition:transform .9s cubic-bezier(.4,.4,0,1),filter .6s}

.mc-vid__veil{position:absolute;inset:0;
  background:linear-gradient(197deg,rgba(6,26,34,.14),rgba(6,26,34,.58) 58%,rgba(6,26,34,.88))}
.mc-vid.is-plain .mc-vid__veil{background:
  radial-gradient(120% 120% at 78% 12%,rgba(20,190,220,.34),transparent 62%),
  linear-gradient(150deg,#0f2c35,#0b1116 66%)}
.mc-vid__play{position:absolute;left:50%;top:46%;width:86px;height:86px;margin:-43px 0 0 -43px;
  border-radius:50%;background:var(--aq);display:grid;place-items:center;z-index:3;
  box-shadow:0 16px 44px rgba(0,0,0,.38);
  transition:background .35s,transform .45s cubic-bezier(.4,.4,0,1)}
.mc-vid__play i{width:0;height:0;margin-left:7px;border-left:23px solid #fff;
  border-top:14px solid transparent;border-bottom:14px solid transparent}
.mc-vid__play::after{content:"";position:absolute;inset:-2px;border-radius:50%;
  border:1px solid rgba(255,255,255,.5);animation:vidPulse 2.8s ease-out infinite}

@keyframes vidPulse{0%{transform:scale(1);opacity:.55}70%{transform:scale(1.55);opacity:0}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.mc-vid__play::after{animation:none;opacity:0}}
.mc-vid__meta{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:28px 32px;
  display:grid;gap:10px;text-align:left}
.mc-vid__meta b{font-family:var(--en);font-size:10.5px;letter-spacing:.3em;font-weight:700;color:#7fe3f5;
  display:inline-flex;align-items:center;gap:10px}
.mc-vid__meta b::before{content:"";width:24px;height:2px;background:var(--aq)}
.mc-vid__meta span{font-size:16.5px;font-weight:700;line-height:1.65;color:#fff;letter-spacing:.01em;
  text-wrap:balance}
@media(max-width:960px){
  .mc-body .mc-vid{margin:34px auto 32px}
  .mc-vid__play{width:62px;height:62px;margin:-31px 0 0 -31px}
  .mc-vid__play i{border-left-width:17px;border-top-width:10px;border-bottom-width:10px;margin-left:5px}
  .mc-vid__meta{padding:18px 20px;gap:7px}
  .mc-vid__meta span{font-size:14px}
}

/* =========================================================
   沿革（/history/）。13年・109件。
   囲みカードを積むと「年表ブログ」になるので、
   年の数字を柱の外に出して貼りつかせ、出来事は罫だけで区切る。
   ========================================================= */
.hv-jump{position:sticky;top:var(--hv-bar,96px);z-index:6;display:flex;gap:2px;flex-wrap:wrap;
  justify-content:center;padding:14px 20px;background:rgba(255,255,255,.86);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.hv-jump a{font-family:var(--en);font-size:12px;font-weight:700;letter-spacing:.08em;
  color:var(--ink-3);padding:7px 11px;text-decoration:none;position:relative;transition:color .3s}
.hv-jump a::after{content:"";position:absolute;left:11px;right:11px;bottom:3px;height:2px;
  background:var(--pk);transform:scaleX(0);transform-origin:left;transition:transform .35s}



.hv{max-width:62rem;margin:0 auto;position:relative;z-index:2}
.hv-y{display:grid;grid-template-columns:200px 1fr;gap:0 40px;align-items:start;
  padding:56px 0 4px;border-top:1px solid var(--line)}
.hv-y:first-child{border-top:0;padding-top:20px}
.hv-num{position:sticky;top:var(--hv-top,196px);padding-bottom:40px;isolation:isolate}
.hv-num::before{content:"";display:block;width:34px;height:2px;background:var(--aq);margin-bottom:22px}
.hv-num b{display:block;font-family:var(--en);font-size:72px;font-weight:700;line-height:.9;
  letter-spacing:.01em;padding-right:.06em;
  background:linear-gradient(140deg,var(--aq),#6fb6dd 58%,var(--pk));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hv-num span{display:inline-flex;align-items:center;gap:10px;margin-top:16px;
  font-size:11px;letter-spacing:.16em;color:var(--ink-3)}
.hv-num span::before{content:"";width:22px;height:2px;background:var(--aq);flex:none}

/* 年ごとの縦のレール。上が水色、下へ抜けていく */
.hv-rows{position:relative;padding-left:38px}
.hv-rows::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:1px;background:var(--line)}
/* 読み進めた分だけ伸びる。JSが --p（0〜1）を入れる */
.hv-rows::after{content:"";position:absolute;left:0;top:10px;bottom:10px;width:1px;
  background:linear-gradient(var(--aq),var(--pk));
  transform:scaleY(var(--p,0));transform-origin:top;transition:transform .18s linear;z-index:0}
.hv-li{display:grid;grid-template-columns:76px 1fr;gap:20px;align-items:baseline;
  padding:19px 0 18px;border-bottom:1px solid var(--line);position:relative;z-index:1;
  transition:padding-left .4s cubic-bezier(.4,.4,0,1)}
.hv-li:first-child{border-top:1px solid var(--line)}
.hv-li::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;
  background:linear-gradient(90deg,var(--aq),var(--pk));transform:scaleX(0);transform-origin:left;
  transition:transform .55s cubic-bezier(.4,.4,0,1)}


.hv-m{font-family:var(--en);font-size:16px;font-weight:700;color:var(--aq);letter-spacing:.04em;
  font-variant-numeric:tabular-nums}
/* レール上の節。節目だけピンクで塗る */
.hv-m::before{content:"";position:absolute;left:-44px;top:1.45em;width:9px;height:9px;border-radius:50%;
  background:#fff;border:1.5px solid var(--line);transition:.35s;z-index:1}

.hv-m i{font-style:normal;font-family:var(--jp);font-size:11px;margin-left:2px;color:var(--ink-3)}
.hv-t{font-size:15.5px;line-height:1.95;color:var(--ink-b);letter-spacing:.01em;text-wrap:pretty}

/* 節目のできごと。金色の星をやめ、ピンクの縦罫と太字で立てる */
.hv-li.is-key .hv-m{color:var(--pk)}
.hv-li.is-key .hv-m::before{background:var(--pk);border-color:var(--pk);
  box-shadow:0 0 0 5px rgba(255,61,139,.13)}
.hv-li.is-key .hv-t{font-weight:700;color:var(--ink);position:relative}
.hv-li.is-key .hv-t::before{content:"";position:absolute;left:-20px;top:.35em;bottom:.35em;
  width:2px;background:var(--pk)}

@media(max-width:960px){
  .hv-jump{padding:10px 12px;gap:0}
  .hv-jump a{font-size:11px;padding:6px 8px}
  .hv-y{grid-template-columns:1fr;gap:0;padding-top:38px}
  .hv-num{position:static;padding-bottom:20px;display:flex;align-items:baseline;gap:14px}
  .hv-num b{font-size:44px}
  .hv-num span{margin-top:0}
  .hv-rows{padding-left:26px}
  .hv-num::before{margin-bottom:14px}
  .hv-li{grid-template-columns:62px 1fr;gap:12px;padding:15px 0 14px}
  .hv-m::before{left:-32px}
  .hv-m{font-size:14px}
  .hv-t{font-size:14.5px;line-height:1.9}
  .hv-li.is-key .hv-t::before{left:-12px}
}

/* =========================================================
   歴代本部登壇講師（/member01/）。140回・50名。
   表の罫で囲うと名簿になる。主役は「誰が話したか」なので
   講師名をいちばん大きく、回数は柱の外に置く。
   ========================================================= */
.sp-bar{display:flex;align-items:center;gap:18px;flex-wrap:wrap;position:sticky;
  top:var(--hv-bar,96px);z-index:6;padding:16px 0;margin-bottom:6px;
  background:rgba(255,255,255,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.sp-find{flex:1 1 320px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--line);
  padding:8px 2px;transition:border-color .3s}
.sp-find:focus-within{border-color:var(--aq)}
.sp-find span{font-size:13px;opacity:.5}
.sp-find input{flex:1;border:0;outline:0;background:none;font:inherit;font-size:14.5px;color:var(--ink);
  letter-spacing:.02em}
.sp-k{display:flex;gap:2px}
.sp-k button{appearance:none;border:0;background:none;font:inherit;font-size:12.5px;font-weight:700;
  color:var(--ink-3);padding:8px 14px;cursor:pointer;position:relative;transition:color .3s}
.sp-k button::after{content:"";position:absolute;left:14px;right:14px;bottom:2px;height:2px;
  background:var(--pk);transform:scaleX(0);transform-origin:left;transition:transform .35s}

.sp-k button.on{color:var(--ink)}
.sp-k button.on::after{transform:scaleX(1)}
.sp-c{font-size:12px;color:var(--ink-3);letter-spacing:.06em}
.sp-c b{font-family:var(--en);font-size:17px;color:var(--ink);margin-right:3px}

.sp{max-width:62rem;margin:0 auto;position:relative;z-index:2;border-top:1px solid var(--line)}
.sp-r{display:grid;grid-template-columns:76px 92px 1fr auto;gap:22px;align-items:baseline;
  padding:20px 0 19px;border-bottom:1px solid var(--line);position:relative;
  transition:padding-left .4s cubic-bezier(.4,.4,0,1)}
.sp-r::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;
  background:linear-gradient(90deg,var(--aq),var(--pk));transform:scaleX(0);transform-origin:left;
  transition:transform .55s cubic-bezier(.4,.4,0,1)}


.sp-n{font-family:var(--en);font-size:26px;font-weight:700;line-height:1;color:var(--line);
  font-variant-numeric:tabular-nums;transition:color .35s}

.sp-d{font-family:var(--en);font-size:13px;font-weight:700;color:var(--ink-3);letter-spacing:.04em}
.sp-l{font-size:19px;font-weight:700;color:var(--ink);letter-spacing:.02em;line-height:1.6}
.sp-l i{font-style:normal;font-weight:500;color:var(--ink-3);font-size:14px;margin:0 2px}

.sp-p{font-size:11px;letter-spacing:.06em;color:var(--ink-2);white-space:nowrap;
  padding:5px 12px;border:1px solid var(--line);border-radius:999px}
.sp-p--online{color:var(--aq-t);border-color:rgba(20,190,220,.4)}
.sp-p--camp{color:var(--pk-t);border-color:rgba(255,61,139,.35)}
.sp-none{max-width:62rem;margin:40px auto 0;text-align:center;font-size:14px;color:var(--ink-3)}

/* 登壇回数の多い顔ぶれ */
.sp-top{display:flex;flex-wrap:wrap;gap:14px;position:relative;z-index:2;margin-top:8px}
.sp-t{display:inline-flex;align-items:baseline;gap:12px;padding:16px 22px;background:#fff;
  border-bottom:2px solid var(--aq);transition:.35s cubic-bezier(.4,.4,0,1)}

.sp-t b{font-size:16.5px;font-weight:700;color:var(--ink)}
.sp-t em{font-style:normal;font-family:var(--en);font-size:22px;font-weight:700;color:var(--aq)}


@media(max-width:960px){
  .sp-bar{gap:10px;padding:12px 0}
  .sp-k button{padding:6px 10px;font-size:11.5px}
  .sp-r{grid-template-columns:52px 1fr;gap:6px 14px;padding:16px 0 15px}
  .sp-n{font-size:20px;grid-row:span 2}
  .sp-d{font-size:11.5px}
  .sp-l{font-size:16.5px;grid-column:2}
  .sp-p{grid-column:2;justify-self:start;margin-top:6px}
}

/* =========================================================
   入口の「数字3つ」以外の見せ方。ページの中身に合うものを選ぶ。
   数字が3つ並ぶ形は、数で語れるページ（講師141回など）だけに残す。
   ========================================================= */

/* ① 期間のレール。時間が主役のページ（沿革）。下の年表への助走になる */
.hrun{display:grid;grid-template-columns:auto 1fr auto;gap:26px;align-items:center;
  margin-top:58px;position:relative;z-index:2;max-width:56rem}
.hrun-l,.hrun-r{display:grid;gap:6px}
.hrun-r{text-align:right}
.hrun-l span,.hrun-r span{font-family:var(--en);font-size:19px;font-weight:700;color:var(--ink);
  letter-spacing:.02em}
.hrun-l em,.hrun-r em{font-style:normal;font-size:11px;letter-spacing:.16em;color:var(--ink-3)}
.hrun-bar{position:relative;height:2px;background:linear-gradient(90deg,var(--aq),var(--pk))}
.hrun-t{position:absolute;left:calc(var(--x) * 100%);top:-4px;width:1px;height:10px;
  background:rgba(20,190,220,.55);transform:translateX(-50%)}
.hrun-t.is-big{height:16px;top:-7px;width:2px;background:var(--ink)}

/* ② 顔の帯。人が主役のページ（体験談） */
.fwall{margin-top:56px;position:relative;z-index:2}
.fw-row{display:flex;align-items:center}
.fw-f{width:74px;height:74px;border-radius:50%;overflow:hidden;flex:none;
  margin-left:-18px;border:3px solid #fff;box-shadow:0 8px 22px rgba(14,151,176,.16);
  transition:transform .5s cubic-bezier(.4,.4,0,1),margin .5s cubic-bezier(.4,.4,0,1);
  transition-delay:calc(var(--i) * 24ms)}
.fw-f:first-child{margin-left:0}
.fw-f img{width:100%;height:100%;object-fit:cover;display:block}


.fw-c{margin:26px 0 0;font-size:13px;letter-spacing:.06em;color:var(--ink-3);
  display:inline-flex;align-items:center;gap:12px}
.fw-c::before{content:"";width:26px;height:2px;background:var(--aq);flex:none}

@media(max-width:960px){
  .hrun{grid-template-columns:1fr;gap:16px;margin-top:36px}
  .hrun-r{text-align:left}
  .hrun-bar{order:3}
  .fwall{margin-top:34px}
  .fw-f{width:52px;height:52px;margin-left:-14px;border-width:2px}
  .fw-f:nth-child(n+9){display:none}
}

/* ---------- 記事の頭（single.php / page.php が出す部分） ---------- */
/* 上の余白は画面の高さに連動させる。196px固定だと、高さ800px以下の画面で
   ヘッダーの中身（見出し・リード・写真）が下で見切れていた。
   下限148pxは固定ヘッダー108px＋40pxの逃げ。背の高い画面では今までどおり196px */
/* .phero と同じ考え方に統一（2026-08-12）。172〜196px の決め打ちだと、
   ヘッダーが110→71pxに縮んだぶんがそのまま余白として残っていた。 */
.ahead{position:relative;overflow:hidden;padding:calc(var(--hdh,71px) + 34px) 0 0;
  background:linear-gradient(178deg,#eafaff 0%,#f6fdff 38%,#fff 82%)}
/* 白いベールを全面にかけると効果が濁って見えるので、文字のある左下だけ白く抜き、
   右上は色を残す。ページの上端に色があるだけで「澱み」が消える */
.ahead::after{background:
  radial-gradient(120% 90% at 12% 88%,rgba(255,255,255,.94),rgba(255,255,255,.62) 58%,rgba(255,255,255,.18) 100%)}
.ahead .meta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:24px;
  font-size:12px;color:var(--ink-3);letter-spacing:.06em}
.ahead .meta time{font-family:var(--en);font-size:15px;font-weight:700;color:var(--ink-2);
  letter-spacing:.06em}
.ahead .meta .cat{background:var(--aq);color:#fff;font-weight:700;padding:6px 15px;font-size:11.5px;
  letter-spacing:.08em}
/* 長い日本語タイトルが3行に割れて行末が凸凹していた。
   1行を長めに取り、上限を下げて2行に収める。改行位置は balance に任せる */
.ahead h1{margin:26px 0 0;font-size:clamp(25px,3.2vw,42px);font-weight:700;line-height:1.48;
  max-width:56rem;text-wrap:balance;letter-spacing:.005em}
/* 固定ページの見出しは「会員の体験談」「6つの支部」のように短い。
   上の42pxは記事タイトル（30〜40字）を2行に収めるための上限なので、
   短い見出ししか来ない固定ページには .lg を付けて大きく出す。
   記事（auto-single）には付けないこと。付けると3行に割れて行末が凸凹する */
.ahead.lg h1{font-size:clamp(30px,4.8vw,66px);line-height:1.34;max-width:56rem}

/* 背の低い画面（ノートPCの多く）では、見出しと余白も一段詰めて1画面に収める。
   高さ820px超のモニターでは一切変わらない */
@media(max-height:820px){
  .ahead.lg h1{font-size:clamp(30px,3.9vw,54px);line-height:1.30;margin-top:18px}
  .ahead .lead{margin-top:18px}
  /* ★★ /merchantclub/ の見出し（.phero h1）も同じに（2026-08-13 菅さん
     「ヘッダーの文字が、他の固定ページのヘッダーより大きい」）。
     この節を作ったとき .ahead.lg だけ入れて .phero を入れていなかったので、
     **高さ820px以下の画面（ノートPCの多く）でこのページだけ66px**になっていた
     （他ページは54px。1440×800で実測）。
     縮めた分は、そのまま下の顔写真2列目の下の余白になる。 */
  .phero h1{font-size:clamp(30px,3.9vw,54px);line-height:1.30}
}

/* ---------- 1画面目に「何がどれだけあるか」を出す帯（2026-08-13）----------
   /guidance/ は12の場所を紹介するページなのに、1画面目が見出しと文だけで、
   スクロールするまで何のページか分からなかった
   （菅さん「1番ワクワクさせたいページがこれじゃあなあ」）。
   下で紹介する12枚をそのまま流す。部品はトップ・/merchantclub/ と同じ `.strip`。
   写真は 150x150 の小サイズ（12枚で83KB）。**lazy は付けない**
   （付けると流れる帯はスマホで最後まで読み込まれない）→ [[marquee-images-no-lazy]] */
.ahead .strip{margin-top:40px}
.ahead .scap{margin:20px 0 0;font-size:12.5px;font-weight:600;letter-spacing:.16em;color:var(--ink-3)}
@media(max-width:700px){
  .ahead .strip{margin-top:30px}
  .ahead .scap{margin-top:16px;font-size:11.5px;letter-spacing:.1em}
}
.ahead .strip{position:relative;z-index:2}
.ahead .strip ~ .wrap .rule{margin-top:34px}

.ahead .rule{display:block;height:1px;margin-top:56px;
  background:linear-gradient(90deg,var(--aq),rgba(20,190,220,.15) 42%,var(--line) 42%)}

/* ---------- 記事の足（一覧へ戻る＋相談） ---------- */
.afoot{padding:0 0 130px}
.afoot .box{max-width:var(--mwb);margin:80px auto 0;border-top:1px solid var(--line);padding-top:44px;
  display:flex;gap:16px;flex-wrap:wrap;align-items:center;justify-content:space-between}
.afoot .back{font-size:13.5px;font-weight:700;color:var(--ink-2)}


@media(max-width:960px){
  .mc-body{padding:0 22px}
  .mc-body h2{margin-top:64px;padding-top:22px}
  .mc-body figure,.mc-body .wp-block-gallery,.mc-body .wp-block-embed{margin-top:34px}
  .mc-body .blocks-gallery-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .ahead{padding-top:132px}
  .ahead .rule{margin-top:34px}
  .afoot{padding-bottom:76px}
  .afoot .box{margin-top:52px;padding-top:34px}
}

/* =========================================================
   サービス詳細（/guidance/）専用
   写真がほとんど無く、本文が9,000字ある頁。
   「読ませる」のではなく「探せる・戻れる」形にするのが狙い。
   ========================================================= */

/* ---------- 左に貼りつく現在地。12項目のどこを読んでいるかが常に分かる ---------- */
.gnav{position:fixed;left:26px;top:50%;transform:translateY(-50%);z-index:300;
  display:flex;flex-direction:column;gap:2px}
.gnav a{display:flex;align-items:center;gap:10px;padding:3px 0;font-family:var(--en);
  font-size:10.5px;font-weight:700;letter-spacing:.1em;color:var(--ink-3);transition:color .3s}
.gnav a::before{content:"";width:14px;height:1px;background:currentColor;transition:width .35s,background .3s}

.gnav a.on{color:var(--aq-t)}
.gnav a.on::before{width:30px;background:var(--aq)}
.gnav a .nm{max-width:0;overflow:hidden;white-space:nowrap;opacity:0;
  transition:max-width .45s cubic-bezier(.4,.4,0,1),opacity .3s;font-family:var(--jp);font-size:11px}
.gnav a.on .nm{max-width:14rem;opacity:1}

/* 3つ並ぶことを、見出しの次にはっきり言い切る行 */
.leadline{position:relative;z-index:2;margin:30px 0 0;padding:6px 0 8px 24px;
  border-left:4px solid var(--pk);font-size:clamp(18px,2.6vw,28px);font-weight:700;line-height:1.7}

/* ---------- はじめの3ヶ月 ----------
   箱を3つ置くだけだと寂しく、表のように見えてしまう。
   1本の道でつないで「順番がある」ことを形にする。
   番号は12枚のカードと同じ大きさ・同じグラデにして、頁の中で揃える。 */
.path{position:relative;z-index:2;margin-top:56px;display:grid;grid-template-columns:repeat(3,1fr);
  gap:34px}
/* 三つを貫く1本の道 */
.path::before{content:"";position:absolute;left:8%;right:8%;top:34px;height:2px;z-index:0;
  background:linear-gradient(90deg,var(--aq) 0%,#7ab4dd 50%,var(--pk) 100%)}
.path .st{position:relative;z-index:1;padding:0}
.path .st::before{content:"";position:absolute;left:0;top:26px;width:18px;height:18px;
  border-radius:50%;background:#fff;border:3px solid var(--aq);box-shadow:0 0 0 6px var(--bg2)}
.path .st:nth-child(2)::before{border-color:#7ab4dd}
.path .st:nth-child(3)::before{border-color:var(--pk)}
.path .st .no{display:inline-block;font-family:var(--en);font-size:56px;font-weight:700;line-height:1;
  letter-spacing:-.02em;padding-right:.06em;margin-top:56px;
  background:linear-gradient(140deg,var(--aq),var(--pk));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.path .st .no em{font-style:normal;display:block;font-size:.2em;letter-spacing:.24em;
  -webkit-text-fill-color:var(--aq-t);margin-bottom:8px}
.path .st h4{margin:16px 0 0;font-size:21px;font-weight:700;line-height:1.55}
.path .st p{margin:14px 0 0;font-size:13.5px;color:var(--ink-2);line-height:2.1}
.path .st::after{content:none}

@media(max-width:960px){
  .path{grid-template-columns:1fr;gap:30px}
  .path::before{left:9px;right:auto;top:8px;bottom:8px;width:2px;height:auto;
    background:linear-gradient(180deg,var(--aq),#7ab4dd 50%,var(--pk))}
  .path .st{padding-left:44px}
  .path .st::before{top:4px}
  .path .st .no{margin-top:0;font-size:40px}
}

/* ---------- 全体像の地図。12個を並べる前に、1枚で掴ませる ---------- */
.map{position:relative;z-index:2;margin:44px auto 0;max-width:1160px;overflow:hidden;
  border:1px solid var(--line)}
.map img{display:block;width:100%;height:auto}
.map .cap{margin-top:14px;font-size:12.5px;color:var(--ink-3);text-align:center}

/* ---------- 12項目の目次 ---------- */
.toc12{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:48px;
  background:var(--line);border:1px solid var(--line);position:relative;z-index:2}
.toc12 a{display:flex;align-items:center;gap:14px;background:#fff;padding:20px 22px;
  font-size:14px;font-weight:700;line-height:1.5;transition:background .3s,color .3s}
.toc12 a b{font-family:var(--en);font-size:15px;color:var(--aq);letter-spacing:.04em;flex:none}



/* ---------- 12の節 ---------- */
.item{position:relative;padding:96px 0 0}
.item:first-of-type{padding-top:64px}
.item .head{display:grid;grid-template-columns:auto 1fr;gap:30px;align-items:start}
/* グラデ文字は「文字送りの幅」で背景が切れる。負の字間だと最後の一画が欠けるので
   字間を詰めず、右に少し余白を持たせる（02・03の右が切れていた原因） */
.item .big{font-family:var(--en);font-size:clamp(58px,8vw,104px);font-weight:700;line-height:.9;
  letter-spacing:0;padding-right:.1em;
  background:linear-gradient(140deg,var(--aq) 0%,#7ab4dd 55%,var(--pk) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.item h3{margin:0;font-size:clamp(22px,3.2vw,36px);font-weight:700;line-height:1.45;
  padding-top:.12em}
.item .lead2{margin:28px 0 0;max-width:46rem}
.item .lead2 p{margin:0 0 22px;font-size:14.5px;color:var(--ink-2);line-height:2.25}
.item .lead2 p:last-child{margin-bottom:0}

/* 各項目の画像。URLをもらったら .slot を .shot に差し替えるだけ */
.item .shot{margin:32px 0 0;max-width:1040px;overflow:hidden;background:var(--bg2)}
.item .shot img{display:block;width:100%;height:auto}
.item .slot{margin:32px 0 0;max-width:1040px;aspect-ratio:16/6.5;border:1px dashed rgba(20,190,220,.5);
  display:grid;place-items:center;text-align:center;background:
   repeating-linear-gradient(135deg,rgba(20,190,220,.05) 0 12px,transparent 12px 24px)}
.item .slot span{font-size:12.5px;color:var(--aq-t);letter-spacing:.06em;line-height:2}
.item .slot span b{display:block;font-family:var(--en);font-size:18px;letter-spacing:.14em}

/* 「どう使うか」は説明と面を分ける */
.how{margin:34px 0 0;max-width:46rem;background:var(--bg2);border-left:3px solid var(--aq);
  padding:28px 30px 30px}
.how .t{font-size:13px;font-weight:700;letter-spacing:.08em;color:var(--aq-t)}
.how ul{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:11px}
.how li{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.95;color:var(--ink-b);
  letter-spacing:var(--ls)}
.how li::before{content:"✓";flex:none;color:var(--pk);font-weight:700;font-size:13px;line-height:1.95}

/* ---------- 費用 ---------- */
.fee{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:52px;position:relative;z-index:2}
.fee .c{background:#fff;border:1px solid var(--line);padding:38px 34px 42px;position:relative;overflow:hidden}
.fee .c::before{content:"";position:absolute;left:0;top:0;right:0;height:3px;background:var(--aq)}
.fee .c.next::before{background:var(--pk)}
.fee .k{font-size:13px;font-weight:700;letter-spacing:.1em;color:var(--ink-2)}
.fee .v{margin-top:16px;font-family:var(--en);font-size:clamp(30px,4.2vw,46px);font-weight:700;
  line-height:1.1;letter-spacing:-.02em;color:var(--aq-d)}
/* ★ 数字の大きさは左右そろえる。
   以前ここだけ小さかったのは「年額と月額」を2行で入れていたためで、
   月額1本にした今は理由が無い（2026-08-12 菅さん「左と文字サイズが違う。意図は？」）。
   「月額」は単位と同じ小さい文字にして、**数字だけ**を左と同じ大きさにする。 */
.fee .c.next .v{color:var(--pk-t)}
.fee .v small.pre{margin:0 10px 0 0}
.fee .v small{font-family:var(--jp);font-size:14px;font-weight:700;margin-left:6px;color:var(--ink-2)}
.fee .n{margin-top:18px;font-size:13px;color:var(--ink-2);line-height:2.05}

@media(max-width:1280px){ .gnav{display:none} }
@media(max-width:960px){
  .leadline{padding-left:15px;border-left-width:3px}
  .item .slot{aspect-ratio:16/9}
  .path,.toc12,.fee{grid-template-columns:1fr}
  .path .st{border-left:0;border-top:1px solid var(--line);padding:26px 22px 30px}
  .path .st:first-child{border-top:0}
  .path .st::after{content:none}
  .item{padding-top:60px}
  .item .head{grid-template-columns:1fr;gap:10px}
  .item .big{font-size:52px}
  .how{padding:22px 20px 24px}
}

/* =========================================================
   Q&A（/answers/）
   ---------------------------------------------------------
   箱をやめた。枠線で囲ったカードを同じ幅で積むのは、
   テーマの既定そのもの＝「WordPressっぽさ」の正体なので、
   仕切りは「罫と余白と文字の大きさ」だけで作る。
   ・番号は左の余白にはみ出させて、質問文と少し重ねる
   ・水色＝静かな罫／ピンク＝いま開いているもの、と役割を分ける
   ・背景の塗りは使わない
   ========================================================= */
.qa{max-width:60rem;margin:56px auto 0;position:relative;z-index:2;
  border-top:1px solid var(--line)}

.qa details{position:relative;border-bottom:1px solid var(--line);
  transition:border-color .4s}
/* ホバー／展開で、下の罫が左から水色→ピンクに引かれる */
.qa details::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;
  background:linear-gradient(90deg,var(--aq),var(--pk));transform:scaleX(0);transform-origin:left;
  transition:transform .55s cubic-bezier(.4,.4,0,1)}
.qa details[open]::after{transform:scaleX(1)}

/* ★ 上下の余白を広げた（2026-08-13 菅さん「3も」）。
   区切りが細い罫1本だけなので、15問が詰まって見えていた。
   罫を増やさず**余白だけ**で間を取る。 */
.qa summary{list-style:none;cursor:pointer;position:relative;
  display:grid;grid-template-columns:1fr auto;gap:28px;align-items:start;
  padding:50px 0 48px 88px;transition:padding-left .45s cubic-bezier(.4,.4,0,1)}
.qa summary::-webkit-details-marker{display:none}
.qa details[open] summary{padding-left:100px}
/* ★★ 字下げも番号に合わせて 100/112 → 88/100（2026-08-13）。
   番号が 40→30px で細くなった分だけ、番号と質問文の間が
   62px → 74px に開いていた。番号の幅の変化と同じだけ詰めて元の間隔に戻す。 */

/* ★ 太さを一段ずつ落とした（2026-08-13 菅さん「他のページとテンションが違う」
   「オシャレさに欠けている」）。実測すると、このページだけ
   ・答えの1文目が 19px の太字（w700）＝サイト内で**本文が太いのはここだけ**
   ・質問文と番号が w700
   の3つが同時に来ていた。数字と色はそのままに、**太さだけ**
   700→600（見出し・番号）、700→500（答えの1文目）に下げる。
   → [[typography-avoid-bold-pop]] 太い見出しは使わない、が全体の決め */
/* 番号は左の余白へはみ出す。質問文と少し重ねて、箱に見せない */
/* ★ 52px は節見出し（h2）と同じ大きさで、番号のほうが先に目に入っていた。
   番号は道しるべであって主役ではないので一段下げる（2026-08-13 菅さん「2も」）。
   左の字下げ（summary の padding-left）も同じだけ詰める。 */
/* ★★ 質問文を 29px→22px に戻したので、番号も同じ比で下げる（2026-08-13）。
   質問文より番号が大きい状態（40 vs 22＝1.8倍）に戻ると、
   「番号のほうが先に目に入る」という一度直した不具合が再発する。
   40→30（30÷22＝1.36。29px 時代の 40÷29＝1.38 と同じ関係を保つ）。 */
.qa .qn{position:absolute;left:0;top:54px;font-family:var(--en);font-weight:600;
  font-size:30px;line-height:1;letter-spacing:-.03em;color:var(--line);
  transition:color .4s,transform .45s cubic-bezier(.4,.4,0,1)}
/* ★ 番号の上の「Q」は外した（2026-08-13 菅さん）。
   番号が52px→40pxに下がり、質問文の太さも落ちたいま、
   小さな英字を縦に積む意味が無くなっていた。ページ上部に
   「QUESTIONS & ANSWERS」もあるので、意味としても重複していた。
   下の .qn i の指定は使われていないが、戻せるように残す。 */
.qa .qn i{font-style:normal;display:block;font-size:.32em;letter-spacing:.2em;
  color:var(--aq-t);margin-bottom:9px}

.qa details[open] .qn{color:var(--pk);transform:translateX(6px)}
.qa details[open] .qn i{color:var(--pk)}

.qa .qt{font-size:clamp(18px,2.1vw,24px);font-weight:600;line-height:1.75;color:var(--ink);
  transition:color .35s}
/* ★ 開いた質問文はピンクにしない（2026-08-13 菅さん）。
   質問文は長いので、まるごとピンクにすると**差し色のはずのピンクが
   画面でいちばん面積の大きい色**になり、他ページと温度が変わる。
   開いている印は「✕ボタン」と「ピンクの番号」で十分に立っている。
   → [[merchantclub-color-direction]] ピンクは差し */
.qa details[open] .qt{color:var(--ink)}

/* 開閉の印。丸の中の線が回る */
.qa .pm7{position:relative;width:34px;height:34px;border:1px solid var(--line);border-radius:50%;
  flex:none;margin-top:4px;transition:border-color .4s,background .4s,transform .45s}
.qa .pm7::before,.qa .pm7::after{content:"";position:absolute;left:50%;top:50%;background:var(--aq);
  transition:transform .45s cubic-bezier(.4,.4,0,1),background .35s}
.qa .pm7::before{width:13px;height:2px;transform:translate(-50%,-50%)}
.qa .pm7::after{width:2px;height:13px;transform:translate(-50%,-50%)}

.qa details[open] .pm7{background:var(--pk);border-color:var(--pk);transform:rotate(135deg)}
.qa details[open] .pm7::before,.qa details[open] .pm7::after{background:#fff}

/* 答え。箱に入れず、ピンクの柱と字下げだけで区切る */
.qa .ans{padding:2px 0 52px 100px;max-width:46rem;position:relative;
  animation:qaOpen .5s cubic-bezier(.4,.4,0,1)}
/* 柱は外した。字下げと余白だけで十分に区切れている */
@keyframes qaOpen{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.qa .ans p{margin:0 0 var(--gap-p);font-size:var(--fs);color:var(--ink-b);line-height:var(--lh);
  letter-spacing:var(--ls)}
.qa .ans p:first-child{font-size:18px;color:var(--ink);font-weight:500;line-height:1.95;
  letter-spacing:.01em;margin-bottom:30px}
.qa .ans p:last-child{margin-bottom:0}
/* 箇条書きは塗らない。ピンクの短い罫だけで示す */
.qa .ans ul{margin:6px 0 20px;padding:0;list-style:none;display:grid;gap:12px}
.qa .ans li{display:grid;grid-template-columns:24px 1fr;align-items:start;
  font-size:15.5px;color:var(--ink-b);line-height:1.95;letter-spacing:var(--ls)}
.qa .ans li::before{content:"";width:14px;height:2px;background:var(--pk);margin-top:1.05em}

@media(max-width:960px){
  .qa summary{grid-template-columns:1fr auto;gap:14px;padding:36px 0 34px 52px}
  .qa details[open] summary{padding-left:60px}
  .qa .qn{font-size:24px;top:40px}
  .qa .ans{padding:0 0 40px 60px}
  .qa .ans::before{left:52px;bottom:40px}
  .qa .pm7{width:28px;height:28px}
}

/* =========================================================
   会員の体験談（/experiences/）
   1人1枚を横長に。顔を大きく、見出しを主役に。
   ========================================================= */
.exp{display:grid;grid-template-columns:1fr;gap:22px;margin-top:52px;position:relative;z-index:2}
.exp .v{display:grid;grid-template-columns:220px 1fr;gap:52px;align-items:start;
  background:#fff;border:1px solid var(--line);padding:48px 52px 50px;
  transition:transform .45s cubic-bezier(.4,.4,0,1),box-shadow .45s,border-color .45s}


/* 左：顔を大きく */
.exp .ph{text-align:center}
.exp .ph img{width:200px;height:200px;border-radius:50%;object-fit:cover;background:var(--bg2);
  display:block;margin:0 auto;transition:transform .6s cubic-bezier(.4,.4,0,1)}

.exp .ph .n{margin-top:20px;font-size:17px;font-weight:700;line-height:1.5}
.exp .ph .r{margin-top:7px;font-size:12px;color:var(--ink-3);line-height:1.75}
.exp .ph .y{display:inline-block;margin-top:11px;font-size:11px;font-weight:700;letter-spacing:.06em;
  color:#fff;background:var(--pk);padding:4px 11px}

/* 右：見出しを主役に */
.exp .bd2{min-width:0}
.exp h3{margin:0;font-size:clamp(21px,2.7vw,33px);font-weight:700;line-height:1.62;letter-spacing:.005em}
.exp h3 .qm{display:inline-block;font-family:var(--en);font-size:.9em;line-height:0;
  color:var(--aq);opacity:.55;margin-right:.1em;vertical-align:-.12em}

/* 4つの要素。
   もとは「薄い面＋左に線＋✓」で、WordPressの囲みブロックそのものの見た目だった。
   面をやめて、罫と短い線だけの組にする。そのぶん文字を 13.5px → 15.5px に上げて読ませる */
.exp .pts{display:grid;grid-template-columns:1fr 1fr;gap:0 38px;margin:34px 0 0;padding:0;list-style:none}
.exp .pts li{position:relative;padding:19px 0 19px 26px;font-size:15.5px;color:var(--ink-2);
  line-height:2.0;letter-spacing:.02em;border-top:1px solid var(--line)}
.exp .pts li::before{content:"";position:absolute;left:0;top:32px;
  width:12px;height:1px;background:var(--aq);transition:width .35s cubic-bezier(.2,.7,.3,1)}

@media(max-width:640px){ .exp .pts li{padding-left:22px;font-size:15px} }

/* 「取材記事を読む」。11.5pxの英字ラベル扱いで、リンクだと分からなかった。
   本文と同じ書体に戻し、大きさと下線でリンクだと分かるようにする */
.exp .go2{margin-top:30px;display:inline-flex;align-items:center;gap:9px;
  font-size:14.5px;letter-spacing:.06em;font-weight:600;color:var(--ink);
  border-bottom:1px solid var(--aq);padding-bottom:7px;transition:.3s}


/* =========================================================
   MyASP のフォームを、中身を変えずに見た目だけ整える
   name / action / hidden は一切触らない。CSSだけで当てる。
   ========================================================= */
.myasp{max-width:44rem;margin:48px auto 0;background:#fff;border:1px solid var(--line);
  padding:44px 42px 48px;position:relative;z-index:2;box-shadow:0 18px 50px rgba(14,151,176,.08)}
.myasp::before{content:"";position:absolute;left:0;top:0;right:0;height:3px;background:var(--aq)}
.myasp .input_unit{margin:0 0 26px}
.myasp .form_input_label{display:inline-block;font-size:13.5px;font-weight:700;color:var(--ink);
  letter-spacing:.04em;margin-bottom:10px}
.myasp .form_input_label.required::after{content:"必須";margin-left:9px;font-size:10.5px;font-weight:700;
  color:#fff;background:var(--pk);padding:3px 7px;letter-spacing:.06em;vertical-align:2px}
.myasp .label_frame p{margin:6px 0 10px;font-size:12.5px;color:var(--ink-3);line-height:1.9}
.myasp input[type=text],.myasp input[type=email],.myasp textarea{
  width:100%!important;max-width:100%!important;border:1px solid var(--line);background:#fff;
  padding:15px 17px;font:inherit;font-size:14.5px;outline:none;transition:border-color .3s,box-shadow .3s}
.myasp textarea{min-height:120px;line-height:1.95;resize:vertical}
.myasp input:focus,.myasp textarea:focus{border-color:var(--aq);box-shadow:0 0 0 3px rgba(20,190,220,.15)}
.myasp .radiobutton_frame,.myasp .checkbox_frame{display:flex;align-items:flex-start;gap:11px;margin:0 0 10px}
.myasp .radiobutton_input,.myasp .checkbox_input{flex:none;margin-top:4px}
.myasp .radiobutton_frame input,.myasp .checkbox_frame input{accent-color:var(--aq);width:17px;height:17px}
.myasp .form_input_radio_label,.myasp .form_input_checkbox_label{font-size:14px;line-height:1.85;cursor:pointer}
.myasp .form_input_submit{margin-top:34px;text-align:center}
.myasp input[type=submit]{border:0;background:var(--pk);color:#fff;font:inherit;font-size:15px;
  font-weight:700;letter-spacing:.06em;padding:19px 52px;cursor:pointer;
  transition:background .3s,transform .3s,box-shadow .3s}

.myasp .my_column{width:auto!important;float:none!important}

/* =========================================================
   代表紹介（/sugatomoaki-profile/）
   ========================================================= */
.tl{max-width:46rem;margin:46px auto 0;position:relative;z-index:2;border-left:2px solid var(--line);
  padding-left:30px}
.tl .row{position:relative;padding:0 0 30px}
.tl .row:last-child{padding-bottom:0}
.tl .row::before{content:"";position:absolute;left:-37px;top:.55em;width:11px;height:11px;
  border-radius:50%;background:var(--aq);box-shadow:0 0 0 4px #fff}
.tl .yr{font-family:var(--en);font-size:13px;font-weight:700;letter-spacing:.1em;color:var(--aq-t)}
.tl p{margin:9px 0 0;font-size:14.5px;color:var(--ink-2);line-height:2.2}
.facts{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:44px;max-width:46rem;margin-left:auto;margin-right:auto;
  position:relative;z-index:2}
/* 直下のセルだけに効かせる。`.facts div` だと中の .k / .v2（どちらもdiv）にも
   padding が乗って、ラベルの箱が12pxの文字に対して66pxまで膨らんでいた */
.facts > div{background:#fff;padding:22px 24px}
.facts .k{font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--aq-t)}
.facts .v2{margin-top:9px;font-size:13.5px;color:var(--ink-2);line-height:2}

/* .facts.big ＝ 個別相談の「形式・時間・料金・担当」用。
   もとは 12px の見出しに 13.5px の値で、条件が全部同じ重さに見える表だった。
   いちばん効く情報（無料・30〜45分）を大きく出して、答えが目に飛び込む形にする。
   代表紹介ページの .facts（3項目）は変えないので、この class は付けないこと */
.facts.big{grid-template-columns:repeat(2,minmax(0,1fr))}
.facts.big > div{padding:34px 26px 32px}
.facts.big .k{font-size:12.5px;font-weight:600;letter-spacing:.14em;line-height:1.6;color:var(--aq-t)}
.facts.big .v2{margin-top:14px;font-size:clamp(20px,2.1vw,27px);font-weight:600;
  line-height:1.5;letter-spacing:.02em;color:var(--ink)}
.facts.big > div:nth-child(3) .v2{color:var(--pk-t)}      /* 料金＝無料。ここだけ差し色 */
/* 5つ目以降（カメラ・準備）は説明文なので、本文の大きさに戻す */
.facts.big > div:nth-child(n+5) .v2{font-size:15.5px;font-weight:400;line-height:2;color:var(--ink-2)}
@media(max-width:900px){
  .facts.big > div{padding:26px 22px}
}
@media(max-width:560px){
  .facts.big{grid-template-columns:1fr}
}
.say{position:relative;z-index:2;text-align:center;max-width:48rem;margin:0 auto}
.say h2{margin:0;font-size:clamp(24px,4vw,46px);font-weight:700;line-height:1.55}
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:48px;position:relative;z-index:2}
.gal figure{margin:0;overflow:hidden;background:var(--bg2)}
.gal img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .8s}


@media(max-width:960px){
  .exp .v{grid-template-columns:1fr;gap:26px;padding:30px 24px 34px}
  .exp .ph img{width:140px;height:140px}
  .exp .pts{grid-template-columns:1fr;gap:9px}
  .facts{grid-template-columns:1fr}
  .gal{grid-template-columns:repeat(2,1fr);gap:8px}
  .myasp{padding:26px 22px 30px}
  .faq summary{padding:20px 16px;font-size:15px;gap:12px}
  .faq .a{padding:2px 16px 24px;gap:12px}
  .tl{padding-left:22px}
  .tl .row::before{left:-28px}
}

/* ---------- 代表紹介：肩書きをはっきり見せる ---------- */
.idcard{max-width:46rem;margin:0 auto;position:relative;z-index:2;text-align:center}
.idcard .nm2{font-size:clamp(26px,3.4vw,40px);font-weight:700;letter-spacing:.06em;line-height:1.4}
.idcard .rl2{margin-top:16px;font-size:clamp(15px,1.9vw,19px);font-weight:700;color:var(--aq-t);
  line-height:1.9;letter-spacing:.03em}
.idcard .co{margin-top:20px;font-size:14px;color:var(--ink-2);line-height:2.1}
.idcard .bk{margin-top:14px;display:inline-flex;align-items:center;gap:12px;font-size:14px;
  font-weight:700;border:1px solid var(--aq);padding:11px 22px;color:var(--aq-t)}

/* 書影の帯 */
.books-band{position:relative;z-index:2;max-width:1160px;margin:40px auto 0;overflow:hidden}
.books-band img{display:block;width:100%;height:auto}
.books-band .cap2{margin-top:13px;font-size:12.5px;color:var(--ink-3);text-align:center}

/* 略歴は年表にしない。登壇時に引用しやすいよう、地の文のまま読ませる */
.prose{max-width:var(--mw);margin:44px auto 0;position:relative;z-index:2;
  background:#fff;border:1px solid var(--line);border-left:4px solid var(--aq);padding:40px 42px 44px}
.prose p{margin:0 0 var(--gap-p);font-size:var(--fs);color:var(--ink-b);line-height:var(--lh);
  letter-spacing:var(--ls)}
.prose p:last-child{margin-bottom:0}
.prose .lead3{font-size:16px;font-weight:700;color:var(--ink);line-height:2.1}

/* 蛍光ペン。文字色を変えずに下半分だけ塗るので、太字と併用しても濁らない。
   1段落に1〜2箇所まで。多用すると全部が同じ重さに戻る */
.mk{background:linear-gradient(transparent 62%,rgba(20,190,220,.30) 62%);
  padding:0 .08em;font-weight:600}
.mk.pk{background:linear-gradient(transparent 62%,rgba(240,105,156,.28) 62%)}

/* 現場写真。節ごとに散らす */
.gal.six{grid-template-columns:repeat(6,1fr);gap:10px}
.gal.three{grid-template-columns:repeat(3,1fr);gap:14px}
.gal.three img{aspect-ratio:16/9}

@media(max-width:960px){
  .gal.six{grid-template-columns:repeat(3,1fr);gap:6px}
  .gal.three{grid-template-columns:1fr;gap:10px}
  .prose{padding:26px 22px 28px}
  .idcard .rl2{font-size:15px}
}

/* =========================================================
   サービス詳細の「12の場所」— 縦長カードが12枚、横に流れる
   ---------------------------------------------------------
   ・写真は左右に余裕を持たせて敷く。動かす量は部品側で
     「はみ出させた分」までに制限してあるので、下地は出ない
   ・番号は大きく。カードの主役は番号と写真
   ・半透明の薄い色は使わない。乗せる色はベタで置く
   ========================================================= */
.t12{--mct-gap:22px;--mct-pad:8vw;--mct-ink:var(--aq);--mct-track:#dff4f9;
  --mct-top:112px;background:linear-gradient(180deg,#fff 0%,var(--bg2) 100%)}
body:has(> .tag) .t12{--mct-top:143px}
.t12 .mct-item{width:340px}

.t12 .c{position:relative;display:block;height:460px;overflow:hidden;background:#0b1218;
  transition:transform .45s cubic-bezier(.4,.4,0,1),box-shadow .45s}


/* 背景の写真。左右にたっぷりはみ出させる（動かしても下地が出ない） */
.t12 .mct-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
/* 全体の img には max-width:100% を掛けてあるので、はみ出させるには解除が要る
   （これを忘れて幅が効かず、左右に下地が出ていた） */
.t12 .mct-bg img{width:132%;max-width:none;height:100%;object-fit:cover;display:block;margin-left:-16%;
  transition:transform .9s cubic-bezier(.4,.4,0,1)}


/* 下から立ち上がる幕。中間のぼやけた段を作らず、はっきり切り替える */
.t12 .c::after{content:"";position:absolute;left:0;right:0;bottom:0;height:74%;z-index:1;
  pointer-events:none;
  background:linear-gradient(to top,#08121a 0%,#08121a 30%,rgba(8,18,26,.72) 62%,rgba(8,18,26,0) 100%)}

/* 番号。カードの主役 */
.t12 .no5{position:absolute;left:20px;top:14px;z-index:2;font-family:var(--en);
  font-size:62px;font-weight:700;line-height:1;letter-spacing:-.02em;
  color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.55)}
.t12 .no5 i{display:block;font-style:normal;font-size:.19em;letter-spacing:.24em;
  color:var(--aq);text-shadow:none;margin-top:6px}


.t12 .bd5{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:0 22px 24px}
/* 一言特徴。ベタの水色 */
.t12 .tag5{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.08em;
  color:#062b33;background:var(--aq);padding:5px 12px}
.t12 h3{margin:14px 0 0;font-size:21px;font-weight:700;line-height:1.55;color:#fff}
.t12 p{margin:11px 0 0;font-size:12.5px;line-height:1.95;color:#d9e6ec}
.t12 .go5{margin-top:16px;font-family:var(--en);font-size:10.5px;letter-spacing:.18em;
  font-weight:700;color:#fff;display:inline-flex;align-items:center;gap:9px}
.t12 .go5::after{content:"";width:24px;height:2px;background:var(--aq);transition:width .35s,background .35s}

/* ホバーで下から水色の帯が立ち上がる */
.t12 .c .swipe{position:absolute;left:0;right:0;bottom:0;height:4px;z-index:3;
  background:linear-gradient(90deg,var(--aq),var(--pk));transform:scaleX(0);transform-origin:left;
  transition:transform .5s cubic-bezier(.4,.4,0,1)}


.t12.is-plain .mct-item{width:76vw;max-width:320px}
.t12.is-plain .c{height:420px}

/* =========================================================
   全文（12項目）— 畳んでおくが、読む気になる見た目にする
   ・番号を大きく／キャッチを1行／開くと最初の一文だけ大きく出す
   ・薄いグレーを使わない
   ========================================================= */
.full12{margin-top:52px;position:relative;z-index:2;display:grid;gap:12px}
.full12 details{background:#fff;border:1px solid var(--line);overflow:hidden;
  transition:border-color .35s,box-shadow .35s}

.full12 details[open]{border-color:var(--aq)}
.full12 summary{list-style:none;cursor:pointer;display:grid;
  grid-template-columns:auto 1fr auto;gap:22px;align-items:center;padding:22px 26px}
.full12 summary::-webkit-details-marker{display:none}
.full12 .n6{font-family:var(--en);font-size:34px;font-weight:700;line-height:1;letter-spacing:-.02em;
  padding-right:.06em;background:linear-gradient(140deg,var(--aq),var(--pk));
  -webkit-background-clip:text;background-clip:text;color:transparent}
/* ★★ 2026-08-13：ここだけ**塗りつぶしの水色の札**で、サイトの他の場所
   （短い罫＋水色の字）と作法が違って浮いていた。さらに札と名前が2段に積んであり、
   1行が高く、12行で1,700px の白い箱の列に見えていた。
   ・札 … 塗りをやめて「短い罫＋水色の字」に（`.lab` と同じ作法）
   ・札と名前を**同じ行**に並べて、1行の高さを下げる
   ・名前の太さ 700→600（太い見出しは使わない、が全体の決め）
   → [[typography-avoid-bold-pop]] */
.full12 summary{grid-template-columns:52px 1fr auto;gap:20px;padding:18px 26px}
/* 札の文字数が5〜10字とばらつくので、横に並べただけだと**名前の頭が行ごとに動く**。
   札の欄を固定幅にして、12行の名前の左端をそろえる（そろえるのが直し方。大きくしない）。 */
.full12 summary > div{display:grid;grid-template-columns:168px 1fr;gap:0 18px;align-items:baseline}
.full12 .k6{display:inline-flex;align-items:center;gap:8px;background:none;padding:0;
  font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--aq-t);white-space:nowrap}
.full12 .k6::before{content:"";width:18px;height:1px;background:var(--aq);flex:none}
.full12 .t6{margin-top:0;font-size:18px;font-weight:600;line-height:1.55;
  letter-spacing:.02em;color:var(--ink)}
.full12 .n6{font-size:28px}
.full12 .pm6{position:relative;width:16px;height:16px;flex:none}
.full12 .pm6::before,.full12 .pm6::after{content:"";position:absolute;background:var(--pk);
  transition:transform .35s cubic-bezier(.4,.4,0,1)}
.full12 .pm6::before{left:0;top:7px;width:16px;height:2px}
.full12 .pm6::after{left:7px;top:0;width:2px;height:16px}
.full12 details[open] .pm6::after{transform:rotate(90deg)}
.full12 .body6{padding:0 26px 30px;border-top:1px solid var(--line);margin-top:2px}
/* ★★ 2026-08-13：1文目が 19px の**太字(w700)**だった。/answers/ の答えの1文目で
   「サイト内で本文が太いのはここだけ」＝チープに見える原因だと分かって直した所と同じ形。
   同じ直し方（18px / w500）にそろえる。 → [[typography-avoid-bold-pop]] */
.full12 .body6 .first{margin:28px 0 0;font-size:18px;font-weight:500;line-height:1.95;color:var(--ink);
  letter-spacing:.01em;max-width:var(--mw)}
.full12 .body6 p{margin:var(--gap-p) 0 0;font-size:var(--fs);line-height:var(--lh);color:var(--ink-b);
  letter-spacing:var(--ls);max-width:var(--mw)}

@media(max-width:960px){
  /* ★★ 2026-08-13：以前は2列（番号｜中身）にして、＋を `margin-top:-30px` で
     無理やり右上に引き上げていた。中身の行数が変わると＋の位置がずれる（実測で下にずれていた）。
     PCと同じ**3列（番号｜中身｜＋）**にして、位置合わせは grid にまかせる。 */
  .full12 summary{grid-template-columns:auto 1fr auto;gap:14px;padding:18px}
  .full12 summary > div{grid-template-columns:1fr;gap:7px}   /* 狭い画面では札を名前の上に戻す */
  .full12 .pm6{grid-column:auto;justify-self:auto;margin-top:0}
  .full12 .n6{font-size:26px}
  .full12 .t6{font-size:16px}
  .full12 .body6{padding:0 18px 24px}
}


/* =========================================================
   BOOKS（/books/）— 本部会員の著書 23冊
   入口は「実物を斜めに並べる」。数字3つは使わない。
   末尾の THE GIFT は MyASP の <form> を一字も変えずに置き、
   外側の見た目だけ白地×水色に組み替えている。
   ========================================================= */

/* ---------- 入口：表紙を扇のように並べる ----------
   1行は「入る枚数だけ」置いて、あふれたぶんは折り返す。
   直す前は 12枚を1行に固定していたので、375px では行が626px になり、
   画面の外へ左右145pxずつはみ出して**両端の表紙が押せなかった**（2026-08-13 実測）。

   ★ 重なりは「左右に半分ずつ」の負のマージンで作ること。
   片側だけ（margin-left:-34px ＋ 先頭だけ0）にすると、折り返した2行目の
   先頭にも負の値が残って行が左へずれる。左右対称なら行の中心が動かない。
   はみ出すぶんは .rw の左右パディングで受ける。
   1行の枚数は幅で決まる：1160px→12枚（従来どおり）／375px→6枚。 */
.bkfan{margin-top:60px;display:flex;flex-direction:column;align-items:center;gap:30px}
.bkfan .rw{display:flex;flex-wrap:wrap;justify-content:center;
  max-width:874px;padding:26px 17px 0}   /* 874 = 104 + 11*70。PCで12枚を保つ蓋 */
.bkfan a{position:relative;width:104px;flex:0 0 104px;margin:0 -17px;
  transition:transform .5s cubic-bezier(.2,.85,.2,1),filter .5s}
.bkfan img{width:104px;height:152px;object-fit:cover;border-radius:2px;background:#eaf5f9;
  box-shadow:0 10px 22px rgba(14,90,110,.16),0 1px 0 rgba(255,255,255,.7) inset}
.bkfan a:nth-child(odd){transform:rotate(-3.4deg)}
.bkfan a:nth-child(even){transform:rotate(2.8deg) translateY(3px)}


.bkfan a::after{content:attr(data-t);position:absolute;left:50%;bottom:-13px;translate:-50% 0;
  white-space:nowrap;max-width:230px;overflow:hidden;text-overflow:ellipsis;
  font-size:11px;letter-spacing:.04em;color:#fff;background:var(--ink);
  padding:5px 10px;border-radius:3px;opacity:0;transition:opacity .25s;pointer-events:none;z-index:7}

/* `.bkfan .note`（「全23冊／うち5冊は菅智晃が監修」）は 2026-08-13 に撤去した。
   菅さん「特にいらない。そもそも僕の監修は4冊」。数はこちらで数えて書かないこと。 */
/* ★ 切り替えは 900px ではなく 940px。柱の幅は min(1220,画面)-60 なので、
   104pxの表紙で12枚（874px）が入るのは **941px から**。
   900px で切り替えると 901〜940px の間だけ「11枚＋ぽつんと1枚」になる（実測）。 */
@media(max-width:940px){
  /* 折り返した段と段の間隔。指では持ち上がらないので上のあきは要らない。
     .bkfan の gap も合わせないと「2段のかたまりが2つ」に見えてしまう（段の間だけ44px空く）。 */
  .bkfan{gap:18px}
  .bkfan .rw{padding:0 13px;row-gap:18px}
  .bkfan a{width:76px;flex:0 0 76px;margin:0 -13px}
  .bkfan img{width:76px;height:111px}
  .bkfan a::after{display:none}
}

/* ---------- 一覧：箱で囲まず、罫と余白で仕切る ---------- */
.bk{display:grid;grid-template-columns:1fr 1fr;gap:0 64px}
.bk-i{display:grid;grid-template-columns:98px 1fr;gap:24px;align-items:start;
  padding:30px 0 30px;border-top:1px solid var(--line);position:relative;scroll-margin-top:170px}
.bk-i::after{content:"";position:absolute;left:0;top:-1px;height:1px;width:100%;
  background:var(--aq);transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.2,.8,.2,1)}

.bk-i > .bk-c img{width:98px;height:143px;object-fit:cover;border-radius:2px;background:#eaf5f9;
  box-shadow:0 8px 18px rgba(14,90,110,.14);transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s}

.bk-f{display:flex;flex-wrap:wrap;gap:0 14px;font-size:11.5px;letter-spacing:.06em;color:var(--ink-3)}
.bk-f a{color:var(--aq-t);border-bottom:1px solid rgba(20,190,220,.4);padding-bottom:1px}

.bk-t{margin:11px 0 0;font-size:17px;font-weight:600;line-height:1.68;letter-spacing:.01em;color:var(--ink)}

.bk-a{margin:12px 0 0;font-size:12.5px;letter-spacing:.04em;color:var(--ink-3)}
.bk-a b{font-size:14px;font-weight:600;color:var(--ink-2);letter-spacing:.02em}
.bk-a .more{margin-left:10px;color:var(--aq-t);border-bottom:1px solid rgba(20,190,220,.4)}
.bk-r{display:inline-block;margin-top:9px;font-size:11px;letter-spacing:.08em;
  color:var(--aq-t);background:var(--bg2);border-radius:2px;padding:3px 9px}
.bk-s{display:inline-block;margin-top:9px;margin-left:7px;font-size:11px;letter-spacing:.08em;
  color:var(--ink-3);border:1px solid var(--line);border-radius:2px;padding:2px 8px}
@media(max-width:900px){
  .bk{grid-template-columns:1fr;gap:0}
  .bk-i{grid-template-columns:82px 1fr;gap:18px;padding:24px 0}
  .bk-i > .bk-c img{width:82px;height:120px}
  .bk-t{font-size:16px}
}

/* ---------- 末尾：THE GIFT（MyASPフォームの外側だけ） ---------- */
.gf{max-width:820px;margin:0 auto}
/* バナーの直下。直す前は 38px の空白のあとに、うすい水色の1行が
   宙に浮いていた（絵の中にも同じ「公式メールマガジン」が書いてある）。
   ＝ 絵と文がつながっていないので雑に見える（2026-08-13 菅さん指摘）。
   そこでこの1行を figure の中に入れて**絵の説明**にし、
   頭に水色の短い罫を置いて絵と1つの塊にした。本文はそのあと改めて始まる。
   罫は ::before の inline-block で置く（.rb-cap と同じ型）。
   文章の箱に flex を当てると地の文と <b> が別々に折り返す。 */
.gf-b img{width:100%;height:auto;border-radius:3px;
  box-shadow:0 18px 40px rgba(14,90,110,.16)}
.gf-tag{margin:15px 0 0;font-size:12px;letter-spacing:.14em;line-height:1.8;color:var(--aq-t)}
.gf-tag::before{content:"";display:inline-block;width:26px;height:2px;
  background:var(--aq);vertical-align:middle;margin-right:12px}
.gf-h{margin-top:34px}
.gf-lead{margin:14px 0 0;font-size:17px;line-height:1.95;letter-spacing:var(--ls);color:var(--ink-b)}
.gf-lead b{font-weight:600;color:var(--ink)}
.gf-ul{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:11px}
.gf-ul li{display:flex;gap:12px;font-size:14.5px;line-height:1.8;color:var(--ink-2)}
.gf-ul li span:first-child{color:var(--pk);font-weight:700}
.gf-ul b{font-weight:600;color:var(--ink)}
/* 登録フォームの箱。背景に var(--bg2) を指定していたが、この節そのものが
   var(--bg2) なので**箱が1つも見えていなかった**（2026-08-13 実測。どちらも
   rgb(242,251,255)）。白地にして、上辺に水色→ピンクの細い帯を1本置く
   ＝トップの締めのフォーム（.form）と同じ扱いにそろえる。 */
.gf-f{position:relative;margin-top:34px;padding:34px 34px 32px;background:#fff;
  border:1px solid var(--line);border-radius:3px;overflow:hidden;
  box-shadow:0 20px 50px rgba(14,151,176,.13)}
.gf-f::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;
  background:linear-gradient(90deg,var(--aq) 0%,var(--aq) 62%,var(--pk) 100%)}
.gf-f .content_title h2{margin:0 0 20px;font-size:15px;font-weight:600;line-height:1.7;
  letter-spacing:.03em;color:var(--ink)}
.gf-f .input.text{display:grid;gap:9px}
.gf-f .form_input_label{font-size:12px;letter-spacing:.08em;color:var(--ink-3)}
.gf-f input[type=email]{width:100%;padding:15px 16px;font-size:15px;font-family:var(--jp);
  color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:2px;outline:none;
  transition:border-color .3s,box-shadow .3s}
.gf-f input[type=email]:focus{border-color:var(--aq);box-shadow:0 0 0 3px rgba(20,190,220,.14)}
.gf-f .form_input_submit{margin-top:18px}
.gf-f input[type=submit]{width:100%;padding:17px 20px;font-size:15.5px;font-weight:600;
  font-family:var(--jp);letter-spacing:.08em;color:#fff;background:var(--aq);
  border:0;border-radius:2px;cursor:pointer;transition:background .3s,transform .3s}

.gf-tr{list-style:none;display:flex;flex-wrap:wrap;gap:10px 26px;margin:20px 0 0;padding:0;
  font-size:12px;letter-spacing:.06em;color:var(--ink-3)}
.gf-tr span{color:var(--aq);font-weight:700;margin-right:6px}
@media(max-width:900px){ .gf-f{padding:24px 20px} .gf-lead{font-size:15.5px} }

/* =========================================================
   SEMINAR（/seminar/）— 定例会スケジュール
   入口は「直近の1件を抜き出す」。開催サイクルは曜日で決まっているので、
   次に開く回は手で書かずブラウザ側で計算する（書き換え忘れが起きない）。
   カレンダーは本番の Google 埋め込みをそのまま置き、外枠だけ整える。
   ========================================================= */

/* ---------- 入口：次に開く1回を大きく、その後を細く ---------- */
.upn{margin-top:54px;position:relative;z-index:2;display:grid;
  grid-template-columns:1.05fr .95fr;border-top:1px solid var(--line)}
.upn > div{padding:34px 0 40px}
.upn .big{padding-right:46px;border-right:1px solid var(--line)}
.upn .rest{padding-left:46px}
.upn .k{display:flex;align-items:center;gap:11px;font-family:var(--en);font-size:10.5px;
  font-weight:700;letter-spacing:.24em;color:var(--aq-t)}
.upn .k::before{content:"";width:24px;height:1px;background:var(--aq)}
.upn .d{margin-top:18px;display:flex;align-items:baseline;line-height:1;color:var(--ink)}
.upn .d .n{font-family:var(--en);font-size:clamp(44px,6.6vw,78px);font-weight:700;letter-spacing:-.01em}
.upn .d .u{margin:0 12px 0 3px;font-size:clamp(15px,1.8vw,20px);font-weight:500;color:var(--ink-2)}
.upn .d .w{align-self:center;margin-left:2px;padding:5px 11px;border:1px solid var(--aq);
  border-radius:2px;font-size:12.5px;font-weight:700;letter-spacing:.1em;color:var(--aq-t)}
.upn .nm{margin-top:22px;font-size:clamp(20px,2.6vw,30px);font-weight:600;letter-spacing:.02em}
.upn .mt{margin:13px 0 0;font-size:14px;color:var(--ink-2);letter-spacing:.05em}
.upn .mt span{margin:0 8px;color:var(--ink-3)}
/* 時間は回によって変わるので「通常」と断る。断らないと入口が嘘をつく */
.upn .mt i{font-style:normal;margin-right:8px;font-size:11.5px;font-weight:700;
  letter-spacing:.08em;color:var(--ink-3)}
.upn .cav{grid-column:1/-1;margin:0;padding:16px 0 22px;border-top:1px solid var(--line);
  font-size:12.5px;line-height:1.95;color:var(--ink-3);letter-spacing:.04em}
.upn .cav a{color:var(--aq-t);font-weight:700;border-bottom:1px solid var(--aq);
  padding-bottom:1px;transition:color .3s,border-color .3s}

.upn .g{display:inline-block;margin-top:20px;padding:6px 13px;border-radius:2px;
  font-size:11.5px;font-weight:700;letter-spacing:.08em;color:#fff;background:var(--aq)}
.upn .g.only{background:#fff;color:var(--ink-3);border:1px solid var(--line)}
.upn ul{list-style:none;margin:18px 0 0;padding:0}
.upn li{display:grid;grid-template-columns:auto 1fr auto;gap:0 20px;align-items:baseline;
  padding:14px 0;border-bottom:1px solid var(--line)}
.upn li:first-child{border-top:1px solid var(--line)}
.upn li .ld{min-width:78px;font-family:var(--en);font-size:14.5px;font-weight:700;color:var(--aq-t)}
.upn li .ld em{font-style:normal;font-size:11.5px;margin-left:3px;color:var(--ink-3)}
.upn li .ln{font-size:14.5px;font-weight:600}
.upn li .lt{font-family:var(--en);font-size:12.5px;color:var(--ink-3);white-space:nowrap}
@media(max-width:900px){
  .upn{grid-template-columns:1fr}
  .upn > div{padding:28px 0 30px}
  .upn .big{padding-right:0;border-right:0;border-bottom:1px solid var(--line)}
  .upn .rest{padding-left:0}
  /* 狭い画面では「日付＋支部名」を上、時間を右下に落とす（本部だけ2行に折れるのを防ぐ） */
  .upn li{grid-template-columns:auto 1fr;row-gap:5px}
  .upn li .lt{grid-column:2;justify-self:end}
}

/* ---------- 開催サイクル：箱で囲まず、罫と余白で仕切る ---------- */
.cyc{margin-top:52px;position:relative;z-index:2;border-top:1px solid var(--line)}
.cyc-i{position:relative;display:grid;grid-template-columns:1.2fr .85fr .8fr auto;
  gap:0 26px;align-items:center;padding:24px 2px;border-bottom:1px solid var(--line)}
.cyc-i::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;
  background:var(--aq);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .5s cubic-bezier(.4,.4,0,1)}

.cyc-n{font-size:17px;font-weight:600;letter-spacing:.02em}
.cyc-n small{display:block;margin-top:5px;font-size:11.5px;font-weight:500;
  color:var(--ink-3);letter-spacing:.06em}
.cyc-w{font-size:15.5px;font-weight:700;color:var(--aq-t);letter-spacing:.04em}
.cyc-t{font-family:var(--en);font-size:14.5px;color:var(--ink-2);letter-spacing:.03em}
.cyc-g{justify-self:end;padding:6px 12px;border:1px solid var(--aq);border-radius:2px;
  font-size:11.5px;font-weight:700;letter-spacing:.06em;color:var(--aq-t);white-space:nowrap}
.cyc-g.only{color:var(--ink-3);border-color:var(--line)}
.cyc-note{margin:24px 0 0;font-size:12.5px;color:var(--ink-3);line-height:2.1}
.cyc-note a{color:var(--aq-t);font-weight:700;border-bottom:1px solid var(--aq);padding-bottom:1px}

@media(max-width:900px){
  .cyc-i{grid-template-columns:1fr auto;row-gap:12px;padding:20px 2px}
  .cyc-n{grid-column:1;grid-row:1}
  .cyc-g{grid-column:2;grid-row:1}
  .cyc-w{grid-column:1;grid-row:2}
  .cyc-t{grid-column:2;grid-row:2;text-align:right}
}

/* ---------- カレンダー：埋め込みは触らず、外枠だけ ---------- */
.calbox{position:relative;z-index:2;margin-top:50px;background:#fff;
  border:1px solid var(--line);padding:14px}
.calbox .in{overflow-x:auto;-webkit-overflow-scrolling:touch}
.calbox iframe{display:block;width:100%;min-width:680px;height:600px;border:0}
.calnote{margin:18px 0 0;font-size:12.5px;color:var(--ink-3);letter-spacing:.04em}
@media(max-width:900px){ .calbox{padding:10px} .calbox iframe{height:520px} }

/* ---------- 参加のしかた：番号を左の余白にはみ出させる ---------- */
.jn{position:relative;z-index:2;margin-top:56px;max-width:46rem}
.jn-i{position:relative;padding:30px 0 32px 78px;border-top:1px solid var(--line)}
.jn-i:last-of-type{border-bottom:1px solid var(--line)}
.jn-i .n{position:absolute;left:-16px;top:22px;font-family:var(--en);font-size:46px;
  font-weight:700;line-height:1;letter-spacing:-.02em;color:var(--aq);opacity:.22}
.jn-i h3{margin:0;font-size:19px;font-weight:600;letter-spacing:.02em}
.jn-i p{margin:12px 0 0;font-size:15px;color:var(--ink-2);line-height:2.05}
.jn-cta{margin-top:36px}
@media(max-width:900px){
  .jn-i{padding:26px 0 28px 60px}
  .jn-i .n{left:-6px;top:20px;font-size:38px}
}

/* =========================================================
   BRANCH（/branch/）— 支部6つ
   入口は「地図・場所で見せる」。レパートリー表でまだ使っていない手。
   ただし本文が言うとおり全支部オンラインなので、地理の写しにはしない。
   方角と距離だけの位置図にして、WEB3.0支部だけを圏の外に置く。
   「場所を持たない支部がひとつある」ことが、絵のほうで先に伝わる。
   紹介動画は mc-video-popup プラグインの手置き入口（data-vimeo-id）を使う。
   プラグイン本体は1文字も触っていない。class名も要らない
   （プラグインは .mc-play-btn か [data-vimeo-id] のどちらでも拾う）。
   ========================================================= */

/* ---------- 入口：位置図 ---------- */
.brmap{position:relative;z-index:2;margin:56px 0 0}
.brmap svg{display:block;width:100%;height:auto}
.brmap .gl{stroke:var(--line);stroke-width:1}
.brmap .ring{fill:none;stroke:var(--aq);stroke-width:1;opacity:.26}
.brmap .ring.d{stroke-dasharray:2 8;opacity:.42}
.brmap .tie{stroke:var(--pk);stroke-width:1;stroke-dasharray:2 7;opacity:.5}
.brmap .core{fill:var(--ink-3);opacity:.5}
.brmap .core-t{font-family:var(--jp);font-size:10.5px;fill:var(--ink-3);letter-spacing:.16em}
.brmap a{cursor:pointer}
.brmap .halo{fill:var(--aq);opacity:0;transition:opacity .35s}
.brmap .dot{fill:#fff;stroke:var(--aq);stroke-width:2.5;transition:fill .3s,stroke .3s}
.brmap .nm{font-family:var(--jp);font-size:14.5px;font-weight:600;fill:var(--ink);
  letter-spacing:.04em;transition:fill .3s}
.brmap .th{font-family:var(--jp);font-size:11px;fill:var(--ink-3);letter-spacing:.06em}



/* 圏の外にある1つだけ、待機状態から色を変えておく */
.brmap a.off .dot{stroke:var(--pk)}
.brmap a.off .halo{fill:var(--pk);opacity:.08}
.brmap-cap{margin:20px 0 0;font-size:12.5px;color:var(--ink-3);letter-spacing:.04em;line-height:2.05}
.brmap-cap .sp{display:none}
/* 位置図は横に長い。狭い画面で幅に合わせて縮めると支部名が読めなくなるので、
   縮めずに横スクロールさせる（カレンダーの埋め込みと同じ扱い）。 */
@media(max-width:820px){
  .brmap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .brmap svg{min-width:660px}
  .brmap .nm{font-size:21px} .brmap .th{font-size:15.5px} .brmap .core-t{font-size:14px}
  .brmap-cap .sp{display:inline}
}

/* ---------- 6支部：箱に入れず、写真と本文を左右交互に ---------- */
.br{position:relative;z-index:2;margin-top:34px}
.br-i{display:grid;grid-template-columns:1.05fr 1fr;gap:0 60px;align-items:center;
  padding:56px 0;border-top:1px solid var(--line);scroll-margin-top:90px}
.br-i:last-of-type{border-bottom:1px solid var(--line)}
.br-i:nth-of-type(even) .br-ph{grid-column:2;grid-row:1}
.br-i:nth-of-type(even) .br-tx{grid-column:1;grid-row:1}
.br-ph{margin:0;position:relative;overflow:hidden;background:var(--bg2)}
/* 6枚とも 16:9 の「支部代表＋キャッチコピー」が入った作り込まれた絵。
   枠に合わせて切ると文字の端が落ちるので、比率を指定せずそのまま敷く。 */
.br-ph img{width:100%;height:auto}
/* 再生ボタン。写真の上に乗せず、角に置いて写真を隠さない */
.br-play{position:absolute;left:0;bottom:0;display:inline-flex;align-items:center;gap:12px;
  padding:13px 22px 13px 14px;background:rgba(255,255,255,.95);color:var(--ink);
  font-size:12px;font-weight:700;letter-spacing:.08em;
  transition:background .3s,color .3s}
.br-play .ico{width:30px;height:30px;border-radius:50%;background:var(--aq);flex:none;
  display:inline-flex;align-items:center;justify-content:center;transition:background .3s}
.br-play .ico svg{width:10px;height:12px;margin-left:2px;fill:#fff;transition:fill .3s}



.br-n{font-family:var(--en);font-size:11.5px;font-weight:700;letter-spacing:.24em;color:var(--aq)}
.br-nm{margin-top:16px;font-size:clamp(21px,2.5vw,29px);font-weight:600;letter-spacing:.03em;line-height:1.5}
.br-i h3{margin:16px 0 0;font-size:16.5px;font-weight:600;color:var(--aq-t);
  line-height:1.75;letter-spacing:.02em}
.br-sub{margin:9px 0 0;font-size:12.5px;color:var(--ink-3);letter-spacing:.05em}
.br-d{margin:22px 0 0;font-size:15px;line-height:2.05;color:var(--ink-b);letter-spacing:.015em}
.br-meta{margin-top:24px;display:inline-flex;align-items:baseline;gap:12px;padding:9px 15px;
  border:1px solid var(--line);font-size:12.5px;color:var(--ink-2);letter-spacing:.04em}
.br-meta b{color:var(--aq-t);font-weight:700}
.br-go{display:inline-flex;align-items:center;gap:10px;margin-top:26px;padding-bottom:6px;
  font-size:13.5px;font-weight:700;color:var(--aq-t);border-bottom:1px solid var(--aq);
  transition:color .3s,border-color .3s}

.br-go i{font-style:normal;font-family:var(--en);opacity:.7}

/* ---------- 支部共通のサービス：縦の罫だけで4つに割る ---------- */
.svc4{display:grid;grid-template-columns:repeat(4,1fr);margin-top:54px;
  border-top:1px solid var(--line);position:relative;z-index:2}
.svc4 > div{padding:32px 30px 36px 0;border-right:1px solid var(--line)}
.svc4 > div:last-child{border-right:0;padding-right:0}
.svc4 .k{font-family:var(--en);font-size:11px;font-weight:700;letter-spacing:.2em;color:var(--aq)}
.svc4 h3{margin:15px 0 0;font-size:17px;font-weight:600;letter-spacing:.02em}
.svc4 p{margin:13px 0 0;font-size:14px;color:var(--ink-2);line-height:2}
.svc-note{margin:34px 0 0;max-width:42rem;font-size:14px;color:var(--ink-2);line-height:2.1}
.svc-note b{color:var(--aq-t);font-weight:700}

/* ---------- 参加費用：金額は数字で立てる ---------- */
.fee{display:grid;grid-template-columns:1fr 1fr;margin-top:54px;position:relative;z-index:2;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.fee > div{padding:36px 0}
.fee > div + div{padding-left:52px;border-left:1px solid var(--line)}
.fee .k{display:flex;align-items:center;gap:11px;font-family:var(--en);font-size:10.5px;
  font-weight:700;letter-spacing:.24em;color:var(--aq-t)}
.fee .k::before{content:"";width:24px;height:1px;background:var(--aq)}
.fee .v{margin-top:18px;display:flex;align-items:baseline;gap:7px}
.fee .v .n{font-family:var(--en);font-size:clamp(38px,5.4vw,64px);font-weight:700;
  line-height:1;letter-spacing:-.01em}
.fee .v .u{font-size:15px;color:var(--ink-2)}
.fee .m{margin:14px 0 0;font-size:13px;color:var(--ink-3);letter-spacing:.04em}
.fee-note{margin:30px 0 0;max-width:40rem;font-size:14.5px;color:var(--ink-b);line-height:2.1}

/* ---------- 締め：6支部への入口を1行ずつ ---------- */
.brlist{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:50px;position:relative;z-index:2}
.brlist a{display:flex;align-items:center;justify-content:space-between;gap:14px;background:#fff;
  padding:21px 24px;font-size:14.5px;font-weight:600;letter-spacing:.02em;
  transition:background .3s,color .3s}
.brlist a i{font-style:normal;font-family:var(--en);font-size:11.5px;color:var(--aq);
  letter-spacing:.1em;transition:color .3s}



/* ---------- 動画のポップアップ ----------
   プラグイン側の見た目はオレンジ＋クリームで、この配色の中では浮く。
   プラグインには触らず、id セレクタで上書きする（id なので読み込み順に関係なく勝つ）。 */
#mc-video-modal .mc-video-overlay{background:rgba(8,18,24,.88);backdrop-filter:blur(3px)}
#mc-video-modal .mc-video-dialog{background:#fff;border:0;border-radius:0;padding:12px;
  box-shadow:0 30px 80px rgba(0,0,0,.5)}
#mc-video-modal .mc-video-title{color:var(--ink);font-weight:600;font-size:15px;letter-spacing:.06em}
#mc-video-modal .mc-video-close{background:var(--aq);font-weight:400;
  box-shadow:0 6px 18px rgba(20,190,220,.4)}

#mc-video-modal .mc-video-frame{border-radius:0}

@media(max-width:960px){
  .br-i{grid-template-columns:1fr;gap:26px 0;padding:44px 0}
  /* 狭い画面では左右交互をやめ、どの支部も「写真→本文」の順にそろえる */
  .br-i .br-ph,.br-i:nth-of-type(even) .br-ph{grid-column:1;grid-row:1}
  .br-i .br-tx,.br-i:nth-of-type(even) .br-tx{grid-column:1;grid-row:2}
  .svc4{grid-template-columns:1fr 1fr}
  .svc4 > div{padding:28px 24px 30px 0}
  .svc4 > div:nth-child(2n){border-right:0;padding-right:0;padding-left:24px}
  .svc4 > div:nth-child(n+3){border-top:1px solid var(--line)}
  .fee{grid-template-columns:1fr}
  .fee > div{padding:28px 0}
  .fee > div + div{padding-left:0;border-left:0;border-top:1px solid var(--line)}
  .brlist{grid-template-columns:1fr}
}

/* =========================================================
   2026-08-12 菅さん指摘まとめ（スマホのメニュー・押した感じ・帯・フッター）
   ここから下は「後から足した共通の直し」。ページ固有CSSではない。
   ========================================================= */

/* ---------- スマホのメニュー（ハンバーガー＋ドロワー） ----------
   960px以下では .nav / .hd-cta / .srch / .tabs を display:none にしているだけで、
   **代わりの入口が1つも無かった**（2026-08-12 菅さん指摘「スマホではそもそもメニューが出ない」）。
   PCのヘッダーと同じ行き先を、指で押せる大きさで並べ直したのがこのドロワー。 */
.burger{display:none;width:44px;height:44px;flex:none;
  background:none;border:0;padding:0;cursor:pointer;
  flex-direction:column;justify-content:center;align-items:center;gap:5px}
.burger span{display:block;width:22px;height:2px;background:#fff;border-radius:2px;
  transition:transform .3s cubic-bezier(.4,.4,0,1),opacity .2s}
.hd.solid .burger span{background:var(--ink)}
.burger.on span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.on span:nth-child(2){opacity:0}
.burger.on span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* 左からスライドして出す（元のサイトがそうだった＝菅さん 2026-08-12）。
   透過だけで出すと、開いている途中に後ろの映像が透けて文字が読めない。 */
.mnav{position:fixed;inset:0;z-index:349;background:#fff;overflow-y:auto;
  -webkit-overflow-scrolling:touch;transform:translateX(-100%);
  transition:transform .32s cubic-bezier(.4,.4,0,1)}
.mnav.on{transform:translateX(0)}
.mnav-in{padding:calc(var(--tagh) + var(--barh,0px) + 74px) 22px 56px;max-width:560px;margin:0 auto}
.mnav-list{display:block;border-top:1px solid var(--line)}
/* 指で押せる大きさ。1行56px以上を守る（Appleの最小44pxより余裕を持たせる） */
.mnav-list a{display:block;padding:17px 4px;border-bottom:1px solid var(--line);color:var(--ink)}
.mnav-list a b{display:block;font-size:16.5px;font-weight:600;line-height:1.5}
.mnav-list a span{display:block;font-size:12px;color:var(--ink-3);margin-top:3px}
.mnav-list a.on b{color:var(--aq-t)}
.mnav-cta{display:grid;gap:10px;margin-top:26px}
.mnav-cta .btn{width:100%;justify-content:center;text-align:center;padding:16px 18px}
.mnav-cta .btn.line{background:none;color:var(--ink);border:1px solid var(--line)}
.mnav-srch{display:flex;align-items:center;margin-top:22px;border:1px solid var(--line);background:#fff}
.mnav-srch input[type=search]{flex:1;min-width:0;border:0;outline:none;background:none;
  padding:14px 14px;font-size:16px;color:var(--ink)}
.mnav-srch button{width:48px;height:48px;flex:none;display:grid;place-items:center;
  background:none;border:0;cursor:pointer;color:var(--ink-2)}
.mnav-srch button svg{width:16px;height:16px;fill:currentColor}
.mnav-ut{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:26px}
.mnav-ut a{display:inline-flex;align-items:center;gap:8px;padding:10px 2px;
  font-size:13.5px;color:var(--ink-2)}
.mnav-ut a svg{width:15px;height:15px;fill:currentColor;opacity:.7}
.mnav-sns{display:flex;gap:10px;margin-top:14px}
.mnav-sns a{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--line);color:var(--ink-2)}
.mnav-sns a svg{width:15px;height:15px;fill:currentColor}
body.mnav-open{overflow:hidden}

/* ★ ヘッダーの切り替えは **1180px**。960pxではない（2026-08-12 菅さん指摘
   「全体のバランスを見た時に醜い」）。ロゴ＋ナビ6項目＋検索＋CTAを1行に置くには
   **実測で1117px**要る（ナビの自然幅667＋ロゴ等324＋隙間と余白126）。
   960pxにしていたせいで 961〜1180px では ナビが2段・「お問い合わせ」が2行に折れていた。
   ナビの文言や字の大きさを変えたら、この1117pxを測り直して閾値を決めること。
   レイアウト（ヒーロー・グリッド・フッター）の切り替えは960pxのままで別。 */
@media(max-width:1180px){
  .nav,.hd-top,.hd-cta,.srch{display:none}
  .burger{display:flex}
  /* 開くボタンが左上、ロゴは画面の中央。ボタンぶん(44px)の余白を右にも取って本当の中央に置く */
  .hd-in{gap:0;padding:4px 14px 12px}
  .hd-in .logo{margin:0 auto;padding-right:44px}
  /* ドロワーを開いている間はヘッダーを白くして、×印とロゴが読めるようにする */
  .hd.mnav-lift{background:#fff;box-shadow:0 1px 0 var(--line)}
  .hd.mnav-lift::before{opacity:0}
  .hd.mnav-lift .logo{color:var(--ink);text-shadow:none}
  .hd.mnav-lift .burger span{background:var(--ink)}
}

/* ---------- スマホの最初の画面は「動画で全画面」 ----------
   2026-08-12 まで、スマホだけ動画を上64vhの帯にして、文字は下の黒地に置いていた。
   元のサイトは**縦長の画面いっぱいが動画で、文字はその上に載る**形＝菅さん指摘
   「その方がクオリティが高い」。PC（961px以上）は元から全画面なので触っていない。
   高さは 100svh（アドレスバーが出ている時の高さ）。100vh だと iOS でボタンが隠れる。 */
@media(max-width:960px){
  .hero{height:100vh;height:100svh;min-height:540px;padding-top:0}
  .hero .stage{position:absolute;inset:0;top:0;height:auto}
  /* 文字は下寄せ。下に出る2つのCTA帯(56px)と重ならないよう余白を取る */
  .hero .in{position:absolute;left:0;right:0;bottom:0;padding:0 0 92px;z-index:3}
  .hero h1{line-height:1.26}
  .hero .sub{margin-top:16px;max-width:none}
  .hero .acts{margin-top:24px}
  .hero .acts .btn{padding:15px 20px;font-size:13.5px}
  /* ヘッダーの高さは横スクロールメニューの有無で変わる。
     mc.js が実測して --hdh に入れるので、それを足して必ずメニューの下に置く。
     数字で決め打ちすると、メニューを足したときに重なる（実際に重なった）。 */
  .hero .snd{right:14px;bottom:auto;transform:none;
    top:calc(var(--tagh) + var(--barh,0px) + var(--hdh,60px) + 14px)}
  /* 文字を載せるぶん、下側の暗幕を強める（映像の明るいコマでも読めるように） */
  .hero .scrim{background:
    linear-gradient(102deg,rgba(6,14,20,.5) 0%,rgba(6,14,20,.28) 45%,rgba(6,14,20,.1) 78%),
    linear-gradient(to top,rgba(6,14,20,.86) 0%,rgba(6,14,20,.5) 34%,transparent 62%)}
}

/* ---------- スマホでは追尾タブを画面下の横並びにする ----------
   PCで右端に縦で追尾している2つのCTA（.tabs）は、スマホでは
   **途中から一番下にくっついて横並びで出る**のが元の形＝菅さん指摘。
   最初から出すとヒーローを隠すので、1画面ぶんスクロールしてから出す（mc.js が .on を付ける）。 */
@media(max-width:960px){
  .tabs{display:flex;position:fixed;left:0;right:0;bottom:0;top:auto;
    flex-direction:row;gap:0;transform:translateY(100%);
    transition:transform .34s cubic-bezier(.4,.4,0,1);box-shadow:0 -6px 22px rgba(0,0,0,.16)}
  .tabs.on{transform:translateY(0)}
  /* 下の帯も同じ考え方。色は上辺の線1本だけにして、面はすりガラスの黒。
     ここを水色とピンクのべた塗りにすると、画面の一番下で2色がチカチカする。 */
  .tabs a{writing-mode:horizontal-tb;flex:1 1 0;min-width:0;text-align:center;
    padding:16px 8px;font-size:12.5px;letter-spacing:.02em;line-height:1.4;
    border-left:0;border-top:3px solid transparent}
  .tabs a.a{border-top-color:#5ad3e8}
  .tabs a.p{border-top-color:#ff8fbb}
  /* 帯がフッターの最終行に被らないよう、下に逃がす */
  .ft{padding-bottom:84px}
}

/* ---------- フッターの看板は中央寄せ ---------- */
.ft-brand{text-align:center}
.ft-brand ul{margin-top:14px}
@media(max-width:960px){ .ft-brand{padding-bottom:6px} }

/* ---------- 押した感じを返す（PC・スマホ共通） ----------
   2026-08-12 まで、mc.css には :hover が92個あるのに **:active が1つも無かった**。
   マウスでも指でも「押せたのかどうか分からない」と言われたのはこれが原因。 */
a,button,summary,.btn,.card,.note,.vc,.mnav-list a{-webkit-tap-highlight-color:rgba(20,190,220,.18)}
.btn:active,.hd-cta:active,.mnav-cta .btn:active,.mnav-srch button:active{transform:translateY(1px);filter:brightness(.94)}
.nav a:active,.mnav-list a:active,.ft a:active,.hd-top .ut:active{opacity:.55}
.card:active,.note:active,.vc:active{transform:translateY(-2px) scale(.995)}
.burger:active span{opacity:.55}

/* ---------- タッチ端末では hover を出さない ----------
   指で1回目に触れた時点で :hover が当たり、遷移するのに2回タップが要る
   （2026-08-12 菅さん「一度タップしても遷移しない？2回タップで画面遷移？」）。
   マウスのある端末（hover:hover）にだけ hover を出すよう、
   このファイルの :hover ルールは自動で @media(hover:hover) に囲ってある。
   **新しく :hover を書くときも必ず同じ扱いにすること。** */

/* ---------- スマホのフッターは1列 ----------
   375px で2列にすると1列あたり139pxしかなく、リンク名がほぼ全部2行に折り返していた
   （2026-08-12 菅さん指摘）。 */
@media(max-width:700px){
  .ft-g{grid-template-columns:1fr;gap:34px}
  .ft li{font-size:14px;line-height:2.1}
  .ft h4{margin-bottom:10px}
}

/* ---------- 流れる帯（顔写真・書籍） ----------
   width:max-content と translateX(-50%) の組み合わせは端末差が出やすい。
   mc.js が1セット分の実寸を測って --mcw に入れ、px で動かす。
   高さも aspect-ratio 任せにせず、はっきり指定する（書籍がスマホで出ないため）。 */
.strip .row,.books .row{width:auto}
.strip .row{animation:mcslide var(--mcdur,64s) linear infinite}
.books .row{animation:mcslide var(--mcdur,56s) linear infinite}
.strip .row.rev{animation-direction:reverse}
@keyframes mcslide{from{transform:translate3d(0,0,0)}to{transform:translate3d(calc(var(--mcw,50%) * -1),0,0)}}
@media(max-width:960px){
  /* 2段とも必ず見えるように、行の高さと隙間をはっきり決める */
  .strip{margin-top:40px}
  .strip .cell{flex-basis:112px;height:112px}
  .strip .row.rev{margin-top:10px}
  .books{margin-top:36px}
  .books img{flex-basis:96px;width:96px;height:128px;aspect-ratio:auto}
}


/* =========================================================
   :hover はここに集約してある（2026-08-12 自動移動・92本）。
   マウスのある端末だけに当てる。指で触った1回目が hover 扱いになり
   2回タップしないと遷移しない事故を防ぐため。
   ★ 新しく :hover を書くときも必ずこの中に入れること。
   ========================================================= */

@media (hover:hover){
.tabs a:hover{padding-right:20px}
.tabs a.a:hover{background:var(--aq-d);border-left-color:var(--aq-d)}
.tabs a.p:hover{background:var(--pk-t);border-left-color:var(--pk-t)}
.fx:hover .glow{opacity:1}
.hd-top .ut:hover{color:var(--aq)}
.hd-top .ut:hover svg{opacity:1}
.hd-top .sns a:hover{opacity:1;color:#fff;background:var(--aq);border-color:var(--aq);transform:translateY(-2px)}
.hd.solid .hd-top .sns a:hover{color:#fff}
.nav a:hover{border-color:var(--aq)}
.srch:hover{border-color:var(--aq)}
.btn:hover{background:var(--aq-d);transform:translateY(-3px);box-shadow:0 14px 32px rgba(20,190,220,.34)}
/* ピンクは締めのCTAだけ */
.btn.pink:hover{background:var(--pk-t);box-shadow:0 14px 32px rgba(255,61,139,.32)}
.btn.glass:hover{background:rgba(255,255,255,.2)}
.btn.ghost:hover{background:var(--aq);color:#fff}
.voices4 .v4:hover::after{transform:scaleX(1)}
.voices4 .v4:hover{padding-left:10px}
.voices4 .v4:hover .qm4{color:var(--pk)}
.pil:hover{transform:translateY(-7px);box-shadow:0 22px 48px rgba(14,151,176,.14)}
.pil:hover figure img{transform:scale(1.06)}
.six .card:hover{transform:translateY(-7px);box-shadow:0 22px 48px rgba(14,151,176,.14)}
.six .card:hover figure img{transform:scale(1.06)}
.vc:hover{transform:translateY(-7px);box-shadow:0 20px 46px rgba(14,151,176,.15)}
.vc:hover figure img{transform:scale(1.06)}
.strip .cell:hover img{transform:scale(1.08);filter:saturate(1.16)}
.note:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(14,151,176,.14);border-color:var(--aq)}
.note:hover figure img{transform:scale(1.07)}
.books img:hover{transform:translateY(-8px) rotate(-1.5deg);box-shadow:0 18px 34px rgba(14,151,176,.24)}
.form input[type=submit].btn:hover{background:var(--aq-d);transform:translateY(-3px);
  box-shadow:0 14px 32px rgba(20,190,220,.34)}
.ft a:hover{color:#7fe4f5}
.val:hover{transform:translateY(-7px);box-shadow:0 22px 48px rgba(14,151,176,.14);border-color:var(--aq)}
.duo figure:hover img{transform:scale(1.05)}
.nx:hover{transform:translateY(-7px);box-shadow:0 22px 48px rgba(14,151,176,.14);border-color:var(--aq)}
.nx:hover .go{color:var(--pk-t)}
.mc-body a:hover{color:var(--pk-t)}
.mc-body .blocks-gallery-item:hover img{transform:scale(1.05)}
.mc-body .contents-outline__item a:hover{color:var(--pk-t);transform:translateX(7px)}
.mc-body .contents-outline__item a:hover::before{color:var(--pk)}
.mc-vid__plate:hover .mc-vid__thumb{transform:scale(1.05);filter:saturate(1.06)}
.mc-vid__plate:hover .mc-vid__play{background:var(--pk);transform:scale(1.09)}
.hv-jump a:hover{color:var(--pk-t)}
.hv-jump a:hover::after{transform:scaleX(1)}
.hv-li:hover::after{transform:scaleX(1)}
.hv-li:hover{padding-left:8px}
.hv-li:hover .hv-m::before{border-color:var(--aq)}
.sp-k button:hover{color:var(--pk-t)}
.sp-r:hover::after{transform:scaleX(1)}
.sp-r:hover{padding-left:9px}
.sp-r:hover .sp-n{color:var(--aq)}
.sp-r:hover .sp-l{color:var(--pk-t)}
.sp-t:hover{transform:translateY(-4px);border-bottom-color:var(--pk)}
.sp-t:hover em{color:var(--pk)}
.fw-row:hover .fw-f{margin-left:-6px;transform:translateY(-6px)}
.fw-row:hover .fw-f:first-child{margin-left:0}
.afoot .back:hover{color:var(--aq-t)}
.gnav a:hover{color:var(--aq-t)}
.gnav:hover a .nm{max-width:14rem;opacity:1}
.toc12 a:hover{background:var(--bg2);color:var(--aq-t)}
.toc12 a:hover b{color:var(--pk)}
.qa details:hover::after{transform:scaleX(1)}
.qa details:hover .qn{color:#cfe6ee}
.qa details:hover .pm7{border-color:var(--aq)}
.exp .v:hover{transform:translateY(-5px);box-shadow:0 24px 54px rgba(14,151,176,.14);border-color:var(--aq)}
.exp .v:hover .ph img{transform:scale(1.04)}
.exp .v:hover .pts li::before{width:18px;background:var(--pk)}
.exp .v:hover .go2{color:var(--aq-t);border-color:var(--pk);gap:15px}
.myasp input[type=submit]:hover{background:var(--pk-t);transform:translateY(-3px);
  box-shadow:0 14px 32px rgba(255,61,139,.3)}
.gal figure:hover img{transform:scale(1.07)}
.t12 .c:hover{transform:translateY(-8px);box-shadow:0 26px 54px rgba(14,151,176,.3)}
.t12 .c:hover .mct-bg img{transform:scale(1.06)}
.t12 .c:hover .no5{color:var(--aq)}
.t12 .c:hover .go5::after{width:46px;background:var(--pk)}
.t12 .c:hover .swipe{transform:scaleX(1)}
.full12 details:hover{border-color:var(--aq);box-shadow:0 14px 34px rgba(14,151,176,.12)}
.bkfan a:hover{transform:translateY(-18px) rotate(0) scale(1.07);z-index:6}
.bkfan a:hover img{box-shadow:0 22px 38px rgba(14,90,110,.3)}
.bkfan a:hover::after{opacity:1}
.bk-i:hover::after{transform:scaleX(1)}
.bk-i:hover .bk-c img{transform:translateY(-5px);box-shadow:0 16px 28px rgba(14,90,110,.24)}
.bk-f a:hover{border-bottom-color:var(--aq)}
.bk-t a:hover{color:var(--aq-t)}
.gf-f input[type=submit]:hover{background:var(--aq-d);transform:translateY(-2px)}
.upn .cav a:hover{color:var(--pk-t);border-color:var(--pk)}
.cyc-i:hover::after{transform:scaleX(1)}
.cyc-note a:hover{color:var(--pk-t);border-color:var(--pk)}
.brmap a:hover .dot{fill:var(--pk);stroke:var(--pk)}
.brmap a:hover .halo{fill:var(--pk);opacity:.13}
.brmap a:hover .nm{fill:var(--pk-t)}
.br-play:hover{background:var(--aq);color:#fff}
.br-play:hover .ico{background:#fff}
.br-play:hover .ico svg{fill:var(--aq)}
.br-go:hover{color:var(--pk-t);border-color:var(--pk)}
.brlist a:hover{background:var(--aq);color:#fff}
.brlist a:hover i{color:#fff}
#mc-video-modal .mc-video-close:hover{background:var(--pk);box-shadow:0 6px 18px rgba(255,61,139,.4)}
}

/* =========================================================
   スマホの文字の大きさ（2026-08-12 菅さん指摘
   「文字が大きかったり小さかったり」「スマホの改行に注意」）
   -----------------------------------------------------------
   直す前の375pxは 10.5 / 12.5 / 13.5 / 14.5 / 16.5 / 18 / 26 / 39 / 52px の
   9段階がばらばらに混ざっていて、しかも見出しが途中で折り返していた。
   （例：「挑戦を、もっ／と面白く。」「実践者の声で／見る挑戦の軌跡。」）

   ★ 数字は勘で決めていない。375pxでの文字が置ける幅は **315px**（＝84vw）。
     そこに何文字入るかをブラウザで実測して上限を出し、その少し下に置いた：

     挑戦を、もっと面白く。            11字 → 33.5px まで1行  → 8.5vw(375で31.9px)
     実践者の声で見る挑戦の軌跡。      14字 → 23.5px まで1行  ┐
     ここにはあなたが主役の舞台がある  16字 → 20.4px まで1行  ┘→ 5.3vw(375で19.9px)
     学んで終わらせず、〜前に進める。  21字 → 16.5px まで1行  → 4.3vw(375で16.1px)
     自分のための挑戦が、〜希望になる。22字 → 15.7px まで1行  → 4.1vw(375で15.4px)

   vw で書いてあるので、360pxでも430pxでも同じ字数が1行に収まる。
   上限（min の2つ目）はタブレットで大きくなりすぎないための蓋。
   **見出しの文言を長くするときは、上の表を測り直すこと。**

   段階は 11 / 12 / 15 / 15.5 / 16 / 20 / 32 / 40px の8つに整理した。
   ========================================================= */
@media(max-width:700px){
  /* ★ 左右の余白を30px→20pxに。375pxで文字が置ける幅が 315px → 335px になる。
     日本語は1行の字数が少ないほど改行が不自然になる。ここを広げるのがいちばん効く。 */
  .wrap{padding:0 20px}
  .lab{font-size:11px}
  /* ★ 5.3vw では2pxだけ足りなかった。見出しの中の `.nb`（white-space:nowrap）が
     塊のまま折り返すので、**文字数ではなく「塊の幅」で決まる**。
     「ここには」(76px)＋「あなたが主役の舞台がある」(241px)＝317px > 置ける幅315px。
     5.1vw なら 305px で10px余る（360pxでも430pxでも余る）。
     見出しに `.nb` を足したら、その塊の実測幅で確かめ直すこと。 */
  .h2,.sec h2{font-size:min(5.5vw,26px);line-height:1.52}
  .lead{font-size:min(4.3vw,18px);line-height:1.95}
  .hero h1{font-size:min(8.5vw,52px)}
  .hero .sub{font-size:min(4.1vw,15.5px);line-height:1.95}
  .card h3{font-size:16px;line-height:1.6}
  .card p,.note p,.vc p{font-size:15px;line-height:1.9}
  .vc .nm{font-size:15px}
  /* 2026-08-12 菅さん「文字も数字もめちゃくちゃ小さい」。40px→52pxに戻し、
     ラベルも12→13.5pxへ。1列に縦積みなので、この節だけは大きい方が締まる。 */
  .fig b{font-size:52px}
  .fig .lb{font-size:13.5px;letter-spacing:.04em}
  .six .n,.pil .no{font-size:24px}
  /* 節の見出しは .h2 と同じ大きさに揃える（20pxと21pxが混在すると
     「大きかったり小さかったり」に見えるため） */
  .rep h2,.cons h2,.gift h2,.credo h2{font-size:min(5.5vw,26px);line-height:1.52}
  .rep p,.cons p{font-size:15px;line-height:1.95}
  .credo p{font-size:min(4.3vw,18px);line-height:2.05;margin-top:24px}
}

/* 文の切れ目で折り返させるための印。
   `<br>` と違い、**入りきるときは1行のまま**なので PC の見た目を変えずに
   スマホの改行位置だけを整えられる。日本語はどの文字でも改行できてしまうので、
   「気づけば誰かの／希望になる。」のような切れ方を防ぐにはこれを使う。 */
.nw{display:inline-block}

/* ---------- スマホの読み物パネルの余白 ----------
   .creed / .road は 34px 24px の余白のせいで、1行の幅が 267px しか無かった。
   1行の字数が少ないほど改行が不自然になるので、スマホでは詰める（→ 299px）。 */
@media(max-width:960px){
  .creed .panel,.road .panel{padding:30px 18px}
}

/* ---------- THE GIFT の登録ボタン ----------
   .row2 は flex-wrap なので、スマホでは入力欄が全幅→ボタンが次の行の**左端**に
   ぽつんと残っていた（2026-08-12 菅さん指摘）。折り返したら全幅にする。 */
@media(max-width:700px){
  .form .row2{gap:12px}
  .form input[type=submit].btn{flex:1 1 100%;width:100%;padding:17px 20px;font-size:15px}
}

/* ---------- スマホの横スクロールするグローバルメニュー ----------
   ハンバーガーを開かなくても行き先が見えるように、ヘッダーの下に
   6項目を横一列で置く（指で横に流せる）。菅さん指定の「スライドできる形」。
   PC（1181px以上）では出さない＝いつもの .nav がある。 */
/* 色はメディアクエリの外に置く。中だけに書くと、1181px以上のとき
   親テーマの a{color:#004e8e} が当たってしまう（display:none なので今は見えないが、
   将来この帯をPCでも出したときに青くなる）。 */
.gnavs{display:none}
.gnavs a{color:rgba(255,255,255,.94)}
@media(max-width:1180px){
  .gnavs{display:block;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;border-top:1px solid rgba(255,255,255,.18)}
  .gnavs::-webkit-scrollbar{display:none}
  .hd.solid .gnavs,.hd.mnav-lift .gnavs{border-top-color:var(--line)}
  .gnavs ul{display:flex;gap:0;list-style:none;margin:0;padding:0 14px;width:max-content}
  .gnavs a{display:block;padding:9px 13px;font-size:13px;font-weight:600;white-space:nowrap;
    text-shadow:0 1px 2px rgba(0,0,0,.6);border-bottom:2px solid transparent}
  .hd.solid .gnavs a,.hd.mnav-lift .gnavs a{color:var(--ink-2);text-shadow:none}
  .gnavs a.on{border-bottom-color:var(--aq)}
  .hd.solid .gnavs a.on{color:var(--aq-t)}
  /* 端が切れていることを伝える薄いぼかし */
  .gnavs{-webkit-mask-image:linear-gradient(to right,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%);
          mask-image:linear-gradient(to right,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%)}
}

/* ---------- 文節で折り返す（.nw を JS が付ける） ----------
   `word-break:auto-phrase` は Chrome だけで、**iPhone の Safari は未対応**。
   そのため iPhone では「未来は変え／られる。」のように語の途中で切れていた
   （2026-08-12 菅さん指摘「改行が意味不明すぎる」）。
   mc.js が句読点で文を区切って .nw（inline-block）で包むので、
   どのブラウザでも同じ位置で折り返す。入りきるときは1行のままなのでPCは変わらない。 */
/* .nw は「ここでは切らない」ための専用クラス。選択子を並べると書き忘れるので、
   どこに置いても効くようにしておく（他の用途では使わない）。
   ★ `body span.nw` まで書く理由：.who span{display:block} のような
   「入れ物の中の span を縦に並べる」書き方に負けて、名前が
   「菅／智晃」と2行に割れていた（/merchantclub/ で実測）。
   .nw だけだと (0,1,0) で、ああいう (0,1,1) の書き方に必ず負ける。
   `.talk .who span` のような (0,2,1) まであるので、選択子を足す競争はやめて
   !important で止める。**この1行が効かないと名前や語が縦に割れる**。
   ★ 見た目も全部打ち消す理由：ページ側に `.qgrp span{font-size:11.5px}` のような
   「中の span をまとめて飾る」書き方があり、mc.js が入れた包みまで拾って
   /answers/ の見出しが「入会を」だけ小さくなっていた（実測）。
   包みは**改行を止めるためだけの物**なので、見た目は必ず親と同じにする。 */
.nw{display:inline-block!important;font:inherit!important;letter-spacing:inherit!important;
  color:inherit!important;background:none!important;border:0!important;
  margin:0!important;padding:0!important;vertical-align:baseline!important;
  position:static!important;width:auto!important;min-width:0!important;max-width:none!important;
  height:auto!important;grid-column:auto!important;grid-row:auto!important;gap:0!important;
  text-transform:none!important;text-decoration:inherit!important;flex:none!important}

/* ★★★ 強調の em の中では、包みを inline に戻す（2026-08-14・菅さんの実機報告で発覚）
   `em.g` は **background-clip:text ＋ color:transparent** でグラデ文字を描いている。
   そこへ mc.js が `.nw`（inline-block）を差し込むと、包みだけが独立した箱になり、
   親のグラデが**その箱の上には乗らない**。文字の色は transparent のままなので、
   結果として**その語だけ丸ごと消える**。
   iPhone で実測（2026-08-14 菅さん）：
     トップ「仲間と<挑戦を>進めていく。」→ 挑戦を が出ない
     トップ「あなたがクラブで手にする<未来>」→ 未来 が出ない
     トップ「会員の挑戦は、外の<世界>にも広がっています」→ 世界 が出ない
     ほかに /merchantclub/ 4件・/guidance/ /sugatomoaki-profile/ /consultation/ /answers/ 各1件
   **Chrome では描けてしまうので、PCの見本では絶対に気づけない。**
   inline に戻せばグラデが乗る。改行を止める役目は white-space:nowrap が引き継ぐ
   （inline-block の「塊だから切れない」を、そのまま nowrap で置き換える）。
   em.a / em.p も下線を background で描いているので、同じ扱いにそろえる。 */
em.g .nw, em.a .nw, em.p .nw{display:inline!important;white-space:nowrap!important}

/* 格子・横並びの箱の中の地の文を、mc.js が**1つだけ**束ねる包み（2026-08-14）。
   「名前の無い1マス」の代わりに置くものなので、1マスぶんの block でなければならない。
   見た目を打ち消す理由は .nw と同じ（ページ側の `li span{…}` のような書き方に拾われる）。 */
.nwcell{display:block!important;font:inherit!important;letter-spacing:inherit!important;
  color:inherit!important;background:none!important;border:0!important;
  margin:0!important;padding:0!important;text-align:inherit!important;
  text-transform:none!important;text-decoration:inherit!important}

/* ---------- フッターに移したSNSとアクセス ----------
   ヘッダー右上の細い行を外したぶん、ここが唯一の入口になる（2026-08-12）。 */
.ft-sns{display:flex;justify-content:center;gap:10px;margin-top:20px}
.ft-sns a{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  color:#c9ccd0;border:1px solid #3a3f45;transition:all .3s}
.ft-sns a svg{width:14px;height:14px;fill:currentColor}
.ft-ut{margin-top:16px}
.ft-ut li{font-size:13px}

/* ---------- スマホの THE GIFT フォーム ---------- */
@media(max-width:700px){
  .form{padding:34px 20px 30px;margin-top:34px}
  .form h3{font-size:22px}
  .form h3 .sub2{font-size:13px}
  .form .note2{font-size:12.5px;line-height:2.2}
}
/* ホバーはここに集約（先頭の約束どおり） */
@media (hover:hover){
  .ft-sns a:hover{color:#fff;background:var(--aq);border-color:var(--aq);transform:translateY(-2px)}
}

/* ---------- 見出しの副題 ----------
   「環境と風土／定例会後の夜の出来事」の2行目は**副題**であって、見出し本体と
   同じ大きさで並べるものではない（2026-08-12 菅さん指摘）。
   `.nb` は「見出しの中の強調」に使う別物なので、副題には必ずこの `.h2sub` を使う。
   display:block なので `<br>` は書かない（書くと二重に改行される）。 */
.h2sub{display:block;margin-top:15px;font-size:.44em;font-weight:500;
  letter-spacing:.08em;line-height:1.65;color:var(--ink-2)}
/* 副題の中の効かせたい語。本体（52px）の3通りの飾りをそのまま持ってくると
   23pxの薄い字では強すぎるので、**水色の字だけ**にする。 */
.h2sub em{font-style:normal;font-weight:600;color:var(--aq-t)}
@media(max-width:700px){ .h2sub{margin-top:10px;font-size:.62em;letter-spacing:.04em} }

/* ---------- 語り出しの節（写真を外した形） ----------
   `.talk` は「写真＋名前｜本文」の2列。写真を外すと左列が名前だけになって間延びするので、
   写真が無いときは1列にして、名前を本文の頭に小さく置く。
   `:not(:has(figure))` が使えない環境のために、`.talk.noface` を明示的に付ける形にする。 */
/* ★ 柱の幅は下に続く .read（--mw）と必ずそろえること。
   写真を外したとき .talk .read{max-width:none} が効いたままだと、
   ここだけ全幅1160px・下は646pxになって「幅が違う」と見える（2026-08-12 菅さん指摘）。 */
.talk.noface{grid-template-columns:1fr;gap:20px;margin:36px auto 0;max-width:var(--mw)}
.talk.noface .read{max-width:none;margin:0}
.talk.noface .who{margin-top:0;padding-left:16px;border-left:3px solid var(--aq)}
.talk.noface .who span{margin-top:4px}

/* ---------- スローガンの前振り ----------
   前振り無しで大きな一言が出てくると唐突（2026-08-12 菅さん指摘）。
   何の言葉なのかを、一段小さい文字で先に置く。 */
/* ★ 2026-08-12 にこの受け皿だけ作って、**本文を入れていなかった**。
   2026-08-13 菅さん「突然入ると浮くので背景となる言葉が必要という話を以前しました」。
   前振りも下の説明も、柱を決めて中央に置く（字は中央でよい。1〜3行なので行末が荒れない）。 */
/* ★★ 大きさを一段ずつ上げた（2026-08-13 菅さん「前後は文字を小さくしたのは意図的ですか？」）。
   46pxの一言と競わせない意図で小さくしたが、下げすぎて**注釈に見えていた**。
   前振り14.5→16px（本文18pxのすぐ下）、説明13.5→14.5px。
   46 > 16 > 14.5 で順番は保つ。 */
.qbig .qlead{max-width:36rem;margin:0 auto 20px;font-size:16px;color:var(--ink-2);
  letter-spacing:.04em;line-height:1.95}
.qbig .cap{max-width:40rem;margin:26px auto 0;font-size:14.5px;color:var(--ink-2);line-height:1.95}
/* ★ `.qbig p{font-size:clamp(22px,4vw,46px);font-weight:700}` は
   説明の中の <p> にも当たる（実測46px・太字になっていた）。打ち消す。 */
.qbig .cap p{margin:0;font-size:inherit;font-weight:500;line-height:inherit;letter-spacing:inherit}
.qbig .cap p + p{margin-top:13px}
@media(max-width:700px){
  .qbig .qlead{font-size:13.5px;margin-bottom:16px}
  .qbig .cap{font-size:13px;line-height:2}
  .qbig .cap p + p{margin-top:11px}
}

/* ヒーローの中の顔写真の帯は、最初の1画面に**2列とも**入るのが正
   （2026-08-12 菅さん）。1440×800 で実測して、帯の下端が画面内に収まる値にしてある。
   上の見出し・引用・リードのどれかを増やしたら、ここを測り直すこと。 */
.phero .strip{margin-top:24px}

/* =========================================================
   ★★ 親テーマ Emanon の a:hover を打ち消す（2026-08-12）
   -----------------------------------------------------------
   Emanon はインラインCSSで
     a:hover, a:active, .c-link:hover, … { color:#828990 }（灰色）
   を出しており、しかもそれは **mc.css より後ろ**に読まれる
   （実測：mc.css が20番目、Emanon のインラインが30番目）。
   詳細度も (0,1,1) で `.btn{color:#fff}` の (0,1,0) より高い。
   そのため**色を書いていないリンクも、白文字のボタンも、カーソルを乗せた瞬間に灰色**になっていた。
   菅さん「カーソルを当てた時の色味が気持ち悪い」の正体がこれ（実測 rgb(130,137,144)）。

   同じ詳細度では順番で負けるので、`body` を1つ足して (0,1,2) にして勝つ。
   mc.css の a の既定は `color:inherit` なので、素のリンクは inherit のままで正しい。
   **自分で色を持っているリンクは、ホバーでも同じ色を保つよう1つずつ書く。**
   → 新しく色つきのリンクを作ったら、必ずここに1行足すこと。
   （フッター #004e8e／ヘッダー右上の青／これで3度目の同じ事故） */
body a:hover,body a:active,body a:focus-visible{color:inherit}
body .btn:hover,body .btn:active,body .btn:focus-visible{color:#fff}
body .hd-cta:hover,body .hd-cta:active{color:#fff}
body .tabs a:hover,body .tabs a:active{color:#fff}
body .logo:hover{color:#fff}
body .hd.solid .logo:hover,body .hd.mnav-lift .logo:hover{color:var(--ink)}
body .nav a:hover{color:#fff}
body .hd.solid .nav a:hover{color:var(--ink-2)}
body .hd.solid .nav a.on:hover{color:var(--aq-t)}
body .gnavs a:hover{color:rgba(255,255,255,.94)}
body .hd.solid .gnavs a:hover,body .hd.mnav-lift .gnavs a:hover{color:var(--ink-2)}
body .mnav-list a:hover{color:var(--ink)}
body .mnav-ut a:hover{color:var(--ink-2)}
body .ft a:hover,body .ft a:focus-visible{color:#7fe4f5}

/* ---------- 語り出し：顔を丸く小さく（2026-08-12 菅さん）----------
   同じ写真が他ページでも出るので、大きな単独写真はやめて名前の左に丸く添える。
   `.talk.noface`（写真なし）と並ぶ、`.talk` の3つ目の形。 */
.talk.face-s{grid-template-columns:1fr;gap:20px;margin:36px auto 0;max-width:var(--mw)}
.talk.face-s .read{max-width:none;margin:0}
.talk.face-s .who{display:flex;align-items:center;gap:16px;margin:0;
  padding-left:16px;border-left:3px solid var(--aq)}
.talk.face-s .who img{width:56px;height:56px;border-radius:50%;object-fit:cover;flex:none;
  background:var(--bg2)}
.talk.face-s .who b{font-size:14.5px;font-weight:700}
.talk.face-s .who span{display:block;margin-top:4px;font-size:11.5px;font-weight:500;
  color:var(--ink-3);letter-spacing:.06em}

/* ---------- 語り出し：顔を丸抜きで中央に（2026-08-13 菅さん）----------
   `.talk` の4つ目の形。写真＋名前を柱の**中央**に置き、その下に本文を流す。
   ・写真は正方形（668×668）を丸で抜く。object-fit は 1:1 なので切れない。
   ・名前と肩書きは**字ごと中央**（1〜2行なので行末がギザギザにならない）。
     本文は柱を中央にそろえるだけで **字は左のまま**（中央寄せにはしない）。
   ・`.talk.noface` の左の水色の縦線は、中央置きだと軸がぶつかるので出さない。 */
.talk.face-c{grid-template-columns:1fr;gap:0;margin:40px auto 0;max-width:var(--mw)}
.talk.face-c .who{display:block;margin:0;padding:0;border:0;text-align:center}
.talk.face-c .who img{display:block;width:132px;height:132px;margin:0 auto 22px;
  border-radius:50%;object-fit:cover;background:var(--bg2);
  box-shadow:0 0 0 1px rgba(20,190,220,.32),0 24px 46px -24px rgba(8,84,104,.55)}
.talk.face-c .who b{display:block;font-size:16px;font-weight:600;letter-spacing:.1em}
.talk.face-c .who span{display:block;margin-top:8px;font-size:11.5px;font-weight:500;
  color:var(--ink-3);letter-spacing:.16em}
.talk.face-c .read{max-width:none;margin:36px 0 0}
/* 「なぜか。」の1行。前の段落の問いを受ける**間**なので、
   上をふつうの段落より詰めて、下を空ける。 */
.talk.face-c .read p.beat{margin-top:calc(var(--gap-p) * -.35)}
@media(max-width:700px){
  .talk.face-c{margin-top:30px}
  .talk.face-c .who img{width:104px;height:104px;margin-bottom:18px}
  .talk.face-c .who b{font-size:15px}
  .talk.face-c .read{margin-top:28px}
}

/* 費用のカード。金額の行は「数字＋単位」だけにして、右端をそろえる。
   ここに2つ目の金額を入れると行が折れて右がガタガタになる（2026-08-12 菅さん指摘）。
   2つ目の金額は下の説明文に書くこと。 */
/* ★★ 2026-08-13：2年目の金額が**箱からはみ出して切れていた**（本番1440pxで実測。
   「年額 55,000 円 または 月額 5」で右が途切れる）。原因が2つ重なっていた：
   ① 別デザイン用に後から書いた `.fee .v{display:flex}`（下の方にある）が当たり、
      **文章の箱に flex が効いて `<br>` が無視され**、2つの金額が横1列に並んだ
      → [[no-flex-on-sentences]]
   ② その上に `white-space:nowrap` が乗っていて、折り返しも封じていた
   原文（DB）は「年額55,000円 または 月額5,500円(税込)」で**2つで1組**なので、
   文を削るのではなく**2行で組める形**に戻す。 */
.fee .c .v{display:block;white-space:normal;line-height:1.28}
.fee .c.next .v{font-size:clamp(24px,2.9vw,36px)}