/* ==========================================================================
   POTOMAK 2026 — COMPANY ページ
   1. 青いヒーロー / 2. タブバー / 3. タブごとの内容
   ========================================================================== */

/* ---------- ヒーロー(青ベタ) ---------- */

.company-hero {
  position: relative;
  /* 背景アニメーションが読み込めなかった場合の下地 */
  background-color: var(--color-blue-light);
  color: var(--color-white);

  /*
   * 白ヌキの文字を少し細く見せる。
   *
   * 文字の太さの指定(400)は他ページと同じだが、
   * 明るい色が暗い地に少しにじむため、白ヌキは太って見える。
   * macOS では既定の描き方がこのにじみを強めるので、
   * 描き方を切り替えて、他ページと同じ太さに見えるようにしている。
   * この指定が効かない環境(Windowsなど)でも、崩れはしない。
   */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* ヘッダーがこの上に重なるので、その高さぶんを空ける */
  /*
   * 上下の余白。
   *
   *   上: 64px  ヘッダーの下端 → 「COMPANY」
   *   下: 96px  ビジョンの文章 → 青い帯の終わり
   *
   * 下だけ広いのはわざと。
   * 読み終えたあとに少し間を置いてから次のセクションへ渡したい。
   * 上下を同じにすると、文章が帯の下端に押し付けられて見える。
   */
  padding-top: var(--space-2xl);
  padding-bottom: var(--space-3xl);
  padding-inline: var(--pad-content);
  /* 背景アニメーションが外へはみ出さないようにする */
  overflow: hidden;

  /*
   * 高さは中身にまかせる。
   *
   * 以前は min-height: 110vh で画面より高くしていたが、
   * 文章の下に青い空白が大きく残り、次のセクションまで遠かった。
   * いまは「上の余白 + 中身 + 下の余白(48px)」で決まる。
   *
   * 背景アニメーション(.ocean)はこの箱いっぱいに敷く作りなので、
   * 箱が低くなればアニメーションの舞台もそのぶん低くなる。
   * 舞台を広く取りたくなったら、ここに min-height を戻すこと。
   */

  /*
   * 中身は上から詰める。
   * 上の padding-top がそのまま効くので、
   * 他ページ(.page-hero)と同じ高さに見出しが並ぶ。
   *   他ページ: ヘッダー110px + 余白64px
   *   ここ:     padding-top が同じ計算式
   */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/*
 * 中身は背景アニメーションより前に出す。
 * .ocean は z-index: 0 なので、1 を与えれば上に乗る。
 */
.company-hero__head {
  position: relative;
  z-index: 1;
  text-align: center;
}

/*
 * ページ名のラベル。BUSINESS / BRAND と同じ List(14px)を使う。
 * ただしCOMPANYだけは青ベタの上に白ヌキで載るため、
 * 少し太らせて(Medium)、字間はEyebrowと同じ18%にしている。
 */
.company-hero__eyebrow {
  font: var(--type-list);
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  color: var(--color-white);
  /* 見出しとの空きは BUSINESS / BRAND(.page-hero__title)と同じ8px */
  margin-bottom: var(--space-xs);
}

/* Figmaの Display-Serif(48px)。ページの顔なので特別扱い */
.company-hero__title {
  font: var(--type-display);
  letter-spacing: var(--ls-display);
  color: var(--color-white);
}

/*
 * リード文。BUSINESS / BRAND の .page-hero__lead と同じ組み方。
 * 幅の上限・上の空き・文字は3ページで共通。色だけ白ヌキにしている。
 */
.company-hero__lead {
  max-width: 886px;
  margin-inline: auto;
  /* 見出し → 中身。全ページ共通の24px(tokens.css の --rule-head) */
  margin-top: var(--rule-head);
  font: var(--type-body-lg);
  letter-spacing: var(--ls-body);
  color: var(--color-white);
}


/* ---------- 背景アニメーション(ヒーロー全面) ---------- */

/*
 * 深い青の中で、鯨の影がゆっくり漂い、球体が楕円の軌道を周回する。
 * 画像もJavaScriptも使わず、すべてCSSで描いている。
 * マークアップは template-parts/ocean-scene.php。
 *
 * 球体と輪の「位置・大きさ・速さ」は1粒ずつPHP側の配列で持たせている。
 * 数を増やす / 減らす、軌道を変えるといった調整はそちらで行う。
 * 全体にかかる色・濃さ・速さは、下のつまみで変える。
 */
.ocean {
  /* ▼ 地の色 */
  --ocean-top:    #14559A;  /* 左上 */
  --ocean-mid:    #14608C;  /* 中間 */
  --ocean-bottom: #1A7F92;  /* 下(青緑) */

  /*
   * ▼ 鯨の影
   *
   * 「深いところを大きな鯨がゆっくり通っている」ように見せたいので、
   * 大きく・強くぼかし・薄く の3点セットで置いている。
   * 小さいまま強くぼかすと形が消えてただの染みになるため、
   * ぼかしを上げるときは大きさも一緒に上げること。
   */
  --shadow-color:   #0A2C57;
  --shadow-opacity: 0.85;  /* 濃さ。下げるほど奥に沈む */
  --shadow-blur:    30px;  /* ぼかし */
  --shadow-speed:   360s;  /* 右から左へ渡りきるまでの時間。長いほどゆっくり */
  /*
   * 開始のずらし。マイナスにすると「すでに途中まで進んだ状態」で始まる。
   * 0 にすると鯨は画面の右外から出発するため、ページを開いた直後は
   * 姿が見えず、現れるまで数十秒待つことになる。
   * それを避けるため、最初から画面内にいる位置まで進めてある。
   */
  --shadow-delay:   -130s;
  --shadow-w:       110%;  /* 大きさ(枠の横幅に対する割合) */
  --shadow-x:       50%;   /* 通り道の横の中心 */
  --shadow-y:       26%;   /* 上端の位置 */

  /* ▼ 波紋(輪) */
  --ring-color: rgb(255 255 255 / 9%);

  /* ▼ 球体 */
  --sphere-color: #BFE4F5;

  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  background: linear-gradient(
    158deg,
    var(--ocean-top) 0%,
    var(--ocean-mid) 45%,
    var(--ocean-bottom) 100%
  );
}

/* ---- 1. 鯨の影 ---- */

/*
 * 鯨のシルエットを、水中に沈んだ影として敷く。
 *
 * ロゴと同じ mark-whale.svg を「型抜き(mask)」に使っている。
 * 画像として置くとSVGの中の色がそのまま出てしまうが、
 * 型抜きにすれば形だけを借りて、色はCSS側(--shadow-color)で決められる。
 * TOPページの動くロゴマーク(logo-mark.css)と同じやり方。
 *
 * --shadow-x / --shadow-y が鯨の中心の位置。
 * 左右の中心合わせは、幅の半分だけ左にずらすことで行っている。
 */
/*
 * 【重要】「切り抜き」と「ぼかし」は必ず別の要素に分けること。
 *
 * 同じ要素に mask と filter: blur() を書くと、ブラウザは
 * 「ぼかす → 切り抜く」の順で処理する。
 * 結果、中身はボケていても輪郭は鯨の形でスパッと切られ、
 * まったくぼけて見えない。
 *
 * そこで
 *   外側(.ocean__shadow)       … ぼかし・位置・動き
 *   内側(.ocean__shadow-inner) … 鯨の形に切り抜き・色
 * と役割を分けている。こうすると「切り抜いた鯨」が丸ごとぼける。
 */
.ocean__shadow {
  position: absolute;
  left: var(--shadow-x);
  top: var(--shadow-y);
  width: var(--shadow-w);
  /* 鯨SVGの縦横比(viewBoxと同じ)。高さは自動で決まる */
  aspect-ratio: 283.46 / 120.58;
  margin-left: calc(var(--shadow-w) / -2);
  opacity: var(--shadow-opacity);
  filter: blur(var(--shadow-blur));
  /*
   * linear(等速)にしている。ease だと端で速度が変わり、
   * 一定の速さで泳いでいるように見えないため。
   */
  animation: ocean-shadow var(--shadow-speed) linear infinite;
  animation-delay: var(--shadow-delay);
}

.ocean__shadow-inner {
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--shadow-color);

  -webkit-mask-image: url("../images/mark-whale.svg");
          mask-image: url("../images/mark-whale.svg");
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

/*
 * 右から左へ、ゆっくり流れていく。
 *
 * 移動量の % は「鯨自身の幅」に対する割合。
 * 画面の外(右)から入り、画面の外(左)へ抜けるまでを1周とし、
 * 出入りの瞬間は透明にして、唐突に現れたり消えたりしないようにしている。
 *
 * 縦の揺れと傾きを少しだけ混ぜて、まっすぐ平行移動しているように
 * 見えないようにしている。
 */
@keyframes ocean-shadow {
  0% {
    transform: translate(125%, 0) rotate(-1.5deg);
    opacity: 0;
  }
  14% {
    opacity: var(--shadow-opacity);
  }
  50% {
    transform: translate(0, -3%) rotate(1.5deg);
  }
  86% {
    opacity: var(--shadow-opacity);
  }
  100% {
    transform: translate(-125%, 2%) rotate(-1.5deg);
    opacity: 0;
  }
}

/* ---- 2. 波紋(輪) ---- */

/*
 * 平たい楕円。球体の軌道とまったく同じ中心・半径で置いてあるので、
 * 球体はこの線の上を通る。
 */
/*
 * 中心合わせに transform を使っている理由:
 * margin-top に % を書くと、CSSの仕様上その % は「親の高さ」ではなく
 * 「親の幅」を基準に計算される。縦の中心がズレるので使えない。
 * transform の % は自分自身の大きさが基準なので、こちらは正しく効く。
 */
.ocean__ring {
  position: absolute;
  left: var(--orbit-cx);
  top: var(--orbit-cy);
  width: calc(var(--orbit-rx) * 2);
  height: calc(var(--orbit-ry) * 2);
  transform: translate(-50%, -50%);
  border: 1px solid var(--ring-color);
  border-radius: 50%;
}

/* ---- 3. 球体 ---- */

/*
 * 軌道を描く仕組み。
 *
 * 円周上の点は本来 cos / sin で求めるが、CSSに三角関数は使いにくい。
 * そこで円周を8等分し、その8点を transform で順に結んでいる
 * (斜め45度の点は半径の約0.707倍。これが cos45° の値)。
 * 点と点の間はブラウザが滑らかに補間するので、楕円として見える。
 *
 * 球体自体は動かさず「位置だけ」を動かしているため、
 * 軌道を平たくしても球体は真円のまま保たれる。
 */
/*
 * 【重要】この要素は枠と同じ大きさ(100%)にしてある。
 *
 * transform: translate() に % を使うと、基準になるのは
 * 「親の大きさ」ではなく「その要素自身の大きさ」。
 * ここを大きさ0で作ると、軌道の半径(--orbit-rx など)が
 * すべて0になり、球体が中心から動かなくなる。
 *
 * 枠と同じ大きさにしておくことで、--orbit-rx: 30% が
 * 「枠の横幅の30%」として正しく効く。
 * 見た目には何も描かないので、はみ出していても問題ない
 * (.ocean 側の overflow: hidden で切られる)。
 */
.ocean__orbit {
  position: absolute;
  left: var(--orbit-cx);
  top: var(--orbit-cy);
  width: 100%;
  height: 100%;
  pointer-events: none;
  animation: ocean-orbit var(--orbit-duration) linear infinite;
  animation-delay: var(--orbit-delay);
}

.ocean__sphere {
  position: absolute;
  width: var(--sphere-size);
  height: var(--sphere-size);
  margin-left: calc(var(--sphere-size) / -2);
  margin-top: calc(var(--sphere-size) / -2);
  border-radius: 50%;
  opacity: var(--sphere-opacity);
  filter: blur(var(--sphere-blur));
  background: radial-gradient(
    circle at 34% 30%,
    rgb(255 255 255 / 55%) 0%,
    var(--sphere-color) 45%,
    rgb(255 255 255 / 0%) 100%
  );
}

@keyframes ocean-orbit {
  0%     { transform: translate(var(--orbit-rx), 0); }
  12.5%  { transform: translate(calc(var(--orbit-rx) * 0.707), calc(var(--orbit-ry) * 0.707)); }
  25%    { transform: translate(0, var(--orbit-ry)); }
  37.5%  { transform: translate(calc(var(--orbit-rx) * -0.707), calc(var(--orbit-ry) * 0.707)); }
  50%    { transform: translate(calc(var(--orbit-rx) * -1), 0); }
  62.5%  { transform: translate(calc(var(--orbit-rx) * -0.707), calc(var(--orbit-ry) * -0.707)); }
  75%    { transform: translate(0, calc(var(--orbit-ry) * -1)); }
  87.5%  { transform: translate(calc(var(--orbit-rx) * 0.707), calc(var(--orbit-ry) * -0.707)); }
  100%   { transform: translate(var(--orbit-rx), 0); }
}

/* 「視差効果を減らす」設定の人には、動かさず静止した絵として見せる */
@media (prefers-reduced-motion: reduce) {
  .ocean__shadow,
  .ocean__orbit {
    animation: none;
  }
}


/* ヒーロー上にいる間、ヘッダーを透過させて白文字にする */
/*
 * 青ヒーローの上にヘッダーが重なっている間は、ヘッダーも同じ青にして
 * 境目が見えないようにする。ヒーローを通り過ぎた時点でPaperに戻る。
 * is-over-hero の付け外しは main.js が担当。
 */
/*
 * ヒーローの上にいる間、ヘッダーは完全に透明にする。
 *
 * ヒーローはヘッダーの下に潜り込ませてある(margin-top がマイナス)ので、
 * 透明にすればヘッダーの帯の部分にも背景アニメーションがそのまま透ける。
 * 色を塗ると、そこだけ animation が切れて帯に見えてしまう。
 */
.page-company .site-header.is-over-hero {
  background-color: transparent;
  border-bottom-color: transparent;
}

.page-company .site-header.is-over-hero .site-header__logo,
.page-company .site-header.is-over-hero .global-nav__link,
.page-company .site-header.is-over-hero .lang-switch {
  color: var(--color-white);
}

.page-company .site-header.is-over-hero .nav-toggle span {
  background-color: var(--color-white);
}

/*
 * 【重要】狭い画面では、ナビの文字だけ黒に戻す。
 *
 * 上の指定は「透明なヘッダーの上に白文字を載せる」ためのもので、
 * 広い画面ではナビもヘッダーの一部として青い背景の上にある。
 *
 * ところが狭い画面のナビは、ヘッダーから切り離されて
 * 紙色で塗られたパネルの中に入る(layout.css の 1100px 以下)。
 * そこへ白文字のまま入ると、白い板に白い文字となって
 * 「メニューが出てこない」ように見えてしまう。
 *
 * ロゴとハンバーガーは透明なヘッダーの上に残るので、白のまま。
 */
@media (max-width: 1100px) {
  .page-company .site-header.is-over-hero .global-nav__link,
  .page-company .site-header.is-over-hero .lang-switch {
    color: var(--color-ink);
  }
}


/* ---------- タブバー ---------- */

/*
 * スクロールしても、ヘッダーのすぐ下に貼り付いたまま残る。
 *
 * COMPANYページは4つのタブを切り替えて読む作りなので、
 * 下の方まで読み進めたときに切り替えの手段が画面から消えると、
 * いちいち上まで戻らないと別の項目へ移れなくなる。
 *
 * top はヘッダーの実際の高さぶんだけ下げる。
 * この値は main.js が測って書き込んでいるので、
 * ヘッダーの高さを変えても自動で追従する。
 *
 * 貼り付いている間は下に地色を敷く。
 * 敷かないと、下を通り過ぎる本文が透けて文字が重なる。
 * 上下の余白は、貼り付いたときに帯が厚くなりすぎないよう
 * 少し詰めている。
 */
.company-tabs {
  position: sticky;
  /*
   * 1px だけ上に食い込ませる。
   * ヘッダーの高さは小数点以下を含むことがあり、ぴったり合わせると
   * 髪の毛ほどの隙間が空いて、そこを本文が通り過ぎて見えることがある。
   * わずかに重ねておけば、その事故が起きない。
   */
  top: calc(var(--header-height) - 1px);
  z-index: 50;
  /*
   * 帯の厚み。
   * 貼り付いているあいだは画面の上をずっと占領し続けるので、
   * 本文のセクションより薄くしておく。
   */
  padding-block: var(--space-md);
  /*
   * 本文との間の空き。
   *
   * 貼り付く前は padding(帯の内側)でも空きに見えていたが、
   * 地色を敷いたことで padding は「帯の厚み」に変わった。
   * 帯と本文の間の空きは、外側の margin で持たせる必要がある。
   */
  /*
   * タブとその中身のあいだ。
   *
   * ここだけ区切りの2倍。
   * タブは押すと中身が入れ替わる「操作」なので、
   * 帯と中身が近いと、タブが中身の見出しのように見えてしまう。
   */
  margin-bottom: calc(var(--rule-section) * 2);
  background-color: var(--color-bg);

  /*
   * 罫線は下だけ。
   *
   * 帯のすぐ上は青ベタのヒーローで、その縁が上の線の役目をしている。
   * ここにもう1本引くと、色の境目に線が重なって見える。
   * 上の空きも取らず、青の縁にぴったり付けている。
   */
  border-bottom: 1px solid var(--color-line);
}

.company-tabs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

/* 項目のあいだに縦の区切り線を入れる */
.company-tabs__list > li + li {
  border-left: 1px solid var(--color-line);
}

.company-tabs__btn {
  padding: var(--space-2xs) var(--space-lg);
  font: var(--type-list);
  letter-spacing: var(--ls-body);
  color: var(--color-text-sub);
  transition: color 0.2s ease;
}

.company-tabs__list > li:first-child .company-tabs__btn {
  padding-left: 0;
}

.company-tabs__btn:hover {
  color: var(--color-accent);
}

.company-tabs__btn.is-active {
  color: var(--color-accent);
}

/*
 * 選ばれているタブの下線。
 *
 * 幅そのものではなく「横方向の伸縮」で動かしている。
 * 描き直しが起きないので、左から右へなめらかに伸びる。
 * (読み進めリンク .pill-link のホバーと同じ作り)
 *
 * span で包んでいるのは、ボタンの左右の余白(32px)まで線を伸ばさず、
 * 文字の幅ぴったりで引くため。
 */
.company-tabs__label {
  position: relative;
}

.company-tabs__label::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 1px;
  background-color: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.company-tabs__btn.is-active .company-tabs__label::after {
  transform: scaleX(1);
}

/*
 * 押したときにブラウザが出す青い枠を消す。
 * ただしキーボードで移動してきたときは残す(:focus-visible)。
 * 完全に消すと、キーボードだけで操作する人が
 * いまどのタブにいるのか分からなくなる。
 */
.company-tabs__btn:focus {
  outline: none;
}

.company-tabs__btn:focus-visible {
  outline: 1px solid var(--color-accent);
  outline-offset: 4px;
}

/* 「動きを減らす」設定の人には、線を伸ばさず即座に出す */
@media (prefers-reduced-motion: reduce) {
  .company-tabs__label::after {
    transition: none;
  }
}


/* ---------- タブの中身 ---------- */

.company-panel {
  /*
   * 画面の外へはみ出させた要素(価値観のイラストなど)を切り落とす。
   * 切らないと、その分だけ横スクロールが発生してしまう。
   *
   * 【重要】hidden ではなく clip を使うこと。
   *
   * overflow-x: hidden にすると、指定していない縦方向が自動で auto になり、
   * この箱が「スクロールする箱」として扱われる。
   * すると中にある sticky は画面ではなくこの箱に貼り付こうとするため、
   * 価値観の舞台が貼り付かずにそのまま上へ流れてしまう。
   *
   * clip は縦を visible のまま保つので、スクロールする箱にならない。
   */
  overflow-x: clip;
}

/*
 * タブの中身の下。区切りの2倍。
 *
 * このページはタブの中身の直後がフッターで、あいだに帯が無い。
 * フッターの地色も本文と同じなので、ふつうの区切りだと
 * 本文がそのままフッターに続いているように見える。
 */
.company-panel {
  padding-bottom: calc(var(--rule-section) * 2);
}

.company-panel[hidden] {
  display: none;
}

/* 見出し。先頭に短い横棒が付く */
/*
 * タブの中の章の見出し。
 *
 * 和文の見出し(「会社概要」など)は置いていない。
 * タブバーが画面に貼り付いたまま同じ言葉を出しているので、
 * すぐ下でもう一度言うことになるため。
 * 英字ラベルがそのまま見出しを兼ねている。
 */
/*
 * 英字ラベル → 中身。
 *
 * ふつうの「見出し → 中身」(--rule-head 24px)より広く取っている。
 * ここのラベルはタブ1枚ぶんの表紙にあたるので、
 * セクション内の区切りではなく、章の切り替わりとして見せたい。
 * 中身の側の区切り(沿革の年と年＝32px)より必ず広いこと。
 * 逆転すると、ラベルが中身の一部に見える。
 */
.company-panel__head {
  margin-bottom: var(--space-xl);
}

/* ---------- 私たちの価値観 ---------- */

/*
 * 価値観の舞台。
 *
 * 4つ(Enjoy / Creative / Variety / and Smile)を横一列に並べ、
 * 1つずつ送って見せる。いま何番目かは
 *   ・キャッチの中でその語だけが濃くなる
 *   ・下の丸印
 * の2つで示す。
 *
 * 送り方は「指で払う」「キャッチの語を押す」の2つ。
 * どちらもスクロールを奪っていない。帯を普通に横スクロールさせ、
 * 止まった位置から何番目かを読んでいるだけ。
 * 1つずつ吸い付いて止まるのは scroll-snap の仕事。
 *
 * 画面の広さで作りを変えていない。
 * 以前は広い画面だけ「貼り付けて縦スクロールで送る」形にしていたが、
 * 仕組みを2つ持つことになり、切り替えの境目も増えていた。
 *
 * is-swipe は JavaScript が付ける(assets/js/values-stage.js)。
 * 付かなければ4つが普通に縦へ並ぶので、内容が読めなくなることはない。
 */
.values-stage__pin {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--space-2xl);
}

/* キャッチと、入れ替わる文章とのあいだ */
.values-stage__panels {
  margin-top: var(--space-xl);
}

/* 丸印は仕掛けが動いているときだけ出す */
.values-stage__dots {
  display: none;
}

.values-stage.is-swipe .values-stage__dots {
  display: flex;
}

.values-stage.is-swipe .values-stage__panels {
  display: flex;

  /*
   * 文章と文章のあいだ。
   *
   * この値は見た目の空きであると同時に、
   * 「次の文章がどこから始まるか」も決めている。
   *   次の文章の左端 = 文章1つ分の幅 + この空き
   * これだけ空けると、次の文章が枠の外へ出るので、
   * 右端に半端に覗く状態が無くなる。
   *
   * 覗かせないのは、続きがあることを下の丸印が示しているため。
   * 文章が途中で切れて見えていると、読み終えたのか分からなくなる。
   */
  gap: var(--space-2xl);

  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;

  /* 目印はキャッチの語と丸印が担うので、バーは出さない */
  scrollbar-width: none;
}

.values-stage.is-swipe .values-stage__panels::-webkit-scrollbar {
  display: none;
}

.values-stage.is-swipe .values-panel {
  /* 1つで枠の幅ぶん。縮まないよう固定する */
  flex: 0 0 100%;
  scroll-snap-align: start;
  margin-top: 0;
}

/* 語はキャッチ側が示すので、こちらは隠す */
.values-stage.is-swipe .values-panel__label {
  display: none;
}

/*
 * キャッチの中の1語。
 * いま読んでいる1語だけ濃く、ほかは薄く。
 *
 * 薄いほうは罫線と同じ色(--color-line)。
 * 補足文字の色(--color-text-weak)だと濃さの差が小さく、
 * どれが光っているのか一目で分からなかった。
 *
 * 語そのものが押せる(JSが role="button" を付ける)ので、
 * 押せることが伝わるようにカーソルと当たり判定を持たせる。
 */
.values-stage.is-swipe .values__word {
  color: var(--color-line);
  transition: color 0.4s ease;
  cursor: pointer;
  /* 指で押しやすいように、文字の上下に見えない余白を足す */
  padding-block: var(--space-2xs);
}

.values-stage.is-swipe .values__word.is-active {
  color: var(--color-ink);
}

/*
 * カーソルを乗せた語だけ、一段濃くする。
 *
 * 選ばれている語(墨)と、まだ選ばれていない語(罫線と同じ薄さ)の
 * ちょうど中間の濃さ。押せば濃くなる、という先の動きが読める。
 * 濃さが3段になるので、いま選ばれているものと取り違えることもない。
 *
 * 指で触る画面にはホバーが無いので、ここは hover が使える機械にだけ効かせる。
 * (無条件に書くと、押した指が離れたあとも濃いまま残る端末がある)
 */
@media (hover: hover) {
  .values-stage.is-swipe .values__word:hover {
    color: var(--color-text-weak);
  }

  /* 選ばれている語は、乗せても墨のまま(薄くしない) */
  .values-stage.is-swipe .values__word.is-active:hover {
    color: var(--color-ink);
  }
}

/*
 * 選ばれている語の下線。
 *
 * 幅そのものではなく「横方向の伸縮」で動かしている。
 * 描き直しが起きないので、左から右へなめらかに伸びる。
 * (タブバーや読み進めリンクと同じ作り)
 *
 * 色は currentColor。選ばれている語と同じ濃さになり、
 * 選ばれていない語では線も一緒に薄くなるので、
 * 消えかけの線が残って見えることがない。
 */
.values-stage.is-swipe .values__word {
  position: relative;
}

.values-stage.is-swipe .values__word::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.values-stage.is-swipe .values__word.is-active::after {
  transform: scaleX(1);
}

.values-stage.is-swipe .values__word:focus-visible {
  outline: 1px solid var(--color-accent);
  outline-offset: 2px;
}

/* 「動きを減らす」設定の人には、色を切り替えるだけにする */
@media (prefers-reduced-motion: reduce) {
  .values-stage.is-swipe .values__word {
    transition: none;
  }

  .values-stage.is-swipe .values__word::after {
    transition: none;
  }
}

/* ---- JavaScriptが動かないときの並び ---- */

.values-panel + .values-panel {
  margin-top: var(--space-3xl);
}

.values-panel__label {
  font: var(--type-h1);
  letter-spacing: var(--ls-display);
  margin-bottom: var(--space-md);
}

/* イラストは枠の縦中央に置く */
.values-stage__visual {
  position: relative;
  align-self: stretch;
}

/*
 * 絵は枠の幅いっぱいではなく90%。
 * 文章の側に空きがあるので、絵も同じだけ引くと左右の重さが釣り合う。
 * 余った分は左右に振り分けて中央に置く。
 *
 * ------------------------------------------------------------------
 * 大きさに上限を置く理由(2026/09/16)
 * ------------------------------------------------------------------
 * このページの左右余白は固定(120px)で、本文の幅に上限が無い。
 * そのため画面が広いほど列が広がり、90%のままだと絵が際限なく大きくなる。
 *
 *   画面1440px … 列568 → 絵511 → 高さ483
 *   画面1920px … 列808 → 絵727 → 高さ683
 *   画面2560px … 列1128 → 絵1015 → 高さ954
 *
 * 絵はほぼ正方形(1850 × 1738)なので、横に広がるとそのまま縦にも伸びる。
 * 一方この段の高さは文章の側が決めていて 450px ほどしかない。
 * 結果、広い画面では絵が段からはみ出し、下がフッターに隠れて切れて見えていた。
 *
 * そこで、広い画面では横ではなく「高さ」で大きさを決めるようにした。
 * 入る高さいっぱいまで大きくし、横はそこから決まる。
 * 90%は、絵が縦に余っている狭い画面でこれまでどおり効く上限。
 *
 * 高さの基準になる枠は、大画面(1441px以上)だけセクション全体に広げてある。
 */
.values-stage__visual > * {
  position: absolute;
  /* inset:0 と margin:auto で、縦横とも枠の中央に置く */
  inset: 0;
  margin: auto;
  width: auto;
  height: auto;
  max-width: 90%;
  max-height: 100%;
}

/*
 * ------------------------------------------------------------------
 * 絵の高さの基準を、段ではなくセクション全体にする(2026/09/16)
 * ------------------------------------------------------------------
 * 絵は文章と横に並んでいるので、そのままだと高さの上限が
 * 「文章の段の高さ」になる。文章は450pxほどしかないため、
 * 広い画面では絵だけが小さく見えていた。
 *
 * かといって段を高くすると、セクション全体が縦に伸びてしまう。
 *
 * そこで絵だけを段から外し、セクションを基準に置き直す。
 * 上は見出し(OUR VALUES)の高さぶん、下はセクションの余白ぶん、
 * 使える高さが増える。文章の位置も、セクションの高さも変わらない。
 *
 * 絵は右の列に重なるだけで、文章の側とは重ならない
 * (左右の位置は、下の width と right で列とそろえてある)。
 *
 * 効かせるのは大画面だけ。1440pxまでの画面では、絵の大きさを決めているのは
 * 高さではなく横幅(90%)なので、基準を広げても見た目は変わらない。
 * 変わらないもののために作りを変えると、後から読んで理由が分からなくなる。
 * ------------------------------------------------------------------ */
@media (min-width: 1441px) {

  /* 絵を置く基準。他のタブの中身にも付くが、中身は何も変わらない */
  .company-panel {
    position: relative;
  }

  .values-stage__visual {
    position: absolute;
    top: 0;
    bottom: 0;

    /*
     * 右の列と同じ場所にそろえる。
     *   right … 本文の左右余白(--pad-content)
     *   width … 左右の余白と列の間隔を引いて、残りの半分
     */
    right: var(--pad-content);
    width: calc((100% - var(--pad-content) * 2 - var(--space-2xl)) / 2);
  }
}

.values__catch {
  font: var(--type-display);
  letter-spacing: var(--ls-display);
}

/* Figmaの H2-Serif */
.values__title {
  font: var(--type-h2);
  letter-spacing: var(--ls-heading);
}

.values__body {
  margin-top: var(--space-md);
  font: var(--type-body);
  letter-spacing: var(--ls-body);
  color: var(--color-ink);
}


/* ---------- 会社概要 ---------- */

.profile__table {
  display: grid;
}

/*
 * 1行ぶん。
 *
 * 罫線と文字の空きは20px。32pxだと行が離れて表に見えない。
 * 行送りは本文のまま(1.9)。
 *
 * 左右(項目名の列240px + 32px)は本文と同じ扱いのままにしてある。
 * 詰めると、左の項目名と右の内容がくっついて1つの文に見えるため。
 */
.profile__row {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--space-lg);
  padding-block: 20px;
  border-top: 1px solid var(--color-line);
}

.profile__row:last-child {
  border-bottom: 1px solid var(--color-line);
}

.profile__term {
  font: var(--type-body);
  letter-spacing: var(--ls-body);
  color: var(--color-ink);
}

.profile__desc {
  font: var(--type-body);
  letter-spacing: var(--ls-body);
}


/* ---------- ポトマックの歩み ---------- */

/*
 * 年と年のあいだ。
 *
 * 以前は64pxで、ラベル(OUR HISTORY)から最初の年までより広かった。
 * 同じ章の中の区切りが、章の入口より広いのは順番が逆。
 * 項目どうしの8pxとは充分に差がつき、
 * ラベルの下の48pxは超えない32pxにしている。
 */
.history {
  position: relative;
  display: grid;
  gap: var(--space-lg);
  padding-left: 140px;
}

/* 左端に縦のライン */
.history::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 8px;
  bottom: 8px;
  border-left: 1px solid var(--color-line);
}

.history__entry {
  position: relative;
}

/* 年の位置に丸を打つ */
.history__entry::before {
  content: "";
  position: absolute;
  left: -140px;
  top: 8px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: var(--color-accent);
}

.history__year {
  position: absolute;
  left: -110px;
  top: 0;
  font: var(--type-body);
  letter-spacing: var(--ls-body);
  color: var(--color-ink);
}

.history__items {
  display: grid;
  gap: var(--space-xs);
}

.history__items li {
  position: relative;
  padding-left: 24px;
  font: var(--type-body);
  letter-spacing: var(--ls-body);
  color: var(--color-ink);
}

/* 各項目の先頭に短い横棒 */
.history__items li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.9em;
  width: 12px;
  border-top: 1px solid var(--color-text-weak);
}

/*
 * 社長ブログ『ねじレノンののれん』への案内。
 *
 * 本文と同じ行に続けると、どこまでが出来事の説明か分からなくなるので
 * 改行して1段下げる。本文(15px)より一段小さいキャプション(12px)にして、
 * 出来事そのものより控えめに見せる。
 * 別サイトへ出ていく導線なので、色は瑠璃色(リンク色)。
 */
.history__blog {
  display: block;
  /* 本文 → その補足。全ページ共通の8px */
  margin-top: var(--space-xs);
  font: var(--type-caption);
  letter-spacing: var(--ls-caption);
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.history__blog:hover {
  text-decoration: none;
}


/* ---------- ロゴデザイン ---------- */

/*
 * ロゴを1枚だけ置く場所。
 *
 * 上下に48pxずつ持たせている。
 * ロゴは「読ませる中身」ではなく見せるものなので、
 * まわりが空いているほどそれ自体が主役に見える。
 * 区切りの線は引かない。空きだけで区切りが作れているところに
 * 線を足すと、ロゴが枠に入れられたように見えるため。
 */
.logo-showcase {
  display: grid;
  justify-items: center;
  padding-block: var(--space-xl);
}

/*
 * フッターと同じ公式ロゴ。
 * 鯨・文字・タグラインが1枚に収まっているので、
 * 幅を決めるだけで各部の大きさと間隔が正しく保たれる。
 */
.logo-showcase__svg {
  display: block;
  width: 260px;
  height: auto;
}

/*
 * 「写真 + 見出し + 文章」のかたまりが縦に並ぶ。
 * かたまりどうしの空きは全ページ共通の --rule-block(48px)。
 */
.logo-story {
  display: grid;
  gap: var(--rule-block);
  margin-top: var(--rule-row);
}

.logo-story__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: start;
}

/*
 * 写真の枠。
 *
 * 以前は比率を決めず、画像そのものの縦横がそのまま出ていたので、
 * 1枚目(2.15:1)と2枚目(1.73:1)で形が揃わなかった。
 * サイトで一番使っている16:9に固定して、差し替えても形が変わらないようにする。
 *
 * object-fit: cover は「枠を写真で埋め、はみ出た分を切る」指定。
 * これがないと、比率の違う写真が枠に合わせて潰れる。
 */
.logo-story__visual {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: var(--color-grayge);
}

.logo-story__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 画像未設定のときの枠も同じ形に(既定は4:3のため) */
.logo-story__visual .placeholder {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
}

.logo-story__title {
  margin-bottom: var(--space-md);
  font: var(--type-subhead);
  letter-spacing: var(--ls-heading);
}

.logo-story__body {
  font: var(--type-body);
  letter-spacing: var(--ls-body);
  color: var(--color-ink);
}


/* ---------- スマートフォン ---------- */

@media (max-width: 768px) {
  /*
   * 画面が狭いと鯨も一緒に小さくなり、ただの帯に見えてしまう。
   * 横幅に対する割合を上げて、細長い画面でも鯨だと分かる大きさにする。
   * 縦位置は、上の見出しと下のビジョンの間に来るように合わせている。
   */
  .ocean {
    --shadow-w: 190%;
    --shadow-y: 34%;
  }

  /*
   * 球体のぼかしをやめる。
   *
   * ぼかしは、ものが動くたびに描き直しが必要になる処理で、
   * 数が多いほど負担が積み上がる。ここには14個あり、
   * それぞれが常に軌道を回り続けている。
   * スマートフォンではこれがスクロールのひっかかりにつながる。
   *
   * もともと薄い色なので、ぼかしを外しても見た目はほとんど変わらない。
   */
  .ocean__sphere {
    filter: none;
  }
}

@media (max-width: 768px) {
  /*
   * 縦に積むと、列と列のあいだ用の64pxがそのまま
   * 「写真 → 文章」の空きになり、かたまりどうしの48pxより広くなる。
   * 写真が大きいので24pxでは詰まって見えるため、48pxにしている。
   */
  .logo-story__row {
    grid-template-columns: 1fr;
    gap: var(--rule-block);
  }

  /* ---- 価値観のイラスト(狭い画面) ---- */

  /*
   * 1カラムになるので、文章の右に置く指定を解除して普通に積む。
   * そのうえで order で文章より前へ回し、見出しのすぐ下に来るようにする。
   * (HTMLの並びは変えずに、表示の順番だけ入れ替えている)
   *
   * 列の間隔は0にする。
   * 広い画面では文章と絵の「列と列のあいだ」だった64pxが、
   * 縦積みになるとそのまま「絵と文章のあいだ」に入ってしまうため。
   * 空きは各要素が自分で持つ。
   */
  .values-stage__pin {
    grid-template-columns: 1fr;
    gap: 0;
  }

  /*
   * 文章側の入れ物を「無かったこと」にする。
   * 中の 見出し / キャッチ / 4つの中身 がそのまま縦の並びに乗るので、
   * そこへ絵を差し込んで order で位置を決められる。
   */
  .values-stage__text {
    display: contents;
  }

  /*
   * 並び順。HTMLの順序は変えずに、表示だけ入れ替えている。
   *   1 絵 → 2 キャッチ → 3 中身 → 4 丸印
   */
  .values-stage__visual {
    position: static;
    order: 1;
  }

  .values__catch {
    order: 2;
  }

  .values-stage__panels {
    order: 3;
  }

  .values-stage__dots {
    order: 4;
  }

  /* 見た目は base.css の .dots。ここでは出す・出さないだけ決める */
  .values-stage.is-swipe .values-stage__dots {
    display: flex;
  }

  /*
   * 狭い画面では、帯を画面の端まで広げる。
   * 文字の位置は本文と揃えたままにしたいので、
   * 外側へ出したぶんと同じだけ内側に余白を戻している。
   * (仕掛けそのものは広い画面と同じ。ここは幅の扱いだけ)
   */
  .values-stage.is-swipe .values-stage__panels {
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
  }

  /* 狭い画面では枠の幅いっぱいに使う */
  .values-stage__visual > * {
    position: static;
    inset: auto;
    margin: 0;
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: none;
  }

  /*
   * 絵の上下の空き。
   *
   * ここだけ他の間隔(48px)より狭くしている。
   * 絵そのものが上下に余白を持っているので、
   * 同じ48pxを足すと見た目では倍近く空いて見えるため。
   *
   * 上の空きはセクションの padding-top が持っているので、ここでは持たない。
   *
   * 左右は指定しない。
   * 親(.container)の左右余白がそのまま効くので、
   * 絵の端が下の文章の端とそろう。
   */
  .values-stage__visual {
    margin-bottom: var(--space-sm);
  }

  .values-stage__visual img {
    display: block;
    width: 100%;
    height: auto;
  }

  /*
   * 縦に積むので、項目名と内容のあいだはPCの32pxでは離れすぎる。
   * 2つで1行ぶんに見えるところまで詰める。
   * 罫線と文字の20pxはPCと共通。
   */
  .profile__row {
    grid-template-columns: 1fr;
    gap: var(--space-xs);
  }

  .history {
    padding-left: 0;
  }

  .history::before,
  .history__entry::before {
    display: none;
  }

  .history__year {
    position: static;
    margin-bottom: var(--space-sm);
  }

  /*
   * 狭い画面でも1行に収め、左右いっぱいに広げる。
   *
   * タブは4つ(価値観 / 会社概要 / 沿革 / ロゴ)で全部で11文字。
   * 和文は1文字が文字サイズと同じ幅なので、14pxのままで約160px。
   * 狭い端末(320px)でも本文の幅(280px)に余裕をもって収まる。
   *
   * 余りは space-around で配る。
   * 両端にもすき間ができるので、1つめと4つめが画面の縁に
   * 貼り付かず、4つでひとまとまりの帯に見える。
   * (space-between だと両端が0になり、端の文字が縁に張り付く)
   * 端のすき間は内側の半分になるので、まとまりは崩れない。
   *
   * 折り返して2段になると、貼り付いたときに画面をかなり占領するので、
   * ラベルを短くして1行を保っている(文字は小さくしない)。
   */
  .company-tabs__list {
    flex-wrap: nowrap;
    justify-content: space-around;
  }

  .company-tabs__btn {
    padding-inline: 0;
  }

  /*
   * 縦の区切り線は消す。
   * すき間が均等に開いたので、線が無くても区切りは伝わる。
   * 線を残すと、余白の中で位置が半端になって落ち着かない。
   */
  .company-tabs__list > li + li {
    border-left: 0;
  }
}