/* ============================================================
   ゼロテマドットビズ LP  —  共通スタイル
   アクセントは1色（ティール）に統一（CLAUDE.md / ブリーフ準拠）
   ============================================================ */
:root{
  --accent:      #0E8C8B;   /* ティール（CTA・見出し強調・番号ラベル） */
  --accent-dark: #0A5F5E;   /* ホバー・濃い箇所 */
  --accent-tint: #E4F1F1;   /* 薄塗り背景・バッジ地 */
  /* #5 自動化フロー：4成果物の色分け（パステル・低彩度。ティール基調を散らさない範囲の彩り） */
  --prod-report:  #0E8C8B;  --prod-report-tint:  #E2F1F0;  /* 日報＝ティール */
  --prod-ledger:  #3F7CC2;  --prod-ledger-tint:  #E7EFF9;  /* 台帳＝ブルー */
  --prod-invoice: #C8912F;  --prod-invoice-tint: #F7EEDB;  /* 見積・請求＝アンバー */
  --prod-mail:    #D2705E;  --prod-mail-tint:    #F8E7E2;  /* メール＝コーラル */
  --ink:  #1F2933;          /* 本文（純黒は避ける） */
  --mut:  #6B7785;          /* 補助テキスト */
  --line: #E5E9ED;          /* 罫線 */
  --bg:   #F5F7F9;          /* セクション交互の薄塗り */
  --card: #FFFFFF;
  --r:   12px;
  --r-lg:18px;
  --shadow:    0 1px 2px rgba(21,49,75,.05), 0 8px 24px rgba(21,49,75,.06);
  --shadow-sm: 0 1px 2px rgba(21,49,75,.06), 0 3px 10px rgba(21,49,75,.05);
  --font: "Noto Sans JP", -apple-system, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  --maxw: 1120px;
  --header-h: 72px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font);
  color:var(--ink);
  background:var(--card);
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
  font-size:16px;
}
img{ max-width:100%; height:auto; display:block; }
/* 氏名の画像（責任者名）：本文に溶け込むインライン表示。
   グローバルの img{display:block} を打ち消して同じ行に並べ、文字と同じ高さに揃える。
   画像は上下に約11%ずつ透明余白があるため、height:1.15em で本文文字とほぼ同寸になる。 */
.name-img{ display:inline-block; height:1.15em; width:auto; vertical-align:middle; }
a{ color:inherit; text-decoration:none; }

/* ---- レイアウト基盤 ---- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:20px; }
.section{ padding:84px 0; }
.section--tint{ background:var(--bg); }
.section--accent{ background:var(--accent-tint); }

/* ---- 共通：セクション見出し ---- */
.eyebrow{ /* ＼ テキスト ／ 形式の手書き風ラベル */
  display:inline-flex; align-items:center; gap:.5em;
  font-weight:700; color:var(--accent); font-size:.95rem;
  letter-spacing:.02em; margin:0 0 14px;
}
.eyebrow::before, .eyebrow::after{
  content:""; width:2px; height:1.25em; background:var(--accent);
  border-radius:2px;
}
.eyebrow::before{ transform:rotate(-20deg); }
.eyebrow::after{ transform:rotate(20deg); }

.section-title{
  font-size:clamp(1.55rem, 4.2vw, 2.3rem);
  font-weight:900; line-height:1.45; margin:0 0 16px; letter-spacing:.01em;
}
.section-lead{ color:var(--mut); font-size:1.02rem; margin:0 auto; max-width:640px; }
.tac{ text-align:center; }

/* ---- 共通：CTAボタン ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font-family:inherit; font-weight:700; font-size:1rem; line-height:1;
  padding:16px 26px; border-radius:999px; border:2px solid transparent;
  cursor:pointer; transition:transform .12s ease, background .2s ease, box-shadow .2s ease;
  white-space:nowrap;
}
.btn svg{ width:1.15em; height:1.15em; flex:none; }
.btn--primary{ background:var(--accent); color:#fff; box-shadow:var(--shadow-sm); }
.btn--primary:hover{ background:var(--accent-dark); transform:translateY(-2px); }
.btn--ghost{ background:#fff; color:var(--accent-dark); border-color:var(--accent); }
.btn--ghost:hover{ background:var(--accent-tint); transform:translateY(-2px); }
.btn--sm{ padding:11px 18px; font-size:.9rem; }
.btn:focus-visible{ outline:3px solid var(--accent-dark); outline-offset:2px; }

/* ============================================================
   #0  上部帯CTA ＋ 固定ヘッダー
   ============================================================ */
.topbar{
  background:var(--accent-dark); color:#fff; text-align:center;
  font-size:.86rem; font-weight:500;
  display:flex; align-items:center; justify-content:center; gap:14px;
  padding:8px 16px; flex-wrap:wrap;
}
.topbar .label{ display:inline-flex; align-items:center; gap:.4em; opacity:.95; }
.topbar .label::before, .topbar .label::after{ content:"＼／"; display:none; }
.topbar a{
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.4);
  padding:5px 14px; border-radius:999px; font-weight:700; font-size:.82rem;
  transition:background .2s;
}
.topbar a:hover{ background:rgba(255,255,255,.28); }

.header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.92); backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid var(--line);
}
.header .wrap{
  height:var(--header-h); display:flex; align-items:center; gap:24px;
}
.logo{ display:flex; align-items:center; gap:9px; font-weight:900; font-size:1.18rem; letter-spacing:.01em; }
.logo .mark{
  width:30px; height:30px; border-radius:8px; background:var(--accent);
  display:grid; place-items:center; color:#fff;
}
.logo .mark svg{ width:18px; height:18px; }
/* ヘッダーのロゴ画像（横長・色）。存在感を出すため大きめ。比率維持・はみ出し無し
   ※ロゴSVGの余白はviewBoxをトリミング済み（height指定がそのまま見た目サイズに反映される） */
.logo-img{ height:46px; width:auto; display:block; max-width:none; }
.nav{ display:flex; gap:22px; margin-left:8px; font-size:.92rem; font-weight:500; }
.nav a{ color:var(--mut); transition:color .2s; }
.nav a:hover{ color:var(--accent-dark); }
.header-cta{ margin-left:auto; display:flex; align-items:center; gap:10px; }

/* ハンバーガーボタン（スマホのみ表示） */
.nav-toggle{
  display:none; margin-left:auto; width:44px; height:44px; padding:0;
  background:none; border:0; cursor:pointer; position:relative;
}
.nav-toggle .bar{
  display:block; width:24px; height:2px; background:var(--ink); border-radius:2px;
  margin:5px auto; transition:transform .25s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] .bar:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bar:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] .bar:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.nav-toggle:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; border-radius:8px; }

/* スマホ用ナビパネル（ドロワー） */
.mobile-nav{
  position:fixed; top:calc(var(--header-h) + 0px); left:0; right:0; z-index:99;
  background:#fff; border-bottom:1px solid var(--line); box-shadow:var(--shadow);
  padding:10px 20px 22px;
  transform:translateY(-120%); transition:transform .28s ease; visibility:hidden;
}
.mobile-nav.open{ transform:translateY(0); visibility:visible; }
.mobile-nav nav{ display:flex; flex-direction:column; }
.mobile-nav nav a{
  padding:14px 4px; font-weight:700; border-bottom:1px solid var(--line); color:var(--ink);
}
.mobile-nav-cta{ display:flex; flex-direction:column; gap:10px; margin-top:18px; }
.mobile-nav-cta .btn{ width:100%; }
.mobile-nav-overlay{
  position:fixed; inset:0; z-index:98; background:rgba(31,41,51,.35);
  opacity:0; transition:opacity .28s ease;
}
.mobile-nav-overlay.open{ opacity:1; }
body.nav-open{ overflow:hidden; }

/* ============================================================
   #1  ファーストビュー（FV）
   ============================================================ */
.fv{
  position:relative;
  background:
    radial-gradient(1100px 460px at 78% -10%, var(--accent-tint) 0%, rgba(228,241,241,0) 60%),
    radial-gradient(620px 380px at 92% 28%, rgba(14,140,139,.08) 0%, rgba(14,140,139,0) 62%),
    linear-gradient(180deg, #fff 0%, #fbfdfd 100%);
  overflow:hidden;
}
.fv .wrap{
  display:grid; grid-template-columns:1fr 1.18fr; gap:36px; row-gap:22px; align-items:center;
  padding-top:64px; padding-bottom:72px;
}
.fv .cat{
  display:inline-block; font-size:.82rem; font-weight:700; letter-spacing:.06em;
  color:var(--accent-dark); background:var(--accent-tint);
  padding:6px 14px; border-radius:999px; margin-bottom:20px;
}
.fv h1{
  font-size:clamp(2.2rem, 6.4vw, 3.6rem); font-weight:900; line-height:1.3;
  letter-spacing:.01em; margin:0 0 20px;
}
.fv h1 .hl{ color:var(--accent); }
.fv .sub{ font-size:1.08rem; color:var(--ink); margin:0 0 14px; }
.fv .note{
  font-size:.92rem; color:var(--mut); margin:0 0 28px;
  padding-left:14px; border-left:3px solid var(--accent-tint);
}
/* FV全幅の締めCTA：コピー／画像の下にグリッドをまたいで配置（左寄せ） */
.fv .cta-row{ display:flex; gap:14px; flex-wrap:wrap; grid-column:1 / -1; margin-top:4px; }

/* FV右：製品画面（主役）＋人物（サブ） */
/* 透過モックアップを大きく見せる：画像カラムを広く取り、右端方向へブリードさせFV右側いっぱいに寄せる。
   PNG右側の透明余白はFV右端からはみ出し、.fv の overflow:hidden で切れる（横スクロールは出ない） */
/* 上端を左カラム（コピー）の上端に揃える：グリッドは align-items:center のまま、
   画像カラムだけ align-self:start で上寄せ（REC写真も含めグループごと上へ） */
.fv-visual{ position:relative; width:calc(100% + 80px); margin-right:-80px; align-self:start; }
/* 透過PNGのデバイスモックアップ：枠・影・カード背景は付けずFV背景に直接乗せる */
.fv-screen{ background:none; border:0; box-shadow:none; border-radius:0; }
.fv-screen img{ width:100%; height:auto; }
/* 主役がPC＋スマホの横広モックアップに変わったため、右下のスマホと重ならないよう左下に配置 */
.fv-person{
  position:absolute; left:-12px; bottom:-22px; width:36%;
  border-radius:14px; box-shadow:var(--shadow); border:3px solid #fff;
  overflow:hidden;
}
.fv-person .rec{
  position:absolute; top:8px; left:8px; display:inline-flex; align-items:center; gap:5px;
  background:rgba(31,41,51,.78); color:#fff; font-size:.66rem; font-weight:700;
  padding:3px 8px; border-radius:999px;
}
.fv-person .rec .dot{ width:7px; height:7px; border-radius:50%; background:#E0654A; animation:blink 1.4s infinite; }
@keyframes blink{ 50%{ opacity:.25; } }

/* FV信頼バッジ帯 */
.fv-badges{
  grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:10px 22px;
  margin-top:0; padding-top:24px; border-top:1px dashed var(--line);
}
.fv-badge{ display:inline-flex; align-items:center; gap:8px; font-size:.9rem; font-weight:700; color:var(--accent-dark); }
.fv-badge svg{ width:20px; height:20px; flex:none; color:var(--accent); }

/* ============================================================
   FV 演出（SATORI調：白基調を壊さない上品でゆっくりした動き）
   A.背景の音声波形  B.録音インジケーター  C.コピー登場
   ============================================================ */
.fv .wrap{ position:relative; z-index:1; }  /* 演出レイヤーより前面に */

/* A. 背景にごく薄く敷いた音声波形（静的・装飾）。teal #0E8C8B はデータURI内のため直値で指定（CSS変数不可）
   ※「うねうね動く」のが気になるとのことで、ドリフトのアニメーションは停止し、透明度も下げてほぼ目立たなく */
.fv-deco{
  position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='80' viewBox='0 0 240 80'%3E%3Cpath d='M0,40 Q30,14 60,40 T120,40 T180,40 T240,40' fill='none' stroke='%230E8C8B' stroke-width='2.5'/%3E%3C/svg%3E");
  background-repeat:repeat-x; background-size:240px 80px; background-position:0 40%;
  /* 左側（コピー側）はより薄く、右の製品画面側へ向けて見せる */
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 30%, #000 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 30%, #000 100%);
}

/* B. 録音インジケーター：赤●が脈打つ＋ティールのイコライザーが大きく上下（コピー近くで主役化） */
.rec-indicator{ display:inline-flex; align-items:center; gap:16px; height:46px; margin:4px 0 26px; }
.rec-pulse{ position:relative; flex:none; width:14px; height:14px; border-radius:50%; background:#E0654A;
  animation:rec-core 2.2s ease-in-out infinite; }
@keyframes rec-core{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.12); } }
/* 中空リングが広がって消える＝ゆっくりした脈動リズム（点滅ではなく拡散） */
.rec-pulse::after{ content:""; position:absolute; inset:0; border-radius:50%; border:2px solid #E0654A;
  animation:rec-ring 2.2s ease-out infinite; }
@keyframes rec-ring{ 0%{ transform:scale(1); opacity:.65; } 80%,100%{ transform:scale(3); opacity:0; } }
/* 波形：中央基準で対称に伸縮し「音声波形」らしく。バー16本・幅広・大きな振幅 */
.eq{ display:inline-flex; align-items:center; gap:4px; height:46px; }
.eq span{ width:4px; border-radius:3px; background:var(--accent); height:32%;
  animation:eq-bounce 1.9s ease-in-out infinite; }
.eq span:nth-child(1){ animation-delay:-.00s; }
.eq span:nth-child(2){ animation-delay:-.09s; }
.eq span:nth-child(3){ animation-delay:-.18s; }
.eq span:nth-child(4){ animation-delay:-.27s; }
.eq span:nth-child(5){ animation-delay:-.36s; }
.eq span:nth-child(6){ animation-delay:-.45s; }
.eq span:nth-child(7){ animation-delay:-.54s; }
.eq span:nth-child(8){ animation-delay:-.63s; }
.eq span:nth-child(9){ animation-delay:-.72s; }
.eq span:nth-child(10){ animation-delay:-.81s; }
.eq span:nth-child(11){ animation-delay:-.90s; }
.eq span:nth-child(12){ animation-delay:-.99s; }
.eq span:nth-child(13){ animation-delay:-1.08s; }
.eq span:nth-child(14){ animation-delay:-1.17s; }
.eq span:nth-child(15){ animation-delay:-1.26s; }
.eq span:nth-child(16){ animation-delay:-1.35s; }
@keyframes eq-bounce{ 0%,100%{ height:34%; } 50%{ height:82%; } }

/* C. コピーが下からふわっとフェードイン（控えめに段階登場） */
@keyframes fv-rise{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
.fv-copy .cat{ animation:fv-rise .6s ease .05s both; }
.fv-copy h1{ animation:fv-rise .7s ease .15s both; }
.fv-copy .rec-indicator{ animation:fv-rise .6s ease .34s both; }
.fv-copy .sub{ animation:fv-rise .6s ease .46s both; }
.fv-copy .note{ animation:fv-rise .6s ease .56s both; }
.fv .cta-row{ animation:fv-rise .6s ease .66s both; }
/* 「録音」だけ、わずかに遅れてティールが効く瞬間をつくる（色＋淡い下線） */
.fv h1 .hl{ position:relative; animation:hl-teal 1s ease .80s both; }
@keyframes hl-teal{ from{ color:var(--ink); } to{ color:var(--accent); } }
.fv h1 .hl::after{
  content:""; position:absolute; left:0; right:0; bottom:-.04em; height:.14em; border-radius:4px;
  background:rgba(14,140,139,.5);
  transform:scaleX(0); transform-origin:left;
  /* 読み込み時に左→右へ一度だけ伸びる（その後は静止。常時動く光は止めた） */
  animation:hl-underline .85s cubic-bezier(.22,.7,.3,1) .95s both;
}
@keyframes hl-underline{ to{ transform:scaleX(1); } }

/* アクセシビリティ：モーション抑制設定では全演出を停止し、静的でも成立させる */
@media (prefers-reduced-motion: reduce){
  .fv-deco{ opacity:.05; }
  .fv-copy .cat, .fv-copy h1, .fv-copy .rec-indicator,
  .fv-copy .sub, .fv-copy .note, .fv .cta-row{ animation:none; opacity:1; transform:none; }
  .fv h1 .hl{ animation:none; color:var(--accent); }
  .fv h1 .hl::after{ animation:none; transform:scaleX(1); background:rgba(14,140,139,.45); }
  .rec-pulse{ animation:none; }                        /* ●の脈動を停止 */
  .rec-pulse::after{ animation:none; display:none; }   /* 拡散リングを消し、単色の●に */
  .eq span{ animation:none; height:58%; }              /* 波形は止めて静止バーに */
  .fv-person .rec .dot{ animation:none; }              /* 既存RECバッジの点滅も停止 */
}

/* ============================================================
   #2  お悩み／活用シーン 3カード
   ============================================================ */
.worry-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:46px; }
.worry-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:34px 26px 28px; text-align:center; box-shadow:var(--shadow-sm);
  transition:transform .15s ease, box-shadow .2s ease;
}
.worry-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.worry-label{
  display:inline-flex; align-items:center; gap:.5em;
  font-weight:700; color:var(--accent); font-size:1.02rem; margin-bottom:18px;
}
.worry-label::before, .worry-label::after{ content:""; width:2px; height:1.2em; background:var(--accent); border-radius:2px; }
.worry-label::before{ transform:rotate(-20deg); }
.worry-label::after{ transform:rotate(20deg); }
.worry-ico{
  width:84px; height:84px; margin:0 auto 18px; border-radius:50%;
  background:var(--accent-tint); display:grid; place-items:center;
}
.worry-ico svg{ width:42px; height:42px; color:var(--accent-dark); }
.worry-card p{ color:var(--mut); font-size:.96rem; margin:0; }

/* ============================================================
   #3  信頼帯
   ============================================================ */
.trust{ position:relative; color:#fff; text-align:center; overflow:hidden; }
.trust .bg{ position:absolute; inset:0; }
.trust .bg img{ width:100%; height:100%; object-fit:cover; filter:brightness(.5); }
.trust .bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,95,94,.78), rgba(14,140,139,.72)); }
.trust .wrap{ position:relative; padding:60px 20px; }
.trust h2{ font-size:clamp(1.3rem,3.4vw,1.7rem); font-weight:900; margin:0 0 28px; }
.trust-badges{ display:flex; flex-wrap:wrap; justify-content:center; gap:16px 28px; }
.trust-badge{
  display:inline-flex; align-items:center; gap:10px; font-weight:700; font-size:1rem;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.35);
  padding:12px 22px; border-radius:999px; backdrop-filter:blur(2px);
}
.trust-badge svg{ width:22px; height:22px; flex:none; }

/* ============================================================
   #4  課題提起
   ============================================================ */
.problem-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:46px; }
.problem-card{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-sm); }
.problem-card .ph{ aspect-ratio:16/10; overflow:hidden; background:var(--bg); }
.problem-card .ph img{ width:100%; height:100%; object-fit:cover; }
.problem-card .body{ padding:22px 22px 26px; }
.problem-card .num{ display:inline-block; font-weight:900; color:var(--accent); font-size:.85rem; letter-spacing:.04em; margin-bottom:6px; }
.problem-card h3{ font-size:1.12rem; font-weight:900; margin:0 0 10px; }
.problem-card p{ color:var(--mut); font-size:.94rem; margin:0; }
/* 写真準備中プレースホルダ（写真カードと同じ縦横比・角丸・トーンで馴染ませる） */
.ph-soon{
  width:100%; height:100%; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:8px;
  background:
    repeating-linear-gradient(45deg, transparent 0 14px, rgba(14,140,139,.04) 14px 28px),
    var(--accent-tint);
  color:var(--accent-dark);
}
.ph-soon svg{ width:46px; height:46px; opacity:.7; }
.ph-soon span{ font-size:.82rem; font-weight:700; letter-spacing:.04em; opacity:.85; }

/* ============================================================
   #5  ソリューション宣言 ＋ 自動化フロー図
   ============================================================ */
.flow-diagram{ display:flex; align-items:stretch; justify-content:center; gap:14px; flex-wrap:wrap; margin-top:44px; }
.flow-step{
  background:#fff; border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow-sm);
  padding:22px 18px; text-align:center; width:170px; flex:0 0 auto;
}
.flow-step .ico{ width:54px; height:54px; margin:0 auto 12px; border-radius:50%; display:grid; place-items:center; }
.flow-step .ico svg{ width:28px; height:28px; }
/* 3ステップはティールの濃淡で「段階が進む」表現（薄→濃） */
.step--1 .ico{ background:var(--accent-tint); }  .step--1 .ico svg{ color:var(--accent); }
.step--2 .ico{ background:#BCE0DF; }             .step--2 .ico svg{ color:var(--accent-dark); }
.step--3 .ico{ background:var(--accent); }       .step--3 .ico svg{ color:#fff; }
.flow-step b{ display:block; font-size:.98rem; }
.flow-step span{ font-size:.8rem; color:var(--mut); }
.flow-arrow{ align-self:center; color:var(--accent); flex:0 0 auto; }
/* 矢印はゆっくり前へ送る程度の控えめな動き（チカチカ無し） */
.flow-arrow svg{ width:26px; height:26px; animation:flow-nudge 2.6s ease-in-out infinite; }
.flow-diagram > .flow-arrow:nth-child(4) svg{ animation-delay:.5s; }  /* 2本目の矢印を少し遅らせて順送り感 */
@keyframes flow-nudge{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(3px); } }

/* 要約→4成果物の枝分かれ（中央の幹 → 横バー → 各カードへドロップ＋矢じり）
   ※矢じりの先端とカード上辺の間に余白ができるよう、ドロップは短め＋.flow-fan に margin-top */
.flow-branch{ position:relative; height:44px; margin-top:12px; }
.flow-branch span{ position:absolute; background:var(--accent); border-radius:2px; }
.b-stem{ top:0; left:50%; transform:translateX(-50%); width:2px; height:18px; }
.b-bar{ top:18px; left:12.5%; right:12.5%; height:2px; }
.b-drop{ top:18px; width:2px; height:20px; }
.b-drop:nth-child(3){ left:12.5%; }
.b-drop:nth-child(4){ left:37.5%; }
.b-drop:nth-child(5){ left:62.5%; }
.b-drop:nth-child(6){ left:87.5%; }
.b-drop::after{ content:""; position:absolute; bottom:-5px; left:50%; transform:translateX(-50%); width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent; border-top:6px solid var(--accent); }

/* 4成果物カード：白地＋色帯（border-top）＋淡色アイコンチップで彩り */
.flow-fan{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:14px; }  /* 矢じりとカードの間に約14pxのすき間 */
.flow-out{
  background:#fff; border:1px solid var(--line); border-top:3px solid var(--c); border-radius:var(--r);
  padding:18px 12px 16px; text-align:center; font-weight:700; font-size:.9rem; color:var(--ink); box-shadow:var(--shadow-sm);
}
.out-ico{ width:44px; height:44px; margin:0 auto 10px; border-radius:50%; background:var(--c-tint); display:grid; place-items:center; }
.out-ico svg{ width:22px; height:22px; color:var(--c); display:block; }
.out--report{  --c:var(--prod-report);  --c-tint:var(--prod-report-tint); }
.out--ledger{  --c:var(--prod-ledger);  --c-tint:var(--prod-ledger-tint); }
.out--invoice{ --c:var(--prod-invoice); --c-tint:var(--prod-invoice-tint); }
.out--mail{    --c:var(--prod-mail);    --c-tint:var(--prod-mail-tint); }

/* 4成果物→1つに集約してゴールへ（branch の逆向き：各カード下→横バー→中央の幹→ゴール） */
.flow-merge{ position:relative; height:46px; margin-top:8px; }
.flow-merge span{ position:absolute; background:var(--accent); border-radius:2px; }
.m-drop{ top:0; width:2px; height:18px; }
.m-drop:nth-child(1){ left:12.5%; }
.m-drop:nth-child(2){ left:37.5%; }
.m-drop:nth-child(3){ left:62.5%; }
.m-drop:nth-child(4){ left:87.5%; }
.m-bar{ top:18px; left:12.5%; right:12.5%; height:2px; }
.m-stem{ top:18px; left:50%; transform:translateX(-50%); width:2px; height:22px; }
.m-stem::after{ content:""; position:absolute; bottom:-5px; left:50%; transform:translateX(-50%); width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent; border-top:6px solid var(--accent); }

/* フローの結論バンド（ゴール）：淡いティール帯＋チェックで「人は確認だけ」を強調 */
.flow-goal{
  display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap; text-align:center;
  margin-top:14px; padding:24px 30px;
  background:var(--accent-tint); border:1px solid #C2E2E1; border-radius:var(--r-lg);
}
.goal-ico{ flex:none; width:48px; height:48px; border-radius:50%; background:var(--accent);
  display:grid; place-items:center; box-shadow:0 4px 12px rgba(14,140,139,.25); }
.goal-ico svg{ width:26px; height:26px; color:#fff; }
.flow-goal p{ margin:0; font-weight:900; font-size:clamp(1.3rem, 3.2vw, 1.75rem); line-height:1.4; color:var(--ink); }
.flow-goal .hl{ color:var(--accent); }

/* 動きを抑制する設定では矢印の送りも停止 */
@media (prefers-reduced-motion: reduce){
  .flow-arrow svg{ animation:none; transform:none; }
}

/* ============================================================
   #6  3つの特徴（番号付き・左右交互）
   ============================================================ */
.feature-row{ display:grid; grid-template-columns:1fr 1fr; gap:54px; align-items:center; margin-bottom:64px; }
.feature-row:last-child{ margin-bottom:0; }
/* PC：reverse ブロックは画像を左側へ（特徴01=右／02=左／03=右 の左右交互）。
   visual を copy より前(order:-1)に出すことで画像が左カラムに入る */
.feature-row.reverse .feature-visual{ order:-1; }
.feature-num{ display:inline-flex; align-items:center; gap:10px; margin-bottom:16px; }
.feature-num .badge{
  width:54px; height:54px; border-radius:14px; background:var(--accent); color:#fff;
  display:grid; place-items:center; font-weight:900; font-size:1.05rem; box-shadow:var(--shadow-sm);
}
.feature-num .badge small{ display:block; font-size:.6rem; font-weight:700; opacity:.85; line-height:1; }
.feature-num .badge b{ font-size:1.25rem; line-height:1; }
.feature-num .tag{ font-weight:900; font-size:1.15rem; }
.feature-row h3{ font-size:clamp(1.35rem,3.2vw,1.8rem); font-weight:900; margin:0 0 14px; line-height:1.45; }
.feature-row p{ color:var(--mut); font-size:1rem; margin:0; }
.feature-visual img, .feature-visual .ph{
  border-radius:var(--r-lg); box-shadow:var(--shadow); border:1px solid var(--line); width:100%;
}
.feature-visual.screenshot img{ background:#fff; }
.feature-visual.photo img{ aspect-ratio:3/2; object-fit:cover; }

/* ============================================================
   #7  機能詳細（カードグリッド6枚）
   ============================================================ */
.func-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:46px; }
.func-card{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .15s, box-shadow .2s; }
.func-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.func-card .thumb{ aspect-ratio:16/10; overflow:hidden; background:var(--bg); border-bottom:1px solid var(--line); }
.func-card .thumb img{ width:100%; height:100%; object-fit:cover; object-position:top; }
.func-card .body{ padding:20px 22px 24px; }
.func-card h3{ font-size:1.06rem; font-weight:900; margin:0 0 9px; display:flex; align-items:center; gap:9px; }
.func-card h3 svg{ width:22px; height:22px; color:var(--accent); flex:none; }
.func-card p{ color:var(--mut); font-size:.92rem; margin:0; }

/* ============================================================
   #8  セキュリティ
   ============================================================ */
.sec-pillars{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:44px; }
.sec-pillar{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:28px 20px; text-align:center; box-shadow:var(--shadow-sm); }
.sec-pillar .ico{ width:64px; height:64px; margin:0 auto 16px; border-radius:50%; background:var(--accent-tint); display:grid; place-items:center; }
.sec-pillar .ico svg{ width:32px; height:32px; color:var(--accent-dark); }
.sec-pillar h3{ font-size:1.02rem; font-weight:900; margin:0 0 9px; }
.sec-pillar p{ color:var(--mut); font-size:.88rem; margin:0; }
.sec-closing{ margin-top:36px; background:var(--accent-tint); border-radius:var(--r-lg); padding:26px 28px; text-align:center; font-weight:700; color:var(--accent-dark); }
.sec-badges{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin-top:24px; }
.sec-badges .b{ font-size:.82rem; font-weight:700; color:var(--mut); border:1px dashed var(--line); border-radius:999px; padding:8px 16px; }

/* ============================================================
   #9  数値効果 / Before-After
   ============================================================ */
.stat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:44px; }
.stat-card{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:34px 22px; text-align:center; box-shadow:var(--shadow-sm); }
.stat-card .num{ font-size:clamp(2.4rem,6vw,3.2rem); font-weight:900; color:var(--accent); line-height:1; }
.stat-card .num small{ font-size:1.1rem; }
.stat-card .lbl{ margin-top:12px; font-weight:700; }
/* Before/After：行ペア型（左=課題 / 中央=矢印 / 右=解決） */
.ba-flow{ margin-top:36px; }
.ba-flow-head{ display:grid; grid-template-columns:1fr 46px 1fr; gap:0 18px; margin-bottom:6px; }
.ba-flow-head h4{ margin:0; font-weight:900; font-size:1.05rem; display:flex; align-items:center; gap:8px; padding:0 20px; }
.ba-flow-head h4::before{ content:""; width:8px; height:8px; border-radius:50%; }
.ba-flow-head .h-before{ color:var(--mut); }
.ba-flow-head .h-before::before{ background:#B8C0C9; }
.ba-flow-head .h-after{ grid-column:3; color:var(--accent-dark); }
.ba-flow-head .h-after::before{ background:var(--accent); }

.ba-pair{ display:grid; grid-template-columns:1fr 46px 1fr; gap:0 18px; align-items:stretch; padding:10px 0; border-top:1px solid var(--line); }
.ba-pair:first-of-type{ border-top:none; }

.ba-cell{ display:flex; align-items:center; gap:14px; padding:16px 20px; border-radius:var(--r); font-size:.95rem; }
.ba-cell.before{ background:#F2F4F6; border:1px solid var(--line); color:var(--mut); }    /* 課題側＝沈んだグレー（前に出ない） */
.ba-cell.after{ background:var(--accent-tint); border:1px solid rgba(14,140,139,.18); color:var(--ink); font-weight:700; box-shadow:var(--shadow-sm); } /* 解決側＝ティール地で前向き・浮かせて視線誘導 */

/* 内容アイコン：チップ。導入前＝彩度を抑えたグレー、導入後＝ティール */
.ba-ic{ flex:0 0 42px; width:42px; height:42px; padding:9px; border-radius:50%; }
.ba-cell.before .ba-ic{ color:#8A929C; background:#EDEFF1; }
.ba-cell.after .ba-ic{ color:var(--accent); background:#fff; box-shadow:0 1px 2px rgba(21,49,75,.05); }

/* 中央の矢印（左→右の流れ。ティール） */
.ba-arrow{ align-self:center; display:grid; place-items:center; color:var(--accent); }
.ba-arrow svg{ width:26px; height:26px; display:block; }

/* ============================================================
   #10 導入事例
   ============================================================ */
.case-card{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); overflow:hidden; max-width:840px; margin:44px auto 0; display:grid; grid-template-columns:1fr 1.4fr; }
.case-card .ph{ overflow:hidden; background:var(--bg); }
.case-card .ph img{ width:100%; height:100%; object-fit:cover; min-height:220px; }
.case-card .body{ padding:30px 32px; }
.case-card .quote{ font-size:1.1rem; font-weight:700; line-height:1.7; margin:0 0 16px; }
.case-card .meta{ color:var(--mut); font-size:.88rem; }
.case-note{ text-align:center; color:var(--mut); font-size:.86rem; margin-top:18px; }

/* ============================================================
   #11 連携・対応ツール
   ============================================================ */
/* マーキー（右→左へ無限スクロール） */
.marquee{ position:relative; margin-top:36px; overflow:hidden;
  /* 両端をふんわり消すフェード（背景色→transparent）。マスクで背景に依存せず透過 */
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%); }
.marquee-track{ display:flex; width:max-content; list-style:none; margin:0; padding:6px 0;
  animation:marquee-scroll 36s linear infinite; }
/* ホバーで一時停止（任意） */
.marquee:hover .marquee-track{ animation-play-state:paused; }
/* 2セット並べて -50% 移動＝1セット分。継ぎ目のない無限ループ。
   gap ではなく各チップの margin-right で間隔を取り、末尾チップにも余白を付けて -50% を完全一致させる */
@keyframes marquee-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

.tool-pill{ flex:none; display:inline-flex; align-items:center; gap:10px;
  margin-right:16px; background:#fff; border:1px solid var(--line); border-radius:999px;
  padding:12px 22px; font-weight:700; color:var(--ink); box-shadow:var(--shadow-sm); white-space:nowrap; }
.tool-pill svg{ width:22px; height:22px; color:var(--accent); flex:none; }
.tool-pill span{ font-size:.95rem; }

/* アクセシビリティ：モーション抑制設定なら停止して静的な横並びに */
@media (prefers-reduced-motion: reduce){
  .marquee{ -webkit-mask-image:none; mask-image:none; }
  .marquee-track{ animation:none; width:auto; flex-wrap:wrap; justify-content:center; gap:14px; }
  .tool-pill{ margin-right:0; }
  .tool-pill.dup{ display:none; }  /* 複製セットは静的表示では不要 */
}

/* ============================================================
   #12 導入の流れ ＋ 活用サポート
   ============================================================ */
.flow-steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:44px; }
.flow-card{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:26px 22px; box-shadow:var(--shadow-sm); position:relative; }
.flow-card .step-no{ width:40px; height:40px; border-radius:50%; background:var(--accent); color:#fff; font-weight:900; display:grid; place-items:center; margin-bottom:14px; }
.flow-card h3{ font-size:1.02rem; font-weight:900; margin:0 0 8px; }
.flow-card p{ color:var(--mut); font-size:.88rem; margin:0; }
.split{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:30px; align-items:center; }
.support-box{ background:var(--accent-tint); border-radius:var(--r-lg); padding:30px 32px; }
.support-box h3{ margin:0 0 10px; font-weight:900; }
.support-box p{ margin:0; color:var(--accent-dark); }
.support-photo img{ border-radius:var(--r-lg); box-shadow:var(--shadow); width:100%; aspect-ratio:3/2; object-fit:cover; }

/* ============================================================
   #13 FAQ
   ============================================================ */
.faq-list{ max-width:780px; margin:40px auto 0; }
.faq-item{ background:#fff; border:1px solid var(--line); border-radius:var(--r); margin-bottom:14px; overflow:hidden; }
.faq-item summary{ cursor:pointer; list-style:none; padding:20px 24px; font-weight:700; display:flex; align-items:center; gap:14px; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary .q{ color:var(--accent); font-weight:900; flex:none; }
.faq-item summary .mark-toggle{ margin-left:auto; transition:transform .2s; color:var(--mut); }
.faq-item[open] summary .mark-toggle{ transform:rotate(45deg); }
.faq-item .a{ padding:0 24px 22px 58px; color:var(--mut); font-size:.94rem; }

/* ============================================================
   #14 CTA帯 / #15 クロージングCTA
   ============================================================ */
.cta-band{ background:var(--accent); color:#fff; text-align:center; }
.cta-band .eyebrow{ color:#fff; }
.cta-band .eyebrow::before, .cta-band .eyebrow::after{ background:#fff; }
.cta-band h2{ font-size:clamp(1.5rem,4vw,2.1rem); font-weight:900; margin:0 0 24px; }
.cta-band .cta-row{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.cta-band .btn--primary{ background:#fff; color:var(--accent-dark); }
.cta-band .btn--primary:hover{ background:var(--accent-tint); }
.cta-band .btn--ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.7); }
.cta-band .btn--ghost:hover{ background:rgba(255,255,255,.14); }
.closing{ text-align:center; }
.closing h2{ font-size:clamp(1.7rem,4.6vw,2.5rem); font-weight:900; margin:0 0 14px; }
.closing p{ color:var(--mut); margin:0 0 30px; }
.closing .cta-row{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

/* ============================================================
   #16 フッター
   ============================================================ */
.footer{ background:#16242e; color:#c3ccd4; font-size:.9rem; padding:54px 0 28px; }
.footer .top{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:32px; }
.footer .logo{ color:#fff; margin-bottom:14px; display:inline-flex; }
/* フッターのロゴ画像（白版・濃色背景対応）。ヘッダーと同一ロゴの白抜き */
.footer-logo-img{ height:44px; width:auto; display:block; max-width:none; }
.footer .desc{ color:#90a0ab; max-width:320px; }
.footer h4{ color:#fff; font-size:.92rem; margin:0 0 14px; }
.footer ul{ list-style:none; margin:0; padding:0; }
.footer li{ margin-bottom:10px; }
.footer a:hover{ color:#fff; }
.footer .badges{ display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; }
.footer .badges .b{ border:1px solid #36454f; border-radius:8px; padding:6px 12px; font-size:.78rem; color:#90a0ab; }
.footer .bottom{ border-top:1px solid #2a3a44; margin-top:36px; padding-top:20px; display:flex; justify-content:flex-start; flex-wrap:wrap; gap:12px; color:#90a0ab; font-size:.82rem; }

/* ============================================================
   法務ページ（プライバシーポリシー / 特定商取引法に基づく表記）共通
   ============================================================ */
.legal{ max-width:760px; margin-inline:auto; padding:48px 20px 72px; line-height:1.9; }
.legal-back{ display:inline-flex; align-items:center; gap:6px; font-size:.9rem; font-weight:700; color:var(--accent-dark); margin-bottom:18px; }
.legal-back svg{ width:18px; height:18px; }
.legal-back:hover{ color:var(--accent); }
.legal h1{ font-size:clamp(1.7rem,4.5vw,2.2rem); font-weight:900; line-height:1.4; margin:0 0 10px; }
.legal .lead{ color:var(--mut); margin:0 0 30px; }
.legal h2{ font-size:1.18rem; font-weight:900; line-height:1.5; margin:38px 0 12px; padding-left:12px; border-left:4px solid var(--accent); }
.legal h3{ font-size:1.05rem; font-weight:900; margin:28px 0 10px; }
.legal p{ margin:0 0 14px; }
.legal ol, .legal ul{ margin:0 0 16px; padding-left:1.5em; }
.legal li{ margin-bottom:8px; }
.legal .contact-list{ list-style:none; padding:18px 20px; background:var(--bg); border:1px solid var(--line); border-radius:var(--r); }
.legal .contact-list li{ margin-bottom:6px; }
.legal .contact-list li:last-child{ margin-bottom:0; }
.legal hr{ border:0; border-top:1px solid var(--line); margin:38px 0; }
.legal .revised{ color:var(--mut); font-size:.9rem; margin-top:30px; }

/* 準備中注記（公開前に削除する目立たないグレー帯） */
.legal-prep{ background:#F4F6F8; border:1px solid var(--line); border-radius:var(--r); padding:12px 16px; font-size:.85rem; color:var(--mut); margin:0 0 30px; }

/* 【要記入】の差し込み箇所（淡い強調で視認。公開前に通常テキスト化） */
.todo-fill{ color:#9A6A12; background:#FBF3E1; border-bottom:1px dashed #D9B772; padding:0 3px; border-radius:2px; }

/* 特商法の表（スマホでも溢れないよう .table-wrap で横スクロール可） */
.table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin:8px 0 24px; }
.legal-table{ width:100%; border-collapse:collapse; font-size:.95rem; }
.legal-table th, .legal-table td{ border:1px solid var(--line); padding:13px 16px; text-align:left; vertical-align:top; line-height:1.8; }
.legal-table th{ background:var(--accent-tint); color:var(--accent-dark); font-weight:700; white-space:nowrap; width:32%; }
.legal-table td{ background:#fff; }
@media (max-width:560px){
  .legal{ padding:32px 18px 56px; }
  .legal-table{ font-size:.9rem; }
  .legal-table th{ white-space:normal; width:36%; }
  .legal-table th, .legal-table td{ padding:10px 12px; }
}

/* ============================================================
   申込フォーム（#contact）
   ============================================================ */
.apply{ background:var(--bg); }
.apply-card{
  max-width:720px; margin:40px auto 0; background:#fff;
  border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow); padding:36px 40px;
}
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px 24px; }
.field{ display:flex; flex-direction:column; gap:7px; }
.field.col-2{ grid-column:1 / -1; }
.field label, .field .label{ font-weight:700; font-size:.92rem; }
.field .req{ color:#fff; background:var(--accent); font-size:.64rem; font-weight:700; padding:2px 7px; border-radius:4px; margin-left:8px; vertical-align:middle; }
.field .opt{ color:var(--mut); background:var(--bg); font-size:.64rem; font-weight:700; padding:2px 7px; border-radius:4px; margin-left:8px; vertical-align:middle; border:1px solid var(--line); }
.field input, .field select, .field textarea{
  font-family:inherit; font-size:1rem; color:var(--ink); width:100%;
  padding:12px 14px; border:1.5px solid var(--line); border-radius:var(--r);
  background:#fff; transition:border-color .15s ease, box-shadow .15s ease;
}
.field textarea{ resize:vertical; min-height:110px; }
/* セレクト（役職）：ネイティブ矢印を消し、ティールのシェブロンを表示 */
.field select{
  appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230E8C8B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:16px;
}
.field select:invalid{ color:#aab2bb; }  /* 「選択してください」(value="") の間はプレースホルダ風に */
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-tint);
}
.field input::placeholder, .field textarea::placeholder{ color:#aab2bb; }
/* 項目下の小さな注記（例：文字数制限） */
.field-note{ color:var(--mut); font-size:.78rem; }
/* 氏／名の横並び（form-grid が1カラムに落ちても2カラムを維持） */
.name-row{ grid-column:1 / -1; display:grid; grid-template-columns:1fr 1fr; gap:18px 20px; }
.radio-group{ display:flex; gap:12px; flex-wrap:wrap; }
.radio-chip{
  flex:1 1 180px; display:flex; align-items:center; gap:10px; cursor:pointer;
  border:1.5px solid var(--line); border-radius:var(--r); padding:13px 16px;
  font-weight:700; font-size:.95rem; transition:border-color .15s ease, background .15s ease;
}
.radio-chip:hover{ border-color:var(--accent); }
.radio-chip input{ accent-color:var(--accent); width:18px; height:18px; flex:none; }
/* チェック時のハイライト（:has 未対応ブラウザでは無視され、機能には影響なし） */
.radio-chip:has(input:checked){ border-color:var(--accent); background:var(--accent-tint); }
.consent{ grid-column:1 / -1; display:flex; align-items:flex-start; gap:10px; font-size:.92rem; }
.consent input{ accent-color:var(--accent); width:18px; height:18px; margin-top:3px; flex:none; }
.consent a{ color:var(--accent-dark); text-decoration:underline; }
.form-submit{ grid-column:1 / -1; display:flex; flex-direction:column; align-items:center; gap:12px; margin-top:6px; }
.form-submit .btn{ min-width:280px; }
.form-note{ color:var(--mut); font-size:.82rem; text-align:center; margin:0; }
/* ハニーポット：人間には見えない囮フィールド（スクリーンリーダーからも隠す） */
.hp-field{ position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* ============================================================
   資料ダウンロードページ（document.html）：左=資料紹介／右=フォーム
   ============================================================ */
.doc-layout{ display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:start; }
/* 資料の表紙サムネ（角丸＋淡い影） */
.doc-cover{ width:100%; height:auto; border-radius:var(--r-lg); box-shadow:var(--shadow); border:1px solid var(--line); margin-bottom:24px; }
.doc-intro .eyebrow{ margin-bottom:10px; }
.doc-intro .section-title{ margin-bottom:14px; }
.doc-points-title{ font-size:1.05rem; font-weight:900; margin:24px 0 14px; }
.doc-points{ list-style:none; margin:0; padding:0; }
.doc-points li{ position:relative; padding-left:30px; margin-bottom:12px; line-height:1.7; color:var(--ink); }
.doc-points li::before{
  content:"✓"; position:absolute; left:0; top:.15em;
  width:20px; height:20px; line-height:20px; text-align:center;
  font-size:12px; font-weight:900; color:#fff; background:var(--accent); border-radius:50%;
}
/* 2カラム時はフォームの上余白・中央寄せを解除（セルにフィット） */
.doc-form .apply-card{ margin:0; max-width:none; }

/* 送信完了バナー（#thanks）：通常は非表示、:target になったときだけ表示 */
.result-banner{ display:none; }
.result-banner:target{ display:block; }
.result-banner--ok{ background:var(--accent); color:#fff; }
.result-banner .wrap{ padding:16px 20px; position:relative; font-size:.96rem; }
.result-banner strong{ font-weight:900; margin-right:6px; }
.result-banner .result-close{
  position:absolute; right:16px; top:50%; transform:translateY(-50%);
  color:#fff; font-weight:900; font-size:1.2rem; line-height:1; opacity:.85; padding:4px 8px;
}
.result-banner .result-close:hover{ opacity:1; }

/* ============================================================
   レスポンシブ
   ============================================================ */
@media (max-width: 900px){
  .nav{ display:none; }
  .header-cta{ display:none; }
  .nav-toggle{ display:block; }
  .fv .wrap{ grid-template-columns:1fr; gap:36px; padding-top:44px; }
  .fv-visual{ max-width:520px; margin-inline:auto; width:100%; }
  .worry-grid{ grid-template-columns:1fr; gap:18px; max-width:460px; margin-inline:auto; }
  .section{ padding:60px 0; }
  .feature-row{ grid-template-columns:1fr !important; gap:26px; }
  /* スマホ：全ブロックを「タイトル＋テキスト → 画像」の順に統一。
     copy=order:1 / visual=order:2。reverse も明示指定して PC用の order:-1 を打ち消す
     （reverse セレクタは同詳細度＝後勝ちで上書き）。テキスト上・画像下にすべて揃う */
  .feature-row .feature-copy{ order:1; }
  .feature-row .feature-visual,
  .feature-row.reverse .feature-visual{ order:2; }
  .flow-diagram{ flex-direction:column; align-items:center; }
  .flow-arrow{ transform:rotate(90deg); }
  /* 枝分かれ：モバイルは中央の縦線＋下向き矢印に簡略化（4分岐 comb は解除）。流れの順序は維持 */
  .flow-branch{ height:30px; margin-top:4px; }
  .b-bar, .b-drop{ display:none; }
  .b-stem{ height:22px; }
  .b-stem::after{ content:""; position:absolute; left:50%; bottom:-7px; transform:translateX(-50%);
                  width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent; border-top:7px solid var(--accent); }
  .flow-fan{ grid-template-columns:repeat(2,1fr); }
  /* 集約コネクタ：モバイルは中央の縦線＋下向き矢印に簡略化（結論バンドへ繋ぐ） */
  .flow-merge{ height:30px; }
  .m-drop, .m-bar{ display:none; }
  .m-stem{ top:0; height:22px; }
  .split{ grid-template-columns:1fr; }
  /* 資料DLページ：スマホは サムネ → 説明 → わかること → フォーム の縦並び。表紙は大きすぎないよう上限＆中央寄せ */
  .doc-layout{ grid-template-columns:1fr; gap:28px; }
  .doc-cover{ max-width:460px; margin-left:auto; margin-right:auto; }
  .problem-grid, .func-grid, .sec-pillars, .stat-grid, .flow-steps{ grid-template-columns:repeat(2,1fr); }
  .case-card{ grid-template-columns:1fr; }
  .footer .top{ grid-template-columns:1fr 1fr; }
  /* Before/After：900px以下は 1ペア＝1カードで縦積み（課題↑→解決↓） */
  .ba-flow-head{ display:none; }
  .ba-pair{ grid-template-columns:1fr; gap:0; padding:0; border-top:none; margin-bottom:16px;
            border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
  .ba-pair:last-child{ margin-bottom:0; }
  .ba-cell{ border-radius:0; border:none; box-shadow:none; position:relative; padding-top:36px; }
  .ba-cell.before{ background:#F2F4F6; }
  .ba-cell::before{ position:absolute; top:12px; left:20px; font-size:.72rem; font-weight:900;
                    letter-spacing:.04em; line-height:1; }
  .ba-cell.before::before{ content:"導入前"; color:var(--mut); }
  .ba-cell.after::before{ content:"導入後"; color:var(--accent-dark); }
  .ba-arrow{ width:100%; padding:2px 0; }
  .ba-arrow svg{ transform:rotate(90deg); }
}
@media (max-width: 600px){
  .problem-grid, .func-grid, .sec-pillars, .stat-grid, .flow-steps{ grid-template-columns:1fr; }
  /* スマホ：4成果物を縦積み＋中央寄せ。上のステップカードと同じ横幅・中心線に揃える */
  .flow-fan{ grid-template-columns:1fr; max-width:300px; margin-inline:auto; }
  .flow-step{ width:300px; max-width:100%; }  /* ステップ幅も成果物カードに合わせて中心線を一致 */
  .footer .top{ grid-template-columns:1fr; }
  .form-grid{ grid-template-columns:1fr; }
  .apply-card{ padding:26px 20px; }
  .form-submit .btn{ min-width:0; width:100%; }
  /* FV演出：スマホでは背景波形をさらに薄く（静的・テキスト可読性優先） */
  .fv-deco{ opacity:.04; }
}
@media (max-width: 520px){
  .topbar{ font-size:.78rem; gap:8px; }
  .logo-img{ height:36px; }  /* スマホはナビ/CTAを圧迫しないよう少し控えめに */
  .fv .cta-row{ flex-direction:column; align-items:stretch; }
  .fv .cta-row .btn{ width:100%; }
  .fv-person{ width:46%; bottom:-18px; }
  /* FV演出：録音インジケーターを少しコンパクトに（振幅・幅は維持して主張は残す） */
  .rec-indicator{ height:34px; margin:2px 0 22px; gap:13px; }
  .rec-indicator .eq{ height:34px; gap:3px; }
  .rec-indicator .eq span{ width:3px; }
  /* フロー結論バンド：狭幅はチェックを上に積んで中央寄せ */
  .flow-goal{ flex-direction:column; gap:12px; padding:22px 20px; }
  .cta-band .cta-row .btn, .closing .cta-row .btn{ width:100%; }
  /* Before/After：狭幅でセル内を少し詰める */
  .ba-cell{ padding:34px 16px 16px; gap:12px; font-size:.9rem; }
  .ba-cell::before{ left:16px; }
  .ba-ic{ flex-basis:38px; width:38px; height:38px; padding:8px; }
  /* マーキー：狭幅でチップと余白を少し詰める */
  .tool-pill{ padding:10px 16px; margin-right:12px; gap:8px; }
  .tool-pill svg{ width:18px; height:18px; }
  .tool-pill span{ font-size:.85rem; }
}

/* ============================================================
   FV：タブレット帯（601–900px）だけ 2カラム（案A-1）
   ------------------------------------------------------------
   ・〜600px（521–600含む）：上の @media(max-width:900px) で 1fr のまま＝縦並び維持
   ・601–900px：ここで 2カラムに「上書き」（このブロックは max-width:900px より後ろに置く）
   ・901px以上：.fv .wrap のベース（1fr 1.18fr）が効くので未変更
   想定の見え方：
     520px → 縦並び（見出し→波形→サブ→画像）／既存どおり
     601px → 2カラム。画像はカラム幅いっぱい（≒280px前後）。潰れず縦横比維持
     768px → 2カラム。画像 ≒ 340px 前後で見やすい
     900px → 2カラム。画像は上限 max-width:420px で頭打ち（過大化を防止）
   ============================================================ */
@media (min-width: 601px) and (max-width: 900px){
  /* 左：見出し＋サブコピー（＋イコライザー波形は .fv-copy 内）／右：製品画像。
     CTA・バッジは引き続き grid-column:1/-1 で全幅（下段） */
  .fv .wrap{ grid-template-columns: 1fr 1fr; gap: 24px 32px; align-items: center; }

  /* 画像：PCの右ブリードを解除し、その幅で取れる最大幅で表示。
     上限 420px で過小・過大を防ぎ、縦横比は <img> の width/height 属性で維持（潰さない） */
  .fv-visual{ width:100%; max-width:420px; margin:0; justify-self:center; align-self:center; }

  /* 背景の音声波形：右カラムの画像と重ならないようマスクを「左=表示／右=透明」に。
     ＝波形は左（テキスト側）にごく薄く残り、右の画像エリアからは消える（競合回避） */
  .fv-deco{ opacity:.04;
    -webkit-mask-image:linear-gradient(90deg, #000 0, #000 35%, transparent 78%);
            mask-image:linear-gradient(90deg, #000 0, #000 35%, transparent 78%); }
}