/* ============================================
   越智源 採用サイト ワイヤーフレーム
   明朝体 × モノクロ設計
   ============================================ */

/* ---------- リセット & 基礎 ---------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --black:      #1F2F3A;   /* Ink Navy（design.md）：墨黒より柔らかく上品な基調文字色 */
  --gray-90:    #1a1a1a;
  --gray-70:    #4a4a4a;
  --gray-50:    #7a7a7a;
  --gray-30:    #b0b0b0;
  --gray-15:    #d8d8d8;
  --gray-05:    #f0eeea;
  --white:      #faf9f7;

  --font-serif: 'Noto Serif JP', 'Yu Mincho', '游明朝', serif;
  --font-sans:  'Noto Sans JP', sans-serif;
  --font-mincho: 'Shippori Mincho', 'Noto Serif JP', 'Yu Mincho', serif;  /* 大見出し・キャッチ用 */

  /* Blue & Green（design.md 6章 / 瀬戸内の海・島・自然） */
  --setouchi-blue: #3A8FB7;
  --deep-blue:     #1F5F7A;
  --soft-aqua:     #8FD4D8;
  --green:         #6EBB8A;
  --pale-green:    #DDF1E8;
  --light-blue:    #EAF7FA;
  --ink-navy:      #1F2F3A;

  --section-pad: 120px 0;
  --container-max: 1120px;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--white);
  color: var(--black);
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: 0.06em;
  /* clip：横はみ出しは抑えつつスクロールコンテナを作らない（sticky を壊さない） */
  overflow-x: clip;
}

img {
  max-width: 100%;
  display: block;
}

/* ---------- アクセシビリティ：キーボードフォーカスの可視化 ----------
   白リング＋濃色リングの二重にすることで、明るい背景（白・ライトグレー）でも
   暗い背景（FV・entry-footer-bandの濃色グラデーション）でも、
   どちらかのリングが必ず視認できるようにする（WCAG 2.4.7 対応）。
   マウス操作時は表示せず、キーボード操作時（:focus-visible）のみ表示。 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--deep-blue);
  border-radius: 2px;
}

/* ---------- ユーティリティ ---------- */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 48px;
}

/* ---------- ヘッダー ---------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: transparent;
}

.header-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 48px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ロゴ（リンク化） */
.logo {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transform: translateX(-16px);
}
/* ロゴ：日本語ロゴマーク／英語表記の2行組み。各行内で light/dark は重ねず、非表示側を display:none で畳んで縦積みする */
.logo-lines {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}
.logo-line {
  display: flex;
  align-items: center;
}
/* ロゴマーク：正式ロゴ未支給のため白い円で代用 */
.logo-mark {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(31, 47, 58, 0.18);
  flex-shrink: 0;
}
.logo-name {
  font-family: var(--font-mincho);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: #fff;
  text-shadow: 0 2px 8px rgba(31, 95, 122, 0.65);
}
.logo .logo-sub {
  font-family: var(--font-mincho);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: #fff;
  text-shadow: 0 2px 8px rgba(31, 95, 122, 0.65);
  margin-top: 0;
}

.header-logo-svg {
  height: 20px;
  width: auto;
  display: block;
  filter: drop-shadow(0 2px 8px rgba(31, 95, 122, 0.65));
}
.header-logo-svg path {
  fill: #fff;
}

/* ヘッダーがFVセクションより下に来たら、白文字＋影から地の色（ディープブルー・影なし）へ切り替え */
.site-header.is-scrolled .logo-name,
.site-header.is-scrolled .logo .logo-sub {
  color: var(--deep-blue);
  text-shadow: none;
}
.site-header.is-scrolled .header-logo-svg {
  filter: none;
}
.site-header.is-scrolled .header-logo-svg path {
  fill: var(--deep-blue);
}

.logo-text {
  font-family: var(--font-sans);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--black);
}

.logo-sub {
  font-family: var(--font-sans);
  font-size: 0.6rem;
  font-weight: 300;
  letter-spacing: 0.25em;
  color: var(--gray-50);
  margin-top: 3px;
}

/* 右側まとめ（ENTRYボタン＋ハンバーガー） */
.header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ENTRYボタン（グロナビ内。より目立たせるため濃いめのBlue→Greenグラデーションに変更） */
.header-entry-btn {
  display: inline-block;
  padding: 7px 18px;
  border-radius: 999px;
  background: linear-gradient(to right, #336892, #569778);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: filter 0.25s;
}
.header-entry-btn:hover {
  filter: brightness(1.1);
}

/* ハンバーガーボタン（常時表示） */
.nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  z-index: 120;
}

.nav-toggle-bar {
  display: block;
  width: 24px;
  height: 2px;
  margin: 0 auto;
  background: #fff;
  border-radius: 2px;
  transition: transform 0.3s, opacity 0.3s, background 0.2s ease;
}
/* ヘッダーが明るいセクション上（.is-scrolled）に来たら、ロゴ等と同様にディープブルーへ */
.site-header.is-scrolled .nav-toggle-bar {
  background: var(--deep-blue);
}

/* メニューを開くと、背後の白いナビパネルが透けるヘッダー越しに見えて白バーが同化するため、開いている間はディープブルーに固定 */
body.nav-open .nav-toggle-bar {
  background: var(--deep-blue);
}

/* 開いている時の×への変形 */
body.nav-open .nav-toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
body.nav-open .nav-toggle-bar:nth-child(2) {
  opacity: 0;
}
body.nav-open .nav-toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ナビ（常時オフキャンバス） */
.site-nav {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: min(78vw, 320px);
  background: var(--white);
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
  transform: translateX(100%);
  transition: transform 0.32s ease;
  z-index: 110;
  padding: 96px 0 40px;
  overflow-y: auto;
}
body.nav-open .site-nav { transform: translateX(0); }

.site-nav ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}
/* 区切り線は li 側に固定し、a のホバーアニメーション（浮き上がり）に線が引きずられないようにする */
.site-nav li {
  width: 100%;
  border-bottom: 1px solid var(--gray-15);
}
.site-nav li:last-child { border-bottom: none; }
.site-nav a {
  display: block;
  padding: 16px 32px;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  color: var(--gray-70);
  text-decoration: none;
  transition: color 0.2s ease;
}

.site-nav .nav-entry {
  display: block;
  margin: 24px 32px 0;
  padding: 14px 20px;
  border-radius: 999px;
  background: linear-gradient(to right, #336892, #569778);
  color: #fff;
  text-align: center;
  font-weight: 500;
}
/* 暗く沈むopacityではなく、背景が少し明るくなるアニメーションに（文字は常に白のまま） */
.site-nav .nav-entry:hover { filter: brightness(1.12); color: #fff; }

/* メニュー背景オーバーレイ */
.nav-overlay {
  display: block;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s;
  z-index: 105;
}
body.nav-open .nav-overlay { opacity: 1; visibility: visible; }
body.nav-open { overflow: hidden; }

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

.section-header {
  margin-bottom: 72px;
}

.section-header.center {
  text-align: center;
}

.section-label {
  display: block;
  font-family: var(--font-mincho);
  font-size: 18pt;
  font-weight: 300;
  letter-spacing: 0.14em;
  color: var(--deep-blue);
  margin-bottom: 12px;
}

.section-title {
  font-family: var(--font-sans);
  font-size: 2.4rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  color: var(--black);
  line-height: 1.3;
}

.title-underline {
  width: 48px;
  height: 1px;
  background: var(--black);
  margin-top: 20px;
}

.title-underline.center {
  margin-left: auto;
  margin-right: auto;
}

/* ---------- 画像プレースホルダー ---------- */
.img-placeholder {
  background: var(--gray-05);
  border: 1px dashed var(--gray-30);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--gray-50);
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 300;
  letter-spacing: 0.05em;
  line-height: 1.6;
}

.img-placeholder.tall    { height: 480px; }
.img-placeholder.medium  { height: 360px; }
.img-placeholder.portrait { height: 400px; }
.img-placeholder.portrait-sm { height: 280px; }
.img-placeholder.square  { height: 220px; }

img.portrait {
  width: 100%;
  height: 400px;
  object-fit: cover;
  object-position: 75% top;
  display: block;
}

/* ============================================
   FV
   ============================================ */
/* ============================================
   FV：静的ヒーロー（先方イメージの再現・2026-07-01）
   左に巨大キャッチ＋本文。染色が水に広がる虹彩オーロラ背景。
   ============================================ */
.fv {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background:
    radial-gradient(80% 72% at 12% 20%, rgba(42, 96, 170, 0.92) 0%, rgba(42, 96, 170, 0) 55%),
    radial-gradient(78% 70% at 92% 6%,  rgba(233, 152, 180, 0.85) 0%, rgba(233, 152, 180, 0) 55%),
    radial-gradient(95% 85% at 28% 110%, rgba(118, 200, 150, 0.85) 0%, rgba(118, 200, 150, 0) 55%),
    radial-gradient(70% 60% at 80% 92%,  rgba(236, 226, 150, 0.55) 0%, rgba(236, 226, 150, 0) 55%),
    radial-gradient(60% 60% at 62% 56%,  rgba(150, 212, 212, 0.42) 0%, rgba(150, 212, 212, 0) 60%),
    linear-gradient(125deg, #2b62a6 0%, #4b8fb8 36%, #7fc6be 60%, #cfa9c8 84%, #e7aec0 100%);
}
.fv-hero {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 0 clamp(28px, 6vw, 96px);
  margin-left: 8px;
}
/* FV グレイン層：CSSカラーぼかしの上にノイズをoverlayで重ね、すりガラス風の微粒質感を出す。
   grain.png は各ピクセル独立ノイズ＝タイルの継ぎ目が原理的に出ない。 */
.fv-grain {
  position: absolute;
  inset: 0;
  z-index: 1;                    /* 背景グラデより前・見出し(z-index:2)より後 */
  background-image: url('img/grain.png');
  background-repeat: repeat;
  background-size: 256px 256px;
  mix-blend-mode: overlay;
  opacity: 0.18;                 /* グレインの強さ（0.10〜0.20で調整） */
  pointer-events: none;
}
.fv-heading {
  font-family: var(--font-mincho);
  color: #fff;
  font-weight: 300;
  letter-spacing: 0.24em;
  line-height: 1.16;
  margin: 0 0 clamp(28px, 4vw, 48px);
  text-shadow: 0 2px 26px rgba(18, 46, 74, 0.30);
}
.fv-heading-line {
  display: block;
  font-size: 60px;
  white-space: nowrap;
}
.fv-heading-num {
  /* 60px基準で「+20px」だった比率(80/60)をem化。画面サイズが変わっても親(.fv-heading-line)に対する比率を保つ */
  font-size: 1.3333em;
}
.fv-heading-thin {
  font-weight: 100;
}
.fv-heading-small {
  /* 60px基準で56pxだった比率(56/60)をem化。同上 */
  font-size: 0.9333em;
}
.fv-lead {
  color: #fff;
  font-family: var(--font-sans);
  font-weight: 100;
  letter-spacing: 0.06em;
  line-height: 2.0;
  text-shadow: 0 1px 14px rgba(18, 46, 74, 0.34);
}
.fv-lead p {
  font-size: clamp(0.78rem, 1.15vw, 0.95rem);
  margin: 0 0 1.2em;
}
.fv-lead p:last-child { margin-bottom: 0; }

/* SCROLL：左下 */
.fv .fv-scroll {
  position: absolute;
  left: clamp(28px, 6vw, 96px);
  bottom: -10px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.fv .scroll-text {
  font-family: var(--font-mincho);
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.35em;
  color: rgba(255, 255, 255, 0.85);
}
.fv .scroll-line {
  display: block;
  position: relative;
  overflow: visible;
  width: 1px;
  height: 56px;
  background: rgba(255, 255, 255, 0.6);
}
.fv .scroll-line::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 0%;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.7);
  animation: fv-scroll-dot 5s ease-in-out 2.2s infinite backwards;
}
@keyframes fv-scroll-dot {
  0%   { top: 100%; opacity: 0;    }
  8%   { opacity: 1; }
  60%  { opacity: 1; }
  68%  { top: 0%;   opacity: 1;    }
  76%  { top: 0%;   opacity: 0;    }
  100% { top: 0%;   opacity: 0;    }
}

/* モバイル */
@media (max-width: 768px) {
  .fv { align-items: center; }
  .fv-hero { padding: 0 24px; }
  /* キャッチ「100人100色」：SPのみ130%に拡大 */
  .fv-heading-line { font-size: clamp(2.08rem, 10.4vw, 2.86rem); letter-spacing: 0.02em; }
  /* ボディコピー：SPのみ120%に拡大 */
  .fv-lead p { font-size: 0.912rem; line-height: 1.9; }
  /* SCROLL：SPのみ中央配置。高さの低い画面でFV内の文章と重なって見切れないよう、線の長さ・オフセットを画面の高さに応じて可変に */
  .fv .fv-scroll { left: 50%; transform: translateX(-50%); bottom: -3vh; }
  .fv .scroll-line { height: clamp(24px, 7vh, 40px); }
}

/* ---------- FV イントロアニメーション（2026-07-04）----------
   表示順：見出し1行目（1文字ずつ）→ 見出し2行目（1文字ずつ）→ リード文＋グロナビ/ロゴ+スクロールを同時にフェードイン。
   JSのタイマーは使わず、行ごとの --line-delay と文字ごとの --i から animation-delay を計算して
   タイミングを一本化（初回表示時に自動再生。JS不要のためJS無効環境でも最終的に全文表示される）。 */
.fv-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(10px);
  animation: fv-char-in 0.45s ease forwards;
  animation-delay: calc(var(--line-delay, 0s) + var(--i, 0) * 0.05s);
}
.fv-heading-line--1 { --line-delay: 0.15s; }
.fv-heading-line--2 { --line-delay: 1s; } /* 1行目と一部重ねて開始 */

@keyframes fv-char-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* リード文2つ（各内部の<br>含む）は1ブロックとして同時にフェードイン */
.fv-lead {
  opacity: 0;
  animation: fv-fade-in 0.7s ease forwards;
  animation-delay: 2.2s; /* 2行目（7文字）表示完了 1.9s + 間0.3s */
}

/* グロナビ・ロゴ・スクロールはリード文と同時にフェードイン。
   .site-header は他ページ共通クラスなのでトップページ（.page-home）にのみ適用 */
.page-home .site-header,
.fv .fv-scroll {
  opacity: 0;
  animation: fv-fade-in 0.7s ease forwards;
  animation-delay: 2.2s;
}

@keyframes fv-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* FVを通り過ぎたら（または最初からFV以外の位置で読み込まれたら）、
   イントロの遅延タイミングを無視してグロナビ・ロゴを即表示（body.fv-passedはJSが付与） */
body.fv-passed .site-header {
  opacity: 1 !important;
  animation: none !important;
}

.fv-divider {
  width: 48px;
  height: 1px;
  background: var(--black);
  margin-bottom: 20px;
}

.fv-sub {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--black);
  line-height: 1.9;
  margin-bottom: 18px;
}

.fv-body {
  font-family: var(--font-sans);
  font-size: 0.88rem;
  font-weight: 300;
  letter-spacing: 0.08em;
  color: var(--black);
  line-height: 2.1;
}

.fv-visual {
  grid-column: 2;
  grid-row: 1 / 3;
  z-index: 1;
}

.fv-scroll {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 80px 48px 80px;
  z-index: 1;
}

.scroll-line {
  width: 40px;
  height: 1px;
  background: var(--gray-50);
}

.scroll-text {
  font-family: var(--font-sans);
  font-size: 0.6rem;
  font-weight: 300;
  letter-spacing: 0.35em;
  color: var(--black);
}

/* ---------- FV アニメーション ---------- */
@keyframes fv-slide-in {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* JS制御アニメーション（JS無効時は通常表示） */
.fv-anim { opacity: 1; }
.js .fv-anim { opacity: 0; }
.fv-anim.show { animation: fv-slide-in 0.7s ease forwards; }

.fv-body--2 { margin-top: 1.9em; }

/* インクにじみレイヤー */
.fv-ink {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  mix-blend-mode: multiply;
  isolation: isolate;          /* インク同士の混色を紙から切り離す */
}

.fv-ink .ink-group {
  mix-blend-mode: screen;      /* インク同士は明るくきれいに混色 */
}

/* ============================================
   採用メッセージ（ポエムレイアウト）
   ============================================ */
/* ============================================
   採用メッセージ：スクロール固定クロスフェード
   トラックを縦長にし、内側をsticky固定。スクロール量に応じて
   ブロックを同じ位置で1つずつ入れ替える（JSがis-activeを付け替え）。
   ============================================ */
.message-section {
  padding: 0;
  overflow: visible;   /* sticky を効かせるため clip しない */
}

/* スクロール量を稼ぐ縦長トラック（先頭に助走1ユニット＋7ブロック、計8ユニット×100vh）。
   助走ユニットはFVからの勢いのままセクションへ入ってもblock0が一瞬で通り過ぎないための緩衝（2026-07-04追加） */
.message-pin-track {
  position: relative;
  height: 800vh;
}

/* 画面に貼り付く面
   背面のmist-layer（固定装飾）は画面上部に色が偏り下部が薄いため、
   ブロック文字が消えるタイミング（特に最終ブロック～About Us直前）で
   下側が色の抜けた白っぽい帯として露出してしまう。sticky自体に
   薄いグラデーション地色を常時敷いておくことで、演出中は常にどこかの
   高さでも色が乗っている状態にし、白い帯の露出を防ぐ。 */
.message-pin-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(165deg,
    rgba(143, 212, 216, 0.28) 0%,
    rgba(58, 143, 183, 0.22) 45%,
    rgba(110, 187, 138, 0.24) 100%);
}

/* セクションラベルは上部に固定表示。見た目は他の見出し（About Us等）と同じ.reveal/.inで統一
   （トリガーはIntersectionObserverでなく、message-pin-track側のスクロール量でJSが.inを付与） */
.message-pin-sticky .message-poem-header {
  position: absolute;
  top: calc(20vh + 16px);
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  z-index: 3;   /* 締めブロックの.ink-scatter（z-index:0）より前面に固定表示 */
}
.message-poem-header .section-label {
  text-shadow: 0 2px 10px rgba(255, 255, 255, 0.4);
}


/* ブロックを重ねる舞台（締めブロックの.ink-scatterより手前＝テキストの下に色が来るよう明示的に上に置く） */
.message-poem-stage {
  position: relative;
  z-index: 2;
  width: min(640px, 86vw);
  height: 44vh;
  margin-top: 32px;
}

/* 各ブロック：同じ位置に重ね */
.poem-block {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  text-align: center;
  pointer-events: none;
}

/* 各行：非表示が基底（is-active 解除で即座に0へ戻る） */
.poem-block .poem-line {
  opacity: 0;
  transform: translateY(14px);
  position: relative;
  z-index: 1;
}

/* アクティブ時：フェードイン */
.poem-block.is-active .poem-line {
  animation: poem-fadein 0.6s ease forwards;
}

@keyframes poem-fadein {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* 各行スタイル */
.poem-line {
  font-family: var(--font-mincho);
  font-size: clamp(0.85rem, 3.8vw, 24pt);
  font-weight: 400;
  letter-spacing: 0.14em;
  color: #45535d;
  line-height: 2.4;
  text-align: center;
  white-space: nowrap;
}

/* リード・締め行は黒・太め */
.poem-block--lead .poem-line,
.poem-block--closing .poem-line {
  color: var(--black);
  font-weight: 500;
}

/* 他のブロックと同じ absolute+中央寄せのまま（relativeにすると通常フローに乗って位置が上にずれる） */
.poem-block--closing { position: absolute; }
.poem-block--closing .poem-line {
  text-shadow: 0 2px 10px rgba(255, 255, 255, 0.4);
}

/* インクブロブ：「色」の位置からにじむ染料（位置はJSが設定） */
.poem-ink-blob {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  width: 400px;
  height: 400px;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  pointer-events: none;
  filter: blur(28px);
  will-change: transform, opacity;
  z-index: 0;  /* ::before(-1) の上、テキスト(1) の下 */
}
.poem-block.is-active .poem-ink-blob {
  animation: poem-ink-spread 2.2s ease-out forwards;
}
@keyframes poem-ink-spread {
  0%   { opacity: 0;    transform: translate(-50%, -50%) scale(0);    }
  10%  { opacity: 1;    transform: translate(-50%, -50%) scale(0.08); }
  60%  { opacity: 0.95; transform: translate(-50%, -50%) scale(0.85); }
  100% { opacity: 0.92; transform: translate(-50%, -50%) scale(1);    }
}

/* 締めブロックの演出：message-pin-sticky 直下に置き、画面全体に散らす（位置・大きさはJSが設定）。
   色は ::before に分離してそこだけぼかす。filter は要素の疑似要素をまとめてぼかしてしまうため、
   .ink-scatter 自体にはかけていない。 */
.ink-scatter {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  width: 400px;
  height: 400px;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
  z-index: 0;
}
.ink-scatter::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--ink-color);
  filter: blur(28px);
}
.ink-scatter.is-active {
  animation: poem-ink-spread 2.2s ease-out forwards;
}

/* 進行インジケータ（ドット） */
.message-progress {
  position: absolute;
  bottom: 11vh;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 10px;
  pointer-events: none;
}
.message-progress span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gray-15);
  transition: background 0.3s, transform 0.3s;
}
.message-progress span.on {
  background: linear-gradient(90deg, var(--setouchi-blue), var(--green));
  transform: scale(1.25);
}



/* ============================================
   越智源とは
   ============================================ */
.about-section {
  background: var(--gray-05);
}

.about-lead-block {
  display: flex;
  align-items: flex-start;
  gap: 48px;
  margin-bottom: 72px;
  padding-bottom: 72px;
  border-bottom: 1px solid var(--gray-15);
}

.about-year {
  font-family: var(--font-sans);
  font-size: 5rem;
  font-weight: 700;
  color: var(--gray-15);
  line-height: 1;
  flex-shrink: 0;
  letter-spacing: -0.02em;
}

.about-lead {
  font-family: var(--font-sans);
  font-size: 2rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--black);
  margin-bottom: 16px;
}

.emphasis-num {
  font-size: 2.6rem;
  font-weight: 700;
}

.about-desc {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--gray-70);
  line-height: 2;
  letter-spacing: 0.08em;
}

.about-feature-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: start;
  margin-bottom: 72px;
}

.feature-title {
  font-family: var(--font-sans);
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  color: var(--black);
  margin-bottom: 32px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--gray-15);
}

.feature-list {
  margin-bottom: 32px;
}

.feature-item {
  display: flex;
  gap: 12px;
  align-items: baseline;
  margin-bottom: 16px;
}

.feature-icon {
  font-size: 0.5rem;
  color: var(--gray-50);
  flex-shrink: 0;
  margin-top: 2px;
}

.feature-text {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--gray-70);
  line-height: 1.8;
}

.feature-desc {
  font-family: var(--font-sans);
  font-size: 0.88rem;
  font-weight: 300;
  letter-spacing: 0.06em;
  color: var(--gray-70);
  line-height: 2.1;
  margin-bottom: 16px;
}

.company-overview {
  border: 1px solid var(--gray-15);
  padding: 48px;
  background: var(--white);
}

.overview-title {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--gray-70);
  margin-bottom: 28px;
}

.overview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--gray-15);
}

.overview-item {
  background: var(--white);
  padding: 20px 24px;
}

.overview-label {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 300;
  letter-spacing: 0.2em;
  color: var(--gray-50);
  display: block;
  margin-bottom: 8px;
}

.overview-value {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--black);
  display: block;
}

/* ============================================
   越智源とは（バナーレイアウト）
   ============================================ */
.about-section {
  background: var(--gray-05);
}

/* 概要テキスト（エディトリアル） */
.about-editorial {
  margin-bottom: 80px;
}

/* イントロブロック */
.about-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
  padding-bottom: 64px;
  border-bottom: 1px solid var(--gray-15);
  margin-bottom: 64px;
}

.about-intro-catch {
  font-family: var(--font-sans);
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  line-height: 1.6;
  color: var(--black);
}

.about-intro-body p {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--gray-70);
  line-height: 2.1;
  margin-bottom: 16px;
}

.about-intro-body p:last-child {
  margin-bottom: 0;
}

/* キャッチブロック（①②共通） */
.about-catch-block {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 64px;
  align-items: start;
  padding-bottom: 64px;
  border-bottom: 1px solid var(--gray-15);
  margin-bottom: 64px;
}

.about-catch-block--last {
  border-bottom: none;
  margin-bottom: 48px;
}

/* 大キャッチコピー */
.about-catch {
  font-family: var(--font-sans);
  font-size: 2rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.55;
  color: var(--black);
  padding-left: 24px;
  border-left: 2px solid var(--black);
}

/* キャッチ横の本文 */
.about-catch-body p {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--gray-70);
  line-height: 2.1;
  margin-bottom: 16px;
}

.about-catch-body p:last-child {
  margin-bottom: 0;
}

/* 創業は1926年。などのサブキャッチ */
.about-catch-sub {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: #51606b !important;
  line-height: 1.95 !important;
  margin-bottom: 8px !important;
}

/* 「創業は1926年」部分を強調（末尾の「。」はそのまま）。サイズでなく色で強調（本文中のstrongと同じ--deep-blue） */
.about-catch-sub-big {
  font-weight: 700;
  color: var(--deep-blue) !important;
}

/* 締めの文 */
.about-catch-closing {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: #51606b !important;
  line-height: 1.95 !important;
  padding-top: 0;
  margin-top: 0;
  margin-bottom: 0 !important;
}

/* 締めの文の下：創業100年特設ページへのテキストリンク */
.about-100th-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin-top: 20px;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  color: var(--setouchi-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}
.about-100th-link:hover { color: var(--deep-blue); }

/* バナーへの誘導テキスト */
.about-banner-lead {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 300;
  letter-spacing: 0.2em;
  color: var(--gray-50);
  text-align: center;
  margin-bottom: 32px;
}

/* バナー全体ラッパー */
.about-banners {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: transparent;
}

/* バナー共通 */
.about-banner {
  display: flex;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  position: relative;
  background: var(--white);
  transition: background 0.25s;
}

.about-banner:hover {
  background: var(--gray-05);
}

/* 画像エリア */
.banner-img {
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
}

.about-banner-img-l {
  width: 320px;
  height: 200px;
}

.about-banner-img-s {
  width: 160px;
  height: 140px;
}

/* ホバーオーバーレイ */
.banner-overlay {
  position: absolute;
  inset: 0;
  background: var(--black);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}

.about-banner:hover .banner-overlay {
  opacity: 0.06;
}

/* バナー本文 */
.banner-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 28px 36px;
  flex: 1;
}

.banner-body--small {
  padding: 20px 24px;
}

/* 番号 */
.banner-num {
  font-family: var(--font-sans);
  font-size: 0.6rem;
  font-weight: 300;
  letter-spacing: 0.35em;
  color: var(--gray-30);
  margin-bottom: 8px;
}

/* ラベル（SPECIAL など） */
.banner-label {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.6rem;
  font-weight: 400;
  letter-spacing: 0.35em;
  color: var(--gray-50);
  border: 1px solid var(--gray-15);
  padding: 2px 8px;
  margin-bottom: 10px;
}

/* タイトル */
.banner-title {
  font-family: var(--font-sans);
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  color: var(--black);
  line-height: 1.55;
}

.banner-title--small {
  font-size: 1.32rem;
  margin-bottom: 8px;
}

/* リンクテキスト */
.banner-link-text {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  color: var(--black);
  margin-top: auto;
}

.banner-link-text--small {
  font-size: 0.7rem;
}

.banner-arrow {
  font-family: var(--font-sans);
  transition: transform 0.25s;
  display: inline-block;
}

.about-banner:hover .banner-arrow {
  transform: translateX(4px);
}

/* ①大バナー専用 */
.about-banner--large {
  border-bottom: none;
}

/* ②〜⑤小バナー行 */
.about-banners-sub {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  background: transparent;
}

.about-banner--small {
  flex-direction: column;
}

.about-banner--small .banner-img {
  width: 100%;
}

.about-banner-img-s {
  width: 100%;
  height: 120px;
  object-fit: cover;
  display: block;
}

/* ============================================
   社長メッセージ
   ============================================ */
.president-section {
  background: var(--white);
}

.president-layout {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 80px;
  align-items: start;
}

.quote-mark {
  font-family: var(--font-sans);
  font-size: 6rem;
  line-height: 0.8;
  color: var(--gray-15);
  font-weight: 700;
}

.quote-mark.open { margin-bottom: 16px; }
.quote-mark.close { text-align: right; margin-top: 8px; }

.president-text {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--gray-70);
  line-height: 2.2;
  margin-bottom: 24px;
}

.president-divider {
  width: 40px;
  height: 1px;
  background: var(--gray-30);
  margin: 32px 0;
}

.president-closing {
  font-family: var(--font-sans);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--gray-70);
  line-height: 2.1;
  margin-bottom: 24px;
}

.president-signature {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 32px;
  border-top: 1px solid var(--gray-15);
}

.signature-title {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 300;
  letter-spacing: 0.2em;
  color: var(--gray-50);
}

.signature-name {
  font-family: var(--font-sans);
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: 0.25em;
  color: var(--black);
}

.president-visual {
  position: relative;
}

.president-img-caption {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 300;
  letter-spacing: 0.15em;
  color: var(--gray-50);
  text-align: center;
  margin-top: 12px;
}

/* ============================================
   社員インタビュー
   ============================================ */
.interview-section {
  background: var(--gray-05);
}

.interview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--gray-15);
  margin-bottom: 80px;
}

.interview-card {
  background: var(--white);
  padding: 40px 32px;
  position: relative;
}

.interview-num {
  font-family: var(--font-sans);
  font-size: 4rem;
  font-weight: 700;
  color: var(--gray-05);
  line-height: 1;
  position: absolute;
  top: 24px;
  right: 24px;
  letter-spacing: -0.05em;
}

.interview-img {
  margin-bottom: 24px;
}

.interview-role {
  font-family: var(--font-sans);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--black);
  margin-bottom: 28px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--gray-15);
}

.interview-body {
  margin-bottom: 28px;
}

.interview-qa {
  margin-bottom: 20px;
}

.qa-question {
  font-family: var(--font-sans);
  font-size: 0.65rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  color: var(--gray-50);
  display: block;
  margin-bottom: 6px;
}

.qa-answer {
  font-family: var(--font-sans);
  font-size: 0.88rem;
  font-weight: 400;
  letter-spacing: 0.07em;
  color: var(--gray-70);
  line-height: 1.8;
  display: block;
}

.schedule-block {
  border: 1px solid var(--gray-15);
  padding: 20px 20px;
  background: var(--gray-05);
}

.schedule-title {
  font-family: var(--font-sans);
  font-size: 0.65rem;
  font-weight: 300;
  letter-spacing: 0.25em;
  color: var(--gray-50);
  margin-bottom: 14px;
}

.schedule-list {
  list-style: none;
}

.schedule-list li {
  display: flex;
  gap: 16px;
  align-items: baseline;
  padding: 6px 0;
  border-bottom: 1px solid var(--gray-15);
  font-size: 0.78rem;
}

.schedule-list li:last-child {
  border-bottom: none;
}

.sched-time {
  font-family: var(--font-sans);
  font-weight: 400;
  letter-spacing: 0.05em;
  color: var(--gray-70);
  flex-shrink: 0;
  min-width: 36px;
}

.sched-item {
  font-family: var(--font-sans);
  color: var(--gray-70);
  letter-spacing: 0.06em;
}

.sched-time.sched-break,
.sched-item.sched-break {
  color: var(--gray-30);
}

/* 外国人実習生 */
.intern-interview {
  border: 1px solid var(--gray-15);
  background: var(--white);
  padding: 56px;
}

.intern-header {
  margin-bottom: 40px;
}

.intern-label {
  font-family: var(--font-sans);
  font-size: 0.65rem;
  font-weight: 300;
  letter-spacing: 0.35em;
  color: var(--gray-50);
  margin-bottom: 12px;
}

.intern-title {
  font-family: var(--font-sans);
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  color: var(--black);
}

.intern-layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 48px;
  align-items: start;
}

.intern-qa-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

.intern-qa {
  border-left: 1px solid var(--gray-15);
  padding-left: 20px;
}

/* ============================================
   インタビューカード一覧（トップページ用）
   ============================================ */

/* 2カラムグリッド */
/* ============================================
   先輩社員インタビュー（2026-07-01 参考画像レイアウトへ改修）
   大きな円写真＋キャッチをオーバーレイ枠で重ね、
   その下に役職を配置。配色はサイトのアクア基調に合わせる。
   ============================================ */
.interview-cards-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(28px, 3.5vw, 56px);
  background: transparent;
  margin-bottom: 48px;
}

/* カード本体（a タグ）— 縦積み：円写真の下に役職 */
.iv-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-decoration: none;
  color: inherit;
  position: relative;
  background: transparent;
  padding: 0;
}

/* ■ 円写真＋キャッチのオーバーレイ枠 */
.iv-card-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
}

.iv-photo {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  box-shadow: 0 18px 42px rgba(31, 95, 122, 0.22);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.iv-card:hover .iv-photo {
  transform: translateY(-5px);
  box-shadow: 0 26px 52px rgba(31, 95, 122, 0.30);
}

/* キャッチ：円の下部に重ね、左端は円の外へ少しはみ出す */
.iv-catch {
  position: absolute;
  left: -4%;
  bottom: 11%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  z-index: 2;
  pointer-events: none;
}

.iv-catch-line {
  font-family: var(--font-mincho);
  font-size: clamp(0.84rem, 1.15vw, 1.04rem);
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1.45;
  color: var(--deep-blue);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 8px 18px rgba(31, 95, 122, 0.16);
  padding: 0.26em 0.72em;
  white-space: nowrap;
}

/* メタ：役職＋リンク（円写真の下） */
.iv-card-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 10px;
  padding: 24px 4px 0;
}

/* 職種 */
.iv-card-role {
  font-family: var(--font-sans);
  font-size: 1.16rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--ink-navy);
  display: block;
}

.iv-card-role--sub {
  font-family: var(--font-sans);
  font-size: 0.56rem;
  font-weight: 300;
  letter-spacing: 0.24em;
  color: var(--gray-50);
  display: block;
}

/* 外国人実習生カード：和文ラベルの右に英字ラベルを並べる（通常のインライン文字送りで半角スペースを反映） */
.iv-card-role-row .iv-card-role,
.iv-card-role-row .iv-card-role--sub {
  display: inline;
}

/* 詳しく見る */
.iv-card-link {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  color: var(--setouchi-blue);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.iv-arrow {
  font-family: var(--font-sans);
  transition: transform 0.25s;
  display: inline-block;
}

.iv-card:hover .iv-arrow {
  transform: translateX(4px);
}

/* もっと見るボタン */
.interview-more {
  display: flex;
  justify-content: center;
  margin-top: 8px;
  margin-bottom: 8px;
}

.interview-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  color: var(--black);
  text-decoration: none;
  border: 1px solid var(--gray-15);
  padding: 16px 40px;
  transition: border-color 0.25s, background 0.25s;
}

.interview-more-btn:hover {
  border-color: var(--black);
  background: var(--gray-05);
}

.interview-more-arrow {
  font-family: var(--font-sans);
  transition: transform 0.25s;
}

.interview-more-btn:hover .interview-more-arrow {
  transform: translateX(4px);
}

/* ============================================
   募集要項
   ============================================ */
.recruit-section {
  background: var(--white);
}

.recruit-positions {
  margin-bottom: 56px;
}

.positions-title {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--gray-70);
  margin-bottom: 24px;
}

.positions-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--gray-15);
}

.position-card {
  background: var(--gray-05);
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

.position-icon {
  font-size: 0.6rem;
  color: var(--gray-50);
}

.position-name {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--black);
}

.recruit-table-wrap {
  border: 1px solid var(--gray-15);
}

.recruit-table {
  width: 100%;
  border-collapse: collapse;
}

.recruit-table th,
.recruit-table td {
  padding: 24px 32px;
  border-bottom: 1px solid var(--gray-15);
  text-align: left;
  vertical-align: top;
}

.recruit-table tr:last-child th,
.recruit-table tr:last-child td {
  border-bottom: none;
}

.recruit-table th {
  font-family: var(--font-sans);
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--black);
  background: var(--gray-05);
  width: 200px;
  border-right: 1px solid var(--gray-15);
}

.recruit-table td {
  font-family: var(--font-sans);
  font-size: 0.88rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--gray-70);
  line-height: 1.9;
}

.welfare-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.welfare-tag {
  display: inline-block;
  border: 1px solid var(--gray-30);
  padding: 4px 14px;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--gray-70);
}

/* ============================================
   エントリー
   ============================================ */
.entry-section {
  color: var(--white);
  padding: 120px 0;
  overflow: hidden;
}

.entry-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.entry-deco-line {
  width: 1px;
  height: 298px;
  margin-top: -160px;
  margin-bottom: -58px;
  background: var(--gray-50);
}

.entry-content {
  padding: 64px 0;
}

.entry-label {
  display: block;
  font-family: var(--font-mincho);
  font-size: 0.65rem;
  font-weight: 300;
  letter-spacing: 0.45em;
  color: var(--gray-50);
  margin-bottom: 36px;
}

.entry-heading {
  font-family: var(--font-sans);
  font-size: 2.2rem;
  font-weight: 400;
  letter-spacing: 0.15em;
  line-height: 1.7;
  color: var(--white);
  margin-bottom: 40px;
}

.entry-desc {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 300;
  letter-spacing: 0.15em;
  color: var(--gray-30);
  margin-bottom: 40px;
}

.entry-btn {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  border: 1px solid var(--white);
  border-radius: 999px;
  padding: 20px 48px;
  text-decoration: none;
  color: var(--white);
  font-family: var(--font-sans);
  font-size: 0.9rem;
  letter-spacing: 0.25em;
  transition: background 0.3s, color 0.3s;
  margin-bottom: 16px;
}

.entry-btn:hover {
  background: var(--white);
  color: var(--black);
}

.entry-btn-arrow {
  font-family: var(--font-sans);
  font-size: 1.1rem;
  transition: transform 0.3s;
}

.entry-btn:hover .entry-btn-arrow {
  transform: translateX(4px);
}

.entry-note {
  font-family: var(--font-sans);
  font-size: 0.65rem;
  font-weight: 300;
  letter-spacing: 0.15em;
  color: var(--gray-50);
}

/* ============================================
   フッター
   ============================================ */
.site-footer {
  padding: 48px 0;
}

.footer-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 48px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.footer-logo .logo-text {
  color: var(--gray-15);
  font-size: 1.1rem;
}

.footer-logo .logo-sub {
  color: var(--gray-50);
}

.footer-info p {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 100;
  letter-spacing: 0.12em;
  color: var(--white);
  line-height: 2;
}

.footer-copy p {
  font-family: var(--font-sans);
  font-size: 0.65rem;
  font-weight: 100;
  letter-spacing: 0.12em;
  color: var(--white);
}

/* ============================================
   レスポンシブ
   ============================================ */

/* レスポンシブ改行ユーティリティ（PC=br-pcのみ改行 / SP=br-spのみ改行） */
.br-sp { display: none; }
.br-pc { display: inline; }

/* 中央揃えの行末が「、」「。」で終わる場合の光学補正。
   行頭に見えない全角1文字分の空白を置くことで、視覚的に0.5文字分右へ寄せる。
   （句読点は視覚的に軽いため、中央揃えだと行全体が左に寄って見えるための補正） */
.jp-shift { display: inline-block; width: 1em; }

/* ---------- タブレット（〜1024px）：全体の縮小 ---------- */
@media (max-width: 1024px) {
  .container { padding: 0 32px; }
  .header-inner { padding: 0 32px; }
  .site-nav ul { gap: 20px; }
  .site-nav a { font-size: 0.75rem; }

  .section { padding: 90px 0; }
  .section-title { font-size: 2rem; }

  .president-layout { gap: 48px; }
}

/* --- 縦書き見出し内の「100」：PCは算用数字、SPは漢数字「百」で表示 --- */
.catch-num-sp { display: none; }

/* ---------- モバイル（〜768px）：ハンバーガー＋縦積み ---------- */
@media (max-width: 768px) {

  /* レスポンシブ改行・非表示の切り替え */
  .br-sp { display: inline; }
  .br-pc { display: none; }
  .sp-hide { display: none; }

  /* ロゴ（文字ロゴSVG）とエントリーボタンが狭幅で重なるため、両方少し縮小 */
  /* ロゴ：SPのみさらに130%に拡大（視認性向上の要望） */
  .site-header .logo-line--jp .logo-img { height: 22px; }
  .site-header .logo-line--en .logo-img { height: 8.6px; }
  .header-entry-btn { padding: 6px 14px; font-size: 0.66rem; }

  /* セクション */
  .section { padding: 64px 0; }
  .section-header { margin-bottom: 48px; }
  .section-title { font-size: 1.7rem; }

  /* 採用メッセージ：SPのみFV・越智源とはとの間の空白をなくす */
  .message-section { padding-top: 0; padding-bottom: 0; }
  .poem-line { font-size: clamp(1.05rem, 4.8vw, 24pt); }

  /* 越智源とは：バナー */
  .about-banner--large { flex-direction: column; }
  .about-banner--large .banner-img,
  .about-banner-img-l {
    width: 100%;
    height: 180px;
  }
  .about-banners-sub { grid-template-columns: repeat(2, 1fr); }

  /* 越智源とは：2つのキャッチを縦書きに（罫は行側にまとめるので消す） */
  .about-catch--nobreak br { display: none; }
  .catch-num-pc { display: none; }
  .catch-num-sp { display: inline; }
  .about-catch {
    writing-mode: vertical-rl;
    font-size: 1.3rem;
    letter-spacing: 0.22em;
    height: auto;
    flex: none;
    margin: 0;
    line-height: 1.9;
  }

  /* 見出し（縦書き）の右に文章を左揃えで並べる */
  .about-row-text {
    display: flex;
    align-items: flex-start;
    gap: 20px;
  }
  .about-row .about-catch { margin-bottom: 0; }
  .about-catch-body { flex: 1 1 auto; min-width: 0; text-align: left; }

  /* 社長メッセージ：写真＋氏名を先に、本文を後に */
  .president-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .president-visual { order: -1; }
  img.portrait { height: 340px; }

  /* 文字組調整：強制改行を解除し、はみ出し・孤立文字を防ぐ */
  .president-text br { display: none; }
  .president-text {
    font-size: 0.95rem;
    letter-spacing: 0.04em;
    line-height: 2.0;
  }
  .president-closing {
    font-size: 1rem;
    letter-spacing: 0.04em;
  }

  /* インタビューカード */
  .interview-cards-list { grid-template-columns: 1fr; }

  /* 募集要項 */
  .positions-grid { grid-template-columns: repeat(2, 1fr); }
  .recruit-table th { width: 120px; padding: 16px; }
  .recruit-table td { padding: 16px; }

  /* エントリー */
  .entry-heading { font-size: 1.7rem; }
}

/* ---------- 小型モバイル（〜480px）：さらに調整 ---------- */
@media (max-width: 480px) {
  .container { padding: 0 20px; }
  .header-inner { padding: 0 20px; }

  /* さらに狭い幅ではロゴ・ボタン・ハンバーガーの間隔も詰める（ロゴ自体はSPのみ130%に拡大） */
  .site-header .logo-line--jp .logo-img { height: 16.9px; }
  .site-header .logo-line--en .logo-img { height: 6.5px; }
  .header-entry-btn { padding: 5px 12px; font-size: 0.6rem; }
  .header-right { gap: 8px; }
  .nav-toggle { width: 32px; height: 32px; }

  .section { padding: 52px 0; }
  .section-title { font-size: 1.5rem; }
  .message-section { padding-top: 0; padding-bottom: 0; }

  /* バナー・職種を1カラムに */
  .about-banners-sub { grid-template-columns: 1fr; }
  .positions-grid { grid-template-columns: 1fr; }

  /* 募集要項テーブルを縦積みに */
  .recruit-table,
  .recruit-table tbody,
  .recruit-table tr,
  .recruit-table th,
  .recruit-table td {
    display: block;
    width: 100%;
  }
  .recruit-table th {
    border-bottom: none;
    padding: 16px 16px 4px;
  }
  .recruit-table td { padding: 4px 16px 16px; }

  .entry-heading { font-size: 1.5rem; }
}

/* ============================================================
   Blue & Green デザインシステム（design.md 準拠・ブラッシュアップ層）
   構成/コピー/掲載順は不変。見た目（書体・配色・背景・あしらい）のみ。
   末尾に集約＝ベースとの差分が一望でき修正しやすい。
   ============================================================ */

/* --- 書体：大見出し・キャッチ・理念メッセージは Shippori Mincho --- */
.logo-text,
.section-title,
.poem-line,
.about-intro-catch, .about-catch, .about-catch-sub, .about-catch-closing,
.president-text, .president-closing, .signature-name,
.intern-title,
.iv-card-catch,
.banner-title,
.entry-heading {
  font-family: var(--font-mincho);
}

/* --- 英字ラベル（eyebrow）：Setouchi Blue の差し色 --- */
.fv-label {
  color: var(--setouchi-blue);
  font-weight: 500;
}

/* --- 見出し下線・FV罫：Blue→Green グラデの細線 --- */
.title-underline {
  width: 56px;
  height: 2px;
  background: linear-gradient(90deg, var(--setouchi-blue), var(--green));
}
.fv-divider {
  width: 56px;
  height: 2px;
  background: linear-gradient(90deg, var(--setouchi-blue), var(--green));
}

/* --- セクション別の淡い水彩背景（白基調＋ブルー/グリーンのにじみ） --- */
.message-section {
  background: transparent;
}
.about-section {
  background:
    radial-gradient(64% 48% at 100% 0%, rgba(58, 143, 183, 0.12) 0%, transparent 58%),
    radial-gradient(60% 50% at 0% 100%, rgba(110, 187, 138, 0.12) 0%, transparent 58%),
    var(--light-blue);
}
.president-section {
  background:
    radial-gradient(54% 46% at 0% 6%, rgba(110, 187, 138, 0.10) 0%, transparent 60%),
    var(--white);
}
.interview-section {
  background:
    radial-gradient(66% 50% at 100% 0%, rgba(58, 143, 183, 0.12) 0%, transparent 55%),
    var(--pale-green);
}
.recruit-section {
  background:
    radial-gradient(70% 40% at 50% 102%, rgba(143, 212, 216, 0.14) 0%, transparent 60%),
    var(--white);
}


/* --- 越智源とは：キャッチの罫を差し色に、バナーをカード化 --- */
.about-catch { border-left-color: var(--setouchi-blue); }
.about-banner {
  border-radius: 6px;
  transition: background 0.25s, transform 0.25s, box-shadow 0.25s;
}
.about-banner:hover {
  background: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(31, 95, 122, 0.10);
}
.banner-link-text { color: var(--setouchi-blue); }
.banner-label { border-color: var(--soft-aqua); color: var(--deep-blue); }

/* --- 社長メッセージ：写真を角丸＋背後に Blue&Green のグラデ面を重ねる --- */
.president-visual { position: relative; }
.president-photo { position: relative; z-index: 0; }
.president-photo::after {
  content: "";
  position: absolute;
  inset: 22px -16px -16px 22px;
  background: linear-gradient(150deg, rgba(143, 212, 216, 0.55), rgba(110, 187, 138, 0.40));
  border-radius: 10px;
  z-index: -1;
}
img.portrait { border-radius: 8px; position: relative; }
.quote-mark { color: rgba(58, 143, 183, 0.22); }

/* --- 先輩社員インタビュー：リンク差し色（2026-07-01 参考画像レイアウトへ改修済み。旧・横並びカード用の上書きは廃止） --- */
.iv-card-link { color: var(--setouchi-blue); }

/* --- 募集要項：職種カード・表ヘッダを淡ブルー、差し色を効かせる --- */
.position-card {
  background: var(--light-blue);
  border-radius: 6px;
  transition: transform 0.25s, box-shadow 0.25s;
}
.position-card:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(31, 95, 122, 0.10); }
.position-icon { color: var(--setouchi-blue); }
.recruit-table-wrap { border-color: var(--soft-aqua); border-radius: 8px; overflow: hidden; }
.recruit-table th { background: var(--light-blue); color: var(--ink-navy); border-right-color: rgba(143, 212, 216, 0.5); }
.recruit-table th, .recruit-table td { border-bottom-color: rgba(143, 212, 216, 0.4); }
.welfare-tag { border-color: var(--soft-aqua); color: var(--deep-blue); }

/* --- エントリー〜フッター：1枚の背景（Blue & Green グラデ＋グレイン）を .entry-footer-band に一括描画し、
   内側のセクション境界で模様が途切れないようにする --- */
.entry-footer-band {
  position: relative;
  background:
    radial-gradient(85% 85% at 12% 30%, rgba(110, 187, 138, 0.50) 0%, transparent 55%),
    radial-gradient(85% 85% at 92% 70%, rgba(143, 212, 216, 0.42) 0%, transparent 55%),
    linear-gradient(180deg, var(--deep-blue) 0%, #266F8C 52%, #2C8597 100%);
  color: #fff;
}
.entry-footer-band::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url('img/grain.png');
  background-repeat: repeat;
  background-size: 256px 256px;
  mix-blend-mode: overlay;
  opacity: 0.18;
  pointer-events: none;
}
.entry-section, .site-footer { position: relative; z-index: 1; }

.entry-inner { position: relative; z-index: 1; }
.entry-label { color: rgba(255, 255, 255, 0.75); }
.entry-heading { color: #fff; }
.entry-desc { color: rgba(255, 255, 255, 0.82); }
.entry-deco-line { background: rgba(255, 255, 255, 0.45); }
.entry-btn {
  background: #fff;
  border-color: #fff;
  color: var(--deep-blue);
  font-weight: 700;
}
.entry-btn:hover {
  background: var(--soft-aqua);
  border-color: var(--soft-aqua);
  color: var(--ink-navy);
}

.footer-inner { position: relative; z-index: 1; }
.footer-logo-img { height: 20px; width: auto; display: block; }

/* --- FV 可読性：インクは背景の柔らかな水彩に留め、文字とコントラストを確保 --- */
.fv-ink { opacity: 0.42; }
.fv-sub  { font-weight: 600; color: var(--ink-navy); }
.fv-body { font-weight: 400; color: var(--ink-navy); }
/* 文字列の下に淡い白の地を敷き、グラデ上でも本文を読みやすく */

/* ============================================================
   v2：染料のモヤ（スクロール拡散）／FV社員カードバー／あしらい／密度調整
   ============================================================ */

/* --- 土台 --- */
html { background-color: #F6FAFB; }
body { background: transparent; }

/* --- モヤ層（固定・最背面） --- */
.mist-layer {
  position: fixed; inset: 0; z-index: -1;
  overflow: clip; pointer-events: none;
  opacity: 1;
}
.mist-blob {
  position: absolute; border-radius: 50%;
  filter: blur(72px);
  will-change: transform;
}
.mist-blob--1 { width: 48vw; height: 48vw; top: -8vh;  left: -10vw;  background: radial-gradient(circle, rgba(143,212,216,0.85), transparent 70%); animation: mist-drift-a 27s ease-in-out infinite; }
.mist-blob--2 { width: 54vw; height: 54vw; top: 22vh;  right: -14vw; background: radial-gradient(circle, rgba(110,187,138,0.70), transparent 70%); animation: mist-drift-b 33s ease-in-out infinite; }
.mist-blob--3 { width: 42vw; height: 42vw; bottom: -10vh; left: 12vw;  background: radial-gradient(circle, rgba(58,143,183,0.62),  transparent 70%); animation: mist-drift-c 30s ease-in-out infinite; }
.mist-blob--4 { width: 38vw; height: 38vw; top: 54vh;  left: 48vw;   background: radial-gradient(circle, rgba(143,212,216,0.55), transparent 70%); animation: mist-drift-a 25s ease-in-out infinite reverse; }
@keyframes mist-drift-a { 0%,100% { transform: translate(0,0); } 50% { transform: translate(4%, 6%); } }
@keyframes mist-drift-b { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-5%, 4%); } }
@keyframes mist-drift-c { 0%,100% { transform: translate(0,0); } 50% { transform: translate(3%, -5%); } }

/* --- セクションを半透明にして背面のモヤを透かす --- */
/* message-section: 白帯をpseudo-elementに分離→インクがその上レイヤーで描画される */
.message-section {
  background: transparent;
  isolation: isolate;   /* 独立したstacking contextを作りz-index管理を閉じ込める */
  z-index: 1;            /* auto だと sticky 内の写真がヘッダー(fixed, z-index:100)より上に出てしまうため明示指定 */
}
.message-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.50);
  z-index: -1;         /* セクション内コンテンツより後ろ */
  pointer-events: none;
}
.about-section     { background: rgba(232,246,250,0.42); }
.president-section { background: rgba(255,255,255,0.42); }
/* インタビュー一覧：詳細ページのヒーロー（ブルー〜グリーンのグラデ）へ自然に繋がるよう、
   単色のグリーンから同系のブルー→グリーンの淡いグラデーションへ（一覧→詳細の色の連続性） */
.interview-section {
  background: linear-gradient(165deg,
    rgba(232,246,250,0.52) 0%,
    rgba(223,241,232,0.46) 55%,
    rgba(214,238,224,0.50) 100%);
}
.recruit-section   { background: rgba(255,255,255,0.46); }

/* --- 出現アニメ --- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.9s ease, transform 0.9s ease; }
.reveal.in { opacity: 1; transform: none; }
/* カードはホバーの軽快さを保つ（出現はフェード主体） */
.iv-card.reveal { transition: opacity 0.9s ease, transform 0.3s ease, box-shadow 0.25s ease, background 0.25s ease; }

/* --- FV：社員カードバー（右カラムを縦スクロール） --- */
.fv-visual { position: relative; overflow: hidden; z-index: 1; }
.fv-cardbar {
  position: absolute; inset: 0; display: flex; justify-content: center;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 13%, #000 87%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 13%, #000 87%, transparent 100%);
}
.fv-cardbar-track {
  display: flex; flex-direction: column; gap: 18px; padding: 20px 0;
  width: min(308px, 86%);
  animation: cardbar-scroll 38s linear infinite;
}
.fv-cardbar:hover .fv-cardbar-track { animation-play-state: paused; }
@keyframes cardbar-scroll { from { transform: translateY(0); } to { transform: translateY(-50%); } }
.fv-mini {
  display: flex; align-items: center; gap: 16px; padding: 13px 18px;
  background: rgba(255,255,255,0.62); border: 1px solid rgba(255,255,255,0.7);
  border-radius: 16px; backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
  box-shadow: 0 10px 26px rgba(31,95,122,0.10);
}
.fv-mini-photo {
  width: 58px; height: 58px; border-radius: 50%; flex-shrink: 0;
  background-size: cover; background-position: center;
  box-shadow: 0 4px 12px rgba(31,95,122,0.20); border: 2px solid #fff;
}
.fv-mini-meta { display: flex; flex-direction: column; gap: 3px; }
.fv-mini-role { font-family: var(--font-sans); font-size: 0.6rem; font-weight: 500; letter-spacing: 0.16em; color: var(--setouchi-blue); }
.fv-mini-name { font-family: var(--font-mincho); font-size: 1.02rem; letter-spacing: 0.08em; color: var(--ink-navy); }

/* --- 先輩社員インタビュー：写真を主役級に（円写真＋キャッチ重ねのレイアウトは上部で定義済み） --- */

.section { position: relative; }

/* --- 密度調整：本文を一段落ち着かせ、キャッチを主役に --- */
.about-intro-body p,
.about-catch-body p { font-size: 0.85rem; line-height: 1.95; letter-spacing: 0.06em; color: #51606b; }
.about-intro-catch { font-size: 1.6rem; }
.about-catch { font-size: 1.9rem; }
.president-text,
.president-closing { font-size: 0.92rem; line-height: 2.1; color: #1F2F3A; }
.poem-line { color: #45535d; }

/* --- アクセシビリティ：動きを抑える設定を尊重 --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .fv-anim { opacity: 1 !important; }
  .fv-heading-ja-box, .fv-heading-en-line { opacity: 1 !important; transform: none !important; }
  .fv-char, .fv-lead, .page-home .site-header, .fv .fv-scroll { opacity: 1 !important; transform: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .reveal-mist::before { opacity: 1 !important; transform: none !important; }
  .mist-layer { transform: none !important; opacity: 0.8 !important; }

  /* 採用メッセージ：固定スクロールを解除し、全ブロックを通常表示 */
  .message-section { padding: 120px 0; }
  .message-pin-track { height: auto; }
  .message-pin-sticky { position: static; height: auto; overflow: visible; }
  .message-pin-sticky .message-poem-header { position: static; margin-bottom: 56px; }
  .message-poem-stage { height: auto; display: flex; flex-direction: column; align-items: center; gap: 48px; }
  .poem-block { position: static; inset: auto; }
  .poem-block .poem-line { opacity: 1 !important; transform: none !important; animation: none !important; }
  .poem-ink-blob { display: none; }
  .message-progress { display: none; }
}

/* ============================================================
   先方修正 2026-07-01（越智源とは：写真＋説明・互い違い／社長メッセージ調整）
   ============================================================ */

/* --- 越智源とは：FVから移動したリードコピー --- */
.about-lead-copy {
  font-family: var(--font-mincho);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.9;
  letter-spacing: 0.08em;
  color: var(--ink-navy);
  text-align: center;
  margin: 0 auto 72px;
  max-width: 40em;
}

/* --- 写真＋説明文の行（左右互い違い・写真は仮グレー） --- */
.about-editorial { margin-bottom: 80px; }
.about-row {
  display: flex;
  align-items: center;
  gap: 56px;
  margin-bottom: 72px;
}
.about-row:last-child { margin-bottom: 0; }
.about-row--reverse { flex-direction: row-reverse; }
.about-row-photo {
  flex: 0 0 44%;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  background: linear-gradient(135deg, #dbe1e5 0%, #c6d0d4 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.about-photo-note {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  letter-spacing: 0.32em;
  color: rgba(31, 47, 58, 0.42);
}
.about-row-text { flex: 1 1 auto; min-width: 0; }
.about-row .about-catch { margin-bottom: 24px; }

/* --- ポイント箇所の太字（全文読まなくても要点が拾える） --- */
.about-catch-body strong { font-weight: 700; color: var(--deep-blue); }

/* --- 社長メッセージ：本文を締め文「そんな仲間との…」と同じサイズに全て統一 --- */
.president-text,
.president-closing { font-size: 1.12rem; line-height: 1.95; }

/* --- 氏名を写真脇に集約・肩書を大きく --- */
.president-img-caption {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  margin-top: 20px;
}
.president-img-caption .cap-title {
  font-family: var(--font-mincho);
  font-size: 1.12rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  color: var(--setouchi-blue);
}
.president-img-caption .cap-name {
  font-family: var(--font-mincho);
  font-size: 1.7rem;
  letter-spacing: 0.2em;
  color: var(--ink-navy);
}

/* --- レスポンシブ：写真＋説明は縦積み（写真上）／文字調整 --- */
@media (max-width: 768px) {
  .about-lead-copy { font-size: 1.2rem; margin-bottom: 48px; }
  .about-row, .about-row--reverse {
    flex-direction: column;
    gap: 22px;
    margin-bottom: 48px;
  }
  /* 青線：見出し（縦書き）にのみ配置。左端は写真の左端に揃える */
  .about-row, .about-row--reverse { align-items: flex-start; }
  .about-row-photo {
    flex: none;
    width: 100%;
  }
  .about-row .about-catch {
    margin-bottom: 20px;
    border-left: none;
    padding-left: 0;
  }
  .president-text,
  .president-closing { font-size: 1.02rem; line-height: 1.9; }
  .president-img-caption .cap-name { font-size: 1.45rem; }
}

/* ============================================================
   先方修正 2026-07-03
   （PCナビ横並び／社長氏名を影の外／募集要項＝白表＋タブ／インタビュー年数）
   ============================================================ */

/* --- インタビュー：部門の下に勤続年数 --- */
.iv-card-years {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.86rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--gray-70);
  margin-top: -2px;
}

/* --- 社長メッセージ：氏名を背後グラデ面（影）の外＝下へ出す --- */
.president-img-caption { margin-top: 30px; }

/* --- フッター：公式サイトリンクを濃紺背景で読める明色に --- */
.footer-official-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}
.footer-official-link:hover { color: var(--soft-aqua); }

/* --- リンクを示す「2つの四角」アイコン（外部サイトへのリンクの目印） --- */
.icon-ext-link {
  width: 0.75em;
  height: 0.75em;
  flex-shrink: 0;
}

/* --- E: FV背景を先方提供画像に差し替え（CSSグラデ＋グレインを画像に置換） --- */
.fv {
  background: #16418f url('img/fv-bg.jpg') center center / cover no-repeat;
}
.fv-grain { display: none; }

/* --- ロゴ：公式SVG（白/黒）を使用。上部＝白＋影／スクロール時＝黒。白丸プレースホルダは撤去 ---
   注：現在のlogo-white.svg/logo-dark.svgは仮ロゴ。正式ロゴに差し替える際も同じ左寄せ調整（margin-left）を踏襲すること */
.logo { transform: none; gap: 0; margin-left: -8px; }
.logo-lines { gap: 4px; }
.logo-img { width: auto; display: block; transition: filter 0.2s ease; }
.logo-line--jp .logo-img { height: 15px; }
.logo-line--en .logo-img { height: 7px; }
.logo-img--light { filter: drop-shadow(0 2px 8px rgba(31, 95, 122, 0.6)); }
.logo-img--dark { display: none; }
.site-header.is-scrolled .logo-img--light { display: none; }
.site-header.is-scrolled .logo-img--dark { display: block; }

/* 動きではなく、触れたら色が変わるアニメーションに（白→ペールグリーン／スクロール後はディープブルー→瀬戸内ブルー） */
/* 色変換フィルターを先に適用し、ドロップシャドウは最後に置くことで影の色（青）自体は変化させない */
/* タップ後も:hoverが残るスマホでロゴ色が変わったままになるのを防ぐため、マウスホバー環境のみに限定 */
@media (hover: hover) and (pointer: fine) {
  .logo:hover .logo-img--light { filter: sepia(0.853) saturate(180%) hue-rotate(72deg) brightness(0.995) contrast(0.906) drop-shadow(0 2px 8px rgba(31, 95, 122, 0.6)); }
  .logo:hover .logo-img--dark { filter: brightness(1.55); }
}

/* --- 募集要項：表を白背景に（見やすさ優先） --- */
.recruit-table-wrap { background: #fff; }
.recruit-table th { background: #fff; color: var(--ink-navy); }

/* --- 募集要項：職種をタブ化。現在表示中のタブを明確に --- */
.recruit-tabs {
  display: flex;
  gap: 6px;
  position: relative;
  z-index: 1;
}
.recruit-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 10px;
  border: 1px solid var(--soft-aqua);
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  background: var(--light-blue);
  color: var(--deep-blue);
  font-family: var(--font-sans);
  font-size: clamp(0.8rem, 1.1vw, 0.98rem);
  font-weight: 500;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.recruit-tab-icon { font-size: 0.62rem; transition: transform 0.2s ease; }
.recruit-tab-label { text-align: center; line-height: 1.4; }
.recruit-tab--small .recruit-tab-label { font-size: 0.85em; }
.recruit-tab:hover { background: #e6f3f7; }
.recruit-tab.is-active {
  background: #fff;
  color: var(--ink-navy);
  font-weight: 700;
  box-shadow: 0 -5px 16px rgba(31, 95, 122, 0.09);
  margin-bottom: -1px;
}
.recruit-tab.is-active .recruit-tab-icon { transform: rotate(90deg); color: var(--setouchi-blue); }
/* アクティブタブと表を白でつなげる */
.recruit-tabs + .recruit-table-wrap {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* --- PC（769px〜）：グローバルナビを横並びインライン表示（ハンバーガー格納をやめる） --- */
@media (min-width: 769px) {
  .header-inner { justify-content: space-between; align-items: center; }
  .header-right { display: none; }
  .nav-overlay { display: none !important; }
  .site-nav {
    position: static;
    height: auto;
    width: auto;
    background: transparent;
    box-shadow: none;
    transform: none;
    padding: 0;
    margin-right: -40px;
    overflow: visible;
  }
  .site-nav ul { flex-direction: row; align-items: center; gap: clamp(10px, 1.4vw, 20px); flex-wrap: nowrap; }
  .site-nav li { width: auto; flex-shrink: 0; border-bottom: none; }
  .site-nav a {
    display: inline-block;
    padding: 0;
    font-size: 13px;
    white-space: nowrap;
    color: #fff;
    text-shadow: 0 2px 8px rgba(31, 95, 122, 0.55);
  }
  /* 動きではなく、触れたら色が変わるアニメーションに（白→ペールグリーン／スクロール後はディープブルー→瀬戸内ブルー） */
  .site-nav a:hover { color: var(--pale-green); }
  .site-header.is-scrolled .site-nav a { color: var(--deep-blue); text-shadow: none; }
  .site-header.is-scrolled .site-nav a:hover { color: var(--setouchi-blue); }
  /* エントリーボタンは上の汎用ホバー色指定の対象外（文字は常に白のまま） */
  .site-header.is-scrolled .site-nav .nav-entry:hover { color: #fff; }
  .site-nav .nav-entry {
    margin-left: 20px;
    padding: 9px 24px;
    text-shadow: none;
    transform: translateY(-10.5px);
  }
  .site-header.is-scrolled .site-nav .nav-entry { color: #fff; }
}

/* --- 1200px以上の広い画面のみ、ナビをさらに右へ寄せる（769〜1199px幅ではエントリーボタンが画面外に見切れるため、その帯では-40pxのまま） --- */
@media (min-width: 1200px) {
  .site-nav { margin-right: -100px; }
}