/* =========================================================
   調査データ帯｜au おうちあんしんサポート（本番組込版 / 2026-06-25）
   - 変数・box-sizing は .survey 配下にスコープ → サイト全体に影響させない
   - グローバルの :root / * / body 指定は削除（既存サイトと衝突するため）
   - SPブレークポイントは本LP準拠で 740px
   ========================================================= */

.survey{
  /* このセクション専用カラートークン（サイトの :root と同値・グローバルには漏らさない） */
  --org:#FE9D2D;   /* au orange */
  --dorg:#F88501;  /* dark orange（数字） */
  --dylw:#EDD840;  /* マーカー */
  --lylw:#F7F6E4;  /* 薄黄背景 */
  --blk:#1c1c1c;
  --gry:#8b8b8b;
  padding:60px 20px;
}
.survey *{box-sizing:border-box;}

.survey__inner{max-width:880px;margin:0 auto;}

.survey__title{
  text-align:center;font-size:clamp(21px,3.4vw,27px);font-weight:700;
  line-height:1.5;margin:0 0 18px;text-wrap:balance;
}

.survey__lead{
  text-align:center;font-size:clamp(15px,2.3vw,18px);font-weight:700;
  line-height:1.75;margin:0 auto 28px;max-width:30em;text-wrap:balance;
}

.survey__marker{
  background:linear-gradient(transparent 68%, var(--dylw) 68%);
  padding:0 2px;
}

/* ---- 数字カード（3列横並び：Grid で厳密に均等3分割） ---- */
.stats{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;list-style:none;margin:0;padding:0;
}
.stats__item{
  min-width:0;
  background:var(--lylw);border:2px solid var(--org);border-radius:12px;
  padding:24px 8px 20px;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  text-align:center;
}
.stats__num{
  min-width:0;font-family:"Montserrat",sans-serif;font-weight:600;color:var(--dorg);
  font-size:clamp(30px,4.4vw,46px);line-height:1;letter-spacing:-.01em;
  display:flex;align-items:baseline;justify-content:center;
  font-variant-numeric:tabular-nums;
}
.stats__num .stats__val{display:inline-block;}
.stats__num .u{font-size:.45em;font-weight:700;margin-left:.06em;}
.stats__num .pre{font-size:.5em;font-weight:700;margin-right:.04em;}
.stats__label{
  margin-top:13px;font-size:clamp(11.5px,1.5vw,14px);font-weight:700;
  line-height:1.5;
}

.survey__bridge{
  text-align:center;font-size:clamp(15px,2.3vw,18px);font-weight:700;
  line-height:1.75;margin:28px auto 0;max-width:32em;text-wrap:balance;
}
.survey__bridge .survey__marker{white-space:nowrap;}

.survey__src{
  text-align:center;color:var(--gry);font-size:12px;line-height:1.6;
  margin:20px auto 0;max-width:44em;
}

.survey__links{
  display:flex;justify-content:center;gap:30px;flex-wrap:wrap;
  list-style:none;margin:18px 0 0;padding:0;
}
.survey__links a{
  position:relative;display:inline-block;color:var(--blk);font-weight:700;
  font-size:14px;text-decoration:none;border-bottom:2px solid var(--dylw);
  padding:0 17px 3px 0;
}
.survey__links a::after{
  content:"";position:absolute;right:3px;top:50%;width:7px;height:7px;
  border-top:2px solid var(--org);border-right:2px solid var(--org);
  transform:translateY(-58%) rotate(45deg);
}

/* ===== 登場アニメ（JS有効時のみ。JS無効でも全表示される安全設計） ===== */
.js .stats__item{opacity:0;transform:translateY(12px);transition:opacity .5s ease,transform .5s ease;}
.js .stats.is-in .stats__item{opacity:1;transform:none;}
.js .stats.is-in .stats__item:nth-child(2){transition-delay:.08s;}
.js .stats.is-in .stats__item:nth-child(3){transition-delay:.16s;}
@media (prefers-reduced-motion:reduce){
  .js .stats__item{opacity:1;transform:none;transition:none;}
}

/* ===== スマホ（本LP準拠 740px・3列維持・1枚パネル＋仕切り線でコンパクト） ===== */
@media (max-width:740px){
  .survey{padding:44px 14px;}
  .survey__title{font-size:clamp(19px,5.6vw,23px);}
  .survey__lead{font-size:15px;margin-bottom:22px;max-width:none;}
  .stats{
    gap:0;background:var(--lylw);border:2px solid var(--org);
    border-radius:14px;padding:16px 0;
  }
  .stats__item{
    background:none;border:none;border-radius:0;padding:6px 5px;
    border-right:1px solid rgba(254,157,45,.45);
  }
  .stats__item:last-child{border-right:none;}
  .stats__num{font-size:clamp(20px,6vw,27px);}
  .stats__label{margin-top:9px;font-size:clamp(10.5px,2.9vw,12px);line-height:1.45;}
  .survey__bridge{font-size:15px;margin-top:22px;max-width:none;}
  .survey__links{flex-direction:column;gap:11px;align-items:center;}
}