/*
* SC-JAPAN 会員ページ（WizCube）— 見た目の刷新モック 画面別スタイル（担当 A: ログイン前・お知らせ・登録情報まわり）
*
* 対象: 02 GetPassword / 03 CoolingOff / 04 DeleteAccount / 05 TopPage / 06 TopPageDetail /
* 08 ChangeRequest / 09 BankAccount / 10 BankAccountEdit / 11 ShippingAddress / 12 ShippingAddressEdit
* 読み込み順: bootstrap.min.css → Google Fonts → member.css → このファイル
*
* 決まり（README の規約）:
* - 色・余白・文字サイズは member.css の変数（var(--…)）を使い、値を直書きしない
* - 文字を 20px（1rem）未満にしない / 押せる部品は高さ 56px 以上 / 色だけで区別しない
* - セレクタは画面（body[data-page="…"]）か、この担当の接頭辞 .acc- ／現行のクラス名で絞る
*/
/* =========================================================
共通（担当 A の画面）
========================================================= */
/* モック表示の注記（05 の「全 218 件（モックでは 15 件）」） */
.acc-mock-note { margin: 0 0 .75rem; color: var(--ink-2); font-weight: 700; }
/* 表のセルの中の注意書き（現行の赤字の説明。08・10） */
.acc-cell-note { margin: .6rem 0 0; }
/* =========================================================
03 クーリングオフ申請 / 04 退会申請
========================================================= */
/* 申請日（読み取り専用）: 入力できない欄だと分かるよう、地を薄くし枠を点線に（色だけに頼らない） */
body[data-page="CoolingOff"] .acc-readonly,
body[data-page="DeleteAccount"] .acc-readonly {
background-color: var(--soft);
border-style: dashed;
color: var(--ink);
}
/* 同意のチェック: 主色の太枠の箱に入れ、チェックボックスを大きく */
.acc-agree {
margin: 2rem 0 1.5rem; padding: .75rem 1.25rem;
background: var(--primary-bg); border: 3px solid var(--primary); border-radius: var(--r-card);
}
.acc-agree .form-check { gap: .8rem; }
.acc-agree .form-check-input { width: 2rem; height: 2rem; }
.acc-agree .form-check-label { font-size: var(--fs-lg); line-height: 1.5; color: var(--ink); }
/* 同意前の「送信」（disabled）: 塗りをやめて点線の枠にする（グレーの色だけでなく形でも押せないと分かるように） */
.acc-agree-submit:disabled {
--bs-btn-disabled-bg: var(--paper);
--bs-btn-disabled-color: var(--ink-2);
--bs-btn-disabled-border-color: var(--line);
border-style: dashed;
}
/* =========================================================
05 お知らせ一覧
========================================================= */
/* 日付が「2026年08月20日(木)」と長いので、PC の日付の列を広げる（member.css は 9rem） */
@media (min-width: 768px) {
body[data-page="TopPage"] .news-list a { grid-template-columns: 11rem 1fr; }
}
/* =========================================================
06 お知らせ詳細
========================================================= */
.acc-article { padding: 1.5rem 1.5rem 1.75rem; }
.acc-article-head { margin: 0 0 1rem; padding: 0 0 .75rem; border-bottom: 3px solid var(--accent); }
.acc-article-title { margin: 0 0 .5rem; font-size: var(--fs-h3); font-weight: 800; line-height: 1.5; }
body[data-page="TopPageDetail"] .posted_date { display: flex; align-items: center; gap: .4rem; margin: 0; color: var(--ink-2); font-weight: 700; }
.acc-posted-mark { color: var(--primary); }
.acc-article-body p { margin: 0; line-height: 1.9; }
@media (max-width: 575.98px) { .acc-article { padding: 1rem .9rem 1.25rem; } }
/* =========================================================
08 変更リクエスト / 10 口座情報の変更
「項目 / 現在の登録 / リクエスト」の表（.list-table の上に重ねる）。767px 以下は member.css の .is-stack で 1 項目 1 枚のカード
========================================================= */
/* 左上の空の見出しセル（現行 td.infoTh1）も見出し行と同じ帯にする */
.acc-req-table thead .infoTh1 {
background: var(--primary);
border-right: 1px solid var(--primary-hover);
border-bottom: 4px solid var(--accent);
}
.acc-req-table tbody th[scope="row"] { white-space: normal; }
.acc-req-table tbody th label { display: block; margin: 0; }
.acc-req-table .acc-lbl-line { display: block; } /* 現行 適格請求書発行
事業者登録番号
の 2 行 */
.acc-req-table td.acc-req-current { font-weight: 700; }
.acc-req-table .form-select { width: auto; }
.acc-req-table .form-select.w-short { width: 100%; }
/* 項目名の列・現在の登録の列の幅（PC） */
@media (min-width: 768px) {
.acc-req-table tbody th[scope="row"] { width: 12rem; }
.acc-req-table td.acc-req-current { width: 28%; }
}
@media (min-width: 992px) {
.acc-req-table tbody th[scope="row"] { width: 15rem; }
}
/* 銀行名・支店名: 名前の入力欄を伸ばし、種別の select を右に */
.acc-grow { flex: 1 1 12rem; }
/* 適格請求書発行事業者登録番号の前の「T」（表示だけ。入力値に含まれない） */
.acc-invoice { max-width: 26rem; flex-wrap: nowrap; }
.acc-invoice .input-group-text {
min-height: var(--tap); padding: .5rem .9rem;
font-size: var(--fs-lg); font-weight: 800; color: var(--ink);
background: var(--soft); border: 2px solid var(--line);
border-radius: var(--r-field) 0 0 var(--r-field) !important;
}
/* 共通の input 指定が四隅を 8px にするため、T と接する側だけ直角にする */
.acc-invoice > .form-control {
border-radius: 0 var(--r-field) var(--r-field) 0 !important;
}
/* 新しいパスワードの再入力欄と「（再入力）」 */
.acc-pw-again { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin: .75rem 0 0; }
.acc-pw-again .form-control { flex: 1 1 12rem; }
.acc-pw-again label { margin: 0; font-weight: 700; }
/* スマホ（767px 以下）: 入力のあるセルは「リクエスト」などの見出しを上に置き、入力欄を幅いっぱいに */
@media (max-width: 767.98px) {
.is-stack .acc-req-table tbody td.acc-req-input { display: block; }
.is-stack .acc-req-table tbody td.acc-req-input::before { display: block; margin: 0 0 .4rem; }
.is-stack .acc-req-table tbody td.acc-req-empty { display: none; }
.is-stack .acc-req-table .acc-lbl-line { display: inline; }
.acc-req-table .form-select { width: 100%; }
.acc-req-table .inline-row .form-select { width: auto; }
}
/* 10 口座振替の案内（現行 div.bank-notice）: 送り先の住所を太字で読みやすく */
.acc-notice-address { font-weight: 700; line-height: 1.7; }
/* =========================================================
11 配送先住所一覧（現行の ul.address-list > li.address-card を活かす）
========================================================= */
.address-list { list-style: none; margin: 1rem 0 1.5rem; padding: 0; display: grid; gap: 1rem; }
.address-card {
display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem;
padding: 1.25rem; background: var(--paper);
border: 2px solid var(--line-soft); border-radius: var(--r-card);
}
.address-card__body { flex: 1 1 18rem; min-width: 0; }
.address-card__name {
margin: 0 0 .5rem; padding: 0 0 .25rem;
font-size: var(--fs-h3); font-weight: 800; line-height: 1.4;
border-bottom: 3px solid var(--accent);
}
.address-card__details p { margin: 0; font-size: var(--fs-lg); line-height: 1.6; color: var(--ink); }
.address-card__actions { flex: 0 0 auto; }
.address-card__actions .btn { min-width: 10rem; }
@media (max-width: 575.98px) {
.address-card { padding: 1rem .9rem; }
.address-card__actions { flex: 1 1 100%; }
.address-card__actions .btn { width: 100%; }
}
/* =========================================================
12 配送先住所の追加
========================================================= */
body[data-page="ShippingAddressEdit"] .modern-form { padding: 1.5rem 1.5rem 1.25rem; }
@media (max-width: 575.98px) { body[data-page="ShippingAddressEdit"] .modern-form { padding: 1rem .9rem; } }