/* AI帯替え サイト共通スタイル
 *
 * 本文は端末の標準フォントで表示します。見出しなどの表示用の要素だけ、Google Fonts の Shippori Mincho を
 * 使う文字に絞って読み込みます（読み込みの扱いはプライバシーポリシー 5. に記載しています）。
 * 色は墨・白・朱の3つを軸にし、:root のトークンで定めています。
 * 背景は単色、動きは transform・clip-path・visibility だけで作り、prefers-reduced-motion では止まります。
 */

:root {
  --ink:          #1A1A1A;  /* 墨。見出し・ボタン面。白地で 17.4:1 */
  --text:         #3C3C3C;  /* 本文。白地で 10.4:1、--bg-soft の上で 10.0:1 */
  --muted:        #666666;  /* 注釈。白地で 5.7:1、--bg-soft の上で 5.2:1 */
  --line:         #D4D4D4;  /* 細罫（装飾） */
  --line-strong:  #9A9A9A;  /* 寸法線・線画 */
  --line-input:   #767676;  /* 入力欄の枠。白地で 4.5:1（WCAG 1.4.11 の 3:1 を満たす） */
  --vermilion:    #B8321A;  /* 朱。検出枠・注記・強調。白地で 5.9:1 */
  --bg-soft:      #F3F3F3;  /* 申込の区画・フッタの地 */

  --radius:   2px;
  --gutter:   20px;   /* スマホの左右の余白 */
  --wrap:     1200px;
}

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

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

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex; flex-direction: column;
  background: #fff;
  color: var(--text);
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "Yu Gothic", YuGothic,
               "Noto Sans JP", Meiryo, sans-serif;
  /* 本文は 16px 以上 */
  font-size: 16px;
  line-height: 1.9;
  font-feature-settings: "palt";
}
main { flex: 1 0 auto; }

/* 日本語の改行は文節で（効かないブラウザでは通常の改行） */
h1, h2, h3, dt, label, figcaption, .lead, .hero__lead, .hero__micro, .proof { word-break: auto-phrase; }
p, dd, td, li { text-wrap: pretty; }
.nobr, a[href^="mailto:"], a[href^="tel:"] { white-space: nowrap; }

h1, h2, h3 { color: var(--ink); line-height: 1.45; font-weight: 700; }
/* 表示用の書体。この2つのセレクタ以外に当てない（読み込む文字をここから集める）。
 * text= で絞った書体には palt が入らないので、字間は負の letter-spacing で詰める */
h1, .mincho {
  font-family: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif;
  font-feature-settings: "palt"; letter-spacing: -.06em;
}
/* 縦組みの中の英字（AI）は縦中横 */
.tcy { text-combine-upright: all; }
h1 { font-size: 28px; margin: 0 0 14px; }
h2 { font-size: 22px; margin: 44px 0 14px; }
h3 { font-size: 17px; margin: 28px 0 8px; }

p { margin: 0 0 1em; }
a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--vermilion); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
img { max-width: 100%; height: auto; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  /* スマホで左右の余白を確保し、横スクロールを出さない */
  padding: 0 var(--gutter);
}

/* 本文が主役の固定ページ（運営会社・規約など）の読みやすい幅 */
.prose { max-width: 760px; margin: 0 auto; padding: 40px var(--gutter) 72px; }
.prose h1 { font-size: 27px; margin: 0 0 18px; padding-bottom: 18px; border-bottom: 1px solid var(--ink); }
.prose h2 { font-size: 20px; margin: 44px 0 12px; }
.prose ul, .prose ol { margin: 0 0 1em; padding-left: 1.4em; }
.prose li { margin: .3em 0; }
/* 規約の「号」（(1)(2)…）。番号は本文に書くので、リストの番号は出さない */
.prose ol.items { list-style: none; padding-left: 1em; margin: .3em 0 .6em; }

/* ── キーボード用のスキップリンク ── */
.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: #fff; padding: 10px 14px; z-index: 10;
  text-decoration: none;
}
.skip:focus { left: 0; }

/* ── ヘッダ ── */
.site-head { background: #fff; }
.site-head__inner { display: flex; align-items: center; min-height: 64px; gap: 20px; border-bottom: 1px solid var(--ink); }
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--ink); font-weight: 700; font-size: 19px; text-decoration: none;
}
.brand:hover { color: var(--vermilion); }
/* 印（マイソクの下端に帯が入った形）。装飾なのでインライン SVG */
.brand__mark { width: 20px; height: 24px; flex: 0 0 auto; }
.brand__sheet { fill: #fff; stroke: var(--ink); stroke-width: 1.5; }
.brand__band { fill: var(--ink); }

/* ── フッタ ── */
.site-foot {
  padding: 36px 0 44px;
  background: var(--bg-soft); border-top: 1px solid var(--line);
  /* 注釈も 12px 未満にしない */
  font-size: 14px;
}
.site-foot__name { color: var(--ink); font-weight: 700; margin: 0 0 12px; }
.site-foot__links {
  list-style: none; margin: 0 0 16px; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px 20px;
}
.site-foot__copy { margin: 0; color: var(--text); font-size: 13px; }

/* ── 表（運営会社の会社概要など） ── */
.table { width: 100%; border-collapse: collapse; margin: 0 0 1.5em; font-size: 15px; border-top: 1px solid var(--ink); }
.table th, .table td {
  text-align: left; vertical-align: top;
  padding: 12px 14px; border-bottom: 1px solid var(--line);
}
.table th {
  width: 12em; color: var(--ink); font-weight: 700;
  background: var(--bg-soft); white-space: nowrap;
}
/* スマホでは縦積みにする（12em の見出し列があると横スクロールが出る）。
 * 縦積みは 2列の「項目｜値」の表（.table--kv）だけ。3列以上の表は横スクロールで逃がす。 */
@media (max-width: 599px) {
  .table--kv th, .table--kv td { display: block; width: auto; white-space: normal; }
  .table--kv th { border-bottom: 0; padding-bottom: 2px; background: none; }
  .table--kv td { padding-top: 0; }
  .table-scroll { overflow-x: auto; }
  .table-scroll .table { min-width: 420px; }
}

/* ── 1枚ものの画面（パスワード設定・サンクス）。枠で囲まず、上の罫だけ ── */
.card {
  max-width: 520px; margin: 40px auto; background: #fff;
  border-top: 2px solid var(--ink); padding: 28px 0 32px;
}
.card h1 { font-size: 24px; margin: 0 0 6px; }
.card h2 { font-size: 18px; margin: 26px 0 8px; }
.card__lead { color: var(--muted); font-size: 15px; margin: 0 0 20px; }
.card__foot { margin: 24px 0 0; font-size: 14px; color: var(--muted); }
.steps { margin: 0 0 20px; padding-left: 1.4em; }
.steps li { margin: .3em 0; }
/* 一番伝えたい一文。申込完了の画面で朱を出すと「何か失敗した」と読まれるので墨の罫にする */
.notice {
  margin: 0 0 18px; padding: 12px 0; font-size: 15px; color: var(--ink);
  border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line);
}

/* ── フォーム ── */
label { display: block; color: var(--ink); font-size: 15px; font-weight: 700; margin: 18px 0 6px; }
input[type=password], input[type=text], input[type=email], input[type=tel], select, textarea {
  width: 100%; padding: 11px 12px;
  /* 16px 未満にすると iOS Safari がフォーカス時にページを拡大する */
  font-size: 16px; font-family: inherit; color: var(--ink);
  background: #fff; border: 1px solid var(--line-input); border-radius: var(--radius);
}
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; border-color: var(--ink); }
/* 問い合わせの本文。縦にだけ広げられる */
textarea { resize: vertical; line-height: 1.6; }
.hint { font-size: 14px; color: var(--muted); margin: 6px 0 0; }

.btn {
  display: inline-block; width: 100%; margin-top: 22px; padding: 14px 22px;
  font-size: 16px; font-family: inherit; font-weight: 700; line-height: 1.4; letter-spacing: .04em;
  color: #fff; background: var(--ink);
  border: 0; border-radius: var(--radius); cursor: pointer; text-align: center;
  text-decoration: none;
}
.btn:hover { background: var(--vermilion); color: #fff; }
.btn:disabled { background: #9CA3AF; cursor: not-allowed; }
.btn--sub {
  color: var(--ink); background: #fff; border: 1px solid var(--line-input);
  margin-top: 12px; font-weight: 700;
}
.btn--sub:hover { background: var(--bg-soft); color: var(--ink); }
/* 途中の導線は文字リンクの形（ラベルは同じ。主ボタンは最初の画面・申込・ヘッダだけ） */
.btn--text {
  width: auto; margin: 0; padding: 0 0 2px; background: none; color: var(--ink);
  border-radius: 0; border-bottom: 1px solid var(--ink); font-size: 16px; letter-spacing: .02em;
}
.btn--text::after { content: " →"; }
.btn--text:hover { background: none; color: var(--vermilion); border-color: var(--vermilion); }

/* ── 通知（成功・失敗） ── */
/* `display: none` にしない。aria-live の領域は最初から描画されていないと読み上げられない。 */
.msg { font-size: 15px; border-radius: var(--radius); }
.msg:empty { margin: 0; padding: 0; border: 0; }
/* 背景を淡くし、文字は濃い色にする（白抜きだとコントラストが足りない） */
.msg.error { margin-top: 18px; padding: 12px 14px; background: #FEF2F2; color: #9B1C2E; border: 1px solid #F3C7CE; }
.msg.ok    { margin-top: 18px; padding: 12px 14px; background: #F1F7F2; color: #1B5E34; border: 1px solid #C6E2CE; }

@media (min-width: 600px) {
  h1 { font-size: 32px; }
  h2 { font-size: 24px; }
  .prose h1 { font-size: 32px; }
}

/* ══════════════════════════════════════════════════════════════════
 * LP（/）
 * ══════════════════════════════════════════════════════════════════ */

/* ── ヘッダのナビ（LP だけ） ── */
.site-nav { display: none; margin-left: 12px; gap: 22px; font-size: 15px; }
.site-nav a { color: var(--text); text-decoration: none; }
.site-nav a:hover { color: var(--vermilion); text-decoration: underline; }
.site-head__actions { display: flex; align-items: center; gap: 18px; margin-left: auto; }
.site-head__login { color: var(--ink); font-size: 15px; text-decoration: none; }
.site-head__login:hover { color: var(--vermilion); text-decoration: underline; }
/* ヘッダの CTA は狭い幅では出さない。追従 CTA が担う（ラベルを2種類にしないため） */
.btn--head { display: none; width: auto; margin: 0; padding: 10px 18px; font-size: 14px; }

/* ── 区画 ── */
.sec { padding: 56px 0; }
.sec--signup { background: var(--bg-soft); border-top: 1px solid var(--line); padding-bottom: 72px; }
.lead { margin: 0; max-width: 36em; }

/* ── 最初の画面 ── */
.hero { background: #fff; padding: 24px 0 24px; }
.hero__inner { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px 22px; align-items: start; }
.hero__title {
  grid-column: 1; grid-row: 1; margin: 0;
  writing-mode: vertical-rl; font-size: 36px; line-height: 1.32;
  min-height: 300px; word-break: keep-all;
}
.hero__copy { grid-column: 2; grid-row: 1; align-self: end; min-width: 0; }
.hero__lead { margin: 0; font-size: 16px; max-width: 30em; }
.hero__lead b { color: var(--ink); font-weight: 700; }
.hero__media { grid-column: 1 / -1; grid-row: 2; }
.hero__act { grid-column: 1 / -1; grid-row: 3; }
.btn--hero { width: auto; min-width: 280px; margin-top: 0; padding: 16px 32px; font-size: 17px; }
.hero__micro { margin: 12px 0 0; font-size: 14px; color: var(--muted); }
/* 特許の欄。物件概要表の罫と同じ形 */
.proof { margin: 10px 0 0; font-size: 14px; color: var(--text); }
.proof__num { color: var(--ink); font-weight: 700; }
.proof--hero .proof__num { font-size: 20px; }
.proof__date { color: var(--muted); font-size: 13px; }
.proof__link { font-size: 13px; margin-left: 6px; }
.proof__note { margin: 0 0 .8em; font-size: 13px; color: var(--muted); }
.proof__basis { font-size: 14px; color: var(--muted); }
.patent { margin: 20px 0 0; display: inline-grid; grid-template-columns: auto minmax(0, 1fr); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); font-size: 14px; line-height: 1.5; }
.patent dt { padding: 8px 14px 8px 0; color: var(--ink); font-weight: 700; border-right: 1px solid var(--line); margin: 0; }
.patent dd { padding: 8px 0 8px 14px; margin: 0; color: var(--text); }
.patent dd b { color: var(--ink); font-weight: 700; }

/* 見本のマイソク。外枠（.paper）の高さは固定し、中の層を transform と clip-path だけで動かす。
 * 帯替え前の上に帯替え後を重ね、1本の動きで「走査 → 検出 → 帯に寄って差し替え → 下端を詰める → 名前 → 1つの PDF」。
 * 最初の描画は帯替え前＋検出枠だけ。動きは描画の 1 秒後に始める。 */
.stage { position: relative; padding: 0 20px 20px 0; }
.paper { position: relative; height: 0; padding-bottom: 70.75%; overflow: hidden; background: #fff; border: 1px solid var(--line-strong); z-index: 1; }
.sheet { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.sheet img { position: absolute; left: 0; top: 0; width: 100%; height: auto; aspect-ratio: 1200 / 849; }
.sheet__after { clip-path: inset(0 100% 0 0); }
.sheet__scan { position: absolute; left: 0; right: 0; top: 0; height: 100%; border-bottom: 2px solid var(--vermilion); visibility: hidden; transform: translateY(-100%); }
/* 紙面の下端（差し替え後は実出力と同じ高さに詰める）。全面の層の下辺を線にして transform で上げる */
.paper__edge { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-bottom: 1px solid var(--line-strong); transform: translateY(0); }
/* 検出枠。紙面に対する位置は固定（紙面全体／帯替え前の帯／帯替え後の帯）で、見せる枠を visibility で切り替える */
.frame { position: absolute; left: -2px; right: -2px; border: 2px dashed var(--vermilion); visibility: hidden; }
.frame::before, .frame::after { content: ""; position: absolute; width: 8px; height: 8px; background: var(--vermilion); }
.frame::before { left: -5px; top: -5px; }
.frame::after { right: -5px; bottom: -5px; }
.frame--page { top: 0; bottom: 0; }
.frame--before { top: 86.8%; height: 9.8%; visibility: visible; }
.frame--after { top: 87%; height: 8.4%; }
/* 後ろに重なる2枚（まとめて1つの PDF に）。外枠の余白（右・下 20px）の中に収める */
/* 後ろの2枚も差し替え後と同じ高さに詰めておく（出てくるのは詰めた後） */
.page { position: absolute; left: 0; top: 0; width: calc(100% - 20px); height: calc((100% - 20px) * .96); background: #fff; border: 1px solid var(--line-strong); visibility: hidden; transform: translate(0, 0); }
.shot__note { margin: 8px 0 0; font-size: 13px; color: var(--muted); }
/* 紙面の札（f2）。動いている間は「AIが処理中」、終わったら「AIの処理が完了」 */
.ai-chip { position: absolute; left: 10px; top: 10px; z-index: 2; padding: 2px 10px; font-size: 13px; font-weight: 700; line-height: 1.6; color: #fff; background: var(--vermilion); }
.ai-chip--done { visibility: hidden; background: var(--ink); }
/* 4つの工程を「AIがやる」ものとして囲む帯（f2・g2） */
.ai-run { margin: 12px 0 0; padding: 10px 14px 12px; border: 1px solid var(--ink); background: #fff; }
.ai-run__head { margin: 0 0 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 18px; line-height: 1.5; color: var(--ink); font-weight: 700; }
.ai-run__badge { display: inline-block; padding: 0 8px; font-size: 13px; line-height: 1.7; letter-spacing: .04em; color: #fff; background: var(--vermilion); }
.ai-run .flow { margin: 0; }
.ai-run__note { margin: 8px 0 0; font-size: 14px; color: var(--muted); }

/* 工程。いま動いている段に朱の下線 */
.flow { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 0; font-size: 14px; color: var(--ink); font-weight: 700; }
.flow li { position: relative; padding: 0 0 4px; }
.flow li:not(:last-child)::after { content: "→"; margin: 0 10px; color: var(--muted); font-weight: 400; }
.flow__bar { position: absolute; left: 0; bottom: 0; height: 2px; background: var(--vermilion); visibility: hidden; }
.flow li:first-child .flow__bar { visibility: visible; width: 100%; }
.flow li:not(:last-child) .flow__bar { width: calc(100% - 2.2em); }
/* ファイル名（住所＋面積＋価格）。最初は灰色の仮の文字、動きの中で1字ずつ打ち替わる */
.fname { margin: 6px 0 0; font-size: 14px; color: var(--text); display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; }
.fname__k { color: var(--muted); font-size: 13px; }
.fname__v { display: grid; font-weight: 700; }
.fname__ghost { grid-area: 1 / 1; color: var(--muted); clip-path: inset(0 0 0 0); }
.fname__real { grid-area: 1 / 1; color: var(--ink); background: #fff; clip-path: inset(0 100% 0 0); }
.fname__blur { display: inline-block; width: 3em; height: .9em; background: var(--line); vertical-align: -.05em; }

@media (prefers-reduced-motion: no-preference) {
  .sheet__scan { animation: fv-scan 7s linear 1s infinite; }
  .frame--page { animation: fv-frame-page 7s step-end 1s infinite; }
  .frame--before { animation: fv-frame-before 7s step-end 1s infinite; }
  .frame--after { animation: fv-frame-after 7s step-end 1s infinite; }
  .sheet__after { animation: fv-wipe 7s cubic-bezier(.7, 0, .2, 1) 1s infinite; }
  .paper { animation: fv-trim 7s cubic-bezier(.6, 0, .2, 1) 1s infinite; }
  .paper__edge { animation: fv-edge 7s cubic-bezier(.6, 0, .2, 1) 1s infinite; }
  .fname__real { animation: fv-type 7s steps(24, end) 1s infinite; }
  .fname__ghost { animation: fv-ghost 7s steps(12, end) 1s infinite; }
  .page--2 { animation: fv-page2 7s cubic-bezier(.6, 0, .2, 1) 1s infinite; }
  .page--3 { animation: fv-page3 7s cubic-bezier(.6, 0, .2, 1) 1s infinite; }
  .flow li:nth-child(1) .flow__bar { animation: fv-bar1 7s step-end 1s infinite; }
  .flow li:nth-child(2) .flow__bar { animation: fv-bar2 7s step-end 1s infinite; }
  .flow li:nth-child(3) .flow__bar { animation: fv-bar3 7s step-end 1s infinite; }
  .flow li:nth-child(4) .flow__bar { animation: fv-bar4 7s step-end 1s infinite; }
  .ai-chip--run { animation: fv-chip-run 7s step-end 1s infinite; }
  .ai-chip--done { animation: fv-chip-done 7s step-end 1s infinite; }
  .drop__pdf { animation: drop-in 2.4s cubic-bezier(.5, 0, .3, 1) infinite; }
}
/* 動きを止める設定では、すべて終わった状態で静止する */
@media (prefers-reduced-motion: reduce) {
  .sheet__after { clip-path: inset(0 0 0 0); }
  .paper { clip-path: inset(0 0 4% 0); }
  .paper__edge { transform: translateY(-4%); }
  .frame--before { visibility: hidden; }
  .frame--after { visibility: visible; }
  .fname__real { clip-path: inset(0 0 0 0); }
  .fname__ghost { clip-path: inset(0 0 0 100%); }
  .page { visibility: visible; }
  .page--2 { transform: translate(10px, 10px); }
  .page--3 { transform: translate(20px, 20px); }
  .flow li:first-child .flow__bar { visibility: hidden; }
  .flow li:last-child .flow__bar { visibility: visible; width: 100%; }
  .ai-chip--run { visibility: hidden; }
  .ai-chip--done { visibility: visible; }
}
@keyframes fv-scan {
  0% { visibility: visible; transform: translateY(-100%); }
  10% { visibility: visible; transform: translateY(0); }
  10.1%, 100% { visibility: hidden; transform: translateY(0); }
}
@keyframes fv-frame-page { 0%, 9.9% { visibility: hidden; } 10%, 15.9% { visibility: visible; } 16%, 100% { visibility: hidden; } }
@keyframes fv-frame-before { 0%, 15.9% { visibility: hidden; } 16%, 39.9% { visibility: visible; } 40%, 100% { visibility: hidden; } }
@keyframes fv-frame-after { 0%, 39.9% { visibility: hidden; } 40%, 100% { visibility: visible; } }
@keyframes fv-wipe {
  0%, 30% { clip-path: inset(0 100% 0 0); }
  40%, 100% { clip-path: inset(0 0 0 0); }
}
@keyframes fv-trim {
  0%, 54% { clip-path: inset(0 0 0 0); }
  60%, 100% { clip-path: inset(0 0 4% 0); }
}
@keyframes fv-edge {
  0%, 54% { transform: translateY(0); }
  60%, 100% { transform: translateY(-4%); }
}
@keyframes fv-type {
  0%, 60% { clip-path: inset(0 100% 0 0); }
  72%, 100% { clip-path: inset(0 0 0 0); }
}
@keyframes fv-ghost {
  0%, 55% { clip-path: inset(0 0 0 0); }
  59%, 100% { clip-path: inset(0 0 0 100%); }
}
@keyframes fv-page2 {
  0%, 73.9% { visibility: hidden; transform: translate(0, 0); }
  74% { visibility: visible; transform: translate(0, 0); }
  80%, 100% { visibility: visible; transform: translate(10px, 10px); }
}
@keyframes fv-page3 {
  0%, 75.9% { visibility: hidden; transform: translate(0, 0); }
  76% { visibility: visible; transform: translate(0, 0); }
  82%, 100% { visibility: visible; transform: translate(20px, 20px); }
}
@keyframes fv-bar1 { 0%, 29% { visibility: visible; } 30%, 100% { visibility: hidden; } }
@keyframes fv-bar2 { 0%, 29% { visibility: hidden; } 30%, 59% { visibility: visible; } 60%, 100% { visibility: hidden; } }
@keyframes fv-bar3 { 0%, 59% { visibility: hidden; } 60%, 73% { visibility: visible; } 74%, 100% { visibility: hidden; } }
@keyframes fv-bar4 { 0%, 73% { visibility: hidden; } 74%, 100% { visibility: visible; } }
@keyframes fv-chip-run { 0%, 73.9% { visibility: visible; } 74%, 100% { visibility: hidden; } }
@keyframes fv-chip-done { 0%, 73.9% { visibility: hidden; } 74%, 100% { visibility: visible; } }
@keyframes drop-in { 0% { transform: translateY(-12px); } 55%, 100% { transform: translateY(4px); } }

/* ── 仕事の流れ（縦組みの扉｜工程の進み具合｜3つの段） ── */
.flowsec { display: grid; gap: 24px; }
.flowsec__door { margin: 0; justify-self: start; writing-mode: vertical-rl; font-size: 26px; color: var(--ink); line-height: 1.2; padding-right: 14px; border-right: 1px solid var(--ink); }
.flowsec__body { display: grid; gap: 24px; timeline-scope: --flow; }
/* 工程の進み具合。右の段の進みに合わせて朱の線が動く（対応しないブラウザでは最後の段で静止） */
.progress { position: sticky; top: 0; z-index: 2; background: #fff; list-style: none; margin: 0; padding: 10px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); font-size: 13px; color: var(--muted); font-weight: 700; line-height: 1.4; }
.progress li { padding: 0 6px 10px 0; border-bottom: 1px solid var(--line); }
.progress::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 33.333%; height: 2px; background: var(--vermilion); transform: translateX(200%); }
.stage-rows { view-timeline-name: --flow; view-timeline-axis: block; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .progress::after { animation: flow-progress-x linear both; animation-timeline: --flow; animation-range: cover 10% cover 85%; }
  }
}
@keyframes flow-progress-x { from { transform: translateX(0); } to { transform: translateX(200%); } }
@keyframes flow-progress-y { from { transform: translateY(0); } to { transform: translateY(200%); } }
.stage-row { display: grid; gap: 18px 40px; padding: 28px 0; border-top: 1px solid var(--line); }
.stage-row:first-child { border-top: 0; padding-top: 8px; }
.stage-row h3 { margin: 0 0 8px; font-size: 20px; line-height: 1.5; }
.stage-row p { margin: 0 0 .8em; }
.stage-row p:last-child { margin-bottom: 0; }
/* 実画面の切り抜き（元の大きさ以下で表示し、朱の番号つき注記を重ねる） */
.shot { position: relative; margin: 0; }
.shot img { display: block; width: 100%; height: auto; border: 1px solid var(--line); }
.shot__cap { margin: 8px 0 0; font-size: 13px; color: var(--muted); }
/* アップロードの図（f5）。画面の形をなぞって描く。文言はアプリと同じ */
.drop { position: relative; display: grid; justify-items: center; gap: 2px; padding: 26px 16px 24px; border: 2px dashed var(--line-strong); border-radius: 12px; background: #fff; text-align: center; }
.drop__pdf { display: block; }
.drop__paper { fill: #fff; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.drop__fold { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.drop__tag { fill: var(--vermilion); }
.drop__tagt { fill: #fff; font-size: 11px; font-weight: 700; }
.drop__arrow { display: block; margin: 2px 0 0; }
.drop__arrowl { fill: none; stroke: var(--vermilion); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.drop__t { margin: 4px 0 0; font-size: 17px; font-weight: 700; line-height: 1.6; color: var(--ink); }
.drop__s { margin: 0; font-size: 13px; color: var(--muted); }
/* 2in1 の帯替え前と後（f6） */
.pair { margin: 4px 0 0; grid-column: 1 / -1; }
.pair__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.pair__item img { display: block; width: 100%; height: auto; border: 1px solid var(--line-strong); }
.pair__cap { display: block; margin-top: 4px; font-size: 13px; font-weight: 700; color: var(--ink); }
/* 節の言い切りの一言 */
.stage-row .stage-row__k { font-size: 22px; }

.shot__img { position: relative; }
/* 番号の札（図の中は番号だけ。説明は図の下の凡例に） */
.mark { position: absolute; width: 22px; height: 22px; border-radius: 50%; background: var(--vermilion); color: #fff; font-size: 13px; font-weight: 700; line-height: 22px; text-align: center; }
.mark--a1 { left: 12px; top: 12px; }
.mark--s1 { right: 2%; top: -11px; }
.mark--s2 { left: 2%; top: -11px; }
.mark--line { position: absolute; right: -11px; top: -11px; }
.mark--fill { position: absolute; left: 10px; top: 10px; }
.legend { list-style: none; margin: 10px 0 0; padding: 0; font-size: 14px; color: var(--text); display: grid; gap: 4px; }
.legend li { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 8px; align-items: start; }
.legend__sp { display: none; }
@media (pointer: coarse) {
  .legend__pc { display: none; }
  .legend__sp { display: inline; }
}
.legend b { display: inline-block; width: 22px; height: 22px; border-radius: 50%; background: var(--vermilion); color: #fff; font-size: 13px; line-height: 22px; text-align: center; }
/* 図2: 線（スライダー）と差し替わる範囲（斜線） */
.detect { position: relative; overflow: visible; cursor: ns-resize; }
.detect__img { display: block; width: 100%; height: auto; border: 1px solid var(--line); }
.detect__fill { position: absolute; left: 0; right: 0; top: 61%; bottom: 0; pointer-events: none; }
.detect__hatch { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.detect__hatchline { stroke: var(--vermilion); stroke-width: 1; }
.detect__line { position: absolute; left: 0; right: 0; top: 61%; height: 2px; margin-top: -1px; background: var(--vermilion); cursor: ns-resize; touch-action: none; }
/* 透明な当たり判定（線の上下 14px） */
.detect__line::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; bottom: -14px; }
.detect__line:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.detect__grip { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: #fff; border: 2px solid var(--vermilion); }
.detect__grip::before { content: ""; position: absolute; left: 5px; right: 5px; top: 8px; height: 2px; background: var(--vermilion); }
.detect__grip::after { content: ""; position: absolute; left: 5px; right: 5px; bottom: 8px; height: 2px; background: var(--vermilion); }
.standalone { grid-column: 1 / -1; margin: 24px 0 0; padding: 20px 0 0; border-top: 1px solid var(--ink); font-size: 17px; color: var(--ink); font-weight: 700; }
.standalone small { display: block; margin-top: 4px; font-size: 15px; color: var(--text); font-weight: 400; }

/* ── 料金（見出し → 金額 → 内訳 → 文字リンク） ── */
.price-calc { display: grid; gap: 48px; }
.price { max-width: 720px; }
.price__state { margin: 0 0 6px; font-size: 26px; line-height: 1.4; }
.price__sub { margin: 0 0 18px; font-size: 16px; color: var(--ink); font-weight: 700; }
.price__main { margin: 0; color: var(--ink); line-height: 1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.price__num { font-size: 72px; font-weight: 700; }
.price__unit { font-size: 20px; font-weight: 700; }
.price__tax { flex-basis: 100%; font-size: 15px; color: var(--muted); font-weight: 400; margin-top: 6px; }
.price__list { list-style: none; margin: 16px 0 0; padding: 0; }
.price__list li { font-size: 15px; padding: 8px 0; border-top: 1px solid var(--line); }
.price__cta { margin: 20px 0 0; }

/* ── 試算（枚数を入れると目安が出る） ── */
.calc { max-width: 720px; }
.calc h2 { margin-top: 0; }
.calc h2 { margin: 0 0 8px; font-size: 24px; }
.assume { margin: 0 0 16px; font-size: 14px; color: var(--muted); max-width: 40em; }
.calc__in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; align-items: center; }
.calc__in label { margin: 0; }
.calc__in input { max-width: 160px; text-align: right; }
.calc__out { grid-column: 1 / -1; margin: 6px 0 0; font-size: 17px; font-weight: 700; color: var(--ink); }
.calc__out output { color: var(--vermilion); font-size: 28px; margin: 0 2px; }
.calc__over { grid-column: 1 / -1; margin: 4px 0 0; font-size: 14px; color: var(--vermilion); font-weight: 700; }

/* ── よくある質問 ── */
.faq__title { margin: 0 0 24px; font-size: 26px; }
.faq { margin: 0 0 28px; }
.faq div { border-top: 1px solid var(--line); padding: 16px 0; break-inside: avoid; }
.faq dt { margin: 0 0 6px; color: var(--ink); font-weight: 700; font-size: 16px; }
.faq dd { margin: 0; font-size: 15px; }

/* ── 作り手（節の扉を縦組みで） ── */
.maker { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 24px; align-items: start; }
.maker__label { margin: 0; writing-mode: vertical-rl; font-size: 22px; color: var(--ink); line-height: 1.2; padding-right: 14px; border-right: 1px solid var(--ink); }
.maker p { margin: 0 0 1em; max-width: 40em; }
.maker__k { font-size: 24px; line-height: 1.5; color: var(--ink); font-weight: 700; word-break: auto-phrase; }

/* ── 申込フォーム（枠で囲む箱はここだけ） ── */
.signup {
  max-width: 600px; margin: 0 auto; background: #fff;
  border: 1px solid var(--ink); padding: 28px 22px 32px;
}
.signup h2 { margin: 0 0 8px; font-size: 24px; }
.signup__lead { color: var(--muted); font-size: 15px; margin: 0 0 8px; }
.agree { display: flex; align-items: flex-start; gap: 10px; margin: 22px 0 0; font-size: 15px; }
.agree input { width: 20px; height: 20px; margin: 2px 0 0; flex: 0 0 auto; }
.agree label { display: inline; margin: 0; font-weight: 400; color: var(--text); }
/* ハニーポット。`display:none` にしない（隠されていると判定して避けるボットがいる）。
 * 画面の外へ出し、支援技術からも外す（aria-hidden と tabindex="-1" は HTML 側）。 */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ── モバイルの追従CTA（最初の画面のボタンが見えている間は下へ引っ込める） ── */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  background: #fff; border-top: 1px solid var(--line);
  padding: 10px var(--gutter);
  transition: transform .25s, visibility 0s;
}
.sticky-cta.is-hidden { transform: translateY(110%); visibility: hidden; transition: transform .25s, visibility 0s .25s; }
/* 上に固定の工程の表示、下に追従 CTA があるぶん、ページ内の移動先を避ける */
@media (max-width: 767px) {
  html { scroll-padding: 44px 0 76px; }
}
.sticky-cta .btn { margin-top: 0; }
/* 追従 CTA の高さぶん、最後の区画に余白を足す（フッタが隠れないように） */
.site-foot { padding-bottom: 100px; }

@media (min-width: 600px) {
  .stage-row--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
  .stage-row--split .shot { order: 2; }
  .stage-row--split .pair { order: 3; }
  .faq { column-count: 2; column-gap: 48px; }
  .price-calc { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start; }
}

@media (min-width: 768px) {
  .site-nav { display: flex; }
  .btn--head { display: inline-block; }
  .sec { padding: 80px 0; }
  .hero { padding: 40px 0 32px; }
  .hero__title { font-size: 48px; min-height: 440px; }
  .hero__lead { font-size: 17px; }
  .flowsec { grid-template-columns: 56px minmax(0, 1fr); gap: 40px; }
  .flowsec__door { font-size: 30px; }
  .flowsec__body { grid-template-columns: 170px minmax(0, 1fr); gap: 40px; align-items: start; }
  .progress { top: 96px; display: block; padding: 0 0 0 16px; border-left: 1px solid var(--line); font-size: 14px; }
  .progress li { padding: 0 0 18px; border-bottom: 0; }
  .progress::after { left: -1px; top: 0; bottom: auto; width: 2px; height: 33.333%; transform: translateY(200%); }
  .stage-row { padding: 36px 0; }
  .price__state { font-size: 32px; }
  .faq__title { font-size: 32px; }
  .maker__label { font-size: 26px; }
  /* 広い画面では追従 CTA を出さない（ヘッダの CTA が常に見えている） */
  .sticky-cta { display: none; }
  .site-foot { padding-bottom: 44px; }
}
@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  .progress::after { animation-name: flow-progress-y; }
}
@supports not (animation-timeline: view()) {
  .progress::after { animation: none; }
}
/* 動きを減らす設定: 進み具合の線は最後の段で静止し、ページ内の移動も滑らかにしない */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .progress::after { animation: none; }
}

/* 広い画面: 縦組みの見出し｜本文｜見本マイソク */
@media (min-width: 1100px) {
  .hero { padding: 48px 0 32px; }
  .hero__inner { grid-template-columns: auto minmax(0, 1fr) minmax(0, 500px); gap: 0 44px; align-items: start; }
  .hero__title { grid-row: 1 / span 3; font-size: 54px; min-height: 520px; }
  .hero__copy { grid-column: 2; grid-row: 1; align-self: start; padding-top: 6px; }
  .hero__act { grid-column: 2; grid-row: 2; }
  .hero__media { grid-column: 3; grid-row: 1 / span 3; }
  .hero__lead { font-size: 17px; }
}

/* 図2の赤い線の初期位置（狭い画面は切り抜きが違う。JS が動けば JS が決める） */
@media (max-width: 599px) {
  .detect__fill, .detect__line { top: 55%; }
  .stage-row .stage-row__k { font-size: 20px; }
}

/* ── 操作マニュアル（/manual.html）──
 * 本編の5手順は細罫で区切り、手順の番号だけを朱の明朝で置く。箱で囲まない（枠で囲む箱は申込フォームだけ）。 */
.manual__lead { font-size: 17px; color: var(--ink); }
.prose .manual__toc {
  list-style: none; margin: 20px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: 15px;
}
.prose .manual__toc li { margin: 0; }
.manual__step { margin: 48px 0 0; padding-top: 22px; border-top: 1px solid var(--line); scroll-margin-top: 16px; }
.prose .manual__step h2 { margin: 0 0 12px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; }
.manual__num { font-size: 32px; line-height: 1; color: var(--vermilion); }
.manual__when { font-size: 14px; font-weight: 400; color: var(--muted); }
.manual__shot { margin: 18px 0 16px; }
.manual__aside { font-size: 15px; }
/* LP の FAQ は PC で2段組み。マニュアルは図を大きく見せたいので1段 */
.manual__faq { column-count: 1; }
.manual__faq div { scroll-margin-top: 16px; }
.manual__faq dd .manual__shot { margin: 14px 0 4px; }
.manual__keys { margin: 8px 0 20px; }
.manual__keys summary { cursor: pointer; padding: 8px 0; color: var(--ink); font-weight: 700; }
.manual__keytable th { width: 9em; }
kbd {
  display: inline-block; min-width: 1.6em; padding: 0 6px; text-align: center;
  font-family: inherit; font-size: 14px; line-height: 1.6;
  color: var(--ink); background: #fff; border: 1px solid var(--line-strong); border-radius: var(--radius);
}
.manual__note { margin: 48px 0 0; font-size: 13px; color: var(--muted); }