@charset "UTF-8";
/* ============================================================
   LP① 商材LP（オーダーメイド物流）
   第2色：ディープネイビー ＝「信頼・構造・堅実」
   ------------------------------------------------------------
   コントラスト実測
     #1B3D5F on #FFFFFF ... 11.17:1（AAA）
     #FFFFFF on #1B3D5F ... 11.17:1（AAA）
     #1B3D5F on #EEF3F8 ...  9.98:1（AAA）
   ============================================================ */

:root{
  --a2:#1B3D5F;        /* 見出しアクセント・アイコン地・表ヘッダ */
  --a2-deep:#122A43;   /* フッター地・反転セクション */
  --a2-soft:#3C6E9F;   /* 図版の中間トーン */
  --a2-pale:#EEF3F8;   /* 淡背景 */
  --a2-line:#C9D8E6;
  --container:1120px;
  --hero-bg:url("../lp1-hero-1200.jpg");   /* ヒーロー左右のぼかし背景 */
}

/* ============================================================
   FV：LP①はSP版（縦位置 941×1672）を持つので、〜767px で比率を切り替える
   ※ .hero / .herocta の本体・高さ上限は base.css 側で共通定義
   ============================================================ */
/* 縦向きのスマホだけ縦位置画像に切り替える。
   横向きスマホ（例 844×390）で縦位置を使うと画面から大きくはみ出すため。 */
@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("../lp1-hero-sp-720.jpg");}
}

/* ============================================================
   課題 → 解決 の対応図
   ============================================================ */
.pslist{display:grid;gap:14px;}
.psrow{
  display:grid;grid-template-columns:1fr 48px 1fr;align-items:stretch;gap:0;
}
.psrow__p,.psrow__s{
  padding:18px 20px;font-size:var(--fs-small);line-height:1.8;
  border:1px solid var(--line);
}
.psrow__p{
  background:var(--paper);border-radius:var(--r-md) 0 0 var(--r-md);border-right:none;color:var(--sub);
}
.psrow__p b{display:block;color:var(--ink);font-size:15px;margin-bottom:4px;}
.psrow__arrow{
  display:grid;place-items:center;background:var(--bg);border-block:1px solid var(--line);
}
.psrow__arrow svg{width:20px;height:20px;}
.psrow__s{
  background:var(--a2-pale);border-radius:0 var(--r-md) var(--r-md) 0;border-left:none;
  border-color:var(--a2-line);color:var(--ink);
}
.psrow__s b{display:block;color:var(--a2);font-size:15px;margin-bottom:4px;}

/* ============================================================
   コスト事例カード
   ============================================================ */
/* 1120px幅を1枚で使うと1行76字になって間延びするため2列に */
.cases{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:22px;align-items:start;}
.case{
  position:relative;background:var(--paper);border:1px solid var(--line);
  border-left:5px solid var(--brand);border-radius:0 var(--r-md) var(--r-md) 0;
  padding:22px 24px;
}
.case__label{
  display:inline-block;font-family:var(--font-en);font-size:11px;font-weight:700;
  letter-spacing:.14em;color:var(--brand-text);margin-bottom:8px;
}
.case__title{font-size:16.5px;font-weight:700;color:var(--ink);line-height:1.6;margin-bottom:8px;}
.case__text{font-size:var(--fs-small);color:var(--copy);line-height:1.85;}
.case__tbd{
  display:inline-block;margin-top:10px;font-size:11.5px;font-weight:700;color:#8A6100;
  background:#FFF7E0;border:1px dashed #E4C777;border-radius:var(--r-sm);padding:5px 10px;
}

/* ============================================================
   得意領域チップ（アイコン付き）
   ============================================================ */
/* v5：「白い角丸カード＋中央アイコン＋中央寄せの短文」を5つ並べる組み方は、
   テンプレートで最も見かける形のひとつだった。カードを外し、
   上に細い罫を引いて左揃えにする。仕様書の項目のように読める。
   文字も13px→14pxに上げて視認性を確保した。 */
.fieldgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:0;
  border-block:1px solid var(--line);}
.fielditem{
  padding:20px 20px 20px 0;position:relative;
  border-left:1px solid var(--line);padding-left:20px;
  transition:background var(--dur) var(--ease);
}
.fieldgrid > .fielditem:first-child{border-left:none;padding-left:0;}
.fielditem::before{
  content:"";position:absolute;left:0;top:-1px;width:100%;height:3px;background:transparent;
  transition:background var(--dur) var(--ease);
}
.fielditem:hover::before{background:var(--a2);}
.fielditem svg{width:26px;height:26px;margin:0 0 12px;}
.fielditem span{display:block;font-size:14px;font-weight:700;color:var(--ink);line-height:1.65;}

/* ============================================================
   CVセクション
   ============================================================ */
.cv{
  background:
    radial-gradient(760px 420px at 12% 0%,rgba(27,61,95,.08),transparent 62%),
    linear-gradient(180deg,#FFFBF7,#FFFFFF 70%);
}
.cv__in{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(28px,3.6vw,56px);align-items:start;}
.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;}
.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:900px){
  .fieldgrid{grid-template-columns:repeat(3,1fr);}
  .fieldgrid > .fielditem:nth-child(3n+1){border-left:none;padding-left:0;}
  .fieldgrid > .fielditem:nth-child(n+4){border-top:1px solid var(--line);}
  .cases{grid-template-columns:1fr;}
}
@media (max-width:860px){
  .cv__in{grid-template-columns:1fr;}
}
@media (max-width:620px){
  .psrow{grid-template-columns:1fr;}
  .psrow__p{border-radius:var(--r-md) var(--r-md) 0 0;border-right:1px solid var(--line);border-bottom:none;}
  .psrow__arrow{border:1px solid var(--line);border-block:none;padding:6px 0;}
  .psrow__arrow svg{transform:rotate(90deg);}
  .psrow__s{border-radius:0 0 var(--r-md) var(--r-md);border-left:1px solid var(--a2-line);border-top:none;}
  .fieldgrid{grid-template-columns:repeat(2,1fr);}
  .fieldgrid > .fielditem:nth-child(odd){border-left:none;padding-left:0;}
  .fieldgrid > .fielditem:nth-child(even){padding-left:20px;border-left:1px solid var(--line);}
  .fieldgrid > .fielditem:nth-child(n+3){border-top:1px solid var(--line);}
}

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

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