/* =========================================================
   共通ヘッダー・サイト案内（トップページと同じデザイン）
   style.css / noir-theme.css / mobile-menu.css のヘッダー部分だけを
   同じ順序で抜き出したもの。トップ側のデザインを変えたら、ここも合わせて更新してください。
   ========================================================= */
:root{--ink:#eef5f2;--muted:#aabcb9;--cyan:#7be5e9;--line:rgba(190,238,233,.17);--serif:"Noto Serif JP",serif}

/* style.css */
.site-header{line-height:normal;letter-spacing:.025em;font-family:"Noto Sans JP",sans-serif}
.site-header{height:84px;display:flex;align-items:center;padding:0 clamp(22px,5vw,78px);position:absolute;top:0;width:100%;z-index:20;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.brand b{display:block;font-family:var(--serif);font-size:17px}
.brand small{display:block;color:var(--muted);font-size:9px;letter-spacing:.28em}
.global-nav{margin:auto;display:flex;gap:34px;font-size:13px}
.global-nav a{color:#c7d4d1;transition:.2s;text-decoration:none}
.global-nav a:hover{color:var(--cyan)}
.search-open{display:flex;align-items:center;gap:10px;color:var(--ink);background:transparent;border:0;cursor:pointer;font-size:12px;text-decoration:none}
.search-open span{display:block;width:17px;height:17px;border:1px solid var(--cyan);border-radius:50%;position:relative}
.search-open span:after{content:"";position:absolute;width:7px;height:1px;background:var(--cyan);right:-5px;bottom:-2px;transform:rotate(45deg)}
@media(max-width:900px){.global-nav{display:none}.site-header{height:70px}.search-open{margin-left:auto}}
@media(max-width:600px){.brand b{font-size:14px}.search-open{font-size:0}}

/* noir-theme.css */
.site-header{top:18px;background:linear-gradient(115deg,rgba(20,25,35,.7),rgba(8,12,19,.5));border:1px solid rgba(178,219,226,.16);box-shadow:0 18px 55px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.07);backdrop-filter:blur(24px) saturate(135%);-webkit-backdrop-filter:blur(24px) saturate(135%);color:#edf6f7}
.site-header:after{content:"";position:absolute;inset:auto 10% -1px;height:1px;background:linear-gradient(90deg,transparent,#33d5e6,rgba(126,81,185,.65),transparent);opacity:.65}
.site-header .brand b{color:#f4f7f8}
.site-header .brand small,.site-header .global-nav a{color:#abb9bf}
.site-header .global-nav a:hover{color:#6fe8f0}
.site-header .search-open{color:#dbe9eb}
@media(max-width:900px){.site-header{top:12px}}
@media(max-width:600px){.site-header{background:linear-gradient(115deg,rgba(22,28,39,.72),rgba(8,12,19,.56));border-color:rgba(178,219,226,.18)}}
.site-header{top:14px;left:clamp(12px,1.8vw,32px);right:clamp(12px,1.8vw,32px);width:auto;height:90px;padding-inline:clamp(22px,5vw,76px);border-radius:999px;overflow:hidden}
.site-header:after{inset:auto 8% -1px}
@media(max-width:900px){.site-header{top:10px;left:10px;right:10px;height:68px;padding-inline:18px}}

/* mobile-menu.css */
.brand-logo{display:block;width:46px;height:46px;object-fit:cover;border-radius:50%;filter:invert(1) grayscale(1) contrast(1.2);mix-blend-mode:screen}
.site-header{position:fixed;transition:top .35s ease,height .35s ease,background .35s ease,box-shadow .35s ease,border-color .35s ease}
.site-header.is-scrolled{top:10px;height:64px;background:rgba(6,14,21,.72);border-color:rgba(126,215,222,.24);box-shadow:0 14px 45px rgba(0,0,0,.32)}
.menu-toggle{display:none}
.mobile-nav{display:none}
@media(max-width:900px){
  .site-header{padding-inline:15px}
  .site-header.is-scrolled{top:8px;height:58px}
  .brand-logo{width:42px;height:42px}
  .search-open{margin-left:auto}
  .menu-toggle{position:relative;z-index:23;display:grid;place-content:center;gap:5px;width:46px;height:46px;margin-left:4px;padding:0;border:1px solid rgba(167,236,241,.22);border-radius:50%;background:rgba(8,18,25,.3);color:#e8fbff;cursor:pointer;backdrop-filter:blur(12px);transition:background .35s ease,border-color .35s ease,transform .35s ease}
  .menu-toggle:hover{border-color:rgba(167,236,241,.62);background:rgba(29,92,101,.32);transform:rotate(8deg)}
  .menu-toggle span{display:block;width:20px;height:1px;border-radius:9px;background:currentColor;box-shadow:0 0 7px rgba(107,233,241,.55);transform-origin:center;transition:transform .42s cubic-bezier(.2,.8,.2,1),opacity .25s ease,width .3s ease}
  body.menu-open{overflow:hidden}
  body.menu-open .menu-toggle{background:rgba(33,116,125,.28);border-color:rgba(184,246,250,.65);transform:rotate(90deg)}
  body.menu-open .menu-toggle span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  body.menu-open .menu-toggle span:nth-child(2){opacity:0;width:0}
  body.menu-open .menu-toggle span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  .mobile-nav{position:fixed;inset:0;z-index:19;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;padding:120px 24px 60px;background:linear-gradient(145deg,rgba(2,8,14,.84),rgba(9,25,32,.75));backdrop-filter:blur(26px) saturate(135%);-webkit-backdrop-filter:blur(26px) saturate(135%);opacity:0;visibility:hidden;transform:scale(1.04);transition:opacity .38s ease,visibility .38s ease,transform .48s cubic-bezier(.2,.8,.2,1)}
  .mobile-nav::before{content:"MENU";margin-bottom:24px;font-size:9px;letter-spacing:.5em;color:#72dce5}
  .mobile-nav::after{content:"";position:absolute;inset:8%;border:1px solid rgba(130,226,233,.1);border-radius:32px;pointer-events:none}
  .mobile-nav a{width:min(420px,82vw);padding:20px 12px;border-bottom:1px solid rgba(182,231,234,.13);color:#eefbfc;font-family:var(--serif);font-size:clamp(20px,6vw,30px);letter-spacing:.08em;text-align:center;text-decoration:none;opacity:0;transform:translateY(18px);transition:opacity .35s ease,transform .45s cubic-bezier(.2,.8,.2,1),color .25s ease}
  .mobile-nav a:hover{color:#80e8ef}
  body.menu-open .mobile-nav{opacity:1;visibility:visible;transform:scale(1)}
  body.menu-open .mobile-nav a{opacity:1;transform:translateY(0)}
  body.menu-open .mobile-nav a:nth-child(1){transition-delay:.08s}
  body.menu-open .mobile-nav a:nth-child(2){transition-delay:.14s}
  body.menu-open .mobile-nav a:nth-child(3){transition-delay:.2s}
  body.menu-open .mobile-nav a:nth-child(4){transition-delay:.26s}
}
@media(prefers-reduced-motion:reduce){.menu-toggle,.menu-toggle span,.mobile-nav,.mobile-nav a{transition:none!important}}

/* ---------- サイト案内（トップの theme-grid / theme-card と同じ） ---------- */
.theme-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(164,201,207,.11);border:1px solid rgba(164,201,207,.11)}
.theme-grid.cols-3{grid-template-columns:repeat(3,1fr)}
.theme-card{display:block;text-decoration:none;color:var(--ink);background:linear-gradient(145deg,rgba(29,35,48,.93),rgba(19,24,34,.88));box-shadow:inset 0 1px 0 rgba(255,255,255,.035);border:0;text-align:left;padding:30px 25px;min-height:300px;transition:.3s}
a.theme-card:hover,.theme-card:hover{background:linear-gradient(145deg,rgba(23,104,117,.48),rgba(30,30,47,.96));box-shadow:0 22px 50px rgba(0,0,0,.32),inset 0 1px 0 rgba(104,226,235,.12);transform:translateY(-5px)}
.theme-card>span{display:block;color:#79908c;font-size:10px}
.theme-card i{display:grid;place-items:center;width:70px;height:70px;border:1px solid rgba(123,229,233,.3);border-radius:50%;font-style:normal;font-size:10px;letter-spacing:.06em;color:var(--cyan);margin:30px 0;text-align:center;line-height:1.3}
.theme-card h3{margin:0 0 12px;font-family:var(--serif);font-size:20px;font-weight:600;color:var(--ink)}
.theme-card p{margin:0;color:var(--muted);font-size:12.5px;line-height:1.9;min-height:66px}
.theme-card p a{color:var(--muted);text-decoration:none}
.theme-card p a:hover{color:var(--cyan)}
.theme-card b{display:block;margin-top:18px;font-size:10px;color:var(--cyan);letter-spacing:.1em}
@media(max-width:900px){.theme-grid,.theme-grid.cols-3{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.theme-grid,.theme-grid.cols-3{grid-template-columns:1fr}.theme-card{min-height:0}}
/* ===== ハンバーガー：線なしのスタイリッシュ版（2026-11-08） ===== */
@media (max-width: 900px){
  body .mobile-nav{counter-reset:mnav;gap:2px;padding:110px 24px 56px;justify-content:center}
  body .mobile-nav::after{display:none}
  body .mobile-nav::before{margin-bottom:28px;font-size:10px;letter-spacing:.6em;color:#72dce5;opacity:.85}
  body .mobile-nav a{counter-increment:mnav;position:relative;display:flex;align-items:baseline;justify-content:center;gap:14px;width:auto;padding:11px 18px;border:0;font-size:clamp(19px,5.4vw,26px);letter-spacing:.1em;border-radius:999px;transition:color .25s,background .25s}
  body .mobile-nav a::before{content:counter(mnav,decimal-leading-zero);font-family:"Noto Sans JP",sans-serif;font-size:10px;letter-spacing:.2em;color:#72dce5;opacity:.7;transform:translateY(-2px)}
  body .mobile-nav a:hover,body .mobile-nav a:focus-visible{color:#80e8ef;background:rgba(114,220,229,.08)}
  body .mobile-nav a[aria-current="page"]{color:#80e8ef}
}