/* =========================================================
   THEME-V2.CSS — 全ページ共通「格上げトーン」上書き層
   読み込み順: common.css → theme-v2.css → ページ別CSS（トップは最後に index.css）
   トップ（index.css）・distanceで確立したデザイン言語を全下層ページに展開する。
   - Oswald（--display）／フラット化／ヘッダー白×極細ライン／CTA脈動廃止／控えめ角丸
   - ブランドHEX（緑#184D3C・スカイ#3F9BC8・赤#EA2F23）は変更しない
   - ページ別CSSは本ファイルより後に読み込まれるため、ページ固有の意匠は各ページCSSが勝つ。
     全ページで統一すべき項目（脈動廃止・ヘッダーCTA等）のみ詳細度を上げて確定させている。
   ========================================================= */

/* ===== 1. トークン（index.css と同値。トップでは index.css が再宣言して最終勝者） ===== */
:root{
  --ink:#10181E;            /* 引き締め用ダーク（純黒は使わない） */
  --txt:#1B2630;--txt2:#5E6B78;
  --warm:#FAFAF7;--border:#E2E8E3;
  --hair:#E6EAE6;           /* 極細ライン */
  --r-lg:14px;              /* 控えめ角丸 */
  --display:'Oswald','Noto Sans JP',sans-serif;
  --shadow-card:0 2px 16px rgba(16,24,30,.05);
  --shadow-lift:0 14px 36px rgba(16,24,30,.10);
  --max:1100px;
}
body{line-height:1.85;-webkit-font-smoothing:antialiased;font-feature-settings:"palt";}
address{font-style:normal;}
section{scroll-margin-top:72px;}
:focus-visible{outline:3px solid var(--sky);outline-offset:2px;border-radius:var(--r-xs);}

/* ===== 2. ユーティリティ（後続のページ別作業が使う共通クラス） ===== */
/* 数字（タイム・料金・実績値など）の欧文ディスプレイ化 */
.num-display{font-family:var(--display);font-weight:700;letter-spacing:.02em;}
/* 欧文小ラベル（セクションの英字見出し・キャプション用） */
.en-label{font-family:var(--display);font-weight:500;font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--txt2);}
/* セクション変種：極細ライン区切り／温かい背景面 */
.section--hair{border-top:1px solid var(--hair);}
.section--warm{background:var(--warm);}

/* ===== 3. 余白リズム・見出しトーン ===== */
.section{padding:88px 24px;}
.container{max-width:var(--max);}
/* グラデ細線 → 緑フラット線＋赤の小三角（トップの section-mark と同形） */
.section-mark,.grad-line{width:34px;height:2px;margin:0 auto 18px;background:var(--green);border-radius:0;position:relative;}
.section-mark::after,.grad-line::after{content:'';position:absolute;right:-10px;top:-2px;width:6px;height:6px;background:var(--cta);clip-path:polygon(50% 0,100% 100%,0 100%);}
.section-title{font-size:30px;font-weight:900;text-align:center;margin-bottom:10px;line-height:1.5;letter-spacing:.01em;}
.section-sub{font-size:15px;text-align:center;color:var(--txt2);margin-bottom:40px;}
.seo-sub{display:block;font-size:14px;font-weight:500;color:var(--txt2);margin-top:6px;}

/* ===== 4. ヘッダー：緑→スカイのグラデ廃止 → 白基調×極細ライン ===== */
.header{background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--hair);box-shadow:none;padding:10px 24px;}
.header-logo{color:var(--txt);}
.header-logo img{height:34px;width:auto;}
.header-logo-text{line-height:1.15;}
.header-logo-main{font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:.06em;color:var(--green);}
.header-logo-sub{font-size:10px;font-weight:700;color:var(--txt2);letter-spacing:.08em;opacity:1;}
.header-nav{gap:26px;}
.header-nav a{font-size:13.5px;font-weight:700;color:var(--txt);}
.header-nav a:hover{color:var(--green);}
/* ヘッダー内CTA：白地に赤ベース（recruit-page.css の白ボタン上書きにも勝つ詳細度） */
.header .btn-cta-header{background:var(--cta);color:#fff!important;border-radius:var(--r-sm);padding:11px 22px;font-size:13px;font-weight:700;}
.header .btn-cta-header:hover{background:var(--cta-hover);transform:translateY(-1px);}
.hamburger{color:var(--txt);}
/* ドロップダウン：白ヘッダーに合わせてフラット化 */
.nav-dropdown-menu{border:1px solid var(--hair);box-shadow:0 8px 24px rgba(16,24,30,.12);}
.nav-dropdown-menu a:hover{background:var(--warm);}

/* ===== 5. PAGE HERO：グラデ（--grad-vivid）→ フラットな深緑の色面 ===== */
.page-hero{background:var(--green);}
/* 旧グラデ言語の装飾グロー（radial-gradientの::before）を全ページで無効化。
   拠点ページ（.page-hero--location）の暗幕スクリムは写真の可読性確保のため除外 */
body .page-hero:not(.page-hero--location)::before{content:none;}
/* breadcrumb の可読性維持（深緑フラット面の上で白の視認性を確保） */
body .page-hero .breadcrumb{opacity:.8;}
.page-hero .breadcrumb a{color:#fff;text-decoration:underline;}

/* ===== 6. フッター：ink基調に統一（トップと同値） ===== */
.footer{background:var(--ink);color:#fff;padding:28px 40px 44px;}
.footer-inner{max-width:var(--max);padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.12);}
.footer-inner a{color:#93A1AB;}
.footer-inner a:hover{color:#fff;}
.footer-brand{color:#93A1AB;}
.footer-sep{color:rgba(255,255,255,.18);}
.footer-bottom{padding-top:16px;color:#5E6B78;}
.footer-desc{color:#93A1AB;}
.footer--full .footer-inner{border-bottom:1px solid rgba(255,255,255,.12);}

/* ===== 7. ボタン/CTA共通：脈動・グロー廃止、フラット化、控えめ角丸 =====
   ページ別CSSが .fl-cta(0,1,0) で脈動ドットとグローを再定義しているため、
   .floating .fl-cta(0,2,0) の詳細度で全ページ確定させる。
   背景色は指定しない（recruit の緑CTAなどページ固有の色を尊重） */
.floating .fl-cta{border-radius:var(--r-sm);box-shadow:0 6px 18px rgba(234,47,35,.28);}
.floating .fl-cta::before{content:none;animation:none;}
.floating .fl-line{border-radius:var(--r-sm);box-shadow:none;}

/* ===== 8. レスポンシブ（〜768px / 〜640px） ===== */
@media(max-width:768px){
  /* --- HEADER --- */
  .header{padding:8px 16px;}
  .header-logo img{height:28px;}
  .header-logo-main{font-size:17px;}
  .header-logo-sub{font-size:9px;}
  .hamburger{display:flex;width:44px;height:44px;align-items:center;justify-content:center;}
  /* --- MOBILE MENU（タップ領域48px確保・控えめ角丸） --- */
  .mobile-menu a{font-size:16px;padding:14px 28px;min-height:48px;display:flex;align-items:center;justify-content:center;}
  .mobile-menu .mm-cta{padding:16px 40px;font-size:15px;border-radius:var(--r-md);}
  .mobile-menu .mm-line{padding:14px 28px;font-size:13px;border-radius:var(--r-md);}
  /* --- FOOTER（下部固定CTAバーぶんの余白を維持） --- */
  .footer{padding:20px 16px 84px;}
  .footer-inner{gap:12px;padding-bottom:10px;}
  /* --- ANIMATIONS: reduce on mobile --- */
  .fade-in-section{opacity:1!important;transform:none!important;transition:none!important;}
}
@media(max-width:640px){
  .section{padding:56px 18px;}
  .section-title{font-size:23px;}
  .footer-inner a{font-size:11px;}
  .footer-bottom{font-size:10px;padding-top:10px;}
  .floating .fl-cta,.floating .fl-line{box-shadow:none;}
}

/* ===== 9. A11Y: Reduced Motion ===== */
@media(prefers-reduced-motion:reduce){
  .fade-in-section{opacity:1!important;transform:none!important;transition:none!important;}
  html{scroll-behavior:auto!important;}
}