/* 画面ごとのレイアウト。確認幅は 1440 / 1024 / 768 / 390（指示書 §14） */

.page { padding: 40px 32px 0; }
.narrow { max-width: 760px; }

/* トップの note 案内：FAQ のすぐ下に置くので上の余白は詰める（幅はほかのセクションと同じ container） */
.section.note-home { padding-top: 0; }
.section { padding: 56px 0; }
.section-tight { padding: 36px 0 0; }
.section-title { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.section-title .icon { color: var(--public-primary); }
.section-lead { margin: -12px 0 20px; }
.icon-sm { width: 16px; height: 16px; }
.icon-lg { width: 32px; height: 32px; }

/* ───────────── トップ ───────────── */

.hero {
  background: linear-gradient(160deg, var(--public-blue-soft) 0%, var(--public-surface-soft) 55%, var(--public-bg) 100%);
  padding: 72px 0 64px;
}
.hero-grid {
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center;
}
.hero-lead { margin: 20px 0 32px; font-size: 17px; color: var(--public-text-sub); }
.hero-note {
  display: flex; align-items: center; gap: 6px;
  margin-top: 16px; font-size: 13px; color: var(--public-text-sub);
}

.preview-card { padding: 28px; }
.preview-label { font-size: 13px; color: var(--public-text-sub); }
.preview-score {
  font-size: 64px; font-weight: 700; line-height: 1.1; color: var(--public-primary);
  font-variant-numeric: tabular-nums;
}
.preview-tier { font-size: 14px; font-weight: 700; margin-bottom: 20px; }
.preview-rows { display: grid; gap: 10px; border-top: 1px solid var(--public-line); padding-top: 16px; }
.preview-row { display: flex; align-items: center; justify-content: space-between; font-size: 14px; font-weight: 700; }
.preview-caption { margin-top: 10px; text-align: right; font-size: 12px; color: var(--public-text-sub); }

.value-card .icon-lg { color: var(--public-primary); margin-bottom: 12px; }
.value-card h3 { margin-bottom: 8px; }

.chips { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 32px 0 0; }

.faq { border-bottom: 1px solid var(--public-line); padding: 16px 0; }
.faq summary { font-weight: 700; cursor: pointer; }
.faq p { margin-top: 10px; }

.cta-band {
  display: flex; flex-direction: column; align-items: center; gap: 24px;
  text-align: center; padding: 48px 32px;
  background: var(--public-primary-soft); border-radius: var(--radius-card);
}

/* ───────────── 入力ステッパー ───────────── */

.step-title { font-size: clamp(22px, 4vw, 30px); margin-bottom: 8px; }
.step-title:focus { outline: none; }
.step-lead { margin-bottom: 20px; }
.step-panel { animation: fade .2s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.step-actions {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--public-line);
}

.advanced { margin-top: 20px; }
.advanced summary { font-size: 14px; color: var(--public-primary); cursor: pointer; }

.summary { display: grid; gap: 14px; }
.summary-row { display: grid; grid-template-columns: 120px 1fr; gap: 16px; align-items: baseline; }
.summary-row .k { font-size: 13px; color: var(--public-text-sub); }
.summary-row .v { font-weight: 500; overflow-wrap: anywhere; }
.confirm-note { display: flex; gap: 8px; align-items: flex-start; margin-top: 20px; }

/* ───────────── 診断中 ───────────── */

.running { max-width: 640px; margin: 24px auto 0; }
.running-title { font-size: 24px; margin-bottom: 24px; }
.stages { list-style: none; padding: 0; margin: 28px 0; display: grid; gap: 14px; }
.stages li { display: flex; align-items: center; gap: 12px; color: var(--public-text-sub); font-size: 15px; }
.stages .dot {
  width: 10px; height: 10px; border-radius: 999px; background: var(--public-line); flex: none;
}
.stages li.current { color: var(--public-text); font-weight: 700; }
.stages li.current .dot { background: var(--public-primary); box-shadow: 0 0 0 4px var(--public-primary-soft); }
.stages li.done .dot { background: var(--public-green); }

.tip { display: flex; gap: 12px; align-items: flex-start; }
.tip .icon { color: var(--public-blue); }
.tip p { font-size: 14px; }

.failure { display: flex; gap: 16px; align-items: flex-start; max-width: 640px; margin: 24px auto 0; }
.failure .icon-lg { color: var(--public-red); }
.failure h2 { font-size: 20px; margin-bottom: 6px; }

/* ───────────── 結果 ───────────── */

.summary-head {
  background: linear-gradient(140deg, var(--public-blue-soft), var(--public-surface-soft));
  border: 1px solid var(--public-line); border-radius: var(--radius-card);
  padding: 32px; margin-top: 8px;
}
.crumbs { margin-bottom: 20px; }
.score-block { display: flex; gap: 40px; align-items: center; flex-wrap: wrap; }
.score-label { font-size: 14px; color: var(--public-text-sub); }
.score {
  font-size: clamp(56px, 12vw, 72px); font-weight: 700; line-height: 1;
  color: var(--public-primary); font-variant-numeric: tabular-nums;
}
.score-max { margin-top: 4px; }
.score-words { flex: 1; min-width: 260px; }
.score-summary { font-size: 18px; font-weight: 700; margin: 10px 0 12px; }
.basis summary { font-size: 13px; color: var(--public-primary); cursor: pointer; }
.basis ul { margin: 10px 0 0; padding-left: 1.2em; }
.query-note { margin-top: 20px; }

.stat-card .stat-label { font-size: 13px; color: var(--public-text-sub); }
.stat-card .stat-value { font-size: 32px; font-weight: 700; line-height: 1.3; }

.strength-card { display: flex; gap: 12px; align-items: flex-start; }
.strength-card .icon { color: var(--public-green); }

.actions { display: grid; gap: 16px; }
.action-card { border-left: 4px solid var(--public-primary); }
.action-head { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.action-card h3 { margin-bottom: 8px; }
.action-effect {
  display: flex; gap: 8px; align-items: center; margin-top: 12px;
  font-size: 14px; font-weight: 700; color: var(--public-green);
}
.action-basis { margin-top: 14px; }
.action-basis summary { font-size: 12px; color: var(--public-text-sub); cursor: pointer; }

.channel-card .channel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px;
}

.detail-block {
  margin-top: 20px; background: var(--public-surface);
  border: 1px solid var(--public-line); border-radius: var(--radius-card); padding: 18px 24px;
}
.detail-block summary { font-weight: 700; cursor: pointer; }
.detail-block .competitors { margin: 16px 0 0; padding-left: 1.4em; }
.detail-block .competitors li { padding: 4px 0; }
.detail-block .competitors .count { margin-left: 10px; }
.detail-block .citations { list-style: none; margin: 16px 0 0; padding: 0; }
.detail-block .citations li {
  display: block; padding: 10px 0; border-bottom: 1px solid var(--public-line);
}
.detail-block .cite-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.detail-block .cite-pages { list-style: none; margin: 4px 0 0; padding: 0; font-size: 12px; }
.detail-block .cite-pages li { padding: 1px 0; border: 0; }
.detail-block .cite-pages a { color: var(--public-text-sub); overflow-wrap: anywhere; }
.detail-block .citations .domain { overflow-wrap: anywhere; }

.next-actions { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; padding-top: 40px; }

/* ───────────── レスポンシブ ───────────── */

@media (max-width: 1023px) {
  .hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .hero { padding: 48px 0; }
}

@media (max-width: 767px) {
  .page { padding: 24px 16px 0; }
  .hero { padding: 36px 0 40px; }
  .section { padding: 40px 0; }
  .summary-head { padding: 24px 20px; }
  .score-block { gap: 20px; }
  .summary-row { grid-template-columns: 1fr; gap: 2px; }
  .step-actions { flex-direction: column-reverse; align-items: stretch; }
  .step-actions .btn { width: 100%; }
  .next-actions .btn { width: 100%; }
  .cta-band { padding: 32px 20px; }
  .detail-block .citations li { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* ───────────── リングゲージ ───────────── */

.gauge-wrap { position: relative; width: 148px; height: 148px; flex: none; }
.gauge { width: 100%; height: 100%; transform: rotate(-90deg); }
.gauge-track { fill: none; stroke: var(--public-line); stroke-width: 11; }
.gauge-fill {
  fill: none; stroke: var(--public-primary); stroke-width: 11; stroke-linecap: round;
  transition: stroke-dashoffset .9s cubic-bezier(.22,.61,.36,1);
}
.gauge-num {
  position: absolute; inset: 0; display: grid; place-content: center; text-align: center;
  font-size: 40px; font-weight: 700; line-height: 1; color: var(--public-primary);
  font-variant-numeric: tabular-nums;
}
.gauge-num small { display: block; margin-top: 4px; font-size: 12px; font-weight: 500; color: var(--public-text-sub); }

.preview-gauge { position: relative; width: 132px; height: 132px; margin: 4px 0 12px; }
.preview-gauge .gauge-num { font-size: 36px; }

/* ───────────── トップの安心表示・価格 ───────────── */

.hero-sub { margin-top: 14px; font-size: 14px; color: var(--public-text-sub); }
.assurances {
  display: flex; flex-wrap: wrap; gap: 10px 20px; list-style: none; padding: 0; margin: 14px 0 0;
  font-size: 13px; color: var(--public-text-sub);
}
.assurances li { display: flex; align-items: center; gap: 6px; }
.assurances .icon { color: var(--public-primary); }

.price-card { text-align: left; }
.price-card h2 { font-size: 22px; margin-bottom: 8px; }
.price-points { list-style: none; padding: 0; margin: 18px 0 22px; display: grid; gap: 10px; font-size: 14px; }
.price-points li { display: flex; align-items: flex-start; gap: 8px; }
.price-points .icon { color: var(--public-green); margin-top: 4px; }
.price-note { margin-top: 12px; }

/* ───────────── 結果: 質問カード ───────────── */

.qcards { display: grid; gap: 12px; }
.qcard {
  background: var(--public-surface); border: 1px solid var(--public-line);
  border-radius: var(--radius-card); padding: 18px 20px; border-left: 4px solid var(--public-line);
}
.qcard-introduced { border-left-color: var(--public-green); }
.qcard-candidate { border-left-color: var(--public-blue); }
.qcard-notfound { border-left-color: var(--public-yellow); }
.qcard-failed { border-left-color: var(--public-line); }
.qcard-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.qcard-head h3 { font-size: 15px; }
.qcard-channels {
  display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 12px 0 0; font-size: 12px;
}
.qcard-channels li {
  padding: 3px 10px; border-radius: 999px; border: 1px solid var(--public-line); color: var(--public-text-sub);
}
.qcard-channels li.on { background: var(--public-green-soft); border-color: #C6ECDA; color: #14764C; font-weight: 700; }
.qcard-channels li.na { opacity: .5; text-decoration: line-through; }

/* ───────────── 結果: スコアと打ち手 ───────────── */

.score-block { display: flex; gap: 32px; align-items: center; flex-wrap: wrap; }
.score-words { flex: 1; min-width: 260px; }
.score-summary { font-size: 22px; font-weight: 700; margin: 6px 0 8px; line-height: 1.5; }
.tier-good { color: #14764C; }
.tier-fair, .tier-weak { color: var(--public-primary-hover); }
.tier-poor { color: #9A6B06; }

.stat-card .icon-lg { color: var(--public-primary); margin-bottom: 10px; }

.action-card { border-left: 4px solid var(--public-primary); }
.action-head { display: flex; gap: 14px; align-items: flex-start; }
.action-num {
  display: grid; place-items: center; width: 30px; height: 30px; flex: none;
  border-radius: 999px; background: var(--public-primary); color: #fff; font-weight: 700; font-size: 14px;
}
.action-title h3 { margin-bottom: 6px; }
.action-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0 44px; }
.action-effect { margin-left: 44px; }
.action-basis { margin: 10px 0 0 44px; }

.export-card {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  background: var(--public-primary-soft); border-color: #BFE9E5; box-shadow: none;
}
.export-card h3 { margin-bottom: 4px; }

@media (max-width: 767px) {
  .gauge-wrap { width: 128px; height: 128px; }
  .gauge-num { font-size: 34px; }
  .action-meta, .action-effect, .action-basis { margin-left: 0; }
  .qcard-head { flex-direction: column; gap: 8px; }
  .export-card .btn { width: 100%; }
}

.qcard-channels li.skip { border-style: dashed; color: var(--public-text-sub); opacity: .75; }
.score-facts { font-weight: 700; margin-top: 8px; }

/* ───────────── 写真（フリー素材。淡いフェードで馴染ませる） ───────────── */

.hero-visual { position: relative; }
.hero-photo {
  display: block; width: 100%; aspect-ratio: 4 / 5; max-height: 540px; object-fit: cover;
  border-radius: 24px;
  /* 下に向けて白へ溶かし、カードが載る余白を作る */
  -webkit-mask-image: linear-gradient(180deg, #000 55%, rgba(0,0,0,.35) 82%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 55%, rgba(0,0,0,.35) 82%, transparent 100%);
}
.hero-visual .preview-card {
  position: absolute; left: -24px; bottom: 24px; width: min(320px, 88%);
  box-shadow: var(--shadow-hover);
}
.hero-visual .preview-caption { position: absolute; right: 8px; bottom: 0; margin: 0; }

.genre-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 32px; }
.genre-tile {
  position: relative; display: block; overflow: hidden; border-radius: var(--radius-card);
  aspect-ratio: 4 / 3; color: #fff; text-decoration: none; background: var(--public-primary-soft);
  box-shadow: var(--shadow-card);
}
.genre-tile img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s ease;
}
.genre-tile:hover img { transform: scale(1.04); }
.genre-tile::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(23,50,77,0) 35%, rgba(23,50,77,.78) 100%);
}
.genre-tile .tile-text { position: absolute; left: 20px; right: 20px; bottom: 18px; z-index: 1; }
.genre-tile h3 { font-size: 18px; color: #fff; display: flex; align-items: center; gap: 8px; }
.genre-tile h3 .icon { width: 20px; height: 20px; }
.genre-tile p { font-size: 13px; color: rgba(255,255,255,.88); margin-top: 4px; }
.genre-tile.tile-plain {
  background: linear-gradient(150deg, var(--public-primary) 0%, #0B5E6A 100%);
}
.genre-tile.tile-plain::after { display: none; }
.genre-tile.tile-plain .tile-mark {
  position: absolute; right: -10px; top: -10px; width: 46%; height: 46%; color: rgba(255,255,255,.14);
}

.cta-band {
  position: relative; overflow: hidden; isolation: isolate;
}
.cta-band .band-photo {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2;
}
.cta-band::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  /* 青空の写真に青緑を薄く重ね、文字の載る中央だけ白く抜く */
  background:
    radial-gradient(60% 90% at 50% 55%, rgba(247,250,252,.92) 0%, rgba(247,250,252,.78) 55%, rgba(247,250,252,.35) 100%),
    linear-gradient(180deg, rgba(8,126,139,.18), rgba(8,126,139,.32));
}
.cta-band h2, .cta-band .btn { position: relative; }

@media (max-width: 1023px) {
  .genre-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-visual .preview-card { left: 16px; }
  .price-card { grid-template-columns: 1fr; }
  .price-photo { display: none; }
}
@media (max-width: 767px) {
  .genre-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .genre-tile h3 { font-size: 15px; }
  .genre-tile p { display: none; }
  .genre-tile .tile-text { left: 14px; right: 14px; bottom: 12px; }
  .hero-photo { aspect-ratio: 4 / 3; }
  .hero-visual .preview-card { position: static; width: auto; margin-top: -48px; }
  .cta-band::before { background: rgba(221,245,243,.92); }
}

/* ───────────── 打ち手の手順・例文・進め方 ───────────── */

.action-steps { margin: 14px 0 0 44px; }
.action-steps-label, .action-example-label {
  font-size: 12px; font-weight: 700; color: var(--public-text-sub); letter-spacing: .04em;
}
.action-steps ol { margin: 6px 0 0; padding-left: 1.4em; display: grid; gap: 6px; font-size: 14px; }
.action-steps li::marker { color: var(--public-primary); font-weight: 700; }
.action-example {
  margin: 12px 0 0 44px; padding: 12px 16px; border-radius: var(--radius-control);
  background: var(--public-surface-soft); border-left: 3px solid var(--public-primary);
}
.action-example p { font-size: 14px; margin-top: 4px; }

.plan { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.plan-col {
  background: var(--public-surface); border: 1px solid var(--public-line);
  border-radius: var(--radius-card); padding: 18px 20px; border-top: 4px solid var(--public-line);
}
.plan-week { border-top-color: var(--public-green); }
.plan-month { border-top-color: var(--public-blue); }
.plan-quarter { border-top-color: var(--public-yellow); }
.plan-label { font-weight: 700; font-size: 14px; margin-bottom: 8px; }
.plan-col ul { margin: 0; padding-left: 1.2em; font-size: 14px; display: grid; gap: 6px; }

.qcard-channels .ratio { margin-left: 6px; opacity: .8; font-weight: 500; }

@media (max-width: 767px) {
  .action-steps, .action-example { margin-left: 0; }
  .plan { grid-template-columns: 1fr; }
}

/* 価格カードの添え写真 */
.price-card { display: grid; grid-template-columns: 1.4fr .8fr; gap: 28px; align-items: center; overflow: hidden; }
.price-photo img {
  display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 16px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
}
.genre-tile .tile-text h3 { font-size: 17px; }
@media (max-width: 767px) { .genre-tile .tile-text h3 { font-size: 15px; } }

/* ───────────── 横長ヒーロー（青空の街） ───────────── */

.pc-only { display: inline; }
.sp-only { display: none; }

.hero-wide { position: relative; overflow: hidden; isolation: isolate; padding: 80px 0 72px; min-height: 560px; display: flex; align-items: center; }
.hero-wide .hero-bg, .hero-wide .hero-bg img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 70%; z-index: -2;
}
.hero-wide::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  /* 左の文章の下だけ白く、右は空を見せる。下端は次のセクションへ溶かす */
  background:
    linear-gradient(90deg, rgba(247,250,252,.97) 0%, rgba(247,250,252,.92) 38%, rgba(247,250,252,.55) 62%, rgba(247,250,252,.15) 100%),
    linear-gradient(180deg, rgba(247,250,252,0) 70%, var(--public-bg) 100%);
}
.hero-wide .hero-grid { grid-template-columns: 1.1fr .9fr; align-items: center; }
.hero-wide .hero-copy { max-width: 560px; }
.hero-wide .hero-lead { margin: 18px 0 28px; }
.hero-wide .hero-preview { display: flex; justify-content: flex-end; }
.hero-wide .preview-card { width: min(340px, 100%); box-shadow: var(--shadow-hover); }
.hero-wide .preview-caption { text-align: right; margin-top: 8px; }

@media (max-width: 1023px) {
  .hero-wide { min-height: 0; padding: 56px 0 48px; }
  .hero-wide .hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .hero-wide .hero-preview { justify-content: flex-start; }
  .hero-wide::before {
    background:
      linear-gradient(180deg, rgba(247,250,252,.55) 0%, rgba(247,250,252,.92) 35%, rgba(247,250,252,.97) 100%);
  }
}
@media (max-width: 767px) {
  .pc-only { display: none; }
  .sp-only { display: inline; }
  .hero-wide { padding: 0 0 32px; }
  /* スマホは写真を上に帯で見せ、その下に文章 */
  .hero-wide .hero-bg, .hero-wide .hero-bg img { position: absolute; height: 240px; inset: 0 0 auto 0; object-position: center 60%; }
  .hero-wide::before {
    background: linear-gradient(180deg, rgba(247,250,252,0) 0%, rgba(247,250,252,0) 120px, rgba(247,250,252,.9) 220px, var(--public-bg) 240px);
  }
  .hero-wide .hero-grid { padding-top: 200px; gap: 20px; }
  .hero-wide h1 { font-size: 24px; line-height: 1.45; }
  .hero-wide .hero-lead { font-size: 15px; margin: 12px 0 20px; }
  .assurances { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; font-size: 12px; }
  .hero-wide .hero-preview { display: none; }   /* スマホでは結果イメージを省き、CTAを早く見せる */
  .hero-note { display: none; }
  .section { padding: 36px 0; }
  .section-title { font-size: 20px; }
  .value-card { padding: 18px; }
  .value-card .icon-lg { width: 26px; height: 26px; margin-bottom: 8px; }
  .value-card h3 { font-size: 16px; }
  .genre-grid { gap: 10px; }
  .genre-tile .tile-text { left: 12px; right: 12px; bottom: 10px; }
  .genre-tile .tile-text h3 { font-size: 14px; line-height: 1.35; gap: 6px; }
  .genre-tile h3 .icon { width: 16px; height: 16px; }
  .faq summary { font-size: 15px; }
  .price-card h2 { font-size: 19px; }
  .price-points { font-size: 13px; gap: 8px; }
  .cta-band h2 { font-size: 20px; }
  .site-footer { font-size: 11px; }
}

/* 後ろで定義した .price-card の2列指定が効いてしまうので、狭い幅では1列に戻す */
@media (max-width: 1023px) {
  .price-card { grid-template-columns: 1fr; }
  .price-photo { display: none; }
}
/* PCの見出しが3行に折れないよう、少し小さく・少し広く */
.hero-wide .hero-copy { max-width: 600px; }
.hero-wide h1 { font-size: clamp(26px, 2.5vw, 36px); }
@media (max-width: 767px) { .hero-wide h1 { font-size: 24px; } }

/* 公式サイト・GBP の確認 */
.facts-card h3 { margin-bottom: 10px; }
.facts-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14px; }
.fact { display: flex; gap: 10px; align-items: flex-start; }
.fact-mark { flex: none; width: 22px; height: 22px; border-radius: 999px; display: grid; place-items: center; font-size: 13px; font-weight: 700; }
.fact-ok .fact-mark { background: var(--public-green-soft); color: #14764C; }
.fact-ng .fact-mark { background: var(--public-yellow-soft); color: #9A6B06; }
.fact-info .fact-mark { background: var(--public-bg); color: var(--public-text-sub); border: 1px solid var(--public-line); }
.facts-url { margin-top: 10px; overflow-wrap: anywhere; font-size: 12px; }

/* 要点3つ */
.keypoints { display: grid; gap: 12px; }
.keypoint { display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: start; }
.kp-label { font-size: 12px; font-weight: 700; color: var(--public-primary); padding: 4px 0 0; }
.keypoint p { font-size: 15px; line-height: 1.8; }
@media (max-width: 767px) { .keypoint { grid-template-columns: 1fr; gap: 2px; } }

/* 履歴と比較 */
.hist { width: 100%; border-collapse: collapse; font-size: 14px; }
.hist th, .hist td { padding: 12px 14px; border-bottom: 1px solid var(--public-line); text-align: left; }
.hist th { font-size: 12px; color: var(--public-text-sub); background: var(--public-surface-soft); }
.hist .c { text-align: center; }
.claim-row { display: flex; gap: 10px; }
.claim-row input { flex: 1; min-height: 44px; padding: 10px 12px; border: 1px solid var(--public-line); border-radius: var(--radius-control); font: inherit; }
.cmp-title { font-weight: 700; font-size: 18px; }
.cmp-rate { display: flex; align-items: baseline; gap: 14px; margin: 14px 0 10px; }
.cmp-rate .prev { font-size: 28px; color: var(--public-text-sub); }
.cmp-rate .arrow { color: var(--public-text-sub); }
.cmp-rate .curr { font-size: 40px; font-weight: 700; color: var(--public-primary); }
.cmp-summary p { font-size: 14px; margin-bottom: 6px; }
.cmp-block { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--public-line); }
.cmp-block h3 { font-size: 15px; margin-bottom: 8px; }
.tbl-cmp { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl-cmp th, .tbl-cmp td { padding: 6px 8px; border-bottom: 1px solid var(--public-line); text-align: left; }
.tbl-cmp th { font-size: 12px; color: var(--public-text-sub); }
.tbl-cmp .c { text-align: center; }
.tbl-cmp .up { color: #14764C; font-weight: 700; }
.tbl-cmp .down { color: #9A6B06; font-weight: 700; }
@media (max-width: 767px) { .hist th:nth-child(3), .hist td:nth-child(3), .hist th:nth-child(5), .hist td:nth-child(5) { display: none; } .claim-row { flex-direction: column; } }

/* 外部からの掲載状況 */
.kind-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 10px; }
.mention-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; font-size: 14px; }
.mention-list li { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; padding: 6px 0; border-bottom: 1px solid var(--public-line); }
.mention-list .rank { width: 22px; color: var(--public-text-sub); font-size: 12px; }
.mention-list a { color: var(--public-text); flex: 1; min-width: 200px; overflow-wrap: anywhere; }
.mention-list .kind { font-size: 12px; }
.history-note p { font-size: 15px; }

/* 5段階のレベル */
.level-wrap { flex: none; min-width: 200px; }
.level-kicker { font-size: 12px; color: var(--public-text-sub); }
.level-num { font-size: 56px; font-weight: 700; line-height: 1.1; color: var(--public-primary); }
.level-num small { font-size: 16px; font-weight: 500; color: var(--public-text-sub); margin-left: 6px; }
.level-meter { display: flex; gap: 6px; margin-top: 8px; }
.level-meter .seg { width: 34px; height: 12px; border-radius: 6px; background: var(--public-line); }
/* 判定の色: 1 赤 / 2 オレンジ / 3 黄 / 4 薄緑 / 5 緑 */
:root {
  --lv1: #D64545; --lv2: #E8792B; --lv3: #D99A18; --lv4: #6CBF84; --lv5: #22A06B;
}
.lv-1 { --lv: var(--lv1); } .lv-2 { --lv: var(--lv2); } .lv-3 { --lv: var(--lv3); } .lv-4 { --lv: var(--lv4); } .lv-5 { --lv: var(--lv5); } .lv-0 { --lv: var(--public-line); }
.level-num { color: var(--lv, var(--public-primary)); }
.level-meter .seg.on { background: var(--lv, var(--public-primary)); }
.level-meter .seg.range { background: transparent; border: 1px dashed var(--lv, var(--public-primary)); }
.level-5 { color: #14764C; } .level-4 { color: #3E8F5A; } .level-3 { color: #9A6B06; } .level-2 { color: #B85A17; } .level-1 { color: #A62F2F; }
.preview-level { margin: 6px 0 14px; }
.preview-level .level-num { font-size: 40px; }

.notice { margin-bottom: 20px; }
.notice p { font-size: 14px; }

/* ───────── AIに実際に聞いてみた答え ───────── */
.answer-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.answer-tab {
  border: 1px solid var(--public-line); background: var(--public-surface); color: var(--public-text-sub);
  border-radius: 999px; padding: 6px 16px; font: inherit; font-size: 14px; cursor: pointer;
}
.answer-tab.on { background: var(--public-primary-soft); border-color: var(--public-primary); color: var(--public-primary-hover); font-weight: 700; }
.answer-query { font-weight: 700; margin-bottom: 12px; }
.answer-grid { align-items: stretch; }
.answer-card { display: flex; flex-direction: column; gap: 10px; border-top: 4px solid var(--public-line); }
.answer-card.own-top { border-top-color: var(--lv5, #22A06B); }
.answer-card.own-candidate { border-top-color: var(--lv4, #6CBF84); }
.answer-card.own-mention { border-top-color: var(--lv3, #D99A18); }
.answer-card.own-absent, .answer-card.own-negative { border-top-color: var(--lv1, #D64545); }
.answer-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.answer-ai { font-weight: 700; font-size: 16px; }
.answer-line { font-size: 14px; line-height: 1.7; }
.answer-names { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0; }
.answer-names li { font-size: 12px; padding: 3px 10px; border-radius: 999px; background: var(--public-bg); border: 1px solid var(--public-line); }
.answer-names li.own { background: var(--public-green-soft); border-color: #C6ECDA; color: #14764C; font-weight: 700; }
.answer-names li.more { border-style: dashed; color: var(--public-text-sub); }
.answer-quote { margin: 0; padding: 10px 12px; background: var(--public-bg); border-left: 3px solid var(--public-line); border-radius: 8px; }
.answer-quote-label { display: block; font-size: 11px; color: var(--public-text-sub); margin-bottom: 4px; }
.answer-quote p { font-size: 13px; line-height: 1.7; }

/* ───────── 競合が選ばれている理由 ───────── */
.reasons-tbl, .media-tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.reasons-tbl th, .media-tbl th { text-align: left; font-size: 12px; color: var(--public-text-sub); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--public-line); }
.reasons-tbl td, .media-tbl td { padding: 10px; border-bottom: 1px solid var(--public-line); vertical-align: top; }
.reasons-tbl tr:last-child td, .media-tbl tr:last-child td { border-bottom: 0; }
.reasons-tbl .c { text-align: center; white-space: nowrap; }
.reason-topic { font-weight: 700; }
.reason-quote { font-size: 12px; color: var(--public-text-sub); line-height: 1.6; margin-top: 4px; }
.reason-who { font-size: 13px; }
.media-tbl .domain { font-weight: 600; word-break: break-all; }

/* ───────── 依頼文 ───────── */
.request-box { margin-top: 14px; border: 1px dashed var(--public-primary); border-radius: 12px; padding: 10px 14px; background: var(--public-primary-soft); }
.request-box summary { cursor: pointer; font-weight: 700; color: var(--public-primary-hover); display: flex; align-items: center; gap: 6px; font-size: 14px; }
.request-subject { font-size: 13px; font-weight: 700; margin: 10px 0 6px; }
.request-body {
  white-space: pre-wrap; word-break: break-word; font: inherit; font-size: 13px; line-height: 1.7;
  background: var(--public-surface); border: 1px solid var(--public-line); border-radius: 8px; padding: 12px; max-height: 320px; overflow: auto; margin: 0 0 10px;
}
.btn-sm { padding: 8px 14px; font-size: 13px; }

/* ───────── あなたの説明・前回比較・次の聞かれ方・質問カード ───────── */
.own-quotes { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.own-quotes li { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; }
.own-quotes li p { font-size: 14px; line-height: 1.7; }
.own-quotes li.neg p { color: #A62F2F; }
.previous h3 { margin-bottom: 10px; }
.previous-levels { display: flex; align-items: center; gap: 16px; margin-bottom: 10px; flex-wrap: wrap; }
.previous-lv { display: flex; flex-direction: column; }
.previous-lv strong { font-size: 22px; }
.previous-arrow { font-size: 22px; color: var(--public-text-sub); }
.previous p { font-size: 14px; line-height: 1.7; }
.next-questions { margin-top: 16px; }
.next-q-list { list-style: none; padding: 0; margin: 10px 0 14px; display: grid; gap: 8px; }
.next-q-list li { display: flex; flex-direction: column; gap: 2px; }
.qcard-others { font-size: 13px; margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.qcard-others-label { font-weight: 700; color: var(--public-text-sub); }
@media (max-width: 640px) {
  .reasons-tbl thead { display: none; }
  .reasons-tbl tr { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: 10px 0; border-bottom: 1px solid var(--public-line); }
  .reasons-tbl td { border: 0; padding: 0; }
  .reasons-tbl td:nth-child(1) { grid-column: 1 / -1; }
  .reasons-tbl td:nth-child(3) { grid-column: 1 / -1; order: 3; font-size: 12px; color: var(--public-text-sub); }
  .media-tbl th:nth-child(2), .media-tbl td:nth-child(2) { display: none; }
}
.action-card .request-box { margin-left: 44px; }
@media (max-width: 767px) { .action-card .request-box { margin-left: 0; } }
.action-card, .request-box, .request-body { min-width: 0; max-width: 100%; }
.request-subject, .request-body { overflow-wrap: anywhere; }
.actions { min-width: 0; }
.action-example p { overflow-wrap: anywhere; word-break: break-word; }
@media (max-width: 640px) {
  .reasons-tbl td.c { text-align: left; font-size: 13px; }
  .reasons-tbl td.c::before { content: 'AIの回答 '; color: var(--public-text-sub); font-size: 12px; }
}

/* ═════════ ダッシュボード（結果画面の上部） ═════════ */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.kpi { background: var(--public-surface); border: 1px solid var(--public-line); border-radius: var(--radius-card); padding: 16px 18px; box-shadow: var(--shadow-card); min-width: 0; }
.kpi-label { font-size: 13px; color: var(--public-text-sub); font-weight: 600; }
.kpi-value { font-size: 34px; font-weight: 700; line-height: 1.2; margin-top: 4px; color: var(--public-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-value small { font-size: 15px; color: var(--public-text-sub); font-weight: 600; margin-left: 2px; }
.kpi-name .kpi-value { font-size: 22px; line-height: 1.6; }
.kpi-bar { height: 8px; border-radius: 999px; background: var(--public-bg); border: 1px solid var(--public-line); overflow: hidden; margin-top: 10px; }
.kpi-bar span { display: block; height: 100%; background: var(--public-primary); border-radius: 999px; }
.kpis .kpi-main .kpi-bar span { background: var(--lv, var(--public-primary)); }
.kpi-name .kpi-bar span { background: #9AA9B8; }
.kpi-sub { font-size: 12px; color: var(--public-text-sub); margin-top: 8px; line-height: 1.5; }
.kpis .mstrip { grid-column: 1 / -1; }

.mstrip { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; align-items: center; background: var(--public-surface); border: 1px solid var(--public-line); border-radius: 12px; padding: 10px 16px; }
.mstrip-label { font-size: 13px; font-weight: 600; color: var(--public-text-sub); }
.mstrip-bar { display: flex; gap: 2px; height: 12px; border-radius: 999px; overflow: hidden; background: var(--public-bg); }
.mstrip-bar .seg { display: block; min-width: 6px; }
.mstrip-legend { grid-column: 2; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--public-text); }
.mstrip-legend .lg { display: inline-flex; align-items: center; gap: 5px; }
.mstrip-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.mstrip-bar .seg-top, .mstrip-legend .seg-top i { background: #22A06B; }
.mstrip-bar .seg-candidate, .mstrip-legend .seg-candidate i { background: #6CBF84; }
.mstrip-bar .seg-mention, .mstrip-legend .seg-mention i { background: #D99A18; }
.mstrip-bar .seg-negative, .mstrip-legend .seg-negative i { background: #D64545; }

.dash-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.dash-card h3 { font-size: 17px; margin-bottom: 4px; }
.dash-card > .sub { margin-bottom: 12px; }
.dash-foot { margin-top: 10px; font-size: 12px; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* 質問×AIの○×表 */
.matrix { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.matrix th, .matrix td { padding: 10px 8px; border-bottom: 1px solid var(--public-line); text-align: left; vertical-align: middle; }
.matrix thead th { font-size: 12px; color: var(--public-text-sub); font-weight: 600; background: var(--public-bg); }
.matrix thead th:first-child { border-top-left-radius: 8px; } .matrix thead th:last-child { border-top-right-radius: 8px; }
.matrix .c { text-align: center; width: 120px; }
.matrix th.q { font-weight: 500; }
.matrix .q-no { display: block; font-size: 11px; color: var(--public-primary); font-weight: 700; }
.matrix .q-text { display: block; font-size: 13px; line-height: 1.5; color: var(--public-text); }
.matrix .cell .sym { display: block; font-size: 22px; line-height: 1.1; font-weight: 700; }
.matrix .cell .cnt { display: block; font-size: 11px; color: var(--public-text-sub); }
.matrix .m-both { background: #E6F7EF; } .matrix .m-both .sym { color: #14764C; }
.matrix .m-once { background: #F1FAF3; } .matrix .m-once .sym { color: #3E9A5C; }
.matrix .m-none { background: #FDF0F0; } .matrix .m-none .sym { color: #C23B3B; }
.matrix .m-skip .sym { color: #A7B4C0; }
.matrix tfoot th, .matrix tfoot td { font-size: 13px; font-weight: 700; border-bottom: 0; background: var(--public-bg); }
.matrix tfoot .hit { color: #14764C; }
.matrix-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--public-text-sub); margin-top: 10px; }
.matrix-legend .lg { display: inline-flex; gap: 5px; align-items: center; }
.matrix-legend b { font-size: 15px; }
.matrix-legend .m-both b { color: #14764C; } .matrix-legend .m-once b { color: #3E9A5C; } .matrix-legend .m-none b { color: #C23B3B; } .matrix-legend .m-skip b { color: #A7B4C0; }

/* 候補との比較ランキング */
.ranking { width: 100%; border-collapse: collapse; font-size: 14px; }
.ranking th { font-size: 12px; color: var(--public-text-sub); font-weight: 600; text-align: left; padding: 8px; border-bottom: 1px solid var(--public-line); }
.ranking td { padding: 9px 8px; border-bottom: 1px solid var(--public-line); vertical-align: middle; }
.ranking .c { text-align: center; }
.ranking .nm { font-weight: 600; width: 30%; max-width: 260px; }
.ranking .nm span:first-child { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
.ranking .own-tag { display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 700; color: #fff; background: var(--public-primary); padding: 1px 8px; border-radius: 999px; vertical-align: middle; }
.ranking tr.own td { background: var(--public-primary-soft); }
.ranking .bar-cell { min-width: 150px; }
.ranking .bar-wrap { display: flex; align-items: center; gap: 8px; }
.ranking .rbar { flex: 1; height: 12px; background: var(--public-bg); border-radius: 999px; overflow: hidden; border: 1px solid var(--public-line); }
.ranking .rbar span { display: block; height: 100%; background: #9AA9B8; border-radius: 999px; }
.ranking tr.own .rbar span { background: var(--public-primary); }
.ranking .rval { font-size: 13px; font-weight: 700; min-width: 34px; text-align: right; }
.ranking .ai { width: 90px; font-size: 16px; }
.ranking .ai.on { color: var(--public-primary); }
.ranking .ai.off { color: #C9D3DC; }

@media (max-width: 1023px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .kpi { padding: 12px 14px; }
  .kpi-value { font-size: 26px; }
  .kpi-name .kpi-value { font-size: 17px; }
  .mstrip { grid-template-columns: 1fr; }
  .mstrip-legend { grid-column: 1; }
  .matrix .c { width: 58px; padding: 8px 4px; }
  .matrix thead th.c { font-size: 10px; }
  .matrix .q-text { font-size: 12px; }
  .ranking .ai { width: 40px; }
  .ranking th.ai { font-size: 10px; }
  .ranking .bar-cell { min-width: 110px; }
}
.ranking th.ai { font-size: 12px; }

.dash-card { min-width: 0; }
@media (max-width: 640px) {
  .matrix th.q { min-width: 110px; }
  .matrix .cell .sym { font-size: 18px; }
  .ranking .nm { width: auto; max-width: 120px; }
  .ranking .nm span:first-child { max-width: 88px; }
  .ranking th:nth-child(2) { font-size: 10px; }
}
@media (max-width: 640px) {
  .matrix th.q { min-width: 96px; }
  .matrix .c { width: 50px; }
  .ranking .ai { display: none; }
  .ranking .nm { max-width: 130px; }
  .ranking .nm span:first-child { max-width: 96px; }
  .dash-foot { display: none; }
}

/* ログイン: Google・LINE・Apple のボタン */
.social-login { display: grid; gap: 10px; margin: 18px 0 6px; }
.social-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; border-radius: 12px;
  font-weight: 700; font-size: 15px; text-decoration: none; border: 1px solid var(--public-line); background: #fff; color: #1F1F1F;
}
.social-btn:hover { box-shadow: var(--shadow-hover); }
.social-mark { width: 20px; height: 20px; flex: none; }
.social-google .social-mark { color: #4285F4; }
.social-line { background: #06C755; border-color: #06C755; color: #fff; }
.social-apple { background: #000; border-color: #000; color: #fff; }
.social-login .or { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--public-text-sub); margin-top: 6px; }
.social-login .or::before, .social-login .or::after { content: ''; flex: 1; height: 1px; background: var(--public-line); }
.social-yahoo { background: #ff0033; border-color: #ff0033; color: #ffffff; white-space: nowrap; font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; }

/* ═════════ トップ: 結果のサンプル ═════════ */
.sample-section { background: linear-gradient(180deg, var(--public-bg) 0%, #EAF4F6 100%); }
.sample-eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .08em; color: var(--public-primary); margin-bottom: 6px; }
.sample-lead { max-width: 760px; }
.sample-layout { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 28px; align-items: start; margin-top: 28px; }
.sample-steps { display: grid; gap: 10px; position: sticky; top: 90px; }
.sample-step {
  display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: center; text-align: left; width: 100%;
  padding: 14px 16px; border-radius: 16px; border: 1px solid var(--public-line); background: var(--public-surface);
  font: inherit; color: var(--public-text); cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s;
}
.sample-step:hover { border-color: #BFE9E5; transform: translateX(2px); }
.sample-step.on { border-color: var(--public-primary); box-shadow: 0 10px 26px rgba(8, 126, 139, .14); }
.sample-no {
  width: 34px; height: 34px; border-radius: 999px; display: grid; place-items: center; font-weight: 800; font-size: 14px;
  background: var(--public-bg); color: var(--public-text-sub); border: 1px solid var(--public-line);
}
.sample-step.on .sample-no { background: var(--public-primary); color: #fff; border-color: var(--public-primary); }
.sample-step-text { display: grid; gap: 2px; }
.sample-step-text strong { font-size: 15px; }
.sample-desc { font-size: 12px; color: var(--public-text-sub); line-height: 1.5; }

.sample-frame { background: var(--public-surface); border-radius: 20px; border: 1px solid var(--public-line); box-shadow: 0 24px 60px rgba(20, 60, 90, .14); overflow: hidden; min-width: 0; }
.sample-bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; background: #F3F6F9; border-bottom: 1px solid var(--public-line); }
.sample-bar span { width: 11px; height: 11px; border-radius: 999px; background: #D5DEE6; }
.sample-bar span:nth-child(1) { background: #F2A7A7; } .sample-bar span:nth-child(2) { background: #F5D48C; } .sample-bar span:nth-child(3) { background: #A8DDB7; }
.sample-bar em { font-style: normal; font-size: 12px; color: var(--public-text-sub); margin-left: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sample-bar b { margin-left: auto; font-size: 11px; font-weight: 700; color: #9A6B06; background: var(--public-yellow-soft); border-radius: 999px; padding: 2px 10px; flex: none; }
.sample-view { padding: 22px; display: grid; overflow: hidden; transition: height .3s ease; }
.sample-pane { grid-area: 1 / 1; align-self: start; display: grid; gap: 14px; align-content: start; visibility: hidden; opacity: 0; transition: opacity .3s ease; }
.sample-pane.on { visibility: visible; opacity: 1; animation: sample-in .35s ease-out; }
@keyframes sample-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sample-pane { animation: none; } .sample-view { transition: none; } }
.sample-level { display: flex; align-items: center; gap: 22px; padding: 4px 4px 6px; }
.sample-level .level-num { font-size: 52px; font-weight: 800; line-height: 1; color: var(--lv, var(--public-primary)); }
.sample-level .level-num small { font-size: 16px; color: var(--public-text-sub); margin-left: 4px; }
.sample-kicker { font-size: 12px; color: var(--public-text-sub); }
.sample-verdict { font-size: 22px; font-weight: 800; }
.sample-verdict.level-2 { color: #C45A12; }
.sample-pane .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.sample-pane .kpi { padding: 12px 14px; box-shadow: none; }
.sample-pane .kpi-value { font-size: 26px; }
.sample-pane .kpi-name .kpi-value { font-size: 16px; }
.sample-sub-h { font-weight: 700; font-size: 14px; margin-top: 4px; }
.sample-pane .action-card { box-shadow: none; }
.sample-cta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: center; margin-top: 30px; }

@media (max-width: 1023px) {
  .sample-layout { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .sample-steps { position: static; display: flex; overflow-x: auto; gap: 8px; padding-bottom: 4px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
  .sample-step { flex: none; width: auto; grid-template-columns: 26px auto; padding: 9px 14px; border-radius: 999px; scroll-snap-align: start; }
  .sample-desc { display: none; }
  .sample-no { width: 26px; height: 26px; font-size: 12px; }
  .sample-step-text strong { font-size: 13px; white-space: nowrap; }
  .sample-pane .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .sample-view { padding: 14px; }
  .sample-level { gap: 14px; }
  .sample-level .level-num { font-size: 40px; }
  .sample-verdict { font-size: 18px; }
  .sample-pane .answer-grid { grid-template-columns: minmax(0, 1fr); }
  .sample-cta .btn { width: 100%; }
}
@media (max-width: 640px) {
  .sample-level { flex-direction: column; align-items: flex-start; gap: 8px; }
  .sample-level .level-meter { max-width: 220px; }
}

/* ───── サンプル: 業種のタブ（色つき） ───── */
.sample-section { --k: var(--public-primary); --k-soft: var(--public-primary-soft); }
.sample-section[data-kind="food"]  { --k: #E0661B; --k-soft: #FFF1E6; }
.sample-section[data-kind="inn"]   { --k: #6B4FD8; --k-soft: #F1EDFC; }
.sample-section[data-kind="maker"] { --k: #2F6FD6; --k-soft: #EAF3FF; }
.sample-section[data-kind="web"]   { --k: #087E8B; --k-soft: #DDF5F3; }
.sample-section[data-kind="manga"] { --k: #D23F7D; --k-soft: #FDECF3; }
.sample-section[data-kind="spot"]  { --k: #1E8F5E; --k-soft: #E6F7EF; }
.sample-kinds { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.sample-kind {
  --c: #087E8B; --c-soft: #DDF5F3;
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 700; color: var(--c); background: var(--c-soft); border: 2px solid transparent;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}
.sample-kind:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(20, 50, 80, .12); }
.sample-kind.on { background: var(--c); color: #fff; box-shadow: 0 10px 22px color-mix(in srgb, var(--c) 35%, transparent); }
.sample-kind:focus-visible { outline: none; border-color: #fff; box-shadow: 0 0 0 3px var(--c); }
.sample-kind .icon { color: currentColor; }
.kind-food  { --c: #E0661B; --c-soft: #FFF1E6; }
.kind-inn   { --c: #6B4FD8; --c-soft: #F1EDFC; }
.kind-maker { --c: #2F6FD6; --c-soft: #EAF3FF; }
.kind-web   { --c: #087E8B; --c-soft: #DDF5F3; }
.kind-manga { --c: #D23F7D; --c-soft: #FDECF3; }
.kind-spot  { --c: #1E8F5E; --c-soft: #E6F7EF; }
/* 選んだ業種の色を、枠の上端と見どころの番号に移す */
.sample-frame { border-top: 4px solid var(--k); transition: border-color .3s ease; }
.sample-step.on { border-color: var(--k); box-shadow: 0 10px 26px color-mix(in srgb, var(--k) 18%, transparent); }
.sample-step.on .sample-no { background: var(--k); border-color: var(--k); }
.sample-bar em::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 999px; background: var(--k); margin-right: 8px; vertical-align: middle; }
/* 判定の文字色（背景が白でも読める濃さ） */
.sample-verdict.v-1, .pdf-verdict.v-1 { color: #C23B3B; }
.sample-verdict.v-2, .pdf-verdict.v-2 { color: #C45A12; }
.sample-verdict.v-3, .pdf-verdict.v-3 { color: #9A6B06; }
.sample-verdict.v-4, .pdf-verdict.v-4 { color: #3E8E57; }
.sample-verdict.v-5, .pdf-verdict.v-5 { color: #14764C; }

/* ───── サンプル: 社内共有用PDF ───── */
.pdf-demo { display: grid; grid-template-columns: minmax(0, 330px) minmax(0, 1fr); gap: 26px; align-items: center; }
.pdf-sheet {
  position: relative; aspect-ratio: 1 / 1.414; overflow: hidden; background: #fff; border-radius: 6px; padding: 18px 16px;
  box-shadow: 0 2px 0 #E4EAF0, 0 18px 40px rgba(20, 50, 80, .18); transform: rotate(-1.2deg); display: grid; gap: 8px; align-content: start;
}
.pdf-head { display: flex; justify-content: space-between; gap: 8px; border-bottom: 2px solid var(--public-primary); padding-bottom: 6px; }
.pdf-kicker { font-size: 7px; font-weight: 700; color: var(--public-primary); letter-spacing: .04em; }
.pdf-title { font-size: 13px; font-weight: 800; line-height: 1.3; margin-top: 2px; }
.pdf-meta { font-size: 6.5px; color: var(--public-text-sub); }
.pdf-lv { text-align: right; flex: none; }
.pdf-num { font-size: 22px; font-weight: 800; line-height: 1; color: var(--lv, var(--public-primary)); }
.pdf-num small { font-size: 8px; color: var(--public-text-sub); margin-left: 2px; }
.pdf-verdict { font-size: 8px; font-weight: 800; }
.pdf-points { display: grid; gap: 4px; }
.pdf-point { display: grid; grid-template-columns: 26px 1fr; gap: 4px; }
.pdf-point span { font-size: 6.5px; font-weight: 800; color: var(--public-primary); }
.pdf-point p { font-size: 6.5px; line-height: 1.5; }
.pdf-mini { font-size: 6px; }
.pdf-sheet .matrix, .pdf-sheet .ranking { font-size: 6px; }
.pdf-sheet .matrix th, .pdf-sheet .matrix td, .pdf-sheet .ranking th, .pdf-sheet .ranking td { padding: 2px 3px; font-size: 6px; }
.pdf-sheet .matrix .c { width: 34px; }
.pdf-sheet .matrix .q-no { font-size: 5px; } .pdf-sheet .matrix .q-text { font-size: 6px; line-height: 1.3; }
.pdf-sheet .matrix .cell .sym { display: inline; font-size: 8px; margin-right: 2px; } .pdf-sheet .matrix .cell .cnt { display: inline; font-size: 5.5px; }
.pdf-sheet .ranking .own-tag { font-size: 5px; padding: 0 4px; } .pdf-sheet .ranking .rbar { height: 5px; }
.pdf-sheet .ranking .ai { width: 26px; font-size: 7px; } .pdf-sheet .ranking .bar-cell { min-width: 0; } .pdf-sheet .ranking .nm { max-width: 90px; }
.pdf-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 60px; background: linear-gradient(180deg, rgba(255,255,255,0), #fff 80%); }
.pdf-side-title { font-size: 20px; font-weight: 800; line-height: 1.5; margin-bottom: 8px; }
.pdf-side-list { list-style: none; padding: 0; margin: 14px 0 18px; display: grid; gap: 8px; }
.pdf-side-list li { position: relative; padding-left: 24px; font-size: 14px; line-height: 1.6; }
.pdf-side-list li::before { content: '✓'; position: absolute; left: 0; top: 0; color: var(--public-green); font-weight: 800; }
.pdf-btn { pointer-events: none; }
.pdf-callout {
  display: flex; gap: 16px; align-items: center; margin: 26px auto 0; max-width: 980px; padding: 18px 22px; border-radius: 18px;
  background: #fff; border: 1px solid var(--public-line); box-shadow: 0 10px 26px rgba(20, 60, 90, .08);
}
.pdf-callout .icon-lg { color: var(--public-primary); flex: none; }
.pdf-callout-title { font-weight: 800; font-size: 16px; line-height: 1.6; }
@media (max-width: 900px) {
  .pdf-demo { grid-template-columns: minmax(0, 1fr); }
  .pdf-sheet { max-width: 300px; margin: 0 auto; }
}
@media (max-width: 640px) {
  .sample-kinds { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
  .sample-kind { flex: none; padding: 8px 14px; font-size: 13px; }
  .pdf-callout { align-items: flex-start; }
  .pdf-callout-title { font-size: 15px; }
  .pdf-side-title { font-size: 17px; }
}
.meta-item { display: inline-flex; align-items: center; }
.answer-ai { display: inline-flex; align-items: center; }
.kpi-label, .mstrip-label, .action-example-label { display: inline-flex; align-items: center; flex-wrap: wrap; }
.matrix th .help-btn, .ranking th .help-btn, .reasons-tbl th .help-btn, .media-tbl th .help-btn { width: 16px; height: 16px; font-size: 10px; margin-left: 4px; }
.kp-title { font-weight: 800; font-size: 15px; display: flex; align-items: center; margin-bottom: 4px; }
.pdf-sheet .ranking .rval { font-size: 6.5px; min-width: 16px; }

/* ═════════ トップ: 「？」で言葉の意味が分かる ═════════ */
.help-feature { background: var(--public-surface); }
.help-feature-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.help-feature-lead { font-size: 16px; line-height: 1.9; color: var(--public-text); margin-top: 6px; }
.help-feature-list { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 14px; }
.help-feature-list li { position: relative; padding-left: 34px; font-size: 16px; line-height: 1.6; }
.help-feature-list li::before {
  content: '?'; position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 999px; display: grid; place-items: center;
  background: var(--public-primary); color: #fff; font-weight: 800; font-size: 13px;
}
.help-feature-list .sub { display: block; font-size: 13px; margin-top: 2px; }
.help-feature-demo { position: relative; }
.help-demo-hint { position: absolute; top: -30px; right: 18px; font-size: 13px; font-weight: 700; color: var(--public-primary); }
.help-demo-hint::after { content: '↓'; margin-left: 6px; }
.help-demo-card {
  position: relative; padding: 26px; border-radius: 24px; background: linear-gradient(160deg, #F0F9F8, #EAF3FF);
  border: 1px solid var(--public-line); box-shadow: 0 24px 60px rgba(20, 60, 90, .12); display: grid; gap: 16px;
}
.help-demo-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.help-demo-chip {
  font: inherit; font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--public-line); background: #fff; color: var(--public-text-sub);
}
.help-demo-chip.on { background: var(--public-primary); border-color: var(--public-primary); color: #fff; }
.help-demo-item { background: #fff; border-radius: 18px; padding: 18px 22px; border: 1px solid var(--public-line); }
.help-demo-note { font-size: 11px; color: var(--public-text-sub); margin-bottom: 6px; }
.help-demo-label { display: flex; align-items: center; gap: 12px; font-size: 20px; font-weight: 800; }
.help-demo-value { font-size: 15px; color: var(--public-text-sub); margin-top: 4px; }
.help-demo-q {
  position: relative; width: 48px; height: 48px; flex: none; border-radius: 999px; border: 3px solid var(--public-primary);
  background: #fff; color: var(--public-primary); font: 800 24px/1 var(--font); cursor: pointer;
  box-shadow: 0 8px 20px rgba(8, 126, 139, .25);
}
.help-demo-q[aria-expanded="true"] { background: var(--public-primary); color: #fff; }
.help-demo-q::after {
  content: ''; position: absolute; inset: -9px; border-radius: 999px; border: 3px solid var(--public-primary); opacity: .5;
  animation: help-pulse 1.8s ease-out infinite;
}
@keyframes help-pulse { from { transform: scale(.8); opacity: .6; } to { transform: scale(1.35); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .help-demo-q::after { animation: none; opacity: 0; } }
.help-demo-bubble {
  position: relative; background: #17324D; color: #fff; border-radius: 16px; padding: 16px 20px; line-height: 1.75;
  box-shadow: 0 16px 36px rgba(10, 30, 50, .25); animation: sample-in .3s ease-out;
}
.help-demo-bubble::before {
  content: ''; position: absolute; top: -9px; left: 64px; width: 18px; height: 18px; background: #17324D; transform: rotate(45deg); border-radius: 3px;
}
.help-demo-bubble .help-term { font-weight: 800; font-size: 15px; margin-bottom: 4px; }
.help-demo-bubble .help-def { color: #E3ECF3; font-size: 14px; }
@media (max-width: 900px) {
  .help-feature-inner { grid-template-columns: minmax(0, 1fr); gap: 44px; }
}
@media (max-width: 640px) {
  .help-demo-card { padding: 18px; }
  .help-demo-label { font-size: 17px; }
  .help-demo-q { width: 42px; height: 42px; font-size: 21px; }
  .help-feature-lead, .help-feature-list li { font-size: 15px; }
}
br.sp-only { display: none; }
@media (max-width: 767px) { br.sp-only { display: inline; } }

/* ───── スマホの見本: タブを整理 ───── */
.kind-short { display: none; }
.sample-pager { display: none; }
.kpi-label, .mstrip-label, .action-example-label { display: block; }
.kpi-label .help-btn, .mstrip-label .help-btn { width: 16px; height: 16px; font-size: 10px; margin-left: 4px; vertical-align: -3px; }
@media (max-width: 640px) {
  .sample-kinds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; overflow: visible; padding: 0; margin-top: 16px; }
  .sample-kind { justify-content: center; padding: 9px 6px; font-size: 13px; gap: 5px; border-radius: 12px; }
  .sample-kind.on { box-shadow: 0 6px 14px color-mix(in srgb, var(--c) 30%, transparent); }
  .kind-long { display: none; }
  .kind-short { display: inline; }
  .sample-layout { gap: 12px; margin-top: 14px; }
  .sample-steps { display: none; }
  .sample-pager {
    display: grid; grid-template-columns: 38px minmax(0, 1fr) 38px; align-items: center; gap: 8px;
    padding: 10px 10px 8px; border-radius: 14px; background: var(--public-surface); border: 1px solid var(--public-line);
  }
  .pager-btn {
    width: 38px; height: 38px; border-radius: 999px; border: 1px solid var(--public-line); background: var(--public-bg);
    font: 700 20px/1 var(--font); color: var(--k); cursor: pointer;
  }
  .pager-info { display: grid; justify-items: center; text-align: center; gap: 1px; min-width: 0; }
  .pager-no { font-size: 11px; font-weight: 700; color: var(--k); }
  .pager-info strong { font-size: 15px; }
  .pager-desc { font-size: 11px; color: var(--public-text-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .pager-dots { grid-column: 1 / -1; display: flex; justify-content: center; gap: 6px; }
  .pager-dots span { width: 6px; height: 6px; border-radius: 999px; background: var(--public-line); transition: width .2s, background .2s; }
  .pager-dots span.on { width: 18px; background: var(--k); }
  .sample-view { padding: 12px; }
  .sample-level { flex-direction: row; align-items: center; gap: 14px; }
  .sample-level .level-num { font-size: 34px; }
  .sample-level .level-meter { max-width: 130px; }
  .sample-level .level-meter .seg { width: 20px; height: 7px; }
  .sample-verdict { font-size: 16px; }
  .sample-kicker { font-size: 11px; }
  .sample-pane .kpis { gap: 8px; }
  .sample-pane .kpi { padding: 10px 11px; border-radius: 14px; }
  .sample-pane .kpi-label { font-size: 11.5px; }
  .sample-pane .kpi-value { font-size: 22px; }
  .sample-pane .kpi-value small { font-size: 12px; }
  .sample-pane .kpi-name .kpi-value { font-size: 14px; }
  .sample-pane .kpi-sub { font-size: 11px; }
  .sample-bar { padding: 9px 12px; }
  .sample-bar em { font-size: 11px; }
}
@media (max-width: 767px) {
  .kpi-label { font-size: 12px; }
}
@media (max-width: 640px) {
  .matrix thead th.c .help-btn, .ranking thead th .help-btn { display: none; }
  .matrix thead th.c { font-size: 10px; line-height: 1.3; }
  .matrix th.q { min-width: 118px; }
  .matrix .q-text { font-size: 12px; line-height: 1.45; }
  .kpis .mstrip { margin-top: 2px; }
  .answer-head { gap: 6px; }
}
@media (max-width: 640px) { .matrix thead th.ch-aioverview { font-size: 8.5px; letter-spacing: -.02em; padding-left: 2px; padding-right: 2px; } }


/* ═════════ トップ: アクセントのバー（ヘッダー上端・見本の枠・最後の呼びかけ の3か所だけ） ═════════ */
.lp .site-header { position: relative; }
.lp .site-header::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 6px; background: var(--grad-brand);
}

/* 見本の枠: 業種色の細線＋ブラウザ風の丸 → 太いグラデのバー。業種の色は見出しの点と番号に残す */
.lp .sample-frame { border-top: 0; }
.lp .sample-frame::before { content: ''; display: block; height: 12px; background: var(--grad-brand); }
.lp .sample-bar { background: var(--public-surface); padding: 12px 20px; }
.lp .sample-bar span { display: none; }
.lp .sample-bar em { margin-left: 0; }

/* PCのファーストビュー: 右側の空も白い膜を厚くし、写真は背景に下げる */
.lp .hero-wide::before {
  background:
    linear-gradient(90deg, rgba(247,250,252,.97) 0%, rgba(247,250,252,.94) 40%, rgba(247,250,252,.74) 64%, rgba(247,250,252,.50) 100%),
    linear-gradient(180deg, rgba(247,250,252,0) 70%, var(--public-bg) 100%);
}
.lp .hero-wide .hero-bg img { filter: saturate(.8); }

/* PCの最後の呼びかけ: 灯台は右に添えるだけ。白いカードに太いバー、文章は左 */
.lp .lp-final .cta-band {
  align-items: flex-start; text-align: left; gap: 16px;
  padding: 56px 48px 52px; background: var(--public-surface);
  border: 1px solid var(--public-line); box-shadow: var(--shadow-card);
}
.lp .lp-final .cta-band::before {
  inset: 0 0 auto 0; height: 12px; z-index: 1; background: var(--grad-brand);
}
.lp .lp-final .band-photo {
  left: auto; width: 40%; object-position: center 30%; filter: saturate(.85);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 55%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 55%);
}
.lp .lp-final .lp-final-lead { display: block; color: var(--public-text-sub); margin-top: -4px; }
.lp .lp-final h2, .lp .lp-final .lp-final-lead, .lp .lp-final .btn { max-width: 58%; }

/* ───────────── お問い合わせ ───────────── */
.contact-page { padding-bottom: 72px; }
.contact-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 48px; align-items: start; max-width: 1080px; margin: 0 auto; }
.contact-intro h1 { font-size: 32px; margin-bottom: 14px; }
.contact-lead { font-size: 16px; line-height: 1.9; color: var(--public-text); margin-bottom: 26px; }
.contact-notes { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; border-left: 3px solid var(--public-primary-soft); padding-left: 18px; }
.contact-notes li { font-size: 14px; line-height: 1.8; color: var(--public-text-sub); }
.contact-notes strong { display: block; color: var(--public-text); font-size: 15px; }
.contact-card { padding: 32px; }
.contact-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.contact-card textarea {
  display: block; width: 100%; min-height: 180px; padding: 12px 14px; resize: vertical;
  font: inherit; font-size: 16px; line-height: 1.7; color: var(--public-text);
  background: var(--public-surface); border: 1px solid var(--public-line); border-radius: var(--radius-control);
}
.contact-card .field.has-error textarea { border-color: var(--public-red); }
.contact-card select { appearance: none; -webkit-appearance: none; padding-right: 40px;
  background: var(--public-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%2361758A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 14px center / 14px no-repeat; }
.contact-card input:focus, .contact-card select:focus, .contact-card textarea:focus { outline: none; border-color: var(--public-primary); box-shadow: 0 0 0 3px var(--public-primary-soft); }
#topicHint { padding: 10px 12px; border-radius: 10px; background: var(--public-surface-soft); color: var(--public-text); line-height: 1.7; }
.contact-count { text-align: right; }
.contact-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-consent { display: flex !important; align-items: center; gap: 10px; font-weight: 500 !important; font-size: 14px !important; cursor: pointer; }
.contact-consent input { width: 20px; height: 20px; min-height: 0; margin: 0; accent-color: var(--public-primary); }
.contact-form-err { margin: -8px 0 14px; padding: 10px 12px; border-radius: 10px; background: var(--public-red-soft); color: var(--public-red); font-size: 14px; }
.contact-submit { width: 100%; }
.contact-ai-note { margin-top: 12px; font-size: 12px; line-height: 1.7; }
.contact-done { text-align: center; padding: 24px 8px; outline: none; }
.contact-done-mark { width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 50%; display: grid; place-items: center; background: var(--public-green-soft); color: var(--public-green); font-size: 26px; font-weight: 700; }
.contact-done h2 { margin-bottom: 10px; }
.contact-done p { margin-bottom: 8px; }
.contact-done .btn { margin-top: 16px; }
@media (max-width: 899px) {
  .contact-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}
@media (max-width: 767px) {
  .contact-intro h1 { font-size: 24px; }
  .contact-lead { font-size: 15px; margin-bottom: 18px; }
  .contact-card { padding: 20px 16px; }
  .contact-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

/* ───────────── 更新履歴（左に日付、縦の線と点でつなぐ） ───────────── */
.updates-page { max-width: 860px; padding-bottom: 72px; }
.updates-page h1 { font-size: 32px; margin-bottom: 12px; }
.updates-lead { color: var(--public-text-sub); line-height: 1.9; margin-bottom: 36px; }
.updates-list { list-style: none; margin: 0; padding: 0; position: relative; }
.updates-day { position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 28px; padding: 0 0 28px; }
.updates-day::before { content: ''; position: absolute; left: 118px; top: 10px; bottom: -10px; width: 2px; background: var(--public-line); }
.updates-day:last-child::before { bottom: auto; height: 0; }
.updates-day::after { content: ''; position: absolute; left: 113px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--public-surface); border: 3px solid var(--public-primary); box-sizing: border-box; }
.updates-day:first-child::after { background: var(--public-primary); box-shadow: 0 0 0 4px var(--public-primary-soft); }
.updates-day time { text-align: right; line-height: 1.3; padding-top: 1px; }
.updates-md { display: block; font-weight: 700; font-size: 16px; color: var(--public-text); }
.updates-y { display: block; font-family: var(--font-num); font-size: 12px; color: var(--public-text-sub); margin-top: 2px; }
.updates-items { list-style: none; margin: 0; padding: 0 0 0 16px; display: grid; gap: 10px; }
.updates-items li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; font-size: 15px; line-height: 1.7; }
.updates-tag { flex: none; font-size: 11px; font-weight: 700; line-height: 1; padding: 5px 8px; border-radius: 6px; }
.tag-new { background: var(--public-primary-soft); color: var(--public-primary-hover); }
.tag-improve { background: var(--public-blue-soft); color: #1F5FB8; }
.tag-fix { background: var(--public-yellow-soft); color: #8A5A00; }
.updates-text { flex: 1 1 260px; min-width: 0; }
.updates-fb { font-size: 12px; color: var(--public-green); font-weight: 700; }
.updates-fb::before { content: '— '; }
.updates-home { background: var(--public-surface); }
.updates-home-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.updates-home-head .section-title { margin-bottom: 0; }
.updates-home-head a { font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.updates-home .updates-day { padding-bottom: 20px; }
@media (max-width: 767px) {
  .updates-page h1 { font-size: 24px; }
  .updates-day { grid-template-columns: minmax(0, 1fr); gap: 8px; padding-left: 26px; }
  .updates-day::before { left: 5px; top: 12px; }
  .updates-day::after { left: 0; top: 4px; }
  .updates-day time { text-align: left; display: flex; align-items: baseline; gap: 8px; }
  .updates-y { margin-top: 0; }
  .updates-items { padding-left: 0; }
  .updates-items li { font-size: 14px; }
  .lp main .updates-home .section-title { justify-content: flex-start; text-align: left; }
}

/* ───────────── 入力画面（check.html）: 白いカードの横に、色のある案内の面 ───────────── */
.check-page { padding-top: 36px; padding-bottom: 64px; max-width: 1120px; }
body:has(.check-page) { background: linear-gradient(180deg, #EEF1FC 0%, #EDF8F6 42%, var(--public-bg) 100%) no-repeat; }
.check-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; align-items: start; }
.check-card { padding: 32px 36px 28px; border-radius: 20px; box-shadow: 0 18px 48px rgba(30, 60, 110, .10); border: 1px solid rgba(220, 232, 239, .9); }
.check-card .stepper { margin-bottom: 28px; }
.check-card .stepper .num { transition: background-color .2s ease; }
.check-card .stepper .step.current .num { background: linear-gradient(135deg, #4F5BD5, #087E8B); box-shadow: 0 0 0 4px #E4E8FB; }
.check-card .stepper .step.done .num { background: var(--public-primary); }
.check-card .stepper .bar { height: 3px; border-radius: 3px; }
.check-card .stepper .step.done + .bar { background: linear-gradient(90deg, #087E8B, #2BC4A9); }
.check-card .stepper .step.current + .bar { background: linear-gradient(90deg, #4F5BD5 0%, var(--public-line) 70%); }

.check-side {
  position: sticky; top: 24px; overflow: hidden; isolation: isolate;
  padding: 28px 26px; border-radius: 20px; color: #fff;
  background: linear-gradient(160deg, #3E4AC2 0%, #2B5DAE 38%, #087E8B 100%);
  box-shadow: 0 18px 44px rgba(40, 70, 160, .22);
}
/* 飾りの円（ミントと灯りの黄）。文字の下には来ない位置に */
.check-side::before, .check-side::after { content: ''; position: absolute; border-radius: 50%; z-index: -1; }
.check-side::before { width: 220px; height: 220px; right: -90px; top: -90px; background: radial-gradient(circle, rgba(43, 196, 169, .55) 0%, rgba(43, 196, 169, 0) 70%); }
.check-side::after { width: 160px; height: 160px; left: -60px; bottom: -70px; background: radial-gradient(circle, rgba(242, 181, 58, .40) 0%, rgba(242, 181, 58, 0) 70%); }
.check-side-kicker { font-size: 13px; font-weight: 700; opacity: .85; margin-bottom: 14px; }
.check-flow { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 14px; position: relative; }
.check-flow::before { content: ''; position: absolute; left: 13px; top: 14px; bottom: 14px; width: 2px; background: rgba(255,255,255,.28); }
.check-flow li { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; font-size: 13px; line-height: 1.6; color: rgba(255,255,255,.86); }
.check-flow strong { display: block; font-size: 15px; color: #fff; margin-bottom: 1px; }
.flow-no { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #2B5DAE; font-family: var(--font-num); font-weight: 700; font-size: 14px; }
.check-side-price { padding: 18px; border-radius: 14px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); margin-bottom: 16px; }
.check-price { display: flex; align-items: baseline; gap: 2px; line-height: 1; }
.check-price .yen { font-size: 52px; margin: 0 2px; vertical-align: 0; }
.check-price-pre, .check-price-unit { font-size: 15px; font-weight: 700; }
.check-price-note { margin-top: 10px; font-size: 13px; line-height: 1.6; color: rgba(255,255,255,.9); }
.check-side-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 13px; }
.check-side-list li { display: flex; align-items: center; gap: 8px; }
.check-side-list li::before { content: ''; width: 16px; height: 16px; flex: none; border-radius: 50%; background: #2BC4A9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.2l2 2 4-4.4' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat; }

@media (max-width: 1023px) {
  .check-layout { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  /* 狭い画面では上に短い帯。流れの説明は省き、料金と返金だけ */
  .check-side { order: -1; position: relative; padding: 16px 18px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 16px; align-items: center; }
  .check-side-kicker, .check-flow { display: none; }
  .check-side-price { display: contents; }
  .check-price .yen { font-size: 38px; }
  .check-price-note { margin: 0; font-size: 12px; }
  .check-side-list { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; margin-top: 8px; }
  .check-side-list li::before { width: 14px; height: 14px; background-size: 9px; }
}
@media (max-width: 767px) {
  .check-page { padding-top: 16px; }
  .check-card { padding: 20px 16px; border-radius: 16px; }
  .check-side { border-radius: 16px; }
}