/*
 * SC-JAPAN 会員ページ（WizCube）— 見た目の刷新モック 共通スタイル
 *
 * Bootstrap 5.3.3 の上に重ねる。読み込み順: bootstrap.min.css → Google Fonts → member.css → pages-<グループ>.css
 * デザインは新規会員登録フォームのモック（20260925-SCJフォーム刷新/mock/assets/form.css）に揃える。
 *
 * 高齢の会員が使う前提（下げない）:
 *   文字サイズは 2 段階の切替（「文字サイズ 中／大」。layout.js。PC はヘッダー、スマホはメニューの中）。中（既定）は本文 13.6px、大は本文 20px。これより小さくしない /
 *   入力欄・ボタン・押せる行は、どちらの文字サイズでも高さ 56px 以上（高さは px の変数 --tap などで書き、rem にしない）/
 *   文字と地のコントラスト 4.5:1 以上 / 太いフォーカス表示（黒 4px ＋ 黄 8px）/ 色だけに頼らない（線・記号・太さも併用）/
 *   なめらかスクロールは使わない
 *
 * 文字サイズの仕組み: html の font-size（1rem）を 中 13.6px ／ 大 20px で切り替える。文字サイズ・余白は rem で書くので一緒に 68% になる（中は 2026-09-27 に 16px → 13.6px）。
 *   押せる部品の高さ（--tap など）・本文の最大幅・枠線は px で書き、文字サイズを変えても変わらないようにする。
 *   「大」は html に data-font-size="large" が付いたとき。付いていなければ「中」（localStorage が使えないときも「中」）。
 *
 * 🔴 このファイルは画面担当が編集しない。画面固有のスタイルは assets/pages-<グループ名>.css に書く。
 *    色・余白・文字サイズは下の CSS 変数（トークン）を使い、色の値を直書きしない。
 */

/* =========================================================
   0. デザイントークン
   ========================================================= */
:root {
  color-scheme: light;

  /* --- 色（コントラストは白地に対する比） --- */
  --ink: #1a1a1a;            /* 本文。白地 17.4:1 */
  --ink-2: #333;             /* 補足文。白地 12.6:1 */
  --line: #5c5c5c;           /* 入力欄・押せる部品の枠。白地 6.7:1 */
  --line-soft: #c9ced6;      /* 区切り線・カードの枠（飾り。文字には使わない） */
  --paper: #fff;             /* カード・入力欄の地 */
  --soft: #f3f5f8;           /* ページの地・薄い箱の地 */
  --primary: #006e7d;        /* 主色（濃いティール）。白地 5.95:1 */
  --primary-hover: #005f69;  /* 白地 7.39:1 */
  --primary-active: #004e57; /* 白地 9.4:1 */
  --primary-bg: #e6f9fa;     /* 選択中・見出しセルの薄い地。--ink 16:1 / --primary 5.47:1 */
  --accent: #00c7cd;         /* 公式サイトの主色。白地 2.09:1 のため線・帯の飾りだけ（文字・ボタン地・文字の載る地に使わない） */
  --danger: #a8001a;         /* エラー。白地 7.84:1 */
  --danger-bg: #fff3f4;
  --ok: #0b5d1e;             /* 済み・完了。白地 8.08:1 */
  --ok-bg: #edf7ef;
  --warn-ink: #3d2c00;       /* 注意の文字 */
  --warn-line: #7a5a00;      /* 注意の枠 */
  --warn-bg: #fff8e1;
  --focus: #ffcc00;          /* フォーカスの外側の黄 */
  --toast-bg: #1a1a1a;

  /* --- 文字サイズ（1rem = 中 13.6px ／ 大 20px。値は「中 / 大」） --- */
  --fs-body: 1rem;       /* 13.6 / 20px 本文・補足文・表（これより小さくしない） */
  --fs-lg: 1.1rem;       /* 15 / 22px 項目名・ボタン・入力欄 */
  --fs-h3: 1.3rem;       /* 17.7 / 26px 小見出し */
  --fs-h2: 1.5rem;       /* 20.4 / 30px セクション見出し */
  --fs-h1: 1.9rem;       /* 25.8 / 38px ページ見出し（スマホ 21.1 / 31px） */

  /* --- 余白（文字サイズと一緒に 68% になる。値は「中 / 大」） --- */
  --sp-1: .25rem;  /* 3.4 / 5px */
  --sp-2: .5rem;   /* 6.8 / 10px */
  --sp-3: .75rem;  /* 10.2 / 15px */
  --sp-4: 1rem;    /* 13.6 / 20px */
  --sp-5: 1.5rem;  /* 20.4 / 30px */
  --sp-6: 2.5rem;  /* 34 / 50px */

  /* --- 形 --- */
  --tap: 56px;           /* 押せる部品の最小の高さ（px で固定。文字サイズを変えても変わらない） */
  --r-btn: 10px;         /* ボタン */
  --r-field: 8px;        /* 入力欄・小さな箱 */
  --r-card: 14px;        /* カード（12〜16px の中間） */
  --content-max: 1200px; /* 本文の最大幅（px で固定。文字サイズを変えても変わらない） */
  --gutter: 16px;        /* 画面の左右の余白 */

  /* --- Bootstrap の変数を上書き --- */
  --bs-body-font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic Medium", "Yu Gothic", YuGothic, Meiryo, sans-serif;
  --bs-body-color: var(--ink);
  --bs-body-bg: var(--soft);
  --bs-body-line-height: 1.8;
  --bs-link-color: var(--primary);
  --bs-link-color-rgb: 0, 110, 125;
  --bs-link-hover-color: var(--primary-hover);
  --bs-link-hover-color-rgb: 0, 95, 105;
  --bs-border-color: var(--line-soft);
}

/* 文字サイズ: 中（既定）は 1rem = 13.6px（2026-09-27 に 16px の 85% へ）、大は 1rem = 20px。Bootstrap の文字・余白もこれに比例する。
   各画面の head の 1 行（data-font-size-init）と layout.js が、保存した「大」を html に付ける */
html { font-size: 13.6px; }
html[data-font-size="large"] { font-size: 20px; }
/* Bootstrap のなめらかスクロールを止める（長い距離を流れて位置が分からなくなるため）。
   Bootstrap は @media (prefers-reduced-motion: no-preference) { :root { scroll-behavior: smooth } } を持つので詳細度を上げて上書き */
html:root { scroll-behavior: auto !important; }
@media (prefers-reduced-motion: no-preference) { html:root { scroll-behavior: auto !important; } }

body {
  font-family: var(--bs-body-font-family);
  font-size: var(--fs-body);
  color: var(--ink);
  background: var(--soft);
  line-height: 1.8;
  -webkit-text-size-adjust: 100%;
  overflow-wrap: anywhere;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.m-main { flex: 1 0 auto; }
/* body は縦並びの flex。直下の .m-container（モックの帯・パンくず）は margin: 0 auto のままだと中身の幅に縮んで中央に寄るので、
   幅いっぱいにしてから max-width で中央に置く（パンくずが本文の左端とそろう） */
body > .m-container { width: 100%; }

/* Bootstrap の小さい文字（.875em / .75em）を本文（中 13.6px / 大 20px）より小さくしない */
small, .small, .form-text, .badge, .btn-sm, .dropdown-menu, .breadcrumb, .table, .tooltip, .popover { font-size: var(--fs-body); }

a { text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 3px; }

[hidden] { display: none !important; }

/* =========================================================
   1. フォーカス（どの部品でも太くはっきり）
   ========================================================= */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 4px solid #111 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 8px var(--focus) !important;
}
.form-control:focus, .form-select:focus {
  border-color: #111;
  outline: 4px solid #111;
  outline-offset: 2px;
  box-shadow: 0 0 0 8px var(--focus);
}
.form-check-input:focus { box-shadow: 0 0 0 8px var(--focus); outline: 4px solid #111; outline-offset: 2px; border-color: #111; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 2000;
  display: inline-flex; align-items: center; min-height: var(--tap);   /* Tab で出たときも押せる高さ 56px */
  background: #111; color: #fff; padding: .5rem 1rem; font-weight: 700;
}
.skip-link:focus { left: .5rem; top: .5rem; color: #fff; background: #111; }

/* =========================================================
   2. 共通レイアウト（layout.js が差し込む）
   ========================================================= */
.m-container { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--gutter); }
.m-container.is-narrow { max-width: 800px; }   /* ログインなど 1 列の短いフォーム（px で固定） */

/* --- ヘッダー（白地にロゴ。公式サイトと同じ） --- */
.m-header { background: var(--paper); border-bottom: 1px solid var(--line-soft); }
.m-header-inner {
  max-width: var(--content-max); margin: 0 auto; padding: .5rem var(--gutter);
  min-height: 64px; display: flex; align-items: center; gap: 1rem;
}
.m-brand { display: flex; align-items: center; flex-wrap: wrap; gap: .25rem .75rem; margin-right: auto; min-width: 0; color: var(--ink); text-decoration: none; }
.m-logo { display: block; width: 160px; height: auto; aspect-ratio: 16 / 3; max-width: 100%; }
.m-brand-sub { font-size: var(--fs-body); font-weight: 700; color: var(--ink-2); line-height: 1.3; letter-spacing: .02em; }
.m-header-actions { display: flex; align-items: center; gap: .75rem; }

/* --- 文字サイズの切替（「文字サイズ 中 大」。layout.js が出す。全画面・ログイン前も） ---
   どちらの文字サイズでも同じ大きさ（px 固定）で、「大」のときの文字の大きさで見せる（小さい文字のままでも見つけられるように）。
   選択中は、濃いティールの地＋白文字に加えて「✓」の印と太い枠（色だけに頼らない）。読み上げは aria-pressed で伝える。
   置き場所（2026-09-27 から）:
     ログイン後の画面 … PC（768px 以上）はヘッダーのロゴの右（ログアウトの左）。767px 以下はヘッダーに出さず（d-none d-md-flex）、
                        スマホのメニュー（offcanvas）のいちばん上に「文字サイズ」の見出し付きで置く（.m-oc-fs。768〜991px は両方にある）
     ログイン前の 4 画面 … メニューが無いので、どの幅でもヘッダーのロゴと同じ行の右。480px 以下は見出しを 2 行（「文字／サイズ」）にして 1 行に収める
   ヘッダーと offcanvas の 2 か所にあっても、layout.js が全部の [data-font-size-set] の aria-pressed をそろえる */
.m-fs { display: flex; align-items: center; gap: 6px; flex: none; }
.m-fs-label { margin-right: 4px; font-size: 20px; font-weight: 700; line-height: 1.3; color: var(--ink-2); white-space: nowrap; }
.m-fs-label > span { display: inline; }   /* 「文字」「サイズ」。幅の狭いログイン前の画面だけ 2 行にする */
.m-fs-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 2px;
  min-width: 72px; min-height: var(--tap); padding: 0 10px; margin: 0;
  font-family: inherit; font-size: 22px; font-weight: 800; line-height: 1;
  color: var(--ink); background: var(--paper); border: 2px solid var(--line); border-radius: var(--r-btn); cursor: pointer;
}
.m-fs-btn:hover { background: var(--primary-bg); color: var(--ink); border-color: var(--primary); text-decoration: underline; }
.m-fs-btn[aria-pressed="true"] { background: var(--primary); color: #fff; border: 3px solid var(--primary-active); }
.m-fs-btn[aria-pressed="true"]::before { content: "✓"; content: "✓" / ""; font-size: 20px; }
.m-fs-btn[aria-pressed="true"]:hover { background: var(--primary-hover); color: #fff; text-decoration: none; }
@media (max-width: 767.98px) {
  .m-header-inner { column-gap: 12px; }   /* ロゴと右の部品の間（px で固定。「大」でも広げない） */
}
/* ログイン前の画面（header.m-header.is-guest。layout.js が付ける）・幅 480px 以下: 切替をロゴと同じ行の右に収める（2 行にしない）。
   見出し「文字サイズ」を「文字／サイズ」の 2 行に（文字は 20px のまま）、ボタンを 56px 角に（高さ 56px・文字 22px は変えない）。
   切替の幅は約 180px。幅 375px では残りの約 150px にロゴが入る（ロゴは .m-brand の幅に合わせて縮む。元の 160px より大きくしない） */
@media (max-width: 480px) {
  .m-header.is-guest .m-fs { gap: 4px; }
  .m-header.is-guest .m-fs-label { line-height: 1.15; margin-right: 2px; text-align: right; }
  .m-header.is-guest .m-fs-label > span { display: block; }
  .m-header.is-guest .m-fs-btn { min-width: var(--tap); padding: 0 4px; }
}

/* スマホのメニューの中の切替（offcanvas のいちばん上）。見出しはヘッダーの「文字サイズ」と同じ 20px（px 固定）、ボタンは幅を分け合う */
.m-oc-fs { margin: 0 0 1rem; padding: .6rem .75rem .75rem; border: 2px solid var(--line-soft); border-radius: var(--r-card); background: var(--soft); }
.m-oc-fs-title { margin: 0 0 .6rem; padding: 0 0 .25rem .25rem; font-size: 20px; font-weight: 800; line-height: 1.3; color: var(--ink-2); border-bottom: 3px solid var(--accent); }
.m-oc-fs .m-fs { gap: 8px; }
.m-oc-fs .m-fs-btn { flex: 1 1 0; }

/* スマホの「メニュー」ボタン（991px 以下。三本線のアイコンだけの 56px 角。読み上げ名は aria-label="メニュー"） */
.m-menu-btn { flex: none; width: var(--tap); height: var(--tap); min-width: var(--tap); min-height: var(--tap); padding: 0; }
.m-menu-icon { display: block; width: 26px; height: 20px; position: relative; flex: none;
  border-top: 3px solid currentColor; border-bottom: 3px solid currentColor; }
.m-menu-icon::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; margin-top: -1.5px; border-top: 3px solid currentColor; }

/* --- 水彩の帯（文字は載せない）。ログイン前は 72px、ログイン後は細く 16px（本文を押し下げないため） --- */
.brand-band {
  height: 72px; border-bottom: 6px solid var(--accent);
  background: #cfeff1 url("img/scj_band_watercolor.jpg") center / cover no-repeat;
}
.brand-band.is-thin { height: 16px; border-bottom: 0; }   /* ログイン後は下にメニューの帯（下線つき）が続く */
@media (max-width: 480px) { .brand-band { height: 40px; } .brand-band.is-thin { height: 12px; } }
@media (max-width: 991.98px) { .brand-band.is-thin { border-bottom: 4px solid var(--accent); } }  /* スマホはメニューの帯が無い */

/* --- グローバルメニュー（PC: 992px 以上。濃いティールの帯に白文字・下に #00C7CD の線） ---
   11 項目は「大」の 20px の文字で約 1,450px ある。どちらの文字サイズでも、1600px 未満では 6 列 × 2 段の升目に均等に並べる（切らない・1 項目だけ 2 段目に落ちない）。
   1600px 以上は 1 行に並べる */
.m-gnav { background: var(--primary); border-bottom: 4px solid var(--accent); }
.m-gnav-list {
  list-style: none; margin: 0 auto; padding: 0 var(--gutter);
  max-width: 1600px;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
}
.m-gnav-list > li { position: relative; display: flex; }
@media (min-width: 1600px) {
  .m-gnav-list { display: flex; justify-content: center; max-width: none; }
  .m-gnav-list > li { display: block; }
}
.m-gnav-link {
  display: inline-flex; align-items: center; justify-content: center; gap: .25rem; width: 100%;
  min-height: var(--tap); padding: .25rem .5rem;
  background: var(--primary); color: #fff; border: 0; border-radius: 0;
  font-size: var(--fs-body); font-weight: 700; line-height: 1.3; text-align: center; text-decoration: none;  /* 992〜1100px の狭い升目では 2 行に折り返してよい（はみ出さない） */
}
.m-gnav-link:hover, .m-gnav-link[aria-expanded="true"] { background: var(--primary-hover); color: #fff; text-decoration: underline; text-decoration-thickness: 2px; }
.m-gnav-link:active { background: var(--primary-active); color: #fff; }
/* 表示中の画面（またはその親）: 地を濃くし、下に白い太線（色だけに頼らない印） */
.m-gnav-link.is-current { background: var(--primary-active); color: #fff; box-shadow: inset 0 -6px 0 #fff; }
.m-gnav-link.dropdown-toggle::after { margin-left: .4em; border-top-width: .4em; border-right-width: .35em; border-left-width: .35em; vertical-align: .15em; }

.m-gnav .dropdown-menu {
  --bs-dropdown-min-width: 14rem;
  --bs-dropdown-padding-y: .25rem;
  --bs-dropdown-border-color: var(--line);
  --bs-dropdown-border-width: 2px;
  --bs-dropdown-border-radius: var(--r-field);
  --bs-dropdown-link-color: var(--ink);
  --bs-dropdown-link-hover-color: var(--ink);
  --bs-dropdown-link-hover-bg: var(--primary-bg);
  --bs-dropdown-link-active-color: var(--ink);
  --bs-dropdown-link-active-bg: var(--primary-bg);
  margin-top: 0 !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}
.m-gnav .dropdown-item {
  display: flex; align-items: center; min-height: var(--tap); padding: .25rem 1rem .25rem 1.1rem;
  font-size: var(--fs-body); font-weight: 700; color: var(--ink); background: var(--paper);
  border-left: 6px solid transparent;
}
.m-gnav .dropdown-item:hover, .m-gnav .dropdown-item:focus { background: var(--primary-bg); color: var(--ink); text-decoration: underline; }
.m-gnav .dropdown-item.is-current { border-left-color: var(--primary); background: var(--primary-bg); color: var(--ink); }

/* 表示中の印（▶）。読み上げは aria-current に任せるので記号は隠す */
.m-cur-mark { display: none; margin-right: .4rem; color: var(--primary); font-size: var(--fs-body); }
.is-current > .m-cur-mark, .is-current .m-cur-mark { display: inline; }
.m-gnav-link .m-cur-mark { display: none !important; }  /* 横並びのメニューでは白い太線を印にする */

/* --- スマホのメニュー（offcanvas）: 高さ 56px 以上の大きなボタンを縦に並べる --- */
.m-offcanvas { --bs-offcanvas-width: min(100vw, 28rem); --bs-offcanvas-bg: var(--paper); --bs-offcanvas-color: var(--ink); }
.m-offcanvas .offcanvas-header { justify-content: space-between; gap: 1rem; border-bottom: 4px solid var(--accent); padding: .75rem var(--gutter); }  /* 「閉じる」は右端（見出しとくっつけない） */
.m-offcanvas .offcanvas-title { font-size: var(--fs-h3); font-weight: 800; margin: 0; }
.m-offcanvas .offcanvas-body { padding: 1rem var(--gutter) 2rem; }
.m-oc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.m-oc-link {
  display: flex; align-items: center; min-height: 60px; padding: .4rem 1rem;
  background: var(--paper); color: var(--ink); border: 2px solid var(--line); border-radius: var(--r-btn);
  font-size: var(--fs-lg); font-weight: 700; line-height: 1.4; text-decoration: none;
}
.m-oc-link::after { content: "›"; margin-left: auto; padding-left: .75rem; font-size: 1.4rem; line-height: 1; color: var(--primary); }
.m-oc-link:hover { border-color: var(--primary); background: var(--primary-bg); color: var(--ink); }
.m-oc-link.is-current { border: 4px solid var(--primary); background: var(--primary-bg); padding: calc(.4rem - 2px) calc(1rem - 2px); }
.m-oc-group { margin: .4rem 0 0; padding: .6rem .75rem .75rem; border: 2px solid var(--line-soft); border-radius: var(--r-card); background: var(--soft); }
.m-oc-group-title { margin: 0 0 .5rem; padding: 0 0 .25rem .25rem; font-size: var(--fs-body); font-weight: 800; color: var(--ink-2); border-bottom: 3px solid var(--accent); }
.m-oc-group .m-oc-list { gap: .5rem; }
.m-oc-logout { margin-top: 1.5rem; }

/* --- モックの表示（どの画面にも出す） --- */
.mock-banner {
  margin: 1rem 0 0; padding: .5rem 1rem;
  border: 3px dashed var(--warn-line); background: var(--warn-bg); color: var(--warn-ink);
  font-weight: 700; border-radius: var(--r-field);
}

/* --- パンくず（任意。body に data-breadcrumb があるときだけ layout.js が出す） --- */
.m-breadcrumb { margin: 1rem 0 0; }
.m-breadcrumb .breadcrumb { margin: 0; --bs-breadcrumb-divider-color: var(--ink-2); --bs-breadcrumb-item-active-color: var(--ink-2); }
.m-breadcrumb .breadcrumb-item { display: inline-flex; align-items: center; }
.m-breadcrumb .breadcrumb-item a { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: 700; }
/* 最後の項目（この画面）は押さない文字。動画名のように長いと折り返すので、flex にせず普通の段落として流す
   （区切りの「/」が 1 行目の頭にそろう）。1 行のときの高さはリンクの行と同じ 56px */
.m-breadcrumb .breadcrumb-item.active { display: block; line-height: 1.8; padding-top: calc((var(--tap) - 1.8em) / 2); padding-bottom: calc((var(--tap) - 1.8em) / 2); }

/* --- フッター --- */
.m-footer { margin-top: 3rem; background: var(--paper); border-top: 6px solid var(--accent); }
.m-footer-links { list-style: none; margin: 0 auto; padding: .75rem var(--gutter); max-width: var(--content-max); display: flex; flex-wrap: wrap; justify-content: center; gap: 0 .5rem; }
.m-footer-links a { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 .75rem; font-weight: 700; }
.m-footer-copy { margin: 0; padding: .9rem var(--gutter); background: var(--primary); color: #fff; text-align: center; font-size: var(--fs-body); line-height: 1.5; }

/* =========================================================
   3. ページ見出し・セクション見出し
   ========================================================= */
.page-head { padding: 1.5rem 0 .75rem; border-bottom: 4px solid var(--accent); margin-bottom: 1.5rem; }
.page-title { font-size: var(--fs-h1); font-weight: 700; line-height: 1.4; margin: 0; }
.page-lead { margin: .75rem 0 0; }

/* セクション見出し: 濃いティール帯＋白文字＋#00C7CD の下線（新規登録フォームと同じ） */
.sec { margin: 0 0 var(--sp-6); }
.sec-title {
  display: flex; align-items: center; gap: .75rem;
  font-size: var(--fs-h2); font-weight: 800; line-height: 1.35;
  margin: 0 0 1rem; padding: .6rem .9rem;
  background: var(--primary); color: #fff; border-radius: var(--r-btn);
  border-bottom: 4px solid var(--accent);
  scroll-margin-top: 1rem;
}
.sec-title a { color: #fff; background-color: var(--primary); }  /* 見出し帯（--primary）の上のリンク */
.sub-title { font-size: var(--fs-h3); font-weight: 800; line-height: 1.4; margin: 1.5rem 0 .75rem; padding-bottom: .25rem; border-bottom: 3px solid var(--accent); }

/* =========================================================
   4. カード（白い箱）
   ========================================================= */
.m-card { background: var(--paper); border: 2px solid var(--line-soft); border-radius: var(--r-card); padding: 1.25rem; margin: 0 0 1.5rem; }
.m-card > :last-child { margin-bottom: 0; }
.m-card.is-emph { border: 3px solid var(--primary); }
.m-card-title { font-size: var(--fs-h3); font-weight: 800; margin: 0 0 .75rem; }
@media (max-width: 575.98px) { .m-card { padding: 1rem .9rem; } }

/* =========================================================
   5. フォーム
   ========================================================= */
.fld { margin: 0 0 1.75rem; padding: 0; border: 0; min-width: 0; }
.fld-label, .fld > legend {
  display: block; float: none; width: auto;
  font-size: var(--fs-lg); font-weight: 800; line-height: 1.5;
  margin: 0 0 .5rem; padding: 0;
}
.badge-req, .badge-opt {
  display: inline-block; vertical-align: .15em; margin-left: .5rem;
  font-size: var(--fs-body); font-weight: 700; line-height: 1.4; padding: .05rem .5rem; border-radius: 6px;
}
.badge-req { background: var(--danger); color: #fff; }
.badge-opt { background: var(--paper); color: var(--ink-2); border: 2px solid var(--line); }

/* 入力欄の文字は 16px を下回らせない（中の --fs-lg は 15px。iPhone の Safari は 16px 未満の入力欄に触れると画面を拡大するため）。大は 22px */
.form-control, .form-select {
  min-height: var(--tap);
  font-size: max(16px, var(--fs-lg));
  color: var(--ink);
  background-color: var(--paper);
  border: 2px solid var(--line);
  border-radius: var(--r-field);
  padding: .5rem .8rem;
}
.form-select { padding-right: 2.5rem; background-size: 20px 16px; }
textarea.form-control { min-height: 8rem; }
.form-check { display: flex; align-items: center; gap: .6rem; min-height: var(--tap); padding-left: 0; margin: 0; }
.form-check-input { float: none; flex: none; width: 1.6rem; height: 1.6rem; margin: 0 !important; border: 2px solid var(--line); cursor: pointer; }
.form-check-input:checked { background-color: var(--primary); border-color: var(--primary); }
.form-check-label { font-size: var(--fs-lg); font-weight: 700; cursor: pointer; }
.w-zip { max-width: 11rem; }
.w-short { max-width: 14rem; }
.w-mid { max-width: 26rem; }

.fld-hint { margin: .4rem 0 0; font-size: var(--fs-body); color: var(--ink-2); line-height: 1.6; }
.fld-error {
  margin: .5rem 0 0; padding: .5rem .75rem;
  color: var(--danger); background: var(--danger-bg);
  border-left: 6px solid var(--danger); font-weight: 700; line-height: 1.6;
}
.fld-error::before {  /* 色だけに頼らない印 */
  content: "!"; display: inline-flex; align-items: center; justify-content: center;
  width: 1.4rem; height: 1.4rem; margin-right: .4rem; border-radius: 50%;
  background: var(--danger); color: #fff; font-size: var(--fs-body); vertical-align: .05em;
}
.fld-error:empty { display: none; }
.has-error > legend, .has-error > .fld-label { color: var(--danger); }
.form-control[aria-invalid="true"], .form-select[aria-invalid="true"] { border: 3px solid var(--danger); background-color: var(--danger-bg); }

/* 横に並べる入力（ポジション選択＋表示ボタンなど） */
.inline-row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.inline-row .form-select, .inline-row .form-control { width: auto; min-width: 8rem; }
.filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; padding: 1rem 1.25rem; margin: 0 0 1.5rem; background: var(--paper); border: 2px solid var(--line-soft); border-radius: var(--r-card); }
.filter-bar label { margin: 0; font-size: var(--fs-lg); font-weight: 800; }
.filter-bar .form-select { width: auto; min-width: 8rem; }

/* 表示だけの値（入力できない現在値） */
.readonly-box { padding: .6rem .9rem; border: 2px dashed var(--line); border-radius: var(--r-field); background: var(--soft); font-weight: 700; }

/* =========================================================
   6. ボタン
   ========================================================= */
.btn { min-height: var(--tap); font-size: var(--fs-lg); font-weight: 800; border-radius: var(--r-btn); padding: .5rem 1.25rem; border-width: 3px; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; }
.btn-lg-x { min-height: 72px; font-size: var(--fs-h3); padding: .75rem 1.5rem; }
.btn-wide { width: 100%; max-width: 24rem; }
/* 主ボタン（送信・次へ・ログインなど画面で一番の操作） */
.btn-primary {
  --bs-btn-bg: var(--primary); --bs-btn-border-color: var(--primary); --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--primary-hover); --bs-btn-hover-border-color: var(--primary-hover); --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--primary-active); --bs-btn-active-border-color: var(--primary-active); --bs-btn-active-color: #fff;
  --bs-btn-disabled-bg: var(--paper); --bs-btn-disabled-border-color: var(--line); --bs-btn-disabled-color: var(--ink-2); --bs-btn-disabled-opacity: 1;
}
/* 押せない主ボタン（同意前・数量 0 のときなど）: 塗りをやめて点線の枠にする。
   濃いグレーの塗りだと押せるボタンに見えるため、色だけでなく形でも押せないと分かるようにする（全画面で同じ見た目） */
.btn-primary:disabled, .btn-primary.disabled { border-style: dashed; cursor: not-allowed; }
/* 副ボタン（戻る・表示・検索など） */
.btn-secondary-m { background: var(--paper); color: var(--primary); border: 3px solid var(--primary); }
.btn-secondary-m:hover { background: var(--primary-bg); color: var(--primary-hover); border-color: var(--primary-hover); }
.btn-secondary-m:active { background: var(--primary-bg); color: var(--primary-active); border-color: var(--primary-active); }
/* 目立たせない操作（ログアウトなど） */
.btn-outline-dark { --bs-btn-color: var(--ink); --bs-btn-border-color: var(--ink); --bs-btn-bg: var(--paper); --bs-btn-hover-bg: var(--ink); --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: var(--ink); --bs-btn-active-bg: #000; --bs-btn-active-color: #fff; }
/* リンクの見た目のボタン（文字だけ。押せる高さは 56px を確保） */
.btn-linkish { min-height: var(--tap); padding: .25rem .5rem; background: none; border: 0; color: var(--primary); text-decoration: underline; font-weight: 700; font-size: var(--fs-body); }
.btn-linkish:hover { color: var(--primary-hover); text-decoration-thickness: 3px; }
/* 危ない操作（中止・削除）。赤枠＋文字（塗りつぶしにしない） */
.btn-danger-m { background: var(--paper); color: var(--danger); border: 3px solid var(--danger); }
.btn-danger-m:hover { background: var(--danger-bg); color: var(--danger); }
/* 電話をかけるボタン */
.tel-btn { white-space: nowrap; }

/* ボタンの並び（スマホは縦・幅いっぱい、PC は横） */
.btn-row { display: flex; flex-direction: column; gap: 1rem; margin: 2rem 0 0; }
.btn-row > .btn { width: 100%; }
@media (min-width: 576px) {
  .btn-row { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .btn-row > .btn { width: auto; min-width: 14rem; }
}
.btn-row.is-start { justify-content: flex-start; }

/* 「〜はこちら」の行: 文全体を 1 つの大きなリンクにする（文言はそのまま） */
.link-list { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: .6rem; }
/* a を flex にすると「〜は」と「こちら」が別々の箱になり、スマホで「こち／ら」と割れるので、
   a は普通の段落のように流し込み、右の「›」だけを絶対配置にする。
   上下の余白は「(60px − 枠 4px − 1 行の高さ 1.5em) ÷ 2」: 1 行なら高さ 60px で文字が上下の真ん中（中・大どちらでも） */
.link-list a {
  display: block; position: relative;
  min-height: 60px; padding: calc((60px - 4px - 1.5em) / 2) 2.75rem calc((60px - 4px - 1.5em) / 2) 1rem;
  background: var(--paper); color: var(--ink); border: 2px solid var(--line); border-radius: var(--r-btn);
  font-weight: 700; line-height: 1.5; text-decoration: none;
}
.link-list a .link-here { margin-left: .5rem; color: var(--primary); text-decoration: underline; white-space: nowrap; }
.link-list a::after { content: "›"; position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); font-size: 1.5rem; line-height: 1; color: var(--primary); }
.link-list a:hover { border-color: var(--primary); background: var(--primary-bg); color: var(--ink); }
.link-list a:hover .link-here { text-decoration-thickness: 3px; }

/* =========================================================
   7. 定義リスト型の表（項目名：値。PC は 2 列、スマホは縦積み）
   <dl class="dl-table"><div class="dl-row"><dt>項目名</dt><dd>値</dd></div>…</dl>
   ========================================================= */
.dl-table { margin: 0 0 1.5rem; background: var(--paper); border: 2px solid var(--line-soft); border-radius: var(--r-card); overflow: hidden; }
.dl-row { display: grid; grid-template-columns: 1fr; border-top: 2px solid var(--line-soft); }
.dl-row:first-child { border-top: 0; }
.dl-table dt { margin: 0; padding: .6rem 1rem .1rem; font-weight: 800; color: var(--ink-2); line-height: 1.5; }
.dl-table dd { margin: 0; padding: .1rem 1rem .7rem; font-size: var(--fs-lg); font-weight: 700; color: var(--ink); line-height: 1.6; min-height: 2.2rem; }
.dl-table dt > div { display: inline; }   /* 現行の「<div>適格請求書発行</div><div>事業者登録番号</div>」をスマホで 1 行に */
@media (min-width: 768px) {
  .dl-row { grid-template-columns: minmax(12rem, 18rem) 1fr; }
  .dl-table dt { padding: .75rem 1rem; background: var(--primary-bg); color: var(--ink); border-right: 2px solid var(--line-soft); display: flex; flex-direction: column; justify-content: center; }
  .dl-table dt > div { display: block; }
  .dl-table dd { padding: .75rem 1rem; display: flex; align-items: center; flex-wrap: wrap; }
}

/* =========================================================
   8. 一覧表（PC は表、スマホはカード型に変形。各セルの data-label を見出しとして出す）
   <div class="table-wrap" role="region" aria-labelledby="…" tabindex="0">
     <table class="list-table"> <thead>…</thead>
       <tbody><tr><th scope="row" data-label="…">…</th><td data-label="…">…</td></tr></tbody>
   ========================================================= */
.table-wrap { margin: 0 0 1.5rem; overflow-x: auto; background: var(--paper); border: 2px solid var(--line-soft); border-radius: var(--r-card); }
.list-table { width: 100%; margin: 0; border-collapse: collapse; font-size: var(--fs-body); background: var(--paper); }
.list-table caption { caption-side: top; padding: .75rem 1rem; color: var(--ink); font-weight: 800; }
.list-table thead th {
  padding: .6rem .6rem; background: var(--primary); color: #fff;
  font-weight: 700; line-height: 1.4; text-align: center; vertical-align: middle;
  border-right: 1px solid var(--primary-hover); border-bottom: 4px solid var(--accent);
  /* 列見出しを語の途中で割らない（「2026／年／07月」「スポンサー氏／名」のように割れて列ごとに段数がばらつくのを防ぐ）。
     改行は現行の <br> の位置だけ。収まらない表は .table-wrap の中で横スクロールする */
  word-break: keep-all; overflow-wrap: normal;
}
.list-table thead th:last-child { border-right: 0; }
.list-table tbody th, .list-table tbody td { padding: .6rem .6rem; border-top: 2px solid var(--line-soft); border-right: 1px solid var(--line-soft); vertical-align: middle; line-height: 1.5; color: var(--ink); }
.list-table tbody th:last-child, .list-table tbody td:last-child { border-right: 0; }
.list-table tbody th { background: var(--primary-bg); font-weight: 800; text-align: left; white-space: nowrap; }
.list-table tbody tr:nth-child(even) td { background: #f8f9fa; }
.list-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.list-table .nowrap { white-space: nowrap; }
.list-table .cell-actions { text-align: center; white-space: nowrap; }

/* スマホ（767px 以下）: 1 行を 1 枚のカードにする */
@media (max-width: 767.98px) {
  .table-wrap.is-stack { overflow: visible; background: none; border: 0; border-radius: 0; }
  .is-stack .list-table, .is-stack .list-table tbody, .is-stack .list-table tr, .is-stack .list-table th, .is-stack .list-table td { display: block; width: 100%; }
  .is-stack .list-table { background: none; }
  .is-stack .list-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .is-stack .list-table tbody tr { margin: 0 0 1rem; background: var(--paper); border: 2px solid var(--line-soft); border-radius: var(--r-card); overflow: hidden; }
  .is-stack .list-table tbody th, .is-stack .list-table tbody td {
    display: grid; grid-template-columns: minmax(6.5rem, 40%) 1fr; gap: .75rem; align-items: baseline;
    padding: .55rem 1rem; border: 0; border-top: 1px solid var(--line-soft); text-align: left; white-space: normal;
  }
  .is-stack .list-table tbody tr:nth-child(even) td { background: var(--paper); }
  .is-stack .list-table tbody th { display: block; border-top: 0; background: var(--primary-bg); border-bottom: 3px solid var(--accent); font-size: var(--fs-lg); }
  .is-stack .list-table tbody td::before { content: attr(data-label); font-weight: 700; color: var(--ink-2); }
  .is-stack .list-table tbody th::before { content: none; }
  .is-stack .list-table .num { text-align: left; }
  .is-stack .list-table td.cell-actions { display: block; text-align: left; }
  .is-stack .list-table td.cell-actions::before { display: none; }
  .is-stack .list-table td.cell-actions .btn { width: 100%; }
}
/* PC でも列が多くて 1200px 未満では入らない表は .is-stack-lg を足す（1199px 以下でカード型）。
   列見出しを語の途中で割らないようにしたので、10 列の表（登録情報のフロントAS）は 1200px 未満では表の中の横スクロールになるため */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .table-wrap.is-stack-lg { overflow: visible; background: none; border: 0; border-radius: 0; }
  .is-stack-lg .list-table, .is-stack-lg .list-table tbody, .is-stack-lg .list-table tr, .is-stack-lg .list-table th, .is-stack-lg .list-table td { display: block; width: 100%; }
  .is-stack-lg .list-table { background: none; }
  .is-stack-lg .list-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .is-stack-lg .list-table tbody tr { margin: 0 0 1rem; background: var(--paper); border: 2px solid var(--line-soft); border-radius: var(--r-card); overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; }
  .is-stack-lg .list-table tbody th { grid-column: 1 / -1; border-top: 0; border-bottom: 3px solid var(--accent); font-size: var(--fs-lg); }
  .is-stack-lg .list-table tbody td { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; padding: .55rem 1rem; border-right: 0; text-align: left; }
  .is-stack-lg .list-table tbody tr:nth-child(even) td { background: var(--paper); }
  .is-stack-lg .list-table tbody td::before { content: attr(data-label); font-weight: 700; color: var(--ink-2); }
}

/* =========================================================
   9. お知らせ等の一覧（日付＋題名。行全体が押せる）
   <ul class="news-list"><li><a href="…"><span class="news-date">2026.09.01</span><span class="news-title">…</span></a></li></ul>
   ========================================================= */
.news-list { list-style: none; margin: 0 0 1.5rem; padding: 0; background: var(--paper); border: 2px solid var(--line-soft); border-radius: var(--r-card); overflow: hidden; }
.news-list li + li { border-top: 2px solid var(--line-soft); }
.news-list a, .news-list .news-item {
  display: grid; grid-template-columns: 1fr; gap: .1rem 1.25rem; align-items: baseline; align-content: center;   /* 1 行でも 64px の中で上下の真ん中に */
  min-height: 64px; padding: .7rem 1rem; color: var(--ink); text-decoration: none;
}
.news-list a:hover { background: var(--primary-bg); color: var(--ink); }
.news-list a:hover .news-title { text-decoration-thickness: 3px; }
.news-date { font-weight: 700; color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.news-title { font-size: var(--fs-lg); font-weight: 700; line-height: 1.5; }
.news-list a .news-title { color: var(--primary); text-decoration: underline; text-underline-offset: .2em; }
@media (min-width: 768px) { .news-list a, .news-list .news-item { grid-template-columns: 9rem 1fr; } }

/* =========================================================
   10. 空状態（「◯◯はありません」）
   ========================================================= */
.empty-state {
  display: flex; align-items: center; gap: .9rem;
  margin: 0 0 1.5rem; padding: 1.25rem 1.25rem;
  background: var(--paper); border: 2px dashed var(--line); border-radius: var(--r-card);
  color: var(--ink-2); font-weight: 700;
}
.empty-state::before {  /* 飾りの丸（中身は空の箱の印）。読み上げない */
  content: ""; flex: none; width: 2.2rem; height: 2.2rem; border-radius: 50%;
  border: 3px solid var(--line); background:
    linear-gradient(var(--line), var(--line)) center / 1rem 3px no-repeat;
}
.empty-state p { margin: 0; }

/* =========================================================
   11. ページ内目次（登録情報・セミナー動画・コミッションのようにページ内リンクがある画面）
   <nav class="page-toc" aria-label="…"><ul><li><a href="#…">…</a></li></ul></nav>
   ========================================================= */
.page-toc { margin: 0 0 2rem; }
.page-toc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .page-toc ul { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); } }
.page-toc a {
  display: flex; align-items: center; gap: .6rem;
  min-height: 60px; padding: .4rem 1rem;
  background: var(--paper); border: 2px solid var(--line); border-radius: var(--r-btn);
  color: var(--ink); font-weight: 700; text-decoration: none;
}
.page-toc a::before {  /* 下向きの矢印（このページの下へ移動する印） */
  content: "↓"; flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border-radius: 50%; background: var(--primary); color: #fff; font-weight: 800;
}
.page-toc a:hover { border-color: var(--primary); background: var(--primary-bg); color: var(--ink); text-decoration: underline; }

/* =========================================================
   12. 注意書き（alert）: 左の太線＋記号で種類を示す（色だけに頼らない）
   <div class="m-alert is-info"><p>…</p></div>  種類: is-info / is-warn / is-danger / is-ok
   ========================================================= */
.m-alert { position: relative; margin: 0 0 1.5rem; padding: .9rem 1rem .9rem 3.4rem; border: 2px solid var(--line); border-left-width: 8px; border-radius: var(--r-field); background: var(--paper); color: var(--ink); font-weight: 500; }
.m-alert > :last-child { margin-bottom: 0; }
.m-alert::before {
  position: absolute; left: .8rem; top: .95rem;
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.7rem; height: 1.7rem; border-radius: 50%; color: #fff; font-weight: 800; line-height: 1;
  content: "i"; background: var(--primary);
}
.m-alert.is-info { border-color: var(--primary); background: var(--primary-bg); }
.m-alert.is-warn { border-color: var(--warn-line); background: var(--warn-bg); color: var(--warn-ink); }
.m-alert.is-warn::before { content: "!"; background: var(--warn-line); }
.m-alert.is-danger { border-color: var(--danger); background: var(--danger-bg); color: var(--danger); font-weight: 700; }
.m-alert.is-danger::before { content: "!"; background: var(--danger); }
.m-alert.is-ok { border-color: var(--ok); background: var(--ok-bg); color: var(--ok); font-weight: 700; }
.m-alert.is-ok::before { content: "✓"; background: var(--ok); }
.m-alert-title { font-size: var(--fs-lg); font-weight: 800; margin: 0 0 .25rem; }

/* =========================================================
   13. ページ送り（Bootstrap の .pagination を大きくする）
   <nav aria-label="ページ送り"><ul class="pagination m-pagination">…</ul></nav>
   ========================================================= */
.m-pagination {
  --bs-pagination-font-size: var(--fs-body);
  --bs-pagination-color: var(--primary);
  --bs-pagination-bg: var(--paper);
  --bs-pagination-border-width: 2px;
  --bs-pagination-border-color: var(--line);
  --bs-pagination-hover-color: var(--primary-hover);
  --bs-pagination-hover-bg: var(--primary-bg);
  --bs-pagination-hover-border-color: var(--primary);
  --bs-pagination-active-color: #fff;
  --bs-pagination-active-bg: var(--primary);
  --bs-pagination-active-border-color: var(--primary);
  --bs-pagination-disabled-color: var(--ink-2);
  --bs-pagination-disabled-bg: var(--soft);
  --bs-pagination-border-radius: var(--r-btn);
  flex-wrap: wrap; justify-content: center; gap: .4rem; margin: 1.5rem 0;
}
.m-pagination .page-link { display: inline-flex; align-items: center; justify-content: center; min-width: var(--tap); min-height: var(--tap); padding: .25rem .8rem; font-weight: 700; border-radius: var(--r-btn) !important; margin: 0 !important; }
.m-pagination .page-item.active .page-link { text-decoration: underline; text-decoration-thickness: 3px; }  /* 色だけに頼らない */

/* =========================================================
   14. モック表示用のトースト（layout.js の MemberMock.toast()）
   ========================================================= */
.mock-toast-area { position: fixed; left: 0; right: 0; bottom: 1rem; z-index: 1090; display: flex; justify-content: center; padding: 0 var(--gutter); pointer-events: none; }
.mock-toast {
  pointer-events: auto;
  display: flex; align-items: center; gap: 1rem; max-width: 36rem; width: 100%;
  padding: .75rem .75rem .75rem 1.25rem;
  background: var(--toast-bg); color: #fff; border: 3px solid var(--focus); border-radius: var(--r-card);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .3); font-weight: 700;
}
.mock-toast p { margin: 0; flex: 1 1 auto; }
.mock-toast button { flex: none; min-height: var(--tap); padding: .25rem 1rem; background: #fff; color: var(--ink); border: 2px solid #fff; border-radius: var(--r-btn); font-size: var(--fs-body); font-weight: 800; }

/* =========================================================
   15. ログイン前の画面（Login / GetPassword / CoolingOff / DeleteAccount）
   ========================================================= */
.guest-card { background: var(--paper); border: 2px solid var(--line-soft); border-radius: 16px; padding: 1.75rem 1.5rem 2rem; margin: 1.5rem 0 0; box-shadow: 0 2px 10px rgba(0, 0, 0, .06); }
.guest-card .page-title { text-align: center; }
.guest-card .page-head { text-align: center; margin-bottom: 1.25rem; padding-top: 0; }
@media (max-width: 575.98px) { .guest-card { padding: 1.25rem 1rem 1.5rem; } }
.center-note { text-align: center; margin: 1rem 0 0; }

/* =========================================================
   16. スマホの調整
   ========================================================= */
@media (max-width: 480px) {
  .page-title { font-size: 1.55rem; }  /* 中 21.1px / 大 31px */
  .sec-title { font-size: 1.3rem; }    /* 中 17.7px / 大 26px */
  .m-brand-sub { display: none; }       /* 幅 390px ではロゴとメニューボタン（ログイン前は文字サイズの切替）を優先 */
}

/* =========================================================
   17. 管理画面で入力した本文の <br> の連続（お知らせ詳細など）
   <div data-tidy-breaks>…</div> を付けると、layout.js が画面上の表示を整える（DOM に手を加える。文字と <br> は消さない）:
   2 つ以上続く <br> に .br-extra を付けて隠し、小さな空き（span.br-gap）を 1 つ足す。段落の先頭・末尾の <br> も隠す。1 つだけの <br> はそのまま改行。
   本番は、サーバー側で出力するときに連続する改行を段落（<p>）に正規化する仕様を推奨（styleguide.html の 7）
   ========================================================= */
.br-extra { display: none; }
.br-gap { display: block; height: 1em; }   /* 段落の間の空き（文字 1 つ分。行間より少し広く、空行 1 つ〈1.9 行分〉より狭い） */