/*
  TERACHA — 読みやすさの共通設定（2026-09-27）
  ─────────────────────────────────────────────────────────
  営業メールと同じ考え方にそろえる：
  ・日本語・英字ともシステムフォント（Mac/iPhoneはヒラギノとSF Pro、それ以外はNoto Sans JP）
  ・見出しは600
  ・本文は太さ400、濃い文字色、行間はゆったり、字間は控えめ
  ・色の調整はライトモードだけ。ダークモードの色は各ページの設定のまま
  各ページの <style> と glass-chrome.css のあとに読み込むこと。
*/
:root {
  --font-jp: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', Meiryo, sans-serif;
  /* 英字もシステムフォント（Mac/iPhoneはSF Pro）。見出しと英字ラベルの組み合わせをメールと同じにする */
  --font-en: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Segoe UI', 'Hiragino Sans', 'Noto Sans JP', Arial, sans-serif;
  --card: #f5f5f7;
}
:root:not([data-theme="dark"]) {
  --fg: #1d1d1f;      /* 見出し・本文 */
  --mid: #424245;     /* 本文（補足） */
  --faint: #6e6e73;   /* 注記・ラベル */
  --rule: #e5e5ea;    /* 罫線 */
}
[data-theme="dark"] { --card: #161617; }

/* 見出しはメールと同じく太め（600）・字間は詰める */
:root :is(h1, h2, h3, h4) { font-weight: 600; letter-spacing: 0.01em; }

/* 本文の字間（見出しや英字ラベルの字間は各ページのまま） */
/* 2026-09-28：Apple・OpenAI・ElevenLabsと同じく、字間は詰めて行間は1.75前後（長文の記事だけ少し広め） */
:root :is(p, li, dd, td, th, blockquote, figcaption) { letter-spacing: 0.01em; line-height: 1.75; }
:root .article-body :is(p, li) { line-height: 1.9; }

body { -webkit-font-smoothing: antialiased; }

/* ヘッダーのメニュー：タブレット幅で文字が縦に折り返さないように（2026-09-28） */
.nav-list a { white-space: nowrap; }
.nav-list a, .nav-list a:hover { letter-spacing: 0.06em !important; }   /* 字間を広げる演出はやめる */
@media (max-width: 1100px) { .nav-list { gap: 1.1rem !important; } }
/* 960px以下はメニューをハンバーガーにまとめる（メニューが増えて、900px前後で窮屈になったため） */
@media (max-width: 960px) {
  .nav-list, .nav-lang { display: none !important; }
  .hbg { display: flex !important; }
}

/* ── ヘッダー（2026-09-28）──────────────────────────────
   ・ロゴとメニューの左右の端を、本文と同じ位置（var(--px)）にそろえる（以前はロゴだけ左端から19pxで非対称だった）
   ・高さ52px、ロゴとメニューを上下中央にそろえる
   ・メニューの文字は12.5px、大文字表記（SORACHA.AI など）にはしない */
.site-header {
  height: 52px !important;
  align-items: center !important;
  /* 2026-10-02 ユーザー指定：ロゴの位置を、イベントページ（秋のふれあいひと日）のヘッダーと同じにする。
     イベントページの左右の余白は clamp(20px, 5vw, 72px)。ロゴの画像の中の余白の差（約2px）を引いて、見えている部分の左端をそろえる。
     ★本文の左端（var(--px)）とはそろわなくなる（イベントページを基準にしたため） */
  padding-left: calc(clamp(20px, 5vw, 72px) - 2px) !important;
  padding-right: calc(clamp(20px, 5vw, 72px) + 2px) !important;   /* ハンバーガーの線の右端も、イベントページと同じ位置に */
}
/* スマホ（イベントページがハンバーガーになる 760px 以下）：イベントページのヘッダーは高さ約63pxなので、同じ高さにしてロゴの上下の位置もそろえる */
@media (max-width: 760px) { .site-header { height: 62.8px !important; } }
/* ヘッダーのロゴ：イベントページのロゴ（マークと文字がセットの画像）と同じ比率に（2026-09-30 ユーザー指定）。
   マークの見た目の高さに対して、文字の高さ約45%・すき間約25%・文字の中心がマークの中心より少し下。
   画像の中の余白を差し引いて見た目で合わせた値なので、ロゴの画像を替えたら測り直す */
.site-header .logo-wrap { gap: 0; }
.site-header .logo-mark { height: 28px !important; width: auto; }
.site-header .logo-text { height: 13px !important; width: auto; margin-left: -0.9px; transform: translateY(0.7px); }
.nav-list { gap: 1.8rem !important; align-items: center !important; }
.nav-list > li > a {
  font-family: var(--font-jp) !important; font-size: 12.5px !important; font-weight: 400 !important;
  text-transform: none !important; color: var(--mid) !important;
}
.nav-list > li > a:hover { color: var(--fg) !important; }
.nav-list .nav-arrow { font-size: 0.75em; opacity: 0.5; margin-left: 1px; line-height: 0; }   /* 矢印の記号で行の高さが変わらないように */
/* ── メニューにマウスを乗せたときの動き（2026-10-02 ユーザー指定）──────────
   文字の下に細い線が左から伸び、離すと右へ抜けて消える。字間や太さは変えないので、隣の項目は動かない。
   ・サブメニューを開いている間は、親の項目の線を出したままにする
   ・キーボードで選んだとき（Tabキー）も同じ線を出す
   ・タッチの端末では出さない（指を離しても線が残るため）
   右から左に書く言語（アラビア語）は、伸びる向きを逆にする */
.nav-list > li > a, .nav-item-sub .sub-menu a { position: relative; transition: color 0.2s !important; }
.nav-list > li > a::after, .nav-item-sub .sub-menu a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -5px; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right center; transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
  pointer-events: none;
}
.nav-item-sub .sub-menu a::after { bottom: -2px; }
.nav-list > li > a:focus-visible::after, .nav-item-sub .sub-menu a:focus-visible::after,
.nav-item-sub:focus-within > a::after { transform: scaleX(1); transform-origin: left center; }
.nav-list a:focus-visible { outline: none; color: var(--fg) !important; }
.nav-list .nav-arrow { display: inline-block; transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.2s; }
.site-header .logo-wrap, .hbg { transition: opacity 0.2s; }
@media (hover: hover) {
  .nav-list > li > a:hover::after, .nav-item-sub .sub-menu a:hover::after,
  .nav-item-sub:hover > a::after { transform: scaleX(1); transform-origin: left center; }
  .nav-item-sub:hover > a { color: var(--fg) !important; }
  .nav-list > li > a:hover .nav-arrow { transform: translate(1.5px, -1.5px); opacity: 0.9; }   /* 外部リンクの矢印は、少し右上へ */
  .site-header .logo-wrap:hover, .hbg:hover { opacity: 0.65; }
}
[dir="rtl"] :is(.nav-list > li > a, .nav-item-sub .sub-menu a)::after { transform-origin: left center; }
[dir="rtl"] :is(.nav-list > li > a:focus-visible, .nav-item-sub .sub-menu a:focus-visible, .nav-item-sub:focus-within > a)::after { transform-origin: right center; }
@media (hover: hover) {
  [dir="rtl"] :is(.nav-list > li > a:hover, .nav-item-sub .sub-menu a:hover, .nav-item-sub:hover > a)::after { transform-origin: right center; }
  [dir="rtl"] .nav-list > li > a:hover .nav-arrow { transform: translate(-1.5px, -1.5px); }
}
/* ヘッダー・スマホのメニュー・フッターの文字の組み方を全ページで固定（2026-09-28）
   各ページの本文の設定（和文の詰め palt のあり・なし、本文の文字サイズ）がヘッダーに入り込み、
   ページによってメニューの幅が最大24px・高さが最大5px変わっていたため。 */
.site-header, .site-header *, .mob, .mob *, footer, footer * { font-feature-settings: normal !important; }   /* 和文の詰めは使わない（基準のWeb制作・開発ページと同じ） */
.nav-list > li { font-size: 12.5px !important; line-height: 1.75 !important; }
.nav-list > li > a { line-height: 1.75 !important; padding-top: 0 !important; padding-bottom: 0 !important; }
/* サブメニュー（オンラインサッカースクール → Top・記事・コーチ紹介）：全ページ共通の見た目 */
.nav-item-sub { position: relative; }
.nav-item-sub .sub-menu {
  position: absolute; top: 100%; left: -14px;
  margin: 0; padding: 12px 14px; list-style: none;
  display: flex; flex-direction: column; gap: 8px;
  background: var(--bg); border-radius: 14px; box-shadow: 0 12px 32px -12px rgba(0,0,0,.18);
  opacity: 0; pointer-events: none; transition: opacity 0.2s;
}
.nav-item-sub:hover .sub-menu, .nav-item-sub:focus-within .sub-menu { opacity: 1; pointer-events: auto; }
/* 親の項目の下線（文字の5px下）と重ならないように、サブメニューの箱は8px下げて出す（2026-10-02）。
   すき間でマウスが外れて閉じないように、箱の上に見えない帯（::before）を付ける。出るときは、少し上から下りてくる */
.nav-item-sub .sub-menu {
  top: calc(100% + 8px) !important; padding-top: 0.9rem !important;
  transform: translateY(-4px); transition: opacity 0.2s, transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1) !important;
}
.nav-item-sub .sub-menu::before { content: ''; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.nav-item-sub:hover .sub-menu, .nav-item-sub:focus-within .sub-menu { transform: none; }
.nav-item-sub .sub-menu a {
  font-family: var(--font-jp) !important; font-size: 12.5px !important; letter-spacing: 0.01em !important;
  text-transform: none !important; color: var(--mid) !important; text-decoration: none; white-space: nowrap;
}
.nav-item-sub .sub-menu a:hover { color: var(--fg) !important; }
/* スマホのメニューのサブメニュー */
.mob-sub-wrap { display: flex; flex-direction: column; }
.mob-sub-menu { display: none; flex-direction: column; padding-left: 1.2rem; }
.mob-sub-menu.open { display: flex; }
.mob-sub-menu a { font-size: 13px !important; text-transform: none !important; letter-spacing: 0.01em !important; color: var(--mid); text-decoration: none; padding: 0.45rem 0; }
@media (max-width: 1100px) { .nav-list { gap: 1.2rem !important; } }

/* ── フッターの言語切り替え・テーマ切り替え（2026-09-28）：ヘッダーから移した ── */
.footer-tools { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; padding: 0 0 1.4rem; }
.footer-tools .footer-lang, .footer-tools .lang-dd-btn {
  display: inline-flex; align-items: center; gap: 6px; background: none; border: none; padding: 0; cursor: pointer;
  font-family: var(--font-jp) !important; font-size: 12.5px !important; letter-spacing: 0.01em !important; font-weight: 400;
  color: var(--mid) !important; text-decoration: none; text-transform: none !important;
}
.footer-tools .footer-lang:hover, .footer-tools .lang-dd-btn:hover { color: var(--fg) !important; }
.footer-tools .lang-dd-caret { font-size: 10px; }
.footer-tools .footer-globe { flex-shrink: 0; opacity: 0.8; }
.footer-tools .footer-theme { background: none; border: none; padding: 0; cursor: pointer; color: var(--faint); line-height: 0; display: inline-flex; align-items: center; }
.footer-tools .footer-theme:hover { color: var(--fg); }
/* フッターは画面の下にあるので、言語の一覧は上に開く */
.lang-dd.in-footer .lang-dd-menu { top: auto; bottom: calc(100% + 10px); left: 0; right: auto; transform: translateY(6px); border: none; border-radius: 16px; }
.lang-dd.in-footer.open .lang-dd-menu { transform: translateY(0); }
.lang-dd.in-footer { margin-right: 0 !important; }

/* ── 細部の調整（2026-09-28）──────────────────────────────── */
/* 横からスライドして入る演出（トップページのリストなど）で、ページが横にスクロールしないように */
html, body { overflow-x: clip; }
/* フッターの文字（12px未満だった） */
footer .footer-links a, footer .footer-copy { font-size: 12px !important; letter-spacing: 0.02em !important; }
/* トップページのリスト：字間を詰める（マウスを乗せたときに広がる演出はそのまま） */
.link-row .lr-name { letter-spacing: 0.04em; }
/* ブログ：日付・著者、本文中のボタン、シェアボタン、前後の記事 */
.article-date, .card-date, .article-author { font-size: 12.5px !important; letter-spacing: 0.04em !important; }
.article-cta a {
  display: inline-block; border: none !important; border-radius: 999px !important;
  background: var(--fg) !important; color: var(--bg) !important;
  font-size: 14px !important; font-weight: 600 !important; letter-spacing: 0.02em !important; padding: 0.85rem 1.8rem !important;
  transition: opacity .2s !important;
}
.article-cta a:hover { opacity: .85; }
.share-btn { border: none !important; background: var(--card) !important; color: var(--fg) !important; border-radius: 999px !important; font-size: 12.5px !important; letter-spacing: 0.02em !important; }
.page-nav-btn { border-bottom: none !important; }
/* その他の小さすぎた文字 */
.pp-work-kind { font-size: 12px !important; }
.staff-name-en { font-size: 12px !important; }

/* ── カードの角と影（2026-09-28）──────────────────────────────
   Appleと同じく、カードは角丸28px・影なし。カードの中の小さい部品（入力欄・画像・合計の枠など）は14〜18px。
   Soracha.AIの Confidant（角ありの特別なカード）は対象外。 */
.pp-row, .lp-merit, .lp-ba-item, .lp-case, .lp-ex, .pp-est-form, .pp-est-result, .pp-fine, .lp-flow li,
.plan-card:not(.confidant), .after-card, .aic-item, .personal-card, .frow, .age-note, .coach-card, .feature-card,
.concept-item, .cf-item, .personal-staff-row, .card, .staff-item {
  border-radius: 28px !important; box-shadow: none !important;
}
.pp-row:hover, .lp-merit:hover, .lp-case:hover, .plan-card:not(.confidant):hover, .after-card:hover, .aic-item:hover,
.personal-card:hover, .frow:hover, .feature-card:hover, .concept-item:hover, .cf-item:hover, .card:hover, .staff-item:hover {
  box-shadow: none !important;
}
.pp-field input, .pp-field select, .pp-field textarea { border-radius: 14px !important; }
.pp-est-line.total, .pp-est-attached { border-radius: 18px !important; }
.card-img { border-radius: 18px !important; }
/* Soracha.AI：カードの縁を金の光が走る演出。光の枠をカードの外形（枠線の外側）にぴったり重ね、角の丸みもカードから受け継ぐ
   （枠の角が16〜18pxのままで、28pxのカードとずれていた） */
.concept-item::before { inset: -1px !important; border-radius: inherit !important; }

/* ── 横にスクロールするカード（カルーセル）の矢印（2026-09-28）：Appleの製品ページと同じく、下の右側に丸いボタン ── */
.car-nav { display: flex !important; justify-content: flex-end; gap: 12px; margin: 4px 0 0 !important; }
.car-nav[hidden] { display: none !important; }
.car-btn {
  width: 40px !important; height: 40px !important; border-radius: 50% !important; border: none !important;
  background: var(--card) !important; color: var(--fg) !important; cursor: pointer;
  display: inline-flex !important; align-items: center; justify-content: center; padding: 0 !important;
  transition: opacity .2s, background .2s;
}
.car-btn:hover { background: color-mix(in oklab, var(--card) 88%, var(--fg)) !important; }
.car-btn:disabled { opacity: 0.35; cursor: default; }

/* ── 和文のダッシュ「——」（2026-09-28）──────────────────────────
   英字フォント（SF Pro）で表示すると2本に分かれて見えるため、和文フォントで1本のつながった長い線にする。
   HTMLでは <span class="dash">——</span> と書く。 */
.dash {
  font-family: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Noto Sans JP', Meiryo, sans-serif;
  font-feature-settings: normal !important; letter-spacing: -0.04em; margin-right: 0.04em;
}

/* ── スマホのメニュー：閉じるときも、開くときと同じ動きで消える（2026-09-28）──────────
   以前は .open が外れた瞬間に display:none で消えていた。常に配置しておき、見えない間は操作も受けない。 */
.mob {
  display: flex !important; animation: none !important;
  visibility: hidden; opacity: 0; transform: translateY(-10px); pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.3s;
}
.mob.open {
  visibility: visible; opacity: 1; transform: none; pointer-events: auto;
  transition: opacity 0.38s cubic-bezier(0.16, 1, 0.3, 1), transform 0.38s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s;
}

/* ════════════════════════════════════════════════════════════════════════════════
   全ページ共通の基準（2026-09-28）── Web制作・開発ページ（/ja/web-development/）が基準
   全言語に効かせ、言語ごとの字間・行間の違いは、このファイルの最後の「各言語のバランス」で調整する。

   文字の段階（PC → スマホ）
     ページの見出し        52.5px → 32px    太さ600・行間1.25・字間0.01em
     セクションの見出し     27.2px → 20.8px  太さ600・行間1.45・字間0.02em
     大きいカードの見出し   20.8px           太さ600・行間1.5
     小見出し              17.6px           太さ600
     カードの見出し         16px             太さ600
     リード                16px             --mid・行間1.75
     本文                  15px             --mid・行間1.75
     カード内の説明         14px             --mid（3列以上の小さいカード）
     注記                  13〜14px         --faint
     英字ラベル             11.2px           大文字・字間0.08em
     価格                  23.2px           太さ600
     ボタン                15.2px           太さ600・字間0.02em・丸いボタン
   余白
     ページ上部  上230px・下77px（スマホ 80px・48px）
     セクション  上下90px（スマホ56px）、見出しの下 約20px、リードの下 35px
     カード      角丸28px・内側21〜22px・間隔12px
   和文の詰め（palt）は使わない
   ════════════════════════════════════════════════════════════════════════════════ */
:root {
  --tc-display: clamp(2rem, 4.1vw, 3.3rem);
  --tc-title: clamp(1.3rem, 3vw, 1.7rem);
  --tc-title-s: 1.3rem;
  --tc-sub: 1.1rem;
  --tc-card: 1rem;
  --tc-lead: 1rem;
  --tc-body: 0.9375rem;
  --tc-desc: 0.88rem;
  --tc-price: 1.45rem;
  --tc-btn: 0.95rem;
  --tc-sec-pad: clamp(3.5rem, 7vw, 6rem);
}

/* ── ページ上部 ── */
html[lang] .page-header { padding-top: clamp(8rem, 18vw, 16rem) !important; padding-bottom: clamp(3rem, 6vw, 8rem) !important; }
@media (max-width: 640px) { html[lang] .page-header { padding-top: 5rem !important; padding-bottom: 3rem !important; } }
html[lang] :is(.hero-eyebrow, .page-eyebrow, .hero-label) {
  font-family: var(--font-en) !important; font-size: 0.7rem !important; font-weight: 400 !important;
  letter-spacing: 0.08em !important; text-transform: uppercase !important; margin-bottom: 1.9rem !important; line-height: 1.8 !important;
}
html[lang] :is(.hero-title, .hero-title .line-inner, .page-title) {
  font-family: var(--font-jp) !important; font-size: var(--tc-display) !important; font-weight: 600 !important;
  line-height: 1.25 !important; letter-spacing: 0.01em !important;
}
html[lang] :is(.hero-title, .page-title) { margin-bottom: 1.6rem !important; }
html[lang] .hero .hero-sub {
  font-size: var(--tc-lead) !important; line-height: 1.75 !important; color: var(--mid) !important;
  max-width: 640px !important; margin-top: 0 !important; margin-bottom: 0 !important;
}
html[lang] :is(.hero-btns, .hero-cta) { margin-top: 2rem !important; gap: 12px !important; }

/* ── セクション ── */
html[lang] :is(.section, .plans-section, .confidant-section, .trust-section, .papers-section, .cta-section,
  .legal-section, .lp-sec, .pp-works, .pp-est, .pp-tables, .pp-contact) {
  padding-top: var(--tc-sec-pad) !important; padding-bottom: var(--tc-sec-pad) !important;
}
html[lang] :is(.sec-label, .section-label, .confidant-eyebrow) {
  font-family: var(--font-en) !important; font-size: 0.7rem !important; letter-spacing: 0.08em !important;
  text-transform: uppercase !important; margin-bottom: 0.9rem !important;
}
html[lang] :is(.sec-title, .section-title, .cta-title, .confidant-headline, .pp-group-head h2, .pp-contact-head h2, .ev-sec-head h2) {
  font-family: var(--font-jp) !important; font-size: var(--tc-title) !important; font-weight: 600 !important; letter-spacing: 0.02em !important;
}
html[lang] :is(.sec-title, .section-title, .cta-title, .confidant-headline) { line-height: 1.45 !important; margin-bottom: 1rem !important; }
/* 見出し → 中身、リード → 中身の間隔（基準：リードの下35px、リードがないときは見出しの下19px） */
html[lang] :is(.sec-body, .section-body, .confidant-sub, .cta-sub) { margin-bottom: 0 !important; }
html[lang] :is(.sec-body, .section-body, .confidant-sub, .cta-sub) + * { margin-top: 2.2rem !important; }
html[lang] .plans-header { margin-bottom: 2.2rem !important; }
html[lang] :is(.sec-title, .section-title) + :not(.sec-body):not(.section-body):not(p) { margin-top: 1.2rem !important; }
html[lang] :is(.sec-body, .section-body, .confidant-sub, .cta-sub) {
  font-size: var(--tc-lead) !important; line-height: 1.75 !important; color: var(--mid) !important; max-width: 640px; margin-top: 0 !important;
}
/* Soracha.AI の最後の欄は中央ぞろえ。幅を640pxに絞った箱が左に寄り、「年内リリース予定」の行だけ中央からずれていた（2026-10-02） */
html[lang] .cta-section .cta-sub { margin-left: auto !important; margin-right: auto !important; }

/* ── 見出し（カード・小見出し） ── */
html[lang] .frow__name { font-size: var(--tc-title-s) !important; font-weight: 600 !important; line-height: 1.5 !important; letter-spacing: 0.01em !important; }
html[lang] :is(.paper-title, .trust-item-title) { font-size: var(--tc-sub) !important; font-weight: 600 !important; line-height: 1.6 !important; letter-spacing: 0.01em !important; }
html[lang] :is(.aic-title, .concept-heading, .cf-title, .plan-name-ja, .card-title, .step-name, .personal-card-name) {
  font-size: var(--tc-card) !important; font-weight: 600 !important; line-height: 1.6 !important; letter-spacing: 0.01em !important;
}

/* ── 本文・説明 ── */
html[lang] :is(.staff-bio, .trust-item-text, .legal-section p, .legal-section li, .legal-table th, .legal-table td) { font-size: var(--tc-body) !important; line-height: 1.75 !important; }
html[lang] :is(.aic-desc, .cf-desc) { font-size: var(--tc-desc) !important; line-height: 1.75 !important; }

/* ── 価格 ── */
html[lang] :is(.plan-price, .after-price) { font-size: var(--tc-price) !important; font-weight: 600 !important; letter-spacing: 0.01em !important; line-height: 1.3 !important; }

/* ── ボタン（Web制作・開発ページの .lp-btn と同じ） ── */
html[lang] :is(.btn-em, .btn-gold, .btn-ghost, .btn-outline) {
  display: inline-flex !important; align-items: center; justify-content: center;
  font-family: var(--font-jp) !important; font-size: var(--tc-btn) !important; font-weight: 600 !important;
  letter-spacing: 0.02em !important; text-transform: none !important;
  padding: 0.9rem 1.8rem !important; border-radius: 999px !important; transition: opacity 0.2s !important;
}
html[lang] :is(.btn-ghost, .btn-outline) { background: var(--card) !important; color: var(--fg) !important; border: none !important; }
html[lang] :is(.btn-em, .btn-gold, .btn-ghost, .btn-outline):hover { opacity: 0.85; letter-spacing: 0.02em !important; }
html[lang] .btn-gold:hover { background: var(--gold) !important; color: var(--bg) !important; }

/* ── 英字ラベル・番号 ── */
html[lang] :is(.concept-num, .cf-icon, .plan-tag, .confidant-eyebrow, .paper-num, .cl-num, .lr-num, .personal-card-num, .aic-num) {
  font-size: 0.7rem !important; letter-spacing: 0.08em !important;
}
/* 引用・ひとこと（サッカーの「どう考え、どんな人間に…」など）：小見出しと同じ段階（半分の幅の欄に置くので） */
html[lang] :is(.philosophy-pull, .personal-desc-sub, .philosophy-quote) { font-family: var(--font-jp) !important; font-size: var(--tc-sub) !important; font-weight: 600 !important; line-height: 1.75 !important; letter-spacing: 0.01em !important; }
/* 手順（サッカー「始め方はシンプル」.steps、Web制作・開発「進め方」.lp-flow）
   カードで区切らず、番号の丸を縦の線でつないで「順番に進む」感じを出す。丸はサッカーが緑、開発ページは黒 */
html[lang] :is(.steps, .lp-flow) { display: grid; gap: 0 !important; max-width: 760px; }
html[lang] .steps { margin-top: 2.2rem !important; }
html[lang] :is(.step-row, .lp-flow li) {
  position: relative; display: grid !important; grid-template-columns: 2rem 1fr !important; gap: 0.1rem 1rem !important;
  padding: 0 0 1.9rem !important; background: none !important; border: none !important; border-radius: 0 !important;
}
html[lang] :is(.step-row, .lp-flow li):last-child { padding-bottom: 0 !important; }
/* つなぐ線（丸の下から次の丸の上まで） */
html[lang] :is(.step-row, .lp-flow li)::after {
  content: ""; position: absolute; left: calc(1rem - 0.75px); top: calc(2rem + 6px); bottom: 6px; width: 1.5px; background: #d2d2d7;
}
html[data-theme="dark"][lang] :is(.step-row, .lp-flow li)::after { background: #3a3a3c; }
html[lang] :is(.step-row, .lp-flow li):last-child::after { display: none; }
/* 番号の丸 */
html[lang] .step-num, html[lang] .lp-flow li::before {
  width: 2rem; height: 2rem; box-sizing: border-box; border-radius: 50%; background: var(--bg);
  display: flex !important; align-items: center; justify-content: center;
  font-family: var(--font-en) !important; font-size: 0.75rem !important; font-weight: 600 !important; line-height: 1 !important;
  letter-spacing: 0.02em !important; padding: 0 !important;
}
html[lang] .step-num { border: 1.5px solid var(--em); color: var(--em) !important; }
html[lang] .lp-flow li::before { border: 1.5px solid var(--fg); color: var(--fg) !important; grid-row: span 2; }
/* 見出しの1行目を丸の中心にそろえる */
html[lang] :is(.step-name, .lp-flow li b) { padding-top: 2px; margin-bottom: 0.15rem !important; line-height: 1.75 !important; }
/* カードの内側の余白（Web制作・開発ページの料金例カード .lp-ex と同じ 22px×24px）
   機能紹介の大きいカード（.frow）とAIコーチ体験の枠（.coach-card）は、画像・入力欄が入るので別 */
html[lang] :is(.aic-item, .personal-card, .age-note, .plan-card:not(.confidant), .after-card, .concept-item, .cf-item) { padding: 1.4rem 1.5rem !important; }
/* カード同士の間隔（Web制作・開発ページと同じ12px） */
html[lang] :is(.features-list, .aic-grid, .fam-grid, .plan-grid, .after-grid, .personal-staff-grid, .concept-grid, .plans-grid, .confidant-features) { gap: 12px !important; }
html[lang] .personal-staff-grid { margin-top: 2.2rem !important; }
/* よくある質問（開くと答えが出る一覧）：Appleと同じく薄い細線で区切る。質問はカードの見出しと同じ16px・600 */
html[lang] .faq-list { border-top: 1px solid var(--rule); }
html[lang] .faq-item { border-bottom: 1px solid var(--rule) !important; }
html[lang] .faq-q { font-size: var(--tc-card) !important; font-weight: 600 !important; letter-spacing: 0.01em !important; line-height: 1.6 !important; padding: 1.3rem 0 !important; }
html[lang] .faq-a-inner { font-size: var(--tc-body) !important; line-height: 1.75 !important; padding-bottom: 1.4rem !important; }
/* スマホ：ページの見出しは1行10文字まで収まる大きさに（改行しない見出しが、幅の狭いスマホで切れないように） */
@media (max-width: 640px) {
  html[lang] :is(.hero-title, .hero-title .line-inner, .page-title) { font-size: min(2rem, calc((100vw - 64px) / 10.2)) !important; }
}
/* Soracha.AIのプラン名（LIGHT・STANDARD・PREMIUM）：価格がまだないので、カードの主見出しとして大きいカードの見出しの段階に */
html[lang] .plans-grid .plan-card .plan-name { font-family: var(--font-en) !important; font-size: var(--tc-title-s) !important; font-weight: 600 !important; letter-spacing: 0.04em !important; }
/* タイトルだけのページ（論文・規約・特商法・イベント・記事一覧・コーチ紹介）：見出しのすぐ下から中身を始める
   （ページ上部の下の余白 77px のあと、セクションの上の余白を重ねない） */
html[lang] .hero + :is(.papers-section, .legal-section, .ev-main) { padding-top: 0 !important; }
html[lang] .hero + .ev-main > .ev-sec:first-child { padding-top: 0 !important; }
html[lang] .page-header + :is(.blog-grid, .staff-list) { padding-top: 0 !important; margin-top: 0 !important; }
/* 論文の一覧：区切り線がなくなって行が浮いていたので、Web制作・開発ページと同じカードに */
html[lang] .papers-header { margin-bottom: 1.2rem !important; }
html[lang] .paper-row {
  background: var(--card); border-radius: 28px; border: none !important;
  padding: 1.4rem 1.5rem !important; margin-bottom: 12px; align-items: center !important; gap: 1.2rem !important;
}
html[lang] .paper-num { margin-bottom: 0.4rem !important; }
html[lang] .paper-title { margin-bottom: 0.3rem !important; }
html[lang] .paper-btn {
  border: none !important; border-radius: 999px !important; background: var(--bg); color: var(--fg) !important;
  padding: 0.5rem 1rem !important; font-size: 0.75rem !important; letter-spacing: 0.04em !important;
}
/* 特商法などの表：行の区切りに薄い細線 */
html[lang] :is(.legal-table th, .legal-table td) { border-bottom: 1px solid var(--rule) !important; }
html[lang] .legal-table th, html[lang] .legal-table td { padding-top: 0.9rem !important; padding-bottom: 0.9rem !important; }
/* トップページ：一覧の項目名と連絡先のメールアドレスは、セクションの見出しと同じ段階（マウスを乗せたときの演出はそのまま） */
html[lang] :is(.lr-name, .contact-email) { font-family: var(--font-jp) !important; font-size: var(--tc-title) !important; font-weight: 600 !important; letter-spacing: 0.02em; }
/* ブログ記事：長い文章なので本文は16px・行間1.9（基準の「本文」より一段大きく）。記事内の見出しは段階に合わせて太さ600 */
html[lang] .article-title { font-size: clamp(1.6rem, 3.2vw, 2.4rem) !important; font-weight: 600 !important; line-height: 1.45 !important; letter-spacing: 0.01em !important; }
html[lang] .article-body { font-size: 1rem !important; }
html[lang] .article-body :is(p, li, .wp-block-preformatted) { font-size: 1rem !important; line-height: 1.9 !important; }
html[lang] .article-body h2 { font-size: var(--tc-title-s) !important; font-weight: 600 !important; line-height: 1.5 !important; letter-spacing: 0.01em !important; margin: 3rem 0 1rem !important; padding-bottom: 0 !important; }
html[lang] .article-body h3 { font-size: var(--tc-sub) !important; font-weight: 600 !important; line-height: 1.6 !important; letter-spacing: 0.01em !important; }
html[lang] .article-body h4 { font-size: var(--tc-card) !important; font-weight: 600 !important; line-height: 1.6 !important; }
@media (max-width: 640px) {
  /* Soracha.AI：スマホではロゴ（横長の「S Soracha.AI」）を見出しの下に置き、大きく見せる（横に並べると幅84pxしかなかった） */
  html[lang] .hero-title-row { flex-direction: column; align-items: flex-start; gap: 0 !important; }
  html[lang] .hero-title-row .soracha-logo-wrap { width: min(100%, 260px) !important; margin: 0 0 1.8rem !important; }
  /* トップページの一覧：番号の列があるので、項目名は小見出しの大きさに（「オンラインサッカースクール」が折り返さないように） */
  html[lang] .lr-name { font-size: min(var(--tc-sub), calc((100vw - 64px - 60px) / 15.3)) !important; }
}
/* スマホ：ページ上部の上の余白は全ページ80px（トップページだけ192pxだった） */
@media (max-width: 640px) { html[lang] .hero { padding-top: 5rem !important; } }
/* スマホ：左右の余白は全ページ var(--px)（32px）。記事一覧・コーチ紹介・ブログ記事だけ16〜24pxだった */
@media (max-width: 640px) {
  html[lang] :is(.page-header, .blog-grid, .staff-list, .article-wrap) { padding-left: var(--px) !important; padding-right: var(--px) !important; }
}

/* ════════════════════════════════════════════════════════════════════════════════
   各言語のバランス（2026-09-28）：文字の大きさ・太さ・余白は日本語と同じ。文字の性質に合わせて字間と行間だけ変える
   html:not(#_) は優先度を上げるための書き方（上の共通ルールより必ず優先させる。#_ という要素は存在しない）
   ════════════════════════════════════════════════════════════════════════════════ */
/* ラテン文字・キリル文字（英・独・西・仏・伊・葡・土・越・露）：字面が和文より低いので行間を詰め、大きい見出しは字間を少し詰める */
html:not(#_):is(:lang(en), :lang(de), :lang(es), :lang(fr), :lang(it), :lang(pt), :lang(tr), :lang(vi), :lang(ru))
  :is(.hero-title, .hero-title .line-inner, .page-title, .lp-h1) { letter-spacing: -0.015em !important; line-height: 1.12 !important; }
html:not(#_):is(:lang(en), :lang(de), :lang(es), :lang(fr), :lang(it), :lang(pt), :lang(tr), :lang(vi), :lang(ru))
  :is(.sec-title, .section-title, .cta-title, .confidant-headline, .lr-name, .contact-email, .pp-group-head h2) { letter-spacing: -0.01em !important; line-height: 1.22 !important; }
html:not(#_):is(:lang(en), :lang(de), :lang(es), :lang(fr), :lang(it), :lang(pt), :lang(tr), :lang(vi), :lang(ru))
  :is(.frow__name, .paper-title, .trust-item-title, .aic-title, .concept-heading, .cf-title, .card-title, .philosophy-quote, .plans-grid .plan-card .plan-name, .legal-section h2) { letter-spacing: 0 !important; line-height: 1.35 !important; }
html:not(#_):is(:lang(en), :lang(de), :lang(es), :lang(fr), :lang(it), :lang(pt), :lang(tr), :lang(vi), :lang(ru))
  :is(p, li, dd, td, th) { line-height: 1.6 !important; }
html:not(#_):is(:lang(en), :lang(de), :lang(es), :lang(fr), :lang(it), :lang(pt), :lang(tr), :lang(vi), :lang(ru))
  :is(.hero-sub, .section-body, .sec-body, .concept-text, .cf-desc, .trust-item-text, .plan-target, .philosophy-text, .confidant-sub, .cta-sub,
      .legal-section p, .legal-section li, .btn-gold, .btn-outline, p:not([class]), li:not([class])) { letter-spacing: 0 !important; }
/* ベトナム語：上下に付く記号が重ならないように、少しだけ行間を広く */
html:not(#_):lang(vi) :is(.hero-title, .hero-title .line-inner, .page-title) { line-height: 1.25 !important; }
html:not(#_):lang(vi) :is(.sec-title, .section-title, .cta-title, .confidant-headline, .lr-name) { line-height: 1.32 !important; }
html:not(#_):lang(vi) :is(p, li, dd, td, th) { line-height: 1.7 !important; }
/* 韓国語：語の途中で改行しない。見出しは字間をわずかに詰める */
html:lang(ko) body { word-break: keep-all; }
html:not(#_):lang(ko) :is(.hero-title, .hero-title .line-inner, .page-title, .sec-title, .section-title, .cta-title, .confidant-headline) { letter-spacing: -0.01em !important; line-height: 1.35 !important; }
html:not(#_):lang(ko) :is(p, li, dd, td, th) { line-height: 1.7 !important; }
/* 中国語：日本語と同じ（和文の基準のまま） */
/* アラビア語・ヒンディー語：字間をつけると文字のつながりや形が崩れるので、字間は付けない。行間は広め */
html:not(#_):is(:lang(ar), :lang(hi)) :is(body, body *) { letter-spacing: 0 !important; }
html:not(#_):is(:lang(ar), :lang(hi)) :is(.hero-title, .hero-title .line-inner, .page-title) { line-height: 1.4 !important; }
html:not(#_):is(:lang(ar), :lang(hi)) :is(.sec-title, .section-title, .cta-title, .confidant-headline, .lr-name) { line-height: 1.5 !important; }
html:not(#_):is(:lang(ar), :lang(hi)) :is(p, li, dd, td, th) { line-height: 1.85 !important; }
/* 中国語のダッシュ「——」：中国語のフォントで1本のつながった線に */
html:lang(zh) .dash { font-family: 'PingFang SC', 'PingFang TC', 'Hiragino Sans', 'Microsoft YaHei', 'Noto Sans SC', sans-serif; }

/* ════════════════════════════════════════════════════════════════════════════════
   トップページ（2026-09-29）：ここだけはわざと大きな余白でヒーローを見せる（ユーザーの意図）
   ・スマホでもPCでも、見出しが画面のちょうど真ん中に大きく出る
   ・画面の下の端に、一覧の最初の行（Soracha.AI）が入り込む
   ヒーローの高さ ＝ 画面の高さ − 下に見せる一覧の分（--peek）。上にも同じだけ余白を取るので、見出しの中心＝画面の中心。
   連絡先の大きな余白も元のまま（上の共通の基準は当てない）。15言語のトップページの <section class="hero hero-top"> が対象
   ════════════════════════════════════════════════════════════════════════════════ */
html[lang] .hero.hero-top {
  --peek: clamp(4.25rem, 8vw, 6.5rem);
  min-height: calc(100vh - var(--peek)) !important;
  min-height: calc(100svh - var(--peek)) !important;
  display: flex !important; flex-direction: column !important; justify-content: center !important;
  padding-top: var(--peek) !important; padding-bottom: 0 !important;
}
html[lang] .hero.hero-top .hero-title { margin-bottom: 0 !important; font-size: clamp(1.7rem, 5vw, 6rem) !important; line-height: 1.6 !important; }
html[lang] .hero.hero-top .hero-title .line-inner { font-size: inherit !important; }
@media (max-width: 640px) {
  html[lang] .hero.hero-top .hero-title { font-size: min(2rem, calc((100vw - 64px) / 10.2)) !important; }
}