/* ==========================================================================
   POTOMAK 2026 — トップページ専用スタイル
   セクション順: ヒーロー / メインビジュアル / イントロ / ニュース /
                 事業領域 / ブランドと店舗 / 採用 / お問い合わせ
   ========================================================================== */

/* ---------- ヒーローとメインビジュアルの高さ ---------- */

/*
 * この2つは画面上で縦に連なるため、高さがずれると段差に見える。
 * 値はここ1か所で決め、両方から参照する。
 * (片方だけ直すと必ず食い違うので、個別に書かないこと)
 *
 * スマートフォンでは、幅に対する比率で高さを決める。
 * --visual-ratio が 1 でちょうど正方形、大きくするほど縦長になる。
 * 1.2 は 5:6 の縦長(高さ = 幅 × 6 / 5)。
 */
:root {
  --visual-height: 650px;
  --visual-ratio: 1.2;
}

@media (max-width: 768px) {
  :root {
    --visual-height: calc(100vw * var(--visual-ratio));
  }
}


/* ---------- セクション共通(トップページの見出しまわり) ---------- */

/*
 * セクションの上下の空きは .section (base.css) の共通ルールにまかせる。
 * 上48px + 下48px = 区切り96px。ここで打ち消さないこと。
 *
 * 以前は区切り線(.has-divider)が空きを持っていたため、
 * ここで各セクションの padding を0にしていた。
 * 線を廃止したので、その打ち消しも外している。
 */

/*
 * セクション見出し(.eyebrow + .section-title + .section-lead)と
 * セクション末尾のリンク(.section-foot)は、
 * TOP以外(BRAND・店舗一覧など)でも使うため base.css に移した。
 * ページ専用のCSSに置くと、そのページでしか読み込まれず効かなくなる。
 */

/* ---------- ヒーロー ---------- */

/*
 * 高さは下のメインビジュアルと揃える(--visual-height)。
 * 縦に連なるので、ここだけ違うと段差に見えるため。
 *
 * スローガンとマークは「ヘッダーを含めた天地の中央」に置きたいので、
 * 下側にヘッダーの高さぶんだけ余白を足して、中身を上へずらしている
 * (ずれる量はヘッダー高さの半分)。
 */
.hero {
  display: flex;
  align-items: center;
  min-height: var(--visual-height);
  padding-top: var(--space-2xl);
  padding-bottom: calc(var(--space-2xl) + var(--header-height));
}

.hero__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3xl);
  width: 100%;
  padding-inline: var(--pad-content);
}

.hero__text {
  text-align: center;
}

/*
 * スローガンとタグラインは、少し遅れて下からすっと出る。
 *
 * オープニングアニメーション(1日1回)が流れたときは、
 * 幕が引けたあとに出したいので、待つ時間を長くする。
 * その時間は opening-animation.php が --hero-delay に書き込む。
 *
 * 【重要】オープニングが流れなかった日・2回目以降の訪問では
 * --hero-delay は書き込まれない。そのとき既定値(0.2s)が使われるので、
 * スローガンは必ず出る。オープニングが再生された前提にしていない。
 */
.hero__title,
.hero__tagline {
  opacity: 0;
  animation: hero-rise 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  animation-delay: var(--hero-delay, 0.2s);
}

/* タグラインはスローガンより少しあとに続かせる */
.hero__tagline {
  animation-delay: calc(var(--hero-delay, 0.2s) + 0.15s);
}

@keyframes hero-rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 「視差効果を減らす」設定なら、動かさずそのまま出す */
@media (prefers-reduced-motion: reduce) {
  .hero__title,
  .hero__tagline {
    opacity: 1;
    animation: none;
  }
}

.hero__title {
  font: var(--type-h1);
  letter-spacing: var(--ls-display);
  color: var(--color-ink);
}

/*
 * スローガン下のタグライン。
 *
 * 文字ではなく、公式ロゴ(logo-full.svg)から切り出した図形。
 * オープニングで出るロゴのタグラインと、字形も字間も完全に一致する。
 *
 * 大きさは鯨との釣り合いで決めている。
 * 元データでは鯨が図版の全幅(viewBox 184.72)を占め、
 * タグラインを切り出した窓の幅は 159。つまり約0.861倍。
 * ヒーローの鯨は235pxなので 235 × 0.861 ≒ 202px。
 *
 * 【重要】オープニングのロゴ(opening-animation.css)も同じ縮尺で
 * 表示している。鯨の大きさを変えたら、あちらも必ず合わせること。
 * ずれると、幕が引けた瞬間に鯨とタグラインが飛び跳ねて見える。
 */
.hero__tagline {
  width: 202px;
  height: auto;
  margin-top: var(--space-md);
  margin-inline: auto;
  color: var(--color-muted);
}

/* 右側のブランドマーク(鯨)。サイズは logo-mark 側の --logo-mark-scale で決まる */
.hero__mark {
  flex-shrink: 0;
  line-height: 0;
}

.hero__mark .placeholder {
  width: 108px;
  aspect-ratio: 283.46 / 120.58;
}

/*
 * スクロールの合図。スマートフォンでだけ出す(下のメディアクエリで解禁)。
 * 縦線 + 横書きの文字を横に並べる。
 */
.hero__scroll {
  display: none;
}

.hero.is-scrolled .hero__scroll {
  opacity: 0;
  pointer-events: none;
}


/* ---------- メインビジュアル(1枚ずつ切り替わる写真) ---------- */

/*
 * 動き:
 *   写真が一定の間隔で1枚ずつ横に切り替わる。
 *   スクロールを止めたり奪ったりはしないので、普通に読み進められる。
 *   送り・一時停止のボタンで、見る人が自分で操作することもできる。
 *
 * 「何枚目を見せるか」は assets/js/mainvisual-scroll.js が決め、
 * 実際に横へ滑る動きはこちら(transition)が作っている。
 */

.mainvisual {
  /* 写真の枚数。front-page.php が実際の枚数を書き込む */
  --mv-count: 3;
  /* 1枚を見せている時間 */
  --mv-interval: 4s;
  /* 切り替わりにかける時間 */
  --mv-ease: 0.8s;
  /* 写真の高さ。ヒーローと同じ値を使う(ファイル冒頭で定義) */
  --mv-height: var(--visual-height);
}

/* ---- JSが動かなかったときの表示 ---- */

/*
 * 切り替えの制御はJSが行うため、JSが動かないと
 * 「1枚目のまま先へ進めない」状態になりかねない。
 * そこで初期状態は、写真が普通に縦へ並ぶだけの形にしておく。
 * これならどの写真も必ず見られる。
 * スライダーはJSが .is-slider を付けたときだけ有効になる。
 */
.mainvisual__track {
  display: flex;
  flex-direction: column;
}

.mainvisual__item {
  position: relative;
  height: var(--mv-height);
  overflow: hidden;
}

/*
 * 枠に合わせて写真を切り抜く。
 * --mv-focus は「切り落とすときに、写真のどこを残すか」。
 * 既定は真ん中。front-page.php の focus で1枚ずつ変えられる。
 *   例) 'center top'   … 上を残す(天井の魚を残したいときなど)
 *       '30% center'   … 左寄りを残す
 */
.mainvisual__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--mv-focus, center);
}

.mainvisual__item .placeholder {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border: 0;
}

/* ---- スライダーが有効なとき ---- */

.mainvisual.is-slider .mainvisual__stage {
  position: relative;
  height: var(--mv-height);
  overflow: hidden;
}

.mainvisual.is-slider .mainvisual__track {
  flex-direction: row;
  height: 100%;
  will-change: transform;
  /*
   * 切り替えの動き。
   * JSは「何枚目か」を指示するだけで、横へ滑る動きはここが作る。
   * 最初と最後をゆるめ、中間を速くすることで、滑らかに横移動して見える。
   */
  transition: transform var(--mv-ease) cubic-bezier(0.65, 0, 0.35, 1);
}

.mainvisual.is-slider .mainvisual__item {
  /* 1枚で画面いっぱい。縮まないよう flex: 0 0 で固定する */
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
}

/*
 * 「視差効果を減らす」設定の環境では、JS側がスライダーを有効にしない。
 * その結果、写真は縦に並んだ普通の表示になる。
 */


/* ---- 写真の上に重なる操作まわり ---- */

/*
 * 見出し・進捗バー・送りは、写真とは別の層に置いている。
 * 写真が横に滑っても、この層は動かずその場に留まる。
 *
 * スライダーが有効なときだけ出す。
 * 写真が縦に並んでいるときは「今どれを見ているか」という
 * 考え方自体が成り立たないため。
 */
/*
 * 写真の左半分・右半分を覆う、透明な送りボタン。
 *
 * スライダーとして動いているときだけ出す。
 * JSが動かない環境では写真が縦に並ぶだけなので、押す対象が要らない。
 *
 * 重なりの順番は z-index ではなくHTMLの並び順に任せている。
 * z-index を持たせると、あとに書かれた店名の層より前へ出てしまい、
 * 店名のリンクが押せなくなる(実際に一度そうなった)。
 */
.mainvisual__half {
  display: none;
}

.mainvisual.is-slider .mainvisual__half {
  display: block;
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.mainvisual__half--prev {
  left: 0;
}

.mainvisual__half--next {
  right: 0;
}

/* キーボードで移動してきたときは、どちら側にいるか分かるようにする */
.mainvisual__half:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: -4px;
}

.mainvisual__ui {
  display: none;
}

.mainvisual.is-slider .mainvisual__ui {
  --mv-ui-pad: var(--pad-content);

  position: absolute;
  inset: 0;
  display: block;
  color: var(--color-white);
  /* 文字のない場所はクリックを写真側へ通す */
  pointer-events: none;
}

/*
 * 写真は明るいものも暗いものもあるため、
 * 下側にだけ黒をうっすら重ねて、白文字が必ず読めるようにする。
 */
.mainvisual.is-slider .mainvisual__ui::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 55%;
  background: linear-gradient(to top, rgb(0 0 0 / 55%) 0%, rgb(0 0 0 / 0%) 100%);
}

/* ---- 店名 ---- */

/*
 * 説明文ではなく、店名・プロジェクト名だけを静かに1行。
 * 写真が自力で語れないのは「どこの店か」だけなので、そこだけを添える。
 */
.mainvisual__captions {
  position: absolute;
  left: var(--mv-ui-pad);
  right: var(--mv-ui-pad);
  bottom: 104px;
}

/*
 * 全部の店名を同じ場所に重ねて置き、今の1枚ぶんだけ見せる。
 * 文字数が変わっても、下の進捗バーの位置がずれない。
 */
.mainvisual__caption {
  position: absolute;
  left: 0;
  bottom: 0;
  max-width: 720px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  pointer-events: none;
}

.mainvisual__caption.is-current {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/*
 * 店名。ブランド名・店名に使っている Name-San(ゴシック20px)。
 * 明朝の見出しにすると「宣言」になってしまうので、
 * 名前を添えているだけ、という佇まいにしている。
 */
.mainvisual__name {
  display: inline-block;
  font: var(--type-name);
  letter-spacing: var(--ls-heading);
  color: var(--color-white);
  text-decoration: none;
}

/*
 * リンクのときだけ、下線がゆっくり伸びる。
 * 常時下線を引くと主張が強くなるため、触れたときだけ出す。
 */
a.mainvisual__name {
  position: relative;
}

a.mainvisual__name::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 1px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.4s ease;
}

a.mainvisual__name:hover::after {
  transform: scaleX(1);
}

/* ---- 下段(進捗バー + 送り) ---- */

.mainvisual__foot {
  position: absolute;
  left: var(--mv-ui-pad);
  right: var(--mv-ui-pad);
  bottom: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2xl);
}

.mainvisual__progress {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex: 1 1 auto;
  max-width: 60%;
}

/*
 * 1本が写真1枚。
 * 細い線を敷き、今見ている1本の中を白が左から右へ伸びていく。
 * 伸びきるタイミングが次の写真に切り替わるタイミングと一致するので、
 * 「あとどれくらいで変わるか」が見て分かる。
 */
.mainvisual__progress-item {
  position: relative;
  flex: 1 1 0;
  height: 1px;
  background-color: rgb(255 255 255 / 35%);
}

.mainvisual__progress-item::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 100%;
  background-color: var(--color-white);
  transform: scaleX(0);
  transform-origin: left center;
}

/* 見終わった写真の線は、伸びきったままにしておく */
.mainvisual__progress-item.is-done::after {
  transform: scaleX(1);
}

/* 今見ている写真の線が、表示時間をかけて伸びる */
.mainvisual__progress-item.is-current::after {
  animation: mainvisual-progress var(--mv-interval) linear forwards;
}

/* 一時停止中は、線の伸びも止める */
.mainvisual.is-paused .mainvisual__progress-item.is-current::after {
  animation-play-state: paused;
}

@keyframes mainvisual-progress {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.mainvisual__controls {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  pointer-events: auto;
}

.mainvisual__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xs);
  border: 0;
  background: none;
  color: var(--color-white);
  cursor: pointer;
  opacity: 0.75;
  transition: opacity 0.3s ease;
}

.mainvisual__nav:hover {
  opacity: 1;
}

.mainvisual__nav svg {
  width: 40px;
  height: 12px;
}

.mainvisual__nav--play svg {
  width: 12px;
  height: 14px;
}

/*
 * 一時停止ボタンの中身は「停止」と「再生」の2つ入っていて、
 * 状態に応じて片方だけを見せる。
 * 動いている間は「止める」、止まっている間は「動かす」を出す。
 */
.mainvisual__icon-play {
  display: none;
}

.mainvisual.is-paused .mainvisual__icon-pause {
  display: none;
}

.mainvisual.is-paused .mainvisual__icon-play {
  display: block;
}


/* ---------- イントロ ---------- */

.intro {
  /*
   * 上だけ区切りの2倍。
   *
   * すぐ上のメインビジュアルは画面の端まで写真を敷く帯で、
   * .section ではないので自分の下余白を持っていない。
   * つまりこの padding-top が、写真と見出しのあいだの空きのすべて。
   * ふつうの区切りと同じにすると、写真に文字が貼り付いて見える。
   */
  padding-top: calc(var(--rule-section) * 2);
  padding-bottom: var(--rule-section);
}

/* ページ本来の見出し(h1)。Figmaの H1-Serif */
.intro__lead {
  font: var(--type-h1);
  letter-spacing: var(--ls-display);
  /* 見出し → 中身。全ページ共通の24px(tokens.css の --rule-head) */
  margin-bottom: var(--rule-head);
}

/* 見出しの下のリード文。全ページ共通で Lead Body(16px) */
.intro__body {
  font: var(--type-body);
  letter-spacing: var(--ls-body);
  color: var(--color-ink);
  /*
   * 下の空きは持たない。
   * すぐ下の .section-foot が自分の上の空きを持っているので、
   * ここでも持つと二重になる。
   */
}


/* ---------- ニュース ---------- */


/* ---------- 事業領域 ---------- */

.business__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

.business-item__thumb {
  /* 正方形。広い画面も狭い画面も同じ形 */
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background-color: var(--color-grayge);
}

/* カード全体がリンク。中身は縦に積むだけ */
.business-item__link {
  display: block;
}

/* 見出しの中の通し番号。BUSINESSページの .area__num と同じ空け方 */
.business-item__num {
  margin-right: 0.8em;
}

/* 明朝ではなくゴシックの24px(Name-San)。BRANDページの店名と同じ */
.business-item__title {
  /* 写真 → その説明。全ページ共通(tokens.css の --rule-caption) */
  margin-top: var(--rule-caption);
  font: var(--type-name);
  letter-spacing: var(--ls-heading);
}

/* 英字の領域名。原稿が入ったときだけ出る */
.business-item__en {
  /* 写真 → その説明。全ページ共通(tokens.css の --rule-caption) */
  margin-top: var(--rule-caption);
  font: var(--type-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  color: var(--color-ink);
}

/* 英字が入っているときは、日本語側の上の空きを詰める */
.business-item__en + .business-item__title {
  margin-top: var(--space-2xs);
}

/* 丸印は狭い画面でだけ出す(下のメディアクエリで解禁) */
.business__dots {
  display: none;
}


/* ---------- ブランドと店舗 ---------- */

.brands__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}

.brand-card__thumb {
  /* 5:6の縦長。広い画面も狭い画面も同じ形 */
  aspect-ratio: 5 / 6;
  overflow: hidden;
  background-color: var(--color-grayge);
}

/* BRANDページのブランド名と同じ Name-San */
.brand-card__name {
  /* 写真 → その名前。全ページ共通(tokens.css の --rule-caption) */
  margin-top: var(--rule-caption);
  font: var(--type-name);
  letter-spacing: var(--ls-heading);
}

/*
 * ブランド名のすぐ下に添える一行。
 * 名前とひとまとまりに見せたいので、空きはほぼ持たせない。
 * 文字に付く行送りぶんが加わって、見た目は約12px になる。
 */
.brand-card__copy {
  margin-top: var(--space-2xs);
  font: var(--type-caption);
  letter-spacing: var(--ls-caption);
  color: var(--color-ink);
}

/*
 * カード下。店舗数と屋号一覧、その下に「ブランドを見る」。
 *
 * 以前は左右に振り分けていたが、TOPのリンクは全部左端にそろえる方針にした。
 * 縦に積むことで、見出し・本文・リンクの左端が1本の線に乗る。
 * 屋号の一覧も幅をまるごと使えるので、長い屋号が途中で折り返さない。
 */
.brands__foot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
  margin-top: var(--rule-row);
}

/* 屋号の一覧は本文の幅をまるごと使う */
.brands__namelist {
  align-self: stretch;
}

/* リンクは右端へ。幅いっぱいには伸ばさない(押せる範囲は文字のぶん) */
.brands__link {
  align-self: flex-end;
}

/*
 * 「全85店舗 / 全国5エリア」。
 * 下の屋号一覧とはひとまとまりなので、空きは持たせない。
 * 文字に付く行送りぶん(約10px)だけが残り、ふつうの改行に見える。
 */
.brands__namelist-title {
  font: var(--type-caption);
  /* 下の屋号一覧と続けて1つのかたまりに見せるので、行送りもそろえる */
  line-height: 2;
  letter-spacing: var(--ls-caption);
  color: var(--color-text-sub);
}

/*
 * 屋号は全角スペース区切り。折り返しても読めるよう行間を広めに。
 * 幅は制限しない。本文の左右いっぱいまで使わせて、行数を減らす。
 */
.brands__namelist-body {
  font: var(--type-caption);
  line-height: 2;
  letter-spacing: var(--ls-caption);
  /* 1行目(店舗数)と同じグレー。2段階に分けず、ひとかたまりで見せる */
  color: var(--color-text-sub);
}

.brands__link {
  flex-shrink: 0;
}


/* ---------- 採用 ---------- */

/* 地色は敷かない。写真は背景が透けたまま見せる */
/*
 * 採用の写真帯。
 *
 * 写真の並べ方・形・切り取り位置、スローガンの重ね方は
 * layout.css の .photo-strip に持たせてある。
 * RECRUITトップのヒーローと同じ形(横に4枚。PCは16:9、スマホは正方形)なので、
 * 形は上書きしていない。
 *
 * 上書きしているのは、文字を重ねるための2つだけ。
 *   shade … 白ヌキのスローガンが読めるように下を沈める
 *   color … スローガンの色(SVGは currentColor)
 *
 * 置き場所は共通の初期値(帯の下のほう)のまま。RECRUITのヒーローと同じ。
 */
.recruit__visual {
  --photo-strip-shade: .55;

  color: var(--color-white);
}

.recruit__visual .placeholder {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border: 0;
}

/*
 * 採用の読み進めリンクは .section-foot(TOP共通)を使う。
 * 以前はここだけ中央寄せの青いボタンだったが、
 * TOPのリンクは全部右端にそろえる方針にしたため専用の指定はやめた。
 *
 * 下(お問い合わせ帯との間)は帯の側で持っているのでここでは足さない。
 * → layout.css の .contact を参照。
 */


/* お問い合わせ帯は複数ページで使う共通パーツのため layout.css に移動した */


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

@media (max-width: 768px) {
  .brands__grid {
    grid-template-columns: repeat(2, 1fr);
    /*
     * 2列になると1枚が画面の半分以下になり、
     * 24pxの間はそのぶん名前の入る幅を削ってしまう。
     * 「ひとつのコンセプト」のような長い名前が折り返すので、
     * 列の間だけ詰めて、1枚の幅に回す。
     * 上下は写真どうしが続けて見えないよう、24pxのまま残す。
     */
    column-gap: var(--space-xs);
  }

  /*
   * 事業領域を、横スクロールの1枚ずつ送りにする。
   *
   * 縦に3つ積むと画面が長くなるだけで、
   * 「3つの領域がある」というまとまりが見えなくなる。
   * 左右に次と前の写真をのぞかせることで、
   * 続きがあることが一目で伝わる。
   *
   * 送りはブラウザの標準機能(スクロールスナップ)に任せている。
   * 指を離すと自動で1枚の位置に吸い付くので、
   * 動きの制御をJavaScriptで書く必要がない。
   * JSは下の丸印を塗り替えているだけで、動かなくてもスクロールはできる。
   */
  .business__grid {
    /* 1枚の幅。小さくするほど、両隣が大きくのぞく */
    --card-w: 78vw;

    display: flex;
    grid-template-columns: none;
    gap: var(--space-md);

    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* 慣性スクロールを効かせる(iOS) */
    -webkit-overflow-scrolling: touch;

    /*
     * 左右に余白を作って、1枚目と最後の1枚も中央で止まるようにする。
     * この余白が無いと、端の1枚だけ寄って止まってしまう。
     */
    padding-inline: calc((100% - var(--card-w)) / 2);

    /* セクションの左右余白を打ち消して、画面の端まで使う */
    margin-inline: calc(var(--gutter) * -1);
    padding-block: 0;

    /* スクロールバーは出さない */
    scrollbar-width: none;
  }

  .business__grid::-webkit-scrollbar {
    display: none;
  }

  .business-item {
    flex: 0 0 var(--card-w);
    scroll-snap-align: center;
    text-align: center;
  }

  /*
   * 中央以外の写真は少し沈ませる。
   * どれを見ているのかが迷わず分かるようにするため。
   */
  .business-item__thumb {
    transition: opacity 0.4s ease;
  }

  .business-item:not(.is-current) .business-item__thumb {
    opacity: 0.45;
  }

  /* ---- 何枚目かを示す丸印 ---- */

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

@media (max-width: 768px) {
  /*
   * スマートフォンでは、画面の高さいっぱい「弱」にする。
   *
   * ぴったり100%にすると次のセクションが1ミリも見えず、
   * 下に続きがあることが伝わらない(スプラッシュ画面に見えてしまう)。
   * 少しだけ低くして、写真の上端をのぞかせている。
   * のぞく量は --hero-peek で調整する。
   *
   * 高さの単位は svh(下の .hero を参照)。
   */
  .hero {
    /*
     * 下からのぞく次のセクションの高さ。
     * cm はCSSでは「1cm = 約38px」として扱われる決まりの単位で、
     * 機種によらず同じ見え方になる(実際の定規の1cmとは厳密には別物)。
     * 増やしたいときは 1.5cm のように書くか、38px のように直接書く。
     */
    --hero-peek: 1cm;

    position: relative;

    /*
     * 【重要】dvh は使わないこと。
     *
     * dvh は「いま実際に見えている高さ」を指す単位で、
     * スマートフォンでスクロール中にアドレスバーが出入りするたび値が変わる。
     * するとこのヒーローの高さがそのたびに計算し直され、
     * 天地中央に置いたスローガンと、下端に置いた「SCROLL」の距離が
     * スクロールのたびに伸び縮みして見える。
     *
     * svh は「アドレスバーが出ているときの高さ」で固定なので、
     * スクロール中に値が変わらない。
     * 1行目の vh は svh に対応していないブラウザ用の控え。
     * (COMPANYページの青ヒーローでも同じ理由で dvh を避けている)
     */
    min-height: calc(100vh - var(--hero-peek));
    min-height: calc(100svh - var(--hero-peek));
    padding-block: var(--space-2xl);
  }

  /*
   * 鯨とスローガンを1つの塊として、天地の中央に置く。
   * オープニングで「鯨 + POTOMAK」が出ていた位置に、
   * そのまま「鯨 + スローガン」が収まるようにするため。
   */
  .hero__inner {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-xl);
    padding-inline: var(--gutter);
  }

  /* 鯨は上に置いて左右中央。大きさはPCと同じ */
  .hero__mark {
    order: -1;
  }

  /* ---- スクロールの合図 ---- */

  .hero__scroll {
    position: absolute;
    left: 50%;
    bottom: var(--space-xl);
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: var(--space-md);
    /*
     * トークンの Caption(12px)より小さい。
     * 案内であって読ませる文字ではないので、あえて一段下げている。
     * 字間は広いままにして、小さくても記号として読めるようにする。
     */
    font: var(--type-caption);
    font-size: 10px;
    letter-spacing: var(--ls-eyebrow);
    color: var(--color-text-weak);
    /* 出るのはスローガンより後。急かして見えないように一番最後に置く */
    opacity: 0;
    animation: hero-rise 0.9s ease forwards;
    animation-delay: calc(var(--hero-delay, 0.2s) + 0.6s);
    transition: opacity 0.4s ease;
  }

  /* 文字の左に立つ細い縦線 */
  .hero__scroll::before {
    content: "";
    width: 1px;
    height: 48px;
    background-color: var(--color-border);
  }

  @media (prefers-reduced-motion: reduce) {
    .hero__scroll {
      opacity: 1;
      animation: none;
    }
  }

  /*
   * スマートフォンでは縦長になる。
   *
   * 横長のまま幅に合わせると帯のように薄くなり、
   * 写真に描いた線(人物・魚・タコ)がほとんど見えなくなるため。
   * 比率はファイル冒頭の --visual-ratio で決めている(ヒーローと共通)。
   *
   * 写真そのものは差し替えず、はみ出した部分を切り落として見せている
   * (object-fit: cover)。どこを残すかは --mv-focus で決める。
   */

  /* 画面が狭いので、文字とボタンの左右の余白を詰める */
  .mainvisual.is-slider .mainvisual__ui {
    --mv-ui-pad: var(--gutter);
  }

  .mainvisual__captions {
    bottom: 88px;
  }

  .mainvisual__foot {
    bottom: 32px;
    gap: var(--space-md);
  }

  .mainvisual__progress {
    max-width: none;
  }

  .mainvisual__nav svg {
    width: 28px;
  }
}

/*
 * ブランドは狭い画面でも2列のまま。
 * 1列にすると1枚が画面幅いっぱいになり、
 * 4ブランドを見比べる場所ではなく1枚ずつ読む場所に変わってしまう。
 * (そのため 520px の指定は置いていない)
 *
 * ニュースの並び(.news__grid)は base.css に移した。
 * TOPだけでなく、記事下の「ほかのニュース」でも同じ形を使うため。
 */