/* ========== Base ========== */
.swx-pricing{ --bg:#0b1020; --surface:#10162b; --text:#e8eefc; --muted:#a6b0c8; --brand:#FFD400; --brand-ink:#2b2b2b; --accent:#5aa3ff; --ok:#35d0a0; --radius:16px; --shadow:0 10px 30px rgba(0,0,0,.3); }
.swx-pricing *{ box-sizing:border-box; }
.swx-pricing h2.sec-title{ font-size: clamp(22px, 2.6vw, 32px); line-height:1.25; margin:0 0 10px; color:var(--text); }
.swx-pricing .sec-lead{ color:var(--muted); margin:0 0 24px; }

/* 共通コンテナ（初回案内以下に適用） */
/* ← base.cssで統一するため padding を除去 */
.swx-container{ max-width:1200px; margin:0 auto; }

/* 見出し左ロゴ付き */
.sec-title--with-logo{ display:flex; align-items:center; gap: clamp(10px, 1.6vw, 16px); }
.sec-title--with-logo .sec-logo{
  width: clamp(44px, 6vw, 64px);
  height:auto; flex:0 0 auto;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.25));
}

/* ========== 1) 価値宣言ヒーロー ========== */
.value-hero{
  position:relative;
  height:100vh; min-height:580px;
  isolation:isolate; overflow:hidden; background:var(--bg);

  /* 中央配置（上下左右）+テキスト中央 */
  display:grid; place-items:center; text-align:center;
}
.value-hero__bg{
  position:absolute; inset:0;
  background:url('../../img/hero/pricing-hero-image-phone-1.webp') center/cover no-repeat;
  transform:scale(1.02); will-change:transform;
}
.value-hero__overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.55) 100%);
  mix-blend-mode:multiply;
}
/* テキストコンテンツの最大幅（PC） */
.value-hero__inner,
.value-hero .value-hero__content,
.value-hero .hero-content,
.value-hero .content,
.value-hero .inner{
  width: min(92vw, 980px);
  margin: 0 auto;
  display:flex; flex-direction:column; gap:20px;
  max-width:1100px;
  padding: clamp(18px, 5.5vw, 64px);
  padding-top: clamp(52px, 10vh, 120px);
  color:var(--text);
}
.value-hero__title{ font-size: clamp(26px, 4vw, 44px); line-height:1.18; margin:0 0 6px; color: var(--text);}

/* 常に縦並び */
.value-hero__points{ display:grid; gap:20px; grid-template-columns:1fr; max-width:960px; }
.value-hero .point h3{ font-size: clamp(18px, 2.4vw, 22px); margin:0 0 6px; color: var(--text);}
.value-hero .point p{ margin:0; color:var(--text); opacity:.95; }
.value-hero .em{ color:var(--brand); font-weight:700; }

/* バッジ/ボタン */
.badge{ display:inline-block; padding:2px 8px; border-radius:999px; background:#2a3353; color:#e2e8ff; font-size:12px; margin-inline:2px; }
.badge--primary{ background:var(--brand); color:var(--brand-ink); font-weight:700; }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5em; padding:.9em 1.2em; border-radius:999px; text-decoration:none; font-weight:700; box-shadow:var(--shadow); transition:transform .12s ease, box-shadow .12s ease; }
.btn--primary{ background:var(--brand); color:#222; }
.btn:hover{ transform:translateY(-1px); box-shadow:0 16px 36px rgba(0,0,0,.35); }

/* ヒーロー背景画像の切替 */
@media (min-width: 768px){
  .value-hero__bg{ background-image: url('../../img/hero/pricing-hero-image-1.webp'); }
}
@media (prefers-reduced-motion: no-preference){
  .value-hero__bg{ animation: heroZoom 18s ease-in-out infinite; }
  @keyframes heroZoom{ 0%{ transform:scale(1.02);} 45%{ transform:scale(1.06);} 100%{ transform:scale(1.02);} }
}

/* ========== 1.5) 初回契約 CTA ========== */
/* ← セクションpaddingを削除（base.cssに委譲） */
.first-offer{ background:linear-gradient(180deg, rgba(11,16,32,.35) 0%, rgba(11,16,32,.85) 70%, rgba(11,16,32,1) 100%); position:relative; overflow:hidden; }
.first-offer__inner{ position: relative; }
.first-offer__inner::before{
  content:""; position:absolute; inset:-40px -60px -40px -60px; pointer-events:none;
  background:
    radial-gradient(1200px 420px at 20% 20%, rgba(0,0,0,.35), transparent 60%),
    radial-gradient(1400px 520px at 50% 45%, rgba(0,0,0,.35), transparent 60%),
    radial-gradient(1200px 420px at 80% 30%, rgba(0,0,0,.30), transparent 60%);
  mix-blend-mode:multiply; z-index:0;
}
.first-offer .sec-title{ color:#F4F7FF; font-weight:800; text-shadow:0 2px 8px rgba(0,0,0,.35); letter-spacing:.02em; position:relative; z-index:1; }
.first-offer .sec-lead{ color:#D6DDF3; font-weight:500; line-height:1.7; text-shadow:0 1px 6px rgba(0,0,0,.3); max-width:60ch; position:relative; z-index:1; }
.first-offer__cta{ display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; position:relative; z-index:1; }
.first-offer .btn{ background:#2a3353; color:#e8e8ff; box-shadow:0 10px 26px rgba(0,0,0,.35); }
.first-offer .btn.btn--primary{ background:var(--brand); color:var(--brand-ink); }

/* ========== 共通：幅100%画像 + テキストオーバーレイ ========== */
.sec-visual{ position:relative; border-radius:16px; overflow:hidden; margin: 10px 0 22px; box-shadow: var(--shadow); }
.sec-visual picture, .sec-visual img{ display:block; width:100%; object-fit:cover; }
.sec-visual::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.55) 100%); }
.sec-visual__lead{
  position:absolute; left: clamp(16px, 4vw, 28px); bottom: clamp(12px, 3.2vw, 22px);
  margin:0; color:#f2f6ff; z-index:1; max-width: 70ch;
  font-size: clamp(14px, 1.6vw, 18px); line-height:1.7; text-shadow: 0 2px 8px rgba(0,0,0,.45);
}

/* ========== 2) 比較テーブル ========== */
/* ← セクションpaddingを削除（base.cssに委譲） */
.compare{ background:var(--surface); }
.table-wrap{ overflow:auto; border-radius:var(--radius); box-shadow:var(--shadow); }
.table{ width:100%; border-collapse:separate; border-spacing:0; background:#151c35; color:var(--text); }
.table thead th{ position:sticky; top:0; background:#1b2443; color:#fff; text-align:left; padding:14px 16px; }
.table td{ padding:14px 16px; border-top:1px solid rgba(255,255,255,.06); color:#dfe6ff; }

/* ========== 3) 料金カード ========== */
/* ← セクションpaddingを削除（base.cssに委譲） */
.pricing{ background:#0e1430; }
.cards{ display:grid; gap:20px; grid-template-columns:1fr; }
.card{ background:#131a3a; border:1px solid rgba(255,255,255,.06); border-radius:var(--radius); padding:22px; color:var(--text); box-shadow:var(--shadow); }
.card__title{ margin:0 0 8px; font-size: clamp(18px, 2.2vw, 22px); color: var(--text);}
.card__price{ font-size: clamp(16px, 2vw, 18px); margin:.2em 0 8px; color:#cfe3ff; }
.card__price strong{ font-size: clamp(26px, 4vw, 36px); color:#fff; }
.yen{ font-size:.9em; opacity:.85; margin-right:.25em; }
.kv-list{ display:grid; gap:10px; margin:10px 0 12px; }
.kv{ display:flex; align-items:center; justify-content:space-between; background:#0f1530; border:1px dashed rgba(255,255,255,.12); border-radius:12px; padding:10px 12px; }
.kv span{ color:#cbd6ff; }
.kv strong{ color:#fff; font-size:1.1em; }
.card__list{ margin:10px 0 0; padding:0 0 0 18px; color:#d8e1ff; }

/* 「なぜ初回だけ特別？」は見出し→本文の縦並び */
.card--note .card__title{ margin-bottom:8px; }
.card--note .card__text{ margin:0; line-height:1.8; color:#e6ecff; }

@media (min-width: 960px){
  .cards{ grid-template-columns: 1fr 1fr 1fr; }
  .card--note{ grid-column: span 3; }
}

/* ========== 4) 合計・価値訴求 ========== */
/* ← セクションpaddingを削除（base.cssに委譲） */
.total{ background:var(--surface); }
.sum-grid{ display:grid; gap:16px; grid-template-columns:1fr; margin-top:10px; }
.sum-box{ background:#151c35; border:1px solid rgba(255,255,255,.06); border-radius:var(--radius); padding:18px; }
.sum-box h3{ margin:0 0 8px; color:#fff; font-size: clamp(16px, 2vw, 20px); }
.sum-box ul{ margin:0; padding-left:18px; color:#dfe6ff; }
.note{ margin:14px 0 0; color:#aeb8d6; font-size:.95em; }
.cta-wrap{ margin-top:18px; }

@media (min-width: 840px){
  .sum-grid{ grid-template-columns: 1fr 1fr; }
}

/* 「なぜ初回だけ特別？」内のボタン位置調整 */
.card__actions{ margin-top:14px; display:flex; gap:10px; flex-wrap:wrap; }
.card__actions .btn{ box-shadow:0 10px 26px rgba(0,0,0,.35); }

/* ========== レスポンシブ 微調整 ========== */
/* タブレット：背景を見切らせない / テキスト幅をさらに狭く / CTAは普通サイズ */
@media (max-width: 1024px){
  /* ← セクションpaddingは削除 */
  .value-hero{ height:min(84vh, 720px); }
  .value-hero__bg{
    background-size:contain; background-position:center center; background-repeat:no-repeat;
    transform:none; animation:none;
  }
  .value-hero__inner,
  .value-hero .value-hero__content,
  .value-hero .hero-content,
  .value-hero .content,
  .value-hero .inner{
    width:min(82vw, 460px);   /* ← さらにタイト */
  }
  .value-hero .btn{ padding:12px 20px; }  /* 通常サイズ感 */
}

/* スマホ：CTAは安全幅を確保 */
@media (max-width: 560px){
  .value-hero .btn{ max-width:92vw; padding:12px 22px; }
}
/* --- Hero: CTAが見える/押せるように前面に固定 --- */
.value-hero__overlay{ z-index: 1; }
.value-hero__inner{ position: relative; z-index: 2; }  /* ← テキスト/ボタンを前面に */

/* --- Tablet: テキスト領域をやや広げる（460px → 520px） --- */
@media (max-width: 1024px){
  .value-hero__inner,
  .value-hero .value-hero__content,
  .value-hero .hero-content,
  .value-hero .content,
  .value-hero .inner{
    width: min(86vw, 520px);
  }
}
/* --- Smartphone: テキスト領域を最大＋適度な余白、背景は全体表示 --- */
@media (max-width: 560px){
  .value-hero{
    height: auto;
    min-height: 560px;
    /* ← セクションpaddingは base.css に委譲（削除） */
    overflow: visible;
  }
  .value-hero__bg{
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    transform: none;
    animation: none;
  }

  /* テキスト領域をほぼ最大まで（左右は少しだけ余白） */
  .value-hero__inner,
  .value-hero .value-hero__content,
  .value-hero .hero-content,
  .value-hero .content,
  .value-hero .inner{
    width: 100%;
    max-width: none;
    padding-left: clamp(14px, 4vw, 20px);
    padding-right: clamp(14px, 4vw, 20px);
    gap: 16px;
  }

  /* 見出し・本文の読みやすさを微調整 */
  .value-hero__title{ margin-bottom: 6px; }
  .value-hero__points{ max-width: none; }

  /* CTAは通常サイズ、はみ出し防止のみ */
  .value-hero .btn{
    padding: 12px 20px;
    max-width: 100%;
    white-space: nowrap;
  }
}
/* Hero: 強調行（.em）を確実に黄色にする */
.value-hero .point .em{
  color: var(--brand);     /* #FFD400 */
  font-weight: 800;
  opacity: 1;              /* 先の p の opacity を打ち消す */
}
.value-hero .point .em{ text-shadow: 0 1px 4px rgba(0,0,0,.25); }
/* --- Hero title: 基本は改行なし、極小画面のみ折り返し可 --- */
@media (min-width: 560px){
  .value-hero__title{
    white-space: nowrap;     /* 改行させない */
  }
  .value-hero__title wbr{    /* 既存の <wbr> を無効化 */
    display: none;
  }
}

/* 端末が狭すぎてはみ出す場合の保険（任意） */
@media (max-width: 559.98px){
  .value-hero__title{
    white-space: normal;             /* スマホ極小のみ通常折返し */
    font-size: clamp(22px, 7vw, 36px); /* 文字が大きすぎる時に少し縮む */
  }
}
/* ==== Hero 見出し：スマホで改行しないよう自動縮小 ==== */
.value-hero__title{
  white-space: nowrap;                 /* 改行させない */
  font-size: clamp(22px, 6vw, 44px);   /* 既定（PC〜タブレット） */
  line-height: 1.15;
}

@media (max-width: 560px){
  .value-hero__title{
    /* 画面幅に応じてさらに小さくして1行に収める */
    letter-spacing: .01em;             /* わずかに詰めて収まりを良くする */
  }
}

/* ==== Hero 内 h3 を大きめに ==== */
.value-hero .point h3{
  /* もとの 18px〜22px を底上げ */
  font-size: clamp(18px, 2.8vw, 26px);
  line-height: 1.25;
  margin-bottom: 6px;
}

@media (max-width: 560px){
  .value-hero .point h3{
    /* スマホでも見出し感を確保 */
    font-size: clamp(18px, 4.8vw, 22px);
  }
}

/* === Compare table: smartphone horizontal scroll === */
@media (max-width: 767.98px){
  .compare .table-wrap{
    overflow-x: auto;                 /* 横スクロール有効化 */
    -webkit-overflow-scrolling: touch;/* 慣性スクロール */
    overscroll-behavior-x: contain;   /* 端でのバウンド伝播を防止 */
  }
  .compare .table{
    width: max-content;   /* 内容幅にあわせて広がる */
    min-width: 640px;     /* 保障的にコンテナより広くする → スクロール発生 */
  }
  .compare .table th,
  .compare .table td{
    white-space: nowrap;  /* 折り返さない＝窮屈さ解消 */
  }
}
/* === Compare table: smartphone horizontal scroll + bottom hint bar === */
@media (max-width: 767.98px){
  .compare .table-wrap{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .compare .table{
    width: max-content;      /* 内容幅に合わせる */
    min-width: 640px;        /* スクロールを必ず発生させる保険 */
  }
  .compare .table th,
  .compare .table td{
    white-space: nowrap;     /* 折り返さず読みやすく */
  }

  /* ▼テーブルの“下”に出すヒントバー */
  .compare .scroll-hint-below{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
    padding: 10px 14px;
    width: 100%;
    border-radius: 12px;
    background: rgba(15,20,48,.65); /* セクション色になじむ半透明 */
    color: #E6ECFF;
    font-size: 13px;
    line-height: 1;
    position: relative;
    overflow: hidden;
  }
  .compare .scroll-hint-below .arrows{
    font-weight: 800;
    letter-spacing: -2px;
    animation: swx-slide-arrows 1.1s ease-in-out infinite;
    white-space: nowrap;
  }
  .compare .table-wrap::after{
    content: "";
    position: absolute;
    top: 0; right: 0;
    width: 28px; height: 100%;
    pointer-events: none;
    background: linear-gradient(270deg, rgba(15,20,48,.9), rgba(15,20,48,0));
  }
  @keyframes swx-slide-arrows{
    0%,100% { opacity:.5; transform: translateX(0); }
    50%     { opacity:1;  transform: translateX(10px); }
  }

  /* 一度スクロールしたら / そもそも溢れていなければ 非表示 */
  .compare .table-wrap.is-hint-hidden + .scroll-hint-below{
    display: none;
  }
}