@charset "utf-8";

/* ============================================================
   全ページ共通のヘッダー（templates/_header.html。2026-10-29 サク承認）
   サイトの顔はまなびの見た目（manabi/DESIGN.md の色・角丸・影・書体）。保護者向けの面の本文は白書の見た目のまま
   （DESIGN.md）。まなびの面（manabi.css）と保護者向けの面（style.css）のどちらからも読むので、使う値はすべて
   .site-header の中のトークン（--sh-*）に置き、面ごとの :root に頼らない。
   追従（sticky）と、スマホでスクロールの向きに合わせて隠す動きは保護者向けの面だけ（style.css と header.js）。
   ============================================================ */

/* トークンはヘッダーと、フッターのロゴ（.footer-brand。2026-11-01）で使う */
.site-header,.footer-brand{
  --sh-paper:#FBF8F1;
  --sh-panel:#FFFFFF;
  --sh-ink:#1D2433;
  --sh-ink-soft:#596172;
  --sh-wood:#E9C68D;
  --sh-wood-light:#F3DDB4;
  --sh-yoko:#D55E00;
  --sh-takasa:#009E73;
  --sh-tate:#0072B2;
  /* 「保護者の方へ」だけは、その先の面（白書）の緑で示す */
  --sh-midori:#294F3E;
  --sh-midori-wash:#EFF3ED;
  --sh-radius-s:8px;
  --sh-radius-m:14px;
  --sh-radius-pill:999px;
  --sh-lift:0 5px 0 var(--sh-ink);
  --sh-t:160ms cubic-bezier(.3,.7,.4,1);
  --sh-font-head:"Zen Maru Gothic","BIZ UDPGothic",sans-serif;
  --sh-font-body:"BIZ UDPGothic","Hiragino Sans","Noto Sans JP",sans-serif;
}
.site-header{
  background:var(--sh-paper);
  border-bottom:3px solid var(--sh-ink);
  color:var(--sh-ink);
  font-family:var(--sh-font-body);
  letter-spacing:0;
}
.site-header__inner{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  min-height:80px;padding-block:12px;
}
.site-header a{color:inherit;text-decoration:none}
.site-header :focus-visible{outline:3px solid var(--sh-tate);outline-offset:3px}

/* 題字（ロゴ。2026-10-30 サク裁定）: 記号（2つの L 字。真ん中は空ける）＋サイト名（Zen Maru Gothic 700）＋横に小さく副題。
   題字は縮めない（縮むと2行に割れる）。決まりは DESIGN.md「ロゴ」 */
.brand{display:flex;align-items:center;gap:9px;flex:none;border-radius:var(--sh-radius-s)}
.brand__mark{width:34px;height:34px;flex:none;fill:var(--sh-ink);transition:transform var(--sh-t)}
.brand:hover .brand__mark{transform:translateY(-2px)}
.brand__title{display:flex;align-items:baseline;gap:8px;white-space:nowrap;line-height:1.2}
.brand__name{
  font-family:var(--sh-font-head);font-weight:700;font-size:22px;
  letter-spacing:.02em;white-space:nowrap;
}
/* 名前に添える副題（「まなびの未来」。名前の一部ではない） */
.brand__subtitle{font-size:11px;color:var(--sh-ink-soft);white-space:nowrap}

/* フッターのロゴ（2026-11-01 サク指示）: ヘッダーと同じ .brand をそのまま置く */
.footer-brand{width:fit-content;color:var(--sh-ink);font-family:var(--sh-font-body);letter-spacing:0;text-decoration:none}
.footer-brand:focus-visible{outline:3px solid var(--sh-tate);outline-offset:3px}

/* 主ナビ: 丸い札（チップ）を5つ。ラベルの途中では折り返さない */
.nav__list{display:flex;align-items:center;gap:6px;margin:0;padding:0;list-style:none}
.nav__item{position:relative}
.nav__list > .nav__item > a{
  display:inline-flex;align-items:center;gap:6px;
  padding:9px 14px;
  background:var(--sh-panel);
  border:2px solid var(--sh-ink);border-radius:var(--sh-radius-pill);
  font-size:14px;font-weight:700;line-height:1.4;white-space:nowrap;
  transition:background-color var(--sh-t),color var(--sh-t);
}
.nav__list > .nav__item > a:hover{background:var(--sh-wood-light)}
.nav__list > .nav__item > a[aria-current="page"]{background:var(--sh-wood)}
.nav__list > .nav__item--parents > a{background:var(--sh-midori-wash);border-color:var(--sh-midori);color:var(--sh-midori)}
.nav__list > .nav__item--parents > a:hover{background:var(--sh-panel)}
.nav__caret{flex:none;transition:transform var(--sh-t)}

/* ------------------------------------------------------------
   プルダウン（JSなし。:hover と :focus-within だけで開く。1025px以上だけ）
   親項目はそれ自体が有効なリンク。キーボードは「親リンクへ Tab で入る→:focus-within で子が出る→
   続けて Tab で子へ入る」の順に届く。パネルの上の余白（padding-top）はホバーが途切れないための橋
   ------------------------------------------------------------ */
.nav__panel{display:none;position:absolute;top:100%;right:0;z-index:30;padding-top:12px}
.nav__box{
  display:grid;grid-template-columns:repeat(2,max-content);gap:4px 36px;
  padding:16px 22px 18px;
  background:var(--sh-panel);
  border:2px solid var(--sh-ink);border-radius:var(--sh-radius-m);
  box-shadow:var(--sh-lift);
}
.nav__subhead{
  margin:14px 0 4px;
  font-family:var(--sh-font-head);font-size:12px;font-weight:900;line-height:1.5;
  color:var(--sh-ink-soft);
}
.nav__group > .nav__subhead:first-child{margin-top:0}
.nav__sub{margin:0;padding:0;list-style:none}
.nav__sub a{
  display:block;margin-inline:-8px;padding:5px 8px;
  border-radius:var(--sh-radius-s);
  font-size:14px;line-height:1.6;white-space:nowrap;
  transition:background-color var(--sh-t),color var(--sh-t);
}
.nav__sub a:hover{background:var(--sh-midori-wash);color:var(--sh-midori)}
.nav__sub a[aria-current="page"]{font-weight:700;color:var(--sh-midori)}
@media (min-width:1025px){
  .nav__item--menu:hover .nav__panel,
  .nav__item--menu:focus-within .nav__panel{display:block}
  .nav__item--menu:hover .nav__caret,
  .nav__item--menu:focus-within .nav__caret{transform:rotate(180deg)}
}

/* ------------------------------------------------------------
   1024px以下: 題字の段とナビの段の2段。ナビは横へ流せる1列にし、プルダウンは開かない
   （子は /seido/ の入口と、保護者向けの面のフッタの目次から）。ナビの段は画面の端まで流す
   ------------------------------------------------------------ */
@media (max-width:1024px){
  .site-header{overflow-x:clip}
  .site-header__inner{flex-direction:column;align-items:stretch;gap:10px;min-height:0;padding-block:12px 10px}
  .nav{
    overflow-x:auto;scrollbar-width:none;
    margin-inline:calc(50% - 50vw);padding-inline:calc(50vw - 50%);
    padding-block:2px 4px;
  }
  .nav::-webkit-scrollbar{display:none}
  .nav__list > .nav__item > a{padding:8px 13px;font-size:13px}
  .nav__caret{display:none}
  /* 保護者向けの面でスクロールしたあとは題字の段を畳み、ナビの段だけを残す（header.js が is-scrolled を付ける） */
  .site-header.is-scrolled .brand{display:none}
}
@media (max-width:560px){
  .brand__mark{width:32px;height:32px}
  .brand__name{font-size:21px}
}
/* 名前と副題が1行に収まらない幅では、副題を名前の下へ（ロゴの決まり） */
@media (max-width:300px){
  .brand__title{flex-direction:column;align-items:flex-start;gap:0}
}

@media (prefers-reduced-motion:reduce){
  .brand__mark,.nav__caret,.nav__list > .nav__item > a,.nav__sub a{transition:none}
  .brand:hover .brand__mark{transform:none}
}
@media print{
  .site-header .nav{display:none}
}

/* ============================================================
   住所が変わるお知らせ（templates/_domain_notice.html。2026-10-31 サク指示。期間限定）
   大人向けの帯（.dn）はヘッダーのすぐ下、子ども向けの一行（.dn-line）はまなびのフッターに置く。
   ヘッダーと同じく、どちらの面からも読むので値はここに直接置く（色はヘッダーの --sh-* と同じ値）。
   書体はページの本文のもの（保護者向けの面は Noto Sans JP、まなびの面は BIZ UDPGothic）をそのまま使う。
   新しい住所で開いたときの文言の差し替えは site/assets/domain-notice.js
   ============================================================ */
.dn{
  background:#F3DDB4;
  border-bottom:2px solid #1D2433;
  color:#1D2433;
  line-height:1.7;
  letter-spacing:0;
}
.dn [hidden]{display:none}
/* 広い幅: 左に見出しと説明（「くわしく」は domain-notice.js が開き、summary は隠す）、右に試すボタン */
.dn__inner{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 32px;
  padding-block:14px 16px;
}
.dn__title{grid-column:1;margin:0;font-size:16px;font-weight:700;line-height:1.55}
.dn__more{grid-column:1}
.dn__button{grid-column:2;grid-row:1 / span 2}
.dn__summary{
  display:inline-block;cursor:pointer;
  font-size:13px;font-weight:700;text-decoration:underline;text-underline-offset:3px;
}
.dn__summary:focus-visible{outline:3px solid #0072B2;outline-offset:3px;border-radius:4px}
@media (min-width:701px){
  .dn__more[open] > .dn__summary{display:none}
}
.dn__body{margin:4px 0 0;font-size:14px}
.dn__host{font-weight:700;white-space:nowrap}
.dn__try-who{
  display:inline-block;margin-right:8px;padding:0 9px;
  background:#1D2433;color:#FFFFFF;border-radius:999px;
  font-size:12px;font-weight:700;line-height:1.8;vertical-align:1px;
}
.dn__button{
  display:inline-flex;align-items:center;justify-self:start;min-height:44px;padding:8px 18px;
  background:#FFFFFF;color:#1D2433;
  border:2px solid #1D2433;border-radius:999px;box-shadow:0 4px 0 #1D2433;
  font-size:14px;font-weight:700;line-height:1.4;text-decoration:none;white-space:nowrap;
  transition:transform 160ms cubic-bezier(.3,.7,.4,1),box-shadow 160ms cubic-bezier(.3,.7,.4,1),background-color 160ms cubic-bezier(.3,.7,.4,1);
}
.dn__button:hover{background:#FBF8F1}
.dn__button:active{transform:translateY(3px);box-shadow:0 1px 0 #1D2433}
.dn__button:focus-visible{outline:3px solid #0072B2;outline-offset:3px}
/* スマホ幅: 見出し → 小さめのボタンと「くわしく」の1段。説明は「くわしく」を開いたときだけ（2026-10-31 メタ検収） */
@media (max-width:700px){
  .dn__inner{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:8px 14px;padding-block:10px 12px}
  .dn__title{grid-column:1 / -1;font-size:15px;line-height:1.5}
  .dn__button{grid-column:1;grid-row:2;min-height:36px;padding:5px 14px;font-size:13px;box-shadow:0 3px 0 #1D2433}
  .dn__more{grid-column:2;grid-row:2}
  .dn__more[open]{grid-column:1 / -1;grid-row:3}
  .dn__more[data-dn-new]{grid-column:1 / -1}
  .dn__body{font-size:13px}
}
/* 住所が1行に収まらないほど狭い幅では、住所の途中でも折り返す（横にはみ出させない） */
@media (max-width:340px){
  .dn__host{white-space:normal;overflow-wrap:anywhere}
}
/* 子ども向けの一行（まなびのフッター。リンクも計測も付けない） */
.dn-line{margin:0;font-size:14px;color:#1D2433}
.dn-line .dn__host{font-weight:700}
.dn-line[hidden]{display:none}
@media (prefers-reduced-motion:reduce){
  .dn__button{transition:none}
  .dn__button:active{transform:none}
}
@media print{
  .dn{display:none}
}