/* 法人向け 完全オーダーメイド LP の差分。
   土台は site.css（商品ページと同じ）。ここには法人LPにしか無いものだけを置く。

   ⚠ site.css と同じものを書かないこと。二重に当てると商品ページと見た目がずれる。
   ⚠ このファイルは site.css より後に読ませる。 */

/* ── 追従CTA：商品ページは価格を出すが、こちらは条件を1行で出す ── */
.corp .sticky-buy-label { font-size: 12px; letter-spacing: .04em; color: var(--ink-dim, #9a9aa2); }

/* ── 実物とロット ── */
.corp .lot {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, .82fr);
  gap: clamp(24px, 4vw, 56px); align-items: center;
  margin-top: clamp(40px, 6vw, 76px); padding-top: clamp(32px, 5vw, 56px);
  border-top: 1px solid var(--line);
}
.corp .lot h3 { margin: 0 0 14px; font-size: clamp(17px, 2.2vw, 22px); font-weight: 500; line-height: 1.6; }
.corp .lot p { margin: 0; color: var(--dim); font-size: 15px; line-height: 1.95; }
.corp .lot .note { margin-top: 14px; font-size: 13px; color: var(--faint); }
.corp .lot-fig { margin: 0; }
.corp .lot-fig img { width: 100%; height: auto; display: block; border-radius: 3px; }

/* ── フッター ── */

/* ── ヒーローの見出し ──
   商品ページのコピーは短い（「かざす。」）が、法人LPは1行が長い。
   幅そのままだと「一人ひとりのものにす／る。」と1文字だけ折り返す。 */
.corp .copy { width: min(52vw, 640px); }
.corp .copy h1 { font-size: clamp(28px, 4.4vw, 52px); }

/* ── ヘッダー：商品ページはロゴ画像、こちらは文字で名乗る ── */
.corp header .mark { align-items: flex-start; }
.corp header .brand { font-weight: 700; letter-spacing: .14em; font-size: 12px; line-height: 1.3; }
.corp header .mark-en { text-indent: 0; letter-spacing: .28em; }
/* 言語切り替え。ナビの最後に置くので、他のリンクと区別が付くよう囲う */
.corp .nav .lang {
  border: 1px solid rgba(255,255,255,.28); border-radius: 999px;
  padding: 6px 13px; margin-left: 6px; letter-spacing: .1em;
}
.corp .nav .lang:hover { border-color: rgba(255,255,255,.6); }

/* ── 本文の器。商品ページはセクションごとに幅が違うが、
      こちらは読み物なので1本に揃える ── */
.corp main > section { max-width: 1080px; margin: 0 auto; padding: clamp(72px, 10vw, 132px) 24px; }
.corp main > section + section { border-top: 1px solid var(--line); }

/* ── できること（6枚のカード） ── */
/* できること。⚠ 3列のタイルにしない。
   項目ごとに本文の長さが違うので、タイルにすると背の低いカードの下が空く。
   7項目だと最後の行に2マス空きも出た。
   1行1項目・左に見出し・右に本文なら、長さの差が行の高さに吸収されて空きが出ない。 */
.corp .cards { display: grid; grid-template-columns: 1fr; gap: 1px; margin-top: 40px; background: var(--line); border: 1px solid var(--line); }
.corp .card {
  background: var(--bg); padding: 26px 26px;
  display: grid; grid-template-columns: minmax(0, 22em) minmax(0, 1fr);
  gap: 6px 44px; align-items: baseline;
}
.corp .card h3 { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.7; }
.corp .card p { margin: 0; font-size: 14px; color: var(--dim); line-height: 1.95; }
.corp .card strong { color: var(--ink); font-weight: 600; }

/* ── 試着（商品ページと同じ部品。並びだけこちらで決める） ── */
.corp .tryon-wrap { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(240px, 330px); gap: 30px; align-items: start; margin-top: 40px; }
.corp .tryon-ui { display: flex; flex-direction: column; gap: 16px; }
.corp .field { display: flex; flex-direction: column; gap: 9px; }
.corp .field > label { font-size: 12px; letter-spacing: .08em; color: var(--faint); }
/* 素材の切り替えは他の項目と同じく「ラベルの下に操作子」で置く。
   ⚠ 横並びにすると、ラベルとセグメントの間が空いて対応が読み取りにくい。
   他の入力欄が全部ラベル下なので、ここだけ横並びだと揃わない。 */
.corp .field.field-row { display: flex; flex-direction: column; align-items: stretch; gap: 9px; }
/* ⚠ align-items を書かないと、前にあった横並び用の指定（align-items:center）だけが
   生き残って、ラベルが中央に寄る。実際に寄っていた。 */
.corp .field-row .seg { align-self: stretch; }
/* 2つの選択肢で幅を分け合う。押せる面積が広いほうが迷わない */
.corp .field-row .seg button { flex: 1; }

/* 素材の切り替えは商品ページのものをそのまま使う（site.css の .seg）。
   ⚠ ここで上書きしない。角丸2pxの箱に作り直していたが、同じ部品が
   ページごとに違う見た目になるだけだった。 */
.corp .tryon-clear { align-self: flex-start; background: none; border: none; color: var(--faint); font: inherit; font-size: 12px; text-decoration: underline; cursor: pointer; padding: 0; }
.corp .tryon-status { margin: 0; font-size: 12px; color: var(--faint); }
.corp [data-tryon-stage] {
  width: 100%; aspect-ratio: 1600 / 967; display: block;
  /* 真っ黒の上に黒いカードだと沈む。中央だけわずかに明るくして輪郭を出す */
  background: radial-gradient(ellipse 62% 58% at 50% 46%, #1b1c21 0%, #0a0a0c 72%);
  border: 1px solid var(--line); border-radius: 3px; touch-action: none;
}
.corp input[type=range] { width: 100%; accent-color: #fff; }
/* ファイル選択の行。⚠ align-items:center は「箱」を揃えるだけで、箱の中の
   文字の位置はフォントの上下メトリクスで決まる。和文フォントだと
   ボタンの中の文字と、隣のラベルの文字で高さがずれて見える。
   ラベルにもボタンと同じ高さの箱を持たせて、同じ揃え方で中央に置く。 */
.corp .filefield .file-name {
  display: flex; align-items: center; min-height: 44px; line-height: 1.5;
}

/* ⚠ .field に display:flex を当てているので [hidden] が効かない。属性側を強くする */
.corp [hidden] { display: none !important; }

/* ── 仕様 ── */
.corp .scroller { overflow-x: auto; margin-top: 36px; }
.corp .tbl { min-width: 520px; width: 100%; border-collapse: collapse; font-size: 14px; }
.corp .tbl th, .corp .tbl td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--line); }
.corp .tbl thead th { font-size: 11px; letter-spacing: .1em; color: var(--faint); font-weight: 600; white-space: nowrap; }
.corp .tbl tbody th { color: var(--dim); font-weight: 400; }
/* 共通仕様。⚠ 3列にすると1項目が狭くなり、長い値（NFCの説明）が折り返して崩れる。
   2列で固定し、行の中は「ラベル｜値」の2カラム。space-between だと
   ラベルと値が画面端まで引き離されて、どれとどれが対か読めなくなる。 */
.corp .spec-common { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 56px; margin: 36px 0 0; }
.corp .spec-common > div {
  display: grid; grid-template-columns: 8.5em minmax(0, 1fr); align-items: baseline;
  gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 14px;
}
.corp .spec-common dt { color: var(--faint); margin: 0; }
.corp .spec-common dd { margin: 0; text-align: left; line-height: 1.7; }

/* 仕様の比較表。列幅を決めないと、見出し列だけ広がって値が右に流れる */
.corp #spec .tbl { table-layout: fixed; }
.corp #spec .tbl th:first-child { width: 30%; }
/* ⚠ 68ch で切ると、上の表が横いっぱいなのにこの注意書きだけ短く終わって
   右側が大きく空く。表と同じ幅まで使わせる。 */
.corp .warn { margin-top: 28px; font-size: 13px; color: var(--dim); line-height: 1.95; border-left: 2px solid var(--line); padding-left: 16px; text-wrap: pretty; }

/* ── 価格 ── */
/* ⚠ site.css の .num は商品ページの数値バッジ用で display:flex。
   表のセルに当たると table-cell でなくなり、その列だけ高さが変わって
   行の下線がずれる（実際にずれていた）。表の中では table-cell に戻す。 */
.corp .price-tbl td.num { display: table-cell; text-align: left; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink); font-weight: 600; }
/* ⚠ site.css 側にも td の下線があり、重なると単価の列だけ二重線に見える。
   価格表は行の下線1本に統一する */
.corp .price-tbl th, .corp .price-tbl td { border-bottom: 1px solid var(--line); box-shadow: none; }
.corp .price-tbl tbody tr:last-child th, .corp .price-tbl tbody tr:last-child td { border-bottom: none; }
.corp .price-tbl tbody th { color: var(--ink); font-weight: 400; white-space: nowrap; }
.corp .price-notes { margin: 26px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.corp .price-notes li { font-size: 13px; color: var(--faint); line-height: 1.9; padding-left: 15px; position: relative; }
.corp .price-notes li::before { content: "—"; position: absolute; left: 0; }
/* 1枚ごとの刻印は別扱い。基本料金と混ぜて読ませない */
.corp .variable {
  margin-top: clamp(32px, 4vw, 52px); padding: clamp(26px, 3vw, 38px) clamp(24px, 3vw, 40px);
  border: 1px solid var(--rule); border-radius: 14px;
  background: rgba(255, 255, 255, .03);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 40px; align-items: start;
}
/* 見出しは横いっぱい。本文と導線を下の段に並べる */
.corp .variable h3 {
  grid-column: 1 / -1; margin: 0;
  font-size: clamp(17px, 1.6vw, 20px); font-weight: 600; letter-spacing: .01em;
}
/* ⚠ 68ch で切らない。箱が横いっぱいなのに本文だけ早く折り返すと、右側が空いて見える */
.corp .variable p { margin: 0; font-size: 14.5px; color: var(--dim); line-height: 2; }
.corp .variable strong { color: var(--ink); font-weight: 600; }

/* 導線はリンクではなくボタンにする。⚠ 素のリンクだと既定の紫が出る（実際に出ていた） */
.corp .variable-cta { margin: 0; align-self: center; }
.corp .variable-cta a {
  display: inline-flex; align-items: center; gap: 12px; white-space: nowrap;
  min-height: 50px; padding: 0 26px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .5);
  color: var(--ink); text-decoration: none;
  font-size: 13px; font-weight: 600; letter-spacing: .08em; text-indent: .08em; line-height: 1;
  transition: background .2s ease, border-color .2s ease;
}
.corp .variable-cta a::after {
  content: ""; width: 8px; height: 8px; flex: none;
  border-top: 1.6px solid currentColor; border-right: 1.6px solid currentColor;
  transform: rotate(45deg);
}
.corp .variable-cta a:hover { background: rgba(255, 255, 255, .1); border-color: #fff; }
.corp .variable-cta a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (max-width: 720px) {
  .corp .variable { grid-template-columns: 1fr; }
  .corp .variable-cta { align-self: start; }
  .corp .variable-cta a { width: 100%; justify-content: center; }
}

/* ── 進め方 ── */
.corp .steps-n { counter-reset: st; list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.corp .steps-n li { counter-increment: st; background: var(--bg); padding: 26px 24px; display: grid; grid-template-columns: 46px 1fr; gap: 6px 18px; }
.corp .steps-n li::before {
  content: counter(st, decimal-leading-zero); grid-row: 1 / span 2;
  font-size: 18px; color: var(--faint); font-variant-numeric: tabular-nums; line-height: 1.35;
}
.corp .steps-n h3 { margin: 0; font-size: 15px; font-weight: 600; }
.corp .steps-n p { margin: 0; font-size: 14px; color: var(--dim); }

/* ── よくある質問 ── */
.corp .qa { margin-top: 36px; border-top: 1px solid var(--line); }
.corp .qa details { border-bottom: 1px solid var(--line); }
.corp .qa summary { cursor: pointer; padding: 19px 34px 19px 0; position: relative; font-size: 15px; list-style: none; }
.corp .qa summary::-webkit-details-marker { display: none; }
.corp .qa summary::after { content: "＋"; position: absolute; right: 4px; top: 19px; color: var(--faint); }
.corp .qa details[open] summary::after { content: "－"; }
.corp .qa p { margin: 0 0 22px; font-size: 14px; color: var(--dim); max-width: 68ch; }

/* ── お見積り依頼 ── */
/* ⚠ 幅を絞らない。上の表やセクションが横いっぱいなのに、フォームだけ細いと
   ページの中で幅が2種類あるように見える。1行1項目で縦に並べる。 */
.corp .quote { margin-top: 38px; display: flex; flex-direction: column; gap: 20px; }
.corp .quote .f { display: flex; flex-direction: column; gap: 8px; }
.corp .quote label { font-size: 12px; letter-spacing: .08em; color: var(--faint); }
.corp .quote input, .corp .quote select, .corp .quote textarea {
  background: #0a0a0c; border: 1px solid var(--line); border-radius: 2px;
  color: var(--ink); font: inherit; font-size: 15px; padding: 12px 13px; width: 100%;
}
.corp .quote textarea { resize: vertical; line-height: 1.8; }
.corp .quote input:focus-visible, .corp .quote select:focus-visible, .corp .quote textarea:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.corp .quote [aria-invalid="true"] { border-color: #c8553d; }
.corp .quote .err { margin: 0; font-size: 12px; color: #e08a76; }
/* label.agree で指定しないと .f > label の指定に負けて縦にずれる */
.corp label.agree { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--dim); letter-spacing: 0; cursor: pointer; }
.corp label.agree input { width: auto; flex: none; margin-top: 5px; }
.corp .form-msg { margin: 0; font-size: 14px; min-height: 1.5em; }
.corp .form-msg[data-state="ok"] { color: #8fd19e; }
.corp .form-msg[data-state="warn"] { color: #e0b476; }

/* ── 送信前に出す概算。特商法の最終確認に近い位置づけなので、囲って目立たせる */
.corp .estimate {
  border: 1px solid var(--rule); border-radius: 14px; padding: 22px 24px;
  background: rgba(255, 255, 255, .03);
}
.corp .estimate h3 { margin: 0 0 14px; font-size: 13px; letter-spacing: .1em; color: var(--faint); font-weight: 500; }
.corp .estimate dl { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.corp .estimate dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.corp .estimate dt { margin: 0; font-size: 14px; color: var(--dim); }
.corp .estimate dd { margin: 0; font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.corp .estimate-total {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  margin: 16px 0 0; padding-top: 16px; border-top: 1px solid var(--rule);
}
.corp .estimate-total span { font-size: 13px; color: var(--faint); }
.corp .estimate-total strong { font-size: 26px; font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.corp .estimate .note { margin: 14px 0 0; }
/* 10枚未満のあいだは内訳を出さない。出すと「1枚でも買える」に読める */
.corp .estimate[data-state="min"] .estimate-total strong { font-size: 18px; color: var(--faint); }


/* ── リビール（商品ページと同じ動き。セレクタだけこちらで足す） ── */
html.js .corp .card[data-reveal]:nth-child(2), html.js .corp .steps-n li[data-reveal]:nth-child(2) { transition-delay: .08s; }
html.js .corp .card[data-reveal]:nth-child(3), html.js .corp .steps-n li[data-reveal]:nth-child(3) { transition-delay: .16s; }
html.js .corp .card[data-reveal]:nth-child(4) { transition-delay: .24s; }
html.js .corp .card[data-reveal]:nth-child(5) { transition-delay: .32s; }
html.js .corp .card[data-reveal]:nth-child(6) { transition-delay: .40s; }

@media (max-width: 900px) {
  .corp .tryon-wrap { grid-template-columns: 1fr; }
  .corp .lot { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .corp .spec-common { grid-template-columns: 1fr; }
  .corp .spec-common > div { grid-template-columns: 1fr; gap: 2px; }
  .corp .spec-common dd { color: var(--ink); }
}


/* ── 注文ページ ───────────────────────────────────────────── */
.corp-order main { padding-top: 14vh; }
.corp .order-page .back { margin: 26px 0 0; font-size: 13px; }
.corp .order-page .back a { color: var(--dim); }
.corp .order-page .back a:hover { color: var(--ink); }

/* tryon.js が要る受け口。画面には出さないが DOM からは外さない */
.corp .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* 注文時のイメージ。素材が「相談したい」のときは corp.js が hidden にする */
.corp .order-preview {
  display: grid; grid-template-columns: minmax(0, auto) minmax(220px, 1fr); gap: 8px 28px;
  align-items: start; border: 1px solid var(--rule); border-radius: 14px;
  padding: 18px; background: rgba(255, 255, 255, .03);
}
.corp .order-preview[hidden] { display: none !important; }
/* ⚠ 描画バッファは tryon.js 側で 1600×967 固定。ここで比を変えると伸びる。
   幅を上限で抑えて、高さが出すぎないようにする */
.corp .order-preview canvas { width: 100%; max-width: 600px; aspect-ratio: 1600 / 967; display: block; border-radius: 8px; touch-action: none; }
.corp .order-preview .preview-ui { display: flex; flex-direction: column; gap: 14px; padding: 8px 0; }
.corp .order-preview .tryon-status { margin: 0; font-size: 12px; color: var(--faint); }
.corp .order-preview .note { margin: 0; }
@media (max-width: 720px) { .corp .order-preview { grid-template-columns: 1fr; } }

/* ── フッター ─────────────────────────────────────────────
   site.css の .foot-nav（h3 + ul）に乗せる。以前ここで flex に潰していたが、
   商品ページと組み方が違って見えるので合わせた。 */
.corp .foot-made { margin: 0; font-size: 12px; color: var(--faint); line-height: 1.9; }
.corp .foot-hours { font-size: 12px; color: var(--faint); margin-top: 2px; }
.corp .foot-brand .mark { display: flex; flex-direction: column; gap: 4px; text-decoration: none; }


/* ── 送信ボタン ─────────────────────────────────────────────
   ⚠ .btn には規則が無く、ブラウザ既定の白い箱が横いっぱいに伸びていた。
   ヒーローの .cta と同じ形（白いピル＋矢印）に揃える。
   注文の確定ボタンなので、幅は中身ぶん。横いっぱいの帯は「押す場所」に見えない。 */
.corp .quote .btn {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 56px; padding: 0 34px; margin-top: 6px;
  border: 0; border-radius: 999px; cursor: pointer;
  background: #fff; color: #08080a;
  font: inherit; font-size: 15px; font-weight: 700; letter-spacing: .04em;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
/* 矢印。文字数で幅が変わらないよう図形で描く */
.corp .quote .btn::after {
  content: ""; width: 9px; height: 9px; flex: none;
  border-top: 2px solid currentColor; border-right: 2px solid currentColor;
  transform: rotate(45deg); transition: transform .2s ease;
}
.corp .quote .btn:hover { background: #f2f2f4; box-shadow: 0 14px 38px rgba(0, 0, 0, .6); }
.corp .quote .btn:hover::after { transform: rotate(45deg) translate(2px, -2px); }
.corp .quote .btn:active { transform: translateY(1px); }
.corp .quote .btn:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .corp .quote .btn, .corp .quote .btn::after { transition: none; } }
@media (max-width: 560px) { .corp .quote .btn { align-self: stretch; justify-content: center; } }

/* 合計の下に出す「何枚届くか」。金額とは別の情報なので、行を分ける */
.corp .estimate-ship { margin: 10px 0 0; font-size: 13px; color: var(--ink); }
.corp .estimate-ship:empty { display: none; }


/* ── 法令に基づく表示 ────────────────────────────────────────
   商品ページの /tokutei と同じ見た目（左に項目・右に内容）に揃える */
.corp .legal-dl { margin: 44px 0 0; display: flex; flex-direction: column; }
.corp .legal-dl .row {
  display: grid; grid-template-columns: 14em minmax(0, 1fr); gap: 8px 40px;
  padding: 22px 0; border-top: 1px solid var(--line); align-items: start;
}
.corp .legal-dl .row:last-child { border-bottom: 1px solid var(--line); }
.corp .legal-dl dt { margin: 0; font-size: 13px; color: var(--faint); line-height: 1.8; }
.corp .legal-dl dd { margin: 0; font-size: 14px; line-height: 1.95; }
.corp .legal-dl dd p { margin: 0 0 10px; }
.corp .legal-dl dd p:last-child { margin-bottom: 0; }
.corp .legal-dl dd .sub { font-size: 12.5px; color: var(--faint); line-height: 1.9; }
@media (max-width: 720px) { .corp .legal-dl .row { grid-template-columns: 1fr; gap: 6px; } }

/* bot よけの見えない欄。⚠ display:none にしない。多くの bot は
   display:none の欄を埋めないので、罠として機能しなくなる。
   画面外へ出して、フォーカスも読み上げも当たらないようにする。 */
.corp .hp {
  position: absolute !important; left: -9999px !important; top: auto !important;
  width: 1px !important; height: 1px !important; overflow: hidden !important;
}


@media (max-width: 860px) {
    }


/* ── フォームの中の注記 ────────────────────────────────────
   ⚠ site.css の .note は「節ごとの注記」用で margin: 8vh 0 0。
   フォームや試着の中に入ると、入力欄とヒントの間が画面の高さの8%（1000pxなら80px）
   空く。実際に郵便番号のヒントが遠くに離れていた。
   フォームの中では余白は親の gap に任せる。 */
.corp .quote .note,
.corp .quote .f .note,
.corp .field .note,
.corp .order-preview .note,
.corp .tryon-ui .note { margin: 0; font-size: 12px; line-height: 1.85; }

/* 郵便番号の検索結果など、空のうちは場所を取らない。
   ⚠ 空でも1行ぶんの高さが残ると、入力欄と次の項目の間が空いたままになる */
.corp .note:empty { display: none; }


/* 狭い画面では見出しの上に本文が来る形へ */
@media (max-width: 860px) {
  .corp .card { grid-template-columns: 1fr; gap: 10px; padding: 24px 20px; }
}


/* ファイル選択のボタンの揃えは site.css 側で直した（両LPで同じ不具合だった） */


/* 「500枚より多い」を選んだとき。金額を出さず、相談へ回す案内だけ見せる */
.corp .estimate[data-state="ask"] .estimate-total { display: none; }
.corp .estimate[data-state="ask"] .estimate-ship { color: var(--dim); }


/* ── 日付の入力 ───────────────────────────────────────────
   ⚠ 既定のままだと、暗い背景にブラウザ標準の明るいカレンダーが出て浮く。
   color-scheme を暗いほうに合わせると、カレンダーごと暗くなる。 */
.corp .quote input[type="date"] {
  color-scheme: dark;
  cursor: pointer;                 /* 押せる場所だと分かるように */
  font-variant-numeric: tabular-nums;
}
/* ⚠ 標準のアイコンは黒い。暗い背景では見えないので反転させる。
   当たり判定も広げる（小さいアイコンを狙わせない） */
.corp .quote input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1); opacity: .55; cursor: pointer;
  padding: 8px; margin-right: -4px;
}
.corp .quote input[type="date"]:hover::-webkit-calendar-picker-indicator { opacity: 1; }


/* ── フォームの項目名 ──────────────────────────────────────
   12px・標準の太さだと、入力欄に対して弱すぎて拾い読みできない。
   ⚠ `.f > label` に絞る。`.corp .quote label` だと、ファイル選択のボタン
   （中身が label）まで巻き込んで色と太さが変わる。 */
.corp .quote .f > label,
.corp .field > label {
  display: flex; align-items: baseline; gap: 10px;
  font-size: 13.5px; font-weight: 600; letter-spacing: .02em; color: var(--ink);
}

/* 必須／任意のしるし。⚠ 項目名と同じ強さにしない。目印であって見出しではない */
.corp .req, .corp .opt {
  font-size: 10.5px; font-weight: 600; letter-spacing: .08em; line-height: 1;
  padding: 4px 7px; border-radius: 3px; white-space: nowrap;
}
.corp .req { color: #f2b8a6; background: rgba(200, 85, 61, .18); }
.corp .opt { color: var(--faint); background: rgba(255, 255, 255, .06); }


/* ⚠ 隠してあるはずのネイティブのファイル入力が、フォームの汎用指定
   （.corp .quote input { width:100% }）に詳細度で負けて 1280px に広がり、
   ページを横スクロールさせていた（+123px）。見えないので気づきにくい。
   隠す指定のほうを強く書く。 */
.corp .quote input.file-native,
.corp input.file-native {
  position: absolute; width: 1px; height: 1px; min-height: 0;
  padding: 0; margin: -1px; border: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}