/* SPARK トップページ用（spark.css から抜き出した共通部品＋トップ専用の部品）
   前半は spark.css のヘッダー・ボタン・体験レッスンなどの部品をそのまま写したもの（tools/top_page.py の build_css で作成）。
   spark.css でこれらの部品を変えたときは、このファイルにも同じ変更を入れること。 */
:root {
  --night: #14110d;      
  --night-2: #221d16;
  --ink: #1f1b14;        
  --body: #4a453b;       
  --mute: #776c52;       
  --paper: #fbf8f1;      
  --cream: #f4eedf;
  --rule: #e6dece;       
  --gold: #dcb043;       
  --gold-hover: #cfa232;
  --gold-text: #8f6c17;  
  --gold-soft: #f7edcf;
  --line: #06c755;       
  --line-hover: #05b04b;
  --on-night: #efe8d8;
  --on-night-mute: #b4aa94;
  --serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
  --sans: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", "YuGothic", Meiryo, sans-serif;
  --wrap: 1120px;
  --radius: 16px;
  --header-h: 72px;
  --shadow: 0 1px 2px rgba(31,27,20,.06), 0 8px 24px rgba(31,27,20,.07);
  color-scheme: light;
}
@media (max-width: 900px) {
  :root { --header-h: 60px; }
}
:where(.sx) img { max-width: 100%; height: auto; display: block; }
:where(.sx) a { color: inherit; }
:where(.sx) p { margin: 0; }
:where(.sx) p + p { margin-top: 1em; }
:where(.sx) :is(h1, h2, h3, h4) { margin: 0; color: var(--ink); font-family: var(--serif); font-weight: 700; line-height: 1.5; letter-spacing: .04em; word-break: auto-phrase; text-wrap: balance; }
:where(.sx) :is(p, li, dd, td) { text-wrap: pretty; }
:where(.sx) :is(ul, ol) { margin: 0; padding: 0; }
.sx :focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
.sx-skip { position: absolute; left: 12px; top: -60px; z-index: 2000; background: var(--night); color: #fff; padding: 10px 16px; border-radius: 8px; text-decoration: none; }
.sx-skip:focus { top: 12px; }
.sx-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sx-wrap { width: 100%; max-width: calc(var(--wrap) + 48px); margin: 0 auto; padding: 0 24px; }
.sx-wrap--narrow { max-width: calc(800px + 48px); }
@media (max-width: 600px) {
  .sx-wrap { padding: 0 20px; }
}
.nowrap { white-space: nowrap; }
.sx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 30px; border-radius: 999px; border: 1px solid transparent; font-family: var(--sans); font-size: 15px; font-weight: 700; letter-spacing: .06em; line-height: 1.3; text-decoration: none; text-align: center; cursor: pointer; transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.sx-btn svg { flex: none; transition: transform .2s ease; }
.sx-btn:hover svg.sx-arrow { transform: translateX(3px); }
.sx-btn--gold { background: var(--gold); color: var(--night); box-shadow: 0 6px 18px rgba(220,176,67,.28); }
.sx-btn--gold:hover { background: var(--gold-hover); }
.sx-btn--dark { background: var(--night); color: #fff; }
.sx-btn--dark:hover { background: #2c261d; }
.sx-btn--line { background: var(--line); color: #fff; }
.sx-btn--line:hover { background: var(--line-hover); }
.sx-btn--ghost { border-color: currentColor; color: var(--ink); background: transparent; }
.sx-btn--ghost:hover { background: rgba(31,27,20,.05); }
.sx-btn--ghost-light { border-color: rgba(239,232,216,.5); color: var(--on-night); background: transparent; }
.sx-btn--ghost-light:hover { border-color: var(--on-night); background: rgba(255,255,255,.06); }
.sx-btn--sm { min-height: 44px; padding: 0 20px; font-size: 14px; }
.sx-btn--block { width: 100%; }
.sx-btn small { display: block; font-size: 11px; font-weight: 500; letter-spacing: .04em; opacity: .85; }
.sx-btn .sx-btn__txt { display: flex; flex-direction: column; align-items: center; }
.sx-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.sx-more { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 700; font-size: 14px; text-decoration: none; border-bottom: 1px solid var(--gold); padding: 6px 0; }
.sx-more:hover { color: var(--gold-text); }
.sx-header { position: sticky; top: 0; z-index: 800; background: rgba(255,255,255,.96); border-bottom: 1px solid transparent; transition: border-color .2s ease, box-shadow .2s ease; }
.sx-header.is-scrolled { border-bottom-color: var(--rule); box-shadow: 0 4px 18px rgba(31,27,20,.06); }
.sx-header__in { height: var(--header-h); display: flex; align-items: center; gap: 28px; }
.sx-logo { flex: none; display: block; line-height: 0; }
.sx-logo img { width: 150px; height: 30px; }
.sx-nav { margin-left: auto; }
.sx-nav ul { list-style: none; display: flex; gap: 4px; }
.sx-nav a { display: block; padding: 10px 12px; font-size: 14.5px; font-weight: 600; color: var(--ink); text-decoration: none; letter-spacing: .06em; border-radius: 8px; position: relative; }
.sx-nav a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.sx-nav a:hover::after, .sx-nav a[aria-current="page"]::after { transform: scaleX(1); }
.sx-header__cta { flex: none; }
.sx-menu-btn { display: none; flex: none; width: 46px; height: 46px; margin-right: -8px; border: 0; background: transparent; cursor: pointer; border-radius: 10px; position: relative; color: var(--ink); }
.sx-menu-btn span { position: absolute; left: 12px; right: 12px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .25s ease, opacity .2s ease, top .25s ease; }
.sx-menu-btn span:nth-child(1) { top: 15px; }
.sx-menu-btn span:nth-child(2) { top: 22px; }
.sx-menu-btn span:nth-child(3) { top: 29px; }
.sx-menu-btn[aria-expanded="true"] span:nth-child(1) { top: 22px; transform: rotate(45deg); }
.sx-menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.sx-menu-btn[aria-expanded="true"] span:nth-child(3) { top: 22px; transform: rotate(-45deg); }
.sx-drawer { position: fixed; inset: var(--header-h) 0 0 0; z-index: 790; background: var(--night); color: var(--on-night); overflow-y: auto; padding: 8px 0 calc(32px + env(safe-area-inset-bottom, 0px)); }
.sx-drawer[hidden] { display: none; }
.sx-drawer ul { list-style: none; }
.sx-drawer__nav a { display: flex; align-items: center; justify-content: space-between; padding: 18px 0; border-bottom: 1px solid rgba(239,232,216,.12); color: var(--on-night); text-decoration: none; font-family: var(--serif); font-size: 18px; font-weight: 600; letter-spacing: .06em; }
.sx-drawer__nav a small { font-family: var(--sans); font-size: 11px; letter-spacing: .2em; color: var(--gold); font-weight: 600; }
.sx-drawer__sub { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; margin-top: 12px; }
.sx-drawer__sub a { display: block; padding: 12px 0; color: var(--on-night-mute); text-decoration: none; font-size: 14px; }
.sx-drawer__actions { display: grid; gap: 12px; margin-top: 24px; }
.sx-drawer__tel { text-align: center; color: var(--on-night-mute); font-size: 13px; margin-top: 4px; }
.sx-drawer__tel a { color: var(--on-night); font-family: var(--serif); font-size: 20px; font-weight: 700; letter-spacing: .06em; text-decoration: none; }
html.sx-lock, html.sx-lock body { overflow: hidden; }
@media (max-width: 1080px) {
  .sx-nav a { padding: 10px 9px; font-size: 14px; }
  .sx-header__in { gap: 18px; }
}
@media (max-width: 900px) {
  .sx-nav { display: none; }
  .sx-menu-btn { display: block; }
  .sx-header__cta { margin-left: auto; min-height: 40px; padding: 0 16px; font-size: 13px; box-shadow: none; }
  .sx-logo img { width: 125px; height: 25px; }
  .sx-header__in { gap: 10px; }
}
@media (min-width: 901px) {
  .sx-drawer { display: none !important; }
}
.sx-eyebrow { display: inline-flex; align-items: center; gap: 12px; font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; color: var(--gold-text); line-height: 1.4; }
.sx-eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.sx-hero .sx-eyebrow, .sx-sec--night .sx-eyebrow { color: var(--gold); }
.sx-head--center .sx-eyebrow::after { content: ""; width: 28px; height: 1px; background: currentColor; }
.sx-h2 { font-size: clamp(25px, 3.1vw, 36px); line-height: 1.5; margin-top: 14px; }
.sx-badge { display: inline-flex; align-items: center; padding: 4px 14px; border-radius: 999px; background: var(--gold); color: var(--night); font-size: 12px; font-weight: 700; letter-spacing: .12em; }
.sx-trial { background: var(--night); color: var(--on-night); position: relative; overflow: hidden; }
.sx-trial::before { content: ""; position: absolute; inset: 0; background: radial-gradient(90% 120% at 100% 100%, rgba(220,176,67,.2), transparent 60%); }
.sx-trial__in { position: relative; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 56px; align-items: center; padding-top: 96px; padding-bottom: 96px; }
.sx-trial h2 { color: #fff; font-size: clamp(28px, 3.6vw, 42px); margin-top: 16px; }
.sx-trial p { margin-top: 18px; color: var(--on-night); word-break: auto-phrase; }
.sx-trial__actions { display: grid; gap: 12px; }
.sx-trial__note { font-size: 13px; color: var(--on-night-mute); text-align: center; margin-top: 4px; }
.sx-trial__tel { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; border-radius: 999px; border: 1px solid rgba(239,232,216,.35); color: var(--on-night); text-decoration: none; font-weight: 700; letter-spacing: .06em; }
.sx-trial__tel:hover { border-color: var(--on-night); }
.sx-trial__tel b { font-family: var(--serif); font-size: 18px; letter-spacing: .08em; }
@media (max-width: 860px) {
  .sx-trial__in { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-top: 72px; padding-bottom: 72px; }
}
.sp-no-cta .sp-cta, html.sx-lock .sp-cta { display: none; }
.sx-feature__text .sx-more { margin-top: 24px; }
@media (max-width: 600px) {
  .sx-header__in .sx-lp-school + .sx-header__cta { padding: 0 12px; font-size: 12px; }
}
.sx-header__in .sx-lp-school + .sx-header__cta { margin-left: auto; }
.sx-contact-alt .sx-badge { width: max-content; }
.sx-more--light { color: var(--on-night); }
.sx-pay__card .sx-more { margin-top: 16px; align-self: flex-start; }
.sx-plan__opt .sx-btn { width: 100%; }
@keyframes sx-marquee { to { transform: translateX(-50%); } }
.sx-lp-price-card .sx-badge { position: absolute; top: -14px; left: 24px; }
.sx-trial .sx-btn--ghost-light { color: var(--on-night); }

/* =========================================================
   トップページ専用（2026年11月）
   トップはSTUDIOの再現ページのため spark.css を丸ごとは読み込まない
   （全要素の box-sizing などがSTUDIOの部分に影響するため）。
   上の部分は spark.css から必要な部品だけを自動で抜き出したもの、
   ここから下はトップにだけ置く新しい部品。
   ========================================================= */
html { scroll-padding-top: calc(var(--header-h) + 16px); }
.sx, .sx *, .sx *::before, .sx *::after { box-sizing: border-box; }
.sx { font-family: var(--sans); font-size: 16px; line-height: 1.9; letter-spacing: .02em; color: var(--body); text-align: left; -webkit-font-smoothing: antialiased; }

/* STUDIOの縦並びの枠の中でも、横幅いっぱいに広げる */
.sxt-sec { display: block; width: 100%; align-self: stretch; padding: 104px 0; }
@media (max-width: 700px) { .sxt-sec { padding: 72px 0; } }
.sxt-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px 64px; align-items: end; margin-bottom: 48px; }
.sxt-head .sx-h2 { font-size: clamp(28px, 3.4vw, 40px); }
.sxt-head__lead p { font-size: 15px; line-height: 2; }
@media (max-width: 860px) { .sxt-head { grid-template-columns: minmax(0, 1fr); gap: 18px; margin-bottom: 32px; } }

/* ---------- ヘッダー：トップでも下層ページと同じもの ---------- */
.sx-header.sx { position: sticky; }

/* ---------- 実績豊富なコーチ陣 ---------- */
.sxt-coaches { background: var(--paper); }
.sxt-coach-grid { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px 20px; }
.sxt-coach a { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.sxt-coach__img { display: block; aspect-ratio: 3 / 2; border-radius: 12px; overflow: hidden; background: var(--cream); }
.sxt-coach__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.sxt-coach a:hover .sxt-coach__img img { transform: scale(1.04); }
.sxt-coach__name { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 14px; font-family: var(--serif); font-size: 18px; font-weight: 700; line-height: 1.5; letter-spacing: .06em; color: var(--ink); }
.sxt-coach__name svg { flex: none; color: var(--gold-text); transition: transform .2s ease; }
.sxt-coach a:hover .sxt-coach__name svg { transform: translateX(3px); }
.sxt-coach__career { margin-top: 6px; font-size: 13px; line-height: 1.75; color: var(--mute); }
.sxt-coaches__more { margin-top: 48px; text-align: center; }
@media (max-width: 700px) {
  /* スマホは横にめくって見る（次のカードを少しのぞかせる） */
  .sxt-coach-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 70%; gap: 14px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding: 0 20px; margin: 0 -20px; padding: 0 20px 6px; scrollbar-width: none; }
  .sxt-coach-grid::-webkit-scrollbar { display: none; }
  .sxt-coach { scroll-snap-align: start; }
  .sxt-coaches__more { margin-top: 32px; }
  .sxt-coaches__more .sx-btn { width: 100%; }
}

/* 特別コーチ（山田コーチ） */
.sxt-special { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 56px; align-items: center; margin-top: 96px; padding: 56px 64px; border-radius: 20px; background: var(--night); color: var(--on-night); }
.sxt-special::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 90% at 100% 0%, rgba(220,176,67,.16), transparent 60%); pointer-events: none; }
.sxt-special > * { position: relative; }
/* 写真：枠の縦横比を決めて、大きい写真と右の2枚（現役時代）の上端・下端をそろえる */
.sxt-special__grid { display: grid; grid-template-columns: minmax(0, 1fr) 38%; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 12px; aspect-ratio: 9 / 8; }
.sxt-special__grid img { width: 100%; height: 100%; object-fit: cover; }
.sxt-special__main { grid-row: 1 / 3; object-position: 50% 15%; border-radius: 12px; background: var(--night-2); }
.sxt-special__old { object-position: 50% 30%; border-radius: 10px; }
.sxt-special__cap { margin-top: 10px; padding-left: 62%; font-size: 12px; line-height: 1.6; letter-spacing: .12em; color: var(--on-night-mute); }
.sxt-special .sx-eyebrow { color: var(--gold); }
.sxt-special h3 { margin-top: 14px; font-size: clamp(28px, 3vw, 36px); line-height: 1.4; color: #fff; }
.sxt-special h3 small { display: block; margin-top: 6px; font-size: 15px; font-weight: 600; letter-spacing: .12em; color: var(--gold); }
.sxt-special__lead { margin-top: 20px; }
.sxt-special__career { margin: 28px 0 0; border-top: 1px solid rgba(239,232,216,.16); }
.sxt-special__career > div { display: grid; grid-template-columns: 4.5em minmax(0, 1fr); gap: 16px; padding: 13px 0; border-bottom: 1px solid rgba(239,232,216,.16); }
.sxt-special__career dt { font-family: var(--serif); font-weight: 700; letter-spacing: .12em; color: var(--gold); }
.sxt-special__career dd { margin: 0; font-size: 15px; line-height: 1.75; }
.sxt-special__foot { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 28px; }
.sxt-special__fee { font-size: 14px; letter-spacing: .06em; }
.sxt-special__fee b { margin-left: 8px; font-family: var(--serif); font-size: 22px; letter-spacing: .04em; color: #fff; }
.sxt-special__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.sxt-special .sx-more { color: var(--on-night); }
.sxt-special .sx-more:hover { color: var(--gold); }
@media (max-width: 960px) { .sxt-special { grid-template-columns: minmax(0, 1fr); gap: 36px; padding: 40px 32px; } .sxt-special__photos { max-width: 520px; } }
@media (max-width: 600px) {
  .sxt-special { margin-top: 64px; padding: 28px 20px 32px; border-radius: 16px; }
  .sxt-special__career > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .sxt-special__actions, .sxt-special__actions .sx-btn { width: 100%; }
  .sxt-special__actions { justify-content: center; }
}

/* ---------- レッスンの様子（右から左へ流れる写真） ---------- */
.sxt-lessons { background: #fff; overflow: hidden; padding-top: 8px; padding-bottom: 48px; }
.sxt-marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.sxt-marquee__track { list-style: none; display: flex; width: max-content; margin: 0; padding: 0; animation: sx-marquee 50s linear infinite; }
.sxt-marquee:hover .sxt-marquee__track { animation-play-state: paused; }
/* 間隔は gap ではなく右側の余白で取る（ちょうど半分の位置で継ぎ目なくつながるように） */
.sxt-marquee li { flex: none; width: 316px; padding-right: 16px; }
.sxt-marquee img { width: 100%; height: auto; aspect-ratio: 600 / 647; object-fit: cover; border-radius: 14px; background: var(--cream); }
.sxt-lessons__note { margin-top: 24px; font-size: 13px; color: var(--mute); text-align: center; }
@media (max-width: 600px) { .sxt-marquee li { width: 232px; padding-right: 12px; } .sxt-marquee__track { animation-duration: 40s; } }
@media (prefers-reduced-motion: reduce) {
  .sxt-marquee { overflow-x: auto; mask-image: none; -webkit-mask-image: none; }
  .sxt-marquee__track { animation: none; }
  .sxt-marquee li[aria-hidden] { display: none; }
}

/* ---------- 体験レッスン（下層ページと同じ締めの案内） ---------- */
.sxt-trial { display: block; width: 100%; align-self: stretch; }

/* ---------- 冒頭・申込みの帯のボタン（体験レッスン／公式LINE） ---------- */
.sxt-btnrow { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.sxt-btnrow .sx-btn { min-width: 270px; }
.sp-part--top-new:has(> .sxt-btnrow) { padding: 14px 20px 0; }
@media (max-width: 600px) { .sxt-btnrow { flex-direction: column; align-items: stretch; width: 100%; max-width: 400px; margin: 0 auto; } .sxt-btnrow .sx-btn { min-width: 0; } }

/* ---------- 教室長のメッセージ ---------- */
.sxt-msg { background: var(--paper); overflow: hidden; }
.sxt-msg__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 80px; align-items: center; }
/* 写真：金色のアーチに、頭が少し上にはみ出すように立たせる */
.sxt-msg__stage { position: relative; isolation: isolate; width: 100%; max-width: 440px; margin: 0 auto; aspect-ratio: 4 / 5; }
.sxt-msg__stage::before { content: ""; position: absolute; left: 0; right: 0; top: 36%; bottom: 0; z-index: -1; border-radius: 999px 999px 0 0; background: linear-gradient(180deg, #e9c661 0%, #d8a93c 100%); }
.sxt-msg__stage::after { content: ""; position: absolute; left: 18px; right: -18px; top: calc(36% + 18px); bottom: -18px; z-index: -2; border: 1px solid rgba(220,176,67,.7); border-radius: 999px 999px 0 0; }
.sxt-msg__stage img { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; }
.sxt-msg__quote { position: relative; margin-top: 36px; padding-top: 30px; font-family: var(--serif); font-size: clamp(24px, 2.7vw, 34px); font-weight: 700; line-height: 1.55; letter-spacing: .06em; color: var(--ink); }
.sxt-msg__quote::before { content: "“"; position: absolute; left: -4px; top: -28px; font-family: var(--serif); font-size: 96px; line-height: 1; color: var(--gold); }
.sxt-msg__text { margin-top: 26px; font-size: 15.5px; line-height: 2.05; }
.sxt-msg__close { margin-top: 22px; font-family: var(--serif); font-size: 19px; font-weight: 700; letter-spacing: .06em; color: var(--gold-text); }
.sxt-msg__sign { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-top: 32px; padding-top: 22px; border-top: 1px solid var(--rule); }
.sxt-msg__sign span { font-size: 12px; letter-spacing: .22em; color: var(--mute); }
.sxt-msg__sign b { font-family: var(--serif); font-size: 28px; letter-spacing: .24em; color: var(--ink); }
.sxt-msg__sign small { font-size: 13px; font-weight: 700; letter-spacing: .08em; color: var(--gold-text); }
@media (max-width: 860px) {
  .sxt-msg__in { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .sxt-msg__stage { max-width: 320px; }
  .sxt-msg__quote { margin-top: 28px; }
}

/* ---------- 特長03：コーチ陣の現役時代の写真 ---------- */
.sp-part--top-features .spark-img-box .sxt-collage { width: 100%; aspect-ratio: 3 / 2; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 8px; transition: transform .3s ease; }
.sp-part--top-features .spark-img-box .sxt-collage img { display: block; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; border-radius: 8px; box-shadow: 0 15px 35px rgba(0,0,0,.08); transform: none; }
.sp-part--top-features .spark-img-box .sxt-collage img:first-child { grid-row: 1 / 3; }
.sp-part--top-features .spark-feature-item:hover .spark-img-box .sxt-collage img { transform: none; }
.sp-part--top-features .spark-feature-item:hover .sxt-collage { transform: translateY(-5px); }

/* ---------- 料金革命：比較の帯グラフ（背景の上に直接） ---------- */
.sp-part--top-new:has(> .sxt-compare) { overflow: visible; }
/* 幅は上の説明文（STUDIOの段落）と同じにして、左右の端をそろえる */
.sxt-compare { width: 70%; margin: 40px auto 0; padding: 0; color: var(--ink); }
@media (max-width: 768px) { .sxt-compare { width: 100%; } }
@media (max-width: 540px) { .sxt-compare { width: 80%; margin-top: 32px; } }
@media (max-width: 320px) { .sxt-compare { width: 90%; } }
.sxt-compare__cap { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; padding-bottom: 12px; border-bottom: 2px solid var(--ink); }
.sxt-compare__cap b { font-family: var(--serif); font-size: 20px; letter-spacing: .08em; }
.sxt-compare__cap span { font-size: 13px; font-weight: 600; letter-spacing: .04em; }
.sxt-compare__bars { list-style: none; margin: 0; padding: 0; }
.sxt-compare__bars li { display: grid; grid-template-columns: 5em minmax(0, 1fr) 7.5em; align-items: center; gap: 18px; padding: 12px 0; border-bottom: 1px solid rgba(31,27,20,.22); }
.sxt-compare__n { font-size: 15px; font-weight: 700; letter-spacing: .06em; }
.sxt-compare__t { height: 10px; border-radius: 999px; background: rgba(31,27,20,.1); overflow: hidden; }
.sxt-compare__t i { display: block; height: 100%; border-radius: 999px; background: rgba(31,27,20,.38); }
.sxt-compare__v { text-align: right; font-family: var(--serif); font-size: 20px; font-weight: 700; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.sxt-compare__v small { margin-left: 2px; font-size: .6em; }
.sxt-compare__bars li.is-us { padding: 16px 0; }
.sxt-compare__bars li.is-us .sxt-compare__n { font-family: var(--serif); font-size: 18px; letter-spacing: .12em; }
.sxt-compare__bars li.is-us .sxt-compare__t { height: 14px; }
.sxt-compare__bars li.is-us .sxt-compare__t i { background: var(--ink); }
.sxt-compare__bars li.is-us .sxt-compare__v { font-size: 32px; }
.sxt-compare__more { margin-top: 32px; text-align: center; }
@media (max-width: 600px) {
  .sxt-compare__bars li { grid-template-columns: 3.8em minmax(0, 1fr) 5.6em; gap: 10px; }
  .sxt-compare__n { font-size: 14px; }
  .sxt-compare__v { font-size: 16px; }
  .sxt-compare__bars li.is-us .sxt-compare__n { font-size: 15px; letter-spacing: .04em; }
  .sxt-compare__bars li.is-us .sxt-compare__v { font-size: 24px; }
  .sxt-compare__more .sx-btn { width: 100%; }
}

/* ---------- 料金革命の下：申込みの帯 ---------- */
.sxt-cta { width: 100%; align-self: stretch; background: #fff; padding: 56px 0; }
.sxt-cta__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; }
.sxt-cta__lead { font-family: var(--serif); font-size: clamp(20px, 2.3vw, 27px); font-weight: 700; letter-spacing: .06em; line-height: 1.5; color: var(--ink); word-break: auto-phrase; }
.sxt-cta__sub { margin-top: 6px; font-size: 14px; color: var(--mute); word-break: auto-phrase; }
.sxt-cta .sxt-btnrow { justify-content: flex-end; }
@media (max-width: 960px) { .sxt-cta__in { flex-direction: column; text-align: center; } .sxt-cta .sxt-btnrow { justify-content: center; } }
@media (max-width: 600px) { .sxt-cta { padding: 44px 0; } }

/* ---------- 助成カード：申請時期の注意 ---------- */
/* 幅は上の文章（STUDIOの段落）と同じにして、左端をそろえる */
.sxt-subsidy-note { width: 70%; margin: 24px auto 0; padding: 14px 18px; border: 1px solid rgba(255,255,255,.35); border-radius: 12px; background: rgba(20,17,13,.45); color: #fff; font-size: 14px; line-height: 1.8; text-align: left; }
.sxt-subsidy-note b { color: var(--gold); }
.sxt-subsidy-note { word-break: auto-phrase; }
@media (max-width: 768px) { .sxt-subsidy-note { width: 75%; } }
@media (max-width: 540px) { .sxt-subsidy-note { width: 90%; margin-top: 16px; font-size: 13px; padding: 12px 14px; } }
@media (max-width: 320px) { .sxt-subsidy-note { width: 100%; } }
.sxt-subsidy-note a { display: inline-block; margin-top: 4px; color: var(--gold); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }