/* ================================================================
   sns-ai-x.css — SNS発信習慣化ラボ LP スタイル
   Cocoon非依存の完全独立スタイルシート。
   ================================================================ */

  /* ============ TOKENS ============ */
  :root{
    --bg-void:#0a0a0d;
    --bg-panel:#131418;
    --bg-panel-2:#17181d;
    --line-hair:#2a2c32;
    --line-hair-soft:#1e2025;
    --silver-100:#eceef1;
    --silver-300:#b7bbc3;
    --silver-500:#9a9ea8;
    --silver-600:#858a94;
    --metal-accent:#cfd5db;
    --metal-glow:#9aa6b2;
    --warn:#d6b98c;
    --ok:#a9c4b0;
    --header-h:64px;
    --font-head:"Shippori Mincho", serif;
    --font-body:"Zen Kaku Gothic New", "Hiragino Sans", "Noto Sans JP", sans-serif;
    --font-mono:"JetBrains Mono", monospace;
    --max-w: 1080px;
    --pad-x: clamp(20px, 5vw, 64px);
  }

  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{
    margin:0;
    background:var(--bg-void);
    color:var(--silver-100);
    font-family:var(--font-body);
    line-height:1.85;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  ::selection{ background:var(--metal-glow); color:var(--bg-void); }

  a{ color:inherit; }

  img,svg{ display:block; max-width:100%; }

  .wrap{
    max-width:var(--max-w);
    margin:0 auto;
    padding-left:var(--pad-x);
    padding-right:var(--pad-x);
  }

  .hairline{
    border-top:1px solid var(--line-hair);
  }

  /* focus visibility */
  a:focus-visible, button:focus-visible{
    outline:2px solid var(--metal-glow);
    outline-offset:3px;
  }

  @media (prefers-reduced-motion: reduce){
    *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  }

  /* ============ NAV ============ */
  .skip-link{
    position:absolute; left:12px; top:-60px; z-index:100;
    background:var(--silver-100); color:var(--bg-void);
    padding:10px 16px; border-radius:3px; font-size:14px; font-weight:700; text-decoration:none;
    transition:top .2s;
  }
  .skip-link:focus{ top:12px; }

  header.site-nav{
    position:sticky; top:0; z-index:50;
    background:rgba(10,10,13,0.82);
    -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
    border-bottom:1px solid var(--line-hair-soft);
    transition:background .25s, border-color .25s;
  }
  header.site-nav.is-scrolled{ background:rgba(10,10,13,0.94); border-bottom-color:var(--line-hair); }
  .nav-inner{
    max-width:1280px;
    margin:0 auto;
    min-height:var(--header-h);
    padding:0 clamp(20px, 3vw, 40px);
    display:flex;
    align-items:center;
    gap:clamp(12px, 1.6vw, 24px);
  }
  .brand{ display:flex; align-items:center; gap:14px; min-width:0; flex:none; }
  .brand-home{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:var(--silver-100); }
  .brand-logo{ width:30px; height:30px; object-fit:contain; flex:none; }
  .brand-name{ font-family:"Montserrat", var(--font-body); font-weight:700; font-size:15px; letter-spacing:.16em; }
  .brand-divider{ width:1px; height:18px; background:var(--line-hair); flex:none; }
  .brand-page{ font-family:var(--font-head); font-size:15px; letter-spacing:.06em; color:var(--silver-100); text-decoration:none; white-space:nowrap; }
  .brand-home:hover .brand-name, .brand-page:hover{ color:var(--metal-accent); }

  nav.links{ display:flex; gap:clamp(12px, 1.4vw, 22px); font-size:14px; color:var(--silver-300); margin-left:auto; flex:0 1 auto; min-width:0; }
  nav.links a{
    position:relative; text-decoration:none; padding:8px 0; white-space:nowrap;
    transition:color .2s;
  }
  nav.links a::after{
    content:""; position:absolute; left:0; right:0; bottom:2px; height:1px;
    background:var(--metal-accent); transform:scaleX(0); transform-origin:left; transition:transform .25s;
  }
  nav.links a:hover{ color:var(--silver-100); }
  nav.links a[aria-current="true"]{ color:var(--silver-100); }
  nav.links a[aria-current="true"]::after, nav.links a:hover::after{ transform:scaleX(1); }

  .nav-cta{
    font-size:13.5px; font-weight:700;
    padding:10px 18px;
    background:var(--silver-100); border:1px solid var(--silver-100);
    color:var(--bg-void);
    text-decoration:none; border-radius:3px; white-space:nowrap; flex:none;
    display:inline-flex; align-items:center; justify-content:center; min-height:44px;
    transition:background .2s, color .2s;
  }
  .nav-cta:hover{ background:transparent; color:var(--silver-100); }
  .menu-btn{
    display:none; align-items:center; justify-content:center;
    background:none; border:1px solid var(--line-hair); color:var(--silver-100);
    width:44px; height:44px; border-radius:3px; cursor:pointer; margin-left:auto; flex:none;
  }
  .menu-btn:hover{ border-color:var(--metal-glow); }

  @media (max-width:1279px){
    nav.links{ display:none; }
    .nav-cta{ margin-left:auto; }
  }
  @media (max-width:640px){
    :root{ --header-h:56px; }
    .nav-cta{ display:none; }
    .menu-btn{ display:inline-flex; }
    .brand{ gap:10px; }
    .brand-name{ font-size:13.5px; letter-spacing:.12em; }
    .brand-page{ font-size:13px; letter-spacing:.03em; }
  }
  @media (max-width:1279px) and (min-width:641px){
    .menu-btn{ display:inline-flex; margin-left:0; }
  }
  @media (max-width:340px){ .brand-logo{ display:none; } }

  /* ============ HERO ============ */
  .hero{
    position:relative;
    padding:96px var(--pad-x) 72px;
    background:
      radial-gradient(1200px 500px at 50% -10%, rgba(154,166,178,0.14), transparent 60%),
      linear-gradient(180deg, #0a0a0d 0%, #0a0a0d 100%);
    overflow:hidden;
  }
  .hero-inner{ max-width:var(--max-w); margin:0 auto; position:relative; }

  .kicker{
    font-size:13px;
    color:var(--silver-500);
    margin:0 0 22px;
    display:flex;
    align-items:center;
    gap:10px;
  }
  .kicker::before{
    content:"";
    width:24px; height:1px; background:var(--silver-500);
  }

  h1.hero-title{
    font-family:var(--font-head);
    font-weight:600;
    font-size:clamp(30px, 5.4vw, 54px);
    line-height:1.5;
    letter-spacing:0.02em;
    margin:0 0 30px;
    max-width:780px;
  }
  h1.hero-title .soft{ color:var(--silver-300); font-weight:500; }

  .hero-lead{
    font-size:16px;
    color:var(--silver-300);
    max-width:520px;
    margin:0 0 42px;
  }

  .hero-signal{
    width:100%;
    max-width:640px;
    height:110px;
    margin:8px 0 46px;
  }
  .signal-path{
    fill:none;
    stroke:var(--metal-glow);
    stroke-width:1.6;
    stroke-dasharray:900;
    stroke-dashoffset:900;
  }
  /* 波形は、ユーザーがこの位置に来た時点（JSが is-drawn を付与）で初めて描画する */
  .hero-signal.is-drawn .signal-path{ animation:draw 2.6s ease-out .15s forwards; }
  /* 動きを減らす設定の人には、描画済みの状態で表示する（従来は線が見えなかった） */
  @media (prefers-reduced-motion: reduce){ .signal-path{ stroke-dashoffset:0; } }
  @keyframes draw{ to{ stroke-dashoffset:0; } }
  .signal-caption{
    font-family:var(--font-mono);
    font-size:11px;
    fill:var(--silver-600);
  }

  .hero-ctas{ display:flex; gap:16px; flex-wrap:wrap; align-items:center; }
  .btn-primary{
    display:inline-block;
    background:var(--silver-100);
    color:var(--bg-void);
    padding:15px 30px;
    text-decoration:none;
    font-size:15px;
    font-weight:700;
    border-radius:3px;
    border:1px solid var(--silver-100);
    transition:transform .15s, box-shadow .15s;
  }
  .btn-primary:hover{ transform:translateY(-1px); box-shadow:0 10px 30px -10px rgba(236,238,241,0.35); }
  .btn-ghost{
    display:inline-block;
    color:var(--silver-300);
    padding:15px 8px;
    text-decoration:none;
    font-size:14px;
    border-bottom:1px solid var(--line-hair);
  }
  .btn-ghost:hover{ color:var(--silver-100); border-color:var(--silver-300); }

  /* ============ SECTION SCAFFOLD ============ */
  section{ padding:84px var(--pad-x); }
  .sec-inner{ max-width:var(--max-w); margin:0 auto; }
  .sec-head{ margin-bottom:48px; max-width:640px; }
  .sec-label{
    font-family:var(--font-mono);
    font-size:12px;
    color:var(--silver-600);
    margin:0 0 14px;
  }
  h2{
    font-family:var(--font-head);
    font-weight:600;
    font-size:clamp(24px, 3.4vw, 34px);
    line-height:1.55;
    margin:0 0 16px;
  }
  .sec-desc{ color:var(--silver-300); font-size:15.5px; max-width:560px; }

  /* ============ EMPATHY LIST ============ */
  .symptom-list{ border-top:1px solid var(--line-hair); }
  .symptom-row{
    display:grid;
    grid-template-columns:28px 1fr;
    gap:18px;
    padding:26px 0;
    border-bottom:1px solid var(--line-hair);
  }
  .symptom-row .mark{
    width:18px; height:18px; margin-top:3px;
    border:1px solid var(--silver-500);
    border-radius:50%;
    position:relative;
  }
  .symptom-row .mark::after{
    content:"";
    position:absolute; inset:4px;
    border-radius:50%;
    background:var(--metal-glow);
    opacity:0;
    transition:opacity .3s;
  }
  .symptom-row.active .mark::after{ opacity:1; }
  .symptom-row p{ margin:0; color:var(--silver-300); font-size:15px; }
  .symptom-row strong{ color:var(--silver-100); font-weight:700; display:block; margin-bottom:6px; font-size:15.5px; }

  /* ============ LOOP DIAGRAM ============ */
  .loop-block{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:56px;
    align-items:center;
  }
  @media (max-width:820px){ .loop-block{ grid-template-columns:1fr; } }
  .loop-svg-wrap{ position:relative; }
  .loop-copy p{ color:var(--silver-300); font-size:15.5px; margin:0 0 18px; }
  .loop-copy .callout{
    border-left:2px solid var(--metal-glow);
    padding:4px 0 4px 18px;
    color:var(--silver-100);
    font-size:15px;
    margin-top:26px;
  }

  /* ============ TYPE GRID ============ */
  .type-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    border-top:1px solid var(--line-hair);
    border-left:1px solid var(--line-hair);
  }
  @media (max-width:820px){ .type-grid{ grid-template-columns:repeat(2, 1fr); } }
  @media (max-width:520px){ .type-grid{ grid-template-columns:1fr; } }
  .type-cell{
    border-right:1px solid var(--line-hair);
    border-bottom:1px solid var(--line-hair);
    padding:28px 24px;
    cursor:pointer;
    transition:background .2s;
  }
  .type-cell:hover, .type-cell.open{ background:var(--bg-panel); }
  .type-cell .t-tag{ font-family:var(--font-mono); font-size:11px; color:var(--silver-600); margin-bottom:10px; }
  .type-cell .t-name{ font-size:15.5px; font-weight:700; margin-bottom:10px; }
  .type-cell .t-detail{
    font-size:13.5px; color:var(--silver-500);
    max-height:0; overflow:hidden; opacity:0;
    transition:max-height .3s ease, opacity .3s ease;
  }
  .type-cell.open .t-detail{ max-height:300px; opacity:1; margin-top:6px; }

  .diag-cta{
    margin-top:36px;
    padding:24px;
    border:1px solid var(--line-hair);
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    flex-wrap:wrap;
  }
  .diag-cta p{ margin:0; font-size:14px; color:var(--silver-300); }

  /* ============ 80/20 MODEL ============ */
  .split-model{
    display:flex;
    border:1px solid var(--line-hair);
    height:64px;
    margin-bottom:20px;
  }
  .split-model .seg{
    display:flex; align-items:center; justify-content:center;
    font-family:var(--font-mono);
    font-size:13px;
  }
  .split-model .seg.ai{ width:80%; background:var(--bg-panel-2); color:var(--silver-100); border-right:1px solid var(--line-hair); }
  .split-model .seg.human{ width:20%; background:var(--bg-panel); color:var(--silver-300); }
  .split-legend{ display:flex; gap:28px; font-size:13px; color:var(--silver-500); margin-bottom:44px; }
  .split-legend span{ display:flex; align-items:center; gap:8px; }
  .split-legend i{ width:10px; height:10px; display:inline-block; }
  .split-legend .l-ai{ background:var(--bg-panel-2); border:1px solid var(--line-hair); }
  .split-legend .l-human{ background:var(--bg-panel); border:1px solid var(--line-hair); }

  .step-row{
    display:grid;
    grid-template-columns:56px 1fr;
    gap:18px;
    padding:22px 0;
    border-top:1px solid var(--line-hair-soft);
  }
  .step-row:last-child{ border-bottom:1px solid var(--line-hair-soft); }
  .step-num{
    font-family:var(--font-mono);
    font-size:13px;
    color:var(--silver-600);
    padding-top:2px;
  }
  .step-row strong{ display:block; margin-bottom:6px; font-size:15px; }
  .step-row p{ margin:0; color:var(--silver-500); font-size:14px; }

  /* ============ BEFORE/AFTER ============ */
  .ba-panel{
    border:1px solid var(--line-hair);
    background:var(--bg-panel);
    padding:44px clamp(20px,4vw,48px);
    text-align:center;
  }
  .ba-row{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:clamp(20px, 6vw, 60px);
    flex-wrap:wrap;
  }
  .ba-figure .num{
    font-family:var(--font-mono);
    font-size:clamp(40px, 8vw, 64px);
    font-weight:500;
    line-height:1;
    color:var(--silver-500);
  }
  .ba-figure.after .num{ color:var(--silver-100); }
  .ba-figure .label{ margin-top:12px; font-size:13px; color:var(--silver-500); }
  .ba-arrow{ font-family:var(--font-mono); font-size:22px; color:var(--metal-glow); }
  .ba-note{
    margin-top:28px;
    font-size:13px;
    color:var(--silver-600);
  }

  /* ============ SERVICE ============ */
  .service-panel{
    border:1px solid var(--line-hair);
  }
  .service-head{
    padding:32px clamp(20px,4vw,40px);
    border-bottom:1px solid var(--line-hair);
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:20px;
    flex-wrap:wrap;
  }
  .service-head .name{ font-family:var(--font-head); font-size:20px; }
  .service-head .status{
    font-family:var(--font-mono);
    font-size:11px;
    color:var(--silver-500);
    border:1px solid var(--line-hair);
    padding:5px 10px;
    white-space:nowrap;
  }
  .feature-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
  }
  @media (max-width:640px){ .feature-grid{ grid-template-columns:1fr; } }
  .feature-item{
    padding:26px clamp(20px,4vw,40px);
    border-bottom:1px solid var(--line-hair);
    border-right:1px solid var(--line-hair);
  }
  .feature-grid .feature-item:nth-child(2n){ border-right:none; }
  @media (max-width:640px){ .feature-item{ border-right:none; } }
  .feature-item .f-label{ font-size:14.5px; font-weight:700; margin-bottom:8px; }
  .feature-item .f-desc{ font-size:13.5px; color:var(--silver-500); }
  .feature-item .f-tag{ font-family:var(--font-mono); font-size:10.5px; color:var(--silver-600); margin-bottom:8px; }

  .disclosure-box{
    margin-top:28px;
    padding:20px 24px;
    border:1px dashed var(--line-hair);
    font-size:13px;
    color:var(--silver-500);
  }
  .disclosure-box strong{ color:var(--silver-300); }

  /* ============ CAUTION ============ */
  .caution-panel{
    border:1px solid var(--line-hair);
    border-left:2px solid var(--warn);
    padding:30px clamp(20px,4vw,40px);
  }
  .caution-panel h3{
    font-size:15.5px; margin:0 0 14px; color:var(--silver-100); font-weight:700;
  }
  .caution-panel ul{ margin:0; padding-left:18px; color:var(--silver-300); font-size:14.5px; }
  .caution-panel li{ margin-bottom:10px; }

  /* ============ ONBOARDING STEPS ============ */
  .onboard-list{ counter-reset:ob; }
  .ob-row{
    counter-increment:ob;
    display:grid;
    grid-template-columns:70px 1fr;
    gap:18px;
    padding:24px 0;
    border-top:1px solid var(--line-hair-soft);
    align-items:baseline;
  }
  .ob-row:last-child{ border-bottom:1px solid var(--line-hair-soft); }
  .ob-row::before{
    content: counter(ob, decimal-leading-zero);
    font-family:var(--font-mono);
    font-size:13px;
    color:var(--metal-glow);
  }
  .ob-row strong{ font-size:15px; display:block; margin-bottom:4px; }
  .ob-row p{ margin:0; font-size:14px; color:var(--silver-500); }

  /* ============ FINAL CTA ============ */
  .final-cta{
    text-align:center;
    background:
      radial-gradient(900px 400px at 50% 0%, rgba(154,166,178,0.12), transparent 60%),
      var(--bg-void);
    border-top:1px solid var(--line-hair);
  }
  .final-cta h2{ margin-bottom:20px; }
  .final-cta .sec-desc{ margin:0 auto 40px; }
  .final-cta .btn-primary{ padding:17px 40px; font-size:16px; }
  .final-note{ margin-top:22px; font-size:12.5px; color:var(--silver-600); }

  /* ============ DRAWER（スマホ・タブレットのメニュー） ============ */
  .drawer{
    position:fixed; inset:0; z-index:90;
    background:var(--bg-void);
    display:flex; flex-direction:column;
    padding:0 var(--pad-x) max(28px, env(safe-area-inset-bottom));
    overflow-y:auto; overscroll-behavior:contain;
    transform:translateY(-100%);
    visibility:hidden;
    transition:transform .32s cubic-bezier(.19,1,.22,1), visibility 0s linear .32s;
  }
  .drawer.open{ transform:translateY(0); visibility:visible; transition-delay:0s; }
  /* 画面の高さが足りない時に、子要素（ボタン等）が縮んで文字がずれないようにする */
  .drawer > *{ flex-shrink:0; }
  .drawer-top{ display:flex; justify-content:space-between; align-items:center; min-height:var(--header-h); border-bottom:1px solid var(--line-hair-soft); margin-bottom:28px; }
  .drawer-top .menu-btn{ display:inline-flex; margin-left:0; }
  .drawer-label{ margin:0 0 6px; font-family:var(--font-head); font-size:14px; letter-spacing:.08em; color:var(--silver-500); }
  .drawer-links a{
    display:flex; align-items:center; min-height:56px;
    text-decoration:none; color:var(--silver-100);
    font-size:20px; font-family:var(--font-head);
    border-bottom:1px solid var(--line-hair);
  }
  .drawer-links a:hover{ color:var(--metal-accent); }
  .drawer .drawer-cta{ margin-top:28px; text-align:center; padding:17px 20px; min-height:56px; }
  .drawer-facts{ margin:14px 0 0; text-align:center; font-size:12.5px; color:var(--silver-500); }
  .drawer-home{ margin-top:auto; padding-top:32px; text-align:center; font-size:13px; color:var(--silver-300); text-decoration:none; }
  .drawer-home:hover{ color:var(--silver-100); }

/* ==================================================================
   追加: 画像設置（ヒーロー / 04 解決の考え方 / 最終CTA）
   ================================================================== */

/* ---- HERO：フルブリード背景（16:9） ---- */
.hero{
  padding:0;
  min-height:min(88vh, 760px);
  display:flex;
  align-items:flex-end;
}
.hero-media{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
}
.hero-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 38%;
  filter:grayscale(1) contrast(1.05) brightness(0.62);
  transform:scale(1.04);
}
.hero-media::after{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(10,10,13,0.35) 0%, rgba(10,10,13,0.55) 38%, var(--bg-void) 96%),
    linear-gradient(90deg, rgba(10,10,13,0.92) 0%, rgba(10,10,13,0.55) 46%, rgba(10,10,13,0.2) 78%);
}
.hero-inner{
  position:relative;
  z-index:1;
  width:100%;
  padding:clamp(140px,22vw,220px) var(--pad-x) 76px;
}
@media (max-width:760px){
  .hero{ min-height:auto; }
  .hero-inner{ padding-top:120px; padding-bottom:56px; }
  .hero-media img{ object-position:center 30%; }
}

/* ---- 04 解決の考え方：1枚図解（1:1） ---- */
.solution-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) clamp(220px, 30vw, 320px);
  gap:clamp(32px, 5vw, 64px);
  align-items:start;
}
.solution-main{ min-width:0; }
.solution-visual{
  position:sticky;
  top:96px;
}
.solution-visual figure{
  margin:0;
  border:1px solid var(--line-hair);
  background:var(--bg-panel);
  padding:clamp(14px, 2vw, 20px);
}
.solution-visual .frame{
  position:relative;
  width:100%;
  aspect-ratio:1/1;
  overflow:hidden;
  background:#0e0f12;
}
.solution-visual img{
  width:100%; height:100%;
  object-fit:cover;
  mix-blend-mode:screen;
  opacity:.94;
}
.solution-visual figcaption{
  margin-top:16px;
  font-family:var(--font-mono);
  font-size:11.5px;
  line-height:1.8;
  color:var(--silver-600);
  letter-spacing:.02em;
}
@media (max-width:900px){
  .solution-grid{ grid-template-columns:1fr; }
  .solution-visual{ position:static; order:-1; max-width:320px; margin:0 0 40px; }
}

/* ---- 最終CTA：フルブリード背景（16:9） ---- */
.final-cta{
  position:relative;
  overflow:hidden;
  padding:0;
  border-top:none;
}
.cta-media{
  position:absolute; inset:0; z-index:0; overflow:hidden;
}
.cta-media img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center 42%;
  filter:grayscale(1) contrast(1.05) brightness(0.5);
}
.cta-media::after{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(900px 420px at 50% 0%, rgba(154,166,178,0.16), transparent 62%),
    linear-gradient(180deg, rgba(10,10,13,0.55) 0%, rgba(10,10,13,0.82) 55%, var(--bg-void) 100%);
}
.final-cta .sec-inner{
  position:relative; z-index:1;
  padding:112px var(--pad-x) 100px;
}
@media (max-width:760px){
  .final-cta .sec-inner{ padding:88px var(--pad-x) 76px; }
}

/* ==================================================================
   追加: CTAボタンの button 要素リセット（<a> と見た目を統一）
   ================================================================== */
button.btn-primary{
  font-family:var(--font-body);
  appearance:none;
  cursor:pointer;
}

/* ==================================================================
   追加: スクロール・リビール（過剰に動かない、静かな入場）
   ================================================================== */
.reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .9s cubic-bezier(.19,1,.22,1), transform .9s cubic-bezier(.19,1,.22,1);
}
.reveal.in{ opacity:1; transform:none; }
.reveal-d1{ transition-delay:.08s; }
.reveal-d2{ transition-delay:.16s; }

/* ==================================================================
   追加: 診断モーダルの枠（開閉・サイズ・上部バー）。中身は sns-ai-x-diagnosis.css
   ================================================================== */
.cta-modal{
  position:fixed; inset:0; z-index:9800;
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.cta-modal[hidden]{ display:none !important; }
.cta-modal__overlay{
  position:absolute; inset:0;
  background:rgba(6,6,9,0.86);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  touch-action:none;
}
.cta-modal__dialog{
  position:relative;
  display:flex; flex-direction:column;
  width:100%; max-width:760px;
  max-height:min(94vh, 960px); max-height:min(94dvh, 960px);
  background:var(--bg-panel);
  border:1px solid var(--line-hair);
  box-shadow:0 40px 120px -30px rgba(0,0,0,.8);
  animation:snsxModalIn .35s cubic-bezier(.19,1,.22,1) both;
}
@keyframes snsxModalIn{
  from{ opacity:0; transform:translateY(16px) scale(.985); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}
.cta-modal__bar{
  flex:none;
  display:flex; align-items:center; gap:16px;
  padding:8px 10px 8px clamp(18px,3vw,32px);
  border-bottom:1px solid var(--line-hair);
  background:var(--bg-void);
}
.cta-modal__brand{ margin:0; font-family:var(--font-head); font-size:14px; letter-spacing:.06em; color:var(--silver-300); white-space:nowrap; }
.cta-modal__close{
  margin-left:auto; flex:none;
  width:44px; height:44px; border-radius:50%;
  background:var(--bg-panel); border:1px solid var(--line-hair); color:var(--silver-100);
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:border-color .2s;
}
.cta-modal__close:hover{ border-color:var(--metal-glow); }
.cta-modal__body{
  flex:1; min-height:0;
  overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  padding:clamp(24px,4vw,44px) clamp(18px,4vw,48px) clamp(28px,4vw,48px);
}
@media (max-width:640px){
  .cta-modal{ padding:0; align-items:flex-end; }
  .cta-modal__dialog{ max-width:none; max-height:96vh; max-height:96dvh; border-left:0; border-right:0; border-bottom:0; animation-name:snsxSheetIn; }
  .cta-modal__brand{ display:none; }
  .cta-modal__body{ padding-bottom:max(28px, env(safe-area-inset-bottom)); }
}
@keyframes snsxSheetIn{ from{ transform:translateY(40px); opacity:0; } to{ transform:none; opacity:1; } }

/* ==================================================================
   追加: プライバシーポリシー モーダル
   ================================================================== */
.snsx-pp-modal{
  position:fixed; inset:0; z-index:9950;
  pointer-events:none;
}
.snsx-pp-modal.is-open{ pointer-events:auto; }
.snsx-pp-modal__overlay{
  position:absolute; inset:0;
  background:rgba(10,10,13,0.72);
  opacity:0;
  transition:opacity .35s ease;
}
.snsx-pp-modal.is-open .snsx-pp-modal__overlay{ opacity:1; }
.snsx-pp-modal__dialog{
  position:fixed; top:0; right:0; height:100%;
  width:100%; max-width:440px;
  display:flex; flex-direction:column;
  background:var(--bg-panel);
  border-left:1px solid var(--line-hair);
  box-shadow:-20px 0 60px rgba(0,0,0,.5);
  transform:translateX(100%);
  transition:transform .38s cubic-bezier(.19,1,.22,1);
}
.snsx-pp-modal.is-open .snsx-pp-modal__dialog{ transform:translateX(0); }
.snsx-pp-modal__header{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 24px; background:var(--bg-void); border-bottom:1px solid var(--line-hair); flex-shrink:0;
}
.snsx-pp-modal__title{
  margin:0; font-family:var(--font-head); font-size:16px; font-weight:600; color:var(--silver-100);
}
.snsx-pp-modal__close{
  display:flex; align-items:center; justify-content:center;
  width:32px; height:32px; background:var(--bg-panel-2); border:1px solid var(--line-hair);
  border-radius:50%; color:var(--silver-100); cursor:pointer;
  transition:border-color .2s;
}
.snsx-pp-modal__close:hover{ border-color:var(--metal-glow); }
.snsx-pp-modal__body{
  flex:1; overflow-y:auto; padding:28px;
  color:var(--silver-300); font-size:13.5px; line-height:1.9;
}
.snsx-pp-modal__body h3{
  font-family:var(--font-body); font-size:14px; font-weight:700;
  color:var(--silver-100); margin:24px 0 8px; padding-bottom:6px;
  border-bottom:1px solid var(--line-hair);
}
.snsx-pp-modal__body h3:first-child{ margin-top:0; }
.snsx-pp-modal__body p{ margin:6px 0; }
.snsx-pp-modal__body ul{ margin:6px 0 8px 20px; }
.snsx-pp-modal__body ul li{ margin:4px 0; }
.snsx-pp-modal__footer{
  display:flex; flex-direction:column; align-items:center; gap:12px;
  padding:18px 24px 24px; border-top:1px solid var(--line-hair);
  background:var(--bg-panel-2); flex-shrink:0;
}
.snsx-pp-modal__scroll-hint{
  margin:0; font-size:12px; color:var(--silver-600); transition:opacity .4s;
}
.snsx-pp-modal__scroll-hint.is-read{ opacity:0; pointer-events:none; }
.snsx-pp-modal__confirm-btn{
  width:100%; max-width:280px; padding:14px 30px;
  border:1px solid var(--line-hair); border-radius:3px;
  background:var(--bg-void); color:var(--silver-600);
  font-family:var(--font-mono); font-size:13px; font-weight:600; letter-spacing:.05em;
  cursor:not-allowed;
  transition:background .3s, color .3s, border-color .3s;
}
.snsx-pp-modal__confirm-btn:not(:disabled){
  background:var(--silver-100); border-color:var(--silver-100); color:var(--bg-void); cursor:pointer;
}
.snsx-pp-modal__confirm-btn:not(:disabled):hover{ opacity:.86; }
@media (max-width:640px){
  .snsx-pp-modal__dialog{ max-width:100%; }
  .snsx-pp-modal__body{ padding:20px; }
  .snsx-pp-modal__footer{ padding:16px 20px 22px; }
}

/* ==================================================================
   追加: 送信結果トースト
   ================================================================== */
.snsx-toast{
  position:fixed; left:50%; bottom:28px; z-index:9990;
  transform:translate(-50%, 12px);
  opacity:0; pointer-events:none;
  background:var(--bg-panel); border:1px solid var(--line-hair);
  color:var(--silver-100);
  padding:14px 22px;
  font-size:13.5px;
  border-radius:3px;
  transition:opacity .3s ease, transform .3s ease;
  max-width:90vw;
}
.snsx-toast.is-visible{ opacity:1; transform:translate(-50%, 0); }
.snsx-toast.is-error{ border-color:var(--warn); color:var(--warn); }

/* ==================================================================
   追加: 開示・免責（共通フッターの直前）
   ================================================================== */
.snsx-legal{ border-top:1px solid var(--line-hair); padding:44px var(--pad-x) 48px; background:var(--bg-void); }
.snsx-legal__inner{ max-width:var(--max-w); margin:0 auto; }
.snsx-legal__title{ margin:0 0 16px; font-family:var(--font-head); font-size:15px; color:var(--silver-100); }
.footer-legal{ font-size:13px; color:var(--silver-500); line-height:1.95; max-width:46rem; }
.footer-legal p{ margin:0 0 12px; }
.footer-legal .flinks{ margin:20px 0 0; display:flex; gap:12px 24px; flex-wrap:wrap; }
.footer-legal .flinks button,
.footer-legal .flinks a{
  background:none; border:0; border-bottom:1px solid var(--line-hair); padding:6px 0;
  font-family:var(--font-body); font-size:13px; color:var(--silver-300); text-decoration:none;
  cursor:pointer; transition:color .2s, border-color .2s;
}
.footer-legal .flinks button:hover,
.footer-legal .flinks a:hover{ color:var(--silver-100); border-color:var(--silver-300); }
.snsx-pp-modal__date{ margin-top:1.5rem; font-size:12px; color:var(--silver-500); }

/* ==================================================================
   追加: ページトップへ戻るボタン（スクロール連動プログレスリング）
   ================================================================== */
.to-top{
  position:fixed; right:24px; bottom:24px; z-index:80;
  width:58px; height:58px;
  opacity:0; transform:translateY(10px);
  pointer-events:none;
  transition:opacity .3s ease, transform .3s ease;
}
.to-top.is-visible{ opacity:1; transform:none; pointer-events:auto; }
.to-top__ring{ position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); }
.to-top__ring-bg{ fill:none; stroke:var(--line-hair); stroke-width:1.5; }
.to-top__ring-bar{
  fill:none; stroke:var(--metal-glow); stroke-width:1.5;
  stroke-dasharray:169.6; stroke-dashoffset:169.6;
  transition:stroke-dashoffset .1s linear;
}
.to-top__core{
  position:absolute; inset:5px;
  border-radius:50%;
  background:var(--bg-panel);
  border:1px solid var(--line-hair);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  color:var(--silver-100);
  transition:background .2s, border-color .2s;
}
.to-top__arrow{ width:16px; height:16px; }
.to-top__label{ font-family:var(--font-mono); font-size:8px; letter-spacing:.08em; color:var(--silver-500); }
.to-top:hover .to-top__core{ border-color:var(--metal-glow); }
@media (max-width:640px){
  .to-top{ width:50px; height:50px; right:16px; bottom:16px; }
  .to-top__label{ display:none; }
}

@media (prefers-reduced-motion: reduce){
  .reveal, .to-top, .to-top__core, .cta-modal__dialog, .snsx-pp-modal__dialog{ transition:none !important; animation:none !important; }
}


/* ==================================================================
   DAISEN本番向け追加調整：日本語の可読性・レスポンシブ・操作性
   ================================================================== */
html { scroll-padding-top: calc(var(--header-h) + 16px); }
body.sns-ai-x-page {
  overflow-wrap: break-word;
  word-break: normal;
  line-break: strict;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
.sns-ai-x-page h1,
.sns-ai-x-page h2,
.sns-ai-x-page h3,
.sns-ai-x-page p,
.sns-ai-x-page li,
.sns-ai-x-page .feature-item,
.sns-ai-x-page .ob-row {
  overflow-wrap: break-word;
  word-break: normal;
  line-break: strict;
  text-wrap: pretty;
}
.sns-ai-x-page h1.hero-title { max-width: 18em; }
.sns-ai-x-page .hero-lead { max-width: 36em; }
.sns-ai-x-page .sec-head { max-width: 46rem; }
.sns-ai-x-page .sec-desc { line-height: 1.95; }
.sns-ai-x-page .symptom-row p,
.sns-ai-x-page .loop-copy p,
.sns-ai-x-page .step-row p,
.sns-ai-x-page .feature-item .f-desc,
.sns-ai-x-page .ob-row p,
.sns-ai-x-page .footer-legal {
  line-height: 1.95;
}
.sns-ai-x-page .btn-primary,
.sns-ai-x-page .btn-ghost,
.sns-ai-x-page .nav-cta {
  line-height: 1.6;
  text-align: center;
}
.sns-ai-x-page button { font: inherit; }
.sns-ai-x-page .type-cell:focus-visible,
.sns-ai-x-page .symptom-row:focus-visible {
  outline: 2px solid var(--metal-glow);
  outline-offset: 3px;
}
.sns-ai-x-page .feature-grid .feature-item:nth-child(2n) { border-right: 0; }
.sns-ai-x-page .feature-grid .feature-item:nth-child(2n+1) { border-right: 1px solid var(--line-hair); }
.sns-ai-x-page .feature-grid .feature-item:last-child { border-bottom: 0; }
.sns-ai-x-page .ob-row { grid-template-columns: 70px minmax(0, 1fr); }
.sns-ai-x-page .ob-row > div { min-width: 0; }
.sns-ai-x-page .service-head .name { overflow-wrap: anywhere; }

@media (max-width: 900px) {
  .sns-ai-x-page section:not(.hero):not(.final-cta) { padding-top: 68px; padding-bottom: 68px; }
  .sns-ai-x-page .loop-block { gap: 32px; }
  .sns-ai-x-page .solution-grid { grid-template-columns: minmax(0, 1fr); }
  .sns-ai-x-page .solution-visual { position: static; order: -1; max-width: 340px; margin: 0 auto 30px; }
}
@media (max-width: 760px) {
  .sns-ai-x-page .hero-inner { padding-top: 118px; padding-bottom: 48px; }
  .sns-ai-x-page h1.hero-title { font-size: clamp(29px, 7.2vw, 42px); line-height: 1.48; letter-spacing: 0; }
  .sns-ai-x-page .hero-lead { font-size: 15px; line-height: 1.95; }
  .sns-ai-x-page .hero-signal { margin-bottom: 28px; }
  .sns-ai-x-page .hero-ctas { align-items: stretch; flex-direction: column; gap: 10px; }
  .sns-ai-x-page .hero-ctas > a { width: 100%; }
  .sns-ai-x-page section:not(.hero):not(.final-cta) { padding: 58px var(--pad-x); }
  .sns-ai-x-page .sec-head { margin-bottom: 32px; }
  .sns-ai-x-page h2 { font-size: clamp(23px, 5.6vw, 30px); line-height: 1.55; }
  .sns-ai-x-page .sec-desc { font-size: 14.5px; }
  .sns-ai-x-page .symptom-row { grid-template-columns: 22px minmax(0, 1fr); gap: 12px; padding: 21px 0; }
  .sns-ai-x-page .loop-block { gap: 24px; }
  .sns-ai-x-page .type-cell { padding: 22px 18px; }
  .sns-ai-x-page .diag-cta { padding: 18px; align-items: stretch; }
  .sns-ai-x-page .diag-cta .btn-ghost { text-align: center; }
  .sns-ai-x-page .split-model { height: auto; min-height: 56px; }
  .sns-ai-x-page .split-model .seg { padding: 12px 8px; font-size: 11px; text-align: center; }
  .sns-ai-x-page .ob-row { grid-template-columns: 42px minmax(0, 1fr); gap: 12px; padding: 20px 0; }
  .sns-ai-x-page .ob-row strong { line-height: 1.7; }
  .sns-ai-x-page .final-cta .sec-inner { padding: 76px var(--pad-x) 64px; }
  .sns-ai-x-page .final-cta .btn-primary { width: 100%; padding: 16px 18px; }
}
@media (max-width: 520px) {
  .sns-ai-x-page .hero-media img { object-position: 57% 30%; }
  .sns-ai-x-page .signal-caption { font-size: 20px; }
  .sns-ai-x-page .ba-panel { padding: 30px 16px; }
  .sns-ai-x-page .ba-row { gap: 16px; }
  .sns-ai-x-page .ba-figure .num { font-size: 42px; }
  .sns-ai-x-page .ba-figure .label { max-width: 130px; font-size: 11px; line-height: 1.7; }
  .sns-ai-x-page .ba-arrow { font-size: 18px; }
  .sns-ai-x-page .service-head { padding: 24px 18px; }
  .sns-ai-x-page .feature-grid { grid-template-columns: minmax(0, 1fr); }
  .sns-ai-x-page .feature-grid .feature-item { border-right: 0 !important; padding: 22px 18px; }
  .sns-ai-x-page .feature-grid .feature-item:last-child { border-bottom: 0; }
  .sns-ai-x-page .ob-row { grid-template-columns: 34px minmax(0, 1fr); gap: 10px; }
}


/* ==================================================================
   追加: ヒーローの診断概要・最終CTAの流れ・noscript
   ================================================================== */
.hero-facts{
  list-style:none; margin:30px 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:8px 12px;
}
.hero-facts li{
  font-size:13px; color:var(--silver-300);
  padding:6px 14px; border:1px solid var(--line-hair); border-radius:999px;
  background:rgba(10,10,13,.55);
}
.hero-note{ margin:14px 0 0; font-size:12.5px; line-height:1.8; color:var(--silver-500); max-width:36em; }

.cta-flow{
  list-style:none; counter-reset:ctaflow;
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:0;
  max-width:640px; margin:0 auto 40px; padding:0;
  border:1px solid var(--line-hair); background:rgba(10,10,13,.62);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}
.cta-flow li{
  counter-increment:ctaflow;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:18px 10px; text-align:center;
  border-left:1px solid var(--line-hair);
}
.cta-flow li:first-child{ border-left:0; }
.cta-flow li::before{ content:counter(ctaflow); font-family:var(--font-mono); font-size:12px; color:var(--metal-glow); }
.cta-flow__title{ font-size:14.5px; font-weight:700; color:var(--silver-100); }
.cta-flow__note{ font-size:12px; color:var(--silver-500); line-height:1.6; }
.cta-noscript{ margin:20px auto 0; max-width:34em; font-size:13px; color:var(--warn); }
.cta-noscript a{ color:inherit; }
@media (max-width:520px){
  .cta-flow li{ padding:14px 6px; }
  .cta-flow__title{ font-size:13.5px; }
  .cta-flow__note{ font-size:11.5px; }
}
@media (max-width:760px){
  .hero-facts li{ font-size:12.5px; padding:5px 12px; }
}

/* ボタンの押しやすさ（最低タップ領域）・フォーカスの視認性 */
.btn-primary, .btn-ghost{ min-height:44px; }
.sns-ai-x-page :focus-visible{ outline:2px solid var(--metal-accent); outline-offset:3px; }

@media (prefers-reduced-motion: reduce){
  .cta-modal__dialog, .drawer, nav.links a::after{ transition:none !important; animation:none !important; }
}

/* ==================================================================
   追加: 特典オファー再設計（ヒーローの特典訴求・特典セクション・PP連動）
   ================================================================== */

/* ヒーロー：特典の一言訴求（CTAの直前に置き、「診断を受ける理由」を結びつける） */
.hero-gift{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 12px;
  margin:0 0 26px; padding:12px 16px; max-width:40em;
  border:1px solid var(--line-hair); border-left:2px solid var(--warn);
  background:rgba(10,10,13,.62); font-size:14px; line-height:1.8; color:var(--silver-300);
}
.hero-gift__badge{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.08em;
  color:var(--bg-void); background:var(--warn); padding:2px 10px; border-radius:2px; white-space:nowrap;
}
.hero-gift__text b{ color:var(--silver-100); font-weight:700; }

/* 特典セクション（ヒーロー直下） */
.gifts-sec{ background:linear-gradient(180deg, var(--bg-panel) 0%, var(--bg-void) 100%); }
.gift-flow{
  list-style:none; margin:0 0 36px; padding:0;
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  border:1px solid var(--line-hair); background:var(--bg-void);
}
.gift-flow li{
  display:flex; flex-direction:column; gap:3px; padding:16px 14px 16px 16px;
  border-left:1px solid var(--line-hair);
}
.gift-flow li:first-child{ border-left:0; }
.gift-flow__n{ font-family:var(--font-mono); font-size:12px; color:var(--metal-glow); }
.gift-flow__t{ font-size:15px; font-weight:700; line-height:1.6; color:var(--silver-100); }
.gift-flow__d{ font-size:12.5px; color:var(--silver-500); line-height:1.6; }

.gift-grid{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1px;
  background:var(--line-hair); border:1px solid var(--line-hair);
}
.gift-card{ background:var(--bg-panel); padding:24px 22px 22px; display:flex; flex-direction:column; gap:8px; }
.gift-card__no{ margin:0; font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; color:var(--warn); }
.gift-card__name{ margin:0; font-size:16.5px; font-weight:700; line-height:1.55; color:var(--silver-100); }
.gift-card__catch{ margin:0; font-size:13.5px; font-weight:700; line-height:1.75; color:var(--silver-300); }
.gift-card__desc{ margin:0; font-size:13.5px; line-height:1.85; color:var(--silver-500); }
.gift-card__meta{
  margin:auto 0 0; padding-top:10px; display:flex; flex-wrap:wrap; gap:6px 8px;
  font-size:11.5px; color:var(--silver-300);
}
.gift-card__meta span{ border:1px solid var(--line-hair); padding:1px 9px; border-radius:999px; background:var(--bg-void); }

/* 特典7：別格の1枚 */
.gift-feature{
  margin-top:1px; padding:28px 28px 26px;
  border:1px solid var(--warn); background:var(--bg-panel-2);
  display:grid; gap:14px;
}
.gift-feature__name{ margin:4px 0 6px; font-family:var(--font-head); font-size:22px; font-weight:600; line-height:1.5; color:var(--silver-100); }
.gift-feature__facts{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  border:1px solid var(--line-hair); background:var(--bg-void);
}
.gift-feature__facts li{ padding:10px 8px; text-align:center; border-left:1px solid var(--line-hair); line-height:1.4; }
.gift-feature__facts li:first-child{ border-left:0; }
.gift-feature__facts small{ display:block; font-size:11.5px; color:var(--silver-500); }
.gift-feature__facts b{ font-size:15.5px; color:var(--silver-100); }
.gift-feature__terms{ margin:0; padding-left:1.2em; font-size:13.5px; line-height:1.85; color:var(--silver-300); }
.gift-feature__terms li{ margin:3px 0; }
.gift-feature__terms b{ color:var(--silver-100); }
.gift-grid + .gift-feature{ margin-top:20px; }

.gift-why{ margin-top:28px; padding:20px 22px; border:1px solid var(--line-hair); border-left:2px solid var(--metal-glow); background:var(--bg-panel); }
.gift-why h3{ margin:0 0 6px; font-size:15px; color:var(--silver-100); }
.gift-why p{ margin:0; font-size:13.5px; line-height:1.9; color:var(--silver-300); }

.gift-cta{ margin-top:36px; text-align:center; }
.gift-cta .btn-primary{ padding:17px 40px; font-size:16px; cursor:pointer; }
.gift-cta__note{ margin:12px 0 0; font-size:12.5px; color:var(--silver-500); }

/* ご利用上の導線（4ステップ化に合わせる） */
.cta-flow{ grid-template-columns:repeat(4, minmax(0,1fr)); max-width:780px; }

/* プライバシーポリシーを開くボタン（文中・チェックボックス横で共通） */
.snsx-pp-open-btn{
  font:inherit; color:var(--silver-100); background:none; border:0; border-bottom:1px solid var(--metal-glow);
  padding:0 1px; cursor:pointer; line-height:inherit;
}
.snsx-pp-open-btn:hover{ color:#fff; border-color:#fff; }
.snsx-pp-open-btn--inline{ display:inline; }
.snsx-pp-modal__body h3 + p + h3{ margin-top:22px; }

@media (max-width:900px){
  .gift-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:760px){
  .gift-flow{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .gift-flow li:nth-child(3){ border-left:0; }
  .gift-flow li:nth-child(n+3){ border-top:1px solid var(--line-hair); }
  .gift-feature{ padding:22px 18px; }
  .gift-feature__facts{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .gift-feature__facts li:nth-child(3){ border-left:0; }
  .gift-feature__facts li:nth-child(n+3){ border-top:1px solid var(--line-hair); }
  .gift-cta .btn-primary{ width:100%; padding:16px 18px; }
  .cta-flow{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .cta-flow li:nth-child(3){ border-left:0; }
  .cta-flow li:nth-child(n+3){ border-top:1px solid var(--line-hair); }
}
@media (max-width:560px){
  .gift-grid{ grid-template-columns:minmax(0,1fr); }
  .hero-gift{ font-size:13.5px; }
}


/* ==================================================================
   レスポンシブ可読性の調整（rev.2）
   - 旧版の sec-inner 幅指定（二重の余白で本文が細くなる）を撤廃
   - 旧版の p/li 一括 font-size（注記まで15pxに揃ってしまう）を撤廃
   - overflow-wrap:anywhere（英単語・「SNS」等が途中で折れる）を break-word に戻す
   ================================================================== */
.sns-ai-x-page{ overflow-wrap:break-word; }
.sns-ai-x-page h1, .sns-ai-x-page h2, .sns-ai-x-page h3,
.sns-ai-x-page p, .sns-ai-x-page li, .sns-ai-x-page .btn-primary{
  word-break:normal;
  line-break:strict;
}
.sns-ai-x-page .sec-head h2, .sns-ai-x-page .final-cta h2{ text-wrap:balance; }
.sns-ai-x-page p, .sns-ai-x-page li{ text-wrap:pretty; }

/* 見出しの不自然な折り返し（「い。」だけが次の行に残る等）を防ぐ：文節ごとに折り返す */
.sns-ai-x-page .nb{ display:inline-block; }

/* ボタン：文字を常に上下中央に（高さが変わっても、テキストが下にずれない） */
.sns-ai-x-page .btn-primary,
.sns-ai-x-page .btn-ghost{
  display:inline-flex; align-items:center; justify-content:center;
}
.sns-ai-x-page .btn-primary{ flex-shrink:0; }

/* ページ先頭へ戻るボタンが reCAPTCHA バッジ（右下固定）と重ならないように持ち上げる */
.to-top{ bottom:88px; }

@media (max-width:760px){
  .sns-ai-x-page .hero-signal{ height:auto; aspect-ratio:640 / 110; }
  .sns-ai-x-page .signal-caption{ font-size:14px; }
}
@media (max-width:520px){
  .sns-ai-x-page .signal-caption{ font-size:20px; }
}
@media (max-width:640px){
  .to-top{ bottom:84px; }
  .sns-ai-x-page h3{ line-height:1.6; }
  .sns-ai-x-page .sec-label{ letter-spacing:.08em; }
  .sns-ai-x-page .btn-primary{ max-width:100%; white-space:normal; line-height:1.65; }
  /* 小さい注記が読みにくいため、本文系だけ少し大きくする */
  .sns-ai-x-page .symptom-row p,
  .sns-ai-x-page .step-row p,
  .sns-ai-x-page .ob-row p,
  .sns-ai-x-page .feature-item .f-desc,
  .sns-ai-x-page .gift-card__desc,
  .sns-ai-x-page .gift-card__catch{ font-size:14.5px; line-height:1.9; }
  .sns-ai-x-page .hero-note,
  .sns-ai-x-page .final-note,
  .sns-ai-x-page .gift-cta__note,
  .sns-ai-x-page .ba-note{ font-size:12.5px; line-height:1.8; }
}

/* 画面の高さが低い端末（横向きスマホ・小さなタブレット）でメニューを見やすく */
@media (max-height:620px){
  .drawer-top{ margin-bottom:16px; }
  .drawer-links a{ min-height:48px; font-size:18px; }
  .drawer .drawer-cta{ margin-top:18px; }
}



/* =========================================================================
   ✦ DAISEN LIGHT ENHANCEMENT v1.0 ― sns-ai-x「光の演出レイヤー」
   -------------------------------------------------------------------------
   ・デザイン思想（モノクロ×シルバーの金属的な静けさ）は維持。PHP/JS は無変更
   ・色は一切付けず、光は「シルバー（--metal-glow）」のみ。静的・動かさない
   ・ヒーロー画像の二重の暗幕（上35→55% と 左92%）を軽減し、画像の減光 .62 / .50 を緩める
   ・全ルールを body.sns-ai-x-page 配下にして既存ルールに確実に勝つ
   ========================================================================= */

body.sns-ai-x-page {
  --silver-500: #A9ADB7;                  /* #9a9ea8 → 引き上げ */
  --silver-600: #9A9FAA;                  /* #858a94 → 引き上げ */
  --line-hair: #34373e;
  --lt-silver-line: linear-gradient(90deg, transparent 0%, rgba(214,222,230,.8) 50%, transparent 100%);
}

/* ---------- 1. ヘッダー：下辺にシルバーの光のライン ---------- */
body.sns-ai-x-page header.site-nav {
  background: rgba(10,10,13,0.76);
  box-shadow: 0 1px 16px rgba(154,166,178,.10);
}
body.sns-ai-x-page header.site-nav::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--lt-silver-line); opacity: .45; pointer-events: none;
}

/* ---------- 2. ヒーロー：画像の減光を緩め、二重の暗幕を軽減、シルバーの光 ---------- */
body.sns-ai-x-page .hero-media img { filter: grayscale(1) contrast(1.05) brightness(0.84); }
body.sns-ai-x-page .hero-media::after {
  background:
    radial-gradient(900px 480px at 68% 38%, rgba(154,166,178,0.16), transparent 66%),
    linear-gradient(180deg, rgba(10,10,13,0.18) 0%, rgba(10,10,13,0.34) 38%, var(--bg-void) 98%),
    linear-gradient(90deg, rgba(10,10,13,0.74) 0%, rgba(10,10,13,0.38) 46%, rgba(10,10,13,0.08) 78%);
}
body.sns-ai-x-page .hero::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0; height: 1px; z-index: 2;
  background: var(--lt-silver-line); opacity: .5; pointer-events: none;
}
/* 暗幕を薄くした分、ヒーローの文字は影で担保 */
body.sns-ai-x-page h1.hero-title { text-shadow: 0 2px 22px rgba(10,10,13,.7), 0 0 40px rgba(154,166,178,.14); }
body.sns-ai-x-page .hero-lead,
body.sns-ai-x-page .hero-note { text-shadow: 0 1px 10px rgba(10,10,13,.75); }
body.sns-ai-x-page .hero-lead { color: #CDD0D7; }

/* ---------- 3. 最終CTA：画像の減光 .50 を緩め、暗幕を軽減 ---------- */
body.sns-ai-x-page .cta-media img { filter: grayscale(1) contrast(1.05) brightness(0.72); }
body.sns-ai-x-page .cta-media::after {
  background:
    radial-gradient(900px 420px at 50% 0%, rgba(154,166,178,0.24), transparent 62%),
    linear-gradient(180deg, rgba(10,10,13,0.34) 0%, rgba(10,10,13,0.62) 55%, var(--bg-void) 100%);
}

/* ---------- 4. 黒一色の面：シルバーのアンビエントライト ---------- */
body.sns-ai-x-page {
  background-image:
    radial-gradient(900px 600px at 6% 1100px,  rgba(154,166,178,.055), transparent 70%),
    radial-gradient(900px 600px at 96% 2200px, rgba(154,166,178,.05),  transparent 70%),
    radial-gradient(1000px 640px at 20% 3400px, rgba(154,166,178,.045), transparent 70%);
  background-repeat: no-repeat;
}

/* ---------- 5. パネル類：輪郭にシルバーの光（色は付けない） ---------- */
body.sns-ai-x-page .gift-why,
body.sns-ai-x-page .hero-facts li {
  box-shadow: inset 0 1px 0 rgba(214,222,230,.07), 0 0 24px rgba(154,166,178,.05);
}
body.sns-ai-x-page .btn-primary { box-shadow: 0 6px 26px rgba(154,166,178,.22); }

/* ---------- 6. キーボード操作時のフォーカスも「光」で（既存の金属色を維持） ---------- */
body.sns-ai-x-page a:focus-visible,
body.sns-ai-x-page button:focus-visible {
  box-shadow: 0 0 0 5px rgba(154,166,178,.24);
}

/* ---------- 7. スマートフォン：左からの暗幕が文字に重なるため、少しだけ濃さを戻す ---------- */
@media (max-width: 640px) {
  body.sns-ai-x-page .hero-media::after {
    background:
      radial-gradient(600px 360px at 60% 36%, rgba(154,166,178,0.14), transparent 66%),
      linear-gradient(180deg, rgba(10,10,13,0.28) 0%, rgba(10,10,13,0.50) 45%, var(--bg-void) 98%);
  }
}

/* ===== /DAISEN LIGHT ENHANCEMENT (sns-ai-x) ===== */