/* SPARK サイト共通：STUDIOのJSが付けていた表示の補い */

/* ポップアップ（STUDIOのモーダル） */
.sp-modal { position: fixed; inset: 0; z-index: 1000; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.sp-modal[hidden] { display: none !important; }
.sp-modal > * { min-height: 100%; }
html.sp-modal-open, html.sp-modal-open body { overflow: hidden; }

/* 部品（STUDIOでは埋め込みだったセクション。デザインは /assets/css/parts/ の各ファイル）
   - 周り（STUDIO側）の文字設定を受け継がず、部品のCSSだけで見た目が決まるようにする
   - 中身は縦に並べる（部品の作りに合わせた配置）
   - 横方向のはみ出しは部品の中で切る（横スクロールが出ないように） */
.sp-part {
  all: initial;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 100%;
  position: relative;
  overflow: hidden;
  overflow: clip;
}
.sp-part script, .sp-part style, .sp-part link { display: none; }

/* フォーム送信中 */
form[data-sp-form] [aria-busy="true"] { opacity: .6; pointer-events: none; }

/* キーボード操作時のフォーカス表示 */
[data-modal-open]:focus-visible, [data-modal-close]:focus-visible { outline: 2px solid #d6bf37; outline-offset: 2px; }

/* ===== デザインの調整（移行時の見直し） ===== */

/* 見出しを語のまとまりで折り返す（「…料金設／定」のような1文字だけの改行を防ぐ） */
.sp-phrase.sp-phrase { word-break: keep-all; overflow-wrap: anywhere; }
.sp-part h1, .sp-part h2, .sp-part h3, .sp-part h4 { word-break: auto-phrase; text-wrap: balance; }

/* 画面下の申込みボタン（旧「無料体験受付中」バナーを作り直したもの）
   PC：右下に浮かぶボタン ／ スマホ：画面幅に合わせた押しやすいボタン。ページの最後では引っ込める（フッターを隠さない） */
.sp-cta { position: fixed; right: 24px; bottom: 24px; z-index: 900; transition: opacity .3s ease, transform .3s ease; }
.sp-cta.sp-cta-away { opacity: 0; transform: translateY(16px); pointer-events: none; }
.sp-no-cta .sp-cta { display: none; }   /* お問合せ・申込みページでは出さない */
html.sp-modal-open .sp-cta { opacity: 0; pointer-events: none; }   /* メニューなどのポップアップを開いている間は隠す */
.sp-cta__btn {
  display: inline-flex; align-items: center; gap: 12px; box-sizing: border-box;
  height: 56px; padding: 0 22px 0 10px; border-radius: 999px;
  background: #dcb043; color: #1a1a1a; text-decoration: none;
  font-family: "Noto Serif JP", serif; font-size: 15px; font-weight: 700; letter-spacing: .06em; line-height: 1; white-space: nowrap;
  box-shadow: 0 10px 28px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.12);
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.sp-cta__btn:hover { background: #e4bc55; transform: translateY(-2px); box-shadow: 0 14px 32px rgba(0,0,0,.22), 0 3px 8px rgba(0,0,0,.12); }
.sp-cta__btn:focus-visible { outline: 3px solid #1a1a1a; outline-offset: 3px; }
.sp-cta__badge {
  display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 999px;
  background: #1a1a1a; color: #dcb043; font-size: 12px; letter-spacing: .1em;
}
.sp-cta__arrow { flex: none; transition: transform .2s ease; }
.sp-cta__btn:hover .sp-cta__arrow { transform: translateX(3px); }
@media (max-width: 768px) {
  .sp-cta { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); display: flex; justify-content: center; }
  .sp-cta__btn { width: 100%; max-width: 440px; justify-content: center; height: 54px; padding: 0 18px 0 9px; }
  .sp-cta__label { flex: 1 1 auto; text-align: center; }
}
@media (max-width: 340px) {
  .sp-cta__btn { font-size: 14px; gap: 8px; }
  .sp-cta__badge { padding: 0 10px; font-size: 11px; }
}

/* ボタンの見た目の部分ならどこを押しても反応するように（文字の部分しか押せなかったもの） */
.sp-stretch::after { content: ""; position: absolute; inset: 0; }

/* トップ「入会までの流れ」：番号の丸の上に縦線が重なり、数字が欠けて見えていた */
.sp-part--top-flow .spark-step { z-index: 2; }

/* トップのヒーロー：一時停止ボタンが上部メニューの下に隠れないように */
.sp-part--top-hero .spkh-toggle { top: calc(var(--sp-header-h, 0px) + 16px); bottom: auto; }

/* トップ「月々0円〜」の注記：スマホで10pxと小さすぎた */
@media (max-width: 767px) {
  #__nuxt .sd[data-s-525a4c9d-c48c-41a8-b9d1-db615bdc46ce] { font-size: 11px; line-height: 1.6; }
}

/* コーチ紹介：横に並ぶカードの高さと「メッセージを読む」の位置をそろえる */
@media (min-width: 541px) {   /* 横並びになる幅だけ */
  #__nuxt .sd[data-s-e252668b-1fea-491b-bbeb-88beeb3da8e3] { align-items: stretch; }
}
#__nuxt .sd[data-s-bedefa6d-4a51-4572-a61c-f1037e6bdd93] { display: flex; flex-direction: column; }
#__nuxt .sd[data-s-8f379652-b1ef-40dd-9ce7-5c52bb37adc5] { aspect-ratio: 1565 / 1046; object-fit: cover; }   /* 写真の読み込み前から場所を確保 */
#__nuxt .sd[data-s-846d1081-1927-4101-bcac-8e6f990d81b1] { flex: 1 1 auto; display: flex; flex-direction: column; }
#__nuxt .sd[data-s-26539bbd-c227-4d89-b272-760d3276e7a1] { margin-top: auto; }

/* ===== 共通フッター（全ページ同じデザインに統一） ===== */
.sp-footer-wrap { width: 100%; flex: none; align-self: stretch; }
.StudioCanvas.sp-canvas-col { flex-direction: column; }
.sp-part.sp-part--footer .spark-footer-b-area { display: block; margin-top: 10px; font-size: 12px; color: #8c8c8c; }
.sp-part.sp-part--footer .spark-footer-b-links {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; align-items: start;
}
.sp-part.sp-part--footer .spark-footer-b-links a {
  display: inline-block; padding: 9px 0; font-size: 14px; line-height: 1.5; letter-spacing: .04em; border-bottom: 0; opacity: .85;
}
.sp-part.sp-part--footer .spark-footer-b-links a:hover { opacity: 1; color: #dcb043; border-bottom: 0; text-decoration: underline; text-underline-offset: 4px; }
.sp-part.sp-part--footer .spark-footer-b-copyright { color: #8c8c8c; }
@media (max-width: 768px) {
  /* 2列：列の幅は中の文字に合わせる（「お問合せ・体験レッスン」を折り返さず、行の高さをそろえる） */
  .sp-part.sp-part--footer .spark-footer-b-links { grid-template-columns: repeat(2, max-content); gap: 0 20px; }
  .sp-part.sp-part--footer .spark-footer-b-links a { padding: 11px 0; letter-spacing: 0; white-space: nowrap; }
}
@media (max-width: 379px) {   /* 2列が入りきらない幅は1列に */
  .sp-part.sp-part--footer .spark-footer-b-links { grid-template-columns: minmax(0, 1fr); }
}

/* ===== SPARKとは（/what-is-spark）：最初の画面 =====
   560pxの白い枠に20pxの小さな文字だけ → 大きな余白に見えていた。見出しらしい大きさにして、枠は中身に合わせる。
   文章が出てくるまで最大4.5秒待たされていたアニメーションも短く */
#__nuxt .sd[data-s-e1cb09f3-11b4-4078-aa6b-f80a5dbeab8f] {
  height: auto; flex-wrap: wrap; padding: calc(var(--sp-header-h, 64px) + 88px) 20px 40px;
}
#__nuxt .sd[data-s-71b1be0a-0e33-4454-8a97-d61fcb3f0f93],
#__nuxt .sd[data-s-8593799c-6a2e-4f48-b550-cd84e914fada] { font-size: clamp(30px, 4.2vw, 50px); line-height: 1.3; letter-spacing: .08em; font-weight: 600; }
#__nuxt .sd[data-s-e1cb09f3-11b4-4078-aa6b-f80a5dbeab8f].appear,
#__nuxt .sd[data-s-e1cb09f3-11b4-4078-aa6b-f80a5dbeab8f].appear-active { transition-delay: 0ms; transition-duration: 900ms; }
#__nuxt .sd[data-s-e1d9d488-febf-45c4-8180-44770a036f61].appear,
#__nuxt .sd[data-s-e1d9d488-febf-45c4-8180-44770a036f61].appear-active { transition-delay: 250ms; transition-duration: 900ms; }
@media (max-width: 768px) {
  #__nuxt .sd[data-s-e1cb09f3-11b4-4078-aa6b-f80a5dbeab8f] { padding: calc(var(--sp-header-h, 56px) + 56px) 20px 24px; }
}

/* ===== 細かな文字まわり ===== */
/* トップ「CONTACT ＆ TRIAL」の英字ラベル：スマホで10pxと小さすぎた */
@media (max-width: 767px) {
  #__nuxt .sd[data-s-3ee14ae6-c83d-4429-affe-c1bd16b131e0] { font-size: 11px; }
}
/* 段落の最後の行が「す。」のように1〜2文字だけにならないように */
.sp-part p { text-wrap: pretty; }
/* ブログ記事（STUDIO版）の見出し：語の途中や1文字だけで折り返さないように */
#__nuxt .richText h2, #__nuxt .richText h3, #__nuxt .richText h4 { word-break: auto-phrase; text-wrap: balance; }

/* ===== 押しやすさ ===== */
/* プラン購入の「購入に進む」：スマホで 90×20px と小さかった（購入の大事なボタン） */
#__nuxt a.sp-btn-buy {
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  min-height: 44px; padding: 10px 36px; border-radius: 6px; letter-spacing: .1em; margin: 8px 0 12px;
}
/* ポップアップの「×」（24px）と、カード内の「メッセージを読む」などの文字ボタン：見た目は変えずに押せる範囲だけ広げる（site.js で sp-hit を付ける） */
.sp-hit::after { content: ""; position: absolute; inset: -10px; }
.sp-hit--text::after { inset: -12px -8px; }
.sp-hit--menu::after { inset: -10px 0; }   /* メニューの各項目：上下の余白まで押せるように（21px → 41px） */
/* 西宮・三重のページ：ボタン内の「（LINEで30秒登録）」がスマホで10.4pxと小さかった */
@media (max-width: 767px) {
  .sp-part.sp-part--lp-mie-1 .hero-cta-wrap .btn-sub, .sp-part.sp-part--lp-nishinomiya-1 .hero-cta-wrap .btn-sub,
  .sp-part.sp-part--lp-mie-2 .hero-cta-wrap .btn-sub, .sp-part.sp-part--lp-nishinomiya-2 .hero-cta-wrap .btn-sub { font-size: 11px !important; }
}