/* ==========================================================================
   ぽすと あんしん デジタル サポート
   日本郵便 × OPCON OEM モックアップ スタイル
   設計指針: 高齢者・タブレット利用者最優先 / 18px以上ベース / 大型タッチターゲット
   ========================================================================== */

:root {
  /* ----- 日本郵便 コーポレートカラー ----- */
  --jp-red:        #EE0011;  /* 郵便マーク赤 (主要) */
  --jp-red-dark:   #C9000F;  /* 押下/ホバー */
  --jp-red-soft:   #FFE9EB;  /* 背景アクセント */
  --jp-cream:      #FFF8F2;  /* ベース紙色 */
  --jp-white:      #FFFFFF;
  --jp-ink:        #1A1A1A;  /* 本文 (ハイコントラスト) */
  --jp-sub:        #4A4A4A;  /* 副次テキスト */
  --jp-line:       #E5DCD2;  /* 罫線 (温かい灰) */
  --jp-gold:       #C49A45;  /* スタンプ装飾 */
  --jp-blue:       #0E3D7E;  /* 信頼アクセント (ぽすくま帽子色) */
  --jp-leaf:       #2C7A3B;  /* 完了/安心 緑 */

  /* ----- タイポグラフィ (高齢者最適化) ----- */
  --font-jp: "Hiragino Maru Gothic ProN", "Hiragino Kaku Gothic ProN",
             "Yu Gothic Medium", "Meiryo", system-ui, sans-serif;
  --font-display: "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho",
                  "Hiragino Maru Gothic ProN", serif;

  --fs-mega:  64px;  /* ヒーロー */
  --fs-h1:    44px;
  --fs-h2:    34px;
  --fs-h3:    26px;
  --fs-body:  20px;  /* シニアでも読める基準 */
  --fs-large: 24px;
  --fs-huge:  30px;
  --fs-small: 18px;  /* これ以下は使わない */

  --lh-tight:   1.4;
  --lh-normal:  1.75;
  --lh-loose:   2.0;

  /* ----- スペーシング (ゆとり) ----- */
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 32px;
  --sp-5: 48px;
  --sp-6: 64px;
  --sp-7: 96px;

  /* ----- 角丸/影 (やわらかさ) ----- */
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  --shadow-card:   0 6px 18px rgba(60, 30, 20, 0.06);
  --shadow-cta:    0 8px 0 var(--jp-red-dark);
  --shadow-cta-hv: 0 4px 0 var(--jp-red-dark);

  /* ----- タッチターゲット (シニア+タブレット) ----- */
  --tap-min: 88px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-jp);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--jp-ink);
  background: var(--jp-cream);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "palt";
}

img { max-width: 100%; display: block; }
a { color: var(--jp-red); text-decoration: underline; text-underline-offset: 4px; }

/* ふりがな ruby — base 文字を ふりがな幅に合わせて広げない (入 力 のような間隔ずれを防ぐ) */
ruby {
  ruby-position: over;
  ruby-align: start;
}
rt {
  font-size: 0.55em;
  color: var(--jp-sub);
  font-weight: 500;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

/* ==========================================================================
   ヘッダー
   ========================================================================== */
.site-header {
  background: var(--jp-white);
  border-bottom: 4px solid var(--jp-red);
  padding: var(--sp-3) var(--sp-5);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.header-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}

.logo-lockup {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.logo-mark {
  width: 64px;
  height: 64px;
  background: var(--jp-red);
  color: var(--jp-white);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 38px;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 0 0 4px var(--jp-white), 0 0 0 6px var(--jp-red);
  /* 〒モチーフ */
}

.logo-text { line-height: 1.2; }
.logo-brand {
  font-size: var(--fs-large);
  font-weight: 800;
  color: var(--jp-red);
  letter-spacing: 0.05em;
}
.logo-sub {
  font-size: var(--fs-small);
  color: var(--jp-sub);
  letter-spacing: 0.1em;
}

.header-help {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-large);
}
.header-help .phone {
  background: var(--jp-red-soft);
  color: var(--jp-red-dark);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-pill);
  font-weight: 800;
  font-size: var(--fs-huge);
  letter-spacing: 0.04em;
  text-decoration: none;
  border: 2px solid var(--jp-red);
}
.header-help .phone-label {
  font-size: var(--fs-small);
  color: var(--jp-sub);
}

/* ==========================================================================
   ヒーロー (ファーストビュー収まり優先 / 高さ抑制)
   ========================================================================== */
.hero {
  background:
    radial-gradient(1200px 600px at 90% -10%, var(--jp-red-soft), transparent 60%),
    var(--jp-cream);
  /* sticky ヘッダーとの間隔を確保 (上部パディング 64px) */
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
  position: relative;
  overflow: hidden;
  min-height: 620px;
  max-height: 880px;
  display: flex;
  align-items: center;
}

.hero::before {
  /* 和柄 七宝紋風うっすらパターン */
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 12px 12px, var(--jp-red-soft) 1.5px, transparent 1.6px);
  background-size: 36px 36px;
  opacity: 0.5;
  pointer-events: none;
}

.hero-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: var(--sp-6);
  align-items: center;
  position: relative;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--jp-white);
  color: var(--jp-red);
  border: 2px solid var(--jp-red);
  border-radius: var(--radius-pill);
  padding: var(--sp-1) var(--sp-3);
  font-size: var(--fs-body);
  font-weight: 800;
  margin-bottom: var(--sp-3);
}
.hero-eyebrow::before {
  content: "〒";
  font-weight: 900;
}

.hero-title {
  font-family: var(--font-display);
  font-size: 56px;
  font-weight: 900;
  line-height: 1.2;
  color: var(--jp-ink);
  margin-bottom: var(--sp-2);
  letter-spacing: 0.02em;
}
.hero-title .accent {
  color: var(--jp-red);
  position: relative;
}
.hero-title .accent::after {
  /* 朱印風アンダーライン */
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -8px;
  height: 8px;
  background: var(--jp-red);
  opacity: 0.18;
  border-radius: 4px;
}

.hero-lead {
  font-size: var(--fs-large);
  line-height: var(--lh-normal);
  color: var(--jp-sub);
  margin-bottom: var(--sp-4);
  max-width: 560px;
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

.hero-trust {
  margin-top: var(--sp-3);
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.hero-trust .badge {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--jp-white);
  border: 2px solid var(--jp-line);
  border-radius: var(--radius-md);
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-body);
  font-weight: 700;
}
.hero-trust .badge .check {
  width: 32px; height: 32px;
  background: var(--jp-leaf);
  color: var(--jp-white);
  border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 900;
}

.hero-art {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--jp-white);
  border: 4px solid var(--jp-white);
  box-shadow: var(--shadow-card), 0 0 0 6px var(--jp-red-soft);
}
.hero-art img { width: 100%; height: auto; }

.hero-stamp {
  /* 朱印風スタンプ */
  position: absolute;
  top: -16px;
  right: -16px;
  width: 110px;
  height: 110px;
  background: var(--jp-red);
  color: var(--jp-white);
  border: 4px solid var(--jp-cream);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 18px;
  line-height: 1.15;
  text-align: center;
  letter-spacing: 0.05em;
  transform: rotate(-12deg);
  box-shadow: 0 6px 0 var(--jp-red-dark);
}
.hero-stamp small { font-size: 11px; opacity: 0.9; display: block; margin-top: 2px; }

/* ==========================================================================
   巨大CTAボタン (タッチターゲット88px+)
   ========================================================================== */
.btn {
  font-family: var(--font-jp);
  font-size: var(--fs-huge);
  font-weight: 900;
  text-decoration: none;
  border: 0;
  border-radius: var(--radius-md);
  padding: var(--sp-2) var(--sp-5);
  min-height: var(--tap-min);
  display: inline-flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;  /* gap 0 で ruby/text の分裂を防ぐ (16px ギャップ撲滅) */
  cursor: pointer;
  letter-spacing: 0;
  line-height: 1.3;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  white-space: nowrap;
  text-align: center;
}
.btn > * { flex-shrink: 0; }

.btn-primary {
  background: var(--jp-red);
  color: var(--jp-white);
  box-shadow: var(--shadow-cta);
}
.btn-primary:hover, .btn-primary:focus-visible {
  transform: translateY(4px);
  box-shadow: var(--shadow-cta-hv);
}
.btn-primary .arrow { font-size: 1.2em; }

.btn-ghost {
  background: var(--jp-white);
  color: var(--jp-red);
  border: 3px solid var(--jp-red);
}
.btn-ghost:hover { background: var(--jp-red-soft); }

.btn-block { width: 100%; }
.btn-jumbo {
  font-size: 36px;
  min-height: 110px;
  padding: 0 var(--sp-6);
  border-radius: var(--radius-lg);
}

/* ==========================================================================
   電話ボタン (シニア向け 大型タッチ)
   ========================================================================== */
.btn-call {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  background: var(--jp-white);
  color: var(--jp-red);
  border: 4px solid var(--jp-red);
  border-radius: var(--radius-pill);
  padding: var(--sp-2) var(--sp-4);
  text-decoration: none;
  font-family: var(--font-jp);
  min-height: var(--tap-min);
  box-shadow: 0 6px 0 var(--jp-red-dark);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.btn-call:hover, .btn-call:focus-visible {
  transform: translateY(3px);
  box-shadow: 0 3px 0 var(--jp-red-dark);
  background: var(--jp-red-soft);
}
.btn-call .icon {
  width: 56px; height: 56px;
  background: var(--jp-red);
  color: var(--jp-white);
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 28px;
  flex-shrink: 0;
}
.btn-call .meta {
  display: flex; flex-direction: column;
  align-items: flex-start;
  line-height: 1.2;
}
.btn-call .label {
  font-size: var(--fs-small);
  color: var(--jp-sub);
  font-weight: 700;
}
.btn-call .number {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 900;
  letter-spacing: 0.04em;
  color: var(--jp-red);
}
.btn-call .hours {
  font-size: 14px;
  color: var(--jp-sub);
  font-weight: 500;
}

.btn-call--giant {
  flex-direction: column;
  background: var(--jp-white);
  color: var(--jp-red);
  border-width: 5px;
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--radius-lg);
}
.btn-call--giant .icon { width: 72px; height: 72px; font-size: 36px; }
.btn-call--giant .meta { align-items: center; text-align: center; gap: 4px; }
.btn-call--giant .number { font-size: 56px; }
.btn-call--giant .label { font-size: var(--fs-large); }
.btn-call--giant .hours { font-size: var(--fs-body); }

.btn-call--inverse {
  background: var(--jp-white);
  color: var(--jp-red);
  border-color: var(--jp-white);
  box-shadow: 0 6px 0 rgba(0,0,0,0.18);
}
.btn-call--inverse:hover { background: var(--jp-cream); }

/* ヘッダー用コンパクト版 */
.btn-call--compact {
  padding: var(--sp-1) var(--sp-3);
  min-height: 64px;
  border-width: 3px;
  box-shadow: 0 4px 0 var(--jp-red-dark);
}
.btn-call--compact .icon { width: 44px; height: 44px; font-size: 22px; }
.btn-call--compact .number { font-size: 26px; }
.btn-call--compact .label { font-size: 14px; }
.btn-call--compact .hours { font-size: 12px; }

/* メールリンク・住所などをボタン化 */
.btn-info {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 0;
  background: var(--jp-white);
  border: 3px solid var(--jp-line);
  border-radius: var(--radius-pill);
  padding: var(--sp-2) var(--sp-3);
  text-decoration: none;
  color: var(--jp-ink);
  font-size: var(--fs-body);
  font-weight: 700;
  min-height: 64px;
  letter-spacing: 0;
  line-height: 1.4;
}
.btn-info:hover { border-color: var(--jp-red); background: var(--jp-red-soft); }
.btn-info .icon {
  width: 36px; height: 36px;
  background: var(--jp-red); color: white;
  border-radius: 50%;
  display: inline-grid; place-items: center;
  font-size: 18px;
  margin-right: var(--sp-2);
  flex-shrink: 0;
}

/* ==========================================================================
   セクション共通
   ========================================================================== */
.section {
  padding: var(--sp-6) var(--sp-5);
  position: relative;
}
.section-inner {
  max-width: 1280px;
  margin: 0 auto;
}
.section-eyebrow {
  display: inline-block;
  font-size: var(--fs-body);
  font-weight: 800;
  color: var(--jp-red);
  margin-bottom: var(--sp-2);
  letter-spacing: 0.04em;
}
.section-eyebrow::before {
  display: inline-block;
  vertical-align: middle;
  margin-right: var(--sp-2);
}
.section-eyebrow::before {
  content: "";
  width: 36px;
  height: 4px;
  background: var(--jp-red);
  border-radius: 2px;
}
.section-title {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 900;
  line-height: 1.3;
  color: var(--jp-ink);
  margin-bottom: var(--sp-5);
}
.section-title .accent { color: var(--jp-red); }

.section-lead {
  font-size: var(--fs-large);
  color: var(--jp-sub);
  line-height: var(--lh-loose);
  margin-bottom: var(--sp-5);
  max-width: 760px;
}

/* ==========================================================================
   安心3つのポイント
   ========================================================================== */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
}
.pillar {
  background: var(--jp-white);
  border: 3px solid var(--jp-line);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  text-align: center;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.pillar:hover {
  transform: translateY(-4px);
  border-color: var(--jp-red);
}
.pillar-icon {
  width: 140px;
  height: 140px;
  margin: 0 auto var(--sp-3);
  border-radius: 50%;
  background: var(--jp-red-soft);
  padding: var(--sp-2);
  border: 3px dashed var(--jp-red);
}
.pillar-icon img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; }
.pillar-no {
  display: inline-block;
  background: var(--jp-red);
  color: var(--jp-white);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-large);
  width: 56px; height: 56px;
  border-radius: 50%;
  line-height: 56px;
  margin-bottom: var(--sp-2);
}
.pillar-title {
  font-size: var(--fs-h3);
  font-weight: 900;
  margin-bottom: var(--sp-2);
}
.pillar-desc {
  font-size: var(--fs-large);
  color: var(--jp-sub);
  line-height: var(--lh-normal);
}

/* ==========================================================================
   3ステップ 使い方
   ========================================================================== */
.steps-section { background: var(--jp-white); }
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
  position: relative;
}
.step {
  background: var(--jp-cream);
  border: 3px solid var(--jp-line);
  border-radius: var(--radius-lg);
  padding: var(--sp-4);
  position: relative;
}
.step-num {
  position: absolute;
  top: -28px;
  left: var(--sp-4);
  background: var(--jp-red);
  color: var(--jp-white);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 28px;
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--radius-pill);
  box-shadow: 0 4px 0 var(--jp-red-dark);
  letter-spacing: 0.1em;
}
.step-art {
  border-radius: var(--radius-md);
  overflow: hidden;
  margin: var(--sp-3) 0;
  background: var(--jp-white);
  aspect-ratio: 4/3;
}
.step-art img { width: 100%; height: 100%; object-fit: cover; }
.step-title {
  font-size: var(--fs-h3);
  font-weight: 900;
  color: var(--jp-ink);
  margin-bottom: var(--sp-2);
}
.step-desc {
  font-size: var(--fs-large);
  color: var(--jp-sub);
  line-height: var(--lh-loose);
}
.step-arrow {
  /* デスクトップで矢印を間に挿入したいが、CSSのみで対応 */
  display: none;
}

/* ==========================================================================
   商品グリッド (月額サブスクの製品ラインナップ)
   ========================================================================== */
.products-section { background: var(--jp-cream); }
.product-tabs {
  display: inline-flex;
  background: var(--jp-white);
  border-radius: var(--radius-pill);
  padding: 6px;
  border: 2px solid var(--jp-line);
  margin-bottom: var(--sp-4);
  gap: 4px;
}
.product-tabs label {
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-pill);
  font-size: var(--fs-large);
  font-weight: 800;
  color: var(--jp-sub);
  cursor: pointer;
}
.product-tabs label:has(input:checked) {
  background: var(--jp-red);
  color: var(--jp-white);
}
.product-tabs input { display: none; }

.products {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
}
.product {
  background: var(--jp-white);
  border: 3px solid var(--jp-line);
  border-radius: var(--radius-lg);
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.product:hover { transform: translateY(-4px); border-color: var(--jp-red); }
.product.is-recommend {
  border-color: var(--jp-red);
  border-width: 4px;
  box-shadow: 0 8px 0 var(--jp-red-soft);
}
.product-cover {
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: var(--sp-3);
  aspect-ratio: 16 / 10;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 900;
  color: var(--jp-white);
  text-align: center;
  position: relative;
}
.product-cover .brand {
  font-size: 22px;
  letter-spacing: 0.06em;
}
.product-cover .device {
  font-size: 16px;
  opacity: 0.95;
  margin-top: 4px;
}
/* 製品ごとに異なる地色 */
.product--av .product-cover    { background: linear-gradient(135deg, #C9000F, #EE0011); }
.product--gamer .product-cover { background: linear-gradient(135deg, #1A4DA0, #2C7AC0); }
.product--mobile .product-cover{ background: linear-gradient(135deg, #2C7A3B, #4DAF55); }
.product--family .product-cover{ background: linear-gradient(135deg, #C49A45, #DCB970); }
.product--pc-care .product-cover{ background: linear-gradient(135deg, #6B4FA8, #9476CC); }
.product--vpn .product-cover   { background: linear-gradient(135deg, #1A1A1A, #4A4A4A); }

.product-badge {
  position: absolute;
  top: -16px;
  right: var(--sp-3);
  background: var(--jp-red);
  color: var(--jp-white);
  font-weight: 900;
  font-size: var(--fs-body);
  padding: 4px var(--sp-3);
  border-radius: var(--radius-pill);
  box-shadow: 0 4px 0 var(--jp-red-dark);
  z-index: 1;
}
.product-name {
  font-size: var(--fs-h3);
  font-weight: 900;
  color: var(--jp-ink);
  margin-bottom: var(--sp-1);
  line-height: 1.3;
}
.product-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: var(--sp-2);
}
.product-tags .tag {
  font-size: 14px;
  font-weight: 700;
  background: var(--jp-red-soft);
  color: var(--jp-red);
  padding: 2px 10px;
  border-radius: var(--radius-pill);
}
.product-desc {
  font-size: var(--fs-body);
  color: var(--jp-sub);
  margin-bottom: var(--sp-3);
  line-height: var(--lh-normal);
}
.product-price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  background: var(--jp-red-soft);
  border-radius: var(--radius-md);
  padding: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-3);
}
.product-price .yen {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 900;
  color: var(--jp-red);
  line-height: 1;
}
.product-price .unit { font-size: var(--fs-body); color: var(--jp-sub); font-weight: 700; }
.product-price .original {
  font-size: var(--fs-small);
  color: var(--jp-sub);
  text-decoration: line-through;
  margin-left: auto;
}
.product .btn { margin-top: auto; }

/* ===== 選択トグル (チェックボックス代わり) ===== */
.product-select {
  position: relative;
  margin-top: auto;
}
.product-select input { display: none; }
.product-select label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  width: 100%;
  min-height: 80px;
  background: var(--jp-white);
  color: var(--jp-red);
  border: 4px solid var(--jp-red);
  border-radius: var(--radius-md);
  font-family: var(--font-jp);
  font-size: var(--fs-huge);
  font-weight: 900;
  cursor: pointer;
  transition: all 0.15s ease;
  letter-spacing: 0.05em;
}
.product-select label .check-box {
  width: 36px; height: 36px;
  border: 3px solid var(--jp-red);
  border-radius: 8px;
  display: grid; place-items: center;
  background: var(--jp-white);
  color: var(--jp-red);
  font-weight: 900;
  font-size: 24px;
}
.product-select label:hover { background: var(--jp-red-soft); }
.product-select input:checked + label {
  background: var(--jp-red);
  color: var(--jp-white);
  box-shadow: 0 6px 0 var(--jp-red-dark);
}
.product-select input:checked + label .check-box {
  background: var(--jp-white);
  color: var(--jp-red);
  border-color: var(--jp-white);
}
.product-select input:checked + label .check-box::before { content: "✓"; }
.product-select input:checked ~ .product-cover,
.product.is-selected { /* 選択時カードハイライト */ }
.product:has(.product-select input:checked) {
  border-color: var(--jp-red);
  border-width: 4px;
  background: linear-gradient(180deg, var(--jp-red-soft), var(--jp-white) 30%);
}
.product:has(.product-select input:checked)::after {
  content: "選択中";
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--jp-red);
  color: var(--jp-white);
  font-size: var(--fs-body);
  font-weight: 900;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  z-index: 2;
  box-shadow: 0 4px 0 var(--jp-red-dark);
}

/* ===== フローティング カート (選択済み製品の合計と申込CTA) ===== */
.cart-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--jp-white);
  border-top: 6px solid var(--jp-red);
  padding: var(--sp-3) var(--sp-5);
  box-shadow: 0 -8px 24px rgba(0,0,0,0.12);
  z-index: 50;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}
.cart-bar.is-visible { transform: translateY(0); }

.cart-bar-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
}
.cart-summary {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex: 1;
  min-width: 280px;
}
.cart-icon {
  width: 72px; height: 72px;
  background: var(--jp-red);
  color: var(--jp-white);
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 36px;
  position: relative;
  flex-shrink: 0;
}
.cart-count {
  position: absolute;
  top: -8px;
  right: -8px;
  background: var(--jp-cream);
  color: var(--jp-red);
  border: 3px solid var(--jp-red);
  width: 36px; height: 36px;
  border-radius: 50%;
  font-size: 18px;
  font-weight: 900;
  display: grid;
  place-items: center;
}
.cart-text { line-height: 1.3; }
.cart-text .label {
  font-size: var(--fs-body);
  color: var(--jp-sub);
  font-weight: 700;
}
.cart-text .total {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 900;
  color: var(--jp-red);
}
.cart-text .total small { font-size: 18px; color: var(--jp-sub); font-weight: 600; }
.cart-text .breakdown {
  font-size: var(--fs-small);
  color: var(--jp-sub);
}

/* 選択された製品名を 1 行に並べる */
.cart-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  max-width: 100%;
}
.cart-pill {
  background: var(--jp-red-soft);
  color: var(--jp-red);
  font-size: var(--fs-small);
  font-weight: 800;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* 浮かせる予約フローター (PCではボトム固定の代替) */
@media (max-width: 600px) {
  .cart-bar { padding: var(--sp-2) var(--sp-3); }
  .cart-icon { width: 56px; height: 56px; font-size: 28px; }
  .cart-text .total { font-size: 28px; }
  .cart-bar .btn { width: 100%; }
}

/* 製品セクション下に余白追加 (cart-bar に隠れない様) */
body.has-cart { padding-bottom: 140px; }

/* ===== カートリスト (apply.html 内) ===== */
.cart-list { padding: 0; margin: 0; }
.cart-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  background: var(--jp-white);
  border: 3px solid var(--jp-red-soft);
  border-left: 8px solid var(--jp-red);
  border-radius: var(--radius-md);
  padding: var(--sp-3);
  margin-bottom: var(--sp-2);
  font-size: var(--fs-large);
}
.cart-item-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cart-item-info strong {
  font-size: var(--fs-h3);
  color: var(--jp-ink);
}
.cart-item-price {
  font-family: var(--font-display);
  font-size: var(--fs-large);
  color: var(--jp-red);
  font-weight: 900;
}
.cart-remove {
  background: var(--jp-white);
  color: var(--jp-red);
  border: 2px solid var(--jp-red);
  border-radius: var(--radius-pill);
  padding: var(--sp-1) var(--sp-3);
  font-size: var(--fs-body);
  font-weight: 800;
  font-family: var(--font-jp);
  cursor: pointer;
  min-height: 56px;
  min-width: 96px;
}
.cart-remove:hover { background: var(--jp-red); color: var(--jp-white); }
.cart-item--readonly { border-left-color: var(--jp-leaf); }

/* ==========================================================================
   ゆうID 連携 / ポイント
   ========================================================================== */
:root {
  --yu-yellow: #FFC400;       /* ゆうID ゴールド */
  --yu-yellow-soft: #FFF6D2;
  --yu-red: var(--jp-red);
}

/* ゆうID ログインバナー (未連携) */
.yu-id-banner {
  background: linear-gradient(135deg, var(--yu-yellow) 0%, #FFD84D 50%, var(--yu-yellow) 100%);
  border: 4px solid var(--yu-red);
  border-radius: var(--radius-lg);
  padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-5);
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  box-shadow: 0 8px 0 var(--jp-red-dark);
  position: relative;
  overflow: hidden;
}
.yu-id-banner::before {
  /* 〒 の透かし */
  content: "〒";
  position: absolute;
  right: -20px;
  bottom: -40px;
  font-size: 200px;
  font-weight: 900;
  color: rgba(255,255,255,0.3);
  line-height: 1;
}
.yu-id-icon {
  width: 88px; height: 88px;
  background: var(--jp-white);
  color: var(--yu-red);
  border-radius: var(--radius-md);
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 22px;
  border: 4px solid var(--yu-red);
  flex-shrink: 0;
  z-index: 1;
}
.yu-id-icon .yu-line { display: block; line-height: 1.05; }
.yu-id-icon .yu-line:first-child { font-size: 32px; }
.yu-id-text { flex: 1; z-index: 1; }
.yu-id-text h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 900;
  color: var(--jp-ink);
  margin-bottom: 4px;
}
.yu-id-text p {
  font-size: var(--fs-body);
  color: var(--jp-ink);
  font-weight: 700;
}
.yu-id-text .req-tag {
  display: inline-block;
  background: var(--jp-red);
  color: var(--jp-white);
  font-size: var(--fs-small);
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  margin-bottom: 6px;
  font-weight: 800;
}
.yu-id-banner .btn { z-index: 1; }

/* HTML5 [hidden] が display:flex に上書きされないよう保険 */
[hidden] { display: none !important; }

/* ゆうID 連携済み (ログイン後) */
.yu-id-linked {
  background: var(--jp-white);
  border: 3px solid var(--jp-leaf);
  border-radius: var(--radius-lg);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-4);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.yu-id-linked-ok {
  width: 64px; height: 64px;
  background: var(--jp-leaf);
  color: var(--jp-white);
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 32px;
  font-weight: 900;
  flex-shrink: 0;
}
.yu-id-linked-info { flex: 1; }
.yu-id-linked-info .label {
  font-size: var(--fs-small);
  color: var(--jp-leaf);
  font-weight: 800;
  display: block;
}
.yu-id-linked-info .name {
  font-size: var(--fs-h3);
  font-weight: 900;
  color: var(--jp-ink);
  display: block;
}
.yu-id-linked-info .yu-id-num {
  font-family: 'Courier New', monospace;
  font-size: var(--fs-body);
  color: var(--jp-sub);
}
.yu-id-points {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--yu-yellow-soft);
  border: 2px solid var(--yu-yellow);
  border-radius: var(--radius-md);
  padding: var(--sp-2) var(--sp-3);
}
.yu-id-points .ico {
  width: 40px; height: 40px;
  background: var(--yu-yellow);
  color: var(--jp-red);
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 22px;
  font-weight: 900;
}
.yu-id-points .meta { line-height: 1.2; }
.yu-id-points .meta .label { font-size: var(--fs-small); color: var(--jp-sub); font-weight: 700; }
.yu-id-points .meta .num {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 900;
  color: var(--jp-red);
}
.yu-id-points .meta .num small { font-size: 14px; color: var(--jp-sub); margin-left: 2px; }

/* 製品カードに付くポイント獲得タグ */
.product-points {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--yu-yellow-soft);
  border: 2px solid var(--yu-yellow);
  border-radius: var(--radius-pill);
  padding: 4px 12px;
  font-size: var(--fs-small);
  font-weight: 800;
  color: var(--jp-red);
  margin-bottom: var(--sp-2);
}
.product-points::before {
  content: "Pt";
  width: 22px; height: 22px;
  background: var(--yu-yellow);
  color: var(--jp-red);
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  font-size: 12px;
  font-weight: 900;
}

/* カート (フローティング) にポイント合計を併記 */
.cart-text .points-line {
  font-size: var(--fs-small);
  color: var(--jp-red);
  font-weight: 800;
}
.cart-text .points-line .pt {
  background: var(--yu-yellow);
  color: var(--jp-red);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  margin-right: 4px;
}

/* apply.html 申込時のポイント明細行 */
.points-summary {
  background: var(--yu-yellow-soft);
  border: 3px solid var(--yu-yellow);
  border-radius: var(--radius-md);
  padding: var(--sp-3) var(--sp-4);
  margin: var(--sp-3) 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.points-summary .label {
  font-size: var(--fs-large);
  font-weight: 800;
  color: var(--jp-ink);
}
.points-summary .label::before {
  content: "🎁 ";
  margin-right: 4px;
}
.points-summary .value {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 900;
  color: var(--jp-red);
}
.points-summary .value small {
  font-size: var(--fs-body);
  color: var(--jp-sub);
}

.product-help {
  background: var(--jp-white);
  border: 3px dashed var(--jp-red);
  border-radius: var(--radius-lg);
  padding: var(--sp-4);
  margin-top: var(--sp-5);
  display: flex;
  gap: var(--sp-3);
  align-items: center;
}
.product-help .ico {
  width: 80px; height: 80px;
  background: var(--jp-red);
  color: var(--jp-white);
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 40px;
  flex-shrink: 0;
}
.product-help h4 { font-size: var(--fs-h3); margin-bottom: 4px; color: var(--jp-red); }
.product-help p { font-size: var(--fs-body); color: var(--jp-sub); }

/* 旧 plans 互換 (いずれ削除予定) */
.plans-section { background: var(--jp-cream); }
.plans {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4);
}
.plan {
  background: var(--jp-white);
  border: 3px solid var(--jp-line);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  position: relative;
  display: flex;
  flex-direction: column;
}
.plan.is-recommend {
  border-color: var(--jp-red);
  border-width: 4px;
  box-shadow: 0 8px 24px rgba(238, 0, 17, 0.10);
}
.plan-recommend-badge {
  position: absolute;
  top: -22px;
  left: var(--sp-4);
  background: var(--jp-red);
  color: var(--jp-white);
  font-weight: 900;
  font-size: var(--fs-body);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--radius-pill);
  letter-spacing: 0.1em;
}
.plan-name {
  font-size: var(--fs-h2);
  font-weight: 900;
  color: var(--jp-red);
  margin-bottom: var(--sp-2);
}
.plan-desc {
  font-size: var(--fs-body);
  color: var(--jp-sub);
  margin-bottom: var(--sp-3);
}
.plan-price {
  display: flex;
  align-items: baseline;
  gap: var(--sp-1);
  margin-bottom: var(--sp-3);
  padding: var(--sp-3);
  background: var(--jp-red-soft);
  border-radius: var(--radius-md);
}
.plan-price .yen {
  font-family: var(--font-display);
  font-size: 64px;
  font-weight: 900;
  color: var(--jp-red);
  line-height: 1;
}
.plan-price .unit {
  font-size: var(--fs-large);
  color: var(--jp-sub);
}
.plan-feats {
  list-style: none;
  margin-bottom: var(--sp-4);
}
.plan-feats li {
  font-size: var(--fs-large);
  padding: var(--sp-2) 0;
  border-bottom: 1px dashed var(--jp-line);
  display: flex;
  gap: var(--sp-2);
}
.plan-feats li::before {
  content: "✓";
  color: var(--jp-leaf);
  font-weight: 900;
}
.plan .btn { margin-top: auto; }

/* ==========================================================================
   声 (お客様の声 - 局員と高齢者)
   ========================================================================== */
.voices-section { background: var(--jp-white); }
.voices {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
}
.voice {
  background: var(--jp-cream);
  border-radius: var(--radius-lg);
  padding: var(--sp-4);
  border-left: 8px solid var(--jp-red);
}
.voice-quote {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--jp-ink);
  line-height: var(--lh-tight);
  margin-bottom: var(--sp-3);
  position: relative;
}
.voice-quote::before {
  content: "\201C";
  font-size: 80px;
  color: var(--jp-red);
  opacity: 0.3;
  position: absolute;
  top: -30px;
  left: -10px;
  line-height: 1;
}
.voice-meta {
  font-size: var(--fs-body);
  color: var(--jp-sub);
}
.voice-meta strong { color: var(--jp-ink); display: block; font-size: var(--fs-large); }

/* ==========================================================================
   フッター CTA / お問い合わせ
   ========================================================================== */
.cta-section {
  background: var(--jp-red);
  color: var(--jp-white);
  padding: var(--sp-7) var(--sp-5);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-section::before, .cta-section::after {
  /* 大きな白丸装飾 */
  content: "";
  position: absolute;
  width: 300px; height: 300px;
  border-radius: 50%;
  background: rgba(255,255,255,0.07);
}
.cta-section::before { top: -100px; left: -100px; }
.cta-section::after { bottom: -120px; right: -80px; }

.cta-inner { position: relative; z-index: 1; max-width: 900px; margin: 0 auto; }
.cta-section .section-title { color: var(--jp-white); }
.cta-section .section-title .accent { color: #FFE082; }
.cta-section .section-lead { color: rgba(255,255,255,0.92); font-size: var(--fs-huge); }

.cta-phone {
  background: var(--jp-white);
  color: var(--jp-red);
  border-radius: var(--radius-lg);
  padding: var(--sp-4) var(--sp-5);
  margin: var(--sp-5) auto;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
}
.cta-phone .label {
  font-size: var(--fs-large);
  font-weight: 700;
  color: var(--jp-sub);
}
.cta-phone .number {
  font-family: var(--font-display);
  font-size: 56px;
  font-weight: 900;
  letter-spacing: 0.06em;
  color: var(--jp-red);
}
.cta-phone .hours {
  font-size: var(--fs-body);
  color: var(--jp-sub);
}

/* ==========================================================================
   フッター
   ========================================================================== */
.site-footer {
  background: var(--jp-ink);
  color: rgba(255,255,255,0.85);
  padding: var(--sp-5);
  font-size: var(--fs-body);
}
.site-footer-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-3);
}
/* btn-info はフッター内でも独自スタイルを保つ */
.site-footer a:not(.btn-info) { color: rgba(255,255,255,0.85); }
.site-footer .btn-info {
  color: var(--jp-ink);
  background: var(--jp-white);
  border-color: var(--jp-white);
}
.site-footer .btn-info:hover {
  background: var(--jp-red);
  color: var(--jp-white);
  border-color: var(--jp-red);
}
.site-footer .btn-info:hover .icon {
  background: var(--jp-white);
  color: var(--jp-red);
}
.site-footer .btn-info rt { color: var(--jp-sub); }

/* ==========================================================================
   申込フォーム (apply.html)
   ========================================================================== */
.apply-hero {
  background: var(--jp-red);
  color: var(--jp-white);
  padding: var(--sp-6) var(--sp-5);
  text-align: center;
}
.apply-hero h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 900;
}
.apply-hero p { font-size: var(--fs-large); opacity: 0.95; margin-top: var(--sp-2); }

.stepper {
  display: flex;
  justify-content: center;
  gap: var(--sp-3);
  margin: var(--sp-5) auto;
  max-width: 800px;
  padding: 0 var(--sp-3);
}
.stepper-item {
  flex: 1;
  text-align: center;
  position: relative;
  padding-top: 60px;
}
.stepper-item::before {
  content: counter(s);
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 48px; height: 48px;
  background: var(--jp-line);
  color: var(--jp-sub);
  border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 900;
  font-size: var(--fs-large);
}
.stepper { counter-reset: s; }
.stepper-item { counter-increment: s; }
.stepper-item.is-active::before {
  background: var(--jp-red);
  color: var(--jp-white);
  box-shadow: 0 0 0 6px var(--jp-red-soft);
}
.stepper-item.is-done::before { background: var(--jp-leaf); color: var(--jp-white); content: "✓"; }
.stepper-item-label {
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--jp-sub);
}
.stepper-item.is-active .stepper-item-label { color: var(--jp-red); }
.stepper-item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 24px; left: 50%; right: -50%;
  height: 4px;
  background: var(--jp-line);
  z-index: -1;
}

.form-card {
  background: var(--jp-white);
  border: 3px solid var(--jp-line);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  max-width: 800px;
  margin: 0 auto var(--sp-6);
  box-shadow: var(--shadow-card);
}
.form-card h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  margin-bottom: var(--sp-3);
}
.form-card .helper {
  background: var(--jp-red-soft);
  border-left: 6px solid var(--jp-red);
  padding: var(--sp-3);
  border-radius: var(--radius-sm);
  font-size: var(--fs-body);
  margin-bottom: var(--sp-4);
  color: var(--jp-ink);
}

.field { margin-bottom: var(--sp-4); }
.field-label {
  display: block;
  font-size: var(--fs-large);
  font-weight: 800;
  margin-bottom: var(--sp-1);
}
.field-label .req {
  background: var(--jp-red);
  color: var(--jp-white);
  font-size: var(--fs-small);
  padding: 2px var(--sp-1);
  border-radius: var(--radius-sm);
  margin-left: var(--sp-1);
  vertical-align: middle;
}
.field-hint { font-size: var(--fs-body); color: var(--jp-sub); margin-bottom: var(--sp-2); }
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field select {
  width: 100%;
  font-family: var(--font-jp);
  font-size: 28px;
  padding: var(--sp-3);
  border: 3px solid var(--jp-line);
  border-radius: var(--radius-md);
  background: var(--jp-white);
  min-height: 80px;
}
.field input:focus, .field select:focus {
  outline: 4px solid var(--jp-red-soft);
  border-color: var(--jp-red);
}
.choice {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-3);
}
.choice-card {
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  background: var(--jp-white);
  border: 3px solid var(--jp-line);
  border-radius: var(--radius-md);
  padding: var(--sp-4);
  font-size: var(--fs-large);
  transition: all 0.15s ease;
}
.choice-card input { display: none; }
.choice-card .check {
  width: 36px; height: 36px;
  border: 3px solid var(--jp-line);
  border-radius: 50%;
  flex-shrink: 0;
}
.choice-card:has(input:checked) {
  border-color: var(--jp-red);
  background: var(--jp-red-soft);
}
.choice-card:has(input:checked) .check {
  border-color: var(--jp-red);
  background: var(--jp-red);
  background-image: radial-gradient(circle, var(--jp-white) 30%, var(--jp-red) 35%);
}
.choice-card strong { font-size: var(--fs-h3); display: block; }
.choice-card span { color: var(--jp-sub); font-size: var(--fs-body); }

.form-actions {
  display: flex;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
  align-items: stretch;
}
.form-actions .btn { flex: 1 1 0; min-width: 0; }

/* ==========================================================================
   レスポンシブ (タブレット / スマホ)
   ブレークポイント: 1024px (中型タブレット), 768px (小型タブレット), 600px (スマホ), 400px (小スマホ)
   ========================================================================== */

/* ==== タブレット 1024px 以下 ==== */
@media (max-width: 1024px) {
  :root { --fs-mega: 48px; --fs-h1: 36px; --fs-h2: 28px; }
  .hero-inner, .pillars, .steps, .voices { grid-template-columns: 1fr; gap: var(--sp-5); }
  .plans, .products { grid-template-columns: repeat(2, 1fr); }
  .stepper { flex-wrap: wrap; }
  .hero-title { font-size: 44px; }
  .hero-art { max-width: 560px; margin: 0 auto; }
}

/* ==== 小型タブレット 768px 以下 ==== */
@media (max-width: 768px) {
  :root { --fs-h1: 26px; --fs-h2: 22px; --fs-h3: 20px; --fs-huge: 24px; }

  /* 見出し全般: ruby を含む和文の改行を許容 */
  h1, h2, h3, h4 { word-break: keep-all; overflow-wrap: anywhere; line-break: strict; }
  .section-title, .hero-title { line-height: 1.35; }
  .hero { min-height: auto; max-height: none; padding: var(--sp-5) var(--sp-3) var(--sp-5); }
  .hero-title { font-size: 36px; }
  .hero-lead { font-size: var(--fs-body); }
  .hero-art img { max-height: 360px; object-fit: cover; object-position: center; }
  .hero-stamp { width: 88px; height: 88px; font-size: 14px; top: -12px; right: -12px; }
  .hero-stamp small { font-size: 9px; }
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-ctas .btn { width: 100%; }
  .hero-trust { gap: var(--sp-1); }
  .hero-trust .badge { font-size: var(--fs-small); padding: var(--sp-1) var(--sp-2); flex: 1 1 auto; }
  .hero-trust .badge .check { width: 24px; height: 24px; font-size: 14px; }

  .section { padding: var(--sp-5) var(--sp-3); }
  .section-title { font-size: var(--fs-h1); }

  .pillars, .voices { grid-template-columns: 1fr; }
  .pillar-icon { width: 100px; height: 100px; }

  .products { grid-template-columns: 1fr; }
  .product { padding: var(--sp-3); }
  .product-cover { aspect-ratio: 16 / 9; }
  .product-cover .brand { font-size: 18px; }
  .product-cover .device { font-size: 14px; }
  .product-name { font-size: var(--fs-large); }
  .product-price .yen { font-size: 36px; }
  .product-help { flex-direction: column; text-align: center; padding: var(--sp-3); }
  .product-help .ico { margin: 0 auto; }
  .product-help h4 { font-size: var(--fs-large); }

  .steps { grid-template-columns: 1fr; }
  .step-num { font-size: 22px; padding: 4px var(--sp-2); }

  .plan-price .yen { font-size: 48px; }

  .voice-quote { font-size: var(--fs-large); }
  .voice-quote::before { font-size: 56px; top: -18px; }

  /* CTA セクション */
  .cta-section { padding: var(--sp-5) var(--sp-3); }
  .cta-section .section-lead { font-size: var(--fs-body); }
  .btn-call--giant { padding: var(--sp-3) var(--sp-4); }
  .btn-call--giant .number { font-size: 38px; }
  .btn-call--giant .icon { width: 56px; height: 56px; font-size: 28px; }
  .cta-phone .number { font-size: 38px; }

  /* ヘルパーボックス */
  .helper-box { flex-direction: column; text-align: center; gap: var(--sp-2); }
  .helper-box .icon { margin: 0 auto; width: 80px; height: 80px; font-size: 40px; }

  /* how-to ページ */
  .howto-step-block, .howto-step-block.flip { grid-template-columns: 1fr; padding: var(--sp-4) var(--sp-3); }
  .howto-step-block.flip .art { order: 0; }
  .howto-step-block .num-circle { width: 72px; height: 72px; font-size: 36px; top: -28px; left: 24px; }
  .howto-step-block h3 { font-size: var(--fs-h2); margin-top: var(--sp-2); }
  .howto-step-block p { font-size: var(--fs-body); }
  .howto-step-block li { font-size: var(--fs-body); padding: var(--sp-2); }

  /* フローティングカート */
  .cart-bar { padding: var(--sp-2) var(--sp-3); }
  .cart-bar-inner { flex-direction: column; gap: var(--sp-2); align-items: stretch; }
  .cart-summary { gap: var(--sp-2); min-width: 0; }
  .cart-icon { width: 56px; height: 56px; font-size: 28px; }
  .cart-count { width: 28px; height: 28px; font-size: 14px; }
  .cart-text .total { font-size: 28px; }
  .cart-pills { display: none; } /* モバイルでは合計のみ表示 */
  .cart-bar .btn-jumbo { width: 100%; font-size: 22px; min-height: 72px; padding: 0 var(--sp-3); }
  body.has-cart { padding-bottom: 200px; }

  /* ゆうID バナー */
  .yu-id-banner { flex-direction: column; text-align: center; gap: var(--sp-3); padding: var(--sp-3); }
  .yu-id-banner::before { font-size: 140px; right: -10px; bottom: -20px; }
  .yu-id-icon { margin: 0 auto; width: 72px; height: 72px; }
  .yu-id-icon .yu-line:first-child { font-size: 24px; }
  .yu-id-text h3 { font-size: var(--fs-h3); }
  .yu-id-banner .btn { width: 100%; min-height: 80px; font-size: var(--fs-large); }

  .yu-id-linked { flex-direction: column; align-items: stretch; gap: var(--sp-2); padding: var(--sp-3); }
  .yu-id-linked-info { text-align: center; }
  .yu-id-points { justify-content: center; }

  /* 申込フォーム */
  .form-card { padding: var(--sp-3); }
  .stepper { gap: var(--sp-2); padding: 0 var(--sp-2); }
  .stepper-item { padding-top: 48px; }
  .stepper-item::before { width: 36px; height: 36px; font-size: var(--fs-body); }
  .stepper-item-label { font-size: var(--fs-body); }
  .stepper-item:not(:last-child)::after { top: 18px; }
  .field input[type="text"],
  .field input[type="email"],
  .field input[type="tel"],
  .field select { font-size: 22px; padding: var(--sp-2) var(--sp-3); min-height: 72px; }
  .choice { grid-template-columns: 1fr; }
  .pay-method { grid-template-columns: repeat(2, 1fr); }

  /* カートリスト (apply.html 内) */
  .cart-item { flex-direction: column; align-items: stretch; gap: var(--sp-2); padding: var(--sp-3); }
  .cart-item-info { text-align: center; }
  .cart-remove { width: 100%; min-width: 0; }

  /* 確認画面 サマリー */
  .summary-row { flex-direction: column; align-items: flex-start; gap: 4px; padding: var(--sp-2) 0; }
  .summary-total { flex-direction: column; align-items: stretch; text-align: center; gap: var(--sp-1); }
  .summary-total .value { font-size: 44px; }
  .points-summary { flex-direction: column; align-items: stretch; text-align: center; gap: var(--sp-1); }
  .points-summary .value { font-size: 32px; }

  /* キーコード表示 */
  .keycode-display .code { font-size: 32px; letter-spacing: 0.1em; }

  /* フォームアクション */
  .form-actions { flex-direction: column-reverse; }
  .form-actions .btn { width: 100%; }

  /* ボタン全般 */
  .btn-jumbo { font-size: 22px; min-height: 80px; padding: 0 var(--sp-3); border-radius: var(--radius-md); }

  /* フッター */
  .site-footer-inner { flex-direction: column; align-items: stretch; gap: var(--sp-3); }
  .site-footer-inner nav { justify-content: center; flex-wrap: wrap; }
}

/* ==== スマホ 600px 以下 ==== */
@media (max-width: 600px) {
  :root { --fs-mega: 28px; --fs-h1: 22px; --fs-h2: 20px; --fs-h3: 18px; --fs-body: 16px; --fs-large: 17px; --fs-huge: 20px; }

  .section-title { font-size: 22px; }

  /* 全体オーバーフロー防止 */
  html, body { overflow-x: hidden; }

  /* ボタン全般 — 改行を許容 / padding/font 圧縮 */
  .btn {
    white-space: normal;
    line-height: 1.4;
    letter-spacing: 0;
    word-break: keep-all;
    overflow-wrap: break-word;
    padding: var(--sp-2) var(--sp-3);
    font-size: 17px;
    min-height: 56px;
    max-width: 100%;
    box-sizing: border-box;
  }
  /* Ruby を含むボタンの ふりがなで縦に伸びるのを防ぐ */
  .btn ruby { ruby-position: over; }
  .btn rt { line-height: 1; }
  .btn-primary { padding: var(--sp-2) var(--sp-3); font-size: 18px; }
  .btn-jumbo { font-size: 20px; min-height: 72px; padding: var(--sp-2) var(--sp-3); }
  .btn-ghost { font-size: 17px; padding: var(--sp-2) var(--sp-3); }

  /* btn-call (フッターCTA・helper-box内など 非compact) */
  .btn-call {
    padding: var(--sp-2) var(--sp-3);
    gap: var(--sp-2);
    flex-direction: row;
    width: auto;
  }
  .btn-call .icon { width: 44px; height: 44px; font-size: 22px; }
  .btn-call .number { font-size: 22px; letter-spacing: 0.02em; }
  .btn-call .label { font-size: 11px; }
  .btn-call .hours { font-size: 10px; }

  /* btn-call--giant — CTA セクション内の特大電話ボタン */
  .btn-call--giant { padding: var(--sp-3) var(--sp-4); }
  .btn-call--giant .icon { width: 56px; height: 56px; font-size: 26px; }
  .btn-call--giant .number { font-size: 30px; letter-spacing: 0.02em; }
  .btn-call--giant .label { font-size: var(--fs-body); }
  .btn-call--giant .hours { font-size: 13px; }

  /* helper-box 内のアイコン縮小 */
  .helper-box { padding: var(--sp-3); gap: var(--sp-2); }
  .helper-box .icon { width: 60px; height: 60px; font-size: 28px; }
  .helper-box h4 { font-size: var(--fs-large); }
  .helper-box p { font-size: var(--fs-body); }

  /* お支払い方法 — 1列に変更 (文字が縦割れしないように) */
  .pay-method { grid-template-columns: 1fr; }
  .pay-method label {
    min-height: 64px;
    flex-direction: row;
    padding: var(--sp-2) var(--sp-3);
    font-size: var(--fs-body);
    text-align: left;
    justify-content: flex-start;
    gap: var(--sp-2);
    white-space: normal;
  }
  .pay-method label br { display: none; } /* 強制改行解除 */
  .pay-method .icon { font-size: 24px; margin-bottom: 0; }

  /* 完了画面 h2 の インラインスタイル(44px) 上書き */
  #panel-3 h2,
  #panel-3 h2[style] {
    font-size: 26px !important;
    line-height: 1.4 !important;
    word-break: keep-all;
    overflow-wrap: anywhere;
  }
  #panel-3 .complete-art img { max-width: 240px; }
  #panel-3 .complete-art { margin: var(--sp-3) 0; }

  /* ポイントサマリー — 余白圧縮 / 文字折返し対応 */
  .points-summary { padding: var(--sp-2) var(--sp-3); flex-direction: column; align-items: stretch; gap: 4px; }
  .points-summary .label { font-size: var(--fs-body); text-align: center; line-height: 1.3; }
  .points-summary .label::before { margin-right: 2px; }
  .points-summary .value { font-size: 32px; text-align: center; }

  /* カート合計 (apply.html step1 のインラインstyle対策) */
  .cart-list-total[style] {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 4px !important;
    text-align: center !important;
    padding: var(--sp-2) var(--sp-3) !important;
  }
  #cart-list-yen, #confirm-total { font-size: 32px; }

  /* keycode-display in apply step3 */
  #panel-3 ul li {
    padding: var(--sp-2) !important;
  }
  #panel-3 ul li > div:last-child {
    font-size: 22px !important;
    letter-spacing: 0.05em !important;
    word-break: break-all;
  }

  /* ヘッダー: 2段組 — 1段目ロゴ / 2段目フル幅電話ボタン */
  .site-header { padding: var(--sp-2) var(--sp-2); border-bottom-width: 3px; position: relative; }
  .header-inner { flex-direction: column; align-items: stretch; gap: var(--sp-1); }
  .logo-lockup {
    gap: 8px;
    align-self: center;
    width: 100%;
    justify-content: flex-start;
  }
  .logo-mark {
    width: 44px; height: 44px; font-size: 24px;
    box-shadow: 0 0 0 3px var(--jp-white), 0 0 0 5px var(--jp-red);
    flex-shrink: 0;
  }
  .logo-text { min-width: 0; overflow: hidden; flex: 1; }
  .logo-brand { font-size: 18px; letter-spacing: 0.02em; white-space: nowrap; }
  .logo-sub { font-size: 12px; letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* 電話ボタン (ヘッダー内): フル幅 row レイアウト */
  .btn-call--compact {
    width: 100%;
    padding: var(--sp-1) var(--sp-3);
    min-height: 56px;
    gap: var(--sp-2);
    justify-content: center;
  }
  .btn-call--compact .icon { width: 40px; height: 40px; font-size: 20px; }
  .btn-call--compact .meta { flex-direction: column; align-items: flex-start; line-height: 1.15; }
  .btn-call--compact .number { font-size: 22px; letter-spacing: 0.04em; }
  .btn-call--compact .label { font-size: 11px; display: block; }
  .btn-call--compact .hours { font-size: 10px; display: block; }

  /* ヒーロー */
  .hero-title { font-size: 26px; }
  .hero-lead { font-size: 15px; line-height: 1.6; }
  .hero-eyebrow { font-size: var(--fs-body); padding: 4px var(--sp-2); }
  .hero-trust { flex-direction: column; align-items: stretch; }
  .hero-trust .badge { width: 100%; flex: 0 0 auto; justify-content: flex-start; font-size: 15px; }
  .hero-trust .badge .check { width: 28px; height: 28px; font-size: 16px; flex-shrink: 0; }

  /* セクションリード */
  .section-lead { font-size: 15px; line-height: 1.7; }
  .section-eyebrow { font-size: 15px; }

  /* form-card 見出し */
  .form-card h2 { font-size: 18px; line-height: 1.4; }
  .form-card h3 { font-size: 18px !important; }

  /* ゆうIDバナー — オーバーフロー防止 */
  .yu-id-banner { padding: var(--sp-2) var(--sp-3); overflow: hidden; }
  .yu-id-banner::before { font-size: 100px; right: -20px; bottom: -30px; }
  .yu-id-text h3 { font-size: 18px; line-height: 1.3; }
  .yu-id-text p { font-size: 14px; line-height: 1.5; }
  .yu-id-text .req-tag { font-size: 12px; padding: 2px 8px; }
  .yu-id-icon { width: 64px; height: 64px; }
  .yu-id-icon .yu-line:first-child { font-size: 20px; }
  .yu-id-icon .yu-line:last-child { font-size: 18px; }
  .yu-id-banner .btn {
    font-size: 18px;
    min-height: 64px;
    padding: var(--sp-2) var(--sp-3);
    white-space: normal;
    line-height: 1.2;
  }

  /* ゆうID 連携済み カード */
  .yu-id-linked-info .name { font-size: var(--fs-large); }
  .yu-id-linked-info .label { font-size: 12px; }
  .yu-id-points { padding: var(--sp-1) var(--sp-2); }
  .yu-id-points .meta .num { font-size: 22px; }
  .yu-id-points .ico { width: 32px; height: 32px; font-size: 18px; }

  /* フッター - テキスト折返し */
  .site-footer { padding: var(--sp-3) var(--sp-3); }
  .site-footer-inner {
    gap: var(--sp-2);
    flex-direction: column;
    align-items: stretch;
    max-width: 100%;
    width: 100%;
  }
  .site-footer-inner > div,
  .site-footer-inner > nav {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  .site-footer-inner > div strong { font-size: 16px; display: block; margin-bottom: 4px; }
  .site-footer small {
    font-size: 12px;
    line-height: 1.5;
    word-break: break-word;
    overflow-wrap: anywhere;
    display: block;
    width: 100%;
    max-width: 100%;
  }
  .site-footer-inner nav {
    gap: 8px;
    flex-direction: column;
    align-items: stretch;
    display: flex !important;
  }
  .site-footer .btn-info {
    font-size: 15px;
    padding: 10px 16px;
    min-height: 48px;
    width: 100%;
    text-align: left;
    letter-spacing: 0;
    word-break: keep-all;
    line-height: 1.3;
    white-space: nowrap;
  }
  .site-footer .btn-info .icon { width: 28px; height: 28px; font-size: 14px; margin-right: 10px; }
  .site-footer .btn-info rt { font-size: 0.5em; }

  /* 価格 */
  .product-price .yen { font-size: 32px; }
  .plan-price .yen { font-size: 36px; }

  .section { padding: var(--sp-4) var(--sp-3); }
  .section-title { font-size: 26px; }

  /* CTA */
  .btn-call--giant .number { font-size: 30px; }
  .btn-call--giant { padding: var(--sp-3); }

  /* 完了画面 */
  .keycode-display .code { font-size: 26px; letter-spacing: 0.08em; }

  /* パンくず */
  .breadcrumb { padding: var(--sp-2) var(--sp-3); font-size: var(--fs-body); }
}

/* ==== 小スマホ 400px 以下 (iPhone SE 等) ==== */
@media (max-width: 400px) {
  :root { --fs-body: 16px; }
  .logo-brand { font-size: 16px; }
  .logo-sub { font-size: 11px; }
  .logo-mark { width: 40px; height: 40px; font-size: 22px; }
  .btn-call--compact .number { font-size: 20px; }
  .hero-title { font-size: 24px; }
  .section-title { font-size: 22px; }
  .btn-call--giant .number { font-size: 26px; }
  .product-cover .brand { font-size: 16px; }
  .pay-method { grid-template-columns: 1fr; }
  .hero { padding: var(--sp-3); }
  .hero-trust .badge { font-size: 14px; }
  .form-card { padding: var(--sp-2); }
}

/* 印刷用 */
@media print { .site-header, .cta-section, .site-footer { display: none; } }

/* アクセシビリティ: フォーカス可視化 */
:focus-visible {
  outline: 4px solid var(--jp-red);
  outline-offset: 4px;
}

/* モーション減らす設定 */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}