/* 配色は協会サイト（blog.or.jp）の青緑 #14697A に合わせている（2026-08-13）。
   変数名の navy / blue は紺基調だった当初からのもので、参照箇所が多いため
   名前は変えずに値だけ差し替えている。新しく書く箇所は --brand / --brand-dark を使う。 */
:root {
  --brand: #14697a;       /* 協会サイトと同一。リンク・サブ見出し・アクセント */
  --brand-dark: #0f5462;  /* ヒーローの色面・ヘッダー・見出し（白文字とのコントラスト8.5:1） */
  --navy: var(--brand-dark);
  --blue: var(--brand);
  --bg: #f4f8f9;
  --border: #d3e1e4;
  --text: #222;
  /* 申し込みボタン用の黄色寄りのオレンジ。青緑の帯の上でいちばん目立つ色。
     文字は白ではなく濃いグレーを載せる（白だとコントラストが足りない） */
  --cta: #f7a600;
  --cta-dark: #dd9200;
}
* { box-sizing: border-box; }

/* 端末にUDフォントが入っていればそれを使い、Webフォントを読み込まない。
   （Windowsは標準搭載のため、この指定でダウンロードが発生しなくなる。
     未搭載の端末ではこの指定が失敗し、次のBIZ UDPGothic＝Webフォントに進む） */
@font-face {
  font-family: "UD Gothic Local";
  font-style: normal;
  font-weight: 400;
  src: local("BIZ UDPGothic"), local("BIZ-UDPGothic"), local("BIZ UDGothic");
}
@font-face {
  font-family: "UD Gothic Local";
  font-style: normal;
  font-weight: 700;
  src: local("BIZ UDPGothic Bold"), local("BIZ-UDPGothic-Bold"), local("BIZ UDPGothic");
}

body {
  margin: 0;
  /* LPのヒーローを 100vw で全幅にする際、スクロールバー幅のぶんだけ
     はみ出すのを切る。縦スクロールは効いたまま */
  overflow-x: hidden;
  /* UDフォント優先（読み間違いを減らすユニバーサルデザイン書体）。
     端末搭載品→Webフォント→ヒラギノ→Noto→游ゴシックの順に落とす */
  font-family: "UD Gothic Local", "BIZ UDPGothic", "BIZ UDGothic", "Hiragino Sans",
               "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.7;
}
.wrap { max-width: 860px; margin: 0 auto; padding: 0 16px; }
.site-header { background: var(--navy); }
.site-header .wrap { display: flex; justify-content: space-between; align-items: center; height: 56px; }
.site-header a, .site-header .linklike { color: #fff; text-decoration: none; margin-left: 12px; }
.brand { font-weight: bold; }
main.wrap { padding: 24px 16px 48px; min-height: 60vh; }
.site-footer { background: #e6f0f1; padding: 16px 0; font-size: 14px; color: #555; }
h1 { color: var(--navy); font-size: 24px; }
h2 { color: var(--blue); font-size: 18px; margin-top: 0; }
.card {
  background: #fff; border: 1px solid var(--border); border-radius: 8px;
  padding: 20px; margin: 16px 0;
}
.form label { display: block; margin-bottom: 12px; font-size: 14px; }
.form input[type="text"], .form input[type="email"], .form input[type="password"] {
  display: block; width: 100%; max-width: 400px; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: 6px; font-size: 16px; margin-top: 4px;
}
.btn {
  background: var(--blue); color: #fff; border: none; border-radius: 6px;
  padding: 10px 24px; font-size: 15px; cursor: pointer;
}
.btn:hover { background: var(--navy); }
.linklike { background: none; border: none; padding: 0; cursor: pointer; font-size: inherit; text-decoration: underline; }
.inline { display: inline; }
.flash { padding: 10px 14px; border-radius: 6px; margin: 12px 0; font-size: 14px; }
.flash-success { background: #e6f4e6; border: 1px solid #b4dcb4; }
.flash-error { background: #fbe9e9; border: 1px solid #eab8b8; }
.flash-info { background: #e3f0f2; border: 1px solid #b0d6dc; }
.table { border-collapse: collapse; width: 100%; }
.table th, .table td { border: 1px solid var(--border); padding: 8px 12px; text-align: left; }
.table th { background: #e9f2f3; width: 40%; }

/* 進捗バー */
.progressbar { background: #dfebed; border-radius: 6px; height: 12px; overflow: hidden; margin: 8px 0; }
.progressbar-fill { background: var(--blue); height: 100%; border-radius: 6px; }

/* 教材一覧 */
.lesson-list { list-style: none; padding: 0; margin: 0; }
.lesson-list li { padding: 8px 4px; border-bottom: 1px solid var(--border); }
.lesson-list li:last-child { border-bottom: none; }
.lesson-list a { color: var(--blue); text-decoration: none; }
.lesson-list a:hover { text-decoration: underline; }
.badge-done {
  display: inline-block; background: #e6f4e6; color: #2c7a2c; border: 1px solid #b4dcb4;
  border-radius: 10px; font-size: 12px; padding: 1px 10px; margin-left: 8px; vertical-align: middle;
}

/* 教材ページの上部ナビ（章の切り替え＋現在の章のレッスン） */
.lesson-topnav { margin-bottom: 18px; }
.chapter-strip, .lesson-strip {
  display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px;
  scrollbar-width: thin;
}
.chapter-strip { flex-wrap: wrap; }
/* 画面が狭いときは折り返さず横スクロール（縦に伸びて本文を押し下げないように） */
@media (max-width: 899px) {
  .chapter-strip { flex-wrap: nowrap; }
  .lesson-progress { padding-left: 8px; }
}
.chapter-chip {
  display: inline-block; white-space: nowrap; text-decoration: none;
  font-size: 13px; line-height: 1.5; color: #2f5860; background: #f0f7f8;
  border: 1px solid #d8e7ea; border-radius: 6px; padding: 5px 13px;
  transition: background .15s, border-color .15s, color .15s;
}
.chapter-chip:hover { background: #ddeef0; border-color: var(--blue); color: var(--blue); }
.chip-no { color: #8aa8ad; font-size: 12px; margin-right: 6px; }

/* 読み終えた章はチップ全体を緑にする（小さな✓だけでは区別しづらいため） */
.chapter-chip-done { background: #e7f4e7; border-color: #a8d5a8; color: #235c23; }
.chapter-chip-done:hover { background: #d8eed8; border-color: #2c7a2c; color: #1a4a1a; }
.chapter-chip-done .chip-no { color: #6ba46b; }

/* 現在の章は読了の有無より優先して表示する */
.chapter-chip-current,
.chapter-chip-done.chapter-chip-current {
  background: var(--blue); border-color: var(--blue); color: #fff; font-weight: bold;
}
.chapter-chip-current:hover,
.chapter-chip-done.chapter-chip-current:hover { background: var(--blue); color: #fff; }
.chapter-chip-current .chip-no,
.chapter-chip-done.chapter-chip-current .chip-no { color: #c6dfe3; }

.chip-done { font-size: 12.5px; font-weight: bold; margin-left: 6px; }
.chapter-chip-done .chip-done { color: #2c7a2c; }
.chapter-chip-current .chip-done { color: #c4e8c4; }

.lesson-strip { align-items: center; margin-top: 8px; }
.lesson-chip {
  display: inline-block; white-space: nowrap; text-decoration: none;
  font-size: 13px; line-height: 1.5; color: #2f5860; background: #fff;
  border: 1px solid #d8e7ea; border-radius: 6px; padding: 5px 11px;
  transition: background .15s, border-color .15s, color .15s;
}
.lesson-chip:hover { background: #ddeef0; border-color: var(--blue); color: var(--blue); }

/* 読了したレッスンも同じ緑で揃える */
.lesson-chip-done { background: #e7f4e7; border-color: #a8d5a8; color: #235c23; }
.lesson-chip-done:hover { background: #d8eed8; border-color: #2c7a2c; color: #1a4a1a; }

/* 現在のレッスンは読了の有無より優先 */
.lesson-chip-current,
.lesson-chip-done.lesson-chip-current {
  background: var(--navy); border-color: var(--navy); color: #fff; font-weight: bold;
}
.lesson-chip-current:hover,
.lesson-chip-done.lesson-chip-current:hover { background: var(--navy); color: #fff; }
.lesson-progress { font-size: 12.5px; color: #667; margin-left: auto; white-space: nowrap; padding-left: 12px; }

/* 本文下の章移動 */
.lesson-bottomnav { margin: 24px 0 0; }
.bottomnav-label { font-size: 12.5px; color: #667; margin: 0 0 7px; }

/* 全レッスンの目次（折りたたみ・本文の下） */
.lesson-fulltoc {
  background: #fff; border: 1px solid var(--border); border-radius: 8px; margin: 20px 0;
}
.lesson-fulltoc > summary {
  cursor: pointer; padding: 12px 16px; font-size: 13.5px; color: var(--blue); list-style: none;
}
.lesson-fulltoc > summary::-webkit-details-marker { display: none; }
.lesson-fulltoc > summary::before { content: "▸ "; }
.lesson-fulltoc[open] > summary::before { content: "▾ "; }
.fulltoc-body {
  padding: 0 16px 16px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 4px 20px;
}
.fulltoc-title {
  font-size: 12.5px; font-weight: bold; color: var(--navy);
  margin: 10px 0 4px; padding-bottom: 3px; border-bottom: 1px solid var(--border);
}
.fulltoc-list { list-style: none; padding: 0; margin: 0; }
.fulltoc-list li { display: flex; gap: 4px; align-items: baseline; padding: 2px 0; }
.fulltoc-list a { font-size: 12.5px; line-height: 1.5; color: #334; text-decoration: none; flex: 1; }
.fulltoc-list a:hover { color: var(--blue); text-decoration: underline; }
.toc-no { color: #7fa2a8; font-size: 11.5px; margin-right: 3px; }
.toc-done { color: #2c7a2c; font-size: 11px; }
.toc-foot { grid-column: 1 / -1; font-size: 12px; margin: 14px 0 0; }

/* 教材本文 */
.lesson-meta { font-size: 13px; color: #667; }
.lesson-meta a { color: var(--blue); }
.lesson-body {
  background: #fff; border: 1px solid var(--border); border-radius: 8px;
  padding: 32px 36px; font-size: 17px; line-height: 2.15; color: #23383d;
  letter-spacing: .02em;
}
@media (max-width: 700px) { .lesson-body { padding: 22px 18px; font-size: 16.5px; line-height: 2.05; } }

/* 見出し */
.lesson-body h2 {
  color: var(--navy); font-size: 21px; line-height: 1.55;
  margin: 44px 0 18px; padding: 12px 16px;
  background: #e8f2f4; border-left: 5px solid var(--blue); border-radius: 0 6px 6px 0;
}
.lesson-body h2:first-child { margin-top: 0; }
.lesson-body h3 {
  color: var(--navy); font-size: 18px; line-height: 1.65;
  margin: 34px 0 12px; padding-left: 13px; border-left: 4px solid #9ecdd4;
}
.lesson-body p { margin: 0 0 20px; }

/* 黄色マーカー（**太字**）。表の中では下線なしにする */
.lesson-body strong.marker {
  font-weight: bold;
  background: linear-gradient(transparent 62%, #ffe9a8 62%);
  padding: 0 2px;
}
.lesson-body td strong.marker, .lesson-body th strong.marker { background: none; padding: 0; }

/* 箇条書き（チェック風のアイコン） */
.lesson-body ul { list-style: none; margin: 0 0 18px; padding-left: 4px; }
.lesson-body ul > li {
  position: relative; padding-left: 28px; margin-bottom: 12px;
}
.lesson-body ul > li::before {
  content: ""; position: absolute; left: 4px; top: .62em;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--blue);
}

/* 番号付きリスト（丸数字） */
.lesson-body ol { list-style: none; counter-reset: li; margin: 0 0 18px; padding-left: 4px; }
.lesson-body ol > li {
  position: relative; padding-left: 34px; margin-bottom: 13px;
}
.lesson-body ol > li::before {
  counter-increment: li; content: counter(li);
  position: absolute; left: 0; top: .18em;
  width: 22px; height: 22px; line-height: 22px; text-align: center;
  background: var(--blue); color: #fff; border-radius: 50%;
  font-size: 12.5px; font-weight: bold;
}

/* 表 */
.table-scroll { overflow-x: auto; margin: 0 0 20px; }
.lesson-body table {
  border-collapse: collapse; width: 100%; font-size: 15.5px; line-height: 1.8;
  min-width: 480px;
}
.lesson-body th, .lesson-body td {
  border: 1px solid #d6e5e8; padding: 10px 12px; text-align: left; vertical-align: top;
}
.lesson-body th { background: var(--navy); color: #fff; font-weight: bold; }
.lesson-body tr:nth-child(even) td { background: #f4f9fa; }

/* 引用 */
.lesson-body blockquote {
  margin: 0 0 18px; padding: 14px 18px 14px 44px; position: relative;
  background: #f0f7f8; border-radius: 6px; color: #2f5058;
}
.lesson-body blockquote::before {
  content: "“"; position: absolute; left: 12px; top: 2px;
  font-size: 34px; color: #aed3d8; line-height: 1;
}
.lesson-body blockquote p { margin: 0; }

/* 図版 */
.lesson-figure { margin: 26px 0 30px; text-align: center; }
.lesson-figure img {
  max-width: 100%; height: auto; display: block; margin: 0 auto;
  border: 1px solid var(--border); border-radius: 8px; background: #fff;
}
.lesson-figure figcaption {
  font-size: 13.5px; line-height: 1.7; color: #667; margin-top: 10px;
  text-align: center;
}
@media (max-width: 700px) { .lesson-figure { margin: 20px -4px 24px; } }

/* ボックス（このレッスンで学ぶこと／まとめ） */
.lesson-box { border-radius: 8px; padding: 20px 24px 8px; margin: 0 0 30px; border: 2px solid; }
.lesson-box .box-title {
  font-weight: bold; font-size: 17px; margin: 0 0 14px; padding-bottom: 10px;
  border-bottom: 1px dashed currentColor;
}
.lesson-box p { margin: 0 0 12px; }
.lesson-box ul { margin-bottom: 12px; }
.box-learn { border-color: #b3dae0; background: #f0f9fa; }
.box-learn .box-title { color: var(--blue); }
.box-learn ul > li::before { background: var(--blue); }
.box-summary { border-color: #b9dcc0; background: #f3faf4; margin-top: 32px; }
.box-summary .box-title { color: #2c7a2c; }
.box-summary ul > li::before { background: #2c7a2c; }
.lesson-body pre.code-block {
  background: #f3f7f8; border: 1px solid var(--border); border-radius: 6px;
  padding: 14px 16px; margin: 0 0 16px; font-size: 13.5px; line-height: 1.7;
  white-space: pre-wrap; word-break: break-word;
  font-family: Consolas, "BIZ UDGothic", Meiryo, monospace;
}
/* 読了の記録は補助操作。次へ進む導線より控えめにする */
.lesson-actions {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  flex-wrap: wrap; margin: 22px 0 10px; font-size: 14px;
}
.read-toggle {
  background: #fff; color: #55747c; border: 1px solid var(--border);
  border-radius: 20px; padding: 7px 20px; font-size: 14px; cursor: pointer;
}
.read-toggle:hover { border-color: var(--blue); color: var(--blue); }
.read-done { color: #2d8a5e; font-weight: bold; }
.read-undo {
  background: none; border: none; padding: 0; cursor: pointer;
  font-size: 13px; color: #7fa2a8; text-decoration: underline;
}

/* 前後のレッスン移動。教材内で最も目立つ操作にする */
.lesson-nav { display: flex; gap: 16px; margin: 10px 0 28px; align-items: stretch; }
.navbtn {
  flex: 1 1 0; display: flex; flex-direction: column; gap: 4px;
  padding: 16px 22px; border-radius: 10px; text-decoration: none;
  border: 2px solid var(--blue); min-width: 0;
}
.navbtn-label { font-size: 15px; font-weight: bold; }
.navbtn-title {
  font-size: 13px; line-height: 1.5; opacity: .9;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.navbtn-prev { background: #fff; color: var(--blue); align-items: flex-start; text-align: left; }
.navbtn-prev:hover { background: #e8f2f4; }
.navbtn-next { background: var(--blue); color: #fff; align-items: flex-end; text-align: right; }
.navbtn-next:hover { background: var(--navy); }
@media (max-width: 600px) {
  .lesson-nav { flex-direction: column-reverse; }
  .navbtn { padding: 14px 18px; }
}
.btn-link { display: inline-block; text-decoration: none; }
.btn-big { font-size: 17px; padding: 14px 40px; }
.btn-sub { background: #7fa2a8; }

/* 受験画面 */
/* 問題文・選択肢・解説のコピーを抑止（AIへの丸投げ対策）。
   スクリーンショットは防げないため、あくまで手軽な複製の抑止 */
.no-copy, .no-copy * {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.no-copy input, .no-copy button { -webkit-user-select: auto; user-select: auto; }
@media print {
  .no-copy { display: none !important; }
  .no-copy-print-note { display: block !important; }
}
.no-copy-print-note { display: none; }
.lesson-notice { font-size: 12.5px; color: #778; margin: 14px 0 0; }

.exam-topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  background: var(--navy); color: #fff; border-radius: 8px;
  padding: 10px 18px; margin-bottom: 16px; font-size: 14px;
}
.exam-topbar strong { font-size: 18px; }
.timer-warn { color: #ffb4b4; }
.save-status { font-size: 12px; opacity: .8; }
.q-no { font-weight: bold; color: var(--blue); margin: 0 0 4px; }
.q-body { font-size: 16px; margin: 0 0 16px; }
.q-choices { display: flex; flex-direction: column; gap: 8px; }
.q-choice {
  display: flex; gap: 10px; align-items: flex-start;
  border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; cursor: pointer;
}
.q-choice:hover { background: #f0f7f8; }
.q-choice input { margin-top: 4px; }
.exam-nav-buttons { display: flex; justify-content: space-between; margin: 16px 0; }
.q-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; }
.q-cell {
  border: 1px solid var(--border); background: #fff; border-radius: 6px;
  padding: 6px 0; cursor: pointer; font-size: 13px;
}
.q-cell.answered { background: var(--blue); color: #fff; border-color: var(--blue); }
.exam-notice { font-size: 12.5px; color: #667; margin: 14px 0 0; }

/* 結果画面 */
.result-card { text-align: center; }
.result-verdict { font-size: 32px; font-weight: bold; margin: 4px 0; }
.result-pass .result-verdict { color: #2c7a2c; }
.result-fail .result-verdict { color: #b00000; }
.result-score { font-size: 16px; }
.result-date { color: #667; font-size: 13px; }
.notice { background: #fff7e0; border: 1px solid #eddc9a; border-radius: 6px; padding: 8px 12px; font-size: 14px; }
.wrong-item { border-top: 1px solid var(--border); padding: 14px 0; }
.wrong-given { color: #b00000; margin: 2px 0; }
.wrong-correct { color: #2c7a2c; font-weight: bold; margin: 2px 0; }
.wrong-exp { background: #f0f7f8; border-radius: 6px; padding: 10px 12px; font-size: 14px; }
.history-title { margin-top: 20px; font-size: 15px; color: var(--blue); }

/* 販売LP
   デザインは2026-08-13にユーザー承認：ヒーローを全幅の色面にし、
   セクション間の余白を120pxまで広げた「上品・ミニマル」方針。
   見出しだけ Noto Sans JP を使う（本文はUDフォントのまま＝読み間違い防止のため）。 */
.lp-title, .lp-section > h2, .lp-stat-num, .lp-badge {
  font-family: "Noto Sans JP", "UD Gothic Local", "BIZ UDPGothic", sans-serif;
}

/* ヒーロー: main.wrap（最大860px）の内側にありながら色面だけを画面いっぱいに広げる。
   幅そのものを 100vw にするとスクロールバーの幅だけ横にはみ出して
   スマホで本文が切れるため、背景は ::before の絶対配置で描く（レイアウト幅は変えない）。
   isolation: isolate で z-index: -1 をこの要素の中に閉じ込め、body の背景より前に出す */
.lp-hero {
  position: relative; isolation: isolate;
  text-align: center;
  margin: -24px 0 0;
  padding: 92px 0 112px;
  color: #fff;
}
.lp-hero::before {
  content: ""; position: absolute; top: 0; bottom: 0;
  left: 50%; transform: translateX(-50%);
  width: 100vw; z-index: -1;
  /* 左上の濃い青緑から右下の白へ向かう斜めのグラデーション。
     文字が乗る中央は濃さを保ち、明るくなるのは右下の角だけにしている
     （中央まで明るくすると白文字が読めなくなる） */
  background: linear-gradient(135deg,
      #0a3f4c 0%,
      var(--brand-dark) 34%,
      #166e88 68%,
      #6fb0c0 88%,
      #eaf4f6 100%);
}
.lp-hero > * { max-width: 760px; margin-left: auto; margin-right: auto; }
/* ヒーローの協会ロゴ。白抜き版なので濃い地の上でそのまま置ける */
.lp-logo { display: block; width: 118px; height: auto; margin: 0 auto 22px; }
.lp-badge {
  display: inline-block; background: none; color: #fff;
  border: 1px solid rgba(255, 255, 255, .45);
  font-size: 13px; padding: 5px 18px; letter-spacing: .08em;
}
.lp-title {
  /* 左右は auto のままにする（0にすると760pxの箱が左に寄って見出しがずれる） */
  font-size: 44px; color: #fff; margin: 22px auto 18px;
  letter-spacing: .02em; line-height: 1.35;
}
.lp-lead { font-size: 16px; line-height: 2; color: rgba(255, 255, 255, .88); }
.lp-lead strong { color: #fff; }
/* 開講予定は左右に罫線を伸ばして見出しのように見せる */
.lp-launch {
  color: #fff; font-weight: bold; font-size: 15px; letter-spacing: .08em;
  display: flex; align-items: center; gap: 16px; justify-content: center;
  max-width: 420px; margin: 30px auto 26px;
}
.lp-launch::before, .lp-launch::after {
  content: ""; flex: 1; height: 1px; background: rgba(255, 255, 255, .35);
}
/* margin: 0 にすると .lp-hero > * の中央寄せ（margin-left/right: auto）が
   打ち消され、760pxの箱が左に寄ってボタンがずれる。左右autoは残すこと */
.lp-hero .lp-cta { margin: 0 auto; }
.lp-hero .btn-big { background: #fff; color: var(--brand-dark); }
.lp-hero .btn-big:hover { background: #e8f2f4; }
.lp-sub { font-size: 13.5px; margin-top: 18px; }
.lp-hero .lp-sub a { color: rgba(255, 255, 255, .85); }

.lp-section { margin: 120px 0; }
.lp-section > h2 {
  font-size: 25px; color: var(--navy); text-align: center; margin-bottom: 10px;
  letter-spacing: .02em;
}
/* 見出しの下の短い罫線。面を増やさずに区切りを作る */
.lp-section > h2::after {
  content: ""; display: block; width: 40px; height: 2px;
  background: var(--brand); margin: 16px auto 0;
}
.lp-checks { list-style: none; padding: 0; max-width: 640px; margin: 0 auto; }
.lp-checks li {
  background: #fff; border: 1px solid var(--border); border-radius: 8px;
  padding: 12px 16px 12px 42px; margin-bottom: 8px; position: relative;
}
.lp-checks li::before {
  content: "✓"; position: absolute; left: 16px; color: var(--blue); font-weight: bold;
}
/* 各項目に添える現状の困りごと（「こんな方のための検定です」の2行目） */
.lp-check-sub { display: block; margin-top: 4px; font-size: 13.5px; color: #556; }
/* カードは1枚240px確保する。これより狭い画面では1列に落として、
   スマホで1行あたり十数文字しか入らない細い段組みになるのを防ぐ */
.lp-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.lp-cols .card { margin: 0; }
.lp-cols h3 { color: var(--blue); font-size: 15.5px; margin: 0 0 8px; }
.lp-cols p { font-size: 14px; margin: 0; }
.lp-note { font-size: 13.5px; color: #556; text-align: center; margin-top: 12px; }
.lp-table th { width: 34%; }
.lp-steps { counter-reset: step; list-style: none; padding: 0; max-width: 640px; margin: 0 auto; }
.lp-steps li {
  background: #fff; border: 1px solid var(--border); border-radius: 8px;
  padding: 14px 16px 14px 56px; margin-bottom: 10px; position: relative;
}
.lp-steps li::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 14px; top: 14px;
  width: 28px; height: 28px; line-height: 28px; text-align: center;
  background: var(--blue); color: #fff; border-radius: 50%; font-weight: bold;
}
/* よくある質問。details/summary の開閉なのでJavaScriptを使わない
   （スマホで一覧を短く保つため、初期状態はすべて閉じている） */
.lp-faq { max-width: 680px; margin: 0 auto; }
.lp-faq .faq {
  background: #fff; border: 1px solid var(--border);
  border-radius: 8px; margin-bottom: 8px;
}
.lp-faq summary {
  list-style: none; cursor: pointer; font-weight: bold; color: var(--navy);
  padding: 14px 42px 14px 36px; position: relative; font-size: 15px;
}
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::before {
  content: "Q"; position: absolute; left: 16px; color: var(--blue); font-weight: bold;
}
/* 右端の山型。開くと上向きに回る */
.lp-faq summary::after {
  content: ""; position: absolute; right: 18px; top: 50%;
  width: 9px; height: 9px; border-right: 2px solid var(--blue); border-bottom: 2px solid var(--blue);
  transform: translateY(-70%) rotate(45deg); transition: transform .15s;
}
.lp-faq .faq[open] summary::after { transform: translateY(-25%) rotate(-135deg); }
.lp-faq summary:hover { background: #f7fbfb; border-radius: 8px; }
.lp-faq .faq-a { padding: 0 18px 14px 36px; font-size: 14.5px; }
.btn-disabled { background: #93aeb3; cursor: default; pointer-events: auto; }
.btn.btn-disabled:hover { background: #93aeb3; }
.lp .btn { margin: 4px 6px; }
.lp-center { text-align: center; }
.lp-cta { text-align: center; margin: 20px 0 10px; }
.btn-big { padding: 15px 30px; font-size: 16.5px; font-weight: bold; display: inline-block; text-decoration: none; }
.lp-hero .btn-big { box-shadow: 0 2px 0 rgba(15, 84, 98, .25); }
.btn-sub {
  background: #fff; color: var(--blue); border: 1px solid var(--blue);
  padding: 14px 28px; font-size: 15px; display: inline-block; text-decoration: none; border-radius: 6px;
}
.btn-sub:hover { background: #e8f2f4; }
.btn-sub.btn-disabled { background: #fff; color: #74959b; border-color: #bcd2d6; }
.btn-sub.btn-disabled:hover { background: #fff; }

/* 数字の要約バー。ヒーローの下端に食い込ませ、色面と白地の境界を橋渡しする */
.lp-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  position: relative; z-index: 1;
  margin: -56px auto 0;
  background: #fff; border: 1px solid var(--border);
  box-shadow: 0 2px 16px rgba(15, 84, 98, .1);
}
.lp-stat {
  padding: 24px 12px; text-align: center;
  border-left: 1px solid var(--border);
}
.lp-stat:first-child { border-left: none; }
.lp-stat-num { display: block; color: var(--navy); font-weight: bold; font-size: 21px; line-height: 1.3; }
.lp-stat-label { display: block; font-size: 12.5px; color: #556; margin-top: 6px; }

/* 章一覧のレッスン数 */
/* 「（6レッスン）」が語中で折り返さないようにする */
.lp-lessons { font-weight: normal; font-size: 12.5px; color: #55747c; white-space: nowrap; }

/* 画像（認定証・教材のサンプル） */
.lp-figure { margin: 20px auto 0; max-width: 720px; text-align: center; }
.lp-figure img {
  max-width: 100%; height: auto; border: 1px solid var(--border);
  border-radius: 8px; background: #fff; box-shadow: 0 2px 8px rgba(15, 84, 98, .08);
}
.lp-figure figcaption { font-size: 13px; color: #556; margin-top: 8px; }
/* 縦長の図版（教材の図）は幅を抑えて置く */
.lp-figure-tall { max-width: 420px; }
/* 見出しの後半。広い画面では ── でつなぎ、狭い画面では改行して1段下げる
   （スマホで「公式講座の内容 ── 全7章40レッスン」が中途半端に折り返すのを防ぐ） */
.h2-sub::before { content: " ── "; }
/* 金額はカッコごと次の行へ送る（「19,800」と「円・税込」が分かれるのを防ぐ） */
.btn-price { white-space: nowrap; }
/* 画面に出るボタン名など、途中で切れると別物に見える語をひとかたまりで送る
   （例: 会費ペイの「会員登録用URL送信」ボタン） */
.nowrap { white-space: nowrap; }
/* カッコ書きは「（」の前で改行させる。入りきらないときはカッコごと次の行へ落ちる
   （行末に「（自宅のパソコン」のような半端な折り返しが出るのを防ぐ） */
.paren { display: inline-block; }
/* スマホでだけ効かせる改行。広い画面では無視される */
.br-sp { display: none; }
/* 日本語を文節で折り返す（Chrome 119以降・未対応ブラウザは従来どおりの折り返し）。
   「身につけ／た力を」のように語の途中で切れるのを防ぐ */
.lp-title, .lp-lead, .lp-section > h2, .lp-check-sub, .lp-figure figcaption,
.lp-cols h3, .lp-cols p, .lp-faq summary, .lp-faq .faq-a, .lp-note, .lp-center,
.lp-checks li, .lp-steps li, .lp-table th, .lp-table td, .lp-stat-label {
  word-break: auto-phrase;
}
/* 教材の図版を4点並べる。狭い画面では1列に落ちる */
.lp-figure-lead { margin-top: 20px; }
.lp-figure-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px; max-width: 720px; margin: 12px auto 0; align-items: start;
}
.lp-figure-grid .lp-figure { margin: 0; max-width: none; }
.lp-figure-grid figcaption { font-size: 12.5px; }

/* サンプル問題 */
.lp-quiz { max-width: 680px; margin: 0 auto; }
.lp-q {
  background: #fff; border: 1px solid var(--border); border-radius: 8px;
  padding: 18px 18px 14px; margin-bottom: 14px;
}
.lp-q-meta { font-size: 12.5px; color: #55747c; margin: 0 0 8px; }
.lp-q-text { font-size: 15.5px; font-weight: bold; color: var(--navy); margin: 0 0 12px; line-height: 1.7; }
.lp-q-no {
  display: inline-block; background: var(--navy); color: #fff; font-size: 12.5px;
  border-radius: 4px; padding: 1px 8px; margin-right: 8px; vertical-align: 2px;
}
.lp-q-choices { list-style: none; padding: 0; margin: 0; }
.lp-q-choices li { margin-bottom: 8px; }
.lp-choice {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: #fafcfc; border: 1px solid var(--border); border-radius: 6px;
  padding: 12px 14px; font-size: 14.5px; line-height: 1.6; color: var(--text);
  font-family: inherit;
}
.lp-choice:hover:not(:disabled) { border-color: var(--blue); background: #e8f2f4; }
.lp-choice:disabled { cursor: default; opacity: .85; }
.lp-choice.is-correct {
  border-color: #4c9c72; background: #edf7f1; color: #17583a; font-weight: bold; opacity: 1;
}
.lp-choice.is-wrong { border-color: #cf8e8a; background: #fbeeed; color: #8d2b24; }
.lp-q-result {
  border-top: 1px solid var(--border); margin-top: 12px; padding-top: 12px;
}
.lp-q-verdict { font-weight: bold; margin: 0 0 6px; font-size: 15px; }
.lp-q-verdict.is-correct { color: #17583a; }
.lp-q-verdict.is-wrong { color: #8d2b24; }
.lp-q-explanation { font-size: 14px; margin: 0; color: #333; }

/* 追従CTA（狭い画面のみ） */
.lp-sticky { display: none; }
.lp-sticky-text { font-size: 13px; color: #fff; }

/* 目的と作問体制・検定データのページ */
.lp-doc h1 { text-align: center; font-size: 25px; margin-bottom: 10px; }
.lp-doc-lead { text-align: center; font-size: 14.5px; color: #445; max-width: 620px; margin: 0 auto 8px; }
.lp-doc .lp-section > h2 { font-size: 19px; }
.lp-list { max-width: 680px; margin: 0 auto; padding-left: 22px; }
.lp-list li { margin-bottom: 6px; font-size: 14.5px; }
.lp-doc .lp-section > p { font-size: 14.5px; }
.lp-empty {
  background: #fff; border: 1px dashed #bcd2d6; border-radius: 8px;
  padding: 20px; text-align: center; font-size: 14.5px; color: #445;
}
.lp-back { text-align: center; margin-top: 36px; font-size: 14px; }

@media (max-width: 900px) {
  .lp-section { margin: 76px 0; }
  .lp-section > h2 { font-size: 21px; }
}
@media (max-width: 700px) {
  .lp-title { font-size: 27px; }
  .lp-hero { padding: 44px 0 84px; }
  .lp-logo { width: 96px; margin-bottom: 18px; }
  .lp-lead { font-size: 15px; }
  .lp-launch { margin: 24px auto 20px; }
  .lp-stats { grid-template-columns: repeat(2, 1fr); margin-top: -48px; }
  /* 2列になるので、3枚目・4枚目の上に境界線を足し、左端の縦線は消す */
  .lp-stat:nth-child(odd) { border-left: none; }
  .lp-stat:nth-child(n+3) { border-top: 1px solid var(--border); }
  .lp-stat { padding: 18px 10px; }
  .lp-table th, .lp-table td { display: block; width: auto; }
  .lp-table th { border-bottom: none; }
  .btn-big { width: 100%; padding: 15px 16px; font-size: 15.5px; }
  .btn-sub { width: 100%; text-align: center; }
  /* 追従CTAが特商法・規約のリンクに重なって押せなくならないよう、
     フッターの下に追従CTAの高さ分の余白をとる（LPのみ） */
  .has-sticky-cta .site-footer { padding-bottom: 88px; }
  .lp-sticky {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    background: rgba(15, 84, 98, .96); padding: 10px 14px;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, .15);
  }
  .lp-sticky .btn {
    margin: 0; white-space: nowrap; text-decoration: none;
    background: var(--cta); color: #1f2937; font-weight: bold;
  }
  .lp-sticky .btn:hover { background: var(--cta-dark); }
  /* 見出しの後半（── の後ろ）は改行して1段下げる */
  .h2-sub { display: block; font-size: .86em; margin-top: 4px; }
  .h2-sub::before { content: none; }
  .br-sp { display: inline; }
  /* 申し込みボタンは金額を必ず次の行へ落とす（ユーザー指示・2026-08-14） */
  .btn-price { display: block; font-size: .93em; margin-top: 2px; }
}

/* 認定証のダウンロード（氏名入り／共有用） */
.cert-downloads { display: flex; gap: 16px; flex-wrap: wrap; margin: 14px 0 6px; }
.cert-group {
  flex: 1 1 280px; border: 1px solid var(--border); border-radius: 8px;
  padding: 14px 16px; background: #fafcfc;
}
.cert-group-title { font-weight: bold; color: var(--navy); margin: 0 0 4px; font-size: 15px; }
.cert-group-note { font-size: 13px; color: #55747c; margin: 0 0 10px; }
.cert-group .btn { margin-right: 8px; }

/* 特商法・規約 */
.law-table th { width: 30%; }
.terms h2 { font-size: 16.5px; margin: 22px 0 8px; }
.terms ol, .terms ul { padding-left: 22px; }
.terms li { margin-bottom: 6px; }
.terms-date { color: #667; font-size: 13px; }
.terms-hr { border: none; border-top: 2px solid var(--border); margin: 40px 0; }
.footer-links a { color: #445; margin-right: 14px; font-size: 13px; }

/* 管理画面 */
.admin-meta { display: flex; gap: 14px; align-items: center; font-size: 14px; color: #445; }
.admin-nav { display: flex; flex-wrap: wrap; gap: 14px; margin: 12px 0 18px; font-size: 14px; }
.admin-nav a { color: var(--blue); }
.admin-table { font-size: 13.5px; }
.admin-table th { width: auto; white-space: nowrap; }
.admin-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.btn-sm { font-size: 13px; padding: 6px 14px; }
.form-inline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.form-inline input[type="text"] {
  padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 14px; min-width: 240px;
}
.small { font-size: 12px; color: #667; }
.copy-url {
  background: #f3f7f8; border: 1px solid var(--border); border-radius: 6px;
  padding: 10px 12px; font-size: 13px; word-break: break-all; font-family: Consolas, monospace;
}

/* 認定検証 */
.verify-result { text-align: center; }
.verify-verdict { font-size: 22px; font-weight: bold; margin: 4px 0 12px; }
.verify-ok { border-color: #b4dcb4; }
.verify-ok .verify-verdict { color: #2c7a2c; }
.verify-warn { border-color: #eddc9a; }
.verify-warn .verify-verdict { color: #a97a00; }
.verify-ng { border-color: #eab8b8; }
.verify-ng .verify-verdict { color: #b00000; }
.verify-result .table { text-align: left; }
.roster-table th { width: auto; }