/* ============================================================
   フリコネ エンジニア採用LP — styles.css
   ブルー〜パープルの軽やかなIT感 ／ ライムイエローを差し色に

   目次
   0.  変数・リセット・共通
   0b. 背景ステージ
   0c. 写真プレースホルダー
   1.  Header（横並び・スクロールで白背景固定）
   2.  First View
   2b. マーキー
   3.  Problem（3カラム比較）
   4.  Numbers（数字カード）
   5.  Message（代表）
   6.  About（会社）
   7.  Business Model（図解）
   8.  Feature（制度カード）
   9.  Compensation（報酬モデル）
   10. Career Path（キャリア分岐）
   11. Work Style（タイムライン）
   12. People（インタビュー）
   13. Culture（Value）
   14. Benefits（福利厚生）
   15. Recruit（募集・タブ）
   16. Flow（選考）
   17. FAQ
   18. Entry CTA
   19. Footer
   20. アニメーション（reveal / clip / marquee / parallax）
   21. レスポンシブ
============================================================ */

/* ------------------------------------------------------------
   0. 変数・リセット・共通
------------------------------------------------------------ */
:root {
  --color-primary:   #2F8EEB;
  --color-secondary: #6D45F5;
  --color-accent:    #00A29A;   /* ティール（差し色・5%以下） */

  --color-white:     #FFFFFF;
  --color-bg:        #F7F9FC;
  --color-bg-blue:   #EEF6FF;
  --color-bg-purple: #DBCBFF;

  --color-text:      #111827;
  --color-text-sub:  #4B5563;
  --color-text-light:#FFFFFF;

  --color-border:    #E5EAF2;
  --color-border-strong: #CBD5E1;

  --gradient-main:   linear-gradient(135deg, #7E3FFF 0%, #0EE5BB 100%);
  --gradient-soft:   linear-gradient(135deg, #EEF9FF 0%, #F3F0FF 100%);
  --gradient-accent: linear-gradient(90deg, #00A29A 0%, #4DD9CC 100%);

  --shadow-card: 0 6px 26px rgba(17, 24, 39, 0.06);
  --shadow-pop:  0 16px 44px rgba(45, 70, 130, 0.14);

  --font-body: "Hiragino Sans", "Hiragino Kaku Gothic ProN",
               "Yu Gothic Medium", "Noto Sans JP", "Helvetica Neue",
               Arial, sans-serif;
  --font-display: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --container: 1220px;
  --container-narrow: 800px;
  --section-pad: clamp(80px, 11vw, 132px);
  --radius: 22px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; scroll-padding-top: 88px; }

body {
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: 0.03em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 40px);
}
.container--narrow { max-width: var(--container-narrow); }

main, .footer { position: relative; z-index: 1; }

/* セクション装飾：コンテンツの背後に図形を散らす */
main > section { position: relative; overflow: hidden; }
.container { position: relative; z-index: 1; }
.sec-deco { position: absolute; z-index: 0; pointer-events: none; user-select: none; }
.sec-deco.float { animation: blobFloat 18s ease-in-out infinite alternate; }
@media (max-width: 680px) { .sec-deco--lg { display: none; } }

/* セクション見出し */
.section-display {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(40px, 7.5vw, 104px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin-bottom: clamp(18px, 2.2vw, 30px);
}
.section-display--center { text-align: center; }
.section-display--ondark { color: #fff; }

/* 小見出し（ライムの丸 + ラベル） */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--color-text);
  margin-bottom: 16px;
}
.eyebrow::before {
  content: "";
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 4px rgba(0, 162, 154, 0.25);
}
.eyebrow--center { justify-content: center; }
.eyebrow--ondark { color: #fff; }

/* 日本語サブタイトル */
.section-title {
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 800;
  line-height: 1.55;
  letter-spacing: 0.02em;
  color: var(--color-text);
  margin-bottom: clamp(36px, 5vw, 56px);
}
.section-title--center { text-align: center; }
/* 見出しの句点をライムに */
.section-title .dot-accent { color: var(--color-primary); }
/* 重要語のアクセント下線 */
.u-mark {
  background: linear-gradient(transparent 62%, rgba(0, 162, 154, 0.4) 62%);
  padding: 0 1px;
}

.lead {
  font-size: clamp(14px, 1.6vw, 16px);
  color: var(--color-text-sub);
  line-height: 2.15;
  max-width: 720px;
}
.lead--center { margin-inline: auto; text-align: center; }

/* ボタン */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  border-radius: 999px;
  transition: transform .3s ease, box-shadow .3s ease, background .3s ease,
              color .3s ease, border-color .3s ease;
  white-space: nowrap;
  cursor: pointer;
}
.btn--lg { padding: 17px 40px; font-size: 16px; }
.btn--sm { padding: 11px 24px; font-size: 13px; }

.btn--primary {
  background: var(--gradient-main);
  color: #fff;
  box-shadow: 0 10px 26px rgba(58, 110, 230, 0.32);
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(58, 110, 230, 0.42); }

.btn--ghost {
  border: 1.5px solid var(--color-border-strong);
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.7);
}
.btn--ghost:hover { border-color: var(--color-primary); color: var(--color-primary); transform: translateY(-2px); }

.btn--white { background: #fff; color: var(--color-text); box-shadow: 0 10px 30px rgba(10, 20, 45, 0.22); }
.btn--white:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(10, 20, 45, 0.3); }

.btn--ghost-white { border: 1.5px solid rgba(255, 255, 255, 0.6); color: #fff; }
.btn--ghost-white:hover { background: rgba(255, 255, 255, 0.12); border-color: #fff; transform: translateY(-2px); }

/* タグ */
.tag {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 5px 13px;
  border-radius: 999px;
  line-height: 1.6;
  background: var(--color-bg-blue);
  color: var(--color-primary);
}
.tag--purple { background: var(--color-bg-purple); color: var(--color-secondary); }
.tag--gray { background: #eef1f6; color: var(--color-text-sub); }

.pc-only { display: inline; }
.sp-only { display: none; }

/* 共通カード */
.card-base {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

/* ------------------------------------------------------------
   0b. 背景ステージ（淡いグラデーション＋ぼかし円）
------------------------------------------------------------ */
.bg-stage { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.bg-stage__wash {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 82% 6%, rgba(122, 60, 255, 0.10), transparent 60%),
    radial-gradient(ellipse 65% 55% at 8% 92%, rgba(37, 199, 200, 0.10), transparent 60%),
    radial-gradient(ellipse 60% 50% at 50% 50%, rgba(47, 142, 235, 0.05), transparent 70%);
}
.bg-stage__line {
  position: absolute;
  inset: 48% auto auto 52%;
  width: max(245vw, 430vh);
  height: auto;
  max-width: none;
  transform: translate(-50%, -50%) rotate(-7deg) scale(1);
  transform-origin: 50% 50%;
  opacity: 0.20;
  mix-blend-mode: multiply;
  filter: saturate(1.18) contrast(1.03);
  animation: bgWaveDrift 18s ease-in-out infinite alternate;
}
.blob { position: absolute; border-radius: 50%; filter: blur(8px); opacity: 0.5; animation: blobFloat 16s ease-in-out infinite alternate; }
.blob--1 { width: 420px; height: 420px; top: 14%; left: -120px; background: radial-gradient(circle, rgba(37,199,200,0.18), transparent 70%); animation-duration: 19s; }
.blob--2 { width: 480px; height: 480px; top: 48%; right: -160px; background: radial-gradient(circle, rgba(122,60,255,0.16), transparent 70%); animation-duration: 23s; animation-delay: -5s; }
.blob--3 { width: 360px; height: 360px; bottom: 6%; left: 30%; background: radial-gradient(circle, rgba(47,142,235,0.14), transparent 70%); animation-duration: 21s; animation-delay: -9s; }

@keyframes bgWaveDrift {
  0% {
    transform: translate(-54%, -52%) rotate(-9deg) scale(1.02);
    opacity: 0.30;
  }
  45% {
    transform: translate(-49%, -48%) rotate(-4deg) scale(1.08);
    opacity: 0.43;
  }
  100% {
    transform: translate(-46%, -51%) rotate(-12deg) scale(1.04);
    opacity: 0.37;
  }
}

@keyframes blobFloat {
  0% { transform: translate3d(-2%, 1%, 0) scale(0.96); }
  50% { transform: translate3d(4%, -3%, 0) scale(1.08); }
  100% { transform: translate3d(-1%, 4%, 0) scale(1.02); }
}

/* ------------------------------------------------------------
   0c. 写真プレースホルダー
------------------------------------------------------------ */
.photo-ph {
  display: grid; place-items: center;
  border: 1.5px dashed var(--color-border-strong);
  border-radius: var(--radius);
  background:
    repeating-linear-gradient(45deg, rgba(17,24,39,0.03) 0 12px, transparent 12px 24px),
    var(--color-bg-blue);
  color: var(--color-text-sub);
  overflow: hidden;
}
.photo-ph__inner {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 16px; font-size: 12px; font-weight: 600; letter-spacing: 0.06em;
  text-align: center; line-height: 1.8;
}
.photo-ph svg { width: 34px; height: 34px; opacity: 0.55; }
.photo-ph--portrait { width: 100%; aspect-ratio: 3 / 4; }
.photo-ph--avatar { width: 60px; height: 60px; border-radius: 50%; flex-shrink: 0; }
.photo-ph--avatar svg { width: 22px; height: 22px; }
.photo-ph--ondark {
  border-color: rgba(255,255,255,0.4);
  background: repeating-linear-gradient(45deg, rgba(255,255,255,0.06) 0 12px, transparent 12px 24px), rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.8);
}

/* ------------------------------------------------------------
   1. Header
------------------------------------------------------------ */
.header {
  position: fixed; inset: 0 0 auto; z-index: 100;
  transition: background .4s ease, box-shadow .4s ease;
}
.header.is-scrolled {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--color-border), 0 6px 22px rgba(17, 24, 39, 0.05);
}
.header__inner {
  max-width: var(--container);
  margin-inline: auto;
  padding: 16px 25px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.header__logo {
  display: inline-flex; align-items: center; gap: 9px;
}
.header__logo img { width: auto; height: 36px; display: block; }
.header__mark { width: 30px; height: 30px; flex: none; }
.header__brand {
  font-size: clamp(20px, 2.2vw, 25px); font-weight: 800; letter-spacing: 0.02em;
  color: #171C61;
}

.header__nav {
  display: flex; align-items: center; gap: clamp(16px, 2vw, 30px);
  font-size: 14px; font-weight: 700; letter-spacing: 0.04em;
}
.header__nav a:not(.btn) {
  position: relative; padding: 4px 0;
  color: #171C61; /* 明るいFV背景上 → 濃色 */
  transition: color .3s ease;
}
.header.is-scrolled .header__nav a:not(.btn) { color: var(--color-text); }
.header__cta { background: var(--gradient-main); color: #fff; box-shadow: 0 10px 26px rgba(58,110,230,0.30); }
.header__cta:hover { box-shadow: 0 14px 32px rgba(58,110,230,0.40); color: #fff; }
.header__nav a:not(.btn)::after {
  content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 2px;
  border-radius: 2px; background: var(--gradient-main);
  transform: scaleX(0); transform-origin: right center;
  transition: transform .35s cubic-bezier(.22,1,.36,1);
}
.header__nav a:not(.btn):hover::after { transform: scaleX(1); transform-origin: left center; }
.header.is-scrolled .header__nav a:not(.btn):hover { color: var(--color-primary); }

.header__menu-btn {
  display: none; flex-direction: column; justify-content: center; gap: 6px;
  width: 44px; height: 44px; background: none; border: 0; cursor: pointer;
}
.header__menu-btn span {
  display: block; width: 26px; height: 2px; border-radius: 2px; margin-inline: auto;
  background: var(--color-text); transition: transform .35s ease, opacity .35s ease, background .3s ease;
}
.header.is-scrolled .header__menu-btn span { background: var(--color-text); }
.header__menu-btn.is-open span { background: var(--color-text); }
.header__menu-btn.is-open span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.header__menu-btn.is-open span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

/* ------------------------------------------------------------
   2. First View
------------------------------------------------------------ */
.hero-screen {
  min-height: 92svh;
  display: flex; flex-direction: column;
}
.fv {
  position: relative;
  flex: 1 1 auto; min-height: 0;
  display: flex; align-items: center;
  /* ヘッダーとFVの間にもう少し余裕を持たせる（+10px程度） */
  padding: clamp(84px, 8.6vh, 104px) 0 clamp(14px, 2vh, 26px);
  overflow: hidden;
  background:
    radial-gradient(ellipse 72% 62% at 78% 30%, rgba(47, 142, 235, 0.13), transparent 62%),
    radial-gradient(ellipse 46% 38% at 5% 96%, rgba(37, 199, 200, 0.12), transparent 65%),
    linear-gradient(180deg, #FFFFFF 0%, #F7FBFF 56%, #EEF7FF 100%);
  color: #171C61;
}
.fv::before {
  content: "";
  position: absolute;
  inset: -42% -70% -34% -70%;
  z-index: 0;
  pointer-events: none;
  background: url("assets/furicone-orbit-circles-round-motion.svg") center / 112% auto no-repeat;
  opacity: 0.46;
  mix-blend-mode: multiply;
  filter: saturate(1.16) contrast(1.02);
  transform: translate3d(0, 0, 0) rotate(-7deg) scale(1.04);
  animation: fvKvLineDrift 11s ease-in-out infinite alternate;
}
.fv::after {
  content: "";
  position: absolute;
  inset: -34% -48% -22% -36%;
  z-index: 0;
  pointer-events: none;
  background: url("assets/furicone-orbit-circles-round-motion.svg") center / 136% auto no-repeat;
  opacity: 0.26;
  mix-blend-mode: multiply;
  filter: saturate(1.25) contrast(1.04);
  transform: rotate(-8deg) scale(1.04);
  animation: fvWaveSweep 10s ease-in-out infinite alternate;
}
.fv__bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.fv__bg::before, .fv__bg::after {
  content: ""; position: absolute; border-radius: 50%;
}
.fv__bg::before {
  width: min(52vw, 680px); height: min(52vw, 680px); top: 6%; right: -10%;
  background: radial-gradient(circle at 42% 36%, rgba(255,255,255,0.85) 0 38%, rgba(238,246,255,0.58) 39% 64%, rgba(47,142,235,0.18) 65%, rgba(109,69,245,0.92) 100%);
}
.fv__bg::after {
  width: 260px; height: 260px; right: 2%; top: 12%;
  background-image: radial-gradient(rgba(47,142,235,0.34) 1.4px, transparent 1.4px);
  background-size: 10px 10px;
  opacity: 0.55;
}
.fv__glow { position: absolute; width: 48%; height: 42%; bottom: 0; left: -8%; background: radial-gradient(ellipse, rgba(47,142,235,0.10), transparent 70%); filter: blur(18px); }

.fv__inner {
  position: relative; z-index: 1;
  max-width: 1340px; margin-inline: auto; width: 100%;
  padding-inline: clamp(20px, 4vw, 40px);
  display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(24px, 3vw, 44px);
  align-items: center;
}
/* コピー左端を下の数字パネル（中央コンテナ）に揃える */
.fv__copy {
  position: relative;
  z-index: 5;
  padding-left: clamp(0px, 5.5vw, 80px);
}
.fv__title-en {
  position: absolute;
  top: -0.42em; left: -0.04em;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  font-family: var(--font-display);
  font-size: clamp(58px, 8vw, 116px); font-weight: 300; line-height: 1.0;
  letter-spacing: -0.01em; margin: 0; white-space: nowrap;
  background: linear-gradient(96deg, #7E3FFF 0%, #0EE5BB 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  opacity: 0.14;
}
/* .load-fade の共通ルール（.is-loaded .load-fade { opacity:1 }）が
   ロード後にこの要素の不透明度を1に上書きしてしまうため、
   より詳細度の高いセレクタで明示的に固定する */
.is-loaded .fv__title-en.load-fade {
  opacity: 0.14;
}
.fv__title-ja {
  position: relative; z-index: 1;
  font-size: clamp(33px, 5.4vw, 46px); font-weight: 900; line-height: 1.28;
  letter-spacing: 0.005em; color: #171C61; margin: 0 0 clamp(16px, 1.9vw, 24px);
}
.fv__title-ja br { display: block; }
.fv__hl {
  position: relative; padding: 0 .05em;
  background: linear-gradient(transparent 0 54%, rgba(0, 162, 154,0.92) 54% 94%, transparent 94%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.fv__sub {
  position: relative; z-index: 1;
  font-size: clamp(15px, 1.8vw, 20px); font-weight: 700; line-height: 2;
  margin-bottom: clamp(20px, 2.4vw, 32px); color: #29324E;
}
.fv__sub-hl {
  display: inline-block;
  white-space: nowrap;
  line-height: 1.5;
  background: #fff;
  color: #171C61;
  font-weight: 800;
  padding: 0 0.35em;
  border-radius: 4px;
}
@media (min-width: 1000px) { .fv__read br { display: inline; } }

.fv__chips { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 30px; }
.fv__chip {
  font-size: 13px; font-weight: 700; letter-spacing: 0.01em;
  color: #fff; background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 999px; padding: 8px 15px;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.fv__chip strong { color: var(--color-accent); font-weight: 800; }

.fv__actions {
  position: relative;
  z-index: 6;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.fv__actions .btn--lg { padding: 16px clamp(22px, 2vw, 30px); font-size: 15px; }
.fv__actions .btn--primary { background: var(--gradient-main); color: #fff; box-shadow: 0 14px 34px rgba(58,110,230,0.32); }
.fv__actions .btn--primary:hover { box-shadow: 0 18px 44px rgba(58,110,230,0.42); }
.fv__actions .btn--ghost-white { background: rgba(255,255,255,0.72); border-color: rgba(7,17,58,0.22); color: #171C61; box-shadow: 0 10px 30px rgba(47,74,125,0.08); }
.fv__actions .btn--ghost-white:hover { background: #fff; border-color: var(--color-primary); color: var(--color-primary); }
.fv__cta { display: inline-flex; align-items: center; gap: 10px; }
.fv__cta-ic { width: 19px; height: 19px; flex: none; }
.fv__cta-arrow { transition: transform .3s ease; }
.fv__cta:hover .fv__cta-arrow { transform: translateX(4px); }
.fv__more {
  display: inline-flex; align-items: center; gap: 8px; margin-top: clamp(14px, 1.8vw, 22px);
  font-size: 13.5px; font-weight: 800; letter-spacing: 0.02em; color: var(--color-primary);
}
.fv__more span { transition: transform .3s ease; }
.fv__more:hover span { transform: translateX(5px); }

/* FV右：キャリア分岐＋数字のビジュアルカード */
.fv__visual { position: relative; }
.fv__viscard {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: var(--radius);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  padding: clamp(22px, 2.5vw, 30px);
}
.fv__viscard-cap { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; color: rgba(255,255,255,0.85); margin-bottom: 16px; }
.fv__split { display: grid; gap: 10px; }
.fv__split-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: rgba(255,255,255,0.14); border-radius: 14px; padding: 12px 16px;
  font-size: 13.5px; font-weight: 700;
}
.fv__split-row span:last-child { color: var(--color-accent); }
.fv__visnum { display: flex; gap: 12px; margin-top: 14px; }
.fv__visnum div { flex: 1; background: rgba(255,255,255,0.14); border-radius: 14px; padding: 14px; text-align: center; }
.fv__visnum b { display: block; font-size: clamp(24px, 3vw, 34px); font-weight: 800; line-height: 1.1; }
.fv__visnum small { font-size: 10.5px; color: rgba(255,255,255,0.85); letter-spacing: 0.04em; }

.fv__scroll { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 10px; letter-spacing: 0.3em; color: rgba(7,17,58,0.45); }
.fv__scroll-line { width: 1.5px; height: 46px; background: rgba(47,142,235,0.22); position: relative; overflow: hidden; }
.fv__scroll-line::after { content: ""; position: absolute; inset: 0; background: var(--color-accent); animation: scrollLine 2.2s ease-in-out infinite; }
@keyframes scrollLine { 0% { transform: translateY(-100%);} 60%,100% { transform: translateY(100%);} }

@keyframes fvWaveSweep {
  0% {
    transform: translate(-3%, -2%) rotate(-10deg) scale(1.03);
    opacity: 0.16;
  }
  48% {
    transform: translate(3%, 2%) rotate(-5deg) scale(1.11);
    opacity: 0.27;
  }
  100% {
    transform: translate(6%, -1%) rotate(-12deg) scale(1.06);
    opacity: 0.22;
  }
}

@keyframes fvKvLineDrift {
  0% {
    transform: translate3d(-3%, -2%, 0) rotate(-9deg) scale(1.02);
    opacity: 0.27;
  }
  48% {
    transform: translate3d(3%, 2%, 0) rotate(-4deg) scale(1.08);
    opacity: 0.38;
  }
  100% {
    transform: translate3d(5%, -1%, 0) rotate(-12deg) scale(1.04);
    opacity: 0.32;
  }
}

/* ------------------------------------------------------------
   2b. マーキー
------------------------------------------------------------ */
.marquee {
  overflow: hidden; padding: clamp(14px, 2.2vw, 26px) 0;
  border-block: 1px solid var(--color-border);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee__track { display: inline-flex; align-items: center; white-space: nowrap; will-change: transform; animation: marquee 32s linear infinite; }
.marquee--reverse .marquee__track { animation-duration: 38s; animation-direction: reverse; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
  font-family: var(--font-display); font-size: clamp(28px, 5vw, 68px); font-weight: 800;
  line-height: 1.05; padding-inline: clamp(16px, 2.4vw, 38px);
  background: var(--gradient-main); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.marquee__item--ghost { background: none; -webkit-text-fill-color: transparent; color: transparent; -webkit-text-stroke: 1.5px rgba(17,24,39,0.22); }
.marquee__sep { font-size: clamp(14px, 2vw, 24px); color: var(--color-accent); -webkit-text-stroke: 0.6px rgba(17,24,39,0.25); padding-inline: clamp(10px, 1.6vw, 20px); }
@keyframes marquee { from { transform: translateX(0);} to { transform: translateX(-50%);} }

/* ------------------------------------------------------------
   3. Problem（3カラム比較）
------------------------------------------------------------ */
.problem { padding: clamp(92px, 12vw, 148px) 0 var(--section-pad); }
.compare__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 28px); align-items: stretch; margin-top: clamp(8px, 1.4vw, 18px); }
.compare__col {
  display: flex; flex-direction: column; background: rgba(255,255,255,0.92);
  border: 1px solid rgba(229,234,242,0.82); border-radius: 22px;
  box-shadow: 0 16px 46px rgba(47, 74, 125, 0.08);
  padding: clamp(28px, 3.2vw, 38px);
  min-height: 100%;
}
.compare__col--hl { position: relative; overflow: hidden; border-color: transparent; background: var(--gradient-soft); box-shadow: var(--shadow-pop); }
.compare__col--hl::before { content: ""; position: absolute; inset: 0; padding: 1.5px; border-radius: inherit; background: var(--gradient-main); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.compare__label { display: inline-block; align-self: flex-start; font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; color: var(--color-text-sub); background: #eef1f6; border-radius: 999px; padding: 5px 15px; margin-bottom: 16px; }
.compare__col--hl .compare__label { color: #fff; background: var(--gradient-main); }
.compare__name { font-size: clamp(18px, 2.2vw, 22px); font-weight: 800; line-height: 1.55; margin-bottom: 20px; }
.compare__list { display: grid; gap: 13px; }
.compare__list li { position: relative; padding-left: 28px; font-size: 14px; font-weight: 500; line-height: 1.7; color: var(--color-text-sub); }
.compare__list li.is-pos { color: var(--color-text); }
.compare__list li.is-pos::before { content: ""; position: absolute; left: 1px; top: 0.45em; width: 16px; height: 9px; border-left: 2.5px solid var(--color-primary); border-bottom: 2.5px solid var(--color-primary); transform: translateY(-20%) rotate(-45deg); }
.compare__list li.is-neg::before, .compare__list li.is-neg::after { content: ""; position: absolute; left: 4px; top: 0.85em; width: 13px; height: 2px; border-radius: 2px; background: rgba(17,24,39,0.28); }
.compare__list li.is-neg::before { transform: rotate(45deg); }
.compare__list li.is-neg::after { transform: rotate(-45deg); }
.problem__closing { margin-top: clamp(36px, 5vw, 52px); text-align: center; font-size: clamp(18px, 2.6vw, 26px); font-weight: 800; line-height: 1.7; }
.problem__closing .grad { background: var(--gradient-main); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* ------------------------------------------------------------
   4. Numbers（数字カード）
------------------------------------------------------------ */
.numbers { padding: var(--section-pad) 0; }
.numbers__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.numbers__item {
  position: relative; background: #fff; border: 1px solid var(--color-border);
  border-radius: var(--radius); box-shadow: var(--shadow-card);
  padding: clamp(24px, 2.6vw, 32px) 20px; text-align: center;
  transition: transform .4s ease, box-shadow .4s ease;
}
.numbers__item:hover { transform: translateY(-5px); box-shadow: var(--shadow-pop); }
.numbers__value {
  display: inline-block; font-weight: 800; line-height: 1.05; letter-spacing: -0.01em;
  font-size: clamp(34px, 4vw, 50px); font-variant-numeric: tabular-nums;
  background: var(--gradient-main); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  padding-bottom: 6px;
}
.numbers__value em { font-style: normal; font-size: 0.42em; margin-left: 1px; }
/* ライムの下線 */
.numbers__value::after { content: ""; display: block; width: 34px; height: 4px; margin: 4px auto 0; border-radius: 3px; background: var(--gradient-accent); }
.numbers__label { display: block; margin-top: 12px; font-size: 12.5px; font-weight: 700; color: var(--color-text); letter-spacing: 0.04em; }
.numbers__note { margin-top: 30px; font-size: 11.5px; color: var(--color-text-sub); opacity: 0.85; text-align: center; }

/* ------------------------------------------------------------
   5. Message（代表）
------------------------------------------------------------ */
.message { position: relative; overflow: hidden; padding: clamp(96px, 12vw, 150px) 0; background: rgba(255,255,255,0.34); }
.message::before {
  content: ""; position: absolute; width: min(46vw, 680px); aspect-ratio: 1; right: -10%; top: -18%;
  border-radius: 50%; background: var(--gradient-main); opacity: 0.95; filter: blur(0.1px);
}
.message .container { position: relative; }
.message__layout { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr); gap: clamp(40px, 6vw, 92px); align-items: center; }
.message .section-display { margin-bottom: clamp(36px, 5vw, 62px); }
.message__quote {
  font-size: clamp(28px, 3.3vw, 46px); font-weight: 800; line-height: 1.5;
  letter-spacing: 0.01em; color: #171C61; margin-bottom: clamp(28px, 3.4vw, 42px);
}
.message__quote span { color: inherit; }
.message__quote .dot-accent { color: var(--color-secondary); }
.message__body { position: relative; z-index: 2; }
.message__body p:not(.message__quote):not(.message__sign) {
  font-size: clamp(14px, 1.25vw, 16px); font-weight: 700; color: #171C61;
  line-height: 2.25; margin-bottom: 18px; max-width: 720px;
}
.message__promise { display: grid; gap: 0; margin: 26px 0 28px; max-width: 560px; }
.message__promise li {
  position: relative; min-height: 46px; padding: 7px 0 12px 56px;
  border-bottom: 1px solid rgba(47, 142, 235, 0.16);
  font-size: clamp(14px, 1.25vw, 16px); font-weight: 800; line-height: 1.7; color: #171C61;
}
.message__promise li::before {
  content: ""; position: absolute; left: 0; top: 5px; width: 34px; height: 34px;
  border-radius: 50%;
  background: url("assets/elements/02-icons/icons_021.png") center / contain no-repeat;
}
.message__sign { font-size: 14px; font-weight: 800; color: #171C61; letter-spacing: 0.06em; }
.message__sign span { font-size: 11.5px; font-weight: 500; color: var(--color-text-sub); margin-left: 8px; }
.message__photo { position: relative; z-index: 1; min-height: clamp(420px, 46vw, 620px); }
.message__photo::before {
  content: ""; position: absolute; inset: 8% -15% -8% 5%;
  border-radius: 46% 54% 40% 60% / 42% 40% 60% 58%;
  background: linear-gradient(135deg, rgba(238,246,255,0.45), rgba(255,255,255,0.32));
}
.message__photo-shape {
  position: absolute; inset: 0 -5% 0 0; overflow: hidden;
  border-radius: 46% 54% 42% 58% / 40% 38% 62% 60%;
  box-shadow: 0 20px 50px rgba(47, 74, 125, 0.10);
  background: linear-gradient(145deg, rgba(238,247,255,0.5) 0%, rgba(255,255,255,0.35) 52%, rgba(233,244,255,0.5) 100%);
}
.message__photo-shape .ph-person { width: 100%; height: 100%; border: 0; background: linear-gradient(145deg, #E6F4FF 0%, #FFFFFF 48%, #F2F0FF 100%); }
.message__photo-shape .ph-person img { width: 30%; max-width: 170px; opacity: 0.42; }
.message__photo-shape .ph-person::after { display: none; }
.message__vertical {
  position: absolute; top: 18%; right: 5%; z-index: 2;
  padding: 24px 16px; background: rgba(255,255,255,0.9);
  box-shadow: 0 14px 36px rgba(47, 74, 125, 0.12);
  writing-mode: vertical-rl; text-orientation: mixed;
  font-size: clamp(18px, 2vw, 26px); font-weight: 800; line-height: 1.55;
  color: #171C61; letter-spacing: 0.08em;
}

/* ------------------------------------------------------------
   6. About（会社）
------------------------------------------------------------ */
.about { padding: var(--section-pad) 0; }
.about__biz { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: clamp(36px, 5vw, 52px); }
.about__bizcard { background: #fff; border: 1px solid var(--color-border); border-radius: 18px; box-shadow: var(--shadow-card); padding: 24px 20px; }
.about__bizcard .num { font-family: var(--font-display); font-size: 14px; font-weight: 700; background: var(--gradient-main); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.about__bizcard h4 { font-size: 16px; font-weight: 800; margin: 8px 0 8px; }
.about__bizcard p { font-size: 12.5px; color: var(--color-text-sub); line-height: 1.9; }
.about__info { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--color-border); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-card); }
.about__info th, .about__info td { text-align: left; padding: 15px 22px; font-size: 13.5px; border-bottom: 1px solid var(--color-border); vertical-align: top; }
.about__info tr:last-child th, .about__info tr:last-child td { border-bottom: 0; }
.about__info th { width: 28%; font-weight: 700; color: var(--color-text); background: var(--color-bg-blue); }
.about__info td { color: var(--color-text-sub); }

/* ------------------------------------------------------------
   7. Business Model（図解）
------------------------------------------------------------ */
.bmodel { padding: var(--section-pad) 0; }
.bmodel__diagram { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(16px, 3vw, 40px); margin-bottom: clamp(40px, 5vw, 60px); }
.bmodel__sources { display: grid; gap: 12px; }
.bmodel__sources.right { order: 3; }
.bmodel__source { background: #fff; border: 1px solid var(--color-border); border-radius: 14px; box-shadow: var(--shadow-card); padding: 16px 18px; font-size: 13.5px; font-weight: 700; text-align: center; }
.bmodel__center { width: clamp(150px, 18vw, 210px); aspect-ratio: 1; border-radius: 50%; background: var(--gradient-main); color: #fff; display: grid; place-items: center; text-align: center; box-shadow: var(--shadow-pop); padding: 20px; }
.bmodel__center b { font-size: clamp(16px, 2vw, 22px); font-weight: 800; line-height: 1.5; }
.bmodel__center small { display: block; font-size: 11px; opacity: 0.9; margin-top: 6px; }
.bmodel__reasons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.bmodel__reason { background: #fff; border: 1px solid var(--color-border); border-radius: 18px; box-shadow: var(--shadow-card); padding: 26px 24px; }
.bmodel__reason .num { font-family: var(--font-display); font-size: 30px; font-weight: 800; background: var(--gradient-main); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; line-height: 1; }
.bmodel__reason h4 { font-size: 16px; font-weight: 800; margin: 12px 0 10px; line-height: 1.6; }
.bmodel__reason p { font-size: 13px; color: var(--color-text-sub); line-height: 1.95; }

/* ------------------------------------------------------------
   8. Feature（制度カード）
------------------------------------------------------------ */
.feature { padding: var(--section-pad) 0; }
.feature__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 22px); align-items: stretch; }
.feature__card {
  position: relative; background: rgba(255,255,255,0.94); border: 1px solid rgba(229,234,242,0.82);
  border-radius: 18px; box-shadow: 0 18px 48px rgba(47, 74, 125, 0.10);
  padding: clamp(24px, 2.4vw, 30px) clamp(16px, 2vw, 22px);
  min-height: 360px;
  transition: transform .4s ease, box-shadow .4s ease;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.feature__card:hover { transform: translateY(-6px); box-shadow: 0 24px 56px rgba(47, 74, 125, 0.16); }
.feature__num { display: block; font-family: var(--font-display); font-size: 11px; font-weight: 800; letter-spacing: 0.09em; background: var(--gradient-main); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 10px; }
.feature__card h3 { font-size: clamp(16px, 1.6vw, 19px); font-weight: 800; line-height: 1.55; margin: 8px 0 6px; }
.feature__catch { font-size: 13px; font-weight: 800; color: var(--color-primary); line-height: 1.75; margin-bottom: 12px; }
.feature__card > p { font-size: 12.5px; color: var(--color-text-sub); line-height: 1.9; margin-bottom: 14px; }
.feature__points { display: grid; gap: 9px; padding-top: 16px; border-top: 1px solid var(--color-border); }
.feature__points li { position: relative; padding-left: 22px; font-size: 13px; line-height: 1.7; }
.feature__points li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 12px; height: 7px; border-left: 2px solid var(--color-primary); border-bottom: 2px solid var(--color-primary); transform: rotate(-45deg); }

/* ------------------------------------------------------------
   9. Compensation（報酬モデル）
------------------------------------------------------------ */
.comp { padding: var(--section-pad) 0; }
.comp__models { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 24px; }
.comp__model { position: relative; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow-card); padding: 28px 24px; text-align: center; }
.comp__model--hl { background: var(--gradient-soft); border-color: transparent; box-shadow: var(--shadow-pop); }
.comp__model-tag { display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; padding: 4px 14px; border-radius: 999px; background: var(--color-bg-blue); color: var(--color-primary); margin-bottom: 14px; }
.comp__model--hl .comp__model-tag { background: var(--gradient-main); color: #fff; }
.comp__model-cond { font-size: 13px; color: var(--color-text-sub); line-height: 1.8; min-height: 3em; margin-bottom: 12px; }
.comp__model-val { font-size: clamp(26px, 3.4vw, 40px); font-weight: 800; line-height: 1.1; background: var(--gradient-main); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.comp__model-val small { display: block; font-size: 12px; font-weight: 700; color: var(--color-text-sub); -webkit-text-fill-color: initial; margin-top: 4px; }
.comp__model-val .uline { display: inline-block; background: linear-gradient(transparent 70%, rgba(0, 162, 154,0.8) 70%); }

.comp__sub { margin-top: clamp(40px, 5vw, 60px); }
.comp__subhead { font-size: 16px; font-weight: 800; margin-bottom: 18px; }
.comp__plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 36px; }
.comp__plan { background: #fff; border: 1px solid var(--color-border); border-radius: 16px; box-shadow: var(--shadow-card); padding: 20px 16px; text-align: center; }
.comp__plan .role { font-size: 12.5px; font-weight: 700; color: var(--color-text-sub); }
.comp__plan .yen { font-size: clamp(18px, 2.2vw, 24px); font-weight: 800; margin-top: 8px; }
.comp__incs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.comp__inc { background: #fff; border: 1px solid var(--color-border); border-radius: 18px; box-shadow: var(--shadow-card); padding: 24px 20px; }
.comp__inc-ic { width: 44px; height: 44px; border-radius: 12px; background: var(--gradient-soft); display: grid; place-items: center; color: var(--color-secondary); margin-bottom: 14px; }
.comp__inc-ic svg { width: 22px; height: 22px; }
.comp__inc-ic img { max-width: 28px; max-height: 28px; width: auto; height: auto; }
.comp__inc h4 { font-size: 15px; font-weight: 800; margin-bottom: 4px; }
.comp__inc .amt { font-size: clamp(17px, 2vw, 21px); font-weight: 800; background: var(--gradient-main); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 8px; }
.comp__inc p { font-size: 12px; color: var(--color-text-sub); line-height: 1.85; }
.comp__inc p small { color: #9aa3b8; }

/* ------------------------------------------------------------
   10. Career Path（分岐）
------------------------------------------------------------ */
.career { padding: var(--section-pad) 0; }
.career__hub { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; position: relative; }
.career__center {
  grid-column: 1 / -1; justify-self: center; margin-bottom: 8px;
  background: var(--gradient-main); color: #fff; border-radius: 999px; padding: 16px 40px;
  font-weight: 800; font-size: 16px; box-shadow: var(--shadow-pop);
}
.career__card { background: #fff; border: 1px solid var(--color-border); border-radius: 18px; box-shadow: var(--shadow-card); padding: 24px 22px; transition: transform .4s ease, box-shadow .4s ease; }
.career__card:hover { transform: translateY(-5px); box-shadow: var(--shadow-pop); }
.career__card .num { font-family: var(--font-display); font-size: 13px; font-weight: 700; background: var(--gradient-main); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.career__card h4 { font-size: 16px; font-weight: 800; margin: 8px 0 10px; line-height: 1.5; }
.career__card p { font-size: 12.5px; color: var(--color-text-sub); line-height: 1.9; }
.career__card .badge { display: inline-block; margin-top: 10px; font-size: 11px; font-weight: 700; color: var(--color-secondary); background: var(--color-bg-purple); border-radius: 999px; padding: 3px 11px; }

/* ------------------------------------------------------------
   11. Work Style（タイムライン）
------------------------------------------------------------ */
.work { padding: var(--section-pad) 0; }
.work__timeline { display: grid; gap: 12px; max-width: 760px; }
.work__item { display: flex; gap: clamp(14px, 3vw, 28px); align-items: flex-start; background: #fff; border: 1px solid var(--color-border); border-radius: 16px; box-shadow: var(--shadow-card); padding: 18px clamp(20px, 3vw, 28px); }
.work__time { flex-shrink: 0; min-width: 72px; font-family: var(--font-display); font-size: clamp(18px, 2.2vw, 24px); font-weight: 800; background: var(--gradient-main); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; line-height: 1.3; }
.work__body h4 { font-size: 15px; font-weight: 800; margin-bottom: 4px; }
.work__body p { font-size: 13px; color: var(--color-text-sub); line-height: 1.9; }
.work__note { margin-top: 20px; font-size: 11.5px; color: var(--color-text-sub); opacity: 0.85; }

/* ------------------------------------------------------------
   12. People（インタビュー）
------------------------------------------------------------ */
.people { padding: var(--section-pad) 0; }
.people__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.2vw, 28px); }
.people__card {
  display: grid; grid-template-columns: 38% 1fr; grid-template-rows: auto 1fr; gap: 0 clamp(16px, 2vw, 24px); align-items: stretch;
  background: rgba(255,255,255,0.94); border: 1px solid rgba(229,234,242,0.82);
  border-radius: 18px; box-shadow: 0 18px 48px rgba(47, 74, 125, 0.10);
  padding: 0; overflow: hidden; min-height: 270px;
  transition: transform .4s ease, box-shadow .4s ease;
}
.people__card:hover { transform: translateY(-6px); box-shadow: 0 24px 56px rgba(47, 74, 125, 0.16); }
.people__head { position: relative; grid-column: 1; grid-row: 1 / 3; display: block; min-height: 270px; margin: 0; }
.people__avatar { width: 100%; height: 100%; min-height: 270px; border-radius: 0; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 18px; flex-shrink: 0; }
.people__avatar--a { background: linear-gradient(135deg, #7E3FFF, #0EE5BB); }
.people__avatar--b { background: linear-gradient(135deg, #7E3FFF, #0EE5BB); }
.people__avatar--c { background: linear-gradient(135deg, #7E3FFF, #0EE5BB); }
.people__meta {
  position: absolute; left: 14px; right: 14px; bottom: 14px;
  padding: 10px 12px; border-radius: 12px;
  background: rgba(255,255,255,0.86); box-shadow: 0 10px 24px rgba(47, 74, 125, 0.12);
  font-size: 11px; color: var(--color-text-sub); line-height: 1.55;
}
.people__meta b { display: block; font-size: 14px; color: var(--color-text); }
.people__quote { grid-column: 2; grid-row: 1; position: relative; font-size: clamp(16px, 1.6vw, 19px); font-weight: 800; line-height: 1.7; color: var(--color-primary); padding: clamp(26px, 3vw, 34px) clamp(18px, 2vw, 24px) 0 0; margin-bottom: 0; }
.people__quote::before { content: "“"; margin-right: 8px; color: var(--color-primary); opacity: 0.55; }
.people__quote::after { content: "”"; margin-left: 8px; color: var(--color-primary); opacity: 0.55; }
.people__detail { grid-column: 2; grid-row: 2; padding: 10px clamp(18px, 2vw, 24px) clamp(22px, 2.4vw, 30px) 0; font-size: 12.5px; color: var(--color-text-sub); line-height: 1.95; }
.people__detail dt { display: none; }
.people__detail dd + dt + dd { display: none; }
.people__note { margin-top: 30px; font-size: 11.5px; color: var(--color-text-sub); opacity: 0.85; text-align: center; }

/* ------------------------------------------------------------
   13. Culture（Value）
------------------------------------------------------------ */
.culture { padding: var(--section-pad) 0; }
.culture__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.culture__card { background: #fff; border: 1px solid var(--color-border); border-radius: 18px; box-shadow: var(--shadow-card); padding: 26px 20px; }
.culture__card .en { font-family: var(--font-display); font-size: 17px; font-weight: 700; background: var(--gradient-main); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.culture__card h4 { font-size: 14px; font-weight: 800; margin: 6px 0 10px; }
.culture__card p { font-size: 12.5px; color: var(--color-text-sub); line-height: 1.9; }
.culture__closing { margin-top: 28px; text-align: center; font-size: 14px; color: var(--color-text-sub); line-height: 2; }

/* ------------------------------------------------------------
   14. Benefits（福利厚生）
------------------------------------------------------------ */
.benefits { padding: var(--section-pad) 0; }
.benefits__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.benefits__cat { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow-card); padding: 26px 24px; }
.benefits__cat h4 { display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 800; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--color-border); }
.benefits__cat h4::before { content: ""; width: 7px; height: 18px; border-radius: 3px; background: var(--gradient-main); }
.benefits__cat ul { display: grid; gap: 9px; }
.benefits__cat li { font-size: 13px; color: var(--color-text-sub); line-height: 1.7; padding-left: 16px; position: relative; }
.benefits__cat li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 6px; height: 6px; border-radius: 50%; background: var(--color-primary); }
.benefits__cat li.hot { color: var(--color-text); font-weight: 700; }
.benefits__cat li.hot::before { background: var(--color-accent); box-shadow: 0 0 0 3px rgba(0, 162, 154,0.3); }

/* ------------------------------------------------------------
   15. Recruit（募集・タブ）
------------------------------------------------------------ */
.recruit { padding: var(--section-pad) 0; }
.recruit__roles { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 32px; }
.recruit__role { font-size: 13.5px; font-weight: 700; padding: 9px 18px; border-radius: 999px; background: var(--color-bg-blue); color: var(--color-primary); border: 1px solid var(--color-border); }

.tabs__nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.tabs__btn { font-size: 13.5px; font-weight: 700; padding: 10px 20px; border-radius: 999px; border: 1px solid var(--color-border-strong); background: #fff; color: var(--color-text-sub); cursor: pointer; transition: all .25s ease; }
.tabs__btn.is-active { background: var(--gradient-main); color: #fff; border-color: transparent; box-shadow: 0 8px 20px rgba(58,110,230,0.28); }
.tabs__panel { display: none; }
.tabs__panel.is-active { display: block; animation: fadeUp .4s ease; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px);} to { opacity: 1; transform: none;} }
.recruit__panel { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow-card); padding: clamp(26px, 3vw, 38px); }
.recruit__list { display: grid; gap: 11px; }
.recruit__list li { position: relative; padding-left: 26px; font-size: 14px; line-height: 1.8; color: var(--color-text-sub); }
.recruit__list li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 14px; height: 8px; border-left: 2px solid var(--color-primary); border-bottom: 2px solid var(--color-primary); transform: rotate(-45deg); }
.recruit__list.is-neg li::before { border: 0; left: 4px; top: 0.85em; width: 13px; height: 2px; background: rgba(17,24,39,0.3); transform: rotate(45deg); }
.recruit__list.is-neg li { color: var(--color-text-sub); }
.recruit__cta { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 36px; }

/* ------------------------------------------------------------
   16. Flow（選考）
------------------------------------------------------------ */
.flow { padding: var(--section-pad) 0; }
.flow__steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(18px, 2vw, 28px); align-items: stretch; }
.flow__step {
  position: relative; background: rgba(255,255,255,0.94); border: 1px solid rgba(229,234,242,0.82);
  border-radius: 18px; box-shadow: 0 18px 48px rgba(47, 74, 125, 0.10);
  padding: 34px 18px 26px; text-align: center; min-height: 188px;
}
.flow__step:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: calc(clamp(18px, 2vw, 28px) * -0.75); width: clamp(18px, 2vw, 28px); height: 2px; background: var(--gradient-main); z-index: 1; }
.flow__step .num { font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; background: var(--gradient-main); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.flow__step .card-ic { height: 34px; margin: 16px auto 8px; }
.flow__step h4 { font-size: 15px; font-weight: 800; margin: 8px 0 8px; }
.flow__step p { font-size: 12px; color: var(--color-text-sub); line-height: 1.8; }
.flow__notes { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: center; }
.flow__notes li { font-size: 13px; font-weight: 700; color: var(--color-text); position: relative; padding-left: 22px; }
.flow__notes li::before { content: ""; position: absolute; left: 0; top: 0.45em; width: 13px; height: 13px; border-radius: 50%; background: var(--gradient-accent); }
.flow__notes li.key { color: var(--color-secondary); }

/* ------------------------------------------------------------
   17. FAQ
------------------------------------------------------------ */
.faq { padding: var(--section-pad) 0; }
.faq__list { display: grid; gap: 13px; max-width: var(--container-narrow); margin-inline: auto; }
.faq__item { border: 1px solid var(--color-border); border-radius: 16px; background: #fff; box-shadow: var(--shadow-card); overflow: hidden; }
.faq__item[open] { box-shadow: var(--shadow-pop); }
.faq__item summary { position: relative; cursor: pointer; list-style: none; padding: 21px 60px 21px 56px; font-size: 15px; font-weight: 700; line-height: 1.7; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::before { content: "Q"; position: absolute; left: 24px; top: 19px; font-family: var(--font-display); font-weight: 800; color: var(--color-primary); }
.faq__item summary::after { content: ""; position: absolute; right: 26px; top: 50%; width: 12px; height: 12px; border-right: 2px solid var(--color-primary); border-bottom: 2px solid var(--color-primary); transform: translateY(-65%) rotate(45deg); transition: transform .35s ease; }
.faq__item[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq__item p { padding: 0 26px 22px 56px; font-size: 14px; color: var(--color-text-sub); line-height: 2; }

/* ------------------------------------------------------------
   18. Entry CTA
------------------------------------------------------------ */
.entry { position: relative; padding: var(--section-pad) 0; text-align: center; overflow: hidden; background: var(--gradient-main); color: #fff; }
.entry__bg { position: absolute; inset: 0; pointer-events: none; }
.entry__bg::before { content: ""; position: absolute; width: 60%; height: 70%; top: -10%; left: 20%; background: radial-gradient(ellipse, rgba(255,255,255,0.16), transparent 65%); filter: blur(20px); }
.entry__title { position: relative; font-size: clamp(26px, 4.4vw, 44px); font-weight: 800; line-height: 1.5; margin-bottom: 26px; }
.entry__qs { position: relative; display: grid; gap: 8px; max-width: 560px; margin: 0 auto 26px; }
.entry__qs li { font-size: 14px; font-weight: 700; color: #fff; background: rgba(255,255,255,0.14); border-radius: 12px; padding: 11px 18px; }
.entry__lead { position: relative; font-size: clamp(14px, 1.7vw, 16px); line-height: 2.1; color: rgba(255,255,255,0.92); margin-bottom: 38px; }
.entry__actions { position: relative; display: flex; justify-content: center; flex-wrap: wrap; gap: 16px; margin-bottom: 18px; }
.entry__note { position: relative; font-size: 12px; color: rgba(255,255,255,0.85); }
.entry__note .lime { color: var(--color-accent); font-weight: 700; }

/* ------------------------------------------------------------
   19. Footer
------------------------------------------------------------ */
.footer { background: #171C61; color: #9aa3c0; padding: clamp(54px, 7vw, 76px) 0 36px; }
.footer__top { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; margin-bottom: 40px; }
.footer__logo { display: inline-flex; background: rgba(255,255,255,0.06); border-radius: 11px; padding: 9px 13px; margin-bottom: 18px; }
.footer__logo img { width: auto; height: 26px; }
.footer__info { font-size: 12.5px; line-height: 2; }
.footer__nav { display: grid; grid-template-columns: repeat(2, auto); gap: 10px 40px; font-size: 13px; font-weight: 600; }
.footer__nav a { color: #b7bfd6; transition: color .3s ease; }
.footer__nav a:hover { color: #fff; }
.footer__bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.1); }
.footer__sns { display: flex; gap: 14px; }
.footer__sns a { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.08); display: grid; place-items: center; color: #b7bfd6; transition: background .3s ease; }
.footer__sns a:hover { background: rgba(255,255,255,0.16); }
.footer__copy { font-size: 11px; color: #6b7390; letter-spacing: 0.08em; }

/* ------------------------------------------------------------
   19b. 抽出素材（アイコン／人物プレースホルダー／装飾）
------------------------------------------------------------ */
/* カード内アイコン */
.card-ic { display: block; height: 42px; width: auto; }
.numbers__item .card-ic { margin: 0 auto 10px; }
.feature__num + .card-ic, .feature__card .card-ic { height: 40px; margin-bottom: 12px; }
.about__bizcard .card-ic { height: 34px; margin-bottom: 10px; }
.bmodel__source .card-ic { height: 30px; margin: 0 auto 6px; }
.bmodel__reason .card-ic { height: 34px; margin-bottom: 10px; }
.statband__card .card-ic { height: clamp(36px, 3vw, 46px); width: clamp(36px, 3vw, 46px); flex: none; object-fit: contain; margin: 0; }

/* 人物写真プレースホルダー */
.ph-person {
  position: relative; overflow: hidden;
  background: linear-gradient(150deg, #E8F0FF 0%, #F0EBFF 100%);
  border: 1px solid var(--color-border);
  display: grid; place-items: center;
}
.ph-person img { width: 44%; max-width: 80px; height: auto; opacity: 0.5; }
.ph-person::after {
  content: "PHOTO"; position: absolute; bottom: 8px; right: 12px;
  font-family: var(--font-display); font-size: 9px; letter-spacing: 0.14em; color: rgba(17,24,39,0.3);
}

/* 装飾（図形）：絶対配置・操作不可 */
.deco { position: absolute; pointer-events: none; z-index: 0; }

/* FV 人物コラージュ（透過PNG：カード形状は画像側で完成済み） */
.fv__visual {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  min-width: 0;
  z-index: 2;
}
.fv__collage {
  position: relative; z-index: 1; width: 100%; max-width: 656px;
}
.fv__collage img {
  display: block; width: 100%; height: auto;
  border-radius: 28px 28px 90px 28px;
  filter: drop-shadow(0 24px 50px rgba(47,74,125,0.20));
}

/* FV 装飾要素 */
.fv__deco { position: absolute; pointer-events: none; }
/* 背面の大きなグラデーション円（右下） */
.fv__deco-blob {
  z-index: 1; width: 70%; aspect-ratio: 1; right: -8%; bottom: -16%;
  border-radius: 50% 50% 46% 54% / 52% 48% 52% 48%;
  background: rgba(255,255,255,0.92);
  box-shadow: 0 24px 80px rgba(47,74,125,0.10);
  opacity: 1;
}
/* 左上の淡い円 */
.fv__deco-circle {
  z-index: 1; width: 130px; aspect-ratio: 1; left: -2%; top: -4%;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #DCEBFF 0%, #9FC0FF 55%, #6D8FF5 100%);
  opacity: 0.95;
}
/* 左の斜め3本線 */
.fv__deco-lines {
  z-index: 3; left: -13%; top: 20%; width: 92px; height: 70px;
  background:
    linear-gradient(125deg, transparent 0 44%, #38C6C8 44% 50%, transparent 50%),
    linear-gradient(125deg, transparent 0 64%, #3A8EF6 64% 70%, transparent 70%),
    linear-gradient(125deg, transparent 0 84%, #5B7BF5 84% 90%, transparent 90%);
}
/* 右上のドットグリッド */
.fv__deco-dots {
  z-index: 3; right: 3%; top: -2%; width: 110px; height: 86px;
  background-image: radial-gradient(rgba(255,255,255,0.95) 2.1px, transparent 2.2px);
  background-size: 16px 16px;
}
/* 下のライムアクセント */
.fv__deco-spark {
  z-index: 3; left: 8%; bottom: 4%; width: 9px; height: 9px; border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 5px rgba(0, 162, 154,0.22);
}

/* FV直下：数字パネル＋制度チップ */
.statband { position: relative; z-index: 3; margin-top: 0; padding: clamp(20px, 3vh, 36px) 0 clamp(12px, 1.8vh, 26px); background: #fff; }
.statband__lead {
  max-width: none;
  margin: 0 0 clamp(24px, 3vh, 40px);
  font-size: clamp(15px, 1.2vw, 17px);
  /* 行間を0.85倍に詰める */
  line-height: 1.7;
  font-weight: 500;
  color: var(--color-text-sub);
  text-align: justify;
  text-justify: inter-ideograph;
}

.statband__break { display: none; }

@media (min-width: 681px) {
  .statband__lead {
    text-align: center;
    text-justify: auto;
  }

  .statband__break { display: block; }
}

/* 1段目：3つの数字を1枚のパネルに */
.statpanel {
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: transparent; border: 0;
  border-radius: 0; box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  padding: clamp(10px, 1.2vw, 18px) 0;
}
.statpanel__item {
  display: flex; flex-direction: row; align-items: center; justify-content: center;
  gap: clamp(10px, 1.4vw, 20px); padding-inline: clamp(8px, 1.4vw, 22px);
}
.statpanel__item + .statpanel__item { border-left: 1px solid var(--color-border); }
.statpanel__ic { height: clamp(46px, 4.6vw, 66px); width: clamp(46px, 4.6vw, 66px); flex: none; object-fit: contain; }
.statpanel__txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; text-align: left; }
.statpanel__label { font-size: clamp(12px, 1.1vw, 15px); font-weight: 600; color: #171C61; letter-spacing: 0.02em; line-height: 1.4; }
.statpanel__sub { font-size: clamp(11.5px, 1vw, 14px); font-weight: 600; color: #171C61; letter-spacing: 0.02em; line-height: 1.4; }
.statpanel__val { font-size: clamp(34px, 3.8vw, 54px); font-weight: 800; line-height: 1.04; letter-spacing: -0.02em;
  white-space: nowrap; font-variant-numeric: tabular-nums;
  background: var(--gradient-main); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.statpanel__val em { font-style: normal; font-weight: 600; font-size: 0.42em; margin-left: 1px; -webkit-text-fill-color: transparent; }
.statpanel__val--sm { font-size: clamp(26px, 2.9vw, 42px); }
.statpanel__val--sm em { font-size: 0.5em; }

/* 2段目：制度・サポートのチップ・ループ */
.statchips {
  display: flex; align-items: center; gap: clamp(10px, 1.2vw, 16px);
  margin-top: clamp(8px, 1vw, 12px);
  background: transparent; border: 0;
  border-radius: 0; box-shadow: none;
  padding: clamp(6px, 0.8vw, 9px) 0;
}
.statchips__viewport {
  flex: 1 1 auto; min-width: 0; overflow: hidden;
  padding-inline: clamp(4px, 1.4vw, 22px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.statchips__track {
  display: inline-flex; align-items: center; white-space: nowrap; list-style: none; margin: 0; padding: 2px 0;
  width: max-content; will-change: transform; animation: statchips 30s linear infinite;
}
.statchips:hover .statchips__track { animation-play-state: paused; }
.statchips__chip {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  margin-right: clamp(10px, 1.1vw, 15px);
  font-size: clamp(12px, 1.15vw, 13.5px); font-weight: 700; color: #171C61; letter-spacing: 0.01em;
  background: #fff; border: 1px solid var(--color-border);
  border-radius: 999px; padding: 9px clamp(18px, 1.7vw, 24px);
}
.statchips__chip img { height: 17px; width: 17px; flex: none; object-fit: contain; }
@keyframes statchips { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* People：人物アバターを写真プレースホルダーに */
.people__avatar.is-photo { background: linear-gradient(150deg, #E8F0FF, #F0EBFF); overflow: hidden; }
.people__avatar.is-photo img { width: 58%; height: auto; opacity: 0.55; }

/* Entry：実績スタッツ帯（アイコン付き） */
.entry__stats {
  position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  margin-top: clamp(34px, 4vw, 48px);
  background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.25);
  border-radius: 20px; padding: 24px clamp(16px, 3vw, 32px);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.entry__stat { display: flex; flex-direction: column; align-items: center; gap: 6px; color: #fff; }
.entry__stat img { height: 30px; width: auto; filter: brightness(0) invert(1); opacity: 0.92; }
.entry__stat b { font-size: clamp(18px, 2.2vw, 24px); font-weight: 800; line-height: 1.1; }
.entry__stat span { font-size: 11px; color: rgba(255,255,255,0.85); letter-spacing: 0.04em; }

/* ------------------------------------------------------------
   20. アニメーション
------------------------------------------------------------ */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1); }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .1s; }
.reveal[data-delay="2"] { transition-delay: .2s; }
.reveal[data-delay="3"] { transition-delay: .3s; }
.reveal[data-delay="4"] { transition-delay: .4s; }
.reveal[data-delay="5"] { transition-delay: .5s; }

.load-fade { opacity: 0; transform: translateY(18px); transition: opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1); transition-delay: calc(var(--lf,1) * .14s); }
.is-loaded .load-fade { opacity: 1; transform: none; }

/* 大型見出しの文字単位アニメーション（script.js が .section-display を分割） */
.section-display { perspective: 700px; }
.section-display.is-split { opacity: 1; transform: none; }
.section-display .word { display: inline-block; white-space: nowrap; }
.section-display .char { display: inline-block; opacity: 0; will-change: transform, opacity, filter; }
.section-display.is-visible .char {
  animation: charIn .8s cubic-bezier(.34, 1.56, .64, 1) both;
  animation-delay: calc(var(--ci) * 0.045s);
}
@keyframes charIn {
  0%   { opacity: 0; transform: translateY(0.55em) rotateX(-92deg) scale(.55); filter: blur(8px); color: var(--color-accent); }
  55%  { opacity: 1; filter: blur(0); color: var(--color-primary); }
  100% { opacity: 1; transform: none; filter: blur(0); color: var(--color-text); }
}

.fv__line.is-split { opacity: 1; }
.fv__line .word { display: inline-block; white-space: nowrap; }
.fv__line .fv-char { display: inline-block; opacity: 0; will-change: transform, opacity, filter; }
.is-loaded .fv__line.is-split .fv-char {
  animation: fvCharIn .9s cubic-bezier(.34, 1.56, .64, 1) both;
  animation-delay: calc((var(--lf, 1) * .14s) + (var(--ci) * .04s));
}
@keyframes fvCharIn {
  0% { opacity: 0; transform: translateY(0.58em) rotateX(-82deg) scale(.7); filter: blur(10px); }
  58% { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: none; filter: blur(0); }
}

.reveal-clip { transition: clip-path 1.1s cubic-bezier(.22,1,.36,1), transform 1.3s cubic-bezier(.22,1,.36,1); will-change: clip-path, transform; }
.reveal-clip.clip-armed { clip-path: inset(0 0 100% 0); transform: scale(1.12); }
.reveal-clip.clip-armed.is-shown { clip-path: inset(0 0 0 0); transform: scale(1); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .load-fade { opacity: 1; transform: none; transition: none; }
  .section-display .char, .fv__line .fv-char { opacity: 1; transform: none; filter: none; animation: none; }
  .bg-stage__line, .fv::before, .fv::after { animation: none; }
  .marquee__track { animation: none; }
  /* 制度ループ：停止して折り返し表示 */
  .statchips__viewport { -webkit-mask-image: none; mask-image: none; overflow: visible; }
  .statchips__track { animation: none; flex-wrap: wrap; width: auto; }
  .statchips__chip[aria-hidden="true"] { display: none; }
  .reveal-clip, .reveal-clip.clip-armed { clip-path: none; transform: none; transition: none; }
  [data-parallax] { transform: none !important; }
  .fv__scroll-line::after { animation: none; }
}

/* ------------------------------------------------------------
   21. レスポンシブ
------------------------------------------------------------ */
@media (max-width: 1000px) {
  .fv__inner { grid-template-columns: 1fr; gap: 40px; }
  .fv__copy { padding-left: 0; }
  .fv__visual { max-width: 520px; justify-self: center; }
  .about__biz { grid-template-columns: repeat(2, 1fr); }
  .feature__grid { grid-template-columns: repeat(2, 1fr); }
  .feature__card { min-height: auto; }
  .comp__models { grid-template-columns: 1fr; }
  .comp__plans { grid-template-columns: repeat(2, 1fr); }
  .comp__incs { grid-template-columns: repeat(2, 1fr); }
  .bmodel__reasons { grid-template-columns: 1fr; }
  .career__hub { grid-template-columns: repeat(2, 1fr); }
  .culture__grid { grid-template-columns: repeat(2, 1fr); }
  .benefits__grid { grid-template-columns: repeat(2, 1fr); }
  .people__grid { grid-template-columns: 1fr; }
  .people__card { grid-template-columns: 150px 1fr; min-height: 230px; }
  .people__head { min-height: 230px; }
  .people__avatar { min-height: 230px; }
  .numbers__grid { grid-template-columns: repeat(2, 1fr); }
  .flow__steps { grid-template-columns: repeat(2, 1fr); }
  .flow__step:not(:last-child)::after { display: none; }
  .compare__grid { grid-template-columns: 1fr; }
  /* Business model 図解：縦積み */
  .bmodel__diagram { grid-template-columns: 1fr; }
  .bmodel__sources.right { order: 0; }
  .bmodel__center { margin-inline: auto; }
  .message::before { width: 520px; right: -220px; top: -120px; }
  .message__layout { grid-template-columns: 1fr; gap: 36px; }
  .message__photo { min-height: 440px; max-width: 620px; width: 100%; margin-inline: auto; order: 2; }
  .message__body { order: 1; }
  .message__promise { text-align: left; }
  .statband { margin-top: 0; padding-bottom: clamp(20px, 4vw, 34px); }
}

@media (max-width: 680px) {
  /* On phones the benefit statement needs no decorative divider. */
  .sys5-card__value::before {
    display: none;
  }

  .pc-only { display: none; }
  .sp-only { display: inline; }

  .header__menu-btn { display: flex; }
  .header__nav {
    position: fixed; inset: 0; flex-direction: column; justify-content: center; align-items: center;
    gap: 26px; font-size: 17px; background: rgba(255,255,255,0.98);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility .4s ease; z-index: -1;
  }
  .header__nav a:not(.btn) { color: var(--color-text); }
  .header__nav.is-open { opacity: 1; visibility: visible; }

  .fv { padding-top: 120px; padding-bottom: 96px; }
  .fv__title-en { font-size: clamp(44px, 13vw, 66px); top: 0.3em; opacity: 0.09; }
  .is-loaded .fv__title-en.load-fade { opacity: 0.09; }
  .fv__title-ja { font-size: clamp(28px, 7vw, 40px); }
  .fv__actions .btn { width: 100%; max-width: 340px; min-height: 52px; padding-block: 10px; justify-content: center; }
  .fv__collage { max-width: 352px; }
  .statpanel { grid-template-columns: 1fr; gap: 4px; }
  .statpanel__item { justify-content: flex-start; padding: 12px 6px; }
  .statpanel__item + .statpanel__item { border-left: 0; border-top: 1px solid var(--color-border); }
  .fv__bg::before { width: 520px; height: 520px; right: -260px; top: 32%; }
  .fv__bg::after { right: -20%; top: 18%; }
  .problem { padding-top: 78px; }
  .message { padding: 84px 0; }
  .message__quote { font-size: clamp(26px, 7.2vw, 34px); }
  .message__body p:not(.message__quote):not(.message__sign) { line-height: 2; }
  .message__photo { min-height: 330px; }
  .message__photo-shape { inset: 0; }
  .message__vertical { right: 2%; top: 14%; padding: 16px 10px; font-size: 16px; }

  .about__biz { grid-template-columns: 1fr; }
  .about__info th { width: 38%; }
  .comp__plans { grid-template-columns: 1fr; }
  .comp__incs { grid-template-columns: 1fr; }
  .career__hub { grid-template-columns: 1fr; }
  .culture__grid { grid-template-columns: 1fr; }
  .benefits__grid { grid-template-columns: 1fr; }
  .numbers__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .flow__steps { grid-template-columns: 1fr; }
  .flow__step { min-height: auto; }
  .work__item { flex-direction: column; gap: 4px; }
  .work__time { min-width: 0; }
  .footer__top { flex-direction: column; }
  .footer__bottom { flex-direction: column; align-items: flex-start; gap: 14px; }
  .statband { margin-top: 0; padding-bottom: 24px; }
  .feature__grid { grid-template-columns: 1fr; }
  .people__card { grid-template-columns: 1fr; }
  .people__head { grid-row: auto; min-height: 190px; }
  .people__avatar { min-height: 190px; }
  .people__quote,
  .people__detail { grid-column: auto; grid-row: auto; padding-left: 22px; padding-right: 22px; }
  .entry__stats { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}

/* ============================================================
   TOP page refresh: sections below the existing Header / First View
============================================================ */
:root {
  --color-bg: #F8FBFF;
  --color-text: #171C61;
  --color-text-sub: #4D5B7C;
  --color-border: rgba(47, 142, 235, 0.16);
  --radius-soft: 18px;
}

body {
  font-family: "Noto Sans JP", var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
}

.section-number {
  position: absolute;
  top: clamp(40px, 7vw, 88px);
  right: clamp(20px, 8vw, 120px);
  z-index: 0;
  font-family: "Inter", var(--font-display);
  font-size: clamp(100px, 18vw, 240px);
  font-weight: 900;
  line-height: 1;
  color: rgba(47, 142, 235, 0.06);
  letter-spacing: 0;
  pointer-events: none;
}

.problem > .container,
.about > .container,
.message > .container,
.system > .container,
.projects > .container,
.voice > .container,
.faq > .container,
.entry > .container {
  position: relative;
  z-index: 1;
}

.about,
.system,
.projects,
.voice,
.faq {
  position: relative;
  overflow: hidden;
}

.about .section-number,
.message .section-number,
.system .section-number,
.projects .section-number,
.voice .section-number,
.faq .section-number,
.entry .section-number {
  right: clamp(22px, 5.8vw, 92px);
  color: rgba(47, 142, 235, 0.055);
}

.lead {
  color: var(--color-text-sub);
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: clamp(28px, 4vw, 44px);
  font-weight: 800;
  color: var(--color-primary);
}

.text-link:hover {
  color: var(--color-secondary);
}

/* Problem */
.top-problem {
  background:
    radial-gradient(circle at 10% 20%, rgba(37, 199, 200, 0.12), transparent 28%),
    radial-gradient(circle at 92% 68%, rgba(122, 60, 255, 0.10), transparent 34%);
}

.problem-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
  margin-top: clamp(34px, 5vw, 58px);
}

.problem-card {
  position: relative;
  min-height: 250px;
  padding: clamp(26px, 3vw, 34px);
  border: 1px solid rgba(47, 142, 235, 0.14);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 20px 55px rgba(47, 74, 125, 0.08);
  overflow: hidden;
}

.problem-card::after {
  content: "";
  position: absolute;
  right: -34px;
  bottom: -34px;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: var(--gradient-soft);
}

.problem-card h3,
.system-card h3,
.project-card h3,
.voice-card h3 {
  font-size: clamp(17px, 1.7vw, 21px);
  font-weight: 800;
  line-height: 1.55;
}

.problem-card h3 {
  margin: 22px 0 12px;
}

.problem-card p,
.system-card span,
.project-card p,
.voice-card p,
.selection-flow span {
  color: var(--color-text-sub);
  font-size: 14px;
  line-height: 1.9;
}

.line-icon {
  display: inline-block;
  width: 54px;
  height: 54px;
  border: 1.5px solid rgba(47, 142, 235, 0.35);
  border-radius: 16px;
  background:
    linear-gradient(#fff, #fff) padding-box,
    var(--gradient-main) border-box;
  position: relative;
}
/* assets/elements のPNGアイコンを line-icon の枠サイズで表示（枠線・CSS描画は無効化） */
img.line-icon {
  border: 0;
  background: none;
  border-radius: 0;
  object-fit: contain;
  padding: 0;
}

.line-icon::before,
.line-icon::after {
  content: "";
  position: absolute;
  inset: 14px;
  border: 2px solid var(--color-primary);
  border-radius: 50%;
}

.line-icon--scale::after {
  inset: auto 12px 14px 12px;
  height: 16px;
  border-width: 0 0 2px 2px;
  border-radius: 0;
  transform: skewX(-20deg);
}

.line-icon--route::before {
  inset: 15px 11px;
  border-width: 0 0 2px 2px;
  border-radius: 0;
  transform: rotate(-35deg);
}

.line-icon--route::after {
  inset: auto 11px 13px auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-accent);
  border: 0;
}

.line-icon--eye::before {
  inset: 17px 10px;
  border-radius: 50% / 65%;
}

.line-icon--eye::after {
  inset: 22px;
  background: var(--color-primary);
  border: 0;
}

.line-icon--shield::before {
  inset: 11px 15px 13px;
  border-radius: 12px 12px 16px 16px;
}

.line-icon--shield::after {
  inset: 21px 19px;
  width: 16px;
  height: 10px;
  border: 0;
  border-left: 2.5px solid var(--color-primary);
  border-bottom: 2.5px solid var(--color-primary);
  border-radius: 0;
  transform: rotate(-45deg);
}

/* New Option / About */
.new-option {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(248, 251, 255, 0.96)),
    radial-gradient(circle at 85% 18%, rgba(109, 69, 245, 0.12), transparent 36%);
}

/* ============================================================
   New Option（画像準拠の再構成 / newopt-*）
============================================================ */
.newopt-top {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
  margin-bottom: clamp(28px, 4vw, 46px);
}
.newopt-right { display: flex; flex-direction: column; }
.newopt-copy .section-display { white-space: nowrap; }
.newopt-copy .section-title { margin-bottom: clamp(18px, 2vw, 26px); }
.newopt-copy .lead { margin-top: 0; }
.newopt-accent { color: var(--color-secondary); font-weight: 800; }

.newopt-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 1.6vw, 20px);
  padding-top: clamp(6px, 1.4vw, 18px);
}
.newopt-card {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--color-border);
  border-radius: 18px;
  padding: clamp(18px, 1.8vw, 26px);
}
.newopt-card__head {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 16px;
}
.newopt-card__icon {
  width: 42px; height: 42px; flex: none;
  display: grid; place-items: center;
  border-radius: 12px;
  background: #F3F6FB;
}
.newopt-card__icon img { width: 22px; height: 22px; object-fit: contain; opacity: 0.55; }
.newopt-card__head h3 {
  font-size: clamp(16px, 1.5vw, 19px); font-weight: 800; color: #697493; letter-spacing: 0.02em;
}
.newopt-card ul { display: grid; gap: 10px; }
.newopt-card li {
  position: relative; padding-left: 18px;
  font-size: clamp(13px, 1.1vw, 14.5px); font-weight: 600; color: var(--color-text-sub);
}
.newopt-card li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 6px; height: 6px; border-radius: 50%;
  background: #C7D0E0;
}
/* ポジティブ→ネガティブの転換を示す「でも…」（ポジティブ行の末尾に置く） */
.newopt-card__turn {
  font-weight: 800;
  font-style: italic;
  color: var(--color-primary);
  letter-spacing: 0.04em;
}

.newopt-bridge {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  margin: clamp(20px, 2.6vw, 32px) 0 0;
  text-align: center;
}
.newopt-bridge p { white-space: nowrap; }
.newopt-bridge__arrow {
  width: 16px; height: 16px;
  border-right: 3px solid var(--color-primary);
  border-bottom: 3px solid var(--color-primary);
  transform: rotate(45deg);
  border-radius: 2px;
}
.newopt-bridge p {
  font-size: clamp(14px, 1.3vw, 17px); font-weight: 800; color: var(--color-primary);
  letter-spacing: 0.02em;
}
/* 「もうひとつの選択肢」を強調（拡大＋グラデーション＋下線） */
.newopt-bridge__hl {
  font-size: clamp(19px, 2vw, 26px);
  font-weight: 900;
  letter-spacing: 0.01em;
  background: linear-gradient(120deg, #3A8EF6 0%, #7E3FFF 60%, #0EA98F 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  padding: 0 2px;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}

.newopt-box {
  position: relative;
  border-radius: 24px;
  padding: clamp(28px, 3.4vw, 48px) clamp(24px, 3.2vw, 52px);
  background:
    linear-gradient(135deg, rgba(126, 63, 255, 0.05), rgba(14, 229, 187, 0.05)),
    #fff;
  box-shadow: 0 24px 60px rgba(47, 74, 125, 0.10);
}
.newopt-box::before {
  content: ""; position: absolute; inset: 0;
  padding: 2px; border-radius: inherit;
  background: linear-gradient(120deg, #7E3FFF, #0EE5BB);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
.newopt-box__head {
  /* ロゴを上・タグラインを下に積む */
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: clamp(12px, 1.4vw, 18px);
  /* 白い座布団（影なし） */
  background: #fff;
  border-radius: 16px;
  padding: clamp(22px, 2.6vw, 32px) clamp(20px, 2.6vw, 34px);
  box-shadow: none;
}
/* 縦積みにしたため区切り線は不要 */
.newopt-box__divider { display: none; }
.newopt-box__brand {
  display: inline-flex; align-items: center; gap: 12px; flex: none;
  font-size: clamp(24px, 2.6vw, 34px); font-weight: 900; color: var(--color-primary);
  letter-spacing: 0.02em;
}
.newopt-box__brand img { width: clamp(132px, 13vw, 178px); height: auto; }
.newopt-box__divider {
  width: 1px; align-self: stretch; min-height: 34px;
  background: var(--color-border-strong);
}
.newopt-box__tagline {
  font-size: clamp(23px, 2.7vw, 36px); font-weight: 900; color: #171C61;
  line-height: 1.35; text-align: center; letter-spacing: 0.01em;
}
.newopt-box__tagline .newopt-hl-blue,
.newopt-box__tagline .newopt-hl-teal { font-size: 1.12em; }
.newopt-hl-blue { color: var(--color-primary); }
.newopt-hl-teal { color: var(--color-accent); }

.newopt-box__label {
  display: flex; align-items: center; gap: 16px;
  margin: clamp(24px, 3vw, 34px) 0 clamp(20px, 2.6vw, 30px);
  font-size: clamp(13px, 1.2vw, 15px); font-weight: 800; color: #171C61;
}
.newopt-box__label::before, .newopt-box__label::after {
  content: ""; height: 1px; flex: 1; background: var(--color-border);
}
.newopt-box__label span { flex: none; }

.newopt-box__grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(18px, 2vw, 26px) clamp(20px, 2vw, 36px);
  max-width: 860px; margin-inline: auto;
}
.newopt-belief {
  display: flex; align-items: flex-start; gap: 14px;
}
.newopt-belief__check {
  position: relative; flex: none;
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg, #2F8EEB, #6D45F5);
  box-shadow: 0 4px 12px rgba(47, 110, 230, 0.28);
}
.newopt-belief__check::after {
  content: ""; position: absolute;
  left: 50%; top: 46%;
  width: 10px; height: 6px;
  border-left: 2.5px solid #fff; border-bottom: 2.5px solid #fff;
  transform: translate(-50%, -50%) rotate(-45deg);
}
.newopt-belief__txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.newopt-belief__txt b {
  font-size: clamp(15px, 1.4vw, 18px); font-weight: 800; color: #171C61; line-height: 1.4;
}
.newopt-belief__txt small {
  font-size: clamp(12px, 1.05vw, 13.5px); font-weight: 500; color: var(--color-text-sub); line-height: 1.5;
}

@media (max-width: 900px) {
  .newopt-top { grid-template-columns: 1fr; gap: 28px; }
  .newopt-box__grid { grid-template-columns: 1fr; }
  .newopt-box__head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .newopt-box__divider { display: none; }
}
@media (max-width: 560px) {
  .newopt-compare { grid-template-columns: 1fr; }
}

/* ============================================================
   System（画像準拠の5カード / sys5-*）
============================================================ */
.sys5-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(16px, 1.8vw, 24px);
  margin-top: clamp(32px, 4vw, 52px);
}
.sys5-card {
  grid-column: span 2;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 20px;
  box-shadow: 0 10px 34px rgba(47, 74, 125, 0.07);
  padding: clamp(24px, 2.6vw, 38px) clamp(24px, 2.6vw, 36px) clamp(22px, 2.4vw, 32px);
}
/* PCでは上段を3等分、下段を2等分にして左右端を揃える。 */
.sys5-card:nth-child(4),
.sys5-card:nth-child(5) { grid-column: span 3; }

/* 下段はカード幅を生かしてタイトルを1行で見せる。 */
.sys5-card:nth-child(4) .sys5-card__head h3,
.sys5-card:nth-child(5) .sys5-card__head h3 { white-space: nowrap; }

.sys5-card__head {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: clamp(14px, 1.6vw, 20px);
}
.sys5-card__icon {
  width: clamp(48px, 4vw, 56px); height: clamp(48px, 4vw, 56px); flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #F1F4FB;
}
.sys5-card__icon img { width: 54%; height: 54%; object-fit: contain; }
.sys5-card__head h3 {
  font-size: clamp(15px, 1.4vw, 18px); font-weight: 800; color: #171C61; line-height: 1.4;
  letter-spacing: 0.01em;
}
.sys5-card__value {
  position: relative;
  padding-top: clamp(16px, 1.8vw, 22px);
  font-size: clamp(30px, 3.2vw, 44px); font-weight: 800; line-height: 1.1;
  letter-spacing: -0.01em;
  background: linear-gradient(96deg, #7E3FFF 0%, #2F8EEB 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.sys5-card__value small { font-size: 0.5em; font-weight: 800; -webkit-text-fill-color: transparent; }
.sys5-card__value::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 44px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, #7E3FFF, #2F8EEB, #0EE5BB);
}
.sys5-card__desc {
  margin-top: clamp(14px, 1.6vw, 20px);
  font-size: clamp(13px, 1.1vw, 14.5px); font-weight: 500; color: var(--color-text-sub); line-height: 1.75;
}

@media (max-width: 900px) {
  .sys5-grid { grid-template-columns: repeat(2, 1fr); }
  .sys5-card,
  .sys5-card:nth-child(4),
  .sys5-card:nth-child(5) { grid-column: auto; }
}
@media (max-width: 560px) {
  .sys5-grid { grid-template-columns: 1fr; }
}

.option-lead {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(28px, 5vw, 76px);
  align-items: start;
  margin-bottom: clamp(38px, 6vw, 70px);
}

.option-grid {
  display: grid;
  grid-template-columns: 0.9fr 0.9fr 1.15fr;
  align-items: stretch;
  gap: clamp(16px, 2vw, 24px);
}

.option-card {
  padding: clamp(26px, 3.2vw, 38px);
  border: 1px solid var(--color-border);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--shadow-card);
}

.option-card--main {
  position: relative;
  transform: translateY(-14px);
  background: linear-gradient(180deg, #FFFFFF, #F4FAFF);
  box-shadow: 0 24px 70px rgba(47, 74, 125, 0.16);
  overflow: hidden;
}

.option-card--main::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 2px;
  border-radius: inherit;
  background: var(--gradient-main);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.option-card__kicker {
  display: inline-flex;
  margin-bottom: 14px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--color-bg-blue);
  color: var(--color-primary);
  font-size: 12px;
  font-weight: 800;
}

.option-card--main .option-card__kicker {
  background: var(--gradient-main);
  color: #fff;
}

.option-card h3 {
  margin-bottom: 18px;
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 900;
  line-height: 1.45;
}

.option-card ul,
.declaration ul {
  display: grid;
  gap: 12px;
}

.option-card li,
.declaration li {
  position: relative;
  padding-left: 28px;
  color: var(--color-text-sub);
  font-weight: 700;
}

.option-card li::before,
.declaration li::before,
.entry__trust li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 15px;
  height: 8px;
  border-left: 2.5px solid var(--color-primary);
  border-bottom: 2.5px solid var(--color-primary);
  transform: rotate(-45deg);
}

.option-card--main li::before,
.declaration li::before,
.entry__trust li::before {
  border-color: var(--color-accent);
}

.declaration {
  margin: clamp(26px, 4vw, 44px) 0 clamp(28px, 4vw, 44px);
  padding: clamp(24px, 3vw, 34px);
  border: 1px solid var(--color-border);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--shadow-card);
}

.declaration h3 {
  margin-bottom: 18px;
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 900;
}

.declaration ul {
  grid-template-columns: repeat(4, 1fr);
  gap: 14px clamp(18px, 3vw, 34px);
}

/* Message */
.message__sign {
  margin-top: 28px;
  font-size: 14px;
  font-weight: 800;
}

.message__sign strong {
  display: inline-block;
  margin-top: 4px;
  font-size: 24px;
  color: var(--color-text);
}

.message__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  background:
    radial-gradient(circle at 50% 20%, rgba(255, 255, 255, 0.92), transparent 30%),
    linear-gradient(145deg, #E6F4FF 0%, #FFFFFF 48%, #F2F0FF 100%);
}

.message__img.is-missing {
  opacity: 0;
}

/* System */
.system {
  padding: var(--section-pad) 0;
}

.system-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.2vw, 26px);
  margin-top: clamp(34px, 5vw, 58px);
}

.system-card {
  padding: clamp(28px, 3.4vw, 42px);
  border-radius: 24px;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);
}

.system-card--blue {
  background: linear-gradient(145deg, rgba(238, 247, 255, 0.96), #fff);
}

.system-card--purple {
  background: linear-gradient(145deg, rgba(244, 240, 255, 0.96), #fff);
}

.system-card--mint {
  background: linear-gradient(145deg, rgba(235, 255, 252, 0.96), #fff);
}

.system-card h3 {
  margin: 20px 0 18px;
}

.system-card__items {
  display: grid;
  gap: 10px;
}

.system-card__items span {
  display: block;
  padding: 13px 16px;
  border: 1px solid rgba(47, 142, 235, 0.14);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.78);
  font-weight: 800;
}

/* Projects */
.projects {
  padding: var(--section-pad) 0;
  background: rgba(255, 255, 255, 0.48);
}

.projects__layout {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(30px, 5vw, 72px);
  align-items: center;
}

.projects__photo {
  min-height: 520px;
  border-radius: 28px;
  overflow: hidden;
  background:
    radial-gradient(circle at 30% 20%, rgba(0, 162, 154, 0.28), transparent 20%),
    linear-gradient(135deg, #EAF8FF, #F2F0FF);
  box-shadow: 0 24px 70px rgba(47, 74, 125, 0.13);
}

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

.projects__photo img.is-missing {
  opacity: 0;
}

.project-cards {
  display: grid;
  gap: 14px;
  margin-top: 28px;
}

.project-card {
  padding: 20px 22px;
  border: 1px solid var(--color-border);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--shadow-card);
}

.project-card p {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.project-card span {
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--color-bg-blue);
  color: var(--color-primary);
  font-size: 12px;
  font-weight: 800;
}

.project-flow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: clamp(36px, 5vw, 60px);
}

.project-flow li {
  position: relative;
  padding: 24px 20px;
  border: 1px solid var(--color-border);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--shadow-card);
}

.project-flow b {
  display: block;
  font-family: "Inter", var(--font-display);
  font-size: 13px;
  background: var(--gradient-main);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.project-flow span {
  display: block;
  margin: 8px 0 6px;
  font-weight: 900;
}

.project-flow small {
  display: block;
  color: var(--color-text-sub);
  line-height: 1.8;
}

/* Voice */
.voice {
  padding: var(--section-pad) 0;
}

.voice-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.4vw, 30px);
}

.voice-card {
  position: relative;
  padding: 16px 16px 28px;
  border: 1px solid var(--color-border);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 18px 50px rgba(47, 74, 125, 0.08);
  transition: transform .35s ease, box-shadow .35s ease;
}

.voice-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 26px 70px rgba(47, 74, 125, 0.15);
}

.voice-card img {
  width: 100%;
  aspect-ratio: 16 / 11;
  object-fit: cover;
  border-radius: 16px;
  background: linear-gradient(135deg, #EAF8FF, #F2F0FF);
}

.voice-card img.is-missing {
  opacity: 0;
}

.voice-card span {
  display: inline-block;
  margin: 22px 0 10px;
  font-family: "Inter", var(--font-display);
  font-weight: 900;
  color: var(--color-primary);
}

.voice-card p {
  margin: 12px 0 18px;
}

.voice-card small {
  display: inline-flex;
  padding: 6px 13px;
  border-radius: 999px;
  background: var(--color-bg-purple);
  color: var(--color-secondary);
  font-weight: 800;
}

/* FAQ */
.faq-layout {
  display: grid;
  grid-template-columns: 0.88fr 1.12fr;
  gap: clamp(26px, 4vw, 56px);
  align-items: start;
}

.faq-split .faq__list {
  max-width: none;
  width: 100%;
  margin-inline: 0;
}

.selection-flow {
  padding: clamp(24px, 3vw, 34px);
  border: 1px solid var(--color-border);
  border-radius: 22px;
  background: linear-gradient(145deg, #FFFFFF, #EEF7FF);
  box-shadow: var(--shadow-card);
}

.selection-flow h3 {
  margin-bottom: 20px;
  font-size: 21px;
  font-weight: 900;
}

.selection-flow ol {
  display: grid;
  gap: 16px;
}

.selection-flow li {
  position: relative;
  padding-left: 20px;
  border-left: 2px solid rgba(47, 142, 235, 0.2);
}

.selection-flow b,
.selection-flow span {
  display: block;
}

.selection-flow b {
  margin-bottom: 2px;
}

.faq__item summary::after {
  content: "+";
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: #fff;
  transform: translateY(-50%);
  color: var(--color-primary);
  font-weight: 900;
}

.faq__item[open] summary::after {
  content: "-";
  transform: translateY(-50%);
}

/* CTA / Footer */
.entry__layout {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(24px, 5vw, 70px);
  align-items: center;
  text-align: left;
}

.entry__layout .entry__actions {
  margin: 0;
  justify-content: flex-end;
}

.entry__trust {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}

.entry__trust li {
  position: relative;
  padding: 10px 18px 10px 42px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-weight: 800;
}

.entry__trust li::before {
  left: 18px;
  border-color: var(--color-accent);
}

.footer__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  color: #fff;
  font-size: 24px;
  font-weight: 900;
}

.footer__brand .header__mark {
  width: 32px;
  height: 32px;
}

/* Image fallbacks */
.message__photo-shape,
.projects__photo,
.voice-card {
  position: relative;
}

.message__photo-shape::after,
.projects__photo::after,
.voice-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.message__photo-shape:has(.is-missing)::after {
  background:
    url("assets/img/icon-person.png") center / 28% auto no-repeat,
    linear-gradient(145deg, #E6F4FF 0%, #FFFFFF 48%, #F2F0FF 100%);
}

.projects__photo:has(.is-missing)::after {
  background:
    url("assets/img/icon-people.png") center / 24% auto no-repeat,
    linear-gradient(135deg, #EAF8FF, #F2F0FF);
  opacity: 0.7;
}

.voice-card:has(.is-missing)::after {
  inset: 16px 16px auto;
  aspect-ratio: 16 / 11;
  border-radius: 16px;
  background:
    url("assets/img/icon-person.png") center / 20% auto no-repeat,
    linear-gradient(135deg, #EAF8FF, #F2F0FF);
  opacity: 0.75;
}

@media (max-width: 1000px) {
  .problem-cards,
  .system-grid,
  .voice-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .option-lead,
  .projects__layout,
  .faq-layout,
  .entry__layout {
    grid-template-columns: 1fr;
  }

  .option-grid {
    grid-template-columns: 1fr;
  }

  .option-card--main {
    transform: none;
  }

  .declaration ul,
  .project-flow {
    grid-template-columns: repeat(2, 1fr);
  }

  .projects__photo {
    min-height: 380px;
  }

  .entry__layout,
  .entry__layout .entry__actions {
    text-align: center;
    justify-content: center;
  }

  .entry__trust {
    justify-content: center;
  }
}

@media (min-width: 1001px) {
  .system-grid {
    gap: 24px;
  }
}

/* Final mobile overflow protection — keep this at the end of the file. */
@media (max-width: 680px) {
  .fv__inner {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .fv__copy,
  .fv__sub,
  .fv__read {
    width: calc(100vw - 40px) !important;
    min-width: 0;
    max-width: calc(100vw - 40px) !important;
  }

  .fv__sub,
  .fv__read,
  main h1,
  main h2,
  main h3,
  main p,
  main li {
    max-width: 100%;
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .fv__title-en {
    max-width: 100%;
    font-size: clamp(38px, 11.5vw, 46px) !important;
    letter-spacing: -0.02em;
  }

  .system-card--blue .system-card__items em,
  .system-choice li i {
    white-space: normal !important;
  }
}

/* Smartphone final safeguards */
@media (max-width: 680px) {
  .fv__inner {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .fv__copy,
  .fv__sub,
  .fv__read {
    width: calc(100vw - 40px);
    min-width: 0;
    max-width: calc(100vw - 40px);
  }

  .fv__sub,
  .fv__read,
  main h1,
  main h2,
  main h3,
  main p,
  main li {
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .fv__title-en {
    max-width: 100%;
    font-size: clamp(38px, 11.5vw, 46px) !important;
    letter-spacing: -0.02em;
  }

  .system-card--blue .system-card__items em,
  .system-choice li i {
    white-space: normal;
  }
}

/* Projects: spacing between the project cards and participation flow */
.project-flow {
  margin-top: clamp(32px, 4.2vw, 52px);
  padding-top: clamp(28px, 3vw, 36px);
  padding-bottom: clamp(28px, 3vw, 36px);
}

/* Final spacing adjustments */
.statchips {
  margin-top: 0;
}

@media (min-width: 1001px) {
  .system-grid {
    gap: 24px;
  }
}

.system-choice,
.system-choice li,
.system-choice li span,
.system-choice li i {
  color: var(--color-text);
  -webkit-text-fill-color: currentColor;
}

@media (max-width: 680px) {
  .problem-cards,
  .system-grid,
  .voice-grid,
  .declaration ul,
  .project-flow {
    grid-template-columns: 1fr;
  }

  .problem-card {
    min-height: auto;
  }

  .projects__photo {
    min-height: 280px;
  }

  .entry__trust {
    flex-direction: column;
    align-items: stretch;
  }

  .entry__trust li {
    border-radius: 14px;
  }
}

/* ============================================================
   Final CTA / Footer inspired by the provided visual
============================================================ */
.entry {
  min-height: 0;
  padding: clamp(64px, 5.8vw, 88px) 0 clamp(50px, 4.8vw, 70px);
  background:
    radial-gradient(circle at 100% 43%, rgba(255, 255, 255, 0.18) 0 0, transparent 0),
    linear-gradient(118deg, #7E3FFF 0%, #0EE5BB 100%);
  color: #fff;
  text-align: left;
}

.entry::before {
  content: "";
  position: absolute;
  left: -110px;
  bottom: -130px;
  width: clamp(240px, 24vw, 360px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.24);
}

.entry::after {
  content: "";
  position: absolute;
  right: -140px;
  top: 78px;
  width: clamp(260px, 25vw, 420px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.13);
}

.entry__bg::before {
  width: 88px;
  height: 88px;
  top: 58px;
  left: 36%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 25%, rgba(255,255,255,.9), rgba(0, 162, 154,.22) 38%, rgba(122,60,255,.2) 72%);
  filter: none;
}

.entry__bg::after {
  content: "";
  position: absolute;
  right: 11%;
  top: 34px;
  width: 120px;
  height: 90px;
  background-image: radial-gradient(rgba(255,255,255,.58) 3px, transparent 3.5px);
  background-size: 21px 21px;
}

.entry__layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 520px);
  column-gap: clamp(44px, 8vw, 120px);
  row-gap: clamp(24px, 3vw, 38px);
  align-items: center;
  text-align: left;
}

.entry__layout > div:first-child {
  position: relative;
}

.entry__layout > div:first-child::before,
.entry__actions::before,
.entry__actions::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.entry__layout > div:first-child::before {
  left: 42%;
  bottom: -76px;
  width: 120px;
  height: 82px;
  background:
    linear-gradient(132deg, transparent 0 41%, rgba(255,255,255,.82) 42% 44%, transparent 45%),
    linear-gradient(132deg, transparent 0 56%, rgba(255,255,255,.82) 57% 59%, transparent 60%),
    linear-gradient(132deg, transparent 0 70%, rgba(255,255,255,.82) 71% 73%, transparent 74%);
  opacity: .9;
}

.entry__number {
  position: absolute;
  left: -76px;
  top: -56px;
  font-family: "Inter", var(--font-display);
  font-size: clamp(96px, 11vw, 170px);
  font-weight: 900;
  line-height: 1;
  color: rgba(255, 255, 255, 0.24);
  letter-spacing: 0;
}

.entry__title {
  font-family: "Inter", "Noto Sans JP", var(--font-display);
  font-size: clamp(28px, 2.8vw, 42px);
  font-weight: 900;
  line-height: 1.45;
  letter-spacing: .04em;
  margin: 0 0 clamp(20px, 2.4vw, 30px);
}

.entry__title::before {
  content: "Let's Talk";
  display: block;
  font-family: "Inter", var(--font-display);
  font-size: clamp(68px, 7vw, 112px);
  line-height: .95;
  letter-spacing: 0;
  margin-bottom: clamp(16px, 1.8vw, 24px);
}

.entry__lead {
  max-width: 650px;
  margin: 0;
  color: rgba(255, 255, 255, 0.95);
  font-size: clamp(15px, 1.25vw, 20px);
  font-weight: 800;
  line-height: 1.9;
}

.entry__actions {
  position: relative;
  display: grid;
  gap: 24px;
  margin: 0;
  justify-content: stretch;
}

.entry__actions::before {
  left: -92px;
  top: -92px;
  width: 120px;
  height: 150px;
  background:
    linear-gradient(135deg, transparent 0 46%, rgba(255,255,255,.9) 47% 48%, transparent 49%),
    linear-gradient(135deg, transparent 0 66%, rgba(255,255,255,.9) 67% 68%, transparent 69%);
  opacity: .85;
}

.entry__actions::after {
  right: -76px;
  top: -60px;
  width: 170px;
  height: 74px;
  border-top: 2px solid var(--color-accent);
  border-radius: 0 100% 0 0;
  transform: rotate(-18deg);
}

.entry__actions .btn {
  width: 100%;
  min-height: 78px;
  border-radius: 22px;
  justify-content: space-between;
  padding: 0 clamp(30px, 4vw, 52px);
  font-size: clamp(18px, 1.65vw, 26px);
  font-weight: 900;
  letter-spacing: .08em;
}

.entry__actions .btn::after {
  content: "→";
  font-size: 1.45em;
  line-height: 1;
  transition: transform .3s ease;
}

.entry__actions .btn:hover::after {
  transform: translateX(8px);
}

.entry__actions .btn--white {
  background: var(--color-accent);
  color: #171C61;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.12);
}

.entry__actions .btn--ghost-white {
  background: rgba(255,255,255,0.03);
  border: 2px solid rgba(255,255,255,.86);
  color: #fff;
}

.entry__trust {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  margin-top: clamp(12px, 1.8vw, 24px);
}

.entry__trust li {
  min-height: 54px;
  display: inline-flex;
  align-items: center;
  position: relative;
  padding: 0 clamp(24px, 3vw, 46px) 0 clamp(58px, 4.4vw, 76px);
  border: 0;
  border-right: 1px solid rgba(255,255,255,.38);
  border-radius: 0;
  background: transparent;
  color: #fff;
  font-size: clamp(13px, 1.05vw, 16px);
  font-weight: 800;
}

.entry__trust li:last-child {
  border-right: 0;
}

.entry__trust li::before {
  left: clamp(16px, 2vw, 28px);
  top: 50%;
  width: 42px;
  height: 42px;
  border: 2px solid currentColor;
  border-radius: 50%;
  transform: translateY(-50%);
  background: transparent;
}

.entry__trust li::after {
  content: "";
  position: absolute;
  left: calc(clamp(16px, 2vw, 28px) + 13px);
  top: calc(50% - 1px);
  width: 15px;
  height: 8px;
  border-left: 2px solid var(--color-accent);
  border-bottom: 2px solid var(--color-accent);
  transform: translateY(-50%) rotate(-45deg);
}

.entry__trust li:nth-child(2)::before,
.entry__trust li:nth-child(3)::before {
  border-radius: 8px;
  border-color: rgba(255,255,255,.9);
}

.entry__trust li:nth-child(2)::after {
  left: calc(clamp(16px, 2vw, 28px) + 10px);
  top: 50%;
  width: 22px;
  height: 18px;
  border: 2px solid rgba(255,255,255,.9);
  border-top-width: 7px;
  border-radius: 2px;
  transform: translateY(-50%);
}

.entry__trust li:nth-child(3)::after {
  left: calc(clamp(16px, 2vw, 28px) + 13px);
  top: 50%;
  width: 16px;
  height: 14px;
  border: 2px solid rgba(255,255,255,.9);
  border-radius: 3px;
  transform: translateY(-30%);
}

/* Footer */
.footer {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 95% 72%, rgba(47,142,235,.08), transparent 8%),
    linear-gradient(180deg, #FFFFFF 0%, #FBFDFF 100%);
  color: var(--color-text);
  padding: clamp(54px, 6vw, 86px) 0 34px;
}

.footer::before,
.footer::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.footer::before {
  left: -24px;
  bottom: 26px;
  width: 88px;
  height: 88px;
  background-image: radial-gradient(rgba(47,142,235,.18) 2px, transparent 2.5px);
  background-size: 12px 12px;
}

.footer::after {
  right: 42px;
  top: 54px;
  width: 70px;
  height: 90px;
  background-image: radial-gradient(rgba(47,142,235,.12) 2.2px, transparent 2.8px);
  background-size: 16px 16px;
}

.footer__top {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(300px, 430px) 1fr;
  gap: clamp(48px, 7vw, 110px);
  margin-bottom: 48px;
}

.footer__profile {
  min-width: 0;
}

.footer__brand {
  display: inline-grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "icon name" "icon sub";
  align-items: center;
  gap: 0 16px;
  margin-bottom: 22px;
  color: var(--color-primary);
  font-size: clamp(42px, 4.2vw, 64px);
  font-weight: 900;
  line-height: 1;
}

.footer__brand .header__mark {
  grid-area: icon;
  width: clamp(72px, 5.2vw, 92px);
  height: clamp(72px, 5.2vw, 92px);
}

.footer__subbrand {
  margin: -20px 0 24px clamp(88px, 6vw, 112px);
  font-family: "Inter", var(--font-display);
  color: var(--color-secondary);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .06em;
}

.footer__info {
  margin-bottom: 28px;
  color: var(--color-text);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.9;
}

.footer__sns {
  display: flex;
  gap: 16px;
}

.footer__sns a {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(8, 21, 71, 0.14);
  background: #fff;
  display: grid;
  place-items: center;
  color: #526083;
  box-shadow: 0 10px 25px rgba(47, 74, 125, 0.08);
  transition: transform .25s ease, color .25s ease, box-shadow .25s ease;
}

.footer__sns a:hover {
  transform: translateY(-3px);
  color: var(--color-primary);
  box-shadow: 0 16px 35px rgba(47, 74, 125, 0.14);
}

.footer__sns svg {
  width: 21px;
  height: 21px;
  fill: currentColor;
}

.footer__sns-label {
  display: block;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
}

.footer__columns {
  display: grid;
  grid-template-columns: repeat(4, minmax(130px, 1fr));
  gap: clamp(24px, 3.5vw, 54px);
}

.footer__nav {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  align-content: start;
  gap: 13px;
  padding-left: clamp(26px, 4vw, 44px);
  border-left: 1px solid rgba(8, 21, 71, 0.14);
  font-size: 15px;
  font-weight: 800;
}

.footer__nav h2 {
  margin-bottom: 8px;
  color: var(--color-primary);
  font-size: 17px;
  font-weight: 900;
  letter-spacing: .08em;
}

.footer__nav a {
  color: var(--color-text);
  transition: color .25s ease, transform .25s ease;
}

.footer__nav a:hover {
  color: var(--color-primary);
  transform: translateX(4px);
}

.footer__bottom {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-top: 28px;
  border-top: 1px solid rgba(8, 21, 71, 0.12);
}

.footer__copy,
.footer__address {
  color: #697493;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
}

@media (max-width: 1000px) {
  .entry__layout {
    grid-template-columns: 1fr;
    gap: 38px;
  }

  .entry__actions {
    max-width: 620px;
    width: 100%;
    margin-inline: auto;
  }

  .entry__trust {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .entry__trust li {
    border-right: 0;
  }

  .footer__top {
    grid-template-columns: 1fr;
  }

  .footer__columns {
    grid-template-columns: repeat(2, minmax(180px, 1fr));
  }
}

@media (max-width: 680px) {
  .entry {
    min-height: auto;
    padding-top: 92px;
  }

  .entry__number {
    left: 0;
    top: -70px;
  }

  .entry__title {
    font-size: clamp(42px, 15vw, 58px);
  }

  .entry__actions .btn {
    min-height: 72px;
    border-radius: 18px;
    padding: 0 24px;
    font-size: 17px;
  }

  .entry__trust {
    display: grid;
    gap: 10px;
  }

  .entry__trust li {
    min-height: 50px;
    padding-right: 16px;
  }

  .footer__columns {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .footer__nav {
    padding-left: 22px;
  }

  .footer__brand {
    font-size: 42px;
  }

  .footer__brand .header__mark {
    width: 62px;
    height: 62px;
  }

  .footer__subbrand {
    margin-left: 78px;
  }
}

/* ============================================================
   Let’s Talk aligned with sections 02-08
============================================================ */
.entry {
  min-height: auto;
  padding: var(--section-pad) 0;
  background:
    radial-gradient(circle at 12% 20%, rgba(14, 229, 187, 0.11), transparent 28%),
    radial-gradient(circle at 88% 18%, rgba(126, 63, 255, 0.11), transparent 34%),
    rgba(255, 255, 255, 0.48);
  color: var(--color-text);
  text-align: left;
}

.entry::before,
.entry::after,
.entry__bg::before,
.entry__bg::after,
.entry__number {
  display: none;
}

.entry__bg {
  display: block;
  background-image:
    radial-gradient(rgba(255, 255, 255, 0.11) 1.6px, transparent 1.6px),
    radial-gradient(ellipse 50% 60% at 90% 15%, rgba(255, 255, 255, 0.14), transparent 60%),
    radial-gradient(ellipse 45% 55% at 8% 90%, rgba(126, 63, 255, 0.18), transparent 62%);
  background-size: 26px 26px, 100% 100%, 100% 100%;
  background-repeat: repeat, no-repeat, no-repeat;
  opacity: 0.9;
}

.entry__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
  column-gap: clamp(28px, 5vw, 72px);
  row-gap: clamp(26px, 3vw, 38px);
  align-items: center;
  padding: clamp(28px, 4vw, 48px);
  border: 1px solid var(--color-border);
  border-radius: 28px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(248,251,255,.9)),
    radial-gradient(circle at 100% 0%, rgba(47,142,235,.12), transparent 30%);
  box-shadow: 0 22px 64px rgba(47, 74, 125, 0.10);
}

.entry__layout > div:first-child::before,
.entry__actions::before,
.entry__actions::after {
  display: none;
}

.entry .section-title {
  font-size: clamp(30px, 3.6vw, 40px);
  margin-bottom: 18px;
}

.entry__lead {
  max-width: 680px;
  margin: 0;
  color: var(--color-text-sub);
  font-size: clamp(14px, 1.35vw, 17px);
  font-weight: 700;
  line-height: 2;
}

.entry__actions {
  display: grid;
  gap: 14px;
  margin: 0;
  justify-content: stretch;
}

.entry__actions .btn {
  min-height: 64px;
  width: 100%;
  justify-content: space-between;
  border-radius: 999px;
  padding: 0 clamp(24px, 3vw, 34px);
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .06em;
}

.entry__actions .btn::after {
  content: "→";
  font-size: 1.25em;
  transition: transform .3s ease;
}

.entry__actions .btn:hover::after {
  transform: translateX(5px);
}

.entry__actions .btn--white {
  background: #fff;
  color: #171C61;
  box-shadow: 0 18px 44px rgba(10, 20, 45, 0.30);
}

.entry__actions .btn--ghost-white {
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  color: #fff;
  box-shadow: none;
}

.entry__trust {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 10px 14px;
  margin-top: 0;
  padding-top: clamp(18px, 2.4vw, 28px);
  border-top: 1px solid rgba(47, 142, 235, 0.13);
}

.entry__trust li {
  min-height: auto;
  display: inline-flex;
  align-items: center;
  position: relative;
  padding: 8px 16px 8px 38px;
  border: 1px solid rgba(47, 142, 235, 0.14);
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  color: var(--color-text-sub);
  font-size: 13px;
  font-weight: 800;
}

.entry__trust li::before {
  left: 15px;
  top: 50%;
  width: 14px;
  height: 8px;
  border: 0;
  border-left: 2.5px solid var(--color-primary);
  border-bottom: 2.5px solid var(--color-primary);
  border-radius: 0;
  transform: translateY(-68%) rotate(-45deg);
  background: transparent;
}

.entry__trust li::after {
  display: none;
}

@media (max-width: 1000px) {
  .entry__layout {
    grid-template-columns: 1fr;
  }

  .entry__actions {
    max-width: none;
  }
}

@media (max-width: 680px) {
  .entry {
    padding: var(--section-pad) 0;
  }

  .entry__layout {
    padding: 24px 18px;
    border-radius: 22px;
  }

  .entry__actions .btn {
    min-height: 58px;
    font-size: 14px;
  }

  .entry__trust {
    display: grid;
  }

  .entry__trust li {
    border-radius: 14px;
  }
}

/* ============================================================
   Dark footer finish
============================================================ */
.footer {
  background:
    radial-gradient(circle at 88% 18%, rgba(126, 63, 255, 0.22), transparent 34%),
    radial-gradient(circle at 12% 82%, rgba(14, 229, 187, 0.14), transparent 30%),
    #171C61;
  color: rgba(255, 255, 255, 0.78);
}

.footer::before {
  background-image: radial-gradient(rgba(255,255,255,.16) 2px, transparent 2.5px);
}

.footer::after {
  background-image: radial-gradient(rgba(0, 162, 154,.20) 2.2px, transparent 2.8px);
}

.footer__brand {
  display: inline-flex;
  align-items: center;
  margin-bottom: 24px;
  color: #fff;
}

.footer__brand img {
  width: min(300px, 64vw);
  height: auto;
  display: block;
}

.footer__info {
  color: rgba(255, 255, 255, 0.88);
}

.footer__sns a {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.82);
  box-shadow: none;
}

.footer__sns a:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 16px 35px rgba(0, 0, 0, 0.16);
}

.footer__nav {
  border-left-color: rgba(255, 255, 255, 0.16);
}

.footer__nav h2 {
  color: #2ED9C6;
  white-space: nowrap;
}

.footer__nav a {
  color: rgba(255, 255, 255, 0.82);
}

.footer__nav a:hover {
  color: #fff;
}

.footer__bottom {
  border-top-color: rgba(255, 255, 255, 0.16);
}

.footer__copy,
.footer__address {
  color: rgba(255, 255, 255, 0.58);
}

@media (max-width: 680px) {
  .footer__brand img {
    width: min(250px, 72vw);
  }

  .footer__sns {
    margin-top: 18px;
  }
}

/* ============================================================
   First view sizing refinement
============================================================ */
@media (min-width: 1001px) {
  .fv {
    padding-top: clamp(86px, 7.8vh, 102px);
  }

  .fv__inner {
    max-width: 1220px;
    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
    gap: clamp(16px, 2.4vw, 40px);
    padding-inline: 40px;
  }

  .fv__copy {
    padding-left: 0;
    max-width: 520px;
    transform: translateY(-18px);
  }

  .fv__title-en {
    font-size: clamp(66px, 6.6vw, 116px);
    line-height: .96;
    font-weight: 300;
    letter-spacing: -0.01em;
    margin: 0;
  }

  .is-loaded .fv__title-en.load-fade {
    opacity: 0.14;
    transform: translateY(8%);
  }

  .fv__title-en span {
    display: inline-block;
    white-space: nowrap;
  }

  .fv__title-ja {
    font-size: clamp(32px, 3vw, 44px);
    line-height: 1.32;
    letter-spacing: .01em;
    margin-bottom: clamp(24px, 2.4vw, 34px);
  }

  .fv__title-ja span {
    display: inline-block;
    white-space: nowrap;
  }

  .fv__sub {
    font-size: clamp(17px, 1.5vw, 21px);
    line-height: 1.9;
    margin-bottom: clamp(28px, 3vw, 42px);
    white-space: nowrap;
  }

  .fv__sub > span:last-child {
    display: block;
    white-space: nowrap;
  }

  .fv__actions {
    gap: 16px;
    flex-wrap: nowrap;
  }

  .fv__actions .btn--lg {
    min-width: 280px;
    min-height: 52px;
    padding: 10px 44px;
    font-size: 16px;
    line-height: 1.25;
    white-space: nowrap;
  }

  .fv__more {
    margin-top: 22px;
    font-size: 16px;
  }

  .fv__visual {
    justify-content: flex-end;
    transform: translateX(0);
  }

  .is-loaded .fv__visual.load-fade {
    transform: translateX(0);
  }

  .fv__collage {
    max-width: none;
    width: min(36vw, 560px);
    flex: 0 0 min(36vw, 560px);
  }

  .fv__deco-blob {
    width: 74%;
    right: -3%;
    bottom: -12%;
  }

  .fv__deco-circle {
    width: 150px;
    left: 4%;
    top: -3%;
  }

  .fv__deco-lines {
    left: -2%;
    top: 18%;
    transform: scale(1.12);
  }

  .fv__deco-dots {
    right: 4%;
    top: -1%;
    width: 126px;
    height: 104px;
  }

  .statband .container {
    max-width: 1220px;
  }
}

@media (min-width: 1280px) and (max-height: 860px) {
  .fv__title-en {
    font-size: clamp(62px, 5.6vw, 104px);
    margin: 0;
  }

  .fv__title-ja {
    font-size: clamp(34px, 2.8vw, 46px);
    margin-bottom: 20px;
  }

  .fv__sub {
    font-size: clamp(17px, 1.4vw, 21px);
    margin-bottom: 20px;
  }

  .fv__collage {
    width: min(37vw, 596px);
    flex-basis: min(37vw, 596px);
  }
}

@media (max-width: 1000px) {
  .fv__title-ja span {
    display: inline;
    white-space: normal;
  }
}

/* ============================================================
   Sections 03-09 visual alignment
============================================================ */
.problem,
.about,
.message,
.system,
.projects,
.voice,
.faq {
  min-height: 900px;
  padding: clamp(86px, 8vw, 132px) 0;
  background:
    radial-gradient(circle at 100% 100%, rgba(47,142,235,.06), transparent 34%),
    #fff;
}

.problem .container,
.about .container,
.message .container,
.system .container,
.projects .container,
.voice .container,
.faq .container {
  max-width: 1220px;
}

.problem .section-number,
.about .section-number,
.message .section-number,
.system .section-number,
.projects .section-number,
.voice .section-number,
.faq .section-number {
  top: clamp(34px, 4.8vw, 72px);
  right: clamp(44px, 5.8vw, 92px);
  font-size: clamp(128px, 13vw, 210px);
  color: rgba(8, 21, 71, .045);
}

.problem .eyebrow,
.about .eyebrow,
.message .eyebrow,
.system .eyebrow,
.projects .eyebrow,
.voice .eyebrow,
.faq .eyebrow {
  display: none;
}

.problem .section-display,
.about .section-display,
.message .section-display,
.system .section-display,
.projects .section-display,
.voice .section-display,
.faq .section-display {
  font-size: clamp(72px, 7.6vw, 120px);
  line-height: .95;
  font-weight: 800;
  letter-spacing: -0.035em;
  color: #030303;
  background: none;
  -webkit-text-fill-color: currentColor;
  margin: 0 0 clamp(32px, 4vw, 58px);
}

.problem .section-title,
.about .section-title,
.message .message__quote,
.system .section-title,
.projects .section-title,
.voice .section-title,
.faq .section-title {
  font-size: clamp(30px, 3.2vw, 48px);
  line-height: 1.58;
  letter-spacing: .04em;
  color: var(--color-text);
}

.problem .lead,
.about .lead,
.system .lead,
.projects .lead,
.voice .lead,
.faq .lead,
.message__body p:not(.message__quote):not(.message__sign) {
  max-width: 560px;
  font-size: clamp(15px, 1.22vw, 18px);
  line-height: 2.35;
  letter-spacing: .08em;
  font-weight: 700;
  color: #111a3d;
}

.section-display::after,
.section-title::after,
.message__quote::after,
.voice .section-title::after,
.faq .section-title::after {
  content: "";
  display: block;
  width: 74px;
  height: 3px;
  margin-top: clamp(20px, 2.2vw, 34px);
  background: linear-gradient(90deg, #7E3FFF 0%, #0EE5BB 100%);
  border-radius: 999px;
}

/* 03 Problem */
.top-problem {
  background: #fff;
}

.problem .container {
  display: grid;
  grid-template-columns: minmax(400px, .92fr) minmax(470px, 1fr);
  column-gap: clamp(40px, 5vw, 84px);
  align-items: center;
}

.problem .section-display,
.problem .section-title,
.problem .lead {
  grid-column: 1;
}

.problem .section-title {
  margin-bottom: clamp(28px, 4vw, 48px);
  font-size: clamp(22px, 2.3vw, 32px);
  letter-spacing: 0;
  text-wrap: balance;
}
/* タイトル直下のグラデーション帯を非表示 */
.problem .section-title::after {
  display: none;
}

.problem .lead {
  white-space: pre-line;
}

.problem-cards {
  grid-column: 2;
  grid-row: 1 / span 4;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 2.6vw, 36px);
  margin: clamp(88px, 8vw, 128px) 0 0;
}

.problem-card {
  min-height: 200px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: clamp(22px, 2.4vw, 34px);
  border-radius: 16px;
  border-color: rgba(47,142,235,.14);
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 18px 42px rgba(47,74,125,.08);
}

.problem-card::after,
.problem-card p {
  display: none;
}

.problem-card .line-icon {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(47,142,235,.08), rgba(109,69,245,.05) 66%, transparent 67%),
    #fff;
  box-shadow: none;
}

/* Problemカードのイラスト（4枚を同じ高さの枠に収める） */
.problem-card__img {
  display: block;
  width: 100%;
  height: clamp(92px, 8vw, 116px);
  object-fit: contain;
  margin: 0 auto;
}

.problem-card h3 {
  margin: 12px 0 0;
  font-size: clamp(18px, 1.55vw, 24px);
}

.system-card h3::after {
  content: "";
  display: block;
  width: 58px;
  height: 3px;
  margin: 18px auto 0;
  background: linear-gradient(90deg, #7E3FFF 0%, #0EE5BB 100%);
  border-radius: 999px;
}

/* 各セクション タイトル直下のバー（グラデ／ティール帯）を非表示 */
.projects .section-title::after,
.about .section-title::after,
.system .section-title::after,
.voice .section-title::after,
.message__quote::after {
  display: none;
}

/* 04 New Option */
.new-option {
  background: #fff;
}

.new-option .container {
  display: grid;
  grid-template-columns: minmax(390px, .78fr) minmax(660px, 1.22fr);
  column-gap: clamp(46px, 5vw, 84px);
  align-items: center;
}

.new-option .section-display {
  grid-column: 1 / -1;
  margin-bottom: clamp(34px, 3.8vw, 54px);
}

.option-lead {
  grid-column: 1;
  display: block;
  margin: 0;
}

.option-title {
  grid-column: 1 / -1;
  margin-bottom: 22px;
  white-space: nowrap;
}

.option-lead .lead {
  max-width: 480px;
}

.declaration {
  grid-column: 1;
  margin: clamp(28px, 3.2vw, 42px) 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.declaration h3 {
  display: none;
}

.declaration ul {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.declaration li {
  min-height: 88px;
  display: flex;
  align-items: center;
  padding: 18px 18px 18px 64px;
  border: 1px solid rgba(47,142,235,.14);
  border-radius: 10px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 12px 30px rgba(47,74,125,.07);
  color: var(--color-text);
}

.declaration li::before {
  left: 30px;
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
  border-color: #00A29A;
}

.new-option > .container > .btn {
  grid-column: 1;
  justify-self: start;
  margin-top: 24px;
}

.option-grid {
  grid-column: 2;
  grid-row: 3 / span 4;
  display: grid;
  grid-template-columns: .92fr .92fr 1.25fr;
  gap: 20px;
  align-items: stretch;
  margin: clamp(40px, 5vw, 74px) 0 0;
}

.option-card {
  position: relative;
  min-height: 430px;
  padding: clamp(34px, 3vw, 46px) 28px;
  border-radius: 14px;
  text-align: center;
}

.option-card::after {
  content: none;
  display: none;
  position: absolute;
  right: -35px;
  top: 47%;
  z-index: 2;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  color: #243AE8;
  font-family: var(--font-display);
  font-weight: 900;
  box-shadow: 0 8px 24px rgba(47,74,125,.12);
}

.option-card--main::after {
  display: none;
}

.option-card__kicker {
  background: none;
  color: var(--color-text);
  font-size: clamp(22px, 2vw, 28px);
  padding: 0;
  margin: 120px 0 18px;
}

.option-card--main .option-card__kicker {
  display: grid;
  place-items: center;
  width: clamp(104px, 8vw, 132px);
  height: clamp(104px, 8vw, 132px);
  margin: 44px auto 28px;
  padding: 12px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 16px 34px rgba(47,74,125,.12);
}

.option-card--main .option-card__kicker::after {
  content: none;
}

.option-card__logo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 50%;
}

.option-card h3 {
  font-size: 0;
  margin: 0;
}

.option-card ul {
  text-align: left;
  gap: 18px;
  margin-top: 20px;
}

.option-card li {
  padding-left: 26px;
  color: var(--color-text);
}

.option-card:not(.option-card--main) li::before {
  width: 10px;
  height: 10px;
  top: .55em;
  border: 0;
  border-radius: 50%;
  background: #C7D0E0;
  transform: none;
}

.option-card--main {
  min-height: 490px;
  transform: translateY(-30px);
}

.option-card--main li::before {
  top: .45em;
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, #7E3FFF, #0EE5BB);
  transform: none;
}

/* 05 Message */
.message {
  background: #fff;
  overflow: hidden;
  padding-bottom: 0;
}

.message::before {
  display: none;
}

.message .section-display {
  margin-bottom: clamp(24px, 2.5vw, 36px);
}

/* 本文を上寄せにして「Message」見出しと引用の余白を詰める
   （グリッドの縦中央揃えによる余白を解消） */
.message__body {
  align-self: start;
}

.message__layout {
  grid-template-columns: minmax(420px, .8fr) minmax(620px, 1.2fr);
  gap: clamp(44px, 5vw, 86px);
}

.message__quote {
  margin-bottom: clamp(32px, 4vw, 54px);
}

.message__quote::after {
  background: #00A29A;
}

.message__sign {
  width: 210px;
  margin-top: clamp(20px, 2.5vw, 33px);
  padding: 14px 32px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  box-shadow: none;
}

.message__photo {
  min-height: 480px;
}

.message__photo::before {
  width: 560px;
  height: 660px;
  left: 4%;
  top: -4%;
  border-radius: 48% 52% 50% 50%;
  background: linear-gradient(180deg, #F3F7FF, #fff);
}

.message__photo-shape {
  inset: -30px 220px 60px 70px;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.message__img {
  object-fit: contain;
  object-position: bottom center;
  background: transparent;
  -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent 99%);
  mask-image: linear-gradient(to bottom, #000 80%, transparent 99%);
}

.message__vertical {
  right: -2%;
  top: 18%;
  font-size: clamp(27px, 2.6vw, 40px);
  line-height: 1.5;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

/* 代表メッセージ下部：全幅ティールバンド */
.message__band {
  margin-top: clamp(24px, 3vw, 48px);
  background: linear-gradient(115deg, #2F8EEB 0%, #6D45F5 100%);
}

.message__beliefs {
  position: static;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  padding: clamp(28px, 3.4vw, 46px) 0;
}

.message__beliefs span {
  min-height: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 1.6vw, 22px);
  padding: 6px clamp(16px, 2vw, 30px);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #fff;
  font-weight: 800;
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.55;
  text-align: left;
}

.message__beliefs span + span {
  border-left: 1px solid rgba(255, 255, 255, .32);
}

.message__beliefs .line-icon {
  width: clamp(40px, 3.6vw, 52px);
  height: clamp(40px, 3.6vw, 52px);
  flex: none;
  border: 0;
  background: transparent;
  filter: brightness(0) invert(1);
}

/* 06 System */
.system {
  background: #fff;
}

.system .section-display {
  margin-bottom: clamp(30px, 3vw, 48px);
}

.system .lead {
  max-width: 950px;
  margin-bottom: clamp(40px, 4.8vw, 68px);
}

.system-grid {
  gap: clamp(30px, 3.4vw, 48px);
}

.system-card {
  min-height: 470px;
  display: grid;
  align-content: start;
  padding: clamp(34px, 3.4vw, 48px) clamp(28px, 3vw, 38px);
  border: 1px solid rgba(47,142,235,.13);
  border-radius: 14px;
  background: rgba(255,255,255,.97);
  box-shadow: 0 18px 48px rgba(47,74,125,.09);
  text-align: center;
}

.system-card > .line-icon {
  width: 96px;
  height: 96px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(47,142,235,.12);
}

.system-card h3 {
  font-size: clamp(28px, 2.6vw, 40px);
  background: var(--gradient-main);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.system-card--purple h3 {
  color: #00A29A;
  background: none;
  -webkit-text-fill-color: currentColor;
}

.system-card__items {
  gap: 14px;
  margin-top: 22px;
}

.system-card__items span {
  min-height: 92px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
  padding: 18px 20px;
  font-size: clamp(19px, 1.55vw, 25px);
  color: var(--color-text);
  background: #fff;
  border-radius: 12px;
  border: 1px solid rgba(47,142,235,.14);
  box-shadow: 0 10px 26px rgba(47,74,125,.055);
  text-align: left;
}

.system-card__items .line-icon {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  box-shadow: 0 8px 20px rgba(47,74,125,.08);
}

.system-card__items em {
  display: block;
  font-style: normal;
  font-weight: 900;
  line-height: 1.45;
}

.system-card__items strong {
  display: block;
  margin-top: 2px;
  font-family: var(--font-display);
  font-size: clamp(40px, 3.7vw, 64px);
  line-height: 1;
  background: var(--gradient-main);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.system-card__items small {
  font-size: .42em;
  margin-left: 2px;
}

.system .text-link {
  display: none;
}

/* 07 Projects */
.projects {
  background: #fff;
}

.projects .section-title::after {
  display: none;
}

.projects .lead {
  margin-bottom: clamp(34px, 4vw, 56px);
}

.projects__layout {
  grid-template-columns: minmax(500px, .9fr) minmax(660px, 1.1fr);
  gap: clamp(28px, 3vw, 42px);
  align-items: end;
}

.projects__photo {
  min-height: 280px;
  align-self: end;
  border-radius: 10px;
  box-shadow: 0 14px 34px rgba(47,74,125,.10);
}

.project-cards {
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 0;
}

.project-card {
  min-height: 280px;
  padding: 26px 26px;
  border-radius: 12px;
  text-align: center;
  border: 1px solid rgba(47,142,235,.12);
  background: #fff;
  box-shadow: 0 14px 34px rgba(47,74,125,.08);
}

.project-card b {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 26px;
  font-family: var(--font-display);
  font-size: clamp(22px, 2vw, 32px);
  color: #1B75FF;
}

.project-card b::after {
  content: "";
  flex: 1;
  height: 2px;
  background: linear-gradient(90deg, #7E3FFF, #0EE5BB);
}

.project-card h3 {
  margin: 20px 0 20px;
  font-size: clamp(20px, 1.7vw, 26px);
}

.project-card .line-icon {
  width: 86px;
  height: 86px;
  margin: 22px auto 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 10px 26px rgba(47,74,125,.08);
}

.project-card p {
  display: grid;
  gap: 10px;
}

.project-card span {
  display: block;
  padding: 8px 14px;
  font-size: 14px;
  background: linear-gradient(90deg, #EEF4FF, #F3F1FF);
}

.project-card span:nth-child(3) {
  background: #DFF5F2;
  color: #00A29A;
}

.project-flow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: clamp(14px, 1.6vw, 22px);
  padding: clamp(24px, 3vw, 40px) 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* フロー見出し「案件参画までの流れ」（上の余白を1.4倍に） */
.project-flow-title {
  margin: clamp(42px, 4.8vw, 67px) 0 0;
  padding-left: 20px;
  border-left: 4px solid #6D45F5;
  font-size: clamp(20px, 1.8vw, 26px);
  font-weight: 900;
  color: var(--color-text);
  line-height: 1.4;
}

.project-flow li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 0 clamp(12px, 1.6vw, 22px);
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.project-flow li + li {
  border-left: 0;
}

.project-flow li::after {
  content: "";
  position: absolute;
  right: -7px;
  /* 白帯（アイコン行）に対して中央揃い＝アイコン中心の高さに固定し、
     カード全体の中央（テキストに近い位置）に来ないようにする */
  top: 37px;
  z-index: 2;
  width: 12px;
  height: 12px;
  border-right: 2px solid rgba(8,21,71,.28);
  border-top: 2px solid rgba(8,21,71,.28);
  transform: translateY(-50%) rotate(45deg);
}

.project-flow li:last-child::after {
  display: none;
}

.project-flow .flow-ic {
  width: 75px;
  height: 75px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #2F8EEB, #6D45F5);
  box-shadow: 0 10px 24px rgba(47, 110, 230, 0.28);
}
/* 白抜きアイコンを大きく（丸に対して十分な存在感に） */
.project-flow .flow-ic .line-icon {
  width: 48px;
  height: 48px;
  filter: brightness(0) invert(1);
}

.project-flow b {
  margin-top: 4px;
  font-size: clamp(20px, 1.8vw, 28px);
  line-height: 1;
}

.project-flow span {
  margin: 0;
  font-weight: 800;
}

.project-flow small {
  font-size: 13px;
}

/* 08 Voice */
.voice {
  background: #fff;
}

.voice .section-title::after {
  background: #00A29A;
}

.voice .section-title + .voice-grid {
  margin-top: clamp(44px, 5vw, 72px);
}

.voice-grid {
  gap: clamp(26px, 3vw, 42px);
}

.voice-card {
  padding: 28px;
  border-radius: 12px;
}

.voice-card img {
  width: 46%;
  aspect-ratio: 1 / 1.22;
  border-radius: 10px;
  float: left;
  margin: 0 26px 18px 0;
}

.voice-card span {
  margin: 0 0 12px;
  font-size: clamp(46px, 4vw, 66px);
  font-weight: 700;
  line-height: 1;
  background: var(--gradient-main);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.voice-card span::after {
  content: "";
  display: block;
  width: 44px;
  height: 3px;
  margin-top: 12px;
  background: #00A29A;
  border-radius: 999px;
}

.voice-card h3 {
  clear: right;
  min-height: 128px;
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.7;
}

.voice-card p {
  clear: both;
  padding-top: 24px;
  border-top: 1px solid rgba(47,142,235,.16);
  font-size: 16px;
}

.voice-card small {
  width: 100%;
  justify-content: center;
  padding: 12px 18px;
  border: 1.5px solid transparent;
  background:
    linear-gradient(#fff,#fff) padding-box,
    var(--gradient-main) border-box;
  color: var(--color-text);
  border-radius: 999px;
}

/* 09 FAQ */
.faq {
  background: #fff;
}

.faq .section-title::after {
  display: none;
}

.faq-layout {
  grid-template-columns: minmax(400px, .75fr) minmax(0, 1.25fr);
  gap: clamp(36px, 4vw, 48px);
  margin-top: clamp(48px, 5vw, 76px);
}

.selection-flow {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.selection-flow h3,
.faq__list::before {
  content: "よくある質問";
  display: block;
  margin-bottom: 24px;
  padding-left: 24px;
  border-left: 4px solid #6D45F5;
  font-size: clamp(22px, 2vw, 30px);
  font-weight: 900;
  color: var(--color-text);
}

.selection-flow ol {
  gap: 18px;
  position: relative;
  padding-left: 108px;
}

.selection-flow ol::before {
  content: "";
  position: absolute;
  left: 45px;
  top: 42px;
  bottom: 42px;
  border-left: 2px dashed rgba(47,142,235,.24);
}

.selection-flow li {
  min-height: 76px;
  display: grid;
  grid-template-columns: 86px 1fr;
  align-items: center;
  padding: 0 28px;
  border: 0;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(47,74,125,.08);
}

.selection-flow li::before {
  content: "";
  position: absolute;
  left: -34px;
  top: 50%;
  z-index: 2;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--gradient-main);
  transform: translateY(-50%);
}

.selection-flow li:nth-child(5)::before {
  background: #00A29A;
}

.selection-flow .line-icon {
  position: absolute;
  left: -108px;
  top: 50%;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 12px 30px rgba(47,74,125,.10);
  transform: translateY(-50%);
}

.selection-flow b {
  margin: 0;
  font-size: 0;
}

.selection-flow b::before {
  content: counter(flow, decimal-leading-zero);
  counter-increment: flow;
  font-family: var(--font-display);
  font-size: clamp(28px, 2.6vw, 42px);
  color: #1B75FF;
}

.selection-flow ol {
  counter-reset: flow;
}

.selection-flow span {
  color: transparent;
  font-size: 0;
}

.selection-flow li:nth-child(1) span::before { content: "カジュアル面談"; }
.selection-flow li:nth-child(2) span::before { content: "書類確認"; }
.selection-flow li:nth-child(3) span::before { content: "面接"; }
.selection-flow li:nth-child(4) span::before { content: "条件すり合わせ"; }
.selection-flow li:nth-child(5) span::before { content: "内定"; }

.selection-flow span::before {
  color: var(--color-text);
  font-size: clamp(18px, 1.6vw, 24px);
  font-weight: 900;
}

.faq__list {
  display: grid;
  gap: 18px;
}

.faq__item {
  border-radius: 12px;
  border: 1px solid rgba(47,142,235,.12);
  box-shadow: 0 12px 32px rgba(47,74,125,.08);
}

.faq__item summary {
  padding: 24px 68px 20px 72px;
  font-size: clamp(18px, 1.5vw, 22px);
  border-bottom: 1px solid rgba(47,142,235,.12);
}

.faq__item summary::before {
  left: 28px;
  top: 24px;
  content: "Q.";
  font-size: 24px;
}

.faq__item p {
  padding: 20px 30px 26px 72px;
  font-size: 16px;
  font-weight: 700;
  position: relative;
}

.faq__item p::before {
  content: "A.";
  position: absolute;
  left: 28px;
  top: 11px;
  color: #00A29A;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 900;
}

@media (max-width: 1000px) {
  .problem,
  .about,
  .message,
  .system,
  .projects,
  .voice,
  .faq {
    min-height: 0;
  }

  .problem .container,
  .new-option .container,
  .message__layout,
  .projects__layout,
  .faq-layout {
    grid-template-columns: 1fr;
  }

  .problem-cards,
  .option-grid,
  .project-cards {
    grid-column: auto;
    grid-row: auto;
    margin-top: 36px;
  }

  .option-grid,
  .project-cards {
    grid-template-columns: 1fr;
  }

  .option-card--main {
    transform: none;
  }

  .message__beliefs,
  .project-flow,
  .voice-grid,
  .system-grid {
    grid-template-columns: 1fr;
  }

  .message__photo-shape {
    inset: 0 0 120px;
  }
}

@media (max-width: 680px) {
  .problem .section-display,
  .about .section-display,
  .message .section-display,
  .system .section-display,
  .projects .section-display,
  .voice .section-display,
  .faq .section-display {
    font-size: clamp(56px, 18vw, 78px);
  }

  .problem-cards,
  .declaration ul,
  .project-flow {
    grid-template-columns: 1fr;
  }

  .voice-card img {
    float: none;
    width: 100%;
    aspect-ratio: 16 / 11;
    margin: 0 0 18px;
  }

  .voice-card h3 {
    min-height: 0;
  }
}

/* PC viewport fit for attached mock proportions */
@media (min-width: 1001px) {
  .problem,
  .about,
  .message,
  .system,
  .projects,
  .voice,
  .faq {
    min-height: 820px;
    padding: 84px 0 105px;
  }

  .problem .section-display,
  .about .section-display,
  .message .section-display,
  .system .section-display,
  .projects .section-display,
  .voice .section-display,
  .faq .section-display {
    font-size: clamp(74px, 6.2vw, 104px);
    margin-bottom: 28px;
  }

  .problem .section-title,
  .about .section-title,
  .message .message__quote,
  .system .section-title,
  .projects .section-title,
  .voice .section-title,
  .faq .section-title {
    font-size: clamp(28px, 2.55vw, 40px);
    line-height: 1.48;
  }

  .problem .lead,
  .about .lead,
  .system .lead,
  .projects .lead,
  .voice .lead,
  .faq .lead,
  .message__body p:not(.message__quote):not(.message__sign) {
    font-size: 15px;
    line-height: 2.05;
  }

  .section-display::after,
  .section-title::after,
  .message__quote::after,
  .voice .section-title::after,
  .faq .section-title::after {
    margin-top: 18px;
  }

  .problem .container {
    grid-template-columns: minmax(390px, .75fr) minmax(610px, 1fr);
    column-gap: 72px;
  }

  .problem .section-title {
    margin-bottom: 28px;
  }

  .problem-cards {
    gap: 24px;
    margin-top: 72px;
  }

  .problem-card {
    min-height: 238px;
    padding: 28px;
  }

  .problem-card .line-icon {
    width: 94px;
    height: 94px;
  }

  .new-option .container {
    grid-template-columns: minmax(390px, .78fr) minmax(660px, 1.22fr);
  }

  .option-grid {
    margin-top: 26px;
  }

  .option-card {
    min-height: 390px;
    padding: 30px 24px;
  }

  .option-card--main {
    min-height: 440px;
    transform: translateY(-24px);
  }

  .declaration li {
    min-height: 76px;
    padding-block: 14px;
  }

  .message .section-display {
    margin-bottom: 28px;
  }

  .message__layout {
    grid-template-columns: minmax(410px, .78fr) minmax(660px, 1.22fr);
    gap: 48px;
  }

  .message__photo {
    min-height: 540px;
  }

  .message__photo-shape {
    inset: -18px 280px 72px 80px;
  }

  .message__vertical {
    right: -4%;
    top: 24%;
    z-index: 6;
    color: var(--color-text);
    text-shadow: 0 0 18px rgba(255,255,255,.85);
  }

  .message .message__quote,
  .message__body p:not(.message__quote):not(.message__sign),
  .message__sign {
    color: var(--color-text) !important;
    opacity: 1;
  }

  .message__photo,
  .message__img {
    opacity: 1;
  }

  .message__beliefs span {
    min-height: 104px;
    padding: 14px;
  }

  .system .lead {
    margin-bottom: 34px;
  }

  .system-card {
    min-height: 320px;
    padding: 24px 22px;
  }

  .system-card .line-icon {
    width: 72px;
    height: 72px;
    margin-bottom: 12px;
  }

  .system-card h3 {
    font-size: clamp(26px, 2.2vw, 34px);
  }

  .system-card__items span {
    min-height: 58px;
    font-size: 18px;
  }

  .projects .lead {
    margin-bottom: 26px;
  }

  .projects__photo {
    min-height: 270px;
  }

  .project-card {
    min-height: 260px;
    padding: 20px 20px;
  }

  .project-card h3 {
    margin-top: 52px;
    margin-bottom: 14px;
  }

  .project-flow {
    margin-top: 18px;
    /* 左右のパディングをなくし、白帯の左右端を見出し・リード文と揃える。
       上側は見出しとの距離を詰めるため最小限に。 */
    padding: 4px 0 18px;
  }

  .voice .section-title + .voice-grid {
    margin-top: 34px;
  }

  .voice-card {
    padding: 24px;
  }

  .voice-card span {
    font-size: 54px;
  }

  .voice-card h3 {
    min-height: 104px;
    font-size: 24px;
  }

  .voice-card p {
    font-size: 15px;
  }

  .faq-layout {
    margin-top: 34px;
  }

  .selection-flow li {
    min-height: 64px;
  }

  .faq__item summary {
    padding-top: 18px;
    padding-bottom: 16px;
    font-size: 19px;
  }

  .faq__item p {
    padding-bottom: 18px;
    font-size: 15px;
  }
}

/* Attached mock fidelity refinements for 06 / 07 / 09 */
@media (min-width: 1001px) {
  .system-card {
    min-height: 450px;
    padding: clamp(34px, 3.4vw, 48px) clamp(28px, 3vw, 38px);
  }

  .system-card > .line-icon {
    width: 96px;
    height: 96px;
    margin-bottom: 20px;
  }

  .system-card__items span {
    min-height: 92px;
    font-size: clamp(19px, 1.55vw, 25px);
  }

  .projects__layout {
    grid-template-columns: minmax(500px, .9fr) minmax(660px, 1.1fr);
  }

  .projects__photo {
    align-self: start;
    min-height: 300px;
  }

  .project-card {
    min-height: 300px;
  }

  .project-card h3 {
    margin-top: 20px;
  }

  .faq-layout {
    grid-template-columns: minmax(400px, .75fr) minmax(0, 1.25fr);
    margin-top: clamp(48px, 5vw, 76px);
  }

  .system,
  .projects,
  .faq {
    padding-top: 60px;
  }

  .system .section-display,
  .projects .section-display,
  .faq .section-display {
    margin-bottom: 18px;
  }

  .system .section-title,
  .projects .section-title,
  .faq .section-title {
    margin-bottom: 18px;
    line-height: 1.35;
  }

  .system .lead,
  .projects .lead,
  .faq .lead {
    line-height: 1.9;
  }

  .system .lead {
    margin-bottom: 32px;
  }

  .projects .lead {
    max-width: 610px;
    margin-bottom: 28px;
  }

  .faq-layout {
    margin-top: 42px;
  }
}

@media (max-width: 1000px) {
  .project-flow li {
    grid-template-columns: 68px auto 1fr;
  }

  .selection-flow ol {
    padding-left: 92px;
  }

  .selection-flow ol::before {
    left: 38px;
  }

  .selection-flow .line-icon {
    left: -92px;
    width: 68px;
    height: 68px;
  }

  .selection-flow li::before {
    left: -29px;
  }
}

@media (max-width: 680px) {
  .system-card__items span,
  .project-flow li {
    grid-template-columns: 1fr;
  }

  .system-card__items span {
    justify-content: center;
    text-align: center;
  }

  .project-flow li {
    text-align: center;
  }

  .project-flow .line-icon {
    grid-row: auto;
    margin-inline: auto;
  }

  .project-flow b,
  .project-flow small {
    grid-row: auto;
    grid-column: auto;
  }

  .project-flow li::after {
    display: none;
  }

  .selection-flow ol {
    padding-left: 0;
  }

  .selection-flow ol::before,
  .selection-flow li::before,
  .selection-flow .line-icon {
    display: none;
  }

  .selection-flow li {
    grid-template-columns: 64px 1fr;
  }
}

/* ============================================================
   Projects: 写真と3カードの高さを揃える（写真はトリミング許容）
   ※ 複数の @media(min-width:1001px) の後に置き、確実に最後勝ちさせる
============================================================ */
@media (min-width: 1001px) {
  .projects__layout { align-items: stretch; }
  .projects__photo {
    align-self: stretch;
    min-height: 0;
    height: auto;
    max-height: 380px;
    overflow: hidden;
  }
  .projects__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
}

/* ============================================================
   System: 3カードをコンパクトに（高さを抑える）
   ※ 既存の散在ルールより後に置き、確実に最後勝ちさせる
============================================================ */
.system-card {
  min-height: 0;
  padding: clamp(18px, 1.9vw, 26px) clamp(18px, 1.9vw, 26px);
}
.system-card > .line-icon {
  width: 50px; height: 50px; margin-bottom: 10px;
}
.system-card h3 { font-size: clamp(21px, 1.7vw, 26px); margin: 0; }
.system-card h3::after { margin-top: 8px; }
.system-card__items { margin-top: 12px; gap: 9px; }
.system-card__items span {
  min-height: 0;
  padding: 10px 15px;
  gap: 12px;
  font-size: clamp(14px, 1.1vw, 17px);
}
.system-card__items .line-icon { flex: 0 0 40px; width: 40px; height: 40px; }
.system-card__items em { line-height: 1.3; }
.system-card__items strong { font-size: clamp(24px, 2vw, 32px); }

@media (min-width: 1001px) {
  .system-card { min-height: 0; }
  .system-card > .line-icon { width: 50px; height: 50px; margin-bottom: 10px; }
  .system-card__items span { min-height: 0; font-size: clamp(14px, 1.1vw, 17px); }
}

/* System / Projects / FAQ: PNG線画の端が見切れないよう内容だけ縮小 */
.system-card > img.line-icon {
  padding: 6px;
}
.system-card__items img.line-icon {
  padding: 5px;
}
.project-card img.line-icon {
  padding: 10px;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.project-flow img.line-icon {
  padding: 8px;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.selection-flow img.line-icon {
  padding: 10px;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* ============================================================
   New Option/About: 読みやすさ改善（日本語の語中改行を防ぐ）
   ※ 既存ルールより後に置き最後勝ち
============================================================ */
/* 比較カード：見出し・箇条書きが「フリーラン/ス」のように割れないように */
.option-card { padding-left: 20px; padding-right: 20px; }
.option-card__kicker { font-size: clamp(18px, 1.55vw, 24px); word-break: keep-all; }
.option-card ul { gap: 14px; }
.option-card li {
  font-size: 14px;
  padding-left: 20px;
  line-height: 1.55;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* 大切にしていること：1カラムの横長カードにして1行で読めるように */
.declaration ul { grid-template-columns: 1fr; gap: 12px; }
.declaration li {
  min-height: 0;
  padding: 14px 18px 14px 54px;
  line-height: 1.5;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.declaration li::before { left: 24px; }

@media (min-width: 1001px) {
  .option-card li { font-size: 14px; }
}

/* ============================================================
   比較カード：細長さ解消・上下そろえ・太さ/色の統一
============================================================ */
.option-card {
  min-height: 0;
  transform: none;
  padding: 26px 22px 28px;
  display: flex;
  flex-direction: column;
}
.option-card--main { transform: none; }

/* ヘッダー帯を全カード同じ高さに → 箇条書きの開始位置がそろう */
.option-card__kicker {
  height: 70px;
  min-height: 70px;
  width: auto;
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(19px, 1.55vw, 23px);
  font-weight: 800;
  color: var(--color-text);
}
.option-card--main .option-card__kicker {
  height: 70px;
  min-height: 70px;
  margin: 0 auto 14px;
  padding: 0;
  background: none;
  box-shadow: none;
  border-radius: 0;
}
.option-card__logo {
  width: 60px;
  height: 60px;
  padding: 8px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 12px 28px rgba(47, 74, 125, .14);
  object-fit: contain;
}

/* ============================================================
   Requested scale refinements: Problem / Message / Projects
============================================================ */
@media (min-width: 1001px) {
  .problem-cards {
    width: 80%;
    justify-self: center;
    gap: 19px;
  }

  .problem-card {
    min-height: 190px;
    padding: 22px;
  }

  .problem-card__img {
    height: clamp(99px, 8.8vw, 125px);
  }

  .problem-card h3 {
    margin-top: 10px;
    font-size: clamp(14px, 1.24vw, 19px);
  }

  .problem-card h3::after {
    width: 46px;
    height: 2px;
    margin-top: 14px;
  }

  .message__img {
    transform: translateY(-150px) scale(.8);
    transform-origin: center bottom;
  }

  .message__photo-shape {
    overflow: visible;
  }
}

.project-card b {
  margin-bottom: 8px;
}

.project-card .line-icon {
  margin-top: 6px;
  margin-bottom: 6px;
}

.project-card h3 {
  margin-top: 8px;
}

/* FAQ flow: lighter labels and a solid plate behind each icon */
.selection-flow b::before {
  font-weight: 600;
}

.selection-flow span::before {
  font-weight: 700;
}

.selection-flow img.line-icon {
  z-index: 3;
  padding: 10px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(47, 74, 125, .12);
}

/* Final reassurance points */
.entry__trust {
  justify-content: center;
  text-align: center;
}

/* 箇条書き：太さ・色・行間を全カード統一 */
.option-card ul { gap: 12px; margin-top: 2px; }
.option-card li,
.option-card--main li {
  font-size: 14px;
  font-weight: 600;
  color: #171C61;
  line-height: 1.5;
}

@media (min-width: 1001px) {
  /* フリコネ列だけ少し広く（長い文言の折り返し防止）。上下は揃ったまま */
  .option-grid {
    grid-template-columns: 1fr 1fr 1.22fr;
    gap: 22px;
    align-items: stretch;
  }
}

@media (max-width: 1000px) {
  .option-title {
    white-space: normal;
  }
}

/* ============================================================
   New Option renewal
============================================================ */
.new-option > .container {
  display: block;
}

.option-intro {
  display: grid;
  grid-template-columns: minmax(430px, .82fr) minmax(0, 1.18fr);
  gap: clamp(40px, 4vw, 56px);
  align-items: end;
}

.option-intro .section-display {
  margin-bottom: 26px;
  white-space: nowrap;
}

.option-intro .section-title {
  margin-bottom: 18px;
  font-size: clamp(28px, 2.55vw, 40px);
  line-height: 1.48;
}

.option-intro .lead {
  max-width: 430px;
  font-size: clamp(12px, 1.22vw, 18px);
  white-space: nowrap;
}

.option-position {
  align-self: end;
  padding-bottom: 8px;
}

.option-position__items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  gap: clamp(12px, 1.6vw, 22px);
}

.option-position__item {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 12px;
  text-align: center;
}

.option-position__icon {
  width: 86px;
  height: 86px;
  display: grid;
  place-items: center;
  padding: 20px;
  border: 1px solid rgba(47, 142, 235, .12);
  border-radius: 50%;
  background: linear-gradient(145deg, #f4f7fc, #fff);
}

.option-position__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.option-position__item--active .option-position__icon {
  width: 104px;
  height: 104px;
  padding: 22px;
  border-color: rgba(47, 142, 235, .25);
  background: #fff;
  box-shadow: 0 14px 34px rgba(47, 74, 125, .10);
}

.option-position__item b {
  font-size: clamp(14px, 1.25vw, 17px);
  line-height: 1.45;
  white-space: nowrap;
}

.option-position__item--active b {
  color: var(--color-primary);
}

.option-position__vs {
  color: #929bb0;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
}

.option-position__rail {
  position: relative;
  height: 2px;
  margin: 20px 16.66% 0;
  background: #c8d0df;
}

.option-position__rail::before,
.option-position__rail::after,
.option-position__rail span::before {
  content: "";
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #9ca6ba;
  transform: translate(-50%, -50%);
}

.option-position__rail::before { left: 0; }
.option-position__rail::after { left: 100%; }
.option-position__rail span::before {
  left: 50%;
  background: var(--color-primary);
  box-shadow: 0 0 0 5px rgba(47, 142, 235, .12);
}

.option-position__rail span {
  position: absolute;
  inset: 0 auto 0 41%;
  width: 18%;
  background: var(--gradient-main);
}

.option-grid.option-grid--renewed {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(22px, 2.6vw, 34px);
  margin: clamp(42px, 5vw, 68px) 0 0;
}

.option-grid--renewed .option-card {
  min-height: 290px;
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 3vw, 38px);
  border: 1px solid rgba(47, 142, 235, .14);
  border-radius: 14px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 16px 42px rgba(47, 74, 125, .08);
  transform: none;
}

.option-grid--renewed .option-card::before,
.option-grid--renewed .option-card::after {
  display: none;
}

.option-grid--renewed .option-card--main {
  border: 2px solid transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    var(--gradient-main) border-box;
  box-shadow: 0 20px 50px rgba(75, 87, 225, .15);
}

.option-card__head {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(47, 142, 235, .16);
}

.option-card__symbol {
  width: 68px;
  height: 68px;
  flex: 0 0 68px;
  display: grid;
  place-items: center;
  padding: 16px;
  border-radius: 50%;
  background: #f3f6fb;
}

.option-card__symbol img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.option-card__symbol--brand {
  background: var(--gradient-main);
}

.option-grid--renewed .option-card h3 {
  margin: 0;
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.4;
  color: var(--color-text);
}

.option-grid--renewed .option-card--main h3 {
  color: #285ef5;
}

.option-grid--renewed .option-card ul {
  display: grid;
  gap: 15px;
  margin: 22px 0 0;
}

.option-grid--renewed .option-card li,
.option-grid--renewed .option-card--main li {
  position: relative;
  padding-left: 25px;
  font-size: clamp(14px, 1.25vw, 16px);
  font-weight: 600;
  line-height: 1.55;
  color: #29324e;
}

.option-grid--renewed .option-card li::before,
.option-grid--renewed .option-card--main li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .6em;
  width: 9px;
  height: 9px;
  border: 0;
  border-radius: 50%;
  background: #bdc5d5;
  transform: none;
}

.option-grid--renewed .option-card--main li::before {
  background: var(--color-primary);
}

.declaration.declaration--renewed {
  margin: clamp(36px, 4.5vw, 58px) 0 0;
}

.declaration--renewed h3 {
  display: block;
  margin-bottom: 20px;
  font-size: clamp(20px, 1.9vw, 28px);
  line-height: 1.5;
}

.declaration--renewed ul {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  padding: 18px 20px;
  border: 1px solid rgba(47, 142, 235, .14);
  border-radius: 10px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 10px 26px rgba(47, 74, 125, .05);
}

.declaration--renewed li {
  min-height: 76px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 24px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: clamp(13px, 1.1vw, 15px);
  font-weight: 700;
  line-height: 1.55;
}

.declaration--renewed li + li {
  border-left: 1px solid rgba(47, 142, 235, .14);
}

.declaration--renewed li::before {
  display: none;
}

.declaration--renewed li::after {
  display: none;
}

.declaration__icon {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  object-fit: contain;
}

.option-cta {
  width: min(520px, 100%);
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: clamp(28px, 3.5vw, 44px) auto 0;
  padding: 0 28px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  background:
    linear-gradient(#fff, #fff) padding-box,
    var(--gradient-main) border-box;
  color: #285ef5;
  font-size: clamp(14px, 1.25vw, 17px);
  font-weight: 800;
  box-shadow: 0 10px 28px rgba(47, 74, 125, .08);
  transition: transform .25s ease, box-shadow .25s ease;
}

.option-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(47, 74, 125, .13);
}

@media (max-width: 1000px) {
  .option-intro {
    grid-template-columns: 1fr;
  }

  .option-position {
    width: min(720px, 100%);
  }

  .option-grid.option-grid--renewed {
    grid-template-columns: 1fr;
  }

  .option-grid--renewed .option-card {
    min-height: 0;
  }

  .declaration--renewed ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .option-intro .section-title br,
  .option-intro .lead br {
    display: none;
  }

  .option-position__items {
    gap: 7px;
  }

  .option-position__icon,
  .option-position__item--active .option-position__icon {
    width: 64px;
    height: 64px;
    padding: 14px;
  }

  .option-position__item b {
    white-space: normal;
    font-size: 11px;
  }

  .option-position__vs {
    font-size: 10px;
  }

  .declaration--renewed ul {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   Final layout refinements
============================================================ */
/* Keep the animated background SVG visible beneath every section. */
main > section {
  background-color: rgba(255, 255, 255, .76) !important;
}

@media (min-width: 1001px) {
  .fv__visual,
  .is-loaded .fv__visual.load-fade {
    transform: translateX(54px);
  }

  .faq-layout {
    column-gap: 96px;
  }

  .projects__layout {
    grid-template-columns: minmax(400px, .72fr) minmax(0, 1.28fr);
    gap: 24px;
  }

  .project-card {
    padding: 24px 22px;
  }

  .project-card b {
    margin-bottom: 4px;
  }

  .project-card .line-icon {
    margin-top: 0;
    margin-bottom: 0;
  }

  .project-card h3 {
    margin-top: 4px;
    margin-bottom: 12px;
  }

  .footer__info,
  .footer__nav,
  .footer__copy,
  .footer__address {
    white-space: nowrap;
  }

  .footer__info {
    font-size: 13px;
  }

  .footer__nav {
    font-size: 12px;
  }

  .footer__nav h2 {
    font-size: 14px;
  }

  .footer__copy,
  .footer__address {
    font-size: 11px;
  }
}

/* Compact project titles and FAQ flow labels */
.project-card h3 {
  font-size: clamp(18px, 1.5vw, 22px);
}

@media (min-width: 1001px) {
  .project-card h3 {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 3.2em;
    margin-top: 4px;
    margin-bottom: 12px;
    font-size: clamp(17px, 1.18vw, 19px);
    line-height: 1.6;
    letter-spacing: 0;
  }
}

.selection-flow span::before {
  font-size: clamp(16px, 1.35vw, 20px);
}

.selection-flow img.line-icon {
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 10px 26px rgba(47, 74, 125, .12);
}

.selection-flow li::before {
  display: none;
}

@media (min-width: 1001px) {
  /* Message: give the representative text column about 20% more room. */
  .message__layout {
    grid-template-columns: minmax(490px, .9fr) minmax(0, 1.1fr);
    gap: 40px;
  }

  .message__body p:not(.message__quote):not(.message__sign) {
    max-width: 672px;
  }

  /* System: keep each label and its figure on one horizontal line. */
  .system-card__items em {
    width: 100%;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    white-space: nowrap;
  }

  .system-card__items strong {
    display: inline-block;
    flex: 0 0 auto;
    margin-top: 0;
    white-space: nowrap;
  }

  /* Projects: slightly reduce the photo and expand the three cards. */
  .projects__layout {
    grid-template-columns: minmax(350px, .62fr) minmax(0, 1.38fr);
  }

  .project-flow li {
    grid-template-columns: 64px auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 5px 10px;
    padding-inline: 16px;
  }

  .project-flow .line-icon {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .project-flow b {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    line-height: 1;
  }

  .project-flow span {
    grid-column: 3;
    grid-row: 1;
    align-self: center;
    white-space: nowrap;
  }

  .project-flow small {
    grid-column: 2 / span 2;
    grid-row: 2;
  }

  /* Let's Talk: increase the CTA column from 420px to 546px. */
  .entry__layout {
    grid-template-columns: minmax(0, 1fr) minmax(416px, 546px);
  }

  .entry__actions {
    grid-template-columns: 1fr;
    justify-items: stretch;
  }

  .entry__actions .btn {
    justify-self: stretch;
  }
}

/* FAQ selection icons use a rounded-square plate. */
.selection-flow img.line-icon {
  border-radius: 16px;
}

/* Vertically center Q. inside the question row. */
.faq__item summary::before {
  top: 50%;
  transform: translateY(-50%);
}

/* ============================================================
   Final visual balance refinements
============================================================ */
@media (min-width: 1001px) {
  .problem-cards {
    width: 86%;
  }

  .message__img {
    transform: translate(-100px, -150px) scale(.8);
  }

  .message__beliefs {
    right: 100px;
    bottom: 60px;
  }

  .message__beliefs span {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

.message__sign {
  width: auto;
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding-inline: 0;
  white-space: nowrap;
}

.message__sign span {
  margin-left: 0;
  font-size: 14px;
  font-weight: 800;
  color: var(--color-text);
}

.message__sign strong {
  margin-top: 0;
}

.option-position {
  width: min(540px, 100%);
  justify-self: center;
}

.option-position__items {
  gap: 6px;
}

.option-position__vs {
  color: rgba(77, 91, 124, .42);
  font-size: 20px;
  font-weight: 600;
}

.option-cta {
  border-color: transparent;
  background: var(--gradient-main);
  color: #fff;
  box-shadow: 0 14px 34px rgba(58, 110, 230, .28);
}

.option-cta:hover {
  color: #fff;
  box-shadow: 0 18px 40px rgba(58, 110, 230, .38);
}

.voice-card h3 {
  min-height: 108px;
  font-size: clamp(18px, 1.6vw, 23px);
}

.selection-flow b::before {
  font-size: clamp(24px, 2.2vw, 34px);
}

/* ============================================================
   System header rows and typography refinements
============================================================ */
.system .section-title::after {
  background: #00A29A;
}

.system-card__head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 10px;
}

.system-card__head .line-icon {
  width: 50px !important;
  height: 50px !important;
  flex: 0 0 50px;
  margin: 0 !important;
  padding: 6px;
}

.system-card__head h3 {
  margin: 0;
}

.system-card__head h3::after {
  margin-top: 8px;
}

.system-card__items em {
  line-height: 1.2;
}

.system-card__label--blue {
  color: var(--color-primary);
}

.entry .section-display {
  font-weight: 800;
}

.projects__photo img {
  object-position: center 35%;
}

/* ============================================================
   Final alignment requests
============================================================ */
@media (min-width: 1001px) {
  .problem-cards {
    width: 95%;
  }

  .message__vertical {
    transform: translateY(-50px);
  }

  .message__beliefs {
    transform: none;
  }

  .entry__layout {
    grid-template-columns: minmax(0, 1fr) 520px;
    column-gap: 32px;
  }

  .entry__actions {
    width: 520px;
  }

  .entry .section-title {
    font-size: clamp(34px, 3.6vw, 48px);
    white-space: normal;
  }
}

.option-position {
  justify-self: start;
}

.option-card__symbol--brand {
  width: 84px;
  height: 84px;
  flex-basis: 84px;
  padding: 0;
  border-radius: 0;
  background: transparent;
}

.option-card__symbol--brand img {
  width: 84px;
  height: 84px;
}

.option-cta {
  border: 0;
  background: var(--color-primary);
}

.faq__list::before {
  margin-bottom: 6px;
}

@media (max-width: 1000px) {
  .entry .section-title {
    white-space: normal;
  }
}

/* ============================================================
   Final layout alignment
============================================================ */
@media (min-width: 1001px) {
  .projects__layout,
  .project-cards,
  .project-card {
    height: 100%;
  }

  .projects__photo {
    height: 100%;
    min-height: 0;
  }

  .option-position {
    justify-self: end;
    margin-left: 0;
    position: relative;
    top: -48px;
  }

  .message__beliefs {
    left: auto;
    right: auto;
    bottom: auto;
    width: 100%;
    transform: none;
  }
}

/* ============================================================
   Section density and spacing refinements
============================================================ */
@media (min-width: 1001px) {
  .system-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
  }

  .system-card {
    height: 100%;
    grid-template-rows: auto 1fr;
  }

  .system-card__items {
    height: 100%;
    grid-auto-rows: 1fr;
  }

  .system-card__items span {
    height: 100%;
  }

  .entry__layout {
    column-gap: 52px;
  }
}

.voice-card span {
  font-size: clamp(38px, 3.4vw, 54px);
}

.voice-card h3 {
  min-height: 92px;
  font-size: clamp(16px, 1.4vw, 20px);
}

@media (min-width: 1001px) {
  .selection-flow .line-icon {
    left: -92px;
  }
}

/* ============================================================
   System cards: mock-aligned composition
============================================================ */
.system-card {
  min-height: 350px;
  padding: 30px;
}

.system-card__head {
  justify-content: flex-start;
  gap: 22px;
  margin-bottom: 24px;
}

.system-card__head .line-icon {
  width: 72px !important;
  height: 72px !important;
  flex-basis: 72px;
  padding: 14px;
  border-radius: 50%;
  background: linear-gradient(145deg, #edf5ff, #f7f4ff);
  box-shadow: none;
}

.system-card__head h3 {
  font-size: clamp(25px, 2vw, 31px);
  text-align: left;
}

.system-card__items {
  width: 100%;
  min-width: 0;
  margin-top: 0;
  gap: 14px;
}

.system-card__items span {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 104px;
  justify-content: center;
  padding: 18px 16px;
  background: rgba(248, 251, 255, .82);
  box-shadow: none;
}

.system-card__items em {
  width: 100%;
  min-width: 0;
  font-size: clamp(15px, 1.2vw, 18px);
  text-align: center;
}

.system-card--blue .system-card__items em {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  white-space: nowrap;
}

.system-card__items strong {
  display: inline-block;
  margin: 0;
  font-size: clamp(34px, 3vw, 44px);
  white-space: nowrap;
}

.system-card--blue .system-card__items span:nth-child(2) strong {
  font-size: clamp(32px, 2.7vw, 40px);
}

.system-card--purple .system-card__items em {
  display: block !important;
  text-align: center;
  white-space: normal;
}

.system-card--purple .system-card__items strong {
  display: block !important;
  margin-top: 8px;
  font-size: clamp(19px, 1.6vw, 24px);
  color: var(--color-text);
  background: none;
  -webkit-text-fill-color: currentColor;
}

.system-card--mint .system-card__items span {
  min-height: 222px;
}

.system-card--mint .system-card__items em {
  display: grid;
  justify-items: center;
  gap: 10px;
}

.system-card--mint .system-card__items strong {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
}

.system-card--mint .system-card__items b,
.system-card--mint .system-card__items i {
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: .42em;
  font-style: normal;
  -webkit-text-fill-color: currentColor;
}

/* Message cards and FAQ controls */
@media (min-width: 1001px) {
  .message__beliefs {
    right: -40px;
  }
}

.faq__item summary::after,
.faq__item[open] summary::after {
  content: "";
  top: 50%;
  width: 28px;
  height: 28px;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background:
    linear-gradient(var(--color-primary), var(--color-primary)) center / 12px 2px no-repeat,
    linear-gradient(var(--color-primary), var(--color-primary)) center / 2px 12px no-repeat,
    #fff;
  transform: translateY(-50%);
}

.faq__item[open] summary::after {
  background:
    linear-gradient(var(--color-primary), var(--color-primary)) center / 12px 2px no-repeat,
    #fff;
}

/* ============================================================
   System cards: detailed mock composition
============================================================ */
.system-card {
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 24px 24px 20px;
  text-align: left;
}

.system-card__head {
  min-height: 0;
  margin: 0;
  padding: 0 6px 16px;
  border-bottom: 1px solid rgba(47, 142, 235, .18);
}

.system-card__head .line-icon {
  width: 56px !important;
  height: 56px !important;
  flex-basis: 56px;
}

.system-card__head h3 {
  font-size: clamp(27px, 2.25vw, 34px);
  color: var(--color-text);
  background: none;
  -webkit-text-fill-color: currentColor;
}

.system-card__content--metrics {
  display: grid;
  flex: 1;
  padding: 14px 8px 8px;
}

.system-metric {
  display: grid;
  align-content: center;
  padding: 8px 10px;
}

.system-metric + .system-metric {
  border-top: 1px dotted rgba(47, 142, 235, .24);
}

.system-metric span,
.system-guarantee > span {
  font-size: clamp(17px, 1.45vw, 21px);
  font-weight: 800;
  color: var(--color-text);
}

.system-metric strong,
.system-guarantee strong {
  font-family: var(--font-display);
  font-size: clamp(42px, 3.8vw, 56px);
  font-weight: 800;
  line-height: 1.05;
  white-space: nowrap;
  background: var(--gradient-main);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.system-metric:nth-child(2) strong {
  font-size: clamp(36px, 3.2vw, 48px);
}

.system-metric small,
.system-guarantee small {
  margin-left: 4px;
  font-size: .42em;
}

.system-choice {
  display: grid;
  flex: 1;
  padding: 14px 12px 8px;
}

.system-choice li {
  position: relative;
  display: flex;
  align-items: center;
  padding: 14px 4px 14px 52px;
  font-size: clamp(16px, 1.35vw, 20px);
  font-weight: 800;
  line-height: 1.55;
  color: var(--color-text);
}

.system-choice li span {
  font-size: 1em;
}

.system-choice li i {
  white-space: nowrap;
  font-size: .86em;
  font-style: normal;
}

.system-choice li + li {
  border-top: 1px dotted rgba(47, 142, 235, .24);
}

.system-choice li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 50%;
  width: 32px;
  height: 32px;
  border: 2px solid var(--color-primary);
  border-radius: 50%;
  transform: translateY(-50%);
}

.system-choice li::after {
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  width: 11px;
  height: 6px;
  border-left: 2px solid var(--color-primary);
  border-bottom: 2px solid var(--color-primary);
  transform: translateY(-70%) rotate(-45deg);
}

.system-guarantee {
  min-height: 0;
  display: grid;
  align-content: center;
  justify-items: start;
  flex: 1;
  padding: 16px 12px 12px;
}

.system-guarantee strong {
  display: flex;
  align-items: baseline;
}

.system-guarantee i {
  margin-left: 10px;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: .42em;
  font-style: normal;
  -webkit-text-fill-color: currentColor;
}

.system-card__note {
  margin-top: auto;
  padding: 12px 16px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(239, 247, 255, .9), rgba(247, 250, 255, .84));
  font-size: clamp(13px, 1.15vw, 16px);
  font-weight: 700;
  line-height: 1.8;
  color: var(--color-text);
}

@media (max-width: 680px) {
  .declaration--renewed ul {
    grid-template-columns: 1fr;
  }

  .declaration--renewed li + li {
    border-left: 0;
    border-top: 1px solid rgba(47, 142, 235, .14);
  }
}

/* Keep the three System cards wider on desktop. */
@media (min-width: 1001px) {
  .system-grid {
    gap: 24px;
  }
}

/* Final mobile overflow protection. */
@media (max-width: 680px) {
  .container,
  .fv__inner {
    padding-right: 24px;
    padding-left: 24px;
  }

  .fv__inner {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .fv__copy,
  .fv__sub,
  .fv__read {
    width: calc(100vw - 48px) !important;
    min-width: 0;
    max-width: calc(100vw - 48px) !important;
  }

  .fv__sub,
  .fv__read,
  main h1,
  main h2,
  main h3,
  main p,
  main li {
    max-width: 100%;
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .fv__title-en {
    max-width: 100%;
    font-size: clamp(38px, 11.5vw, 46px) !important;
    letter-spacing: -0.02em;
  }

  /* 「正社員の安心」「フリーランスの自由」を含む一文を、句の境目で
     強制改行せず自然に折り返す（各ハイライト語自体は nowrap のまま） */
  .fv__sub > span {
    display: inline;
  }

  .system-card--blue .system-card__items em,
  .system-choice li i {
    white-space: normal !important;
  }
}

/* ============================================================
   Final smartphone layout refinements
============================================================ */
@media (max-width: 680px) {
  /* Header / hamburger menu */
  .header {
    z-index: 1000;
  }

  .header__inner {
    position: relative;
    z-index: 1002;
    padding: 12px 20px;
  }

  .header__menu-btn {
    position: relative;
    z-index: 1003;
    flex: 0 0 44px;
  }

  .header__nav {
    position: absolute;
    inset: auto;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    z-index: 1001;
    padding: 88px 24px 32px;
    overflow-y: auto;
    background: rgba(255, 255, 255, 0.98);
  }

  .header__nav.is-open {
    z-index: 1001;
  }

  /* FV stats: three compact columns */
  .statpanel {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
  }

  .statpanel__item {
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    padding: 10px 4px;
    text-align: center;
  }

  .statpanel__item + .statpanel__item {
    border-top: 0;
    border-left: 1px solid var(--color-border);
  }

  .statpanel__ic {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
  }

  .statpanel__txt {
    align-items: center;
    text-align: center;
  }

  .statpanel__label,
  .statpanel__sub {
    font-size: 9px;
    line-height: 1.35;
  }

  .statpanel__val,
  .statpanel__val--sm {
    font-size: clamp(22px, 7vw, 28px);
  }

  /* Problem: compact 2 x 2 cards */
  .problem-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 24px;
  }

  .problem-card {
    min-height: 148px;
    padding: 14px 10px;
  }

  .problem-card__img {
    width: 86px;
    height: 72px;
  }

  .problem-card h3 {
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.45;
  }

  .problem-card h3::after {
    width: 38px;
    margin-top: 8px;
  }

  /* New Option comparison: centered content */
  .option-grid--renewed .option-card {
    padding: 18px 16px;
    text-align: center;
  }

  .option-card__head {
    justify-content: center;
  }

  .option-grid--renewed .option-card ul {
    align-items: center;
  }

  .option-grid--renewed .option-card li,
  .option-grid--renewed .option-card--main li {
    justify-content: center;
    padding-left: 0;
    text-align: center;
  }

  .option-grid--renewed .option-card li::before,
  .option-grid--renewed .option-card--main li::before {
    position: static;
    flex: 0 0 auto;
    margin-right: 8px;
  }

  /* Message: keep face clear and shorten the three belief cards */
  .message__photo {
    min-height: 470px;
  }

  .message__photo-shape {
    inset: 0 0 190px;
  }

  .message__img {
    object-position: center top;
  }

  .message__vertical {
    display: none;
  }

  .message__beliefs {
    right: 0;
    bottom: 0;
    left: 0;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .message__beliefs span {
    min-height: 54px;
    grid-template-columns: 34px minmax(0, 1fr);
    place-items: center start;
    gap: 10px;
    padding: 8px 14px;
    text-align: left;
  }

  .message__beliefs span br {
    display: none;
  }

  .message__beliefs .line-icon {
    width: 32px;
    height: 32px;
  }

  /* Projects */
  .projects__photo {
    min-height: 0;
    height: 220px;
  }

  .projects__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 35%;
  }

  .project-flow {
    gap: 16px;
  }

  .project-flow li {
    padding: 18px 16px;
  }

  /* Selection flow: preserve each step as a distinct group */
  .selection-flow ol {
    display: grid;
    gap: 14px;
  }

  .selection-flow li {
    min-height: 76px;
    grid-template-columns: 52px minmax(0, 1fr);
    padding: 12px 16px;
  }

  /* Voice */
  .voice .section-title + .voice-grid {
    margin-top: 26px;
  }

  .voice-grid {
    gap: 18px;
  }

  .voice-card {
    padding: 18px;
  }

  .voice-card img {
    height: 170px;
    aspect-ratio: auto;
    object-fit: cover;
    object-position: center 28%;
    margin-bottom: 12px;
  }

  .voice-card span {
    margin-bottom: 8px;
    font-size: 36px;
  }

  .voice-card h3 {
    min-height: 0;
    margin-bottom: 10px;
    font-size: 18px;
    line-height: 1.55;
  }

  .voice-card p {
    padding-top: 14px;
  }

  /* Let's Talk */
  .entry__actions {
    grid-column: 1 / -1;
    justify-self: stretch;
    width: 100%;
    max-width: none;
  }

  .entry__actions .btn {
    justify-self: stretch;
    width: 100%;
    max-width: none;
    min-height: 58px;
    padding-right: 22px;
    padding-left: 22px;
  }
}

/* Final smartphone text and spacing refinements */
@media (max-width: 680px) {
  .problem .section-title {
    text-align: center;
    transform: none;
  }

  .option-cta span:first-child {
    font-size: 13px;
  }

  .system-card__head {
    justify-content: center;
    text-align: center;
  }

  .system-card__head h3 {
    text-align: center;
  }

  .faq__item summary {
    padding: 16px 48px 16px 56px;
    font-size: 16px;
    line-height: 1.55;
  }

  .faq__item summary::before {
    left: 20px;
    top: 50%;
    font-size: 18px;
    transform: translateY(-50%);
  }

  .faq__item p {
    position: relative;
    padding: 14px 18px 18px 56px;
    font-size: 14px;
    line-height: 1.75;
  }

  .faq__item p::before {
    position: absolute;
    top: 14px;
    left: 20px;
    margin-right: 0;
    font-size: 18px;
  }

  .entry .section-title {
    font-size: clamp(28px, 8.5vw, 38px);
    line-height: 1.35;
  }

  .entry__actions {
    width: calc(100% + 24px);
    margin-left: -12px;
  }

  .entry__actions .btn {
    width: 100% !important;
    min-width: calc(100vw - 96px);
    max-width: calc(100vw - 96px);
  }
}

/* Final smartphone card centering refinements */
@media (max-width: 680px) {
  /* New Option: keep the heading itself on the visual center */
  .option-grid--renewed .option-card__head {
    position: relative;
    min-height: 46px;
    justify-content: center;
    padding-right: 52px;
    padding-left: 52px;
  }

  .option-grid--renewed .option-card__symbol,
  .option-grid--renewed .option-card__symbol--brand {
    position: absolute;
    top: 50%;
    left: 4px;
    width: 42px;
    height: 42px;
    transform: translateY(-50%);
  }

  .option-grid--renewed .option-card__head h3 {
    width: 100%;
    margin: 0;
    text-align: center;
  }

  .option-grid--renewed .option-card ul {
    gap: 5px;
  }

  .option-grid--renewed .option-card li,
  .option-grid--renewed .option-card--main li {
    min-height: 0;
    padding-top: 4px;
    padding-bottom: 4px;
    line-height: 1.4;
  }

  /* System: icon on the left, heading text on the true center */
  .system-card__head {
    position: relative;
    min-height: 52px;
    justify-content: center;
    padding-right: 56px;
    padding-left: 56px;
  }

  .system-card__head .line-icon {
    position: absolute;
    top: 50%;
    left: 6px;
    width: 42px !important;
    height: 42px !important;
    flex-basis: 42px;
    transform: translateY(-50%);
  }

  .system-card__head h3 {
    width: 100%;
    margin: 0;
    text-align: center;
  }

  .system-card__content--metrics,
  .system-metric,
  .system-guarantee {
    justify-items: center;
    align-items: center;
    text-align: center;
  }

  .system-metric span,
  .system-metric strong,
  .system-guarantee > span,
  .system-guarantee strong {
    text-align: center;
  }

  .voice-card p {
    font-size: 13px;
    line-height: 1.75;
  }

  .faq__item summary {
    font-size: 14px;
  }

  .faq__item p {
    font-size: 13px;
  }

  .entry__actions {
    justify-self: center;
    justify-items: center;
    width: calc(100vw - 96px);
    margin-right: auto;
    margin-left: auto;
  }
}

/* ============================================================
   July 2026 polish: hero, representative message, system cards
============================================================ */

/* Keep the English hero wordmark decorative, not on top of the main message. */
@media (min-width: 681px) {
  .fv__title-en {
    top: -2.25em;
    left: .24em;
    font-size: clamp(16px, 1.35vw, 22px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: .07em;
    opacity: .55;
  }

  .is-loaded .fv__title-en.load-fade {
    opacity: .55;
    transform: none;
  }
}

/* The photo remains prominent while the signature sits close to the message band. */
.message__band {
  margin-top: -100px;
  background: linear-gradient(115deg, rgba(47, 142, 235, .80) 0%, rgba(109, 69, 245, .80) 100%);
}

@media (min-width: 1001px) {
  .message__photo {
    min-height: 400px;
  }

  .message__photo::before {
    width: 460px;
    height: 460px;
    top: -12%;
  }

  /* 縦書きテキスト削除で空いた右側の余白を写真に使う */
  .message__photo-shape {
    inset: -16px 50px 0 54px;
    overflow: visible;
  }

  /* 代表写真を少し大きく（下端基準で拡大） */
  .message__img {
    transform: scale(1.18);
    transform-origin: bottom center;
  }

  .message__band {
    /* 写真拡大に伴い、帯が写真と重ならない位置に再調整 */
    margin-top: 46px;
    background: linear-gradient(115deg, rgba(47, 142, 235, .80) 0%, rgba(109, 69, 245, .80) 100%);
  }

  .fv__actions a[href="#projects"] {
    min-width: 220px;
  }
}

/* Make each system card read as: icon and label / main benefit / evidence. */
.sys5-card {
  display: flex;
  min-height: 0;
  flex-direction: column;
}

.sys5-card__head {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  margin-bottom: 16px;
}

.sys5-card__icon {
  width: clamp(66px, 5vw, 76px);
  height: clamp(66px, 5vw, 76px);
  background: linear-gradient(145deg, #eef4ff, #f7f4ff);
}

.sys5-card__icon img {
  width: 58%;
  height: 58%;
}

.sys5-card__head h3 {
  font-size: clamp(20px, 1.85vw, 27px);
  line-height: 1.35;
}

.sys5-card__value {
  padding-top: 22px;
  text-align: center;
  font-size: clamp(44px, 4.3vw, 64px);
  line-height: 1.08;
}

/* Text-based benefits stay subordinate to the numeric proof points. */
.sys5-card:nth-child(2) .sys5-card__value,
.sys5-card:nth-child(5) .sys5-card__value {
  font-size: clamp(32px, 3.1vw, 46px);
}

.sys5-card__value::before {
  left: 50%;
  transform: translateX(-50%);
  width: 64px;
}

.sys5-card__suffix {
  margin-left: .1em;
  font-size: .7em !important;
}

.sys5-card__desc {
  margin-top: 14px;
  padding-top: 0;
  text-align: center;
  font-size: clamp(13px, 1.15vw, 16px);
  line-height: 1.7;
}

@media (max-width: 680px) {
  .fv__title-en {
    top: -2.15em;
    left: 24px;
    font-size: 15px !important;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .06em;
    opacity: .55;
  }

  .is-loaded .fv__title-en.load-fade {
    opacity: .55;
    transform: none;
  }

  .message__band {
    margin-top: -100px;
    background: linear-gradient(115deg, rgba(47, 142, 235, .80) 0%, rgba(109, 69, 245, .80) 100%);
  }

  .sys5-card {
    min-height: 0;
  }

  .sys5-card__icon {
    width: 62px;
    height: 62px;
  }

  .sys5-card__head h3 {
    font-size: 21px;
  }

  .sys5-card__value {
    font-size: clamp(40px, 12vw, 54px);
  }

  .sys5-card:nth-child(2) .sys5-card__value,
  .sys5-card:nth-child(5) .sys5-card__value {
    font-size: clamp(30px, 9vw, 40px);
  }
}

/* ============================================================
   選考フロー（デスクトップ）：アイコンをノードとして残し、
   カード内の番号を省いて混雑を解消。背景の縦線を実線化して
   「つながる導線」を強調する。
   ※ モバイル(≤680px)は番号がノードのため対象外
============================================================ */
@media (min-width: 1001px) {
  /* カード内の番号（01…）を非表示 */
  .selection-flow b {
    display: none;
  }
  /* 外側のアイコン用ガターを廃止し、カード内にアイコン＋見出しを横並び */
  .selection-flow ol {
    padding-left: 0;
  }
  .selection-flow li {
    grid-template-columns: auto 1fr;
    column-gap: 22px;
    padding: 14px 28px;
    min-height: 0;
  }
  /* アイコンをカード内（in-flow）に配置し80%サイズへ。
     アイコン自体の白箱（背景・影・角丸）を外して見出しと一体化 */
  .selection-flow img.line-icon {
    position: static;
    transform: none;
    left: auto;
    top: auto;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }
  /* アイコン中心を通す縦線（アイコン＋丸の中心を縦につなぐ） */
  .selection-flow ol::before {
    left: 25px;
    top: 44px;
    bottom: 44px;
    border-left: 2px solid rgba(47, 142, 235, .32);
  }
}

/* ============================================================
   LET'S TALK（entry）：鮮やかなグラデを全面に敷いた最終CTA
   ※ 添付デザインに合わせて白カード調を廃止し、白文字＋
     丸アイコン付きボタン＋半透明チップに。末尾で確実に最後勝ち
============================================================ */
.entry {
  background:
    radial-gradient(circle at 80% 16%, rgba(255, 255, 255, .18), transparent 30%),
    radial-gradient(130% 120% at 112% 128%, #5A34D8 0%, rgba(90, 52, 216, .0) 46%),
    linear-gradient(114deg, #14ADC6 0%, #2A7BEE 52%, #3A63E2 100%);
  color: #fff;
  text-align: left;
  overflow: hidden;
}

/* 装飾のきらめき */
.entry::before {
  content: "";
  display: block;
  position: absolute;
  top: 12%;
  right: 8%;
  width: 26px;
  height: 26px;
  background:
    radial-gradient(circle, #fff 0 18%, transparent 22%),
    conic-gradient(from 0deg, transparent, rgba(255,255,255,.9), transparent 30%);
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent 0, transparent 30%, #000 31%);
  opacity: .0;
}

.entry .eyebrow {
  display: none;
}

.entry__layout {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
  align-items: center;
}

.entry .section-title {
  color: #fff;
}

.entry .section-title::after {
  display: block;
  background: var(--color-accent);
}

.entry__lead {
  color: rgba(255, 255, 255, .92);
}

/* 最終CTAボタン（矢印なし・サイト内で体裁統一） */
.entry__actions .btn {
  min-height: 64px;
  padding: 12px 32px;
  border-radius: 999px;
  justify-content: center;
  font-size: 16px;
}

.entry__actions .btn::after {
  content: none;
}

.entry__actions .btn--white {
  background: #fff;
  color: #171C61;
  box-shadow: 0 20px 48px rgba(12, 24, 80, .38),
              inset 0 1px 0 rgba(255, 255, 255, .4);
}

.entry__actions .btn--ghost-white {
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, .55);
  color: #fff;
  box-shadow: none;
}

/* 信頼テキスト：カード化せず、控えめなドット付きのプレーンなテキストに */
.entry__trust {
  justify-content: center;
  gap: 10px 30px;
  border-top: 0;
  padding-top: clamp(22px, 3vw, 34px);
}

.entry__trust li {
  display: inline-flex;
  align-items: center;
  min-height: auto;
  padding: 0;
  border: 0;
  background: none;
  color: rgba(255, 255, 255, .95);
  font-size: 14px;
  font-weight: 700;
}

.entry__trust li::before {
  content: "";
  position: static;
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 9px;
  border: 0;
  border-radius: 50%;
  background: var(--color-accent);
  transform: none;
}

/* ============================================================
   08 Voice：社員の声カード（丸い顔写真＋職種タグ＋キャッチ＋事実3項目）
   ※ 既存の float / 番号レイアウトを打ち消し、末尾で最後勝ち。
     ホバー演出はすべて無効化（常時同じ見え方）。
     顔写真はリング入りの素材を使うため、CSS側のリングは使わない。
============================================================ */
@media (min-width: 1001px) {
  .voice-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.voice-grid {
  gap: clamp(26px, 3vw, 40px);
  /* PCで箱の高さを揃える */
  align-items: stretch;
}

.voice-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  height: 100%;
  margin-top: 52px;
  padding: 66px 26px 30px;
  border: 1px solid var(--color-border);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 16px 40px rgba(47, 74, 125, .09);
  transition: none;
  overflow: visible;
}

/* ホバー演出の完全無効化 */
.voice-card:hover {
  transform: none;
  box-shadow: 0 16px 40px rgba(47, 74, 125, .09);
}

/* 素材側にリングがあるため擬似要素のリングは出さない */
.voice-card::before { content: none; }

/* 顔写真：カード上部中央、少しはみ出す */
.voice-card img {
  position: absolute;
  top: -52px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  width: 104px;
  height: 104px;
  aspect-ratio: auto;
  float: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  object-fit: contain;
  background: #fff;
}

/* 氏名 */
.voice-card h3.voice-card__name {
  clear: none;
  min-height: 0;
  margin: 0 0 12px;
  font-size: clamp(18px, 1.5vw, 21px);
  font-weight: 900;
  line-height: 1.4;
  color: var(--color-text);
}
/* 見出し下の線・旧番号スタイルの装飾は出さない */
.voice-card h3::after,
.voice-card span::after { content: none; }

/* 入社年＋職種タグ */
.voice-card p.voice-card__meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 18px;
  padding: 0;
  border: 0;
}
.voice-card span.voice-card__year {
  display: inline;
  margin: 0;
  background: none;
  -webkit-text-fill-color: currentColor;
  line-height: 1.4;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--color-text-sub);
  letter-spacing: .02em;
}

/* 職種タグ：テキスト幅の小さめピル・職種ごとに色替え */
.voice-card small {
  width: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 5px 14px;
  border: 0;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .02em;
  background: #eef2f7;
  color: #4b5563;
}
/* インフラ・AWS＝パープル / PHPバックエンド＝ブルーグリーン / PHP・Laravel＝ターコイズ */
.voice-card--1 small { background: rgba(122, 60, 255, .13); color: #6A3CE0; }
.voice-card--2 small { background: rgba(14, 150, 175, .15); color: #0C7C9C; }
.voice-card--3 small { background: rgba(20, 191, 175, .14); color: #0E9A90; }

/* 事実3項目（入社のきっかけ / 入社後 / 印象） */
.voice-card .voice-card__facts {
  width: 100%;
  margin: 0;
  text-align: left;
}
.voice-card__facts dt {
  position: relative;
  margin: 0 0 4px;
  padding-left: 14px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--color-text-sub);
}
.voice-card__facts dt::before {
  content: "";
  position: absolute;
  left: 0;
  top: .42em;
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: var(--color-primary);
  transform: rotate(45deg);
}
.voice-card__facts dd {
  margin: 0 0 16px;
  padding-left: 14px;
  /* 元の14pxから10%縮小 */
  font-size: 12.6px;
  font-weight: 700;
  line-height: 1.7;
  color: var(--color-text);
}
.voice-card__facts dd:last-child { margin-bottom: 0; }

/* ============================================================
   Laptop first view: prioritize the reading line over decoration.
   Larger desktop and phone layouts deliberately keep their existing composition.
============================================================ */
@media (min-width: 681px) and (max-width: 1399px) {
  .fv {
    /* ヘッダーとの間にもう少し余裕を持たせる（+10px） */
    padding-top: 94px;
    padding-bottom: 46px;
  }

  .fv__inner {
    grid-template-columns: minmax(0, 1fr) minmax(110px, .20fr);
    gap: 12px;
    padding-inline: 32px;
  }

  .fv__copy {
    width: 100%;
    max-width: none !important;
    padding-left: 0;
    padding-top: 30px;
    min-width: 0;
    transform: none;
  }

  .fv__title-en {
    top: -.375em !important;
    left: .24em;
  }

  .fv__title-ja {
    font-size: clamp(21px, 2.9vw, 29px);
    line-height: 1.35;
    letter-spacing: 0;
    white-space: nowrap;
    margin-bottom: 12px;
  }

  .fv__title-ja br {
    display: none;
  }

  .fv__title-ja span {
    display: inline;
  }

  .fv__sub {
    display: flex;
    align-items: baseline;
    font-size: clamp(13px, 1.65vw, 16px);
    line-height: 1.6;
    white-space: nowrap;
    margin-bottom: 16px;
  }

  .fv__sub > span,
  .fv__sub > span:last-child {
    display: contents !important;
  }

  .fv__sub-hl {
    padding-inline: .2em;
  }

  .fv__actions {
    gap: 10px;
    flex-wrap: nowrap;
  }

  .fv__actions .btn--lg {
    min-height: 46px;
    padding: 10px 16px;
    font-size: 13px;
  }

  .fv__actions a[href="#projects"] {
    min-width: 146px;
  }

  .fv__visual {
    width: 100%;
    max-width: none;
    justify-self: end;
    align-self: end;
    transform: scale(.82);
    transform-origin: right bottom;
  }

  .fv__collage {
    width: clamp(190px, 28vw, 272px);
    margin-left: auto;
  }

  .fv__deco-blob {
    width: 54%;
    right: -8%;
    bottom: -4%;
    opacity: .65;
  }

  .fv__deco-circle {
    width: 76px;
    left: -8%;
    top: 12%;
    opacity: .42;
  }

  .fv__bg::before {
    width: 330px;
    height: 330px;
    right: -14%;
    top: 2%;
    filter: opacity(.6);
  }

  .fv__bg::after {
    opacity: .24;
  }
}

@media (min-width: 901px) and (max-width: 1399px) {
  .fv__title-ja {
    font-size: clamp(26px, 3.06vw, 36px);
  }

  .fv__sub {
    font-size: clamp(16px, 2vw, 19px);
  }

  .fv__visual,
  .is-loaded .fv__visual.load-fade {
    transform: scale(.836) !important;
    transform-origin: right bottom;
  }

  .fv__collage {
    width: clamp(160px, 17vw, 220px);
  }

  .fv__actions .btn--lg,
  .fv__actions a[href="#projects"] {
    min-width: 220px;
    padding-inline: 26px;
  }
}

/* ------------------------------------------------------------
   FV：681〜1399px（タブレット〜ノートPC帯）
   従来はこの帯で見出しを1行に詰め、写真を小さく右に寄せていた
   ため、写真が小さく見えていた。見出しを2行（自然な折り返し）に
   戻して左カラムの幅を抑え、その分を写真カラムに回して写真を
   大きくする。681px下限でも収まるようclampの下限値を調整。
   （スマホ版は @media (max-width:680px) が別途あり、この
   ブロックの対象外＝変更なし）
------------------------------------------------------------ */
@media (min-width: 681px) and (max-width: 1399px) {
  /* 1400px以上と同じ、画面高さ基準の余白に揃える
     （従来の固定値 padding-top:94px / padding-bottom:46px が
     1400px以上より上下に余白を残しすぎていた） */
  .fv {
    padding-top: clamp(86px, 7.8vh, 102px);
    padding-bottom: clamp(14px, 2vh, 26px);
  }

  .fv__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
    gap: clamp(20px, 2.4vw, 36px);
    align-items: center;
  }

  /* 見出しを2行に戻す
     （761px付近の狭い側では28px固定だと1行目
     「エンジニアのキャリアを、」が収まりきらず3行に
     割れてしまうため、下限を24pxに下げて2行に収める） */
  .fv__title-ja {
    font-size: clamp(24px, 3.1vw, 40px);
    line-height: 1.3;
    white-space: normal;
    margin-bottom: clamp(14px, 1.6vw, 20px);
  }
  .fv__title-ja br { display: block; }
  .fv__title-ja span { display: inline; }

  /* サブコピーも自然に折り返す（1行固定を解除） */
  .fv__sub {
    display: block;
    white-space: normal;
    font-size: clamp(15px, 1.55vw, 18px);
    line-height: 1.7;
  }

  /* 写真を大きく：縮小をやめ、カラム幅いっぱいに近づける */
  .fv__visual,
  .is-loaded .fv__visual.load-fade {
    transform: none !important;
    justify-self: end;
    align-self: center;
  }
  .fv__collage {
    width: 100%;
    max-width: clamp(390px, 42vw, 580px);
    margin-left: auto;
  }
}

/* 681〜760px専用の縮小ルール（写真156px・見出し20px）は撤去。
   上の @media (681px〜1399px) が同じ幅帯を「写真を大きく・
   見出し2行」でカバーするため不要になった。 */

/* Keep the early decision sections dense enough to read as one sequence. */
.top-problem,
.new-option {
  min-height: 0;
  padding: clamp(52px, 4.8vw, 80px) 0;
}

.top-problem .problem-cards {
  margin-top: clamp(40px, 4.8vw, 64px);
}

/* The final CTA should feel decisive, not like another full-height page. */
.entry {
  min-height: 0;
  padding: clamp(52px, 4.5vw, 68px) 0 clamp(38px, 3.5vw, 52px);
}

/* Desktop: lift the FV stat band and its contents together into the hero. */
@media (min-width: 1001px) {
  .statband {
    margin-top: 0;
    margin-bottom: -60px;
    transform: translateY(-60px);
  }

  .statband__lead {
    /* 下の余白を1.3倍に */
    margin-bottom: 10px;
  }

  .statpanel {
    padding-top: 0;
  }
}

.newopt-card__mobile,
.newopt-mobile-break {
  display: none;
}

/* Keep information-dense copy compact and easy to scan. */
.newopt-copy .section-title {
  font-size: clamp(20px, 2.7vw, 31px);
}

.problem .lead,
.message__body p:not(.message__quote):not(.message__sign),
.system .lead,
.projects .lead {
  line-height: 1.5;
}

/* Mobile: keep the people photo as a small companion to the sub-copy, above the CTAs. */
@media (max-width: 680px) {
  .fv__title-en {
    top: calc(-2.15em + 10px) !important;
  }

  .fv__cta::after {
    content: "→";
    margin-left: 4px;
    font-size: 1.1em;
    font-weight: 900;
    line-height: 1;
  }

  .fv__visual,
  .is-loaded .fv__visual.load-fade {
    position: absolute;
    z-index: 3;
    top: clamp(100px, 29vw, 128px);
    right: 0;
    width: min(42vw, 164px);
    max-width: none;
    margin: 0;
    transform: none !important;
    transform-origin: right top;
  }

  .fv__collage {
    width: 100%;
    max-width: none;
    margin: 0;
  }

  .fv__copy .fv__sub {
    padding-right: min(42vw, 164px);
  }

  .fv__deco-blob,
  .fv__deco-circle {
    display: none;
  }

  /* Lift the complete stat band so the mobile first view is 50px shorter. */
  .statband {
    margin-top: 0 !important;
    margin-bottom: -50px;
    transform: translateY(-50px);
  }

  .statband__lead {
    margin-bottom: 16px;
    font-size: 13px;
  }

  .statchips {
    margin-top: 0;
    padding: 2px 0;
  }

  .statchips__viewport {
    padding-inline: 2px;
  }

  .statchips__track {
    padding: 0;
  }

  .statchips__chip {
    gap: 5px;
    margin-right: 6px;
    padding: 5px 10px;
    font-size: 11px;
  }

  .statchips__chip img {
    width: 13px;
    height: 13px;
  }

  /* Make the three key figures legible and truly centered. */
  .statpanel__item,
  .statpanel__txt {
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .statpanel__item {
    padding: 8px 2px;
  }

  .statpanel__label,
  .statpanel__sub {
    font-size: 11px;
    line-height: 1.3;
  }

  .statpanel__val,
  .statpanel__val--sm {
    font-size: clamp(23px, 7.41vw, 29px);
  }

  /* Give the long middle and right figures the room they need. */
  .statpanel {
    grid-template-columns: .72fr 1.08fr 1.2fr;
  }

  .statpanel__item:first-child {
    transform: translateX(-4px);
  }

  /* Use readable, slash-separated summaries instead of tiny three-column labels. */
  .newopt-card ul {
    display: none;
  }

  .newopt-card__mobile {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.65;
    text-align: center;
    color: var(--color-text-sub);
  }

  .newopt-card__head {
    justify-content: center;
    text-align: center;
    margin-bottom: 10px;
  }

  .newopt-box__head,
  .newopt-box__brand {
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .newopt-box__tagline {
    width: 100%;
    text-align: center;
  }

  .newopt-mobile-break {
    display: block;
  }

  /* The large photo backdrop was covering content below the portrait. */
  .message__photo::before,
  .message__photo-shape::after {
    display: none;
  }

  .message__photo-shape {
    /* Extend the portrait through the band boundary; the former 95px crop
       left a visible blank strip below the person on phones. */
    inset: 0 0 20px;
    transform: translateY(-25px);
  }

  .message__beliefs span + span {
    border-left: 0;
  }

  /* Slightly soften the oversized English section labels on mobile. */
  .problem .section-display,
  .about .section-display,
  .message .section-display,
  .system .section-display,
  .projects .section-display,
  .voice .section-display,
  .faq .section-display {
    font-size: clamp(50px, 16.2vw, 70px);
  }

  /* Keep the requested Japanese section messages compact. */
  .message .message__quote,
  .system .section-title,
  .voice .section-title,
  .faq .section-title {
    font-size: clamp(22px, 2.04vw, 32px);
  }

  /* Projects: keep the section promise quieter than the primary headings. */
  .projects .section-title {
    font-size: clamp(18px, 1.63vw, 26px);
  }
}

/* The project message is supporting copy, not a competing page headline. */
.projects .section-title {
  font-size: clamp(18px, 2.4vw, 27px);
}

/* Project examples become a deliberate horizontal carousel on compact screens.
   Native scrolling keeps it usable in Pinegrow previews and on touch devices. */
@media (max-width: 1000px) {
  .project-cards {
    display: flex;
    grid-template-columns: none;
    gap: 14px;
    width: calc(100% + 32px);
    margin-left: -16px;
    padding: 4px 16px 14px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .project-cards::-webkit-scrollbar {
    display: none;
  }

  .project-card {
    flex: 0 0 min(82vw, 340px);
    scroll-snap-align: start;
  }
}

/* Project participation flow: number / icon with heading / supporting copy. */
.project-flow li {
  grid-template-columns: 58px minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  gap: 6px 12px;
  align-items: start;
}

.project-flow b {
  grid-column: 1 / -1;
  grid-row: 1;
  align-self: start;
}

.project-flow .line-icon {
  grid-column: 1;
  grid-row: 2 / span 2;
  align-self: start;
}

.project-flow span {
  grid-column: 2;
  grid-row: 2;
  align-self: center;
}

.project-flow small {
  grid-column: 2;
  grid-row: 3;
  align-self: start;
}

@media (max-width: 680px) {
  .project-flow li {
    grid-template-columns: 50px minmax(0, 1fr);
    padding: 16px;
    text-align: left;
  }

  .project-flow .line-icon {
    width: 48px;
    height: 48px;
    margin: 0;
  }
}

/* The carousel track is transparent; only each project card has a surface. */
@media (max-width: 1000px) {
  .project-cards {
    background: transparent;
  }

  .project-cards::before,
  .project-cards::after {
    background: transparent;
  }
}

/* Tuck the supporting copy closer to its project-flow heading. */
.project-flow li {
  row-gap: 4px;
}

.project-flow small {
  line-height: 1.55;
}

/* Mobile background SVG: bring the shared moving wave closer to the viewer. */
@media (max-width: 680px) {
  .bg-stage__line {
    opacity: .10;
    transform: translate(-50%, -50%) rotate(-7deg) scale(3.6);
  }
}

@media (max-width: 680px) and (prefers-reduced-motion: no-preference) {
  .bg-stage__line {
    animation: bgWaveDriftMobile 18s ease-in-out infinite alternate;
  }
}

@keyframes bgWaveDriftMobile {
  0% {
    transform: translate(-54%, -52%) rotate(-9deg) scale(3.6);
    opacity: .10;
  }
  45% {
    transform: translate(-49%, -48%) rotate(-4deg) scale(3.71);
    opacity: .10;
  }
  100% {
    transform: translate(-46%, -51%) rotate(-12deg) scale(3.64);
    opacity: .10;
  }
}

/* Mobile Projects: halve the portrait panel while keeping the face in frame. */
@media (max-width: 680px) {
  .projects__photo {
    height: clamp(160px, 52.5vw, 200px);
  }

  .projects__photo img {
    object-position: center 42%;
  }
}

/* Mobile clean-up: keep decorative connectors behind content. */
@media (max-width: 680px) {
  /* FAQ selection line belongs behind the white cards, never over 01–05. */
  .selection-flow ol::before {
    z-index: 0;
  }

  .selection-flow li {
    z-index: 1;
  }

  /* The stacked project flow does not need desktop-only side dividers. */
  .project-flow li + li {
    border-left: 0;
  }

  /* Hide the Projects heading accent bar on phones. */
  .projects .section-title::after {
    display: none !important;
  }
}

/* Mobile FAQ: a continuous line links the five step icons. */
@media (max-width: 680px) {
  .selection-flow ol {
    --selection-flow-group-width: 246px;
    position: relative;
    padding-left: 0;
    gap: 14px;
  }

  /* アイコン列（52px）の中心だけをつなぐ。 */
  .selection-flow ol::before {
    display: block;
    left: calc(50% - 97px);
    top: 38px;
    bottom: 38px;
    z-index: 0;
    border-left: 2px solid rgba(47, 142, 235, .28);
  }

  .selection-flow li {
    position: relative;
    z-index: 1;
    grid-template-columns: 64px minmax(0, 1fr);
  }

  .selection-flow b,
  .selection-flow span {
    position: relative;
    z-index: 3;
  }
}

/* Problem heading: align the copy and its “career options” underline to the
   same left edge instead of centering the mobile composition. */
@media (max-width: 680px) {
  .problem .section-title {
    text-align: left;
  }

  .problem .section-title .u-mark {
    background: linear-gradient(transparent 62%, rgba(0, 162, 154, .16) 62%);
  }
}

/* Final compact-screen media rules.  They are deliberately last because
   Pinegrow previews can land between the older 680px and 1000px breakpoints. */
@media (max-width: 1000px) {
  .message__photo-shape {
    inset: 0;
    transform: translateY(-25px);
  }

  /* Preserve the portrait source rather than cropping it into a shallow,
     landscape strip above the project carousel. */
  .projects__photo {
    height: clamp(320px, 105vw, 400px);
    min-height: 0;
  }

  .projects__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }
}

@media (max-width: 680px) {
  .sys5-card__value::before {
    display: none;
  }
}

/* Compact mobile system cards: retain the hierarchy without the dead space. */
@media (max-width: 680px) {
  .sys5-card {
    padding: 14px 18px 13px;
  }

  .sys5-card__head {
    gap: 12px;
    margin-bottom: 6px;
  }

  .sys5-card__icon {
    width: 50px;
    height: 50px;
  }

  .sys5-card__head h3 {
    font-size: 19px;
  }

  .sys5-card__value {
    padding-top: 8px;
    font-size: clamp(36px, 10.5vw, 48px);
  }

  .sys5-card:nth-child(2) .sys5-card__value,
  .sys5-card:nth-child(5) .sys5-card__value {
    font-size: clamp(27px, 8vw, 35px);
  }

  .sys5-card__desc {
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.5;
  }
}

/* Keep the project photograph fixed in the page; only its cards scroll. */
@media (max-width: 1000px) {
  .projects__layout {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    min-width: 0;
  }

  .projects__photo {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    touch-action: pan-y;
  }

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

/* Project participation flow: left column is number then icon; right column
   is the title then its supporting copy, with the first row aligned. */
.project-flow li {
  grid-template-columns: 58px minmax(0, 1fr);
  grid-template-rows: minmax(34px, auto) auto;
  gap: 8px 12px;
  align-items: start;
}

.project-flow b {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
}

.project-flow .line-icon {
  grid-column: 1;
  grid-row: 2;
  align-self: start;
}

.project-flow span {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
}

.project-flow small {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
}

@media (max-width: 680px) {
  .project-flow li {
    grid-template-columns: 50px minmax(0, 1fr);
    grid-template-rows: minmax(32px, auto) auto;
  }
}

/* Last-resort layer order for the mobile FAQ connector. */
@media (max-width: 680px) {
  .selection-flow ol::before {
    z-index: 0;
  }

  .selection-flow li {
    z-index: 1;
  }
}

/* Final project-flow rhythm: keep its title and supporting copy close. */
.project-flow li {
  row-gap: 4px;
}

.project-flow small {
  line-height: 1.55;
}

/* ============================================================
   フッター前マージンを全ページで統一（PC 120px / SP 80px）
============================================================ */
.entry { padding-bottom: clamp(80px, 10vw, 120px); }

/* ============================================================
   Problem「単価が見えない」：横長イラストのため他カードと
   見た目の量感を揃えて0.7倍で配置（詳細度を上げて各所の
   .problem-card__img 指定に確実に勝たせる）
============================================================ */
.problem-card img.problem-card__img--wide {
  height: clamp(64px, 6.2vw, 88px);
}
@media (max-width: 680px) {
  .problem-card img.problem-card__img--wide {
    width: 100%;
    height: 50px;
  }
}

/* ============================================================
   KVボタンをサイト内で統一（トップ / 数字で見るフリコネ）
   - ラベルのフォントサイズは「数字で見る〜」ページ基準(16px)
   - 「10分で話を聞いてみる」＝吹き出しアイコンあり・矢印なし
   - 「募集職種を見る」＝アイコンなし・矢印なし
   - SPは横幅いっぱい＋中央揃え
============================================================ */
.fv__actions .btn--lg,
.fv__actions a[href="#projects"],
.dws-hero__actions .btn {
  min-width: 260px;
  min-height: 60px;
  padding: 12px 32px;
  font-size: 16px;
  line-height: 1.25;
  justify-content: center;
  white-space: nowrap;
}

/* KV/最終CTAともに矢印は出さない */
.fv__actions .btn::after,
.dws-hero__actions .btn::after {
  content: none;
}

@media (max-width: 680px) {
  .fv__actions,
  .dws-hero__actions {
    flex-direction: column;
    align-items: center;
    width: 100%;
  }
  .fv__actions .btn--lg,
  .fv__actions a[href="#projects"],
  .dws-hero__actions .btn,
  .entry__actions .btn {
    width: 100%;
    min-width: 0;
    max-width: none;
  }
}


/* ============================================================
   SP：選考フローを「アイコン＋見出し」の横並びにする
============================================================ */
@media (max-width: 680px) {
  .selection-flow li {
    grid-template-columns: 52px calc(var(--selection-flow-group-width) - 66px);
    column-gap: 14px;
    justify-content: center;
    justify-items: start;
    text-align: left;
    padding: 12px 0;
  }
  /* 番号は出さず、アイコンと見出しだけを表示 */
  .selection-flow b { display: none; }
  .selection-flow img.line-icon {
    display: block;
    position: static;
    transform: none;
    left: auto;
    top: auto;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }
  .selection-flow span::before { text-align: left; }
}

/* ============================================================
   LET'S TALK（フッター前CTA）：全体を中央揃えの1カラムに
   見出し → グラデーション下線 → リード → ボタン2つ（横並び中央）
============================================================ */
.entry .container { text-align: center; }

.entry__layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(22px, 2.6vw, 32px);
  padding: 0;
}

.entry__layout > div:first-child { width: 100%; }

.entry .section-title {
  text-align: center;
  margin-bottom: 0;
}

/* 見出し下の細いグラデーション線を中央に */
.entry .section-title::after {
  display: block;
  width: 120px;
  height: 3px;
  margin: clamp(18px, 2vw, 26px) auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #2ED9C6, #6FA8FF, #B57BFF);
}

.entry__lead {
  margin: clamp(16px, 1.8vw, 22px) auto 0;
  max-width: 720px;
  text-align: center;
}

/* ボタンは横並びで中央 */
.entry__actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 16px;
  width: auto;
  max-width: none;
  margin: 0 auto;
}

/* 幅は内容に合わせ、2つが横に並ぶように（ボタン幅はさらに広めに） */
.entry__actions .btn {
  width: auto;
  min-width: 420px;
  max-width: none;
  padding-left: 40px;
  padding-right: 40px;
}

@media (min-width: 1001px) {
  .entry__layout {
    grid-template-columns: none;
    column-gap: 0;
  }
  .entry__actions { width: auto; }
  .entry__actions .btn { width: auto; }
}

@media (max-width: 680px) {
  .entry__actions {
    flex-direction: column;
    width: 100%;
  }
  .entry__actions .btn { width: 100%; min-width: 0; }
}

/* ============================================================
   制度カード（5つの制度）の調整
   - 見出し下のグラデーションバーを削除
   - 説明テキストを少し小さく
   - カード高さを少しコンパクトに
============================================================ */
.sys5-card__value::before { display: none; }

.sys5-card__value { padding-top: 6px; }

.sys5-card__desc {
  margin-top: 10px;
  font-size: clamp(12px, 1vw, 13px);
  line-height: 1.65;
}

.sys5-card {
  padding: clamp(18px, 2vw, 26px) clamp(18px, 2vw, 24px);
}

.sys5-card__head { margin-bottom: 6px; }

/* ============================================================
   案件参画までの流れ：数字＋見出しを横並びに
============================================================ */
.project-flow .flow-head {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
}
.project-flow .flow-head b { margin-top: 0; }

/* アイコンは中央のまま、見出し・説明文は左寄せに。
   なるべく改行されないよう横幅を最大限使う */
@media (min-width: 681px) {
  .project-flow li {
    align-items: center;
  }
  .project-flow .flow-ic {
    align-self: center;
  }
  .project-flow .flow-head,
  .project-flow small {
    align-self: stretch;
    text-align: left;
  }
  /* テキストを白帯の内側に収める（左右）＋ 帯を下にしっかり伸ばす（下） */
  .project-flow li {
    padding: 0 clamp(20px, 2.4vw, 30px) clamp(24px, 2.8vw, 34px);
  }
}

@media (max-width: 1000px) {
  /* 旧グリッド指定の打ち消し（数字/見出しはflow-head側で制御） */
  .project-flow .flow-head {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    justify-content: flex-start;
  }
}

/* 案件参画フロー：帯を下げ、アイコンを上端から半分ほど浮かせる。
   （見出しとアイコン＋白帯の塊をより近づける） */
@media (min-width: 681px) {
  .project-flow {
    margin-top: clamp(12px, 1.2vw, 18px);
  }

  .project-flow li {
    background: linear-gradient(to bottom, transparent 0 38px, #fff 38px);
  }
}

/* ============================================================
   選考フロー：白地のカード枠を外し、アイコンは白抜き＋丸背景
============================================================ */
.selection-flow li {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding-left: 0;
  padding-right: 0;
}

/* 丸背景はラッパー側に。imgにfilterを掛けると背景まで白くなるため分離する */
.selection-flow .flow-ic {
  width: 52px;
  height: 52px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #2F8EEB, #6D45F5);
  box-shadow: 0 8px 20px rgba(47, 110, 230, .28);
}
.selection-flow .flow-ic img.line-icon {
  position: static;
  transform: none;
  left: auto;
  top: auto;
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  filter: brightness(0) invert(1);
}

/* ============================================================
   社員の声：高さを抑え、本文を読みやすい大きさに
============================================================ */
.voice-card {
  padding: 56px 22px 30px;
}

.voice-card .voice-card__facts dd {
  /* 元の17.5pxから10%縮小 */
  font-size: 15.75px;
  line-height: 1.5;
  margin-bottom: 8px;
}

.voice-card .voice-card__facts dt {
  font-size: 13px;
  /* ◆(diamond bullet)と同じブルーに揃える */
  color: var(--color-primary);
}

/* 事実テキストの左右余白を揃える（ダイヤ分の字下げに合わせて右も確保） */
.voice-card .voice-card__facts { padding-right: 14px; }

/* ============================================================
   SP：FVの並びを「キャッチ → サブコピー → 写真 → ボタン」に。
   写真は本来 .fv__copy の外にあるため、.fv__copy を display:contents で
   フラット化して order で並べ替える。写真は絶対配置をやめて全幅に。
============================================================ */
@media (max-width: 680px) {
  .fv__inner {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .fv__copy {
    display: contents;
  }
  .fv__title-ja { order: 2; }
  .fv__sub      { order: 3; margin-bottom: 0; }
  .fv__visual   { order: 4; }
  .fv__actions  { order: 5; }

  /* 写真を大きく：絶対配置を解除して全幅表示
     （既存の .is-loaded .fv__visual.load-fade に合わせて詳細度を揃える） */
  .fv__visual,
  .is-loaded .fv__visual.load-fade {
    position: static;
    width: 100%;
    max-width: none;
    top: auto;
    right: auto;
    transform: none !important;
    margin: 20px 0 24px;
    justify-content: center;
  }
  .fv__collage {
    width: 100%;
    max-width: none;
    margin: 0;
    flex: none;
  }
  /* 写真が下に回ったので、サブコピーの右側の逃げ幅は不要 */
  .fv__copy .fv__sub {
    padding-right: 0;
  }
  /* ボタンは矢印なしで統一 */
  .fv__cta::after {
    content: none;
  }
  /* 全幅写真の背面装飾は重なるので出さない */
  .fv__deco-blob,
  .fv__deco-circle { display: none; }
}

/* ============================================================
   SP：代表メッセージ
   - 並びを「引用 → 本文 → 写真 → 氏名」に（氏名を写真の下へ）
   - 余白を詰める
   - 帯は写真に重なる半透明のため、濃くして白文字の可読性を上げる
============================================================ */
@media (max-width: 680px) {
  .message__layout {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  /* 氏名は .message__body の中にあるため、フラット化して並べ替える */
  .message__body { display: contents; }

  .message__quote { order: 1; margin-bottom: 16px; }
  .message__body p:not(.message__quote):not(.message__sign) {
    order: 2;
    font-size: 14px;
  }
  .message__photo { order: 3; margin-top: 8px; min-height: 380px; }
  .message__sign  { order: 4; }

  /* 写真の下に氏名。帯の上の白背景に置いて読みやすく（濃色文字のまま） */
  .message__photo { margin-top: 4px; }
  .message__sign {
    position: relative;
    z-index: 3;
    width: auto;
    /* 写真素材下部のフェード領域へ寄せ、見た目の空白をさらに約半分にする。 */
    margin: -48px 0 0;
    padding: 0;
    text-align: center;
  }

  /* 帯は氏名の下から始める（写真・氏名に重ならないよう重なりを解除）。
     氏名は display:contents の都合で layout 枠を約26pxはみ出すため、
     その分を見込んだ余白を確保して帯が氏名に被らないようにする */
  .message__band {
    margin-top: 44px;
    background: linear-gradient(115deg, rgba(30, 120, 215, .97) 0%, rgba(95, 55, 230, .97) 100%);
  }
}

/* ============================================================
   SP：Voiceカード
   - 1列なので高さ揃え（stretch）は不要。各カードを内容の高さに
     縮め、下側の無駄な余白をなくす
   - カード内の下余白も半分に（背が高いので詰める）
   - 顔写真は上に52pxはみ出すため、カード間の余白を広げて
     前のカードに顔写真が重ならないようにする
============================================================ */
@media (max-width: 680px) {
  .voice-grid {
    gap: 60px;
    align-items: start;
  }
  .voice-card {
    height: auto;
    padding-bottom: 30px;
  }
}

/* ============================================================
   代表メッセージ下の帯（message__beliefs）：
   キーワード強調用のラッパー（<em>/<b> は既存の ".message__beliefs span"
   という子孫セレクタに巻き込まれないよう、あえて span 以外のタグを使用）
   ベースは見た目に影響しないニュートラルな指定のみ。PC表示はここでは変更しない。
============================================================ */
.message__belief-text {
  font-style: normal;
}
.message__belief-hl {
  font-weight: inherit;
  color: inherit;
  background: none;
}
.message__belief-hl__paper {
  font-style: normal;
  font-weight: inherit;
  color: inherit;
  background: none;
}

/* ============================================================
   SP：代表メッセージ下の帯をスマホ向けに組み替え
   - 3つのメッセージを縦積み、各行は「アイコン＋テキスト」の横並び
   - アイコンとテキストの間に細い点線区切りを追加
   - キーワードのみ白い座布団（斜めカットの紙片風）＋濃紺文字＋
     ライムイエローの下線。座布団以外の文字は白のまま
   - カード/ボタン化はせず、上下の余白を抑えたコンパクトな帯のまま
============================================================ */
@media (max-width: 680px) {
  .message__beliefs {
    padding: 20px 0;
  }

  .message__belief-text {
    position: relative;
    display: inline-block;
    padding-left: 12px;
    border-left: 1px dashed rgba(255, 255, 255, .5);
  }

  /* 控えめな座布団：下線なし・半透明・ひとまわり小さく。
     強調というより読みやすさを補助する程度の自然な見た目にする。 */
  .message__belief-hl {
    position: relative;
    display: inline-block;
    margin: 0 1px;
  }

  .message__belief-hl__paper {
    display: inline-block;
    padding: 1px 6px 3px;
    background: rgba(255, 255, 255, 0.68);
    color: #26325f;
    font-weight: 800;
    font-size: 0.94em;
    line-height: 1.3;
    clip-path: polygon(4% 0, 100% 0, 96% 100%, 0 100%);
  }
}

/* ============================================================
   社員の声（Voiceカード）：余白を詰めてコンパクトに
   ・顔写真→氏名、氏名→タグ、タグ→本文の余白を縮小
   ・入社のきっかけ／入社後／印象の各項目間も詰める
   ・本文の行間をわずかに狭める（上の 8384行 で 1.7→1.5 済み）
   ・カード下部の空白は、末尾のdd(印象)にも margin-bottom:15px が
     再度当たってしまいバグで消えていなかったため、ここで確実に0にする
     （".voice-card .voice-card__facts dd" と同じ詳細度のため、
     後勝ちのこの位置で :last-child を明示し直す）
   ・さらに、.voice-card の height:100% が原因でカード下部に約52pxの
     余分な空白が生じていた（%指定の高さが行トラックに対して意図せず
     大きく解決されるbrowserの挙動）。height:100%を外し、
     grid の align-items:stretch だけで3枚の高さ揃えを行う
============================================================ */
.voice-card {
  height: auto;
  align-self: stretch;
}

.voice-card h3.voice-card__name {
  margin-bottom: 6px;
}

.voice-card p.voice-card__meta {
  margin-bottom: 10px;
}

.voice-card__facts dt {
  margin-bottom: 2px;
}

.voice-card .voice-card__facts dd:last-child {
  margin-bottom: 0;
}

/* ============================================================
   代表メッセージ：写真が大きすぎる／帯と重なる問題を修正
   原因：".message__photo-shape, .projects__photo, .voice-card {
   position: relative }"（画像フォールバック用の共通ルール）が、
   .message__photo-shape 本来の position:absolute を後勝ちで
   打ち消していた。これにより中の<img>がin-flow化し、
   写真の実寸（自然な縦横比）がそのまま親要素の高さになり、
   広い画面ほど写真が肥大化 → 下の帯と重なっていた。
   .message__photo-shape だけ position:absolute に戻す。
   縦書きテキスト（message__vertical）はHTMLごと削除済み。
============================================================ */
.message__photo-shape {
  position: absolute;
}