/* ==========================================================================
   components.css — 共通部品（ヘッダー / ハンバーガー / メニュー / フッター / ボタン）
   ========================================================================== */

/* --------------------------------------------------------------------------
   矢印リンク（→ 付きリンク）
   -------------------------------------------------------------------------- */
.link-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  color: var(--color-text);
  font-weight: 700;
}
.link-arrow::after {
  content: "→";
  color: var(--color-accent);
  transition: transform 0.3s var(--ease);
}
.link-arrow:hover::after { transform: translateX(4px); }

/* ボタン（枠線＋矢印） */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  min-width: 220px;
  padding: var(--space-4) var(--space-6);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-sm);
  color: var(--color-accent);
  font-weight: 700;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.button::after { content: "→"; }
.button:hover { background: var(--color-accent); color: #fff; }

/* --------------------------------------------------------------------------
   スライドボタン（一覧はこちら）
   通常：白地・紫枠＋左の太い縦アクセントバー。
   ホバー：左からブランドグラデが右へ流れ込んで現れ、文字が白へ反転。
   -------------------------------------------------------------------------- */
.btn-slide {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  width: 100%;
  max-width: 270px;
  padding: 1.15rem clamp(1.5rem, 2.5vw, 2rem);
  border: 1px solid rgba(111, 44, 145, 0.4);  /* 薄い紫の細枠 */
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--color-accent);
  font-family: var(--font-serif); /* 明朝 */
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.1em;
  transition: color 0.35s var(--ease), border-color 0.35s var(--ease);
}
/* ホバーで左→右へ流れて現れるグラデ層（幅0→100%。矩形外へはみ出さない） */
.btn-slide::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--grad-brand);
  transition: width 0.45s var(--ease);
}
/* 左端の紫の縦帯（ボタン内側・左角は直角／右角のみ丸め） */
.btn-slide::after {
  content: "";
  position: absolute;
  left: 0;
  top: 22%;
  bottom: 22%;
  width: 6px;
  border-radius: 0 3px 3px 0;
  background: var(--color-accent);
  transition: opacity 0.35s var(--ease);
}
.btn-slide__arrow { font-family: var(--font-en); transition: transform 0.35s var(--ease); }
.btn-slide:hover,
.btn-slide:focus-visible { color: #fff; border-color: transparent; }
.btn-slide:hover::before,
.btn-slide:focus-visible::before { width: 100%; }
.btn-slide:hover::after,
.btn-slide:focus-visible::after { opacity: 0; }   /* グラデ充填時は帯を隠す */
.btn-slide:hover .btn-slide__arrow,
.btn-slide:focus-visible .btn-slide__arrow { transform: translateX(4px); }

/* ダーク背景版（ご寄附）：透明地・白の細枠＋白のアクセントバー。
   ホバー挙動（グラデ流し込み・文字白）は共通のまま。 */
.btn-slide--on-dark {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.45);
  color: #fff;
}
.btn-slide--on-dark::after { background: #fff; }
.btn-slide--on-dark:hover,
.btn-slide--on-dark:focus-visible { color: #fff; border-color: transparent; }

@media (prefers-reduced-motion: reduce) {
  .btn-slide::before,
  .btn-slide::after,
  .btn-slide__arrow { transition: none; }
}

/* --------------------------------------------------------------------------
   ヘッダー
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-header);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--container-pad);
  height: var(--header-h);
}

.logo { display: inline-flex; align-items: center; }
/* 正式ロゴ（マーク＋文字一体型 SVG） */
.logo__img {
  display: block;
  width: auto;
  height: clamp(48px, 5.5vw, 60px);
}

/* ハンバーガーボタン（白背景・角丸・グレー線） */
.hamburger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px; height: 60px;
  border-radius: var(--radius-sm);
  background: #ffffff;
  border: 1px solid var(--color-line);
  box-shadow: 0 4px 16px rgba(43, 47, 51, 0.06);
}
.hamburger__lines { position: relative; width: 26px; height: 20px; }
.hamburger__lines span {
  position: absolute; left: 0;
  width: 100%; height: 2px;
  background: var(--color-text);
  transition: transform 0.3s var(--ease), opacity 0.2s;
}
.hamburger__lines span:nth-child(1) { top: 0; }
.hamburger__lines span:nth-child(2) { top: 9px; }
.hamburger__lines span:nth-child(3) { top: 18px; }

/* --------------------------------------------------------------------------
   全画面メニュー（ハンバーガーで開閉）
   -------------------------------------------------------------------------- */
.menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  /* オーバレイ：D9D9D9 の透過。白パネルの下（コンテンツで埋まらない領域）で
     背面のページに薄くかかる。 */
  background: rgba(217, 217, 217, 0.75);
  padding: 0;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  /* transform 演出は使わない：使うとバー内 fixed が親基準になりヘッダーと位置がずれ、
     かつ開閉でロゴ／アイコンがスライドして見えるため（opacity フェードのみ） */
  transition: opacity 0.55s var(--ease), visibility 0.55s;
}
.menu.is-open { opacity: 1; visibility: visible; }

/* メニュー内側の要素だけをふわっと浮かせる（fixed の .menu__top は対象外にして位置ずれを防ぐ） */
.menu__grid > li,
.menu__sublinks a {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.menu.is-open .menu__grid > li,
.menu.is-open .menu__sublinks a { opacity: 1; transform: none; }
.menu.is-open .menu__grid > li:nth-child(1) { transition-delay: 0.12s; }
.menu.is-open .menu__grid > li:nth-child(2) { transition-delay: 0.16s; }
.menu.is-open .menu__grid > li:nth-child(3) { transition-delay: 0.20s; }
.menu.is-open .menu__grid > li:nth-child(4) { transition-delay: 0.24s; }
.menu.is-open .menu__grid > li:nth-child(5) { transition-delay: 0.28s; }
.menu.is-open .menu__grid > li:nth-child(6) { transition-delay: 0.32s; }
.menu.is-open .menu__grid > li:nth-child(7) { transition-delay: 0.36s; }
.menu.is-open .menu__grid > li:nth-child(8) { transition-delay: 0.40s; }
.menu.is-open .menu__grid > li:nth-child(9) { transition-delay: 0.44s; }
.menu.is-open .menu__sublinks a { transition-delay: 0.48s; }
@media (prefers-reduced-motion: reduce) {
  .menu__grid > li,
  .menu__sublinks a { transition: none; transform: none; opacity: 1; }
}

/* 白パネル：全幅・高さはコンテンツに追従（縦100%にしない）。
   下端にドロップシャドウ（Figma: X0 Y10 ぼかし10 / #000000）。 */
.menu__inner {
  width: 100%;
  background: #fff;
  padding: var(--header-h) var(--container-pad) clamp(2.5rem, 6vh, 4.5rem);
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.25);
}
/* パネル内のコンテンツは従来どおりコンテナ幅で中央寄せ */
.menu__grid,
.menu__sublinks { max-width: var(--container-max); margin-inline: auto; }

/* トップバー：ヘッダー（.site-header）と全幅・高さ・余白・配置を完全一致させ、
   開閉してもロゴ／アイコンが1pxも動かないようにする（同一のボックスモデル） */
.menu__top {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
  padding: var(--space-4) var(--container-pad);
}
/* 閉じるボタン：トップバー内でハンバーガーと同じ位置に載る。色はデザイン通り濃色 */
.menu__close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 60px; height: 60px;
  border-radius: var(--radius-sm);
  background: #2b2f33; color: #fff;
  font-size: 1.75rem; line-height: 1;
}

.menu__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: clamp(2rem, 5vw, 4.5rem);
  row-gap: 0;
  margin-top: var(--space-8);
}
.menu__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: clamp(1.1rem, 2vw, 1.6rem) var(--space-2);
  border-top: 1px solid var(--color-line);
  font-family: var(--font-serif);
  font-size: clamp(1.125rem, 1.6vw, 1.375rem);
  font-weight: 600;
  color: var(--color-text);
}
/* 各列の最下段だけ下線（＝列ごとに上下ボーダーで囲う。行間ボーダーは共有） */
.menu__grid > li:nth-last-child(-n+3) .menu__item { border-bottom: 1px solid var(--color-line); }
.menu__item::after { content: "→"; color: var(--color-accent); transition: transform 0.32s var(--ease); }

/* ホバー：背景色がふわっと付き、矢印が少し右へ動く（シンプル） */
.menu__item { transition: background-color 0.3s var(--ease); }
.menu__item:hover,
.menu__item:focus-visible { background-color: rgba(111, 44, 145, 0.06); }
.menu__item:hover::after,
.menu__item:focus-visible::after { transform: translateX(3.5px); }
@media (prefers-reduced-motion: reduce) {
  .menu__item,
  .menu__item::after { transition: none; }
}

.menu__sublinks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4) var(--space-8);
  margin-top: var(--space-16);
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}
/* 下部リンク：ホバーで下線が左→右へ伸びる（フッターと同様） */
.menu__sublinks a { position: relative; display: inline-block; }
.menu__sublinks a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.35s var(--ease);
}
.menu__sublinks a:hover::after,
.menu__sublinks a:focus-visible::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .menu__sublinks a::after { transition: none; }
}

/* --------------------------------------------------------------------------
   フッター（グラデーション背景）
   -------------------------------------------------------------------------- */
.site-footer {
  position: relative;
  overflow: hidden;
  background: var(--grad-brand-diagonal);
  color: var(--color-text-inverse);
  padding-top: var(--space-24);
}
.site-footer__inner {
  position: relative; z-index: 1;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
  justify-content: space-between;
}
.site-footer__brand { flex-shrink: 0; display: grid; gap: var(--space-3); }
.footer-logo {
  display: inline-flex; align-items: center;
  width: fit-content;
  background: #fff;
  border-radius: var(--radius-sm);
}
.footer-logo__img { display: block; width: clamp(180px, 15vw, 240px); height: auto; }
.site-footer__brand-links { display: grid; gap: var(--space-2); font-size: 0.8125rem; font-weight: 500; }
.site-footer__nav { display: flex; gap: clamp(2rem, 5vw, var(--space-16)); }
.footer-nav__col { display: grid; align-content: start; gap: var(--space-3); font-size: 0.9375rem; font-weight: 500; }

/* フッターリンク：ホバーで下線が左→右へ伸びる（白下線・シンプル） */
.footer-nav__col a,
.site-footer__brand-links a,
.site-footer__sublinks a {
  position: relative;
  display: inline-block;
}
.footer-nav__col a::after,
.site-footer__brand-links a::after,
.site-footer__sublinks a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: currentColor;   /* フッターは明色テキスト＝白系の下線 */
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.35s var(--ease);
}
.footer-nav__col a:hover::after,
.footer-nav__col a:focus-visible::after,
.site-footer__brand-links a:hover::after,
.site-footer__brand-links a:focus-visible::after,
.site-footer__sublinks a:hover::after,
.site-footer__sublinks a:focus-visible::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .footer-nav__col a::after,
  .site-footer__brand-links a::after,
  .site-footer__sublinks a::after { transition: none; }
}
.site-footer__copyright {
  position: relative; z-index: 1;
  max-width: var(--container-max);
  margin: var(--space-12) auto 0;
  padding: var(--space-6) var(--container-pad) 0;
  border-top: 1px solid rgba(0, 0, 0, 0.45);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4) var(--space-8);
}
.site-footer__copy { font-size: var(--fs-small); opacity: 0.85; }
.site-footer__sublinks {
  display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6);
  justify-content: flex-end;
  font-size: var(--fs-small);
  opacity: 0.9;
}
/* フッター下部の巨大英字あしらい（リードの巨大英字と同一・色は白50%透過） */
.site-footer__watermark {
  position: relative; z-index: 0;
  margin-top: var(--space-16);
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 13vw;               /* リード（.lead__giant）と同一係数 */
  line-height: 0.9;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
  user-select: none;
  /* 文字の下端を画面下にぴったり付ける（フォントのディセント余白を負マージンで切り、
     フッターの overflow:hidden でクリップ） */
  margin-bottom: -0.16em;
}
.site-footer__watermark-line { display: block; white-space: nowrap; }

/* --------------------------------------------------------------------------
   レスポンシブ
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .menu__grid { grid-template-columns: 1fr; }
  /* 1カラム時は最後の項目だけ下線 */
  .menu__grid > li:nth-last-child(-n+3) .menu__item { border-bottom: none; }
  .menu__grid > li:last-child .menu__item { border-bottom: 1px solid var(--color-line); }
  .site-footer__inner { flex-direction: column; gap: var(--space-8); }
  .site-footer__nav { gap: var(--space-8); }
  .site-footer__sublinks { justify-content: flex-start; }
}

@media (max-width: 600px) {
  :root { --header-h: 84px; }
  .site-footer__nav { flex-direction: column; }
}

/* --------------------------------------------------------------------------
   サイト全体の追従カーソル（MV と同系のリング）— 全ページ共通
   ・ポインタ端末のみ。JS（main.js）が .site-cursor を body に追加し追従させる。
   ・TOP の MV エリア内では hero.js の .mv-cursor に任せて非表示にする。
   ・タッチ／hover 非対応端末では既定カーソルのまま（下記 @media で無効化）。
   -------------------------------------------------------------------------- */
.site-cursor {
  position: fixed; left: 0; top: 0;
  width: 40px; height: 40px;
  border: 1.5px solid rgba(102, 119, 128, 0.6);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: var(--z-cursor);
  background: rgba(167, 182, 191, 0.1);
  opacity: 0;
  transition: width 0.22s var(--ease), height 0.22s var(--ease), background 0.22s var(--ease), border-color 0.3s var(--ease), opacity 0.25s var(--ease);
}
.site-cursor.is-active { opacity: 1; }
.site-cursor::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 3px; height: 3px; border-radius: 50%;
  background: rgba(102, 119, 128, 0.85);
  transform: translate(-50%, -50%);
  transition: width 0.22s var(--ease), height 0.22s var(--ease), opacity 0.22s var(--ease);
}
/* リンク／ボタン上：リングが縮んで中央の小さな塗りドットに（吸い付く合図） */
.site-cursor.is-link {
  width: 15px; height: 15px;
  background: var(--color-accent);
  border-color: transparent;
}
.site-cursor.is-link::after { opacity: 0; }
/* 既定カーソルを隠す（追従リングに置換）。付与は JS 側（ポインタ端末のみ） */
body.has-site-cursor,
body.has-site-cursor a,
body.has-site-cursor button,
body.has-site-cursor [role="button"] { cursor: none; }
@media (hover: none) { .site-cursor { display: none; } }

/* --------------------------------------------------------------------------
   バイナリ・トレイル（マウス軌道を 0/1 が流れて消える／Canvas 描画）— 全ページ共通
   デザイン参考: docs/マウスアニメーション参考（案2）.html の案2(mode B)。
   ・JS（main.js）が .binary-trail-canvas を body に追加して描画。
   ・TOP では MV エリア上を除外（hero.js の演出に譲る）。他ページは全面で有効。
   -------------------------------------------------------------------------- */
.binary-trail-canvas {
  position: fixed;
  inset: 0;
  z-index: 40;              /* ヘッダー(50)・メニュー(80)より下。pointer-events は無効 */
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .binary-trail-canvas { display: none; }
}