/* =========================
   first-contract.css (taped-cards edition)
   ========================= */

/* ===== Base ===== */
.swx-first{
  --bg:#0b1020;
  --surface:#10162b;
  --surface-2:#FFFFFF;
  --text:#1E2438;
  --muted:#556086;
  --brand:#FFD400;
  --brand-ink:#2b2b2b;
  --radius:16px;

  /* shadows */
  --shadow-sm: 0 4px 14px rgba(15,23,42,.08);
  --shadow-md: 0 10px 24px rgba(15,23,42,.12);
  --shadow-lg: 0 16px 36px rgba(15,23,42,.16);
  --shadow:    0 10px 30px rgba(0,0,0,.18);

  /* brand surface */
  --surface-brand-soft: linear-gradient(0deg, rgba(255,212,0,.06), rgba(255,212,0,.06)), #fff;
}
.swx-first *{ box-sizing:border-box; }
.swx-first .swx-container{ max-width:1200px; margin:0 auto; padding: 0 clamp(16px, 4vw, 24px); }

.swx-first .sec-title{ font-size: clamp(22px, 2.6vw, 32px); line-height:1.25; margin:0 0 10px; color:var(--text); font-weight:800; letter-spacing:.02em; }
.swx-first .sec-title--with-logo{ display:flex; align-items:center; gap: clamp(10px, 1.6vw, 16px); }
.swx-first .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,.15)); }

.swx-first .badge{ display:inline-block; padding:2px 8px; border-radius:999px; background:#2a3353; color:#e2e8ff; font-size:12px; margin-inline:2px; }
.swx-first .badge--primary{ background:var(--brand); color:var(--brand-ink); font-weight:700; }

.swx-first .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; }
.swx-first .btn--primary{ background:var(--brand); color:#222; }
.swx-first .btn:hover{ transform:translateY(-1px); box-shadow:var(--shadow-lg); }
.swx-first .note{ color:#6b7596; }

/* =========================
   1) Hero (Challenge)
   ========================= */
.swx-first .hero.hero--challenge{
  position:relative; width:100%; height:100vh; min-height:600px;
  overflow:hidden; isolation:isolate; display:flex; align-items:center; justify-content:center;
}
.swx-first .hero--challenge .hero__bg{
  position:absolute; inset:0; z-index:0;
  background:
    linear-gradient(135deg, var(--brand) 0%, #ffe266 60%, #fff6b8 100%),
    linear-gradient(135deg,
      color-mix(in srgb, var(--brand) 82%, #ffffff 18%) 0%,
      color-mix(in srgb, var(--brand) 62%, #ffffff 38%) 100%);
}

/* logo */
.swx-first .hero--challenge .hero__logo{
  position:absolute; top: clamp(10px, 2.8vh, 24px); left:50%; transform:translateX(-50%);
  z-index:4;
}
.swx-first .hero--challenge .hero__logo img{ width: min(26vw, 300px); height:auto; display:block; }

/* 縦書き「挑戦」 */
.swx-first .hero--challenge .hero__text{
  position:relative; z-index:3;
  writing-mode: vertical-rl; -webkit-writing-mode: vertical-rl;
  text-orientation: upright; display:block;
  line-height:.82; letter-spacing:-70px; margin-top: clamp(18px, 8.5vh, 156px);
  font-weight:900; font-size: clamp(56px, 11vw, 220px); color:#111;
  text-shadow:0 1px 0 rgba(255,255,255,.4);
  font-family:"Yuji Boku","Yuji Syuku","Yu Mincho","Hiragino Mincho ProN",serif;
}
.swx-first .hero--challenge .hero__char + .hero__char{ margin-block-start:-0.15em; }

/* 文字アニメ */
@keyframes swxFadeUp{ from{opacity:0; transform:translateY(18px); filter:blur(3px);} to{opacity:1; transform:translateY(0); filter:blur(0);} }
.swx-first .hero--challenge .hero__char{ display:inline; opacity:0; animation:swxFadeUp 900ms ease-out forwards; }
.swx-first .hero--challenge .hero__char--1{ animation-delay:.25s; }
.swx-first .hero--challenge .hero__char--2{ animation-delay:.85s; }

/* 写真 */
.swx-first .hero--challenge .hero__img{ position:absolute; z-index:2; opacity:0; pointer-events:none; }
.swx-first .hero--challenge .hero__img img{
  display:block; max-width: var(--imgW, min(36vw, 520px)); max-height:38vh;
  width:auto; height:auto; border-radius:0; box-shadow:none; background:transparent; transform-origin:center;
}

/* スライド */
@keyframes swxSlideInL{ from{opacity:0; transform:translateX(-8vw) translateY(18px) rotate(-3deg);} to{opacity:1; transform:translateX(0) translateY(0) rotate(0);} }
@keyframes swxSlideInR{ from{opacity:0; transform:translateX( 8vw) translateY(18px) rotate( 3deg);} to{opacity:1; transform:translateX(0) translateY(0) rotate(0);} }
@keyframes swxZoom{ from{transform:scale(1);} to{transform:scale(1.06);} }

.swx-first .hero--challenge .hero__img--a{ inset:12% auto auto 4%;  animation:swxSlideInL .9s ease-out 1.0s forwards; transform:rotate(-2deg); }
.swx-first .hero--challenge .hero__img--b{ inset:auto auto 8% 14%; animation:swxSlideInL .9s ease-out 1.2s forwards; transform:rotate(2deg);  --imgW: min(32vw, 460px); }
.swx-first .hero--challenge .hero__img--c{ inset:10% 6% auto auto;  animation:swxSlideInR .9s ease-out 1.1s forwards; transform:rotate(2deg); }
.swx-first .hero--challenge .hero__img--d{ inset:auto 14% 8% auto; animation:swxSlideInR .9s ease-out 1.3s forwards; transform:rotate(-2deg); --imgW: min(32vw, 460px); }

.swx-first .hero--challenge .hero__img--a img{ animation: swxZoom 20s ease-out 1.9s forwards; }
.swx-first .hero--challenge .hero__img--b img{ animation: swxZoom 20s ease-out 2.1s forwards; }
.swx-first .hero--challenge .hero__img--c img{ animation: swxZoom 20s ease-out 2.0s forwards; }
.swx-first .hero--challenge .hero__img--d img{ animation: swxZoom 20s ease-out 2.2s forwards; }

/* Tablet レイアウト */
@media (min-width:768px) and (max-width:1023px){
  .swx-first .hero--challenge .hero__logo{ display:block !important; z-index:5; }
  .swx-first .hero--challenge .hero__logo img{ width:min(30vw, 280px); }
  .swx-first .hero--challenge .hero__text{ font-size: 140px; line-height:.85; margin-top: clamp(16px, 5.5vh, 44px); letter-spacing: -40px; }
  .swx-first .hero--challenge .hero__char + .hero__char{ margin-block-start:-0.12em; }
  .swx-first .hero--challenge .hero__img img{ max-width:min(42vw, 380px); max-height:34vh; }
  .swx-first .hero--challenge .hero__img--a{ inset:12% auto auto 3%;  }
  .swx-first .hero--challenge .hero__img--b{ inset:auto auto 7% 10%;  --imgW:min(38vw, 360px); }
  .swx-first .hero--challenge .hero__img--c{ inset:11% 4%  auto auto; }
  .swx-first .hero--challenge .hero__img--d{ inset:auto 10% 7% auto;  --imgW:min(38vw, 360px); }
}

/* 低モーション */
@media (prefers-reduced-motion:reduce){
  .swx-first .hero--challenge .hero__char,
  .swx-first .hero--challenge .hero__img,
  .swx-first .hero--challenge .hero__img img{
    animation:none !important; opacity:1; transform:none;
  }
}

/* =========================
   共通パディング（各セクション内側）
   ========================= */
.swx-first .highlights,
.swx-first .value,
.swx-first .story,
.swx-first .pricing-logic,
.swx-first .compare,
.swx-first .fit,
.swx-first .steps,
.swx-first .faq,
/* .swx-first .closing{ padding: clamp(36px, 6vw, 72px); } */
.swx-first .closing{ text-align:center; }
.swx-first .cta-wrap{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:10px; }

/* =========================
   Light Theme
   ========================= */
.swx-first.theme-light{
  --bg:#FFD400;
  --text:#1E2438;
  --muted:#556086;
  --border:rgba(30,36,56,.12);
  --shadow:0 8px 28px rgba(16,22,43,.16);
  --brand:#FFD400; --brand-ink:#1f1f1f;
}
.swx-first.theme-light .hero__lead,.swx-first.theme-light .note{
  color: color-mix(in oklab, var(--text) 75%, #0000);
}

/* =========================================
   NOTE:
   - セクションを「カード化」するスタイルと
     テープ（::before）は削除しました。
   - 代わりに “内側のカード” にテープを付与します。
   ========================================= */

/* =========================
   Section Kicker / Cards
   ========================= */
.swx-first .sec-kicker{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:999px;
  background: color-mix(in oklab, var(--brand) 18%, #fff);
  color:#1f1f1f; font-weight:800; font-size:12px; letter-spacing:.06em;
  box-shadow:0 2px 10px rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.6);
  margin:0 0 14px;
}
.swx-first .sec-kicker svg{ width:14px; height:14px; }

.swx-first .card{
  position:relative;
  border-radius:24px;
  background: linear-gradient(145deg, #fff, #f9fbff);
  border:1px solid rgba(15,23,42,.08);
  box-shadow: var(--shadow-md);
  transition: transform .25s ease, box-shadow .25s ease;
  overflow: visible; /* ← テープがはみ出せるように */
}
.swx-first .card:hover{ transform: translateY(-6px); box-shadow: 0 16px 38px rgba(15,23,42,.16); }

/* === セロハンテープ（カード用） === */
.swx-first .card--taped::before{
  --tape-w: clamp(120px, 38%, 180px);
  --tape-h: clamp(18px, 3.2vw, 26px);
  --tape-edge: rgba(120, 90, 20, .22);
  content:"";
  position:absolute;
  top: calc(-1 * var(--tape-h) + 8px);
  left:50%;
  transform: translateX(-50%) rotate(-5.5deg);
  width:var(--tape-w); height:var(--tape-h);
  pointer-events:none; z-index:3;
  background:
    linear-gradient(135deg, rgba(255,255,255,.35), rgba(255,255,255,0) 45%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.18) 0 10px, rgba(255,255,255,0) 10px 20px),
    var(--bg, #FFD400);
  border:1px solid var(--tape-edge); border-radius: 4px;
  box-shadow: inset 0 1px 2px rgba(255,255,255,.45), inset 0 -10px 16px rgba(0,0,0,.09), 0 10px 22px rgba(0,0,0,.18);
  mix-blend-mode:multiply; backdrop-filter: blur(.4px);
}
/* 交互に角度を変えて“貼った感”を強める */
.swx-first .card--taped:nth-of-type(even)::before{ transform: translateX(-50%) rotate(4.5deg); }
@media (max-width: 767.98px){
  .swx-first .card--taped::before{ transform: translateX(-50%) rotate(-3deg); }
}

/* オプション：左右貼り（必要なら .card--taped.-left / .-right を付与） */
.swx-first .card--taped.-left::before{ left: 22%; transform: rotate(-6deg); }
.swx-first .card--taped.-right::before{ left: 78%; transform: rotate(6deg); }

/* =========================
   簡易グリッド（保険）
   ========================= */
.swx-first .swx-grid.grid-3{ display:grid; gap:clamp(12px,1.6vw,18px); grid-template-columns:1fr; }
@media (min-width:820px){ .swx-first .swx-grid.grid-3{ grid-template-columns:repeat(3,1fr); } }
.swx-first .swx-grid.grid-2{ display:grid; gap:clamp(12px,1.6vw,18px); grid-template-columns:1fr; }
@media (min-width:820px){ .swx-first .swx-grid.grid-2{ grid-template-columns:repeat(2,1fr); } }

/* =========================
   Highlights
   ========================= */
.swx-first .highlights .pill-3{
  list-style:none; margin:0; padding:0;
  display:grid; gap:clamp(14px,1.8vw,22px);
  grid-template-columns: 64px 1fr;
}
@media (min-width:768px){ .swx-first .highlights .pill-3{ grid-template-columns: repeat(3,1fr); } }
.swx-first .highlights .pill-3 li{
  position:relative; padding:22px 22px 18px; border-radius:18px;
  background: linear-gradient(180deg, #fff, #fffef7);
  border:1px dashed rgba(0,0,0,.08);
  box-shadow: 0 10px 24px rgba(0,0,0,.08), 0 2px 0 0 rgba(0,0,0,.05) inset;
  transform: rotate(-.2deg);
}
.swx-first .highlights .pill-3 li::before{
  content:""; position:absolute; left:50%; top:-12px; transform:translateX(-50%) rotate(-4deg);
  width:110px; height:22px; border-radius:4px;
  background: linear-gradient(135deg, rgba(255,255,255,.5), transparent), var(--brand);
  border:1px solid rgba(0,0,0,.08);
  box-shadow: inset 0 1px 2px rgba(255,255,255,.6), 0 6px 12px rgba(0,0,0,.16);
}
.swx-first .highlights h3{ margin:0 0 .35em; font-size: clamp(16px,1.8vw,20px); font-weight:900; letter-spacing:.02em; }
.swx-first .highlights p{ color:#41485f; line-height:1.8; }

/* =========================
   Value
   ========================= */
.swx-first .value{
  background: repeating-linear-gradient(135deg, rgba(255,212,0,.10) 0 14px, rgba(255,212,0,0) 14px 28px);
  border-radius:8px;
}
.swx-first .value .card{ background: linear-gradient(160deg, #fff, #f7fbff); }
.swx-first .value .card .card-icon{
  background: color-mix(in oklab, var(--brand) 18%, #fff); color:#111;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}

/* =========================
   Story
   ========================= */
.swx-first .story{ position:relative; overflow:hidden; isolation:isolate; }
/* .swx-first .story::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.85)),
    var(--story-bg, url('../../img/bg/warehouse-hero.webp'));
  background-size: cover; background-position:center;
  filter: saturate(1.05);
} */
.swx-first .story .swx-container{ position:relative; z-index:1; }
.swx-first .story .lead{ font-size:clamp(16px,2vw,20px); line-height:1.9; color:#1b2038; font-weight:600; }

/* ===== STORY (minimal) — 画像80%右寄せ / ウォーターマーク=左上・右上がり / テキスト=左下 ===== */



/* 行リスト：大きめの行間とセクションの上下余白 */
.swx-first .problem-list{
  list-style:none; padding:0; 
  margin: clamp(72px,10vw,160px) 0 clamp(80px,12vw,200px);
  display:grid; gap: clamp(72px,10vw,180px);
}

/* 各行のカード（暗い背景 / 内側パディングなし） */
.swx-first .problem-item{
  /* トークン（必要なものだけ） */
  --img-w: 80%;
  --aspect: 1.6/1;             /* 縦感を出す（PC） */
  --panel-w-pc: 40%;
  --panel-w-tab: 50%;
  --lift: clamp(48px,9vw,180px);   /* テキストを上に持ち上げる量 */
  --overflow: clamp(16px,3vw,48px);/* 下方向のはみ出し（相殺用） */

  position: relative;
  background: var(--surfacef, #10162b);
  border-radius: var(--radius,16px);
  padding: 0;                               /* 内側余白ゼロ */
  margin-bottom: var(--overflow);           /* はみ出し相殺は margin で処理 */
  isolation: isolate;
}

/* 背景画像（右寄せ80%） */
.swx-first .problem-item::before{
  content:""; display:block;
  width: var(--img-w); margin-left:auto;    /* 右寄せ */
  aspect-ratio: var(--aspect);
  background: var(--bg-img) center/cover no-repeat;
  opacity: var(--bg-opacity, 1);
  border-radius: inherit;
  filter: grayscale(100%) contrast(1.1) brightness(.98);
}

/* ウォーターマーク：画像エリアの左上に固定（全行同じ） */
.swx-first .problem-item .wm{
  position:absolute;
  top: 110px; left: 24px; /* 画像左端 + 余白 */
  transform: rotate(-12deg); transform-origin: 0 0;
  font-weight:900; line-height:1;
  font-size: clamp(36px,8vw,120px);
  color: var(--brand, #FFD400);
  -webkit-text-stroke: 1.2px rgba(0,0,0,.42);
  text-shadow: 0 2px 10px rgba(0,0,0,.40);
  pointer-events:none; user-select:none;
  z-index:2;                                  /* 画像の上、テキストの下でもOK */
}

/* テキスト領域：背景なし・左寄せ・明るい文字、左下に配置（上に持ち上げ） */
.swx-first .problem-item .body{
  position:absolute;
  left: clamp(12px,2vw,20px);
  bottom: calc(-1 * var(--overflow) + var(--lift));
  width: min(var(--panel-w-pc), 640px);
  background: none;
  text-align: left;
  color: var(--surface-2, #fff);
  text-shadow: 0 2px 8px rgba(0,0,0,.28);
  z-index:3;
}

/* タイポ（少し大きめ） */
.swx-first .problem-item .body .title{
  margin:0 0 .5em;
  font-weight:800;
  font-size: clamp(22px,2.2vw,30px);
  letter-spacing:.02em;
}
.swx-first .problem-item .body p{
  margin:0 0 .7em;
  font-size: clamp(16px,1.8vw,22px);
  line-height:1.75;
}
.swx-first .problem-item .body p.more{ opacity:.95; }

/* Tablet：画像比率をやや縦寄り、テキスト幅50% */
@media (min-width:768px) and (max-width:1023.98px){
  .swx-first .problem-item{ --aspect: 1.4/1; }
  .swx-first .problem-item .body{ width:min(var(--panel-w-tab), 560px); }
}

/* Mobile：縦積み（必要ならWMを非表示） */
@media (max-width:767.98px){
  .swx-first .problem-item::before{ width:100%; margin:0; aspect-ratio: 4/3; }
  .swx-first .problem-item .wm{ display:none; }
  .swx-first .problem-item .body{
    position:static; width:auto; 
    margin: 0 clamp(12px,4vw,16px);
  }
}

/* 画像URLの割当（そのまま利用） */
.swx-first .problem-item.bg-hands{ --bg-img:url("../../img/story/hands.webp"); --bg-opacity:1; }
.swx-first .problem-item.bg-aisle{ --bg-img:url("../../img/story/aisle.webp"); --bg-opacity:1; }
.swx-first .problem-item.bg-cart { --bg-img:url("../../img/story/cart.webp");  --bg-opacity:1; }

/* === Story: スライドイン（画像→右から / テキスト→下から） =================== */
/* トークン（距離や時間） */
.swx-first .problem-item{
  --slide-x: clamp(32px, 8vw, 160px); /* 画像の横移動量 */
  --slide-y: clamp(24px, 6vw, 120px); /* テキストの縦移動量 */
  --dur-img: .9s;
  --dur-txt: .8s;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* 初期状態：非表示＆オフスクリーン（JSが .has-anim を付けた時だけ有効） */
.swx-first.has-anim .problem-item::before{
  opacity: 0;
  transform: translate3d(var(--slide-x), 0, 0); /* 右外から */
  transition: transform var(--dur-img) var(--ease), opacity .6s ease-out;
  will-change: transform, opacity;
}
.swx-first.has-anim .problem-item .body{
  opacity: 0;
  transform: translate3d(0, var(--slide-y), 0); /* 下から */
  transition: transform var(--dur-txt) var(--ease) .12s, opacity .6s ease-out .12s;
  will-change: transform, opacity;
}

/* 画面に入ったら発火 */
.swx-first.has-anim .problem-item.inview::before{
  opacity: 1; transform: translate3d(0,0,0);
}
.swx-first.has-anim .problem-item.inview .body{
  opacity: 1; transform: translate3d(0,0,0);
}

/* アニメが苦手なユーザー向け：動きをオフに */
@media (prefers-reduced-motion: reduce){
  .swx-first.has-anim .problem-item::before,
  .swx-first.has-anim .problem-item .body{
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
}

/* === Mobile (≤767.98px): WMを表示・下め/大きめ・明るく、本文は白系＆太め === */
@media (max-width:767.98px){
  /* 画像は全幅（WMの基準も100%に） */
  .swx-first .problem-item{ --img-w: 100%; }

  /* ウォーターマーク */
  .swx-first .problem-item .wm{
    display: block !important;                 /* 以前の非表示を打消し */
    top:  clamp(32px, 12vw, 112px);            /* 位置：やや下げる */
    left: clamp(12px,  5vw,  28px);
    font-size: clamp(28px, 13vw, 54px);        /* 文字：やや大きめ */
    color: var(--brand, #FFD400);              /* PC同等の明るさ */
    font-weight: 900;
    -webkit-text-stroke: 1.2px rgba(0,0,0,.45);
    text-shadow: 0 3px 12px rgba(0,0,0,.45);
    z-index: 2;
  }

  /* テキスト領域（背景なし前提） */
  .swx-first .problem-item .body{
    color: var(--surface-2, #fff);             /* 明るい文字色 */
    text-align: left;
  }
  .swx-first .problem-item .body .title{ font-weight: 900; }
  .swx-first .problem-item .body p{ font-weight: 600; }
}





/* “放置すると” 三角バナー */
.sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.swx-first .risk-arrow{
  --arrowBg1:#FFD400; --arrowBg2:#FFB200; --arrowShade:rgba(0,0,0,.16);
  width:min(920px,96%); margin:16px auto 14px; min-height:clamp(140px,22vw,260px);
  display:grid; place-items:center; color:#111; font-weight:900; text-align:center; letter-spacing:.08em;
  clip-path:polygon(50% 100%, 0 0, 100% 0);
  background:linear-gradient(180deg, var(--arrowBg1), var(--arrowBg2));
  filter:drop-shadow(0 10px 18px var(--arrowShade));
  position:relative; isolation:isolate; z-index:10; animation:arrowDrop .9s cubic-bezier(.2,.9,.2,1) both;
}
.swx-first .risk-arrow::before{
  content:""; position:absolute; inset:0; clip-path:inherit;
  background:
    radial-gradient(120% 70% at 50% 35%, rgba(255,255,255,.45), transparent 65%),
    radial-gradient(120% 80% at 50% 60%, rgba(0,0,0,.08), transparent 70%);
  animation:glowPulse 5.2s ease-in-out .6s infinite;
}
.swx-first .risk-arrow__label{ position:relative; z-index:1; font-size:clamp(22px,4.8vw,44px); line-height:1.1; text-shadow:0 2px 0 rgba(255,255,255,.55); }
.swx-first .risk-arrow__label::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(75deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
  transform:translateX(-120%); mix-blend-mode:screen; animation:sheen 1.8s ease-in-out 1.2s 1 both;
}
@keyframes arrowDrop{ 0%{ transform:translateY(-32px) scale(.96); opacity:0;} 60%{ transform:translateY(4px) scale(1.02); opacity:1;} 100%{ transform:none; } }
@keyframes glowPulse{ 0%,100%{ opacity:.45; transform:scale(1);} 50%{ opacity:.70; transform:scale(1.015);} }
@keyframes sheen{ 0%{ transform:translateX(-120%);} 100%{ transform:translateX(120%);} }
@media (prefers-reduced-motion:reduce){
  .swx-first .risk-arrow, .swx-first .risk-arrow::before, .swx-first .risk-arrow__label::after{ animation:none !important; }
}

/* 警告コールアウト */
/* .swx-first .risk-callout{
  margin:14px 0 22px; border-radius:16px;
  background:var(--surface-brand-soft);
  box-shadow:0 6px 16px rgba(0,0,0,.06), inset 0 0 0 1px rgba(0,0,0,.04);
  overflow:hidden; position:relative; z-index:1;
} */
.swx-first .risk-head{ display:flex; align-items:center; gap:10px; padding:14px 18px; background:linear-gradient(180deg, color-mix(in oklab, #FFD400 26%, white), transparent); border-bottom:1px solid rgba(0,0,0,.05); }
.swx-first .risk-icon{ inline-size:22px; block-size:22px; flex:0 0 22px; border-radius:6px; background:#FFD400; position:relative; box-shadow:0 2px 6px rgba(0,0,0,.15); }
.swx-first .risk-icon::before{ content:"!"; position:absolute; inset:0; color:#111; font-weight:900; font-size:14px; display:grid; place-items:center; }
.swx-first .risk-head strong{ font-weight:900; }
.swx-first .risk-tag{ margin-left:auto; font-size:12px; font-weight:700; padding:6px 10px; border-radius:999px; background:#111; color:#fff; }

.swx-first .risk-grid{ display:grid; gap:12px; padding:14px 16px 6px; }
@media (min-width:720px){ .swx-first .risk-grid{ grid-template-columns:repeat(3,1fr); gap:14px; } }
.swx-first .risk-item{ position:relative; padding:12px 12px 30px; border-radius:12px; background:color-mix(in oklab, white 80%, transparent); box-shadow:inset 0 0 0 1px rgba(0,0,0,.04); }
.swx-first .risk-item h4{ margin:0 0 6px; font-weight:900; font-size:clamp(14px,1.9vw,16px); }
.swx-first .risk-item p{ margin:0; line-height:1.75; color:color-mix(in oklab, var(--text,#111) 82%, transparent); }
.swx-first .chip{ position:absolute; right:10px; bottom:8px; font-size:12px; font-weight:800; letter-spacing:.02em; padding:6px 10px; border-radius:999px; background:#eef2ff; color:#1e2a78; box-shadow:0 2px 6px rgba(0,0,0,.06); }
.swx-first .chip-warn{ background:#FFF4D6; color:#7a5a00; }
.swx-first .chip-neg{  background:#FFE5E5; color:#7a1e1e; }
.swx-first .risk-foot{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; padding:10px 16px 16px; }
.swx-first .risk-foot p{ margin:0; font-weight:600; }
.swx-first .risk-foot .btn{ margin-left:auto; padding:10px 14px; border-radius:12px; }

/* =========================
   Pricing Logic
   ========================= */
.swx-first .logic-box{
  border-radius:18px; padding:18px; border:1px solid rgba(0,0,0,.08);
  background: #fff;
  text-align: left;
}
.swx-first .logic-box + .logic-box{ margin-top:12px; }
.swx-first .pricing-logic{ position: relative; isolation: isolate; counter-reset: pl; }
.swx-first .pricing-logic::before{
  content:""; position:absolute; inset:-8% -6% auto -6%; height:48%;
  background:
    radial-gradient(100% 60% at 18% 35%, color-mix(in oklab, var(--brand) 14%, transparent) 0, transparent 70%),
    radial-gradient(80% 50% at 82% 40%, color-mix(in oklab, var(--brand) 12%, transparent) 0, transparent 65%);
  filter: blur(12px); opacity:.45; z-index:-1; pointer-events:none;
}
.swx-first .pricing-logic .logic-box{
  position: relative; padding: 18px clamp(16px, 2.2vw, 22px);
  border-radius: 16px; background: linear-gradient(160deg, #fff, #fffaf0);
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 10px 24px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.8);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.swx-first .pricing-logic .logic-box:hover{ transform: translateY(-4px); box-shadow: 0 16px 36px rgba(15,23,42,.12); border-color: color-mix(in oklab, var(--brand) 30%, rgba(15,23,42,.10)); }
.swx-first .pricing-logic .logic-box::before{
  content:""; position:absolute; inset:0 auto 0 0; width:4px; border-radius:16px 0 0 16px;
  background: linear-gradient(180deg, var(--brand), #ffe27a); opacity:.85;
}
.swx-first .pricing-logic .logic-title{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 .45em; font-weight:900; }
.swx-first .pricing-logic .logic-title::before{
  counter-increment: pl; content: counter(pl);
  display:grid; place-items:center; inline-size:36px; block-size:36px; border-radius:12px;
  background: radial-gradient(120% 100% at 30% 20%, rgba(255,255,255,.7), transparent 60%), linear-gradient(180deg, var(--brand), #ffcc00);
  color:#1c1c1c; font-weight:900; box-shadow:0 6px 14px rgba(15,23,42,.12), inset 0 1px 0 rgba(255,255,255,.8); margin-right:8px;
}
.swx-first .pricing-logic .logic-bullets{ margin:0; padding:0; list-style:none; }
.swx-first .pricing-logic .logic-bullets li{
  position:relative; padding-left:1.5em; line-height:1.85; color:#41485f;
}
.swx-first .pricing-logic .logic-bullets li + li{ margin-top:.25em; }
.swx-first .pricing-logic .logic-bullets li::before{
  content:""; position:absolute; left:.2em; top:.7em; width:.6em; height:.3em;
  border: .18em solid color-mix(in oklab, var(--brand) 75%, #a87400); border-top:0; border-right:0; transform: rotate(-45deg);
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.6));
}
.swx-first .pricing-logic .logic-bullets .price-note{ margin-top: .45em; font-weight: 800; color: #111; }
.swx-first .pricing-logic .price-tag{
  margin-left:auto; display:inline-flex; align-items:center; gap:.4em; padding:.35em .7em; border-radius:999px; font-weight:800; font-size:13px;
  background: linear-gradient(180deg, #fff6bf, #ffe98f); color:#1e1e1e; border:1px solid rgba(0,0,0,.08); box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}

/* Guardrails & Easy-start (見出し装飾) */
.logic-guardrails {
  margin-top: 24px;
}
.swx-first .logic-guardrails > h3,
.swx-first .easy-start > h3{
  position: relative; padding-left: 44px; margin: clamp(18px, 3.2vw, 30px) 0 clamp(22px, 3.4vw, 34px);
  font-weight: 900; letter-spacing: .02em; scroll-margin-top: 80px;
}
.swx-first .logic-guardrails > h3::before,
.swx-first .easy-start > h3::before{
  content:""; position:absolute; left:0; top:50%; transform: translateY(-50%) rotate(-6deg);
  width: 28px; height: 28px; border-radius: 9px;
  background: radial-gradient(120% 100% at 30% 20%, rgba(255,255,255,.7), transparent 60%), linear-gradient(180deg, var(--brand), #ffcc00);
  box-shadow: 0 6px 14px rgba(15,23,42,.12), inset 0 1px 0 rgba(255,255,255,.85);
}
.swx-first .logic-guardrails > h3::after,
.swx-first .easy-start > h3::after{
  content:""; position:absolute; left:44px; right:0; bottom:-14px;
  height:6px; border-radius:999px; background: linear-gradient(90deg, color-mix(in oklab, var(--brand) 55%, #fff), transparent 70%); opacity:.9;
}

.swx-first .logic-guardrails .guardrails{ display:grid; gap:14px; grid-template-columns:1fr; margin-top: clamp(6px, 1.2vw, 60px); }
@media (min-width:820px){ .swx-first .logic-guardrails .guardrails{ grid-template-columns:1fr 1fr; } }
.swx-first .logic-guardrails .rail{
  border-radius:16px; padding:18px 20px; background:#fff; border:1px solid rgba(15,23,42,.08);
  box-shadow:0 10px 24px rgba(15,23,42,.06), inset 0 1px 0 rgba(255,255,255,.8);
}
.swx-first .logic-guardrails .rail h4{ margin:0 0 .5em; display:flex; align-items:center; gap:.6em; font-weight:900; }
.swx-first .logic-guardrails .rail .badge{
  display:grid; place-items:center; inline-size:28px; block-size:28px; border-radius:9px; font-weight:900; color:#1c1c1c; background:#ffe37a;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}
.swx-first .logic-guardrails .rail.ok{ background:linear-gradient(160deg,#fff,#f7fff1); }
.swx-first .logic-guardrails .rail.ng{ background:linear-gradient(160deg,#fff,#fff4f4); }
.swx-first .logic-guardrails .rail.ok .badge{ background: color-mix(in oklab, #38b000 30%, #fff59d); }
.swx-first .logic-guardrails .rail.ng .badge{ background: color-mix(in oklab, #ef233c 28%, #fff3d4); }
.swx-first .logic-guardrails .list{ margin:0; padding-left:1.2em; color:#41485f; line-height:1.85; }
.swx-first .logic-guardrails .list li + li{ margin-top:.12em; }

.swx-first .easy-start{ --item-gap: clamp(14px, 2vw, 18px); margin-top: clamp(16px, 2.6vw, 36px); }
.swx-first .easy-start .stamp-list{ list-style:none; margin:10px 0 14px; padding:0; display:grid; gap: var(--item-gap); grid-template-columns: 1fr; }
@media (min-width: 820px){ .swx-first .easy-start .stamp-list{ grid-template-columns: repeat(3, 1fr); } }
.swx-first .easy-start .stamp{
  position:relative; padding: 20px 18px; text-align:center;
  border:2px dashed color-mix(in oklab, var(--brand) 35%, #caa800);
  border-radius:18px; background:linear-gradient(180deg,#fff,#fff9d9);
  box-shadow:0 10px 22px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.8);
  transform: rotate(-.6deg);
}
.swx-first .easy-start .stamp .title{ display:block; font-weight:900; font-size:clamp(15px,1.8vw,18px); letter-spacing:.04em; margin-bottom:4px; }
.swx-first .easy-start .stamp small{ display:block; margin-top:4px; color:#5a627c; }
.swx-first .easy-start .comfort-strip{
  margin-top: calc(var(--item-gap) + 4px); border-radius:14px; padding:14px 16px;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background: linear-gradient(90deg, #fff8bf, #fff3d0);
  border:1px solid rgba(15,23,42,.08);
  box-shadow:0 10px 24px rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.8);
}
.swx-first .easy-start .comfort-strip p{ margin:0; color:#2b2f44; font-weight:600; }
.swx-first .easy-start .comfort-strip .btn{ margin-left:auto; }

/* =========================
   Compare
   ========================= */
.swx-first .compare .compare-wrap{ display:grid; gap:clamp(16px,2vw,24px); grid-template-columns: 1fr; }
@media (min-width:900px){ .swx-first .compare .compare-wrap{ grid-template-columns: repeat(2,1fr); } }
.swx-first .compare .card{
  border-radius:18px; padding:18px; background:#fff; border:1px solid rgba(0,0,0,.08);
  box-shadow: var(--shadow-md);
}
.swx-first .compare .card h3{ margin:.2em 0 .4em; font-size: clamp(16px,1.8vw,20px); }
.swx-first .compare ul{ margin:0; padding-left:1.1em; color:#41485f; }
.swx-first .compare .card.-pros{ border-left:4px solid var(--brand); }
.swx-first .compare .card.-cons{ border-left:4px solid #e11d48; }

/* =========================
   Fit
   ========================= */
.swx-first .fit .grid-2 .card{ min-height: 100%; }
.swx-first .fit .card.-yes{ border-left:4px solid var(--brand); }
.swx-first .fit .card.-no{  border-left:4px solid #64748b; background:linear-gradient(180deg,#fff,#fafafa); }

/* =========================
   Steps
   ========================= */
.swx-first .steps .timeline{ position:relative; padding-left:28px; text-align: left;}
.swx-first .steps .timeline::before{
  content:""; position:absolute; left:12px; top:0; bottom:0; width:4px;
  background: linear-gradient(180deg, var(--brand), #ffe27a); border-radius:999px;
}
.swx-first .steps .step{
  position:relative; margin:0 0 24px; padding:16px 16px 14px 18px;
  background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:16px; box-shadow:var(--shadow-sm);
}
.swx-first .steps .step .dot{
  position:absolute; left:-2px; top:18px; width:22px; height:22px; border-radius:999px;
  background:#fff; border:4px solid var(--brand); box-shadow:0 4px 10px rgba(0,0,0,.12);
}
.swx-first .steps .step .num{
  font-weight:900; font-size:14px; padding:3px 8px; border-radius:999px;
  background: color-mix(in oklab, var(--brand) 20%, #fff);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
  display:inline-block; margin-bottom:6px;
}
.swx-first .steps .step h4{ margin:.1em 0 .25em; font-size: clamp(15px,1.6vw,18px); }
.swx-first .steps .step p{ margin:0; color:#41485f; }

/* =========================
   FAQ
   ========================= */
.swx-first .faq details{
  background:#fff; border:1px dashed rgba(0,0,0,.12); border-radius:14px;
  padding:14px 16px; transition:background .25s ease, border-color .25s ease;
}
.swx-first .faq details + details{ margin-top:10px; }
.swx-first .faq details[open]{ background: var(--surface-brand-soft); border-color: color-mix(in oklab, var(--brand) 40%, rgba(0,0,0,.12)); }
.swx-first .faq summary{
  cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-weight:800; color:#111;
}
.swx-first .faq summary::-webkit-details-marker{ display:none; }
.swx-first .faq .chev{ width:18px; height:18px; transition: transform .25s ease; }
.swx-first .faq details[open] .chev{ transform: rotate(90deg); }
.swx-first .faq .answer{ margin:10px 0 0; color:#3a4260; line-height:1.8; }

/* =========================
   Closing
   ========================= */
.swx-first .closing{ background: #FFFBE6; text-align: center; }
.swx-first .closing .sec-title{ margin: .2em 0 .1em; }
.swx-first .closing .note{ color: color-mix(in oklab, var(--text) 75%, transparent); }
.swx-first .closing .cta-wrap .btn{ padding: 12px 18px; border-radius: 14px; }

/* =========================
   対応エリア (.service-area)
   ========================= */
.service-area{
  position: relative; overflow: hidden;
  --area-accent: var(--accent, #FFD400);
  --area-grad-start: color-mix(in srgb, var(--area-accent) 26%, #fff);
  --area-grad-end:   #ffffff;
  --area-tilt: 10deg;
  background: linear-gradient(180deg, var(--area-grad-start) 0%, var(--area-grad-end) 100%);
}
.service-area .swx-sec-title{ display:flex; align-items:center; gap:.6em; }
.service-area .swx-sec-title::after{
  content:"AREA"; font-size:.8rem; letter-spacing:.1em;
  padding:.2em .5em; border-radius:999px; background:color-mix(in srgb, var(--area-accent) 10%, transparent); color:#111; opacity:.85;
}
.service-area .area-banner{
  margin-top:16px; padding:20px 20px 18px;
  border:1px solid color-mix(in srgb, var(--area-accent) 35%, #0000);
  border-radius:16px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--area-accent) 8%, #fff) 0%, #fff 100%);
  box-shadow: 0 6px 24px rgba(0,0,0,.06);
}
.service-area .area-badge{
  display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.12em;
  padding:.25em .6em; border-radius:999px; margin-bottom:10px; background:var(--area-accent); color:#111;
}
.service-area .area-title{ font-size: clamp(22px, 3.2vw, 28px); line-height:1.35; margin:0 0 6px; font-weight:800; }
.service-area .area-title b{ text-decoration: underline; text-underline-offset: .18em; }
.service-area .area-desc{ margin:0; color:#333; }

.service-area .area-grid{ display:grid; gap:16px; margin-top:18px; grid-template-columns: 1fr; }
@media (min-width: 768px){ .service-area .area-grid{ grid-template-columns: repeat(3, 1fr); } }
.service-area .area-card{ border:1px solid rgba(0,0,0,.08); border-radius:14px; padding:16px 16px 14px; background:#fff; box-shadow: 0 4px 14px rgba(0,0,0,.04); }
.service-area .area-card-title{ font-size:1rem; margin:0 0 .4em; line-height:1.4; font-weight:700; }
.service-area .area-chip{
  display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.06em;
  padding:.16em .5em; border-radius:999px; margin-right:.5em; background: color-mix(in srgb, var(--area-accent) 12%, #fff); color:#111; border:1px solid color-mix(in srgb, var(--area-accent) 35%, #fff);
}
.service-area .area-chip--ng{
  background: color-mix(in srgb, #ff5a5a 20%, #fff);
  border-color: color-mix(in srgb, #ff5a5a 40%, #fff);
}
.service-area .area-list{ margin:0; padding-left:1.2em; color:#333; }
.service-area .area-list li{ margin:.2em 0; }

.service-area .area-qa{ margin-top:16px; border-top:1px dashed rgba(0,0,0,.08); padding-top:14px; }
.service-area .area-qa dl{ margin:0; }
.service-area .qa{ display:block; margin:10px 0; }
.service-area .qa dt{ font-weight:700; }
.service-area .qa dd{ margin:.2em 0 0 0; color:#333; }
.service-area .area-note{ margin:10px 0 0; font-size:.9rem; color:#555; }
.service-area .area-note a{ color:inherit; text-decoration: underline; text-underline-offset: .18em; }

/* 右上の「神奈川」飾り */
.service-area::after{
  content: "神奈川";
  position: absolute;
  top: clamp(12px, 3.6vw, 80px);
  right: clamp(12px, 2.2vw, 32px);
  font-size: clamp(56px, 13vw, 180px);
  font-weight: 800; line-height: 1; letter-spacing: .12em; white-space: nowrap;
  color: color-mix(in srgb, var(--area-accent) 55%, transparent); opacity: .60;
  transform: rotate(var(--area-tilt)); transform-origin: 100% 0%;
  pointer-events: none; user-select: none; z-index: 0;
  text-shadow: 0 1px 0 rgba(255,255,255,.60), 0 0 22px rgba(255,255,255,.28);
}
.service-area .swx-container,
.service-area .area-banner,
.service-area .area-grid,
.service-area .area-qa{ position: relative; z-index: 1; }

@media (max-width: 1023.98px){
  .service-area{ --area-tilt: 8deg; }
  .service-area::after{
    font-size: clamp(48px, 18vw, 150px);
    top: clamp(10px, 2vw, 20px);
    right: clamp(10px, 2.5vw, 24px);
    opacity: .20;
  }
}
@media (max-width: 767.98px){
  .service-area{ --area-tilt: 6deg; }
  .service-area::after{
    font-size: clamp(40px, 24vw, 120px);
    top: 10px; right: 10px; opacity: .22;
  }
}

/* =========================
   固定背景（Ambient BG）
   ========================= */
#ambient-bg{
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none;
  opacity: 0; transform: translateY(12px);
  transition: opacity .45s ease, transform .6s ease;

  /* リピート防止＆エッジまで埋める（タブレット改善含む） */
  background:
    var(--bg-sp) center top / contain no-repeat,
    var(--bg-sp) center top / cover   no-repeat;
}
@media (min-width:768px){
  #ambient-bg{
    background:
      var(--bg-tab) center top / contain no-repeat,
      var(--bg-tab) center top / cover   no-repeat;
  }
}
@media (min-width:1200px){
  #ambient-bg{
    background:
      var(--bg-pc) center top / contain no-repeat,
      var(--bg-pc) center top / cover   no-repeat;
  }
}
body.bg-active #ambient-bg{ opacity: 1; transform: none; }

/* コンテンツは前面へ */
#swx-first, header, footer { position: relative; z-index: 1; }

/* =========================
   SP Hero overrides（重複排除版）
   ========================= */
@media (max-width: 767px){
  /* 「挑戦」：重なり解消＋拡大＋最前面 */
  .swx-first .hero--challenge .hero__text{
    letter-spacing: -40px;
    font-size: clamp(72px, 28vw, 240px);
    z-index: 4;
  }

  /* ヒーロー全体で横溢れをカット */
  .swx-first .hero--challenge{
    overflow-x: hidden;
  }

  /* 4枚の写真：サイズを統一（実幅固定） */
  .swx-first .hero--challenge :is(.hero__img, .hero__img--a, .hero__img--b, .hero__img--c, .hero__img--d){
    --imgW: min(48vw, 300px);
  }
  .swx-first .hero--challenge .hero__img img{
    width: var(--imgW);
    max-width: none;
    height: auto;
  }

  /* モバイルでは回転を無効化（角のはみ出し防止） */
  .swx-first .hero--challenge .hero__img--a,
  .swx-first .hero--challenge .hero__img--b,
  .swx-first .hero--challenge .hero__img--c,
  .swx-first .hero--challenge .hero__img--d{
    transform: none;
  }

  /* 位置取り（ご指定通り） */
  .swx-first .hero--challenge .hero__img--a{ inset: 20%  auto auto 0%; }
  .swx-first .hero--challenge .hero__img--c{ inset: 20%   0%  auto auto; }
  .swx-first .hero--challenge .hero__img--b{ inset: auto auto 10%  0%; }
  .swx-first .hero--challenge .hero__img--d{ inset: auto 0%  10%  auto; }
}

/* 初回特典（要点）: SPは1列表示に固定 */
@media (max-width: 767px){
  .swx-first .highlights .pill-3{
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 12px;
  }
  .swx-first .highlights .pill-3 > li{
    grid-column: 1 / -1;
    min-width: 0;
  }
}
/* ==== Commitment：フルブリードに戻す ==== */
.swx-first .commitment{
  --commit-bg:#0e1224;
  --commit-ink:#f2f6ff;
  --commit-muted:#c7cff2;
  background: var(--commit-bg);
  color: var(--commit-ink);
  padding: clamp(40px, 7vw, 120px) 0;
  position: relative;
  overflow: hidden;
}
.swx-first .commitment__inner{
  max-width:1100px;
  margin:0 auto;
  padding:0 clamp(16px,4vw,28px);
  position:relative;
  z-index:1;
}
.swx-first .commitment__title{
  margin:0 0 .6em;
  font-size:clamp(26px,3.6vw,38px);
  line-height:1.2;
  letter-spacing:.03em;
  font-weight:900;
  text-align:left;
  color:var(--commit-ink);
}
.swx-first .commitment__lead{
  margin:0 0 .9em;
  font-size:clamp(16px,2.1vw,20px);
  line-height:1.9;
  color:var(--commit-ink);
}
.swx-first .commitment__text{
  margin:0;
  font-size:clamp(15px,1.9vw,18px);
  line-height:1.95;
  color: color-mix(in oklab, var(--commit-ink) 85%, black);
}
.swx-first .commitment strong{ color:#FFD400; font-weight:800; }

/* 背景の巨大「挑戦」装飾 */
.swx-first .commitment__mark{
  position:absolute;
  top:-24px; left:-8px;
  font-size: clamp(120px, 22vw, 340px);
  line-height: 1;
  font-weight: 900;
  letter-spacing: .05em;
  color: rgba(255,255,255,.06);
  transform: rotate(-12deg);
  pointer-events:none;
  z-index:0;
  -webkit-text-stroke: 2px rgba(255,255,255,.08);
  text-shadow: 0 4px 16px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.06);
}
.swx-first .commitment__mark::after{
  content:"";
  position:absolute; left: 6%; top: 58%;
  width: clamp(160px, 26vw, 380px);
  height: clamp(18px, 3vw, 30px);
  background: radial-gradient(60% 120% at 50% 50%, rgba(255,212,0,.35), rgba(255,212,0,0));
  transform: rotate(-12deg);
  filter: blur(1px);
}
.swx-first .commitment__mark::before{
  content:"";
  position:absolute; left: 52%; top: 18%;
  width: clamp(80px, 10vw, 160px); height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.45), rgba(255,255,255,0));
  transform: rotate(18deg);
}
@media (max-width: 767.98px){
  .swx-first .commitment__mark{ opacity:.8; transform: rotate(-10deg) translateY(4px); }
  .swx-first .commitment__mark::after{ opacity:.7; }
}
/* ==== Section Title：グラデ背景＋余白 ==== */
.swx-first .sec-title{
  /* グラデの色味（必要に応じて調整可） */
  --title-grad-top: color-mix(in oklab, var(--brand) 36%, #fff);
  --title-grad-btm: color-mix(in oklab, var(--brand) 10%, #fff);
  background: linear-gradient(180deg, var(--title-grad-top), var(--title-grad-btm));
  padding: .5em .9em;                    /* 内側余白 */
  border-radius: 14px;                   /* 角丸 */
  box-shadow: 0 6px 18px rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.65);
  margin: 0 0 clamp(16px, 2.6vw, 28px);  /* 下マージンを強めに */
}

/* ロゴ付き見出しも幅ピッタリ＆横並び維持 */
.swx-first .sec-title--with-logo{
  display: inline-flex;                  /* 100%幅にならないように */
  align-items: center;
  gap: clamp(10px, 1.6vw, 16px);
}
/* ==== Pricing Logic：logic-title を差別化＆重なり解消 ==== */
.swx-first .pricing-logic .logic-title{
  position: relative;
  display: flex; align-items: center; gap: .6em;

  /* バッジの分だけ左に余白を確保（重なり防止） */
  padding: .65em .9em .65em 64px;

  /* sec-title と差別化：薄い紙帯＋斜めストライプ */
  background:
    linear-gradient(135deg, rgba(255,255,255,.55), rgba(255,255,255,0) 60%),
    repeating-linear-gradient(45deg, rgba(255,212,0,.07) 0 10px, rgba(255,212,0,0) 10px 20px),
    linear-gradient(180deg, #FFFDF2, #FFF5C9);
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 12px;
  box-shadow: 0 6px 14px rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.8);

  /* sec-title より少し広めに間を取る */
  margin: 0 0 .9em;
}

/* 番号バッジ：絶対配置で左に固定（文字と非接触） */
.swx-first .pricing-logic .logic-title::before{
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  margin-right: 0;                       /* 既存の余白は無効化 */
  inline-size: 36px; block-size: 36px;   /* 既存サイズを維持 */
  border-radius: 10px;                   /* sec-title と差別化して角丸変更 */
  display: grid; place-items: center;
  /* 既存の背景グラデは流用（そのままでOK） */
}

/* 右側の価格タグは右寄せ維持 */
.swx-first .pricing-logic .logic-title .price-tag{ margin-left: auto; }

/* SPは少しコンパクトに */
@media (max-width: 520px){
  .swx-first .pricing-logic .logic-title{
    padding: .55em .7em .55em 56px;
    border-radius: 10px;
  }
  .swx-first .pricing-logic .logic-title::before{
    inline-size: 32px; block-size: 32px; left: 12px;
  }
}
/* =========================
   Text visibility helpers
   ========================= */

/* 1) 文字組みの基本を整える（任意で併用） */
.swx-first .u-readable{
  margin-inline: auto;
  line-height: 1.9;
  letter-spacing: .01em;
  padding: .12em .25em;
  text-wrap: pretty;    /* 長い見出しの改行を程よく */
  color: color-mix(in oklab, var(--text) 92%, transparent);
  text-align: left;
}
.swx-first .u-readable :where(p,li){ margin: .55em 0; }
.swx-first .u-readable :where(h2,h3){ text-wrap: balance; }

/* 2) 紙っぽい読み物パネル（複数段落の塊に） */
.swx-first .text-panel{
  position: relative;
  max-width: min(80ch, 100%);
  margin: clamp(12px, 2vw, 18px) auto;
  padding: clamp(14px,1.6vw,18px) clamp(16px,2vw,22px);
  background: linear-gradient(180deg, #fff, #fffaf0);
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 14px;
  box-shadow: 0 8px 22px rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.8);
  text-align: left;
}
.swx-first .text-panel.-accent{           /* 左に色帯（強調版） */
  border-left: 6px solid var(--brand);
  background: linear-gradient(180deg, #fff, #fff9cc);
}
.swx-first .text-panel > :last-child{ margin-bottom: 0; }

/* 3) 帯スタイル（1〜2文を目立たせる・注意書きなど） */
.swx-first .text-band{
  display: block;
  margin: clamp(10px,1.6vw,14px) 0 clamp(14px,2vw,18px);
  padding: .7em 1em;
  font-weight: 800;
  color: #1a1a1a;
  background:
    linear-gradient(135deg, rgba(255,255,255,.55), transparent 60%),
    linear-gradient(90deg,
      color-mix(in oklab, var(--brand) 25%, #fff) 0%,
      #fff 70%);
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
  text-align: left;
}

/* 4) ノイズの強い背景上での“スポットライト” */
.swx-first .text-spotlight{
  position: relative; isolation: isolate;
  margin-inline: auto;
  text-align: left;
  padding: .08em .25em;
}
.swx-first .text-spotlight::before{
  content:"";
  position:absolute; inset:-8px;
  border-radius: 14px;
  background: rgba(255,255,255,.88);   /* 透過で後ろを落とす */
  backdrop-filter: blur(1.2px) saturate(1.02);
  box-shadow: 0 14px 36px rgba(0,0,0,.12);
  z-index: -1;
}

/* 5) インライン強調（文中の重要語に） */
.swx-first .hi{
  background: linear-gradient(180deg, #fff2a6 0%, #ffe36b 100%);
  padding: .08em .25em;
  border-radius: .35em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
  text-align: left;
}

/* 6) 小さめ脚注などを読みやすく */
.swx-first .text-note{
  font-size: .92em;
  color: color-mix(in oklab, var(--text) 70%, transparent);
  background: linear-gradient(180deg, #ffffff, #f6f8ff);
  border: 1px dashed rgba(15,23,42,.18);
  border-radius: 10px;
  padding: .6em .8em;
  display: block;
  margin: .6em auto 0;
  text-align: left;
}

/* 7) 余白ユーティリティ（必要に応じて） */
.swx-first .mb-lg{ margin-bottom: clamp(18px, 3vw, 28px) !important; text-align: left;}
.swx-first .mt-lg{ margin-top:    clamp(18px, 3vw, 28px) !important; }
/* 横スクロールの原因を解消 */
.swx-first .pricing-logic { position: relative; overflow-x: clip; }
/* clip未対応ブラウザ向けフォールバック */
@supports not (overflow: clip) {
  .swx-first .pricing-logic { overflow-x: hidden; }
}

.swx-first .pricing-logic::before{
  /* ← 横方向の -6% をやめる（左右0） */
  inset:-8% 0 auto 0;
  /* 見た目の“広がり”は変形で表現（レイアウトに影響しない） */
  transform: scaleX(1.12);
  transform-origin: center;
}