@charset "utf-8";
/* ===================================
   レスポンシブ表示制御クラス
   PC: 1025px以上
   Tablet: 751px～1024px  
   SP: 750px以下
=================================== */

/* PC表示用 (1025px以上で表示) */
.show-pc {
  display: block !important;
}

.show-pc-inline {
  display: inline !important;
}

.show-pc-inline-block {
  display: inline-block !important;
}

.show-pc-flex {
  display: flex !important;
}

.show-pc-inline-flex {
  display: inline-flex !important;
}

.show-pc-grid {
  display: grid !important;
}

.show-pc-table {
  display: table !important;
}

.show-pc-table-row {
  display: table-row !important;
}

.show-pc-table-cell {
  display: table-cell !important;
}

/* Tablet表示用 (751px～1024pxで表示) */
.show-tab,
.show-tab-inline,
.show-tab-inline-block,
.show-tab-flex,
.show-tab-inline-flex,
.show-tab-grid,
.show-tab-table,
.show-tab-table-row,
.show-tab-table-cell {
  display: none !important;
}

/* SP表示用 (750px以下で表示) */
.show-sp,
.show-sp-inline,
.show-sp-inline-block,
.show-sp-flex,
.show-sp-inline-flex,
.show-sp-grid,
.show-sp-table,
.show-sp-table-row,
.show-sp-table-cell {
  display: none !important;
}

/* 非表示クラス */
.hide-pc {
  display: none !important;
}

.hide-tab {
  display: block !important;
  /* デフォルトはblock */
}

.hide-sp {
  display: block !important;
  /* デフォルトはblock */
}

/* ===================================
   Tablet範囲 (751px～1024px)
=================================== */
@media (max-width: 1024px) {

  /* PC用を非表示 */
  .show-pc,
  .show-pc-inline,
  .show-pc-inline-block,
  .show-pc-flex,
  .show-pc-inline-flex,
  .show-pc-grid,
  .show-pc-table,
  .show-pc-table-row,
  .show-pc-table-cell {
    display: none !important;
  }

  /* Tablet用を表示 */
  .show-tab {
    display: block !important;
  }

  .show-tab-inline {
    display: inline !important;
  }

  .show-tab-inline-block {
    display: inline-block !important;
  }

  .show-tab-flex {
    display: flex !important;
  }

  .show-tab-inline-flex {
    display: inline-flex !important;
  }

  .show-tab-grid {
    display: grid !important;
  }

  .show-tab-table {
    display: table !important;
  }

  .show-tab-table-row {
    display: table-row !important;
  }

  .show-tab-table-cell {
    display: table-cell !important;
  }

  /* 非表示制御 */
  .hide-pc {
    display: initial !important;
    /* 元のdisplay値を復元 */
  }

  .hide-tab {
    display: none !important;
  }
}

/* ===================================
   SP範囲 (750px以下)
=================================== */
@media (max-width: 750px) {

  /* Tablet用を非表示 */
  .show-tab,
  .show-tab-inline,
  .show-tab-inline-block,
  .show-tab-flex,
  .show-tab-inline-flex,
  .show-tab-grid,
  .show-tab-table,
  .show-tab-table-row,
  .show-tab-table-cell {
    display: none !important;
  }

  /* SP用を表示 */
  .show-sp {
    display: block !important;
  }

  .show-sp-inline {
    display: inline !important;
  }

  .show-sp-inline-block {
    display: inline-block !important;
  }

  .show-sp-flex {
    display: flex !important;
  }

  .show-sp-inline-flex {
    display: inline-flex !important;
  }

  .show-sp-grid {
    display: grid !important;
  }

  .show-sp-table {
    display: table !important;
  }

  .show-sp-table-row {
    display: table-row !important;
  }

  .show-sp-table-cell {
    display: table-cell !important;
  }

  /* 非表示制御 */
  .hide-sp {
    display: none !important;
  }
}

/* ---------------------------
    基本設定（rem のスケール基準）

    Figma: PC 1440px / SP 390px。px ÷ 10 を rem で書く（24px → 2.4rem）。
    ルート font-size を画面幅に追従させることで、CSS を1本のまま全幅で比率を保つ。
      PC  (1025px〜) : 1440px で 10px。1920px 以上は 13.33px で頭打ち（大画面での肥大を防ぐ）
      Tab (751〜1024): 10px 固定（PC レイアウトを縦積みに変形して使う領域）
      SP  (〜750px)  : 2.5641vw（390px で 10px 相当）
----------------------------- */
html {
  font-size: 10px !important;
  -webkit-text-size-adjust: 100%; /* iOS対策 */
  -webkit-tap-highlight-color: transparent; /* タップ時のハイライト消去 */
}

@media (min-width: 1025px) {
  html {
    /* 1440px で 10px（= 100vw / 144）。1920px 以上は頭打ち */
    font-size: min(0.694444vw, 13.33px) !important;
  }
}

@media (max-width: 750px) {
  html {
    font-size: 2.5641025641vw !important;
  }
}

/* ===================================
    CSS変数（カスタムプロパティ）
    Figma 変数: SUSHIRO red #D6151A / Gray #EFEDEB / Black #302828 / White
=================================== */
:root {
  /* カラー */
  --color-main: #d6151a; /* SUSHIRO red */
  --color-accent: #ff2a0a; /* Orange（Figma: エントリーボタン・ハンバーガー・追従ボタン） */
  --color-accent-dark: #e91b00; /* 上の暗い版。白文字で 4.5:1 を満たす（#ff2a0a は 3.75:1） */
  --color-text: #302828; /* Black */
  --color-text-sub: #38404d; /* カード見出し */
  --color-text-muted: #737a8c; /* カード補足 */
  --color-gray: #efedeb; /* Gray（セクション背景） */
  --color-bg: #ffffff;
  --color-border: rgba(33, 33, 33, 0.14);
  --color-error: #d32f2f;
  --color-success: #388e3c;
  --color-warning: #f57c00;

  /* フォント */
  /* 和文はサイト全体 Zen Kaku Gothic New に統一。
     Noto Sans JP は TOP の FV 見出し（フードビジネスの当たり前を変えていく。）専用 */
  --font-main: "Zen Kaku Gothic New", sans-serif;
  --font-sub: "Zen Kaku Gothic New", sans-serif;
  --font-en: "Poppins", sans-serif;
  --font-kv: "Noto Sans JP", sans-serif;
  --font-strong: var(--font-sub);

  /* サイズ */
  --container-width: 123.4rem;
  --container-padding: 4rem;
  --radius-lg: 4rem;
  --radius-md: 2rem;

  /* 余白 */
  --spacing-xs: 0.8rem;
  --spacing-sm: 1.6rem;
  --spacing-md: 2.4rem;
  --spacing-lg: 3.2rem;
  --spacing-xl: 4.8rem;
  --spacing-xxl: 6.4rem;

  /* トランジション */
  --btn-invert-duration: 0.35s; /* ボタンの塗り ⇄ 白抜きの切り替え時間 */
  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;
}

/* ===================================
    body設定
=================================== */
/* reset の b,strong{font-weight:bolder} は親が 700 のとき 900 に化け、
   読み込んでいないウェイトを要求してしまう。実際に使う 700 に固定する */
b,
strong {
  font-weight: 700;
}

body {
  font-family: var(--font-main);
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--color-text);
  /* セクションの境目（rem の端数で 1px 未満の隙間ができる）に白い線が出ないよう、
     地は赤にしておく。白い地が必要なページは .main--white 等で個別に白を指定する */
  background-color: var(--color-main);
  width: 100%;
  overflow-x: hidden;
  word-break: break-word; /* break-allより自然な改行 */
  -webkit-font-smoothing: antialiased; /* フォント滑らか表示 */
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "palt" 1; /* カーニング */
}

.font-strong {
  font-family: var(--font-strong);
}

.font-en {
  font-family: var(--font-en);
}

@media screen and (max-width: 750px) {
  body {
    font-size: 1.4rem;
    line-height: 1.65;
  }
}

/* ===================================
    ユーティリティクラス
=================================== */
.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
  width: 100%;
}

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.hover-op {
  transition: opacity 0.5s;
}

@media (hover: hover) {
.hover-op:hover {
  opacity: 0.6;
}
}

/* ===================================
    フェードイン（.JsInview に JS が .is-active を付与）
=================================== */
.fade-in {
  opacity: 0;
  transform: translateY(2rem);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-in.is-active {
  opacity: 1;
  transform: none;
}

/* 子要素を1つずつ順にフェードイン（親に .fade-in-stagger.JsInview。例: ENTRY のカード・KNOW の careerCard）。6つ目まで */
.fade-in-stagger > * {
  opacity: 0;
  transform: translateY(3rem);
  /* opacity は位置より長くかけて、動き終わってからもじわっと濃くなるようにする */
  transition: opacity 1s ease, transform 0.7s cubic-bezier(0.22, 0.68, 0.24, 1);
}

.fade-in-stagger.is-active > * {
  opacity: 1;
  transform: none;
}

.fade-in-stagger.is-active > :nth-child(2) {
  transition-delay: 0.14s;
}

.fade-in-stagger.is-active > :nth-child(3) {
  transition-delay: 0.28s;
}

.fade-in-stagger.is-active > :nth-child(4) {
  transition-delay: 0.42s;
}

.fade-in-stagger.is-active > :nth-child(5) {
  transition-delay: 0.56s;
}

.fade-in-stagger.is-active > :nth-child(6) {
  transition-delay: 0.7s;
}

@media (prefers-reduced-motion: reduce) {
  .fade-in,
  .fade-in-stagger > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ===================================
    共通パーツ：セクションタイトル（英字大 + 日本語小）
    <p class="sec-title"><span class="sec-title__en">KNOW</span><span class="sec-title__ja">スシローを知る</span></p>
=================================== */
.sec-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: var(--color-main);
}

.sec-title__en {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 5.88rem;
  line-height: 1.5;
  margin-bottom: -1.12rem;
  white-space: nowrap;
}

.sec-title__ja {
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.2;
  letter-spacing: 0.04em;
}

.sec-title--md .sec-title__en {
  font-size: 5rem;
  margin-bottom: -0.72rem;
}

.sec-title--lg .sec-title__en {
  font-size: 7.18rem;
  margin-bottom: -1rem;
}

.sec-title--lg .sec-title__ja {
  font-size: 1.5rem;
}

.sec-title--white {
  color: #fff;
}

.sec-title--sub .sec-title__ja {
  font-family: var(--font-sub);
}

@media screen and (max-width: 750px) {
  .sec-title__en,
  .sec-title--md .sec-title__en,
  .sec-title--lg .sec-title__en {
    font-size: 3.6rem;
    letter-spacing: 0.01em;
    margin-bottom: -0.6rem;
  }

  .sec-title__ja,
  .sec-title--lg .sec-title__ja {
    font-size: 1.4rem;
  }
}

/* ===================================
    共通パーツ：MORE / ENTRY ボタン（赤ピル + 白丸矢印）
=================================== */
.btn-more {
  display: inline-flex;
  align-items: center;
  gap: 1.8rem;
  padding: 0.7rem 0.7rem 0.7rem 3rem;
  border-radius: 999px;
  background: var(--color-main);
  color: #fff;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 1.8rem;
  line-height: 1.5;
  letter-spacing: 0.1em;
  white-space: nowrap;
  /* 反転したときの枠は最初から内側の影として持たせる（当たり判定と寸法を動かさないため） */
  box-shadow: inset 0 0 0 0.1rem var(--color-main);
  transition: background-color var(--btn-invert-duration) ease, color var(--btn-invert-duration) ease;
}

.btn-more__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 3.8rem;
  height: 3.3rem;
  border-radius: 999px;
  background: #fff;
  color: var(--color-main); /* 中の矢印の色（.btn-arrow が currentColor で塗る） */
  transition: background-color var(--btn-invert-duration) ease, color var(--btn-invert-duration) ease;
}

.btn-more__icon .btn-arrow {
  width: 1.4rem;
  height: 0.9rem;
}

.btn-more--entry {
  gap: 1.6rem;
  padding: 0.7rem 0.5rem 0.7rem 1.8rem;
  letter-spacing: 0;
}

@media screen and (max-width: 750px) {
  .btn-more {
    gap: 1.248rem;
    padding: 1.2rem 0.832rem 1.2rem 2.288rem;
    font-size: 1.4rem;
    letter-spacing: 0.04em;
  }

  .btn-more__icon {
    width: 2.7rem;
    height: 2.3rem;
  }

  .btn-more__icon .btn-arrow {
    width: 1.248rem;
    height: 0.832rem;
  }

  .btn-more--entry {
    gap: 1.6rem;
    padding: 0.7rem 0.5rem 0.7rem 1.8rem;
    font-size: 1.8rem;
    letter-spacing: 0;
  }

  .btn-more--entry .btn-more__icon {
    width: 3.8rem;
    height: 3.3rem;
  }

  .btn-more--entry .btn-more__icon .btn-arrow {
    width: 1.4rem;
    height: 0.9rem;
  }
}

/* 丸ボタン（赤ピル + 白矢印） */
.btn-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 4.6rem;
  height: 3.8rem;
  border-radius: 999px;
  background: var(--color-main);
  color: #fff; /* 中の矢印の色 */
  box-shadow: inset 0 0 0 0.1rem var(--color-main);
  transition: background-color var(--btn-invert-duration) ease, color var(--btn-invert-duration) ease;
}

.btn-circle .btn-arrow {
  width: 1.4rem;
  height: 1.1rem;
}

.btn-circle--ext .btn-arrow {
  -webkit-mask-image: url(../images/common/icon/icoExt.svg);
  mask-image: url(../images/common/icon/icoExt.svg);
}

.btn-circle--upright .btn-arrow {
  width: 1.2rem;
  height: 1.2rem;
  -webkit-mask-image: url(../images/career/icoArrowUpRight.svg);
  mask-image: url(../images/career/icoArrowUpRight.svg);
}

.btn-circle--ext .btn-arrow {
  width: 1.2rem;
  height: 1.2rem;
}

/* ---- カード全体を押せるようにする ----
   カードに .cardlink、その中のボタン（a）に .cardlink__target を付けると、
   ボタンの当たり判定がカード全面に広がる。
   リンクを入れ子にしないので、読み上げもタブ移動もボタン1つのまま。
   カード内に別のリンクがあるときは、その面より前に出す */
.cardlink {
  position: relative;
}

.cardlink__target::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  /* border-radius は継承しないこと。ボタンの丸み（999px）を継ぐと
     当たり判定が楕円になってカードの四隅が押せなくなる */
}

.cardlink a:not(.cardlink__target),
.cardlink button {
  position: relative;
  z-index: 2;
}

/* ---- ボタンの中の矢印 ----
   SVG を mask にして currentColor で塗るので、親の color を変えるだけで色が変わる。
   これで「塗り ⇄ 白抜き」の反転が1つの指定で済む（画像を2枚持たない） */
.btn-arrow {
  display: block;
  flex-shrink: 0;
  background-color: currentColor;
  /* mask の url() は CSS 変数に入れないこと。変数は展開時に
     「スタイルシートからの相対」ではなく「文書からの相対」で解決されるため、
     下層ページでパスが崩れる */
  -webkit-mask: url(../images/common/icon/icoArrow.svg) no-repeat center / contain;
  mask: url(../images/common/icon/icoArrow.svg) no-repeat center / contain;
  transition: transform 0.35s cubic-bezier(0.22, 0.68, 0.24, 1);
}

/* ---- ホバーで反転し、矢印だけ右へ（斜め矢印は右上へ） ----
   ボタン自身のホバーに加えて、カード全体がリンクのときは
   カードのどこを触っても反転させる */
@media (hover: hover) {
  .btn-more:hover,
  a:hover .btn-more {
    background: #fff;
    color: var(--color-main);
  }

  .btn-more:hover .btn-more__icon,
  a:hover .btn-more .btn-more__icon {
    background: var(--color-main);
    color: #fff;
  }

  .btn-circle:hover,
  a:hover .btn-circle {
    background: #fff;
    color: var(--color-main);
  }

  .btn-more:hover .btn-arrow,
  a:hover .btn-more .btn-arrow,
  .btn-circle:hover .btn-arrow,
  a:hover .btn-circle .btn-arrow {
    transform: translateX(0.4rem);
  }

  /* 斜め（右上）向きの矢印は、向きに合わせて右上へ動かす（移動量は横向きと同じ 0.4rem 相当） */
  .btn-circle--ext:hover .btn-arrow,
  a:hover .btn-circle--ext .btn-arrow,
  .btn-circle--upright:hover .btn-arrow,
  a:hover .btn-circle--upright .btn-arrow {
    transform: translate(0.28rem, -0.28rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn-arrow,
  .btn-more,
  .btn-more__icon,
  .btn-circle {
    transition: none;
  }

  @media (hover: hover) {
.btn-more:hover .btn-arrow,
  a:hover .btn-more .btn-arrow,
  .btn-circle:hover .btn-arrow,
  a:hover .btn-circle .btn-arrow,
  .btn-circle--ext:hover .btn-arrow,
  a:hover .btn-circle--ext .btn-arrow,
  .btn-circle--upright:hover .btn-arrow,
  a:hover .btn-circle--upright .btn-arrow {
    transform: none;
  }
}
}

/* ---- 画像で置いている矢印も .btn-arrow と同じだけ右へ動かす ----
   ヘッダーメニュー（.gnav__arrow）/ フッターのバナー（.footer__banner-arrow）/
   追従ボタン（.float__arrow）/ おすすめモーダル（.rmStatus__arrow）は
   mask ではなく <img> なので、ここでまとめて transition とホバーを当てる。
   ※ 左向き（.rmModal__back）と下向き（.voiceCard__arrow）、
     スライダーの前後送り（.wkJob__arrow）は向きが違うので対象外 */
.gnav__arrow img,
.footer__banner-arrow img,
.rmStatus__arrow img,
.float__arrow {
  transition: transform 0.35s cubic-bezier(0.22, 0.68, 0.24, 1);
}

@media (hover: hover) {
  .gnav__item:hover .gnav__arrow img,
  .gnav__arrow:hover img,
  .gnav__site:hover .gnav__arrow img,
  .gnav__entry-card:hover .gnav__arrow img,
  .footer__banner:hover .footer__banner-arrow img,
  .rmStatus:hover .rmStatus__arrow img,
  .float__link:hover .float__arrow {
    transform: translateX(0.4rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .gnav__arrow img,
  .footer__banner-arrow img,
  .rmStatus__arrow img,
  .float__arrow {
    transition: none;
  }

  @media (hover: hover) {
.gnav__item:hover .gnav__arrow img,
  .gnav__arrow:hover img,
  .gnav__site:hover .gnav__arrow img,
  .gnav__entry-card:hover .gnav__arrow img,
  .footer__banner:hover .footer__banner-arrow img,
  .rmStatus:hover .rmStatus__arrow img,
  .float__link:hover .float__arrow {
    transform: none;
  }
}
}

/* ===================================
    ヘッダー（templates/header.html）
    透過・fixed。スクロール中は .is-scrolled（赤背景）。
    高さは --header-h で一元管理（下層 main の padding-top と JS の差し引きに使用）
=================================== */
:root {
  --header-h: 8rem;
}

@media screen and (max-width: 750px) {
  :root {
    --header-h: 7rem;
  }
}

.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  z-index: 1001;
  padding: 1rem 1.6rem;
  background: var(--color-text);
  color: #fff;
  font-size: 1.4rem;
}

.skip-link:focus {
  top: 0;
}

/* ---- キーボード操作時のフォーカス表示（WCAG 2.4.7）----
   reset.css が button 等の outline を消しているため、ここで必ず出し直す。
   :focus-visible なのでマウスクリックでは出ない。
   赤背景の上でも見えるよう、白の外側リングを重ねる */
/* 直前の操作がタッチ（指・ペン）のときは出さない（common.js が html に .is-touch-input を付ける）。
   スマホではタップや JS でのフォーカス移動でも枠が出ることがあるため。キーを押せば元に戻る。
   :where() で包んで詳細度を上げない（各部品の :focus-visible の上書きを邪魔しない） */
:where(html:not(.is-touch-input)) :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--color-text);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px #fff;
  border-radius: 2px;
}

/* 赤地・黒地の上では白のリングを内側に */
:where(html:not(.is-touch-input)) :where(.header, .marquee--red, .people, .entry, .footer) :where(a, button, [tabindex]):focus-visible {
  outline-color: #fff;
  box-shadow: 0 0 0 5px var(--color-text);
}

/* 旧ブラウザ向け（:focus-visible 非対応時のみ effective） */
@supports not selector(:focus-visible) {
  :where(a, button, input, select, textarea, summary, [tabindex]):focus {
    outline: 3px solid var(--color-text);
    outline-offset: 2px;
  }
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  background: transparent;
  transition: transform 0.4s ease, background-color 0.3s ease;
}

.header.is-scrolled {
  background: var(--color-main);
}

.header.is-collapsed {
  transform: translateY(-100%);
}

.header__inner {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  height: var(--header-h);
  padding: 0 0 0 2rem; /* 右は 0：ハンバーガーを右上の角にくっつける */
}

.header__h1 {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.header__logo {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
}

.header__logo img {
  width: 6rem;
  height: auto;
}

/* ---- 縦のエントリーボタン（templates/header.html の末尾） ----
   ヘッダーの中から画面右端へ移動したもの。ヘッダーと違い収納せず常時表示する。
   画面右端に張り付くタブ型（左側だけ角丸・Figma 3847-22873）。白地に赤文字、ホバーで反転 */
.entryRail {
  position: fixed;
  top: calc(var(--header-h) + 1.6rem);
  right: 0;
  z-index: 998; /* .header（999）より後ろ＝メニューを開いたら裏に回る */
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  /* transform はヘッダーの収納（.header の transition 0.4s）と同じ速さで動かす */
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.4s ease;
}

/* 画面の高さが足りないときは縮める（倍率は common.js の FixedUiScale が --rail-scale に入れる）。
   右端に張り付いたまま上から縮むよう、基準は右上 */
.entryRail {
  transform: scale(var(--rail-scale, 1));
  transform-origin: top right;
}

/* ヘッダーが収納されたら、そのぶん（ヘッダーの高さ）上へ寄せる */
.header.is-collapsed ~ .entryRail {
  transform: translateY(calc(var(--header-h) * -1 + 5rem)) scale(var(--rail-scale, 1));
}

/* メニューを開いている間はオーバーレイの裏に残さない（タブ移動からも外す） */
body.menu-open .entryRail {
  opacity: 0;
  visibility: hidden;
}

.entryRail__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.644rem;
  width: 6.6rem;
  padding: 2.5rem 0;
  border-radius: 1.5rem 0 0 1.5rem; /* 角丸だけ Figma FIN 3770-65113 の 15px（2026-09-24） */
  /* 通常はオレンジ地に白文字、ホバーで白地にオレンジ文字（2026-09-23 に反転） */
  background: var(--color-accent);
  color: #fff;
  transition: background-color var(--btn-invert-duration) ease, color var(--btn-invert-duration) ease;
}

.entryRail__label {
  /* 1文字ずつ縦に積む。body の palt が効くと字間が詰まりすぎるので切る */
  writing-mode: vertical-rl;
  font-family: var(--font-sub);
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1;
  letter-spacing: 0.3rem; /* 16px + 3px = Figma の 1行 19px */
  font-feature-settings: normal;
  /* 長音「ー」を縦棒にする（和文は縦書き用の字形に。palt を切っても vert は効く） */
  text-orientation: mixed;
  font-variant-east-asian: normal;
}

.entryRail__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  border-radius: 999px;
  background: #fff;
  color: var(--color-accent); /* 中の矢印の色（.btn-arrow が currentColor で塗る） */
  transition: background-color var(--btn-invert-duration) ease, color var(--btn-invert-duration) ease;
}

.entryRail__icon .btn-arrow {
  width: 1.28rem;
  height: 0.82rem;
}

@media (hover: hover) {
  .entryRail__btn:hover {
    background: #fff;
    color: var(--color-accent);
  }

  .entryRail__btn:hover .entryRail__icon {
    background: var(--color-accent);
    color: #fff;
  }

  .entryRail__btn:hover .btn-arrow {
    transform: translateX(0.4rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .entryRail,
  .entryRail__btn,
  .entryRail__icon {
    transition: none;
  }

  @media (hover: hover) {
.entryRail__btn:hover .btn-arrow {
    transform: none;
  }
}
}

/* ハンバーガー（PC/SP 共通）。右上の角にくっつけ、左下だけ角丸（Figma FIN 3770-65290）。
   幅は右端の縦のエントリーボタン（.entryRail__btn）と揃える */
.header__hamburger {
  position: relative;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  align-self: flex-start;
  margin-left: auto;
  width: 6.6rem;
  height: 6rem;
  border-radius: 0 0 0 1.3rem;
  background: var(--color-accent);
  cursor: pointer;
  touch-action: manipulation; /* iOS のダブルタップズームを抑制 */
  transition: opacity 0.3s ease;
}

@media (hover: hover) {
.header__hamburger:hover {
  opacity: 0.85;
}
}

.header__hamburger-icon,
.header__hamburger-icon::before,
.header__hamburger-icon::after {
  content: "";
  display: block;
  width: 2.7rem;
  height: 0.225rem;
  border-radius: 999px;
  background: #fff;
  transition: transform 0.3s, opacity 0.3s, top 0.3s;
}

.header__hamburger-icon {
  position: relative;
}

.header__hamburger-icon::before,
.header__hamburger-icon::after {
  position: absolute;
  left: 0;
}

.header__hamburger-icon::before {
  top: -0.9rem;
}

.header__hamburger-icon::after {
  top: 0.9rem;
}

.header__hamburger.is-active .header__hamburger-icon {
  background: transparent;
}

.header__hamburger.is-active .header__hamburger-icon::before {
  top: 0;
  transform: rotate(45deg);
}

.header__hamburger.is-active .header__hamburger-icon::after {
  top: 0;
  transform: rotate(-45deg);
}

/* グローバルメニュー（全画面・赤） */
.header__menu {
  position: fixed;
  inset: 0;
  z-index: 998;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
  /* スクロールできることが分かるよう、このオーバーレイだけは常時スクロールバーを出す */
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.6) rgba(255, 255, 255, 0.18);
  background: var(--color-main);
  color: #fff;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

.header__menu::-webkit-scrollbar {
  width: 0.8rem;
}

.header__menu::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.18);
}

.header__menu::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.6);
}

@media (hover: hover) {
.header__menu::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.85);
}
}

.header__menu.is-active {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.3s ease, visibility 0s linear 0s;
}

/* メニュー展開中は背景スクロール禁止 */
body.menu-open {
  overflow: hidden;
}

@media screen and (max-width: 1024px) {

}

@media screen and (max-width: 750px) {
  .header__inner {
    gap: 1.2rem;
    padding: 0 0 0 0.9rem;
  }

  .header__logo img {
    width: 4.6rem;
  }

  .entryRail {
    display: none;
  }

  /* SP の寸法（Figma 3770-60005） */
  .header__hamburger {
    width: 6rem;
    height: 5.2rem;
    border-radius: 0 0 0 1.38rem;
  }

  .header__hamburger-icon,
  .header__hamburger-icon::before,
  .header__hamburger-icon::after {
    width: 2.5rem;
    height: 0.34rem;
    border-radius: 0;
  }

  .header__hamburger-icon::before {
    top: -0.9rem;
  }

  .header__hamburger-icon::after {
    top: 0.9rem;
  }

}

/* ===================================
    メイン（fixed ヘッダー分の余白。TOP は FV がヘッダー下に入るため 0）
=================================== */
.main {
  padding-top: var(--header-h);
}

/* 地が白いページ用。body は赤なので白を明示する */
.main--white {
  background-color: var(--color-bg);
}

.main--top {
  padding-top: 0;
  overflow: clip;
}

/* ===================================
    フッター（templates/footer.html）
=================================== */
.footer {
  position: relative;
  z-index: 1;
  background: var(--color-gray);
  color: var(--color-text);
}

.footer__inner {
  display: flex;
  align-items: flex-start;
  gap: 11.2rem;
  padding: 7.6rem 10rem 6.4rem;
}

/* --- ブランド列（ロゴ・サイト名・SNS・公式サイトバナー） --- */
.footer__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 29.2rem;
  flex-shrink: 0;
}

.footer__logo img {
  width: 10rem;
  height: auto;
}

.footer__site {
  display: flex;
  flex-direction: column;
  margin-top: 1.3rem;
}

.footer__site-en {
  font-family: var(--font-en);
  font-weight: 600;
  font-size: 2.4rem;
  line-height: 1.4;
  letter-spacing: 0.04em;
}

.footer__site-company {
  font-family: var(--font-sub);
  font-weight: 500;
  font-size: 1.2rem;
  line-height: 1.67;
  /* Figma は 60% だが 4.5:1 を切るため 0.72（CLAUDE.md のコントラスト規約） */
  opacity: 0.72;
}

/* コーポレートリンクは SP だけ（PC の FIN には無く、白いバナーが担当） */
.footer__corp {
  display: none;
  flex-direction: column;
  gap: 1.2rem;
}

.footer__corp-link {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  font-family: var(--font-sub);
  font-weight: 500;
  font-size: 1.3rem;
  line-height: 1.5;
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

@media (hover: hover) {
.footer__corp-link:hover {
  opacity: 1;
}
}

.footer__corp-link img {
  width: 1rem;
  height: 1rem;
}

/* 公開まで非表示（HTML 側の hidden を効かせる） */
.footer__sns[hidden] {
  display: none;
}

.footer__sns {
  display: flex;
  align-items: center;
  gap: 1.93rem;
  margin-top: 2rem;
}

.footer__sns-link {
  display: inline-flex;
}

.footer__sns img {
  width: 2.8rem;
  height: auto;
}

.footer__sns li:last-child img {
  width: 3.3rem;
}

/* 公式サイト／FLC への白いピルバナー（ヘッダーメニューの .gnav__site と同じ見た目） */
.footer__banners {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  width: 100%;
  margin-top: 4rem;
}

.footer__banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.5rem 1.7rem 1.5rem 2.4rem;
  border-radius: 10rem;
  background: var(--color-bg);
  color: #000;
  transition: opacity 0.3s ease;
}

@media (hover: hover) {
.footer__banner:hover {
  opacity: 0.85;
}
}

.footer__banner-label {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  font-family: var(--font-sub);
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1.8rem;
}


.footer__banner-mark {
  flex-shrink: 0;
  width: 3.2rem;
  height: auto;
  margin-inline: 0.6rem; /* .gnav__site-mark と同じく 4.4rem の枠にそろえる */
}

.footer__banner-mark--flc {
  width: 4.4rem;
  margin-inline: 0;
}

.footer__banner-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 4.6rem;
  height: 3.8rem;
  border-radius: 999px;
  background: var(--color-text);
}

.footer__banner-arrow img {
  width: 1.4rem;
  height: 1rem;
}

/* --- サイトマップ --- */
.footer__nav {
  display: flex;
  gap: 3.4rem;
  flex: 1;
  min-width: 0;
}

.footer__col {
  display: flex;
  flex-direction: column;
  gap: 3.4rem;
  flex: 1;
  min-width: 0;
}

.footer__block {
  display: flex;
  flex-direction: column;
}

.footer__title {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--color-border);
  transition: opacity 0.3s ease;
}

@media (hover: hover) {
.footer__title:hover {
  opacity: 0.6;
}
}

/* リンクを持たない見出し（RELATED SITES） */
@media (hover: hover) {
.footer__title--static:hover {
  opacity: 1;
}
}

.footer__title-en {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.5;
  letter-spacing: 0.06em;
  color: var(--color-main);
}

.footer__title-ja {
  font-family: var(--font-sub);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.5;
  letter-spacing: 0.02em;
}

.footer__links {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  margin-top: 1.2rem;
}

.footer__link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-sub);
  font-weight: 500;
  font-size: 1.3rem;
  line-height: 1.54;
  opacity: 0.72;
  transition: opacity 0.3s ease;
}

@media (hover: hover) {
.footer__link:hover {
  opacity: 1;
}
}

.footer__link img {
  width: 0.9rem;
  height: 0.9rem;
}

/* 「>」付きのリンク（PEOPLE 配下） */
.footer__link--chevron {
  padding: 0 0.2rem;
  color: #5a5a5a;
  opacity: 1;
}

@media (hover: hover) {
.footer__link--chevron:hover {
  opacity: 0.7;
}
}

.footer__link--chevron::before {
  content: "";
  flex-shrink: 0;
  width: 0.5rem;
  height: 0.97rem;
  background: url(../images/common/icon/icoChevronGray.svg) no-repeat center / contain;
}

/* --- 最下部（ポリシー・コピーライト） --- */
.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 2.4rem 10rem 3rem;
  border-top: 1px solid var(--color-border);
  color: #212121;
}

.footer__policy {
  display: flex;
  flex-wrap: wrap;
  gap: 2.8rem;
}

.footer__policy-link {
  font-family: var(--font-sub);
  font-weight: 500;
  font-size: 1.2rem;
  line-height: 1.4;
  /* Figma は 62% だが 4.5:1 を切るため 0.72（CLAUDE.md のコントラスト規約） */
  opacity: 0.72;
  transition: opacity 0.3s ease;
}

@media (hover: hover) {
.footer__policy-link:hover {
  opacity: 1;
}
}

/* 動きを止めている間は CSS アニメーションも切る（JS が <html> に付ける） */
.is-motion-paused .marquee .marquee__track,
.is-motion-paused .float__img {
  animation: none !important;
}

.footer__copy {
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 1.1rem;
  line-height: 1.5;
  letter-spacing: 0.02em;
  opacity: 0.72;
}

@media screen and (max-width: 1024px) {
  /* PC レイアウトを縦積みへ：ブランド列を全幅にしてサイトマップを下段に */
  .footer__inner {
    flex-direction: column;
    gap: 4.8rem;
    padding: 6rem 4rem 4.8rem;
  }

  .footer__brand {
    width: 100%;
  }

  .footer__banners {
    max-width: 36rem;
  }

  .footer__nav {
    flex: none;
    width: 100%;
  }

  .footer__bottom {
    padding: 2.4rem 4rem 3rem;
  }
}

@media screen and (max-width: 750px) {
  /* ブランド要素を親フレックスに参加させ、ナビの後ろにリンク類を並べる */
  .footer__inner {
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: 8.32rem 3rem 0;
  }

  .footer__brand {
    display: contents;
  }

  .footer__logo img {
    width: 8.5rem;
  }

  .footer__site {
    order: 1;
    align-items: center;
    margin-top: 1.7rem;
    text-align: center;
  }

  .footer__site-en {
    font-weight: 700;
  }

  .footer__site-company {
    line-height: 1.4;
  }

  .footer__nav {
    order: 2;
    flex-direction: column;
    gap: 1.8rem;
    width: 100%;
    margin-top: 2.912rem;
  }

  /* 3 列を 1 本のリストに畳む */
  .footer__col {
    display: contents;
  }

  /* SP は「見出し → リンク → 罫線」の順（PC は見出しの直下が罫線） */
  .footer__block {
    padding-bottom: 1.2rem;
    border-bottom: 1px solid var(--color-border);
  }

  .footer__title {
    gap: 0;
    padding-bottom: 0;
    border-bottom: 0;
  }

  .footer__corp {
    order: 3;
    display: flex;
    align-self: flex-start;
    gap: 0;
    margin-top: 1.8rem;
  }

  .footer__corp-link {
    gap: 0.728rem;
    padding: 1.2rem 0;
    font-size: 1.4rem;
    color: #212121;
    opacity: 0.85;
  }

  .footer__corp-link img {
    width: 1.04rem;
    height: 1.04rem;
  }

  .footer__sns {
    order: 4;
    align-self: flex-start;
    gap: 2.166rem;
    margin-top: 1.8rem;
  }

  .footer__sns img {
    width: 3.14rem;
  }

  .footer__sns li:last-child img {
    width: 3.7rem;
  }

  .footer__banners {
    order: 5;
    max-width: none;
    margin: 3rem 0;
  }

  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.9rem; /* リンクの上下余白 0.6rem と合わせて Figma の 25px */
    padding: 1.8rem 0 4rem;
    margin:  0 3rem;
  }

  /* 1 行目にプライバシーポリシーと利用規約、以降は 1 行ずつ */
  .footer__policy {
    column-gap: 1.664rem;
    row-gap: 0;
  }

  .footer__policy li:nth-child(n + 3) {
    flex-basis: 100%;
  }

  .footer__policy-link {
    display: inline-block;
    padding: 0.6rem 0;
  }

  .footer__copy {
    font-size: 1.2rem;
    letter-spacing: 0.02em;
  }
}

/* ===================================
    マーキー / ENTRY / 追従ボタン
    TOP と下層で共通して使うパーツ
=================================== */
.marquee {
  --marquee-gap: 6.6rem;
  overflow: hidden;
  height: 27.8rem;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 18.56rem;
  line-height: 1.5;
  color: var(--color-gray);
  white-space: nowrap;
}

.marquee--red {
  background: var(--color-main);
}

/* ENTRY へ 203px 食い込ませ、はみ出した 75px 分はフッターを引き上げて重ねる。
   こうしないと ENTRY 下端とフッターの間に隙間が残る */
.marquee--entry {
  position: relative;
  z-index: 2;
  margin-top: -20.3rem;
  margin-bottom: -7.5rem;
  pointer-events: none;
}

/* 無限ループ列の土台。テキストのマーキーとカード列で共用する。
   JS（common.js の Marquee）が付く前は CSS アニメーションで動かし、
   付いたら .is-js で CSS を止めて JS の transform に任せる（＝二重に動かさない） */
.marquee__track,
.marquee__group {
  display: flex;
  gap: var(--marquee-gap, 0);
}

.marquee__track {
  width: max-content;
  will-change: transform;
}

.marquee__group {
  flex-shrink: 0;
}

/* JS が動かないときのフォールバック（テキストのマーキーのみ・グループ2つ前提） */
.marquee .marquee__track {
  animation: marquee 40s linear infinite;
}

.JsMarquee.is-js .marquee__track {
  animation: none;
}

/* 動きを減らす設定では止めて、横スクロールで読めるようにする */
.JsMarquee.is-static .marquee__track {
  animation: none;
}

.JsMarquee.is-static {
  overflow-x: auto;
}

@keyframes marquee {
  to {
    transform: translateX(calc(-50% - var(--marquee-gap) / 2));
  }
}

@media (prefers-reduced-motion: reduce) {
  .marquee .marquee__track {
    animation: none;
  }
}

/* ---- コンテンツのスライダー（Swiper・freeMode） ----
   スライドの幅は各カードのクラス（.interview-card / .scaleCard など）で決める。
   Swiper 既定の .swiper-slide { width: 100% } は、ページ用CSSを Swiper のCSSより
   後に読み込むことで上書きされる（ここで width を指定するとカード側の指定に勝ってしまう）。
   スライド間の余白は JS の spaceBetween が margin で入れるため、
   Swiper が有効な区間では .swiper-wrapper に gap を書かないこと */
.JsSlider .swiper-wrapper {
  align-items: stretch;
}

/* ---- ENTRY（黒・角丸） ---- */
.entry {
  position: relative;
  z-index: 1;
  margin-top: -5rem;
  /* Figma FIN 3770-63522 等：黒の上端から見出しまで 95px、カード下端から SUSHIRO の行ボックスまで 25px
     （下 22.8rem ＝ 2.5rem ＋ マーキーがフッターに重なるまでの 20.3rem） */
  padding: 9.5rem 0 22.8rem;
  background: var(--color-text);
  border-radius: 5rem 5rem 0 0;
  color: #fff;
  overflow: hidden;
}

.entry__inner {
  display: flex;
  flex-direction: column;
  gap: 4.8rem;
  width: 116.6rem;
  max-width: calc(100% - 8rem);
  margin: 0 auto;
}

.entry__list {
  display: flex;
  gap: 2.8rem;
}

.card-entry {
  display: flex;
  width: 37.5rem;
  flex-shrink: 0;
}

/* カード全体がリンク。ホバーでは写真だけをゆっくり寄せる（カードは動かさない） */
.card-entry__link {
  display: flex;
  flex-direction: column;
  width: 100%;
  /* 写真の四隅を丸めたので、下側の角の裏にカードの白地が見えるようにする */
  height: 33rem; /* Figma FIN 3770-63525：375×330 */
  background: #fff;
  border-radius: 3rem;
  overflow: hidden;
}

.card-entry__img {
  display: block;
  flex-shrink: 0;
  height: 18.3rem;
  border-radius: 3rem; /* 写真の下側も丸める（2026-09-23） */
  overflow: hidden;
}

.card-entry__img img {
  width: 100%;
  height: 100%;
  object-position: top;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.22, 0.68, 0.24, 1);
}

.card-entry__body {
  /* 見出しの下に ENTRY ボタンを縦に積み、ボタンは右下へ（Figma FIN 3770-63525） */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  flex: 1;
  gap: 1.6rem;
  padding: 2.9rem 2.1rem 2.2rem 2.9rem;
  color: var(--color-text);
}

.card-entry__title {
  align-self: stretch;
  font-family: var(--font-sub);
  font-weight: 700;
  font-size: 2.1rem;
  line-height: 1.45;
  letter-spacing: -0.03em;
  white-space: nowrap;
}

@media (hover: hover) {
  .card-entry__link:hover .card-entry__img img {
    transform: scale(1.06);
  }

}

@media (prefers-reduced-motion: reduce) {
  .card-entry__img img,
  .card-entry__link .btn-more__icon {
    transition: none;
  }

  @media (hover: hover) {
.card-entry__link:hover .card-entry__img img {
    transform: none;
  }
}
}

/* ---- 画面下に固定するエントリー導線（SP・全ページ共通／templates/entrybar.html） ---- */
/* SP のみ表示（.show-sp-flex）。KV の中だけでなく、スクロールしても
   画面下に残り続けるエントリー導線にする */
.fv__btns {
  position: fixed;
  left: 1.1rem;
  right: 1.1rem;
  bottom: 1.6rem;
  z-index: 901; /* 追従ボタン（.float / z-index:900）より前に出す */
  gap: 1.08rem;
}

/* 2つで画面幅を分け合う（元は固定幅 17.78rem） */
.fv__btns .fv__btn {
  flex: 1;
  width: auto;
  min-width: 0;
  padding-left: 1.8rem;
  box-shadow: inset 0 0 0 0.1rem var(--color-accent);
  transition: background-color var(--btn-invert-duration) ease, color var(--btn-invert-duration) ease;
}

/* ENTRY セクションとフッターでは役割が重複するので引っ込める
   （JS が body.entry-visible を付ける） */
.fv__btns {
  transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s linear 0s;
}

body.entry-visible .fv__btns {
  opacity: 0;
  visibility: hidden;
  transform: translateY(1.6rem);
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s linear 0.35s;
}

@media (prefers-reduced-motion: reduce) {
  .fv__btns,
  body.entry-visible .fv__btns {
    transition: none;
  }
}

.fv__btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 17.78rem;
  padding: 0.94rem 0.94rem 0.94rem 2.3rem;
  border-radius: 999px;
  /* 通常はオレンジ地に白文字、ホバーで白地にオレンジ文字（2026-09-23 に反転）。スクロールしても変えない */
  background: var(--color-accent);
  color: #fff;
  font-family: var(--font-sub);
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.45;
  white-space: nowrap;
}

.fv__btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 3.58rem;
  height: 3.11rem;
  border-radius: 999px;
  background: #fff;
  color: var(--color-accent); /* 中の矢印の色 */
  transition: background-color var(--btn-invert-duration) ease, color var(--btn-invert-duration) ease;
}

.fv__btn-icon .btn-arrow {
  width: 1.32rem;
  height: 0.85rem;
}

@media (hover: hover) {
  .fv__btn:hover {
    background: #fff;
    color: var(--color-accent);
  }

  .fv__btn:hover .fv__btn-icon {
    background: var(--color-accent);
    color: #fff;
  }

  .fv__btn:hover .btn-arrow {
    transform: translateX(0.4rem);
  }
}

/* ---- 追従ボタン（おすすめ情報） ---- */
.float {
  position: fixed;
  right: 2.5rem;
  bottom: 2.9rem;
  z-index: 900;
  width: 19.1rem;
  height: 22.3rem;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.float.is-hidden {
  display: none;
}

/* 画面の高さが足りないときだけ右下を基準に縮める（751px 以上・common.js の FixedUiScale）。
   縦ボタンの下に置けない高さでは、縦ボタンの左隣へ移す（.is-beside-rail） */
@media screen and (min-width: 751px) {
  .float {
    /* Figma FIN 3770-65113 の円は 176px（中の寸法は 191px で組んであるので全体を 0.92 倍に） */
    zoom: 0.921;
    right: 5.3rem; /* zoom 後に 49px ＝ Figma の位置（縦ボタンの少し左） */
    transform: scale(var(--float-scale, 1));
    transform-origin: bottom right;
  }

  .float.is-beside-rail {
    right: calc(var(--rail-w, 6.6rem) + 1.6rem);
  }
}

/* ENTRY セクションに重なる間は引っ込める（SP のみ・common.js の FloatOverEntry）。
   display: none にすると座標が取れなくなって出たり消えたりするので visibility で隠す */
.float.is-over-entry {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.float__link {
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 19.1rem;
  height: 19.1rem;
  padding-top: 2.6rem;
  border-radius: 50%;
  background: var(--color-accent);
  color: #fff;
  text-align: center;
  transition: transform 0.3s ease;
}

@media (hover: hover) {
.float__link:hover {
  transform: scale(1.04);
}
}

.float__text {
  font-family: var(--font-sub);
  font-weight: 900;
  font-size: 1.7rem;
  line-height: 1.353;
  letter-spacing: 0.1em;
}

.float__arrow {
  width: 3.6rem;
  height: 3.6rem;
  margin-top: 1rem;
}

.float__img {
  position: absolute;
  left: 4rem;
  top: 0;
  width: 11rem;
  height: auto;
  transform-origin: 50% 90%;
  pointer-events: none;
}

.float__close {
  position: absolute;
  right: 0;
  top: 3.2rem;
  width: 4.2rem;
  height: 4.2rem;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

@media (hover: hover) {
.float__close:hover {
  opacity: 0.7;
}
}

.float__close img {
  width: 100%;
  height: 100%;
}

/* ホバー中だけ小刻みに揺らす */
@media (hover: hover) {
.float__link:hover ~ .float__img {
  animation: floatWiggle 0.62s ease-in-out infinite;
}
}

@keyframes floatWiggle {
  0% {
    transform: rotate(0deg) translateY(0);
  }
  20% {
    transform: rotate(-7deg) translateY(-0.3rem);
  }
  40% {
    transform: rotate(5deg) translateY(-0.1rem);
  }
  60% {
    transform: rotate(-4deg) translateY(-0.3rem);
  }
  80% {
    transform: rotate(3deg) translateY(-0.1rem);
  }
  100% {
    transform: rotate(0deg) translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  @media (hover: hover) {
.float__link:hover ~ .float__img {
    animation: none;
  }
}
}

@media screen and (max-width: 1024px) {
  /* Tab：37.5rem 固定のまま折り返すと左に寄って右が空くので、列幅を画面に合わせる
     （1024px で3列・768px で2列） */
  .entry__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(26rem, 1fr));
  }

  .card-entry {
    width: auto;
  }
}

@media screen and (max-width: 750px) {
  .marquee {
    --marquee-gap: 3.1rem;
    height: 8.4rem;
    font-size: 7.588rem;
    letter-spacing: -0.01em;
  }

  .marquee--entry {
    margin-top: 0;
    margin-bottom: 0;
    background: var(--color-text);
  }

  .entry {
    margin-top: -3.7rem;
    padding: 5.788rem 2.08rem 2rem;
    border-radius: 3rem 3rem 0 0;
  }

  .entry__inner {
    gap: 3.1rem;
    width: auto;
    max-width: 35rem;
  }

  .entry__inner .sec-title__ja {
    font-size: 1.4rem;
    letter-spacing: 0.04em;
  }

  /* SP は左に写真・右に文字と丸ボタンの横長カード（Figma 3770-65462） */
  .entry__list {
    display: flex; /* Tab の grid を戻す */
    flex-direction: column;
    gap: 2rem;
  }

  .card-entry {
    width: 100%;
  }

  .card-entry__link {
    flex-direction: row;
    height: 10.2rem;
    background: #fff;
    border-radius: 2rem;
    overflow: hidden;
  }

  .card-entry__img {
    flex-shrink: 0;
    width: 11.2rem;
    height: 100%;
    border-radius: 2rem;
  }

  .card-entry__body {
    flex: 1;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0 2rem 0 3rem;
    border-radius: 0;
  }

  .card-entry__title {
    align-self: auto; /* PC の縦積み用の stretch を解除（横並びでは縦に伸びてしまう） */
    flex: 0 1 10.7rem; /* 「アルバイト・パート求人」を Figma どおり2行にする幅 */
    font-size: 1.5rem;
    line-height: 1.45;
    letter-spacing: 0;
    white-space: normal;
    word-break: keep-all; /* 「アルバイト・／パート求人」と中黒の後で折り返す */
    overflow-wrap: anywhere;
  }

  /* ENTRY の文字は出さず、赤丸（46×38）に白矢印だけにする */
  .card-entry .btn-more--entry {
    justify-content: center;
    flex-shrink: 0;
    width: 4.6rem;
    height: 3.8rem;
    padding: 0;
    gap: 0;
  }

  .card-entry .btn-more--entry > span:first-child {
    display: none;
  }

  .card-entry .btn-more--entry .btn-more__icon {
    width: auto;
    height: auto;
    background: none;
    color: #fff;
  }

  .card-entry .btn-more--entry .btn-more__icon .btn-arrow {
    width: 1.376rem;
    height: 1.027rem;
  }

  /* ホバーの反転（白地に赤）でも、中の丸は出さず矢印の色だけ変える */
  @media (hover: hover) {
.card-entry__link:hover .btn-more--entry .btn-more__icon {
    background: none;
    color: var(--color-main);
  }
}

  .float {
    right: 1rem;
    bottom: 2rem;
    width: 11.3rem;
    height: 13.2rem;
  }

  /* SP は画面下にエントリーボタン（.fv__btns）が固定で出るので、その上へ逃がす */
  .float {
    bottom: 8.2rem;
    transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
  }

  /* ENTRY セクションとフッターでは .fv__btns と一緒に引っ込める
     （JS が body.entry-visible を付ける） */
  body.entry-visible .float {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  .float__link {
    width: 11.3rem;
    height: 11.3rem;
    padding-top: 1.4rem;
  }

  .float__text {
    font-size: 1.006rem;
    line-height: 1.353;
  }

  .float__arrow {
    width: 2.13rem;
    height: 2.13rem;
    margin-top: 0.6rem;
  }

  .float__img {
    left: 2.37rem;
    width: 6.5rem;
  }

  .float__close {
    top: 1.9rem;
    width: 2.49rem;
    height: 2.49rem;
  }
}

/* ===================================
    セクション見出し（日本語 + 英字）
    KNOW / FUTURE で共通（Figma の know_タイトル コンポーネント）
=================================== */
.sec-heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.sec-heading__ja {
  font-family: var(--font-sub);
  font-weight: 700;
  font-size: 4.18rem;
  line-height: 1.45;
  letter-spacing: 0.02em;
  color: var(--color-text);
}

.sec-heading__en {
  font-family: var(--font-en);
  font-weight: 600;
  font-size: 1.6rem;
  line-height: 1.546;
  letter-spacing: 0.02em;
  color: var(--color-main);
}

/* 記事詳細の「一覧へ戻る」（クロストーク詳細・社員インタビュー詳細で共通） */
.btn-more--back {
  gap: 2rem;
  margin-top: 5.4rem;
  padding: 0.8rem 0.8rem 0.8rem 3rem;
  font-family: var(--font-sub);
  font-size: 1.5rem;
  letter-spacing: 0.02em;
}

.btn-more--back .btn-more__icon {
  width: 4.6rem;
  height: 3.8rem;
}

@media screen and (max-width: 750px) {
  .btn-more--back {
    gap: 1.6rem;
    margin-top: 4rem;
    padding: 0.8rem 0.8rem 0.8rem 3rem;
    font-size: 1.4rem;
  }

  .btn-more--back .btn-more__icon {
    width: 4rem;
    height: 3.4rem;
  }
}

/* ===================================
    スライダーの件数が少ないとき（common/swiper.js が .is-static を付与）
    Swiper を初期化しないので、素の flex 並びに余白だけ持たせる
=================================== */
.swiper.is-static .swiper-wrapper {
  gap: var(--slider-gap, 2.3rem);
}

@media screen and (max-width: 750px) {
  .swiper.is-static .swiper-wrapper {
    gap: var(--slider-gap-sp, var(--slider-gap, 2.3rem));
  }
}

/* ===================================
    共通パーツ：絞り込みタブ（白ピル / 選択中は赤）
    人を知る一覧・FAQ で共通。並び・余白は使う側のラッパーで指定する
=================================== */
.tab-pill {
  flex-shrink: 0;
  padding: 1.2rem 2.6rem;
  border: 0.1rem solid rgba(33, 33, 33, 0.18);
  border-radius: 999px;
  background: #fff;
  font-family: var(--font-sub);
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1.43;
  letter-spacing: 0.02em;
  color: #212121;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

@media (hover: hover) {
.tab-pill:hover {
  border-color: var(--color-main);
  color: var(--color-main);
}
}

.tab-pill.is-active {
  border-color: var(--color-main);
  background: var(--color-main);
  color: #fff;
}

/* ===================================
    共通パーツ：スクリーンリーダー専用テキスト
=================================== */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ===================================
    クロストーク / note カード（人を知る一覧・クロストーク詳細で共通）
    幅は使う側で指定する
=================================== */
.card-cross__link {
  display: block;
  color: var(--color-text);
}

.card-cross__img {
  width: 100%;
  height: auto;
  aspect-ratio: 397 / 258;
  object-fit: cover;
  border-radius: 2.19rem;
}

.card-cross__title {
  margin-top: 1.63rem;
  font-family: var(--font-sub);
  font-weight: 700;
  font-size: 1.8rem;
  line-height: 1.667;
}

.card-cross__people {
  /* 師匠×弟子カード：1人1行で「名前（太字）＋肩書き」（Figma FIN 3788-19320） */
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-top: 1rem;
  color: var(--color-text);
}

.card-cross__person {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.8rem;
  font-family: var(--font-sub);
  line-height: 1.45;
}

.card-cross__person-name {
  font-weight: 700;
  font-size: 1.5rem;
}

.card-cross__person-role {
  font-weight: 500;
  font-size: 1.3rem;
}

.card-cross__name {
  margin-top: 0.9rem;
  font-family: var(--font-sub);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.467;
}

.card-cross__role {
  margin-top: 0.9rem;
  font-family: var(--font-sub);
  font-weight: 500;
  font-size: 1.24rem;
  line-height: 1.45;
  color: rgba(0, 0, 0, 0.8);
}

@media screen and (max-width: 750px) {
  .card-cross__img {
    aspect-ratio: 330 / 215;
    border-radius: 1.4rem;
  }

  .card-cross__title {
    margin-top: 1.4rem;
    font-size: 1.5rem;
    line-height: 1.6;
  }

  .card-cross__name {
    margin-top: 0.8rem;
    font-size: 1.3rem;
  }

  .card-cross__people {
    margin-top: 0.8rem;
  }

  .card-cross__person-name {
    font-size: 1.3rem;
  }

  .card-cross__person-role {
    font-size: 1.1rem;
  }

  .card-cross__role {
    margin-top: 0.6rem;
    font-size: 1.1rem;
  }
}

/* ===================================
    NEXT CONTENTS（回遊導線）
=================================== */
.nextContents {
  position: relative;
  z-index: 1;
  margin-top: 5rem;
  /* 下は Figma 3844:22670（3枚版・621px）の 180px。うち 50px は .entry が重なる */
  padding: 13rem 0 18rem;
  background: var(--color-gray);
  border-radius: 5rem 5rem 0 0;
}

.nextContents__inner {
  width: 118rem;
  max-width: calc(100% - 8rem);
  margin-inline: auto;
}

.nextContents__list {
  display: flex;
  gap: 4.2rem; /* Figma 3844:22674：365×139 を 42px 間隔で3枚 */
  margin-top: 5.2rem;
}

.nextCard {
  display: flex;
  align-items: stretch;
  height: 13.9rem;
  background: #fff;
  border-radius: var(--radius-md); /* 20px */
  overflow: hidden;
}

.nextContents__list > li {
  flex: 1;
}

.nextCard__img {
  width: 14.1rem;
  flex-shrink: 0;
  border-radius: var(--radius-md); /* 写真自体も四隅を丸める（Figma 3847-22806） */
  overflow: hidden;
}

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

.nextCard__body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem;
  flex: 1;
  min-width: 0;
  padding: 2.6rem 2.9rem 2.6rem 2.7rem;
}

.nextCard__label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.nextCard__en {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 2.6rem;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--color-main);
}

.nextCard__ja {
  margin-top: -0.6rem; /* Figma：英字の下に -6px で重ねる */
  font-family: var(--font-sub);
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 2.8rem;
  color: var(--color-text);
}

/* Figma のボタンコンポーネント（46×38） */
.nextCard .btn-circle {
  width: 4.6rem;
  height: 3.8rem;
}

@media screen and (max-width: 1024px) {

  .nextContents__list {
    flex-direction: column;
  }
}

@media screen and (max-width: 750px) {

  /* Figma 3770:60275：上 72px・カード下から ENTRY まで 80px（＋ .entry が 3.7rem 重なる） */
  .nextContents {
    margin-top: 2rem;
    padding: 7.2rem 0 11.7rem;
    border-radius: 3rem 3rem 0 0;
  }

  .nextContents__inner {
    width: auto;
    max-width: 35rem;
  }

  /* Figma 3770:60280：350×110・間隔 16px・角丸 15px・写真 130px */
  .nextContents__list {
    flex-direction: column;
    gap: 1.6rem;
    margin-top: 3.2rem;
  }

  .nextCard {
    height: 11rem;
    border-radius: 1.5rem;
  }

  .nextCard__img {
    width: 13rem;
    border-radius: 1.5rem;
  }

  .nextCard__body {
    padding: 1.6rem 1.6rem 1.6rem 2rem;
  }

  .nextCard__en {
    font-size: 2.1rem;
    letter-spacing: 0.01em;
  }
}

/* ===================================
    グローバルメニューの中身（Figma FIN「ハンバーガーメニュー展開」）
    白いピル型のナビ2列 ＋ 関連リンク列。下部に ENTRY 帯
=================================== */
.gnav {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

/* メニュー左上のロゴ（Figma 4024:8376：x31 / y24 / 60×61）。中身と一緒にスクロールする */
.gnav__logo {
  position: absolute;
  top: 2.4rem;
  left: 3.1rem;
  z-index: 1;
  display: block;
  width: 6rem;
}

.gnav__logo img {
  width: 100%;
  height: auto;
}

.gnav__inner {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 7rem;
  flex: 1;
  width: 126.2rem;
  max-width: calc(100% - 8rem);
  margin: 0 auto;
  padding: 8.7rem 0 3.8rem; /* Figma 4024:8375：ナビ上端 y87／FAQ の下 38px で ENTRY 帯 */
}

.gnav__cols {
  display: flex;
  gap: 3rem;
}

.gnav__col {
  display: flex;
  flex-direction: column;
  gap: 1.7rem;
  width: 38.4rem;
}

.gnav__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem;
  padding: 1.5rem 1.7rem 1.5rem 4.2rem;
  border-radius: 10rem;
  background: #fff;
  color: var(--color-main);
  transition: opacity 0.3s ease;
}

@media (hover: hover) {
.gnav__item:hover {
  opacity: 0.85;
}
}

.gnav__item--group {
  padding: 2rem 1.7rem 2rem 4.2rem;
  border-radius: 4rem;
}

@media (hover: hover) {
.gnav__item--group:hover {
  opacity: 1;
}
}

.gnav__item.is-current .gnav__en {
  text-decoration: underline;
  text-decoration-thickness: 0.2rem;
  text-underline-offset: 0.4rem;
}

.gnav__group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.gnav__label {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  color: var(--color-main);
}

.gnav__en {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 1.5;
  letter-spacing: 0.05em;
}

.gnav__ja {
  font-family: var(--font-sub);
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1.5;
  letter-spacing: 0.02em;
}

.gnav__sub {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

/* li を行ボックスにしない（body の line-height で1行 25px に膨らみ、Figma の 22px 送りより広がるため） */
.gnav__sub li {
  display: flex;
}

.gnav__sub li[hidden] {
  display: none;
}

.gnav__sub a {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0 0.1rem;
  font-family: var(--font-sub);
  font-weight: 500;
  font-size: 1.3rem;
  line-height: 2rem;
  color: var(--color-main);
  transition: opacity 0.3s ease;
}

@media (hover: hover) {
.gnav__sub a:hover {
  opacity: 0.7;
}
}

.gnav__sub a::before {
  content: "";
  flex-shrink: 0;
  width: 0.5rem;
  height: 0.9rem;
  background: url(../images/common/icon/icoChevron.svg) no-repeat center / contain;
}

/* 赤い丸矢印（Figma の「ボタン」コンポーネント 46×38） */
.gnav__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 4.6rem;
  height: 3.8rem;
  border-radius: 999px;
  background: var(--color-main);
}

.gnav__arrow img {
  width: 1.4rem;
  height: 1rem;
}

.gnav__arrow--dark {
  background: var(--color-text);
}

/* 関連リンク列 */
.gnav__side {
  display: flex;
  flex-direction: column;
  gap: 3.4rem;
  flex: 1;
  min-width: 0;
}

.gnav__sites {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.gnav__site {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.5rem 1.7rem 1.5rem 2.4rem;
  border-radius: 10rem;
  background: #fff;
  color: #000;
  transition: opacity 0.3s ease;
}

@media (hover: hover) {
.gnav__site:hover {
  opacity: 0.85;
}
}

.gnav__site-label {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  font-family: var(--font-sub);
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1.8rem;
}

.gnav__site-mark {
  flex-shrink: 0;
  width: 3.2rem;
  height: auto;
  /* ロゴの幅が違う（スシロー 3.2rem／F&LC 4.4rem）ので、細いほうは左右に余白を足して
     同じ 4.4rem の枠に収め、2枚のバナーで文字の頭をそろえる */
  margin-inline: 0.6rem;
}

.gnav__site-mark--flc {
  width: 4.4rem;
  margin-inline: 0;
}

.gnav__related {
  width: 28.3rem;
  max-width: 100%;
}

.gnav__related-title {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1.5;
  letter-spacing: 0.08em;
  color: #ffecec; /* 赤地の上で 4.5:1 を満たす明度 */
}

.gnav__related-list {
  display: flex;
  flex-direction: column;
  margin-top: 0.55rem; /* a の上 padding 0.55rem と合わせて Figma の 11px */
}

/* Figma：文字 20px の上下に 11px ずつ（行送り 42px）。半分を li、半分を a の padding で持つ */
.gnav__related-list li {
  padding: 0.55rem 0;
}

.gnav__related-list li:first-child {
  padding-top: 0;
}

.gnav__related-list li:last-child {
  padding-bottom: 0;
}

.gnav__related-list li + li {
  border-top: 1px solid rgba(255, 255, 255, 0.4);
}

.gnav__related-list a {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0;
  font-family: var(--font-sub);
  font-weight: 500;
  font-size: 1.3rem;
  line-height: 2rem;
  color: #fff;
  transition: opacity 0.3s ease;
}

@media (hover: hover) {
.gnav__related-list a:hover {
  opacity: 0.7;
}
}

.gnav__related-list img {
  width: 0.7rem;
  height: 0.7rem;
}

/* 公開まで非表示（HTML 側の hidden を効かせる） */
.gnav__sns[hidden] {
  display: none;
}

.gnav__sns {
  display: flex;
  align-items: center;
  gap: 2.2rem;
}

.gnav__sns img {
  width: 3.1rem;
  height: auto;
}

.gnav__sns li:last-child img {
  width: 3.7rem;
}

/* スクロール誘導（.header__menu が fixed なので position: fixed で画面に貼り付く） */
.gnav__scroll {
  position: fixed;
  right: 4rem;
  bottom: 3.2rem;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  pointer-events: none;
  /* 赤地の上にも ENTRY 帯（黒地）の上にも重なるため、影で可読性を確保する */
  filter: drop-shadow(0 0 0.6rem rgba(0, 0, 0, 0.4));
  transition: opacity 0.4s ease;
}

.gnav__scroll-label {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: 0.24em;
  line-height: 1;
  color: #fff;
  writing-mode: vertical-rl;
}

.gnav__scroll-line {
  position: relative;
  width: 0.2rem;
  height: 6rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.4);
  overflow: hidden;
}

.gnav__scroll-line::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 45%;
  background: #fff;
  animation: gnavScrollHint 1.8s ease-in-out infinite;
}

@keyframes gnavScrollHint {
  0% {
    transform: translateY(-100%);
  }
  60%,
  100% {
    transform: translateY(240%);
  }
}

/* 少しでもスクロールしたら／そもそもスクロール不要なら消す */
.header__menu.is-scrolled .gnav__scroll,
.header__menu.is-noscroll .gnav__scroll {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .header__menu {
    scroll-behavior: auto;
  }

  .gnav__scroll-line::after {
    animation: none;
  }
}

/* ENTRY 帯（メニュー最下部） */
.gnav__entry {
  position: relative;
  padding: 0 0 7.6rem;
  background: var(--color-text);
  overflow: hidden;
}

/* 文字の頭を黒帯の上端にそろえる（Figma 4024:8491：ENTRY の字面が赤と黒の境目から始まる）。
   行ボックス上端から字面までの約 3rem を引き上げる（上にはみ出た空白は .gnav__entry が切る） */
.marquee--gnav {
  --marquee-gap: 4rem;
  height: auto;
  margin-top: -2.8rem;
  font-size: 11.5rem;
  line-height: 1.2;
  color: var(--color-gray);
}

.gnav__entry-list {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  gap: 3.5rem;
  margin-top: 2.6rem; /* Figma：黒帯上端から 136px でカード */
  padding: 0 4rem;
}

.gnav__entry-card {
  display: flex;
  align-items: center;
  width: 41.1rem;
  height: 12.8rem;
  border-radius: 2rem;
  background: #fff;
  color: var(--color-text-sub);
  overflow: hidden;
}

.gnav__entry-card > img {
  flex-shrink: 0;
  width: 14rem;
  height: 100%;
  object-fit: cover;
}

.gnav__entry-title {
  flex: 1;
  min-width: 0;
  padding: 0 1.6rem 0 3rem;
  font-family: var(--font-sub);
  font-weight: 700;
  font-size: 1.8rem;
  line-height: 1.5;
}

.gnav__entry-card .gnav__arrow {
  margin-right: 2.9rem;
}

@media screen and (max-width: 1024px) {
  .gnav__inner {
    flex-direction: column;
    gap: 4rem;
    max-width: calc(100% - 6rem);
    padding-top: calc(var(--header-h) + 2rem);
  }

  .gnav__cols {
    width: 100%;
  }

  .gnav__col {
    flex: 1;
    width: auto;
  }

  .gnav__side {
    width: 100%;
  }

  .gnav__entry-list {
    flex-wrap: wrap;
  }
}

@media screen and (max-width: 750px) {
  /* Figma 4024:8180：ロゴ 47px（x14 / y12） */
  .gnav__logo {
    top: 1.2rem;
    left: 1.4rem;
    width: 4.7rem;
  }

  .gnav__inner {
    gap: 3rem;
    max-width: calc(100% - 4rem);
    padding: 9.6rem 0 4rem; /* Figma：ナビ上端 y96 */
  }

  .gnav__cols {
    flex-direction: column;
    gap: 1rem;
  }

  .gnav__col {
    gap: 1rem;
  }

  .gnav__item {
    padding: 1.2rem 1.2rem 1.2rem 2.2rem;
  }

  .gnav__item--group {
    padding: 1.8rem 1.2rem 1.8rem 2.2rem;
    border-radius: 2.8rem;
  }

  .gnav__group {
    gap: 0.6rem;
  }

  .gnav__label {
    gap: 0.9rem;
  }

  .gnav__en {
    font-size: 2rem;
  }

  .gnav__side {
    gap: 3.3rem;
  }

  /* SP は RELATED SITES → 公式サイト → SNS の順 */
  .gnav__related {
    order: -1;
    width: 100%;
  }

  .gnav__scroll {
    right: 1.6rem;
    bottom: 2.4rem;
    gap: 0.8rem;
  }

  .gnav__scroll-line {
    height: 4rem;
  }

  /* Figma 4024:8308：75.5px・間隔 26.8px。字面の頭を黒帯の上端にそろえる */
  .marquee--gnav {
    --marquee-gap: 2.7rem;
    margin-top: -1.4rem;
    font-size: 7.55rem;
  }

  /* Figma 4024:8289：黒帯上端から 96px・カード 350×102・間隔 20px・下 30px */
  .gnav__entry {
    padding-bottom: 3rem;
  }

  .gnav__entry-list {
    flex-direction: column;
    gap: 2rem;
    margin-top: 1.9rem;
    padding: 0 2rem;
  }

  .gnav__entry-card {
    width: 100%;
    height: 10.2rem;
    border-radius: 2rem;
  }

  .gnav__entry-card > img {
    width: 11.2rem;
    border-radius: 2rem; /* SP は写真の右側も角丸（Figma 4024:8291） */
  }

  .gnav__entry-title {
    padding: 0 1.2rem 0 3rem;
    font-size: 1.5rem;
  }

  .gnav__entry-card .gnav__arrow {
    margin-right: 2rem;
  }
}

/* ===================================
    あなたへのおすすめ情報モーダル（templates/modal.html）
    追従ボタン .JsRmOpen で開く。PC は中央の白パネル、SP は下からのシート
=================================== */
/* 開閉は JS が .is-open を付け外しする。hidden は JS 無効時のフォールバック兼
   閉じきったあとの後始末なので、アニメーション中は付けない */
.rmModal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.32s ease;
}

.rmModal.is-open {
  opacity: 1;
}

.rmModal[hidden] {
  display: none;
}

body.modal-open {
  overflow: hidden;
}

.rmModal__scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

.rmModal__panel {
  transform: translateY(2.4rem);
  transition: transform 0.36s cubic-bezier(0.22, 0.68, 0.24, 1);
  position: relative;
  width: 108rem;
  max-width: calc(100% - 4rem);
  max-height: calc(100vh - 4rem);
  max-height: calc(100dvh - 4rem);
  overflow-y: auto;
  padding: 5.2rem 4.8rem 3.6rem;
  border-radius: 4rem;
  background: #fff;
  box-shadow: 0 2.4rem 6rem rgba(0, 0, 0, 0.25);
  color: var(--color-text);
}

.rmModal__handle {
  display: none;
}

.rmModal__close {
  position: absolute;
  top: 3.2rem;
  right: 3.2rem;
  z-index: 2; /* STEP2 の .rmModal__bar（戻る＋現在のステータス）が上に重なって押せなくなるため前面へ */
  width: 4.8rem;
  height: 4.8rem;
  border-radius: 50%;
  transition: opacity 0.3s ease;
}

@media (hover: hover) {
.rmModal__close:hover {
  opacity: 0.7;
}
}

.rmModal__close img {
  width: 100%;
  height: 100%;
}

.rmModal.is-open .rmModal__panel {
  transform: none;
}

.rmModal__step[hidden] {
  display: none;
}

/* ステップの入れ替え（選択 → 内容）はクロスフェードで続ける */
.rmModal__step.is-entering {
  animation: rmStepIn 0.34s cubic-bezier(0.22, 0.68, 0.24, 1) both;
}

@keyframes rmStepIn {
  from {
    opacity: 0;
    transform: translateX(1.6rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---- アコーディオン（.JsAcBtn + .JsAcContent）----
   高さ・余白の補間は JS がインラインで行う。閉じるあいだ中身がはみ出さないよう
   overflow を切り、開ききったら JS がインラインスタイルを外す */
.JsAcContent.is-closing {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .rmModal,
  .rmModal__panel,
  .rmModal__scrim {
    transition: none !important;
  }

  .rmModal__step.is-entering {
    animation: none;
  }
}

.rmModal__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
}

.rmModal__stepLabel {
  padding: 0.6rem 1.5rem;
  border: 1px solid var(--color-main);
  border-radius: 999px;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1;
  letter-spacing: 0.14em;
  color: var(--color-main);
}

.rmModal__title {
  font-family: var(--font-sub);
  font-weight: 700;
  font-size: 3rem;
  line-height: 1.467;
  letter-spacing: 0.02em;
}

.rmModal__sub {
  font-family: var(--font-sub);
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.733;
  color: #767676;
}

/* STEP1 ステータス4枚 */
.rmModal__statuses {
  display: flex;
  gap: 2rem;
  margin-top: 3.2rem;
}

.rmModal__statuses > li {
  flex: 1;
}

.rmStatus {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  width: 100%;
  height: 19.6rem;
  padding: 4.25rem 2.25rem 6rem;
  border: 1.5px solid #d4d4d4;
  border-radius: 2rem;
  background: #fff;
  text-align: left;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

@media (hover: hover) {
.rmStatus:hover {
  border-color: var(--color-main);
  box-shadow: 0 0.6rem 2rem rgba(214, 21, 26, 0.12);
}
}

.rmStatus__name {
  font-family: var(--font-sub);
  font-weight: 700;
  font-size: 2.1rem;
  line-height: 1.43;
  letter-spacing: 0.02em;
  color: var(--color-main);
}

.rmStatus__desc {
  font-family: var(--font-sub);
  font-weight: 500;
  font-size: 1.3rem;
  line-height: 1.615;
  color: var(--color-text);
}

.rmStatus__arrow {
  position: absolute;
  right: 2.55rem;
  bottom: 2.55rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.6rem;
  height: 3.8rem;
  border-radius: 999px;
  background: var(--color-main);
}

.rmStatus__arrow img {
  width: 1.4rem;
  height: 1rem;
}

/* STEP2 */
.JsRmStep2 .rmModal__head {
  margin-top: 0.2rem;
}

.rmModal__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 3.4rem;
  margin: -1.6rem 0 0;
  padding-right: 5.6rem;
}

.rmModal__back {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  font-family: var(--font-sub);
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 1.43;
  color: #767676;
  transition: opacity 0.3s ease;
}

@media (hover: hover) {
.rmModal__back:hover {
  opacity: 0.7;
}
}

.rmModal__back img {
  width: 1.2rem;
  height: 1rem;
}

.rmModal__current {
  padding: 0.8rem 1.8rem;
  border-radius: 1.8rem;
  background: var(--color-main);
  font-family: var(--font-sub);
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1.385;
  letter-spacing: 0.04em;
  color: #fff;
}

.rmModal__set {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4.2rem;
  margin-top: 2.6rem;
}

.rmModal__set[hidden] {
  display: none;
}

.rmGroup {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  width: 30rem;
}

.rmGroup__title {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-family: var(--font-sub);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.467;
  letter-spacing: 0.01em;
  color: #212121;
}

.rmGroup__title::before {
  content: "";
  flex-shrink: 0;
  width: 0.3rem;
  height: 1.8rem;
  border-radius: 0.2rem;
  background: var(--color-accent);
}

.rmGroup__list {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.rmCard {
  display: flex;
  flex-direction: column;
  color: #212121;
}

.rmCard__img {
  width: 100%;
  height: 15.2rem;
  border-radius: 1.6rem;
  object-fit: cover;
}

.rmCard__title {
  margin-top: 1.2rem;
  font-family: var(--font-sub);
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.5;
}

.rmCard__cat {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.4rem;
  font-family: var(--font-sub);
  font-weight: 500;
  font-size: 1.2rem;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: #8a8a8a;
}

.rmCard__cat::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--color-main);
}

/* Figma に組み合わせが無いステータスの注記 */
@media screen and (max-width: 1024px) {
  .rmModal__statuses {
    flex-wrap: wrap;
  }

  .rmModal__statuses > li {
    flex: 0 0 calc(50% - 1rem);
  }
}

@media screen and (max-width: 750px) {
  /* SP は下から出るシート */
  .rmModal {
    align-items: flex-end;
  }

  .rmModal__panel {
    width: 100%;
    max-width: none;
    max-height: calc(100vh - 6rem);
    max-height: calc(100dvh - 6rem);
    padding: 3.4rem 2rem 2.4rem; /* Figma 3770:65006：ハンドル 12px＋4px＋18px／下 24px */
    border-radius: 2rem 2rem 0 0;
  }

  /* 開閉はアプリのボトムシートのように、シートだけ下から出入りさせる（暗幕はフェード）。
     親の .rmModal ごとフェードさせるとシートまで薄くなるので、SP は暗幕だけ opacity を動かす */
  .rmModal {
    opacity: 1;
    transition: none;
  }

  .rmModal__scrim {
    opacity: 0;
    transition: opacity 0.32s ease;
  }

  .rmModal.is-open .rmModal__scrim {
    opacity: 1;
  }

  .rmModal__panel {
    transform: translateY(100%);
    transition: transform 0.32s cubic-bezier(0.22, 0.68, 0.24, 1);
  }

  /* 指で引っ張っている間は、JS が transform を直接動かすのでアニメーションを切る */
  .rmModal__panel.is-dragging {
    transition: none;
  }

  /* 上端の帯（シートの上余白ぶん）を掴んで下へ引くと閉じる（common.js の RecommendModal）。
     見た目のバーは Figma の 40×4px・#d9d9d9 */
  .rmModal__handle {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
    height: 3.4rem;
    cursor: grab;
    touch-action: none;
  }

  .rmModal__handle::before {
    content: "";
    position: absolute;
    top: 1.2rem;
    left: 50%;
    width: 4rem;
    height: 0.4rem;
    border-radius: 0.2rem;
    background: #d9d9d9;
    transform: translateX(-50%);
  }

  .rmModal__close {
    display: none;
  }

  /* ---- Figma 3770:64983（STEP1）/ 3770:65038（STEP2）の SP 寸法 ---- */
  .rmModal__head {
    gap: 0.6rem;
  }

  .rmModal__title {
    font-size: 1.7rem;
    line-height: 2.6rem;
    letter-spacing: 0.01em;
  }

  .rmModal__sub {
    font-size: 1.2rem;
    line-height: 1.8rem;
  }

  .rmModal__statuses {
    flex-direction: column;
    gap: 1rem;
    margin-top: 1.8rem;
  }

  .rmModal__statuses > li {
    flex: none;
  }

  /* カード：最小 86px・枠 #e6e6e6・角丸 14px・右に 31.5×26 の丸矢印（左に 12px あけて並ぶ） */
  .rmStatus {
    justify-content: center;
    height: auto;
    min-height: 8.6rem;
    gap: 0.3rem;
    padding: 1.4rem 5.95rem 1.4rem 1.6rem;
    border-color: #e6e6e6;
    border-radius: 1.4rem;
  }

  .rmStatus__name {
    font-size: 1.5rem;
    line-height: 2.2rem;
    letter-spacing: 0.01em;
  }

  .rmStatus__desc {
    font-size: 1.2rem;
    line-height: 1.8rem;
  }

  .rmStatus__arrow {
    top: 50%;
    right: 1.6rem;
    bottom: auto;
    width: 3.15rem;
    height: 2.6rem;
    transform: translateY(-50%);
  }

  .rmStatus__arrow img {
    width: 0.94rem;
    height: 0.7rem;
  }

  .rmModal__bar {
    min-height: 2.8rem;
    margin: -0.2rem 0 1.6rem;
    padding-right: 0;
  }

  .rmModal__back {
    gap: 0.6rem;
    font-size: 1.2rem;
    line-height: 1.8rem;
  }

  .rmModal__back img {
    width: 1rem;
    height: 0.9rem;
  }

  /* SP の選択中ステータスは黒のピル（Figma 3770:65067） */
  .rmModal__current {
    padding: 0.6rem 1.4rem;
    border-radius: 1.4rem;
    background: #212121;
    font-size: 1.2rem;
    line-height: 1.6rem;
  }

  .JsRmStep2 .rmModal__head {
    gap: 0.5rem;
    margin-top: 0;
  }

  /* Figma の SP には STEP2 の補足文が無い */
  .JsRmStep2 .rmModal__sub {
    display: none;
  }

  .rmModal__set {
    flex-direction: column;
    gap: 1.6rem;
    margin-top: 1.6rem;
  }

  .rmGroup {
    width: 100%;
    gap: 1rem;
  }

  .rmGroup__title {
    gap: 0.7rem;
    font-size: 1.3rem;
    line-height: 1.9rem;
  }

  .rmGroup__title::before {
    height: 1.5rem;
    background: var(--color-main);
  }

  .rmGroup__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.2rem;
  }

  .rmCard__img {
    height: 8.8rem;
    border-radius: 1.2rem;
  }

  .rmCard__title {
    margin-top: 0.8rem;
    font-size: 1.3rem;
    line-height: 1.9rem;
  }

  .rmCard__cat {
    gap: 0.5rem;
    margin-top: 0.3rem;
    font-size: 1.2rem;
    line-height: 1.6rem;
  }

  .rmCard__cat::before {
    width: 0.4rem;
    height: 0.4rem;
  }
}

/* ===================================
    外部リンクの矢印は右上向き（↗）にそろえる（Figma FIN 3770-65286 のフッターバナーに合わせて全体へ）
    ・画像の矢印 … <img class="arrow-ext">（icoExt.svg）
    ・mask の矢印 … <span class="btn-arrow btn-arrow--ext">
    向きが斜めなので、ホバーで動かす方向も右上（横向きの 0.4rem と同じ移動量）
=================================== */
.gnav__arrow .arrow-ext,
.footer__banner-arrow .arrow-ext {
  width: 1.2rem;
  height: 1.2rem;
}

.btn-arrow--ext {
  -webkit-mask-image: url(../images/common/icon/icoExt.svg);
  mask-image: url(../images/common/icon/icoExt.svg);
}

.entryRail__icon .btn-arrow.btn-arrow--ext,
.fv__btn-icon .btn-arrow.btn-arrow--ext,
.btn-more__icon .btn-arrow.btn-arrow--ext {
  width: 1.1rem;
  height: 1.1rem;
}

@media screen and (max-width: 750px) {
  .fv__btn-icon .btn-arrow.btn-arrow--ext,
  .card-entry .btn-more--entry .btn-more__icon .btn-arrow.btn-arrow--ext {
    width: 1.1rem;
    height: 1.1rem;
  }
}

@media (hover: hover) {
  .gnav__site:hover .gnav__arrow .arrow-ext,
  .gnav__entry-card:hover .gnav__arrow .arrow-ext,
  .footer__banner:hover .footer__banner-arrow .arrow-ext,
  a:hover .btn-arrow.btn-arrow--ext {
    transform: translate(0.28rem, -0.28rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  @media (hover: hover) {
.gnav__site:hover .gnav__arrow .arrow-ext,
  .gnav__entry-card:hover .gnav__arrow .arrow-ext,
  .footer__banner:hover .footer__banner-arrow .arrow-ext,
  a:hover .btn-arrow.btn-arrow--ext {
    transform: none;
  }
}
}

/* ===================================
    共通パーツ：スライダーの操作ボタン（← ‖ →）
    列（.JsSlider に id）と data-slider-for で結び付ける。動きは common/swiper.js
    Figma FIN 3883-23492：直径 58.5px・間隔 20px、前後は白地に赤枠、停止は赤地
=================================== */
.sliderCtrl {
  display: flex;
  justify-content: flex-end;
  gap: 2rem;
}

.sliderCtrl__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5.85rem;
  height: 5.85rem;
  border-radius: 50%;
  background: #fff;
  color: var(--color-main); /* 中の矢印の色（.btn-arrow が currentColor で塗る） */
  box-shadow: inset 0 0 0 0.1rem var(--color-main);
  transition: background-color var(--btn-invert-duration) ease, color var(--btn-invert-duration) ease;
}

.sliderCtrl__btn[hidden] {
  display: none;
}

.sliderCtrl__btn .btn-arrow {
  width: 1.9rem;
  height: 1.3rem;
}

.sliderCtrl__btn--prev .btn-arrow {
  transform: scaleX(-1);
}

.sliderCtrl__btn--pause {
  background: var(--color-main);
  color: #fff;
}

/* ‖（一時停止）。停止中は ▶（再開）に切り替える */
.sliderCtrl__pause {
  display: block;
  width: 1.2rem;
  height: 1.6rem;
  border-inline: 0.4rem solid currentColor;
}

.sliderCtrl__btn--pause.is-paused .sliderCtrl__pause {
  width: 1.4rem;
  height: 1.6rem;
  margin-left: 0.3rem;
  border: 0;
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

@media (hover: hover) {
  .sliderCtrl__btn:hover {
    background: var(--color-main);
    color: #fff;
  }

  .sliderCtrl__btn--pause:hover {
    background: #fff;
    color: var(--color-main);
  }
}

/* SP は中央ぞろえ・直径 43.4px（Figma FIN 3891-23583。PC の 0.74 倍で中身も縮める） */
@media screen and (max-width: 750px) {
  .sliderCtrl {
    justify-content: center;
    gap: 2rem;
  }

  .sliderCtrl__btn {
    width: 4.34rem;
    height: 4.34rem;
  }

  .sliderCtrl__btn .btn-arrow {
    width: 1.41rem;
    height: 0.96rem;
  }

  .sliderCtrl__pause {
    width: 0.89rem;
    height: 1.19rem;
    border-inline-width: 0.3rem;
  }

  .sliderCtrl__btn--pause.is-paused .sliderCtrl__pause {
    width: 1.04rem;
    height: 1.19rem;
    margin-left: 0.22rem;
  }
}