/**
 * 手書きの追加スタイル。
 *
 * assets/css/<slug>.css は build-theme.mjs が capture から**毎回作り直す**ので、
 * そこへ書いた変更は消える。再現に無いもの（こちらで足した表示）や、
 * デザインの手直しはこのファイルに書く。
 *
 * 読み込み順は vendor CSS → ページ CSS → **このファイル**（inc/assets.php）。
 * 色やフォントはページ CSS の :root が持っているトークンを使える。
 *   --color-text / --color-primary / --color-accent / --color-muted
 *   --color-border / --color-surface / --color-white / --font-base
 *
 * 再現ページの CSS は `.sd` を伴うセレクタで閉じているので、
 * ここで普通のクラス名を使っても衝突しない。
 */

/**
 * メンバーカルーセルの写真の見せ方。
 *
 * 写真（8192x5464 = 縦横比 1.499）と枠（480x320 = 1.5）の比がほぼ同じなので、
 * background-size: cover のままではトリミングが起きない。右に写り込んだ柱を
 * 外すには拡大するしかないので、拡大率と位置を写真ごとに受け取る。
 *
 * 値は config/member-crops.json → studio/about/carousel.json →
 * assets/js/carousel.js が要素の custom property に書き込む。
 * 変数が無いときは vendor CSS と同じ cover / 50% に戻る。
 *
 * ここでこの要素だけを狙っているのは、ページ CSS が個別に指定している
 * background-position を壊さないため（一律に書くと上書きしてしまう）。
 */
.sd.about-members__slide-image::before {
  background-size: var(--ec-bg-size, cover);
  background-position: var(--ec-bg-position, 50% 50%);
}

/* News が 1 件も無いときの案内（inc/news-render.php） */
.ec-news-empty {
  width: 100%;
  margin: 0;
  padding: 48px 0 96px;
  color: var(--color-muted, #888);
  font-family: var(--font-base, sans-serif);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.8;
  text-align: left;
}

/**
 * JS が無いときだけ出る「次のページ」（inc/news-render.php の noscript）。
 *
 * 「もっとみる」は button なので JS 無しでは押せない。行き止まりにしないための
 * 素のリンクで、見た目は「もっとみる」に寄せた黒い丸ボタン。
 */
.ec-news-next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 96px;
  padding: 16px 40px;
  border-radius: 999px;
  background: var(--color-text, #111111);
  color: var(--color-white, #ffffff);
  font-family: var(--font-base, sans-serif);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
}

/**
 * ヒーローの見出しとリード文を写真の上に載せる（全画面幅）。
 *
 * 写真（home-hero__visual）は上 6 割ほどが人物の写っていない背景なので、
 * そこへ見出しの塊（home-hero__head）を載せる。ライブは縦に並べているので
 * ここは意図的な差分（README「ライブと意図的に変えたところ」）。
 *
 * 重ね方は position: absolute ではなく grid。同じセルに 2 つ置くだけなので、
 * 見出しの高さを CSS に焼き込まずに済み、行の高さは写真側が決めてくれる。
 *
 * 以前は 1141px 以上だけに効かせていた。狭いところでは写真の空きが足りず
 * 人物に文字がかかったためだが、その後
 *   ・見出しを 1 行に収まる流体サイズにした（下の home-hero__title-text）
 *   ・写真の高さを比率＋下限で持つようにした（下の min-height）
 * の 2 つで空きが確保できるようになったので、依頼によりスマホにも広げた。
 */
.sd.home-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  /* 元は align-items:center。そのままだと見出しが写真の高さの真ん中に来る */
  align-items: start;
}

.sd.home-hero__head,
.sd.home-hero__visual {
  grid-area: 1 / 1;
  /**
   * ライブの縦位置は margin-top で作られていて、**写真は 48px（540px 以下）/ 96px、
   * 見出しは 72px（540px 以下）/ 96px** と値が違う。重ねると、この差 24px が
   * そのまま見出しを下へ押し下げ、狭い幅では人物との余裕を 10px まで削っていた。
   *
   * 2 つとも 0 にして、写真の位置は .home-hero の padding-top、
   * 写真の上端からの内寄せは .home-hero__head の padding-top で明示的に作る。
   */
  margin-top: 0;
}

/**
 * 写真の高さ。
 *
 * 写真は cover の下端そろえなので、枠が横に広いほど上（人物のいない背景）から
 * 削られる。高さを固定すると広い画面で空きが消えて見出しが顔にかかる
 * （1280px で 284px ある余白が、752px 固定だと 1920px では 41px になっていた）。
 * 1280px 表示のときの枠（1232 x 752）の比を保てば、どの幅でも
 * トリミングの具合＝見出しの余白が同じになる。
 *
 * 下限は逆向きの手当て。狭い画面では比から出る高さが小さくなりすぎて
 * （375px なら 205px）文字を載せる空きが無くなるので、66vw ＝ 幅の 2/3 を
 * 目安に持ち上げる。
 *
 * 540px という値は実測から決めた。人物の頭は写真の上から 47% の位置に
 * あり、文字の下端がもっとも下がるのは 541px 幅（見出しとリード文が
 * どちらも 2 行で、かつライブの 540px ブレークポイントを抜けてリード文の
 * 字が一段大きくなる）。ここで 40px の余裕が残る高さが 540px。
 * 上限 752px はライブの高さ（＝ 1232px 幅で比と一致する点）。
 */
.sd.home-hero__visual {
  aspect-ratio: 1232 / 752;
  height: auto;
  min-height: clamp(540px, 66vw, 752px);
}

/**
 * 見出しの塊を写真より手前に出して、写真の内側に寄せる。
 *
 * **margin-top は触らないこと。** 写真（home-hero__visual）も同じ margin-top を
 * 持っているので、これが 2 つを同じ高さから始めるための土台になっている。
 * 0 にすると見出しだけが持ち上がり、写真の上端より上に飛び出す。
 * 写真の上端からの内寄せは padding-top だけで作る。
 *
 * 左右は「外余白 ＋ 写真の縁からの内寄せ」。写真はレールにそろえてあるので、
 * この足し算でちょうど写真の内側に入る。
 */
.sd.home-hero__head {
  z-index: 1;
  /* 6.3vw は 1141px でちょうど 72px（重ね合わせを入れた当初の値）になる傾き */
  padding-top: clamp(24px, 6.3vw, 72px);
  padding-bottom: 0;
  /**
   * 左右は写真の縁からの内寄せだけ。外余白は .home-hero が持っている。
   *
   * ここに外余白を足してはいけない（二重になる）。また、レールの規則が
   * .sd.home-hero__head に padding-left/right を当てていた時期があり、
   * そちらがファイルの後ろにあるぶん勝ってこの内寄せが消えていた。
   * レール側は .sd.home-hero に付け替えてあるので、いまは競合しない。
   */
  padding-left: clamp(12px, 2vw, 24px);
  padding-right: clamp(12px, 2vw, 24px);
}

/**
 * 見出しの箱を列いっぱいに。
 *
 * ライブは 1140px 以下で width: 520px を持っている。下の流体サイズは
 * 「レールの幅に対して 1 行で収まる」ことを条件に決めてあるので、
 * 箱が 520px で止まっていると計算より早く折り返してしまう。
 */
.sd.home-hero__title {
  width: 100%;
  max-width: 100%;
}

/**
 * リード文と見出しの間隔。
 *
 * ライブは縦並び前提で 840px 以下 48px / 540px 以下 24px と開いている。
 * 写真に載せるとその余白ぶん下がって人物に近づくので、詰めて流体にする。
 */
.sd.home-hero__lead {
  margin-top: clamp(12px, 1.6vw, 24px);
}

/**
 * ヒーローの上の余白。
 *
 * 元は margin-top 72px（540px 以下は 48px）。依頼により margin は 0 にする。
 *
 * padding-top は、上の margin-top: 0 で失われた写真の縦位置を作り直すもの。
 * fixed ヘッダー（89〜109px）の下に写真の上端が来る必要があるので下限 96px、
 * 13vw は 1292px でライブと同じ 168px に達する傾き。
 */
.sd.home-hero {
  margin-top: 0;
  padding-top: clamp(96px, 13vw, 168px);
}

/**
 * トップページのイントロ（inc/intro.php / assets/js/intro.js）。
 *
 * 白幕の中央でロゴが左から現れ、そのままヘッダーのロゴの位置へ寄って消える。
 * 「左から現れる」は見出しのタイピングと揃えてあり、2 つで 1 つの流れに見せている。
 *
 * 元サイトには無い演出なので、ここは丸ごと意図的な差分。
 */

/**
 * 出す前に伏せておくもの。head の inline CSS と同じ指定をここにも置いておく。
 *
 * ec-*-wait は「その要素をまだ出さない」印で、intro.js が
 * 写真 → 見出し → リード文 の順に外していく。
 */
.ec-title-wait .sd.home-hero__title-text {
  visibility: hidden;
}

.ec-hero-wait .sd.home-hero__visual,
.ec-lead-wait .sd.home-hero__lead {
  opacity: 0;
}

/**
 * 打っている間は transition を切る。
 *
 * Studio の共通ルールが `.sd` に `transition-property: all`（0.8s）を当てているため、
 * そのままだと visibility: hidden → visible が 0.8 秒かけて切り替わり、
 * 打ち始めの数文字が見えない。1 文字ごとの幅の変化も同じ理由で滑ってしまう。
 * ec-typing は unhide より先に付けているので、切り替えの瞬間にはこれが効いている。
 */
.sd.home-hero__title-text.ec-typing {
  transition: none;
}

.ec-intro {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
}

/**
 * 白幕は別の層にしてある。
 *
 * .ec-intro ごとフェードするとロゴも一緒に薄くなり、ヘッダーへ寄っていく
 * 途中でロゴが消えてしまう。消すのは背景だけにして、ロゴは最後まで出したまま
 * ヘッダーのロゴと入れ替える。
 */
.ec-intro__bg {
  position: absolute;
  inset: 0;
  background: var(--color-white, #fff);
  transition: opacity 420ms ease;
}

.ec-intro.is-leaving .ec-intro__bg {
  opacity: 0;
}

.ec-intro__logo-wrap {
  position: relative;
  width: min(420px, 56vw);
  will-change: transform;
}

.ec-intro__logo {
  display: block;
  width: 100%;
  height: auto;
  /* 右側を隠した状態から始める */
  clip-path: inset(0 100% 0 0);
}

.ec-intro.is-revealing .ec-intro__logo {
  animation: ec-intro-wipe 520ms cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

@keyframes ec-intro-wipe {
  to { clip-path: inset(0 0 0 0); }
}

/* ロゴの現れる縁を追い越していく青い線 */
.ec-intro__sweep {
  position: absolute;
  inset: -18% -6%;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(
    90deg,
    transparent 46%,
    var(--color-primary, #185b99) 50%,
    transparent 54%
  );
}

.ec-intro.is-revealing .ec-intro__sweep {
  animation: ec-intro-sweep 640ms cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

@keyframes ec-intro-sweep {
  0%   { transform: translateX(-100%); opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateX(100%); opacity: 0; }
}

/**
 * 打っている間の入れもの（assets/js/intro.js が作る）。
 *
 * 見出しは Studio の .sd.text ＝ display: flex なので、直下に 2 つ置くと
 * 別々の flex アイテムになって独立に折り返す。ec-typing__line で包んで
 * **flex アイテムを 1 つに保ち**、その中を普通のインライン内容にしている。
 *
 * font / color を継がせているのは、Studio の共通リセットが素の span に
 * sans-serif と #333 を当てているため。
 */
.sd.home-hero__title-text .ec-typing__line,
.sd.home-hero__title-text .ec-typing__rest {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  word-spacing: inherit;
  text-transform: inherit;
  text-align: inherit;
}

/**
 * まだ打っていないぶん。
 *
 * 見えないだけで場所は取るので、折り返しは最初から最終形のまま動かない。
 * display は変えない。inline-block などにするとそこが改行の機会になり、
 * 単語の途中で折り返せてしまう。
 */
.sd.home-hero__title-text .ec-typing__rest {
  visibility: hidden;
}

/* 動きを減らす設定では演出そのものを出さない（JS 側でも止めている） */
@media (prefers-reduced-motion: reduce) {
  .ec-intro { display: none; }
  .ec-title-wait .sd.home-hero__title-text { visibility: visible; }
  .ec-hero-wait .sd.home-hero__visual,
  .ec-lead-wait .sd.home-hero__lead { opacity: 1; }
}

/**
 * 写真とリード文のフェード。
 *
 * どちらも Studio の出現アニメーション（.appear）を持っているが、それは読み込み直後に
 * 走ってしまい、白幕の裏で出きってしまう。それだと「写真 → 見出し → リード文」の順に
 * ならないので、ec-hero-wait / ec-lead-wait で伏せておいて順に外す（assets/js/intro.js）。
 *
 * transition を .ec-anim 側に置いてあるのは、印を外した瞬間にも効いている必要があるため
 * （transition は変化後のスタイルから読まれる）。ec-anim は全部出し終えてから外す。
 * 時間は intro.js の HERO_FADE / LEAD_FADE と揃えること。
 */
.ec-anim .sd.home-hero__visual,
.ec-anim .sd.home-hero__lead {
  transition: opacity 600ms ease 0s;
}

/**
 * note カードのあいだに余白を作る。
 *
 * ライブは gap が 0 で、3 枚のサムネイルの縁がぴったり接している。
 * Studio はカード幅を calc(33.3% - (--gap-h-… * 0.667)) で持っているので、
 * gap と一緒に変数へ同じ値を入れれば幅は自動で詰まり、
 * 3 枚 + すき間 2 つ = 列の幅ちょうどに収まる。
 *
 * 840px 以下は 1 枚ずつ縦に積まれ、上境界線と 24px の余白で区切られる作りなので
 * 触らない（ここで gap を足すと二重に空く）。
 */
@media screen and (min-width: 841px) {
  .sd.home-stories__note-list {
    gap: 24px;
    --gap-h-home-stories__note-list: 24px;
  }
}

/**
 * ロゴ脇の「Career site」。
 *
 * 元は 14px ボールドの黒で、ロゴタイプ本体より視覚的に重く、第二のブランド名の
 * ように見えていた。ラベルはロゴに従属させるのが定石なので、小さく・細く・
 * 大文字レタースペースにしてグレーへ落とす。文言そのものは管理画面から変えられる
 * （config/texts.json / サイト文言）ので、ここでは見た目だけを指定する。
 */
/**
 * ロゴを流体にする。
 *
 * ヘッダーの .site-header__logo は 1141px 以上で height: 20px を持っており、
 * 中の <img> はその 100%。器のほうも開放しないと大きくならない。
 */
.sd.site-header__logo {
  height: auto;
}

.sd.site-header__logo-mark,
.sd.site-footer__logo-mark {
  width: var(--ec-logo-w);
  height: auto;
}

.sd.site-header__logo-text,
.sd.site-footer__logo-text {
  font-size: clamp(11px, 10.51px + 0.1294vw, 13px);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-muted, #888);
}

/* フッターはロゴの下。6px だと詰まって見えるので少し離す */
.sd.site-footer__logo-text {
  margin-top: 10px;
}

/**
 * ヘッダーが横並びのときだけ、細い縦線で区切る。
 *
 * 1140px 以下はロゴの下へ回り込む作り（index.css の flex-direction: column）なので、
 * そこでは線を出さずフッターと同じ見せ方にする。
 * align-self: stretch はロゴの高さ（20px）に線を合わせるため。
 */
@media screen and (min-width: 1141px) {
  .sd.site-header__logo {
    gap: 12px;
  }

  .sd.site-header__logo-text {
    align-self: stretch;
    padding-left: 12px;
    border-left: 1px solid var(--color-border, #e3e3e3);
  }
}

/**
 * Message の見出しを主役にする。
 *
 * 「世代を超えた事業を創り続ける」はヒーローのリード文
 * （Building businesses that transcend generations）の日本語版で、この会社の
 * 中心にある一文。それが 616px のカラムの中で 40px にとどまっていて、
 * 隣の Message ラベルと本文に埋もれていた。
 *
 * やっていることは 3 つ。
 *   1. 2 カラム（ラベル 24% ＋ 本文）を縦積みにして、見出しを列いっぱいに解放する
 *   2. 文字を大きくする（40px → 最大 56px）
 *   3. 画面に入ったら下から迫り上がるように出す
 *
 * スクロール連動（sticky で固定して拡大していく）にしなかったのは、
 * 1 画面上でイントロが既に大きな見せ場を持っていること、sticky はページを
 * 100vh ぶん長くして求人セクションを遠ざけることの 2 つが理由。
 * 元サイトには無い演出なので、ここは意図的な差分（README）。
 */

/**
 * 縦積みにするのは 841px 以上だけ。
 *
 * 840px 以下はページ CSS が既に縦積みにしていて、本文側の margin-top 24px で
 * 間隔を作っている。そこへ gap を足すと二重に空く。
 */
@media screen and (min-width: 841px) {
  .sd.home-message__row {
    flex-direction: column;
    gap: 20px;
  }

  /* ラベルの 24% 幅と本文の flex: 1 は横並び前提の指定なので外す */
  .sd.home-message__label,
  .sd.home-message__body {
    flex: none;
    width: 100%;
    max-width: 100%;
  }
}

/**
 * 見出しの大きさ。
 *
 * 傾き 6.2vw − 2px は「つねに 1 行に収まる最大」から引いた式。全角 14 文字に
 * letter-spacing 0.05em が付くので 1 文字 1.05em ＝ 14.7em 必要で、レールは
 * 100% − 外余白×2 ＝ おおよそ 0.928 × 画面幅。24px の逃げを見て
 *   1 行に収まる上限 = (0.928 × 画面幅 − 24) / 14.7 ≒ 0.0631 × 画面幅 − 1.6
 * これをわずかに下回るのが 6.2vw − 2px。1280px で 77px（レール 1188px に対し
 * 文字幅 1138px）、1920px で 116px（レール 1782px に対し 1705px）。
 * 510px を下回ると収まらなくなるが、そこは 2 行に折り返す（下の auto-phrase）。
 * 折り返すと「創り」「続ける」のように動詞が割れる位置で切れてしまう
 * （.sd.text は word-break: break-word なので折り返し位置を選べない）。
 *
 * 下限 30px は流体スケールの最小値（config/type-scale.json）に合わせてある。
 */
.sd.home-message__heading {
  width: 100%;
  font-size: clamp(30px, calc(6.2vw - 2px), 116px);
  /**
   * 折り返すときは文節で折る。
   *
   * .sd.text は word-break: break-word ＋ overflow-wrap: anywhere なので、
   * 幅が足りないと「世代を超えた事業を創り／続ける」のように動詞の途中で切れる。
   * auto-phrase はブラウザ側の文節モデルで区切ってくれるので
   * 「世代を超えた／事業を創り続ける」になる。
   *
   * 対応していないブラウザ（Safari / Firefox）では今までどおりの折り返しに
   * 戻るだけ。overflow-wrap を normal へ戻しているのは、anywhere が残っていると
   * そちらが文節より優先されてしまうため。この見出しは一番狭い 320px でも
   * 「事業を創り続ける」8 文字（28px で 235px）が内寸 272px に収まるので、
   * はみ出す心配はない。
   */
  word-break: auto-phrase;
  overflow-wrap: normal;
}

/**
 * 下から迫り上がる出現。
 *
 * ページ CSS の `.appear` は blur(10px) ＋ opacity: 0 でふわっと出す指定なので、
 * ここで打ち消してから掛け直す。読み込み順は ページ CSS → このファイルで、
 * セレクタの詳細度も同じなので後勝ちになる。
 *
 * clip-path の下辺を 100% → 0% へ動かすと、切り取り線が文字の上から下へ抜けて
 * いき、文字は上端から現れる。これに translate の持ち上がりを足すと
 * 「下から迫り上がってくる」に見える。
 *
 * 上・左右を -0.2em 広げてあるのは、出きったあとに clip-path が残るため。
 * ちょうど 0% だと端数の丸めで字の縁が 1px 欠けることがある。下辺だけは
 * 切り取り線そのものなので 0% のまま。
 *
 * 動かすのに transform ではなく translate（単独プロパティ）を使っているのは、
 * Studio の .appear が同じプロパティを使っていて、JS 無効時のフォールバック
 * （inc/assets.php の noscript）がそれを戻す作りになっているため。
 */
.sd.home-message__heading {
  clip-path: inset(-0.2em -0.2em 0% -0.2em);
  transition-property: clip-path, translate, opacity, filter;
  transition-duration: 900ms;
  transition-delay: 120ms;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

.sd.home-message__heading.appear {
  filter: none;
  opacity: 1;
  clip-path: inset(-0.2em -0.2em 100% -0.2em);
  translate: 0 0.3em;
}

/* 動きを減らす設定では、最初から出しておく */
@media (prefers-reduced-motion: reduce) {
  .sd.home-message__heading,
  .sd.home-message__heading.appear {
    clip-path: none;
    translate: none;
  }
}

/**
 * Values の左の列（ラベルと写真）を貼り付けたままにする。
 *
 * 左が「Values」＋写真（320x426）、右が 4 つの項目＋About ボタンで、右は 907px ある。
 * スクロールすると左が先に流れていって、Value 3・4 を読むころには
 * 左が空っぽの列になっていた。留めておけば、4 つを読むあいだ
 * ずっとラベルと絵が視界に残る。
 *
 * position: sticky で足りる（JS は要らない）。留まれる長さは
 * 右の高さ 907px − 写真 426px ＝ 481px ぶん。
 *
 * 841px 以下はページ CSS が縦積みにしていて（flex-direction: column）、
 * 写真が全幅の帯になる。そこで貼り付けても意味がないので効かせない。
 *
 * 元サイトには無い演出なので、ここは意図的な差分（README）。
 */
@media screen and (min-width: 841px) {
  /**
   * 留める位置は「ヘッダーの下の残りの高さの、まんなか」。
   *
   * ヘッダーは position: fixed なので、その下から画面下までが実際に見えている
   * 範囲（高さは --ec-header）。そこへ左の列を中央で置く。
   *   左の列の高さ = ラベル ＋ 行の margin-top 96px ＋ 写真 426px
   *   留める位置   = H + (100vh − H − 左の列の高さ) / 2
   *                = 50vh + H / 2 − 左の列の高さ / 2
   *
   * ラベルは流体（config/type-scale.json の 24px の行）なので高さも変わる。
   * **この clamp は type-scale.json の "24" と同じ値を書き写したもの。**
   * 尺度を変えたらここも合わせること。行間はページ CSS の 1.4。
   *
   * 写真の高さ 426px は固定のままにしてある（幅だけ広げる）。ここを変えると
   * 下の margin-bottom と margin-top も連動して直す必要があるため。
   *
   * 画面が低いと計算値がヘッダーに潜るので、ヘッダー ＋ 24px より上には行かせない。
   */
  .sd.home-values__inner {
    --ec-values-label-h: calc(clamp(26px, 24.06px + 0.5178vw, 34px) * 1.4);

    /**
     * 写真の幅と高さ。ライブの 320x426（縦横比 0.751）をそのまま拡大する。
     *
     * レールが広がったぶん写真も大きくしたいが、**高さを固定したまま幅だけ
     * 伸ばすと横長に化ける**（320x426 の縦長が 480x426 の横長になっていた）。
     * 幅を決めて高さを比率から出すことで、どの画面幅でも元の縦横比を保つ。
     *
     * 幅を % ではなく vw で持っているのは、下の貼り付きの計算（ラベルの
     * margin-bottom / 行の margin-top / 中央寄せ）で高さを長さとして
     * 使う必要があるため。% だと calc に持ち込めない。
     * 20vw はレール（≒ 0.928 x 画面幅）の約 21.5%。
     *
     * 1.33125 = 426 / 320。幅が下限 320px のとき高さはちょうど 426px になる。
     *
     * 一時は集合カットに合わせて幅だけ広げていたが、写真を 1 人が主役の
     * カットに戻したので、依頼により元の縦長（幅と高さが同じ比）に戻した。
     */
    --ec-values-photo-h: calc(clamp(320px, 20vw, 400px) * 1.33125);
    --ec-values-photo-w: clamp(320px, 20vw, 400px);
    --ec-values-top: max(
      calc(var(--ec-header) + 24px),
      calc(
        50vh + var(--ec-header) / 2 -
          (var(--ec-values-label-h) + 96px + var(--ec-values-photo-h)) / 2
      )
    );
  }

  /**
   * ラベルと写真は同じ変数から位置を組み立てる。
   *
   * 写真はラベルの下「ラベルの高さ ＋ 行の margin-top 96px」。
   * 別々の値で書くと、画面が低くて 128px の下限に当たったときに片方だけが
   * 動いて重なる。同じ変数から作れば下限でも間隔は保たれ、貼り付き**始める**
   * 瞬間もそろう（ラベルは inner の上端、写真は row の上端が基準で、その差が
   * ちょうど「ラベルの高さ ＋ 96px」のため）。
   */
  .sd.home-values__label {
    position: sticky;
    top: var(--ec-values-top);
    /**
     * 貼り付きが**終わる**瞬間もそろえる。
     *
     * sticky が離れるのは「自分の margin box の下端が、親の内容の下端に着いたとき」。
     * ラベルと写真（426px）は高さが違うので、素のままだとラベルのほうが
     * 380px ほど長く残り、離れていった写真がラベルの上を通り過ぎてしまう
     * （DOM 順で写真が後ろ＝手前に描かれるので、Values の字が写真に隠れる）。
     *
     * ラベルの margin box を「写真の下端まで」＝ 行の margin-top 96px ＋ 写真 426px に
     * 伸ばすと、2 つは間隔を保ったまま同時に離れ、左の列がひとかたまりで
     * 出ていく（この余白はラベルの高さに依らず 96 + 426 で決まる）。レイアウトを
     * 動かすためのものではないので、
     * 下の .home-values__row で写真の高さぶん引き戻している。
     */
    margin-bottom: calc(96px + var(--ec-values-photo-h));
  }

  /* ラベルに足した余白の打ち消し。96px − (96px + 写真の高さ) なので写真の高さぶん戻せばよい */
  .sd.home-values__row {
    margin-top: calc(-1 * var(--ec-values-photo-h));
  }

  /**
   * 貼り付けが効くのは、行が align-items: flex-start で写真を引き伸ばして
   * いないから（stretch だと高さが行いっぱいになり、動く余地が無くなる）。
   */
  .sd.home-values__visual {
    position: sticky;
    top: calc(var(--ec-values-top) + var(--ec-values-label-h) + 96px);
  }
}

/* =================================================================== *
 * リキッドなレール（コンテンツ幅）
 *
 * ライブは「ヘッダーだけが実質フル幅、本文は 960〜1184px の固定レール」
 * という作りで、1920px の画面ではロゴの左端が x=48、Jobs の左端が x=368 と
 * 320px ずれていた。これが「真ん中に寄って外の余白が目立つ」の正体。
 *
 * レールを 1 本にして、ヘッダー・本文・フッターの左端をすべてそろえる。
 * 固定幅は置かず、外余白（--ec-gutter）だけが伸縮する完全リキッド。
 *
 *   画面幅   外余白   中身の幅
 *    375px     20        335
 *   1280px     46       1188
 *   1920px     69       1782
 *   2560px     72       2416
 *
 * 元サイトには無い構成なので、ここは丸ごと意図的な差分（README）。
 * =================================================================== */

:root {
  /**
   * 外余白。3.6vw は 1280px でちょうど 46px（ライブの 48px とほぼ同じ）になる値。
   * 下限 20px はスマホで文字が縁に貼り付かない最小、上限 72px は
   * 超ワイド画面で余白が間延びしないための頭打ち。
   */
  --ec-gutter: clamp(20px, 3.6vw, 72px);

  /**
   * fixed ヘッダーの高さ。貼り付き（sticky）の逃げに使う。
   *
   * 文字が流体になったぶんヘッダーも伸縮し、841px 以上では 105〜112px の幅がある
   * （Entry ボタンのラベルがいちばん背が高い）。潜らせないよう上限に合わせてある。
   */
  --ec-header: 112px;

  /**
   * ロゴ（ワードマーク）の幅。
   *
   * 元は高さ 20px 固定で、文字だけを流体にしたぶんロゴが取り残されていた
   * （1920px でナビが 22px・Entry が 25px に対してロゴは 20px のまま）。
   *
   * 高さではなく**幅**を指定しているのは縦横比を保つため。height を決めて
   * max-width: 100% が効くと、横だけ詰まって字が潰れる。画像は 1000x189 なので
   * 高さは幅の 1/5.29 になる（130px→25px、190px→36px）。
   */
  --ec-logo-w: clamp(130px, 115.44px + 3.8835vw, 190px);
}

/**
 * レールに乗せる外枠。
 *
 * どれも元は width: 1280px / 980px などの固定値で、max-width: 100% だけが
 * 付いていた。幅を 100% に開放して、外余白を padding で作る。
 */
.sd.home-hero,
.sd.home-message,
.sd.home-stories,
.sd.home-values,
.sd.home-jobs,
.sd.home-news,
.sd.about-hero,
.sd.about-values,
.sd.about-members__head,
.sd.about-workstyle,
.sd.news-head,
.sd.site-header,
.sd.site-footer {
  width: 100%;
  max-width: 100%;
  padding-left: var(--ec-gutter);
  padding-right: var(--ec-gutter);
}

/**
 * 外枠の中の「内枠」。
 *
 * 外枠が広がっても内枠が 960px / 1040px のままだと意味がないので、
 * こちらも 100% にする。外余白は外枠が持っているため padding は足さない。
 *
 * news-head__inner は 540px 以下で width: calc(100% − 48px) になっていて、
 * 親が align-items: center なので左右 24px ずつ中央に寄っていた。ここで 100% に戻す。
 *
 * ヘッダーとフッターは外余白を .site-header / .site-footer 側が持っている
 * （padding: 24px 48px / 0 48px）。内枠に足すと二重になってレールがずれるので、
 * 上のグループではなくこちらに入れてある。
 */
.sd.home-hero__head,
.sd.home-hero__head-inner,
.sd.home-stories__inner,
.sd.home-stories__notes,
.sd.home-values__inner,
.sd.about-workstyle__inner,
.sd.about-hero__inner,
.sd.news-head__inner,
.sd.news-filter,
.sd.news-list,
.sd.site-header__inner,
.sd.site-footer__top,
.sd.site-footer__bottom {
  width: 100%;
  max-width: 100%;
}

/**
 * ヒーローの写真もレールに合わせる。
 *
 * 元は max-width: calc(100% - 48px) で中央寄せだった。外余白は .home-hero が
 * padding で持つようにしたので、写真はその内側いっぱいでよい。
 *
 * **中央寄せ（max-width ＋ justify-items: center）に戻さないこと。** 重ねている
 * 見出しは padding で内寄せを作っているので、写真だけが中央寄せで縮むと
 * 内寄せの基準がずれ、狭い幅で文字が写真の外へ数 px はみ出す。
 * 写真と見出しを同じグリッド幅にそろえておけば、内寄せぶんは必ず内側に入る。
 */
.sd.home-hero__visual {
  width: 100%;
  max-width: 100%;
}

/**
 * About の 3 つの列は、元の 1280px レールに対する比率で置き直す。
 *
 *   720 / 1280 = 56.25%   本文と写真
 *   960 / 1280 = 75%      項目リスト
 *
 * 840px 以下はページ CSS が 100% に積み直しているので触らない。
 */
@media screen and (min-width: 841px) {
  .sd.about-workstyle__text,
  .sd.about-workstyle__visual {
    width: 56.25%;
    max-width: 56.25%;
  }

  .sd.about-workstyle__list {
    width: 75%;
    max-width: 75%;
  }
}

/**
 * 長文の 1 行が伸びすぎないようにする。
 *
 * レールが 1782px まで広がると、右の列だけで 1300px 近くなる。そこへ 22px の
 * 本文を流すと 1 行 60 文字近くになり、読み返す位置を見失う。
 * 40em ＝ 全角 40 文字ぶんで頭打ちにする（em なので文字サイズに追従する）。
 *
 * 見出し・ラベル・カードのタイトルは短いので対象外。
 */
.sd.home-message__text,
.sd.home-values__item-text,
.sd.home-jobs__text,
.sd.home-stories__body,
.sd.about-values__text,
.sd.about-values__item-text,
.sd.about-workstyle__item-text {
  max-width: min(100%, 40em);
}

/**
 * ヒーローの見出しを、つねに 1 行に収まる最大の大きさにする。
 *
 * 「We are hiring Professionals」は 27 文字で、幅は文字サイズの約 15.3 倍。
 * レール（＝ 100% − 外余白×2 ≒ 0.928 × 画面幅）に対して
 *   1 行に収まる上限 = (レール − 24) / 15.3
 * これをわずかに下回るのが 5.7vw − 2px。重ねているときは左右に 24px ずつ
 * 内側へ入るぶん、そこも含めて収まる値にしてある。
 *
 * 流体スケールの表（config/type-scale.json の 60 / 64）を使わずここで指定して
 * いるのは、この 1 行に収める条件が「画面幅に対する比」でしか書けないため。
 * 表の 60px / 64px の行はヒーロー見出しにしか使われていないので、
 * ここが実質の指定になる。
 *
 * 510px を下回ると 1 行に収まらなくなり、2 行に折り返す（ライブも同じ）。
 */
.sd.home-hero__title-text {
  font-size: clamp(34px, calc(5.7vw - 2px), 120px);
}

/**
 * Values の写真を、レールの広がりに合わせて少し大きくする。
 *
 * 元は 320x426 固定。レールが 1782px まで広がると左の列だけが取り残されて
 * 見えるので大きくするが、**幅だけ伸ばすと横長に化ける**ので高さも比率で
 * 追従させる（--ec-values-photo-w / -h。定義は上の .home-values__inner）。
 */
@media screen and (min-width: 841px) {
  .sd.home-values__visual {
    width: var(--ec-values-photo-w);
  }

  .sd.home-values__image {
    height: var(--ec-values-photo-h);
  }
}

/*
 * Values の写真（3:2）の切り出し位置。
 *
 * PC は縦長の枠なので写真の幅の半分ほどしか映らない。青いシャツの人物を
 * 主役にし、左手前の人物がなるべく入らないよう右に寄せる（依頼）。
 * スマホは横長の枠で上下が切られる。顔は写真の上 1 割〜半分にあるので
 * 上そろえにして頭が切れないようにする。
 */
.sd.home-values__image:before {
  background-position: center top;
}

@media screen and (min-width: 841px) {
  .sd.home-values__image:before {
    background-position: 74% center;
  }
}

/*
 * スマホは外枠（.home-values__visual）が 420px / 240px なのに、写真の枠は
 * 426px のまま中央寄せで、上下を外枠に切られて頭が欠けていた。外枠に合わせる。
 */
@media screen and (max-width: 840px) {
  .sd.home-values__image {
    height: 100%;
  }
}

/* =================================================================== *
 * サムネイルは元画像の比率で持つ（note と News の 4 種）
 *
 * ライブは高さを px で固定していた（note 150px / トップの News 220px /
 * News 一覧 220px）。中の画像は cover なので、枠と元画像の比率が違うぶんが
 * 切り取られる。元画像は SNS 用の OG 画像で 1200x630（= 1.905）前後なのに、
 * 枠は 1.645〜1.813 だったため、**横が 5〜14% 切れていた**。
 *
 * 中央に文字が寄った図版なら切れても分からないが、縁まで使う構図では
 * 文字が欠ける。実際に note の 3 枚目（COO インタビュー）で、左端の
 * 「#INTERVIEW」と右端の「込めた意味」が欠けていた。
 *
 * そこで枠を **1200:628** にして切らない。note の 3 枚と News の記事 5 件は
 * すべてこの比率なので、ページ全体でサムネイルの縮尺がそろう。
 *
 * 高さは px 固定をやめたので、レールが広がっても比率のまま伸びる
 * （2560px で画像だけ背丈を伸ばして枠からはみ出す問題も、これで消える）。
 *
 * 例外が 1 件ある。News の「巨大なエンタープライズIT市場…」だけ元画像が
 * 1108x741（1.496）で、この枠に入れると上下が 22% 切れる（上のロゴと
 * 足元が欠ける）。画像を 1.9 系に差し替えるか、左右に余白を足して
 * 1200x628 にするのが筋。アイキャッチは管理画面から差し替えられる。
 * =================================================================== */
.sd.home-stories__note-thumb--1,
.sd.home-stories__note-thumb--2,
.sd.home-stories__note-thumb--3,
.sd.home-news__card-thumb,
.sd.news-card__thumb,
.sd.news-category-card__thumb {
  height: auto;
  aspect-ratio: 1200 / 628;
}

.sd.home-stories__note-image--1,
.sd.home-stories__note-image--2,
.sd.home-stories__note-image--3 {
  height: 100%;
  object-fit: cover;
}

/**
 * Job Category のラベルを貼り付けたままにする（Values と同じ扱い）。
 *
 * 左が「Job Category」（24%）、右が見出し＋説明＋3 枚のカード＋「すべて見る」。
 * Values と同じ 2 カラムで、行が align-items: flex-start なのでそのまま
 * position: sticky が効く。
 *
 * Values は「ラベル＋写真」のかたまりを画面の中央で留めているが、こちらは
 * ラベル 1 つだけなのでヘッダーの下に留める。かたまりで揃える必要がなく、
 * 離れる位置をそろえる細工（Values の margin-bottom）も要らない。
 *
 * 841px 以下はページ CSS が縦積みにしているので効かせない。
 *
 * 元サイトには無い演出なので、ここは意図的な差分（README）。
 */
@media screen and (min-width: 841px) {
  .sd.home-jobs__label {
    position: sticky;
    top: calc(var(--ec-header) + 32px);
  }
}

/**
 * スクロール中にヘッダーと本文が重ならないようにする。
 *
 * ヘッダーは position: fixed で、元サイトの指定が background: rgba(0,0,0,0)。
 * そのままだと本文がヘッダーの下を通り抜けて、ナビの文字と本文が重なり
 * どちらも読めなくなる。少しでもスクロールしたら背景を敷いて隠す。
 *
 * 濃さは assets/js/header.js が --ec-header-veil（0〜1）に書き込む。
 * scrollY 0 で 0、120px で 1。しきい値で切り替えるのではなくスクロールに
 * 直結させているので、指の動きにそのまま付いてくる。
 *
 * 色はサイト内で使っている薄グレー（--color-surface と同じ #f6f6f6）を
 * **透過のまま**乗せる（不透明にすると帯が出すぎる）。白にすると、白いページでは
 * 背景そのものが見えず境界線だけが出るので、かえって「いきなり出てきた」と感じる。
 * 境界線と影は置いていない。
 *
 * 透過だと下の文字がそのまま透けて読めてしまうので、backdrop-filter で
 * ぼかす。ぼかしの強さも veil に連動させて、最上部では 0 にしておく。
 * これで「うっすら曇りガラスが乗ってくる」見え方になり、下の本文は
 * 形が残るだけで読めなくなる＝ナビと競合しない。
 *
 * backdrop-filter が使えない環境ではぼかしが効かず文字が透けるので、
 * @supports で不透明寄りに上げる。
 *
 * JS が動かないときは最初から乗せる（inc/assets.php の noscript）。
 *
 * transition を切っているのは、Studio の .sd 共通ルール（0.8s）が効いたままだと
 * スクロールに 0.8 秒遅れて追いかけてきて、ゴムのように伸び縮みするため。
 */
.sd.site-header {
  background-color: rgba(246, 246, 246, calc(var(--ec-header-veil, 0) * 0.72));
  -webkit-backdrop-filter: blur(calc(var(--ec-header-veil, 0) * 14px));
  backdrop-filter: blur(calc(var(--ec-header-veil, 0) * 14px));
  transition-property: none;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .sd.site-header {
    background-color: rgba(246, 246, 246, calc(var(--ec-header-veil, 0) * 0.96));
  }
}

/**
 * ページ内リンクの着地点がヘッダーの下に潜らないようにする。
 *
 * ヘッダーのナビは /news#main を指しているが、fixed のヘッダーは
 * スクロール位置の計算に入らないため、飛んだ先の見出しがヘッダーに隠れていた。
 */
html {
  scroll-padding-top: calc(var(--ec-header) + 16px);
}

/**
 * ヘッダーの「note」に外部リンクのアイコンを足す。
 *
 * 隣の「職種一覧」は同じ外部リンクで open_in_new のアイコンを持っているのに、
 * note だけ素のリンクで、外部に飛ぶことが分からなかった。
 *
 * リガチャのフォント（Material Icons）を content で出すと、その文字列
 * （"open_in_new"）が読み上げの対象になる。ライブでその読み上げを
 * aria-hidden で潰したのと同じ問題を作らないよう、**文字ではなく mask** で描く。
 * 形は Material Icons の open_in_new と同じパス、色は currentColor。
 *
 * 大きさと間隔は隣の職種一覧のアイコンに合わせてある
 * （font-size は capture 16px の行、margin-left 6px）。
 */
:root {
  --ec-icon-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z'/%3E%3C/svg%3E");
}

.sd.site-header__nav-note::after {
  content: "";
  flex: none;
  align-self: center;
  /* 職種一覧のアイコンと同じ段（config/type-scale.json の 16px の行） */
  font-size: clamp(18px, 16.30px + 0.4531vw, 25px);
  width: 1em;
  height: 1em;
  margin-left: 6px;
  background-color: currentColor;
  -webkit-mask-image: var(--ec-icon-external);
  mask-image: var(--ec-icon-external);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* =================================================================== *
 * 画像の縦横比を固定する
 *
 * ライブは「幅は割合 / 高さは px 固定」という持ち方をしていた。
 * 1280px までは器の幅も頭打ちなので成り立っていたが、レールを
 * リキッドにして 1782px・2416px まで広げたことで、幅だけが伸びて
 * 画像が横長に潰れていた。実測した縦横比のずれ:
 *
 *   要素                        1280    1920    2560   ずれ
 *   home-stories__intro-image   1.73    2.63    3.58   2.06x
 *   home-news__card-image       1.65    2.55    3.51   2.13x
 *   news-card__image            1.72    2.69    3.66   2.13x
 *   about-hero__visual          2.67    4.00    5.33   2.00x
 *   about-workstyle__visual     1.59    2.39    3.24   2.03x
 *
 * 直し方は共通で、高さを aspect-ratio に置き換えて器のほうを追従させる。
 * 比率はライブの設計幅（1280px 表示）での 幅 : 高さ。
 *
 * min-height にライブの高さを残してあるのが要点。設計幅より狭いところでは
 * こちらが勝つので**今までとまったく同じ**見え方になり、広いところでだけ
 * aspect-ratio が勝って比率どおりに伸びる。段差も出ない。
 *
 * 器は background-size: cover（.image::before）なので、高さが変われば
 * 切り取り位置が変わるだけで画像は歪まない。
 * =================================================================== */

/**
 * Stories の紹介画像。ライブは 557x400（幅 60% − gap、高さ 400px 固定）。
 * 高さの指定は 1141px 以上のときのもの（それ以下は 320/420/240px の段がある）。
 */
@media screen and (min-width: 1141px) {
  .sd.home-stories__intro-visual {
    height: auto;
    min-height: 400px;
    aspect-ratio: 557 / 400;
  }
}

/**
 * News カードのサムネイルは、note カードと同じく**元画像の比率**で持つ
 * （下の「サムネイルは元画像の比率で持つ」にまとめてある）。
 *
 * ライブは トップ 362x220（1.645）/ News 一覧 378x220（1.718）の固定で、
 * 記事のサムネイルは OG 画像（1.9 前後）なので横が 10〜14% 切れていた。
 */

/**
 * About のヒーロー画像。ライブは全幅 x 480px 固定。
 *
 * これはレールを広げたことが原因ではなく（元から幅 100%）、ライブでも
 * 広い画面では横長になっていた。同じ問題なのでここで直す。
 * 840px 以下は 320/180px の段があるので触らない。
 */
@media screen and (min-width: 841px) {
  .sd.about-hero__visual {
    height: auto;
    min-height: 480px;
    aspect-ratio: 1280 / 480;
  }
}

/**
 * About の働き方の写真。ライブは 720x420 固定。
 * 540px 以下は 240px の段があるので触らない。
 */
@media screen and (min-width: 541px) {
  .sd.about-workstyle__visual {
    height: auto;
    min-height: 420px;
    aspect-ratio: 720 / 420;
  }
}

/* =================================================================== *
 * SP ではカードの中身もワンカラムにする
 *
 * 840px 以下でカードは 1 枚ずつ縦に並ぶが、カードの中身は
 * 「サムネイル（左）＋ 文字（右）」の 2 カラムのままだった。
 * 540px 以下はサムネイルが 120x80px まで縮み、残りの幅で見出しが
 * 6〜8 行に折り返す（390px 幅で実測）。
 *
 * SP では中身も 1 カラムにして、サムネイルを列いっぱいに敷き、
 * 文字をその下に置く。カードの区切り（上境界線 + padding 24px）は
 * ライブのまま残す。
 *
 * 対象は同じ作りのカード 4 種:
 *   home-stories__note-card--1..3  トップの note カード
 *   home-news__card                トップの News
 *   news-card                      /news の一覧
 *   news-category-card             /news/category/<slug> の一覧
 *
 * 541〜840px は横並びのままで触らない。この幅ではサムネイル 200px を
 * 引いても文字に 400px 以上残るため、折り返しが破綻していない。
 * =================================================================== */
@media screen and (max-width: 540px) {
  .sd.home-stories__note-card--1,
  .sd.home-stories__note-card--2,
  .sd.home-stories__note-card--3,
  .sd.home-news__card,
  .sd.news-card,
  .sd.news-category-card {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 16px;
  }

  /**
   * サムネイル。120x80px の固定をやめて列いっぱいに敷く。
   * 比率は幅に関係なく元画像に合わせているので、ここでは指定しない
   * （下の「サムネイルは元画像の比率で持つ」）。
   */
  .sd.home-stories__note-thumb--1,
  .sd.home-stories__note-thumb--2,
  .sd.home-stories__note-thumb--3,
  .sd.home-news__card-thumb,
  .sd.news-card__thumb,
  .sd.news-category-card__thumb {
    width: 100%;
    max-width: 100%;
    height: auto;
  }

  /**
   * 文字側。840px 以下の `flex: 1 / width: auto` は横並び前提の指定で、
   * 縦積みにすると（カードが align-items: flex-start なので）幅が
   * 中身なりに縮む。列いっぱいに戻す。
   */
  .sd.home-stories__note-body--1,
  .sd.home-stories__note-body--2,
  .sd.home-stories__note-body--3,
  .sd.home-news__card-body,
  .sd.news-card__body,
  .sd.news-category-card__body {
    flex: none;
    width: 100%;
    max-width: 100%;
  }
}

/* =================================================================== *
 * SP の note カードを News カードに合わせる
 *
 * 縦積みにしたところで、同じページに並ぶ 2 種類のカードの寸法が
 * そろっていないのが見えた（390px 幅・カード幅は両方 302px）:
 *
 *   　　　　　　　　　　note        News（トップ）
 *   サムネイル比率      272:150     362:220   → 高さ 167px 対 184px
 *   カード間の余白      0px         24px      → note は境界線だけで接する
 *   日付の位置          見出しの上  見出しの下
 *
 * 依頼により News 側にそろえる。文字サイズ（見出し 18.07px /
 * 日付 13.04px）と、見出しと日付のあいだの 12px は元から同じ。
 *
 * 対象は SP だけ。541px 以上は 3 枚横並び / 横組みのライブの姿を残す。
 * =================================================================== */
@media screen and (max-width: 540px) {
  /**
   * サムネイルの比率は SP でも元画像のまま（上の 1200 / 628）。
   *
   * ここは以前 News と同じ 362:220 にしていたが、それだと横が 13.9% 切れて
   * 3 枚目のインタビュー画像の文字が欠けた。切らないほうを採る。
   * その結果、note のサムネイルは News のサムネイルより少し背が低い
   * （287px 幅で 150px 対 174px）。別のセクションなので並べては見えない。
   */

  /**
   * カード間の余白。News の一覧と同じ 24px。
   * 列は flex-direction: row + wrap のままなので、カード幅 100% の
   * 折り返しに row-gap が効く（column-gap は 1 列なので出ない）。
   */
  .sd.home-stories__note-list {
    gap: 24px;
  }

  /**
   * 日付を見出しの下へ。News は「見出し → 日付（+ カテゴリ）」の順で、
   * 日付側に margin-top: 12px が付いている。note は markup の順が
   * 「日付 → 見出し」なので、order で入れ替えて余白も付け替える。
   * markup を触らないので capture の再取得で戻らない。
   */
  .sd.home-stories__note-title--1,
  .sd.home-stories__note-title--2,
  .sd.home-stories__note-title--3 {
    order: 1;
    margin-top: 0;
  }

  .sd.home-stories__note-date--1,
  .sd.home-stories__note-date--2,
  .sd.home-stories__note-date--3 {
    order: 2;
    flex: none;
    margin-top: 12px;
  }
}

/* =================================================================== *
 * News カードのメタ行だけが単独で出現するのをやめる
 *
 * 一覧は `.news-list`（または `.home-news__list`）ごと 1 回ぼかしから
 * 出るのに、カードの中の日付とカテゴリだけは自分の `.appear` を持っていて
 * （`filter: blur(10px)` / `opacity: 0` → delay 200ms・duration 800ms）、
 * appear.js は要素ごとに交差を見るため、カードが出きったあとに
 * メタ行だけが遅れてふわっと出ていた。
 *
 * カード内でこの指定を持つのは日付とカテゴリだけ＝メタ行だけが動く。
 * サムネイルも見出しも持っていない。note カードも一覧ごと 1 回で、
 * 中の日付は動かない。News 側だけの浮きなのでそろえて消す。
 *
 * 出現そのものは一覧側に残るので、カードは今までと同じように出る。
 * markup の `appear` クラスは触らない（build-theme が付け直すため）。
 * =================================================================== */
.sd.news-card__date.appear,
.sd.news-card__category-label.appear,
.sd.news-category-card__date.appear,
.sd.news-category-card__category-label.appear,
.sd.home-news__card-date.appear,
.sd.home-news__card-category-label.appear {
  filter: none;
  opacity: 1;
}

/* =================================================================== *
 * 薄いグレーの文字のコントラストを上げる
 *
 * ページ CSS の :root が持つ --color-muted は #888888 で、白地に対して
 * 3.54:1 しかない（WCAG AA の本文は 4.5:1）。使われているのは
 *   News カードのカテゴリラベル「メディア」
 *   ロゴ脇の「Career site」（11〜12px）
 * の 2 つで、どちらも小さい文字なので効きが大きい。
 *
 * #6f6f6f にすると白地で 5.02:1、ヘッダーの薄い veil（#f6f6f6）の上でも
 * 4.64:1 で通る。トークンは color 以外に使われていないので、
 * ここで 1 か所差し替えれば全部そろう。
 * =================================================================== */
:root {
  --color-muted: #6f6f6f;
}

/* =================================================================== *
 * SP のカテゴリフィルタを折り返す
 *
 * 「全ての記事 / メディア / 採用 / イベント」の帯は
 * `.news-filter__categories { flex-wrap: nowrap }` で 1 行に固定されていて、
 * 375px では「イベント」の 90px のうち 38px しか見えない（390px で 53px、
 * 430px で収まる）。帯は overflow-x: auto なので横に振れば読めるが、
 * スクロールバーは Studio の CSS が消しているため気づけない。
 *
 * 320px ではもともと 2 行に折り返して全部見えているので、
 * その挙動を 540px 以下に広げる。右端の余白も足す
 * （元は横スクロール前提で padding が左 24px だけだった）。
 * =================================================================== */
@media screen and (max-width: 540px) {
  .sd.news-filter,
  .sd.news-category-filter {
    padding-right: 24px;
  }

  .sd.news-filter__row,
  .sd.news-category-filter__row,
  .sd.news-filter__categories,
  .sd.news-category-filter__categories {
    flex-wrap: wrap;
    row-gap: 12px;
    justify-content: flex-start;
  }

  /**
   * チップの群れは width: calc(100% - …) で「行の全幅」を持っているため、
   * そのままだと「全ての記事」のぶんだけ溢れて、まだ余裕がある幅でも
   * 折り返してしまう。残りの幅を取る形に直して、必要になったときだけ
   * 折り返させる。
   */
  .sd.news-filter__categories,
  .sd.news-category-filter__categories {
    flex: 1 1 auto;
    width: auto;
    max-width: 100%;
  }
}

/* =================================================================== *
 * グラデーションの文字が消えないようにする
 *
 * ヒーローのリード文と note カードの日付は、Studio が
 * `color: transparent` ＋ `background-clip: text` でグラデーションを
 * 掛けている。この組み合わせに対応していない環境では
 * 「透明な文字」だけが残って読めなくなるため、対応を確認できないときは
 * 単色に戻す。@supports が通る環境（主要ブラウザ）では何も起きない。
 * =================================================================== */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .sd.home-hero__lead,
  .sd.home-stories__note-date--1,
  .sd.home-stories__note-date--2,
  .sd.home-stories__note-date--3 {
    color: var(--color-text, #111111);
    background: none;
  }
}

/* =================================================================== *
 * トップページのボタンをヘッダーの Entry にそろえる
 *
 * ライブは 4 つのピルボタンがそれぞれ別の作りだった。
 *
 *   　　　　　　　　　　枠      反転      矢印      速さ
 *   ヘッダー Entry      1px     する      6px 滑る  300ms  ← お手本
 *   noteを見る          なし    する      6px 滑る  800ms
 *   Entaarについて      なし    する      6px 滑る  800ms
 *   もっとみる          1px     する      なし      400ms
 *   CTA の Entry        なし    しない    6px 滑る  800ms（文字だけ青）
 *
 * そろえる形は「地と文字が入れ替わる／枠は文字色と同じで常に出す／
 * 矢印が 6px 右へ滑る／300ms」。明るい地の上の 3 つは白と黒、CTA の Entry はヘッダーと同じ青。
 *
 * **枠を常に出すのが要点**。noteを見る と Entaarについて は枠が無いため、
 * ホバーで白地になった瞬間に背景（#f6f6f6 / #ffffff）と同化して
 * 輪郭が消えていた。Entaarについては純白の上なので完全に消える。
 *
 * Entry（ヘッダーと CTA）は青のまま。応募への一次ボタンなので、
 * 他のボタンと色で区別が付くようにしている。
 * =================================================================== */

/**
 * 明るい地の上の 3 つ。通常は黒地・白文字、ホバーで白地・黒文字。
 */
.sd.home-stories__note-link,
.sd.home-values__about-link,
.sd.home-news__more-button {
  border: 1px solid var(--color-text, #111111);
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.4, 0.4, 0, 1);
}

.sd.home-stories__note-link:hover,
.sd.home-values__about-link:hover,
.sd.home-news__more-button:hover {
  background: var(--color-white, #ffffff);
  border-color: var(--color-text, #111111);
}

/* ラベルと矢印の速さもお手本にそろえる（元は 300ms 混在の 800ms） */
.sd.home-stories__note-link-label,
.sd.home-stories__note-link-icon,
.sd.home-values__about-link-label,
.sd.home-values__about-link-icon,
.sd.home-news__more-link {
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.4, 0.4, 0, 1);
}

/**
 * 「もっとみる」だけ矢印を持っていないので足す。
 *
 * 他のボタンは Font Awesome の long-arrow-right（\f178）を <i> で置いている。
 * markup は capture 由来で触れないため ::after で同じグリフを出す。
 * 別の矢印を SVG で描くと形が微妙に違って並べたときに気づくので、
 * わざと同じフォントの同じ文字を使っている。
 * 大きさ・余白・滑り方は note を見るボタンと同値。
 */
.sd.home-news__more-button::after {
  content: "\f178";
  font-family: FontAwesome;
  font-style: normal;
  font-weight: 400;
  font-size: clamp(20px, 18.3px + 0.4531vw, 27px);
  line-height: 1;
  margin-left: 6px;
  color: var(--color-white, #ffffff);
  transition: color 300ms cubic-bezier(0.4, 0.4, 0, 1), translate 300ms cubic-bezier(0.4, 0.4, 0, 1);
}

.sd.home-news__more-button:hover::after {
  color: var(--color-text, #111111);
  translate: 6px 0;
}

/**
 * CTA の Entry はヘッダーの Entry とまったく同じにする（依頼）。
 *
 * 通常は青地・白文字・1px の青枠、ホバーで白地・青文字。矢印も 6px 滑る。
 * ライブは「白地のまま文字と矢印だけ青くなる」＋ボタン全体が 4px 右下に
 * ずれる作りだった。ずれはヘッダーに無いので外す。
 *
 * 引き金は帯（cta__panel）のホバーのまま残しつつ、ボタン自身に
 * カーソルが乗ったときも動くようにした。
 *
 * 大きさ（幅 420px・文字 40px）はページの一次 CTA なのでそのまま。
 * 枠の色はライブも `0px solid var(--color-primary)` を持っていたので、
 * 太さを 1px にするだけで済んでいる。
 */
.sd.cta__button {
  background: var(--color-primary, #185b99);
  border: 1px solid var(--color-primary, #185b99);
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.4, 0.4, 0, 1);
}

.sd.cta__button-label,
.sd.cta__button-icon {
  color: var(--color-white, #ffffff);
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.4, 0.4, 0, 1);
}

.sd.cta__panel:hover .sd.cta__button,
.sd.cta__button:hover {
  background: var(--color-white, #ffffff);
  border-color: var(--color-primary, #185b99);
  translate: none;
}

.sd.cta__panel:hover .sd.cta__button-label,
.sd.cta__button:hover .sd.cta__button-label {
  color: var(--color-primary, #185b99);
}

.sd.cta__panel:hover .sd.cta__button-icon,
.sd.cta__button:hover .sd.cta__button-icon {
  color: var(--color-primary, #185b99);
  translate: 6px 0;
}

/**
 * CTA の写真を帯いっぱいに敷く。
 *
 * 元は幅 100%・高さ auto の 2:1 で、PC では帯（1280px で高さ 464px）より
 * 写真が高いので上から切られて収まっていた。スマホは帯が 284px（375px 幅）
 * あるのに写真が 187px しかなく、下 1/3 が青地のまま残っていた。
 * 高さを帯に合わせて cover で切り出す。上そろえなので PC の見え方は変わらない。
 * 横は、スマホで左右が切られるときに 2 人の顔がどちらも残るよう左寄り（18%）。
 * PC は写真の幅＝帯の幅なので横の位置は効かない。
 */
.sd.cta__background {
  height: 100%;
  object-fit: cover;
  object-position: 18% top;
}

/**
 * スマホ（540px 以下）の MV は、見出しを写真に重ねず写真の下に分ける（依頼）。
 *
 * 重ねるには写真の上に文字の空きが要るので枠を 540px 以上の縦長にしていたが、
 * 写真は 3:2 の集合写真なので、縦長の枠では幅の 4 割ほどしか映らず両端の人が
 * 切れていた。写真を 1 行目、見出しを 2 行目に置き、写真は元の比率で全員を出す。
 */
@media screen and (max-width: 540px) {
  .sd.home-hero__visual {
    aspect-ratio: 2400 / 1601;
    min-height: 0;
  }

  .sd.home-hero__head {
    grid-area: 2 / 1;
    padding-top: 24px;
    padding-left: 0;
    padding-right: 0;
  }
}