/* ==========================================================================
   株式会社TKG コーポレートサイト — 共通スタイル（2026-10 全面リデザイン）

   世界観：ヒーロー画像と同じ「漆黒 × 金の光 × 殻」。
   - 基調は漆黒（--ink）。明るい面は殻の白（--shell）を .theme-light で差し込む
   - 見出しは巨大な角ゴシック、要の一文字だけ明朝＋金で立たせる
   - 英字ラベルは幅広のArchivo。巨大な輪郭文字を背景に流す
   ========================================================================== */

/* ページ間のシームレス遷移（View Transitions API）。
   対応ブラウザ（Chrome/Edge系）のみ有効。非対応ブラウザは通常の遷移のまま。 */
@view-transition {
  navigation: auto;
}

:root {
  /* カラー */
  --ink: #05080f;
  --ink-2: #0b1222;
  --navy: #0f1e3d;
  --navy-soft: #24365e;
  --yolk: #f2b632;
  --yolk-hi: #ffd66b;
  --yolk-deep: #d98a0c;
  --shell: #f3f0e7;
  --shell-2: #e8e3d5;

  /* 面ごとに切り替わる前景色（既定＝漆黒の面） */
  --fg: #f4f1e8;
  --fg-muted: #9ea7bb;
  --line: rgba(244, 241, 232, 0.16);
  --card: rgba(255, 255, 255, 0.04);

  /* 旧トークン名（下層ページ内のインラインstyle等が参照） */
  --yellow: var(--yolk);
  --yellow-soft: #fbe3ac;
  --border: var(--line);
  --muted: var(--fg-muted);
  --surface: var(--card);

  /* タイポグラフィ */
  --font-display: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-serif: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-en: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;

  --fs-mega: clamp(38px, 6.6vw, 112px);
  --fs-h2: clamp(32px, 5.4vw, 84px);
  --fs-h3: clamp(20px, 2.1vw, 30px);

  /* レイアウト */
  --max-width: 1280px;
  --gutter: clamp(20px, 5vw, 72px);
  --section-pad: clamp(80px, 12vw, 168px);
  --header-h: 76px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

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

a {
  color: inherit;
}

::selection {
  background: var(--yolk);
  color: var(--ink);
}

:focus-visible {
  outline: 2px solid var(--yolk);
  outline-offset: 4px;
}

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

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 900;
  line-height: 1.18;
  letter-spacing: -0.01em;
  font-feature-settings: "palt";
  margin: 0;
}

section {
  position: relative;
  padding-block: var(--section-pad);
}

.theme-light {
  --fg: #0a1226;
  --fg-muted: #566078;
  --line: rgba(10, 18, 38, 0.16);
  --card: #ffffff;
  background: var(--shell);
  color: var(--fg);
}

/* ---------- 英字ラベル ---------- */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-en);
  font-stretch: 112%;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--yolk);
}

.eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--yolk);
  transform: rotate(45deg);
  flex-shrink: 0;
}

.theme-light .eyebrow {
  color: var(--yolk-deep);
}

/* ---------- 見出しブロック ---------- */

.sec-head,
.section-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(16px, 2vw, 26px);
  max-width: 760px;
  margin-bottom: clamp(40px, 6vw, 80px);
}

.sec-head h2,
.section-head h2 {
  font-size: var(--fs-h2);
}

.section-head h2 {
  font-size: clamp(28px, 4.2vw, 60px);
}

.sec-head p,
.section-head p {
  margin: 0;
  color: var(--fg-muted);
  font-size: clamp(14.5px, 1.2vw, 17px);
  max-width: 46ch;
}

/* ---------- ボタン ---------- */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 18px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.04em;
  text-decoration: none;
  padding: 18px 24px 18px 30px;
  border: 1px solid transparent;
  border-radius: 999px;
  overflow: hidden;
  cursor: pointer;
  isolation: isolate;
  transition: color 0.45s var(--ease), border-color 0.45s var(--ease);
}

/* ホバーで下から色がせり上がる */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  transform: translateY(101%);
  transition: transform 0.55s var(--ease);
}

.btn:hover::before,
.btn:focus-visible::before {
  transform: none;
}

.btn-arrow {
  position: relative;
  display: inline-block;
  width: 22px;
  height: 10px;
  flex-shrink: 0;
  transition: transform 0.45s var(--ease);
}

.btn-arrow::before {
  content: "";
  position: absolute;
  left: 0;
  right: 1px;
  top: 50%;
  height: 1.5px;
  margin-top: -0.75px;
  background: currentColor;
}

.btn-arrow::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
}

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

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

.btn-primary::before {
  background: #fff;
}

.btn-ghost {
  border-color: rgba(244, 241, 232, 0.4);
  color: #fff;
}

.btn-ghost::before {
  background: #fff;
}

.btn-ghost:hover {
  color: var(--ink);
  border-color: #fff;
}

.btn-line {
  border-color: var(--line);
  color: var(--fg);
}

.btn-line::before {
  background: var(--yolk);
}

.btn-line:hover {
  color: var(--ink);
  border-color: var(--yolk);
}

.btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

.btn[disabled]::before {
  display: none;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* ---------- ヘッダー ---------- */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--header-h);
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: top 0.5s var(--ease);
}

/* すりガラスの帯は擬似要素に持たせる（header本体にbackdrop-filterを付けると
   中の全画面メニュー（position:fixed）の基準がheaderになってしまうため） */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(5, 8, 15, 0.72);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(244, 241, 232, 0.08);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.site-header.is-scrolled::before {
  opacity: 1;
}

.site-header.is-hidden {
  top: calc(var(--header-h) * -1 - 4px);
}

.logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  position: relative;
  z-index: 2;
}

.logo img {
  display: block;
  height: 28px;
  width: auto;
}

.site-header .logo {
  view-transition-name: site-logo;
}

.nav {
  display: flex;
  align-items: stretch;
  gap: clamp(18px, 2.6vw, 40px);
  height: 100%;
}

.nav a {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-decoration: none;
  color: #fff;
}

.nav .en {
  font-family: var(--font-en);
  font-stretch: 112%;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.14em;
}

.nav .jp {
  font-size: 10px;
  letter-spacing: 0.12em;
  color: rgba(244, 241, 232, 0.6);
  line-height: 1.4;
}

.nav a:not(.nav-cta)::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 14px;
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  background: var(--yolk);
  transform: rotate(45deg) scale(0);
  transition: transform 0.35s var(--ease);
}

.nav a:not(.nav-cta):hover::after,
.nav a[aria-current="page"]::after {
  transform: rotate(45deg) scale(1);
}

/* 上端から垂れ下がる金のタブ */
.nav-cta {
  align-self: flex-start;
  height: calc(var(--header-h) + 14px);
  padding-inline: 30px;
  background: var(--yolk);
  color: var(--ink) !important;
  border-radius: 0 0 14px 14px;
  transition: height 0.45s var(--ease), background 0.3s ease;
}

.nav-cta .jp {
  color: rgba(5, 8, 15, 0.7);
}

.nav-cta:hover {
  height: calc(var(--header-h) + 26px);
  background: var(--yolk-hi);
}

.nav-toggle {
  display: none;
  position: relative;
  z-index: 2;
  width: 48px;
  height: 48px;
  margin-right: -10px;
  background: none;
  border: none;
  cursor: pointer;
}

.nav-toggle span {
  position: absolute;
  left: 11px;
  right: 11px;
  height: 2px;
  background: #fff;
  transition: transform 0.45s var(--ease), top 0.45s var(--ease);
}

.nav-toggle span:nth-child(1) { top: 19px; }
.nav-toggle span:nth-child(2) { top: 28px; }

.nav-toggle[aria-expanded="true"] span:nth-child(1) { top: 23px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { top: 23px; transform: rotate(-45deg); }

@media (max-width: 900px) {
  :root {
    --header-h: 64px;
  }

  .nav-toggle {
    display: block;
  }

  /* 全画面メニュー：右上から円が広がって開く */
  .nav {
    position: fixed;
    inset: 0;
    height: auto;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 6px;
    padding: var(--header-h) var(--gutter) 40px;
    background: var(--ink-2);
    clip-path: circle(0% at calc(100% - 44px) 32px);
    visibility: hidden;
    transition: clip-path 0.7s var(--ease), visibility 0s 0.7s;
  }

  .nav.is-open {
    clip-path: circle(150% at calc(100% - 44px) 32px);
    visibility: visible;
    transition: clip-path 0.7s var(--ease), visibility 0s;
  }

  .nav a {
    flex-direction: row;
    align-items: baseline;
    gap: 14px;
    padding-block: 10px;
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.5s ease, transform 0.6s var(--ease);
  }

  .nav.is-open a {
    opacity: 1;
    transform: none;
  }

  .nav.is-open a:nth-child(1) { transition-delay: 0.16s; }
  .nav.is-open a:nth-child(2) { transition-delay: 0.21s; }
  .nav.is-open a:nth-child(3) { transition-delay: 0.26s; }
  .nav.is-open a:nth-child(4) { transition-delay: 0.31s; }
  .nav.is-open a:nth-child(5) { transition-delay: 0.36s; }
  .nav.is-open a:nth-child(6) { transition-delay: 0.41s; }

  .nav .en {
    font-size: clamp(30px, 9vw, 44px);
    font-weight: 800;
    letter-spacing: 0.02em;
  }

  .nav .jp {
    font-size: 12px;
  }

  .nav a:not(.nav-cta)::after {
    display: none;
  }

  .nav-cta,
  .nav-cta:hover {
    align-self: flex-start;
    height: auto;
    margin-top: 18px;
    padding: 12px 24px;
    border-radius: 999px;
  }

  .nav-cta .en {
    font-size: 20px;
  }
}

/* ---------- オープニング（画面が殻のように割れて開く） ---------- */

.loader {
  display: none;
}

.is-loading .loader {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 300;
  /* JSが動かなかった場合の保険：5秒後に必ず消える */
  animation: loader-failsafe 0.01s 5s forwards;
}

@keyframes loader-failsafe {
  to { visibility: hidden; }
}

.loader-half {
  position: absolute;
  inset: 0;
  background: var(--ink);
  transition: transform 1.1s cubic-bezier(0.7, 0, 0.2, 1);
}

.loader-half--top {
  clip-path: polygon(0 0, 100% 0, 100% 50%, 88% 46%, 76% 53%, 64% 47%, 52% 54%, 40% 46%, 28% 52%, 14% 47%, 0 51%);
}

.loader-half--bottom {
  clip-path: polygon(0 100%, 100% 100%, 100% 50%, 88% 46%, 76% 53%, 64% 47%, 52% 54%, 40% 46%, 28% 52%, 14% 47%, 0 51%);
}

.loader-crack {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--yolk-hi);
  stroke-width: 2;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  filter: drop-shadow(0 0 10px var(--yolk));
  animation: loader-crack 0.9s 0.5s cubic-bezier(0.7, 0, 0.3, 1) forwards;
  transition: opacity 0.4s ease;
}

@keyframes loader-crack {
  to { stroke-dashoffset: 0; }
}

.loader-mark {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -150%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  animation: loader-mark 0.7s ease both;
  transition: opacity 0.3s ease;
}

.loader-mark img {
  height: 34px;
  width: auto;
}

.loader-mark span {
  font-family: var(--font-en);
  font-stretch: 112%;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--yolk);
}

@keyframes loader-mark {
  from { opacity: 0; }
}

.loader.is-open .loader-half--top { transform: translateY(-101%); }
.loader.is-open .loader-half--bottom { transform: translateY(101%); }
.loader.is-open .loader-crack,
.loader.is-open .loader-mark { opacity: 0; }

/* ---------- スクロール演出の共通部品 ---------- */

/* ふわっと出現。初期の非表示状態はJSが有効なときだけ（.js）適用する */
.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s ease, transform 1.1s var(--ease);
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* .reveal と自前のtransitionを両方持つ部品は、ここで合成しておく
   （.js .reveal のtransition指定が後勝ちして、ホバー演出が消えるのを防ぐ） */
.js .door.reveal {
  transition: flex-grow 0.9s var(--ease), opacity 0.9s ease, transform 1.1s var(--ease);
}

.js .svc-row.reveal {
  transition: padding 0.6s var(--ease), opacity 0.9s ease, transform 1.1s var(--ease);
}

.js .btn.reveal {
  transition: color 0.45s var(--ease), border-color 0.45s var(--ease), opacity 0.9s ease, transform 1.1s var(--ease), translate 0.5s var(--ease);
}

/* マウスに吸い寄せられる部品（translateプロパティで動かすのでtransformと干渉しない） */
.magnetic {
  transition-property: color, border-color, background, box-shadow, translate;
  transition-duration: 0.45s;
  transition-timing-function: var(--ease);
}

/* 見出しの1行ずつせり上がり */
.lines .line {
  display: block;
  overflow: hidden;
  padding-block: 0.1em;
  margin-block: -0.1em;
}

.lines .line > span {
  display: block;
}

.js .lines .line > span {
  transform: translateY(112%);
  transition: transform 1.15s var(--ease);
}

.js .lines .line:nth-child(2) > span { transition-delay: 0.09s; }
.js .lines .line:nth-child(3) > span { transition-delay: 0.18s; }

.js .lines.is-visible .line > span {
  transform: none;
}

/* スクロール進捗バー */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 120;
  width: 100%;
  height: 2px;
  background: var(--yolk);
  transform: scaleX(var(--progress, 0));
  transform-origin: left;
  pointer-events: none;
}

/* 右端の縦インデックス（今どのセクションか） */
.side-index {
  position: fixed;
  right: clamp(14px, 1.8vw, 30px);
  top: 50%;
  z-index: 90;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  font-family: var(--font-en);
  font-stretch: 112%;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.26em;
  color: #fff;
  mix-blend-mode: difference;
  pointer-events: none;
}

.side-index span {
  writing-mode: vertical-rl;
}

.side-index .si-num {
  color: var(--yolk);
}

.side-index i {
  width: 1px;
  height: 44px;
  background: currentColor;
}

@media (max-width: 1100px) {
  .side-index {
    display: none;
  }
}

/* カスタムカーソル（マウス操作の端末だけ） */
.cursor {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 400;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border: 1px solid var(--yolk);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-en);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--ink);
  pointer-events: none;
  opacity: 0;
  transition: width 0.35s var(--ease), height 0.35s var(--ease), margin 0.35s var(--ease), background 0.3s ease, opacity 0.3s ease;
}

.cursor.is-active {
  opacity: 1;
}

.cursor.is-link {
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  background: rgba(242, 182, 50, 0.22);
}

.cursor.is-label {
  width: 86px;
  height: 86px;
  margin: -43px 0 0 -43px;
  background: var(--yolk);
}

.cursor-dot {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 401;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: var(--yolk);
  pointer-events: none;
  opacity: 0;
}

.cursor-dot.is-active {
  opacity: 1;
}

.cursor.is-label + .cursor-dot {
  opacity: 0;
}

/* ---------- 浮遊する小物（殻の破片・卵黄・結晶など。assets/float-*.webp） ----------
   位置と大きさは各要素のstyle（top/left/--w）で指定。
   スクロールに応じた上下移動（translate）と回転（rotate）は js/main.js の initParallax() が
   data-parallax / data-rot から計算する。ゆらぎ（transform）はCSSアニメーションなので干渉しない。 */

.float-field {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.floaty {
  position: absolute;
  width: var(--w, 120px);
  max-width: none;
  height: auto;
  will-change: translate, rotate;
  animation: floaty-bob 9s ease-in-out infinite;
}

.floaty:nth-child(2n) { animation-duration: 11s; animation-delay: -4s; }
.floaty:nth-child(3n) { animation-duration: 13s; animation-delay: -7s; }

@keyframes floaty-bob {
  0%, 100% { transform: translateY(-8px); }
  50% { transform: translateY(8px); }
}

/* 奥にあるもの：小さく、ぼかして */
.floaty--far {
  filter: blur(2.5px);
  opacity: 0.85;
}

/* 明るい面では、離れた位置にやわらかい影を落として浮遊感を出す */
.theme-light .floaty {
  filter: drop-shadow(0 34px 26px rgba(5, 8, 15, 0.3));
}

.theme-light .floaty--far {
  filter: blur(2.5px) drop-shadow(0 22px 20px rgba(5, 8, 15, 0.22));
}

.ghost-marquee .float-field {
  z-index: 2;
  overflow: visible;
}

.doors > .container,
.rep > .container,
.theme-light > .container {
  position: relative;
  z-index: 1;
}

/* ---------- ヒーロー（トップ：ショーリール） ---------- */

.hero,
.page-header {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: #fff;
  view-transition-name: page-hero;
}

.hero--index {
  height: 100vh;
  height: 100svh;
  padding: 0;
  --hero-image: url("../assets/hero-index.webp");
}

.hero--index::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--hero-image) center / cover no-repeat;
}

/* 下端を漆黒に溶かして、次のセクションへ切れ目なくつなぐ */
.hero--index::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(to bottom, rgba(5, 8, 15, 0.55) 0%, rgba(5, 8, 15, 0) 22%),
    linear-gradient(to top, var(--ink) 0%, rgba(5, 8, 15, 0) 30%);
  pointer-events: none;
}

.hero-video {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-hud {
  position: absolute;
  inset: auto var(--gutter) clamp(24px, 4vw, 44px);
  z-index: 3;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.hero-hud-name {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  letter-spacing: 0.18em;
  line-height: 1.5;
}

.hero-hud-name span:last-child {
  font-family: var(--font-en);
  font-stretch: 112%;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--yolk);
}

.hero-scroll-cue {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: #fff;
  text-decoration: none;
  font-family: var(--font-en);
  font-stretch: 112%;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3em;
}

.hero-scroll-cue span {
  writing-mode: vertical-rl;
}

.hero-scroll-cue i {
  position: relative;
  width: 1px;
  height: 64px;
  background: rgba(255, 255, 255, 0.25);
  overflow: hidden;
}

.hero-scroll-cue i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--yolk);
  animation: scroll-cue 2s cubic-bezier(0.7, 0, 0.3, 1) infinite;
}

@keyframes scroll-cue {
  0% { transform: translateY(-100%); }
  55% { transform: translateY(0); }
  100% { transform: translateY(100%); }
}

@media (max-width: 640px) {
  .hero--index { --hero-image: url("../assets/showreel/hero-vertical-poster.webp"); }
}

.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.5;
}

/* ---------- マニフェスト（スクロールで殻が割れる） ----------
   .manifesto の高さぶんスクロールする間、.manifesto-pin が画面に固定される。
   js/main.js の initManifesto() が進み具合を --crack / --open / --glow / --body
   （各0〜1）に書き込む。JSが動かない・モーション軽減時は、割れ終わった
   完成状態（すべて1）のまま普通のセクションとして表示される。 */

.manifesto {
  --crack: 1;
  --open: 1;
  --glow: 1;
  --body: 1;
  padding: 0;
  background: var(--ink);
}

.manifesto.is-scrub {
  height: 300vh;
}

.manifesto-pin {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.manifesto.is-scrub .manifesto-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
}

.manifesto-ghost {
  position: absolute;
  right: -4vw;
  top: 50%;
  font-family: var(--font-serif);
  font-weight: 800;
  font-size: min(92vh, 58vw);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(242, 182, 50, 0.34);
  opacity: calc(0.3 + var(--glow) * 0.7);
  transform: translateY(-50%) scale(calc(0.92 + var(--glow) * 0.08));
  user-select: none;
  pointer-events: none;
}

.manifesto-egg {
  position: absolute;
  right: clamp(24px, 9vw, 160px);
  top: 50%;
  width: min(30vw, 46vh);
  transform: translateY(-46%);
  animation: egg-float 7s ease-in-out infinite;
}

@keyframes egg-float {
  0%, 100% { translate: 0 -10px; }
  50% { translate: 0 10px; }
}

.egg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.egg-shell {
  fill: url(#eg-shell);
  stroke: rgba(242, 182, 50, 0.6);
  stroke-width: 1.5;
}

.egg-top {
  transform-box: view-box;
  transform-origin: 200px 250px;
  transform:
    translate(calc(var(--open) * 38px), calc(var(--open) * -150px))
    rotate(calc(var(--open) * 17deg));
}

.egg-yolk {
  transform: translateY(calc(var(--open) * -30px));
  filter: drop-shadow(0 0 18px rgba(255, 214, 107, 0.8));
}

.egg-glow {
  transform-box: view-box;
  transform-origin: 200px 262px;
  transform: scale(calc(0.4 + var(--glow) * 0.8));
  opacity: var(--glow);
}

.egg-crack {
  fill: none;
  stroke: var(--yolk-hi);
  stroke-width: 3;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--crack));
  opacity: calc(1 - var(--open) * 2.4);
  filter: drop-shadow(0 0 6px var(--yolk));
}

.egg-rays line {
  stroke: var(--yolk-hi);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--glow));
  opacity: calc(var(--glow) * 0.7);
}

.egg-shards polygon {
  fill: #efe8d2;
  transform-box: fill-box;
  transform-origin: center;
  transform:
    translate(calc(var(--open) * var(--sx)), calc(var(--open) * var(--sy)))
    rotate(calc(var(--open) * var(--sr)));
  opacity: min(1, calc(var(--open) * 6));
}

.manifesto-copy {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(14px, 2.6vh, 30px);
  padding-block: calc(var(--header-h) + 8px) 32px;
}

.mega {
  /* 背の低い画面でも1画面に収まるよう、高さ（vh）でも上限をかける */
  font-size: clamp(38px, min(6.6vw, 12vh), 112px);
  line-height: 1.16;
  letter-spacing: -0.02em;
}

/* 要の一文字だけ、明朝＋金で立たせる */
.mega em {
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 800;
  font-size: 1.5em;
  line-height: 0.9;
  color: var(--yolk);
  margin-inline: 0.02em;
  text-shadow: 0 0 calc(var(--glow) * 60px) rgba(242, 182, 50, 0.6);
}

.manifesto-en {
  margin: 0;
  font-family: var(--font-en);
  font-stretch: 112%;
  font-size: clamp(13px, 1.3vw, 18px);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: rgba(244, 241, 232, 0.72);
  padding-left: clamp(40px, 6vw, 96px);
  position: relative;
}

.manifesto-en::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: clamp(28px, 4.6vw, 76px);
  height: 1px;
  background: var(--yolk);
}

.manifesto-body {
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 3vh, 28px);
  opacity: var(--body);
  transform: translateY(calc((1 - var(--body)) * 32px));
}

.manifesto-body p {
  margin: 0;
  max-width: 44ch;
  font-size: clamp(14.5px, 1.15vw, 17px);
  color: #cfd5e3;
}

@media (max-width: 900px) {
  .manifesto-pin {
    align-items: flex-end;
  }

  .manifesto-egg {
    right: 4vw;
    top: 21%;
    width: min(44vw, 27vh);
  }

  .manifesto-ghost {
    top: 32%;
    font-size: 96vw;
    right: -18vw;
  }

  .manifesto-copy {
    padding-block: 0 clamp(36px, 8vh, 72px);
  }

  .mega {
    font-size: clamp(34px, 10.4vw, 64px);
  }
}

/* ---------- 巨大な流れる文字 ---------- */

.ghost-marquee {
  position: relative;
  /* 横だけ切り落とす。縦は、浮遊する小物が帯の上下にはみ出して浮かべるよう開けておく */
  overflow-x: clip;
  padding-block: clamp(28px, 5vw, 72px);
  background: var(--ink);
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.6vw, 22px);
}

.gm-row {
  display: flex;
  width: max-content;
  white-space: nowrap;
  will-change: transform;
}

.gm-group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.gm-group i {
  display: block;
  width: 0.24em;
  height: 0.24em;
  margin-inline: 0.5em;
  background: var(--yolk);
  transform: rotate(45deg);
  flex-shrink: 0;
}

.gm-row--en {
  font-family: var(--font-en);
  font-stretch: 125%;
  font-weight: 900;
  font-size: clamp(64px, 15vw, 248px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(244, 241, 232, 0.55);
}

/* 1語おきに金で塗って、輪郭文字との対比をつくる */
.gm-row--en .gm-group span:nth-of-type(even) {
  color: var(--yolk);
  -webkit-text-stroke: 0;
}

.gm-row--jp {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(16px, 2.2vw, 30px);
  color: var(--yolk);
}

/* 旧マークアップのマーキー帯（下層ページ用） */
.marquee-band {
  overflow: hidden;
  background: var(--ink);
  border-block: 1px solid var(--line);
  padding-block: clamp(16px, 2.2vw, 28px);
}

.marquee-track {
  display: flex;
  width: max-content;
  white-space: nowrap;
  animation: marquee-scroll 32s linear infinite;
}

.marquee-group {
  display: flex;
  align-items: center;
  gap: clamp(24px, 3vw, 48px);
  padding-right: clamp(24px, 3vw, 48px);
}

.marquee-track span {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(20px, 3.4vw, 46px);
  color: var(--fg);
}

.marquee-track .marquee-star {
  font-size: 0;
  width: 10px;
  height: 10px;
  background: var(--yolk);
  transform: rotate(45deg);
}

@keyframes marquee-scroll {
  to { transform: translateX(-50%); }
}

/* ---------- 三つの入口 ---------- */

.doors {
  padding-bottom: 0;
}

.doors-grid {
  display: flex;
  gap: 1px;
  height: min(82vh, 760px);
  background: var(--line);
  border-block: 1px solid var(--line);
}

.door {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 14px;
  padding: clamp(24px, 3.2vw, 52px);
  color: #fff;
  text-decoration: none;
  background: var(--ink);
  isolation: isolate;
  transition: flex-grow 0.9s var(--ease), opacity 0.9s ease, transform 1.1s var(--ease);
}

.door::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--door-image) center 34% / cover no-repeat;
  transform: scale(1.12);
  filter: saturate(0.8) brightness(0.78);
  transition: transform 1.4s var(--ease), filter 0.9s ease;
}

.door::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(5, 8, 15, 0.92) 0%, rgba(5, 8, 15, 0.36) 46%, rgba(5, 8, 15, 0) 100%);
}

.door--corporate { --door-image: url("../assets/door-corporate.webp"); }
.door--individual { --door-image: url("../assets/door-individual.webp"); }
.door--lancer { --door-image: url("../assets/door-lancer.webp"); }

.door-num {
  position: absolute;
  top: clamp(18px, 2.4vw, 36px);
  left: clamp(24px, 3.2vw, 52px);
  font-family: var(--font-en);
  font-stretch: 125%;
  font-weight: 900;
  font-size: clamp(64px, 9vw, 150px);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(244, 241, 232, 0.5);
  transition: color 0.6s ease, -webkit-text-stroke-color 0.6s ease;
}

.door-tag {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--ink);
  background: var(--yolk);
  padding: 3px 14px;
  border-radius: 999px;
}

.door h3 {
  font-size: clamp(22px, 2vw, 32px);
  white-space: nowrap;
  line-height: 1.3;
}

.door p {
  margin: 0;
  max-width: 34ch;
  font-size: 14.5px;
  color: #cfd5e3;
}

.door-link {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 6px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--yolk);
}

.door:hover .btn-arrow {
  transform: translateX(6px);
}

@media (hover: hover) and (min-width: 901px) {
  .door p,
  .door-link {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.5s ease, transform 0.7s var(--ease);
  }

  .doors-grid:hover .door {
    flex-grow: 0.75;
  }

  .doors-grid .door:hover {
    flex-grow: 1.9;
  }

  .door:hover::before {
    transform: scale(1);
    filter: saturate(1.05) brightness(1.08);
  }

  .door:hover .door-num {
    color: var(--yolk);
    -webkit-text-stroke-color: var(--yolk);
  }

  .door:hover p,
  .door:hover .door-link {
    opacity: 1;
    transform: none;
    transition-delay: 0.12s;
  }
}

@media (max-width: 900px) {
  .doors-grid {
    flex-direction: column;
    height: auto;
  }

  .door {
    flex: none;
    min-height: 74vh;
    min-height: 74svh;
  }

  .door::before {
    filter: saturate(0.9) brightness(0.72);
    transform: none;
  }
}

/* ---------- 事業内容（トップ） ---------- */

.svc-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}

.sec-head--sticky {
  position: sticky;
  top: calc(var(--header-h) + 40px);
  margin-bottom: 0;
}

.svc .sec-head h2 {
  font-size: clamp(28px, 3.6vw, 58px);
}

/* 行ごとに区切ってある見出しは、行の途中で折り返さない */
.sec-head h2 .line > span,
.cta-band h2 .line > span {
  white-space: nowrap;
}

.svc-list {
  border-bottom: 1px solid var(--line);
}

.svc-row {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(16px, 2.6vw, 40px);
  padding: clamp(26px, 3.2vw, 44px) clamp(0px, 1vw, 16px);
  border-top: 1px solid var(--line);
  color: var(--fg);
  text-decoration: none;
  isolation: isolate;
  transition: padding 0.6s var(--ease), opacity 0.9s ease, transform 1.1s var(--ease);
}

.svc-row::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--ink);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.6s var(--ease);
}

.svc-num {
  font-family: var(--font-en);
  font-stretch: 125%;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.1em;
  color: var(--yolk-deep);
  transition: color 0.4s ease;
}

.svc-main {
  display: block;
}

.svc-row h3 {
  font-size: clamp(20px, 2.1vw, 32px);
  transition: color 0.4s ease;
}

.svc-row p {
  margin: 8px 0 0;
  font-size: 14.5px;
  color: var(--fg-muted);
  transition: color 0.4s ease;
}

.svc-arrow {
  width: clamp(44px, 4.4vw, 64px);
  aspect-ratio: 1;
  border: 1px solid var(--line);
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: background 0.4s ease, border-color 0.4s ease, color 0.4s ease, transform 0.6s var(--ease);
}

.svc-arrow .btn-arrow {
  width: 18px;
}

@media (hover: hover) {
  .svc-row:hover {
    padding-inline: clamp(16px, 2.4vw, 36px);
  }

  .svc-row:hover::before {
    transform: none;
  }

  .svc-row:hover h3 { color: #fff; }
  .svc-row:hover p { color: #b9c1d3; }
  .svc-row:hover .svc-num { color: var(--yolk); }

  .svc-row:hover .svc-arrow {
    background: var(--yolk);
    border-color: var(--yolk);
    color: var(--ink);
    transform: rotate(-45deg);
  }
}

/* 行にマウスを乗せると、カーソルの近くに事業ビジュアルが現れる（js: initSvcPreview） */
.svc-preview {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 80;
  width: clamp(200px, 20vw, 300px);
  aspect-ratio: 1;
  margin: calc(clamp(200px, 20vw, 300px) / -2) 0 0 40px;
  overflow: hidden;
  background: var(--ink);
  border: 1px solid rgba(242, 182, 50, 0.4);
  box-shadow: 0 30px 60px rgba(5, 8, 15, 0.4);
  pointer-events: none;
  opacity: 0;
  scale: 0.8;
  rotate: -4deg;
  transition: opacity 0.35s ease, scale 0.5s var(--ease), rotate 0.5s var(--ease);
}

.svc-preview.is-active {
  opacity: 1;
  scale: 1;
  rotate: 3deg;
}

.svc-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  scale: 1.3;
}

@media (max-width: 900px) {
  .svc-layout {
    grid-template-columns: 1fr;
  }

  .sec-head--sticky {
    position: static;
  }

  .svc-row {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
  }

  .svc-num {
    padding-top: 0.6em;
  }

  .svc-arrow {
    display: none;
  }
}

/* ---------- TKG × AI ---------- */

.lab {
  background:
    radial-gradient(60% 50% at 82% 0%, rgba(242, 182, 50, 0.16), transparent 70%),
    var(--ink-2);
  overflow: hidden;
}

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

.lab-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.lab-card {
  position: relative;
  padding: clamp(26px, 3vw, 46px);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(5, 8, 15, 0.5);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
}

.lab-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 2px;
  background: var(--yolk);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.7s var(--ease);
}

.lab-card:hover::before {
  transform: none;
}

.lab-label {
  font-family: var(--font-en);
  font-stretch: 112%;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--yolk);
}

.lab-card h3 {
  font-size: var(--fs-h3);
}

.lab-card p {
  margin: 0;
  font-size: 14.5px;
  color: var(--fg-muted);
}

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

/* ---------- 代表メッセージ（トップ抜粋） ---------- */

.rep-layout {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(32px, 7vw, 120px);
  align-items: center;
}

.rep-figure {
  position: relative;
  margin: 0;
}

/* 写真の後ろに金の板をずらして敷く（影として描くので写真の大きさに必ず追従する） */
.rep-figure img,
.rep-avatar {
  box-shadow: clamp(14px, 1.8vw, 28px) clamp(14px, 1.8vw, 28px) 0 var(--yolk);
}

.rep-figure img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--navy);
}

.rep-figure figcaption {
  position: relative;
  z-index: 1;
  margin-top: clamp(30px, 3.4vw, 48px);
  font-size: 12px;
  color: var(--fg-muted);
}

.rep-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(20px, 2.6vw, 36px);
}

.rep-quote {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 800;
  font-size: clamp(30px, 4.8vw, 76px);
  line-height: 1.36;
  letter-spacing: -0.01em;
  font-feature-settings: "palt";
}

.rep-sign {
  margin: 0;
  display: flex;
  flex-direction: column;
  font-size: 13px;
  color: var(--fg-muted);
}

.rep-sign strong {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--fg);
  letter-spacing: 0.08em;
}

@media (max-width: 900px) {
  .rep-layout {
    grid-template-columns: 1fr;
  }

  .rep-figure {
    max-width: 320px;
  }
}

/* ---------- CTA（全ページ共通・全幅） ---------- */

section:has(> .cta-band) {
  padding: 0;
}

.cta-band {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 88vh;
  min-height: 88svh;
  padding: var(--section-pad) var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(32px, 6vw, 80px);
  background: var(--ink);
  color: #fff;
}

.cta-band::before {
  content: "";
  position: absolute;
  inset: -12% 0;
  z-index: -2;
  background: url("../assets/hero-contact.webp") 70% center / cover no-repeat;
  transform: translateY(calc(var(--par, 0) * 1px));
}

.cta-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to bottom, var(--ink) 0%, rgba(5, 8, 15, 0) 26%),
    linear-gradient(95deg, rgba(5, 8, 15, 0.92) 0%, rgba(5, 8, 15, 0.6) 46%, rgba(5, 8, 15, 0.1) 100%);
}

.cta-band > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(16px, 2vw, 26px);
  max-width: 900px;
}

.cta-band h2 {
  font-size: clamp(34px, 6.6vw, 104px);
  line-height: 1.16;
}

.cta-band p {
  margin: 0;
  max-width: 44ch;
  color: #cfd5e3;
  font-size: clamp(14.5px, 1.15vw, 17px);
}

/* 丸い大きなボタン */
.cta-orb {
  position: relative;
  flex-shrink: 0;
  width: clamp(168px, 17vw, 236px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--yolk);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.5;
  box-shadow: 0 0 80px rgba(242, 182, 50, 0.5);
  transition: background 0.4s ease, box-shadow 0.5s ease, translate 0.5s var(--ease);
}

.cta-orb::before {
  content: "";
  position: absolute;
  inset: -14px;
  border: 1px solid rgba(242, 182, 50, 0.5);
  border-radius: 50%;
  animation: orb-pulse 2.6s ease-out infinite;
}

@keyframes orb-pulse {
  from { transform: scale(0.92); opacity: 1; }
  to { transform: scale(1.3); opacity: 0; }
}

.cta-orb:hover {
  background: #fff;
  box-shadow: 0 0 120px rgba(255, 214, 107, 0.8);
}

.cta-orb:hover .btn-arrow {
  transform: translateX(6px);
}

/* ---------- フッター ---------- */

.site-footer {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: #b9c1d3;
  font-size: 13.5px;
  border-top: 1px solid var(--line);
}

.footer-ghost {
  font-family: var(--font-en);
  font-stretch: 125%;
  font-weight: 900;
  font-size: 8.5vw;
  line-height: 0.9;
  letter-spacing: -0.03em;
  white-space: nowrap;
  text-align: center;
  color: transparent;
  -webkit-text-stroke: 1px rgba(244, 241, 232, 0.2);
  padding-top: clamp(40px, 6vw, 88px);
  user-select: none;
}

.site-footer .container {
  padding-block: clamp(40px, 6vw, 80px) 28px;
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 5vw, 64px);
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr);
  gap: clamp(28px, 5vw, 72px);
}

.footer-brand p {
  margin: 16px 0 0;
  max-width: 30ch;
}

.footer-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 24px;
  align-content: start;
}

.footer-nav a {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 12px;
  text-decoration: none;
  color: #fff;
  transition: color 0.3s ease;
}

.footer-nav a:hover {
  color: var(--yolk);
}

.footer-nav .en {
  font-family: var(--font-en);
  font-stretch: 112%;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.1em;
}

.footer-nav .jp {
  white-space: nowrap;
  font-size: 11px;
  color: #8791a8;
}

.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.footer-contact strong {
  color: #fff;
  font-size: 15px;
  margin-bottom: 6px;
}

.footer-bottom {
  border-top: 1px solid var(--line);
  padding-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  color: #7c869d;
  font-size: 12px;
  letter-spacing: 0.04em;
}

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

/* ==========================================================================
   下層ページ
   ========================================================================== */

/* ---------- ページ見出し ---------- */

.page-header {
  min-height: 78vh;
  min-height: 78svh;
  padding: 0;
  display: flex;
  align-items: flex-end;
}

.page-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--hero-image, none) center / cover no-repeat;
  animation: hero-kenburns 26s ease-in-out infinite alternate;
}

.page-header::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to top, var(--ink) 0%, rgba(5, 8, 15, 0.2) 46%, rgba(5, 8, 15, 0.5) 100%),
    linear-gradient(95deg, rgba(5, 8, 15, 0.86) 0%, rgba(5, 8, 15, 0.3) 60%, rgba(5, 8, 15, 0) 100%);
}

@keyframes hero-kenburns {
  from { transform: scale(1); }
  to { transform: scale(1.12); }
}

.page-header--about { --hero-image: url("../assets/hero-about.webp"); }
.page-header--services { --hero-image: url("../assets/hero-services.webp"); }
.page-header--works { --hero-image: url("../assets/hero-works.webp"); }
.page-header--blog { --hero-image: url("../assets/hero-blog.webp"); }
.page-header--contact { --hero-image: url("../assets/hero-contact.webp"); }
.page-header--faq { --hero-image: url("../assets/hero-faq.webp"); }

@media (max-width: 640px) {
  .page-header::before {
    background-image: var(--hero-image-mobile, var(--hero-image, none));
  }

  .page-header--about { --hero-image-mobile: url("../assets/hero-about-mobile.webp"); }
  .page-header--services { --hero-image-mobile: url("../assets/hero-services-mobile.webp"); }
  .page-header--works { --hero-image-mobile: url("../assets/hero-works-mobile.webp"); }
  .page-header--blog { --hero-image-mobile: url("../assets/hero-blog-mobile.webp"); }
  .page-header--contact { --hero-image-mobile: url("../assets/hero-contact-mobile.webp"); }
  .page-header--faq { --hero-image-mobile: url("../assets/hero-faq-mobile.webp"); }
}

/* 背景に敷く巨大な英字 */
.ph-ghost {
  position: absolute;
  right: -0.04em;
  bottom: -0.14em;
  z-index: 2;
  font-family: var(--font-en);
  font-stretch: 125%;
  font-weight: 900;
  font-size: clamp(90px, 21vw, 360px);
  line-height: 1;
  letter-spacing: -0.03em;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px rgba(244, 241, 232, 0.26);
  user-select: none;
  pointer-events: none;
}

.page-header .container {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(14px, 1.8vw, 24px);
  padding-block: calc(var(--header-h) + 40px) clamp(48px, 8vw, 110px);
}

.page-header h1 {
  font-size: clamp(42px, 8.4vw, 132px);
  line-height: 1.1;
  color: #fff;
}

.page-header p {
  margin: 0;
  max-width: 48ch;
  color: #d5dae6;
  font-size: clamp(14.5px, 1.2vw, 17px);
}

/* ---------- 左に見出し・右に中身の2カラム ---------- */

.split {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(28px, 6vw, 96px);
  align-items: start;
}

.split > .section-head {
  position: sticky;
  top: calc(var(--header-h) + 40px);
  margin-bottom: 0;
}

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

  .split > .section-head {
    position: static;
  }
}

/* ---------- 基本情報テーブル ---------- */

.info-table {
  display: grid;
  grid-template-columns: minmax(110px, 200px) minmax(0, 1fr);
  margin: 0;
  border-bottom: 1px solid var(--line);
}

.info-table dt,
.info-table dd {
  margin: 0;
  padding-block: clamp(18px, 2.2vw, 28px);
  border-top: 1px solid var(--line);
}

.info-table dt {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: 0.08em;
  color: var(--fg-muted);
}

.info-table dd {
  font-size: clamp(15px, 1.3vw, 18px);
}

@media (max-width: 560px) {
  .info-table {
    grid-template-columns: 1fr;
  }

  .info-table dt {
    padding-bottom: 0;
  }

  .info-table dd {
    border-top: none;
    padding-top: 4px;
  }
}

/* ---------- 代表挨拶（会社概要ページ） ---------- */

.message-quote {
  margin: 0 0 clamp(36px, 6vw, 80px);
  font-family: var(--font-serif);
  font-weight: 800;
  font-size: clamp(30px, 5.6vw, 88px);
  line-height: 1.34;
  font-feature-settings: "palt";
}

.message-quote em {
  font-style: normal;
  color: var(--yolk);
}

.rep-message {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(32px, 7vw, 120px);
  align-items: start;
}

.rep-avatar {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--navy);
}

.rep-caption {
  margin: clamp(30px, 3.4vw, 48px) 0 0;
  font-size: 12px;
  color: var(--fg-muted);
}

.rep-text p {
  margin: 0 0 1.4em;
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 2.1;
  color: var(--fg);
}

.rep-text .rep-role {
  margin: 2em 0 0;
  font-size: 13px;
  color: var(--fg-muted);
}

.rep-text .rep-name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 26px;
  letter-spacing: 0.1em;
}

@media (max-width: 900px) {
  .rep-message {
    grid-template-columns: 1fr;
  }

  .rep-message .rep-figure {
    max-width: 300px;
  }
}

/* 遊び心プロフィール */
.rep-fun-card {
  position: relative;
  padding: clamp(28px, 4.4vw, 64px);
  background: var(--ink);
  color: #f4f1e8;
  --fg-muted: #9ea7bb;
  --line: rgba(244, 241, 232, 0.16);
  overflow: hidden;
}

.rep-fun-card::before {
  content: "TKG";
  position: absolute;
  right: -0.04em;
  bottom: -0.2em;
  font-family: var(--font-en);
  font-stretch: 125%;
  font-weight: 900;
  font-size: clamp(120px, 22vw, 320px);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(242, 182, 50, 0.2);
  pointer-events: none;
}

.rep-fun-card .eyebrow {
  color: var(--yolk);
}

.rep-fun-card h3 {
  position: relative;
  font-size: clamp(24px, 3.2vw, 46px);
  margin: 14px 0 clamp(24px, 3vw, 40px);
}

.rep-fun-list {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(24px, 4vw, 64px);
  margin: 0 0 clamp(24px, 3vw, 40px);
  max-width: 820px;
}

.rep-fun-item {
  padding-block: 18px;
  border-top: 1px solid var(--line);
}

.rep-fun-item dt {
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--yolk);
  margin-bottom: 4px;
}

.rep-fun-item dd {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(16px, 1.5vw, 20px);
}

@media (max-width: 560px) {
  .rep-fun-list {
    grid-template-columns: 1fr;
  }
}

.rep-poke {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.4vw, 32px);
}

.rep-poke-avatar {
  width: clamp(84px, 9vw, 128px);
  height: auto;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid var(--yolk);
  object-fit: cover;
  flex-shrink: 0;
  background: var(--navy);
}

.rep-poke-avatar.is-poked {
  animation: rep-poked 0.5s var(--ease);
}

@keyframes rep-poked {
  0% { transform: scale(1) rotate(0); }
  30% { transform: scale(0.9) rotate(-6deg); }
  65% { transform: scale(1.06) rotate(4deg); }
  100% { transform: scale(1) rotate(0); }
}

@media (prefers-reduced-motion: reduce) {
  .rep-poke-avatar.is-poked { animation: none; }
}

.rep-poke-btn {
  position: relative;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
  background: var(--yolk);
  border: none;
  border-radius: 999px;
  padding: 16px 30px;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s var(--ease);
}

.rep-poke-btn:hover {
  background: #fff;
}

.rep-poke-btn:active {
  transform: scale(0.94);
}

.rep-poke-line {
  position: relative;
  margin: 18px 0 0;
  min-height: 1.6em;
  font-family: var(--font-serif);
  font-size: clamp(17px, 1.8vw, 24px);
  color: #fff;
}

/* ---------- 事業内容ページ：巨大な番号つきブロック ---------- */

.svc-block {
  overflow: hidden;
}

.svc-block .container {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  align-items: center;
  gap: clamp(24px, 4vw, 72px);
}

.svc-block--right .section-head--impact {
  order: 2;
}

/* 画像の四辺は背景色に溶ける作りなので、screen合成で黒を消して面に馴染ませる */
.svc-visual {
  margin: 0;
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(closest-side, #000 58%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 58%, transparent 100%);
}

.svc-visual img {
  width: 100%;
  height: auto;
  scale: 1.18;
}

@media (max-width: 900px) {
  .svc-block .container {
    grid-template-columns: 1fr;
  }

  .svc-block--right .section-head--impact {
    order: 0;
  }

  .svc-visual {
    order: -1;
    max-width: 440px;
    margin-inline: auto;
  }
}

.section-head--impact {
  position: relative;
  max-width: 880px;
  margin-bottom: 0;
}

.section-head--impact .big-number {
  position: absolute;
  top: -0.42em;
  left: -0.06em;
  z-index: -1;
  font-family: var(--font-en);
  font-stretch: 125%;
  font-weight: 900;
  font-size: clamp(180px, 34vw, 520px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(242, 182, 50, 0.5);
  pointer-events: none;
  user-select: none;
}

.theme-light .section-head--impact .big-number {
  -webkit-text-stroke-color: rgba(217, 138, 12, 0.55);
}

.section-head--impact h2 {
  font-size: clamp(34px, 5.2vw, 84px);
  line-height: 1.12;
}

.section-head--impact p {
  max-width: 52ch;
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 2.05;
  color: var(--fg);
  opacity: 0.86;
}

.audience-icon {
  width: 56px;
  height: 56px;
}

/* 漆黒の面では紺色のアイコンが沈むので白く反転 */
section:not(.theme-light) .audience-icon {
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

/* ---------- ご利用の流れ ---------- */

.flow-steps {
  counter-reset: flow;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 48px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.flow-step {
  position: relative;
  padding-top: 34px;
  border-top: 1px solid var(--line);
}

/* 線の上を金の点が進む */
.flow-step::before {
  content: "";
  position: absolute;
  left: 0;
  top: -5px;
  width: 9px;
  height: 9px;
  background: var(--yolk);
  transform: rotate(45deg);
}

.flow-step .service-num {
  display: block;
  font-family: var(--font-en);
  font-stretch: 125%;
  font-weight: 900;
  font-size: clamp(44px, 5vw, 78px);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--yolk);
  margin-bottom: 18px;
}

.flow-step h3 {
  font-size: var(--fs-h3);
  margin-bottom: 10px;
}

.flow-step p {
  margin: 0;
  font-size: 14.5px;
  color: var(--fg-muted);
}

@media (max-width: 900px) {
  .flow-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .flow-steps {
    grid-template-columns: 1fr;
  }
}

/* ---------- 番号つきの行リスト（実績ページ「対応分野の例」など） ---------- */

.service-list {
  border-bottom: 1px solid var(--line);
}

.service-item {
  display: grid;
  grid-template-columns: clamp(56px, 8vw, 120px) minmax(0, 1fr);
  align-items: baseline;
  gap: clamp(12px, 2vw, 32px);
  padding-block: clamp(22px, 2.8vw, 38px);
  border-top: 1px solid var(--line);
}

.service-num {
  font-family: var(--font-en);
  font-stretch: 125%;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.1em;
  color: var(--yolk-deep);
  font-variant-numeric: tabular-nums;
}

section:not(.theme-light) .service-num {
  color: var(--yolk);
}

.service-item h3 {
  font-size: clamp(19px, 2.2vw, 30px);
  margin-bottom: 8px;
}

.service-item p {
  margin: 0;
  color: var(--fg-muted);
  font-size: 14.5px;
}

/* ---------- 空状態（実績・お知らせが未登録のとき） ---------- */

.empty-state {
  position: relative;
  padding: clamp(40px, 7vw, 96px) clamp(24px, 5vw, 72px);
  border: 1px solid var(--line);
  color: var(--fg-muted);
  font-size: 15px;
  max-width: 920px;
  overflow: hidden;
}

.empty-state::before {
  content: "COMING SOON";
  display: block;
  font-family: var(--font-en);
  font-stretch: 125%;
  font-weight: 900;
  font-size: clamp(32px, 6.6vw, 96px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: transparent;
  -webkit-text-stroke: 1px var(--yolk);
  margin-bottom: clamp(18px, 2.4vw, 32px);
}

.empty-state strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(22px, 2.6vw, 34px);
  color: var(--fg);
  margin-bottom: 12px;
}

.works-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 32px);
  margin-top: clamp(40px, 6vw, 80px);
}

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

.works-grid figure {
  margin: 0;
}

.works-grid img {
  width: 100%;
  border: 1px solid var(--line);
  filter: grayscale(0.4);
  transition: filter 0.5s ease, transform 0.9s var(--ease);
}

.works-grid figure:hover img {
  filter: none;
  transform: translateY(-6px);
}

.works-grid figcaption {
  font-size: 12.5px;
  color: var(--fg-muted);
  margin-top: 12px;
}

/* ---------- FAQアコーディオン ---------- */

.faq-list {
  counter-reset: faq;
  border-bottom: 1px solid var(--line);
}

.faq-item {
  counter-increment: faq;
  border-top: 1px solid var(--line);
}

.faq-question {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(17px, 2vw, 28px);
  line-height: 1.5;
  color: var(--fg);
  padding: clamp(22px, 2.8vw, 38px) 0;
  display: grid;
  grid-template-columns: clamp(48px, 7vw, 104px) minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  transition: color 0.3s ease;
}

.faq-question::before {
  content: "Q" counter(faq, decimal-leading-zero);
  font-family: var(--font-en);
  font-stretch: 125%;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--yolk-deep);
}

section:not(.theme-light) .faq-question::before {
  color: var(--yolk);
}

.faq-question:hover {
  color: var(--yolk-deep);
}

.faq-question .q-icon {
  position: relative;
  flex-shrink: 0;
  width: clamp(40px, 4vw, 56px);
  aspect-ratio: 1;
  border: 1px solid var(--line);
  border-radius: 50%;
  transition: background 0.4s ease, border-color 0.4s ease, transform 0.6s var(--ease);
}

.faq-question .q-icon::before,
.faq-question .q-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 1.5px;
  margin: -0.75px 0 0 -7px;
  background: currentColor;
  transition: transform 0.5s var(--ease);
}

.faq-question .q-icon::after {
  transform: rotate(90deg);
}

.faq-item.is-open .q-icon {
  background: var(--yolk);
  border-color: var(--yolk);
  color: var(--ink);
  transform: rotate(180deg);
}

.faq-item.is-open .q-icon::after {
  transform: rotate(0deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.6s var(--ease);
  padding-left: calc(clamp(48px, 7vw, 104px) + 16px);
}

.faq-answer p {
  margin: 0;
  padding-bottom: clamp(24px, 3vw, 40px);
  max-width: 60ch;
  color: var(--fg-muted);
  font-size: 15.5px;
}

.faq-note {
  padding: clamp(24px, 3.6vw, 48px);
  background: var(--ink);
  color: #d5dae6;
  font-size: 14.5px;
  border-left: 3px solid var(--yolk);
}

.faq-note strong {
  font-family: var(--font-display);
  font-size: clamp(18px, 2vw, 24px);
  color: #fff;
}

.faq-note-inner {
  display: flex;
  gap: clamp(16px, 2.4vw, 32px);
  align-items: flex-start;
}

.faq-note-avatar {
  width: clamp(64px, 8vw, 104px);
  height: auto;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--yolk);
}

@media (max-width: 560px) {
  .faq-answer {
    padding-left: 0;
  }
}

/* ---------- お問い合わせフォーム ---------- */

.contact-form {
  max-width: 920px;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 3.4vw, 44px) clamp(20px, 3vw, 48px);
}

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

.form-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

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

.form-field label {
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--fg);
}

.form-field label span {
  color: var(--yolk-deep);
  margin-left: 4px;
}

/* 下線だけの入力欄。フォーカスで金の線になる */
.form-field input,
.form-field textarea {
  font: inherit;
  font-size: 16px;
  padding: 12px 0;
  border: none;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--fg);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--yolk-deep);
  box-shadow: 0 1px 0 var(--yolk-deep);
}

.form-field textarea {
  min-height: 160px;
  resize: vertical;
}

.radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

.radio-option {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body) !important;
  font-size: 14.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 10px 20px;
  cursor: pointer;
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.radio-option input {
  accent-color: var(--yolk-deep);
}

.radio-option:has(input:checked) {
  background: var(--fg);
  border-color: var(--fg);
  color: var(--shell) !important;
}

.form-note {
  font-size: 13px;
  color: var(--fg-muted);
}

/* ---------- 会社概要：ロゴと電子名刺 ---------- */

.identity {
  position: relative;
  z-index: 1;
  margin-top: clamp(64px, 9vw, 128px);
  padding-top: clamp(48px, 7vw, 96px);
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(40px, 7vw, 112px);
  align-items: start;
}

.identity-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(18px, 2.2vw, 28px);
}

.identity-note {
  margin: 0;
  max-width: 44ch;
  font-size: 14.5px;
  color: var(--fg-muted);
}

/* 電子名刺だけを置く形（左にカード、右に一言とボタン） */
.identity--solo {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: center;
}

.identity-side {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(18px, 2.2vw, 28px);
}

.identity-lead {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(22px, 2.6vw, 36px);
  line-height: 1.5;
}

/* 電子名刺：名刺と同じ比率（91:55）の漆黒のカード。マウスに合わせて傾き、光が走る（js: initTilt） */
.meishi {
  --rx: 0deg;
  --ry: 0deg;
  --mx: 30%;
  --my: 20%;
  position: relative;
  width: min(100%, 560px);
  aspect-ratio: 91 / 55;
  padding: clamp(18px, 2.6vw, 34px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto 1fr;
  color: #f4f1e8;
  text-decoration: none;
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(242, 182, 50, 0.22), transparent 60%),
    linear-gradient(140deg, #101a33 0%, var(--ink) 62%);
  border: 1px solid rgba(242, 182, 50, 0.55);
  border-radius: 14px;
  box-shadow: 0 34px 60px -20px rgba(5, 8, 15, 0.55);
  overflow: hidden;
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
  will-change: transform;
}

.js .meishi.reveal {
  transition: opacity 0.9s ease, box-shadow 0.4s ease;
}

.meishi:hover {
  box-shadow: 0 44px 70px -18px rgba(5, 8, 15, 0.6), 0 0 0 1px var(--yolk);
}

.meishi-shine {
  position: absolute;
  inset: 0;
  background: radial-gradient(40% 60% at var(--mx) var(--my), rgba(255, 236, 170, 0.28), transparent 70%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.meishi:hover .meishi-shine {
  opacity: 1;
}

.meishi-logo {
  grid-column: 1;
  height: clamp(20px, 2.4vw, 30px);
  width: auto;
  align-self: start;
}

.meishi-id {
  grid-column: 1;
  grid-row: 2;
  align-self: end;
  display: flex;
  flex-direction: column;
  line-height: 1.5;
}

.meishi-role {
  font-size: clamp(11px, 1.05vw, 13px);
  color: #b9c1d3;
}

.meishi-name {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(22px, 3vw, 38px);
  letter-spacing: 0.1em;
}

.meishi-en {
  margin-top: 6px;
  font-family: var(--font-en);
  font-stretch: 112%;
  font-weight: 600;
  font-size: clamp(9px, 0.9vw, 11px);
  letter-spacing: 0.28em;
  color: var(--yolk);
}

.meishi-qr {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: end;
  width: clamp(84px, 11vw, 148px);
  height: auto;
  border-radius: 8px;
}

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

/* ---------- 事業内容：TKGサブスク（業務支援）のカード ---------- */

.sub {
  background:
    radial-gradient(50% 60% at 12% 0%, rgba(242, 182, 50, 0.12), transparent 70%),
    var(--ink-2);
  overflow: hidden;
}

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

.tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: clamp(16px, 2vw, 28px);
}

.tool-card {
  position: relative;
  min-height: clamp(260px, 26vw, 340px);
  padding: clamp(24px, 2.8vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  color: var(--fg);
  text-decoration: none;
  background: rgba(5, 8, 15, 0.66);
  border: 1px solid var(--line);
  overflow: hidden;
  isolation: isolate;
}

.js .tool-card.reveal {
  transition: opacity 0.9s ease, transform 1.1s var(--ease), border-color 0.4s ease;
}

/* 下から金がせり上がる（リンクになっているカードだけ） */
.tool-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--yolk);
  transform: translateY(101%);
  transition: transform 0.6s var(--ease);
}

.tool-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.tool-no {
  font-family: var(--font-en);
  font-stretch: 112%;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.24em;
  color: var(--yolk);
  transition: color 0.4s ease;
}

.tool-status {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 2px 12px;
  border: 1px solid rgba(242, 182, 50, 0.6);
  border-radius: 999px;
  color: var(--yolk);
}

.tool-card h3 {
  font-size: clamp(24px, 2.6vw, 38px);
  line-height: 1.3;
  transition: color 0.4s ease;
}

.tool-card p {
  margin: 0;
  font-size: 14.5px;
  color: var(--fg-muted);
  transition: color 0.4s ease;
}

.tool-link {
  margin-top: auto;
  padding-top: 18px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--fg-muted);
  transition: color 0.4s ease;
}

a.tool-card .tool-link {
  color: var(--yolk);
}

/* 主役のツール：横2枚ぶんの幅を使い、「渡す→読み取る→受け取る」の流れを見せる */
.tool-card--feature {
  grid-column: span 2;
}

.tool-card--feature > p {
  max-width: 46ch;
  font-size: clamp(15px, 1.2vw, 17px);
  color: var(--fg);
}

.tool-flow {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
}

.tool-flow li {
  position: relative;
  padding: 20px 16px 4px 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* 流れを示す金の点 */
.tool-flow li::before {
  content: "";
  position: absolute;
  left: 0;
  top: -5px;
  width: 9px;
  height: 9px;
  background: var(--yolk);
  transform: rotate(45deg);
}

.tool-flow span {
  font-family: var(--font-en);
  font-stretch: 125%;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--yolk);
}

.tool-flow strong {
  font-family: var(--font-display);
  font-size: clamp(15px, 1.4vw, 19px);
}

.tool-flow em {
  font-style: normal;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--fg-muted);
}

.tool-notes {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: var(--fg-muted);
}

.tool-notes li {
  padding-left: 1.2em;
  text-indent: -1.2em;
}

.tool-notes li::before {
  content: "※";
  margin-right: 0.2em;
}

@media (max-width: 720px) {
  .tool-card--feature {
    grid-column: auto;
  }

  .tool-flow {
    grid-template-columns: 1fr;
    border-top: none;
    border-left: 1px solid var(--line);
    margin-left: 4px;
  }

  .tool-flow li {
    padding: 0 0 16px 22px;
  }

  .tool-flow li::before {
    left: -5px;
    top: 6px;
  }
}

.tool-card--ask {
  border-style: dashed;
  border-color: rgba(242, 182, 50, 0.5);
  background: transparent;
}

@media (hover: hover) {
  a.tool-card:hover::before {
    transform: none;
  }

  a.tool-card:hover,
  a.tool-card:hover h3,
  a.tool-card:hover p,
  a.tool-card:hover .tool-no,
  a.tool-card:hover .tool-link {
    color: var(--ink);
  }

  a.tool-card:hover {
    border-color: var(--yolk);
  }

  a.tool-card:hover .btn-arrow {
    transform: translateX(6px);
  }
}

/* ---------- モーション軽減 ---------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

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

  .marquee-track,
  .manifesto-egg,
  .page-header::before {
    animation: none;
  }
}

/* ---------- 社長AI（FAQページ） ---------- */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.pai {
  overflow: hidden;
}

/* 背景に、金の光をひとつだけ置く */
.pai::before {
  content: "";
  position: absolute;
  top: -20%;
  right: -10%;
  width: min(70vw, 900px);
  aspect-ratio: 1;
  background: radial-gradient(closest-side, rgba(242, 182, 50, 0.13), transparent);
  pointer-events: none;
}

.pai-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}

.pai-side h2 {
  margin: 18px 0 clamp(24px, 3vw, 44px);
  font-size: clamp(34px, 4.8vw, 72px);
  line-height: 1.15;
}

.pai-portrait {
  position: relative;
  width: min(100%, 360px);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid var(--line);
  transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.pai-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
}

.pai.is-speaking .pai-portrait {
  border-color: var(--yolk);
  box-shadow: 0 0 60px rgba(242, 182, 50, 0.28);
}

/* 話している間だけ出る、声の波 */
.pai-wave {
  position: absolute;
  left: 16px;
  bottom: 16px;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 28px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.pai-wave i {
  width: 4px;
  height: 100%;
  background: var(--yolk);
  transform-origin: bottom;
  transform: scaleY(0.25);
}

.pai.is-speaking .pai-wave {
  opacity: 1;
}

.pai.is-speaking .pai-wave i {
  animation: pai-wave 0.9s ease-in-out infinite;
}

.pai-wave i:nth-child(2) { animation-delay: -0.6s; }
.pai-wave i:nth-child(3) { animation-delay: -0.3s; }
.pai-wave i:nth-child(4) { animation-delay: -0.75s; }
.pai-wave i:nth-child(5) { animation-delay: -0.15s; }

@keyframes pai-wave {
  0%, 100% { transform: scaleY(0.25); }
  50% { transform: scaleY(1); }
}

.pai-caption {
  margin: 12px 0 0;
  font-size: 12px;
  color: var(--fg-muted);
}

.pai-panel {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  background: var(--card);
}

.pai-status {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-en);
  font-stretch: 112%;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--fg-muted);
}

.pai-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--fg-muted);
}

.pai.is-ready .pai-status {
  color: var(--yolk);
}

.pai.is-ready .pai-dot {
  background: var(--yolk);
  box-shadow: 0 0 12px var(--yolk);
}

.pai-log {
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: clamp(260px, 40vh, 400px);
  padding: 20px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.pai-msg {
  max-width: 86%;
  margin: 0;
  padding: 12px 16px;
  font-size: 15px;
  line-height: 1.8;
  overflow-wrap: anywhere;
}

.pai-msg--ai {
  align-self: flex-start;
  border-left: 2px solid var(--yolk);
  background: rgba(242, 182, 50, 0.07);
  font-family: var(--font-serif);
  font-size: 16.5px;
}

.pai-msg--user {
  align-self: flex-end;
  background: rgba(255, 255, 255, 0.09);
}

.pai-msg--error {
  align-self: center;
  max-width: 100%;
  font-size: 13px;
  color: var(--fg-muted);
  text-align: center;
}

.pai-msg-note {
  display: block;
  margin-top: 4px;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--fg-muted);
}

/* 返答を待つ間の、3つの点 */
.pai-msg.is-waiting::before {
  content: "";
  display: block;
  width: 36px;
  height: 8px;
  margin: 10px 0;
  background: radial-gradient(circle, var(--yolk) 3px, transparent 3.5px) 0 50% / 14px 8px repeat-x;
  animation: pai-wait 1.1s ease-in-out infinite;
}

@keyframes pai-wait {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

.pai-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 20px 16px;
}

.pai-chip {
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--fg);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: border-color 0.3s ease, color 0.3s ease;
}

.pai-chip:hover:not(:disabled) {
  border-color: var(--yolk);
  color: var(--yolk-hi);
}

.pai-chip:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.pai-form {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  border-top: 1px solid var(--line);
}

.pai-form input {
  flex: 1;
  min-width: 0;
  padding: 12px 0;
  border: none;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--fg);
  font: inherit;
  font-size: 16px;
  transition: border-color 0.3s ease;
}

.pai-form input:focus {
  outline: none;
  border-color: var(--yolk);
}

.pai-send {
  flex-shrink: 0;
  padding: 12px 24px;
  border: none;
  background: var(--yolk);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 15px;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.pai-send:hover:not(:disabled) {
  background: var(--yolk-hi);
}

.pai-send:disabled,
.pai-form input:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.pai-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 20px;
  padding: 0 20px 18px;
  font-size: 13px;
  color: var(--fg-muted);
}

.pai-foot a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.pai-foot a:hover {
  color: var(--yolk-hi);
}

.pai-voice {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.pai-voice input {
  width: 16px;
  height: 16px;
  accent-color: var(--yolk);
}

.pai-notes {
  margin: clamp(18px, 2.2vw, 28px) 0 0;
  padding: 0;
  list-style: none;
  font-size: 12.5px;
  line-height: 1.9;
  color: var(--fg-muted);
}

.pai-notes li {
  padding-left: 1.4em;
  text-indent: -1.4em;
}

.pai-notes li::before {
  content: "— ";
  color: var(--yolk);
}

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

  .pai-portrait {
    width: 168px;
  }

  .pai-msg {
    max-width: 94%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pai.is-speaking .pai-wave i,
  .pai-msg.is-waiting::before {
    animation: none;
  }

  .pai.is-speaking .pai-wave i {
    transform: scaleY(0.7);
  }
}

/* ---------- TKGコンテンツ リンク集 ---------- */

.page-header--contents {
  min-height: 62vh;
  min-height: 62svh;
}

.page-header--contents::before {
  background: radial-gradient(60% 80% at 82% 26%, rgba(242, 182, 50, 0.18), transparent 70%);
  animation: none;
}

.cx {
  padding-top: clamp(40px, 6vw, 88px);
}

.cx-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 24px);
}

/* カードの幅を基準（cqw）にして、横長（16:9）と縦長（9:16）の高さを決める */
.cx-item {
  container-type: inline-size;
}

.cx-slot {
  position: relative;
  height: 177.78cqw;
}

.cx-card {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 1;
  display: block;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--ink);
  color: #fff;
  transition: height 0.75s var(--ease), border-color 0.4s ease, box-shadow 0.6s ease;
}

.cx-card:focus-visible {
  outline: 2px solid var(--yolk);
  outline-offset: 3px;
}

/* 絵柄（動画がない間、および動画が始まるまでの下地） */
.cx-art {
  position: absolute;
  inset: 0;
  background:
    var(--cx-pattern, none),
    radial-gradient(120% 90% at 100% 0%, var(--cx-glow, rgba(242, 182, 50, 0.34)), transparent 62%),
    linear-gradient(160deg, #0f1e3d, var(--ink) 70%);
  background-size: var(--cx-pattern-size, auto), 100% 100%, 100% 100%;
  animation: cx-drift 14s linear infinite;
}

@keyframes cx-drift {
  to { background-position: var(--cx-drift, 0 0), 0 0, 0 0; }
}

.cx-art-word {
  position: absolute;
  left: 7cqw;
  top: 7cqw;
  font-family: var(--font-en);
  font-stretch: 125%;
  font-weight: 900;
  font-size: 15cqw;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--yolk);
}

.cx-item--note { --cx-pattern: repeating-linear-gradient(0deg, rgba(244, 241, 232, 0.07) 0 1px, transparent 1px 14px); --cx-pattern-size: 100% 14px; --cx-drift: 0 140px; }
.cx-item--kakuyomu { --cx-pattern: repeating-linear-gradient(90deg, rgba(244, 241, 232, 0.07) 0 1px, transparent 1px 18px); --cx-pattern-size: 18px 100%; --cx-drift: -180px 0; --cx-glow: rgba(120, 160, 255, 0.3); }
.cx-item--line-stamp { --cx-pattern: radial-gradient(circle, rgba(244, 241, 232, 0.13) 2px, transparent 2.5px); --cx-pattern-size: 20px 20px; --cx-drift: 200px 200px; --cx-glow: rgba(110, 220, 140, 0.26); }
.cx-item--bonsai-walker { --cx-pattern: repeating-radial-gradient(circle at 50% 120%, rgba(244, 241, 232, 0.07) 0 1px, transparent 1px 16px); --cx-pattern-size: 100% 100%; --cx-glow: rgba(150, 200, 110, 0.28); }
.cx-item--kyokai { --cx-pattern: linear-gradient(rgba(244, 241, 232, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(244, 241, 232, 0.06) 1px, transparent 1px); --cx-pattern-size: 22px 22px, 22px 22px; --cx-drift: 220px 220px, 220px 220px; --cx-glow: rgba(230, 120, 90, 0.28); }
.cx-item--kokuban { --cx-pattern: repeating-linear-gradient(-45deg, rgba(244, 241, 232, 0.06) 0 1px, transparent 1px 16px); --cx-pattern-size: 100% 100%; --cx-glow: rgba(90, 200, 150, 0.28); }

.cx-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.cx-card.is-playing .cx-video {
  opacity: 1;
}

/* カード下部の帯（種類と、リンクの案内） */
.cx-over {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 26cqw 7cqw 7cqw;
  background: linear-gradient(to top, rgba(5, 8, 15, 0.92), transparent);
}

.cx-kind {
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--fg-muted);
}

.cx-go {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(14px, 6.4cqw, 20px);
  color: var(--yolk-hi);
}

.cx-card.is-soon .cx-go {
  color: var(--fg-muted);
}

.cx-text {
  margin-top: 18px;
}

.cx-num {
  font-family: var(--font-en);
  font-stretch: 112%;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.22em;
  color: var(--yolk);
}

.cx-text h2 {
  margin: 8px 0 8px;
  font-size: clamp(19px, 1.9vw, 26px);
  line-height: 1.3;
}

.cx-text p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--fg-muted);
}

/* つくり手の名前 */
.cx-text .cx-by {
  margin-top: 10px;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--fg);
}

.cx-by span {
  margin-right: 0.6em;
  color: var(--yolk);
}

/* カーソルのある広い画面：ふだんは横長。カーソルを当てると縦長に伸びて、下の説明に重なる */
@media (hover: hover) and (pointer: fine) and (min-width: 900px) {
  .cx-card {
    height: 56.25cqw;
  }

  .cx-card:hover,
  .cx-card:focus-visible {
    z-index: 2;
    height: 100%;
    border-color: var(--yolk);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 60px rgba(242, 182, 50, 0.18);
  }

  .cx-over {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.4s ease, transform 0.6s var(--ease);
  }

  .cx-card:hover .cx-over,
  .cx-card:focus-visible .cx-over {
    opacity: 1;
    transform: none;
    transition-delay: 0.2s;
  }

  .cx-item .cx-text {
    position: absolute;
    top: calc(56.25cqw + 20px);
    left: 0;
    right: 0;
    margin: 0;
    transition: opacity 0.3s ease;
  }

  .cx-item {
    position: relative;
  }

  .cx-item:hover .cx-text,
  .cx-item:focus-within .cx-text {
    opacity: 0;
  }
}

@media (max-width: 899px) {
  .cx-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: clamp(28px, 6vw, 48px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cx-art {
    animation: none;
  }

  .cx-card {
    transition: none;
  }
}

/* リンク集の見出し：2行目（コンテンツリンク集・9文字）が、スマホで1行に収まる大きさにする */
@media (max-width: 600px) {
  .page-header h1.cx-title {
    font-size: min(9vw, 44px);
  }
}

/* メニューが8項目になったので、狭いパソコン幅（ハンバーガーに切り替わる手前）では詰めて1行に収める */
@media (min-width: 901px) and (max-width: 1240px) {
  .nav { gap: clamp(10px, 1.6vw, 20px); }
  .nav .en { font-size: 11px; letter-spacing: 0.08em; font-stretch: 100%; }
  .nav .jp { font-size: 9px; letter-spacing: 0.04em; white-space: nowrap; }
  .nav-cta { padding-inline: 18px; }
}

/* 代表イラストの表情の切り替え（js の initFaces）。上に重ねた絵の透明度だけを動かす */
.face-stack {
  position: relative;
  display: block;
}

.face-stack .face-top {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  transition: opacity 1.8s ease;
  pointer-events: none;
}

.face-stack .face-top.is-in {
  opacity: 1;
}

.face-stack.is-clickable,
.rep-poke-avatar {
  cursor: pointer;
}

.pai-portrait .face-stack {
  height: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .face-stack .face-top { transition: none; }
}

/* ---------- 会社概要：お知らせ欄 ---------- */

.news-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.news-list li {
  display: grid;
  grid-template-columns: 9em minmax(0, 1fr);
  gap: 8px 24px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}

.news-list time {
  font-family: var(--font-en);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--yolk);
}

.news-empty {
  margin: 0;
  padding: clamp(24px, 3vw, 40px) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: var(--fg-muted);
  font-size: 15px;
}

.news-empty strong {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(18px, 2vw, 24px);
  color: var(--fg);
}

@media (max-width: 600px) {
  .news-list li {
    grid-template-columns: 1fr;
  }
}

/* ---------- TKGサブスク：CADジェネレータのカードに置く、図面と3Dの小さな見本 ---------- */
/* 中の部品（.demo-stage など）の見た目は css/additions.css（図面が3Dになる）のものを使う */

.tool-demo {
  max-width: 760px;
  margin-top: clamp(20px, 2.6vw, 32px);
}

.tool-demo .demo-panel-head {
  padding: 8px 12px;
  font-size: 11px;
}

.tool-demo-note {
  margin: 12px 0 0;
  font-size: 12.5px;
  color: var(--fg-muted);
}

.tool-demo-link {
  align-self: flex-start;
  margin-top: clamp(20px, 2.6vw, 32px);
}