/* =====================================================================
   受講者ポータル(mypage.reform-shuninsya.com) スタイル
   デザインの正: docs/受講者ポータル_画面モック_v1.html のデザイントークン
   紺 #12264F / 黄 #FFDE59 / 2級バッジ=水色系
   レスポンシブ必須（スマホ390px幅で横はみ出しゼロ）
   ===================================================================== */
:root{
  --navy:#12264F;
  --navy-light:#1E3A6E;
  --yellow:#FFDE59;
  --blue:#3A7BC8;
  --blue-pale:#E9F2FB;
  --red:#C0392B;
  --red-pale:#FCE8E8;
  --green:#2E7D4F;
  --green-pale:#E6F4EC;
  --bg:#F2F4F7;
  --line:#D8DEE7;
  --text:#1A2233;
  --text-sub:#5A6577;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  background:var(--bg);color:var(--text);font-size:14px;line-height:1.7;
  padding:24px 16px;
}
img{max-width:100%;height:auto}
a{color:var(--blue)}

/* ===== フレーム ===== */
/* overflow:clip は hidden と同じく角丸で切り抜くが、スクロールコンテナを作らないため
   枠内の position:sticky（試験画面のカメラ切断バナー）が効く。未対応ブラウザは
   直前の hidden にフォールバックし、バナーは通常フロー表示になるだけで機能は保たれる。 */
.frame{background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;overflow:clip;box-shadow:0 2px 10px rgba(18,38,79,.06);max-width:960px;margin:0 auto}
.frame-page{margin:0 auto}

/* ===== ヘッダー ===== */
.p-header{background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:12px 20px;gap:8px;flex-wrap:wrap}
.p-header .brand{display:flex;align-items:center;gap:10px;min-width:0}
.p-header .mark{width:30px;height:30px;background:var(--yellow);color:var(--navy);border-radius:6px;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:15px;flex-shrink:0}
.p-header .brand-name{font-size:13.5px;font-weight:700;line-height:1.3;min-width:0}
.p-header .brand-name small{display:block;font-size:10px;font-weight:400;color:#B7C3D9}
.p-header .user{font-size:12px;color:#C9D3E4;white-space:nowrap}
.p-header .user b{color:#fff;margin-right:10px}
.p-header .logout{color:#C9D3E4;font-size:11px;border:1px solid #46618F;padding:3px 10px;border-radius:4px;text-decoration:none}
.p-header .logout:hover{background:rgba(255,255,255,.08)}
.p-body{padding:22px}
.p-footer{background:#FAFBFD;border-top:1px solid var(--line);text-align:center;font-size:11px;color:var(--text-sub);padding:12px}

/* ===== ボタン ===== */
.btn{display:inline-block;border:none;cursor:pointer;font-family:inherit;font-weight:700;border-radius:6px;text-decoration:none;text-align:center;line-height:1.4}
.btn-primary{background:var(--yellow);color:var(--navy);padding:11px 26px;font-size:14px}
.btn-navy{background:var(--navy);color:#fff;padding:10px 22px;font-size:13.5px}
.btn-line{background:#fff;color:var(--navy);border:1.5px solid var(--navy);padding:9px 20px;font-size:13px}
.btn-disabled{background:#D4D9E1;color:#8B93A3;padding:11px 26px;font-size:14px;cursor:not-allowed;display:inline-block}
.btn-primary:hover{filter:brightness(.97)}
.btn-navy:hover{background:var(--navy-light)}
.btn-line:hover{background:var(--blue-pale)}

/* ===== バッジ ===== */
.badge{display:inline-block;font-size:10.5px;font-weight:700;padding:2px 9px;border-radius:20px;vertical-align:middle}
.bd-blue{background:var(--blue-pale);color:var(--blue)}
.bd-navy{background:var(--navy);color:var(--yellow)}
.bd-green{background:var(--green-pale);color:var(--green)}
.bd-red{background:var(--red-pale);color:var(--red)}
.bd-gray{background:#EAEDF2;color:var(--text-sub)}

/* ===== 見出し・カード ===== */
.sec-title{font-size:15px;font-weight:700;color:var(--navy);border-left:4px solid var(--yellow);padding-left:10px;margin:22px 0 12px}
.sec-title:first-child{margin-top:0}
.card{border:1px solid var(--line);border-radius:8px;padding:16px 18px;margin-bottom:12px;background:#fff}
.note-sm{font-size:11.5px;color:var(--text-sub)}

/* ===== フォーム ===== */
input[type=text],input[type=email],input[type=file],select{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:6px;font-size:14px;font-family:inherit;background:#fff}
textarea{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:6px;font-size:14px;font-family:inherit;background:#fff;resize:vertical;box-sizing:border-box}
input:disabled{background:#F1F3F6;color:var(--text-sub)}
label.fld{display:block;font-size:12.5px;font-weight:700;color:var(--navy);margin:14px 0 5px}
label.fld .req{color:var(--red);font-size:10.5px;margin-left:6px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}

/* ===== ログイン ===== */
.login-body{display:flex;align-items:flex-start;justify-content:center}
.login-wrap{max-width:440px;margin:0 auto;padding:0}
.login-logo{text-align:center;margin:34px 20px 22px}
.login-logo .mark{width:52px;height:52px;background:var(--navy);color:var(--yellow);border-radius:10px;display:inline-flex;align-items:center;justify-content:center;font-weight:900;font-size:26px;margin-bottom:10px}
.login-logo h2{font-size:17px;color:var(--navy);line-height:1.4}
.login-logo p{font-size:12px;color:var(--text-sub);margin-top:4px}
.login-box{background:#fff;border:1px solid var(--line);border-radius:10px;padding:26px 28px;margin:0 20px;box-shadow:0 2px 10px rgba(18,38,79,.06)}
.login-box .btn-primary{width:100%;margin-top:22px}
.login-box .fld:first-child{margin-top:0}
.login-help{text-align:center;font-size:12px;margin:16px 20px 30px;color:var(--text-sub)}
.login-error{background:var(--red-pale);color:var(--red);border:1px solid #F0C6C0;border-radius:6px;padding:10px 12px;font-size:12.5px;font-weight:700}

/* ===== ダッシュボード ===== */
.notice-list{list-style:none}
.notice-list li{display:flex;gap:12px;padding:10px 4px;border-bottom:1px dashed var(--line);font-size:13px;align-items:baseline;flex-wrap:wrap}
.notice-list .dt{color:var(--text-sub);font-size:12px;white-space:nowrap}
.notice-list a{color:var(--text);text-decoration:none}
.notice-list a:hover{color:var(--blue);text-decoration:underline}
.course-card{border:1px solid var(--line);border-radius:8px;margin-bottom:14px;overflow:hidden}
.course-head{display:flex;align-items:center;justify-content:space-between;padding:13px 18px;background:#FAFBFD;border-bottom:1px solid var(--line);gap:8px;flex-wrap:wrap}
.course-head h3{font-size:14.5px;color:var(--navy)}
.course-items{display:flex;flex-wrap:wrap;gap:10px;padding:14px 18px}
.ci{flex:1;min-width:180px;border:1px solid var(--line);border-radius:6px;padding:12px 14px}
.ci .ci-name{font-size:13px;font-weight:700;color:var(--navy);margin-bottom:6px}
.ci .ci-state{font-size:11.5px;color:var(--text-sub);margin-bottom:10px}
.ci .btn{font-size:12px;padding:7px 14px}
.alert-card{border:1.5px solid var(--yellow);background:#FFFBEA;border-radius:8px;padding:14px 18px;margin-bottom:16px;display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.alert-card b{color:var(--navy)}
.other-links{display:flex;gap:10px;flex-wrap:wrap}
.other-links .btn{flex:0 1 auto}
/* 第26弾: 状態別ネクストアクションバナー（alert-card の一種。右に期限の白枠） */
.next-card .nx-main{flex:1 1 240px;min-width:0}
.next-card.is-wait{border-color:#9EC0E6;background:#F2F7FC}   /* 発表待ちのみ待機トーン（青系） */
.next-card.is-gray{border-color:var(--line);background:#F7F8FA}   /* 結果発表のお知らせ（グレー枠） */
.nx-due{background:#fff;border:1px solid var(--line);border-radius:6px;padding:7px 16px;text-align:center;flex:0 0 auto;min-width:132px}
.nx-due-label{display:block;font-size:10.5px;font-weight:700;color:var(--text-sub);letter-spacing:.02em}
.nx-due-date{display:block;font-size:21px;font-weight:900;color:var(--navy);line-height:1.35;font-variant-numeric:tabular-nums}
.nx-due-date.is-text{font-size:13px;font-weight:700;line-height:1.5}
/* 第52弾: 変更申請の反映通知（緑系）。受験期限ボックス（黄色）の直下に出す。
   ★既存の .alert-card / .next-card には一切手を入れない独立クラス。 */
.pcr-notice{
  position:relative;
  border:1.5px solid #A8D5BC;border-left:6px solid #1E7E4D;
  background:#E9F5EE;border-radius:12px;
  margin:12px 0 16px;padding:14px 18px;
}
/* 「閉じる ✕」はボックス右上。本文の折り返しと重ならないよう本文側に右余白を取る */
.pcr-notice .pcrn-dismiss{position:absolute;top:8px;right:12px;line-height:1}
.pcr-notice .pcrn-dismiss-btn{
  border:0;background:none;padding:2px 0;cursor:pointer;
  font-family:inherit;font-size:12px;color:var(--text-sub);
}
.pcr-notice .pcrn-dismiss-btn:hover{color:var(--text);text-decoration:underline}
.pcr-notice .pcrn-title{
  font-size:14.5px;font-weight:900;color:#1E7E4D;line-height:1.5;
  padding-right:64px;   /* 「閉じる ✕」の分だけ空ける */
}
.pcr-notice .pcrn-note{font-size:12.5px;color:#5A6478;line-height:1.8;margin-top:4px}
.pcr-notice .pcrn-note b{color:#1B2333;font-weight:700}
.pcr-notice .pcrn-link{
  display:inline-block;margin-top:8px;font-size:12.5px;font-weight:700;
  color:#12264F;text-decoration:underline;text-decoration-color:#FFDE59;
  text-decoration-thickness:2px;text-underline-offset:3px;
}
/* 案内ブロック（受験方法の案内・領収書ページの外部案内）: 淡い紺系の囲み */
.info-block{background:#F2F5FB;border:1px solid #D5DEEE;border-radius:10px;padding:13px 15px;font-size:13px;line-height:1.8;margin-bottom:12px}
.info-block h4{font-size:13.5px;font-weight:700;color:var(--navy);margin-bottom:4px}
.info-block ol{margin:4px 0 4px 20px}
.info-block li{margin:2px 0}
.info-block a{color:var(--navy);font-weight:700}
.info-block .ib-warn{color:var(--red);font-weight:700;font-size:12.5px;margin-top:6px;line-height:1.7}
/* 第26弾: 合格確定（発表済）後に受講コース一覧の見出し横へ常設する「◯級合格」バッジ */
.badge-pass{margin-left:2px;letter-spacing:.03em}
/* 第26弾: 受講の流れへの固定カード（お知らせ最上部・常時表示） */
.flow-cta{background:var(--navy);color:#fff;border-radius:8px;padding:15px 18px;margin-bottom:14px;display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.flow-cta .fc-main{flex:1 1 260px;min-width:0}
.flow-cta .fc-badge{display:inline-block;background:var(--yellow);color:var(--navy);font-size:10.5px;font-weight:700;border-radius:20px;padding:2px 10px}
.flow-cta h3{font-size:15px;font-weight:700;margin:7px 0 4px;line-height:1.4}
.flow-cta p{font-size:12px;color:#C9D3E4;line-height:1.7}
/* 第26弾: 受講の流れページ（縦タイムライン） */
.flow-head{background:var(--navy);color:#fff;border-radius:10px;padding:18px 20px;margin-bottom:18px}
.flow-head .fh-badge{display:inline-block;background:var(--yellow);color:var(--navy);font-size:10.5px;font-weight:700;border-radius:20px;padding:2px 10px}
.flow-head h2{font-size:17px;font-weight:700;margin:9px 0 5px;line-height:1.45}
.flow-head p{font-size:12.5px;color:#C9D3E4;line-height:1.7}
.flow-nav{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.flow-nav .btn{font-size:12px;padding:7px 14px}
.flow-tl{position:relative;padding-left:36px;margin-bottom:6px}
.flow-tl::before{content:"";position:absolute;left:13px;top:8px;bottom:8px;width:2px;background:var(--line)}
.flow-step{position:relative;margin-bottom:16px}
.flow-step .fs-no{position:absolute;left:-36px;top:0;width:28px;height:28px;border-radius:50%;background:var(--navy);color:var(--yellow);font-size:13px;font-weight:900;display:flex;align-items:center;justify-content:center}
.flow-step .fs-when{display:inline-block;background:var(--yellow);color:var(--navy);font-size:10.5px;font-weight:700;border-radius:20px;padding:2px 10px}
.flow-step h3{font-size:14.5px;color:var(--navy);margin:6px 0 7px;line-height:1.5}
.flow-card{border:1px solid var(--line);border-radius:8px;background:#fff;padding:12px 14px;font-size:13px;line-height:1.8}
.flow-card b{color:var(--navy)}
.flow-warn{background:var(--red-pale);border:1px solid #F0C6C0;color:var(--red);border-radius:6px;padding:9px 12px;font-size:12px;line-height:1.7;margin-top:9px}
.flow-note{font-size:11.5px;color:var(--text-sub);line-height:1.7;margin-top:9px}
.flow-ex{background:#FAFBFD;border:1px dashed var(--line);border-radius:6px;padding:10px 12px;margin-top:10px;font-size:12px;line-height:1.7}
.flow-ex b{display:block;font-size:11.5px;margin-bottom:3px}
.flow-back{margin-top:18px}
/* 受験結果ページ（合否発表）: 結果カード・合否スタンプ・受験情報テーブル */
.result-card{border:1px solid var(--line);border-radius:10px;background:#fff;padding:18px;margin-bottom:16px;text-align:center}
.result-card .rc-head{font-size:13px;font-weight:700;color:var(--navy);margin-bottom:12px}
.rc-stamp{display:inline-block;border-radius:10px;padding:14px 34px;margin-bottom:12px;line-height:1.4}
.rc-stamp .rc-stamp-main{display:block;font-size:30px;font-weight:900;letter-spacing:.12em}
.rc-stamp .rc-stamp-sub{display:block;font-size:11.5px;font-weight:700;letter-spacing:.02em;margin-top:2px}
.rc-stamp.is-pass{border:3px solid var(--yellow);background:#FFFBEA;color:var(--navy)}
.rc-stamp.is-fail{border:3px solid #C3C9D4;background:#F4F5F7;color:#6A7385}   /* 彩度を落としたトーン */
.result-card .rc-body{font-size:13px;line-height:1.9;text-align:left}
.result-table{width:100%;border-collapse:collapse;font-size:13px;margin-bottom:16px;background:#fff}
.result-table th,.result-table td{border:1px solid var(--line);padding:10px 12px;text-align:left;line-height:1.7}
.result-table th{background:#FAFBFD;color:var(--navy);font-size:12px;font-weight:700;width:34%;white-space:nowrap}
.result-retake .rr-title{font-size:14px;font-weight:700;color:var(--navy);border-left:4px solid var(--yellow);padding-left:10px;margin-bottom:9px}
.result-retake p{font-size:13px;line-height:1.9;margin-bottom:10px}
.result-back{margin-top:18px;font-size:13px}
/* 講座動画（Phase 5）: レスポンシブ埋め込み（16:9）＋一覧 */
.video-frame{position:relative;width:100%;padding-top:56.25%;background:#000;border-radius:8px;overflow:hidden;margin-bottom:6px}
.video-frame iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}
/* Phase 5b: 視聴監視の告知・カメラ許可ゲート */
.video-notice{background:#FFF7E6;border:1px solid var(--yellow);border-radius:6px;padding:9px 12px;font-size:12px;color:var(--navy);margin-bottom:8px;line-height:1.6}
.video-gate{position:absolute;inset:0;background:rgba(18,38,79,.92);color:#fff;display:flex;align-items:center;justify-content:center;text-align:center;padding:18px;z-index:2}
.video-gate .vg-msg{font-size:13px;line-height:1.8;max-width:420px}
.video-list{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.video-item{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:8px;padding:12px 14px;text-decoration:none;color:inherit;background:#fff}
a.video-item:hover{border-color:var(--navy);background:#FAFBFD}
.video-item .vi-play{flex:0 0 auto;width:28px;height:28px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px}
.video-item.is-pending{opacity:.6}
.video-item.is-pending .vi-play{background:var(--line);color:var(--text-sub)}
.video-item.is-current{border-color:var(--navy);background:#F3F6FC}
.video-item .vi-main{display:flex;flex-direction:column;gap:3px;min-width:0}
.video-item .vi-title{font-size:13.5px;font-weight:700;color:var(--navy)}
.video-item .vi-meta{font-size:11px;color:var(--text-sub);display:flex;align-items:center;gap:6px;flex-wrap:wrap}

/* ===== お知らせ詳細 ===== */
.notice-detail{max-width:720px}
.notice-meta{display:flex;align-items:center;gap:10px;color:var(--text-sub);font-size:12px}
.notice-title{font-size:18px;color:var(--navy);margin:8px 0 14px;line-height:1.5}
.notice-body{font-size:13.5px;line-height:1.9}

/* ===== 文書（注意事項等） ===== */
.doc{max-width:760px}
.doc p{margin:8px 0}
.doc-h{font-size:14px;color:var(--navy);margin:18px 0 6px;font-weight:700}
.doc-list{margin:0 0 4px 1.2em}
.doc-list li{margin:5px 0}
.doc-list ul{margin:4px 0 4px 1.1em;list-style:disc}
.doc-list ul li{font-size:12.5px;color:var(--text-sub)}

/* ===== 顔写真 ===== */
.photo-preview{border:1px solid var(--line);border-radius:8px;background:#FAFBFD;padding:10px;display:flex;align-items:center;justify-content:center;min-height:180px}
.photo-preview img{max-height:280px;border-radius:6px}
.photo-empty{color:var(--text-sub);font-size:13px;font-weight:700}

/* ===== PDFビューア ===== */
.pdf-toolbar{display:flex;align-items:center;justify-content:space-between;background:var(--navy-light);color:#fff;padding:9px 14px;font-size:12px;gap:8px;flex-wrap:wrap}
.pdf-toolbar .pg{color:#C9D3E4}
.pdf-frame-wrap{background:#4A5568;padding:0}
.pdf-frame{display:block;width:100%;height:78vh;min-height:420px;border:0;background:#4A5568}
.pdf-fallback{padding:8px 14px}
/* モバイル用「PDFを開く」パネル（デスクトップでは非表示。768px以下で表示） */
.pdf-mobile-open{display:none;background:#4A5568;padding:26px 16px;text-align:center}
.pdf-mobile-open .btn{margin:5px}
.pdf-open-btn{font-size:16px;padding:16px 30px}
.pdf-mobile-open .note-sm{color:#C9D3E4}
.pdf-canvas{background:#4A5568;padding:40px 20px;display:flex;justify-content:center}
.pdf-empty{background:#fff;border-radius:8px;padding:26px;color:var(--text-sub);font-size:13px;text-align:center;max-width:420px}
.text-index{display:flex;flex-wrap:wrap;gap:8px}
.text-chip{display:inline-block;border:1.5px solid var(--navy);color:var(--navy);background:#fff;border-radius:6px;padding:8px 14px;font-size:12.5px;font-weight:700;text-decoration:none}
.text-chip:hover{background:var(--blue-pale)}
.text-chip.on{background:var(--navy);color:#fff}
.text-chip.disabled{border-color:var(--line);color:#9AA3B2;background:#F1F3F6;font-weight:400}

/* ===== 認定状況テーブル ===== */
.score-table{width:100%;border-collapse:collapse;font-size:13px;margin-top:4px}
.score-table th,.score-table td{border:1px solid var(--line);padding:8px 10px;text-align:center}
.score-table th{background:#FAFBFD;color:var(--navy);font-size:12px}

/* ===== レスポンシブ（スマホ・タブレット） ===== */
@media(max-width:768px){
  body{font-size:13.5px;padding:12px 10px}
  .p-body{padding:16px 14px}
  .p-header{padding:10px 14px}
  .course-items{flex-direction:column;padding:12px 14px}
  .ci{min-width:0}
  .ci .btn{display:block}
  .alert-card{flex-direction:column;align-items:stretch;text-align:left}
  .alert-card .btn{text-align:center}
  /* 第26弾: スマホ幅では期限枠を横並び（ラベル＋大きな日付）にして縦を詰める */
  /*   縦積み時は主軸が縦になるため flex-basis(240px) が“高さ”として効いてしまう。
       本文の高さは内容なりにする（カード内の余白が間延びするのを防ぐ）。 */
  .next-card .nx-main{flex:0 1 auto}
  .nx-due{display:flex;align-items:baseline;justify-content:space-between;gap:10px;text-align:left;padding:8px 14px;min-width:0}
  .nx-due-date{font-size:19px}
  /* 第52弾: 反映通知。375px でも「閉じる ✕」と見出しが重ならないよう余白を維持する */
  .pcr-notice{padding:13px 14px}
  .pcr-notice .pcrn-dismiss{top:7px;right:10px}
  .pcr-notice .pcrn-title{font-size:14px;padding-right:60px}
  .pcr-notice .pcrn-note{font-size:12px}
  .flow-cta{flex-direction:column;align-items:stretch}
  .flow-cta .btn{text-align:center}
  .flow-tl{padding-left:30px}
  .flow-tl::before{left:11px}
  .flow-step .fs-no{left:-30px;width:24px;height:24px;font-size:12px}
  .flow-back .btn{display:block;width:100%}
  /* 受験結果ページ: スタンプと表をスマホ幅に収める */
  .rc-stamp{padding:12px 24px}
  .rc-stamp .rc-stamp-main{font-size:26px}
  .result-table th{width:38%}
  .result-retake .btn{display:block;width:100%;text-align:center}
  .grid2{grid-template-columns:1fr}
  .other-links .btn{display:block;width:100%}
  /* モバイルは iframe を出さず「PDFを開く」大ボタンを主役に（iOS Safari制約回避） */
  .pdf-frame-wrap{display:none}
  .pdf-fallback{display:none}
  .pdf-mobile-open{display:block}
  /* 認定状況テーブルは横スクロール可に */
  .score-table{display:block;overflow-x:auto;white-space:nowrap}
}
@media(max-width:400px){
  body{padding:8px 6px}
  .p-body{padding:14px 12px}
  .login-box{padding:20px 16px;margin:0 8px}
}

/* =====================================================================
   検定エンジン（環境チェック / 試験画面 / 受付） — 画面4・5・6準拠
   ===================================================================== */
/* 環境チェック */
.check-rows{margin:6px 0 4px}
.check-row{display:flex;align-items:center;gap:12px;padding:12px 6px;border-bottom:1px dashed var(--line)}
.check-row .st{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:900;flex-shrink:0}
.st.ok{background:var(--green-pale);color:var(--green)}
.st.ng{background:var(--red-pale);color:var(--red)}
.st.wait{background:#EAEDF2;color:var(--text-sub)}
.check-row .cr-name{font-weight:700;font-size:13px;color:var(--navy);width:170px}
.check-row .cr-desc{font-size:12px;color:var(--text-sub);flex:1}

/* 試験バー */
.exam-bar{background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:10px 18px;gap:8px;flex-wrap:wrap}
.exam-bar .ex-title{font-size:13px;font-weight:700}
.exam-bar .ex-right{display:flex;align-items:center;gap:16px}
.timer{background:#fff;color:var(--navy);font-weight:900;font-size:16px;padding:4px 14px;border-radius:6px;font-variant-numeric:tabular-nums}
.cam-chip{display:flex;align-items:center;gap:7px;font-size:11px;color:#C9D3E4}
.cam-chip .dot{width:8px;height:8px;border-radius:50%;background:#E74C3C;animation:exam-blink 1.4s infinite}
@keyframes exam-blink{0%,100%{opacity:1}50%{opacity:.25}}
.warn-banner{background:var(--red-pale);color:var(--red);font-size:12.5px;font-weight:700;padding:9px 18px;border-bottom:1px solid #F0C6C0}

/* カメラ切断警告バナー（試験ヘッダー直下・スクロール追従）
   受験を止めない告知。モーダルにしない・フォーカスも奪わない（role=alert のみ）。 */
.cam-alert{position:sticky;top:8px;z-index:40;margin:12px 18px 0;background:var(--red-pale);
  border:1px solid #E8B7B3;border-left:4px solid var(--red);border-radius:8px;padding:10px 12px;
  animation:cam-alert-in .25s ease}
@keyframes cam-alert-in{from{transform:translateY(-8px);opacity:0}to{transform:none;opacity:1}}
.cam-alert .ca-title{font-size:13px;font-weight:700;color:var(--red);display:flex;gap:6px;align-items:center}
.cam-alert .ca-body{font-size:11.5px;color:#7A1A14;margin:4px 0 8px;line-height:1.6}
.cam-alert .ca-retry{font-family:inherit;font-size:12px;font-weight:700;background:var(--red);color:#fff;
  border:none;border-radius:5px;padding:7px 14px;cursor:pointer;letter-spacing:.06em}
.cam-alert .ca-retry:disabled{opacity:.55;cursor:default}

/* 試験レイアウト */
.exam-layout{display:flex;gap:0}
.exam-main{flex:1;padding:22px;min-width:0}
.exam-side{width:200px;border-left:1px solid var(--line);padding:16px;flex-shrink:0}
.q-no{font-size:12px;color:var(--text-sub);margin-bottom:4px}
.q-no b{color:var(--navy);font-size:15px}
.q-body{font-size:14.5px;font-weight:500;margin:8px 0 18px;line-height:1.8}
.opt{display:flex;gap:10px;align-items:flex-start;border:1.5px solid var(--line);border-radius:8px;padding:12px 14px;margin-bottom:9px;cursor:pointer;font-size:13.5px}
.opt:hover{border-color:var(--blue)}
.opt.sel{border-color:var(--navy);background:var(--blue-pale)}
.opt .mk{width:22px;height:22px;border-radius:50%;border:2px solid var(--line);flex-shrink:0;display:flex;align-items:center;justify-content:center}
.opt.sel .mk{border-color:var(--navy);background:var(--navy)}
.opt.sel .mk::after{content:"";width:8px;height:8px;background:var(--yellow);border-radius:50%}
.q-nav{display:flex;justify-content:space-between;margin-top:20px;gap:8px}
.q-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;margin-top:8px}
.q-grid span{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:10.5px;border:1px solid var(--line);border-radius:4px;color:var(--text-sub);background:#fff;cursor:pointer}
.q-grid span.done{background:var(--navy);color:#fff;border-color:var(--navy)}
.q-grid span.now{border:2px solid var(--yellow);font-weight:900;color:var(--navy)}
.side-cam{margin-top:16px;background:#1A2233;border-radius:6px;aspect-ratio:4/3;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#8FA0BE;font-size:10px;gap:4px}
.side-cam small{font-size:9px}
/* セルフビュー（本試験のみ。サンプルの .side-cam は従来のまま）
   撮影中ドット・ラベルはスマホの固定表示でのみ可視。PCは従来の右サイドバー表示を維持する。 */
.side-cam-live{position:relative}
.side-cam-live .cam-rec,.side-cam-live .cam-tag{display:none}
/* 切断中スタイル（PC・スマホ共通）。inset影で枠を描き、PCのボックス寸法を変えない。 */
.side-cam-live.is-cut{background:#1B1B1B;color:#F0B6B2;box-shadow:inset 0 0 0 2px var(--red)}
textarea.ans{width:100%;min-height:150px;border:1px solid var(--line);border-radius:8px;padding:12px;font-family:inherit;font-size:13.5px;resize:vertical}
.char-count{text-align:right;font-size:11px;color:var(--text-sub);margin-top:4px}
.saved-mark{color:var(--green)}

/* 受付（提出後）*/
.result-hero{text-align:center;padding:30px 20px 18px}
.result-hero .rs{display:inline-flex;flex-direction:column;align-items:center;gap:8px}
.result-mark{width:82px;height:82px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:900}
.result-hero h3{font-size:19px;color:var(--navy)}

/* 試験画面レスポンシブ（スマホ: サイドバーを下部へ） */
@media(max-width:768px){
  .exam-layout{flex-direction:column}
  .exam-main{padding:16px 14px}
  .exam-side{width:100%;border-left:none;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:14px;align-items:flex-start}
  .exam-side>div:first-child{width:100%}
  .q-grid{grid-template-columns:repeat(10,1fr)!important;flex:1;min-width:200px}
  .side-cam{width:110px;margin-top:0;flex-shrink:0}
  /* セルフビューを画面右下に固定し、解答中も常時視界に入るようにする */
  .side-cam-live{position:fixed;right:12px;bottom:14px;z-index:60;width:96px;aspect-ratio:3/4;
    margin-top:0;border:2px solid rgba(255,255,255,.9);border-radius:10px;overflow:hidden;
    box-shadow:0 4px 16px rgba(0,0,0,.35)}
  .side-cam-live.is-cut{border-color:var(--red);box-shadow:0 4px 16px rgba(0,0,0,.35)}
  .side-cam-live small{display:none}
  .side-cam-live .cam-rec{display:block;position:absolute;top:5px;left:5px;z-index:2;width:8px;height:8px;
    border-radius:50%;background:#E33;box-shadow:0 0 6px #E33;animation:exam-blink 1.6s infinite}
  .side-cam-live.is-cut .cam-rec{background:#666;box-shadow:none;animation:none}
  .side-cam-live .cam-tag{display:block;position:absolute;left:0;right:0;bottom:0;z-index:2;
    font-size:8.5px;line-height:1.6;text-align:center;letter-spacing:.08em;
    background:rgba(0,0,0,.55);color:#fff;padding:2px 0}
  .side-cam-live.is-cut .cam-tag{background:var(--red)}
  /* 固定セルフビューが解答・提出ボタンに重ならないよう、末尾に逃げ幅を確保する */
  .exam-side-cam{padding-bottom:158px}
  .exam-side .btn{width:100%!important;margin-top:4px!important}
  .exam-bar{flex-wrap:wrap;gap:6px}
  .timer{font-size:14px}
  .q-nav{flex-wrap:wrap}
  .q-nav .btn{flex:1}
  .check-row{flex-wrap:wrap}
  .check-row .cr-name{width:auto;flex:1}
  .check-row .cr-desc{width:100%;padding-left:38px}
}

/* 提出後の結果案内文言（太字+ハイライト） */
.notice-emph{font-weight:700;background:#FFFBEA;border-bottom:2px solid var(--yellow);padding:1px 4px}

/* 環境チェックのカメラプレビュー */
.cam-preview{background:#1A2233;border-radius:8px;aspect-ratio:4/3;max-width:320px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#8FA0BE;font-size:12px;gap:8px;overflow:hidden}
@media(max-width:768px){ .cam-preview{max-width:none} }

/* 受験にあたっての注意事項（v3・3カード） */
.caution-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:14px}
.caution-card{margin-bottom:0}
.caution-card-title{font-size:12.5px;font-weight:700;color:var(--navy);border-left:4px solid var(--yellow);padding-left:8px;margin-bottom:8px}
@media(max-width:768px){ .caution-cards{grid-template-columns:1fr} }

/* ===== 認定登録・決済（Phase 4） ===== */
.steps{display:flex;margin-bottom:22px}
.steps .stp{flex:1;text-align:center;font-size:11.5px;color:var(--text-sub);position:relative;padding-top:30px}
.steps .stp::before{content:attr(data-n);position:absolute;top:0;left:50%;transform:translateX(-50%);width:24px;height:24px;border-radius:50%;background:#EAEDF2;color:var(--text-sub);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px}
.steps .stp::after{content:"";position:absolute;top:12px;left:calc(50% + 14px);width:calc(100% - 28px);height:2px;background:var(--line)}
.steps .stp:last-child::after{display:none}
.steps .stp.on{color:var(--navy);font-weight:700}
.steps .stp.on::before{background:var(--navy);color:var(--yellow)}
.pay-box{border:1.5px solid var(--navy);border-radius:8px;padding:16px 18px;display:flex;justify-content:space-between;align-items:center;margin:18px 0 6px;gap:12px;flex-wrap:wrap}
.pay-box .amount{font-size:22px;font-weight:900;color:var(--navy);white-space:nowrap}
.pay-box .amount small{font-size:12px;font-weight:400;color:var(--text-sub)}
@media(max-width:768px){
  .pay-box{flex-direction:column;align-items:flex-start;gap:6px}
  .steps .stp{font-size:10px}
}

/* =====================================================================
   サンプル受験（動作確認） — モック mypage_sample_exam_mock.html 画面B/C/D
   既存トークン（--navy / --yellow / --green / --red / --line）のみを使う。
   ===================================================================== */
/* 画面B: 説明・チェックリスト・ご注意・カメラプレビュー */
.smp-lead{font-size:13.5px;line-height:1.9;margin:0 0 14px}
.smp-steps{border:1px solid var(--line);border-radius:8px;overflow:hidden;margin-bottom:14px}
.smp-steps .row{display:flex;gap:10px;align-items:flex-start;padding:10px 14px;font-size:13px;border-bottom:1px solid var(--line)}
.smp-steps .row:last-child{border-bottom:none}
.smp-steps .num{flex:none;width:22px;height:22px;border-radius:50%;background:var(--navy);color:var(--yellow);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;margin-top:2px}
.smp-notice{background:#FFFBEA;border:1px solid var(--yellow);border-radius:8px;padding:12px 15px;font-size:12.5px;line-height:1.8;margin-bottom:14px}
.smp-notice b{color:var(--navy)}
.smp-preview{background:#1A2233;border-radius:8px;max-width:420px;aspect-ratio:4/3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:#8FA0BE;font-size:12px;overflow:hidden;margin-bottom:8px}
.smp-preview video{width:100%;height:100%;object-fit:cover}
.smp-preview .cam-icon{font-size:32px}
.smp-camok{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--green);margin-bottom:14px}
.smp-btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}

/* 画面C: 出題（本試験の .opt / .card をそのまま使い、上部バッジと監視カメラだけ足す） */
.smp-top{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.smp-badge{display:inline-block;background:var(--yellow);color:var(--navy);font-weight:700;font-size:12.5px;padding:5px 14px;border-radius:20px}
.smp-monitor{display:flex;align-items:center;gap:8px}
.smp-mini-cam{width:84px;height:62px;background:#1A2233;border-radius:6px;display:flex;align-items:center;justify-content:center;color:#8FA0BE;font-size:18px;overflow:hidden;flex:none}
.smp-mini-cam video{width:100%;height:100%;object-fit:cover}
.smp-mon-label{font-size:11px;color:var(--red);font-weight:700;white-space:nowrap}
.smp-progress{font-size:12px;color:var(--text-sub);margin-bottom:8px}
.smp-q-text{font-size:14.5px;font-weight:700;margin-bottom:12px;line-height:1.7}

/* 画面D: 結果（スタンプ・チェック結果表・次の案内） */
.smp-result-head{text-align:center;padding:4px 0 18px}
.smp-stamp{display:inline-block;border:3px solid var(--green);color:var(--green);background:var(--green-pale);border-radius:10px;padding:10px 28px;font-size:20px;font-weight:900;transform:rotate(-2deg)}
.smp-stamp.is-ng{border-color:var(--red);color:var(--red);background:var(--red-pale);transform:none}
.smp-result-head p{font-size:13.5px;margin-top:14px}
.smp-result-table th{width:44%}
.smp-ok{color:var(--green);font-weight:700;white-space:nowrap}
.smp-ng{color:var(--red);font-weight:700;white-space:nowrap}
.smp-next{background:var(--green-pale);border:1px solid #BCDCC6;border-radius:8px;padding:12px 15px;font-size:13px;line-height:1.8;margin-bottom:14px}
.smp-next.is-ng{background:var(--red-pale);border-color:#E6B6BC}
.smp-next b{display:block;color:var(--navy);margin-bottom:3px}
.smp-next ul{margin:5px 0 0 18px}
@media(max-width:768px){
  .smp-preview{max-width:none}
  .smp-btns .btn{width:100%;text-align:center}
  .smp-result-table th{width:40%}
}

/* =====================================================================
   第40弾 (1) 初回同意ゲート consent.php
   正: モック consent-gate-mock.html（寸法・構成はモック準拠。
       色はこのファイル冒頭のデザイントークンに合わせる）
   ===================================================================== */
.consent-wrap{max-width:680px;margin:0 auto}

/* ステップ表示（1同意 → 2顔写真 → 3マイページ） */
.cg-steps{display:flex;justify-content:center;align-items:center;margin-bottom:28px;font-size:11.5px;flex-wrap:wrap}
.cg-step{display:flex;align-items:center;gap:8px;color:var(--text-sub)}
.cg-step .dot{width:28px;height:28px;border-radius:50%;background:#D5DAE3;color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;flex-shrink:0}
.cg-step.cur{color:var(--navy);font-weight:700}
.cg-step.cur .dot{background:var(--navy)}
.cg-step-sep{width:36px;height:1px;background:#C6CCD8;margin:0 10px;flex-shrink:0}

.cg-h1{font-size:19px;text-align:center;letter-spacing:.04em;margin-bottom:6px;color:var(--navy)}
.cg-lead{text-align:center;font-size:13px;color:var(--text-sub);margin-bottom:26px}
.cg-lead b{color:var(--text)}

/* 同意4項目（チェック済みは枠色が変わる） */
.cg-item{background:#fff;border:1.5px solid var(--line);border-radius:12px;margin-bottom:12px;
  overflow:hidden;transition:border-color .15s}
.cg-item.ok{border-color:var(--navy)}
.cg-item label{display:flex;gap:14px;padding:18px 20px;cursor:pointer;align-items:flex-start}
.cg-item input{width:22px;height:22px;margin-top:3px;accent-color:var(--navy);flex-shrink:0;cursor:pointer}
.cg-item .tt{font-size:14.5px;font-weight:700;display:block;margin-bottom:3px;line-height:1.6}
.cg-item .tx{font-size:12.5px;color:var(--text-sub);display:block;line-height:1.7}

/* 「適格性確認は、実際に行われます」 */
.cg-verify{background:var(--navy-light);color:#fff;border-radius:12px;padding:20px 22px;margin:22px 0 12px}
.cg-verify .vh{display:flex;align-items:center;gap:10px;font-size:14.5px;font-weight:700;
  margin-bottom:10px;letter-spacing:.04em}
.cg-verify .vh .ico{font-size:22px}
.cg-verify ol{margin-left:20px;font-size:12.5px;opacity:.95}
.cg-verify li{margin-bottom:4px}
.cg-verify .vt{margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.25);
  font-size:12px;opacity:.9}

.cg-fatal{background:var(--red-pale);border:1.5px solid var(--red);border-radius:10px;
  padding:12px 16px;font-size:12.5px;color:#7A1A14;text-align:center;margin-bottom:22px}
.cg-fatal b{color:var(--red)}

.cg-agreebtn{display:block;width:100%;padding:16px;font-family:inherit;font-size:15px;font-weight:700;
  letter-spacing:.14em;border:none;border-radius:10px;background:#B9C1CF;color:#fff;cursor:not-allowed;
  transition:background .2s}
.cg-agreebtn.on{background:var(--navy);cursor:pointer}
.cg-footnote{text-align:center;font-size:11px;color:var(--text-sub);margin-top:10px}
.cg-footnote a{color:var(--navy)}

@media(max-width:768px){
  .cg-steps{font-size:10.5px;gap:2px}
  .cg-step-sep{width:16px;margin:0 4px}
  .cg-item label{padding:14px 14px;gap:10px}
  .cg-verify{padding:16px 16px}
}

/* =====================================================================
   第40弾 (2) 受験前の注意書き（mypage世代のみ）exam_start.php
   正: モック exam-notice-redesign-mock.html
   ===================================================================== */
/* ヒーロー「守ることは、この3つだけ」 */
.en-hero{text-align:center;margin-bottom:10px}
.en-hero h1{font-size:20px;letter-spacing:.04em;margin-bottom:4px;color:var(--navy)}
.en-hero>p{font-size:13px;color:var(--text-sub);margin-bottom:18px}
.en-three{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:8px}
.en-rule{background:var(--navy-light);color:#fff;border-radius:14px;padding:22px 14px 18px;position:relative}
.en-rule .num{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--yellow);
  color:var(--navy);font-weight:700;font-size:13px;width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center}
.en-rule .ico{font-size:44px;line-height:1;display:block;margin-bottom:10px}
.en-rule b{font-size:17px;letter-spacing:.06em;display:block}
.en-rule>span:not(.num):not(.ico){font-size:11.5px;opacity:.8;display:block;margin-top:4px}
.en-sub{font-size:12.5px;color:var(--text-sub);margin:10px 0 30px;text-align:center}

/* セクション見出し */
.en-h2{font-size:16px;margin:34px 0 6px;padding-left:12px;border-left:5px solid var(--yellow);
  letter-spacing:.04em;color:var(--navy)}
.en-h2.ng-h{border-left-color:var(--red)}
.en-h2.ok-h{border-left-color:var(--green)}
.en-lead{font-size:12.5px;color:var(--text-sub);margin-bottom:14px}

/* 失格カード / OKカード */
.en-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.en-ng,.en-ok{background:#fff;border-radius:12px;padding:16px 12px 14px;text-align:center;position:relative}
.en-ng{border:1.5px solid #EEC5C0;overflow:hidden}
.en-ok{border:1.5px solid #BFDCCB}
.en-ng .ico,.en-ok .ico{font-size:40px;line-height:1;display:block;margin-bottom:8px}
.en-ng .ico{position:relative}
/* 失格アイコンの禁止マーク（モックの擬似要素をそのまま移植） */
.en-ng .ico::after{content:"";position:absolute;left:50%;top:50%;width:58px;height:58px;
  transform:translate(-50%,-50%);border:3.5px solid rgba(192,57,43,.85);border-radius:50%;
  background:linear-gradient(to top right,transparent 45.5%,rgba(192,57,43,.85) 46%,
    rgba(192,57,43,.85) 54%,transparent 54.5%)}
.en-ng b{font-size:14.5px;display:block;color:var(--red)}
.en-ok b{font-size:14px;display:block;color:var(--green)}
.en-ng>span:not(.ico):not(.badge),.en-ok>span:not(.ico):not(.badge){font-size:11.5px;
  color:var(--text-sub);display:block;margin-top:3px;line-height:1.5}
.en-ng .badge,.en-ok .badge{position:absolute;top:0;right:0;color:#fff;font-size:10px;font-weight:700;
  padding:3px 10px;border-radius:0 10px 0 10px;letter-spacing:.1em}
.en-ng .badge{background:var(--red)}
.en-ok .badge{background:var(--green)}

/* カメラの映り方（✅❌の対比。顔はCSS描画） */
.en-camrow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.en-camcard{background:#fff;border-radius:12px;padding:14px;border:1.5px solid var(--line);text-align:center}
.en-camcard.good{border-color:#BFDCCB}
.en-camcard.bad{border-color:#EEC5C0}
.en-camframe{width:150px;height:112px;margin:0 auto 10px;border-radius:8px;position:relative;
  overflow:hidden;background:linear-gradient(180deg,#8D99AB,#6F7C8F);max-width:100%}
.en-face{position:absolute;left:50%;width:56px;height:66px;transform:translateX(-50%)}
.en-face::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:44px;height:48px;border-radius:50% 50% 46% 46%;background:#C9A889;box-shadow:0 -6px 0 -2px #2A2320}
.en-face::after{content:"";position:absolute;top:44px;left:50%;transform:translateX(-50%);
  width:66px;height:30px;border-radius:40% 40% 0 0;background:#4A5A74}
.en-camcard.good .en-face{top:18px}
.en-camcard.bad .en-face{top:84px}   /* 頭頂部しか映っていない状態 */
.en-camframe .mark2{position:absolute;top:6px;right:6px;font-size:20px;line-height:1;
  text-shadow:0 1px 3px rgba(0,0,0,.4)}
.en-camcard b{font-size:13.5px;display:block}
.en-camcard.good b{color:var(--green)}
.en-camcard.bad b{color:var(--red)}
.en-camcard>span{font-size:11.5px;color:var(--text-sub)}

/* 時間について */
.en-time{display:flex;gap:10px;flex-wrap:wrap}
.en-time>div{flex:1;min-width:240px;background:#fff;border:1.5px solid var(--line);border-radius:12px;
  padding:13px 16px;font-size:13px;display:flex;gap:12px;align-items:center}
.en-time .ico{font-size:28px;flex-shrink:0}
.en-time b{display:block;font-size:13.5px}
.en-time span:not(.ico){color:var(--text-sub);font-size:12px}

/* 赤帯 */
.en-fatal{margin-top:34px;background:var(--red-pale);border:2px solid var(--red);border-radius:12px;
  padding:18px 20px;text-align:center}
.en-fatal b{color:var(--red);font-size:15.5px;display:block;margin-bottom:2px}
.en-fatal span{font-size:12.5px;color:#7A1A14}

/* 同意チェック3項目（環境チェックカード内。開始ボタンはカメラOKとのANDで有効化） */
.en-consent{margin:4px 0 10px}
.en-consent label{display:flex;gap:10px;align-items:flex-start;font-size:13px;padding:9px 0;
  cursor:pointer;border-top:1px dashed var(--line);line-height:1.6}
.en-consent label:first-child{border-top:none}
.en-consent input{width:20px;height:20px;margin-top:2px;accent-color:var(--navy);flex-shrink:0}

@media(max-width:720px){
  .en-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .en-three{grid-template-columns:1fr}
  .en-hero h1{font-size:18px}
}
@media(max-width:560px){
  .en-camrow{grid-template-columns:1fr}
}
@media(max-width:560px){
  /* 時間カードは潰さず1列に折り返す（モックの min-width:240px と同じ見え方） */
  .en-time>div{flex:1 1 100%}
}
@media(max-width:420px){
  .en-grid{grid-template-columns:1fr}
}

/* =====================================================================
   認定ロゴカード（ダッシュボード）
     既存カード（.card / .ci）の見た目に合わせる。紺 #12264F / 黄 #FFDE59 基調。
     級バッジの背景色だけはモック指定（1級 #8F7E49 / 2級 #3B82C4）を
     dashboard.php からインラインで与える。
   ===================================================================== */
.logo-card .logo-lead{font-size:12.5px;color:var(--text-sub);line-height:1.8;margin-bottom:12px}
.logo-items{display:flex;flex-wrap:wrap;gap:12px}
.logo-item{flex:1 1 260px;min-width:0;border:1px solid var(--line);border-radius:6px;padding:14px 16px}
.logo-item-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.logo-grade{display:inline-block;color:#fff;font-size:11.5px;font-weight:700;
            padding:3px 12px;border-radius:20px;letter-spacing:.04em}
.logo-certno{font-size:12px;color:var(--text-sub)}
.logo-certno b{margin-left:6px;font-size:13.5px;color:var(--navy);letter-spacing:.02em}
.logo-item .btn{font-size:13px;padding:9px 20px}
.logo-until{font-size:11.5px;color:var(--navy);font-weight:700;margin-top:8px}
.logo-note{margin-top:8px;line-height:1.75}

/* 第45弾: 初回発行のロゴ利用規約 同意パネル（級ブロック内で開閉）
   初回同意ゲート consent.php のチェック→ボタン活性と同じ作法にそろえる。 */
.logo-agree{border:1.5px solid var(--navy);border-radius:8px;padding:14px 16px;margin-top:4px;
  background:#FAFBFD}
/* .btn の display:inline-block が UA の [hidden]{display:none} に勝ってしまうため、
   同意パネル・開くボタンの hidden 属性は明示的に効かせる。 */
.logo-agree[hidden],
.logo-item .btn[hidden]{display:none}
.la-lead{font-size:12.5px;font-weight:700;color:var(--navy);line-height:1.7;margin-bottom:12px}
.la-head{font-size:12.5px;font-weight:700;color:var(--text);line-height:1.7;margin-top:12px}
.la-head:first-of-type{margin-top:0}
.la-list{margin:6px 0 0 18px;font-size:12px;color:var(--text-sub);line-height:1.85}
.la-list li{margin-bottom:2px}
.la-link{margin-top:12px;font-size:12px}
.la-link a{color:var(--navy);font-weight:700}
.la-check{display:flex;gap:10px;align-items:flex-start;margin-top:14px;padding-top:12px;
  border-top:1px solid var(--line);cursor:pointer;font-size:12.5px;line-height:1.6}
.la-check input{width:20px;height:20px;margin-top:1px;accent-color:var(--navy);flex-shrink:0;cursor:pointer}
.logo-item .la-submit{display:block;width:100%;margin-top:12px}
.logo-item .la-submit[disabled]{background:#B9C1CF;color:#fff;cursor:not-allowed}

@media(max-width:768px){
  .logo-items{flex-direction:column}
  .logo-item{flex:1 1 auto}
  .logo-item .btn{display:block;width:100%}
  .logo-agree{padding:12px 12px}
}

/* ===== 第49弾: 顔写真ガイド（良い例・NG例） =====
   画像は mypage/assets/img/photo-guide/ の600×600 PNG。表示は最大150px幅。
   ✓／✕のマークはCSSで重ねる（画像側には文字もマークも入っていない）。 */
.pg-ok{border:1px solid #BFE3CD;background:var(--green-pale);border-radius:10px;padding:18px;
  display:flex;gap:22px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.pg-ok figure{flex:0 0 150px}
.pg-ok figcaption{text-align:center;font-size:12.5px;font-weight:700;color:var(--green);margin-top:8px}
.pg-list{flex:1 1 300px;list-style:none;font-size:13px}
.pg-list li{position:relative;padding-left:24px;margin-bottom:7px}
.pg-list li:last-child{margin-bottom:0}
.pg-list li::before{content:"";position:absolute;left:2px;top:8px;width:11px;height:6px;
  border-left:2.5px solid var(--green);border-bottom:2.5px solid var(--green);transform:rotate(-45deg)}
.pg-ng-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.pg-ng{border:1px solid #F0C6C0;background:var(--red-pale);border-radius:10px;padding:13px 11px 15px;text-align:center}
.pg-ng-t{font-size:13px;font-weight:700;color:var(--red);margin-top:9px}
.pg-ng-s{font-size:11.5px;color:var(--text-sub);margin-top:3px;line-height:1.55}
.pg-thumb{position:relative;width:100%;max-width:150px;margin:0 auto}
.pg-thumb img{display:block;width:100%;height:auto;border-radius:8px;border:1px solid var(--line)}
.pg-mark{position:absolute;right:-6px;top:-6px;width:25px;height:25px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;color:#fff;
  box-shadow:0 1px 3px rgba(18,38,79,.25);z-index:2}
.pg-mark.is-ok{background:var(--green)}
.pg-mark.is-ng{background:var(--red)}

/* ===== 第49弾: 登録情報の変更申請 ===== */
.pc-diff{width:100%;border-collapse:collapse;font-size:13.5px}
.pc-diff th,.pc-diff td{border-bottom:1px solid var(--line);padding:11px 10px;text-align:left;vertical-align:top}
.pc-diff th{width:132px;font-size:12.5px;font-weight:700;color:var(--navy);background:#FAFBFD}
.pc-diff tr.is-changed td,.pc-diff tr.is-changed th{background:#FFFBEA}
.pc-old{color:var(--text-sub);text-decoration:line-through}
.pc-arrow{color:var(--text-sub);padding:0 6px}
.pc-new{font-weight:700;color:var(--navy)}
.pc-nochange{color:#9AA3B2;font-size:12.5px}
.pc-done{border:1px solid #BFE3CD;background:var(--green-pale);border-radius:8px;padding:18px;
  text-align:center;margin-bottom:16px;font-size:13px}
.pc-done-t{font-size:16px;font-weight:700;color:var(--green);margin-bottom:5px}
.pc-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px;align-items:center}
.pc-err{background:var(--red-pale);color:var(--red);border:1px solid #F0C6C0;border-radius:6px;
  padding:7px 10px;font-size:12px;font-weight:700;margin-top:6px}
.pc-opt{color:var(--text-sub);font-size:10.5px;margin-left:6px}
.pc-dob{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.pc-dob select{width:auto;min-width:88px}
.pc-diff td a{word-break:break-all}

@media(max-width:768px){
  .pg-ng-grid{grid-template-columns:repeat(2,1fr)}
  .pg-ok{gap:14px}
  .pg-ok figure{flex:1 1 auto;margin:0 auto}
  .pc-diff th{width:96px}
  .pc-actions .btn{display:block;width:100%;text-align:center}
}