@charset "UTF-8";

/* =========================================================
   [ Common Header ] 土台
   状態クラス：
   - .is-home     … トップページ（最上部は白ロゴ・透過ぼかし）
   - .is-scrolled … スクロール追従時（白ぼかし背景・黒ロゴ）
========================================================= */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background-color: #ffffff; /* 下層ページの基本背景 */
  transition: background-color 0.4s ease, box-shadow 0.4s ease;
}

.header-inner {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  height: 88px;
  padding: 0 40px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
}


/* =========================================================
   [ Common Header ] ロゴ
========================================================= */
.header-logo {
  position: relative;
  display: block;
  width: 208px;
  height: 22px;
  flex-shrink: 0;
  line-height: 0;
}
.header-logo img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity 0.4s ease;
}
/* 通常（下層ページ）は黒ロゴを表示 */
.logo-white { opacity: 0; }
.logo-black { opacity: 1; }


/* =========================================================
   [ Common Header ] PCナビ
========================================================= */
.header-nav {
  display: flex;
  align-items: center;
  gap: 24px;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: 23px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-list a {
  position: relative;
  color: #313131;
  font-family: 'Marcellus', serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  text-decoration: none;
  transition: color 0.4s ease, opacity 0.3s ease;
}
/* ホバー：伸びる下線（既存の伸びるライン意匠を踏襲） */
.nav-list a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 1px;
  background-color: currentColor;
  transition: width 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.nav-list a:hover::after {
  width: 100%;
}

/* ONLINE SHOP ボタン */
.nav-shop {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 17px;
  color: #212121;
  font-family: 'Marcellus', serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 30px;
  text-decoration: none;
  border: 1px solid #313131;
  transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}
.nav-shop:hover {
  background-color: #666666;
  color: #ffffff !important;
  border-color: #1F1F1F;
}


/* =========================================================
   [ Common Header ] トップページ最上部（is-home かつ 非scrolled）
   白ベースの透過ぼかし、ロゴ白・ナビ濃いグレー
========================================================= */
.site-header.is-home {
  background-color: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.site-header.is-home .logo-white { opacity: 1; }
.site-header.is-home .logo-black { opacity: 0; }
/* ナビ文字は指示通り濃いグレーのまま */
.site-header.is-home .nav-list a { color: #313131; }
.site-header.is-home .nav-shop {
  color: #212121;
  border-color: #313131;
}


/* =========================================================
   [ Common Header ] 追従時（is-scrolled）
   白の透過ぼかし背景に切り替え・ロゴは黒へ
========================================================= */
.site-header.is-scrolled {
  background-color: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}
/* トップでも追従に入ったらロゴは黒 */
.site-header.is-home.is-scrolled .logo-white { opacity: 0; }
.site-header.is-home.is-scrolled .logo-black { opacity: 1; }
.site-header.is-home.is-scrolled .nav-list a { color: #313131; }
.site-header.is-home.is-scrolled .nav-shop {
  color: #212121;
  border-color: #313131;
}


/* =========================================================
   [ Common Header ] ハンバーガー（PCでは非表示）
========================================================= */
.header-toggle {
  display: none;
  position: relative;
  width: 30px;
  height: 20px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  z-index: 1200;
}
.toggle-bar {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #313131;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s ease, background-color 0.4s ease;
}
.toggle-bar:nth-child(1) { top: 2px; }
.toggle-bar:nth-child(2) { top: 50%; transform: translateY(-50%); }
.toggle-bar:nth-child(3) { bottom: 2px; }

/* トップ最上部ではバーも白寄りに（透過ぼかしの上での視認性確保） */
.site-header.is-home:not(.is-scrolled) .toggle-bar {
  background-color: #313131; /* 白ぼかし背景なので濃グレーで視認可 */
}


/* =========================================================
   [ Common Header ] スマホ ドロワーメニュー
========================================================= */
.header-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;                 /* 全幅展開 */
  height: 100dvh;
  background-color: #ffffff;
  z-index: 1100;
  padding: 100px 24px 48px;    /* 下部に余白を確保（ONLINE SHOPが底に付きすぎない） */
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.header-drawer.is-open {
  opacity: 1;
  visibility: visible;
}

.header-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(20, 20, 20, 0.35);
  z-index: 1050;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.header-overlay.is-visible {
  opacity: 1;
}

/* --- ドロワー内ナビ --- */
.drawer-nav {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;               /* 全幅内でコンテンツは中央寄せ */
}
.drawer-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.drawer-item {
  border-bottom: 1px solid #ECECEC;
}
.drawer-item a {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 20px 8px;
  text-decoration: none;
  white-space: nowrap;              /* ABOUT US 等を改行させない */
  /* 各項目を初期状態で少し下げて透明に（開いた時にスタッガーで出す） */
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.drawer-item .en {
  color: #1F1F1F;
  font-family: 'Marcellus', serif;
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
}
.drawer-item .ja {
  color: #999999;
  font-family: 'Zen Old Mincho', serif;
  font-size: 12px;
  letter-spacing: 0.04em;
}

/* 開いた時：スタッガーでフェードイン */
.header-drawer.is-open .drawer-item a {
  opacity: 1;
  transform: translateY(0);
}
.header-drawer.is-open .drawer-item:nth-child(1) a { transition-delay: 0.15s; }
.header-drawer.is-open .drawer-item:nth-child(2) a { transition-delay: 0.22s; }
.header-drawer.is-open .drawer-item:nth-child(3) a { transition-delay: 0.29s; }
.header-drawer.is-open .drawer-item:nth-child(4) a { transition-delay: 0.36s; }
.header-drawer.is-open .drawer-item:nth-child(5) a { transition-delay: 0.43s; }
.header-drawer.is-open .drawer-item:nth-child(6) a { transition-delay: 0.50s; }

/* --- ドロワー内 ONLINE SHOP（伸びるライン付き） --- */
.drawer-shop {
  margin-top: 20px;
  margin-bottom: 24px;             /* 底に付きすぎないよう下に余白 */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 22px 24px;
  box-sizing: border-box;
  background-color: #1F1F1F;        /* CV導線として塗りボタン化 */
  text-decoration: none;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s ease, transform 0.5s ease, background-color 0.3s ease;
}
.header-drawer.is-open .drawer-shop {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.58s;
}
.drawer-shop .text {
  color: #ffffff;
  font-family: 'Marcellus', serif;
  font-size: 17px;
  letter-spacing: 0.08em;
}
.drawer-shop .drawer-shop-arrow {
  width: 20px;
  height: auto;
/*   filter: invert(1); */
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.drawer-shop:hover {
  background-color: #000000;
}
.drawer-shop:hover .drawer-shop-arrow {
  transform: translateX(6px);
}


/* =========================================================
   [ スマホ対応 ]
========================================================= */
@media (max-width: 768px) {
  .header-inner {
    height: 60px;
    padding: 0 20px;
    position: relative;   /* ロゴの絶対配置の基準 */
  }

  /* ロゴを小さく＋スマホは中央配置（ハンバーガーは右端のまま） */
  .header-logo {
    width: 140px;
    height: 15px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  /* PCナビ非表示・ハンバーガー表示 */
  .header-nav {
    display: none;
  }
  .header-toggle {
    display: block;
    margin-left: auto;   /* ロゴが絶対配置のため、右端に固定 */
  }

  /* メニューを開いている間はハンバーガーを×に */
  .header-toggle.is-active .toggle-bar {
    background-color: #1F1F1F;
  }
  .header-toggle.is-active .toggle-bar:nth-child(1) {
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
  }
  .header-toggle.is-active .toggle-bar:nth-child(2) {
    opacity: 0;
  }
  .header-toggle.is-active .toggle-bar:nth-child(3) {
    bottom: auto;
    top: 50%;
    transform: translateY(-50%) rotate(-45deg);
  }
}


/* =========================================================
   [ アクセシビリティ ] モーション低減設定を尊重
========================================================= */
@media (prefers-reduced-motion: reduce) {
  .header-drawer,
  .header-overlay,
  .drawer-item a,
  .drawer-shop,
  .toggle-bar,
  .logo-white,
  .logo-black,
  .site-header {
    transition-duration: 0.01ms !important;
  }
}


/* =========================================================
   [ 本文の余白 ] 固定ヘッダー分の押し下げ
   ※トップページ（FVがヘッダー背後に回る）には .no-header-pad を
     <body> か <main> に付けて無効化してください。
========================================================= */
main {
  padding-top: 88px;
}
.is-home-page main,
.no-header-pad main,
main.no-header-pad {
  padding-top: 0;
}
@media (max-width: 768px) {
  main {
    padding-top: 60px;
  }
}