/* ============================================================
   Leadeck Corporate Site v1 — Style (プラップノード構造完コピ + Leadeck Blue)
   ============================================================ */

/* ---------- Design Tokens ---------- */
:root {
  --font-family-jp: "YuGothic", "Yu Gothic Medium", "Yu Gothic", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "Meiryo", sans-serif;
  --font-family-en: "Fraunces", "Inter", var(--font-family-jp);
  --font-family-en-sans: "Inter", var(--font-family-jp); /* 英語サンセリフが必要な箇所用に温存 */

  --color-text: #171717;
  --color-text-mute: #4a4a4a;
  --color-text-pale: #888888;
  --color-bg: #ffffff;
  --color-bg-paper: #f5f7fa;
  --color-bg-dark: #0a1525;
  --color-accent: #2194ff;
  --color-accent-deep: #006cd4;
  --color-accent-pale: #dbe8fa;
  --color-border: #e6e8ec;

  --container-max: 1220px;
  --container-pad: 24px;
  --section-gap: 96px;
  --section-gap-sm: 64px;

  --header-h: 90px;

  --fs-hero: clamp(40px, 5.5vw, 72px);
  --fs-h2: clamp(26px, 3.2vw, 38px);
  --fs-h3: clamp(18px, 1.9vw, 22px);
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-eyebrow: 13px;

  --lh-tight: 1.4;
  --lh-base: 1.85;
  --lh-loose: 2;

  --ls-jp: 0.04em;
  --ls-en: 0.08em;

  --radius-pill: 999px;
  --radius-md: 8px;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-family-jp);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  color: var(--color-text);
  background: var(--color-bg);
  letter-spacing: var(--ls-jp);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "palt";
  padding-top: var(--header-h);
}
a { color: inherit; text-decoration: none; transition: color 0.2s var(--ease), opacity 0.2s var(--ease); }
a:hover { opacity: 0.65; }
ul, ol { list-style: none; }
img { max-width: 100%; height: auto; display: block; }
button { font: inherit; cursor: pointer; border: none; background: none; }

.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  width: 100%;
}

/* ============================================================
   Header — ロゴ＋ナビ 1段横並び
   ============================================================ */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: #fff;
  border-bottom: 1px solid var(--color-border);
  height: var(--header-h);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}
.site-header__logo {
  display: inline-flex;
  align-items: center;
}
.site-header__logo-img {
  height: 36px;
  width: auto;
  display: block;
}
.site-header__nav ul {
  display: flex;
  align-items: center;
  gap: 36px;
}
.site-header__nav a {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: var(--ls-jp);
  color: var(--color-text);
}
.site-header__nav a:hover { color: var(--color-accent); opacity: 1; }
.site-header__nav-cta {
  display: inline-flex;
  align-items: center;
  background: var(--color-accent) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  padding: 10px 22px;
  border-radius: 999px; /* ピル型 */
  transition: background 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
  box-shadow: 0 2px 12px rgba(33, 148, 255, 0.25);
}
.site-header__nav-cta:hover {
  background: var(--color-accent-deep) !important;
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(33, 148, 255, 0.35);
}

@media (max-width: 900px) {
  :root { --header-h: 64px; }
  .site-header__nav { display: none; }
  .site-header__logo-img { height: 28px; }
}

/* ============================================================
   Block 1: Hero — Spline 3D 背景 + Mission宣言（白基調・清潔感）
   ============================================================ */
.hero {
  position: relative;
  width: 100%;
  height: clamp(560px, 90vh, 820px);
  overflow: hidden;
  /* 白基調 + 青みのある薄グラデ（清潔感） */
  background:
    radial-gradient(ellipse at 75% 30%, rgba(33, 148, 255, 0.10) 0%, transparent 55%),
    radial-gradient(ellipse at 20% 80%, rgba(33, 148, 255, 0.06) 0%, transparent 60%),
    linear-gradient(135deg, #ffffff 0%, #f5faff 50%, #eaf3ff 100%);
}
.hero__media {
  position: absolute;
  inset: 0;
}
.hero__spline {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity 1.2s var(--ease);
}
.hero__spline[loaded],
.hero__spline.is-loaded {
  opacity: 1;
}
/* MP4 動画版ヒーロー（Spline iframe からの差し替え） */
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  pointer-events: none;
}

.hero__placeholder {
  position: absolute;
  bottom: 16px;
  right: 24px;
  font-family: var(--font-family-en);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: rgba(10, 21, 37, 0.25);
  text-transform: uppercase;
  pointer-events: none;
}
.hero__overlay {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none; /* Splineの3D操作を阻害しない */
}
.hero__inner {
  text-align: center;
  color: var(--color-text);
  max-width: 1100px;
  padding-inline: 16px;
  pointer-events: auto;
}
.hero__title {
  font-size: clamp(40px, 6vw, 80px);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: 28px;
  color: var(--color-bg-dark);
}
/* 英文タイトル時の調整（Fraunces をディスプレイ的に大きく） */
.hero__title--en {
  font-family: "DM Serif Display", "Fraunces", "Inter", var(--font-family-jp); /* TOP Hero専用: DM Serif */
  font-style: italic;
  font-weight: 400; /* DM Serif は1ウェイトのみ */
  letter-spacing: -0.005em;
  font-size: clamp(52px, 7.5vw, 100px); /* 40-80px → 52-100px に拡大 */
  line-height: 1.2;
  word-break: keep-all;
  white-space: normal;
  padding-block: 0.15em;
}
.hero__sub {
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.85;
  color: var(--color-text-mute);
  margin-bottom: 40px;
  letter-spacing: 0.04em;
  font-weight: 500;
}

/* スマホ向けさらに調整 */
@media (max-width: 480px) {
  .hero__title {
    font-size: 32px;
    letter-spacing: 0;
    line-height: 1.3;
  }
  .hero__title--en {
    font-size: 52px; /* 40 → 52 でスマホでも存在感出す */
  }
  .hero__sub {
    font-size: 14px;
    line-height: 1.75;
  }
}

/* スマホでは hero 高さも控えめに（余白多すぎ問題対策） */
@media (max-width: 480px) {
  .hero {
    height: clamp(480px, 75vh, 720px);
  }
}
/* Splineロゴ非表示（Starter課金で消えるが念のため） */
.hero__spline::part(logo) { display: none; }

/* ============================================================
   Hero - 暗い動画背景時の白文字モード（hero--dark）
   ※ .hero__title 等の後に置いて確実に上書き
   ============================================================ */
.hero.hero--dark::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.40), rgba(0, 0, 0, 0.18));
  z-index: 1;
  pointer-events: none;
}
.hero.hero--dark .hero__overlay {
  z-index: 2;
}
.hero.hero--dark .hero__title,
.hero.hero--dark .hero__title--en {
  color: #ffffff !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); /* グロウ artifact 抑制（24px→8px） */
}
.hero.hero--dark .hero__sub {
  color: rgba(255, 255, 255, 0.95) !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45); /* 12px→4px */
}
.hero.hero--dark .btn--primary {
  background: #ffffff;
  color: var(--color-bg-dark);
  border-color: #ffffff;
}
.hero.hero--dark .btn--primary:hover {
  background: rgba(255, 255, 255, 0.92);
  color: var(--color-bg-dark);
}

/* ============================================================
   Block — 共通ブロック（白×ペーパー交互）
   ============================================================ */
.block {
  padding-block: var(--section-gap);
}
.block--white { background: var(--color-bg); }
.block--paper { background: var(--color-bg-paper); }

/* コンパクトブロック（採用導線などを控えめに見せる） */
.block--compact {
  padding-block: 64px; /* 通常の section-gap より小さめ */
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.recruit-compact {
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}
.recruit-compact__eyebrow {
  font-family: var(--font-family-en);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--color-accent);
  text-transform: uppercase;
  margin-bottom: 20px;
}
.recruit-compact__title {
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-bg-dark);
  margin-bottom: 24px;
  text-wrap: balance;
}
.recruit-compact__lead {
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  color: var(--color-text-mute);
  margin-bottom: 32px;
  text-wrap: pretty;
}

/* 採用ページ本文（recruit-message） */
.recruit-message {
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
}
.recruit-message__eyebrow {
  font-family: var(--font-family-en);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(16px, 1.6vw, 22px);
  color: var(--color-accent);
  letter-spacing: 0.04em;
  margin-bottom: 16px;
}
.recruit-message__title {
  font-size: clamp(28px, 3.6vw, 44px);
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-bg-dark);
  margin-bottom: 28px;
  text-wrap: balance;
}
.recruit-message__lead {
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 2;
  color: var(--color-text);
  margin-bottom: 48px;
  text-wrap: pretty;
}
.recruit-message__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.recruit-message__note {
  font-size: 12px;
  color: var(--color-text-mute);
  letter-spacing: 0.02em;
}

/* 背景動画ブロック（block--video） */
.block--video {
  position: relative;
  background: var(--color-bg-dark);
  overflow: hidden;
  color: #fff;
}
.block--video .block__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.block--video .block__video-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 21, 37, 0.55), rgba(10, 21, 37, 0.75));
  z-index: 1;
}
.block--video .block__content {
  position: relative;
  z-index: 2;
}
.block-head--on-video .block-head__title { color: #fff; text-shadow: 0 2px 16px rgba(0, 0, 0, 0.4); }
.block-head--on-video .block-head__eyebrow { color: var(--color-accent-pale); }
.block-head--on-video .block-head__lead { color: rgba(255, 255, 255, 0.85); }

@media (max-width: 768px) {
  .block { padding-block: var(--section-gap-sm); }
}

/* Block heading 4点セット: eyebrow → title → lead → CTA */
.block-head {
  text-align: center;
  margin-bottom: 56px;
}
.block-head__eyebrow {
  font-family: var(--font-family-en);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--color-accent);
  text-transform: uppercase;
  margin-bottom: 20px;
}
.block-head__title {
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: 24px;
}

/* 日本語見出し・リード文のレスポンシブ改行最適化
   text-wrap: balance → 各行を均等に配置（短い見出し向け）
   text-wrap: pretty → 最終行が孤立しないよう調整（長文向け） */
.hero__title,
.page-hero__title,
.block-head__title,
.block-cta__title,
.service-why__title,
.service-why__case-title,
.service-axis-card__title {
  text-wrap: balance;
}
.hero__sub,
.page-hero__sub,
.block-head__lead,
.block-cta__lead,
.service-axis-card__lead,
.service-axis-card__cat-desc,
.service-why__lead,
.service-why__desc,
.service-why__case-desc,
.service-why__close,
.service-concept p {
  text-wrap: pretty;
}

/* PC専用の改行（モバイルでは折り返しを自動化） */
.br-pc { display: inline; }
@media (max-width: 768px) {
  .br-pc { display: none; }
}

/* ツールロゴグリッド（Simple Icons CDN・対応可能ツール一覧） */
.tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 40px 24px;
  align-items: start;
  justify-items: center;
  margin: 48px 0 0;
  padding: 48px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  list-style: none;
}
.tool-grid li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  transition: transform 0.25s ease;
}
.tool-grid li:hover {
  transform: translateY(-2px);
}
.tool-grid img {
  height: 32px;
  width: auto;
  opacity: 0.55;
  transition: opacity 0.25s ease;
}
.tool-grid li:hover img {
  opacity: 1;
}
.tool-grid__label {
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--color-text-pale);
  font-weight: 500;
}
.tool-grid li:hover .tool-grid__label {
  color: var(--color-text);
}
.tool-grid__note {
  font-size: 13px;
  color: var(--color-text-pale);
  margin-top: 24px;
  text-align: center;
}
@media (max-width: 768px) {
  .tool-grid {
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    gap: 32px 16px;
    padding: 32px 0;
    margin: 32px 0 0;
  }
  .tool-grid img { height: 28px; }
  .tool-grid__label { font-size: 11px; }
}
.block-head__lead {
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  color: var(--color-text-mute);
  max-width: 720px;
  margin-inline: auto;
}

.block-cta {
  text-align: center;
  margin-top: 56px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 36px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: var(--fs-body);
  letter-spacing: var(--ls-jp);
  transition: all 0.3s var(--ease);
  white-space: nowrap;
}
.btn--lg { padding: 18px 44px; font-size: 16px; }
.btn--primary {
  background: var(--color-accent);
  color: #fff;
}
.btn--primary:hover {
  background: var(--color-accent-deep);
  opacity: 1;
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(33, 148, 255, 0.3);
}

/* ============================================================
   Block 2: About us — ステートメント + 図解（2カラム split）
   ============================================================ */
.block-head--left {
  text-align: left;
  margin-bottom: 56px;
}
.block-head--left .block-head__lead { margin-inline: 0; }

.about-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 80px;
  align-items: start;
  margin-top: 32px;
}
.about-grid__statement {
  font-size: 16px;
  line-height: 2.0;
  color: var(--color-text);
  letter-spacing: 0.02em;
}
.about-grid__statement p {
  margin-bottom: 1.6em;
}
.about-grid__statement p:last-child { margin-bottom: 0; }
.about-grid__visual {
  position: sticky;
  top: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.about-grid__img {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 768px) {
  .about-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .about-grid__visual {
    position: static;
    aspect-ratio: 16/10;
  }
  .about-grid__statement { font-size: 15px; line-height: 1.95; }
  .block-head--left { text-align: center; }
}

/* ============================================================
   Block 2 (旧 Our Value 3カラム — 別ページで使用 OR 削除候補) — 一旦残す
   ============================================================ */
.value-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-bottom: 0;
}
@media (max-width: 900px) {
  .value-grid { grid-template-columns: 1fr; }
}
.value-card {
  text-align: center;
}
.value-card__visual {
  aspect-ratio: 4/3;
  margin-bottom: 28px;
  background: linear-gradient(135deg, var(--color-accent-pale), #f3f9ff);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
}
.value-card__placeholder {
  font-family: var(--font-family-en);
  font-size: 13px;
  letter-spacing: 0.16em;
  color: var(--color-accent);
  text-transform: uppercase;
}
.value-card__label {
  font-family: var(--font-family-en);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--color-accent);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.value-card__title {
  font-size: var(--fs-h3);
  font-weight: 700;
  margin-bottom: 16px;
}
.value-card__desc {
  font-size: var(--fs-small);
  line-height: 1.9;
  color: var(--color-text-mute);
}

/* ============================================================
   Service axes — TOP用（2x2 グリッドカード）
   ============================================================ */
.service-axes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  margin-bottom: 48px;
}
.service-axis {
  background: #fff;
  padding: 40px 32px;
  border-radius: 0; /* 12px → 0（90度の四角に） */
  border: 1px solid var(--color-border);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.service-axis:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(33, 148, 255, 0.08);
}
.service-axis__num {
  font-family: "Inter", var(--font-family-jp); /* Fraunces → Inter（クリーンなサンセリフ） */
  font-style: normal; /* italic → 通常 */
  font-weight: 700; /* 500 → 700 で存在感UP */
  font-size: 44px; /* 40 → 44 でバランス調整 */
  color: var(--color-accent);
  line-height: 1;
  letter-spacing: -0.02em; /* 数字を引き締める */
  margin-bottom: 16px;
}
.service-axis__en {
  font-family: var(--font-family-en);
  font-style: italic;
  font-size: 14px;
  color: var(--color-accent);
  margin-bottom: 8px;
}
.service-axis__title {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 16px;
  letter-spacing: 0.04em;
}
.service-axis__desc {
  font-size: 14px;
  line-height: 1.85;
  color: var(--color-text-mute);
}
.service-axes__note {
  text-align: center;
  font-size: 14px;
  line-height: 1.95;
  color: var(--color-text);
  margin-bottom: 40px;
  padding: 32px;
  background: #fff;
  border-radius: 12px;
  border: 1px dashed var(--color-accent-pale);
}

@media (max-width: 768px) {
  .service-axes {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .service-axis { padding: 32px 24px; }
  .service-axis__num { font-size: 32px; }
}

/* ============================================================
   Service detail — /service/ ページ
   ============================================================ */
.service-concept {
  max-width: 820px;
  margin: 0 auto;
  font-size: 16px;
  line-height: 2.0;
  color: var(--color-text);
}
.service-concept p {
  margin-bottom: 1.6em;
}
.service-concept p:last-child { margin-bottom: 0; }

.service-axes-detail {
  display: grid;
  gap: 32px;
}
.service-axis-card {
  background: #fff;
  padding: 48px;
  border-radius: 0; /* 16px → 0 */
  border: 1px solid var(--color-border);
}
.service-axis-card__head {
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--color-border);
}
.service-axis-card__num {
  font-family: "Inter", var(--font-family-jp); /* Fraunces italic → Inter Bold */
  font-style: normal;
  font-weight: 700;
  font-size: 52px;
  color: var(--color-accent);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}
.service-axis-card__en {
  font-family: var(--font-family-en);
  font-style: italic;
  font-size: 16px;
  color: var(--color-accent);
  margin-bottom: 8px;
}
.service-axis-card__title {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 16px;
  letter-spacing: 0.04em;
}
.service-axis-card__lead {
  font-size: 15px;
  line-height: 1.95;
  color: var(--color-text-mute);
}
/* カテゴリ分けされたサブグリッド */
.service-axis-card__categories {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.service-axis-card__categories--four {
  grid-template-columns: repeat(2, 1fr);
  gap: 32px 28px;
}

.service-axis-card__category {
  padding: 0;
}
.service-axis-card__cat-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-accent);
  letter-spacing: 0.04em;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-accent-pale);
}
.service-axis-card__cat-desc {
  font-size: 13px;
  line-height: 1.7;
  color: var(--color-text-mute);
  margin-bottom: 14px;
  min-height: 2.4em;
}
.service-axis-card__list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.service-axis-card__list li {
  position: relative;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.75;
  color: var(--color-text);
}
.service-axis-card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 10px;
  height: 1px;
  background: var(--color-accent);
}

@media (max-width: 1024px) {
  .service-axis-card__categories,
  .service-axis-card__categories--four {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .service-axis-card__categories,
  .service-axis-card__categories--four {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .service-axis-card { padding: 32px 24px; }
  .service-axis-card__num { font-size: 40px; }
  .service-axis-card__title { font-size: 24px; }
}

/* Why Leadeck（差別化セクション） */
.service-why {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}
.service-why__item {
  padding: 32px;
  background: var(--color-bg-paper);
  border-radius: 12px;
}
/* 5項目時、最初の1個を全幅で目立たせる（核心メッセージのため） */
.service-why__item:first-child {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, #f5faff, #eaf3ff);
  border: 1px solid var(--color-accent-pale);
  padding: 48px;
}
.service-why__item:first-child .service-why__title {
  font-size: 24px;
  line-height: 1.5;
  margin-bottom: 24px;
}

/* 1番目核心メッセージ用の追加要素 */
.service-why__lead {
  font-size: 15px;
  line-height: 1.95;
  color: var(--color-text);
  margin-bottom: 32px;
  max-width: 900px;
}
.service-why__cases {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 32px 0;
}
.service-why__case {
  background: #fff;
  border-radius: 12px;
  padding: 28px;
  border: 1px solid var(--color-border);
}
.service-why__case-label {
  font-family: var(--font-family-en);
  font-style: italic;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--color-accent);
  margin-bottom: 12px;
}
.service-why__case-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 16px;
  line-height: 1.55;
  color: var(--color-text);
}
.service-why__case-desc {
  font-size: 13px;
  line-height: 1.85;
  color: var(--color-text-mute);
}

/* Service figure — SVG/PNG図解の汎用ラッパー */
.service-figure {
  margin: 48px 0 0;
}
.service-figure img {
  display: block;
  width: 100%;
  height: auto;
}
.service-figure--why {
  margin: 32px 0;
}

.service-why__close {
  font-size: 14px;
  line-height: 1.95;
  color: var(--color-text);
  margin-top: 24px;
}

@media (max-width: 768px) {
  .service-why__item:first-child { padding: 32px 24px; }
  .service-why__cases { grid-template-columns: 1fr; gap: 16px; }
  .service-why__case { padding: 24px; }
  .service-figure { margin: 32px 0 0; }
  .service-figure--why { margin: 24px 0; }
}
.service-why__title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 16px;
  line-height: 1.55;
  color: var(--color-text);
}
.service-why__desc {
  font-size: 14px;
  line-height: 1.95;
  color: var(--color-text-mute);
}

@media (max-width: 768px) {
  .service-why { grid-template-columns: 1fr; gap: 16px; }
}

/* リッチCTAブロック */
.block-cta--rich {
  text-align: center;
}
.block-cta__title {
  font-size: var(--fs-h2);
  font-weight: 700;
  margin-bottom: 16px;
}
.block-cta__lead {
  font-size: 15px;
  line-height: 1.85;
  color: var(--color-text-mute);
  margin-bottom: 36px;
}

/* page-hero（サブページ共通ヘッダ） */
.page-hero__inner {
  text-align: center;
}
.page-hero__eyebrow {
  font-family: var(--font-family-en);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(16px, 1.6vw, 22px);
  color: rgba(255, 255, 255, 0.92); /* 青グラデ背景に合わせて白に */
  letter-spacing: 0.04em;
  margin-bottom: 12px;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.2);
}
.page-hero__sub {
  font-size: clamp(14px, 1.3vw, 17px);
  line-height: 1.85;
  color: var(--color-text-mute);
  margin-top: 16px;
}

/* ============================================================
   Block visual placeholder (Service / Recruit ブロック)
   ============================================================ */
.block-visual {
  width: 100%;
  max-width: 880px;
  aspect-ratio: 16/9;
  margin: 0 auto;
  background: linear-gradient(135deg, var(--color-accent-pale), #f3f9ff);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
}
.block-visual__placeholder {
  font-family: var(--font-family-en);
  font-size: 14px;
  letter-spacing: 0.16em;
  color: var(--color-accent);
  text-transform: uppercase;
}

/* ============================================================
   News list (TOP内のニュースブロック)
   ============================================================ */
.news-list {
  max-width: 880px;
  margin: 0 auto;
}
.news-item {
  display: grid;
  grid-template-columns: 140px 1fr 120px;
  gap: 24px;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid var(--color-border);
}
.news-item:first-child {
  border-top: 1px solid var(--color-border);
}
.news-item__cat {
  display: inline-block;
  font-family: var(--font-family-en);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--color-accent);
  text-transform: uppercase;
}
.news-item__title {
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--color-text);
  line-height: 1.6;
}
.news-item__date {
  font-family: var(--font-family-en);
  font-size: 12px;
  color: var(--color-text-pale);
  text-align: right;
}
@media (max-width: 768px) {
  .news-item {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .news-item__date { text-align: left; }
}

/* ============================================================
   Footer (削除: ISMS / PRAP Group)
   ============================================================ */
.site-footer {
  background: var(--color-bg-dark); /* paper → 濃いネイビー（#0a1525） */
  padding-block: 72px 40px;
  border-top: none;
  color: rgba(255, 255, 255, 0.85);
}
.site-footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
  text-align: center;
}
.site-footer__logo-img {
  height: 32px;
  width: auto;
  display: block;
}
.site-footer__nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px;
}
.site-footer__nav a {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  transition: color 0.2s var(--ease);
}
.site-footer__nav a:hover {
  color: #ffffff;
}
.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
}
.site-footer__legal a {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
  transition: color 0.2s var(--ease);
}
.site-footer__legal a:hover {
  color: rgba(255, 255, 255, 0.85);
}
.site-footer__copyright {
  font-family: var(--font-family-en);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.04em;
}

/* ============================================================
   Custom Cursor
   ============================================================ */
.cursor {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: difference;
  display: none;
}
@media (hover: hover) and (pointer: fine) {
  .cursor { display: block; }
}
.cursor__dot {
  position: absolute;
  top: -4px; left: -4px;
  width: 8px; height: 8px;
  background: #fff;
  border-radius: 50%;
}
.cursor__ring {
  position: absolute;
  top: -22px; left: -22px;
  width: 44px; height: 44px;
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  transition: all 0.3s var(--ease);
}
.cursor.is-hover .cursor__ring {
  width: 80px; height: 80px;
  top: -40px; left: -40px;
  border-color: #fff;
  border-width: 2px;
}

/* SplitText hooks */
.split-char { display: inline-block; }

/* ============================================================
   Page Hero (サブページ共通の上部帯)
   ============================================================ */
.page-hero {
  position: relative;
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: 60px;
  background: linear-gradient(135deg, var(--color-accent-deep), var(--color-accent), #1e3a8a);
  background-size: 200% 200%;
  animation: heroBgFlow 20s ease-in-out infinite;
  overflow: hidden;
}
.page-hero__title {
  position: relative;
  z-index: 1;
  font-size: clamp(24px, 3.5vw, 36px);
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.08em;
  text-align: center;
}

/* page-hero に動画背景を仕込むパターン（news ページ等） */
.page-hero--video {
  min-height: 320px;
  background: #0a1525; /* 動画ロード前のフォールバック色 */
  animation: none; /* 動画背景時はグラデーションアニメーションを止める */
}
.page-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.page-hero__bg video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.page-hero__bg-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(10, 21, 37, 0.55), rgba(33, 148, 255, 0.35));
}
.page-hero--video .page-hero__inner {
  position: relative;
  z-index: 1;
}

/* 動画背景時のテキスト色・フォント調整 */
.page-hero--video .page-hero__eyebrow {
  font-family: "DM Serif Display", "Fraunces", "Inter", var(--font-family-jp);
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}
.page-hero--video .page-hero__title {
  color: #ffffff;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.4);
}
.page-hero--video .page-hero__sub {
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}

/* ============================================================
   Intro text (Mission page etc)
   ============================================================ */
.intro-text {
  max-width: 800px;
  margin: 0 auto;
  font-size: 15px;
  line-height: var(--lh-loose);
  color: var(--color-text);
}
.intro-text p {
  margin-bottom: 24px;
}

/* ============================================================
   Mission list (3 lines)
   ============================================================ */
.mission-list {
  text-align: center;
}
.mission-list li {
  font-size: var(--fs-h3);
  font-weight: 700;
  margin-bottom: 16px;
  line-height: 1.6;
}

/* ============================================================
   Mission page — Block-head 英訳サブタイトル
   ============================================================ */
.block-head__lead-en {
  font-family: var(--font-family-en);
  font-style: italic;
  font-size: 16px;
  color: var(--color-accent);
  margin-top: 8px;
  letter-spacing: 0.04em;
}

/* Mission page — split layout（PC: テキスト+画像 横並び、モバイル: 画像上+テキスト下） */
.mission-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  margin-top: 48px;
}
.mission-split__text {
  font-size: 15px;
  line-height: var(--lh-loose);
  color: var(--color-text);
}
.mission-split__text p {
  margin-bottom: 24px;
}
.mission-split__text p:last-child {
  margin-bottom: 0;
}
.mission-split__figure {
  margin: 0;
}
.mission-split__figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

@media (max-width: 1024px) {
  .mission-split {
    grid-template-columns: 1fr;
    gap: 32px;
    margin-top: 32px;
  }
  .mission-split__figure {
    order: -1;
  }
}

/* ============================================================
   Mission page — Value Tree（樹形図構造・スクロールで描画）
   ============================================================ */
.value-tree {
  position: relative;
  text-align: center;
}

/* Crown: "リーダー"であれ。 */
.value-tree__crown {
  margin-bottom: 0;
}
.value-tree__title {
  font-size: clamp(36px, 6vw, 56px);
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
  text-wrap: balance;
}
.value-tree__title-en {
  font-family: var(--font-family-en);
  font-style: italic;
  font-size: 18px;
  color: var(--color-accent);
  margin-bottom: 24px;
  letter-spacing: 0.04em;
}
.value-tree__sub {
  font-size: 14px;
  line-height: var(--lh-loose);
  color: var(--color-text-mute);
  max-width: 600px;
  margin: 0 auto;
  text-wrap: pretty;
}

/* Branches: 樹形図の線（スクロールでアニメーション描画） */
.value-tree__branches {
  position: relative;
  width: 100%;
  max-width: 760px;
  height: 80px;
  margin: 40px auto 0;
}
.value-tree__branches .branch {
  position: absolute;
  background: var(--color-text);
  transition: transform 0.7s ease;
}
.branch--top {
  top: 0;
  left: 50%;
  width: 1px;
  height: 30px;
  transform: translateX(-50%) scaleY(0);
  transform-origin: top center;
}
.branch--horizontal {
  top: 30px;
  left: 50%;
  width: 100%;
  max-width: 760px;
  height: 1px;
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
}
.branch--left {
  top: 30px;
  left: 0;
  width: 1px;
  height: 50px;
  transform: scaleY(0);
  transform-origin: top center;
}
.branch--right {
  top: 30px;
  right: 0;
  width: 1px;
  height: 50px;
  transform: scaleY(0);
  transform-origin: top center;
}
.value-tree.is-revealed .branch--top {
  transform: translateX(-50%) scaleY(1);
  transition-delay: 0s;
}
.value-tree.is-revealed .branch--horizontal {
  transform: translateX(-50%) scaleX(1);
  transition-delay: 0.5s;
}
.value-tree.is-revealed .branch--left,
.value-tree.is-revealed .branch--right {
  transform: scaleY(1);
  transition-delay: 1.0s;
}

/* Leaves: Leader + Reader カード */
.value-tree__leaves {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}
.value-leaf {
  background: #fff;
  padding: 48px;
  border-radius: 0; /* 16px → 0（90度の四角に） */
  border: 1px solid var(--color-border);
  text-align: left;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s ease, box-shadow 0.4s ease;
}
.value-leaf:hover {
  box-shadow: 0 12px 32px rgba(33, 148, 255, 0.08);
  transform: translateY(-4px);
}
.value-tree.is-revealed .value-leaf {
  opacity: 1;
  transform: translateY(0);
}
.value-tree.is-revealed .value-leaf:nth-child(1) {
  transition-delay: 1.3s, 1.3s, 0s;
}
.value-tree.is-revealed .value-leaf:nth-child(2) {
  transition-delay: 1.5s, 1.5s, 0s;
}
.value-leaf__num {
  font-family: "Inter", var(--font-family-jp); /* Fraunces italic → Inter Bold */
  font-style: normal;
  font-weight: 700;
  font-size: 44px;
  color: var(--color-accent);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.value-leaf__title {
  font-family: var(--font-family-jp); /* Fraunces → 游ゴシック */
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 16px;
  letter-spacing: 0.04em;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-border);
}
.value-leaf__lead {
  font-size: 14px;
  line-height: 1.85;
  color: var(--color-text-mute);
  margin-bottom: 32px;
}
.value-leaf__list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.value-leaf__list li h4 {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-accent);
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}
.value-leaf__list li p {
  font-size: 13px;
  line-height: 1.85;
  color: var(--color-text-mute);
}

@media (max-width: 1024px) {
  .value-tree__branches { display: none; }
  .value-tree__leaves {
    grid-template-columns: 1fr;
    margin-top: 32px;
  }
  .value-tree.is-revealed .value-leaf:nth-child(1) {
    transition-delay: 0s;
  }
  .value-tree.is-revealed .value-leaf:nth-child(2) {
    transition-delay: 0.2s;
  }
}
@media (max-width: 768px) {
  .value-leaf { padding: 32px 24px; }
  .value-leaf__num { font-size: 32px; }
  .value-leaf__title { font-size: 26px; }
}

/* ============================================================
   Mission page — 救うリーダー定義
   ============================================================ */
.reader-definition {
  max-width: 720px;
  margin: 0 auto;
  text-align: left; /* center → left（Mission/Vision と統一） */
}

/* 横並びレイアウト（PC：画像左 + テキスト右、スマホ：縦積み） */
.reader-definition--split {
  max-width: 1100px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
@media (max-width: 768px) {
  .reader-definition--split {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

.reader-definition__visual {
  margin: 0;
}
.reader-definition__visual img {
  width: 100%;
  height: auto;
  display: block;
}
.reader-definition__body {
  /* 縦中央寄せに対して内部の段組みは自然な間隔 */
}
.reader-definition__bridge {
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 700;
  line-height: 1.7;
  color: var(--color-bg-dark);
  margin-bottom: 24px;
  text-wrap: balance;
}
.reader-definition p {
  font-size: 15px;
  line-height: var(--lh-loose);
  color: var(--color-text);
  margin-bottom: 20px;
}
.reader-definition p:last-child {
  margin-bottom: 0;
}

/* ============================================================
   Mission page — Value → Skill ブリッジ
   ============================================================ */
.block--bridge {
  padding: 32px 0 !important;
}
.value-skill-bridge {
  text-align: center;
  font-size: clamp(16px, 2vw, 20px);
  line-height: 1.85;
  color: var(--color-text-mute);
  font-weight: 500;
}

/* mission → company へのリンク（社名の由来） */
.name-bridge {
  text-align: center;
  font-size: 15px;
  line-height: 1.95;
  color: var(--color-text-mute);
}
.name-bridge__link {
  display: inline-block;
  margin-top: 8px;
  font-weight: 700;
  color: var(--color-accent);
  letter-spacing: 0.04em;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease, transform 0.3s ease;
}
.name-bridge__link:hover {
  border-bottom-color: var(--color-accent);
  transform: translateX(4px);
}

/* ============================================================
   Mission page — Skill カード（service-axis風）
   ============================================================ */
.skill-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
/* Skill Section（mission ページ・参考スタイル準拠：ヘッダ + ボディ段落型） */
.skill-head {
  text-align: center;
  margin-bottom: 64px;
}
.skill-head__title {
  font-size: clamp(36px, 4vw, 48px);
  font-weight: 700;
  margin-bottom: 16px;
  letter-spacing: 0.04em;
}
.skill-head__sub {
  font-size: clamp(15px, 1.4vw, 17px);
  color: var(--color-text-mute);
  margin-bottom: 36px;
  line-height: 1.7;
}
.skill-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}
.skill-tag {
  display: inline-flex;
  align-items: center;
  padding: 14px 28px;
  background: #fff;
  border: 1px solid var(--color-border);
  font-size: clamp(15px, 1.4vw, 18px);
  color: var(--color-text-mute);
  letter-spacing: 0.04em;
}
.skill-tag strong {
  color: var(--color-accent);
  font-weight: 700;
  margin: 0 4px;
}
.skill-body {
  max-width: 760px;
  margin: 0 auto;
}
.skill-body__intro {
  font-size: 15px;
  line-height: 1.95;
  color: var(--color-text);
  margin-bottom: 48px;
}
.skill-detail {
  margin-bottom: 40px;
}
.skill-detail:last-child {
  margin-bottom: 0;
}
.skill-detail__title {
  font-size: clamp(18px, 1.8vw, 22px);
  font-weight: 700;
  color: var(--color-bg-dark);
  margin-bottom: 8px;
}
.skill-detail__lead {
  font-size: 14px;
  color: var(--color-text);
  margin-bottom: 12px;
  font-weight: 500;
}
.skill-detail__desc {
  font-size: 15px;
  line-height: 1.95;
  color: var(--color-text-mute);
}
@media (max-width: 768px) {
  .skill-tags { gap: 8px; }
  .skill-tag { padding: 10px 18px; font-size: 14px; }
}

.skill-card {
  background: #fff;
  padding: 40px 32px;
  border-radius: 0; /* 12px → 0 */
  border: 1px solid var(--color-border);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.skill-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(33, 148, 255, 0.08);
}
.skill-card__num {
  font-family: "Inter", var(--font-family-jp); /* Fraunces italic → Inter Bold */
  font-style: normal;
  font-weight: 700;
  font-size: 44px;
  color: var(--color-accent);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}
.skill-card__en {
  font-family: var(--font-family-en);
  font-style: italic;
  font-size: 14px;
  color: var(--color-accent);
  margin-bottom: 8px;
}
.skill-card__title {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 16px;
  letter-spacing: 0.04em;
}
.skill-card__desc {
  font-size: 14px;
  line-height: 1.85;
  color: var(--color-text-mute);
}

@media (max-width: 1024px) {
  .skill-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .skill-grid { grid-template-columns: 1fr; }
  .skill-card { padding: 32px 24px; }
  .skill-card__num { font-size: 32px; }
  .skill-card__title { font-size: 20px; }
}

/* ============================================================
   Mission page — Framework カード（IPO / just-best-fast 共用）
   ============================================================ */
.framework-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.framework-card {
  background: #fff;
  padding: 48px 32px;
  border-radius: 12px;
  border: 1px solid var(--color-border);
  text-align: center;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.framework-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(33, 148, 255, 0.08);
}
.framework-card__icon {
  display: inline-block;
  font-size: 48px;
  line-height: 1;
  margin-bottom: 20px;
}
.framework-card__title {
  font-family: var(--font-family-en);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: 12px;
  color: var(--color-text);
}
.framework-card__desc {
  font-size: 14px;
  line-height: 1.85;
  color: var(--color-text-mute);
}
.framework-conclusion {
  text-align: center;
  font-size: 15px;
  line-height: var(--lh-loose);
  color: var(--color-text);
  margin-top: 48px;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  padding: 24px;
  border-top: 1px solid var(--color-border);
}

@media (max-width: 768px) {
  .framework-grid { grid-template-columns: 1fr; gap: 20px; }
  .framework-card { padding: 36px 24px; }
  .framework-card__icon { font-size: 40px; }
  .framework-card__title { font-size: 24px; }
  .framework-conclusion { margin-top: 32px; padding: 20px 0; }
}

/* ============================================================
   Mission page — Operational Experience（OX statement block）
   ============================================================ */
.ox-statement {
  max-width: 800px;
  margin: 0 auto;
  font-size: 15px;
  line-height: var(--lh-loose);
  color: var(--color-text);
}
.ox-statement p {
  margin-bottom: 24px;
}
.ox-statement p:last-child {
  margin-bottom: 0;
}
.ox-statement strong {
  color: var(--color-accent);
  font-weight: 600;
}
.ox-statement blockquote {
  margin: 32px 0;
  padding: 24px 32px;
  background: #fff;
  border-left: 3px solid var(--color-accent);
  border-radius: 4px;
  font-size: 14px;
  line-height: 1.85;
  color: var(--color-text-mute);
  font-style: italic;
}

@media (max-width: 768px) {
  .ox-statement blockquote { padding: 20px 24px; margin: 24px 0; }
}

/* ============================================================
   Mission page — The Name（社名・ロゴ由来）
   ============================================================ */
.name-section {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  max-width: 1080px;
  margin: 0 auto;
}
.name-block {
  background: #fff;
  padding: 48px;
  border-radius: 16px;
  border: 1px solid var(--color-border);
}
.name-block__heading {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-accent-deep);
}
.name-block__body p {
  font-size: 14px;
  line-height: 1.95;
  color: var(--color-text);
  margin-bottom: 20px;
}
.name-block__body p:last-child {
  margin-bottom: 0;
}
.name-block__body strong {
  color: var(--color-accent);
  font-weight: 600;
}

@media (max-width: 1024px) {
  .name-section { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .name-block { padding: 32px 24px; }
}

/* ============================================================
   Company page — 拡張要素
   ============================================================ */

/* 1列レイアウト（companyページ用：Lead/Deck/統合の3ブロック縦） */
.name-section--single {
  grid-template-columns: 1fr;
  max-width: 880px;
}

/* Lead + Deck 横並び（PC：2カラム / スマホ：1カラム） */
.name-section--horizontal {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  max-width: 1100px;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .name-section--horizontal {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* 各カラム内ブロック（縦に内容を流すコンパクト形） */
.name-block--col {
  display: flex;
  flex-direction: column;
  padding: 40px 32px;
}
.name-block--col .name-block__body {
  flex: 1;
}

/* Lead カラム下部のペンギン visual */
.name-block__visual--bottom {
  margin-top: 24px;
  text-align: center;
}
.name-block__visual--bottom img {
  width: 100%;
  height: auto;
  max-width: 240px;
  margin: 0 auto;
  display: block;
}
.name-block__visual--bottom .name-block__visual-caption {
  font-size: 12px;
  line-height: 1.7;
  color: var(--color-text-mute);
  text-align: center;
  margin-top: 12px;
  letter-spacing: 0.02em;
}

/* Deck カラム内：カード/甲板を縦積み */
.deck-meanings--stacked {
  grid-template-columns: 1fr;
  gap: 16px;
}

/* 統合ブロックは横並びの下にフルワイド */
.name-section--unified-wrap {
  max-width: 880px;
  margin: 32px auto 0;
}

/* Lead ブロック：左テキスト + 右画像（PC横並び・スマホ縦積み） */
.name-block--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.name-block--split .name-block__visual {
  order: 2;
}
.name-block--split .name-block__visual img {
  width: 100%;
  height: auto;
  max-width: 320px;
  margin-inline: auto;
  display: block;
}
.name-block__visual-caption {
  font-size: 12px;
  line-height: 1.7;
  color: var(--color-text-mute);
  text-align: center;
  margin-top: 16px;
  letter-spacing: 0.02em;
}
.name-block--split .name-block__body {
  order: 1;
}
@media (max-width: 768px) {
  .name-block--split {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .name-block--split .name-block__visual {
    order: 1;
  }
  .name-block--split .name-block__body {
    order: 2;
  }
}

/* Deck ブロック：見出し直下のフル幅画像 */
.name-block__visual--full {
  margin: 0 0 32px 0;
}
.name-block__visual--full img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

/* Lead+Deck 統合ブロック：中央のロゴ画像 */
.name-block__visual--center {
  margin: 0 auto 24px;
  max-width: 240px;
}
.name-block__visual--center img {
  width: 100%;
  height: auto;
  display: block;
}

/* deck の二つの意味（カードの束 + 船のデッキ） */
.deck-meanings {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 24px;
}

/* visual 版：背景画像 + オーバーレイ + 白文字 */
.deck-meanings--visual {
  gap: 16px;
}
.deck-meanings--visual .deck-meaning {
  position: relative;
  padding: 0;
  background-color: var(--color-bg-dark);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 0;
  border: none;
  min-height: 380px;
  overflow: hidden;
  display: flex;
}
.deck-meanings--visual .deck-meaning__overlay {
  position: relative;
  z-index: 1;
  padding: 88px 32px 36px; /* top 大きく取って本文を下にシフト */
  background: linear-gradient(135deg, rgba(10, 21, 37, 0.78), rgba(10, 21, 37, 0.55));
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.deck-meanings--visual .deck-meaning__title {
  font-size: clamp(20px, 2vw, 24px);
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 16px;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
}
.deck-meanings--visual .deck-meaning p {
  font-size: 13px;
  line-height: 1.85;
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: 12px !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
.deck-meanings--visual .deck-meaning p:last-child {
  margin-bottom: 0 !important;
}
.deck-meanings--visual .deck-meaning strong {
  color: #fff;
  font-weight: 700;
}

/* 旧版（テキストのみ）の互換性 */
.deck-meaning {
  padding: 24px;
  background: rgba(33, 148, 255, 0.05);
  border-radius: 8px;
  border-left: 3px solid var(--color-accent);
}
.deck-meaning__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-accent-deep);
  margin-bottom: 12px;
  letter-spacing: 0.04em;
}
.deck-meaning p {
  font-size: 13px;
  line-height: 1.85;
  color: var(--color-text);
  margin-bottom: 12px !important;
}
.deck-meaning p:last-child {
  margin-bottom: 0 !important;
}
.deck-meaning strong {
  color: var(--color-accent);
}

@media (max-width: 768px) {
  .deck-meanings {
    grid-template-columns: 1fr;
  }
  .deck-meanings--visual .deck-meaning {
    min-height: 300px;
  }
}

/* Lead+Deck 統合ブロック（強調） */
.name-block--unified {
  background: linear-gradient(135deg, var(--color-accent-pale), #f3f9ff);
  border: 1px solid var(--color-accent-pale);
  text-align: center;
}
.name-block--unified .name-block__heading {
  color: var(--color-accent-deep);
  border-bottom-color: rgba(33, 148, 255, 0.2);
}
.name-block--unified .name-block__body p {
  font-size: 16px;
  font-weight: 500;
}

@media (max-width: 768px) {
  .deck-meanings { grid-template-columns: 1fr; }
}

/* ロゴ表示セクション */
.logo-section {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 48px;
  align-items: center;
  max-width: 1080px;
  margin: 0 auto;
  padding: 48px;
  background: #fff;
  border-radius: 16px;
  border: 1px solid var(--color-border);
}
.logo-section__visual {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.logo-section__visual img {
  max-width: 240px;
  width: 100%;
  height: auto;
}
.logo-section__body p {
  font-size: 14px;
  line-height: 1.95;
  color: var(--color-text);
  margin-bottom: 20px;
}
.logo-section__body p:last-child {
  margin-bottom: 0;
}
.logo-section__body strong {
  color: var(--color-accent);
  font-weight: 600;
}

@media (max-width: 1024px) {
  .logo-section {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 40px 32px;
  }
  .logo-section__visual img { max-width: 180px; }
}
@media (max-width: 768px) {
  .logo-section { padding: 32px 24px; }
}

/* CEO挨拶プレースホルダー */
.ceo-section__placeholder {
  text-align: center;
  font-size: 14px;
  color: var(--color-text-pale);
  font-style: italic;
  padding: 60px 24px;
  background: rgba(33, 148, 255, 0.03);
  border-radius: 8px;
  border: 1px dashed rgba(33, 148, 255, 0.2);
}

/* CEO挨拶 — 冒頭の引用句 */
.ceo-section__lead {
  font-size: clamp(18px, 2.5vw, 22px);
  font-weight: 700;
  line-height: 1.7;
  color: var(--color-text);
  margin-bottom: 32px !important;
  letter-spacing: 0.04em;
  text-wrap: balance;
}

/* CEO挨拶 — 締めのリーディングカンパニー宣言 */
.ceo-section__close {
  font-size: clamp(15px, 2vw, 18px);
  font-weight: 600;
  line-height: 1.85;
  color: var(--color-text);
  margin-top: 40px !important;
  padding-top: 28px;
  border-top: 1px solid var(--color-border);
}
.ceo-section__close strong {
  color: var(--color-accent);
}
.ceo-section__body strong {
  color: var(--color-accent);
}

/* CTA 複数ボタン横並び */
.block-cta__buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}
@media (max-width: 480px) {
  .block-cta__buttons { flex-direction: column; align-items: stretch; }
}

/* ============================================================
   Service item
   ============================================================ */
.service-item {
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
  padding-block: 64px;
}
.service-item:not(:last-of-type) {
  border-bottom: 1px solid var(--color-border);
}
.service-item__name {
  font-size: var(--fs-h2);
  font-weight: 700;
  margin-bottom: 28px;
}
.service-item__desc {
  color: var(--color-text-mute);
  margin-bottom: 36px;
  line-height: var(--lh-loose);
}

/* ============================================================
   CEO message (Company page)
   ============================================================ */
.ceo-section {
  max-width: 800px;
  margin: 0 auto;
}
.ceo-section__photo {
  width: 220px;
  height: 280px;
  margin: 0 auto 40px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: linear-gradient(135deg, var(--color-accent-pale), #f3f9ff);
}
.ceo-section__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* 写真を本文の下に配置するパターン */
.ceo-section__photo--bottom {
  margin: 48px auto 16px;
}
.ceo-section__body p {
  margin-bottom: 24px;
  line-height: var(--lh-loose);
  color: var(--color-text);
}
.ceo-section__sign {
  text-align: right;
  margin-top: 32px;
  font-weight: 600;
}

/* ============================================================
   Company table
   ============================================================ */
.company-table {
  max-width: 880px;
  margin: 0 auto;
  border-top: 1px solid var(--color-border);
}
.company-table__row {
  display: grid;
  grid-template-columns: 220px 1fr; /* 200 → 220 で長いラベル余裕 */
  padding: 20px 24px;
  gap: 24px;
  border-bottom: 1px solid var(--color-border);
}
.company-table__row dt {
  font-weight: 700;
  line-height: 1.5;
}
.company-table__sublabel {
  display: inline-block;
  font-size: 12px;
  font-weight: 400;
  color: var(--color-text-mute);
  letter-spacing: 0;
}
.company-table__row dd {
  color: var(--color-text-mute);
  line-height: 1.7;
}
@media (max-width: 768px) {
  .company-table__row { grid-template-columns: 1fr; gap: 8px; }
}

/* ============================================================
   Recruit list
   ============================================================ */
.recruit-list {
  max-width: 600px;
  margin: 0 auto;
  text-align: left;
}
.recruit-list li {
  padding: 16px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 15px;
}
.recruit-list li:first-child {
  border-top: 1px solid var(--color-border);
}
.recruit-list a {
  color: var(--color-accent);
  font-weight: 500;
}

/* ============================================================
   News grid (sub page)
   ============================================================ */
.news-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .news-grid { grid-template-columns: 1fr; }
}
.news-card {
  display: flex;
  flex-direction: column;
  padding: 32px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: all 0.3s var(--ease);
}
.news-card:hover {
  border-color: var(--color-accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(33, 148, 255, 0.08);
  opacity: 1;
}
.news-card__cat {
  font-family: var(--font-family-en);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--color-accent);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.news-card__title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
  margin-bottom: 16px;
}
.news-card__excerpt {
  font-size: 13px;
  color: var(--color-text-mute);
  line-height: 1.8;
  margin-bottom: auto;
  padding-bottom: 16px;
}
.news-card__date {
  font-family: var(--font-family-en);
  font-size: 12px;
  color: var(--color-text-pale);
  margin-top: 16px;
}

/* ニュース「順次更新」表示（記事少ない時の余白埋め） */
.news-coming-soon {
  text-align: center;
  font-size: 13px;
  color: var(--color-text-pale);
  margin-top: 64px;
  padding: 32px;
  border-top: 1px solid var(--color-border);
  letter-spacing: 0.04em;
}

/* ============================================================
   Pagination
   ============================================================ */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 64px;
}
.pagination a, .pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  padding: 8px 14px;
  font-family: var(--font-family-en);
  font-size: 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-mute);
}
.pagination .is-current {
  background: var(--color-accent);
  color: #fff;
  border-color: var(--color-accent);
}

/* ============================================================
   Contact form
   ============================================================ */
.contact-form {
  max-width: 720px;
  margin: 0 auto;
  display: grid;
  gap: 24px;
}
.form-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.form-row__label {
  font-size: 14px;
  font-weight: 600;
}
.form-row__label .required {
  color: var(--color-accent);
  margin-left: 4px;
}
.form-row__input,
.form-row__select,
.form-row__textarea {
  padding: 14px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: #fff;
  font-family: inherit;
  font-size: 15px;
  color: var(--color-text);
  transition: border-color 0.2s var(--ease);
}
.form-row__input:focus,
.form-row__select:focus,
.form-row__textarea:focus {
  outline: none;
  border-color: var(--color-accent);
}
.form-row__textarea {
  min-height: 140px;
  resize: vertical;
}
.form-consent {
  font-size: 13px;
  color: var(--color-text-mute);
  text-align: center;
  margin-top: 16px;
}
.form-consent a {
  color: var(--color-accent);
  text-decoration: underline;
}
.form-submit {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}

/* ============================================================
   Reduced Motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .hero__media { animation: none !important; }
  .cursor { display: none !important; }
  body, a, button { cursor: auto !important; }
}

/* ============================================================
   Legal Doc（プライバシーポリシー / 特商法表記の共通スタイル）
   ============================================================ */
.legal-doc {
  max-width: 800px;
  margin: 0 auto;
}
.legal-doc__intro {
  font-size: 15px;
  line-height: 1.95;
  color: var(--color-text);
  margin-bottom: 48px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--color-border);
}
.legal-doc__section-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-bg-dark);
  margin-top: 40px;
  margin-bottom: 16px;
  letter-spacing: 0.02em;
}
.legal-doc p {
  font-size: 14px;
  line-height: 1.95;
  color: var(--color-text);
  margin-bottom: 16px;
}
.legal-doc__list {
  margin: 16px 0 24px;
  padding-left: 24px;
}
.legal-doc__list li {
  font-size: 14px;
  line-height: 1.95;
  color: var(--color-text);
  margin-bottom: 8px;
}
.legal-doc__contact {
  background: var(--color-bg-paper);
  padding: 20px 24px;
  border-left: 3px solid var(--color-accent);
  margin: 16px 0;
}
.legal-doc__contact p {
  margin-bottom: 0;
}
.legal-doc__date {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--color-border);
  font-size: 12px;
  color: var(--color-text-mute);
  text-align: right;
}

/* 特商法表記用テーブル */
.legal-doc__table {
  margin: 0;
  border-top: 1px solid var(--color-border);
}
.legal-doc__row {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 24px;
  padding: 20px 0;
  border-bottom: 1px solid var(--color-border);
}
.legal-doc__row dt {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-bg-dark);
  line-height: 1.6;
}
.legal-doc__row dd {
  font-size: 14px;
  line-height: 1.85;
  color: var(--color-text);
}
.legal-doc__note {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--color-text-mute);
}
@media (max-width: 768px) {
  .legal-doc__row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}