/* =========================================================
   受付ページ（入り口）の見た目  entry.html
   ・地＝深い緑（#072D20→#14513C）。明るい中心は送信ボタンの球の位置（--sx --sy を entry.js が入れる）
   ・模様＝弊社HPの弧（白い線・濃さ0.5）。180度回した版を使い、線が集まる球を送信ボタンの球に重ねる
   ・文字の後ろは線を35%まで落とす（.hero-copy の下に地の色の薄い幕）
   ・送信ボタン＝HP の #3（cv-motion の cv-btn の写し）。白い面に緑が下からせり上がり、文字が1字ずつ入れ替わり、球の中の矢印が右へ抜けて左から入る
   ・表示例の窓＝HP の #12（中心から四角く開く）／お届けするもの＝HP の #11（横から傾いて入る。文字は薄くしない）
   ・曲線は HP の3本だけ（出る・広がる＝(.16,1,.3,1)／乗せたとき・集まる＝(.55,.05,.22,.99)／数字＝(.25,1,.5,1)）。
     ただし線を光が走る（ln-wave）・窓を光が横切る（win-glint）・受付完了へ切り替わる幕（vt-open）は判定待ちのため元のまま
   ・使わない形：角丸の四角のアイコン・左の縦線の囲み・見出しの短い下線・スローガン調・絵文字
   ・動きは位置と形だけ（文字を薄くしない）。動きを減らす設定では止める
   ・色や位置の変数は CSSOM（style.setProperty）で入れる（style 属性を書かない）
   ========================================================= */
@property --reveal { syntax: "<length>"; inherits: false; initial-value: -400px; }
@property --wave { syntax: "<length>"; inherits: false; initial-value: -800px; }
@property --fr { syntax: "<length>"; inherits: true; initial-value: 0px; }

:root {
  --g0: #072D20;      /* 構造色（いちばん深い） */
  --g1: #0B3A2A;
  --g2: #14513C;      /* 深い緑 */
  --g3: #1B6B4F;      /* 中間 */
  --g4: #23855F;      /* 中間の明るい側（白文字 4.6:1） */
  --mint: #9FD4BF;    /* 装飾（深い緑の上で 5.6〜9.0:1） */
  --glow: #5CF0A8;    /* 光（線を照らす・焦点の枠） */
  --tx: #FFFFFF;
  --tx-2: #CFE3DA;    /* 補足（#072D20 の上で 11.1:1・#14513C の上で 6.9:1） */
  --tx-3: #B8D3C8;    /* 注記（#072D20 の上で 9.4:1） */
  --err: #E5484D;
  --err-tx: #FFB4B0;  /* 深い緑の上の赤い文（8.8:1） */
  --ink: #10241C;     /* 白い入力欄の文字 */
  --ph: #5F6B66;      /* 入力例の文字（白地 5.6:1・赤い欄 5.0:1） */
  --r-face: 4px; --r-part: 3px; --r-tag: 2px;
  --f-head: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
  --f-body: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  --f-num: "Inter", "Noto Sans JP", sans-serif;
  /* 送信ボタン・入力画面のボタンがせり上がる緑（構造色→中間） */
  --cvx-struct: #1B6B4F; --cvx-mid: #23855F;
}
html[data-font="gothic"] { --f-head: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--g0); }
body {
  margin: 0; background: var(--g0); color: var(--tx);
  font-family: var(--f-body); font-size: 15px; line-height: 1.7; letter-spacing: .02em;
  -webkit-font-smoothing: antialiased;
}
@supports not (word-break: auto-phrase) { body { text-wrap: pretty; } } /* Safari だけ、最後の行が1〜2文字にならないように（app.css と同じ） */
button, input, select { font: inherit; }
.ph { display: inline-block; }
/* 長い文（句を塊にすると、収まらない句の中で1字だけ折れる）：Chrome・Edge は句の切れ目で折り、Safari は日本語の通常の折り方（app.css の .pw と同じ） */
.pw { word-break: normal; line-break: strict; overflow-wrap: anywhere; }
@supports (word-break: auto-phrase) { .pw { word-break: auto-phrase; } }
.kp { display: inline; }

/* =========================================================
   最初の画面
   ========================================================= */
.hero {
  position: relative; isolation: isolate; overflow: hidden; overflow: clip;
  min-height: 100vh; min-height: 100svh; padding-bottom: 72px;
  --sx: 30%; --sy: 82%;
  background:
    radial-gradient(circle at var(--sx) var(--sy), #17583F 0, #104834 16%, #0B3A2A 40%, var(--g0) 76%) var(--g0);
}

/* ---------- 模様：HPの弧 ---------- */
.hero-lines {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  /* 線の絵の上端と下端で線が横一列に切れて見えないよう、端だけ地へ消す（位置は entry.js が入れる） */
  -webkit-mask-image: linear-gradient(to bottom, transparent var(--t0, 0px), #000 var(--t1, 0px), #000 var(--b0, 100%), transparent var(--b1, 100%));
  mask-image: linear-gradient(to bottom, transparent var(--t0, 0px), #000 var(--t1, 0px), #000 var(--b0, 100%), transparent var(--b1, 100%));
}
.ln-reveal, .ln-base, .ln-lit { position: absolute; inset: 0; }
.ln-base, .ln-lit {
  background-repeat: no-repeat;
  background-size: var(--bw, 3000px) auto;
  background-position: var(--bx, -900px) var(--by, 0px);
}
.ln-base {
  background-image: url("entry/hp-arc-lines-r180.png");
  opacity: .5; /* 弊社HPの弧の既定の濃さ（はっきり） */
  /* カーソル・指の周りは、引き寄せた明るい線（.ln-lit）だけを見せる */
  -webkit-mask-image: radial-gradient(circle calc(var(--fr) + 1px) at var(--px, -999px) var(--py, -999px), transparent 0, transparent 30%, #000 100%);
  mask-image: radial-gradient(circle calc(var(--fr) + 1px) at var(--px, -999px) var(--py, -999px), transparent 0, transparent 30%, #000 100%);
}
.ln-lit {
  background-image: url("entry/hp-arc-lines-r180.png"), url("entry/hp-arc-glow-r180.png");
  background-size: var(--bw, 3000px) auto, var(--bw, 3000px) auto;
  background-position: var(--bx, -900px) var(--by, 0px), var(--bx, -900px) var(--by, 0px);
  transform-origin: var(--px, 50%) var(--py, 50%);
  transform: scale(var(--pull, 1));
  transition: transform .45s cubic-bezier(.16, 1, .3, 1);
  /* 見せる所＝①カーソル・指の周り ②球へ流れ込む光の帯（--wave が外から球へ縮む） */
  -webkit-mask-image:
    radial-gradient(circle calc(var(--fr) + 1px) at var(--px, -999px) var(--py, -999px), #000 0, rgba(0,0,0,.6) 45%, transparent 100%),
    radial-gradient(circle at var(--sx) var(--sy), transparent calc(var(--wave) - 26px), #000 var(--wave), rgba(0,0,0,.4) calc(var(--wave) + 90px), transparent calc(var(--wave) + 280px));
  mask-image:
    radial-gradient(circle calc(var(--fr) + 1px) at var(--px, -999px) var(--py, -999px), #000 0, rgba(0,0,0,.6) 45%, transparent 100%),
    radial-gradient(circle at var(--sx) var(--sy), transparent calc(var(--wave) - 26px), #000 var(--wave), rgba(0,0,0,.4) calc(var(--wave) + 90px), transparent calc(var(--wave) + 280px));
}
.hero-lines { transition: --fr .5s cubic-bezier(.16, 1, .3, 1); }
.hero-lines.is-near { --fr: 210px; }   /* PC：カーソルの周り */
.hero-lines.is-lens { --fr: 150px; }   /* スマホ：指の周り */
.ln-lit.is-wave { animation: ln-wave 1.75s cubic-bezier(.55, .02, .8, .3) both; }
@keyframes ln-wave { from { --wave: 1700px; } to { --wave: -40px; } }

/* 読み込み時：線が外側から描かれ、球へ向かって伸びる */
.hero.is-drawing .ln-reveal {
  -webkit-mask-image: radial-gradient(circle at var(--sx) var(--sy), transparent calc(var(--reveal) - 240px), #000 var(--reveal));
  mask-image: radial-gradient(circle at var(--sx) var(--sy), transparent calc(var(--reveal) - 240px), #000 var(--reveal));
  animation: ln-draw 2.2s cubic-bezier(.16, 1, .3, 1) .1s both;
}
@keyframes ln-draw { from { --reveal: 2800px; } to { --reveal: -60px; } }

/* 光が球へ届いた瞬間の波紋（ボタンの後ろから外へ） */
.orb-pulse {
  position: absolute; z-index: 0; left: var(--sx); top: var(--sy); width: 0; height: 0; pointer-events: none;
}
.orb-pulse::before, .orb-pulse::after {
  content: ""; position: absolute; left: -60px; top: -60px; width: 120px; height: 120px; border-radius: 50%;
  border: 1.5px solid transparent; transform: scale(.2);
}
.orb-pulse.is-hit::before { animation: orb-ring 1.1s cubic-bezier(.16, 1, .3, 1) both; }
.orb-pulse.is-hit::after { animation: orb-ring 1.4s cubic-bezier(.16, 1, .3, 1) .12s both; }
@keyframes orb-ring {
  0% { transform: scale(.25); border-color: rgba(159, 212, 191, .9); }
  100% { transform: scale(2.6); border-color: rgba(159, 212, 191, 0); }
}

/* ---------- 上の帯 ---------- */
.ent-top {
  position: relative; z-index: 2; max-width: 1240px; margin: 0 auto; padding: 26px 40px 0;
  display: flex; align-items: center; gap: 12px;
}
.ent-brand { font-size: 13px; font-weight: 700; letter-spacing: .14em; color: var(--tx); }
.ent-tag {
  font-size: 11px; font-weight: 700; letter-spacing: .1em; color: var(--mint);
  border: 1px solid rgba(159, 212, 191, .55); border-radius: var(--r-tag); padding: 1px 7px 0; line-height: 1.6;
}

/* ---------- 本体（左＝見出しと入力・右＝表示例） ---------- */
.hero-in {
  position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; padding: 44px 40px 0;
  display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 1fr); gap: 64px; align-items: start;
}
.hero-main { min-width: 0; }
.hero-copy { position: relative; }
/* 文字の後ろの線を35%まで落とす（地の色の幕を65%） */
.hero-copy::before {
  content: ""; position: absolute; inset: -56px -80px -40px -72px; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(7, 45, 32, .65) 0, rgba(7, 45, 32, .65) 64%, rgba(7, 45, 32, 0) 100%);
}

/* 見出しの大きさと左の列の幅＝いちばん長い2行目「御社専用の業務管理ツールを」（明朝 12.83em・ゴシック 12.98em）が列に収まる値
   （2026-10-25 呼び名を「業務管理ツール」にして3字増えたため、44px・列500px から 40px・列520px へ） */
.hero-h {
  margin: 0; font-family: var(--f-head); font-weight: 700; font-size: 40px; line-height: 1.42; letter-spacing: .03em; color: var(--tx);
}
html[data-font="gothic"] .hero-h { font-size: 39px; letter-spacing: .01em; font-feature-settings: "palt"; line-height: 1.45; }
.hl { display: inline-block; white-space: nowrap; vertical-align: top; clip-path: inset(-.25em -.8em -.3em -.8em); }
.hl-i { display: inline-block; }
.hl-3 { color: var(--mint); }
.hero-sub { margin: 18px 0 0; font-size: 15px; line-height: 1.9; color: var(--tx-2); max-width: 30em; }

/* ---------- 入力 ---------- */
.ent-form {
  margin-top: 30px; display: grid; grid-template-columns: minmax(0, 1fr) 176px; gap: 14px 14px;
  grid-auto-flow: row dense; /* HTML ではメールの確認の文を従業員数の欄の前に置く（スマホでメールの直下に出すため）。PC は従業員数をメールの横へ詰める */
}
.fld { min-width: 0; }
.fld-full { grid-column: 1 / -1; }
.fld label { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 13px; font-weight: 700; color: var(--tx); letter-spacing: .04em; }
.tg { display: inline-block; font-size: 10.5px; font-weight: 700; line-height: 1.6; padding: 0 6px; border-radius: var(--r-tag); letter-spacing: .06em; }
.tg-req { background: var(--mint); color: var(--g0); }
.tg-opt { border: 1px solid rgba(207, 227, 218, .55); color: var(--tx-2); padding: 0 5px; }
.fld input, .sel select {
  display: block; width: 100%; height: 50px; padding: 0 14px; margin: 0;
  border: 1px solid #FFFFFF; border-radius: var(--r-part); background: #FFFFFF; color: var(--ink);
  font-size: 15px; font-weight: 500; letter-spacing: .02em;
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .6);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.fld input::placeholder { color: var(--ph); opacity: 1; font-weight: 400; }
.fld input:focus, .sel select:focus { outline: 2px solid var(--glow); outline-offset: 2px; }
.fld input.is-err { border: 2px solid var(--err); background: #FFF0F0; padding: 0 13px; }
.fld-err { margin: 6px 0 0; font-size: 12.5px; font-weight: 700; color: var(--err-tx); }
.fld-err[hidden], .form-msg[hidden] { display: none; }
.fld-hint { margin: 6px 0 0; font-size: 12.5px; line-height: 1.7; color: var(--tx-2); }
/* メールのドメインが URL と違うときだけ出す文と、お名前の欄（原稿 v2 の K）。
   疑っている印象を与えないよう、色の縦線・警告の印・赤い文字は使わず、補足と同じ静かな文で出す */
.mail-extra { display: flex; flex-direction: column; gap: 12px; }
.mail-extra[hidden] { display: none; }
.mail-note { margin: 0; font-size: 13px; line-height: 1.85; color: var(--tx-2); }
.mail-note .ph { max-width: 100%; overflow-wrap: anywhere; } /* 長いドメインでも欄の幅からはみ出さない */
/* 2026-10-25 浜田さんが4案（今・全文を赤・1文目だけ赤の太字・全文を黄）の画像から案Bを選んだ。
   お願いの1文（会社ドメインのアドレスのご入力）だけを読める赤（--err-tx・#072D20 の上で 8.8:1・#14513C の上で 5.5:1）の太字に。
   全文を赤にしないのは、送信後の誤りの表示（同じ赤）と見分けがつかず、Gmail でも受け付けるのに断られたように読めるため */
.mail-note .mail-ask { color: var(--err-tx); font-weight: 700; }
.form-fine { margin: 2px 0 0; font-size: 12.5px; line-height: 1.8; color: var(--tx-2); }
/* 小さな補足の文の後ろを弧の線が通っても読みやすいよう、文字の周りだけ地の緑で縁取る。
   2026-10-25 Codex の見た目の審査：スマホで明るい線が無料の範囲とプライバシーポリシーの文の後ろを通り約2.5:1 まで下がった
   → 縁取りを3段にし、注記の色を補足（--tx-2）にそろえた（線は消さない＝HP の弧の模様は残す） */
.fld-hint, .mail-note, .form-fine, .pv-note, .done-note { text-shadow: 0 0 1px rgba(7, 45, 32, 1), 0 0 3px rgba(7, 45, 32, .95), 0 0 10px rgba(7, 45, 32, .95); }
/* 縁取りだけでは、太い線がリンクの真ん中を横切る所で約3.8:1 に留まった（Codex 2回目）。
   無料の範囲と個人情報の扱いは申し込みの判断に効く文なので、文の後ろにだけ地の緑を薄くぼかして敷く（枠・四角にしない＝周りの弧は見える） */
.form-fine { position: relative; isolation: isolate; }
.form-fine::before {
  content: ""; position: absolute; inset: -6px -12px; z-index: -1; pointer-events: none;
  background: rgba(7, 45, 32, .72); filter: blur(10px); border-radius: 12px;
}
.sel { position: relative; display: block; }
.sel select { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer; }
.sel select:invalid, .sel select.is-blank { color: var(--ph); font-weight: 400; }
.sel-arrow { position: absolute; right: 14px; top: 50%; margin-top: -7px; color: var(--g2); pointer-events: none; }

.form-foot { grid-column: 1 / -1; margin-top: 10px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.form-msg { margin: 0; font-size: 13.5px; font-weight: 700; color: var(--err-tx); }
.form-msg a { color: inherit; }
/* ボットの罠（人には見えない欄）。display:none だと読み飛ばすボットがあるので、画面の外へ出す（2026-10-25） */
.hp-trap { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
/* ボット避け（Turnstile）。確認が要るときだけ枠が出る。出ないあいだは高さを取らない */
.ts-box:empty { display: none; }
.ts-box { min-height: 0; }
/* 注記の中のリンク（プライバシーポリシー）。色だけで分けず下線を付ける */
.fine-link { color: var(--tx-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.fine-link:hover, .fine-link:focus-visible { color: var(--tx); }

/* ---------- 送信ボタン（HP の #3：白い面に緑が下からせり上がる・文字が1字ずつ入れ替わる・右端の球に線が集まる） ----------
   地・文字の動きは cv-motion.css の cv-btn（写し）。ここでは色と大きさと、球の中の矢印だけを書く */
.ent-submit.cv-btn {
  --cv-btn-bg: #FFFFFF; --cv-btn-fg: var(--g0);
  --cv-btn-bg-hov: linear-gradient(120deg, var(--cvx-struct) 0%, var(--cvx-mid) 100%); --cv-btn-fg-hov: #FFFFFF;
  width: auto; min-width: 320px; min-height: 60px; margin: 0; padding: 9px 9px 9px 26px; border-radius: var(--r-face);
  font-size: 16.5px; font-weight: 700; letter-spacing: .08em;
  box-shadow: 0 18px 44px -18px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .6);
}
.ent-submit.cv-btn:focus-visible { outline: 2px solid var(--glow); outline-offset: 3px; }
.ent-submit .sb-in { flex: 1 1 auto; justify-content: space-between; gap: 22px; }
.sb-label { white-space: nowrap; }
.sb-orb {
  position: relative; flex: none; display: block; width: 42px; height: 42px; border-radius: 50%; overflow: hidden; color: var(--g0);
  background: radial-gradient(circle at 34% 30%, #FFFFFF 0, #F1F6F3 42%, #C9DAD2 100%);
  box-shadow: inset 0 0 0 1px rgba(7, 45, 32, .14), 0 2px 6px rgba(7, 45, 32, .18);
}
/* 球の中の矢印：右の矢印が右へ抜けて消え、左に隠していた矢印が入る（球の外は切れて見えない＝薄くしない） */
.sb-arw { position: absolute; inset: 0; display: grid; place-items: center; transition: translate .45s cubic-bezier(.16, 1, .3, 1); }
.sb-arw-l { translate: -30px 0; }
.ent-submit:is(:active, :focus-visible, .is-on) .sb-arw-r { translate: 30px 0; }
.ent-submit:is(:active, :focus-visible, .is-on) .sb-arw-l { translate: 0 0; }
@media (hover: hover) {
  .ent-submit:hover .sb-arw-r { translate: 30px 0; }
  .ent-submit:hover .sb-arw-l { translate: 0 0; }
}
.ent-submit[aria-busy="true"] { cursor: progress; }

/* ---------- 表示例 ---------- */
.hero-side { min-width: 0; }
.pv { position: relative; }
.pv-cap { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .16em; color: var(--mint); }
.pv-name {
  margin: 4px 0 18px; font-family: var(--f-head); font-weight: 700; font-size: var(--name-size, 40px); line-height: 1.3;
  letter-spacing: .03em; color: var(--tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-height: 1.3em;
}
html[data-font="gothic"] .pv-name { font-feature-settings: "palt"; letter-spacing: .01em; }
.pv-name-t.is-empty { color: var(--tx-2); }
.pv-stage { position: relative; }

/* 散らばった表：表示例の窓の後ろから少しのぞき、集まって窓へ入る */
.pv-chips { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.chip {
  position: absolute; width: 150px; background: #FFFFFF; border-radius: var(--r-part); overflow: hidden;
  box-shadow: 0 16px 40px -14px rgba(0, 0, 0, .55);
  transform: translate(0, 0) rotate(var(--rot, 0deg)) scale(1);
  transition: transform 1.15s cubic-bezier(.55, .05, .22, .99);
  transition-delay: var(--cd, 0ms);
}
.chip-h { display: block; padding: 6px 9px 5px; background: #EEF3F0; border-bottom: 1px solid #DCE4E0; }
.chip-h b { display: block; font-size: 10.5px; font-weight: 700; color: #1D6F42; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--f-num), var(--f-body); }
.chip-g {
  display: block; height: 62px;
  background:
    repeating-linear-gradient(to bottom, transparent 0 14px, #DFE5E2 14px 15px),
    repeating-linear-gradient(to right, transparent 0 36px, #E7ECE9 36px 37px), #FFFFFF;
}
.chip-g-wb { background: repeating-linear-gradient(to bottom, transparent 0 14px, #E3E8E5 14px 15px), #FBFCFB; }
.chip-1 { --rot: -9deg; left: -56px; top: 14%; --cd: 0ms; }
.chip-2 { --rot: 7deg; right: -44px; top: -30px; --cd: 90ms; }
.chip-3 { --rot: 5deg; left: 9%; bottom: -46px; --cd: 160ms; }
.chip-4 { --rot: -6deg; right: -60px; bottom: 18%; --cd: 230ms; }
.pv-stage.is-merged .chip { transform: translate(var(--mx, 0px), var(--my, 0px)) rotate(0deg) scale(.32); }

.pv-win {
  position: relative; z-index: 1; border-radius: var(--r-face); overflow: hidden; background: #FFFFFF;
  box-shadow: 0 0 0 1px rgba(159, 212, 191, .3), 0 34px 80px -24px rgba(0, 0, 0, .7);
  transition: box-shadow .8s cubic-bezier(.16, 1, .3, 1);
}
.pv-win-in { display: block; }
/* 窓が中心から四角く開き、中の画面は2倍から縮んで収まる（HP の #12・c-scale-in：1.2s・中は 1s）。
   entry.js が、開く前に is-wait、開くときに is-open を付ける。clip-path は影まで切るので、
   畳んでいる間と開いている間は影を出さず、開き終えて is-open を外したときに影を出す（backwards＝終わった後は元の状態） */
html.is-anim .pv-win.is-wait { clip-path: inset(100%); }
html.is-anim .pv-win:is(.is-wait, .is-open) { box-shadow: 0 0 0 1px rgba(159, 212, 191, 0), 0 34px 80px -24px rgba(0, 0, 0, 0); }
html.is-anim .pv-win.is-open { animation: pv-open 1.2s cubic-bezier(.16, 1, .3, 1) backwards; }
html.is-anim .pv-win.is-open .pv-win-in { animation: pv-open-in 1s cubic-bezier(.16, 1, .3, 1) backwards; }
@keyframes pv-open { from { clip-path: inset(100%); } to { clip-path: inset(0); } }
@keyframes pv-open-in { from { transform: scale(2); } to { transform: none; } }
.pv-bar { display: flex; align-items: center; gap: 12px; height: 36px; padding: 0 12px; background: #EDF2EF; border-bottom: 1px solid #DCE4E0; }
.pv-dots { display: flex; gap: 6px; flex: none; }
.pv-dots i { display: block; width: 9px; height: 9px; border-radius: 50%; background: #C7D2CC; }
.pv-addr {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px; height: 24px; padding: 0 11px;
  border-radius: 999px; background: #FFFFFF; color: #55625C; font-family: var(--f-num), var(--f-body); font-size: 12.5px; letter-spacing: .01em;
}
.pv-addr svg { flex: none; color: #6E7B75; }
.pv-addr-t { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #24312B; font-weight: 500; }
.pv-addr-t.is-empty { color: #5F6B66; font-weight: 400; font-family: var(--f-body); }
.pv-screen { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #F5F6F8; } /* 高さ＝ホームの「段階ごとの件数」までが入り、次の段の上端が下のぼかしにかかる高さ */
.pv-screen iframe {
  position: absolute; left: 0; top: 0; border: 0; display: block; pointer-events: none;
  width: var(--fw, 940px); height: var(--fh, 590px); transform-origin: 0 0; transform: scale(var(--fs, .63));
}
/* 窓の下端：画面の地の色（業務管理ツールの画面の --bg）へ溶かし、画面が下へ続く見え方にする（カードの上端だけが切れて見えるのを防ぐ） */
.pv-screen::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--fade, 64px); z-index: 1; pointer-events: none;
  /* 段階F：次の段の見出しが下端に薄い1行で残り、読めない文字に見えた（初見通読3回目の管理職役）＝下の半分を地の色で覆う */
  background: linear-gradient(to bottom, rgba(245, 246, 248, 0) 0, rgba(245, 246, 248, .96) 34%, #F5F6F8 52%);
}
/* 会社名を入れたときに窓を光が横切る */
.pv-win::after {
  content: ""; position: absolute; inset: -20% auto -20% 0; width: 38%; z-index: 2; pointer-events: none;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .5) 50%, rgba(255, 255, 255, 0) 100%);
  transform: translateX(-120%) skewX(-12deg);
  visibility: hidden; /* 待っている間は出さない（窓が縦に長いと、斜めの帯の端が窓の左下にのぞくため） */
}
.pv-win.is-glint::after { visibility: visible; animation: win-glint .9s cubic-bezier(.4, 0, .2, 1) both; }
@keyframes win-glint { from { transform: translateX(-120%) skewX(-12deg); } to { transform: translateX(330%) skewX(-12deg); } }

.pv-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.pv-tab {
  display: block; min-height: 40px; padding: 0 0 6px; border: 0; background: none; color: var(--tx-2); text-align: left; cursor: pointer;
  font-size: 13px; font-weight: 500; letter-spacing: .06em;
}
.pv-tab-bar { display: block; height: 2px; margin-bottom: 9px; background: rgba(207, 227, 218, .24); overflow: hidden; }
.pv-tab-bar i { display: block; height: 100%; background: var(--glow); transform: scaleX(0); transform-origin: 0 50%; }
.pv-tab:hover { color: var(--tx); }
.pv-tab.is-on { color: var(--tx); font-weight: 700; }
.pv-tab.is-on .pv-tab-bar i { transform: scaleX(1); }
.pv.is-cycling .pv-tab.is-on .pv-tab-bar i { animation: tab-prog var(--cycle, 5200ms) linear both; }
.pv.is-paused .pv-tab.is-on .pv-tab-bar i { animation-play-state: paused; }
@keyframes tab-prog { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.pv-tab:focus-visible { outline: 2px solid var(--glow); outline-offset: 4px; }
.pv-note { margin: 8px 0 0; font-size: 12.5px; line-height: 1.8; color: var(--tx-3); }

/* ---------- 受付完了 ---------- */
.done {
  position: relative; z-index: 1; max-width: 760px; margin: 0 auto; padding: 72px 20px 40px;
  min-height: calc(100vh - 140px); min-height: calc(100svh - 140px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
}
.done[hidden] { display: none; }
.done-orb {
  display: grid; place-items: center; width: 76px; height: 76px; margin-bottom: 30px; border-radius: 50%; color: var(--g0);
  background: radial-gradient(circle at 34% 30%, #FFFFFF 0, #EEF4F1 44%, #C5D8D0 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .5), 0 0 46px rgba(92, 240, 168, .32);
}
/* かな詰め（字ごとの負の余白）で中身の幅が狭く測られ「…まし／た」と1字だけ落ちるので、幅は親に合わせ、句の中では折らない */
.done-h { align-self: stretch; margin: 0; font-family: var(--f-head); font-weight: 700; font-size: 38px; line-height: 1.4; letter-spacing: .04em; outline: none; }
.done-h .ph { white-space: nowrap; }
.done > p { max-width: 100%; }
html[data-font="gothic"] .done-h { font-feature-settings: "palt"; letter-spacing: .02em; }
.done-p { margin: 18px 0 0; font-size: 16px; line-height: 1.9; color: var(--tx); }
.done-note { margin: 10px 0 0; font-size: 13px; color: var(--tx-3); }
/* 「入力画面」＝副ボタン（HP の #3・cv-motion の cv-btn。淡い灰の地に、緑がせり上がる） */
.done-back.cv-btn {
  /* せり上がる色は送信ボタンと同じ緑（部品の既定 #14513C は、この画面の地の深い緑と見分けにくいため） */
  --cv-btn-bg-hov: linear-gradient(120deg, var(--cvx-struct) 0%, var(--cvx-mid) 100%);
  margin-top: 34px; font-size: 14px; letter-spacing: .06em; border-radius: var(--r-part);
}
.done-back.cv-btn:focus-visible { outline: 2px solid var(--glow); outline-offset: 3px; }
body.is-done .hero-in, body.is-done .dlv { display: none; }

/* =========================================================
   お届けするもの・足元
   ========================================================= */
.dlv { max-width: 1240px; margin: 0 auto; padding: 56px 40px 52px; border-top: 1px solid rgba(159, 212, 191, .22); }
.dlv-h { margin: 0 0 26px; font-family: var(--f-head); font-weight: 700; font-size: 22px; letter-spacing: .06em; }
html[data-font="gothic"] .dlv-h { font-feature-settings: "palt"; }
.dlv-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.dlv-list li { display: block; }
/* 動く中身（.dlv-mv）と、はみ出しを隠す枠（見出し・各項目）。横へずれた文字が枠の外（ページの横）へはみ出さない */
.dlv-h, .dlv-list li { overflow: hidden; }
.dlv-mv { display: block; transform-origin: 50% 50%; }
.dlv-list .dlv-mv { display: flex; flex-direction: column; gap: 10px; }
.dlv-n { font-family: var(--f-num); font-weight: 300; font-size: 44px; line-height: 1; letter-spacing: .02em; color: var(--mint); font-variant-numeric: tabular-nums; }
.dlv-t { font-size: 16px; font-weight: 700; line-height: 1.6; color: var(--tx); }
/* 3案をお作りする会社：控えめな1段（小さな写真・社名と代表名・支援の実績）。入力欄より目立たせない */
.maker { max-width: 1240px; margin: 0 auto; padding: 28px 40px 26px; border-top: 1px solid rgba(159, 212, 191, .22); }
.maker-h { margin: 0 0 12px; font-size: 12.5px; font-weight: 700; letter-spacing: .08em; color: var(--tx-3); }
.maker-row { display: flex; align-items: center; gap: 16px; }
.maker-photo { flex: none; display: block; width: 64px; height: 64px; object-fit: cover; border-radius: var(--r-part); border: 1px solid rgba(255, 255, 255, .25); }
.maker-txt { min-width: 0; }
.maker-name { margin: 0; font-size: 14px; font-weight: 700; color: var(--tx); letter-spacing: .04em; }
.maker-p { margin: 4px 0 0; font-size: 12.5px; line-height: 1.75; color: var(--tx-2); }
body.is-done .maker { display: none; }
.ent-foot {
  max-width: 1240px; margin: 0 auto; padding: 10px 40px 44px;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 26px; font-size: 12.5px; color: var(--tx-3);
}
.ent-foot p { margin: 0; }
.ent-foot-co { margin-left: auto !important; color: var(--tx); font-weight: 700; letter-spacing: .12em; }
.ent-foot-co .fine-link { color: inherit; }                /* 社名は太字の明るい色のまま。下線で押せると分かる */

/* =========================================================
   開いた瞬間の動き（位置と形だけ）。entry.js が html に is-anim を付けたときだけ動く
   ========================================================= */
html.is-anim .hl-i { animation: hl-rise 1.05s cubic-bezier(.16, 1, .3, 1) both; }
html.is-anim .hl:nth-child(1) .hl-i { animation-delay: .08s; }
html.is-anim .hl:nth-child(2) .hl-i { animation-delay: .2s; }
html.is-anim .hl:nth-child(3) .hl-i { animation-delay: .32s; }
@keyframes hl-rise { from { transform: translateY(1.9em); } to { transform: none; } }
html.is-anim .hero-sub { animation: lift .9s cubic-bezier(.16, 1, .3, 1) .5s both; }
html.is-anim .ent-form { animation: lift .9s cubic-bezier(.16, 1, .3, 1) .62s both; }
/* 表示例は浮き上がらせない（窓は #12 で開く。上の .pv-win を参照） */
@keyframes lift { from { transform: translateY(18px); } to { transform: none; } }
html.anim-done .hl-i, html.anim-done .hero-sub, html.anim-done .ent-form { animation: none; }

/* お届けするもの（HP の #11・js-slide-in：右へ 5rem・-10度傾けた所から 1.4s で戻る。順に 0.15s 遅らせる）。
   entry.js が、画面に入る前に is-wait、入ったときに is-in を付ける。HP の opacity と blur は使わない */
html.is-anim .dlv.is-wait .dlv-mv { transform: translateX(5rem) skewX(-10deg); }
html.is-anim .dlv.is-in .dlv-mv { animation: dlv-in 1.4s cubic-bezier(.16, 1, .3, 1) backwards; }
html.is-anim .dlv.is-in .dlv-list li:nth-child(1) .dlv-mv { animation-delay: .15s; }
html.is-anim .dlv.is-in .dlv-list li:nth-child(2) .dlv-mv { animation-delay: .3s; }
html.is-anim .dlv.is-in .dlv-list li:nth-child(3) .dlv-mv { animation-delay: .45s; }
html.is-anim .dlv.is-done .dlv-mv { animation: none; }
@keyframes dlv-in { from { transform: translateX(5rem) skewX(-10deg); } to { transform: none; } }

/* 受付完了へ：送信ボタンの球から円が広がる（View Transitions） */
::view-transition-old(root) { animation: none; }
::view-transition-new(root) { animation: vt-open 1s cubic-bezier(.66, 0, .3, 1) both; }
@keyframes vt-open {
  from { clip-path: circle(0px at var(--vt-x, 50%) var(--vt-y, 50%)); }
  to { clip-path: circle(150vmax at var(--vt-x, 50%) var(--vt-y, 50%)); }
}
html.vt-back::view-transition-new(root) { animation-duration: .7s; }

/* =========================================================
   幅の狭い画面（タブレット・スマホ）
   ========================================================= */
@media screen and (max-width: 1120px) {
  .hero-in { grid-template-columns: minmax(0, 470px) minmax(0, 1fr); gap: 44px; }
  .hero-h { font-size: 36px; }
  html[data-font="gothic"] .hero-h { font-size: 35px; }
}
@media screen and (max-width: 980px) {
  .ent-top { padding: 20px 24px 0; }
  .hero-in { grid-template-columns: minmax(0, 1fr); gap: 56px; padding: 36px 24px 0; max-width: 680px; }
  .hero-copy::before { inset: -40px -40px -30px -40px; }
  .dlv { padding: 48px 24px 44px; }
  .maker { padding: 26px 24px 24px; }
  .ent-foot { padding: 8px 24px 40px; }
}
@media screen and (max-width: 640px) {
  body { font-size: 15px; }
  .ent-top { padding: 18px 16px 0; }
  .hero { padding-bottom: 56px; }
  .hero-in { padding: 30px 16px 0; gap: 52px; }
  .hero-h, html[data-font="gothic"] .hero-h { font-size: clamp(22px, 6.9vw, 30px); line-height: 1.48; }
  .hero-sub { font-size: 14.5px; margin-top: 14px; }
  .ent-form { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 26px; }
  .fld input, .sel select { font-size: 16px; height: 50px; }   /* 16px＝iPhone の自動拡大を防ぐ */
  .form-foot { align-items: stretch; }
  .ent-submit.cv-btn { width: 100%; min-width: 0; }
  .pv-name { font-size: var(--name-size, 30px); margin-bottom: 16px; }
  .pv-screen { aspect-ratio: 2 / 3; --fade: 52px; } /* スマホ：数字の入った2段目のカードの下端まで入り、ぼかしは次の段の上端にかかる */
  .pv-tab { min-height: 44px; font-size: 12.5px; letter-spacing: .02em; }
  .chip { width: 118px; }
  .chip-g { height: 46px; }
  .chip-1 { left: -14px; top: 22%; }
  .chip-2 { right: -12px; top: -18px; }
  .chip-3 { left: 6%; bottom: -26px; }
  .chip-4 { right: -14px; bottom: 26%; }
  .done-h { font-size: 28px; }
  .done-p { font-size: 15px; }
  .dlv { padding: 44px 16px 40px; }
  .dlv-h { font-size: 20px; margin-bottom: 20px; }
  .dlv-list { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .dlv-list .dlv-mv { flex-direction: row; align-items: baseline; gap: 16px; }
  .dlv-n { flex: none; width: 52px; font-size: 34px; }
  .maker { padding: 24px 16px 22px; }
  .maker-row { align-items: flex-start; gap: 14px; }
  .maker-photo { width: 56px; height: 56px; }
  .ent-foot { padding: 8px 16px 36px; flex-direction: column; gap: 4px; }
  .ent-foot-co { margin-left: 0 !important; margin-top: 10px !important; }
}

/* 動きを減らす設定：動かさない（線は最初から描いた状態・光の帯と波紋なし・表は集まった後の状態） */
@media (prefers-reduced-motion: reduce) {
  html.is-anim .hl-i, html.is-anim .hero-sub, html.is-anim .ent-form { animation: none; }
  .hero.is-drawing .ln-reveal { animation: none; -webkit-mask-image: none; mask-image: none; }
  .ln-lit.is-wave, .orb-pulse.is-hit::before, .orb-pulse.is-hit::after { animation: none; }
  .ln-lit, .hero-lines, .chip, .pv-win, .sb-arw { transition: none; }
  .pv-chips { display: none; }
  .pv-win, .pv-win-in { clip-path: none !important; animation: none !important; }
  .dlv-mv { transform: none !important; animation: none !important; }
  .pv-win.is-glint::after { animation: none; }
  .pv-win.is-glint::after { visibility: hidden; }
  .pv.is-cycling .pv-tab.is-on .pv-tab-bar i { animation: none; }
  ::view-transition-new(root), ::view-transition-old(root) { animation: none; }
}