@charset "UTF-8";
/* =====================================================
   株式会社ペンギントレード コーポレートサイト
   CSS v1.0 (2026-05-19)
   CA サイト分析書のテンプレ A 系統に準拠
   ===================================================== */


/* =====================================================
   1. デザイントークン
   ===================================================== */
:root {
  /* ブランドカラー (公式コーポレートロゴガイドライン 2024.09 準拠) */
  --color-brand:        #28B4BE;   /* アクアブルー (メイン強調) */
  --color-brand-hover:  #1F8E96;   /* アクアブルーの濃色 (リンク hover) */
  --color-brand-ink:    #0E6C74;   /* アクアの文字用濃色。白/オフホワイト地の小さい文字はこちら (WCAG AA 4.5:1 確保) */
  --color-brand-sub:    #001E3C;   /* ネイビー (ベース・ガバナンス感) */
  --color-brand-blue:   #1E50A0;   /* ブルー (メイン、信頼感) */
  --color-brand-alert:  #F06E46;   /* オレンジ (アクセント、情熱) */
  --color-brand-yellow: #FFF000;   /* イエロー (アクセント、未来志向) */
  --color-hero-yellow:  #FFF000;   /* hero 装飾用 (yellow と統一) */

  /* テキスト・背景 (CA 仕様 4-1 準拠: body はオフホワイト #f0f0ee) */
  --color-text:         #1A1A1A;
  --color-text-sub:     #5A6275;
  --color-bg-base:      #F0F0EE;   /* CA ベース背景 */
  --color-bg-surface:   #FFFFFF;   /* カード地 (CA 4-1) */
  --color-bg-section:   #F0F0EE;   /* セクション地も統一 */

  /* グレー段階 */
  --color-border-light: #E5E8EE;
  --color-border-mid:   #C5CAD3;
  --color-disabled:     #C5CAD3;

  /* easing (CA 準拠) */
  --easing-std:         cubic-bezier(0.23, 1, 0.58, 1);
  --easing-back:        cubic-bezier(0.175, 0.885, 0.47, 1.26);
  --easing-material:    cubic-bezier(0.4, 0, 0.22, 1);
}


/* =====================================================
   2. リセット + ベース
   ===================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 62.5%;            /* 1rem = 10px (CA 準拠) */
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* =====================================================
   2-1. prefers-reduced-motion 対応
       OS で「視差効果を減らす」設定の利用者向けにアニメーション無効化
   ===================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .l-hero_carousel_item { transition: none !important; }
  .js-inview { opacity: 1 !important; transform: none !important; }
}

html, body {
  overflow-x: hidden;          /* SP で 100vw 系要素や padding 計算ズレによる横スクロール発生防止 */
}
body {
  margin: 0;
  min-width: 320px;
  background: var(--color-bg-base);
  color: var(--color-text);
  font-family: "Noto Sans JP", YuGothic, "ヒラギノ角ゴ ProN W3",
               "Hiragino Kaku Gothic ProN",
               "メイリオ", Meiryo, Verdana, sans-serif;
  font-size: 1.4rem;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  /* 日本語の改行を意味のある句で行う (Chrome 119+ / Safari 17.4+ で形態素解析ベースに) */
  word-break: auto-phrase;
  line-break: strict;          /* 句読点の前で改行されない、行頭禁則を厳格化 */
}
/* 未対応ブラウザ (Firefox 等) のフォールバック: 旧来の normal 動作 */
@supports not (word-break: auto-phrase) {
  body { word-break: normal; }
}
@media (min-width: 768px) {
  body { font-size: 1.6rem; }
}

img, svg, video { max-width: 100%; height: auto; display: block; }
ul, ol { list-style: none; margin: 0; padding: 0; }
button { cursor: pointer; font: inherit; background: transparent; border: 0; color: inherit; }

a {
  color: var(--color-brand-hover);
  text-decoration: none;
  transition: color 0.25s var(--easing-std);
}
a:hover { color: var(--color-brand-ink); }

::selection { background: var(--color-brand); color: #FFFFFF; }

.skip-link {
  position: absolute; top: -100px; left: 0;
  background: var(--color-brand-sub); color: #FFFFFF;
  padding: 1rem 2rem; z-index: 99999;
}
.skip-link:focus { top: 0; }


/* =====================================================
   3. タイポクラス
   ===================================================== */
.font-en-display {
  font-family: "Inter", "Bebas Neue", YuGothic, sans-serif;
  letter-spacing: normal;
  font-weight: 800;
  line-height: 1;
}
.font-en-number {
  font-family: "Inter", YuGothic, sans-serif;
  font-weight: normal;
}


/* =====================================================
   4. レイアウト
   ===================================================== */
.l-container { display: block; }

/* CA 厳密準拠: コンテンツ最大幅は 992px で全画面サイズ統一 (旧 1080px は廃止) */
.m-container {
  padding: 0 20px;
}
@media (min-width: 768px) {
  .m-container { padding: 0 30px; }
}
@media (min-width: 1032px) {
  .m-container { max-width: 992px; margin: 0 auto; padding: 0; }
}

.l-main {
  display: block;
}


/* =====================================================
   5. ヘッダー (浮島ピル型、CA 準拠)
   ===================================================== */
.l-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  width: 100%;
  height: 75px;
  z-index: 10000;
  transition: transform 0.45s var(--easing-std);
}
@media (min-width: 1032px) {
  .l-header { height: 112px; }
}
.l-header.is-fixed  { position: fixed; }
.l-header.is-hidden { transform: translateY(-100%); }

.l-header_bar {
  position: absolute;
  top: 15px; right: 15px; left: 15px;
  display: flex;
  align-items: center;
  justify-content: center;          /* モバイル: ロゴを中央配置 */
  height: 45px;
  padding: 0 60px;                  /* 左右にハンバーガー分の余白を確保 */
  background: #FFFFFF;
  border-radius: 45px;
  transition: box-shadow 0.4s var(--easing-std);
}
.l-header.has-shadow .l-header_bar {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}
@media (min-width: 1032px) {
  .l-header_bar {
    top: 20px; right: 20px; left: 20px;
    height: 72px;
    padding: 0 16px 0 22px;
    justify-content: space-between; /* PC: ロゴ左 / ナビ中央 / CTA・ハンバーガー右 */
  }
}

.l-header_logo {
  display: flex;
  align-items: center;
  height: 100%;
  flex-shrink: 0;
}
.l-header_logo_img {
  display: block;
  height: 30px;
  width: auto;
  /* 画像未配置時の alt テキストをロゴ風にスタイリング */
  font-family: "Inter", "Bebas Neue", YuGothic, sans-serif;
  font-size: 1.8rem;
  color: var(--color-brand-sub);
  letter-spacing: normal;
  white-space: nowrap;
  line-height: 30px;
}
@media (min-width: 1032px) {
  .l-header_logo_img {
    height: 44px;
    line-height: 44px;
    font-size: 2.4rem;
  }
}

/* PC ナビ */
.l-header_nav { display: none; }
@media (min-width: 1032px) {
  .l-header_nav {
    display: block;
    flex: 1;
    margin: 0 24px;
  }
  .l-header_nav_items {
    display: flex;
    justify-content: flex-end;
    gap: 28px;
  }
  .l-header_nav_item {
    font-size: 1.3rem;
    font-weight: bold;
  }
  .l-header_nav_item a {
    color: var(--color-text);
    display: inline-flex;
    align-items: center;
    height: 72px;
    transition: color 0.25s var(--easing-std);
  }
  .l-header_nav_item a:hover { color: var(--color-brand-ink); }
  .l-header_nav_item.is-current a { color: var(--color-brand-ink); }
}
@media (min-width: 1100px) {
  .l-header_nav_items { gap: 36px; }
  .l-header_nav_item { font-size: 1.4rem; }
}

.l-header_function {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.l-header_contact {
  display: inline-flex;
}

/* ハンバーガー — モバイルは透過 (PC では円形ボタン) */
.l-header_toggleDrawer {
  position: absolute;                  /* モバイル: 浮島の中で右端固定 */
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background: transparent;             /* モバイル: 背景なし */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  transition: background 0.3s var(--easing-std);
}
@media (min-width: 1032px) {
  .l-header_toggleDrawer {
    position: relative;                /* PC: flex 配置に戻す */
    right: auto;
    top: auto;
    transform: none;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--color-brand-sub);
  }
  .l-header_toggleDrawer:hover {
    background: var(--color-brand);
  }
}
.l-header_toggleDrawer_lines {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 22px;
}
.l-header_toggleDrawer_line {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-brand-sub);   /* モバイル: ネイビーのライン (背景白) */
  border-radius: 2px;
  transition: transform 0.3s var(--easing-std), opacity 0.3s var(--easing-std), background 0.3s var(--easing-std);
}
@media (min-width: 1032px) {
  .l-header_toggleDrawer_lines { gap: 4px; width: 18px; }
  .l-header_toggleDrawer_line {
    width: 18px;
    background: #FFFFFF;               /* PC: 白ライン (背景ネイビー) */
  }
}
.l-header_toggleDrawer_label {
  display: none;   /* PC/モバイル共に MENU テキスト不要 */
}

/* ドロワー開時のハンバーガーアニメ */
.is-drawer-open .l-header_toggleDrawer_line:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.is-drawer-open .l-header_toggleDrawer_line:nth-child(2) {
  opacity: 0;
}
.is-drawer-open .l-header_toggleDrawer_line:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}


/* =====================================================
   6. ドロワー
   ===================================================== */
.l-drawer {
  position: fixed;
  top: 0; right: 0;
  width: 100%;
  max-width: 380px;
  height: 100vh;
  background: var(--color-brand-sub);
  color: #FFFFFF;
  padding: 100px 32px 40px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.5s var(--easing-std);
  z-index: 9999;
}
.is-drawer-open .l-drawer { transform: translateX(0); }

.l-drawer_list {
  margin-bottom: 32px;
}
.l-drawer_list li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.l-drawer_list a {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 16px 0;
  color: #FFFFFF;
}
.l-drawer_list a:hover { color: var(--color-brand-ink); }
.l-drawer_list .font-en-display {
  font-size: 2.4rem;
  color: var(--color-brand);
}
.l-drawer_jp {
  font-size: 1.3rem;
  color: #FFFFFF;
}

.l-drawer_sub {
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.l-drawer_sub li {
  padding: 8px 0;
}
.l-drawer_sub a {
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.7);
}

/* ドロワー: 言語選択 */
.l-drawer_langs {
  list-style: none;
  padding: 16px 0 0;
  margin: 16px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.l-drawer_langs li { padding: 4px 0; }
.l-drawer_langs a {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.3rem;
  color: rgba(255, 255, 255, 0.85);
  padding: 8px 0;
  text-decoration: none;
}
.l-drawer_langs a .font-en-display {
  display: inline-block;
  min-width: 32px;
  padding: 2px 6px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  text-align: center;
  font-size: 1.2rem;
  letter-spacing: normal;
}
.l-drawer_langs a.is-current {
  color: var(--color-brand);
}
.l-drawer_langs a.is-current .font-en-display {
  background: var(--color-brand);
  color: var(--color-brand-sub);
}
.l-drawer_langs a.is-disabled {
  color: rgba(255, 255, 255, 0.35);
  pointer-events: none;
}
.l-drawer_langs a small {
  margin-left: auto;
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.45);
}

/* PC ヘッダー: 言語切替ドロップダウン */
.l-header_lang {
  position: relative;
}
.l-header_lang_toggle {
  appearance: none;
  background: transparent;
  border: 1.5px solid var(--color-border-light);
  border-radius: 24px;
  padding: 6px 14px;
  font-family: inherit;
  color: var(--color-text-sub);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.25s var(--easing-std);
  letter-spacing: normal;
}
.l-header_lang_toggle:hover {
  border-color: var(--color-brand);
  color: var(--color-brand);
}
.l-header_lang_current {
  font-size: 1.3rem;
}
.l-header_lang_toggle[aria-expanded="true"] {
  border-color: var(--color-brand);
  color: var(--color-brand);
  background: rgba(43, 179, 194, 0.06);
}

.l-header_lang_menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 200px;
  background: #FFFFFF;
  border: 1px solid var(--color-border-light);
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(31, 45, 79, 0.12);
  padding: 8px;
  margin: 0;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.25s var(--easing-std), visibility 0.25s, transform 0.25s var(--easing-std);
  z-index: 1000;
}
.l-header_lang_toggle[aria-expanded="true"] + .l-header_lang_menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.l-header_lang_menu li { margin: 0; }
.l-header_lang_menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  font-size: 1.3rem;
  color: var(--color-text);
  text-decoration: none;
  border-radius: 8px;
  transition: background 0.2s var(--easing-std);
}
.l-header_lang_menu a:hover {
  background: var(--color-bg-section);
}
.l-header_lang_menu a.is-current {
  background: rgba(43, 179, 194, 0.08);
  color: var(--color-brand);
  font-weight: bold;
}
.l-header_lang_menu a.is-disabled {
  color: var(--color-disabled);
  pointer-events: none;
}
.l-header_lang_code {
  display: inline-block;
  min-width: 28px;
  padding: 2px 4px;
  background: var(--color-bg-section);
  border-radius: 4px;
  text-align: center;
  font-size: 1.1rem;
  letter-spacing: normal;
}
.l-header_lang_menu a.is-current .l-header_lang_code {
  background: var(--color-brand);
  color: #FFFFFF;
}
.l-header_lang_status {
  margin-left: auto;
  font-size: 1rem;
  color: var(--color-disabled);
}
/* 英語版の「Coming soon」でも 1 行に収まるよう、メニュー幅は内容に合わせて広げる（200px が下限。日本語版は変わらない） */
.l-header_lang_menu { width: max-content; min-width: 200px; }
.l-header_lang_menu a { white-space: nowrap; }

.l-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--easing-std), visibility 0.4s;
  z-index: 9998;
}
.is-drawer-open .l-overlay {
  opacity: 1;
  visibility: visible;
}


/* =====================================================
   7. ヒーロー
   ===================================================== */
.l-hero {
  position: relative;
  height: 100vh;
  min-height: 600px;
  max-height: 900px;
  background: var(--color-brand-sub);
  overflow: hidden;
  color: #FFFFFF;
}
@media (max-width: 375px) {
  .l-hero { max-height: 700px; }
}

.l-hero_carousel { position: absolute; inset: 0; }
.l-hero_carousel_item {
  position: absolute; inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.1s var(--easing-material), visibility 0s linear 1.1s;
}
.l-hero_carousel_item.is-current {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.l-hero_carousel_bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.05);
  transition: transform 7s linear;
}
.l-hero_carousel_item.is-current .l-hero_carousel_bg {
  transform: scale(1);
}
.l-hero_carousel_bg::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(31, 45, 79, 0.3) 0%,
    rgba(31, 45, 79, 0.5) 50%,
    rgba(31, 45, 79, 0.85) 100%);
}

/* ヒーロー背景画像 (仮素材、撮影完了後に差替え) */
.l-hero_carousel_item:nth-child(1) .l-hero_carousel_bg {
  background-image: linear-gradient(180deg, rgba(31,45,79,0.2), rgba(31,45,79,0.55)), url("/assets/images/hero-4.jpg");
}
.l-hero_carousel_item:nth-child(2) .l-hero_carousel_bg {
  background-image: linear-gradient(180deg, rgba(31,45,79,0.2), rgba(31,45,79,0.55)), url("/assets/images/hero-3.jpg");
}
.l-hero_carousel_item:nth-child(3) .l-hero_carousel_bg {
  background-image: linear-gradient(180deg, rgba(31,45,79,0.2), rgba(31,45,79,0.55)), url("/assets/images/hero-5.jpg");
}
.l-hero_carousel_item:nth-child(4) .l-hero_carousel_bg {
  background-image: linear-gradient(180deg, rgba(31,45,79,0.2), rgba(31,45,79,0.55)), url("/assets/images/hero-6.jpg");
}
.l-hero_carousel_item:nth-child(5) .l-hero_carousel_bg {
  background-image: linear-gradient(180deg, rgba(31,45,79,0.2), rgba(31,45,79,0.55)), url("/assets/images/hero-1.jpg");
}
/* スマホ: オークションの写真(1枚目/hero-4)のみ左寄り表示で左の人物を見せる。他は中央のまま */
@media (max-width: 767px) {
  .l-hero_carousel_item:nth-child(1) .l-hero_carousel_bg { background-position: 25% center; }
}
/* 2 枚目 (鎌倉店の提灯/hero-3) は上寄せ。提灯が写真の上端近くにあり、PC の横長の枠では中央だと上が切れる。
   スマホは縦長の枠で横方向しか切れないので影響なし */
.l-hero_carousel_item:nth-child(2) .l-hero_carousel_bg { background-position: center top; }

.l-hero_carousel_text {
  position: absolute;
  left: 20px; right: 20px; bottom: 90px;
  z-index: 2;
}
@media (min-width: 768px) {
  .l-hero_carousel_text { left: 60px; right: 60px; bottom: 120px; }
}
@media (min-width: 1032px) {
  .l-hero_carousel_text { left: 94px; right: 94px; bottom: 140px; }
}

.l-hero_carousel_eyebrow {
  font-size: 1.2rem;
  letter-spacing: normal;
  color: var(--color-brand);
  margin: 0 0 16px;
}
@media (min-width: 768px) {
  .l-hero_carousel_eyebrow { font-size: 1.4rem; }
}

.l-hero_carousel_title {
  font-size: 2.7rem;   /* SP: 長いステートメントでも右端で見切れないサイズ */
  overflow-wrap: anywhere;
  font-weight: 700;
  font-family: "Noto Sans JP", "Inter", YuGothic, sans-serif;
  font-feature-settings: "palt";
  letter-spacing: normal;
  line-height: 1.2;
  text-wrap: balance;
  margin: 0 0 20px;
  color: #FFFFFF;
}
@media (min-width: 768px) {
  .l-hero_carousel_title { font-size: 5rem; }
}
@media (min-width: 1032px) {
  .l-hero_carousel_title { font-size: 6.2rem; }
}

.l-hero_carousel_title_en {
  display: block;
  font-size: 1.5rem;
  letter-spacing: normal;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 12px;
  overflow-wrap: anywhere;
}
@media (min-width: 768px) {
  .l-hero_carousel_title_en { font-size: 2.8rem; }
}

.l-hero_carousel_lead {
  font-size: 1.4rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.9);
  max-width: 560px;
  margin: 0;
}
@media (min-width: 768px) {
  .l-hero_carousel_lead { font-size: 1.6rem; }
}

/* ヒーロー: ページャ + プログレスバー (CA 5-6 準拠)
   各ボタンが横長バーで、is-current のボタンは内側のプログレスが scaleX 0→1 する */
.l-hero_pager {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 12px;
  z-index: 3;
  width: calc(100% - 64px);
  max-width: 600px;
  padding: 0;
}
@media (min-width: 768px) {
  .l-hero_pager { bottom: 40px; gap: 16px; }
}

.l-hero_pager_dot {
  flex: 1;
  position: relative;
  height: 3px;
  background: rgba(255, 255, 255, 0.3);
  border: none;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  transition: background 0.25s var(--easing-std);
}
.l-hero_pager_dot:hover {
  background: rgba(255, 255, 255, 0.5);
}

/* 内側のプログレスバー (scaleX で伸びる) */
.l-hero_pager_progress {
  display: block;
  position: absolute;
  inset: 0;
  background: #FFFFFF;
  transform: scaleX(0);
  transform-origin: left;
  pointer-events: none;
}
/* is-current のスライドだけプログレスを進める */
.l-hero_pager_dot.is-current .l-hero_pager_progress {
  animation: l-hero_pagerProgress 5000ms linear forwards;
}
/* 通過済みスライドは満タンで保持 (リスタート時にゼロに戻す) */
.l-hero_pager_dot.is-passed .l-hero_pager_progress {
  transform: scaleX(1);
}
@keyframes l-hero_pagerProgress {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* prefers-reduced-motion 時はアニメ無効 */
@media (prefers-reduced-motion: reduce) {
  .l-hero_pager_dot.is-current .l-hero_pager_progress {
    animation: none;
    transform: scaleX(1);
  }
}

/* スクロールガイド */
.l-hero_scroll {
  position: absolute;
  right: 32px;
  bottom: 40px;
  display: none;
  align-items: center;
  gap: 12px;
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: normal;
  transform: rotate(90deg);
  transform-origin: right bottom;
  z-index: 3;
}
@media (min-width: 1032px) {
  .l-hero_scroll { display: inline-flex; }
}
.l-hero_scroll_bar {
  position: relative;
  width: 30px;
  height: 1px;
  background: rgba(255, 255, 255, 0.4);
  overflow: hidden;
}
.l-hero_scroll_bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #FFFFFF;
  animation: hero-scroll-bar 3s infinite;
}
@keyframes hero-scroll-bar {
  0%        { transform: translateX(-100%); }
  50%, 100% { transform: translateX(100%); }
}


/* =====================================================
   8. セクション共通
   ===================================================== */
.m-section {
  margin: 56px 0;
}
@media (min-width: 768px) {
  .m-section { margin: 84px 0; }
}
@media (min-width: 1032px) {
  .m-section { margin: 120px 0; }
}

.m-section-tight {
  margin: 32px 0;
}
@media (min-width: 768px) {
  .m-section-tight { margin: 56px 0; }
}

.m-section-bg {
  background: var(--color-bg-section);
  margin: 0;
  padding: 72px 0;
}
@media (min-width: 768px) {
  .m-section-bg { padding: 112px 0; }
}
@media (min-width: 1032px) {
  .m-section-bg { padding: 144px 0; }
}

/* セクション見出し (英大 + 日小) */
.m-categorySection_heading {
  margin: 0 0 32px;
}
@media (min-width: 768px) {
  .m-categorySection_heading { margin-bottom: 48px; }
}

/* 見出しは日本語主導: 英語は小さなアイブロウ、日本語をタイトルに */
.m-categorySection_heading_en {
  font-size: 1.2rem;
  letter-spacing: normal;
  text-transform: uppercase;
  color: var(--color-brand-ink);
  font-weight: 700;
  margin: 0 0 10px;
}
@media (min-width: 768px) {
  .m-categorySection_heading_en { font-size: 1.3rem; }
}

.m-categorySection_heading_ja {
  font-size: 2.4rem;
  font-weight: 700;
  font-family: "Noto Sans JP", "Inter", YuGothic, sans-serif;
  font-feature-settings: "palt";
  letter-spacing: normal;
  line-height: 1.3;
  color: var(--color-text);
  margin: 0;
}
@media (min-width: 768px) {
  .m-categorySection_heading_ja { font-size: 3.4rem; }
}
.m-categorySection_lead {
  font-size: 1.4rem;
  line-height: 1.8;
  color: var(--color-text-sub);
  margin: 12px 0 0;
  max-width: 720px;
}
@media (min-width: 768px) {
  .m-categorySection_lead { font-size: 1.6rem; }
}

/* 黒バー見出し */
.m-section_heading-h2 {
  position: relative;
  margin: 0 0 24px;
  padding: 0 0 13px;
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 1.6;
}
.m-section_heading-h2::after {
  content: "";
  position: absolute; bottom: 0; left: 0;
  width: 40px; height: 4px;
  border-radius: 4px;
  background: var(--color-brand);
}
@media (min-width: 768px) {
  .m-section_heading-h2 {
    margin-bottom: 28px;
    padding-bottom: 18px;
    font-size: 2.8rem;
  }
  .m-section_heading-h2::after { width: 50px; }
}


/* =====================================================
   9. ボタン
   ===================================================== */
.m-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.7em 2.4em;
  min-width: 200px;
  max-width: 100%;
  border: 3px solid var(--color-brand);
  border-radius: 50px;
  background: #FFFFFF;
  color: var(--color-brand-hover);
  font-size: 1.4rem;
  font-weight: bold;
  text-decoration: none;
  transition: background-color 0.3s var(--easing-std), color 0.3s var(--easing-std);
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}
@media (min-width: 768px) {
  .m-btn {
    padding: 0.7em 3em;
    min-width: 246px;
    font-size: 1.6rem;
  }
}
.m-btn:hover {
  background: var(--color-brand);
  color: #FFFFFF;
}

.m-btn-inverse {
  background: var(--color-brand-sub);
  border-color: var(--color-brand-sub);
  color: #FFFFFF;
}
.m-btn-inverse:hover {
  background: #FFFFFF;
  color: var(--color-brand-sub);
}

.m-btn-inverse2 {
  background: var(--color-brand);
  border-color: var(--color-brand);
  color: #FFFFFF;
}
.m-btn-inverse2:hover {
  background: #FFFFFF;
  color: var(--color-brand);
}

.m-btn-alert {
  background: var(--color-brand-alert);
  border-color: var(--color-brand-alert);
  color: #FFFFFF;
}
.m-btn-alert:hover {
  background: #FFFFFF;
  color: var(--color-brand-alert);
}

.m-btn-ghost {
  background: transparent;
  border: 2px solid #FFFFFF;
  color: #FFFFFF;
}
.m-btn-ghost:hover {
  background: #FFFFFF;
  color: var(--color-brand-sub);
}

.m-btn-sm {
  min-width: auto;
  padding: 0.5em 1.4em;
  font-size: 1.2rem;
  border-width: 2px;
}

.m-btn .m-btn_icon { margin-left: 8px; }

.m-btn_label { display: inline-block; }


/* =====================================================
   10. カード (CA 二重 hover)
   ===================================================== */
.m-card {
  /* m-cardPhoto と同じ構造に統一: 親に border + overflow:hidden、画像は自然に角丸クリップ */
  position: relative;
  width: 100%;
  max-width: 400px;
  background: #FFFFFF;
  border: 1px solid var(--color-border-light);
  border-radius: 16px;
  overflow: hidden;
  transition: transform 0.4s var(--easing-back), box-shadow 0.4s var(--easing-std);
}
.m-card:not(.m-card-noHover):hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(0, 30, 60, 0.08);
}
.m-card a {
  display: block;
  color: var(--color-text);
  text-decoration: none;
}

.m-card_img {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background-color: #EFEFED;
}
.m-card_imgWrapper {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.m-card_imgWrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--easing-std);
}
.m-card:not(.m-card-noHover):hover .m-card_imgWrapper img {
  transform: scale(1.06);
}

.m-card_body {
  padding: 24px;
  position: relative;
}
@media (min-width: 768px) {
  .m-card_body { padding: 28px 28px 36px; }
}

.m-card_meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.m-card_badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  background: var(--color-brand-sub);
  color: #FFFFFF;
  font-size: 1.1rem;
  font-weight: bold;
  line-height: 1.4;
}
.m-card_badge-alert {
  background: #BF4A24; /* alert 系の濃色 (白文字で WCAG AA を満たす) */
}
.m-card_badge-accent {
  background: var(--color-brand-ink);
}

.m-card_date {
  font-size: 1.2rem;
  color: var(--color-text-sub);
  font-family: "Inter", sans-serif;
}

.m-card_title {
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1.6;
  margin: 0 0 8px;
}
@media (min-width: 768px) {
  .m-card_title { font-size: 1.7rem; }
}

/* お知らせカードのタイトルを最大3行に固定（超過分は…で省略）。news.js が付与する */
.u-newsTitleClamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.m-card_text {
  font-size: 1.3rem;
  line-height: 1.7;
  color: var(--color-text-sub);
  margin: 0;
}

.m-card-border {
  border-width: 2px;
}


/* =====================================================
   11. カードグループ (グリッド)
   ===================================================== */
.m-cardGroup {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}
@media (min-width: 600px) {
  .m-cardGroup-2col-sm { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
  .m-cardGroup { gap: 28px; }
  .m-cardGroup-2col-md { grid-template-columns: repeat(2, 1fr); }
  .m-cardGroup-3col-md { grid-template-columns: repeat(3, 1fr); }
  .m-cardGroup-4col-md { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1032px) {
  .m-cardGroup { gap: 32px; }
}


/* =====================================================
   12. インビュー演出
   ===================================================== */
.js-inview { transition: opacity 0.6s var(--easing-std), transform 0.6s var(--easing-std); }
.js-inview:not(.is-inview) {
  opacity: 0;
  transform: translateY(24px);
}
.js-inview.is-inview {
  opacity: 1;
  transform: translateY(0);
}


/* =====================================================
   13. NUMBERS セクション
   薄グレー本文の中に置くネイビーの角丸パネル (2026-08-26)。
   旧: 100vw の全幅帯。ページ末尾が「ネイビー → 薄グレーのパンくず → ネイビーのフッター」になり
   パンくずが浮いて見えたため、CA と同じ「薄グレー → 白 → ネイビー」で終わる構造に戻した。
   置き場所は 2 通り: (a) l-pageBody > m-container の中 (オークション各ページ)
                      (b) main 直下 (/business/ /careers/ /en/)
   ===================================================== */
.l-numbers {
  color: #FFFFFF;
  margin: 32px 0;                 /* (a) m-section-tight と同じ節間隔 */
}
@media (min-width: 768px) {
  .l-numbers { margin: 56px 0; }
}

/* パネル本体: セクション直下の m-container をカードにする */
.l-numbers > .m-container {
  max-width: none;
  margin: 0;
  padding: 40px 24px;
  background: var(--color-brand-sub);
  border-radius: 20px;             /* l-cta_banner と同じ */
}
@media (min-width: 768px) {
  .l-numbers > .m-container { padding: 56px 48px; }
}
@media (min-width: 1032px) {
  .l-numbers > .m-container { padding: 64px 56px; }
}

/* (b) main 直下: 自身をコンテナ幅 (m-container と同じ) に揃え、前後の間隔を広めに取る */
.l-main > .l-numbers {
  margin: 48px 0;
  padding: 0 20px;
}
@media (min-width: 768px) {
  .l-main > .l-numbers { margin: 64px 0; padding: 0 30px; }
}
@media (min-width: 1032px) {
  .l-main > .l-numbers { max-width: 992px; margin: 80px auto; padding: 0; }
}
/* 直前が l-pageBody のとき (ページ末尾に置く /business/ /careers/) は
   l-pageBody 側の下余白を外し、パネルの上下が同じ間隔になるようにする */
.l-pageBody:has(+ .l-numbers) { padding-bottom: 0; }

.l-numbers .m-categorySection_heading_en { color: var(--color-brand); }
.l-numbers .m-categorySection_heading_ja { color: #FFFFFF; }

.l-numbers_grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));  /* SP 2 列。縦に伸びて間延びするのを避ける */
  gap: 26px 16px;
}
@media (min-width: 768px) {
  .l-numbers_grid { grid-template-columns: repeat(3, 1fr); gap: 48px 32px; }
}
@media (min-width: 1032px) {
  .l-numbers_grid { grid-template-columns: repeat(3, 1fr); }
}
/* 4 指標のページ用: ワイド画面では 4 列で 1 行に収める */
@media (min-width: 1032px) {
  .l-numbers_grid.l-numbers_grid-4 { grid-template-columns: repeat(4, 1fr); }
}

.l-numbers_item {
  text-align: left;
}

/* ラベル = 何の数字か（日本語）。英語ラベルは分かりにくいので 2026-08-31 に日本語へ */
.l-numbers_label {
  font-size: 1.3rem;
  line-height: 1.5;
  letter-spacing: normal;
  color: var(--color-brand);
  margin: 0 0 6px;
}

.l-numbers_value {
  font-size: 2.8rem;          /* SP 28px。2 列に収まる大きさ */
  line-height: 1;
  color: #FFFFFF;
  margin: 0 0 8px;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;            /* 単位が長い場合の折り返し許可 */
  gap: 4px;
}
@media (min-width: 768px) {
  .l-numbers_value { font-size: 5.2rem; flex-wrap: nowrap; }
}
.l-numbers_value_unit {
  font-size: 1.4rem;
  color: rgba(255, 255, 255, 0.7);
}
@media (min-width: 768px) {
  .l-numbers_value_unit { font-size: 1.8rem; }
}

/* キャプション = 時点・内訳などの注記。無い項目もある */
.l-numbers_caption {
  font-size: 1.2rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}


/* =====================================================
   13b. 私たちの約束 (l-commitment) — サステナビリティ
   罫線で区切る行型。番号は Inter・小さく (採用の l-flow_num と同じ尺度)。
   大きなアクア番号は装飾に見える上にコントラスト未達 (2.2:1) だったので廃止
   ===================================================== */
.l-commitment_list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--color-border-mid);
}

.l-commitment_item {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 0 8px;
  padding: 20px 0 22px;
  border-bottom: 1px solid var(--color-border-light);
  align-items: baseline;
}
@media (min-width: 768px) {
  .l-commitment_item {
    grid-template-columns: 80px 1fr;
    padding: 28px 0 32px;
  }
}

.l-commitment_no {
  margin: 0;
  font-family: "Inter", sans-serif;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: normal;
  color: var(--color-brand-ink);
}
@media (min-width: 768px) {
  .l-commitment_no { font-size: 2.2rem; line-height: 1.2; }
}

.l-commitment_body { margin: 0; }

.l-commitment_title {
  margin: 0 0 8px;
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-text);
  text-wrap: balance;
}
@media (min-width: 768px) {
  .l-commitment_title { font-size: 1.9rem; margin-bottom: 10px; }
}

.l-commitment_text {
  margin: 0;
  font-size: 1.4rem;
  line-height: 1.85;
  color: var(--color-text);
}
@media (min-width: 768px) {
  .l-commitment_text { font-size: 1.5rem; }
}

.l-commitment_note {
  margin: 32px 0 0;
  font-size: 1.2rem;
  line-height: 1.7;
  color: var(--color-text-sub);
}


/* =====================================================
   14. ビジネス三層プラットフォーム
   ===================================================== */
.l-business_layers {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 768px) {
  .l-business_layers { gap: 32px; }
}

.l-business_layer {
  position: relative;
  border: 2px solid var(--color-border-light);
  border-radius: 20px;
  padding: 32px 24px;
  background: #FFFFFF;
  transition: all 0.4s var(--easing-std);
}
@media (min-width: 768px) {
  .l-business_layer { padding: 40px 36px; }
}
.l-business_layer:hover {
  border-color: var(--color-brand);
  transform: translateY(-4px);
}

.l-business_layer_badge {
  position: absolute;
  top: -16px; left: 24px;
  background: var(--color-brand-sub);
  color: #FFFFFF;
  font-size: 1.2rem;
  font-weight: bold;
  letter-spacing: normal;
  padding: 8px 18px;
  border-radius: 24px;
}
@media (min-width: 768px) {
  .l-business_layer_badge {
    font-size: 1.3rem;
    padding: 9px 20px;
  }
}
.l-business_layer-mid .l-business_layer_badge {
  background: var(--color-brand);
}
.l-business_layer-small .l-business_layer_badge {
  background: var(--color-brand-alert);
}

.l-business_layer_heading {
  font-size: 2rem;
  font-weight: bold;
  margin: 12px 0 16px;
  line-height: 1.5;
}
@media (min-width: 768px) {
  .l-business_layer_heading { font-size: 2.4rem; }
}

.l-business_layer_highlight {
  position: relative;
  font-size: 1.3rem;
  font-weight: bold;
  color: var(--color-brand-hover);
  margin: 0 0 20px;
  padding-left: 18px;
}
.l-business_layer_highlight::before {
  content: "\25B6";
  position: absolute;
  left: 0; top: 0;
  color: var(--color-brand);
  font-size: 1rem;
}
@media (min-width: 768px) {
  .l-business_layer_highlight { font-size: 1.5rem; }
}
.l-business_layer-mid .l-business_layer_highlight::before {
  color: var(--color-brand-sub);
}
.l-business_layer-small .l-business_layer_highlight::before {
  color: var(--color-brand-alert);
}

.l-business_layer_tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.l-business_layer_tag {
  font-size: 1.1rem;
  padding: 6px 12px;
  background: var(--color-bg-section);
  border-radius: 20px;
  color: var(--color-text);
}


/* =====================================================
   15. MVV カード
   ===================================================== */
.l-mvv {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 768px) {
  .l-mvv { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}

.l-mvv_card {
  background: var(--color-brand-sub);
  color: #FFFFFF;
  padding: 36px 28px;
  border-radius: 20px;
  position: relative;
  overflow: hidden;
}
.l-mvv_card-accent {
  background: var(--color-brand);
}

.l-mvv_card_label {
  font-size: 1.1rem;
  letter-spacing: normal;
  color: rgba(255, 255, 255, 0.6);
  margin: 0 0 8px;
}
.l-mvv_card-accent .l-mvv_card_label { color: rgba(255, 255, 255, 0.8); }

.l-mvv_card_en {
  font-size: 3.2rem;
  margin: 0 0 16px;
  color: #FFFFFF;
}
@media (min-width: 768px) {
  .l-mvv_card_en { font-size: 4rem; }
}

.l-mvv_card_ja {
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1.6;
  margin: 0 0 16px;
  color: #FFFFFF;
}
@media (min-width: 768px) {
  .l-mvv_card_ja { font-size: 1.7rem; }
}

.l-mvv_card_text {
  font-size: 1.3rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}


/* =====================================================
   16. STORES (店舗)
   ===================================================== */
.l-stores_grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 600px) {
  .l-stores_grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1032px) {
  .l-stores_grid { grid-template-columns: repeat(3, 1fr); gap: 28px; }
}

.l-stores_item {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  background: var(--color-bg-section);
  aspect-ratio: 16 / 10;   /* サイト全体で 16:10 に統一 (撮影・加工工数を下げる) */
  transition: transform 0.4s var(--easing-std);
}
.l-stores_item:hover {
  transform: translateY(-4px);
}

.l-stores_item_bg {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, var(--color-brand-sub) 0%, var(--color-brand) 100%);
  transition: transform 0.5s var(--easing-std);
}
.l-stores_item:hover .l-stores_item_bg {
  transform: scale(1.05);
}

.l-stores_item_inner {
  position: absolute; inset: 0;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #FFFFFF;
  z-index: 1;
}

.l-stores_item_status {
  align-self: flex-start;
  font-size: 1.1rem;
  padding: 4px 10px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.2);
  font-weight: bold;
}
.l-stores_item_status-new {
  background: var(--color-brand-alert);
}
.l-stores_item_status-plan {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
}

.l-stores_item_name {
  margin-top: auto;
}
.l-stores_item_en {
  font-size: 2.4rem;
  display: block;
  margin-bottom: 8px;
}
.l-stores_item_ja {
  font-size: 1.3rem;
  font-weight: bold;
  display: block;
  margin-bottom: 4px;
}
.l-stores_item_address {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}


/* =====================================================
   17. SUSTAINABILITY ヒーロー
   ===================================================== */
.l-sustainability_hero {
  background: linear-gradient(135deg, var(--color-bg-section) 0%, #FFFFFF 100%);
  padding: 72px 0;
  border-radius: 20px;
}
@media (min-width: 768px) {
  .l-sustainability_hero { padding: 96px 0; }
}

.l-sustainability_hero_inner {
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 24px;
}

.l-sustainability_hero_heading {
  font-size: 2.2rem;
  font-weight: bold;
  line-height: 1.5;
  margin: 0 0 24px;
}
@media (min-width: 768px) {
  .l-sustainability_hero_heading { font-size: 3.2rem; }
}

.l-sustainability_hero_text {
  font-size: 1.4rem;
  line-height: 1.9;
  color: var(--color-text-sub);
  margin: 0 0 32px;
}


/* =====================================================
   18. CAREERS / INVESTORS バナー
   ===================================================== */
.l-cta_banner {
  background: var(--color-brand-sub);
  color: #FFFFFF;
  padding: 64px 24px;
  border-radius: 20px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
@media (min-width: 768px) {
  .l-cta_banner { padding: 96px 40px; }
}

.l-cta_banner-alert {
  background: linear-gradient(135deg, var(--color-brand-sub) 0%, var(--color-brand-alert) 100%);
}

.l-cta_banner_label {
  font-size: 1.2rem;
  letter-spacing: normal;
  margin: 0 0 16px;
  color: var(--color-brand);
}
.l-cta_banner-alert .l-cta_banner_label { color: var(--color-hero-yellow); }

.l-cta_banner_heading {
  font-size: 2.4rem;          /* SP 24px (旧 3.6rem は「2026年6月20日オープン予定」等が見切れた) */
  line-height: 1.4;
  margin: 0 0 12px;
}
@media (min-width: 768px) {
  .l-cta_banner_heading { font-size: 5.2rem; line-height: 1.2; }
}

.l-cta_banner_subheading {
  font-size: 1.6rem;
  font-weight: bold;
  margin: 0 0 24px;
  color: #FFFFFF;
}

.l-cta_banner_text {
  font-size: 1.3rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.85);
  max-width: 640px;
  margin: 0 auto 32px;
  text-align: center;
  text-wrap: balance;        /* 中央寄せ時の行末バランス改善 */
}
.l-cta_banner_label,
.l-cta_banner_heading,
.l-cta_banner_subheading {
  text-align: center;
  text-wrap: balance;
}


/* =====================================================
   19. お問い合わせ動線 4 つ
   ===================================================== */
.l-contact_grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 768px) {
  .l-contact_grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (min-width: 1032px) {
  .l-contact_grid { grid-template-columns: repeat(4, 1fr); }
}

.l-contact_item {
  display: block;
  padding: 28px 24px;
  background: #FFFFFF;
  border: 2px solid var(--color-border-light);
  border-radius: 20px;
  transition: all 0.4s var(--easing-std);
  color: var(--color-text);
}
.l-contact_item:hover {
  border-color: var(--color-brand);
  transform: translateY(-4px);
  color: var(--color-text);
}

.l-contact_item_label {
  font-size: 1.4rem;
  margin: 0 0 8px;
  color: var(--color-brand);
}

.l-contact_item_title {
  font-size: 1.5rem;
  font-weight: bold;
  margin: 0 0 4px;
}

.l-contact_item_text {
  font-size: 1.2rem;
  color: var(--color-text-sub);
  margin: 0;
}


/* =====================================================
   20. フッター (ディープネイビー地)
   ===================================================== */
/* ============================================
   フッター
   モバイル: CA SP 仕様 (ロゴ→SNS→言語→2列リンクテーブル→Copyright)
   PC: 横並び中央集約 (以前の仕様)
   背景は公式ロゴガイドライン ネイビー #001E3C
   ============================================ */
.l-footer {
  background: #001E3C;
  color: #FFFFFF;
  padding: 28px 0 0;
}
@media (min-width: 768px) {
  .l-footer { padding: 32px 0 0; }
}

/* 上部ブロック: ロゴ・SNS・English (中央集約、コンパクト) */
.l-footer_top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 0 24px 20px;
}
@media (min-width: 768px) {
  .l-footer_top { gap: 18px; padding-bottom: 24px; }
}

/* ロゴ (コンパクトサイズ) */
.l-footer_logo {
  display: inline-block;
}
.l-footer_logo_img {
  display: block;
  width: 216px;
  height: 216px;
}
@media (min-width: 768px) {
  .l-footer_logo_img { width: 240px; height: 240px; }
}

/* SNS アイコン (白丸 + ネイビーアイコン) */
.l-footer_sns {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 12px;
}
.l-footer_sns_icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #FFFFFF;
  color: #001E3C;
  transition: background 0.25s var(--easing-std), transform 0.25s var(--easing-std);
}
.l-footer_sns_icon:hover {
  background: var(--color-brand);
  color: #FFFFFF;
  transform: translateY(-2px);
}

/* English ボタン (pill、白枠、コンパクト) */
.l-footer_lang_btn {
  display: inline-block;
  padding: 7px 32px;
  border: 1.5px solid #FFFFFF;
  border-radius: 24px;
  color: #FFFFFF;
  font-size: 1.2rem;
  font-weight: bold;
  letter-spacing: normal;
  text-decoration: none;
  transition: background 0.25s var(--easing-std), color 0.25s var(--easing-std);
}
.l-footer_lang_btn:hover {
  background: #FFFFFF;
  color: #001E3C;
}

/* リンクリスト
   モバイル: 2 列テーブル (CA SP 仕様、細い白線で区切る)
   PC: 横並びテキスト (以前の仕様、テーブル線を消す) */
.l-footer_links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
.l-footer_links li {
  border-right: 1px solid rgba(255, 255, 255, 0.18);
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
.l-footer_links li:nth-child(2n) { border-right: none; }
.l-footer_links a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 12px;
  font-size: 1.2rem;
  font-weight: bold;
  color: #FFFFFF;
  text-decoration: none;
  text-align: center;
  transition: background 0.25s var(--easing-std), color 0.25s var(--easing-std);
}
.l-footer_links a:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-brand);
}

/* PC: 以前の横並びテキスト仕様に戻す (コンパクト) */
@media (min-width: 768px) {
  .l-footer_links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 28px;
    border: none;
    padding: 0 24px;
  }
  .l-footer_links li {
    border: none;
  }
  .l-footer_links a {
    padding: 0;
    background: transparent;
    font-size: 1.3rem;
  }
  .l-footer_links a:hover {
    background: transparent;
    color: var(--color-brand);
  }
}

/* 著作権 (中央、ネイビー地に薄白、コンパクト) */
.l-footer_copyright {
  margin: 0;
  padding: 18px 24px;
  text-align: center;
  font-size: 1.1rem;
  font-weight: bold;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: normal;
}
@media (min-width: 768px) {
  .l-footer_copyright { padding: 20px 24px; font-size: 1.2rem; }
}


/* =====================================================
   22. サイトマップページ (CA 4-col グリッド準拠)
   ===================================================== */
.l-sitemap_grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}
@media (min-width: 768px) {
  .l-sitemap_grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 48px 32px;
  }
}
@media (min-width: 1032px) {
  .l-sitemap_grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 56px 40px;
  }
}


/* =====================================================
   21. ユーティリティ
   ===================================================== */
.u-hidden { display: none !important; }
@media (max-width: 599px) { .u-hidden-max-xs { display: none !important; } }
@media (max-width: 767px) { .u-hidden-max-sm { display: none !important; } }
@media (max-width: 1031px) { .u-hidden-max-md { display: none !important; } }
@media (min-width: 600px) { .u-hidden-min-sm { display: none !important; } }
@media (min-width: 768px) { .u-hidden-min-md { display: none !important; } }
@media (min-width: 1032px) { .u-hidden-min-lg { display: none !important; } }

.u-visuallyhidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
}

.u-text-center { text-align: center; }
.u-text-center-sm { text-align: center; }
@media (min-width: 768px) {
  .u-text-center-sm { text-align: inherit; }
}
.u-mt-1 { margin-top: 8px; }
.u-mt-2 { margin-top: 16px; }
.u-mt-3 { margin-top: 24px; }
.u-mt-4 { margin-top: 32px; }
.u-mt-5 { margin-top: 48px; }
.u-mb-1 { margin-bottom: 8px; }
.u-mb-2 { margin-bottom: 16px; }
.u-mb-3 { margin-bottom: 24px; }
.u-mb-4 { margin-bottom: 32px; }
.u-mb-5 { margin-bottom: 48px; }


/* =====================================================
   22. トップメッセージ
   ===================================================== */
.l-message {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
}
@media (min-width: 768px) {
  .l-message {
    grid-template-columns: 1fr 1fr;
    gap: 64px;
  }
}

.l-message_visual {
  aspect-ratio: 4 / 5;
  background: linear-gradient(135deg, var(--color-brand-sub) 0%, var(--color-brand) 100%);
  border-radius: 20px;
  position: relative;
  overflow: hidden;
}
.l-message_visual_quote {
  position: absolute;
  bottom: 32px;
  left: 32px;
  right: 32px;
  font-family: "Bebas Neue", sans-serif;
  font-size: 3.6rem;
  color: rgba(255, 255, 255, 0.95);
  letter-spacing: normal;
  line-height: 1.1;
}
@media (min-width: 768px) {
  .l-message_visual_quote { font-size: 5.2rem; }
}

.l-message_body {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.l-message_lead {
  font-size: 2rem;
  font-weight: bold;
  line-height: 1.5;
  margin: 0;
}
@media (min-width: 768px) {
  .l-message_lead { font-size: 2.4rem; }
}

.l-message_text {
  font-size: 1.4rem;
  line-height: 1.9;
  color: var(--color-text-sub);
  margin: 0;
}

.l-message_signature {
  font-size: 1.3rem;
  color: var(--color-text);
}
.l-message_signature_name {
  font-size: 1.6rem;
  font-weight: bold;
  display: block;
}


/* =====================================================
   23. ニュースリスト + フィルター UI (CA m-btnListGroup パターン)
   ===================================================== */
.l-news_head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 24px;
}

.m-btnListGroup {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}
.m-btnListGroup_label {
  font-size: 1.2rem;
  font-weight: bold;
  color: var(--color-text-sub);
  margin: 0 8px 0 0;
  letter-spacing: normal;
}
.m-btnListGroup_btn {
  appearance: none;
  background: #FFFFFF;
  border: 1.5px solid var(--color-border-light);
  border-radius: 24px;
  padding: 8px 18px;
  font-size: 1.3rem;
  font-weight: bold;
  color: var(--color-text-sub);
  cursor: pointer;
  transition: all 0.25s var(--easing-std);
  letter-spacing: normal;
}
.m-btnListGroup_btn:hover {
  border-color: var(--color-brand);
  color: var(--color-brand);
}
.m-btnListGroup_btn.is-current {
  background: var(--color-brand-sub);
  border-color: var(--color-brand-sub);
  color: #FFFFFF;
}

.l-news_count {
  font-size: 1.3rem;
  color: var(--color-text-sub);
  margin: 24px 0 16px;
}
.l-news_count #newsCount {
  font-weight: bold;
  color: var(--color-text);
}
.l-news_empty {
  text-align: center;
  padding: 48px 0;
  color: var(--color-text-sub);
  font-size: 1.4rem;
}

.m-card.is-hidden { display: none; }


/* =====================================================
   24. ラベル/屋号 横並びカード
   ===================================================== */
.l-labels {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 768px) {
  .l-labels { grid-template-columns: repeat(3, 1fr); gap: 28px; }
}

.l-labels_card {
  display: block;
  padding: 36px 28px;
  background: #FFFFFF;
  border: 2px solid var(--color-border-light);
  border-radius: 20px;
  transition: all 0.4s var(--easing-std);
  color: var(--color-text);
}
.l-labels_card:hover {
  border-color: var(--color-brand);
  transform: translateY(-4px);
  color: var(--color-text);
}

.l-labels_card_label {
  font-size: 1.1rem;
  letter-spacing: normal;
  color: var(--color-text-sub);
  margin: 0 0 12px;
}

.l-labels_card_en {
  font-size: 3.2rem;
  margin: 0 0 8px;
  color: var(--color-brand-sub);
}
@media (min-width: 768px) {
  .l-labels_card_en { font-size: 4rem; }
}

.l-labels_card_ja {
  font-size: 1.5rem;
  font-weight: bold;
  margin: 0 0 16px;
}

.l-labels_card_text {
  font-size: 1.3rem;
  line-height: 1.7;
  color: var(--color-text-sub);
  margin: 0;
}


/* =====================================================
   26. 下層ページ: カテゴリヒーロー
   ===================================================== */
.l-categoryHero {
  position: relative;
  padding: 140px 0 60px;
  background: var(--color-brand-sub);   /* CA 同様、シンプルなネイビー単色 */
  color: #FFFFFF;
  overflow: hidden;
}
@media (min-width: 768px) {
  .l-categoryHero { padding: 200px 0 100px; }
}
@media (min-width: 1032px) {
  .l-categoryHero { padding: 220px 0 120px; }
}

/* 背景画像は廃止 — CA は categoryHero-fluid (背景画像なし・ネイビー単色) で統一。
   旧 has-bg-* クラスがあっても無視 (categoryHero-fluid のスタイルが優先される) */

.l-categoryHero,
.l-categoryHero-fluid {
  background: var(--color-brand-sub);
  background-image: none;
}

/* タイトルの左端を本文ヒーロー (l-pageHero / l-messagePage / l-pageLead = 992px 中央) と揃える */
@media (min-width: 1032px) {
  .l-categoryHero > .m-container {
    max-width: 992px;
  }
}

.l-categoryHero_en {
  font-size: 1.4rem;
  letter-spacing: normal;
  color: var(--color-brand);
  margin: 0 0 12px;
}
@media (min-width: 768px) {
  .l-categoryHero_en { font-size: 1.6rem; }
}

.l-categoryHero_title {
  font-size: 3.2rem;         /* SP 32px (旧 4rem は長いタイトルで見切れた) */
  margin: 0;
  line-height: 1.15;
  color: #FFFFFF;
  font-weight: 700;
  font-family: "Noto Sans JP", "Inter", YuGothic, sans-serif;
  font-feature-settings: "palt";
  letter-spacing: normal;
  word-break: keep-all;
  overflow-wrap: break-word;
}
@media (min-width: 768px) {
  .l-categoryHero_title { font-size: 5.4rem; line-height: 1.1; }
}
@media (min-width: 1032px) {
  .l-categoryHero_title { font-size: 6.6rem; }
}

.l-categoryHero_title_ja {
  display: block;
  font-size: 1.4rem;
  font-weight: bold;
  margin-top: 12px;
  font-family: YuGothic, sans-serif;
  letter-spacing: normal;
  color: rgba(255, 255, 255, 0.85);
}
@media (min-width: 768px) {
  .l-categoryHero_title_ja { font-size: 1.8rem; margin-top: 16px; }
}

.l-categoryHero_lead {
  margin-top: 24px;
  max-width: 800px;          /* CA 流: 行末オーフェン抑制のため広めに (旧 640px は孤立行の原因) */
  font-size: 1.4rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.85);
  text-wrap: balance;        /* 改行位置を自動均等化 (Chrome/Safari 対応) */
}
@media (min-width: 768px) {
  .l-categoryHero_lead { font-size: 1.6rem; margin-top: 32px; }
}


/* =====================================================
   27. ページボディ
   ===================================================== */
.l-pageBody {
  padding: 56px 0;
}
@media (min-width: 768px) {
  .l-pageBody { padding: 84px 0; }
}
@media (min-width: 1032px) {
  .l-pageBody { padding: 120px 0; }
}

.l-pageBody-narrow .m-container {
  max-width: 720px;
}

.l-pageHeader {
  padding: 140px 0 40px;
  background: var(--color-bg-section);
}
@media (min-width: 768px) {
  .l-pageHeader { padding: 180px 0 60px; }
}
.l-pageHeader_title {
  font-size: 3.2rem;
  margin: 0;
}
@media (min-width: 768px) {
  .l-pageHeader_title { font-size: 4.4rem; }
}


/* =====================================================
   28. パンくず
   ===================================================== */
/* CA 同様、薄グレー本文の下に置く「白い段差」。1 階層目の「トップ」はホームアイコンで表示 (2026-08-26) */
.l-breadcrumb {
  padding: 18px 0;
  background: #FFFFFF;
}

.l-breadcrumb_list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 1.2rem;
  font-weight: bold;
  color: var(--color-text);
}
.l-breadcrumb_list li {
  display: flex;
  align-items: center;
  gap: 10px;
}
.l-breadcrumb_list li + li::before {
  content: "\203A" / "";           /* 区切り記号は読み上げない */
  font-weight: normal;
  color: var(--color-border-mid);
}
.l-breadcrumb_list a {
  color: var(--color-text);
  text-decoration: none;
}
.l-breadcrumb_list a:hover {
  color: var(--color-brand-hover);
}
/* 1 階層目: 文字 (トップ) は読み上げ・構造化データ用に残し、見た目はホームアイコンにする */
.l-breadcrumb_list li:first-child a {
  display: inline-flex;
  align-items: center;
  font-size: 0;
  line-height: 0;
  color: var(--color-brand);
}
.l-breadcrumb_list li:first-child a::before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 2 12h3v8h6v-5h2v5h6v-8h3z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 2 12h3v8h6v-5h2v5h6v-8h3z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.l-breadcrumb_list li:first-child a:hover {
  color: var(--color-brand-hover);
}


/* =====================================================
   29. 一覧テンプレ (about / business / careers 等)
   ===================================================== */
.l-pageNav_list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 768px) {
  .l-pageNav_list {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}
@media (min-width: 1032px) {
  .l-pageNav_list { grid-template-columns: repeat(3, 1fr); }
}

.l-pageNav_item {
  display: block;
  padding: 28px 24px;
  background: #FFFFFF;
  border: 2px solid var(--color-border-light);
  border-radius: 20px;
  color: var(--color-text);
  transition: all 0.4s var(--easing-std);
  position: relative;
}
.l-pageNav_item:hover {
  border-color: var(--color-brand);
  color: var(--color-text);
  transform: translateY(-4px);
}

.l-pageNav_item_num {
  font-family: "Inter", sans-serif;
  font-size: 1.2rem;
  font-weight: 400;                 /* font-en-display の 800 を打ち消す */
  color: var(--color-brand-ink);    /* 12px の小さい文字はアクアだと 2.5:1 で AA 未達 */
  margin: 0 0 8px;
}

.l-pageNav_item_title {
  font-size: 1.7rem;
  font-weight: bold;
  margin: 0 0 4px;
}
.l-pageNav_item_titleEn {
  font-size: 1.2rem;
  color: var(--color-text-sub);
  font-family: "Bebas Neue", sans-serif;
  letter-spacing: normal;
}
.l-pageNav_item_text {
  margin: 12px 0 0;                 /* 段落の下余白を残すとカードが下重心になる */
  font-size: 1.3rem;
  color: var(--color-text-sub);
  line-height: 1.7;
  word-break: normal;
}

.l-pageNav_item_arrow {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 32px;
  height: 32px;
  border: 2px solid var(--color-brand);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-brand);
  font-size: 1.4rem;
  transition: all 0.3s var(--easing-std);
}
.l-pageNav_item:hover .l-pageNav_item_arrow {
  background: var(--color-brand);
  color: #FFFFFF;
}


/* =====================================================
   29-1. トップ Primary Nav (CA contentsNav 準拠: 白地カード + 上品な hover)
   設計指針:
     - 白地ベース (CA の精神を踏襲、派手なグラデは使わない)
     - 大型英字を主役に (CA contentsNav の 60px 大見出し相当)
     - 矢印は通常フロー (絶対配置せずテキストとの衝突を物理的に回避)
     - ホバーは「上に色アクセント線が伸びる + カードが浮く + 矢印の余白が広がる」3 段階
     - cubic-bezier は分析書の 4 種を使い分け
   ===================================================== */
.l-topPrimaryNav {
  padding: 64px 0;
  background: var(--color-bg-base);
}
@media (min-width: 768px) {
  .l-topPrimaryNav { padding: 96px 0; }
}


/* =====================================================
   29-1b. トップ Section Preview (CA Sustainability/Services セクション準拠)
     構造: 大型英字見出し + 日本語サブ + 右上に丸い → リンク + 横並びカード
   ===================================================== */
.l-topSectionPreview {
  padding: 64px 0;
  background: var(--color-bg-base);
  border-top: 1px solid var(--color-border-light);
}
@media (min-width: 768px) {
  .l-topSectionPreview { padding: 96px 0; }
}

.l-topSectionPreview_head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 40px;
  gap: 24px;
}
@media (min-width: 768px) {
  .l-topSectionPreview_head { margin-bottom: 56px; }
}
.l-topSectionPreview_titleArea {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.l-topSectionPreview_en {
  font-size: 3.6rem;
  line-height: 1;
  color: var(--color-text);
  letter-spacing: normal;
  margin: 0;
}
@media (min-width: 768px) {
  .l-topSectionPreview_en { font-size: 5.6rem; }
}
.l-topSectionPreview_ja {
  font-size: 1.3rem;
  color: var(--color-brand-hover);
  margin: 0;
  letter-spacing: normal;
  font-weight: bold;
}
@media (min-width: 768px) {
  .l-topSectionPreview_ja { font-size: 1.4rem; }
}
.l-topSectionPreview_more {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-brand);
  transition: transform 0.4s var(--easing-back), color 0.25s var(--easing-std);
  text-decoration: none;
}
.l-topSectionPreview_more:hover {
  transform: translateX(6px);
  color: var(--color-brand-hover);
}

.l-topSectionPreview_grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--color-border-light);
  border-top: 1px solid var(--color-border-light);
  border-bottom: 1px solid var(--color-border-light);
}
@media (min-width: 768px) {
  .l-topSectionPreview_grid-3 { grid-template-columns: repeat(3, 1fr); }
  .l-topSectionPreview_grid-4 { grid-template-columns: repeat(4, 1fr); }
}

.l-topSectionPreview_item {
  background: var(--color-bg-base);
  transition: background 0.4s var(--easing-std);
}
.l-topSectionPreview_item:hover {
  background: var(--color-bg-section);
}
.l-topSectionPreview_item > a {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 32px 28px;
  text-decoration: none;
  color: var(--color-text);
  position: relative;
  min-height: 140px;
}
@media (min-width: 768px) {
  .l-topSectionPreview_item > a { padding: 40px 32px; min-height: 160px; }
}
.l-topSectionPreview_item_en {
  font-size: 1.8rem;
  color: var(--color-text);
  letter-spacing: normal;
  margin: 0;
  font-weight: bold;
}
@media (min-width: 768px) {
  .l-topSectionPreview_item_en { font-size: 2.4rem; }
}
.l-topSectionPreview_item_ja {
  font-size: 1.3rem;
  color: var(--color-text-sub);
  margin: 0;
}
.l-topSectionPreview_item_caption {
  font-size: 1.2rem;
  color: var(--color-text-sub);
  margin: 4px 0 0;
  line-height: 1.6;
}
.l-topSectionPreview_item_arrow {
  position: absolute;
  right: 24px;
  bottom: 28px;
  color: var(--color-brand);
  transition: transform 0.4s var(--easing-back);
}
.l-topSectionPreview_item:hover .l-topSectionPreview_item_arrow {
  transform: translateX(6px);
}

.l-topPrimaryNav_grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 768px) {
  .l-topPrimaryNav_grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}

/* ベースカード (白地) */
.l-topPrimaryNav_card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border: 1px solid var(--color-border-light);
  border-radius: 20px;
  padding: 32px 28px;
  text-decoration: none;
  color: var(--color-text);
  overflow: hidden;
  transition: border-color 0.4s var(--easing-std),
              transform 0.55s var(--easing-back),
              box-shadow 0.55s var(--easing-std);
}
@media (min-width: 768px) {
  .l-topPrimaryNav_card {
    padding: 44px 40px;
    min-height: 280px;
  }
}
.l-topPrimaryNav_card:hover {
  border-color: var(--color-brand);
  transform: translateY(-6px);
  box-shadow: 0 16px 36px rgba(31, 45, 79, 0.08);
}

/* 上部アクセントバー (hover で左→右に scaleX) */
.l-topPrimaryNav_card_accent {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 3px;
  background: var(--color-brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.55s var(--easing-std);
}
.l-topPrimaryNav_card:hover .l-topPrimaryNav_card_accent {
  transform: scaleX(1);
}
.l-topPrimaryNav_card-about    .l-topPrimaryNav_card_accent { background: var(--color-brand-sub); }
.l-topPrimaryNav_card-business .l-topPrimaryNav_card_accent { background: var(--color-brand); }
.l-topPrimaryNav_card-sustainability .l-topPrimaryNav_card_accent { background: #1A6B4A; }
.l-topPrimaryNav_card-careers  .l-topPrimaryNav_card_accent { background: var(--color-brand-alert); }

/* ヘッド (番号 + 英大見出し) */
.l-topPrimaryNav_card_head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 24px;
}
@media (min-width: 768px) {
  .l-topPrimaryNav_card_head { margin-bottom: 36px; }
}
.l-topPrimaryNav_card_num {
  font-size: 1.3rem;
  letter-spacing: normal;
  color: var(--color-text-sub);
  margin: 0;
}
@media (min-width: 768px) {
  .l-topPrimaryNav_card_num { font-size: 1.4rem; }
}
.l-topPrimaryNav_card_en {
  font-size: 3.6rem;
  line-height: 1;
  color: var(--color-brand);
  letter-spacing: normal;
  margin: 0;
  flex: 1;
}
@media (min-width: 768px) {
  .l-topPrimaryNav_card_en { font-size: 5.2rem; }
}
.l-topPrimaryNav_card-about    .l-topPrimaryNav_card_en { color: var(--color-brand-sub); }
.l-topPrimaryNav_card-business .l-topPrimaryNav_card_en { color: var(--color-brand); }
.l-topPrimaryNav_card-sustainability .l-topPrimaryNav_card_en { color: #1A6B4A; }
.l-topPrimaryNav_card-careers  .l-topPrimaryNav_card_en { color: var(--color-brand-alert); }

/* ボディ (タイトル + 説明文) */
.l-topPrimaryNav_card_body {
  flex: 1;
}
.l-topPrimaryNav_card_title {
  font-size: 1.8rem;
  font-weight: bold;
  margin: 0 0 12px;
  line-height: 1.5;
  color: var(--color-text);
}
@media (min-width: 768px) {
  .l-topPrimaryNav_card_title { font-size: 2.2rem; }
}
.l-topPrimaryNav_card_text {
  font-size: 1.3rem;
  line-height: 1.8;
  color: var(--color-text-sub);
  margin: 0;
}
@media (min-width: 768px) {
  .l-topPrimaryNav_card_text { font-size: 1.4rem; }
}

/* READ MORE + 矢印 (通常フロー、矢印重なり問題なし) */
.l-topPrimaryNav_card_more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--color-border-light);
  font-size: 1.2rem;
  letter-spacing: normal;
  color: var(--color-brand);
  transition: gap 0.4s var(--easing-back), color 0.25s var(--easing-std);
}
@media (min-width: 768px) {
  .l-topPrimaryNav_card_more { margin-top: 32px; font-size: 1.3rem; }
}
.l-topPrimaryNav_card_more svg {
  transition: transform 0.4s var(--easing-back);
}
.l-topPrimaryNav_card:hover .l-topPrimaryNav_card_more {
  gap: 16px;
  color: var(--color-brand-hover);
}
.l-topPrimaryNav_card:hover .l-topPrimaryNav_card_more svg {
  transform: translateX(4px);
}
.l-topPrimaryNav_card-about    :is(.l-topPrimaryNav_card_more)  { color: var(--color-brand-sub); }
.l-topPrimaryNav_card-business :is(.l-topPrimaryNav_card_more)  { color: var(--color-brand); }
.l-topPrimaryNav_card-sustainability :is(.l-topPrimaryNav_card_more) { color: #1A6B4A; }
.l-topPrimaryNav_card-careers  :is(.l-topPrimaryNav_card_more)  { color: var(--color-brand-alert); }



/* =====================================================
   29-1c. トップ Contents Nav (CA 4-8 仕様: 白マスク内側収縮 + 背景画像)
     構造: 各カードは背景画像、上に白マスク。hover で
       - マスクが inset 10px で内側収縮し半透明に
       - 角丸 + 写真が見えてくる
       - 文字は白マスク上では黒、画像可視時は白寄りに自動コントラスト
   ===================================================== */
.l-topContentsNav {
  padding: 0;
  background: var(--color-bg-base);
  border-top: 1px solid var(--color-border-light);
}

.l-topContentsNav_grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  /* minmax(0,1fr) で「コンテンツ最小幅で広がる」現象 (Sustainability 等の長い英語ラベル) を抑制 */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--color-border-light);
}
/* SP/PC とも 2 列。5枚構成を 2×2＋全幅1 で見せる */
@media (min-width: 768px) {
  .l-topContentsNav_grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.l-topContentsNav_item {
  position: relative;
  background-color: var(--color-brand-sub);
  background-size: cover;
  background-position: center;
  min-width: 0;                /* aspect-ratio とコンテンツ最小幅の競合による横スクロール抑制 */
  min-height: 130px;           /* SP は固定高さ (旧 aspect-ratio 1/1 だと長英語ラベルでセル幅が広がっていた) */
  overflow: hidden;
}
@media (min-width: 768px) {
  .l-topContentsNav_item { aspect-ratio: 4 / 3; min-height: 0; }
}
@media (min-width: 1280px) {
  .l-topContentsNav_item { aspect-ratio: 16 / 10; }
}
/* 採用パネル: 全幅バナー。SP(2列)でも2マス分を使い、5枚構成で最終行が半端にならないようにする */
.l-topContentsNav_item--wide { grid-column: 1 / -1; }
/* 高さは他パネル (2列 = 半分の幅) と揃える。全幅なので比は他パネルの 2 倍にする */
@media (min-width: 768px) {
  .l-topContentsNav_item--wide { aspect-ratio: 8 / 3; }   /* 他パネル 4 / 3 と同じ高さ */
}
@media (min-width: 1280px) {
  .l-topContentsNav_item--wide { aspect-ratio: 16 / 5; }  /* 他パネル 16 / 10 と同じ高さ */
}


.l-topContentsNav_item > a {
  position: absolute;
  inset: 0;
  display: block;
  text-decoration: none;
  color: var(--color-text);
}

/* スクリム: 背景写真を常時見せつつ、文字の可読性を確保する濃紺グラデ
   (旧: 白ベタマスクを hover で開く仕様。hover の無いモバイルで写真が見えないため廃止) */
.l-topContentsNav_item_mask {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(0, 30, 60, 0.20) 0%,
    rgba(0, 30, 60, 0.45) 55%,
    rgba(0, 30, 60, 0.82) 100%);
  opacity: 1;
  transition: opacity 0.4s var(--easing-std);
  z-index: 1;
}

/* タッチデバイス: JS で .is-touched 付与 (CA 5-86 仕様、_touchHover 模倣)
   PC マウス: @media (hover: hover) で :hover のみ反応 */
.l-topContentsNav_item.is-touched .l-topContentsNav_item_mask,
.l-topContentsNav_item:focus-within .l-topContentsNav_item_mask {
  opacity: 0.72;
}
@media (hover: hover) and (pointer: fine) {
  .l-topContentsNav_item:hover .l-topContentsNav_item_mask {
    opacity: 0.72;
  }
}

/* タップ遅延を除去 + ハイライト無効化 */
.l-topContentsNav_item > a {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* テキスト内側コンテナ */
.l-topContentsNav_item_inner {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 16px;               /* SP は 2 列で 1 セルが狭いため余白を詰める (8 文字ラベルの折返し防止) */
  text-align: center;
  pointer-events: none;
}
@media (min-width: 768px) {
  .l-topContentsNav_item_inner { padding: 40px; }
}

/* 写真の上に白文字。日本語主導 (JA が大、EN は小さなアイブロウ) */
.l-topContentsNav_item_en {
  order: -1;                   /* DOM は EN→JA のまま、表示は EN を上の小ラベルに */
  font-size: 1.1rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.78);
  margin: 0;
  letter-spacing: normal;
  text-transform: uppercase;
  line-height: 1.1;
  transition: color 0.4s var(--easing-std);
  overflow-wrap: break-word;
  word-break: break-word;
}
@media (min-width: 768px) {
  .l-topContentsNav_item_en { font-size: 1.2rem; }
}

.l-topContentsNav_item_ja {
  font-size: clamp(1.4rem, 4.6vw, 1.8rem); /* SP: 2 列セルで 8 文字ラベル (オークション事業) が 1 行に収まるよう画面幅に追従 (375px≈17px, 320px≈15px) */
  font-weight: 700;
  font-family: "Noto Sans JP", "Inter", YuGothic, sans-serif;
  font-feature-settings: "palt";
  color: #FFFFFF;
  margin: 10px 0 0;
  letter-spacing: normal;
  white-space: nowrap;         /* ラベルは途中で折り返さない (セル側の overflow: hidden で万一の超過は隠れる) */
  transition: color 0.4s var(--easing-std);
}
@media (min-width: 768px) {
  .l-topContentsNav_item_ja { font-size: 2.4rem; margin-top: 12px; }
}

.l-topContentsNav_item_arrow {
  position: absolute;
  right: 18px;
  bottom: 18px;
  color: #FFFFFF;
  transition: transform 0.4s var(--easing-back), color 0.4s var(--easing-std);
}
@media (min-width: 768px) {
  .l-topContentsNav_item_arrow { right: 24px; bottom: 24px; }
}
.l-topContentsNav_item.is-touched .l-topContentsNav_item_arrow {
  transform: translateX(6px);
  color: var(--color-brand);
}
@media (hover: hover) and (pointer: fine) {
  .l-topContentsNav_item:hover .l-topContentsNav_item_arrow {
    transform: translateX(6px);
    color: var(--color-brand);
  }
}


/* =====================================================
   29-2. l-primaryNav — 2カラム主要ナビ (CA top_primaryNav 準拠)
   ===================================================== */
.l-primaryNav {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 768px) {
  .l-primaryNav {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}

.l-primaryNav_item {
  position: relative;
  display: block;
  padding: 36px 32px;
  background: #FFFFFF;
  border: 2px solid var(--color-border-light);
  border-radius: 20px;
  text-decoration: none;
  color: var(--color-text);
  transition: all 0.4s var(--easing-std);
  overflow: hidden;
  min-height: 180px;
}
@media (min-width: 768px) {
  .l-primaryNav_item {
    padding: 48px 40px;
    min-height: 220px;
  }
}
.l-primaryNav_item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(43, 179, 194, 0.06), rgba(31, 45, 79, 0.04));
  opacity: 0;
  transition: opacity 0.4s var(--easing-std);
  z-index: 0;
}
.l-primaryNav_item:hover {
  border-color: var(--color-brand);
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(31, 45, 79, 0.1);
}
.l-primaryNav_item:hover::before { opacity: 1; }

.l-primaryNav_num {
  position: absolute;
  top: 24px; right: 28px;
  font-size: 2.2rem;
  color: var(--color-brand);
  opacity: 0.35;
  letter-spacing: normal;
  z-index: 1;
}
@media (min-width: 768px) {
  .l-primaryNav_num { font-size: 2.8rem; }
}

.l-primaryNav_en {
  position: relative;
  font-size: 2rem;
  color: var(--color-brand);
  letter-spacing: normal;
  margin: 0 0 8px;
  z-index: 1;
}
@media (min-width: 768px) {
  .l-primaryNav_en { font-size: 2.6rem; }
}

.l-primaryNav_title {
  position: relative;
  font-size: 1.8rem;
  font-weight: bold;
  margin: 0 0 12px;
  line-height: 1.4;
  z-index: 1;
}
@media (min-width: 768px) {
  .l-primaryNav_title { font-size: 2.2rem; }
}

.l-primaryNav_text {
  position: relative;
  font-size: 1.3rem;
  line-height: 1.7;
  color: var(--color-text-sub);
  margin: 0;
  z-index: 1;
}
@media (min-width: 768px) {
  .l-primaryNav_text { font-size: 1.4rem; }
}

.l-primaryNav_arrow {
  position: absolute;
  bottom: 24px; right: 28px;
  font-size: 2rem;
  color: var(--color-brand);
  transition: transform 0.3s var(--easing-std);
  z-index: 1;
}
@media (min-width: 768px) {
  .l-primaryNav_arrow { font-size: 2.4rem; bottom: 32px; right: 36px; }
}
.l-primaryNav_item:hover .l-primaryNav_arrow {
  transform: translateX(6px);
}

/* リンクではない情報カード (cursor 通常) */
.l-primaryNav_item.is-static {
  cursor: default;
}
.l-primaryNav_item.is-static:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--color-border-light);
}
.l-primaryNav_item.is-static::before { display: none; }


/* =====================================================
   29-3. IR ニュース 一覧
   ===================================================== */
.l-irNews {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--color-border-light);
}
.l-irNews_item {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  padding: 20px 0;
  border-bottom: 1px solid var(--color-border-light);
}
@media (min-width: 768px) {
  .l-irNews_item {
    grid-template-columns: 120px 100px 1fr;
    gap: 24px;
    align-items: baseline;
    padding: 24px 0;
  }
}
.l-irNews_date {
  font-family: "Inter", YuGothic, sans-serif;
  font-size: 1.4rem;
  color: var(--color-text-sub);
  margin: 0;
}
.l-irNews_badge {
  display: inline-block;
  width: fit-content;
  font-size: 1rem;
  font-weight: bold;
  letter-spacing: normal;
  padding: 4px 10px;
  background: var(--color-bg-section);
  color: var(--color-brand-hover);
  border-radius: 4px;
  margin: 0;
}
.l-irNews_title {
  font-size: 1.4rem;
  line-height: 1.6;
  margin: 0;
  color: var(--color-text);
}
@media (min-width: 768px) {
  .l-irNews_title { font-size: 1.5rem; }
}


/* =====================================================
   29-4. IR ディスクレーマー
   ===================================================== */
.l-irDisclaimer {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px;
  background: var(--color-bg-section);
  border-radius: 12px;
  font-size: 1.2rem;
  line-height: 1.7;
  color: var(--color-text-sub);
}
.l-irDisclaimer p {
  margin: 0 0 8px;
}
.l-irDisclaimer p:last-child { margin-bottom: 0; }


/* =====================================================
   29-5. 店舗詳細 16:10 大型ヒーロー画像エリア
   ===================================================== */
.l-storeVisual {
  padding: 32px 0 0;
  background: var(--color-bg-base);
}
@media (min-width: 768px) {
  .l-storeVisual { padding: 48px 0 0; }
}

.l-storeVisual_wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, var(--color-brand-sub) 0%, var(--color-brand) 100%);
  border-radius: 16px;
  overflow: hidden;
}
.l-storeVisual_wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.l-storeVisual_label {
  position: absolute;
  left: 24px; bottom: 24px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.4rem;
  letter-spacing: normal;
  padding: 8px 16px;
  background: rgba(31, 45, 79, 0.4);
  border-radius: 8px;
  backdrop-filter: blur(4px);
  z-index: 1;
}
@media (min-width: 768px) {
  .l-storeVisual_label {
    left: 40px; bottom: 40px;
    font-size: 1.6rem;
    padding: 10px 20px;
  }
}


/* =====================================================
   29-6. Cookie 同意バナー (自前軽量実装)
   ===================================================== */
.l-cookieConsent {
  position: fixed;
  left: 16px; right: 16px; bottom: 16px;
  z-index: 9000;
  background: var(--color-brand-sub);
  color: #FFFFFF;
  border-radius: 16px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.25);
  padding: 20px;
  animation: cookieSlideUp 0.4s var(--easing-std);
}
@media (min-width: 768px) {
  .l-cookieConsent {
    left: 32px; right: 32px; bottom: 32px;
    max-width: 720px;
    margin: 0 auto;
    padding: 24px 28px;
  }
}
@keyframes cookieSlideUp {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

.l-cookieConsent_inner {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media (min-width: 768px) {
  .l-cookieConsent_inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
  }
}
.l-cookieConsent_text {
  font-size: 1.3rem;
  line-height: 1.7;
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
}
.l-cookieConsent_text a {
  color: var(--color-brand);
  text-decoration: underline;
}
.l-cookieConsent_actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex-shrink: 0;
}
.l-cookieConsent_actions .m-btn-ghost {
  background: transparent;
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.4);
}
.l-cookieConsent_actions .m-btn-ghost:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: #FFFFFF;
}


/* =====================================================
   30. 沿革タイムライン
   ===================================================== */
.l-history {
  border-left: 3px solid var(--color-brand);
  padding-left: 24px;
  margin-left: 8px;
}
@media (min-width: 768px) {
  .l-history { padding-left: 40px; }
}

.l-history_phase {
  margin-bottom: 48px;
  position: relative;
}
.l-history_phase::before {
  content: "";
  position: absolute;
  left: -34px;
  top: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-brand);
  border: 4px solid var(--color-bg-base);
  box-shadow: 0 0 0 2px var(--color-brand);
}
@media (min-width: 768px) {
  .l-history_phase::before { left: -50px; }
}

.l-history_phase_label {
  font-size: 1.1rem;
  color: var(--color-brand);
  letter-spacing: normal;
  margin: 0 0 4px;
  font-family: "Bebas Neue", sans-serif;
}

.l-history_phase_title {
  font-size: 2.4rem;
  margin: 0 0 16px;
  font-weight: bold;
}
@media (min-width: 768px) {
  .l-history_phase_title { font-size: 3.2rem; }
}

.l-history_item {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px dashed var(--color-border-light);
}
@media (min-width: 768px) {
  .l-history_item { grid-template-columns: 120px 1fr; gap: 24px; }
}

.l-history_item_date {
  font-family: "Inter", sans-serif;
  font-size: 1.4rem;
  color: var(--color-brand-hover);
  font-weight: bold;
}
.l-history_item_text {
  font-size: 1.3rem;
  line-height: 1.7;
  margin: 0;
}
@media (min-width: 768px) {
  .l-history_item_text { font-size: 1.4rem; }
}
.l-history_item-key .l-history_item_text {
  font-weight: bold;
  color: var(--color-text);
}


/* =====================================================
   31. 会社概要 (dl テーブル)
   ===================================================== */
.l-company {
  border-top: 2px solid var(--color-text);
}
.l-company_row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  padding: 20px 0;
  border-bottom: 1px solid var(--color-border-light);
}
@media (min-width: 768px) {
  .l-company_row {
    grid-template-columns: 200px 1fr;
    gap: 24px;
    padding: 24px 0;
  }
}

.l-company_row dt {
  font-size: 1.3rem;
  color: var(--color-text-sub);
  font-weight: bold;
}
.l-company_row dd {
  font-size: 1.4rem;
  margin: 0;
  line-height: 1.7;
}
@media (min-width: 768px) {
  .l-company_row dd { font-size: 1.5rem; }
}
.l-company_row dd span {
  font-size: 1.2rem;
  color: var(--color-text-sub);
  margin-left: 8px;
}


/* =====================================================
   32. メッセージページ
   ===================================================== */
.l-messagePage {
  max-width: 992px;          /* CA 厳密準拠: l-pageHero と同じ 992px、中央揃え */
  margin: 0 auto;
}
.l-messagePage p {
  font-size: 1.5rem;
  line-height: 2;
  margin: 0 0 24px;
}
.l-messagePage_hero,
.l-newsDetail_hero {
  margin: 0 0 48px;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}
.l-messagePage_hero img,
.l-newsDetail_hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.l-messagePage_heading {
  position: relative;
  font-size: 2.4rem;
  font-weight: bold;
  line-height: 1.5;
  margin: 0 0 32px;
  padding-bottom: 16px;
}
.l-messagePage_heading::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0;
  width: 40px; height: 4px;
  border-radius: 4px;
  background: var(--color-brand);
}
@media (min-width: 768px) {
  .l-messagePage_heading {
    font-size: 3.2rem;
    padding-bottom: 20px;
  }
  .l-messagePage_heading::after { width: 50px; }
}
.l-messagePage_signature {
  text-align: right;
  margin-top: 48px;
  font-size: 1.4rem;
}
.l-messagePage_signature_name {
  font-size: 2rem;
  font-weight: bold;
  display: block;
}


/* =====================================================
   33. 役員紹介
   ===================================================== */
.l-executives {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 768px) {
  .l-executives { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1032px) {
  .l-executives { grid-template-columns: repeat(3, 1fr); }
}

.l-executives_item {
  background: #FFFFFF;
  border: 2px solid var(--color-border-light);
  border-radius: 20px;
  padding: 28px 24px;
  transition: border-color 0.3s var(--easing-std);
}
.l-executives_item:hover {
  border-color: var(--color-brand);
}

.l-executives_item_photo {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-brand-sub), var(--color-brand));
  margin-bottom: 20px;
  max-width: 160px;
  overflow: hidden;
}
.l-executives_item_photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}

.l-executives_item_role {
  font-size: 1.1rem;
  color: var(--color-brand);
  margin: 0 0 4px;
  letter-spacing: normal;
}
.l-executives_item_name {
  font-size: 1.8rem;
  font-weight: bold;
  margin: 0 0 12px;
}
.l-executives_item_text {
  font-size: 1.3rem;
  line-height: 1.7;
  color: var(--color-text-sub);
}


/* =====================================================
   34. お問い合わせフォーム雛形
   ===================================================== */
.l-form {
  max-width: 720px;
  margin: 0 auto;
}
.l-form_row {
  margin-bottom: 24px;
}
.l-form_label {
  display: block;
  font-size: 1.3rem;
  font-weight: bold;
  margin-bottom: 8px;
}
.l-form_label .l-form_required {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  font-size: 1rem;
  background: var(--color-brand-alert);
  color: #FFFFFF;
  border-radius: 4px;
}

.l-form_input,
.l-form_textarea,
.l-form_select {
  width: 100%;
  padding: 12px 16px;
  font-size: 1.4rem;
  border: 2px solid var(--color-border-light);
  border-radius: 12px;
  background: #FFFFFF;
  font-family: inherit;
  transition: border-color 0.3s var(--easing-std);
}
.l-form_input:focus,
.l-form_textarea:focus,
.l-form_select:focus {
  outline: none;
  border-color: var(--color-brand);
}
.l-form_textarea {
  min-height: 160px;
  resize: vertical;
}


/* =====================================================
   印刷
   ===================================================== */
@media print {
  .l-header, .l-footer, .l-drawer, .l-overlay { display: none; }
  body { color: #000; background: #FFF; }
}


/* =====================================================
   30-0. 写真付きメニューカード (m-card-photo)
   カテゴリ配下の子ページへのナビカード。
   構造: 16:10 写真上 + ラベル/見出し/矢印テキストの白カード下
   ===================================================== */
.m-cardPhoto_list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (min-width: 640px) {
  .m-cardPhoto_list { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}
@media (min-width: 1032px) {
  .m-cardPhoto_list { grid-template-columns: repeat(3, 1fr); gap: 28px; }
}
/* 2 列固定モディファイア */
.m-cardPhoto_list-2col {
  grid-template-columns: 1fr !important;
}
@media (min-width: 640px) {
  .m-cardPhoto_list-2col { grid-template-columns: repeat(2, 1fr) !important; }
}
/* 4 列モディファイア (sub ナビ向け) */
.m-cardPhoto_list-4col {
  grid-template-columns: 1fr !important;
}
@media (min-width: 640px) {
  .m-cardPhoto_list-4col { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (min-width: 1032px) {
  .m-cardPhoto_list-4col { grid-template-columns: repeat(4, 1fr) !important; }
}

.m-cardPhoto {
  position: relative;
  background: #FFFFFF; /* トップの .m-card と同じ白 (ページ背景と同化させない) */
  border: 1px solid var(--color-border-light);
  border-radius: 16px;
  overflow: hidden;
  transition: transform 0.4s var(--easing-back), box-shadow 0.4s var(--easing-std);
}
.m-cardPhoto:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(0, 30, 60, 0.08);
}
.m-cardPhoto > a {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: var(--color-text);
}
.m-cardPhoto_visual {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  background-color: #EFEFED;
  overflow: hidden;
}
.m-cardPhoto_visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--easing-std);
}
.m-cardPhoto:hover .m-cardPhoto_visual img {
  transform: scale(1.06);
}
.m-cardPhoto_badge {
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-block;
  background: var(--color-brand-ink);
  color: #fff;
  font-size: 1.1rem;
  font-weight: bold;
  padding: 4px 12px;
  border-radius: 999px;
  letter-spacing: normal;
  z-index: 2;
}
.m-cardPhoto_badge-navy { background: var(--color-brand-sub); }
.m-cardPhoto_badge-orange { background: #BF4A24; }
.m-cardPhoto_body {
  display: flex;                    /* 「詳細を見る」を全カードで下端にそろえる (m-cardPhoto_more の margin-top:auto を効かせる) */
  flex-direction: column;
  flex: 1 1 auto;
  padding: 20px 22px 22px;
}
@media (min-width: 768px) {
  .m-cardPhoto_body { padding: 24px 26px 26px; }
}
.m-cardPhoto_label {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-brand-ink);
  letter-spacing: normal;
  text-transform: uppercase;
  margin: 0 0 8px;
}
.m-cardPhoto_title {
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1.5;
  margin: 0 0 6px;
}
@media (min-width: 768px) {
  .m-cardPhoto_title { font-size: 1.8rem; }
}
.m-cardPhoto_text {
  font-size: 1.3rem;
  line-height: 1.6;
  color: var(--color-text-sub);
  margin: 0 0 16px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;      /* カード高さを揃える (全文は詳細ページで) */
  overflow: hidden;
}
/* 役員紹介の経歴文など、全文を見せるカードは行数制限を外す */
.m-cardPhoto_text-full {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}
.m-cardPhoto_more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 1.3rem;
  font-weight: bold;
  color: var(--color-brand-ink);
  margin-top: auto;
  transition: gap 0.3s var(--easing-back), color 0.25s var(--easing-std);
}
.m-cardPhoto_more::before {
  content: "\FF1E" / "";           /* 「大なり」と読み上げさせない */
  font-weight: bold;
}
.m-cardPhoto:hover .m-cardPhoto_more {
  gap: 12px;
  color: var(--color-brand-hover);
}

/* =====================================================
   30-1. ビジネスリスト (m-businessList)
   各ビジネス紹介の写真+説明 横並びレイアウト
   (CA「主な IP コンテンツ事業」スタイル)
   ===================================================== */
.m-businessList {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
@media (min-width: 768px) {
  .m-businessList { gap: 36px; }
}

.m-businessList_item {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--color-border-light);
}
@media (min-width: 768px) {
  .m-businessList_item {
    grid-template-columns: 240px 1fr;
    gap: 32px;
    padding: 28px 0;
    align-items: start;
  }
}
@media (min-width: 1032px) {
  .m-businessList_item {
    grid-template-columns: 320px 1fr;
    gap: 44px;
  }
}
.m-businessList_item:last-child {
  border-bottom: none;
}
.m-businessList_visual {
  width: 100%;
  aspect-ratio: 4 / 3;
  background-color: #EFEFED;
  border-radius: 12px;
  overflow: hidden;
}
.m-businessList_visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--easing-std);
}
.m-businessList_item:hover .m-businessList_visual img {
  transform: scale(1.03);
}
.m-businessList_body {
  display: flex;
  flex-direction: column;
}
.m-businessList_title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.9rem;
  font-weight: bold;
  margin: 0 0 12px;
  color: var(--color-text);
}
@media (min-width: 768px) {
  .m-businessList_title { font-size: 2.2rem; }
}
.m-businessList_text {
  font-size: 1.4rem;
  line-height: 1.85;
  color: var(--color-text);
  margin: 0 0 16px;
  flex-grow: 1;
}
.m-businessList_link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 1.3rem;
  font-weight: bold;
  color: var(--color-brand-ink);
  text-decoration: none;
  transition: gap 0.3s var(--easing-back), color 0.25s var(--easing-std);
  align-self: flex-start;
}
.m-businessList_link::before {
  content: "\FF1E" / "";
  font-weight: bold;
}
.m-businessList_link:hover {
  gap: 12px;
  color: var(--color-brand-hover);
}

/* =====================================================
   30-2. サブページ大型ビジュアル (l-pageHero)
   サブページ冒頭の 16:10 フルワイド画像
   ===================================================== */
.l-pageHero {
  position: relative;
  width: 100%;
  max-width: 992px;          /* CA 厳密準拠: コンテナと同じ 992px */
  margin: 0 auto 40px;
  aspect-ratio: 16 / 10;
  background-color: #EFEFED;
  border-radius: 16px;
  overflow: hidden;
}
@media (min-width: 1032px) {
  .l-pageHero { aspect-ratio: 16 / 8; margin-bottom: 56px; }
}
.l-pageHero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 職種ページのトップに動画を置くとき（l-pageHero の枠を使い、比率だけ動画に合わせる）。
   サムネイルに文字が入っているので 16:9 のまま切り取らずに見せる */
.l-pageHero-video {
  aspect-ratio: 16 / 9;
  background-color: #0B2E52;
}
@media (min-width: 1032px) {
  .l-pageHero-video { aspect-ratio: 16 / 9; }
}
.l-pageHero-video .l-video_play { border-radius: inherit; }

.l-pageHero_label {
  position: absolute;
  bottom: 20px;
  left: 20px;
  background: rgba(255, 255, 255, 0.96);
  padding: 12px 24px;
  border-radius: 8px;
}
@media (min-width: 768px) {
  .l-pageHero_label { bottom: 32px; left: 40px; padding: 16px 32px; }
}
.l-pageHero_label_en {
  font-size: 1.8rem;
  margin: 0;
  letter-spacing: normal;
}
@media (min-width: 768px) {
  .l-pageHero_label_en { font-size: 2.6rem; }
}
.l-pageHero_label_ja {
  font-size: 1.2rem;
  margin: 4px 0 0;
  color: var(--color-text-sub);
}

/* =====================================================
   30-3. サブページ用 リード (l-pageLead)
   ===================================================== */
.l-pageLead {
  max-width: 992px;          /* CA 厳密準拠: コンテナ + l-pageHero と同じ 992px */
  margin: 0 auto 56px;
  text-align: left;
}
.l-pageLead p {
  font-size: 1.5rem;
  line-height: 2;
  color: var(--color-text);
  margin: 0 0 16px;
}
@media (min-width: 768px) {
  .l-pageLead p { font-size: 1.6rem; }
}

/* =====================================================
   テキストラップ統一ルール (CA 慣行: 改行の不自然さを抑制)
   - balance: 短いテキスト (見出し・リード・1-3行) の全行を均等化
   - pretty は本文に使わない: Safari (WebKit) は段落全体で行長を揃えるため、日本語の本文では
     全行が数文字ずつ短くなり右端に余白が空く (2026-08-31 iPhone で指摘。試用期間の段落・キャリアパスの注記)
   ===================================================== */
.l-categoryHero_title,
.l-categoryHero_title_ja,
.l-categoryHero_lead,
.m-categorySection_heading_ja,
.m-categorySection_lead,
.l-historyTimeline_title,
.l-messagePage_heading {
  text-wrap: balance;
}

/* =====================================================
   30-4. 仕様表 (l-specTable)
   会社概要・店舗情報など key/value の表組み
   ===================================================== */
.l-specTable {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
}
.l-specTable th,
.l-specTable td {
  padding: 18px 8px;
  text-align: left;
  border-bottom: 1px solid var(--color-border-light);
  font-size: 1.4rem;
  line-height: 1.7;
  vertical-align: top;
}
.l-specTable th {
  width: 30%;
  font-weight: bold;
  color: var(--color-text-sub);
}
@media (max-width: 639px) {
  .l-specTable th, .l-specTable td { display: block; width: 100%; border-bottom: none; padding: 6px 0; }
  .l-specTable tr { display: block; padding: 14px 0; border-bottom: 1px solid var(--color-border-light); }
  .l-specTable th { padding-top: 14px; }
}

/* 矢印置換: 既存の → を ＞ に */
.l-pageNav_item_arrow::before,
.l-careersHero_nav_arrow::before,
.l-primaryNav_arrow::before {
  content: "";  /* 元の → を消す */
}
.l-pageNav_item_arrow,
.l-careersHero_nav_arrow,
.l-primaryNav_arrow {
  font-size: 1.2em;
}


/* =====================================================
   33. 沿革タイムライン (3 フェーズ区切り)
   ===================================================== */
.l-historyPhase {
  margin-bottom: 64px;
}
@media (min-width: 768px) {
  .l-historyPhase { margin-bottom: 96px; }
}
.l-historyPhase:last-child { margin-bottom: 0; }

.l-historyPhase_label {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding-bottom: 16px;
  margin-bottom: 32px;
  border-bottom: 2px solid var(--color-brand-sub);
}
@media (min-width: 768px) {
  .l-historyPhase_label { gap: 24px; margin-bottom: 48px; }
}
.l-historyPhase_label_en {
  font-size: 2.4rem;
  letter-spacing: normal;
  color: var(--color-brand);
}
@media (min-width: 768px) {
  .l-historyPhase_label_en { font-size: 3.6rem; }
}
.l-historyPhase_label_ja {
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--color-text);
}
@media (min-width: 768px) {
  .l-historyPhase_label_ja { font-size: 1.8rem; }
}
.l-historyPhase_label_period {
  margin-left: auto;
  font-size: 1.3rem;
  color: var(--color-text-sub);
  letter-spacing: normal;
}
@media (min-width: 768px) {
  .l-historyPhase_label_period { font-size: 1.5rem; }
}

/* 縦タイムライン (年 + 出来事) */
.l-historyTimeline {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
}
.l-historyTimeline::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 100px;
  width: 1px;
  background: var(--color-border-light);
}
@media (min-width: 768px) {
  .l-historyTimeline::before { left: 160px; }
}

.l-historyTimeline_item {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 24px;
  padding-bottom: 28px;
  position: relative;
}
@media (min-width: 768px) {
  .l-historyTimeline_item {
    grid-template-columns: 160px 1fr;
    gap: 48px;
    padding-bottom: 36px;
  }
}
.l-historyTimeline_item:last-child { padding-bottom: 0; }

.l-historyTimeline_date {
  font-size: 1.4rem;
  font-weight: bold;
  letter-spacing: normal;
  color: var(--color-brand);
  padding-top: 2px;
  text-align: right;
  padding-right: 16px;
}
@media (min-width: 768px) {
  .l-historyTimeline_date { font-size: 1.6rem; padding-right: 24px; }
}

.l-historyTimeline_dot {
  position: absolute;
  left: 96px;
  top: 8px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-brand);
  border: 2px solid var(--color-bg-base);
}
@media (min-width: 768px) {
  .l-historyTimeline_dot { left: 156px; }
}

.l-historyTimeline_content { padding-left: 24px; }
.l-historyTimeline_title {
  font-size: 1.6rem;
  font-weight: bold;
  margin: 0 0 6px;
  line-height: 1.5;
}
@media (min-width: 768px) {
  .l-historyTimeline_title { font-size: 1.8rem; }
}
.l-historyTimeline_text {
  font-size: 1.3rem;
  line-height: 1.85;
  color: var(--color-text-sub);
  margin: 0;
}
@media (min-width: 768px) {
  .l-historyTimeline_text { font-size: 1.4rem; }
}

/* =====================================================
   News 読み込み中スケルトン (news.js が取得完了後に実カードへ置換)
   ===================================================== */
.m-newsSkeleton {
  border-radius: 16px;
  background: #FFFFFF;
  border: 1px solid var(--color-border-light);
  overflow: hidden;
  list-style: none;
}
.m-newsSkeleton_visual {
  aspect-ratio: 16 / 10;
}
.m-newsSkeleton_line {
  height: 12px;
  border-radius: 6px;
  margin: 14px 20px;
}
.m-newsSkeleton_line:last-child {
  width: 60%;
  margin-bottom: 20px;
}
.m-newsSkeleton_visual,
.m-newsSkeleton_line {
  background: linear-gradient(90deg, #EDEEF0 25%, #F6F7F8 50%, #EDEEF0 75%);
  background-size: 200% 100%;
  animation: newsSkeletonShimmer 1.4s ease-in-out infinite;
}
@keyframes newsSkeletonShimmer {
  to { background-position: -200% 0; }
}

/* =====================================================
   組織図 (about/company)
   画像 (org-chart.jpg) の運用をやめ、HTML/CSS で管理する
   - 全幅で同じ構成: 監査役を取締役会の右に置き、5 部門を横並び（横の幹線 + 各部門への縦線）
   - 1032px 未満: 縦 1 列に組み替えず、図を PC と同じ幅 (--org-min-width) で組んだまま
     main.js が transform: scale() で画面幅に合わせて縮小し、横スクロールなしで全体を見せる
     (JS が動かないときは .l-orgChart_fit の横スクロールに逃がす)
   ===================================================== */
.l-orgChart {
  --org-line: #B9C0CC;
  --org-gap: 24px;
  --org-stub: 40px;
  --org-min-width: 920px;        /* 1032px 未満で保つ図の幅。監査役 (中央 + 240px + 220px) が収まる最小値 */
  margin: 0;
  padding: 8px 0 0;
  color: var(--color-brand-sub);
}
.l-orgChart_fit { display: flex; align-items: flex-start; }   /* stretch させない: 高さを外枠に設定しても中身の実寸 (offsetHeight) を保つ */
.l-orgChart_inner { flex: 1 0 auto; width: 100%; transform-origin: 0 0; }
.l-orgChart_top {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.l-orgChart_node {
  box-sizing: border-box;
  width: min(100%, 320px);
  padding: 18px 16px;
  text-align: center;
  font-weight: 700;
  font-size: 1.8rem;
  line-height: 1.4;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-light);
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0, 30, 60, 0.06);
}
.l-orgChart_node-navy {
  background: var(--color-brand-sub);
  border-color: var(--color-brand-sub);
  color: #FFFFFF;
}
/* 縦の接続線 (株主総会 → 取締役会 → CEO → 幹線) */
.l-orgChart_v {
  display: block;
  width: 2px;
  height: var(--org-stub);
  background: var(--org-line);
}
/* 取締役会の行: 監査役を右に置き、破線で接続 */
.l-orgChart_board {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
}
.l-orgChart_node-aside {
  position: absolute;
  top: 50%;
  left: calc(50% + 160px + 80px);
  transform: translateY(-50%);
  width: 220px;
  padding: 12px 16px;
}
.l-orgChart_node-aside::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  width: 80px;
  border-top: 2px dashed var(--org-line);
}
.l-orgChart_node_title { display: block; }
.l-orgChart_node_sub {
  display: block;
  margin-top: 4px;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--color-text-sub);
}
/* 部門 (5 列・等幅) */
.l-orgChart_depts {
  position: relative;
  list-style: none;
  margin: var(--org-stub) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--org-gap);
}
/* 横の幹線: 1 列目の中央から 5 列目の中央まで (等幅なので calc で正確に出る) */
.l-orgChart_depts::before {
  content: "";
  position: absolute;
  top: calc(-1 * var(--org-stub));
  left: calc((100% - 4 * var(--org-gap)) / 10);
  right: calc((100% - 4 * var(--org-gap)) / 10);
  height: 2px;
  background: var(--org-line);
}
.l-orgChart_dept {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  padding: 20px 14px 18px;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-light);
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(0, 30, 60, 0.06);
}
/* 幹線から各部門への縦線 */
.l-orgChart_dept::before {
  content: "";
  position: absolute;
  top: calc(-1 * var(--org-stub));
  left: calc(50% - 1px);
  width: 2px;
  height: var(--org-stub);
  background: var(--org-line);
}
.l-orgChart_dept_title {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 5.8rem;            /* 2 行 (1.55rem × 1.4 × 2) + 下 padding 1.4rem を確保し、全カードの区切り線の高さを揃える */
  margin: 0 0 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--color-border-light);
  text-align: center;
  font-weight: 700;
  font-size: 1.55rem;
  line-height: 1.4;
}
.l-orgChart_units {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.l-orgChart_units li {
  padding: 10px 8px;
  border-radius: 999px;
  background: #EEF1F6;
  text-align: center;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.4;
}
@media (max-width: 1031px) {
  /* JS なしの保険: 図の幅を保ったまま横スクロール */
  .l-orgChart_fit {
    margin: 0 -20px;             /* m-container の余白ぶん外へ出す */
    padding: 0 20px 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .l-orgChart_inner { min-width: var(--org-min-width); }
  /* JS あり (.is-fit): 図を縮小して全体を収める。高さは main.js が縮小後の実寸に合わせる */
  .l-orgChart_fit.is-fit {
    margin: 0 -12px;             /* 画面端から 8px 残す */
    padding: 0;
    overflow: hidden;
  }
}
@media (min-width: 768px) and (max-width: 1031px) {
  .l-orgChart_fit { margin: 0 -30px; padding: 0 30px 8px; }
  .l-orgChart_fit.is-fit { margin: 0; }
}

/* =====================================================
   31. 可読性の基盤 (2026-08-26)
   基準: 本文 16px 以上 / 段落の行長は全角 42 字まで / 最小文字 14px /
        ヒーロー帯は最初の 1 画面に本文が入る高さ / SP の写真カードは横並び
   既存ブロックは触らず、同じセレクタをここで上書きする
   ===================================================== */

/* 本文サイズ: SP 15px / PC 16px */
body { font-size: 1.5rem; }
@media (min-width: 768px) {
  body { font-size: 1.6rem; }
}

/* 段落の行長: 992px いっぱいに流さず、全角 42 字で折り返す */
.l-messagePage p,
.l-commitment_text,
.m-categorySection_lead,
.l-categoryHero_lead {
  max-width: 42em;
}
.l-messagePage p {
  font-size: 1.6rem;
  line-height: 1.95;
}

/* 中央揃えの節見出し (m-categorySection_heading) の直後に置く概要段落は、42em に縮めた段落を
   992px の左端に寄せず、見出しと同じ中央に置く（/stores/ のコンセプトで見出しと本文がずれて見えた 2026-09-01）。
   見出しの無い法務文書 (cookie / privacy) やお問い合わせは箇条書きも並ぶので従来どおり左端のまま */
.m-categorySection_heading + .l-messagePage > p,
.m-categorySection_heading + .l-messagePage > .l-messagePage_heading { margin-left: auto; margin-right: auto; }
.m-categorySection_heading + .l-messagePage > .l-messagePage_heading { max-width: 67.2rem; } /* 段落の 42em (1.6rem × 42) と同じ幅 */

/* 最小文字サイズ 14px (カード説明・数字パネルの補足・仕様表) */
.m-card_text,
.m-cardPhoto_text,
.m-cardPhoto_more,
.l-pageNav_item_text,
.l-cookieConsent_text {
  font-size: 1.4rem;
}
.m-cardPhoto_label,
.m-cardPhoto_badge,
.l-pageNav_item_num {
  font-size: 1.2rem;           /* 大文字・字間ありの小見出しは 12px を下限にする */
}
.l-specTable th,
.l-specTable td {
  font-size: 1.5rem;
}

/* ヒーロー帯: タイトルと 1〜2 行の説明だけの帯を詰め、最初の 1 画面に本文を入れる */
.l-categoryHero {
  padding: 116px 0 44px;
}
@media (min-width: 768px) {
  .l-categoryHero { padding: 148px 0 64px; }
}
@media (min-width: 1032px) {
  .l-categoryHero { padding: 160px 0 72px; }
}
.l-pageBody {
  padding: 48px 0;
}
@media (min-width: 768px) {
  .l-pageBody { padding: 64px 0; }
}
@media (min-width: 1032px) {
  .l-pageBody { padding: 88px 0; }
}

/* SP: リンク付きの写真カードは「写真小 + 文章」の横並びにし、縦の長さを抑える。
   リンクのないカード（役員紹介）は横並びにしないので、写真は横長のまま縦積みにする。
   ※ 横並びの各ルールは必ず `> a` を挟むこと。visual だけに 36% が当たると写真が小さな左寄せになる */
@media (max-width: 767px) {
  .m-cardPhoto_list:not(.m-cardPhoto_list-4col) .m-cardPhoto > a {
    flex-direction: row;
    align-items: stretch;
  }
  .m-cardPhoto_list:not(.m-cardPhoto_list-4col) .m-cardPhoto > a > .m-cardPhoto_visual {
    flex: 0 0 36%;
    width: 36%;
    aspect-ratio: auto;
    min-height: 128px;
  }
  .m-cardPhoto_list:not(.m-cardPhoto_list-4col) .m-cardPhoto > a > .m-cardPhoto_body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    padding: 14px 16px 14px 14px;
  }
  .m-cardPhoto_list:not(.m-cardPhoto_list-4col) .m-cardPhoto > a .m-cardPhoto_text {
    margin-bottom: 10px;
    -webkit-line-clamp: 4;     /* 横並びで 1 行が短くなる分、4 行まで見せる */
  }
}

/* SP: 横並びの縦長切り抜きでは見せ場が入らない写真（PA のサイト画面など）は、写真を少し拡大して位置を決める。
   値はカード側 (.m-cardPhoto_visual) の style の変数で指定: --zoom（倍率。既定 1.3）・--focus-x（横位置。既定 50%）・
   --focus-top（上端のずらし。枠の高さに対する %。既定 0）。PC は 16:10 の枠に写真がそのまま入るので何もしない */
@media (max-width: 767px) {
  .m-cardPhoto_visual-zoom img {
    position: relative;
    top: var(--focus-top, 0);
    height: calc(100% * var(--zoom, 1.3));
    object-position: var(--focus-x, 50%) 50%;
  }
}

/* =====================================================
   32. 採用ページの部品 (2026-08-26 / UI 見直し 2026-08-27)
   方針: カードは「押せるもの」だけ。押せない情報は罫線のリストか表で組む。
        図はコードで描く（組織図と同じ方針）。装飾はサイト共通の語彙
        （角丸 20px の白カード・小さな英数字番号・「＞」のリンク記号）だけを使う
   部品: 職種一覧 l-jobList（行）/ 特集 l-jobFeature / 罫線リスト l-defList /
         手順 l-flow（箱なし）/ 評価の流れ l-cycle（循環図）/ 1 日の流れ l-dayFlow / キャリアパス l-careerPath /
         よくある質問 l-faq / 応募 l-cta_banner-apply / SP 固定バー l-applyBar
   色: 小さい文字のアクアは --color-brand-ink（AA 4.5:1）、オレンジの文字は #9A3A18
   CSS の content には非 ASCII を直書きしない（ユニコードエスケープにする）
   ===================================================== */

/* ---- 共通: 補足文・見出し・区切り ---- */
.l-note,
.l-flow_footnote,
.l-values_note,
.l-jobList_reg_text,
.l-flow_caption {
  margin: 16px 0 0;
  font-size: 1.4rem;
  line-height: 1.8;
  color: var(--color-text-sub);
}
.l-note + .l-note { margin-top: 6px; }
.l-subHeading { margin: 36px 0 12px; font-size: 1.7rem; font-weight: 700; }
.l-subHeading:first-child { margin-top: 0; }
.l-sectionMore { margin: 28px 0 0; text-align: center; }
.l-sectionMore-left { text-align: left; }

/* テキストリンクの並び（「＞ 役員紹介」など。m-cardPhoto_more と同じ記号） */
.l-linkRow { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 20px 0 0; padding: 0; list-style: none; }
.l-linkRow a,
.l-linkList a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-brand-ink);
}
.l-linkRow a::before,
.l-linkList a::before { content: "\FF1E" / ""; font-weight: 700; }
.l-linkRow a:hover,
.l-linkList a:hover { color: var(--color-brand-hover); }

/* リンクの罫線リスト（職種ページ末尾の「他の募集職種」） */
.l-linkList { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-border-light); display: grid; grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .l-linkList { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
}
@media (min-width: 1032px) {
  .l-linkList { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.l-linkList li { border-bottom: 1px solid var(--color-border-light); }
.l-linkList a { padding: 14px 0; font-size: 1.5rem; }
.l-linkList_sub { margin-left: 6px; font-size: 1.3rem; font-weight: 700; color: var(--color-text-sub); }

/* セクション群の境目: 群の先頭だけ間隔を広げてリズムをつくる */
.l-group { margin-top: 56px; }
@media (min-width: 768px) {
  .l-group { margin-top: 96px; }
}
/* ページ内リンクの着地位置（浮島ヘッダー分を逃がす） */
.l-main [id] { scroll-margin-top: 96px; }
@media (min-width: 1032px) {
  .l-main [id] { scroll-margin-top: 128px; }
}
/* 数字と単位・時刻の範囲を行末で分離させない（読み上げ用テキストは既存の .u-visuallyhidden を使う） */
.u-nobr { white-space: nowrap; }
/* 白塗りボタン（ネイビー地の CTA 帯で使う） */
.m-btn-white { background: #FFFFFF; border-color: #FFFFFF; color: var(--color-brand-sub); }
.m-btn-white:hover { background: transparent; color: #FFFFFF; }
/* 小ボタン: 最小文字 14px・タップ領域 44px */
.l-jobHead .m-btn-sm,
.l-applyBar .m-btn-sm { min-height: 44px; padding: 0.5em 1.6em; font-size: 1.4rem; }

/* 印刷時・SP のリスト子要素はフェード演出を使わない（速いスクロールで空白に見える） */
@media print {
  .js-inview { opacity: 1 !important; transform: none !important; }
}
.js-inview.is-inview { transform: none; }
@media (max-width: 767px) {
  .l-jobList_item.js-inview,
  .l-values_item.js-inview,
  .l-defList_item.js-inview,
  .l-faq_item.js-inview,
  .l-flow_step.js-inview,
  .l-dayFlow_item.js-inview { opacity: 1; transform: none; transition: none; }
}

/* ---- タグ（募集状況・応募条件の差分だけに使う） ---- */
.l-tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: #E6F6F7;
  color: var(--color-brand-ink);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: normal;
  white-space: nowrap;
}
.l-tag-closed { background: #E5E8EE; color: #1A1A1A; }         /* 募集停止中だけ灰にする */
/* ---- 写真を背景にしたページヒーロー（採用トップと同じ考え方）----
   これまでは「紺帯の見出し」と「その下の写真カード」に分かれていたのを 1 つにまとめる。
   写真はそのまま見せ、紺のグラデーションを重ねて文字を読ませる */
.l-categoryHero-photo {
  background: var(--color-brand-sub);
}
.l-categoryHero-photo > .l-pageHero-bg {
  opacity: 1;
}
.l-categoryHero-photo > .l-pageHero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.l-categoryHero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 30, 60, 0.48) 0%, rgba(0, 30, 60, 0.30) 32%, rgba(0, 30, 60, 0.78) 100%);
  pointer-events: none;
}

.l-categoryHero_status {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 0;
}

/* ---- 罫線リスト l-defList（求める人物像・働く環境・仕事内容） ----
   押せない情報はカードにしない。PC は 2 列、SP は 1 列。-num で 01〜 の番号を付ける */
.l-defList,
.l-values {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--color-border-mid);
  counter-reset: deflist;
}
@media (min-width: 768px) {
  .l-defList,
  .l-values { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; }
}
.l-defList_item,
.l-values_item {
  position: relative;
  padding: 18px 0 20px;
  border-bottom: 1px solid var(--color-border-light);
}
@media (min-width: 768px) {
  .l-defList_item,
  .l-values_item { padding: 22px 0 24px; }
}
.l-defList-num .l-defList_item,
.l-values_item { padding-left: 40px; }
.l-defList-num .l-defList_item::before,
.l-values_item::before {
  counter-increment: deflist;
  content: counter(deflist, decimal-leading-zero) / "";
  position: absolute;
  left: 0;
  top: 22px;
  font-family: "Inter", sans-serif;
  font-size: 1.3rem;
  line-height: 1.6;
  letter-spacing: normal;
  color: var(--color-brand-ink);
}
@media (min-width: 768px) {
  .l-defList-num .l-defList_item::before,
  .l-values_item::before { top: 26px; }
}
.l-defList_title,
.l-values_item strong {
  display: block;
  margin: 0;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
}
@media (min-width: 768px) {
  .l-defList_title,
  .l-values_item strong { font-size: 1.7rem; }
}
.l-defList_text,
.l-values_item span {
  display: block;
  margin: 6px 0 0;
  font-size: 1.4rem;
  line-height: 1.75;
  color: var(--color-text-sub);
}

/* ---- 歓迎する方・活かせる経験（通常の箇条書き） ---- */
.l-checkList { list-style: disc; margin: 0; padding: 0 0 0 1.4em; display: grid; gap: 6px; }
.l-checkList li { font-size: 1.5rem; line-height: 1.8; }
.l-checkList li::marker { color: var(--color-brand-ink); }
.l-checkList-plain li::marker { color: var(--color-border-mid); }
.l-checkList_title { margin: 22px 0 8px; font-size: 1.4rem; font-weight: 700; color: var(--color-brand-ink); letter-spacing: normal; }

/* ---- 特集（いま募集中の求人。写真付きの 1 枚だけをカードにする） ---- */
.l-jobFeature { margin: 0 0 32px; }
.l-jobFeature > a {
  display: grid;
  grid-template-columns: 1fr;
  background: #FFFFFF;
  border: 1px solid var(--color-border-light);
  border-radius: 20px;
  overflow: hidden;
  color: var(--color-text);
  text-decoration: none;
  transition: transform 0.4s var(--easing-back), box-shadow 0.4s var(--easing-std);
}
.l-jobFeature > a:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(0, 30, 60, 0.08); }
@media (min-width: 768px) {
  .l-jobFeature > a { grid-template-columns: 44% 1fr; }
}
.l-jobFeature_visual { position: relative; aspect-ratio: 16 / 10; background: #EFEFED; overflow: hidden; }
@media (min-width: 768px) {
  .l-jobFeature_visual { aspect-ratio: auto; min-height: 100%; }
}
.l-jobFeature_visual img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--easing-std); }
.l-jobFeature > a:hover .l-jobFeature_visual img { transform: scale(1.04); }
.l-jobFeature_body { display: flex; flex-direction: column; padding: 22px 22px 24px; }
@media (min-width: 768px) {
  .l-jobFeature_body { padding: 30px 34px 30px; }
}
.l-jobFeature_tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.l-jobFeature_title { margin: 0; font-size: 2.2rem; font-weight: 700; line-height: 1.35; }
@media (min-width: 768px) {
  .l-jobFeature_title { font-size: 2.6rem; }
}
.l-jobFeature_title small { display: block; margin-top: 4px; font-size: 1.4rem; font-weight: 700; color: var(--color-brand-ink); }
.l-jobFeature_text { margin: 12px 0 0; font-size: 1.4rem; line-height: 1.8; color: var(--color-text-sub); }
@media (min-width: 768px) {
  .l-jobFeature_text { font-size: 1.5rem; }
}
.l-jobFeature .l-jobList_meta { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--color-border-light); }
.l-jobFeature .m-cardPhoto_more { margin-top: 18px; }

/* ---- 職種一覧（行リスト。比較できるように給与・勤務・勤務地を列にそろえる） ---- */
.l-jobList { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-border-mid); }
.l-jobList_item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px 24px;
  padding: 18px 28px 18px 0;
  border-bottom: 1px solid var(--color-border-light);
}
@media (min-width: 768px) {
  .l-jobList_item { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; padding: 22px 40px 22px 0; }
}
.l-jobList_head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.l-jobList_title { margin: 0; font-size: 1.8rem; font-weight: 700; line-height: 1.4; }
@media (min-width: 768px) {
  .l-jobList_title { font-size: 2rem; }
}
.l-jobList_title a { color: var(--color-text); text-decoration: none; }
.l-jobList_title a::after { content: ""; position: absolute; inset: 0; }   /* 行全体を押せるようにする */
.l-jobList_item:hover .l-jobList_title a { color: var(--color-brand-ink); }
.l-jobList_text { margin: 4px 0 0; font-size: 1.4rem; line-height: 1.7; color: var(--color-text-sub); }
.l-jobList_meta { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; }
.l-jobList_meta div { display: flex; gap: 8px; align-items: baseline; font-size: 1.4rem; line-height: 1.6; }
.l-jobList_meta dt { color: var(--color-text-sub); font-size: 1.3rem; font-weight: 700; letter-spacing: normal; white-space: nowrap; }
.l-jobList_meta dd { margin: 0; font-weight: 700; }
.l-jobList_meta div:first-child dd { font-size: 1.5rem; }
@media (min-width: 768px) {
  .l-jobList_item .l-jobList_meta { display: grid; grid-template-columns: 1fr; gap: 4px; padding-top: 4px; }
}
.l-jobList_arrow {
  position: absolute;
  right: 0;
  top: 20px;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--color-brand-ink);
  transition: transform 0.3s var(--easing-back);
}
@media (min-width: 768px) {
  .l-jobList_arrow { top: 24px; }
}
.l-jobList_item:hover .l-jobList_arrow { transform: translateX(4px); }

/* 登録受付（募集停止中の職種）: 箱にせず、一覧の下に 1 段落で */
.l-jobList_reg { margin-top: 22px; }
.l-jobList_reg_title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0; font-size: 1.5rem; font-weight: 700; }
.l-jobList_reg_list { display: flex; flex-wrap: wrap; gap: 6px 24px; margin: 10px 0 0; padding: 0; list-style: none; }
.l-jobList_reg_list a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 0; font-size: 1.5rem; font-weight: 700; color: var(--color-brand-ink); }
.l-jobList_reg_list a::before { content: "\FF1E" / ""; }
.l-jobList_reg_text { margin-top: 8px; }

/* ---- 手順（l-flow）: 箱をやめ、上の細い罫線と番号で並べる。PC は横、SP は縦 ---- */
.l-flowWrap { --flow-cols: 4; position: relative; }
.l-flow {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
@media (min-width: 768px) {
  .l-flow { grid-template-columns: repeat(var(--flow-cols), minmax(0, 1fr)); gap: 0 32px; }
}
.l-flow_step { position: relative; padding: 0 0 22px 36px; }
.l-flow_step::before {                     /* SP: 左の縦線 */
  content: "";
  position: absolute;
  left: 6px;
  top: 10px;
  bottom: 0;
  width: 2px;
  background: var(--color-border-mid);
}
.l-flow_step:last-child::before { display: none; }
.l-flow_step::after {                      /* SP: 線の上の点 */
  content: "";
  position: absolute;
  left: 2px;
  top: 8px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-brand-ink);
}
@media (min-width: 768px) {
  .l-flow_step { padding: 18px 0 0; border-top: 2px solid var(--color-border-mid); }
  .l-flow_step::before,
  .l-flow_step::after { display: none; }
}
.l-flow_num {
  display: block;
  margin: 0 0 6px;
  font-family: "Inter", sans-serif;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: normal;
  color: var(--color-brand-ink);
}
@media (min-width: 768px) {
  .l-flow_num { font-size: 2.2rem; line-height: 1.2; margin-bottom: 10px; }
}
.l-flow_title { display: block; font-size: 1.6rem; font-weight: 700; line-height: 1.45; }
@media (min-width: 768px) {
  .l-flow_title { font-size: 1.7rem; }
}
.l-flow_text { display: block; margin-top: 6px; font-size: 1.4rem; line-height: 1.75; color: var(--color-text-sub); }
.l-flow_note { display: block; margin-top: 8px; font-size: 1.4rem; font-weight: 700; color: var(--color-brand-ink); }
.l-flow_outlets { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; }
.l-flow_outlets li { position: relative; padding-left: 14px; font-size: 1.4rem; font-weight: 700; line-height: 1.7; }
.l-flow_outlets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.75em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-brand-ink);
}
.l-flow_loopLabel { display: none; }
.l-flow_caption { text-align: left; }
/* 職種ページの短縮版: 番号・見出し・日数だけ（詳細は採用トップの #process へ） */
.l-flow-compact .l-flow_step { padding-bottom: 14px; }
@media (min-width: 768px) {
  .l-flow-compact .l-flow_step { padding: 14px 0 0; }
  .l-flow-compact .l-flow_num { font-size: 1.6rem; margin-bottom: 4px; }
  .l-flow-compact .l-flow_title { font-size: 1.6rem; }
}
.l-flow-compact .l-flow_note { margin-top: 4px; font-weight: 700; color: var(--color-text-sub); }

/* ---- 評価の流れ（l-cycle）: 4 つの弧を時計回りにつないだ輪の中央に「半期ごとに繰り返す」、横に 4 ステップの説明。
        働く環境・制度の PAY・サステナビリティの HOW IT WORKS（4 分割）・採用「働く」の FLOW（3 分割）で使う。弧と番号の色は薄いアクアから --color-brand-ink へ濃くなる 4 段 ---- */
.l-cycle { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; }
.l-cycle_ring { width: min(250px, 78%); margin: 0 auto; }
.l-cycle_ring svg { display: block; width: 100%; height: auto; }
.l-cycle_seg-1 { fill: #C9ECEF; }
.l-cycle_seg-2 { fill: #8BD6DB; }
.l-cycle_seg-3 { fill: var(--color-brand); }
.l-cycle_seg-4 { fill: var(--color-brand-ink); }
.l-cycle_segNum { font-family: "Inter", YuGothic, sans-serif; font-weight: 600; font-size: 19px; fill: var(--color-brand-sub); }
.l-cycle_segNum-4 { fill: #FFFFFF; }
.l-cycle_center { font-family: "Noto Sans JP", YuGothic, sans-serif; font-weight: 700; font-size: 17px; fill: var(--color-text); }
.l-cycle_list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-border-mid); }
.l-cycle_item { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px; align-items: start; padding: 16px 0; border-bottom: 1px solid var(--color-border-light); }
.l-cycle_num { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; font-family: "Inter", YuGothic, sans-serif; font-size: 1.5rem; font-weight: 600; line-height: 1; color: var(--color-brand-sub); }
.l-cycle_item-1 .l-cycle_num { background: #C9ECEF; }
.l-cycle_item-2 .l-cycle_num { background: #8BD6DB; }
.l-cycle_item-3 .l-cycle_num { background: var(--color-brand); }
.l-cycle_item-4 .l-cycle_num { background: var(--color-brand-ink); color: #FFFFFF; }
.l-cycle_title { display: block; padding-top: 8px; font-size: 1.6rem; font-weight: 700; line-height: 1.45; }
.l-cycle_text { display: block; margin-top: 4px; font-size: 1.4rem; line-height: 1.75; color: var(--color-text-sub); word-break: normal; }
@media (min-width: 768px) {
  .l-cycle { grid-template-columns: 300px minmax(0, 1fr); gap: 56px; }
  .l-cycle_ring { width: 300px; }
}
@media (min-width: 1032px) {
  .l-cycle { grid-template-columns: 340px minmax(0, 1fr); gap: 80px; }
  .l-cycle_ring { width: 340px; }
}
@media (max-width: 767px) {
  .l-cycle_item.js-inview { opacity: 1; transform: none; transition: none; }   /* SP のリスト子要素はフェード演出を使わない（l-flow_step と同じ） */
}
.l-cycle_item .l-flow_outlets { margin-top: 8px; gap: 2px; }   /* サステナ 03 販売の販路を一覧の中に置くときは少し詰める */
.l-cycle_item .l-flow_outlets li { font-size: 1.3rem; line-height: 1.6; word-break: normal; }

/* ---- 1 日の流れ（縦のタイムライン）: 時刻列と本文の境目に線と点 ---- */
.l-dayFlow { --t: 60px; --g: 40px; position: relative; list-style: none; margin: 0; padding: 0; }
.l-dayFlow::before {
  content: "";
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: calc(var(--t) + var(--g) / 2 - 1px);
  width: 2px;
  background: var(--color-border-mid);
}
.l-dayFlow_item { position: relative; display: grid; grid-template-columns: var(--t) 1fr; gap: 0 var(--g); padding: 0 0 22px; }
.l-dayFlow_item:last-child { padding-bottom: 0; }
.l-dayFlow_item::before {
  content: "";
  position: absolute;
  top: 7px;
  left: calc(var(--t) + var(--g) / 2 - 6px);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-brand-ink);
  border: 2px solid var(--color-bg-base);
  box-sizing: border-box;
  z-index: 1;
}
.l-dayFlow_time { font-size: 1.6rem; font-weight: 400; color: var(--color-brand-ink); text-align: right; line-height: 1.6; }
.l-dayFlow_title { display: block; font-size: 1.5rem; font-weight: 700; line-height: 1.6; }
.l-dayFlow_text { display: block; font-size: 1.4rem; color: var(--color-text-sub); line-height: 1.7; }
@media (min-width: 768px) {
  .l-dayFlow { --t: 72px; --g: 44px; max-width: 640px; }
}

/* ---- キャリアパス: 1 行のテキスト。箱にしない ---- */
.l-careerPath { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0; padding: 0; list-style: none; }
.l-careerPath li { display: inline-flex; align-items: center; gap: 12px; font-size: 1.6rem; font-weight: 700; line-height: 1.5; }
@media (min-width: 768px) {
  .l-careerPath li { font-size: 1.7rem; }
}
.l-careerPath li + li::before { content: "\FF1E" / ""; color: var(--color-brand-ink); }
.l-careerPath + .l-note { margin-top: 12px; }
/* コース（マネージメント / スペシャリスト）を並べる。中黒は CSS 側で付ける */
.l-careerCourses { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.l-careerCourses > li { position: relative; padding-left: 1.1em; }
.l-careerCourses > li::before { content: "\30FB" / ""; position: absolute; left: 0; top: 0; color: var(--color-brand-ink); }
.l-careerCourse_name { margin: 0 0 8px; font-size: 1.5rem; font-weight: 700; line-height: 1.5; }
.l-careerCourse_only { margin-left: 8px; font-size: 1.3rem; font-weight: 400; color: var(--color-text-sub); }
.l-careerCourse_only::before { content: "\FF08" / ""; }
.l-careerCourse_only::after { content: "\FF09" / ""; }
/* 働く環境ページ: 職種ごとのパスを表で */
.l-specTable-paths .l-careerPath li { font-size: 1.5rem; }
.l-specTable-paths .l-note { margin-top: 6px; }

/* ---- 募集要項の表 ----
   汎用 .l-specTable の SP 処理（30-4、639px 以下）と二重にならないよう、職種ページ用は 767px 以下で
   th/td を縦に積み、tr 側の余白・罫線は打ち消す */
.l-specTable-job th { width: 26%; vertical-align: top; }
@media (max-width: 767px) {
  .l-specTable-job tr { display: block; padding: 0; border: 0; }
  .l-specTable-job th,
  .l-specTable-job td { display: block; width: auto; padding: 0; border: 0; }
  .l-specTable-job th { padding: 14px 0 4px; font-size: 1.4rem; color: var(--color-brand-ink); }
  .l-specTable-job td { padding: 0 0 14px; border-bottom: 1px solid var(--color-border-light); }
}

/* ---- 職種ページの条件バー: PC ではスクロールに追従し、応募ボタンを常に見せる ---- */
.l-jobHead {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 14px 24px;
  margin: 0 0 40px;
  padding: 16px 20px;
  background: #FFFFFF;
  border: 1px solid var(--color-border-light);
  border-radius: 20px;
}
@media (min-width: 768px) {
  .l-jobHead { position: sticky; top: 92px; z-index: 20; grid-template-columns: 1fr auto; padding: 14px 16px 14px 24px; }
}
@media (min-width: 1032px) {
  .l-jobHead { top: 128px; }
}
.l-jobHead_facts { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0; }
.l-jobHead_facts div { display: flex; gap: 8px; align-items: baseline; font-size: 1.5rem; line-height: 1.6; }
.l-jobHead_facts dt { font-size: 1.3rem; font-weight: 700; color: var(--color-text-sub); white-space: nowrap; }
.l-jobHead_facts dd { margin: 0; font-weight: 700; }
.l-jobHead_text { margin: 0; font-size: 1.4rem; line-height: 1.7; }
.l-jobHead .m-btn-sm { width: 100%; }
@media (min-width: 768px) {
  .l-jobHead .m-btn-sm { width: auto; }
}
.l-jobHead-closed .l-jobHead_text { color: var(--color-text); }

/* ---- よくある質問（details/summary） ---- */
.l-faq { border-top: 1px solid var(--color-border-mid); }
.l-faq_item { border-bottom: 1px solid var(--color-border-light); }
.l-faq_item summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: 30px 1fr 28px;
  gap: 12px;
  align-items: start;
  padding: 18px 0;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.6;
}
.l-faq_item summary::-webkit-details-marker { display: none; }
.l-faq_item summary::before {
  content: "Q" / "";
  font-family: "Inter", sans-serif;
  font-size: 1.9rem;
  font-weight: 400;
  color: var(--color-brand-ink);
  line-height: 1.3;
}
.l-faq_item summary::after {
  content: "+" / "";
  justify-self: end;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--color-brand-ink);
  color: var(--color-brand-ink);
  font-size: 1.8rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.l-faq_item[open] summary::after { content: "\2212" / ""; }
.l-faq_item summary:hover { color: var(--color-brand-ink); }
.l-faq_item summary:active { background: rgba(40, 180, 190, 0.06); }
.l-faq_item summary:focus-visible { outline: 2px solid var(--color-brand-ink); outline-offset: 2px; }
.l-faq_a { display: grid; grid-template-columns: 30px 1fr; gap: 12px; padding: 0 0 20px; }
@media (min-width: 768px) {
  .l-faq_a { padding-right: 40px; }
}
.l-faq_a::before {
  content: "A" / "";
  font-family: "Inter", sans-serif;
  font-size: 1.9rem;
  font-weight: 400;
  color: #BF4A24;
  line-height: 1.3;
}
.l-faq_a p { margin: 0; font-size: 1.5rem; line-height: 1.85; }

/* ---- 応募（サイト共通のネイビー CTA 帯 l-cta_banner の採用版） ---- */
.l-cta_banner-apply { padding: 40px 22px 44px; }
@media (min-width: 768px) {
  .l-cta_banner-apply { padding: 56px 48px 60px; }
}
.l-cta_banner-apply .l-cta_banner_label { margin-bottom: 10px; }
.l-cta_banner-apply .l-cta_banner_heading { font-size: 2.4rem; margin-bottom: 14px; }
@media (min-width: 768px) {
  .l-cta_banner-apply .l-cta_banner_heading { font-size: 3.2rem; }
}
.l-cta_banner-apply .l-cta_banner_text { font-size: 1.5rem; max-width: 42em; margin-bottom: 24px; }
.l-cta_banner_btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.l-cta_banner_note { margin: 18px 0 0; font-size: 1.4rem; line-height: 1.8; color: rgba(255, 255, 255, 0.8); text-align: center; }
.l-cta_banner_note a { color: #FFFFFF; text-decoration: underline; text-underline-offset: 3px; }
.l-cta_banner_note a:hover { color: var(--color-brand); }

/* ---- SP: 下部固定の応募バー（ヒーローを過ぎたら表示、応募帯が見えたら隠す。main.js が制御） ---- */
.l-applyBar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 8000;
  display: none;
  align-items: center;
  gap: 12px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.96);
  border-top: 1px solid var(--color-border-light);
  transform: translateY(100%);
  transition: transform 0.3s var(--easing-std);
}
.l-applyBar.is-visible { transform: translateY(0); }
.l-applyBar .m-btn { flex: 1 1 auto; min-width: 0; }
.l-applyBar_link { flex: 0 0 auto; font-size: 1.4rem; font-weight: 700; color: var(--color-brand-ink); white-space: nowrap; }
@media (max-width: 767px) {
  .l-applyBar { display: flex; }
}

/* ---- 追加（別セッションのレビュー指摘を反映） ---- */
/* 採用配下: 本文リンクとボタン文字を brand-ink に（#1F8E96 はオフホワイト地で 3.4:1 と AA 未達） */
.has-bg-careers :is(.l-note, .l-messagePage, .l-faq_a, .l-jobList_reg_text, .l-specTable, .m-categorySection_lead, .l-pageLead) a { color: var(--color-brand-ink); }
.has-bg-careers :is(.l-note, .l-messagePage, .l-faq_a, .l-jobList_reg_text, .l-specTable, .m-categorySection_lead, .l-pageLead) a:hover { color: var(--color-brand-hover); }
.has-bg-careers .m-btn:not(.m-btn-inverse):not(.m-btn-inverse2):not(.m-btn-white):not(.m-btn-ghost):not(.m-btn-alert) { color: var(--color-brand-ink); }
.has-bg-careers .m-btn:not(.m-btn-inverse):not(.m-btn-inverse2):not(.m-btn-white):not(.m-btn-ghost):not(.m-btn-alert):hover { color: #FFFFFF; }
/* キーボード操作のフォーカスを見える形に */
.has-bg-careers a:focus-visible,
.has-bg-careers button:focus-visible,
.has-bg-careers summary:focus-visible { outline: 3px solid var(--color-brand-ink); outline-offset: 3px; }
.l-cta_banner a:focus-visible,
.l-categoryHero a:focus-visible { outline-color: #FFFFFF; }
/* 数字と単位・時刻や金額の範囲を行末で分離させない */
.l-jobList_meta dd,
.l-jobHead_facts dd,
.l-linkList_sub,
.l-flow_note { white-space: nowrap; }
@media (max-width: 767px) {
  .l-flow_note { white-space: normal; }
}
/* 狭い本文は auto-phrase をやめ、自然な折り返しに */
.l-jobList_text,
.l-defList_text,
.l-values_item span,
.l-flow_text,
.l-faq_a p,
.l-specTable td { word-break: normal; }
/* ヒーロー副題: h1 の行間 1.1 と YuGothic を継承していたのを直す（サイト共通） */
.l-categoryHero_title_ja { font-family: inherit; line-height: 1.5; }
/* 押せないカード（div.l-pageNav_item）は hover で浮かせない（サイト共通） */
.l-pageNav_item:not(a) { cursor: auto; }
.l-pageNav_item:not(a):hover { transform: none; border-color: var(--color-border-light); }


/* =====================================================
   33. 写真つきの取り組み群 (l-featureRow) — サステナビリティ
   押せない情報はカードにしない。小見出し + 罫線リスト + 自社の写真を 1 つの群にまとめる。
   PC は本文 7 : 写真 5 の 2 列 (写真は右。前後の本文と文字の左端をそろえる)、SP は写真 → 本文の縦並び
   ===================================================== */
.l-featureRow {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: start;
}
.l-featureRow + .l-featureRow { margin-top: 48px; }
.l-featureRow_visual {
  order: -1;
  margin: 0;
  aspect-ratio: 16 / 10;
  border-radius: 16px;
  overflow: hidden;
  background: #EFEFED;
}
.l-featureRow_visual img { width: 100%; height: 100%; object-fit: cover; }
.l-featureRow_heading {
  margin: 0 0 14px;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.4;
}
.l-featureRow .l-linkRow { margin-top: 16px; }
@media (min-width: 768px) {
  .l-featureRow { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 0 48px; }
  .l-featureRow + .l-featureRow { margin-top: 72px; }
  .l-featureRow_visual { order: 2; aspect-ratio: 4 / 3; }
  .l-featureRow_heading { margin-bottom: 18px; font-size: 2.2rem; }
}
@media (min-width: 1032px) {
  .l-featureRow { gap: 0 64px; }
}
/* ---- 派生 -split: 見出し・リード文と写真だけを 2 列にする（サステナビリティ 01〜03） ----
   写真を本文 1 行目の上端にそろえる形は、左の文字の高さに合う縦長写真が前提。
   当社の写真は横長しかなく右カラムで高さが出ないため、本文が長い節では写真の下に
   500px 前後の空白が残る。上だけを 2 列にして写真を左の文字の高さに合わせ、
   長い罫線リストは下に全幅（PC 2 列）で置く */
.l-featureRow-split { display: block; }
.l-featureRow-split .l-featureRow_top { display: grid; grid-template-columns: 1fr; gap: 20px; }
.l-featureRow-split .l-featureRow_rest { margin-top: 28px; }
@media (min-width: 768px) {
  .l-featureRow-split .l-featureRow_top {
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
    gap: 0 48px;
    align-items: stretch;
  }
  /* 写真の高さは比率ではなく左の文字の高さで決める（短い節でつぶれないよう最低の高さだけ持たせる） */
  .l-featureRow-split .l-featureRow_visual { aspect-ratio: auto; position: relative; min-height: 240px; }
  .l-featureRow-split .l-featureRow_visual img { position: absolute; inset: 0; }
  .l-featureRow-split .l-featureRow_body > :last-child { margin-bottom: 0; }
  .l-featureRow-split .l-featureRow_rest { margin-top: 36px; }
}
@media (min-width: 1032px) {
  .l-featureRow-split .l-featureRow_top { gap: 0 64px; }
}

/* ---- 派生 -photoSlides: 写真を時間で切り替える（採用トップ「働く環境と制度」。切替と丸印は main.js の initPhotoSlides）
   見せ方は Vision の l-video-slides と同じ語彙（0.8s のクロスフェード・左上の名札・下中央の丸印） ---- */
.l-photoSlides { position: relative; }
.l-photoSlides_track { position: relative; width: 100%; height: 100%; }
.l-photoSlides_item { position: absolute; inset: 0; opacity: 0; transition: opacity 0.8s var(--easing-std); }
.l-photoSlides_item.is-active { opacity: 1; }
.l-photoSlides_cap { position: absolute; left: 14px; top: 14px; padding: 5px 12px; border-radius: 50px; background: rgba(0, 30, 60, 0.72); color: #FFFFFF; font-size: 1.2rem; font-weight: 700; line-height: 1.4; }
.l-photoSlides_cap-right { left: auto; right: 14px; }   /* 写真の左上に看板やロゴがあるときは右上へ */
.l-photoSlides_dots { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); display: flex; gap: 8px; z-index: 2; }
.l-photoSlides_dot { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.5); cursor: pointer; transition: background-color 0.25s var(--easing-std), transform 0.25s var(--easing-std); }
.l-photoSlides_dot[aria-current="true"] { background: #FFFFFF; transform: scale(1.2); }
.l-photoSlides_dot:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .l-photoSlides_item { transition: none; }
}
@media (min-width: 768px) {
  .l-photoSlides_cap { left: 16px; top: 16px; font-size: 1.3rem; }
  .l-photoSlides_cap-right { left: auto; right: 16px; }
  .l-photoSlides_dots { bottom: 16px; }
}

/* 罫線リストの派生: -1col は写真の横に置くときの 1 列固定、-body はページの主内容として本文色・少し大きめに */
.l-defList-1col { grid-template-columns: 1fr; }
@media (min-width: 768px) {
  .l-defList-1col { grid-template-columns: 1fr; }
}
.l-defList-body .l-defList_text { color: var(--color-text); }
@media (min-width: 768px) {
  .l-defList-body .l-defList_text { font-size: 1.5rem; line-height: 1.85; }
}

/* ---- サイト共通: SP では行型の項目・段落・カード単位のフェードを切る (速い流し読みで空白が出るため。採用 #1356 の方針を全ページに) ---- */
@media (max-width: 767px) {
  .l-messagePage p.js-inview,
  .l-messagePage.js-inview,
  .l-pageNav_item.js-inview,
  .l-commitment_item.js-inview,
  .l-commitment_list.js-inview,
  .l-featureRow.js-inview,
  .m-cardPhoto.js-inview { opacity: 1; transform: none; transition: none; }
}
/* ---- サイト共通: SP の段落は文節単位 (auto-phrase) をやめ、自然な折り返しに (右端が大きく欠ける行が続くため) ---- */
@media (max-width: 767px) {
  .l-messagePage p,
  .l-commitment_text,
  .m-categorySection_lead,
  .m-cardPhoto_text { word-break: normal; }
}

/* ---- サイト共通: キーボード操作 ----
   focus-visible のリングを全ページに (採用配下だけだった)。ネイビー地では白 */
a:focus-visible,
button:focus-visible,
summary:focus-visible { outline: 3px solid var(--color-brand-ink); outline-offset: 3px; }
.l-categoryHero a:focus-visible,
.l-cta_banner a:focus-visible,
.l-footer a:focus-visible,
.l-drawer a:focus-visible,
.l-drawer button:focus-visible,
.l-topContentsNav a:focus-visible,
.l-numbers a:focus-visible { outline-color: #FFFFFF; }
/* overflow:hidden のカードは内側の a のリングが切れて見えないので、カード側に出す */
.m-cardPhoto:has(> a:focus-visible),
.l-jobFeature:has(> a:focus-visible) { outline: 3px solid var(--color-brand-ink); outline-offset: 3px; }
.m-cardPhoto > a:focus-visible,
.l-jobFeature > a:focus-visible { outline: none; }
/* ページ内リンクで焦点を移した着地先 (main.js) にはリングを出さない */
.l-main [tabindex="-1"]:focus { outline: none; }
/* 閉じているドロワーは Tab 順に入れない (translateX で隠れているだけだった)。閉じるときはスライドアウト後に隠す */
.l-drawer { visibility: hidden; transition: transform 0.5s var(--easing-std), visibility 0s linear 0.5s; }
.is-drawer-open .l-drawer { visibility: visible; transition-delay: 0s; }

/* =====================================================
   34. CA の実測にそろえる差分 (2026-08-27)
   全ページ: カード角丸 20px・hover 影 1 種・H2 34→28px の 3 点だけ
   採用配下: 白と薄灰の帯を交互に・節の余白 96px・目次（群＋リンク行）・会社と環境を知る（写真＋リンク行）・
           文字段階の圧縮。他のページには広げない（切替前の変更リスクを避ける）
   ===================================================== */
:root {
  --radius-card: 20px;
  --shadow-card-hover: 0 12px 28px rgba(0, 30, 60, 0.10);
  --space-section: 48px;
  --space-section-pc: 96px;
}
.m-card, .m-cardPhoto, .l-pageHero { border-radius: var(--radius-card); }
.m-cardPhoto:hover, .l-jobFeature > a:hover, .l-pageNav_item:hover { box-shadow: var(--shadow-card-hover); }
@media (min-width: 768px) {
  .m-categorySection_heading_ja { font-size: 2.8rem; }
  .m-categorySection_heading { margin-bottom: 40px; }
}

/* ---- 採用トップ: 帯の交互と一定のリズム ---- */
.l-pageBody-bands { padding-top: 0; padding-bottom: 0; }
.l-pageBody-bands > .m-container > .m-section-tight { margin: 0; padding-block: var(--space-section); }
.l-pageBody-bands > .m-container > .l-numbers { margin: 0; padding-block: var(--space-section); }
.l-pageBody-bands > .m-container > .l-pageHero { margin: 0 auto; }
.l-pageBody-bands .l-group { margin-top: 0; }
@media (min-width: 1032px) {
  .l-pageBody-bands > .m-container > .m-section-tight,
  .l-pageBody-bands > .m-container > .l-numbers { padding-block: var(--space-section-pc); }
}
.l-band,
.l-pageBody-bands > .m-container > .l-band {
  margin-inline: calc(50% - 50vw);   /* 節を viewport の端まで広げて全幅の白帯にし、内側の余白で内容位置は保つ */
  padding-inline: calc(50vw - 50%);
  background: var(--color-bg-surface);
}

/* ---- 募集職種の行リスト（採用トップ・全幅） ---- */
.l-index_jobs { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-border-light); }
.l-index_arrow { flex: 0 0 auto; color: var(--color-brand-ink); font-size: 1.4rem; font-weight: 700; transition: transform 0.3s var(--easing-back); }
a:hover > .l-index_arrow, a:hover .l-index_arrow { transform: translateX(3px); }
.l-index_job a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 12px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border-light);
  color: var(--color-text);
}
.l-index_job_main { grid-column: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.l-index_job_name { font-size: 1.6rem; font-weight: 700; line-height: 1.5; }
.l-index_job_meta { grid-column: 1; display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 1.3rem; line-height: 1.6; color: var(--color-text-sub); }
.l-index_job_meta span:first-child { font-weight: 700; color: var(--color-text); }
.l-index_job a .l-index_arrow { grid-column: 2; grid-row: 1 / span 2; }
.l-index_job a:hover .l-index_job_name { color: var(--color-brand-ink); }
.l-index_job .l-tag { font-size: 1.2rem; padding: 2px 8px; }
.l-index_closed { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 12px 0 0; font-size: 1.3rem; line-height: 1.6; color: var(--color-text-sub); }
.l-index_closed .l-tag { margin-right: 4px; font-size: 1.2rem; padding: 2px 8px; }
.l-index_closed a { font-weight: 700; color: var(--color-text-sub); }
.l-index_closed a:hover { color: var(--color-brand-ink); }
.l-index_closed_note { flex-basis: 100%; }

/* ---- 会社と環境を知る: 写真ヘッダー＋リンク行のカード（写真を使うのはここだけ） ---- */
.l-hub { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 640px) {
  .l-hub { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
}
@media (min-width: 1032px) {
  .l-hub { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
}
.l-hubCard { background: var(--color-bg-surface); border: 1px solid var(--color-border-light); border-radius: var(--radius-card); overflow: hidden; }
.l-hubCard_visual { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #EFEFED; }
.l-hubCard_visual img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--easing-std); }
.l-hubCard_visual:hover img { transform: scale(1.04); }
.l-hubCard_visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 30, 60, 0.02) 40%, rgba(0, 30, 60, 0.6)); }
.l-hubCard_title { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 14px 20px; color: #FFFFFF; font-size: 1.8rem; font-weight: 700; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.3); }
.l-hubCard_list { list-style: none; margin: 0; padding: 4px 22px 8px; }
.l-hubCard_list li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border-light);
  color: var(--color-text);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.5;
}
.l-hubCard_list li:last-child a { border-bottom: 0; }
.l-hubCard_list li a:hover { color: var(--color-brand-ink); }

.l-linkRow-nav { margin: 4px 0 0; padding-bottom: 20px; border-bottom: 1px solid var(--color-border-light); }
.l-careerPath-inline li { font-size: 1.5rem; }
.l-specTable_note { display: block; margin-top: 6px; font-size: 1.3rem; font-weight: 400; color: var(--color-text-sub); }

/* ---- 採用配下: 文字段階を 28 / 18 / 16 / 14 に寄せ、アクセントを 1 系統に、出現演出は使わない ---- */
.has-bg-careers .l-jobList_title { font-size: 1.8rem; }
.has-bg-careers .l-defList_title,
.has-bg-careers .l-values_item strong,
.has-bg-careers .l-subHeading,
.has-bg-careers .l-flow_title { font-size: 1.6rem; }
.has-bg-careers .l-faq_a::before { color: var(--color-brand-ink); }
.has-bg-careers .js-inview { opacity: 1; transform: none; transition: none; }

/* =====================================================
   33. 採用ページ 1 ページ完結の部品（2026-08-27）
   採用は「求人票を読んだ人が会社を確かめに来る」ページ。ページを行き来させず
   1 枚で読み切れるようにしたため、ページ内ナビ・人物カード・モーダルを持つ。
   ===================================================== */

/* --- ページ内ナビ（スクロール追従） --- */
.l-anchorNav {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border-light);
}
.l-anchorNav > .m-container {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 56px;
}
.l-anchorNav_list {
  display: flex;
  gap: 0.2rem;
  flex: 1;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.l-anchorNav_list::-webkit-scrollbar { display: none; }
.l-anchorNav_list a {
  display: block;
  padding: 0.4rem 0.75rem;
  font-size: 1.3rem;
  white-space: nowrap;
  color: var(--color-text-sub);
  border-radius: 999px;
  transition: background 0.2s var(--easing-std), color 0.2s var(--easing-std);
}
.l-anchorNav_list a:hover { background: var(--color-bg-base); color: var(--color-brand-ink); }
.l-anchorNav_list a[aria-current="true"] { background: var(--color-brand-sub); color: #fff; }
.l-anchorNav_cta {
  flex: none;
  padding: 0.5rem 1.2rem;
  border-radius: 999px;
  background: var(--color-brand);
  color: #fff;
  font-size: 1.3rem;
  font-weight: 700;
  white-space: nowrap;
  transition: background 0.2s var(--easing-std);
}
.l-anchorNav_cta:hover { background: var(--color-brand-hover); }
@media (max-width: 900px) { .l-anchorNav_cta { display: none; } }

/* 追従ナビの下に見出しが隠れないようにする */
[id="positions"], [id="people"], [id="work"], [id="environment"],
[id="process"], [id="faq"], [id="apply"], [id="values"] { scroll-margin-top: 72px; }

/* --- 働く人 --- */
/* --- 働く人: 集合写真＋丸い顔写真の列。写真を押すとインタビューが開く --- */
.l-peopleBlock {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-light);
  border-radius: 20px;
  overflow: hidden;
}
.l-peopleBlock_group { margin: 0; }
.l-peopleBlock_group img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 7;
  object-fit: cover;
  object-position: center 38%;   /* 後列と前列の両方が入る位置 */
}
.l-peopleBlock_body { padding: 2.8rem 2rem 3.2rem; }
@media (min-width: 768px) { .l-peopleBlock_body { padding: 4rem 4rem 4.4rem; } }

/* この節だけは英字を小さく、左寄せにする（顔写真の列が主役のため） */
.l-peopleBlock .m-categorySection_heading { text-align: left; margin-bottom: 0; }
.l-peopleBlock .m-categorySection_heading_en {
  font-family: "Inter", YuGothic, sans-serif;   /* 大文字専用の Bebas ではなく、そのままの綴りで出す */
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-brand-ink);
  text-transform: none;
  margin-bottom: 0.6rem;
}
.l-peopleBlock .m-categorySection_heading_ja { font-size: 2.4rem; }
@media (min-width: 768px) { .l-peopleBlock .m-categorySection_heading_ja { font-size: 2.8rem; } }
.l-peopleBlock .m-categorySection_lead { margin-top: 1rem; margin-left: 0; text-align: left; max-width: none; }

.l-people {
  display: flex;
  flex-wrap: wrap;
  gap: 2.4rem 1rem;
  margin: 2.8rem 0 0;
  padding: 0;
  list-style: none;
}
.l-people_item { margin: 0; flex: 0 0 auto; }
.l-people_card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  width: 8rem;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: center;
  transition: transform 0.25s var(--easing-std);
}
@media (min-width: 768px) { .l-people_card { width: 8rem; } }
.l-people_card:hover { transform: translateY(-3px); }
.l-people_photo {
  display: block;
  width: 7.6rem;
  height: 7.6rem;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--color-border-light);
}
@media (min-width: 768px) { .l-people_photo { width: 7.2rem; height: 7.2rem; } }
.l-people_card:hover .l-people_photo { border-color: var(--color-brand); }
.l-people_photo-blank { background: linear-gradient(140deg, #d8e4ea, #b9cbd6); }
.l-people_body { display: block; }
.l-people_role {
  display: block;
  font-size: 1.1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-sub);
  margin-bottom: 0.2rem;
}
.l-people_name { display: block; font-size: 1.4rem; font-weight: 700; line-height: 1.5; }
.l-people_line { display: none; }   /* 一言はモーダルの中で見せる */

/* --- モーダル（職種・働く人 共通） --- */
.l-modal {
  position: fixed;
  inset: 0;
  z-index: 10010; /* 固定ヘッダー(10000)・ドロワー(9999)より上。スキップリンク(99999)は残す */
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 1.6rem;
  background: rgba(0, 30, 60, 0.62);
  overflow-y: auto;
}
.l-modal.is-open { display: flex; }
.l-modal_box {
  position: relative;
  width: 100%;
  max-width: 72rem;
  margin: auto;
  background: var(--color-bg-surface);
  border-radius: 20px;
}
.l-modal_close {
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
  z-index: 2;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  color: var(--color-brand-sub);
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 30, 60, 0.15);
}
.l-modal_close:hover { background: #fff; }
/* 動画のモーダル（採用トップ VISION・職種ページのヒーロー動画）: 黒い層の中央に 16:9 のプレイヤー。
   終了・×・背景タップ・Esc で閉じる（main.js の [data-video]）。横長の画面でも縦に収まる幅にする */
.l-modal-video { align-items: center; padding: 6rem 1.6rem 1.6rem; background: rgba(0, 12, 26, 0.92); }
.l-modal_box-video { width: min(100%, calc((100vh - 12rem) * 16 / 9), 104rem); max-width: 104rem; background: #000; border-radius: 12px; }
.l-modal_video { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #000; }
.l-modal_video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.l-modal_box-video .l-modal_close { top: -5.2rem; right: 0; }
.l-modal_box-video .l-modal_close:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 3px; }
/* 先頭写真の枠は写真に合わせず固定の比率で決め、写真は object-fit で枠に収める（SP 3:2 / PC 16:9）。
   人物写真 4:3・職種写真 16:10 のどちらも顔が上寄りなので、切れる側は上下とも少し上を残す */
.l-modal_hero {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: 50% 30%;
  border-radius: 20px 20px 0 0;
  background: linear-gradient(140deg, #d8e4ea, #b9cbd6);
}
@media (min-width: 768px) {
  .l-modal_hero { aspect-ratio: 16 / 9; }
}
.l-modal_body { padding: 2.6rem clamp(2rem, 4vw, 3.2rem) 3.2rem; }
.l-modal_en { font-size: 1.4rem; letter-spacing: normal; color: var(--color-brand-ink); margin-bottom: 0.2rem; }
.l-modal_title { font-size: 2.4rem; font-weight: 700; line-height: 1.4; margin-bottom: 0.6rem; }
.l-modal_copy { font-size: 1.5rem; color: var(--color-text-sub); margin-bottom: 1.6rem; }
.l-modal_sec { margin-top: 2.8rem; }
.l-modal_sec > h4 {
  font-size: 1.25rem;
  letter-spacing: normal;
  font-weight: 700;
  color: var(--color-brand-ink);
  padding-bottom: 0.6rem;
  margin-bottom: 1.1rem;
  border-bottom: 1px solid var(--color-border-light);
}
.l-modal_sec p { font-size: 1.5rem; margin-bottom: 1rem; }
.l-modal_sec ul { font-size: 1.5rem; margin: 0; padding-left: 1.8rem; }
.l-modal_note { font-size: 1.35rem; color: var(--color-text-sub); margin-top: 0.8rem; }

/* 条件 3 点（月給・勤務地・雇用形態）。条件の正は求人票なので一覧には出しすぎない */
.l-modal_cond {
  display: grid;
  gap: 0.2rem 1.4rem;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  background: var(--color-bg-base);
  border-radius: 14px;
  padding: 1.6rem 1.8rem;
  margin: 0;
}
.l-modal_cond dt { font-size: 1.2rem; color: var(--color-text-sub); }
.l-modal_cond dd { margin: 0 0 0.8rem; font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.l-modal_cond div:last-child dd { margin-bottom: 0; }

.l-modal_work { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }
.l-modal_work > div { border-left: 2px solid var(--color-brand); padding-left: 1.1rem; }
.l-modal_work h5 { font-size: 1.45rem; font-weight: 700; margin-bottom: 0.2rem; }
.l-modal_work p { font-size: 1.35rem; color: var(--color-text-sub); margin: 0; }

.l-modal_day { list-style: none; margin: 0; padding: 0; }
.l-modal_day li {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: 1.2rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--color-border-light);
}
.l-modal_day li:last-child { border-bottom: 0; }
.l-modal_day time { font-family: "Inter", sans-serif; font-size: 1.5rem; color: var(--color-brand-ink); font-variant-numeric: tabular-nums; }
.l-modal_day b { display: block; font-size: 1.45rem; font-weight: 700; }
.l-modal_day small { font-size: 1.3rem; color: var(--color-text-sub); }

.l-modal_qa { margin: 0; }
.l-modal_qa dt {
  position: relative;
  padding-left: 2.2rem;
  margin-top: 1.8rem;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-brand-ink);
}
.l-modal_qa dt::before {
  content: "Q";
  position: absolute;
  left: 0;
  font-family: "Bebas Neue", sans-serif;
  font-size: 1.6rem;
  color: var(--color-brand);
}
.l-modal_qa dd { margin: 0.4rem 0 0 2.2rem; font-size: 1.5rem; color: var(--color-text-sub); }

.l-modal_actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.6rem;
  padding-top: 2.2rem;
  border-top: 1px solid var(--color-border-light);
}

body.is-modalOpen { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .l-people_card { transition: none; }
}

/* 採用ヒーローの行動導線（募集職種へ / 応募へ）。ネイビー地に置くため塗りと白抜きの 2 種 */
.l-categoryHero_actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}
.l-categoryHero_actions .m-btn { min-width: 0; }
@media (min-width: 768px) {
  .l-categoryHero_actions .m-btn { min-width: 220px; }
}

/* 採用ヒーロー: 写真をネイビー帯の背景に敷く。
   .l-pageHero の class は画像整合チェック（カード画像 ⇄ ヘッダー画像）の対象なので維持し、
   見た目だけを写真カードから背景へ切り替える。 */
.l-categoryHero > .l-pageHero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  margin: 0;
  aspect-ratio: auto;
  border-radius: 0;
  background: none;
  opacity: 0.42;
  pointer-events: none;
}
@media (min-width: 1032px) {
  .l-categoryHero > .l-pageHero-bg { aspect-ratio: auto; margin: 0; }
}
.l-categoryHero > .l-pageHero-bg img { height: 100%; }
.l-categoryHero > .m-container { position: relative; z-index: 1; }

/* =====================================================
   13c. サステナビリティ: 代表メッセージ行・3 つの重要課題
   l-featureRow の派生 (英語ラベル／一行サブ／導入段落／署名) と、
   罫線リスト項目の「RESULT」行 (事業の結果として環境・業界に起きること)。
   本文は事実だけを書き、効果はこの行に分ける
   ===================================================== */
.l-featureRow_en {
  margin: 0 0 6px;
  font-family: "Inter", sans-serif;
  font-size: 1.2rem;
  letter-spacing: normal;
  color: var(--color-brand-ink);
}
.l-featureRow_sub {
  margin: -8px 0 14px;
  font-size: 1.4rem;
  color: var(--color-text-sub);
}
.l-featureRow_intro {
  margin: 0 0 18px;
  font-size: 1.5rem;
  line-height: 1.85;
}
.l-featureRow_sign {
  margin: 20px 0 0;
  font-size: 1.3rem;
  line-height: 1.8;
  color: var(--color-text-sub);
}
.l-featureRow_sign b {
  display: block;
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: normal;
  color: var(--color-text);
}
.l-defList_result {
  margin: 8px 0 0;
  padding-left: 12px;
  border-left: 2px solid var(--color-brand);
  font-size: 1.4rem;
  line-height: 1.7;
  color: var(--color-brand-ink);
}
.l-defList_result b {
  margin-right: 8px;
  font-family: "Inter", sans-serif;
  font-size: 1.1rem;
  font-weight: 400;
  letter-spacing: normal;
  color: var(--color-text-sub);
}
/* 数字パネルの時点表記 */
.l-numbers_asof {
  margin: 28px 0 0;
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.6);
}

/* =====================================================
   35. CA の型にそろえる共通差分 (2026-08-27, Step 1)
   分析書 §4-2 / §4-3b / §4-7 と CA 本番 CSS の実測に合わせ、実装時に
   Claude 任せになっていた書体・見出し・字間・影・グラデ・角丸を全ページ一括で直す。
   - 和文は游ゴシック (OS 標準)。weight は normal / bold の 2 値 (500 は 700 に統一)
   - 英字大見出しは Bebas Neue、数字と小さな英字は Inter (2026-08-31 に Jost から変更。数字は weight 600)。Noto Sans JP は読み込まない
   - セクション見出しは中央揃えで英字が主役 (PC 52px)、和文は 18px 太字
   - letter-spacing は使わない (Bebas の .02em のみ。既存の指定はすべて normal に置換済み)
   - 影はヘッダー・メニュー・モーダルの機能的なものだけ。装飾グラデは平坦に。角丸は 20px に統一
   ===================================================== */
body {
  font-family: YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN",
               "メイリオ", Meiryo, Verdana, sans-serif;
}
.l-hero_carousel_title,
.m-categorySection_heading_ja,
.l-categoryHero_title,
.l-topContentsNav_item_ja { font-family: inherit; font-feature-settings: normal; }

.font-en-display { font-family: "Bebas Neue", YuGothic, sans-serif; font-weight: normal; letter-spacing: 0.02em; }
.font-en-number,
.l-numbers_value { font-family: "Inter", YuGothic, sans-serif; font-weight: 600; }

/* カード・ページ上部の英字ラベルは Bebas Neue (2026-08-31)。大文字専用書体なので大文字で揃え、
   小さく詰まって見える分だけ字を大きくする (カード 12px→14px / カテゴリ上部 14・16px→16・18px) */
.m-cardPhoto_label, .l-categoryHero_en, .l-pageHero_label_en {
  font-family: "Bebas Neue", YuGothic, sans-serif;
  font-weight: normal;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.m-cardPhoto_label { font-size: 1.4rem; }
.l-categoryHero_en { font-size: 1.6rem; }
@media (min-width: 768px) { .l-categoryHero_en { font-size: 1.8rem; } }

/* 残りの小さな英字ラベルは Bebas にしない (フッター・ヘッダーは 12px 前後で読めなくなる)。Inter・大文字化なし */
.l-numbers_label,
.l-hero_carousel_eyebrow, .l-cta_banner_label, .l-contact_item_label, .l-topContentsNav_item_en,
.l-footer_nav_heading, .l-footer_copyright, .l-footer_lang_btn, .l-footer_tagline,
.l-header_lang_code, .l-header_lang_current, .l-header_toggleDrawer_label, .l-header_logo_img,
.l-hero_scroll_label, .l-drawer .font-en-display, .m-btn.font-en-display {
  font-family: "Inter", YuGothic, sans-serif;
  font-weight: normal;
  letter-spacing: normal;
  text-transform: none;
}

/* セクション見出し: CA の型 (中央揃え、英字が主役、和文は小さく太く) */
.m-categorySection_heading { text-align: center; margin: 0 0 24px; line-height: 1.2; }
.m-categorySection_heading_en {
  font-family: "Bebas Neue", YuGothic, sans-serif;
  font-size: 3.2rem;
  font-weight: normal;
  letter-spacing: 0.02em;
  text-transform: none;
  line-height: 1;
  color: var(--color-text);
  margin: 0;
}
.m-categorySection_heading_ja { margin: 8px 0 0; font-size: 1.3rem; font-weight: bold; line-height: 1.5; letter-spacing: normal; }
.m-categorySection_lead { margin: 14px auto 0; text-align: center; }
@media (min-width: 768px) {
  .m-categorySection_heading { margin-bottom: 50px; }
  .m-categorySection_heading_en { font-size: 5.2rem; }
  .m-categorySection_heading_ja { font-size: 1.8rem; }
}
.l-numbers .m-categorySection_heading_en { color: #FFFFFF; }
/* トップの NEWS: 見出しの右に置いていたボタンを、見出しの下・中央に (CA の footBtn と同じ位置関係) */
.l-news_head { display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }

/* 影: 機能的なもの以外は消す */
:root { --shadow-card-hover: none; }
.m-card:not(.m-card-noHover):hover, .l-topPrimaryNav_card:hover, .l-primaryNav_item:hover,
.m-cardPhoto:hover, .l-jobFeature > a:hover, .l-people_card:hover, .l-pageNav_item:hover,
.l-orgChart_node, .l-orgChart_dept { box-shadow: none; }

/* 装飾グラデは平坦な単色に (写真の可読性を保つスクリムは残す) */
.l-stores_item_bg, .l-cta_banner-alert, .l-message_visual, .l-storeVisual_wrapper, .l-executives_item_photo {
  background-image: none;
  background-color: var(--color-brand-sub);
}
.l-primaryNav_item::before { background-image: none; }
.l-people_photo-blank, .l-modal_hero { background-image: none; background-color: var(--color-border-light); }

/* 角丸は 20px に統一 (CA の m-card / m-roundImg / m-roundBox と同じ) */
.m-card, .m-cardPhoto, .l-pageHero, .l-pageHero_label, .l-featureRow_visual, .l-storeVisual_wrapper, .l-storeVisual_label,
.l-messagePage_hero, .l-newsDetail_hero, .m-businessList_visual, .l-orgChart_dept, .l-header_lang_menu, .l-modal_cond {
  border-radius: 20px;
}

/* =====================================================
   14. 採用トップ（編集誌型）— 帯を交互に敷き、各帯は見出し・1 段落・ボタンだけ
   帯は 白（l-strip-white）／薄灰（l-strip-gray）／濃紺（l-strip-navy）の 3 種
   ===================================================== */
.l-strip { padding: 56px 0; }
.l-strip-white { background: var(--color-bg-surface); }
.l-strip-gray { background: var(--color-bg-base); }
.l-strip-navy { background: var(--color-brand-sub); color: #FFFFFF; }
.l-strip-navy .m-categorySection_heading_en { color: var(--color-brand); }
.l-strip-navy .m-categorySection_heading_ja { color: #FFFFFF; }
.l-strip-navy .m-categorySection_lead { color: rgba(255, 255, 255, 0.8); }
.l-strip-navy a:focus-visible,
.l-strip-navy button:focus-visible { outline-color: #FFFFFF; }
.l-strip .m-categorySection_heading { margin-bottom: 28px; }
.l-strip_center { text-align: center; }
.l-strip_center .m-categorySection_lead { margin-inline: auto; }
.l-strip_text { margin: 0; font-size: 1.5rem; line-height: 1.9; max-width: 34em; }
.l-strip-navy .l-strip_text { color: rgba(255, 255, 255, 0.86); }
.l-strip_actions { margin: 24px 0 0; text-align: center; } /* 「詳しく見る」は中央の見出しに揃える（本文は左のまま）。Vision の l-recruitSplit も対象 */
@media (min-width: 768px) {
  .l-strip { padding: 80px 0; }
  .l-strip .m-categorySection_heading { margin-bottom: 36px; }
  .l-strip_text { font-size: 1.6rem; }
  .l-strip_actions { margin-top: 28px; }
}
@media (min-width: 1032px) {
  .l-strip { padding: 104px 0; }
}

/* ---- 冒頭: 写真 1 枚 + RECRUIT。写真は .l-pageHero のまま背景に敷く（画像整合チェックの対象） ---- */
.l-recruitHero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 520px;
  height: 78vh;
  max-height: 720px;
  overflow: hidden;
  background: var(--color-brand-sub);
  color: #FFFFFF;
}
.l-recruitHero > .l-pageHero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  margin: 0;
  aspect-ratio: auto;
  border-radius: 0;
  background: none;
  pointer-events: none;
}
.l-recruitHero > .l-pageHero-bg img { width: 100%; height: 100%; object-fit: cover; }
.l-recruitHero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0, 30, 60, 0.18) 0%, rgba(0, 30, 60, 0.04) 38%, rgba(0, 30, 60, 0.80) 100%);
  pointer-events: none;
}
.l-recruitHero_inner { position: relative; z-index: 1; width: 100%; padding-bottom: 40px; }
.l-recruitHero_title { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.l-recruitHero_en { font-size: clamp(5.6rem, 15vw, 11.6rem); line-height: 0.95; letter-spacing: 0.01em; }
.l-recruitHero_ja { font-size: 1.4rem; font-weight: 700; letter-spacing: 0.14em; }
.l-recruitHero_lead { margin: 14px 0 0; font-size: 1.5rem; line-height: 1.7; color: rgba(255, 255, 255, 0.9); text-wrap: balance; }
.l-recruitHero_pickup {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  margin-top: 22px;
  padding: 7px 16px 7px 7px;
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.95);
  color: var(--color-text);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.4;
}
.l-recruitHero_pickup:hover { background: #FFFFFF; color: var(--color-brand-ink); }
/* 「Pick up」の札: Bebas Neue は 11px の行の中で大文字の上に 1.3px・baseline の下に 2.0px 空く (ascent 10 / descent 3 に
   丸められる) ので、上下同じ padding だと字が 0.7px 上に寄って見える。上下の padding をその分ずらして字面を札の中央に置く (合計は 23px のまま)。
   本文: 勤務地・タグ・「募集中」の区切りでだけ折り返す (keep-all + 生成側の <wbr>)。「中」だけ次の行に落ちるのを防ぐ */
.l-recruitHero_pickup_tag { flex: none; padding: 6.4px 11px 5.6px; border-radius: 50px; background: var(--color-brand-sub); color: #FFFFFF; font-size: 1.1rem; letter-spacing: 0.12em; text-transform: uppercase; }
.l-recruitHero_pickup_text { min-width: 0; word-break: keep-all; overflow-wrap: anywhere; }
@media (min-width: 768px) {
  .l-recruitHero { min-height: 600px; max-height: 800px; }
  .l-recruitHero_inner { padding-bottom: 64px; }
  .l-recruitHero_ja { font-size: 1.6rem; }
  .l-recruitHero_lead { font-size: 1.7rem; }
  .l-recruitHero_pickup { font-size: 1.4rem; }
}
@media (min-width: 1032px) {
  .l-recruitHero > .l-pageHero-bg { aspect-ratio: auto; margin: 0; }
}

/* ---- Vision: 濃紺地に 1 文 + 写真 ---- */
.l-recruitSplit { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; }
.l-recruitSplit_visual { margin: 0; aspect-ratio: 16 / 10; border-radius: 16px; overflow: hidden; background: #0B2E52; }
.l-recruitSplit_visual img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 768px) {
  .l-recruitSplit { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 0 56px; }
  .l-recruitSplit_visual { aspect-ratio: 4 / 3; }
}
@media (min-width: 1032px) {
  .l-recruitSplit { gap: 0 64px; }
}

/* ---- Category: 募集の入口ボタン。ラジオボタンの :checked で一覧を絞り込む（JS なし） ---- */
.l-jobFilter { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 0 0 32px; }
.l-jobFilter .m-btn { width: 100%; min-width: 0; min-height: 56px; padding-inline: 1em; cursor: pointer; }
#cat-all:checked ~ .l-jobFilter label[for="cat-all"],
#cat-fresh:checked ~ .l-jobFilter label[for="cat-fresh"],
#cat-exp:checked ~ .l-jobFilter label[for="cat-exp"],
#cat-closed:checked ~ .l-jobFilter label[for="cat-closed"] { background: var(--color-brand); border-color: var(--color-brand); color: #FFFFFF; }
#cat-all:focus-visible ~ .l-jobFilter label[for="cat-all"],
#cat-fresh:focus-visible ~ .l-jobFilter label[for="cat-fresh"],
#cat-exp:focus-visible ~ .l-jobFilter label[for="cat-exp"],
#cat-closed:focus-visible ~ .l-jobFilter label[for="cat-closed"] { outline: 3px solid var(--color-brand-ink); outline-offset: 3px; }
#cat-fresh:checked ~ .l-index_jobs .l-index_job:not([data-cat~="fresh"]),
#cat-exp:checked ~ .l-index_jobs .l-index_job:not([data-cat~="exp"]),
#cat-fresh:checked ~ .l-index_closed,
#cat-exp:checked ~ .l-index_closed,
#cat-closed:checked ~ .l-index_jobs { display: none; }
.l-strip .l-index_jobs { border-top-color: var(--color-border-mid); }
@media (min-width: 640px) {
  .l-jobFilter { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 40px; }
}

/* ---- Interview: 人物写真 3 枚 + ピル型リンク（SP は横スクロール）。残りは丸い写真 + 職種 + 名前（l-face） ---- */
.l-interview {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 76%;
  gap: 14px;
  margin: 0 -20px;
  padding: 0 20px 6px;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 20px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.l-interview::-webkit-scrollbar { display: none; }
.l-interview > li { scroll-snap-align: start; }
.l-interview_card { display: block; width: 100%; padding: 0; border: 0; background: none; text-align: left; color: inherit; font: inherit; cursor: pointer; }
.l-interview_photo { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; background: #0B2E52; }
.l-interview_photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--easing-std); }
.l-interview_card:hover .l-interview_photo img { transform: scale(1.03); }
.l-interview_role {
  position: absolute; top: 12px; left: 12px;
  padding: 6px 11px;
  border-radius: 50px;
  background: rgba(0, 30, 60, 0.72);
  color: #FFFFFF;
  font-size: 1.1rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.l-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 18px;
  border: 2px solid #FFFFFF;
  border-radius: 50px;
  background: #FFFFFF;
  color: var(--color-brand-sub);
  font: inherit;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.25s var(--easing-std), color 0.25s var(--easing-std), border-color 0.25s var(--easing-std);
}
.l-pill small { font-size: 1.2rem; font-weight: 500; color: var(--color-text-sub); }
.l-interview_card .l-pill { width: 100%; margin-top: 12px; flex-wrap: wrap; gap: 2px 10px; }
.l-interview_card:hover .l-pill { background: var(--color-brand); border-color: var(--color-brand); color: #FFFFFF; }
.l-interview_card:hover .l-pill small { color: rgba(255, 255, 255, 0.88); }
.l-pillRow_label { margin: 32px 0 0; font-size: 1.3rem; letter-spacing: 0.1em; text-align: center; color: rgba(255, 255, 255, 0.75); }
.l-pillRow { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 12px 0 0; padding: 0; list-style: none; }
.l-pill-sm { min-height: 40px; padding: 6px 16px; font-size: 1.3rem; }
.l-strip-navy .l-pill-sm { background: transparent; border-color: rgba(255, 255, 255, 0.6); color: #FFFFFF; }
.l-strip-navy .l-pill-sm:hover { background: #FFFFFF; border-color: #FFFFFF; color: var(--color-brand-sub); }
.l-strip-gray .l-pill-sm { background: #FFFFFF; border-color: var(--color-border-mid); color: var(--color-text); }
.l-strip-gray .l-pill-sm:hover { background: var(--color-brand-sub); border-color: var(--color-brand-sub); color: #FFFFFF; }
.l-strip-gray .l-pillRow { margin-top: 0; }
/* 残りの人: 丸い写真 + 職種（英字・アクア）+ 名前。幅を固定して中央寄せで折り返す（390px で 4 人 + 3 人） */
.l-faceRow { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.l-face { display: flex; flex-direction: column; align-items: center; width: 80px; padding: 0; border: 0; border-radius: 12px; background: none; color: #FFFFFF; font: inherit; text-align: center; cursor: pointer; }
.l-face_photo { display: block; width: 72px; height: 72px; padding: 3px; border: 2px solid rgba(255, 255, 255, 0.6); border-radius: 50%; background: #0B2E52; transition: border-color 0.25s var(--easing-std); }
.l-face_photo img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; transition: transform 0.6s var(--easing-std); }
.l-face_role { display: block; margin-top: 10px; font-size: 1rem; line-height: 1.2; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; color: var(--color-brand); }
.l-face_name { display: block; margin-top: 4px; font-size: 1.3rem; font-weight: 700; line-height: 1.3; }
.l-face:hover .l-face_photo { border-color: #FFFFFF; }
.l-face:hover .l-face_photo img { transform: scale(1.06); }
@media (min-width: 768px) {
  .l-interview { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-columns: auto; gap: 24px; margin: 0; padding: 0; overflow: visible; }
  .l-pillRow { gap: 12px; }
  .l-faceRow { gap: 24px 20px; margin-top: 24px; }
  .l-face { width: 116px; }
  .l-face_photo { width: 104px; height: 104px; padding: 4px; }
  .l-face_role { margin-top: 12px; font-size: 1.1rem; letter-spacing: 0.12em; }
  .l-face_name { margin-top: 6px; font-size: 1.5rem; }
}

/* ---- 働く環境: 先頭写真（l-pageHero）に l-photoSlides を重ねるとき。丸印は左下の名札と重ならないよう右下へ ---- */
.l-pageHero.l-photoSlides { aspect-ratio: 4 / 3; }  /* 写真が 4:3〜16:9 混在なので枠を高くし、看板やロゴが上下で切れないように */
.l-pageHero.l-photoSlides .l-photoSlides_dots { left: auto; right: 16px; transform: none; }
.l-pageHero.l-photoSlides .l-photoSlides_cap { z-index: 1; }
@media (min-width: 768px) {
  .l-pageHero.l-photoSlides { aspect-ratio: 16 / 10; }  /* PC も 16:8 でなく 16:10（1032px 以上の既定 16:8 を上書き） */
}

/* ---- 働く環境: 休日の仕組み・就業時間（数字ページの l-statRows を 2 列で。正は numbers.json） ---- */
.l-hoursGrid { display: grid; gap: 28px; margin: 0 0 16px; }
.l-hoursGrid_title { margin: 0; padding-bottom: 8px; border-bottom: 2px solid var(--color-brand-sub); font-size: 1.5rem; font-weight: 700; }
.l-hoursGrid_title small { margin-left: 10px; font-size: 1.2rem; font-weight: 500; color: var(--color-text-sub); }
.l-hoursGrid .l-statRows li { font-size: 1.4rem; }
.l-hoursGrid + .l-note { margin-top: 0; }
@media (min-width: 768px) {
  .l-hoursGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; margin-bottom: 20px; }
}

/* ---- 画像 + 見出し + 「詳しく見る」の行（共通の l-featureRow を上下中央に） ---- */
.l-recruitRow { align-items: center; }
.l-recruitRow .m-categorySection_heading { margin-bottom: 18px; }
.l-strip-navy .l-featureRow_visual { background: #0B2E52; }
@media (min-width: 768px) {
  .l-recruitRow .m-categorySection_heading { margin-bottom: 22px; }
}

/* ---- 応募帯の下: 下層へのリンク行 ---- */
.l-recruitLinks { justify-content: center; margin-top: 28px; }
.l-recruitLinks a { color: var(--color-brand-ink); }


/* =====================================================
   15. 採用「数字で見るペンギントレード」— ネイビーの見出し数字 4 つ + 白い帯に 2 列の詳細
   図の部品（横棒・積み上げ棒・部署の行）は l-stat* に集約。値は文字色（ネイビー）で、系列色は棒だけに使う
   ===================================================== */
/* 冒頭の 4 つの数字はサステナビリティと同じ l-numbers の箱（2026-09-01）。タブレット幅は 3+1 にならないよう 2×2 */
@media (min-width: 768px) and (max-width: 1031px) {
  .l-numbers-careers .l-numbers_grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.l-statBody { background: #FFFFFF; padding: 40px 0 8px; }
.l-statGrid { display: grid; grid-template-columns: 1fr; gap: 32px; }
.l-statSec { padding-top: 18px; border-top: 2px solid var(--color-brand-sub); }
.l-statSec h2 { display: flex; align-items: baseline; gap: 10px; margin: 0 0 6px; font-size: 1.7rem; font-weight: 700; }
.l-statSec_en { font-family: "Inter", YuGothic, sans-serif; font-size: 1.1rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-brand-ink); }
.l-statSec_lead { margin: 0 0 14px; font-size: 1.25rem; color: var(--color-text-sub); }
.l-statBars { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.l-statBars li { display: grid; grid-template-columns: minmax(0, 7.5em) minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: 1.3rem; }
.l-statBars_l { font-weight: 700; line-height: 1.3; }
.l-statBars_t { position: relative; height: 18px; }
.l-statBars_t i { display: block; height: 100%; background: var(--c, #1E50A0); border-radius: 0 4px 4px 0; }
.l-statBars_v { font-family: "Inter", YuGothic, sans-serif; font-weight: 600; white-space: nowrap; }
.l-statStack_bar { display: flex; gap: 2px; height: 22px; border-radius: 4px; overflow: hidden; }
.l-statStack_m { background: #1E50A0; }
.l-statStack_f { background: #28B4BE; }
.l-statLegend { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 1.3rem; }
.l-statLegend b { font-family: "Inter", YuGothic, sans-serif; font-weight: 800; font-size: 2rem; margin: 0 2px; }
.l-statLegend small { color: var(--color-text-sub); font-size: 1.2rem; margin-left: 2px; }
.l-statSw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 8px; vertical-align: 1px; }
.l-statSw-m { background: #1E50A0; }
.l-statSw-f { background: #28B4BE; }
.l-statRows { list-style: none; margin: 0; padding: 0; }
.l-statRows li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--color-border-light); font-size: 1.3rem; }
.l-statRows li:last-child { border-bottom: 0; }
.l-statRows_d { font-weight: 700; line-height: 1.4; }
.l-statRows_d small { display: block; font-weight: 500; color: var(--color-text-sub); font-size: 1.15rem; }
.l-statChip { flex: none; padding: 3px 12px; border-radius: 999px; font-size: 1.2rem; font-weight: 700; white-space: nowrap; }
.l-statChip-shift { background: #E6F6F7; color: var(--color-brand-ink); }
.l-statChip-off { background: #E8EEF8; color: #1E50A0; }
.l-statChip-time { background: var(--color-bg-base); color: var(--color-text); font-family: "Inter", YuGothic, sans-serif; font-weight: 600; }
.l-statNotes { list-style: none; margin: 28px 0 0; padding: 0; font-size: 1.2rem; line-height: 1.8; color: var(--color-text-sub); }
.l-statNotes li::before { content: "※ "; }
@media (min-width: 768px) {
  .l-statHero { padding: 64px 0 68px; }
  .l-statHero_grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
  .l-statFig_v { font-size: 6rem; }
  .l-statBody { padding: 64px 0 16px; }
  .l-statGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 56px; }
  .l-statBars li { font-size: 1.4rem; gap: 14px; }
  .l-statBars_t { height: 20px; }
}

/* ---- 採用トップ Vision の動画（サムネイル + 再生ボタン → iframe） ---- */
.l-recruitSplit_visual.l-video { aspect-ratio: 16 / 9; }
.l-video_play { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: #0B2E52; cursor: pointer; }
.l-video_play img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--easing-std); }
.l-video_play:hover img { transform: scale(1.03); }
.l-video_icon { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(255, 255, 255, 0.94); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); transition: background-color 0.25s var(--easing-std), transform 0.25s var(--easing-std); }
.l-video_icon::after { content: ""; position: absolute; left: 55%; top: 50%; transform: translate(-50%, -50%); border-style: solid; border-width: 11px 0 11px 19px; border-color: transparent transparent transparent var(--color-brand-sub); }
.l-video_play:hover .l-video_icon { background: #FFFFFF; transform: translate(-50%, -50%) scale(1.06); }
.l-video_play:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 3px; }
.l-video iframe { display: block; width: 100%; height: 100%; border: 0; }
@media (min-width: 768px) {
  .l-recruitSplit_visual.l-video { aspect-ratio: 16 / 9; }
  .l-video_icon { width: 76px; height: 76px; }
}


/* 本文の横に動画を置くとき（採用トップ「私たちの仕事」）。比率は動画に合わせる */
.l-featureRow_visual.l-video { aspect-ratio: 16 / 9; background: #0B2E52; }
@media (min-width: 768px) {
  .l-featureRow_visual.l-video { aspect-ratio: 16 / 9; }
}

/* ---- スライドショーの矢印（写真・動画で共通。main.js の ptSlideArrows が作る） ---- */
.l-slideNav {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 30, 60, 0.55);
  color: #FFFFFF;
  cursor: pointer;
  transform: translateY(-50%);
  transition: background-color 0.25s var(--easing-std);
}
.l-slideNav:hover { background: rgba(0, 30, 60, 0.85); }
.l-slideNav:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 2px; }
.l-slideNav-prev { left: 10px; }
.l-slideNav-next { right: 10px; }
@media (min-width: 768px) {
  .l-slideNav { width: 44px; height: 44px; }
  .l-slideNav-prev { left: 14px; }
  .l-slideNav-next { right: 14px; }
}
/* 押せる領域が重なる動画スライドでは、矢印を再生ボタンより上に置く。
   枠が小さく再生ボタンと近いので、矢印は一回り小さくする */
.l-video-slides .l-slideNav { z-index: 4; width: 32px; height: 32px; }
.l-video-slides .l-slideNav svg { width: 16px; height: 16px; }
@media (min-width: 768px) {
  .l-video-slides .l-slideNav { width: 36px; height: 36px; }
  .l-video-slides .l-slideNav-prev { left: 10px; }
  .l-video-slides .l-slideNav-next { right: 10px; }
}

/* ---- 動画のスライドショー（サムネイルを時間で切り替え。押した 1 本を再生） ---- */
.l-video-slides { position: relative; }
.l-video_track { position: relative; width: 100%; height: 100%; }
.l-video-slides .l-video_slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.8s var(--easing-std); pointer-events: none; }
.l-video-slides .l-video_slide.is-active { opacity: 1; pointer-events: auto; }
.l-video_cap { position: absolute; left: 14px; top: 14px; padding: 5px 12px; border-radius: 50px; background: rgba(0, 30, 60, 0.72); color: #FFFFFF; font-size: 1.2rem; font-weight: 700; line-height: 1.4; }
.l-video_dots { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); display: flex; gap: 8px; z-index: 2; }
.l-video_dot { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.5); cursor: pointer; transition: background-color 0.25s var(--easing-std), transform 0.25s var(--easing-std); }
.l-video_dot[aria-current="true"] { background: #FFFFFF; transform: scale(1.2); }
.l-video_dot:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .l-video-slides .l-video_slide { transition: none; }
}
@media (min-width: 768px) {
  .l-video_cap { left: 16px; top: 16px; font-size: 1.3rem; }
  .l-video_dots { bottom: 16px; }
}