/* ============================================================
   style.css — JCRAC運営部サイト共通スタイル

   研究機関サイトとしての落ち着きを保ちつつ、章ごとの背景濃淡
  （白 / 薄水 / ダーク帯）でリズムを作る方針。装飾は最小限に
   留め、タイポと罫線・余白で情報構造を見せる。
   ============================================================ */


/* ------------------------------------------------------------
   1. カスタムプロパティ
   ------------------------------------------------------------ */

:root {
  /* カラー
     JCRACロゴ（3層の青）を基準。primary をロゴ中間青に揃え、
     accent はロゴ最上層の明るい青に。
     役割分担＝見出しは primary-dark、リンク・ホバー等の操作系は
     primary、採番・英字ラベルは accent-strong。近い青を三役で
     混ぜないことで画面の色数を絞る。 */
  --color-bg:            #ffffff;
  --color-bg-alt:        #eef3f6;
  --color-bg-dark:       #0a2952;
  --color-bg-deep:       #061d3d;
  --color-text:          #14213a;
  --color-text-muted:    #5a6678;
  --color-primary:       #0b73d6;
  --color-primary-dark:  #0a2952;
  --color-primary-hover: #095fb0;
  --color-accent:        #2bc1ec;
  --color-accent-strong: #0c8197;
  --color-border:        #e4ebf2;
  --color-on-primary:    #ffffff;
  --color-dacapo:        #c8102e;
  --color-dacapo-hover:  #a00d24;

  /* フォント
     パンフレットに倣い、英字大見出しはセリフ体（Cormorant Garamond）、
     英字メタ情報・数値はサンセリフ（Inter）の使い分け。 */
  --font-base:        "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans", "Yu Gothic UI", sans-serif;
  --font-en:          "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-en-display:  "Cormorant Garamond", "Times New Roman", serif;

  /* タイプスケール
     本文系の文字サイズはこの6段に限定する。新しいサイズを足したく
     なったら、まず既存の段に寄せられないか検討すること。
     大見出し（hero-title・section-title・eyebrow 等）は clamp() で
     画面幅に追従させるため個別指定。 */
  --fs-xs:  0.8rem;   /* 採番・パンくず・補足ラベルなどの最小メタ */
  --fs-sm:  0.9rem;   /* ナビ・日付・役職・フッタ */
  --fs-md:  0.95rem;  /* カード本文・補足文・ボタン */
  --fs-lg:  1.1rem;   /* カード見出し・本文中の小見出し */
  --fs-xl:  1.2rem;   /* 氏名・グループ見出し */
  --fs-2xl: 1.5rem;   /* 沿革の年号など数字の見せ場 */

  /* 行間。本文系はこの3段に限定する（見出しは塊で見せるため個別指定）。 */
  --lh-body:    1.8;  /* 標準の本文・リスト */
  --lh-relaxed: 1.9;  /* リード文・ゆったり読ませる本文 */
  --lh-loose:   2;    /* ごあいさつ・方針文書などの読み物 */

  /* レイアウト */
  --container-max:    1200px;
  --container-narrow: 880px;

  /* 余白 */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 6rem;

  /* その他
     罫線と直角で構成するデザインのため角丸は使わない（0で統一）。
     丸めたくなったらここを変えれば全ボタンに効く。 */
  --radius: 0;
  --transition: 200ms ease;
}


/* ------------------------------------------------------------
   2. 全体のベース
   ------------------------------------------------------------ */

body {
  font-family: var(--font-base);
  font-size: 16px;
  line-height: var(--lh-body);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

/* キーボード操作時のフォーカスリング。reset で下線を消しているぶん、
   サイト色で明示する。ダーク帯の上では明るい水色に切り替える。 */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.contact-cta :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--color-accent);
}

/* 和文の大見出しは「palt」で約物・かなを詰め、行間も本文より絞って
   塊として見せる。改行バランスは text-wrap: balance（対応ブラウザのみ）。 */
.hero-title,
.section-title,
.contact-cta h2 {
  font-feature-settings: "palt";
  text-wrap: balance;
}


/* ------------------------------------------------------------
   3. スキップリンク
   ------------------------------------------------------------ */

.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  background: var(--color-primary);
  color: var(--color-on-primary);
  padding: var(--space-xs) var(--space-sm);
  z-index: 1000;
}

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


/* ------------------------------------------------------------
   4. ヘッダ・グローバルナビ
   ------------------------------------------------------------ */

.site-header {
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
}

.site-header .header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-sm) 0;
}

.site-logo {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
}

.site-logo .logo-jihs {
  display: block;
  height: 40px;
  width: auto;
}

.site-logo .logo-divider {
  display: block;
  width: 1px;
  height: 36px;
  background: var(--color-border);
}

.site-logo .logo-jcrac {
  display: block;
  height: 32px;
  width: auto;
}

.global-nav {
  border-top: 1px solid var(--color-border);
  padding: 0.75rem 0;
}

.global-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem;
}

.global-nav a {
  position: relative;
  display: inline-block;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--color-text);
  padding: 0.3rem 0;
  transition: color var(--transition);
}

.global-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--color-primary);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--transition);
}

.global-nav a:hover,
.global-nav a:focus-visible {
  color: var(--color-primary);
}

.global-nav a:hover::after,
.global-nav a:focus-visible::after {
  transform: scaleX(1);
}

/* 現在表示中のページ。既存の下線とプライマリ色を流用して印を付ける。 */
.global-nav a[aria-current="page"] {
  color: var(--color-primary);
}

.global-nav a[aria-current="page"]::after {
  transform: scaleX(1);
}

.lang-switch {
  /* ロゴとの間の余白をすべて吸収し、後続のメニューボタンともども右端へ寄せる。 */
  margin-left: auto;
  font-family: var(--font-en);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--color-border);
  transition: color var(--transition), border-color var(--transition);
}

.lang-switch:hover,
.lang-switch:focus-visible {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

/* モバイル用メニュー開閉ボタン。assets/js/nav.js が hidden 属性を外した
   ときだけモバイル幅で表示される（「モバイル対応」の章を参照）。
   JS無効環境では現れず、ナビは常時表示にフォールバックする。 */
.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--color-text);
  padding: 0.25rem 0.7rem;
  border: 1px solid var(--color-border);
  transition: color var(--transition), border-color var(--transition);
}

.nav-toggle:hover,
.nav-toggle:focus-visible {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

/* 三本線アイコン。中央の1本を実体にし、上下の2本は box-shadow で描く。 */
.nav-toggle-bars {
  display: block;
  width: 16px;
  height: 2px;
  background: currentColor;
  box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor;
}


/* ------------------------------------------------------------
   5. ヒーロー
   パンフレットの水滴／気泡モチーフを背景SVGで再現。
   タイポはパンフ調にセリフ体英字を併用。
   ------------------------------------------------------------ */

.hero {
  position: relative;
  padding: 7rem 0 6rem;
  background: linear-gradient(180deg, #ffffff 0%, #f5fbff 100%);
  border-bottom: 1px solid var(--color-border);
  overflow: hidden;
}

/* 背景画像スロット。写真を敷くときは url() を差し替える。
   文字の乗る左側を濃く、右へ抜ける直線グラデの白スクリムを一枚重ねて
   可読性を確保する。濃さは各停止点の不透明度（0.92 / 0.72 / 0.28）で調整。
   別の写真にするときは url('../img/hero.jpg') を変えるだけ。 */
.hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(90deg,
      rgba(255, 255, 255, 0.92) 0%,
      rgba(255, 255, 255, 0.72) 48%,
      rgba(255, 255, 255, 0.28) 100%),
    url('../img/hero.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 背景画像の上へ JCRAC ロゴを大きく薄く重ねるウォーターマーク。
   画像より手前・見出し本文より奥の層に入る。
   濃さは opacity、大きさ・位置は width / right / top で調整。 */
.hero::after {
  content: "";
  position: absolute;
  top: 74%;
  right: -3rem;
  transform: translateY(-50%);
  width: clamp(680px, 96vw, 1560px);
  aspect-ratio: 2742 / 696;
  background: url('../img/jcrac-logo.png') no-repeat right center;
  background-size: contain;
  opacity: 0.16;
  pointer-events: none;
  user-select: none;
}

.hero .container {
  position: relative;
  z-index: 1;
}

.hero-inner {
  position: relative;
  max-width: 760px;
}

.hero-eyebrow {
  font-family: var(--font-en-display);
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--color-accent-strong);
  margin-bottom: 1.25rem;
}

.hero-title {
  font-size: clamp(2rem, 4vw, 2.9rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.01em;
  color: var(--color-primary-dark);
  margin-bottom: 1.75rem;
  /* 語の途中（「デー｜タ」など）で折り返さない。改行してよい位置は
     HTML側の <wbr> で示す。どうしても1語が収まらない極小幅でのみ
     overflow-wrap が緊急の折り返しを許す。 */
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* ヒーローのルビ（「ジェイクラック」）は控えめに小さく */
.hero-title rt {
  font-size: 0.4em;
}

.hero-lead {
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  /* 背景写真の上に載るため、muted では薄くて読みにくい。本文色を使う。 */
  color: var(--color-text);
  max-width: 58ch;
}


/* ------------------------------------------------------------
   5b. ごあいさつ（部長挨拶）
   左にラベル＋肩書、右に本文の2カラム。
   罫線で2カラムを区切り、公的文書らしい落ち着きを出す。
   ------------------------------------------------------------ */

.greeting {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.greeting-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 3rem;
  align-items: start;
  padding-top: 2.5rem;
  border-top: 1px solid var(--color-border);
}

.greeting-meta .section-eyebrow {
  margin-bottom: 0.85rem;
}

.greeting-meta .section-title {
  margin-bottom: 1.75rem;
}

.greeting-portrait {
  margin: 0;
}

.greeting-portrait img {
  display: block;
  width: 180px;
  height: 180px;
  object-fit: cover;
  border-radius: 50%;
  background: var(--color-bg-alt);
  margin-bottom: 1rem;
}

.greeting-portrait figcaption {
  /* リセット用。中の p に既存スタイルを当てる */
}

.greeting-role {
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  margin-bottom: 0.25rem;
}

.greeting-name {
  color: var(--color-primary-dark);
  font-size: var(--fs-xl);
  font-weight: 700;
  line-height: 1.4;
}

.greeting-name small {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--color-text-muted);
  margin-top: 0.2rem;
}

.greeting-body p {
  font-size: 1rem;
  line-height: var(--lh-loose);
  color: var(--color-text);
}

.greeting-body p + p {
  margin-top: 1.25rem;
}


/* ------------------------------------------------------------
   6. セクション共通
   ------------------------------------------------------------ */

.section {
  padding: 6rem 0;
}

/* 薄水背景の章。白の章が続いて間延びするときに挟み、
   白／薄水／ダーク帯のリズムを保つ。罫線は薄水の上だと白背景用の
   色では沈むため、章の中だけ一段濃くする。 */
.section-alt {
  background: var(--color-bg-alt);
  --color-border: #d4dfe9;
}

.section-header {
  margin-bottom: 3rem;
  max-width: 920px;
}

.section-eyebrow {
  font-family: var(--font-en-display);
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--color-accent-strong);
  margin-bottom: 0.35rem;
  line-height: 1.2;
}

.section-title {
  font-size: clamp(1.6rem, 2.7vw, 2.1rem);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: var(--color-primary-dark);
  margin-bottom: 1rem;
}

.section-lead {
  color: var(--color-text-muted);
  max-width: 60ch;
  line-height: var(--lh-relaxed);
}

.section-more {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: var(--space-md);
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--color-primary);
  padding-bottom: 2px;
  border-bottom: 1px solid currentColor;
  transition: color var(--transition);
}

.section-more:hover,
.section-more:focus-visible {
  color: var(--color-primary-dark);
}

/* 矢印の所作。リンク内の「→」は <span class="arrow" aria-hidden="true">
   に分離してあり、ホバーで右へすっと滑る。字形ブレを防ぐため英字
   フォントで描く。 */
.arrow {
  font-family: var(--font-en);
  transition: transform var(--transition);
}

a:hover .arrow,
a:focus-visible .arrow {
  transform: translateX(4px);
}


/* ------------------------------------------------------------
   7. 業務カード（4本柱）
   小さな英字番号、共有罫線。装飾は最小限に。
   ------------------------------------------------------------ */

.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0;
  border-top: 1px solid var(--color-border);
  border-left: 1px solid var(--color-border);
}

.service-card {
  position: relative;
  padding: 2.25rem 2rem 2.5rem;
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
  transition: background-color var(--transition);
}

/* ホバーで上端に細い一本線がすっと伸びる。控えめな所作にとどめる。 */
.service-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-primary);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--transition);
}

.service-card:hover {
  background: #f8fbfe;
}

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

.service-card .number {
  font-family: var(--font-en);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.15em;
  color: var(--color-accent-strong);
  margin-bottom: 1rem;
}

.service-card h3 {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--color-primary-dark);
  margin-bottom: 0.6rem;
  line-height: 1.6;
}

.service-card p {
  font-size: var(--fs-md);
  color: var(--color-text-muted);
  line-height: var(--lh-body);
}


/* ------------------------------------------------------------
   8. Da Capo 訴求セクション
   薄水背景に2カラム。ロゴはそのまま表示、装飾はなし。
   ------------------------------------------------------------ */

.dacapo {
  position: relative;
  background: var(--color-bg-alt);
  padding: 6rem 0;
  overflow: hidden;
}

/* 背景スロット。Da Capo のデモ画面をティールのダブルトーンで見せる。
   文字カラムが右側にあるため、右を濃く左へ抜ける直線グラデの
   スクリムで可読性を確保する。文字側は32%地点まで濃く保ち、そこから
   急峻に落として左端は完全に抜く（左1/3はほぼ素の画像）。
   濃さは各停止点の不透明度（0.94 / 0.88 / 0.4 / 0）で調整。 */
.dacapo-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(270deg,
      rgba(238, 243, 246, 0.94) 0%,
      rgba(238, 243, 246, 0.88) 32%,
      rgba(238, 243, 246, 0.4) 62%,
      rgba(238, 243, 246, 0) 100%),
    linear-gradient(#2bb5d4, #2bb5d4),
    url('../img/dacapo.jpg');
  /* 中段のティールを blend-mode color で画像に重ね、明暗を保ったまま
     色相だけ乗せたダブルトーンにする。上段は右が濃い薄水スクリム。
     くすんで見えるときは中段をより明るく彩度の高いティールに、
     落ち着けたいときはグレー寄りのティールにする。 */
  background-blend-mode: normal, color, normal;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.dacapo .container {
  position: relative;
  z-index: 1;
}

.dacapo-layout {
  display: grid;
  grid-template-columns: minmax(250px, 320px) 1fr;
  gap: 4rem;
  align-items: start;
}

.dacapo-logo-img {
  display: block;
  width: 100%;
  max-width: 300px;
  height: auto;
}

.dacapo-note {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
}

.dacapo-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.5rem;
  padding: 0.9rem 1.75rem;
  background: var(--color-dacapo);
  color: #ffffff;
  font-size: var(--fs-md);
  font-weight: 500;
  border-radius: var(--radius);
  transition: background-color var(--transition);
}

.dacapo-cta:hover,
.dacapo-cta:focus-visible {
  background: var(--color-dacapo-hover);
}


/* ------------------------------------------------------------
   9. 認証バッジ（ISO）
   ------------------------------------------------------------ */

.certs-layout {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 2fr;
  gap: 4rem;
  align-items: start;
}

.iso-badge {
  display: block;
  width: 100%;
  max-width: 320px;
  height: auto;
}

.certs-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--color-border);
}

.cert-item {
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--color-border);
}

.cert-id {
  display: inline-block;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: var(--fs-lg);
  color: var(--color-primary-dark);
  margin-right: 0.75rem;
  vertical-align: baseline;
}

.cert-year {
  display: inline-block;
  font-family: var(--font-en);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  vertical-align: baseline;
}

.cert-item p:last-child {
  margin-top: 0.5rem;
  color: var(--color-text-muted);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
}


/* ------------------------------------------------------------
   10. ニュース一覧
   ------------------------------------------------------------ */

.news-list {
  border-top: 1px solid var(--color-border);
}

.news-item {
  display: grid;
  grid-template-columns: 8rem 1fr;
  gap: 2rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--color-border);
  align-items: baseline;
}

.news-item time {
  font-family: var(--font-en);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
}

.news-item h3 {
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-text);
  transition: color var(--transition);
}

.news-item a:hover h3,
.news-item a:focus-visible h3 {
  color: var(--color-primary);
}


/* ------------------------------------------------------------
   11. 沿革
   年号を控えめに大きく、罫線で区切る2カラム。
   ------------------------------------------------------------ */

.timeline {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--color-border);
}

.timeline-item {
  display: grid;
  grid-template-columns: 8rem 1fr;
  gap: 2.5rem;
  align-items: baseline;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--color-border);
}

.timeline-year {
  font-family: var(--font-en);
  font-size: var(--fs-2xl);
  font-weight: 700;
  color: var(--color-accent-strong);
  line-height: 1.2;
}

.timeline-desc {
  color: var(--color-text);
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
}


/* ------------------------------------------------------------
   12. 組織構成
   組織図風の装飾はやめ、見出し＋2室紹介の素直なレイアウト。
   ------------------------------------------------------------ */

.org {
  background: var(--color-bg-alt);
  --color-border: #d4dfe9; /* .section-alt と同じ理由（薄水上で罫線が沈むのを防ぐ） */
}

.org-tree {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.org-head {
  padding: 0 0 1.5rem;
  border-bottom: 1px solid var(--color-border);
}

.org-head .org-name {
  color: var(--color-primary-dark);
  font-size: var(--fs-xl);
  font-weight: 700;
  margin-bottom: 0.35rem;
}

.org-head .org-desc {
  color: var(--color-text-muted);
  font-size: var(--fs-md);
}

.org-rooms {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

.org-room {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  padding: 1.75rem;
}

.org-room .org-name {
  font-weight: 700;
  color: var(--color-primary-dark);
  font-size: var(--fs-lg);
  margin-bottom: 0.5rem;
}

.org-room .org-desc {
  color: var(--color-text-muted);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
}


/* ------------------------------------------------------------
   13. お問合せ CTA（ダーク帯）
   ページ終盤の山場としてダーク帯を維持。装飾は控えめに。
   ------------------------------------------------------------ */

.contact-cta {
  position: relative;
  background: var(--color-primary-dark);
  color: #ffffff;
  overflow: hidden;
}

/* 右上にロゴ最上層の水色をごく薄く滲ませ、平板な紺面に奥行きを出す。 */
.contact-cta::after {
  content: "";
  position: absolute;
  top: -40%;
  right: -10%;
  width: 45%;
  height: 180%;
  background: radial-gradient(closest-side, rgba(43, 193, 236, 0.16), transparent);
  pointer-events: none;
}

.contact-cta .inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* 左右は .container の余白を引き継ぐ。0 にすると container の
     ガターを潰してモバイルで端に張り付くので上下のみ指定する。 */
  padding-block: 4.5rem;
  gap: 2rem;
  flex-wrap: wrap;
}

.contact-cta h2 {
  font-size: clamp(1.4rem, 2.2vw, 1.75rem);
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 0.5rem;
}

.contact-cta p {
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--fs-md);
}

.button {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1.75rem;
  background: #ffffff;
  color: var(--color-primary-dark);
  font-size: var(--fs-md);
  font-weight: 600;
  border-radius: var(--radius);
  transition: background-color var(--transition), color var(--transition);
}

.button:hover,
.button:focus-visible {
  background: var(--color-accent);
  color: var(--color-primary-dark);
}


/* ------------------------------------------------------------
   14. フッタ
   ------------------------------------------------------------ */

.site-footer {
  background: var(--color-bg-deep);
  color: rgba(255, 255, 255, 0.78);
  padding: 4rem 0 2rem;
  font-size: var(--fs-sm);
}

.site-footer a {
  color: rgba(255, 255, 255, 0.78);
  transition: color var(--transition);
}

.site-footer a:hover,
.site-footer a:focus-visible {
  color: var(--color-on-primary);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--space-lg);
  margin-bottom: var(--space-md);
}

.site-footer h3 {
  color: var(--color-on-primary);
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.85rem;
}

.site-footer ul li {
  margin-bottom: 0.35rem;
}

.footer-contact {
  margin-top: 0.85rem;
  display: grid;
  grid-template-columns: 3rem 1fr;
  row-gap: 0.25rem;
  column-gap: 0.75rem;
  font-size: var(--fs-sm);
}

.footer-contact dt {
  font-family: var(--font-en);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.05em;
}

.footer-contact dd {
  color: rgba(255, 255, 255, 0.85);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  padding-top: var(--space-md);
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.55);
}


/* ------------------------------------------------------------
   16. サブページ共通部品
   トップ以外の下層ページで共有する最小限の部品群。ページ固有の
   一回限りスタイルは増やさず、ここの部品を組み合わせて各ページを
   組み立てる方針。見出しタイポは .section-eyebrow / .section-title
   をそのまま流用する。
   ------------------------------------------------------------ */

/* 下層ページの見出し帯。トップのヒーローを小ぶりにした版。
   英字 eyebrow をセリフ大組みで主役にし、装飾を足さずに
   タイポだけで個性を出す。大きさは clamp で調整。 */
.page-hero {
  position: relative;
  padding: 4.5rem 0 3.25rem;
  background: linear-gradient(180deg, #ffffff 0%, #f5fbff 100%);
  border-bottom: 1px solid var(--color-border);
}

.page-hero .section-eyebrow {
  font-size: clamp(2.2rem, 4.5vw, 3.2rem);
  line-height: 1.15;
  margin-bottom: 0.5rem;
}

.page-hero .section-title {
  margin-bottom: 0.85rem;
}

/* 記事ページの日付。見出しの上に英字サンセリフで控えめに。 */
.article-date {
  font-family: var(--font-en);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  margin-bottom: 0.75rem;
}

.page-lead {
  color: var(--color-text-muted);
  max-width: 64ch;
  line-height: var(--lh-relaxed);
}

/* パンくず */
.breadcrumb {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  margin-bottom: 1.1rem;
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.breadcrumb li::after {
  content: "／";
  margin-left: 0.5rem;
  color: var(--color-border);
}

.breadcrumb li:last-child::after {
  content: none;
}

.breadcrumb a {
  color: var(--color-text-muted);
  transition: color var(--transition);
}

.breadcrumb a:hover,
.breadcrumb a:focus-visible {
  color: var(--color-primary);
}

.breadcrumb li[aria-current="page"] {
  color: var(--color-text);
}

/* 読み物幅。方針文書・お問合せ等の本文を狭めて読みやすく。 */
.container.narrow {
  max-width: var(--container-narrow);
}

/* 汎用本文（前文・補足）。 */
.prose p {
  line-height: var(--lh-loose);
  color: var(--color-text);
}

.prose p + p {
  margin-top: 1.25rem;
}

.prose h3 {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--color-primary-dark);
  margin: 2.5rem 0 0.85rem;
}

/* 方針文書（情報セキュリティ・品質）。番号付きの条項を罫線で区切る。
   番号は CSS カウンタで自動採番するので、条項を増減しても通し番号は
   崩れない。<li class="policy-item"> を足し引きするだけでよい。 */
.policy-list {
  border-top: 1px solid var(--color-border);
  margin-top: 2.5rem;
  counter-reset: policy;
}

.policy-item {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: 1.5rem;
  align-items: baseline;
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--color-border);
}

.policy-item::before {
  counter-increment: policy;
  content: counter(policy, decimal-leading-zero);
  font-family: var(--font-en);
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--color-accent-strong);
}

.policy-item h3 {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--color-primary-dark);
  margin-bottom: 0.5rem;
}

.policy-item p {
  color: var(--color-text-muted);
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
}

/* 文書の発行情報・署名 */
.doc-sign {
  margin-top: 2.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--color-border);
  text-align: right;
  color: var(--color-text-muted);
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
}

.doc-sign .doc-name {
  color: var(--color-primary-dark);
  font-weight: 700;
  font-size: var(--fs-lg);
  margin-top: 0.35rem;
}

/* 業務内容など、番号付きの詳細ブロックを縦に積むレイアウト */
.detail-list {
  border-top: 1px solid var(--color-border);
}

.detail-item {
  display: grid;
  grid-template-columns: 4rem 1fr;
  gap: 2rem;
  padding: 2.25rem 0;
  border-bottom: 1px solid var(--color-border);
}

.detail-item .number {
  font-family: var(--font-en);
  font-size: var(--fs-xs); /* service-card の採番と同役・同サイズ */
  font-weight: 600;
  letter-spacing: 0.15em;
  color: var(--color-accent-strong);
  padding-top: 0.3rem;
}

.detail-item h3 {
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--color-primary-dark);
  margin-bottom: 0.6rem;
}

.detail-item p {
  color: var(--color-text-muted);
  line-height: var(--lh-relaxed);
}

.detail-item p + p {
  margin-top: 0.85rem;
}

/* スタッフ一覧。室ごとにグループ化し、名前＋肩書を罫線グリッドで並べる。
   <article class="roster-member"> を増減すればグリッドが自動調整される。 */
.roster-group + .roster-group {
  margin-top: 3.5rem;
}

.roster-group-head {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.roster-group-title {
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--color-primary-dark);
}

.roster-group-note {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

.roster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  border-top: 1px solid var(--color-border);
  border-left: 1px solid var(--color-border);
}

.roster-member {
  padding: 1.25rem 1.5rem;
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.roster-role {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  margin-bottom: 0.25rem;
}

.roster-name {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--color-primary-dark);
}

/* 雇用身分（役職名の括弧書き）。氏名の下に控えめに添える。 */
.roster-status {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  margin-top: 0.35rem;
}

/* 部室長のプロフィール。左に氏名・役職、右に経歴の定義リストと
   「主な活動内容」の本文を置く2カラム。経歴を持たない人は
   .profile-body を省けば氏名・役職だけのカードになる。 */
.profile-list {
  border-top: 1px solid var(--color-border);
}

.profile {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 3rem;
  padding: 2.75rem 0;
  border-bottom: 1px solid var(--color-border);
}

/* 顔写真。トップのポートレートと同じ円形。写真の無い人は
   img を置かなければ氏名・役職だけの表示になる。 */
.profile-photo {
  display: block;
  width: 140px;
  height: 140px;
  object-fit: cover;
  border-radius: 50%;
  background: var(--color-bg-alt);
  margin-bottom: 1.25rem;
}

.profile-name {
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--color-primary-dark);
  margin-bottom: 0.3rem;
}

.profile-role {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

.profile-dl {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: 0.65rem 1.25rem;
  font-size: var(--fs-sm);
}

.profile-dl dt {
  font-weight: 700;
  color: var(--color-primary-dark);
}

.profile-dl dd {
  color: var(--color-text-muted);
  line-height: var(--lh-body);
}

.profile-activity {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
}

.profile-activity h4 {
  font-family: var(--font-en);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent-strong);
  margin-bottom: 0.6rem;
}

.profile-activity p {
  color: var(--color-text-muted);
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
}

/* リンク集。カテゴリごとに外部リンクを罫線リストで並べる。 */
.link-collection {
  display: grid;
  gap: 3.5rem;
}

.link-group-title {
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--color-primary-dark);
  margin-bottom: 0.35rem;
}

.link-group-note {
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  margin-bottom: 1.25rem;
}

.link-list {
  border-top: 1px solid var(--color-border);
}

.link-list li {
  border-bottom: 1px solid var(--color-border);
}

.link-list a {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.25rem 1.5rem;
  align-items: baseline;
  padding: 1.1rem 0.25rem;
  transition: background-color var(--transition), color var(--transition);
}

.link-list a:hover,
.link-list a:focus-visible {
  background: #f8fbfe;
  color: var(--color-primary);
}

.link-name {
  font-weight: 500;
}

.link-desc {
  grid-column: 1 / 2;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

.link-arrow {
  grid-column: 2;
  grid-row: 1;
  font-family: var(--font-en);
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

/* お問合せの情報リスト */
.contact-info {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: 0.85rem 1.5rem;
  margin-top: 2.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--color-border);
}

.contact-info dt {
  font-family: var(--font-en);
  font-weight: 600;
  font-size: var(--fs-sm);
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  padding-top: 0.15rem;
}

.contact-info dd {
  color: var(--color-text);
  line-height: var(--lh-body);
}

.contact-info dd a:hover {
  color: var(--color-primary);
}

/* 沿革・組織などをまとめた下層ページで、章の間に余白を足すための仕切り。
   .section を続けて使うと余白が二重になるため、薄罫の見出しだけ流用したい
   箇所に使う簡易の章見出し。 */
.subsection {
  margin-top: 4.5rem;
}

.subsection:first-child {
  margin-top: 0;
}


/* ------------------------------------------------------------
   15. モバイル対応
   ------------------------------------------------------------ */

@media (max-width: 768px) {
  .site-header .header-top {
    flex-wrap: wrap;
  }

  .site-logo {
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  .site-logo .logo-divider {
    display: none;
  }

  /* JSが有効なとき（nav.js が hidden を外したとき）だけボタンを表示し、
     is-collapsible が付いたナビを折りたたみ式にする。
     is-open はボタン押下で nav.js が付け外しする。 */
  .nav-toggle:not([hidden]) {
    display: inline-flex;
  }

  .global-nav.is-collapsible {
    display: none;
  }

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

  .global-nav ul {
    flex-direction: column;
    gap: 0.5rem;
  }

  .hero {
    padding: 4.5rem 0 4rem;
  }

  /* デスクトップ用の固定改行（<br>）を解除し、<wbr> の位置で自然に
     折り返させる。文字サイズも一段絞って行数を抑える。 */
  .hero-title {
    font-size: clamp(1.7rem, 4.5vw, 2rem);
  }

  .hero-title br {
    display: none;
  }

  .section,
  .dacapo {
    padding: 4.5rem 0;
  }

  .greeting-layout,
  .dacapo-layout,
  .certs-layout {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .timeline-item,
  .news-item {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .contact-cta .inner {
    flex-direction: column;
    align-items: flex-start;
    padding-block: 3.5rem;
  }

  .page-hero {
    padding: 3.5rem 0 2.5rem;
  }

  .policy-item,
  .detail-item,
  .contact-info {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .policy-item::before,
  .detail-item .number {
    padding-top: 0;
  }

  .link-list a {
    grid-template-columns: 1fr;
  }

  .link-arrow {
    display: none;
  }

  .profile {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .profile-dl {
    grid-template-columns: 1fr;
    gap: 0.25rem 0;
  }

  .profile-dl dt {
    margin-top: 0.5rem;
  }
}