/* =========================================================
   KARI — style.css
   ---------------------------------------------------------
   1. デザイン設定（色・フォント・サイズ・余白）   ← 基本はここだけ変更
   2. 基本設定
   3. 共通UI：KARI / ナビゲーション / ページタイトル / copyright
   4. ページ出現モーション（Top以外の全ページ共通）
   5. スクロールで写真が現れるモーション（共通）
   5-2. スクロールでKARI・ナビが静かに消えるモーション（共通）
   6. 動きを減らす設定（prefers-reduced-motion）
   7. スマートフォン（画面幅760px以下）共通：KARI / メニュー / ページタイトル

   ページごとの見た目は別ファイルです：
   top.css（Top） / work.css（Work） / brand.css（niejta・floreisen）
   biography.css（Biography） / news.css（News） / contact.css（Contact）
   ========================================================= */


/* ---------------------------------------------------------
   1. デザイン設定
   数値の多くは「画面幅に合わせて伸び縮みする値」です。
   clamp(最小, 基準, 最大) … 画面が小さくても大きくても範囲内に収まります。
   --------------------------------------------------------- */
:root {
  /* フォント */
  --font-serif: "Cormorant Garamond", serif;
  --font-japanese: "Shippori Mincho", serif;
  --font-base: var(--font-serif), var(--font-japanese), serif;

  /* 色（白・黒・グレー） */
  --color-background: #ffffff;
  --color-text: #202020;
  --color-text-inverse: #ffffff;     /* 白い文字（Newsの画像の上の日付） */
  --color-muted: #767676;           /* copyright などの控えめな文字 */
  --color-line: #7a7a7a;            /* 細い線（Workページの横線など） */
  --color-image-placeholder: #f2f2f0;

  /* 文字サイズ */
  --font-size-brand: clamp(26px, 1.68vw, 44px);       /* KARI */
  --font-size-field: clamp(12px, 0.8vw, 19px);       /* Craft / Textile Arts */
  --font-size-nav: clamp(15px, 1.1vw, 26px);         /* ナビゲーション */
  --font-size-page-title: clamp(20px, 1.56vw, 40px); /* 下層ページのタイトル（work など） */
  --font-size-page-sub: clamp(14px, 1.06vw, 27px);   /* タイトル下の小さなラベル（brand など） */
  --font-size-copyright: clamp(10px, 0.66vw, 15px);  /* © NAOYA YABUKI */
  --font-size-store: clamp(13px, 0.96vw, 23px);       /* online store */

  /* 文字の間隔・行の高さ */
  --letter-spacing-brand: 0em;
  --letter-spacing-nav: 0.04em;
  --line-height-tight: 1.1;
  --line-height-nav: 2.1;  /* ナビ項目どうしの間隔 */
  --line-height-ja: 1.3;   /* 日本語の文章の行間（Biography本文と同じ値） */

  /* 配置・余白（スケッチの位置関係） */
  --page-top: 10vh;          /* 上の余白：KARIと画像の上端をそろえる */
  --brand-left: 5.4vw;       /* KARIの左位置 */
  --brand-center: 8.6vw;     /* KARIの中心線（ページタイトルもこの線に中央そろえ） */
  --page-heading-top: 46.4vh; /* 下層ページのタイトルの上位置 */

  /* ページを横切る横線（Work / niejta / floreisen 共通） */
  --line-top: 50vh;          /* 線の高さ位置 */
  --line-left: 11.47vw;      /* 線の左端（ページごとに変えられます） */
  --line-right: 82.09vw;     /* 線の右端（全ページ共通） */
  --store-right: 81.28vw;    /* online store の右端 */
  --content-left: 20.3vw;    /* メイン画像の左位置 */
  --nav-left: 85.9vw;        /* ナビゲーションの左位置 */
  --nav-top: 12.2vh;          /* ナビゲーションの上位置 */
  --page-padding: 24px;      /* スマートフォンでの左右の余白 */

  /* Topのメイン画像 */
  --top-image-height: 80vh;  /* 画面の高さの80% */
  --top-image-ratio: 2 / 3;  /* 縦長 2:3 */

  /* 動き */
  --intro-duration: 4s;      /* 初期表示アニメーションの長さ */
  --hover-duration: 0.4s;
  --submenu-duration: 0.9s;  /* サブメニューのフェード */
  --hover-opacity: 0.5;

  /* ページ出現モーション（Top以外の全ページ共通） */
  /* 全体の長さは約1.7秒（--enter-each ＋ 順番ごとの --enter-stagger で決まります） */
  --enter-each: 1.4s;        /* 1つの要素が現れるのにかかる時間 */
  --enter-stagger: 0.1s;     /* 要素どうしのごく小さな時間差 */
  --enter-distance: 8px;     /* 下から浮かび上がる距離 */
  --enter-ease: cubic-bezier(0.33, 0, 0.2, 1);
  --reveal-distance: 20px;   /* スクロールで写真が現れる時、下から浮かぶ距離 */
  --reveal-stagger: 0.05s;   /* 横に並んだ写真どうしのごく小さな時間差 */

  /* スクロールでKARI・ナビが消える動き（has-scroll-header のページ） */
  --header-fade-offset: 160px;   /* 消え終わる位置：ページタイトル上端からこの分だけ上 */
  --header-fade-distance: 40px;  /* 消え始めてから消え終わるまでのスクロール量（短いほど、すっと消える） */
  --header-fade-duration: 0.15s; /* スクロールに追いつくまでの時間（短いほど、直接反応する） */
}


/* ---------------------------------------------------------
   2. 基本設定
   --------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-base);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, figure, ul { margin: 0; padding: 0; }
ul { list-style: none; }
img { display: block; max-width: 100%; }

a {
  color: inherit;
  text-decoration: none;
  transition: opacity var(--hover-duration) ease;
}
a:hover { opacity: var(--hover-opacity); }

/* ナビと online store は同じhover（opacity 50%・同じ時間・同じeasing） */
.nav-link,
.store-link { transition: opacity var(--hover-duration) ease; }
.nav-link:hover,
.store-link:hover { opacity: var(--hover-opacity); }

/* 画面には見えず、読み上げだけされる文字 */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

:focus-visible {
  outline: 1px solid var(--color-text);
  outline-offset: 4px;
}


/* ---------------------------------------------------------
   3. 共通UI（今後の全ページで使います）
   --------------------------------------------------------- */

/* KARI */
.site-brand {
  position: absolute;
  top: calc(var(--page-top) + 0.35vh);
  left: var(--brand-left);
  z-index: 2;
  text-align: center;
}
.brand-name {
  font-family: var(--font-serif);
  font-size: var(--font-size-brand);
  font-weight: 400;
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-brand);
  /* 文字間隔の分だけ右にずれるのを補正して中央をそろえる */
  margin-right: calc(var(--letter-spacing-brand) * -1);
}
.brand-field {
  margin-top: 0.42em;
  font-size: var(--font-size-field);
  letter-spacing: 0.02em;
  line-height: var(--line-height-tight);
}

/* ナビゲーション */
/* 画面に固定（スクロールしても同じ位置に残ります。背景は透明のまま） */
.global-nav {
  position: fixed;
  top: var(--nav-top);
  left: var(--nav-left);
  z-index: 100;
  background: transparent;
  text-align: left;
}
.nav-list {
  font-size: var(--font-size-nav);
  line-height: var(--line-height-nav);
  letter-spacing: var(--letter-spacing-nav);
}
.nav-link { display: inline-block; }

/* サブメニュー（work → niejta / floreisen）
   高さ0から開き、文字はゆっくりフェードインします */
.submenu-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--submenu-duration) ease;
}
.submenu {
  overflow: hidden;
  min-height: 0;
  padding-left: 0.6em;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--submenu-duration) ease,
    visibility 0s linear var(--submenu-duration);
}
.has-sub:hover .submenu-wrap,
.has-sub:focus-within .submenu-wrap,
.has-sub.is-open .submenu-wrap {
  grid-template-rows: 1fr;
}
.has-sub:hover .submenu,
.has-sub:focus-within .submenu,
.has-sub.is-open .submenu {
  opacity: 1;
  visibility: visible;
  transition:
    opacity var(--submenu-duration) ease 0.15s,
    visibility 0s;
}

/* Escキーで閉じた時 */
.has-sub.is-closed .submenu-wrap { grid-template-rows: 0fr; }
.has-sub.is-closed .submenu { opacity: 0; visibility: hidden; }

/* 現在のページタイトル（下層ページ用。Topでは使いません）
   例：<header class="page-heading">
         <h1 class="page-title">work</h1>
         <p class="page-subtitle">brand</p>
       </header> */
.page-heading {
  position: absolute;
  top: var(--page-heading-top);
  left: var(--brand-center);
  transform: translateX(-50%);
  z-index: 2;
  text-align: center;
  white-space: nowrap;
}
.page-title {
  font-family: var(--font-serif);
  font-size: var(--font-size-page-title);
  font-weight: 400;
  line-height: var(--line-height-tight);
  color: var(--color-text);
}
.page-subtitle {
  margin-top: 1.34em;
  font-size: var(--font-size-page-sub);
  line-height: var(--line-height-tight);
  color: var(--color-text);
}

/* ページを横切る横線（Work / niejta / floreisen 共通）
   線は「移動」せず、左端を起点に長さだけが変わります（scaleX） */
.page-line {
  position: absolute;
  top: var(--line-top);
  left: var(--line-left);
  z-index: 2;
  width: calc(var(--line-right) - var(--line-left));
  height: 1px;
  background: var(--color-line);
  pointer-events: none;
  transform-origin: left center;
}

/* online store（タイトルと同じ高さ、線の右端の少し内側） */
.store-link {
  position: absolute;
  top: var(--page-heading-top);
  left: var(--store-right);
  z-index: 2;
  transform: translateX(-100%);  /* 右端をそろえる */
  padding-top: 0.2em;            /* 文字の高さをタイトルにそろえる */
  font-family: var(--font-serif);
  font-size: var(--font-size-store);
  line-height: var(--line-height-tight);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* Copyright */
.copyright {
  display: block;
  font-family: var(--font-serif);
  font-size: var(--font-size-copyright);
  line-height: var(--line-height-tight);
  letter-spacing: 0.04em;
  color: var(--color-muted);
}


/* ---------------------------------------------------------
   4. ページ出現モーション（Top以外の全ページ共通）
   ---------------------------------------------------------
   使い方：現れてほしい要素に class="page-enter" を付けるだけ。
   ・KARI / Craft / Textile Arts / ナビゲーションには付けません（常に表示）
   ・ページタイトル1行目（.page-title）にも付けます。
     ナビで「今いるページ」をもう一度押した時だけ、1行目は動かさず固定されます。
   ・現れる順番は --enter-order（0, 1, 2…）。各ページのCSSで指定します。
     順番ごとに --enter-stagger（0.1秒）ずつ遅れて始まります。
   --------------------------------------------------------- */

/* ページを開いた直後：固定UIと白い背景だけの状態 */
.page-pre .page-enter { opacity: 0; }

/* 出現：ごく小さく下から、透明 → 表示へ */
.page-entering .page-enter {
  animation: page-enter var(--enter-each) var(--enter-ease) backwards;
  animation-delay: calc(var(--enter-order, 0) * var(--enter-stagger));
}

/* 横線：同じ時間の中で、左から右へ長さが伸びる */
.page-entering .page-line.page-enter { animation-name: page-line-grow; }

/* 今いるページをナビから再度クリックした時：タイトル1行目は固定 */
.page-replay .page-title.page-enter { animation: none; }

@keyframes page-line-grow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@keyframes page-enter {
  from {
    opacity: 0;
    translate: 0 var(--enter-distance);
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}


/* ---------------------------------------------------------
   5. スクロールで写真が現れるモーション（共通）
   ---------------------------------------------------------
   使い方：写真などに class="reveal" を付けるだけ。
   画面に入ってきた時に、下から20pxだけ静かに浮かびながら現れます。
   （ページを開いた時に画面内にある写真は、ページ出現モーションと一緒に現れます）
   --------------------------------------------------------- */
.page-pre .reveal,
.reveal-ready .reveal:not(.is-visible) {
  opacity: 0;
  translate: 0 var(--reveal-distance);
}
.reveal {
  transition:
    opacity var(--enter-each) var(--enter-ease),
    translate var(--enter-each) var(--enter-ease);
  transition-delay: var(--reveal-delay, 0s);
}
/* 再生し直す時に、一瞬で元の状態へ戻すための設定 */
.reveal-reset .reveal { transition: none; }


/* ---------------------------------------------------------
   5-2. スクロールでKARI・ナビが静かに消えるモーション（共通）
   ---------------------------------------------------------
   使い方：<body> の class に has-scroll-header を足すだけ。
   （今は niejta / floreisen / biography / news）
   ・PC幅では KARI もナビと同じく画面に固定します（位置は今までと同じ）
   ・下へスクロールすると、ページタイトル上端より少し手前で
     KARI とナビがすっと消え、上へ戻ると同じところで再び現れます
   ・透明度はスクロール位置から main.js が計算します（--header-opacity）
   --------------------------------------------------------- */
@media (min-width: 761px) {
  .has-scroll-header .site-brand { position: fixed; z-index: 100; }
}
.has-scroll-header .site-brand,
.has-scroll-header .global-nav {
  opacity: var(--header-opacity, 1);
  transition: opacity var(--header-fade-duration) linear;
}
/* 消えている間はクリックできないように */
.header-hidden .has-scroll-header .site-brand,
.header-hidden .has-scroll-header .global-nav { pointer-events: none; }
/* キーボード（Tab）で移動してきた時は表示する */
.has-scroll-header .site-brand:focus-within,
.has-scroll-header .global-nav:focus-within { opacity: 1; pointer-events: auto; }


/* ---------------------------------------------------------
   6. 動きを減らす設定がONの環境では、アニメーションを止めます
   （コンテンツはすぐに表示されます）
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .submenu-wrap,
  .submenu,
  a { transition: none !important; }

  .page-pre .page-enter { opacity: 1; }
  .page-entering .page-enter { animation: none; }

  .page-pre .reveal,
  .reveal-ready .reveal:not(.is-visible) { opacity: 1; translate: none; }
  .reveal { transition: none; }
  .has-scroll-header .site-brand,
  .has-scroll-header .global-nav { transition: none; }
}


/* ---------------------------------------------------------
   7. スマートフォン（画面幅760px以下）共通
   ---------------------------------------------------------
   PCの指定はそのままに、スマートフォンでだけ値を上書きします。
   数値の vw は「画面の横幅に対する割合」（1vw = 横幅の1%）。
   375〜430pxのどの幅でも、ラフと同じ比率で表示されます。
   --------------------------------------------------------- */

/* ハンバーガーボタンは、PCでは表示しません */
.menu-toggle { display: none; }

@media (max-width: 760px) {
  :root {
    /* 左右の余白 */
    --page-padding: 6.33vw;

    /* KARI */
    --font-size-brand: 6.63vw;
    --font-size-field: 3.01vw;
    --sp-brand-top: 10.6vw;         /* KARI の上位置 */
    --sp-brand-left: 6.5vw;         /* KARI / Craft / Textile Arts の左位置 */

    /* 下層ページのタイトル（全ページ共通の位置・大きさ） */
    --page-heading-top: 63.5vw;
    --font-size-page-title: 3.52vw;
    --font-size-page-sub: 2.44vw;

    /* ハンバーガー（二本線） */
    --menu-button-top: 13.67vw;     /* 上の線の高さ */
    --menu-button-width: 8.5vw;     /* 線の長さ */
    --menu-button-gap: 2.61vw;      /* 二本線の間隔 */
    --menu-button-pad: 3vw;         /* 押しやすいように周りに取る余白 */
    --menu-line-color: #7f7f7f;

    /* メニュー（全画面） */
    --menu-background: #363636;
    --menu-image: url("../img/menu-bg.webp");   /* メニューの背景画像 */
    --menu-text-color: #ffffff;
    --menu-left: 72.5vw;            /* メニュー文字の左位置 */
    --menu-top: 26.6vw;             /* メニュー文字の上位置 */
    --font-size-menu: 3.62vw;
    --line-height-menu: 2.15;
    --menu-fade-duration: 1.3s;     /* 背景画像がふわっと現れる・消える時間 */
    --menu-text-delay: 0.45s;       /* 背景より少し遅れて文字が現れるまでの時間 */
    --menu-icon-duration: 0.9s;     /* 二本線 ⇔ クロスの変化の時間 */

    /* ページ移動：消える → 白い画面 → 次のページ */
    --page-leave-fade: 0.9s;        /* Work の画像から：ページが消える時間 */
    --page-leave-white: 0.9s;       /* Work の画像から：白い画面の時間 */
    --menu-leave-fade: 0.5s;        /* メニューから：メニューとハンバーガーが消える時間 */
    --menu-leave-white: 0.3s;       /* メニューから：白い画面の時間 */

    /* 線（Work の縦線・niejta / floreisen の横線。ハンバーガーには使いません） */
    --sp-line-weight: 0.5px;
    --sp-line-color: #202020;

    /* 下層ページの KARI の出現（Top の出現と同じ性質を、下層ページ用に短く） */
    --sp-brand-enter-duration: 1.7s;
  }

  /* KARI：左上に固定し、スクロールで静かに消える（main.js が透明度を計算） */
  .site-brand {
    position: fixed;
    top: var(--sp-brand-top);
    left: var(--sp-brand-left);
    z-index: 100;
    opacity: var(--header-opacity, 1);
    transition: opacity var(--header-fade-duration) linear;
  }
  .header-hidden .site-brand { pointer-events: none; }
  /* Top の初期表示（4秒）が終わった後も、スクロールでの透明度に従う */
  .js.intro-play .site-brand.intro {
    opacity: var(--header-opacity, 1);
    animation-fill-mode: backwards;
  }
  .brand-field { margin-top: 0.4em; }

  /* 下層ページ：KARI もページと一緒に現れる（動かずに、その場で静かにフェードイン）。
     もう一度同じページを開いた時（page-replay）は表示したまま */
  /* ハンバーガーの二本線も、KARI と同じタイミング・同じ動きで現れる */
  .page-pre body:not(.page-top) .site-brand,
  .page-pre body:not(.page-top) .menu-toggle { opacity: 0; }
  .page-entering body:not(.page-top) .site-brand,
  .page-entering body:not(.page-top) .menu-toggle {
    animation: brand-enter var(--sp-brand-enter-duration) var(--enter-ease) backwards;
  }
  .page-replay body:not(.page-top) .site-brand,
  .page-replay body:not(.page-top) .menu-toggle { animation: none; }

  /* Top：ハンバーガーの二本線も、KARI と同じ初期表示（約4秒・その場でフェードイン） */
  .js:not(.intro-play) body.page-top .menu-toggle { opacity: 0; }
  .js.intro-play body.page-top .menu-toggle {
    animation: brand-enter var(--intro-duration) cubic-bezier(0.33, 0, 0.2, 1) backwards;
  }

  /* 下層ページのタイトル：左揃え。全ページ同じ位置から始まります */
  .page-heading {
    left: var(--page-padding);
    transform: none;
    text-align: left;
  }
  .page-subtitle { margin-top: 1.5em; }

  /* ハンバーガーボタン：右上に固定（スクロールしても消えません） */
  .menu-toggle {
    display: block;
    position: fixed;
    top: calc(var(--menu-button-top) - var(--menu-button-pad));
    top: round(calc(var(--menu-button-top) - var(--menu-button-pad)), 1px);
    right: calc(var(--page-padding) - var(--menu-button-pad));
    z-index: 300;
    width: calc(var(--menu-button-width) + var(--menu-button-pad) * 2);
    height: calc(var(--menu-button-gap) + var(--menu-button-pad) * 2);
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .menu-toggle-line {
    position: absolute;
    left: var(--menu-button-pad);
    width: var(--menu-button-width);
    height: 0.5px;                  /* ラフと同じ細い線 */
    background: var(--menu-line-color);
    transition: transform var(--menu-icon-duration) var(--enter-ease);
  }
  /* 2本の線を同じ濃さに見せるため、位置をピクセルの境目にそろえる */
  .menu-toggle {
    --line-top-snapped: var(--menu-button-pad);
    --line-gap-snapped: var(--menu-button-gap);
  }
  @supports (top: round(1.5px, 1px)) {
    .menu-toggle {
      --line-top-snapped: round(var(--menu-button-pad), 1px);
      --line-gap-snapped: round(var(--menu-button-gap), 2px);
    }
  }
  .menu-toggle-line:first-child { top: var(--line-top-snapped); }
  .menu-toggle-line:last-child  { top: calc(var(--line-top-snapped) + var(--line-gap-snapped)); }
  /* 開いている時：二本線 → クロス（閉じるボタン） */
  :root.menu-open .menu-toggle-line:first-child {
    transform: translateY(calc(var(--line-gap-snapped) / 2)) rotate(22.8deg);
  }
  :root.menu-open .menu-toggle-line:last-child {
    transform: translateY(calc(var(--line-gap-snapped) / -2)) rotate(-22.8deg);
  }

  /* メニュー：PCの右側のナビを、全画面のメニューとして使います */
  :root .global-nav {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 200;
    padding: var(--menu-top) 0 0 var(--menu-left);
    background: var(--menu-background) var(--menu-image) left top / cover no-repeat;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      opacity var(--menu-fade-duration) var(--enter-ease),
      visibility 0s linear var(--menu-fade-duration);
  }
  :root.menu-open body .global-nav {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity var(--menu-fade-duration) var(--enter-ease), visibility 0s;
  }
  .js.intro-play .global-nav.intro { animation: none; }
  :root.menu-open { overflow: hidden; }   /* 開いている間は後ろのページを動かさない */

  /* メニューの文字：背景が現れてから、少し遅れて静かに表示 */
  .global-nav .nav-list {
    font-size: var(--font-size-menu);
    line-height: var(--line-height-menu);
    color: var(--menu-text-color);
    opacity: 0;
    transition: opacity 0.6s ease;
  }
  :root.menu-open .global-nav .nav-list {
    opacity: 1;
    transition: opacity var(--menu-fade-duration) ease var(--menu-text-delay);
  }
  /* スマートフォンでは work の下の niejta / floreisen を最初から表示 */
  .global-nav .submenu-wrap,
  .global-nav .has-sub .submenu-wrap { grid-template-rows: 1fr; transition: none; }
  .global-nav .submenu,
  .global-nav .has-sub .submenu {
    opacity: 1;
    visibility: inherit;
    padding-left: 0.86em;
    transition: none;
  }
}

@media (max-width: 760px) {
  /* ページ移動の白い画面（メニュー・Work の画像から移動する時）
     今のページが消える → 白い画面 → 次のページが出現モーションで現れる。
     白い面は KARI やページの上、メニューの下に重なります */
  body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 150;
    background: var(--color-background);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      opacity var(--page-leave-fade) ease,
      visibility 0s linear var(--page-leave-fade);
  }
  :root.page-leaving body::after {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity var(--page-leave-fade) ease, visibility 0s;
  }
  :root.page-leaving-instant body::after { transition: none; }   /* メニューの下では最初から白 */
  :root.page-leaving-instant { --page-leave-fade: var(--menu-leave-fade); }   /* メニューから移動する時の時間 */
  /* 閉じたメニューは、文字にフォーカスが残っていても表示しない（PCの「Tabで表示」はPCだけ） */
  :root:not(.menu-open) .global-nav:focus-within { opacity: 0; pointer-events: none; }
  :root.page-leaving .global-nav {
    transition:
      opacity var(--page-leave-fade) var(--enter-ease),
      visibility 0s linear var(--page-leave-fade);
  }
  :root.page-leaving .menu-toggle {
    opacity: 0;
    transition: opacity var(--page-leave-fade) ease;
  }
}

/* KARI の出現（Top の intro-fade と同じ動きの、下層ページ用） */
@keyframes brand-enter {
  from { opacity: 0; filter: blur(1.5px); }
  to   { opacity: 1; filter: blur(0); }
}

/* タッチ操作の端末では、KARI を押した後に「薄い状態（hover）」が残らないように */
@media (hover: none) {
  .brand-link:hover { opacity: 1; }
}

@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .site-brand,
  :root .global-nav,
  .global-nav .nav-list,
  .menu-toggle-line,
  body::after,
  .menu-toggle { transition: none !important; }
  .page-entering body:not(.page-top) .site-brand,
  .page-entering body:not(.page-top) .menu-toggle,
  .js.intro-play body.page-top .menu-toggle { animation: none; }
  .page-pre body:not(.page-top) .site-brand,
  .page-pre body:not(.page-top) .menu-toggle,
  .js:not(.intro-play) body.page-top .menu-toggle { opacity: 1; }
}