/*
  下層ページの共通の土台（全案で共通）。
  ここで決めるのは配置だけ: グリッド・段の間隔・フォームの並び・375 幅での折り返し。
  色・書体・角丸は下の CSS 変数で受け、各案の pages.css が値を決める（既定値は無難な白黒）。
  読み込む順番: 案の style.css → このファイル → 案の pages.css。
  トップ用の style.css にも .steps・.check などの規則があるため、配置の規則は .page の下に書いて
  トップ側の規則より強くしてある。見た目（地の色・書体）の規則は :where() で弱くしてあり、案の CSS が勝つ。
*/

:where(:root) {
  --pg-bg: #ffffff;        /* 本文の地 */
  --pg-fg: #1a1a1a;        /* 本文の文字 */
  --pg-muted: #555555;     /* 注記・補足の文字（地に対して 4.5:1 以上にする） */
  --pg-accent: #1a1a1a;    /* 目立たせる線・ボタンの地 */
  --pg-accent-fg: #ffffff; /* ボタンの文字 */
  --pg-line: #cfcfcf;      /* 罫線 */
  --pg-card-bg: #ffffff;   /* カード・入力欄の地 */
  --pg-radius: 0px;        /* 角丸 */
  --pg-max: 1120px;        /* 本文の最大幅 */
  /* --pg-font-head と --pg-font-body は既定では決めない（決めなければ案の style.css の書体のまま） */
}

/* ---- 見た目（弱い規則。案の style.css と pages.css が上書きする） ---- */
:where(.page) {
  background: var(--pg-bg);
  color: var(--pg-fg);
}
:where(.page) :where(h1, h2, h3) { font-family: var(--pg-font-head); }
:where(.page) :where(p, li, dt, dd, summary, label, input, select, textarea, button) { font-family: var(--pg-font-body); }

/* ---- ページ全体の枠と、区画どうしの間隔 ---- */
.page {
  display: block;
  padding: clamp(40px, 6vw, 96px) max(5vw, 20px) clamp(64px, 8vw, 128px);
  overflow-wrap: anywhere;
}
.page > * {
  max-width: var(--pg-max);
  margin-inline: auto;
  margin-block: 0;
}
.page > * + * { margin-top: clamp(56px, 8vw, 112px); }
.page > .page-head + * { margin-top: clamp(32px, 5vw, 64px); }

/* 見出しは語の途中で折らない（効く環境では auto-phrase、効かない環境では keep-all と最後の手段の anywhere） */
.page h1, .page h2, .page h3, .page summary {
  word-break: keep-all;
  word-break: auto-phrase;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

/* 本文の中の文字リンクは下線で示す（トップ用 style.css の a{text-decoration:none} を本文だけ戻す） */
.page .prose a, .page .faq__answer a { text-decoration: underline; text-underline-offset: .25em; }

/* ---- ページの頭 ---- */
.page .page-head > * { margin: 0; }
/* 題は区画の見出しより大きく（タグだけの h1 規則には勝ち、案の class の規則には負ける強さ） */
:where(.page) .page-title { font-size: clamp(32px, 4.6vw, 60px); line-height: 1.3; }
.page .page-lead { margin-top: 1em; max-width: 40em; }

/* ---- 区画の中の並び ---- */
.page .page-section > * { margin-block: 0; }
.page .page-section > * + * { margin-top: clamp(16px, 2vw, 24px); }
.page .page-section > .section-title + * { margin-top: clamp(20px, 2.5vw, 32px); }

/* 段落のまとまり */
.page .prose { max-width: 42em; }
.page .prose > * { margin: 0; }
.page .prose > * + * { margin-top: 1em; }
.page .prose ul, .page .prose ol { padding-left: 1.4em; }

/* 注記 */
.page .notice {
  padding: 14px 18px;
  border-left: 3px solid var(--pg-accent);
  max-width: 48em;
}
.page .notice > * { margin: 0; }
.page .notice > * + * { margin-top: .5em; }

/* 画像 */
.page figure.media img { display: block; width: 100%; height: auto; border-radius: var(--pg-radius); }
.page figure.media figcaption { margin-top: 8px; font-size: 12px; color: var(--pg-muted); }

/* ---- 料金のカード（広い画面は 3 列、中くらいは 2 列、狭い画面は 1 列に自動で並ぶ） ---- */
.page .price-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: clamp(16px, 2vw, 28px);
  align-items: stretch;
}
.page .price-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: clamp(20px, 2.4vw, 32px);
  background: var(--pg-card-bg);
  border: 1px solid var(--pg-line);
  border-radius: var(--pg-radius);
}
.page .price-card.is-featured { border-color: var(--pg-accent); box-shadow: inset 0 0 0 1px var(--pg-accent); }
.page .price-card > * { margin: 0; }
.page .price-card__badge { align-self: flex-start; }
.page .price-card__for strong { display: block; }
.page .price-card__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.page .price-card__in { color: var(--pg-muted); }
.page .price-card__includes { padding-left: 1.2em; }
.page .price-card__terms { display: grid; gap: 6px; }
.page .price-card__terms > div { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); gap: 10px; }
.page .price-card__terms dt, .page .price-card__terms dd { margin: 0; }
.page .price-card__cta { margin-top: auto; align-self: flex-start; }

/* 条件の一覧（項目名と中身の 2 列。狭い画面では縦に積む） */
.page dl.terms-list { max-width: 56em; }
.page dl.terms-list > div {
  display: grid;
  grid-template-columns: minmax(7em, 12em) minmax(0, 1fr);
  gap: 8px clamp(16px, 3vw, 40px);
  padding: 16px 0;
  border-top: 1px solid var(--pg-line);
}
.page dl.terms-list > div:last-child { border-bottom: 1px solid var(--pg-line); }
.page dl.terms-list dt, .page dl.terms-list dd { margin: 0; }

/* ---- 進め方（番号は ol の連番を 1 つだけ出す。トップ用 .steps の 4 列・絶対配置の番号を打ち消す） ---- */
.page .steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  padding: 0;
  list-style: none;
  counter-reset: pg-step;
}
.page .steps > .step {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  column-gap: clamp(12px, 2vw, 28px);
  row-gap: 8px;
  align-content: start;
  margin: 0;
  padding: 24px 0;
  min-height: 0;
  border-top: 1px solid var(--pg-line);
  border-right: 0;
  counter-increment: pg-step;
  position: relative;
}
.page .steps > .step:last-child { border-bottom: 1px solid var(--pg-line); }
.page .steps > .step::before {
  content: counter(pg-step);
  grid-column: 1;
  grid-row: 1 / span 4;
  position: static;
  top: auto;
  left: auto;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.2;
}
.page .steps > .step > * { grid-column: 2; margin: 0; }
.page .steps > .step p { color: inherit; }
.page .step__weeks { color: var(--pg-muted); }
.page .step__ask strong { display: block; }

/* ---- 3 つの確認 ---- */
.page .checks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: clamp(16px, 2.5vw, 36px);
}
.page .checks > .check {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  min-height: 0;
  padding: 20px 0 0;
  border: 0;
  border-top: 1px solid var(--pg-line);
}
.page .checks > .check > * { margin: 0; }
.page .checks > .check p { color: inherit; }

/* ---- 納品物 ---- */
.page ul.deliverables {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 0 clamp(16px, 3vw, 40px);
  padding: 0;
  list-style: none;
  max-width: 56em;
}
.page ul.deliverables > li { padding: 12px 0; border-top: 1px solid var(--pg-line); }

/* ---- よくある質問 ---- */
.page .faq { display: grid; max-width: 52em; }
.page details.faq__item { border-top: 1px solid var(--pg-line); }
.page details.faq__item:last-child { border-bottom: 1px solid var(--pg-line); }
.page .faq__item > summary {
  position: relative;
  padding: 18px 2.4em 18px 0;
  cursor: pointer;
  list-style: none;
}
.page .faq__item > summary::-webkit-details-marker { display: none; }
.page .faq__item > summary::after { content: "+"; position: absolute; right: .2em; top: 18px; }
.page .faq__item[open] > summary::after { content: "−"; }
.page .faq__answer { padding: 0 0 20px; }
.page .faq__answer > * { margin: 0; }
.page .faq__answer > * + * { margin-top: .8em; }

/* ---- 相談フォーム（2 列。相談の内容と送信ボタンは横いっぱい。狭い画面では 1 列） ---- */
.page form.contact-form { max-width: 52em; }
.page .contact-form fieldset {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px clamp(16px, 2.5vw, 28px);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.page .contact-form legend { padding: 0; margin-bottom: 12px; }
.page .contact-form .field { display: grid; gap: 6px; min-width: 0; }
.page .contact-form .field:has(textarea) { grid-column: 1 / -1; }
.page .contact-form input,
.page .contact-form select,
.page .contact-form textarea {
  width: 100%;
  min-width: 0;
  padding: 10px 12px;
  font: inherit;
  color: var(--pg-fg);
  background: var(--pg-card-bg);
  border: 1px solid var(--pg-line);
  border-radius: var(--pg-radius);
}
.page .contact-form button { grid-column: 1 / -1; justify-self: start; }

/* ---- 締めの相談の帯 ---- */
.page .cta-band {
  display: grid;
  justify-items: start;
  gap: 16px;
  padding: clamp(28px, 4vw, 56px);
  border: 1px solid var(--pg-line);
  border-radius: var(--pg-radius);
}
.page .cta-band > * { margin: 0; }

/* ---- 狭い画面（375 幅など） ---- */
@media (max-width: 600px) {
  .page { padding: 32px 6vw 64px; }
  .page dl.terms-list > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .page .steps > .step { grid-template-columns: 2.2rem minmax(0, 1fr); }
  .page .contact-form fieldset { grid-template-columns: minmax(0, 1fr); }
  .page .price-card__terms > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}