/* =========================================================
   SAITOWORKS / assets/css/pages/plan-a.css
   - Page-scoped styles for /plan-a
   - base.css のトークン・コンポーネントを前提に最小上書き
   ========================================================= */
.swx-page.-plan-a {
  --pad-y: clamp(36px, 6vw, 80px);
  --pad-tight: clamp(20px, 4vw, 40px);
  --radius: 16px;
  --shadow: 0 10px 30px rgba(0,0,0,.08);
}

/* ===== section rhythm ===== */
.swx-page.-plan-a .swx-section { padding: var(--pad-y) 0; }
.swx-page.-plan-a .swx-section.-tight { padding: var(--pad-tight) 0; }

/* 偶数セクションの薄黄背景（直下セクションのみに限定して副作用回避） */
.swx-page.-plan-a > .swx-section:nth-of-type(even) {
  background: var(--brand-50, #FFFBE6);
}

/* ===== titles & lead ===== */
.swx-page.-plan-a .swx-sec-title {
  margin: 0 0 clamp(12px, 2vw, 16px);
  letter-spacing: .01em;
  color: var(--ink, #1E2438);
}
.swx-page.-plan-a .swx-lead {
  margin-top: .5em;
  color: color-mix(in oklab, var(--ink, #1E2438) 85%, #000);
  opacity: .9;
  max-width: 56ch;
}

/* ===== HERO（見出し強め・本文読みやすく） ===== */
.swx-page.-plan-a #hero .swx-sec-title{
  font-size: clamp(22px, 3.6vw, 36px);
  line-height: 1.2;
}
.swx-page.-plan-a #hero .swx-lead{
  font-size: clamp(14px, 1.6vw, 16px);
  line-height: 1.9;
  margin-top: .8em;
}

/* === HERO: 高さUP＋スクリーンで可読性UP（背景は::afterに集約） === */
.swx-page.-plan-a #hero{
  position: relative;
  display: flex; align-items: center;
  min-height: clamp(380px, 60vh, 800px);
  padding-block: clamp(36px, 7vw, 84px);
  overflow: hidden;                 /* 拡大時のはみ出し防止 */
  background: none !important;      /* 本体には背景を持たせない */
}

/* セクション全面スクリーン（テキスト枠には背景を付けない） */
.swx-page.-plan-a #hero::before{
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.18) 40%, rgba(0,0,0,.06) 70%, rgba(0,0,0,0) 100%),
    linear-gradient(180deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,0) 60%);
  z-index: 1; /* 画像(::after)の上、テキストの下 */
}

/* テキスト前面・白文字＋ごく薄い影 */
.swx-page.-plan-a #hero .swx-container{ position: relative; z-index: 2; }
.swx-page.-plan-a #hero .swx-sec-title,
.swx-page.-plan-a #hero .swx-lead{
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}

/* ===== HERO 画像レイヤー（::after）＋ズーム ===== */
.swx-page.-plan-a #hero::after{
  content: "";
  position: absolute; inset: 0;
  z-index: 0;                        /* 最背面：画像 */
  background-repeat: no-repeat;
  background-position: 35% 50%;
  background-size: cover;

  /* モバイル初期画像 */
  background-image: image-set(
    url("/wp-content/themes/saitoworks-child/assets/img/hero/plan-a-sp.webp") type("image/webp") 1x,
    url("/wp-content/themes/saitoworks-child/assets/img/hero/plan-a-sp.webp") type("image/webp") 2x
  );

  /* ズーム（常時拡大>1.0で見切れ防止） */
  transform: scale(1.04);
  transform-origin: 40% 50%;
  animation: swxHeroZoomFast 14s ease-in-out infinite alternate;
  backface-visibility: hidden;
  will-change: transform;
}

/* 端末別の画像切替は ::after に適用 */
@media (min-width: 640px){
  .swx-page.-plan-a #hero::after{
    background-position: 38% 50%;
    background-image: image-set(
      url("/wp-content/themes/saitoworks-child/assets/img/hero/plan-a-tab.webp") type("image/webp") 1x,
      url("/wp-content/themes/saitoworks-child/assets/img/hero/plan-a-tab.webp") type("image/webp") 2x
    );
  }
}
@media (min-width: 1024px){
  .swx-page.-plan-a #hero::after{
    background-position: 40% 50%;
    background-image: image-set(
      url("/wp-content/themes/saitoworks-child/assets/img/hero/plan-a-pc.webp") type("image/webp") 1x,
      url("/wp-content/themes/saitoworks-child/assets/img/hero/plan-a-pc.webp") type("image/webp") 2x
    );
  }
}
@media (min-width: 1200px){
  .swx-page.-plan-a #hero::after{ transform-origin: 42% 50%; }
}

/* 1.04 ↔ 1.085 の往復。速度UP版 */
@keyframes swxHeroZoomFast{
  0%   { transform: scale(1.04); }
  100% { transform: scale(1.085); }
}

/* 省エネ配慮 */
@media (prefers-reduced-motion: reduce){
  .swx-page.-plan-a #hero::after{ animation: none; transform: scale(1.04); }
}



/* ===== lists ===== */
.swx-page.-plan-a .bullets {
  display: grid;
  gap: .75em;
  padding-left: 1.1em;
}
.swx-page.-plan-a .bullets li { line-height: 1.7; }

/* 「Aプランはこんな企業さまに」の視認性（丸マーカー） */
.swx-page.-plan-a #fit .bullets{ max-width: 56rem; }
.swx-page.-plan-a #fit .bullets li{
  position: relative; padding-left: 1.4em;
}
.swx-page.-plan-a #fit .bullets li::before{
  content: ""; position: absolute; left: 0; top: .55em;
  width: .6em; height: .6em; border-radius: 50%;
  background: var(--brand-400, #FFDE47);
  box-shadow: 0 0 0 2px #fff;
}

/* ===== cards & grid ===== */
.swx-page.-plan-a .swx-grid {
  display: grid;
  gap: clamp(12px, 2.4vw, 24px);
}
.swx-page.-plan-a .grid-2 { grid-template-columns: repeat(2,1fr); }
.swx-page.-plan-a .grid-3 { grid-template-columns: repeat(3,1fr); }
@media (max-width: 960px){
  .swx-page.-plan-a .grid-3 { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 640px){
  .swx-page.-plan-a .grid-2,
  .swx-page.-plan-a .grid-3 { grid-template-columns: 1fr; }
}
.swx-page.-plan-a .card {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(14px, 2.4vw, 22px);
}
.swx-page.-plan-a .card-title { margin: 0 0 .4em; font-weight: 800; }
.swx-page.-plan-a .card-text  { margin: 0; line-height: 1.7; }

/* 提供内容カード：高さそろえ＆本文トーン */
/* 提供メニュー セクション専用（#services-menu にだけ効く） */
#services-menu.swx-services{
  --gap: 24px;
  --radius: 14px;

  /* 彩り用ローカル・トークン（必要なら残す） */
  --hero-glow-left:  color-mix(in srgb, var(--brand-500) 22%, transparent);
  --hero-glow-right: color-mix(in srgb, var(--violet-600) 18%, transparent);
  --hero-overlay:    linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,.45));
  --card-shadow:     var(--shadow-md);
  --dot:             var(--gray-300);
  --dot-active:      var(--swx-main);

  /* セクションの上下余白（ヒーローには影響させない） */
  --pad-top: clamp(88px, 10vw, 160px);
  --pad-bottom: clamp(56px, 7vw, 104px);
  padding: var(--pad-top) 0 var(--pad-bottom);

  /* ★ 横スクロール起点の“数px外出し”を局所でクリップ（影は概ね維持） */
  overflow: clip;
}

/* ---- 提供メニュー：アイコンを「カード左上の角の上」にせり出し配置 ---- */
.-menus .cards > .card .icon{
  position: absolute;
  top: -25px;
  left: -32px;
  transform: translate(-14px, -14px); /* ← 角から外側へせり出す量 */
  width: 72px; 
  height: 72px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(100% 100% at 50% 0%, color-mix(in srgb, var(--brand-100) 70%, transparent) 0%, transparent 70%),
    var(--tint);                        /* brandのソフト背景 */
  box-shadow: var(--shadow-sm);
  outline: 2px solid color-mix(in srgb, var(--swx-main) 20%, transparent); /* ほんのりリング */
  outline-offset: 0;
  z-index: 1;
  margin: 0 !important;
}
/* ★ モバイルでは外出しを内側化（横スクロールの温床を排除） */
@media (max-width: 480px){
  .-menus .cards > .card .icon{
    top: -18px;
    left: 0;                   /* ← 0に揃える */
    transform: none;           /* ← 外出し解除 */
    width: 60px; height: 60px; border-radius: 14px;
  }
  .-menus .cards > .card .icon img{ width: 36px; height: 36px; }
}
/* ===== 提供メニュー（画像＋被せテキスト／交互／スクロールイン） ===== */
/* ===== 提供メニュー見出し（クラスは変更せず "おしゃれ&大きめ"） ===== */
.swx-services .swx-sec-title{
  position: relative;
  margin: 0 0 clamp(22px, 3vw, 32px);
  font-weight: 900;
  font-size: clamp(30px, 4.6vw, 58px);      /* ★ 大きめ */
  line-height: 1.06;
  letter-spacing: .01em;

  /* 黒〜濃グレーの微グラデ文字（黄帯の上で映える） */
  background: linear-gradient(90deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.75) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;                       /* グラデを文字色に */
}

/* 見出しの下に薄いアクセントバー（ブランド寄り） */
.swx-services .swx-sec-title::after{
  content:"";
  position: absolute;
  left: 0;
  bottom: -12px;
  width: clamp(120px, 18vw, 320px);
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--brand, #FFD400) 100%, transparent) 0%,
    color-mix(in srgb, var(--brand, #FFD400) 35%, #fff 65%) 100%
  );
  box-shadow: 0 4px 18px rgba(255,212,0,.35);  /* うっすら光らせる */
}

/* グラデ文字が好みでなければ、上の background-clip を消して次の1行だけ残せばOK */
/* .swx-services .swx-sec-title{ color:#111; } */

.svc-row{
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr; /* 画像をやや大きく */
  gap: clamp(16px, 3vw, 36px);
  align-items: center;
  margin: clamp(24px, 4vw, 52px) 0;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .55s cubic-bezier(.2,.8,.2,1), transform .55s cubic-bezier(.2,.8,.2,1);
}
.svc-row.is-inview{ opacity: 1; transform: none; }

.svc-row--alt{
  grid-template-columns: 0.9fr 1.1fr; /* 交互：右に画像 */
}
.svc-row--alt .svc-img{ order: 2; }
.svc-row--alt .svc-body{ order: 1; }

/* ウォーターマーク：特大・背面・薄め */
.svc-watermark{
  position: absolute;
  top: -16px;
  font-weight: 900;
  font-size: clamp(96px, 18vw, 280px);  /* ★ しっかり大きく */
  letter-spacing: .04em;
  line-height: 1;
  color: rgba(0,0,0,.10);
  user-select: none; pointer-events: none;
  z-index: 0;                        /* 画像・本文の下 */
  transform-origin: center;
  mix-blend-mode: multiply;
  filter: saturate(110%);
  transform: rotate(-16deg);
}
.svc-watermark--right{ right: -14px; }
.svc-watermark--left { left:  -14px; }

/* ★ スマホでは“外出し”をゼロに（横スクロールの主因を無効化） */
@media (max-width: 767.98px){
  .svc-watermark{
    top: -6px;
    font-size: clamp(52px, 20vw, 120px);
    color: rgba(0,0,0,.12);
  }
  .svc-watermark--right{ right: 0; }   /* ← 0に内側化 */
  .svc-watermark--left { left:  0; }   /* ← 0に内側化 */
}
/* Mobile: ウォーターマークを画像の上に（本文の下に） */
@media (max-width: 767.98px){
  .svc-row{ position: relative; } /* 念のため明示 */
  .svc-img{ z-index: 1; }         /* 一番下：画像 */
  .svc-watermark{ z-index: 2; }   /* 中：ウォーターマーク（画像より上） */
  .svc-body{ z-index: 3; }        /* 一番上：本文カード */
}

/* ---------- フルブリード黄帯：横溢れ対策 ---------- */
.swx-services--brand{
  position: relative;
  isolation: isolate;    /* 背面帯の重なり安定化 */
  z-index: 0;
  color: var(--brand-ink, #2b2b2b);

  /* ★ 背景帯の“vw使用”での僅かな横溢れを親で吸収 */
  overflow: clip;
}
.swx-services--brand::before{
  content:"";
  position:absolute; inset:0;
  /* ★ 100vwを使うと端末差で1px溢れやすいが、親がoverflow:clipなのでOK */
  left:50%; width:100vw; transform:translateX(-50%);
  z-index:-1;

  /* フォールバック（常に出る） */
  background: linear-gradient(90deg,
    rgba(255,212,0,1) 0%,
    rgba(255,212,0,.18) 100%);

  /* color-mix 対応環境で上書き */
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--brand, #FFD400) 94%, #fff 6%) 0%,
    color-mix(in srgb, var(--brand, #FFD400) 18%, #fff 82%) 100%);
}


/* ===== 料金と条件 ===== */
.swx-page.-plan-a #pricing .bullets{ max-width: 58rem; }
.swx-page.-plan-a #pricing .bullets strong{ font-weight: 800; }
.swx-page.-plan-a #pricing .note a{ display: inline-block; margin-top: .4em; }

/* ===== steps ===== */
/* =========================================================
   /plan-a — 進め方（5ステップ）タイムライン
   - 左レール＋ノード＋横長カード
   - 既存 #steps のマークアップに被せるだけでOK
   ========================================================= */
.swx-page.-plan-a #steps{
  /* 背景テクスチャ（任意） */
  background:
    var(--brand-50, #FFFBE6)
    url("../../img/bg/steps-texture.webp");
  background-repeat: repeat;
  background-size: auto 320px; /* 粒度調整 */
  position: relative;
}
.swx-page.-plan-a #steps .swx-container{
  --rail-color: var(--brand-500, #FFD400);
  --rail-w: 3px;
  --rail-left: 18px;        /* レールのX位置（左余白） */
  position: relative;
}

/* 縦レール（セクション全体に通す） */
.swx-page.-plan-a #steps .swx-container::before{
  content:"";
  position: absolute;
  left: var(--rail-left);
  top: 60px; bottom: 0;
  width: var(--rail-w);
  background: var(--rail-color);
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.04) inset;
}

/* グリッドを縦並びに変更（元のカードは流用） */
.swx-page.-plan-a #steps .swx-grid{
  display: block;           /* 1カラムのタイムライン表示 */
  counter-reset: step;
}

/* 各ステップカード（横長／角丸／柔らかい影） */
.swx-page.-plan-a #steps .card{
  position: relative;
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 12px 28px rgba(0,0,0,.10);
  padding: clamp(14px, 1.8vw, 18px) clamp(16px, 2vw, 22px);
  margin-left: var(--gutter-left);
  margin-bottom: clamp(16px, 2.4vw, 22px);
  transition: transform .18s ease, box-shadow .18s ease;
}
@media (hover:hover){
  .swx-page.-plan-a #steps .card:hover{
    transform: translateY(-1px);
    box-shadow: 0 14px 32px rgba(0,0,0,.12);
  }
}

/* ノード（白塗り＋黄色外枠の円） */
.swx-page.-plan-a #steps .card::before{
  content:"";
  position: absolute;
  left: calc(var(--rail-left) - 10px); /* レールの中心に沿う */
  top: 18px;                           /* バッジと揃う高さ */
  width: 20px; height: 20px;
  background: #fff;
  border: 3px solid var(--rail-color);
  border-radius: 50%;
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
}

/* STEPバッジ（小さめピル形）— 既存の連番を利用 */
.swx-page.-plan-a #steps .card-title{
  margin: 0 0 .35em;
  font-weight: 800;
  font-size: clamp(16px, 1.8vw, 18px);
}
.swx-page.-plan-a #steps .card-title::before{
  counter-increment: step;
  content: "STEP " counter(step);
  display: inline-grid;
  place-items: center;
  height: 28px; min-width: 84px;
  padding: 0 10px;
  margin-right: 10px;
  font-size: 12px; font-weight: 800; letter-spacing: .02em;
  color: var(--ink, #1E2438);
  background: #fff;
  border: 2px solid var(--rail-color);
  border-radius: 999px;
  box-shadow: 0 1px 0 rgba(0,0,0,.05);
}

/* 本文トーン（読みやすく） */
.swx-page.-plan-a #steps .card-text{
  color: color-mix(in oklab, var(--ink,#1E2438) 78%, #000);
  line-height: 1.75;
}
.swx-page.-plan-a #steps .card-text b,
.swx-page.-plan-a #steps .card-text strong{ font-weight: 800; }

/* レスポンシブ調整 */
@media (max-width: 720px){
  .swx-page.-plan-a #steps .swx-container{
    --rail-left: 12px;
    --gutter-left: 52px;
  }
  .swx-page.-plan-a #steps .card::before{
    left: calc(var(--rail-left) - 9px);
    top: 16px; width: 18px; height: 18px; border-width: 2.5px;
  }
  .swx-page.-plan-a #steps .card-title::before{
    height: 26px; min-width: 78px; font-size: 11.5px;
  }
}

/* モーション配慮（カードのホバーだけ無効化） */
@media (prefers-reduced-motion: reduce){
  .swx-page.-plan-a #steps .card{ transition: none; }
}


/* ===== 成果の見せ方 ===== */
.swx-page.-plan-a #metrics .bullets{ max-width: 48rem; }
.swx-page.-plan-a #metrics .bullets li{
  background: #fff; border: 1px solid var(--line, #E6E6E6);
  border-radius: 12px; padding: .8em 1em;
}
.swx-page.-plan-a #metrics .note{ max-width: 48rem; }
/* === Metrics（詳説2項目） ================================ */
.swx-page.-plan-a #metrics .metrics-cards{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: clamp(12px, 2.2vw, 20px);
  margin-top: clamp(8px, 1.2vw, 12px);
  max-width: 72rem;
}
@media (max-width: 980px){
  .swx-page.-plan-a #metrics .metrics-cards{ grid-template-columns: 1fr; }
}

.swx-page.-plan-a #metrics .metric.card{
  border-radius: 16px;
  box-shadow: 0 10px 26px rgba(0,0,0,.08);
  padding: clamp(14px, 2vw, 20px);
}

.swx-page.-plan-a #metrics .metric-title{
  margin: 0 0 .2em;
  font-weight: 800;
  font-size: clamp(17px, 1.9vw, 19px);
  position: relative;
  padding-left: 14px;
}
.swx-page.-plan-a #metrics .metric-title::before{
  content:"";
  position:absolute; inset:.2em auto .2em 0; width:6px; border-radius:6px;
  background: linear-gradient(180deg, color-mix(in oklab, var(--brand-500,#FFD400) 92%, #fff), var(--brand-500,#FFD400));
}

.swx-page.-plan-a #metrics .metric-lead{
  color: color-mix(in oklab, var(--ink,#1E2438) 80%, #000);
  margin: 0 0 .6em;
}

.swx-page.-plan-a #metrics .metric-body h4{
  margin: .6em 0 .2em; font-size: .95em; font-weight: 800; color: var(--ink,#1E2438);
}
.swx-page.-plan-a #metrics .metric-list{
  margin: 0 0 .4em; padding-left: 1.1em; display: grid; gap: .4em;
}
.swx-page.-plan-a #metrics .metric-list li{ line-height: 1.7; }


/* ===== who (担当者) ===== */
.swx-page.-plan-a #who { background: var(--brand-50, #FFFBE6); }
.swx-page.-plan-a #who .who-card{ display: grid; gap: .6em; }
.swx-page.-plan-a .who-card .who-photo{
  width: 100%; height: auto; aspect-ratio: 1;
  object-fit: cover; border-radius: 14px; margin-bottom: .8em;
  box-shadow: 0 6px 22px rgba(0,0,0,.08);
}
.swx-page.-plan-a .badge.-info{
  display: inline-block;
  margin-left: .5ch;
  padding: .12em .6em;
  border-radius: 999px;
  background: var(--brand-100, #FFF7CC);
  color: var(--brand-ink, #2b2b2b);
  font-size: .9em; font-weight: 700;
}
.swx-page.-plan-a #who .card-title{
  display: flex; flex-wrap: wrap; align-items: center; gap: .5em .6em;
}
.swx-page.-plan-a #who .card-text{
  color: color-mix(in oklab, var(--ink,#1E2438) 85%, #000);
}
.swx-page.-plan-a #who p > .swx-btn,
.swx-page.-plan-a #who p > .btn{
  margin-right: 8px; margin-top: 6px;
}

/* ===== faq ===== */
.swx-page.-plan-a #faq .qa{
  padding: clamp(12px, 2vw, 16px) clamp(14px, 2.4vw, 22px);
  border: 1px solid var(--line,#E6E6E6);
  border-radius: 12px; background: #fff;
}
.swx-page.-plan-a #faq .qa + .qa { margin-top: 10px; }
.swx-page.-plan-a #faq .qa summary{
  cursor: pointer; outline: none; list-style: none;
}
.swx-page.-plan-a #faq .qa[open]{ box-shadow: var(--shadow, 0 10px 30px rgba(0,0,0,.06)); }
.swx-page.-plan-a #faq .qa .card-text{ margin-top: .6em; }
.swx-page.-plan-a #faq .qa summary:focus-visible{
  outline: 3px solid color-mix(in oklab, var(--brand-400,#FFDE47) 60%, #000);
  outline-offset: 2px; border-radius: 10px;
}

/* === CTA: 上質な背景と親しみやすい導入 ===================== */
/* ふわっとした紙質×光のにじみ 表現（負荷は低い） */
.swx-page.-plan-a #cta{
  position: relative;
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(255,212,0,.10), transparent 70%),
    radial-gradient(900px 480px  at 85%  10%, rgba(255,212,0,.09), transparent 72%),
    linear-gradient(180deg, color-mix(in oklab, var(--brand-50,#FFFBE6) 88%, #fff) 0%, #fff 100%);
  border-block: 1px solid var(--line,#E6E6E6);
  overflow: hidden;
}

/* ほんのりドットの紙テクスチャ（擬似要素） */
.swx-page.-plan-a #cta::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    radial-gradient(rgba(0,0,0,.025) 1px, transparent 1px);
  background-size: 10px 10px;
  opacity:.45; pointer-events:none;
}

/* 親しみの一言 */
.swx-page.-plan-a #cta .cta-intro{
  margin: .4em 0 .6em;
  font-size: clamp(14px, 1.6vw, 16px);
  color: color-mix(in oklab, var(--ink,#1E2438) 86%, #000);
}

/* 小さな“安心チップ” */
.swx-page.-plan-a #cta .cta-perks{
  display:flex; flex-wrap:wrap; gap:8px 10px;
  margin: 0 0 clamp(10px, 1.4vw, 14px); padding:0; list-style:none;
}
.swx-page.-plan-a #cta .cta-perks li{
  display:inline-flex; align-items:center; gap:8px;
  padding: 6px 10px; border-radius: 999px;
  background: #fff;
  border: 1px solid color-mix(in oklab, var(--line,#E6E6E6) 90%, #000 8%);
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
  font-size: .92rem; font-weight: 700; color: var(--ink,#1E2438);
}
.swx-page.-plan-a #cta .cta-perks li::before{
  content:""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--brand-500,#FFD400);
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px color-mix(in oklab, var(--brand-500,#FFD400) 40%, #000);
}

/* 既存のボタン行に馴染ませる（余白調整のみ） */
.swx-page.-plan-a #cta .cta-buttons{ margin-top: 6px; }
@media (max-width: 520px){
  .swx-page.-plan-a #cta .cta-perks{ gap:6px; }
  .swx-page.-plan-a #cta .cta-perks li{ width: fit-content; }
}


/* ===== small tweaks ===== */
.swx-page.-plan-a .note { color: var(--muted, #556086); margin-top: .6em; }
.swx-page.-plan-a .sublinks a { text-decoration: underline; text-underline-offset: .2em; }

/* 文中リンクの下線トーン */
.swx-page.-plan-a a{ text-underline-offset: .18em; }
.swx-page.-plan-a a:hover{ text-decoration-thickness: .12em; }

/* 印刷：背景白・影オフ・CTAに枠 */
@media print{
  .swx-page.-plan-a .swx-section{ background: #fff !important; }
  .swx-page.-plan-a .card{ box-shadow: none !important; }
  .swx-page.-plan-a #cta{ border: 1px solid #ddd; }
}

/* 極小デバイスの行高をやや広めに */
@media (max-width: 380px){
  .swx-page.-plan-a { line-height: 1.9; }
}


/* === Section Title Decor =================================== */
/* 左の縦ライン＋ふわっと消えるハイライト（上品系） */
.swx-page.-plan-a .swx-sec-title{
  --accent: var(--brand-500, #FFD400);
  position: relative;
  display: inline-block;
  padding-left: 14px;                   /* 縦ラインの余白 */
  letter-spacing: .02em;
  font-weight: 800;
}
.swx-page.-plan-a .swx-sec-title::before{
  content: "";
  position: absolute; inset: .2em auto .2em 0;
  width: 6px; border-radius: 6px;
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--accent) 92%, #fff) 0%,
    var(--accent) 60%,
    color-mix(in oklab, var(--accent) 80%, #000) 100%
  );
  box-shadow: 0 4px 10px rgba(0,0,0,.08);
}
/* 下に“にじむ”マーカー風の薄ハイライト（文字は透明化しない） */
.swx-page.-plan-a .swx-sec-title::after{
  content: "";
  position: absolute; left: 14px; right: 0; bottom: -6px;
  height: 8px; border-radius: 8px;
  background: linear-gradient(
    90deg,
    color-mix(in oklab, var(--accent) 45%, #fff) 0%,
    transparent 70%
  );
  opacity: .45;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference){
  .swx-page.-plan-a .swx-sec-title:hover::after{ opacity: .7; transition: opacity .25s ease; }
}

/* ヒーローの見出しは白文字のまま同デコでも視認性が保てるように少し強め */
.swx-page.-plan-a #hero .swx-sec-title::after{ opacity: .55; }
.swx-page.-plan-a #hero .swx-sec-title::before{ box-shadow: 0 6px 16px rgba(0,0,0,.16); }

/* === Card/H3 の軽いアクセント（下線スライド風：負荷軽） */
.swx-page.-plan-a #included .card-title,
.swx-page.-plan-a #steps .card-title,
.swx-page.-plan-a #who   .card-title{
  position: relative; display: inline-block; padding-bottom: .1em;
}
.swx-page.-plan-a #included .card-title::after,
.swx-page.-plan-a #steps   .card-title::after,
.swx-page.-plan-a #who     .card-title::after{
  content: "";
  position: absolute; left: 0; bottom: -2px; height: 4px;
  width: 56%; max-width: 140px; border-radius: 6px;
  background: linear-gradient(90deg, var(--brand-100,#FFF7CC), transparent 90%);
  opacity: .9;
  transition: width .35s ease;
}
@media (hover:hover){
  .swx-page.-plan-a #included .card:hover .card-title::after,
  .swx-page.-plan-a #steps   .card:hover .card-title::after,
  .swx-page.-plan-a #who     .card:hover .card-title::after{
    width: 100%;
  }
}

/* === セクション別の微調整（背景が淡い所は濃度を控えめに） */
.swx-page.-plan-a #who .swx-sec-title::after{ opacity: .38; }
.swx-page.-plan-a #cta .swx-sec-title::after{ opacity: .32; } /* CTAは強調しすぎない */

ul, ol {
    list-style: none;
}
/* === Pricing CTA buttons ================================== */
.swx-page.-plan-a #pricing .price-cta{
  display:flex; gap:10px; flex-wrap:wrap;
  margin-top: clamp(10px, 1.6vw, 14px);
}

/* サイズ調整（MD） */
.swx-page.-plan-a #pricing .swx-btn.-md{
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 800;
  font-size: clamp(13.5px, 1.5vw, 15px);
}

/* 主ボタン：ブランド色（Bプラン詳細） */
.swx-page.-plan-a #pricing .swx-btn.primary{
  background: var(--brand-500, #FFD400);
  color: var(--brand-ink, #2b2b2b);
}
.swx-page.-plan-a #pricing .swx-btn.primary:hover{
  background: var(--brand-600, #E6BF00);
}

/* 従ボタン：控えめ（初回特典） */
.swx-page.-plan-a #pricing .swx-btn.subtle{
  background: var(--brand-50, #FFFBE6);
  color: var(--ink, #1E2438);
  border: 1px solid color-mix(in oklab, #000 10%, var(--line, #E6E6E6));
}
.swx-page.-plan-a #pricing .swx-btn.subtle:hover{
  filter: brightness(0.98);
}

/* SPは幅100%でタップしやすく */
@media (max-width: 520px){
  .swx-page.-plan-a #pricing .price-cta > a{ width:100%; text-align:center; }
}

/* === FAQ: アコーディオン三角アイコン ======================= */
/* 右端の三角（CSSだけ・画像なし） */
.swx-page.-plan-a #faq .qa summary{
  position: relative;
  padding-right: 42px;              /* 三角分の余白を確保 */
}
.swx-page.-plan-a #faq .qa summary::after{
  content: "";
  position: absolute; top: 50%; right: 14px;
  width: 0; height: 0;
  border-style: solid;
  border-width: 7px 0 7px 10px;     /* ▶ の三角形 */
  border-color: transparent transparent transparent
               color-mix(in oklab, var(--ink,#1E2438) 75%, #000);
  transform: translateY(-50%) rotate(0deg);
  transition: transform .2s ease, border-color .2s ease, opacity .2s;
  opacity: .85;
  pointer-events: none;
}

/* 開いたら ▼ に（90度回転） */
.swx-page.-plan-a #faq .qa[open] summary::after{
  transform: translateY(-50%) rotate(90deg);
}

/* ホバー時のわずかな強調（デスクトップのみ） */
@media (hover:hover){
  .swx-page.-plan-a #faq .qa summary:hover::after{
    opacity: 1;
  }
}

/* キーボード操作の視認性：既存フォーカスに合わせて少し濃く */
.swx-page.-plan-a #faq .qa summary:focus-visible::after{
  border-color: transparent transparent transparent
               color-mix(in oklab, var(--ink,#1E2438) 90%, #000);
}