/* =========================================================
   xxxxnese — base.css
   Reset / tokens / body / focus / グローバルモーション設定
   ========================================================= */

/* ---------- Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
  /* 固定ヘッダー分のアンカーオフセット */
  scroll-padding-top: calc(var(--header-height) + 16px);
  /* 実機 Safari で metaballs の transform: scale が親の overflow:hidden を貫通し
     横スクロールが発生するのを根本で止める。clip は scroll を許可しないため
     position:sticky 等の副作用がない（Safari 16+）。古い Safari は hidden にフォールバック。 */
  overflow-x: hidden;
  overflow-x: clip;
}

body { overflow-x: clip; }

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
}

button {
  font: inherit;
  background: none;
  border: none;
  color: inherit;
}

/*
  クリック可能要素は例外なく指カーソル。
  ---------------------------------------------------------
  「cursor は当たっているのにマウスが指にならない」問題の本丸は、
  ::before / ::after の装飾レイヤが position:absolute + inset:0 で
  本体リンクの上を覆っていて、そちらが hover を奪うケース。
  対策:
    - clickable 要素自体を position:relative 化
    - 子要素は position:relative + z-index:1 で前面へ
    - 装飾 ::before / ::after は pointer-events:none でイベントを透過
  ========================================================= */
a,
button,
[role="button"],
summary,
input[type="button"],
input[type="submit"],
input[type="reset"] {
  cursor: pointer;
  position: relative; /* 子要素の z-index が効くように */
}

/* 子要素を前面に（塗り ::before より上） */
a > *,
button > *,
[role="button"] > *,
summary > * {
  position: relative;
  z-index: 1;
  cursor: inherit;
}

/* 深い子孫にも cursor を継承 */
a *,
button *,
[role="button"] *,
summary * {
  cursor: inherit;
}

/*
  装飾レイヤはイベントを透過 & カーソル継承。
  これで ::before が全面を覆っていても、
  hover しているのは本体リンクとして扱われ、指カーソルが維持される。
*/
a::before,
a::after,
button::before,
button::after,
[role="button"]::before,
[role="button"]::after,
summary::before,
summary::after {
  pointer-events: none;
  cursor: inherit;
}

/* キーボード操作時のフォーカスリング */
:focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- 日本語見出し・リードの折り返し（全プロジェクト共通ルール） ----------
   日本語は単語スペースがないためブラウザ任せだと「、」直前で1文字落ちが起きる。
   - 見出し: word-break:keep-all + text-wrap:balance で2行のバランスを揃える
   - リード/キャプション: text-wrap:pretty で最終行の孤児を防ぐ
   - 意図的改行は HTML の <br>（「、」直後にのみ）で明示する
   - overflow-wrap: anywhere は keep-all で改行できず container をはみ出す状況の救済。
     実機 iOS Safari は keep-all + break-word の組み合わせで CJK が改行できないバグ
     があるため、anywhere に変更して min-content 計算でも強制 break を許可する。
     通常時は keep-all が優先され、はみ出す場合にだけ anywhere が発動する。
   ============================================================== */
:where(h1, h2, h3, h4) {
  word-break: keep-all;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
:where(
  [class$="__caption"],
  [class$="__tagline"],
  [class$="__lead"],
  [class$="__subheading"],
  .section-lead,
  .section-kicker,
  .mission-statement
) {
  word-break: keep-all;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

/* ---------- 改行制御ユーティリティ（全ページ共通） ----------
   .br-desktop — desktop のみ改行、mobile では消える
   .br-mobile  — mobile のみ改行、desktop では消える
   long copy が mobile で詰まる場合に「、」直後に挟む */
.br-desktop { display: inline; }
.br-mobile  { display: none; }
@media (max-width: 640px) {
  .br-desktop { display: none; }
  .br-mobile  { display: inline; }
}

/* ---------- Design tokens ---------- */
:root {
  /* Ink / text */
  --color-ink: #111111;
  --color-ink-soft: #2a2a2a;
  --color-text: #3c3c3c;
  --color-muted: #7a7a7a;

  /* Lines */
  --color-line: #e7e8ea;
  --color-line-soft: #eef0f2;
  --color-line-strong: #d4d6d9;

  /* Backgrounds - わずかに青みのあるクールな極薄グレー */
  --color-bg: #ffffff;
  --color-bg-alt: #f3f5f7;
  --color-placeholder-bg: #eef0f3;
  --color-placeholder-ink: #a9adb3;

  /* Accent - 深いインクブルー: 越境/接続/信頼 */
  --color-accent: #1f3354;
  --color-accent-hover: #2a4370;

  /* Fonts - Helvetica/Futura系（ロゴに合わせたジオメトリック・サンセリフ一本） */
  --font-sans:
    "Helvetica Neue", "Helvetica", "Arial",
    "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    "YuGothic", "Yu Gothic", "Noto Sans JP", Meiryo, sans-serif;
  --font-display:
    "Avenir Next", "Avenir",
    "Futura", "Futura PT", "Century Gothic",
    "Helvetica Neue", "Helvetica", "Arial",
    "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    "YuGothic", "Yu Gothic", "Noto Sans JP", Meiryo, sans-serif;

  --container-max: 1240px;
  --container-pad: 24px;

  /* Header */
  --header-height: 72px; /* モバイルでは @media で 64px に上書き */

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- Body base ---------- */
body {
  font-family: var(--font-sans);
  color: var(--color-text);
  background-color: var(--color-bg);
  font-size: 16px;
  line-height: 1.8;
  font-feature-settings: "palt" 1;
  letter-spacing: 0.04em;
  /*
    固定ヘッダー分の余白を確保（白基調の通常ページ用）。
    Hero がページ先頭を飲み込む構造のときは
    <body class="has-dark-hero"> を付けて 0 にリセットする。
  */
  padding-top: var(--header-height);
}

body.has-dark-hero,
body.page-top {
  /* Hero がヘッダー裏まで延びる構造のとき、body padding を 0 にして
     ヘッダーが Hero の上に overlay できるようにする */
  padding-top: 0;
}

/* =========================================================
   Responsive — base
   ========================================================= */

/* Tablet */
@media (max-width: 960px) {
  :root { --container-pad: 32px; }
}

/* Mobile */
@media (max-width: 640px) {
  :root {
    --container-pad: 22px;
    --header-height: 64px; /* モバイルヘッダー高 */
  }

  body { font-size: 15px; }
}

/* Reduced motion (グローバル) */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}