/* ============================================================
   SwingDiff Product LP — 共有スタイルシート
   デザインハンドオフ「SwingDiff LP ライト刷新」hi-fi 準拠（2026-09-10）。
   ja/en 両ページから読み込む共通CSS。値の変更は必ずこのファイルに対して行うこと。
   言語差（line-height / letter-spacing 等）は html[lang="en"] スコープで上書きする。

   配色は常時ライト固定（prefers-color-scheme による切り替えはしない）。
   端末スクリーンショットは「地色カードの中で下端を切り落とす」表現で、
   カード側の overflow:hidden と bottom padding 0 が前提になっている。
   ============================================================ */

/* ── Design Tokens ── */
:root{
  color-scheme:light;

  --sd-bg:#FFFFFF;
  --sd-surface:#F2F2F7;
  --sd-surface-2:#E5E5EA;
  --sd-num:#C7C7CC;

  --sd-border-section:rgba(60,60,67,0.12);
  --sd-border-card:rgba(60,60,67,0.12);
  --sd-border-card-soft:rgba(60,60,67,0.10);
  --sd-border-row-head:rgba(60,60,67,0.15);
  --sd-border-cta:rgba(60,60,67,0.3);
  --sd-icon-ring:rgba(60,60,67,0.12);

  --sd-text:#1C1C1E;
  --sd-text-secondary:#4A4A50;
  --sd-text-muted:rgba(60,60,67,0.7);
  --sd-text-weak:rgba(60,60,67,0.6);
  --sd-text-weakest:rgba(60,60,67,0.45);
  --sd-text-lang:rgba(60,60,67,0.4);

  /* 役割色は「面（ドット・グラフィック）用」と「文字用」で分ける。
     ライト地では彩度の高い原色をそのまま文字に使うとコントラストが足りないため、
     テキストには濃色（*-ink）を当てる。ハンドオフの色表に従う。 */
  --sd-cyan:#32ADE6;
  --sd-cyan-ink:#0071A4;
  --sd-green:#34C759;
  --sd-green-ink:#248A3D;
  --sd-blue:#007AFF;
  --sd-amber:#FF9500;
  --sd-amber-ink:#C93400;
  --sd-red:#FF3B30;
  --sd-red-ink:#D70015;

  /* アイコンの紺。h1 と最終CTA の見出しにのみ使う。 */
  --sd-navy:#033462;
  /* 反転セクション（#f05）の地色。ダーク版アイコン／スプラッシュと同色。 */
  --sd-invert-bg:#0B2F3A;
  --sd-invert-accent:#AADCC7;
  --sd-invert-text:rgba(255,255,255,0.78);
  --sd-invert-weak:rgba(255,255,255,0.35);

  /* 図版の影のみ許可（グラデーション・グロー・text-shadow は使わない）。 */
  --sd-shadow-figure:0 24px 60px rgba(3,52,98,0.16);
  --sd-shadow-hero:0 30px 80px rgba(3,52,98,0.18);

  --sd-font:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  --sd-font-display:-apple-system, BlinkMacSystemFont, "SF Pro Display", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  --sd-font-mono:'SF Mono', ui-monospace, monospace;

  --sd-container-max:1080px;
  --sd-container-pad:24px;
}

/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--sd-bg);color:var(--sd-text);font-family:var(--sd-font);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--sd-blue);text-decoration:none}
a:hover{color:var(--sd-navy)}
summary{list-style:none;cursor:pointer}
summary::-webkit-details-marker{display:none}
:where(a,button,summary):focus-visible{outline:2px solid var(--sd-blue);outline-offset:3px}

@media (prefers-reduced-motion: reduce) {
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;transition-delay:0s!important;animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important}
}

/* 印刷/PDF保存では IntersectionObserver が発火しないため、スクロール出現の
   対象要素が opacity:0 のまま残り、未 reveal のセクションが真っ白に印刷
   されてしまう。印刷時はまとめて可視状態に強制する。 */
@media print {
  .sd-index__grid,.sd-feature__text,.sd-feature__figure,.sd-privacy__card,.sd-plan__inner,.sd-faq__inner,.sd-cta__inner{opacity:1!important;transform:none!important;transition:none!important}
}

/* ── Skip to Content ── */
.skip-to-content{position:absolute;top:-100%;left:0;padding:.75rem 1.5rem;background:var(--sd-text);color:var(--sd-bg);font-weight:600;z-index:9999;transition:top .2s ease}
.skip-to-content:focus{top:0}

/* ── Layout Helpers ── */
.sd-container{max-width:var(--sd-container-max);margin:0 auto;padding-inline:var(--sd-container-pad)}
section[id]{scroll-margin-top:72px}

/* ── Header ── */
.sd-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,0.88);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--sd-border-section)}
.sd-header__inner{height:60px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.sd-wordmark{display:flex;align-items:center;gap:10px;color:var(--sd-text);font-weight:700;font-size:17px;letter-spacing:.02em}
.sd-wordmark:hover{color:var(--sd-text)}
.sd-wordmark__icon{width:28px;height:28px;border-radius:25%;display:block;box-shadow:0 0 0 1px var(--sd-icon-ring)}
.sd-nav{display:flex;align-items:center;gap:22px;font-size:14px}
.sd-nav__link{color:var(--sd-text-muted);transition:color .15s ease}
.sd-nav__link:hover{color:var(--sd-text)}
.sd-nav__lang{color:var(--sd-text-lang);font-size:13px;white-space:nowrap}
.sd-nav__lang strong{color:var(--sd-text);font-weight:600}
.sd-nav__lang a{color:var(--sd-text-muted);transition:color .15s ease}
.sd-nav__lang a:hover{color:var(--sd-text)}
.sd-btn-pill{display:inline-flex;align-items:center;background:var(--sd-blue);color:#FFFFFF;padding:8px 18px;border-radius:999px;font-weight:600;font-size:14px;transition:filter .15s ease;white-space:nowrap}
.sd-btn-pill:hover{filter:brightness(.9);color:#FFFFFF}

@media (max-width:720px){
  .sd-nav{gap:14px}
  .sd-nav__link{display:none}
}

@media (max-width:420px){
  .sd-header__inner{gap:8px}
}

@media (max-width:360px){ .sd-nav{gap:10px} .sd-btn-pill{padding:8px 12px} }

/* スクリーンリーダー専用テキスト（視覚的には隠すが読み上げには含める）。
   料金表ヘッダー行の空セルなど、意味はあるが見た目には出したくない箇所で使う。 */
.sd-visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── Buttons (hero / cta) ── */
.sd-btn-row{display:flex;flex-wrap:wrap;gap:14px}
.sd-btn{display:inline-block;padding:15px 30px;border-radius:14px;font-size:16px;transition:filter .15s ease,background-color .15s ease}
.sd-btn--primary{background:var(--sd-blue);color:#FFFFFF;font-weight:700}
.sd-btn--primary:hover{filter:brightness(.9);color:#FFFFFF}
.sd-btn--secondary{border:1px solid var(--sd-border-cta);color:var(--sd-text);font-weight:600}
.sd-btn--secondary:hover{background:var(--sd-surface);color:var(--sd-text)}
/* 最終CTA は地色が --sd-surface なので、セカンダリの hover は白へ抜く。 */
.sd-cta .sd-btn--secondary:hover{background:var(--sd-bg)}

@media (max-width:480px){
  .sd-btn-row,.sd-cta__buttons{gap:10px}
  .sd-btn-row .sd-btn,.sd-cta__buttons .sd-btn{flex:1 1 auto;text-align:center}
}

/* ── Hero (#top) ── */
/* ヒーローは図版カードの下端を切り落とすため padding-bottom を持たない。
   テキスト側の padding-bottom で下の余白を作る（横並び時のみ）。 */
.sd-hero{padding:88px 24px 0;display:flex;flex-wrap:wrap;gap:64px;align-items:flex-end}
.sd-hero__text{flex:1 1 420px;min-width:min(320px,100%);padding-bottom:72px}
.sd-hero__eyebrow{margin:0 0 20px;font-family:var(--sd-font-mono);font-size:13px;letter-spacing:.18em;color:var(--sd-cyan-ink);animation:sd-fade-in-up .7s ease-out backwards}
.sd-hero__title{margin:0 0 24px;font-family:var(--sd-font-display);font-size:clamp(38px,5vw,56px);line-height:1.2;font-weight:800;letter-spacing:-0.01em;color:var(--sd-navy);text-wrap:pretty;animation:sd-fade-in-up .7s ease-out .08s backwards}
.sd-hero__lead{margin:0 0 36px;font-size:17px;line-height:1.9;color:var(--sd-text-secondary);max-width:460px;text-wrap:pretty;animation:sd-fade-in-up .7s ease-out .16s backwards}
.sd-hero__cta{margin-bottom:18px;animation:sd-fade-in-up .7s ease-out .24s backwards}
.sd-hero__note{margin:0;font-size:13px;color:var(--sd-text-weak);animation:sd-fade-in-up .7s ease-out .32s backwards}
/* margin-inline:auto は縦積み時のセンタリング用。横並びのときはテキスト側が
   flex-grow で余白を吸い切るので効かない（機能セクションの図版カードも同じ）。 */
.sd-hero__figure{flex:0 1 380px;min-width:min(280px,100%);margin:0 auto;display:flex;justify-content:center;align-items:flex-end;background:var(--sd-surface);border-radius:28px 28px 0 0;padding:56px 40px 0;overflow:hidden;animation:sd-fade-in-up .8s ease-out .1s backwards}
/* margin-bottom は <picture> 側に置く。<img> に付けると picture の高さが縮むだけで
   カードから下に抜けない（flex アイテムは picture のほうなので）。 */
.sd-hero__pic{display:block;width:100%;max-width:300px;margin-bottom:-40px}
.sd-hero__media{width:100%;border-radius:38px 38px 0 0;box-shadow:var(--sd-shadow-hero);aspect-ratio:1/2;object-fit:cover;object-position:top;background:var(--sd-surface)}

/* ページ読み込み時のヒーロー演出。ヒーロー内テキストと図版を上から順に
   fadeInUp で段階表示する（KAETAO LP を踏襲）。スクロール出現用のトランジション
   と併用するため、この @keyframes は opacity/translateY のみを扱う。 */
@keyframes sd-fade-in-up {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ヒーローが縦積みに折り返す幅（テキスト 420px + gap 64px + 図版 380px = 864px を
   コンテナ内寸が下回る = ビューポート 912px 未満）。折り返すとテキストの
   padding-bottom が gap に上乗せされて空きすぎるので、間隔は gap だけに任せる。 */
@media (max-width:911px){
  .sd-hero__text{padding-bottom:0}
}

@media (max-width:720px){
  .sd-hero{padding-top:56px;gap:40px}
}

/* ── INDEX (#index) ── */
.sd-index{padding:64px 24px 88px;border-top:1px solid var(--sd-border-section)}
.sd-index__heading{margin:0 0 28px;font-family:var(--sd-font-mono);font-size:13px;letter-spacing:.18em;color:var(--sd-text-weak);font-weight:500}
.sd-index__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:12px}
.sd-index__item{background:var(--sd-surface);border-radius:18px;padding:20px 22px;display:flex;align-items:baseline;gap:14px;color:var(--sd-text);transition:background-color .15s ease}
.sd-index__item:hover{background:var(--sd-surface-2);color:var(--sd-text)}
.sd-index__num{font-family:var(--sd-font-mono);font-size:13px}
.sd-index__num--cyan{color:var(--sd-cyan-ink)}
.sd-index__num--green{color:var(--sd-green-ink)}
.sd-index__title{font-weight:600;font-size:16px;flex:1}
.sd-index__tag{font-family:var(--sd-font-mono);font-size:10px;letter-spacing:.12em;color:var(--sd-text-weakest)}

/* ── Feature Sections (#f01–#f05) ── */
.sd-feature{padding:72px 24px;border-top:1px solid var(--sd-border-section);display:flex;flex-wrap:wrap;gap:64px;align-items:center}
.sd-feature--reverse{flex-wrap:wrap-reverse}
.sd-feature__text{flex:1 1 420px;min-width:min(320px,100%)}
.sd-feature__num{margin:0 0 8px;font-size:56px;font-weight:200;color:var(--sd-num);font-family:var(--sd-font-mono)}
.sd-feature__eyebrow{margin:0 0 14px;font-family:var(--sd-font-mono);font-size:12px;letter-spacing:.18em}
.sd-feature__eyebrow--cyan{color:var(--sd-cyan-ink)}
.sd-feature__eyebrow--green{color:var(--sd-green-ink)}
.sd-feature__heading{margin:0 0 20px;font-size:32px;font-weight:800;line-height:1.35;letter-spacing:-0.01em;color:var(--sd-text)}
.sd-feature__body{margin:0 0 28px;font-size:16px;line-height:1.9;color:var(--sd-text-secondary);max-width:440px;text-wrap:pretty}
.sd-feature__body--tight{margin-bottom:0}
.sd-feature__note{margin:16px 0 0;font-family:var(--sd-font-mono);font-size:11px;letter-spacing:.14em;color:var(--sd-text-weakest)}

/* 図版カード。端末画像／動画を地色カードに入れ、下端を切り落として見せる。
   padding の下が 0 なのと overflow:hidden が前提。
   カード幅は「図版 260px + 左右 padding 36px」= 332px。ハンドオフ原本は 300px
   だったが、それだと図版が 228px にしかならずハンドオフの指定寸法（260×520）から
   外れる。 */
.sd-feature__figure{flex:0 1 332px;min-width:min(332px,100%);margin:0 auto;background:var(--sd-surface);border-radius:28px;padding:40px 36px 0;overflow:hidden;display:flex;flex-direction:column;align-items:center}
.sd-feature__pic{display:block;width:100%;max-width:260px}
/* 高さは固定値ではなく aspect-ratio で持つ。素材（640:1293）よりわずかに縦長なので
   幅がいくつでも下端側だけが切れ、「端末がカードの下に抜ける」表現が保たれる。
   固定 height だと狭幅で比率が逆転し、下端ではなく左右が切れて端末の側面が欠ける。
   260px 幅なら 520px になり、ハンドオフの指定値と一致する。 */
.sd-feature__media{width:100%;max-width:260px;aspect-ratio:1/2;border-radius:33px 33px 0 0;box-shadow:var(--sd-shadow-figure);object-fit:cover;object-position:top;background:var(--sd-surface)}

@media (max-width:720px){
  .sd-feature{gap:40px}
}

/* ── Pills (f01 phase pills / f02 score pills / f03 legend pills) ── */
.sd-pill-row{display:flex;flex-wrap:wrap;gap:10px}
.sd-pill{background:var(--sd-surface);border-radius:999px;padding:10px 20px;font-size:14px;font-weight:600}
.sd-pill--dot{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:10px 20px;font-size:14px;font-weight:600;border:1px solid transparent}
.sd-pill__dot{width:8px;height:8px;border-radius:50%}
.sd-pill--green{background:rgba(52,199,89,0.10);border-color:rgba(52,199,89,0.35);color:var(--sd-green-ink)}
.sd-pill--green .sd-pill__dot{background:var(--sd-green)}
.sd-pill--amber{background:rgba(255,149,0,0.10);border-color:rgba(255,149,0,0.35);color:var(--sd-amber-ink)}
.sd-pill--amber .sd-pill__dot{background:var(--sd-amber)}
.sd-pill--red{background:rgba(255,59,48,0.10);border-color:rgba(255,59,48,0.35);color:var(--sd-red-ink)}
.sd-pill--red .sd-pill__dot{background:var(--sd-red)}
.sd-pill--cyan{background:rgba(50,173,230,0.10);border-color:rgba(50,173,230,0.35);color:var(--sd-cyan-ink)}
.sd-pill--cyan .sd-pill__dot{background:var(--sd-cyan)}
.sd-pill--legend-green{background:rgba(52,199,89,0.10);border-color:rgba(52,199,89,0.35);color:var(--sd-green-ink)}
.sd-pill--legend-green .sd-pill__dot{background:var(--sd-green)}

/* ── f05 Privacy Card（反転セクション） ── */
.sd-privacy{padding:72px 24px 88px;border-top:1px solid var(--sd-border-section)}
.sd-privacy__card{background:var(--sd-invert-bg);color:#FFFFFF;border-radius:28px;padding:clamp(32px,5vw,56px);display:flex;flex-wrap:wrap;gap:48px;align-items:center}
.sd-privacy__card .sd-feature__num{color:var(--sd-invert-weak)}
.sd-privacy__card .sd-feature__eyebrow--green{color:var(--sd-invert-accent)}
.sd-privacy__card .sd-feature__heading{color:#FFFFFF}
.sd-privacy__card .sd-feature__body{color:var(--sd-invert-text)}
.sd-privacy__text{flex:1 1 400px;min-width:min(300px,100%)}
.sd-privacy__list{flex:1 1 300px;min-width:min(260px,100%);list-style:none;margin:0;padding:0;display:grid;gap:14px}
.sd-privacy__item{display:flex;align-items:center;gap:12px;font-size:15px;font-weight:600}
.sd-privacy__check{width:22px;height:22px;border-radius:50%;background:rgba(170,220,199,0.2);color:var(--sd-invert-accent);display:inline-flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0}

@media (max-width:720px){
  .sd-privacy__card{gap:28px}
}

/* ── Plan (#plan) ── */
.sd-plan{padding:72px 24px 88px;border-top:1px solid var(--sd-border-section)}
.sd-plan__eyebrow{margin:0 0 14px;font-family:var(--sd-font-mono);font-size:12px;letter-spacing:.18em;color:var(--sd-text-weak)}
.sd-plan__title{margin:0 0 40px;font-size:32px;font-weight:800;line-height:1.4;letter-spacing:-0.01em}
.sd-plan__table{background:var(--sd-surface);border-radius:18px;overflow:hidden;max-width:720px}
.sd-plan__row{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);column-gap:12px;padding:16px 28px;border-bottom:1px solid var(--sd-border-card-soft);font-size:15px;align-items:center}
.sd-plan__row:last-child{border-bottom:none}
.sd-plan__row--head{padding:18px 28px;border-bottom:1px solid var(--sd-border-row-head);font-family:var(--sd-font-mono);font-size:12px;letter-spacing:.14em}
.sd-plan__col-free{color:var(--sd-text-weak)}
.sd-plan__col-pro{color:var(--sd-blue)}
.sd-plan__label{color:var(--sd-text-secondary);overflow-wrap:anywhere}
.sd-plan__free{font-weight:600;color:var(--sd-text)}
.sd-plan__pro{font-weight:700;color:var(--sd-text)}
.sd-plan__pro--green,.sd-plan__free--green{color:var(--sd-green-ink)}
.sd-plan__subnote{display:block;font-size:12px;font-weight:500;color:var(--sd-text-weak)}
.sd-plan__price-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.sd-plan__price-pill{background:var(--sd-surface);border-radius:999px;padding:10px 20px;font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
.sd-plan__footnote{margin:20px 0 0;font-size:13px;line-height:1.8;color:var(--sd-text-weak);max-width:640px}

@media (max-width:480px){
  .sd-plan__row,.sd-plan__row--head{padding:14px 16px;font-size:14px}
  .sd-plan__price-row .sd-plan__price-pill{flex:1 1 auto;text-align:center}
}

/* ── FAQ (#faq) ── */
.sd-faq{padding:72px 24px 88px;border-top:1px solid var(--sd-border-section)}
.sd-faq__eyebrow{margin:0 0 14px;font-family:var(--sd-font-mono);font-size:12px;letter-spacing:.18em;color:var(--sd-text-weak)}
.sd-faq__title{margin:0 0 40px;font-size:32px;font-weight:800;letter-spacing:-0.01em}
.sd-faq__list{display:grid;gap:12px;max-width:760px}
.sd-faq__item{background:var(--sd-surface);border-radius:12px;padding:0 24px}
.sd-faq__summary{cursor:pointer;padding:20px 0;font-size:16px;font-weight:700;list-style:none;display:flex;gap:12px;align-items:baseline}
.sd-faq__q{color:var(--sd-blue);font-family:var(--sd-font-mono);font-size:13px}
.sd-faq__answer{margin:0;padding:0 0 22px 26px;font-size:15px;line-height:1.9;color:var(--sd-text-secondary)}

/* ── Final CTA (#cta) ── */
.sd-cta{border-top:1px solid var(--sd-border-section);background:var(--sd-surface)}
.sd-cta__inner{padding:96px 24px;text-align:center}
.sd-cta__icon{width:88px;height:88px;border-radius:25%;margin:0 auto 28px;box-shadow:0 12px 40px rgba(3,52,98,0.18), 0 0 0 1px var(--sd-icon-ring)}
.sd-cta__eyebrow{margin:0 0 16px;font-family:var(--sd-font-mono);font-size:12px;letter-spacing:.18em;color:var(--sd-cyan-ink)}
.sd-cta__title{margin:0 0 36px;font-size:clamp(30px,4vw,44px);font-weight:800;letter-spacing:-0.01em;line-height:1.35;color:var(--sd-navy)}
.sd-cta__buttons{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-bottom:18px}
.sd-cta__note{margin:0 0 40px;font-size:13px;color:var(--sd-text-weak)}
.sd-cta__share{margin:0;font-size:13px;color:var(--sd-text-weak)}
.sd-cta__share-link{color:var(--sd-text-secondary);text-decoration:underline;margin-left:8px;white-space:nowrap}
.sd-cta__share-link+.sd-cta__share-link{margin-left:12px}
.sd-cta__share-link:hover{color:var(--sd-text)}

/* ── Footer ── */
.sd-footer{border-top:1px solid var(--sd-border-section)}
.sd-footer__inner{padding:40px 24px 56px;display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between}
.sd-footer__brand{margin:0 0 6px;font-weight:700;font-size:15px}
.sd-footer__copy{margin:0;font-size:12px;color:var(--sd-text-weak)}
.sd-footer__nav{display:flex;flex-wrap:wrap;gap:18px;font-size:13px}
.sd-footer__nav a,.sd-footer__nav button{font:inherit;color:var(--sd-text-muted);background:none;border:0;padding:0;margin:0;cursor:pointer;transition:color .15s ease}
.sd-footer__nav a:hover,.sd-footer__nav button:hover{color:var(--sd-text)}

@media (max-width:480px){
  .sd-footer__inner{flex-direction:column;align-items:flex-start}
}

/* ── Cookie 同意バナー ──
   EEA/UK/スイスからの未選択アクセス時に自動表示し、フッターの「Cookie 設定」から
   いつでも開き直せる。 */
.sd-consent{position:fixed;left:0;right:0;bottom:0;z-index:100;background:var(--sd-surface);border-top:1px solid var(--sd-border-card);box-shadow:0 -10px 34px rgba(3,52,98,.14);transform:translate3d(0,100%,0);will-change:transform;visibility:hidden;transition:transform .3s ease,visibility 0s linear .3s}
.sd-consent.is-visible{transform:translate3d(0,0,0);visibility:visible;transition:transform .3s ease}
.sd-consent__inner{max-width:var(--sd-container-max);margin:0 auto;padding:18px var(--sd-container-pad);display:flex;align-items:center;gap:24px;max-height:70svh;overflow-y:auto}
.sd-consent__text{flex:1;margin:0;font-size:13.5px;line-height:1.75;color:var(--sd-text-secondary);text-wrap:pretty}
.sd-consent__link{color:var(--sd-blue);text-decoration:underline}
.sd-consent__actions{display:flex;gap:10px;flex-shrink:0}
.sd-consent__btn{display:inline-flex;align-items:center;background:none;border:1px solid var(--sd-border-cta);appearance:none;-webkit-appearance:none;color:var(--sd-text);font:inherit;font-weight:600;font-size:14px;padding:10px 22px;border-radius:999px;cursor:pointer;transition:background-color .15s ease,border-color .15s ease}
.sd-consent__btn:hover{background:var(--sd-surface-2)}

@media (max-width:720px){
  .sd-consent__inner{flex-direction:column;align-items:stretch;gap:14px}
  .sd-consent__actions{justify-content:flex-end}
}

/* ── EN 言語差調整 ──
   英語コピーは行間・字送りが日本語と異なるため、ここで上書きする。 */
html[lang="en"] .sd-hero__title{line-height:1.15;letter-spacing:-0.015em}
html[lang="en"] .sd-hero__lead{line-height:1.75}
html[lang="en"] .sd-feature__heading{line-height:1.3}
html[lang="en"] .sd-feature__body{line-height:1.75}
html[lang="en"] .sd-plan__title{line-height:1.35}
html[lang="en"] .sd-plan__footnote{line-height:1.7}
html[lang="en"] .sd-faq__answer{line-height:1.75}
html[lang="en"] .sd-cta__title{line-height:1.25}