@charset "UTF-8";
/* ==========================================================
   UUO株式会社 TOPページ
   greenpark-santo 移植版: イラスト主体のポップ&プレイフル
   ========================================================== */

/* ==========================================================
   フォント方針(2026-07 改訂 / パフォーマンス最優先)
   - 和文: OS標準フォント。ダウンロード0バイト・FOUT無し。
   - 欧文: Jost(可変)を自前配信。1ファイルで全ウェイトを賄う。
   - 手書き: Caveat。装飾用途のみなのでサブセット + preload無し。
   Google Fonts / Cloudflare Fonts は不使用(HTMLに@font-face 511本が
   インラインされ、和文だけで613KBを転送していたため撤去)。
   ========================================================== */
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 100 900; /* 可変フォント。ウェイトを増やしてもファイルは1本 */
  font-display: swap;
  src: url(../fonts/jost-var-latin.woff2) format("woff2-variations"),
       url(../fonts/jost-var-latin.woff2) format("woff2");
}
@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/caveat-bold-latin.woff2) format("woff2");
}

/* ---------- デザイントークン ---------- */
:root {
  --c-bg: #ffffff;
  --c-bg2: #f5f6f8;
  --c-ink: #292929;
  --c-ink-soft: #6b6b6b;
  --c-blue: #0099ff;
  --c-blue-deep: #1a63c9;
  --c-sky: #64b6f9;
  --c-skysoft: #dcebfa;
  --c-yellow: #ffd84d;
  --c-coral: #f45562;
  --c-mint: #40ac79;
  --c-salmon: #fa9d7b;
  --ff-hand: "Caveat", cursive;
  --ff-en: "Jost", sans-serif;
  /* 和欧混植: Jost を先頭に置き、英数字だけ Jost・和文はOS標準に落とす。
     Windows は游ゴシックが細く貧弱なため BIZ UDPGothic を優先する。 */
  --ff-jp:
    "Jost",
    "Hiragino Sans", "ヒラギノ角ゴシック",
    "BIZ UDPGothic",
    "Noto Sans JP",
    Meiryo, system-ui, sans-serif;
  --radius-sm: 14px;
  --radius: 24px;
  --radius-lg: 40px;
  --radius-pill: 999px;
  --shadow: 0 4px 14px rgba(41, 41, 41, .08), 0 14px 36px rgba(41, 41, 41, .08);
  --header-h: 76px;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-back: cubic-bezier(.34, 1.56, .64, 1);
}

/* ---------- リセット ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
body {
  font-family: var(--ff-jp);
  font-size: 16px;
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--c-ink);
  background: var(--c-bg);
  overflow-x: clip;
  /* 和文がOS標準フォントになったため antialiased は外す。
     ヒラギノに掛けると細く痩せて可読性が落ちるため。 */
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
em { font-style: normal; }
button { font-family: inherit; }

.inner { width: min(92%, 1120px); margin-inline: auto; }
.pc { display: inline; }
.sp { display: none; }
.hand { font-family: var(--ff-hand); font-weight: 700; }
.nw { display: inline-block; }

/* ---------- リビール(GSAPで表示。JS無効/reduced時は常時表示) ---------- */
html.js:not(.reduced) [data-reveal] { opacity: 0; transform: translateY(34px); }

/* ==========================================================
   ローディング
   ========================================================== */
.loading {
  position: fixed; inset: 0; z-index: 999;
  background: var(--c-bg);
  display: grid; place-items: center;
  transition: opacity .6s, visibility .6s;
}
.loading.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
html:not(.js) .loading { display: none; }
.loading__in { text-align: center; }
.loading__mark {
  width: 110px; height: 110px; margin: 0 auto;
  animation: markSpin 7s linear infinite;
}
.loading__mark svg { display: block; width: 100%; height: 100%; animation: markPulse 2.2s ease-in-out infinite; }
@keyframes markSpin { to { transform: rotate(360deg); } }
@keyframes markPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}
.loading__txt {
  margin-top: 18px;
  font-family: var(--ff-en); font-weight: 600; font-size: 17px; letter-spacing: .12em;
  color: var(--c-ink);
}

/* ==========================================================
   ヘッダー
   ========================================================== */
.header {
  position: fixed; inset: 0 0 auto; z-index: 100;
  height: var(--header-h);
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(41, 41, 41, .06);
}
.header__in {
  height: 100%;
  width: min(96%, 1320px); margin-inline: auto;
  display: flex; align-items: center; gap: 30px;
}
.header__logo { flex-shrink: 0; }
.header__logo img { width: 104px; height: auto; }
.header__nav { display: flex; gap: 30px; margin-left: auto; }
.header__nav a {
  display: flex; flex-direction: column; align-items: center;
  font-size: 13.5px; font-weight: 700; line-height: 1.45;
  padding: 2px 4px;
  transition: color .25s;
}
.header__nav a .hand { font-size: 17px; color: var(--c-blue); line-height: 1; }
.header__nav a:hover { color: var(--c-blue); }
.header__contact {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 22px 12px;
  border-radius: var(--radius-pill);
  background: var(--c-yellow); color: var(--c-ink);
  border: 2.5px solid var(--c-ink);
  box-shadow: 3px 3px 0 var(--c-ink);
  font-size: 14px; font-weight: 700;
  transition: transform .25s var(--ease-back), box-shadow .25s;
}
.header__contact:hover { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--c-ink); }

.header__menu {
  display: none;
  width: 48px; height: 48px; flex-shrink: 0;
  flex-direction: column; align-items: center; justify-content: center; gap: 5.5px;
  background: var(--c-blue); border: 2.5px solid var(--c-ink); border-radius: 50%;
  box-shadow: 3px 3px 0 var(--c-ink);
  cursor: pointer;
}
.header__menu span { width: 18px; height: 2.5px; background: #fff; border-radius: 2px; transition: transform .3s, opacity .3s; }
.header__menu[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(30deg); }
.header__menu[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.header__menu[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-30deg); }

.mobile-menu {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(255, 255, 255, .97);
  display: grid; place-items: center;
  opacity: 0; pointer-events: none;
  transition: opacity .35s;
}
.mobile-menu.is-open { opacity: 1; pointer-events: auto; }
.mobile-menu nav { display: flex; flex-direction: column; gap: 14px; text-align: center; }
.mobile-menu a { font-size: 19px; font-weight: 700; display: flex; flex-direction: column; line-height: 1.4; }
.mobile-menu a .hand { font-size: 21px; color: var(--c-blue); line-height: 1.1; }
.mobile-menu a.is-contact .hand { color: var(--c-coral); }


/* ---------- .chip: 下層 page-price.php が使用するため温存 ---------- */
.chip {
  display: inline-flex; align-items: center;
  padding: 6px 18px 7px;
  border-radius: var(--radius-pill);
  border: 2.5px solid var(--c-ink);
  background: #fff;
  font-size: 14px; font-weight: 700; line-height: 1.5;
  box-shadow: 3px 3px 0 var(--c-ink);
}
.chip--blue  { background: var(--c-sky); }
.chip--coral { background: var(--c-salmon); }
.chip--mint  { background: #7fd3a8; }

/* ==========================================================
   共通: セクション見出し
   ========================================================== */
.sec-head { position: relative; }
.sec-head__hand {
  font-size: clamp(34px, 4vw, 52px);
  color: var(--c-blue);
  rotate: -4deg;
  line-height: 1; width: fit-content;
}
.sec-head__en {
  font-family: var(--ff-en); font-weight: 700;
  font-size: clamp(40px, 5.4vw, 68px); line-height: 1.1;
  letter-spacing: .04em;
}
.sec-head__jp {
  margin-top: 4px;
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 14.5px; font-weight: 700; color: var(--c-ink-soft);
}
.sec-head__jp::before { content: ""; width: 26px; height: 3px; border-radius: 3px; background: var(--c-yellow); }
.sec-head--center { text-align: center; }
.sec-head--center .sec-head__hand { margin-inline: auto; }
.sec-head--oncolor .sec-head__hand { color: var(--c-yellow); }
.sec-head--oncolor .sec-head__en { color: #fff; }
.sec-head--oncolor .sec-head__jp { color: rgba(255, 255, 255, .9); }
.sec-head--oncolor .sec-head__jp::before { background: var(--c-yellow); }

/* ---------- ボタン ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 13px 30px 14px;
  border-radius: var(--radius-pill);
  border: 2.5px solid var(--c-ink);
  background: #fff; color: var(--c-ink);
  font-size: 15px; font-weight: 700; line-height: 1.5;
  box-shadow: 4px 4px 0 var(--c-ink);
  transition: transform .25s var(--ease-back), box-shadow .25s;
}
.btn:hover { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--c-ink); }
.btn--white { background: #fff; }
.btn--yellow { background: var(--c-yellow); }
.btn--xl { padding: 18px 44px 19px; font-size: 17px; }

/* ==========================================================
   スライダー共通(scroll-snap)
   ========================================================== */
.slider {
  display: flex; gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 30px max(4%, calc((100% - 1120px) / 2)) 10px;
  scrollbar-width: none;
}
.slider::-webkit-scrollbar { display: none; }
.slider > li { scroll-snap-align: start; flex-shrink: 0; }
.slider__nav { display: flex; justify-content: flex-end; gap: 12px; margin-top: 6px; }
.slider__btn {
  display: grid; place-items: center;
  width: 52px; height: 52px; border-radius: 50%;
  background: #fff; color: var(--c-ink);
  border: 2.5px solid var(--c-ink);
  box-shadow: 3px 3px 0 var(--c-ink);
  cursor: pointer;
  transition: transform .25s var(--ease-back), box-shadow .25s, background-color .25s;
}
.slider__btn:hover { background: var(--c-yellow); transform: translate(2px, 2px); box-shadow: 0 0 0 var(--c-ink); }


/* ==========================================================
   TOP刷新(v1.2.0): 新ロゴ D-1 RINGS 準拠
   ブランド = 墨のUU + コーラル→ブルーのOKLab粒子リング
   ※ここから下の TOP 用スタイルは .home スコープを基本とし、
     下層ページ(733行目以降)の共通クラスには手を入れない。
   ========================================================== */

/* ---------- 追加トークン ---------- */
:root {
  /* ブランドグラデーション(値は gen.py の OKLab 補間を事前計算したもの) */
  --g-coral: #f45562;
  --g-blue: #0099ff;
  --g-mid: #a986b5;
  --brand-gradient: linear-gradient(120deg, #f45562 0%, #c47a9b 33%, #898ece 66%, #0099ff 100%);
  --brand-gradient-90: linear-gradient(90deg, #f45562, #a986b5 50%, #0099ff);

  /* ニュートラル */
  --c-ink2: #232323;
  --c-line: #e6e7ea;
  --c-surface: #fbfbfc;
  --c-dark: #0b0d10;
  --c-dark2: #14171c;

  /* タイポスケール */
  --fs-display: clamp(38px, 5.6vw, 82px);
  --fs-h2: clamp(28px, 3.6vw, 46px);
  --fs-h3: clamp(19px, 2.2vw, 26px);

  /* トラッキング: 和文見出しは詰め、本文は僅かに開け、欧文ラベルは大きく開ける。
     文字が大きいほど字間は狭く見せるのが定石。 */
  --ls-display: -.02em;
  --ls-h: -.01em;
  --ls-body: .02em;
  --ls-label: .14em;

  /* リーディング */
  --lh-display: 1.15;
  --lh-h: 1.4;
  --lh-body: 1.9;

  /* 見出しウェイト: 和文はOS標準フォントに 900 が無い環境が多く、
     偽ボールドになるため 700 を上限とする。 */
  --fw-h: 700;

  /* 和文本文の適正行長(35〜45文字) */
  --measure: 40em;

  /* 余白スケール(8の倍数に統一) */
  --sp-1: 8px; --sp-2: 16px; --sp-3: 24px; --sp-4: 40px;
  --sp-5: 64px; --sp-6: 96px; --sp-7: 144px;
}

/* ---------- タイポグラフィ基本則 ---------- */
/* 見出しは約物をツメる(palt)。本文には掛けない(行長が不安定になり可読性が落ちる)。 */
h1, h2, h3, h4,
.hero__ttl, .sec-h__en, .sec-h__jp, .service-panel__ttl,
.about__ttl, .contact__ttl, .step__ttl, .page-hero__en, .page-hero__jp {
  font-feature-settings: "palt" 1;
  letter-spacing: var(--ls-h);
  line-height: var(--lh-h);
  text-wrap: balance;
  word-break: auto-phrase; /* 文節で改行(Chrome 119+。非対応環境は無視される) */
}
p { text-wrap: pretty; }

/* 短いリード文は文節で改行する(「、企/業の」のような単語途中の分断を防ぐ)。
   長い本文には掛けない — 行末が不揃いになり読みにくくなるため。 */
.hero__lead, .section-lead, .page-hero__lead, .contact__txt, .service-panel__txt {
  word-break: auto-phrase;
}

/* 中央揃えの欧文ラベルは、末尾の字間ぶん右に寄って見えるので相殺する。 */
.sec-h__en, .sec-h__jp, .sec-head__en, .hero__eyebrow, .hero__scroll {
  margin-right: calc(var(--ls-label) * -1);
}

/* 和文本文は行長を 35〜45 文字に収める(可読性への寄与が最も大きい) */
.hero__lead, .section-lead, .about__txt, .contact__txt, .service-panel__txt {
  max-width: var(--measure);
}

/* 数字は等幅に(価格・日付の桁が揃う) */
.plan-card__price, .price-off__num, .support-table__price,
.news-card__date, .notice time, .about__info dd {
  font-variant-numeric: tabular-nums;
}

/* ---------- TOP限定: ヘッダーをブランド調に(下層は現状維持) ---------- */
.home .header__nav .hand { display: none; }
.home .header__nav a {
  font-family: var(--ff-jp); font-weight: 700; font-size: 14px; letter-spacing: .04em;
  color: var(--c-ink2); padding-block: 4px;
}
.home .header__nav a:hover { color: var(--g-blue); }
.home .header__contact {
  background: var(--brand-gradient); color: #fff; border: none;
  box-shadow: 0 4px 14px rgba(244, 85, 98, .22), 0 4px 14px rgba(0, 153, 255, .16);
  font-weight: 700; letter-spacing: .02em;
}
.home .header__contact:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0, 153, 255, .28); }

/* ---------- TOP共通パーツ ---------- */
.home main { background: #fff; }

/* 見出し */
.sec-h { text-align: center; margin-bottom: var(--sp-5); }
.sec-h__en {
  font-family: var(--ff-en); font-size: clamp(30px, 4vw, 52px); font-weight: 600;
  letter-spacing: var(--ls-label); line-height: 1; color: var(--c-ink2); margin: 0;
}
.sec-h__jp {
  margin: 14px 0 0; font-size: 13.5px; font-weight: 700; letter-spacing: var(--ls-label);
  color: var(--c-ink-soft);
}
.sec-h__jp::before {
  content: ""; display: block; width: 40px; height: 3px; border-radius: 2px;
  margin: 0 auto 14px; background: var(--brand-gradient-90);
}
.sec-h--center { text-align: center; }
.sec-h--oncolor .sec-h__en { color: #fff; }
.sec-h--oncolor .sec-h__jp { color: rgba(255, 255, 255, .82); }
.sec-h--oncolor .sec-h__jp::before { background: rgba(255, 255, 255, .9); }

/* ボタン(TOP専用。既存 .btn は下層のため温存) */
.btn-g, .btn-t, .btn-o, .btn-w {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 34px; border-radius: var(--radius-pill); font-weight: 700;
  font-size: 15.5px; letter-spacing: .03em; text-decoration: none;
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), background-color .3s;
}
.btn-g {
  background: var(--brand-gradient); color: #fff;
  box-shadow: 0 6px 20px rgba(244, 85, 98, .25), 0 6px 20px rgba(0, 153, 255, .18);
}
.btn-g:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0, 153, 255, .3); }
.btn-t { color: var(--c-ink2); border: 1.5px solid var(--c-line); background: #fff; }
.btn-t:hover { border-color: var(--g-blue); color: var(--g-blue); transform: translateY(-2px); }
.btn-o { color: #fff; border: 1.5px solid rgba(255, 255, 255, .7); }
.btn-o:hover { background: #fff; color: var(--c-ink2); transform: translateY(-2px); }
.btn-w { background: #fff; color: var(--c-ink2); box-shadow: 0 10px 30px rgba(0, 0, 0, .18); }
.btn-w:hover { transform: translateY(-3px); box-shadow: 0 16px 38px rgba(0, 0, 0, .24); }

/* チップ(TOP専用) */
.chip-g {
  display: inline-block; padding: 8px 18px; border-radius: var(--radius-pill);
  font-size: 13px; font-weight: 700; letter-spacing: .04em;
  border: 1px solid var(--c-line); background: rgba(255, 255, 255, .7); color: var(--c-ink2);
}

/* ==========================================================
   HERO(粒子リング)
   ========================================================== */
.hero {
  position: relative; overflow: clip;
  min-height: 100svh; padding: calc(var(--header-h) + 40px) 0 90px;
  display: grid; place-items: center;
  background: #fff;
}
.hero__stage {
  position: relative; z-index: 2;
  width: min(92%, 1120px); margin-inline: auto;
  display: grid; place-items: center; text-align: center;
  min-height: min(78svh, 700px);
}

/* 粒子Canvasはヒーロー全面に敷く。枠で切ると入場の粒が「四角い縁から湧く」ため。
   リングの大きさ・位置は下の .hero__ring を基準にJS側が読む(CSSが唯一の情報源)。 */
.hero__fx {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1;
  pointer-events: none; display: block;
  opacity: 0; transition: opacity .6s var(--ease-out);
}
/* 実際に粒が描かれてから出す。不透明度はコピーの可読性を優先した控えめな値。 */
.hero__fx.is-ready { opacity: .62; }
.hero-b .hero__fx.is-ready { opacity: .55; }
/* 淡色地(既定)では粒のコントラストをさらに落とす。目に刺さらないことを優先する。 */
.hero-c .hero__fx.is-ready { opacity: .48; }

/* リングの寸法基準 + 静止フォールバックの置き場。
   ロゴのOと同じく「中空の輪の中にコピーが座る」構図。 */
.hero__ring {
  position: absolute; top: 50%; left: 50%; translate: -50% -50%;
  width: min(96vw, 78svh, 760px); aspect-ratio: 1; z-index: 1;
  pointer-events: none;
  opacity: .62;
}
.hero-b .hero__ring, .hero-c .hero__ring { opacity: .55; }
/* 明るい背景では粒とテキストが干渉するので、コピーの背面に地色のスクリムを敷く。
   リングの中心が抜けて見え、ロゴの「中空のO」の構図がむしろ強まる。 */
.hero-b .hero__copy::before, .hero-c .hero__copy::before {
  content: ""; position: absolute; z-index: -1; inset: -12% -16%;
}
.hero-b .hero__copy::before {
  background: radial-gradient(50% 46% at 50% 48%,
    rgba(255, 255, 255, .96) 28%, rgba(255, 255, 255, .72) 60%, rgba(255, 255, 255, 0) 100%);
}
.hero-c .hero__copy::before {
  background: radial-gradient(50% 46% at 50% 48%,
    rgba(244, 242, 240, .96) 28%, rgba(244, 242, 240, .72) 60%, rgba(244, 242, 240, 0) 100%);
}
.hero__ring-static {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
}
/* Canvasが描けたら静止フォールバックは引っ込める(Canvasは .hero__stage の兄) */
#heroCanvas.is-ready ~ .hero__stage .hero__ring-static { display: none; }

.hero__copy { position: relative; z-index: 3; }
.hero__eyebrow {
  font-family: var(--ff-en); font-size: 12px; font-weight: 500;
  letter-spacing: var(--ls-label); color: var(--c-ink-soft); margin: 0 0 22px;
}
.hero__ttl {
  font-size: var(--fs-display); font-weight: var(--fw-h); line-height: var(--lh-display);
  letter-spacing: var(--ls-display); color: var(--c-ink2); margin: 0;
  text-wrap: balance;
}
.hero__ttl em {
  font-style: normal;
  background: var(--brand-gradient-90); -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.hero__lead {
  margin: 26px auto 0; font-size: 15.5px; line-height: 2; color: var(--c-ink-soft);
}
.hero__chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 30px 0 0; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin: 38px 0 0; }

.hero__scroll {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 3;
  font-family: var(--ff-en); font-size: 10.5px; letter-spacing: var(--ls-label); color: var(--c-ink-soft);
}
.hero__scroll::after {
  content: ""; display: block; width: 1px; height: 40px; margin: 12px auto 0;
  background: linear-gradient(180deg, var(--c-ink-soft), transparent);
}

/* ---- ヒーロー背景 3案(body のクラスで切替) ---- */
/* A: ダーク(既定) */
.hero-a .hero { background: var(--c-dark); }
.hero-a .loading { background: var(--c-dark); }
.hero-a .loading__txt { color: rgba(255, 255, 255, .75); }
.hero-a .hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(60% 50% at 50% 45%, rgba(0, 153, 255, .16), transparent 70%),
              radial-gradient(45% 40% at 50% 55%, rgba(244, 85, 98, .12), transparent 70%);
}
.hero-a .hero__ttl { color: #fff; }
.hero-a .hero__eyebrow, .hero-a .hero__lead { color: rgba(255, 255, 255, .68); }
.hero-a .chip-g { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .22); color: #fff; }
.hero-a .btn-t { background: transparent; border-color: rgba(255, 255, 255, .4); color: #fff; }
.hero-a .btn-t:hover { border-color: #fff; color: #fff; background: rgba(255, 255, 255, .08); }
.hero-a .hero__scroll { color: rgba(255, 255, 255, .5); }
.hero-a .hero__scroll::after { background: linear-gradient(180deg, rgba(255, 255, 255, .5), transparent); }
/* ダーク時はロゴを白版に差し替える(色反転だと粒子の配色が壊れるため) */
.header__logo-w { display: none; }
.hero-a .header__logo img:not(.header__logo-w) { display: none; }
.hero-a .header__logo-w { display: block; }
.hero-a .header { background: rgba(11, 13, 16, .72); backdrop-filter: blur(14px); box-shadow: 0 1px 0 rgba(255, 255, 255, .08); }
.hero-a .header__nav a { color: rgba(255, 255, 255, .86); }
.hero-a .header__nav a:hover { color: #fff; }
.hero-a .header__menu { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .5); box-shadow: none; }
.hero-a .mobile-menu { background: rgba(11, 13, 16, .97); }
.hero-a .mobile-menu a { color: #fff; }

/* B: ライト(白) */
.hero-b .hero { background: #fff; }
.hero-b .hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(58% 48% at 50% 46%, rgba(0, 153, 255, .07), transparent 70%);
}

/* C: ニュートラル淡色 */
.hero-c .hero { background: #f4f2f0; }
.hero-c .hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(58% 48% at 50% 46%, rgba(244, 85, 98, .07), transparent 72%);
}
.hero-c .header { background: rgba(244, 242, 240, .86); }

/* ==========================================================
   お知らせバー
   ========================================================== */
.notice { border-block: 1px solid var(--c-line); background: var(--c-surface); }
.notice a {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 18px 0; text-decoration: none; color: var(--c-ink2); font-size: 14px;
}
.notice__tag {
  padding: 4px 12px; border-radius: var(--radius-pill); font-size: 11.5px; font-weight: 700;
  letter-spacing: .06em; background: var(--brand-gradient); color: #fff;
}
.notice time { font-family: var(--ff-en); color: var(--c-ink-soft); letter-spacing: .06em; }
.notice__txt { flex: 1; min-width: 220px; }
.notice a:hover .notice__txt { color: var(--g-blue); }

/* ==========================================================
   NEWS
   ========================================================== */
.news { padding: var(--sp-7) 0 var(--sp-6); }
.news-card { width: 320px; flex: none; scroll-snap-align: start; }
.news-card a { display: block; text-decoration: none; color: inherit; }
.news-card__img {
  margin: 0 0 18px; aspect-ratio: 16 / 10; overflow: hidden;
  border-radius: var(--radius-sm); background: var(--c-surface); border: 1px solid var(--c-line);
}
.news-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease-out); }
.news-card a:hover .news-card__img img { transform: scale(1.05); }
.news-card__ph { display: block; width: 100%; height: 100%; background:
  radial-gradient(circle at 30% 30%, rgba(244, 85, 98, .10), transparent 60%),
  radial-gradient(circle at 70% 70%, rgba(0, 153, 255, .10), transparent 60%); }
.news-card__meta { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; }
.news-card__date { font-family: var(--ff-en); font-size: 13px; letter-spacing: .06em; color: var(--c-ink-soft); }
.news-card__cate {
  margin: 0; padding: 3px 11px; border-radius: var(--radius-pill);
  font-size: 11px; font-weight: 700; letter-spacing: .04em; color: #fff;
}
.news-card__cate--notice { background: var(--g-blue); }
.news-card__cate--event  { background: var(--g-coral); }
.news-card__cate--works  { background: var(--g-mid); }
.news-card__new {
  font-family: var(--ff-en); font-size: 10.5px; font-weight: 700; letter-spacing: var(--ls-label);
  color: var(--g-coral); border: 1px solid currentColor; border-radius: var(--radius-pill); padding: 2px 8px;
}
.news-card__txt { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.7; }
.news-card a:hover .news-card__txt { color: var(--g-blue); }

/* ==========================================================
   SERVICE(ピン留めスクロール。機構は従来のまま)
   ========================================================== */
.service { position: relative; background: var(--c-dark); }
html.js:not(.reduced):not(.no-pin) .service { height: 380vh; }
.service__pin {
  position: relative; display: grid; align-content: center; gap: 34px;
  padding: 90px 0; background: var(--brand-gradient);
  transition: background-image .6s linear;
}
html.js:not(.reduced):not(.no-pin) .service__pin {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
}
.service-panel { width: min(92%, 1000px); margin-inline: auto; }
html.js:not(.reduced):not(.no-pin) .service-panel {
  position: absolute; inset: auto 0 auto 0; top: 50%; transform: translateY(-42%);
  opacity: 0; visibility: hidden; transition: opacity .5s var(--ease-out), transform .6s var(--ease-out);
}
html.js:not(.reduced):not(.no-pin) .service-panel.is-active {
  opacity: 1; visibility: visible; transform: translateY(-50%);
}
.service-panel__body { color: #fff; max-width: 640px; }
.service-panel__num {
  font-family: var(--ff-en); font-size: 13px; font-weight: 600; letter-spacing: var(--ls-label);
  color: rgba(255, 255, 255, .7); margin: 0 0 14px;
}
.service-panel__ttl { font-size: var(--fs-h2); font-weight: var(--fw-h); line-height: 1.3; margin: 0 0 20px; }
.service-panel__txt { font-size: 15.5px; line-height: 2.05; margin: 0 0 26px; color: rgba(255, 255, 255, .92); }
.service-panel__tags { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0 0 32px; padding: 0; }
.service-panel__tags li {
  padding: 6px 14px; border-radius: var(--radius-pill); font-size: 12.5px; font-weight: 700;
  background: rgba(255, 255, 255, .16); color: #fff;
}
.service__dots { display: flex; gap: 10px; justify-content: center; }
.service__dots span {
  width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .4);
  transition: background-color .3s, transform .3s;
}
.service__dots span.is-active { background: #fff; transform: scale(1.5); }
html.no-pin .service__dots, html.reduced .service__dots { display: none; }

/* ==========================================================
   FLOW(ステッパー)
   ========================================================== */
.flow { padding: var(--sp-7) 0; background: var(--c-surface); }
.steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--c-line); border: 1px solid var(--c-line); border-radius: var(--radius);
  overflow: hidden;
}
.step { background: #fff; padding: 38px 26px 34px; }
.step__num {
  font-family: var(--ff-en); font-size: 13px; font-weight: 700; letter-spacing: var(--ls-label); margin: 0 0 16px;
  background: var(--brand-gradient-90); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.step__ttl { font-size: 17px; font-weight: var(--fw-h); margin: 0 0 12px; color: var(--c-ink2); }
.step__txt { font-size: 13.5px; line-height: 1.95; color: var(--c-ink-soft); margin: 0; }

/* ==========================================================
   WORKS(実績枠)
   ========================================================== */
.works { padding: var(--sp-7) 0; }
.works__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3);
}
.work-card {
  aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden;
  border: 1px dashed var(--c-line); background: var(--c-surface);
  display: grid; place-items: center;
}
.work-card__label {
  font-family: var(--ff-en); font-size: 12px; letter-spacing: var(--ls-label); color: #b9bcc4;
}
.works__note { margin: var(--sp-4) 0 0; text-align: center; font-size: 13.5px; color: var(--c-ink-soft); }
.works__note a { color: var(--g-blue); font-weight: 700; }

/* ==========================================================
   ABOUT
   ========================================================== */
.about { padding: var(--sp-7) 0; background: var(--c-dark); color: #fff; }
.about__box { max-width: 860px; margin-inline: auto; text-align: center; }
.about .sec-h__en { color: #fff; }
.about .sec-h__jp { color: rgba(255, 255, 255, .7); }
.about__statement {
  font-size: var(--fs-h2); font-weight: var(--fw-h); line-height: 1.6; margin: 0 0 30px; text-wrap: balance;
}
.about__statement em {
  font-style: normal;
  background: var(--brand-gradient-90); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.about__txt { font-size: 15.5px; line-height: 2.1; color: rgba(255, 255, 255, .8); margin: 0 auto var(--sp-5); text-align: left; }
.about__info { margin: 0; text-align: left; border-top: 1px solid rgba(255, 255, 255, .16); }
.about__info > div {
  display: grid; grid-template-columns: 150px 1fr; gap: 20px;
  padding: 20px 0; border-bottom: 1px solid rgba(255, 255, 255, .16);
}
.about__info dt { font-size: 13px; font-weight: 700; letter-spacing: .06em; color: rgba(255, 255, 255, .6); margin: 0; }
.about__info dd { margin: 0; font-size: 14.5px; line-height: 1.9; }

/* ==========================================================
   CONTACT
   ========================================================== */
.contact { padding: var(--sp-7) 0; }
.contact__box {
  position: relative; overflow: hidden;
  border-radius: var(--radius-lg); padding: clamp(56px, 8vw, 100px) var(--sp-4);
  background: var(--brand-gradient); color: #fff; text-align: center;
}
.contact__box::before, .contact__box::after {
  content: ""; position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .12);
}
.contact__box::before { width: 320px; height: 320px; top: -120px; right: -80px; }
.contact__box::after { width: 220px; height: 220px; bottom: -100px; left: -60px; }
.contact__ttl { position: relative; font-size: var(--fs-h2); font-weight: var(--fw-h); line-height: 1.5; margin: 0 0 18px; }
.contact__txt { position: relative; font-size: 15px; line-height: 2; margin: 0 auto var(--sp-4); color: rgba(255, 255, 255, .92); }
.contact__mail { position: relative; margin: 22px 0 0; font-size: 13.5px; color: rgba(255, 255, 255, .9); }
.contact__mail a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.contact .btn-w { position: relative; }

/* ==========================================================
   TOP レスポンシブ
   ========================================================== */
@media (max-width: 1024px) {
  /* ---- 全ページ共通(下層も依存。刷新前から引き継ぐ) ---- */
  .header__nav, .header__contact { display: none; }
  .header__menu { display: flex; margin-left: auto; }

  .steps { grid-template-columns: repeat(2, 1fr); }
  .works__grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
  .service-panel__body { max-width: none; }
}

@media (max-width: 640px) {
  /* ---- 全ページ共通(下層も依存) ---- */
  :root { --header-h: 64px; }
  .pc { display: none; }
  .sp { display: inline; }
  .header__logo img { width: 88px; }
  .loading__mark { width: 84px; height: 84px; }
  .loading__txt { font-size: 15px; }

  :root { --sp-6: 72px; --sp-7: 96px; }

  .hero { min-height: auto; padding: calc(var(--header-h) + 30px) 0 70px; }
  .hero__stage { min-height: 0; }
  /* SPはコピーが縦に伸びるため、リングは見出し周りに寄せて小さめに置く */
  .hero__ring { width: min(96vw, 420px); top: 32%; }
  .hero-b .hero__ring, .hero-c .hero__ring { opacity: .45; }
  .hero-b .hero__copy::before, .hero-c .hero__copy::before { inset: -6% -20%; }
  .hero__eyebrow { font-size: 10.5px; letter-spacing: var(--ls-label); margin-bottom: 16px; }
  .hero__lead { font-size: 14.5px; line-height: 1.95; }
  .hero__cta { flex-direction: column; }
  .hero__cta .btn-g, .hero__cta .btn-t { width: 100%; }
  .hero__scroll { display: none; }

  .notice a { padding: 16px 0; gap: 10px; font-size: 13px; }
  .news-card { width: 260px; }
  .steps { grid-template-columns: 1fr; }
  .works__grid { grid-template-columns: 1fr 1fr; }
  .about__info > div { grid-template-columns: 1fr; gap: 6px; padding: 16px 0; }
  .about__txt { font-size: 14.5px; }
  .service__pin { padding: 70px 0; }
  .service-panel { margin-bottom: 54px; }
  .service-panel:last-of-type { margin-bottom: 0; }
}

/* reduced-motion: Canvasを止め静止SVGを見せる */
@media (prefers-reduced-motion: reduce) {
  .hero__fx { display: none; }
  .hero__ring-static { display: block !important; }
}

/* ==========================================================
   フッター(v1.8.0 ダークチャコール・ミニマル)
   ========================================================== */
/* 背景は波(footer__hill)と本体(footer__main)にまたがる .footer の1枚塗り。
   波SVGは上側を#fffで塗るだけ。グラデ開始を3px下げているのは、上端ぴったり
   だと白い波SVGの縁のアンチエイリアスに背景色が透けて薄い線に見えるため */
.footer {
  background: linear-gradient(0deg, #24272c, #24272c) 0 3px / 100% 100% no-repeat;
}
.footer__hill { line-height: 0; }
.footer__hill svg { width: 100%; height: clamp(50px, 8vw, 120px); }
.footer__main {
  position: relative;
  overflow: hidden;
  color: #fff;
  padding: 40px 0 44px;
}

/* Oリング: 極細1本を「気配」レベルで右下に。視差はfooter-motion.js */
.footer__ring {
  position: absolute;
  right: -6vw;
  bottom: -260px;
  width: min(500px, 52vw);
  aspect-ratio: 1;
  pointer-events: none;
}

.footer__main .inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "logo nav"
    "sns  nav"
    "addr nav"
    "copy copy";
  column-gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.footer__logo {
  grid-area: logo;
  justify-self: start;
  display: inline-block;
  transition: opacity .25s;
}
.footer__logo:hover { opacity: .85; }
.footer__logo img { width: 132px; display: block; }
.footer__nav {
  grid-area: nav;
  margin-top: 6px;
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 20px clamp(32px, 4vw, 60px);
  align-content: start;
}
.footer__nav a {
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .02em;
  color: rgba(255, 255, 255, .72);
  transition: color .25s;
}
.footer__nav a:hover { color: #fff; }
.footer__sns { grid-area: sns; margin-top: 44px; display: flex; gap: 10px; }
.footer__sns a {
  display: grid; place-items: center;
  width: 48px; min-width: 48px; height: 48px;
  background: transparent; color: rgba(255, 255, 255, .85);
  border: 1.5px solid rgba(255, 255, 255, .38);
  border-radius: 50%;
  transition: background-color .25s, color .25s, border-color .25s, transform .3s var(--ease-out);
}
.footer__sns a:hover { background: #fff; color: var(--c-ink); border-color: #fff; }
.footer__sns svg { display: block; }
.footer__addr { grid-area: addr; margin-top: 26px; font-size: 13px; color: rgba(255, 255, 255, .6); }
.footer__copy {
  grid-area: copy;
  margin-top: 44px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-family: var(--ff-en); font-weight: 500; font-size: 12.5px;
  color: rgba(255, 255, 255, .45);
}
/* ブランドブルーはこの1点だけ: コピーライト横のOドット */
.footer__copy::before {
  content: '';
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--c-blue);
  margin-right: 10px;
}
@media (max-width: 720px) {
  .footer__main .inner {
    grid-template-columns: 1fr;
    grid-template-areas: "logo" "nav" "sns" "addr" "copy";
  }
  .footer__nav { margin-top: 30px; justify-content: start; }
}


/* ==========================================================
   下層ページ共通(v1.1.0)
   ========================================================== */
.page-main { background: #fff; }
.inner--narrow { width: min(92%, 860px); margin-inline: auto; }
.section { padding: 84px 0; }
.section--tint { background: var(--c-bg2); border-radius: var(--radius-lg); margin: 0 12px; }
.section-lead { max-width: var(--measure); margin: -26px auto 44px; text-align: center; color: var(--c-ink-soft); font-weight: 500; }
.sec-head { margin-bottom: 40px; }

/* ---------- ページヒーロー帯 ---------- */
.page-hero {
  position: relative;
  padding: calc(var(--header-h) + 64px) 0 96px;
  text-align: center; color: #fff;
  overflow: clip;
}
.page-hero--blue   { background: var(--c-blue); }
.page-hero--coral  { background: var(--c-coral); }
.page-hero--mint   { background: var(--c-mint); }
.page-hero--sky    { background: var(--c-sky); }
.page-hero--yellow { background: var(--c-yellow); color: var(--c-ink); }
.page-hero__hand { font-family: var(--ff-hand); font-size: clamp(26px, 3vw, 36px); line-height: 1.1; rotate: -3deg; opacity: .95; }
.page-hero--yellow .page-hero__hand { color: var(--c-ink); }
.page-hero__en { font-family: var(--ff-en); font-weight: 700; font-size: clamp(46px, 7vw, 84px); letter-spacing: .04em; line-height: 1.1; }
.page-hero__jp { font-weight: var(--fw-h); font-size: clamp(15px, 1.8vw, 18px); display: inline-flex; align-items: center; gap: 10px; }
.page-hero__jp::before, .page-hero__jp::after { content: ""; width: 22px; height: 3px; border-radius: 3px; background: currentColor; opacity: .7; }
.page-hero__lead { margin-top: 14px; font-size: 14px; font-weight: 700; opacity: .95; }
.page-hero__deco { position: absolute; inset: 0; pointer-events: none; }
.page-hero__dot { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .22); }
.page-hero--yellow .page-hero__dot { background: rgba(41, 41, 41, .1); }
.page-hero__dot--1 { width: 130px; height: 130px; left: 6%; top: 22%; }
.page-hero__dot--2 { width: 46px; height: 46px; right: 14%; top: 30%; }
.page-hero__dot--3 { width: 22px; height: 22px; right: 24%; bottom: 30%; }
.page-hero__bird { position: absolute; left: 18%; bottom: 34%; animation: birdBob 3.4s ease-in-out infinite; }
.page-hero__bird path { stroke: rgba(255, 255, 255, .85); }
.page-hero--yellow .page-hero__bird path { stroke: var(--c-ink); }
.page-hero__wave { position: absolute; left: 0; right: 0; bottom: -1px; line-height: 0; }
.page-hero__wave svg { width: 100%; height: clamp(28px, 5vw, 70px); }

/* ---------- ボタン追加 ---------- */
.btn--ghost { background: #fff; }
.btn--primary-ink { background: var(--c-ink); color: #fff; }

/* ---------- 料金: 40%OFF帯 ---------- */
.price-off {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 18px;
  background: #fff; border: 2.5px dashed var(--c-coral); border-radius: var(--radius);
  padding: 20px 26px; margin-bottom: 44px; text-align: center;
}
.price-off__badge { background: var(--c-coral); color: #fff; font-weight: var(--fw-h); font-size: 14px; padding: 6px 16px; border-radius: var(--radius-pill); }
.price-off__num { font-weight: 900; font-size: clamp(22px, 3vw, 30px); color: var(--c-coral); }
.price-off__num small { font-size: .6em; }
.price-off__note { width: 100%; font-size: 12.5px; color: var(--c-ink-soft); }

/* ---------- 料金: プランカード ---------- */
.plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
.plan-card {
  position: relative; display: flex; flex-direction: column;
  background: #fff; border: 2.5px solid var(--c-ink); border-radius: var(--radius);
  padding: 30px 26px; box-shadow: 6px 6px 0 rgba(41, 41, 41, .12);
}
.plan-card--hero { border-color: var(--c-blue); box-shadow: 8px 8px 0 rgba(0, 153, 255, .25); background: linear-gradient(180deg, #f3faff 0%, #fff 60%); }
.plan-card__pop {
  position: absolute; top: -16px; left: 50%; translate: -50% 0; white-space: nowrap;
  background: var(--c-yellow); border: 2.5px solid var(--c-ink); border-radius: var(--radius-pill);
  font-size: 13px; font-weight: var(--fw-h); padding: 4px 18px; rotate: -2deg;
}
.plan-card__name { font-size: 20px; font-weight: var(--fw-h); }
.plan-card--hero .plan-card__name { color: var(--c-blue-deep); }
.plan-card__for { font-size: 13px; color: var(--c-ink-soft); margin: 6px 0 14px; min-height: 3em; }
.plan-card__price { margin-bottom: 16px; line-height: 1.3; }
.plan-card__price s { display: block; font-size: 14px; color: var(--c-ink-soft); font-weight: 700; }
.plan-card__price strong { font-family: var(--ff-en); font-size: clamp(30px, 3.4vw, 40px); font-weight: 700; }
.plan-card__price span { display: block; font-size: 11.5px; color: var(--c-ink-soft); }
.plan-card__list { flex: 1; display: flex; flex-direction: column; gap: 7px; margin-bottom: 22px; }
.plan-card__list li { position: relative; padding-left: 24px; font-size: 14px; font-weight: 500; }
.plan-card__list li::before {
  content: ""; position: absolute; left: 0; top: .42em; width: 15px; height: 15px; border-radius: 50%;
  background: var(--c-mint) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7 12.5 L10.5 16 L17 8.5" fill="none" stroke="white" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round"/></svg>') center/contain no-repeat;
}
.plan-card .btn { width: 100%; }
.price-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 14px; margin-top: 36px; }
.price-trust li {
  display: inline-flex; align-items: center; gap: 7px;
  background: #fff; border: 2px solid var(--c-mint); color: var(--c-ink);
  font-size: 13.5px; font-weight: 700; padding: 7px 16px; border-radius: var(--radius-pill);
}
.price-trust li::before { content: "✓"; color: var(--c-mint); font-weight: 900; }
.price-note { margin-top: 18px; font-size: 12.5px; color: var(--c-ink-soft); text-align: center; }

/* ---------- 料金: 月額サポート比較表 ---------- */
.support-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius); }
.support-table { width: 100%; min-width: 680px; border-collapse: separate; border-spacing: 0; background: #fff; border: 2.5px solid var(--c-ink); border-radius: var(--radius); overflow: hidden; }
.support-table th, .support-table td { padding: 13px 14px; text-align: center; font-size: 14px; border-top: 1.5px solid #e8e8e8; }
.support-table thead th { border-top: none; background: var(--c-skysoft); font-weight: var(--fw-h); font-size: 15px; vertical-align: top; padding: 18px 14px 14px; }
.support-table thead th.is-hero { background: var(--c-blue); color: #fff; }
.support-table__price { display: block; font-family: var(--ff-en); font-weight: 700; font-size: 24px; margin-top: 4px; }
.support-table__price small { font-size: 12px; font-family: var(--ff-jp); }
.support-table__for { display: block; font-size: 11px; font-weight: 500; opacity: .85; }
.support-table tbody th { text-align: left; font-weight: 700; background: #fafafa; width: 32%; }
.support-table tbody td { color: var(--c-mint); font-weight: var(--fw-h); }
.support-table tbody td.is-hero { background: #f3faff; }
.support-table tbody tr.is-diff td { color: var(--c-ink); font-weight: var(--fw-h); background: #fff8e1; }
.support-table tbody tr.is-diff td.is-hero { background: #ffefb3; }

/* ---------- 料金: コンサル相談ボックス ---------- */
.consul-box {
  background: #fff; border: 2.5px solid var(--c-ink); border-radius: var(--radius);
  box-shadow: 6px 6px 0 rgba(41, 41, 41, .12);
  padding: clamp(26px, 4vw, 44px); text-align: center;
}
.consul-box__txt { max-width: 640px; margin: 0 auto 20px; text-align: left; }
.consul-box__points { display: flex; flex-direction: column; gap: 10px; max-width: 560px; margin: 0 auto 26px; }
.consul-box__points li { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 700; text-align: left; }
.consul-box__points .chip { flex-shrink: 0; }
.consul-box__note { margin-top: 14px; font-size: 12.5px; color: var(--c-ink-soft); }

/* ---------- FAQ ---------- */
.faq-group { margin-bottom: 44px; }
.faq-group__title { display: flex; align-items: center; gap: 10px; font-size: 19px; font-weight: var(--fw-h); margin-bottom: 16px; }
.faq-group__dot { width: 14px; height: 14px; border-radius: 50%; }
.faq-group__dot--blue { background: var(--c-blue); }
.faq-group__dot--coral { background: var(--c-coral); }
.faq-group__dot--mint { background: var(--c-mint); }
.faq-group__dot--yellow { background: var(--c-yellow); }
.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq-item {
  background: #fff; border: 2.5px solid var(--c-ink); border-radius: var(--radius-sm);
  overflow: clip; transition: box-shadow .25s;
}
.faq-item[open] { box-shadow: 5px 5px 0 rgba(41, 41, 41, .12); }
.faq-item summary {
  position: relative; cursor: pointer; list-style: none;
  padding: 15px 52px 15px 48px; font-weight: 700; font-size: 15px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before {
  content: "Q"; position: absolute; left: 14px; top: 14px;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--c-blue); color: #fff;
  font-family: var(--ff-en); font-weight: 700; font-size: 14px;
  display: grid; place-items: center;
}
.faq-item summary::after {
  content: ""; position: absolute; right: 18px; top: 50%; translate: 0 -50%;
  width: 12px; height: 12px;
  border-right: 3px solid var(--c-ink); border-bottom: 3px solid var(--c-ink);
  rotate: 45deg; transition: rotate .25s; margin-top: -3px;
}
.faq-item[open] summary::after { rotate: 225deg; margin-top: 3px; }
.faq-item__a { padding: 2px 20px 18px 48px; font-size: 14.5px; color: #3d3d3d; }
.faq-item__a strong { background: linear-gradient(transparent 62%, var(--c-yellow) 62%); font-weight: 700; }
.faq-item__a a { color: var(--c-blue-deep); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- FLOW タイムライン ---------- */
.timeline { position: relative; display: flex; flex-direction: column; gap: 30px; }
.timeline::before { content: ""; position: absolute; left: 31px; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: repeating-linear-gradient(180deg, var(--c-ink) 0 8px, transparent 8px 16px); opacity: .25; }
.timeline__item { position: relative; display: flex; gap: 22px; }
.timeline__num {
  position: relative; z-index: 1; flex-shrink: 0;
  width: 62px; height: 62px; border-radius: 50%;
  border: 3px solid var(--c-ink); background: #fff;
  display: grid; place-items: center;
  font-family: var(--ff-en); font-weight: 700; font-size: 19px;
  box-shadow: 4px 4px 0 rgba(41, 41, 41, .14);
}
.timeline__item--blue .timeline__num   { background: var(--c-blue); color: #fff; }
.timeline__item--coral .timeline__num  { background: var(--c-coral); color: #fff; }
.timeline__item--mint .timeline__num   { background: var(--c-mint); color: #fff; }
.timeline__item--yellow .timeline__num { background: var(--c-yellow); }
.timeline__item--sky .timeline__num    { background: var(--c-sky); color: #fff; }
.timeline__body {
  flex: 1; background: #fff; border: 2.5px solid var(--c-ink); border-radius: var(--radius);
  padding: 22px 24px; box-shadow: 6px 6px 0 rgba(41, 41, 41, .1);
}
.timeline__head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 8px; }
.timeline__title { font-size: 19px; font-weight: var(--fw-h); }
.timeline__free { background: var(--c-coral); color: #fff; font-size: 12px; font-weight: var(--fw-h); padding: 3px 12px; border-radius: var(--radius-pill); }
.timeline__days { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; color: var(--c-ink-soft); }
.timeline__desc { font-size: 14.5px; margin-bottom: 14px; }
.timeline__roles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.timeline__role { border-radius: var(--radius-sm); padding: 12px 14px; font-size: 13px; }
.timeline__role p { line-height: 1.7; }
.timeline__role--you { background: #fff8e1; }
.timeline__role--uuo { background: var(--c-skysoft); }
.timeline__role-label { display: block; font-size: 11.5px; font-weight: var(--fw-h); margin-bottom: 3px; }
.timeline__role--you .timeline__role-label { color: #b07b00; }
.timeline__role--uuo .timeline__role-label { color: var(--c-blue-deep); }

.flow-note { margin-top: 48px; text-align: center; background: var(--c-bg2); border-radius: var(--radius); padding: 30px 24px 34px; }
.flow-note__hand { font-family: var(--ff-hand); font-size: 30px; color: var(--c-blue); rotate: -2deg; line-height: 1.1; margin-bottom: 6px; }
.flow-note p:not(.flow-note__hand) { font-weight: 700; }

/* ---------- 会社概要 ---------- */
.ceo-card { display: flex; gap: 26px; align-items: flex-start; }
.ceo-card__icon { flex-shrink: 0; }
.ceo-card__icon img { width: 104px; height: 104px; border-radius: 50%; object-fit: cover; border: 3px solid var(--c-ink); box-shadow: 4px 4px 0 rgba(41, 41, 41, .14); display: block; }
.ceo-card__body { background: #fff; border: 2.5px solid var(--c-ink); border-radius: var(--radius); padding: clamp(22px, 3.5vw, 36px); box-shadow: 6px 6px 0 rgba(41, 41, 41, .1); position: relative; }
.ceo-card__body::before {
  content: ""; position: absolute; left: -14px; top: 34px;
  width: 22px; height: 22px; background: #fff;
  border-left: 2.5px solid var(--c-ink); border-bottom: 2.5px solid var(--c-ink);
  rotate: 45deg;
}
.ceo-card__lead { font-size: clamp(17px, 2.2vw, 21px); font-weight: var(--fw-h); line-height: 1.7; margin-bottom: 14px; }
.ceo-card__body p:not(.ceo-card__lead):not(.ceo-card__sign) { font-size: 14.5px; margin-bottom: 12px; color: #3d3d3d; }
.ceo-card__body strong { background: linear-gradient(transparent 62%, var(--c-yellow) 62%); }
.ceo-card__sign { text-align: right; font-size: 14px; margin-top: 18px; }
.ceo-card__sign strong { font-size: 17px; background: none; }

.info-table { background: #fff; border: 2.5px solid var(--c-ink); border-radius: var(--radius); overflow: hidden; }
.info-table > div { display: grid; grid-template-columns: 160px 1fr; }
.info-table > div + div { border-top: 1.5px dashed #d9d9d9; }
.info-table dt { background: var(--c-skysoft); font-weight: var(--fw-h); font-size: 14px; padding: 14px 18px; }
.info-table dd { padding: 14px 18px; font-size: 14.5px; }
.info-table a { color: var(--c-blue-deep); text-decoration: underline; text-underline-offset: 2px; }

.access-map { border: 2.5px solid var(--c-ink); border-radius: var(--radius); overflow: hidden; box-shadow: 6px 6px 0 rgba(41, 41, 41, .1); }
.access-map iframe { display: block; width: 100%; height: 380px; border: 0; }
.access-note { margin-top: 16px; text-align: center; font-size: 14px; color: var(--c-ink-soft); font-weight: 500; }

/* ---------- お問い合わせフォーム ---------- */
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.form-alert {
  background: #fdecee; border: 2px solid var(--c-coral); color: #c2233a;
  border-radius: var(--radius-sm); padding: 14px 18px; font-size: 14px; font-weight: 700; margin-bottom: 24px;
}
.form-alert a { text-decoration: underline; }
.contact-form { display: flex; flex-direction: column; gap: 24px; max-width: 680px; margin-inline: auto; }
.contact-form__row { border: 0; }
.contact-form__label { display: flex; align-items: center; gap: 8px; font-weight: var(--fw-h); font-size: 14.5px; margin-bottom: 8px; }
.req, .opt { font-size: 11px; font-weight: var(--fw-h); padding: 2px 10px; border-radius: var(--radius-pill); }
.req { background: var(--c-coral); color: #fff; }
.opt { background: #e8e8e8; color: var(--c-ink-soft); }
.contact-form__input {
  width: 100%; font: inherit; font-size: 15px; color: var(--c-ink);
  background: #fff; border: 2.5px solid var(--c-ink); border-radius: var(--radius-sm);
  padding: 13px 16px; transition: box-shadow .2s, border-color .2s;
}
.contact-form__input:focus { outline: none; border-color: var(--c-blue); box-shadow: 4px 4px 0 rgba(0, 153, 255, .25); }
.contact-form__input::placeholder { color: #b5b5b5; }
.contact-form__textarea { resize: vertical; min-height: 140px; }
.topic-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.topic-chips label { cursor: pointer; }
.topic-chips input { position: absolute; opacity: 0; pointer-events: none; }
.topic-chips span {
  display: inline-block; padding: 9px 18px; border-radius: var(--radius-pill);
  border: 2.5px solid var(--c-ink); background: #fff; font-size: 14px; font-weight: 700;
  transition: background .2s, color .2s, box-shadow .2s;
}
.topic-chips input:checked + span { background: var(--c-ink); color: #fff; box-shadow: 3px 3px 0 rgba(41, 41, 41, .25); }
.topic-chips input:focus-visible + span { outline: 3px solid var(--c-blue); outline-offset: 2px; }
.contact-form__submit { text-align: center; }
.contact-form__submit .btn { min-width: min(100%, 360px); }
.contact-form__note { margin-top: 14px; font-size: 12.5px; color: var(--c-ink-soft); }
.contact-form__note a { text-decoration: underline; text-underline-offset: 2px; }

.form-done { text-align: center; max-width: 560px; margin-inline: auto; }
.form-done svg { margin: 0 auto 18px; }
.form-done__ttl { font-size: clamp(24px, 3.4vw, 32px); font-weight: var(--fw-h); margin-bottom: 10px; }
.form-done__txt { font-size: 14.5px; color: #3d3d3d; margin-bottom: 14px; }
.form-done__txt a { color: var(--c-blue-deep); text-decoration: underline; }
.form-done__steps { counter-reset: done; text-align: left; display: flex; flex-direction: column; gap: 10px; background: var(--c-bg2); border-radius: var(--radius); padding: 22px 24px; margin-bottom: 22px; }
.form-done__steps li { counter-increment: done; position: relative; padding-left: 36px; font-size: 14px; font-weight: 500; }
.form-done__steps li::before {
  content: counter(done); position: absolute; left: 0; top: .1em;
  width: 25px; height: 25px; border-radius: 50%; background: var(--c-blue); color: #fff;
  font-family: var(--ff-en); font-weight: 700; font-size: 14px; display: grid; place-items: center;
}

/* ---------- プライバシーポリシー ---------- */
.policy-summary {
  background: #fff8e1; border: 2.5px dashed var(--c-yellow); border-radius: var(--radius);
  padding: 24px 28px; margin-bottom: 40px;
}
.policy-summary__hand { font-family: var(--ff-hand); font-size: 28px; color: #b07b00; rotate: -2deg; line-height: 1.1; margin-bottom: 8px; }
.policy-summary ul { display: flex; flex-direction: column; gap: 8px; }
.policy-summary li { position: relative; padding-left: 24px; font-size: 14.5px; font-weight: 500; }
.policy-summary li::before { content: "✓"; position: absolute; left: 2px; color: var(--c-mint); font-weight: var(--fw-h); }
.policy-summary strong { background: linear-gradient(transparent 62%, var(--c-yellow) 62%); }
.policy-body h2 { font-size: 17px; font-weight: var(--fw-h); margin: 32px 0 8px; padding-left: 14px; border-left: 5px solid var(--c-blue); border-radius: 2px; }
.policy-body p, .policy-body li { font-size: 14.5px; color: #3d3d3d; }
.policy-body ul { list-style: disc; padding-left: 22px; }
.policy-body a { color: var(--c-blue-deep); text-decoration: underline; }
.policy-body__date { margin-top: 36px; text-align: right; font-size: 13px; color: var(--c-ink-soft); }

/* ---------- 下層レスポンシブ ---------- */
@media (max-width: 1024px) {
  .plan-grid { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; gap: 30px; }
  .plan-card__for { min-height: 0; }
}
@media (max-width: 768px) {
  .section { padding: 60px 0; }
  .section--tint { margin: 0 8px; }
  .page-hero { padding: calc(var(--header-h) + 44px) 0 72px; }
  .timeline::before { left: 24px; }
  .timeline__item { gap: 14px; }
  .timeline__num { width: 48px; height: 48px; font-size: 16px; }
  .timeline__roles { grid-template-columns: 1fr; }
  .ceo-card { flex-direction: column; align-items: center; }
  .ceo-card__body::before { left: 50%; top: -14px; margin-left: -11px; rotate: 135deg; }
  .info-table > div { grid-template-columns: 1fr; }
  .info-table dt { padding: 10px 18px 4px; background: none; color: var(--c-blue-deep); font-size: 12.5px; }
  .info-table dd { padding: 0 18px 12px; }
  .access-map iframe { height: 280px; }
}