@charset "utf-8";
/* ==========================================================================
   layout.css ― 全ページ共通のフレーム
     スキップリンク / ヘッダー / ドロワー / 追従ヘッダー /
     右の縦タブ / スマホ下部バー / フッター / 下層ページのヘッダー帯 / セクション

   ■ ブレークポイントは 900px の1本だけ（見学予約の 1260px は visit.css に隔離）
   ■ JavaScript で幅を見て出し分けない。すべて @media で切り替える
   ■ 色・余白・文字サイズは tokens.css の変数のみ
   ========================================================================== */

/* --------------------------------------------------------------------------
   共通の器
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--w-outer);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container[data-width="wide"]    { max-width: var(--w-wide); }
.container[data-width="content"] { max-width: var(--w-content); }
.container[data-width="narrow"]  { max-width: var(--w-narrow); }
.container[data-width="text"]    { max-width: var(--w-text); }
.container[data-width="form"]    { max-width: var(--w-form); }

/* ==========================================================================
   1. ヘッダー
   ========================================================================== */
.site-header {
  position: relative;
  z-index: 20;
  background: var(--c-surface);
  color: var(--c-on-surface);
  box-shadow: var(--shadow-card);
  padding-block: var(--sp-14);
}

.site-header__inner {
  max-width: var(--w-outer);
  margin-inline: auto;
  padding-inline: var(--sp-20);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-16);
}

/* --- ロゴ（園名は画像ではなく文字。差し替えは文字を書き換えるだけ） ------ */
.site-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-12);
  min-height: var(--tap-min);   /* 単独の操作対象なので 44px を確保する */
  text-decoration: none;
  color: inherit;
}

.site-logo:hover { color: inherit; }

.site-logo__mark {
  flex: 0 0 auto;
  width: clamp(calc(40 / 16 * 1rem), 4.5vw, calc(50 / 16 * 1rem));
  height: auto;
}

.site-logo__text {
  font-weight: var(--fw-black);
  font-size: var(--fs-h3);
  color: var(--c-text-brown);
  letter-spacing: var(--ls-jp);
  line-height: var(--lh-tight);
  white-space: nowrap;
}

/* 強調する1語。園名を変えたらどの語を強調するか決め直す（REPLACE_GUIDE 3章）
   ロゴの一部なので WCAG 1.4.3 のコントラスト要件の対象外（Logotypes）。
   引き渡しの橙のままにしてある */
.site-logo__accent { color: var(--c-brand); }

.site-logo__suffix {
  /* 下限 14px。ドロワー内はロゴ本体が小さく .82em だと 13.9px になる */
  font-size: max(.82em, var(--fs-sm));
  letter-spacing: .06em;
}

/* --- ヘッダー右側（住所・電話・ナビ） ---------------------------------- */
.site-header__aside { text-align: right; }

.site-header__contact {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--c-text-muted);
}

.site-header__tel {
  font-size: var(--fs-xl);
  font-weight: var(--fw-black);
  color: var(--c-text);
  text-decoration: none;
  margin-left: var(--sp-8);
}

.site-nav__list {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--sp-6) var(--sp-20);
  margin-top: var(--sp-8);
}

.site-nav__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  font-weight: var(--fw-bold);
  font-size: var(--fs-md);
  text-decoration: none;
}

.site-nav__link:hover { text-decoration: underline; }

/* 現在地。色だけに頼らず下線も併せる（DADS 1.4.1） */
.site-nav__link[aria-current="page"] {
  color: var(--c-text-brand);
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

/* --- MENU ボタン（スマホ） --------------------------------------------- */
.menu-button {
  display: none;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-min);
  min-width: var(--tap-min);
  padding: var(--sp-12) var(--sp-16);
  background: var(--c-brand);
  color: var(--c-on-brand);
  border: none;
  border-radius: var(--r-md);
  font-weight: var(--fw-black);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-en);
}

/* --- ヒーローに重ねる版（トップページ） -------------------------------- */
.site-header[data-variant="hero"] {
  position: absolute;
  inset: 0 0 auto 0;
  background: transparent;
  box-shadow: none;
  color: var(--c-surface);
}

.site-header[data-variant="hero"] .site-logo {
  background: var(--c-surface);
  border-radius: var(--r-md);
  padding: var(--sp-8) var(--sp-20) var(--sp-8) var(--sp-12);
}

.site-header[data-variant="hero"] .site-header__contact,
.site-header[data-variant="hero"] .site-header__tel,
.site-header[data-variant="hero"] .site-nav__link {
  color: var(--c-surface);
}

.site-header[data-variant="hero"] .site-nav__link[aria-current="page"] {
  color: var(--c-surface);
}

/* ==========================================================================
   2. 追従ヘッダー（スクロールで出る圧縮版）
   幅ではなくスクロール量に反応するものなので JS で付け外しする
   ========================================================================== */
.sticky-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  background: rgba(255, 255, 255, .96);
  box-shadow: var(--shadow-raised);
  padding: var(--sp-16) var(--sp-20);
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform var(--dur-base) var(--ease), visibility 0s var(--dur-base);
}

.sticky-header[data-shown] {
  transform: translateY(0);
  visibility: visible;
  transition: transform var(--dur-base) var(--ease), visibility 0s;
}

/* スマホでは圧縮バーではなく MENU ボタンだけを出す（引き渡しと同じ） */
.sticky-header__menu {
  display: none;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-min);
  min-width: var(--tap-min);
  padding: var(--sp-12) var(--sp-16);
  background: var(--c-brand);
  color: var(--c-on-brand);
  border: none;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-strong);
  font-weight: var(--fw-black);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-en);
}

.sticky-header__inner {
  max-width: var(--w-outer);
  margin-inline: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-6) var(--sp-28);
  font-weight: var(--fw-bold);
  font-size: var(--fs-md);
}

.sticky-header .site-logo__mark { width: calc(34 / 16 * 1rem); }
.sticky-header .site-logo__text { font-size: var(--fs-lg); }

/* ==========================================================================
   3. ドロワー（スマホの全画面メニュー）
   ========================================================================== */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: none;
  background: var(--c-page);
  color: var(--c-on-page);
  overflow-y: auto;
  padding: var(--sp-20) var(--gutter) var(--sp-56);
}

.drawer[data-open] { display: block; }

.drawer__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-16);
}

.drawer__close {
  flex: 0 0 auto;
  min-height: var(--tap-min);
  min-width: var(--tap-min);
  padding: var(--sp-12) var(--sp-16);
  background: var(--c-ink-strong);
  color: var(--c-on-ink-strong);
  border: none;
  border-radius: var(--r-md);
  font-weight: var(--fw-black);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-en);
  white-space: nowrap;
}

/* ドロワーの中ではロゴを縮める（閉じるボタンを折り返させない） */
.drawer .site-logo { min-width: 0; }
.drawer .site-logo__text {
  font-size: var(--fs-lg);
  white-space: normal;
}

.drawer__list { margin-top: var(--sp-24); }

.drawer__link {
  display: flex;
  align-items: center;
  min-height: var(--tap-min);
  padding: var(--sp-14) var(--sp-8);
  border-bottom: 1px solid var(--c-border);
  font-weight: var(--fw-bold);
  font-size: var(--fs-md);
  text-decoration: none;
}

.drawer__link[aria-current="page"] {
  color: var(--c-text-brand);
  text-decoration: underline;
}

/* 開いている間は背後をスクロールさせない */
body[data-drawer-open] { overflow: hidden; }

/* ==========================================================================
   4. 右の縦タブ（PC）
   ★ 引き渡しではトップページにしか無かったが、全ページに置く
   ========================================================================== */
.side-nav {
  position: fixed;
  right: 0;
  top: 36%;
  z-index: 40;
  display: grid;
  gap: var(--sp-2);
}

.side-nav__item {
  display: grid;
  place-items: center;
  gap: var(--sp-4);
  width: calc(86 / 16 * 1rem);
  height: calc(86 / 16 * 1rem);
  padding-top: var(--sp-6);
  border-radius: var(--r-md) 0 0 var(--r-md);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  text-align: center;
  text-decoration: none;
}

.side-nav__item:hover { text-decoration: underline; }

/* 面と文字を必ず対で。いずれも白文字は 4.5:1 に届いていない（tokens.css 2節） */
.side-nav__item[data-tone="tel"]     { background: var(--c-blue);  color: var(--c-on-blue); }
.side-nav__item[data-tone="visit"]   { background: var(--c-pink);  color: var(--c-on-pink); }
.side-nav__item[data-tone="recruit"] { background: var(--c-green); color: var(--c-on-green); }

.side-nav__icon {
  width: calc(30 / 16 * 1rem);
  height: auto;
}

/* ==========================================================================
   5. スマホ下部の固定バー
   ★ 引き渡しではトップページにしか無かったが、全ページに置く
   ========================================================================== */
.mobile-bar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 40;
  display: none;
  border-radius: var(--r-md) var(--r-md) 0 0;
  overflow: hidden;
}

.mobile-bar__item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-min);
  padding-block: var(--sp-14);
  font-weight: var(--fw-black);
  font-size: var(--fs-md);
  text-align: center;
  text-decoration: none;
}

.mobile-bar__item[data-tone="tel"]     { background: var(--c-brand); color: var(--c-on-brand); }
.mobile-bar__item[data-tone="contact"] { background: var(--c-blue);  color: var(--c-on-blue); }

/* ==========================================================================
   6. 下層ページのヘッダー帯
   hdr-*.png は透過PNG（1440×340）。中央は文字のために空けてある。
   ページ名は画像ではなく HTML の文字。
   ========================================================================== */
.page-head {
  position: relative;
  height: var(--h-pagehead-sp);
  overflow: hidden;
  background: var(--c-surface);
  isolation: isolate;
}

.page-head__bg {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(100%, calc(1500 / 16 * 1rem));
  max-width: none;
}

/* 下端 70px は弧が重なるので、その分だけ内側に寄せる（引き渡しと同じ） */
.page-head__body {
  position: absolute;
  inset: 0 0 var(--sp-70) 0;
  display: grid;
  place-content: center;
  text-align: center;
  padding-inline: var(--gutter);
}

.page-head__icon {
  width: calc(56 / 16 * 1rem);
  margin-inline: auto;
  margin-bottom: var(--sp-10);
}

.page-head__title {
  font-size: var(--fs-h2);
  font-weight: var(--fw-black);
  color: var(--c-text);
  margin: 0;
}

.page-head__en {
  display: block;
  margin-top: var(--sp-6);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-en-lg);
}

/* 英字の色はページごと。色だけで情報を伝えていない（隣に日本語がある） */
.page-head__en[data-tone="brand"] { color: var(--c-text-brand); }
.page-head__en[data-tone="blue"]  { color: var(--c-text-blue); }
.page-head__en[data-tone="green"] { color: var(--c-text-green); }

/* 帯の下のクリーム色の弧。帯は白なので、ここで地色へ繋ぐ */
.page-head__curve {
  position: relative;
  z-index: 5;
  height: var(--sp-70);
  margin-top: calc(var(--sp-70) * -1);
  overflow: hidden;
  pointer-events: none;
}

.page-head__curve > span {
  position: absolute;
  left: 50%;
  top: var(--sp-12);
  transform: translateX(-50%);
  width: 160%;
  height: calc(340 / 16 * 1rem);
  border-radius: var(--r-arc);
  background: var(--c-page);
}

/* --- パンくず --- */
.breadcrumb {
  padding-top: var(--sp-18);
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
}

.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-8);
}

.breadcrumb__sep { color: var(--c-text-faint); }

/* ==========================================================================
   7. セクションと弧の区切り
   ★ 引き渡しの余白は「上だけ」。最後のセクションにだけ下の余白が付く
     （ごあいさつ 70px / 以降 90px / 最後 90px + 160px）
   ========================================================================== */
.section { padding-top: var(--sp-90); }

/* 弧で区切る「帯」。背景色が変わるページ（保育の特色・採用案内）はこちら。
   直前に .arc を置き、その弧の色と data-bg を揃える */
.section[data-band] {
  padding-top: var(--sp-40);
  padding-bottom: var(--sp-140);
}

/* 上の余白（後ろに書くほど強い。data-band より優先させる） */
.section[data-first]    { padding-top: var(--sp-70); }
.section[data-pad="56"] { padding-top: var(--sp-56); }
.section[data-pad="40"] { padding-top: var(--sp-40); }

/* 最後のセクションだけ下の余白を持つ */
.section[data-last] { padding-bottom: var(--sp-160); }

.section[data-bg="page"]    { background: var(--c-page);          color: var(--c-on-page); }
.section[data-bg="surface"] { background: var(--c-surface);       color: var(--c-on-surface); }
.section[data-bg="ivory"]   { background: var(--c-surface-ivory); color: var(--c-on-surface-ivory); }
.section[data-bg="cream"]   { background: var(--c-surface-cream); color: var(--c-on-surface-cream); }
.section[data-bg="beige"]   { background: var(--c-surface-beige); color: var(--c-on-surface-beige); }
.section[data-bg="mint"]    { background: var(--c-surface-mint);  color: var(--c-on-surface-mint); }
.section[data-bg="blue"]    { background: var(--c-blue-deep);     color: var(--c-on-blue-deep); }

/* セクションの上に乗る弧。装飾なので読み上げには出さない */
.arc {
  position: relative;
  z-index: 5;
  height: var(--sp-70);
  margin-top: calc(var(--sp-70) * -1);
  overflow: hidden;
  pointer-events: none;
}

.arc__shape {
  position: absolute;
  left: 50%;
  top: var(--sp-12);
  transform: translateX(-50%);
  width: 160%;
  height: calc(340 / 16 * 1rem);
  border-radius: var(--r-arc);
}

.arc__shape[data-bg="page"]    { background: var(--c-page); }
.arc__shape[data-bg="surface"] { background: var(--c-surface); }
.arc__shape[data-bg="ivory"]   { background: var(--c-surface-ivory); }
.arc__shape[data-bg="cream"]   { background: var(--c-surface-cream); }
.arc__shape[data-bg="beige"]   { background: var(--c-surface-beige); }
.arc__shape[data-bg="mint"]    { background: var(--c-surface-mint); }
.arc__shape[data-bg="blue"]    { background: var(--c-blue-deep); }

/* ==========================================================================
   8. フッター
   ========================================================================== */
.site-footer {
  background: var(--c-surface-cream);
  color: var(--c-on-surface-cream);
  padding-top: var(--sp-56);
  text-align: center;
}

.site-footer__corp {
  display: inline-block;
  padding: var(--sp-4) var(--sp-14);
  background: var(--c-brand);
  color: var(--c-on-brand);
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
}

.site-footer__name {
  margin-top: var(--sp-10);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-black);
  color: var(--c-text-brown);
  letter-spacing: var(--ls-en-sm);
}

.site-footer__meta {
  margin-top: var(--sp-8);
  font-size: var(--fs-md);
}

.site-footer__meta a { text-decoration: none; }

/* auto-fit なので、640px の器で PC は3列・375px では1列になる（実測どおり） */
.site-footer__links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(170 / 16 * 1rem)), 1fr));
  gap: var(--sp-2) var(--sp-24);
  max-width: var(--w-form);
  margin: var(--sp-24) auto 0;
  text-align: left;
}

.site-footer__link {
  display: flex;
  align-items: center;
  min-height: var(--tap-min);
  padding-block: var(--sp-8);
  font-size: var(--fs-sm);   /* DADS：フッター等の付随情報は 14px を許容 */
  text-decoration: none;
}

.site-footer__link:hover { text-decoration: underline; }

.site-footer__link::before {
  content: "▶";
  margin-right: var(--sp-8);
  font-size: .8em;
  color: var(--c-text-brown);
}

.site-footer__sisters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(230 / 16 * 1rem)), 1fr));
  gap: var(--sp-16);
  max-width: var(--w-content);
  margin: var(--sp-32) auto 0;
}

.site-footer__sister {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(72 / 16 * 1rem);
  padding: var(--sp-16);
  border-radius: var(--r-md);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  text-align: center;
  text-decoration: none;
}

.site-footer__sister[data-tone="teal"]    { background: var(--c-teal);       color: var(--c-on-teal); }
.site-footer__sister[data-tone="emerald"] { background: var(--c-emerald);    color: var(--c-on-emerald); }
.site-footer__sister[data-tone="dark"]    { background: var(--c-ink-strong); color: var(--c-on-ink-strong); }

.site-footer__bottom {
  margin: 0;
  background: var(--c-brand);
  color: var(--c-on-brand);
  padding-block: var(--sp-18);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
}

/* フッターの弧は2つある
   上端＝フッターの地色（生成りのクリーム）が本文側へせり上がる
   下端＝橙のコピーライト帯がせり上がる                             */
.site-footer__arc {
  position: relative;
  z-index: 5;
  height: var(--sp-70);
  overflow: hidden;
  pointer-events: none;
}

.site-footer__arc > span {
  position: absolute;
  left: 50%;
  top: var(--sp-12);
  transform: translateX(-50%);
  width: 160%;
  height: calc(340 / 16 * 1rem);
  border-radius: var(--r-arc);
}

.site-footer__arc[data-pos="top"] { margin-top: calc(var(--sp-70) * -1); }
.site-footer__arc[data-pos="top"] > span { background: var(--c-surface-cream); }

.site-footer__arc[data-pos="bottom"] { margin-top: var(--sp-70); }
.site-footer__arc[data-pos="bottom"] > span { background: var(--c-brand); }

/* ==========================================================================
   9. 900px 未満（スマホ）
   引き渡しでは JS の isMobile 判定だった 124 箇所を、ここから CSS に移す
   ========================================================================== */
@media (max-width: 900px) {

  /* ヘッダー：住所・電話・ナビを隠し、MENU ボタンを出す */
  .site-header__aside { display: none; }
  .menu-button { display: inline-flex; }

  .site-header[data-variant="hero"] {
    position: relative;
    background: var(--c-surface);
  }

  .site-header[data-variant="hero"] .site-logo {
    background: transparent;
    padding: 0;
  }

  /* 右の縦タブは出さない。代わりに下部バー */
  .side-nav { display: none; }
  .mobile-bar { display: flex; }

  /* 下部バーの高さぶん、本文の下に余白を足す */
  body { padding-bottom: calc(var(--tap-min) + var(--sp-28)); }

  /* 下層ヘッダー帯は 220px */
  .page-head { height: var(--h-pagehead-sp); }

  /* 追従ヘッダーは MENU ボタンだけにする */
  .sticky-header {
    inset: var(--sp-12) var(--sp-12) auto auto;
    background: transparent;
    box-shadow: none;
    padding: 0;
  }

  .sticky-header__inner { display: none; }
  .sticky-header__menu { display: inline-flex; }
}

/* ==========================================================================
   10. 900px 以上（PC）
   ========================================================================== */
@media (min-width: 901px) {
  .page-head { height: var(--h-pagehead-pc); }
  .drawer { display: none !important; }
}

/* ==========================================================================
   11. ホバーできる環境だけ
   カードのホバー効果はスマホで発火しない。止まった状態で成立させる
   ========================================================================== */
@media (hover: none) {
  .site-nav__link:hover,
  .site-footer__link:hover,
  .side-nav__item:hover { text-decoration: none; }
}