/* ==========================================================================
   Page-specific styles
   セクション実装時に追記する
   ========================================================================== */

/* ==========================================================================
   Header（全ページ共通）
   ========================================================================== */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  /* 上下はロゴ画像（幅 200px → 高さ 62px）込みでヘッダー高さ 88px を保つ値 */
  padding: 12.5px 40px;
  min-height: 80px;
}

/* --------------------------------------------------------------------------
   Logo
   -------------------------------------------------------------------------- */
.header-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

/* ロゴ画像（マーク + 社名 + タグラインを 1 枚に収めたもの。500×161） */
.header-logo-img {
  display: block;
  width: 200px;
  height: auto;
}

/* --------------------------------------------------------------------------
   Navigation (desktop)
   -------------------------------------------------------------------------- */
.header-nav {
  flex: 1;
  display: flex;
  justify-content: flex-end;
}

.header-nav-list {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  list-style: none;
  padding: 0;
  margin: 0;
}

.header-nav-item {
  position: relative;
}

.header-nav-link {
  position: relative;
  display: inline-block;
  padding: 10px 2px;
  font-family: var(--font-jp);
  font-size: var(--fz-base);
  font-weight: var(--fw-semibold);
  color: var(--color-black);
  text-decoration: none;
  letter-spacing: var(--ls-sm);
  line-height: 1;
  white-space: nowrap;
  transition: color var(--transition-speed) var(--easing);
}

.header-nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background-color: var(--color-primary);
  border-radius: 1px;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--transition-speed) var(--easing);
}

.header-nav-link:hover {
  color: var(--color-primary);
  opacity: 1;
}

.header-nav-link:hover::after,
.header-nav-link.is-active::after {
  transform: scaleX(1);
}

.header-nav-link.is-active {
  color: var(--color-primary);
}

/* --------------------------------------------------------------------------
   CTA
   -------------------------------------------------------------------------- */
.header-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 26px;
  background-color: var(--color-primary);
  color: var(--color-white);
  font-family: var(--font-jp);
  font-size: var(--fz-base);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-md);
  line-height: 1;
  border-radius: 999px;   /* 最大角丸（ピル形状） */
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background var(--transition-speed) var(--easing),
              transform var(--transition-speed) var(--easing);
}

.header-cta:hover {
  background: linear-gradient(90deg, var(--color-primary) 0%, #52c3f7 100%);
  opacity: 1;
  transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   Mobile menu toggle (hamburger)
   デフォルト非表示。768px以下でのみ表示（responsive.css）
   -------------------------------------------------------------------------- */
.header-menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  flex-shrink: 0;
}

.header-menu-toggle-bar {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--color-primary);
  margin: 0 auto;
  transition: transform var(--transition-speed) var(--easing),
              opacity var(--transition-speed) var(--easing);
}

.header-menu-toggle.is-open .header-menu-toggle-bar:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.header-menu-toggle.is-open .header-menu-toggle-bar:nth-child(2) {
  opacity: 0;
}
.header-menu-toggle.is-open .header-menu-toggle-bar:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* --------------------------------------------------------------------------
   Mobile menu panel
   デフォルト非表示。768px以下でのみ機能する
   -------------------------------------------------------------------------- */
.header-mobile {
  display: none;
}

/* ==========================================================================
   FV（ファーストビュー）
   ========================================================================== */
.fv {
  position: relative;
  overflow: hidden;
  background-color: var(--color-white);
  min-height: calc(100vh - 40px);
  margin: 20px;   /* 外側を四角い白フレームで囲む */
  display: flex;
  align-items: center;
  /* 上余白は固定ヘッダー分（80px）+ 余裕を確保。1画面に収まるよう圧縮 */
  padding: clamp(110px, 11vw, 160px) 0 clamp(50px, 7vw, 100px);
}

/* 背景スライダー（3枚のスライドを重ねて、is-active のみ表示）
   - 切替時のクロスフェード中に透過が起きた瞬間は、この白背景が透けて見える */
.fv-slider {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background-color: var(--color-white);
}

.fv-slide {
  position: absolute;
  inset: 0;
  /* 非アクティブ時は完全に消えている */
  opacity: 0;
  z-index: 0;
}

/* 画像＋Ken Burns transform は疑似要素側に持たせる。
   こうすることで .fv-slide 自体には transform が乗らず、
   バッジの backdrop-filter が背景ピクセルを正しく掴める。
   Ken Burns は is-active 条件にせず全スライドに常時適用することで、
   class 切替時に transform がリセットされて画像が縮んで見える現象を防ぐ。
   alternate + infinite なので拡大 → 縮小をゆっくり往復し続ける */
.fv-slide::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--slide-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  animation: fvKenBurns 7s ease-in-out infinite alternate;
}

/* Ken Burns（拡大）のキーフレーム */
@keyframes fvKenBurns {
  from { transform: scale(1);    }
  to   { transform: scale(1.12); }
}

/* FV コンテンツの出現ブラーイン
   大キャッチ → サブコピー → バッジ → CTA の順に遅延付きで発火 */
@keyframes fvBlurIn {
  from {
    opacity: 0;
    filter: blur(14px);
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}

.fv-catch,
.fv-lead,
.fv-cta-group {
  opacity: 0;
  animation: fvBlurIn 1s var(--easing) forwards;
}

/* バッジのフェードイン:
   親（.fv-stats）に opacity をかけると子の backdrop-filter が
   ページ背景を参照できなくなるため、opacity は各バッジ自身に付ける。
   backdrop-filter と opacity が同じ要素なら、フェードインとぼかしが
   同時進行する（ぼかしも透明度と一緒に立ち上がる）。 */

.fv-catch     { animation-delay: 0.1s; }
.fv-lead      { animation-delay: 0.6s; }
.fv-stats     { animation-delay: 1.1s; }
.fv-cta-group { animation-delay: 1.6s; }

/* is-active:
   - opacity は base rule → is-active への遷移で transition により滑らかにフェード
   - transform は @keyframes 独立で Ken Burns
   - z-index を最前面にし、切替時は新スライドが旧スライドを完全に覆う */
.fv-slide.is-active {
  opacity: 1;
  z-index: 1;
}

/* Ken Burns は .fv-slide::before に常時適用済みなので、
   is-active 用の追加アニメーション定義は不要 */

/* 全スライドに opacity の transition を付与して、切り替わり時に
   新スライド：opacity 0→1 のフェードイン
   旧スライド：opacity 1→0 のフェードアウト
   の両方を同時進行させ、ふわっとクロスフェードで切り替わるようにする */
.fv-slide {
  transition: opacity 1.6s ease-in-out;
}

/* 内側コンテンツ */
.fv-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 60px);
}

.fv-content {
  max-width: 720px;
}

/* 大キャッチ */
.fv-catch {
  font-family: var(--font-jp);
  font-weight: var(--fw-bold);
  color: var(--color-white);
  font-size: 46px;
  line-height: 1.5;
  letter-spacing: 0.08em;
  margin: 0 0 var(--space-md);
  white-space: nowrap;  /* 明示的な <br> 以外の自動改行を抑止 */
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

/* 折り返さないための補助 */
.fv .nowrap {
  white-space: nowrap;
}

/* サブコピー */
.fv-lead {
  font-family: var(--font-jp);
  font-size: 18px;
  font-weight: var(--fw-medium);
  color: var(--color-white);
  line-height: var(--lh-lg);
  letter-spacing: var(--ls-md);
  margin: 0 0 56px;
  max-width: 580px;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
}

/* 数字バッジ 3点（実績） */
/* 右カラム下端に横並び（CTA と底辺を揃える） */
.fv-stats {
  position: absolute;
  bottom: 0;
  right: clamp(20px, 4vw, 60px);
  display: flex;
  flex-direction: row;
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0;
  color: var(--color-white);
}

/* 半透明の丸バッジ（内側は黒 10%） */
.fv-stat {
  flex: 0 0 auto;
  width: 224px;
  height: 224px;
  border-radius: 50%;
  /* 背景の FV 画像が透けて見える薄い黒オーバーレイ */
  background-color: rgba(0, 0, 0, 0.15);
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px 12px;
  text-align: center;
  color: var(--color-white);
  font-family: var(--font-jp);
  line-height: 1.2;
  /* 中身のFV画像をぼかしてフロストガラス風に */
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  /* フェードイン用（親 .fv-stats に .is-visible が付くと 0→1 へ transition） */
  opacity: 0;
  transition: opacity 1s var(--easing);
}

.fv-stats.is-visible .fv-stat {
  opacity: 1;
}

.fv-stat-label {
  font-size: 16px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.02em;
  margin: 0 0 6px;
  color: var(--color-white);
  line-height: 1.3;
}

/* 数字の並び:
   - Badge 1: [ネパール/国内 (sm)] [No.1 (strong)] を横並び、下端揃え
   - Badge 2,3: [23年 (strong)] → 改行 → [以上 (unit)]  … unit は flex-basis:100% で 2行目に落ちる */
.fv-stat-value {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  column-gap: 4px;
  row-gap: 2px;
  margin: 0;
}

.fv-stat-value strong {
  font-family: var(--font-en), var(--font-jp);
  font-style: italic;
  font-size: 50px;
  font-weight: 600;
  color: var(--color-secondary);
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
}

/* 数字より一段小さい部分（No. / 年 / 万人） */
.fv-stat-num-sub {
  font-size: 34px;
}

/* 単位（以上）は数字の下段に落ちる */
.fv-stat-unit {
  margin-top: 4px;
  flex-basis: 100%;
  font-size: 18px;
  font-weight: var(--fw-semibold);
  color: var(--color-white);
  letter-spacing: 0.02em;
  line-height: 1;
}

/* 全面画像バッジ用（.fv-stat--image）: 中身は 1 枚の画像のみ */
.fv-stat--image {
  padding: 0;
  background-color: transparent;
  border: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.fv-stat-full-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 50%;
}

/* 「No.1」バッジ用: 円の上部に配置する装飾イラスト（日本国旗） */
.fv-stat-top-img {
  display: block;
  width: 44px;
  height: auto;
  margin: 0 auto 12px;
}

/* 「No.1」バッジ用: 数字の左に配置する吹き出し画像（ネパール国内） */
.fv-stat-sub-img {
  display: inline-block;
  width: 68px;
  height: auto;
  vertical-align: middle;
  /* flex 親の column-gap:4px を負マージンでは打ち消せないため、
     transform で視覚的に右へ寄せて数字との隙間を縮める（0px = ぴったり接する） */
  transform: translateX(4px);
}

/* 「No.1」バッジ用: 数字の左にスタックする小テキスト（ネパール/国内） */
.fv-stat-value-sm {
  display: inline-block;
  text-align: left;
  font-family: var(--font-jp);
  font-size: 14px;
  font-weight: var(--fw-semibold);
  color: var(--color-white);
  line-height: 1.15;
  letter-spacing: 0.02em;
}

/* CTA グループ */
.fv-cta-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  max-width: 360px;
}

.fv-cta-wrap {
  display: flex;
  flex-direction: column;
  position: relative;
}

/* CTA ボタンの見た目は components.css の .btn に切り出し済み。
   ここには FV 固有のレイアウトラッパー（.fv-cta-group / .fv-cta-wrap）のみ残す。 */

/* ==========================================================================
   News（お知らせ一覧）
   左: サムネイル（≒2:1）/ 右: タイトル + 日付 / 行間に薄い区切り線
   ========================================================================== */

/* セクション全体: 薄い水色背景 + 幅を絞って中央寄せ、FV に少しかぶせるレイアウト */
.news {
  position: relative;
  z-index: 2;
  /* セクション幅は 1460px を上限とし、狭い画面でも左右 20px の余白を必ず確保 */
  width: 100%;
  max-width: min(1460px, calc(100vw - 40px));
  margin: -80px auto 0;             /* 上: FV に 60px かぶる（-80px + FV 下 20px 余白）*/
  /* すりガラス風グラスモーフィズム: reasons セクションと同一の透過率・ぼかし・エッジ */
  background-color: rgba(233, 242, 249, 0.8);   /* #e9f2f9 の 80% 透過 */
  backdrop-filter: blur(5px) saturate(0.4);
  -webkit-backdrop-filter: blur(10px) saturate(0.8);
  border: 1.5px solid rgba(255, 255, 255, 0.2);  /* 白半透明のリム（glass edge）*/
  border-radius: 30px;
}

.news-list {
  list-style: none;
  padding: 0;
  /* 見出し (.section-heading) との間に余白を確保 */
  margin: clamp(24px, 3vw, 40px) 0 0;
}

.news-item {
  border-bottom: 1px solid var(--color-gray-border);
}
/* 最後のアイテムは下線を非表示 */
.news-item:last-child {
  border-bottom: 0;
}

/* 出現時のブラーイン: 上から順に少しずつ遅らせて cascade */
.news-item.blur-in:nth-child(1) { --blur-delay: 0s;    }
.news-item.blur-in:nth-child(2) { --blur-delay: 0.08s; }
.news-item.blur-in:nth-child(3) { --blur-delay: 0.16s; }
.news-item.blur-in:nth-child(4) { --blur-delay: 0.24s; }
.news-item.blur-in:nth-child(5) { --blur-delay: 0.32s; }

.news-item-link {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 48px;
  align-items: center;
  padding: 32px 0;
  color: inherit;
  text-decoration: none;
}

/* サムネイル写真のラッパ (ホバー時の scale はみ出しをクリップして border-radius を維持) */
.news-item-thumb-wrap {
  display: block;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background-color: var(--color-gray-light);
}

/* サムネイル写真: 2:1 の枠にクロップして表示 + ホバー時に緩やかにズーム */
.news-item-thumb {
  display: block;
  aspect-ratio: 2 / 1;
  width: 100%;
  object-fit: cover;
  object-position: center;
  background-color: var(--color-gray-light);
  border-radius: var(--radius-sm);
  transition: transform 0.6s var(--easing);
}

.news-item-link:hover .news-item-thumb {
  transform: scale(1.06);
}

.news-item-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.news-item-title {
  font-family: var(--font-jp);
  font-size: 20px;
  font-weight: var(--fw-semibold);
  color: var(--color-primary);
  line-height: 1.6;
  letter-spacing: 0.04em;
  margin: 0;
  transition: color var(--transition-speed) var(--easing);
}

/* タグ + 日付を横並び */
.news-item-meta {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* カテゴリタグ（お知らせ / 活動実績）: 白背景 + 濃紺の枠と文字 */
.news-item-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 80px;
  padding: 4px 6px;
  font-family: var(--font-jp);
  font-size: 12px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  line-height: 1.4;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-full);
  color: var(--color-primary);
  background-color: var(--color-white);
}

.news-item-date {
  font-family: var(--font-jp);
  font-size: 14px;
  font-weight: var(--fw-regular);
  color: var(--color-gray);
  letter-spacing: 0.06em;
}

/* ホバー: グローバルの a:hover の opacity フェードを打ち消してタイトル色だけ変える */
.news-item-link:hover {
  opacity: 1;
}

.news-item-link:hover .news-item-title {
  color: rgba(5, 56, 125, 0.7);
}

/* セクション下部の中央 CTA。FV の primary CTA を流用 */
.news-cta {
  display: flex;
  justify-content: center;
  margin-top: var(--space-xl);
}

.news-cta.blur-in {
  --blur-delay: 0.4s;
}

.news-cta .btn {
  min-width: 320px;
}

/* ==========================================================================
   Business（事業案内）
   左: 写真エリア（メイン + サブ + 装飾フレーム） / 右: テキスト + リンクリスト
   ========================================================================== */
/* Business / Achievement セクションは他セクションより広めのコンテナを使う */
.business > .container,
.achievement > .container {
  max-width: 1320px;
}

/* Achievement と Business の間の余白を現状の半分に
   （.section-padding デフォルトの上下 100px を、境目だけ 50px ずつに） */
.achievement.section-padding {
  padding-bottom: calc(var(--space-2xl) / 2);
}
.achievement + .business.section-padding {
  padding-top: calc(var(--space-2xl) / 2);
}

/* Achievement セクションの本文: 16px・黒(#111111) */
.achievement .section-heading-desc {
  font-size: 16px;
  color: var(--color-black);
}

/* 実績カード（アイコン + 見出し + 区切り線 + 説明文）を3つ横並び */
.achievement-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 56px);
  margin: clamp(28px, 3.5vw, 48px) 0 0;
  padding: 0;
  list-style: none;
}
/* カード: 淡いブルーの角丸背景 */
.achievement-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 0;
  /* アイコン上の余白（padding-top）は従来の半分に */
  padding: clamp(14px, 1.5vw, 24px) clamp(20px, 2.2vw, 36px) clamp(32px, 3.4vw, 32px);
  background-color: #E9F2F9;
  border-radius: clamp(14px, 1.6vw, 22px);
}
/* アイコン: 白い円 + 濃紺アイコン画像。円は少し小さく。下の余白（margin-bottom）は従来の半分に */
.achievement-stat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(66px, 6.3vw, 80px);
  height: clamp(66px, 6.3vw, 80px);
  margin-bottom: clamp(9px, 1.1vw, 14px);
  border-radius: 50%;
  background-color: var(--color-white);
}
/* アイコン画像は円のサイズに連動させず固定サイズにする（円を小さくしても大きさは維持）。
   従来「円 clamp(72,6.6vw,92) の 52%」に相当する寸法 */
.achievement-stat-icon-img {
  width: clamp(37px, 3.43vw, 48px);
  height: clamp(37px, 3.43vw, 48px);
  object-fit: contain;
  display: block;
}
/* 見出し（黒・大） + 数字アクセント（スカイブルー・さらに大） */
.achievement-stat-title {
  margin: 0;
  font-family: var(--font-jp);
  /* 黒文字は少し小さく、数字（水色）は少し大きく → 強弱を付ける */
  font-size: clamp(19px, 2vw, 27px);
  font-weight: var(--fw-bold);
  color: var(--color-black);
  line-height: 1.35;
  letter-spacing: 0.02em;
}
.achievement-stat-num {
  color: var(--color-secondary);
  font-size: clamp(38px, 4.2vw, 56px);
  line-height: 1;
}
/* 「ネパール国内 No.1」など、途中で改行させたくないまとまり */
.achievement-stat-nowrap {
  white-space: nowrap;
}
/* 見出しと説明文の区切り線（淡いブルー） */
.achievement-stat-line {
  display: block;
  width: 100%;
  height: 1px;
  margin: clamp(16px, 1.8vw, 22px) auto;
  background-color: #c9def2;
}
/* 説明文（--fz-base・黒・中央）。区切り線〜カード下端の残りスペースで上下中央揃え */
.achievement-stat-desc {
  margin: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-family: var(--font-jp);
  font-size: var(--fz-base);
  font-weight: var(--fw-regular);
  color: var(--color-black);
  line-height: 1.85;
  letter-spacing: 0.02em;
  text-align: center;
}

/* BSI 紹介（会社概要）: 見出しは上・中央。その下に [本文=左 | 写真=右] の 2カラム */
.bsi-head {
  margin-bottom: clamp(28px, 4vw, 48px);
}
.business-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: center;
}
/* 本文ブロック（リード + 説明）は左寄せ */
.business-grid .business-body {
  min-width: 0;
  text-align: left;
}

/* -- Media (画像・右カラム) --------------------------------------------- */
.business-media {
  position: relative;
  width: 100%;
  padding: 0;
  align-self: center;
}

/* メイン画像コンテナ: 内部に2枚の img を絶対配置で重ね、ホバー時にクロスフェード
   （JS 側で .business-media-main-img の .is-visible を入れ替えて opacity をトランジション） */
.business-media-main {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;   /* 絶対配置の内側 img をコンテナ内に収める */
  background-color: var(--color-gray-light);  /* ロード前・失敗時の保険 */
}

/* クロスフェード対象: 2枚を絶対配置で重ね、.is-visible が付いた方だけ opacity 1 */
.business-media-main-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.5s var(--easing);
}

.business-media-main-img.is-visible {
  opacity: 1;
}

/* -- Body (左カラム、テキスト) ------------------------------------------ */
.business-body {
  min-width: 0;
}

/* section-heading コンポーネントを business で使う際の上書き:
   - 下端の実線を削除
   - padding-bottom を無効化してリード文への余白は margin-bottom で確保 */
.business-body .section-heading {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: var(--space-md);
}

.business-lead {
  font-family: var(--font-jp);
  font-size: clamp(18px, 3vw, 24px);
  font-weight: var(--fw-bold);
  color: var(--color-black);
  line-height: 1.6;
  letter-spacing: 0.04em;
  margin: 0 0 16px;
}

.business-desc {
  font-family: var(--font-jp);
  font-size: clamp(14px, 3vw, 16px);
  font-weight: var(--fw-regular);
  color: var(--color-black);
  line-height: 1.85;
  letter-spacing: 0.02em;
  margin: 0 0 32px;
}
/* .business-desc が複数段落コンテナ（div）として使われた場合の子 <p> 余白 */
.business-desc > p {
  margin: 0 0 clamp(12px, 1.2vw, 20px);
}
.business-desc > p:last-child {
  margin-bottom: 0;
}

/* 旧・事業リスト（.business-list / .business-item）はトップの事業カード（.biz-card）へ置き換えたため削除 */

/* イントロ: リード + 説明（見出し下・中央） */
.business-intro-text {
  max-width: 820px;
  margin: var(--space-md) auto 0;
  text-align: center;
}
.business-intro-text .business-desc {
  margin-bottom: 0;
}

/* CTA（事業カードの下・中央） */
.business-cta-wrap {
  display: flex;
  justify-content: center;
  margin-top: clamp(32px, 4vw, 56px);
}
.business-cta-wrap .btn {
  min-width: 320px;
}

/* .btn-pill は共通 .btn コンポーネントに統一したため削除済み */

/* ==========================================================================
   Business — 事業カード（左: 写真+事業名 / 右: 見出し+箇条書き+丸矢印）
   ========================================================================== */
.biz-cards {
  list-style: none;
  margin: clamp(40px, 5vw, 64px) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.4vw, 32px);
}

.biz-card {
  display: grid;
  grid-template-columns: minmax(0, 38%) 1fr;
  align-items: stretch;
  background-color: #E9F2F9;   /* カード背景（指定色） */
  border-radius: clamp(14px, 1.6vw, 20px);
  overflow: hidden;
}

/* -- 左: 写真 + 事業名バッジ -------------------------------------------- */
.biz-card-media {
  position: relative;
  min-height: 200px;
  overflow: hidden;
}
.biz-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* -- 右: 見出し + 箇条書き ---------------------------------------------- */
.biz-card-body {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 32px);
  padding: clamp(24px, 3vw, 44px) clamp(24px, 3vw, 48px);
}
.biz-card-main {
  flex: 1;
  min-width: 0;
}
.biz-card-title {
  margin: 0 0 clamp(16px, 1.8vw, 24px);
  font-family: var(--font-jp);
  font-size: clamp(20px, 2vw, 26px);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  letter-spacing: 0.04em;
  line-height: 1.4;
}
.biz-card-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.biz-card-list li {
  position: relative;
  padding-left: 18px;
  font-family: var(--font-jp);
  font-size: 16px;              /* SP は 14px（responsive.css） */
  font-weight: var(--fw-regular);
  color: var(--color-black);
  line-height: 1.7;
  letter-spacing: 0.02em;
}
.biz-card-list li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-black);
}
/* 中黒（・）なしの単文リスト（送り出し機関・登録支援機関） */
.biz-card-list--plain li {
  padding-left: 0;
}
.biz-card-list--plain li::before {
  display: none;
}
.biz-card-note {
  margin: 12px 0 0;
  font-family: var(--font-jp);
  font-size: clamp(12px, 0.9vw, 13px);
  color: var(--color-gray);
  line-height: 1.6;
}

/* ==========================================================================
   Business — 最下部の実績バッジ 3 カラム
   （画像 TOP_sub.png / TOP_sub2.png / TOP_sub3.png を横並びで配置）
   ========================================================================== */
/* stats-wrap を section 直下・container の外に配置しているので、
   .business の下パディングを 0 にして wrap の背景色をセクション下端まで届かせる */
.business.section-padding {
  padding-bottom: 0;
}

/* BSI 紹介セクション（会社概要ページ）: .business のデザインを流用しつつ、
   単独セクションとして下 padding を復元 & タブナビ用の scroll-margin を付与 */
#bsi.business.section-padding {
  padding-bottom: var(--space-2xl);
}
#bsi {
  scroll-margin-top: clamp(80px, 8vw, 120px);
}

/* ==========================================================================
   組織図 — Chart（会社概要ページ）
   共通 section-heading + COMPANY_map.png のシンプル構成
   ========================================================================== */
.chart {
  scroll-margin-top: clamp(80px, 8vw, 120px);
}
.chart.section-padding {
  padding-top: 0;                        /* 上余白を削除して BSI セクションと繋げる */
}
.chart > .container > .blur-in {
  margin-bottom: clamp(40px, 4vw, 64px);
}
.chart-media {
  display: flex;
  justify-content: center;
}
.chart-media-item {
  width: 100%;
  min-width: 0;
}
.chart-media-img {
  width: 100%;
  height: auto;
  max-width: 100%;                      /* .container の内側幅（既定 1200px）いっぱいまで拡大 */
  display: block;
  border-radius: 16px;
}

/* ==========================================================================
   企業情報 — Company（会社概要ページ）
   共通 section-heading + コンテンツ配置エリア（コンテンツは後日追加）
   ========================================================================== */
.company {
  scroll-margin-top: clamp(80px, 8vw, 120px);
}
.company.section-padding {
  padding-top: 0;                        /* 上余白を削除して chart セクションと繋げる */
}
.company > .container > .blur-in {
  margin-bottom: clamp(40px, 4vw, 64px);
}
/* Company セクションの見出しは下線を非表示にする */
.company > .container > .blur-in > .section-heading {
  border-bottom: none;
  padding-bottom: 0;
}

/* 企業情報テーブル: 左に濃紺見出し、右に詳細
   各行の下線はバイカラー（見出し側=濃紺 / 本文側=グレー）の直線
   （参考デザインではオレンジ点線を色: 濃紺+グレー、線種: 直線 に統一） */
.company-info-list {
  --info-divider: linear-gradient(
    to right,
    var(--color-primary) 0 22%,
    var(--color-gray-border) 22% 100%
  );
  margin: 0;
  padding: 0;
  /* 最上端の線もバイカラー */
  background-image: var(--info-divider);
  background-repeat: no-repeat;
  background-position: top left;
  background-size: 100% 1px;
}
.company-info-row {
  display: grid;
  grid-template-columns: minmax(160px, 20%) 1fr;
  align-items: center;             /* 見出しを本文（右列）の縦幅に対して上下中央に揃える */
  gap: clamp(24px, 4vw, 64px);
  padding: clamp(20px, 2.5vw, 32px) clamp(16px, 2vw, 28px);
  /* 各行の下線をバイカラーのグラデーションで描画 */
  background-image: var(--info-divider);
  background-repeat: no-repeat;
  background-position: bottom left;
  background-size: 100% 1px;
}
.company-info-term {
  margin: 0;
  font-family: var(--font-jp);
  font-weight: var(--fw-bold);
  font-size: clamp(16px, 3vw, 18px);
  color: var(--color-primary);
  letter-spacing: 0.06em;
  line-height: 1.6;
}
.company-info-desc {
  margin: 0;
  font-family: var(--font-jp);
  font-size: clamp(14px, 3vw, 16px);
  color: var(--color-black);
  line-height: 1.85;
  letter-spacing: 0.04em;
}
.company-info-desc a {
  color: var(--color-black);
  text-decoration: none;
}
.company-info-desc a:hover {
  opacity: 0.7;
}
.company-info-link {
  color: var(--color-primary) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
}

/* ==========================================================================
   役員紹介 — Members（会社概要ページ）
   3カラムカード: 角丸写真 → 役職 → 氏名
   ========================================================================== */
.members {
  scroll-margin-top: clamp(80px, 8vw, 120px);
}
.members.section-padding {
  padding-top: 100px;                        /* 上の Company セクションと連結 */
}
.members > .container > .blur-in {
  margin-bottom: clamp(40px, 4vw, 64px);
}

.members-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* row-gap（1行目と2行目の間）を少し広めに、column-gap は元の値を維持 */
  gap: clamp(48px, 5vw, 80px) clamp(24px, 3vw, 48px);
}

.members-item {
  display: flex;
  flex-direction: column;
}

/* カード全体をリンクにする。写真の下に [役職+氏名 | 矢印] を横並びで配置 */
.members-item-link {
  display: grid;
  grid-template-areas:
    "photo photo"
    "info  arrow";
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: clamp(12px, 1.6vw, 20px);
  row-gap: clamp(14px, 1.6vw, 22px);    /* 写真と役職の間の余白を少し広めに */
  align-items: center;
  color: inherit;
  text-decoration: none;
  transition: opacity var(--transition-speed) var(--easing);
}
.members-item-link:hover {
  opacity: 1;
}
.members-photo { grid-area: photo; }
.members-info  { grid-area: info; min-width: 0; }
.members-arrow { grid-area: arrow; align-self: center; }

/* 写真なしバリアント（監査役・顧問）: 写真行を持たず、役職 + 氏名 + 矢印の 1 行だけ */
.members-list--noimage .members-item-link {
  grid-template-areas: "info arrow";
  row-gap: 0;
}

/* 右側の矢印ボタン（濃紺の丸 + 濃紺矢印）: 役職・氏名と同じ行に並ぶ */
.members-arrow {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;                   /* 追い抜き用矢印をクリップして丸の外に出さない */
  width: clamp(40px, 3.8vw, 48px);
  height: clamp(40px, 3.8vw, 48px);
  border-radius: 50%;
  border: 1.5px solid var(--color-primary);
  color: var(--color-primary);
  background-color: transparent;
  transition: background-color var(--transition-speed) var(--easing),
              color var(--transition-speed) var(--easing);
}

/* スライドスルー矢印。2 枚を絶対配置で重ね、hover で 1 枚目が右へ抜け、2 枚目が左から進入 */
.members-arrow-svg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 45%;
  height: 45%;
  display: block;
  transition: transform 0.45s var(--easing);
}
.members-arrow-svg--primary {
  transform: translate(-50%, -50%);   /* 中央 */
}
.members-arrow-svg--chase {
  transform: translate(-250%, -50%);  /* 丸の左外へ待機 */
}
.members-item-link:hover .members-arrow-svg--primary {
  transform: translate(150%, -50%);   /* 右外へスライドアウト */
}
.members-item-link:hover .members-arrow-svg--chase {
  transform: translate(-50%, -50%);   /* 中央へスライドイン */
}

.members-item-link:hover .members-arrow {
  background-color: var(--color-primary);
  color: var(--color-white);
}

/* リンクではなくボタン化したときの既定スタイルを打ち消し */
button.members-item-link {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
  width: 100%;
}

/* --------------------------------------------------------------------------
   役員プロフィールモーダル
   全画面オーバーレイ + 中央の白カード
   -------------------------------------------------------------------------- */
.members-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;                                /* 初期非表示 */
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 3vw, 40px);
}
.members-modal.is-open {
  display: flex;
}

/* 開いた瞬間に発火するブラーインアニメーション（FV / About と同じ動き）*/
@keyframes modalBlurIn {
  from {
    opacity: 0;
    filter: blur(14px);
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}
.members-modal.is-open .members-modal-backdrop {
  animation: modalBlurIn 0.4s var(--easing) forwards;
}
.members-modal.is-open .members-modal-card {
  animation: modalBlurIn 0.5s var(--easing) 0.05s forwards;
  opacity: 0;                              /* delay 中の初期状態 */
}

.members-modal-backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(17, 17, 17, 0.5);
  cursor: pointer;
}

.members-modal-card {
  position: relative;
  width: 100%;
  max-width: 1160px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background-color: var(--color-white);
  border-radius: clamp(12px, 1.6vw, 20px);
  padding: clamp(24px, 3vw, 48px) clamp(24px, 3.5vw, 56px);
}

/* CLOSE ボタン（右上） */
.members-modal-close {
  position: absolute;
  top: clamp(20px, 2vw, 32px);
  right: clamp(24px, 2.5vw, 40px);
  display: inline-flex;
  align-items: center;
  gap: clamp(8px, 0.8vw, 12px);
  padding: 6px 4px;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--color-black);
  font-family: var(--font-en);
  font-weight: var(--fw-bold);
  font-size: clamp(14px, 1.1vw, 18px);
  letter-spacing: 0.1em;
  transition: opacity var(--transition-speed) var(--easing);
}
.members-modal-close:hover {
  opacity: 0.6;
}
.members-modal-close svg {
  width: clamp(18px, 1.6vw, 24px);
  height: clamp(18px, 1.6vw, 24px);
  display: block;
}

/* 内側の 2 カラム: 左テキスト + 右写真 */
.members-modal-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(32px, 4vw, 72px);
  align-items: start;
  margin-top: clamp(48px, 5vw, 72px);
}

/* 写真なしモーダル（監査役・顧問）: テキストを 1 カラムで全幅表示 */
.members-modal-inner--noimage {
  grid-template-columns: minmax(0, 1fr);
}

.members-modal-body {
  min-width: 0;
}
.members-modal-name {
  margin: 0 0 clamp(6px, 0.8vw, 12px);
  font-family: var(--font-jp);
  font-weight: var(--fw-bold);
  font-size: clamp(24px, 2.8vw, 24px);
  color: var(--color-black);
  letter-spacing: 0.04em;
  line-height: 1.3;
}
.members-modal-role {
  margin: 0 0 clamp(24px, 2.5vw, 36px);
  font-family: var(--font-jp);
  font-size: clamp(13px, 1vw, 15px);
  color: var(--color-gray);
  letter-spacing: 0.05em;
}

/* セクション（経歴 / 資格 / メッセージ）ラベル + 本文 */
.members-modal-section + .members-modal-section {
  margin-top: clamp(20px, 2vw, 40px);
}
.members-modal-label {
  display: inline-block;
  margin: 0 0 clamp(12px, 1.2vw, 8px);
  padding: 4px clamp(10px, 1vw, 14px);
  background-color: var(--color-primary-light);
  border-radius: 4px;
  font-family: var(--font-jp);
  font-weight: var(--fw-bold);
  font-size: clamp(13px, 1vw, 15px);
  color: var(--color-primary);
  letter-spacing: 0.06em;
  line-height: 1.5;
}
.members-modal-text {
  margin: 0;
  font-family: var(--font-jp);
  font-size: clamp(13px, 1vw, 15px);
  color: var(--color-black);
  line-height: 1.9;
  letter-spacing: 0.04em;
}

/* body スクロールロック補助（JS で <body> に .is-modal-open を付与） */
body.is-modal-open {
  overflow: hidden;
}

/* 写真エリア: 淡いスカイブルー背景 + 角丸 + アスペクト比固定 */
.members-photo {
  position: relative;
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, #dceaf7 0%, #b8d7f0 100%);
  border-radius: clamp(15px, 1.6vw, 15px);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.members-photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* 写真が未登録のメンバー: 白地に 1px のグレー枠だけを表示する */
.members-photo--empty {
  background: var(--color-white);
  border: 1px solid var(--color-gray-border);
}

/* 写真下の役職ラベル
   （margin-top は grid row-gap に任せて 0。矢印との縦中央揃えを崩さない）*/
.members-role {
  margin: 0 0 clamp(2px, 0.4vw, 6px);   /* 役職と氏名の間をほんの少し詰める */
  font-family: var(--font-jp);
  font-size: clamp(12px, 1vw, 15px);
  font-weight: var(--fw-medium);
  color: var(--color-gray);
  letter-spacing: 0.05em;
  line-height: 1.5;
}

/* 氏名 */
.members-name {
  margin: 0;
  font-family: var(--font-jp);
  font-weight: var(--fw-bold);
  font-size: clamp(16px, 1.8vw, 18px);
  color: var(--color-black);
  letter-spacing: 0.06em;
  line-height: 1.4;
}
/* --------------------------------------------------------------------------
   役員紹介: グループ小見出し（役員 / マネジメントチーム / 監査役・顧問）
   -------------------------------------------------------------------------- */
.members-group-title {
  margin: clamp(40px, 4.5vw, 72px) 0 clamp(20px, 2.2vw, 32px);
  /* 企業情報テーブルの行下線と同じバイカラー直線（左=濃紺 / 右=グレー） */
  padding-bottom: clamp(14px, 1.6vw, 20px);
  background-image: linear-gradient(
    to right,
    var(--color-primary) 0 22%,
    var(--color-gray-border) 22% 100%
  );
  background-repeat: no-repeat;
  background-position: bottom left;
  background-size: 100% 1px;
  font-family: var(--font-jp);
  font-size: clamp(18px, 1.7vw, 24px);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  letter-spacing: 0.06em;
  line-height: 1.4;
}
/* セクション見出し直後の最初のグループは上余白を詰める */
.members-group-title:first-of-type {
  margin-top: clamp(28px, 3vw, 44px);
}

/* --------------------------------------------------------------------------
   役員: 写真（左・役職/氏名付き） + 略歴ボックス（右）
   -------------------------------------------------------------------------- */
.members-exec-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3vw, 40px);
}
.members-exec {
  display: grid;
  /* 写真カラムは「監査役・顧問」の 3 カラムカードと同じ幅に揃える
     （.members-list の column-gap = clamp(24px, 3vw, 48px) を差し引いた 1/3） */
  grid-template-columns: calc((100% - 2 * clamp(24px, 3vw, 48px)) / 3) minmax(0, 1fr);
  gap: clamp(20px, 2.6vw, 40px);
  align-items: start;
}
.members-exec-profile {
  min-width: 0;
}
.members-exec-photo {
  margin-bottom: clamp(12px, 1.4vw, 18px);
}
/* 右: 略歴ボックス（グレーの枠線） */
.members-exec-career {
  min-width: 0;
  padding: clamp(20px, 2.2vw, 32px);
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-border);
  border-radius: clamp(10px, 1.2vw, 15px);
}
.members-exec-career-label {
  margin: 0 0 clamp(10px, 1.2vw, 16px);
  font-family: var(--font-jp);
  font-size: clamp(13px, 1vw, 15px);
  font-weight: var(--fw-bold);
  color: var(--color-black);
  letter-spacing: 0.06em;
  line-height: 1;
}
.members-exec-career-text {
  margin: 0;
  font-family: var(--font-jp);
  font-size: var(--fz-base);
  color: var(--color-black);
  line-height: 1.9;
  letter-spacing: 0.02em;
}

/* セクション横幅を about セクションと同じ .container 既定（max 1200px）に戻す */
#bsi > .container {
  max-width: var(--container-max);
}
/* [本文=左 | 写真=右] の 2カラム。図版の文字が読めるよう右カラムを広めに取る。上下中央揃え */
#bsi .business-grid {
  align-items: center;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
#bsi .business-media {
  aspect-ratio: 16 / 9;   /* 右カラム図版（BSI.jpg）の縦横比に合わせる */
  align-self: center;
  height: auto;
}
/* 図版の外枠（濃いグレーの 1px） */
#bsi .business-media-main {
  border: 1px solid var(--color-gray);
}

/* 図版（BSI セクション用の単発ロード） */
#bsi .business-media-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* 実績バッジ帯の外枠: 全幅背景（TOP_haikei.jpg を固定背景として使用）
   事業内容セクション下端との間隔を margin-top で確保
   下 padding は 0（reasons セクション下部の余白を削除して、次セクションに密着させる）
   背景画像は attachment:fixed により viewport に貼り付き、
   直下の .project セクションと同じ設定を共有して、スクロール時にセクションをまたいで
   途切れない一枚絵として見える。画像が読み込めない場合は #e9f2f9 にフォールバック */
.business-stats-wrap {
  position: relative;
  margin-top: clamp(80px, 8vw, 140px);
  padding: clamp(60px, 6vw, 120px) 0 0;
  background-color: #e9f2f9;
  background-image: url('../image/TOP_haikei.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
}


/* 実績バッジの上に置く見出し（リード文）
   PC では「これまで、」の後で改行し、SP では自然な改行に任せる
   セクション内では中央寄せ、テキストも各行中央揃え
   下マージンを広げて見出しとバッジの間を確保 */
.business-stats-lead {
  margin: 0 auto clamp(56px, 6vw, 60px);
  font-family: var(--font-jp);
  font-size: clamp(20px, 2vw, 32px);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  line-height: 1.7;
  letter-spacing: 0.05em;
  text-align: center;
}
/* トップページ: リード文と紺カードの間の余白を従来の約半分に（cases.php は据え置き） */
.business-stats-wrap .business-stats-lead {
  margin-bottom: clamp(28px, 3vw, 30px);
}

.business-stats {
  list-style: none;
  /* 上: リード文からの余白 / 下: 次セクション（reasons）との余白 */
  margin: clamp(60px, 6vw, 100px) 0 clamp(60px, 6vw, 100px);
  padding: 0;
  display: grid;
  /* 各カラムをバッジ幅（280px）にフィットさせ、バッジ間の余白を gap そのものに */
  grid-template-columns: repeat(3, minmax(0, 280px));
  gap: clamp(10px, 3vw, 48px);
  align-items: center;
  justify-content: center;   /* 3カラムのブロック全体を中央寄せ */
}

/* リードが直前にある場合、stats 側の上マージンをリードの下マージンだけに任せる */
.business-stats-lead + .business-stats {
  margin-top: 0;
}

/* TOP: 実績サマリーカード（旧バッジ帯の置き換え）と次の Why nepal?(reasons) の間に余白を確保。
   リード文からの上余白も旧バッジ帯と同等に持たせる */
.business-stats-wrap .cases-summary-card {
  /* ネパール特性(reasons-extra)の白カードと同じ横幅に（= Why nepal? / 事業内容と同幅） */
  width: min(1280px, calc(100vw - 40px));
  /* リード文との間の余白（従来の約半分） */
  margin-top: clamp(24px, 2.5vw, 40px);
  /* 内定者累計カードと直後の Why nepal? の間の余白 */
  margin-bottom: 80px;
  margin-left: calc((100% - min(1280px, calc(100vw - 40px))) / 2);
  margin-right: 0;
}

/* 実績バッジは 3 つ同時にゆっくりブラーインさせる
   （他要素の 1s より長めの 2s duration・少し遅らせて発火） */
.business-stat.blur-in {
  transition-duration: 2s;
  transition-delay: 0.5s;
}

.business-stat img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 280px;
  /* 濃紺の外側光彩: drop-shadow を多層に重ねてバッジ形状に沿った柔らかい発光を作る */
  filter:
    drop-shadow(0 0 28px rgba(26, 130, 204, 0.09));
}

/* ==========================================================================
   Why nepal? — 選ばれる理由（アイコンカード 3 列。トップページ専用の新デザイン）
   紺色フレームなし。見出しは Project と同じデフォルト色。
   ========================================================================== */
.why-nepal {
  /* 事業内容セクション (.business > .container 内容幅 = max 1320 - 左右padding40) と同じ横幅 */
  width: min(1280px, calc(100vw - 40px));
  /* 上余白: PC で 140px（SP は縮小） */
  margin: clamp(64px, 10vw, 140px) 0 0 calc((100% - min(1280px, calc(100vw - 40px))) / 2);
}
.why-nepal-header {
  margin-bottom: clamp(28px, 4vw, 48px);
}
/* 見出しは section-heading の既定（濃紺の見出し + 下線）をそのまま表示 */

.why-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 32px);
}
.why-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(28px, 3vw, 44px) clamp(20px, 2.4vw, 32px);
  /* ガラスカード加工（ドロップシャドウなし） */
  background-color: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(5px) saturate(0.4);
  -webkit-backdrop-filter: blur(10px) saturate(0.8);
  border: 1px solid white;
  border-radius: clamp(12px, 1.4vw, 18px);
}
/* アイコン: 淡いブルーの円 + 濃紺ラインアイコン */
.why-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(72px, 7vw, 88px);
  height: clamp(72px, 7vw, 88px);
  margin-bottom: clamp(16px, 2vw, 24px);
  border-radius: 50%;
  background-color: #dcebf7;
  color: var(--color-primary);
}
.why-card-icon .why-card-img {
  width: 58%;
  height: 58%;
  object-fit: contain;
  display: block;
}
.why-card-title {
  margin: 0 0 clamp(12px, 1.4vw, 16px);
  font-family: var(--font-jp);
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  letter-spacing: 0.04em;
  line-height: 1.4;
}
.why-card-desc {
  margin: 0;
  width: 100%;
  font-family: var(--font-jp);
  font-size: 16px;              /* SP は 14px（responsive.css） */
  font-weight: var(--fw-regular);
  color: #222222;
  line-height: 1.9;
  letter-spacing: 0.02em;
  text-align: left;            /* 説明文は左揃え */
}

/* ==========================================================================
   Reasons — 選ばれる3つの理由
   セクション構成:
     .reasons > .container > .reasons-illust (top: overlap the section above)
                          > .reasons-frame  (navy bg + rounded)
                              > .reasons-header (pill tag + main heading)
                              > .reason-card  (white card, 2-col grid)
   ========================================================================== */
.reasons {
  position: relative;
  /* バッジの直下に密着させ、イラストの負の margin-top で更に上に食い込ませる */
  margin-top: 0;
  /* 親 .container（max-width 1200）を突き抜けて、news セクションと同じ 1460px を上限に広げる。
     ネガティブ margin-left で reasons を左へずらし、幅を計算値で固定することで
     コンテナよりも大きな幅に。ビューポートが狭い場合は左右 40px の余白を残す */
  width: min(1460px, calc(100vw - 40px));
  margin-left: calc((100% - min(1460px, calc(100vw - 40px))) / 2);
  margin-right: 0;
  /* イラストが上へはみ出してバッジに重なる必要があるため、縦方向はクリップしない
     （横方向のみクリップして横スクロールを防止） */
  overflow-x: clip;
  overflow-y: visible;
}

/* --------------------------------------------------------------------------
   Navy Frame（濃紺の外枠）
   -------------------------------------------------------------------------- */
.reasons-frame {
  position: relative;
  /* すりガラス風グラスモーフィズム:
     半透明背景 + backdrop-filter で背後の背景をぼかす */
  background-color: rgba(10, 43, 77, 0.8);
  backdrop-filter: blur(5px) saturate(0.4);
  -webkit-backdrop-filter: blur(10px) saturate(0.8);
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  border-radius: 30px;
  padding: clamp(50px, 5vw, 80px) clamp(30px, 3vw, 70px) clamp(40px, 5vw, 72px);
  color: var(--color-white);
}

/* --------------------------------------------------------------------------
   Header（共通の section-heading コンポーネントを内包）
   濃紺背景に対して見出しの文字色を白系に上書きする
   -------------------------------------------------------------------------- */
.reasons-header {
  margin-bottom: clamp(28px, 3vw, 48px);
}

/* section-heading コンポーネントを濃紺フレーム上で使うための上書き
   news セクションの見出しと同じ横幅（コンテナ内幅 1160px）に揃える */
.reasons-header .section-heading {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  max-width: 1160px;
  margin: 0 auto;
}

.reasons-header .section-heading-label {
  color: var(--color-white);
}

.reasons-header .section-heading-title {
  color: var(--color-white);
}

/* ラベル下の装飾バー: 濃紺部分を白に置き換え（濃紺背景でも視認できるように） */
.reasons-header .section-heading-label::after {
  background: linear-gradient(
    to right,
    #52c3f7 0%,
    #52c3f7 50%,
    var(--color-white) 50%,
    var(--color-white) 100%
  );
}

/* --------------------------------------------------------------------------
   Reason Card（白カード、2 カラム）
   -------------------------------------------------------------------------- */
/* カード + 右側ナビを横並びにするラッパー */
.reason-block {
  display: flex;
  align-items: stretch;
  gap: clamp(16px, 2vw, 32px);
  max-width: 1160px;
  margin: 0 auto;
}

/* スクロール連動でカードを切替えるための縦長スクローラ。
   セクション（.reasons）自体に 3 カード分の高さを持たせ、
   内側の濃紺フレームを sticky で貼り付ける。
   フレーム自体はコンテンツ分の高さのままなので、濃紺背景の縦幅は変わらない */
.reasons.reason-scroller {
  min-height: 300vh;   /* 3枚 × 1画面分のスクロール距離 */
}

.reason-scroller .reasons-frame {
  position: sticky;
  top: clamp(16px, 4vh, 48px);
}

/* カード群: すべてのカードを同じ grid セルに重ね、opacity で切替え */
.reason-cards {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-areas: "stack";
  /* 元は白カードの左側余白を狭める（左寄せ）目的だったが、
     白カード左の余白を広く取るため、逆方向（正値）に振って右へシフトさせる
     transform は flex レイアウトに影響しないため、右カラム（.reason-nav）の位置は変わらない */
  transform: translateX(clamp(0px, 0.8vw, 16px));
}

.reason-cards > .reason-card {
  grid-area: stack;
  opacity: 0;
  visibility: hidden;
  /* 非表示 → 表示: opacity を先に、visibility は 0s で切替 */
  transition:
    opacity 0.6s var(--easing),
    visibility 0s 0.6s;
}

.reason-cards > .reason-card.is-active {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.6s var(--easing),
    visibility 0s 0s;
}

.reason-card {
  position: relative;
  min-width: 0;
  /* top は控えめに（番号ラベルは通常フローで上部に入るため大きな上余白は不要）。
     bottom は狭めにする */
  padding: clamp(28px, 2.8vw, 44px) clamp(24px, 3vw, 48px) clamp(12px, 1.5vw, 24px) clamp(40px, 5.5vw, 96px);
  background-color: var(--color-white);
  border-radius: 10px;
  color: var(--color-black);
}

/* 「Strength01：」小見出し（カードタイトルの直上） */
.reason-card-num {
  margin: 0 0 clamp(6px, 0.8vw, 10px);
  font-family: var(--font-en);
  font-size: clamp(14px, 1.3vw, 17px);
  font-weight: var(--fw-bold);
  color: var(--color-black);
  letter-spacing: 0.06em;
  line-height: 1.4;
}

/* 中身の 2 カラム: テキスト（本文 + 関連事例）| メイン写真 */
.reason-card-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(28px, 3.5vw, 48px);
  align-items: center;   /* テキスト列を写真列に対して上下中央揃え */
}

.reason-card-title {
  margin: 0 0 clamp(14px, 1.5vw, 20px);
  font-family: var(--font-jp);
  font-size: clamp(18px, 1.8vw, 24px);
  font-weight: var(--fw-bold);
  color: var(--color-black);
  line-height: 1.55;
  letter-spacing: 0.04em;
}

.reason-card-desc {
  margin: 0 0 clamp(24px, 3vw, 36px);
  font-family: var(--font-jp);
  font-size: clamp(14px, 3vw, 16px);
  line-height: 1.85;
  color: var(--color-black);
  letter-spacing: 0.03em;
}

/* Strength 03 のキャリア一覧 (箇条書き)
   ・見出し + リード文 (.reason-card-desc) の直後に配置
   ・行頭は濃紺のドットマーカー */
.reason-card-list {
  margin: 0 0 clamp(8px, 1.2vw, 16px);
  padding-left: 1em;
  list-style: disc;
  font-family: var(--font-jp);
  font-size: clamp(14px, 3vw, 16px);
  line-height: 1.85;
  color: var(--color-black);
  letter-spacing: 0.03em;
}
.reason-card-list li {
  margin-bottom: 4px;
}
.reason-card-list li::marker {
  color: var(--color-black);
  font-size: 0.7em;   /* 中黒のサイズを本文の 70% に縮小 */
}

/* -- メイン写真（右カラム） ----------------------------------------------
   写真をカードの右・上・下の padding 分だけ外側に拡張して、
   「写真のまわりの余白」を狭くする（下部に少しだけ角丸を残すため 12px は残す） */
.reason-card-media {
  /* 本文列（左）と同じ高さまで伸ばし、写真の上下左右の余白を 16px で揃える。
     各辺の負マージンは「対応する padding 分だけ外側へ拡張し、16px だけカード内に残す」形。
     body の padding を変更したら、対応する clamp をここも合わせる（不一致だと余白がズレる）*/
  align-self: stretch;
  margin-right:  calc(-1 * clamp(24px, 3vw, 48px) + 16px);
  margin-top:    calc(-1 * clamp(28px, 2.8vw, 44px) + 16px);
  margin-bottom: calc(-1 * clamp(12px, 1.5vw, 24px) + 16px);
}

.reason-card-media img {
  display: block;
  width: 100%;
  height: 100%;                        /* 枠（stretch）いっぱいに写真を表示して下余白を 16px に揃える */
  object-fit: cover;
  border-radius: 8px;
}

/* -- 右側の縦型ステップナビ（Reason 01 / 02 / 03） --------------------- */
.reason-nav {
  flex-shrink: 0;
  display: flex;
}

.reason-nav-list {
  list-style: none;
  margin: 0;
  /* 横幅を少し狭く（横 padding を圧縮 + min-width も引き下げ） */
  padding: clamp(24px, 2.5vw, 36px) clamp(12px, 1.2vw, 20px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: clamp(28px, 4vw, 56px);
  min-width: clamp(56px, 4vw, 72px);
  /* 濃紺フレーム上で目立つよう、少し明るい青のピル */
  background-color: #E9F2F9;
  /* ピル型: 上下を完全に丸める */
  border-radius: 999px;
}

.reason-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-en);
  font-style: italic;
  font-weight: var(--fw-bold);
  font-size: clamp(20px, 1.8vw, 26px);
  color: rgba(255, 255, 255, 0.35);   /* デフォルトは薄い */
  line-height: 1;
  transition: color var(--transition-speed) var(--easing);
}

.reason-nav-item.is-active {
  color: var(--color-black);
}

/* 左側の小さな丸ドット（アクティブ時のみ塗る） */
.reason-nav-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: transparent;
  transition: background-color var(--transition-speed) var(--easing);
}

.reason-nav-item.is-active .reason-nav-dot {
  background-color: var(--color-secondary);   /* スカイブルー */
}

.reason-nav-num {
  letter-spacing: 0.02em;
}

/* ==========================================================================
   Project Story — 支援事例ストーリー（横スクロール事例カード）
   参考: TOP_project.png / 色味は BLUE SKY JAPAN の濃紺 × スカイブルーへ変換
   ========================================================================== */
.project {
  position: relative;
  /* セクション上部の余白を通常(.section-padding)より 40px 広く */
  padding-top: calc(var(--space-2xl) + 40px);
  /* .business-stats-wrap と同一設定の固定背景。
     background-attachment:fixed により viewport 基準で位置が固定されるため、
     上の .business-stats-wrap から Project Story まで背景が途切れず 1 枚として繋がる。
     画像未読込時は #e9f2f9 にフォールバック */
  background-color: #e9f2f9;   /* フォールバック（淡水色） */
  background-image: url('../image/TOP_haikei.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
  overflow: hidden;   /* 装飾ブロブが横にはみ出しても切る */
}

.project > .container {
  position: relative;
  z-index: 1;
  /* Education（.facility）セクションと同じコンテンツ幅（1320px・中央寄せ） */
  max-width: min(1320px, calc(100vw - 40px));
}

/* --------------------------------------------------------------------------
   レイアウト: 左（見出し）| 右（横スクロール）
   -------------------------------------------------------------------------- */
/* 見出しを上部中央、スライダーを全幅、CTA を下部中央に縦積み */
.project-layout {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3vw, 40px);
}
/* .project-intro を解除し、内側（見出し/説明/CTA）を .project-layout 直下の子に昇格 */
.project-intro {
  display: contents;
}
.project-intro-heading { order: 1; }
.project-slider        { order: 2; }
.project-cta           { order: 3; align-self: center; }

/* section-heading コンポーネントを Project Story で使う際の上書き:
   下余白は .project-layout の gap に任せる */
.project-intro-heading .section-heading {
  margin-bottom: 0;
}
/* 見出し「受け入れ事例・実績」を1行に収める（改行禁止） */
.project-intro-heading .section-heading-title {
  white-space: nowrap;
}

.project-label {
  display: inline-block;
  font-family: var(--font-en);
  font-style: italic;
  font-weight: var(--fw-bold);
  font-size: clamp(14px, 1.1vw, 16px);
  color: var(--color-primary);
  letter-spacing: 0.15em;
  margin-bottom: clamp(16px, 2vw, 24px);
}

.project-heading {
  margin: 0 0 clamp(20px, 2.5vw, 32px);
  font-family: var(--font-jp);
  font-size: clamp(24px, 2.6vw, 38px);
  font-weight: var(--fw-bold);
  color: var(--color-black);
  line-height: 1.5;
  letter-spacing: 0.03em;
}

/* CTA（添付画像デザイン: 白ピル + 濃紺ボーダー + 濃紺テキスト中央 + 右端に濃紺シェブロン） */
.project-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: clamp(280px, 30vw, 420px);
  padding: clamp(16px, 1.8vw, 20px) clamp(44px, 4.5vw, 60px);
  background-color: var(--color-white);
  border: 1.5px solid var(--color-primary);
  border-radius: var(--radius-full);
  font-family: var(--font-jp);
  font-size: var(--fz-md);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  letter-spacing: var(--ls-md);
  line-height: 1.3;
  text-decoration: none;
  transition: background-color var(--transition-speed) var(--easing),
              color var(--transition-speed) var(--easing);
}
/* 右端の細いシェブロン（円なし） */
.project-cta-arrow {
  position: absolute;
  top: 50%;
  right: clamp(22px, 2.4vw, 30px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
  transition: transform var(--transition-speed) var(--easing);
}
.project-cta-arrow svg {
  width: 18px;
  height: 18px;
}
/* ホバー: 濃紺で塗り、テキスト・矢印を白に。矢印を少し右へ */
.project-cta:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
  opacity: 1;
}
.project-cta:hover .project-cta-arrow {
  transform: translateY(-50%) translateX(4px);
}

/* blur-in（フェードイン）と hover の transition を両立させるため一括再定義 */
.project-cta.blur-in {
  transition-property: opacity, filter, transform, background-color, color;
  transition-duration: 1s, 1s, 1s, var(--transition-speed), var(--transition-speed);
  transition-timing-function: var(--easing), var(--easing), var(--easing), var(--easing), var(--easing);
  transition-delay: var(--blur-delay, 0s), var(--blur-delay, 0s), var(--blur-delay, 0s), 0s, 0s;
}

/* --------------------------------------------------------------------------
   右カラム: 横スクロール（scroll-snap で 1 カードずつフィット）
   -------------------------------------------------------------------------- */
.project-slider {
  position: relative;
  min-width: 0;   /* grid 内で overflow-x を効かせるため */
}

/* 2 カラムグリッド（横スクロール廃止） */
.project-track {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 40px);
  /* カードの box-shadow が四方に広がるので、見切れ防止に少しゆとりを取る */
  padding: 8px 4px 40px;
}

/* --------------------------------------------------------------------------
   Story Card
   -------------------------------------------------------------------------- */
.project-card {
  position: relative;   /* 内側の .project-card-link::after が絶対配置の基準になる */
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  background-color: var(--color-white);
  border-radius: 15px;
  /* 内側の写真（.project-card-photo）が角丸なしのためカード上部の角丸が欠けて見える。
     overflow:hidden で子要素をカードの丸角にクリップして四隅とも丸くする */
  overflow: hidden;
}


/* カード全域をクリック可能に:
   .project-card-link::after を絶対配置でカード全面に広げ、
   カード内どこをクリックしてもリンク先へ遷移するようにする */
.project-card-link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* 最後のカードは "end" スナップに切替え。
   最右のカードは start にスナップしようとするとスクロール可能量が足りず、
   1 つ前のカードの位置で止まり見切れてしまう。end スナップにすることで、
   カードの右端がスクロールポート右端に揃う位置で止まり全体が見えるようになる */
.project-card:last-child {
  scroll-snap-align: end;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(5, 56, 125, 0.06);
}

.project-card-photo {
  position: relative;   /* 内側のオーバーレイ要素の絶対配置の基準 */
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: var(--color-gray-light);
}

/* --------------------------------------------------------------------------
   トップページ Project のカード: 写真はカード枠に密着させて上部いっぱいに敷き、
   左上の通し番号バッジを写真の上に重ねる。本文は 企業名 → タイトル
   → 実績タイル → 区切り線 → 受け入れ後の効果、の順に積む
   -------------------------------------------------------------------------- */
.project .project-card {
  border-radius: 22px;   /* 共通カードの 15px より大きめ */
}
/* 左上の通し番号バッジ（写真の左上角に重ねる） */
.project-card-num {
  position: absolute;
  top: clamp(14px, 1.4vw, 18px);
  left: clamp(14px, 1.4vw, 18px);
  z-index: 2;
  padding: 5px 13px;
  background-color: var(--color-primary);
  border-radius: 10px;   /* 写真の角丸（13px）に寄せる */
  font-family: var(--font-en);
  font-size: clamp(11px, 1vw, 13px);
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  line-height: 1.4;
  color: var(--color-white);
}
/* 写真はカード枠に密着。上の角丸はカード側の overflow:hidden でクリップされる */
.project .project-card-photo {
  aspect-ratio: 16 / 9;
}

/* 企業名（濃紺） */
.project-card-company {
  margin: 0;
  font-family: var(--font-jp);
}
.project-card-company-name {
  font-size: clamp(17px, 1.9vw, 23px);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  letter-spacing: 0.03em;
  line-height: 1.4;
}

/* 受け入れ後の効果（詳細ページ本文から流用）: 上に区切り線 */
.project-card-points {
  margin: 0;
  padding: clamp(14px, 1.4vw, 18px) 0 0;
  border-top: 1px solid var(--color-gray-border);
  list-style: none;
  font-family: var(--font-jp);
}
.project-card-points li {
  font-size: 14px;
  color: var(--color-gray);
  letter-spacing: 0.02em;
  line-height: 1.85;
}
/* 「詳しく見る」ボタン: 共通の 13px から 2px 大きく */
.project .project-card-link {
  font-size: 15px;
}
/* 写真は全幅のため、内側余白は本文ブロックだけに持たせる */
.project .project-card-body {
  padding: clamp(14px, 1.4vw, 18px);
  gap: clamp(10px, 1.1vw, 14px);
}
/* タイトルは企業名より一段小さく、黒太字。
   min-height（2行分）は据え置き、2枚のカードで実績タイルの高さを揃える */
.project .project-card-title {
  margin: 0;
  font-size: clamp(13px, 1.3vw, 16px);
}

/* --------------------------------------------------------------------------
   Coming Soon カード（後日掲載）: 写真エリアを Coming Soon プレースホルダに
   置き換え、カード全体をモノクロトーンで表示する
   -------------------------------------------------------------------------- */
.project-card--coming-soon {
  /* カード全体をモノトーンに（背景・テキスト・ボタンすべて含めてグレースケール化） */
  filter: grayscale(1);
  /* 少し彩度を落とす代わりに、モノクロ感を強調するための微調整
     （明るさは維持して読める状態を保つ） */
}

/* Coming Soon プレースホルダ: 4:3 の枠を保ちつつ薄いグレーで塗る */
.project-card-photo--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-gray-light);
  color: var(--color-gray);
}
.project-card-coming-label {
  font-family: var(--font-en);
  font-style: italic;
  font-weight: var(--fw-bold);
  font-size: clamp(18px, 1.8vw, 22px);
  letter-spacing: 0.08em;
  color: var(--color-gray);
}

/* 写真選定中のプレースホルダーテキスト (Coming Soon とは別の日本語ラベル)
   写真がある場合はその上に白ピルでオーバーレイする */
.project-card-photo-placeholder {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  padding: 6px 14px;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 999px;
  white-space: nowrap;
  font-family: var(--font-jp);
  font-size: 14px;
  letter-spacing: 0.05em;
  color: var(--color-gray);
}

/* Coming Soon カードのタイトル「後日掲載予定」の下に 1 行分の余白を追加 */
.project-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.project-card-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 20px 20px;
  flex: 1;
}

.project-card-title {
  margin: 0 0 6px;    /* 見出しと直下の 3 タイル (.cases-stats) の間隔を詰める */
  font-family: var(--font-jp);
  font-size: 15px;
  font-weight: var(--fw-bold);
  color: var(--color-black);
  line-height: 1.55;
  letter-spacing: 0.02em;
  /* 3行までにクランプしてカード高さを揃える */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* タイトルが 1 行のカード（「随時更新予定」等）でも 2 行分の高さを確保し、
     直下の 3 タイル / 企業様名枠の縦位置を全カードで揃える（1.55 × 2 行） */
  min-height: 3.1em;
}

/* 企業名の dl（塗りなし + グレー 1px 枠。トップ / 受け入れ事例ページで共通） */
.project-card-meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  margin: 4px 0 0;
  background-color: transparent;
  border: 1px solid var(--color-gray-border);
  border-radius: 10px;
  font-family: var(--font-jp);
  font-size: 12px;
}
.project-card-meta dt {
  color: var(--color-gray);
  font-weight: var(--fw-medium);
}
.project-card-meta dd {
  margin: 0;
  color: #111;
  font-weight: var(--fw-bold);
}

.project-card-foot {
  margin-top: auto;
  padding-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.project-card-loc {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-jp);
  font-size: 12px;
  color: var(--color-primary);
  font-weight: var(--fw-medium);
}
.project-card-loc svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* 種別タグ（実績 / 事例）— <h3> の内側先頭に inline-block で配置。
   見出しテキストが折り返した際、2 行目以降はタグを回り込まず左端から始まる */
.project-card-type-tag {
  display: inline-block;
  vertical-align: 2px;   /* テキストの光学的な中心とタグの中心を近づける微調整 */
  margin-right: 8px;
  padding: 5px 14px;
  font-family: var(--font-jp);
  font-size: 12px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  line-height: 1;
  border-radius: var(--radius-full);
}
.project-card-type-tag--case {
  background-color: var(--color-white);
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
}
.project-card-type-tag--record {
  background-color: var(--color-white);
  color: var(--color-secondary);
  border: 1px solid var(--color-secondary);
}

.project-card-link {
  display: flex;
  width: 100%;
  margin-top: auto;   /* カード下端に押しやる（旧 .project-card-foot の役割） */
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  background-color: var(--color-primary);
  color: var(--color-white);
  border-radius: 999px;
  font-family: var(--font-jp);
  font-size: 13px;
  font-weight: var(--fw-bold);
  text-decoration: none;
  transition: background var(--transition-speed) var(--easing);
}

.project-card-link-text,
.project-card-link-arrow {
  /* ホバーで少し右へ動かすため、内側の spans に transform をかける
     ※ リンク自身に transform をかけると ::after オーバーレイも一緒に動いて
     カード左端付近でホバーのちらつきループが発生するため、
     内側だけを動かす */
  transition: transform var(--transition-speed) var(--easing);
}

/* 矢印コンテナ: スライドスルーの track */
.project-card-link-arrow {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  overflow: hidden;
}
.project-card-link-arrow > svg {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
  transition: transform 0.45s var(--easing);
}
/* 追い抜き用の 2枚目矢印。currentColor でボタンの色を継承 */
.project-card-link-arrow::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(calc(-50% - 100%), -50%);
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M13 6l6 6-6 6'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M13 6l6 6-6 6'/></svg>") center / contain no-repeat;
  transition: transform 0.45s var(--easing);
  pointer-events: none;
}
.project-card-link:hover {
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  opacity: 1;
}
/* ホバー: 現矢印が右へ、::after が中央へスライドイン */
.project-card-link:hover .project-card-link-arrow > svg {
  transform: translateX(100%);
}
.project-card-link:hover .project-card-link-arrow::after {
  transform: translate(-50%, -50%);
}

/* カードホバーで写真をゆっくり拡大（.project-card-photo が overflow:hidden で切ってくれる） */
.project-card-photo img {
  transition: transform 0.5s var(--easing);
}
.project-card:hover .project-card-photo img {
  transform: scale(1.06);
}

/* ==========================================================================
   Facility — 施設紹介
   .facility-* に加えて .project-* を併記しているため、レイアウト・カード・スクロール等の
   デザインは Project セクションのものをそのまま流用する。
   ここでは Facility 固有の差分だけを定義:
   ・セクション背景は白（Project の固定背景を打ち消す）
   ・カード全体が <a> なので、テキスト装飾・色をリセット
   ・カード ::hover で軽く上へ浮かせる
   ・タイトル → 所在地の並びに合わせて gap 調整
   ========================================================================== */

/* Project の背景（TOP_haikei.jpg + attachment:fixed）を打ち消して白背景に */
.facility {
  background-color: var(--color-white);
  background-image: none;
  background-attachment: initial;
}

.facility-card {
  text-decoration: none;
  color: inherit;
  background-color: var(--color-primary-light);
}

.facility-card:hover {
  opacity: 1;
}

/* 各カードの所在地を下端揃えに（タイトルの行数が異なっても揃うように） */
.facility-card-loc {
  margin-top: auto;
}

/* ==========================================================================
   Movie — YouTube 動画紹介
   紺のガラスカード内に「見出し + 説明（左揃え・白文字）」→「動画 2 つ横並び」
   ========================================================================== */
.movie {
  background-color: var(--color-white);
}

/* .section-padding のデフォルト（上下 100px）より少し詰めた余白 */
main > section.movie {
  padding-top: clamp(48px, 5vw, 72px);
  padding-bottom: clamp(48px, 5vw, 72px);
}

/* ガラスカードの横幅をお問い合わせセクションと揃える（.contact > .container と同値） */
.movie > .container {
  max-width: 1500px;
  padding-left: 20px;
  padding-right: 20px;
}

/* 紺のガラスカード（コンテナ）: reasons セクションと同一のグラスモーフィズム。
   左右 padding はお問い合わせの .contact-frame と揃える（テキスト範囲を一致させるため） */
.movie-frame {
  position: relative;
  padding: clamp(28px, 3.5vw, 56px) clamp(28px, 4vw, 64px);
  background-color: #E9F2F9;                       /* Strength セクションのカードと同じ水色 */
  border-radius: clamp(20px, 2vw, 32px);
  color: var(--color-black);
  overflow: hidden;
}

/* テキスト範囲: お問い合わせの .contact-inner と同じ最大幅 1160px・中央寄せ */
.movie-inner {
  max-width: 1160px;
  margin: 0 auto;
}

/* テキストブロック（動画の上・中央揃え） */
.movie-head {
  margin: 0 0 clamp(28px, 3.5vw, 48px);
  text-align: center;
}
/* 水色カード上: 見出しは共通コンポーネントの既定色（ラベル濃紺 / タイトル黒 / 線濃紺）をそのまま使用 */

/* 説明文（見出し下・中央・黒文字） */
.movie-desc {
  max-width: 820px;
  margin: clamp(20px, 2.5vw, 32px) auto 0;
  font-family: var(--font-jp);
  font-size: clamp(14px, 3vw, 16px);
  font-weight: var(--fw-regular);
  color: var(--color-black);
  letter-spacing: 0.04em;
  line-height: 1.8;
  text-align: center;
}

/* CTA（動画の下・中央） */
.movie-more-wrap {
  display: flex;
  justify-content: center;
  margin-top: clamp(28px, 3.5vw, 48px);
}

/* CTA ボタン（添付画像デザイン: 白ピル + 濃紺ボーダー + YouTubeアイコン + 外部リンクアイコン） */
.movie-more {
  display: inline-flex;
  align-items: center;
  gap: clamp(10px, 1.2vw, 14px);
  max-width: 100%;
  padding: clamp(12px, 1.4vw, 16px) clamp(24px, 3vw, 36px);
  background-color: var(--color-white);
  border: 1.5px solid var(--color-primary);
  border-radius: var(--radius-full);
  font-family: var(--font-jp);
  font-size: var(--fz-md);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  letter-spacing: var(--ls-md);
  line-height: 1.3;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color var(--transition-speed) var(--easing),
              color var(--transition-speed) var(--easing);
}
/* 左: YouTube アイコン（濃紺の角丸四角 + 白い三角） */
.movie-more-yt {
  flex-shrink: 0;
  display: inline-flex;
  width: clamp(22px, 2.2vw, 26px);
  height: clamp(22px, 2.2vw, 26px);
  color: var(--color-primary);
}
.movie-more-yt svg { display: block; width: 100%; height: 100%; }
.movie-more-yt-box { fill: currentColor; }
.movie-more-yt-play { fill: var(--color-white); }
/* 右: 外部リンクアイコン */
.movie-more-ext {
  flex-shrink: 0;
  display: inline-flex;
  width: clamp(16px, 1.6vw, 20px);
  height: clamp(16px, 1.6vw, 20px);
}
.movie-more-ext svg { display: block; width: 100%; height: 100%; }
/* ホバー: 濃紺で塗り、文字・外部リンクを白、YouTube四角を白＋三角を濃紺に反転 */
.movie-more:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
  opacity: 1;
}
.movie-more:hover .movie-more-yt { color: var(--color-white); }
.movie-more:hover .movie-more-yt-play { fill: var(--color-primary); }

/* 動画 2 つ横並び */
.movie-videos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 40px);
}

/* 各動画枠: 16:9 のレスポンシブ埋め込み */
.movie-video-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: clamp(8px, 1vw, 14px);
  overflow: hidden;
  background-color: #0a0a0a;
}
.movie-video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ==========================================================================
   Recruit — 採用情報（TOP_recruit.jpg のデザイン移植）
   構成:
     .recruit                  セクション（白背景）
       > .container
         > .recruit-header     左: 見出し + 説明 | 右: CTA ボタン
       > .recruit-marquee       ビューポート幅で無限横スクロールする写真帯
   ========================================================================== */
.recruit {
  background-color: var(--color-white);
  overflow: hidden;                   /* marquee のはみ出し部分をクリップ */
}
/* セクション上部の余白を狭めに */
.recruit.section-padding {
  padding-top: 32px;
}

/* セクション横幅を news / reasons と同じ 1460px 上限に広げる */
/* Recruit のヘッダー領域（見出し + CTA）は Education（.facility.project）と揃えて
   標準の .container 幅（1200px 上限、左右自動センタリング）を使用する。
   直下の .recruit-marquee は .container の外側に配置しているため、
   ここでは幅指定を持たずに従来どおりビューポート幅で無限スクロールする */
.recruit > .container {
  max-width: 1320px;
}

/* ヘッダー部（左: テキスト / 右: CTA） */
.recruit-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(24px, 3vw, 40px);
  margin-bottom: clamp(48px, 6vw, 96px);
}

.recruit-header-text {
  width: 100%;
  min-width: 0;
}

/* section-heading の下線を消して、下に h2 の説明が続く形にする */
.recruit-header-text .section-heading {
  border-bottom: none;
  padding-bottom: 0;
}

/* Recruit の見出し h2 (Project セクションの .project-desc と同じスタイル系統) */
.recruit-desc {
  margin: clamp(20px, 2vw, 32px) 0 0;
  font-family: var(--font-jp);
  font-size: clamp(22px, 2.4vw, 36px);
  font-weight: var(--fw-bold);
  color: var(--color-black);
  line-height: 1.6;
  letter-spacing: 0.04em;
}

/* --------------------------------------------------------------------------
   無限横スクロール マーキー
   ・6 枚を 2 セット並べて全 12 枚に。translateX(-50%) で 1 セット分ちょうど移動
   ・アイテムに margin-right を持たせることで、gap 分を含めても半分ぴったり
   ・hover で一時停止、prefers-reduced-motion で完全停止
   -------------------------------------------------------------------------- */
.recruit-marquee {
  width: 100%;
  overflow: hidden;
  padding: 0;
}

.recruit-marquee-track {
  display: flex;
  width: max-content;
  animation: recruitMarquee 50s linear infinite;
  /* GPU レイヤー化してアニメーションを安定させる（途中で止まらないように） */
  will-change: transform;
}

@keyframes recruitMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }   /* 6 枚（＝全 12 枚の半分）ちょうど分だけ移動 */
}

.recruit-marquee-item {
  flex-shrink: 0;
  width: clamp(280px, 26vw, 440px);
  aspect-ratio: 3 / 2;                     /* 横長 */
  overflow: hidden;
  border-radius: clamp(12px, 1.2vw, 18px);
  /* gap の代わりに margin-right を使う（translateX の -50% と正確に噛み合わせるため） */
  margin-right: clamp(12px, 1.2vw, 20px);
}

.recruit-marquee-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* モーションを控えたい環境ではアニメーションを停止 */
@media (prefers-reduced-motion: reduce) {
  .recruit-marquee-track {
    animation: none;
  }
}

/* ==========================================================================
   Contact — お問い合わせ（TOP_contact.jpg のデザイン移植）
   構成:
     .contact                 セクション（白背景）
       > .container
         > .contact-frame     濃紺の角丸バナー
             > .contact-text  左: 見出し + 説明文
             > .contact-cta   右: 白のピル型リンクボタン
   ========================================================================== */
.contact {
  background-color: #E9F2F9;
}

/* セクション横幅を news/reasons と同じ 1460px 上限に。
   ただし画面幅がどれだけ狭くなっても左右に 20px の余白を必ず確保する */
.contact > .container {
  max-width: 1500px;   /* 1460px の navy フレーム + 左右 20px の余白 */
  padding-left: 20px;
  padding-right: 20px;
}

.contact-frame {
  position: relative;
  padding: clamp(36px, 4.5vw, 72px) clamp(28px, 4vw, 64px);
  background-color: #3ba1b3;
  border-radius: clamp(16px, 1.6vw, 24px);
  color: var(--color-white);
  overflow: hidden;
}

/* 背景装飾: contact_haikei.jpg を #3ba1b3 の上に薄く重ねる */
.contact-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../image/contact_haikei.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  opacity: 0.3;
  pointer-events: none;
  z-index: 0;
}

/* コンテンツを ::before の上に配置 */
.contact-frame > .contact-inner {
  position: relative;
  z-index: 1;
}

/* テキスト（上・中央）→ CTA（下・中央）を縦積み。frame の中央に 1160px 上限で配置 */
.contact-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(28px, 3.5vw, 48px);
  max-width: 1160px;
  margin: 0 auto;
}

.contact-text {
  width: 100%;
  min-width: 0;
}

/* Contact 内の section-heading コンポーネントを navy 背景用に上書き */
/* ティールバナー上: 横線・ラベル・見出し・説明文を白系に */
.contact-text .section-heading-label,
.contact-text .section-heading-title,
.contact-text .section-heading-desc {
  color: var(--color-white);
}
.contact-text .section-heading-label::after {
  background-color: var(--color-white);
}

/* --------------------------------------------------------------------------
   CTA — 共通の .btn.btn--outline を利用（白ピル + 濃紺円 + 白矢印）。
   ここでは Contact 用に「左端の紙飛行機/電話アイコン」だけ追加する。
   2 つの CTA（お問い合わせ / 電話）を縦積みするラッパー
   -------------------------------------------------------------------------- */
.contact-actions {
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(12px, 1.5vw, 20px);
}

.contact-cta {
  min-width: clamp(240px, 22vw, 320px);
}

/* 左端の紙飛行機アイコン */
.contact-cta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(20px, 1.6vw, 24px);
  height: clamp(20px, 1.6vw, 24px);
  color: var(--color-primary);
  flex-shrink: 0;
}
/* primary バリアント（濃紺ピル）の場合はアイコンを白にしてコントラスト確保 */
.contact-cta.btn--primary .contact-cta-icon {
  color: var(--color-white);
}
.contact-cta-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ==========================================================================
   Footer — TOP_footer.jpg のデザイン移植
   構成:
     .footer                    navy 背景の全幅フッター
       > .container
         > .footer-inner        3 列 grid（左: ブランド / 中: メインナビ / 右: サブナビ）
         > .footer-bottom       コピーライトの帯
   ========================================================================== */
.footer {
  position: relative;                 /* 山イラスト（::after）の絶対配置の基準 */
  overflow: hidden;                   /* 右にはみ出す分を切り、横スクロールを防ぐ */
  background-color: #f5f9fc;
  color: var(--color-black);
  padding: clamp(48px, 5vw, 84px) 0 clamp(20px, 2.4vw, 32px);
}

/* 背景の山イラスト（装飾のみ）。右下に寄せ、裾をコピーライト上の区切り線に重ねる。
   z-index で区切り線より前面に置き、pointer-events: none でクリックは透過させる */
.footer::after {
  content: '';
  position: absolute;
  right: -24px;
  bottom: clamp(68px, calc(5.5vw + 16px), 96px);
  z-index: 1;
  width: clamp(360px, 66%, 1040px);
  aspect-ratio: 1000 / 213;
  background: url('../image/footer.png') no-repeat center / 100% 100%;
  pointer-events: none;
}

.footer > .container {
  max-width: min(1460px, calc(100vw - 40px));
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: clamp(32px, 4vw, 80px);
}

/* --------------------------------------------------------------------------
   左: ブランド + タグライン + お問い合わせ
   -------------------------------------------------------------------------- */
.footer-brand {
  flex-shrink: 0;
  width: clamp(240px, 22vw, 300px);
  display: flex;                /* ロゴ → お問い合わせボタン を縦積み */
  flex-direction: column;
  align-items: flex-start;
}

.footer-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
  transition: opacity var(--transition-speed) var(--easing);
}
.footer-logo:hover {
  opacity: 0.85;
}

/* ロゴ画像（マーク + 社名 + タグラインを 1 枚に収めたもの。500×161） */
.footer-logo-img {
  display: block;
  width: clamp(220px, 19vw, 280px);
  height: auto;
}

/* ブランドのキャッチコピー（ロゴの下・3行） */
.footer-catch {
  margin: clamp(24px, 2.6vw, 36px) 0 0;
  font-family: var(--font-jp);
  font-size: clamp(16px, 1.35vw, 20px);
  font-weight: var(--fw-medium);
  color: var(--color-black);
  line-height: 1.75;
  letter-spacing: 0.04em;
}

/* お問い合わせボタン（枠線 → hover で反転） */
.footer-contact-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: clamp(20px, 2.2vw, 30px);   /* キャッチコピーとの間隔 */
  width: 100%;
  max-width: 260px;
  padding: 13px 18px;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-full);
  background-color: var(--color-white);
  color: var(--color-primary);
  text-decoration: none;
  font-family: var(--font-jp);
  font-size: var(--fz-base);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  transition: background-color var(--transition-speed) var(--easing),
              color var(--transition-speed) var(--easing);
}
.footer-contact-btn:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
  opacity: 1;
}
.footer-contact-btn-icon {
  display: inline-flex;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.footer-contact-btn-icon svg { width: 100%; height: 100%; display: block; }
.footer-contact-btn-text { flex: 1; }
.footer-contact-btn-arrow {
  display: inline-flex;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  transition: transform var(--transition-speed) var(--easing);
}
.footer-contact-btn-arrow svg { width: 100%; height: 100%; display: block; }
.footer-contact-btn:hover .footer-contact-btn-arrow { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   Follow Us（サイトマップの下・横罫線で区切った SNS 行）
   -------------------------------------------------------------------------- */
.footer-social {
  display: flex;
  align-items: flex-start;
  gap: clamp(24px, 3vw, 56px);
  margin-top: clamp(28px, 3vw, 44px);
  padding-top: clamp(24px, 2.6vw, 40px);
  border-top: 1px solid rgba(5, 78, 171, 0.14);
}

/* 「Follow Us」ラベル（下に短い線） */
.footer-social-label {
  flex-shrink: 0;
  margin: 0;
  padding-top: 6px;
  font-family: var(--font-en);
  font-size: clamp(12px, 1vw, 14px);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  letter-spacing: 0.06em;
  line-height: 1;
}
.footer-social-label::after {
  content: '';
  display: block;
  width: 22px;
  height: 1.5px;
  margin-top: 10px;
  background-color: var(--color-primary);
}

/* SNS: アイコン + 名称を縦積みにして横並び */
.footer-sns {
  display: flex;
  align-items: flex-start;
  gap: clamp(20px, 2.4vw, 36px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.footer-sns-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.footer-sns-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--color-white);
  text-decoration: none;
  transition: transform var(--transition-speed) var(--easing),
              opacity var(--transition-speed) var(--easing);
}
.footer-sns-link svg {
  width: 22px;
  height: 22px;
  display: block;
}
.footer-sns-link:hover {
  transform: translateY(-2px);
  opacity: 0.88;
}
/* 各SNSのブランドカラーで塗り（YouTube のみ角丸四角） */
.footer-sns-link--facebook { background-color: #1877f2; }
.footer-sns-link--tiktok   { background-color: #000000; }
.footer-sns-link--youtube  { background-color: #ff0000; }

/* アイコン内側の絵柄サイズ調整 */
.footer-sns-link--facebook svg { width: 26px; height: 26px; }
.footer-sns-link--tiktok svg   { width: 28px; height: 28px; }

/* SNS 名称（アイコンの下） */
.footer-sns-name {
  font-family: var(--font-en);
  font-size: clamp(11px, 0.85vw, 13px);
  font-weight: var(--fw-medium);
  color: var(--color-black);
  letter-spacing: 0.02em;
  line-height: 1;
}

/* --------------------------------------------------------------------------
   右カラム: メガメニュー（主項目 + 小項目を展開）
   -------------------------------------------------------------------------- */
.footer-nav {
  flex: 1;
  min-width: 0;
  padding-top: clamp(4px, 0.6vw, 10px);
}
.footer-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: clamp(16px, 1.6vw, 24px) 0;
}

/* 各列は縦罫線で区切る（左端の列にも引いてブランド側と分ける） */
.footer-nav-col {
  min-width: 0;
  padding: 0 clamp(8px, 1vw, 16px);
  border-left: 1px solid rgba(5, 78, 171, 0.14);
}

/* 列見出し（濃紺・下に短い線） */
.footer-nav-head {
  display: inline-block;
  margin-bottom: clamp(14px, 1.4vw, 20px);
  font-family: var(--font-jp);
  font-size: clamp(12px, 0.95vw, 14px);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  text-decoration: none;
  letter-spacing: 0.03em;
  line-height: 1.3;
  transition: opacity var(--transition-speed) var(--easing);
}
.footer-nav-head::after {
  content: '';
  display: block;
  width: 20px;
  height: 1.5px;
  margin-top: 10px;
  background-color: var(--color-primary);
}
.footer-nav-head:hover {
  opacity: 0.7;
}

/* 小項目 */
.footer-subnav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.footer-subnav-item {
  margin: 0;
}
.footer-subnav-link {
  display: inline-block;
  font-family: var(--font-jp);
  font-size: clamp(11px, 0.85vw, 13px);
  font-weight: var(--fw-regular);
  color: var(--color-gray);
  text-decoration: none;
  letter-spacing: 0.02em;
  line-height: 1.5;
  transition: color var(--transition-speed) var(--easing);
}
.footer-subnav-link:hover {
  color: var(--color-primary);
  opacity: 1;
}

/* --------------------------------------------------------------------------
   下部: コピーライト + プライバシー + ページトップ
   -------------------------------------------------------------------------- */
.footer-bottom {
  display: grid;
  grid-template-columns: 1fr auto 1fr;   /* 中央にコピーライト、右にページトップ */
  align-items: center;
  gap: clamp(12px, 1.4vw, 20px);
  margin-top: clamp(24px, 2.6vw, 40px);
  padding-top: clamp(16px, 1.6vw, 24px);
  border-top: 1px solid rgba(5, 78, 171, 0.14);
}

/* コピーライト + プライバシーポリシーを中央にまとめる */
.footer-bottom-center {
  grid-column: 2;
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.4vw, 22px);
}

/* 区切りの縦線 */
.footer-bottom-sep {
  width: 1px;
  height: 14px;
  background-color: rgba(17, 17, 17, 0.25);
}

.footer-copy {
  margin: 0;
  font-family: var(--font-en);
  font-size: clamp(11px, 0.85vw, 13px);
  color: rgba(17, 17, 17, 0.6);
  letter-spacing: 0.08em;
}

.footer-privacy {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-jp);
  font-size: clamp(11px, 0.85vw, 13px);
  font-weight: var(--fw-regular);
  color: var(--color-black);
  text-decoration: underline;
  text-underline-offset: 3px;
  letter-spacing: 0.04em;
  transition: opacity var(--transition-speed) var(--easing);
}
.footer-privacy:hover {
  opacity: 0.7;
}
.footer-privacy-icon {
  flex-shrink: 0;
  display: inline-flex;
  width: 13px;
  height: 13px;
}
.footer-privacy-icon svg { width: 100%; height: 100%; display: block; }

/* ページトップへ戻る（右端・白丸 + 濃紺の枠と矢印） */
.footer-pagetop {
  grid-column: 3;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(42px, 3.4vw, 50px);
  height: clamp(42px, 3.4vw, 50px);
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid rgba(5, 78, 171, 0.35);
  background-color: var(--color-white);
  color: var(--color-primary);
  transition: background-color var(--transition-speed) var(--easing),
              color var(--transition-speed) var(--easing);
}
.footer-pagetop:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
  opacity: 1;
}
.footer-pagetop svg {
  width: 42%;
  height: 42%;
  display: block;
}

/* フッター小項目・ページ内リンクからのアンカー着地位置を、固定ヘッダー分だけ下げる */
.services-item[id],
#cases-list,
#record,
#philosophy,
#strength-01 {
  scroll-margin-top: 100px;
}

/* ==========================================================================
   Page Hero — 下層ページ共通のヒーロー（hero-section.png のデザイン移植）
   構成:
     .page-hero                   セクション（白背景 + 左側に斜めの光線パターン）
       > .container
         > .page-hero-inner       左: ラベル + 見出し / 右: メインビジュアル
         > .page-hero-breadcrumb  パンくずリスト（下段）
   ========================================================================== */
.page-hero {
  position: relative;
  background-color: white;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  padding: clamp(90px, 9vw, 130px) 0 clamp(28px, 3vw, 48px);
  overflow: hidden;
}

/* テキスト読みやすさ確保のため、背景写真の上に薄い白オーバーレイをかける */
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-color: rgba(255, 255, 255, 0.55);
  z-index: 0;
}

/* 左上に大きく配置するブランド装飾（地球儀＋鳩のうっすらしたグラフィック） */
.page-hero::after {
  content: '';
  position: absolute;
  top: 80px;
  left: -20px;
  width: clamp(360px, 45vw, 580px);
  aspect-ratio: 1 / 1;
  background-image: url('../image/hero-haikei.png');
  background-repeat: no-repeat;
  background-position: top left;
  background-size: contain;
  pointer-events: none;
  z-index: 0;
}

.page-hero > .container {
  position: relative;
  z-index: 1;
  max-width: min(1460px, calc(100vw - 40px));
}

.page-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 96px);
  align-items: center;
}

/* --------------------------------------------------------------------------
   左カラム: 英語ラベル + 大見出し
   -------------------------------------------------------------------------- */
.page-hero-text {
  min-width: 0;
}

.page-hero-label {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 clamp(12px, 1.4vw, 20px);
  font-family: var(--font-en);
  font-style: italic;
  font-weight: var(--fw-bold);
  font-size: clamp(15px, 1.3vw, 20px);
  letter-spacing: 0.12em;
  color: var(--color-black);
  line-height: 1;
}

/* コンポーネントの section-heading-label と同じツートン長方形をラベル左端に */
.page-hero-label::before {
  content: '';
  flex-shrink: 0;
  display: inline-block;
  width: 22px;
  height: 5px;
  background: linear-gradient(
    to right,
    #52c3f7 0%,
    #52c3f7 50%,
    var(--color-primary) 50%,
    var(--color-primary) 100%
  );
}

.page-hero-title {
  margin: 0;
  font-family: var(--font-jp);
  font-weight: var(--fw-bold);
  font-size: clamp(26px, 3.5vw, 48px);
  color: var(--color-primary);
  letter-spacing: 0.06em;
  line-height: 1.15;
}

/* --------------------------------------------------------------------------
   右カラム: メインビジュアル
   -------------------------------------------------------------------------- */
.page-hero-media {
  border-radius: clamp(12px, 1.4vw, 20px);
  overflow: hidden;
  aspect-ratio: 16 / 9;   /* 横幅を縮めた分、比率をわずかに縦寄せて縦幅を維持 */
  background-color: var(--color-gray-light);
}
.page-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --------------------------------------------------------------------------
   パンくずリスト（ヒーローの直下。主張を抑えて細い罫線で区切る）
   -------------------------------------------------------------------------- */
.page-hero-breadcrumb {
  padding: clamp(16px, 1.6vw, 24px) 0;
  border-bottom: 2px solid var(--color-primary);
}
/* ヒーローセクションを持たないページ（例: 受け入れ事例詳細）でパンくずが最上部に来る場合、
   固定ヘッダーに隠れないよう .page-hero と同じ上部余白を確保する */
main > .page-hero-breadcrumb:first-child {
  margin-top: clamp(90px, 9vw, 130px);
}
/* ヒーロー内のコンテナと同じ横幅・余白に揃えて、テキスト左端を合わせる */
.page-hero-breadcrumb > .container {
  max-width: min(1360px, calc(100vw - 40px));
}
.page-hero-breadcrumb ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.page-hero-breadcrumb li {
  font-family: var(--font-jp);
  font-size: clamp(12px, 0.95vw, 14px);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  line-height: 1;
}
.page-hero-breadcrumb li + li::before {
  content: '›';
  margin-right: 12px;
  color: var(--color-gray);
  font-weight: var(--fw-regular);
}
/* リンク */
.page-hero-breadcrumb a {
  color: var(--color-gray);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity var(--transition-speed) var(--easing);
}
.page-hero-breadcrumb a:hover {
  opacity: 0.7;
}
/* 現在ページ（例: 「会社概要」） */
.page-hero-breadcrumb [aria-current="page"] {
  color: var(--color-black);
  font-weight: var(--fw-bold);
}
/* 下層ページの最初のセクションは、ページ最上部の見出しまでが間延びしないよう
   通常のセクション余白（--space-2xl）より詰める */
.page-hero-breadcrumb + .section-padding {
  padding-top: clamp(36px, 4.5vw, 60px);
}


/* ==========================================================================
   About Us — 私たちについて（会社概要ページ）
   .about-us                        セクション（白背景）
       > .container
           > .about-us-inner        2カラム grid
               > .about-us-text     左: ラベル + 見出し + 本文
               > .about-us-visual   右: ビジュアル（後日追加）
   ========================================================================== */
.about-us {
  background-color: #e9f2f9;
  background-image: url('../image/TOP_haikei.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
  scroll-margin-top: clamp(80px, 8vw, 120px);
}

.about-us-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(40px, 5vw, 100px);
  align-items: start;
}

.about-us-text {
  min-width: 0;
}

/* 共通 section-heading コンポーネント使用時のスタイル調整
   - 見出しは .about-us-inner の外に配置され、両カラム上端が揃うようにする
   - 下線（border-bottom）はコンポーネントの既定を維持し、下の余白のみ拡張 */
.about-us > .container > .blur-in,
.about-us > .container > .section-heading {
  margin-bottom: clamp(28px, 5vw, 40px);
}

/* リードコピー（見出し直下の大きめキャッチ） */
.about-us-lead {
  margin: 0 0 clamp(24px, 2.8vw, 40px);
  font-family: var(--font-jp);
  font-weight: var(--fw-bold);
  font-size: clamp(20px, 3vw, 36px);
  color: var(--color-black);
  line-height: 1.5;
  letter-spacing: 0.04em;
}

/* 出現アニメーションの発火順序: リード → 本文 → 図
   （FV の fvBlurIn と同じ動きを .blur-in の transition で再現。--blur-delay で staggered）*/
.about-us-lead.blur-in   { --blur-delay: 0s; }
.about-us-desc.blur-in   { --blur-delay: 0.25s; }
.about-us-visual.blur-in { --blur-delay: 0.5s; }

/* 本文（右カラム）: 見出しがグリッド外に配置されたため、両カラム上端が自然に揃う。追加オフセット不要 */
.about-us-desc p {
  margin: 0 0 clamp(14px, 1.4vw, 22px);
  font-family: var(--font-jp);
  font-size: clamp(14px, 3vw, 16px);
  color: var(--color-black);
  line-height: 2;
  letter-spacing: 0.04em;
  /* 固定背景画像上でも読みやすいよう白い光彩を重ねる */
  text-shadow:
    0 0 4px #fff,
    0 0 8px #fff,
    0 0 16px rgba(255, 255, 255, 0.85);
}
.about-us-desc p:last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   使命 & 経営理念（Tenets）
   about セクション本文と同じ .container 内に配置され、
   本文（.about-us-inner）と横幅が揃うようになる
   -------------------------------------------------------------------------- */
.about-us-tenets {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3vw, 40px);
  margin-top: clamp(56px, 6vw, 96px);
}

.about-us-tenet-card {
  padding: clamp(40px, 5vw, 80px) clamp(24px, 4vw, 72px);
  /* すりガラス風グラスモーフィズム: News セクションと同一の透過率・ぼかし
     色（白ベース）は維持し、透明度と backdrop-filter で背景をぼかす */
  background-color: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(5px) saturate(0.4);
  -webkit-backdrop-filter: blur(10px) saturate(0.8);
  border: 1px solid white;
  border-radius: clamp(16px, 1.8vw, 28px);
}

/* 出現アニメーション: カード内の見出し（Our Mission / Philosophy）のみ */
.about-us-tenet-heading.blur-in { --blur-delay: 0s; }

.about-us-tenet-heading {
  margin: 0 0 clamp(28px, 3vw, 44px);
  font-family: var(--font-jp);
  font-weight: var(--fw-bold);
  font-size: clamp(16px, 3vw, 32px);
  color: var(--color-primary);
  text-align: center;
  letter-spacing: 0.09em;
}
/* 英語ヘッダー用（Our Mission 等）: Roboto を使用 */
.about-us-tenet-heading--en {
  font-family: var(--font-en);
}

/* 使命カード: 中央寄せの大主張 + サブ */
.about-us-tenet-statement {
  margin: 0;
  font-family: var(--font-jp);
  font-weight: var(--fw-bold);
  font-size: clamp(20px, 3vw, 24px);
  color: var(--color-black);
  text-align: center;
  letter-spacing: 0.08em;
  line-height: 1.5;
}

/* 使命カード内の本文（statement の下、左寄せの複数段落） */
.about-us-tenet-body-text {
  max-width: 780px;
  margin: clamp(28px, 3vw, 44px) auto 0;
}
.about-us-tenet-body-text p {
  margin: 0 0 clamp(14px, 1.4vw, 22px);
  font-family: var(--font-jp);
  font-size: clamp(14px, 3vw, 16px);
  color: var(--color-black);
  line-height: 1.9;
  letter-spacing: 0.04em;
  text-align: center;
}
.about-us-tenet-body-text p:last-child {
  margin-bottom: 0;
}

/* 経営理念カード: 番号付きリスト（番号は淡いゴースト表示） */
.about-us-tenet-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.about-us-tenet-item {
  max-width: 780px;
  margin-inline: auto;                 /* カード枠内で水平中央に配置 */
  display: grid;
  grid-template-columns: clamp(48px, 5vw, 72px) 1fr;
  gap: clamp(8px, 1vw, 8px);
  align-items: center;                 /* 番号を右カラム全体に対して上下中央に揃える */
  padding: clamp(24px, 3vw, 36px) 0;
  border-top: 1px solid var(--color-gray-border);
}
.about-us-tenet-item:first-child {
  border-top: none;
  padding-top: 0;
}
.about-us-tenet-item:last-child {
  padding-bottom: 0;
}
.about-us-tenet-num {
  margin-left: 16px;
  font-family: var(--font-en);
  font-weight: var(--fw-bold);
  font-size: clamp(24px, 3vw, 56px);
  color: var(--color-gray-border);
  line-height: 1;
}
.about-us-tenet-body {
  min-width: 0;
}
.about-us-tenet-title {
  margin: 0 0 clamp(8px, 1vw, 14px);
  font-family: var(--font-jp);
  font-weight: var(--fw-bold);
  font-size: clamp(20px, 1.4vw, 24px);
  color: var(--color-black);
  letter-spacing: 0.05em;
  line-height: 1.4;
}
.about-us-tenet-desc {
  margin: 0;
  font-family: var(--font-jp);
  font-size: clamp(14px, 3vw, 16px);
  color: var(--color-black);
  line-height: 1.9;
  letter-spacing: 0.04em;
}

/* 右カラム: ビジュアル配置エリア（インフォグラフィック）
   テキスト側の見出しよりやや下に配置してバランスを取る */
.about-us-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: clamp(24px, 3vw, 40px);
}
.about-us-visual-img {
  width: 100%;
  height: auto;
  max-width: 560px;
  display: block;
}

/* ==========================================================================
   当社の強み — Strengths（事業内容ページ）
   2カラム: 左に共通 section-heading、右に本文
   ========================================================================== */
.strengths {
  scroll-margin-top: clamp(80px, 8vw, 120px);
  /* セクション背景は白 */
  background-color: #ffffff;
}
/* 事業内容 (.services) との間の余白を現状の半分に。
   padding-top を半分にしつつ、PC 幅では services 側の下 padding
   (--space-2xl = 100px) の半分ぶんネガティブマージンで引き上げる。
   SP は services padding-bottom が縮む (40px 前後) ため、margin-top は不要 */
.strengths {
  /* 事業内容セクションとの間の余白を広げる（+40px ×2 = +80px） */
  padding-top: calc(clamp(12px, 1.5vw, 24px) + 80px);
  padding-bottom: clamp(60px, 6vw, 100px);
}
@media (min-width: 769px) {
  .strengths {
    margin-top: calc(var(--space-2xl) * -0.5);
  }
}

/* .strengths 内で .reasons の 2 カード縦積み配置。
   scroll-jacking (min-height:300vh + sticky) は不要のため .reason-scroller は付けない */
.strengths .strengths-cards {
  max-width: 1160px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3vw, 40px);
}
/* このセクションでは表示切替せず、2 カードとも常時表示 + 角丸を 16px に */
.strengths .reason-card {
  opacity: 1;
  visibility: visible;
  background-color: #E9F2F9;   /* カード背景（指定色） */
  border-radius: 16px;
  /* 上パディングは従来の広め設定を維持 */
  padding-top: clamp(70px, 6vw, 96px);
}

/* SP: 白カードの上下 padding を狭く (PC 用の広い padding-top を打ち消し) */
@media (max-width: 768px) {
  .strengths .reason-card {
    padding-top: clamp(20px, 4vw, 32px);
    padding-bottom: clamp(20px, 4vw, 32px);
  }
}

/* base の .reason-card-grid は align-items: center で、本文列が画像列(固定高)より
   短い場合に本文が上下中央寄せされ、タイトル位置が下にずれる。
   strengths では 2 カードとも本文長が異なるため、上端揃えに変更してタイトル位置を統一 */
.strengths .reason-card-grid {
  align-items: start;
}

/* Strength 01 の下（グリッド外）に置く「採用までのプロセス」図（横長）。
   横長レイアウトのためカード内容幅いっぱいまで広げて読みやすく表示 */
.strength-detail-img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  /* グリッドの下・中央寄せ。上マージンは「上部写真との間隔」を +16px 広げた値 */
  margin: calc(clamp(24px, 3vw, 40px) + 16px) auto 0;
  border-radius: clamp(8px, 1vw, 12px);
}

/* SP 用: Strength 02 の画像 (Strength2.png はやや縦長) を切り抜かず contain 表示
   (Strength 01 は横長のため base の cover のままで OK) */
.strengths .reason-card:nth-of-type(2) .reason-card-media img {
  object-fit: contain;
}

/* PC 以上: 両カードとも右カラム (画像) をカード全高まで縦伸長。
   media 要素の背景画像で写真を全域表示し、<img> は視覚的に非表示。
   SP (768px 以下) では responsive.css の 1 カラム縦積み挙動を維持 */
@media (min-width: 769px) {
  .strengths .reason-card-grid {
    align-items: stretch;
  }
  .strengths .reason-card-media {
    align-self: stretch;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: calc(-1 * clamp(12px, 1.5vw, 24px) + 16px);
    /* 写真の右端を、下の「採用までのプロセス」図（内容ボックス右端 = padding-right）に揃える */
    margin-right: 0;
  }
  /* Strength 01 の図（カード最下段）: カード下端との余白を、
     カード2枚目の写真下端と同じ 16px に揃える（負マージンで padding-bottom 内に食い込ませる） */
  .strength-detail-img {
    margin-bottom: calc(-1 * clamp(12px, 1.5vw, 24px) + 16px);
  }
  /* Strength 01: カード下部の余白を +32px 追加（基準 16px + 32px = 48px） */
  .strengths .reason-card:nth-of-type(1) {
    padding-bottom: calc(clamp(12px, 1.5vw, 24px) + 32px);
  }
  /* Strength 02: カード上下の余白を揃えつつ、それぞれ 10px 短く（SP は別途 responsive 側の値を維持） */
  .strengths .reason-card:nth-of-type(2) {
    padding-top: calc(clamp(70px, 6vw, 96px) - 10px);
    padding-bottom: calc(clamp(70px, 6vw, 96px) - 10px);
  }
  /* 各カードの背景画像 */
  /* Strength 01（1枚目）: テキスト位置の条件を 2 枚目と揃える。
     上端の負マージン（写真が見出しの上まで少しはみ出す量）は基底 .reason-card-media を継承し、
     2 枚目と同じ text↔写真の縦関係にする。右端は .strengths .reason-card-media の margin-right:0 を継承 */
  .strengths .reason-card:nth-of-type(1) .reason-card-media {
    background-image: url('../image/TOP_reason.jpg');
    margin-bottom: calc(-1 * clamp(12px, 1.5vw, 24px) + 18px);
  }
  /* Strength 02: 写真をクロップせず全体表示したいので、背景ではなく <img> で表示する。
     背景 contain だとレターボックスで角丸が写真に効かないため、img 自体に角丸 8px
     （1枚目のカード写真と同じ px）を付ける */
  .strengths .reason-card:nth-of-type(2) .reason-card-media {
    background-image: none;
    align-self: center;                /* テキストに対して上下中央揃え */
    /* stretch 前提の負マージンを解除して、中央揃えの基準を揃える */
    margin-top: 0;
    margin-bottom: 0;
  }
  /* 本文末尾の余白（36px）が本文ボックスに含まれると写真がその半分だけ下にズレるため、
     最後の段落の下マージンを解除して「見た目のテキスト」と中心を一致させる */
  .strengths .reason-card:nth-of-type(2) .reason-card-body > *:last-child {
    margin-bottom: 0;
  }
  .strengths .reason-card:nth-of-type(2) .reason-card-media img {
    width: 100%;
    height: auto;                      /* 自然な縦横比でフル表示（クロップなし） */
    min-height: 0;
    opacity: 1;
    object-fit: contain;
    border-radius: 8px;                /* 1枚目のカード写真と同じ 8px */
  }
  /* <img> は SEO/a11y のため DOM に残しつつ、視覚的には 0 サイズ非表示 */
  .strengths .reason-card-media img {
    width: 0;
    height: 0;
    min-height: 0;
    opacity: 0;
    pointer-events: none;
  }
}

/* ==========================================================================
   事業内容一覧 — Services（事業内容ページ）
   各行: 左に カテゴリ + 大見出し + 説明 + CTA、右に写真
   項目間は薄グレー直線で区切る（参考: BUSINESS_2.png）
   ========================================================================== */
.services {
  scroll-margin-top: clamp(80px, 8vw, 120px);
  /* セクション下部に 60px 余白を追加（.section-padding の下 100px + 60px） */
  padding-bottom: calc(var(--space-2xl) + 60px);
  /* 固定背景として TOP_haikei.jpg を敷き詰め（viewport に貼り付き、スクロールしても動かない）*/
  background-color: #e9f2f9;
  background-image: url('../image/TOP_haikei.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
}
/* 一覧全体を囲む外枠（Our Mission カード .about-us-tenet-card と同じ白いガラス質感）*/
/* 白ガラスフレーム: 見出し + サービス一覧を内包 */
.services-frame {
  padding: clamp(32px, 4vw, 64px) clamp(28px, 3.5vw, 64px);
  background-color: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(5px) saturate(0.4);
  -webkit-backdrop-filter: blur(10px) saturate(0.8);
  border: 1px solid white;
  border-radius: clamp(16px, 1.8vw, 28px);
}
.services-list {
  list-style: none;
  margin: 0;   /* 見出しはフレーム外へ出したため上余白は不要 */
  padding: 0;
}

/* カード外・上に配置したセクション見出し */
.services-heading {
  margin-bottom: clamp(24px, 3vw, 40px);
}
.strengths-heading {
  max-width: 1160px;               /* 下の 2 カード（.strengths-cards）と同じ幅で中央寄せ */
  margin: 0 auto clamp(24px, 3vw, 40px);
}
.services-item {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(40px, 5vw, 100px);
  align-items: center;
  padding: clamp(24px, 3vw, 48px) 0;    /* 各行の上下余白を詰める */
  border-top: 1px solid var(--color-gray-border);
}
.services-item:first-child {
  padding-top: 0;
  border-top: 0;
}
.services-item:last-child {
  padding-bottom: 0;
}
.services-item-text {
  min-width: 0;
}
.services-item-name {
  margin: 0 0 clamp(10px, 1.2vw, 18px);   /* 大見出しと本文の間を少し詰める */
  font-family: var(--font-jp);
  font-weight: var(--fw-bold);
  font-size: clamp(18px, 2.6vw, 24px);
  color: var(--color-black);
  letter-spacing: 0.04em;
  line-height: 1.4;
}
.services-item-desc {
  margin: 0 0 clamp(24px, 2.8vw, 40px);
  font-family: var(--font-jp);
  font-size: clamp(14px, 3vw, 16px);
  color: var(--color-black);
  line-height: 1.9;
  letter-spacing: 0.04em;
}

/* 小さめのピル型 CTA（右上向き矢印付き） */
.services-item-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: clamp(10px, 1.2vw, 12px) clamp(18px, 2vw, 28px);
  border: 1px solid var(--color-primary);
  border-radius: 999px;
  color: var(--color-primary);
  font-family: var(--font-jp);
  font-size: clamp(13px, 1vw, 15px);
  font-weight: var(--fw-medium);
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: background-color var(--transition-speed) var(--easing),
              color var(--transition-speed) var(--easing);
}
/* 矢印コンテナ: スライドスルーの track */
.services-item-cta-arrow {
  position: relative;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(14px, 1.2vw, 16px);
  height: clamp(14px, 1.2vw, 16px);
  overflow: hidden;
}
.services-item-cta-arrow > svg {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
  transition: transform 0.45s var(--easing);
}
/* 追い抜き用の 2枚目矢印。currentColor で色を継承 */
.services-item-cta-arrow::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(calc(-50% - 100%), -50%);   /* 初期: コンテナの左外 */
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M13 6l6 6-6 6'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M13 6l6 6-6 6'/></svg>") center / contain no-repeat;
  transition: transform 0.45s var(--easing);
  pointer-events: none;
}
/* ホバー: 現矢印が右へ、::after が中央へ */
.services-item-cta:hover .services-item-cta-arrow > svg {
  transform: translateX(100%);                    /* コンテナ幅ぶん右へ */
}
.services-item-cta:hover .services-item-cta-arrow::after {
  transform: translate(-50%, -50%);
}
/* ホバー時: 濃紺の塗り + 白テキストへ反転。opacity は 1 に固定して
   グローバルの a:hover { opacity: 0.7 } による色が薄くなる挙動を無効化 */
.services-item-cta:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
  opacity: 1;
}

/* 右カラム: 写真エリア */
.services-item-media {
  min-width: 0;
}
.services-item-img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;                 /* 縦幅を少し狭く（7/6 → 4/3 の横長寄り）*/
  display: block;
  border-radius: clamp(10px, 1.6vw, 16px);
  object-fit: cover;
}

/* ==========================================================================
   Why nepali? セクション: カード下の追加ブロック（.reasons-extra）
   左に人物写真 / 右にチェックリスト形式の2項目
   濃紺背景に合わせてテキストは白系
   ========================================================================== */
/* 外枠: Why nepali? 濃紺フレームと同じ 1460px 上限まで拡張（container 突き抜け）
   ガラス質感の白い枠は Our Mission カードと同じ設定 */
.reasons-extra {
  /* 横幅は Why nepal? セクション（= 事業内容）と同じ */
  width: min(1280px, calc(100vw - 40px));
  /* 上の 3 カラムカードとの余白は、カード間の gap と同値に */
  margin: clamp(20px, 2.4vw, 32px) 0 0 calc((100% - min(1280px, calc(100vw - 40px))) / 2);
  padding: clamp(40px, 5vw, 80px) clamp(24px, 4vw, 72px);
  color: var(--color-black);
  /* 白ガラスカード加工 */
  background-color: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(5px) saturate(0.4);
  -webkit-backdrop-filter: blur(10px) saturate(0.8);
  border: 1px solid white;
  border-radius: clamp(16px, 1.8vw, 28px);
}
/* 内側の 2カラム grid: 見出しと同じ 1160px 幅で中央配置
   align-items: stretch で両カラムの縦幅を揃える（写真は object-fit: cover で伸縮） */
.reasons-extra-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 0.75fr);
  gap: clamp(20px, 5vw, 56px);
  align-items: stretch;
  max-width: 1160px;
  margin: 0 auto;
}

.reasons-extra-media {
  min-width: 0;
  align-self: stretch;
}
.reasons-extra-img {
  display: block;
  width: 100%;
  height: 100%;                        /* 左カラムの高さに追従 */
  min-height: 220px;
  object-fit: cover;
  border-radius: clamp(12px, 1.4vw, 18px);
}

.reasons-extra-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.4vw, 36px);
}
/* 項目間の区切り線は削除（gap で余白のみ確保） */

.reasons-extra-title {
  display: flex;
  align-items: flex-start;
  gap: clamp(10px, 1vw, 14px);
  margin: 0 0 clamp(12px, 1.4vw, 20px);
  font-family: var(--font-jp);
  font-weight: var(--fw-bold);
  font-size: clamp(18px, 3vw, 24px);
  color: var(--color-black);
  letter-spacing: 0.04em;
  line-height: 1.5;
}
/* コンポーネント見出しと同じバイカラー長方形（左: スカイブルー / 右: 濃紺） */
.reasons-extra-check {
  flex-shrink: 0;
  display: inline-block;
  width: 22px;
  height: 5px;
  margin-top: 0.7em;                  /* タイトルテキストの視覚中央に合わせる */
  background: linear-gradient(
    to right,
    #52c3f7 0%,
    #52c3f7 50%,
    var(--color-primary) 50%,
    var(--color-primary) 100%
  );
}

.reasons-extra-list {
  list-style: none;
  margin: 0;
}
.reasons-extra-list li {
  position: relative;
  margin: 0 0 clamp(8px, 1vw, 14px);
  padding-left: 16px;
  font-family: var(--font-jp);
  font-size: clamp(13px, 1vw, 15px);
  color: var(--color-black);
  line-height: 1.85;
  letter-spacing: 0.04em;
}
.reasons-extra-list li:last-child {
  margin-bottom: 0;
}
.reasons-extra-list li::before {
  content: '・';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-gray);
}

.reasons-extra-desc {
  margin: 0;
  font-family: var(--font-jp);
  font-size: clamp(14px, 3vw, 16px);
  color: var(--color-black);
  line-height: 1.85;
  letter-spacing: 0.04em;
}

/* ==========================================================================
   Cases List（受け入れ事例ページ）
   トップページの .project-card デザインを流用した 3 カラムグリッド
   ========================================================================== */
.cases-list-heading {
  margin-bottom: clamp(32px, 5vw, 60px);
}

.cases-list-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.5vw, 32px);
  margin-top: 40px;   /* 見出し (.section-heading) と白カードの間の余白 */
}

/* 受け入れ事例 / 実績 の 2 セクションを、TOP_haikei.jpg の固定背景で通しで見せる。
   attachment: fixed により viewport 基準で位置が固定 → セクションをまたいで一枚絵に見える。
   .business-stats-wrap と同じ設定なので、直上の事業内容ページの意匠感と揃う */
.cases-summary,
.cases-list {
  background-color: #e9f2f9;
  background-image: url('../image/TOP_haikei.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
}

/* リード → 事例 の間の余白（固定背景は通しのまま、間隔だけ広げる） */
/* 実績セクション: 直前の 事例セクション から余白なしで続ける */
.cases-list--tight-top.section-padding {
  padding-top: 0;
}

/* 横スクロールではなくグリッド配置のため、全カードに影を付けて統一 */
.cases-list-grid .project-card {
  box-shadow: 0 4px 20px rgba(5, 56, 125, 0.06);
}

/* ==========================================================================
   Facility List (施設紹介ページ)
   トップページの Facility セクションと同じ .facility-card / .project-card
   デザインを流用した 3 カラムグリッド
   ========================================================================== */
/* 見出し（本文＝section-heading-desc 含む）と、その下のコンテンツとの余白 */
/* ページ見出し（教育機関紹介）: 直下の施設セクションとの間に余白を足す
   （施設セクション側の上余白 100px + ここで 40px） */
.facility-intro.section-padding {
  padding-bottom: 40px;
}

.facility-list-heading {
  margin-bottom: clamp(32px, 5vw, 60px);
}

/* 施設セクション内の埋め込み動画 (説明文の下に配置。16:9 全幅) */
.facility-list-video {
  aspect-ratio: 16 / 9;
  background-color: #000;
}
.facility-list-video iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.facility-list-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.5vw, 32px);
}

/* 施設カードはドロップシャドウなし (base .project-card:last-child の影も打ち消す) */
.facility-list-grid .project-card {
  box-shadow: none;
}

/* 実績サマリー（3 タイル。淡いライトブルー背景 + 濃紺テキスト） */
.cases-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 200px));
  gap: 14px;
  margin-bottom: clamp(32px, 4.5vw, 52px);
}

.cases-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 30px 12px;
  background-color: var(--color-primary-light);
  border-radius: 16px;
  color: var(--color-primary);
  text-align: center;
}

.cases-stat-lead {
  margin: 0;
  font-family: var(--font-jp);
  font-size: clamp(20px, 2.1vw, 26px);
  font-weight: var(--fw-bold);
  letter-spacing: 0.02em;
  line-height: 1.3;
}

.cases-stat-sub {
  margin: 0;
  color: #111;
  font-family: var(--font-jp);
  font-size: clamp(13px, 1.1vw, 15px);
  font-weight: var(--fw-medium);
  letter-spacing: 0.05em;
  line-height: 1.3;
}

/* project-card 内に置く場合はカード幅にフィットさせる（3 タイル均等分割 + 縮小） */
.project-card .cases-stats {
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin: 0 0 -4px;   /* 下の .project-card-meta との余白を詰める */
}

.project-card .cases-stat {
  padding: 16px 6px;
  border-radius: 12px;
}
/* Coming-Soon カード用: テキストなしのグレー枠だけを 3 タイル分表示 (通常カードと同じ高さ 75px) */
.cases-stat--placeholder {
  background-color: var(--color-gray-light);
  min-height: 75px;
}

/* Coming-Soon カードの「詳しく見る」ボタン: 枠だけ表示、ホバー/クリック無効化 */
.project-card--coming-soon .project-card-link {
  pointer-events: none;   /* クリック・ホバー反応させない */
  cursor: default;
}
.project-card--coming-soon .project-card-link:hover {
  background-color: var(--color-primary);   /* 通常時と同じ色で固定 */
  color: var(--color-white);
  opacity: 1;
}

.project-card .cases-stat-lead {
  font-size: clamp(14px, 1.3vw, 18px);
  white-space: nowrap;      /* 「2023年10月」等が 2 行に折り返さないよう固定 */
  letter-spacing: 0;
}

.project-card .cases-stat-sub {
  font-size: clamp(10px, 0.85vw, 12px);
}

/* ==========================================================================
   Case Detail (受け入れ事例詳細ページ)
   左: 記事本体 / 右: プロフィールサイドバー
   ========================================================================== */
.case-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: clamp(40px, 6vw, 80px);
  align-items: start;
}

/* 実績詳細ページなど、サイドバーを持たない 1 カラム表示用モディファイア */
.case-detail-layout--single {
  grid-template-columns: minmax(0, 1fr);
}

/* --------------------------------------------------------------------------
   左カラム: 記事本体
   -------------------------------------------------------------------------- */
.case-detail-main {
  min-width: 0;
}

.case-detail-title {
  margin: 0 0 24px;
  font-family: var(--font-jp);
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: var(--fw-bold);
  color: #111;
  line-height: 1.55;
  letter-spacing: 0.02em;
}

.case-detail-tags {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px 28px;
}

.case-detail-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-jp);
  font-size: 14px;
  color: var(--color-black);
  letter-spacing: 0.02em;
}

.case-detail-tag svg {
  width: 16px;
  height: 16px;
  color: var(--color-secondary);
  flex-shrink: 0;
}

.case-detail-date {
  margin: 0 0 20px;
  text-align: right;
  font-family: var(--font-jp);
  font-size: 13px;
  color: var(--color-gray);
  letter-spacing: 0.04em;
}

.case-detail-hero {
  margin: 0 0 12px;
}

.case-detail-hero img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.case-detail-hero figcaption {
  margin-top: 10px;
  font-family: var(--font-jp);
  font-size: 13px;
  color: var(--color-black);
  letter-spacing: 0.02em;
}

/* 詳細ページで写真直下に配置する実績タイル: 写真とリード文の間の余白を調整 */
.case-detail-main .cases-stats {
  margin: 24px 0 0;
}

/* ==========================================================================
   Case Detail — 課題と効果 (2 段ボックス + 下向き矢印)
   ========================================================================== */
.case-detail-impact {
  margin-top: 52px;
}

/* 見出し「課題と効果」: 左の縦バー + ボールド
   事例本文（エディタ）の見出し2 にも同じデザインを当てる */
.case-detail-impact-heading,
.case-detail-interview-body h2 {
  margin: 0 0 20px;
  padding-left: 14px;
  font-family: var(--font-jp);
  font-size: clamp(18px, 1.9vw, 22px);
  font-weight: var(--fw-bold);
  color: #111;
  letter-spacing: 0.04em;
  line-height: 1.4;
  border-left: 4px solid var(--color-primary);
}

/* 各ボックス共通 */
.case-detail-impact-box {
  padding: 28px clamp(20px, 3vw, 36px);
  border-radius: 4px;
}
.case-detail-impact-box--before { background-color: #EEEAEB; }  /* 淡いピンクグレー (課題) */
.case-detail-impact-box--after  { background-color: #E5F0FA; }  /* 淡いスカイブルー (効果) */

/* ボックス見出し行: アイコン + タイトル + 注釈 */
.case-detail-impact-box-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.case-detail-impact-box-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--color-primary);
}
.case-detail-impact-box-icon svg {
  width: 22px;
  height: 22px;
}
.case-detail-impact-box--after .case-detail-impact-box-icon {
  color: var(--color-secondary);
}

.case-detail-impact-box-title {
  margin: 0;
  font-family: var(--font-jp);
  font-size: clamp(15px, 1.5vw, 18px);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  letter-spacing: 0.04em;
}

/* 箇条書き (チェックマーク付き)。事例本文（エディタ）のリストにも同じデザインを当てる */
.case-detail-impact-list,
.case-detail-interview-body ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.case-detail-impact-list li,
.case-detail-interview-body ul li {
  position: relative;
  padding-left: 26px;
  font-family: var(--font-jp);
  font-size: 14px;
  color: var(--color-black);
  line-height: 1.7;
  letter-spacing: 0.02em;
}

/* チェックマーク: currentColor で色制御するため mask 描画 */
.case-detail-impact-list li::before,
.case-detail-interview-body ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 18px;
  height: 14px;
  background-color: var(--color-secondary);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='5 12 10 17 20 7'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='5 12 10 17 20 7'/></svg>") no-repeat center / contain;
}

/* 効果ボックスの本文は少し太めに */
.case-detail-impact-box--after .case-detail-impact-list li {
  font-weight: var(--fw-medium);
}

/* 課題ボックス (--before) はアイコン / タイトル / チェックマークをすべて黒に */
.case-detail-impact-box--before .case-detail-impact-box-icon,
.case-detail-impact-box--before .case-detail-impact-box-title {
  color: var(--color-black);
}
.case-detail-impact-box--before .case-detail-impact-list li::before {
  background-color: var(--color-black);
}

/* 上下ボックス間の下向き三角矢印 (濃紺) */
.case-detail-impact-arrow {
  width: 0;
  height: 0;
  margin: 18px auto;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid var(--color-primary);
}

/* ==========================================================================
   Case Detail — インタビュー本編 (見出し + Q&A + 写真)
   見出しは .case-detail-impact-heading を流用 (縦バー + 濃紺ボールド)
   ========================================================================== */
.case-detail-interview {
  margin-top: 52px;
}

/* トピックごとにグルーピング (見出し + Q&A + 写真) */
.case-detail-interview-group + .case-detail-interview-group {
  margin-top: 44px;
}

/* 導入節などの太字サブ見出し (h2 直下) */
.case-detail-interview-subhead {
  margin: 18px 0 18px;
  font-family: var(--font-jp);
  font-size: 16px;
  font-weight: var(--fw-bold);
  color: var(--color-black);
  letter-spacing: 0.03em;
  line-height: 1.7;
}

/* インタビュー本文パラグラフ */
.case-detail-interview-para,
.case-detail-interview-body p:not(.is-style-bsj-question) {
  margin: 0 0 20px;
  font-family: var(--font-jp);
  font-size: 15px;
  line-height: 2.0;
  color: var(--color-black);
  letter-spacing: 0.03em;
}
.case-detail-interview-para:last-child,
.case-detail-interview-body > p:last-child {
  margin-bottom: 0;
}

/* 質問行: 左に小さな濃紺の丸 + ボールドテキスト
   エディタでは段落ブロックのスタイル「質問」を選ぶとこのデザインになる */
.case-detail-interview-q,
.case-detail-interview-body p.is-style-bsj-question {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 24px 0 14px;
  font-family: var(--font-jp);
  font-size: 15px;
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  letter-spacing: 0.03em;
  line-height: 1.7;
}
.case-detail-interview-q::before,
.case-detail-interview-body p.is-style-bsj-question::before {
  content: '';
  flex-shrink: 0;
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: var(--color-primary);
  transform: translateY(2px);   /* テキストのベースラインと視覚的中央を揃える */
}

/* 全幅の挿入写真 */
.case-detail-interview-photo,
.case-detail-interview-body figure {
  margin: 26px 0 0;
}
.case-detail-interview-photo img,
.case-detail-interview-body figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
.case-detail-interview-body figcaption {
  margin-top: 8px;
  font-family: var(--font-jp);
  font-size: 13px;
  color: var(--color-gray);
  text-align: center;
}

/* エディタ本文は見出しごとに節が変わるので、2 つ目以降の見出しの前に間隔をとる
   （もとは .case-detail-interview-group 同士の間隔だったもの） */
.case-detail-interview-body h2 {
  margin-top: 44px;
}
.case-detail-interview-body > *:first-child {
  margin-top: 0;
}

/* 写真未定のプレースホルダー: グレーアウトした矩形 + 中央にラベル */
.case-detail-interview-photo--empty {
  aspect-ratio: 16 / 10;
  background-color: var(--color-gray-light);
  display: flex;
  align-items: center;
  justify-content: center;
}
.case-detail-interview-photo-placeholder {
  font-family: var(--font-jp);
  font-size: 14px;
  color: var(--color-gray);
  letter-spacing: 0.05em;
}

/* ==========================================================================
   Case Detail — 動画紹介ブロック (課題と効果の直前に配置)
   ========================================================================== */
.case-detail-video-block {
  margin-top: 44px;
}

/* iframe を 16:9 で全幅に */
.case-detail-video {
  margin-top: 18px;
  aspect-ratio: 16 / 9;
  background-color: #000;
}
.case-detail-video iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* --------------------------------------------------------------------------
   右カラム: プロフィールサイドバー
   ラベル (スカイブルー) + 下線 + コンテンツ を 1 ブロックとして繰り返す
   -------------------------------------------------------------------------- */
.case-detail-profile {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.case-detail-profile-block {
  display: block;
}

.case-detail-profile-label {
  margin: 0 0 12px;
  padding-bottom: 10px;
  font-family: var(--font-jp);
  font-size: 15px;
  font-weight: var(--fw-bold);
  color: var(--color-secondary);
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--color-gray-border);
}

.case-detail-profile-name {
  margin: 0;
  font-family: var(--font-jp);
  font-size: 16px;
  font-weight: var(--fw-bold);
  color: "#111";
}

.case-detail-profile-body {
  margin: 0;
  font-family: var(--font-jp);
  font-size: 14px;
  color: var(--color-black);
  line-height: 1.75;
  letter-spacing: 0.02em;
}

/* 番号付きリストは「事業内容」ラベルと左端を揃える (デフォルトの左インデントを打ち消し) */
.case-detail-profile-list {
  margin: 0;
  padding-left: 0;
  list-style: none;
  counter-reset: profile-list;
  font-family: var(--font-jp);
  font-size: 14px;
  color: var(--color-black);
  line-height: 1.75;
  letter-spacing: 0.02em;
}

.case-detail-profile-list li {
  counter-increment: profile-list;
  padding-left: 1.6em;
  text-indent: -1.6em;   /* 折り返し時も番号位置に文字が乗り込まないよう調整 */
  margin-bottom: 2px;
}

.case-detail-profile-list li::before {
  content: counter(profile-list) ". ";
  display: inline-block;
  width: 1.6em;
  text-indent: 0;
}

/* 企業ロゴ (企業様名ブロック内、名称の下に配置) */
.case-detail-profile-logo {
  display: flex;
  align-items: center;
  justify-content: flex-start;   /* 左揃え */
  margin: 28px 0 16px;   /* 名称との上余白、次ブロックとの下余白を確保 */
}
.case-detail-profile-logo img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 80px;      /* ロゴを少し小さめに */
  object-fit: contain;
}
/* 仮ロゴ（プレースホルダー）: 実ロゴ準備までの一時表示 */
.case-detail-profile-logo--placeholder {
  width: 160px;
  height: 80px;
  align-items: center;
  justify-content: center;
  background-color: var(--color-gray-light);
  border: 1px dashed var(--color-gray-border);
  border-radius: 4px;
}
.case-detail-profile-logo-ph-text {
  font-family: var(--font-en);
  font-size: 14px;
  font-weight: var(--fw-semibold);
  color: var(--color-gray);
  letter-spacing: 0.15em;
}

/* ==========================================================================
   お知らせページ (blog.php) 単体レイアウト時の .news 補正
   .news 基本値の margin-top: -80px (トップページ FV かぶり用) を打ち消し、
   パンくずと十分な余白を確保 + 上下パディング/マージンを大きめに。
   margin-bottom は次の .contact セクション背景 (#E9F2F9) と .news 背景がほぼ
   同色で視覚的に境界が消えるため、白い余白を挟む目的で必須。
   ========================================================================== */
.page-hero-breadcrumb ~ .news {
  /* フィルターとの間隔を半分に圧縮 (旧: margin-top clamp(60px, 6vw, 100px) / padding-top clamp(60px, 6vw, 40px)) */
  margin-top: clamp(30px, 3vw, 50px);
  /* margin-bottom を半分に (旧: clamp(60px, 6vw, 80px)) — ページネーションとの間隔を圧縮。
     ページネーションが無い場合は下の `.news + .contact` 規則で追加余白を確保する */
  margin-bottom: clamp(30px, 3vw, 40px);
  padding-top: clamp(30px, 3vw, 40px);
  padding-bottom: clamp(60px, 6vw, 80px);
  /* 背景の左右にも十分な余白を確保 (見出しの横幅は自然に狭まる) */
  padding-left: clamp(24px, 4vw, 72px);
  padding-right: clamp(24px, 4vw, 72px);
  /* お問い合わせページの .contact-form-fields (白カード) と同じ実効幅に。
     contact-form は .container (1200px + 左右 padding 20px) の内側なので
     カードの実効幅は 1160px。同じ算出で新たに揃える */
  max-width: min(calc(var(--container-max) - 40px), calc(100vw - 80px));
}

/* ========== 「もっと見る」ボタン (お知らせページ) ==========
   クリックで .news-item.is-hidden を batch-size 分だけ表示解除する。
   すべて表示されたらラッパに .is-done が付き非表示になる。 */
.news-item.is-hidden {
  display: none;
}

/* カテゴリフィルタで一致しないアイテムを非表示 */
.news-item.is-filter-hidden {
  display: none;
}
/* フィルタ有効時、一致するアイテムは is-hidden (もっと見る初期非表示) を打ち消して強制表示 */
.news-item.is-filter-shown {
  display: flex !important;
}

/* カテゴリフィルタタグはガラスカードの上に配置。マージンで .news との間隔を確保 */
.news-filter-wrap {
  margin-bottom: clamp(16px, 2vw, 24px);
}
/* リード文 (「カテゴリ別で選ぶ」) はタグの上に中央寄せ */
.news-filter-lead {
  margin: 0 0 12px;
  font-family: var(--font-jp);
  font-size: 14px;
  font-weight: var(--fw-medium);
  color: var(--color-black);
  text-align: center;
  letter-spacing: 0.06em;
}
.news-filter {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}
.news-filter-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 96px;
  /* 縦幅を 4px 狭める (8→6 上下 = 合計 -4px) */
  padding: 6px 20px;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-full);
  background-color: var(--color-white);
  color: var(--color-primary);
  font-family: var(--font-jp);
  font-size: 14px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background-color var(--transition-speed) var(--easing),
              color var(--transition-speed) var(--easing);
}
.news-filter-btn:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
  opacity: 1;
}
.news-filter-btn.is-active {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.news-load-more {
  display: flex;
  justify-content: center;
  /* .news との間: 半分に圧縮 (旧: clamp(40px, 5vw, 60px)) — sibling margin-collapse で
     .news の margin-bottom (30-40px) と max を取る形になり、実効 30-40px の余白に */
  margin-top: clamp(20px, 2.5vw, 30px);
  /* コンタクトセクションとの間に 100px を追加 */
  margin-bottom: 100px;
}
.news-load-more.is-done {
  display: none;
}

.news-load-more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-width: 320px;
  padding: 14px 48px;
  background-color: var(--color-primary);
  color: var(--color-white);
  border: 0;
  border-radius: var(--radius-full);
  font-family: var(--font-jp);
  font-weight: var(--fw-bold);
  font-size: var(--fz-md);
  letter-spacing: var(--ls-md);
  cursor: pointer;
  transition: background var(--transition-speed) var(--easing),
              color var(--transition-speed) var(--easing);
}

/* ホバー: グラデーション + 矢印が少し下に */
.news-load-more-btn:hover {
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  color: var(--color-white);
}

/* ==========================================================================
   News Detail (お知らせ詳細ページ)
   タイトル + 公開日 + ヒーロー写真 + 本文パラグラフのシンプル構成
   ========================================================================== */
.news-detail-main {
  max-width: 900px;
  margin: 0 auto;
}

.news-detail-title {
  margin: 0 0 24px;
  font-family: var(--font-jp);
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  line-height: 1.55;
  letter-spacing: 0.02em;
}

.news-detail-date {
  margin: 0 0 20px;
  text-align: right;
  font-family: var(--font-jp);
  font-size: 13px;
  color: var(--color-gray);
  letter-spacing: 0.04em;
}

/* 記事内に挿入する写真: 全体が見えるよう max-width のみ制約、
   crop はしない (aspect-ratio / object-fit 未指定) */
.news-detail-hero,
.news-detail-figure {
  margin: 24px 0;
  text-align: center;
}
.news-detail-hero img,
.news-detail-figure img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

.news-detail-body {
  font-family: var(--font-jp);
  font-size: 15px;
  line-height: 2.0;
  color: var(--color-black);
  letter-spacing: 0.03em;
}
.news-detail-body p {
  margin: 0 0 1.6em;
}
.news-detail-body p:last-child {
  margin-bottom: 0;
}
.news-detail-body a {
  color: var(--color-primary);
  text-decoration: underline;
}
.news-detail-body a:hover {
  opacity: 0.7;
}

/* --------------------------------------------------------------------------
   投稿本文の内側 — 管理画面のエディタから挿入される要素
   reset.css が見出し・リスト・表の既定スタイルを打ち消しているため、
   本文の中だけ表示を戻す。社内で記事を更新しても崩れないようにするためのもの
   -------------------------------------------------------------------------- */

/* 見出し */
.news-detail-body h1,
.news-detail-body h2 {
  margin: clamp(36px, 4vw, 56px) 0 clamp(14px, 1.6vw, 20px);
  padding-bottom: clamp(10px, 1.2vw, 14px);
  border-bottom: 1px solid var(--color-gray-border);
  font-family: var(--font-jp);
  font-size: clamp(19px, 1.9vw, 24px);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  line-height: 1.5;
  letter-spacing: 0.04em;
}
.news-detail-body h3 {
  margin: clamp(28px, 3vw, 40px) 0 clamp(10px, 1.2vw, 16px);
  padding-left: 12px;
  border-left: 4px solid var(--color-primary);
  font-family: var(--font-jp);
  font-size: clamp(17px, 1.6vw, 20px);
  font-weight: var(--fw-bold);
  color: var(--color-black);
  line-height: 1.5;
  letter-spacing: 0.04em;
}
.news-detail-body h4,
.news-detail-body h5 {
  margin: clamp(24px, 2.6vw, 32px) 0 clamp(8px, 1vw, 12px);
  font-family: var(--font-jp);
  font-weight: var(--fw-bold);
  color: var(--color-black);
  line-height: 1.6;
  letter-spacing: 0.04em;
}
.news-detail-body h4 {
  font-size: clamp(16px, 1.4vw, 18px);
}
.news-detail-body h5 {
  font-size: clamp(15px, 1.2vw, 16px);
  color: var(--color-gray);
}
.news-detail-body :is(h1, h2, h3, h4, h5):first-child {
  margin-top: 0;
}

/* 箇条書き・番号付きリスト（reset で消している記号を戻す） */
.news-detail-body ul,
.news-detail-body ol {
  margin: 0 0 1.6em;
  padding-left: 1.6em;
}
.news-detail-body ul {
  list-style: disc;
}
.news-detail-body ol {
  list-style: decimal;
}
.news-detail-body li {
  margin-bottom: 0.5em;
}
.news-detail-body li:last-child {
  margin-bottom: 0;
}
.news-detail-body li::marker {
  color: var(--color-primary);
}
.news-detail-body :is(ul, ol) :is(ul, ol) {
  margin: 0.5em 0 0;
}

/* 引用 */
.news-detail-body blockquote {
  margin: 0 0 1.6em;
  padding: clamp(16px, 2vw, 24px) clamp(18px, 2.2vw, 28px);
  border-left: 4px solid var(--color-primary);
  background-color: var(--color-primary-light);
  color: var(--color-gray);
}
.news-detail-body blockquote p:last-child {
  margin-bottom: 0;
}
.news-detail-body blockquote cite {
  display: block;
  margin-top: 0.8em;
  font-size: 13px;
  font-style: normal;
  color: var(--color-gray);
}

/* 表: コンテンツ幅に収まらない場合は表だけ横スクロールさせる */
.news-detail-body .wp-block-table {
  margin: 0 0 1.6em;
  overflow-x: auto;
}
.news-detail-body table {
  width: 100%;
  max-width: 100%;
  margin: 0 0 1.6em;
  border-collapse: collapse;
  font-size: 14px;
}
.news-detail-body .wp-block-table table {
  min-width: 480px;   /* 潰れ防止。狭い画面では親要素が横スクロールする */
  margin-bottom: 0;
}
.news-detail-body th,
.news-detail-body td {
  padding: 12px 14px;
  border: 1px solid var(--color-gray-border);
  text-align: left;
  vertical-align: top;
  line-height: 1.7;
}
.news-detail-body th {
  background-color: var(--color-primary-light);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
}

/* 画像・キャプション・区切り線 */
.news-detail-body img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}
.news-detail-body figcaption {
  margin-top: 8px;
  font-size: 13px;
  color: var(--color-gray);
  text-align: center;
}
.news-detail-body hr {
  margin: clamp(32px, 3.5vw, 48px) 0;
  border: 0;
  border-top: 1px solid var(--color-gray-border);
}
.news-detail-body strong {
  font-weight: var(--fw-bold);
}

/* ==========================================================================
   Contact Form (お問い合わせページ)
   淡いスカイブルーのセクション背景 + 白のガラス質フレーム内にフィールド。
   同意チェックと送信ボタンはフレーム外に配置してデザインに合わせる。
   ========================================================================== */
/* .section-padding より 1 段上げた詳細度で、SP 上書きに打ち勝つ形で余白調整 */
.contact-form-section.section-padding {
  background-color: #E9F2F9;
  padding-top: clamp(60px, 6vw, 100px);
  padding-bottom: clamp(60px, 6vw, 100px);
}

/* お問い合わせフォーム見出し (中央揃え) */
.contact-form-heading {
  margin: 0 0 clamp(24px, 3vw, 40px);
  font-family: var(--font-jp);
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  letter-spacing: 0.05em;
  text-align: center;
}

/* フォームの横幅はお知らせ一覧セクション (.news) と同じ 1200px 上限に揃える */
.contact-form {
  max-width: min(var(--container-max), calc(100vw - 40px));
  margin: 0 auto;
}

/* 白のフレーム: フィールドを囲む (上下は広めに、左右は既存維持) */
.contact-form-fields {
  padding: clamp(56px, 6vw, 100px) clamp(24px, 3.5vw, 56px);
  background-color: var(--color-white);
  border-radius: clamp(20px, 2vw, 30px);
}

/* 各項目 */
.contact-form-field {
  margin-bottom: clamp(20px, 2.5vw, 32px);
  margin-left: 32px;
  margin-right: 32px;
}
.contact-form-field:last-child {
  margin-bottom: 0;
}

/* ラベル + 必須バッジ */
.contact-form-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  font-family: var(--font-jp);
  font-size: 15px;
  font-weight: var(--fw-bold);
  color: var(--color-black);
  letter-spacing: 0.03em;
}

.contact-form-required {
  display: inline-block;
  padding: 3px 10px;
  background-color: var(--color-secondary);
  color: var(--color-white);
  font-family: var(--font-jp);
  font-size: 11px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.05em;
  border-radius: 4px;
}

/* 入力欄共通: 淡いスカイブルーの塗り + 角丸 */
/* 入力欄は白地 + 水色の枠線。フォーカス時は枠線を濃くして状態を示す */
.contact-form-input,
.contact-form-select,
.contact-form-textarea {
  width: 100%;
  padding: 16px 20px;
  background-color: var(--color-white);
  border: 1px solid var(--color-secondary-light);
  border-radius: 8px;
  font-family: var(--font-jp);
  font-size: 15px;
  color: var(--color-black);
  line-height: 1.6;
  transition: border-color var(--transition-speed) var(--easing),
              background-color var(--transition-speed) var(--easing);
}

.contact-form-input::placeholder,
.contact-form-textarea::placeholder {
  color: rgba(17, 17, 17, 0.35);
}

.contact-form-input:focus,
.contact-form-select:focus,
.contact-form-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
}

/* セレクトボックス: ネイティブ矢印を消して SVG シェブロンを右に描画 */
.contact-form-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 48px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 20px center;
  background-size: 16px 16px;
  cursor: pointer;
}
.contact-form-select:focus {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2352c3f7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
}
.contact-form-select option {
  color: var(--color-black);
}
.contact-form-select option[disabled] {
  color: rgba(17, 17, 17, 0.35);
}

/* テキストエリア */
.contact-form-textarea {
  min-height: 200px;
  resize: vertical;
}

/* 同意チェック: 白フレームの外、中央寄せ */
.contact-form-consent {
  margin: clamp(28px, 3.5vw, 40px) 0 clamp(24px, 3vw, 32px);
  display: flex;
  justify-content: center;
}
/* Contact Form 7 の [acceptance] は独自の入れ子（.wpcf7-list-item > label）を出力するため、
   静的版と同じ見た目になるようセレクタを併記する */
.contact-form-consent-label,
.contact-form-consent .wpcf7-list-item label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-family: var(--font-jp);
  font-size: 14px;
  color: var(--color-black);
}
.contact-form-consent-check,
.contact-form-consent input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--color-secondary);
}
/* CF7 が .wpcf7-list-item に付ける左余白を打ち消す */
.contact-form-consent .wpcf7-list-item {
  margin: 0;
}
/* base.css の .form-consent a と揃える (下線 → ホバーで消す) */
.contact-form-consent .form-consent a {
  color: var(--color-secondary);
  text-decoration: underline;
}
.contact-form-consent .form-consent a:hover {
  text-decoration: none;
  opacity: 1;
}

/* 送信ボタン: 共通 .btn.btn--primary コンポーネントを使用。
   カスタムスタイルは最小限に (中央寄せラッパ + submit として cursor / 幅の調整のみ) */
.contact-form-submit-wrap {
  display: flex;
  justify-content: center;
}
.contact-form-submit {
  min-width: 320px;
  cursor: pointer;
}

/* ==========================================================================
   Thanks (お問い合わせ完了ページ)
   中央寄せの白カードに、大きなチェックアイコン + 感謝メッセージ + CTA
   ========================================================================== */
.thanks {
  background-color: #E9F2F9;
}

.thanks-card {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(48px, 6vw, 88px) clamp(24px, 4vw, 64px);
  background-color: var(--color-white);
  border-radius: clamp(20px, 2vw, 30px);
  text-align: center;
}

/* 大きなチェックアイコン */
.thanks-icon {
  width: clamp(72px, 8vw, 96px);
  height: clamp(72px, 8vw, 96px);
  margin: 0 auto clamp(24px, 3vw, 36px);
}
.thanks-icon svg {
  width: 100%;
  height: 100%;
}
.thanks-icon svg circle {
  fill: var(--color-secondary);
}
.thanks-icon svg path {
  stroke: var(--color-white);
}

.thanks-title {
  margin: 0 0 clamp(20px, 2.5vw, 32px);
  font-family: var(--font-jp);
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  letter-spacing: 0.04em;
  line-height: 1.5;
}

.thanks-lead {
  margin: 0 0 clamp(16px, 2vw, 24px);
  font-family: var(--font-jp);
  font-size: 16px;
  font-weight: var(--fw-medium);
  color: var(--color-black);
  line-height: 1.9;
  letter-spacing: 0.03em;
}

.thanks-message {
  margin: 0 0 clamp(20px, 2.5vw, 32px);
  font-family: var(--font-jp);
  font-size: 15px;
  color: var(--color-black);
  line-height: 1.9;
  letter-spacing: 0.03em;
}

.thanks-note {
  /* 見出し「お問い合わせありがとうございました」の視覚幅 (約 530px @1280px)
     に合わせた max-width 中央寄せ。カード幅が狭い環境では 100% に収まる。
     カード内の最後の要素なので下 margin は不要 (カードの padding が担当) */
  max-width: 530px;
  margin: 0 auto;
  padding: clamp(14px, 1.6vw, 20px) clamp(16px, 2vw, 24px);
  background-color: #EAF3FA;
  border-radius: 8px;
  font-family: var(--font-jp);
  font-size: 13px;
  color: var(--color-gray);
  line-height: 1.7;
  letter-spacing: 0.02em;
  text-align: left;
}

.thanks-actions {
  display: flex;
  justify-content: center;
  margin-top: clamp(32px, 4vw, 48px);   /* カードの下に余白を確保 */
}
.thanks-actions .btn {
  min-width: 260px;
}

/* ==========================================================================
   Privacy Policy (プライバシーポリシーページ)
   教育機関紹介 (nepal_introduction) の .facility-list と同じ .container 幅を継承 (1200px)
   ========================================================================== */
.privacy-content {
  max-width: none;
  margin: 0 auto;
}

.privacy-item {
  margin-bottom: clamp(32px, 4vw, 48px);
}
.privacy-item:last-child {
  margin-bottom: 0;
}

.privacy-heading {
  margin: 0 0 clamp(14px, 1.6vw, 20px);
  padding-bottom: 12px;
  font-family: var(--font-jp);
  font-size: clamp(17px, 1.8vw, 20px);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  letter-spacing: 0.03em;
  line-height: 1.5;
  border-bottom: 1px solid var(--color-gray-border);
}

.privacy-body {
  font-family: var(--font-jp);
  font-size: 15px;
  color: var(--color-black);
  line-height: 1.9;
  letter-spacing: 0.03em;
}
.privacy-body p {
  margin: 0 0 1em;
}
.privacy-body p:last-child {
  margin-bottom: 0;
}
.privacy-body a {
  color: var(--color-primary);
  text-decoration: underline;
}
.privacy-body a:hover {
  opacity: 0.7;
}

/* サブリスト (a) / b) 等の項目) */
.privacy-sublist {
  list-style: none;
  padding-left: 0;
  margin: 0 0 1em;
}
.privacy-sublist li {
  padding-left: 0;
  margin-bottom: 4px;
}

/* 注釈 (※から始まる補足) */
.privacy-note {
  margin-top: 8px;
  font-size: 13px;
  color: var(--color-gray);
  line-height: 1.7;

}

/* screen-reader-only 見出しの共通ユーティリティ (未定義なら追加) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}





/* お問い合わせ・プライバシーポリシー等、下部が寂しいページ用の
   フッター直前の空白帯（#E9F2F9 の帯を 100px 高で表示） */
.page-footer-spacer {
  width: 100%;
  height: 100px;
  background-color: #E9F2F9;
}


/* ==========================================================================
   News Pagination — お知らせ一覧の 10 件区切り移動
   ========================================================================== */
.news-pagination {
  display: flex;
  justify-content: center;
  margin-top: clamp(20px, 2.5vw, 30px);
  margin-bottom: 100px;
}
.news-pagination-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 16px;
}
.news-pagination-item { margin: 0; }

.news-pagination-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 60px;
  height: 60px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1.5px solid var(--color-primary);
  background-color: var(--color-white);
  color: var(--color-primary);
  font-family: var(--font-en);
  font-size: 20px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition-speed) var(--easing),
              color var(--transition-speed) var(--easing);
}
a.news-pagination-btn:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
  opacity: 1;   /* base.css の a:hover { opacity: 0.7 } を打ち消して、濃紺を薄く見せない */
}
.news-pagination-btn.is-current {
  background-color: var(--color-primary);
  color: var(--color-white);
  cursor: default;
}

/* 前/次のナビゲーションボタン: アイコン用サイズ調整 */
.news-pagination-btn--nav {
  padding: 0;
  width: 40px;
}
.news-pagination-btn--nav svg {
  width: 20px;
  height: 20px;
  display: block;
}

/* ==========================================================================
   News Filter — お知らせページの カテゴリ切替 (パンくずリスト直下)
   すべて / ブログ / お知らせ / プレスリリース の 4 項目 + 縦区切り線
   ========================================================================== */
/* 背景 (#E9F2F9) を .news-filter に載せる。
   横幅は 1160px 上限で左右中央寄せ。狭い画面ではビューポート幅 -40px まで縮む */
.news-filter {
  width: 100%;
  max-width: min(1160px, calc(100vw - 40px));
  margin: 40px auto 0;
  padding: 16px 0;
  /* カテゴリタグクリック時に #news-filter アンカーで戻る際、
     fixed ヘッダーに隠れないよう上方向にスクロール余白を確保 */
  scroll-margin-top: clamp(80px, 8vw, 120px);
}
/* コンテナ内で左右中央揃え、見出し + タグ一覧を縦積みにする */
.news-filter > .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
/* タグ一覧の上に置く見出し */
/* ページ見出し（お知らせ）: 直下のカテゴリフィルターと続けて見せるため下余白は持たせない */
.news-intro.section-padding {
  padding-bottom: 0;
}
/* リストはフラット (旧: 角丸 + 背景 → 親 .news-filter へ移動) */
.news-filter-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 32px;
}
.news-filter-item {
  display: flex;
  align-items: center;
}

/* ピル型のフィルターボタン */
.news-filter-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 18px;
  font-family: var(--font-jp);
  font-size: 14px;
  font-weight: var(--fw-semibold);
  color: var(--color-primary);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition-speed) var(--easing),
              color var(--transition-speed) var(--easing);
}
/* 選択中: 濃紺塗り + 白文字 */
.news-filter-btn.is-active {
  background-color: var(--color-primary);
  color: var(--color-white);
  cursor: default;
}
/* ホバー時: 濃紺塗り + 白文字 (a:hover opacity を打ち消し) */
a.news-filter-btn:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
  opacity: 1;
}

/* お知らせページ等: ページネーションが無く .news の直後に
   お問い合わせセクションが来る場合、ガラスカードと Contact の距離が狭くなる。
   隣接セレクタで検出して追加余白を上乗せする。
   なお、通常のブロック margin と兄弟間で margin-collapse するため、
   .news の margin-bottom (=40px) と max を取って実効値になる。
   はっきり空けたいので 100px を指定 */
.news + section.contact {
  margin-top: 100px;
}

/* ==========================================================================
   Facility (トップページ 教育機関紹介セクション)
   会社概要ページ Members セクションと同じ縦積みレイアウト:
     見出し → 本文リード → 3 カラムグリッド → 下部 CTA
   ========================================================================== */
.facility.section-padding {
  padding-top: clamp(80px, 8vw, 120px);
  padding-bottom: clamp(40px, 4vw, 60px);   /* 下余白を半分に圧縮（Movie セクションと詰めて配置） */
}
/* コンテナ幅を Project セクションと同じ「左端 80px 揃え」に拡張。
   Recruit と同じ max-width: 1320 の中央寄せパターンで、
   左右 padding 20px を含めると内側の content-left が 80px から始まる */
.facility > .container {
  max-width: min(1320px, calc(100vw - 40px));
}

/* 3 カラムのカードグリッド (Members の .members-list と同じ列構成)
   ※ nepal_introduction.php も <section class="facility-list"> を使うため、
   ul タグ限定で collision を回避
   見出し（本文含む）との間隔は margin-top で確保 */
ul.facility-list {
  list-style: none;
  margin: clamp(24px, 3vw, 40px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(48px, 5vw, 80px) clamp(24px, 3vw, 48px);
}
.facility-item { display: flex; flex-direction: column; }

/* カード全体をリンクに: 写真 上 / 情報 + 矢印 下 */
.facility-item-link {
  display: grid;
  grid-template-areas:
    "photo photo"
    "info  arrow";
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: clamp(12px, 1.6vw, 20px);
  row-gap: clamp(14px, 1.6vw, 22px);
  align-items: center;
  color: inherit;
  text-decoration: none;
  transition: opacity var(--transition-speed) var(--easing);
}
.facility-item-link:hover { opacity: 1; }

/* 写真エリア (4:3 角丸) */
.facility-photo {
  grid-area: photo;
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: clamp(12px, 1.4vw, 16px);
  overflow: hidden;
  background-color: var(--color-gray-light);
}
.facility-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s var(--easing);
}
.facility-item-link:hover .facility-photo img {
  transform: scale(1.04);
}

/* 情報エリア (所在地 → 名称) */
.facility-info { grid-area: info; min-width: 0; }
.facility-loc {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 4px 0 0;   /* 名称の下に配置するため top→bottom へ寄せる */
  font-family: var(--font-jp);
  font-size: 12px;
  color: var(--color-gray);
  letter-spacing: 0.04em;
}
.facility-loc svg { width: 14px; height: 14px; flex-shrink: 0; }
.facility-name {
  margin: 0;
  font-family: var(--font-jp);
  font-size: 16px;
  font-weight: var(--fw-bold);
  color: var(--color-black);
  line-height: 1.4;
  letter-spacing: 0.02em;
}

/* 右下の矢印ボタン: Members と同じスライドスルー */
.facility-arrow {
  grid-area: arrow;
  align-self: center;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: clamp(40px, 3.8vw, 48px);
  height: clamp(40px, 3.8vw, 48px);
  border-radius: 50%;
  border: 1.5px solid var(--color-primary);
  color: var(--color-primary);
  background-color: transparent;
  transition: background-color var(--transition-speed) var(--easing),
              color var(--transition-speed) var(--easing);
}
.facility-arrow-svg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 45%;
  height: 45%;
  display: block;
  transition: transform 0.45s var(--easing);
}
.facility-arrow-svg--primary { transform: translate(-50%, -50%); }
.facility-arrow-svg--chase   { transform: translate(-250%, -50%); }
.facility-item-link:hover .facility-arrow-svg--primary { transform: translate(150%, -50%); }
.facility-item-link:hover .facility-arrow-svg--chase   { transform: translate(-50%, -50%); }
.facility-item-link:hover .facility-arrow {
  background-color: var(--color-primary);
  color: var(--color-white);
}

/* 下部の CTA ボタン (中央寄せ) — Project セクションの「支援事例を詳しく見る」と同じ横幅 */
.facility-cta-wrap {
  display: flex;
  justify-content: center;
  margin-top: clamp(48px, 5vw, 72px);
}
.facility-cta-wrap .btn {
  min-width: 317px;
  justify-content: center;
}

/* 教育機関紹介ページの各セクションアンカー: fixed ヘッダーに隠れないようスクロール余白確保 */
#kings,
#fordays,
#silver {
  scroll-margin-top: clamp(80px, 8vw, 120px);
}

/* ==========================================================================
   Message (会社概要 代表挨拶セクション)
   左: 見出し + 本文段落 / 右: 代表者写真 (縦長) + 氏名キャプション
   ========================================================================== */
.message {
  scroll-margin-top: clamp(80px, 8vw, 120px);
  background: #E9F2F9;
}
.message-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 600px;   /* 写真カラムを 340→680px の 2 倍幅に。左本文カラムはその分縮む */
  grid-template-areas:                            /* 左列: 見出し + 本文 / 右列: 写真 (縦連結) */
    "lead media"
    "body media";
  gap: clamp(18px, 1.8vw, 26px) clamp(40px, 5vw, 80px);   /* 見出し↔本文の縦間隔を約 1/3 (76→約25px) に圧縮 */
  align-items: center;                            /* 左カラムのテキストを右の写真に対して上下中央揃え */
  margin-top: clamp(24px, 3vw, 40px);
}
.message-lead  { grid-area: lead; align-self: end; }    /* 行の下端に寄せて本文と近づける */
.message-body  { grid-area: body; align-self: start; min-width: 0; }  /* 行の上端に寄せる */
.message-media { grid-area: media; }
/* 左カラム上部の見出し (代表取締役 氏名) — 24px。本文との縦間隔は grid gap で調整するため 0 */
.message-lead {
  margin: 0;
  font-family: var(--font-jp);
  font-size: 24px;
  font-weight: var(--fw-bold);
  color: var(--color-black);
  line-height: 1.45;
  letter-spacing: 0.06em;
}
.message-para {
  margin: 0 0 clamp(20px, 2.2vw, 28px);
  font-family: var(--font-jp);
  font-size:  clamp(14px, 3vw, 16px);
  line-height: 1.95;
  color: var(--color-black);
  letter-spacing: 0.04em;
}
.message-para:last-child { margin-bottom: 0; }

/* 右カラム: 写真 + キャプション */
.message-media { text-align: center; }
.message-photo {
  position: relative;
  aspect-ratio: 3 / 2;
  border-radius: clamp(12px, 1.4vw, 20px);
  overflow: hidden;
  background: linear-gradient(135deg, #dceaf7 0%, #b8d7f0 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.message-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.message-photo-placeholder {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 6px 14px;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 999px;
  font-family: var(--font-jp);
  font-size: 12px;
  color: var(--color-gray);
  z-index: 2;
  white-space: nowrap;
}
.message-caption {
  margin: clamp(12px, 1.4vw, 20px) 0 0;
  font-family: var(--font-jp);
  font-size: 15px;
  font-weight: var(--fw-bold);
  color: var(--color-black);
  letter-spacing: 0.06em;
}

/* 受け入れ事例・実績ページ: パンくず直下のリード文セクション
   .business-stats-lead の書式（濃紺・太字）を流用しつつ、単独配置用に下余白をリセット。 */

/* ==========================================================================
   Cases Summary — 業界別 内定者数（#08223E ガラスカード）
   参考画像のレイアウト（ラベルボックス + 大きな数字 + 単位）を再現。
   配色はトップページに合わせ、カードは濃紺 (#08223E)、数字はスカイブルー。
   ========================================================================== */
.cases-summary {
  padding-bottom: clamp(30px, 3vw, 50px);   /* 現状の半分に圧縮 */
}
/* リード文: 固定背景の上でも読みやすいよう白い光彩（グロー）を敷く */

/* カード見出し (.reasons-extra-title を流用)。
   濃紺カード上のため文字色は白に上書き + 左右中央揃え */
.cases-summary-heading {
  justify-content: center;   /* .reasons-extra-title は display:flex のため center で中央寄せ */
  color: var(--color-white);
  margin: 0 0 clamp(28px, 3.5vw, 48px);
}
/* マーカーのバイカラー（左スカイブルー / 右濃紺）→ 右半分を白に変更 */
.cases-summary-heading .reasons-extra-check {
  background: linear-gradient(
    to right,
    #52c3f7 0%,
    #52c3f7 50%,
    #ffffff 50%,
    #ffffff 100%
  );
}

.cases-summary-card {
  position: relative;
  /* トップページ reason セクション (.reasons-frame) と同じグラスモーフィズム:
     半透明の濃紺 + backdrop-filter で背後の固定背景をぼかす + 白半透明のエッジ */
  background-color: rgba(10, 43, 77, 0.8);
  backdrop-filter: blur(5px) saturate(0.4);
  -webkit-backdrop-filter: blur(10px) saturate(0.8);
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  border-radius: 30px;
  padding: clamp(40px, 4vw, 64px) clamp(24px, 3vw, 56px);
  color: var(--color-white);
}

/* 4 タイルを横一列。タイル間は細い縦の区切り線 */
.cases-summary-list {
  list-style: none;
  margin: 0;
  padding: 0;
  /* 各行のタイルをカード幅いっぱいに広げず、コンテンツ幅で中央に寄せる */
  display: grid;
  grid-auto-columns: auto;
  grid-auto-flow: column;
  justify-content: center;
}
/* 2 行目 (下段) との縦間隔 */
.cases-summary-list + .cases-summary-list {
  margin-top: clamp(24px, 3vw, 40px);
}
.cases-summary-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 1.6vw, 18px);
  /* タイル間の間隔（左右 padding）を半分に圧縮 */
  padding: 0 clamp(6px, 3vw, 36px);
}

/* 上部のラベルボックス（参考画像の淡いグレー枠 → 濃紺カード上では淡い白ボックス） */
.cases-summary-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: clamp(88px, 8vw, 120px);
  padding: 2px 20px;
  background-color: rgba(255, 255, 255, 0.873);
  font-family: var(--font-jp);
  font-size: clamp(14px, 1.2vw, 16px);
  font-weight: var(--fw-bold);
  color: black;
  letter-spacing: 0.08em;
}

/* 大きな数字 + 単位 */
.cases-summary-figure {
  margin: 0;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
}
.cases-summary-num {
  /* カウントアップ中に桁数が変わっても横幅が動かないよう inline-block + 幅固定。
     最終値の幅は JS が min-width で確保する（js/main.js の runCountUp）。
     text-align:right で数字の右端を常に「人」側へ寄せ、min-width が余っても
     余白は数字の左側に逃がす → 数字と「人」の間隔は常に flex gap (4px) で一定 */
  display: inline-block;
  text-align: right;
  font-variant-numeric: tabular-nums;   /* 各桁を等幅にしてブレを防ぐ */
  font-family: var(--font-en);
  font-size: clamp(48px, 6vw, 80px);
  font-weight: var(--fw-bold);
  color: #7aebff;   /* スカイブルー（トップページの数字と同色） */
  line-height: 1;
  letter-spacing: 0.01em;
}
.cases-summary-unit {
  font-family: var(--font-jp);
  font-size: clamp(14px, 1.3vw, 24px);
  font-weight: var(--fw-bold);
  color: var(--color-white);
  letter-spacing: 0.04em;
}

/* ==========================================================================
   Cases Clients — 導入企業ロゴ一覧（Our Mission と同じ白ガラスカード）
   ========================================================================== */
.cases-clients {
  /* リード→サマリー→導入企業→事例 で共有する固定背景（下の .cases-summary / .cases-list 群と同一） */
  background-color: #e9f2f9;
  background-image: url('../image/TOP_haikei.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
  /* 上: リード文との間隔を半分に圧縮（旧 clamp(20px, 2.5vw, 32px)）/ 下: 事例カードとの間隔は維持 */
  padding: clamp(10px, 1.25vw, 16px) 0 clamp(20px, 2.5vw, 32px);
}
.cases-clients-card {
  /* Our Mission カード (.about-us-tenet-card) と同じ白いグラスモーフィズム */
  padding: clamp(40px, 5vw, 80px) clamp(24px, 4vw, 72px);
  background-color: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(5px) saturate(0.4);
  -webkit-backdrop-filter: blur(10px) saturate(0.8);
  border: 1px solid white;
  border-radius: clamp(16px, 1.8vw, 28px);
}

/* 見出し: 白カード上・黒文字 */
.cases-clients-heading {
  color: var(--color-black);
  margin: 0 0 clamp(32px, 4vw, 56px);
}
.cases-clients-heading .reasons-extra-check {
  background: linear-gradient(
    to right,
    #52c3f7 0%,
    #52c3f7 50%,
    var(--color-primary) 50%,
    var(--color-primary) 100%
  );
}

/* ロゴグリッド: 5 カラム。各セルはロゴのプレースホルダ（社名テキスト） */
.cases-clients-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2vw, 32px);
}
.cases-client-item {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 2 / 1;      /* 縦幅を少し短く（旧 3/2 より扁平に） */
  padding: 12px;
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-border);
  border-radius: 8px;

  /* 出現アニメーション（フォーカスイン + 下→上スライド）の初期状態:
     ぼかし + 透明 + 少し下にオフセット → ピントが合いながら下から上へ浮き上がる。
     グリッドが画面内に入ると .is-visible が付き発火する（js/main.js）*/
  opacity: 0;
  filter: blur(8px);
  transform: translateY(24px);
  transition: opacity 0.6s var(--easing),
              filter 0.6s var(--easing),
              transform 0.6s var(--easing);
}
/* 発火: グリッドに .is-visible が付くと、下から上へ移動しつつピントが合ってくっきり表示 */
.cases-clients-grid.is-visible .cases-client-item {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}
/* 順次カスケード: 左上→右下へ 1 枚ずつ遅延（一斉にしたい場合はこの nth-child 群を削除）*/
.cases-clients-grid.is-visible .cases-client-item:nth-child(1) { transition-delay: 0s;    }
.cases-clients-grid.is-visible .cases-client-item:nth-child(2) { transition-delay: 0.08s; }
.cases-clients-grid.is-visible .cases-client-item:nth-child(3) { transition-delay: 0.16s; }
.cases-clients-grid.is-visible .cases-client-item:nth-child(4) { transition-delay: 0.24s; }
.cases-clients-grid.is-visible .cases-client-item:nth-child(5) { transition-delay: 0.32s; }
.cases-clients-grid.is-visible .cases-client-item:nth-child(6) { transition-delay: 0.40s; }
.cases-clients-grid.is-visible .cases-client-item:nth-child(7) { transition-delay: 0.48s; }
.cases-clients-grid.is-visible .cases-client-item:nth-child(8) { transition-delay: 0.56s; }
/* ロゴ画像: セル内に収める（アスペクト比維持） */
.cases-client-logo-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}