/* ===========================================================
   Supercherenko — スマレジ連携アプリの開発

   意匠: 店の壁面に連なる棚。
   ページ全体を棚板の連なりとして組み、各セクションを1段とする。
   - 白い紙は値札だけに限る
   - 朱色は行動を促すものだけに限る（CTA と 9枚目の空札）
   - 明朝は語る言葉だけに限る（見出しと値札のキャッチ）
   =========================================================== */

:root {
  /* 棚と地 */
  --shelf:       #e4e8ed;  /* 棚地 */
  --shelf-edge:  #cfd6de;  /* 棚板の面 */
  --rail:        #aeb8c4;  /* 段の細い桟 */
  --board:       #8b95a2;  /* 棚板の稜線 */
  /* 棚板の面。物が乗る平面。地の色を白で薄めた「灰の明るい面」で、
     純白の紙（値札）とは別物として読ませる */
  --face:        rgb(255 255 255 / .34);
  /* 値札の紙。ページ中で唯一の「純白の紙」。地が寒色なので、
     わずかに暖色へ振って紙の材質を出す（純白だとパネルに見える） */
  --paper:       #fffdf9;

  /* 墨 */
  --ink:         #15171b;
  --ink-soft:    #59616d;

  --indigo:      #1b3a6b;  /* 構造を示す色 */
  /* 行動を促す色。棚地(#e4e8ed)の上でも 4.5:1 を満たす濃さにしてある。
     塗り（ベタ）で使うのは押せるもの＝CTAボタンだけ。
     押せないものを塗るとボタンに見えるので、線と文字だけで使う。 */
  --vermilion:   #b7311f;

  /* 書体の役割
     明朝 = 語る（見出し・値札のキャッチ）
     角ゴ = 読ませる（説明・ラベル・日本語のすべて）
     等幅 = 記録する（数値・価格・英字のみ）

     等幅は日本語グリフを持たないため、日本語に指定するとフォールバックで
     別書体になり字面が痩せて読みにくくなる。日本語には使わない。

     本文の最小は 1rem。補助的な説明でも .9375rem を下回らせない。
     ラベルは .8125rem が下限。 */
  --mincho: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif;
  --gothic: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
  --mono:   "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  /* 数値に日本語が混じる箇所用。等幅に無い字は system 任せにせず角ゴへ落とす */
  --mono-jp: "IBM Plex Mono", "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", Meiryo, monospace;

  --measure: 68rem;
  --pad: clamp(1.25rem, 5vw, 3rem);
  /* 棚板の面を内寸より左右に広げる量。文字が面の端に触れないようにする */
  --bleed: clamp(1rem, 2.5vw, 2.5rem);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

/* 地は無地。
   有孔ボードのテクスチャを試したが外した。「さみしい」はヒーローに
   空札という物体を置いたことで解決したため、地を飾る役割がなくなった。
   左右の余白にしか出ず、狭い画面では消える装飾は不整合を残すだけ。
   材質感は地ではなく値札の紙で出す（--paper を寒色の地に対して暖色寄りにしてある）。 */
body {
  margin: 0;
  background: var(--shelf);
  color: var(--ink);
  font-family: var(--gothic);
  font-size: 1rem;
  line-height: 1.8;
  font-feature-settings: "palt" 1;
}

h1, h2, h3 { margin: 0; font-weight: 700; line-height: 1.4; }
p { margin: 0; }
a { color: inherit; }

.skip { position: absolute; left: -9999px; background: var(--ink); color: #fff; padding: .75rem 1rem; z-index: 10; }
.skip:focus { left: 1rem; top: 1rem; }

:focus-visible { outline: 2px solid var(--vermilion); outline-offset: 3px; }

/* 内寸。全セクションで共通 */
.wrap { width: min(var(--measure), 100% - var(--pad) * 2); margin-inline: auto; }

/* ── ワードマーク ───────────────────────────────
   表記は「Supercherenko」。大文字化しない。
   広い字送り（.22em）は全大文字のための設定なので、
   先頭大文字に変えたぶん字送りをほぼ詰め、サイズで存在感を出す。 */
.wordmark {
  font-family: var(--mono);
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -.005em;
  color: var(--indigo);
}
.wordmark--sm { font-size: .9375rem; }

/* ── ヘッダー ─────────────────────────────────── */
.masthead {
  display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; align-items: baseline;
  padding-top: 1.75rem;
}
.masthead__note { font-size: .9375rem; color: var(--ink-soft); }

/* ── ヒーロー ─────────────────────────────────
   最初の桟に空札が1枚だけ掛かっている状態。
   提案そのものを主題の物体として最初に見せる。 */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 20rem);
  gap: clamp(1.75rem, 4vw, 2.75rem) clamp(2rem, 5vw, 4.5rem);
  /* 両列の底を揃える。start にすると空札の下に空白が残り、
     下の罫線が左の列だけを閉じているように見えて締まらない */
  align-items: stretch;
  padding: clamp(2.5rem, 6vw, 4rem) 0 clamp(1.75rem, 3.5vw, 2.5rem);
}
.hero__text { grid-column: 1; display: flex; flex-direction: column; }
.hero__rail { grid-column: 2; display: flex; flex-direction: column; }

/* 桟から下を伸ばし、空札を列の高さいっぱいに立てる */
@media (max-width: 62rem) {
  .hero { grid-template-columns: 1fr; align-items: start; }
  .hero__text, .hero__rail { grid-column: 1; }
}

.hero__text { min-width: 0; }

/* ヒーローの桟は棚段と同じ構造を使う。段の名札・桟・吊り紐・穴をそのまま継承する */
.hero__rail { margin-bottom: 0; }
/* flex 化すると inline-block の名札が列幅まで伸びるので、札の幅に留める */
.hero__rail .rack__label { align-self: flex-start; }

.hero__title {
  font-family: var(--mincho);
  font-size: clamp(2.5rem, 7.5vw, 4.75rem);
  line-height: 1.24;
  letter-spacing: .01em;
  margin-bottom: 1.75rem;
}

.hero__lead {
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  line-height: 1.95;
  color: var(--ink-soft);
  max-width: 38rem;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: .875rem; margin-top: auto; padding-top: 2.25rem; }

/* 実績の要約。箱を作らず、値札に押す検印のように一行で置く */
.spec {
  grid-column: 1 / -1;
  list-style: none;
  margin: 0;
  padding: 1rem 0 0;
  border-top: 1px solid var(--board);
  display: flex;
  flex-wrap: wrap;
  font-size: .875rem;
  color: var(--ink-soft);
}
.spec li { padding: 0 .875rem; border-left: 1px solid var(--rail); }
.spec li:first-child { padding-left: 0; border-left: 0; }
.spec b { color: var(--ink); font-weight: 700; font-family: var(--mono-jp); font-variant-numeric: tabular-nums; }

/* ── ボタン ───────────────────────────────────── */
.btn {
  display: inline-block;
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  padding: .875rem 1.75rem;
  border: 1px solid transparent;
  transition: background-color .18s ease, border-color .18s ease;
}
.btn--primary { background: var(--vermilion); color: #fff; }
.btn--primary:hover { background: #962616; }
.btn--quiet { border-color: var(--board); color: var(--ink); }
.btn--quiet:hover { border-color: var(--ink); }
.btn--lg { padding: 1.125rem 2.5rem; font-size: 1.0625rem; }

/* ── 棚板（全セクション共通の構造） ──────────────
   構造は「棚板の稜線 → 段の見出し → 中身」で全段そろえる。
   セクションを仕切る装飾ではなく、板の上に物が乗っている状態を示す。 */
/* 段の間隔は .board__edge の margin-top だけで作る（二重に効かせない）。
   面（.board::before）は内寸より左右に広げ、稜線を前縁として物が乗る平面を作る。
   面がないと細い罫線の上に文字が浮くだけになり、作りかけに見える。 */
.board {
  position: relative;
  padding-bottom: clamp(1.75rem, 4vw, 2.75rem);
}
.board::before {
  content: "";
  position: absolute;
  inset: 0 calc(-1 * var(--bleed));
  background: var(--face);
  z-index: -1;
}

/* 棚板の稜線。1pxの稜 + 2pxの面で板の厚みを出す */
.board__edge {
  position: relative;
  height: 3px;
  margin-top: clamp(2.5rem, 6vw, 4rem);
  margin-bottom: clamp(1.5rem, 3.5vw, 2.25rem);
}
.board__edge::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: var(--board); }
/* 板は有孔ボードの手前にあるので、地に影が落ちる */
.board__edge::after {
  content: "";
  position: absolute; inset: 1px 0 auto 0;
  height: 2px;
  background: var(--shelf-edge);
  box-shadow: 0 2px 5px rgb(21 23 27 / .07);
}

.board__title {
  font-family: var(--mincho);
  font-size: clamp(1.375rem, 3vw, 1.875rem);
  margin-bottom: .875rem;
}
.board__lead {
  font-size: 1rem;
  line-height: 1.9;
  color: var(--ink-soft);
  max-width: 42rem;
  margin-bottom: 1.75rem;
}

/* 1枚の板を左右に分けて使う段 */
.board__split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: clamp(2.5rem, 5vw, 4rem);
}
.board__split .board__title { margin-bottom: 1.5rem; }

/* ── 段（値札が掛かる桟） ──────────────────────── */
.rack { margin-bottom: clamp(2.5rem, 5vw, 3.75rem); }
.rack:last-of-type { margin-bottom: 0; }

/* 段の名札。棚の縁に差し込む形 */
.rack__label {
  display: inline-block;
  background: var(--indigo);
  color: #fff;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .02em;
  padding: .5rem .875rem;
}

.rack__tags {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18.5rem, 1fr));
  gap: 1.5rem;
  padding-top: 2.25rem;
}
/* 桟は棚板より細い。階層を線の太さで示す。影も浅くする */
.rack__tags::before {
  content: "";
  position: absolute; inset: 0 0 auto 0;
  height: 1px;
  background: var(--rail);
  box-shadow: 0 1px 3px rgb(21 23 27 / .05);
}

/* ── 値札。ページ中で白い紙はここだけ ──────────── */
.tag {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--shelf-edge);
  padding: 1.625rem 1.375rem 1.25rem;
  text-decoration: none;
  /* 紙の厚み。上辺に内側の光、下に落ちる影で1枚の紙として立たせる */
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .9),
    0 1px 1px rgb(21 23 27 / .05),
    0 3px 8px rgb(21 23 27 / .05);
  transform-origin: 1.625rem .5rem;
  transition: transform .22s ease, box-shadow .22s ease;
}
/* ヒーローのサムネイルから飛んできたとき、上端に張り付かないよう余白を取る */
.tag { scroll-margin-top: clamp(1.5rem, 4vw, 3rem); }

/* 吊り紐 */
.tag::before {
  content: "";
  position: absolute;
  left: 1.625rem; top: -2.25rem;
  width: 1px; height: 2.25rem;
  background: var(--rail);
}
/* 紐通しの穴 */
.tag__hole {
  position: absolute;
  left: 1.25rem; top: .625rem;
  width: .5rem; height: .5rem;
  border-radius: 50%;
  background: var(--shelf);
  box-shadow: inset 0 1px 1px rgb(21 23 27 / .18);
}
.tag:hover, .tag:focus-visible {
  transform: translateY(-3px) rotate(-.7deg);
  box-shadow: 0 10px 22px rgb(21 23 27 / .1);
}

/* 紹介ページの写し */
.tag__shot {
  display: block;
  width: 100%; height: auto;
  aspect-ratio: 5 / 3;
  object-fit: cover;
  object-position: top center;
  margin: .25rem 0 1rem;
  border: 1px solid var(--shelf-edge);
  background: var(--shelf);
}

.tag__for {
  font-size: .8125rem;
  color: var(--ink-soft);
  margin: .5rem 0 .875rem;
}
.tag__shot + .tag__for { margin-top: 0; }

.tag__name { font-size: 1.125rem; font-weight: 700; line-height: 1.6; margin-bottom: .625rem; }

/* 値札の上で語る一行。明朝はここまで */
.tag__copy {
  font-family: var(--mincho);
  font-size: 1.0625rem;
  line-height: 1.85;
  color: var(--ink);
}

/* 裏書き。何をどう作ったかを固有名詞で書く */
.tag__spec { font-size: .9375rem; line-height: 1.9; color: var(--ink-soft); margin-top: .875rem; }

.tag__rule { display: block; height: 1px; background: var(--shelf-edge); margin: 1.25rem 0 1rem; }

.tag__price {
  /* 「¥2,200」と「アプリマーケット掲載」の両方が入るため mono-jp */
  font-family: var(--mono-jp);
  font-size: 1.0625rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  margin-bottom: 1rem;
}
.tag__unit { font-size: .8125rem; font-weight: 400; color: var(--ink-soft); margin-left: .25rem; font-family: var(--gothic); }

.tag__more { margin-top: auto; font-size: .9375rem; font-weight: 500; color: var(--indigo); }
.tag__more::after { content: " →"; }

/* 分類の検印。朱は使わない */
.tag--flag { overflow: hidden; }
.tag__flag {
  position: absolute; top: 0; right: 0;
  background: var(--indigo);
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .02em;
  padding: .375rem .625rem;
}
/* 状態の表示は主張しない。まだ公開されていないことを示すだけ */
.tag__flag--pending { background: none; color: var(--ink-soft); box-shadow: inset 0 0 0 1px var(--shelf-edge); }

/* ── 対応業態。箱にせず記録の一連なりとして置く ─── */
.trades { border-top: 1px solid var(--shelf-edge); padding-top: 1.75rem; margin-top: clamp(2rem, 5vw, 3rem); }
.trades__title { font-size: 1rem; margin-bottom: .875rem; }
.trades__list {
  list-style: none; margin: 0; padding: 0;
  font-size: .9375rem;
  line-height: 2.2;
}
.trades__list li { display: inline; }
.trades__list li + li::before { content: "・"; color: var(--rail); }
.trades__note { margin-top: 1rem; font-size: .9375rem; line-height: 1.85; color: var(--ink-soft); }

/* ── 相談できること ───────────────────────────── */
/* 見出しが2行に折れないよう、最大2列に留める */
.scope { display: grid; grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr)); gap: 2rem 3rem; margin: 0; }
.scope__item { border-top: 1px solid var(--shelf-edge); padding-top: 1.25rem; }
.scope dt { font-size: 1.0625rem; font-weight: 700; line-height: 1.7; margin-bottom: .5rem; }
.scope dd { margin: 0; font-size: 1rem; line-height: 1.95; color: var(--ink-soft); }

/* ── 注記。地の上に藍の桟だけで立てる ──────────── */
.note { margin-top: 2.75rem; border-left: 3px solid var(--indigo); padding: .25rem 0 .25rem 1.25rem; }
.note__title { font-size: 1.0625rem; line-height: 1.7; margin-bottom: .625rem; }
.note p { font-size: 1rem; line-height: 1.95; color: var(--ink-soft); max-width: 44rem; }
.note strong { color: var(--ink); }

/* ── 進め方。順序が意味を持つので番号を振る ─────── */
.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; }
.steps__item {
  counter-increment: step;
  position: relative;
  padding: 0 0 1.375rem 3rem;
  border-bottom: 1px solid var(--shelf-edge);
  margin-bottom: 1.375rem;
}
.steps__item:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.steps__item::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: .3125rem;
  font-family: var(--mono);
  font-size: .9375rem;
  color: var(--indigo);
}
.steps__t { display: block; font-size: 1.0625rem; font-weight: 700; margin-bottom: .3125rem; }
.steps__d { display: block; font-size: 1rem; line-height: 1.95; color: var(--ink-soft); }

/* ── ご依頼の型。型ごとに目安額を出す ─────────────
   金額は非公開にしていたが、予算の見当が付かないと問い合わせ自体が
   起きないため、型に紐づけた下限を出す方針に変えた。
   数値は等幅で「記録」として置き、型の名前と同じ行に右寄せする。 */
.kinds { list-style: none; margin: 0; padding: 0; }
.kinds__item { border-bottom: 1px solid var(--shelf-edge); padding: 1.125rem 0; }
.kinds__item:first-child { border-top: 1px solid var(--shelf-edge); }
.kinds__item strong { display: block; font-size: 1.0625rem; font-weight: 700; margin-bottom: .25rem; }
.kinds__item span { display: block; font-size: 1rem; line-height: 1.9; color: var(--ink-soft); }
.kinds__item b { color: var(--ink); font-weight: 700; }

/* 型の名前と目安額を同じ行に置く。
   .kinds__item span より詳細度を上げないと display:block に負ける */
.kinds__item .kinds__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .125rem .75rem;
  margin-bottom: .25rem;
}
.kinds__item .kinds__head strong { margin-bottom: 0; }
.kinds__item .kinds__price {
  display: inline;
  font-family: var(--mono-jp);
  font-size: 1.0625rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  white-space: nowrap;
}
/* 「万円」「〜」は等幅に無い、または字面が合わないので角ゴへ落とす */
.kinds__price em {
  font-family: var(--gothic);
  font-style: normal;
  font-size: .8125rem;
  font-weight: 400;
  color: var(--ink-soft);
  margin-left: .1875rem;
}

/* 入口の段。藍の桟で立てる */
.kinds__item--entry { border-left: 3px solid var(--indigo); padding-left: 1.125rem; }

/* 月額の段。上の5段は単発の開発費、これは納品したあとの話なので、
   間を空けて濃い罫線で区切る。単位が混ざったまま並べると読み違える */
.kinds__item--sub { margin-top: .875rem; border-top: 1px solid var(--board); }

/* ── 費用の決め方 ─────────────────────────────── */
.quote { margin-top: 1.75rem; border-top: 1px solid var(--board); padding-top: 1.25rem; }
.quote__title { font-size: 1.0625rem; margin-bottom: .75rem; }
.quote p { font-size: 1rem; line-height: 1.95; color: var(--ink-soft); }
.quote p + p { margin-top: .75rem; }
.quote strong { color: var(--ink); }

/* ── 納品するもの ─────────────────────────────── */
.handover__lead { font-size: 1.0625rem; line-height: 1.95; margin-bottom: 2rem; max-width: 42rem; color: var(--ink-soft); }
.handover { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 1.5rem 2.5rem; }
.handover li { border-top: 1px solid var(--shelf-edge); padding-top: 1.125rem; }
.handover strong { display: block; font-size: 1.0625rem; font-weight: 700; margin-bottom: .3125rem; }
.handover span { display: block; font-size: 1rem; line-height: 1.95; color: var(--ink-soft); }

/* ── FAQ ──────────────────────────────────────── */
.faq { border-top: 1px solid var(--shelf-edge); }
.faq__item { border-bottom: 1px solid var(--shelf-edge); }
.faq__item summary {
  cursor: pointer; list-style: none;
  padding: 1.125rem 2.5rem 1.125rem 0;
  position: relative;
  font-size: 1.0625rem; font-weight: 700; line-height: 1.7;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "＋";
  position: absolute; right: .25rem; top: 1.125rem;
  font-size: 1.125rem; font-weight: 700;
  color: var(--ink-soft);
}
.faq__item[open] summary::after { content: "−"; }
.faq__item p {
  font-size: 1rem; line-height: 1.95; color: var(--ink-soft);
  padding: 0 2.5rem 1.375rem 0; margin-top: -.25rem; max-width: 44rem;
}

/* ── 問い合わせ ───────────────────────────────── */
.contact { padding: clamp(3rem, 7vw, 5rem) 0 clamp(3.5rem, 8vw, 5.5rem); }
.contact__title {
  font-family: var(--mincho);
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  line-height: 1.4;
  margin-bottom: 1.125rem;
}
.contact__lead { font-size: 1.0625rem; line-height: 1.95; color: var(--ink-soft); max-width: 38rem; margin-bottom: 2rem; }

/* 「送るときに書いてほしいこと」の4項目（.ask）と、フォームとメールを
   並べたボタン（.contact__actions）はフォームの入力欄に置き換えたので削除した。
   同じことを欄と箇条書きで二重に言う状態になっていた。 */

/* ── フッター ─────────────────────────────────── */
.foot { border-top: 1px solid var(--shelf-edge); padding: 1.75rem 0 3rem; }
.foot__note { margin-top: .75rem; font-size: .875rem; line-height: 1.85; color: var(--ink-soft); }

/* ── 狭い画面 ─────────────────────────────────── */
@media (max-width: 34rem) {
  .rack__tags { gap: 1.25rem; }
  .tag { padding: 1.5rem 1.125rem 1.125rem; }
  .spec li { padding: 0 .625rem; }
}

/* ── 動き ─────────────────────────────────────
   桟から吊られた札は揺れる。それが物理的に正しい挙動なので、
   読み込み時に一度だけ揺れて落ち着かせる。

   触るのは transform だけ。opacity には一切触らない。
   前にスクロール駆動の演出で opacity が戻らず札が全部消えたので、
   失敗したときに中身が見えなくなる書き方はしない。

   fill-mode は backwards。forwards にすると終了後もアニメーションの
   transform が残り、ホバーの揺れが効かなくなる。 */
@media (prefers-reduced-motion: no-preference) {
  .tag { animation: settle .85s cubic-bezier(.22, 1, .36, 1) backwards; }

  /* 同じ段の2枚目を遅らせて、順に掛かったように見せる */
  .rack__tags .tag:nth-child(2) { animation-delay: .12s; }

  @keyframes settle {
    from { transform: rotate(1.8deg); }
    55%  { transform: rotate(-.7deg); }
    80%  { transform: rotate(.25deg); }
    to   { transform: rotate(0); }
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .tag { transition: none; animation: none; }
  .tag:hover, .tag:focus-visible { transform: none; }
}

/* ── 文書ページ（個人情報の取り扱いなど） ────────
   トップと同じ棚板の上に、素の文章を置く。専用の意匠は作らない。 */
.doc { max-width: 44rem; }
.doc h2 {
  font-size: 1.125rem;
  margin: 2.5rem 0 .75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--shelf-edge);
}
.doc h2:first-of-type { margin-top: 0; }
.doc p { font-size: 1rem; line-height: 1.95; color: var(--ink-soft); }
.doc p + p { margin-top: .875rem; }
.doc strong { color: var(--ink); }
.doc__contact { font-family: var(--mono); }
.doc__date { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--board); font-size: .9375rem; }
.doc__back { margin-top: 2rem; font-weight: 500; }
.doc__back a { color: var(--indigo); }
.doc__back a::after { content: " →"; }

/* ワードマークをリンクにしても下線を出さない */
a.wordmark { text-decoration: none; }

.foot__links {
  margin-top: .625rem;
  font-size: .875rem;
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1.25rem;
}
.foot__links a { color: var(--indigo); }
.foot__links span { color: var(--ink-soft); }

.contact__privacy { margin-top: 1.5rem; font-size: .875rem; line-height: 1.85; color: var(--ink-soft); max-width: 34rem; }
.contact__privacy a { color: var(--indigo); }

/* ── ヒーローの壁：8枚の実物 + 9枚目の空き ────────
   ヒーローに証拠を置く。主張だけの第一画面は弱い。
   9つの枡のうち8つが埋まっていて1つ空いている状態を1つの物として見せる。 */
.rack__tags--wall {
  flex: 1;
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem;
  padding-top: 1.5rem;
  /* 行を伸ばして左列の下端と揃える。start だと下に空白が残る */
  align-content: stretch;
}

.mini {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--shelf-edge);
  padding: .25rem .25rem .375rem;
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .9), 0 1px 2px rgb(21 23 27 / .06);
  transition: transform .18s ease, box-shadow .18s ease;
}
.mini:hover, .mini:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgb(21 23 27 / .12);
}
.mini img {
  display: block;
  width: 100%; height: auto;
  aspect-ratio: 5 / 3;
  object-fit: cover;
  object-position: top center;
  background: var(--shelf);
}
.mini__name {
  font-size: .625rem;
  line-height: 1.35;
  font-weight: 500;
  color: var(--ink-soft);
  margin-top: .25rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 9枚目の空き枠。塗らず線だけ（朱の塗りは押せるボタンのみ） */
.mini--blank {
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px dashed var(--vermilion);
  box-shadow: none;
  padding: .5rem;
}
.mini--blank:hover, .mini--blank:focus-visible {
  background: var(--paper);
  box-shadow: 0 6px 14px rgb(183 49 31 / .14);
}
.mini__blank {
  font-size: .75rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  color: var(--vermilion);
}

/* ── 相談フォーム ─────────────────────────────
   素の <form method="post">。ブラウザ側の JavaScript は使わない。
   送信は Worker（src/index.js）が受けて、303 で結果ページへ飛ばす。

   入力欄の地は純白にしない。純白の紙（--paper）は値札だけのものなので、
   白を透かした「書ける面」として地から浮かせる程度に留める。
   朱は必須マークに使うが、線と文字だけ。塗りの朱は送信ボタンのみ。 */
.form { max-width: 44rem; }
.form__note {
  font-size: .9375rem;
  line-height: 1.85;
  color: var(--ink-soft);
  margin-bottom: 1.5rem;
}
.form__note b { color: var(--ink); font-weight: 700; }

.form__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.125rem 1.5rem;
}

.field { display: block; min-width: 0; }
.field--wide { grid-column: 1 / -1; }

.field__label {
  display: block;
  font-size: .9375rem;
  font-weight: 700;
  line-height: 1.6;
  margin-bottom: .375rem;
}
/* 必須の印。線と文字だけで、塗らない */
.field__req {
  font-style: normal;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--vermilion);
  box-shadow: inset 0 0 0 1px currentColor;
  padding: .0625rem .3125rem;
  margin-left: .5rem;
  vertical-align: .0625rem;
}

.field__input {
  display: block;
  width: 100%;
  font-family: var(--gothic);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink);
  background-color: rgb(255 255 255 / .62);
  border: 1px solid var(--board);
  border-radius: 0;
  padding: .6875rem .75rem;
  transition: background-color .18s ease, border-color .18s ease;
}
.field__input:hover { border-color: var(--ink-soft); }
.field__input:focus { background-color: rgb(255 255 255 / .92); border-color: var(--indigo); }

textarea.field__input { min-height: 9.5rem; line-height: 1.85; resize: vertical; }

/* ネイティブの見た目のままだと他の欄と材質が揃わないので、矢印だけ自前で描く */
select.field__input {
  appearance: none;
  padding-right: 2.25rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5l5-5' fill='none' stroke='%2359616d' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .875rem center;
  background-size: .75rem auto;
}

/* 機械よけ。人には見せず、埋まっていたら送信を捨てる */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .875rem 1.5rem;
  margin-top: 1.75rem;
}
button.btn { font-family: inherit; cursor: pointer; }
.form__alt { font-size: .9375rem; line-height: 1.8; color: var(--ink-soft); }
.form__alt a { color: var(--indigo); }

/* ── 事業概要の一覧 ─────────────────────────────
   個人事業主なので「会社概要」ではなく「事業概要」。法人ではない */
.info { margin: 0; }
.info__row {
  display: grid;
  grid-template-columns: 11rem 1fr;
  gap: .25rem 1.5rem;
  border-top: 1px solid var(--shelf-edge);
  padding: .875rem 0;
}
.info__row:last-child { border-bottom: 1px solid var(--shelf-edge); }
.info dt { font-size: .9375rem; font-weight: 700; line-height: 1.8; }
.info dd { margin: 0; font-size: 1rem; line-height: 1.9; color: var(--ink-soft); }
.info dd strong { color: var(--ink); font-weight: 500; }
.info dd a { color: var(--indigo); }
.info__mono { font-family: var(--mono); }

@media (max-width: 34rem) {
  .info__row { grid-template-columns: 1fr; }
}