/* ================================================================
   goaisatsu.jp 名刺データ化申込サイト｜共通スタイル（site.css）
   実装＝frontend-builder（2026-09-15）
   数値仕様の正本＝.workbench/goaisatsu-site/DESIGN.md（このファイルはその実装）
   構成の正本＝vault/00_Inbox/2026-09-15_goaisatsu.jp_データ化申込サイト_構成.md
   モック＝.workbench/goaisatsu-site/mock/lp.html・mock/form.html（このファイルはそのCSSを
   1本化したもの。index.html・apply.html・tokushoho.html・privacy.html の全ページで共有する）
   🔴 このサイトは production_public/saas/atob のダッシュボード（Vectisデザインシステム）とは
      別の資産＝styles.css は読み込まない。色・角丸・余白はすべてこのファイルのCSS変数で閉じる。
   ================================================================ */

:root{
  /* 色＝Apple標準の意味色（DESIGN.md 2.1・指示で確定済み） */
  --bg:#ffffff;
  --bg-alt:#f5f5f7;
  --ink:#1d1d1f;
  --ink-2:#6e6e73;
  --ink-3:#55555a; /* footer nav リンク専用。--ink-2(#6e6e73)は#f5f5f7地でCSS計算4.66:1だが、
                       render-inspectの画素実測でリンク文字（アンチエイリアス由来）が最大3.98:1まで
                       落ちた（2026-09-15実測）。CSS計算で6.8:1確保し実測の揺れを吸収する */
  --accent:#0071e3;
  --accent-press:#0060c0;
  --success:#34c759;      /* 大きい塗り面・非テキストの装飾専用（テキストでは4.5:1を割るため使わない） */
  --success-text:#1a7a35; /* render-inspect実測でsuccessが2.22:1しか出ず、4.5:1確保のため差し替えた値 */
  --danger:#c8291f;       /* HIGの#ff3b30から変更＝#f5f5f7地で3.26:1しか出ない実測を受けた値 */
  --line:rgba(0,0,0,.10);
  --line-strong:rgba(0,0,0,.18);
  --card-bg:#ffffff;

  --font:-apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans", sans-serif;

  --radius-pill:980px;
  --radius-card:18px;
  --radius-field:12px;

  --sp-1:8px;  --sp-2:16px; --sp-3:24px; --sp-4:32px;
  --sp-5:48px; --sp-6:64px; --sp-7:96px; --sp-8:128px; --sp-9:160px;

  --dur:.3s; --ease:ease;

  --content-max:980px;
  --content-max-wide:1200px;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

.wrap{ width:calc(100% - 48px); max-width:var(--content-max); margin-inline:auto; }
.wrap-wide{ width:calc(100% - 48px); max-width:var(--content-max-wide); margin-inline:auto; }
.wrap-narrow{ width:calc(100% - 40px); max-width:640px; margin-inline:auto; }

/* ============ 見出しスケール（段＝6段。これ以外の字級を本文に使わない） ============ */
.eyebrow{ font-size:14px; font-weight:600; color:var(--accent); letter-spacing:.02em; margin:0 0 var(--sp-2); }
h1.hero-h{ font-size:clamp(34px,6vw,64px); font-weight:600; line-height:1.14; letter-spacing:-.01em; margin:0; }
h1.page-h{ font-size:clamp(28px,4.2vw,40px); font-weight:600; line-height:1.2; margin:0 0 var(--sp-1); }
h2.sec-h{ font-size:clamp(28px,4.2vw,44px); font-weight:600; line-height:1.18; letter-spacing:-.005em; margin:0 0 var(--sp-2); text-align:center; }
h3.card-h{ font-size:21px; font-weight:600; line-height:1.3; margin:0 0 var(--sp-1); }
p.lead{ font-size:21px; line-height:1.5; color:var(--ink-2); margin:var(--sp-3) 0 0; }
p.body-s{ font-size:17px; line-height:1.6; color:var(--ink-2); margin:0; }
p.small{ font-size:14px; line-height:1.6; color:var(--ink-2); margin:0; }

/* ============ ボタン（役割ごとに1形だけ。同じ役割は同じ寸法） ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:52px; padding:0 28px; border-radius:var(--radius-pill);
  font-size:17px; font-weight:600; line-height:1; border:1px solid transparent;
  cursor:pointer; transition:background var(--dur) var(--ease), color var(--dur) var(--ease), opacity var(--dur) var(--ease);
  -webkit-tap-highlight-color:transparent; font-family:var(--font);
}
.btn-primary{ background:var(--accent); color:#fff; }
.btn-primary:hover{ background:var(--accent-press); }
.btn-primary[disabled]{ opacity:.4; cursor:not-allowed; }
.btn-ghost{ background:transparent; color:var(--accent); border-color:var(--accent); height:40px; padding:0 20px; font-size:14px; }
.btn-ghost:hover{ background:rgba(0,113,227,.08); }
.btn-block{ width:100%; }

.link-more{ color:var(--accent); font-weight:400; font-size:17px; }
.link-more:hover{ text-decoration:underline; }

/* ============ ヘッダー（ロゴ左・CTA右上） ============ */
header.hd{
  position:sticky; top:0; z-index:50; height:52px;
  display:flex; align-items:center;
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
  border-bottom:1px solid var(--line);
}
.hd-inner{ width:calc(100% - 40px); max-width:var(--content-max-wide); margin-inline:auto; display:flex; align-items:center; justify-content:space-between; }
.hd-brand{ display:flex; align-items:center; gap:8px; }
.hd-brand svg{ width:22px; height:22px; color:var(--ink); }
.hd-brand b{ font-size:15px; font-weight:600; letter-spacing:.02em; }
.hd-brand .by{ font-size:11px; color:var(--ink-2); margin-left:4px; font-weight:400; }
.hd-right .btn-ghost{ height:36px; padding:0 18px; font-size:13px; }

/* ============ セクション骨格＝明暗を交互 ============ */
.sec{ padding:var(--sp-9) 0; }
.sec.alt{ background:var(--bg-alt); }
@media (max-width:640px){ .sec{ padding:var(--sp-6) 0; } }

/* ============ S1 Hero ============ */
.hero{ padding:var(--sp-8) 0 var(--sp-9); text-align:center; }
@media (max-width:640px){ .hero{ padding:var(--sp-6) 0 var(--sp-6); } }
.hero .wrap{ max-width:760px; }
.hero-sub{ margin:var(--sp-3) auto 0; max-width:560px; }
.hero-cta{ margin-top:var(--sp-4); }
.hero-facts{ margin-top:var(--sp-5); display:flex; flex-wrap:wrap; justify-content:center; gap:var(--sp-3); }
.hero-facts span{
  font-size:15px; font-weight:600; color:var(--ink); padding:8px 16px; border:1px solid var(--line); border-radius:var(--radius-pill);
  display:inline-flex; align-items:center; gap:6px;
}
.hero-facts span b{ color:var(--success-text); font-weight:700; }

/* ============ S2 3ステップ ============ */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-4); margin-top:var(--sp-6); }
@media (max-width:734px){ .steps{ grid-template-columns:1fr; gap:var(--sp-3); } }
.step{ text-align:center; padding:var(--sp-4); }
.step-no{
  width:40px; height:40px; margin:0 auto var(--sp-2); border-radius:50%;
  background:var(--ink); color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:15px; font-weight:600;
}

/* ============ S3 概算計算ウィジェット ============ */
.calc-card{
  max-width:640px; margin:var(--sp-6) auto 0; background:var(--card-bg);
  border:1px solid var(--line); border-radius:var(--radius-card); padding:var(--sp-5);
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.calc-toggle{ display:inline-flex; padding:4px; background:var(--bg-alt); border-radius:var(--radius-pill); width:100%; margin-bottom:var(--sp-4); }
.calc-toggle button{
  flex:1; height:44px; border:0; background:transparent; border-radius:var(--radius-pill);
  font-family:var(--font); font-size:15px; font-weight:600; color:var(--ink-2); cursor:pointer;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.calc-toggle button[aria-pressed="true"]{ background:#fff; color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.12); }

.calc-input-row{ display:flex; align-items:center; gap:var(--sp-2); }
.calc-field{ position:relative; flex:1; }
.calc-field label{ font-size:13px; color:var(--ink-2); display:block; margin-bottom:6px; }
.calc-field input{
  width:100%; height:52px; border:1px solid var(--line); border-radius:var(--radius-field);
  font-family:var(--font); font-size:21px; font-weight:600; color:var(--ink);
  padding:0 56px 0 16px; -moz-appearance:textfield;
  transition:border-color var(--dur) var(--ease);
}
.calc-field input:focus{ border-color:var(--accent); outline:none; }
.calc-field .unit{ position:absolute; right:16px; top:50%; transform:translateY(-50%); color:var(--ink-2); font-size:15px; pointer-events:none; }

.calc-result{ margin-top:var(--sp-4); padding-top:var(--sp-4); border-top:1px solid var(--line); text-align:center; }
.calc-result .label{ font-size:13px; color:var(--ink-2); margin-bottom:4px; }
.calc-amount{ font-size:clamp(28px,6vw,40px); font-weight:600; font-variant-numeric:tabular-nums; color:var(--ink); letter-spacing:-.01em; }
.calc-note{ margin-top:6px; }
.calc-cta{ margin-top:var(--sp-4); }
.calc-cta-alt a{ color:var(--accent); text-decoration:underline; }

/* ============ S4 料金表（スマホは横スクロールさせず1行=1カードへ組み替え） ============ */
.price-table{ margin-top:var(--sp-6); }
/* 🔴 2026-09-15 CEO訂正＝主役は「枚数帯」と「料金（定額）」の2列。「1枚あたり」は参考値として薄く。 */
.price-row{ display:grid; grid-template-columns:1.2fr 1fr .8fr; align-items:center; min-height:56px; padding:var(--sp-2) 0; border-bottom:1px solid var(--line); }
.price-row.head{ font-size:13px; color:var(--ink-2); font-weight:600; border-bottom:2px solid var(--ink); }
.price-row .c-range{ font-size:17px; }
.price-row .c-price{ font-size:19px; font-weight:600; font-variant-numeric:tabular-nums; text-align:right; color:var(--ink); }
.price-row .c-refunit{ font-size:13px; font-variant-numeric:tabular-nums; text-align:right; color:var(--ink-2); }
.price-note{ margin-top:var(--sp-2); }

@media (max-width:640px){
  .price-row{ display:block; padding:var(--sp-2); border:1px solid var(--line); border-radius:12px; margin-bottom:8px; min-height:0; }
  .price-row.head{ display:none; }
  /* gap+min-width:0＝長い値（「個別にご相談ください」等）がラベルを圧迫して折り返すのを防ぐ */
  .price-row > div{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:4px 0; }
  .price-row > div::before{ flex:none; white-space:nowrap; }
  .price-row .c-range::before{ content:"枚数帯"; color:var(--ink-2); font-size:12px; }
  .price-row .c-price::before{ content:"料金（定額・税込）"; color:var(--ink-2); font-size:12px; }
  .price-row .c-refunit::before{ content:"1枚あたり（帯上限で割った参考値）"; color:var(--ink-2); font-size:12px; }
  .price-row .c-price, .price-row .c-refunit{ min-width:0; }
  .price-row .c-price, .price-row .c-refunit{ text-align:right; }
}

/* ============ S5 3カード ============ */
.cards3{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-3); margin-top:var(--sp-6); }
@media (max-width:734px){ .cards3{ grid-template-columns:1fr; } }
.card{ background:var(--card-bg); border:1px solid var(--line); border-radius:var(--radius-card); padding:var(--sp-4); }
.card .ico{ width:40px; height:40px; border-radius:10px; background:var(--bg-alt); display:flex; align-items:center; justify-content:center; margin-bottom:var(--sp-2); font-size:20px; }

/* ============ S6 流れ（番号付き縦リスト） ============ */
.flow{ max-width:640px; margin:var(--sp-6) auto 0; }
.flow-item{ display:flex; gap:var(--sp-2); padding:var(--sp-2) 0; }
.flow-item + .flow-item{ border-top:1px solid var(--line); }
.flow-no{ flex:none; width:32px; height:32px; border-radius:50%; border:1.5px solid var(--ink); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:600; }
.flow-body h4{ margin:0 0 2px; font-size:17px; font-weight:600; }
.flow-body p{ margin:0; font-size:17px; line-height:1.6; color:var(--ink-2); }

/* ============ S7 条件（チェック風リスト） ============ */
.cond{ max-width:640px; margin:var(--sp-6) auto 0; display:grid; gap:var(--sp-2); }
.cond-item{ display:flex; gap:var(--sp-2); align-items:flex-start; font-size:17px; line-height:1.6; }
.cond-item.no b{ color:var(--danger); }
.cond-mark{ flex:none; width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; color:#fff; }
.cond-item.ok .cond-mark{ background:var(--success-text); }
.cond-item.no .cond-mark{ background:var(--ink-2); }

/* ============ S8 FAQ（アコーディオン） ============ */
.faq{ max-width:720px; margin:var(--sp-6) auto 0; }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-item summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; padding:var(--sp-3) 0; font-size:17px; font-weight:600; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; font-size:22px; font-weight:400; color:var(--ink-2); transition:transform var(--dur) var(--ease); }
.faq-item[open] summary::after{ content:"−"; }
.faq-item p{ margin:0 0 var(--sp-3); color:var(--ink-2); font-size:17px; line-height:1.7; }

/* ============ フッター ============ */
footer.sfoot{ background:var(--bg-alt); border-top:1px solid var(--line); padding:var(--sp-6) 0 var(--sp-4); }
.sfoot-top{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--sp-4); }
.sfoot-brand{ display:flex; align-items:center; gap:8px; }
.sfoot-brand svg{ width:20px; height:20px; color:var(--ink); }
.sfoot-brand b{ font-size:14px; font-weight:600; }
.sfoot-links{ display:flex; gap:var(--sp-3); flex-wrap:wrap; font-size:13px; }
.sfoot-links a{ color:var(--ink-3); }
.sfoot-links a:hover{ color:var(--ink); text-decoration:underline; }
.sfoot-legal{ margin-top:var(--sp-4); padding-top:var(--sp-3); border-top:1px solid var(--line); font-size:12px; color:var(--ink-2); line-height:1.8; }

/* ============ 申込フォーム（apply.html） ============ */
main.form-main{ padding:var(--sp-5) 0 var(--sp-6); }
.form-head{ margin-bottom:var(--sp-5); }

.group{ padding:var(--sp-4) 0; border-top:1px solid var(--line); }
.group:first-of-type{ border-top:none; }
.group-h{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:var(--sp-2); }
.group-h h2{ font-size:20px; font-weight:600; margin:0; }
.group-no{ font-size:13px; color:var(--ink-2); font-variant-numeric:tabular-nums; }

.field{ margin-bottom:var(--sp-3); }
.field:last-child{ margin-bottom:0; }
.field-label{ display:flex; align-items:center; gap:8px; font-size:15px; font-weight:600; margin-bottom:8px; }
.field-label .tag{ font-size:12px; font-weight:600; padding:2px 8px; border-radius:6px; }
.field-label .tag.req{ background:rgba(200,41,31,.10); color:var(--danger); }
.field-label .tag.opt{ background:var(--bg-alt); color:var(--ink-2); }

input[type=text], input[type=email], input[type=tel], input[type=number], textarea{
  width:100%; min-height:48px; border:1px solid var(--line-strong); border-radius:var(--radius-field);
  font-family:var(--font); font-size:17px; color:var(--ink); padding:0 16px;
  transition:border-color var(--dur) var(--ease);
}
/* 数値入力の増減スピナーを消す＝概算ウィジェットの単位ラベル（枚／g）と重なるため（flow-reviewer指摘） */
input[type=number]{ -moz-appearance:textfield; }
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
textarea{ min-height:96px; padding:12px 16px; resize:vertical; }
input:focus, textarea:focus{ border-color:var(--accent); outline:none; }
.field.has-error input, .field.has-error textarea{ border-color:var(--danger); }

.field-error{ display:none; align-items:center; gap:6px; margin-top:6px; font-size:14px; color:var(--danger); line-height:1.5; }
.field.has-error .field-error{ display:flex; }
.field-error.show{ display:flex; }

.field-hint{ margin-top:6px; }

.choice-group{ display:grid; gap:10px; }
.choice{
  display:flex; align-items:center; gap:12px; min-height:48px; padding:10px 14px;
  border:1px solid var(--line-strong); border-radius:var(--radius-field); cursor:pointer;
  transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.choice:has(input:checked){ border-color:var(--accent); background:rgba(0,113,227,.05); }
.choice input{ width:20px; height:20px; flex:none; accent-color:var(--accent); }
.choice span{ font-size:16px; }

.conditional{ display:grid; grid-template-rows:0fr; opacity:0; transition:grid-template-rows var(--dur) var(--ease), opacity var(--dur) var(--ease); margin-top:0; }
.conditional.open{ grid-template-rows:1fr; opacity:1; margin-top:var(--sp-2); }
.conditional > div{ overflow:hidden; }
.conditional-inner{ padding-top:2px; }

.legal-brief{
  margin-bottom:var(--sp-3); padding:var(--sp-3); background:var(--bg);
  border:1px solid var(--line-strong); border-radius:var(--radius-card);
}
.legal-brief h3{ font-size:15px; font-weight:600; margin:0 0 var(--sp-1); }
.legal-brief ul{ margin:0; padding-left:1.3em; font-size:14px; line-height:1.7; color:var(--ink-2); }
.legal-brief ul li + li{ margin-top:6px; }
.legal-brief ul li b{ color:var(--ink); }
.legal-brief a{ color:var(--accent); text-decoration:underline; }

.consent-box{
  display:flex; gap:12px; align-items:flex-start; padding:var(--sp-3); background:var(--bg);
  border:1px solid var(--line-strong); border-radius:var(--radius-card);
}
.consent-box input{ width:22px; height:22px; margin-top:2px; flex:none; accent-color:var(--accent); }
.consent-box label{ font-size:15px; line-height:1.6; }
.consent-box a{ color:var(--accent); text-decoration:underline; }

.submit-row{ margin-top:var(--sp-5); }
.submit-note{ text-align:center; margin-top:var(--sp-2); }
.submit-error{ justify-content:center; text-align:center; margin-top:var(--sp-2); }

.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* ============ 画面C：完了状態（apply.html 内に同居） ============ */
.screen-c{ padding:var(--sp-9) 0; text-align:center; background:var(--bg); }
@media (max-width:640px){ .screen-c{ padding:var(--sp-6) 0; } }
.screen-c .mark-ok{
  width:64px; height:64px; margin:0 auto var(--sp-3); border-radius:50%; background:var(--success-text);
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:32px;
}
.screen-c-next{ max-width:560px; margin:var(--sp-5) auto 0; text-align:left; display:grid; gap:var(--sp-2); }
.screen-c-recap{ max-width:560px; margin:var(--sp-4) auto 0; text-align:left; background:var(--bg-alt); border-radius:var(--radius-card); padding:var(--sp-3); }
.screen-c-recap ul{ margin:0; padding-left:1.2em; }
.screen-c-recap li{ font-size:15px; line-height:1.7; color:var(--ink-2); }
.screen-c-links{ margin-top:var(--sp-5); display:flex; gap:var(--sp-2); justify-content:center; flex-wrap:wrap; }

/* ============ 法定ページ（tokushoho.html / privacy.html） ============ */
main.legal-main{ padding:var(--sp-6) 0 var(--sp-8); }
.legal-updated{ font-size:13px; color:var(--ink-2); margin-top:var(--sp-1); }
.legal-card{ margin-top:var(--sp-5); }
.legal-card h2{ font-size:22px; font-weight:600; margin:var(--sp-6) 0 var(--sp-2); }
.legal-card h2:first-child{ margin-top:0; }
.legal-card p{ font-size:17px; line-height:1.8; color:var(--ink); margin:0 0 var(--sp-2); }
.legal-card ol, .legal-card ul{ font-size:17px; line-height:1.8; color:var(--ink); padding-left:1.4em; margin:0 0 var(--sp-2); }
.legal-table{ width:100%; border-collapse:collapse; margin:var(--sp-2) 0 var(--sp-4); }
.legal-table th, .legal-table td{ text-align:left; padding:var(--sp-2) 0; border-bottom:1px solid var(--line); vertical-align:top; font-size:16px; line-height:1.7; }
.legal-table th{ width:220px; color:var(--ink-2); font-weight:600; padding-right:var(--sp-3); }
@media (max-width:640px){
  .legal-table, .legal-table tbody, .legal-table tr, .legal-table th, .legal-table td{ display:block; width:auto; }
  .legal-table tr{ padding:var(--sp-2) 0; border-bottom:1px solid var(--line); }
  .legal-table th{ border-bottom:none; padding:0 0 4px; }
  .legal-table td{ border-bottom:none; padding:0; }
}
.legal-note{ font-size:14px; color:var(--ink-2); background:var(--bg-alt); border-radius:var(--radius-field); padding:var(--sp-3); margin:var(--sp-2) 0 var(--sp-4); }