/* ===== タブレット〜大型スマホ（横幅の最適化・段組み解除） ===== */
@media (max-width:920px){
  section{padding:56px 0}
  .wrap{padding:0 16px}
  .nav{height:56px}
  .brand{font-size:16px}
  .brand img.mk{width:28px;height:28px}
  .btn-primary,.btn-light{padding:15px 30px;font-size:16px}
  .hero{padding:42px 0 50px}
  .hero .wrap{grid-template-columns:1fr;gap:28px;text-align:center}
  .hero .lead{margin-left:auto;margin-right:auto}
  .hero-cta{justify-content:center}
  .trust{justify-content:center}
  .hero-mock{min-height:0;margin-top:6px}
  .hero-mock .phone-before{display:none}
  .hero-mock .phone-after{right:0}
  .hero-badge.b1{top:2%;right:2%}
  .hero-badge.b2{bottom:4%;left:2%}
  .coming{flex-direction:column;text-align:center;gap:14px}
  .stats .grid{grid-template-columns:1fr 1fr;gap:30px 16px}
  .stats .col+.col::before{display:none}
  .pain{grid-template-columns:1fr}
  .ba{grid-template-columns:1fr;gap:18px}
  .ba .arrow{transform:rotate(90deg)}
  .hero-feat{grid-template-columns:1fr;gap:32px}
  .hero-feat .copy{order:2}
  .feat3{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr;gap:34px}
  .steps::before{display:none}
  .family{grid-template-columns:1fr}
  .nav nav{display:none}
  .hamb{display:flex}
  .to-top{display:none}
}

/* ===== スマホ（背景は端末幅いっぱい・ボックスは端から約7pxの内側余白） ===== */
@media (max-width:560px){
  /* セクション背景はフルブリード。中身(.wrap)は端から約7px＝文字が縁に触れない */
  .wrap{padding:0 7px}
  section{padding:40px 0}
  .eyebrow{font-size:10.5px;letter-spacing:.14em;padding:6px 12px;margin-bottom:12px}
  h2{font-size:clamp(20px,5.2vw,25px);line-height:1.32;letter-spacing:0}
  .sub{font-size:13px;margin-top:12px;line-height:1.75}
  /* ヘッダー：薄く、ロゴ左／ハンバーガー右へ */
  header{background:#fff}
  .nav{height:48px;padding:0 6px}
  .brand{font-size:15px;gap:7px}
  .brand img.mk{width:23px;height:23px;border-radius:7px}
  .hamb{width:36px;height:36px;gap:4px;padding:0 8px;border-radius:10px}
  /* ボタンを小さく */
  .btn-primary,.btn-light{padding:12px 20px;font-size:14.5px;border-radius:11px;gap:7px}
  /* ヒーロー（見出しを適正サイズに・1文字折返しを防ぐ） */
  .hero{padding:28px 0 34px}
  .hero .pill{font-size:10.5px;padding:5px 11px;margin-bottom:13px}
  .hero h1{font-size:clamp(23px,6.4vw,30px);line-height:1.24}
  .hero h1 .hl{white-space:normal}
  .hero h1 .hl::after{height:.18em}
  .hero .lead{font-size:13.5px;margin-top:14px;line-height:1.75}
  .hero-cta{gap:10px;margin-top:20px}
  .os-note{font-size:11.5px}
  .trust{margin-top:20px;gap:8px 14px}
  .trust span{font-size:12px}
  .trust span i{width:19px;height:19px;font-size:11px}
  /* 端末モックは小さく */
  .hero-mock{margin-top:8px}
  .phone{width:202px;padding:8px;border-radius:32px}
  .phone .glass{height:392px;border-radius:24px}
  .phone::before{top:16px;width:56px;height:5px}
  .hero-mock .phone-after{right:0;transform:none}
  .hero-badge{font-size:10px;padding:6px 9px;border-radius:11px}
  .hero-badge.b1{top:0;right:0}
  .hero-badge.b2{bottom:2%;left:0}
  /* 近日公開帯 */
  .coming-bar{padding:20px 0}
  .coming-play{width:42px;height:42px;font-size:17px;border-radius:12px}
  .coming-txt b{font-size:18px}
  .coming-txt span{font-size:12px}
  .coming-store{font-size:12.5px;padding:10px 16px}
  /* 数字バンド */
  .stats{padding:38px 0}
  .stats .grid{gap:22px 12px}
  .stats .n{font-size:clamp(24px,7.4vw,32px)}
  .stats .l{font-size:11.5px;margin-top:8px}
  /* 悩み */
  .pain{margin-top:26px;gap:11px}
  .pain .row{padding:15px 15px;gap:12px}
  .pain .row .ic{width:38px;height:38px;font-size:18px;border-radius:10px}
  .pain .row p{font-size:14px}
  /* Before/After ＝ 横スライド（縦長を解消） */
  .ba{display:flex;flex-direction:row;gap:12px;overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;margin-top:24px;padding:2px 0 8px;scrollbar-width:none}
  .ba::-webkit-scrollbar{display:none}
  .ba .col{flex:0 0 82%;scroll-snap-align:center}
  .ba .arrow{display:none}
  .ba .cap{font-size:12.5px;padding:6px 14px;margin-bottom:11px}
  .ba .phone{width:100%;max-width:210px;margin:0 auto}
  .ba .phone .glass{height:402px}
  /* 主役機能 */
  .hero-feat{margin-top:26px;gap:22px}
  .hero-feat .copy .tag{font-size:12px;padding:5px 12px;margin-bottom:13px}
  .hero-feat .copy h3{font-size:clamp(17px,4.4vw,21px);line-height:1.5}
  .hero-feat .copy p{font-size:14px;margin-top:13px}
  .hero-feat .copy li{font-size:14px;margin-top:11px}
  .hero-feat .copy li::before{width:21px;height:21px;font-size:12px}
  .feat3{gap:11px;margin-top:26px}
  .feat3 .c{padding:22px 18px}
  .feat3 .c .ic{width:46px;height:46px;font-size:21px;margin-bottom:12px}
  .feat3 .c h3{font-size:16.5px}
  .feat3 .c p{font-size:13.5px}
  .feat-note{margin-top:26px;font-size:13px}
  /* 使い方 */
  .steps{margin-top:26px;gap:20px}
  .step .no{width:54px;height:54px;font-size:21px}
  .step h3{font-size:17px}
  .step p{font-size:13.5px}
  .step-note{margin-top:28px;font-size:14px}
  /* 料金 */
  .plans{margin-top:26px}
  .plans-single{grid-template-columns:1fr}
  .plan{padding:26px 20px 22px}
  .plan h3{font-size:18px}
  .plan.buy-one .price{font-size:38px}
  .trial-note{margin-top:20px;font-size:12.5px}
  /* FAQ */
  .faq-list{margin-top:26px}
  .faq>summary{padding:15px 16px;font-size:14px;gap:10px}
  .faq .faq-ic{width:23px;height:23px;font-size:15px}
  .faq>p{font-size:13.5px;padding:0 16px 16px}
  /* 問い合わせ */
  .contact-card{margin-top:24px;padding:22px 16px;border-radius:14px}
  .contact-card label{font-size:13px;margin:14px 0 6px}
  .contact-card input,.contact-card textarea{font-size:14px;padding:12px}
  .contact-card textarea{min-height:120px}
  .contact-card .submit{font-size:15px;padding:14px}
  /* クロージング */
  .bottom-cta p{font-size:14px}
  .bottom-cta small{font-size:11.5px}
  .bottom-cta .btn-light{margin-top:22px}
  .bottom-cta .soon-pill{font-size:12.5px;padding:8px 16px}
  /* リーガル/特商法ページ：本文幅をTOPと同じ「端から約7px」に合わせる */
  .legal{padding:30px 7px 52px}
  .legal h1{font-size:clamp(22px,5.6vw,27px)}
  .legal .updated{font-size:12px;margin-bottom:20px}
  .legal .lcard{padding:18px 16px;border-radius:12px;margin-bottom:12px}
  .legal h2{font-size:15.5px}
  .legal p,.legal li{font-size:14px;line-height:1.8}
  .legal .strong-box{padding:12px 14px}
  .legal th,.legal td{padding:11px 12px;font-size:13.5px}
  .legal th{width:40%}
  .legal .note{font-size:12px}
  /* フッター（中央寄せ・リンクを折返し整列） */
  footer{padding:30px 0 34px}
  footer .wrap{flex-direction:column;align-items:center;text-align:center;gap:14px}
  footer .wrap>div:first-child{display:flex;flex-wrap:wrap;justify-content:center;gap:9px 16px}
  footer a{margin-right:0}
  footer .wrap>div:last-child{opacity:.78}
}

@media (max-width:380px){
  h2{font-size:clamp(19px,6vw,23px)}
  .hero h1{font-size:clamp(22px,7vw,28px)}
  .stats .grid{grid-template-columns:1fr 1fr}
  .phone{width:188px}
  .phone .glass{height:368px}
  .ba .col{flex:0 0 86%}
}

/* お問い合わせフォーム: 同意チェック＋スパム対策のハニーポット(配色は既存変数のみ) */
.contact-card .consent{display:flex;gap:9px;align-items:flex-start;margin:4px 0 2px;font-size:13.5px;line-height:1.7;color:var(--sub);cursor:pointer}
.contact-card .consent input{margin-top:3px;flex:none;width:18px;height:18px}
.contact-card .consent a{color:var(--brand-d);text-decoration:underline}
.contact-card .consent .req{margin-left:6px}
.hp-field{position:absolute !important;left:-9999px !important;width:1px !important;height:1px !important;overflow:hidden}