@charset "UTF-8";
/* ============================================================
   LP② 専門倉庫LP（広告CV特化・縦長1カラム）
   第2色：ディープネイビー ＝「信頼・許認可・堅実」
   ------------------------------------------------------------
   2026/07/25：メインビジュアルがネイビー基調（実測 #001B43）で届いたため、
   ティール #0C6E77 から画像に合わせて変更（BEN判断）。
   色相は画像と同じ H216°。LP①の #1B3D5F より青く深くして描き分ける。

   コントラスト実測
     #0A3573 on #FFFFFF ... 11.87:1（AAA）
     #FFFFFF on #0A3573 ... 11.87:1（AAA）
     #FFFFFF on #001B43 ... 16.97:1（AAA／フッター地。画像の色そのまま）
   ============================================================ */

:root{
  --a2:#0A3573;        /* 見出しアクセント・アイコン地・許可バッジ */
  --a2-deep:#001B43;   /* フッター地・反転セクション。メインビジュアル実測値 */
  --a2-soft:#4A79C4;   /* 図版の中間トーン */
  --a2-pale:#EAF0FA;   /* 淡背景 */
  --a2-line:#C2D4EC;
  --container:1120px;         /* 2026/07/25：LP①と同じ幅に統一（旧680px） */
  --hero-bg:url("../lp2-hero-1200.jpg");   /* ヒーロー左右のぼかし背景 */

  /* ============================================================
     2026/07/26：メインビジュアルへの寄せ（BEN判断・中案）
     ------------------------------------------------------------
     ヒーロー画像の実測色を数えたところ、オレンジは1pxも含まれていない。
       白に近い面 #F8F9FB（最頻）／ネイビーの塊 #001B43／
       「許可を自社保有」プレートの真鍮の細罫 #DBC397〜#E8D5B4
     一方で下層はCTA・追従帯・数値がオレンジで、FVと下層が別の世界に見えていた。

     方針：面は白基調のまま（ヒーローと同じ考え方）、構造をネイビーに寄せる。
       ・ニュートラルの灰を、色相をネイビーに合わせた寒色系に差し替える
       ・見出しと数値をネイビーに（ヒーローの見出し・数字と同じ扱い）
       ・オレンジは「行動」＝CTAの面と追従帯だけに残す
     ページ全体を暗くはしない。ヒーロー自体が白地にネイビーを塊で置く構成のため。
     ※LP①はオレンジ主役のヒーローなので、この上書きは lp2.css に閉じている。
     ============================================================ */
  --bg:#F1F4FA;             /* 旧 #F4F6F8。灰にネイビーの色相を通す */
  --bg-2:#E6ECF6;           /* 旧 #EDF0F4 */
  --line:#D9E1EE;           /* 旧 #E1E5EA */
  --line-strong:#BCC9DC;    /* 旧 #CBD2DA */
  --ink:#101B2D;            /* 旧 #1C2530。白地 17.26:1 */
  --copy:#334054;           /* 旧 #3A4553。白地 10.49:1 */
  --sub:#55637A;            /* 旧 #5A6472。白地 6.08:1／濃地 5.13:1 */

  /* 許認可の「格式」を示す真鍮。ヒーローのプレートの罫から採取。
     罫とアイコンにのみ使う。文字には使わない（白地 3.10:1 のため）。 */
  --brass:#B08D4F;
  --brass-line:#D8C49A;
  --brass-pale:#FBF7EF;
}

/* ============================================================
   FV：2026/08/12にSP版（縦位置 941×1672）を受領（コピー差し替え版）。〜767px の縦向きで比率を切り替える。
   ※ .hero / .herocta の本体・高さ上限は base.css 側で共通定義
   ============================================================ */
@media (max-width:767px) and (orientation:portrait){
  :root{--hero-ar:0.5628;}              /* 縦位置 941/1672 */
  .hero__img img{aspect-ratio:941/1672;}
  .hero__img{--hero-bg:url("../lp2-hero-sp-720.jpg");}
}

/* 2026/07/25：LP①と同じ横幅・同じ組み方に統一。
   グレー地に白いシートを浮かせる縦長1カラムのレイアウトは廃止した。 */
.sheet{padding-bottom:88px;}   /* 追従CTA分の逃げだけ残す */

/* ============================================================
   ネイビー寄せ（2026/07/26）
   ============================================================ */
/* 見出しはヒーローと同じくネイビー。反転セクション（白文字）は除外する。 */
h2,.h2,h3,.h3{color:var(--a2);}
.section--ink h2,.section--ink .h2,.section--ink h3,.section--ink .h3,
.ctaband h2,.ctaband .ctaband__title,.hero h1,.footer h3{color:#fff;}

/* eyebrowの短い罫はオレンジ→ネイビー。
   ヒーローにオレンジが無いため、FVから下層への接続を優先した。 */
.eyebrow::before{background:var(--a2);}

/* 大きな数値もネイビーへ。ヒーローの「創業20年・取引400社超」と同じ扱い。
   オレンジはCTAの面と追従帯だけに残す。 */
.stat-num,.stat .stat-num{color:var(--a2);}
.stat--fill{background:var(--a2);}
.stat--fill .stat-num{color:#fff;}

/* 箇条書き・チェックもネイビー系で統一（base.css で既にa2だが、明示しておく） */
.list li::after{background:var(--a2);}

/* ------------------------------------------------------------
   真鍮の細罫：許認可まわりだけに使う
   ヒーローの「許可を自社保有」プレートと同じ記号を下層でも繰り返す。
   広げると安っぽくなるため、下の3か所に限定する。
   ------------------------------------------------------------ */
.licence{border-color:var(--brass-line);background:var(--brass-pale);}
.licence__seal{border-color:var(--brass);background:var(--paper);}
.cat--hero{border-color:var(--brass-line);background:var(--brass-pale);}
.cat--hero .cat__icon{background:var(--paper);border:1px solid var(--brass-line);}
.trustrow span:nth-child(2)::before{
  content:"";width:14px;height:2px;background:var(--brass);flex:none;margin-right:2px;
}

/* 行長の制御は base.css の --measure（文字数基準）に集約したため、
   px固定の上書きは 2026/07/25 に撤去した。 */

/* 2026/07/27：長尺LPで現在地と全体像が掴めないため、ヘッダーにページ内アンカーを設置。
   外部リンクは置かず（離脱経路を作らない方針は維持）、遷移先はすべて同一ページ内。
   860px以下はドロワー（base.css の共通実装）に切り替わる。 */
.header__cta{display:inline-flex;}
/* ヘッダー高さ60pxに合わせてロゴを一段小さく */
.header .brand__logo{width:84px;height:38px;}

/* ============================================================
   FV
   ============================================================ */
.fv{
  position:relative;overflow:hidden;text-align:center;
  background:
    radial-gradient(560px 320px at 50% -12%,rgba(10,53,115,.13),transparent 66%),
    linear-gradient(180deg,#F4F7FD 0%,#FFFFFF 68%);
  padding-block:clamp(34px,5vw,56px) clamp(34px,5vw,52px);
}
.fv h1{margin-bottom:16px;}
.fv h1 .accent{color:var(--a2);}
.fv h1 .accent-o{color:var(--brand-text);}
.fv .lead{margin-bottom:20px;}
.fv .badges{justify-content:center;margin-block:20px;}
.fv .btn{margin-top:4px;}

/* 許可証バッジ（FVの信頼シグナル） */
.licence{
  display:flex;align-items:center;gap:14px;text-align:left;
  background:var(--paper);border:1.5px solid var(--a2-line);border-radius:var(--r-lg);
  padding:16px 18px;margin-bottom:20px;
}
.licence__seal{
  width:52px;height:52px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:var(--a2-pale);border:2px solid var(--a2);
}
.licence__seal svg{width:26px;height:26px;}
.licence__txt b{display:block;font-size:15px;font-weight:700;color:var(--a2);line-height:1.5;}
.licence__txt span{font-size:13px;color:var(--sub);line-height:1.6;}

/* ============================================================
   共感（引用ブロック）
   ============================================================ */
/* 1120px幅で1枚ずつ積むと1行80字になるため3列に */
.voices{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:start;}
/* v5：グレーの角丸ボックスに大きな引用符を浮かせる形はテンプレの定番。
   面をやめて左の縦罫だけで引用を示す。声そのものが前に出る。 */
.voice{
  position:relative;padding:4px 0 4px 20px;
  border-left:3px solid var(--a2-line);
  font-size:var(--fs-small);color:var(--copy);line-height:1.85;
}
.voice cite{display:block;margin-top:10px;font-size:12.5px;color:var(--sub);font-style:normal;}

/* ============================================================
   カテゴリ（取扱商材）
   ============================================================ */
.catgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.cat{
  display:flex;gap:14px;align-items:flex-start;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:18px;
}
.cat__icon{width:34px;height:34px;flex:none;border-radius:var(--r-sm);background:var(--a2-pale);display:grid;place-items:center;}
.cat__icon svg{width:20px;height:20px;}
.cat b{display:block;font-size:14.5px;color:var(--ink);line-height:1.5;margin-bottom:3px;}
.cat span{font-size:13px;color:var(--sub);line-height:1.7;}
.cat--hero{grid-column:1/-1;border-color:var(--a2-line);background:var(--a2-pale);align-items:center;}
.cat--hero .cat__icon{background:var(--paper);}

/* 理由カード・ステップは LP① と同じ横並び（base.css の既定）を使う。
   旧・縦長1カラム用の縦積み上書きは 2026/07/25 に撤去した。 */

/* ============================================================
   市場データ
   ============================================================ */
.datarow{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.datacard{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:18px 14px;text-align:center;
}
.datacard svg{width:100%;height:74px;margin-bottom:10px;}
.datacard b{display:block;font-family:var(--font-en);font-size:22px;font-weight:700;color:var(--a2);line-height:1.2;}
.datacard span{display:block;font-size:13px;color:var(--sub);line-height:1.6;margin-top:5px;}
.datacard b span{display:inline;margin-left:2px;} /* 単位（円/%）は数字の右に添える */

/* ============================================================
   CVセクション
   ============================================================ */
.cv{background:linear-gradient(180deg,#F4F7FD,#FFFFFF 62%);}

/* 2026/07/25：コンテナを1120pxに広げた際、フォームが1カラムのまま横に伸びて
   入力欄1本が1000px超になっていた（＝間延び）。LP①と同じ2カラムに組み直し、
   左に判断材料、右に入力欄を置く。入力欄の実幅は約520pxに収まる。 */
.cv__in{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(28px,3.6vw,56px);align-items:start;}
.cv__lead h2{margin-bottom:14px;}
.cv__points{display:grid;gap:12px;margin:22px 0;}
.cv__point{
  display:flex;gap:12px;align-items:flex-start;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r-md);padding:14px 16px;
}
.cv__point svg{width:22px;height:22px;flex:none;margin-top:2px;}
.cv__point b{display:block;font-size:14.5px;color:var(--ink);margin-bottom:2px;line-height:1.5;}
.cv__point span{font-size:13px;color:var(--sub);line-height:1.7;}
.cv__tel{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;
  padding:16px 20px;background:var(--a2-pale);border:1px solid var(--a2-line);border-radius:var(--r-md);
}
.cv__tel b{font-family:var(--font-en);font-size:27px;font-weight:700;color:var(--a2);letter-spacing:.01em;}
.cv__tel span{font-size:12.5px;color:var(--sub);}

@media (max-width:860px){
  .cv__in{grid-template-columns:1fr;}
}

/* ============================================================
   追従CTA（2026/07/26）
   ------------------------------------------------------------
   帯の地をオレンジからネイビーへ。ページ内でいちばん面積の大きい
   オレンジがこの帯で、ネイビー寄せした地の上では浮いていた。
   ボタンはオレンジのまま残す。
     ・帯ごとネイビーにすると（＝CTAも面もネイビー）、暗い写真に重なる
       中間CTA帯でボタンが背景に沈み、押せるものに見えなくなる
     ・帯だけネイビーにすればオレンジの面積は大きく減り、
       「行動できる場所は1点だけ」という関係がむしろ明確になる
   地は #001B43＝メインビジュアル下部のバッジ帯と同じ色。白文字 16.97:1。
   ============================================================ */
.stickycta{
  background:var(--a2-deep);
  border-top:1px solid rgba(255,255,255,.16);
  box-shadow:0 -6px 22px rgba(0,12,34,.22);
}
.stickycta__txt{text-shadow:none;}
.stickycta .btn--primary{
  background:var(--brand-cta);color:#fff;
  box-shadow:0 4px 14px rgba(0,8,24,.40);
  text-shadow:0 1px 1px rgba(120,40,0,.32);
}
.stickycta .btn--primary:hover{background:var(--brand-cta-hover);color:#fff;}
.stickycta .btn--primary .btn__arrow{color:#fff;background:none;}

/* 追従CTAは data-always＋JS で常時表示（フォーム到達時のみ引っ込む） */

/* 狭い画面ではロゴがブランドを担うので社名テキストは省略（横はみ出し防止）。
   リンクの読み上げ名は a[aria-label] で担保している。 */
@media (max-width:480px){
  .header .brand__name{display:none;}
  .header__cta{padding-inline:16px;font-size:13px;}
}

@media (max-width:900px){
  .catgrid{grid-template-columns:repeat(2,1fr);}
  .voices{grid-template-columns:1fr;}
}
@media (max-width:600px){
  .catgrid{grid-template-columns:1fr;}
  .datarow{grid-template-columns:1fr;}
  /* 2026/08/12：キャプションspanが自動配置で2行目の84px列（アイコン下）に落ち、
     数行おきに折り返す崩れがあった（BEN指摘）。アイコンを2行ぶち抜きにし、
     キャプションを右列（数字の下）へ明示配置する。 */
  .datacard{display:grid;grid-template-columns:84px 1fr;align-items:center;gap:2px 14px;text-align:left;}
  .datacard svg{margin-bottom:0;height:60px;grid-row:1/3;}
  .datacard > span{grid-column:2;margin-top:0;}
}

/* ============================================================
   中間CTA帯の背景写真
   ------------------------------------------------------------
   ※カスタムプロパティ内の相対URLは「使用元のCSSファイル」を基準に
     解決されるため、HTML側のインラインstyleではなくここで宣言する。
     （このファイルは assets/css/ にあるので ../ で assets/ を指す）
   ============================================================ */
/* まずJPEGで確実に出す。image-set() は未対応ブラウザだと宣言ごと無効になり、
   背景写真が「一枚も出ない」状態になるため、素の url() を先に置いておく。 */
.ctaband--a{--band-bg:url("../lp2-cta-a.jpg");}
.ctaband--b{--band-bg:url("../lp2-cta-b.jpg");}

@supports (background-image:image-set(url("../lp2-cta-a.webp") type("image/webp"))){
  .ctaband--a{--band-bg:image-set(url("../lp2-cta-a.webp") type("image/webp"),url("../lp2-cta-a.jpg") type("image/jpeg"));}
  .ctaband--b{--band-bg:image-set(url("../lp2-cta-b.webp") type("image/webp"),url("../lp2-cta-b.jpg") type("image/jpeg"));}
}