/* 全ページ共通：ヘッダーのメニューと、日本語の自然な改行。site.css / taikai.css の後に読み込む。 */

/* 日本語を文節で折り返す（Chrome・Edge・Android）。対応していないブラウザでは通常どおり。 */
h1, h2, h3, h4, p, li, dd, dt, small, figcaption, .lead, .t, .nm, .tt, summary, td, th, .v span { word-break: auto-phrase; }
p, li, dd { text-wrap: pretty; }

.site-header .wrap { position: relative; }
.menu-btn { display: none; font: inherit; font-size: 14px; font-weight: 700; color: var(--on-navy); background: transparent; border: 1px solid rgba(255,255,255,.3); border-radius: 8px; padding: 8px 12px; align-items: center; gap: 8px; cursor: pointer; flex-shrink: 0; }
.menu-btn .bars, .menu-btn .bars::before, .menu-btn .bars::after { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 1px; transition: transform .2s, opacity .2s; }
.menu-btn .bars { position: relative; }
.menu-btn .bars::before, .menu-btn .bars::after { content: ""; position: absolute; left: 0; }
.menu-btn .bars::before { top: -6px; } .menu-btn .bars::after { top: 6px; }
.menu-btn[aria-expanded="true"] .bars { background: transparent; }
.menu-btn[aria-expanded="true"] .bars::before { transform: translateY(6px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .bars::after { transform: translateY(-6px) rotate(-45deg); }
.nav .only-sm { display: none; }

/* パソコン：横一列 */
@media (min-width: 1101px) {
  .site-header .nav { display: flex; overflow: visible; margin-left: auto; flex-wrap: nowrap; }
  .site-header .nav a { padding: 8px 10px; }
}

/* タブレット・スマホ：「メニュー」ボタンで全項目を一覧表示 */
@media (max-width: 1100px) {
  .site-header .wrap { flex-wrap: nowrap; gap: 10px; padding-block: 10px; min-height: 60px; }
  .site-header .header-cta { margin-left: auto; }
  .menu-btn { display: inline-flex; }
  .site-header .nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%; order: initial; width: auto; margin: 0;
    padding: 12px max(16px, env(safe-area-inset-right, 0px)) 18px max(16px, env(safe-area-inset-left, 0px));
    background: var(--navy-deep); border-top: 1px solid rgba(255,255,255,.1); box-shadow: 0 12px 24px rgba(0,0,0,.3);
    grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; overflow: visible;
  }
  .site-header .nav.open { display: grid; }
  .site-header .nav a { display: flex; align-items: center; min-height: 48px; padding: 10px 14px; border-radius: 8px; background: rgba(255,255,255,.06); color: var(--on-navy); font-size: 15px; white-space: normal; }
  .site-header .nav a[aria-current="page"] { background: rgba(255,255,255,.16); box-shadow: inset 3px 0 0 var(--red); }
  .nav .only-sm { display: flex; }
}
@media (max-width: 420px) {
  .menu-btn { padding: 8px 10px; font-size: 13px; }
  .site-header .header-cta { padding: 7px 10px; font-size: 12px; }
  .brand svg { width: 30px; height: 30px; }
}
@media (max-width: 360px) { .menu-btn .lbl { display: none; } }

/* スマホ：体験申込ボタンは画面下に固定し、ヘッダーはロゴとメニューだけにする */
.mobile-cta { display: none; }
@media (max-width: 560px) {
  .site-header .header-cta { display: none; }
  .site-header .menu-btn { margin-left: auto; }
  .brand b { font-size: 15px; }
  .mobile-cta {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; gap: 10px; align-items: center; justify-content: center;
    padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
    background: var(--navy-deep); box-shadow: 0 -6px 16px rgba(0,0,0,.25);
  }
  .mobile-cta a { flex: 1; display: flex; justify-content: center; align-items: center; min-height: 46px; border-radius: 8px; font-weight: 700; font-size: 15px; text-decoration: none; }
  .mobile-cta .go-trial { background: var(--red); color: #fff; }
  .mobile-cta .go-book { flex: 0 0 auto; padding: 0 14px; border: 1px solid rgba(255,255,255,.3); color: var(--on-navy); font-size: 13px; }
  body { padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 1100px) {
  .site-header .brand { min-width: 0; flex-shrink: 1; }
  .site-header .brand > span { min-width: 0; }
  .site-header .brand b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 400px) { .site-header .brand b { font-size: 14px; } .site-header .brand { gap: 8px; } }

/* 長い見出しが1つの文節として扱われてもはみ出さないように */
h1, h2, h3, .lead { overflow-wrap: anywhere; }
.hero > .wrap > *, .news-wrap > *, .ranges > *, .join > *, .about > *, .teaser > * { min-width: 0; }
h4, dd, small, .t, .nm, .tt, td { overflow-wrap: anywhere; }
.kv { grid-template-columns: auto minmax(0, 1fr); }
.kv dd { min-width: 0; }
@media (max-width: 420px) { .card { padding: 20px 18px; } .kv { gap: 0 12px; } }