/* ヘッダー・フッター。変数は --hf- を頭に付けて本文側の変数と名前が衝突しないようにし、
   rem は基準の文字サイズ（16px／700px以下 15px／380px以下 14px）で換算する */
:root { --hf-cta-warm: #FF6D00; --hf-font-en: 'Oswald', sans-serif; --hf-font-jp: 'Noto Sans JP', sans-serif; --hf-ink: #171b20; --hf-sk-accent: #e63b1a; --hf-sk-accent-deep: #b82e14; --hf-sk-grad-dark: linear-gradient(135deg, #12141c 0%, #1a1d2e 100%); --hf-sk-ink: #0e0e10; --hf-sk-ink-muted: #6b6b73; --hf-sk-ink-soft: #2b2b30; --hf-sk-inofine: #4361ee; --hf-sk-magenta: #e040a0; --hf-sk-mono: 'Oswald', 'Noto Sans JP', sans-serif; --hf-sk-rule: #e3e0d4; --hf-tx-3: #8b959c; --hf-rem: 16px; --hf-scroll: 112px; }
@media (max-width: 700px) { :root { --hf-rem: 15px; --hf-scroll: 100px; } }
@media (max-width: 380px) { :root { --hf-rem: 14px; } }
/* ヘッダー・フッター内の文字と a の既定（本文側の文字色・a の色・ホバーを持ち込まない） */
:where(.gh, .mobile-menu-overlay, .sub-nav, .ph-header, .ftr-gs) { font-size: var(--hf-rem); line-height: 1.8; font-family: var(--hf-font-jp); color: #111111; }
:where(.gh, .mobile-menu-overlay, .sub-nav, .ftr-gs) a { color: inherit; text-decoration: none; transition: 0.3s; }
:where(.gh, .mobile-menu-overlay, .sub-nav, .ftr-gs) a:hover { color: inherit; }
/* ヘッダー・フッター内は既定の content-box（個別に指定した要素とボタンを除く） */
:where(.gh, .mobile-menu-overlay, .sub-nav, .ph-header, .ftr-gs), :where(.gh, .mobile-menu-overlay, .sub-nav, .ph-header, .ftr-gs) *, :where(.gh, .mobile-menu-overlay, .sub-nav, .ph-header, .ftr-gs)::before, :where(.gh, .mobile-menu-overlay, .sub-nav, .ph-header, .ftr-gs)::after, :where(.gh, .mobile-menu-overlay, .sub-nav, .ph-header, .ftr-gs) *::before, :where(.gh, .mobile-menu-overlay, .sub-nav, .ph-header, .ftr-gs) *::after { box-sizing: content-box; }
:where(.gh, .mobile-menu-overlay, .sub-nav, .ftr-gs) button { box-sizing: border-box; }
:where(header.gh) { background: rgba(255, 255, 255, 0.95); border-bottom: 3px solid #000; height: clamp(60px, 10vw, 80px); display: flex; align-items: center; position: fixed; top: 0; left: 0; width: 100%; z-index: 99999; }
.mobile-menu-overlay { position: fixed; top: clamp(60px, 10vw, 80px); left: 0; width: 100%; height: calc(100vh - clamp(60px, 10vw, 80px)); background: #fff; z-index: 10000; display: none; flex-direction: column; padding: 20px; border-top: 3px solid #000; overflow-y: auto; }
.mobile-menu-overlay.open { display: flex; }
.mobile-menu-overlay ul { list-style: none; padding: 0; text-align: center; }
.mobile-menu-overlay li { margin: 15px 0; border-bottom: 1px dashed #eee; padding-bottom: 10px; }
.mobile-menu-overlay a { font-size: calc(1.2 * var(--hf-rem)); font-weight: 900; color: #000; font-family: var(--hf-font-jp); }
.ftr-gs-sns .sns-x { background: #000; }
.ftr-gs-sns .sns-line { background: #06C755; }
.ftr-gs-sns .sns-discord { background: #5865F2; }
.ftr-gs-sns .sns-mail { background: #1E90FF; }
.ftr-gs-sns .sns-tiktok { background: #000; }
.ftr-gs-sns .sns-youtube { background: #FF0000; }
:where(footer.ftr-gs) { background: #000; color: #888; text-align: center; padding: 40px; font-size: calc(0.8 * var(--hf-rem)); font-family: var(--hf-font-en); }
:where(footer.ftr-gs) { background: var(--hf-ink) !important; }
.gh { position: fixed; top: 0; left: 0; right: 0; z-index: 80; background: rgba(255, 255, 255, .94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--hf-sk-rule); }
.gh-in { max-width: 1280px; margin: 0 auto; padding: 14px 28px; display: flex; align-items: center; gap: 24px; }
.gh-logo { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.gh-logo img { height: 30px; width: auto; display: block; }
.gh-tag { font-size: 11px; color: var(--hf-sk-ink-muted); letter-spacing: .06em; border-left: 1px solid var(--hf-sk-rule); padding-left: 14px; line-height: 1.4; }
.gh-tag b { color: var(--hf-sk-ink); font-weight: 700; display: block; font-size: 11px; }
.gh-vol { color: var(--hf-sk-ink); font-family: var(--hf-sk-mono); font-weight: 600; font-size: 12px; letter-spacing: .04em; }
.gh-nav { display: flex; align-items: center; gap: 20px; margin-left: auto; }
.gh-nav a { font-size: 13px; color: var(--hf-sk-ink-soft); font-weight: 500; text-decoration: none; transition: color .15s; }
.gh-nav a:hover { color: var(--hf-sk-inofine); }
.gh-burger { display: none; border: none; background: none; font-size: calc(1.6 * var(--hf-rem)); cursor: pointer; color: #000; z-index: 10001; }
@media (max-width: 980px) {
  .gh-nav { display: none; }
  .gh-burger { display: block; margin-left: auto; }
  .gh-in { padding: 12px 16px; }
}
.mobile-menu-overlay { position: fixed; top: clamp(56px, 10vw, 62px); left: 0; width: 100%; height: calc(100vh - clamp(56px, 10vw, 62px)); background: rgba(255, 255, 255, .98); z-index: 10000; display: none; flex-direction: column; padding: 20px; border-top: 1px solid var(--hf-sk-rule); overflow-y: auto; backdrop-filter: blur(10px); }
.mobile-menu-overlay.open { display: flex; }
.mobile-menu-overlay ul { list-style: none; margin: 0; padding: 0; text-align: center; }
.mobile-menu-overlay li { margin: 14px 0; border-bottom: 1px solid #eee; padding-bottom: 10px; }
.mobile-menu-overlay a { font-size: calc(1.1 * var(--hf-rem)); font-weight: 900; color: #000; text-decoration: none; }
.mobile-menu-overlay a:hover { color: var(--hf-sk-inofine); }
.mobile-menu-overlay .cta-link { color: var(--hf-cta-warm); }
.mobile-menu-overlay .mobile-menu-divider { margin-top: 20px; border-top: 2px solid #e0e0e0; padding-top: 20px; }
.sub-nav { position: fixed; top: 62px; left: 0; right: 0; z-index: 79; background: rgba(255, 255, 255, .96); backdrop-filter: blur(8px); border-bottom: 1px solid var(--hf-sk-rule); transform: translateY(-100%); transition: transform .28s cubic-bezier(.2, .7, .2, 1); pointer-events: none; }
.sub-nav.show { transform: translateY(0); pointer-events: auto; }
.sub-nav-in { max-width: 1280px; margin: 0 auto; padding: 10px 28px; display: flex; align-items: center; gap: 22px; overflow-x: auto; scrollbar-width: none; }
.sub-nav-in::-webkit-scrollbar { display: none; }
.sub-nav-in a { font-size: 12px; color: var(--hf-sk-ink-muted); font-weight: 600; letter-spacing: .04em; white-space: nowrap; padding: 6px 0; border-bottom: 2px solid transparent; text-decoration: none; transition: color .15s, border-color .15s; }
.sub-nav-in a:hover { color: var(--hf-sk-ink); border-bottom-color: var(--hf-sk-ink); }
.sub-nav-in a.sub-nav-cta { color: var(--hf-sk-accent); font-weight: 800; }
.sub-nav-in a.sub-nav-cta:hover { color: var(--hf-sk-accent-deep); border-bottom-color: var(--hf-sk-accent); }
.ph-header { height: 62px; }
@media (max-width: 700px) {
  .sub-nav { top: 56px; }
  .sub-nav-in { padding: 8px 16px; gap: 16px; }
  .ph-header { height: 56px; }
}
.ftr-gs { background: var(--hf-sk-grad-dark); color: rgba(255, 255, 255, .7); padding: 0; margin-top: 0; }
.ftr-gs-inner { max-width: 1200px; margin: 0 auto; padding: 72px 32px 32px; }
.ftr-gs-top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 48px; }
.ftr-gs-brand { display: flex; flex-direction: column; gap: 14px; }
.ftr-gs-logo img { display: block; width: auto; height: auto; max-width: 220px; max-height: 56px; }
.ftr-gs-tagline { font-size: 13px; line-height: 1.7; color: rgba(255, 255, 255, .55); margin: 0; }
.ftr-gs-sns { display: flex; gap: 10px; margin-top: 6px; }
.ftr-gs-sns a { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; color: #fff; text-decoration: none; box-shadow: 0 4px 10px rgba(0, 0, 0, .25); transition: transform .18s, box-shadow .18s; }
.ftr-gs-sns a:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 8px 20px rgba(0, 0, 0, .35); }
.ftr-gs-sns .sns-x { background: #000; border: 1.5px solid rgba(255, 255, 255, .35); }
.ftr-gs-sns .sns-line { background: #06c755; }
.ftr-gs-sns .sns-discord { background: #5865F2; }
.ftr-gs-sns .sns-mail { background: var(--hf-sk-magenta); }
.ftr-gs-sns .sns-tiktok { background: #000; border: 1.5px solid rgba(255, 255, 255, .35); }
.ftr-gs-sns .sns-youtube { background: #FF0000; }
.ftr-gs-col h5 { font-family: var(--hf-sk-mono); font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--hf-sk-magenta); margin-bottom: 14px; font-weight: 700; }
.ftr-gs-col ul { list-style: none; padding: 0; margin: 0; }
.ftr-gs-col li { margin-bottom: 10px; }
.ftr-gs-col a { font-size: 13px; color: rgba(255, 255, 255, .7); text-decoration: none; transition: color .15s; }
.ftr-gs-col a:hover { color: var(--hf-sk-magenta); }
.ftr-gs-bottom { border-top: 1px solid rgba(255, 255, 255, .1); padding-top: 24px; padding-bottom: 48px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-family: var(--hf-sk-mono); font-size: 10px; letter-spacing: .16em; color: rgba(255, 255, 255, .35); }
@media (max-width: 900px) {
  .ftr-gs-top { grid-template-columns: 1fr 1fr; gap: 30px; }
  .ftr-gs-inner { padding: 48px 20px 24px; }
}
@media (max-width: 560px) {
  .ftr-gs-top { grid-template-columns: 1fr; }
  .ftr-gs-bottom { flex-direction: column; }
}
.gh-in { height: 58px; padding: 0 28px !important; gap: 20px; }
.gh-logo { gap: 12px; }
.gh-logo img { height: 26px; }
.gh-tag { line-height: 1.32; padding-left: 12px; }
.gh-nav { gap: 18px; }
.sub-nav { top: 59px !important; }
.sub-nav-in { height: 42px; padding: 0 28px !important; gap: 20px; }
.sub-nav-in a { display: flex; align-items: center; height: 100%; padding: 0 !important; border-bottom-width: 2px; }
.ph-header { height: 101px !important; }
header.gh { height: auto !important; }
@media (max-width: 980px) {
  .gh-in { gap: 14px; }
}
@media (max-width: 700px) {
  .gh-in { height: 54px; padding: 0 16px !important; }
  .sub-nav { top: 55px !important; }
  .sub-nav-in { height: 40px; padding: 0 16px !important; gap: 16px; }
  .ph-header { height: 95px !important; }
}
.ftr-gs-top { gap: 36px !important; margin-bottom: 40px !important; }
header.gh { background: rgba(255, 255, 255, .94) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid #e6e8ea !important; box-shadow: none !important; }
.gh-in { height: 53px !important; max-width: 1280px; padding: 0 24px !important; gap: 20px; }
.gh-logo { gap: 13px; }
.gh-logo img { height: 26px !important; }
.gh-tag { border-left: 1px solid #e6e8ea !important; padding-left: 13px !important; line-height: 1.3 !important; }
.gh-tag b { color: #17191c !important; font-weight: 800 !important; font-size: 10.5px !important; letter-spacing: .02em; }
.gh-vol { color: #8440bf !important; font-family: 'Roboto Mono', 'Oswald', monospace !important; font-weight: 700 !important; font-size: 12px !important; letter-spacing: .04em !important; }
.gh-nav { gap: 19px !important; }
.gh-nav a { font-size: 13px !important; color: #4a4f55 !important; font-weight: 600 !important; }
.sub-nav { top: 53px !important; background: rgba(255, 255, 255, .97) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid #e6e8ea !important; }
.sub-nav-in { height: 41px !important; max-width: 1280px; padding: 0 24px !important; gap: 4px !important; }
.sub-nav-in a { font-size: 12.5px !important; color: #4a4f55 !important; font-weight: 700 !important; padding: 0 12px !important; letter-spacing: 0 !important; }
.sub-nav-in a.sub-nav-cta { color: #FF6D00 !important; font-weight: 800 !important; border-bottom: 2.5px solid #FF6D00 !important; }
.ph-header { height: 94px !important; }
@media (max-width: 700px) {
  .gh-in { height: 52px !important; padding: 0 16px !important; }
  .sub-nav { top: 52px !important; }
  .sub-nav-in { height: 40px !important; padding: 0 10px !important; }
  .ph-header { height: 92px !important; }
}
.ftr-gs, .ftr-gs *, .ftr-gs-bottom, .ftr-gs-bottom span { text-align: left !important; }
.ftr-gs-brand { align-items: flex-start !important; }
.ftr-gs-logo { display: block; margin-left: 0; }
.ftr-gs-logo img { margin-left: 0 !important; max-height: 34px; }
.ftr-gs-tagline { margin-left: 0 !important; padding-left: 0 !important; }
.ftr-gs-bottom { justify-content: flex-start !important; gap: 28px !important; }
header.gh { display: block !important; }
.gh-in { width: 100% !important; box-sizing: border-box; margin: 0 auto !important; justify-content: flex-start !important; }
.gh-logo { margin-right: auto; }
.gh-nav { margin-left: auto !important; }
.ftr-gs-follow { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.ftr-gs-follow-head { font-size: 14px; font-weight: 900; color: #fff; letter-spacing: .02em; }
.ftr-gs-follow-sub { font-size: 12px; line-height: 1.7; color: rgba(255, 255, 255, .55); }
.ftr-gs-sns { margin-top: 2px !important; flex-wrap: wrap; }
.ftr-gs-follow { gap: 5px; margin-top: 14px; }
.ftr-gs-follow-head { font-size: 17px !important; font-weight: 900 !important; color: #fff !important; line-height: 1.4; letter-spacing: .01em; }
.ftr-gs-follow-sub { font-size: 13px !important; color: rgba(255, 255, 255, .78) !important; line-height: 1.65; }
.ftr-gs-follow { gap: 6px; margin-top: 18px; padding: 16px 18px; background: rgba(255, 255, 255, .06); border-left: 4px solid var(--hf-sk-magenta); }
.ftr-gs-follow-head { font-size: 21px !important; font-weight: 900 !important; color: #fff !important; line-height: 1.35; letter-spacing: .01em; }
.ftr-gs-follow-sub { font-size: 14px !important; color: rgba(255, 255, 255, .88) !important; line-height: 1.65; font-weight: 700; }
@media (max-width: 900px) {
  .ftr-gs-follow-head { font-size: 19px !important; }
}
@media (max-width: 700px) {
  .ftr-gs-inner { padding: 34px 15px 20px !important; }
  .ftr-gs-top { gap: 22px !important; margin-bottom: 24px !important; }
  .ftr-gs-logo img { max-height: 28px !important; }
  .ftr-gs-tagline { font-size: 12px !important; }
  .ftr-gs-follow { margin-top: 12px !important; padding: 13px 14px !important; }
  .ftr-gs-follow-head { font-size: 17px !important; }
  .ftr-gs-follow-sub { font-size: 12.5px !important; }
  .ftr-gs-sns a { width: 36px !important; height: 36px !important; font-size: 15px !important; }
  .ftr-gs-col h5 { font-size: 12px !important; margin-bottom: 10px !important; }
  .ftr-gs-col li { margin-bottom: 8px !important; }
  .ftr-gs-col a { font-size: 12.5px !important; }
  .ftr-gs-bottom { padding-top: 18px !important; padding-bottom: 28px !important; font-size: 11px !important; }
}
@media (max-width: 560px) {
  .ftr-gs-top { grid-template-columns: 1fr 1fr !important; gap: 20px 16px !important; }
  .ftr-gs-brand { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .ftr-gs-bottom { font-size: 12px !important; line-height: 1.75 !important; }
  .sub-nav { position: fixed; }
  .sub-nav-in { padding-right: 34px !important; scroll-snap-type: x proximity; }
  .sub-nav-in a { scroll-snap-align: start; }
  .sub-nav::after { content: "›"; position: absolute; top: 0; right: 0; bottom: 0; width: 34px; display: flex; align-items: center; justify-content: flex-end; padding-right: 10px; font-size: 18px; font-weight: 700; color: var(--hf-tx-3); background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.97) 55%); pointer-events: none; }
  .sub-nav-in { padding-right: 44px !important; }
  .sub-nav::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 58px; background: linear-gradient(90deg, rgba(255,255,255,0) 0%, #fff 62%); pointer-events: none; }
  .sub-nav::after { content: "\276F"; position: absolute; top: 50%; right: 8px; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--hf-cta-warm); color: #fff; font-size: 11px; font-weight: 700; line-height: 1; box-shadow: 0 2px 6px rgba(23, 27, 32, .28); pointer-events: none; animation: subNavNudge 1.7s ease-in-out infinite; }
  .sub-nav::after { content: none !important; display: none !important; }
  .sub-nav-in { padding-right: 26px !important; }
  .sub-nav::before { width: 40px; background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.98) 72%); }
  .sub-nav-in { padding-right: 14px !important; }
  .sub-nav::before { width: 24px !important; background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.88) 100%) !important; }
  .sub-nav { background-image: linear-gradient(90deg, rgba(23,27,32,.28) 0 62%, rgba(23,27,32,0) 62%), linear-gradient(90deg, rgba(23,27,32,.08), rgba(23,27,32,.08)) !important; background-size: 100% 2px, 100% 2px !important; background-position: left bottom, left bottom !important; background-repeat: no-repeat, no-repeat !important; background-color: rgba(255, 255, 255, .97) !important; }
}
@media (max-width: 1080px) {
  .ftr-gs-top { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }
}
@media (max-width: 700px) {
  .ftr-gs-tagline { text-wrap: wrap; }
}
@keyframes subNavNudge { 0%, 100% { transform: translateY(-50%) translateX(0); } 50% { transform: translateY(-50%) translateX(3px); } }