@charset "UTF-8";
/* ==========================================================================
   K-Unit株式会社 企業サイト v1.2
   共通スタイルシート
   世界観：1940年代の日本の公文書 × 現代の技術と映像
   色は colordic.org（和色大辞典）の名称と値を基準に採用
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 色・寸法のトークン
   -------------------------------------------------------------------------- */
:root {
  color-scheme: light;

  /* 近白（ニアホワイト・7段階） */
  --w-gofun:      #fffffb; /* 胡粉色 */
  --w-shironeri:  #fcfaf2; /* 白練 */
  --w-kinari:     #fbfaf5; /* 生成り色 */
  --w-hakuji:     #f8fbf8; /* 白磁（冷たい白） */
  --w-zouge:      #f8f4e6; /* 象牙色 */
  --w-shiraume:   #eaf4fc; /* 白百合に近い青白 */
  --w-shironezu:  #dcddde; /* 白鼠 */

  /* 黒〜灰（トーナルブラック・8段階） */
  --k-roiro:      #0d0d0d; /* 蝋色 */
  --k-binroji:    #1a1916; /* 檳榔子染 */
  --k-sumi:       #1c1c1c; /* 墨 */
  --k-kurotsuru:  #252523; /* 黒橡 */
  --k-keshizumi:  #524e4d; /* 消炭色 */
  --k-nibi:       #727171; /* 鈍色 */
  --k-namari:     #7b7c7d; /* 鉛色 */
  --k-ginnezu:    #91989f; /* 銀鼠 */

  /* 青みを含む灰（環境光・技術の気配） */
  --b-ainezu:     #6c848d; /* 藍鼠 */
  --b-konnezu:    #44617b; /* 紺鼠 */
  --b-aonibi:     #5b7e91; /* 御召御納戸 */

  /* 役割 */
  --paper:        var(--w-kinari);
  --ink:          var(--k-binroji);
  --ink-soft:     var(--k-keshizumi);
  --ink-faint:    var(--k-nibi);
  --rule:         rgba(26, 25, 22, 0.16);
  --rule-strong:  rgba(26, 25, 22, 0.42);
  --rule-faint:   rgba(26, 25, 22, 0.08);
  --glow:         rgba(108, 132, 141, 0.14);

  /* 寸法 */
  --col:          40rem;        /* 本文カラム（約35〜45字） */
  --gutter:       clamp(1.25rem, 5vw, 3.5rem);
  --header-h:     4.25rem;
  --hair:         1px;

  /* 書体 */
  --font-mincho:  "Shippori Mincho", "しっぽり明朝", "Hiragino Mincho ProN",
                  "Hiragino Mincho Pro", "Yu Mincho", "YuMincho",
                  "Noto Serif JP", "Source Han Serif JP", serif;
  --font-gothic:  "Hiragino Sans", "Hiragino Kaku Gothic ProN", "BIZ UDPGothic",
                  "Noto Sans JP", "Yu Gothic Medium", "Yu Gothic", "YuGothic",
                  "Meiryo", "Segoe UI", system-ui, sans-serif;

  /* 段階開示に用いるマスク（要素の矩形を保ったまま上から現す） */
  --wipe-mask: linear-gradient(180deg, #000 0%, #000 32%, rgba(0, 0, 0, 0.35) 36%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0) 100%);

  /* 微粒子ノイズ（1〜2%・古紙ではなく映像的な深度） */
  --grain: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   2. 基礎
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* 画面端へ越境させた画像が横スクロールを生まないようにする。
     clip はスクロール領域を作らないため、固定ヘッダーの sticky を壊さない。 */
  overflow-x: clip;
}

body {
  margin: 0;
  min-height: 100%;
  overflow-x: hidden;
  font-family: var(--font-gothic);
  font-size: clamp(0.9375rem, 0.86rem + 0.34vw, 1.0625rem);
  font-weight: 400;
  line-height: 2.06;
  letter-spacing: 0.045em;
  color: var(--ink);
  background-color: var(--w-kinari);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; }

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

::selection { background: rgba(108, 132, 141, 0.22); }

/* 読み上げ専用 */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: 0; left: 50%;
  transform: translate(-50%, -120%);
  z-index: 400;
  padding: 0.6rem 1.4rem;
  background: var(--k-binroji);
  color: var(--w-gofun);
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-decoration: none;
  transition: transform 0.2s ease;
}
.skip-link:focus { transform: translate(-50%, 0); }

/* --------------------------------------------------------------------------
   3. 背景（多層・帯の出ない階調）
   -------------------------------------------------------------------------- */
.field {
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background-color: var(--w-kinari);
  background-image:
    radial-gradient(120% 84% at 50% -18%,  rgba(255, 255, 251, 0.98) 0%,  rgba(255, 255, 251, 0) 62%),
    radial-gradient(88%  70% at 8%   10%,  rgba(248, 251, 248, 0.92) 0%,  rgba(248, 251, 248, 0) 68%),
    radial-gradient(96%  78% at 96%  22%,  rgba(234, 244, 252, 0.62) 0%,  rgba(234, 244, 252, 0) 66%),
    radial-gradient(130% 96% at 50% 116%,  rgba(220, 221, 222, 0.72) 0%,  rgba(220, 221, 222, 0) 64%),
    linear-gradient(184deg, rgba(252, 250, 242, 1) 0%, rgba(251, 250, 245, 1) 38%,
                            rgba(248, 244, 230, 0.86) 68%, rgba(244, 244, 242, 1) 100%);
}

/* 環境光（ゆっくり流れる光の帯） */
.field__light {
  position: absolute;
  inset: -20% -30%;
  background:
    radial-gradient(46% 34% at 22% 24%, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0) 70%),
    radial-gradient(38% 30% at 78% 70%, rgba(108, 132, 141, 0.10) 0%, rgba(108, 132, 141, 0) 72%);
  animation: light-drift 46s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes light-drift {
  from { transform: translate3d(-1.6%, -1.2%, 0) scale(1.02); }
  to   { transform: translate3d( 1.8%,  1.6%, 0) scale(1.06); }
}

/* 微粒子 */
.field__grain {
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  background-size: 180px 180px;
  opacity: 0.018;
  mix-blend-mode: multiply;
}

/* 背景のシンボルマーク（浮上後は背景要素として残る） */
.field__mark {
  position: absolute;
  width: min(78vmin, 60rem);
  aspect-ratio: 1317 / 1194;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  background: url("../images/logo_透過.png") center / contain no-repeat;
  opacity: 0;
}

/* v1.1：浮上は幕が明けてから開始し、合成しやすい transform / opacity だけで動かす。
   毎フレームの blur（大判PNG）を廃し、初回導入中は一切描かない。 */
.js-anim.is-entered .field__mark {
  animation: mark-emerge 4.2s cubic-bezier(0.22, 0.61, 0.24, 1) forwards;
  will-change: opacity, transform;
}
html:not(.js-anim) .field__mark { opacity: 0.024; }

@keyframes mark-emerge {
  0%   { opacity: 0;     transform: scale(1.09); }
  55%  { opacity: 0.055; transform: scale(1.02); }
  100% { opacity: 0.024; transform: scale(1); }
}

/* ページごとに配置を変え、同じ部品の差し替えに見せない */
body[data-page="index"]      .field__mark { width: min(64vmin, 44rem); left: 78%; top: 74%; }
body[data-page="philosophy"] .field__mark { left: 76%; top: 38%; width: min(66vmin, 46rem); }
body[data-page="message"]    .field__mark { left: 22%; top: 62%; width: min(58vmin, 40rem); }
body[data-page="services"]   .field__mark { left: 50%; top: 30%; width: min(70vmin, 52rem); }
body[data-page="company"]    .field__mark { left: 68%; top: 68%; width: min(62vmin, 44rem); }
body[data-page="contact"]    .field__mark { left: 30%; top: 34%; width: min(60vmin, 42rem); }
body[data-page="thanks"]     .field__mark { left: 50%; top: 52%; width: min(54vmin, 36rem); }
body[data-page="privacy"]    .field__mark { left: 80%; top: 56%; width: min(52vmin, 34rem); }

/* --------------------------------------------------------------------------
   4. 見出し・本文の階層
   -------------------------------------------------------------------------- */
h1, h2, h3 {
  font-family: var(--font-mincho);
  font-weight: 400;
  line-height: 1.36;
  letter-spacing: 0.12em;
  margin: 0;
}

p { margin: 0 0 1.65em; }
p:last-child { margin-bottom: 0; }

.lead {
  font-family: var(--font-gothic);
  font-size: 1.0625em;
  line-height: 2.2;
}

/* 本文カラム（中央寄り・狭幅） */
.column {
  width: min(var(--col), 100% - var(--gutter) * 2);
  margin-inline: auto;
}
.column--wide { width: min(64rem, 100% - var(--gutter) * 2); }

/* 極細罫線と長尺ディバイダー */
.rule {
  border: 0;
  height: var(--hair);
  margin: 0;
  background: linear-gradient(90deg,
    rgba(26, 25, 22, 0) 0%, var(--rule) 14%, var(--rule-strong) 50%,
    var(--rule) 86%, rgba(26, 25, 22, 0) 100%);
  transform-origin: 50% 50%;
}
.rule--long {
  width: 100vw;
  margin-left: 50%;
  translate: -50% 0;
}
.rule--thin { background: linear-gradient(90deg, rgba(26,25,22,0) 0%, var(--rule-faint) 50%, rgba(26,25,22,0) 100%); }

/* 登録標（ロゴを核にした極小の標） */
.seal {
  --seal-size: 2.4rem;
  position: relative;
  width: var(--seal-size);
  height: var(--seal-size);
  flex: none;
  display: grid;
  place-items: center;
}
.seal::before {
  content: "";
  position: absolute;
  inset: 0;
  border: var(--hair) solid var(--rule);
  border-radius: 50%;
}
.seal__mark {
  width: 46%;
  aspect-ratio: 1317 / 1194;
  background: url("../images/logo_透過.png") center / contain no-repeat;
  opacity: 0.72;
}

/* --------------------------------------------------------------------------
   5. 縦書きの強調
   -------------------------------------------------------------------------- */
.tate {
  writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl;
  text-orientation: mixed;
  white-space: nowrap;          /* 途中改行を禁止 */
  font-family: var(--font-mincho);
  letter-spacing: 0.2em;
  line-height: 1;
}

/* ページタイトル */
.ptitle {
  display: flex;
  align-items: flex-start;
  gap: 1.1rem;
}
.ptitle__text {
  font-size: max(1.4rem, min(clamp(2.1rem, 1.2rem + 3.6vw, 3.9rem), 8.4vh));
  color: var(--ink);
  text-shadow: 0 0 34px rgba(255, 255, 255, 0.7);
}
.ptitle__index {
  writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl;
  font-family: var(--font-mincho);
  font-size: 0.875rem;
  letter-spacing: 0.6em;
  color: var(--k-namari);
  padding-top: 0.5rem;
  white-space: nowrap;
}
.ptitle__index::after {
  content: "";
  display: block;
  width: var(--hair);
  height: 4.5rem;
  margin: 0.9rem auto 0;
  background: linear-gradient(180deg, var(--rule-strong), rgba(26,25,22,0));
}

/* 縦書きの強調語（スクロールで現れる） */
.accent {
  font-size: max(1.15rem, min(clamp(1.5rem, 1rem + 2.1vw, 2.5rem), 7vh));
  color: var(--k-sumi);
}

/* ゴースト文字（背景に沈む大きな語） */
.ghost {
  position: absolute;
  writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl;
  font-family: var(--font-mincho);
  white-space: nowrap;
  font-size: clamp(4rem, 2rem + 12vw, 11rem);
  letter-spacing: 0.16em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(26, 25, 22, 0.075);
  pointer-events: none;
  user-select: none;
  z-index: -1;
}

/* --------------------------------------------------------------------------
   6. ヘッダーと共通ナビゲーション
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: linear-gradient(180deg,
    rgba(252, 250, 242, 0.94) 0%, rgba(251, 250, 245, 0.86) 62%, rgba(251, 250, 245, 0) 100%);
  backdrop-filter: saturate(115%) blur(9px);
  -webkit-backdrop-filter: saturate(115%) blur(9px);
}

.site-header__inner {
  width: min(76rem, 100% - var(--gutter) * 1.2);
  margin-inline: auto;
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 1rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  padding: 0.35rem 0.2rem;
}
.brand__mark {
  width: 1.9rem;
  aspect-ratio: 1317 / 1194;
  object-fit: contain;
  opacity: 0.9;
}
.brand__name {
  /* v1.1：可視の社名「K-Unit株式会社」はしっぽり明朝（全8ページ・8箇所） */
  font-family: var(--font-mincho);
  font-size: 0.8125rem;
  letter-spacing: 0.24em;
  color: var(--ink-soft);
  white-space: nowrap;
}

.nav-toggle { display: none; }

.site-nav { margin-left: auto; }
.site-nav__list {
  list-style: none;
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 1.4vw, 1.5rem);
  margin: 0;
  padding: 0;
}
.site-nav__link {
  position: relative;
  display: block;
  padding: 0.55rem 0.15rem;
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  color: var(--ink-soft);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.3s ease;
}
.site-nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0.25rem;
  height: var(--hair);
  background: var(--k-sumi);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.36s cubic-bezier(0.22, 0.61, 0.24, 1);
}
.site-nav__link:hover { color: var(--ink); }
.site-nav__link:hover::after,
.site-nav__link:focus-visible::after { transform: scaleX(1); }
.site-nav__link[aria-current="page"] { color: var(--k-roiro); }
.site-nav__link[aria-current="page"]::after { transform: scaleX(1); background: var(--k-roiro); }

.site-header__rule {
  width: 100%;
  height: var(--hair);
  background: linear-gradient(90deg, rgba(26,25,22,0) 0%, var(--rule) 22%, var(--rule) 78%, rgba(26,25,22,0) 100%);
}

/* --------------------------------------------------------------------------
   7. 本文の共通レイアウト
   -------------------------------------------------------------------------- */
.site-main { position: relative; }

.chapter-head {
  position: relative;
  padding: clamp(3.5rem, 9vw, 7.5rem) 0 clamp(2rem, 5vw, 3.5rem);
}
.chapter-head__inner {
  width: min(76rem, 100% - var(--gutter) * 2);
  margin-inline: auto;
  display: flex;
  justify-content: center;
}

.section { position: relative; padding: clamp(2.5rem, 6vw, 5rem) 0; }

.site-footer {
  position: relative;
  margin-top: clamp(4rem, 10vw, 9rem);
  padding: clamp(2.5rem, 6vw, 4rem) 0 clamp(2rem, 5vw, 3.25rem);
  display: grid;
  justify-items: center;
  gap: 1.6rem;
}
.site-footer__rule {
  width: min(76rem, 100% - var(--gutter) * 1.2);
  height: var(--hair);
  background: linear-gradient(90deg, rgba(26,25,22,0) 0%, var(--rule) 30%, var(--rule) 70%, rgba(26,25,22,0) 100%);
}

/* --------------------------------------------------------------------------
   8. スクロールリビール（IntersectionObserver で付与）
   -------------------------------------------------------------------------- */
.js-anim .reveal { opacity: 0; }
/* v1.1：合成ヒントは幕が明けたあと、まだ開示していない要素にだけ与える。
   clip-path は開示に使っていないためヒントから外した。 */
.js-anim.is-entered .reveal:not(.is-in) { will-change: opacity, transform; }
.reveal.is-in { opacity: 1; }

/* 種類ごとに動きを変え、単純なフェードアップの機械的適用を避ける。
   開示前に要素の可視面積を0にする方法（clip-path や scale(0)）は、
   IntersectionObserver が交差なしと判定して永久に開示されない場合がある。
   そのため段階開示はマスクで表現し、要素の矩形は常に保つ。 */
.js-anim .reveal[data-reveal="lift"]   { transform: translate3d(0, 1.6rem, 0); }
.js-anim .reveal[data-reveal="drift"]  { transform: translate3d(-0.75rem, 0.4rem, 0); }
.js-anim .reveal[data-reveal="settle"] { transform: scale(1.035); filter: blur(7px); }
.js-anim .reveal[data-reveal="rule"]   { transform: scaleX(0.06); }

.js-anim .reveal[data-reveal="wipe"],
.js-anim .reveal[data-reveal="column"] {
  -webkit-mask-image: var(--wipe-mask);
          mask-image: var(--wipe-mask);
  -webkit-mask-size: 100% 300%;
          mask-size: 100% 300%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: 0 100%;
          mask-position: 0 100%;
}
.js-anim .reveal[data-reveal="column"] { transform: translate3d(0, -0.5rem, 0); }

.reveal.is-in[data-reveal="lift"],
.reveal.is-in[data-reveal="drift"]   { transform: translate3d(0, 0, 0); transition: opacity 1.15s ease, transform 1.15s cubic-bezier(0.22, 0.61, 0.24, 1); }
.reveal.is-in[data-reveal="settle"]  { transform: scale(1); filter: blur(0); transition: opacity 1.3s ease, transform 1.4s cubic-bezier(0.22, 0.61, 0.24, 1), filter 1.4s ease; }
.reveal.is-in[data-reveal="rule"]    { transform: scaleX(1); transition: opacity 0.6s ease, transform 1.6s cubic-bezier(0.22, 0.61, 0.24, 1); }
.reveal.is-in[data-reveal="wipe"] {
  -webkit-mask-position: 0 0;
          mask-position: 0 0;
  transition: opacity 0.8s ease, -webkit-mask-position 1.5s cubic-bezier(0.22, 0.61, 0.24, 1), mask-position 1.5s cubic-bezier(0.22, 0.61, 0.24, 1);
}
.reveal.is-in[data-reveal="column"] {
  -webkit-mask-position: 0 0;
          mask-position: 0 0;
  transform: translate3d(0, 0, 0);
  transition: opacity 0.7s ease, transform 1.8s cubic-bezier(0.2, 0.66, 0.2, 1),
              -webkit-mask-position 1.8s cubic-bezier(0.2, 0.66, 0.2, 1), mask-position 1.8s cubic-bezier(0.2, 0.66, 0.2, 1);
}

.js-anim .reveal[data-reveal="portrait-emerge"] { transform: translate3d(0, 1.2rem, 0) scale(1.015); }
.reveal.is-in[data-reveal="portrait-emerge"] {
  /* v1.2：代表者画像だけの一回限りのリビール（V12-09）。
     共通の settle は変更せず、この属性値のときだけ opacity と transform を動かす。
     filter / clip-path / mask は使わないため 2.67MB の大判画像を毎フレーム再合成しない。
     終了状態は opacity:1 / transform:none / filter:none で静止する。 */
  transform: none;
  filter: none;
  transition: opacity 2.4s cubic-bezier(0.32, 0.02, 0.2, 1),
              transform 2.7s cubic-bezier(0.22, 0.61, 0.24, 1);
}

.js-anim .reveal[data-delay="1"].is-in { transition-delay: 0.12s; }
.js-anim .reveal[data-delay="2"].is-in { transition-delay: 0.26s; }
.js-anim .reveal[data-delay="3"].is-in { transition-delay: 0.42s; }
.js-anim .reveal[data-delay="4"].is-in { transition-delay: 0.58s; }
.js-anim .reveal[data-delay="5"].is-in { transition-delay: 0.74s; }

/* スクロール連動SVG線描画 */
.draw-line { overflow: visible; }
.draw-line path,
.draw-line line {
  stroke: var(--rule-strong);
  stroke-width: 1;
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: var(--len, 1000);
  stroke-dashoffset: var(--off, 0);
}

/* --------------------------------------------------------------------------
   9. 掲載画像（カードに入れず背景へ同化）
   -------------------------------------------------------------------------- */
.plate { position: relative; }
.plate__img {
  width: 100%;
  height: auto;
  display: block;
}

/* エッジフェード（四辺を背景へ溶かす） */
.plate--fade .plate__img {
  -webkit-mask-image:
    radial-gradient(120% 120% at 50% 50%, #000 38%, rgba(0,0,0,0.55) 66%, rgba(0,0,0,0) 96%);
          mask-image:
    radial-gradient(120% 120% at 50% 50%, #000 38%, rgba(0,0,0,0.55) 66%, rgba(0,0,0,0) 96%);
}

/* 肖像：v1.2 で新しい代表者画像へ差し替えた（V12-08）。掲載位置・矩形掲載・
   表示幅・アスペクト比は v1.1 のまま維持する。
   四辺を背景へ馴染ませる静的マスクは、複数マスクの mask-composite に依存せず、
   内側ラッパー（縦フェード）と画像（横フェード）の親子の積で作る（V12-10）。
   マスクを持つのはアニメーション対象の .portrait ではなくその内側なので、
   reduced-motion の共通 .reveal 規則（mask-image: none）でも解除されない。
   周辺減光・光暈・額縁・角丸は v1.1 に続き一切持たせない。 */
.portrait {
  position: relative;
  width: min(23rem, 82%);
  margin-inline: auto;
  aspect-ratio: 1122 / 1402;
}
/* 縦方向：上端 4.5%（髪先を損なわない）、下端 8%。外端 0 から内側の完全不透明へ戻す。 */
.portrait__frame {
  display: block;
  width: 100%;
  height: 100%;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 4.5%, #000 92%, rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 4.5%, #000 92%, rgba(0,0,0,0) 100%);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}
/* 横方向：左右とも 6%。顔・髪・衣服・肩の主要輪郭は鮮明なまま。 */
.portrait__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, #000 6%, #000 94%, rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, #000 6%, #000 94%, rgba(0,0,0,0) 100%);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

/* 事業画像：背景へ越境させる */
.figure-bleed {
  position: relative;
  margin: 0;
}
.figure-bleed__img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 14px 23px rgba(26, 25, 22, 0.12));   /* v1.1：画像の50%縮小に合わせて半分へ */
  -webkit-mask-image: radial-gradient(96% 96% at 50% 46%, #000 52%, rgba(0,0,0,0.6) 78%, rgba(0,0,0,0) 100%);
          mask-image: radial-gradient(96% 96% at 50% 46%, #000 52%, rgba(0,0,0,0.6) 78%, rgba(0,0,0,0) 100%);
}
.figure-bleed__halo {
  position: absolute;
  inset: -6%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(50% 46% at 50% 50%, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0) 72%);
}

/* --------------------------------------------------------------------------
   10. トップページ（はじめに）
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: calc(100svh - var(--header-h));
  display: grid;
  align-items: center;
  padding: clamp(2rem, 6vw, 4rem) 0 clamp(3rem, 7vw, 5rem);
}
.hero__inner {
  width: min(76rem, 100% - var(--gutter) * 2);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(1.5rem, 5vw, 4.5rem);
}
/* v1.2：キャッチ横の標（.hero__mark）と一体ブロック（.hero__unit）、および
   旧説明文（.hero__lead）は規則ごと撤去した（V12-01 / V12-03）。
   横並び用の flex・gap・幅・疑似要素を会社名ブロックへ流用していない。
   キャッチは単体で画面の幾何学的中央に置く（V12-02。配置は第18章）。 */
.hero__catch {
  grid-row: 2;
  font-size: max(1.05rem, min(clamp(1.3rem, 0.85rem + 2.2vw, 2.6rem), 4.3vh));
  color: var(--k-roiro);
  padding-block: 0.4rem;
  margin: 0;
}
/* v1.2：会社名ブロック（V12-04）と、その直上に1件だけ置く標（V12-05）。
   キャッチとは別のブロックで、下側の帯の中央へ置く。 */
.hero__corp {
  grid-row: 3;
  display: grid;
  justify-items: center;
  gap: clamp(0.35rem, 1.2vh, 0.8rem);
  margin: 0;
}
.hero__corp-mark {
  width: min(3rem, 10vw, 7vh);      /* 会社名とのバランスを見て小さめに保つ */
  aspect-ratio: 1317 / 1194;
  object-fit: contain;
  opacity: 0.92;
}
.hero__corp-name {
  /* v1.2：可視の社名「K-Unit株式会社」はしっぽり明朝（第19章の方針どおり） */
  margin: 0;
  font-family: var(--font-mincho);
  font-size: clamp(0.9375rem, 0.86rem + 0.42vw, 1.25rem);
  letter-spacing: 0.22em;
  text-indent: 0.11em;              /* 字間の右余り（1/2字分）を打ち消し、標と中心軸を揃える */
  line-height: 1.7;
  color: var(--ink);
  white-space: nowrap;
}

/* 目次（カードを使わない開いた一覧） */
.index-list {
  list-style: none;
  margin: 0;
  padding: 0;
  width: min(58rem, 100% - var(--gutter) * 1.2);
  margin-inline: auto;
  border-top: var(--hair) solid var(--rule-faint);
}
.index-list__item { border-bottom: var(--hair) solid var(--rule-faint); }
.index-list__link {
  display: grid;
  grid-template-columns: 3.4rem minmax(0, 1fr) 1.6rem;
  align-items: baseline;
  gap: clamp(0.6rem, 2vw, 1.6rem);
  padding: clamp(1rem, 2.4vw, 1.5rem) 0.4rem;
  text-decoration: none;
  color: var(--ink);
  transition: background-color 0.4s ease, padding-left 0.4s cubic-bezier(0.22,0.61,0.24,1);
}
.index-list__link:hover,
.index-list__link:focus-visible {
  background: linear-gradient(90deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 84%);
  padding-left: 1.1rem;
}
.index-list__no {
  font-family: var(--font-mincho);
  font-size: 0.8125rem;
  letter-spacing: 0.3em;
  color: var(--k-namari);
}
.index-list__name {
  font-family: var(--font-mincho);
  font-size: clamp(1.15rem, 0.9rem + 1.1vw, 1.7rem);
  letter-spacing: 0.16em;
}
.index-list__arrow {
  justify-self: end;
  width: 1.4rem;
  height: var(--hair);
  background: var(--rule-strong);
  transform-origin: 100% 50%;
  transition: transform 0.4s cubic-bezier(0.22,0.61,0.24,1);
}
.index-list__link:hover .index-list__arrow,
.index-list__link:focus-visible .index-list__arrow { transform: scaleX(1.55); }

/* --------------------------------------------------------------------------
   11. 理念・代表者挨拶・事業内容・企業情報の構図
   -------------------------------------------------------------------------- */
/* 理念：中央単一カラム＋垂直の光線 */
.creed { position: relative; }
.creed__beam {
  position: absolute;
  top: 0; bottom: 0;
  left: calc(50% - min(20rem, (100% - var(--gutter) * 2) / 2) - clamp(0.9rem, 3vw, 2.2rem));
  width: 1px;
  background: linear-gradient(180deg,
    rgba(26,25,22,0) 0%, rgba(26,25,22,0.14) 12%, rgba(108,132,141,0.3) 50%,
    rgba(26,25,22,0.14) 88%, rgba(26,25,22,0) 100%);
  transform-origin: 50% 0;
}
.js-anim .creed__beam {
  -webkit-mask-image: var(--wipe-mask);
          mask-image: var(--wipe-mask);
  -webkit-mask-size: 100% 300%;
          mask-size: 100% 300%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: 0 100%;
          mask-position: 0 100%;
}
.creed__beam.is-in {
  -webkit-mask-position: 0 0;
          mask-position: 0 0;
  transition: -webkit-mask-position 2.1s cubic-bezier(0.22,0.61,0.24,1), mask-position 2.1s cubic-bezier(0.22,0.61,0.24,1);
}

.creed__body { position: relative; }
.creed__body p { text-align: justify; text-justify: inter-character; }

.quote-line {
  font-family: var(--font-mincho);
  font-size: clamp(1.05rem, 0.9rem + 0.7vw, 1.35rem);
  letter-spacing: 0.1em;
  line-height: 2.1;
}

/* 代表者挨拶：肖像と文章を左右に置き分ける連続キャンバス */
.figure-message {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  width: min(72rem, 100% - var(--gutter) * 1.2);
  margin-inline: auto;
}
.figure-message__caption {
  /* v1.1：肖像上部の3行全体をしっぽり明朝（V11-14）。
     1行目に含まれる可視の社名「K-Unit株式会社」もここで明朝になる（V11-04）。
     v1.2：新しい代表者画像との釣り合いに合わせて 0.9375rem から拡大した（V12-11）。
     書体・文字列・3行の改行・行順・PCでの位置関係は維持する。 */
  font-family: var(--font-mincho);
  font-size: clamp(1.05rem, 0.98rem + 0.32vw, 1.25rem);
  line-height: 2.1;
  color: var(--ink-soft);
  letter-spacing: 0.1em;
}
.figure-message__caption p { margin-bottom: 1.4em; }

/* 事業内容：3事業を固有の場面として見せる */
.work {
  position: relative;
  padding: clamp(3.5rem, 9vw, 8rem) 0;
}
.work__inner {
  width: min(74rem, 100% - var(--gutter) * 1.2);
  margin-inline: auto;
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
.work__name {
  font-family: var(--font-mincho);
  font-weight: 700;              /* 事業名は太さでも階層を付ける */
  letter-spacing: 0.18em;
}
.work__text { max-width: 38rem; }
.work__note {
  font-size: 0.875rem;
  color: var(--ink-soft);
  letter-spacing: 0.06em;
}
.work__list {
  margin: 0 0 1.65em;
  padding: 0;
  list-style: none;
}
.work__list li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.85em;
}
.work__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 1em;
  width: 0.85rem;
  height: var(--hair);
  background: var(--rule-strong);
}

/* 第一の場面：画像を右へ越境（v1.1：表示幅・越境量とも v1.0 の50%）
   列幅の 50% ＋ 半分にした越境量 ＝ v1.0 描画幅のちょうど 0.5 倍になる。 */
.work--a .work__inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
.work--a .work__figure {
  --bleed: clamp(-2.25rem, -1.7vw, 0rem);
  margin-right: var(--bleed);
  width: calc(50% - var(--bleed));
  justify-self: end;
}
/* 第二の場面：画像を左へ越境し、文章を右へ */
.work--b .work__inner { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
.work--b .work__figure {
  order: -1;
  --bleed: clamp(-2.25rem, -1.7vw, 0rem);
  margin-left: var(--bleed);
  width: calc(50% - var(--bleed));
  justify-self: start;
}
/* 第三の場面：中央単一カラムに標を沈める */
.work--c .work__inner { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.work--c .work__text { max-width: 40rem; }
.work--c .work__figure {
  width: min(10rem, 30%);          /* v1.1：v1.0 の min(20rem, 60%) の 50% */
  opacity: 0.9;
}

.work__axis {
  position: absolute;
  left: 50%;
  translate: -50% 0;
  top: 0;
  width: min(74rem, 100% - var(--gutter) * 1.2);
  height: 100%;
  pointer-events: none;
  z-index: -1;
}

/* 企業情報：公文書の表 */
.record {
  width: min(46rem, 100% - var(--gutter) * 2);
  margin-inline: auto;
  display: grid;
  gap: 0;
  border-top: var(--hair) solid var(--rule);
}
.record__row {
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 1fr);
  gap: clamp(0.8rem, 2.5vw, 2rem);
  padding: clamp(1.05rem, 2.4vw, 1.5rem) 0.3rem;
  border-bottom: var(--hair) solid var(--rule-faint);
  align-items: baseline;
}
.record__key {
  font-family: var(--font-mincho);
  font-size: 0.9375rem;
  letter-spacing: 0.24em;
  color: var(--ink-soft);
  margin: 0;
  font-weight: 400;
}
.record__vals { min-width: 0; }
.record__val { margin: 0; letter-spacing: 0.06em; }
.record__val + .record__val { margin-top: 0.3rem; }
.record__sub {
  font-size: 0.8125rem;
  color: var(--k-namari);
  letter-spacing: 0.1em;
}

/* --------------------------------------------------------------------------
   12. 問い合わせフォーム
   -------------------------------------------------------------------------- */
.form {
  width: min(38rem, 100% - var(--gutter) * 2);
  margin-inline: auto;
}
.form__note {
  font-size: 0.875rem;
  color: var(--ink-soft);
  letter-spacing: 0.06em;
  margin-bottom: 2.4rem;
}
.field-row {
  position: relative;
  margin-bottom: 2.2rem;
  padding-bottom: 0.2rem;
}
.field-row__label {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.875rem;
  letter-spacing: 0.16em;
  color: var(--ink-soft);
  margin-bottom: 0.55rem;
}
.tag {
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  padding: 0.15rem 0.55rem;
  border: var(--hair) solid var(--rule);
  color: var(--k-namari);
  line-height: 1.7;
}
.tag--req { color: var(--k-roiro); border-color: var(--rule-strong); }

.field-row input,
.field-row textarea {
  display: block;
  width: 100%;
  font-family: var(--font-gothic);
  font-size: 1rem;
  line-height: 1.9;
  letter-spacing: 0.05em;
  color: var(--ink);
  background: linear-gradient(180deg, rgba(255,255,255,0.72) 0%, rgba(255,255,255,0.34) 100%);
  border: 0;
  border-bottom: var(--hair) solid var(--rule-strong);
  border-radius: 0;
  padding: 0.7rem 0.65rem;
  transition: border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
  -webkit-appearance: none;
          appearance: none;
}
.field-row textarea { min-height: 11rem; resize: vertical; }
.field-row input:hover,
.field-row textarea:hover { background: rgba(255,255,255,0.86); }
.field-row input:focus,
.field-row textarea:focus {
  border-bottom-color: var(--k-roiro);
  box-shadow: 0 10px 26px -18px rgba(26,25,22,0.5);
  background: rgba(255,255,255,0.95);
}
/* 装飾のためにフォーカス表示を消さない。
   ポインタ操作では下罫線と影で示し、キーボード操作では輪郭線を必ず出す。 */
.field-row input:focus:not(:focus-visible),
.field-row textarea:focus:not(:focus-visible) { outline: none; }
.field-row input:focus-visible,
.field-row textarea:focus-visible {
  outline: 2px solid var(--b-konnezu);
  outline-offset: 2px;
}
.field-row input:disabled,
.field-row textarea:disabled {
  color: var(--k-namari);
  background: rgba(255,255,255,0.34);
  cursor: not-allowed;
}
.field-row input[aria-invalid="true"],
.field-row textarea[aria-invalid="true"] { border-bottom-color: var(--k-roiro); border-bottom-width: 2px; }

.field-row__error {
  display: none;
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  color: var(--k-roiro);
}
.field-row__error.is-shown { display: block; }
.field-row__error::before {
  content: "";
  display: inline-block;
  width: 0.8rem;
  height: var(--hair);
  margin-right: 0.5rem;
  vertical-align: 0.35em;
  background: var(--k-roiro);
}

.form__status {
  margin: 0 0 1.6rem;
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  color: var(--k-roiro);
  min-height: 1.2em;
}

.form__foot {
  margin-top: 2.8rem;
  display: grid;
  justify-items: center;
  gap: 1.4rem;
}
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  min-width: min(18rem, 100%);
  padding: 1rem 2.2rem;
  font-family: var(--font-gothic);
  font-size: 0.9375rem;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  color: var(--w-gofun);
  background: linear-gradient(158deg, var(--k-kurotsuru) 0%, var(--k-binroji) 46%, var(--k-roiro) 100%);
  border: 0;
  border-radius: 0;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.22,0.61,0.24,1), box-shadow 0.4s ease, opacity 0.3s ease;
  box-shadow: 0 18px 34px -24px rgba(26,25,22,0.9);
}
.btn::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: -60%;
  width: 45%;
  background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.24) 50%, rgba(255,255,255,0) 100%);
  transform: skewX(-16deg);
  transition: left 0.7s cubic-bezier(0.22,0.61,0.24,1);
}
.btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 24px 42px -24px rgba(26,25,22,0.95); }
.btn:hover:not(:disabled)::after { left: 115%; }
.btn:disabled { opacity: 0.42; cursor: not-allowed; }

.btn--quiet {
  color: var(--ink);
  background: none;
  box-shadow: none;
  border-bottom: var(--hair) solid var(--rule-strong);
  padding: 0.75rem 1.4rem;
  letter-spacing: 0.24em;
  text-decoration: none;
}
.btn--quiet:hover { transform: translateY(-2px); box-shadow: none; }

.noscript-note {
  display: block;
  margin-bottom: 2rem;
  padding: 1rem 1.2rem;
  border-left: 2px solid var(--rule-strong);
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  background: rgba(255,255,255,0.7);
}

/* 通信波形（問い合わせページの装飾） */
.wave { width: 100%; height: 4.5rem; display: block; opacity: 0.5; }

/* --------------------------------------------------------------------------
   13. 送信完了・プライバシーポリシー
   -------------------------------------------------------------------------- */
.finish {
  min-height: calc(100svh - var(--header-h));
  display: grid;
  align-content: center;
  justify-items: center;
  gap: clamp(2rem, 5vw, 3.2rem);
  padding: clamp(3rem, 8vw, 6rem) 0;
  text-align: center;
}
.finish__mark {
  position: relative;
  width: min(15rem, 52%);
  aspect-ratio: 1317 / 1194;
}
.finish__mark img {
  width: 100%; height: 100%;
  object-fit: contain;
  -webkit-mask-image: radial-gradient(72% 72% at 50% 50%, #000 58%, rgba(0,0,0,0.7) 82%, rgba(0,0,0,0) 100%);
          mask-image: radial-gradient(72% 72% at 50% 50%, #000 58%, rgba(0,0,0,0.7) 82%, rgba(0,0,0,0) 100%);
}
.finish__mark::after {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: -1;
  background: radial-gradient(44% 40% at 50% 50%, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0) 72%);
}
.finish__text {
  font-family: var(--font-mincho);
  font-size: clamp(1.05rem, 0.9rem + 0.85vw, 1.45rem);
  line-height: 2.1;
  letter-spacing: 0.1em;
  max-width: 34rem;
  width: min(34rem, 100% - var(--gutter) * 2);
}

.draft {
  width: min(46rem, 100% - var(--gutter) * 2);
  margin-inline: auto;
  min-height: 9rem;
  display: grid;
  align-content: center;
  gap: 1.1rem;
  padding: clamp(2rem, 5vw, 3rem) 0;
  border-top: var(--hair) solid var(--rule-faint);
  border-bottom: var(--hair) solid var(--rule-faint);
}
.draft__mark {
  font-family: var(--font-mincho);
  font-size: 0.8125rem;
  letter-spacing: 0.36em;
  color: var(--k-namari);
}

/* --------------------------------------------------------------------------
   14. 章扉（初回導入とページ別遷移）
   -------------------------------------------------------------------------- */
.curtain {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  overflow: hidden;
  background-color: var(--w-kinari);
  background-image:
    radial-gradient(118% 84% at 50% 6%,  rgba(255,255,251,0.99) 0%, rgba(255,255,251,0) 62%),
    radial-gradient(96% 76% at 12% 92%,  rgba(220,221,222,0.72) 0%, rgba(220,221,222,0) 66%),
    linear-gradient(178deg, rgba(252,250,242,1) 0%, rgba(248,244,230,0.92) 56%, rgba(244,244,242,1) 100%);
  animation: curtain-failsafe 6.5s linear forwards;   /* JSが止まっても必ず解除 */
}
.curtain[hidden] { display: none; }
.curtain.is-cleared { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.5s ease, visibility 0s 0.5s; }

@keyframes curtain-failsafe {
  0%, 96%  { opacity: 1; visibility: visible; }
  100%     { opacity: 0; visibility: hidden; pointer-events: none; }
}

.curtain__grain {
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  background-size: 180px 180px;
  opacity: 0.02;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.curtain__stage { position: relative; display: grid; place-items: center; width: 100%; height: 100%; }
.curtain__intro,
.curtain__chapter { display: none; }
.curtain[data-mode="intro"] .curtain__intro { display: grid; }
.curtain[data-mode="enter"] .curtain__chapter,
.curtain[data-mode="exit"]  .curtain__chapter { display: grid; }

/* ---- 初回導入（v1.1） ------------------------------------------------------
   ・シンボルマークは掲載しない（V11-03）。大判PNGへの可変blurも撤去した。
   ・縦書きのキャッチだけを viewport の縦横中央へ置く（V11-02）。
   ・動きは transform と opacity だけ。filter / clip-path / mask は使わない（V11-01）。
   ・再生時間の唯一の基準はこの --intro-dur であり、JavaScript はこの計算値を読む。
   -------------------------------------------------------------------------- */
.curtain { --intro-dur: 3s; --intro-out: 0.62s; }

.curtain__intro {
  position: absolute;
  inset: 0;
  place-items: center;          /* キャッチの箱を画面中央へ置く */
  width: auto;
}
.intro__catch {
  writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl;
  white-space: nowrap;
  font-family: var(--font-mincho);
  font-size: max(1rem, min(clamp(1.25rem, 0.7rem + 2.4vw, 2.3rem), 4.4vh));
  letter-spacing: 0.22em;
  line-height: 1;
  color: var(--k-roiro);
  margin: 0;
  opacity: 0;
}
.curtain[data-mode="intro"] .intro__catch {
  animation: intro-catch var(--intro-dur) cubic-bezier(0.22, 0.61, 0.24, 1) both;
  will-change: opacity, transform;
}
@keyframes intro-catch {
  0%   { opacity: 0; transform: translate3d(0, 1.5rem, 0); }
  28%  { opacity: 1; transform: translate3d(0, 0, 0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}
.intro__rule {
  position: absolute;
  left: 50%; bottom: 12%;
  translate: -50% 0;             /* absolute のまま。キャッチの中央計算へ影響させない */
  width: min(40rem, 70vw);
  height: var(--hair);
  background: linear-gradient(90deg, rgba(26,25,22,0) 0%, var(--rule-strong) 50%, rgba(26,25,22,0) 100%);
  transform: scaleX(0);
  opacity: 0;
}
.curtain[data-mode="intro"] .intro__rule {
  animation: intro-rule var(--intro-dur) cubic-bezier(0.22, 0.61, 0.24, 1) both;
  will-change: opacity, transform;
}
@keyframes intro-rule {
  0%   { transform: scaleX(0); opacity: 0; }
  32%  { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 1; }
}

/* 初回導入の終端：ページ別章扉へ切り替えず、この初回面のまま直接退場する。
   これにより初回アクセス中に .ch-seal / .ch-title / 装飾線が一瞬も現れない。 */
.curtain.is-intro-out .curtain__intro {
  animation: intro-leave var(--intro-out) cubic-bezier(0.4, 0.02, 0.3, 1) both;
  will-change: opacity, transform;
}
@keyframes intro-leave {
  from { opacity: 1; transform: translate3d(0, 0, 0); }
  to   { opacity: 0; transform: translate3d(0, -1.15rem, 0); }
}

/* ---- 章扉の面（ページごとに開き方の構造が異なる） ---- */
.curtain__panes { position: absolute; inset: 0; pointer-events: none; }
.pane {
  position: absolute;
  display: block;
  background-color: var(--w-kinari);
  background-image:
    radial-gradient(128% 92% at 50% 4%,  rgba(255,255,251,0.99) 0%, rgba(255,255,251,0) 60%),
    radial-gradient(104% 82% at 10% 96%, rgba(220,221,222,0.7) 0%, rgba(220,221,222,0) 64%),
    linear-gradient(178deg, rgba(252,250,242,1) 0%, rgba(248,244,230,0.92) 56%, rgba(244,244,242,1) 100%);
  background-size: 100vw 100vh;
  background-position: 0 0;
  background-repeat: no-repeat;
  inset: 0;
}
/* v1.1：合成ヒントは章扉を再生している期間だけ与える */
.curtain[data-mode="enter"] .pane,
.curtain[data-mode="exit"] .pane { will-change: transform, clip-path, opacity; }
.pane--2, .pane--3 { display: none; }

.curtain__stage { position: relative; z-index: 2; }
.curtain__chapter { position: relative; place-items: center; width: 100%; height: 100%; }

.ch-art { position: absolute; inset: 0; pointer-events: none; }
.ch-el { position: absolute; display: block; background: var(--rule-strong); }

.ch-title {
  position: relative;
  writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl;
  white-space: nowrap;
  margin: 0;
  font-family: var(--font-mincho);
  font-size: max(1.3rem, min(clamp(1.8rem, 1rem + 3.2vw, 3.4rem), 9vh));
  letter-spacing: 0.22em;
  line-height: 1;
  color: var(--k-roiro);
}

.ch-seal {
  position: absolute;
  left: 50%; top: 50%;
  translate: -50% -50%;
  width: clamp(4.5rem, 12vw, 7.5rem);
  aspect-ratio: 1317 / 1194;
  background: url("../images/logo_透過.png") center / contain no-repeat;
}

/* == 一 はじめに：横罫線と目次番号が順に組み上がる索引展開 == */
[data-effect="index"] .ch-el {
  left: 50%; translate: -50% 0;
  width: min(34rem, 74vw);
  height: var(--hair);
  transform-origin: 0 50%;
}
[data-effect="index"] .ch-el--1 { top: 30%; }
[data-effect="index"] .ch-el--2 { top: 39%; }
[data-effect="index"] .ch-el--3 { top: 48%; }
[data-effect="index"] .ch-el--4 { top: 57%; }
[data-effect="index"] .ch-el--5 { top: 66%; }
[data-effect="index"] .ch-el::before {
  position: absolute;
  left: -1.9rem; top: 50%;
  translate: 0 -50%;
  font-family: var(--font-mincho);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  color: var(--k-namari);
}
[data-effect="index"] .ch-el--1::before { content: "一"; }
[data-effect="index"] .ch-el--2::before { content: "二"; }
[data-effect="index"] .ch-el--3::before { content: "三"; }
[data-effect="index"] .ch-el--4::before { content: "四"; }
[data-effect="index"] .ch-el--5::before { content: "五"; }
[data-effect="index"] .ch-title { transform: translateX(28%); }

[data-mode="enter"][data-effect="index"] .ch-el { animation: idx-rule 0.62s cubic-bezier(0.22,0.61,0.24,1) forwards; transform: scaleX(0); opacity: 0; }
[data-mode="enter"][data-effect="index"] .ch-el--2 { animation-delay: 0.07s; }
[data-mode="enter"][data-effect="index"] .ch-el--3 { animation-delay: 0.14s; }
[data-mode="enter"][data-effect="index"] .ch-el--4 { animation-delay: 0.21s; }
[data-mode="enter"][data-effect="index"] .ch-el--5 { animation-delay: 0.28s; }
@keyframes idx-rule { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }
[data-mode="enter"][data-effect="index"] .ch-title { animation: idx-title 0.68s cubic-bezier(0.22,0.61,0.24,1) 0.16s forwards; opacity: 0; }
@keyframes idx-title {
  from { opacity: 0; clip-path: inset(0 0 100% 0); transform: translateX(28%); }
  to   { opacity: 1; clip-path: inset(0 0 0 0);   transform: translateX(28%); }
}
[data-mode="exit"][data-effect="index"] .pane--1 { animation: idx-lift 0.66s cubic-bezier(0.65,0.02,0.3,1) forwards; }
@keyframes idx-lift { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 100% 0); } }
[data-mode="exit"][data-effect="index"] .curtain__chapter { animation: ch-out-up 0.5s ease forwards; }
@keyframes ch-out-up { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-2.4rem); } }

/* == 二 理念・宣誓：縦の光線が描かれ文書面が左右へ開く == */
[data-effect="philosophy"] .pane--1 { display: block; inset: 0 50% 0 0; background-position: 0 0; }
[data-effect="philosophy"] .pane--2 { display: block; inset: 0 0 0 50%; background-position: -50vw 0; }
[data-effect="philosophy"] .ch-el--1 {
  left: 50%; top: 8%; bottom: 8%;
  width: 1px;
  translate: -50% 0;
  transform-origin: 50% 0;
  background: linear-gradient(180deg, rgba(26,25,22,0) 0%, var(--k-sumi) 18%, var(--b-ainezu) 52%, var(--k-sumi) 82%, rgba(26,25,22,0) 100%);
  height: auto;
}
[data-effect="philosophy"] .ch-el--2 {
  left: 50%; top: 8%; bottom: 8%;
  width: 5.5rem;
  translate: -50% 0;
  height: auto;
  background: linear-gradient(90deg, rgba(108,132,141,0) 0%, rgba(108,132,141,0.16) 50%, rgba(108,132,141,0) 100%);
  opacity: 0;
}
[data-effect="philosophy"] .ch-title { transform: translateX(4.6rem); }
[data-mode="enter"][data-effect="philosophy"] .ch-el--1 { animation: phi-beam 0.6s cubic-bezier(0.3,0.7,0.2,1) forwards; }
@keyframes phi-beam { from { transform: scaleY(0); } to { transform: scaleY(1); } }
[data-mode="enter"][data-effect="philosophy"] .ch-el--2 { animation: phi-glow 0.7s ease 0.3s forwards; }
@keyframes phi-glow { from { opacity: 0; transform: scaleX(0.2); } to { opacity: 1; transform: scaleX(1); } }
[data-mode="enter"][data-effect="philosophy"] .ch-title { animation: phi-title 0.7s cubic-bezier(0.22,0.61,0.24,1) 0.24s forwards; opacity: 0; }
@keyframes phi-title {
  from { opacity: 0; transform: translateX(1.4rem); letter-spacing: 0.6em; }
  to   { opacity: 1; transform: translateX(4.6rem); letter-spacing: 0.22em; }
}
[data-mode="exit"][data-effect="philosophy"] .pane--1 { animation: phi-leaf-l 0.72s cubic-bezier(0.7,0.02,0.28,1) forwards; }
[data-mode="exit"][data-effect="philosophy"] .pane--2 { animation: phi-leaf-r 0.72s cubic-bezier(0.7,0.02,0.28,1) forwards; }
@keyframes phi-leaf-l { from { transform: translateX(0); } to { transform: translateX(-100.5%); } }
@keyframes phi-leaf-r { from { transform: translateX(0); } to { transform: translateX(100.5%); } }
[data-mode="exit"][data-effect="philosophy"] .curtain__chapter { animation: ch-out-fade 0.36s ease forwards; }
@keyframes ch-out-fade { to { opacity: 0; } }

/* == 三 代表者挨拶：写真乾板の絞りとブラー解除 == */
[data-effect="message"] .ch-el--1 {
  left: 50%; top: 50%;
  translate: -50% -50%;
  width: clamp(11rem, 34vw, 20rem);
  height: clamp(11rem, 34vw, 20rem);
  border-radius: 50%;
  background: none;
  border: var(--hair) solid var(--rule);
}
[data-effect="message"] .ch-el--2 {
  left: 50%; top: 50%;
  translate: -50% -50%;
  width: clamp(7rem, 22vw, 13rem);
  height: clamp(7rem, 22vw, 13rem);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(108,132,141,0.14) 0%, rgba(108,132,141,0) 70%);
}
[data-mode="enter"][data-effect="message"] .ch-el--1 { animation: msg-iris 0.72s cubic-bezier(0.24,0.66,0.2,1) forwards; }
@keyframes msg-iris { from { transform: scale(1.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
[data-mode="enter"][data-effect="message"] .ch-el--2 { animation: msg-iris2 0.8s ease forwards; }
@keyframes msg-iris2 { from { transform: scale(2.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
[data-mode="enter"][data-effect="message"] .ch-title { animation: msg-title 0.78s cubic-bezier(0.22,0.61,0.24,1) 0.1s forwards; opacity: 0; }
@keyframes msg-title {
  from { opacity: 0; filter: blur(16px); transform: scale(1.16); }
  to   { opacity: 1; filter: blur(0);    transform: scale(1); }
}
[data-mode="exit"][data-effect="message"] .pane--1 { animation: msg-aperture 0.74s cubic-bezier(0.6,0.04,0.3,1) forwards; }
@keyframes msg-aperture {
  from { clip-path: circle(142% at 50% 46%); }
  to   { clip-path: circle(0%   at 50% 46%); }
}
[data-mode="exit"][data-effect="message"] .curtain__chapter { animation: msg-out 0.46s ease forwards; }
@keyframes msg-out { to { opacity: 0; filter: blur(10px); transform: scale(0.94); } }

/* == 四 事業内容：三本の技術線が接続し面が分かれて開く == */
[data-effect="services"] .pane--1 { display: block; inset: 0 66.7% 0 0;    background-position: 0 0; }
[data-effect="services"] .pane--2 { display: block; inset: 0 33.4% 0 33.3%; background-position: -33.3vw 0; }
[data-effect="services"] .pane--3 { display: block; inset: 0 0 0 66.7%;     background-position: -66.7vw 0; }
[data-effect="services"] .ch-el--1,
[data-effect="services"] .ch-el--2,
[data-effect="services"] .ch-el--3 {
  bottom: 16%;
  width: var(--hair);
  height: 30%;
  transform-origin: 50% 100%;
}
[data-effect="services"] .ch-el--1 { left: 32%; }
[data-effect="services"] .ch-el--2 { left: 50%; }
[data-effect="services"] .ch-el--3 { left: 68%; }
[data-effect="services"] .ch-el--4 {
  left: 32%; right: 32%;
  bottom: 46%;
  height: var(--hair);
  transform-origin: 0 50%;
}
[data-effect="services"] .ch-title { transform: translateY(-8%); }
[data-mode="enter"][data-effect="services"] .ch-el--1,
[data-mode="enter"][data-effect="services"] .ch-el--2,
[data-mode="enter"][data-effect="services"] .ch-el--3 { animation: svc-line 0.5s cubic-bezier(0.3,0.7,0.2,1) forwards; transform: scaleY(0); }
[data-mode="enter"][data-effect="services"] .ch-el--2 { animation-delay: 0.08s; }
[data-mode="enter"][data-effect="services"] .ch-el--3 { animation-delay: 0.16s; }
@keyframes svc-line { from { transform: scaleY(0); } to { transform: scaleY(1); } }
[data-mode="enter"][data-effect="services"] .ch-el--4 { animation: svc-bus 0.46s cubic-bezier(0.3,0.7,0.2,1) 0.26s forwards; transform: scaleX(0); }
@keyframes svc-bus { from { transform: scaleX(0); } to { transform: scaleX(1); } }
[data-mode="enter"][data-effect="services"] .ch-title { animation: svc-title 0.62s cubic-bezier(0.22,0.61,0.24,1) 0.2s forwards; opacity: 0; }
@keyframes svc-title {
  from { opacity: 0; clip-path: inset(0 0 0 100%); transform: translateY(-8%); }
  to   { opacity: 1; clip-path: inset(0 0 0 0);    transform: translateY(-8%); }
}
[data-mode="exit"][data-effect="services"] .pane--1 { animation: svc-open-up 0.74s cubic-bezier(0.66,0.02,0.28,1) forwards; }
[data-mode="exit"][data-effect="services"] .pane--2 { animation: svc-open-dn 0.74s cubic-bezier(0.66,0.02,0.28,1) 0.06s forwards; }
[data-mode="exit"][data-effect="services"] .pane--3 { animation: svc-open-up 0.74s cubic-bezier(0.66,0.02,0.28,1) 0.12s forwards; }
@keyframes svc-open-up { to { transform: translateY(-100.5%); } }
@keyframes svc-open-dn { to { transform: translateY(100.5%); } }
[data-mode="exit"][data-effect="services"] .curtain__chapter { animation: ch-out-fade 0.34s ease forwards; }

/* == 五 企業情報：登録標と極細罫線が組み上がり公文書面が現れる == */
[data-effect="company"] .ch-el--1,
[data-effect="company"] .ch-el--3 {
  left: 50%; translate: -50% 0;
  width: min(26rem, 72vw);
  height: var(--hair);
  transform-origin: 0 50%;
}
[data-effect="company"] .ch-el--1 { top: 26%; }
[data-effect="company"] .ch-el--3 { top: 74%; }
[data-effect="company"] .ch-el--2,
[data-effect="company"] .ch-el--4 {
  top: 26%; height: 48%;
  width: var(--hair);
  transform-origin: 50% 0;
}
[data-effect="company"] .ch-el--2 { left: calc(50% + min(13rem, 36vw)); }
[data-effect="company"] .ch-el--4 { left: calc(50% - min(13rem, 36vw)); }
[data-effect="company"] .ch-seal { top: 26%; translate: -50% -50%; width: clamp(3.2rem, 8vw, 4.6rem); opacity: 0.8; }
[data-mode="enter"][data-effect="company"] .ch-el--1 { animation: cmp-h 0.42s cubic-bezier(0.3,0.7,0.2,1) forwards; transform: scaleX(0); }
[data-mode="enter"][data-effect="company"] .ch-el--3 { animation: cmp-h 0.42s cubic-bezier(0.3,0.7,0.2,1) 0.1s forwards; transform: scaleX(0); }
@keyframes cmp-h { from { transform: scaleX(0); } to { transform: scaleX(1); } }
[data-mode="enter"][data-effect="company"] .ch-el--2,
[data-mode="enter"][data-effect="company"] .ch-el--4 { animation: cmp-v 0.44s cubic-bezier(0.3,0.7,0.2,1) 0.2s forwards; transform: scaleY(0); }
@keyframes cmp-v { from { transform: scaleY(0); } to { transform: scaleY(1); } }
[data-mode="enter"][data-effect="company"] .ch-seal { animation: cmp-seal 0.5s cubic-bezier(0.2,0.8,0.24,1) 0.3s forwards; opacity: 0; }
@keyframes cmp-seal {
  from { opacity: 0; transform: scale(1.7) rotate(-5deg); }
  to   { opacity: 0.8; transform: scale(1) rotate(0deg); }
}
[data-mode="enter"][data-effect="company"] .ch-title { animation: cmp-title 0.6s cubic-bezier(0.22,0.61,0.24,1) 0.34s forwards; opacity: 0; }
@keyframes cmp-title { from { opacity: 0; letter-spacing: 0.7em; } to { opacity: 1; letter-spacing: 0.22em; } }
[data-mode="exit"][data-effect="company"] .pane--1 { animation: cmp-sheet 0.66s cubic-bezier(0.5,0.02,0.3,1) forwards; }
@keyframes cmp-sheet { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(1.07); } }
[data-mode="exit"][data-effect="company"] .curtain__chapter { animation: cmp-sheet 0.6s cubic-bezier(0.5,0.02,0.3,1) forwards; }

/* == 六 お問い合わせ：通信波形が収束し入力面が現れる == */
[data-effect="contact"] .ch-wave {
  position: absolute;
  left: 50%; top: 50%;
  translate: -50% -50%;
  width: min(34rem, 78vw);
  height: 7rem;
  overflow: visible;
}
[data-effect="contact"] .ch-wave path {
  fill: none;
  stroke: var(--k-sumi);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
[data-effect="contact"] .ch-el--1 {
  left: 50%; top: 50%;
  translate: -50% -50%;
  width: min(34rem, 78vw);
  height: var(--hair);
  transform-origin: 50% 50%;
  opacity: 0;
}
[data-effect="contact"] .ch-title { transform: translateY(-24%); }
[data-mode="enter"][data-effect="contact"] .ch-wave { animation: cnt-wave 0.8s cubic-bezier(0.4,0.02,0.2,1) forwards; }
@keyframes cnt-wave {
  0%   { opacity: 0;    transform: scaleY(1.5)  scaleX(0.86); }
  35%  { opacity: 1;    transform: scaleY(1)    scaleX(1); }
  100% { opacity: 0.25; transform: scaleY(0.03) scaleX(1); }
}
[data-mode="enter"][data-effect="contact"] .ch-el--1 { animation: cnt-line 0.5s ease 0.42s forwards; }
@keyframes cnt-line { from { opacity: 0; transform: scaleX(0.3); } to { opacity: 1; transform: scaleX(1); } }
[data-mode="enter"][data-effect="contact"] .ch-title { animation: cnt-title 0.6s cubic-bezier(0.22,0.61,0.24,1) 0.36s forwards; opacity: 0; }
@keyframes cnt-title {
  from { opacity: 0; transform: translateY(-24%) scaleY(1.3); }
  to   { opacity: 1; transform: translateY(-24%) scaleY(1); }
}
[data-mode="exit"][data-effect="contact"] .pane--1 { animation: cnt-collapse 0.7s cubic-bezier(0.62,0.02,0.3,1) forwards; }
@keyframes cnt-collapse { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(50% 0 50% 0); } }
[data-mode="exit"][data-effect="contact"] .curtain__chapter { animation: ch-out-fade 0.3s ease forwards; }

/* == 送信完了：登録標の押印（主6ページと混同しない短い固有遷移） == */
[data-effect="thanks"] .ch-seal { width: clamp(4rem, 11vw, 6rem); }
[data-effect="thanks"] .ch-el--1 {
  left: 50%; top: 50%;
  translate: -50% -50%;
  width: clamp(7rem, 19vw, 10rem);
  height: clamp(7rem, 19vw, 10rem);
  border-radius: 50%;
  background: none;
  border: var(--hair) solid var(--rule);
}
[data-mode="enter"][data-effect="thanks"] .ch-seal { animation: thx-stamp 0.52s cubic-bezier(0.2,0.86,0.3,1) forwards; opacity: 0; }
@keyframes thx-stamp {
  from { opacity: 0;    transform: scale(2); }
  to   { opacity: 0.85; transform: scale(1); }
}
[data-mode="enter"][data-effect="thanks"] .ch-el--1 { animation: thx-ring 0.7s ease 0.18s forwards; opacity: 0; }
@keyframes thx-ring {
  0%   { opacity: 0;   transform: scale(0.6); }
  45%  { opacity: 0.9; transform: scale(1); }
  100% { opacity: 0;   transform: scale(1.5); }
}
[data-mode="exit"][data-effect="thanks"] .pane--1 { animation: thx-wipe 0.6s cubic-bezier(0.62,0.02,0.3,1) forwards; }
@keyframes thx-wipe {
  from { clip-path: polygon(-60% 0, 160% 0, 160% 100%, -60% 100%); }
  to   { clip-path: polygon(160% 0, 260% 0, 260% 100%, 160% 100%); }
}
[data-mode="exit"][data-effect="thanks"] .curtain__chapter { animation: ch-out-fade 0.3s ease forwards; }

/* == プライバシーポリシー：封緘の罫線が中央へ畳まれる == */
[data-effect="privacy"] .ch-el--1,
[data-effect="privacy"] .ch-el--2 {
  left: 50%; translate: -50% 0;
  width: min(28rem, 76vw);
  height: var(--hair);
}
[data-effect="privacy"] .ch-el--1 { top: 34%; }
[data-effect="privacy"] .ch-el--2 { top: 66%; }
[data-effect="privacy"] .ch-title { font-size: max(1rem, min(clamp(1.3rem, 0.9rem + 1.8vw, 2.1rem), 6.4vh)); }
body[data-page="privacy"] .ptitle__text { font-size: max(1.15rem, min(clamp(1.45rem, 0.9rem + 2vw, 2.4rem), 5.6vh)); }
[data-mode="enter"][data-effect="privacy"] .ch-el--1 { animation: prv-fold-a 0.6s cubic-bezier(0.3,0.7,0.2,1) forwards; }
[data-mode="enter"][data-effect="privacy"] .ch-el--2 { animation: prv-fold-b 0.6s cubic-bezier(0.3,0.7,0.2,1) forwards; }
@keyframes prv-fold-a { from { opacity: 0; top: 14%; } to { opacity: 1; top: 34%; } }
@keyframes prv-fold-b { from { opacity: 0; top: 86%; } to { opacity: 1; top: 66%; } }
[data-mode="enter"][data-effect="privacy"] .ch-title { animation: prv-title 0.6s ease 0.22s forwards; opacity: 0; }
@keyframes prv-title { from { opacity: 0; clip-path: inset(0 0 100% 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
[data-mode="exit"][data-effect="privacy"] .pane--1 { animation: prv-part 0.64s cubic-bezier(0.62,0.02,0.3,1) forwards; }
@keyframes prv-part { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 50% 0 50%); } }
[data-mode="exit"][data-effect="privacy"] .curtain__chapter { animation: ch-out-fade 0.3s ease forwards; }

/* --------------------------------------------------------------------------
   15. レスポンシブ
   -------------------------------------------------------------------------- */
@media (max-width: 60rem) {
  .figure-message { grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 6vw, 3rem); }
  .figure-message__caption { text-align: center; }
  .work--a .work__inner,
  .work--b .work__inner { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .work--a .work__figure,
  .work--b .work__figure {
    order: 0;
    margin: 0;
    width: min(10rem, 33%);        /* v1.1：v1.0 の min(20rem, 66%) の 50% */
    justify-self: center;
  }
  .work__text { max-width: 40rem; }
}

@media (max-width: 47.99rem) {
  :root { --header-h: 3.75rem; --col: 34rem; }

  .site-header__inner { flex-wrap: wrap; }

  .nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-left: auto;
    padding: 0.55rem 0.95rem;
    font-family: var(--font-gothic);
    font-size: 0.75rem;
    letter-spacing: 0.22em;
    color: var(--ink);
    background: rgba(255, 255, 255, 0.66);
    border: var(--hair) solid var(--rule);
    cursor: pointer;
  }
  .nav-toggle__bars { position: relative; width: 1.05rem; height: 0.5rem; flex: none; }
  .nav-toggle__bars::before,
  .nav-toggle__bars::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    height: var(--hair);
    background: var(--k-sumi);
    transition: transform 0.32s cubic-bezier(0.22,0.61,0.24,1);
  }
  .nav-toggle__bars::before { top: 0; }
  .nav-toggle__bars::after  { bottom: 0; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(0.25rem) rotate(19deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bars::after  { transform: translateY(-0.25rem) rotate(-19deg); }

  .site-nav {
    flex-basis: 100%;
    margin-left: 0;
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.42s cubic-bezier(0.22,0.61,0.24,1);
  }
  .site-nav.is-open { max-height: 24rem; }
  html:not(.js-anim) .site-nav { max-height: none; }
  .site-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.4rem 0 1rem;
  }
  .site-nav__item { border-top: var(--hair) solid var(--rule-faint); }
  .site-nav__link { padding: 0.95rem 0.2rem; font-size: 0.875rem; }
  .site-nav__link::after { bottom: 0.55rem; }

  .brand__name { font-size: 0.75rem; letter-spacing: 0.16em; }

  .index-list__link { grid-template-columns: 2.6rem minmax(0, 1fr) 1.2rem; }
  .record__row { grid-template-columns: minmax(0, 1fr); gap: 0.3rem; }
  .record__key { letter-spacing: 0.2em; }

  .portrait { width: min(19rem, 78%); }
  .hero__catch { font-size: max(1.05rem, min(clamp(1.35rem, 0.9rem + 2.6vw, 2.1rem), 4.3vh)); }

  .ghost { display: none; }
  .form { width: min(38rem, 100% - var(--gutter) * 1.5); }
}

@media (max-width: 23rem) {
  :root { --gutter: 1.05rem; }
  body { font-size: 0.9375rem; line-height: 2; letter-spacing: 0.03em; }
  .ptitle__text { font-size: max(1.2rem, min(1.9rem, 7.4vh)); }
  .ch-title { font-size: max(1.1rem, min(1.6rem, 8vh)); }
  .hero__catch { font-size: max(0.95rem, min(1.25rem, 4vh)); }
  .index-list__name { font-size: 1.05rem; }
  .btn { min-width: 100%; letter-spacing: 0.2em; padding: 0.95rem 1.2rem; }
}

/* 縦置きの低い画面でも縦書きが欠けない */
@media (max-height: 34rem) {
  .ptitle__text { font-size: clamp(1.5rem, 4.5vh, 2.4rem); }
  .ch-title { font-size: clamp(1.3rem, 4.2vh, 2.2rem); }
  /* v1.2：キャッチを画面中央に置くため、低い画面では縦書きの総丈を
     画面高に対して確実に収め、ヘッダーと重ならない大きさにする（V12-02）。 */
  .hero__catch { font-size: max(0.8rem, min(1.9rem, 3.4vh)); }
  .hero__corp { gap: 0.3rem; }
  .hero__corp-mark { width: min(2.1rem, 8vw, 7vh); }
  .hero__corp-name { font-size: max(0.75rem, min(0.95rem, 2.9vh)); letter-spacing: 0.16em; text-indent: 0.08em; }
  .intro__catch { font-size: clamp(1rem, 3.4vh, 1.8rem); }
}

/* --------------------------------------------------------------------------
   16. 動きを減らす設定（情報を欠かさない）
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

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

  /* 章扉は短いフェードだけにし、画面を覆ったままにしない */
  .curtain { animation: curtain-failsafe 0.9s linear forwards !important; }
  .curtain__chapter,
  .curtain__intro { opacity: 1 !important; }
  .ch-title { opacity: 1 !important; clip-path: none !important; filter: none !important; }
  /* 初回導入：情報を欠かさず、約180msの短いフェードだけで本体へ到達する */
  .intro__catch, .intro__rule { opacity: 1 !important; transform: none !important; filter: none !important; }
  .curtain.is-cleared { transition: opacity 0.18s linear, visibility 0s 0.18s !important; }
  .ch-el, .ch-seal { opacity: 1 !important; transform: none !important; }
  [data-effect] .ch-el--1,
  [data-effect] .ch-el--2 { transform: none !important; }

  /* 本文と画像は最初から可視 */
  .js-anim .reveal,
  .reveal { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important;
            -webkit-mask-image: none !important; mask-image: none !important; }
  .creed__beam { transform: none !important; -webkit-mask-image: none !important; mask-image: none !important; }
  .field__mark { opacity: 0.024 !important; transform: none !important; }
  .field__light { animation: none !important; }
  .draw-line path, .draw-line line { stroke-dashoffset: 0 !important; }
}

/* 印刷（公文書として読める最低限） */
@media print {
  .curtain, .field, .site-header, .nav-toggle, .skip-link { display: none !important; }
  body { background: #fff; color: #000; }
  .reveal { opacity: 1 !important; transform: none !important; clip-path: none !important; filter: none !important;
            -webkit-mask-image: none !important; mask-image: none !important; }
  .creed__beam { -webkit-mask-image: none !important; mask-image: none !important; }
}

/* --------------------------------------------------------------------------
   17. 追補：多層パララックスの層と、章扉の部品の初期表示
   -------------------------------------------------------------------------- */
/* v1.1：初回導入中は背景の多層表現（全画面ブレンドと大判画像）を描かない。
   幕の退場が始まる時点（.is-entered 付与＝幕がまだ不透明な瞬間）で戻すため、
   画面上に切り替わりは見えない。 */
html.js-anim:not(.is-entered) .curtain[data-mode="intro"] ~ .field { visibility: hidden; }

.field__drift { position: absolute; inset: 0; }
html.is-entered .field__drift,
html.is-entered .field__veil { will-change: transform; }
.field__veil {
  position: absolute;
  inset: -8% -6%;
  background:
    radial-gradient(58% 40% at 18% 78%, rgba(248, 244, 230, 0.9) 0%, rgba(248, 244, 230, 0) 72%),
    radial-gradient(44% 32% at 84% 18%, rgba(234, 244, 252, 0.72) 0%, rgba(234, 244, 252, 0) 74%);
}

/* 章扉の部品は、その演出で使う場面だけ現れる */
.ch-seal { display: none; }
[data-effect="company"] .ch-seal,
[data-effect="thanks"]  .ch-seal { display: block; }

.ch-wave { display: none; }
[data-effect="contact"] .ch-wave { display: block; }

[data-effect="thanks"] .ch-title { display: none; }

/* --------------------------------------------------------------------------
   18. ページ別の構図（詳細）
   -------------------------------------------------------------------------- */
/* はじめに（v1.2）：キャッチ単体を画面の幾何学的中央へ置く（V12-02）。
   .hero の上端はヘッダー（--header-h ＋ 罫線 --hair）の直下にあるため、
   その分だけ上へ戻して初期表示の viewport と同じ矩形に重ねる。
   行を 1fr / auto / 1fr にすると上下の帯が必ず等分になり、
   中段に置いたキャッチの中心＝viewport の中心になる。hero の高さや
   会社名ブロックの大きさが変わっても中心計算はずれない。
   可視のページ題字は v1.1 に続き掲載せず、キャッチが h1 のまま（V11-08 を維持）。 */
.hero__inner--index {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(-1 * (var(--header-h) + var(--hair)));
  width: auto;
  height: 100svh;
  margin-inline: 0;
  padding-inline: var(--gutter);
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 1fr auto 1fr;   /* 中段＝キャッチ／下段＝会社名ブロック */
  justify-items: center;
  align-items: center;
  align-content: stretch;
  text-align: center;
  gap: 0;
}

/* 理念：誓いの一行（v1.1 で横書きへ。引用符・読点・句点は原文どおり維持する） */
/* .creed__body p の両端揃えより後に置き、同等以上の詳細度で中央揃えを効かせる */
.creed__body .creed__oath {
  display: block;
  text-align: center;
  text-justify: auto;
  margin-top: clamp(2.6rem, 7vw, 4.5rem);
  margin-bottom: 0;
}
.creed__oath-mark {
  display: block;
  color: var(--k-roiro);
  font-family: var(--font-mincho);      /* 明朝の強調という階層は維持する */
  writing-mode: horizontal-tb;
  -webkit-writing-mode: horizontal-tb;
  text-orientation: mixed;
  white-space: nowrap;                  /* PCでも狭幅でも横一行に収める */
  font-size: max(1.05rem, min(2.4rem, 5.1vw));
  letter-spacing: 0.1em;
  line-height: 1.7;
  margin-bottom: clamp(0.9rem, 2.6vw, 1.6rem);
}
/* v1.2：後続の一文を PC・タブレット・スマートフォンで1行に収める（V12-07）。
   本文カラムの幅では 30rem に収まらず通常の折返しが起きていたため、
   この要素だけ使用幅を左右へ広げ、小画面では font-size と字間を段階的に縮める。
   共通の本文規則・.column・他ページへは波及させない。 */
.creed__oath-rest {
  display: block;
  margin-inline: calc(var(--gutter) * -0.7);
  text-align: center;
  white-space: nowrap;
  font-size: min(1.0625rem, 3vw);
  letter-spacing: 0.02em;
  text-indent: 0.02em;
}

/* 代表者挨拶：結びの署名 */
.signature {
  margin-top: clamp(2.6rem, 7vw, 4.5rem);
  margin-bottom: 0;
  text-align: right;
  line-height: 2;
}
.signature__org {
  /* v1.1：可視の社名「K-Unit株式会社」を含む署名行をしっぽり明朝（V11-04） */
  font-family: var(--font-mincho);
  font-size: 0.9375rem;
  letter-spacing: 0.14em;
  color: var(--ink-soft);
}
/* v1.1：下部署名を横書きへ（V11-15）。.tate を外すため、書体・方向・字間・行高を明示する。 */
.signature__name {
  display: inline-block;
  margin-top: 1.1rem;
  color: var(--k-roiro);
  font-family: var(--font-mincho);
  writing-mode: horizontal-tb;
  -webkit-writing-mode: horizontal-tb;
  text-orientation: mixed;
  white-space: nowrap;
  font-size: max(1.15rem, min(clamp(1.5rem, 1rem + 2.1vw, 2.5rem), 7vh));
  letter-spacing: 0.2em;
  line-height: 1.5;
}

/* 事業内容：三つの場面 */
.services-axis {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  opacity: 0.65;
}
.work__name { margin-bottom: clamp(1rem, 2.6vw, 1.8rem); }
.work__name--a {
  font-size: clamp(1.9rem, 1.1rem + 2.7vw, 3.1rem);
  letter-spacing: 0.05em;
}
.work__name--b, .work__name--c { display: flex; }
.work__name--b .tate { font-size: max(1.2rem, min(clamp(1.65rem, 1rem + 2.2vw, 2.7rem), 7.6vh)); color: var(--k-roiro); }
.work__name--c .tate { font-size: max(1.05rem, min(clamp(1.45rem, 0.95rem + 1.7vw, 2.25rem), 4.4vh)); color: var(--k-roiro); }

/* v1.2：サイト工房の説明直後に置くサービスサイトへの文字ボタン（V12-15）。
   共通の .btn / .btn--quiet は変更せず、この事業の説明内だけで使う専用クラスにする。
   同じタブの通常遷移で、追跡パラメーター・外部リンクアイコン・補足文は持たせない。 */
.work__cta { margin: clamp(1.2rem, 2.8vw, 1.9rem) 0 0; }
.work__cta-link {
  display: inline-block;
  max-width: 100%;
  padding: 0.68rem 1.1rem;
  font-family: var(--font-gothic);
  font-size: 0.9375rem;
  line-height: 1.8;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  color: var(--ink);
  text-decoration: none;
  border-bottom: var(--hair) solid var(--rule-strong);
  transition: color 0.3s ease, border-color 0.3s ease, transform 0.4s cubic-bezier(0.22,0.61,0.24,1);
}
.work__cta-link:hover {
  color: var(--k-roiro);
  border-bottom-color: var(--k-roiro);
  transform: translateY(-2px);
}
.work__cta-link:focus-visible { outline: 2px solid var(--b-konnezu); outline-offset: 3px; }

@media (min-width: 60.01rem) {
  .work--b .work__text,
  .work--c .work__text {
    display: grid;
    column-gap: clamp(1.2rem, 3.4vw, 2.6rem);
    align-items: start;
  }
  /* 第二の場面：題字を右に立てる */
  .work--b .work__text { grid-template-columns: minmax(0, 1fr) auto; }
  .work--b .work__text > * { grid-column: 1; }
  .work--b .work__name { grid-column: 2; grid-row: 1 / span 12; margin-bottom: 0; }
  /* 第三の場面：題字を左に立てる */
  .work--c .work__text { grid-template-columns: auto minmax(0, 1fr); }
  .work--c .work__text > * { grid-column: 2; }
  .work--c .work__name { grid-column: 1; grid-row: 1 / span 12; margin-bottom: 0; }
}

/* お問い合わせ：通信波形 */
.wave { margin: 0 auto clamp(2rem, 5vw, 3.2rem); width: min(46rem, 100% - var(--gutter) * 2); }

/* 送信完了 */
.finish__text { font-weight: 400; }

/* --------------------------------------------------------------------------
   19. 可視の社名（v1.1 追加指示）
   本文中に埋め込まれた「K-Unit株式会社」だけをしっぽり明朝で表示するための
   最小ユーティリティ。段落全体の書体は変えない。
   -------------------------------------------------------------------------- */
.corp-name { font-family: var(--font-mincho); }