@charset "utf-8";

/* =========================================================
   0. デザイントークン
   参考：https://airsleep.jp/recovery/ の配色・トーンを踏襲
   （白／ライトグレー／黒の3面 ＋ ミント・ブルーのアクセント ＋ クリムゾンのCTA）
   ========================================================= */
:root{
  /* ベース面 */
  --c-bg:            #FFFFFF;   /* 基本は純白 */
  --c-bg-tint:       #F2F2F2;   /* ライトグレーのセクション */
  --c-bg-dark:       #000000;   /* 黒の帯 */
  --c-bg-deep:       #04141F;   /* FV用のディープネイビー */
  --c-surface:       #FFFFFF;

  /* アクセント */
  --c-mint:          #8BD2CD;
  --c-mint-deep:     #2A8479;
  --c-blue:          #317BC0;
  --c-blue-deep:     #1E4D8F;
  --c-mint-band:     #B7DEDE;   /* ミントの帯 */

  /* テキスト */
  --c-text:          #1A1A1A;
  --c-text-muted:    #6E6E73;
  --c-text-invert:   #FFFFFF;

  /* CTA */
  --c-cta:           #D7053C;
  --c-cta-hover:     #B60332;
  --c-cta-shadow:    rgba(215,5,60,.28);

  --c-line:          #DCDCDC;
  --c-line-dark:     rgba(255,255,255,.24);

  /* タイポ（参考サイトと同じ游ゴシック系のスタック） */
  --font-base: "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Noto Sans JP", Meiryo, sans-serif;
  --font-head: var(--font-base);
  --font-en:   "Helvetica Neue", Arial, sans-serif;

  /* レイアウト */
  --w-container: 1080px;
  --w-narrow:    760px;
  --pad-x:       clamp(18px, 5vw, 32px);
  --sec-y:       clamp(60px, 9vw, 110px);
  --radius:      4px;
  --radius-lg:   6px;
  --shadow-sm:   0 1px 4px rgba(0,0,0,.06);
  --shadow-md:   0 8px 28px rgba(0,0,0,.10);
  --cta-bar-h:   72px;
}

/* =========================================================
   1. リセット & ベース
   ========================================================= */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:72px; }
body{
  margin:0;
  padding-bottom:var(--cta-bar-h);
  background:var(--c-bg);
  color:var(--c-text);
  font-family:var(--font-base);
  font-size:16px;
  line-height:2;
  letter-spacing:.04em;
  font-feature-settings:"palt" 1;
  -webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;
}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote{ margin:0; }
ul,ol{ padding:0; list-style:none; }
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--c-blue-deep); text-decoration:none; transition:opacity .2s ease, background-color .2s ease, color .2s ease; }
a:hover{ opacity:.75; }
table{ border-collapse:collapse; }
strong{ font-weight:700; }
:focus-visible{ outline:2px solid var(--c-blue); outline-offset:3px; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation:none !important; transition:none !important; }
}

.container{ width:100%; max-width:var(--w-container); margin-inline:auto; padding-inline:var(--pad-x); }
.container--narrow{ max-width:var(--w-narrow); }

.note{
  margin-top:14px;
  font-size:12px;
  line-height:1.9;
  letter-spacing:.02em;
  color:var(--c-text-muted);
}

/* =========================================================
   2. PR表記 / ヘッダー
   ========================================================= */
.pr-label{
  background:var(--c-bg-dark);
  color:rgba(255,255,255,.7);
  font-size:11px;
  letter-spacing:.06em;
  text-align:center;
  padding:6px 12px;
  line-height:1.6;
}

.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--c-line);
}
.header-inner{ display:flex; align-items:center; gap:16px; min-height:58px; }
.brand{ display:flex; align-items:center; gap:10px; color:var(--c-text); font-weight:700; }
.brand__mark{
  width:24px; height:24px; flex:none;
  background:var(--c-bg-dark);
  position:relative;
}
.brand__mark::after{
  content:""; position:absolute; inset:7px;
  background:var(--c-mint);
}
.brand__text{ font-size:15px; letter-spacing:.06em; line-height:1.35; }
.brand__text small{
  display:block; font-family:var(--font-en);
  font-size:9px; font-weight:400; letter-spacing:.24em;
  color:var(--c-text-muted);
}

.gnav{ display:none; margin-left:auto; }
.gnav ul{ display:flex; gap:20px; }
.gnav a{ font-size:12.5px; color:var(--c-text); letter-spacing:.06em; }
.header-cta{ margin-left:auto; }
@media (min-width:960px){
  .gnav{ display:block; }
  .header-cta{ margin-left:0; }
}

/* =========================================================
   3. ボタン
   参考サイトに合わせ、角丸をほぼ無くした矩形＋シェブロン
   ========================================================= */
.btn{
  position:relative;
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px;
  padding:18px 46px 18px 28px;
  border-radius:var(--radius);
  font-weight:700;
  font-size:16px;
  line-height:1.6;
  letter-spacing:.06em;
  text-align:center;
  transition:background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn:hover{ opacity:1; }
.btn::after{
  content:"\00BB";
  position:absolute; right:20px; top:50%; transform:translateY(-50%);
  font-family:var(--font-en);
  font-size:15px; font-weight:400; letter-spacing:-.06em;
}
.btn__sub{ font-size:11px; font-weight:400; letter-spacing:.04em; opacity:.88; }

.btn--cta{ background:var(--c-cta); color:var(--c-text-invert); }
.btn--cta:hover{ background:var(--c-cta-hover); }

.btn--ghost{
  background:transparent;
  color:var(--c-text);
  border:1px solid var(--c-text);
}
.btn--ghost:hover{ background:var(--c-text); color:var(--c-text-invert); }

.btn--lg{ width:100%; max-width:440px; padding:20px 48px 20px 30px; font-size:17px; }
.btn--sm{ padding:9px 30px 9px 16px; font-size:12.5px; border-radius:2px; }
.btn--sm::after{ right:12px; font-size:13px; }

.cta-group{ display:flex; flex-direction:column; align-items:stretch; gap:12px; margin-top:28px; }
.cta-group--center{ align-items:center; margin-top:40px; }
@media (min-width:768px){
  .cta-group{ flex-direction:row; align-items:center; }
  .cta-group--center{ justify-content:center; }
  /* 横並びのときだけ basis を効かせる（縦並びでは高さになってしまうため） */
  .cta-group .btn--lg{ flex:0 1 440px; }
}

/* 暗い面の上に置くボタン */
.hero .btn--ghost,
.final-cta .btn--ghost{ color:var(--c-text-invert); border-color:rgba(255,255,255,.6); }
.hero .btn--ghost:hover,
.final-cta .btn--ghost:hover{ background:var(--c-text-invert); color:var(--c-text); }

/* =========================================================
   4. 固定CTAバー（参考サイト同様、赤×黒の2分割で常時表示）
   ========================================================= */
.sticky-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  display:grid; grid-template-columns:1fr 1fr;
  padding-bottom:env(safe-area-inset-bottom);
}
.sticky-cta__btn{
  position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:var(--cta-bar-h);
  padding:10px 34px 10px 14px;
  color:var(--c-text-invert);
  text-align:center;
  line-height:1.5;
}
.sticky-cta__btn:hover{ opacity:1; }
.sticky-cta__btn::after{
  content:"\00BB";
  position:absolute; right:14px; top:50%; transform:translateY(-50%);
  font-family:var(--font-en); font-size:15px; letter-spacing:-.06em;
  opacity:.85;
}
.sticky-cta__btn--primary{ background:var(--c-cta); }
.sticky-cta__btn--primary:hover{ background:var(--c-cta-hover); }
.sticky-cta__btn--secondary{ background:var(--c-bg-dark); }
.sticky-cta__btn--secondary:hover{ background:#222; }
.sticky-cta__label{ font-size:10.5px; letter-spacing:.1em; opacity:.85; }
.sticky-cta__main{ font-size:clamp(13px, 3.4vw, 15px); font-weight:700; letter-spacing:.04em; }
@media (min-width:768px){
  .sticky-cta__btn{ padding-right:44px; }
  .sticky-cta__btn::after{ right:22px; font-size:17px; }
}

/* =========================================================
   5. セクション共通
   ========================================================= */
.section{ padding-block:var(--sec-y); }
.section--tint{ background:var(--c-bg-tint); }
.section--mint{ background:var(--c-mint-band); }

.section__eyebrow{
  font-family:var(--font-en);
  font-size:11px; font-weight:700; letter-spacing:.32em;
  color:var(--c-mint-deep);
  text-align:center;
  margin-bottom:14px;
}
.section--mint .section__eyebrow{ color:#0F5F58; }
.section__title{
  font-size:clamp(21px, 4.6vw, 34px);
  line-height:1.6;
  font-weight:700;
  letter-spacing:.02em;
  text-align:center;
  margin-bottom:clamp(26px, 4vw, 44px);
}
.section__title::after{
  content:""; display:block;
  width:36px; height:1px;
  background:var(--c-text);
  opacity:.35;
  margin:22px auto 0;
}

.prose p{ margin-bottom:1.3em; }
.prose p:last-child{ margin-bottom:0; }
.prose--center{ max-width:var(--w-narrow); margin-inline:auto; text-align:left; }
@media (min-width:768px){ .prose--center{ text-align:center; } }

/* =========================================================
   6. ファーストビュー（黒地＋光跡）
   ========================================================= */
.hero{
  position:relative;
  overflow:hidden;
  color:var(--c-text-invert);
  background:
    linear-gradient(102deg, transparent 34%, rgba(139,210,205,.16) 47%, transparent 58%),
    linear-gradient(96deg, transparent 52%, rgba(49,123,192,.18) 63%, transparent 74%),
    radial-gradient(88% 62% at 52% 42%, rgba(42,132,121,.34) 0%, transparent 68%),
    var(--c-bg-deep);
  padding-block:clamp(40px, 7vw, 84px);
}
.hero__inner{ display:grid; gap:clamp(28px, 5vw, 52px); }
@media (min-width:960px){
  .hero__inner:not(.hero__inner--solo){ grid-template-columns:1.05fr .95fr; align-items:center; }
}
/* 写真を使わないFV（現在は未使用／画像を外した場合の保険） */
.hero__inner--solo .hero__body{ max-width:840px; margin-inline:auto; }
@media (min-width:768px){
  .hero__inner--solo .hero__body{ text-align:center; }
  .hero__inner--solo .badges,
  .hero__inner--solo .cta-group{ justify-content:center; }
  .hero__inner--solo .cta-group{ align-items:center; }
}

/* 楽天の画像リンク（画像のみ）を暗い面の上に置くための額装 */
/* inline-block だと中の img の max-width:100% が効かず、はみ出すためブロックにする */
.rakuten-pict{
  display:block;
  background:var(--c-surface);
  padding:10px;
  max-width:100%;
  text-align:center;
  line-height:0;
}
.rakuten-pict a{ display:inline-block; max-width:100%; }
.rakuten-pict img{
  max-width:100%;
  width:auto;
  height:auto;
  margin:0 !important;
}
.hero__caption{
  margin-top:12px;
  font-size:11.5px;
  line-height:1.8;
  letter-spacing:.02em;
  color:rgba(255,255,255,.5);
}
.hero__media{ text-align:center; }
@media (min-width:960px){
  .hero__media{ text-align:right; }
  .hero__caption{ text-align:right; }
}
.hero__eyebrow{
  display:inline-block;
  font-size:11px; font-weight:700; letter-spacing:.2em;
  color:#0C1A22;
  background:var(--c-mint);
  padding:5px 14px;
  margin-bottom:20px;
}
.hero__catch{
  font-size:clamp(16px, 4vw, 21px);
  font-weight:500;
  line-height:1.8;
  color:var(--c-mint);
  letter-spacing:.06em;
  margin-bottom:14px;
}
.hero__title{
  font-size:clamp(25px, 6.2vw, 42px);
  line-height:1.55;
  font-weight:700;
  letter-spacing:.02em;
  margin-bottom:20px;
}
.hero__title mark{
  background:linear-gradient(transparent 58%, rgba(139,210,205,.32) 58%);
  color:inherit;
  padding:0 .08em;
}
.hero__lead{ font-size:clamp(14px, 3.4vw, 16px); color:rgba(255,255,255,.78); }
.hero__lead strong{ color:var(--c-mint); }
.hero .note{ color:rgba(255,255,255,.45); }

.badges{ display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; }
.badge{
  font-size:11.5px; font-weight:500; line-height:1.7;
  letter-spacing:.06em;
  color:var(--c-text-invert);
  border:1px solid rgba(255,255,255,.45);
  padding:5px 13px;
}

.hero__media{ order:-1; }
@media (min-width:960px){ .hero__media{ order:0; } }

/* 画像プレースホルダ（実画像に差し替え） */
.img-placeholder{
  display:grid; place-items:center;
  background:
    repeating-linear-gradient(45deg, rgba(0,0,0,.04) 0 12px, transparent 12px 24px),
    var(--c-bg-tint);
  border:1px dashed rgba(0,0,0,.22);
  border-radius:var(--radius);
  color:var(--c-text-muted);
  font-size:12px; text-align:center; letter-spacing:.08em;
}
.img-placeholder--dark{
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 12px, transparent 12px 24px),
    rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.28);
  color:rgba(255,255,255,.6);
}

/* =========================================================
   7. チェックリスト（共感パート）
   ========================================================= */
.checklist{
  background:var(--c-surface);
  border:1px solid var(--c-line);
  border-top:3px solid var(--c-mint-deep);
  padding:clamp(20px, 5vw, 36px);
  margin-bottom:clamp(28px, 5vw, 40px);
  display:grid; gap:12px;
}
.checklist li{
  position:relative;
  padding-left:34px;
  font-size:clamp(14px, 3.4vw, 15.5px);
  font-weight:500;
  line-height:1.85;
}
.checklist li::before{
  content:"";
  position:absolute; left:0; top:.52em;
  width:19px; height:19px;
  border:1px solid var(--c-mint-deep);
}
.checklist li::after{
  content:"";
  position:absolute; left:5px; top:.72em;
  width:9px; height:5px;
  border-left:2px solid var(--c-mint-deep); border-bottom:2px solid var(--c-mint-deep);
  transform:rotate(-45deg);
}

/* =========================================================
   8. カード
   ========================================================= */
.cards{ display:grid; gap:20px; }
@media (min-width:700px){ .cards--3{ grid-template-columns:repeat(3, 1fr); } }

.card{
  background:var(--c-surface);
  border:1px solid var(--c-line);
  padding:clamp(22px, 4vw, 30px);
}
.section--mint .card{ border-color:transparent; }
.card__icon{
  width:38px; height:38px;
  display:grid; place-items:center;
  background:var(--c-bg-dark);
  color:var(--c-mint);
  font-family:var(--font-en); font-size:13px; font-weight:700; letter-spacing:.04em;
  margin-bottom:16px;
}
.card__title{
  font-size:17px; font-weight:700; line-height:1.65;
  letter-spacing:.02em;
  margin-bottom:10px;
}
.card p{ font-size:14px; color:var(--c-text-muted); line-height:1.95; }

/* 概要パネル */
.panel{
  margin-top:clamp(26px, 4vw, 40px);
  background:var(--c-surface);
  border:1px solid var(--c-line);
  padding:clamp(20px, 5vw, 36px);
}
.panel__title{
  font-size:18px; font-weight:700; letter-spacing:.04em;
  padding-bottom:14px; margin-bottom:6px;
  border-bottom:1px solid var(--c-text);
}
.spec__row{
  display:grid;
  grid-template-columns:1fr;
  gap:2px;
  padding:14px 0;
  border-bottom:1px solid var(--c-line);
}
.spec__row:last-child{ border-bottom:0; }
.spec dt{ font-size:12.5px; font-weight:700; letter-spacing:.08em; color:var(--c-mint-deep); }
.spec dd{ margin:0; font-size:15px; }
@media (min-width:600px){
  .spec__row{ grid-template-columns:180px 1fr; gap:16px; align-items:baseline; }
}

/* =========================================================
   9. 比較表
   ========================================================= */
.table-wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border:1px solid var(--c-line);
  background:var(--c-surface);
}
.ctable{
  width:100%;
  min-width:720px;
  font-size:14px;
  line-height:1.85;
}
.ctable th,.ctable td{
  padding:15px 16px;
  border-bottom:1px solid var(--c-line);
  border-right:1px solid var(--c-line);
  text-align:left;
  vertical-align:top;
  letter-spacing:.02em;
}
.ctable th:last-child,.ctable td:last-child{ border-right:0; }
.ctable tbody tr:last-child th,.ctable tbody tr:last-child td{ border-bottom:0; }
.ctable thead th{
  background:var(--c-bg-dark);
  color:var(--c-text-invert);
  font-size:13px;
  font-weight:700;
  letter-spacing:.06em;
  white-space:nowrap;
  border-right-color:rgba(255,255,255,.22);
  border-bottom:0;
}
.ctable thead th.is-highlight{ background:var(--c-cta); }
.ctable tbody th{
  background:var(--c-bg-tint);
  font-size:13px;
  font-weight:700;
  white-space:nowrap;
}
.ctable td.is-highlight{
  background:rgba(215,5,60,.045);
  border-left:1px solid rgba(215,5,60,.25);
  border-right:1px solid rgba(215,5,60,.25);
  font-weight:500;
}

/* =========================================================
   10. 口コミ
   ========================================================= */
.voices{ display:grid; gap:20px; }
@media (min-width:700px){ .voices{ grid-template-columns:repeat(2, 1fr); } }
.voice{
  background:var(--c-surface);
  border:1px solid var(--c-line);
  border-top:3px solid var(--c-mint-deep);
  padding:clamp(20px, 4vw, 28px);
}
.voice--caution{ border-top-color:var(--c-text-muted); }
.voice__head{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.voice__avatar{
  width:40px; height:40px; flex:none;
  border-radius:50%;
  display:grid; place-items:center;
  background:var(--c-bg-dark);
  color:var(--c-mint);
  font-family:var(--font-en); font-weight:700;
}
.voice__name{ font-size:14px; font-weight:700; line-height:1.6; letter-spacing:.04em; }
.voice__meta{ font-size:11.5px; color:var(--c-text-muted); line-height:1.6; letter-spacing:.06em; }
.voice__text{ font-size:14.5px; line-height:1.95; }

/* =========================================================
   11. 価格 / 購入メリット
   ========================================================= */
.price-box{
  background:var(--c-surface);
  border:1px solid var(--c-line);
  border-top:4px solid var(--c-cta);
  padding:clamp(24px, 5vw, 38px);
  text-align:center;
  margin-bottom:clamp(28px, 5vw, 40px);
}
.price-box__label{
  display:inline-block;
  font-size:11.5px; font-weight:700; letter-spacing:.14em;
  color:var(--c-text-invert); background:var(--c-cta);
  padding:4px 16px;
  margin-bottom:14px;
}
.price-box__value{
  font-family:var(--font-en);
  font-weight:700; line-height:1.05;
  color:var(--c-cta);
  display:flex; align-items:baseline; justify-content:center; gap:1px;
}
.price-box__value .num{ font-size:clamp(42px, 11vw, 64px); letter-spacing:-.01em; }
.price-box__value .unit{ font-family:var(--font-base); font-size:clamp(17px, 4.2vw, 22px); margin-left:3px; }
.price-box__value .tilde{ font-size:clamp(17px, 4.2vw, 22px); margin-left:4px; }
.price-box__range{ font-size:14px; font-weight:500; margin-top:10px; letter-spacing:.04em; }
.price-box__note{ font-size:12px; color:var(--c-text-muted); margin-top:10px; line-height:1.9; }

.merits{ display:grid; gap:1px; margin-top:clamp(20px, 4vw, 30px); background:var(--c-line); border:1px solid var(--c-line); }
.merits li{
  display:grid;
  grid-template-columns:1fr;
  gap:2px;
  background:var(--c-surface);
  padding:16px 18px;
  font-size:14px;
}
.merits strong{ font-size:12.5px; letter-spacing:.08em; color:var(--c-mint-deep); }
@media (min-width:600px){
  .merits li{ grid-template-columns:200px 1fr; gap:16px; align-items:baseline; }
}

/* =========================================================
   12. FAQ
   ========================================================= */
.faq{ display:grid; gap:1px; background:var(--c-line); border:1px solid var(--c-line); }
.faq__item{ background:var(--c-surface); }
.faq__q{
  position:relative;
  list-style:none;
  cursor:pointer;
  padding:20px 52px 20px 52px;
  font-size:15px; font-weight:700; line-height:1.75; letter-spacing:.02em;
}
.faq__q::-webkit-details-marker{ display:none; }
.faq__q::before{
  content:"Q";
  position:absolute; left:18px; top:21px;
  width:22px; height:22px;
  display:grid; place-items:center;
  background:var(--c-bg-dark); color:var(--c-mint);
  font-family:var(--font-en); font-size:12px;
}
.faq__q::after{
  content:"";
  position:absolute; right:22px; top:28px;
  width:9px; height:9px;
  border-right:1.5px solid var(--c-text);
  border-bottom:1.5px solid var(--c-text);
  transform:rotate(45deg);
  transition:transform .22s ease;
}
.faq__item[open] .faq__q::after{ transform:rotate(-135deg); }
.faq__a{
  padding:18px 22px 24px 52px;
  border-top:1px solid var(--c-line);
}
.faq__a p{ font-size:14.5px; color:var(--c-text-muted); line-height:1.95; }
.faq__a .table-wrap{ margin:16px 0 4px; }
.faq__a .note{ margin-top:12px; }

/* =========================================================
   13. 最終CTA（黒地・上辺をシェブロンで抜く）
   ========================================================= */
.final-cta{
  background:var(--c-bg-dark);
  color:var(--c-text-invert);
  padding-top:var(--sec-y);
  padding-bottom:calc(var(--sec-y) + 46px);
  text-align:center;
  /* 参考サイトと同じ、黒面が下向きに切り込むシェブロン */
  clip-path:polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 52px), 0 100%);
}
.final-cta__title{
  font-size:clamp(21px, 4.8vw, 33px);
  line-height:1.6; font-weight:700; letter-spacing:.02em;
  margin-bottom:18px;
}
.final-cta__lead{
  font-size:clamp(14px, 3.4vw, 16px);
  color:rgba(255,255,255,.75);
  max-width:640px; margin-inline:auto;
}
.assurance{
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px 10px;
  margin-top:28px;
}
.assurance li{
  font-size:11.5px; letter-spacing:.06em;
  border:1px solid rgba(255,255,255,.4);
  padding:5px 14px;
}

/* =========================================================
   14. フッター
   ========================================================= */
.site-footer{
  background:var(--c-bg-tint);
  color:var(--c-text-muted);
  padding-top:clamp(34px, 6vw, 52px);
  padding-bottom:clamp(34px, 6vw, 52px);
  font-size:13px;
  border-top:1px solid var(--c-line);
}
.fnav ul{ display:flex; flex-wrap:wrap; gap:10px 24px; justify-content:center; margin-bottom:22px; }
.fnav a{ color:var(--c-text); font-size:12.5px; letter-spacing:.04em; }
.disclaimer{
  font-size:11.5px; line-height:2;
  max-width:var(--w-narrow); margin-inline:auto;
}
.copyright{ text-align:center; font-family:var(--font-en); font-size:11px; margin-top:22px; letter-spacing:.1em; }

/* =========================================================
   15. 補助
   ========================================================= */
.note--inline{
  display:block;
  max-width:var(--w-narrow);
  margin-inline:auto;
  padding:14px 18px;
  background:var(--c-bg-tint);
  border-left:3px solid var(--c-mint-deep);
  text-align:left;
}
.section--tint .note--inline{ background:var(--c-surface); }

.ctable--price{ min-width:420px; }
.ctable--price thead th{ background:#333; }
.ctable--price tbody th{ white-space:nowrap; }

.voice__text small{
  display:block;
  margin-top:10px;
  font-size:12.5px;
  color:var(--c-text-muted);
}

/* =========================================================
   16. 楽天アフィリエイトの商品画像リンク差し込み枠
   ========================================================= */
.rakuten-item{
  display:flex; justify-content:center;
  padding:clamp(20px, 4vw, 28px);
  background:var(--c-surface);
  border:1px solid var(--c-line);
  margin-bottom:clamp(20px, 4vw, 28px);
}
.rakuten-item img{ margin-inline:auto; }
/* 楽天が生成したソースはHTMLを変更せず、見た目だけここで上書きする */
.rakuten-item > table{ width:100%; }
.rakuten-item > table > tbody > tr > td{ padding:0; }
/* 外枠：角丸と枠線をLPのトーンに合わせる */
.rakuten-item div[style]{
  width:auto !important;
  max-width:100% !important;
  border-color:var(--c-line) !important;
  border-radius:0 !important;
}
/* 「楽天で購入」ボタンだけは楽天側の角丸を維持する */
.rakuten-item div[style*="background-color:#bf0000"]{
  border-radius:16px !important;
  width:auto !important;
  min-width:140px;
}
.rakuten-item img{ max-width:100%; height:auto; }
.rakuten-item a{ color:var(--c-blue-deep); }

/* 狭い画面では画像とテキストを縦積みにする */
@media (max-width:719px){
  .rakuten-item table table,
  .rakuten-item table table tbody,
  .rakuten-item table table tr{ display:block; width:100%; }
  .rakuten-item table table td{
    display:block !important;
    width:100% !important;
  }
  .rakuten-item div[style*="margin:15px"]{ margin:14px 6px !important; overflow:hidden; }
}

/* =========================================================
   17. レビュー評価のサマリー
   ========================================================= */
.rating{
  display:grid;
  gap:clamp(18px, 3vw, 30px);
  background:var(--c-surface);
  border:1px solid var(--c-line);
  padding:clamp(20px, 4vw, 32px);
  margin-bottom:clamp(20px, 4vw, 28px);
  align-items:center;
}
@media (min-width:640px){
  .rating{ grid-template-columns:200px 1fr; }
}
.rating__score{ text-align:center; }
.rating__num{
  font-family:var(--font-en);
  font-size:clamp(38px, 9vw, 50px);
  font-weight:700; line-height:1;
  color:var(--c-text);
}
.rating__stars{
  font-size:17px;
  letter-spacing:.16em;
  color:var(--c-cta);
  line-height:1.6;
  margin-top:6px;
}
.rating__count{ font-size:12px; color:var(--c-text-muted); letter-spacing:.06em; }

.rating__bars{ display:grid; gap:7px; }
.rating__bars li{
  display:grid;
  grid-template-columns:34px 1fr 46px;
  align-items:center;
  gap:10px;
  font-size:12px;
  line-height:1.5;
}
.rating__label{ color:var(--c-text-muted); letter-spacing:.04em; }
.rating__bar{
  display:block;
  height:8px;
  background:var(--c-bg-tint);
  overflow:hidden;
}
.rating__bar i{
  display:block; height:100%;
  background:var(--c-mint-deep);
}
.rating__n{ text-align:right; color:var(--c-text-muted); font-family:var(--font-en); }

/* =========================================================
   18. 本文中の図版（楽天の画像リンクを明るい面に置く場合）
   ========================================================= */
.figure{ margin:18px 0 6px; }
.figure--center{ text-align:center; }
.rakuten-pict--light{
  padding:0;
  border:1px solid var(--c-line);
}
.figure__caption{
  margin-top:10px;
  font-size:11.5px;
  line-height:1.8;
  letter-spacing:.02em;
  color:var(--c-text-muted);
  text-align:left;
}
@media (min-width:600px){
  .figure--center .figure__caption{ text-align:center; }
}

/* =========================================================
   19. グリッド項目のはみ出し防止
   grid item は min-width:auto（= min-content）が既定のため、
   中に実寸の大きい画像が入るとトラックごと親を突き破る。
   ========================================================= */
.faq,
.cards,
.voices,
.merits,
.steps,
.hero__inner,
.rating{ grid-template-columns:minmax(0, 1fr); }
@media (min-width:640px){
  .rating{ grid-template-columns:200px minmax(0, 1fr); }
}
@media (min-width:700px){
  .cards--3{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .voices{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (min-width:960px){
  .hero__inner:not(.hero__inner--solo){ grid-template-columns:1.05fr minmax(0, .95fr); }
}
.faq__item,
.faq__a,
.card,
.voice,
.hero__body,
.hero__media{ min-width:0; }

/* =========================================================
   20. 商品概要パネル（画像＋スペック表の2カラム）
   ========================================================= */
.panel__body{
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  gap:clamp(18px, 3vw, 30px);
  align-items:start;
  margin-top:16px;
}
@media (min-width:860px){
  .panel__body{ grid-template-columns:300px minmax(0, 1fr); }
}
.panel__figure{ min-width:0; }
.panel__main{ min-width:0; }
.panel__main .spec__row:first-child{ padding-top:0; }

/* 共通ページへのフッターリンク */
.fnav__sub{
  display:flex; flex-wrap:wrap; gap:10px 24px; justify-content:center;
  margin:14px 0 20px;
  padding-top:14px;
  border-top:1px solid var(--c-line);
}
.fnav__sub a{ color:var(--c-text); font-size:12.5px; letter-spacing:.04em; }