/* =========================================================
 *  E redesign — 法人向けに脱テンプレ化（装飾のみ上書き）
 *  読み込み順: reset → style → theme-b → e-redesign（最後）
 *  変更しないもの: 文章 / 画像 / 掲載内容 / 料金・数値 / CTA文言 / セクション順 / 機能
 *  方針: カードを使う場所を限定・角丸控えめ・影を削減・淡色連続を排除・
 *        余白と罫線と番号タイポで階層を表現・セクションごとに見せ方を変える
 * ========================================================= */

/* ---- トークン: 角丸を控えめに / 背景をニュートラルに / 罫線色を用意 ---- */
:root {
  --radius: 8px;            /* 16px → 8px（大きな角丸をやめる） */
  --c-bg-soft: #F6F7F9;     /* 淡いブルー #F4F8FE → ごく薄いニュートラルグレー */
  --c-border: #E4E7EC;      /* 情報の区切りに使う薄いグレー罫線 */
}

/* 画像・角丸の統一（8px。ボタンpill・円バッジ・アバターは対象外） */
.fv-photo { border-radius: 8px; }

/* =========================================================
 *  影の総量を削減
 *  影を残すのは「視線を集めたい要素」だけ: FVメインビジュアル / FV限定オファー /
 *  料金の重要行 / CTAボタン / scarcity。いずれも黒く目立たせず薄く自然に。
 * ========================================================= */
.fv-dash        { box-shadow: 0 8px 24px rgba(15, 23, 42, 0.10); }
.fv-offer       { box-shadow: 0 8px 24px rgba(15, 23, 42, 0.10); border-radius: 10px; }
.fv-kv-label    { box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12); }
.btn            { box-shadow: 0 6px 16px rgba(37, 99, 235, 0.20); border-radius: 999px; }
.btn:hover      { box-shadow: 0 8px 20px rgba(37, 99, 235, 0.28); }
.scarcity-alert { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18); border-radius: 10px; }

/* =========================================================
 *  1) 選ばれる理由 — カード撤去 → 番号付き縦リスト + 横罫線
 * ========================================================= */
.reasons { display: block; max-width: 46rem; margin-inline: auto; }
.reason {
  background: transparent; border: 0; border-radius: 0; box-shadow: none;
  padding: clamp(1.4rem, 4.5vw, 1.9rem) 0;
  border-bottom: 1px solid var(--c-border);
  display: block;
}
.reason:first-child { padding-top: 0; }
.reason:last-child  { border-bottom: 0; padding-bottom: 0; }
.reason:hover { transform: none; box-shadow: none; }
.reason-icon { display: none; }               /* 装飾アイコンを外し、番号タイポで識別 */
.reason-head { display: flex; align-items: baseline; gap: 0.7rem; margin-bottom: 0.45rem; }
.reason-num {                                  /* 円バッジ → 大きい番号タイポ */
  background: none; width: auto; height: auto; min-width: 1.4em;
  border-radius: 0; padding: 0; box-shadow: none;
  color: var(--c-main); font-weight: 700; line-height: 1;
  font-size: clamp(1.7rem, 7vw, 2.3rem);
  font-feature-settings: "tnum" 1; flex: none;
}

/* =========================================================
 *  2) 導入の流れ — カード撤去 → シンプルな縦ステップ + 番号タイポ + 罫線
 * ========================================================= */
.flow { display: block; max-width: 44rem; margin-inline: auto; }
.flow-step {
  background: transparent; border: 0; border-radius: 0; box-shadow: none;
  display: grid; grid-template-columns: auto 1fr;
  column-gap: clamp(1rem, 4vw, 1.5rem); align-items: start;
  padding: clamp(1.3rem, 4.5vw, 1.8rem) 0;
  border-bottom: 1px solid var(--c-border);
}
.flow-step:first-child { padding-top: 0; }
.flow-step:last-child  { border-bottom: 0; padding-bottom: 0; }
.flow-num {
  background: none; width: auto; height: auto; border-radius: 0; padding: 0; box-shadow: none;
  color: var(--c-main); font-weight: 700; line-height: 1;
  font-size: clamp(1.5rem, 6vw, 2rem); font-feature-settings: "tnum" 1;
}
.flow-body {                                   /* 内側の白カードも撤去 */
  min-width: 0; background: transparent; border: 0; border-radius: 0;
  box-shadow: none; padding: 0;
}

/* =========================================================
 *  3) お客様の声 — カードは残すが引用中心へ。影を外し1px罫線 + 引用符
 * ========================================================= */
.voice {
  box-shadow: none; border: 1px solid var(--c-border); border-radius: 8px;
  position: relative;
}
.voice-quote::before {
  content: "\201C"; display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2.6rem; line-height: 0.7; color: var(--c-main-light);
  margin-bottom: 0.25rem;
}

/* =========================================================
 *  4) 料金 — 比較は最小カードとして残す。囲みQ&Aは左罫線に置き換え
 * ========================================================= */
.price-compare { box-shadow: none; }
.price-row { border-radius: 8px; }
.price-row--new { box-shadow: 0 4px 14px rgba(234, 88, 12, 0.12); }   /* 重要な価格だけ薄い影 */
.qa-card {                                     /* カード撤去 → 左アクセント罫線 */
  background: transparent; border: 0; border-radius: 0; box-shadow: none;
  border-left: 2px solid var(--c-border);
  padding: 0.1rem 0 0.1rem 1rem; margin-bottom: 0.9rem;
}
.qa-badge {
  background: none; color: var(--c-main); width: auto; height: auto;
  border-radius: 0; box-shadow: none; font-size: 0.95rem;
}

/* =========================================================
 *  5) 開発実績 — カードは残す。角丸8px・影は極薄・PCは画像と文を左右に
 * ========================================================= */
.case-card {
  border: 1px solid var(--c-border); border-radius: 8px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06); overflow: hidden;
}
.case-card:hover { transform: none; box-shadow: 0 2px 10px rgba(15, 23, 42, 0.09); }
@media (min-width: 768px) {
  .cases-grid { grid-template-columns: 1fr; max-width: 62rem; margin-inline: auto; gap: clamp(1.4rem, 3vw, 2rem); }
  .case-card { flex-direction: row; align-items: stretch; }
  .case-visual { flex: 0 0 48%; }
  .case-body { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; }
}

/* =========================================================
 *  6) FAQ — 境界線のみのアコーディオン（影を外す）
 * ========================================================= */
.faq-item { box-shadow: none; border: 1px solid var(--c-border); border-radius: 8px; }

/* =========================================================
 *  7) 最終CTA（無料相談フォーム）— 濃色ブランドの独立セクション
 * ========================================================= */
/* 濃紺セクション。見出し・リードは白でナビ上に。フォーム本体は白カードのまま可読性維持 */
#form { background: linear-gradient(168deg, #12213E 0%, #0C1830 100%); }
#form .section-title { color: #fff; }
#form .section-title .accent { color: #FDBA74; }         /* アクセントはオレンジで一点強調 */
#form .eyebrow { color: #93C5FD; }
#form .form-lead { color: rgba(255, 255, 255, 0.86); }
/* フォーム本体（白カード）＝重要CTAなので薄い影を許可。ラベル/入力は既定の濃色のまま */
#form .form { border-radius: 10px; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.24); }

/* =========================================================
 *  レスポンシブ: スマホでは囲み枠をさらに減らす
 *  声カードもSPでは枠を外し、余白と引用符・罫線で区切る
 * ========================================================= */
@media (max-width: 640px) {
  /* 声は1枚表示カルーセルなので、SPでも枠＋ゆったり余白のカードを維持 */
  .voice { padding-left: clamp(1.5rem, 5.5vw, 2rem); padding-right: clamp(1.5rem, 5.5vw, 2rem); }
}

/* =========================================================
 *  追加調整（Eベース）
 *  FV 取引先ロゴ: Cのマーキー(1行ループ)化 + 「〜お取引先〜」+ 薄オレンジ帯
 * ========================================================= */
.fv-visual { min-width: 0; }   /* max-content の track が FV 枠を押し広げるのを防ぐ */

/* FVメインコピー(ヒーロー見出し)だけ太字で強調（価格「10万円」も含める）
   サイズは変えず 800→900 へ。Apple端末でも太いウェイトが出るよう Hiragino Sans を先頭に */
.fv-title, .fv-price-inline, .fv-price-inline small {
  font-weight: 900;
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "游ゴシック", "YuGothic", "Noto Sans JP", sans-serif;
}

/* 村岡の写真の下から始まる全幅の薄オレンジ帯 */
.fv-partners {
  /* 親 .fv-visual の align-items:center を打ち消し、コンテナ幅(=安定・viewport基準)から全幅へ広げる。
     旧方式(width:100vw + left:50% + margin-left:-50vw)は画像ロードで親幅が変動する一瞬に右へズレていた */
  align-self: stretch;
  margin-inline: calc(50% - 50vw);
  margin-top: 0;                        /* 村岡の写真直下から（gapなし） */
  padding: clamp(0.9rem, 3.6vw, 1.4rem) 0 clamp(1.1rem, 4vw, 1.6rem);
  background: #FFF1E4;                 /* 薄いオレンジ */
}
.fv-partners-title {
  text-align: center; color: #C2410C;
  font-size: clamp(0.76rem, 3.1vw, 0.9rem); font-weight: 600;
  letter-spacing: 0.12em; margin-bottom: clamp(0.55rem, 2.4vw, 0.9rem);
}
.fv-logos-marquee {
  width: 100%; overflow: hidden;
  /* マスク(端フェード)は不使用。オレンジ帯だとフェードが「空白」に見えるため、端はクリッとハードカット */
}
.fv-logos-track {
  display: flex; width: max-content;
  animation: fv-logos-scroll 34s linear infinite;   /* Cの26sより一段階ゆっくり */
  will-change: transform;
}
.fv-logos-group {
  display: flex; align-items: center;
  gap: clamp(1.1rem, 4.5vw, 1.8rem); padding-right: clamp(1.1rem, 4.5vw, 1.8rem);
}
.fv-partners .fv-logo-img {            /* B用グリッドサイズを上書き（高さ基準・幅auto） */
  flex: 0 0 auto; height: clamp(2rem, 9vw, 2.6rem); width: auto;
  object-fit: contain; object-position: center;
}
@keyframes fv-logos-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .fv-logos-track { animation: none; }
  .fv-logos-marquee { overflow-x: auto; }
}

/* お客様の声: 余白を広げる + 該当社ロゴを右上に */
.voice { padding: clamp(1.9rem, 6.5vw, 2.6rem) clamp(1.7rem, 5.5vw, 2.3rem); }
.voice-head   { margin-bottom: clamp(0.7rem, 3vw, 1.05rem); }
.voice-result { margin-bottom: clamp(0.5rem, 2.4vw, 0.85rem); }
.voice--logo .voice-head { padding-right: 3.6rem; }
/* カルーセルの .carousel-slide img（width:100%）に勝つよう詳細度を上げる */
.voice img.voice-logo {
  position: absolute; top: clamp(1.5rem, 5.5vw, 2.1rem); right: clamp(1.5rem, 5.5vw, 2.1rem);
  height: clamp(1.5rem, 6vw, 1.9rem); width: auto; max-width: 38%;
  object-fit: contain; display: block; margin: 0;
}

/* =========================================================
 *  Fバージョン: 詳細説明を文節(bunsetsu)単位で自然に改行
 *  budoux が挿入した <wbr>(文節境界) の位置だけで折り返し、文節の途中では割らない。
 *  Safari 含む全ブラウザ対応（word-break:auto-phrase は Safari 未対応のため keep-all + <wbr> 方式）
 * ========================================================= */
.reason-body, .flow-desc, .case-desc, .case-result, .voice-quote,
.price-text, .qa-text, .form-lead, .scarcity-body, .section-lead,
.faq-a-inner p, .fv-offer-body, .price-headline {
  word-break: keep-all;
  overflow-wrap: anywhere;   /* 稀に1文節が幅を超える場合の保険 */
}

/* 導入の流れ: 最後のステップ(03 ご契約)にも 01/02 と同じ縦コネクター線を表示 */
.flow-step:last-child::before { display: block; }

/* =========================================================
 *  Fバージョン: FV下部を「取引先帯(薄オレンジ) → 白ブロック」で直結
 *  帯と白ブロックの間の青い隙間(gridのrow-gap + margin)を消す
 * ========================================================= */
.fv--tate .fv-inner { row-gap: 0; }                          /* 全row-gapを0に */
.fv--tate .fv-copy { margin-bottom: clamp(1.4rem, 5vw, 1.8rem); }  /* コピー→ビジュアルの間隔だけ復元 */
.fv--tate .fv-lower { margin-top: 0; }                       /* 白ブロックの上マージンも消し、帯に密着 */
.fv-partners { padding-bottom: clamp(1.7rem, 6vw, 2.4rem); }  /* ロゴの下にオレンジを伸ばして余白を確保（白ブロックへは gap0 のまま密着） */
.fv--tate { padding-bottom: 0; }                             /* 白ブロックの下の青帯も消し、白セクションへ直結 */