/*
 * SC-JAPAN 会員ページ（WizCube）— 見た目の刷新モック 画面別スタイル（その他・ヘルプ）
 *
 * 対象: 24 Download / 25 Schedule / 26 LimitedVideo / 27 LimitedVideoDetail / 28 LimitedVideoDetailLive /
 *       29 Commission / 30 FAQ / 31 Contact
 * 読み込み順: bootstrap.min.css → Google Fonts → member.css → このファイル
 * 色・余白・文字サイズは member.css のトークン（var(--…)）だけを使う。20px 未満の文字は作らない。
 */

/* =========================================================
   共通: 外部の埋め込み（Google カレンダー・Vimeo）の置き場
   モックでは読み込まない。現行の枠と同じ縦横比の箱に「ここに◯◯が表示されます」と書く
   ========================================================= */
.embed-ph {
  display: flex; align-items: center; justify-content: center;
  width: 100%; padding: 1rem;
  background: var(--soft); color: var(--ink-2);
  border: 3px dashed var(--line); border-radius: var(--r-card);
  font-weight: 700; line-height: 1.5; text-align: center;
}

/* =========================================================
   24 ビジネスツール（Download）/ 26 のライブ配信の表: No. ＋ タイトル（リンク）の 2 列
   2 列なのでスマホでもカードにせず表のまま（タイトルは折り返す）
   ========================================================= */
.doc-table thead th.doc-no-col { width: 5rem; }
.doc-table tbody th.doc-no { text-align: center; font-variant-numeric: tabular-nums; }
.doc-table tbody td.doc-cell { padding-top: 0; padding-bottom: 0; }
.doc-link {
  display: flex; align-items: center;
  min-height: var(--tap); padding: .4rem 0;
  font-size: var(--fs-lg); font-weight: 700; line-height: 1.5;
  color: var(--primary); text-decoration: underline;
}
.doc-link:hover { color: var(--primary-hover); }
@media (max-width: 575.98px) {
  .doc-table thead th.doc-no-col { width: 3.6rem; }
  .doc-table thead th, .doc-table tbody th, .doc-table tbody td { padding-left: .5rem; padding-right: .5rem; }
}

/* =========================================================
   25 スケジュール（Schedule）
   正方形に押し込むと月表示の予定名が1文字に潰れる。月表示は高さ優先、
   狭い幅は予定一覧（mode=AGENDA）を出す。
   ========================================================= */
body[data-page="Schedule"] .google-calendar1 { max-width: 52rem; margin: 0 auto; width: 100%; }
body[data-page="Schedule"] .google-calendar1 iframe {
  display: block; width: 100%; height: 720px;
  border: 1px solid var(--line); border-radius: var(--r-card);
}
body[data-page="Schedule"] .google-calendar1 iframe.cal-agenda { display: none; height: 640px; }
@media (max-width: 767.98px) {
  body[data-page="Schedule"] .google-calendar1 iframe.cal-month { display: none; }
  body[data-page="Schedule"] .google-calendar1 iframe.cal-agenda { display: block; }
}

/* =========================================================
   26 セミナー動画一覧（LimitedVideo）
   ========================================================= */
body[data-page="LimitedVideo"] #category { margin-bottom: 1rem; }
/* 動画の表: タイトル＋サムネイルを 1 つの大きなリンクにする */
body[data-page="LimitedVideo"] #videoTB thead th.doc-no-col { width: 5rem; }
body[data-page="LimitedVideo"] #videoTB thead th.vd-send-col { width: 7rem; }
body[data-page="LimitedVideo"] #videoTB tbody th { text-align: center; vertical-align: top; }
body[data-page="LimitedVideo"] #videoTB td.vd-title { vertical-align: top; }
.vd-link {
  display: block; padding: .25rem 0;
  font-size: var(--fs-lg); font-weight: 700; line-height: 1.5;
  color: var(--primary); text-decoration: underline;
}
.vd-link:hover { color: var(--primary-hover); }
.vd-thumb {
  width: 100%; max-width: 295px; aspect-ratio: 295 / 166; margin-top: .5rem;
  font-size: var(--fs-body); text-decoration: none;
}
/* 送信のチェックボックス: 箱ごと押せる（高さ 56px 以上） */
.vd-send {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--tap); min-height: var(--tap); margin: 0; cursor: pointer;
}
body[data-page="LimitedVideo"] #videoTB td.vd-send-cell { text-align: center; }
/* 送信先メールアドレス */
body[data-page="LimitedVideo"] #tblEmail .inline-row .form-control { flex: 1 1 16rem; max-width: 26rem; }
body[data-page="LimitedVideo"] #tblEmail .inline-row .btn { min-width: 8rem; }

@media (max-width: 767.98px) {
  /* カード型: 題の帯に「No. 1」と出す（列見出しの文字を data-label から） */
  body[data-page="LimitedVideo"] #videoTB.list-table tbody th::before { content: attr(data-label) " "; }
  body[data-page="LimitedVideo"] #videoTB.list-table tbody th { text-align: left; }
  /* タイトルの行は見出し（タイトル）を出さず、サムネイルを幅いっぱいに */
  body[data-page="LimitedVideo"] #videoTB.list-table tbody td.vd-title { display: block; }
  body[data-page="LimitedVideo"] #videoTB.list-table tbody td.vd-title::before { content: none; }
  body[data-page="LimitedVideo"] .vd-thumb { max-width: none; }
  /* 送信欄が空の行は、カードに空の行を出さない */
  body[data-page="LimitedVideo"] #videoTB.list-table tbody td.vd-send-cell:empty { display: none; }
  body[data-page="LimitedVideo"] #videoTB.list-table tbody td.vd-send-cell { align-items: center; text-align: left; }
  body[data-page="LimitedVideo"] #tblEmail .inline-row .btn { flex: 1 1 100%; }
}

/* =========================================================
   27 セミナー動画詳細 / 28 ライブ配信詳細
   現行の動画枠は 2:1（padding-top: 50%）
   ========================================================= */
.vd-detail-title { margin: 0 0 1rem; font-size: var(--fs-h3); font-weight: 800; line-height: 1.5; }
.vd-detail #MovieFile .embed-ph { aspect-ratio: 2 / 1; }
/* 本番の iframe。モックの置き場と同じ 2:1 で本文幅いっぱいに収める */
body[data-page="LimitedVideoDetail"] #MovieFile,
body[data-page="LimitedVideoDetailLive"] #MovieFile {
  position: relative; width: 100%; height: 0; padding-top: 50%; margin-bottom: 1rem;
}
body[data-page="LimitedVideoDetail"] #MovieFile iframe,
body[data-page="LimitedVideoDetailLive"] #MovieFile iframe {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;
}

/* =========================================================
   29 コミッション（Commission）
   ========================================================= */
body[data-page="Commission"] .cm-filter .fb-pair { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
body[data-page="Commission"] .cm-filter .form-select { min-width: 8rem; }
body[data-page="Commission"] .cm-filter #cmbTargetTerm { min-width: 11rem; }
@media (max-width: 575.98px) {
  body[data-page="Commission"] .cm-filter .fb-pair { width: 100%; }
  body[data-page="Commission"] .cm-filter .form-select { flex: 1 1 10rem; }
  body[data-page="Commission"] .cm-filter .btn { width: 100%; }
  body[data-page="Commission"] .cm-filter .tdButton .btn { width: 100% !important; }   /* legacy.css の .filter-bar input[type="button"] { width:auto !important } に勝たせる */
  body[data-page="Commission"] .cm-filter .tdButton { display: block; width: 100%; }   /* span のままだと width:100% が効かない */
}

/* 宛先（左）と発行元（右）。スマホは縦に並べる */
.cm-parties { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.cm-parties p { margin: 0; line-height: 1.7; }
.cm-to { font-size: var(--fs-lg); font-weight: 700; }
@media (min-width: 768px) {
  .cm-parties { grid-template-columns: 1fr 1fr; }
  .cm-from { text-align: right; }
}

/* 明細の表: 区分ごとに見出しの帯＋「項目名｜金額」の行 */
.cm-wrap { max-width: 44rem; margin: 0 0 1.5rem; background: var(--paper); border: 2px solid var(--line-soft); border-radius: var(--r-card); overflow: hidden; }
.cm-table { width: 100%; margin: 0; border-collapse: collapse; font-size: var(--fs-body); }
.cm-table th, .cm-table td { padding: .55rem 1rem; border-top: 2px solid var(--line-soft); color: var(--ink); line-height: 1.5; vertical-align: middle; }
.cm-table tbody:first-child tr:first-child th, .cm-table tbody:first-child tr:first-child td { border-top: 0; }
.cm-table .cm-head th {
  background: var(--primary); color: var(--paper); font-weight: 800; text-align: left;
  border-top: 0; border-bottom: 4px solid var(--accent);
}
.cm-table .cm-head + tr th, .cm-table .cm-head + tr td { border-top: 0; }
.cm-table tbody th[scope="row"] { font-weight: 700; text-align: left; background: var(--primary-bg); width: 55%; }
.cm-table .num { text-align: right; white-space: nowrap; font-size: var(--fs-lg); font-weight: 700; font-variant-numeric: tabular-nums; }
.cm-table .cm-pair th, .cm-table .cm-pair td { width: 50%; }
.cm-table .cm-pair th + th, .cm-table .cm-pair td + td { border-left: 2px solid var(--line-soft); }
.cm-table .cm-head.cm-pair th + th { border-left-color: var(--primary-hover); }
/* 最後の「お振込金額／お振込ポイント」: 太い枠で目立たせる（並びは現行のまま） */
.cm-table tbody.cm-total { border-top: 4px solid var(--primary); }
.cm-table tbody.cm-total td.num { font-size: var(--fs-h3); }

/* スマホ（767px 以下）: 区分ごとに 1 枚のカードにし、表の横はみ出しを出さない */
@media (max-width: 767.98px) {
  .cm-wrap { background: none; border: 0; border-radius: 0; overflow: visible; }
  .cm-table, .cm-table tbody, .cm-table tr { display: block; width: 100%; }
  .cm-table tbody { margin: 0 0 1rem; background: var(--paper); border: 2px solid var(--line-soft); border-radius: var(--r-card); overflow: hidden; }
  .cm-table tbody.cm-total { border: 3px solid var(--primary); }
  .cm-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .cm-table tr.cm-pair { grid-template-columns: 1fr 1fr; }
  .cm-table th, .cm-table td { display: block; width: auto !important; min-width: 0; }
  .cm-table [colspan="2"] { grid-column: 1 / -1; }
  .cm-table tbody th[scope="row"] { background: var(--paper); }
  .cm-table .num { white-space: normal; word-break: keep-all; }   /* 「1,234,017／円」と金額の途中で割らない（入らない幅ではそれでも折り返す） */
  .cm-table tr.cm-pair { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }   /* お振込金額の列を広めに（見出しの行と値の行で同じ比） */
  .cm-table tbody:first-child tr:first-child th { border-top: 0; }
  .cm-table tbody tr:first-child th, .cm-table tbody tr:first-child td { border-top: 0; }
}

/* =========================================================
   30 よくあるご質問（FAQ）
   ========================================================= */
body[data-page="FAQ"] .faq-serch-box .fld-label { display: flex; align-items: center; gap: .5rem; }
.faq-icon { flex: none; width: 1.4rem; height: 1.4rem; color: var(--primary); }
body[data-page="FAQ"] .faq-serch-box .inline-row .form-control { flex: 1 1 16rem; max-width: 32rem; }
body[data-page="FAQ"] .faq-serch-box .inline-row .btn { min-width: 8rem; }
@media (max-width: 575.98px) { body[data-page="FAQ"] .faq-serch-box .inline-row .btn { flex: 1 1 100%; } }

/* カテゴリー（すべて／01〜05）。幅をそろえた大きなボタン */
.faq-cats { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; gap: .6rem; grid-template-columns: 1fr; }
@media (min-width: 576px) { .faq-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) { .faq-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.faq-cats a {
  display: flex; align-items: center; gap: .5rem;
  min-height: 60px; padding: .4rem 1rem;
  background: var(--paper); color: var(--ink); border: 2px solid var(--line); border-radius: var(--r-btn);
  font-weight: 700; line-height: 1.4; text-decoration: none;
}
.faq-cats a::after { content: "›"; margin-left: auto; padding-left: .75rem; font-size: 1.4rem; line-height: 1; color: var(--primary); }
.faq-cats a:hover { border-color: var(--primary); background: var(--primary-bg); color: var(--ink); text-decoration: underline; }
/* 選択中のカテゴリー（現行はカテゴリー別の画面で select-btn-social-flat が付く）。太枠＋地の色（色だけに頼らない） */
.faq-cats a[aria-current="page"] { border: 4px solid var(--primary); background: var(--primary-bg); padding: calc(.4rem - 2px) calc(1rem - 2px); }

/* Q&A（Bootstrap の accordion。ボタンなのでキーボードの Enter / Space で開閉できる） */
body[data-page="FAQ"] .faq-acc {
  --bs-accordion-color: var(--ink);
  --bs-accordion-bg: var(--paper);
  --bs-accordion-border-color: var(--line-soft);
  --bs-accordion-border-width: 2px;
  --bs-accordion-border-radius: var(--r-card);
  --bs-accordion-inner-border-radius: calc(var(--r-card) - 2px);
  --bs-accordion-btn-padding-x: 1rem;
  --bs-accordion-btn-padding-y: .75rem;
  --bs-accordion-btn-color: var(--ink);
  --bs-accordion-btn-bg: var(--paper);
  --bs-accordion-active-color: var(--ink);
  --bs-accordion-active-bg: var(--primary-bg);
  --bs-accordion-btn-icon-width: 1.4rem;
  --bs-accordion-btn-focus-box-shadow: 0 0 0 8px var(--focus);
  --bs-accordion-body-padding-x: 1.25rem;
  --bs-accordion-body-padding-y: 1rem;
  display: grid; gap: .75rem;
}
body[data-page="FAQ"] .faq-acc .accordion-item {
  border: 2px solid var(--line-soft); border-radius: var(--r-card);
}
body[data-page="FAQ"] .faq-acc .accordion-item .accordion-button {
  min-height: 64px; font-size: var(--fs-lg); font-weight: 700; line-height: 1.5;
  border-radius: calc(var(--r-card) - 2px);
  gap: .75rem;   /* スマホで質問文の行末と開閉の矢印がくっつかないように */
}
body[data-page="FAQ"] .faq-acc .accordion-item .accordion-button:not(.collapsed) {
  border-bottom-left-radius: 0; border-bottom-right-radius: 0;
  box-shadow: inset 0 -3px 0 var(--accent);   /* 開いている質問の下に線（地の色だけに頼らない） */
}
body[data-page="FAQ"] .faq-acc .accordion-item .accordion-button:hover { background: var(--primary-bg); text-decoration: underline; }
body[data-page="FAQ"] .faq-acc .accordion-header { margin: 0; font-size: var(--fs-lg); }
body[data-page="FAQ"] .faq-acc .accordion-body { font-size: var(--fs-body); line-height: 1.8; color: var(--ink); }

/* =========================================================
   31 お問い合わせ（Contact）
   ========================================================= */
body[data-page="Contact"] .contact-card { max-width: 44rem; }
body[data-page="Contact"] .contact-card .fld:last-child { margin-bottom: 0; }

/* 現行のアコーディオン（.accordion_one）を、モックの全幅カードに合わせる。開閉の動きは FAQ_Section のまま */
body[data-page="FAQ"] .section.s_01 { width: 100%; }
body[data-page="FAQ"] .accordion_one {
  width: 100%;
  margin: 0 0 .75rem !important;
  background: var(--paper);
  border: 2px solid var(--line-soft);
  border-radius: var(--r-card);
  overflow: hidden;
}
body[data-page="FAQ"] .accordion_header {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 3.5rem;
  padding: .75rem 1rem;
  background: var(--paper);
  cursor: pointer;
}
body[data-page="FAQ"] .accordion_header table,
body[data-page="FAQ"] .accordion_inner table {
  width: 100% !important;
  min-width: 0 !important;
  margin: 0;
}
body[data-page="FAQ"] .faq_table_title { background: transparent !important; }
body[data-page="FAQ"] .faq_table_title th,
body[data-page="FAQ"] .faq_table_Contents th {
  width: auto !important;
  background: transparent !important;
  color: var(--ink) !important;
  font-size: var(--fs-lg);
  font-weight: 700;
  text-align: left !important;
  border: 0 !important;
  padding: 0 !important;
}
body[data-page="FAQ"] .accordion_header.open,
body[data-page="FAQ"] .accordion_one.open > .accordion_header {
  background: var(--primary-bg);
}
body[data-page="FAQ"] .accordion_inner { width: 100%; }
body[data-page="FAQ"] .accordion_inner .box_one { padding: .25rem 1rem 1rem; }
body[data-page="FAQ"] .faq_table_Contents th { font-size: var(--fs-body); font-weight: 500; line-height: 1.8; }

/* =========================================================
   29 コミッション（旧形式のテンプレート Commission2.tmp / Commission4.tmp 用）
   インボイス対応後の CommissionInvoice.tmp はモックと同じ作り（.cm-table / .dl-table）なので、上の 29 の規則だけで足りる。
   ここは thead / tbody を交互に並べた旧形式の表（table.contTable）だけを新デザインに寄せる。
   ========================================================= */
#page_commission #list_table3 table.contTable {
  width: 100%;
  max-width: none;
  margin: 0 0 1.5rem;
  border-collapse: collapse;
  border: 2px solid var(--line-soft);
  border-radius: var(--r-card);
  overflow: hidden;
}
#page_commission #list_table3 table.contTable td {
  padding: .55rem 1rem !important;
  border-top: 2px solid var(--line-soft);
  background: var(--paper) !important;
  color: var(--ink) !important;
  vertical-align: middle;
  line-height: 1.5;
}
#page_commission #page_totalcommission table.contTable thead td {
  background: var(--primary) !important;
  color: #fff !important;
  font-weight: 800;
  border-top: 0;
  border-bottom: 4px solid var(--accent);
}
#page_commission #page_totalcommission table.contTable tbody td[colspan],
#page_commission #page_totalcommission table.contTable tbody td + td {
  text-align: right;
  font-size: var(--fs-lg);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  background: var(--paper) !important;
}
#page_commission #page_totalcommission table.contTable tbody td:first-child:not([colspan]) {
  width: 55%;
  text-align: left;
  font-weight: 700;
  background: var(--primary-bg) !important;
}
#page_commission #page_positiondetail table.contTable thead td,
#page_commission #page_commissondetail table.contTable thead td {
  background: var(--primary-bg) !important;
  color: var(--ink) !important;
  font-weight: 800;
  border-top: 0;
}
#page_commission #page_positiondetail table.contTable tbody td,
#page_commission #page_commissondetail table.contTable tbody td {
  font-size: var(--fs-lg);
  font-weight: 700;
}