/* css/mobile-nav.css — Mobile Global Nav Floating Right Drawer (plan 1788264137593)
   Scope: 768px以下で FAB+右ドロワー、769-1024で navi詰め、1025+は不変
   Note: navi / footerButtons の実セレクタ(#navi/.mobile-footer-menu-buttons)は @media 内のみに限定
   依存: cocoon-child-style, var(--color-fuji-mid), var(--color-fuji-tint), var(--color-text), var(--color-border) */

/* ========== Base (PC default: hide new UI) ========== */
#tokikai-fab,
#tokikai-drawer,
#tokikai-drawer-overlay {
  /* desktop base: keep in DOM but hidden; media query below enforces visibility */
}

/* FAB base (hidden on desktop via media query min-width:769; visible only max-width:768) */
#tokikai-fab {
  position: fixed;
  top: calc(16px + env(safe-area-inset-top, 0px));
  right: calc(16px + env(safe-area-inset-right, 0px));
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--color-fuji-mid, #7369A0);
  color: #fff;
  border: none;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(95, 86, 142, 0.18);
  z-index: 10002;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 200ms ease, box-shadow 200ms ease;
}

#tokikai-fab:hover {
  background: #5F568E;
  box-shadow: 0 8px 24px rgba(95, 86, 142, 0.28);
}

#tokikai-fab:focus-visible {
  outline: 2px solid var(--color-fuji-mid, #7369A0);
  outline-offset: 2px;
}

/* hamburger lines */
#tokikai-fab .tokikai-fab-line {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: #fff;
  transition: transform 200ms ease, opacity 200ms ease, width 200ms ease;
  transform-origin: center;
}

#tokikai-fab.is-open .tokikai-fab-line:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

#tokikai-fab.is-open .tokikai-fab-line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

#tokikai-fab.is-open .tokikai-fab-line:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* Overlay */
#tokikai-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(46, 52, 64, 0.32);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
  z-index: 10001;
}

#tokikai-drawer-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* Drawer */
#tokikai-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 88vw;
  max-width: 380px;
  height: 100%;
  height: 100dvh;
  background: linear-gradient(180deg, #ffffff 0%, var(--color-bg-fuji, #F6F3FB) 100%);
  border-radius: 16px 0 0 16px;
  box-shadow: 0 16px 32px rgba(46, 52, 64, 0.14);
  transform: translateX(105%);
  transition: transform 300ms cubic-bezier(0.32, 0, 0.67, 0), visibility 0s linear 320ms;
  /* 2026-09-06 FAIL-8 製品修正: 閉時はフォーカス到達不可にする（axe aria-hidden-focus）。
     visibility切替をslide-out後に遅延させ、閉じるアニメーションを維持する */
  visibility: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  z-index: 10001;
  padding: 20px 0 24px;
  box-sizing: border-box;
}

/* Plan 1788596567219 M2: top 3px pale band (sky -> fuji), follows drawer radius.
   Decorative only: not sticky so it scrolls away with overflow-y:auto. */
#tokikai-drawer::before {
  content: "";
  display: block;
  height: 3px;
  margin: -20px 0 20px;
  background: linear-gradient(90deg, var(--color-sky, #8ED1E0), var(--color-fuji, #BBB7DA));
  border-radius: 16px 0 0 0;
}

#tokikai-drawer.is-open {
  transform: translateX(0);
  visibility: visible;
  transition: transform 300ms cubic-bezier(0.32, 0, 0.67, 0);
}

#tokikai-drawer:focus-visible {
  outline: 2px solid var(--color-fuji-mid, #7369A0);
  outline-offset: -2px;
}

/* Inner */
.tokikai-drawer-inner {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.tokikai-drawer-header {
  padding: 8px 20px 12px;
  background: var(--color-bg-fuji, #F6F3FB);
  border-bottom: 1px solid var(--color-border, #DCE6EE);
  margin-bottom: 4px;
}

.tokikai-drawer-title {
  font-size: 0.95rem;
  font-weight: 700;
  font-family: "Zen Maru Gothic", "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  color: var(--color-fuji-deep, #5F568E);
  letter-spacing: 0.04em;
}

/* Primary nav list (reused WP menu) */
.tokikai-drawer-list,
.tokikai-drawer-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tokikai-drawer-list li {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--color-border, #DCE6EE);
}

.tokikai-drawer-list a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 14px 20px;
  color: var(--color-text, #2E3440);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.4;
  transition: background-color 180ms ease, border-left-color 180ms ease, padding-left 180ms ease;
  border-left: 3px solid transparent;
  box-sizing: border-box;
}

/* Plan 1788596567219 M4: pale › at flex end (non-interfering). Left bar = current, right › = transition hint. */
.tokikai-drawer-list a::after {
  content: "›";
  margin-left: auto;
  padding-left: 12px;
  font-size: 0.85em;
  color: var(--color-fuji-mid, #7369A0);
  opacity: 0.55;
}

/* Follow-up 案1「面は現在地専用」(2026-09-05): 持続(現在地)/一過(hover)/操作(focus)を3ch分離。
   - 現在地のみ面(tint)を持つ + 左バーは一段濃いfuji-deep。唯一の持続signifier。
   - hoverは面なし + 淡バー(fuji pale)のみ。タッチ残像で現在地と誤認させないよう
     @media (hover:hover) に限定し、現在地行 (:not) では上書きしない。
   - focus-visibleは輪郭線(2px fuji-deep)のみ。面・バーに触れない。
   安易な色替えではなく「面を持つ資格」「ポインタ種別」「輪郭線」の構造分離。 */
.tokikai-drawer-list a:hover::after,
.tokikai-drawer-list a:focus-visible::after,
.tokikai-drawer-list a.is-active::after,
.tokikai-drawer-list a[aria-current="page"]::after {
  color: var(--color-accent, #2B6B58);
  opacity: 1;
}

/* Persistent: current page only — the sole owner of the tint surface.
   Follow-up 案1視認性(2026-09-05): 通常行は墨500走査に戻したため、現在地は
   藤deep + 700(実在Bold)で一点強調する。面×色×太さの三重で「今ここ」を示す。 */
.tokikai-drawer-list a.is-active,
.tokikai-drawer-list a[aria-current="page"] {
  background: var(--color-fuji-tint, #F6F3FB);
  border-left-color: var(--color-fuji-deep, #5F568E);
  color: var(--color-fuji-deep, #5F568E);
  font-weight: 700;
  padding-left: 17px;
}

/* Transient: hover preview — no surface, pale bar only, mouse/trackpad only. */
@media (hover: hover) {
  .tokikai-drawer-list a:hover:not(.is-active):not([aria-current="page"]) {
    background: transparent;
    border-left-color: var(--color-fuji, #BBB7DA);
    padding-left: 17px;
  }
}

/* Keyboard position — outline only, never mimics the current surface. */
.tokikai-drawer-list a:focus-visible {
  outline: 2px solid var(--color-fuji-deep, #5F568E);
  outline-offset: -2px;
}

/* sub-menu support if any */
.tokikai-drawer-list .sub-menu {
  border-top: 1px solid var(--color-border, #DCE6EE);
}

.tokikai-drawer-list .sub-menu a {
  padding-left: 36px;
  font-size: 0.92rem;
}

.tokikai-drawer-list .sub-menu a:hover,
.tokikai-drawer-list .sub-menu a:focus-visible {
  padding-left: 33px;
}

/* 案1 companion: sub-menu keeps its 36px-based indent in all three states
   (parent :not rules carry higher specificity, so re-assert 33px after). */
.tokikai-drawer-list .sub-menu a.is-active,
.tokikai-drawer-list .sub-menu a[aria-current="page"] {
  padding-left: 33px;
}

@media (hover: hover) {
  .tokikai-drawer-list .sub-menu a:hover:not(.is-active):not([aria-current="page"]) {
    padding-left: 33px;
  }
}

/* Aux area */
.tokikai-drawer-aux {
  margin-top: auto;
  padding: 16px 20px 0;
  border-top: 1px solid var(--color-border, #DCE6EE);
  margin-top: 16px;
}

/* 2026-09-06: drawer内検索は非表示（モバイル/タブレット＝drawer表示域の全体）。
   auxごと消すため検索・余白・区切り線が除去され、下部のbrand/snsが自動で上詰め。
   drawer自体が<=768隔離のためメディアクエリ不要。mobile-nav.jsからの参照なし。 */
.tokikai-drawer-aux {
  display: none;
}

.tokikai-drawer-search {
  margin-bottom: 12px;
}

.tokikai-drawer-search .search-box,
.tokikai-drawer-search .search-box.input-box,
.tokikai-drawer-search form,
.tokikai-drawer-search .search-form {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  float: none !important;
}

.tokikai-drawer-search input[type="search"],
.tokikai-drawer-search input[type="text"],
.tokikai-drawer-search .search-edit,
.tokikai-drawer-search input.search-edit {
  flex: 1 1 0% !important;
  width: auto !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 0.45em 0.8em;
  border: 1px solid var(--color-border, #DCE6EE);
  border-radius: 8px;
  font-size: 0.95rem;
  box-sizing: border-box;
  background: #fff;
  color: var(--color-text, #3E3A4A);
}

.tokikai-drawer-search input[type="search"]:focus,
.tokikai-drawer-search input[type="text"]:focus {
  outline: 2px solid var(--color-fuji-mid, #7369A0);
  outline-offset: 1px;
  border-color: var(--color-fuji-mid, #7369A0);
}

.tokikai-drawer-search button,
.tokikai-drawer-search input[type="submit"],
.tokikai-drawer-search .search-submit,
.tokikai-drawer-search button.search-submit {
  flex: 0 0 44px !important;
  width: 44px !important;
  min-height: 44px !important;
  min-width: 44px !important;
  margin: 0 !important;
  padding: 0 14px;
  border-radius: 8px;
  border: none;
  background: var(--color-fuji-mid, #7369A0);
  color: #fff;
  cursor: pointer;
  font-size: 0.9rem;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: static !important;
  float: none !important;
}

.tokikai-drawer-search button:hover {
  background: #5F568E;
}

/* Drawer brand footer (<=768 only via parent isolation; PC visually unchanged)
   Size basis (rev.20260905-2): 1.2rem per user request (2 steps up from 1rem).
   0.85rem was the smallest text in the drawer (below sub-menu 0.92rem/title
   0.95rem and M3 Label Large 14sp floor for drawer labels) and unreadable.
   Hierarchy vs nav is kept via centering + fuji-deep color + footer isolation
   instead of smaller size. */
.tokikai-drawer-brand {
  padding: 16px 20px 0;
  text-align: center;
}
.tokikai-drawer-brand a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 6px 16px;
  color: var(--color-fuji-deep, #5F568E);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: 0.06em;
  text-decoration: none;
  text-transform: none;
  white-space: nowrap;
  border-radius: 8px;
}
/* Brand flanking dashes are decorative (AT uses aria-label); nbsp keeps "- tokikai -" on one line */
.tokikai-drawer-brand a::before {
  content: "-\00a0";
}
.tokikai-drawer-brand a::after {
  content: "\00a0-";
}
.tokikai-drawer-brand a:hover {
  background: var(--color-fuji-tint, #F6F3FB);
  text-decoration: underline;
}
.tokikai-drawer-brand a:focus-visible {
  outline: 2px solid var(--color-fuji-mid, #7369A0);
  outline-offset: 2px;
}
/* Plan 1788612339881: drawer SNS round buttons (<=768 only, PC isolation below).
   Muted fuji #8A83B5 = fuji-mid #7369A0 desaturated+lightened (hue kept).
   White glyph contrast ~3.5:1 passes WCAG 1.4.11 (>=3:1); fallback #7E76AC if recheck fails.
   44px circle = WCAG 2.5.8 + Apple HIG 44pt; margin-top 20px breathing (rev.20260905: 12から緩和).
   Anti "pig-nose" grouping (rev.20260905-2): gap 32px (=8pt x4) breaks proximity grouping of two
   identical circles; glyph 22px (50% of disc) keeps logos legible as YouTube/X marks, not dots.
   Circles kept (standard SNS icon-button pattern); squircles would still group at close distance. */
.tokikai-drawer-sns {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 32px;
  margin-top: 20px;
  padding: 0 20px;
  box-sizing: border-box;
}
.tokikai-sns-btn {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 50%;
  background: #8A83B5;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 20px;
  line-height: 1;
  border: none;
  cursor: pointer;
  transition: background-color 180ms ease;
}
.tokikai-sns-btn i {
  font-size: 22px;
  line-height: 1;
}
.tokikai-sns-btn svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
  display: block;
}
.tokikai-sns-btn:hover,
.tokikai-sns-btn:focus,
.tokikai-sns-btn:focus-visible,
.tokikai-sns-btn:active {
  background: #5F568E;
  color: #fff;
}
/* Glyph lock: parent-theme a:hover/a:visited link colors must not recolor the white icon.
   :hover specificity (0,2,0) beats generic a:hover (0,1,1); descendants pinned explicitly. */
.tokikai-sns-btn:visited {
  color: #fff;
}
.tokikai-sns-btn:hover i,
.tokikai-sns-btn:hover svg,
.tokikai-sns-btn:focus i,
.tokikai-sns-btn:focus svg,
.tokikai-sns-btn:focus-visible i,
.tokikai-sns-btn:focus-visible svg,
.tokikai-sns-btn:active i,
.tokikai-sns-btn:active svg,
.tokikai-sns-btn:visited i,
.tokikai-sns-btn:visited svg {
  color: #fff;
  fill: currentColor;
}
.tokikai-sns-btn:active {
  transform: translateY(0);
}
.tokikai-sns-btn:focus-visible {
  outline: 2px solid #5F568E;
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .tokikai-drawer-sns,
  .tokikai-sns-btn {
    transition: none !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tokikai-drawer-brand a {
    transition: none !important;
  }
}

/* Body scroll lock helper */
html.tokikai-drawer-open,
html.tokikai-drawer-open body {
  overscroll-behavior: contain;
}

/* ========== Breadcrumb abolition (global) ========== */
#breadcrumb,
.breadcrumb,
.breadcrumb-page,
.breadcrumb-category {
  display: none !important;
}

/* ========== Visibility isolation ========== */
/* PC (>=769px): hide new UI completely */
@media (min-width: 769px) {
  #tokikai-fab,
  #tokikai-drawer,
  #tokikai-drawer-overlay,
  .tokikai-drawer-sns {
    display: none !important;
  }
}

/* SP/Tablet-small (<=768px): hide legacy double nav, show FAB/drawer */
@media (max-width: 768px) {
  #navi {
    display: none !important;
  }

  .mobile-header-menu-buttons,
  .mobile-menu-buttons,
  .mobile-footer-menu-buttons {
    display: none !important;
  }

  /* collapse gap left by fixed header offset (Cocoon adds 46px via .mblt-header-mobile-buttons) */
  .mblt-header-mobile-buttons,
  .mblt-header-and-footer-mobile-buttons {
    margin-top: 0 !important;
  }
  body.mblt-header-mobile-buttons,
  body.mblt-header-and-footer-mobile-buttons {
    margin-top: 0 !important;
  }

  /* legacy checkbox drawer interference guard */
  #navi-menu-content,
  #navi-menu-input,
  #navi-menu-open,
  #navi-menu-close,
  .navi-menu-content,
  .menu-content {
    display: none !important;
  }

  /* header compression 110px -> 80px (top-page has #header display:none so unaffected) */
  body:not(.home) .header .header-in {
    min-height: 80px !important;
  }

  .header-site-title {
    font-size: 1.2em !important;
  }

  /* ensure FAB visible */
  #tokikai-fab {
    display: flex !important;
  }
}

/* ========== Tablet 769-1024: keep #navi but tighten to prevent wrap ========== */
@media (min-width: 769px) and (max-width: 1024px) {
  #navi .navi-in > ul {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center;
    gap: 0;
  }

  #navi .navi-in > ul li {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    /* Plan 1788708694178: 内容比例(flex-basis:auto)で文字数差が出るため均等割付(flex-basis:0)へ。項目数変動(TOKIKAI 900/901)はflexが自動再配分 */
    flex: 1 1 0 !important;
    height: 56px !important;
  }

  #navi .navi-in a {
    padding: 16px 12px !important;
    font-size: 14px !important;
    white-space: nowrap !important;
    /* Plan 1788708694178: 均等セル内で中央・クリップ（ellipsisなし・折返しなし）。a側でclipするためliのoverflowやsub-menu配置には触らない */
    text-align: center !important;
    overflow: hidden !important;
  }
}

/* ========== Reduced motion ========== */
@media (prefers-reduced-motion: reduce) {
  #tokikai-fab,
  #tokikai-fab .tokikai-fab-line,
  #tokikai-drawer,
  #tokikai-drawer::before,
  #tokikai-drawer-overlay,
  .tokikai-drawer-list a,
  .tokikai-drawer-list a::after,
  .tokikai-drawer-sns,
  .tokikai-sns-btn {
    transition: none !important;
  }

  #tokikai-drawer {
    transition: none !important;
  }
}

/* ========== noscript fallback: when JS disabled, show #navi at <=768 ========== */

/* Fix: 768 unify + TOKIKAI hide @769-900 + gap collapse — plan 1788333307603 rev.20260902
   A: 769以上で旧834由来のモバイル表示を完全抑止し、PC #naviのみに統一。1023由来の body margin-top 46px を769以上で打ち消し余白を上へ詰める。
   B: 769-900でヘッダー側 TOKIKAI ブランド（.header-site-title/.logo等）と、将来 #navi 内に TOKIKAI 文字列を含む li が追加された場合の li を非表示。トップ（先頭がトップの場合）は残す — 前版の li:first-child 非表示を撤廃。
   承認済み 2026-09-02: 余白詰め + トップ残し/TOKIKAI消し */
@media (min-width: 769px) {
  #navi { display: block !important; }
  #navi .navi-in > .menu-header,
  #navi .navi-in > ul.menu-header,
  .navi-in > .menu-header {
    display: flex !important;
  }
  #navi .navi-in > .menu-mobile,
  #navi .menu-mobile,
  .navi-in > .menu-mobile {
    display: none !important;
  }
  .slicknav_menu { display: none !important; }
  .mobile-header-menu-buttons,
  .mobile-menu-buttons,
  .mobile-footer-menu-buttons,
  #navi-menu-content, #navi-menu-input, #navi-menu-open, #navi-menu-close {
    display: none !important;
  }
  #tokikai-fab, #tokikai-drawer, #tokikai-drawer-overlay, .tokikai-drawer-sns { display: none !important; }
  /* 769-1023で Cocoon が付与する 46px マージンを潰し、旧モバイル帯消去後の余白を上へ詰める */
  body.mblt-header-mobile-buttons,
  body.mblt-header-and-footer-mobile-buttons {
    margin-top: 0 !important;
  }
  .mblt-header-mobile-buttons,
  .mblt-header-and-footer-mobile-buttons {
    margin-top: 0 !important;
  }
}

@media (max-width: 768px) {
  #navi { display: none !important; }
  #tokikai-fab { display: flex !important; }
}

@media (min-width: 769px) and (max-width: 900px) {
  /* #navi 内の TOKIKAI 項目は JS (mobile-nav.js: updateTokikai) が 769-900 で text 判定して is-hidden-tokikai を付与 */
  #navi .menu-header li.is-hidden-tokikai {
    display: none !important;
  }
}

/* Fix: top tokikai pseudo overlap — plan 1788337987810 — CSS-only (distinct from prior JS li hide)
   Rev.20260902-2: sync hide start with navi second-stage (769-1024 tight) entry @1024 per user request.
   Before: max-width:950 left gap 951-1024 where tight active but pseudo visible -> overlap.
   After: max-width:1024 hides pseudo exactly when tight layout begins. True overlap-free threshold is ~1095 (see work/tokikai_threshold.mjs), but 1024 aligns with layout change as requested. */
@media (max-width: 1024px) {
  .top-page #navi::before {
    content: none !important;
    display: none !important;
  }
}
/* NOTE: prior li.is-hidden-tokikai remains for audit but not used for ::before — see plan 1788337987810 */

/* ========== Plan 1788339328530: global-navi intermediate padding fix ========== */
/* Plan A: .wrap responsive fix (H1 root cause) — 1256px fixed -> fluid, only intermediate+desktop, not Mobile */
@media (min-width: 769px) and (max-width: 1256px) {
  .wrap {
    width: 100% !important;
    max-width: 1256px !important;
    box-sizing: border-box !important;
  }
  #navi-in.wrap,
  #content-in.wrap,
  #header-in.wrap {
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }
}

/* Plan B: tighten navi at 769-1024 */
@media (min-width: 769px) and (max-width: 1024px) {
  #navi {
    overflow-x: visible;
  }
  #navi .navi-in > ul {
    justify-content: center !important;
    gap: 0 !important;
  }
  #navi .navi-in a {
    padding: 16px 10px !important;
    font-size: 13px !important;
    letter-spacing: -0.01em !important;
    white-space: nowrap !important;
  }
}
/* main overflow fix at 769-1023 only (Cocoon's max-width:1023 block)
   Child overrides width:100% causes 10px overflow when Cocoon expects width:auto */
@media (min-width: 769px) and (max-width: 1023px) {
  main.main,
  #main.main,
  body.page-id-9 #main,
  body.page-id-11 #main,
  body.page-id-13 #main,
  body.page-id-3141 #main,
  body.blog-page #main,
  .top-page #main,
  .top-page .main {
    width: auto !important;
    max-width: none !important;
    margin-left: 10px !important;
    margin-right: 10px !important;
    box-sizing: border-box !important;
  }
  /* explicit override for Cocoon's 1023 rule which converts to display:block */
  main.main,
  div.sidebar {
    display: block !important;
    width: auto !important;
    margin: 10px !important;
    box-sizing: border-box !important;
  }
  #content-in.wrap {
    width: auto !important;
    box-sizing: border-box !important;
  }
}

/* Ensure 1024 itself also uses auto margin centering, not overflow */
@media (min-width: 1024px) and (max-width: 1256px) {
  .wrap {
    width: 100% !important;
    max-width: 1256px !important;
  }
}

/* Top page 1024 flex overflow fix: main margin 0 to avoid 5px overflow */
@media (min-width: 1024px) and (max-width: 1024px) {
  .top-page #main,
  .top-page .main {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}
@media (min-width: 769px) and (max-width: 1256px) {
  .top-page #main,
  .top-page .main {
    box-sizing: border-box !important;
  }
}

/* plan 1788588779809: soniria hero-title 中間幅769-1024は流体fitで1行維持（旧wrap許可を撤去）
   plan 1788714920275 (2026-09-07 Playwright実測: 835:+2.9NG/850:+0.6NG/880-980余裕<20のため下限0.78死守＋切片引下げ＋sep 0.35em化。769-834はresponsive-834の高詳細度則が後勝ちのため不変)
   plan 1788744437104: 見た目維持優先で中間係数のみ微減 (1.607vw→1.55vw)。上限1em・下限0.78em維持。不足分は②is-wrappedフォールバックで吸収。余裕目標+10-15px。 */
@media (min-width: 769px) and (max-width: 1024px) {
  .page-id-11 .character-soniria-hero-title {
    white-space: normal !important;
    text-align: center !important;
    text-wrap: none !important;
    overflow-wrap: break-word !important;
    /* 実測fit＋安全マージン: 835で約13.6px(0.78emフロア付近)・900で約14.3px・1024で約16.5px（前回14.04/14.8/17.1から微減・PC 19.8px不変・約10-15px確保） */
    font-size: clamp(0.78em, calc(0.035em + 1.55vw), 1em) !important;
    letter-spacing: -0.02em !important;
    padding: 0.4em 0.4em !important;
  }
  .page-id-11 .character-soniria-hero-phrase {
    display: inline-block !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
  }
  .page-id-11 .character-soniria-hero-sep {
    display: inline-block !important;
    width: 1px !important;
    height: 1em !important;
    vertical-align: middle !important;
    margin: 0 0.35em !important;
  }
}

/* Top hero/quicklinks intermediate overflow fix at 769-800 (calc bleed causes 3px overflow) */
@media (min-width: 769px) and (max-width: 800px) {
  .top-page .top-hero,
  .top-page .top-quicklinks {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
    left: auto !important;
    right: auto !important;
  }
  .top-page .top-hero {
    overflow: hidden;
  }
}

/* ========== Plan 1788586701361: fixed-page header center+enlarge (<=768 only, PC/top/AMP untouched) ==========
   Scope: body.page:not(.home):not(.top-page) — /creation/(9) /character/(11) /social/(13) /policy/(3141)。
   Top(/, .home.top-page)は #header display:none のため実害なしだが明示除外。/blog/(body.blog, .pageなし)は厳密スコープ外として旧値維持。AMPは mobile-nav 未読込のため対象外。
   (Superseded selector/padding by plan 1788587849135 below; block kept for cascade order. Do not delete.) */
@media (max-width: 768px) {
  body.page:not(.home):not(.top-page) .header .header-in {
    min-height: 80px !important;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  body.page:not(.home):not(.top-page) .header-text-overlay {
    position: absolute;
    inset: 0;
    margin: auto;
    transform: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 90%;
    max-width: 800px;
    text-align: center;
    z-index: 1;
    overflow-wrap: break-word;
    text-wrap: balance;
  }
  body.page:not(.home):not(.top-page) .header-site-title {
    font-size: 1.4em !important;
    margin: 0 0 0.25em 0;
    line-height: 1.3;
  }
  body.page:not(.home):not(.top-page) .header-site-tagline {
    font-size: 0.9em !important;
    margin: 0;
    line-height: 1.5;
  }
}

/* Plan 1788586701361: <=480 micro-adjust (superseded by plan 1788587849135 below; kept for order, overridden) */
@media (max-width: 480px) {
  body.page:not(.home):not(.top-page) .header-text-overlay {
    padding-right: 56px;
    box-sizing: border-box;
  }
  body.page:not(.home):not(.top-page) .header-site-title {
    font-size: 1.35em !important;
  }
  body.page:not(.home):not(.top-page) .header-site-tagline {
    font-size: 0.875em !important;
  }
}

/* ========== Plan 1788587849135: header mobile center-oneline unify (<=768/<=480 only, PC/top/AMP untouched) ==========
   Scope6: body.page + body.blog(.blog-page) + body.single — /blog/ /creation(9) /character(11) /social(13) /policy(3141) /single。
   Body実測(2026-09-05 Playwright): blog=`blog ... blog-page`(page/homeなし) / single=`single single-post ...`(page/homeなし) / pages=`page page-id-*`。
   前回不具合の修正: (1)片側padding-right:56px(390でtitle/tag中心167 vs 画面195＝左28pxズレ)を左右対称padding-inlineへ(画面中心不動)。
   (2)blog/singleが旧値(80px+1.2em/0.85em相当)のまま→同一セレクタで6種統一。
   全体2行(1行目title 1行＋2行目tagline 1行の縦積みflex-column)。各要素nowrap＋clip(ellipsis禁止・欠け不合格→font縮小のみ)。
   FABは左右対称ガター＋font逆算で回避(テキスト矩形で判定。ovの90%ボックス自体はFAB下を通過するがz-indexでFABが上のため無害)。
   768: 高さ80px固定・title1.4em/tag0.9em維持。480: min-height:80＋padding-block呼吸(上限110)。absolute inset:0維持で中央±2px。
   Plan 1788588182067 Y-optical: 幾何中央(gap均等)確認済→光学補正としてoverlay全体を下へ3px (translateY)。上げ方向禁止。PC/769+不変。 */
@media (max-width: 768px) {
  body.page:not(.home):not(.top-page) .header .header-in,
  body.blog:not(.home):not(.top-page) .header .header-in,
  body.single:not(.home):not(.top-page) .header .header-in {
    min-height: 80px !important;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  body.page:not(.home):not(.top-page) .header-text-overlay,
  body.blog:not(.home):not(.top-page) .header-text-overlay,
  body.single:not(.home):not(.top-page) .header-text-overlay {
    position: absolute;
    inset: 0;
    margin: auto;
    transform: translateY(3px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 90%;
    max-width: 800px;
    text-align: center;
    z-index: 1;
    box-sizing: border-box;
    padding-inline: 24px;
    overflow-wrap: normal;
  }
  body.page:not(.home):not(.top-page) .header-site-title,
  body.blog:not(.home):not(.top-page) .header-site-title,
  body.single:not(.home):not(.top-page) .header-site-title {
    font-size: 1.4em !important;
    margin: 0 0 0.25em 0;
    margin-inline: auto;
    text-align: center;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    overflow-wrap: normal;
    max-width: 100%;
  }
  body.page:not(.home):not(.top-page) .header-site-tagline,
  body.blog:not(.home):not(.top-page) .header-site-tagline,
  body.single:not(.home):not(.top-page) .header-site-tagline {
    font-size: 0.9em !important;
    margin: 0;
    margin-inline: auto;
    text-align: center;
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    overflow-wrap: normal;
    max-width: 100%;
  }
}

/* Plan 1788587849135: <=480 — 対称ガター＋各1行適合＋最小縦幅 (前回padding-right:56pxを対称20pxで上書き)
   Plan 1788588182067 Y-optical: 480帯も768継承のtranslateY(3px)を明示維持。帯別最適化時はこの値を2-6pxで調整(上げ禁止)。 */
@media (max-width: 480px) {
  body.page:not(.home):not(.top-page) .header .header-in,
  body.blog:not(.home):not(.top-page) .header .header-in,
  body.single:not(.home):not(.top-page) .header .header-in {
    min-height: 80px !important;
    height: auto;
    max-height: 110px;
    padding-block: 8px;
    box-sizing: border-box;
  }
  body.page:not(.home):not(.top-page) .header-text-overlay,
  body.blog:not(.home):not(.top-page) .header-text-overlay,
  body.single:not(.home):not(.top-page) .header-text-overlay {
    padding-right: 20px;
    padding-left: 20px;
    padding-inline: 20px;
    box-sizing: border-box;
    transform: translateY(3px);
  }
  body.page:not(.home):not(.top-page) .header-site-title,
  body.blog:not(.home):not(.top-page) .header-site-title,
  body.single:not(.home):not(.top-page) .header-site-title {
    font-size: 1.2em !important;
    letter-spacing: 0;
  }
  body.page:not(.home):not(.top-page) .header-site-tagline,
  body.blog:not(.home):not(.top-page) .header-site-tagline,
  body.single:not(.home):not(.top-page) .header-site-tagline {
    /* 390有効幅(351-40=311)に対し21字taglineを1行に収め＋FAB左318と非交差→ 実測0.75em=12pxで右319.7と1.7px接触のため0.72em=11.5pxへ(約239px・右314・gap約4px) */
    font-size: 0.72em !important;
    letter-spacing: -0.01em;
  }
}

/* ========== Plan 1788706779411: <=480 drawer幅 80vw/max320 (既定88vw/max380の上書き) ==========
   同一詳細度(#tokikai-drawer)でファイル末尾に置くため順番で勝つ。開閉・色・ボタン不変。
   481-768は既定88vw/max380のまま。769+は非表示隔離のため影響なし。
   幅目安: 360→288/後72, 390→312/後78, 480→320上限/後160 (外側タップ余白56px+確保)。 */
@media (max-width: 480px) {
  #tokikai-drawer {
    width: 80vw;
    max-width: 320px;
  }
}