/* ============================================================
   uplift.css — LP表現レイヤー（別案）
   style.css の後に読み込む上書き専用レイヤー。
   テキスト・要素構成・並び順は一切変更していません。
   外せば元の見た目に戻ります。
   ============================================================ */

:root {
  /* 動きの質を1本のイージングで統一する */
  --ease: cubic-bezier(.22, 1, .36, 1);

  /* 角丸のスケール（1種→5種）。入れ子の階層が生まれる */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 26px;
  --r-pill: 999px;

  /* 影の再設計：カードはほぼ無、モックだけ劇的に。これが「箱の羅列」を解く */
  --shadow-card: 0 1px 2px rgba(15, 30, 55, .05);
  --shadow: 0 1px 2px rgba(15, 30, 55, .05);
  --sh-mock: 0 40px 80px -34px rgba(15, 30, 55, .34), 0 16px 34px -22px rgba(15, 30, 55, .22);

  /* セクション間の余白を画面幅に追従させる */
  --gap: clamp(56px, 7vw, 96px);
}

/* ── 和文タイポグラフィの基礎（最も効く。paltで詰まり、字送りで締まる） ── */
body {
  font-feature-settings: "palt" 1;
  letter-spacing: .004em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* 見出しは詰めて、改行位置を均衡させる */
h1, h2, h3 {
  text-wrap: balance;
}
h1 {
  font-size: clamp(32px, 4.4vw, 58px);
  letter-spacing: -.042em;
  line-height: 1.13;
}
h2 {
  font-size: clamp(27px, 3vw, 42px);
  letter-spacing: -.03em;
  line-height: 1.28;
}
.scenario-title { letter-spacing: -.02em; }

/* ── ウェイトの整理：900は数字と主見出しだけの特権にする ── */
.btn, .label, .trust b, .num, .send, .push-tag, .check::before,
.benefit .tag, .channel-example-label, .price-title, .starter-step,
.data-item b, .route b, .fit-card b, .footer-company {
  font-weight: 700;
}
h1, h2 { font-weight: 800; }
.evidence-card strong, .price-line strong { font-weight: 800; }

/* 数字は等幅字形＋詰めで「データ」に見せる */
.evidence-card strong, .price-line strong, .num {
  font-variant-numeric: tabular-nums;
  letter-spacing: -.035em;
}

/* ── セクションのリズム：地を交互に変えて反復感を断つ ── */
.section { padding: var(--gap) 0; }
.section:nth-of-type(even):not(.dark-section) { background: var(--soft); }
.section:nth-of-type(odd):not(.dark-section)  { background: #fff; }
.push-examples-section     { background: var(--soft); }

/* 濃色セクションは全幅ベタ塗りをやめ、丸角パネルとして浮かせる */
.section.dark-section {
  border-radius: var(--r-xl);
  width: min(1240px, calc(100% - 40px));
  margin: 0 auto;
  background: linear-gradient(135deg, #0b1f39 0%, #102949 100%);
  border: 1px solid rgba(255, 255, 255, .06);
}
.cta {
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  background: linear-gradient(135deg, #0b1f39 0%, #17325a 100%);
}

/* ── ヒーロー：単色の地をメッシュグラデーションに ── */
.hero {
  background:
    radial-gradient(52% 58% at 6% 18%, rgba(0, 91, 172, .11), transparent 60%),
    radial-gradient(42% 52% at 26% 102%, rgba(179, 83, 9, .07), transparent 58%),
    radial-gradient(38% 48% at 98% 8%, rgba(0, 91, 172, .07), transparent 62%),
    linear-gradient(180deg, #f7f8fa 0%, #fff 62%);
}

/* eyebrow を「バッジ」から編集的なラベルへ */
.eyebrow {
  background: transparent;
  padding: 0 0 11px;
  border-radius: 0;
  position: relative;
  color: var(--muted);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .16em;
}
.eyebrow::before { display: none; }
.eyebrow::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 28px; height: 2px;
  background: var(--cta);
}

/* セクションラベルにも同じ短い罫を与え、シリーズとして揃える */
.label {
  position: relative;
  padding-bottom: 12px;
  letter-spacing: .2em;
}
.label::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 24px; height: 2px;
  background: var(--cta);
}

/* ── 端末モック：影を劇的にして「実物」に見せる ── */
.hero-phone-real {
  box-shadow: var(--sh-mock), inset 0 0 0 1px rgba(255, 255, 255, .16);
}
.hero-phone-image, .push-phone-img {
  filter: drop-shadow(0 34px 60px rgba(15, 30, 55, .26));
}
.screen-card {
  border-radius: var(--r-lg);
  border-color: rgba(15, 30, 55, .1);
  box-shadow: 0 30px 64px -30px rgba(15, 30, 55, .3);
}

/* 写真は角丸を大きくして「板」感を抜く */
.photo-frame, .scenario-photo, .customer-scene .photo-frame {
  border-radius: var(--r-lg);
  overflow: hidden;
}

/* ── カード：枠線主体・影ほぼ無。ホバーで持ち上げる ── */
.trust, .push-card, .evidence-card, .card, .benefit,
.channel-card, .price-card, .fit-card, .starter-step, .data-item {
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
  transition: transform .35s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.trust:hover, .push-card:hover, .card:hover, .benefit:hover,
.channel-card:hover, .fit-card:hover {
  transform: translateY(-4px);
  border-color: rgba(15, 30, 55, .22);
  box-shadow: 0 18px 36px -20px rgba(15, 30, 55, .18);
}
.channel-example { border-radius: var(--r-sm); }
.channel-example-label, .push-tag, .send, .benefit .tag { border-radius: var(--r-pill); }

/* ── 統計：4枚等価をやめ、1枚を主役に立てる ── */
.evidence-card { background: #fff; }
.evidence-card strong {
  font-size: clamp(40px, 4.4vw, 54px);
  line-height: 1;
}
.evidence-card.positive {
  background: var(--navy);
  border-color: var(--navy);
}
.evidence-card.positive strong { color: #fff; font-size: clamp(46px, 5.2vw, 62px); }
.evidence-card.positive p { color: rgba(255, 255, 255, .92); }
.evidence-card.positive span { color: rgba(255, 255, 255, .58); }
.evidence-card.positive span a { color: rgba(255, 255, 255, .72) !important; }

/* 数字の下に伸びるバー（要素追加なし・擬似要素のみ） */
.evidence-card { position: relative; overflow: hidden; }
.evidence-card::after {
  content: "";
  position: absolute;
  left: 22px; bottom: 0;
  width: 0; height: 3px;
  background: var(--cta);
  border-radius: var(--r-pill);
  transition: width 1.1s var(--ease) .15s;
}
.evidence-card.on::after { width: calc(100% - 44px); }

/* 番号バッジは丸に。連番の「歩み」を感じさせる */
.num { border-radius: 50%; }

/* routeアイコンは枠を外し、図だけを置く（より編集的に） */
.route-icon {
  background: transparent;
  border: 0;
  width: 44px; height: 44px;
  justify-items: start;
}

/* ── 料金カード：CVに最も近い要素なので視覚的優先度を上げる ── */
.price-card {
  border-radius: var(--r-lg);
  box-shadow: 0 28px 60px -32px rgba(15, 30, 55, .26);
  border-color: rgba(15, 30, 55, .14);
}
.price-line strong { letter-spacing: -.03em; }

/* ── スクロール連動の出現（段差付き） ── */
.rv {
  transition: opacity .75s var(--ease), transform .75s var(--ease);
}
/* 隠すのは JS が動いている時だけ。
   WordPress等で script が除去されても本文が消えないようにする安全策。 */
.js-rv .rv {
  opacity: 0;
  transform: translateY(20px);
}
.js-rv .rv.on { opacity: 1; transform: none; }
.stg > *:nth-child(2) { transition-delay: .07s; }
.stg > *:nth-child(3) { transition-delay: .14s; }
.stg > *:nth-child(4) { transition-delay: .21s; }

/* ── フッター：本文と地を分けて締める ── */
.site-footer { background: var(--soft); border-top: 1px solid var(--line); }

/* ── 動きを望まない環境では全て無効化 ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .001ms !important;
    animation-duration: .001ms !important;
  }
  .js-rv .rv { opacity: 1; transform: none; }
  .evidence-card::after { width: calc(100% - 44px); }
}

/* ── SP調整 ── */
@media (max-width: 680px) {
  .dark-section { width: 100%; border-radius: 0; }
  .cta { border-radius: var(--r-lg) var(--r-lg) 0 0; }
  .evidence-card strong { font-size: 38px; }
  .evidence-card.positive strong { font-size: 42px; }
}


/* ============================================================
   感情に訴えるための処置
   写真を主役にし、痛点の一文で暗転させて情緒の起伏をつくる。
   （文言・要素は追加していません）
   ============================================================ */

/* ── 写真から冷たさと退色を取り除き、温度を戻す ──
   元は saturate(.9) + hue-rotate(-4deg) で青寄りに退色していた */
.story-photo img,
.scenario-photo img,
.customer-scene img,
.photo-frame img {
  filter: saturate(1.08) contrast(1.06) brightness(1.01);
}

/* ── 痛点の一文を「暗転」させ、ページ中盤に情緒の転換点をつくる ──
   一斉配信の弊害を語る文。白い箱では感情が動かない */
.evidence-bridge {
  margin: 44px 0 52px;
  padding: clamp(38px, 4.6vw, 62px) clamp(26px, 4vw, 58px);
  border: 0;
  border-radius: var(--r-xl);
  background: linear-gradient(135deg, #0b1f39 0%, #17325a 100%);
  color: #fff;
  font-size: clamp(19px, 1.9vw, 27px);
  font-weight: 700;
  line-height: 1.72;
  letter-spacing: -.022em;
  text-align: center;
  text-wrap: balance;
  box-shadow: 0 30px 70px -34px rgba(11, 31, 57, .5);
}

/* ── 写真セクションを「囲われたカード」から解放し、人物を大きく見せる ── */
.story-photo,
.customer-scene {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  margin-top: 44px;
}
.story-photo { grid-template-columns: minmax(0, .82fr) minmax(340px, 1.18fr); }
.customer-scene { grid-template-columns: minmax(340px, 1.18fr) minmax(0, .82fr); }

.story-photo .photo-frame,
.customer-scene .photo-frame {
  min-height: 420px;
  border-radius: var(--r-xl);
  box-shadow: 0 40px 80px -40px rgba(15, 30, 55, .42);
}

/* 写真横のコピーは、語りかけるサイズに */
.story-copy b {
  display: block;
  font-size: clamp(21px, 2.1vw, 30px);
  line-height: 1.5;
  letter-spacing: -.026em;
  margin-bottom: 14px;
  text-wrap: balance;
}
.story-copy p { font-size: 15.5px; line-height: 1.95; }

/* ── ヒーローの主張を一段強くする ──
   ただし h1 は word-break:keep-all のため折り返せず、
   文字を大きくすると左カラムの最小必要幅が膨張して
   右のビジュアル（下限380px）と競合し、ヒーローが崩れる。
   実測: 64px → 最小必要幅736px → 右カラム374px（下限割れ）
   全幅域で安全な上限は 58px（4.4vw）。 */
h1 { font-size: clamp(32px, 4.4vw, 58px); }

/* ── 最終CTAを「締め」として大きく ── */
.cta { padding: clamp(88px, 10vw, 132px) 0; }
.cta h2 { font-size: clamp(30px, 3.6vw, 50px); }

@media (max-width: 860px) {
  .story-photo, .customer-scene { grid-template-columns: 1fr; }
  .story-photo .photo-frame, .customer-scene .photo-frame { min-height: 300px; }
}

/* ============================================================
   指摘対応：色の規律・装飾の撤去・横位置の整列・英語ラベル
   ============================================================ */

/* ── ① 青の規律を1つ決める ──
   これまで「行動データ活用」「金額」「Fitの見出し」等に規則なく青が散っていた。
   青は《操作できるもの（リンク・副次ボタン）》だけに限定し、
   見出し・数値はインク／ネイビーに統一する。 */
.trust b,
.fit-card b,
.price-line strong {
  color: var(--navy);
}

/* ── ② カード上辺のラインを撤去 ──
   片側だけの装飾罫はテンプレート由来の常套句。境界は枠線だけで足りる。 */
.channel-card::before {
  display: none;
}

/* ── ③ 横位置の整列 ──
   本文の行数差でカード内の「配信例」の高さがずれていた。
   カードを縦フレックスにし、配信例を下端に固定して3枚を揃える。 */
.channel-card {
  display: flex;
  flex-direction: column;
}
.channel-example {
  margin-top: auto;
}

/* ── ④ 読まずに要点が掴めるようにする ──
   全て同色だと「読んで理解」しなければならない。
   3枚それぞれの《打ち手》を塗りで立て、状態→打ち手が一目で追えるようにする。 */
.send {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
  padding: 11px 16px;
}

/* ── ⑤ 英語ラベルの扱い ──
   Uninstall Prevention / Personal Offer / Operation は和文の読者に
   情報を与えないが、文言は削除・非表示にしない方針のため、
   《色付きチップ》をやめて《静かな見出し上のラベル》に置き換える。
   見出しと競合させず、かつ確実に読める状態を保つ。 */
.benefit .tag {
  display: inline-block;
  padding: 0;
  margin-bottom: 10px;
  background: transparent;
  border: 0;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.benefit b {
  display: block;
  margin-bottom: 12px;
}

/* ── 配信例（Examples）の説明文が読みにくい問題 ──
   原因は3つ重なっていた：
   ① text-align:center → 和文の複数行で左端が揃わず、行の起点を毎回探すことになる
   ② font-size:12px    → 本文としては小さすぎる
   ③ font-weight:800   → 小さい字を太らせると字面が潰れて可読性が落ちる
   左揃え・13.5px・中程度のウェイト・行間広めに直す。 */
.push-desc {
  text-align: left;
  padding: 0 2px;
  gap: 10px;
}
.push-tag {
  justify-self: start;
  font-size: 11.5px;
}
.push-desc p {
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.8;
}

/* ── 「視線が定まらない」問題の構造的な原因 ──
   4列 × 縦積みだと本文幅が272pxしかなく、1行あたり約20文字。
   和文の適正は25〜40文字のため行が細切れになり、
   さらに横に4つの塊が並ぶことで視線が何度も往復していた。

   2列にし、カード内を《画像左・テキスト右》の横並びにする。
   → 1行29文字（適正域）／1行に並ぶ塊が2つ／視線の起点が左端1本に定まる。 */
@media (min-width: 981px) {
  .push-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 28px;
  }
  .push-card {
    grid-template-columns: 160px minmax(0, 1fr);
    align-items: center;
    align-content: center;
    gap: 22px;
  }
  .push-phone-img {
    max-width: 160px;
    justify-self: center;
  }
  .push-desc {
    align-content: center;
    padding: 0;
  }
}




/* ============================================================
   ヒーロー左：カードを外して罫線で仕切る ＋ 注釈を吹き出しに
   ------------------------------------------------------------
   ・箱（枠線・影・角丸）を3つ並べる見せ方はテンプレート的で、
     文字より器が目立つ。罫線で仕切るだけにして文字を主役に戻す。
     副次効果として、見出しが右端に詰まって見える問題も構造的に消える。
   ・注釈「LINEもアプリも…」は内容が3つ目「自動使い分け」の具体例。
     モック画面とは無関係だったため、本来の親であるこの位置に紐づけ、
     下向きの吹き出しで関係を明示する。
     ※この項目のみHTML上で要素を移動している（別案限定）
   ============================================================ */
.trust-strip {
  position: relative;
  gap: 26px;
  overflow: visible;
}
.trust {
  background: transparent;
  border: 0;
  border-left: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
  padding: 2px 0 2px 22px;
}
.trust:first-child {
  border-left: 0;
  padding-left: 0;
}
.trust:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--line);
}

/* 注釈：濃紺の吹き出し。上向きの三角で「自動使い分け」を指す */
.float-note {
  position: absolute;
  top: calc(100% + 16px);
  right: 0;
  left: auto;
  bottom: auto;
  width: 290px;
  padding: 13px 15px;
  border: 0;
  border-radius: 12px;
  background: var(--navy);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.65;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: 0 18px 36px -20px rgba(15, 30, 55, .45);
}
.float-note::after {
  content: "";
  position: absolute;
  bottom: 100%;
  right: 38px;
  border: 8px solid transparent;
  border-bottom-color: var(--navy);
}

@media (max-width: 680px) {
  .trust {
    border-left: 0;
    border-top: 1px solid var(--line);
    padding: 14px 0 0;
  }
  .trust:first-child { border-top: 0; padding-top: 0; }
  .float-note {
    position: static;
    width: 100%;
    margin-top: 18px;
  }
  .float-note::after { display: none; }
}


/* ============================================================
   ヒーローの構造：上段=2カラム / 下段=全幅（参考LPの構造を採用）
   ------------------------------------------------------------
   狭い左カラム(647px)にカードとCTAを押し込んでいたため、
   左右の高さが揃わず構図が破綻していた。
   カードとCTAを下段の全幅(1160px)へ出すことで、
   「高さを揃える」問題自体を発生させない構造にする。
   HTMLは無変更。display:contents で左カラムの入れ物だけを透過させ、
   中の要素を直接グリッドへ配置している。
   ============================================================ */
@media (min-width:981px){
  /* ── 上段=2カラム / 下段=全幅 の2段構成 ──
     左カラムの入れ物を display:contents で透過させ、
     中の要素を直接グリッドに配置する（HTMLは無変更）。
     カードとCTAを全幅に出すことで、左右の高さを揃える必要自体をなくす。 */
  .hero-grid{
    grid-template-columns: minmax(0,1fr) minmax(430px,.78fr);
    column-gap:52px; row-gap:0; align-items:start;
  }
  .hero-grid > div:first-child{ display:contents; }

  .eyebrow{ grid-column:1; grid-row:1; }
  h1       { grid-column:1; grid-row:2; }
  .lead    { grid-column:1; grid-row:3; margin-bottom:0; }

  /* モックは上段右。高さを埋めようとしない。
     スマホは実測でダッシュボード上端に揃う位置へ（計算値 -67px） */
  .hero-visual{ grid-column:2; grid-row:1 / span 3; min-height:0; }
  .phone-card { bottom:-67px; }

  /* カードは全幅へ（左カラム647px → 1160px に開放） */
  .trust-strip{
    grid-column:1 / -1; grid-row:4;
    grid-template-columns:repeat(3,minmax(0,1fr));
    max-width:none; margin-top:64px;
  }
  /* 吹き出しは3列目の真下にin-flowで置く（CTAとの重なりを回避） */
  .float-note{
    position:relative; grid-column:3; grid-row:2;
    top:auto; right:auto; bottom:auto; left:auto;
    width:auto; margin-top:14px; align-self:start;
  }
  .float-note::after{ bottom:auto; top:-15px; right:auto; left:28px; }

  /* CTAは最下段に全幅で大きく */
  .hero-actions{
    grid-column:1 / -1; grid-row:5;
    display:grid; grid-template-columns:1fr 1fr; gap:16px;
    margin-top:40px;
  }
  .hero-actions .btn{ min-height:60px; font-size:16px; }
}
@media (min-width:981px){
  .trust-strip{ grid-template-columns:repeat(4,minmax(0,1fr)); align-items:stretch; }
  .float-note{
    grid-column:4; grid-row:1; margin-top:0;
    align-self:stretch; display:flex; align-items:center;
    border-radius:12px; padding:16px 18px;
  }
  .float-note::after{
    top:50%; left:auto; right:100%; bottom:auto;
    transform:translateY(-50%);
    border:8px solid transparent; border-right-color:var(--navy);
  }
}



/* ============================================================
   カード装飾の整理（第2弾）
   「箱を3つ並べる」見せ方が続くとテンプレート的に見える。
   入れ子や強調が不要なセクションは、箱を外して罫線で仕切る。
   ※ Channel と 統計カードは入れ子・反転があるため箱を維持する
   ============================================================ */

/* ── Start：開始ステップが1行14文字で細切れだった ──
   3列を縦積みにし、1行あたり40文字超を確保する。
   箱も外して、番号付きの手順として読ませる。 */
.starter-steps {
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: 26px;
}
.starter-step {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  padding: 14px 0;
  font-size: 14.5px;
  line-height: 1.7;
}
.starter-step:first-child { border-top: 0; padding-top: 0; }

/* ── Merit・Fit：箱を外して罫線で仕切る ── */
@media (min-width: 861px) {
  .benefit-grid, .fit-grid { gap: 30px; }
  .benefit, .fit-card {
    background: transparent;
    border: 0;
    border-left: 1px solid var(--line);
    border-radius: 0;
    box-shadow: none;
    padding: 2px 0 2px 26px;
  }
  .benefit-grid > .benefit:first-child,
  .fit-grid > .fit-card:first-child {
    border-left: 0;
    padding-left: 0;
  }
  .benefit:hover, .fit-card:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--line);
  }
}
@media (max-width: 860px) {
  .benefit, .fit-card {
    background: transparent;
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0;
    box-shadow: none;
    padding: 18px 0 0;
  }
  .benefit-grid > .benefit:first-child,
  .fit-grid > .fit-card:first-child { border-top: 0; padding-top: 0; }
}

/* ============================================================
   明度の引き上げ（ブランド実配色に合わせる）
   ------------------------------------------------------------
   実測：gmo-app.jp は 主色#0050a0 / 地#e0f0f0 / 差し色#f07050、
        marketing-connect は 地#d0f0f0 / 差し色#00d0c0。
   いずれも「白＋水色系の地＋鮮やかな差し色」で明るい。
   当初の無彩色グレー地＋焦げオレンジは、この family から外れていた。
   ============================================================ */
:root {
  /* 地：無彩色グレー → 水色を含んだ明るい地（ブランド準拠） */
  --soft: #eff6fa;
  --pale: #e2eff7;
  --line: #dbe7f0;

  /* CTA：焦げオレンジ → 白文字でAAを満たす範囲で最も明るいコーラル */
  --cta: #c94510;
  --cta-2: #b33c0c;

  /* ブランドのシアンを差し色として追加（両サイト共通の signature） */
  --cyan: #00bfb2;

  /* 補助色も彩度を戻す */
  --green: #12a58c;
  --orange: #e8752a;
}

/* ヒーローの地も水色寄りにして、冒頭から明るく見せる */
.hero {
  background:
    radial-gradient(54% 60% at 4% 16%, rgba(0, 122, 194, .13), transparent 60%),
    radial-gradient(44% 54% at 24% 102%, rgba(0, 191, 178, .10), transparent 58%),
    radial-gradient(40% 50% at 99% 6%, rgba(0, 191, 178, .09), transparent 62%),
    linear-gradient(180deg, #eef7fb 0%, #fff 64%);
}

/* eyebrow / セクションラベルの短い罫はシアンに（明るい印象の起点） */
.eyebrow::after,
.label::after { background: var(--cyan); }

/* 数字の下に伸びるバーもシアンへ */
.evidence-card::after { background: var(--cyan); }

/* 濃紺の面は、わずかに青みを上げて重さを抜く */
.section.dark-section { background: linear-gradient(135deg, #0d2749 0%, #123a66 100%); }
.cta { background: linear-gradient(135deg, #0d2749 0%, #16406f 100%); }
.evidence-bridge { background: linear-gradient(135deg, #0d2749 0%, #16406f 100%); }

/* 罫線区切りの見出しに、ほんのり明るさを足す */
.trust b { color: #00559f; }

/* ============================================================
   CTAカラー：GMOおみせアプリのブランドオレンジに統一
   ------------------------------------------------------------
   実測：おみせアプリ #FDA05B / コーポレート #FAA630 は
        いずれも白文字とのコントラストが約2.0:1 で WCAG AA 未達。
        ブランド2サイトが揃ってこの状態のため、
        LP単体で基準を満たすより「ブランドの明るさと一貫性」を優先する
        という組織判断により #FDA05B ＋ 白文字を採用する。
        （基準を満たす選択肢は #dd7a08＋19px太字 だが、明るさが失われるため不採用）
   ============================================================ */
:root {
  --cta: #FDA05B;
  --cta-2: #f79245;
}
.btn-primary,
.btn-dark { color: #fff; }
.btn-primary:hover,
.btn-dark:hover { background: var(--cta-2); color: #fff; }

/* eyebrow・セクションラベルの罫、統計のバーもブランドオレンジに揃える */
.eyebrow::after,
.label::after,
.evidence-card::after { background: #FDA05B; }

/* ============================================================
   Examples：横1列（4つ並び）に戻し、小見出しを帯に
   ------------------------------------------------------------
   2列＋画像左/文字右にしたところ、1枚あたりが横に広く
   余白が空いて間伸びして見えたため、縦積みの4列に戻す。
   小見出しはスマホ画像と同じ幅の帯にして白抜き文字、
   その下の説明文は通常ウェイトの左寄せにする。
   ============================================================ */
@media (min-width: 981px) {
  .push-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px 22px;
  }
  .push-card {
    grid-template-columns: 1fr;   /* 画像の下に文字を積む */
    align-content: start;
    align-items: start;
    gap: 12px;
  }
  .push-phone-img {
    max-width: 100%;
    justify-self: stretch;
  }
  .push-desc {
    align-content: start;
    padding: 0;
    gap: 9px;
  }
}

/* 小見出し：スマホと同じ幅の帯＋白文字 */
.push-tag {
  display: block;
  width: 100%;
  justify-self: stretch;
  padding: 9px 13px;
  border: 0;
  border-radius: 6px;
  background: var(--navy);
  color: #fff;
  font-size: 12.5px;
  text-align: left;
}

/* 説明文：太字をやめて通常ウェイト、左寄せ */
.push-desc p {
  font-weight: 400;
  text-align: left;
}

/* ── 帯の幅をスマホ「本体」の幅に合わせる ──
   スマホ画像(520x480)は影のための透明余白を左右各35px含んでおり、
   本体は画像幅の86.5%（450/520）しかない。
   画像と同じ100%幅では帯が本体より広く見えてしまうため、
   本体と同率にし、左端も本体に揃える（左余白 6.73%分だけ内側へ）。 */
.push-tag {
  width: 86.5%;
  margin-left: 6.73%;
}
.push-desc p {
  padding-left: 6.73%;
  padding-right: 6.73%;
}

/* ── 暗転パネル：影を外し、角丸を上のカードと揃える ──
   ・不要な影は安っぽく見えるため撤去（面と色で十分に立っている）
   ・角丸26px は上の4枚（12px）と不一致だったため 12px に統一 */
.evidence-bridge {
  border-radius: var(--r-md);
  box-shadow: none;
}

/* ── 影とホバーの整理（不要な装飾を落とす）──
   影を使うのは「モックアップ＝実物が浮いている表現」だけに限定する。
   ・カードのホバーで浮き上がる動きは、情報を足していないため撤去
   ・料金カードの大きな影も撤去（枠線と面で十分に立つ）
   ・ダッシュボードの影は残すが、主張しすぎていたため半分程度に抑える */
.trust:hover, .push-card:hover, .card:hover, .benefit:hover,
.channel-card:hover, .fit-card:hover, .evidence-card:hover {
  transform: none;
  box-shadow: var(--shadow-card);
  border-color: var(--line);
}
.price-card {
  box-shadow: none;
}
.screen-card {
  box-shadow: 0 14px 30px -18px rgba(15, 30, 55, .18);
}

/* ── ヒーロー：左のテキストとダッシュボードの間隔を広げる ── */
@media (min-width: 981px) {
  .hero-grid { column-gap: 84px; }
}

/* ── 写真の影を撤去し、角丸も他のカードと揃える ──
   写真は面そのものが強いため影は不要。
   角丸26pxも1箇所だけ表情が違っていたため12pxに統一する。 */
.story-photo .photo-frame,
.customer-scene .photo-frame,
.photo-frame,
.scenario-photo {
  box-shadow: none;
  border-radius: var(--r-md);
}

/* ── Value「①データをためる〜」：箱を外し、番号を見出しの横へ ──
   min-height:260px が固定で入っており、中身が短いカードほど
   下に大きな空白ができていた。
   箱を外して罫線区切りにし（Merit・Fit・trustと同じ言語）、
   番号を見出しと同じ行に置くことで縦の積み上げを1段減らす。 */
@media (min-width: 861px) {
  .problem-grid { gap: 30px; }
  .card {
    min-height: 0;
    padding: 2px 0 2px 26px;
    background: transparent;
    border: 0;
    border-left: 1px solid var(--line);
    border-radius: 0;
    box-shadow: none;
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 12px;
    row-gap: 8px;
    align-items: center;
  }
  .problem-grid > .card:first-child { border-left: 0; padding-left: 0; }
  .num { margin: 0; grid-row: 1; grid-column: 1; width: 30px; height: 30px; font-size: 14px; }
  .card h3 { margin: 0; grid-row: 1; grid-column: 2; }
  .card p  { margin: 0; grid-row: 2; grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .card {
    min-height: 0;
    background: transparent;
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0;
    box-shadow: none;
    padding: 18px 0 0;
  }
  .problem-grid > .card:first-child { border-top: 0; padding-top: 0; }
  .num { margin-bottom: 12px; width: 30px; height: 30px; font-size: 14px; }
}

/* ── ① 統計カードの下線を撤去 ──
   4枚とも同じ長さまで伸びるだけでデータを表しておらず、
   ポジティブ(濃紺1枚)とネガティブ(3枚)の区別も打ち消していた。
   「装飾のための線は入れない」という方針に合わせて削除する。 */
.evidence-card::after { display: none; }

/* ── ② Channelカード：長丸をやめて左端の縦ラインを揃える ──
   .send と .channel-example-label が長丸(999px)だったため、
   丸みの分だけ文字の左端が内側にずれ、見出し・本文との縦ラインが
   ボコボコに見えていた。角丸を小さくし、左の内側余白も詰めて
   カード内のすべての要素の左端を1本に揃える。 */
.send,
.channel-example-label {
  border-radius: var(--r-sm);
}
.send { padding: 11px 14px; }

/* ── ③ Merit：カード内の英語ラベルを非表示にする ──
   セクション見出しの英語（Examples / Value / Merit …）は7セクション全部に
   一貫して付いているが、カード内の英語ラベルは Merit の3枚だけで、
   trust・push・card・channel・fit のカードには存在しない。
   この1セクションだけの例外を解消するため非表示にする。
   ※HTMLからは削除していないため、この1行を消せば元に戻る。
   ※依頼者確認前の判断としてユーザー（中野氏）の明示的な指示により実施。 */
.benefit .tag { display: none; }
.benefit b { display: block; margin-bottom: 12px; }

/* ── クロージングCTAの角丸を外す ──
   上端の角丸をやめ、セクションを全幅の面として見せる。
   （PC用・SP用の2箇所の指定をまとめて打ち消す） */
.cta { border-radius: 0; }
@media (max-width: 680px) {
  .cta { border-radius: 0; }
}

/* ── クロージングCTAのボタンをPCで大きくする ──
   実測でヒーローのCTAが574×60pxに対し、ページ末尾の最重要CTAは
   130×46pxしかなく、役割に対して明らかに小さかった。
   ヒーローと同等の存在感まで引き上げる。スマホは現状維持。 */
@media (min-width: 861px) {
  .cta-inner { gap: 40px; align-items: center; }
  .cta .btn-dark {
    min-height: 68px;
    padding: 0 44px;
    font-size: 18px;
    border-radius: 10px;
    white-space: nowrap;
  }
}

/* ============================================================
   スマホでの横はみ出し修正（元デザインからのSP対応漏れ）
   ------------------------------------------------------------
   .journey 自体は980px以下で1カラムになるが、その内部が未対応だった。
   【原因1】.scenario-title は word-break:keep-all のため折り返せず、
           24px×15文字（約360px）がパネル内側290pxを超過していた。
   【原因2】.data-item / .route が「見出し132px＋説明1fr」の横並び固定で、
           説明文に112pxしか残らず入りきらなかった。
   ============================================================ */
@media (max-width: 860px) {
  /* 長い小見出しはスマホでは通常の折り返しを許可する（禁則処理は維持） */
  .scenario-title,
  .journey-panel h3,
  .scenario h3 {
    word-break: normal;
    overflow-wrap: anywhere;
    font-size: 19px;
    line-height: 1.45;
  }
  /* パネルの内側余白を詰めて横幅を確保 */
  .journey-panel { padding: 22px 18px; }
  .scenario { padding: 22px 18px; }

  /* 「見出し＋説明」の横並びをやめて縦積みにする */
  .data-item,
  .route {
    grid-template-columns: 1fr;
    gap: 6px;
    align-items: start;
    padding: 14px;
  }
  .data-item b,
  .route b { font-size: 14.5px; }
  .data-item span,
  .route span { font-size: 13px; line-height: 1.7; }
}

/* ── スマホ：小見出しの不自然な分割と、アイコンの間隔を整える ──
   overflow-wrap:anywhere だと「GMOマーケティン／グコネクト」のように
   語の途中で割れるため、まず通常の日本語規則で折り返させ、
   収まらない場合のみ任意位置で折る（word-break:auto-phrase相当の挙動に寄せる）。
   また .route はアイコンが縦積みの1行を占めて間隔が空くため詰める。 */
@media (max-width: 860px) {
  .scenario-title,
  .journey-panel h3,
  .scenario h3 {
    overflow-wrap: normal;
    word-break: normal;
    font-size: 18px;
  }
  /* アイコン＋見出し＋説明の縦間隔を詰める */
  .route { gap: 4px; padding: 12px 14px; }
  .route-icon { width: 26px; height: 26px; margin-bottom: 2px; }
  .route-icon svg { width: 20px; height: 20px; }
}

/* ── スマホ：小見出しを1行に収めて語の途中で割らない ──
   使える幅は274px。実測で
     「GMOおみせアプリで見えるサイン」   16px→234px
     「GMOマーケティングコネクトで自動化」16px→266px
   の両方が16pxで1行に収まるため、折り返しを禁止（keep-all）に戻して
   「マーケティン／グ」のような語中分割を防ぐ。 */
@media (max-width: 860px) {
  .scenario-title,
  .journey-panel h3,
  .scenario h3 {
    font-size: 16px;
    word-break: keep-all;
    overflow-wrap: normal;
    line-height: 1.5;
  }
}

/* ── スマホ：料金カードのはみ出し修正 ──
   「GMOマーケティングコネクト利用イメージ」は19文字あり、
   16pxでも298px必要でカード内側282pxに収まらない（h3のkeep-allで折り返せない）。
   この見出しだけは折り返しを許可し、カードの内側余白も詰める。
   あわせて価格行・注記・チェックリストの文字サイズをSP向けに調整する。 */
@media (max-width: 860px) {
  .price-card { padding: 22px 18px; }
  .price-title {
    font-size: 17px;
    line-height: 1.5;
    word-break: normal;
    overflow-wrap: normal;
    margin-bottom: 14px;
  }
  /* 「項目」と「金額」を縦積みにして横幅の競合をなくす */
  .price-line {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2px;
    padding: 14px 0;
  }
  .price-line strong { font-size: 20px; }
  .price-note { font-size: 12.5px; line-height: 1.75; padding: 14px; }
  .check { font-size: 13px; line-height: 1.7; gap: 8px; }
  .starter-step { font-size: 13.5px; }
}

/* ============================================================
   フッター：既存LP /lp/tenpo-aio/ の実CSSに準拠
   ------------------------------------------------------------
   会社名・サービス説明・4つのリンクは、この下に入る
   GMOセキュリティフッター（ロゴあり）と重複するため撤去。
   レイアウトは aio_style.css の実装をそのまま踏襲する：
     ・地は白、上下padding 16px
     ・inner は width:min(1180px, 100% - 48px) で text-align:right
     ・リンクは右寄せ（flex-end）、色はGMOブルー
     ・Copyright はその下に8pxあけて配置（＝右側に2段）
     ・SPでは中央寄せ
   ============================================================ */
.site-footer { border-top: 0; background: transparent; padding: 0; }
.footer-policy { background: #fff; padding: 16px 0; }
.footer-policy__inner {
  width: min(1180px, 100% - 48px);
  margin-inline: auto;
  text-align: right;
}
.footer-policy__links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  justify-content: flex-end;
}
.footer-policy__links a {
  font-size: 13px;
  color: var(--blue);
  text-decoration: none;
  font-weight: 400;
}
.footer-policy__links a:hover { text-decoration: underline; }
.footer-copy {
  font-size: 12.5px;
  color: var(--muted);
  margin: 8px 0 0;
}
.footer-copy b { color: var(--blue); font-weight: 700; }

@media (max-width: 680px) {
  .footer-policy__inner { text-align: center; }
  .footer-policy__links { justify-content: center; }
}

/* ---------- GMOグループ共通 セキュリティフッター（既存LP準拠） ---------- */
.security_footer { padding: 1rem; max-width: 1040px; margin: 0 auto; }
.security_footer ul { letter-spacing: 0em !important; }
.security_footer .logo { max-height: 20px; margin: 20px 0; text-align: left; }
.g-banner { text-align: center; margin: 40px 0; }

@media screen and (max-width: 991px) {
  .security_footer { padding: 0; }
  .security_footer .logo { text-align: center; }
}
@media screen and (min-width: 992px) {
  .security_footer .logo { margin: 20px 0 20px 10px; }
}