/* myteams Base Styles */

:root {
  --bg-body: #ffffff;
  --text-main: #333333;
  --text-muted: #555555;
  --text-light: #999999;
  --border: #eeeeee;
  --color-primary: #e60012; /* Red CTA color */
  --color-secondary: #00b386; /* Green recruit color */
  --header-bg: #111;
  --header-h: 65px; /* .global-header の実際の高さ（モバイルナビの位置合わせに使用） */
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  font-family: 'Inter', 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
  color: var(--text-main);
  background-color: var(--bg-body);
  line-height: 1.6;
  overflow-x: clip;
  width: 100%;
  position: relative;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.sp-only {
  display: none;
}

.sp-only-narrow {
  display: none;
}

@media (max-width: 480px) {
  .sp-only-narrow {
    display: inline;
  }
}

/* --- Unified Section Header --- */

.c-section-header {
  margin-bottom: 60px;
  text-align: left;
}
.c-section-header.text-center {
  text-align: center;
}
.c-section-header__en {
  display: block;
  font-size: 0.95rem;
  font-weight: bold;
  color: var(--color-primary); /* テーマカラーの赤 */
  letter-spacing: 0.15em;
  margin-bottom: 10px;
}
.c-section-header__ja {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 2.5rem;
  font-weight: 700; /* Drop to 700 to look more elegant */
  color: inherit;
  line-height: 1.3;
  margin-bottom: 0;
  letter-spacing: 0.05em;
}
/* 見出しのタイポグラフィ微調整 */
.c-section-header__ja .ja-en {
  font-family: 'Inter', sans-serif;
  font-size: 1.15em; /* ローマ字を少し大きく */
  font-weight: 700; /* 900から700へ少し細くし、日本語と統一 */
  margin-right: 2px;
}
.c-section-header__ja .ja-kana {
  font-size: 0.85em; /* 極端に小さくせず、少しだけ小さく */
  font-weight: 700; /* 他の日本語（強）と同じ太さに戻す */
}
.c-section-header__ja .ja-num {
  font-family: 'Inter', sans-serif;
  font-size: 1.4em; /* 1.15emからさらに大きく */
  font-weight: 700; /* 数字も700へ細く */
  color: var(--color-primary); /* 「3」を赤色に */
  margin: 0 4px;
}

/* 共通ボタン（もっと見る系） */
.c-btn-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 30px;
  border-radius: 50px;
  border: 1px solid #111;
  background-color: transparent;
  color: #111;
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}
.c-btn-more .arrow {
  margin-left: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.c-btn-more:hover {
  background-color: #111;
  color: #fff;
  border-color: #111;
}
.c-btn-more:hover .arrow {
  transform: translateX(5px);
}

/* 反転カラー（ダーク背景用） */
.c-btn-more--inverted {
  background-color: #fff;
  border-color: #fff;
  color: #111;
}
.c-btn-more--inverted:hover {
  background-color: transparent;
  color: #fff;
  border-color: #fff;
}/* 1. Header */
.global-header {
  background-color: var(--header-bg);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 10px rgba(0,0,0,0.5);
}
.menu-trigger {
  display: none;
}
.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 40px; /* 画面端の余白を少し広めに取る */
  max-width: 100%; /* 全幅に変更 */
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.header-inner::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -100vw;
  width: calc(100vw + 600px);
  background: #fff;
  transform: skewX(-75deg);
  transform-origin: top right;
  z-index: 0;
}
.logo {
  position: relative;
}
.logo a {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}.logo .logo-title {
  font-size: 1.5rem;
  letter-spacing: 0.05em;
}
.global-nav {
  position: relative;
  z-index: 2;
  margin-left: auto;
}
.global-nav ul {
  display: flex;
  list-style: none;
  gap: 40px;
  margin: 0;
  padding: 0;
  align-items: center;
}
.global-nav li {
  position: relative;
}
.nav-home-item {
  display: none;
}
.global-nav a {
  text-decoration: none;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: color 0.3s;
}
@media (max-width: 1300px) {
  .global-nav ul > li > a:not(.btn-header-contact) {
    align-items: flex-start !important;
    transition: color 0.15s ease, transform 0.15s ease;
  }

  .global-nav ul > li > a:not(.btn-header-contact):active,
  .global-nav ul > li > a:not(.btn-header-contact):active .en {
    color: var(--color-primary);
    transform: translateX(6px);
  }

  .dropdown-menu a {
    transition: color 0.15s ease, transform 0.15s ease;
  }

  .dropdown-menu a:active {
    color: var(--color-primary);
    transform: translateX(6px);
  }

  .dropdown-menu a:active .ja {
    color: var(--color-primary);
  }

  .nav-contact-item {
    margin-left: 0 !important;
  }

  .global-nav .btn-header-contact {
    display: inline-flex;
    width: fit-content;
    padding: 10px 28px;
  }

  /* モバイルではタップでホバー状態が残るため、CONTACTボタンの反転(白背景)を無効化 */
  .global-nav .btn-header-contact:hover {
    background-color: var(--color-primary);
    color: #fff !important;
  }
  .global-nav .btn-header-contact:hover .ja {
    color: #fff;
  }
}
.global-nav a:hover {
  color: var(--color-primary);
}

.global-nav li.current:not(.nav-contact-item) a {
  color: var(--color-primary);
}

.global-nav li.current:not(.nav-contact-item) a .en {
  color: var(--color-primary);
}

.global-nav li.current a.btn-header-contact .en,
.global-nav li.current a.btn-header-contact .ja {
  color: #fff;
}

.global-nav li.current a.btn-header-contact:hover .en {
  color: var(--color-primary);
}
.global-nav li.current a.btn-header-contact:hover .ja {
  color: #111;
}

/* Dropdown Menu */
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--header-bg);
  min-width: 180px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.5);
  border-radius: 4px;
  padding: 10px 0;
  opacity: 1;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 200;
}
.global-nav ul .dropdown-menu {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.global-nav li.has-dropdown:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  top: calc(100% + 5px);
}
.dropdown-menu a {
  padding: 12px 20px;
  font-size: 0.95rem;
  opacity: 1;
}
.dropdown-menu a:hover {
  background-color: #333;
  opacity: 1;
}
.dropdown-menu .ja {
  font-size: 0.95rem;
}
.dropdown-contact {
  min-width: 220px;
}
.global-nav .en {
  font-size: 0.95rem;
  font-weight: bold;
  letter-spacing: 0.05em;
  font-family: 'Helvetica Neue', Arial, sans-serif;
}
.global-nav .ja {
  font-size: 0.65rem;
  margin-top: 4px;
  color: #ccc;
}
.nav-contact-item {
  margin-left: 10px;
}
.btn-header-contact {
  background-color: var(--color-primary);
  color: #fff !important;
  border-radius: 50px;
  padding: 8px 32px; /* 4px 26pxから広げてボタンを大きく */
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: all 0.3s ease;
  mix-blend-mode: normal !important; /* 文字色が反転しないように通常に戻す */
}
.btn-header-contact:hover {
  background-color: #fff;
  color: var(--color-primary) !important;
}
.btn-header-contact .en {
  font-size: 0.95rem;
  font-weight: bold;
  line-height: 1;
}
.btn-header-contact .ja {
  font-size: 0.65rem;
  margin-top: 2px;
  line-height: 1;
  transition: color 0.3s ease;
}
.btn-header-contact:hover .ja {
  color: #111;
}

/* 2. FV */
.fv {
  display: flex;
  min-height: 500px;
  height: 70vh;
  position: relative;
}
.fv-visual {
  flex: 0 0 65%;
  background-color: #111;
  /* background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url('https://images.unsplash.com/photo-1522071820081-009f0129c71c?auto=format&fit=crop&q=80&w=1200'); */
  background-size: cover;
  background-position: center;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.fv-bg-video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  object-fit: cover;
  z-index: 0;
  opacity: 1;
  /* 2026-09-03 中村様が見比べページ fv-color.html の「4」を選択。
     案4 ＝ フィルターなし ＋ 膜 rgba(0,0,0,0.25)（「膜を薄く／動画の色が一番はっきり出る」）
     .fv-overlay の背景も 0.4 → 0.25 に合わせて変えること。この1行だけでは案4にならない。

     経緯：2026-07-30 の d2453d5 で3点（grayscale追加／膜を青へ／乗算追加）が
     同時に変わっていた。9/1にそれをすべて戻し、少し暗く締める案3を入れていた。
     今回そのフィルターも外し、膜を薄くする。 */
  filter: none;
  animation: fade-in-video 2.5s ease-out 1s forwards; /* 1秒待ってから2.5秒かけてフェードイン */
}

@keyframes fade-in-video {
  0% { opacity: 1; }
  100% { opacity: 1; }
}

.fv-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 2026-09-03 案4に合わせて 0.4 → 0.25。上の .fv-bg-video の filter:none とセット。
     膜を薄くすると動画の色は出るが、重ねている白文字のコントラストは下がる。
     片方だけ変えると案4にならないので、必ず2つ一緒に扱うこと。 */
  background: rgba(0, 0, 0, 0.25);
  z-index: 1;
}
.video-placeholder h2 {
  font-size: 5rem;
  letter-spacing: 0.1em;
  font-weight: 900;
  margin-bottom: 10px;
}
.video-placeholder p {
  font-size: 1.5rem;
  font-weight: bold;
}/* Staggered Sequence for Title (Scene A to Scene B) */
.seq-scene-a {
  opacity: 1;
  animation: fade-out-scene 1s ease-in 3.5s forwards;
}

.seq-line-a {
  opacity: 0;
  display: inline-block;
  /* 元は index.html に style="font-size: 2.8rem" と直書きされていた。
     44.8px 固定だったため、810px では枠437pxに対して762px必要になり
     2行に折れて、下の「製造業専門人材紹介会社」と合わせて4行になっていた。
     1440pxでの44.8px＝3.11vw を基準に、狭い側だけ追従させる。 */
  font-size: clamp(1.5rem, 3.11vw, 2.8rem);
}

/* 1000px未満はCTAパネルが横に入り、コピーの枠がさらに狭くなる。
   上の式のままだと 769px で余裕が2pxしか残らず、
   フォントの描画差で折り返しかねないため、傾きを落とす。
     769px 余裕 2px → 31px    810px 12px → 37px    900px 19px → 51px */
@media (max-width: 999px) {
  .seq-line-a {
    font-size: clamp(1.3rem, 2.9vw, 1.95rem);
  }
}

.line-a-1 { animation: blur-in-stay 1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.5s forwards; }
.line-a-2 { animation: blur-in-stay 1s cubic-bezier(0.2, 0.8, 0.2, 1) 1.5s forwards; }

.seq-scene-b {
  opacity: 0;
  /* 4.5秒後からスタートし、5秒かけて「出現→待機→消滅」するアニメーション */
  animation: fade-in-stay-out 5s cubic-bezier(0.2, 0.8, 0.2, 1) 4.5s forwards;
}

@keyframes blur-in-stay {
  0% { opacity: 0; filter: blur(12px); transform: scale(1.05); }
  100% { opacity: 1; filter: blur(0); transform: scale(1); }
}

@keyframes fade-out-scene {
  0% { opacity: 1; filter: blur(0); transform: scale(1); }
  100% { opacity: 0; filter: blur(12px); transform: scale(1.05); }
}

@keyframes fade-in-stay-out {
  0% { opacity: 0; filter: blur(12px); transform: scale(1.05); }
  15% { opacity: 1; filter: blur(0); transform: scale(1); }
  85% { opacity: 1; filter: blur(0); transform: scale(1); }
  100% { opacity: 0; filter: blur(12px); transform: scale(1.05); }
}

/* Red Panel Slide In */
.anim-slide-left {
  transform: translateX(100%);
  animation: slide-in-right 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes slide-in-right {
  0% { transform: translateX(calc(100% + 100px)); } /* 右の余白分も含めて完全に隠す */
  100% { transform: translateX(0); }
}

/* Mobile Slide In Up */
@keyframes slide-in-up {
  0% { transform: translateY(100%); }
  100% { transform: translateY(0); }
}@keyframes slide-up-mask {
  0% { opacity: 1; transform: translateY(60px); clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%); }
  100% { opacity: 1; transform: translateY(0); clip-path: polygon(0 -20%, 100% -20%, 100% 120%, 0 120%); }
}@keyframes fade-up-simple {
  0% { opacity: 1; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}.badge-text {
  font-size: 0.85rem;
  line-height: 1.3;
  text-align: left;
  letter-spacing: 0.05em;
}

.badge-text strong {
  font-size: 1.3rem;
  color: #FFD700; /* 高級感のあるゴールド */
  font-weight: 900;
  text-shadow: 0 2px 5px rgba(0,0,0,0.5);
}

/* --- FV Split Layout (Idea A) --- */
.fv-split {
  position: relative; /* Flexを解除し絶対配置で重ねる */
  height: 70vh;
  background: #111;
  overflow: hidden;
}
.fv-visual-split {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%; /* 初期状態は全画面(100%) */
  z-index: 1;
  animation: shrink-video 1s cubic-bezier(0.16, 1, 0.3, 1) 7.5s forwards; /* 赤ボックス出現(7.5秒)に合わせて65%へ縮小 */
}
@keyframes shrink-video {
  0% { width: 100%; }
  100% { width: 65%; }
}
.fv-cta-wrapper {
  position: absolute;
  top: 0;
  right: 0;
  width: 35%;
  height: 100%;
  z-index: 2; /* 動画の上に被せる（中身が現れるまでは透明） */
  overflow: hidden;
}
.fv-split .fv-cta {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 40px 20px;
  background-color: var(--color-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 3Dフリップ系のレガシーCSS削除 */

.lead-section {
  position: relative;
  z-index: 10;
  padding: 40px 20px 80px;
  background: #111;
}

/* 背景の光走るアニメーション */
.lead-bg-shimmer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0; /* 背景の一番後ろ */
}
.lead-bg-shimmer::before {
  content: "";
  position: absolute;
  top: 0;
  left: -150%;
  width: 100%;
  height: 100%;
  /* 柔らかい光のグラデーション（透明度を上げてはっきりと） */
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1) 30%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.1) 70%, transparent);
  transform: skewX(-25deg);
  animation: lead-shimmer-sweep 7s infinite linear;
}
@keyframes lead-shimmer-sweep {
  0% { left: -150%; }
  30% { left: 150%; } /* 30%の時間で走り抜ける */
  100% { left: 150%; } /* 残りは待機（約5秒） */
}

.lead-container {
  position: relative;
  z-index: 2; /* 光より手前にテキストを配置 */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
}
.lead-badges {
  position: absolute;
  left: 0; /* 画面（動画）の左端に揃える */
  top: -100px; /* さらに上に上げる */
  z-index: 50;
  display: flex;
  flex-direction: row;
  gap: 20px; /* 隙間をあける */
}
.lead-text-box {
  text-align: center; /* 中央揃えに変更 */
}
.fv-badge-img {
  display: block;
  margin: 0;
  /* 300px 固定だった。769px以上はどの画面でも同じ大きさで、
     810pxでは2枚が画面の77%を占めていた（1920pxでは32%）。
     1440pxでの300px＝20.9vw を基準に、狭いところだけ追従させる。
       810px → 170px（画面の44%）  1000px → 209px
      1440px → 300px（従来どおり） 1920px → 300px（従来どおり）
     768px以下は max-width:128px の別指定があるため影響しない。 */
  width: clamp(170px, 20.9vw, 300px);
  height: auto;
  filter: drop-shadow(0 4px 15px rgba(0,0,0,0.5)); /* 透過画像に合わせて影の形を最適化 */
  opacity: 1; /* アニメーション前は非表示 */
}
.lead-badges .fv-badge-img:nth-child(1) {
  animation: slide-in-left 1.5s cubic-bezier(0.25, 1, 0.5, 1) 2.0s forwards; /* 先に登場 */
}
.lead-badges .fv-badge-img:nth-child(2) {
  animation: slide-in-left 1.5s cubic-bezier(0.25, 1, 0.5, 1) 2.8s forwards; /* 後から登場（0.8秒遅れ） */
}

@keyframes slide-in-left {
  0% {
    opacity: 1;
    transform: translateX(-60px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
.lead-section p {
  font-size: 1.5rem; /* 1.8remから1.5remに少し小さく */
  line-height: 1.8; /* 行幅（行間）を狭くしました (2.2 -> 1.8) */
  font-weight: 500; /* 700から500へさらに細く */
  letter-spacing: 0.1em;
  color: #fff;
  margin: 0;
}
.lead-line1 {
  display: inline-block;
  opacity: 1;
  animation: fade-in-video 2.5s ease-out 3.0s forwards; /* 1行目は3秒後から出現 */
}
.lead-section .lead-highlight {
  color: #fff;
  /* 2.2rem(35.2px) 固定だった。「「住み込み・寮付きの仕事を探している人」を」の
     描画幅が789pxで、810pxでは枠が715pxしかなく折り返していた。
     枠が789pxを保てる約900px以上では2.2remのまま、
     それより狭いところだけ画面幅に追従させる。
       810px → 30.8px（必要幅690px < 枠715px）
       769px → 29.2px（必要幅655px < 枠674px） */
  font-size: clamp(1.8rem, 3.8vw, 2.2rem);
  display: inline-block;
  margin-top: 15px;
  position: relative;
  opacity: 1;
  animation: fade-in-video 2.5s ease-out 4.0s forwards; /* 2行目は1行目の1秒後(4秒後)から出現 */
}
/* 赤いアンダーラインのアニメーション */
.lead-section .lead-highlight::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 100%;
  height: 3px;
  background-color: var(--color-primary);
  transform: scaleX(0);
  transform-origin: left;
  /* 2行目出現(4秒後)の1秒後(5秒後)にサッと引かれる */
  animation: draw-line 1s cubic-bezier(0.16, 1, 0.3, 1) 5.0s forwards;
}

@keyframes draw-line {
  0% { transform: scaleX(0); }
  100% { transform: scaleX(1); }
}@keyframes ticker {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}.cta-banner {
  width: 100%;
}
.cta-banner h3 {
  font-size: 1.8rem;
  line-height: 1.3;
  margin-bottom: 15px;
}.fv-contact-buttons {
  display: flex;
  flex-direction: column;
  gap: 15px;
  max-width: 300px;
  margin: 0 auto;
}

.btn-fv-base {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1; /* 高さがブレないように固定 */
  text-decoration: none;
  border-radius: 50px;
  transition: all 0.3s ease;
  position: relative;
}

/* Primary Button (Job Seekers) -> Red Theme */
.btn-fv-primary {
  background: var(--color-primary);
  color: #fff;
  font-weight: 700;
  font-size: 1.1rem;
  padding: 18px 20px;
  border: 2px solid #fff; /* 通常時は白枠 */
}
.btn-fv-primary:hover {
  background: #fff;
  color: var(--color-primary);
  border-color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.btn-fv-secondary {
  background: #222;
  color: #fff;
  font-weight: 700;
  font-size: 1.1rem;
  padding: 20px 22px; /* borderを取り除いた分、高さを維持 */
}
.btn-fv-secondary:hover {
  background: #fff;
  color: #222;
  border-color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

/* Text Button (Underline animation) */
.btn-fv-text {
  background: transparent;
  color: #fff;
  border: none;
  font-size: 0.95rem;
  font-weight: bold;
  padding: 10px;
  margin-top: 5px;
  position: relative;
  display: inline-block;
  transition: all 0.3s;
}
.btn-fv-text:hover {
  color: #eaeaea;
  transform: translateY(-1px);
}

/* 3. Logo Slider */
@keyframes slide-left {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.logo-slider {
  padding: 20px 0; /* 余白を元に戻す */
  background-color: #f0f2f5;
  background-image: linear-gradient(#e4e7ec, #e4e7ec);
  background-size: 70% 50%;
  background-position: right 0 top 0;
  background-repeat: no-repeat;
  overflow: hidden; /* 再びはみ出しを隠す */
  display: flex;
}

.slider-track {
  display: flex;
  width: fit-content;
  animation: slide-left 45s linear infinite;
}

.slider-track h2 {
  font-size: 9rem; /* サイズを大きく（5rem -> 9rem） */
  font-weight: 300; /* 極細（Light）に変更して上品に */
  color: #fff; /* グレー背景に合わせて白抜きの透かし文字風に戻す */
  text-transform: uppercase;
  letter-spacing: 0.15em;
  padding-right: 4rem;
  white-space: nowrap;
}

/* 4. Strengths */
.strengths {
  padding: 0 0 260px; /* 上の余白を完全に0まで削り落とす */
  background-color: #f0f2f5;
  position: relative;
  /* overflow: hidden; は文字が欠けるため削除 */
}.strengths .relative-container {
  position: relative;
  z-index: 2;
}.strengths-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.strength-item {
  text-align: left;
}
.img-wrapper {
  position: relative;
  margin: 0 auto 15px;
  display: block;
  width: 100%;
}
.card-img {
  width: 100%;
  aspect-ratio: 16 / 9; /* モダンな横長比率 */
  border-radius: 12px; /* 柔らかい角丸 */
  background-size: cover;
  background-position: center;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08); /* プレミアムな薄い影 */
  margin: 0 auto;
}
.strength-content {
  position: relative;
  padding-top: 15px;
}
.strength-number {
  position: absolute;
  top: -15px;
  left: 0;
  right: 0;
  font-family: 'Inter', sans-serif;
  font-size: 6rem;
  font-weight: 900;
  color: rgba(0,0,0,0.04); /* 極めて薄い透かし */
  text-align: center;
  line-height: 1;
  z-index: 0;
  pointer-events: auto;
}
.strength-item h3 {
  position: relative;
  z-index: 1;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 1.3rem;
  margin-bottom: 15px;
  font-weight: 700;
  text-align: center;
  color: #111;
  letter-spacing: 0.05em;
}
.strength-item p {
  position: relative;
  z-index: 1;
  font-size: 0.9rem;
  line-height: 1.8;
  color: #444;
  margin: 0 auto;
}
.strengths-bottom-deco {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 250px;
  background: #fff; /* 下のセクション（白）へ繋がる背景 */
  clip-path: polygon(0 85%, 100% 0, 100% 100%, 0 100%); /* 左下から右上への鋭い斜めカット */
  z-index: 1;
}
.strengths-bottom-deco::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--color-primary); /* 赤いウェッジ部分 */
  /* 下のラインを「左上がり（右へ行くほど下がる）」にするため、右下の座標を85%に下げる */
  clip-path: polygon(30% 59.5%, 100% 0, 100% 85%); 
  transform: translateY(-40px); /* 上にずらして上部を隠し、面積を減らす */
}

/* 5. Services */
.services {
  padding: 100px 0;
  background-color: #fff; /* #f4f3f0から変更しクリーンに */
}
.text-center {
  text-align: center;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  text-align: left;
}
.service-card {
  position: relative;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background: #eeeeee;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
  padding: 45px 25px 30px; /* 上部の余白を広げてタグと画像の距離を確保 */
  display: flex;
  flex-direction: column;
  transition: transform 0.3s, box-shadow 0.3s;
}
.service-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 40px rgba(0,0,0,0.12);
}
.service-card .card-img {
  position: relative;
  width: 100%;
  aspect-ratio: 1.91 / 1; /* OGP画像の標準比率に設定 */
  background-size: cover;
  background-position: center;
  border-radius: 8px;
  margin-bottom: 25px;
  background-color: #f0f0f0;
  overflow: hidden; /* タグがはみ出さないように念のため */
}
.service-card .card-content {
  flex: 1;
}
.service-card h3 {
  font-size: 1.3rem;
  font-weight: bold;
  text-align: left;
  margin-bottom: 15px;
  color: #111;
  transition: color 0.3s;
}
.service-card p {
  /* PCの本文基準16px。モバイルは下のメディアクエリで0.9remに戻す */
  font-size: 1rem;
  color: #555;
  line-height: 1.8;
  margin-bottom: 20px;
  text-align: left;
  transition: color 0.3s;
}
/* Service Brand Colors (Currently disabled for unified look) */
/* .card-ryoryo { --brand-color: #1749BC; } */
/* .card-sumisumi { --brand-color: #C75D06; } */
/* .card-blog { --brand-color: #111; } */


/* 6. Company */
.company-section {
  padding: 100px 0;
  background: #fff;
}
.company-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 60px;
}/* 2026-08-27 index.html のインラインstyleから移設（!important を使わずに済ませるため） */
.company-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.company-header .c-btn-more {
  margin-top: 10px;
}

.company-content-wrapper {
  display: flex;
  gap: 80px;
  align-items: flex-start;
}
.company-accordion {
  flex: 1;
}
.accordion-item {
  display: block;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid #f0f0f0; /* 極細で上品な線へ変更 */
}
.accordion-item:first-child {
  border-top: 1px solid #f0f0f0;
}
.accordion-title {
  display: flex;
  align-items: center;
  padding: 25px 0;
  cursor: pointer;
  transition: opacity 0.3s;
}.accordion-title h3 {
  font-size: 1.25rem;
  font-weight: bold;
  margin: 0;
  flex: 1;
}
.accordion-title .arrow {
  width: 40px;
  height: 40px;
  /* 2026-08-31 中村様のご指摘。#eee の枠に #ccc の矢印では白地にほぼ埋もれ、
     押せる行だと伝わっていなかった。輪郭と矢印をはっきりさせる。 */
  border: 1px solid #cfd4da;
  border-radius: 50%;
  /* 2026-08-27 「→」は字形上、右側の余白が狭く2px右寄りに見えるため、
     視覚的な中央に合わせて2px左へ寄せる */
  text-indent: -2px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #555;
  background: #fff;
  transition: all 0.25s;
  font-size: 1rem;
}
/* 行のどこを触っても反応することを示す */
.accordion-title:hover .arrow {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: #fff;
}
.accordion-title:hover h3 {
  color: var(--color-primary);
}
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.4s ease;
  padding: 0 0 0 50px;
  color: #666;
  /* PCの本文基準16px */
  font-size: 1rem;
  line-height: 1.8;
}
.accordion-item.active .accordion-content {
  /* ボタン化で中身が高くなるため余裕を持たせる */
  max-height: 320px;
  padding-bottom: 25px;
}

/* 2026-08-31 赤い小さな文字列だけで、ページが変わるリンクだと分かりにくかった。
   枠を付けてボタンの形にする。 */
.accordion-more-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 0;
  padding: 11px 22px;
  border: 2px solid var(--color-primary, #E60012);
  border-radius: 50px;
  color: var(--color-primary, #E60012);
  background: #fff;
  font-weight: bold;
  font-size: 0.9rem;
  /* 2026-08-31 同じ画面の .c-btn-more と高さを揃える。
     継承の 1.8 のままだと行の高さが 25.92px になり 52px と3px高くなる。 */
  line-height: 1.6;
  text-decoration: none;
  transition: background 0.25s ease, color 0.25s ease;
}
.accordion-more-link:hover {
  background: var(--color-primary, #E60012);
  color: #fff;
}

.accordion-more-link .arrow {
  transition: transform 0.2s ease;
}

.accordion-more-link:hover .arrow {
  transform: translateX(4px);
}
.accordion-item.active .accordion-title .arrow {
  background: #333;
  color: #fff;
  border-color: #333;
  transform: rotate(90deg); /* 下を向く */
}

.company-images {
  flex: 1;
  position: relative;
  height: 500px;
}
.stacked-image {
  position: absolute;
  top: 5%;
  right: 0;
  width: 85%;
  height: 90%;
  background-size: cover;
  background-position: center;
  border-radius: 12px; /* 上部と合わせた美しい角丸 */
  
  /* 非アクティブ時：ズレ幅と傾きを大きくして、下の画像をしっかり見せる */
  opacity: 1;
  transform: rotate(-5deg) translate(-60px, 20px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.08); /* プレミアムな薄い影 */
  
  transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
  z-index: 1;
}

/* ホバー中のアクティブ画像は一番手前で真っ直ぐになる */
.company-images .stacked-image.active {
  opacity: 1;
  transform: rotate(0) translate(0, 0) scale(1.02); /* 少しだけ手前に出す（大きすぎると下の画像を隠してしまうため） */
  z-index: 10;
  box-shadow: 0 15px 40px rgba(0,0,0,0.15);
}

/* 企業理念カード：写真ではなく自社ロゴを掲載するスロット */
.stacked-image-logo {
  background-color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.stacked-image-logo .stacked-logo-mark {
  width: 30%;
  height: auto;
}
.stacked-image-logo .stacked-logo-text {
  width: 45%;
  height: auto;
}/* 7. 採用情報 */
.recruit-content {
  flex: 1;
  background-color: var(--header-bg); /* Black #111111 */
  color: #fff;
  padding: 80px 60px; /* 余白を最適化 */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* 2026-09-01 RECRUITの説明文。もとはインラインの0.85rem(13.6px)で、
   本文の基準から外れていた。 */
.recruit-content .recruit-lead {
  font-size: 1rem;
  margin-bottom: 40px;
  line-height: 2;
}

/* 3つの強みの説明文。CSSに指定が無く親から継承して14.4pxになっていた。 */
.strength-content > p {
  font-size: 1rem;
}

.recruit-content p {
  font-size: 1rem;
  color: #ccc;
  line-height: 1.8;
  margin-bottom: 50px;
  max-width: 500px;
}.recruit-marquee-wrapper {
  flex: 1;
  display: flex;
  gap: 15px;
  overflow: hidden;
  background-color: var(--header-bg);
  padding: 0 20px;
  min-height: 0; /* 中身の画像サイズに引っ張られて伸びるのを防ぎ、左側のテキストの高さにぴったり合わせる魔法のコード */
}
.marquee-col {
  flex: 1;
  overflow: hidden;
  position: relative;
  border-radius: 8px;
}
.marquee-track {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding-bottom: 15px; /* 無限ループの計算用 */
}
.marquee-track img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
}

.marquee-track img.marquee-focus-left {
  object-position: 30% center;
}

.marquee-track img.marquee-focus-right {
  object-position: 70% center;
}

/* スクロールアニメーション（両端は上へ、真ん中は下へ） */
@keyframes scroll-up {
  0% { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}
@keyframes scroll-down {
  0% { transform: translateY(-50%); }
  100% { transform: translateY(0); }
}

.marquee-col.up .marquee-track {
  animation: scroll-up 20s linear infinite;
}
.marquee-col.down .marquee-track {
  animation: scroll-down 30s linear infinite;
}
@media (max-width: 768px) {
  /* FV Responsive */
  .fv-split {
    flex-direction: column;
    height: auto;
  }
  .fv-visual-split {
    flex: 0 0 auto;
    width: 100%;
    height: 60vh;
  }
  .fv-cta-wrapper {
    flex: 0 0 auto;
    width: 100%;
    height: 450px;
  }
  .fv-split .anim-slide-left {
    transform: translateY(100%);
    animation: slide-in-up 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }.recruit-marquee-wrapper {
    height: 400px;
    padding: 20px;
  }
  .recruit-content {
    padding: 60px 20px;
  }}

/* =========================================================
   Mobile layout refinement (top page)
   Desktop rules above are intentionally left untouched.
   ========================================================= */
@media (max-width: 768px) {
  :root {
    --sp-side: 20px;
    --header-h: 68px;
  }

  html {
    scroll-padding-top: 68px;
  }

  body {
    font-size: 15px;
  }

  .container {
    width: 100%;
    max-width: none;
    padding-inline: var(--sp-side);
  }

  .pc-only {
    display: none !important;
  }

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

  .footer-disclaimer {
    text-align: left !important;
  }

  .c-section-header,
  .c-section-header.text-center {
    margin-bottom: 30px;
    text-align: center;
  }

  .c-section-header__en {
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    margin-bottom: 7px;
  }

  .c-section-header__ja {
    font-size: clamp(1.35rem, 6.2vw, 1.7rem);
    line-height: 1.38;
    letter-spacing: 0.025em;
  }

  .c-btn-more {
    width: fit-content;
    min-height: 46px;
    padding: 11px 22px;
    font-size: 0.84rem;
  }

  /* Header */
  .global-header {
    height: 68px;
    background: #fff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
  }

  .header-inner {
    height: 68px;
    min-height: 68px;
    padding: 8px 14px !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    text-align: left !important;
  }

  .header-inner::before {
    display: none;
  }

  .logo,
  .logo .logo-title,
  .logo a {
    position: relative;
    z-index: 2;
    margin: 0;
    line-height: 0;
  }

  .logo .logo-title img {
    max-height: 29px !important;
  }

  .hamburger {
    display: block;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    margin-left: auto;
  }

  .hamburger span {
    width: 24px;
    height: 2px;
  }

  .menu-trigger {
    display: none !important;
  }

  .nav-home-item {
    display: block;
  }

  .global-nav {
    top: var(--header-h);
    height: calc(100dvh - var(--header-h));
    background: rgba(255, 255, 255, 0.98);
  }

  .global-nav ul {
    gap: 18px;
    margin: 0;
    align-items: flex-start !important;
    text-align: left !important;
    padding-left: 32px !important;
  }

  .global-nav li {
    width: 100%;
  }

  .global-nav a,
  .global-nav .en {
    color: #111;
  }

  .global-nav .ja {
    color: #666;
  }

  .global-nav .btn-header-contact,
  .global-nav .btn-header-contact .en,
  .global-nav .btn-header-contact .ja {
    color: #fff;
  }

  .dropdown-menu {
    position: static;
    transform: none;
    display: flex !important;
    flex-direction: column;
    gap: 2px !important;
    opacity: 1;
    visibility: visible;
    box-shadow: none;
    background: transparent;
    margin-top: 10px;
    padding: 0 0 0 16px;
    min-width: 0;
    border-left: 2px solid #eee;
  }

  .dropdown-menu a {
    padding: 7px 0;
  }

  .dropdown-menu a:hover {
    background: transparent;
  }

  .dropdown-menu .ja {
    font-size: 0.8rem;
    color: #999;
  }

  /* First view: image first, CTA second */
  .fv-split {
    display: block;
    height: auto !important;
    min-height: 0;
    overflow: hidden;
  }

  .fv-visual-split {
    position: relative !important;
    inset: auto !important;
    display: flex;
    width: 100% !important;
    /* 2026-08-31 中村様のご要望でFVを縦に広げた。
       制約は「FV下のボタン3つが初回表示に収まるか」という縦方向の話なのに、
       従来は画面の横幅（768px/380px）で高さを切り替えていたため、
       背の低い端末ほど窮屈になっていた。画面の高さに追従させる。
       実測：ビューポート高690px→276px、844px→338px、SE(553px)→221px。
       dvh/svh はLINEアプリ内ブラウザが非対応のため vh を使う。 */
    height: clamp(220px, 40vh, 340px) !important;
    min-height: 0;
    padding: 0 !important;
    animation: none !important;
  }

  .fv-bg-video {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    object-fit: cover;
  }

  .video-placeholder {
    padding: 0 18px !important;
  }

  /* コピーは写真エリア（200px）の中央に置かれるが、下部にバッジ（43px）が
     重なるため、実際には下に寄って見える。コピーとバッジの間が0pxで、
     上には65px空いていた。
     親が align-items:center の flex なので、下マージンを入れると
     その半分だけコピーが上がる。60px入れて30px持ち上げる。 */
  .fv-visual-split .video-placeholder {
    margin-bottom: 60px;
  }

  .fv-title-sequence {
    height: 84px !important;
    margin: 0 !important;
  }

  .seq-line-a {
    font-size: clamp(1.12rem, 5.7vw, 1.42rem) !important;
    line-height: 1.35; /* 1.55 → 1.35。2行のコピーが間延びして見えたため */
    letter-spacing: 0.04em !important;
  }

  .seq-line-b {
    font-size: clamp(2.7rem, 14vw, 4rem) !important;
  }

  .fv-cta-wrapper {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 230px;
    overflow: visible;
    order: 3;
  }

  /* 動画→テキスト→ボタンの順に並び替え(hero-flowでラップした範囲のみ) */
  .hero-flow {
    display: flex;
    flex-direction: column;
  }

  .hero-flow .fv-split {
    display: contents;
  }

  .fv-visual-split {
    order: 1;
  }

  .lead-section {
    order: 2;
  }

  .fv-split .fv-cta,
  .fv-split .anim-slide-left {
    position: relative;
    inset: auto;
    /* 2026-08-31 中身は217pxしかないのに280pxを確保していたため、
       align-items:center により上下に31pxずつ空いていた。
       360×690での実測：280px→上の空き36px・3つ目のボタン下端710px（画面外）
                        230px→上の空き11px・3つ目のボタン下端685px（画面内） */
    min-height: 230px;
    padding: 4px 16px 16px; /* 2026-08-27 左右16px。上下も詰めてボタン3つを画面内に */
    transform: none !important;
    animation: none !important;
  }

  .fv-split .cta-banner h3 {
    /* 2026-08-27 3つ目のボタンを画面内に収めるため縮小（19.2px→16px、下24px→16px） */
    font-size: 0.875rem !important;
    margin-bottom: 14px !important;
  }

  /* 2026-08-27 モバイルの全幅ボタンは左右16pxで統一する。
     従来は 16 / 24 / 32 / 34px と4種類あり、縦に並んだときに
     端の位置が上から下へ4回ずれていた（中村様のご指摘）。
     余白はボタンの親ではなく、さらに上の階層が持っていた */
  .fv-contact-buttons,
  .strengths-actions,
  .cta-actions,
  .footer-btns {
    max-width: none;
    width: 100%;
    padding-inline: 0;
    margin-inline: 0;
  }



  .fv-contact-buttons {
    gap: 8px; /* 2026-08-27 ボタン3つを画面内に収めるため */
  }

  .fv-contact-buttons .btn-fv-base {
    min-height: 46px; /* 2026-08-27 ボタン3つを画面内に収めるため（タップ推奨44pxは確保） */
  }

  /* Lead */
  .lead-section {
    min-height: 0;
    /* 2026-08-27 中村様のご要望で縦を圧縮。
       上余白はバッジ(top:8px 高さ60px)を避ける最小値 */
    /* 2026-08-27 上下の余白を揃える（バッジは動画内に収まっているため上も20pxで足りる） */
    /* 下は赤セクションが続くため12pxに（上下を揃える必要はない） */
    padding: 20px var(--sp-side) 12px;
  }

  .lead-badges {
    /* 2026-08-27 動画内に配置（下端から17px浮かせる）。
       バッジ分の高さ(43px)がリード側の高さを消費しない */
    top: -60px;
    left: var(--sp-side);
    right: var(--sp-side);
    display: flex;
    justify-content: center;
    gap: 14px;
  }

  .lead-badges .fv-badge-img {
    width: auto;
    flex: 0 1 auto;
  }

  .fv-badge-img {
    max-width: 128px; /* 2026-08-27 縦を詰めるため縮小（60px高→43px高） */
  }

  .lead-container {
    display: block;
  }

  .lead-text-box,
  .lead-text-box p,
  /* 2026-08-31 中村様のご指摘でリード文が長くなったため、モバイルは一段小さくする。
     ここは 2026-08-27 に 15px/1.7 へ変更した箇所だが、直後の .lead-section p と
     下の .lead-highlight で 0.98rem/1.9 に上書きされており、その変更は効いていなかった。
     重複を消してこの1箇所に集約している。値を変えるときはここだけを触ること。
     実測(360px幅)：0.98rem/1.9 → 黒帯153px、0.88rem/1.7 → 黒帯137px。 */
  .lead-line1,
  .lead-section p,
  .lead-section .lead-highlight {
    font-size: 0.88rem;
    line-height: 1.7;
  }

  .lead-section p {
    letter-spacing: 0.035em;
  }

  /* 2026-08-27 モバイルは左揃え。1文が3行に自然折り返しされるため、
     中央揃えだと両端がギザギザになり視線の戻り位置が定まらない */
  .lead-text-box {
    text-align: left;
  }

  .lead-line1 {
    /* 2026-08-27 block だと必ず改行されるため inline に。
       モバイルは1文を一塊で流す */
    display: inline;
  }

  .lead-section .lead-highlight {
    /* 2026-08-27 モバイルは1文を一塊で流す（縦を圧縮するため） */
    display: inline;
    max-width: none;
    margin-top: 0;
  }

  .lead-section .lead-highlight::after {
    content: none;
  }

  /* 2026-08-27 モバイルの赤い下線を廃止。
     文章を一塊で流すようにしたため、下線が行の途中から始まる
     中途半端な線になっていた（PC版は2行目が独立した1行なので下線が成立する）。
     すぐ下に赤いセクションが始まるため、細い赤線と競合する点も考慮。 */
  .lead-highlight-line2 {
    display: inline;
  }

  .lead-highlight-line2::after {
    content: none;
  }

  .logo-slider {
    padding: 14px 0;
  }

  .slider-track h2 {
    font-size: 3.4rem;
    font-weight: 600;
    padding-right: 2rem;
  }

  /* Strengths */
  .strengths {
    padding: 48px 0 56px;
  }/* 2026-08-27 中央揃えに変更。他セクション（services / news / company）は
     すべて中央揃えで、strengths だけ左揃えで不統一だった。
     text-align: left !important は後続の調整を阻むため撤去 */
  .strengths .c-section-header {
    text-align: center;
  }

  .strengths .c-section-header__ja {
    font-size: clamp(1.35rem, 6.2vw, 1.7rem);
  }

  .strengths .text-center {
    margin-bottom: 36px !important;
    /* 見出しは中央、本文は左揃え（読みやすさを優先。他セクションと同じ考え方） */
    text-align: left;
    font-size: 0.94rem !important;
    line-height: 1.9 !important;
  }

  .strengths-grid {
    grid-template-columns: 1fr;
    gap: 46px;
  }

  .strength-item h3 {
    font-size: 1.18rem;
    margin-bottom: 12px;
  }

  .strength-item p {
    font-size: 0.9rem;
    line-height: 1.9;
  }

  /* 2026-08-27 番号と見出しを同じ行に並べる。
     どちらも display:block で幅いっぱいだったため2行に分かれていた */
  /* 2026-08-27 番号＋見出しを1行にまとめ、その行だけ中央揃えにする。
     grid だと本文まで巻き込むため、見出しに番号を inline で同居させる方式にした。
     本文は左揃えのまま（読みやすさを優先） */
  .strength-content {
    display: block;
    text-align: center;
  }

  .strength-content > p,
  .recruit-content .recruit-lead {
    font-size: 0.9375rem;   /* モバイル本文の基準15px */
  }

  .strength-content > p {
    text-align: left;
    /* 見出しを display:inline にしたため margin-bottom が効かない。
       本文側で見出しとの間隔を確保する（実測3pxしかなかった） */
    margin-top: 14px;
  }

  .strength-number {
    display: inline;
    margin-right: 10px;
  }

  .strength-content > h3 {
    display: inline;
  }

  .strength-number {
    position: static;
    /* 2026-08-27 見出しと同じ17.6pxに合わせる（従来28.8px）。
       太さも 900 → 700 に。20px未満で900は字が潰れるため */
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.6;
    color: var(--color-primary);
    opacity: 1;
    text-align: left;
    margin-bottom: 0;
  }

  .strength-content {
    padding-top: 0;
  }

  .strengths-actions {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 12px !important;
    margin-top: 40px !important;
  }

  .strengths-actions .btn-fv-base {
    max-width: 360px;
    margin-inline: auto;
  }

  /* 2026-08-27 モバイルでは赤い斜め装飾を非表示にする。
     360px幅では右端の一部しか残らず意図が伝わらないうえ、
     すぐ上の赤いボタン（押せる赤）と紛らわしいため。
     下は白背景のSERVICESが続くので、区切りは色の変化で成立している */
  .strengths-bottom-deco {
    display: none;
  }

  /* Services */
  .services {
    padding: 56px 0 32px;
  }

  .services .c-section-header {
    text-align: center !important;
  }

  .services-grid {
    grid-template-columns: 1fr !important;
    gap: 24px;
  }

  .service-card {
    width: 100%;
    min-width: 0;
    padding: 42px 18px 22px;
    border-radius: 14px;
  }

  .service-card .card-img {
    margin-bottom: 18px;
  }

  .service-card h3 {
    font-size: 1.18rem;
    margin-bottom: 10px;
  }

  .service-card p {
    font-size: 0.9rem;
    line-height: 1.85;
  }

  .service-card .c-btn-more {
    width: 100% !important;
  }

  /* Company */
  .company-section {
    /* 下は次のrecruit-sectionと同じ白背景で境界が見えないため詰める
       （同系色が続く境界のルール。2026-08-27） */
    padding: 32px 0 40px;
  }

  /* 2026-08-27 モバイルは display:contents で親を透過させ、
     見出し／写真／アコーディオン／ボタンを .container 直下の並び順として扱う。
     以前あった display:flex !important は、後から順序を変えられなくする原因だったため撤去 */
  .company-header {
    display: contents;
  }

  .company-header .c-section-header {
    margin-bottom: 0;
  }

  .company-content-wrapper {
    /* 2026-08-27 モバイルは写真をアコーディオンの上に出す。
       縦積みだと最初の項目から写真まで500px離れ、タップしても
       写真が切り替わったことに気づけなかったため（中村様のご指摘） */
    display: flex;
    flex-direction: column;
    /* PC横並び用の gap:80px が縦積みでも効き、写真の下が広すぎたため解除。
       間隔は .company-images の margin-bottom で制御する */
    gap: 0;
  }

  /* 2026-08-27 「会社概要を見る」ボタンをアコーディオンの下へ。
     中を見てから詳細ページへ進む流れにするため（中村様のご指摘）。
     ボタンは .company-header の中にあるので、display:contents で
     親を透過させ .container 直下の並び順として扱う */
  .company-section > .container {
    display: flex;
    flex-direction: column;
  }

  .company-section .c-section-header {
    order: 0;
    /* display:contents で親の margin-bottom が消えるため、ここで持たせる */
    margin-bottom: 24px;
  }

  .company-section .company-content-wrapper {
    order: 1;
  }

  .company-section .c-btn-more {
    order: 2;
    /* .container の gap:0 の影響で詰まるため、ここで間隔を確保 */
    margin-top: 36px;
    align-self: center;
  }

  .accordion-title .arrow {
    /* 見出し17.6pxに対して44pxは大きすぎたため縮小。
       行全体がタップ可能なので操作性は落ちない */
    width: 36px;
    height: 36px;
  }

  .company-accordion {
    width: 100%;
  }

  .accordion-title {
    padding: 20px 0;
    text-align: left;
  }

  .accordion-title h3 {
    min-width: 0;
    font-size: 1.05rem;
  }

  .accordion-title .arrow {
    /* 2026-08-27 見出し17.6pxに対して44pxは大きいため縮小。
       行全体がタップ可能なので操作性は落ちない */
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
  }

  .accordion-content {
    padding-left: 0;
    text-align: left;
    font-size: 0.88rem;
  }

  .company-images {
    /* 2026-08-27 アコーディオンより上に出す。縦積みだと最初の項目から
       写真まで500px離れ、タップしても切り替わりに気づけなかったため */
    order: -1;
    /* 親が縦方向のflexになったため、既定の flex:1 1 0% だと
       flex-basis:0 が height より優先されて高さが潰れる */
    flex: 0 0 auto;
    width: 100%;
    height: 200px;
    margin-top: 0;
    margin-bottom: 40px;
  }

  .stacked-image {
    display: none;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: none;
    border-radius: 14px;
  }

  .company-images .stacked-image.active {
    display: block;
    transform: none;
  }

  .company-images .stacked-image-logo.active {
    display: flex;
  }

  /* Recruit */
  .recruit-section {
    /* 上は company-section と同じ白背景のため詰める */
    padding: 50px 0 72px !important;
  }

  .recruit-box {
    display: block !important;
    height: auto !important;
    border-radius: 16px !important;
  }

  .recruit-content {
    width: 100%;
    padding: 48px 24px 40px;
    text-align: left;
  }

  .recruit-content .c-section-header {
    margin-bottom: 24px;
  }

  .recruit-content .c-section-header__ja {
    display: block !important;
  }

  .recruit-content .c-section-header__ja span {
    display: block;
    margin-top: 10px;
    padding: 0 !important;
    border: 0 !important;
    font-size: 0.88rem !important;
    line-height: 1.5 !important;
  }

  .recruit-content p {
    max-width: none;
    margin-bottom: 24px !important;
  }

  .recruit-content .c-btn-more {
    width: 100%;
    margin-top: 4px !important;
  }

  .recruit-marquee-wrapper {
    width: 100%;
    height: 250px;
    padding: 12px;
    gap: 8px;
  }

  .marquee-track {
    gap: 8px;
    padding-bottom: 8px;
  }

  .marquee-track img {
    height: 120px;
    border-radius: 6px;
  }

  /* Interview */
  .employee-interview {
    padding: 72px 0 !important;
  }

  .interview-header {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start !important;
    gap: 2px;
    margin-bottom: 28px;
  }

  .interview-header .c-section-header {
    margin-bottom: 0;
  }

  .interview-header .c-btn-more {
    margin-top: 0 !important;
  }

  .interview-carousel {
    margin-inline: calc(var(--sp-side) * -1);
    padding: 6px 0 18px;
    overflow-x: auto;
    scroll-padding-left: var(--sp-side);
  }

  .interview-track {
    gap: 16px;
    padding-left: var(--sp-side);
    padding-right: var(--sp-side);
    animation: none !important;
  }

  .interview-card {
    width: 76vw;
    min-width: min(76vw, 280px);
    max-width: 280px;
    scroll-snap-align: start;
  }

  .interview-card:hover,
  .interview-card.active-card,
  .clickable-interview:hover {
    transform: none;
  }

  .card-role {
    left: 10px;
    bottom: 12px;
  }

  .card-text h4 {
    font-size: 0.92rem;
  }

  /* News */
  .news {
    /* 下は bottom-cta と同じ白背景で境界が見えないため詰める
       （同系色が続く境界のルール。2026-08-27） */
    padding: 72px 0 18px;
  }

  .news-header-wrapper {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start !important;
    gap: 2px;
    margin-bottom: 28px !important;
  }

  .news-header-wrapper .c-btn-more {
    margin-top: 0;
  }

  /* Bottom CTA */
  .bottom-cta {
    padding: 72px 0;
  }

  .cta-banner-large {
    overflow: hidden;
    border-radius: 16px;
  }

  .cta-content {
    display: block;
  }

  .cta-left {
    width: 100%;
    height: 250px;
    background: linear-gradient(180deg, rgba(255,255,255,0.08), transparent);
    overflow: hidden;
  }

  .cta-person-img {
    left: 50%;
    bottom: 0;
    width: min(80%, 270px);
    max-height: 245px;
    object-fit: contain;
    transform: translateX(-50%);
  }

  .cta-right {
    padding: 34px 16px 38px; /* 2026-08-27 左右をサイト共通の16pxに */
    text-align: left;
  }

  .cta-right h2 {
    font-size: clamp(1.4rem, 7vw, 1.75rem);
    line-height: 1.5;
    margin-bottom: 18px;
  }

  .cta-sub {
    font-size: 0.86rem;
    line-height: 1.85;
    margin-bottom: 24px;
  }

  .cta-sub br {
    display: none;
  }

  .cta-actions {
    flex-direction: column;
    gap: 10px;
  }

  .btn-cta-dark,
  .btn-cta-primary {
    width: 100%;
    padding: 15px;
    /* 2026-08-27 求職者ボタンだけ border:2px があり、box-sizing:border-box でも
       高さに上下4px分が加算されて 60px / 56px と差が出ていた。
       企業ボタン側に透明な同幅の枠線を持たせて揃える */
    border: 2px solid transparent;
  }

  .btn-cta-phone {
    flex-wrap: wrap;
    gap: 2px 6px;
    padding: 12px 8px;
  }

  .btn-cta-phone .phone-icon,
  .btn-cta-phone .phone-number {
    margin-right: 0;
  }

  .btn-cta-phone .phone-number {
    font-size: clamp(1.25rem, 6vw, 1.55rem);
    white-space: nowrap;
  }

  .btn-cta-phone .phone-time {
    flex-basis: 100%;
  }

  .cta-footer-strip {
    padding: 13px 18px;
    font-size: 0.72rem;
  }

  /* Footer */
  .global-footer {
    padding-top: 58px;
  }

  .footer-inner {
    display: block;
    margin-bottom: 44px;
    text-align: left;
  }

  .footer-left {
    width: 100%;
    margin-bottom: 44px;
  }

  .footer-logo-box {
    margin-bottom: 16px !important;
  }

  .footer-info p {
    margin-bottom: 22px;
  }

  .footer-tel {
    display: inline-block;
    font-size: clamp(1.45rem, 7vw, 1.8rem);
    white-space: nowrap;
  }

  .footer-sitemap {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 34px 18px;
    margin-top: 0;
    text-align: left;
  }

  .sitemap-col h4 {
    margin-bottom: 15px;
    font-size: 0.92rem;
  }

  .sitemap-col li {
    margin-bottom: 11px;
  }

  .sitemap-col a {
    font-size: 0.8rem;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 0 26px;
    font-size: 0.75rem;
  }.page-top-btn,
  .page-top-btn.show {
    right: 12px;
    bottom: 14px;
    width: 42px;
    height: 42px;
  }

  .page-top-btn svg {
    width: 20px;
    height: 20px;
  }

  .watermark-right::after,
  .watermark-left::after {
    width: 110vw;
    height: 110vw;
    opacity: 0.025;
  }
}

@media (max-width: 380px) {
  :root {
    --sp-side: 16px;
  }

  .c-section-header__ja {
    font-size: 1.35rem;
  }

  .lead-section {
    padding-top: 20px;
  }

  .footer-sitemap {
    grid-template-columns: 1fr;
  }
}

/* 8. 社員インタビュー */
.employee-interview {
  padding: 80px 0;
  background-color: #f0f2f5; /* #f8f9faから変更しグレー色を統一 */
  overflow: hidden;
}

.interview-header {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 50px;
  position: relative;
}.interview-carousel {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  padding: 40px 0; /* 左右の余白を削除してコンテナにぴったり合わせる */
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
}

.interview-track {
  display: flex;
  gap: 30px;
  width: max-content;
  padding-left: 30px; /* シームレスループ用のパディング */
  animation: scroll-left-marquee 40s linear infinite;
}

.interview-track:hover {
  animation-play-state: paused; /* ホバー時は一時停止して読みやすくする */
}

@keyframes scroll-left-marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.interview-card {
  min-width: 260px;
  max-width: 260px;
  flex: 0 0 auto;
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  cursor: pointer;
}

.interview-card:hover, .interview-card.active-card {
  transform: scale(1.15); /* Enlarge on hover or if active class */
  z-index: 10;
}

.card-img-wrap {
  position: relative;
  border-radius: 8px;
  overflow: visible; /* to allow badge to stick out */
  margin-bottom: 20px;
  /* 白いフチ（padding, background, border）を削除して全面画像化 */
}

.card-img-wrap img {
  width: 100%;
  aspect-ratio: 3 / 4; /* ポートレート（縦長）の比率に変更 */
  object-fit: cover;
  object-position: top center; /* 頭が切れないように上部を基準に表示 */
  border-radius: 12px; /* 統一した美しい角丸 */
  border: none; /* 古い黒枠を削除 */
  box-shadow: 0 10px 30px rgba(0,0,0,0.08); /* プレミアムな薄い影 */
}


.card-role {
  position: absolute;
  bottom: 25px;
  left: -15px; /* もう少し左に突き出すように -5px から -15px へ変更 */
  background-color: #111; /* 通常時は黒 */
  color: #fff;
  padding: 5px 15px;
  font-size: 0.75rem;
  font-weight: bold;
  border-radius: 20px;
  z-index: 2;
  transition: background-color 0.3s ease; /* ホバー時のアニメーション */
}

/* カードにホバーした際に役職バッジを赤にする */
.interview-card:hover .card-role,
.interview-card.active-card .card-role {
  background-color: var(--color-primary);
}

.card-text h4 {
  font-size: 0.85rem; /* もう少し小さく */
  letter-spacing: 0.1em; /* 文字間隔をあける */
  line-height: 1.6;
  margin-bottom: 10px;
  font-weight: bold;
  color: #333;
  /* 2行目で「...」として3行目にいかないようにする設定 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-text p {
  font-size: 0.75rem;
  color: #888;
}

/* 9. News */
.news {
  padding: 80px 0;
  background: #fff; /* White background matching reference */
}



.news-list {
  list-style: none;
  max-width: 1200px; /* 全幅を1200pxに統一 */
  margin: 0 auto;
}

.news-list li {
  display: flex;
  padding: 30px 0;
  border-bottom: 1px dashed #ccc;
  gap: 30px;
  align-items: flex-start;
}

.news-list li:first-child {
  border-top: 1px dashed #ccc; /* top border for first item */
}

.news-thumb {
  width: 200px;
  height: 120px;
  background-size: cover;
  background-position: center;
  border-radius: 12px; /* 上部と合わせた美しい角丸 */
  box-shadow: 0 10px 30px rgba(0,0,0,0.08); /* プレミアムな薄い影 */
  flex-shrink: 0; /* prevent squishing */
}

.news-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.news-content .date {
  font-size: 0.85rem;
  color: #666;
}

.news-title {
  font-size: 1.05rem;
  font-weight: bold;
  color: #111;
  line-height: 1.4;
}

.news-desc {
  font-size: 0.85rem;
  color: #666;
  line-height: 1.6;
}

/* お知らせの記事全体をリンクにする（WordPressから生成）。
   li は既に flex なので、a 側で同じ並びを持たせて中身を包む。 */
.news-link {
  display: flex;
  gap: 30px;
  align-items: flex-start;
  flex: 1;
  color: inherit;
  text-decoration: none;
}

.news-link:hover .news-title {
  color: var(--color-primary);
}/* 10. CTA (bottom) */
.bottom-cta {
  padding: 100px 0;
  background-color: #fff;
} /* 画像が飛び出す分の余白を上部に確保 */



.cta-banner-large {
  background-color: var(--color-primary);
  border-radius: 12px;
  overflow: visible; /* 画像が飛び出せるように変更 */
  position: relative;
  display: flex;
  flex-direction: column;
}

.cta-content {
  display: flex;
  align-items: stretch;
  position: relative; /* 画像の絶対配置の基準とする */
}

.cta-left {
  flex: 0 0 35%; /* 右側のテキストエリアを広げるため幅を縮小 */
  position: relative;
}

.cta-person-img {
  position: absolute;
  bottom: 0; 
  left: 30px; /* 女性をもっと左に寄せる */
  width: 90%; /* 親要素(35%)に対しての割合を増やし、見かけのサイズを維持 */
  height: auto;
  z-index: 10;
}

.cta-right {
  flex: 1;
  /* 右余白80pxは広い画面用の値。774pxでは文字の枠が387pxしかないのに
     右に80px空いたままで、見出しが4行に折れていた。
     1440px以上では80pxのまま（5.6vw が 80px を超えるため）、
     それより狭いところだけ画面幅に追従させる。
       774px → 43px（文字の枠が387px→424pxに広がる）
      1440px → 80px（従来どおり）
     左側は画像があるので0のまま。 */
  padding: 80px clamp(24px, 5.6vw, 80px) 80px 0;
  color: #fff;
  position: relative;
  z-index: 2;
}

.cta-right h2 {
  font-size: 2.5rem;
  font-weight: bold;
  line-height: 1.3;
  margin-bottom: 20px;
}

/* 1097px未満は幅が足りず<br>による強制改行が不自然になるため、自然な折り返しに切り替える */
@media (max-width: 1097px) {
  .cta-right h2 br {
    display: none;
  }
}

/* 480px未満はさらに単語の途中で折り返ってしまうため、専用の改行位置を指定する */
@media (max-width: 480px) {
  .cta-right h2 br.sp-only-narrow {
    display: inline;
  }
}

.cta-sub {
  font-size: 0.95rem;
  line-height: 1.6;
  font-weight: bold;
  margin-bottom: 30px;
}

.cta-actions {
  display: flex;
  gap: 15px;
  margin-bottom: 15px;
}

.btn-cta-dark {
  flex: 1;
  background-color: #111;
  color: #fff;
  text-align: center;
  padding: 20px;
  font-weight: bold;
  text-decoration: none;
  font-size: 1rem;
  border-radius: 4px;
  transition: all 0.3s ease;
}
.btn-cta-dark:hover {
  background-color: #fff;
  color: #111;
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}

.btn-cta-primary {
  flex: 1;
  background-color: var(--color-primary);
  color: #fff;
  border: 2px solid #fff;
  text-align: center;
  padding: 18px; /* border分の調整 */
  font-weight: bold;
  text-decoration: none;
  font-size: 1rem;
  border-radius: 4px;
  transition: all 0.3s ease;
}
.btn-cta-primary:hover {
  background-color: #fff;
  color: var(--color-primary);
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}

.btn-cta-phone {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  border: 2px solid #fff;
  color: #111;
  text-decoration: none;
  text-align: center;
  padding: 13px; /* border分調整 */
  border-radius: 4px;
  margin-bottom: 15px;
  transition: all 0.3s ease;
}
.btn-cta-phone:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}

.btn-cta-phone .phone-icon {
  font-size: 1.2rem;
  margin-right: 10px;
}

.btn-cta-phone .phone-number {
  font-size: 1.6rem;
  font-weight: bold;
  margin-right: 15px;
}

.btn-cta-phone .phone-time {
  /* 受付時間の案内なので補足の基準12px（2026-09-01 中村様のご希望で12.5→12px） */
  font-size: 0.75rem;
}

.cta-small-link {
  font-size: 0.85rem;
  font-weight: bold;
}
.cta-small-link a {
  color: #fff;
  text-decoration: none;
  display: inline-block;
  transition: all 0.3s ease;
}
.cta-small-link a:hover {
  color: #eaeaea;
  transform: translateY(-1px);
}

.cta-footer-strip {
  background-color: #222; /* #3b4248から黒へ変更しフッターへ自然に繋ぐ */
  color: #fff;
  padding: 15px 30px;
  font-size: 0.85rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  border-radius: 0 0 12px 12px; /* 下側の角丸を明示的に指定 */
  position: relative;
  z-index: 11;
}

.cta-footer-strip .red-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background-color: var(--color-primary);
  border-radius: 50%;
  margin-right: 10px;
}

/* 11. Footer */
.global-footer {
  padding: 80px 0 0;
  background-color: var(--header-bg); /* #111111 */
  color: #fff;
}
.footer-inner {
  display: flex;
  justify-content: space-between;
  margin-bottom: 60px;
}
.footer-left {
  flex: 0 0 350px;
}

.footer-info h2 {
  font-size: 2rem;
  margin-bottom: 20px;
  color: #fff;
}
.footer-info p {
  color: #aaa;
  font-weight: 400;
  font-size: 0.95rem;
  margin-bottom: 30px;
  line-height: 1.8;
}
.footer-tel {
  font-size: 2rem;
  color: #fff; /* グリーンのアクセントをやめ、白文字に統一 */
}
.footer-time {
  font-size: 0.85rem;
}
.footer-btns {
  display: flex;
  flex-direction: column; /* ボタンを縦積みに */
  /* 15px だったが、HTML側のインライン指定 gap:8px が勝っていた。
     インラインを外すにあたり、実際に表示されていた 8px に合わせる。 */
  gap: 8px;
  max-width: 380px; /* フッターが縦積みになる幅で、ボタンが間延びしないように制限 */
}
.btn-footer-red {
  display: block;
  padding: 16px 30px; /* borderを取り除いた分、高さを維持 */
  border: none;
  background-color: var(--color-primary);
  color: #fff;
  border-radius: 50px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  transition: all 0.3s;
}
.btn-footer-red:hover {
  background-color: #fff;
  color: var(--color-primary);
}

.btn-footer-black {
  display: block;
  padding: 15px 30px;
  border: 1px solid #fff;
  background-color: #111;
  color: #fff;
  border-radius: 50px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  transition: all 0.3s;
}
.btn-footer-black:hover {
  background-color: #fff;
  color: #111;
}

.btn-footer-text {
  display: inline-block;
  padding: 10px;
  background-color: transparent;
  color: #fff;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  transition: all 0.3s;
}
.btn-footer-text:hover {
  color: #eaeaea; /* ホバーで少しだけ暗くする */
  transform: translateY(-1px);
  text-decoration: none; /* 下線なし */
}.footer-sitemap {
  display: flex;
  gap: 80px;
  flex: 1;
  justify-content: flex-end;
}
.sitemap-col h4 {
  margin-bottom: 25px;
  color: #fff;
  font-size: 1rem;
}
.sitemap-col h4 a {
  color: #fff;
  text-decoration: none;
}
.sitemap-col ul {
  list-style: none;
}
.sitemap-col li {
  margin-bottom: 15px; /* 行間をゆったりと */
}
.sitemap-col a {
  color: #aaa;
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.3s;
}
.sitemap-col a:hover {
  color: #fff;
}

/* Footer Bottom (Cookie & Copyright) */
/* 2026-08-29 ライン下は Cookie告知・許可番号・著作権。
   いずれも能動的に読まれる情報ではないため、フッターの主役
   （メニュー・電話番号）を引き立てるようサイトの補足基準12pxに下げる。
   小さくするぶん、色のコントラストは4.5:1以上を確保したまま。 */
.footer-bottom {
  border-top: 1px solid #333;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  font-size: 12px;
}
.cookie-text {
  color: #aaa;
}
/* 2026-08-29 Cookie告知内のリンク。指定がなくブラウザ既定の青
   （rgb(0,0,238)）が出ており、黒背景で浮いていた。 */
.cookie-text a {
  color: #ccc;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .25s ease;
}
.cookie-text a:hover {
  color: #fff;
}
/* 2026-08-29 有料職業紹介事業許可番号。人材業界の慣例として
   全ページのフッターに出すが、Cookie告知より目立っていたため
   同じ明度に揃える（インラインの opacity:0.55 は各HTMLで削除済み）。 */
.footer-license {
  color: #aaa;
}
/* 2026-08-29 #666 は背景#111に対してコントラスト3.29:1で、
   読みやすさの基準4.5:1を下回っていた。#888（4.9:1）に。
   Cookie告知・許可番号の#aaa より一段控えめにして階層は保つ。 */
.footer-copyright {
  color: #888;
}/* Clickable Interview Cards */
.clickable-interview {
  text-decoration: none;
  color: inherit;
  display: block;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.clickable-interview:hover {
  transform: translateY(-5px);
  /* box-shadow: 0 10px 30px rgba(0,0,0,0.1); 影を削除 */
}/* Responsive basics */
@media (max-width: 768px) {
  .header-inner, .footer-inner {
    flex-direction: column;
    text-align: center;
  }
  .global-nav ul {
    flex-direction: column;
    text-align: center;
    gap: 10px;
    margin: 20px 0;
  }
  .fv {
    flex-direction: column;
    height: auto;
  }
  .fv-visual, .fv-cta {
    flex: none;
    width: 100%;
  }
  .fv-visual {
    padding: 60px 20px;
  }
  .video-placeholder h2 {
    font-size: 3rem;
  }
  .slider-track h2 {
    font-size: 3rem;
  }
  .strengths-grid {
    grid-template-columns: 1fr;
  }.news-list li {
    flex-direction: column;
    align-items: flex-start;
  }
  .news-content {
    flex-direction: column;
    align-items: flex-start;
  }
  .cta-actions {
    flex-direction: column;
  }
  .footer-sitemap {
    flex-direction: column;
    gap: 30px;
    margin-top: 30px;
  }
}

/* --- Watermark Decor --- */
.watermark-container {
  position: relative;
  z-index: 0;
  overflow: hidden;
}
.watermark-container > .container{
  position: relative;
  z-index: 1;
}
.watermark-right::after,
.watermark-left::after {
  content: '';
  position: absolute;
  width: 60vw;
  max-width: 800px;
  height: 60vw;
  max-height: 800px;
  background-image: url('../image/00-common/rogo02.webp');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  opacity: 0.04;
  z-index: -1;
  pointer-events: auto;
}
.watermark-right::after {
  top: 50%;
  right: -15%;
  transform: translateY(-50%) rotate(15deg);
}
.watermark-left::after {
  top: 50%;
  left: -15%;
  transform: translateY(-50%) rotate(-15deg);
}


/* --- Page Top Button --- */
.page-top-btn {
  position: fixed;
  bottom: 30px;
  right: 20px;
  width: 50px;
  height: 50px;
  background: var(--color-primary);
  color: #fff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  font-size: 24px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  transition: all 0.3s ease;
  z-index: 999;
  opacity: 1;
  pointer-events: auto;
}

.page-top-btn.show {
  bottom: 30px;
  opacity: 1;
  pointer-events: auto;
}

.page-top-btn:hover {
  background: #c00000;
  transform: translateY(-3px);
  box-shadow: 0 6px 15px rgba(0,0,0,0.3);
}

.page-top-btn svg {
  width: 24px;
  height: 24px;
}

/* --- Hamburger Menu (Mobile Only) --- */
.hamburger {
  display: none;
  width: 40px;
  height: 40px;
  /* 2026-08-31 ヘッダーの白い斜め装飾(.header-inner::before)の右端は常に x=600px 固定のため、
     アイコンの背景は画面幅で変わる。実測：〜360px=全面白／375〜660px=斜めが横切る／700px〜=全面黒。
     単色の線ではどの値でも必ずどこかで消えるので、ヘッダーと同じ色の下地を敷いて背景を固定する。
     黒帯の上では同化して線だけが見え、白い部分では通常のメニューボタンとして成立する。 */
  background: #fff;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  position: relative;
  z-index: 1000;
}
.hamburger span {
  display: block;
  position: absolute;
  height: 3px;
  width: 25px;
  /* 2026-08-31 下地を白、線を黒に反転（えりさんのご指示）。 */
  background: var(--header-bg);
  border-radius: 3px;
  left: 50%;
  transform: translateX(-50%);
  transition: all 0.3s ease;
}
.hamburger span:nth-child(1) { top: 10px; }
.hamburger span:nth-child(2) { top: 18px; }
.hamburger span:nth-child(3) { top: 26px; }

/* Hamburger Active State */
.hamburger.is-active span:nth-child(1) {
  top: 18px;
  transform: translateX(-50%) rotate(45deg);
}
.hamburger.is-active span:nth-child(2) {
  opacity: 0;
}
.hamburger.is-active span:nth-child(3) {
  top: 18px;
  transform: translateX(-50%) rotate(-45deg);
}

@media (max-width: 1300px) {
  /* Show hamburger */
  .hamburger {
    display: block;
    margin-left: auto;
  }

  /* Hide nav by default, make it a full screen menu */
  .global-nav {
    position: fixed;
    top: var(--header-h);
    left: 0;
    width: 100%;
    height: calc(100dvh - var(--header-h));
    background: rgba(255, 255, 255, 0.98);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
    z-index: 999;
  }

  .global-nav.is-active {
    opacity: 1;
    pointer-events: auto;
  }

  .global-nav ul {
    flex-direction: column;
    align-items: flex-start !important;
    text-align: left !important;
    padding-left: 32px !important;
    padding-top: 28px;
    gap: 18px;
    margin: 0;
    width: 100%;
  }

  .global-nav li {
    width: 100%;
  }

  .nav-home-item {
    display: block;
  }

  .nav-contact-item {
    margin-left: 0 !important;
  }

  .global-nav a,
  .global-nav .en {
    color: #111;
  }

  .global-nav .ja {
    color: #666;
  }

  .global-nav ul > li > a:not(.btn-header-contact) {
    align-items: flex-start !important;
  }

  .global-nav .btn-header-contact,
  .global-nav .btn-header-contact .en,
  .global-nav .btn-header-contact .ja {
    color: #fff;
  }

  .global-nav .btn-header-contact {
    display: inline-flex;
    width: fit-content;
    padding: 10px 28px;
  }

  .global-nav .btn-header-contact:hover {
    background-color: var(--color-primary);
    color: #fff !important;
  }

  .global-nav .btn-header-contact:hover .ja {
    color: #fff;
  }

  .dropdown-menu {
    position: static;
    transform: none;
    display: flex !important;
    flex-direction: column;
    gap: 2px !important;
    opacity: 1;
    visibility: visible;
    box-shadow: none;
    background: transparent;
    margin-top: 10px;
    padding: 0 0 0 16px;
    min-width: 0;
    border-left: 2px solid #eee;
  }

  .dropdown-menu a {
    padding: 7px 0;
  }

  .dropdown-menu a:hover {
    background: transparent;
  }

  .dropdown-menu .ja {
    font-size: 0.8rem;
    color: #999;
  }

  .header-inner {
    justify-content: space-between;
    padding: 10px 20px;
  }
}

/* --- Mobile Responsive Rules (< 768px) --- */
@media (max-width: 768px) {.seq-line-b {
    font-size: 3rem !important; /* Make myteams huge text smaller on mobile */
  }
  .btn-fv-base {
    padding: 15px 20px;
    font-size: 1rem;
    width: 100%;
    text-align: center;
  }

  /* 3. News Section */
  .news-list {
    flex-direction: column;
    align-items: flex-start;
  }.interview-card {
    width: 100%;
  }

  /* 7. Footer */
  .footer-inner {
    flex-direction: column;
    text-align: center;
  }
  .footer-left{
    width: 100%;
    margin-bottom: 20px;
  }
  .footer-sitemap {
    justify-content: center;
    flex-direction: column;
    gap: 15px;
  }
}

/* Keep the final mobile cascade deterministic after legacy responsive rules. */
@media (max-width: 768px) {
  .header-inner {
    height: 68px;
    min-height: 68px;
    padding: 8px 14px !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    text-align: left !important;
  }

  .global-nav {
    top: var(--header-h);
    height: calc(100dvh - var(--header-h));
    background: rgba(255, 255, 255, 0.98);
  }

  .global-nav a,
  .global-nav .en {
    color: #111;
  }

  .global-nav .ja {
    color: #666;
  }

  .global-nav .btn-header-contact,
  .global-nav .btn-header-contact .en,
  .global-nav .btn-header-contact .ja {
    color: #fff;
  }

  .footer-inner {
    display: block;
    text-align: left;
  }

  .footer-sitemap {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 34px 18px;
    margin-top: 0;
    text-align: left;
  }
}

/* フッターは768pxより広い範囲(〜1000px)でも列が狭くなり文字が縦割れするため、
   ここでモバイル向けレイアウトへの切り替えを早める */
@media (max-width: 1000px) {
  .global-footer {
    padding-top: 58px;
  }

  .footer-inner {
    display: block;
    margin-bottom: 44px;
    text-align: left;
  }

  .footer-left {
    width: 100%;
    margin-bottom: 44px;
  }

  .footer-logo-box {
    margin-bottom: 16px !important;
  }

  .footer-info p {
    margin-bottom: 22px;
  }

  .footer-tel {
    display: inline-block;
    font-size: clamp(1.45rem, 7vw, 1.8rem);
    white-space: nowrap;
  }

  .footer-sitemap {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 34px 18px;
    margin-top: 0;
    text-align: left;
  }

  .sitemap-col h4 {
    margin-bottom: 15px;
    font-size: 0.92rem;
  }

  .sitemap-col li {
    margin-bottom: 11px;
  }

  .sitemap-col a {
    font-size: 0.8rem;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 0 26px;
    font-size: 0.75rem;
  }}

@media (max-width: 380px) {
  .footer-sitemap {
    grid-template-columns: 1fr;
  }
}

/* Final overrides for sections whose desktop definitions appear later in this file. */
@media (max-width: 768px) {
  .employee-interview {
    padding: 72px 0 !important;
  }

  .interview-header {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start !important;
    gap: 2px;
    margin-bottom: 28px;
  }

  .interview-header .c-section-header {
    margin-bottom: 0;
  }

  .interview-header .c-btn-more {
    position: static;
    margin-top: 0 !important;
  }

  .interview-carousel {
    margin-inline: calc(var(--sp-side) * -1);
    padding: 6px 0 18px;
    overflow-x: auto;
    scroll-padding-left: var(--sp-side);
  }

  .interview-track {
    gap: 16px;
    padding: 0 var(--sp-side);
    animation: none !important;
  }

  .interview-card {
    width: 76vw;
    min-width: min(76vw, 280px);
    max-width: 280px;
    scroll-snap-align: start;
  }

  .interview-card:hover,
  .interview-card.active-card,
  .clickable-interview:hover {
    transform: none;
  }

  .card-role {
    left: 10px;
    bottom: 12px;
  }

  .card-text h4 {
    font-size: 0.92rem;
  }

  .news {
    /* 下は bottom-cta と同じ白背景で境界が見えないため詰める
       （同系色が続く境界のルール。2026-08-27） */
    padding: 72px 0 18px;
  }

  .news-header-wrapper {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start !important;
    gap: 2px;
    margin-bottom: 28px !important;
  }

  /* 2026-09-05 2列に分けるのは li ではなく .news-link。
     JSが作るHTMLは li > a.news-link > (.news-thumb + .news-content) の3層で、
     li の子は .news-link 1つだけ。li に grid を掛けると .news-link が
     1列目（96px）に押し込まれ、本文の幅がほぼ0になって1文字ずつ改行される。 */
  .news-list li {
    display: block;
    padding: 22px 0;
  }

  .news-link {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
  }

  .news-thumb {
    width: 96px;
    height: 76px;
    border-radius: 8px;
  }

  .news-content {
    min-width: 0;
    gap: 5px;
  }

  .news-content .date {
    font-size: 0.75rem;
  }

  .news-title {
    font-size: 0.9rem;
    line-height: 1.55;
  }

  .news-desc {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 0.75rem;
    line-height: 1.6;
  }

  .bottom-cta {
    padding: 72px 0;
  }

  .cta-banner-large {
    display: block;
    overflow: hidden;
    border-radius: 16px;
  }

  .cta-content {
    display: grid;
    grid-template-columns: 108px minmax(0, 1fr);
    column-gap: 12px;
    align-items: center;
    padding: 22px 20px 34px;
  }

  .cta-left {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    height: auto;
    flex: none;
    background: none;
    overflow: visible;
  }

  .cta-person-img {
    position: static;
    left: auto;
    bottom: auto;
    width: 100%;
    max-height: none;
    object-fit: contain;
    transform: none;
    display: block;
  }

  .cta-right {
    display: contents;
  }

  .cta-right h2 {
    grid-column: 2;
    grid-row: 1;
    font-size: clamp(0.95rem, 4.4vw, 1.15rem);
    line-height: 1.45;
    margin-bottom: 0;
    text-align: left;
  }

  .cta-sub,
  .cta-actions,
  .btn-cta-phone,
  .cta-small-link {
    grid-column: 1 / -1;
  }

  .cta-sub {
    margin-top: 18px;
    text-align: left;
  }

  .cta-sub {
    font-size: 0.86rem;
    line-height: 1.85;
    margin-bottom: 24px;
  }

  .cta-sub br {
    display: none;
  }

  .cta-actions {
    flex-direction: column;
    gap: 10px;
  }

  .btn-cta-dark,
  .btn-cta-primary {
    width: 100%;
    padding: 15px;
  }

  .btn-cta-phone {
    flex-wrap: wrap;
    gap: 2px 6px;
    padding: 12px 8px;
  }

  .btn-cta-phone .phone-icon,
  .btn-cta-phone .phone-number {
    margin-right: 0;
  }

  .btn-cta-phone .phone-number {
    font-size: clamp(1.25rem, 6vw, 1.55rem);
    white-space: nowrap;
  }

  .btn-cta-phone .phone-time {
    flex-basis: 100%;
  }

  .cta-footer-strip {
    padding: 13px 18px;
    font-size: 0.72rem;
  }

  .global-footer {
    padding-top: 58px;
  }

  .footer-inner {
    display: block;
    margin-bottom: 44px;
    text-align: left;
  }

  .footer-left {
    width: 100%;
    margin-bottom: 44px;
  }

  .footer-logo-box {
    margin-bottom: 16px !important;
  }

  .footer-info p {
    margin-bottom: 22px;
  }

  .footer-tel {
    display: inline-block;
    font-size: clamp(1.45rem, 7vw, 1.8rem);
    white-space: nowrap;
  }

  .footer-sitemap {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 34px 18px;
    margin-top: 0;
    text-align: left;
  }

  .sitemap-col h4 {
    margin-bottom: 15px;
    font-size: 0.92rem;
  }

  .sitemap-col li {
    margin-bottom: 11px;
  }

  .sitemap-col a {
    font-size: 0.8rem;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 0 26px;
    font-size: 0.75rem;
  }.page-top-btn,
  .page-top-btn.show {
    right: 12px;
    bottom: 14px;
    width: 42px;
    height: 42px;
  }
}

@media (max-width: 380px) {
  /* 2026-09-05 li ではなく .news-link に掛ける。理由は 768px 側のコメント参照 */
  .news-link {
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 12px;
  }

  .news-thumb {
    width: 82px;
    height: 68px;
  }

  .footer-sitemap {
    grid-template-columns: 1fr;
  }
}

/* ==================================================
   CTA（モバイル微調整）
   ================================================== */
@media (max-width: 768px) {
  .cta-sub {
    font-weight: 400;
  }
}

@media (max-width: 380px) {
  /* 狭い画面では女性を細めにして見出しの折り返しを整える */
  .cta-content {
    grid-template-columns: 96px minmax(0, 1fr);
    column-gap: 10px;
    padding: 20px 16px 30px;
  }
  .cta-right h2 {
    font-size: 0.92rem;
    line-height: 1.5;
  }
}

/* ==================================================
   セクション見出し下の「もっと見る」ボタン（モバイル）
   補助導線なので小さく・右寄せにする
   ================================================== */
@media (max-width: 768px) {
  .c-btn-more {
    /* 2026-08-27 補助導線として小さくする方針は維持しつつ、下げすぎを是正。
       従来: 高さ31px / 文字10.88px（補足基準12px・タップ推奨44pxを下回る）
       今回: 高さ40px / 文字13px */
    min-height: 40px;
    padding: 9px 18px;
    font-size: 0.8125rem;
  }
  /* 上の .c-btn-more と並ぶため、同じ高さ(41px)に揃える。
     枠が2pxあるぶん padding を1px減らす。 */
  .accordion-more-link {
    min-height: 40px;
    padding: 8px 18px;
    font-size: 0.8125rem;
  }
  .c-btn-more .arrow {
    margin-left: 7px;
  }
  .interview-header .c-section-header,
  .news-header-wrapper .c-section-header,
  .company-header .c-section-header {
    width: 100%;
  }
  /* 2026-08-27 モバイルでは .company-header を display:contents にして
     ボタンをアコーディオンの下へ動かしているため、この指定は不要。
     margin-top:10px !important が後続の調整を阻んでいたため撤去した */

  /* カード群の下に置く一覧リンク（モバイルのみ） */
  .section-more-sp {
    display: flex !important;
    justify-content: center;
    margin-top: 24px;
  }
}

/* ==================================================
   モバイル フォントサイズの基準（全ページ共通）
   セクション見出し 21.6px / カード見出し 17.6px
   本文 15px / 補足 12px
   ※数字の強調・MVVコピー・CTA見出しは意図的に別サイズのため対象外
   ================================================== */
@media (max-width: 768px) {
  /* --- セクション見出し --- */
  .c-section-header__ja,
  .lp-reasons-title .title-main,
  .lp-area-heading,
  .lp-comparison-title .title-large,
  .lp-pain-top-heading {
    font-size: 1.35rem;
  }

  /* --- カード見出し --- */
  .strength-item h3,
  .service-card h3,
  .accordion-title h3,
  .biz-feature-text h3,
  .biz-demo-title,
  .biz-flow-step h3,
  .reason-card-title,
  .dorm-box-title,
  .job-card-title,
  .pain-img-title,
  .zigzag-title,
  .step-v-title,
  .location-heading-ja {
    font-size: 1.1rem;
  }

  /* --- 本文 --- */
  .strength-item p,
  .service-card p,
  .accordion-content,
  .biz-feature-text p,
  .biz-trust-desc,
  /* 2026-09-01 モバイル本文の基準15pxに揃えた（旧0.94rem=15.04px） */
  .biz-flow-step p,
  .reason-card-desc,
  .zigzag-text,
  .voice-text,
  .lp-area-desc,
  .philosophy-body,
  .message-body {
    font-size: 0.94rem;
  }

  /* --- 補足テキスト --- */
  .news-desc,
  .interview-card .card-text p,
  .voice-area,
  .biz-demo-legend li {
    font-size: 0.75rem;
  }

  /* ページ個別指定を上書きしてセクション見出しを統一 */
  .strengths .c-section-header__ja,
  .lp-dorm-env-section .c-section-header__ja,
  .business-main .c-section-header__ja {
    font-size: 1.35rem;
  }

  /* lower.css の個別指定より詳細度を上げてカード見出しを統一 */
  .lp-steps-section .lp-step-v-text .step-v-title {
    /* 2026-08-27 横並び化に伴い、見出しを1行に収めるため縮小 */
    font-size: 0.95rem;
  }
}

/* RECRUITセクションのリード文の改行。
   「「スタートアップ」「人材業界」「稼ぎたい」」の描画幅は352px。
   枠は 950px で368px、900px で343px と縮むため、950px未満では
   前半が折り返し、この改行のせいで「たい」だけが2行目に取り残される。
   枠が足りる950px以上でだけ改行する。
   （元は pc-only で768px以下だけ消していたが、769〜949pxが抜けていた） */
@media (max-width: 949px) {
  br.br-wide {
    display: none;
  }
}

/* ==================================================
   ヘッダー・フッターの共通部分（2026-08-31）
   もとはHTML側に style="..." で直接書かれており、
   12ページ×8箇所＝96箇所に同じ内容が重複していた。
   クラスは既にあったので、新しいクラスは足さずにここへ集約する。
   ================================================== */

/* ヘッダーのロゴ画像。2枚を隙間なく並べる */
.logo .logo-title img {
  max-height: 45px;
  width: auto;
  vertical-align: middle;
}
.logo .logo-title img:first-child {
  margin-right: -10px;
}

/* フッターのロゴ。白地の箱に載せる */
.footer-logo-box {
  background: #fff;
  padding: 10px 20px;
  border-radius: 8px;
  display: inline-block;
  margin-bottom: 20px;
}
.footer-logo-box img {
  max-height: 40px;
  width: auto;
  vertical-align: middle;
}
.footer-logo-box img:first-child {
  margin-right: -8px;
}

/* フッター最下部の注記 */
.footer-disclaimer {
  text-align: right;
  padding-bottom: 15px;
}
.footer-disclaimer p {
  /* 2026-09-03 11px → 12px。
     中村様と決めた「補足・注記は12px」の対象そのもの。
     知らない番号からの着信を調べに来た求職者が読む文字で、
     11px・グレー・フッター最下部と読みにくい条件が重なっていた。 */
  font-size: 12px;
  color: #aaa;
  margin: 0;
  line-height: 1.6;
}
/* 12pxにした結果、360pxで「06-6450-／5120」のように番号が行をまたいで
   割れるようになった（11pxのときは割れていなかった）。
   番号を知らせるための注記で番号が割れては意味がないため、
   番号とサービス名を1組として折り返さないようにする。 */
.footer-disclaimer .tel-nowrap {
  white-space: nowrap;
}

/* ==================================================
   汎用ユーティリティ（2026-08-31）
   HTMLに直接書かれていた同じ指定をここへ集約した。
   用途が1つに定まらない（余白・色だけ）ものに限る。
   意味のあるまとまりは、各ページのCSSに名前を付けて置く。

   余白（margin）のユーティリティは作らないこと。
   style_v2.css は career.css や about.css より先に読まれるため、
   ページ側CSSが同じ要素に margin を指定していると、そちらが勝つ。
   インラインは全部に勝っていたので、外した瞬間に余白が変わる。
   ================================================== */
.u-white { color: #fff; }
.u-red { color: var(--color-primary); }
.u-center { text-align: center; }
.u-no-underline { text-decoration: none; }