@charset "utf-8";
/**
 * Theme Name: olga link Corporate Theme
 * Description: olga link の公式コーポレートテーマ用メインスタイルシート。全デザイン・レスポンシブ崩れ防止を統合した完全版。
 * Version: 5.0.0
 * Author: 株式会社 olga lab.
 */

/* ==========================================================================
   1. COLOR SYSTEM (CSS VARIABLES) & GLOBAL STYLES
   ========================================================================== */
:root {
  /* メイン・アクセントカラー */
  --color-primary: #3ec1d3;          /* メイン（シアン） */
  --color-secondary: #2a9cab;        /* サブカラー（ダークシアン。CTA・フッター背景に使用） */
  
  /* CTAボタン用 */
  --color-cta-main: #e8735a;         /* メインCTA背景（コーラル） */
  --color-cta-main-hover: #c05a3a;   /* メインCTAホバー時 */
  --color-cta-header: #3ec1d3;       /* ヘッダーCTA背景（メイン） */
  --color-cta-header-hover: #2a9cab; /* ヘッダーCTAホバー時 */

  /* 実績・強調数字 */
  --color-num-base: #f6b93b;         /* 基本・実績数字（イエローゴールド） */
  --color-num-mos: #3ec1d3;          /* MOS関連強調数字（メインシアン） */
  --color-num-teichaku: #e8735a;     /* 定着率強調数字（コーラル） */

  /* セクション背景（交互使用ルール用） */
  --color-bg-white: #ffffff;         /* 背景：白 */
  --color-bg-warm: #fdf8f0;          /* 背景：ウォームベージュ */
  --color-bg-cool: #e7f5f9;          /* 背景：ライトアクア（淡いシアン） */

  /* 基本テキスト */
  --color-text-main: #333333;
  --color-text-muted: #445d63;       /* Muted Cyan text */
  
  --font-base: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, sans-serif;
  --radius: 16px;
  --radius-sm: 8px;
  --shadow: 0 8px 30px rgba(42, 156, 171, 0.06);
  --shadow-lg: 0 12px 40px rgba(42, 156, 171, 0.12);
  --header-height: 80px;
  --container: 1140px;
  --transition: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden !important; /* 画面全体の横揺れ・横スクロールを一撃で完全シャットアウト */
}

body {
  font-family: var(--font-base);
  font-size: 16px;
  line-height: 1.8;
  color: var(--color-text-main);
  background-color: var(--color-bg-white);
  overflow-x: hidden !important; /* bodyレベルでの横はみ出しも確実に抑止 */
  padding-top: var(--header-height, 80px); /* 固定ヘッダー用の余白確保 */
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-secondary); text-decoration: none; transition: all var(--transition); }
a:hover { color: var(--color-primary); }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

/* Skip Link & Screen Reader Utilities */
.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  background: var(--color-secondary);
  color: #fff;
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  z-index: 9999;
  font-weight: 600;
}
.skip-link:focus { top: 16px; }

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

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 14px 28px;
  font-family: var(--font-base);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  cursor: pointer;
  transition: all var(--transition);
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  white-space: nowrap !important;
}

.btn--primary {
  background-color: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}
.btn--primary:hover {
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(62, 193, 211, 0.3);
}

.btn--cv {
  background-color: var(--color-cta-main);
  color: #fff;
  border-color: var(--color-cta-main);
}
.btn--cv:hover {
  background-color: var(--color-cta-main-hover);
  border-color: var(--color-cta-main-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(232, 115, 90, 0.3);
}

.btn--outline {
  background-color: transparent;
  color: var(--color-secondary);
  border: 2px solid var(--color-primary);
}
.btn--outline:hover {
  background-color: var(--color-bg-cool);
  border-color: var(--color-secondary);
  color: var(--color-secondary);
}

.btn--large {
  min-height: 58px;
  padding: 16px 36px;
  font-size: 1.125rem;
  border-radius: var(--radius);
}

/* Section Global Headers */
.section {
  padding: 96px 0;
}

.section-header {
  text-align: center;
  margin-bottom: 56px;
}

.section-title {
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  font-weight: 700;
  color: var(--color-secondary);
  margin-bottom: 16px;
  position: relative;
  display: inline-block;
}

.section-lead {
  font-size: 1.125rem;
  color: var(--color-text-muted);
  max-width: 680px;
  margin: 0 auto;
}

.section__action {
  text-align: center;
  margin-top: 40px;
}

/* ==========================================================================
   1.8 BREADCRUMBS & PAGE HEADER (GLOBAL DEFAULTS)
   ========================================================================== */
.breadcrumbs {
  margin-top: 24px;
  font-size: 0.875rem;
  font-weight: 500;
}
.breadcrumbs__list {
  display: flex;
  list-style: none;
  gap: 8px;
  color: var(--color-text-muted);
  padding: 0;
  margin: 0;
}
.page-header {
  text-align: center;
  padding: 48px 0 24px;
}

/* ==========================================================================
   2. HEADER & FIXED NAVIGATION
   ========================================================================== */
/* どんな外部CSS/JSよりも固定を最優先する強固なセレクタ */
html body header.site-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: var(--header-height, 80px) !important;
  z-index: 2147483647 !important; /* どんな要素よりも最前面 */
  background-color: var(--color-secondary, #2a9cab) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  
  /* スクロール時に外部 JS/CSS がヘッダーを消したり動かしたりするのを完全遮断 */
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* WordPressログイン時の調整（管理バー被り防止 - PC用） */
html body.admin-bar {
  margin-top: 0 !important;
}
html body.admin-bar header.site-header {
  top: 32px !important;
}

@media (max-width: 782px) {
  /* ==========================================================================
     WordPressログイン管理バー（モバイル：幅782px以下、高さ46px）の完全固定化＆ヘッダーめり込み防止
     ========================================================================== */
  
  /* 1. htmlのmargin-topは、WordPressコアが出力するデフォルト（46px）をそのまま活かします。
        無理に0に書き換えないことで、ブラウザによる fixed 要素のスクロール時のレンダリング位置の狂いを完全に防ぎます。 */
  html {
    margin-top: 46px !important;
  }
  
  /* 2. モバイル用の管理バー自身（高さ46px）を position: fixed で画面最上部に完全固定します。
        これにより、スクロールしても上に逃げて消えず、常に画面最上部に留まります（PCと同様の美しい挙動）。 */
  html body.admin-bar #wpadminbar {
    position: fixed !important;
    top: 0 !important;
    z-index: 2147483647 !important;
  }
  
  /* 3. 固定ヘッダーは、最上部に固定された管理バー（46px）の直下（top: 46px）にピタッと固定します。
        管理バーを fixed にしたため、ヘッダーも top: 46px で不動になり、めり込みやズレは一切発生しません。 */
  html body.admin-bar header.site-header {
    top: 46px !important;
  }
  
  /* 4. ファーストビューでのコンテンツの潜り込みを防止するため、
        固定ヘッダー（80px）分の余白を body の padding-top にしっかりと確保します。
        （htmlのmargin-top: 46pxが全体を押し下げるため、ここではヘッダーの高さ分だけで隙間なくピタッと繋がります） */
  html body.admin-bar {
    margin-top: 0 !important; /* 重複するマージンをリセット */
    padding-top: var(--header-height, 80px) !important;
  }
}

/* PC環境用の調整 (769px以上) ナビゲーションの折り返し・改行を完全に防ぐ */
@media (min-width: 769px) {
  .site-nav {
    display: flex !important;
    align-items: center !important;
    flex: 1 !important;
    justify-content: center !important;
    margin: 0 16px !important;
  }
  .section-lead {
    white-space: nowrap !important;
  }
  .site-nav__list {
    display: flex !important;
    list-style: none !important;
    gap: 2px !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
  }
  .site-nav__list li a {
    white-space: nowrap !important;
    padding: 8px 10px !important;
    font-size: 0.85rem !important;
  }

  /* デスクトップ大画面（1100px以上）では、ゆったりと美しいフルサイズ表示に */
  @media (min-width: 1100px) {
    .site-nav__list {
      gap: 6px !important;
    }
    .site-nav__list li a {
      padding: 10px 14px !important;
      font-size: 0.9375rem !important;
    }
  }

  /* ドロップダウン親メニューの相対配置 */
  .menu-item-has-children {
    position: relative !important;
  }

  /* ドロップダウン矢印の初期状態 & トランジション */
  .submenu-indicator {
    display: inline-block !important;
    transition: transform 0.3s ease !important;
    margin-left: 6px !important;
    font-size: 0.85rem !important;
    vertical-align: middle !important;
  }

  /* ホバー時に親メニューの矢印を回転 */
  .menu-item-has-children:hover .submenu-indicator {
    transform: rotate(180deg) !important;
  }

  /* PCドロップダウン子メニューの基本スタイル（フェード & スライドイン初期状態） */
  .site-nav__list .sub-menu {
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(10px) !important;
    width: 220px !important;
    background-color: #ffffff !important;
    box-shadow: 0 10px 30px rgba(42, 156, 171, 0.15) !important;
    border-radius: var(--radius-sm, 8px) !important;
    padding: 12px 0 !important;
    margin: 0 !important;
    list-style: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s !important;
    z-index: 100000 !important;
    border: 1px solid rgba(42, 156, 171, 0.1) !important;
  }

  /* ホバー時にフェード ＆ スライドイン表示 */
  .menu-item-has-children:hover .sub-menu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(-50%) translateY(0) !important;
  }

  /* ドロップダウンメニュー内リンクのスタイル */
  .site-nav__list .sub-menu li {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .site-nav__list .sub-menu li a {
    display: block !important;
    padding: 10px 20px !important;
    color: var(--color-secondary, #2a9cab) !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    background-color: transparent !important;
    border-radius: 0 !important;
    text-align: left !important;
    transition: all 0.25s ease !important;
    white-space: nowrap !important;
    border-bottom: none !important;
  }

  /* ドロップダウン内ホバー時のマイクロインタラクション（優しく背景が色づき、少し右へスライド） */
  .site-nav__list .sub-menu li a:hover {
    background-color: var(--color-bg-cool, #e7f5f9) !important;
    color: var(--color-primary, #3ec1d3) !important;
    padding-left: 24px !important; /* スムーズに右に4pxスライド */
  }
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
}

.site-header__logo-mark-wrapper {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 60px !important;
  height: 60px !important;
  background-color: #ffffff !important;
  border-radius: 50% !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1) !important;
  padding: 8px !important;
  box-sizing: border-box !important;
}

.site-header__logo-mark-wrapper img {
  width: 44px !important;
  height: 44px !important;
  flex-shrink: 0 !important;
  object-fit: contain !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.site-header__logo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo-container {
  display: flex;
  flex-direction: column;
}

.site-header__logo-main {
  font-size: 1.35rem;
  font-weight: 900;
  color: #fff;
  letter-spacing: 0.05em;
  line-height: 1.2;
}

.site-header__logo-sub {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 500;
}

.site-nav {
  display: flex;
  align-items: center;
}

.site-nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 20px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 1100;
}

.site-nav__toggle-bar {
  display: block;
  width: 100%;
  height: 3px;
  background-color: #fff;
  border-radius: 99px;
  transition: var(--transition);
}

.site-nav__list {
  display: flex;
  list-style: none;
  gap: 8px;
}

.site-nav__list a {
  display: block;
  padding: 10px 18px;
  color: #fff;
  font-weight: 700;
  font-size: 0.9375rem;
  border-radius: var(--radius-sm);
  transition: var(--transition);
}

.site-nav__list a:hover {
  background-color: rgba(255, 255, 255, 0.15);
  color: #fff;
}

.site-header__cv {
  display: flex;
  align-items: center;
  gap: 20px;
}

.site-header__phone {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  white-space: nowrap;
}
.site-header__phone i {
  font-size: 1.2rem;
}

.site-header__cta .btn {
  background-color: var(--color-cta-header);
  border-color: var(--color-cta-header);
  color: #fff;
  box-shadow: none;
  font-size: 0.9375rem;
  min-height: 44px;
  padding: 10px 20px;
}

.site-header__cta .btn:hover {
  background-color: var(--color-cta-header-hover);
  border-color: var(--color-cta-header-hover);
  transform: translateY(-1px);
}

/* Mobile Bottom CV Bar */
.mobile-cv-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background-color: #fff;
  border-top: 1px solid rgba(42, 156, 171, 0.15);
  box-shadow: 0 -6px 20px rgba(0,0,0,0.06);
  padding: 12px 20px;
  gap: 12px;
}

.mobile-cv-bar__pamphlet,
.mobile-cv-bar__reserve {
  flex: 1;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  border-radius: 8px;
  font-size: 0.85rem;
  gap: 6px;
  text-decoration: none !important;
}

.mobile-cv-bar__pamphlet {
  background-color: #f6b93b;
  color: #2a8a9a; /* コントラストと視認性を高めたプレミアムダークグリーン */
  box-shadow: 0 4px 12px rgba(246, 185, 59, 0.2);
}

.mobile-cv-bar__reserve {
  background-color: #3ec1d3;
  color: #fff;
  box-shadow: 0 4px 12px rgba(62, 193, 211, 0.25);
}

/* ==========================================================================
   3. HERO SLIDER (Swiper) & BRIGHT OVERLAYS
   ========================================================================== */
.hero-slider-section {
  padding: 0;
}

.hero-swiper {
  width: 100%;
  height: 540px;
}

.hero-slide {
  position: relative;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-start;
}

/* スライダー内の全スライド位置を完璧に統一するためのコンテナ設定 */
.hero-slide .container {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  padding-top: 90px !important;
  box-sizing: border-box !important;
  height: 100% !important;
}

/* スライダーのオーバーレイを極限まで薄く (0.16) 透過して背景イラストを引き立たせる */
.slide-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, rgba(42, 156, 171, 0.16) 0%, rgba(62, 193, 211, 0.02) 100%) !important;
  z-index: 1;
}

.slide-content-container {
  position: relative;
  z-index: 2;
  color: #fff;
  max-width: 760px;
}

.slide-badge {
  display: inline-block;
  background-color: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 700;
  margin-bottom: 12px !important;
  backdrop-filter: blur(4px);
}

/* 背景が明るくなった分、白文字がボケないように微細な文字影（text-shadow）を付与 */
.slide-title {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 900;
  line-height: 1.35;
  min-height: 110px !important;
  margin-bottom: 12px !important;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35) !important;
}

.slide-title span {
  color: var(--color-num-base);
}

.slide-title-line {
  display: inline-block !important;
  white-space: nowrap !important;
  max-width: 100% !important;
}

.slide-lead {
  font-size: clamp(1rem, 2vw, 1.125rem);
  opacity: 0.95;
  line-height: 1.8;
  min-height: 120px !important;
  margin-bottom: 16px !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4) !important;
  white-space: nowrap !important;
}

.slide-features-stepup {
  min-height: 120px !important;
  margin-bottom: 16px !important;
}

.slide-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.swiper-button-prev,
.swiper-button-next {
  color: #fff !important;
  width: 48px !important;
  height: 48px !important;
  background: rgba(255, 255, 255, 0.15) !important;
  border-radius: 50% !important;
  backdrop-filter: blur(4px);
  transition: var(--transition) !important;
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
  background: var(--color-num-base) !important;
  color: #fff !important;
}

.swiper-button-prev::after,
.swiper-button-next::after {
  font-size: 16px !important;
  font-weight: 900 !important;
}

.swiper-pagination-bullet {
  background-color: rgba(255, 255, 255, 0.4) !important;
  opacity: 1 !important;
}

.swiper-pagination-bullet-active {
  background-color: var(--color-num-base) !important;
  width: 24px !important;
  border-radius: 4px !important;
}

/* ==========================================================================
   4. MESSAGE BAR
   ========================================================================== */
.message-bar {
  background-color: var(--color-bg-cool);
  border-bottom: 1px solid rgba(62, 193, 211, 0.25);
  padding: 18px 0;
}

.message-bar__grid {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 16px 32px;
  list-style: none;
}

.message-bar__item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  color: var(--color-text-muted);
  font-size: 1.05rem;
}

.message-bar__item i {
  font-size: 1.35rem;
  color: var(--color-secondary);
}

.message-bar__item strong {
  color: var(--color-secondary);
  font-size: 1.15rem;
  margin-left: 2px;
}

/* ==========================================================================
   5. METRIC INFOGRAPHIC (YMYL / EVIDENCE)
   ========================================================================== */
.section--metrics {
  background-color: var(--color-bg-white);
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-bottom: 32px;
}

.metric-card {
  background-color: var(--color-bg-warm);
  border-radius: var(--radius);
  padding: 36px 28px;
  border: 1px solid rgba(42, 156, 171, 0.15);
  text-align: center;
  transition: var(--transition);
  display: flex;
  flex-direction: column;
}

.metric-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.metric-card__badge {
  display: inline-block;
  align-self: center;
  background-color: var(--color-secondary);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 99px;
  margin-bottom: 16px;
}

.metric-card__value {
  font-size: 3.5rem;
  font-weight: 900;
  line-height: 1;
  margin-bottom: 8px;
}

.metric-card--blue .metric-card__value { color: var(--color-num-mos); }
.metric-card--gold .metric-card__value { color: var(--color-num-base); }
.metric-card--coral .metric-card__value { color: var(--color-num-teichaku); }

.metric-card__value-unit {
  font-size: 1.5rem;
  font-weight: 700;
}

.metric-card__title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text-main);
  margin-bottom: 12px;
}

.metric-card__vs {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  background-color: #fff;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  display: inline-block;
  margin-bottom: 16px;
  font-weight: 500;
  border: 1px solid rgba(42, 156, 171, 0.1);
}

.metric-card__vs strong {
  color: var(--color-secondary);
  font-weight: 700;
}

.metric-card__desc {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  line-height: 1.6;
  text-align: left;
}

.metric-card__desc strong {
  color: var(--color-secondary);
}

.metric-card__chart {
  margin-top: auto;
  padding-top: 24px;
}

/* Comparison Bar Chart */
.metric-bar-chart {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.metric-bar-chart__row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.metric-bar-chart__lbl {
  width: 76px;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-text-muted);
  text-align: right;
}

.metric-bar-chart__track {
  flex: 1;
  height: 16px;
  background-color: rgba(42, 156, 171, 0.1);
  border-radius: 99px;
  overflow: hidden;
  position: relative;
}

.metric-bar-chart__fill {
  height: 100%;
  border-radius: 99px;
  background-color: var(--color-secondary);
  transition: width 1s ease-in-out;
}

.metric-bar-chart__fill--gold { background-color: var(--color-num-base); }
.metric-bar-chart__fill--mos { background-color: var(--color-num-mos); }

.metric-bar-chart__num {
  width: 54px;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-text-main);
  text-align: left;
}

.metric-card__chart-sub {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-text-muted);
  border-top: 1px solid rgba(42, 156, 171, 0.1);
  padding-top: 10px;
}

.metrics-footer-note {
  text-align: center;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin-top: 16px;
  font-weight: 500;
}

/* ==========================================================================
   6. SEVEN REASONS (THE 7 ADVANTAGES - ODD NUMBER PRINCIPLE)
   ========================================================================== */
.section--reasons {
  background-color: var(--color-bg-warm);
}

.reasons-grid {
  display: grid;
  /* 修正：スマホの極小画面でもはみ出さないようにmin()で制御 */
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 32px;
}

.reason-card {
  background-color: #fff;
  border-radius: var(--radius);
  padding: 36px;
  box-shadow: 0 10px 30px rgba(42, 156, 171, 0.04);
  border: 1px solid rgba(42, 156, 171, 0.08);
  position: relative;
  overflow: hidden;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
}

/* カード上部にテーマカラーの太さ5pxのカラーバーを設置 */
.reason-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background-color: var(--card-theme-color, var(--color-secondary));
  transition: height 0.3s ease;
}

/* ホバー時にカード全体が美しく持ち上がり、専用の影とボーダーが浮き出る */
.reason-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px var(--card-shadow-color, rgba(42, 156, 171, 0.12));
  border-color: var(--card-theme-color, var(--color-secondary));
}

.reason-card__num {
  position: absolute;
  top: -10px;
  right: 15px;
  font-size: 5rem;
  font-weight: 900;
  color: var(--card-num-color, rgba(62, 193, 211, 0.06));
  line-height: 1;
  font-family: 'Montserrat', sans-serif;
  user-select: none;
  transition: all 0.3s ease;
}

.reason-card:hover .reason-card__num {
  transform: scale(1.05) translateY(-5px);
  opacity: 0.15;
}

.reason-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  background-color: var(--card-icon-bg, var(--color-bg-cool));
  color: var(--card-theme-color, var(--color-secondary));
  border-radius: 16px;
  font-size: 1.85rem;
  margin-bottom: 24px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
  transition: all 0.3s ease;
}

.reason-card:hover .reason-card__icon {
  transform: rotate(-6deg) scale(1.1);
}

.reason-card__title {
  font-size: 1.2rem;
  font-weight: 900;
  color: var(--color-text-main);
  margin-bottom: 12px;
  line-height: 1.4;
  transition: color 0.3s ease;
}

.reason-card:hover .reason-card__title {
  color: var(--card-theme-color, var(--color-secondary));
}

.reason-card__desc {
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  line-height: 1.75;
  margin: 0;
}

/* --- 選ばれる理由：カード別テーマカラー設定（極上の6色パレット） --- */

/* ① 専門チーム (温かみのコーラルオレンジ) */
.reason-card--staff {
  --card-theme-color: #e8735a;
  --card-shadow-color: rgba(232, 115, 90, 0.15);
  --card-icon-bg: rgba(232, 115, 90, 0.08);
  --card-num-color: rgba(232, 115, 90, 0.08);
}

/* ② MOS資格取得 (信頼と知性のディープシアン) */
.reason-card--mos {
  --card-theme-color: #2a9cab;
  --card-shadow-color: rgba(42, 156, 171, 0.15);
  --card-icon-bg: rgba(42, 156, 171, 0.08);
  --card-num-color: rgba(42, 156, 171, 0.08);
}

/* ③ 実習と工賃 (豊かさのゴールドアンバー) */
.reason-card--wage {
  --card-theme-color: #f6b93b;
  --card-shadow-color: rgba(246, 185, 59, 0.15);
  --card-icon-bg: rgba(246, 185, 59, 0.08);
  --card-num-color: rgba(246, 185, 59, 0.08);
}

/* ④ 手作り昼食 (健康と安らぎのフレッシュエメラルド) */
.reason-card--meal {
  --card-theme-color: #10b981;
  --card-shadow-color: rgba(16, 185, 129, 0.15);
  --card-icon-bg: rgba(16, 185, 129, 0.08);
  --card-num-color: rgba(16, 185, 129, 0.08);
}

/* ⑤ 自分に合った就職 (先進とスピードのターコイズシアン) */
.reason-card--recruit {
  --card-theme-color: #3ec1d3;
  --card-shadow-color: rgba(62, 193, 211, 0.15);
  --card-icon-bg: rgba(62, 193, 211, 0.08);
  --card-num-color: rgba(62, 193, 211, 0.08);
}

/* ⑥ 就職後の安心 (優しさと絆のローズピンク) */
.reason-card--support {
  --card-theme-color: #e91e63;
  --card-shadow-color: rgba(233, 30, 99, 0.15);
  --card-icon-bg: rgba(233, 30, 99, 0.08);
  --card-num-color: rgba(233, 30, 99, 0.08);
}

/* ==========================================================================
   7. SERVICE PORTAL (4 SEPARATE INDEPENDENT CARDS)
   ========================================================================== */
.section--services {
  background-color: var(--color-bg-white);
}

.services-portal {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.portal-card {
  background-color: #fff;
  border-radius: var(--radius);
  padding: 32px 24px;
  box-shadow: var(--shadow);
  border: 1px solid rgba(42, 156, 171, 0.15);
  transition: var(--transition);
  display: flex;
  flex-direction: column;
  position: relative;
}

.portal-card__icon {
  font-size: 2.25rem;
  color: var(--color-secondary);
  margin-bottom: 16px;
}

.portal-card__title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-secondary);
  margin-bottom: 8px;
}

.portal-card__concept {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-text-muted);
  background-color: var(--color-bg-cool);
  padding: 4px 10px;
  border-radius: 4px;
  align-self: flex-start;
  margin-bottom: 16px;
}

.portal-card__desc {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  line-height: 1.7;
  margin-bottom: 24px;
  flex: 1;
}

.portal-card__arrow {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
}

.portal-card__arrow i {
  transition: var(--transition);
}

.portal-card:hover .portal-card__arrow i {
  transform: translateX(4px);
}

/* ==========================================================================
8. DOUBLE INSTAGRAM FEED（デスクトップ2列強制・ボタン横並び＆空白埋め特化版）
========================================================================== */
.instagram-section,
.section--insta {
  background-color: var(--color-bg-cool) !important;
  padding: 80px 0 !important;
}

/* 2つのカードを左右50%ずつの綺麗な2列に整列 */
.insta-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 40px !important;
  align-items: start !important;
  width: 100% !important;
  max-width: var(--container, 1140px) !important;
  margin: 40px auto 0 !important;
}

/* 各カードの枠線・背景・影装飾 */
.insta-col,
.insta-column {
  width: 100% !important;
  min-width: 0 !important;
  background-color: #ffffff !important;
  border-radius: var(--radius, 16px) !important;
  padding: 36px !important;
  border: 1px solid rgba(42, 156, 171, 0.15) !important;
  box-shadow: var(--shadow, 0 8px 30px rgba(42, 156, 171, 0.08)) !important;
  display: flex !important;
  flex-direction: column !important;
}

/* スマホ専用改行（PC表示時は非表示） */
.br-sp-only {
  display: none;
}

/* スマホ表示（768px以下）：自動で1列（縦積み）に戻す */
@media (max-width: 768px) {
  .insta-grid {
    grid-template-columns: 1fr !important;
    gap: 50px !important;
  }
  .instagram-section,
  .section--insta {
    padding: 60px 0 !important;
  }
  .insta-col,
  .insta-column {
    padding: 24px !important;
  }
  /* 修正：スマホ環境ではボタンを縦並びに切り替えて幅崩れを防止 */
  .sbi_sbspace {
    flex-direction: column !important;
    gap: 12px !important;
  }
}

/* 【最重要：右側の虚無の空白を完全消去】
   プラグインの画像グリッドを強制的にカード幅いっぱいに引き伸ばして整列 */
#sbi_images {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important; /* 横に2枚ピタッと並べる */
  gap: 12px !important;
  width: 100% !important;
  margin: 0 auto 24px !important;
}

#sbi_images .sbi_item {
  width: 100% !important;
  margin: 0 !important;
}

/* 【最重要：ボタンの横並び化】
   プラグインの回り込み(float)や改行を強制的に解除し、1:1の横並びにする */
.sbi_sbspace {
  display: flex !important;
  flex-direction: row !important;
  gap: 12px !important;
  justify-content: space-between !important;
  width: 100% !important;
  margin-top: 10px !important;
  float: none !important;
  clear: both !important;
}

/* 各ボタンコンテナ */
.sbi_sbspace .sbi_load_btn,
.sbi_sbspace .sbi_follow_btn {
  flex: 1 !important;
  width: auto !important;
  margin: 0 !important;
}

/* 「さらに読み込む」ボタンのスタイル */
span.sbi_load_btn {
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
  border: none !important;
}
span.sbi_load_btn a,
.sbi_load_btn a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 44px !important;
  border: 2px solid var(--color-primary, #3ec1d3) !important;
  color: var(--color-secondary, #2a9cab) !important;
  background-color: transparent !important;
  border-radius: var(--radius-sm, 8px) !important;
  font-weight: 700 !important;
  font-size: 0.875rem !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
}
span.sbi_load_btn a:hover,
.sbi_load_btn a:hover {
  background-color: var(--color-bg-cool, #e7f5f9) !important;
  border-color: var(--color-secondary, #2a9cab) !important;
}

/* 【最重要：青枠を消去】
   外側の余計な青い枠線（額縁）を完全に消去する */
span.sbi_follow_btn {
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
  border: none !important;
}

/* 内側のフォローボタンだけを美しいフラットな単一シアンボタンに成形 */
span.sbi_follow_btn a,
.sbi_follow_btn a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 44px !important;
  background-color: #3ec1d3 !important; /* ブランドシアンカラー */
  color: #ffffff !important;
  border-radius: var(--radius-sm, 8px) !important;
  font-weight: 700 !important;
  font-size: 0.875rem !important;
  text-decoration: none !important;
  box-shadow: 0 4px 12px rgba(62, 193, 211, 0.2) !important;
  border: none !important;
  padding: 0 16px !important;
  transition: all 0.3s ease !important;
}
span.sbi_follow_btn a:hover,
.sbi_follow_btn a:hover {
  background-color: var(--color-secondary, #2a9cab) !important;
  box-shadow: 0 6px 18px rgba(42, 156, 171, 0.3) !important;
}

/* ==========================================================================
8-2. INSTAGRAM PARTS (AVATARS, USERNAMES, METAS & ALIGNMENT)
========================================================================== */
.insta-label-wrap,
.insta-profile {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin-bottom: 16px !important;
}

.insta-avatar,
.insta-profile__avatar {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  background-color: var(--color-bg-cool, #e7f5f9) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.35rem !important;
  color: var(--color-secondary, #2a9cab) !important;
  border: 1px solid rgba(62, 193, 211, 0.2) !important;
  flex-shrink: 0 !important;
}

.insta-meta,
.insta-profile__meta {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.insta-username,
.insta-profile__username {
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: var(--color-secondary, #2a9cab) !important;
  text-decoration: none !important;
}

.insta-username:hover,
.insta-profile__username:hover {
  color: var(--color-primary, #3ec1d3) !important;
}

.insta-badge,
.insta-profile__badge {
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  padding: 2px 8px !important;
  border-radius: 4px !important;
  align-self: flex-start !important;
}

.insta-badge--link {
  background-color: var(--color-bg-cool, #e7f5f9) !important;
  color: var(--color-secondary, #2a9cab) !important;
}

.insta-badge--cafe {
  background-color: var(--color-bg-warm, #fdf8f0) !important;
  color: var(--color-cta-main, #e8735a) !important;
}

.insta-intro,
.insta-profile__intro {
  font-size: 0.85rem !important;
  color: var(--color-text-muted, #445d63) !important;
  line-height: 1.6 !important;
  margin-bottom: 20px !important;
}

/* ==========================================================================
8-3. TESTIMONIALS (卒業生の声 - 美しい角丸カードフレーム完全保持)
========================================================================== */
.section--testimonials {
  background-color: var(--color-bg-white, #ffffff) !important;
  padding: 96px 0 !important;
}

.testimonials-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 32px !important;
  margin-top: 40px !important;
}

.testimonial-card {
  background-color: #ffffff !important;
  border-radius: var(--radius, 16px) !important;
  padding: 36px !important;
  border: 1px solid rgba(42, 156, 171, 0.15) !important;
  box-shadow: var(--shadow, 0 8px 30px rgba(42, 156, 171, 0.08)) !important;
  display: flex !important;
  flex-direction: column !important;
  transition: var(--transition, 0.3s) !important;
}

.testimonial-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--shadow-lg, 0 12px 40px rgba(42, 156, 171, 0.12)) !important;
  border-color: var(--color-primary, #3ec1d3) !important;
}

.testimonial-card__header {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  margin-bottom: 20px !important;
  border-bottom: 1px dashed rgba(42, 156, 171, 0.12) !important;
  padding-bottom: 16px !important;
}

.testimonial-card__avatar {
  width: 50px !important;
  height: 50px !important;
  border-radius: 50% !important;
  background-color: var(--color-secondary, #2a9cab) !important;
  color: #ffffff !important;
  font-weight: 900 !important;
  font-size: 1.35rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.testimonial-card__who {
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: var(--color-secondary, #2a9cab) !important;
  display: block !important;
}

.testimonial-card__attr {
  font-size: 0.75rem !important;
  color: var(--color-text-muted, #445d63) !important;
  display: block !important;
  margin-top: 4px !important;
}

.testimonial-card__quote {
  font-size: 0.875rem !important;
  color: var(--color-text-main, #333333) !important;
  line-height: 1.8 !important;
  margin: 0 !important;
}

@media (max-width: 1024px) {
  .testimonials-grid {
    grid-template-columns: 1fr !important;
    max-width: 480px !important;
    margin-inline: auto !important;
    gap: 24px !important;
  }
}

/* ==========================================================================
   9. RESPONSIVE DATA TABLE（スマホでの表示崩れ・文字潰れを100%解決）
   ========================================================================== */
@media (max-width: 768px) {
  /* ① 2列のキー・バリュー型テーブルをスマホで綺麗な縦並びの「カード形式」に自動変形 */
  .data-table:not(.table-scrollable) {
    display: block !important;
    width: 100% !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  .data-table:not(.table-scrollable) thead {
    display: none !important; /* 横並びヘッダーを非表示化 */
  }

  .data-table:not(.table-scrollable) tbody,
  .data-table:not(.table-scrollable) tr {
    display: block !important;
    width: 100% !important;
  }

  .data-table:not(.table-scrollable) tr {
    margin-bottom: 18px !important;
    border: 1px solid rgba(42, 156, 171, 0.15) !important;
    border-radius: var(--radius-sm, 8px) !important;
    overflow: hidden !important;
    background-color: #ffffff !important;
    box-shadow: var(--shadow, 0 4px 10px rgba(0,0,0,0.04)) !important;
  }

  .data-table:not(.table-scrollable) th,
  .data-table:not(.table-scrollable) td {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    box-sizing: border-box !important;
  }

  .data-table:not(.table-scrollable) th {
    background-color: var(--color-bg-cool, #f0fbfc) !important;
    color: var(--color-secondary, #2a9cab) !important;
    font-weight: 700 !important;
    padding: 12px 18px !important;
    border-bottom: 1px dashed rgba(42, 156, 171, 0.12) !important;
  }

  .data-table:not(.table-scrollable) td {
    padding: 14px 18px !important;
    border: none !important;
    background-color: #ffffff !important;
    line-height: 1.6 !important;
  }

  /* ② 3列以上の多列料金テーブル用の親コンテナ（横スワイプ＆ヒントバッジ） */
  .table-responsive-container {
    position: relative !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border: 1px solid rgba(42, 156, 171, 0.15) !important;
    border-radius: 8px !important;
    margin-bottom: 24px !important;
    background-color: #ffffff !important;
  }

  .table-responsive-container::after {
    content: '👉 スワイプでスクロール' !important;
    position: absolute !important;
    right: 12px !important;
    bottom: 6px !important;
    background-color: rgba(42, 156, 171, 0.85) !important;
    color: #ffffff !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    padding: 3px 10px !important;
    border-radius: 99px !important;
    pointer-events: none !important;
    opacity: 0.8 !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15) !important;
    animation: pulseSwipeHint 2s infinite !important;
    z-index: 10 !important;
  }
}

/* スワイプヒントが優しく点滅するアニメーション */
@keyframes pulseSwipeHint {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 0.95; transform: scale(1.02); }
}

/* ==========================================================================
   10. CONVERSION DYNAMIC CTA (2-STAGE TABS)
   ========================================================================== */
.section--cta {
  background-color: var(--color-secondary);
  color: #fff;
  padding: 80px 0;
}

.cta-container {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.cta-header-title {
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  font-weight: 700;
  margin-bottom: 12px;
}

.cta-header-desc {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 40px;
}

.cta-tabs {
  display: flex;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.15);
  border-radius: var(--radius);
  padding: 6px;
  max-width: 480px;
  margin: 0 auto 36px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.cta-tab-btn {
  flex: 1;
  border: none;
  background: none;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.9375rem;
  font-weight: 700;
  padding: 12px;
  border-radius: calc(var(--radius) - 6px);
  cursor: pointer;
  transition: var(--transition);
}

.cta-tab-btn.is-active {
  background-color: #fff;
  color: var(--color-secondary);
  box-shadow: var(--shadow);
}

.cta-content-panel {
  display: none;
  animation: fadeIn 0.4s ease forwards;
}

.cta-content-panel.is-active {
  display: block;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* CF7 Form styling integration */
.contact-form {
  background-color: #fff;
  border-radius: var(--radius);
  padding: 40px;
  color: var(--color-text-main);
  text-align: left;
  box-shadow: var(--shadow-lg);
}

.contact-form__row {
  margin-bottom: 20px;
}

.contact-form__label {
  display: block;
  font-weight: 700;
  margin-bottom: 8px;
  font-size: 0.9375rem;
  color: var(--color-secondary);
}

.contact-form__label .required {
  color: var(--color-cta-main);
  font-size: 0.75rem;
  margin-left: 6px;
}

.contact-form__input {
  width: 100%;
  height: 48px;
  padding: 12px 16px;
  font-family: var(--font-base);
  font-size: 0.9375rem;
  border: 2px solid rgba(42, 156, 171, 0.15);
  border-radius: var(--radius-sm);
  background-color: var(--color-bg-cool);
  transition: var(--transition);
  color: var(--color-text-main);
}

.contact-form__input:focus {
  outline: none;
  border-color: var(--color-cta-main);
  background-color: #fff;
}

.contact-form__row--radio {
  display: flex;
  gap: 16px 24px;
  flex-wrap: wrap;
  padding: 6px 0;
}

.contact-form__radio-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  font-size: 0.9375rem;
  cursor: pointer;
}

.contact-form__radio-label input {
  accent-color: var(--color-cta-main);
  width: 18px;
  height: 18px;
}

.contact-form__submit {
  width: 100%;
  min-height: 54px;
}

.cta-subtext {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.85);
  margin-top: 16px;
  display: block;
  font-weight: 500;
}

.cta-phone-section {
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.cta-phone-lbl {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 6px;
}

.cta-phone-num {
  font-size: 1.75rem;
  font-weight: 900;
  color: var(--color-num-base);
}

/* ==========================================================================
   11. FOOTER
   ========================================================================== */
.site-footer {
  background-color: #445d63;
  color: rgba(255, 255, 255, 0.85);
  padding: 64px 0 24px;
}

.site-footer a {
  color: rgba(255, 255, 255, 0.85);
}

.site-footer a:hover {
  color: #fff;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 48px;
  margin-bottom: 40px;
}

.site-footer__company-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.site-footer__logo {
  font-size: 1.5rem;
  font-weight: 900;
  color: #fff;
}

.site-footer__logo span {
  font-size: 0.75rem;
  display: block;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
}

.site-footer__address,
.site-footer__hours {
  font-size: 0.875rem;
  line-height: 1.6;
}

.site-footer__nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.site-footer__nav-title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 16px;
}

.site-footer__nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer__nav li {
  margin-bottom: 6px;
}

.site-footer__nav a {
  font-size: 0.875rem;
}

.site-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 24px;
  text-align: center;
}

.site-footer__copy {
  font-size: 0.8125rem;
  margin-bottom: 6px;
}

.site-footer__tagline {
  font-size: 0.75rem;
  opacity: 0.65;
}

/* ==========================================================================
   12. RESPONSIVE MEDIA QUERIES
   ========================================================================== */
@media (max-width: 1024px) {
  .metrics-grid {
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 440px !important;
    margin: 0 auto !important;
    justify-content: center !important;
    justify-items: center !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
  }
  .metric-card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
  }
  .services-portal {
    grid-template-columns: repeat(2, 1fr);
  }
  .testimonials-grid {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin-inline: auto;
  }
}

@media (max-width: 900px) {
  .site-footer__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .site-footer__nav {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  :root {
    --header-height: 60px !important; /* スマホではヘッダーの高さをスリムな60pxに最適化 */
  }

  body {
    padding-top: var(--header-height, 60px) !important; /* スマホ用の固定ヘッダー余白 */
    padding-bottom: 74px; /* Fixed Bottom Bar Offset */
  }

  html body.admin-bar {
    margin-top: 0 !important; /* 重複マージンを完全に排除 */
    padding-top: var(--header-height, 60px) !important; /* 管理バーがある場合もヘッダー高さ分確保 */
  }

  .site-nav__toggle {
    display: flex;
  }

  .site-nav__list {
    display: none;
    position: absolute;
    top: var(--header-height, 80px);
    left: 0;
    right: 0;
    flex-direction: column;
    background-color: var(--color-secondary);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: var(--shadow-lg);
    padding: 16px;
    gap: 4px;
    list-style: none;
    z-index: 99999;
  }

  .site-nav__list.is-open {
    display: flex;
  }

  .site-nav__list li {
    width: 100%;
  }

  /* モバイル用：親メニューの相対配置 */
  .site-nav__list li.menu-item-has-children {
    position: relative !important;
  }

  /* モバイル用開閉矢印の初期状態 & トランジション */
  .submenu-indicator {
    display: inline-block !important;
    transition: transform 0.3s ease !important;
    margin-left: 6px !important;
    font-size: 0.95rem !important;
    vertical-align: middle !important;
  }

  .site-nav__list li a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important; /* スマホではタイトルと矢印を綺麗に端に寄せる */
    width: 100%;
    padding: 14px 20px;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 700;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    box-sizing: border-box;
    border-radius: 0; /* モバイルドロワー内では角丸をリセット */
  }

  .site-nav__list li a:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
  }

  /* モバイルでの子メニューの初期非表示スタイル */
  .site-nav__list .sub-menu {
    display: none !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    background-color: rgba(255, 255, 255, 0.05) !important; /* 親メニューよりわずかに異なる背景で階層感を演出 */
    border-radius: 0 !important;
  }

  /* モバイルでの子メニュー展開時 */
  .site-nav__list .sub-menu.is-active {
    display: block !important;
    animation: slideFadeDown 0.3s ease-out forwards !important;
  }

  /* 子メニューリンクのスタイル */
  .site-nav__list .sub-menu li a {
    padding: 12px 20px 12px 36px !important; /* 左インデントを36pxにして階層構造を明確にする */
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    color: rgba(255, 255, 255, 0.9) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    display: block !important; /* 子メニュー内は通常のブロック配置 */
  }

  .site-nav__list .sub-menu li a:hover {
    background-color: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
  }

  /* アコーディオン展開時のアニメーション */
  @keyframes slideFadeDown {
    from {
      opacity: 0;
      transform: translateY(-8px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .site-header__phone { display: none !important; }
  .site-header__cta { display: none !important; }
  .mobile-cv-bar { display: flex !important; }

  /* ==========================================================================
     スマホ表示でのヘッダー内要素の美しいバランス・両端配置（2連ボタン移動に伴う最適化）
     ========================================================================== */
  /* 1. 2連ボタンがフッターに移動したため、ロゴとメニューボタンのみを左右両端に美しくバランスよく配置 */
  .site-header__inner {
    padding: 0 16px !important;
    gap: 8px !important;
    justify-content: space-between !important;
    align-items: center !important;
  }

  /* 2. 要素の並び順（order）の指定 */
  .site-header__logo-wrapper {
    order: 1 !important;
  }
  
  .site-header__cv {
    display: none !important;
  }
  
  .site-nav {
    order: 2 !important;
    flex: none !important;
    justify-content: flex-end !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
  }

  /* 3. スマホでのロゴマークとテキストの美しい中サイズ復元 */
  .site-header__logo-mark-wrapper {
    width: 42px !important;
    height: 42px !important;
    padding: 6px !important;
  }
  .site-header__logo-mark-wrapper img {
    width: 26px !important;
    height: 26px !important;
  }
  .site-header__logo-main {
    font-size: 1.2rem !important;
  }
  .site-header__logo-sub {
    font-size: 0.7rem !important;
  }

  /* 会社案内：スマホ用目次ナビゲーションの3列2段ダッシュボード化 */
  .company-jump-nav {
    padding: 10px !important;
    margin: 12px auto 24px !important;
  }
  .company-jump-nav ul {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }
  .company-jump-nav ul li {
    text-align: center !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .company-jump-nav ul li a {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    font-size: 0.72rem !important;
    padding: 8px 4px !important;
    background-color: #ffffff !important;
    border-radius: 8px !important;
    border: 1px solid rgba(42, 156, 171, 0.1) !important;
    box-shadow: 0 2px 6px rgba(42, 156, 171, 0.04) !important;
    box-sizing: border-box !important;
  }
  .company-jump-nav ul li a i {
    font-size: 1.15rem !important;
    color: var(--color-primary) !important;
  }

  /* 4. メニューボタン（三本線トグル）が縦方向で完全に中央揃えになるように調整 */
  .site-nav__toggle {
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    width: 30px !important;
    height: 20px !important;
    padding: 0 !important;
  }

  /* ==========================================================================
     スマホ表示でのメインスライダー（Swiper）の超最適化（見切れ防止・iPhone SE対応）
     ========================================================================== */
  /* スライダー全体の高さを、中のコンテンツが完璧に収まるように微増（535px） */
  .hero-swiper {
    height: 535px !important;
  }

  /* スマホでの各スライド上端の位置と整列ルール（底辺に固定CTA用のセーフバッファを80px確保、中のコンテナを100%に引き伸ばすためstretchに変更） */
  .hero-slide .container {
    display: flex !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    padding-top: 15px !important;
    padding-bottom: 80px !important;
    box-sizing: border-box !important;
    height: 100% !important;
  }

  /* コンテナの横パディングを極小化し、フレックスコンテナとして縦に100%広げる（ボタン位置を底辺に揃える基盤） */
  .slide-content-container {
    padding: 0 16px !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* スライドのバッジ（オレンジ丸）の極小化・余白詰め */
  .slide-badge {
    padding: 4px 10px !important;
    font-size: 0.7rem !important;
    margin-bottom: 8px !important;
  }

  /* スライドタイトル（大文字）を小さく、アスペクト比を維持し見切れを防止（強制的にブロック要素にしてflex崩れを防ぐ） */
  .slide-title {
    display: block !important;
    font-size: clamp(1.0rem, 4.3vw, 1.22rem) !important;
    line-height: 1.4 !important;
    min-height: auto !important;
    margin-bottom: 6px !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45) !important;
  }
  .slide-title span {
    display: inline !important;
  }

  /* スマホでの定着率100%吹き出しをコンパクトにし、タイトルエリアの高さ肥大化を防ぐ */
  .slide-title-badge-100 {
    font-size: 0.7rem !important;
    padding: 3px 8px !important;
    margin-top: 4px !important;
    box-shadow: 0 2px 6px rgba(232,115,90,0.25) !important;
  }
  .slide-title-badge-100-num {
    font-size: 1.15em !important;
  }

  /* スライド説明文（リード文）と特徴リストの最小高さを「115px」に統一し、ボタン位置を完璧に揃える */
  .slide-lead,
  .slide-features-stepup {
    font-size: 0.8rem !important;
    line-height: 1.5 !important;
    min-height: 115px !important;
    margin-bottom: 12px !important;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5) !important;
  }

  .slide-lead {
    white-space: normal !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
  }

  /* 特徴リスト（4項目）のスマホ用縦幅・余白引き締め（省スペース化） */
  .slide-features-stepup {
    gap: 4px !important;
  }
  .slide-features-stepup .slide-feature-item {
    gap: 8px !important;
  }
  .slide-features-stepup .slide-feature-item span:first-child {
    padding: 2px 10px !important;
    font-size: 0.75rem !important;
    min-width: 80px !important;
    text-align: center;
  }
  .slide-features-stepup .slide-feature-item span:last-child {
    font-size: 0.8rem !important;
  }

  /* ボタンエリア（スマホ用）：margin-top: auto により、タイトルの行数やテキスト量に関わらず、すべてのスライドでボタンの位置（高さ）をピタッと完璧に揃えます */
  .slide-actions {
    margin-top: auto !important;
    gap: 8px !important;
    justify-content: flex-end !important;
  }
  .slide-actions .btn {
    min-height: 38px !important;
    height: 38px !important;
    padding: 8px 16px !important;
    font-size: 0.8rem !important;
    border-radius: 8px !important;
  }

  .swiper-button-prev,
  .swiper-button-next {
    display: none !important;
  }

  .message-bar__grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px 6px !important;
    justify-content: center !important;
    justify-items: center !important;
    padding-left: 0 !important;
    margin: 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    list-style: none !important;
  }

  .message-bar__item {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: clamp(0.72rem, 3.1vw, 0.875rem) !important;
    white-space: nowrap !important;
    letter-spacing: -0.02em !important;
    gap: 4px !important;
    width: 100% !important;
  }

  .message-bar__item i {
    font-size: clamp(0.95rem, 3.5vw, 1.25rem) !important;
    flex-shrink: 0 !important;
  }

  .message-bar__item strong {
    font-size: clamp(0.78rem, 3.3vw, 0.95rem) !important;
    margin-left: 1px !important;
  }

  /* 依頼：スマホ表示（768px以下）の時のセクションや見出し周りの余白（スペース）を縮小し、スクロールしやすく調整 */
  .section:not(.hero-slider-section) {
    padding: 32px 0 !important; /* PC: 96px -> スマホ: 32px (無駄なスクロールを大幅に削減、スライダーは除外) */
  }

  .hero-slider-section {
    padding: 0 !important; /* スライダーはヘッダー下にぴったり密着させて白い隙間を排除 */
  }

  .section-header {
    margin-bottom: 20px !important; /* PC: 56px -> スマホ: 20px (見出しと中身の隙間を最適化) */
  }

  /* 依頼：特定の長文テキストをスマホ（768px以下）で絶対に不自然に折り返さないための調整 */
  .section-title {
    font-size: clamp(1.2rem, 5.2vw, 1.75rem) !important;
    white-space: nowrap !important;
    letter-spacing: -0.02em !important;
    max-width: 100% !important;
    text-align: center !important;
    display: block !important;
    margin-inline: auto !important;
    margin-bottom: 8px !important; /* PC: 16px -> スマホ: 8px */
  }

  /* 「数字で見る実績」セクション（.section--metrics）は特にメッセージバーとの連続性があるため、上部余白をさらに狭く調整 */
  .section--metrics {
    padding-top: 24px !important;
    padding-bottom: 28px !important;
  }

  .cta-header-title {
    font-size: clamp(1.2rem, 5.2vw, 2.25rem) !important;
    white-space: nowrap !important;
    letter-spacing: -0.02em !important;
    max-width: 100% !important;
    text-align: center !important;
  }

  .cta-subtext {
    font-size: clamp(0.68rem, 3.2vw, 0.8125rem) !important;
    white-space: nowrap !important;
    letter-spacing: -0.03em !important;
    display: block !important;
    text-align: center !important;
    max-width: 100% !important;
  }

  .cta-phone-lbl {
    font-size: clamp(0.68rem, 3.2vw, 0.875rem) !important;
    white-space: nowrap !important;
    letter-spacing: -0.03em !important;
    display: block !important;
    text-align: center !important;
    max-width: 100% !important;
  }

  .services-portal {
    grid-template-columns: 1fr;
  }

  /* 依頼：ボタン内テキストの折り返し防止と、スマホ画面での幅ハズレ防止のための自動サイズ縮小・パディング最適化 */
  .btn {
    white-space: nowrap !important;
    letter-spacing: -0.01em !important;
  }
  
  .btn--large {
    min-height: 46px !important;
    padding: 10px 20px !important; /* 左右と上下のパディングを詰めてボタン幅が画面からはみ出さないようにする */
    font-size: clamp(0.85rem, 3.5vw, 1rem) !important; /* 文字を自動スケーリング */
    border-radius: var(--radius-sm) !important;
  }

  /* ==========================================================================
     全ページ共通：スマホ（768px以下）でのレスポンシブ徹底最適化
     ========================================================================== */

  /* 1. PC専用改行（<br>）の無効化（スマホでの不自然な改行を防止） */
  .br-pc-only {
    display: none !important;
  }

  /* 1.5 スマホ専用改行（スマホ表示時に有効化） */
  .br-sp-only {
    display: inline !important;
  }

  /* 1.6 固定ページ：ヘッダー直下の余計な余白（パンくず、ページヘッダー）を大幅削減 */
  main.site-main,
  #main-content,
  .site-main {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  main.site-main > .container:first-of-type,
  main.site-main > div.container:first-child,
  .site-main > .container {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  .breadcrumbs {
    /* インライン margin の排除に伴い、ヘッダー下端からわずか 4px の位置にぴったり配置 */
    margin-top: 0 !important; 
    padding-top: 4px !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }
  .breadcrumbs__list {
    margin: 0 !important;
    padding: 0 !important;
  }
  .page-header {
    padding-top: 6px !important; /* パンくずと見出しの間の間延びを完全に解消 */
    padding-bottom: 12px !important;
    margin-top: 0 !important;
  }

  /* 2. 一般的な2列データテーブル（会社概要、店舗概要、募集要項など）のスマホ縦積みカード・リスト化（詳細度を極限まで高めて確実に上書き） */
  .table-responsive-container {
    overflow-x: visible !important;
  }

  .recruit-requirements table.data-table,
  main.site-main table.data-table,
  main.site-main table.gutscat-info-table,
  main.site-main table.oluolu-info-table,
  main.site-main table.ganga-info-table,
  .recruit-requirements table.data-table tbody,
  .recruit-requirements table.data-table tr,
  .recruit-requirements table.data-table th,
  .recruit-requirements table.data-table td,
  main.site-main table.data-table tbody,
  main.site-main table.data-table tr,
  main.site-main table.data-table th,
  main.site-main table.data-table td,
  main.site-main table.gutscat-info-table tbody,
  main.site-main table.gutscat-info-table tr,
  main.site-main table.gutscat-info-table th,
  main.site-main table.gutscat-info-table td,
  main.site-main table.oluolu-info-table tbody,
  main.site-main table.oluolu-info-table tr,
  main.site-main table.oluolu-info-table th,
  main.site-main table.oluolu-info-table td,
  main.site-main table.ganga-info-table tbody,
  main.site-main table.ganga-info-table tr,
  main.site-main table.ganga-info-table th,
  main.site-main table.ganga-info-table td {
    display: block !important;
    width: 100% !important;
    min-width: auto !important; /* 横スクロール制限を解除 */
    box-sizing: border-box !important;
  }

  main.site-main table.data-table thead {
    display: none !important; /* スマホでは料金表などのヘッダー行を非表示にして縦積み化 */
  }

  .recruit-requirements table.data-table tr,
  main.site-main table.data-table tr,
  main.site-main table.gutscat-info-table tr,
  main.site-main table.oluolu-info-table tr,
  main.site-main table.ganga-info-table tr {
    border-bottom: 1px solid rgba(42, 156, 171, 0.15) !important;
    padding: 6px 10px !important; /* trのパディングを半減（文字上下をタイトに） */
    background: #ffffff !important; /* カード背景色をクリーンな白に */
    border-radius: 8px !important;
    margin-bottom: 6px !important; /* 10px から削減 */
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.03) !important; /* ソフトな高級シャドウ */
  }

  .recruit-requirements table.data-table tr:last-child,
  main.site-main table.data-table tr:last-child,
  main.site-main table.gutscat-info-table tr:last-child,
  main.site-main table.oluolu-info-table tr:last-child,
  main.site-main table.ganga-info-table tr:last-child {
    border-bottom: none !important;
    margin-bottom: 0 !important;
  }

  .recruit-requirements table.data-table th,
  .recruit-requirements table.data-table td,
  main.site-main table.data-table th,
  main.site-main table.data-table td,
  main.site-main table.gutscat-info-table th,
  main.site-main table.gutscat-info-table td,
  main.site-main table.oluolu-info-table th,
  main.site-main table.oluolu-info-table td,
  main.site-main table.ganga-info-table th,
  main.site-main table.ganga-info-table td {
    padding: 0 !important; /* インラインパディングを強力リセット */
    text-align: left !important;
    border: none !important;
  }

  .recruit-requirements table.data-table th,
  main.site-main table.data-table th,
  main.site-main table.gutscat-info-table th,
  main.site-main table.oluolu-info-table th,
  main.site-main table.ganga-info-table th {
    background-color: var(--color-secondary) !important; /* 項目名をしっかり目立たせるダークシアン背景 */
    color: #ffffff !important; /* 白文字にして視認性・コントラストを極限まで向上 */
    font-size: 0.8125rem !important; /* スマホで見やすい上品なサイズに若干拡大 */
    font-weight: 800 !important;
    padding: 4px 10px !important; /* 角丸バッジとして左右に少し幅を持たせて整列 */
    margin-bottom: 6px !important; /* 本文との間に美しいマージンを確保 */
    border-radius: 4px !important;
    border-bottom: none !important;
    display: inline-block !important; /* 文字幅にフィットするお洒落なバッジ形状 */
    width: auto !important;
    letter-spacing: 0.03em !important;
    white-space: nowrap !important; /* スマホの角丸バッジ内で不自然に折り返されるのを絶対に防止 */
  }

  .recruit-requirements table.data-table td,
  main.site-main table.data-table td,
  main.site-main table.gutscat-info-table td,
  main.site-main table.oluolu-info-table td,
  main.site-main table.ganga-info-table td {
    display: block !important; /* バッジの下に回り込んで綺麗に収まるブロック配置 */
    font-size: 0.9rem !important; /* 0.88remから少し拡大し、読みやすさを劇的にアップ */
    color: #1e293b !important; /* 単調なダークシアンから、極めて可読性の高いダークグレー（#1e293b）に変更 */
    line-height: 1.6 !important; /* ゆとりある行高で行の折り返しをスマートにし、変な折り返しを防ぐ */
    padding: 4px 6px 8px !important; /* 次の行への適度なパディングを確保してすっきり整列 */
    margin: 0 !important;
  }


  /* 3. 4プラン比較表のスマホ最適化（プラン別カード形式） */
  .compare-table-container {
    display: none !important;
  }
  .sp-compare-container {
    display: block !important;
    width: 100% !important;
    margin-top: 16px !important;
  }
  .sp-compare-card {
    background: #ffffff !important;
    border: 1px solid rgba(42, 156, 171, 0.15) !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
    margin-bottom: 16px !important;
    overflow: hidden !important;
    text-align: left !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  }
  .sp-compare-card-header {
    background: linear-gradient(135deg, var(--color-secondary), #1e293b) !important;
    padding: 12px 16px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    border-bottom: 2px solid var(--color-primary) !important;
  }
  
  /* 各プラン別のヘッダー色（プレミアムなアクセント） */
  .card-plan-01 .sp-compare-card-header {
    background: linear-gradient(135deg, #e8735a, #c5533d) !important;
    border-bottom: 2px solid #fecdd3 !important;
  }
  .card-plan-02 .sp-compare-card-header {
    background: linear-gradient(135deg, #3ec1d3, #258c9b) !important;
    border-bottom: 2px solid #cffafe !important;
  }
  .card-plan-03 .sp-compare-card-header {
    background: linear-gradient(135deg, var(--color-primary), #2a8a9a) !important;
    border-bottom: 2px solid #e0f2fe !important;
  }
  .card-plan-04 .sp-compare-card-header {
    background: linear-gradient(135deg, #475569, #1e293b) !important;
    border-bottom: 2px solid #e2e8f0 !important;
  }

  .sp-compare-card-badge {
    font-size: 0.65rem !important;
    font-weight: 900 !important;
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.2) !important;
    padding: 2px 6px !important;
    border-radius: 20px !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
  }
  .sp-compare-card-header h3 {
    margin: 0 !important;
    font-size: 1rem !important;
    font-weight: 900 !important;
    color: #ffffff !important;
    letter-spacing: 0.03em !important;
  }
  .sp-compare-card-body {
    padding: 4px 0 0 0 !important;
  }
  .sp-compare-row {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
    padding: 10px 16px !important;
  }
  .sp-compare-row:last-child {
    border-bottom: none !important;
  }
  .sp-compare-label {
    font-size: 0.75rem !important;
    font-weight: 900 !important;
    color: var(--color-secondary) !important;
    margin-bottom: 4px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }
  .sp-compare-label::before {
    content: "" !important;
    display: inline-block !important;
    width: 6px !important;
    height: 6px !important;
    background-color: var(--color-primary) !important;
    border-radius: 50% !important;
  }
  .card-plan-01 .sp-compare-label::before { background-color: #e8735a !important; }
  .card-plan-02 .sp-compare-label::before { background-color: #3ec1d3 !important; }
  .card-plan-03 .sp-compare-label::before { background-color: var(--color-primary) !important; }
  .card-plan-04 .sp-compare-label::before { background-color: #475569 !important; }

  .sp-compare-val {
    font-size: 0.85rem !important;
    color: #334155 !important;
    line-height: 1.5 !important;
    font-weight: 500 !important;
  }
  .sp-allowance-box {
    background-color: rgba(232, 115, 90, 0.04) !important;
    border: 1px dashed rgba(232, 115, 90, 0.3) !important;
    border-radius: 8px !important;
    padding: 10px 12px !important;
    margin-top: 4px !important;
  }
  .sp-allowance-box.no-allowance {
    background-color: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    padding: 6px 10px !important;
    display: inline-block !important;
  }
  .sp-allowance-badge {
    background-color: var(--color-cta-main) !important;
    color: #ffffff !important;
    font-size: 0.72rem !important;
    font-weight: 900 !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
    display: inline-block !important;
    margin-right: 6px !important;
    vertical-align: middle !important;
  }
  .sp-allowance-badge.no-allowance {
    background-color: #94a3b8 !important;
    margin-right: 0 !important;
  }
  .sp-allowance-highlight {
    color: var(--color-cta-main) !important;
    font-weight: 900 !important;
    font-size: 0.8rem !important;
    display: inline-block !important;
    vertical-align: middle !important;
  }
  .sp-allowance-desc {
    margin: 4px 0 0 0 !important;
    font-size: 0.75rem !important;
    color: #475569 !important;
    line-height: 1.4 !important;
  }

  /* 4. 画像とテキストの2カラム・多カラムの一括縦並び化（gap: 16px に引き締めて縦マージン激減） */
  .responsive-grid-2col {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .responsive-flex-2col {
    flex-direction: column !important;
    gap: 16px !important;
  }
  .responsive-grid-2col > div,
  .responsive-flex-2col > div {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 5. 固有グリッドのスマホ表示縦積み化 */
  .selfcheck-grid,
  .process-cards-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* 6. 全固定ページのスマホ表示余白・フォントサイズ徹底スリム化（womens-empowerment 準拠） */
  
  /* ページヘッダー (SERVICE & SUPPORT, ABOUT US 等) の上下無駄な空白を縮小 */
  header.page-header,
  div.page-header {
    padding: 16px 0 8px !important;
  }
  header.page-header h1.page-header__title,
  div.page-header h1.page-header__title,
  .page-header h1 {
    font-size: 1.25rem !important; /* スマホに適した大きさに縮小 (womens-empowerment 基準: 20px) */
    margin-top: 2px !important;
    margin-bottom: 0 !important;
    line-height: 1.3 !important;
    letter-spacing: -0.01em !important;
  }
  header.page-header span,
  div.page-header span,
  .page-header span {
    font-size: 0.7rem !important;
    letter-spacing: 0.05em !important;
    display: inline-block !important;
    margin-bottom: 1px !important;
  }

  /* 主要固定ページ・各セクションの上下余白（インライン padding）を一律極限スリム化（上余白を広げてセクションの区切りを明示） */
  main.site-main section[style*="padding"],
  main.site-main div[style*="padding"],
  .results-section,
  .company-section,
  .guide-section,
  .job-section,
  #part-empathy,
  #part-comparison {
    padding-top: 20px !important; /* 見出しの上が詰まりすぎて境界がボケるのを防ぐため、上部余白をしっかり確保（20px -> 38px） */
    padding-bottom: 22px !important;
  }

  /* セクション間のマージン（インライン margin）を詰めて間延び防止 */
  main.site-main section[style*="margin"],
  #part-empathy {
    margin-top: 8px !important;
    margin-bottom: 8px !important;
  }

  /* セクション見出し (h2) のフォントサイズ、上下文字間（行間）、下部余白の引き締め（上部を少しあけて区切りを明示） */
  main.site-main h2[style*="font-size"],
  .results-section h2,
  .company-section h2,
  .guide-section h2,
  .job-section h2,
  .section-title {
    font-size: 1.25rem !important; /* スマホ用スマートサイズを1.25remに調整 */
    line-height: 1.3 !important; /* 上下の文字間をさらに引き締める */
    margin-top: 12px !important; /* 上マージンを 4px から 12px へ引き上げ、前のセクション要素と確実に区切る */
    margin-bottom: 10px !important;
    letter-spacing: -0.01em !important;
  }

  /* 『支援サービス (page-service.php)』専用のレスポンシブ微調整 */
  
  /* お悩み共感 (COMPASSION) セクション全体の上の余白をさらに狭く調整 */
  #part-empathy {
    margin-top: 0 !important;
    padding-top: 8px !important;
  }
  
  /* お悩み共感 (COMPASSION) セクション見出し周り */
  #part-empathy h2 {
    font-size: 1.25rem !important;
    line-height: 1.3 !important;
    margin-top: 2px !important;
    margin-bottom: 0 !important;
  }
  
  /* お悩みカード全体の親要素の上の余白を縮小 */
  #part-empathy div[style*="margin: 32px"],
  #part-empathy div[style*="margin-top: 32px"] {
    margin-top: 8px !important;
  }
  
  /* お悩みカード自体のインナースタイルパディングをスリム化 */
  #part-empathy div[style*="padding: 36px"] {
    padding: 16px !important;
  }
  
  /* お悩みリスト項目間の隙間を詰め、文字サイズを0.85remにしてスリム化 */
  #part-empathy ul {
    gap: 8px !important;
  }
  #part-empathy li {
    font-size: 0.85rem !important;
  }

  /* お悩みエリア下部説明文の上下マージン、文字サイズをスリム化 */
  #part-empathy div[style*="margin-top: 36px"] {
    margin-top: 12px !important;
  }
  #part-empathy div[style*="margin-top: 36px"] p {
    font-size: 0.8rem !important;
    line-height: 1.4 !important;
    text-align: left !important; /* スマホでは中央寄せを解除し、左寄せで読みやすく */
  }

  /* 4つの支援プラン比較、各ステップブロック */
  .service-step-block {
    margin-bottom: 24px !important; /* PC: 72px -> スマホ: 24px */
  }
  .service-step-header {
    padding: 12px 16px !important; /* PC: 40px 48px -> スマホ: 12px 16px */
  }
  .service-step-body {
    padding: 16px 14px !important; /* PC: 48px -> スマホ: 16px 14px */
  }

  /* ==========================================================================
     【NEW】お問い合わせ・見学予約フォーム（page-contact.php）のスマホ極限引き締め
     ========================================================================== */
  .section--contact-form-page {
    padding: 8px 0 32px !important; /* スマホ下部余白を 80px -> 32px にスリム化 */
  }

  /* 重要なお知らせ警告枠の引き締め */
  .contact-warning-box {
    padding: 12px !important;
    margin: 0 auto 16px !important;
    border-radius: 8px !important;
  }
  .contact-warning-box h4 {
    font-size: 0.9rem !important;
    margin-bottom: 6px !important;
    margin-top: 0 !important;
  }
  .contact-warning-box p {
    font-size: 0.78rem !important;
    line-height: 1.5 !important;
  }

  /* お問い合わせフォーム白色カードのパディング極小化 ➔ 横幅を赤い警告枠に揃える */
  .contact-form {
    padding: 10px !important; /* 検証画像の表示に100%合わせて、スマートフォン表示のパディングを 10px に縮小 */
    border-radius: 12px !important;
    box-shadow: 0 4px 20px rgba(42, 156, 171, 0.08) !important;
  }

  /* 各入力行の上下余白圧縮 */
  .contact-form__row {
    margin-bottom: 12px !important; /* 20px〜24px から 12px に圧縮 */
  }

  /* 各項目見出しラベルと枠の隙間を圧縮 */
  .contact-form__label {
    margin-bottom: 4px !important; /* 8px〜10px から 4px に密着 */
    font-size: 0.85rem !important; /* 0.9375rem から 0.85rem にスマート化 */
  }

  /* ラジオボタン選択肢を囲む薄青枠の内側パディング超圧縮 ➔ 横幅の拡大 */
  .contact-form__row--radio {
    padding: 8px 10px !important; /* 16px から 8px 10px にスリム化、内側の無駄なデッドスペースを消去 */
    gap: 6px 10px !important; /* ラジオボタン同士の gap を 12px 20px から 6px 10px へ極限圧縮 */
    border-radius: 6px !important;
  }

  /* ラジオボタン内の文字、チェックボックスラベルの行間（上下スペース）の圧縮 */
  .contact-form__radio-label {
    font-size: 0.8rem !important; /* 0.875rem から 0.8rem に縮小 */
    line-height: 1.25 !important; /* 文字同士の上下間隔（行間）を極限まで狭く引き締め */
    gap: 4px !important; /* ラジオボタン丸とテキストの距離を 8px から 4px へ密着 */
  }

  /* ラジオボタン丸およびチェックボックスの極小化 */
  .contact-form__radio-label input[type="radio"],
  .contact-form__radio-label input[type="checkbox"] {
    width: 15px !important; /* 18px から 15px へスマートに縮小 */
    height: 15px !important;
    margin-top: 1px !important;
  }

  /* 1行入力枠（お名前、メール、電話番号）の超スリム化 */
  .contact-form__input {
    height: 38px !important; /* 48px から 38px へスマートに圧縮 */
    padding: 6px 12px !important; /* 12px 16px から 6px 12px に詰め、無駄な上下空白を消滅 */
    font-size: 0.85rem !important;
    border-radius: 6px !important;
  }

  /* テキストエリア（メッセージ本文）の高さスリム化 */
  textarea.contact-form__input {
    height: 100px !important; /* 160px から 100px へ縮小 */
    padding: 8px 12px !important;
  }

  /* プライバシーポリシー同意枠のスマート化 */
  .contact-form__row[style*="margin-bottom: 28px"] {
    margin-bottom: 14px !important;
    padding: 10px !important;
    border-radius: 6px !important;
  }
  #js-policy-agreement-page + span {
    font-size: 0.78rem !important;
    line-height: 1.4 !important;
  }
  #js-policy-agreement-page + span small {
    margin-top: 2px !important;
  }

  /* 送信ボタンの高さスマート化 */
  .contact-form__submit {
    min-height: 44px !important; /* 56px から 44px に圧縮 */
    font-size: 0.9rem !important; /* 1.05rem から 0.9rem へ */
    border-radius: 6px !important;
  }

  /* 下部お電話直通エリアのスマート・コンパクト化 */
  .section--contact-direct {
    padding: 0 0 32px !important; /* 下部余白を 80px -> 32px */
  }
  .section--contact-direct > div[style*="padding: 40px"] {
    padding: 16px !important; /* 40px -> 16px に縮小 */
    border-radius: 12px !important;
  }
  .section--contact-direct p {
    font-size: 0.78rem !important;
    margin-bottom: 6px !important;
  }
  .section--contact-direct div[style*="display: flex"] {
    gap: 8px !important;
  }
  .section--contact-direct div[style*="text-align: left"] {
    padding: 8px 12px !important;
    width: 100% !important; /* スマホでは直通枠をフル幅にしてバランス調整 */
    box-sizing: border-box !important;
    border-radius: 6px !important;
  }
  .section--contact-direct strong {
    font-size: 0.72rem !important;
    margin-bottom: 2px !important;
  }
  .section--contact-direct a {
    font-size: 1.15rem !important; /* 電話番号をバランスの良いサイズに */
    gap: 4px !important;
  }
  .section--contact-direct p[style*="margin-top: 16px"] {
    margin-top: 10px !important;
    font-size: 0.72rem !important;
  }

  /* 『スタッフ紹介』セクション (page-company.php) のスマホ並び順最適化（スタッフ名を画像より上に表示） */
  #staff .responsive-grid-2col {
    display: flex !important;
    flex-direction: column !important;
  }
  #staff .staff-team-text-side {
    order: 1 !important;
  }
  #staff .staff-team-photo-side {
    order: 2 !important;
    margin-top: 12px !important;
  }

  /* ==========================================================================
     【NEW】トップページ各種特徴カード（3つの強み、ポータルカード、卒業生の声）のスマホ表示余白・サイズ極限スリム化
     ========================================================================== */
  /* 1. 3つの強み・7つの強み（.reason-card）の引き締め */
  .reason-card {
    padding: 16px 14px !important; /* スマホ: 16px 14px にさらにスリム化し無駄な余白を完全に排除 */
    border-radius: 12px !important;
  }
  .reason-card__num {
    font-size: 3.2rem !important; /* スマホに適したサイズに縮小 */
    top: -6px !important;
    right: 8px !important;
  }
  .reason-card__icon {
    width: 44px !important; /* 48px -> 44px へ縮小 */
    height: 44px !important;
    font-size: 1.25rem !important; /* 1.35rem -> 1.25rem */
    margin-bottom: 8px !important; /* 下部マージンを12pxから8pxへ（無駄な隙間を排除） */
    border-radius: 8px !important;
  }
  .reason-card__title {
    font-size: 0.95rem !important; /* 1.1rem -> 0.95rem (スマホ専用で長文見出しをコンパクトにしてバランス調整) */
    margin-bottom: 6px !important; /* 8px -> 6px */
    line-height: 1.3 !important; /* 1.4 -> 1.3 */
  }
  .reason-card__desc {
    font-size: 0.8rem !important; /* 0.85rem -> 0.8rem (スリム化) */
    line-height: 1.45 !important; /* 1.6 -> 1.45 (行間を詰める) */
  }
  .reasons-grid {
    gap: 12px !important; /* 16px -> 12px にカード同士の間隔をさらに引き締め */
  }

  /* 2. サービスポータルカード（.portal-card）の引き締め */
  .portal-card {
    padding: 16px 14px !important; /* スマホ: 16px 14px */
    border-radius: 12px !important;
  }
  .portal-card__icon {
    font-size: 1.6rem !important; /* 1.8rem -> 1.6rem */
    margin-bottom: 8px !important; /* 10px -> 8px */
  }
  .portal-card__title {
    font-size: 0.95rem !important; /* 1.05rem -> 0.95rem */
    margin-bottom: 4px !important; /* 6px -> 4px */
  }
  .portal-card__concept {
    font-size: 0.7rem !important; /* 0.75rem -> 0.7rem */
    padding: 2px 6px !important;
    margin-bottom: 8px !important; /* 10px -> 8px */
  }
  .portal-card__desc {
    font-size: 0.8rem !important; /* 0.82rem -> 0.8rem */
    line-height: 1.4 !important; /* 1.5 -> 1.4 */
    margin-bottom: 10px !important; /* 14px -> 10px */
  }

  /* 3. 卒業生の声カード（.testimonial-card）の引き締め */
  .testimonial-card {
    padding: 16px 14px !important; /* スマホ: 16px 14px */
    border-radius: 12px !important;
  }
  .testimonial-card__header {
    margin-bottom: 10px !important; /* 12px -> 10px */
    padding-bottom: 10px !important;
    gap: 10px !important;
  }
  .testimonial-card__avatar {
    width: 38px !important; /* 44px -> 38px */
    height: 38px !important;
    font-size: 1rem !important;
  }
  .testimonial-card__who {
    font-size: 0.85rem !important; /* 0.88rem -> 0.85rem */
  }
  .testimonial-card__attr {
    font-size: 0.68rem !important;
    margin-top: 2px !important;
  }
  .testimonial-card__quote {
    font-size: 0.8rem !important; /* 0.82rem -> 0.8rem */
    line-height: 1.45 !important; /* 1.6 -> 1.45 */
  }

  /* ==========================================================================
     【NEW】共通CTA（見学・体験予約）ブロック（.inline-cta-box）のスマホ極限引き締め（折り返し防止）
     ========================================================================== */
  .inline-cta-box {
    padding: 24px 14px !important; /* スマホでは 48px padding を 24px 14px にスリム化し、文字表示幅を十分に確保 */
  }
  .inline-cta__title {
    font-size: clamp(1.2rem, 5.2vw, 1.45rem) !important; /* スマホ画面に合わせたスマートフォントサイズ */
    white-space: nowrap !important; /* 「見学・体験利用受付中」が絶対に不自然に折り返さないように1行に固定 */
    line-height: 1.3 !important;
    margin-bottom: 10px !important; /* 下部マージンを12pxから10pxへ */
  }
  main.site-main section.section div.container div.inline-cta-box p.inline-cta__text {
    font-size: 0.825rem !important; /* 1rem/0.9375rem -> 0.825rem（womens-empowerment準拠の極上テキストサイズ） */
    line-height: 1.5 !important; /* 行間を綺麗に引き締め */
    margin-bottom: 20px !important; /* 下部マージンを32pxから20pxへ大幅削減（無駄スペース排除） */
    text-align: center !important; /* 中央揃えに統一して美しい一貫性を実現 */
  }

  /* スマホでの複数行にわたる長文中央寄せ段落テキストを左寄せ化（行頭を揃えて読みやすさ向上） */
  main.site-main section p:not(.section-title):not(.btn),
  main.site-main div p:not(.section-title):not(.btn),
  .section-intro-text,
  .section-header p,
  .company-section p:not(.section-title),
  .guide-section p:not(.section-title),
  .results-section p:not(.section-title),
  .job-section p:not(.section-title) {
    text-align: left !important;
  }
  p.inline-cta__text--service-faq {
    text-align: center !important;
  }
  .inline-cta-box div[style*="display: flex"],
  .inline-cta-box .responsive-flex-2col {
    gap: 10px !important; /* ボタン同士のgapを縮小 */
  }
  .inline-cta-box .btn--large {
    min-height: 40px !important; /* ボタンの高さをスリムな40pxに最適化 */
    padding: 8px 16px !important;
    font-size: 0.85rem !important;
  }

  /* ==========================================================================
     【NEW】共通CTA（見学・体験予約）および採用エントリーフォームのスマホ極限中央揃え
     ========================================================================== */
  /* 見出し（spanラベル、h3タイトル）を確実に中央揃え */
  main.site-main .inline-cta-box .inline-cta__title,
  main.site-main .inline-cta-box span,
  main.site-main .recruit-requirements h3.inline-cta__title {
    text-align: center !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
  }

  /* CTAエリア内のボタンコンテナ（縦積み時）を完全に中央寄せに */
  main.site-main .inline-cta-box .responsive-flex-2col,
  main.site-main .recruit-requirements .responsive-flex-2col {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; /* 横方向中央揃え */
    justify-content: center !important;
    width: 100% !important;
  }

  /* ボタン自体のサイズ調整、中央揃え、テキストやアイコンの中央配置 */
  main.site-main .inline-cta-box .responsive-flex-2col .btn,
  main.site-main .recruit-requirements .responsive-flex-2col .btn {
    width: 100% !important;
    max-width: 340px !important; /* スマホ画面で握りやすく押しやすい最適な最大幅 */
    text-align: center !important;
    justify-content: center !important; /* 内包するアイコンとテキストも中央揃え */
    margin: 0 auto !important;
  }

  /* ==========================================================================
     【NEW】フッターナビゲーションのスマホ極限引き締め（インラインスラッシュ区切り横並び化）
     ========================================================================== */
  .site-footer__nav {
    grid-template-columns: 1fr !important; /* カテゴリ自体の縦積みはキープ */
    gap: 16px !important; /* カテゴリ間の隙間を適度に詰める */
  }

  .site-footer__nav-title {
    margin-bottom: 8px !important; /* タイトル下の隙間を縮小 */
    border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
    padding-bottom: 4px !important;
  }

  .site-footer__nav ul {
    display: block !important; /* ブロック（インラインを内包）に変更 */
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.7 !important; /* 行間を適度に確保して読みやすく */
    text-align: left !important;
  }

  .site-footer__nav li {
    display: inline !important; /* インライン要素にしてシームレスな横並びに！ */
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .site-footer__nav li a {
    display: inline-block !important; /* タップ領域を確保 */
    padding: 2px 0 !important;
  }

  /* 項目間にスラッシュ（/）を自動挿入 */
  .site-footer__nav li:not(:last-child)::after {
    content: " / " !important;
    color: rgba(255, 255, 255, 0.35) !important; /* スラッシュは薄い白にして上品に馴染ませる */
    margin: 0 8px !important; /* 左右に8pxの余白を設けて見やすく */
    display: inline-block !important;
    font-weight: normal !important;
  }

  /* 特殊なPC用マージン指定（お問い合わせ等）をスマホではリセットしてインライン整列 */
  .site-footer__nav li[style*="margin-top"] {
    margin-top: 0 !important;
  }

  /* ==========================================================================
     【NEW】スマホ表示時の背景枠（青枠・オレンジ枠等）の左右余白最適化（padding: 0 16px）
     ========================================================================== */
  /* インラインで指定されている padding: 0 32px / padding: 0 24px を持つ全下層ページのコンテナ余白をスマホ時に最適化 */
  .responsive-padding-container,
  div[style*="padding: 0 32px"],
  div[style*="padding:0 32px"],
  div[style*="padding: 0 24px"],
  div[style*="padding:0 24px"],
  section[class*="recruit-"] > div[style*="padding"] {
    padding: 0 16px !important; /* スマホ画面で十分な可読性余白（16px）を確保し、画面端のはみ出しを防止 */
  }

  /* インラインで上下左右 padding: 32px が指定されている全要素をスマホ時に padding: 16px に上書き */
  div[style*="padding: 32px"],
  div[style*="padding:32px"],
  section[style*="padding: 32px"],
  section[style*="padding:32px"] {
    padding: 16px !important; /* 上下左右とも 16px に最適化 */
  }

  /* スマホ表示時は、インライン指定を含めすべての h2 の font-size を 1.25rem に一元化（一貫したセクション見出しサイズの維持） */
  h2,
  h2[style*="font-size"] {
    font-size: 1.25rem !important;
  }

  /* スマホ表示時は、インライン指定（1.5rem, 1.35rem, 1.625rem等）を含めすべての h3 の font-size を 1rem に一元化（はみ出しや不自然な改行の完全根絶） */
  h3,
  h3[style*="font-size"] {
    font-size: 1rem !important;
  }

  /* スマホ表示時は、インライン指定を含めすべての h4 の font-size を 1rem に一元化 */
  h4,
  h4[style*="font-size"] {
    font-size: 1rem !important;
  }

  /* 表彰歴賞状ギャラリーのスマホ2列横並び化 */
  .ceo-awards-gallery {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important; /* スマホでは間隔を12pxに詰める */
  }
  .ceo-awards-gallery span {
    font-size: 0.72rem !important; /* スマホ横並び時にフォントサイズをスリム化して折り返しを見やすく */
    line-height: 1.3 !important;
  }

  /* スタッフ紹介の資格バッジが他のセレクタ誤爆で縦積み化するのを防ぐ */
  .staff-licence-container span {
    display: inline-block !important;
    width: auto !important;
    text-align: center !important;
    margin: 0 !important;
  }

  /* ==========================================================================
     【NEW】色枠（背景色のあるコンテナ）内の中の白いカード（枠）のパディングを
     お悩み共感カード（16px）に美しく完璧に統一する
     ========================================================================== */
  /* ① サービス紹介：簡易セルフチェック診断の白いカード */
  .selfcheck-card {
    padding: 16px !important;
  }
  /* ② 就職実績：卒業生の生の声の白いカード */
  #results-voices div[style*="padding: 32px"],
  #results-voices div[style*="padding:32px"] {
    padding: 16px !important;
  }
  /* ③ 採用情報：先輩社員のリアルな声カード */
  .rec-voice-card {
    padding: 16px !important;
  }

  /* ==========================================================================
     【NEW】セクション間の上品な境界線の追加（スマホ画面での「話題・セクションの区切り」を明示）
     ========================================================================== */
  /* スライダー直後の最初のセクションを除く、各セクションの境界に極めて上品な薄い境界線を引く（デザイン性を損なわず区切りを完全視覚化） */
  main.site-main section:not(:first-of-type),
  .section:not(.hero-slider-section):not(:first-of-type),
  #part-comparison,
  #part-selfcheck,
  #results-voices,
  .recruit-requirements,
  .faq-section {
    border-top: 1px solid rgba(42, 156, 171, 0.12) !important;
  }

  /* ==========================================================================
     Footer Copyright Mobile Wrap Style
     ========================================================================== */
  .footer-sp-br,
  .sp-br {
    display: block !important;
  }
  .site-footer__copyright {
    display: block !important;
    margin-bottom: 6px !important;
    font-size: 0.8rem !important;
  }
  .site-footer__separator {
    display: none !important;
  }
  .site-footer__links {
    display: block !important;
    font-size: 0.8rem !important;
  }
}

/* PC表示でスマホ専用のプラン比較ブロックを非表示にする */
.sp-compare-container {
  display: none !important;
}

/* ==========================================
   DESKTOP & MOBILE NAVIGATION SEPARATION
   ========================================== */
/* デフォルトではモバイル用メニューを非表示 */
.site-nav__list--mobile {
  display: none !important;
}

@media (min-width: 769px) {
  /* PCではデスクトップメニューを表示し、モバイルメニューは絶対に非表示 */
  .site-nav__list--desktop {
    display: flex !important;
  }
  .site-nav__list--mobile {
    display: none !important;
  }
}

@media (max-width: 768px) {
  /* モバイルではデスクトップメニューは絶対に非表示 */
  .site-nav__list--desktop {
    display: none !important;
  }
  
  /* モバイルドロワー内の新しいリストスタイル */
  .site-nav__list--mobile {
    display: none; /* JSで toggled */
    position: absolute !important;
    top: var(--header-height, 60px) !important;
    left: 0 !important;
    right: 0 !important;
    flex-direction: column !important;
    background-color: var(--color-secondary) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: var(--shadow-lg) !important;
    padding: 16px !important;
    gap: 4px !important;
    list-style: none !important;
    z-index: 99999 !important;
  }
  
  .site-nav__list--mobile.is-open {
    display: flex !important;
  }
  
  .site-nav__list--mobile li.menu-item-sp {
    width: 100% !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  .site-nav__list--mobile li.menu-item-sp a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding: 14px 20px !important;
    color: #ffffff !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-sizing: border-box !important;
    border-radius: 0 !important;
    text-decoration: none !important;
  }
  
  .site-nav__list--mobile li.menu-item-sp a:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
  }
  
  /* アコーディオン開閉インジケータ (＋ / −) */
  .sp-submenu-indicator {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    transition: transform 0.25s ease !important;
    display: inline-block !important;
    line-height: 1 !important;
  }
  
  /* 子メニュー (sp-sub-menu) の初期非表示スタイル */
  .site-nav__list--mobile .sp-sub-menu {
    display: none;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-radius: 0 !important;
  }
  
  .site-nav__list--mobile .sp-sub-menu.is-active {
    display: block !important;
    animation: spSlideFadeDown 0.3s ease-out forwards !important;
  }
  
  /* 子メニュー内のリンクスタイル */
  .site-nav__list--mobile .sp-sub-menu li a {
    padding: 12px 20px 12px 36px !important; /* 左インデントを下げて字下げを明確に */
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    color: rgba(255, 255, 255, 0.9) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    display: block !important;
  }
  
  .site-nav__list--mobile .sp-sub-menu li a:hover {
    background-color: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
  }
  
  @keyframes spSlideFadeDown {
    from {
      opacity: 0;
      transform: translateY(-8px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

@media (min-width: 769px) {
  /* ==========================================================================
     【NEW】PC表示用データテーブルの極上ブラッシュアップ（視認性＆高級感の劇的向上）
     ========================================================================== */
  
  /* 1. 全ページの主要テーブル（会社概要、募集要項、各店舗/ブランド情報）への一括適用（別枠角丸仕様） */
  main.site-main table.data-table,
  main.site-main table.gutscat-info-table,
  main.site-main table.oluolu-info-table,
  main.site-main table.ganga-info-table,
  .recruit-requirements table.data-table {
    border-collapse: separate !important; /* 角丸を滑らかに表現するために separate に */
    border-spacing: 0 !important;
    border: 1px solid rgba(42, 156, 171, 0.16) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 10px 30px rgba(42, 156, 171, 0.04) !important;
    background-color: #ffffff !important;
    margin-bottom: 32px !important;
  }

  /* 2. テーブル項目の見出し（th）の超視覚化（高級アクセントバー＆上品なパステルティール背景） */
  main.site-main table.data-table th,
  main.site-main table.gutscat-info-table th,
  main.site-main table.oluolu-info-table th,
  main.site-main table.ganga-info-table th,
  .recruit-requirements table.data-table th {
    background-color: #edf7f8 !important; /* ブランドに馴染む極上パステルティール背景 */
    color: var(--color-secondary) !important; /* 濃い青緑（セカンダリ） */
    font-size: 0.9375rem !important;
    font-weight: 800 !important;
    padding: 22px 24px !important; /* ゆったりとしたプレミアムな余白 */
    border-bottom: 1px solid rgba(42, 156, 171, 0.12) !important;
    border-right: 1px solid rgba(42, 156, 171, 0.08) !important;
    vertical-align: middle !important;
    text-align: left !important;
    /* 高級パンフレットのような「左アクセントバー」を挿入してメリハリを極限に高める */
    border-left: 4px solid var(--color-primary) !important; 
    min-width: 160px !important; /* 折り返しを防止するための安全な最低幅 */
    white-space: nowrap !important; /* 項目名が変な位置で絶対に折り返さないように保護 */
  }

  /* 3. データ本文（td）の視認性向上と、偶数行の交互ストライプ（縞模様）化 */
  main.site-main table.data-table td,
  main.site-main table.gutscat-info-table td,
  main.site-main table.oluolu-info-table td,
  main.site-main table.ganga-info-table td,
  .recruit-requirements table.data-table td {
    padding: 22px 24px !important;
    font-size: 0.9375rem !important;
    color: #1e293b !important; /* 非常に可読性の高いダークスレートグレー */
    line-height: 1.8 !important; /* 行間を広げて視線移動をスムーズに */
    border-bottom: 1px solid rgba(42, 156, 171, 0.08) !important;
    vertical-align: middle !important;
    background-color: #ffffff !important;
    transition: background-color 0.25s ease !important;
  }

  /* 偶数行 tr に交互ストライプ背景を当てて単調さを完全に破壊（高級感のある淡いブルーティール） */
  main.site-main table.data-table tr:nth-child(even) td,
  main.site-main table.gutscat-info-table tr:nth-child(even) td,
  main.site-main table.oluolu-info-table tr:nth-child(even) td,
  main.site-main table.ganga-info-table tr:nth-child(even) td,
  .recruit-requirements table.data-table tr:nth-child(even) td {
    background-color: #f7fcfe !important; /* 交互の行に非常に爽やかで洗練された淡色を適用 */
  }

  /* 各行ホバー時に上品なインタラクション（ふわっと色が変わる）を演出 */
  main.site-main table.data-table tr:hover td,
  main.site-main table.gutscat-info-table tr:hover td,
  main.site-main table.oluolu-info-table tr:hover td,
  main.site-main table.ganga-info-table tr:hover td,
  .recruit-requirements table.data-table tr:hover td {
    background-color: rgba(62, 193, 211, 0.04) !important;
  }

  /* 最後の行のボーダーを綺麗に処理 */
  main.site-main table.data-table tr:last-child th,
  main.site-main table.data-table tr:last-child td,
  main.site-main table.gutscat-info-table tr:last-child th,
  main.site-main table.gutscat-info-table tr:last-child td,
  main.site-main table.oluolu-info-table tr:last-child th,
  main.site-main table.oluolu-info-table tr:last-child td,
  main.site-main table.ganga-info-table tr:last-child th,
  main.site-main table.ganga-info-table tr:last-child td,
  .recruit-requirements table.data-table tr:last-child th,
  .recruit-requirements table.data-table tr:last-child td {
    border-bottom: none !important;
  }
}