/* header-footer.css */
:root{
 --max-w:1000px;
 --accent:#fff;
 --black:#000;
 --bg:#000;
 --card:#000;
}

/* ==============================
   HEADER
============================== */
.header{
 background:#000;
 border-bottom:3px solid #000;
 padding:18px 16px;
 position:fixed;
 top:0;
 left:0;
 width:100%;
 z-index:9999;
}

.header-inner{
 max-width:var(--max-w);
 margin:0 auto;
 display:flex;
 align-items:center;
 justify-content:space-between;
}

.site-title{
 font-size:20px;
 font-weight:800;
 margin:0;
 color:#fff;
}

/* ==============================
   GLOBAL MENU
============================== */
.global-menu{
 display:flex;
 gap:16px;
}

.global-menu a{
 text-decoration:none;
 color:#fff;
 font-weight:500;
 font-size:14px;
 transition:color .2s;
}

.global-menu a:hover{
 color:#fff;
}

/* ==============================
   HAMBURGER
============================== */
.hamburger{
 display:none;
 flex-direction:column;
 justify-content:space-between;
 margin:0 25px;
 width:26px;
 height:20px;
 cursor:pointer;
}

.hamburger span{
 display:block;
 height:3px;
 background:#fff;
 border-radius:2px;
 transition:
   transform .3s ease,
   opacity .3s ease,
   background .3s ease;
}

/* --- OPEN ANIMATION --- */
.hamburger.is-open span:nth-child(1){
 transform:translateY(8px) rotate(45deg);
}

.hamburger.is-open span:nth-child(2){
 opacity:0;
}

.hamburger.is-open span:nth-child(3){
 transform:translateY(-8px) rotate(-45deg);
}

/* ==============================
   MOBILE MENU
============================== */
.mobile-menu{
 display:none;
 flex-direction:column;
 background:#000;
 position:absolute;
 top:100%;
 left:0;
 width:100%;
 box-shadow:0 4px 12px rgba(0,0,0,0.6);
 z-index:9998;
 animation:menuFade .3s ease;
}

.mobile-menu a{
 padding:14px 16px;
 border-bottom:1px solid #222;
 text-decoration:none;
 color:#fff;
 font-size:15px;
 transition:background .2s,color .2s;
}

.mobile-menu a:hover{
 background:#111;
 color:#fff;
}

/* 表示制御（JS or HTMLで is-open を付与） */
.mobile-menu.is-open{
 display:flex;
}

@keyframes menuFade{
 from{
  opacity:0;
  transform:translateY(-6px);
 }
 to{
  opacity:1;
  transform:translateY(0);
 }
}

/* ==============================
   FOOTER
============================== */
.site-footer{
 width:100%;
 background:#000;
 border-top:3px solid #000;
 margin-top:60px;
 color:#fff;
 position:relative;
}

.footer-inner{
 max-width:1000px;
 margin:0 auto;
 padding:25px 16px 20px;
 display:flex;
 justify-content:space-between;
 gap:30px;
 box-sizing:border-box;
}

.footer-title{
 font-size:18px;
 font-weight:800;
 margin-bottom:8px;
 color:#fff;
}

.footer-nav a{
 display:block;
 font-size:15px;
 color:#fff;
 text-decoration:none;
 margin-bottom:6px;
 transition:opacity .2s;
}

.footer-nav a:hover{
 opacity:.7;
}

.footer-bottom{
 text-align:center;
 font-size:11px;
 color:#aaa;
 padding:15px 10px 25px;
}

/* ==============================
   SCROLL TOP BUTTON
============================== */
.footer-scroll-top-btn{
 position:absolute;
 bottom:20px;
 right:20px;
 background:#000;
 color:#fff;
 border-radius:8px;
 padding:8px 12px;
 font-size:14px;
 text-decoration:none;
 display:flex;
 align-items:center;
 gap:6px;
 transition:background .2s,transform .2s;
 border:1px solid #333;
}

.footer-scroll-top-btn:hover{
 background:#111;
 transform:translateY(-2px);
}

/* ==============================
   RESPONSIVE
============================== */
@media (max-width:768px){
 .footer-inner{
  flex-direction:column;
  gap:20px;
 }
 .hamburger{
  display:flex;
 }
 .global-menu{
  display:none;
 }
}

/* ==============================
   SMOOTH SCROLL
============================== */
html{
 scroll-behavior:smooth;
}