/* ============================================================
   header.css ＝ マスターのヘッダー用CSS（全9ページが最後に読む／2026-09-11）
   ねらい：どのページを開いてもヘッダーの大きさ・横幅・余白・書体が同じになること。
   そのため、旧CSS（base.css）やページごとのCSS（laube.css 等）から継がれる値に頼らず、
   ヘッダーの中の全部品を px で明示する。セレクタは header .c-topbar から始めて優先度を上げる。
   値は 2026-09-11 に承認済みのメニューページの実測値（PC 1440px／SP 390px）から取った。
   ============================================================ */

/* ---- 帯 ---- */
header .c-topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: 122px; padding: 0; margin: 0; box-sizing: border-box;
  background: #fff; box-shadow: 0 4px 16px rgba(0, 0, 0, .16);
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Noto Sans CJK JP", "Yu Gothic Medium", "Yu Gothic", Meiryo, sans-serif;
  font-size: 16px; line-height: 1.5; letter-spacing: 0; color: #435b5b;

  /* 🔴 この2行を消さない（2026-09-12・ゆうじさん指示「太字に統一」）。
     太さの指定（font-weight:700）は元から全ページ同じだった。違っていたのは「文字の描き方」で、
     laube.css が body.home-b に -webkit-font-smoothing: antialiased を当てている。
     laube.css を読む5ページ（index/hajimete/menu/nintei/yoyaku）だけ文字が細く描かれ、
     読まない4ページ（voice/school/shindan/suiso）は既定の描き方で太く見えていた。
     太いほう（auto＝サブピクセル）に9ページとも揃える。視認性が高いほうを採る。 */
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}
header .c-topbar .c-container { max-width: 1280px; height: 122px; margin: 0 auto; padding: 0; }
header .c-topbar .c-topbar__inner { max-width: 1000px; height: 122px; margin: 0 auto; padding: 0 10px; box-sizing: border-box; }
header .c-topbar .c-topbar__wrap { position: relative; height: 122px; min-height: 122px; }

/* ---- ロゴ（全ページ同じ大きさ 45×58） ---- */
/* 🔴 width は max-content から広げない（2026-09-13）。
   ここが width:auto ＝ ブロックの全幅だったため、z-index:10 のこの箱が帯いっぱいに広がり、
   右端のハンバーガー（z-index なし）の上に乗って、スマホのタップを全部飲み込んでいた。
   菅井さんの実機で「タップしても何も反応しない」として発覚。指が当たっていたのはロゴの箱。 */
header .c-topbar .c-topbar-logo { position: relative; z-index: 10; width: max-content; margin: 0; padding: 0; }
header .c-topbar .c-topbar-logo a { display: inline-block; line-height: 0; }
header .c-topbar .c-topbar-logo img { display: block; width: 45px; height: 58px; }

/* ---- ハンバーガー（PCでは出さない） ---- */
header .c-topbar .c-topbar-btn { display: none; }

/* ---- 2段目：ナビ ---- */
header .c-topbar .c-nav {
  position: absolute; top: 63px; right: 0; bottom: auto; left: auto;
  display: block; width: auto; max-width: none; margin: 0; padding: 0;
  background: none; box-shadow: none;
}
header .c-topbar .c-nav__wrap {
  display: flex; flex-wrap: nowrap; justify-content: flex-end;
  margin: 0; padding: 0; list-style: none;
}
header .c-topbar .c-nav__wrap li { display: block; margin: 0; padding: 0; }
header .c-topbar .c-nav__wrap li a {
  display: block; margin: 0; padding: 13px 14px;
  border: 0; border-right: 1px solid #aab8da; border-radius: 4px;
  text-decoration: none; text-align: center; line-height: 1.3;
  transition: background-color .15s ease, color .15s ease;
}
header .c-topbar .c-nav__wrap li:last-child a { border-right: 0; padding-right: 0; }
header .c-topbar .c-nav__wrap li a:hover { background: #ebf4ff; }
header .c-topbar .c-nav__wrap li a span.ja {
  display: block; font-size: 13.5px; font-weight: 700; line-height: 1.3;
  letter-spacing: .06em; color: #115190; white-space: nowrap;
}
header .c-topbar .c-nav__wrap li a.is-current span.ja { color: #000; border-bottom: 2px solid #115190; }

/* ---- 1段目 右上：電話／LINE ---- */
header .c-topbar .hdr-cta {
  position: absolute; top: 8px; right: 0; z-index: 20;
  display: flex; gap: 10px; align-items: stretch; margin: 0; padding: 0;
}
header .c-topbar .hdr-cta a {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-sizing: border-box; height: 44px; min-height: 44px; margin: 0; padding: 4px 18px;
  border: 0; border-radius: 6px; text-decoration: none; white-space: nowrap;
  font-size: 13px; font-weight: 700; line-height: 1.3; letter-spacing: .02em;
}
header .c-topbar .hdr-cta__tel { background: #ebf4ff; color: #115190; }
header .c-topbar .hdr-cta__tel span.hdr-cta__pc { display: block; font-size: 11px; font-weight: 700; line-height: 1.3; }
header .c-topbar .hdr-cta__tel b { display: block; font-size: 17px; font-weight: 700; line-height: 1.3; letter-spacing: .01em; }
header .c-topbar .hdr-cta__line { background: #06c755; color: #fff; font-size: 15px; }
header .c-topbar .hdr-cta a svg, header .c-topbar .hdr-cta a .hdr-cta__sp { display: none; }

/* ---- 本文の上余白（帯の高さぶん。ページごとのCSSで変えない） ---- */
html body.sub, html body.home-b:not(.sub) { padding-top: 128px; }
.p-pagehead { margin-top: 0; }

/* ============================================================
   スマホ・タブレット（56em＝896px以下）
   ============================================================ */
@media screen and (max-width: 56em) {
  header .c-topbar { position: absolute; height: 56px; }
  header .c-topbar .c-container { height: 56px; }
  header .c-topbar .c-topbar__inner { height: 56px; padding: 0 18px; }
  header .c-topbar .c-topbar__wrap { height: 56px; min-height: 0; }
  header .c-topbar .c-topbar-logo img { width: 44px; height: 57px; }

  /* 🔴 指で押せる大きさにする（2026-09-13）。線の見た目は 15×9px のまま変えず、
     当たり判定だけを 44×44px に広げている（Appleの指針が44pt四方）。
     right:-14px は、線の位置を動かさずに箱だけを左右へ広げるため。
     z-index:30 ＝ ロゴ(10)・電話LINE(20) より上。ここを下げると、また押せなくなる。 */
  header .c-topbar .c-topbar-btn {
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    position: absolute; top: 50%; right: -14px; margin-top: -22px;
    width: 44px; height: 44px; cursor: pointer; padding: 0;
    z-index: 30; background: none; border: 0; -webkit-tap-highlight-color: transparent;
  }
  header .c-topbar .c-topbar-btn span {
    display: block; width: 15px; height: 1px; background: #000;
    transition: transform .2s ease, opacity .2s ease;
  }
  header .c-topbar .c-topbar-btn span:nth-child(2) { margin: 3px 0; }
  /* 開いているあいだは × にする。手ごたえが無いと、もう一度押して閉じてしまう */
  header .c-topbar .c-topbar-btn.-opened span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
  header .c-topbar .c-topbar-btn.-opened span:nth-child(2) { opacity: 0; }
  header .c-topbar .c-topbar-btn.-opened span:nth-child(3) { transform: translateY(-4px) rotate(-45deg); }

  header .c-topbar .c-nav {
    display: none; position: fixed; top: 56px; left: 0; right: 0; width: 100%;
    max-height: calc(100vh - 56px); overflow-y: auto; -webkit-overflow-scrolling: touch;
    background: #fff; box-shadow: 0 4px 5px rgba(0, 0, 0, .16);
  }
  header .c-topbar .c-nav__wrap { display: block; padding: 10px 0 0; }
  header .c-topbar .c-nav__wrap li { display: block; padding: 0 4.6875%; }
  header .c-topbar .c-nav__wrap li a { padding: 13px 0; border: 0; border-top: 1px solid #000; border-radius: 0; }
  header .c-topbar .c-nav__wrap li:last-child a { padding-right: 0; }
  header .c-topbar .c-nav__wrap li a span.ja { font-size: 20px; letter-spacing: .04em; color: #333; }
  header .c-topbar .c-nav__wrap li a.is-current span.ja { color: #115190; border-bottom: 0; }

  header .c-topbar .hdr-cta { top: 6px; right: 34px; gap: 6px; }
  header .c-topbar .hdr-cta a { min-width: 60px; padding: 0 10px; gap: 2px; }
  header .c-topbar .hdr-cta a svg { display: block; width: 17px; height: 17px; }
  header .c-topbar .hdr-cta a .hdr-cta__pc { display: none; }
  header .c-topbar .hdr-cta a .hdr-cta__sp { display: block; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: .04em; }

  html body.sub, html body.home-b:not(.sub) { padding-top: 56px; }
}