@charset "utf-8";
/* ============================================================
   layout.css
   ヘッダー / グローバルナビ / スマホメニュー / サイドインデックス / フッター
   → WordPress では header.php / footer.php に対応するパーツ
   ============================================================ */

/* ------------------------------------------------------------
   HEADER
   ------------------------------------------------------------ */
.header{
  position:fixed;z-index:80;left:0;right:0;top:0;height:var(--header-h);
  padding:0 46px;
  display:flex;align-items:center;justify-content:space-between;
  transition:background .45s ease,height .45s ease;
}
.header.is-scrolled{
  height:66px;
  /* backdrop-filter はスクロール中ずっとGPUを使うので、不透明な背景で代用 */
  background:rgba(5,10,15,.92);
  border-bottom:1px solid rgba(140,175,200,.1);
}

/* --- ロゴ（グリッチ） --- */
.logo{
  position:relative;
  font-size:15px;font-weight:700;letter-spacing:.34em;
  color:#fff;
}
.logo::before,.logo::after{
  content:attr(data-text);
  position:absolute;left:0;top:0;
  width:100%;
  pointer-events:none;
  clip-path:inset(0 0 55% 0);
}
.logo::before{color:var(--pink);transform:translate(-1.5px,-1px);opacity:.85;animation:tcLogoGlitchA 4.6s infinite steps(1,end)}
.logo::after{color:var(--cyan);transform:translate(1.5px,1px);opacity:.85;clip-path:inset(52% 0 0 0);animation:tcLogoGlitchB 4.6s infinite steps(1,end)}
.logo__strike{
  position:absolute;right:-4px;top:52%;width:34px;height:1px;
  background:linear-gradient(90deg,var(--pink),transparent);
}
@keyframes tcLogoGlitchA{
  0%,88%{transform:translate(-1.5px,-1px)}
  89%{transform:translate(-5px,-1px)}
  91%{transform:translate(2px,1px)}
  93%,100%{transform:translate(-1.5px,-1px)}
}
@keyframes tcLogoGlitchB{
  0%,88%{transform:translate(1.5px,1px)}
  90%{transform:translate(5px,0)}
  92%{transform:translate(-2px,2px)}
  94%,100%{transform:translate(1.5px,1px)}
}

/* --- グローバルナビ --- */
.gnav{display:flex;gap:42px}
.gnav a{
  position:relative;display:inline-flex;align-items:center;
  font-size:10px;letter-spacing:.28em;color:#dfe5ea;
  transition:color .25s ease,text-shadow .25s ease,padding-left .25s ease;
}
.gnav .nav-dot{
  position:absolute;left:-13px;top:50%;
  width:5px;height:5px;border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 4px var(--cyan),0 0 9px var(--cyan),0 0 16px rgba(50,231,255,.8);
  opacity:0;transform:translate(-7px,-50%) scale(.35);
  transition:opacity .18s ease,transform .28s var(--ease);
}
.gnav a:hover{padding-left:8px;color:#fff;text-shadow:0 0 10px rgba(50,231,255,.32)}
.gnav a:hover .nav-dot{opacity:1;transform:translate(0,-50%) scale(1)}
.gnav a.is-current{padding-left:8px;color:#fff}
.gnav a.is-current .nav-dot{
  opacity:1;transform:translate(0,-50%) scale(1);
  background:var(--pink);
  box-shadow:0 0 4px var(--pink),0 0 9px var(--pink),0 0 18px rgba(255,40,168,.85);
  animation:tcNavDot 1.6s ease-in-out infinite;
}
@keyframes tcNavDot{
  0%,100%{transform:translate(0,-50%) scale(1);opacity:1}
  50%{transform:translate(0,-50%) scale(1.35);opacity:.65}
}

/* --- ハンバーガー --- */
.menu-btn{display:none;width:38px;height:38px;position:relative}
.menu-btn span{
  display:block;height:1px;width:26px;margin:7px auto;background:#fff;
  transition:transform .35s var(--ease),opacity .25s ease;
}
.menu-btn.is-open span:nth-child(1){transform:translateY(4px) rotate(38deg)}
.menu-btn.is-open span:nth-child(2){transform:translateY(-4px) rotate(-38deg)}

/* --- スマホ用オーバーレイメニュー --- */
.drawer{
  position:fixed;inset:0;z-index:70;
  display:flex;flex-direction:column;justify-content:center;gap:6px;
  padding:0 12vw;
  background:#04080d;
  opacity:0;visibility:hidden;
  transition:opacity .4s ease,visibility .4s;
}
.drawer.is-open{opacity:1;visibility:visible}
.drawer a{
  display:flex;align-items:baseline;gap:16px;
  padding:15px 0;border-bottom:1px solid rgba(140,175,200,.14);
  font-family:var(--font-en);font-size:17px;letter-spacing:.22em;
  opacity:0;transform:translateY(14px);
  transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.drawer.is-open a{opacity:1;transform:none}
.drawer.is-open a:nth-child(1){transition-delay:.06s}
.drawer.is-open a:nth-child(2){transition-delay:.12s}
.drawer.is-open a:nth-child(3){transition-delay:.18s}
.drawer.is-open a:nth-child(4){transition-delay:.24s}
.drawer.is-open a:nth-child(5){transition-delay:.3s}
.drawer.is-open a:nth-child(6){transition-delay:.36s}
.drawer a i{font-style:normal;font-size:9px;color:var(--pink);letter-spacing:.2em}

/* ------------------------------------------------------------
   SIDE INDEX（右側の 01-05 インジケーター）
   ------------------------------------------------------------ */
.side-index{
  position:fixed;z-index:55;right:3.2vw;top:50%;
  transform:translateY(-50%);
  opacity:0;visibility:hidden;
  transition:opacity .6s ease,visibility .6s;
}
.side-index.is-shown{opacity:1;visibility:visible}
.side-index ul{position:relative;display:flex;flex-direction:column;gap:52px}
.side-index ul::before{
  content:"";position:absolute;left:4px;top:4px;bottom:4px;width:1px;
  background:rgba(160,190,210,.22);
}
.side-index li{--c:#ffffff}
.side-index a{
  position:relative;display:flex;align-items:center;gap:12px;
  font-size:9px;letter-spacing:.2em;color:#6d7c8b;
  transition:color .3s ease;
}
.side-index .dot{
  width:9px;height:9px;border-radius:50%;
  background:var(--c);
  opacity:.28;
  transition:opacity .3s ease,box-shadow .3s ease,transform .3s var(--ease);
}
.side-index a:hover{color:#cfd8e0}
.side-index a:hover .dot{opacity:.6}

/* 現在地は自分の色で点滅する */
.side-index a.is-current{color:var(--c)}
.side-index a.is-current .dot{
  opacity:1;
  animation:tcIndexBlink 1.5s ease-in-out infinite;
}
@keyframes tcIndexBlink{
  0%,100%{
    opacity:1;transform:scale(1.25);
    box-shadow:0 0 6px var(--c),0 0 16px var(--c);
  }
  50%{
    opacity:.42;transform:scale(.95);
    box-shadow:0 0 2px var(--c),0 0 6px var(--c);
  }
}

/* ------------------------------------------------------------
   FOOTER
   ------------------------------------------------------------ */
.footer{
  padding:56px 46px 34px;
  border-top:1px solid rgba(140,175,200,.12);
  background:#04080c;
  font-family:var(--font-en);
  font-size:9px;letter-spacing:.25em;color:#6c7a89;
}
.footer__top{
  display:flex;align-items:center;justify-content:space-between;
  gap:32px;flex-wrap:wrap;
  padding-bottom:30px;
}
.logo--footer{font-size:13px;letter-spacing:.3em}

.footer__nav{display:flex;gap:26px;flex-wrap:wrap}
.footer__nav a{transition:color .25s ease,text-shadow .25s ease}
.footer__nav a:hover{color:#fff;text-shadow:0 0 12px var(--cyan)}

/* --- SNS --- */
.sns{display:flex;gap:18px}
.sns a{
  display:grid;place-items:center;
  width:36px;height:36px;border-radius:50%;
  border:1px solid rgba(140,175,200,.22);
  color:#8c9aa8;
  transition:color .3s ease,border-color .3s ease,box-shadow .35s ease,transform .35s var(--ease);
}
.sns svg{width:16px;height:16px;fill:currentColor}
.sns svg.sns--stroke{fill:none;stroke:currentColor;stroke-width:1.6}
.sns svg.sns--stroke .dot{fill:currentColor;stroke:none}
.sns a:hover{
  color:#fff;
  border-color:var(--cyan);
  transform:translateY(-3px);
  box-shadow:0 0 10px var(--cyan),0 0 26px rgba(50,231,255,.5);
}

.footer__bottom{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;
  padding-top:26px;
  border-top:1px solid rgba(140,175,200,.1);
}
.footer__totop{display:inline-flex;align-items:center;gap:10px;transition:color .25s ease}
.footer__totop span{font-size:12px;transition:transform .35s var(--ease)}
.footer__totop:hover{color:var(--cyan)}
.footer__totop:hover span{transform:translateY(-4px)}

/* ------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------ */
@media(max-width:1100px){
  .gnav{gap:26px}
  .gnav a{font-size:9px;letter-spacing:.2em}
}
@media(max-width:900px){
  .header{height:70px;padding:0 24px}
  .header.is-scrolled{height:58px}
  .gnav{display:none}
  .menu-btn{display:block}
  .side-index{display:none}
  .footer{padding:40px 24px 26px}
  .footer__top{flex-direction:column;align-items:flex-start;gap:24px}
  .footer__bottom{flex-direction:column;align-items:flex-start;gap:14px}
}
@media(max-width:560px){
  .footer{font-size:8px;letter-spacing:.16em;line-height:2}
  .footer__nav{gap:18px;flex-wrap:wrap}
}