/* ============================================================
   SITE HEADER — 全ページ共通のヘッダー（トップページと同一）

   読み込み位置: style.css より「後」に置いてください。
     <link rel="stylesheet" href="style.css">
     <link rel="stylesheet" href="site-header.css">   ← この順

   クラス名はすべて .site- で始めています。style.css 側の
   header / nav / .logo / .nav-links / .nav-toggle とは
   一切ぶつからないので、既存のCSSを触る必要はありません。

   文字サイズを変えたいときはここだけ:
     --site-nav-size   ナビとロゴの文字サイズ
     --site-nav-gap    リンク同士の間隔
   ============================================================ */

:root{
  --site-nav-size: 15px;
  --site-nav-gap: clamp(14px,2.1vw,34px);
  --site-nav-pad-x: clamp(22px,5.4vw,76px);
  --site-nav-ease: cubic-bezier(.25,.1,.25,1);
  --site-nav-ink: #23292E;
  --site-nav-bright: #EEF1F3;
  --site-nav-dark-bg: #23292E;
  --site-nav-kinari: #F3F5F6;
}

.site-nav{
  position:fixed;top:0;left:0;right:0;z-index:30;
  display:flex;justify-content:space-between;align-items:baseline;
  padding:26px var(--site-nav-pad-x);
  font-family:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic",sans-serif;
  font-weight:400;font-size:var(--site-nav-size);letter-spacing:.14em;
  color:var(--site-nav-bright);
  text-shadow:0 1px 18px rgba(20,24,28,.55);
  transition:color 1.2s var(--site-nav-ease),text-shadow 1.2s var(--site-nav-ease);
}
/* 写真の上から、紙の上へ。切り替えは site-header.js が行う */
.site-nav.on-light{color:var(--site-nav-ink);text-shadow:none}

.site-nav a{text-decoration:none;color:inherit}

.site-mark{
  letter-spacing:.22em;text-transform:uppercase;line-height:1.65;
  font-size:var(--site-nav-size);
}

.site-nav-links{display:flex;gap:var(--site-nav-gap)}
.site-nav-links a{opacity:.92;transition:opacity .8s var(--site-nav-ease)}
.site-nav.on-light .site-nav-links a{opacity:.72}
.site-nav-links a:hover,
.site-nav-links a[aria-current="page"]{opacity:1}

.site-nav-toggle{
  display:none;background:none;border:0;color:inherit;font:inherit;
  letter-spacing:.16em;cursor:pointer;padding:0;
}

/* ヘッダーの下に敷く余白。写真のヒーローが無いページ
   （contact.html など）でだけ使います */
.site-nav-pad{height:clamp(112px,15vh,164px)}

@media(max-width:960px){
  .site-nav-links{
    position:fixed;inset:0;
    background:var(--site-nav-dark-bg);color:var(--site-nav-kinari);
    text-shadow:none;flex-direction:column;justify-content:center;gap:1.25em;
    padding:var(--site-nav-pad-x);
    font-size:clamp(19px,4.8vw,26px);letter-spacing:.1em;
    opacity:0;visibility:hidden;
    transition:opacity .8s var(--site-nav-ease),visibility .8s;
  }
  .site-nav-links.open{opacity:1;visibility:visible}
  .site-nav.on-light .site-nav-links a{opacity:.92}
  .site-nav-toggle{display:block;position:relative;z-index:2}
}

@media (prefers-reduced-motion:reduce){
  .site-nav,.site-nav-links,.site-nav-links a{transition-duration:.01ms}
}