/* ═══════════════════════════════════════════════════════════════
   AHF合同会社 ── Ultra Premium CSS  v5.0
   手抜きなし・世界最高品質ファクタリングLP
   ═══════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────
   1. DESIGN TOKEN（デザイントークン）
─────────────────────────────────────── */
:root {
  /* ── Primary Palette ── */
  --ink-950:  #020810;
  --ink-900:  #050d1a;
  --ink-800:  #091528;
  --ink-700:  #0e2040;
  --ink-600:  #152e5c;
  --ink-500:  #1d4080;

  /* ── Blue ── */
  --b-700:  #0f3dab;
  --b-600:  #1547cc;
  --b-500:  #1d5ce8;
  --b-400:  #3d7df5;
  --b-300:  #6fa0ff;
  --b-200:  #a8c4ff;
  --b-100:  #dce9ff;

  /* ── Gold ── */
  --g-700:  #b86e00;
  --g-600:  #d48409;
  --g-500:  #f0940a;
  --g-400:  #f9ba1a;
  --g-300:  #fcd84e;
  --g-200:  #fde98a;
  --g-100:  #fff6cc;

  /* ── Green ── */
  --green:  #0da56e;
  --green2: #10c97d;

  /* ── Red ── */
  --red:    #e83535;

  /* ── Neutral ── */
  --n-0:   #ffffff;
  --n-50:  #f7f9fc;
  --n-100: #eef2f8;
  --n-200: #dde4f0;
  --n-300: #bec9dd;
  --n-400: #8fa4c0;
  --n-500: #607891;
  --n-600: #435566;
  --n-700: #2e3d4d;
  --n-800: #1c2a38;
  --n-900: #0d1720;

  /* ── Gradient ── */
  --grad-hero:    linear-gradient(140deg, #020810 0%, #050d1a 45%, #0e2040 100%);
  --grad-blue:    linear-gradient(135deg, #1547cc 0%, #1d5ce8 60%, #2d74ff 100%);
  --grad-gold:    linear-gradient(135deg, #f0940a 0%, #f9ba1a 100%);
  --grad-dark:    linear-gradient(180deg, #050d1a 0%, #091528 100%);
  --grad-glass:   linear-gradient(135deg, rgba(255,255,255,.11) 0%, rgba(255,255,255,.03) 100%);
  --grad-shimmer: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.18) 50%, transparent 100%);
  --grad-glow-b:  radial-gradient(ellipse, rgba(29,92,232,.4) 0%, transparent 70%);
  --grad-glow-g:  radial-gradient(ellipse, rgba(240,148,10,.35) 0%, transparent 70%);

  /* ── Shadow ── */
  --sh-xs:    0 1px 3px rgba(0,0,0,.10);
  --sh-sm:    0 2px 8px rgba(0,0,0,.12), 0 1px 3px rgba(0,0,0,.08);
  --sh-md:    0 6px 24px rgba(0,0,0,.15), 0 2px 8px rgba(0,0,0,.08);
  --sh-lg:    0 14px 56px rgba(0,0,0,.20), 0 4px 16px rgba(0,0,0,.10);
  --sh-xl:    0 28px 80px rgba(0,0,0,.26), 0 8px 24px rgba(0,0,0,.14);
  --sh-2xl:   0 48px 120px rgba(0,0,0,.34), 0 16px 40px rgba(0,0,0,.18);
  --sh-blue:  0 8px 36px rgba(21,71,204,.45), 0 2px 8px rgba(21,71,204,.20);
  --sh-blue2: 0 18px 64px rgba(21,71,204,.55), 0 4px 16px rgba(21,71,204,.25);
  --sh-gold:  0 8px 36px rgba(240,148,10,.45), 0 2px 8px rgba(240,148,10,.20);
  --sh-gold2: 0 18px 60px rgba(240,148,10,.55);
  --sh-glass: 0 8px 32px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.12);

  /* ── Font ── */
  --f-jp:   'Noto Sans JP', 'Hiragino Kaku Gothic ProN', sans-serif;
  --f-en:   'Montserrat', sans-serif;
  --f-disp: 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif;

  /* ── Ease ── */
  --e-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --e-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --e-smooth: cubic-bezier(0.45, 0, 0.55, 1);

  /* ── Layout ── */
  --max-w:  1200px;
  --hdr-h:  76px;
  --r-sm:   6px;
  --r-md:   12px;
  --r-lg:   20px;
  --r-xl:   28px;
  --r-2xl:  40px;
  --r-pill: 9999px;

  /* ── Section ── */
  --sec-py: clamp(80px, 10vw, 128px);
}

/* ───────────────────────────────────────
   2. RESET & BASE
─────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}
body {
  font-family: var(--f-jp);
  background: var(--n-0);
  color: var(--n-800);
  line-height: 1.78;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body.no-scroll { overflow: hidden; }
img { max-width: 100%; height: auto; display: block; }
a  { text-decoration: none; color: inherit; }
button { cursor: pointer; border: none; background: none; font: inherit; }
ul, ol { list-style: none; }
strong, b { font-weight: 800; }

/* SEO: markタグ（キーワード強調） */
mark {
  background: transparent;
  color: var(--b-400);
  font-weight: inherit;
}
.feat__card mark,
.fee__card mark { color: var(--g-400); }

/* アクセシビリティ */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 2px solid var(--b-400); outline-offset: 3px; border-radius: 4px; }

/* スキップリンク（アクセシビリティ・SEO） */
.skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  padding: 10px 20px;
  background: var(--b-600);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  border-radius: 0 0 8px 8px;
  z-index: 10000;
  transition: top .2s;
  white-space: nowrap;
}
.skip-link:focus {
  top: 0;
}

/* スクロールバー */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--n-100); }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--b-500), var(--g-400)); border-radius: 4px; }
::selection { background: rgba(21,71,204,.15); }

/* ───────────────────────────────────────
   3. LAYOUT UTILS
─────────────────────────────────────── */
.sec-container { max-width: var(--max-w); margin: 0 auto; padding: 0 28px; }
.pc-br { display: block; }
@media (max-width: 768px) { .pc-br { display: none; } }

/* ───────────────────────────────────────
   4. SECTION HEAD（共通見出し）
─────────────────────────────────────── */
.sec-head { text-align: center; margin-bottom: clamp(44px, 6vw, 72px); }
.sec-eye {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-en); font-weight: 800;
  font-size: 10.5px; letter-spacing: .35em; text-transform: uppercase;
  color: var(--b-400); margin-bottom: 12px;
}
.sec-eye::before, .sec-eye::after {
  content: ''; display: block;
  width: 28px; height: 1px; background: currentColor; opacity: .45;
}
.sec-eye--gold { color: var(--g-400); }
.sec-title {
  font-family: var(--f-disp);
  font-size: clamp(26px, 4vw, 46px);
  font-weight: 900; line-height: 1.22;
  color: var(--n-900); letter-spacing: .02em;
}
.sec-title em { font-style: normal; color: var(--b-500); }
.sec-title--light { color: #fff; }
.sec-title--light em { color: var(--g-400); }
.sec-lead { margin-top: 14px; font-size: 15px; color: var(--n-500); }
.sec-lead--light { color: rgba(255,255,255,.58); }

/* ───────────────────────────────────────
   5. REVEAL ANIMATION
─────────────────────────────────────── */
.rv {
  opacity: 0;
  transform: translateY(44px);
  transition: opacity .8s var(--e-out), transform .8s var(--e-out);
}
.rv.in {
  opacity: 1;
  transform: translateY(0);
}

/* ───────────────────────────────────────
   6. BUTTONS
─────────────────────────────────────── */
/* Gold CTA */
.btn-gold {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--grad-gold);
  color: var(--ink-900); padding: 16px 36px; border-radius: var(--r-pill);
  font-family: var(--f-jp); font-weight: 900; font-size: 16px;
  box-shadow: var(--sh-gold);
  transition: transform .3s var(--e-spring), box-shadow .3s;
}
.btn-gold--lg { padding: 18px 42px; font-size: 18px; }
.btn-gold__shine {
  position: absolute; inset: 0;
  background: var(--grad-shimmer);
  transform: translateX(-100%);
  transition: transform .6s;
}
.btn-gold:hover .btn-gold__shine { transform: translateX(100%); }
.btn-gold:hover { transform: translateY(-4px) scale(1.02); box-shadow: var(--sh-gold2); }
.btn-gold__badge {
  display: inline-flex; align-items: center;
  background: rgba(0,0,0,.12);
  font-size: 11px; padding: 3px 10px; border-radius: var(--r-pill);
  font-weight: 700; letter-spacing: .04em;
}

/* Blue */
.btn-blue {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--grad-blue);
  color: #fff; padding: 14px 32px; border-radius: var(--r-pill);
  font-weight: 800; font-size: 15px;
  box-shadow: var(--sh-blue);
  transition: transform .3s var(--e-spring), box-shadow .3s;
}
.btn-blue::before {
  content: ''; position: absolute; inset: 0;
  background: var(--grad-shimmer); transform: translateX(-100%);
  transition: transform .6s;
}
.btn-blue:hover::before { transform: translateX(100%); }
.btn-blue:hover { transform: translateY(-3px) scale(1.02); box-shadow: var(--sh-blue2); }

/* Ghost */
.btn-ghost {
  display: inline-flex; align-items: center; gap: 9px;
  color: rgba(255,255,255,.72); padding: 14px 28px; border-radius: var(--r-pill);
  font-weight: 700; font-size: 15px;
  border: 1.5px solid rgba(255,255,255,.2);
  backdrop-filter: blur(8px);
  transition: background .25s, color .25s, border-color .25s, transform .25s;
}
.btn-ghost:hover {
  background: rgba(255,255,255,.1); color: #fff;
  border-color: rgba(255,255,255,.4); transform: translateY(-2px);
}

/* ───────────────────────────────────────
   7. LOADING
─────────────────────────────────────── */
.loading {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--ink-900);
  display: flex; align-items: center; justify-content: center;
  transition: opacity .7s var(--e-out), visibility .7s;
}
.loading.out { opacity: 0; visibility: hidden; pointer-events: none; }
.loading__particles {
  position: absolute; inset: 0; pointer-events: none;
}
.loading__inner {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}
/* Logo ring + letters */
.loading__logo { position: relative; width: 130px; height: 130px; margin-bottom: 4px; }
.loading__logo-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid transparent;
  background: linear-gradient(var(--ink-900), var(--ink-900)) padding-box,
              linear-gradient(135deg, var(--b-500), var(--g-400)) border-box;
  animation: spinRing 2.4s linear infinite;
}
@keyframes spinRing { to { transform: rotate(360deg); } }
.loading__logo-mark {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-en); font-weight: 900;
  font-size: 38px; letter-spacing: .05em;
}
.loading__logo-a { color: #fff; animation: letterPop .5s var(--e-spring) .2s both; }
.loading__logo-h { color: var(--g-400); animation: letterPop .5s var(--e-spring) .35s both; }
.loading__logo-f { color: var(--b-400); animation: letterPop .5s var(--e-spring) .5s both; }
@keyframes letterPop {
  from { opacity: 0; transform: scale(.4) translateY(20px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.loading__corp {
  font-size: 12px; color: var(--n-400); letter-spacing: .4em;
  animation: fadeUp .5s var(--e-out) .7s both;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.loading__bar-wrap {
  display: flex; align-items: center; gap: 12px; width: 260px;
}
.loading__bar-track {
  flex: 1; height: 3px; background: rgba(255,255,255,.07);
  border-radius: var(--r-pill); overflow: visible; position: relative;
}
.loading__bar-fill {
  height: 100%; width: 0; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--b-500), var(--b-400), var(--g-400));
  transition: width .25s var(--e-out);
}
.loading__bar-glow {
  position: absolute; top: 50%; right: 0; transform: translateY(-50%);
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--g-400); filter: blur(8px); opacity: .7;
  pointer-events: none;
}
.loading__pct {
  font-family: var(--f-en); font-size: 12px; font-weight: 700;
  color: var(--n-400); min-width: 34px; text-align: right;
}
.loading__msg { font-size: 11.5px; color: var(--n-500); letter-spacing: .12em; }

/* ───────────────────────────────────────
   8. CURSOR
─────────────────────────────────────── */
.cursor__dot, .cursor__ring {
  position: fixed; border-radius: 50%;
  pointer-events: none; z-index: 9998;
  transform: translate(-50%,-50%);
  will-change: left, top;
}
.cursor__dot {
  width: 6px; height: 6px;
  background: var(--b-400);
  box-shadow: 0 0 10px rgba(61,125,245,.9);
  transition: transform .08s, opacity .2s;
}
.cursor__dot.hovered { transform: translate(-50%,-50%) scale(0); opacity: 0; }
.cursor__ring {
  width: 30px; height: 30px;
  border: 1.5px solid rgba(61,125,245,.5);
  transition: width .22s var(--e-out), height .22s var(--e-out),
              border-color .2s, background .2s, opacity .2s;
}
.cursor__ring.hovered {
  width: 50px; height: 50px;
  border-color: rgba(240,148,10,.45);
  background: rgba(240,148,10,.06);
}
@media (pointer: coarse) { .cursor__dot, .cursor__ring { display: none; } }

/* ───────────────────────────────────────
   9. FLOATING CTA
─────────────────────────────────────── */
.fcta {
  position: fixed; bottom: 26px; right: 26px; z-index: 500;
  opacity: 0; transform: translateY(80px) scale(.88);
  transition: opacity .5s var(--e-spring), transform .5s var(--e-spring);
}
.fcta.visible { opacity: 1; transform: translateY(0) scale(1); }
.fcta__btn {
  display: flex; align-items: center; gap: 12px;
  background: var(--grad-blue); color: #fff;
  padding: 12px 22px 12px 12px; border-radius: var(--r-pill);
  box-shadow: var(--sh-blue);
  position: relative; overflow: hidden;
  transition: transform .3s var(--e-spring), box-shadow .3s;
}
.fcta__btn::before {
  content: ''; position: absolute; inset: 0;
  background: var(--grad-shimmer); transform: translateX(-100%);
  transition: transform .6s;
}
.fcta__btn:hover::before { transform: translateX(100%); }
.fcta__btn:hover { transform: scale(1.07) translateY(-3px); box-shadow: var(--sh-blue2); }
.fcta__pulse {
  position: absolute; inset: 0; border-radius: inherit;
  background: rgba(29,92,232,.3);
  animation: fctaPulse 2.4s ease-in-out infinite;
}
@keyframes fctaPulse {
  0%,100% { transform: scale(1); opacity: .3; }
  50%      { transform: scale(1.06); opacity: 0; }
}
.fcta__img { width: 46px; height: 46px; object-fit: contain; position: relative; z-index: 1; }
.fcta__text { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 1px; }
.fcta__text strong { font-size: 14px; font-weight: 900; line-height: 1; }
.fcta__text small  { font-size: 10px; opacity: .8; }
.fcta__arrow { position: relative; z-index: 1; font-size: 11px; opacity: .7; }

/* ───────────────────────────────────────
   10. HEADER
─────────────────────────────────────── */
.hdr {
  position: fixed; inset: 0 0 auto 0;
  top: 34px; /* 口コミバナー（34px）の下に配置 */
  height: var(--hdr-h); z-index: 7100; /* バナー(7000)より上に配置 */
  transition: background .45s, box-shadow .45s, height .35s var(--e-out);
}
.hdr.scrolled {
  background: rgba(5,13,26,.95);
  backdrop-filter: blur(30px) saturate(200%);
  -webkit-backdrop-filter: blur(30px) saturate(200%);
  box-shadow: 0 1px 0 rgba(255,255,255,.055), 0 4px 40px rgba(0,0,0,.45);
  height: 60px;
}
.hdr__container {
  max-width: var(--max-w); margin: 0 auto; padding: 0 24px;
  height: 100%; display: flex; align-items: center;
  justify-content: space-between; gap: 20px;
}
/* Logo */
.hdr__logo { display: flex; align-items: center; gap: 10px; }
.hdr__logo-badge {
  width: 46px; height: 46px; border-radius: 13px;
  background: var(--grad-blue); position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-en); font-weight: 900; font-size: 13px;
  color: #fff; letter-spacing: .06em;
  box-shadow: var(--sh-blue);
  transition: transform .3s var(--e-spring);
}
.hdr__logo-badge-shine {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.22) 0%, transparent 55%);
  pointer-events: none;
}
.hdr__logo:hover .hdr__logo-badge { transform: scale(1.1) rotate(-5deg); }
.hdr__logo-text { display: flex; flex-direction: column; gap: 1px; }
.hdr__logo-ja  { font-size: 13px; font-weight: 700; color: #fff; line-height: 1; }
.hdr__logo-en  { font-family: var(--f-en); font-size: 8px; color: var(--n-500); letter-spacing: .18em; }

/* Nav */
.hdr__nav-list { display: flex; align-items: center; gap: 1px; }
.hdr__nav-a {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  padding: 7px 13px; border-radius: var(--r-md);
  font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,.65);
  transition: background .2s, color .2s;
  overflow: hidden;
}
.hdr__nav-a::before {
  content: attr(data-en);
  font-family: var(--f-en); font-size: 8.5px; font-weight: 800;
  color: var(--b-300); letter-spacing: .14em; line-height: 1; margin-bottom: 2px;
}
.hdr__nav-a:hover { background: rgba(255,255,255,.08); color: #fff; }
.hdr__nav-a.active { background: rgba(255,255,255,.10); color: #fff; }
.hdr__nav-a.active::after {
  content: ''; position: absolute; bottom: 3px; left: 50%;
  transform: translateX(-50%); width: 16px; height: 2px;
  background: var(--grad-gold); border-radius: 2px;
}

/* Header Right */
.hdr__right { display: flex; align-items: center; gap: 14px; }
.hdr__tel {
  display: flex; align-items: center; gap: 8px;
  color: rgba(255,255,255,.72); transition: color .2s;
}
.hdr__tel:hover { color: #fff; }
.hdr__tel i { color: var(--g-400); font-size: 14px; }
.hdr__tel small { display: block; font-size: 9px; color: var(--n-500); letter-spacing: .1em; }
.hdr__tel b { font-family: var(--f-en); font-size: 17px; font-weight: 900; line-height: 1.2; color: #fff; display: block; }
.hdr__cta-btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--grad-blue); color: #fff;
  padding: 10px 22px; border-radius: var(--r-pill);
  font-weight: 800; font-size: 13px;
  box-shadow: var(--sh-blue); position: relative; overflow: hidden;
  transition: transform .25s var(--e-spring), box-shadow .25s;
}
.hdr__cta-btn::before {
  content: ''; position: absolute; inset: 0;
  background: var(--grad-shimmer); transform: translateX(-100%);
  transition: transform .5s;
}
.hdr__cta-btn:hover::before { transform: translateX(100%); }
.hdr__cta-btn:hover { transform: translateY(-2px) scale(1.04); box-shadow: var(--sh-blue2); }

/* Hamburger */
.hdr__hamburger {
  display: none; flex-direction: column; gap: 5px;
  padding: 9px; border-radius: var(--r-md);
}
.hdr__hamburger span {
  display: block; width: 22px; height: 2px;
  background: rgba(255,255,255,.8); border-radius: 2px;
  transition: transform .32s var(--e-spring), opacity .3s, width .3s;
}
.hdr__hamburger[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.hdr__hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; width: 0; }
.hdr__hamburger[aria-expanded="true"] span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* Progress bar */
.hdr__progress {
  position: absolute; bottom: 0; left: 0;
  height: 2px; width: 0%;
  background: linear-gradient(90deg, var(--b-500), var(--g-400));
  transition: width .1s linear;
  box-shadow: 0 0 8px rgba(249,186,26,.5);
}

/* ───────────────────────────────────────
   11. SP MENU
─────────────────────────────────────── */
.sp-menu {
  position: fixed; top: 0; right: -100%; width: min(340px,100vw);
  height: 100%; z-index: 7200; overflow-y: auto;
  background: var(--ink-800);
  border-left: 1px solid rgba(255,255,255,.055);
  display: flex; flex-direction: column;
  transition: right .42s var(--e-out);
  overscroll-behavior: contain;
}
.sp-menu.open { right: 0; }
.sp-menu__overlay {
  position: fixed; inset: 0; z-index: 7150;
  background: rgba(0,0,0,.68); backdrop-filter: blur(4px);
  opacity: 0; visibility: hidden;
  transition: opacity .42s, visibility .42s;
}
.sp-menu__overlay.open { opacity: 1; visibility: visible; }
.sp-menu__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px; border-bottom: 1px solid rgba(255,255,255,.055);
}
.sp-menu__brand { font-weight: 900; font-size: 16px; color: #fff; }
.sp-menu__close {
  width: 38px; height: 38px; border-radius: var(--r-md);
  background: rgba(255,255,255,.07); color: rgba(255,255,255,.7);
  display: flex; align-items: center; justify-content: center;
  transition: background .2s, color .2s;
}
.sp-menu__close:hover { background: rgba(255,255,255,.14); color: #fff; }
.sp-menu__nav { display: flex; flex-direction: column; gap: 4px; padding: 16px; }
.sp-menu__link {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border-radius: var(--r-lg);
  color: rgba(255,255,255,.72); font-weight: 600; font-size: 14.5px;
  transition: background .2s, color .2s;
}
.sp-menu__link i { color: var(--b-300); width: 16px; text-align: center; }
.sp-menu__link:hover { background: rgba(255,255,255,.08); color: #fff; }
.sp-menu__ctas { display: flex; flex-direction: column; gap: 10px; padding: 16px; }
.sp-menu__cta-main {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  background: var(--grad-blue); color: #fff;
  padding: 16px; border-radius: var(--r-lg);
  font-weight: 900; font-size: 15px; box-shadow: var(--sh-blue);
}
.sp-menu__cta-tel {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.09);
  color: rgba(255,255,255,.75); padding: 14px; border-radius: var(--r-lg);
  font-weight: 700; font-size: 15px;
  transition: background .2s;
}
.sp-menu__cta-tel:hover { background: rgba(255,255,255,.1); }
.sp-menu__mascot {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 28px; margin-top: auto;
}
.sp-menu__mascot img { width: 84px; filter: drop-shadow(0 6px 16px rgba(21,71,204,.4)); }
.sp-menu__mascot p { font-size: 13px; color: var(--n-400); }

/* ───────────────────────────────────────
   12. HERO
─────────────────────────────────────── */
.hero {
  position: relative; min-height: 100svh;
  background: var(--grad-hero);
  display: flex; flex-direction: column;
  overflow: hidden;
}

/* BG */
.hero__bg { position: absolute; inset: 0; }
.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .5; }
.hero__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(29,92,232,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(29,92,232,.04) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 40%, black 20%, transparent 100%);
}
.hero__aurora {
  position: absolute; border-radius: 50%;
  filter: blur(100px); pointer-events: none;
  animation: auroraFloat 8s ease-in-out infinite alternate;
}
.hero__aurora--1 {
  width: 900px; height: 600px; top: -250px; left: -200px;
  background: radial-gradient(ellipse, rgba(21,71,204,.20) 0%, transparent 65%);
}
.hero__aurora--2 {
  width: 600px; height: 500px; bottom: 0; right: -100px;
  background: radial-gradient(ellipse, rgba(240,148,10,.12) 0%, transparent 65%);
  animation-delay: 3s;
}
.hero__aurora--3 {
  width: 500px; height: 400px; top: 40%; left: 40%;
  background: radial-gradient(ellipse, rgba(21,71,204,.08) 0%, transparent 65%);
  animation-delay: 5s;
}
@keyframes auroraFloat {
  from { transform: scale(1) translate(0,0); }
  to   { transform: scale(1.12) translate(20px, -20px); }
}
.hero__noise {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
  opacity: .35; pointer-events: none;
}

/* Hero Wrap */
.hero__wrap {
  position: relative; z-index: 10;
  max-width: var(--max-w); margin: 0 auto; padding: 0 28px;
  width: 100%;
  display: grid; grid-template-columns: 1fr 1fr;
  align-items: center; gap: 40px;
  padding-top: calc(var(--hdr-h) + 64px + 34px); /* 34px = 口コミバナー高さ */
  padding-bottom: 100px;
  min-height: 100svh;
  flex: 1;
}

/* Hero Left */
.hero__left {}
/* Hero Badge */
.hero__badge {
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.11);
  backdrop-filter: blur(12px);
  padding: 7px 18px; border-radius: var(--r-pill);
  font-size: 11.5px; font-weight: 600; color: rgba(255,255,255,.72);
  letter-spacing: .04em; margin-bottom: 28px;
  opacity: 0; transform: translateY(16px);
  transition: opacity .6s var(--e-out), transform .6s var(--e-out);
}
.hero__badge.in { opacity: 1; transform: translateY(0); }
.hero__badge-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--green2);
  box-shadow: 0 0 0 3px rgba(16,201,125,.18);
  animation: dotPulse 2s ease-in-out infinite;
}
@keyframes dotPulse {
  0%,100% { box-shadow: 0 0 0 3px rgba(16,201,125,.18); }
  50%      { box-shadow: 0 0 0 8px rgba(16,201,125,.04); }
}

/* Hero H1 */
.hero__h1 {
  margin-bottom: 22px;
  opacity: 0; transform: translateY(28px);
  transition: opacity .75s var(--e-out), transform .75s var(--e-out);
}
.hero__h1.in { opacity: 1; transform: translateY(0); }
.hero__h1-top {
  display: block;
  font-size: clamp(18px, 2.5vw, 26px);
  font-weight: 700; color: rgba(255,255,255,.6);
  letter-spacing: .12em; margin-bottom: 2px;
}
.hero__h1-center {
  display: flex; align-items: baseline; gap: 4px; line-height: 1;
}
.hero__h1-pre, .hero__h1-suf {
  font-family: var(--f-disp);
  font-size: clamp(26px, 3.8vw, 46px);
  font-weight: 900; color: rgba(255,255,255,.82);
}
.hero__h1-num-wrap { position: relative; display: inline-block; }
.hero__h1-num {
  font-family: var(--f-en);
  font-size: clamp(88px, 15vw, 170px);
  font-weight: 900; line-height: .88;
  background: linear-gradient(135deg, #fff 0%, var(--g-300) 40%, var(--g-400) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  filter: drop-shadow(0 0 50px rgba(249,186,26,.4));
  letter-spacing: -.03em;
}
.hero__h1-num-rings {
  position: absolute; inset: -8px; pointer-events: none;
}
.hero__h1-num-rings span {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid rgba(249,186,26,.2);
  animation: numRing 2.5s ease-in-out infinite;
}
.hero__h1-num-rings span:nth-child(2) { inset: -16px; animation-delay: .5s; opacity: .5; }
@keyframes numRing {
  0%,100% { transform: scale(1); opacity: .4; }
  50%      { transform: scale(1.06); opacity: .1; }
}
.hero__h1-bot {
  display: flex; align-items: baseline; gap: 2px;
  font-family: var(--f-disp);
  font-size: clamp(42px, 7vw, 92px);
  font-weight: 900; line-height: 1;
  background: linear-gradient(135deg, #fff 0%, var(--b-200) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  letter-spacing: .06em;
}
.hero__h1-bot-t1 { animation: charIn .5s var(--e-spring) 1.4s both; }
.hero__h1-bot-t2 { animation: charIn .5s var(--e-spring) 1.55s both; }
.hero__h1-bot-t3 { animation: charIn .5s var(--e-spring) 1.7s both; }
@keyframes charIn {
  from { opacity: 0; transform: translateY(30px) rotateX(-45deg); }
  to   { opacity: 1; transform: translateY(0) rotateX(0); }
}

/* Hero Typing */
.hero__typing {
  display: flex; align-items: center; flex-wrap: wrap;
  margin-bottom: 18px;
  font-size: clamp(14px, 1.8vw, 17px); color: rgba(255,255,255,.62);
  font-weight: 500;
  opacity: 0; transform: translateY(18px);
  transition: opacity .6s var(--e-out), transform .6s var(--e-out);
}
.hero__typing.in { opacity: 1; transform: translateY(0); }
.hero__typing-pre { margin-right: 4px; }
.hero__typing-val { color: var(--g-300); font-weight: 800; }
.hero__typing-cursor {
  color: var(--g-400); margin-left: 1px;
  animation: blink 1s step-end infinite;
}
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0; } }

/* Hero Sub */
.hero__sub {
  font-size: clamp(13px, 1.5vw, 15.5px); color: rgba(255,255,255,.56);
  line-height: 1.9; margin-bottom: 30px;
  opacity: 0; transform: translateY(18px);
  transition: opacity .6s var(--e-out), transform .6s var(--e-out);
}
.hero__sub.in { opacity: 1; transform: translateY(0); }
.hero__sub strong { color: var(--g-300); font-weight: 800; }

/* Hero KPI */
.hero__kpi {
  display: flex; align-items: stretch; gap: 0;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--r-xl); padding: 18px 24px;
  margin-bottom: 34px; position: relative; overflow: hidden;
  backdrop-filter: blur(14px);
  opacity: 0; transform: translateY(18px);
  transition: opacity .6s var(--e-out), transform .6s var(--e-out);
}
.hero__kpi::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(29,92,232,.07) 0%, transparent 100%);
  pointer-events: none;
}
.hero__kpi.in { opacity: 1; transform: translateY(0); }
.hero__kpi-item { flex: 1; text-align: center; }
.hero__kpi-num {
  font-family: var(--f-en); font-weight: 900;
  font-size: clamp(22px, 3vw, 36px); color: #fff; line-height: 1;
}
.hero__kpi-num .counter { display: inline; }
.hero__kpi-label { font-size: 10.5px; color: rgba(255,255,255,.45); letter-spacing: .06em; margin-top: 4px; }
.hero__kpi-div { width: 1px; background: rgba(255,255,255,.08); margin: 0 8px; }

/* Hero Actions */
.hero__actions {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-bottom: 34px;
  opacity: 0; transform: translateY(18px);
  transition: opacity .6s var(--e-out), transform .6s var(--e-out);
}
.hero__actions.in { opacity: 1; transform: translateY(0); }

/* Hero Media */
.hero__media {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  opacity: 0; transform: translateY(14px);
  transition: opacity .6s var(--e-out), transform .6s var(--e-out);
}
.hero__media.in { opacity: 1; transform: translateY(0); }
.hero__media-label { font-size: 10.5px; color: rgba(255,255,255,.32); letter-spacing: .1em; white-space: nowrap; }
.hero__media-logos { display: flex; gap: 6px; flex-wrap: wrap; }
.hero__media-logos span {
  font-family: var(--f-en); font-size: 9.5px; font-weight: 700;
  color: rgba(255,255,255,.32); letter-spacing: .06em;
  border: 1px solid rgba(255,255,255,.09); padding: 4px 9px;
  border-radius: var(--r-sm);
  transition: background .2s, color .2s, border-color .2s;
}
.hero__media-logos span:hover {
  background: rgba(255,255,255,.08); color: rgba(255,255,255,.7);
  border-color: rgba(255,255,255,.18);
}

/* Hero Right - Stage */
.hero__right {
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: translateX(50px);
  transition: opacity .9s var(--e-out), transform .9s var(--e-out);
}
.hero__right.in { opacity: 1; transform: translateX(0); }
.hero__stage {
  position: relative;
  width: clamp(280px, 40vw, 480px);
  height: clamp(300px, 42vw, 520px);
  display: flex; align-items: center; justify-content: center;
}
.hero__stage-orbit {
  position: absolute; border-radius: 50%;
  border: 1px solid rgba(29,92,232,.18);
  animation: orbitPulse 3.5s ease-in-out infinite;
}
.hero__stage-orbit--1 { width: 100%; height: 100%; }
.hero__stage-orbit--2 { width: 74%; height: 74%; border-color: rgba(29,92,232,.12); animation-delay: .6s; }
.hero__stage-orbit--3 { width: 50%; height: 50%; border-color: rgba(29,92,232,.07); animation-delay: 1.2s; }
@keyframes orbitPulse {
  0%,100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.05); opacity: .45; }
}
.hero__stage-glow {
  position: absolute; inset: 12%;
  background: var(--grad-glow-b);
  filter: blur(36px); opacity: .8;
  animation: glowBreath 3.5s ease-in-out infinite alternate;
}
@keyframes glowBreath { from { opacity: .5; transform: scale(1); } to { opacity: 1; transform: scale(1.12); } }
.hero__tiger {
  position: relative; z-index: 5;
  width: clamp(160px, 25vw, 320px);
  filter: drop-shadow(0 20px 60px rgba(21,71,204,.55));
  animation: tigerFloat 4s ease-in-out infinite alternate;
  transform-origin: center bottom;
}
@keyframes tigerFloat {
  from { transform: translateY(0) rotateY(0); }
  to   { transform: translateY(-18px) rotateY(4deg); }
}

/* Hero Chips */
.hero__chip {
  position: absolute; z-index: 10;
  display: flex; align-items: center; gap: 7px;
  background: rgba(5,13,26,.88);
  border: 1px solid rgba(255,255,255,.11);
  backdrop-filter: blur(18px) saturate(180%);
  padding: 9px 16px; border-radius: var(--r-pill);
  font-size: 12px; font-weight: 700; color: #fff;
  box-shadow: var(--sh-glass); white-space: nowrap;
}
.hero__chip i { font-size: 11px; color: var(--g-300); }
.hero__chip--a { top: 10%; left: -2%; animation: chipFloat 3s ease-in-out infinite alternate; }
.hero__chip--b { top: 24%; right: -4%; animation: chipFloat 3.8s ease-in-out infinite alternate .4s; }
.hero__chip--c { bottom: 30%; left: -4%; animation: chipFloat 4.2s ease-in-out infinite alternate .2s; }
.hero__chip--d { bottom: 12%; right: -2%; animation: chipFloat 3.5s ease-in-out infinite alternate .7s; }
@keyframes chipFloat { from { transform: translateY(0); } to { transform: translateY(-9px); } }

/* Hero Balloon */
.hero__balloon {
  position: absolute; bottom: 4%; left: 50%;
  transform: translateX(-50%); z-index: 10;
  background: #fff; border-radius: var(--r-md) var(--r-md) var(--r-md) 4px;
  padding: 10px 20px; box-shadow: var(--sh-md);
  font-size: 14px; font-weight: 700; color: var(--ink-900);
  white-space: nowrap;
  animation: balloonIn .6s var(--e-spring) 2.2s both;
}
@keyframes balloonIn {
  from { opacity: 0; transform: translateX(-50%) scale(.6) translateY(10px); }
  to   { opacity: 1; transform: translateX(-50%) scale(1) translateY(0); }
}
.hero__balloon::after {
  content: ''; position: absolute; bottom: -9px; left: 18px;
  width: 0; height: 0;
  border: 9px solid transparent;
  border-top-color: #fff; border-bottom: 0; border-left: 0;
}

/* BG Vertical Lines */
.hero__bg-line {
  position: absolute; top: 0; bottom: 0; width: 1px;
  background: linear-gradient(180deg, transparent 0%, rgba(29,92,232,.12) 30%, rgba(29,92,232,.08) 70%, transparent 100%);
  animation: bgLineFlow 8s ease-in-out infinite alternate;
}
@keyframes bgLineFlow {
  from { opacity: 0; transform: scaleY(.6); }
  to   { opacity: 1; transform: scaleY(1); }
}

/* Ticker */
.hero__ticker {
  position: absolute; bottom: 80px; left: 0; right: 0; z-index: 10;
  height: 42px; overflow: hidden;
  display: flex; align-items: center;
  background: rgba(5,13,26,.55);
  border-top: 1px solid rgba(255,255,255,.055);
  border-bottom: 1px solid rgba(255,255,255,.055);
  backdrop-filter: blur(8px);
}
.hero__ticker-track {
  display: flex; gap: 0; white-space: nowrap;
  animation: tickerRoll 32s linear infinite;
}
.hero__ticker-track span {
  padding: 0 28px;
  font-family: var(--f-en); font-size: 10.5px; font-weight: 700;
  color: rgba(255,255,255,.42); letter-spacing: .18em;
}
.hero__ticker-track span:nth-child(even) { color: rgba(240,148,10,.55); }
@keyframes tickerRoll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Scroll Cue */
.hero__scroll {
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
  z-index: 10; display: flex; flex-direction: column; align-items: center; gap: 5px;
  font-family: var(--f-en); font-size: 8.5px; font-weight: 700;
  color: rgba(255,255,255,.28); letter-spacing: .32em;
}
.hero__scroll-bar {
  width: 1px; height: 36px;
  background: rgba(255,255,255,.1); position: relative; overflow: hidden;
}
.hero__scroll-ball {
  position: absolute; top: -8px; left: 0; right: 0; height: 8px;
  background: rgba(255,255,255,.5); border-radius: 1px;
  animation: scrollDrop 2s ease-in-out infinite;
}
@keyframes scrollDrop { from { top: -8px; opacity: 1; } to { top: 100%; opacity: 0; } }

/* ───────────────────────────────────────
   13. WORRY
─────────────────────────────────────── */
.worry { padding: var(--sec-py) 0; background: var(--n-50); }
.worry__grid {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 18px;
  margin-bottom: 52px;
}
.worry__card {
  background: #fff; border-radius: var(--r-2xl);
  padding: 36px 22px 30px; text-align: center;
  border: 1.5px solid var(--n-200);
  position: relative; overflow: hidden;
  transition: transform .4s var(--e-spring), box-shadow .4s, border-color .4s;
}
.worry__card:hover { transform: translateY(-10px); box-shadow: var(--sh-lg); border-color: var(--b-400); }
.worry__no {
  position: absolute; top: 14px; right: 16px;
  font-family: var(--f-en); font-size: 44px; font-weight: 900;
  color: var(--n-100); line-height: 1; pointer-events: none;
}
.worry__icon {
  width: 70px; height: 70px; border-radius: var(--r-xl);
  background: var(--grad-blue);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px; font-size: 26px; color: #fff;
  box-shadow: var(--sh-blue);
}
.worry__card h3 { font-size: 16px; font-weight: 800; color: var(--n-900); margin-bottom: 10px; }
.worry__card p  { font-size: 13px; color: var(--n-500); line-height: 1.78; }
.worry__glow {
  position: absolute; inset: -50px;
  background: var(--grad-glow-b); opacity: 0;
  transition: opacity .4s; pointer-events: none;
}
.worry__card:hover .worry__glow { opacity: 1; }

/* 解決バナー */
.worry__solve {
  display: flex; align-items: center; gap: 44px;
  background: var(--grad-hero); border-radius: var(--r-2xl);
  padding: 44px 52px; box-shadow: var(--sh-2xl);
  position: relative; overflow: hidden;
}
.worry__solve::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(29,92,232,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(29,92,232,.05) 1px, transparent 1px);
  background-size: 40px 40px;
}
.worry__solve-mascot { position: relative; flex-shrink: 0; z-index: 2; }
.worry__solve-mascot img { width: 120px; filter: drop-shadow(0 10px 28px rgba(21,71,204,.45)); }
.worry__solve-badge {
  position: absolute; top: -8px; right: -14px;
  background: var(--grad-gold); color: var(--ink-900);
  font-weight: 900; font-size: 12px;
  padding: 5px 12px; border-radius: var(--r-pill); box-shadow: var(--sh-gold);
}
.worry__solve-body { position: relative; z-index: 2; }
.worry__solve-tag {
  display: inline-block;
  background: rgba(29,92,232,.22); border: 1px solid rgba(29,92,232,.35);
  color: var(--b-300); font-size: 11.5px; font-weight: 700;
  padding: 5px 14px; border-radius: var(--r-pill);
  margin-bottom: 14px; letter-spacing: .06em;
}
.worry__solve-body h3 {
  font-family: var(--f-disp); font-size: clamp(20px, 2.6vw, 28px);
  font-weight: 900; color: #fff; line-height: 1.38; margin-bottom: 12px;
}
.worry__solve-body h3 strong { color: var(--g-300); }
.worry__solve-body p { font-size: 14px; color: rgba(255,255,255,.62); line-height: 1.85; margin-bottom: 24px; }
.worry__solve-body p strong { color: rgba(255,255,255,.88); }

/* ───────────────────────────────────────
   14. NUMS バー
─────────────────────────────────────── */
.nums {
  background: linear-gradient(135deg, var(--ink-900) 0%, var(--ink-700) 100%);
  padding: clamp(48px,7vw,80px) 0; position: relative; overflow: hidden;
}
.nums__bg {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 70% at 50% 50%, rgba(21,71,204,.15) 0%, transparent 70%);
}
.nums__inner {
  max-width: var(--max-w); margin: 0 auto; padding: 0 28px;
  position: relative; z-index: 2;
  display: flex; align-items: center; flex-wrap: wrap; justify-content: center;
}
.nums__item { text-align: center; padding: 22px 28px; flex: 1; min-width: 150px; }
.nums__val {
  font-family: var(--f-en); font-size: clamp(34px,5vw,58px);
  font-weight: 900; color: #fff; line-height: 1;
  display: flex; align-items: baseline; justify-content: center; gap: 2px;
}
.nums__val em { font-style: normal; font-size: 52%; color: var(--g-300); font-weight: 700; }
.nums__lbl { font-size: 11.5px; font-weight: 700; color: rgba(255,255,255,.55); letter-spacing: .08em; margin-top: 6px; }
.nums__item p { font-size: 11px; color: rgba(255,255,255,.3); margin-top: 3px; }
.nums__sep { width: 1px; height: 56px; background: rgba(255,255,255,.08); }

/* ───────────────────────────────────────
   15. FEATURES
─────────────────────────────────────── */
.feat {
  padding: var(--sec-py) 0;
  background: linear-gradient(180deg, var(--ink-800) 0%, var(--ink-700) 100%);
  position: relative; overflow: hidden;
}
.feat__watermark {
  position: absolute; bottom: -30px; right: -20px;
  font-family: var(--f-en); font-size: clamp(100px,18vw,210px);
  font-weight: 900; color: rgba(255,255,255,.018);
  line-height: 1; pointer-events: none; letter-spacing: -.05em;
  user-select: none;
}
.feat__grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 18px;
}
.feat__card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.075);
  border-radius: var(--r-2xl); padding: 32px 26px;
  position: relative; overflow: hidden;
  transition: transform .38s var(--e-spring), background .35s, border-color .35s, box-shadow .38s;
}
.feat__card:hover {
  transform: translateY(-9px);
  background: rgba(255,255,255,.075);
  border-color: rgba(29,92,232,.45);
  box-shadow: 0 18px 60px rgba(0,0,0,.35), 0 0 0 1px rgba(29,92,232,.22);
}
.feat__card--wide {
  background: rgba(29,92,232,.11);
  border-color: rgba(29,92,232,.22);
}
.feat__card--wide:hover { background: rgba(29,92,232,.18); border-color: rgba(29,92,232,.55); }
.feat__card-inner { position: relative; z-index: 2; }
.feat__no {
  position: absolute; top: 16px; right: 18px;
  font-family: var(--f-en); font-size: 42px; font-weight: 900;
  color: rgba(255,255,255,.055); line-height: 1; pointer-events: none;
}
.feat__icon {
  width: 62px; height: 62px; border-radius: var(--r-lg);
  background: rgba(240,148,10,.12); border: 1px solid rgba(240,148,10,.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; color: var(--g-300); margin-bottom: 20px;
}
.feat__card h3 { font-size: 19px; font-weight: 800; color: #fff; margin-bottom: 10px; }
.feat__card h3 mark { background: none; color: var(--g-300); }
.feat__card p   { font-size: 13.5px; color: rgba(255,255,255,.52); line-height: 1.82; }
.feat__badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(21,71,204,.22); border: 1px solid rgba(29,92,232,.32);
  color: var(--b-300); font-size: 11px; font-weight: 700;
  padding: 5px 12px; border-radius: var(--r-pill); margin-top: 14px;
}
.feat__badge--gold { background: rgba(240,148,10,.16); border-color: rgba(240,148,10,.28); color: var(--g-300); }
.feat__card-shine {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.05) 0%, transparent 55%);
  pointer-events: none;
}

/* ───────────────────────────────────────
   16. COMPARISON
─────────────────────────────────────── */
.cmp { padding: var(--sec-py) 0; background: #fff; }
.cmp__wrap {}
.cmp__scroll {
  overflow-x: auto; border-radius: var(--r-2xl);
  box-shadow: var(--sh-2xl);
}
.cmp__table {
  width: 100%; border-collapse: collapse; min-width: 680px;
}
.cmp__table thead tr { background: var(--ink-900); }
.cmp__table th {
  padding: 20px 16px; font-size: 14px; font-weight: 700;
  color: rgba(255,255,255,.65); text-align: center;
}
.cmp__th-label { text-align: left; color: rgba(255,255,255,.45); font-size: 11.5px; }
.cmp__th-ahf { background: rgba(29,92,232,.25); }
.cmp__ahf-head {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.cmp__ahf-head strong { font-size: 18px; font-weight: 900; color: #fff; }
.cmp__ahf-head small  { font-size: 10px; color: var(--b-300); letter-spacing: .1em; }
.cmp__mascot { width: 42px; margin-top: 6px; }
.cmp__ahf-no1 {
  background: var(--grad-gold); color: var(--ink-900);
  font-family: var(--f-en); font-size: 10px; font-weight: 900;
  padding: 2px 10px; border-radius: var(--r-pill); letter-spacing: .1em;
}
.cmp__table tbody tr { background: #fff; transition: background .2s; }
.cmp__table tbody tr:nth-child(even) { background: var(--n-50); }
.cmp__table tbody tr:hover { background: var(--n-100); }
.cmp__table td {
  padding: 16px; font-size: 14px; color: var(--n-500); text-align: center;
  border-bottom: 1px solid var(--n-100);
}
.cmp__item { text-align: left; font-weight: 600; color: var(--n-800); }
.cmp__item i { color: var(--b-400); margin-right: 6px; }
.cmp__td-ahf { background: rgba(21,71,204,.045) !important; font-weight: 700; }
.cmp__best { color: var(--b-500); font-weight: 900; font-size: 15px; }
.cmp__ok { color: var(--green); font-size: 19px; }
.cmp__ng { color: var(--n-300); font-size: 19px; }

/* ───────────────────────────────────────
   17. FLOW
─────────────────────────────────────── */
.flow {
  padding: var(--sec-py) 0;
  background: linear-gradient(180deg, var(--ink-700) 0%, var(--ink-800) 100%);
}
.flow__list {
  max-width: 760px; margin: 0 auto 52px;
  display: flex; flex-direction: column; gap: 0;
  position: relative;
}
.flow__list::before {
  content: ''; position: absolute;
  left: 35px; top: 70px; bottom: 70px; width: 2px;
  background: rgba(255,255,255,.07);
}
.flow__item {
  display: flex; align-items: flex-start; gap: 22px; padding: 20px 0;
  position: relative;
}
.flow__num {
  width: 72px; height: 72px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.04);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-en); font-size: 18px; font-weight: 900;
  color: rgba(255,255,255,.35); position: relative; z-index: 2;
  transition: border-color .5s, background .5s, color .5s;
}
.flow__item.in .flow__num {
  border-color: var(--b-500); background: rgba(21,71,204,.18); color: var(--b-300);
}
.flow__num--gold {}
.flow__item--final.in .flow__num {
  border-color: var(--g-400); background: rgba(240,148,10,.18); color: var(--g-300);
}
.flow__card {
  flex: 1; display: flex; align-items: center; gap: 18px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--r-2xl); padding: 22px 26px;
  transition: background .4s, border-color .4s, box-shadow .4s;
}
.flow__item.in .flow__card {
  background: rgba(255,255,255,.065); border-color: rgba(29,92,232,.2);
}
.flow__card--gold { background: rgba(240,148,10,.09) !important; border-color: rgba(240,148,10,.25) !important; box-shadow: 0 8px 32px rgba(240,148,10,.15) !important; }
.flow__icon {
  width: 52px; height: 52px; border-radius: var(--r-lg); flex-shrink: 0;
  background: rgba(29,92,232,.18); border: 1px solid rgba(29,92,232,.28);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: var(--b-300);
}
.flow__icon--gold { background: rgba(240,148,10,.18); border-color: rgba(240,148,10,.28); color: var(--g-300); }
.flow__body h3 { font-size: 18px; font-weight: 800; color: #fff; margin-bottom: 4px; }
.flow__body p  { font-size: 13px; color: rgba(255,255,255,.48); }
.flow__time {
  display: inline-flex; align-items: center;
  font-family: var(--f-en); font-size: 10.5px; font-weight: 700;
  color: var(--b-300); letter-spacing: .1em;
  background: rgba(29,92,232,.14); padding: 3px 10px;
  border-radius: var(--r-pill); margin-bottom: 7px;
}
.flow__time--gold { color: var(--g-300); background: rgba(240,148,10,.14); }
.flow__arrow {
  position: absolute; left: 35px; bottom: 0; transform: translateX(-50%);
  color: rgba(255,255,255,.18); font-size: 13px; z-index: 3;
}
.flow__cta {
  display: flex; align-items: center; gap: 28px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--r-2xl); padding: 34px 46px; justify-content: center;
}
.flow__cta img { width: 88px; filter: drop-shadow(0 6px 16px rgba(21,71,204,.4)); }
.flow__cta p { font-size: 15px; color: rgba(255,255,255,.62); margin-bottom: 16px; }
.flow__cta p strong { color: #fff; }

/* ───────────────────────────────────────
   18. FEE
─────────────────────────────────────── */
.fee {
  padding: var(--sec-py) 0;
  background: var(--ink-900); position: relative; overflow: hidden;
}
.fee__deco {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 70% at 20% 50%, rgba(21,71,204,.16) 0%, transparent 55%),
    radial-gradient(ellipse 50% 60% at 80% 50%, rgba(240,148,10,.08) 0%, transparent 55%);
  pointer-events: none;
}
.fee__grid {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 22px; margin-bottom: 30px; position: relative; z-index: 2;
}
.fee__card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--r-2xl); padding: 36px 26px;
  text-align: center; position: relative;
  transition: transform .4s var(--e-spring), background .35s, border-color .35s, box-shadow .4s;
}
.fee__card:hover {
  transform: translateY(-11px);
  background: rgba(255,255,255,.07);
  border-color: rgba(29,92,232,.32);
  box-shadow: 0 22px 64px rgba(0,0,0,.42);
}
.fee__card--star {
  background: rgba(29,92,232,.13);
  border: 2px solid rgba(29,92,232,.38);
  transform: translateY(-8px);
  box-shadow: 0 12px 48px rgba(21,71,204,.25);
}
.fee__card--star:hover { transform: translateY(-20px); box-shadow: 0 30px 80px rgba(21,71,204,.42); }
.fee__crown {
  position: absolute; top: -16px; left: 50%; transform: translateX(-50%);
  background: var(--grad-gold); color: var(--ink-900);
  font-weight: 900; font-size: 12px;
  padding: 5px 18px; border-radius: var(--r-pill); box-shadow: var(--sh-gold);
  white-space: nowrap;
}
.fee__card-icon {
  width: 72px; height: 72px; border-radius: var(--r-xl);
  background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.09);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 18px; font-size: 28px; color: var(--b-300);
}
.fee__card--star .fee__card-icon { background: rgba(29,92,232,.18); color: var(--g-300); }
.fee__card h3 { font-size: 20px; font-weight: 900; color: #fff; line-height: 1.3; margin-bottom: 6px; }
.fee__card-sub { font-size: 11.5px; color: rgba(255,255,255,.38); margin-bottom: 20px; }
.fee__rate {
  display: flex; align-items: baseline; justify-content: center; gap: 4px;
  margin-bottom: 24px; line-height: 1;
}
.fee__rate b { font-family: var(--f-en); font-size: 50px; font-weight: 900; color: #fff; }
.fee__card--star .fee__rate b { color: var(--g-300); }
.fee__rate b small { font-size: 58%; }
.fee__rate-max { font-size: 36px !important; }
.fee__rate span { font-size: 20px; color: rgba(255,255,255,.38); }
.fee__features { text-align: left; margin-bottom: 26px; display: flex; flex-direction: column; gap: 10px; }
.fee__features li {
  display: flex; align-items: center; gap: 9px;
  font-size: 13px; color: rgba(255,255,255,.62);
}
.fee__features i { color: var(--green2); font-size: 13px; flex-shrink: 0; }
.fee__btn {
  display: block;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.13);
  color: rgba(255,255,255,.78); padding: 13px;
  border-radius: var(--r-pill); font-weight: 700; font-size: 14px;
  transition: background .2s, color .2s; cursor: pointer;
}
.fee__btn:hover { background: rgba(255,255,255,.14); color: #fff; }
.fee__btn--gold {
  background: var(--grad-gold); border-color: transparent;
  color: var(--ink-900); box-shadow: var(--sh-gold);
}
.fee__btn--gold:hover { filter: brightness(1.08); }
.fee__note {
  text-align: center; font-size: 13px; color: rgba(255,255,255,.38);
  position: relative; z-index: 2;
}
.fee__note strong { color: rgba(255,255,255,.7); }
.fee__note i { color: var(--b-300); margin-right: 5px; }

/* ───────────────────────────────────────
   19. VOICE
─────────────────────────────────────── */
.voice { padding: var(--sec-py) 0; background: var(--n-50); }
.voice-swiper { padding-bottom: 52px !important; }
.vcard {
  background: #fff; border-radius: var(--r-2xl); padding: 28px;
  border: 1.5px solid var(--n-200); box-shadow: var(--sh-xs);
  height: 100%; display: flex; flex-direction: column;
  transition: transform .35s var(--e-spring), box-shadow .35s;
}
.vcard:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); }
.vcard__stars {
  display: flex; align-items: center; gap: 3px; margin-bottom: 14px;
  color: var(--g-500); font-size: 13px;
}
.vcard__stars span { font-family: var(--f-en); font-weight: 800; font-size: 14px; color: var(--n-700); margin-left: 4px; }
.vcard__text {
  font-size: 14px; color: var(--n-600); line-height: 1.88;
  flex: 1; margin-bottom: 18px;
  border-left: 3px solid var(--b-400); padding-left: 14px;
  font-style: normal;
}
.vcard__foot { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.vcard__av {
  width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
  background: var(--grad-blue); box-shadow: var(--sh-blue);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-en); font-weight: 900; font-size: 16px; color: #fff;
}
.vcard__info { display: flex; flex-direction: column; gap: 2px; }
.vcard__info strong { font-size: 14px; font-weight: 800; color: var(--n-900); }
.vcard__info span   { font-size: 11px; color: var(--n-400); }
.vcard__amt b { color: var(--b-500); font-weight: 800; }
.voice-pagi .swiper-pagination-bullet { background: var(--b-400); }
.voice-prev, .voice-next { color: var(--b-500); }
.voice-prev::after, .voice-next::after { font-size: 14px; font-weight: 900; }

/* ───────────────────────────────────────
   20. TARGET
─────────────────────────────────────── */
.tgt { padding: var(--sec-py) 0; background: #fff; }
.tgt__grid {
  display: flex; gap: 12px; flex-wrap: wrap; justify-content: center;
  margin-bottom: 52px;
}
.tgt__item { text-align: center; }
.tgt__icon {
  width: 78px; height: 78px; border-radius: var(--r-xl);
  background: var(--n-50); border: 1.5px solid var(--n-200);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; color: var(--b-500); margin: 0 auto 10px;
  transition: background .35s var(--e-spring), transform .35s var(--e-spring),
              box-shadow .35s, border-color .35s, color .35s;
}
.tgt__item:hover .tgt__icon {
  background: var(--ink-900); border-color: var(--b-400); color: var(--g-300);
  transform: translateY(-6px) scale(1.06); box-shadow: var(--sh-blue);
}
.tgt__item span { font-size: 11.5px; color: var(--n-500); font-weight: 600; }
.tgt__ok {
  display: flex; align-items: center; gap: 48px;
  background: linear-gradient(135deg, var(--n-50) 0%, #eef4ff 100%);
  border: 1.5px solid var(--n-200); border-radius: var(--r-2xl);
  padding: 42px 50px;
}
.tgt__ok-mascot { position: relative; flex-shrink: 0; }
.tgt__ok-mascot img { width: 110px; }
.tgt__ok-bubble {
  position: absolute; bottom: -8px; right: -22px;
  background: var(--ink-900); color: #fff;
  font-size: 11px; font-weight: 700; white-space: nowrap;
  padding: 5px 12px; border-radius: var(--r-pill); box-shadow: var(--sh-md);
}
.tgt__ok-body h3 { font-size: clamp(18px, 2.5vw, 23px); font-weight: 900; color: var(--n-900); margin-bottom: 18px; }
.tgt__ok-body h3 em { font-style: normal; color: var(--b-500); }
.tgt__ok-list { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px 22px; }
.tgt__ok-list li {
  display: flex; align-items: center; gap: 8px;
  font-size: 13.5px; color: var(--n-700); font-weight: 600;
}
.tgt__ok-list i { color: var(--green); font-size: 15px; }

/* ───────────────────────────────────────
   21. FAQ
─────────────────────────────────────── */
.faq { padding: var(--sec-py) 0; background: var(--n-50); }
.faq__layout { display: grid; grid-template-columns: 1fr 320px; gap: 40px; }
.faq__list { display: flex; flex-direction: column; gap: 10px; }
.faq__item {
  background: #fff; border-radius: var(--r-xl);
  border: 1.5px solid var(--n-200); overflow: hidden;
  transition: box-shadow .3s, border-color .3s;
}
.faq__item.open { box-shadow: var(--sh-md); border-color: var(--b-300); }
.faq__q {
  width: 100%; display: flex; align-items: center; gap: 14px;
  padding: 20px 22px; text-align: left;
  transition: background .2s;
}
.faq__q:hover { background: var(--n-50); }
.faq__q-badge {
  width: 30px; height: 30px; border-radius: var(--r-md); flex-shrink: 0;
  background: var(--grad-blue); box-shadow: var(--sh-blue);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-en); font-weight: 900; font-size: 13px; color: #fff;
}
.faq__q > span:nth-child(2) { flex: 1; font-size: 14.5px; font-weight: 700; color: var(--n-900); }
.faq__icon { color: var(--n-400); font-size: 13px; transition: transform .38s var(--e-spring), color .2s; }
.faq__item.open .faq__icon { transform: rotate(45deg); color: var(--b-500); }
.faq__a {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 0 22px 20px;
}
.faq__a[hidden] { display: none !important; }
.faq__a-badge {
  width: 30px; height: 30px; border-radius: var(--r-md); flex-shrink: 0;
  background: rgba(13,165,110,.1); border: 1px solid rgba(13,165,110,.22);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-en); font-weight: 900; font-size: 13px; color: var(--green);
}
.faq__a p { font-size: 14px; color: var(--n-600); line-height: 1.88; }

.faq__side-inner {
  background: var(--ink-900); border-radius: var(--r-2xl);
  padding: 34px 26px; text-align: center;
  position: sticky; top: 90px;
}
.faq__side-inner img { width: 100px; margin: 0 auto 14px; filter: drop-shadow(0 6px 18px rgba(21,71,204,.45)); }
.faq__side-bubble {
  background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.09);
  border-radius: var(--r-lg); padding: 12px 16px;
  font-size: 13px; color: rgba(255,255,255,.72); line-height: 1.65;
  margin-bottom: 18px;
}
.faq__side-btn { width: 100%; justify-content: center; margin-bottom: 16px; }
.faq__side-tel {
  display: flex; align-items: center; gap: 12px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--r-md); padding: 14px;
}
.faq__side-tel i { color: var(--g-400); font-size: 18px; }
.faq__side-tel small { display: block; font-size: 10px; color: rgba(255,255,255,.4); letter-spacing: .1em; }
.faq__side-tel strong { font-family: var(--f-en); font-weight: 900; font-size: 17px; color: #fff; }

/* ───────────────────────────────────────
   22. COMPANY
─────────────────────────────────────── */
.comp { padding: var(--sec-py) 0; background: #fff; }
.comp__layout { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.comp__badges { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }
.comp__badges span {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 700;
  background: var(--n-50); border: 1.5px solid var(--n-200);
  padding: 6px 14px; border-radius: var(--r-pill); color: var(--n-700);
}
.comp__badges i { color: var(--b-500); }
.comp__table { width: 100%; border-collapse: collapse; }
.comp__table tr { border-bottom: 1px solid var(--n-100); }
.comp__table th {
  padding: 14px 16px; font-size: 13px; font-weight: 700;
  color: var(--n-500); background: var(--n-50); text-align: left; white-space: nowrap; width: 120px;
}
.comp__table td { padding: 14px 16px; font-size: 14px; color: var(--n-800); }
.comp__msg {
  display: flex; gap: 22px;
  background: var(--grad-hero); border-radius: var(--r-2xl); padding: 38px;
}
.comp__msg img { width: 88px; height: auto; flex-shrink: 0; filter: drop-shadow(0 6px 18px rgba(21,71,204,.45)); }
.comp__msg-body {}
.comp__msg-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--g-300);
  background: rgba(240,148,10,.1); border: 1px solid rgba(240,148,10,.2);
  padding: 4px 12px; border-radius: var(--r-pill); margin-bottom: 12px;
}
.comp__msg-body p { font-size: 13.5px; color: rgba(255,255,255,.58); line-height: 1.88; margin-bottom: 11px; }
.comp__msg-sign { font-family: var(--f-en); font-size: 12px; color: rgba(255,255,255,.32); margin-top: 6px; display: block; }

/* ───────────────────────────────────────
   23. CONTACT
─────────────────────────────────────── */
.contact {
  padding: var(--sec-py) 0;
  background: linear-gradient(135deg, var(--ink-900) 0%, var(--ink-700) 50%, var(--ink-800) 100%);
  position: relative; overflow: hidden;
}
.contact__bg { position: absolute; inset: 0; pointer-events: none; }
#contactCanvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .28; }
.contact__orb { position: absolute; border-radius: 50%; filter: blur(110px); }
.contact__orb--1 { width: 600px; height: 600px; top: -200px; right: -200px; background: rgba(21,71,204,.18); }
.contact__orb--2 { width: 500px; height: 500px; bottom: -200px; left: -200px; background: rgba(240,148,10,.1); }
.contact__layout { display: grid; grid-template-columns: 1fr 380px; gap: 40px; position: relative; z-index: 2; }

/* Form Box */
.contact__form-box {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.095);
  backdrop-filter: blur(28px); border-radius: var(--r-2xl); overflow: hidden;
}
.contact__form-hd {
  background: rgba(255,255,255,.04); border-bottom: 1px solid rgba(255,255,255,.065);
  padding: 22px 30px;
}
.contact__form-hd h3 { font-size: 18px; font-weight: 800; color: #fff; margin-bottom: 3px; }
.contact__form-hd h3 i { color: var(--g-300); margin-right: 8px; }
.contact__form-hd p { font-size: 12px; color: rgba(255,255,255,.42); }

/* Form Fields */
.cform { padding: 26px 30px; display: flex; flex-direction: column; gap: 18px; }
.cform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cform__group { display: flex; flex-direction: column; gap: 7px; }
.cform__group--full { grid-column: 1/-1; }
.cform__group label { font-size: 12.5px; font-weight: 700; color: rgba(255,255,255,.62); letter-spacing: .04em; }
.req {
  display: inline-block; margin-left: 5px;
  background: rgba(232,53,53,.22); border: 1px solid rgba(232,53,53,.28);
  color: #ff8888; font-size: 10px; font-weight: 700;
  padding: 1px 7px; border-radius: 4px; letter-spacing: .04em;
}
.cform__field { position: relative; }
.cform__field i {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: rgba(255,255,255,.28); font-size: 13px; z-index: 1; pointer-events: none;
}
.cform__field input,
.cform__field select {
  width: 100%; padding: 12px 14px 12px 40px;
  background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.095);
  border-radius: var(--r-lg); font-family: var(--f-jp); font-size: 14px; color: #fff;
  transition: border-color .2s, background .2s, box-shadow .2s;
  -webkit-appearance: none; appearance: none;
}
.cform__field input::placeholder { color: rgba(255,255,255,.22); }
.cform__field input:focus,
.cform__field select:focus {
  outline: none; border-color: var(--b-400);
  background: rgba(255,255,255,.085);
  box-shadow: 0 0 0 3px rgba(29,92,232,.15);
}
.cform__field select option { background: var(--ink-900); color: #fff; }
.cform__field--sel::after {
  content: '\f107'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  color: rgba(255,255,255,.28); font-size: 12px; pointer-events: none;
}
.cform__field--ta i { top: 14px; transform: none; }
.cform__field textarea {
  width: 100%; padding: 12px 14px 12px 40px;
  background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.095);
  border-radius: var(--r-lg); font-family: var(--f-jp); font-size: 14px; color: #fff;
  resize: vertical; min-height: 82px;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.cform__field textarea::placeholder { color: rgba(255,255,255,.22); }
.cform__field textarea:focus {
  outline: none; border-color: var(--b-400);
  background: rgba(255,255,255,.085); box-shadow: 0 0 0 3px rgba(29,92,232,.15);
}
.cform__privacy {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: rgba(255,255,255,.48); cursor: pointer;
}
.cform__privacy input { display: none; }
.cform__check-ui {
  width: 20px; height: 20px; border-radius: 5px; flex-shrink: 0;
  background: rgba(255,255,255,.055); border: 1.5px solid rgba(255,255,255,.14);
  position: relative; transition: background .2s, border-color .2s;
}
.cform__privacy input:checked ~ .cform__check-ui {
  background: var(--b-500); border-color: var(--b-500);
}
.cform__privacy input:checked ~ .cform__check-ui::after {
  content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  color: #fff; font-size: 11px;
}
.cform__privacy a { color: var(--b-300); text-decoration: underline; }
.cform__submit {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--grad-gold); color: var(--ink-900);
  padding: 18px; border-radius: var(--r-pill);
  font-weight: 900; font-size: 17px; width: 100%;
  box-shadow: var(--sh-gold); position: relative; overflow: hidden;
  transition: transform .3s var(--e-spring), box-shadow .3s; cursor: pointer;
}
.cform__submit-shine {
  position: absolute; inset: 0; background: var(--grad-shimmer);
  transform: translateX(-100%); transition: transform .6s;
}
.cform__submit:hover .cform__submit-shine { transform: translateX(100%); }
.cform__submit:hover { transform: translateY(-4px); box-shadow: var(--sh-gold2); }

/* Form Done */
.cform__done {
  display: flex; flex-direction: column; align-items: center;
  padding: 52px 30px; text-align: center;
}
.cform__done[hidden] { display: none; }
.cform__done-icon {
  width: 84px; height: 84px; border-radius: 50%;
  background: rgba(13,165,110,.12); border: 2px solid var(--green2);
  display: flex; align-items: center; justify-content: center;
  font-size: 38px; color: var(--green2); margin-bottom: 22px;
  animation: doneScale .55s var(--e-spring) both;
}
@keyframes doneScale { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }
.cform__done h3 { font-size: 20px; font-weight: 900; color: #fff; margin-bottom: 12px; }
.cform__done p { font-size: 14px; color: rgba(255,255,255,.58); line-height: 1.82; margin-bottom: 22px; }
.cform__done img { width: 80px; filter: drop-shadow(0 5px 14px rgba(21,71,204,.4)); }

/* Contact Side */
.contact__side { display: flex; flex-direction: column; gap: 18px; }
.contact__tel-card {
  display: flex; align-items: center; gap: 16px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.095);
  border-radius: var(--r-xl); padding: 20px 22px;
  transition: background .25s;
}
.contact__tel-card:hover { background: rgba(255,255,255,.08); }
.contact__tel-icon {
  width: 52px; height: 52px; border-radius: var(--r-lg); flex-shrink: 0;
  background: rgba(240,148,10,.16); border: 1px solid rgba(240,148,10,.22);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; color: var(--g-300);
}
.contact__tel-card p { font-size: 10.5px; color: rgba(255,255,255,.42); letter-spacing: .08em; }
.contact__tel-num {
  display: block; font-family: var(--f-en); font-weight: 900; font-size: 24px;
  color: #fff; line-height: 1.2; transition: color .2s;
}
.contact__tel-num:hover { color: var(--g-300); }
.contact__tel-card > div > span { font-size: 10.5px; color: rgba(255,255,255,.32); }
.contact__merits {
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--r-xl); padding: 20px 22px;
  display: flex; flex-direction: column; gap: 11px;
}
.contact__merits li {
  display: flex; align-items: center; gap: 10px;
  font-size: 13.5px; color: rgba(255,255,255,.68);
}
.contact__merits i { color: var(--green2); font-size: 15px; }
.contact__mascot-card {
  display: flex; align-items: center; gap: 16px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--r-xl); padding: 18px 22px;
}
.contact__mascot-card img { width: 68px; filter: drop-shadow(0 4px 12px rgba(21,71,204,.4)); }
.contact__mascot-balloon { font-size: 14px; font-weight: 700; color: rgba(255,255,255,.72); line-height: 1.6; }

/* ───────────────────────────────────────
   24. FOOTER
─────────────────────────────────────── */
.footer {
  background: linear-gradient(180deg, #0a121f 0%, var(--n-900) 100%);
  border-top: 1px solid rgba(255,255,255,.07);
  padding: 60px 0 0; position: relative; overflow: hidden;
}
.footer::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--b-500) 30%, var(--g-500) 60%, transparent 100%);
  opacity: .6;
}
.footer__inner { max-width: var(--max-w); margin: 0 auto; padding: 0 28px; }
.footer__top {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px;
  padding-bottom: 48px; border-bottom: 1px solid rgba(255,255,255,.07);
}
@media (max-width: 1024px) { .footer__top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px)  { .footer__top { grid-template-columns: 1fr; } }
.footer__brand p { font-size: 13px; color: var(--n-500); margin-top: 14px; margin-bottom: 18px; line-height: 1.72; }
.footer__logo {
  display: flex; align-items: center; gap: 10px;
  transition: opacity .2s;
}
.footer__logo:hover { opacity: .8; }
.footer__logo-badge {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--grad-blue); box-shadow: var(--sh-blue);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-en); font-weight: 900; font-size: 12.5px; color: #fff;
}
.footer__logo-ja  { display: block; font-size: 13px; font-weight: 700; color: rgba(255,255,255,.7); line-height: 1; }
.footer__logo-en  { display: block; font-family: var(--f-en); font-size: 8px; color: var(--n-600); letter-spacing: .18em; }
.footer__tel {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-en); font-weight: 800; font-size: 20px;
  color: var(--g-300); transition: color .2s;
}
.footer__tel:hover { color: var(--g-400); }
.footer__nav { display: contents; }
.footer__nav-col h4 {
  font-family: var(--f-en); font-size: 10px; font-weight: 800;
  color: var(--b-400); letter-spacing: .22em; margin-bottom: 16px;
  text-transform: uppercase; display: flex; align-items: center; gap: 6px;
}
.footer__nav-col h4::after {
  content: ''; flex: 1; height: 1px;
  background: rgba(255,255,255,.07);
}
.footer__nav-col ul { display: flex; flex-direction: column; gap: 9px; }
.footer__nav-col a { font-size: 13.5px; color: var(--n-500); transition: color .2s; }
.footer__nav-col a:hover { color: #fff; }
.footer__bottom {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 0;
}
.footer__copy { font-size: 11.5px; color: var(--n-700); }
.footer__legal { display: flex; gap: 18px; }
.footer__legal a { font-size: 11.5px; color: var(--n-700); transition: color .2s; }
.footer__legal a:hover { color: var(--n-400); }

/* ───────────────────────────────────────
   25. SCROLL-TOP BUTTON
─────────────────────────────────────── */
.scroll-top-btn {
  position: fixed; bottom: 96px; right: 26px; z-index: 499;
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255,255,255,.07); border: 1.5px solid rgba(255,255,255,.12);
  backdrop-filter: blur(14px); color: rgba(255,255,255,.55);
  font-size: 14px; display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: translateY(18px);
  transition: opacity .35s, transform .35s, background .2s, color .2s;
  cursor: pointer;
}
.scroll-top-btn:hover { background: rgba(255,255,255,.16); color: #fff; }
.scroll-top-btn.visible { opacity: 1; transform: translateY(0); }
@media (max-width: 768px) { .scroll-top-btn { display: none; } }

/* ───────────────────────────────────────
   26. RESPONSIVE – Tablet (≤1024)
─────────────────────────────────────── */
@media (max-width: 1024px) {
  .hdr__nav  { display: none; }
  .hdr__hamburger { display: flex; }
  .hdr__tel  { display: none; }
  .hero__wrap { grid-template-columns: 1fr; padding-bottom: 160px; }
  .hero__right { display: none; }
  .hero__left { max-width: 680px; margin: 0 auto; text-align: center; }
  .hero__badge  { margin: 0 auto 28px; }
  .hero__h1-center { justify-content: center; }
  .hero__kpi    { max-width: 520px; margin: 0 auto 34px; }
  .hero__actions { justify-content: center; }
  .hero__media  { justify-content: center; }
  .worry__grid  { grid-template-columns: 1fr 1fr; }
  .feat__grid   { grid-template-columns: 1fr 1fr; }
  .fee__grid    { grid-template-columns: 1fr 1fr; }
  .fee__card--star { grid-column: span 2; max-width: 420px; margin: 0 auto; width: 100%; }
  .faq__layout  { grid-template-columns: 1fr; }
  .faq__side-inner { position: static; }
  .comp__layout { grid-template-columns: 1fr; }
  .contact__layout { grid-template-columns: 1fr; }
  .footer__top  { grid-template-columns: 1fr; gap: 28px; }
}

/* ───────────────────────────────────────
   27. RESPONSIVE – Mobile (≤640)
─────────────────────────────────────── */
@media (max-width: 640px) {
  :root { --sec-py: 64px; --hdr-h: 60px; }
  .sec-container { padding: 0 18px; }
  .hero__wrap { padding: calc(var(--hdr-h) + 48px) 18px 140px; }
  .hero__h1-num { font-size: clamp(80px, 24vw, 128px); }
  .hero__kpi { flex-direction: column; gap: 18px; padding: 18px; }
  .hero__kpi-div { display: none; }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .btn-gold--lg, .btn-ghost { justify-content: center; text-align: center; }
  .worry__grid  { grid-template-columns: 1fr; }
  .worry__solve { flex-direction: column; padding: 30px 22px; }
  .nums__sep    { display: none; }
  .nums__item   { min-width: 130px; }
  .feat__grid   { grid-template-columns: 1fr; }
  .fee__grid    { grid-template-columns: 1fr; }
  .fee__card--star { grid-column: auto; max-width: 100%; }
  .cmp__table   { min-width: 580px; }
  .flow__list::before { display: none; }
  .flow__item   { flex-direction: column; }
  .flow__arrow  { display: none; }
  .tgt__ok      { flex-direction: column; padding: 28px 20px; }
  .tgt__ok-list { grid-template-columns: 1fr 1fr; }
  .comp__msg    { flex-direction: column; align-items: center; padding: 26px; }
  .cform__row   { grid-template-columns: 1fr; }
  .footer__top  { grid-template-columns: 1fr; }
  .footer__nav  { grid-template-columns: 1fr 1fr; }
  .footer__bottom { flex-direction: column; gap: 10px; text-align: center; }
  .fcta { bottom: 14px; right: 14px; }
}

/* ───────────────────────────────────────
   28. UX ENHANCEMENTS
─────────────────────────────────────── */

/* ── モバイル タッチターゲット最小44px ── */
@media (pointer: coarse) {
  .hdr__nav-a,
  .sp-menu__link,
  .faq__q,
  .footer__nav-col a { min-height: 44px; display: flex; align-items: center; }
  .btn-gold, .btn-blue, .btn-ghost { padding-top: 18px; padding-bottom: 18px; }
}

/* ── ボタン・リンクのアクティブ状態 ── */
.btn-gold:active  { transform: translateY(-1px) scale(.99); }
.btn-blue:active  { transform: translateY(-1px) scale(.99); }
.btn-ghost:active { transform: translateY(0); background: rgba(255,255,255,.14); }
.hdr__cta-btn:active { transform: scale(.97); }
.fcta__btn:active { transform: scale(.96); }

/* ── フォームフォーカス時のコンテナ強調 ── */
.cform__field.focused input,
.cform__field.focused select,
.cform__field.focused textarea {
  border-color: var(--b-400) !important;
  background: rgba(255,255,255,.1) !important;
}
.cform__field.focused i { color: var(--b-300) !important; }

/* ── SP時のヒーローKPIを横スクロール可能に ── */
@media (max-width: 400px) {
  .hero__kpi { overflow-x: auto; flex-direction: row; gap: 0; }
  .hero__kpi-div { display: block; width: 1px; }
  .hero__kpi-item { min-width: 90px; }
}

/* ── 比較表のスクロールヒント（モバイル） ── */
@media (max-width: 768px) {
  .cmp__scroll::after {
    content: '← 横にスクロール →';
    display: block; text-align: center;
    font-size: 11px; color: var(--n-400);
    padding: 8px; background: var(--n-50);
    border-radius: 0 0 var(--r-lg) var(--r-lg);
  }
}

/* ── フォームバリデーション エラー色 ── */
.cform__field input[style*="rgba(232"],
.cform__field select[style*="rgba(232"] {
  animation: shakeField .3s var(--e-spring);
}
@keyframes shakeField {
  0%,100% { transform: translateX(0); }
  25%     { transform: translateX(-6px); }
  75%     { transform: translateX(6px); }
}

/* ── Swiper ナビボタン強化 ── */
.voice-prev, .voice-next {
  width: 44px !important; height: 44px !important;
  background: rgba(255,255,255,.9) !important;
  border-radius: 50% !important;
  box-shadow: var(--sh-sm) !important;
  color: var(--b-500) !important;
}
.voice-prev:hover, .voice-next:hover {
  background: #fff !important;
  box-shadow: var(--sh-md) !important;
}

/* ── ローディング画面の非表示後 body の padding-top 補正 ── */
.loading.out { pointer-events: none; }

/* ── 印刷時のスタイル ── */
@media print {
  .loading, .fcta, .cursor__dot, .cursor__ring,
  .hdr, .hero__ticker, .hero__scroll, .scroll-top-btn { display: none !important; }
  body { font-size: 12pt; color: #000; }
  a { color: #000; text-decoration: underline; }
  .hero { min-height: auto; padding: 20pt 0; background: #fff; color: #000; }
}

/* ═══════════════════════════════════════════════════════════════
   29. NEWS SECTION（ニュース自動取得）
═══════════════════════════════════════════════════════════════ */
.news-section { background: var(--ink-900); }

.news-tabs {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-bottom: 28px;
}
.news-tab {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 20px; border-radius: var(--r-xl);
  font-size: 13.5px; font-weight: 700; cursor: pointer;
  border: 1.5px solid rgba(255,255,255,.12);
  color: var(--n-400); background: rgba(255,255,255,.04);
  transition: all .25s var(--e-out);
}
.news-tab:hover { color: #fff; border-color: var(--b-400); background: rgba(29,92,232,.12); }
.news-tab.active {
  background: var(--grad-blue); border-color: transparent;
  color: #fff; box-shadow: var(--sh-blue);
}
.news-tab i { font-size: 12px; }

.news-panel { display: none; }
.news-panel.active { display: block; }

.news-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 1024px) { .news-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px)  { .news-grid { grid-template-columns: 1fr; } }

.news-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--r-xl);
  padding: 18px 20px;
  transition: transform .25s var(--e-out), box-shadow .25s, border-color .25s;
  display: flex; flex-direction: column; gap: 10px;
}
.news-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-md);
  border-color: rgba(255,255,255,.18);
}
.news-card__source {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11px; color: var(--n-500);
}
.news-card__source-name {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(29,92,232,.18); color: var(--b-300);
  padding: 3px 9px; border-radius: 20px; font-weight: 700;
}
.news-card__date { color: var(--n-600); font-size: 11px; }
.news-card__title {
  font-size: 14.5px; font-weight: 700; color: #fff;
  line-height: 1.6; display: -webkit-box;
  -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.news-card a { text-decoration: none; color: inherit; }
.news-card a:hover .news-card__title { color: var(--b-300); }
.news-card__thumb {
  width: 100%; aspect-ratio: 16/9;
  border-radius: var(--r-lg); overflow: hidden;
  background: rgba(255,255,255,.06);
}
.news-card__thumb img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .4s var(--e-out);
}
.news-card:hover .news-card__thumb img { transform: scale(1.05); }
.news-card__arrow {
  margin-top: auto; display: flex; align-items: center; justify-content: flex-end;
  color: var(--b-400); font-size: 13px; gap: 5px;
}
.news-card__arrow span { font-size: 12px; font-weight: 700; }

.news-loading {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; align-items: center;
  gap: 16px; padding: 56px 0; color: var(--n-500);
}
.news-loading__spinner {
  width: 40px; height: 40px;
  border: 3px solid rgba(255,255,255,.1);
  border-top-color: var(--b-400);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.news-error {
  grid-column: 1 / -1;
  text-align: center; padding: 48px; color: var(--n-500);
}
.news-error i { font-size: 36px; margin-bottom: 12px; display: block; color: var(--n-700); }

.news-footer {
  margin-top: 28px; display: flex; align-items: center;
  justify-content: space-between; flex-wrap: wrap; gap: 12px;
}
.news-update-time { font-size: 12px; color: var(--n-600); display: flex; align-items: center; gap: 7px; }
.news-update-time i { color: var(--b-400); }
.news-disclaimer { font-size: 11px; color: var(--n-700); }
@media (max-width: 640px) { .news-footer { flex-direction: column; align-items: flex-start; } }


/* ═══════════════════════════════════════════════════════════════
   30. BLOG SECTION（ブログ・お知らせ）
═══════════════════════════════════════════════════════════════ */
.blog-section { background: var(--ink-800); }

.blog-filter {
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 32px;
}
.blog-filter__btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 18px; border-radius: var(--r-xl);
  font-size: 13px; font-weight: 700; cursor: pointer;
  border: 1.5px solid rgba(255,255,255,.1);
  color: var(--n-400); background: rgba(255,255,255,.04);
  transition: all .22s var(--e-out);
}
.blog-filter__btn:hover { color: #fff; border-color: var(--b-400); background: rgba(29,92,232,.12); }
.blog-filter__btn.active {
  background: rgba(29,92,232,.22); border-color: var(--b-500);
  color: var(--b-200);
}
.blog-filter__btn i { font-size: 12px; }

.blog-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  margin-bottom: 36px; min-height: 200px;
}
@media (max-width: 1024px) { .blog-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px)  { .blog-grid { grid-template-columns: 1fr; } }

.blog-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--r-2xl);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .28s var(--e-out), box-shadow .28s, border-color .28s;
  cursor: pointer;
}
.blog-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--sh-lg);
  border-color: rgba(255,255,255,.2);
}
.blog-card[data-hidden="true"] { display: none; }

.blog-card__thumb {
  width: 100%; aspect-ratio: 16/9;
  background: linear-gradient(135deg, var(--ink-600) 0%, var(--ink-700) 100%);
  position: relative; overflow: hidden; flex-shrink: 0;
}
.blog-card__thumb img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .4s var(--e-out);
}
.blog-card:hover .blog-card__thumb img { transform: scale(1.06); }
.blog-card__thumb-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 40px; color: rgba(255,255,255,.15);
  background: linear-gradient(135deg, var(--ink-700) 0%, var(--ink-600) 100%);
}
.blog-card__cat {
  position: absolute; top: 12px; left: 12px;
  padding: 4px 11px; border-radius: 20px;
  font-size: 11px; font-weight: 800; letter-spacing: .05em;
  backdrop-filter: blur(8px);
}
.blog-card__cat--news    { background: rgba(29,92,232,.85);  color: #dce9ff; }
.blog-card__cat--column  { background: rgba(13,165,110,.85); color: #ccfff0; }
.blog-card__cat--case    { background: rgba(240,148,10,.85); color: #fff6cc; }
.blog-card__cat--faq     { background: rgba(232,53,53,.85);  color: #ffe0e0; }
.blog-card__cat--info    { background: rgba(100,100,100,.85);color: #e0e0e0; }

.blog-card__body {
  padding: 20px 22px 22px; display: flex; flex-direction: column;
  gap: 10px; flex: 1;
}
.blog-card__meta {
  display: flex; align-items: center; gap: 12px;
  font-size: 11.5px; color: var(--n-600);
}
.blog-card__date { display: flex; align-items: center; gap: 5px; }
.blog-card__tag {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; color: var(--b-300);
}
.blog-card__title {
  font-size: 15px; font-weight: 700; color: rgba(255,255,255,.9);
  line-height: 1.62; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.blog-card:hover .blog-card__title { color: #fff; }
.blog-card__excerpt {
  font-size: 13px; color: var(--n-500); line-height: 1.7;
  display: -webkit-box; -webkit-line-clamp: 3;
  -webkit-box-orient: vertical; overflow: hidden; flex: 1;
}
.blog-card__footer {
  margin-top: auto; display: flex; align-items: center;
  justify-content: space-between; padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.07);
}
.blog-card__read { font-size: 12px; font-weight: 700; color: var(--b-400); display: flex; align-items: center; gap: 5px; }
.blog-card:hover .blog-card__read { color: var(--b-300); }
.blog-card__views { font-size: 11px; color: var(--n-700); display: flex; align-items: center; gap: 4px; }

.blog-loading {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; align-items: center;
  gap: 16px; padding: 60px 0; color: var(--n-500);
}
.blog-loading__spinner {
  width: 42px; height: 42px;
  border: 3px solid rgba(255,255,255,.1);
  border-top-color: var(--b-400);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}

.blog-empty {
  grid-column: 1 / -1; text-align: center;
  padding: 64px 0; color: var(--n-500);
}
.blog-empty i { font-size: 42px; margin-bottom: 16px; display: block; color: var(--n-700); }
.blog-empty p { font-size: 15px; }

.blog-more {
  display: flex; align-items: center; justify-content: center;
  gap: 16px; flex-wrap: wrap; margin-top: 4px;
}
.blog-more__btn,
.blog-more__all {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 14px 30px; border-radius: var(--r-xl);
  font-weight: 700; font-size: 15px; cursor: pointer;
  transition: all .25s var(--e-out); text-decoration: none;
}
.blog-more__btn {
  background: var(--grad-gold); color: var(--n-900);
  box-shadow: var(--sh-gold);
}
.blog-more__btn:hover { box-shadow: var(--sh-gold2); transform: translateY(-3px); }
.blog-more__btn[style*="display: none"],
.blog-more__btn:disabled { display: none; }
.blog-more__all {
  background: rgba(255,255,255,.06); border: 1.5px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.8);
}
.blog-more__all:hover { background: rgba(255,255,255,.12); color: #fff; }


/* ── Blog Page（blog.html）専用スタイル ── */
.blog-page { background: var(--ink-900); min-height: 100vh; color: rgba(255,255,255,.88); }
.blog-page .blog-header {
  padding: calc(var(--hdr-h, 72px) + 60px) 0 60px;
  background: linear-gradient(180deg, var(--ink-950) 0%, var(--ink-900) 100%);
  text-align: center;
}
.blog-page .blog-header h1 {
  font-family: var(--f-jp); font-size: clamp(28px, 5vw, 44px);
  font-weight: 900; color: #fff; margin-bottom: 14px;
}
.blog-page .blog-header p { font-size: 15px; color: var(--n-500); }

/* ── Article Page（single post）── */
.article-hero { padding: calc(var(--hdr-h, 72px) + 48px) 0 48px; }
.article-hero__cat { margin-bottom: 14px; }
.article-hero__title {
  font-size: clamp(22px, 4vw, 38px); font-weight: 900;
  color: #fff; line-height: 1.45; margin-bottom: 20px;
}
.article-hero__meta {
  display: flex; align-items: center; gap: 20px;
  font-size: 13px; color: var(--n-500); flex-wrap: wrap;
}
.article-body {
  max-width: 800px; margin: 0 auto; padding: 0 24px;
  line-height: 1.9; font-size: 16px; color: rgba(255,255,255,.82);
}
.article-body h2 {
  font-size: clamp(18px, 3vw, 26px); font-weight: 800;
  color: #fff; margin: 48px 0 18px;
  padding-left: 16px; border-left: 4px solid var(--b-500);
}
.article-body h3 {
  font-size: clamp(16px, 2.5vw, 21px); font-weight: 700;
  color: rgba(255,255,255,.9); margin: 36px 0 14px;
}
.article-body p { margin-bottom: 20px; }
.article-body ul, .article-body ol {
  padding-left: 24px; margin-bottom: 20px; list-style: revert;
}
.article-body strong { color: var(--g-300); font-weight: 800; }
.article-body a { color: var(--b-300); text-decoration: underline; }
.article-body .article-cta {
  background: linear-gradient(135deg, var(--ink-700) 0%, var(--ink-600) 100%);
  border: 1px solid rgba(29,92,232,.3); border-radius: var(--r-2xl);
  padding: 32px; text-align: center; margin: 44px 0;
}
.article-body .article-cta h3 { margin: 0 0 16px; border: none; padding: 0; }
.article-related { max-width: 800px; margin: 60px auto; padding: 0 24px; }
.article-related h3 { font-size: 20px; font-weight: 800; color: #fff; margin-bottom: 24px; }
.article-related .blog-grid { grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 640px) { .article-related .blog-grid { grid-template-columns: 1fr; } }