/* =========================================================================
   new-design/chrome.css
   ヘッダー・フッター（サイト全体の「枠」）専用CSS。
   ブログ記事・アーカイブを含むサイト全体で常時読み込まれる
   （functions.php の wp_enqueue_scripts で無条件 enqueue）。

   本文レイアウト用のCSS（is-style-* や .prose 等、下層ページの
   コンテンツ部分）は引き続き styles.css 側に残し、
   page-templates/newdesign.php・ブログ記事・アーカイブでのみ読み込む。
   styles.css にあった body/a/h1-6/ul などの要素まるごとのリセットは
   ここには含めていない（含めると、まだ移行していない既存ページの
   本文の見た目まで変わってしまうため）。
   ========================================================================= */

:root {

  --ink:        #1d2333;
  --ink-soft:   #5c6478;
  --ink-faint:  #8a92a6;

  --pink:       #d9799f;
  --pink-deep:  #a45c81;
  --pink-soft:  #eeadc9;
  --pink-tint:  #fdf1f6;

  --blue:       #35558c;
  --blue-tint:  #eef3fb;

  --line:       #d0e8f1;
  --surface:    #ffffff;
  --surface-2:  #e8f5fa;
  --surface-3:  #f3fafd;

  --font-heading: "Noto Sans JP", var(--font-sans);
  --font-sans: "Noto Sans JP", -apple-system, sans-serif;
  --font-caps: "Caprasimo", serif;

  --r-md: 16px;
  --r-lg: 28px;
  --shadow-sm: 0 2px 10px rgba(29,35,51,.05);
  --shadow-md: 0 10px 24px rgba(207,91,165,.24);

  --content-size: 980px;
  --wide-size: 1120px;
  --gutter: clamp(18px, 5vw, 48px);
  --section-y: clamp(64px, 9vw, 108px);
}

/* ---- 最低限の安全なリセットのみ（要素まるごとの上書きはしない） ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 6px; }

/* =========================================================================
   Header（サイトテンプレートの一部）
   ========================================================================= */
.site-utility {
  background: var(--surface-3); display: flex; justify-content: flex-end; gap: 28px;
  padding: 9px var(--gutter); font-size: .8rem; font-weight: 700; color: var(--blue);
  max-width: none;
}
.site-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px var(--gutter); border-bottom: 1px solid var(--line);
  max-width: none;
}
.brand { display: flex; align-items: center; gap: 14px; }
.brand__logo { height: 52px; width: auto; flex: none; }
.brand__text { display: flex; flex-direction: column; gap: 4px; justify-content: center; }
/* 教室名の上に置くサービス説明。字間を広げて小さく、名称と重さを分ける */
.brand__kicker {
  font-size: .68rem; font-weight: 700; letter-spacing: .14em;
  color: var(--ink-soft); line-height: 1;
}
.brand__name {
  font-family: var(--font-heading); font-weight: 900; font-size: 1.36rem;
  letter-spacing: .01em; line-height: 1; color: var(--pink);
}
/* 36周年ロゴは細い縦罫で区切り、教室名から独立した記章として扱う */
.brand__anniv {
  height: 44px; width: auto; margin-left: 4px;
  padding-left: 14px; border-left: 1px solid var(--line); align-self: center;
}
.site-nav { display: flex; align-items: center; gap: 24px; font-size: .9rem; font-weight: 700; color: var(--ink); }
/* 直下のリンクだけを対象にする（子要素の教育ノート／体験レッスンボタンの
   色を巻き込まないよう .site-nav a ではなく直接子セレクタにしている） */
.site-nav > a { color: var(--ink); }
.site-nav > a:hover { color: var(--pink); text-decoration: none; }
.site-nav__note { position: relative; display: inline-flex; }
.site-nav__note-tag {
  position: absolute; top: -15px; left: 50%; transform: translateX(-50%);
  background: var(--blue); color: #fff; font-size: .66rem; font-weight: 900;
  padding: 3px 10px; border-radius: 999px; white-space: nowrap;
}
.site-nav__note-btn {
  border: 2px solid var(--blue); border-radius: var(--r-md); color: var(--blue);
  font-family: var(--font-heading); font-weight: 900; font-size: .9rem; padding: 11px 20px; white-space: nowrap;
}
.site-nav .wp-block-button__link { padding: 12px 24px; font-size: .9rem; }
.nav-toggle { display: none; width: 26px; height: 22px; position: relative; background: none; border: 0; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: ""; position: absolute; left: 0; width: 22px; height: 2.5px; background: var(--ink); border-radius: 2px;
}
.nav-toggle span { top: 10px; } .nav-toggle span::before { top: -8px; } .nav-toggle span::after { top: 8px; }

/* SPでもハンバーガーに隠さず常時表示するCTA（デスクトップでは非表示） */
.is-style-mobile-cta { display: none; }

/* =========================================================================
   SP用フルスクリーンメニュー（ハンバーガーで開くドロワー）
   ========================================================================= */
.mobile-drawer {
  position: fixed; inset: 0; z-index: 100000; background: var(--surface);
  display: flex; flex-direction: column;
}
.mobile-drawer[hidden] { display: none; }
@media (min-width: 1151px) { .mobile-drawer { display: none !important; } }

.mobile-drawer__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid var(--line);
}
.mobile-drawer__header-actions { display: flex; align-items: center; gap: 10px; }
.mobile-drawer__header-actions .wp-block-button__link { padding: 9px 14px; font-size: .8rem; box-shadow: none; }
.mobile-drawer__close { background: none; border: 0; font-size: 1.3rem; line-height: 1; color: var(--ink); padding: 4px; }

.mobile-drawer__body { flex: 1; overflow-y: auto; padding: 22px 22px 28px; display: flex; flex-direction: column; gap: 18px; }
.mobile-drawer__cta {
  display: block; text-align: center; background: var(--pink); color: #fff;
  font-family: var(--font-heading); font-weight: 900; font-size: 1.05rem;
  padding: 17px; border-radius: 999px;
}
.mobile-drawer__nav { display: flex; flex-direction: column; }
.mobile-drawer__row {
  display: block; border-bottom: 1px solid var(--line); padding: 16px 4px;
  font-family: var(--font-heading); font-weight: 900; font-size: 1.05rem; color: var(--ink);
}
.mobile-drawer__group { border-bottom: 1px solid var(--line); padding: 16px 4px; display: flex; flex-direction: column; gap: 12px; }
.mobile-drawer__group-label {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-heading); font-weight: 900; font-size: 1.05rem; color: var(--ink);
}
.mobile-drawer__group-label small { font-size: .8rem; color: var(--ink-faint); }
.mobile-drawer__sublist { display: flex; flex-direction: column; gap: 10px; padding-left: 12px; }
.mobile-drawer__subitem { display: block; background: var(--surface-2); border-radius: var(--r-md); padding: 12px 16px; color: var(--ink); }
.mobile-drawer__subitem strong { display: block; font-size: .86rem; font-weight: 700; }
.mobile-drawer__subitem small { display: block; font-size: .72rem; color: var(--ink-soft); margin-top: 2px; }

.mobile-drawer__notecard { position: relative; margin-top: 6px; }
.mobile-drawer__notecard .site-nav__note-tag { position: absolute; top: -12px; left: 60px; }
.mobile-drawer__notecard-inner {
  border: 2px solid var(--blue); border-radius: var(--r-md); color: var(--blue);
  padding: 18px; display: flex; align-items: center; justify-content: space-between;
}
.mobile-drawer__notecard-inner strong { display: block; font-family: var(--font-heading); font-weight: 900; font-size: 1.05rem; }
.mobile-drawer__notecard-inner small { display: block; font-size: .72rem; color: var(--ink-soft); }

.mobile-drawer__extra { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.mobile-drawer__extra-label { font-size: .7rem; font-weight: 900; color: var(--ink-faint); letter-spacing: .08em; }
.mobile-drawer__extra a { display: block; background: var(--surface-2); border-radius: var(--r-md); padding: 14px 16px; font-size: .86rem; font-weight: 700; color: var(--blue); }

.mobile-drawer__closebtn {
  margin-top: auto; align-self: center; background: none;
  border: 1px solid #d9dfe9; border-radius: 999px;
  font-family: var(--font-heading); font-weight: 900; font-size: .9rem; color: var(--ink-soft);
  padding: 12px 34px;
}
.mobile-drawer .site-cta-bar { position: static; }

/* =========================================================================
   ヘッダー／SPドロワー用ボタン
   （汎用 .wp-block-button__link はここでは定義しない＝
   　既存ページ本文のボタンの見た目を変えてしまわないため、
   　ヘッダー／ドロワー配下だけに限定して同じ見た目を再現する）
   ========================================================================= */
.site-header .wp-block-buttons:not(.is-style-mobile-cta),
.mobile-drawer .wp-block-buttons {
  display: inline-flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: center;
}
.site-header .wp-block-button__link,
.mobile-drawer .wp-block-button__link {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  padding: 16px 40px; border-radius: 999px; border: 2px solid transparent;
  font-family: var(--font-heading); font-weight: 900; font-size: 1rem;
  transition: transform .15s ease, box-shadow .15s ease;
  background: var(--pink); color: #fff; box-shadow: var(--shadow-md);
  text-decoration: none;
}
.site-header .wp-block-button__link:hover,
.mobile-drawer .wp-block-button__link:hover { transform: translateY(-2px); text-decoration: none; }

@media (max-width: 760px) {
  .site-nav { display: none; }
  .nav-toggle { display: block; }
  .site-utility { display: none; }
  .is-style-mobile-cta { display: flex; margin-left: auto; }
  .is-style-mobile-cta .wp-block-button__link { padding: 8px 14px; font-size: .74rem; box-shadow: none; white-space: nowrap; }
  .site-header { padding: 10px 14px; gap: 8px; }
  .brand { gap: 8px; min-width: 0; }
  .brand__logo { height: 32px; flex: none; }
  .brand__text { min-width: 0; gap: 3px; }
  .brand__kicker { font-size: .55rem; letter-spacing: .1em; white-space: nowrap; }
  .brand__name { font-size: .92rem; white-space: nowrap; }
  .site-header .brand__anniv { display: none; }
  .nav-toggle { flex: none; }
}

/* =========================================================================
   PCヘッダーのドロップダウン
   ========================================================================= */
.site-nav .has-dropdown { position: relative; }
.site-nav .dropdown-trigger {
  font: inherit; font-weight: 700; font-size: .92rem; color: var(--ink);
  background: transparent; border: 0; border-radius: 999px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px;
  transition: background .16s ease, color .16s ease;
}
.site-nav .dropdown-trigger span { font-size: .8em; color: var(--ink-faint); }
.site-nav .has-dropdown:hover .dropdown-trigger,
.site-nav .has-dropdown.is-open .dropdown-trigger { background: var(--blue-tint); color: var(--blue); }
.site-nav .dropdown-trigger:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.dropdown-panel {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(-6px);
  min-width: 320px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: 0 18px 44px rgba(20,25,40,.16);
  padding: 12px; display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .16s ease, transform .16s ease, visibility .16s; z-index: 60;
}
.has-dropdown.is-open .dropdown-panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.dropdown-panel::before { content: ""; position: absolute; top: -10px; left: 0; right: 0; height: 10px; }
.dropdown-panel a {
  display: flex; flex-direction: column; gap: 3px; padding: 12px 16px;
  border-radius: 12px; text-decoration: none; color: var(--ink);
}
.dropdown-panel a:hover { background: var(--surface-2); }
.dropdown-panel a[aria-current="page"] { background: var(--pink-tint); }
.dropdown-panel strong { font-size: .92rem; font-weight: 900; }
.dropdown-panel small { font-size: .76rem; color: var(--ink-faint); line-height: 1.6; }
.site-utility a { color: inherit; text-decoration: none; }
.site-utility a:hover { text-decoration: underline; }
@media (max-width: 900px) { .site-nav .has-dropdown { display: none; } }


/* =========================================================================
   ヘッダーの折返し防止・ブレイクポイント調整
   ========================================================================= */
.site-nav > a, .site-nav .dropdown-trigger, .site-nav__note-btn, .site-nav__note-tag,
.brand__name, .brand__kicker, .site-nav .wp-block-button__link { white-space: nowrap; }

@media (max-width: 1150px) {
  .site-nav, .site-nav .has-dropdown { display: none; }
  .nav-toggle { display: inline-flex; }
  .wp-block-buttons.is-style-mobile-cta { display: flex; margin-left: auto; }
}

/* タブレット幅（761px〜1150px）のヘッダーをスマホ表示に統一 */
@media (max-width: 1150px) {
  .site-utility { display: none; }
  .is-style-mobile-cta .wp-block-button__link { padding: 8px 14px; font-size: .74rem; box-shadow: none; white-space: nowrap; }
  .site-header { padding: 10px 14px; gap: 8px; }
  .brand { gap: 8px; min-width: 0; }
  .brand__logo { height: 32px; flex: none; }
  .brand__text { min-width: 0; gap: 3px; }
  .brand__kicker { font-size: .55rem; letter-spacing: .1em; white-space: nowrap; }
  .brand__name { font-size: .92rem; white-space: nowrap; }
  .site-header .brand__anniv { display: none; }
  .nav-toggle { flex: none; }
}
@media (min-width: 1151px) and (max-width: 1320px) {
  .site-header { padding-inline: 24px; }
  .site-nav { gap: 14px; }
  .site-nav .dropdown-trigger { padding: 10px 12px; }
}

/* =========================================================================
   Footer（サイトテンプレートの一部）
   ========================================================================= */
.site-footer { background: #d3e9f2; color: var(--ink-soft); border-top: 1px solid #b9dbe8; padding: 52px var(--gutter); }
.footer-cols { max-width: var(--wide-size); margin-inline: auto; display: flex; flex-wrap: wrap; gap: 44px; justify-content: center; text-align: center; font-size: .82rem; line-height: 2.1; }
.footer-cols h4 { font-family: var(--font-heading); font-weight: 900; color: var(--ink); margin-bottom: 6px; font-size: .88rem; }
.footer-cols ul { display: contents; }
.footer-cols a { color: var(--ink); }
.footer-copy { text-align: center; font-family: var(--font-caps); font-size: .7rem; color: var(--ink-soft); margin-top: 26px; }

.site-cta-bar { position: sticky; bottom: 0; display: grid; grid-template-columns: 1fr 1fr; z-index: 40; }
.site-cta-bar a { display: flex; align-items: center; justify-content: center; padding: 18px 12px; text-align: center; font-family: var(--font-heading); font-weight: 900; color: #fff; font-size: 1rem; white-space: nowrap; }
.site-cta-bar a:hover { text-decoration: none; opacity: .92; }
@media (max-width: 620px) {
  .site-cta-bar a { padding: 16px 6px; font-size: clamp(.68rem, 3.5vw, .88rem); }
}
.site-cta-bar a:first-child { background: var(--pink); }
.site-cta-bar a:last-child { background: var(--blue); }

/* フッターのSNS・規約リンク */
.footer-sns { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 44px 20px 0; }
.footer-sns__label { font-family: var(--font-heading); font-weight: 900; font-size: .9rem; letter-spacing: .12em; }
.footer-sns__list { display: flex; flex-wrap: wrap; gap: 22px; justify-content: center; }
.footer-sns__item { display: flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none; color: var(--ink-soft); font-size: .74rem; font-weight: 700; }
.footer-sns__icon {
  width: 60px; height: 60px; border-radius: 999px; background: var(--surface);
  display: flex; align-items: center; justify-content: center; font-size: 1.3rem;
  box-shadow: var(--shadow-sm); transition: transform .16s ease;
}
.footer-sns__item:hover .footer-sns__icon { transform: translateY(-3px); }
.footer-legal { display: flex; flex-wrap: wrap; gap: 12px 34px; justify-content: center; padding: 30px 20px 0; font-size: .82rem; }
.footer-legal a { color: var(--ink-soft); text-decoration: none; }
.footer-legal a:hover { text-decoration: underline; }

.footer-news {
  max-width: 900px; margin: 30px auto 0; padding: 24px 28px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
}
.footer-news__label { font-size: .68rem; font-weight: 900; letter-spacing: .2em; color: var(--ink-faint); }
.footer-news__text { font-size: .9rem; line-height: 1.8; color: var(--ink-soft); }
.footer-news__link {
  margin-top: 6px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--pink); color: #fff; font-size: .9rem; font-weight: 900;
  border-radius: 999px; padding: 12px 28px; text-decoration: none;
}
.footer-news__link:hover { background: var(--pink-deep); color: #fff; }

/* =========================================================================
   全ページ共通の「枠」に、本文用CSS（styles.css）を読み込まないページでも
   最低限の見た目（下線なし・余白・リスト記号なし等）を保証するための
   ピンポイントな上書き。要素セレクタではなくヘッダー／フッター配下だけに
   限定しているため、既存ページ本文のスタイルには影響しない。
   ========================================================================= */
.site-utility a, .site-header a, .mobile-drawer a, .site-cta-bar a,
.site-footer a { text-decoration: none; }
.site-footer h4, .site-footer p, .site-footer ul, .site-footer li { margin: 0; }
.site-footer ul { padding: 0; list-style: none; }
.site-utility img, .site-header img, .mobile-drawer img, .site-cta-bar img, .site-footer img,
.site-utility svg, .site-header svg, .mobile-drawer svg, .site-cta-bar svg, .site-footer svg {
  max-width: 100%;
}
.nav-toggle, .mobile-drawer__close, .mobile-drawer__closebtn { cursor: pointer; }



/* =========================================================================
   スクロール連動ヘッダー（案内列＋メイン列）
   ========================================================================= */
.site-header-shell.is-scroll-aware {
  position: sticky;
  top: 0;
  z-index: 9999;
  background: var(--surface);
  transition: transform .28s ease, box-shadow .28s ease;
  will-change: transform;
}

.site-header-shell.is-scroll-aware:not(.is-scroll-hidden) {
  box-shadow: 0 5px 18px rgba(29, 35, 51, .08);
}

.site-header-shell.is-scroll-aware.is-scroll-hidden {
  transform: translateY(calc(-100% - 2px));
  box-shadow: none;
  pointer-events: none;
}

.admin-bar .site-header-shell.is-scroll-aware {
  top: 32px;
}

@media (max-width: 782px) {
  .admin-bar .site-header-shell.is-scroll-aware {
    top: 46px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header-shell.is-scroll-aware {
    transition: none;
  }
}