/* 全ページ共通。ページ専用CSSより先に読み込みます。 */
/* ===== Tokens（SBT_Webサイト_ビジュアルデザインシステム.md 版1.3） ===== */
:root {
  --color-ink-900: #171717;
  --color-logo: #231815; /* 正式ロゴデータの色 */
  --color-ink-700: #343434;
  --color-ink-500: #666666;
  --color-white: #ffffff;
  --color-surface: #f7f7f4;
  --color-surface-strong: #ecece7;
  --color-border: #d7d7d2;
  --color-focus: #005fcc;
  --color-dark-text-sub: rgba(255, 255, 255, 0.75);
  --color-dark-axis: rgba(255, 255, 255, 0.30);
  --color-dark-divider: rgba(255, 255, 255, 0.12);

  --font-heading: "Cormorant Garamond", "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif;
  --font-body: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", YuGothic, sans-serif;
  --font-label: "Jost", "Zen Kaku Gothic New", sans-serif;

  --header-height: 80px;
  --gutter: clamp(20px, 4vw, 48px);
  --axis-gap: 56px;
  --axis-dot: 13px;
  --axis-dot-end: 13px;
  --content-wide: 1200px;
  --motion: 150ms;
  --reveal-duration: 800ms;
  --wipe-duration: 400ms;
  --wipe-ease: cubic-bezier(0.65, 0, 0.35, 1);
  --line-duration: 300ms;
  --label-fade: 180ms;
  --menu-duration: 450ms;
  --redraw-duration: 700ms;
  --reveal-step: 90ms;
  --reveal-x-duration: 1400ms;
  --pulse-duration: 2000ms;
  --pulse-count: 1; /* 点滅は1回のみ */
}

/* ===== Base ===== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-white);
  color: var(--color-ink-700);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ol { margin: 0; }
ol { padding: 0; list-style: none; }
a { color: var(--color-ink-900); }
a:hover { color: var(--color-ink-700); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.dark a { color: var(--color-white); }
.dark a:focus-visible { outline-color: #6ea8ff; }
/* テキスト選択（ハイライト）：黒文字は黒地に白文字、白文字は白地に黒文字 */
::selection { background: var(--color-ink-900); color: var(--color-white); }
.dark ::selection, .dark::selection,
.site-footer ::selection, .site-footer::selection,
.btn-primary ::selection, .btn-primary::selection { background: var(--color-white); color: var(--color-ink-900); }
.btn-secondary ::selection, .btn-secondary::selection { background: var(--color-ink-900); color: var(--color-white); }

.container { max-width: calc(var(--content-wide) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
.label {
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--color-ink-500);
}
.heading { font-family: var(--font-heading); font-weight: 500; color: var(--color-ink-900); }
.sub { color: var(--color-ink-500); }
.sp-only { display: none; }

/* text link
  「テキスト＋全角スペース＋→」を1つの文字列として組み、文字列全体に下線を引く。
  マウスオーバー時に下線が右へ抜けて消え、左から引き直される */
.text-link {
  display: inline-block;
  padding: 12px 0 11px;
  font-size: 14px;
  line-height: 1.5;
  text-decoration: none;
  align-self: flex-start;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-origin: content-box;
  background-position: 0 100%;
  background-size: 100% 1px;
}
.text-link:hover,
.text-link:focus-visible {
  animation: line-redraw var(--redraw-duration) var(--wipe-ease);
}
@keyframes line-redraw {
  0%   { background-position: 100% 100%; background-size: 100% 1px; }
  45%  { background-position: 100% 100%; background-size: 0% 1px; }
  46%  { background-position: 0 100%;    background-size: 0% 1px; }
  100% { background-position: 0 100%;    background-size: 100% 1px; }
}
/* button
  マウスオーバー時、左から右へ背景色を塗り替える（枠線の色は変えない）
  主ボタン：黒地・白文字 → 白地・黒文字
  副ボタン：白地・黒文字 → 黒地・白文字 */
.btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 52px;
  padding: 0 28px;
  border: 1px solid var(--color-ink-900);
  font-size: 14px;
  text-decoration: none;
  transition: color var(--wipe-duration) var(--wipe-ease);
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--wipe-duration) var(--wipe-ease);
}
.btn:hover::before,
.btn:focus-visible::before { transform: scaleX(1); }
.btn-primary { background: var(--color-ink-900); color: var(--color-white); }
.btn-primary::before { background: var(--color-white); }
.btn-primary:hover,
.btn-primary:focus-visible { color: var(--color-ink-900); }
.btn-secondary { background: var(--color-white); color: var(--color-ink-900); }
.btn-secondary::before { background: var(--color-ink-900); }
.btn-secondary:hover,
.btn-secondary:focus-visible { color: var(--color-white); }
.btn:active { transform: translateY(1px); }

/* ===== Header ===== */
.site-header { border-bottom: 1px solid var(--color-surface-strong); background: var(--color-white); position: relative; z-index: 10; }
.site-header .container { min-height: var(--header-height); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.logo { display: flex; align-items: center; min-height: 44px; text-decoration: none; color: var(--color-ink-900); }
/* 正式ロゴ（アウトライン化したSVG）。白背景ではロゴデータの黒、暗い背景では白で表示する */
.logo { color: var(--color-logo); }
.logo:hover { color: var(--color-logo); } /* ロゴはマウスオーバーで色を変えない */
.logo-mark { display: block; height: 20px; width: auto; aspect-ratio: 283.465 / 123.881; fill: currentColor; }
.global-nav { display: flex; gap: 8px; }
.global-nav a {
  display: flex; align-items: center; min-height: 44px; padding: 0 12px;
  font-family: var(--font-label); font-size: 12px; letter-spacing: 0.14em; text-decoration: none;
  position: relative;
}
/* マウスオーバーで文字の下に左から右へ線を引く（離すと右へ抜ける） */
.global-nav a::after {
  content: "";
  position: absolute;
  left: 12px;
  right: calc(12px + 0.14em); /* 字間の分だけ右端を詰め、文字幅に合わせる */
  bottom: 10px;
  height: 1px;
  background: var(--color-ink-900);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--line-duration) var(--wipe-ease);
}
.global-nav a:hover,
.global-nav a:focus-visible { color: var(--color-ink-900); }
.global-nav a:hover::after,
.global-nav a:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left center;
}
/* 下層ページの現在地は線を常に表示する */
.global-nav a[aria-current="page"]::after { transform: scaleX(1); }
.menu-button {
  display: none;
  min-width: 44px; min-height: 44px; padding: 0 4px;
  align-items: center; gap: 10px;
  background: none; border: none; cursor: pointer;
  font-family: var(--font-label); font-size: 12px; letter-spacing: 0.12em; color: var(--color-ink-900);
}
/* 「メニュー」⇔「閉じる」はフェードで切り替える。文字数の差でボタン幅が動かないよう幅を固定 */
.menu-button .label-text {
  display: inline-block;
  min-width: 4.6em;
  text-align: right;
  transition: opacity var(--label-fade) ease;
}
.menu-button .label-text.is-fading { opacity: 0; }
.menu-button .bars { display: flex; flex-direction: column; gap: 5px; }
.menu-button .bars span {
  display: block; width: 20px; height: 1px; background: var(--color-ink-900);
  transition: transform var(--line-duration) var(--wipe-ease);
}
/* 開いている間は2本線をバツ印に変える（2本の線の中間に寄せて±45度回転） */
.menu-button[aria-expanded="true"] .bars span:first-child { transform: translateY(3px) rotate(45deg); }
.menu-button[aria-expanded="true"] .bars span:last-child { transform: translateY(-3px) rotate(-45deg); }
/* スマートフォンのメニュー：ヘッダーの下から画面下端までを覆うオーバーレイ。
  上から下へスライドダウンして開き、下から上へスライドアップして閉じる */
.sp-menu {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  top: var(--menu-top, var(--header-height));
  bottom: 0;
  z-index: 20;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* 上端の線はヘッダー下部の線を共用する（二重にしない） */
  padding: 16px 20px 40px;
  background: var(--color-white);
  visibility: hidden;
  clip-path: inset(0 0 100% 0);
  transition:
  clip-path var(--menu-duration) var(--wipe-ease),
  visibility 0s linear var(--menu-duration);
}
.sp-menu.is-open {
  visibility: visible;
  clip-path: inset(0 0 0 0);
  transition:
  clip-path var(--menu-duration) var(--wipe-ease),
  visibility 0s linear 0s;
}
/* 開くときはリンクを少し遅らせて上から順に表示する */
.sp-menu a { opacity: 0; transform: translateY(-8px); transition: opacity 200ms ease, transform 200ms ease; }
.sp-menu.is-open a { opacity: 1; transform: none; transition: opacity 300ms ease, transform 300ms ease; }
.sp-menu.is-open a:nth-child(1) { transition-delay: 120ms; }
.sp-menu.is-open a:nth-child(2) { transition-delay: 160ms; }
.sp-menu.is-open a:nth-child(3) { transition-delay: 200ms; }
.sp-menu.is-open a:nth-child(4) { transition-delay: 240ms; }
.sp-menu.is-open a:nth-child(5) { transition-delay: 280ms; }
.sp-menu.is-open a:nth-child(6) { transition-delay: 320ms; }
.sp-menu a {
  display: flex; align-items: center; min-height: 56px;
  font-family: var(--font-label); font-size: 14px; letter-spacing: 0.12em; text-decoration: none;
}
.sp-menu a.child { min-height: 48px; padding-left: 20px; font-family: var(--font-body); letter-spacing: 0; color: var(--color-ink-700); }
/* ヘッダー・フッターと同じく、文字の下に左から右へ線を引く（離すと右へ抜ける） */
.sp-menu a { position: relative; width: fit-content; }
.sp-menu a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0.12em; /* 字間の分だけ右端を詰め、文字幅に合わせる */
  bottom: 14px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--line-duration) var(--wipe-ease);
}
.sp-menu a.child::after { left: 20px; right: 0; bottom: 12px; }
.sp-menu a:hover { color: var(--color-ink-900); }
.sp-menu a.child:hover { color: var(--color-ink-700); }
.sp-menu a:hover::after,
.sp-menu a:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left center;
}

/* ===== Footer ===== */
.site-footer { background: var(--color-ink-900); color: var(--color-white); padding: 72px var(--gutter) 40px; border-top: 1px solid var(--color-dark-divider); }
.site-footer a { color: var(--color-white); text-decoration: none; }
.footer-inner { max-width: var(--content-wide); margin: 0 auto; display: flex; flex-direction: column; gap: 56px; }
.footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px; }
.footer-logo { display: flex; align-items: center; gap: 12px; min-height: 44px; align-self: flex-start; }
.footer-logo .logo-mark { height: 20px; color: var(--color-white); }
.footer-logo .name { font-size: 12px; color: var(--color-dark-text-sub); }
.footer-nav { display: flex; flex-wrap: wrap; gap: 8px 56px; font-family: var(--font-label); font-size: 12px; letter-spacing: 0.12em; }
.footer-nav div { display: flex; flex-direction: column; }
.footer-nav a { min-height: 44px; display: flex; align-items: center; }
.footer-nav a.child { padding-left: 16px; letter-spacing: 0.04em; color: var(--color-dark-text-sub); }
/* ヘッダーと同じく、マウスオーバーで文字の下に左から右へ線を引く（離すと右へ抜ける） */
.footer-nav a { position: relative; align-self: flex-start; }
.footer-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0.12em; /* 字間の分だけ右端を詰め、文字幅に合わせる */
  bottom: 11px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--line-duration) var(--wipe-ease);
}
.footer-nav a.child::after { left: 16px; right: 0.04em; }
.footer-nav a:hover,
.footer-nav a:focus-visible { color: var(--color-white); }
.footer-nav a.child:hover,
.footer-nav a.child:focus-visible { color: var(--color-dark-text-sub); }
.footer-nav a:hover::after,
.footer-nav a:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left center;
}
.copyright { padding-top: 24px; font-size: 12px; color: var(--color-dark-text-sub); }

/* ===== 共通のスマートフォン表示 ===== */
@media (max-width: 767px) {
  :root { --header-height: 64px; --axis-gap: 24px; --gutter: 20px; }
  .pc-only { display: none; }
  .sp-only { display: inline; }
  .global-nav { display: none; }
  .menu-button { display: flex; }
  .sp-menu { display: block; }
  .logo .logo-mark { height: 18px; }
  .btn { padding: 0 24px; }
  .site-footer { padding: 56px 20px 32px; }
  .footer-inner { gap: 0; }
  .footer-top { display: block; }
  .footer-logo .logo-mark { height: 18px; }
  .footer-nav { display: block; margin: 24px 0 32px; font-size: 13px; letter-spacing: 0.1em; }
  .copyright { padding-top: 20px; }
}

/* ===== Scroll reveal（JSが有効で、動きを減らす設定でない場合のみ） ===== */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
  opacity var(--reveal-duration) cubic-bezier(0.22, 0.61, 0.36, 1) var(--reveal-delay, 0ms),
  transform var(--reveal-duration) cubic-bezier(0.22, 0.61, 0.36, 1) var(--reveal-delay, 0ms);
}
.js-reveal .reveal.is-visible { opacity: 1; transform: none; }

/* 見出し：左から右へ、ぼかした境界で文字を表していく */
.js-reveal .reveal.reveal-x {
  opacity: 1;
  transform: translateX(-12px);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 40%, transparent 60%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0%, #000 40%, transparent 60%, transparent 100%);
  -webkit-mask-size: 250% 100%;
  mask-size: 250% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 100% 0;
  mask-position: 100% 0;
  transition:
  -webkit-mask-position var(--reveal-x-duration) cubic-bezier(0.65, 0, 0.35, 1) var(--reveal-delay, 0ms),
  mask-position var(--reveal-x-duration) cubic-bezier(0.65, 0, 0.35, 1) var(--reveal-delay, 0ms),
  transform var(--reveal-x-duration) cubic-bezier(0.22, 0.61, 0.36, 1) var(--reveal-delay, 0ms);
}
.js-reveal .reveal.reveal-x.is-visible {
  transform: none;
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
}

/* 軸上の点：対応する要素のフェードインに合わせて1回だけ、点の周りに光の輪を広げる
  白背景：さらに淡いグレー（Warm Gray 100）の輪／暗いセクション：白い輪 */
@keyframes dot-glow {
  0%   { box-shadow: 0 0 0 0 rgba(236, 236, 231, 1); transform: scale(1); }
  25%  { transform: scale(1.18); }
  70%  { box-shadow: 0 0 0 16px rgba(236, 236, 231, 0); transform: scale(1); }
  100% { box-shadow: 0 0 0 16px rgba(236, 236, 231, 0); transform: scale(1); }
}
.js-reveal .dot.is-pulsing {
  animation: dot-glow var(--pulse-duration) cubic-bezier(0.22, 0.61, 0.36, 1) var(--pulse-delay, 0ms) var(--pulse-count);
}
.js-reveal .dark .dot.is-pulsing {
  animation-name: dot-glow-dark;
}
@keyframes dot-glow-dark {
  0%   { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.45); transform: scale(1); }
  25%  { transform: scale(1.18); }
  70%  { box-shadow: 0 0 0 16px rgba(255, 255, 255, 0); transform: scale(1); }
  100% { box-shadow: 0 0 0 16px rgba(255, 255, 255, 0); transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .js-reveal .reveal { opacity: 1; transform: none; }
}