/* =========================================================
   CODIFY コーポレートサイト 共通スタイル
   - 設計方針: docs/design-direction.md
   - 色・余白・文字サイズは :root のCSS変数(デザイントークン)で管理。
     ブランドカラー確定後は変数の値を差し替えるだけで全体に反映される。
   - モバイルファースト(min-width で上書き)
   ========================================================= */

/* ----------------------------------------------------------
   デザイントークン
   ---------------------------------------------------------- */
:root {
  /* カラーパレット(ブランド確定版)
     出典: 現行サイト codify.co.jp テーマCSSのカスタムプロパティ(2026-07-08取得)
     --color-text-muted のみ、元値 #6b7a90 が白背景でコントラスト比4.5:1未満のため #5f6f85 に微調整 */
  --color-bg: #ffffff;
  --color-surface: #f7f9fc;
  --color-text: #0b1520;
  --color-text-muted: #5f6f85;
  --color-border: #e3e8ef;
  --color-primary: #055392;
  --color-primary-strong: #033e6c;
  --color-primary-soft: #e7f0f9;
  --color-dark: #0b1520;
  --color-dark-2: #253040;
  --color-on-primary: #ffffff;
  --color-on-dark: #f2f6fb;
  --color-notice-bg: #fff8e6;
  --color-notice-border: #eed9a0;
  --color-notice-text: #6b5518;

  /* ダークヒーロー・CTAバンド用(ADR-0002) */
  --color-dark-deep: #050d1a;
  --color-dark-mid: #0a1526;
  --color-accent-on-dark: #7db4e4;
  --color-glow-strong: rgba(23, 116, 199, 0.55);
  --color-glow-soft: rgba(5, 83, 146, 0.45);
  --color-primary-outline: rgba(5, 83, 146, 0.35);

  /* タイポグラフィ */
  --font-family-base:
    system-ui, -apple-system, "Segoe UI", "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    "Noto Sans JP", Meiryo, sans-serif;
  /* タイプスケール(2026-07-08: 本文を全体的に底上げ。見出しは本文より大きく保つ)
     sm=ラベル/補足, base=本文, lead=リード文, lg=大ボタン, h3=カード見出し */
  --font-size-sm: 0.9375rem;
  --font-size-base: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem);
  --font-size-lg: clamp(1.1875rem, 1.08rem + 0.4vw, 1.375rem);
  --font-size-lead: clamp(1.0625rem, 0.9rem + 0.6vw, 1.3125rem);
  --font-size-h3: clamp(1.25rem, 1.15rem + 0.4vw, 1.4375rem);
  --font-size-h2: clamp(1.75rem, 1.15rem + 2.6vw, 2.6rem);
  --font-size-hero: clamp(2.75rem, 1.4rem + 6vw, 5rem);
  --line-height-base: 1.9;
  --line-height-heading: 1.35;

  /* 余白・レイアウト */
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: 4rem;
  --section-space: clamp(4.5rem, 3rem + 8vw, 8rem);
  --container-max: 1080px;
  --container-pad: clamp(1.25rem, 4vw, 2.5rem);
  --header-height: 4rem;

  /* 装飾(角丸・影は現行テーマの値に準拠) */
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-full: 999px;
  --shadow-card: 0 2px 6px rgba(0, 0, 0, 0.06), 0 10px 24px rgba(0, 0, 0, 0.06);
  --shadow-card-soft: 0 1px 3px rgba(11, 21, 32, 0.05);
  --transition-fast: 0.2s ease;
}

/* ----------------------------------------------------------
   リセット・ベース
   ---------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 1rem);
}

body {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  letter-spacing: 0.02em;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

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

h1,
h2,
h3,
h4 {
  line-height: var(--line-height-heading);
  font-weight: 700;
  /* 見出しの語中折返しを避ける(未対応ブラウザでは単に無視される) */
  word-break: auto-phrase;
}

a {
  color: inherit;
  text-decoration: none;
}

/* クラスなしの本文中リンクは下線付きで明示する(アクセシビリティ) */
main a:not([class]) {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

::selection {
  background: var(--color-primary-soft);
}

/* ----------------------------------------------------------
   ユーティリティ
   ---------------------------------------------------------- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* 汎用: テキストを水平中央寄せ */
.text-center {
  text-align: center;
}

/* 狭い画面(モバイル)では改行を無効化し、640px以上でのみ改行させる<br> */
.br-wide {
  display: none;
}

@media (min-width: 640px) {
  .br-wide {
    display: inline;
  }
}

.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 100;
  padding: 0.75em 1.25em;
  background: var(--color-dark);
  color: var(--color-on-dark);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.skip-link:focus {
  top: 0;
}

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

.container--narrow {
  max-width: 760px;
}

.eyebrow {
  display: inline-block;
  margin-bottom: var(--space-md);
  font-size: var(--font-size-sm);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary);
}

/* 先頭の短いアクセントライン */
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 2rem;
  height: 1px;
  margin-right: 0.6em;
  vertical-align: middle;
  background: currentColor;
  opacity: 0.7;
}

/* ----------------------------------------------------------
   ヘッダー・ナビゲーション
   ---------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-height);
  background: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border);
  transition:
    background-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

/* スクロール後は背景を強めて浮かせる(motion.js が .is-scrolled を付与) */
.site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 2px 18px rgba(11, 21, 32, 0.08);
}

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

.site-logo {
  display: block;
}

.site-logo img {
  height: 2.5rem;
  width: auto;
}

/* ハンバーガーボタン(モバイルのみ表示) */
.nav-toggle {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.nav-toggle__bars {
  position: relative;
  width: 22px;
  height: 2px;
  background: var(--color-text);
  transition: background-color var(--transition-fast);
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 22px;
  height: 2px;
  background: var(--color-text);
  transition: transform var(--transition-fast);
}

.nav-toggle__bars::before {
  top: -7px;
}

.nav-toggle__bars::after {
  top: 7px;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars {
  background: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after {
  transform: translateY(-7px) rotate(-45deg);
}

/* モバイル: ヘッダー直下に開閉パネル */
.global-nav {
  position: absolute;
  top: var(--header-height);
  left: 0;
  right: 0;
  display: none;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);
}

.global-nav.is-open {
  display: block;
}

.global-nav__list {
  list-style: none;
  margin: 0;
  padding: var(--space-sm) var(--container-pad) var(--space-lg);
}

.global-nav__list a {
  display: block;
  padding: 0.85em 0.25em;
  font-weight: 500;
}

.global-nav__list a:hover {
  color: var(--color-primary);
}

@media (min-width: 768px) {
  .nav-toggle {
    display: none;
  }

  .global-nav {
    position: static;
    display: block;
    background: none;
    border: 0;
    box-shadow: none;
  }

  .global-nav__list {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: 0;
  }

  .global-nav__list a {
    padding: 0.25em 0;
    font-size: var(--font-size-sm);
    font-weight: 600;
    transition: color var(--transition-fast);
  }

  /* ナビ内CTAはピル型ボタンとして強調 */
  .global-nav__cta {
    padding: 0.55em 1.3em !important;
    border-radius: var(--radius-full);
    background: var(--color-primary);
    color: var(--color-on-primary);
    transition: background-color var(--transition-fast);
  }

  .global-nav__cta:hover {
    background: var(--color-primary-strong);
    color: var(--color-on-primary) !important;
  }
}

@media (min-width: 1024px) {
  .global-nav__list {
    gap: var(--space-lg);
  }
}

/* ----------------------------------------------------------
   ボタン
   ---------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.8em 1.8em;
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  font-size: var(--font-size-base);
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast),
    transform var(--transition-fast);
}

.btn--primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.btn--primary:hover {
  background: var(--color-primary-strong);
  transform: translateY(-1px);
}

.btn--ghost {
  border-color: var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
}

.btn--ghost:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.btn--lg {
  padding: 1em 2.4em;
  font-size: var(--font-size-lg);
}

/* ダーク背景用ボタン */
.btn--inverse {
  background: #ffffff;
  color: var(--color-dark);
}

.btn--inverse:hover {
  background: var(--color-primary-soft);
  transform: translateY(-1px);
}

.btn--ghost-dark {
  border-color: rgba(255, 255, 255, 0.4);
  background: transparent;
  color: #ffffff;
}

.btn--ghost-dark:hover {
  border-color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
}

/* 選択中のボタン(JSで is-selected を付与)。プライマリ色で塗る */
.btn.is-selected {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.btn.is-selected:hover {
  background: var(--color-primary-strong);
}

/* ----------------------------------------------------------
   Hero(ダークヒーロー / ADR-0002)
   ---------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: calc(var(--section-space) * 1.15) calc(var(--section-space) * 1.2);
  background: linear-gradient(
    180deg,
    var(--color-dark-deep) 0%,
    var(--color-dark-mid) 55%,
    var(--color-dark) 100%
  );
  color: var(--color-on-dark);
}

.hero__inner {
  position: relative;
}

/* 背景装飾: グリッド線 + 光彩 + 巨大英字(すべて aria-hidden の装飾) */
.hero__bg {
  position: absolute;
  inset: 0;
}

.hero__bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(900px 640px at 70% 10%, rgba(0, 0, 0, 0.9), transparent 75%);
  mask-image: radial-gradient(900px 640px at 70% 10%, rgba(0, 0, 0, 0.9), transparent 75%);
}

.hero__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
}

.hero__glow--1 {
  top: -180px;
  right: -100px;
  width: 540px;
  height: 540px;
  background: var(--color-glow-strong);
}

.hero__glow--2 {
  bottom: -220px;
  left: -140px;
  width: 460px;
  height: 460px;
  background: var(--color-glow-soft);
}

html.motion-ready .hero__glow--1 {
  animation: glow-drift-1 22s ease-in-out infinite alternate;
}

html.motion-ready .hero__glow--2 {
  animation: glow-drift-2 26s ease-in-out infinite alternate;
}

.hero__watermark {
  position: absolute;
  right: -0.06em;
  bottom: -0.16em;
  font-size: clamp(6rem, 22vw, 17rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.045);
  user-select: none;
}

.hero__eyebrow {
  color: var(--color-accent-on-dark);
}

.hero__title {
  margin-bottom: var(--space-lg);
  font-size: var(--font-size-hero);
  letter-spacing: 0.01em;
  color: #ffffff;
}

.hero__line {
  display: block;
  overflow: hidden;
}

.hero__line-inner {
  display: inline-block;
}

/* リード文+社名のまとまり。行末幅(fit-content)に縮めることで、
   ブロックの右端 = リード文の実際の行末(。の位置)になる。
   max-width は付けない(付けると継承 font-size 基準の em になり、
   リード文の実寸より狭くなって「。」が折り返してしまうため。
   リード文は <br> 区切りの最長行で自然に幅が決まる) */
.hero__lead-block {
  width: -moz-fit-content;
  width: fit-content;
}

.hero__lead {
  margin-bottom: var(--space-md);
  font-size: var(--font-size-lead);
  line-height: 1.8;
  color: rgba(242, 246, 251, 0.78);
}

/* 社名(ヒーロー下部の署名)
   lead-block(行末幅)の右端に右寄せ → 社名の右端がリード文の「。」に揃う */
.hero__signature {
  margin-bottom: var(--space-xl);
  font-size: var(--font-size-lead);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #ffffff;
  text-align: right;
}

/* スクロールキュー */
.hero__scroll-cue {
  position: absolute;
  bottom: 1.1rem;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(242, 246, 251, 0.55);
}

.hero__scroll-cue::after {
  content: "";
  display: block;
  width: 1px;
  height: 32px;
  margin: 0.5rem auto 0;
  background: linear-gradient(rgba(255, 255, 255, 0.6), transparent);
  transform-origin: top;
}

html.motion-ready .hero__scroll-cue::after {
  animation: cue-line 2.2s ease-in-out infinite;
}

/* 登場演出(motion-ready 時のみ発火。reduced-motion 時は即最終状態で表示) */
html.motion-ready .hero__line-inner {
  translate: 0 110%;
  animation: hero-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

html.motion-ready .hero__line:nth-child(1) .hero__line-inner {
  animation-delay: 0.18s;
}

html.motion-ready .hero__line:nth-child(2) .hero__line-inner {
  animation-delay: 0.34s;
}

html.motion-ready .hero__eyebrow,
html.motion-ready .hero__lead,
html.motion-ready .hero__signature,
html.motion-ready .hero__actions {
  opacity: 0;
  animation: hero-fade 0.8s ease both;
}

html.motion-ready .hero__eyebrow {
  animation-delay: 0.08s;
}

html.motion-ready .hero__lead {
  animation-delay: 0.55s;
}

html.motion-ready .hero__signature {
  animation-delay: 0.66s;
}

html.motion-ready .hero__actions {
  animation-delay: 0.78s;
}

html.motion-ready .hero__scroll-cue {
  opacity: 0;
  animation: cue-fade 0.8s ease 1.2s both;
}

@keyframes hero-rise {
  to {
    translate: 0 0;
  }
}

@keyframes hero-fade {
  from {
    opacity: 0;
    translate: 0 18px;
  }

  to {
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes cue-fade {
  to {
    opacity: 1;
  }
}

@keyframes glow-drift-1 {
  to {
    transform: translate3d(-70px, 50px, 0) scale(1.1);
  }
}

@keyframes glow-drift-2 {
  to {
    transform: translate3d(60px, -40px, 0) scale(1.06);
  }
}

@keyframes cue-line {
  0% {
    transform: scaleY(0);
  }

  50% {
    transform: scaleY(1);
  }

  100% {
    transform: scaleY(0);
  }
}

/* ボタン横並び(Hero・採用CTAなどで共用) */
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-md);
}

.section .btn-row {
  margin-top: var(--space-xl);
}

/* 採用ボタン: モバイル1列→640で2列→768で横一列。テキストは改行させない */
.btn-row--inline {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm) var(--space-md);
}

.btn-row--inline .btn {
  white-space: nowrap;
}

@media (min-width: 640px) {
  .btn-row--inline {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {
  .btn-row--inline {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* 採用CTAの誘い文はやや間隔を空けて配置 */
.careers-invite {
  margin-top: var(--space-xl);
}

/* ----------------------------------------------------------
   セクション共通
   ---------------------------------------------------------- */
.section {
  position: relative;
  overflow: hidden;
  padding-block: var(--section-space);
}

.section > .container {
  position: relative;
}

.section--alt {
  background: var(--color-surface);
}

/* セクション背景の巨大英字ラベル(装飾・aria-hidden) */
.section__watermark {
  position: absolute;
  top: 0.5rem;
  right: -0.05em;
  font-size: clamp(4.5rem, 11vw, 8.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
  color: rgba(11, 21, 32, 0.04);
  pointer-events: none;
  user-select: none;
}

.section--cta .section__watermark {
  color: rgba(255, 255, 255, 0.05);
}

.section__title {
  margin-bottom: var(--space-lg);
  font-size: var(--font-size-h2);
}

.section__lead {
  max-width: 42em;
  margin-bottom: var(--space-xl);
  font-size: var(--font-size-lead);
  color: var(--color-text-muted);
}

/* リード文を続けて置く際、間に約1行ぶんの余白をとる */
.section__lead--spaced {
  margin-bottom: calc(var(--space-2xl) / 2);
}

.section__subtitle {
  margin: var(--space-2xl) 0 var(--space-md);
  font-size: clamp(1.375rem, 1.2rem + 0.55vw, 1.625rem);
}

/* セクション直下のクラスなし段落(補足文) */
.section .container > p:not([class]) {
  max-width: 42em;
  margin-top: var(--space-lg);
}

/* 企業理念のビジョン文 */
.philosophy-vision {
  max-width: 30em;
  font-size: clamp(1.25rem, 1rem + 1.5vw, 1.75rem);
  font-weight: 700;
  line-height: 1.5;
}

/* 汎用の箇条書き */
.bullet-list {
  max-width: 42em;
  margin: 0;
  padding-left: 1.3em;
}

.bullet-list li {
  margin-bottom: 0.35em;
}

.bullet-list li::marker {
  color: var(--color-primary);
}

/* ----------------------------------------------------------
   カード
   ---------------------------------------------------------- */
.card-grid {
  display: grid;
  gap: var(--space-lg);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 640px) {
  .card-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }

  /* 4枚構成のグリッドは2×2で揃える(3+1の孤立を防ぐ) */
  .card-grid--pairs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 5枚など端数の出る構成は flex で最終行を中央寄せに(3+2 中央 / 2+2+1)。
   grow 上限(max-width)で最終行のカードが伸び切らないようにする。
   base の display:grid を上書きするため media ブロックより後に置く */
.card-grid--center {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.card-grid--center > .card {
  flex: 1 1 300px;
  max-width: 360px;
}

.card {
  position: relative;
  overflow: hidden;
  padding: var(--space-xl) var(--space-lg);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card-soft);
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast),
    border-color var(--transition-fast);
}

/* hover 時に上辺へ伸びるアクセントライン(細めで繊細に) */
.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-fast);
}

.card:hover {
  transform: translateY(-4px);
  border-color: var(--color-primary-outline);
  box-shadow: var(--shadow-card);
}

.card:hover::before {
  transform: scaleX(1);
}

.card:hover .card__index {
  color: var(--color-primary-strong);
}

/* サービスカードのアイコン(装飾・インラインSVG) */
.card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: var(--space-md);
  border-radius: var(--radius-md);
  background: var(--color-primary-soft);
  color: var(--color-primary);
}

.card__icon svg {
  width: 1.5rem;
  height: 1.5rem;
  display: block;
}

/* 連番は右上コーナーに小さく淡く置く(装飾・aria-hidden) */
.card__index {
  position: absolute;
  top: var(--space-xl);
  right: var(--space-lg);
  font-size: var(--font-size-sm);
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--color-text-muted);
}

/* サービスカードの技術タグ(チップ) */
.card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin: var(--space-md) 0 0;
  padding: 0;
  list-style: none;
}

.tag {
  padding: 0.3em 0.75em;
  font-size: var(--font-size-sm);
  line-height: 1.4;
  color: var(--color-primary-strong);
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
}

.card__title {
  margin-bottom: var(--space-sm);
  font-size: var(--font-size-h3);
}

.card__text {
  font-size: var(--font-size-base);
  color: var(--color-text-muted);
}

/* ----------------------------------------------------------
   会社概要(dl)
   ---------------------------------------------------------- */
/* About のフィーチャー文(企業理念のビジョンを引用して縦のリズムを作る) */
.about-statement {
  max-width: 20em;
  margin-top: var(--space-xl);
  font-size: clamp(1.375rem, 1.05rem + 1.3vw, 2rem);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.01em;
}

/* 会社概要はパネル化して「設計された表」に見せる */
.about-summary {
  max-width: 720px;
  margin-top: var(--space-xl);
  padding: var(--space-xs) var(--space-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.about-summary > div {
  display: grid;
  grid-template-columns: 7em 1fr;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--color-border);
}

.about-summary > div:last-child {
  border-bottom: 0;
}

.about-summary dt {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-primary);
}

.about-summary dd {
  margin: 0;
}

/* アクセス(地図)埋め込み */
.access-map {
  margin-top: var(--space-lg);
}

.access-map iframe {
  width: 100%;
  height: 360px;
  border: 0;
  border-radius: var(--radius-lg);
}

/* ----------------------------------------------------------
   Contact CTA
   ---------------------------------------------------------- */
.section--cta {
  background: linear-gradient(
    180deg,
    var(--color-dark) 0%,
    var(--color-dark-mid) 55%,
    var(--color-dark-deep) 100%
  );
  color: var(--color-on-dark);
  text-align: center;
}

/* ヒーローと対になる光彩(ブックエンド構成) */
.section--cta::before {
  content: "";
  position: absolute;
  top: -220px;
  right: -140px;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  background: var(--color-glow-soft);
  filter: blur(100px);
}

.section--cta .section__title {
  color: #ffffff;
}

.section--cta .section__lead {
  margin-inline: auto;
  color: rgba(242, 246, 251, 0.75);
}

.contact-note {
  margin-top: var(--space-md);
  font-size: var(--font-size-sm);
  color: rgba(242, 246, 251, 0.6);
}

/* CTAバンド上の電話リンク(暗背景で読めるよう白+下線に上書き) */
.section--cta .contact-note a {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  white-space: nowrap;
}

/* ----------------------------------------------------------
   下層ページ(記事系レイアウト)
   NOTE: WordPress の body_class() は固定ページで <body> に `page` クラスを付与する。
   レイアウト用クラスを `.page` にすると body 自身にも padding が当たり、
   ヘッダーの上下とフッターの下に白帯が出るため、独自クラスは `.page-body` を使う。
   ---------------------------------------------------------- */

/* 下層ページの見出し帯。白いヘッダーとの境界を作り、トップの hero と役割を対応させる */
.page-hero {
  padding-block: calc(var(--section-space) * 0.6);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.page-hero .page-title {
  margin-bottom: 0;
}

.page-hero .section__lead {
  margin-top: var(--space-md);
  margin-bottom: 0;
}

.page-body {
  padding-block: calc(var(--section-space) * 0.75) var(--section-space);
}

/* 見出し帯がある場合、本文側の上余白は控えめにする */
.page-hero + .page-body {
  padding-top: var(--space-2xl);
}

/* 本文先頭の要素マージンを padding に重ねない */
.page-body > .container > :first-child {
  margin-top: 0;
}

.page-title {
  margin-bottom: var(--space-lg);
  font-size: var(--font-size-h2);
}

.notice {
  margin-block: var(--space-lg) var(--space-xl);
  padding: var(--space-md) var(--space-lg);
  font-size: var(--font-size-sm);
  color: var(--color-notice-text);
  background: var(--color-notice-bg);
  border: 1px solid var(--color-notice-border);
  border-radius: var(--radius-md);
}

.prose h2 {
  margin: var(--space-2xl) 0 var(--space-md);
  font-size: clamp(1.375rem, 1.2rem + 0.55vw, 1.625rem);
}

.prose p {
  margin-bottom: var(--space-md);
}

.prose ul {
  margin: 0 0 var(--space-md);
  padding-left: 1.4em;
}

.page-meta {
  margin-top: var(--space-2xl);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* 下層ページ末尾の戻るリンクに呼吸を持たせる(規程ページ・会社概要とも同じ位置) */
.page-body > .container > p:last-child {
  margin-top: var(--space-xl);
}

/* ----------------------------------------------------------
   フッター
   ---------------------------------------------------------- */
.site-footer {
  padding: var(--space-xl) 0 var(--space-lg);
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
}

/* 2段構成・中央揃え(1段目: ロゴ+社名+リンク / 2段目: コピーライト) */
.site-footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  text-align: center;
}

/* 1段目: ロゴ・社名・リンクを1行に(狭い画面では中央で折り返す) */
.site-footer__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs) var(--space-md);
}

.site-footer__logo {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.site-footer__logo img {
  width: 1.5rem;
  height: 1.5rem;
}

.site-footer nav ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--font-size-sm);
}

.site-footer nav a {
  display: inline-block;
  padding: 0.5em 0.4em;
}

.site-footer a:hover {
  color: var(--color-primary);
}

.site-footer__copy {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* ----------------------------------------------------------
   スクロールリビール(motion.js / ADR-0002)
   - 初期非表示は html.motion-ready 配下限定。JS無効・reduced-motion・
     ?motion=0 のときは motion-ready が付かないため、全要素が常に表示される
   ---------------------------------------------------------- */
html.motion-ready [data-reveal] {
  opacity: 0;
  translate: 0 22px;
  transition:
    opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0ms),
    translate 0.65s cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0ms),
    scale 0.65s cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0ms),
    transform var(--transition-fast),
    box-shadow var(--transition-fast),
    border-color var(--transition-fast),
    background-color var(--transition-fast),
    color var(--transition-fast);
}

html.motion-ready [data-reveal].is-visible {
  opacity: 1;
  translate: 0 0;
}

/* カードはふわっと軽くスケールインさせる(scale は transform 系 hover と独立) */
html.motion-ready .card[data-reveal] {
  scale: 0.98;
}

html.motion-ready .card[data-reveal].is-visible {
  scale: 1;
}

/* セクション見出しまわりは軽い時間差で現れる */
html.motion-ready .section__title[data-reveal] {
  --reveal-delay: 90ms;
}

html.motion-ready .section__lead[data-reveal] {
  --reveal-delay: 180ms;
}

/* ----------------------------------------------------------
   モーション配慮(必須)
   ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  /* リビール対象も常に表示(JS側でも無効化しているが二重ガード) */
  [data-reveal] {
    opacity: 1 !important;
    translate: none !important;
  }
}

/* 印刷時はスクロールが発生せずリビールが発火しないため、全要素を強制表示する */
@media print {
  [data-reveal] {
    opacity: 1 !important;
    translate: none !important;
  }
}

/* ----------------------------------------------------------
   問い合わせフォーム(WordPressテーマ / PHP自前フォーム)
   Contact はダーク帯(.section--cta)を維持し、フォームは白系パネルで可読性を確保
   ---------------------------------------------------------- */
.contact-form {
  max-width: 640px;
  margin: var(--space-xl) auto 0;
  padding: var(--space-xl) var(--space-lg);
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  text-align: left;
}

.form-grid {
  display: grid;
  gap: var(--space-md);
}

@media (min-width: 640px) {
  .form-grid {
    grid-template-columns: 1fr 1fr;
  }

  .form-grid .full {
    grid-column: 1 / -1;
  }
}

.contact-form label {
  display: flex;
  flex-direction: column;
  gap: 0.4em;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text);
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: 0.7em 0.9em;
  font: inherit;
  font-weight: 400;
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}

.contact-form textarea {
  min-height: 8em;
  resize: vertical;
}

.form-actions {
  margin-top: var(--space-lg);
  text-align: center;
}

/* 送信結果の通知(?sent=1/0 をPHPで判定して表示) */
.contact-notice {
  max-width: 640px;
  margin: var(--space-lg) auto 0;
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  text-align: left;
}

.contact-notice--ok {
  color: #1f6b3b;
  background: #e7f6ec;
  border: 1px solid #b6e0c4;
}

.contact-notice--ng {
  color: #9b2c2c;
  background: #fdeaea;
  border: 1px solid #f0c0c0;
}

/* WordPress 固定ページ本文(the_content)の最低限のリズム */
.prose h2 {
  margin: var(--space-2xl) 0 var(--space-md);
  font-size: clamp(1.375rem, 1.2rem + 0.55vw, 1.625rem);
}

.prose h3 {
  margin: var(--space-xl) 0 var(--space-sm);
  font-size: var(--font-size-h3);
}

.prose ul,
.prose ol {
  margin: 0 0 var(--space-md);
  padding-left: 1.4em;
}

.prose table.info {
  width: 100%;
  margin-top: var(--space-lg);
  border-collapse: collapse;
}

.prose table.info th,
.prose table.info td {
  padding: var(--space-md) 0.25rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--color-border);
}

.prose table.info th {
  width: 8em;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-primary);
}

/* ----------------------------------------------------------
   オープニング演出(イントロ)。仕様: docs/intro-animation-draft.md / ADR-0004
   - トップページのみ。<head> のインラインスクリプトがガード判定
     (reduced-motion / ?motion=0 / セッション再訪 / JS無効時は出さない)を行い、
     通過時のみ <html> に has-intro を付与して発火する
   - マークは logo-mark.png を実測してトレースしたストロークSVG(一筆書き)
   - CODIFY の文字は logo-yoko.png のスプライト切り出し
     (係数は実測値: 文字帯 x[797..2046] y[213..445] 高さ233px を 1 とした比率)
   - タイムライン(ms): <(80-280) /(190-380) >(300-500) C(430-990)
     → ホールド → C左移動+ODIFY結合(1100-1700) → 光スイープ(1700-2020)
     → 退場=拡大しヒーロー透かしへ着地(JSが実測、約2040-2700)
   ---------------------------------------------------------- */
.intro {
  --intro-word-h: clamp(2.5rem, 7.5vw, 4.5rem); /* 文字帯の表示高さ */
  --intro-mark-size: calc(var(--intro-word-h) * 4.2); /* マーク表示幅(=リング外径) */
  --intro-c-dx: calc(var(--intro-word-h) * -2.2425); /* リングC→文字Cスロット中心への移動量 */
  --intro-c-s: 0.281; /* リングC→文字サイズへの縮小率(=1.18/4.2) */
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  place-items: center;
  background: linear-gradient(
    180deg,
    var(--color-dark-deep) 0%,
    var(--color-dark-mid) 55%,
    var(--color-dark) 100%
  );
}

html.has-intro .intro {
  display: grid;
}

/* 再生中はスクロールロック(終了時に has-intro が外れて解除) */
html.has-intro,
html.has-intro body {
  overflow: hidden;
}

/* ヒーローと同じかすかなグリッド(消えたときの継ぎ目をなくす) */
.intro::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(900px 640px at 50% 42%, rgba(0, 0, 0, 0.9), transparent 75%);
  mask-image: radial-gradient(900px 640px at 50% 42%, rgba(0, 0, 0, 0.9), transparent 75%);
}

/* マークと文字列を同一セルに重ねて中央配置(中心を一致させる) */
.intro__mark,
.intro__word {
  grid-area: 1 / 1;
}

.intro__mark {
  width: var(--intro-mark-size);
  height: auto;
  filter: drop-shadow(0 0 20px var(--color-glow-strong));
  animation: intro-mark-move 750ms cubic-bezier(0.6, 0.05, 0.25, 1) 950ms forwards;
}

/* 一筆書きストローク(線幅・端面は実測: グリフ=143 / Cリング=300、端面フラット)
   色はロゴPNGの実測色 rgb(5,83,146) = --color-primary(コーポレートカラー)と同一 */
.intro__path {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 143;
  stroke-linejoin: round;
  opacity: 0;
  stroke-dasharray: var(--len) 9999;
  stroke-dashoffset: calc(var(--len) + 4);
}

.intro__path--c {
  stroke-width: 300;
}

.intro__path--lt {
  animation:
    intro-draw 200ms cubic-bezier(0.3, 0.75, 0.25, 1) 80ms forwards,
    intro-vanish 250ms ease 1100ms forwards;
}

.intro__path--sl {
  animation:
    intro-draw 190ms cubic-bezier(0.3, 0.75, 0.25, 1) 190ms forwards,
    intro-vanish 250ms ease 1100ms forwards;
}

.intro__path--gt {
  animation:
    intro-draw 200ms cubic-bezier(0.3, 0.75, 0.25, 1) 300ms forwards,
    intro-vanish 250ms ease 1100ms forwards;
}

.intro__path--c {
  animation:
    intro-draw 560ms cubic-bezier(0.22, 1, 0.36, 1) 430ms forwards,
    intro-vanish 220ms ease 1480ms forwards;
}

/* /> 結合部の先端。実ロゴでは2本の線が融合しているため、
   輪郭を実測トレースした塗りパスで再現し、/ の描画に続いてフェードで現れる */
.intro__tip {
  fill: var(--color-primary);
  opacity: 0;
  animation:
    intro-fade-in 140ms ease 260ms forwards,
    intro-vanish 250ms ease 1100ms forwards;
}

/* CODIFY 文字列(スプライト)。C はリングとのクロスフェードで現れる */
.intro__word {
  position: relative;
  z-index: 1;
  display: flex;
  height: var(--intro-word-h);
}

.intro__letter {
  height: var(--intro-word-h);
  background-image: url("../images/logo/logo-yoko.png");
  background-repeat: no-repeat;
  background-size: calc(var(--intro-word-h) * 8.7854) auto;
  background-position-y: calc(var(--intro-word-h) * -0.9142);
  /* 文字はスプライト元の色のまま(=コーポレートカラー #055392。ストロークと同一色) */
  opacity: 0;
  animation: intro-letter-rise 260ms cubic-bezier(0.25, 0.8, 0.3, 1) forwards;
}

.intro__letter--c {
  width: calc(var(--intro-word-h) * 0.8798);
  background-position-x: calc(var(--intro-word-h) * -3.4206);
  animation-name: intro-fade-in; /* リングCから引き継ぐため浮き上がりなし */
  animation-delay: 1460ms;
  animation-duration: 240ms;
}

.intro__letter--o {
  width: calc(var(--intro-word-h) * 0.9313);
  margin-left: calc(var(--intro-word-h) * 0.1588);
  background-position-x: calc(var(--intro-word-h) * -4.4549);
  animation-delay: 1350ms;
}

.intro__letter--d {
  width: calc(var(--intro-word-h) * 0.8455);
  margin-left: calc(var(--intro-word-h) * 0.2017);
  background-position-x: calc(var(--intro-word-h) * -5.5837);
  animation-delay: 1420ms;
}

.intro__letter--i {
  width: calc(var(--intro-word-h) * 0.206);
  margin-left: calc(var(--intro-word-h) * 0.206);
  background-position-x: calc(var(--intro-word-h) * -6.6309);
  animation-delay: 1490ms;
}

.intro__letter--f {
  width: calc(var(--intro-word-h) * 0.6652);
  margin-left: calc(var(--intro-word-h) * 0.2489);
  background-position-x: calc(var(--intro-word-h) * -7.0815);
  animation-delay: 1560ms;
}

.intro__letter--y {
  width: calc(var(--intro-word-h) * 0.9356);
  margin-left: calc(var(--intro-word-h) * 0.1073);
  background-position-x: calc(var(--intro-word-h) * -7.8498);
  animation-delay: 1630ms;
}

/* 完成後に光のスイープを一閃 */
.intro__word::after {
  content: "";
  position: absolute;
  inset: -15% -8%;
  z-index: 1;
  background: linear-gradient(
    100deg,
    transparent 42%,
    rgba(255, 255, 255, 0.32) 50%,
    transparent 58%
  );
  transform: translateX(-130%);
  animation: intro-sweep 320ms ease-in-out 1700ms forwards;
}

/* 退場(B'): JSが透かし位置を実測して --intro-exit-* を設定。取れない場合は拡大フェード */
.intro--exit {
  opacity: 0;
  transition: opacity 460ms linear 180ms;
  pointer-events: none;
}

.intro--exit .intro__word {
  transform: translate(var(--intro-exit-x, 0), var(--intro-exit-y, 0)) scale(var(--intro-exit-s, 7));
  opacity: 0.05;
  transition:
    transform 640ms cubic-bezier(0.6, 0.05, 0.25, 1),
    opacity 640ms linear;
}

.intro--exit .intro__word::after {
  display: none;
}

/* スキップ(クリック / Esc) */
.intro--skip {
  opacity: 0 !important;
  transition: opacity 200ms linear !important;
  pointer-events: none;
}

/* イントロ再生中はヒーローの登場演出を一時停止し、終了後(has-intro除去)に再生する */
html.has-intro .hero__line-inner,
html.has-intro .hero__eyebrow,
html.has-intro .hero__lead,
html.has-intro .hero__signature,
html.has-intro .hero__actions,
html.has-intro .hero__scroll-cue {
  animation-play-state: paused;
}

/* CSS側の二重ガード(JSガードと同条件) */
@media (prefers-reduced-motion: reduce) {
  .intro {
    display: none !important;
  }
}

@keyframes intro-draw {
  from {
    opacity: 1;
  }

  to {
    opacity: 1;
    stroke-dashoffset: 0;
  }
}

@keyframes intro-vanish {
  to {
    opacity: 0;
  }
}

@keyframes intro-mark-move {
  0% {
    transform: none;
  }

  20% {
    transform: scale(1.03); /* 完成マークの呼吸 */
  }

  100% {
    transform: translate(var(--intro-c-dx), 0) scale(var(--intro-c-s));
  }
}

@keyframes intro-letter-rise {
  from {
    opacity: 0;
    transform: translateY(calc(var(--intro-word-h) * 0.35));
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes intro-fade-in {
  to {
    opacity: 1;
  }
}

@keyframes intro-sweep {
  to {
    transform: translateX(130%);
  }
}