/*
 * ディスクレスキュー 公式サイト用スタイル（ビルド工程なし・1 枚のみ）
 * デザイン: 案 A+「静かな信頼」（生成り・深い青・琥珀の 3 色。docs/WEBSITE.md「Design and search rulings」）
 *
 * - CSP が style-src 'self' のため、HTML 側に style 属性・<style> を書かない。装飾はすべてここ。
 * - 配色はトークンだけで持ち、ダークは prefers-color-scheme で同じトークンを差し替える。
 *   トークンを変えたら、文字と背景の組み合わせを再計算すること（site/README.md「配色を変えるとき」）。
 * - 琥珀 #e8a33d は生成りの地の上の文字としては 2:1 しか出ない。線・下線・左の帯（--amber）だけに使い、
 *   文字になる大きな数字は濃い琥珀 --amber-ink を使う（ダークでは同じ値で足りる）。
 * - 本文 18px・行間 1.8・1 行 40 字（本文幅 45rem）。16px 未満の文字は作らない。
 * - 押せる部品（ナビ・ボタン・フッターのリンク・折りたたみの見出し）は高さ 44px 以上。
 * - アイコン・影・グラデーション・カードの乱立を足さない。余白で見せる。
 */

:root {
  color-scheme: light dark;

  --bg: #faf7f0;
  --panel: #f1eadb;
  --text: #12284c;
  --text-2: #44536b;
  --link: #12284c;
  --btn-bg: #12284c;
  --btn-fg: #faf7f0;
  --btn-hover: #0a1a33;
  --rule: #d9d1bd;
  --ctl: #6b7385;
  --focus: #12284c;

  --amber: #e8a33d;
  --amber-ink: #8f5200;

  --note-bg: #ebedef;
  --note-text: #12284c;
  --note-rule: #e8a33d;

  --ok: #14683a;
  --ok-bg: #e6f4ec;
  --try: #0b4f9c;
  --try-bg: #e4eefb;
  --hard: #7a4a00;
  --hard-bg: #fff1d2;
  --none: #3f4a56;
  --none-bg: #e9ecef;
  --skip: #5b3ab0;
  --skip-bg: #efeafb;

  --hero-dim: 1;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1a2b;
    --panel: #18263b;
    --text: #f4efe3;
    --text-2: #b4bfcf;
    --link: #f4efe3;
    --btn-bg: #f4efe3;
    --btn-fg: #0f1a2b;
    --btn-hover: #ffffff;
    --rule: #2c3b52;
    --ctl: #8591a6;
    --focus: #f4efe3;

    --amber: #e8a33d;
    --amber-ink: #e8a33d;

    --note-bg: #1b2a40;
    --note-text: #f4efe3;
    --note-rule: #e8a33d;

    --ok: #7fd8a2;
    --ok-bg: #17301f;
    --try: #8fc1ff;
    --try-bg: #14263d;
    --hard: #f0c36a;
    --hard-bg: #33280e;
    --none: #c9d0d8;
    --none-bg: #2a323b;
    --skip: #c3aeff;
    --skip-bg: #2a2144;

    --hero-dim: 0.86;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "BIZ UDPGothic", "Yu Gothic UI", "Yu Gothic", "Meiryo",
    "Noto Sans JP", system-ui, sans-serif;
  font-size: 1.125rem;
  line-height: 1.8;
  line-break: strict;
  word-break: auto-phrase;
  overflow-wrap: anywhere;
}

/* ---------- 骨格 ---------- */

.wrap {
  width: min(100% - 3rem, 45rem);
  margin-inline: auto;
}

.wrap-wide {
  width: min(100% - 3rem, 62rem);
  margin-inline: auto;
}

main {
  display: block;
  padding-block: 2rem 0;
}

.home main {
  padding-top: 0.5rem;
}

main > section {
  margin-block: 3.5rem;
}

main > section:first-child {
  margin-top: 0;
}

@media (min-width: 48em) {
  main > section {
    margin-block: 4.5rem;
  }
}

h1,
h2,
h3 {
  line-height: 1.4;
  text-wrap: balance;
}

h1 {
  margin: 0 0 1rem;
  font-size: clamp(1.75rem, 1.35rem + 1.8vw, 2.25rem);
  font-weight: 800;
}

h2 {
  margin: 0 0 1rem;
  font-size: clamp(1.5rem, 1.25rem + 1vw, 1.875rem);
  font-weight: 700;
}

h3 {
  margin: 2rem 0 0.5rem;
  font-size: 1.25rem;
  font-weight: 700;
}

p,
ul,
ol,
dl,
blockquote,
figure {
  margin: 0 0 1rem;
}

ul,
ol {
  padding-left: 1.5em;
}

li + li {
  margin-top: 0.25rem;
}

p {
  text-wrap: pretty;
}

strong {
  font-weight: 700;
}

.lead {
  font-size: 1.25rem;
}

/* 見出しを文節の切れ目で折り返す。word-break: auto-phrase を持たないブラウザでも、語の途中で切れない */
.nb {
  display: inline-block;
}

.muted {
  color: var(--text-2);
}

.small {
  font-size: 1rem;
}

a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.2em;
}

a:hover {
  text-decoration-thickness: 0.16em;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 0.125rem;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: 1rem;
  top: 0;
  z-index: 10;
  min-height: 2.75rem;
  padding: 0.5rem 1rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  transform: translateY(-120%);
}

.skip:focus {
  transform: translateY(0.5rem);
}

/* ---------- ヘッダー・フッター ---------- */

.site-header {
  padding-block: 1rem 0.25rem;
}

.site-header .wrap {
  display: grid;
  grid-template-areas:
    "brand"
    "tag"
    "nav";
  align-items: center;
}

.brand {
  grid-area: brand;
  margin: 0;
  font-size: 1.375rem;
  font-weight: 800;
  line-height: 1.4;
}

.brand a {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 2.75rem;
  color: var(--text);
  text-decoration: none;
}

/* ロゴの代わりの印。ディスクの輪郭だけの CSS 図形（画像・アイコンは足さない） */
.brand a::before {
  content: "";
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  border: 0.5rem solid var(--text);
  border-radius: 50%;
  background: var(--bg);
}

.tagline {
  grid-area: tag;
  margin: 0;
  color: var(--text-2);
  font-size: 1rem;
  line-height: 1.6;
}

.site-header nav {
  grid-area: nav;
}

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 0.5rem 0 0 -0.75rem;
  padding: 0;
  list-style: none;
}

.nav li + li {
  margin-top: 0;
}

.nav a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 0.75rem;
  color: var(--text);
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
}

.nav a:hover {
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

.nav a[aria-current="page"] {
  box-shadow: inset 0 -3px 0 var(--text);
}

/* スマホのトップでは、直下の主視覚が同じことを言うので、キャッチを畳んで最初の 1 画面に見出しとボタンを入れる */
@media (max-width: 47.99em) {
  .nav {
    margin-left: -0.5rem;
  }

  .nav a {
    padding: 0 0.5rem;
    font-size: 0.9375rem;
  }

  .home .tagline {
    display: none;
  }
}

@media (min-width: 48em) {
  .site-header {
    padding-block: 1.5rem 0;
  }

  .site-header .wrap {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "brand nav"
      "tag tag";
    column-gap: 2rem;
  }

  .nav {
    margin: 0 -0.75rem 0 0;
  }
}

.home .site-header .wrap,
.home .site-footer .wrap {
  width: min(100% - 3rem, 62rem);
}

.site-footer {
  margin-top: 4rem;
  padding-block: 1rem 3rem;
  color: var(--text-2);
  font-size: 1rem;
  text-align: center;
}

.foot-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 1.25rem;
  margin: 0 0 0.5rem;
  padding: 0;
  list-style: none;
}

.foot-nav li + li {
  margin-top: 0;
}

.foot-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 0.25rem;
  color: var(--text);
}

@media (min-width: 48em) {
  .foot-nav {
    gap: 0;
  }

  .foot-nav li + li {
    border-left: 1px solid var(--ctl);
  }

  .foot-nav a {
    padding: 0 1rem;
  }
}

.site-footer p {
  margin: 0;
}

/* ---------- ボタン・リンク一覧 ---------- */

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  margin: 1.5rem 0;
}

.btn,
.btn-2,
.btn-pending {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.5rem;
  margin: 0;
  padding: 0.5rem 1.75rem;
  border-radius: 1rem;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
}

.btn {
  background: var(--btn-bg);
  color: var(--btn-fg);
}

.btn:hover {
  background: var(--btn-hover);
}

.btn-2 {
  border: 2px solid var(--text);
  color: var(--text);
}

.btn-2:hover {
  background: var(--panel);
}

/* Store の掲載前の入手ボタン。押せる見た目にしない（破線・押せないことを文面でも示す） */
.btn-pending {
  border: 2px dashed var(--ctl);
  background: var(--panel);
  color: var(--text);
}

.linklist {
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--rule);
}

.linklist li {
  margin: 0;
  border-top: 1px solid var(--rule);
}

.linklist a {
  display: flex;
  align-items: center;
  min-height: 3.25rem;
  padding: 0.5rem 0;
  font-weight: 700;
}

/* ---------- トップページ: 主視覚 ---------- */

.hero {
  display: grid;
  gap: 2.5rem;
  padding-top: clamp(0rem, 3vw, 2.5rem);
}

.hero h1 {
  margin: 0 0 1rem;
  font-size: clamp(2rem, 0.9rem + 3vw, 2.875rem);
  line-height: 1.35;
}

.hero-sub {
  margin: 0 0 1.25rem;
  font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  font-weight: 800;
  line-height: 1.4;
}

.hero .lead {
  margin: 0;
}

.hero .actions {
  margin: 2rem 0 0;
}

.hero-art {
  margin: 0;
  overflow: hidden;
  border-radius: 2rem;
  background: var(--panel);
  aspect-ratio: 4 / 3;
}

.hero-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 20% 50%;
  filter: brightness(var(--hero-dim));
}

@media (min-width: 56em) {
  .hero {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 3.5rem;
    align-items: center;
  }

  .hero-art {
    aspect-ratio: 4 / 5;
  }

  .hero-art img {
    object-position: 8% 50%;
  }
}

@media (min-width: 56em) {
  .hero .lead {
    font-size: 1.25rem;
  }
}

/* 主視覚では入手ボタンが主役。「使い方を見る」は下線のリンクにして、ボタンを 2 つ並べない */
.hero .btn-2 {
  min-height: 2.75rem;
  padding: 0 0.25rem;
  border: 0;
  border-radius: 0.5rem;
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.25em;
}

.hero .btn-2:hover {
  background: transparent;
  text-decoration-thickness: 0.16em;
}

/* トップは節の間を広く取る。余白が広いことが落ち着きの主因なので詰めない */
.home main > section {
  margin-block: clamp(4.5rem, 3rem + 7vw, 8rem);
}

.home main > section:first-child {
  margin-top: 0;
}

/* 読みものの節（幅 45rem）は、広い節（62rem）と左端をそろえる。中央寄せだと左端がずれて散らかって見える */
.home main > .wrap:not(.price) {
  margin-left: max(1.5rem, calc((100% - 62rem) / 2));
  margin-right: auto;
}

/* ---------- 手順（3 ステップ。カードにせず、罫線だけで区切る） ---------- */

.steps {
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.steps > li {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  column-gap: 0.75rem;
  align-items: baseline;
  margin: 0;
  padding: 1.25rem 0;
  border-top: 1px solid var(--rule);
  counter-increment: step;
}

.steps > li:last-child {
  border-bottom: 1px solid var(--rule);
}

.steps > li::before {
  content: counter(step);
  color: var(--amber-ink);
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1;
}

.steps h3 {
  margin: 0;
  font-size: 1.125rem;
}

.steps p {
  grid-column: 1 / -1;
  margin: 0.5rem 0 0;
  font-size: 1rem;
  line-height: 1.75;
}

.step-tag {
  display: inline-block;
  margin-left: 0.375rem;
  padding: 0 0.5rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--text-2);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.6;
  vertical-align: 0.15em;
  white-space: nowrap;
}

@media (min-width: 56em) {
  .steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 3rem;
  }

  .steps > li {
    display: block;
    padding: 0 2rem;
    border-top: 0;
    border-left: 1px solid var(--rule);
  }

  .steps > li:first-child {
    padding-left: 0;
    border-left: 0;
  }

  .steps > li:last-child {
    padding-right: 0;
    border-bottom: 0;
  }

  .steps > li::before {
    display: block;
    margin-bottom: 1.25rem;
    font-size: 6rem;
  }

  .steps h3 {
    margin-bottom: 0.5rem;
    font-size: 1.375rem;
  }
}

.shot-title {
  margin: 3.5rem 0 1rem;
  font-size: 1.375rem;
}

/* ---------- トップページ: 料金（中央・数字を大きく） ---------- */

.price {
  text-align: center;
}

.price h2 {
  font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.5rem);
}

.price p {
  margin-inline: auto;
}

.price-num {
  margin: 0;
  color: var(--text);
  font-size: clamp(5rem, 3.2rem + 8vw, 8rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

/* 通貨記号は数字より小さく。数字は印（data-v）の中、円はその外に置く */
.price-num .yen {
  margin-left: 0.08em;
  font-size: 0.32em;
  font-weight: 700;
}

.price-num::after {
  content: "";
  display: block;
  width: 10.5rem;
  height: 0.375rem;
  margin: 0.75rem auto 0;
  border-radius: 999px;
  background: var(--amber);
}

.price-cap {
  margin-top: 1.5rem;
  font-size: 1.25rem;
  font-weight: 700;
}

.price-sub {
  color: var(--text-2);
  font-size: 1rem;
}

.price-free {
  max-width: 32em;
  margin-bottom: 0;
}

/* ---------- 注意の帯・画面の文・画面写真の枠 ---------- */

.note {
  margin: 0 0 1rem;
  padding: 1.25rem 1.25rem 1.25rem 1.25rem;
  border-left: 0.5rem solid var(--note-rule);
  border-radius: 0.75rem;
  background: var(--note-bg);
  color: var(--note-text);
}

.note > :last-child {
  margin-bottom: 0;
}

.note h2,
.note h3 {
  margin-top: 0;
}

.note h2 {
  font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.625rem);
}

.note ul {
  margin: 0;
  padding-left: 1.25em;
}

.note li + li {
  margin-top: 0.5rem;
}

/* スマホでは内側の余白を詰める。広いと本文が 10 字前後で折り返して読みにくい（390px で実測） */
.home .note {
  padding: 1.75rem 1.25rem;
}

@media (min-width: 48em) {
  .home .note {
    padding: 2.5rem 3rem 2.5rem 2.5rem;
  }
}

.screen {
  margin: 0 0 1rem;
  padding: 1rem 1.5rem;
  border-radius: 0.75rem;
  background: var(--panel);
}

.screen > :last-child {
  margin-bottom: 0;
}

.screen .label {
  margin: 0 0 0.25rem;
  color: var(--text-2);
  font-size: 1rem;
  font-weight: 700;
}

.shot {
  margin: 1.5rem 0;
}

.shot-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 10rem;
  margin: 0;
  padding: 1rem;
  border: 2px dashed var(--ctl);
  border-radius: 0.75rem;
  background: var(--panel);
  color: var(--text-2);
  text-align: center;
}

.shot img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--rule);
  border-radius: 0.75rem;
  background: var(--panel);
}

.shot figcaption {
  margin-top: 0.75rem;
  color: var(--text-2);
  font-size: 1rem;
  line-height: 1.7;
}

/* ---------- 色の見かた ---------- */

.legend {
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

.legend li {
  display: grid;
  grid-template-columns: 7.5em 1fr;
  gap: 0.25rem 1rem;
  align-items: start;
  margin: 0;
  padding: 0.75rem 0;
  border-top: 1px solid var(--rule);
}

.legend li:last-child {
  border-bottom: 1px solid var(--rule);
}

.legend p {
  margin: 0;
}

.tag {
  display: inline-block;
  padding: 0 0.75rem;
  border: 2px solid currentcolor;
  border-radius: 0.375rem;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.7;
  text-align: center;
}

.tag-ok {
  background: var(--ok-bg);
  color: var(--ok);
}

.tag-try {
  background: var(--try-bg);
  color: var(--try);
}

.tag-hard {
  background: var(--hard-bg);
  color: var(--hard);
}

.tag-none {
  background: var(--none-bg);
  color: var(--none);
}

.tag-skip {
  background: var(--skip-bg);
  color: var(--skip);
}

/* ---------- 表（業者の価格・特商法） ---------- */

.tbl {
  width: 100%;
  margin: 0 0 1rem;
  border-collapse: collapse;
  font-size: 1rem;
  line-height: 1.7;
}

.tbl caption {
  padding-bottom: 0.5rem;
  font-size: 1.125rem;
  font-weight: 700;
  text-align: left;
}

.tbl th,
.tbl td {
  padding: 0.75rem;
  border-top: 1px solid var(--rule);
  text-align: left;
  vertical-align: top;
}

.tbl thead th {
  border-top: 0;
  border-bottom: 2px solid var(--text-2);
  font-weight: 700;
}

.tbl tbody th {
  font-weight: 700;
}

.tbl tbody tr:last-child th,
.tbl tbody tr:last-child td {
  border-bottom: 1px solid var(--rule);
}

.tbl ul {
  margin: 0;
  padding-left: 1.25em;
}

.tbl .own th,
.tbl .own td {
  background: var(--panel);
}

.spec {
  margin: 0 0 1rem;
}

.spec > div {
  display: grid;
  grid-template-columns: 10em 1fr;
  gap: 0.25rem 1.5rem;
  padding: 1rem 0;
  border-top: 1px solid var(--rule);
}

.spec > div:last-child {
  border-bottom: 1px solid var(--rule);
}

.spec dt {
  font-weight: 700;
}

.spec dd {
  margin: 0;
}

.spec dd > :last-child {
  margin-bottom: 0;
}

@media (max-width: 60em) {
  .tbl,
  .tbl tbody,
  .tbl tr,
  .tbl th,
  .tbl td {
    display: block;
    width: 100%;
  }

  .tbl caption {
    display: block;
    width: 100%;
  }

  .tbl thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .tbl tbody tr {
    padding: 0.75rem 0;
    border-top: 2px solid var(--text-2);
  }

  .tbl tbody tr:last-child {
    border-bottom: 1px solid var(--rule);
  }

  .tbl th,
  .tbl td,
  .tbl tbody tr:last-child th,
  .tbl tbody tr:last-child td {
    padding: 0.25rem 0;
    border: 0;
  }

  .tbl .own th,
  .tbl .own td {
    padding-inline: 0.75rem;
  }

  .tbl td::before {
    content: attr(data-label);
    display: block;
    color: var(--text-2);
    font-weight: 700;
  }

  .tbl tbody th {
    font-size: 1.125rem;
  }
}

/* ---------- 折りたたみ（よくある質問） ---------- */

.faq {
  border-top: 1px solid var(--rule);
}

.faq:last-of-type {
  border-bottom: 1px solid var(--rule);
}

.faq summary {
  min-height: 2.75rem;
  padding: 0.5rem 0;
  font-weight: 700;
  cursor: pointer;
}

.faq > div {
  padding: 0 0 0.5rem 1.25rem;
}

.faq > div > :last-child {
  margin-bottom: 0.5rem;
}

/* ---------- メールアドレスのコピー ---------- */

.mail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin: 0 0 0.5rem;
}

.mail-addr {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--ctl);
  border-radius: 0.5rem;
  background: var(--bg);
  font-weight: 700;
}

/* コピー用の一時入力欄。HTML に style 属性を書けない（CSP）ので画面外への退避はここで行う */
.copy-tmp {
  position: fixed;
  left: -9999px;
  top: 0;
}

.copy {
  min-height: 2.75rem;
  padding: 0.25rem 1.25rem;
  border: 2px solid var(--text);
  border-radius: 0.5rem;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
}

.copy:hover {
  background: var(--panel);
}

.copy-status {
  min-height: 1.7em;
  margin: 0 0 1rem;
  color: var(--text-2);
  font-size: 1rem;
}

/* ---------- ファームウェア案内の同意（JavaScript を使わない） ---------- */

.consent {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.75rem;
  align-items: center;
  margin: 1.5rem 0;
  padding: 1.25rem;
  border: 2px solid var(--ctl);
  border-radius: 0.75rem;
  background: var(--panel);
}

.consent > p {
  grid-column: 1 / -1;
  margin: 0 0 0.75rem;
}

.consent-check {
  width: 2.75rem;
  height: 2.75rem;
  margin: 0;
  accent-color: var(--text);
}

.consent-label {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.25rem 0;
  font-weight: 700;
  cursor: pointer;
}

.consent-reveal {
  display: none;
  grid-column: 1 / -1;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
}

.consent-check:checked ~ .consent-reveal {
  display: block;
}

.consent-reveal > :last-child {
  margin-bottom: 0;
}

.project-name {
  font-size: 1.5rem;
  font-weight: 700;
}

/* ---------- パンくず（現在地）。本文の上に小さく置く。リンクの高さは 44px 以上 ---------- */

.crumbs {
  margin: 0 0 0.5rem;
}

.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.crumbs li {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--text-2);
}

.crumbs li + li::before {
  content: "›";
  margin: 0 0.5rem;
}

.crumbs a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}

/* ---------- 画面幅が狭いとき ---------- */

@media (max-width: 40em) {
  .spec > div {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .legend li {
    grid-template-columns: 1fr;
  }

  .btn,
  .btn-2,
  .btn-pending {
    width: 100%;
  }
}