@charset "utf-8";
/* =====================================================================
   Age.3 ブランドサイト — 共通スタイル
   1. トークン / 2. リセット / 3. 文字 / 4. 部品 / 5. ヘッダー
   6. ローダー・遷移 / 7. トップ / 8. 下層共通 / 9. 各ページ
   10. フッター / 11. Cookie / 12. レスポンシブ・動きの抑制
   ===================================================================== */

/* ---------------------------------------------------------------- 1. トークン */
:root {
  --color-cream: #F9F1E7;
  --color-charcoal: #322D2D;
  /* 揚げたての色。文字と印に使う金色は、置く面の明るさで2つを切り替える。 */
  --color-brand: #8A6000;      /* アイボリー地で対比 5.0 */
  --color-brand-lt: #E9B949;   /* 暗い面で使う金色。黒地で対比 10.8 */
  /* 白い文字を乗せる面（バッジ・押した時のボタン）。面の明るさによらず固定。
     明るい金色を敷くと白文字が読めなくなるため、必ず濃いほうを使う。 */
  --brand-fill: #8A6000;       /* 白文字との対比 5.6 */
  --color-black: #0C0A0B;
  --color-white: #FFFFFF;
  --line-dark: rgba(50, 45, 45, .20);
  --line-light: rgba(249, 241, 231, .20);

  /* 文字色（アイボリー地で対比 10.6 / 黒地で 15.9） */
  --ink: #322D2D;
  --ink-mute: #6B6260;          /* アイボリー地で対比 5.2 */
  --on-dark: #F9F1E7;
  --on-dark-mute: #A79E97;      /* 黒地で対比 6.6 */

  --serif-en: "Cormorant Garamond", "Times New Roman", serif;
  --serif-jp: "Shippori Mincho", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --sans: "Inter", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;

  --pad: 20px;
  --r: 18px;          /* パネルの角丸（スマホ） */
  --r-btn: 4px;       /* 小さなボタンの角丸 */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t-hover: .38s;
  --t-text: .8s;
  --t-sec: 1s;
  --t-page: 1.1s;
  --paper-strength: .08;   /* 紙の質感の強さ。0 で消える（目安 .06〜.10） */
  --hd-notice: 26px;
  --hd-main: 56px;
}
@media (min-width: 821px) {
  :root { --pad: 33px; --r: 17px; --hd-main: 68px; }
}

/* ---------------------------------------------------------------- 2. リセット */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* 横あふれの押さえ込みには clip を使う。hidden だとスクロールの入れ物が作られ、
   トップのヒーローの position:sticky が効かなくなって黒い余白が出る。
   clip に対応しない古いブラウザ向けに hidden を先に書いてある。 */
html {
  -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--color-cream);
  overflow-x: hidden; overflow-x: clip;
}
html.js-lock { overflow: hidden; }
body {
  background: var(--color-cream); color: var(--ink);
  font-family: var(--sans); font-size: 14px; font-weight: 400;
  line-height: 1.85; letter-spacing: .04em;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden; overflow-x: clip; overflow-wrap: break-word; word-break: auto-phrase;
}
img, svg, video { display: block; max-width: 100%; }
/* 背景は付けない。透過PNG・透過WebPの裏に灰色の板が出てしまうため。
   読み込み中の下地が要る場所は .ph が持っている。 */
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
ul, ol { list-style: none; }
:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 3px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; top: 8px; left: 8px; z-index: 300; padding: 12px 18px;
  background: var(--color-charcoal); color: var(--color-cream); border-radius: var(--r-btn);
  transform: translateY(-200%); transition: transform .2s var(--ease);
}
.skip-link:focus { transform: none; }

/* 紙の質感。1枚を cover で敷く（繰り返すと継ぎ目が出るため）。
   操作の邪魔をしないよう pointer-events は無効、ヘッダーやメニューより下に置く。 */
.paper {
  position: fixed; inset: 0; z-index: 60; pointer-events: none;
  background: url("img/texture-paper.webp") center / cover no-repeat;
  opacity: var(--paper-strength); mix-blend-mode: multiply;
}
@media (prefers-reduced-motion: reduce) { .paper { opacity: calc(var(--paper-strength) * .6); } }

/* 暗い面では金色を明るいほうに差し替える（1か所で全部の点と装飾文字が切り替わる） */
.panel-black, .is-dark, .ft, .hd-notice, .creed, .hero, .recruit-sec, .line-sec { --color-brand: var(--color-brand-lt); }

/* ---------------------------------------------------------------- 3. 文字 */
.u-en { font-family: var(--serif-en); font-weight: 400; font-style: normal; }
.u-mincho { font-family: var(--serif-jp); font-weight: 400; }

/* セクション見出し（英字を小文字で大きく＋赤いドット＋小さな日本語） */
.sec-head { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 8px 16px; }
.sec-head h2, .sec-head .h {
  font-family: var(--serif-en); font-weight: 400; font-size: clamp(52px, 13vw, 66px);
  line-height: .92; letter-spacing: -.01em; text-transform: lowercase;
}
.sec-head .ja {
  display: flex; align-items: center; gap: 9px; padding-bottom: 10px;
  font-size: 12px; letter-spacing: .14em; color: var(--ink-mute);
}
.dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--color-brand); }
.dark .sec-head .ja, .is-dark .sec-head .ja { color: var(--on-dark-mute); }

/* 英字見出しの「字間を広げた層」と「通常の層」を重ねる演出 */
.split { position: relative; display: inline-block; }
.split .lay {
  display: block; transition: opacity 1.1s var(--ease), letter-spacing 1.1s var(--ease), transform 1.1s var(--ease);
}
.split .lay-wide { letter-spacing: .34em; opacity: 1; }
.split .lay-base { position: absolute; inset: 0; letter-spacing: -.01em; opacity: 0; }
.split.on .lay-wide { letter-spacing: -.01em; opacity: 0; }
.split.on .lay-base { letter-spacing: -.01em; opacity: 1; }

.lead { font-size: 14px; line-height: 1.95; }
.lead-mincho { font-family: var(--serif-jp); font-size: clamp(17px, 4.6vw, 22px); line-height: 2.15; letter-spacing: .1em; }
.label { font-size: 11px; letter-spacing: .18em; color: var(--ink-mute); text-transform: uppercase; }
.dark .label { color: var(--on-dark-mute); }

/* 出現アニメーション */
.rv { opacity: 0; transform: translateY(22px); transition: opacity var(--t-text) var(--ease), transform var(--t-text) var(--ease); }
.rv.on { opacity: 1; transform: none; }
.rv-line { display: block; overflow: hidden; }
.rv-line > span { display: block; transform: translateY(105%); transition: transform var(--t-text) var(--ease); }
.rv-line.on > span { transform: none; }
.rv-clip { clip-path: inset(0 0 100% 0); transition: clip-path 1.2s var(--ease); }
.rv-clip.on { clip-path: inset(0 0 0 0); }
[class*="rv"][style*="--d"] { transition-delay: var(--d); }

/* ---------------------------------------------------------------- 4. 部品 */
.wrap { padding-left: var(--pad); padding-right: var(--pad); }
.rule { height: 1px; background: var(--line-dark); border: 0; }
.dark .rule, .is-dark .rule { background: var(--line-light); }

/* 正方形の矢印ボタン */
.arw {
  flex: none; display: inline-grid; place-items: center;
  width: 44px; height: 44px; border-radius: var(--r-btn);
  background: var(--color-charcoal); color: var(--color-cream);
  font-size: 14px; line-height: 1; overflow: hidden; position: relative;
  transition: background var(--t-hover) var(--ease);
}
.arw span { display: block; transition: transform var(--t-hover) var(--ease); }
a:hover > .arw, button:hover > .arw, .arw:hover { background: var(--brand-fill); color: var(--color-white); }
a:hover > .arw span, button:hover > .arw span, .arw:hover span { transform: translateX(3px); }
.arw.lt { background: var(--color-cream); color: var(--color-charcoal); }
.arw.red { background: var(--brand-fill); color: var(--color-white); }
.arw.sm { width: 34px; height: 34px; font-size: 12px; }

/* 文字＋矢印のリンク */
.cta { display: inline-flex; align-items: center; gap: 14px; font-size: 14px; letter-spacing: .12em; }
.cta b { font-weight: 500; }

/* パネルの重なり（前のセクションに次の角丸パネルがかぶさる） */
.panel { position: relative; z-index: 2; border-radius: var(--r) var(--r) 0 0; margin-top: calc(var(--r) * -1); }
.panel-cream { background: var(--color-cream); }
.panel-black { background: var(--color-black); color: var(--on-dark); }
.panel-char { background: var(--color-charcoal); color: var(--on-dark); }

/* 写真の枠 */
/* span で書いている箇所があるため display を明示する。インラインのままだと
   aspect-ratio が効かず、枠の高さが決まらないまま中身が下にはみ出す
   （ブランド一覧や店舗一覧の下がフッターに潜り込んでいた）。 */
.ph { display: block; position: relative; overflow: hidden; background: rgba(50, 45, 45, .07); }
.ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
a:hover .ph img, .card:hover .ph img { transform: scale(1.045); }
/* 写真のトーンを揃える（暖色・低彩度・黒を持ち上げたフィルム調） */
.tone img { filter: saturate(.88) contrast(.96) sepia(.12) brightness(1.02); }
.mono img { filter: grayscale(1) contrast(1.05) brightness(1.02); }

/* 粒子と紙の質感 */
.grain::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .32;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

/* ロゴ。画像を型抜きに使い、色は --color-brand で決める（色替えが1か所で済む） */
.logo {
  display: block; background-color: currentColor;
  -webkit-mask: url("logo-age3.png") center / contain no-repeat;
  mask: url("logo-age3.png") center / contain no-repeat;
  aspect-ratio: 1600 / 607;
}

/* ロゴの「3」をそのまま切り出したもの。欧文書体で 3 と打つと形が合わないため、
   画面に大きく出る「3」はすべてこれを型抜きして使う。色は color で決まる。
   高さだけ指定すれば、横幅は縦横比から決まる。 */
.mono3 {
  display: block; background-color: currentColor;
  -webkit-mask: url("logo-3.png") center / contain no-repeat;
  mask: url("logo-3.png") center / contain no-repeat;
  aspect-ratio: 210 / 343; font-size: 0; line-height: 0;
}

/* 巨大な装飾文字（モノグラム） */
.mono-big {
  position: absolute; font-family: var(--serif-en); font-weight: 400; line-height: .8;
  color: var(--color-brand); pointer-events: none; user-select: none;
}

/* ---------------------------------------------------------------- 5. ヘッダー */
.hd { position: fixed; inset: 0 0 auto 0; z-index: 120; }
.hd-notice {
  height: var(--hd-notice); background: var(--color-charcoal); color: var(--color-cream);
  display: flex; align-items: center; gap: 10px; padding: 0 var(--pad);
  font-size: 10.5px; letter-spacing: .1em;
}
.hd-notice p { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hd-notice .arw { width: 16px; height: 16px; font-size: 10px; background: transparent; color: var(--color-cream); }

.hd-main {
  height: var(--hd-main); display: flex; align-items: center; gap: 16px; padding: 0 var(--pad);
  background: transparent; color: var(--color-white);
  transition: background var(--t-sec) var(--ease), color var(--t-sec) var(--ease), box-shadow var(--t-sec) var(--ease);
}
.hd.is-light .hd-main { background: var(--color-cream); color: var(--ink); box-shadow: 0 1px 0 var(--line-dark); }
.hd-nav { display: none; }
.hd-logo {
  position: absolute; left: 50%; top: calc(var(--hd-notice) + var(--hd-main) / 2);
  transform: translate(-50%, -50%);
  width: 104px; color: var(--color-white);
  transition: width var(--t-sec) var(--ease), color var(--t-sec) var(--ease);
}
.hd.is-light .hd-logo { width: 88px; color: var(--color-charcoal); }
.hd-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.hd-order {
  display: inline-flex; align-items: center; height: 34px; padding: 0 14px;
  border: 1px solid currentColor; border-radius: var(--r-btn);
  font-size: 11px; letter-spacing: .12em; white-space: nowrap;
  transition: background var(--t-hover) var(--ease), color var(--t-hover) var(--ease), border-color var(--t-hover) var(--ease);
}
/* 枠線は文字より薄くする。ロゴより目立つと主役が入れ替わって見えるため。
   color-mix に対応しない古いブラウザでは、上の実線がそのまま残る。 */
.hd-order { border-color: color-mix(in srgb, currentColor 42%, transparent); }
/* ホバーの塗りは、カーソルのある機械だけに出す。触って操作する画面では
   ホバーが張り付き、押していないのに金色のまま残ってしまうため。 */
@media (hover: hover) {
  .hd-order:hover { background: var(--brand-fill); border-color: var(--brand-fill); color: var(--color-white); }
}
.hd-plus {
  width: 34px; height: 34px; border-radius: var(--r-btn); background: var(--brand-fill); color: #fff;
  display: grid; place-items: center; position: relative;
}
.hd-plus i { position: absolute; width: 13px; height: 1.5px; background: currentColor; transition: transform .4s var(--ease); }
.hd-plus i:nth-child(2) { transform: rotate(90deg); }
.hd-plus[aria-expanded="true"] i:nth-child(1) { transform: rotate(45deg); }
.hd-plus[aria-expanded="true"] i:nth-child(2) { transform: rotate(-45deg); }

/* 言語の切り替え。いま見ているほうを塗りつぶすので、押す前にどちらか分かる。 */
.lang-sw {
  display: inline-flex; align-items: center; flex: none;
  border: 1px solid currentColor; border-color: color-mix(in srgb, currentColor 42%, transparent);
  border-radius: 999px; overflow: hidden; font-size: 11px; letter-spacing: .06em; white-space: nowrap;
}
.lang-sw a {
  display: inline-flex; align-items: center; min-height: 30px; padding: 0 11px;
  transition: background var(--t-hover) var(--ease), color var(--t-hover) var(--ease);
}
.lang-sw a[aria-current="true"] { background: var(--brand-fill); color: var(--color-white); }
@media (hover: hover) {
  .lang-sw a:not([aria-current="true"]):hover { background: color-mix(in srgb, currentColor 12%, transparent); }
}
/* 狭い画面は中央がロゴで埋まっているので、切り替えは左端に置く。
   広い画面では右上のボタン群に並べる。出すのはどちらか一方だけ。 */
.lang-sw-r, .lang-sw-m { display: none; }
.lang-sw-l { margin-right: auto; }

/* メニューの中の言語。何の切り替えかが分かるよう見出しを付ける */
.menu-lang {
  display: flex; align-items: center; gap: 14px;
  padding: 20px var(--pad) 0;
}
.menu-lang .lang-sw-m { display: inline-flex; font-size: 12px; }
.menu-lang .lang-sw-m a { min-height: 38px; padding: 0 16px; }

/* ヒーロー上の下段（ステートメント / scroll） */
.hd-sub {
  display: none; align-items: center; gap: 16px; padding: 0 var(--pad) 10px;
  color: var(--color-white); font-size: 10.5px; letter-spacing: .16em;
  transition: opacity .6s var(--ease);
}
.hd.has-sub .hd-sub { display: flex; }
.hd.is-light .hd-sub { opacity: 0; pointer-events: none; }
.hd-sub .mid { flex: 1; text-align: center; letter-spacing: .2em; }
.hd-sub .lang a[aria-current="true"] { color: var(--color-brand); }

/* メニュー（全画面） */
.menu {
  position: fixed; inset: 0; z-index: 115; background: var(--color-cream); color: var(--ink);
  padding: calc(var(--hd-notice) + var(--hd-main) + 14px) var(--pad) calc(40px + env(safe-area-inset-bottom));
  overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .5s var(--ease), transform .5s var(--ease), visibility .5s;
}
.menu.is-open { opacity: 1; visibility: visible; transform: none; }
.menu-list > li { border-bottom: 1px solid var(--line-dark); }
.menu-row { display: flex; align-items: center; gap: 14px; width: 100%; padding: 18px 2px; text-align: left; }
.menu-row .en { font-family: var(--serif-en); font-size: 26px; line-height: 1; text-transform: lowercase; }
.menu-row .ja { font-size: 11px; letter-spacing: .12em; color: var(--ink-mute); }
.menu-row .mk { margin-left: auto; color: var(--color-brand); font-size: 15px; transition: transform .35s var(--ease); }
.menu-row[aria-expanded="true"] .mk { transform: rotate(45deg); }
.menu-sub { overflow: hidden; height: 0; transition: height .45s var(--ease); }
.menu-sub a { display: flex; align-items: center; gap: 10px; padding: 12px 2px 12px 16px; font-size: 14px; }
.menu-sub a::before { content: ""; width: 14px; height: 1px; background: var(--line-dark); }
.menu-foot { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px 22px; font-size: 11.5px; color: var(--ink-mute); letter-spacing: .1em; }

/* ---------------------------------------------------------------- 6. ローダー・ページ遷移 */
.loader {
  position: fixed; inset: 0; z-index: 210; background: var(--color-cream);
  display: grid; place-items: center; transition: opacity .5s var(--ease), visibility .5s;
}
.loader[hidden] { display: none; }
.loader.is-done { opacity: 0; visibility: hidden; }
.loader-mark { position: relative; width: min(58vw, 320px); color: var(--color-charcoal); }
.loader-mark .base, .loader-mark .fill { width: 100%; }
.loader-mark .base { opacity: .16; }
.loader-mark .fill { position: absolute; inset: 0; width: 100%; height: 100%; clip-path: inset(100% 0 0 0); transition: clip-path .18s linear; }
.loader-num { position: absolute; left: 0; right: 0; bottom: 8%; text-align: center; font-family: var(--serif-en); font-size: 13px; letter-spacing: .2em; color: var(--ink-mute); }
.curtain { position: fixed; inset: 0; z-index: 200; pointer-events: none; }
.curtain i { position: absolute; top: 0; bottom: 0; width: 50.2%; background: var(--color-cream); transition: transform 1s var(--ease); }
.curtain i:first-child { left: 0; } .curtain i:last-child { right: 0; }
.curtain.is-open i:first-child { transform: translateX(-101%); }
.curtain.is-open i:last-child { transform: translateX(101%); }
.curtain[hidden] { display: none; }

.page-mask {
  position: fixed; inset: 0; z-index: 190; background: var(--color-cream);
  display: grid; place-items: center; pointer-events: none;
  clip-path: inset(0 0 100% 0); transition: clip-path .55s var(--ease);
}
.page-mask .m { height: 62px; color: var(--color-charcoal); opacity: 0; transition: opacity .35s var(--ease); }
.page-mask.is-in { clip-path: inset(0 0 0 0); pointer-events: auto; }
.page-mask.is-in .m { opacity: 1; }
.page-mask.is-out { clip-path: inset(100% 0 0 0); transition-delay: .1s; }

/* ---------------------------------------------------------------- 7. トップ */
/* ヒーロー：300vh を確保し、中の映像を 100dvh で貼り付ける */
.hero { position: relative; height: 300svh; background: var(--color-black); }
.hero-sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.hero-media {
  position: absolute; inset: 0; overflow: hidden;
  transition: inset 1.1s var(--ease), border-radius 1.1s var(--ease);
}
.hero-media video, .hero-media img { width: 100%; height: 100%; object-fit: cover; background: none; }
/* 動画が再生できない環境でも黒くならないよう、1コマ目の写真を下に敷いておく。
   動画には z-index を付けない。付けると理念の文字より前に出て、文字が隠れる。
   写真より前に出せばよいので、DOM の順番（写真→動画）と position だけで足りる。 */
.hero-poster { position: absolute; inset: 0; }
.hero-poster img { width: 100%; height: 100%; object-fit: cover; }
.hero-media video { position: relative; }
.hero-media::after { content: ""; position: absolute; inset: 0; background: rgba(12, 10, 11, .42); }
.hero.is-inset .hero-media { inset: 8svh 7.5% 12svh; border-radius: var(--r); }
.hero-mono {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  height: clamp(84px, 26vw, 182px); color: var(--color-white);
  transition: opacity .8s var(--ease), transform 1.1s var(--ease); pointer-events: none;
}
.hero-vctl {
  position: absolute; right: calc(var(--pad) + 2px); bottom: calc(var(--pad) + 2px); z-index: 3;
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .55);
  color: #fff; display: grid; place-items: center; font-size: 11px; letter-spacing: .04em;
}
.hero-scroll {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
  color: rgba(255, 255, 255, .8); font-size: 10px; letter-spacing: .24em;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.hero-scroll::after { content: ""; width: 1px; height: 40px; background: linear-gradient(rgba(255,255,255,.7), transparent); }
.hero-creed { position: absolute; inset: 0; display: grid; place-items: center; padding: 0 var(--pad); pointer-events: none; }
.hero-creed .blk {
  position: absolute; text-align: center; color: #fff; font-family: var(--serif-jp);
  font-size: clamp(16px, 4.6vw, 24px); line-height: 1.95; letter-spacing: .16em;
  opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.hero-creed .blk.on { opacity: 1; transform: none; }
.hero-creed .blk span { display: block; }

/* 沿革・ビジョン導入 */
.vision { position: relative; overflow: hidden; padding: 84px 0 96px; background: var(--color-cream); }
.vision-collage { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.vision-collage::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(58% 46% at 44% 46%, rgba(249,241,231,.92) 0%, rgba(249,241,231,.62) 58%, rgba(249,241,231,.18) 100%);
}
.vision-collage picture { position: absolute; display: block; }
.vision-collage img { width: 100%; height: auto; display: block; }
.cl-city img { filter: grayscale(1) contrast(1.04); }
.cl-globe img, .cl-ship img, .cl-figure img { filter: saturate(.8) contrast(.96) sepia(.14); }
.cl-city { left: -5%; top: 2%; width: 24%; opacity: .30; }
.cl-globe { right: -7%; top: 8%; width: 33%; opacity: .42; }
.cl-ship { left: 4%; bottom: 6%; width: 30%; opacity: .34; }
.cl-figure { right: 9%; bottom: 0%; width: 18%; opacity: .30; }
.vision-in { position: relative; z-index: 2; }
.vision-years { display: flex; align-items: center; gap: 10px; margin-top: 30px; }
.vision-years .y { font-family: var(--serif-en); font-size: clamp(44px, 15vw, 92px); line-height: 1; color: var(--color-brand); }
.vision-years .ln { flex: 1; height: 1px; background: var(--color-brand); }
.vision-window { position: relative; z-index: 2; margin: 26px auto 0; width: min(320px, 74%); aspect-ratio: 3 / 4; border-radius: var(--r); overflow: hidden; }
.vision-window picture, .vision-window img { display: block; width: 100%; height: 100%; }
.vision-window img { object-fit: cover; object-position: center top; }
.vision-cta { position: relative; z-index: 2; margin-top: 22px; display: flex; justify-content: center; }

/* ブランド */
.brand-head { display: grid; gap: 22px; padding-top: 78px; }
.brand-head .rule { margin: 26px 0; }
.brand-card { position: relative; border-top: 1px solid var(--line-dark); padding-top: 0; }
.brand-card:first-of-type { border-top: 0; }
.brand-photo { position: relative; aspect-ratio: 16 / 10; }
.brand-inner {
  position: relative; margin: -46px var(--pad) 0; z-index: 3;
  background: var(--color-cream); border-radius: var(--r); padding: 26px 22px 26px;
}
.brand-logo { height: 34px; display: flex; align-items: center; }
/* 画像のロゴは正方形のものがあり、34px だと小さすぎるので背を高くする */
.brand-logo:has(img) { height: 64px; }
.brand-logo img { height: 100%; width: auto; }
.brand-logo .txt { font-family: var(--serif-en); font-size: 26px; line-height: 1; letter-spacing: .04em; }
.brand-logo .logo.mark { height: 100%; width: auto; aspect-ratio: 1600 / 607; }
.brand-name { margin-top: 16px; font-size: 15px; font-weight: 500; letter-spacing: .08em; }
.brand-name em { font-style: normal; font-size: 12px; color: var(--ink-mute); margin-left: 8px; }
.brand-desc { margin-top: 12px; font-size: 14px; line-height: 1.95; text-align: justify; }
.brand-foot { margin-top: 20px; display: flex; align-items: center; gap: 12px; }
.brand-count { font-size: 11px; letter-spacing: .16em; color: var(--ink-mute); }
.brand-foot .arw { margin-left: auto; }
.brand-ghost {
  position: absolute; right: -6%; top: 4%;
  height: clamp(92px, 23vw, 168px); color: var(--color-brand); opacity: .12; pointer-events: none;
}

/* 採用 */
.recruit-sec { position: relative; overflow: hidden; padding: 84px 0 76px; }
.recruit-bg { position: absolute; inset: 0; }
.recruit-bg img { width: 100%; height: 100%; object-fit: cover; }
.recruit-bg::after { content: ""; position: absolute; inset: 0; background: rgba(12, 10, 11, .72); }
.recruit-in { position: relative; z-index: 2; }
.recruit-mono {
  position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%);
  height: clamp(145px, 40vw, 290px);
  color: var(--color-brand); opacity: .5; pointer-events: none; z-index: 1;
}
.recruit-lead { margin-top: 24px; font-family: var(--serif-jp); font-size: clamp(18px, 5vw, 26px); line-height: 2.1; letter-spacing: .1em; }
.recruit-body { margin-top: 20px; font-size: 14px; color: var(--on-dark-mute); line-height: 2; max-width: 40em; text-align: justify; }

/* スライダー（人物） */
.slider { margin-top: 40px; }
.slider-track { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0 var(--pad); }
.slider-track::-webkit-scrollbar { display: none; }
.slide { flex: 0 0 84%; scroll-snap-align: start; }
.slide .ph { aspect-ratio: 1308 / 1277; border-radius: var(--r-btn); }
.slide h3 { margin-top: 16px; font-family: var(--serif-jp); font-size: 16px; line-height: 1.8; letter-spacing: .06em; }
.slide .who { margin-top: 12px; font-size: 14px; letter-spacing: .06em; }
.slide .meta { margin-top: 4px; font-size: 11px; color: var(--on-dark-mute); letter-spacing: .06em; }
.slider-ctl { margin-top: 22px; padding: 0 var(--pad); display: flex; align-items: center; gap: 12px; }
.slider-bar { flex: 1; height: 1px; background: var(--line-light); position: relative; }
.slider-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--color-cream); transition: width .4s var(--ease), transform .4s var(--ease); }
.is-light-sec .slider-bar { background: var(--line-dark); }
.is-light-sec .slider-bar i { background: var(--color-charcoal); }
.empty {
  margin: 28px var(--pad) 0; padding: 24px; border: 1px dashed var(--line-light); border-radius: var(--r-btn);
  font-size: 14px; line-height: 1.9;
}
.is-light-sec .empty, .panel-cream .empty { border-color: var(--line-dark); color: var(--ink-mute); }

/* 商品ウォール（トップ）
   2列を反対向きに流す。同じ並びを2回書いてあるので -50% で継ぎ目なく回る。
   指で横に送れるようにしてあり、触っているあいだは流れを止める。 */
.pw { position: relative; padding: 62px 0 66px; overflow: hidden; --pw-h: 190px; }
.pw-row {
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.pw-row::-webkit-scrollbar { display: none; }
.pw-row + .pw-row { margin-top: 10px; }
.pw-track { display: flex; width: max-content; animation: pw-slide 68s linear infinite; }
.pw-row[data-dir='back'] .pw-track { animation-duration: 84s; animation-direction: reverse; }
.pw-row:hover .pw-track, .pw-row:focus-within .pw-track { animation-play-state: paused; }
/* 画像の高さは % ではなく実寸で指定する。grid の中で % にすると、
   写真が読み込まれた時点で元の大きさに戻り、枠をはみ出して切れる。 */
.pw-item { flex: 0 0 auto; height: var(--pw-h); display: flex; align-items: center; padding: 0 5px; }
.pw-item picture, .pw-item img { display: block; width: auto; height: var(--pw-h); }
@keyframes pw-slide { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
.pw-note { margin: 30px var(--pad) 0; font-size: 12px; line-height: 2; color: var(--ink-mute); }
@media (min-width: 821px) {
  .pw { padding: 96px 0 100px; --pw-h: 270px; }
  .pw-item { padding: 0 9px; }
  .pw-row + .pw-row { margin-top: 16px; }
}
@media (prefers-reduced-motion: reduce) { .pw-track { animation: none; } }

/* 商品一覧（ブランド詳細） */
/* minmax(0,1fr) にしないと、商品名の長さで列が広がって画面からはみ出す */
.pg { margin-top: 26px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; }
.pg-item { margin: 0; }
/* 画像は絶対配置にする。こちらも % 指定だと読み込み後に枠をはみ出す。 */
.pg-ph {
  display: block; position: relative; aspect-ratio: 5 / 6;
  background: #F1E5D4; border-radius: var(--r-btn); overflow: hidden;
}
.pg-ph picture, .pg-ph img { position: absolute; inset: 9px; display: block; width: auto; height: auto; }
.pg-ph img { width: calc(100% - 18px); height: calc(100% - 18px); object-fit: contain; }

/* 商品名（店頭メニューの番号・和名・英名・追加料金） */
.pg-cap { margin-top: 10px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 7px; }
.pg-cap .no {
  flex: none; display: inline-grid; place-items: center; width: 19px; height: 19px;
  border: 1px solid var(--line-dark); border-radius: 50%;
  font-family: var(--serif-en); font-size: 11px; line-height: 1; color: var(--ink-mute);
}
.pg-cap b { font-size: 13px; font-weight: 500; line-height: 1.6; }
.pg-cap .en { width: 100%; font-size: 10.5px; letter-spacing: .06em; color: var(--ink-mute); }
.plus {
  flex: none; padding: 2px 7px; border-radius: 999px;
  background: var(--brand-fill); color: var(--color-white);
  font-size: 10.5px; line-height: 1.5; letter-spacing: .04em; white-space: nowrap;
}
.menu-price { margin-top: 22px; font-size: 14px; line-height: 2; }
.menu-price b { font-weight: 500; }
.menu-foot-note { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line-dark); }
.menu-foot-note p { font-size: 12px; line-height: 2; color: var(--ink-mute); }
.menu-foot-note p + p { margin-top: 8px; }
.menu-foot-note b { color: var(--ink); font-weight: 500; }
@media (min-width: 561px) { .pg { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 12px; } }
@media (min-width: 821px) { .pg { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 22px 14px; } }

/* ニュース */
.news-sec { padding-top: 76px; padding-bottom: 70px; }
.news-list { margin-top: 30px; border-top: 1px solid var(--line-dark); }
.news-item { display: flex; align-items: center; gap: 14px; padding: 20px 0; border-bottom: 1px solid var(--line-dark); }
.news-item .txt { flex: 1; min-width: 0; }
.news-item .date { font-family: var(--serif-en); font-size: 12px; letter-spacing: .1em; color: var(--ink-mute); }
.news-item h3 { margin-top: 6px; font-size: 14px; font-weight: 500; line-height: 1.8; }
.news-item .tags { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: 10.5px; color: var(--ink-mute); letter-spacing: .06em; }

/* LINE バナー */
.line-sec { position: relative; overflow: hidden; min-height: 62svh; display: grid; align-items: center; }
.line-sec .bg { position: absolute; inset: 0; }
.line-sec .bg img { width: 100%; height: 100%; object-fit: cover; }
.line-sec .bg picture, .line-sec .bg img { width: 100%; height: 100%; object-fit: cover; }
.line-sec .bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(12,10,11,.58) 0%, rgba(12,10,11,.74) 100%);
}
@media (min-width: 821px) {
  .line-sec .bg::after {
    background: linear-gradient(90deg, rgba(12,10,11,.78) 0%, rgba(12,10,11,.70) 38%, rgba(12,10,11,.34) 66%, rgba(12,10,11,.18) 100%);
  }
}
.line-in { position: relative; z-index: 2; color: #fff; padding: 62px var(--pad); text-align: center; }
.line-in .lead-mincho { margin-top: 14px; white-space: pre-line; }
.line-in p.b { margin-top: 16px; font-size: 14px; line-height: 1.95; color: rgba(255,255,255,.86); }
.line-in .cta { margin-top: 24px; }
/* ボタンが横に2つ並ぶ行。折り返しても間隔が詰まらないようにする。 */
.line-ctas { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 18px 30px; justify-content: center; }
.line-ctas .cta { margin-top: 0; }

/* トップの「お店をさがす」。都市名を押すと、店舗ページのその店が開く */
.city-grid { margin-top: 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.city-chip {
  display: block; padding: 13px 14px; border: 1px solid var(--line-dark); border-radius: var(--r-btn);
  transition: background var(--t-hover) var(--ease), border-color var(--t-hover) var(--ease);
}
.city-chip .c { display: block; font-family: var(--serif-en); font-size: 15px; letter-spacing: .06em; }
.city-chip .n { display: block; margin-top: 3px; font-size: 12px; color: var(--ink-mute); }
.city-chip .n b { font-weight: 400; color: var(--color-brand); }
@media (hover: hover) {
  .city-chip:hover { background: rgba(50, 45, 45, .05); border-color: var(--ink-mute); }
}
@media (min-width: 601px) { .city-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 901px) { .city-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* 店舗カードの表面に出す「経路」「電話」。開かなくても連絡できるようにする */
.shop-acts { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; }
.shop-act {
  display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 0 12px;
  border: 1px solid var(--line-dark); border-radius: 999px;
  font-size: 12px; letter-spacing: .06em; white-space: nowrap;
  transition: background var(--t-hover) var(--ease), color var(--t-hover) var(--ease), border-color var(--t-hover) var(--ease);
}
/* 印だけのボタン（Instagram）。指で押せる大きさを保つ */
.shop-act.is-icon { width: 34px; padding: 0; }
@media (hover: hover) {
  .shop-act:hover { background: var(--brand-fill); border-color: var(--brand-fill); color: var(--color-white); }
}

/* ---------------------------------------------------------------- 8. 下層共通 */
.page-hero { padding: calc(var(--hd-notice) + var(--hd-main) + 46px) var(--pad) 40px; position: relative; }
.page-hero .en { position: relative; display: block; font-family: var(--serif-en); font-size: clamp(52px, 14vw, 100px); line-height: .95; text-transform: lowercase; }
/* ブランド Age.3 のページだけ、見出しをロゴそのものにする。
   欧文書体で age.3 と打つとロゴと形が違って見えるため。 */
.page-hero-logo { width: clamp(190px, 46vw, 360px); color: var(--color-charcoal); }
.page-hero .ja { margin-top: 14px; display: flex; align-items: center; gap: 9px; font-size: 12px; letter-spacing: .16em; color: var(--ink-mute); }
.page-hero .scr { margin-top: 34px; font-size: 10px; letter-spacing: .24em; color: var(--ink-mute); display: flex; align-items: center; gap: 10px; }
.page-hero .scr::after { content: ""; width: 46px; height: 1px; background: var(--line-dark); }
.crumb { padding: 0 var(--pad); font-size: 11px; letter-spacing: .08em; color: var(--ink-mute); }
.crumb a:hover { color: var(--color-brand); }
/* 上下だけを指定する。padding の一括指定にすると .wrap の左右余白を打ち消してしまい、
   下層ページの文章が画面の端に貼り付く。 */
.sec { padding-top: 62px; padding-bottom: 62px; }
.sec-sm { padding-top: 44px; padding-bottom: 44px; }

.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.chip {
  padding: 9px 16px; min-height: 38px; border: 1px solid var(--line-dark); border-radius: 999px;
  font-size: 12px; letter-spacing: .1em; transition: background var(--t-hover) var(--ease), color var(--t-hover) var(--ease), border-color var(--t-hover) var(--ease);
}
.chip[aria-pressed="true"] { background: var(--color-charcoal); border-color: var(--color-charcoal); color: var(--color-cream); }
.chip[aria-pressed="true"]::before { content: "● "; font-size: 8px; vertical-align: 2px; }

.acc { border-top: 1px solid var(--line-dark); }
.acc-item { border-bottom: 1px solid var(--line-dark); }
.acc-btn { display: flex; align-items: center; gap: 14px; width: 100%; padding: 19px 2px; text-align: left; font-size: 14px; line-height: 1.8; }
.acc-btn .mk { margin-left: auto; flex: none; width: 30px; height: 30px; border-radius: var(--r-btn); background: var(--color-charcoal); color: var(--color-cream); display: grid; place-items: center; font-size: 12px; transition: transform .35s var(--ease), background var(--t-hover) var(--ease); }
.acc-btn[aria-expanded="true"] .mk { transform: rotate(45deg); background: var(--brand-fill); color: var(--color-white); }
.acc-body { overflow: hidden; height: 0; transition: height .45s var(--ease); }
.acc-body .in { padding: 0 2px 22px; font-size: 14px; line-height: 2; color: var(--ink-mute); text-align: justify; }

.table { width: 100%; border-collapse: collapse; margin-top: 26px; border-top: 1px solid var(--line-dark); }
.table th, .table td { text-align: left; vertical-align: top; padding: 15px 0; border-bottom: 1px solid var(--line-dark); font-size: 14px; font-weight: 400; line-height: 1.95; }
.table th { width: 6.4em; color: var(--ink-mute); font-size: 11.5px; letter-spacing: .1em; padding-right: 14px; }

.grid-2 { display: grid; gap: 26px; }
.grid-3 { display: grid; gap: 22px; }
.card { display: block; }
.card .ph { aspect-ratio: 4 / 3; border-radius: var(--r-btn); }
.ph picture { display: block; width: 100%; height: 100%; }
.ph picture img { width: 100%; height: 100%; object-fit: cover; }

/* 数字 */
.facts { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line-dark); margin-top: 30px; }
.fact { padding: 22px 0 24px; border-bottom: 1px solid var(--line-dark); }
.fact:not(:nth-child(2n)) { border-right: 1px solid var(--line-dark); padding-right: 14px; }
.fact:nth-child(2n) { padding-left: 18px; }
.fact .lb { font-size: 11px; letter-spacing: .1em; color: var(--ink-mute); line-height: 1.8; min-height: 3.4em; }
.fact .vl { font-family: var(--serif-en); font-size: clamp(42px, 12vw, 62px); line-height: 1; color: var(--color-brand); }
.fact .vl small { font-family: var(--sans); font-size: 12px; letter-spacing: .06em; color: var(--ink); margin-left: 5px; }
.fact .nt { margin-top: 6px; font-size: 10.5px; color: var(--ink-mute); }

/* タイムライン */
.tl { border-top: 1px solid var(--line-dark); margin-top: 30px; }
.tl-item { padding: 26px 0; border-bottom: 1px solid var(--line-dark); }
.tl-year { font-family: var(--serif-en); font-size: 30px; line-height: 1; color: var(--color-brand); }
.tl-fig { margin: 0; }
.tl-fig figcaption { margin-top: 8px; font-size: 11px; letter-spacing: .1em; color: var(--ink-mute); }
.tl-item h3 { margin-top: 12px; font-size: 15px; font-weight: 500; letter-spacing: .06em; }
.tl-item p { margin-top: 10px; font-size: 14px; line-height: 2; text-align: justify; }
.tl-item .ph { margin-top: 16px; aspect-ratio: 16 / 10; border-radius: var(--r-btn); }

/* 店舗 */
.shop-item { border-bottom: 1px solid var(--line-dark); padding: 24px 0; }
.shop-top { display: flex; gap: 14px; align-items: flex-start; }
.shop-top .ph { flex: none; width: 108px; aspect-ratio: 1 / 1; border-radius: var(--r-btn); }
.shop-city { font-size: 10.5px; letter-spacing: .18em; color: var(--color-brand); }
.shop-name { margin-top: 6px; font-size: 15px; font-weight: 500; letter-spacing: .06em; }
.shop-new { display: inline-block; margin-left: 8px; padding: 2px 7px; border-radius: 2px; background: var(--brand-fill); color: #fff; font-size: 9.5px; letter-spacing: .1em; vertical-align: 2px; }
/* まだ開店していない店。営業中の店と見分けがつくよう、塗らずに枠線で出す。 */
.shop-soon {
  display: inline-block; margin-left: 8px; padding: 2px 7px; border-radius: 2px;
  border: 1px solid var(--color-brand); color: var(--color-brand);
  font-size: 9.5px; letter-spacing: .06em; vertical-align: 2px; white-space: nowrap;
}
.shop-item:has(.shop-soon) .shop-top .ph { opacity: .55; }
.shop-addr { margin-top: 8px; font-size: 14px; line-height: 1.9; color: var(--ink-mute); }
.shop-more { margin-top: 14px; }
.shop-detail { overflow: hidden; height: 0; transition: height .45s var(--ease); }
.shop-detail dl { padding-top: 14px; }
.shop-detail div { display: grid; grid-template-columns: 5.4em 1fr; gap: 10px; padding: 7px 0; font-size: 14px; }
.shop-detail dt { color: var(--ink-mute); font-size: 11.5px; letter-spacing: .08em; }

/* フォーム */
.form { margin-top: 30px; }
.field { margin-bottom: 22px; }
.field > label { display: flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: .1em; color: var(--ink-mute); }
.req { padding: 2px 6px; border-radius: 2px; background: var(--brand-fill); color: #fff; font-size: 9.5px; letter-spacing: .08em; }
.opt { padding: 2px 6px; border-radius: 2px; border: 1px solid var(--line-dark); font-size: 9.5px; letter-spacing: .08em; }
.field input, .field textarea, .field select {
  width: 100%; margin-top: 8px; padding: 13px 14px; min-height: 46px;
  background: var(--color-white); border: 1px solid var(--line-dark); border-radius: var(--r-btn);
  font-size: 14px; line-height: 1.7;
}
.field textarea { min-height: 150px; resize: vertical; }
.field .err { display: none; margin-top: 7px; font-size: 14px; color: var(--color-brand); }
.field.is-err input, .field.is-err textarea, .field.is-err select { border-color: var(--color-brand); }
.field.is-err .err { display: block; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 50px; padding: 14px 30px; border-radius: var(--r-btn);
  background: var(--color-charcoal); color: var(--color-cream);
  font-size: 14px; letter-spacing: .1em; transition: background var(--t-hover) var(--ease);
}
.btn:hover { background: var(--brand-fill); color: var(--color-white); }
.btn.ghost { background: transparent; border: 1px solid var(--line-dark); color: var(--ink); }
.btn.ghost:hover { background: var(--color-charcoal); color: var(--color-cream); }
.steps { display: flex; gap: 10px; margin-top: 24px; font-size: 11px; letter-spacing: .1em; color: var(--ink-mute); }
.steps b { font-weight: 400; }
.steps .now { color: var(--color-brand); }

/* ---------------------------------------------------------------- 10. フッター */
.ft { background: var(--color-charcoal); color: var(--color-cream); border-radius: var(--r) var(--r) 0 0; position: relative; z-index: 3; margin-top: calc(var(--r) * -1); }
.ft-top { padding: 54px var(--pad) 40px; position: relative; overflow: hidden; }
.ft-brand { width: clamp(190px, 46vw, 300px); color: var(--color-cream); }
.ft-rotate { margin-top: 16px; height: 22px; overflow: hidden; }
.ft-rotate span { display: block; font-size: 13px; letter-spacing: .12em; color: var(--on-dark-mute); transition: transform .6s var(--ease); }
/* PCでは左右2列に分かれる。列の境目で縦に切られると形が壊れるので、列の中に収める。 */
.ft-mono { position: absolute; right: 6%; bottom: 8%; height: clamp(110px, 26vw, 172px); color: var(--color-brand); opacity: .85; pointer-events: none; }
.ft-state { position: relative; z-index: 2; margin-top: 26px; font-family: var(--serif-jp); font-size: 15px; letter-spacing: .1em; line-height: 2; }
.ft-nav { border-top: 1px solid var(--line-light); }
.ft-nav .acc-item { border-bottom: 1px solid var(--line-light); }
.ft-nav .acc-btn { padding: 17px var(--pad); }
.ft-nav .acc-btn .en { font-family: var(--serif-en); font-size: 19px; line-height: 1; text-transform: lowercase; }
.ft-nav .acc-btn .ja { font-size: 10.5px; letter-spacing: .1em; color: var(--on-dark-mute); }
.ft-nav .acc-btn .mk { background: transparent; color: var(--on-dark-mute); }
.ft-nav .acc-btn[aria-expanded="true"] .mk { background: transparent; color: var(--color-brand); }
.ft-nav .acc-body .in { padding: 0 var(--pad) 16px; }
.ft-nav .acc-body a { display: flex; gap: 10px; padding: 9px 0; font-size: 14px; color: var(--on-dark-mute); }
.ft-btm { padding: 22px var(--pad) calc(26px + env(safe-area-inset-bottom)); display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; font-size: 11px; color: var(--on-dark-mute); letter-spacing: .06em; }
.ft-lang { display: flex; gap: 8px; }
.ft-lang a[aria-current="true"] { color: var(--color-brand); }
.ft-top-link { margin-left: auto; display: flex; align-items: center; gap: 9px; font-family: var(--serif-en); font-size: 12px; letter-spacing: .12em; color: var(--color-cream); }
.ft-cp { width: 100%; font-family: var(--serif-en); font-size: 10.5px; }

/* どのページからでも店舗一覧へ行ける浮きボタン。
   Cookieの帯（z-index 130）より下、メニュー（開くと画面を覆う）より下に置く。
   iPhone の下端を避けるため safe-area 分を足す。 */
.shop-fab {
  position: fixed; z-index: 120;
  /* 左下に置く。右下はトップのヒーローの再生ボタンと、フッターの page top が使っている。 */
  left: 14px; bottom: calc(14px + env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 58px; padding: 0 22px 0 19px; border-radius: 999px;
  background: var(--brand-fill); color: var(--color-white);
  font-size: 14px; letter-spacing: .12em; white-space: nowrap;
  box-shadow: 0 8px 24px rgba(50, 45, 45, .32);
  transition: transform var(--t-hover) var(--ease), background var(--t-hover) var(--ease);
}
.shop-fab svg { flex: none; }
/* メニューを開いている間は隠す（メニュー内にも店舗の行があるため二重になる） */
.js-lock .shop-fab { opacity: 0; visibility: hidden; }
@media (hover: hover) {
  .shop-fab:hover { background: var(--color-charcoal); transform: translateY(-2px); }
}
/* Cookieの帯（画面下いっぱい）が出ている間は重なるので隠す。
   帯は一度選べば二度と出ない。切り替えは JS から行う。 */
.shop-fab.is-hidden { opacity: 0; visibility: hidden; }

/* ---------------------------------------------------------------- 11. Cookie */
.cookie {
  position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 130;
  background: var(--color-charcoal); color: var(--color-cream); border-radius: var(--r-btn);
  padding: 18px; font-size: 14px; line-height: 1.85;
  transform: translateY(140%); transition: transform .6s var(--ease);
}
.cookie.is-open { transform: none; }
.cookie a { border-bottom: 1px solid var(--line-light); }
.cookie-btns { margin-top: 14px; display: flex; gap: 10px; }
.cookie-btns button { flex: 1; min-height: 44px; border-radius: var(--r-btn); font-size: 12px; letter-spacing: .08em; }
.cookie-btns .ac { background: var(--color-cream); color: var(--color-charcoal); }
.cookie-btns .dc { border: 1px solid var(--line-light); }

/* スマホでは中央ロゴと右のボタンがぶつかるので、contact はメニューの中だけにする */
@media (max-width: 820px) {
  .cl-city { left: -8%; top: 1%; width: 34%; opacity: .22; }
  .cl-globe { right: -12%; top: 6%; width: 44%; opacity: .3; }
  .cl-ship { left: -6%; bottom: 4%; width: 44%; opacity: .24; }
  .cl-figure { right: -4%; bottom: 0%; width: 26%; opacity: .22; }
  .hd-logo { width: 84px; }
  .hd.is-light .hd-logo { width: 78px; }
  .hd-contact { display: none; }
  .hd-order { height: 30px; padding: 0 10px; font-size: 10px; letter-spacing: .08em; }
  .hd-plus { width: 32px; height: 32px; }
  .hd-sub { font-size: 9.5px; letter-spacing: .12em; gap: 10px; }
}

/* ---------------------------------------------------------------- 12. PC */
@media (min-width: 821px) {
  body { font-size: 15px; }
  .sec-head h2, .sec-head .h { font-size: clamp(66px, 6.4vw, 100px); }
  .sec { padding-top: 100px; padding-bottom: 100px; }
  .sec-sm { padding-top: 70px; padding-bottom: 70px; }

  .hd-nav { display: flex; align-items: center; gap: 22px; font-size: 12px; letter-spacing: .08em; }
  .hd-nav > li { position: relative; }
  .hd-nav a, .hd-nav button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 0; }
  .hd-nav a:hover, .hd-nav button:hover { color: var(--color-brand); }
  .hd-nav .sub { position: absolute; left: 0; top: 100%; min-width: 210px; padding: 12px 0; background: var(--color-cream); color: var(--ink); border: 1px solid var(--line-dark); border-radius: var(--r-btn); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s; }
  .hd-nav li:hover .sub, .hd-nav li:focus-within .sub { opacity: 1; visibility: visible; transform: none; }
  .hd-nav .sub a { display: block; padding: 8px 16px; font-size: 14px; }
  .hd-logo { width: 132px; }
  .hd.is-light .hd-logo { width: 112px; }
  .hd-sub { padding-bottom: 12px; }
  .lang-sw-l { display: none; }
  .lang-sw-r { display: inline-flex; }
  .menu { display: none; }

  .hero.is-inset .hero-media { inset: 10svh 7.5% 14svh; }
  .hero-creed .blk { font-size: clamp(22px, 2.2vw, 30px); line-height: 2.1; }

  .vision { padding: 130px 0 150px; }
  .vision-years { margin-top: 46px; }
  .vision-window { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); width: 300px; margin: 0; }
  .vision-body { display: grid; grid-template-columns: 1fr 300px 1fr; align-items: center; gap: 40px; margin-top: 40px; min-height: 420px; }
  .vision-cta { justify-content: center; }

  .brand-head { grid-template-columns: 1fr 1fr; gap: 40px 60px; padding-top: 110px; }
  .brand-head .col-a { grid-column: 1; }
  .brand-head .col-b { grid-column: 2; align-self: end; }
  .brand-card { min-height: 620px; display: grid; align-items: center; }
  .brand-photo { position: absolute; inset: 0; aspect-ratio: auto; }
  .brand-inner { position: relative; margin: 0 0 0 auto; width: min(430px, 40%); margin-right: 8%; padding: 34px 32px 34px; }
  .brand-ghost { right: 2%; top: 50%; transform: translateY(-50%); height: clamp(138px, 14vw, 230px); opacity: .16; }

  .recruit-sec { padding: 130px 0 120px; }
  .slide { flex: 0 0 calc((100% - 42px) / 3.15); }
  .grid-2 { grid-template-columns: 1fr 1fr; gap: 44px; }
  .grid-3 { grid-template-columns: repeat(3, 1fr); gap: 32px; }
  .facts { grid-template-columns: repeat(4, 1fr); }
  .fact { padding: 28px 24px 30px; }
  .fact:not(:nth-child(2n)) { border-right: 0; padding-right: 24px; }
  .fact:nth-child(2n) { padding-left: 24px; }
  .fact:not(:nth-child(4n)) { border-right: 1px solid var(--line-dark); }
  .fact:first-child { padding-left: 0; }

  .news-sec { display: grid; grid-template-columns: 320px 1fr; gap: 60px; padding-top: 120px; padding-bottom: 120px; }
  .news-list { margin-top: 0; }
  .news-item h3 { font-size: 15px; }

  .line-in { text-align: left; padding: 110px var(--pad); max-width: 640px; }
  .line-ctas { justify-content: flex-start; }
  .line-sec { min-height: 70svh; }

  .page-hero { padding: calc(var(--hd-notice) + var(--hd-main) + 90px) var(--pad) 70px; }
  .page-hero .scr { position: absolute; right: var(--pad); bottom: 70px; }
  .tl-item { display: grid; grid-template-columns: 130px 1fr 320px; gap: 34px; align-items: start; padding: 34px 0; }
  .tl-item .ph { margin-top: 0; }
  .tl-item h3 { margin-top: 0; }
  .shop-top .ph { width: 200px; }
  .shop-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 44px; }
  .table th { width: 8.4em; }

  .ft { display: grid; grid-template-columns: 60fr 40fr; }
  .ft-top { padding: 76px var(--pad) 60px; }
  .ft-right { border-left: 1px solid var(--line-light); }
  .ft-nav { border-top: 0; }
  .ft-nav .acc-btn { padding: 17px var(--pad) 17px 34px; }
  .ft-btm { grid-column: 1 / -1; border-top: 1px solid var(--line-light); }
  .cookie { left: 20px; right: auto; width: 380px; bottom: 20px; }
}

/* 幅の広いPC向けの微調整 */
/* 中くらいの幅では、中央に置いたロゴが左のメニューに重なる。
   この幅だけロゴを左端に寄せ、重なりを避ける。 */
@media (min-width: 821px) and (max-width: 1099px) {
  .hd-logo { position: static; transform: none; order: -1; width: 104px; margin-right: 12px; }
  .hd.is-light .hd-logo { width: 96px; }
  .hd-nav { gap: 16px; }
  .hd-contact { display: none; }
}

@media (min-width: 1280px) {
  :root { --pad: 34px; }
  .brand-inner { width: 430px; margin-right: 10%; }
}

/* ---------------------------------------------------------------- 動きを減らす設定 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .16s !important; scroll-behavior: auto !important;
  }
  .rv, .rv-line > span, .rv-clip { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .hero { height: auto; }
  .hero-sticky { position: relative; height: auto; min-height: 78svh; }
  .hero-creed { position: relative; inset: auto; padding: 60px var(--pad); background: var(--color-black); display: block; }
  .hero-creed .blk { position: relative; opacity: 1; transform: none; margin-bottom: 40px; }
  .split .lay-wide { opacity: 0; } .split .lay-base { opacity: 1; position: relative; }
  .vision-collage { display: none; }
}

/* 幅の狭い端末（360px以下）。ロゴを中央に置いたままだと online store の
   ボタンと重なるため、左寄せに切り替える。 */
@media (max-width: 360px) {
  .hd-logo { position: static; transform: none; order: -1; width: 76px; }
  .lang-sw-l { order: -2; margin-right: 10px; font-size: 10px; }
  .lang-sw-l a { padding: 0 8px; }
  .hd.is-light .hd-logo { width: 72px; }
  .hd-order { padding: 0 9px; letter-spacing: .06em; }
}

/* 印刷 */
@media print {
  .hd, .menu, .cookie, .loader, .curtain, .page-mask, .hero-vctl { display: none !important; }
  body { background: #fff; color: #000; }
}