@charset "UTF-8";
/* =============================================
   TOPページ（2026リニューアル / Figma TOP_PC node 249:33）
   - カラーは _variables.scss の変数を使用（$ink / $yellow / $white）
   - 単位: サイズは em() 関数で指定（_mixins.scss）。px/vw から一括変換済み（2026-07-17）。
     PC = Figmaのpx値をそのまま em(px)。SP = body基準がvwのため em(px) が440px幅でカンプ原寸→vw追従。
     font-size を持つ要素（とその子・疑似要素）は第2引数で補正: em(px, 親font-size)
     例外で残すもの: border幅 / box-shadow / 999px・50%・小装飾radius / スクロールバー /
     transform・calc内 / KVイントロのvw（1920px基準でPC/SP共通の意図的設計）
============================================= */
/*--- em単位の基準（TOPページのみ） ---*/
/* style_top.css は front_page 限定読み込みのため、body に当ててもTOPページにしか効かない。
   common.scss の body{font-size:1.4rem}(SP) より後に読み込まれるので本ルールが優先される。
   PC: 16px固定 → em(24) = 24px
   SP: 3.6364vw（Figma SPフレーム440px基準）→ em値がvw追従。440px幅でFigmaカンプ原寸 */
body {
  font-size: 16px;
}
@media screen and (max-width: 768px) {
  body {
    font-size: 3.6363636364vw;
  }
}

.header {
  background-color: rgba(255, 242, 38, 0.5);
}

/*--- ヘッダー調整 ---*/
main {
  padding-top: 0;
}

/*--- ページラッパー（黄背景 + OOHパターン） ---*/
.top {
  position: relative;
  /* hidden だと祖先がスクロールコンテナ扱いになり子孫の position:sticky（カードスタック演出）が
     無効化されるため clip を使用。クリップ効果は hidden と同等でスクロールコンテナを作らない */
  overflow: clip;
  background-color: #FFF226;
  padding-top: 5.625em; /* fixedヘッダーの高さ分（絶対配置時代からの値を流用、fixed化でも同じ考え方） */
  /* Figma: contact-cta下端(y≒6525)〜footer上端(y≒6628)の黄背景の余白 約103px を
     .top側に集約する。common.scss側の .footer{margin-top:100px}（全ページ共通）と
     二重に加算しないよう、本ページ(style_top.css)側でfooterのmargin-topを打ち消す */
  padding-bottom: 6.4375em;
}

/* .footer{margin-top:100px} は common.scss（全ページ共通）で定義。
   TOPページのみ .top のpadding-bottomに間隔を集約するため打ち消す。
   style_top.css は common.css より後に読み込まれるため、同一詳細度でも本ルールが優先される */
.footer {
  margin-top: 0;
}

/* 背景OOHパターン（Figma: Group74/76/77/78。淡黄×グレーの交互リピート）
   開始位置 =「カード切り替えゾーン(.card-stack)に入る直前で、OOHロゴがちょうど1枚ぶん収まる」点。
   旧実装は em(1714) の固定pxだったが、.kv高さ(56.25vw)もパターン高さ(28.95vw)も
   ビューポート幅で伸縮するため、幅によってロゴが途中で切れていた（チェックバック対応）。
   内訳:
     .card-stack上端 = 90(.top padding-top) + 56.25vw(.kv 16:9)
                     + 180(.hero__heading margin-top) + 122.5(main-copy.svg 972×122.5)
                     + 55(.hero__copy margin-top) + 699.6(コピー10行 × 69.96px)
                     + 168(.card-stack margin-top)
                     = 56.25vw + 1315.1px
     OOH 1枚ぶん     = 28.95vw(.top__bg-item 94.8vw × 695/2276) + 20px(margin-bottom)
     開始位置        = (56.25 - 28.95)vw + (1315.1 - 20)px
   ※コピーが折り返さない幅（およそ1080px以上）で成立する式。それ未満は行数が増えるぶん
     ロゴが1枚+αになるが、旧固定値より切れ方は小さい */
.top__bg {
  position: absolute;
  top: calc(27.3vw + 80.9375em);
  left: 0;
  width: 100%;
  z-index: 0;
}

.top__bg-item {
  display: block;
  width: 94.8%;
  height: auto;
  margin: 0 auto 1.25em;
}

/*--- 1. ヒーロー ---*/
.hero {
  position: relative;
  z-index: 1;
}

/* KV動画イントロ（Figma node 607:3991）。数値は 0715_kv_motion見本.mp4 の実測フレーム
   （0.5〜3.0秒/8fps）に基づく。全体で幅100%・16:9固定のためvw単位で統一し、
   PC/SPで別MQを設けずに同一挙動でスケールする。
   ステート設計（is-standby系と同じ「JS無効=安全な静止状態」の考え方を踏襲）:
   1) 既定（無指定）: ロゴロックアップを静止表示し続ける。videoはpaused(=poster)のまま隠れて破綻しない。
      JS無効環境、および.is-kv-video-inがvideo.play()拒否時に外れた場合（フォールバック）はこの状態になる
   2) .is-kv-lottie   : 通常時。JS(top.js)がLottie(op.json)を再生するときに付与。
                        ロックアップのイントロ（タグライン→ロゴ→星の回転→ホールド→zoomアウト）は
                        すべてLottie側が持つため、フォールバック用の.kv__logosは非表示にする
   3) .is-kv-intro    : Lottieが使えない時のフォールバック。CSSキーフレームで2)相当のイントロを再生する
   4) .is-kv-video-in : 2)のLottie再生完了時 / 3)の2.2s時点でtop.jsが付与。videoを手前からscale+fadeで
                        出現させる。再生タイミングはtop.jsがvideo.play()で同期し、
                        再生が拒否されたら各クラスを外して1)の静止状態に戻す
   prefers-reduced-motion: reduceは下部の@mediaでJSの有無に関わらずposter静止画を即時表示する */
.kv {
  position: relative;
  width: 100%;
  aspect-ratio: 1920/1080;
  overflow: hidden;
  background-color: #FFF226;
}
@media screen and (max-width: 768px) {
  .kv {
    /* SPは縦型動画（0723_sp_kv.mp4 = 2160×3840）に合わせて9:16。
       動画分岐は index.php の <source media>、posterのSP差し替えは top.js が担当 */
    aspect-ratio: 9/16;
  }
}

.kv__logos {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25vw; /* 実測 24px(@1920) 相当 */
  opacity: 1;
  transform: scale(1);
  /* play()拒否で .is-kv-intro が外れた際、アニメ途中からベース値へ戻るスナップを緩和 */
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.kv__tagline {
  display: block;
  width: 29.5vw; /* kvlogo-01.svg 実寸566px(@1920) 相当 */
  height: auto;
}
@media screen and (max-width: 768px) {
  .kv__tagline {
    width: 58.5vw;
  }
}

.kv__logo {
  /* base(文字) + star(星マーク) の2枚重ねラッパー（index.php参照。チェックバック: 星のくるんと回転出現） */
  position: relative;
  display: block;
  width: 29.6vw; /* kvlogo-02.svg 実寸569px(@1920) 相当 */
}
@media screen and (max-width: 768px) {
  .kv__logo {
    width: 58.6vw;
  }
}

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

/* 星マーク: 元SVG(viewBox 569×89)内の実測位置 x=454.419 y=0 w=41.294 から%換算で重ねる */
.kv__logo-star {
  position: absolute;
  left: 79.86%; /* 454.419/569 */
  top: 0;
  width: 7.26%; /* 41.294/569 */
  height: auto;
}

/* Lottie(op.json)のマウント先。lottie-webがこの中に <svg viewBox="0 0 3840 2160"> を100%×100%で生成する。
   コンポは3840×2160＝16:9でPCの.kvと完全一致するため、inset:0 で原寸フィットが等倍(scale=1)。
   ただしop.json内のロックアップ実寸は旧CSS版の約1.6倍と大きいため、$kv-lottie-scale で少し縮めて見せる。
   ロックアップの見た目サイズ調整はこの2変数だけで完結する（中央基準の拡大縮小なので位置はずれない） */
/* チェックバック: イントロ中は画面全体を覆う黄色のカーテンにし、ヘッダーより手前へ出す。
   position:fixed にすることで .kv（.top の padding-top ぶん下がる）に影響されず、
   常に「画面の」上下中央にロックアップが来る（旧SP用の top:-16vw / height:100vh 補正は不要になり削除）。
   z-index は common.scss の .header(40) より大きい値。
   visibility も一緒に切り替えて、隠れている間はクリックを素通りさせる */
.kv__lottie {
  position: fixed;
  inset: 0;
  z-index: 50;
  background-color: #FFF226;
  display: flex;
  align-items: center; /* ステージ＝lottie本体を画面の上下中央に */
  justify-content: center;
  opacity: 0; /* op.jsonのロード完了(DOMLoaded)まで隠す。表示はtop.jsが is-shown で解除 */
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

/* lottieの描画領域。コンポ(3840×2160)と同じ16:9を保ち、画面幅基準でスケールをかける。
   背景（黄色カーテン）とは別要素にしてあるので、縮小しても画面の塗り残しが出ない */
.kv__lottie-stage {
  width: 100%;
  flex-shrink: 0;
  aspect-ratio: 3840/2160;
  transform: scale(0.85);
}
@media screen and (max-width: 768px) {
  .kv__lottie-stage {
    transform: scale(1.7);
  }
}

/* 表示制御は .kv 側の状態クラスではなく、カーテン自身の is-shown で行う。
   カーテンは .kv の外（.top の外）に置いてあるため子孫セレクタが使えないため。
   付け外しは js/top.js（Lottie読み込み完了で付与 → 再生完了＝video出現時に外す） */
.kv__lottie.is-shown {
  opacity: 1;
  visibility: visible;
}

/* チェックバック: TOPだけヘッダーを最初は出さず、カーテンが引くのに合わせてフェードインさせる
   （カーテンが出るまでの一瞬だけヘッダーが見えてしまうのを防ぐ）。
   style_top.css は front_page 限定の読み込みなので、この既定値はTOPページにしか効かない。
   is-shown の付与は js/top.js（イントロ終了＝video出現と同じタイミング）。
   .header__toggle / .header__menu も <header class="header"> の中なので一緒に隠れる。
   JS無効環境は header.php の noscript が常時表示に戻す（.fl-bnr と同じ救済方法） */
.header {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.header.is-shown {
  opacity: 1;
  visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
  /* イントロ自体を行わない環境ではヘッダーを隠さない */
  .header {
    opacity: 1;
    visibility: visible;
  }
}
/* Lottie再生中はフォールバックのロゴロックアップを出さない（二重表示防止） */
.kv.is-kv-lottie .kv__logos {
  display: none;
}

/* 戻る/進む遷移（履歴移動・bfcache復帰）でTOPに来たときの「イントロ済み」状態。
   js/top.js が navigation type === 'back_forward' を検知して付ける。
   カーテンもフェードも一切通さず、いきなり動画表示の完成形にする */
.kv.is-kv-ready .kv__logos {
  display: none;
}

.kv.is-kv-ready .kv__video {
  opacity: 1;
  transition: none;
  -webkit-animation: none;
  animation: none;
}

/* 上記と同時にヘッダーのフェードインも殺す（1フレーム後にJSが外す）。
   .header の transition ごと切るため、is-hidden のスライドも一瞬だけ無効になる */
.header.is-instant {
  transition: none;
}

.kv__video {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  opacity: 0; /* JS無効時はロゴロックアップの下に隠れたまま(見えなくてよい) */
  transition: opacity 0.2s ease; /* フォールバック復帰時のスナップ緩和 */
}

/* ----- フォールバック用イントロシーケンス（.is-kv-introはLottieが使えない時だけjs/top.jsが付与） ----- */
/* タグライン（上のロゴ画像）: 縦回転（rotateX 1回転）しながら出現（チェックバック2回目対応） */
@-webkit-keyframes kv-tagline-in {
  from {
    opacity: 0;
    transform: perspective(800px) rotateX(-360deg);
  }
  to {
    opacity: 1;
    transform: perspective(800px) rotateX(0deg);
  }
}
@keyframes kv-tagline-in {
  from {
    opacity: 0;
    transform: perspective(800px) rotateX(-360deg);
  }
  to {
    opacity: 1;
    transform: perspective(800px) rotateX(0deg);
  }
}
@-webkit-keyframes kv-logo-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes kv-logo-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes kv-lockup-out {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.2);
  }
}
@keyframes kv-lockup-out {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.2);
  }
}
@-webkit-keyframes kv-video-in {
  from {
    opacity: 0;
    transform: scale(1.15);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes kv-video-in {
  from {
    opacity: 0;
    transform: scale(1.15);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
/* 星マークの「くるんと」1回転（0715_kv_motion見本.mp4 参照。チェックバック対応） */
@-webkit-keyframes kv-star-spin {
  from {
    transform: rotate(-360deg);
  }
  to {
    transform: rotate(0deg);
  }
}
@keyframes kv-star-spin {
  from {
    transform: rotate(-360deg);
  }
  to {
    transform: rotate(0deg);
  }
}
.kv.is-kv-intro .kv__tagline {
  -webkit-animation: kv-tagline-in 0.8s cubic-bezier(0.25, 0.6, 0.3, 1) 0.15s both;
  animation: kv-tagline-in 0.8s cubic-bezier(0.25, 0.6, 0.3, 1) 0.15s both; /* 0.15〜0.95s 縦回転しながら出現 */
}

.kv.is-kv-intro .kv__logo {
  -webkit-animation: kv-logo-in 0.5s ease-out 1s both;
  animation: kv-logo-in 0.5s ease-out 1s both; /* タグライン着地の直後 1.0〜1.5s フェードイン */
}

.kv.is-kv-intro .kv__logo-star {
  -webkit-animation: kv-star-spin 0.7s cubic-bezier(0.25, 0.6, 0.3, 1) 1s both;
  animation: kv-star-spin 0.7s cubic-bezier(0.25, 0.6, 0.3, 1) 1s both; /* ロゴのフェードインと同時に1回転して着地 */
}

.kv.is-kv-intro .kv__logos {
  -webkit-animation: kv-lockup-out 0.5s cubic-bezier(0.19, 1, 0.22, 1) 2.1s both;
  animation: kv-lockup-out 0.5s cubic-bezier(0.19, 1, 0.22, 1) 2.1s both; /* 2.1〜2.6s zoomアウト+フェードアウト */
}

/* video reveal はLottie版・CSSフォールバック版で共通。発火はtop.jsの.is-kv-video-in付与
   （Lottie版=op.json再生完了時 / フォールバック版=イントロ開始2.2s後）。動きは従来どおり */
.kv.is-kv-video-in .kv__video {
  -webkit-animation: kv-video-in 0.5s ease-out both;
  animation: kv-video-in 0.5s ease-out both; /* 手前からscale+fadeで出現 */
}

/* ----- prefers-reduced-motion: イントロ省略、poster静止画を即時表示（JSの有無に関わらず適用） ----- */
@media (prefers-reduced-motion: reduce) {
  .kv__logos,
.kv__lottie {
    display: none;
  }
  .kv__video {
    opacity: 1;
    transform: none;
  }
}
.hero__heading {
  /* h1はテーマ側でfont-sizeをリセットしておらずUA既定の2em(32px)が入るため、
     明示的に1em(16px)へ戻してem()の基準を揃える（これが無いと以下のem値が全て2倍になり、
     ワイド画面で見出しがコピー(1000px)より広がって左端がズレる） */
  font-size: 1em;
  max-width: 62.5em;
  width: 83.3%;
  margin: 11.25em auto 0;
  /* .hero__copy-line の左右padding(14px=マーカー余白)ぶんコピー文字は内側から始まるため、
     同じインセットを与えて見出し画像とコピーの先頭を左揃えにする（チェックバック対応） */
  padding: 0 0.875em;
}

.hero__heading img {
  display: block;
  width: 100%;
  height: auto;
}

/* 見出し画像はPC/SPで出し分け（SP正式デザインは2行構成。Figma node 561:2898 / 561:2908）。
   ※基底の .hero__heading img (0,1,1) に勝つため親クラスを重ねて詳細度 (0,2,0) にしている */
.hero__heading .hero__heading-img--sp1,
.hero__heading .hero__heading-img--sp2 {
  display: none;
}

.hero__copy {
  /* 自身に font-size を持つ要素のサイズ指定は em() の第2引数でその font-size(px) を渡して補正する */
  max-width: 30.303030303em;
  width: 83.3%;
  margin: 1.6666666667em auto 0;
  font-size: 2.0625em;
  font-weight: 700;
  line-height: 2.12;
  letter-spacing: 0.1em;
  color: #2c2c2c;
}

/* チェックバック: 幅を狭めるとコピーが折り返す件。
   PC側は font-size:33px の固定なのに、器は width:83.3% の可変だった。
   最長行「正解に、早く辿り着くことばかりが求められる時代。」は24文字。
   letter-spacing 0.1em と .hero__copy-line の左右padding(各 14/33em)を含めた行幅は
     24 × 1.1em + 0.8485em = 27.25em
   これが 83.3% に収まるのは 27.25 × 33 ÷ 0.833 ≒ 1080px 以上のときだけで、
   それ未満のブラウザ幅では必ず折り返していた（タブレット帯は常に該当）。
   1080px を下回る帯では font-size を画面幅追従(vw)に切り替え、デザインどおりの改行位置を保つ。
   3.03vw = 0.833 ÷ 27.25 に約1%の安全率を見た値。
   ・1080px で 32.7px となりPC値33pxとほぼ連続（境界での飛びが出ない）
   ・margin / padding / max-width も em 指定なので一緒に縮み、比率は崩れない
   ・SP(≤768px)は専用の11行セットと独自 font-size を持つため下限を769pxで止める */
@media screen and (min-width: 769px) and (max-width: 1080px) {
  .hero__copy {
    font-size: 3.03vw;
  }
}
/* 読み上げ用の全文（.u-visually-hidden）を除く、視覚表示用のタイプライター行グループ */
.hero__copy-lines {
  display: inline;
}

/* SP専用の行セット（正式SPデザインの改行位置11行。Figma node 561:2918）。
   PCでは非表示。top.js は表示中の行だけを演出対象にするため二重再生はしない */
.hero__copy-lines--sp {
  display: none;
}

/* 行の出現（チェックバック: 1文字ずつのタイプライター → 行ブロックごとまとめて左から出現）。
   待機状態の .is-standby は js/top.js が付けてから外すため、JS無効・IO非対応環境では
   最初から通常表示になる（.card-stack__item.is-standby と同じ考え方） */
.hero__copy-line {
  position: relative;
  z-index: 0;
  display: inline-block;
  line-height: 1.45;
  padding: 0.0606060606em 0.4242424242em; /* 親 .hero__copy の font-size 33px 基準 */
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.25, 0.6, 0.3, 1);
}

.hero__copy-line.is-standby {
  opacity: 0;
  transform: translateX(-0.7272727273em); /* 左から寄ってくる分の初期オフセット */
  transition: none; /* 待機状態への遷移は見せない（解除時だけアニメーションさせる） */
}

/* マーカー: 左→右にスイープする蛍光ペン風の白マーカー。
   全面ベタ塗りではなく行の下半分に重ね、文字の下側にかかるようにする
   （JS付与の is-marked で発火。行ブロック出現に合わせて0.5sで引く） */
.hero__copy-line::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 55%;
  z-index: -1;
  background-color: #fff;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s linear;
}

.hero__copy-line.is-marked::before {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  .hero__copy-line,
.hero__copy-line.is-standby {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .hero__copy-line::before {
    transform: scaleX(1);
    transition: none;
  }
}
/*--- カードスタッキング演出（PHILOSOPHY〜INTERNATIONAL AD の7枚。JS: js/top.js）
       sticky はラッパー（.card-stack__item）に掛ける。sticky の可動範囲は共通コンテナ
       .card-stack 全体になるため、先に張り付いたカードはスタック末尾まで top:90px に
       固定され続け、後続カードが下から同じ位置に到達して z-index で上に重なっていく。
       5枚目以降が定位置に来たら、4枚前のカードをJSがopacity 0でフェードアウト（.is-faded）。
       SP(≤768px) / prefers-reduced-motion / sticky・IntersectionObserver非対応環境では
       通常フロー（position:staticかつmin-height:0）にフォールバックする ---*/
.card-stack {
  position: relative;
  z-index: 1;
  margin-top: 10.5em; /* ヒーロー直後の間隔（旧 .content-block--philosophy の margin-top を集約） */
}

/* 末尾カードの sticky 可動域（次カードの margin-top 相当）。
   sticky は「親の底より下にはみ出せない」。末尾カードの後ろに実ボックスが無いと
   親底＝カード底になり、sticky top（画面上下中央）に着いた瞬間に押し出される。
   ※末尾 .card-stack__item の height を伸ばす方法は親底も一緒に伸びて滞留0のままなので不可 */
.card-stack__dwell {
  height: 120vh;
  pointer-events: none;
  visibility: hidden;
}

/* スタック区間の固定背景。stickyで100vh分をビューポートに張り付かせ、
   negative margin で後続カードの開始位置には影響させない。
   背景色($yellow)を持たせることで、後ろでスクロールする .top__bg を覆い「背景固定」に見せる */
.card-stack__bg {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  height: 100vh;
  margin-bottom: -100vh;
  overflow: hidden;
  background-color: #FFF226;
  transition: background-color 0.6s ease; /* is-dark切替（RECRUITカード最前面時）のクロスフェード */
}

.card-stack__bg-item {
  display: block;
  width: 94.8%;
  height: auto;
  margin: 0 auto 1.25em;
  transition: filter 0.6s ease, opacity 0.6s ease; /* is-dark切替に追従 */
}

/* RECRUITカードが最前面の間の黒背景状態（Figma node 570:3854: セクション地 #2c2c2c = $ink）。
   付け外しは js/top.js の updateFade が担当（class判定・indexハードコードなし。逆スクロールでも復帰）。
   OOHパターンは既存 ooh-01/02.webp（淡黄シェイプ・透過webp）を brightness(0) invert(1) で
   白シェイプ化し、opacity 0.2 で Figma実測「白/グレー20%シェイプ on #2c2c2c」
   （合成値 ≒ #565656、白っぽく見えるパターン）を再現する（チェックバック対応） */
.card-stack__bg.is-dark {
  background-color: #2c2c2c;
}

.card-stack__bg.is-dark .card-stack__bg-item {
  filter: brightness(0) invert(1);
  opacity: 0.2;
}

.card-stack__item {
  position: -webkit-sticky;
  position: sticky;
  /* チェックバック: 内部スクロール(overflow)方式をやめ、カード高に応じた sticky top で見せる
     （参考: recruit.positive.co.jp/graduates/）。top は js/top.js の layoutStack が1枚ずつ算出して
     inline で入れる:
       - 画面に収まるカード → 画面中央に来る値（旧「100vhラッパー＋flex中央寄せ」と同じ見た目）
       - 画面より高いカード → 負値（カード下端が画面下端に一致）。下端まで上がり切ってから貼り付くので
         内部スクロールなしでも通常のページスクロールだけで中身を最後まで読める
     旧実装の height:100vh + flex中央寄せ は、カード高に追従できずJS側での高さ統一が必須だったため廃止。
     下の top / display はJS無効時のフォールバック */
  top: 0;
  display: block;
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* 初回出現フェード: is-standby はJS(top.js)が付与する待機（隠し）状態。
   可視領域に入ったら解除され、下からフェードインで出現する。
   JS無効環境では付与されないため最初から表示（隠れっぱなしにならない） */
.card-stack__item.is-standby {
  transform: translateY(40px);
  transition: none;
}

.card-stack__item + .card-stack__item {
  /* PCのカード間隔＝前カードが貼り付いてから次カードが到達するまでのスクロール量。
     数値を上げると「待ち」が長くなり、下げると次カードが早く出る。
     チェックバック(最新): 150vh → 120vh。1枚あたりの待ち時間を2割短縮した。
     ※SPは下のメディアクエリで 5vh を別途持っている（貼り付き位置の考え方が違うため） */
  margin-top: 120vh;
}

/* 重なり順: sticky(=positioned)要素はz-index未指定ならDOM順で描画されるため、
   後のカードほど自然に手前になる（明示的なz-indexは不要。背景(__bg)は最初の子なので最背面） */
/* SP: スタック演出を有効のまま、固定位置と間隔だけSP向けに調整
   （チェックバック: SPでも「次のカードが下から来て上に重なる」挙動にする） */
@media screen and (max-width: 768px) {
  /* SP: カード本体の中身 .content-block__inner をスクロール領域にする。
     高さ上限を画面の約70%に抑え、__inner を一番下まで読み切ると overscroll が
     ページ側へ連鎖して次の .card-stack__item が下から出てくる（＝1枚読み切り→次カード）。
     .card-stack__item 自身はスクロールを持たない“sticky枠”として振る舞う。
     Lenisはタッチをスムージングしない既定設定＋item側 data-lenis-prevent-touch で
     カード内スクロールは常にネイティブ（PCのwheelスムージングには不干渉）。 */
  .card-stack__item {
    /* SP固定ヘッダー(16vw)＋奥カードの覗き分。ヘッダー高16vw(common.scss)に揃えるためcalc維持 */
    top: calc(8vw + 40px); /* JS無効時のフォールバック（通常は layoutStack が上書き） */
  }
  /* チェックバック(3回目→4回目): カード同士のマージン＝スクロール中の前カード下端と
     次カード上端の視覚的な間隔そのもの。
     「次のカードはスペースを空けずに付随して付いてくる」仕様のため 20vh → 5vh に短縮
     （ほぼ数珠つなぎで追走する）。
     貼り付き位置が「下端＝画面中央(50vh)」（js/top.js の SP_STICK_BOTTOM_RATIO）なので、
     50vh 未満だと前カードの固定時点で次カードは既に画面内に入って追走している
     （5vh: 固定時点で次カード上端は中央+5vh の位置）。
     間隔を広げたい→数値を上げる（50vh 以上にすると固定後に「待ち」が生まれる）。
     フェード開始の遅延（次カードが半分以上重なってから）はマージンではなく
     js/top.js の接近判定ライン（SP: -75%）が担当。単位は画面高基準の vh（PC側は 150vh） */
  .card-stack__item + .card-stack__item {
    margin-top: 5vh;
  }
  .card-stack__dwell {
    height: 5vh; /* 末尾カードの sticky 可動域も SP のカード間隔に揃える */
  }
  /* チェックバック(5回目): 通過カードの消え方を「一発のtransition（-8vh＋フェード）」から
     スクロール連動に変更。次カードが前カード（貼り付き済み）の下端に触れてから
     自分の定位置（sticky top）に到達し切るまでの行程を進捗0〜1とし、
     js/top.js の updateCoverProgress が毎フレーム --cover-progress に入れる。
     前カードはそれに応じて scale 1→0.85 / opacity 1→0 へ「少しずつ」変化する
     （逆スクロールでは同じ経路で戻る）。縮小率を変えたい場合は 0.15 を調整。
     スクロール連動のため transform/opacity の transition は切る（残すと0.4s遅れて
     追従するゼリー状の動きになる。background-color の transition のみ維持）。
     PC側の積み上げ transform と、後方で定義される .is-covered/.is-faded を打ち消す必要があるため、
     .card-stack を前置して状態クラス側（0,2,0）より詳細度を上げている。
     JS無効・is-flat 時は --cover-progress が入らないので scale(1)/opacity:1 の素の表示に戻る */
  .card-stack .content-block,
.card-stack .branding-teaser,
.card-stack .content-block.is-covered,
.card-stack .branding-teaser.is-covered {
    transform: scale(calc(1 - var(--cover-progress, 0) * 0.15));
    opacity: calc(1 - var(--cover-progress, 0));
    transition: background-color 0.4s ease;
  }
  /* 透明になったカードがタップを拾わないようにする
     （.is-covered は「次のカードと重なり切った」時点で js/top.js が付与する） */
  .card-stack .content-block.is-covered,
.card-stack .branding-teaser.is-covered {
    pointer-events: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .card-stack__dwell {
    height: 0; /* sticky 可動域は不要。通常フローの大きな空きを防ぐ */
  }
  .card-stack__bg {
    display: none;
  }
  .card-stack__item {
    position: static;
    top: auto;
    height: auto;
    display: block;
    min-height: 0;
  }
  .content-block {
    transform: none;
    opacity: 1;
  }
}
.card-stack.is-flat .card-stack__dwell {
  height: 0; /* sticky 可動域は不要。通常フローの大きな空きを防ぐ */
}

.card-stack.is-flat .card-stack__bg {
  display: none;
}

.card-stack.is-flat .card-stack__item {
  position: static;
  top: auto;
  height: auto;
  display: block;
  min-height: 0;
}

.card-stack.is-flat .content-block {
  transform: none;
  opacity: 1;
}

/* フローティングバナー（header.php共通の .fl-bnr / .fl-bnr2 / .fl-bnr3）のTOP専用ゲート。
   チェックバック対応: ファーストビューでJS実行前に一瞬見える（FOUC）のを防ぐため
   CSSで「デフォルト非表示」とし、top.js が表示条件（最初のカードが画面下1/3ラインに
   達した後 かつ フッター非表示中）を満たした時だけ is-shown を付与する。
   JS無効環境向けの救済は header.php の noscript スタイルが担当 */
.fl-bnr,
.fl-bnr2,
.fl-bnr3 {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.fl-bnr.is-shown,
.fl-bnr2.is-shown,
.fl-bnr3.is-shown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* スクロール促進インジケータ（.scroll-hint、TOP専用。マークアップは index.php 冒頭）。
   カードスタック区間(.card-stack)がビューポートに入っている間だけ、js/top.js が is-shown を
   付与して画面下左端に固定表示する（デフォルト非表示＝JS無効時は出ない）。
   カードの左余白（カード幅90%・左右5%）に収まる位置だが、狭いPC幅でカード左端と重なることが
   あるため mix-blend-mode: difference を掛け、白($white)を下地に応じて色反転させて視認性を確保
   （白カード上=黒 / 黒背景(is-dark)上=白 / 黄背景上=補色系）。
   pointer-events:none でカード内リンクのクリック・ホバーは一切妨げない */
.scroll-hint {
  position: fixed;
  left: 1.875em;
  bottom: 1.875em;
  z-index: 30; /* .scroll-top(common.scss)と同層。ヘッダー(40)・フローティングバナー(39)より下 */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.625em;
  mix-blend-mode: difference;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.scroll-hint.is-shown {
  opacity: 1;
  visibility: visible;
}

.scroll-hint__label {
  writing-mode: vertical-rl; /* 縦組み（英字は自動で90度回転） */
  font-family: "Kumbh Sans", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 600;
  font-size: 0.75em;
  letter-spacing: 0.2em;
  color: #fff; /* difference の反転前提色（下地に応じて黒/白/補色に転ぶ） */
}

/* 矢印: 縦線(::before)＋矢じり(::after)を1ブロックにし、下へ流れるループで「下へスクロール」を示す */
.scroll-hint__arrow {
  position: relative;
  width: 0.875em;
  height: 2.75em;
  -webkit-animation: scroll-hint-flow 1.8s ease-in-out infinite;
          animation: scroll-hint-flow 1.8s ease-in-out infinite;
}

.scroll-hint__arrow::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  background-color: #fff;
}

.scroll-hint__arrow::after {
  content: "";
  position: absolute;
  bottom: 1px;
  left: 50%;
  width: 0.5625em;
  height: 0.5625em;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: translateX(-50%) rotate(45deg);
}

@-webkit-keyframes scroll-hint-flow {
  0% {
    transform: translateY(-20%);
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    transform: translateY(30%);
    opacity: 0;
  }
}

@keyframes scroll-hint-flow {
  0% {
    transform: translateY(-20%);
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    transform: translateY(30%);
    opacity: 0;
  }
}
/* a11yベースライン: アニメーションは prefers-reduced-motion を尊重（矢印は静止表示に） */
@media (prefers-reduced-motion: reduce) {
  .scroll-hint__arrow {
    -webkit-animation: none;
            animation: none;
  }
}
/* SPは画面下部にフローティングバナー(.fl-bnr-stack)が全幅で常駐して重なるため表示しない */
@media screen and (max-width: 768px) {
  .scroll-hint {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  .card-stack {
    margin-top: 4.4em; /* =16vw。旧 .content-block--philosophy の margin-top(168px)相当 */
  }
}
/*--- 共通コンテンツブロック（PHILOSOPHY〜INTERNATIONAL AD） ---*/
/* sticky はラッパー（.card-stack__item）側が担当。カード本体は通常配置。
   --stack-depth はJS(top.js)が付与する「奥行き」(0=最前面、1〜3=奥)。
   チェックバック（positive.co.jp/recruit 参照）: 奥に行ったカード(depth1〜3)は
   「少し上にずらして上端を覗かせる＋若干縮小＋減光」でアクティブ含め最大4枚の重なりを見せ、
   5枚目(depth4)以降になったカードから is-faded（JS側 FADE_LOOKBACK=4）で1枚ずつフェードアウトする。
   （旧 translateY(-12px) の固定pxずらしは、カードがvw追従になったため%ずらしに変更） */
.content-block {
  position: relative;
  /* チェックバック: カードのサイズ感を画面の90%相当に。
     font-size を vw にすることで中の em() 要素が一括で画面幅に追従する
     （PCデザイン基準: 1200pxフレーム内カード幅1000px → 90vw時の1em = 16px × 90/62.5 ÷ ... = 1.44vw） */
  width: 90%;
  max-width: none;
  /* 横長モニタ(21:9等)でカード高が100vhを超えないよう、vh側にも上限を設ける
     （16:9前後の通常モニタでは 1.44vw < 2.6vh のため従来どおりvw基準） */
  font-size: min(1.44vw, 2.6vh); /* 1.44vw = 16px × (90vw ÷ 1000px) */
  min-height: 30.9375em;
  margin: 0 auto;
  background-color: #fff;
  /* 奥のカード(depth1〜3)は「少し上にずらし＋縮小」で1枚につき約2%ずつ上端を覗かせ、
     アクティブ含め最大4枚が重なって見える。5枚目(depth4)からは is-faded(JS)で非表示。
     translateY の -4.5%/枚 は、中央基準の scale縮小で上端が 2.5%/枚 下がる分を相殺して
     約2%/枚（カード高855px時 ≒17px）ずつ等間隔に覗かせる値。
     減光はdepth連動をやめ、「重なり切った」タイミングでJSが付与する .is-covered が担当
     （深度切替と同時に減光すると、まだ見えているカードが透けるため） */
  transform: translateY(calc(var(--stack-depth, 0) * -4.5%)) scale(calc(1 - var(--stack-depth, 0) * 0.05));
  transition: opacity 0.4s ease, transform 0.4s ease, background-color 0.4s ease;
}

/* 次のカードに覆われた後の減光（JS: currentIndexベース） */
.content-block.is-covered {
  opacity: 1;
}

/* 最前面（アクティブ）のカードはカード地を透過させず不透過にする（チェックバック対応。
   is-front は js/top.js の updateFade が currentIndex のカードにのみ付与） */
.content-block.is-front {
  background-color: #fff;
}

/* JSが付与するフェードアウト状態（奥に埋もれたカードを非表示に） */
.content-block.is-faded {
  opacity: 0;
  pointer-events: none;
}

/* reduced-motion / 非対応環境フォールバック: フェードも無効化 */
@media (prefers-reduced-motion: reduce) {
  .content-block.is-faded {
    opacity: 1;
    pointer-events: auto;
  }
}
.card-stack.is-flat .content-block.is-faded {
  opacity: 1;
  pointer-events: auto;
}

/* リンクが1つしかないカード（PHILOSOPHY / OUR BUSINESS / BOSS / RECRUIT / COMPANY / ACCESS）は
   カード全体がリンク。index.php で .content-block__inner を <a class="content-block__anchor"> で包み、
   中のREAD MOREは入れ子回避のため span.btn-more にしてある（.branding-teaser__anchor と同じ構成）。
   レイアウトは従来どおり .content-block__inner が持つので、ここは
   「ブロック化」と「common.scss の a{color:#000} を打ち消す」だけに留めて見た目を変えない。
   READ MOREのロール演出は common.scss の `a:hover .u-roll-hover .roll__inner` が拾うため、
   カードのどこにホバーしてもボタンが反応する */
.content-block__anchor {
  display: block;
  color: inherit;
}

.content-block__inner {
  position: relative;
  min-height: 30.9375em;
  padding: 2.75em 3.5em 6.625em; /* 下パディングは絶対配置CTA(50px)+36px分の逃げ */
}

.content-block__heading {
  font-family: "Kumbh Sans", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 600;
  font-size: 3.75em;
  line-height: 1.23;
  letter-spacing: 0.05em;
  color: #2c2c2c;
}

.content-block--company .content-block__heading,
.content-block--access .content-block__heading,
.content-block--intl .content-block__heading {
  font-size: 4.0625em;
}

.content-block__subheading {
  margin-top: 0.1333333333em;
  font-size: 0.9375em;
  font-weight: 500;
  line-height: 1.47;
  letter-spacing: 0.1em;
  color: #2c2c2c;
}

.content-block__body {
  margin-top: 1.9333333333em;
  font-size: 0.9375em;
  font-weight: 500;
  line-height: 2.13;
  letter-spacing: 0.1em;
  color: #2c2c2c;
}

.content-block__body--news {
  margin-top: 1.2em;
  line-height: 1.67;
}

.content-block__body--intl {
  letter-spacing: 0.05em;
}

.content-block__cta {
  position: absolute;
  left: 3.5em;
  bottom: 2.25em;
}

/* 右側ダイアグラム（PHILOSOPHY: ピラミッド / OUR BUSINESS: 円形図） */
.content-block__figure {
  position: absolute;
  /* common.scss の全体指定 p{font-size:16px} が当たると .content-block の
     vw基準(min(1.44vw,2.6vh)) / SPのbody基準(3.64vw) の継承が16px固定で切れてしまい、
     見出し・本文だけが画面幅に追従して図版が原寸のまま取り残される。
     font-size を継承に戻して、以下の em() 幅・余白をカード（＝画面幅）追従に揃える */
  font-size: inherit;
}

.content-block__figure img {
  display: block;
  width: 100%;
  height: auto;
}

.content-block__figure--philosophy {
  top: 2.5em;
  right: 3.25em;
  width: 21.75em;
}

.content-block__figure--business {
  top: 4.25em;
  right: 5.0625em;
  width: 22.5625em;
}

/* 右側全高写真（BOSS / COMPANY / RECRUIT） */
.content-block__photo {
  position: absolute;
  top: 0;
  right: 0;
  /* common.scss の全体指定 p{font-size:16px} が当たると .content-block の vw基準
     (min(1.44vw,2.6vh)) / SPのbody基準(3.64vw) の継承が16px固定で切れ、
     カードだけ画面幅に追従して写真が原寸のまま取り残される（＝画面を広げるほど
     位置と比率がカンプからずれる）。継承に戻して以下の em() をカード追従に揃える。
     SP側の各指定（=64.9vw / =5.5vw 等のコメント値）も同じ理由でこれが前提 */
  font-size: inherit;
  width: 26.9375em;
  height: 100%;
  overflow: hidden;
}

.content-block__photo img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.content-block--boss .content-block__body,
.content-block--company .content-block__body {
  max-width: 32.6666666667em; /* 右側写真との重なり回避 */
}

/* 旧: ヒーロー直後のPHILOSOPHY用/「採用について」後のCOMPANY用の個別margin-topは、
   カードスタッキング導入により .card-stack 側の margin-top と sticky 配置で代替するため削除 */
/*--- RECRUIT 固有（Figma node 570:3854: 1200×691フレーム内カード x=94 y=98 w=1000 h=495） ---*/
/* カード背景: Figma支給アセット recruit-card-bg.webp（黄地#ffe34b＋ゴリラ透かしのOVERLAY合成済み・@2x）。
   background-color は画像未ロード時のフォールバック */
.content-block--recruit {
  background-color: #FFF226;
  background-image: url("../images/top/recruit-card-bg.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/* is-front 時の不透過色は白ではなく黄（背景画像が不透過のため実質フォールバック用） */
.content-block--recruit.is-front {
  background-color: #FFF226;
}

/* フォールバック時の輪郭確保（03 REVIEW指摘）:
   is-flat / reduced-motion では固定背景(.card-stack__bg)が消えてページ地($yellow)が露出し、
   黄カードが背景と同化して視覚的に消失するため、枠線で輪郭を確保する
   （通常時は is-dark の黒背景とのコントラストがあるため枠線不要） */
.card-stack.is-flat .content-block--recruit {
  border: 3px solid #2c2c2c;
}

@media (prefers-reduced-motion: reduce) {
  .content-block--recruit {
    border: 3px solid #2c2c2c;
  }
}
.content-block--recruit .content-block__body {
  max-width: 30.8666666667em; /* Figma実測 本文ボックス w=463（右側写真との重なり回避） */
  letter-spacing: 0.05em; /* Figma実測 tracking 0.75px/15px（基底の0.1emより狭い） */
}

/* 写真はBOSS/COMPANYの「右端全高裁ち落とし」と異なり、右端・下端に黄地を残す切り抜き配置
   （Figma実測: カード相対 x=522 y=0 w=408 h=468。右端まで70px・下端まで27px残る） */
.content-block--recruit .content-block__photo {
  right: 4.375em;
  width: 25.5em;
  height: 29.25em;
}

/* 写真下部の白ぼかし帯は、Figma支給の recruit-card-photo.webp（SCREEN合成の白帯焼き込み済み）に
   置き換えたため CSS グラデーション近似（::after）は廃止（チェックバック対応） */
/* 手書き風コピー「汗をかかない広告なんて、ない。」（SVG書き出し images/top/recruit-copy.svg）。
   写真下部〜黄地にまたがって重ねる（Figma実測: カード相対 右端-6px / 下端-15px / w=523.98） */
.content-block__copy {
  position: absolute;
  /* .content-block__photo と同じ理由（p{font-size:16px}で継承が切れる）。
     写真と同じ基準に揃えないと、画面幅を変えたときに写真とコピーの重なり位置がずれる */
  font-size: inherit;
  right: 0.375em;
  bottom: 0.9375em;
  width: 32.75em;
}

.content-block__copy img {
  display: block;
  width: 100%;
  height: auto;
}

/*--- NEWS & WORKS 固有 ---*/
/* チェックバック(5回目): PCはカード外形を他カードと共通の高さ・停止位置で止め、
   リード文＋記事一覧（ラッパー __news-scroll）を「ページスクロール連動」の内側スクロールで読ませる
   （下の @include pc と js/top.js の updateNewsScroll 参照。読み込みは index.php の 8件。
     固定で残るのは見出し・サブコピー・ALL VIEW のみ）。
   旧「一覧をwheelで直接内側スクロール(overflow-y:auto)」はLenis干渉で全廃した経緯があるが、
   今回はホイールを奪わず、ページのスクロール位置から進捗を導いて scrollTop に反映するだけ
   なので干渉しない。__inner はflex縦組みにして、一覧が「残り高さ」を受け取れるようにする */
.content-block--news .content-block__inner {
  display: flex;
  flex-direction: column;
  /* チェックバック: PCの下余白は 40→28 に詰めた値を維持。
     SP側は @media(max-width:768px) で em(35.2) に上書きされるため影響しない */
  padding-bottom: 1.75em;
}

/* スクロール領域以外の子要素（見出し・サブコピー・ALL VIEW）が縮まないようにする（flex縦組みの圧縮防止）。
   リード文＋一覧を包むラッパー(__news-scroll)だけは下の @include pc 内で flex:1 に上書きし、
   内側スクロール領域にする（チェックバック: リード文も固定せず一覧と一緒に流す） */
.content-block--news .content-block__inner > * {
  flex-shrink: 0;
}

.content-block__more {
  position: absolute;
  top: 3.75em;
  left: 61.4%;
  /* PCは幅基準(1.44vw)で大きくする。親.content-blockの min(1.44vw,2.6vh) だと横長モニタでvh頭打ちになり
     幅で大きくならないため、__moreは幅成分1.44vwを明示（SPは@media側の font-size:inherit が後勝ちで無効化） */
  font-size: 1.44vw;
}

.content-block__more a {
  display: inline-flex;
  align-items: center;
  height: 2.8666666667em;
  padding: 0 0.4em 0 1.3333333333em;
  border: 2px solid #2c2c2c;
  border-radius: 999px;
  font-family: "Kumbh Sans", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 600;
  font-size: 0.9375em;
  letter-spacing: 0.05em;
  color: #2c2c2c;
  transition-property: opacity;
  transition-duration: 0.4s;
}

.content-block__more a:hover {
  opacity: 0.85;
}

.content-block__more-label {
  display: block;
}

/* 白背景ゾーンの矢印: 通常時 b-yajirushi(黄矢印) → hover y-yajirushi(黒矢印) */
.content-block__more-icon {
  display: block;
  width: 1.8666666667em; /* 親aの font-size 15px 基準 */
  height: 1.8666666667em;
  margin-left: 0.6666666667em;
  background-image: url("../images/top/b-yajirushi.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.content-block__more-icon.ptn2 {
  background-image: url("../images/top/y-yajirushi-2.svg");
}
.content-block__more-icon.ptn3 {
  background-image: url("../images/top/y-yajirushi-3.svg");
}

/* チェックバック: hoverでの矢印画像切替は廃止（テキストのロール演出に統一） */
/* スクロールコンテナはカード側(.content-block--news)へ移したため、ここは中身なりの高さで並べるだけ */
.news-list {
  /* チェックバック(3回目): PCの全カード高さをさらに縮めるため一覧幅を 798→660 に。
     サムネは16:9なので幅がそのまま高さに効く（385.4×216.8 → 318.8×179.3）。
     これでNEWSの自然高が 572→534px まで下がり、共通の min-height を下げられる。
     一覧は margin auto で中央寄せなので、本文より内側に入った中央グリッドとして見える。
     SPは @media 側の width:100% が後勝ちのため影響しない */
  width: 41.25em;
  max-width: 100%;
  /* 上マージンも 20→10 に圧縮（同上。SPは @media 側の margin-top: em(26.4) が後勝ち） */
  margin: 2.1875em auto 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: flex-start;
}

/* チェックバック: 大小2種構成をやめ、全カードを大カードと同じ2列並びに統一 */
.news-list__item {
  width: 48.3%;
  margin-top: 2.8125em;
}

.news-list__item:nth-child(-n+2) {
  margin-top: 0;
}

/* チェックバック(5回目): NEWSカードの止まる位置・外形を他カードと完全に共通化する。
   全カードは min-height em(545) で白い面の高さを揃え、NEWSは記事が何件（index.php: 8件）
   あっても同じ em(545) に「固定」し、あふれた一覧はページスクロール連動の内側スクロールで
   読ませる（js/top.js の updateNewsScroll があふれ量ぶんstickyラッパーを下に伸ばし、
   スクロール進捗を .news-list の scrollTop に1:1反映。読み切った時点のカードは他カードと
   同じ上端・下端のままなので、そのまま次のBOSSカードが通常どおり重なってくる）。
   高さ固定は is-stacking（JSのsticky演出が稼働している時）だけに掛ける:
   フラット/reduced-motion/JS無効では通常フローの中身なり高さに戻り、全記事がそのまま読める */
@media screen and (min-width: 769px) {
  /* .branding-teaser__anchor の PC 用 min-height はここでは指定しない。
     同名の基底ルールがこのブロックより後（style_top.scss 下部）に書かれており、
     詳細度が同じ(0,1,0)ためメディアクエリ側が後勝ちで打ち消されてしまうため。
     末尾カードだけ高さが em(495) のまま＝他カードより50単位低くなり、
     layoutStack() の中央寄せ位置が1枚だけズレる原因になっていた。
     → 指定は .branding-teaser__anchor 自身の中（下部）に @include pc で持たせる */
  .content-block__inner {
    min-height: 34.0625em;
  }
  .card-stack.is-stacking .content-block--news .content-block__inner {
    height: 34.0625em;
  }
  /* リード文＋一覧のラッパー(__news-scroll)を「残り高さぴったり」の内側スクロール領域にする
     （上の > * flex-shrink:0 を上書き。チェックバック: リード文も固定せず一覧と一緒に流す）。
     overflow:hidden なのでwheel等でユーザーが直接スクロールすることはできず、
     scrollTop は js/top.js だけが動かす（＝Lenis・ネイティブスクロールと競合しない） */
  .card-stack.is-stacking .content-block--news .content-block__news-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }
  /* チェックバック: 内側スクロール中、窓の上端で見切れる記事サムネが固定側の
     「ニュース・事例」に密着して見えるため、サブコピー下の余白＋白→透明のグラデ帯で
     「サブコピーの下へ自然に滑り込む」フェードにする（内側スクロールが効くこの構成の
     時だけ。SP・フラット時は無関係）。余白の内訳は3層:
       1) サブコピーの padding-bottom em(8) … 常に白のまま残る最小の間
       2) スクロール窓の padding-top em(20) … フェードの助走区間。ここを設けることで、
          スクロール前の初期状態ではリード文が帯の下から始まり、白ボケしない
       3) ::after のグラデ帯 em(28) … 窓の上端から 1)+2) を覆って中身側へ少し食い込む。
          通過中のコンテンツは帯の中で徐々に白に溶け、完全に消えてから窓外へ出る */
  .card-stack.is-stacking .content-block--news .content-block__subheading {
    position: relative; /* 下の::after（フェード帯）の基準 */
    padding-bottom: 0.5333333333em; /* =8px相当（自身のfont-size 15px補正） */
  }
  .card-stack.is-stacking .content-block--news .content-block__news-scroll {
    padding-top: 1.25em; /* フェードの助走区間（帯の食い込み分より深い位置から中身が始まる） */
  }
  /* グラデ帯本体（.content-block--recruit の写真下白グラデと同じ被せ方式。
     カード地は最前面時常に不透過の $white なので白被せで馴染む）。
     サブコピーの::afterに持たせる理由: 窓(.content-block__news-scroll)自身の擬似要素は
     overflow:hidden の中でコンテンツと一緒にスクロールしてしまい固定の帯にできないため。
     positioned な::afterは後続の通常フロー（スクロール窓）より手前に描画される。
     pointer-events:none で帯の下に透けて見える記事リンクの操作は妨げない */
  .card-stack.is-stacking .content-block--news .content-block__subheading::after {
    content: "";
    position: absolute;
    top: 100%; /* サブコピーのpadding下端 ＝ スクロール窓の上端 */
    left: 0;
    right: 0;
    height: 1.8666666667em; /* フェード帯の深さ（自身のfont-size 15px補正） */
    background: linear-gradient(to bottom, #fff, rgba(255, 255, 255, 0));
    pointer-events: none;
  }
}
.news-list__anchor {
  display: block;
  color: #2c2c2c;
}

.news-list__anchor:hover .news-list__thum img {
  opacity: 0.85;
}

.news-list__thum {
  aspect-ratio: 16/9;
  overflow: hidden;
  margin-bottom: 0.625em;
}

.news-list__thum img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  transition-property: opacity;
  transition-duration: 0.4s;
}

.news-list__category {
  display: inline-block;
  margin-right: 1em;
  font-size: 0.75em;
  font-weight: 500;
  line-height: 1.6;
}

.news-list__category::before {
  content: "●";
  font-size: 0.8333333333em; /* 親 .news-list__category の font-size 12px 基準 */
  color: #ffa42c;
  margin-right: 0.5em;
  position: relative;
  top: -0.1em;
}

.news-list__category--news::before {
  color: #ab0113;
}

.news-list__category--works::before {
  color: #0180a3;
}

.news-list__category--info::before {
  color: #7ba051;
}

.news-list__category--trend::before {
  color: #876187;
}

.news-list__title {
  margin-top: 0.2666666667em;
  font-size: 0.9375em;
  font-weight: 700;
  line-height: 1.4;
  min-height: 2.8em;
}

.news-list__date {
  margin-top: 0.6666666667em;
  font-size: 0.75em;
  font-weight: 500;
}

.news-list__empty {
  width: 100%;
  font-size: 0.9375em;
}

/* 旧: 採用について（BOSSカード内下部のリンク .content-block__recruit-link）は
   SP正式デザイン確定（Figma SPに存在しない）に伴いPC/SPとも削除（docs-renewal/translate-top-sp.md 0章#4） */
/*--- 8. ACCESS 住所ブロック ---*/
.access-list {
  position: absolute;
  top: 9em;
  right: 3.5625em;
  width: 25.375em;
}

.access-list__item + .access-list__item {
  margin-top: 2.4375em;
}

.access-list__name {
  background-color: #2c2c2c;
  border-radius: 3px;
  color: #fff;
  font-size: 0.9375em;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 2.6; /* ラベル高 39px / font-size 15px */
  text-align: center;
}

.access-list__address {
  margin-top: 0.8666666667em;
  font-size: 0.9375em;
  font-weight: 500;
  line-height: 1.67;
  letter-spacing: 0.05em;
  color: #2c2c2c;
}

/*--- 9. INTERNATIONAL AD バナー ---*/
.intl-banners {
  margin-top: 3.3125em;
  display: flex;
  justify-content: center;
}

.intl-banners__item {
  /* common.scss の全体指定 p{font-size:16px} が当たると継承が16px固定で切れ、
     width(438px) と バナー間マージン(25px) だけカンプ原寸に張り付いて
     max-width(48.6%) 側だけが広がる＝画面を広げるほど左右が余って比率が崩れる。
     継承に戻すと width も margin も max-width と同率でスケールし、比率が保たれる
     （.content-block__figure / __photo / __copy と同じ対応） */
  font-size: inherit;
  width: 27.375em;
  max-width: 48.6%;
}

.intl-banners__item + .intl-banners__item {
  margin-left: 1.5625em;
}

.intl-banners__item img {
  display: block;
  width: 100%;
  height: auto;
}

/*--- 10. ブランド構築支援（Do Branding） ---*/
/* 背景は独自の濃い黄 $yellow-deep(#ffe10d)。SP正式デザイン実測値（node 565:4743）を正とし、
   PC Figma(node 287:1982 = #ffde00)との差は視覚判別不能のためPC/SPとも $yellow-deep に統一（規約A3対応） */
/* カードスタック8枚目として参加（.card-stack__item 内）。
   奥行き演出（--stack-depth）・フェードは .content-block と同じ仕組みをJS(top.js)から受ける */
.branding-teaser {
  position: relative;
  z-index: 1;
  /* .content-block と同じ「画面の90%相当＋vw追従」（チェックバック対応） */
  width: 90%;
  max-width: none;
  font-size: min(1.44vw, 2.6vh);
  margin: 0 auto;
  background-color: #ffe10d;
  /* .content-block と同じ重なり演出（上ずらし＋縮小。減光は .is-covered） */
  transform: translateY(calc(var(--stack-depth, 0) * -4.5%)) scale(calc(1 - var(--stack-depth, 0) * 0.05));
  transition: opacity 0.4s ease, transform 0.4s ease, background-color 0.4s ease;
}

.branding-teaser.is-covered {
  opacity: 1;
}

/* 最前面（アクティブ）時は不透過（.content-block.is-front と同趣旨） */
.branding-teaser.is-front {
  background-color: #ffe10d;
}

.branding-teaser.is-faded {
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .branding-teaser {
    transform: none;
    opacity: 1;
  }
  .branding-teaser.is-faded {
    opacity: 1;
    pointer-events: auto;
  }
}
.card-stack.is-flat .branding-teaser {
  transform: none;
  opacity: 1;
}

.card-stack.is-flat .branding-teaser.is-faded {
  opacity: 1;
  pointer-events: auto;
}

.branding-teaser__anchor {
  /* チェックバック: 画面を広げると中身が上に寄る件。
     旧実装は padding-top: em(141) の固定オフセットで中身を上から押し下げる作りだった。
     カードの font-size は min(1.44vw, 2.6vh) なので、横長画面では vh 側で頭打ちになり、
     em で組まれた中身だけがカード幅の伸びに追いつかなくなる。
     その結果、中身が相対的に縮んで上に寄り、下にだけ余白が溜まっていた。
     上下paddingを対称にしたうえで flex の天地中央寄せにし、
     余りが常に上下へ等分される（＝どの画面幅でもカードの中央に来る）ようにする */
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 30.9375em;
  /* PCは他カード(.content-block__inner)と同じ高さに揃える。
     カードの止まる位置は js/top.js の layoutStack() が実測高さから算出するため、
     ここが50単位低いと末尾カードだけ中央停止位置がズレる */
  padding: 2.5em 1.25em;
  text-align: center;
  transition-property: opacity;
  transition-duration: 0.4s;
}
@media screen and (min-width: 769px) {
  .branding-teaser__anchor {
    min-height: 34.0625em;
  }
}

.branding-teaser__anchor:hover {
  opacity: 0.85;
}

.branding-teaser__text {
  font-size: 1.125em;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: #2c2c2c;
}

.branding-teaser__logo {
  /* チェックバック: 画面幅に対して比率を保つ。
     Figma: カード幅1000px・左右padding各20px＝内容幅960px に対しロゴ590px ＝ 61.5%。
     em(590) だと横長画面で min(1.44vw, 2.6vh) の vh 側に頭打ちされ、
     カード幅が伸びてもロゴだけ大きくならず相対的に小さく見えていた。
     カード幅に対する％で持たせれば、どの画面幅でも同じ見え方になる
     （SPは下のメディアクエリで em(282) の実測値に上書きする） */
  width: 47.5%;
  margin: 1.3125em auto 0;
}

.branding-teaser__logo img {
  display: block;
  width: 100%;
  height: auto;
}

.branding-teaser__cta {
  margin-top: 1.5em;
  display: flex;
  justify-content: center;
}

/*--- 11. CONTACT CTA ---*/
.contact-cta {
  position: relative;
  z-index: 1;
  max-width: 51.25em;
  width: 68.3%;
  margin: 6.5625em auto 0;
  background-color: #fff226;
  border: 3px solid #2c2c2c;
  border-radius: 1.25em;
  text-align: center;
  padding: 8.5em 1.25em 4.875em;
}

.contact-cta__heading {
  font-family: "Kumbh Sans", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 600;
  font-size: 3.125em;
  line-height: 1.24;
  letter-spacing: 0.05em;
  color: #2c2c2c;
}

.contact-cta__text {
  margin-top: 0.4666666667em;
  font-size: 0.9375em;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: #2c2c2c;
}

.contact-cta__button {
  margin-top: 2.8125em;
  display: flex;
  justify-content: center;
}

/*--- 共通 READ MORE ボタン（テキスト + 円形矢印アイコン） ---*/
.btn-more {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 10.6666666667em;
  font-family: "Kumbh Sans", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 600;
  font-size: 0.9375em;
  letter-spacing: 0.05em;
  color: #2c2c2c;
}

.btn-more__label {
  display: block;
}

/* 円形矢印アイコン: hoverでの画像切替はなし（テキストのロール演出に統一）。hoverはscaleのみ */
.btn-more__icon {
  display: block;
  width: 3.2em; /* 親 .btn-more の font-size 15px 基準 */
  height: 3.2em;
  background-image: url("../images/top/y-yajirushi.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition-property: transform;
  transition-duration: 0.5s;
  transition-timing-function: ease-in-out;
}

.btn-more:hover .btn-more__icon,
a:hover .btn-more .btn-more__icon {
  transform: scale(1.1);
}

/* 黄背景ゾーン（branding-teaser / contact-cta）用アイコン */
.btn-more--invert .btn-more__icon {
  background-image: url("../images/top/b-yajirushi.svg");
}
.btn-more--invert .btn-more__icon.ptn2 {
  background-image: url("../images/top/y-yajirushi-2.svg");
}
.btn-more--invert .btn-more__icon.ptn3 {
  background-image: url("../images/top/y-yajirushi-3.svg");
}

/* =============================================
   SP（正式SPデザイン Figma node 561:2111 / 440px フレーム基準。
   実測値は docs-renewal/translate-top-sp.md 1章・3章。vw = px ÷ 440 × 100。
   既存TOPのMQ慣習 max-width:768px を踏襲）
============================================= */
@media screen and (max-width: 768px) {
  /*--- ページラッパー ---*/
  .top {
    padding-top: 4.4em; /* =16vw（SP固定ヘッダー高16vwと同値） */
    padding-bottom: 4.5375em; /* =16.5vw。PC 103px相当 */
  }
  .footer {
    margin-top: 0;
  }
  /* 開始位置 = .hero__copy の下から2行目の先頭（チェックバック指定）。
     SPは全要素がvw追従なので内訳もvwで積む:
       16vw     .top padding-top
     + 177.78vw .kv 高さ（aspect-ratio 9/16 → 100vw × 16/9）
     + 10vw     .hero__heading margin-top
     + 35.56vw  見出し2行（1行目15.67 + 行間3.98 + 2行目15.91）
     + 5vw      .hero__copy margin-top
     + 81.74vw  コピー1〜9行目（1行 = 40px/440px = 9.08vw）
     = 326vw    ※SPのコピーは11行なので、9行送った位置が「下から2行目の先頭」 */
  .top__bg {
    top: 326vw;
  }
  .top__bg-item {
    margin-bottom: 1.1em; /* =4vw */
  }
  /*--- ヒーロー ---*/
  /* SPは2行構成の専用画像に切替（Figma実測: 左端x=28→6.4vw、
     1行目 561:2898 = 222.8×68.9、2行目 561:2908 = 330×69.2、行間17.5px→4vw） */
  .hero__heading {
    width: auto;
    margin: 2.75em 0.5em 0 1.75em; /* =10vw 1.8vw 0 6.4vw。コピー(.hero__copy)と同じ左揃え */
    padding: 0; /* SPは .hero__copy-line の左右paddingが0のため、PC用のインセットを打ち消す */
  }
  .hero__heading .hero__heading-img--pc {
    display: none;
  }
  .hero__heading .hero__heading-img--sp1 {
    display: block;
    width: 13.925em; /* Figma実測 222.8px */
  }
  .hero__heading .hero__heading-img--sp2 {
    display: block;
    width: 20.625em; /* Figma実測 330px */
    margin-top: 1.09375em; /* Figma実測 行間17.5px */
  }
  .hero__copy {
    width: auto;
    margin: 1.2222222222em 0.4444444444em 0 1.5555555556em; /* Figma実測: コピー左端28px・右余白8px（x=28, w=404。20文字の行が折り返さない幅を確保）。第2引数=自身のfont-size 18px補正 */
    font-size: 1.125em; /* Figma実測 18px（node 561:2918） */
    line-height: 2.22; /* Figma実測 40px/18px */
    letter-spacing: 0.1em;
  }
  /* 行セットの出し分け（PC10行 → SP11行。Figma node 561:2918） */
  .hero__copy-lines--pc {
    display: none;
  }
  .hero__copy-lines--sp {
    display: inline;
  }
  .hero__copy-line {
    padding: 0; /* SPのマーカーは「行テキスト幅ちょうど」のため左右paddingなし（Figma: 下線幅=行の文字幅） */
  }
  /* SPのマーカーはPCの「行の下55%の白帯」ではなく「文字の下端に半がかりする白い太下線」
     （Figma実測 Vector 54〜64: 線幅11px・各行のテキスト幅・文字下端の少し下を中心に通る） */
  .hero__copy-line::before {
    height: 0.7em;
    bottom: 0em;
  }
  /*--- 共通コンテンツブロック ---*/
  /* SPもスタック演出参加のため、カード間隔は .card-stack__item 側の margin(8vw) が担当 */
  .content-block {
    width: 92.3%; /* Figma実測: card x=17.5, w=406（片側余白17px=3.86vw） */
    font-size: inherit; /* PC用のvw基準(1.44vw)を打ち消し、SPのbody基準(3.64vw)に戻す */
    min-height: 0;
    margin: 0 auto;
  }
  .content-block__inner {
    min-height: 0;
    padding: 2.125em 1.90625em 1.16875em; /* Figma実測: 上34px / 左右30.5px / 下18.7px（CTA下端→カード下端） */
  }
  .content-block__inner.ex {
    padding: 2.125em 1.90625em 4.5em;
  }
  /* チェックバック対応: カード内スクロール導入に伴い中身をコンパクト化。
     英字見出しは Figma実測(60px=11.2vw) から約1割縮小、テキスト下の余白も詰める */
  .content-block__heading {
    font-size: 2.80625em; /* =10.2vw。Figma実測 60px(11.2vw) → 約1割縮小 */
    line-height: 0.92; /* Figma実測 55px/60px */
  }
  /* PC側の65px系統分岐（company/access/intl）はSPでは存在しないため同値で打ち消す */
  .content-block--company .content-block__heading,
.content-block--access .content-block__heading,
.content-block--intl .content-block__heading {
    font-size: 2.80625em; /* =10.2vw */
  }
  .content-block__subheading {
    margin-top: 0.3571428571em; /* Figma実測 見出し下端→5px（自身のfont-size 14px補正） */
    font-size: 0.875em; /* Figma実測 14px */
  }
  .content-block__body {
    margin-top: 1.4142857143em; /* =4.5vw。Figma実測30px(6.8vw) → コンパクト化で約20pxに詰め */
    font-size: 0.875em; /* Figma実測 14px */
    line-height: 2.29; /* Figma実測 32px/14px */
  }
  .content-block__body--news {
    margin-top: 1.4142857143em; /* 他セクションと同じ詰め幅 */
    line-height: 2.29; /* Figma実測 32px/14px（node 561:4256 h=128=4行） */
  }
  /* CTA「READ MORE」は右寄せ（Figma実測: ボタン右端 x=400 ≒ カード右端-23.5px。
     コンテンツボックス右端393pxより7px外に出るため負マージンで合わせる） */
  .content-block__cta {
    position: static;
    margin-top: 0.9625em; /* =3.5vw。Figma実測21px(4.8vw) → コンパクト化で詰め */
    margin-right: -0.4375em; /* Figma実測 ボタン右端をコンテンツ右端+7pxへ */
    text-align: right;
  }
  .content-block--business .content-block__cta {
    margin-top: 2.3125em; /* Figma実測 円形図下端→CTA 37px */
  }
  .content-block__figure {
    position: static;
    margin: 1.1em auto 0; /* =4vw。Figma実測25px(5.7vw) → コンパクト化で詰め */
  }
  .content-block__figure--philosophy {
    width: 19.35em; /* Figma実測 309.6px（node 561:2976、中央寄せ） */
  }
  .content-block__figure--business {
    width: 100%; /* Figma実測 345px = コンテンツ幅いっぱい（node 561:3029） */
    margin-top: 1.7875em; /* =6.5vw。Figma実測41px(9.3vw) → コンパクト化で詰め */
  }
  /* 写真はSPでは全幅裁ち落としではなく、コンテンツ幅346×303pxの切り抜き（Figma実測 node 565:4633/4648） */
  .content-block__photo {
    position: static;
    width: 100%; /* Figma実測 346px = コンテンツ幅 */
    height: 17.85em; /* =64.9vw（Figma実測 303px から調整済みの値） */
    margin: 1.5125em 0 0; /* =5.5vw。Figma実測33px(7.5vw) → コンパクト化で詰め */
  }
  .content-block--company .content-block__photo {
    margin-top: 2.3375em; /* =8.5vw。Figma実測53px(12vw) → コンパクト化で詰め */
  }
  .content-block--boss .content-block__body,
.content-block--company .content-block__body {
    max-width: none;
  }
  /* PHILOSOPHY/COMPANY個別margin-topは廃止。.card-stackのmargin-topに集約 */
  /*--- RECRUIT（SP専用デザイン未支給のため既存SP慣習ベースの暫定実装。支給後に要調整） ---*/
  .content-block--recruit .content-block__body {
    max-width: none;
  }
  /* 写真は他カードのSP慣習（コンテンツ幅×68.9vw切り抜き）に合わせ、PC固有の固定寸法を打ち消す */
  .content-block--recruit .content-block__photo {
    position: relative; /* 下の白グラデ(::after)の基準 */
    right: auto;
    width: 100%;
    height: 18.9375em; /* =68.9vw（Figma実測 303px） */
  }
  /* 縦長写真の頭が切れないよう、SPの切り抜き基準を上端に（チェックバック対応） */
  .content-block--boss .content-block__photo img,
.content-block--recruit .content-block__photo img {
    -o-object-position: center top;
    object-position: center top;
  }
  /* 上基準クロップで recruit-card-photo.webp 焼き込みの白帯（画像下部）が切れるため、
     SPのみコピーSVG視認用の白グラデを復活させる */
  .content-block--recruit .content-block__photo::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 9.35em; /* =34vw。PC比(237/691視覚比)からの暫定近似 */
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.55));
    pointer-events: none;
  }
  /* コピーSVGは通常フローに戻し、負マージンで写真下部に重ねる（PCの重なり位置の暫定近似） */
  .content-block__copy {
    position: relative;
    right: auto;
    bottom: auto;
    width: 100%;
    margin: -4.4em 0 0 auto; /* =-16vw */
  }
  /*--- NEWS & WORKS ---*/
  /* SPもスタック演出参加のため、カードが縦長になりすぎて sticky 固定後に下部が読めなくなるのを防ぐ。
     高さの上限とスクロールは他カードと共通の .content-block（68vh）が持つので、ここは中身なりの高さにする */
  .content-block--news .content-block__inner {
    display: flex;
    flex-direction: column;
    padding-bottom: 2.2em; /* =8vw */
  }
  /*--- ALL VIEW ボタン（レイアウト変更）
         旧: 見出し「NEWS & WORKS」の右横に置く2カラム構成（縦積みテキストの角丸ボックス 83×102px、
             Figma node 561:4499）。
         新: サブコピーの下に、PCと同じ横並びピル型（角丸999px＋右に円形矢印）で置く。
         形状・寸法は基底の .content-block__more a / __more-icon をそのまま使うため、
         ここでは配置とfont-size継承だけを指定して旧SP専用の上書きを撤去している。
         DOM順（サブコピー→ボタン→本文）は index.php 側で並べ替え済み ---*/
  .content-block__more {
    position: static;
    /* common.scss の全体指定 p{font-size:16px} が当たると継承が切れ、
       基底の em() 指定（ボタン高さ43px・矢印28px 等）がpx固定になってvw追従しなくなるため継承に戻す
       （.content-block__figure と同じ対応）。440px幅でFigma原寸になる */
    font-size: inherit;
    margin: 1.375em 0 0.625em; /* 下は .content-block__body--news の margin-top(19.8px)と合わせて約30px */
  }
  /* 円形矢印はSP用に書き出した28px版（$ink円+$yellow矢印）を使う。寸法・左マージンは基底のまま */
  .content-block__more-icon {
    background-image: url("../images/top/allview-arrow.svg");
  }
  /* スクロールはカード側(.content-block)が持つため、ここは幅と上マージンのみ */
  .news-list {
    width: 100%;
    margin-top: 1.65em; /* =6vw */
  }
  /* SPも全カード同一の2列並び（先頭2枚のみ上マージンなし） */
  .news-list__item {
    width: 47.6%;
    margin-top: 2.2em; /* =8vw */
  }
  .news-list__item:nth-child(-n+2) {
    margin-top: 0;
  }
  .news-list__thum {
    margin-bottom: 0.6625em; /* =2.4vw */
  }
  .news-list__category {
    font-size: 0.825em; /* =3vw */
  }
  .news-list__category::before {
    font-size: 0.803030303em; /* =2.4vw（親 .news-list__category 13.2px 基準） */
  }
  .news-list__title {
    margin-top: 0.2857142857em; /* =1vw（自身のfont-size 15.4px補正） */
    font-size: 0.9625em; /* =3.5vw */
    min-height: 0;
  }
  .news-list__date {
    margin-top: 0.6875em; /* =2vw（自身のfont-size 12.8px補正） */
    font-size: 0.8em; /* =2.9vw */
  }
  /*--- ACCESS ---*/
  .access-list {
    position: static;
    width: 100%;
    margin-top: 4.125em; /* Figma実測 本文下端→住所ラベル 66px */
  }
  .access-list__item + .access-list__item {
    margin-top: 3.6875em; /* Figma実測 住所下端→次ラベル 59px */
  }
  .access-list__name {
    font-size: 0.875em; /* Figma実測 14px */
    line-height: 2.79; /* Figma実測 ラベル高 39px / 14px */
  }
  .access-list__address {
    margin-top: 0.9285714286em; /* Figma実測 13px（自身のfont-size 14px補正） */
    font-size: 0.875em; /* Figma実測 14px */
    line-height: 1.79; /* Figma実測 25px/14px（3行組） */
  }
  /* ACCESSはカード高835pxに対して内容が少なく、CTAがカード下端付近に固定配置されている
     （Figma実測: 住所下端 y=6501 → CTA y=6650 の間隔149px）。カード高をFigmaに合わせるための余白 */
  .content-block--access .content-block__cta {
    margin-top: 9.3125em; /* Figma実測 149px */
  }
  /*--- INTERNATIONAL AD ---*/
  .intl-banners {
    display: block;
    margin-top: 2.875em; /* Figma実測 本文下端→バナー 46px */
  }
  .intl-banners__item {
    width: 100%;
    max-width: none;
  }
  .intl-banners__item + .intl-banners__item {
    margin-left: 0;
    margin-top: 1em; /* Figma実測 バナー間 16px */
  }
  /*--- ブランド構築支援 ---*/
  /* カード間隔は .card-stack__item 側の margin(8vw) が担当 */
  .branding-teaser {
    width: 92.3%; /* content-block と同じカード幅（Figma実測 406/440） */
    font-size: inherit; /* PC用のvw基準(1.44vw)を打ち消し、SPのbody基準(3.64vw)に戻す */
    margin-top: 0;
    border-width: 2px;
  }
  .branding-teaser__anchor {
    min-height: 0;
    padding: 5.75em 1.1em 2.41875em; /* Figma実測: 上92px / 下38.7px（カード高294px, node 565:4743） */
  }
  .branding-teaser__text {
    font-size: 0.65em; /* Figma実測 10.4px（node 565:4753） */
    font-weight: 700; /* Figma実測 Noto Sans JP Bold */
  }
  .branding-teaser__logo {
    width: 17.625em; /* Figma実測 342px（node 565:4750） */
    max-width: none;
    margin-top: 0.8125em; /* Figma実測 テキスト下端→ロゴ 13px */
  }
  .branding-teaser__logo-fallback {
    font-size: 3.575em; /* =13vw */
  }
  .branding-teaser__cta {
    margin-top: 1.875em; /* Figma実測 ロゴ下端→CTA 30px */
  }
  /*--- CONTACT CTA ---*/
  .contact-cta {
    width: 22.5625em; /* Figma実測 361px（node 565:4755） */
    margin: 2.875em auto 0; /* Figma実測 brandingカード下端→46px */
    border-width: 3px; /* Figma実測 stroke 3px（PCと同値） */
    border-radius: 1.25em; /* Figma実測 20px */
    padding: 4.375em 1.1em 2.73125em; /* Figma実測: 上70px / 下43.7px */
  }
  .contact-cta__heading {
    font-size: 2.8125em; /* Figma実測 45px（node 565:4757） */
  }
  .contact-cta__text {
    margin-top: 0.9285714286em; /* Figma実測 見出し下端→13px（自身のfont-size 14px補正） */
    font-size: 0.875em; /* Figma実測 14px */
    line-height: 1.79; /* Figma実測 25px/14px（2行組） */
  }
  .contact-cta__button {
    margin-top: 1.875em; /* Figma実測 本文下端→30px */
  }
  /*--- READ MORE ボタン ---*/
  /* Figma実測: 全体129×40px、ラベル右詰め+右側に円形アイコン（間隔約12px）。
     固定幅+space-betweenだとラベルが左に寄り「READ」で折り返す事故が起きるため、
     SPは内容幅+gapで組む（.rollのwhite-space:nowrap（common.scss）で1行を保証） */
  .btn-more {
    width: auto;
    gap: 0.8em; /* Figma実測 ラベル→アイコン 約12px（自身のfont-size 15px補正） */
    font-size: 0.9375em; /* Figma実測 15px */
  }
  .btn-more__icon {
    width: 2.58em; /* Figma実測 直径約38.7px（親 .btn-more の font-size 15px 基準） */
    height: 2.58em;
  }
}
/*# sourceMappingURL=style_top.css.map */