/**
 * SUN DX 2026 — Theme CSS
 *
 * 構造:
 *   1. デザイントークン互換レイヤ（tokens.css の semantic 変数を維持）
 *   2. ベーススタイル（body / link / heading の補強）
 *   3. WordPress ブロック固有の調整
 *   4. ユーティリティ（hairline / eyebrow / btn など comp.html 共通の意匠を WP に移植）
 *   5. アクセシビリティ補助（focus-visible / reduced-motion / HC mode）
 *
 * Source of truth:
 *   - 色 / フォント / スペーシング slug は theme.json で定義（管理画面から参照可能）
 *   - 本ファイルは theme.json 経由の `--wp--preset--*` 変数を semantic 名にエイリアスして
 *     comp.html 既存 CSS との互換を保つ
 */

/* ============================================================
 * 1. Token compatibility layer
 *    theme.json の preset を tokens.css の semantic 名にマップ
 *    （comp.html 由来の CSS が var(--color-ui-primary) 等で参照しているため）
 * ============================================================ */
:root {
  /* Color: brand & UI */
  --color-brand-symbol:        var(--wp--preset--color--brand-symbol);
  --color-brand-symbol-ink:    #FFFFFF;
  --color-ui-primary:          var(--wp--preset--color--ui-primary);
  --color-ui-primary-hover:    var(--wp--preset--color--ui-primary-hover);
  --color-ui-primary-pressed:  var(--wp--preset--color--ui-primary-pressed);
  --color-ui-primary-subtle:   var(--wp--preset--color--ui-primary-subtle);
  --color-ui-primary-on:       var(--wp--preset--color--text-on-primary);
  --color-ui-secondary:        var(--wp--preset--color--ui-secondary);
  --color-ui-secondary-hover:  var(--wp--preset--color--ui-secondary-hover);
  --color-ui-secondary-on:     var(--wp--preset--color--text-heading);

  /* Color: CTA & accent */
  --color-cta-primary:         var(--wp--preset--color--cta-primary);
  --color-cta-primary-hover:   var(--wp--preset--color--cta-primary-hover);
  --color-cta-primary-on:      var(--wp--preset--color--text-on-cta);
  --color-accent-emphasis:     var(--wp--preset--color--accent-emphasis);

  /* Color: text */
  --color-text-body:           var(--wp--preset--color--text-body);
  --color-text-heading:        var(--wp--preset--color--text-heading);
  --color-text-secondary:      var(--wp--preset--color--text-secondary);
  --color-text-muted:          var(--wp--preset--color--text-muted);
  --color-text-on-primary:     var(--wp--preset--color--text-on-primary);
  --color-text-on-cta:         var(--wp--preset--color--text-on-cta);

  /* Color: link */
  --color-link-default:        var(--wp--preset--color--link-default);
  --color-link-hover:          var(--wp--preset--color--link-hover);
  --color-link-visited:        var(--wp--preset--color--link-visited);
  --color-link-emphasis:       var(--wp--preset--color--accent-emphasis);

  /* Color: background */
  --color-bg-default:          var(--wp--preset--color--bg-default);
  --color-bg-subtle:           var(--wp--preset--color--bg-subtle);
  --color-bg-elevated:         var(--wp--preset--color--bg-elevated);
  --color-bg-overlay:          rgba(17, 24, 39, 0.56);

  /* Color: border */
  --color-border-subtle:       var(--wp--preset--color--border-subtle);
  --color-border-default:      var(--wp--preset--color--border-default);
  --color-border-strong:       var(--wp--preset--color--border-strong);
  --color-border-focus:        var(--wp--preset--color--border-focus);

  /* Color: state */
  --color-state-success:       var(--wp--preset--color--state-success);
  --color-state-warning:       var(--wp--preset--color--state-warning);
  --color-state-danger:        var(--wp--preset--color--state-danger);
  --color-state-info:          var(--wp--preset--color--state-info);

  /* Color: blue scale（comp.html 系の補助スケール、theme.json の blue-700/800/900/950 と整合） */
  --color-blue-50:   #F0F7FF;
  --color-blue-100:  #DCEBFF;
  --color-blue-200:  #B8D7FF;
  --color-blue-300:  #8FBEFF;
  --color-blue-400:  #5C9CF7;
  --color-blue-500:  #2E7DE0;
  --color-blue-600:  #0078E7;
  --color-blue-700:  var(--wp--preset--color--blue-700);
  --color-blue-800:  var(--wp--preset--color--blue-800);
  --color-blue-900:  var(--wp--preset--color--blue-900);
  --color-blue-950:  var(--wp--preset--color--blue-950);

  /* Typography: family */
  --font-body-family:          var(--wp--preset--font-family--biz-udpgothic);
  --font-heading-1-family:     var(--wp--preset--font-family--noto-serif-jp);
  --font-heading-2-family:     var(--wp--preset--font-family--noto-serif-jp);
  --font-heading-3-family:     var(--wp--preset--font-family--biz-udpgothic);
  --font-heading-4-family:     var(--wp--preset--font-family--biz-udpgothic);
  --font-heading-5-family:     var(--wp--preset--font-family--biz-udpgothic);
  --font-heading-6-family:     var(--wp--preset--font-family--biz-udpgothic);
  --font-tagline-family:       var(--wp--preset--font-family--fraunces);
  --font-code-family:          var(--wp--preset--font-family--biz-udgothic-mono);
  --font-caption-family:       var(--wp--preset--font-family--biz-udpgothic);

  /* Typography: size */
  --font-body-size:            16px;
  --font-heading-1-size:       var(--wp--preset--font-size--4xl);
  --font-heading-2-size:       var(--wp--preset--font-size--3xl);
  --font-heading-3-size:       var(--wp--preset--font-size--2xl);
  --font-heading-4-size:       22px;
  --font-heading-5-size:       18px;
  --font-heading-6-size:       16px;
  --font-caption-size:         14px;
  --font-tagline-size:         18px;
  --font-code-size:            14px;

  /* Typography: weight / line-height / letter-spacing */
  --font-body-weight:          400;
  --font-body-line-height:     1.6;
  --font-body-letter-spacing:  0em;
  --font-body-measure:         72ch;
  --font-heading-1-weight:     600;
  --font-heading-1-line-height:1.25;
  --font-heading-1-letter-spacing: 0.02em;
  --font-heading-2-weight:     600;
  --font-heading-2-line-height:1.3;
  --font-heading-2-letter-spacing: 0.02em;
  --font-heading-3-weight:     700;
  --font-heading-3-line-height:1.4;
  --font-heading-3-letter-spacing: 0.02em;
  --font-heading-4-weight:     700;
  --font-heading-4-line-height:1.5;
  --font-heading-4-letter-spacing: 0.02em;
  --font-heading-5-weight:     700;
  --font-heading-5-line-height:1.5;
  --font-heading-5-letter-spacing: 0.02em;
  --font-heading-6-weight:     700;
  --font-heading-6-line-height:1.6;
  --font-heading-6-letter-spacing: 0.04em;
  --font-caption-weight:       400;
  --font-caption-line-height:  1.6;
  --font-caption-letter-spacing: 0.04em;
  --font-tagline-weight:       400;
  --font-tagline-line-height:  1.4;
  --font-tagline-letter-spacing: 0.05em;

  /* Spacing */
  --space-0:  var(--wp--preset--spacing--0);
  --space-1:  var(--wp--preset--spacing--1);
  --space-2:  var(--wp--preset--spacing--2);
  --space-3:  var(--wp--preset--spacing--3);
  --space-4:  var(--wp--preset--spacing--4);
  --space-5:  var(--wp--preset--spacing--5);
  --space-6:  var(--wp--preset--spacing--6);
  --space-7:  var(--wp--preset--spacing--7);
  --space-8:  var(--wp--preset--spacing--8);
  --space-9:  var(--wp--preset--spacing--9);
  --space-10: var(--wp--preset--spacing--10);
  --space-section-y:    var(--wp--preset--spacing--section-y);
  --space-section-y-sm: var(--wp--preset--spacing--section-y-sm);
  --space-gutter:       var(--wp--preset--spacing--gutter);
  --space-stack-sm:     12px;
  --space-stack-md:     16px;
  --space-stack-lg:     24px;
  --space-inline-sm:    8px;
  --space-inline-md:    12px;

  /* Radius */
  --radius-none:    0px;
  --radius-default: 4px;
  --radius-pill:    9999px;
  --radius-button:  4px;
  --radius-input:   4px;
  --radius-card:    4px;
  --radius-tag:     9999px;

  /* Shadow */
  --shadow-elevated: 0 4px 12px rgba(0, 75, 153, 0.10);
  --shadow-overlay:  0 8px 32px rgba(0, 75, 153, 0.16);
  --shadow-lift-1:   0 4px 12px rgba(0, 75, 153, 0.10);
  --shadow-lift-2:   0 8px 32px rgba(0, 75, 153, 0.16);

  /* Breakpoint */
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;

  /* Motion */
  --duration-fast:        150ms;
  --duration-normal:      250ms;
  --duration-slow:        400ms;
  --duration-interaction: 150ms;
  --duration-transition:  250ms;
  --duration-entrance:    400ms;
  --easing-default:       cubic-bezier(0.2, 0, 0, 1);
  --easing-enter:         cubic-bezier(0, 0, 0.2, 1);
  --easing-exit:          cubic-bezier(0.4, 0, 1, 1);
  --easing-curve-standard:cubic-bezier(0.2, 0, 0, 1);
  --easing-curve-enter:   cubic-bezier(0, 0, 0.2, 1);
  --easing-curve-exit:    cubic-bezier(0.4, 0, 1, 1);
}

/* ============================================================
 * 2. Base styles（comp.html 由来の最低限の補強）
 * ============================================================ */
html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  font-feature-settings: "palt";
}

body {
  font-family: var(--font-body-family);
  font-size: var(--font-body-size);
  font-weight: var(--font-body-weight);
  line-height: var(--font-body-line-height);
  letter-spacing: var(--font-body-letter-spacing);
  color: var(--color-text-body);
  background: var(--color-bg-default);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg, video {
  max-width: 100%;
  height: auto;
}

/* 本文中リンク */
a {
  color: var(--color-link-default);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
a:hover, a:focus-visible {
  color: var(--color-link-hover);
}
a:visited {
  color: var(--color-link-visited);
}

/* ============================================================
 * 3. WordPress block adjustments
 * ============================================================ */

/* グループ・カラム間隔 */
.wp-block-group + .wp-block-group {
  margin-top: 0;
}

/* 本文ブロックの読みやすい最大幅 */
.wp-block-post-content > .wp-block-paragraph,
.wp-block-post-content > p {
  max-width: var(--font-body-measure);
  overflow-wrap: anywhere;
}

/* 引用ブロック */
.wp-block-quote {
  background: rgba(0,95,196,0.04);
  border: 1px solid var(--color-border-subtle);
  border-radius: 4px;
  padding: var(--space-3) var(--space-4);
  color: var(--color-text-secondary);
  font-style: normal;
}

/* 画像ブロックのキャプション */
.wp-block-image figcaption {
  font-family: var(--font-caption-family);
  font-size: var(--font-caption-size);
  color: var(--color-text-secondary);
  letter-spacing: var(--font-caption-letter-spacing);
  margin-top: var(--space-2);
}

/* ボタンブロック（theme.json の elements.button を補強） */
.wp-block-button .wp-block-button__link {
  border-radius: var(--radius-button);
  font-family: var(--font-body-family);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
  line-height: 1.2;
  padding: 12px 20px;
  transition:
    background var(--duration-interaction) var(--easing-default),
    color var(--duration-interaction) var(--easing-default),
    transform var(--duration-interaction) var(--easing-default);
}

/* CTA ボタン（vermillion）— ユーザーが style="background-color:var(--wp--preset--color--cta-primary)" で指定した場合の補助 */
.wp-block-button.is-style-cta .wp-block-button__link,
.wp-block-button.has-cta-primary-background-color .wp-block-button__link {
  background-color: var(--color-cta-primary);
  color: var(--color-text-on-cta);
}
.wp-block-button.is-style-cta .wp-block-button__link:hover,
.wp-block-button.has-cta-primary-background-color .wp-block-button__link:hover {
  background-color: var(--color-cta-primary-hover);
}

/* セパレータ */
.wp-block-separator {
  border-color: var(--color-border-subtle);
  opacity: 1;
}

/* ナビゲーションブロック */
.wp-block-navigation {
  font-family: var(--font-body-family);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.wp-block-navigation .wp-block-navigation-item__content {
  padding: var(--space-2) var(--space-3);
}

/* サイトロゴ */
.wp-block-site-logo img {
  height: auto;
}

/* ============================================================
 * 4. Utility classes（comp.html 共通意匠を WP に移植）
 * ============================================================ */

/* セクション縦間隔ユーティリティ */
.has-section-spacing {
  padding-top: var(--space-section-y);
  padding-bottom: var(--space-section-y);
}
.has-section-spacing-sm {
  padding-top: var(--space-section-y-sm);
  padding-bottom: var(--space-section-y-sm);
}

/* hairline マーク（左短ライン装飾、eyebrow 用） */
.has-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-body-family);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--color-text-secondary);
  text-transform: uppercase;
}
.has-eyebrow::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--color-ui-primary);
}

/* tagline（欧文 Fraunces italic） */
.is-tagline {
  font-family: var(--font-tagline-family);
  font-style: italic;
  font-weight: 500;
  font-size: var(--font-tagline-size);
  letter-spacing: var(--font-tagline-letter-spacing);
  line-height: var(--font-tagline-line-height);
  color: var(--color-text-secondary);
}

/* hero heading（ヒーロー特大見出し用） */
.is-hero-heading {
  font-family: var(--font-heading-1-family);
  font-size: var(--wp--preset--font-size--hero);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0.02em;
  color: var(--color-text-heading);
  overflow-wrap: anywhere;
}

/* lead 段落（セクション冒頭の太字リード） */
.is-lead {
  font-size: 18px;
  line-height: 1.7;
  color: var(--color-text-body);
  overflow-wrap: anywhere;
}

/* card */
.is-card {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-card);
  padding: var(--space-5);
}

/* WP コア出力の `:where(.wp-site-blocks) > * { margin-block-start: 1.5rem }` を無効化。
 * ヘッダー / main / フッター間の不要な 1.5rem 余白の撲滅 */
:where(.wp-site-blocks) > * {
  margin-block-start: 0 !important;
}

/* footer 専用（ダーク背景上の文字色補正） */
.wp-site-blocks > footer.wp-block-template-part,
.is-footer {
  background: var(--wp--preset--color--blue-950);
  color: rgba(255, 255, 255, 0.85);
}
.is-footer a {
  color: rgba(255, 255, 255, 0.85);
}
.is-footer a:hover {
  color: #FFFFFF;
}

/* ============================================================
 * 5. Accessibility helpers
 * ============================================================ */

/* フォーカスリング（WCAG 2.2 SC 2.4.11/2.4.13） */
:focus-visible {
  outline: 3px solid var(--color-border-focus);
  outline-offset: 2px;
}

/* スキップリンク */
.skip-link {
  position: absolute;
  top: -40px;
  left: 8px;
  background: var(--color-ui-primary);
  color: var(--color-text-on-primary);
  padding: 8px 12px;
  z-index: 100;
  border-radius: var(--radius-default);
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus {
  top: 8px;
}

/* High Contrast モード（prefers-contrast: more） */
@media (prefers-contrast: more) {
  :root {
    --color-ui-primary:        #003070;
    --color-ui-primary-hover:  #002455;
    --color-ui-primary-pressed:#001A40;
    --color-cta-primary:       #A04500;
    --color-cta-primary-hover: #7F3700;
    --color-text-body:         #000000;
    --color-text-heading:      #000000;
    --color-text-secondary:    #1A1A1A;
    --color-link-default:      #004080;
    --color-link-hover:        #001F60;
    --color-border-subtle:     #737373;
    --color-border-default:    #404040;
    --color-border-strong:     #000000;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 1ms;
    --duration-normal: 1ms;
    --duration-slow: 1ms;
    --duration-interaction: 1ms;
    --duration-transition: 1ms;
    --duration-entrance: 1ms;
  }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
 * 6. corporate.css (auto-generated by build_corporate_css.py)
 *    コーポ HTML 19 ファイルから一元化された全スタイル
 *    NOTE: このセクションは merge_corporate_into_theme.py で
 *          毎回上書きされます。手動編集は再生成で消えます。
 * ============================================================ */

/* ============================================================
   corporate.css  --  19 ファイルの <style> を一元化
   生成: scripts/build_corporate_css.py
   注意:  本ファイルは自動生成されます。手動編集は再生成で消えます。
   ============================================================ */

/* === Stage 1: 衝突対象外ルール（初出ページ採用） === */

/* --- from comp.html --- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0;
  font-family: var(--font-body-family);
  font-size: var(--font-body-size);
  font-weight: var(--font-body-weight);
  line-height: var(--font-body-line-height);
  color: var(--color-text-body);
  background: var(--color-bg-default);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility; }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--color-link-default); text-decoration: none; transition: color var(--duration-interaction) var(--easing-default); }
a:hover { color: var(--color-link-hover); text-decoration: underline; text-underline-offset: 4px; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--color-border-focus); outline-offset: 2px; border-radius: 2px; }
ul { list-style: none; padding: 0; margin: 0; }
h1, h2, h3, h4 { color: var(--color-text-heading); margin: 0; }
.container { max-width: 1200px; margin-inline: auto; padding-inline: var(--space-gutter); }
.container--wide { max-width: 1320px; margin-inline: auto; padding-inline: var(--space-gutter); }
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(255,255,255,0.94);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--color-border-subtle);
  transition: background var(--duration-transition) var(--easing-default); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-5);
  height: 72px; max-width: 1320px; margin-inline: auto; padding-inline: var(--space-gutter); }
.site-logo { display: inline-flex; align-items: center; gap: 12px; color: var(--color-text-heading); text-decoration: none; }
.site-logo__img { width: 40px; height: 40px; display: block; object-fit: contain; }
.site-logo__name { font-family: var(--font-heading-1-family); font-weight: 700; font-size: 18px; letter-spacing: 0.02em; line-height: 1.1; }
.site-logo__name small { display: block; font-family: var(--font-body-family); font-size: 11px; color: var(--color-text-secondary); letter-spacing: 0.08em; font-weight: 400; margin-top: 2px; }
.site-nav { display: none; }
.site-nav ul { display: flex; gap: var(--space-5); align-items: center; }
.site-nav a { color: var(--color-text-heading); font-weight: 500; font-size: 15px; padding-block: 8px; }
.site-nav a:hover { color: var(--color-ui-primary); text-decoration: none; }
.site-nav__has-sub { position: relative; }
.site-nav__has-sub::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); width: 720px; max-width: 92vw; height: 14px; }
.site-nav__chev { display: inline-block; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin-left: 6px; vertical-align: 2px; }
.site-nav__sub { position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%);
  background: #fff; border: 1px solid var(--color-border-subtle); border-radius: 4px;
  box-shadow: var(--shadow-overlay);
  padding: var(--space-5) var(--space-6); width: 720px; max-width: 92vw;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; gap: var(--space-6);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s var(--easing-default), visibility 0s 0.18s; }
.site-nav__has-sub:hover .site-nav__sub,
.site-nav__has-sub:focus-within .site-nav__sub {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.18s var(--easing-default), visibility 0s 0s; }
.site-nav__sub h4 { font-family: var(--font-heading-1-family);
  font-size: 14px; font-weight: 600; color: var(--color-ui-primary); margin: 0 0 8px;
  padding-bottom: 8px; border-bottom: 1px solid var(--color-border-subtle); letter-spacing: 0.04em; }
.site-nav__sub h4 small { display: block; font-family: var(--font-body-family); font-size: 11px; color: var(--color-text-secondary); letter-spacing: 0.04em; font-weight: 400; margin-top: 2px; }
.site-nav__sub ul { display: block; flex-direction: unset; gap: 0; }
.site-nav__sub li { margin: 0; }
.site-nav__sub a { display: block; padding: 4px 0; font-size: 14px; }
.header-cta { display: none; gap: 10px; align-items: center; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; border-radius: var(--radius-button); font-size: 14px; font-weight: 700; cursor: pointer; border: none; line-height: 1.2; transition: background var(--duration-interaction) var(--easing-default), color var(--duration-interaction) var(--easing-default), transform var(--duration-interaction) var(--easing-default); font-family: var(--font-body-family); }
.btn:hover { transform: translateY(-1px); text-decoration: none; }
.btn--primary { background: var(--color-cta-primary); color: var(--color-text-on-cta); }
.btn--primary:hover { background: var(--color-cta-primary-hover); color: #fff; }

/* 訪問済みリンクで btn 系の文字色が a:visited（紺 #003875）に上書きされる問題を解消（2026-05-04）
   原因: a:visited (specificity 0,1,1) が .btn--primary (0,1,0) より強く、訪問済みボタンの文字が紺色になる
   対策: 各 btn--* に :visited 擬似クラスで color を再指定（specificity 0,2,0 で上回る） */
.btn--primary:visited { color: var(--color-text-on-cta); }
.btn--ui:visited      { color: var(--color-ui-primary-on); }
.btn--ghost:visited   { color: var(--color-text-heading); }

/* ヒーロー内の primary CTA は写真背景の上にあるため文字色を明示で白に固定（2026-05-04）
   理由: --color-text-on-cta が一部コンテキストで青系に解決される事象への対処（job-training で発覚） */
.svc-hero .btn--primary,
.adv-hero .btn--primary,
.svc-d-hero .btn--primary,
.hb-hero .btn--primary,
.tc-hero .btn--primary,
.rec-hero .btn--primary,
.svc-hero .btn--primary:hover,
.adv-hero .btn--primary:hover,
.svc-d-hero .btn--primary:hover,
.hb-hero .btn--primary:hover,
.tc-hero .btn--primary:hover,
.rec-hero .btn--primary:hover,
.svc-hero .btn--primary:visited,
.adv-hero .btn--primary:visited,
.svc-d-hero .btn--primary:visited,
.hb-hero .btn--primary:visited,
.tc-hero .btn--primary:visited,
.rec-hero .btn--primary:visited { color: #fff; }

.btn--ui { background: var(--color-ui-primary); color: var(--color-ui-primary-on); }
.btn--ui:hover { background: var(--color-ui-primary-hover); color: #fff; }
.btn--ghost { background: transparent; color: var(--color-text-heading); border: 1.5px solid var(--color-border-default); }
.btn--ghost:hover { border-color: var(--color-ui-primary); color: var(--color-ui-primary); background: var(--color-ui-primary-subtle); }
.btn--lg { padding: 16px 28px; font-size: 16px; }
.btn--xl { padding: 18px 32px; font-size: 17px; }
.btn__arrow { display: inline-block; transition: transform var(--duration-interaction) var(--easing-default); }
.btn:hover .btn__arrow { transform: translateX(3px); }
.hamburger { display: inline-flex; flex-direction: column; gap: 5px; padding: 10px; background: transparent; border: 1px solid var(--color-border-default); border-radius: 4px; cursor: pointer; }
.hamburger span { display: block; width: 22px; height: 2px; background: var(--color-text-heading); }
@media (min-width: 1024px) {
  .site-nav { display: block; }
  .header-cta { display: flex; }
  .hamburger { display: none; }
}
.hero { position: relative; isolation: isolate;
  height: 100vh;
  min-height: 640px;
  display: grid;
  grid-template-rows: 1fr auto;
  padding-top: 72px;
  overflow: hidden;
  color: #fff; }
.hero__slides { position: absolute; inset: 0; z-index: -2; }
.hero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s var(--easing-default); }
.hero__slide.is-active { opacity: 1; }
.hero__slide img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero__overlay { position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(0,20,55,0.40) 0%, rgba(0,20,55,0.10) 35%, rgba(0,15,45,0.86) 100%),
    radial-gradient(ellipse 72% 55% at center 72%, rgba(0,15,45,0.62) 0%, transparent 72%); }
.hero__inner { align-self: end;
  width: 100%;
  padding: 0 0 clamp(96px, 14vh, 160px);
  text-align: center; }
.hero__container { max-width: 1100px; margin-inline: auto;
  padding-inline: clamp(20px, 6vw, 64px); }
.hero__h1 { font-family: var(--font-heading-1-family);
  font-weight: 800;
  /* SP min を 44px → 32px に下げる（2026-05-04）
     理由: 「障がい者雇用を、」(8 文字) が SP 幅で 1 行に収まらず「を」が次行に折れる問題への対処。
     PC 側は vw / max が変わらないため見た目変化なし。 */
  font-size: clamp(32px, 7.5vw, 100px);
  line-height: 1.16;
  letter-spacing: 0.01em;
  color: #fff;
  margin: 0 0 32px;
  text-shadow:
    0 2px 12px rgba(0,15,45,0.55),
    0 8px 48px rgba(0,15,45,0.45),
    0 1px 0 rgba(0,0,0,0.35); }
.hero__sub { font-family: var(--font-heading-1-family);
  font-size: clamp(19px, 2.1vw, 28px);
  font-weight: 500;
  line-height: 1.7;
  color: #fff;
  margin: 0 auto;
  max-width: 38em;
  text-shadow:
    0 2px 12px rgba(0,15,45,0.5),
    0 4px 24px rgba(0,15,45,0.35); }
.hero__dots { position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; align-items: center; z-index: 2; }
.hero__dot { width: 28px; height: 4px; border: 0; padding: 0; cursor: pointer;
  background: rgba(255,255,255,0.4); border-radius: 2px;
  transition: background var(--duration-interaction) var(--easing-default), width var(--duration-interaction) var(--easing-default); }
.hero__dot.is-active { background: #fff; width: 44px; }
.hero__dot:hover { background: rgba(255,255,255,0.7); }
.hero__scroll { position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-body-family); color: rgba(255,255,255,0.85);
  font-size: 12px; letter-spacing: 0.16em;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-decoration: none; }
.hero__scroll-line { width: 1px; height: 40px; background: rgba(255,255,255,0.6); animation: scrollLine 2.4s var(--easing-default) infinite; transform-origin: top; }
@keyframes scrollLine {
  0% { transform: scaleY(0); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
  51% { transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}
.section { padding-block: var(--space-section-y); }
.section--alt { background: var(--color-bg-subtle); }
.section--ink { background: linear-gradient(135deg, var(--color-blue-900) 0%, var(--color-blue-950) 100%);
  color: #fff; }
.eyebrow::before { content: ""; position: absolute; left: 0; top: 50%;
  width: 18px; height: 1px;
  background: currentColor; }
.section--ink .eyebrow { color: var(--color-blue-200); }
.section-title em { font-style: italic; font-family: 'Fraunces', serif; font-weight: 500;
  font-variation-settings: "opsz" 144;
  color: var(--color-ui-primary); }
.section--ink .section-title { color: #fff; }
.section--ink .section-lead { color: rgba(255,255,255,0.92); }
.philosophy { padding-block: clamp(96px, 12vh, 160px);
  background: linear-gradient(180deg, #fff 0%, var(--color-blue-50) 100%);
  position: relative; }
.philosophy__inner { text-align: center; max-width: 880px; margin-inline: auto; padding-inline: var(--space-gutter); }
.philosophy__pyramid { width: 100%;
  max-width: 720px;
  height: auto;
  margin: 40px auto 56px;
  display: block; }
.philosophy__lead { font-size: 17px;
  line-height: 1.95;
  color: var(--color-text-body);
  max-width: 760px;
  margin: 0 auto 36px;
  text-align: justify;
  text-justify: inter-character; }
.philosophy__lead br { display: none; }
@media (min-width: 1024px) {
  .philosophy__lead { text-align: center; }
  .philosophy__lead br { display: inline; }
}
.philosophy__link { display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; color: var(--color-ui-primary);
  font-size: 16px;
  border-bottom: 2px solid var(--color-ui-primary);
  padding-bottom: 4px;
  letter-spacing: 0.02em; }
.philosophy__link:hover { color: var(--color-cta-primary); border-color: var(--color-cta-primary); text-decoration: none; }
.business-grid { display: grid; gap: 28px;
  grid-template-columns: 1fr;
  margin-top: 56px; }
@media (min-width: 768px) { .business-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .business-grid { grid-template-columns: repeat(3, 1fr); } }
.biz-card { background: #fff;
  border: 1px solid var(--color-border-subtle);
  border-radius: 4px;
  display: flex; flex-direction: column;
  overflow: hidden;
  transition: transform var(--duration-transition) var(--easing-default), box-shadow var(--duration-transition) var(--easing-default), border-color var(--duration-transition) var(--easing-default); }
.biz-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-elevated); border-color: var(--color-blue-200); }
.biz-card__media { aspect-ratio: 16/10; overflow: hidden; background: var(--color-bg-subtle); }
.biz-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.7s var(--easing-default), filter 0.7s var(--easing-default); filter: saturate(0.85) brightness(0.96); }
.biz-card:hover .biz-card__media img { filter: saturate(1) brightness(1); }
.biz-card:hover .biz-card__media img { transform: scale(1.04); }
.biz-card__body { padding: 32px 28px 28px; display: flex; flex-direction: column; flex-grow: 1; }
.biz-card__category { font-family: var(--font-body-family); font-size: 12px; letter-spacing: 0.16em; font-weight: 700;
  color: var(--color-text-secondary); margin: 0 0 10px; }
.biz-card__title { font-family: var(--font-heading-3-family);
  font-size: 22px; font-weight: 700;
  margin: 0 0 12px; color: var(--color-text-heading); }
.biz-card__sub { font-size: 15px; line-height: 1.7; color: var(--color-text-body);
  margin: 0 0 16px;
  border-bottom: 1px solid var(--color-border-subtle); padding-bottom: 16px; }
.biz-card__note { font-size: 13px; color: var(--color-text-secondary);
  background: var(--color-bg-subtle);
  padding: 8px 12px; border-radius: 3px;
  margin-bottom: 16px; }
.biz-card__list { font-size: 14px; line-height: 1.9; color: var(--color-text-body); margin: 0 0 24px; flex-grow: 1; }
.biz-card__list li { padding-left: 18px; position: relative; }
.biz-card__list li::before { content: ""; position: absolute; left: 0; top: 12px;
  width: 8px; height: 1px; background: var(--color-text-muted); }
.biz-card__cta { font-weight: 700; color: var(--color-ui-primary); display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; }
.biz-card__cta:hover { color: var(--color-cta-primary); text-decoration: none; }
.stages { background: var(--color-bg-subtle);
  padding-block: var(--space-section-y);
  position: relative; }
.stages__bridge { font-size: 17px; line-height: 1.95; color: var(--color-text-body);
  max-width: 820px; margin: 24px 0 56px; }
.stages__grid { display: grid; gap: 20px;
  grid-template-columns: 1fr;
  position: relative; }
@media (min-width: 640px) { .stages__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .stages__grid { grid-template-columns: repeat(4, 1fr); gap: 16px; } }
.stage { background: #fff; border: 1px solid var(--color-border-subtle); border-radius: 4px;
  padding: 32px 24px;
  position: relative;
  display: flex; flex-direction: column; gap: 12px; }
.stage__num { font-family: 'Fraunces', 'Noto Serif JP', serif;
  font-style: italic; font-weight: 500;
  font-size: clamp(40px, 4vw, 56px);
  font-variation-settings: "opsz" 144;
  color: var(--color-brand-symbol);
  line-height: 1; letter-spacing: 0; }
.stage__phase { font-size: 12px; letter-spacing: 0.14em; font-weight: 700; text-transform: uppercase;
  color: var(--color-text-secondary); }
.stage__title { font-family: var(--font-heading-3-family);
  font-size: 18px; font-weight: 700; line-height: 1.5;
  color: var(--color-text-heading); }
.stage__desc { font-size: 14px; line-height: 1.7; color: var(--color-text-body); }
.stage__service { font-size: 12px; font-weight: 700;
  color: var(--color-ui-primary);
  background: var(--color-ui-primary-subtle);
  padding: 4px 10px; border-radius: var(--radius-tag);
  align-self: flex-start; }
.stages__arrow { display: none; position: absolute; top: 50%; right: -10px; width: 12px; height: 12px; border-top: 2px solid var(--color-blue-300); border-right: 2px solid var(--color-blue-300); transform: translateY(-50%) rotate(45deg); }
@media (min-width: 1024px) { .stage:not(:last-child) .stages__arrow { display: block; } }
.stages__footnote { font-size: 13px; color: var(--color-text-secondary);
  margin-top: 24px; padding: 14px 18px;
  background: rgba(255,255,255,0.6);
  border-radius: 3px; }
.fields { background: #fff;
  padding-block: var(--space-section-y); }
.fields__bridge { font-family: var(--font-heading-2-family);
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 600; line-height: 1.5; color: var(--color-text-heading);
  letter-spacing: 0.02em;
  max-width: 720px; margin: 0 0 12px; }
.fields__bridge strong { color: var(--color-ui-primary);
  font-weight: 600; }
.fields__bridge-sub { color: var(--color-text-secondary); font-size: 15px;
  margin-bottom: 56px;
  max-width: 760px; }
.fields__grid { display: grid; gap: 24px;
  grid-template-columns: 1fr; }
@media (min-width: 768px) { .fields__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1280px) { .fields__grid { grid-template-columns: repeat(4, 1fr); gap: 20px; } }
.field { background: #fff;
  display: flex; flex-direction: column;
  border-radius: 4px;
  overflow: hidden;
  transition: transform var(--duration-transition) var(--easing-default), box-shadow var(--duration-transition) var(--easing-default); }
.field:hover { transform: translateY(-3px); box-shadow: var(--shadow-elevated); }
.field__media { aspect-ratio: 4/3; overflow: hidden; background: var(--color-bg-subtle); }
.field__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.7s var(--easing-default); }
.field:hover .field__media img { transform: scale(1.05); }
.field__body { padding: 24px 22px 28px; flex-grow: 1; display: flex; flex-direction: column; gap: 12px; }
.field__title { font-family: var(--font-heading-3-family);
  font-size: 17px; font-weight: 700; line-height: 1.5; color: var(--color-text-heading);
  margin: 0; }
.field__desc { font-size: 14px; line-height: 1.85; color: var(--color-text-body); margin: 0; }
.stats { background: var(--color-bg-subtle);
  padding-block: var(--space-section-y); }
.stats__grid { display: grid; gap: 24px;
  grid-template-columns: repeat(2, 1fr);
  margin-top: 48px; }
@media (min-width: 1024px) { .stats__grid { grid-template-columns: repeat(4, 1fr); gap: 32px; } }
.stat { text-align: center;
  padding: 28px 16px;
  border-top: 4px solid var(--color-brand-symbol);
  background: #fff;
  border-radius: 0 0 4px 4px; }
.stat:nth-child(2) { border-top-color: var(--color-blue-700); }
.stat:nth-child(3) { border-top-color: var(--color-accent-emphasis); }
.stat:nth-child(4) { border-top-color: var(--color-state-success); }
.stat__num { font-family: 'Fraunces', 'Noto Serif JP', serif;
  font-weight: 500;
  font-size: clamp(40px, 5.6vw, 72px);
  font-variation-settings: "opsz" 144;
  line-height: 1; letter-spacing: 0;
  color: var(--color-text-heading);
  margin: 0 0 12px; }
.stat__label { font-size: 13px; line-height: 1.6; color: var(--color-text-secondary);
  font-weight: 500; }
.perspectives { background: #fff;
  padding-block: var(--space-section-y); }
.perspectives__grid { display: grid; gap: 32px;
  grid-template-columns: 1fr;
  margin-top: 48px; }
@media (min-width: 768px) { .perspectives__grid { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.persp { display: flex; flex-direction: column; gap: 16px;
  background: #fff;
  padding: 8px 0 32px;
  position: relative;
  border-top: 1px solid var(--color-border-subtle); }
.persp__label { display: inline-flex; align-items: baseline; gap: 12px;
  font-family: var(--font-body-family); font-size: 12px; letter-spacing: 0.18em; font-weight: 700;
  color: var(--color-ui-primary);
  text-transform: uppercase;
  margin-top: 24px; }
.persp__label::before { content: attr(data-num);
  font-family: 'Fraunces', 'Noto Serif JP', serif;
  font-style: italic; font-weight: 500;
  font-size: 28px;
  font-variation-settings: "opsz" 144;
  color: var(--color-text-heading);
  letter-spacing: 0; }
.persp:nth-child(2) .persp__label::before { color: var(--color-blue-700); }
.persp:nth-child(3) .persp__label::before { color: var(--color-accent-emphasis); }
.persp__title { font-family: var(--font-heading-3-family);
  font-size: 22px; font-weight: 700; line-height: 1.4; color: var(--color-text-heading);
  margin: -4px 0 0; }
.persp__role { font-size: 13px; color: var(--color-text-secondary); margin: 0; font-weight: 500; }
.persp__desc { font-size: 14px; line-height: 1.85; color: var(--color-text-body); margin: 0; }
.perspectives__footnote { font-size: 13px; color: var(--color-text-secondary);
  background: var(--color-bg-subtle);
  padding: 16px 20px; border-radius: 3px;
  margin-top: 36px;
  line-height: 1.8;
  text-align: center; }
.ceo { background: linear-gradient(135deg, var(--color-blue-900) 0%, var(--color-blue-950) 100%);
  color: #fff;
  padding-block: var(--space-section-y); }
.ceo__inner { display: grid; gap: 48px;
  grid-template-columns: 1fr;
  align-items: center;
  max-width: 1200px; margin-inline: auto; padding-inline: var(--space-gutter); }
@media (min-width: 1024px) { .ceo__inner { grid-template-columns: 0.4fr 0.6fr; gap: 64px; } }
.ceo__photo { position: relative;
  aspect-ratio: 1 / 1;
  max-width: 360px;
  margin-inline: auto;
  background: linear-gradient(160deg, var(--color-blue-700) 0%, var(--color-blue-900) 100%);
  border-radius: 4px;
  overflow: hidden; }
.ceo__photo img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
.ceo__photo::after { content: ""; position: absolute; left: -16px; bottom: -16px; width: 80px; height: 80px;
  background: var(--color-cta-primary);
  z-index: -1; }
.ceo__eyebrow { font-family: var(--font-body-family); font-size: 12px; letter-spacing: 0.18em; font-weight: 700;
  color: var(--color-blue-200); margin-bottom: 18px;
  display: inline-block; }
.ceo__name { font-family: var(--font-heading-1-family);
  font-size: clamp(28px, 3.4vw, 38px); font-weight: 600;
  letter-spacing: 0.04em;
  color: #fff;
  margin: 0 0 6px; }
.ceo__role { color: var(--color-blue-200); font-size: 14px; margin: 0 0 28px; }
.ceo__quote { font-family: var(--font-heading-1-family);
  font-size: clamp(17px, 1.7vw, 20px);
  line-height: 1.95; color: #fff;
  margin: 0 0 32px; }
.ceo__cta { color: #fff; border-bottom: 2px solid var(--color-brand-symbol); padding-bottom: 4px; font-weight: 700; }
.ceo__cta:hover { color: var(--color-brand-symbol); border-color: var(--color-cta-primary); text-decoration: none; }
.news { padding-block: var(--space-section-y); background: #fff; }
.news__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 40px; }
.news__head h2 { margin: 0; }
.news__more { font-weight: 700; color: var(--color-ui-primary); display: inline-flex; align-items: center; gap: 6px; }
.news__more:hover { color: var(--color-cta-primary); text-decoration: none; }
.news__list { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 768px) { .news__list { grid-template-columns: repeat(3, 1fr); } }
.news-card:hover { border-color: var(--color-blue-300); transform: translateY(-2px); text-decoration: none; }
.news-card__cat { font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  padding: 3px 10px; border-radius: var(--radius-pill);
  border: 1px solid currentColor;
  color: var(--color-ui-primary);
  background: var(--color-ui-primary-subtle); }
.news-card__cat--press { color: var(--color-ui-primary); background: var(--color-ui-primary-subtle); }
.news-card__cat--media { color: var(--color-blue-700); background: var(--color-blue-50); }
.news-card__cat--event { color: var(--color-cta-primary); background: #FFF3E6; }
.news-card__cat--recruit-info { color: var(--color-state-success); background: #DCFCE7; }
.news-card__cat--oshirase { color: var(--color-text-body); background: var(--color-bg-subtle); }
.bottom-cta { position: relative; isolation: isolate;
  padding-block: clamp(80px, 10vh, 120px);
  background: var(--color-blue-950);
  color: #fff;
  overflow: hidden; }
.bottom-cta::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(30,144,255,0.32), transparent 55%),
    radial-gradient(ellipse at 80% 70%, rgba(213,94,0,0.18), transparent 50%); }
.bottom-cta__inner { max-width: 1100px; margin-inline: auto; padding-inline: var(--space-gutter); text-align: center; }
.bottom-cta .btn--ghost { color: #fff; border-color: rgba(255,255,255,0.4); background: transparent; }
.bottom-cta .btn--ghost:hover { background: rgba(255,255,255,0.08); border-color: #fff; color: #fff; }
.site-footer { background: #001A3D; color: rgba(255,255,255,0.78); padding-block: 64px 32px; font-size: 14px; }
.site-footer__grid { display: grid; gap: 40px;
  grid-template-columns: 1fr;
  max-width: 1320px; margin-inline: auto; padding-inline: var(--space-gutter); }
@media (min-width: 768px) { .site-footer__grid { grid-template-columns: 1.2fr 1fr 1.4fr 1fr; } }
.site-footer h4,
.site-footer__heading { font-family: var(--font-body-family); font-size: 13px; letter-spacing: 0.14em; font-weight: 700;
  color: var(--color-blue-200);
  margin: 0 0 14px;
  padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,0.12); }
.site-footer ul li { margin-bottom: 8px; }
.site-footer a { color: rgba(255,255,255,0.78); }
.site-footer a:hover { color: #fff; }
.site-footer__brand { display: flex; flex-direction: column; gap: 14px; }
.site-footer__name { font-family: var(--font-heading-1-family); color: #fff; font-size: 16px; font-weight: 600; letter-spacing: 0.02em; }
.site-footer__address { font-size: 13px; line-height: 1.85; color: rgba(255,255,255,0.7); }
.site-footer__sub-heading { display: block; margin-top: 14px; font-size: 11px; letter-spacing: 0.12em; font-weight: 700;
  color: var(--color-blue-300); }
.site-footer__bottom { margin-top: 56px; padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.12);
  max-width: 1320px; margin-inline: auto; padding-inline: var(--space-gutter);
  display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between;
  font-size: 12px; color: rgba(255,255,255,0.55); }
@media (prefers-reduced-motion: reduce) {
  .hero__slide { transition: none; }
  .hero__scroll-line { animation: none; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* --- from comp-philosophy.html --- */
.site-nav a.is-active { color: var(--color-ui-primary);
  border-bottom: 2px solid var(--color-ui-primary);
  padding-bottom: 6px;
  font-weight: 700; }
.phi-hero { position: relative; isolation: isolate;
  padding: clamp(140px, 18vh, 220px) 0 clamp(72px, 9vh, 120px);
  background: linear-gradient(135deg, var(--color-blue-900) 0%, var(--color-blue-950) 100%);
  color: #fff;
  overflow: hidden; }
.phi-hero::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 60% 50% at 22% 28%, rgba(30,144,255,0.18), transparent 70%),
    radial-gradient(ellipse 70% 55% at 80% 78%, rgba(0,95,196,0.22), transparent 70%); }
.phi-hero__deco { position: absolute; left: 50%; transform: translateX(-50%);
  width: min(720px, 86%);
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.18) 50%, transparent 100%); }
.phi-hero__deco--top { top: clamp(96px, 12vh, 140px); }
.phi-hero__deco--bottom { bottom: clamp(48px, 6vh, 80px); }
.phi-hero__inner { max-width: 880px; margin-inline: auto;
  padding-inline: var(--space-gutter);
  text-align: center;
  position: relative; }
.phi-hero__eyebrow { display: inline-block;
  font-family: var(--font-body-family);
  font-size: 13px; font-weight: 700; letter-spacing: 0.32em;
  color: var(--color-blue-200);
  margin-bottom: 24px; }
.phi-hero__h1 { font-family: var(--font-heading-1-family);
  font-weight: 700;
  font-size: clamp(40px, 6.4vw, 72px);
  line-height: 1.2;
  letter-spacing: 0.04em;
  color: #fff;
  margin: 0 0 28px;
  text-shadow:
    0 2px 12px rgba(0,15,45,0.45),
    0 6px 32px rgba(0,15,45,0.30); }
.phi-hero__lead { font-family: var(--font-heading-1-family);
  font-size: clamp(16px, 1.7vw, 19px);
  font-weight: 400;
  line-height: 1.95;
  color: rgba(255,255,255,0.94);
  margin: 0 auto;
  max-width: 36em;
  text-shadow: 0 2px 10px rgba(0,15,45,0.35); }
.phi-pyramid { background: linear-gradient(180deg, #fff 0%, var(--color-blue-50) 100%);
  padding-block: clamp(80px, 10vh, 128px); }
.phi-pyramid__inner { max-width: 1200px; margin-inline: auto;
  padding-inline: var(--space-gutter);
  text-align: center; }
.phi-pyramid__svg { width: 100%;
  max-width: 720px;
  height: auto;
  margin: 40px auto 32px;
  display: block; }
.phi-pyramid__caption { font-size: 15px;
  line-height: 1.9;
  color: var(--color-text-secondary);
  max-width: 640px;
  margin: 0 auto; }
.phi-logic { background: #fff;
  padding-block: clamp(64px, 8vh, 96px); }
.phi-logic__inner { max-width: 1200px; margin-inline: auto;
  padding-inline: var(--space-gutter);
  display: grid;
  gap: 48px;
  grid-template-columns: 1fr;
  align-items: start; }
@media (min-width: 1024px) {
  .phi-logic__inner { grid-template-columns: 1fr 240px; gap: 64px; }
}
.phi-logic__body { max-width: 720px; }
.phi-logic__title { font-family: var(--font-heading-1-family);
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0.02em;
  color: var(--color-text-heading);
  margin: 0 0 28px; }
.phi-logic__text { font-size: 16px;
  line-height: 1.95;
  color: var(--color-text-body);
  margin: 0; }
.phi-flow { display: none;
  width: 240px; }
@media (min-width: 1024px) {
  .phi-flow { display: block; }
}
.phi-flow__svg { width: 100%;
  height: auto; }
.phi-corevalue { background: var(--color-bg-subtle);
  padding-block: clamp(80px, 10vh, 128px); }
.phi-corevalue__inner { max-width: 1200px; margin-inline: auto;
  padding-inline: var(--space-gutter);
  display: grid;
  gap: 48px;
  grid-template-columns: 1fr; }
@media (min-width: 1024px) {
  .phi-corevalue__inner { grid-template-columns: 0.85fr 1.15fr; gap: 64px; align-items: start; }
}
.phi-corevalue__title { font-family: var(--font-heading-1-family);
  font-size: clamp(28px, 3.6vw, 38px);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.03em;
  color: var(--color-text-heading);
  margin: 0 0 24px; }
.phi-corevalue__title small { display: block;
  position: relative;
  font-family: var(--font-body-family);
  font-size: 13px; font-weight: 700; letter-spacing: 0.22em;
  color: var(--color-ui-primary);
  margin-bottom: 12px;
  padding-left: 28px; }
.phi-corevalue__title small::before { content: ""; position: absolute; left: 0; top: 50%;
  width: 18px; height: 1px;
  background: currentColor; }
.phi-corevalue__def { font-size: 16px;
  line-height: 1.95;
  color: var(--color-text-body);
  margin: 0; }
.phi-corevalue__list { display: grid; gap: 20px; }
.cv-item { display: grid;
  grid-template-columns: 32px 1fr;
  gap: 18px;
  padding: 20px 22px;
  background: #fff;
  border-radius: 4px;
  border: 1px solid var(--color-border-subtle); }
.cv-item__icon { width: 24px; height: 24px;
  margin-top: 4px;
  color: var(--color-ui-primary); }
.cv-item__head { font-family: var(--font-heading-3-family);
  font-size: 16px; font-weight: 700; line-height: 1.5;
  color: var(--color-text-heading);
  margin: 0 0 6px; }
.cv-item__head .cv-item__num { font-family: 'Fraunces', 'Noto Serif JP', serif;
  font-style: italic; font-weight: 500;
  font-variation-settings: "opsz" 144;
  color: var(--color-ui-primary);
  margin-right: 8px;
  font-size: 1.1em;
  letter-spacing: 0; }
.cv-item__desc { font-size: 14px; line-height: 1.85; color: var(--color-text-body);
  margin: 0; }
.phi-purpose { background: #fff;
  padding-block: clamp(80px, 10vh, 128px); }
.phi-purpose__inner { max-width: 1200px; margin-inline: auto;
  padding-inline: var(--space-gutter);
  display: grid;
  gap: 48px;
  grid-template-columns: 1fr;
  align-items: center; }
@media (min-width: 1024px) {
  .phi-purpose__inner { grid-template-columns: 1fr 1fr; gap: 64px; }
}
.phi-purpose__media { order: -1; }
@media (min-width: 1024px) {
  .phi-purpose__media { order: 0; }
}
.phi-purpose__media picture,
.phi-purpose__media img { width: 100%; height: 100%;
  display: block;
  border-radius: 4px;
  overflow: hidden;
  object-fit: cover;
  aspect-ratio: 4 / 3; }
.phi-purpose__title { font-family: var(--font-heading-1-family);
  font-size: clamp(26px, 3.3vw, 34px);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.03em;
  color: var(--color-text-heading);
  margin: 0 0 24px; }
.phi-purpose__title small { display: block;
  position: relative;
  font-family: var(--font-body-family);
  font-size: 13px; font-weight: 700; letter-spacing: 0.22em;
  color: var(--color-ui-primary);
  margin-bottom: 12px;
  padding-left: 28px; }
.phi-purpose__title small::before { content: ""; position: absolute; left: 0; top: 50%;
  width: 18px; height: 1px;
  background: currentColor; }
.phi-purpose__text { font-size: 16px;
  line-height: 1.95;
  color: var(--color-text-body);
  margin: 0; }
.phi-mission { background: var(--color-bg-subtle);
  padding-block: clamp(80px, 10vh, 128px); }
.phi-mission__inner { max-width: 760px; margin-inline: auto;
  padding-inline: var(--space-gutter); }
.phi-mission__title { font-family: var(--font-heading-1-family);
  font-size: clamp(28px, 3.6vw, 38px);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.03em;
  color: var(--color-text-heading);
  margin: 0 0 32px; }
.phi-mission__title small { display: block;
  position: relative;
  font-family: var(--font-body-family);
  font-size: 13px; font-weight: 700; letter-spacing: 0.22em;
  color: var(--color-ui-primary);
  margin-bottom: 12px;
  padding-left: 28px; }
.phi-mission__title small::before { content: ""; position: absolute; left: 0; top: 50%;
  width: 18px; height: 1px;
  background: currentColor; }
.phi-mission__sub { font-family: var(--font-heading-2-family);
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 600;
  line-height: 1.55;
  color: var(--color-text-heading);
  margin: 32px 0 16px;
  letter-spacing: 0.02em; }
.phi-mission__text { font-size: 16px;
  line-height: 1.95;
  color: var(--color-text-body);
  margin: 0 0 16px; }
.phi-mission__chart { margin: 28px auto 8px;
  max-width: 400px;
  text-align: center; }
.phi-mission__chart svg { width: 100%;
  height: auto; }
.phi-mission__chart-caption { font-size: 12px;
  color: var(--color-text-secondary);
  margin-top: 8px;
  letter-spacing: 0.02em; }
.phi-mission__note { font-size: 13px;
  line-height: 1.8;
  color: var(--color-text-secondary);
  background: #fff;
  border-radius: 3px;
  padding: 14px 18px;
  margin-top: 32px; }
.phi-bridge { background: #fff;
  padding-block: clamp(80px, 10vh, 128px); }
.phi-bridge__inner { max-width: 1280px; margin-inline: auto;
  padding-inline: var(--space-gutter); }
.phi-bridge__head { max-width: 760px;
  margin-bottom: 48px; }
.phi-bridge__title { font-family: var(--font-heading-1-family);
  font-size: clamp(28px, 3.6vw, 38px);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.03em;
  color: var(--color-text-heading);
  margin: 0 0 20px; }
.phi-bridge__lead { font-size: 16px;
  line-height: 1.85;
  color: var(--color-text-body);
  margin: 0; }
.phi-bridge__grid { display: grid; gap: 24px;
  grid-template-columns: 1fr;
  margin-bottom: 32px; }
@media (min-width: 768px) { .phi-bridge__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .phi-bridge__grid { grid-template-columns: repeat(3, 1fr); } }
.phi-bridge-card { background: #fff;
  border: 1px solid var(--color-border-subtle);
  border-radius: 4px;
  padding: 32px 28px;
  display: flex; flex-direction: column;
  gap: 14px;
  transition: border-color var(--duration-transition) var(--easing-default), transform var(--duration-transition) var(--easing-default), box-shadow var(--duration-transition) var(--easing-default); }
.phi-bridge-card:hover { border-color: var(--color-blue-300); transform: translateY(-3px); box-shadow: var(--shadow-elevated); }
.phi-bridge-card__icon { width: 40px; height: 40px;
  color: var(--color-ui-primary); }
.phi-bridge-card__category { font-family: var(--font-body-family);
  font-size: 11px; letter-spacing: 0.18em; font-weight: 700;
  color: var(--color-text-secondary);
  margin: 0; }
.phi-bridge-card__title { font-family: var(--font-heading-3-family);
  font-size: 20px; font-weight: 700;
  color: var(--color-text-heading);
  margin: 0; }
.phi-bridge-card__desc { font-size: 14px; line-height: 1.85;
  color: var(--color-text-body);
  margin: 0; }
.phi-bridge__link { display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; color: var(--color-ui-primary);
  font-size: 16px;
  border-bottom: 2px solid var(--color-ui-primary);
  padding-bottom: 4px;
  letter-spacing: 0.02em; }
.phi-bridge__link:hover { color: var(--color-cta-primary); border-color: var(--color-cta-primary); text-decoration: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* --- from comp-about.html --- */
.about-hero { position: relative; isolation: isolate;
  padding: clamp(140px, 18vh, 220px) 0 clamp(72px, 9vh, 120px);
  background: linear-gradient(135deg, var(--color-blue-900) 0%, var(--color-blue-950) 100%);
  color: #fff;
  overflow: hidden; }
.about-hero::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 60% 50% at 28% 32%, rgba(30,144,255,0.18), transparent 70%),
    radial-gradient(ellipse 70% 55% at 76% 76%, rgba(0,95,196,0.22), transparent 70%); }
.about-hero__deco { position: absolute; left: 50%; transform: translateX(-50%);
  width: min(720px, 86%);
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.18) 50%, transparent 100%); }
.about-hero__deco--top { top: clamp(96px, 12vh, 140px); }
.about-hero__deco--bottom { bottom: clamp(48px, 6vh, 80px); }
.about-hero__inner { max-width: 880px; margin-inline: auto;
  padding-inline: var(--space-gutter);
  text-align: center;
  position: relative; }
.about-hero__eyebrow { display: inline-block;
  font-family: var(--font-body-family);
  font-size: 13px; font-weight: 700; letter-spacing: 0.32em;
  color: var(--color-blue-200);
  margin-bottom: 24px; }
.about-hero__h1 { font-family: var(--font-heading-1-family);
  font-weight: 700;
  font-size: clamp(40px, 6.4vw, 72px);
  line-height: 1.2;
  letter-spacing: 0.04em;
  color: #fff;
  margin: 0 0 28px;
  text-shadow:
    0 2px 12px rgba(0,15,45,0.45),
    0 6px 32px rgba(0,15,45,0.30); }
.about-hero__lead { font-family: var(--font-heading-1-family);
  font-size: clamp(15px, 1.55vw, 18px);
  font-weight: 400;
  line-height: 1.95;
  color: rgba(255,255,255,0.94);
  margin: 0 auto;
  max-width: 38em;
  text-shadow: 0 2px 10px rgba(0,15,45,0.35);
  text-align: left; }
.about-message { background: #fff;
  padding-block: clamp(72px, 9vh, 112px); }
.about-message__inner { max-width: 1200px; margin-inline: auto;
  padding-inline: var(--space-gutter); }
.about-message__title { font-family: var(--font-heading-1-family);
  font-size: clamp(26px, 3.3vw, 34px);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.03em;
  color: var(--color-text-heading);
  margin: 0 0 28px;
  max-width: 56em; }
.about-message__text { font-size: 16px;
  line-height: 1.95;
  color: var(--color-text-body);
  margin: 0 0 18px;
  max-width: 56em; }
.about-message__sign { margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--color-border-subtle);
  display: flex;
  align-items: center;
  gap: 18px; }
.about-message__avatar { width: 96px; height: 96px;
  min-width: 96px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  object-fit: contain;
  object-position: center bottom;
  flex-shrink: 0;
  background: linear-gradient(160deg, var(--color-blue-700) 0%, var(--color-blue-900) 100%); }
.about-message__sign-text { display: flex; flex-direction: column; gap: 4px;
  font-family: var(--font-heading-1-family);
  color: var(--color-text-heading); }
.about-message__sign-role { font-size: 13px; font-weight: 500; color: var(--color-text-secondary); letter-spacing: 0.02em; }
.about-message__sign-name { font-size: 18px; font-weight: 600; letter-spacing: 0.12em; }
.about-perspectives { background: var(--color-bg-subtle);
  padding-block: clamp(72px, 9vh, 112px); }
.about-perspectives__inner { max-width: 1200px; margin-inline: auto;
  padding-inline: var(--space-gutter); }
.about-perspectives__head { max-width: 760px;
  margin-bottom: 40px; }
.about-perspectives__grid { display: grid; gap: 24px;
  grid-template-columns: 1fr; }
@media (min-width: 768px) { .about-perspectives__grid { grid-template-columns: repeat(3, 1fr); } }
.persp-card { background: #fff;
  border: 1px solid var(--color-border-subtle);
  border-radius: 4px;
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color var(--duration-transition) var(--easing-default), transform var(--duration-transition) var(--easing-default), box-shadow var(--duration-transition) var(--easing-default); }
.persp-card:hover { border-color: var(--color-blue-300); transform: translateY(-3px); box-shadow: var(--shadow-elevated); }
.persp-card__media { width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-bg-subtle); }
.persp-card__media img { width: 100%; height: 100%;
  object-fit: cover; }
.persp-card__body { padding: 24px 22px 28px;
  display: flex; flex-direction: column; gap: 10px; }
.persp-card__label { font-family: var(--font-body-family);
  font-size: 11px; letter-spacing: 0.18em; font-weight: 700;
  color: var(--color-text-secondary);
  margin: 0; }
.persp-card__title { font-family: var(--font-heading-3-family);
  font-size: 19px; font-weight: 700;
  color: var(--color-text-heading);
  margin: 0;
  letter-spacing: 0.02em; }
.persp-card__role { font-family: var(--font-body-family);
  font-size: 13px; font-weight: 700;
  color: var(--color-ui-primary);
  margin: 0;
  letter-spacing: 0.04em; }
.persp-card__desc { font-size: 14px; line-height: 1.85;
  color: var(--color-text-body);
  margin: 4px 0 0; }
.about-perspectives__note { margin-top: 32px;
  font-size: 13px; line-height: 1.85;
  color: var(--color-text-secondary);
  background: #fff;
  border-radius: 3px;
  padding: 14px 18px;
  max-width: 880px; }
.about-overview { background: #fff;
  padding-block: clamp(72px, 9vh, 112px); }
.about-overview__inner { max-width: 1200px; margin-inline: auto;
  padding-inline: var(--space-gutter); }
.about-overview__head { margin-bottom: 32px; }
.about-overview__table { width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.85;
  margin-bottom: 24px; }
.about-overview__table th,
.about-overview__table td { text-align: left;
  vertical-align: top;
  padding: 16px 18px;
  border-bottom: 1px solid var(--color-border-subtle); }
.about-overview__table th { width: 200px;
  font-family: var(--font-body-family);
  font-weight: 700;
  color: var(--color-text-heading);
  background: var(--color-bg-subtle);
  letter-spacing: 0.02em; }
.about-overview__table td { color: var(--color-text-body); }
.about-overview__table tr:last-child th,
.about-overview__table tr:last-child td { border-bottom: 1px solid var(--color-border-subtle); }
@media (max-width: 640px) {
  .about-overview__table,
  .about-overview__table tbody,
  .about-overview__table tr,
  .about-overview__table th,
  .about-overview__table td { display: block; width: 100%; }
  .about-overview__table th {
    border-bottom: none;
    padding: 14px 16px 6px;
  }
  .about-overview__table td {
    padding: 0 16px 14px;
  }
}
.about-map { width: 100%;
  height: 320px;
  border: 0;
  border-radius: 4px;
  margin-top: 8px;
  background: var(--color-bg-subtle); }
.about-history { background: var(--color-bg-subtle);
  padding-block: clamp(72px, 9vh, 112px); }
.about-history__inner { max-width: 1200px; margin-inline: auto;
  padding-inline: var(--space-gutter); }
.about-history__head { margin-bottom: 40px; }
.about-history__list { position: relative;
  display: grid;
  gap: 28px;
  padding-left: 32px;
  list-style: none; }
.about-history__list::before { content: "";
  position: absolute;
  left: 8px; top: 8px; bottom: 8px;
  width: 2px;
  background: var(--color-blue-200);
  border-radius: 1px; }
.history-item { position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px; }
@media (min-width: 640px) {
  .history-item { grid-template-columns: 140px 1fr; gap: 24px; align-items: start; }
}
.history-item::before { content: "";
  position: absolute;
  left: -32px;
  top: 6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--color-ui-primary);
  box-shadow: 0 0 0 4px var(--color-bg-subtle); }
.history-item__date { font-family: var(--font-heading-1-family);
  font-size: 15px;
  font-weight: 700;
  color: var(--color-ui-primary);
  letter-spacing: 0.04em;
  padding-top: 2px; }
.history-item__text { font-size: 15px;
  line-height: 1.9;
  color: var(--color-text-body);
  margin: 0; }
.about-affiliated { background: #fff;
  padding-block: clamp(72px, 9vh, 112px); }
.about-affiliated__inner { max-width: 880px; margin-inline: auto;
  padding-inline: var(--space-gutter); }
.about-affiliated__head { margin-bottom: 32px; }
.about-affiliated__lead { font-size: 16px;
  line-height: 1.95;
  color: var(--color-text-body);
  margin: 0 0 32px; }
.kcp-card { background: #fff;
  border: 1px solid var(--color-border-subtle);
  border-radius: 4px;
  padding: 32px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: center; }
@media (min-width: 768px) {
  .kcp-card { grid-template-columns: 200px 1fr; gap: 36px; }
}
.kcp-card__logo { width: 100%;
  max-width: 200px;
  margin-inline: auto;
  background: #fff;
  border-radius: 4px;
  padding: 12px;
  border: 1px solid var(--color-border-subtle); }
.kcp-card__logo img { width: 100%;
  height: auto;
  display: block; }
.kcp-card__title-row { font-family: var(--font-body-family);
  font-size: 11px; letter-spacing: 0.22em; font-weight: 700;
  color: var(--color-ui-primary);
  margin: 0 0 6px; }
.kcp-card__name { font-family: var(--font-heading-1-family);
  font-size: 20px; font-weight: 700;
  color: var(--color-text-heading);
  margin: 0 0 6px;
  letter-spacing: 0.02em; }
.kcp-card__market { font-family: var(--font-body-family);
  font-size: 13px;
  color: var(--color-text-secondary);
  margin: 0 0 14px;
  letter-spacing: 0.02em; }
.kcp-card__desc { font-size: 14px;
  line-height: 1.9;
  color: var(--color-text-body);
  margin: 0 0 16px; }
.kcp-card__link { display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; color: var(--color-ui-primary);
  font-size: 14px;
  border-bottom: 2px solid var(--color-ui-primary);
  padding-bottom: 2px;
  letter-spacing: 0.02em; }
.kcp-card__link:hover { color: var(--color-cta-primary); border-color: var(--color-cta-primary); text-decoration: none; }
.about-access { background: var(--color-bg-subtle);
  padding-block: clamp(72px, 9vh, 112px); }
.about-access__inner { max-width: 1140px; margin-inline: auto;
  padding-inline: var(--space-gutter);
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr;
  align-items: start; }
@media (min-width: 1024px) {
  .about-access__inner { grid-template-columns: 1fr 1.2fr; gap: 48px; }
}
.about-access__head { margin-bottom: 8px; }
.about-access__list { display: grid;
  gap: 18px;
  font-size: 15px;
  line-height: 1.85; }
.about-access__list dt { font-family: var(--font-body-family);
  font-size: 11px; letter-spacing: 0.18em; font-weight: 700;
  color: var(--color-text-secondary);
  margin-bottom: 4px; }
.about-access__list dd { margin: 0;
  color: var(--color-text-body); }
.about-access__map { width: 100%;
  height: 320px;
  border: 0;
  border-radius: 4px;
  background: #fff; }

/* --- from comp-services-index.html --- */
.svc-hero { position: relative; isolation: isolate;
  padding: clamp(132px, 17vh, 200px) 0 clamp(56px, 7vh, 96px);
  background: linear-gradient(135deg, var(--color-blue-900) 0%, var(--color-blue-950) 100%);
  color: #fff;
  overflow: hidden; }
.svc-hero::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 60% 50% at 28% 32%, rgba(30,144,255,0.18), transparent 70%),
    radial-gradient(ellipse 70% 55% at 76% 76%, rgba(0,95,196,0.22), transparent 70%); }
.svc-hero__deco { position: absolute; left: 50%; transform: translateX(-50%);
  width: min(720px, 86%);
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.18) 50%, transparent 100%); }
.svc-hero__deco--top { top: clamp(96px, 12vh, 140px); }
.svc-hero__deco--bottom { bottom: clamp(40px, 5vh, 72px); }
.svc-hero__eyebrow { display: inline-block;
  font-family: var(--font-body-family);
  font-size: 13px; font-weight: 700; letter-spacing: 0.32em;
  color: var(--color-blue-200);
  margin-bottom: 24px; }
.svc-area { padding-block: clamp(72px, 9vh, 112px); }
.svc-area--employment { background: #fff; }
.svc-area--dx { background: var(--color-bg-subtle); }
.svc-area--education { background: #fff; }
.svc-area__head { max-width: 880px;
  margin-bottom: 36px; }
.svc-area__head--center { text-align: center; margin-inline: auto; max-width: 720px; }
.svc-area__head--center .eyebrow { padding-left: 28px; }
.svc-area__label { display: inline-flex; align-items: baseline; gap: 14px;
  font-family: var(--font-heading-1-family);
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: 12px; }
.svc-area__label-ja { font-size: clamp(24px, 3vw, 30px);
  color: var(--color-text-heading); }
.svc-area__label-en { font-family: 'Fraunces', serif;
  font-style: italic;
  font-variation-settings: "opsz" 144;
  font-size: 14px; font-weight: 500;
  color: var(--color-ui-primary);
  letter-spacing: 0.18em; }
.svc-area__sub { font-family: var(--font-heading-2-family);
  font-size: clamp(18px, 2.1vw, 22px);
  font-weight: 600;
  line-height: 1.55;
  color: var(--color-text-heading);
  margin: 0 0 18px; }
.svc-area__bridge { font-size: 15px; line-height: 1.9;
  color: var(--color-text-body);
  margin: 0;
  max-width: 760px; }
.svc-note-separate { margin: 0 0 32px;
  padding: 18px 0;
  background: transparent;
  border-left: none;
  border-radius: 0;
  border-top: 1px solid var(--color-border-subtle);
  border-bottom: 1px solid var(--color-border-subtle);
  font-size: 14px;
  line-height: 1.95;
  color: var(--color-text-body); }
.svc-note-separate strong { display: block;
  font-family: var(--font-body-family);
  font-size: 11px;
  letter-spacing: 0.22em;
  font-weight: 700;
  color: var(--color-text-secondary);
  margin-bottom: 8px;
  text-transform: uppercase; }
.svc-area__hero { width: 100%;
  margin: 0 0 40px;
  border-radius: 4px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--color-bg-subtle); }
.svc-area__hero img { width: 100%; height: 100%;
  object-fit: cover;
  display: block; }
.svc-stages { margin: 16px 0 40px;
  padding: 32px 24px;
  background: var(--color-bg-subtle);
  border-radius: 4px;
  display: block; }
.svc-stages__svg-wrap { width: 100%;
  overflow-x: auto; }
.svc-grid { display: grid;
  gap: 24px;
  grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .svc-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .svc-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .svc-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .svc-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .svc-grid--4 { grid-template-columns: repeat(4, 1fr); }
}
.svc-card { background: #fff;
  border: 1px solid var(--color-border-subtle);
  border-radius: 4px;
  padding: 26px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color var(--duration-transition) var(--easing-default), transform var(--duration-transition) var(--easing-default), box-shadow var(--duration-transition) var(--easing-default); }
.svc-card:hover { border-color: var(--color-blue-300);
  transform: translateY(-3px);
  box-shadow: var(--shadow-elevated); }
.svc-card--on-alt { background: #fff; }
.svc-card__icon { width: 40px;
  height: 40px;
  color: var(--color-ui-primary);
  flex-shrink: 0; }
.svc-card__brand { display: inline-block;
  font-family: var(--font-body-family);
  font-size: 11px;
  letter-spacing: 0.16em;
  font-weight: 700;
  color: var(--color-ui-primary);
  margin-top: 4px; }
.svc-card__target { font-family: var(--font-body-family);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-text-secondary);
  margin: 6px 0 0; }
.svc-card__target-body { font-size: 13px;
  line-height: 1.75;
  color: var(--color-text-body);
  margin: 2px 0 0; }
.svc-card__links { margin-top: auto;
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px; }
.svc-card__link { display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 14px;
  color: var(--color-ui-primary);
  letter-spacing: 0.02em; }
.svc-card__link:hover { color: var(--color-cta-primary); text-decoration: none; }
.svc-card__link--cta { color: var(--color-cta-primary); }
.svc-card__link--cta:hover { color: var(--color-cta-primary-hover); }

/* --- from comp-svc-advisor-launch.html --- */
.section--white { background: #fff; }
.adv-hero { position: relative; isolation: isolate;
  height: 70vh;
  min-height: 540px;
  display: grid;
  grid-template-rows: 1fr auto;
  padding-top: 72px;
  overflow: hidden;
  color: #fff; }
.adv-hero__bg { position: absolute; inset: 0; z-index: -2; }
.adv-hero__bg img { width: 100%; height: 100%;
  object-fit: cover;
  object-position: center; }
.adv-hero__overlay { position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(0,20,55,0.45) 0%, rgba(0,20,55,0.18) 30%, rgba(0,15,45,0.90) 100%),
    radial-gradient(ellipse 70% 55% at center 75%, rgba(0,15,45,0.65) 0%, transparent 72%); }
.adv-hero__inner { align-self: end;
  width: 100%;
  padding: 0 0 clamp(72px, 11vh, 120px);
  text-align: center; }
.adv-hero__container { max-width: 1100px; margin-inline: auto;
  padding-inline: clamp(20px, 6vw, 64px); }
.adv-hero__category { display: inline-block;
  font-family: var(--font-body-family);
  font-size: 12px; font-weight: 700; letter-spacing: 0.28em;
  color: rgba(255,255,255,0.95);
  margin-bottom: 24px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.45); }
.adv-hero__h1 { font-family: var(--font-heading-1-family);
  font-weight: 800;
  font-size: clamp(30px, 5.2vw, 60px);
  line-height: 1.32;
  letter-spacing: 0.02em;
  color: #fff;
  margin: 0 auto 22px;
  max-width: 20em;
  text-shadow:
    0 2px 12px rgba(0,15,45,0.55),
    0 8px 48px rgba(0,15,45,0.45); }
.adv-hero__lead { font-family: var(--font-heading-1-family);
  font-size: clamp(15px, 1.5vw, 18px);
  font-weight: 500;
  line-height: 1.85;
  color: #fff;
  margin: 0 auto 32px;
  max-width: 44em;
  text-shadow: 0 2px 10px rgba(0,15,45,0.5); }
.adv-hero__ctas { display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center; }
.adv-hero__cta-ghost { color: #fff;
  border-color: rgba(255,255,255,0.5);
  background: transparent; }
.adv-hero__cta-ghost:hover { background: rgba(255,255,255,0.08);
  border-color: #fff;
  color: #fff; }
.adv-issues { background: #fff; }
.adv-issues__inner { max-width: 1200px; margin-inline: auto;
  padding-inline: var(--space-gutter); }
.adv-issues__head { max-width: 880px;
  margin-bottom: 36px; }
.adv-issues__grid { display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
  margin-bottom: 32px; }
@media (min-width: 720px) { .adv-issues__grid { grid-template-columns: repeat(3, 1fr); } }
.adv-issue-card { background: #fff;
  border: 1px solid var(--color-border-subtle);
  border-radius: 4px;
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: border-color var(--duration-transition) var(--easing-default), transform var(--duration-transition) var(--easing-default), box-shadow var(--duration-transition) var(--easing-default); }
.adv-issue-card:hover { border-color: var(--color-blue-300);
  transform: translateY(-2px);
  box-shadow: var(--shadow-elevated); }
.adv-issue-card__icon { width: 44px;
  height: 44px;
  color: var(--color-ui-primary);
  flex-shrink: 0; }
.adv-issue-card__title { font-family: var(--font-heading-3-family);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--color-text-heading);
  margin: 0;
  letter-spacing: 0.02em; }
.adv-issue-card__body { font-size: 14px;
  line-height: 1.85;
  color: var(--color-text-body);
  margin: 0; }
.adv-issues__stat { margin: 32px auto 0;
  max-width: 720px;
  background: transparent;
  border-radius: 0;
  padding: 28px 0;
  border-left: none;
  border-top: 1px solid var(--color-border-subtle);
  border-bottom: 1px solid var(--color-border-subtle); }
.adv-issues__stat-caption { font-family: var(--font-body-family);
  font-size: 11px;
  letter-spacing: 0.22em;
  font-weight: 700;
  color: var(--color-ui-primary);
  margin: 0 0 12px; }
.adv-issues__stat-figure { display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0 0 10px; }
.adv-issues__stat-num { font-family: 'Fraunces', serif;
  font-variation-settings: "opsz" 144;
  font-weight: 600;
  font-size: clamp(40px, 6vw, 56px);
  line-height: 1;
  color: var(--color-ui-primary);
  letter-spacing: 0; }
.adv-issues__stat-unit { font-family: var(--font-heading-2-family);
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text-heading); }
.adv-issues__stat-body { font-size: 14px;
  line-height: 1.85;
  color: var(--color-text-body);
  margin: 0; }
.adv-issues__stat-source { font-size: 12px;
  color: var(--color-text-secondary);
  margin: 8px 0 0; }
.adv-solution { background: var(--color-bg-subtle); }
.adv-solution__inner { max-width: 1200px; margin-inline: auto;
  padding-inline: var(--space-gutter);
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: start; }
@media (min-width: 1024px) {
  .adv-solution__inner { grid-template-columns: 1fr 1fr; gap: 60px; }
}
/* 2026-05-06: 旧 .adv-solution__body p は <p class="eyebrow"> も巻き込み、specificity 上 .eyebrow を上書きして
   OUR APPROACH の英語見出しだけ他セクション（CHALLENGE / SCOPE / FLOW 等）と異なる見た目になっていた。
   eyebrow を除外し、本文段落（h2 直下〜最終段落）のみに本文タイポを当てる。 */
.adv-solution__body > p:not(.eyebrow) { font-size: 15.5px;
  line-height: 2;
  color: var(--color-text-body);
  margin: 0 0 22px; }
.adv-solution__body > p:not(.eyebrow):last-child { margin-bottom: 0; }
.adv-solution__quote { background: transparent;
  border-radius: 0;
  padding: 32px 0;
  border-top: 1px solid var(--color-border-subtle);
  border-bottom: 1px solid var(--color-border-subtle);
  box-shadow: none; }
.adv-solution__quote-label { font-family: var(--font-body-family);
  font-size: 11px;
  letter-spacing: 0.22em;
  font-weight: 700;
  color: var(--color-ui-primary);
  margin: 0 0 14px; }
.adv-solution__quote-text { font-family: var(--font-heading-2-family);
  font-size: 17px;
  line-height: 1.85;
  font-weight: 600;
  color: var(--color-text-heading);
  margin: 0 0 18px; }
.adv-solution__quote-meta { font-size: 13px;
  line-height: 1.8;
  color: var(--color-text-secondary);
  margin: 0; }
.adv-pillars { background: #fff; }
.adv-pillars__inner { max-width: 1200px; margin-inline: auto;
  padding-inline: var(--space-gutter); }
.adv-pillars__head { max-width: 880px;
  margin-bottom: 40px; }
.adv-pillars__grid { display: grid;
  gap: 18px;
  grid-template-columns: 1fr; }
@media (min-width: 640px) { .adv-pillars__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .adv-pillars__grid { grid-template-columns: repeat(3, 1fr); } }
.adv-pillar { background: #fff;
  border: 1px solid var(--color-border-subtle);
  border-radius: 4px;
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  transition: border-color var(--duration-transition) var(--easing-default), transform var(--duration-transition) var(--easing-default); }
.adv-pillar:hover { border-color: var(--color-blue-300);
  transform: translateY(-2px); }
.adv-pillar__num { font-family: 'Fraunces', serif;
  font-style: italic;
  font-variation-settings: "opsz" 144;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-ui-primary);
  letter-spacing: 0.18em;
  margin: 0; }
.adv-pillar__title { font-family: var(--font-heading-3-family);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--color-text-heading);
  margin: 0;
  letter-spacing: 0.02em; }
.adv-pillar__body { font-size: 14px;
  line-height: 1.85;
  color: var(--color-text-body);
  margin: 4px 0 0; }
.adv-flow { background: var(--color-bg-subtle); }
/* 2026-05-06: FLOW セクションのコンテンツ幅を他セクション（.adv-solution__inner / .adv-pillars__inner / .adv-faq__inner 等）に揃える。
   旧 1100px → 1200px に拡張し、左揃え時の左端ズレを解消。 */
.adv-flow__inner { max-width: 1200px; margin-inline: auto;
  padding-inline: var(--space-gutter); }
.adv-flow__head { max-width: 880px;
  margin-bottom: 40px; }
.adv-flow__list { display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  position: relative;
  list-style: none; }
.adv-flow__step { display: grid;
  grid-template-columns: auto 1fr;
  gap: 22px;
  align-items: start;
  background: #fff;
  border-radius: 4px;
  padding: 24px 28px 24px 24px;
  border: 1px solid var(--color-border-subtle);
  position: relative; }
.adv-flow__num { width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-ui-primary);
  color: transparent;
  display: inline-block;
  font-size: 0;
  flex-shrink: 0;
  margin-top: 12px; }
.adv-flow__content { flex: 1; }
.adv-flow__step-title { font-family: var(--font-heading-2-family);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-text-heading);
  margin: 0 0 8px;
  letter-spacing: 0.02em; }
.adv-flow__step-body { font-size: 14.5px;
  line-height: 1.85;
  color: var(--color-text-body);
  margin: 0; }
.adv-flow__exclude { margin-top: 48px;
  padding: 32px 0;
  background: transparent;
  border-radius: 0;
  border: none;
  border-top: 1px solid var(--color-border-subtle);
  border-bottom: 1px solid var(--color-border-subtle); }
.adv-flow__exclude-title { font-family: var(--font-heading-2-family);
  font-size: clamp(18px, 2vw, 21px);
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-text-heading);
  margin: 0 0 12px;
  letter-spacing: 0.02em; }
.adv-flow__exclude-lead { font-size: 14.5px;
  line-height: 1.85;
  color: var(--color-text-secondary);
  margin: 0 0 18px;
  text-wrap: balance; }
.adv-flow__exclude-list { list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px; }
.adv-flow__exclude-list li { font-size: 14.5px;
  line-height: 1.85;
  color: var(--color-text-body);
  padding-left: 18px;
  position: relative; }
.adv-flow__exclude-list li::before { content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 8px;
  height: 1px;
  background: var(--color-text-secondary); }
.adv-flow__exclude-list li strong { font-weight: 700;
  color: var(--color-text-heading); }
@media (min-width: 768px) {
  .adv-flow__exclude {
    padding: 36px 44px;
  }
}
.adv-trust { background: #fff; }
.adv-trust__inner { max-width: 1200px; margin-inline: auto;
  padding-inline: var(--space-gutter); }
.adv-trust__head { max-width: 880px;
  margin-bottom: 40px; }
.adv-trust__grid { display: grid;
  gap: 0;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--color-border-subtle); }
@media (min-width: 1024px) { .adv-trust__grid { grid-template-columns: repeat(3, 1fr); gap: 56px; border-top: none; } }
.adv-trust-card { background: transparent;
  border-radius: 0;
  padding: 32px 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-top: none;
  border-bottom: 1px solid var(--color-border-subtle); }
@media (min-width: 1024px) {
  .adv-trust-card { border-bottom: none; padding: 0; }
}
.adv-trust-card__num { font-family: 'Fraunces', serif;
  font-style: normal;
  font-weight: 500;
  font-size: 36px;
  line-height: 1;
  color: var(--color-text-heading);
  letter-spacing: 0.04em;
  display: block;
  margin: 0 0 10px 0;
  height: 36px; }
.adv-trust-card__title { font-family: var(--font-heading-2-family);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-text-heading);
  margin: 0;
  letter-spacing: 0.02em; }
.adv-trust-card__body { font-size: 14.5px;
  line-height: 1.9;
  color: var(--color-text-body);
  margin: 0; }
.adv-trust__group-note { margin: 36px 0 0;
  padding: 18px 0;
  background: transparent;
  border-left: none;
  border-top: 1px solid var(--color-border-subtle);
  border-bottom: 1px solid var(--color-border-subtle);
  border-radius: 0;
  font-size: 14px;
  line-height: 1.95;
  color: var(--color-text-body); }
.adv-trust__group-note strong { font-family: var(--font-heading-2-family);
  color: var(--color-text-heading);
  font-weight: 700; }
.adv-pricing { background: var(--color-bg-subtle); }
.adv-pricing__inner { max-width: 880px; margin-inline: auto;
  padding-inline: var(--space-gutter); }
.adv-pricing__head { margin-bottom: 32px; }
.adv-pricing__card { background: #fff;
  border-radius: 4px;
  padding: 36px 32px;
  border: 1px solid var(--color-border-subtle);
  box-shadow: 0 6px 24px rgba(0,30,75,0.04); }
.adv-pricing__label { display: inline-block;
  font-family: var(--font-body-family);
  font-size: 11px;
  letter-spacing: 0.22em;
  font-weight: 700;
  color: var(--color-ui-primary);
  background: var(--color-ui-primary-subtle);
  padding: 6px 14px;
  border-radius: 2px;
  margin-bottom: 20px; }
.adv-pricing__main { font-family: var(--font-heading-2-family);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.85;
  color: var(--color-text-heading);
  margin: 0 0 20px; }
.adv-pricing__sub { font-size: 14.5px;
  line-height: 1.9;
  color: var(--color-text-body);
  margin: 0 0 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--color-border-subtle); }
.adv-pricing__cta { display: flex;
  gap: 12px;
  flex-wrap: wrap; }
.svc-faq { background: #fff; }
/* 2026-05-06 統一: __inner を 1200px に。FAQ リスト自体は読みやすさのため 880px に制限。 */
.svc-faq__inner { max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--space-gutter); }
.svc-faq__head { margin-bottom: 32px; }
.svc-faq__list { display: grid;
  gap: 14px;
  max-width: 880px; }
.svc-faq__item { border: 1px solid var(--color-border-subtle);
  border-radius: 4px;
  background: #fff;
  overflow: hidden; }
.svc-faq__item[open] { border-color: var(--color-blue-300); }
.svc-faq__q { list-style: none;
  cursor: pointer;
  padding: 20px 24px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  font-family: var(--font-heading-2-family);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.55;
  color: var(--color-text-heading);
  letter-spacing: 0.02em;
  transition: background var(--duration-interaction) var(--easing-default); }
.svc-faq__q::-webkit-details-marker { display: none; }
.svc-faq__q:hover { background: var(--color-bg-subtle); }
.svc-faq__q-mark { font-family: 'Fraunces', serif;
  font-style: italic;
  font-variation-settings: "opsz" 144;
  font-size: 22px;
  font-weight: 600;
  color: var(--color-ui-primary); }
.svc-faq__q-icon { width: 14px;
  height: 14px;
  color: var(--color-ui-primary);
  flex-shrink: 0;
  transition: transform var(--duration-interaction) var(--easing-default); }
.svc-faq__item[open] .svc-faq__q-icon { transform: rotate(45deg); }
.svc-faq__a { padding: 4px 24px 24px 60px;
  font-size: 14.5px;
  line-height: 2;
  color: var(--color-text-body); }
.svc-faq__a p { margin: 0 0 12px; }
.svc-faq__a p:last-child { margin-bottom: 0; }
@media (min-width: 720px) { .adv-related__grid { grid-template-columns: repeat(3, 1fr); } }
.adv-figure { margin: 0; }
.adv-figure img { width: 100%; height: auto; display: block; border-radius: 4px; }
.adv-figure figcaption { margin-top: 10px;
  font-size: 12px;
  line-height: 1.7;
  color: var(--color-text-secondary);
  font-family: var(--font-body-family);
  letter-spacing: 0.02em; }
.adv-issues__layout { display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
  margin-bottom: 32px;
  align-items: start; }
@media (min-width: 1024px) {
  .adv-issues__layout {
    grid-template-columns: 1fr 280px;
    gap: 40px;
  }
}
.adv-issues__cards { display: grid;
  gap: 18px;
  grid-template-columns: 1fr; }
@media (min-width: 720px) {
  .adv-issues__cards { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .adv-issues__cards { grid-template-columns: repeat(3, 1fr); }
}
.adv-issues__airgap { margin: 0;
  width: 100%;
  max-width: 320px;
  justify-self: start; }
@media (min-width: 1024px) {
  .adv-issues__airgap { max-width: 280px; justify-self: end; }
}
.adv-issues__airgap img { width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 4px;
  display: block; }
.adv-issues__airgap figcaption { margin-top: 10px;
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--color-text-secondary);
  letter-spacing: 0.02em; }
.adv-issue-card__photo { width: calc(100% + 48px);
  margin: -26px -24px 0 -24px;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 4px 4px 0 0;
  display: block; }
.adv-solution__quote-figure { margin: 0 0 22px;
  border-radius: 4px;
  overflow: hidden; }
.adv-solution__quote-figure img { width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  border-radius: 4px; }
.adv-solution__quote-figure figcaption { margin-top: 10px;
  font-size: 11.5px;
  color: var(--color-text-secondary);
  letter-spacing: 0.02em;
  line-height: 1.7; }
.adv-pillars__block { display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  margin-bottom: 56px;
  align-items: center; }
.adv-pillars__block:last-child { margin-bottom: 0; }
@media (min-width: 1024px) {
  .adv-pillars__block {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 60px;
  }
  .adv-pillars__block--reverse {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  }
  .adv-pillars__block--reverse .adv-pillars__column { order: 2; }
  .adv-pillars__block--reverse .adv-pillars__photo-figure { order: 1; }
}
.adv-pillars__column { display: flex;
  flex-direction: column;
  gap: 22px; }
.adv-pillars__group-label { font-family: var(--font-body-family);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--color-ui-primary);
  margin: 0 0 10px;
  text-transform: uppercase; }
.adv-pillars__group-title { font-family: var(--font-heading-2-family);
  font-size: clamp(19px, 2vw, 22px);
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-text-heading);
  margin: 0 0 22px;
  letter-spacing: 0.02em; }
.adv-pillars__items { display: grid;
  gap: 16px;
  grid-template-columns: 1fr; }
.adv-pillars__items .adv-pillar { border-left: 0;
  border-right: 0;
  border-top: 0;
  border-bottom: 1px solid var(--color-border-subtle);
  border-radius: 0;
  padding: 22px 0;
  background: transparent;
  box-shadow: none; }
.adv-pillars__items .adv-pillar:last-child { border-bottom: 0; }
.adv-pillars__items .adv-pillar:hover { border-color: var(--color-ui-primary);
  transform: none;
  background: var(--color-bg-subtle); }
.adv-pillars__photo-figure { margin: 0; }
.adv-pillars__photo-figure img { width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 4px;
  display: block;
  box-shadow: 0 8px 28px rgba(0, 30, 75, 0.10); }
.adv-pillars__photo-figure figcaption { margin-top: 12px;
  font-size: 12px;
  color: var(--color-text-secondary);
  line-height: 1.7;
  letter-spacing: 0.02em; }
.adv-flow__inline-photo { margin: 4px 0;
  padding: 0;
  display: block; }
.adv-flow__inline-photo figure { margin: 0;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 6px 20px rgba(0, 30, 75, 0.08); }
.adv-flow__inline-photo img { width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block; }
.adv-flow__inline-photo figcaption { padding: 12px 20px 14px;
  font-size: 12px;
  line-height: 1.7;
  color: var(--color-text-secondary);
  letter-spacing: 0.02em; }
.adv-trust-card__bignum { font-family: 'Fraunces', serif;
  font-variation-settings: "opsz" 144;
  font-weight: 600;
  font-size: clamp(54px, 6vw, 76px);
  line-height: 1;
  color: var(--color-ui-primary);
  letter-spacing: -0.02em;
  margin: 0 0 10px;
  display: flex;
  align-items: baseline;
  gap: 6px; }
.adv-trust-card__bignum-unit { font-family: var(--font-body-family);
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-heading);
  letter-spacing: 0.04em; }
.adv-trust-card__doc { margin: 22px 0 0; margin-top: auto; }
.adv-trust-card__doc img { width: 100%;
  max-width: 220px;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 3px;
  display: block;
  opacity: 0.94; }
.adv-trust-card__doc figcaption { margin-top: 8px;
  font-size: 11px;
  color: var(--color-text-secondary);
  letter-spacing: 0.02em;
  line-height: 1.65; }

/* --- from comp-svc-advisor-ongoing.html --- */
.section-lead + .section-lead { margin-top: -8px; }
/* 写真背景ヒーロー（job-training / techlete / advisor-ongoing / ai-implementation / training）
   → adv-hero / tc-hero / hb-hero / svc-d-hero と同等の 70vh + grid レイアウトに揃える。
   サービス一覧（page-services.html）は __bg を持たないため影響なし */
.svc-hero:has(> .svc-hero__bg) {
  height: 70vh;
  min-height: 540px;
  display: grid;
  grid-template-rows: 1fr auto;
  padding: 72px 0 0;
  background: none;
  overflow: hidden;
}
.svc-hero__bg { position: absolute; inset: 0; z-index: -2; }
.svc-hero__bg img { width: 100%; height: 100%;
  object-fit: cover;
  object-position: center; }
.svc-hero__overlay { position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(0,20,55,0.45) 0%, rgba(0,20,55,0.18) 30%, rgba(0,15,45,0.90) 100%),
    radial-gradient(ellipse 70% 55% at center 75%, rgba(0,15,45,0.65) 0%, transparent 72%); }
.svc-hero__container { max-width: 1100px; margin-inline: auto;
  padding-inline: clamp(20px, 6vw, 64px); }
.svc-hero__category { display: inline-block;
  font-family: var(--font-body-family);
  font-size: 12px; font-weight: 700; letter-spacing: 0.28em;
  color: rgba(255,255,255,0.95);
  margin-bottom: 24px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.45); }
.svc-hero__ctas { display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center; }
.svc-hero__cta-ghost { color: #fff;
  border-color: rgba(255,255,255,0.5);
  background: transparent; }
.svc-hero__cta-ghost:hover { background: rgba(255,255,255,0.08);
  border-color: #fff;
  color: #fff; }
.svc-overview { padding-block: clamp(72px, 9vh, 112px); background: #fff; }
/* 文字本文ブロック用（advisor-ongoing で使用） */
.svc-overview--narrow { padding-block: 0; background: transparent; max-width: 56em; }
.svc-overview__chart { margin: 32px 0;
  padding: 28px 28px 24px;
  background: var(--color-bg-subtle);
  border-radius: 4px; }
.svc-overview__chart-title { font-family: var(--font-body-family);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--color-ui-primary);
  margin: 0 0 6px; }
.svc-overview__chart-cap { font-size: 11px;
  color: var(--color-text-secondary);
  margin: 8px 0 0;
  line-height: 1.65; }
.svc-overview__chart svg { width: 100%;
  height: auto;
  display: block;
  margin: 0 auto; }
.svc-overview__stats { margin: 32px 0 24px;
  padding: 28px 0 22px;
  background: transparent;
  border-radius: 0;
  border-top: 1px solid var(--color-border-subtle);
  border-bottom: 1px solid var(--color-border-subtle); }
.svc-overview__stats-caption { font-family: var(--font-body-family);
  font-size: 11px;
  letter-spacing: 0.22em;
  font-weight: 700;
  color: var(--color-ui-primary);
  margin: 0 0 20px; }
.svc-overview__stats-grid { display: grid;
  grid-template-columns: 1fr;
  gap: 24px; }
@media (min-width: 720px) {
  .svc-overview__stats-grid { grid-template-columns: repeat(3, 1fr); gap: 28px; }
}
.svc-overview__stat { border-left: 0;
  padding-left: 0; }
.svc-overview p.svc-overview__stat-num,
.svc-overview .svc-overview__stat-num {
  font-family: 'Fraunces', serif !important;
  font-variation-settings: "opsz" 144 !important;
  font-size: clamp(48px, 7vw, 72px) !important;
  font-weight: 600 !important;
  color: var(--color-ui-primary) !important;
  line-height: 1 !important;
  margin: 0 0 14px !important;
  letter-spacing: -0.02em !important;
}
.svc-overview__stat-num small { font-size: 0.55em;
  font-weight: 500;
  margin-left: 4px; }
.svc-overview__stat-label { font-family: var(--font-heading-2-family);
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-heading);
  margin: 0 0 6px;
  line-height: 1.55;
  letter-spacing: 0.02em; }
.svc-overview__stat-body { font-size: 12.5px;
  line-height: 1.75;
  color: var(--color-text-body);
  margin: 0; }
.svc-overview__stats-source { margin: 18px 0 0;
  font-size: 11.5px;
  color: var(--color-text-secondary);
  line-height: 1.7; }
/* 2026-05-06: 旧 .svc-overview p は <p class="eyebrow"> も巻き込み、specificity 上 .eyebrow を上書きして
   job-training / 他 svc-overview ページの英見出し（OVERVIEW）が他セクションと異なる見た目になっていた。
   eyebrow を除外して本文段落のみに本文タイポを当てる。 */
.svc-overview p:not(.eyebrow) { font-size: 16px;
  line-height: 1.95;
  color: var(--color-text-body);
  margin: 0 0 22px; }
.svc-overview p:not(.eyebrow):last-child { margin-bottom: 0; }
.svc-target-grid { display: grid;
  gap: 24px;
  grid-template-columns: 1fr; }
@media (min-width: 720px) { .svc-target-grid { grid-template-columns: repeat(3, 1fr); } }
.svc-target-card:hover { border-color: var(--color-blue-300);
  transform: translateY(-3px);
  box-shadow: var(--shadow-elevated); }
.svc-target-card__icon { width: 44px;
  height: 44px;
  color: var(--color-ui-primary);
  flex-shrink: 0; }
.svc-target-card__title { font-family: var(--font-heading-3-family);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-text-heading);
  margin: 0;
  letter-spacing: 0.02em; }
.svc-target-card__body { font-size: 14px;
  line-height: 1.9;
  color: var(--color-text-body);
  margin: 0; }
/* R2-13: first-of-type による border-top 撤去ルールを削除し、全カードが全周ボーダーで統一されるよう修正（01 の上枠が無くて違和感、を解消）*/
@media (min-width: 900px) {
  .svc-feature {
    display: grid; /* ★ base が flex column なので、PC で grid 化を強制 */
    flex-direction: revert;
    grid-template-columns: 1fr 1.4fr;
    gap: 44px;
  }
  .svc-feature--reverse { grid-template-columns: 1.4fr 1fr; }
  .svc-feature--reverse .svc-feature__visual { order: 2; }
}
.svc-feature__visual { background: var(--color-bg-subtle);
  border-radius: 4px;
  aspect-ratio: 4 / 3;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  overflow: hidden; }
.svc-feature__visual svg { width: 100%; height: 100%; }
.svc-flow { display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
  counter-reset: flow;
  padding-block: clamp(72px, 9vh, 112px);
  background: var(--color-bg-subtle); }
.svc-price-box { background: transparent;
  border: none;
  border-top: 1px solid var(--color-border-subtle);
  border-bottom: 1px solid var(--color-border-subtle);
  border-left: none;
  border-radius: 0;
  padding: 32px 0;
  max-width: 820px; }
.svc-price-box__lead { font-family: var(--font-heading-3-family);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.65;
  color: var(--color-text-heading);
  margin: 0 0 14px; }
.svc-price-box__sub { font-size: 14px;
  line-height: 1.95;
  color: var(--color-text-body);
  margin: 0; }
@media (min-width: 720px) { .svc-related-grid { grid-template-columns: repeat(3, 1fr); } }
.svc-related-card:hover { border-color: var(--color-blue-300);
  transform: translateY(-2px);
  box-shadow: var(--shadow-elevated); }
.svc-related-card__icon { width: 36px; height: 36px;
  color: var(--color-ui-primary); }

/* --- from comp-svc-training.html --- */
.svc-hero__cat { display: inline-block;
  font-family: var(--font-body-family);
  font-size: 12px; font-weight: 700; letter-spacing: 0.28em;
  color: rgba(255,255,255,0.95);
  margin-bottom: 24px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.45); }
.svc-hero__sub { font-family: var(--font-heading-1-family);
  font-size: clamp(15px, 1.5vw, 18px);
  font-weight: 500;
  line-height: 1.85;
  color: #fff;
  margin: 0 auto 32px;
  max-width: 44em;
  text-shadow: 0 2px 10px rgba(0,15,45,0.5); }
.svc-hero__cta { display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center; }
.svc-hero .btn--ghost { color: #fff;
  border-color: rgba(255,255,255,0.5);
  background: transparent; }
.svc-hero .btn--ghost:hover { background: rgba(255,255,255,0.08);
  border-color: #fff;
  color: #fff; }
.svc-overview__head { max-width: 760px; margin-bottom: 36px; }
@media (min-width: 900px) {
  .svc-overview__grid { grid-template-columns: 1.2fr 0.8fr; gap: 48px; }
}
.svc-overview__body p { font-size: 15.5px;
  line-height: 1.95;
  color: var(--color-text-body);
  margin: 0 0 18px; }
.svc-overview__body p:last-child { margin-bottom: 0; }
.svc-overview__visual { position: relative;
  border-radius: 4px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border-subtle); }
.svc-overview__visual img { width: 100%; height: 100%;
  object-fit: cover;
  display: block; }
.svc-target { padding-block: clamp(72px, 9vh, 112px);
  background: var(--color-bg-subtle); }
@media (min-width: 640px) { .svc-grid--3 { grid-template-columns: repeat(2, 1fr); } }
.svc-feature__inner { max-width: 1200px; margin-inline: auto;
  padding-inline: var(--space-gutter); }
.svc-feature__head { max-width: 760px; margin-bottom: 40px; }
.svc-feature__list { display: grid;
  gap: 0;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--color-border-subtle); }
@media (min-width: 1024px) {
  .svc-feature__list { grid-template-columns: repeat(3, 1fr); gap: 56px; border-top: none; }
}
.svc-feature__item { background: transparent;
  border-left: none;
  border-bottom: 1px solid var(--color-border-subtle);
  border-radius: 0;
  padding: 32px 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: start;
  align-content: start; }
@media (min-width: 1024px) {
  .svc-feature__item { border-bottom: none; padding: 0; }
}
.svc-flow__item { background: #fff;
  border: 1px solid var(--color-border-subtle);
  border-radius: 4px;
  padding: 24px 26px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  position: relative; }
@media (min-width: 768px) {
  .svc-flow__item { grid-template-columns: 132px 1fr; gap: 28px; align-items: start; }
}
.svc-flow__step-label { display: inline-flex;
  flex-direction: column;
  gap: 2px; }
.svc-flow__step-en { font-family: 'Fraunces', serif;
  font-style: italic;
  font-variation-settings: "opsz" 144;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--color-ui-primary); }
.svc-flow__step-num { font-family: var(--font-heading-1-family);
  font-size: clamp(26px, 3vw, 32px);
  font-weight: 700;
  line-height: 1;
  color: var(--color-text-heading); }
.svc-price { padding-block: clamp(72px, 9vh, 112px);
  background: #fff; }
.svc-price__head { max-width: 760px; margin-bottom: 32px; }
.svc-price__grid { display: grid;
  gap: 18px;
  grid-template-columns: 1fr; }
@media (min-width: 768px) { .svc-price__grid { grid-template-columns: repeat(2, 1fr); } }
/* 2026-05-07: 研修ページ S6 を3カード（単発・継続カスタマイズ・3ヶ月集中）構成に対応 */
@media (min-width: 1024px) { .svc-price__grid { grid-template-columns: repeat(3, 1fr); } }
.svc-price__item { background: var(--color-bg-subtle);
  border: 1px solid var(--color-border-subtle);
  border-radius: 4px;
  padding: 26px 26px; }
.svc-price__plan { font-family: var(--font-heading-2-family);
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text-heading);
  margin: 0 0 12px;
  letter-spacing: 0.02em; }
.svc-price__detail { font-size: 14.5px;
  line-height: 1.85;
  color: var(--color-text-body);
  margin: 0; }
.svc-related { padding-block: clamp(72px, 9vh, 112px);
  background: #fff; }
.svc-related__inner { max-width: 1200px; margin-inline: auto;
  padding-inline: var(--space-gutter); }
.svc-related__card:hover { border-color: var(--color-blue-300);
  transform: translateY(-3px);
  box-shadow: var(--shadow-elevated); }
.svc-related__card-title { font-family: var(--font-heading-3-family);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-text-heading);
  margin: 0;
  letter-spacing: 0.02em; }
.svc-related__card-link { margin-top: 10px;
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 700;
  font-size: 14px;
  color: var(--color-ui-primary); }

/* --- from comp-svc-hiring-employer.html --- */
.svc-d-hero { position: relative; isolation: isolate;
  height: 70vh;
  min-height: 540px;
  display: grid;
  grid-template-rows: 1fr auto;
  padding-top: 72px;
  overflow: hidden;
  color: #fff; }
.svc-d-hero__bg { position: absolute; inset: 0; z-index: -2; }
.svc-d-hero__bg img { width: 100%; height: 100%;
  object-fit: cover;
  object-position: center; }
.svc-d-hero__overlay { position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(0,20,55,0.45) 0%, rgba(0,20,55,0.18) 30%, rgba(0,15,45,0.90) 100%),
    radial-gradient(ellipse 70% 55% at center 75%, rgba(0,15,45,0.65) 0%, transparent 72%); }
.svc-d-hero__inner { align-self: end;
  width: 100%;
  padding: 0 0 clamp(72px, 11vh, 120px);
  text-align: center; }
.svc-d-hero__container { max-width: 1100px; margin-inline: auto;
  padding-inline: clamp(20px, 6vw, 64px); }
.svc-d-hero__category { display: inline-block;
  font-family: var(--font-body-family);
  font-size: 12px; font-weight: 700; letter-spacing: 0.28em;
  color: rgba(255,255,255,0.95);
  margin-bottom: 24px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.45); }
.svc-d-hero__h1 { font-family: var(--font-heading-1-family);
  font-weight: 800;
  font-size: clamp(30px, 5.2vw, 60px);
  line-height: 1.32;
  letter-spacing: 0.02em;
  color: #fff;
  margin: 0 auto 22px;
  max-width: 20em;
  text-shadow:
    0 2px 12px rgba(0,15,45,0.55),
    0 8px 48px rgba(0,15,45,0.45); }
.svc-d-hero__lead { font-family: var(--font-heading-1-family);
  font-size: clamp(15px, 1.5vw, 18px);
  font-weight: 500;
  line-height: 1.85;
  color: #fff;
  margin: 0 auto 32px;
  max-width: 44em;
  text-shadow: 0 2px 10px rgba(0,15,45,0.5); }
.svc-d-hero__cta { display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center; }
.svc-d-hero__cta-ghost { color: #fff;
  border-color: rgba(255,255,255,0.5);
  background: transparent; }
.svc-d-hero__cta-ghost:hover { background: rgba(255,255,255,0.08);
  border-color: #fff;
  color: #fff; }

/* 全ヒーロー横断 SP 調整（2026-05-04 v3）
   サービス詳細 9 ページのヒーロークラス混在: svc-hero / adv-hero / hb-hero / tc-hero / svc-d-hero
   training のみ独自命名: svc-hero__sub（他は __lead）/ svc-hero__cat（他は __category）

   方針:
   - 全ヒーロー共通の min-height: 560px で高さ統一
   - flex で下寄せ → コンテンツ少ないページでも下端に揃う
   - lead / sub 非表示、セカンダリ CTA 非表示、オーバーレイ濃化、フォント調整 */
@media (max-width: 767px) {
  /* 全ヒーロー共通: min-height + flex 下寄せ */
  .adv-hero, .svc-hero:not(.svc-hero--list), .hb-hero, .tc-hero, .svc-d-hero {
    min-height: 560px;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
  /* svc-hero は base padding-bottom があるので 0 に（重複回避） / list は除外 */
  .svc-hero:not(.svc-hero--list) { padding-bottom: 0; }

  /* オーバーレイを濃くして文字可読性向上 */
  .adv-hero__overlay, .svc-hero__overlay, .hb-hero__overlay, .tc-hero__overlay, .svc-d-hero__overlay {
    background:
      linear-gradient(180deg, rgba(0,15,45,0.62) 0%, rgba(0,15,45,0.45) 35%, rgba(0,15,45,0.94) 100%),
      radial-gradient(ellipse 88% 65% at center 75%, rgba(0,15,45,0.72) 0%, transparent 75%);
  }

  /* lead / sub 非表示（情報密度カット） */
  .adv-hero__lead,
  .svc-hero__lead, .svc-hero__sub,
  .hb-hero__lead,
  .tc-hero__lead,
  .svc-d-hero__lead { display: none; }

  /* セカンダリ（ghost）ボタン非表示 */
  .adv-hero__cta-ghost,
  .svc-hero .btn--ghost,
  .hb-hero__cta-ghost,
  .tc-hero__cta-ghost,
  .svc-d-hero__cta-ghost { display: none; }

  /* CTA コンテナを縦長フル幅に */
  .adv-hero__ctas, .svc-hero__cta, .svc-hero__ctas, .svc-hero__buttons,
  .hb-hero__cta-row, .tc-hero__cta, .svc-d-hero__cta {
    flex-direction: column;
    align-items: stretch;
    max-width: 320px;
    margin-inline: auto;
  }
  .adv-hero__ctas .btn, .svc-hero__cta .btn, .svc-hero__ctas .btn, .svc-hero__buttons .btn,
  .hb-hero__cta-row .btn, .tc-hero__cta .btn, .svc-d-hero__cta .btn { width: 100%; }

  /* category サイズ・余白調整（training の __cat も含む） */
  .adv-hero__category,
  .svc-hero__category, .svc-hero__cat,
  .hb-hero__category,
  .tc-hero__category,
  .svc-d-hero__category {
    font-size: 11px;
    letter-spacing: 0.22em;
    margin-bottom: 18px;
    padding-bottom: 8px;
  }

  /* H1 サイズ・余白調整 + 行末バランス
     text-wrap: balance で「す。」だけ最終行に取り残される問題を回避（Chrome 114+ / Safari 17.4+） */
  .adv-hero__h1, .svc-hero__h1, .hb-hero__h1, .tc-hero__h1, .svc-d-hero__h1 {
    font-size: clamp(20px, 6vw, 34px);
    margin-bottom: 22px;
    text-wrap: balance;
    line-height: 1.45;
  }

  /* inner 下余白を統一（全クラス共通） */
  .adv-hero__inner, .svc-hero__inner, .hb-hero__inner, .tc-hero__inner, .svc-d-hero__inner {
    padding: 0 0 clamp(48px, 8vh, 80px);
    width: 100%;
  }
}

/* サービス詳細ヒーロー SP 調整（2026-05-04）
   全 9 サービス詳細ページ（advisor-launch / advisor-ongoing / training / hiring-employer /
   job-training / hr-bot / ai-implementation / ai-techcamp / techlete）共通。
   SP（767px 以下）では情報密度を下げ、背景写真との文字コントラストを強化:
   - lead 本文を非表示（カテゴリ + H1 + CTA1 つに絞る）
   - セカンダリ CTA（btn--ghost）を非表示
   - オーバーレイを濃くして可読性向上
   - H1 / category のサイズ・余白を SP 向けに調整
   - 70vh の min-height を緩めて画面に収まりやすく
   復活させる場合は本ブロックを削除 */
@media (max-width: 767px) {
  .svc-d-hero {
    height: auto;
    min-height: 480px;
    padding-top: 60px;
  }
  .svc-d-hero__overlay {
    background:
      linear-gradient(180deg, rgba(0,15,45,0.62) 0%, rgba(0,15,45,0.45) 35%, rgba(0,15,45,0.94) 100%),
      radial-gradient(ellipse 88% 65% at center 75%, rgba(0,15,45,0.72) 0%, transparent 75%);
  }
  .svc-d-hero__lead { display: none; }
  .svc-d-hero__cta-ghost { display: none; }
  .svc-d-hero__cta {
    flex-direction: column;
    align-items: stretch;
    max-width: 320px;
    margin-inline: auto;
  }
  .svc-d-hero__cta .btn { width: 100%; }
  .svc-d-hero__category {
    font-size: 11px;
    letter-spacing: 0.22em;
    margin-bottom: 18px;
    padding-bottom: 8px;
  }
  .svc-d-hero__h1 {
    font-size: clamp(22px, 6.5vw, 36px);
    margin-bottom: 22px;
  }
  .svc-d-hero__inner {
    padding: 0 0 clamp(48px, 8vh, 80px);
  }
}

.svc-d-sec { padding-block: clamp(72px, 9vh, 112px); }
.svc-d-sec--alt { background: var(--color-bg-subtle); }
.svc-d-sec__inner { max-width: 1200px; margin-inline: auto;
  padding-inline: var(--space-gutter); }
.svc-d-sec__head { margin-bottom: 40px; max-width: 880px; }
.svc-d-sec__eyebrow { display: inline-block;
  font-family: var(--font-body-family);
  font-size: 12px; font-weight: 700; letter-spacing: 0.22em;
  color: var(--color-ui-primary);
  margin-bottom: 14px; }
.svc-d-overview__title { font-family: var(--font-heading-1-family);
  font-size: clamp(26px, 3.4vw, 36px);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--color-text-heading);
  margin: 0 0 28px; }
.svc-d-overview__body p { font-size: 15.5px;
  line-height: 2.05;
  color: var(--color-text-body);
  margin: 0 0 20px; }
.svc-d-overview__flow { margin: 32px 0 8px;
  padding: 28px 24px;
  background: #fff;
  border: 1px solid var(--color-border-subtle);
  border-radius: 4px; }
.svc-d-sec--alt .svc-d-overview__flow { background: #fff; }
.svc-d-overview__flow-cap { font-family: var(--font-body-family);
  font-size: 11px;
  letter-spacing: 0.24em;
  font-weight: 700;
  color: var(--color-ui-primary);
  margin: 0 0 16px;
  text-align: center; }
.svc-d-overview__flow-wrap { width: 100%;
  overflow-x: auto; }
.svc-d-overview__flow-svg { width: 100%;
  height: auto;
  min-width: 560px;
  margin: 0 auto;
  display: block; }
.svc-d-target__grid { display: grid;
  gap: 24px;
  grid-template-columns: 1fr; }
@media (min-width: 768px) {
  .svc-d-target__grid { grid-template-columns: 1fr 1fr; }
}
.svc-d-target__card { background: #fff;
  border: 1px solid var(--color-border-subtle);
  border-radius: 4px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: border-color var(--duration-transition) var(--easing-default), transform var(--duration-transition) var(--easing-default), box-shadow var(--duration-transition) var(--easing-default); }
.svc-d-target__card--primary { border: 2px solid var(--color-ui-primary);
  background: linear-gradient(180deg, rgba(0,95,196,0.04) 0%, #fff 60%); }
.svc-d-target__card:hover { border-color: var(--color-blue-300);
  transform: translateY(-2px);
  box-shadow: var(--shadow-elevated); }
.svc-d-target__card--primary:hover { border-color: var(--color-ui-primary); }
.svc-d-target__icon { width: 48px;
  height: 48px;
  color: var(--color-ui-primary);
  flex-shrink: 0; }
.svc-d-target__h3 { font-family: var(--font-heading-3-family);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-text-heading);
  margin: 0;
  letter-spacing: 0.02em; }
.svc-d-target__body { font-size: 14.5px;
  line-height: 1.95;
  color: var(--color-text-body);
  margin: 0; }
.svc-d-target__link { margin-top: auto;
  padding-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 14px;
  color: var(--color-ui-primary);
  letter-spacing: 0.02em; }
.svc-d-target__badge { display: inline-block;
  font-family: var(--font-body-family);
  font-size: 11px;
  letter-spacing: 0.16em;
  font-weight: 700;
  color: #fff;
  background: var(--color-ui-primary);
  padding: 4px 10px;
  border-radius: 2px; }
.svc-d-feature__grid { display: grid;
  gap: 28px;
  grid-template-columns: 1fr; }
@media (min-width: 768px) {
  .svc-d-feature__grid { grid-template-columns: repeat(3, 1fr); }
}
.svc-d-feature__card { background: #fff;
  border: 1px solid var(--color-border-subtle);
  border-radius: 4px;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: border-color var(--duration-transition) var(--easing-default), transform var(--duration-transition) var(--easing-default), box-shadow var(--duration-transition) var(--easing-default); }
.svc-d-feature__card:hover { border-color: var(--color-blue-300);
  transform: translateY(-3px);
  box-shadow: var(--shadow-elevated); }
.svc-d-feature__visual { width: 100%;
  aspect-ratio: 16 / 10;
  background: var(--color-bg-subtle);
  overflow: hidden; }
.svc-d-feature__visual img { width: 100%; height: 100%;
  object-fit: cover;
  display: block; }
.svc-d-feature__visual--svg { display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--color-blue-50) 0%, #fff 100%);
  padding: 24px 20px; }
.svc-d-feature__visual--svg svg { width: 100%;
  height: auto;
  max-height: 100%; }
.svc-d-feature__body { padding: 22px 22px 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1; }
.svc-d-feature__num { font-family: 'Fraunces', serif;
  font-style: italic;
  font-variation-settings: "opsz" 144;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--color-ui-primary); }
.svc-d-feature__h3 { font-family: var(--font-heading-3-family);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.55;
  color: var(--color-text-heading);
  margin: 0 0 4px;
  letter-spacing: 0.02em; }
.svc-d-feature__desc { font-size: 14px;
  line-height: 1.95;
  color: var(--color-text-body);
  margin: 0; }
.svc-d-flow { position: relative;
  margin: 0;
  padding: 0;
  list-style: none; }
.svc-d-flow__step { position: relative;
  padding: 0 0 36px 64px;
  border-left: 2px solid var(--color-border-subtle);
  margin-left: 22px; }
.svc-d-flow__step:last-child { padding-bottom: 4px;
  border-left-color: transparent; }
.svc-d-flow__num { position: absolute;
  left: -22px;
  top: -4px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-ui-primary);
  color: #fff;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-variation-settings: "opsz" 144;
  font-weight: 500;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0;
  box-shadow: 0 4px 12px rgba(0,95,196,0.28); }
.svc-d-flow__h3 { font-family: var(--font-heading-3-family);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-text-heading);
  margin: 0 0 10px;
  letter-spacing: 0.02em; }
.svc-d-flow__desc { font-size: 14.5px;
  line-height: 2;
  color: var(--color-text-body);
  margin: 0;
  max-width: 640px; }
.svc-d-price { background: #fff;
  border: 1px solid var(--color-border-subtle);
  border-radius: 4px;
  padding: 36px 32px;
  max-width: 720px; }
.svc-d-price__label { display: inline-block;
  font-family: var(--font-body-family);
  font-size: 11px; font-weight: 700; letter-spacing: 0.20em;
  color: var(--color-ui-primary);
  margin-bottom: 14px; }
.svc-d-price__h3 { font-family: var(--font-heading-2-family);
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-text-heading);
  margin: 0 0 14px;
  letter-spacing: 0.02em; }
.svc-d-price__body { font-size: 15px;
  line-height: 2;
  color: var(--color-text-body);
  margin: 0; }
@media (min-width: 768px) {
}

/* --- from comp-svc-job-training.html --- */
.site-nav__sub a.is-current { color: var(--color-ui-primary); font-weight: 700; }
.breadcrumb { padding: 92px 0 0;
  background: #fff; }
.breadcrumb a { color: var(--color-text-secondary); }
.breadcrumb a:hover { color: var(--color-ui-primary); text-decoration: none; }
.breadcrumb__sep { margin: 0 8px; color: var(--color-text-tertiary); }
.breadcrumb__current { color: var(--color-text-body); font-weight: 700; }
.svc-overview__title { font-family: var(--font-heading-1-family);
  font-size: clamp(24px, 3.2vw, 34px);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--color-text-heading);
  margin: 0 0 28px; }
.svc-target__h2 { font-family: var(--font-heading-1-family);
  font-size: clamp(26px, 3.4vw, 36px);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-text-heading);
  margin: 0; }
.svc-target__grid { display: grid; gap: 24px;
  grid-template-columns: 1fr; }
@media (min-width: 768px) {
  .svc-target__grid { grid-template-columns: repeat(2, 1fr); }
}
.svc-target__card { background: #fff;
  border: 1px solid var(--color-border-subtle);
  border-radius: 4px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: border-color var(--duration-transition) var(--easing-default), transform var(--duration-transition) var(--easing-default), box-shadow var(--duration-transition) var(--easing-default); }
.svc-target__card:hover { border-color: var(--color-blue-300);
  transform: translateY(-3px);
  box-shadow: var(--shadow-elevated); }
.svc-target__icon { width: 48px; height: 48px;
  color: var(--color-ui-primary); }
.svc-target__title { font-family: var(--font-heading-3-family);
  font-size: 18px; font-weight: 700;
  line-height: 1.5;
  color: var(--color-text-heading);
  margin: 0;
  letter-spacing: 0.02em; }
.svc-target__desc { font-size: 14px; line-height: 1.95;
  color: var(--color-text-body);
  margin: 0; }
.svc-target__card-link { margin-top: auto;
  padding-top: 8px;
  font-weight: 700;
  font-size: 14px;
  color: var(--color-ui-primary); }
.svc-target__card-link:hover { color: var(--color-cta-primary); text-decoration: none; }
.svc-features { padding-block: clamp(72px, 9vh, 112px);
  background: #fff; }
.svc-features__inner { max-width: 1200px; margin-inline: auto;
  padding-inline: var(--space-gutter); }
.svc-features__head { text-align: center;
  margin-bottom: 48px; }
.svc-features__h2 { font-family: var(--font-heading-1-family);
  font-size: clamp(26px, 3.4vw, 36px);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-text-heading);
  margin: 0; }
.svc-features__grid { display: grid; gap: 28px;
  grid-template-columns: 1fr;
  align-items: stretch; }
@media (min-width: 768px) {
  .svc-features__grid { grid-template-columns: repeat(3, 1fr); }
}
.svc-feature__media { aspect-ratio: 16 / 10;
  background: var(--color-bg-subtle);
  overflow: hidden; }
.svc-feature__media img { width: 100%; height: 100%;
  object-fit: cover; display: block; }
.svc-flow__h2 { font-family: var(--font-heading-1-family);
  font-size: clamp(26px, 3.4vw, 36px);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-text-heading);
  margin: 0; }
.svc-flow__step + .svc-flow__step { border-top: 1px dashed var(--color-border-subtle); }
.svc-flow__desc { font-size: 14px; line-height: 1.95;
  color: var(--color-text-body);
  margin: 0; }
.svc-price__h2 { font-family: var(--font-heading-1-family);
  font-size: clamp(26px, 3.4vw, 36px);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-text-heading);
  margin: 0 0 32px; }
.svc-price__card { background: var(--color-bg-subtle);
  border: 1px solid var(--color-border-subtle);
  border-radius: 4px;
  padding: 36px 28px; }
.svc-price__amount { font-family: var(--font-heading-1-family);
  font-size: clamp(28px, 4.2vw, 40px);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--color-ui-primary);
  margin: 0 0 12px; }
.svc-related__grid { display: grid; gap: 22px;
  grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .svc-related__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .svc-related__grid { grid-template-columns: repeat(3, 1fr); }
}
.svc-related__card-cat { font-family: var(--font-body-family);
  font-size: 11px; letter-spacing: 0.18em; font-weight: 700;
  color: var(--color-ui-primary); }
.svc-related__card-arrow { margin-top: auto; padding-top: 10px;
  font-size: 13px; font-weight: 700;
  color: var(--color-ui-primary); }

/* --- from comp-svc-hr-bot.html --- */
.hb-hero { position: relative; isolation: isolate;
  height: 70vh;
  min-height: 540px;
  display: grid;
  grid-template-rows: 1fr auto;
  padding-top: 72px;
  overflow: hidden;
  color: #fff; }
.hb-hero__bg { position: absolute; inset: 0; z-index: -2; }
.hb-hero__bg img { width: 100%; height: 100%;
  object-fit: cover;
  object-position: center; }
.hb-hero__overlay { position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(0,20,55,0.45) 0%, rgba(0,20,55,0.18) 30%, rgba(0,15,45,0.90) 100%),
    radial-gradient(ellipse 70% 55% at center 75%, rgba(0,15,45,0.65) 0%, transparent 72%); }
.hb-hero__inner { align-self: end;
  width: 100%;
  padding: 0 0 clamp(72px, 11vh, 120px);
  text-align: center; }
.hb-hero__container { max-width: 1100px; margin-inline: auto;
  padding-inline: clamp(20px, 6vw, 64px); }
.hb-hero__category { display: inline-block;
  font-family: var(--font-body-family);
  font-size: 12px; font-weight: 700; letter-spacing: 0.28em;
  color: rgba(255,255,255,0.95);
  margin-bottom: 24px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.45); }
.hb-hero__h1 { font-family: var(--font-heading-1-family);
  font-weight: 800;
  font-size: clamp(30px, 5.2vw, 60px);
  line-height: 1.32;
  letter-spacing: 0.02em;
  color: #fff;
  margin: 0 auto 22px;
  max-width: 20em;
  text-shadow:
    0 2px 12px rgba(0,15,45,0.55),
    0 8px 48px rgba(0,15,45,0.45); }
.hb-hero__lead { font-family: var(--font-heading-1-family);
  font-size: clamp(15px, 1.5vw, 18px);
  font-weight: 500;
  line-height: 1.85;
  color: #fff;
  margin: 0 auto 32px;
  max-width: 44em;
  text-shadow: 0 2px 10px rgba(0,15,45,0.5); }
.hb-hero__cta-row { display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center; }
.hb-hero__cta-ghost { color: #fff;
  border-color: rgba(255,255,255,0.5);
  background: transparent; }
.hb-hero__cta-ghost:hover { background: rgba(255,255,255,0.08);
  border-color: #fff;
  color: #fff; }
.hb-bubble { font-family: var(--font-body-family);
  font-size: 13px;
  line-height: 1.7;
  padding: 12px 14px;
  border-radius: 6px;
  max-width: 92%; }
.hb-bubble--q { align-self: flex-end;
  background: rgba(30,144,255,0.20);
  color: #fff;
  border: 1px solid rgba(30,144,255,0.32); }
.hb-bubble--a { align-self: flex-start;
  background: rgba(255,255,255,0.92);
  color: var(--color-text-heading);
  border: 1px solid rgba(255,255,255,0.6); }
.hb-bubble__role { display: block;
  font-family: var(--font-body-family);
  font-size: 10px; font-weight: 700; letter-spacing: 0.18em;
  margin-bottom: 4px;
  opacity: 0.78; }
.hb-bubble--a .hb-bubble__role { color: var(--color-ui-primary); }
.hb-overview { padding-block: clamp(72px, 9vh, 112px); background: #fff; }
.hb-overview__inner { max-width: 1200px; margin-inline: auto;
  padding-inline: var(--space-gutter);
  display: grid; gap: 40px;
  grid-template-columns: 1fr; }
@media (min-width: 1024px) {
  .hb-overview__inner { grid-template-columns: 1.3fr 1fr; align-items: center; gap: 56px; }
}
/* 2026-05-06: 旧 .hb-overview__body p は <p class="eyebrow"> も巻き込み、specificity 上 .eyebrow を上書きして
   hr-bot ページの OVERVIEW 英見出しが他セクション（TARGET / FEATURES / FLOW / PRICE / FAQ）と異なる見た目になっていた。
   eyebrow を除外して本文段落のみに本文タイポを当てる。 */
.hb-overview__body p:not(.eyebrow) { font-size: 15px;
  line-height: 2.0;
  color: var(--color-text-body);
  margin: 0 0 18px; }
.hb-overview__body p:not(.eyebrow):last-child { margin-bottom: 0; }
.hb-overview__visual { background: var(--color-bg-subtle);
  border: 1px solid var(--color-border-subtle);
  border-radius: 4px;
  padding: 28px 24px;
  display: flex; flex-direction: column; gap: 12px; }
.hb-overview__visual-caption { font-family: var(--font-body-family);
  font-size: 11px;
  letter-spacing: 0.18em;
  font-weight: 700;
  color: var(--color-ui-primary);
  margin: 0 0 6px; }
.hb-overview__visual .hb-bubble--q { background: rgba(0,95,196,0.10); color: var(--color-text-heading); border-color: rgba(0,95,196,0.22); }
.hb-overview__visual .hb-bubble--a { background: #fff; color: var(--color-text-heading); border-color: var(--color-border-subtle); }
.hb-note-separate { margin: 28px 0 0;
  padding: 18px 0;
  background: transparent;
  border-left: none;
  border-radius: 0;
  border-top: 1px solid var(--color-border-subtle);
  border-bottom: 1px solid var(--color-border-subtle);
  font-size: 14px;
  line-height: 1.95;
  color: var(--color-text-body); }
.hb-note-separate strong { display: block;
  text-transform: uppercase;
  font-family: var(--font-body-family);
  font-size: 11px;
  letter-spacing: 0.22em;
  font-weight: 700;
  color: var(--color-text-secondary);
  margin-bottom: 8px; }
.hb-target { padding-block: clamp(72px, 9vh, 112px); background: var(--color-bg-subtle); }
.hb-target__inner { max-width: 1200px; margin-inline: auto; padding-inline: var(--space-gutter); }
.hb-target__grid { display: grid; gap: 24px;
  grid-template-columns: 1fr;
  margin-top: 32px; }
@media (min-width: 640px) { .hb-target__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .hb-target__grid { grid-template-columns: repeat(3, 1fr); } }
.hb-card { background: #fff;
  border: 1px solid var(--color-border-subtle);
  border-radius: 4px;
  padding: 26px 24px 24px;
  display: flex; flex-direction: column; gap: 12px;
  transition: border-color var(--duration-transition) var(--easing-default), transform var(--duration-transition) var(--easing-default), box-shadow var(--duration-transition) var(--easing-default); }
.hb-card:hover { border-color: var(--color-blue-300);
  transform: translateY(-3px);
  box-shadow: var(--shadow-elevated); }
.hb-card__icon { width: 40px; height: 40px;
  color: var(--color-ui-primary);
  flex-shrink: 0; }
.hb-card__title { font-family: var(--font-heading-3-family);
  font-size: 17px; font-weight: 700;
  line-height: 1.45;
  color: var(--color-text-heading);
  margin: 0;
  letter-spacing: 0.02em; }
.hb-card__desc { font-size: 14px;
  line-height: 1.9;
  color: var(--color-text-body);
  margin: 0; }
.hb-features { padding-block: clamp(72px, 9vh, 112px); background: #fff; }
.hb-features__inner { max-width: 1200px; margin-inline: auto; padding-inline: var(--space-gutter); }
.hb-features__list { display: grid; gap: 0;
  grid-template-columns: 1fr;
  margin-top: 32px;
  border-top: 1px solid var(--color-border-subtle); }
@media (min-width: 1024px) { .hb-features__list { grid-template-columns: repeat(3, 1fr); gap: 56px; border-top: none; } }
.hb-feature { background: transparent;
  border-radius: 0;
  padding: 32px 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  border-top: none;
  border-bottom: 1px solid var(--color-border-subtle);
  align-content: start; }
@media (min-width: 1024px) {
  .hb-feature { border-bottom: none; padding: 0; }
}
.hb-feature__num { font-family: 'Fraunces', serif;
  font-style: normal;
  font-weight: 500;
  font-size: 36px;
  line-height: 1;
  color: var(--color-text-heading);
  letter-spacing: 0.04em;
  display: block;
  margin: 0 0 10px 0;
  height: 36px;
  margin: 0 0 4px 0; }
.hb-feature__title { font-family: var(--font-heading-2-family);
  font-size: 17px; font-weight: 700;
  line-height: 1.5;
  color: var(--color-text-heading);
  margin: 0; }
.hb-feature__desc { font-size: 14px;
  line-height: 1.95;
  color: var(--color-text-body);
  margin: 0; }
.hb-flow { padding-block: clamp(72px, 9vh, 112px); background: var(--color-bg-subtle); }
.hb-flow__inner { max-width: 1200px; margin-inline: auto; padding-inline: var(--space-gutter); }
.hb-flow__steps { display: grid; gap: 18px;
  grid-template-columns: 1fr;
  margin-top: 32px; }
@media (min-width: 768px) { .hb-flow__steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .hb-flow__steps { grid-template-columns: repeat(4, 1fr); gap: 20px; } }
.hb-step { background: #fff;
  border: 1px solid var(--color-border-subtle);
  border-radius: 4px;
  padding: 22px 22px 24px;
  display: flex; flex-direction: column; gap: 10px;
  position: relative; }
.hb-step__num { font-family: var(--font-body-family);
  font-size: 11px; font-weight: 700; letter-spacing: 0.22em;
  color: var(--color-ui-primary);
  margin: 0 0 4px; }
.hb-step__title { font-family: var(--font-heading-3-family);
  font-size: 16px; font-weight: 700;
  line-height: 1.5;
  color: var(--color-text-heading);
  margin: 0; }
.hb-step__desc { font-size: 13.5px;
  line-height: 1.85;
  color: var(--color-text-body);
  margin: 0; }
.hb-flow__notice { margin: 28px 0 0;
  font-size: 13px;
  color: var(--color-text-secondary);
  line-height: 1.85; }
.hb-price { padding-block: clamp(72px, 9vh, 112px); background: #fff; }
.hb-price__inner { max-width: 880px; margin-inline: auto; padding-inline: var(--space-gutter); text-align: left; }
.hb-price__box { margin-top: 28px;
  padding: 32px 30px;
  background: linear-gradient(135deg, rgba(0,95,196,0.04) 0%, rgba(30,144,255,0.06) 100%);
  border: 1px solid var(--color-blue-300);
  border-radius: 6px; }
.hb-price__amount { font-family: var(--font-heading-1-family);
  font-size: clamp(28px, 3.6vw, 38px);
  font-weight: 700;
  color: var(--color-text-heading);
  letter-spacing: 0.02em;
  margin: 0 0 12px;
  line-height: 1.3; }
.hb-price__amount em { font-style: italic; font-family: 'Fraunces', serif; font-weight: 500;
  font-variation-settings: "opsz" 144;
  color: var(--color-ui-primary);
  font-size: 0.65em;
  margin-left: 6px; }
.hb-price__note { font-size: 14.5px;
  line-height: 1.95;
  color: var(--color-text-body);
  margin: 0; }
@media (min-width: 640px) { .hb-related__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .hb-related__grid { grid-template-columns: repeat(3, 1fr); } }

/* --- from comp-svc-ai-implementation.html --- */
.site-nav__sub a.is-active { color: var(--color-ui-primary); font-weight: 700; }
.breadcrumb__list { display: flex; flex-wrap: wrap; gap: 4px 10px;
  color: var(--color-text-secondary);
  list-style: none; }
.breadcrumb__list li { display: inline-flex; align-items: center; }
.breadcrumb__list li + li::before { content: "›"; margin-right: 10px; color: var(--color-text-muted); }
.breadcrumb__list a { color: var(--color-text-secondary); }
.breadcrumb__list a:hover { color: var(--color-ui-primary); }
.breadcrumb__list [aria-current="page"] { color: var(--color-text-heading); font-weight: 700; }
.svc-hero__buttons { display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center; }
.svc-detail { padding-block: clamp(64px, 8vh, 96px); }
.svc-detail--alt { background: var(--color-bg-subtle); }
.svc-detail__inner { max-width: 1200px; margin-inline: auto;
  padding-inline: var(--space-gutter); }
.svc-detail__head { max-width: 760px;
  margin-bottom: 36px; }
.svc-detail__eyebrow { display: inline-block;
  font-family: var(--font-body-family);
  font-size: 12px; font-weight: 700; letter-spacing: 0.22em;
  color: var(--color-ui-primary);
  margin-bottom: 14px; }
.svc-detail__h2 { font-family: var(--font-heading-2-family);
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--color-text-heading);
  margin: 0 0 18px; }
.svc-detail__lead { font-size: 15px; line-height: 1.95;
  color: var(--color-text-body);
  margin: 0; }
.svc-overview__paragraphs { display: flex;
  flex-direction: column;
  gap: 20px;
  font-size: 15px;
  line-height: 2;
  color: var(--color-text-body); }
.svc-overview__flow { margin: 40px auto 0;
  padding: 28px 16px;
  background: #fff;
  border: 1px solid var(--color-border-subtle);
  border-radius: 4px;
  overflow: hidden; }
.svc-overview__flow-caption { font-family: var(--font-body-family);
  font-size: 12px; font-weight: 700; letter-spacing: 0.22em;
  color: var(--color-ui-primary);
  text-align: center;
  margin: 0 0 18px; }
.svc-overview__flow-svg-wrap { width: 100%;
  overflow-x: auto; }
.svc-overview__flow-svg { width: 100%;
  height: auto;
  min-width: 0;
  max-width: 100%;
  margin: 0 auto;
  display: block; }
@media (min-width: 768px) {
  .svc-target-grid { grid-template-columns: repeat(3, 1fr); }
}
.svc-target-card__desc { font-size: 14px;
  line-height: 1.85;
  color: var(--color-text-body);
  margin: 0; }
@media (min-width: 768px) {
  .svc-feature { grid-template-columns: 64px 1fr; gap: 28px; padding: 32px; }
}
.svc-steps { display: flex;
  flex-direction: column;
  gap: 0;
  position: relative; }
.svc-step { display: grid;
  grid-template-columns: 56px 1fr;
  gap: 20px;
  padding: 22px 0;
  border-top: 1px solid var(--color-border-subtle);
  align-items: start; }
.svc-step:first-child { border-top: 2px solid var(--color-ui-primary); padding-top: 26px; }
.svc-step:last-child { padding-bottom: 6px; }
.svc-step__num { display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--color-ui-primary);
  color: #fff;
  font-family: var(--font-heading-3-family);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.02em; }
.svc-step__body { display: flex; flex-direction: column; gap: 6px; padding-top: 6px; }
.svc-step__title { font-family: var(--font-heading-3-family);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-text-heading);
  letter-spacing: 0.02em;
  margin: 0; }
.svc-step__desc { font-size: 14px;
  line-height: 1.9;
  color: var(--color-text-body);
  margin: 0; }
.svc-pricing { margin: 0 auto;
  max-width: 780px;
  padding: 40px 32px;
  background: #fff;
  border: 1px solid var(--color-border-subtle);
  border-radius: 4px;
  text-align: center; }
.svc-pricing__title { font-family: var(--font-heading-3-family);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-ui-primary);
  margin: 0 0 14px; }
.svc-pricing__desc { font-size: 15px;
  line-height: 1.95;
  color: var(--color-text-body);
  margin: 0 0 20px; }
.svc-pricing__cta { display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700;
  font-size: 14px;
  color: var(--color-cta-primary); }
.svc-pricing__cta:hover { color: var(--color-cta-primary-hover); text-decoration: none; }
@media (min-width: 768px) {
  .svc-related-grid { grid-template-columns: 1fr 1fr; }
}
.svc-related-card__label { font-family: var(--font-body-family);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--color-ui-primary);
  margin: 0; }
.svc-related-card__link:hover { color: var(--color-cta-primary); text-decoration: none; }

/* --- from comp-svc-ai-techcamp.html --- */
.tc-hero { position: relative; isolation: isolate;
  height: 70vh;
  min-height: 540px;
  display: grid;
  grid-template-rows: 1fr auto;
  padding-top: 72px;
  overflow: hidden;
  color: #fff; }
.tc-hero__bg { position: absolute; inset: 0; z-index: -2; }
.tc-hero__bg img { width: 100%; height: 100%;
  object-fit: cover;
  object-position: center; }
.tc-hero__overlay { position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(0,20,55,0.45) 0%, rgba(0,20,55,0.18) 30%, rgba(0,15,45,0.90) 100%),
    radial-gradient(ellipse 70% 55% at center 75%, rgba(0,15,45,0.65) 0%, transparent 72%); }
.tc-hero__inner { align-self: end;
  width: 100%;
  padding: 0 0 clamp(72px, 11vh, 120px);
  text-align: center; }
.tc-hero__container { max-width: 1100px; margin-inline: auto;
  padding-inline: clamp(20px, 6vw, 64px); }
.tc-hero__category { display: inline-block;
  font-family: var(--font-body-family);
  font-size: 12px; font-weight: 700; letter-spacing: 0.28em;
  color: rgba(255,255,255,0.95);
  margin-bottom: 24px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.45); }
.tc-hero__h1 { font-family: var(--font-heading-1-family);
  font-weight: 800;
  font-size: clamp(30px, 5.2vw, 60px);
  line-height: 1.32;
  letter-spacing: 0.02em;
  color: #fff;
  margin: 0 auto 22px;
  max-width: 20em;
  text-shadow:
    0 2px 12px rgba(0,15,45,0.55),
    0 8px 48px rgba(0,15,45,0.45); }
.tc-hero__lead { font-family: var(--font-heading-1-family);
  font-size: clamp(15px, 1.5vw, 18px);
  font-weight: 500;
  line-height: 1.85;
  color: #fff;
  margin: 0 auto 32px;
  max-width: 44em;
  text-shadow: 0 2px 10px rgba(0,15,45,0.5); }
.tc-hero__cta { display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center; }
.tc-hero__cta-ghost { color: #fff;
  border-color: rgba(255,255,255,0.5);
  background: transparent; }
.tc-hero__cta-ghost:hover { background: rgba(255,255,255,0.08);
  border-color: #fff;
  color: #fff; }
.tc-overview { padding-block: clamp(72px, 9vh, 112px);
  background: #fff; }
.tc-overview__inner { max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--space-gutter); }
.tc-overview__head { max-width: 820px;
  margin-bottom: 40px; }
.tc-overview__h2 { font-family: var(--font-heading-1-family);
  font-weight: 600;
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.45;
  letter-spacing: 0.02em;
  color: var(--color-text-heading);
  margin: 0; }
.tc-overview__grid { display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  align-items: start; }
@media (min-width: 768px) {
  .tc-overview__grid {
    grid-template-columns: 1fr 0.85fr;
    gap: 56px;
  }
}
.tc-overview__body p { font-size: 15px;
  line-height: 2;
  color: var(--color-text-body);
  margin: 0 0 22px; }
.tc-overview__body p:last-child { margin-bottom: 0; }
.tc-overview__media { width: 100%;
  border-radius: 4px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--color-bg-subtle);
  position: sticky;
  top: 96px; }
.tc-overview__media img { width: 100%; height: 100%;
  object-fit: cover;
  display: block; }
.tc-targets { padding-block: clamp(72px, 9vh, 112px);
  background: var(--color-bg-subtle); }
.tc-targets__inner { max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--space-gutter); }
.tc-targets__head { max-width: 760px;
  margin-bottom: 36px; }
.tc-targets__grid { display: grid;
  grid-template-columns: 1fr;
  gap: 22px; }
@media (min-width: 640px) {
  .tc-targets__grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}
.tc-target-card { background: #fff;
  border: 1px solid var(--color-border-subtle);
  border-radius: 4px;
  padding: 32px 26px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: border-color var(--duration-transition) var(--easing-default), transform var(--duration-transition) var(--easing-default), box-shadow var(--duration-transition) var(--easing-default); }
.tc-target-card:hover { border-color: var(--color-blue-300);
  transform: translateY(-3px);
  box-shadow: var(--shadow-elevated); }
.tc-target-card__icon { width: 44px;
  height: 44px;
  color: var(--color-ui-primary);
  flex-shrink: 0; }
.tc-target-card__title { font-family: var(--font-heading-3-family);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--color-text-heading);
  margin: 0;
  letter-spacing: 0.02em; }
.tc-target-card__desc { font-size: 14px;
  line-height: 1.95;
  color: var(--color-text-body);
  margin: 0; }
.tc-features { padding-block: clamp(72px, 9vh, 112px);
  background: #fff; }
.tc-features__inner { max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--space-gutter); }
.tc-features__head { max-width: 760px;
  margin-bottom: 40px; }
.tc-feature-list { display: grid;
  gap: 0;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--color-border-subtle); }
@media (min-width: 1024px) {
  .tc-feature-list { grid-template-columns: repeat(3, 1fr); gap: 56px; border-top: none; }
}
.tc-feature { display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  padding: 32px 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--color-border-subtle);
  border-radius: 0;
  align-items: start;
  align-content: start; }
@media (min-width: 1024px) {
  .tc-feature { border-bottom: none; padding: 0; }
}
.tc-feature__num { font-family: 'Fraunces', serif;
  font-style: normal;
  font-weight: 500;
  font-size: 36px;
  line-height: 1;
  color: var(--color-text-heading);
  letter-spacing: 0.04em;
  display: block;
  margin: 0 0 10px 0;
  height: 36px; }
.tc-feature__body {  }
.tc-feature__title { font-family: var(--font-heading-2-family);
  font-size: clamp(18px, 2vw, 21px);
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-text-heading);
  margin: 0 0 12px;
  letter-spacing: 0.02em; }
.tc-feature__desc { font-size: 15px;
  line-height: 2;
  color: var(--color-text-body);
  margin: 0; }
.tc-flow { padding-block: clamp(72px, 9vh, 112px);
  background: var(--color-bg-subtle); }
.tc-flow__inner { max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--space-gutter); }
.tc-flow__head { max-width: 760px;
  margin-bottom: 40px; }
.tc-flow__steps { display: grid;
  gap: 18px;
  list-style: none; }
.tc-flow__step { display: grid;
  grid-template-columns: 64px 1fr;
  gap: 22px;
  padding: 24px 24px 24px 22px;
  background: #fff;
  border: 1px solid var(--color-border-subtle);
  border-radius: 4px;
  align-items: start; }
@media (min-width: 768px) {
  .tc-flow__step {
    grid-template-columns: 80px 1fr;
    padding: 28px 28px 28px 26px;
    gap: 28px;
  }
}
.tc-flow__step-num { display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--color-ui-primary);
  color: #fff;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-variation-settings: "opsz" 144;
  font-weight: 500;
  font-size: 22px;
  letter-spacing: 0.02em; }
@media (min-width: 768px) {
  .tc-flow__step-num { width: 80px; height: 80px; font-size: 26px; }
}
.tc-flow__step-title { font-family: var(--font-heading-3-family);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--color-text-heading);
  margin: 0 0 10px;
  letter-spacing: 0.02em; }
.tc-flow__step-desc { font-size: 14px;
  line-height: 1.95;
  color: var(--color-text-body);
  margin: 0; }
.tc-price { padding-block: clamp(72px, 9vh, 112px);
  background: #fff; }
.tc-price__inner { max-width: 1000px;
  margin-inline: auto;
  padding-inline: var(--space-gutter); }
.tc-price__head { max-width: 760px;
  margin-bottom: 36px; }
.tc-price__grid { display: grid;
  grid-template-columns: 1fr;
  gap: 22px; }
@media (min-width: 768px) {
  .tc-price__grid { grid-template-columns: 1fr 1fr; gap: 28px; }
}
.tc-price-card { padding: 32px 28px;
  border: 1px solid var(--color-border-subtle);
  border-radius: 4px;
  background: #fff; }
.tc-price-card--accent { background: rgba(0,95,196,0.04);
  border-color: var(--color-blue-300); }
.tc-price-card__label { display: inline-block;
  font-family: var(--font-body-family);
  font-size: 11px;
  letter-spacing: 0.18em;
  font-weight: 700;
  color: var(--color-ui-primary);
  margin-bottom: 14px; }
.tc-price-card__title { font-family: var(--font-heading-2-family);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-text-heading);
  margin: 0 0 14px;
  letter-spacing: 0.02em; }
.tc-price-card__desc { font-size: 14px;
  line-height: 1.95;
  color: var(--color-text-body);
  margin: 0; }
@media (min-width: 768px) {
}

/* --- from comp-svc-techlete.html --- */
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--color-border-focus); outline-offset: 2px; border-radius: 2px; }
.svc-hero__cta .btn--ghost { color: #fff;
  border-color: rgba(255,255,255,0.5);
  background: transparent; }
.svc-hero__cta .btn--ghost:hover { background: rgba(255,255,255,0.08);
  border-color: #fff;
  color: #fff; }
.svc-area--white { background: #fff; }
.svc-area--alt { background: var(--color-bg-subtle); }
.svc-area__inner--narrow { max-width: 880px; }
.tr-overview__text { font-size: 16px; line-height: 1.95;
  color: var(--color-text-body);
  margin: 0 0 18px; }
.tr-overview__text:last-child { margin-bottom: 0; }
.tr-overview__deliv { display: block;
  margin: 8px 0 0;
  padding: 16px 20px;
  background: var(--color-bg-subtle);
  border-radius: 3px;
  font-size: 14px;
  line-height: 1.85;
  color: var(--color-text-body); }
.tr-overview__deliv strong { display: block;
  font-family: var(--font-body-family);
  font-size: 11px;
  letter-spacing: 0.18em;
  font-weight: 700;
  color: var(--color-ui-primary);
  margin-bottom: 6px; }
.tr-timeline-fig { margin: 28px 0 12px;
  padding: 24px;
  background: #fff;
  border: 1px solid var(--color-border-subtle);
  border-radius: 4px;
  max-width: 720px; }
.tr-timeline-fig__caption { font-family: var(--font-body-family);
  font-size: 12px;
  letter-spacing: 0.22em;
  font-weight: 700;
  color: var(--color-ui-primary);
  margin: 0 0 16px;
  text-align: center; }
.tr-timeline-fig__svg-wrap { width: 100%;
  overflow-x: auto; }
.tr-timeline-fig__svg { width: 100%;
  height: auto;
  min-width: 560px;
  max-width: 660px;
  margin: 0 auto;
  display: block; }
.tr-grid-3 { display: grid; gap: 24px;
  grid-template-columns: 1fr; }
@media (min-width: 720px) { .tr-grid-3 { grid-template-columns: repeat(3, 1fr); } }
.tr-target-card { background: #fff;
  border: 1px solid var(--color-border-subtle);
  border-radius: 4px;
  padding: 28px 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color var(--duration-transition) var(--easing-default), transform var(--duration-transition) var(--easing-default), box-shadow var(--duration-transition) var(--easing-default); }
.tr-target-card:hover { border-color: var(--color-blue-300);
  transform: translateY(-3px);
  box-shadow: var(--shadow-elevated); }
.tr-target-card__icon { width: 44px; height: 44px;
  color: var(--color-ui-primary);
  flex-shrink: 0; }
.tr-target-card__title { font-family: var(--font-heading-3-family);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-text-heading);
  margin: 4px 0 0;
  letter-spacing: 0.02em; }
.tr-target-card__desc { font-size: 14px;
  line-height: 1.85;
  color: var(--color-text-body);
  margin: 0; }
.tr-strengths { display: grid;
  gap: 0;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--color-border-subtle); }
@media (min-width: 768px) { .tr-strengths { grid-template-columns: repeat(2, 1fr); gap: 0 56px; border-top: none; } }
@media (min-width: 1024px) { .tr-strengths { grid-template-columns: repeat(4, 1fr); gap: 56px; } }
.tr-strength { background: transparent;
  border: none;
  border-bottom: 1px solid var(--color-border-subtle);
  border-radius: 0;
  padding: 32px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  overflow: visible; }
.tr-strength::before { content: none; }
@media (min-width: 1024px) {
  .tr-strength { border-bottom: none; padding: 0; }
}
.tr-strength__num { font-family: 'Fraunces', serif;
  font-style: italic;
  font-variation-settings: "opsz" 144;
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--color-ui-primary);
  margin: 0; }
.tr-strength__title { font-family: var(--font-heading-2-family);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-text-heading);
  margin: 0;
  letter-spacing: 0.02em; }
.tr-strength__icon { width: 36px; height: 36px;
  color: var(--color-ui-primary);
  margin-bottom: 4px; }
.tr-strength__desc { font-size: 14px;
  line-height: 1.9;
  color: var(--color-text-body);
  margin: 4px 0 0; }
.tr-flow { position: relative;
  display: grid;
  gap: 24px;
  padding-left: 36px;
  list-style: none; }
.tr-flow::before { content: "";
  position: absolute;
  left: 12px; top: 8px; bottom: 8px;
  width: 2px;
  background: var(--color-blue-200);
  border-radius: 1px; }
.tr-flow__item { position: relative;
  background: #fff;
  border: 1px solid var(--color-border-subtle);
  border-radius: 4px;
  padding: 22px 24px 22px; }
.tr-flow__item::before { content: "";
  position: absolute;
  left: -36px;
  top: 22px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--color-ui-primary);
  box-shadow: 0 0 0 4px var(--color-bg-subtle); }
.tr-flow__num { font-family: 'Fraunces', serif;
  font-style: italic;
  font-variation-settings: "opsz" 144;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--color-ui-primary);
  margin: 0 0 4px; }
.tr-flow__title { font-family: var(--font-heading-2-family);
  font-size: 17px;
  font-weight: 700;
  color: var(--color-text-heading);
  margin: 0 0 8px;
  letter-spacing: 0.02em;
  line-height: 1.5; }
.tr-flow__period { display: inline-block;
  font-family: var(--font-body-family);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--color-ui-primary);
  background: rgba(0,95,196,0.08);
  padding: 3px 10px;
  border-radius: 2px;
  margin-bottom: 10px; }
.tr-flow__desc { font-size: 14px;
  line-height: 1.9;
  color: var(--color-text-body);
  margin: 0; }
.tr-price { background: #fff;
  border: 1px solid var(--color-border-subtle);
  border-radius: 4px;
  padding: 36px 32px;
  text-align: center;
  display: grid;
  gap: 24px;
  justify-items: center;
  max-width: 720px;
  margin-inline: auto; }
.tr-price__text { font-size: 15px;
  line-height: 1.95;
  color: var(--color-text-body);
  margin: 0; }
.tr-price__cta { white-space: nowrap; }
@media (min-width: 768px) { .tr-related { grid-template-columns: 1fr 1fr; } }

/* --- from comp-recruit.html --- */
.rec-hero { position: relative; isolation: isolate;
  height: 100vh;
  min-height: 640px;
  display: grid;
  grid-template-rows: 1fr auto;
  padding-top: 72px;
  overflow: hidden;
  color: #fff; }
.rec-hero__bg { position: absolute; inset: 0; z-index: -2; }
.rec-hero__bg img { width: 100%; height: 100%;
  object-fit: cover;
  object-position: center; }
.rec-hero__overlay { position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(0,20,55,0.45) 0%, rgba(0,20,55,0.18) 35%, rgba(0,15,45,0.88) 100%),
    radial-gradient(ellipse 72% 55% at center 75%, rgba(0,15,45,0.62) 0%, transparent 72%); }
.rec-hero__inner { align-self: end;
  width: 100%;
  padding: 0 0 clamp(96px, 14vh, 160px);
  text-align: center; }
.rec-hero__container { max-width: 1100px; margin-inline: auto;
  padding-inline: clamp(20px, 6vw, 64px); }
.rec-hero__eyebrow { display: inline-block;
  font-family: var(--font-body-family);
  font-size: 13px; font-weight: 700; letter-spacing: 0.32em;
  color: rgba(255,255,255,0.95);
  margin-bottom: 28px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.45); }
.rec-hero__h1 { font-family: var(--font-heading-1-family);
  font-weight: 800;
  font-size: clamp(32px, 5.4vw, 64px);
  line-height: 1.32;
  letter-spacing: 0.02em;
  color: #fff;
  margin: 0 auto 28px;
  max-width: 18em;
  text-shadow:
    0 2px 12px rgba(0,15,45,0.55),
    0 8px 48px rgba(0,15,45,0.45),
    0 1px 0 rgba(0,0,0,0.35); }
.rec-hero__sub { font-family: var(--font-heading-1-family);
  font-size: clamp(17px, 1.7vw, 21px);
  font-weight: 500;
  line-height: 1.75;
  color: #fff;
  margin: 0 auto 18px;
  max-width: 36em;
  text-shadow:
    0 2px 12px rgba(0,15,45,0.5),
    0 4px 24px rgba(0,15,45,0.35); }
.rec-hero__lead { font-size: clamp(14px, 1.2vw, 16px);
  font-weight: 400;
  line-height: 1.95;
  color: rgba(255,255,255,0.92);
  margin: 0 auto 36px;
  max-width: 48em;
  text-shadow: 0 2px 10px rgba(0,15,45,0.45); }
.rec-hero__buttons { display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center; }
.rec-hero__buttons .btn--ghost { color: #fff;
  border-color: rgba(255,255,255,0.5);
  background: transparent; }
.rec-hero__buttons .btn--ghost:hover { background: rgba(255,255,255,0.08);
  border-color: #fff;
  color: #fff; }
.rec-hero__placeholder--legacy { display: none;
  text-align: center;
  line-height: 1.7; }

/* 採用ヒーロー SP 調整（2026-05-04）
   SP（767px 以下）では情報密度を下げて可読性を確保:
   - リード本文を非表示（H1 + sub の 2 行構成に絞る）
   - セカンダリボタン「募集職種を見る」を非表示（CTA を 1 本に集約）
   - オーバーレイを濃くして背景画像との文字コントラスト向上
   - H1 の最小サイズを下げて折り返し位置を整える
   復活させる場合は本ブロックを削除 */
@media (max-width: 767px) {
  .rec-hero__overlay {
    background:
      linear-gradient(180deg, rgba(0,15,45,0.62) 0%, rgba(0,15,45,0.48) 35%, rgba(0,15,45,0.92) 100%),
      radial-gradient(ellipse 88% 65% at center 75%, rgba(0,15,45,0.7) 0%, transparent 75%);
  }
  .rec-hero__lead { display: none; }
  .rec-hero__buttons .btn--ghost { display: none; }
  .rec-hero__buttons {
    flex-direction: column;
    align-items: stretch;
    max-width: 320px;
    margin-inline: auto;
  }
  .rec-hero__buttons .btn { width: 100%; }
  .rec-hero__h1 {
    font-size: clamp(24px, 7vw, 40px);
    margin-bottom: 18px;
  }
  .rec-hero__sub {
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 28px;
  }
  .rec-hero__inner {
    padding: 0 0 clamp(56px, 10vh, 96px);
  }
}
.rec-about { padding-block: clamp(72px, 9vh, 112px);
  background: #fff; }
.rec-about__inner { max-width: 880px;
  margin-inline: auto;
  padding-inline: var(--space-gutter); }
.rec-about__h2 { font-family: var(--font-heading-1-family);
  font-size: clamp(26px, 3.4vw, 36px);
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-text-heading);
  margin: 0 0 32px;
  letter-spacing: 0.02em; }
.rec-about__body { font-size: 15.5px;
  line-height: 2.0;
  color: var(--color-text-body); }
.rec-about__body p { margin: 0 0 22px; }
.rec-about__body p:last-child { margin-bottom: 0; }
.rec-about__aside { float: right;
  width: 240px;
  margin: 6px 0 24px 36px;
  display: none;
  position: relative; }
.rec-about__aside::after { content: "";
  position: absolute;
  width: 64px; height: 64px;
  bottom: -18px; right: -18px;
  background: var(--color-cta-primary);
  z-index: -1;
  border-radius: 4px; }
.rec-about__aside-media { display: block;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 14px 36px rgba(0,15,45,0.14);
  position: relative;
  z-index: 1;
  background: var(--color-bg-subtle); }
.rec-about__aside-media img { width: 100%; height: auto; display: block; }
@media (min-width: 768px) {
  .rec-about__aside { display: block; }
}
.rec-about__aside-placeholder { width: 100%;
  aspect-ratio: 3 / 2;
  border-radius: 4px;
  background: var(--color-bg-subtle);
  border: 1px dashed var(--color-border-default);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 18px; }
.rec-about__aside-placeholder svg { width: 40px;
  height: 40px;
  color: var(--color-ui-primary);
  opacity: 0.5; }
.rec-about__aside-label { font-family: var(--font-body-family);
  font-size: 10px;
  letter-spacing: 0.14em;
  font-weight: 700;
  color: var(--color-text-secondary);
  text-align: center;
  line-height: 1.6; }
.rec-persona { padding-block: clamp(72px, 9vh, 112px);
  background: var(--color-bg-subtle); }
.rec-persona__inner { max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--space-gutter); }
.rec-persona__head { max-width: 760px;
  margin-bottom: 40px; }
.rec-persona__h2 { font-family: var(--font-heading-1-family);
  font-size: clamp(26px, 3.4vw, 36px);
  font-weight: 600;
  line-height: 1.36;
  color: var(--color-text-heading);
  margin: 0;
  letter-spacing: 0.02em; }
.rec-persona__grid { display: grid;
  gap: 20px;
  grid-template-columns: 1fr; }
@media (min-width: 768px) {
  .rec-persona__grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}
.rec-persona-card { background: #fff;
  border: 1px solid var(--color-border-subtle);
  border-radius: 4px;
  padding: 26px 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color var(--duration-transition) var(--easing-default), transform var(--duration-transition) var(--easing-default), box-shadow var(--duration-transition) var(--easing-default); }
.rec-persona-card:hover { border-color: var(--color-blue-300);
  transform: translateY(-2px);
  box-shadow: var(--shadow-elevated); }
.rec-persona-card__icon { width: 28px;
  height: 28px;
  color: var(--color-ui-primary);
  flex-shrink: 0; }
.rec-persona-card__title { font-family: var(--font-heading-3-family);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-text-heading);
  margin: 0;
  letter-spacing: 0.02em; }
.rec-persona-card__body { font-size: 14.5px;
  line-height: 1.85;
  color: var(--color-text-body);
  margin: 0; }
.rec-work { padding-block: clamp(72px, 9vh, 112px);
  background: #fff; }
.rec-work__inner { max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--space-gutter);
  display: grid;
  gap: 40px;
  grid-template-columns: 1fr; }
@media (min-width: 1024px) {
  .rec-work__inner { grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
}
.rec-work__h2 { font-family: var(--font-heading-1-family);
  font-size: clamp(26px, 3.4vw, 36px);
  font-weight: 600;
  line-height: 1.36;
  color: var(--color-text-heading);
  margin: 0 0 28px;
  letter-spacing: 0.02em; }
.rec-work__list { display: flex;
  flex-direction: column;
  gap: 22px; }
.rec-work__item { padding: 16px 0;
  border-bottom: 1px solid var(--color-border-subtle); }
.rec-work__item:last-child { border-bottom: none; }
.rec-work__item-label { font-family: var(--font-body-family);
  font-size: 12px;
  letter-spacing: 0.16em;
  font-weight: 700;
  color: var(--color-ui-primary);
  margin: 0 0 6px; }
.rec-work__item-body { font-size: 15px;
  line-height: 1.85;
  color: var(--color-text-body);
  margin: 0; }
.rec-work__visual { display: block;
  position: relative; }
.rec-work__visual::before { content: "";
  position: absolute;
  width: 90px; height: 90px;
  top: -20px; left: -20px;
  background: var(--color-ui-primary);
  opacity: 0.18;
  z-index: 0;
  border-radius: 4px; }
.rec-work__media { display: block;
  position: relative;
  z-index: 1;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 18px 48px rgba(0,15,45,0.16);
  background: var(--color-bg-subtle); }
.rec-work__media img { width: 100%; height: auto; display: block; }
.rec-work__placeholder { width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 4px;
  background: var(--color-bg-subtle);
  border: 1px dashed var(--color-border-default);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px; }
.rec-work__placeholder svg { width: 72px;
  height: 72px;
  color: var(--color-ui-primary);
  opacity: 0.6; }
.rec-work__placeholder-label { font-family: var(--font-body-family);
  font-size: 11px;
  letter-spacing: 0.18em;
  font-weight: 700;
  color: var(--color-text-secondary);
  text-align: center;
  line-height: 1.7; }
.rec-jobs { padding-block: clamp(72px, 9vh, 112px);
  background: var(--color-bg-subtle); }
.rec-jobs__inner { max-width: 1000px;
  margin-inline: auto;
  padding-inline: var(--space-gutter); }
.rec-jobs__head { margin-bottom: 32px; }
.rec-jobs__h2 { font-family: var(--font-heading-1-family);
  font-size: clamp(26px, 3.4vw, 36px);
  font-weight: 600;
  line-height: 1.36;
  color: var(--color-text-heading);
  margin: 0 0 16px;
  letter-spacing: 0.02em; }
.rec-jobs__lead { font-size: 15px;
  line-height: 1.85;
  color: var(--color-text-body);
  margin: 0;
  max-width: 720px; }
.rec-jobs__list { display: flex;
  flex-direction: column;
  gap: 14px; }
.rec-job { background: #fff;
  border: 1px solid var(--color-border-subtle);
  border-radius: 4px;
  overflow: hidden;
  transition: border-color var(--duration-transition) var(--easing-default); }
.rec-job[open] { border-color: var(--color-blue-300); }
.rec-job__summary { list-style: none;
  cursor: pointer;
  padding: 22px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--font-heading-3-family);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-text-heading);
  letter-spacing: 0.02em;
  transition: background var(--duration-interaction) var(--easing-default); }
.rec-job__summary::-webkit-details-marker { display: none; }
.rec-job__summary:hover { background: var(--color-ui-primary-subtle); }
.rec-job__icon { flex-shrink: 0;
  width: 24px;
  height: 24px;
  border: 1.5px solid var(--color-ui-primary);
  border-radius: 50%;
  position: relative;
  transition: transform var(--duration-transition) var(--easing-default); }
.rec-job__icon::before,
.rec-job__icon::after { content: "";
  position: absolute;
  background: var(--color-ui-primary);
  border-radius: 1px; }
.rec-job__icon::before { top: 50%;
  left: 5px;
  right: 5px;
  height: 1.5px;
  transform: translateY(-50%); }
.rec-job__icon::after { left: 50%;
  top: 5px;
  bottom: 5px;
  width: 1.5px;
  transform: translateX(-50%);
  transition: transform var(--duration-transition) var(--easing-default); }
.rec-job[open] .rec-job__icon::after { transform: translateX(-50%) rotate(90deg); }
.rec-job__body { padding: 4px 24px 26px;
  font-size: 14.5px;
  line-height: 1.9;
  color: var(--color-text-body);
  border-top: 1px solid var(--color-border-subtle);
  margin-top: 4px;
  padding-top: 22px; }
.rec-jobs__note { margin: 24px 0 0;
  padding: 16px 0;
  background: transparent;
  border-left: none;
  border-top: 1px solid var(--color-border-subtle);
  border-bottom: 1px solid var(--color-border-subtle);
  border-radius: 0;
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--color-text-body); }
.rec-flow { padding-block: clamp(72px, 9vh, 112px);
  background: #fff; }
.rec-flow__inner { max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--space-gutter); }
.rec-flow__head { margin-bottom: 40px;
  max-width: 760px; }
.rec-flow__h2 { font-family: var(--font-heading-1-family);
  font-size: clamp(26px, 3.4vw, 36px);
  font-weight: 600;
  line-height: 1.36;
  color: var(--color-text-heading);
  margin: 0;
  letter-spacing: 0.02em; }
.rec-flow__steps { display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
  position: relative;
  list-style: none; }
@media (min-width: 1024px) {
  .rec-flow__steps {
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
  }
}
.rec-flow-step { background: #fff;
  border: 1px solid var(--color-border-subtle);
  border-radius: 4px;
  padding: 24px 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  transition: border-color var(--duration-transition) var(--easing-default), transform var(--duration-transition) var(--easing-default), box-shadow var(--duration-transition) var(--easing-default); }
.rec-flow-step:hover { border-color: var(--color-blue-300);
  transform: translateY(-2px);
  box-shadow: var(--shadow-elevated); }
.rec-flow-step__num { display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-ui-primary);
  color: #fff;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-variation-settings: "opsz" 144;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.02em;
  flex-shrink: 0; }
.rec-flow-step__title { font-family: var(--font-heading-3-family);
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--color-text-heading);
  margin: 0;
  letter-spacing: 0.02em; }
.rec-flow-step__body { font-size: 13.5px;
  line-height: 1.8;
  color: var(--color-text-body);
  margin: 0; }
@media (min-width: 1024px) {
  .rec-flow-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 42px;
    right: -11px;
    width: 8px;
    height: 8px;
    border-top: 2px solid var(--color-ui-primary);
    border-right: 2px solid var(--color-ui-primary);
    transform: rotate(45deg);
    z-index: 2;
  }
}
@media (max-width: 1023px) {
  .rec-flow-step:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 38px;
    bottom: -16px;
    width: 1.5px;
    height: 14px;
    background: var(--color-ui-primary);
    z-index: 1;
  }
}
.rec-cta { padding-block: clamp(72px, 9vh, 112px);
  background: var(--color-ui-primary-subtle);
  position: relative;
  overflow: hidden; }
.rec-cta__inner { max-width: 1100px;
  margin-inline: auto;
  padding-inline: var(--space-gutter);
  text-align: center;
  position: relative; }
.rec-cta__h2 { font-family: var(--font-heading-1-family);
  font-size: clamp(24px, 3.2vw, 34px);
  font-weight: 600;
  line-height: 1.46;
  color: var(--color-text-heading);
  margin: 0 0 20px;
  letter-spacing: 0.02em; }
.rec-cta__sub { font-size: 15px;
  line-height: 1.95;
  color: var(--color-text-body);
  margin: 0 0 32px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto; }
.rec-cta__buttons { display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 16px; }
.rec-cta__sublink { display: inline-block;
  font-size: 14px;
  color: var(--color-ui-primary);
  font-weight: 500; }

/* --- from comp-contact.html --- */
.btn--block { width: 100%; min-height: 48px; }
.btn--primary.is-active { box-shadow: 0 0 0 3px rgba(213,94,0,0.18); }
.contact-hero { position: relative; isolation: isolate;
  padding: clamp(132px, 17vh, 168px) 0 clamp(56px, 7vh, 80px);
  background: #F5F5F5;
  text-align: center;
  border-bottom: 1px solid var(--color-border-subtle); }
.contact-hero__inner { max-width: 760px;
  margin-inline: auto;
  padding-inline: var(--space-gutter);
  position: relative; }
.contact-hero__eyebrow { display: inline-block;
  font-family: var(--font-body-family);
  font-size: 12px; font-weight: 700; letter-spacing: 0.32em;
  color: var(--color-ui-primary);
  margin-bottom: 18px;
  position: relative;
  padding-top: 16px; }
.contact-hero__eyebrow::before { content: ""; position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 80px; height: 4px;
  background: var(--color-ui-primary); }
.contact-hero__h1 { font-family: var(--font-heading-1-family);
  font-weight: 600;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.3;
  letter-spacing: 0.04em;
  color: var(--color-text-heading);
  margin: 0 0 18px; }
.contact-hero__lead { font-size: 15px; line-height: 1.95;
  color: var(--color-text-body);
  margin: 0 auto 22px;
  max-width: 38em;
  text-align: left; }
.contact-hero__meta { display: inline-flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 13px;
  color: var(--color-text-secondary);
  letter-spacing: 0.04em; }
.contact-hero__meta-item { display: inline-flex;
  align-items: center;
  gap: 6px; }
.contact-hero__meta-divider { display: inline-block;
  width: 1px; height: 14px;
  background: var(--color-border-default); }
.contact-hero__meta strong { color: var(--color-text-heading);
  font-weight: 700; }
.contact-form-section { padding-block: clamp(72px, 9vh, 112px);
  background: #FFFFFF; }
.contact-form-wrap { max-width: 680px;
  margin-inline: auto;
  padding-inline: var(--space-gutter); }
.contact-form-intro { margin-bottom: 32px;
  font-size: 14px;
  line-height: 1.85;
  color: var(--color-text-body); }
.contact-form-intro__required { color: var(--color-ui-primary);
  font-weight: 700; }
.contact-form { display: flex;
  flex-direction: column;
  gap: 22px; }
.contact-field { display: flex;
  flex-direction: column;
  gap: 8px; }
.contact-field__label { font-family: var(--font-body-family);
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-heading);
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: 8px; }
.contact-field__required { font-family: var(--font-body-family);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-ui-primary);
  background: rgba(0,95,196,0.08);
  padding: 2px 8px;
  border-radius: 2px; }
.contact-field__optional { font-family: var(--font-body-family);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--color-text-secondary);
  background: rgba(0,0,0,0.04);
  padding: 2px 8px;
  border-radius: 2px; }
.contact-field__hint { font-size: 12px;
  line-height: 1.7;
  color: var(--color-text-secondary);
  margin: 0; }
.contact-input,
.contact-textarea,
.contact-select { width: 100%;
  padding: 12px 14px;
  font-family: var(--font-body-family);
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text-heading);
  background: #fff;
  border: 1px solid var(--color-border-default);
  border-radius: 4px;
  transition: border-color var(--duration-interaction) var(--easing-default), box-shadow var(--duration-interaction) var(--easing-default);
  -webkit-appearance: none;
  appearance: none; }
.contact-input:focus,
.contact-textarea:focus,
.contact-select:focus { outline: none;
  border: 2px solid var(--color-ui-primary);
  padding: 11px 13px;
  box-shadow: 0 0 0 3px rgba(0,95,196,0.12); }
.contact-input.is-error,
.contact-textarea.is-error,
.contact-select.is-error { border-color: #B91C1C; }
.contact-textarea { min-height: 200px;
  resize: vertical;
  font-family: var(--font-body-family); }
.contact-select-wrap { position: relative; }
.contact-select { padding-right: 40px;
  cursor: pointer; }
.contact-select-wrap::after { content: "";
  position: absolute;
  top: 50%; right: 18px;
  width: 8px; height: 8px;
  border-right: 2px solid var(--color-ui-primary);
  border-bottom: 2px solid var(--color-ui-primary);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none; }
.contact-consent { display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 20px;
  background: rgba(0,95,196,0.04);
  border: 1px solid var(--color-border-subtle);
  border-radius: 4px;
  font-size: 14px;
  line-height: 1.75;
  color: var(--color-text-body);
  cursor: pointer; }
.contact-consent input[type="checkbox"] { flex-shrink: 0;
  width: 20px; height: 20px;
  margin: 2px 0 0;
  accent-color: var(--color-ui-primary);
  cursor: pointer; }
.contact-consent a { font-weight: 700;
  color: var(--color-ui-primary);
  text-decoration: underline;
  text-underline-offset: 3px; }
.contact-consent__required { display: inline-block;
  font-family: var(--font-body-family);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-ui-primary);
  background: rgba(0,95,196,0.10);
  padding: 2px 8px;
  border-radius: 2px;
  margin-right: 6px;
  vertical-align: 1px; }
.contact-submit { margin-top: 8px; }
.contact-form-note { margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--color-border-subtle);
  font-size: 13px;
  line-height: 1.85;
  color: var(--color-text-secondary); }
.contact-direct { padding-block: clamp(72px, 9vh, 112px);
  background: #F5F5F5; }
.contact-direct__inner { max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--space-gutter); }
.contact-direct__head { max-width: 760px;
  margin: 0 auto 36px;
  text-align: center; }
.contact-direct__eyebrow { display: inline-block;
  font-family: var(--font-body-family);
  font-size: 12px; font-weight: 700; letter-spacing: 0.22em;
  color: var(--color-ui-primary);
  margin-bottom: 14px; }
.contact-direct__h2 { font-family: var(--font-heading-1-family);
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-text-heading);
  margin: 0 0 12px;
  letter-spacing: 0.02em; }
.contact-direct__sub { font-size: 14px;
  line-height: 1.85;
  color: var(--color-text-body);
  margin: 0; }
.contact-direct__grid { display: grid;
  gap: 20px;
  grid-template-columns: 1fr; }
@media (min-width: 768px) {
  .contact-direct__grid { grid-template-columns: repeat(3, 1fr); }
}
.contact-card { background: #fff;
  border: 1px solid var(--color-border-subtle);
  border-radius: 4px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: border-color var(--duration-transition) var(--easing-default), transform var(--duration-transition) var(--easing-default), box-shadow var(--duration-transition) var(--easing-default); }
.contact-card:hover { border-color: var(--color-blue-300);
  transform: translateY(-2px);
  box-shadow: var(--shadow-elevated); }
.contact-card__icon { width: 32px;
  height: 32px;
  color: var(--color-ui-primary);
  flex-shrink: 0; }
.contact-card__title { font-family: var(--font-heading-3-family);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-text-heading);
  margin: 0;
  letter-spacing: 0.02em; }
.contact-card__body { font-size: 14px;
  line-height: 1.85;
  color: var(--color-text-body);
  margin: 0; }
.contact-card__primary { font-family: var(--font-heading-1-family);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-text-heading);
  margin: 0; }
.contact-card__primary a { color: var(--color-text-heading); }
.contact-card__primary a:hover { color: var(--color-ui-primary);
  text-decoration: none; }
.contact-card__meta { font-size: 13px;
  line-height: 1.75;
  color: var(--color-text-secondary);
  margin: 0; }
.contact-map { margin-top: 32px;
  border: 1px solid var(--color-border-subtle);
  border-radius: 4px;
  overflow: hidden;
  background: #fff; }
.contact-map__frame { width: 100%;
  height: 300px;
  display: block;
  border: 0;
  background: linear-gradient(135deg, #E8EEF5 0%, #D5DEE9 100%);
  position: relative; }
.contact-map__placeholder { position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  color: var(--color-text-secondary);
  font-size: 13px; }
.contact-map__placeholder svg { width: 32px;
  height: 32px;
  color: var(--color-ui-primary); }
.contact-faq { padding-block: clamp(72px, 9vh, 112px);
  background: #fff; }
.contact-faq__inner { max-width: 800px;
  margin-inline: auto;
  padding-inline: var(--space-gutter); }
.contact-faq__head { text-align: center;
  margin-bottom: 36px; }
.contact-faq__eyebrow { display: inline-block;
  font-family: var(--font-body-family);
  font-size: 12px; font-weight: 700; letter-spacing: 0.22em;
  color: var(--color-ui-primary);
  margin-bottom: 14px; }
.contact-faq__h2 { font-family: var(--font-heading-1-family);
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-text-heading);
  margin: 0;
  letter-spacing: 0.02em; }
.contact-faq__list { display: flex;
  flex-direction: column;
  gap: 12px; }
.contact-faq__item { background: #fff;
  border: 1px solid var(--color-border-subtle);
  border-radius: 4px;
  overflow: hidden;
  transition: border-color var(--duration-transition) var(--easing-default); }
.contact-faq__item[open] { border-color: var(--color-blue-300); }
.contact-faq__summary { list-style: none;
  cursor: pointer;
  padding: 18px 56px 18px 22px;
  position: relative;
  font-family: var(--font-body-family);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--color-text-heading);
  letter-spacing: 0.02em; }
.contact-faq__summary::-webkit-details-marker { display: none; }
.contact-faq__q-mark { display: inline-block;
  width: 22px;
  height: 22px;
  margin-right: 12px;
  border-radius: 2px;
  background: var(--color-ui-primary);
  color: #fff;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 600;
  font-size: 13px;
  line-height: 22px;
  text-align: center;
  vertical-align: -2px;
  letter-spacing: 0; }
.contact-faq__icon { position: absolute;
  top: 50%; right: 22px;
  width: 16px; height: 16px;
  transform: translateY(-50%);
  transition: transform var(--duration-interaction) var(--easing-default); }
.contact-faq__icon::before,
.contact-faq__icon::after { content: "";
  position: absolute;
  background: var(--color-ui-primary);
  transition: transform var(--duration-interaction) var(--easing-default), opacity var(--duration-interaction) var(--easing-default); }
.contact-faq__icon::before { top: 50%; left: 0; right: 0;
  height: 2px;
  transform: translateY(-50%); }
.contact-faq__icon::after { left: 50%; top: 0; bottom: 0;
  width: 2px;
  transform: translateX(-50%); }
.contact-faq__item[open] .contact-faq__icon::after { transform: translateX(-50%) rotate(90deg);
  opacity: 0; }
.contact-faq__answer { padding: 0 22px 22px 22px;
  font-size: 14px;
  line-height: 1.95;
  color: var(--color-text-body); }
.contact-faq__answer p { margin: 0; }
.contact-faq__answer a { font-weight: 700;
  color: var(--color-ui-primary); }

/* --- from comp-news.html --- */
.news-hero { position: relative; isolation: isolate;
  padding: clamp(132px, 16vh, 168px) 0 clamp(72px, 9vh, 96px);
  min-height: 320px;
  background: #F5F5F5;
  color: var(--color-text-heading);
  overflow: hidden; }
.news-hero__accent { display: none; }
.news-hero__inner { max-width: 1100px; margin-inline: auto;
  padding-inline: var(--space-gutter);
  text-align: center;
  position: relative; }
.news-hero__eyebrow { display: inline-block;
  font-family: var(--font-body-family);
  font-size: 12px; font-weight: 700; letter-spacing: 0.32em;
  color: var(--color-ui-primary);
  margin-bottom: 18px; }
.news-hero__h1 { font-family: var(--font-heading-1-family);
  font-weight: 600;
  font-size: clamp(32px, 4.6vw, 48px);
  line-height: 1.25;
  letter-spacing: 0.04em;
  margin: 0 0 18px; }
.news-hero__lead { font-size: clamp(14px, 1.3vw, 16px);
  line-height: 1.85;
  color: var(--color-text-body);
  margin: 0 auto;
  max-width: 38em; }
.news-main { padding-block: clamp(56px, 7vw, 88px);
  background: #fff; }
.news-main__inner { max-width: 1200px; margin-inline: auto;
  padding-inline: var(--space-gutter);
  display: grid;
  gap: clamp(40px, 5vw, 64px);
  grid-template-columns: 1fr; }
@media (min-width: 1024px) {
  .news-main__inner {
    grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
    align-items: start;
    gap: clamp(40px, 4vw, 56px);
  }
}
.news-filter { margin-bottom: 32px;
  border-bottom: 1px solid var(--color-border-subtle);
  padding-bottom: 18px; }
.news-filter__caption { font-family: var(--font-body-family);
  font-size: 11px;
  letter-spacing: 0.18em;
  font-weight: 700;
  color: var(--color-text-secondary);
  margin: 0 0 12px; }
.news-filter__list { display: flex;
  flex-wrap: wrap;
  gap: 8px; }
.news-filter__btn { display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-family: var(--font-body-family);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  background: #fff;
  color: var(--color-text-heading);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background var(--duration-interaction) var(--easing-default), color var(--duration-interaction) var(--easing-default), border-color var(--duration-interaction) var(--easing-default);
  text-decoration: none; }
.news-filter__btn:hover { border-color: var(--color-ui-primary);
  color: var(--color-ui-primary);
  background: var(--color-ui-primary-subtle);
  text-decoration: none; }
.news-filter__btn.is-active { background: var(--color-ui-primary);
  color: var(--color-ui-primary-on);
  border-color: var(--color-ui-primary); }
.news-filter__btn.is-active:hover { background: var(--color-ui-primary-hover);
  border-color: var(--color-ui-primary-hover);
  color: #fff; }
.news-filter__icon { width: 16px; height: 16px;
  flex-shrink: 0; }
.news-list { display: flex;
  flex-direction: column;
  gap: 24px; }
@media (min-width: 640px) {
  .news-card {
    grid-template-columns: 160px 1fr;
    gap: 24px;
    align-items: start;
  }
}
.news-card__thumb { width: 100%;
  aspect-ratio: 40 / 21; /* 1200x630 = 1.905 / source 画像と一致してクロップ回避 */
  background: var(--color-bg-elevated);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0; }
.news-card__thumb svg { width: 56%;
  height: 56%;
  color: var(--color-ui-primary); }
.news-card__thumb--press { background: var(--color-ui-primary-subtle); }
.news-card__thumb--event { background: #FFF3E6; }
.news-card__thumb--update { background: var(--color-bg-elevated); }
.news-card__thumb--event svg { color: var(--color-cta-primary); }
/* 画像版サムネ（has_post_thumbnail or カテゴリ別 default jpg） */
.news-card__thumb--image { padding: 0; overflow: hidden; background: #f5f6f8; }
.news-card__thumb--image img {
  width: 100%; height: 100%;
  object-fit: cover; /* aspect-ratio が source 画像 (40/21) と一致 → 実質クロップなし */
  display: block;
}
a.news-card__thumb--image { text-decoration: none; }
a.news-card__thumb--image:hover img { opacity: 0.95; transition: opacity 0.18s ease; }
.news-card__body { display: flex;
  flex-direction: column;
  gap: 8px; }
.news-card__badge { display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: var(--radius-pill);
  border: 1px solid currentColor;
  line-height: 1.4; }
.news-card__badge--press { color: var(--color-ui-primary);
  background: var(--color-ui-primary-subtle);
  border-color: var(--color-ui-primary); }
.news-card__badge--media { color: var(--color-blue-700);
  background: var(--color-blue-50);
  border-color: var(--color-blue-700); }
.news-card__badge--event { color: var(--color-cta-primary);
  background: #FFF3E6;
  border-color: var(--color-cta-primary); }
.news-card__badge--recruit { color: var(--color-state-success);
  background: #DCFCE7;
  border-color: var(--color-state-success); }
.news-card__badge--update { color: var(--color-text-body);
  background: var(--color-bg-elevated);
  border-color: var(--color-border-default); }
.news-card__title a { color: inherit; }
.news-card__title a:hover { color: var(--color-ui-primary); text-decoration: none; }
.news-card__lead { font-size: 14px;
  line-height: 1.85;
  color: var(--color-text-body);
  margin: 4px 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden; }
.news-card__more { font-family: var(--font-body-family);
  font-size: 13px;
  font-weight: 700;
  color: var(--color-ui-primary);
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px; }
.news-card__more:hover { color: var(--color-cta-primary); text-decoration: none; }
.news-placeholder { padding: 22px;
  border: 1px dashed var(--color-border-default);
  border-radius: var(--radius-card);
  text-align: center;
  font-size: 13px;
  color: var(--color-text-secondary);
  background: var(--color-bg-subtle); }
.news-aside { display: flex;
  flex-direction: column;
  gap: 28px; }
.news-aside__block { border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-card);
  background: #fff; }
.news-aside__heading { font-family: var(--font-heading-1-family);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-text-heading);
  margin: 0;
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border-subtle); }
.news-archive__item { border-bottom: 1px solid var(--color-border-subtle); }
.news-archive__item:last-child { border-bottom: none; }
.news-archive__summary { display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 20px;
  cursor: pointer;
  font-family: var(--font-body-family);
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-heading);
  list-style: none;
  user-select: none;
  transition: background var(--duration-interaction) var(--easing-default); }
.news-archive__summary::-webkit-details-marker { display: none; }
.news-archive__summary:hover { background: var(--color-bg-subtle); }
.news-archive__count { font-family: var(--font-body-family);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-text-secondary);
  margin-left: auto;
  padding-right: 12px; }
.news-archive__icon { width: 16px;
  height: 16px;
  color: var(--color-ui-primary);
  flex-shrink: 0;
  transition: transform var(--duration-transition) var(--easing-default); }
.news-archive__item[open] .news-archive__icon { transform: rotate(45deg); }
.news-archive__list { padding: 4px 20px 16px 36px;
  display: flex;
  flex-direction: column;
  gap: 8px; }
.news-archive__list a { font-size: 13px;
  color: var(--color-text-body);
  display: inline-flex;
  align-items: center;
  gap: 8px; }
.news-archive__list a:hover { color: var(--color-ui-primary); text-decoration: none; }
.news-cat-list { padding: 8px 0; }
.news-cat-list li { border-bottom: 1px solid var(--color-border-subtle); }
.news-cat-list li:last-child { border-bottom: none; }
.news-cat-list a { display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 20px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-heading);
  transition: background var(--duration-interaction) var(--easing-default); }
.news-cat-list a:hover { background: var(--color-bg-subtle);
  color: var(--color-ui-primary);
  text-decoration: none; }
.news-cat-list__count { font-size: 12px;
  font-weight: 700;
  color: var(--color-ui-primary);
  background: var(--color-ui-primary-subtle);
  border-radius: var(--radius-pill);
  padding: 2px 10px;
  letter-spacing: 0.04em; }
.news-pagination { margin-top: 48px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px; }
.news-pagination__item { display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  font-family: var(--font-body-family);
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-heading);
  background: #fff;
  border: 1px solid var(--color-border-default);
  border-radius: 4px;
  text-decoration: none;
  transition: background var(--duration-interaction) var(--easing-default), color var(--duration-interaction) var(--easing-default), border-color var(--duration-interaction) var(--easing-default); }
.news-pagination__item:hover { border-color: var(--color-ui-primary);
  color: var(--color-ui-primary);
  background: var(--color-ui-primary-subtle);
  text-decoration: none; }
.news-pagination__item.is-current { background: var(--color-ui-primary);
  color: var(--color-ui-primary-on);
  border-color: var(--color-ui-primary);
  pointer-events: none; }
.news-pagination__item--prev,
.news-pagination__item--next { gap: 6px; }
.news-pagination__item.is-disabled { color: var(--color-text-disabled);
  border-color: var(--color-border-subtle);
  pointer-events: none;
  background: var(--color-bg-subtle); }
.news-cta { position: relative;
  padding-block: clamp(64px, 8vw, 96px);
  background: var(--color-ui-primary-subtle);
  overflow: hidden; }
.news-cta__accent { display: none; }
.news-cta__inner { max-width: 880px;
  margin-inline: auto;
  padding-inline: var(--space-gutter);
  text-align: center;
  position: relative; }
.news-cta__h2 { font-family: var(--font-heading-1-family);
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0.02em;
  color: var(--color-text-heading);
  margin: 0 0 18px; }
.news-cta__sub { font-size: 15px;
  line-height: 1.85;
  color: var(--color-text-body);
  margin: 0 auto 32px;
  max-width: 36em; }
.news-cta__buttons { display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center; }

/* --- from comp-news-template.html --- */
.news-page { padding-top: clamp(96px, 12vh, 132px);
  padding-bottom: 0; }
.news-wrap { max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--space-gutter); }
.news-breadcrumb { font-size: 13px;
  color: var(--color-text-secondary);
  margin: 0 0 28px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  line-height: 1.6; }
.news-breadcrumb a { color: var(--color-text-secondary); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(100,116,139,0.35); }
.news-breadcrumb a:hover { color: var(--color-ui-primary); text-decoration-color: currentColor; }
.news-breadcrumb__sep { display: inline-block;
  width: 12px; height: 12px;
  color: var(--color-text-muted);
  flex-shrink: 0; }
.news-breadcrumb__current { color: var(--color-text-body);
  font-weight: 500;
  max-width: 100%; }
.news-header { border-bottom: 1px solid var(--color-border-subtle);
  padding-bottom: 28px;
  margin-bottom: 36px; }
.news-header__meta { display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
  margin-bottom: 20px; }
.news-badge { display: inline-flex;
  align-items: center;
  font-family: var(--font-body-family);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 5px 12px;
  border: 1px solid var(--color-ui-primary);
  color: var(--color-ui-primary);
  background: #fff;
  border-radius: var(--radius-tag);
  line-height: 1; }
.news-badge--press { border-color: var(--color-ui-primary); color: var(--color-ui-primary); }
.news-badge--media { border-color: var(--color-accent-emphasis); color: var(--color-accent-emphasis); }
.news-badge--event { border-color: var(--color-cta-primary); color: var(--color-cta-primary); }
.news-badge--recruit { border-color: var(--color-state-success); color: var(--color-state-success); }
.news-badge--update { border-color: var(--color-text-secondary); color: var(--color-text-secondary); }
.news-date { font-family: var(--font-body-family);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--color-text-secondary);
  font-weight: 500; }
.news-header__h1 { font-family: var(--font-heading-1-family);
  font-weight: 600;
  font-size: clamp(26px, 3.6vw, 36px);
  line-height: 1.45;
  letter-spacing: 0.02em;
  color: var(--color-text-heading);
  margin: 0 0 18px; }
.news-header__lead { font-size: 16px;
  line-height: 1.95;
  color: var(--color-text-body);
  margin: 0; }
.news-eyecatch { margin: 0 0 48px;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--color-border-subtle);
  background: var(--color-bg-elevated); }
.news-eyecatch__inner { position: relative;
  width: 100%;
  background: linear-gradient(135deg, #F1F5F9 0%, #E2E8F0 100%); }
.news-eyecatch__inner img {
  width: 100%;
  height: auto;
  display: block;
}
/* 画像なし時のプレースホルダーだけ aspect-ratio を保持 */
.news-eyecatch__inner:has(.news-eyecatch__placeholder) {
  aspect-ratio: 16 / 7;
  display: grid;
  place-items: center;
}
.news-eyecatch__placeholder { display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  color: var(--color-text-muted); }
.news-eyecatch__logo { width: 72px; height: 72px;
  color: var(--color-ui-primary);
  opacity: 0.92; }
.news-eyecatch__caption { font-family: var(--font-body-family);
  font-size: 12px;
  letter-spacing: 0.18em;
  font-weight: 700;
  color: var(--color-text-secondary); }
.news-body { display: grid;
  grid-template-columns: 1fr;
  gap: 48px; }
@media (min-width: 1024px) {
  .news-body {
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 64px;
  }
}
.news-article { font-size: 16px;
  line-height: 1.85;
  color: var(--color-text-body); }
.news-article > * + * { margin-top: 1.4em; }
.news-article h2 { font-family: var(--font-heading-1-family);
  font-weight: 600;
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.45;
  letter-spacing: 0.02em;
  color: var(--color-text-heading);
  margin-top: 56px;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border-subtle); }
.news-article h2:first-child { margin-top: 0; }
.news-article h3 { font-family: var(--font-heading-3-family);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.55;
  letter-spacing: 0.02em;
  color: var(--color-text-heading);
  margin-top: 36px;
  margin-bottom: 12px; }
.news-article p { margin: 0; }
.news-article a { color: var(--color-link-default); text-decoration: underline; text-underline-offset: 3px; }
.news-article a:hover { color: var(--color-link-hover); }
.news-article ul.news-list,
.news-article ol.news-list { padding-left: 1.4em;
  margin: 0; }
.news-article ul.news-list { list-style: disc; }
.news-article ol.news-list { list-style: decimal; }
.news-article ul.news-list li,
.news-article ol.news-list li { margin-bottom: 8px;
  padding-left: 4px; }
.news-article blockquote { margin: 0;
  padding: 18px 22px;
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border-subtle);
  border-radius: 4px;
  font-size: 15px;
  line-height: 1.85;
  color: var(--color-text-body); }
.news-article blockquote p + p { margin-top: 0.8em; }
.news-article figure { margin: 0; }
.news-article figure img { width: 100%;
  border-radius: 4px;
  border: 1px solid var(--color-border-subtle); }
.news-article figcaption { margin-top: 8px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-text-secondary); }
.news-meta-table { width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  border: 1px solid var(--color-border-subtle);
  border-radius: 4px;
  overflow: hidden; }
.news-meta-table th,
.news-meta-table td { padding: 12px 16px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--color-border-subtle);
  line-height: 1.7; }
.news-meta-table tr:last-child th,
.news-meta-table tr:last-child td { border-bottom: none; }
.news-meta-table th { width: 30%;
  background: var(--color-bg-subtle);
  font-family: var(--font-body-family);
  font-weight: 700;
  color: var(--color-text-heading);
  letter-spacing: 0.04em; }
@media (max-width: 640px) {
  .news-meta-table th,
  .news-meta-table td { display: block; width: 100%; }
  .news-meta-table th { border-bottom: none; padding-bottom: 4px; }
}
.news-share { margin-top: 56px;
  padding: 24px 0;
  border-top: 1px solid var(--color-border-subtle);
  border-bottom: 1px solid var(--color-border-subtle); }
.news-share__title { font-family: var(--font-body-family);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--color-text-secondary);
  margin: 0 0 12px; }
.news-share__list { display: flex;
  flex-wrap: wrap;
  gap: 10px; }
.news-share__btn { display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid var(--color-border-default);
  border-radius: 4px;
  background: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-text-heading);
  text-decoration: none;
  transition: border-color var(--duration-interaction) var(--easing-default), color var(--duration-interaction) var(--easing-default), background var(--duration-interaction) var(--easing-default); }
.news-share__btn:hover { border-color: var(--color-ui-primary);
  color: var(--color-ui-primary);
  background: var(--color-ui-primary-subtle);
  text-decoration: none; }
.news-share__btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.news-author { margin-top: 40px;
  padding: 22px 24px;
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border-subtle);
  border-radius: 4px;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 18px;
  align-items: center; }
.news-author__avatar { width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--color-ui-primary);
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--font-heading-1-family);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 0.02em; }
.news-author__name { font-family: var(--font-body-family);
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-heading);
  margin: 0 0 4px; }
.news-author__desc { font-size: 13px;
  line-height: 1.7;
  color: var(--color-text-body);
  margin: 0; }
.news-sidebar { display: flex;
  flex-direction: column;
  gap: 28px; }
.news-side-block { border: 1px solid var(--color-border-subtle);
  border-radius: 4px;
  padding: 20px 22px;
  background: #fff; }
.news-side-block__title { font-family: var(--font-body-family);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--color-ui-primary);
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-border-subtle); }
.news-side-list { display: flex; flex-direction: column; gap: 14px; }
.news-side-list li { margin: 0; }
.news-side-list__date { font-family: var(--font-body-family);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--color-text-secondary);
  display: block;
  margin-bottom: 4px; }
.news-side-list__title { font-size: 14px;
  line-height: 1.55;
  color: var(--color-text-heading);
  font-weight: 500; }
.news-side-list a:hover .news-side-list__title { color: var(--color-ui-primary); }
.news-side-list a { display: block; }
.news-side-list a:hover { text-decoration: none; }
.news-side-back a { display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 14px;
  color: var(--color-ui-primary); }
.news-side-back a:hover { color: var(--color-cta-primary); text-decoration: none; }
.news-related { margin-top: 80px;
  padding-top: 48px;
  border-top: 1px solid var(--color-border-subtle); }
.news-related__title { font-family: var(--font-heading-1-family);
  font-weight: 600;
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--color-text-heading);
  margin: 0 0 28px; }
.news-related__grid { display: grid;
  gap: 24px;
  grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .news-related__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .news-related__grid { grid-template-columns: repeat(3, 1fr); }
}
.news-related-card { background: #fff;
  border: 1px solid var(--color-border-subtle);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color var(--duration-transition) var(--easing-default), transform var(--duration-transition) var(--easing-default), box-shadow var(--duration-transition) var(--easing-default); }
.news-related-card:hover { border-color: var(--color-blue-300);
  transform: translateY(-3px);
  box-shadow: var(--shadow-elevated); }
.news-related-card a { display: flex; flex-direction: column; flex: 1; color: inherit; }
.news-related-card a:hover { text-decoration: none; }
.news-related-card__thumb { aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, #F1F5F9 0%, #E2E8F0 100%);
  display: grid;
  place-items: center;
  color: var(--color-ui-primary);
  border-bottom: 1px solid var(--color-border-subtle); }
.news-related-card__thumb svg { width: 56px; height: 56px; opacity: 0.85; }
.news-related-card__body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.news-related-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.news-related-card__title { font-family: var(--font-heading-1-family);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: 0.02em;
  color: var(--color-text-heading);
  margin: 4px 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  overflow: hidden; }
.news-back { margin-top: 48px;
  display: flex;
  justify-content: center; }
.news-back a { display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border: 1.5px solid var(--color-border-default);
  border-radius: 4px;
  background: #fff;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-heading);
  text-decoration: none;
  transition: border-color var(--duration-interaction) var(--easing-default), color var(--duration-interaction) var(--easing-default), background var(--duration-interaction) var(--easing-default); }
.news-back a:hover { border-color: var(--color-ui-primary);
  color: var(--color-ui-primary);
  background: var(--color-ui-primary-subtle);
  text-decoration: none; }
.news-bottom-cta { margin-top: 96px;
  padding: clamp(56px, 7vw, 88px) 0;
  background: var(--color-bg-subtle);
  position: relative;
  overflow: hidden; }
.news-bottom-cta::before { content: "";
  position: absolute;
  top: 0; right: clamp(32px, 8vw, 96px);
  width: 4px; height: 80px;
  background: var(--color-brand-symbol); }
.news-bottom-cta__inner { max-width: 880px;
  margin-inline: auto;
  padding-inline: var(--space-gutter);
  text-align: center; }
.news-bottom-cta__title { font-family: var(--font-heading-1-family);
  font-weight: 600;
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--color-text-heading);
  margin: 0 0 16px; }
.news-bottom-cta__sub { font-size: 15px;
  line-height: 1.85;
  color: var(--color-text-body);
  margin: 0 auto 32px;
  max-width: 640px; }
.news-bottom-cta__buttons { display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap; }

/* --- from comp-privacy-policy.html --- */
.pp-head { padding: clamp(112px, 14vh, 152px) 0 clamp(36px, 5vh, 56px);
  background: #FFFFFF;
  border-bottom: 1px solid var(--color-border-subtle); }
.pp-head__inner { max-width: 800px;
  margin-inline: auto;
  padding-inline: var(--space-gutter); }
.pp-head__h1 { font-family: var(--font-heading-1-family);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.3;
  letter-spacing: 0.04em;
  color: var(--color-text-heading);
  margin: 0 0 14px;
  position: relative;
  padding-bottom: 14px; }
.pp-head__h1::after { content: "";
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 56px;
  height: 1px;
  background: var(--color-ui-primary); }
.pp-head__date { font-family: var(--font-body-family);
  font-size: 13px;
  font-weight: 400;
  color: var(--color-text-secondary);
  margin: 0;
  letter-spacing: 0.04em; }
.pp-body { padding-block: clamp(48px, 7vh, 80px);
  background: #FFFFFF; }
.pp-body__inner { max-width: 800px;
  margin-inline: auto;
  padding-inline: var(--space-gutter); }
.pp-intro { font-size: 16px;
  line-height: 1.8;
  color: var(--color-text-body);
  margin: 0 0 40px;
  font-weight: 700; }
.pp-section { margin-bottom: 36px; }
.pp-section:last-of-type { margin-bottom: 0; }
.pp-section__h2 { font-family: var(--font-body-family);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--color-text-heading);
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-border-subtle); }
.pp-section p { font-size: 16px;
  line-height: 1.8;
  color: var(--color-text-body);
  margin: 0 0 14px; }
.pp-section p:last-child { margin-bottom: 0; }
.pp-section ul.pp-list { list-style: disc;
  padding-left: 1.4em;
  margin: 0 0 14px; }
.pp-section ul.pp-list li { font-size: 16px;
  line-height: 1.8;
  color: var(--color-text-body);
  margin-bottom: 6px; }
.pp-section ul.pp-list li:last-child { margin-bottom: 0; }
.pp-contact { margin-top: 16px;
  padding: 20px 22px;
  background: var(--color-bg-subtle);
  border-radius: 4px;
  font-size: 15px;
  line-height: 1.85;
  color: var(--color-text-body); }
.pp-contact__name { font-weight: 700;
  margin-bottom: 4px; }
.pp-history { margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid var(--color-border-subtle); }
.pp-history__h2 { font-family: var(--font-body-family);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--color-text-secondary);
  margin: 0 0 14px; }
.pp-history__list { font-size: 14px;
  line-height: 1.85;
  color: var(--color-text-secondary); }
.pp-history__list li { margin-bottom: 4px; }

/* --- from comp-download.html --- */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--color-border-focus); outline-offset: 2px; border-radius: 2px; }
.header-cta .btn--ghost.is-active { border-color: var(--color-ui-primary);
  color: var(--color-ui-primary);
  background: var(--color-ui-primary-subtle);
  font-weight: 700; }
.dl-hero { position: relative; isolation: isolate;
  padding: clamp(120px, 14vh, 160px) 0 clamp(48px, 6vh, 72px);
  background: #F5F5F5;
  text-align: center; }
.dl-hero__inner { max-width: 880px; margin-inline: auto;
  padding-inline: var(--space-gutter);
  position: relative; }
.dl-hero__accent { width: 80px; height: 4px;
  background: var(--color-ui-primary);
  margin: 0 auto 28px;
  border-radius: 2px; }
.dl-hero__eyebrow { display: inline-block;
  font-family: var(--font-body-family);
  font-size: 13px; font-weight: 700; letter-spacing: 0.32em;
  color: var(--color-ui-primary);
  margin-bottom: 18px; }
.dl-hero__h1 { font-family: var(--font-heading-1-family);
  font-weight: 600;
  font-size: clamp(32px, 5vw, 48px);
  line-height: 1.25;
  letter-spacing: 0.04em;
  color: var(--color-text-heading);
  margin: 0 0 22px; }
.dl-hero__lead { font-size: clamp(15px, 1.4vw, 16px);
  line-height: 1.95;
  color: var(--color-text-body);
  margin: 0 auto;
  max-width: 40em;
  text-align: left; }
.dl-lineup { padding-block: clamp(72px, 9vh, 112px);
  background: #fff; }
.dl-lineup__inner { max-width: 1200px; margin-inline: auto;
  padding-inline: var(--space-gutter); }
.dl-lineup__head { max-width: 760px;
  margin-bottom: 40px; }
.dl-lineup__h2 { font-family: var(--font-heading-1-family);
  font-size: clamp(26px, 3.4vw, 36px);
  font-weight: 600;
  line-height: 1.32;
  letter-spacing: 0.02em;
  color: var(--color-text-heading);
  margin: 0 0 18px; }
.dl-lineup__lead { font-size: 15px; line-height: 1.9;
  color: var(--color-text-body);
  margin: 0; }
.dl-grid { display: grid;
  gap: 24px;
  grid-template-columns: 1fr; }
@media (min-width: 640px) { .dl-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .dl-grid { grid-template-columns: repeat(3, 1fr); } }
.dl-card { position: relative;
  background: #fff;
  border: 1px solid var(--color-border-subtle);
  border-radius: 4px;
  padding: 26px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color var(--duration-transition) var(--easing-default), transform var(--duration-transition) var(--easing-default), box-shadow var(--duration-transition) var(--easing-default); }
.dl-card:hover { border-color: var(--color-blue-300);
  transform: translateY(-3px);
  box-shadow: var(--shadow-elevated); }
.dl-card__badge { position: absolute;
  top: 14px;
  right: 14px;
  display: inline-block;
  padding: 4px 10px;
  background: var(--color-cta-primary);
  color: #fff;
  font-family: var(--font-body-family);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  border-radius: 2px;
  line-height: 1.4; }
.dl-card__icon { width: 40px;
  height: 40px;
  color: var(--color-ui-primary);
  flex-shrink: 0;
  margin-top: 4px; }
.dl-card__title { font-family: var(--font-heading-3-family);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--color-text-heading);
  margin: 0;
  letter-spacing: 0.02em;
  padding-right: 56px; }
.dl-card__title-sub { display: block;
  font-family: var(--font-body-family);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-ui-primary);
  margin-top: 4px; }
.dl-card__desc { font-size: 14px;
  line-height: 1.85;
  color: var(--color-text-body);
  margin: 4px 0 0; }
.dl-form-section { padding-block: clamp(72px, 9vh, 112px);
  background: var(--color-bg-subtle); }
.dl-form-section__inner { max-width: 680px; margin-inline: auto;
  padding-inline: var(--space-gutter); }
.dl-form-section__head { margin-bottom: 32px;
  text-align: left; }
.dl-form-section__h2 { font-family: var(--font-heading-1-family);
  font-size: clamp(26px, 3.4vw, 36px);
  font-weight: 600;
  line-height: 1.32;
  letter-spacing: 0.02em;
  color: var(--color-text-heading);
  margin: 0 0 16px; }
.dl-form-section__lead { font-size: 15px; line-height: 1.9;
  color: var(--color-text-body);
  margin: 0; }
.dl-form { background: #fff;
  border: 1px solid var(--color-border-subtle);
  border-radius: 4px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 22px; }
@media (min-width: 768px) {
  .dl-form { padding: 40px 36px; }
}
.dl-field { display: flex; flex-direction: column; gap: 8px; }
.dl-field__label { font-family: var(--font-body-family);
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-heading);
  display: inline-flex;
  align-items: center;
  gap: 8px; }
.dl-field__req { display: inline-block;
  padding: 2px 7px;
  background: var(--color-cta-primary);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  border-radius: 2px;
  line-height: 1.4; }
.dl-field__opt { display: inline-block;
  padding: 2px 7px;
  background: var(--color-bg-elevated);
  color: var(--color-text-secondary);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  border-radius: 2px;
  line-height: 1.4; }
.dl-field__hint { font-size: 12px;
  color: var(--color-text-secondary);
  line-height: 1.7;
  margin: 0; }
.dl-field__input,
.dl-field__textarea { width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--color-border-default);
  border-radius: 4px;
  background: #fff;
  font-family: var(--font-body-family);
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-text-body);
  transition: border-color var(--duration-interaction) var(--easing-default), box-shadow var(--duration-interaction) var(--easing-default); }
.dl-field__input:hover,
.dl-field__textarea:hover { border-color: var(--color-border-strong); }
.dl-field__input:focus,
.dl-field__textarea:focus { outline: none;
  border-color: var(--color-ui-primary);
  box-shadow: 0 0 0 3px rgba(0,75,153,0.15); }
.dl-field__textarea { resize: vertical;
  min-height: 112px; }
.dl-checkgroup { display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 0 0; }
.dl-checkgroup__item { display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--color-border-subtle);
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  transition: border-color var(--duration-interaction) var(--easing-default), background var(--duration-interaction) var(--easing-default); }
.dl-checkgroup__item:hover { border-color: var(--color-blue-300);
  background: var(--color-ui-primary-subtle); }
.dl-checkgroup__item input[type="checkbox"] { flex-shrink: 0;
  margin-top: 3px;
  width: 18px;
  height: 18px;
  accent-color: var(--color-ui-primary);
  cursor: pointer; }
.dl-checkgroup__label { font-size: 14px;
  line-height: 1.6;
  color: var(--color-text-body); }
.dl-checkgroup__label strong { display: block;
  font-weight: 700;
  color: var(--color-text-heading);
  margin-bottom: 2px; }
.dl-checkgroup__item--all { border-color: var(--color-ui-primary);
  background: rgba(0,95,196,0.04); }
.dl-checkgroup__item--all .dl-checkgroup__label strong { color: var(--color-ui-primary); }
.dl-consent { display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--color-text-body); }
.dl-consent input[type="checkbox"] { flex-shrink: 0;
  margin-top: 3px;
  width: 18px;
  height: 18px;
  accent-color: var(--color-ui-primary); }
.dl-consent a { color: var(--color-ui-primary);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px; }
.dl-form__submit { width: 100%;
  min-height: 48px;
  padding: 16px 24px;
  background: var(--color-cta-primary);
  color: #fff;
  font-family: var(--font-body-family);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background var(--duration-interaction) var(--easing-default), transform var(--duration-interaction) var(--easing-default); }
.dl-form__submit:hover { background: var(--color-cta-primary-hover);
  transform: translateY(-1px); }
.dl-form__note { font-size: 12px;
  color: var(--color-text-secondary);
  line-height: 1.75;
  margin: 4px 0 0; }
.dl-privacy { padding-block: clamp(56px, 7vh, 88px);
  background: #fff; }
.dl-privacy__inner { max-width: 760px; margin-inline: auto;
  padding-inline: var(--space-gutter); }
.dl-privacy__h2 { font-family: var(--font-heading-2-family);
  font-size: clamp(20px, 2.4vw, 24px);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--color-text-heading);
  margin: 0 0 18px; }
.dl-privacy__body { font-size: 14px;
  line-height: 1.95;
  color: var(--color-text-body);
  margin: 0 0 16px; }
.dl-privacy__body a { color: var(--color-ui-primary);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px; }

/* === Stage 2: 衝突解消（多数派統一 + modifier） === */

/* .bottom-cta__buttons  (structural; base: 12 pages) */
.bottom-cta__buttons { display: flex; justify-content: center; margin-top: 28px; gap: 14px; flex-wrap: wrap; }

/* .bottom-cta__lead  (microdiff; base: 13 pages) */
.bottom-cta__lead { line-height: 1.5; font-weight: 600; font-family: var(--font-heading-2-family); color: #fff; margin: 0 0 20px; font-size: clamp(24px, 3.2vw, 36px); }

/* .bottom-cta__sub  (structural; base: 9 pages) */
.bottom-cta__sub { line-height: 1.8; max-width: 720px; color: rgba(255,255,255,0.85); margin: 0 0 36px; margin-inline: auto; font-size: 15px; margin-bottom: 36px; }
.bottom-cta__sub.bottom-cta__sub--alt { margin-bottom: revert; }  /* used in: comp-svc-advisor-ongoing.html, comp-svc-training.html */

/* .breadcrumb__inner  (structural; base: 1 pages) */
.breadcrumb__inner { padding-inline: var(--space-gutter); max-width: 1200px; letter-spacing: 0.04em; color: var(--color-text-secondary); margin-inline: auto; font-size: 12px; }
.breadcrumb__inner.breadcrumb__inner--sm { letter-spacing: revert; color: revert; font-size: revert; }  /* used in: comp-svc-ai-implementation.html */

/* .container--narrow  (microdiff; base: 19 pages) */
.container--narrow { margin-inline: auto; padding-inline: var(--space-gutter); max-width: 840px; }

/* .eyebrow  (microdiff; base: 14 pages) */
.eyebrow { font-weight: 700; position: relative; display: inline-block; font-family: var(--font-body-family); letter-spacing: 0.22em; padding-left: 28px; color: var(--color-ui-primary); font-size: 12px; margin-bottom: 20px; }

/* .news-card  (structural; base: 1 pages) */
.news-card { transition: border-color var(--duration-transition) var(--easing-default), transform var(--duration-transition) var(--easing-default); display: flex; background: #fff; text-decoration: none; flex-direction: column; border: 1px solid var(--color-border-subtle); border-radius: 4px; align-items: start; gap: 12px; grid-template-columns: 160px 1fr; padding: 28px 24px; }
.news-card.news-card--card { gap: 24px; transition: border-color var(--duration-transition) var(--easing-default), transform var(--duration-transition) var(--easing-default), box-shadow var(--duration-transition) var(--easing-default); display: grid; text-decoration: revert; border-radius: var(--radius-card); flex-direction: revert; padding: 22px; }  /* used in: comp-news.html */

/* .news-card__date  (structural; base: 1 pages) */
.news-card__date { font-weight: 500; font-family: var(--font-body-family); letter-spacing: 0.06em; color: var(--color-text-secondary); font-size: 13px; }
.news-card__date.news-card__date--bold { font-weight: 700; }  /* used in: comp-news.html */

/* .news-card__meta  (structural; base: 1 pages) */
.news-card__meta { display: flex; align-items: center; font-size: 13px; gap: 12px; flex-wrap: wrap; }
.news-card__meta.news-card__meta--sm { font-size: revert; }  /* used in: comp-news.html */

/* .news-card__title  (structural; base: 1 pages) */
.news-card__title { line-height: 1.6; font-weight: 700; font-family: var(--font-heading-3-family); letter-spacing: 0.02em; color: var(--color-text-heading); margin: 0; font-size: 16px; }
.news-card__title.news-card__title--light { font-family: var(--font-heading-1-family); font-weight: 600; margin: 4px 0 0; }  /* used in: comp-news.html */

/* .section-lead  (microdiff; base: 14 pages) */
.section-lead { line-height: 1.95; text-wrap: balance; color: var(--color-text-body); margin: 0 0 var(--space-7); font-size: 16px; }

/* .section-title  (microdiff; base: 14 pages) */
.section-title { line-height: 1.32; font-weight: 600; font-family: var(--font-heading-1-family); letter-spacing: 0.02em; color: var(--color-text-heading); margin: 0 0 20px; font-size: clamp(28px, 3.8vw, 42px); }

/* .svc-area__inner  (microdiff; base: 2 pages) */
.svc-area__inner { margin-inline: auto; padding-inline: var(--space-gutter); max-width: 1200px; }

/* .svc-card__desc  (microdiff; base: 2 pages) */
.svc-card__desc { font-size: 14px; color: var(--color-text-body); line-height: 1.85; margin: 8px 0 0; }

/* .svc-card__title  (microdiff; base: 2 pages) */
.svc-card__title { line-height: 1.4; font-weight: 700; font-family: var(--font-heading-3-family); letter-spacing: 0.02em; color: var(--color-text-heading); margin: 0; font-size: 18px; }

/* .svc-feature  (structural; base: 1 pages)
 * 2026-05-06 修正: display: flex → grid に変更（モバイルでは1列、900px以上で2列に展開）
 * 旧 base style の display: flex; flex-direction: column が、後段の media query よりカスケード優先で
 * 効いてしまい、PC でも 1 列だった。grid 単一カラムから始めれば media query の 2 カラム化が確実に効く。
 */
.svc-feature { overflow: hidden; display: grid; grid-template-columns: 1fr; background: #fff; border: 1px solid var(--color-border-subtle); border-radius: 4px; align-items: start; gap: 44px; padding: 32px; }
@media (min-width: 900px) {
  .svc-feature { grid-template-columns: 1fr 1.4fr; }
  .svc-feature.svc-feature--reverse { grid-template-columns: 1.4fr 1fr; }
  .svc-feature.svc-feature--reverse .svc-feature__visual { order: 2; }
}
.svc-feature.svc-feature--stack { display: flex; flex-direction: column; align-items: stretch; gap: revert; grid-template-columns: revert; padding: revert; }
.svc-feature.svc-feature--stack .svc-feature__body--stack { flex: 1; }  /* used in: comp-svc-job-training.html */
.svc-feature.svc-feature--card { gap: 28px; overflow: revert; display: grid; flex-direction: revert; grid-template-columns: 64px 1fr; }  /* used in: comp-svc-ai-implementation.html */

/* .svc-feature__body  (structural; base: 2 pages) */
.svc-feature__body { gap: 12px; line-height: 1.95; display: flex; color: var(--color-text-body); margin: 0; font-size: 15px; flex-direction: column; padding: 26px 24px 28px; }
.svc-feature__body.svc-feature__body--stack { line-height: revert; color: revert; margin: revert; font-size: revert; }  /* used in: comp-svc-job-training.html */
.svc-feature__body.svc-feature__body--stack-2 { line-height: revert; color: revert; margin: revert; font-size: revert; gap: 10px; padding: revert; }  /* used in: comp-svc-ai-implementation.html */

/* .svc-feature__desc  (microdiff; base: 2 pages) */
.svc-feature__desc { font-size: 14px; color: var(--color-text-body); line-height: 1.95; margin: 0; }

/* .svc-feature__num  (structural; base: 1 pages) */
.svc-feature__num { font-style: italic; line-height: 1; font-weight: 500; font-family: 'Fraunces', serif; display: inline-block; font-variation-settings: "opsz" 144; letter-spacing: 0.18em; color: var(--color-ui-primary); margin: 0 0 10px; font-size: 14px; }
.svc-feature__num.svc-feature__num--xl { font-family: 'Fraunces', serif;
  font-style: normal;
  font-weight: 500;
  font-size: 36px;
  line-height: 1;
  color: var(--color-text-heading);
  letter-spacing: 0.04em;
  display: block;
  margin: 0 0 10px 0;
  height: 36px; }  /* used in: comp-svc-training.html */
.svc-feature__num.svc-feature__num--alt { line-height: revert; margin: revert; }  /* used in: comp-svc-job-training.html */
.svc-feature__num.svc-feature__num--xl-2 { display: revert; letter-spacing: revert; margin: 0; font-size: 44px; }  /* used in: comp-svc-ai-implementation.html */

/* .svc-feature__title  (structural; base: 2 pages) */
.svc-feature__title { line-height: 1.5; font-weight: 700; font-family: var(--font-heading-2-family); letter-spacing: 0.02em; color: var(--color-text-heading); margin: 0; font-size: clamp(16px, 1.8vw, 20px); white-space: nowrap; overflow: visible; }
.svc-feature__title.svc-feature__title--light { font-weight: 600; }  /* used in: comp-svc-advisor-ongoing.html */
.svc-feature__title.svc-feature__title--alt { font-family: var(--font-heading-3-family); }  /* used in: comp-svc-ai-implementation.html */

/* .svc-flow__body  (structural; base: 1 pages) */
.svc-flow__body { gap: 8px; line-height: 1.9; display: flex; color: var(--color-text-body); margin: 0; font-size: 14px; flex-direction: column; }
.svc-flow__body.svc-flow__body--xl { display: revert; flex-direction: revert; font-size: 14.5px; gap: revert; }  /* used in: comp-svc-training.html */
.svc-flow__body.svc-flow__body--stack { line-height: revert; color: revert; margin: revert; font-size: revert; }  /* used in: comp-svc-job-training.html */

/* .svc-flow__head  (structural; base: 1 pages) */
.svc-flow__head { text-align: center; max-width: 760px; margin-bottom: 36px; }
.svc-flow__head.svc-flow__head--alt { max-width: revert; margin-bottom: 48px; }  /* used in: comp-svc-job-training.html */

/* .svc-flow__inner  (microdiff; base: 2 pages)
 * 2026-05-06 統一: 1000 → 1200。サービスページの左揃えセクションを 1200px に統一。 */
.svc-flow__inner { margin-inline: auto; padding-inline: var(--space-gutter); max-width: 1200px; }

/* .svc-flow__list  (structural; base: 1 pages) */
.svc-flow__list { position: relative; display: grid; flex-direction: column; list-style: none; gap: 16px; grid-template-columns: 1fr; }
.svc-flow__list.svc-flow__list--stack { display: flex; gap: 0; grid-template-columns: revert; }  /* used in: comp-svc-job-training.html */

/* .svc-flow__num  (structural; base: 1 pages) */
.svc-flow__num { font-style: italic; font-weight: 600; flex-shrink: 0; display: flex; justify-content: center; background: var(--color-ui-primary); height: 44px; font-family: 'Fraunces', serif; font-variation-settings: "opsz" 144; border-radius: 999px; letter-spacing: 0.04em; color: #fff; align-items: center; font-size: 18px; width: 44px; }
.svc-flow__num.svc-flow__num--rounded { border-radius: 50%; }  /* used in: comp-svc-job-training.html */

/* .svc-flow__step  (structural; base: 1 pages) */
.svc-flow__step { position: relative; display: grid; background: #fff; border: 1px solid var(--color-border-subtle); border-radius: 4px; align-items: start; gap: 18px; grid-template-columns: 56px 1fr; padding: 22px 22px 22px 18px; }
.svc-flow__step.svc-flow__step--alt-bg { border-radius: revert; background: revert; align-items: revert; border: revert; }  /* used in: comp-svc-job-training.html */

/* .svc-flow__title  (structural; base: 1 pages) */
.svc-flow__title { line-height: 1.5; font-weight: 700; font-family: var(--font-heading-2-family); letter-spacing: 0.02em; color: var(--color-text-heading); margin: 4px 0 6px; font-size: 17px; }
.svc-flow__title.svc-flow__title--alt { letter-spacing: revert; margin: 0 0 8px; }  /* used in: comp-svc-training.html */
.svc-flow__title.svc-flow__title--alt-2 { margin: 0; }  /* used in: comp-svc-job-training.html */

/* .svc-hero__h1  (structural; base: 5 pages) */
.svc-hero__h1 { line-height: 1.32; font-weight: 800; font-family: var(--font-heading-1-family); max-width: 20em; text-shadow: 0 2px 12px rgba(0,15,45,0.55), 0 8px 48px rgba(0,15,45,0.45); letter-spacing: 0.02em; color: #fff; margin: 0 auto 22px; font-size: clamp(30px, 5.2vw, 60px); }
.svc-hero__h1.svc-hero__h1--light { font-size: clamp(36px, 5.6vw, 60px); max-width: revert; font-weight: 700; }  /* used in: comp-services-index.html */
/* 2026-05-06: techlete ページ専用の h1 縮小。
   見出し本文「テックリートを育てる新学科を、設立から運営まで包括支援します。」が PC 幅でも
   既定 font-size: clamp(30px, 5.2vw, 60px) では 1 行に入りきらず、<br class="pc-only"> による意図的な
   2 行構成のあとさらに「を、」「す。」だけが自動折り返しで孤立し 4 行になる現象が出ていた。
   2 行構成を維持しつつ確実に 1 行に収めるため、上限・下限・スケールを一段下げる。 */
.svc-hero--tight .svc-hero__h1 { font-size: clamp(26px, 4.2vw, 48px); }

/* .svc-hero__inner  (structural; base: 5 pages) */
/* padding shorthand で padding-inline が上書きされていた問題を修正（2026-05-04）
   → padding-block と padding-inline を分けて指定し、SP でも左右余白を確保 */
.svc-hero__inner { text-align: center; position: relative; max-width: 1100px; align-self: end; margin-inline: auto; width: 100%; padding-block: 0 clamp(72px, 11vh, 120px); padding-inline: clamp(20px, 4vw, var(--space-gutter)); }
/* --alt は padding-block だけリセット。padding-inline は base の左右余白を維持（2026-05-04） */
.svc-hero__inner.svc-hero__inner--alt { align-self: revert; width: revert; padding-block: revert; }  /* used in: comp-services-index.html */

/* .svc-hero__lead  (structural; base: 4 pages) */
.svc-hero__lead { line-height: 1.85; font-weight: 500; font-family: var(--font-heading-1-family); max-width: 44em; text-shadow: 0 2px 10px rgba(0,15,45,0.5); color: #fff; margin: 0 auto 32px; font-size: clamp(15px, 1.5vw, 18px); }
.svc-hero__lead.svc-hero__lead--light { max-width: 38em; color: rgba(255,255,255,0.94); font-weight: 400; }  /* used in: comp-services-index.html */

/* .svc-overview__grid  (structural; base: 1 pages) */
.svc-overview__grid { gap: 28px; display: grid; grid-template-columns: 1fr; align-items: start; }
/* --split: SP は 1 列、768px 以上で 2 カラム（左テキスト 1.2fr / 右画像 0.8fr）（2026-05-04 修正） */
.svc-overview__grid.svc-overview__grid--split { gap: 28px; grid-template-columns: 1fr; }  /* used in: comp-svc-training.html */
@media (min-width: 768px) {
  .svc-overview__grid.svc-overview__grid--split { gap: 48px; grid-template-columns: 1.2fr 0.8fr; }
}

/* .svc-overview__inner  (microdiff; base: 2 pages) */
.svc-overview__inner { margin-inline: auto; padding-inline: var(--space-gutter); max-width: 1200px; }

/* .svc-price__inner  (structural; base: 1 pages) */
.svc-price__inner { text-align: center; margin-inline: auto; padding-inline: var(--space-gutter); max-width: 960px; }
.svc-price__inner.svc-price__inner--narrow { max-width: 760px; }  /* used in: comp-svc-job-training.html */

/* .svc-price__note  (structural; base: 1 pages) */
.svc-price__note { line-height: 1.95; border-left: none; border-top: 1px solid var(--color-border-subtle); border-bottom: 1px solid var(--color-border-subtle); background: transparent; border-radius: 0; color: var(--color-text-body); margin: 24px 0 0; font-size: 14px; padding: 18px 0; }
.svc-price__note.svc-price__note--alt-bg { border-left: revert; border-top: none; border-bottom: none; background: revert; border-radius: revert; margin: 0; padding: revert; font-size: 13px; line-height: 1.85; color: var(--color-text-secondary); }  /* used in: comp-svc-job-training.html */

/* .svc-related-card  (structural; base: 1 pages) */
.svc-related-card { gap: 10px; transition: border-color var(--duration-transition) var(--easing-default), transform var(--duration-transition) var(--easing-default), box-shadow var(--duration-transition) var(--easing-default); display: flex; background: #fff; border: 1px solid var(--color-border-subtle); border-radius: 4px; flex-direction: column; padding: 24px 22px 22px; }
.svc-related-card.svc-related-card--alt { transition: border-color var(--duration-transition) var(--easing-default); }  /* used in: comp-svc-ai-implementation.html */

/* .svc-related-card__desc  (microdiff; base: 2 pages) */
.svc-related-card__desc { font-size: 13px; color: var(--color-text-body); line-height: 1.85; margin: 0; }

/* .svc-related-card__link  (structural; base: 1 pages) */
.svc-related-card__link { font-weight: 700; padding-top: 10px; margin-top: auto; color: var(--color-ui-primary); font-size: 13px; }
.svc-related-card__link.svc-related-card__link--alt { margin-top: 6px; padding-top: revert; }  /* used in: comp-svc-ai-implementation.html */

/* .svc-related-card__title  (microdiff; base: 2 pages) */
.svc-related-card__title { line-height: 1.5; font-weight: 700; font-family: var(--font-heading-3-family); letter-spacing: 0.02em; color: var(--color-text-heading); margin: 0; font-size: 16px; }

/* .svc-related-grid  (structural; base: 1 pages) */
.svc-related-grid { grid-template-columns: repeat(3, 1fr); }
.svc-related-grid.svc-related-grid--split { grid-template-columns: 1fr 1fr; }  /* used in: comp-svc-ai-implementation.html */

/* .svc-related__card  (microdiff; base: 2 pages) */
.svc-related__card { gap: 10px; transition: border-color var(--duration-transition) var(--easing-default), transform var(--duration-transition) var(--easing-default), box-shadow var(--duration-transition) var(--easing-default); display: flex; background: #fff; border: 1px solid var(--color-border-subtle); border-radius: 4px; flex-direction: column; padding: 24px 24px 22px; }

/* .svc-related__card-desc  (microdiff; base: 2 pages) */
.svc-related__card-desc { font-size: 14px; color: var(--color-text-body); line-height: 1.85; margin: 4px 0 0; }

/* .svc-related__head  (structural; base: 1 pages) */
.svc-related__head { text-align: center; margin-bottom: 32px; }
.svc-related__head.svc-related__head--alt { margin-bottom: 40px; }  /* used in: comp-svc-job-training.html */

/* .svc-stages__caption  (microdiff; base: 2 pages) */
.svc-stages__caption { text-align: center; font-weight: 700; font-family: var(--font-body-family); letter-spacing: 0.22em; color: var(--color-ui-primary); margin: 0 0 18px; font-size: 12px; }

/* .svc-stages__svg  (structural; base: 1 pages) */
.svc-stages__svg { min-width: 720px; max-width: 1080px; display: block; height: auto; margin: 0 auto; width: 100%; }
.svc-stages__svg.svc-stages__svg--alt { max-width: revert; min-width: 480px; }  /* used in: comp-svc-job-training.html */

/* .svc-target-card  (structural; base: 1 pages) */
.svc-target-card { gap: 14px; transition: border-color var(--duration-transition) var(--easing-default), transform var(--duration-transition) var(--easing-default), box-shadow var(--duration-transition) var(--easing-default); display: flex; background: #fff; border: 1px solid var(--color-border-subtle); border-radius: 4px; flex-direction: column; padding: 28px 24px 26px; }
.svc-target-card.svc-target-card--alt { transition: border-color var(--duration-transition) var(--easing-default), transform var(--duration-transition) var(--easing-default); }  /* used in: comp-svc-ai-implementation.html */

/* .svc-target__head  (structural; base: 1 pages) */
.svc-target__head { text-align: left; max-width: 1100px; margin-bottom: 36px; } /* 2026-05-06: 他セクション見出しと統一（左寄せ）*/
.svc-target__head.svc-target__head--alt { max-width: revert; margin-bottom: 44px; }  /* used in: comp-svc-job-training.html */

/* .svc-target__inner  (microdiff; base: 2 pages) */
.svc-target__inner { margin-inline: auto; padding-inline: var(--space-gutter); max-width: 1200px; }


/* ============================================================
 * PC / SP 改行・表示 ユーティリティ（2026-05-06 追加）
 * ヒーロー見出し等で PC のみ改行したい場合に <br class="pc-only">
 * ============================================================ */
.pc-only { display: none; }
@media (min-width: 768px) {
  .pc-only { display: inline; }
  br.pc-only { display: inline; }
  .sp-only { display: none; }
}
@media (max-width: 767px) {
  br.sp-only { display: inline; }
}

/* ============================================================
 * 関連サービス共通デザイン (2026-05-06 統一)
 * advisor-launch ベース。9 サービスページの「関連サービス」を
 * [sundx_related_services] ショートコードで描画する際の共通スタイル。
 * 旧 .adv-related / .svc-d-related / .tc-related / .hb-related / .tr-related
 * 系の独自クラスは、このセクションの後で順次廃止する。
 * ============================================================ */
.svc-related {
  padding-block: clamp(72px, 9vh, 112px);
  background: var(--color-bg-subtle);
}
.svc-related__inner {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--space-gutter);
}
.svc-related__head {
  margin-bottom: 32px;
  text-align: left;
  max-width: none;
}
.svc-related__head .eyebrow {
  margin-bottom: 8px;
}
.svc-related__head .section-title {
  margin: 0;
}
.svc-related__grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .svc-related__grid { grid-template-columns: repeat(3, 1fr); }
}
.svc-related-card {
  background: #fff;
  border: 1px solid var(--color-border-subtle);
  border-radius: 4px;
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color var(--duration-transition) var(--easing-default),
              transform var(--duration-transition) var(--easing-default),
              box-shadow var(--duration-transition) var(--easing-default);
}
.svc-related-card:hover {
  border-color: var(--color-blue-300);
  transform: translateY(-3px);
  box-shadow: var(--shadow-elevated);
}
.svc-related-card__icon {
  width: 38px;
  height: 38px;
  color: var(--color-ui-primary);
  flex-shrink: 0;
}
.svc-related-card__title {
  font-family: var(--font-heading-3-family);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-text-heading);
  margin: 0;
  letter-spacing: 0.02em;
}
.svc-related-card__brand {
  font-family: var(--font-body-family);
  font-size: 11px;
  letter-spacing: 0.16em;
  font-weight: 700;
  color: var(--color-ui-primary);
  margin: 2px 0 0;
}
.svc-related-card__desc {
  font-size: 14px;
  line-height: 1.85;
  color: var(--color-text-body);
  margin: 6px 0 0;
}
.svc-related-card__link {
  margin-top: auto;
  padding-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 14px;
  color: var(--color-ui-primary);
  letter-spacing: 0.02em;
}
.svc-related-card__link:hover {
  color: var(--color-cta-primary);
  text-decoration: none;
}


/* ============================================================
   R3 SP 指摘対応（2026-05-08）
   ============================================================ */

/* R3-01: トップヒーロー 2 枚目（対面で2人が座っている画像）は中央がテーブル空間で人物が両端に切れるため、
   SP では左寄せ（左の人物が中央に来るよう）に object-position を 30% center に。
   hero-3 / hero-4 は構図が違うのでデフォルト維持。 */
@media (max-width: 768px) {
  .hero__slide:nth-child(2) img {
    object-position: 30% center;
  }
}

/* R3-02: サービス一覧 ヒーロー SP — ヘッダー（72px 固定）分を考慮した垂直中央寄せ
   装飾線（__deco--top / --bottom）も SP 用に再配置し、コンテンツ領域内で上下対称にする */
@media (max-width: 768px) {
  .svc-hero--list {
    padding-top: 72px;       /* 固定ヘッダー分のオフセット */
    padding-bottom: 0;
    min-height: 380px;       /* SP の余白感を確保 */
    display: flex;
    flex-direction: column;
    justify-content: center; /* 垂直中央 */
  }
  .svc-hero--list .svc-hero__inner {
    padding-block: 24px;
  }
  /* 装飾線をコンテンツ領域内（72〜380）の上端 96px / 下端 24px で対称配置
     上下の青背景余白が等距離に見える */
  .svc-hero--list .svc-hero__deco--top {
    top: 96px;        /* ヘッダー 72px + 24px */
  }
  .svc-hero--list .svc-hero__deco--bottom {
    bottom: 24px;     /* section 下端から 24px */
  }
}

/* R3-05/06/09/10: <ol> のブラウザデフォルト padding-inline-start: 40px を撤去
   （これが「左余白が大きすぎる」の真因 / 2026-05-08 修正） */
ol.rec-flow__steps,
ol.adv-flow__list,
ol.svc-flow__list,
ol.svc-flow {
  padding-inline-start: 0 !important;
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}

/* カード自体の padding は base 値で十分機能するためそのまま（過去の修正は撤回） */

/* SP（max-width: 768px）では更に追い込んで縦積み + padding 削減 */
@media (max-width: 768px) {
  ol.rec-flow__steps li.rec-flow-step,
  .rec-flow-step {
    padding: 16px 14px !important;
    gap: 10px !important;
  }
  .rec-flow__inner {
    padding-inline: 12px !important;
  }

  ol.adv-flow__list li.adv-flow__step,
  .adv-flow__step {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 16px 14px !important;
  }
  .adv-flow__num {
    margin-bottom: 0 !important;
  }
  .adv-flow__inner {
    padding-inline: 12px !important;
  }

  ol.svc-flow__list li.svc-flow__item,
  ol.svc-flow__list li.svc-flow__step,
  .svc-flow__item,
  .svc-flow__step {
    padding: 16px 14px !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .svc-flow__step-label {
    flex-direction: row !important;
    gap: 8px !important;
    align-items: baseline !important;
  }
  .svc-flow__inner {
    padding-inline: 12px !important;
  }
}

/* R3-08: advisor-ongoing 3 つの特徴 SP 縦並び — 真因対応
   FEATURE 02 (reverse) の本文 div には __body クラスがないため、
   `.svc-feature > *` に order 割り当てで visual を必ず最初に固定する */
@media (max-width: 899px) {
  .svc-feature,
  .svc-feature.svc-feature--reverse {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    padding: 24px 20px !important;
    align-items: stretch !important;
  }
  /* 全子要素に order: 2、visual のみ order: 1 で先頭固定 */
  .svc-feature > * {
    order: 2;
  }
  .svc-feature > .svc-feature__visual {
    order: 1;
  }
}

/* R3-12: お問い合わせヒーローの営業時間/TEL 区切り棒を SP で非表示 */
@media (max-width: 600px) {
  .contact-hero__meta {
    flex-direction: column;
    gap: 6px;
  }
  .contact-hero__meta-divider {
    display: none;
  }
}

/* R3-04: ニュース一覧カードを SP で 1 カラム化（サムネ上 / 本文下） */
@media (max-width: 600px) {
  .news-card,
  .news-card.news-card--card {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }
  .news-card__thumb,
  .news-card__thumb--image {
    width: 100%;
    aspect-ratio: 40 / 21;
  }
  .news-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}