/* =============== 基本トークン =============== */
:root {
  --color-primary: #f68624; /* CTAボタン / シミュ背景（今回はHeroのみ） */
  --color-secondary: #fbc935; /* CTAセクション背景 */
  --color-surface: #fcf9ef; /* ページ基調 */
  --color-dark: #4d322c; /* 濃色（フッター/一部強調） */
  --color-text: #5a3b2e; /* 本文標準 */
  --color-faq: #7d5442; /* FAQ吹き出し/一部テキスト */
  --color-accent: #f3981c; /* テキスト強調/キラキラ */
  --color-error: #d12921; /* エラーカラー */
  --nav-footer-h: 240px; /* 展開時フッター帯の見せたい高さ */

  /* アートボードとコンテンツの基準 */
  --artboard-pc: 1440px; /* PCのデザインキャンバス幅 */
  --content-pc: 1100px; /* PCのコンテンツ幅 */
  --artboard-sp: 375px; /* SPのアートボード幅（目安） */
  --content-sp: 335px; /* SPのコンテンツ幅 */

  /* フレーム左右余白（= アートボードとビューポート差分の片側） */
  --frame-edge: max((100vw - var(--artboard-pc)) / 2, 0px);

  /* SPの左右ガター（375→335 想定で20px） */
  --sp-gutter: calc((var(--artboard-sp) - var(--content-sp)) / 2); /* 20px */

  --container-w: 1440px;
  --gutter: 24px;

  --section-pc: 80px;
  --section-sp: 40px;

  --features-arc-rise: 80px;
  --features-bg-offset: 0px;
}

/* =============== ベース =============== */
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}
body {
  font-family: "Zen Maru Gothic", system-ui, -apple-system, "Segoe UI", Roboto,
    "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  color: var(--color-text);
  background: var(--color-surface);
}
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* ページ全体をアートボード幅に収めるための枠 */
.page-frame {
  max-width: var(--artboard-pc);
  margin-inline: auto;
  position: relative;
}
/* 共通コンテナ：PCは 1100px センター。SPは 335px になるようパディング付与 */
.container {
  max-width: var(--content-pc);
  width: 100%;
  margin-inline: auto;
  padding-inline: 0;
}
@media (max-width: 768px) {
  .container {
    padding-inline: var(--sp-gutter);
  }
}

/* セクションの上下余白（必要に応じて調整） */
.section {
  padding-block: clamp(48px, 6vw, 96px);
}
/* タイトルの幅はコンテナに従う */
.section .section-head,
.section .section-body {
  width: 100%;
}

/* =============== Header =============== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  padding: calc(24px + env(safe-area-inset-top)) 0 0;
}
/* 白ピル＋影 */
.header-inner {
  width: 100%;
  max-width: var(--content-pc);
  height: 85px;
  background: #fff;
  border-radius: 9999px;
  padding: 0px 0px 0px 30px;
  display: grid;
  grid-template-columns: 1fr auto auto; /* 左:ロゴ / 右:ナビ+CTA */
  align-items: center;
  gap: 24px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  margin-inline: auto;
}
/* ロゴ */
.brand-logo {
  display: block;
  height: clamp(16.82px, 2vw, 36px);
  width: auto;
  max-width: 100%;
}
/* ナビ */
.site-nav {
  justify-self: center;
}
.site-nav .menu {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  gap: 16px;
}
.site-nav a {
  text-decoration: none;
  font-weight: 700;
  color: var(--color-text);
  font-size: clamp(18px, 1.6vw, 22px);
}
.site-nav .nav-cta,
.site-nav .nav-cta:link,
.site-nav .nav-cta:visited {
  color: #fff;
}
/* CTA（白枠なしバージョン） */
.header-cta {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--color-primary);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: clamp(18px, 1.6vw, 22px); /* 上限22pxを維持 */
  padding: 24px 22px 24px 32px;
  border-radius: 9999px;
  transition: background 0.2s ease, transform 0.1s ease;
}
.header-cta:hover {
  background: #f3981c;
}
.header-cta:active {
  transform: translateY(1px);
}
.header-cta .cta-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 8px;
}
.menu-extra {
  display: none;
}
/* ハンバーガー（SP用） */
.nav-toggle {
  display: none;
}
.hamburger {
  display: none;
  cursor: pointer;
  width: 28px;
  height: 22px;
  flex-direction: column;
  justify-content: space-between;
}
.hamburger span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--color-text);
  transition: transform 0.2s, opacity 0.2s;
}
/* トグルONで変形 */
.nav-toggle:checked + .hamburger span:nth-child(1) {
  transform: translateY(10px) rotate(45deg);
}
.nav-toggle:checked + .hamburger span:nth-child(2) {
  opacity: 0;
}
.nav-toggle:checked + .hamburger span:nth-child(3) {
  transform: translateY(-10px) rotate(-45deg);
}
/* SP時のレイアウト */
@media (max-width: 768px) {
  .header-inner {
    max-width: var(--content-sp);
    grid-template-columns: 1fr auto;
    height: 45px;
    padding-inline: var(--sp-gutter);
    align-items: center;
  }
  .header-inner:has(.nav-toggle:checked) .brand-logo {
    opacity: 0;
    pointer-events: none;
  }
  .site-nav {
    display: none;
    grid-column: 1 / -1;
    margin-top: 12px;
  }
  .header-cta {
    display: none;
  }
  .site-nav .menu {
    flex-direction: column;
    gap: 8px;
    align-items: center;
  }
  .hamburger {
    z-index: 1101 !important;
    width: 28px;
    height: 22px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    cursor: pointer;
  }
  .hamburger span {
    display: block;
    width: 100%;
    height: 2px;
    border-radius: 1px;
    background: var(--color-text);
  }
  .nav-toggle:checked + .hamburger {
    width: 45px;
    height: 45px;
    border-radius: 9999px;
    background: #fff;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
    justify-content: center;
  }
  .nav-toggle:checked + .hamburger span {
    position: absolute;
    width: 22px;
    background: var(--color-faq);
  }
  .nav-toggle:checked + .hamburger span:nth-child(1) {
    transform: rotate(45deg);
  }
  .nav-toggle:checked + .hamburger span:nth-child(2) {
    opacity: 0;
  }
  .nav-toggle:checked + .hamburger span:nth-child(3) {
    transform: rotate(-45deg);
  }
  .nav-panel {
    position: fixed;
    inset: 0;
    z-index: 1000 !important;
    display: flex;
    flex-direction: column;
    width: 100dvw;
    height: 100dvh;
    grid-template-rows: 1fr auto auto;
    background: var(--color-secondary);
    padding: 0;
    opacity: 0;
    margin: 0;
    top: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s step-end;
  }
  .nav-toggle:checked ~ .nav-panel {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  /* 上段：ナビ（通常の項目。“●”は装飾） */
  .nav-panel .menu {
    list-style: none;
    margin: 90px 0 40px;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
  }
  .nav-panel .menu a {
    color: var(--color-text);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
  }
  .nav-panel .menu a .dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--color-accent);
  }
  /* 黄色エリアのプロモ（キャラ＋CTA） */
  .nav-panel__promo {
    display: none;
    align-items: center;
    flex-direction: column;
    gap: 14px;
    padding: 0 20px;
  }
  .nav-panel__promo .menu-characters {
    display: flex;
    gap: 16px;
    align-items: flex-end;
  }
  .nav-panel__promo .menu-characters img {
    width: 140px;
    height: auto;
  }
  /* ナビ内に出すCTA */
  .nav-cta {
    margin-top: 0;
    margin-bottom: 40px;
    --cta-h: 63.32px;
    --cta-w: 335px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-width: var(--cta-w);
    height: var(--cta-h);
    padding: 0 0 0 28px;
    background: var(--color-primary);
    color: #fff;
    font-size: 21px;
    font-weight: 700;
    border-radius: 9999px;
    box-shadow: inset 0 0 0 4px #fff, 0 12px 12px rgba(0, 0, 0, 0.3);
    text-decoration: none;
    transition: background 0.25s ease, transform 0.15s ease;
  }
  .nav-cta:hover {
    background: #f3981c;
  }
  .nav-cta .cta-icon {
    width: 28.6px;
    height: 28.6px;
    border-radius: 9999px;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 16px;
    flex: 0 0 auto;
  }
  .nav-cta .cta-icon svg {
    width: 16.12px;
    height: 12.15px;
    color: var(--color-primary);
  }
  /* 下段：茶色エリア（フッター相当） */
  .nav-panel__footer {
    margin-top: auto;
    margin-bottom: 38px;
    display: none;
    position: relative;
    z-index: 1;
    background: var(--color-dark);
    color: #fff;
    min-height: var(--nav-footer-h);
    padding: 100px 20px 16px;
    display: grid;
    gap: 12px;
    justify-items: center;
    align-content: start;
    text-align: center;
    overflow: visible;
  }
  .nav-panel__footer::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: calc(-1 * 163px * 1 / (1440 / 163)); /* おおよそ波の高さ分だけ上へ */
    height: calc(100dvw * (163 / 1440)); /* 画面幅に対して比率で波高さ */
    background: url("../img/footer/Vector.svg") no-repeat center bottom / 100%
      100%;
    pointer-events: none;
    z-index: 2;
  }
  .nav-panel__footer .footer-logo-img {
    height: 35.64px;
    width: auto;
    margin-top: 0;
  }
  .nav-panel__footer .footer-nav {
    display: inline-flex;
    gap: 2px;
    flex-wrap: wrap;
    margin-top: 6px;
    font-size: 14px;
  }
  .nav-panel__footer .footer-link {
    color: #fff;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 300;
  }
  .nav-panel__footer .footer-link:hover,
  .nav-panel__footer .footer-link:focus-visible {
    color: var(--color-accent);
  }
  .nav-panel__footer .ext {
    width: 18px;
    height: 18px;
  }

  /* コピーライト帯（茶色のさらに下の帯） */
  .nav-panel__copyright {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-faq);
    color: #fff;
    text-align: center;
    padding: 10px 0;
    z-index: 5;
  }
  .nav-panel__copyright small {
    display: block;
  }

  /* ====== 未展開→非表示 / 展開→表示 ====== */
  .nav-panel__promo,
  .nav-panel__footer,
  .nav-panel__copyright {
    display: none;
  } /* 初期は消す */
  .nav-toggle:checked ~ .nav-panel .nav-panel__promo {
    display: flex;
  }
  .nav-toggle:checked ~ .nav-panel .nav-panel__footer {
    display: grid;
  }
  .nav-toggle:checked ~ .nav-panel .nav-panel__copyright {
    display: block;
  }
  html:has(.nav-toggle:checked),
  body:has(.nav-toggle:checked) {
    overflow: hidden;
    touch-action: none;
  }
  /* 展開中はスクロール固定（JSが .is-nav-open を付与） */
  html.is-nav-open,
  body.is-nav-open {
    overflow: hidden;
    touch-action: none;
  }
  /* iOSのノッチ対策（必要な端末のみ効く） */
  @supports (padding-top: env(safe-area-inset-top)) {
    .nav-panel {
      padding-top: max(0px, env(safe-area-inset-top));
    }
  }
}
@media (max-width: 400px) {
  .nav-panel__footer {
    padding-top: 60px;
  }
}
/* ================== デスクトップ幅ではSPナビを完全に隠す ================== */
@media (min-width: 769px) {
  /* ハンバーガー/トグル/モバイル用パネルを全て非表示＆無効化 */
  #nav-toggle,
  .hamburger {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  .nav-panel {
    position: static !important;
    inset: auto !important;
    z-index: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    background: transparent !important; /* ヘッダーの背景に委ねる */
    display: block !important; /* ヘッダー内の通常ナビとして表示 */
  }
  .nav-panel__promo,
  .nav-panel__footer,
  .nav-panel__copyright,
  .nav-panel::after {
    /* 波 */
    display: none !important;
    content: none !important;
  }
  /* 念のため、モバイル展開時のスクロール固定を解除しておく */
  html.is-nav-open,
  body.is-nav-open {
    overflow: auto !important;
    touch-action: auto !important;
  }
}

/* =============== Hero =============== */
.hero {
  position: relative;
  padding-block: var(--section-pc);
  overflow: hidden;
}
/* 共通設定：葉のサイズはFigmaと同じ W540 × H459 */
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  width: calc(540px * 0.8);
  height: calc(459px * 0.8);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none; /* クリックを邪魔しない */
}
/* 左の葉 */
.hero::before {
  background-image: url("../img/hero/leaf-1.svg");
  left: 0px;
  /* left: calc(var(--frame-edge) - 20px); */
  top: 0px;
  transform: scaleX(-1);
  transform-origin: center center;
}
/* 右の葉 */
.hero::after {
  background-image: url("../img/hero/leaf-2.svg");
  top: 0px;
  /* right: calc(var(--frame-edge) - 80px); */
  right: -50px;
}
.hero__container.hero-inner.container {
  padding-top: 85px;
  position: relative;
  z-index: 10;
  display: grid;
  gap: 24px;
  justify-items: center;
}
/* タイトル全体を縦積み */
.hero-title {
  display: flex;
  z-index: 10;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
/* 各行を横並びに */
.hero-title .title-line {
  display: flex;
  justify-content: center;
  gap: 8px;
}
/* 行ごとにサイズを調整 */
.title-line.line1 img {
  height: 44px;
  width: auto;
}
.title-line.line2 img {
  height: 66px;
  width: auto;
}
/* 強調色（SVGが currentColor を使っている場合のみ有効） */
.hero-title .title-accent {
  color: var(--color-accent);
}
/* 特典3つの並び＋キラキラの基準枠 */
.hero-features {
  position: relative;
  z-index: 10;
  width: min(100%, 980px);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* 丸バッジ3つ：横並び */
.badges {
  display: flex;
  justify-content: center;
  gap: 0;
}
/* 2個目以降を少し左へ食い込ませる（=重ねる） */
.badges .circle-badge + .circle-badge {
  margin-left: -12px; /* 重なり量。-8〜-16pxでお好み調整 */
}
/* 視覚的な重なり順（左<中<右 の順に上に重なる） */
.badges .circle-badge:nth-child(1) {
  z-index: 1;
}
.badges .circle-badge:nth-child(2) {
  z-index: 2;
}
.badges .circle-badge:nth-child(3) {
  z-index: 3;
}
/* 丸バッジ（CSS多重シャドウで黄色レイヤー＋白円＋内側シャドウ） */
.circle-badge {
  position: relative;
  width: 263px;
  height: 263px;
  border-radius: 50%;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
}
.circle-badge::before {
  content: "";
  position: absolute;
  width: 194.02px;
  height: 194.02px;
  border-radius: 50%;
  background: #fff; /* 内側シャドウ＋黄色レイヤー（外→内） */
  box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.1),
    0 0 0 34px rgba(250, 192, 17, 0.2),
    /* 20% */ 0 0 0 24px rgba(250, 192, 17, 0.4),
    /* 40% */ 0 0 0 12px rgba(250, 192, 17, 0.6); /* 60% */
}
.badge-content {
  position: relative;
  z-index: 1;
  margin-top: -28px;
  text-align: center;
}
.badge-num img {
  width: 48px;
  height: auto;
  display: block;
  margin: 0 auto 8px;
}
.badge-line {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
}
.badge-line .badge-text {
  display: block;
  height: 22px;
  width: auto;
}
.badge-line:nth-of-type(1) {
  margin-bottom: 8px;
}
/* 1行目と2行目の間隔 */ /* ✦キラキラ */
.sparkles {
  position: absolute;
  color: var(--color-accent);
  pointer-events: none;
  z-index: 9; /* バッジ(11)より下／キャラより上にしたいならここ調整 */
}
.sparkles svg {
  display: block;
  width: 100%;
  height: auto;
}
/* 位置とサイズ（PCの初期値。数px単位で微調整してください） */
.sparkles-left {
  left: -50px;
  top: -30px;
  width: 137px;
}
.sparkles-right {
  right: -50px;
  top: -30px;
  width: 137px;
}
/* サブタイトル（吹き出し一括SVG） */
.hero-subtitle {
  display: flex;
  position: relative;
  z-index: 10;
  justify-content: center;
}
.hero-subtitle .subtitle-img {
  height: 63px;
  width: auto;
  display: block;
}
/* CTAボタン（指定どおり：内側4px白ストローク/サイズW492×H93/矢印白丸） */
.hero-cta {
  display: flex;
  justify-content: center;
}
.cta-btn {
  --cta-h: 93px;
  --cta-w: 492px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: var(--cta-w);
  height: var(--cta-h);
  padding: 0 0 0 28px;
  background: var(--color-primary);
  color: #fff;
  font-weight: 700;
  border-radius: 9999px;
  box-shadow: inset 0 0 0 4px #fff, 0 12px 12px rgba(0, 0, 0, 0.3);
  text-decoration: none;
  transition: background 0.25s ease, transform 0.15s ease;
}
.cta-btn:hover {
  background: #f3981c;
  transform: translateY(-2px);
}
.cta-btn:focus-visible {
  outline: 2px solid rgba(246, 134, 36, 0.35);
  outline-offset: 4px;
}
.cta-label {
  line-height: 1;
  font-size: 32px;
}
.cta-icon {
  width: 48px;
  height: 48px;
  border-radius: 9999px;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 16px;
  flex: 0 0 auto;
}
.icon-arrow {
  width: 22px;
  height: 22px;
  color: var(--color-primary);
}
/* キャラクター（装飾・読み飛ばし） */
.hero-characters {
  position: absolute;
  inset: 0; /* top, right, bottom, left = 0; */
  z-index: 1;
  pointer-events: none;
}
/* ヒーローに下方向の余白を少し追加（尻尾ぶん） */
.hero {
  padding-bottom: calc(var(--section-pc) + 40px);
}

/* ============ キツネ位置とサイズ ============ */
.hero-characters img {
  position: absolute;
  bottom: -100px;
  height: auto;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.08));
}
/* 左＝黄色、右＝茶色 */
.hero-characters .fox-left {
  left: -150px;
  width: 310px;
}
.hero-characters .fox-right {
  right: -150px;
  width: 310px;
}
/* ===== 1) コンテンツを“ヘッダー基準”に固定（中央寄せの土台） ===== */
@media (max-width: 768px) {
  .hero::before,
  .hero::after {
    width: calc(540px * 0.5);
    height: calc(459px * 0.5);
  }
  .hero__container.hero-inner.container {
    max-width: var(--content-sp) !important;
    width: 100%;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--sp-gutter) !important;
    padding-right: var(--sp-gutter) !important;
    padding-bottom: calc(var(--section-sp) + 160px);
    display: grid;
    justify-items: center;
    gap: 24px;
    position: relative;
    z-index: 10;
  }
  .title-line.line1 img {
    height: 20.98px;
  }
  .title-line.line2 img {
    height: 27.46px;
  }
  .hero-title {
    justify-self: stretch;
    width: 100%;
    min-width: 0 !important;
    margin: 0;
    gap: 0;
  }
  .hero-subtitle,
  .hero-features,
  .hero-cta {
    justify-self: stretch;
    width: 100%;
    min-width: 0 !important;
  }
}

/* ===== 3) バッジの食い込みを無効化（右に流れる原因のリセット） ===== */
@media (max-width: 768px) {
  .badges {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: center;
    gap: 2px;
    margin: 0 auto;
  }
  .badges .circle-badge + .circle-badge {
    margin-left: 0 !important;
  }

  /* 並び：上段1 / 下段2 */
  .badges .circle-badge:first-child {
    grid-column: 1 / -1;
    justify-self: center;
  }
  /* 下段（2・3個目）を少し上に寄せる */
  .hero .badges .circle-badge:nth-child(2),
  .hero .badges .circle-badge:nth-child(3) {
    margin-top: -16px;
  }
  /* サイズ：160.49px 指定 */
  .badges .circle-badge {
    width: 160.49px;
    height: 160.49px;
    flex: 0 0 auto;
  }
  .badges .circle-badge::before {
    width: 118.4px; /* 194.02 * 0.61 */
    height: 118.4px;
    box-shadow: inset 0 2.5px 5px rgba(0, 0, 0, 0.1),
      0 0 0 20.8px rgba(250, 192, 17, 0.2), 0 0 0 14.7px rgba(250, 192, 17, 0.4),
      0 0 0 7.3px rgba(250, 192, 17, 0.6);
  }
  .badge-content {
    margin-top: -17px;
  }
  .badge-num img {
    width: 29px;
    margin: 0 auto 5px;
  }
  .badge-line {
    gap: 4px;
  }
  .circle-badge:nth-child(1) .line0101 img {
    width: 49px;
  }
  .circle-badge:nth-child(1) .line0102 img {
    width: 94.23px;
  }
  .circle-badge:nth-child(2) .line0201 img {
    width: 52.35px;
  }
  .circle-badge:nth-child(2) .line0202 img {
    width: 97.54px;
  }
  .circle-badge:nth-child(3) .line0301 img {
    width: 96.19px;
  }
  .circle-badge:nth-child(3) .line0302 img {
    width: 102.41px;
  }
  .badge-line .badge-text {
    height: 13px;
  }
  .badge-line:nth-of-type(1) {
    margin-bottom: 5px;
  }
  .hero-subtitle .subtitle-img {
    height: 54.88px;
  }
}

/* ===== 4) 背景・装飾は“フロー外”に固定（見た目だけ・位置ズレ防止） ===== */
.hero::before,
.hero::after,
.hero-characters,
.sparkles {
  pointer-events: none;
}

@media (max-width: 768px) {
  .sparkle {
    transform: none;
  }
  .sparkles-left {
    left: 0px;
    top: 80px;
    width: 71.28px;
  }
  .sparkles-right {
    right: 0px;
    top: 80px;
    width: 71.28px;
  }
  .hero {
    padding-bottom: calc(var(--section-sp) + 24px);
  }
  .hero {
    padding-block: var(--section-sp);
  }
  .hero-title .title-part svg {
    height: 28px;
  }
  .cta-btn {
    --cta-h: 60px;
    --cta-w: auto;
    width: 100%;
    min-width: 0;
    padding: 0 20px;
    box-shadow: inset 0 0 0 3px #fff, 0 6px 14px rgba(0, 0, 0, 0.1);
  }
  .cta-icon {
    width: 40px;
    height: 40px;
  }
  .icon-arrow {
    width: 18px;
    height: 18px;
  }
  .cta-label {
    line-height: 1;
    font-size: 16px;
  }
  .hero-characters img {
    bottom: 0px;
  }
  .hero-characters .fox-left {
    left: 0px;
    width: 136px;
  }
  .hero-characters .fox-right {
    right: 0px;
    width: 136px;
  }
}

/* =============== Features Section =============== */
#features {
  --pattern-img: url("../img/features/bg-bulb-pattern.svg");
  --pattern-pos: center top;
  background-color: #f8a342;
  background-image: var(--pattern-img);
  background-repeat: repeat;
  background-size: auto;
  background-position: var(--pattern-pos);
  margin-top: calc(var(--features-arc-rise) * -0.9);
  padding-top: calc(66px + var(--features-arc-rise));
  --arc-h: 180px; /* 上カーブの見せ高さ（SPの目安） */
  --wave-h: 140px; /* 下の波の見せ高さ（SPの目安） */
  padding-top: calc(var(--arc-h) + 24px);
  padding-bottom: calc(var(--wave-h) + 24px);
  color: var(--color-text, #5a3b2e);
  font-family: "Zen Maru Gothic", sans-serif;
  position: relative;
}
#features::before,
#features::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100dvw;
  pointer-events: none;
}
/* 上カーブ */
#features::before {
  top: -1px;
  aspect-ratio: 1440 / 200;
  background-image: url("../img/features/bg-features-shape.svg");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100%;
}
/* 下の波 */
#features::after {
  bottom: -1px;
  aspect-ratio: 1440 / 163;
  background-image: url("../img/features/bg-bottom-wave.svg");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100%;
}
/* 互換性フォールバック（dvw未対応ブラウザ用） */
@supports not (width: 100dvw) {
  #features::before,
  #features::after {
    width: 100vw;
  }
}

/* セクション側で横はみ出しを抑止（影は残したいので clip 推奨） */
#features {
  overflow-x: clip;
}
@supports not (overflow: clip) {
  #features {
    overflow-x: hidden;
  }
}
.features__inner {
  max-width: var(--content-pc);
  margin-inline: auto;
  padding-top: 50px;
  padding-inline: 0;
  text-align: center;
}
.features__icon {
  margin-bottom: 16px;
}
.features__icon img {
  width: clamp(220px, 60vw, 463px);
  height: auto;
}
.features__icon svg {
  width: clamp(220px, 60vw, 463px);
  height: auto;
}

/* 吹き出しベース */
.features__heading {
  position: relative;
  width: min(100%, 683px);
  height: auto;
  margin: 40px auto 68px auto;
}
.features__bubble-title img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.08));
}

/* ---- 特徴カード（全体） ---- */
.features__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.feature {
  position: relative;
  margin-bottom: 48px;
}
.feature__wrap--wide {
  position: relative;
  width: min(100%, 1074px);
  margin: 0 auto;
}
.feature--02 .feature__wrap,
.feature--03 .feature__wrap {
  position: relative;
  width: min(100%, 1074px);
  margin: 0 auto;
}
.feature__badge {
  position: absolute;
  top: -30px;
  left: 10px;
  z-index: 10;
}
.feature__badge img {
  width: 130px;
  height: 130px;
}
/* 共通カード */
.feature__card {
  position: relative;
  width: 100%;
  border-radius: 285px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
/* 白面（特徴1専用） */
.feature__card--wide {
  width: min(100%, 1074px);
  aspect-ratio: 1074 / 478;
  margin: 0 auto;
  background: transparent;
  box-shadow: none;
}
.feature__card--wide::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: #fff;
  /* box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08),
    inset 0 8px 20px rgba(0, 0, 0, 0.5); */
  z-index: 1;
}

/* グラデーション枠（特徴1専用） */
.feature__card--wide::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 14px;
  background: linear-gradient(90deg, #f68624 0%, #fbc935 50%, #f68624 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
}

/* 背景イラスト（特徴1用） */
.feature1__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 52% 58%; /* 必要に応じて調整 */
  z-index: 1;
  pointer-events: none;
}

/* オーバーレイ要素（テキストやタイトル） */
.feature1__overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  text-align: center;
  padding: clamp(12px, 3vw, 40px);
  color: #4d322c;
}

/* 見出し（特徴１） */
.feature1__subtitle {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  font-size: clamp(20px, 2.2vw, 32px); /* PC基準32px */
  margin: 0;
  margin-top: 24px;
  line-height: 1.4;
  text-align: center;
}
.feature1__subtitle-primary {
  color: var(--color-primary, #f68624);
}
.feature1__subtitle-dark {
  color: var(--color-dark, #4d322c);
}
/* SVG見出し（特徴１） */
.feature1__svg {
  display: block;
  height: auto;
  margin: 0 auto;
  text-align: center;
}
.feature1__svg--amount {
  width: clamp(102px, 28vw, 184px);
  margin-bottom: clamp(2px, 1vw, 6px);
}
.feature1__svg--cashback {
  width: clamp(229px, 32vw, 400px);
  margin-bottom: clamp(6px, 1.6vw, 12px);
}

/* 本文テキスト（共通） */
.feature__text {
  font-size: clamp(14px, 1.4vw, 18px);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.8;
  margin: 0;
  z-index: 3;
}

/* ---- 特徴2・3カード ---- */
.feature__card--normal {
  position: relative;
  width: min(100%, 1074px);
  aspect-ratio: 1074 / 478;
  margin: 0 auto;
  background: transparent;
  border-radius: 285px;
  display: grid;
  grid-template-columns: var(--img-col, 46%) 1fr;
  align-items: center;
  column-gap: var(--gap, 40px);
  padding: 48px;
  box-shadow: none;
  overflow: hidden;
}
.feature__card--normal::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: #fff;
  z-index: 1;
}
/* グラデーション枠（特徴2/3専用） */
.feature__card--normal::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 14px;
  background: linear-gradient(90deg, #f68624 0%, #fbc935 50%, #f68624 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
}
/* --- 02専用の微調整値 --- */
.feature--02 .feature__card--normal {
  --img-col: 50%;
  --gap: 10px;
  --text-max: 350px;
  --img-offset-y: 8px;
}
/* --- 03専用 --- */
.feature--03 .feature__card--normal {
  --img-col: 50%;
  --gap: 10px;
  --text-max: 362px;
  --img-offset-y: 8px;
}
.feature__image {
  position: relative;
  z-index: 3;
}
.feature__image img {
  max-width: 80%;
  height: auto;
  object-fit: contain;
  transform: translateY(var(--img-offset-y, 0px));
}
.feature__body {
  max-width: var(--text-max, 520px);
  text-align: left;
  z-index: 3;
}
.feature__title {
  font-size: clamp(21px, 2.5vw, 32px);
  font-weight: 700;
  color: var(--color-dark, #4d322c);
  margin: 0 0 10px;
  text-align: left;
  z-index: 3;
}
.feature__title__subtitle-primary {
  color: var(--color-primary, #f68624);
}
.feature__title__subtitle-dark {
  color: var(--color-dark, #4d322c);
}
/* SVG見出し（特徴２・３）*/
.feature2__svg {
  display: block;
  width: clamp(164px, 32vw, 312px);
  margin: 6px 0 18px;
  z-index: 3;
}
.feature3__svg {
  display: block;
  width: clamp(101px, 32vw, 192px);
  margin: 6px 0 18px;
  z-index: 3;
}

/* SPレスポンシブ */
@media (max-width: 768px) {
  .features__heading {
    margin-bottom: 40px;
  }
  .features__bubble-title {
    position: relative;
    width: 305px;
    height: auto;
    display: block;
    margin: 0 auto;
    filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.08));
  }
  .feature__badge {
    top: -10px;
    left: 0px;
  }
  .feature__badge img {
    width: 90.85px;
    height: 94.33px;
  }
  .feature__wrap--wide {
    width: min(100%, 319px);
  }
  .feature--02 .feature__wrap,
  .feature--03 .feature__wrap {
    width: min(100%, 333px);
  }
  .feature__card--wide {
    overflow: hidden;
    aspect-ratio: auto;
    width: 319px;
    height: auto;
    min-height: 560px;
    background: transparent;
  }
  .feature__card--wide::after {
    padding: 10px;
  }
  /* 白面（内側）のシャドウをやや軽く */
  .feature__card--wide::before {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08),
      inset 0 4px 14px rgba(0, 0, 0, 0.35);
  }
  .feature1__bg {
    content: url("../img/features/feature1-main-sp.png");
    object-fit: cover;
    object-position: center;
  }
  /* オーバーレイ全体：縦並び化 */
  .feature1__overlay {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    gap: 10px;
    padding: 28px 20px 24px;
  }

  /* サブタイトル */
  .feature1__subtitle {
    font-size: 21px;
    line-height: 1.6;
    margin: 0;
    margin-top: 20px;
  }

  /* SVG見出し（1万円／キャッシュバック） */
  .feature1__svg--amount {
    width: 58%;
    max-width: 102px;
    height: auto;
    margin-bottom: 6px;
  }
  .feature1__svg--cashback {
    width: 78%;
    max-width: 229px;
    height: auto;
    margin-bottom: 16px;
  }
  .feature__body {
    display: flex;
    flex-direction: column;
    text-align: center;
    margin: 0 auto;
    margin-top: -16px;
    align-items: center;
  }
  .feature__title {
    text-align: center;
  }
  /* 本文テキスト */
  .feature__text {
    max-width: 285px;
    font-size: 14px;
    line-height: 1.9;
    margin: 0 auto;
  }
  .feature2__svg {
    margin-bottom: 8px;
  }
  .feature__card--normal {
    grid-template-columns: 1fr;
    padding: 48px;
    width: 333px;
    height: auto;
    min-height: 560px;
    text-align: center;
  }
  .feature__image {
    margin-inline: auto;
    margin-bottom: 8px;
  }
  .feature__image img {
    /* width: min(80%, 220px); */
    height: auto;
    object-fit: contain;
    transform: translateY(var(--img-offset-y, 0px));
  }
  /* 背景単発アートの位置も1440端を基準にしつつSPで中央寄せ気味に */
  #features {
    background-position: center calc(var(--features-bg-offset)),
      left calc(var(--frame-edge) + var(--sp-gutter))
        calc(var(--features-bg-offset));
  }
}

/* ==== MOVIE Section ==== */
.movie {
  position: relative;
  overflow: hidden;
  background: var(--color-surface);
  padding-top: calc(var(--section-pc) * 1.5);
  padding-bottom: calc(var(--section-pc) * 5);
}

/* 背景の太陽 */
.movie-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}
.sun {
  position: absolute;
  width: clamp(220px, 30vw, 345.81px);
  height: auto;
  pointer-events: none;
  user-select: none;
  opacity: 0.95;
}
.sun--left {
  left: -1%;
  top: 8%;
}
.sun--right {
  right: -3%;
  bottom: 5%;
  transform: rotate(170deg);
  transform-origin: center;
}
.movie-inner {
  max-width: var(--content-pc);
  margin-inline: auto;
  padding-inline: 0;
}

.movie-head {
  text-align: center;
}

.movie-icon {
  width: clamp(56px, 7vw, 92px);
  height: auto;
  display: block;
  margin: 0 auto 16px;
}

.movie-title {
  font-family: "Monomaniac One", system-ui, -apple-system, "Segoe UI", Roboto,
    "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-weight: 400;
  font-size: clamp(40px, 7vw, 90px);
  line-height: 1.05;
  letter-spacing: 0.02em;
  color: var(--color-dark);
  margin: 0 0 16px;
}

.movie-sub {
  margin: 0 auto 40px;
  max-width: 52ch; /* 読み幅を揃える */
  text-align: center;
  color: var(--color-text);
  line-height: 1.9;
  font-size: clamp(16px, 2.1vw, 25px); /* 固定px→clamp に */
}

/* ====== カード（16:9・三重長方形） ====== */
.movie-body {
  position: relative;
}

.movie-card {
  position: relative;
  margin: 0 auto;
  width: min(100%, 1101px);
  aspect-ratio: 1101 / 706;
  height: auto;
  border-radius: 40px;
  background: rgba(250, 192, 17, 0.2);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  display: grid;
  place-items: center;
  isolation: isolate; /* 子の重なり管理 */
}

/* 中長方形（40%） */
.movie-card::before,
.movie-card::after {
  content: "";
  position: absolute;
  inset: 20px;
  border-radius: 32px;
  background: rgba(250, 192, 17, 0.4);
  z-index: 0;
}

/* 最内側長方形（60%） */
.movie-card::after {
  inset: 48px;
  border-radius: 28px;
  background: rgba(250, 192, 17, 0.6);
}

/* 中央シルエットとテキスト */
.movie-silhouette {
  width: 86.2%;
  aspect-ratio: 950 / 557;
  height: auto;
  z-index: 1;
  display: block;
  opacity: 0.95;
}
/* ③ 動画タグの共通スタイル（追加） */
.movie-video {
  display: block;
  background-color: rgba(255, 255, 255, 0.6);
  width: clamp(82%, 65vw, 86%);
  height: auto;
  border-radius: 24px;
  object-fit: cover;
  aspect-ratio: 16 / 9;
  z-index: 1;
}

/* ④ 下段：リール枠の比率だけ縦型に（追加） */
.movie-card--reel {
  margin-top: 80px;
  width: min(100%, 520px);
  aspect-ratio: 9 / 14;
}
.movie-card--reel .movie-video {
  aspect-ratio: 9 / 16;
  width: clamp(66%, 65vw, 70%);
  z-index: 5;
}
/* ====== キャラクター配置 ====== */
/* PC配置：右上＆左下に溢れ気味で置く */
.hinatan {
  position: absolute;
  pointer-events: none;
  user-select: none;
}

.hinatan--top {
  /* 右上 */
  width: clamp(200px, 2vw, 291.87px);
  height: auto;
  top: -170px;
  right: 50px;
}

.hinatan--bottom {
  /* 左下 */
  width: 248px;
  height: auto;
  left: calc(var(--frame-edge) - 50px);
  bottom: -400px;
}
.hinatan img {
  display: block;
  width: 100%;
  height: auto;
}

/* SP */
@media (max-width: 768px) {
  .movie {
    padding-block: var(--section-sp);
    padding-top: var(--section-sp);
    padding-bottom: calc(var(--section-sp) * 8);
  }
  .movie-inner {
    max-width: var(--content-sp, 335px);
    padding-inline: var(--sp-gutter, 20px);
  }

  .movie-head {
    text-align: center;
  }

  .movie-icon {
    width: clamp(40px, 12vw, 56px);
    margin: 0 auto 12px;
  }

  .movie-title {
    font-size: clamp(28px, 8vw, 40px);
    margin: 0 0 12px;
    line-height: 1.08;
  }

  .movie-sub {
    font-size: clamp(14px, 4.2vw, 16px);
    line-height: 1.85;
    margin: 0 auto 24px;
    max-width: 30ch; /* 読み幅をやや短く */
  }

  /* === 背景の太陽：小さめ＆ズレ防止 === */
  .sun {
    width: 114px;
    opacity: 0.9;
  }
  .sun--left {
    left: -1%;
    top: 6%;
  }
  .sun--right {
    right: -3%;
    bottom: 1%;
    transform: rotate(170deg);
  }

  /* === カード：SP幅にフィット、角丸とインセットを縮小 === */
  .movie-card {
    width: min(100%, 335px);
    aspect-ratio: 1101 / 706; /* 既存の比率を維持（16:9にしない場合） */
    border-radius: 12px; /* 40px -> 12px にスケール */
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  }
  /* 中長方形（40%） */
  .movie-card::before,
  .movie-card::after {
    inset: 6px; /* 20px相当をSPにスケール */
    border-radius: 10px; /* 32px -> 10px */
    background: rgba(250, 192, 17, 0.4);
  }
  /* 最内側（60%） */
  .movie-card::after {
    inset: 15px; /* 48px -> 15px */
    border-radius: 8px; /* 28px -> 8px */
    background: rgba(250, 192, 17, 0.6);
  }

  /* 中央シルエット（COMING SOON） */
  .movie-silhouette {
    width: 86%;
    max-width: 290px;
  }
  /* 上段：解説（横型）は既存の .movie-card 幅に追従 */
  .movie-video {
    border-radius: 12px;
  }

  /* 下段：リールはより細く＆縦長を強調 */
  .movie-card--reel {
    width: min(100%, 220px);
    aspect-ratio: 9 / 14;
    margin-top: 40px;
    border-radius: 12px;
  }
  .movie-card--reel .movie-video {
    aspect-ratio: 9 / 16;
    border-radius: 10px;
  }
  /* === 下部キャラクター：2匹がきれいに並ぶ配置 === */
  .movie {
    padding-bottom: calc(var(--section-pc) * 2.5);
  }
  .hinatan {
    width: 106px;
  }
  .hinatan--top {
    left: calc(var(--sp-gutter) + 30%);
    bottom: -200px;
    top: auto;
  }
  .hinatan--bottom {
    left: calc(var(--sp-gutter) - 4px);
    bottom: -200px;
  }
}
/* ====== シミュレーションセクション ====== */
.sim {
  --pattern-img: url("../img/simulator/sim-pattern.svg");
  font-family: "Zen Maru Gothic", sans-serif;
  position: relative;
  overflow: hidden;
  padding-block: var(--section-pc);
  background-color: var(--color-primary);
  background-image: var(--pattern-img);
  background-repeat: repeat;
  background-size: auto;
  background-position: center top;
  padding-top: calc(140px + var(--features-arc-rise));
  padding-bottom: 500px;
}
/* === 上部波型 === */
.sim::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  aspect-ratio: 1440 / 162;
  background: url("../img/simulator/sim-wave-reverse.svg");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100%;
  z-index: 1;
}
/* タイトル */
.sim__head {
  text-align: center;
}
/* 吹き出しベース */
.sim__heading {
  position: relative;
  width: min(100%, 683px);
  height: auto;
  margin: 40px auto 40px auto;
}
img.sim__title {
  inset: 0;
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.08));
}
.sim__icon img {
  height: auto;
  width: 463px;
}
.sim__subtitle {
  margin: 0 auto 40px;
  max-width: 52ch; /* 読み幅を揃える */
  text-align: center;
  color: #fff;
  line-height: 1.9;
  font-size: clamp(21px, 2.4vw, 32px); /* 固定px→clamp に */
}
/* 強調ボックス */
.sim__subtitle--highlight {
  display: inline-block;
  background: var(--color-dark);
  color: #fff;
  padding: 4px 10px;
  line-height: 1.4;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
/* 改行制御 */
.sp-only {
  display: none;
}

/* カード */
.sim__card {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 910px;
  margin: 32px auto 0;
  padding: 32px 24px;
  border-radius: 60px;
  background: #fcf9ef;
  align-items: center;
  box-shadow: inset 0 10px 0 rgba(0, 0, 0, 0.1), 0 6px 16px rgba(0, 0, 0, 0.5);
}

/* フォーム */
.sim-form__field {
  display: flex;
  flex-direction: column;
  margin-bottom: 18px;
  align-items: flex-start;
  text-align: center;
}
.sim-form__label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 22px;
  color: var(--color-dark);
  margin: 30px 0 10px;
}
.sim-form__label::before {
  content: "";
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-accent);
}

/* 入力 */
.sim-input,
.sim-select {
  width: min(100%, 520px);
  height: 65px;
  border-radius: 100px;
  border: none;
  outline: none;
  padding: 0 22px;
  background: #fff;
  color: var(--color-text);
  font-size: 22px;
  line-height: 65px;
  box-shadow: inset 0 0 0 4px var(--color-faq);
  transition: box-shadow 0.2s ease, transform 0.06s ease;
}
.sim-input:focus,
.sim-select:focus {
  box-shadow: inset 0 0 0 4px var(--color-faq), 0 0 0 2px var(--color-dark);
}

/* ▼アイコン */
.sim-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="%234d322c" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>');
  background-repeat: no-repeat;
  background-position: right 18px center;
  padding-right: 54px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  /* 右端の丸アイコン */
  background-image: url(../img/simulator/select-button.svg);
  background-repeat: no-repeat;
  background-position: right 0px center; /* 丸の位置 */
}

/* ラジオ */
.sim-radio {
  display: flex;
  font-size: 18px;
  gap: 36px;
  flex-wrap: wrap;
  justify-content: center;
  width: fit-content;
  margin-inline: auto;
}
.sim-radio label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  flex: 0 0 auto; /* ← これで横に広がらない */
  margin: 0;
}
.sim-radio input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
/* カスタム丸 */
.sim-radio__item {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}
/* 丸アイコン本体 */
.sim-radio__item::before {
  content: "";
  width: 18px;
  height: 18px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px var(--color-faq); /* 外枠 */
  background: #fff;
  flex: 0 0 18px;
}
/* 選択時の中点 */
.sim-radio input:checked + .sim-radio__item::before {
  box-shadow: inset 0 0 0 6px var(--color-accent); /* 中を塗って見せる */
}

/* フォーカス可視化 */
.sim-radio input:focus + .sim-radio__item {
  outline: 2px solid var(--color-dark);
  outline-offset: 2px;
}

/* エラー */
.is-error .sim-input,
.is-error .sim-select {
  box-shadow: inset 0 0 0 4px var(--color-error);
}
.sim-form__error {
  color: var(--color-error);
  font-size: 16px;
  font-weight: 700;
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.sim-form__error .sim-error__icon {
  width: 33px;
  height: 33px;
  flex: 0 0 33px;
  display: inline-block;
}
/* .sim-form__error::before {
  content: "⚠️";
} */
/* 初期はkVAを隠す */
#field-kva {
  display: none;
}

/* Ampereが選ばれている時：Ampereを表示、kVAを隠す */
.sim-form:has(input[name="mode"][value="ampere"]:checked) #field-ampere {
  display: block;
}
.sim-form:has(input[name="mode"][value="ampere"]:checked) #field-kva {
  display: none;
}

/* kVAが選ばれている時：kVAを表示、Ampereを隠す */
.sim-form:has(input[name="mode"][value="kva"]:checked) #field-kva {
  display: block;
}
.sim-form:has(input[name="mode"][value="kva"]:checked) #field-ampere {
  display: none;
}

/* ボタン */
.sim__submit {
  display: flex;
  margin-top: 50px;
  margin-bottom: 50px;
  justify-content: center;
}
.sim-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 304px;
  height: 65px;
  padding: 0 28px;
  border: none;
  border-radius: 9999px;
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  background: var(--color-primary);
  box-shadow: inset 0 0 0 4px #fff, 0 12px 18px rgba(0, 0, 0, 0.22);
  cursor: pointer;
  transition: transform 0.08s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.sim-btn:hover {
  background: var(--color-accent);
  transform: translateY(-2px);
}
.sim-btn:focus {
  outline: 2px solid var(--color-dark);
  outline-offset: 2px;
}

/* 免責事項 */
/* 免責事項 見出し */
.sim__disclaimer {
  margin: 0px auto 40px;
  max-width: 910px;
  background: #fff;
  border-radius: 22px;
  overflow: hidden;
}
.sim__disclaimer-title {
  display: block;
  width: 100%;
  background: #f5eccf;
  color: #4d322c;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  padding: 14px 18px;
  border-radius: 12px;
  margin: 0 0 10px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
/* 本文だけに内側余白を付与 */
.sim__disclaimer-body {
  padding: 10px 18px 20px;
  color: var(--color-text);
  font-size: 14px;
  line-height: 1.7;
}
.sim__disclaimer-body p {
  margin: 0;
}
/* ==== Result (送信後) ==== */
.sim-result[hidden] {
  display: none !important;
}

.sim-result {
  margin: 32px auto 0;
  max-width: 910px;
  text-align: center;
}

.sim-result__arrow {
  display: block;
  fill: var(--color-primary);
  width: 70px;
  height: 42px;
  margin: 8px auto 10px;
}

.sim-result__stage {
  position: relative;
  padding: 28px 16px;
  margin-bottom: 30px;
}

.sim-result__char {
  position: absolute;
  bottom: -8px;
  width: 193px;
  height: auto;
  pointer-events: none;
  user-select: none;
  transform-origin: bottom center;
  z-index: 2;
}
.sim-result__char--left {
  left: -120px;
}
.sim-result__char--right {
  right: -120px;
}

/* 結果ボディ（点線で上下を挟む） */
.sim-result__body {
  position: relative;
  margin: 0 auto;
  max-width: 640px;
  padding: 18px 16px 16px;
  background-color: #fff;
}
.sim-result__body::before,
.sim-result__body::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  border-top: 2px dotted var(--color-primary); /* 合意：色は--color-primary、太さ2px */
}
.sim-result__body::before {
  top: 0;
}
.sim-result__body::after {
  bottom: 0;
}

/* タイポ */
.sim-result__price {
  margin: 12px 0 6px;
  line-height: 1;
  color: var(--color-dark);
}
.sim-result__amount {
  font-size: 61px;
  letter-spacing: 0.02em;
  font-family: "Monomaniac One";
  color: var(--color-primary);
}
.sim-result__yen {
  font-size: 32px;
  font-weight: 700;
  margin-left: 6px;
}

.sim-result__meta {
  margin: 8px 0 6px;
  font-size: 22px;
  color: var(--color-dark);
  font-weight: 700;
}

/* ちょいアニメ（1回だけ） */
@keyframes bounceOnce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(10px);
  }
}
.sim-result__arrow.is-anim {
  animation: bounceOnce 360ms ease-out;
}
.sim-result__char.is-anim {
  animation: bounceOnce 240ms ease-out;
}

@media (max-width: 768px) {
  .sim {
    padding-block: var(--section-sp);
    padding-top: calc(48px + var(--features-arc-rise));
    padding-bottom: 260px;
    background-size: auto, 800px auto;
    background-position: center calc(var(--features-bg-offset)),
      left 0 top calc(var(--frame-edge));
  }
  .sim__heading {
    width: min(100%, 320px);
    margin: 24px auto;
  }
  .sim__icon img {
    width: 180px;
  }
  .sim__subtitle {
    font-size: clamp(16px, 4.3vw, 18px);
    line-height: 1.75;
    max-width: 28ch;
    margin: 8px auto 24px;
  }
  .sp-only {
    display: inline;
  }
  /* カード */
  .sim__card {
    max-width: 335px;
    padding: 20px 16px;
    border-radius: 36px;
    box-shadow: inset 0 6px 0 rgba(0, 0, 0, 0.08),
      0 6px 14px rgba(0, 0, 0, 0.28);
  }

  /* ラベル */
  .sim-form__label {
    font-size: 16px; /* iOSズーム回避 */
    margin: 18px 0 8px;
    gap: 8px;
    align-items: first baseline;
    text-align: left;
  }
  .sim-form__label::before {
    width: 14px;
    height: 14px;
  }

  /* 入力共通 */
  .sim-input,
  .sim-select {
    width: 100%;
    height: 56px; /* 65→56 */
    line-height: 56px;
    font-size: 16px; /* iOSズーム回避 */
    padding: 0 18px;
    box-shadow: inset 0 0 0 3px var(--color-faq);
    border-radius: 999px;
  }
  .is-error .sim-input,
  .is-error .sim-select {
    box-shadow: inset 0 0 0 3px var(--color-error);
  }
  .sim-form__error {
    font-size: 10px;
    font-weight: 700;
    gap: 6px;
  }
  .sim-form__error .sim-error__icon {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
  }
  /* ▼セレクト：丸ボタン＋山形を“2枚重ね”で表示（上書き版） */
  .sim-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    /* 1枚目＝丸ボタン, 2枚目＝山形。順序とpositionを合わせる */
    background-image: url("../img/simulator/select-button.svg"),
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="%234d322c" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>');
    background-repeat: no-repeat, no-repeat;
    background-position: right 2px center, right 15px center; /* 丸, 山形 */
    background-size: 53px 53px, 18px 18px; /* 丸をやや小さく 山形アイコン */
    padding-right: 48px; /* 右側アイコン分 */
  }

  /* ラジオ：タップしやすさUP */
  .sim-radio {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 15px;
    justify-content: flex-start;
    margin-left: 22px;
  }
  .sim-radio label {
    padding: 6px 2px;
  }
  .sim-radio__item::before {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
  }
  .sim-radio input:checked + .sim-radio__item::before {
    box-shadow: inset 0 0 0 5px var(--color-accent);
  }

  /* 送信ボタン */
  .sim__submit {
    margin: 28px 0 24px;
  }
  .sim-btn {
    width: 100%;
    min-width: 0;
    height: 56px;
    font-size: 18px;
    box-shadow: inset 0 0 0 3px #fff, 0 10px 16px rgba(0, 0, 0, 0.2);
  }
  /* 結果表示 */
  .sim-result {
    max-width: 335px;
  }
  .sim-result__arrow {
    width: 52px;
    height: 32px;
  }

  .sim-result__stage {
    padding: 18px 8px;
  }

  .sim-result__char {
    width: 140px;
    bottom: -10px;
  }
  .sim-result__char--left {
    left: -85px;
  }
  .sim-result__char--right {
    right: -85px;
  }

  .sim-result__body {
    max-width: 100%;
    padding: 14px 8px 12px;
  }
  .sim-result__body::before,
  .sim-result__body::after {
    border-top-width: 2px;
  } /* SPも2px指定 */

  .sim-result__amount {
    font-size: 40px;
  }
  .sim-result__yen {
    font-size: 21px;
  }
  .sim-result__meta {
    font-size: 15px;
  }
  /* 免責 */
  .sim__disclaimer {
    max-width: 335px;
    border-radius: 18px;
    margin: 8px auto 24px;
  }
  .sim__disclaimer-title {
    font-size: 15px;
    padding: 10px 14px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0; /* 下辺は直線のまま */
  }
  .sim__disclaimer-body {
    font-size: 13px;
    line-height: 1.8; /* 行間を少し広げる */
    padding: 12px 14px 16px;
  }
}
/* ====== faqセクション ====== */
/* FAQ専用トークン */
.faq {
  --faq-radius: 40px;
  --faq-gap: 24px;
  --faq-q-minh: clamp(56px, 6vw, 68px);
  --faq-border: 2px dotted var(--color-faq);
  --faq-q-bg: var(--color-faq);
  --faq-q-bg-hover: #8a5f4c;
  --faq-q-text: #fff;
  --faq-a-bg: #fff;
  --faq-a-border: var(--color-faq);
  --faq-badge-q-bg: var(--color-secondary);
  --faq-badge-a-bg: var(--color-primary);
  --faq-badge-a-text: #fff;
}

/* セクション基本余白 */
.faq {
  --wave-h: 371px;
  --wave-expose: 276px;

  position: relative;

  /* ❶ 前セクションに食い込む（間を消す） */
  margin-top: calc(var(--wave-expose) - var(--wave-h));

  /* ❷ 中身の上余白は“見せたい量”だけ足す（波の実高さは足さない） */
  padding-block: var(--section-pc);
  padding-top: calc(var(--section-pc) + var(--wave-expose));
}

/* 波をPC 1440px基準でセンタリング（artboardに合わせる） */
.faq::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  aspect-ratio: 1440 / 371;
  top: calc(var(--wave-expose) - var(--wave-h));

  background: url("../img/faq/faq-wave.svg") center top / 100% 100% no-repeat;

  pointer-events: none;
}

/* 背景の太陽 */
.faq--sun {
  position: absolute;
  pointer-events: none;
  user-select: none;
  opacity: 0.95;
  inset: 0;
  overflow: hidden;
  z-index: 2;
}
.faq--sun img {
  position: absolute;
  width: clamp(114.79px, 38vw, 351px);
  height: auto;
  top: 2%;
}
.faq--sun--left {
  left: -4%;
}
.faq--sun--right {
  right: -4%;
  transform: scaleX(-1);
}

/* 内側コンテナはPC 1100 / SP 335 */
.faq .container {
  max-width: var(--content-pc);
  margin-inline: auto;
  padding-inline: clamp(var(--sp-gutter), 4vw, var(--gutter));
}

/* 見出し */
.faq__head {
  text-align: center;
  margin-bottom: 24px;
  position: relative;
  z-index: 2;
}
.faq__icon {
  align-items: center;
  width: min(82px, 100%);
}
.faq__title {
  font-family: "Monomaniac One", system-ui, -apple-system, "Segoe UI", Roboto,
    "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-weight: 400;
  font-size: clamp(45px, 4.5vw, 90px);
  color: var(--color-dark);
  margin: 0;
}
.sim-sub {
  margin: 0 auto 40px;
  max-width: 52ch; /* 読み幅を揃える */
  text-align: center;
  color: var(--color-text);
  line-height: 1.9;
  font-size: clamp(19px, 2.1vw, 25px); /* 固定px→clamp に */
}

/* リスト */
.faq__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--faq-gap);
}
/* ==== Q行：左右2カラム化 ==== */
.faq__item {
  position: relative;
}
.faq__qwrap {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  flex-wrap: nowrap;
}
.faq__qchar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}
.faq__hinatan__q {
  width: 136.51px;
  height: auto;
  pointer-events: none;
  user-select: none;
  /* 旧スタイルの絶対配置を無効化 */
  position: static !important;
  left: auto !important;
  top: auto !important;
}
/* Qボタン */
.faq__q {
  position: relative;
  align-items: center;
  display: flex;
  gap: 12px;
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 14px 56px 14px 16px;
  border: 0;
  border-radius: var(--faq-radius);
  background: var(--faq-q-bg);
  color: var(--faq-q-text);
  text-align: left;
  cursor: pointer;
  overflow: visible;
  word-break: break-word;
}
.faq__tail {
  position: absolute;
  left: 6px;
  top: 85%;
  width: 28px;
  height: auto;
  transform: translate(-50%, -50%); /* アンカーを中心に */
  pointer-events: none;
  z-index: 0; /* テキストやバッジより後ろ */
}

.faq__badge {
  flex: 0 0 auto;
  display: inline-grid;
  /* place-items: center; */
  align-items: start;
  justify-items: center;
  width: 51px;
  height: 51px;
  border-radius: 9999px;
  font-family: "Monomaniac One", system-ui, -apple-system, "Segoe UI", Roboto,
    "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-weight: 300;
  font-size: 46px;
  line-height: 1;
}
.faq__badge--q {
  background: var(--faq-badge-q-bg);
  color: var(--color-faq);
}
.faq__badge--a {
  background: var(--faq-badge-a-bg);
  color: var(--faq-badge-a-text);
}

.faq__qtext {
  font-family: "Zen Maru Gothic", system-ui, -apple-system, "Segoe UI", Roboto,
    "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-weight: 700;
  font-size: clamp(14px, 1.7vw, 25px);
  line-height: 1.5;
  color: #fff;
}

/* 右端の＋／－ */
.faq__toggle {
  position: absolute;
  top: 50%;
  right: 16px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  color: #fff;
  transform: translateY(-50%);
}
.faq__toggle .icon {
  width: 24px;
  height: 24px;
  display: block;
}
.faq__q[aria-expanded="false"] .icon--minus {
  display: none;
}
.faq__q[aria-expanded="true"] .icon--plus {
  display: none;
}

/* Aパネル */
.faq__panel {
  margin-top: 8px;
  border: var(--faq-border);
  border-radius: var(--faq-radius);
  background: var(--faq-a-bg);
  padding: 16px 16px 8px;
}

.faq__a {
  display: grid;
  grid-template-columns: 51px 1fr;
  gap: 12px;
  align-items: start;
}
.faq__a-content {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: clamp(16px, 2.5vw, 32px);
}
.faq__atext {
  min-width: 0;
}
.faq__hinatan__a {
  width: 191px;
  height: auto;
  justify-self: end;
  align-self: end;
  margin-bottom: -8px;
}

/* 回答の文字指定（行1／行2以降） */
.faq__lead {
  margin: 0 0 4px 0;
  font-family: "Zen Maru Gothic", system-ui, -apple-system, "Segoe UI", Roboto,
    "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-weight: 700;
  font-size: clamp(15px, 1.6vw, 22px); /* SP15 / PC22 */
  line-height: 1.6;
  color: var(--color-primary);
}
.faq__body {
  margin: 0;
  font-family: "Zen Maru Gothic", system-ui, -apple-system, "Segoe UI", Roboto,
    "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-weight: 700;
  font-size: clamp(14px, 1.4vw, 18px); /* SP14 / PC18 */
  line-height: 1.8;
  color: var(--color-text);
}

/* SP 微調整 */
@media (max-width: 768px) {
  .faq {
    --wave-h: 148px;
    --wave-expose: 105px;

    margin-top: calc(var(--wave-expose) - var(--wave-h));
    padding-block: var(--section-sp);
    padding-top: calc(var(--section-sp) + var(--wave-expose));
  }
  .faq::before {
    left: 50%;
    transform: translateX(-50%);
    top: calc(var(--wave-expose) - var(--wave-h));
  }
}
@media (max-width: 480px) {
  .faq__badge {
    width: 23px;
    height: 23px;
    font-size: 20px;
  }
  .faq__q {
    border-radius: 15px;
    align-items: start;
    padding: 12px 38px 12px 12px;
    max-width: 276px;
  }
  .faq__toggle {
    right: 12px;
    top: 24px;
  }
  .faq__hinatan__q {
    position: absolute;
    width: 80px;
    height: auto;
    pointer-events: none;
  }
  .faq__a {
    grid-template-columns: 30px 1fr;
    gap: 4px;
    align-items: start;
  }
  .faq__a-content {
    grid-template-columns: 1fr; /* 1列 */
    grid-template-rows: auto auto;
  }
  .faq__hinatan__a {
    width: 72px;
    margin-top: 12px;
  }
}

/* ================== CTA Section ================== */
.cta {
  position: relative;
  background-color: var(--color-secondary);
  overflow: visible;
  z-index: 1;
}
.cta::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: min(1920px, 100%);
  aspect-ratio: 1440 / 320;
  background-image: url("../img/cta/cta-topcap.svg");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100%;
  pointer-events: none;
  z-index: 0;
}
/* 中央カード（白・大きな角丸） */
.cta-card {
  position: relative;
  background: var(--color-surface);
  border-radius: 347.5px;
  box-shadow: inset 0 4px 12px rgba(0, 0, 0, 0.08),
    0 12px 24px rgba(0, 0, 0, 0.12);
  padding: clamp(24px, 3vw, 40px) clamp(20px, 3vw, 40px);
  max-width: 1100px;
  margin: 180px auto 0;
  text-align: center;
  z-index: 1;
  overflow: visible;
}

/* 吹き出し */
.cta-speech {
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  display: block;
  width: clamp(237px, 36vw, 450px);
  z-index: 3;
}
/* CTA QRコード */
.cta-qr {
  text-align: center;
  margin-top: 66px;
}

.cta-qr img {
  width: 120px;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
/* SVGテキスト群 */
.cta-copy {
  display: grid;
  gap: clamp(8px, 1.5vw, 14px);
  align-items: center;
  justify-items: center;
  margin-top: 30px;
  margin-bottom: clamp(16px, 2vw, 24px);
  /* PC: 2行レイアウト（2行目は横並び） */
  grid-template-columns: auto auto;
  grid-template-areas:
    "top   top"
    "mid   tail"
    "dots dots"
    "main main";
}
.cta-copy-piece {
  max-width: 100%;
  height: auto;
}
.cta-copy-top {
  grid-area: top;
}
.cta-copy-middle {
  grid-area: mid;
  justify-self: end;
}
.cta-copy-tail {
  grid-area: tail;
  justify-self: start;
}
.cta-dots {
  grid-area: dots;
}
.cta-copy-main {
  grid-area: main;
}
.cta-copy img {
  max-width: 100%;
  height: auto;
  padding-bottom: 0;
}
/* 点線吹き出しのサイズと位置感 */
.cta-dots {
  margin: clamp(2px, 0.5vw, 6px) 0;
}
.cta-copy-main {
  margin-top: clamp(4px, 0.8vw, 10px);
}

/* キャラクター配置：PC左右、SPは下で横並び→狭ければ縦並び */
.cta-chars {
  position: absolute;
  left: 50%;
  bottom: -50px; /* カード下からはみ出す量 */
  transform: translateX(-50%);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: clamp(16px, 3vw, 40px);
  width: 115%;
  z-index: 2;
}
.cta-char {
  width: clamp(191px, 22vw, 344px);
  height: auto;
}
/* CTAセクション内の“装飾系”はクリックを通す */
.cta .cta-speech,
.cta .cta-chars,
.cta .cta-copy img,
.cta .cta-dots {
  pointer-events: none;
}
/* 念のため前面へ */
.cta-btn {
  position: relative;
  z-index: 10;
}
@media (max-width: 768px) {
  .cta-qr img {
    width: 100px;
  }
  .cta-qr {
    margin-top: 30px;
  }
  .cta-card {
    margin-top: 60px;
    max-width: 335px;
    border-radius: 60px;
    padding: 40px 24px 180px;
  }
  .cta-copy {
    grid-template-columns: 1fr;
    grid-template-areas:
      "top"
      "mid"
      "tail"
      "dots"
      "main";
    gap: 10px;
    margin-top: 26px;
  }
  .cta-copy-middle,
  .cta-copy-tail {
    justify-self: center;
  }
  /* 画像サイズの目安：必要に応じて調整 */
  .cta-copy-top {
    width: min(82vw, 157px);
  }
  .cta-copy-middle {
    width: min(78vw, 151px);
  }
  .cta-copy-tail {
    width: min(88vw, 250px);
  }
  .cta-dots {
    width: min(84vw, 279px);
  }
  .cta-copy-main {
    width: min(70vw, 213px);
  }
  .cta-speech {
    top: -46px;
  }
  .cta-chars {
    bottom: -40px;
    flex-direction: row;
    gap: 16px;
  }
  .cta-char {
    width: clamp(120px, 40vw, 180px);
  }
}
/* =============== partner Section =============== */
.partner {
  position: relative;
  background: var(--color-surface);
  padding-top: 220px;
  overflow: visible;
  z-index: 0;
}
.partner::before {
  content: "";
  position: absolute;
  top: -1px;
  width: 100%;
  aspect-ratio: 1440/163;
  pointer-events: none;
  background-image: url("../img/footer/Vector.svg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: top center;
  z-index: 0;
}

/* 1枚カード（タイトル〜リスト〜ボタンを内包） */
.partner .card--xl {
  width: min(100%, 900px);
  margin-inline: auto;
  padding: clamp(20px, 4vw, 40px);
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08),
    0 18px 40px rgba(246, 134, 36, 0.08), inset 0 2px 0 rgba(0, 0, 0, 0.04);
}

/* タイトル〜リード文（導入） */
.partner__header {
  text-align: left;
  margin-bottom: 16px;
}
.partner__title {
  color: var(--color-dark);
  font-size: clamp(22px, 2.4vw, 34px);
  font-weight: 800;
  letter-spacing: 0.02em;
  margin: 0 0 0.4em;
}
.partner__intro {
  width: auto;
  color: var(--color-dark);
}
.partner__lead,
.partner__note {
  margin: 0;
  text-align: left;
  line-height: 1.9;
  font-size: clamp(15px, 1.4vw, 17px);
}
.partner__note {
  opacity: 0.9;
}

/* 区切り線 */
.partner .card__divider {
  background: none !important;
  box-shadow: none;
  height: 0;
  border: 0;
  border-top: 2px solid var(--color-primary);
  border-radius: 0;
}

/* リスト */
.partner .card__subtitle {
  color: var(--color-dark);
  font-weight: 700;
  margin: 0 0 8px;
  text-align: center;
}
.partner .card__list {
  margin: 0 0 8px;
  padding-left: 40%;
  color: var(--color-dark);
  line-height: 1.9;
}
.partner .card__list li::marker {
  color: #f3981c;
  padding-left: 40%;
}

/* ボタン */
.partner__actions {
  text-align: center;
  margin-top: clamp(20px, 4vw, 32px);
}
.partner .cta-btn {
  --cta-h: 60px;
  --cta-w: 250px;
  min-width: var(--cta-w);
  height: var(--cta-h);
  padding: 0;
}

/* SP調整 */
@media (max-width: 768px) {
  .partner {
    padding-top: 140px;
  }
  .partner .page-frame {
    width: var(--content-sp);
  }
  .partner .card__list {
    padding-left: 30%;
  }
  .partner .card__list li::marker {
    padding-left: 30%;
  }
  .partner .card--xl {
    width: 335px;
  }
}

/* ================== Footer ================== */
.footer {
  position: relative;
  background: var(--color-dark);
  color: #fff;
  padding-top: 250px;
  overflow: hidden;
}
.footer::before {
  content: "";
  position: absolute;
  top: -1px;
  width: 100%;
  aspect-ratio: 1440/163;
  pointer-events: none;
  background-image: url("../img/footer/Vector-privacy.svg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: top center;
  z-index: 0;
}
.footer-inner {
  position: relative;
  display: grid;
  gap: 20px;
  justify-items: center;
  text-align: center;
  z-index: 1;
}
.footer-logo-img {
  height: 50.11px;
  width: auto;
}
@media (max-width: 768px) {
  .footer {
    padding-top: 100px;
  }
  .footer-logo-img {
    height: 35.64px;
    margin-top: 50px;
  }
}
/* --- フッター内 お問い合わせカード --- */
.footer-contactcard {
  background: #fff;
  color: #5a3b2e;
  border: 2px solid var(--color-accent);
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  max-width: 680px;
  margin: 24px auto 0;
  padding: 24px 32px;
  line-height: 1.8;
  text-align: left;
}

.footer-contactcard__lead {
  font-weight: 700;
  font-size: 16px;
  margin: 0 0 16px;
}

.footer-contactcard__body {
  font-size: 15px;
}

.footer-contactcard__item {
  margin: 0 0 6px;
}

.footer-contactcard__note {
  font-size: 14px;
  margin: 0 0 10px;
  color: #7a5b4c;
}

.footer-contactcard__link {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s ease;
}

.footer-contactcard__link:hover,
.footer-contactcard__link:focus-visible {
  color: var(--color-accent);
  text-decoration: underline;
}

/* SP調整 */
@media (max-width: 768px) {
  .footer-contactcard {
    padding: 20px;
    font-size: 14px;
    max-width: 335px;
  }
  .footer-contactcard__lead {
    font-size: 15px;
  }
  .footers .page-frame {
    width: var(--content-sp);
  }
}
/* ナビ */
.footer-nav {
  display: inline-flex;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.footer-link {
  color: #fff;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}
.footer-link:hover,
.footer-link:focus-visible {
  color: var(--color-accent);
}
.footer-link .ext {
  width: 18px;
  height: 18px;
}

/* コピーライト */
.footer-copyright {
  display: block;
  width: 100%;
  margin-top: 50px;
  padding: 10px 0;
  background: var(--color-faq);
  color: #fff;
  text-align: center;
}
/* ================== Back to Top ================== */
.backtotop {
  position: fixed;
  right: 60px;
  bottom: 80px;
  background: transparent;
  border: none;
  padding: 0;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  display: grid;
  place-items: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  z-index: 50;
}
.backtotop:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
  border-radius: 9999px; /* リングを丸く */
}
.backtotop-img {
  width: 72px;
  height: auto;
  display: block;
}
.backtotop.is-show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
@media (max-width: 768px) {
  .backtotop {
    right: 16px;
    bottom: 16px;
    width: 44px;
    height: 44px;
  }
}

/* 見た目確認用のスペーサー（ダミー） */
.spacer {
  height: 400px;
  background: rgba(0, 0, 0, 0.03);
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}