/* ===== ページ間でヘッダーが横ズレする問題の根治 =====
   各ページの body{overflow-x:hidden} が body を縦スクロール要素にし、
   ページの長短でスクロールバーの有無が変わって fixed ヘッダーが横にズレる。
   スクロール要素を html に一本化し、スクロールバー幅を常時確保する。 */
html{overflow-x:hidden;overflow-y:scroll;scrollbar-gutter:stable}
body{overflow-x:visible!important}

/* ===== ナビ項目が増えた分の詰め（MANGA 追加対応） =====
   多言語ページは最大10項目あり、標準の gap:2rem だとロゴに接触・溢れする。 */
@media(min-width:901px){
  header{gap:1.5rem}
  nav{gap:1.25rem!important}
  nav a{font-size:.88rem!important}
}
/* ノートPC幅ではさらに詰める（多言語ページは10項目あるため） */
@media(min-width:901px) and (max-width:1400px){
  header{padding:0 1.25rem!important;gap:1rem}
  nav{gap:.85rem!important}
  nav a{font-size:.8rem!important}
  nav a.nav-cta{padding:.45rem .9rem!important}
}
/* タブレット横向き（〜1150px）はロゴを画像だけにして幅を確保する */
@media(min-width:901px) and (max-width:1150px){
  nav{gap:.6rem!important}
  nav a{font-size:.74rem!important}
  .logo-text{display:none}
}

/* ===== テーマ切替（ダーク既定 / ライト上書き）＋ トグルボタン ===== */

/* トグルボタン（両テーマ共通・変数で追従） */
#theme-toggle{
  position:fixed;left:1.1rem;bottom:1.1rem;z-index:3000;
  width:46px;height:46px;border-radius:50%;
  border:1px solid var(--gray-700);background:var(--gray-900);color:var(--yellow);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 20px rgba(0,0,0,0.28);transition:transform .25s,border-color .25s,background .25s;
}
#theme-toggle:hover{border-color:var(--yellow);transform:scale(1.08)}
#theme-toggle svg{width:20px;height:20px}

/* ===== ライトモード上書き ===== */
html[data-theme="light"]{
  --black:#F7F6F2; --dark:#FFFFFF; --white:#1A1A1A;
  --gray-900:#F1F0EB; --gray-800:#E6E5DF; --gray-700:#D3D2CB;
  --gray-400:#5C5C5C; --gray-300:#363636;
}
html[data-theme="light"] body{background:var(--black)}

/* ヘッダー・オーバーレイ（黒のハードコードを明色へ） */
html[data-theme="light"] header{background:rgba(255,255,255,0.82)!important;border-bottom:1px solid rgba(0,0,0,0.07)!important}
html[data-theme="light"] header.scrolled{background:rgba(255,255,255,0.96)!important;border-bottom-color:rgba(0,0,0,0.12)!important}
html[data-theme="light"] .mobile-nav{background:rgba(255,255,255,0.98)!important}
html[data-theme="light"] .toolbar{background:rgba(255,255,255,0.9)!important}
html[data-theme="light"] .logo-text{color:#1A1A1A}
html[data-theme="light"] nav a{color:#555}
html[data-theme="light"] .hamburger span{background:#1A1A1A}

/* ヒーローのグラデーション・見出し */
html[data-theme="light"] .hero::after{background:linear-gradient(to top,var(--black),transparent)!important}
html[data-theme="light"] .hero::before{background:radial-gradient(circle,rgba(255,229,0,0.16) 0%,transparent 70%)!important}
html[data-theme="light"] .hero h1,html[data-theme="light"] .hero h1 span{color:#1A1A1A!important}

/* 黄色「文字」アクセント → 視認できる濃いゴールド */
html[data-theme="light"] :is(.section-label,.event-date,.timeline-year,.video-label,.lightbox-date,.case-badge){color:#9C7C00!important}
html[data-theme="light"] .case-badge{background:rgba(255,229,0,0.16)!important}
html[data-theme="light"] .hero-badge{color:#7E6400!important;background:rgba(255,229,0,0.2)!important;border-color:rgba(180,140,0,0.4)!important}
html[data-theme="light"] :is(.stat-number,.stat-num){color:#1A1A1A!important}

/* 黄色「背景」要素 → 文字を必ず黒に */
html[data-theme="light"] :is(.btn-primary,.nav-cta,.card-tag,.hc-tag,.a-tag,.chip.active,.filter-btn.active,.work-card-overlay span,.flow-badge,.type-badge,.activity-card-btn,.service-btn,.cta .btn-primary){color:#1A1A1A!important}

/* カード上の暗グラデーション */
html[data-theme="light"] .work-card-overlay{background:linear-gradient(to top,rgba(0,0,0,0.5) 0%,transparent 50%)!important}

/* ライトボックス（作品詳細） */
html[data-theme="light"] .lightbox{background:rgba(255,255,255,0.97)!important}

/* フッター・SNS */
html[data-theme="light"] footer{background:#EFEEE8!important;border-top-color:#DCDBD4!important}
html[data-theme="light"] footer p{color:#8A8A8A!important}
html[data-theme="light"] .social-link{background:#ECEBE5!important;color:#555!important}
html[data-theme="light"] .social-link:hover{background:var(--yellow)!important;color:#1A1A1A!important}

/* フォーム（contact）の暗い入力欄 */
html[data-theme="light"] :is(input,select,textarea){background:#FFFFFF!important;border-color:#D3D2CB!important;color:#1A1A1A!important}
html[data-theme="light"] .contact-card{background:linear-gradient(180deg,rgba(0,0,0,0.02),rgba(0,0,0,0.01))!important;border-color:rgba(180,140,0,0.25)!important}