/* 一般公開版の共通コンポーネント（指示書 §13） */

/* ───────────── ヘッダー ───────────── */

.site-header {
  background: var(--public-surface);
  border-bottom: 1px solid var(--public-line);
}
.site-header .container {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; min-height: 64px;
}
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  min-width: max-content; color: var(--public-text); text-decoration: none;
  line-height: 1; letter-spacing: -.02em;
}
.brand .mark { width: 36px; height: 36px; flex: 0 0 auto; }
.brand-wordmark {
  display: inline-flex; align-items: baseline; white-space: nowrap;
  font-size: 18px; font-weight: 800; line-height: 1; letter-spacing: -.03em;
}
.brand-prefix { color: var(--public-text); font-family: var(--font-num); letter-spacing: -.01em; margin-right: .14em; }
.brand-focus { color: var(--public-primary); }
.brand-tail { color: var(--public-text); }
.header-nav { display: flex; align-items: center; gap: 20px; font-size: 14px; }
.header-nav a { color: var(--public-text-sub); text-decoration: none; }
.header-nav a:hover { color: var(--public-primary); }
.header-nav .pro-link { color: var(--public-text-sub); font-size: 13px; }

@media (max-width: 767px) {
  .header-nav .hide-sp { display: none; }
  .brand { gap: 7px; }
  .brand .mark { width: 32px; height: 32px; }
  .brand-wordmark { font-size: 16px; }
}
/* タブレット幅（768〜1023px）ではリンクが入りきらず横にはみ出していたので、優先度の低いものを隠す */
@media (max-width: 1023px) {
  .header-nav { gap: 16px; }
  .header-nav .pro-link, .header-nav a[href="#about"] { display: none; }
}

/* ───────────── ボタン ───────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 28px;
  font-family: inherit; font-size: 16px; font-weight: 700; line-height: 1.4;
  border: 2px solid transparent; border-radius: var(--radius-control);
  cursor: pointer; text-decoration: none;
  transition: background-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.btn-primary { background: var(--public-primary); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--public-primary-hover); }
.btn-secondary { background: var(--public-surface); color: var(--public-primary); border-color: var(--public-primary); }
.btn-secondary:hover:not(:disabled) { background: var(--public-primary-soft); }
.btn-text { background: transparent; color: var(--public-text-sub); border-color: transparent; padding: 12px 16px; }
.btn-text:hover:not(:disabled) { background: var(--public-surface-soft); color: var(--public-text); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn .icon { width: 20px; height: 20px; }

@media (max-width: 767px) {
  .btn-block-sp { width: 100%; }
}

/* ───────────── 入力 ───────────── */

.field { margin-bottom: 24px; }
.field label {
  display: flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 700; margin-bottom: 8px;
}
.req {
  font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  background: var(--public-primary-soft); color: var(--public-primary-hover);
}
.opt {
  font-size: 11px; font-weight: 500; padding: 2px 8px; border-radius: 999px;
  background: var(--public-bg); color: var(--public-text-sub); border: 1px solid var(--public-line);
}
.field input, .field select {
  display: block; width: 100%; min-height: 48px; padding: 12px 14px;
  font-family: inherit; font-size: 16px; color: var(--public-text);
  background: var(--public-surface); border: 1px solid var(--public-line);
  border-radius: var(--radius-control);
}
.field .help { margin-top: 6px; font-size: 13px; color: var(--public-text-sub); }
.field .err { margin-top: 6px; font-size: 13px; color: var(--public-red); }
.field.has-error input, .field.has-error select { border-color: var(--public-red); }

/* チェックボックス群 */
.choices { display: grid; gap: 10px; }
.choice {
  display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px;
  background: var(--public-surface); border: 1px solid var(--public-line);
  border-radius: var(--radius-control); cursor: pointer;
  min-height: 44px;
}
.choice:hover { border-color: var(--public-primary); background: var(--public-primary-soft); }
.choice input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--public-primary); flex: none; }
.choice .label { font-size: 15px; font-weight: 500; }
.choice .note { display: block; font-size: 13px; color: var(--public-text-sub); font-weight: 400; }

/* ───────────── カード ───────────── */

.card {
  background: var(--public-surface); border: 1px solid var(--public-line);
  border-radius: var(--radius-card); padding: 24px; box-shadow: var(--shadow-card);
}
.card-soft { background: var(--public-surface-soft); box-shadow: none; }
.card-green { background: var(--public-green-soft); border-color: #C6ECDA; box-shadow: none; }
.card-yellow { background: var(--public-yellow-soft); border-color: #F3E0AE; box-shadow: none; }
.card-blue { background: var(--public-blue-soft); border-color: #CFE2FB; box-shadow: none; }
.card-red { background: var(--public-red-soft); border-color: #F6CFCF; box-shadow: none; }

.grid { display: grid; gap: 20px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1023px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) { .grid-3, .grid-2 { grid-template-columns: 1fr; } }

/* ───────────── pill / タグ ───────────── */

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 14px; border-radius: 999px;
  font-size: 13px; font-weight: 700; line-height: 1.6; white-space: nowrap;
}
.pill-green { background: var(--public-green-soft); color: #14764C; }
.pill-blue { background: var(--public-blue-soft); color: #1B5FBF; }
.pill-yellow { background: var(--public-yellow-soft); color: #9A6B06; }
.pill-red { background: var(--public-red-soft); color: #A62F2F; }
.pill-gray { background: var(--public-bg); color: var(--public-text-sub); border: 1px solid var(--public-line); }
.pill .icon { width: 14px; height: 14px; }

/* ───────────── アイコン ───────────── */

.icon { width: 24px; height: 24px; flex: none; stroke-width: 1.8; }

/* ───────────── 進捗（ステッパー） ───────────── */

.stepper { display: flex; align-items: center; gap: 8px; margin-bottom: 32px; font-size: 13px; }
.stepper .step { display: flex; align-items: center; gap: 8px; color: var(--public-text-sub); }
.stepper .num {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 999px;
  background: var(--public-line); color: var(--public-text-sub); font-weight: 700; font-size: 13px;
}
.stepper .step.current .num { background: var(--public-primary); color: #fff; }
.stepper .step.done .num { background: var(--public-green); color: #fff; }
.stepper .step.current { color: var(--public-text); font-weight: 700; }
.stepper .bar { flex: 1; height: 2px; background: var(--public-line); }
@media (max-width: 767px) {
  .stepper .name { display: none; }
}

/* ───────────── 進捗バー ───────────── */

.progress-track {
  height: 10px; border-radius: 999px; background: var(--public-line); overflow: hidden;
}
.progress-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--public-blue), var(--public-green));
  transition: width .4s ease;
}

/* ───────────── フッター ───────────── */

.site-footer {
  margin-top: 72px; padding: 28px 0 56px;
  border-top: 1px solid var(--public-line);
  color: var(--public-text-sub); font-size: 12px; line-height: 1.8;
}
.site-footer p { margin-bottom: 6px; }

/* チップ型の複数選択（よく使われる場面） */
.field-label { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; margin-bottom: 8px; }
.chip-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-choice {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; min-height: 40px;
  border: 1px solid var(--public-line); border-radius: 999px; background: var(--public-surface);
  font-size: 14px; font-weight: 500; cursor: pointer;
}
.chip-choice input { width: 16px; height: 16px; margin: 0; accent-color: var(--public-primary); }
.chip-choice:hover { border-color: var(--public-primary); }
.chip-choice.on, .chip-choice:has(input:checked) { background: var(--public-primary-soft); border-color: var(--public-primary); color: var(--public-primary-hover); }
.field .hint { margin-top: 10px; padding: 12px 14px; font-size: 13px; line-height: 1.7; border-radius: var(--radius-control); }

/* ステップ2: 必ず調べる質問と、場面から組んだ質問 */
.reco-card { padding: 16px 20px; }
.reco-label { font-size: 12px; font-weight: 700; color: var(--public-text-sub); letter-spacing: .04em; }
.reco-query { font-weight: 700; margin-top: 4px; }
.scene-queries { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.scene-queries li {
  padding: 10px 14px; border-radius: var(--radius-control); font-size: 14px;
  background: var(--public-primary-soft); border: 1px solid #BFE9E5;
}
.scene-queries li.custom { background: var(--public-blue-soft); border-color: #CFE2FB; }
.scene-queries li::before { content: 'AIに聞く言葉: '; color: var(--public-text-sub); font-size: 12px; }
.chip-rec { color: var(--public-green); font-weight: 700; font-size: 11px; }

/* 横棒グラフ（charts.js） */
.bar-chart { display: block; max-width: 100%; height: auto; font-family: inherit; }
.bar-chart .grid { stroke: var(--public-line); stroke-width: 1; }
.bar-chart .bar { fill: #C9D6DF; }
.bar-chart .bar.own { fill: var(--public-primary); }
.bar-chart .lbl { font-size: 12px; fill: var(--public-text-sub); }
.bar-chart .lbl.strong { fill: var(--public-text); font-weight: 700; }
.bar-chart .val { font-size: 12px; fill: var(--public-text); }
.chart-card h3 { margin-bottom: 8px; }
.chart-card .sub { margin-top: 8px; }

/* 聞き方の切り替え */
.style-toggle { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.style-toggle .chip-choice { flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 14px; border-radius: var(--radius-control); }
.style-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.style-toggle small { font-size: 12px; color: var(--public-text-sub); font-weight: 400; }

/* ヘルプボット */
.hb-btn {
  position: fixed; right: 20px; bottom: 20px; z-index: 50;
  min-height: 48px; padding: 0 20px; border: 0; border-radius: 999px;
  background: var(--public-primary); color: #fff; font: inherit; font-weight: 700; font-size: 15px;
  box-shadow: 0 8px 24px rgba(8,126,139,.3); cursor: pointer;
}
.hb-btn:hover { background: var(--public-primary-hover); }
.hb-panel {
  position: fixed; right: 20px; bottom: 80px; z-index: 50;
  width: min(380px, calc(100vw - 32px)); max-height: min(560px, calc(100vh - 120px));
  display: flex; flex-direction: column;
  background: var(--public-surface); border: 1px solid var(--public-line); border-radius: 16px;
  box-shadow: 0 16px 48px rgba(23,50,77,.18); overflow: hidden;
}
.hb-panel[hidden] { display: none !important; }
.hb-head { position: relative; padding: 14px 44px 10px 16px; border-bottom: 1px solid var(--public-line); background: var(--public-surface-soft); }
.hb-title { font-weight: 700; font-size: 15px; }
.hb-sub { font-size: 11px; color: var(--public-text-sub); line-height: 1.5; margin-top: 2px; }
.hb-close { position: absolute; right: 8px; top: 8px; width: 32px; height: 32px; border: 0; background: transparent; font-size: 20px; color: var(--public-text-sub); cursor: pointer; border-radius: 8px; }
.hb-log { flex: 1; overflow-y: auto; padding: 12px 14px; display: grid; gap: 10px; align-content: start; }
.hb-msg { max-width: 88%; padding: 10px 12px; border-radius: 14px; font-size: 14px; line-height: 1.7; }
.hb-user { justify-self: end; background: var(--public-primary-soft); border-bottom-right-radius: 4px; }
.hb-bot { justify-self: start; background: var(--public-bg); border: 1px solid var(--public-line); border-bottom-left-radius: 4px; }
.hb-src-label { font-size: 11px; color: var(--public-text-sub); margin-top: 8px; }
.hb-sources { margin: 2px 0 0; padding-left: 1.1em; font-size: 13px; }
.hb-contact { font-size: 12px; margin-top: 8px; }
.hb-hints { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 10px; }
.hb-hint { border: 1px solid var(--public-line); background: var(--public-surface); border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 12px; cursor: pointer; }
.hb-hint:hover { border-color: var(--public-primary); }
.hb-form { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--public-line); }
.hb-form input { flex: 1; min-height: 42px; padding: 8px 12px; border: 1px solid var(--public-line); border-radius: 10px; font: inherit; font-size: 14px; }
.hb-send { min-height: 42px; padding: 0 14px; border: 0; border-radius: 10px; background: var(--public-primary); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.hb-send:disabled { opacity: .5; }
@media (max-width: 767px) { .hb-btn { right: 12px; bottom: 12px; } .hb-panel { right: 12px; bottom: 70px; } }
@media print { .hb-btn, .hb-panel { display: none !important; } }
.footer-tm { font-size: 11px; color: var(--public-text-sub); margin-top: 8px; }

/* ═════════ ログインの窓 ═════════ */
.login-modal {
  border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100dvh; overflow: visible;
  width: min(420px, calc(100vw - 32px));
}
.login-modal::backdrop {
  background: rgba(23, 34, 46, .55);
  backdrop-filter: blur(6px) saturate(.9); -webkit-backdrop-filter: blur(6px) saturate(.9);
  animation: lm-fade .22s ease-out;
}
.login-modal[open] .lm-card { animation: lm-pop .28s cubic-bezier(.2, .9, .3, 1.15); }
html.lm-open { overflow: hidden; }
@keyframes lm-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes lm-pop { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .login-modal::backdrop, .login-modal[open] .lm-card { animation: none; } }

.lm-card {
  position: relative; background: var(--public-surface); border-radius: 24px; padding: 34px 28px 22px;
  box-shadow: 0 30px 80px rgba(10, 30, 50, .35), 0 2px 0 rgba(255, 255, 255, .6) inset;
  max-height: calc(100dvh - 32px); overflow-y: auto;
}
.lm-card::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 110px; border-radius: 24px 24px 0 0;
  background: radial-gradient(120% 90% at 50% 0%, var(--public-primary-soft), transparent 70%); pointer-events: none;
}
.lm-close {
  position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 999px; border: 0;
  background: var(--public-bg); color: var(--public-text-sub); font-size: 20px; line-height: 1; cursor: pointer; z-index: 1;
}
.lm-close:hover { background: var(--public-line); color: var(--public-text); }
.lm-head { position: relative; text-align: center; margin-bottom: 22px; }
.lm-mark {
  width: 52px; height: 52px; margin: 0 auto 12px; border-radius: 16px; display: grid; place-items: center;
  background: #fff; border: 1px solid var(--public-line); box-shadow: 0 10px 24px rgba(8, 126, 139, .16);
}
.lm-mark img { width: 38px; height: 38px; display: block; }
.lm-head h2 { font-size: 21px; letter-spacing: .02em; }
.lm-sub { font-size: 13px; color: var(--public-text-sub); margin-top: 4px; }

.lm-icons { display: flex; justify-content: center; gap: 22px; margin: 4px 0 18px; }
.lm-icon { display: flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none; color: var(--public-text); }
.lm-circle {
  width: 62px; height: 62px; border-radius: 999px; display: grid; place-items: center;
  box-shadow: 0 6px 16px rgba(20, 50, 80, .14); transition: transform .15s ease, box-shadow .15s ease;
}
.lm-icon:hover .lm-circle, .lm-icon:focus-visible .lm-circle { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(20, 50, 80, .22); }
.lm-icon:focus-visible { outline: none; }
.lm-icon:focus-visible .lm-circle { outline: 3px solid var(--public-primary); outline-offset: 3px; }
.lm-label { font-size: 12px; font-weight: 600; }
.lm-google .lm-circle { background: #fff; border: 1px solid var(--public-line); }
.lm-google svg { width: 28px; height: 28px; }
.lm-line .lm-circle { background: #06C755; }
.lm-yahoo .lm-circle { background: #FF0033; }
.lm-glyph { color: #fff; font-weight: 800; font-size: 14px; letter-spacing: .02em; }
.lm-yahoo .lm-glyph { font-size: 20px; font-style: italic; }

.lm-or { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--public-text-sub); margin: 0 0 14px; }
.lm-or::before, .lm-or::after { content: ''; flex: 1; height: 1px; background: var(--public-line); }
.lm-form { display: grid; gap: 10px; }
.lm-form input {
  width: 100%; min-height: 50px; border: 1px solid var(--public-line); border-radius: 14px; padding: 0 16px; font: inherit; font-size: 16px;
  background: var(--public-bg); transition: border-color .15s, background .15s, box-shadow .15s;
}
.lm-form input:focus { outline: none; border-color: var(--public-primary); background: #fff; box-shadow: 0 0 0 4px var(--public-primary-soft); }
.lm-submit { width: 100%; min-height: 50px; border-radius: 14px; font-size: 15px; }
.lm-err { font-size: 13px; color: #A62F2F; }
.lm-note { font-size: 12px; color: var(--public-text-sub); line-height: 1.6; text-align: center; }
.lm-sent { text-align: center; padding: 6px 0 10px; }
.lm-sent-icon { width: 58px; height: 58px; margin: 0 auto 10px; border-radius: 999px; display: grid; place-items: center; font-size: 26px; background: var(--public-green-soft); color: #14764C; }
.lm-sent-title { font-size: 17px; font-weight: 700; }
.lm-legal { font-size: 11px; color: var(--public-text-sub); text-align: center; margin-top: 16px; line-height: 1.6; }
.lm-legal a { color: var(--public-primary-hover); }
@media (max-width: 420px) {
  .lm-card { padding: 30px 20px 18px; border-radius: 20px; }
  .lm-icons { gap: 16px; }
  .lm-circle { width: 56px; height: 56px; }
}
/* Yahoo! JAPAN ID のテキストリンク形式ボタン（デザインガイドライン準拠: #ff0033 / #ffffff、ゴシック体、改行しない、周囲10px以上） */
.lm-textbtns { display: grid; gap: 10px; margin: 0 0 16px; padding: 0 10px; }
.lm-textbtn {
  display: flex; align-items: center; justify-content: center; min-height: 46px; border-radius: 12px; margin: 0;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; font-weight: 700; font-size: 15px;
  white-space: nowrap; text-decoration: none;
}
.lm-yahoo-btn { background: #ff0033; color: #ffffff; }
.lm-yahoo-btn:hover { filter: brightness(.95); }

/* ═════════ 用語の説明（？ボタン） ═════════ */
.help-btn {
  display: inline-grid; place-items: center; width: 18px; height: 18px; margin-left: 5px; padding: 0; vertical-align: middle; flex: none;
  border-radius: 999px; border: 1.5px solid currentColor; background: transparent; color: var(--public-text-sub);
  font: 700 11px/1 var(--font); cursor: pointer; opacity: .75; transition: opacity .15s, color .15s, background .15s;
}
.help-btn:hover, .help-btn[aria-expanded="true"] { opacity: 1; color: var(--public-primary); background: var(--public-primary-soft); }
.help-btn:focus-visible { outline: 3px solid var(--public-primary); outline-offset: 2px; opacity: 1; }
.help-pop {
  position: absolute; z-index: 1000; padding: 14px 36px 14px 16px; border-radius: 14px; background: #17324D; color: #fff;
  box-shadow: 0 16px 40px rgba(10, 30, 50, .3); font-size: 13px; line-height: 1.7; text-align: left;
}
.help-pop .help-term { font-weight: 800; margin-bottom: 4px; font-size: 14px; }
.help-pop .help-def { color: #E3ECF3; }
.help-pop .help-close { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border: 0; border-radius: 999px; background: rgba(255,255,255,.12); color: #fff; cursor: pointer; font-size: 14px; line-height: 1; }
.help-pop.help-sheet { position: fixed; left: 12px; right: 12px; bottom: 12px; top: auto; width: auto; padding: 18px 44px 20px 18px; font-size: 14px; }
@media print { .help-btn, .help-pop { display: none !important; } }
.brand, .header-nav a { white-space: nowrap; }

/* note（開発の記録）への案内。トップの「よくある質問」の下と、About の「声で直していきます」に置く */
.note-card {
  display: flex; align-items: center; gap: 16px; margin-top: 28px; padding: 18px 20px;
  background: var(--public-surface); border: 1px solid var(--public-line); border-radius: var(--radius-card);
  color: var(--public-text); text-decoration: none; text-align: left;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.note-card:hover { border-color: var(--public-primary); box-shadow: var(--shadow-card); }
.note-card-mark {
  flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 12px;
  background: var(--public-text); color: #fff; font-weight: 700; font-size: 15px; letter-spacing: .02em;
}
.note-card-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.note-card-text strong { font-size: 16px; line-height: 1.5; }
.note-card-text .sub { line-height: 1.6; }
.note-card > .icon { flex: none; color: var(--public-primary); }
@media (max-width: 767px) {
  .note-card { gap: 12px; padding: 14px 16px; }
  .note-card-mark { width: 44px; height: 44px; font-size: 13px; }
  .note-card-text strong { font-size: 15px; }
}
/* 幅の狭いスマホ（380px以下）: ロゴと「チェックする」が並ぶと横にはみ出していたので、少しずつ詰める */
@media (max-width: 380px) {
  .site-header .container { gap: 10px; }
  .brand { gap: 6px; }
  .brand .mark { width: 28px; height: 28px; }
  .brand-wordmark { font-size: 14.5px; }
  .header-nav { gap: 12px; font-size: 13px; }
}
/* 320px 前後では「チェックする」まで入りきらないので隠す（本文にも入口がある） */
@media (max-width: 340px) {
  .header-nav a[href="/check.html"] { display: none; }
}