@charset "UTF-8";
/* ==========================================================================
   ESPLAN 合同会社 — コーポレートサイト共通スタイル
   既存サイト（ペライチ）のレイアウト・文字組みに合わせた控えめな設計。
   フォントのみ Zen Old Mincho に統一。
   ========================================================================== */

:root {
  --ink:        #05161a;   /* 本文・見出し（現行サイト踏襲） */
  --ink-soft:   #4a5559;   /* 副次テキスト */
  --paper:      #f7f7f7;   /* 背景（現行サイト踏襲） */
  --paper-pure: #ffffff;
  --accent:     #1b3a4b;   /* 差し色（闘魚モチーフの藍。リンク等ごく控えめに） */
  --hairline:   rgba(5, 22, 26, 0.16);
  --hairline-strong: rgba(5, 22, 26, 0.38);
  --btn-gray:      #9a9fa2;   /* ボタンの枠線（通常時） */
  --btn-gray-fill: #6f767a;   /* ボタンの背景（ホバー時） */

  /* 欧文＝Inter（サンセリフ）／ 和文＝Zen Old Mincho（明朝）。
     日本語はグリフ単位のフォールバックで Zen Old Mincho に落ちる。 */
  --serif: "Inter", "Helvetica Neue", "Segoe UI", Arial,
           "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho",
           "Noto Serif JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  --jp: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho",
        "Noto Serif JP", "MS PMincho", serif;
  /* 明示的にゴシック（サンセリフ）にしたい箇所用。和文もゴシックに落ちる。 */
  --gothic: "Inter", "Helvetica Neue", "Hiragino Kaku Gothic ProN", "Hiragino Sans",
            "Yu Gothic", "YuGothic", "Noto Sans JP", "Meiryo", sans-serif;
  /* 明示的にセリフ（英数字は EB Garamond）にしたい箇所用。和文は明朝。 */
  --note-serif: "EB Garamond", Georgia, "Times New Roman",
                "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;

  /* 現行サイトに合わせた文字サイズ（現行 body 14px / 小 13px / 注記 12px / キャッチ 40px、行間 1.6） */
  --fs-xs:   12px;   /* 小注記・コピーライト */
  --fs-sm:   13px;   /* ラベル・略歴 */
  --fs-base: 14px;   /* 本文 */
  --fs-md:   16px;   /* ミッション本文・ナビ */
  --fs-lg:   17px;   /* 小見出し */
  --fs-xl:   clamp(1.4rem, 1.2rem + 0.9vw, 1.75rem);   /* 見出し */
  --fs-hero: clamp(1.9rem, 1.2rem + 3vw, 2.5rem);       /* ヒーローのコピー（現行 ≒ 40px） */

  --measure: 34rem;
  --page-max: 60rem;
  --gutter: clamp(1.25rem, 5vw, 3.5rem);

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

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* スマホでタップ時に付くデフォルトの半透明ハイライト（水色）を全面的に無効化。
   指定したモーション以外、タップで勝手に背景がつかないようにする（PCには影響しない）。 */
* { -webkit-tap-highlight-color: transparent; }
body {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--fs-base);
  line-height: 1.7;
  color: var(--ink);
  background: var(--paper-pure);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "palt" 1;
}
img, picture, video, svg { display: block; max-width: 100%; height: auto; }
/* 画像の保存操作を抑止（ドラッグ／長押しメニュー／選択）。
   ※要素検証や画像URLの直接アクセスまでは防げません。 */
img {
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  user-select: none;
}
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; color: inherit; }

/* ---------- layout helpers ---------- */
.wrap {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.measure { max-width: var(--measure); margin-inline: auto; }
.section { padding-block: clamp(3.5rem, 2.5rem + 5vw, 6.5rem); }
.section--tight { padding-block: clamp(2.75rem, 2rem + 3vw, 4.5rem); }
/* 制作実績以外：境界線と見出しの間隔を見出し1行分（≒1.7rem）詰める */
.sec-tuck { padding-top: max(0.9rem, calc(clamp(2.75rem, 2rem + 3vw, 4.5rem) - 1.7rem)); }
/* さらに見出し↔ボディの間隔もスマホ表示と同じ（2rem）まで詰める */
body.svc .sec-tuck .sect-head { margin-bottom: 2rem; }
.centered { text-align: center; }
.stack > * + * { margin-top: 1.25em; }
/* 背景の切り替え：既定は白（body）、.tint がグレー帯。白／グレー／白… で交互 */
.tint { background: var(--paper); }
.pure { background: var(--paper-pure); }

/* 縦のヘアライン（現行サイトのモチーフ） */
.rule-v {
  width: 1px;
  height: clamp(2.75rem, 7vw, 4.5rem);
  background: var(--hairline-strong);
  margin: clamp(2rem, 5vw, 3.25rem) auto;
}
.rule-h { border: 0; border-top: 1px solid var(--hairline); margin-block: clamp(2.5rem, 5vw, 4rem); }

/* ---------- typography ---------- */
h1, h2, h3 { font-weight: 400; line-height: 1.6; }
.eyebrow {
  font-size: var(--fs-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.5;
}

/* 番号付きセクション見出し（ベンチマーク参考：日英併記） */
/* 見出し（和文）と英字は、それぞれ「字面の左端〜右端の中心」を画面センターに合わせる。
   text-align: center は末尾の字間ぶん左にずれるため、flex 縦積み＋末尾字間の相殺で
   “見た目の中心” を揃える（和文・英字が互いにずれて見えないように）。 */
.sect-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: clamp(2rem, 5vw, 3.25rem);
}
.sect-head .no {
  font-size: var(--fs-sm);
  letter-spacing: 0.28em;
  margin-right: -0.28em;
  opacity: 0.35;
}
.sect-head h1, .sect-head h2 {
  font-size: var(--fs-lg);
  letter-spacing: 0.1em;
  margin-right: -0.1em;      /* 末尾字間を相殺して視覚中央へ */
  margin-top: 0.9rem;
}
/* SERVICEページの和文見出し（制作実績〜よくある質問）：字間を広げる（相殺量も合わせる）。 */
body.svc .sect-head h2 {
  letter-spacing: 0.3em;
  margin-right: -0.3em;
}
.sect-head .en {
  font-size: var(--fs-xs);
  letter-spacing: 0.28em;
  margin-right: -0.28em;     /* 末尾字間を相殺して視覚中央へ */
  text-transform: uppercase;
  opacity: 0.45;
  margin-top: 0.55rem;
  line-height: 1.7;
}
/* SERVICEページ：各セクション見出し下の英字を、英字1行の半分ぶん上へ */
body.svc .sect-head .en { margin-top: calc(0.55rem - 0.85em); }
.h-sect {
  font-size: var(--fs-lg);
  letter-spacing: 0.08em;
}
.h-page {
  font-size: var(--fs-xl);
  letter-spacing: 0.08em;
  line-height: 1.55;
}
.h-latin { letter-spacing: 0.1em; }
.lead { font-size: var(--fs-md); line-height: 1.75; }
.tracked { letter-spacing: 0.3em; }
.small { font-size: var(--fs-sm); }
p + p { margin-top: 1.3em; }

.link-underline {
  border-bottom: 1px solid var(--hairline-strong);
  padding-bottom: 0.12em;
  transition: color 0.35s var(--ease), border-color 0.35s var(--ease);
}
.link-underline:hover { color: var(--accent); border-color: var(--accent); }

/* ---------- header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--paper-pure) 88%, transparent);
  backdrop-filter: saturate(180%) blur(8px);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--hairline);
  transition: transform 0.5s var(--ease-expo);
}
.site-header[data-hidden="true"] { transform: translateY(-100%); }
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.75rem;
  position: relative;
}
.nav {
  display: flex;
  gap: clamp(1rem, 4vw, 2.25rem);
  align-self: stretch;          /* ヘッダー高さいっぱいに */
  align-items: stretch;
  justify-content: center;
}
.nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-sm);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.7;
  transition: opacity 0.3s var(--ease);
  padding-block: 0.6rem;
}
.nav a:hover, .nav a[aria-current="page"] { opacity: 1; }
/* 選択中のメニュー：文字色が濃くなると同時に、ヘッダー下端の区切り線（グレー）を
   その項目の文字幅ぶんだけ黒に置き換える（新しい線を足すのではなく上書き）。 */
.nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0.16em;       /* 末尾の字間ぶんを差し引き、文字幅に合わせる */
  bottom: -1px;                 /* .site-header の border-bottom に重ねる */
  height: 1px;
  background: var(--ink);
}
.nav-toggle { display: none; }
/* ヘッダー中央のワードマーク：ナビがハンバーガーに畳まれる幅でのみ表示 */
.site-brand { display: none; }

@media (max-width: 34rem) {
  .site-header__inner { justify-content: flex-end; }
  .site-brand {
    display: block;
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--note-serif);   /* セリフ体（EB Garamond） */
    color: var(--ink);
    opacity: 0.5;               /* フッターと同じ淡いグレー */
    transition: opacity 0.3s var(--ease);
    font-size: var(--fs-md);   /* 17 → 16px */
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .site-brand:active { opacity: 1; }   /* タップした瞬間だけ濃く */
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.5rem; height: 2.5rem; border: 0;
    margin-right: -0.4rem;        /* 枠を外したぶん、線を右端に寄せる（タップ範囲は維持）*/
    background: transparent; cursor: pointer;
  }
  .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
    content: ""; display: block; width: 1rem; height: 1px; background: var(--ink);
    position: relative; transition: transform 0.3s var(--ease);
  }
  .nav-toggle span::before { position: absolute; top: -0.32rem; }
  .nav-toggle span::after  { position: absolute; top: 0.32rem; }
  .nav-toggle[aria-expanded="true"] span { background: transparent; }
  .nav-toggle[aria-expanded="true"] span::before { transform: translateY(0.32rem) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span::after  { transform: translateY(-0.32rem) rotate(-45deg); }
  .nav {
    position: fixed; inset: 3.75rem 0 auto 0; flex-direction: column; gap: 0;
    background: var(--paper); border-bottom: 1px solid var(--hairline);
    padding: 0 var(--gutter) 1.5rem;
    transform: translateY(-130%); transition: transform 0.4s var(--ease);
  }
  .nav[data-open="true"] { transform: translateY(0); }
  .nav a { width: 100%; padding-block: 1rem; border-bottom: 1px solid var(--hairline); font-size: var(--fs-md); }
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  display: grid;
  place-items: center;
  text-align: center;
  padding: clamp(2rem, 5vw, 4rem) var(--gutter) clamp(2.5rem, 7vw, 5rem);
  background: var(--paper-pure);
  overflow: hidden;
}

/* MISSIONページ：ヒーロー（動画＋宣言）を画面に固定し、常に手前に置く。
   本文以下はその背後をスクロールし、ヒーロー下端のグラデーションで溶けて消える。 */
body.home .hero--sticky {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 3;
  min-height: min(54svh, 31rem);
  padding-block: clamp(2rem, 8vh, 5rem) clamp(3rem, 12vh, 7rem);
  overflow: visible;                        /* 魚の尾は下にはみ出してよい */
  background: linear-gradient(
    to bottom,
    var(--paper-pure) 0,
    var(--paper-pure) 62%,
    rgba(255, 255, 255, 0) 100%
  );
}
body.home main { position: relative; z-index: 1; }   /* padding-top は JS でヒーロー高さに合わせる */
body.home main > section:not(.hero) { background: transparent; }

/* スマホ版のみ：PC版とは前後関係を逆にする（/mission-test/ での検証を経て本採用）。
   PC版：HERO（背景＋メインコピー）が常に最前面、本文はその背後をスクロールし、
   　　　HERO下端のグラデーションで溶けて消える。
   スマホ版：HERO全体を本文セクションより背面へ（z-index を入れ替え）。
   　　　　　動画（.hero__media）はそのまま常に本文の背後に見え続ける（本文セクションの
   　　　　　背景は透明のままなので、文字の隙間から透けて見える＝構成は変えていない）。
   　　　　　メインコピー（.hero__inner）だけは個別に mask-image（横一線のハードエッジ）を
   　　　　　かけ、スクロール量に応じてキッチリ消えるようにする。
   JS（main.js）がスクロール位置から --hero-visible-pct を計算して渡すだけで、
   表示のON/OFFや構成要素には一切関与しない。 */
@media (max-width: 40rem) {
  body.home .hero--sticky { z-index: -1; }
  body.home main > section:not(.hero) { position: relative; z-index: 1; }
  body.home .hero__inner {
    /* mask-image（グラデーション）は値の更新のたびにメインスレッドでの再ペイントを
       伴いやすく、動画のデコード・再生と競合してスクロール中にカクつく原因になった。
       ハードエッジな矩形カットのみなら clip-path で同じ見た目を再現でき、
       こちらはコンポジタ側で処理されやすく軽い（2026-09-11 カクつき対策で変更）。 */
    -webkit-clip-path: inset(0 0 calc(100% - var(--hero-visible-pct, 100%)) 0);
    clip-path: inset(0 0 calc(100% - var(--hero-visible-pct, 100%)) 0);
    will-change: clip-path;
  }
}
body.home main > section.tint { background: var(--paper); }
/* Our Value（最終セクション）は最下部スクロール時に1画面へ収まるよう余白を圧縮 */
body.home main > section[aria-labelledby="value-h"] {
  padding-block: clamp(1.75rem, 4vw, 3rem);
}

/* ミッション文の位置微調整 */
/* left: 句点「。」の右アキ分だけ右へ寄せ、「デ」左端と「。」の◯右端の中点を画面センターへ（光学的center） */
body.home .ms-1 { position: relative; top: 0.85em; left: 0.02em; }    /* 半行ぶん下へ／視覚中央合わせ（句読点を詰めたぶん補正量は小さい）*/
body.home .ms-2 { position: relative; top: -5.4em; }    /* 3行ぶん上へ */
/* スマホ版のみ：メインコピーの中心を「ヘッダー境界線〜サブコピー文字上端」の中間に合わせる（実測補正）。
   出現モーションも SERVICE HERO メインコピーと全く同じに（スライドなしの純フェード・2.3s ease-in-out）。 */
@media (max-width: 40rem) {
  body.home .ms-1 { top: calc(0.85em + 36px); transform: none; transition: opacity 2.3s ease-in-out; }
  /* サブコピーも SERVICE HERO サブコピーと全く同じに（2.2s ease-expo・メインコピー完了と同時に開始）*/
  body.home .ms-2 { transition: opacity 2.2s var(--ease-expo), transform 2.2s var(--ease-expo); transition-delay: 2.3s; }
}
/* 動画（＋静止画フォールバック）をミッション文の半行ぶん下へ */
body.home .hero__media { top: calc(52% + var(--fs-hero) * 0.85); }
.hero__media {
  position: absolute;
  left: 50%; top: 52%;
  transform: translate(-50%, -50%);
  width: min(104%, 52rem);
  max-width: none;
  z-index: 0;
  pointer-events: none;
  mix-blend-mode: multiply;
  will-change: transform, opacity;
  /* 読み込み中は非表示。再生開始（またはフォールバック確定）でふわっと表示 */
  opacity: 0;
  transition: opacity 0.8s var(--ease);
  /* JS が動かない場合の保険：1.8秒後に必ず表示 */
  animation: hero-media-in 0.01s linear 1.8s forwards;
}
.hero__media.is-ready { opacity: 0.22; }        /* 現行サイト同様、文字の視認性を優先して淡く */
@keyframes hero-media-in { to { opacity: 0.22; } }
/* スマホ版のみ：動画の描画幅が画面幅を超えないようにする（中心は left:50%+translateX(-50%) のまま変えない）。
   PCと同じ104%だと画面幅より広くなり、魚が右端で見切れてしまうため。 */
@media (max-width: 40rem) {
  .hero__media { width: 100vw; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__media { transition: none; }
}
/* 静止画フォールバック（自動再生ブロック時に JS が表示） */
.hero__media--still { display: none; }
.hero__inner {
  position: relative;
  z-index: 1;
  padding-block: clamp(3.5rem, 12vw, 7.5rem);
}
.hero__copy {
  font-size: var(--fs-hero);
  letter-spacing: 0.1em;
  line-height: 1.7;
  font-weight: 400;
}
.hero--plain { background: var(--paper-pure); padding-block: clamp(1.5rem, 4vw, 2.5rem); }
.hero--plain .hero__inner { padding-block: clamp(1rem, 3vw, 2rem); }
.hero__sub {
  margin-top: 1.4rem;
  font-size: var(--fs-sm);
  letter-spacing: 0.24em;
  opacity: 0.62;
}

/* SERVICEページ：パース画像を背景に敷いたヒーロー */
.hero--image {
  position: relative;
  overflow: hidden;
  color: #fff;
  background: #0e1a1f;
  padding-block: clamp(3.5rem, 12vh, 7rem);
  min-height: min(68svh, 36rem);
}
.hero--image .hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #0e1a1f url("/assets/img/hero-3dcg.jpg?v=3") center / cover no-repeat;
}
.hero--image .hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(9, 17, 21, 0.44) 0,
    rgba(9, 17, 21, 0.68) 62%,
    rgba(9, 17, 21, 0.82) 100%
  );
}
.hero--image .hero__inner { position: relative; z-index: 1; }
/* H1：MISSION の宣言文と同じ要領で光学的センタリング。
   各行の末尾（「、」「。」）の右アキ分だけ右へ寄せ、字面の中心を画面センターへ。
   フェードで transform を使うため水平位置は left で調整（transform と競合させない）。 */
.hero--image .hero__copy {
  color: #fff;
  position: relative;
  left: 0.36em;
  line-height: 1.36;   /* 行間を20%縮小（1.7 → 1.36。PC・スマホ共通） */
}
/* SERVICE ヒーローのメインコピーのみ：ひらがなを 1px 小さく（漢字・カタカナは常に大きい）*/
body.svc .hero--image .hero__copy .hira { font-size: calc(1em - 1px); }
/* 文字の「淡さ」は opacity ではなく color のアルファで表現（opacity はフェード専用）。
   eyebrow・サブコピーも末尾の字間／句読点アキ分だけ右へ寄せて視覚的に中央へ（カーニング補正）。 */
.hero--image .eyebrow {
  opacity: 1;
  color: rgba(255, 255, 255, 0.82);
  position: relative;
  left: 0.13em;
}
.hero--image .hero__lead {
  font-size: 16px;
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.94);
  position: relative;
  left: 0.31em;
}
/* サブコピーは1文ずつ <br> で改行。1文目が1行に収まらない幅では改行しない（MISSION と同じ要領）*/
.hero--image .measure { max-width: 44rem; }
/* スマホ版のみ：サブコピーを MISSION のサブコピー（スマホ版・15px）と同じサイズに。
   さらにスマホ版のみ：0.8px縮小＋行間20%縮小（15px/1.9 → 14.2px/1.52） */
@media (max-width: 40rem) {
  body.svc .hero--image .hero__lead { font-size: 14.2px; line-height: 1.52; }
}
@media (max-width: 31rem) { .hero--image .hl-br { display: none; } }

/* メインコピー：「3DCG / VR / Walkthrough」を含まず、H1 の塊の中心を背景画像の中心に合わせる
   （eyebrow ＋ H1 上マージンの半分ぶん上へ寄せて、グループ中心ではなく H1 中心を 50% に）。
   PC・スマホ共通（サブコピーを絶対配置で外に出すため grid の中身は hero__inner のみ）。 */
.hero--image .hero__inner { transform: translateY(-1.14rem); }

/* サブコピー（2行）を背景画像の下部へ。PC・スマホ共通で絶対配置。 */
.hero--image .hero__lead--low {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(0.5rem, 15%, 1.2rem);   /* 実画像に合わせて微調整可 */
  z-index: 1;
  max-width: none;
  padding-inline: var(--gutter);
}
.hero--image .hero__lead--low .hero__lead {
  max-width: 47rem;       /* 各文が1行に収まる幅 */
  margin-inline: auto;
}
@media (max-width: 48rem) {
  .hero--image .hero__bg { background-image: url("/assets/img/hero-3dcg-sm.jpg?v=4"); }
}

/* --- SERVICE ヒーロー：背景＋H1 を同時に開始、H1 の表示完了と同時にサブを開始 ---
   背景は画像の読み込み完了後にフェード開始（JS が .hero-go を付与）。 */
.hero--image .hero__bg,
.hero--image .eyebrow,
.hero--image .hero__copy,
.hero--image .measure {
  opacity: 0;
  transition: opacity 1.9s var(--ease-expo), transform 1.9s var(--ease-expo);
}
.hero--image .hero__bg { transition-delay: 0s; }
.hero--image .eyebrow,
.hero--image .hero__copy {
  transform: translateY(1rem);
  /* 背景と同時に開始するが、ease-in-out で終始じわっと変化させ、完了までを長く見せる */
  transition: opacity 2.3s ease-in-out, transform 2.3s ease-in-out;
  transition-delay: 0s;
}
.hero--image .measure {
  transform: translateY(1rem);
  transition: opacity 2.2s var(--ease-expo), transform 2.2s var(--ease-expo);  /* 表示完了までを 1.9s → 2.2s */
  transition-delay: 2.3s;                 /* H1 の表示完了と同時にサブ開始 */
}
.hero--image.hero-go .hero__bg,
.hero--image.hero-go .eyebrow,
.hero--image.hero-go .hero__copy,
.hero--image.hero-go .measure { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .hero--image .eyebrow,
  .hero--image .hero__copy,
  .hero--image .measure { transform: none; }
}
:root[data-noanim] .hero--image .hero__bg,
:root[data-noanim] .hero--image .eyebrow,
:root[data-noanim] .hero--image .hero__copy,
:root[data-noanim] .hero--image .measure { transition: none; opacity: 1; transform: none; }
/* スマホ版のみ：メインコピー（eyebrow・H1）はスライドなしの純フェードに（MISSION・PROFILEの
   マーク類と動きを揃えるため。時間・イージングは変えない）*/
@media (max-width: 40rem) {
  body.svc .hero--image .eyebrow,
  body.svc .hero--image .hero__copy { transform: none; transition: opacity 2.3s ease-in-out; }
}

/* --- SERVICE 制作実績：見出し＋1列目はセクション表示の0.2s後、
   2列目以降は各行が画面に入った0.2s後に、行ごとにフェードイン（JS が .is-risen / .is-in を付与）。 --- */
body.svc [aria-labelledby="s-works"] .sect-head {
  opacity: 0;
  transform: translateY(4.5rem);
  transition: opacity 1s var(--ease-expo),
              transform 1.2s var(--ease-expo);
}
body.svc [aria-labelledby="s-works"] .sect-head.is-risen {
  opacity: 1;
  transform: none;
}
/* カード：初期は非表示＆やや下。JS が行ごとに .is-in を付与。
   透過より少し長く transform をかけ、表示後も上へ滑らかに移動して収まる（createe-inc 参照）。 */
body.svc [aria-labelledby="s-works"] .works-grid .work {
  opacity: 0;
  transform: translateY(4rem);
  transition: opacity 0.95s ease-in-out, transform 1.15s ease-in-out;
}
body.svc [aria-labelledby="s-works"] .works-grid .work.is-in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  body.svc [aria-labelledby="s-works"] .sect-head,
  body.svc [aria-labelledby="s-works"] .works-grid .work { transform: none; }
}
:root[data-noanim] body.svc [aria-labelledby="s-works"] .sect-head,
:root[data-noanim] body.svc [aria-labelledby="s-works"] .works-grid .work {
  transition: none; opacity: 1; transform: none;
}

/* ---------- mission ---------- */
.mission-copy {
  font-size: var(--fs-md);
  line-height: 1.8;
  /* 数字（0→1 等）はセリフ体に。和文は明朝のまま。 */
  font-family: var(--note-serif);
}
/* ミッション文：指定改行のとき 3 行（各文が 1 行）に収まるよう計測幅を確保。
   狭い画面（1 文目が 1 行に収まらない幅）では改行を一切出さない。 */
body.home #mission .measure { max-width: 40rem; }
@media (max-width: 44rem) {
  .mission-copy .mc-br { display: none; }
}
/* スマホ版のみ：サブコピーを 1px 縮小 */
@media (max-width: 40rem) {
  body.home .mission-copy { font-size: 15px; }
}

/* ---------- Our Value ---------- */
/* この節の英字（見出し＋5項目＋区切り）は EB Garamond。
   和文（副題・各項目の説明）は明朝のまま。 */
.value-head h2,
.value-item b,
.value-sep {
  font-family: "EB Garamond", Georgia, "Times New Roman",
               "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight: 400;
}

.value-head { text-align: center; }
.value-head h2 {
  font-size: 33px;
  line-height: 1.2;
  letter-spacing: 0.06em;
  display: block;
}
/* Our Value 下の横線：長さは1行目（Flexibility〜Integrity）の幅に一致（JSで --uline を設定） */
/* 見出し・横線・副題の3要素の間隔は詰める */
.value-uline {
  display: block;
  /* 1行目の幅（JSが設定する --uline）の 1.1 倍 */
  width: clamp(11rem, calc(var(--uline, 18rem) * 1.1), 100%);
  height: 1px;
  background: var(--hairline-strong);
  margin: 0.35rem auto 0.4rem;
}
.value-head p {
  font-size: 16px;   /* 「私たちの行動規範」の字面幅が「Our Value」より若干小さくなるサイズ */
  line-height: 1.3;
  opacity: 0.7;
  margin-top: 0.15rem;
  letter-spacing: 0.08em;
}

.value-rows {
  margin-top: clamp(1.5rem, 4vw, 2.25rem);
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 3.5vw, 2rem);
  align-items: center;
}
.value-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 0.6em 1.4em;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
}
/* 2段目（Customer Success / Future-Oriented）を英字の半行ぶん上へ */
.value-rows > .value-row + .value-row { margin-top: -21px; }   /* 英字 28px × 1.5 の半行 */
.value-item { text-align: center; }
.value-item b {
  font-weight: 400;
  font-size: 28px;
  letter-spacing: 0.02em;
  display: block;
  line-height: 1.5;          /* 英語と日本語の行間 */
}
.value-item span {
  display: block;
  font-size: 14px;
  opacity: 0.6;
  letter-spacing: 0.06em;
  line-height: 1.5;
}
/* スラッシュは英語の文字高さの中心に合わせる（英語の行と同じ位置に置く） */
.value-sep {
  align-self: flex-start;
  opacity: 0.3;
  font-size: 28px;
  line-height: 1.5;
}
/* 狭い画面：5要素を1列に等間隔で並べる（行のまとまりを解除） */
@media (max-width: 40rem) {
  .value-sep { display: none; }
  .value-row { display: contents; }
  .value-rows > .value-row + .value-row { margin-top: 0; }   /* 縦積み時は等間隔を維持 */
  .value-rows { gap: clamp(1.5rem, 6vw, 2rem); }
  /* スマホ版のみ：文字サイズ・行間を20%縮小（日本語・英語とも） */
  .value-head h2 { font-size: 26.4px; line-height: 0.96; }
  .value-head p  { font-size: 12.8px; line-height: 1.04; }
  .value-item b    { font-size: 22.4px; line-height: 1.2; }
  .value-item span { font-size: 11.2px; line-height: 1.2; }
}

/* ---------- 事業内容 / サービス ---------- */
.cols {
  display: grid;
  gap: clamp(1.75rem, 5vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}
.col h3 { font-size: var(--fs-lg); letter-spacing: 0.06em; margin-bottom: 0.5rem; }
.col p  { font-size: var(--fs-sm); opacity: 0.78; line-height: 1.75; }
.col--center { text-align: center; }

/* ---------- profile ---------- */
/* ロゴ：スライドなしの純フェードイン。所要時間・イージングは MISSION の宣言文と同じ（1.9s）。
   ページ最上部にあり IntersectionObserver では初期状態が描画される前に表示扱いに
   なってしまうため、JS が double-rAF で .is-in を付与して確実にフェードさせる。 */
.logo-mark {
  width: 78px;
  margin: 0 auto clamp(1.5rem, 4vw, 2.25rem);
  opacity: 0;
  transition: opacity 1.9s var(--ease-expo);
}
.logo-mark.is-in { opacity: 1; }
/* スマホ版のみ：ロゴの出現モーションを SERVICE HERO メインコピーと全く同じに（2.3s ease-in-out。
   もとから純フェードなのでスライドの追加は不要）。
   ロゴ・HEROコピー（.p-title/.p-intro）・写真（.rep-photo）を0.2s刻みで蛇腹状に連ねる構成のうち、
   ロゴが起点（delay 0s）。コピーは+0.2s、写真は+0.4s（各要素のコメント参照）。*/
@media (max-width: 40rem) {
  body.prof .logo-mark { transition: opacity 2.3s ease-in-out; }
}
@media (prefers-reduced-motion: reduce) { .logo-mark { transition: opacity 1.9s ease; } }
:root[data-noanim] .logo-mark { opacity: 1; transition: none; }

.rep-title { font-size: var(--fs-xs); opacity: 0.65; letter-spacing: 0.06em; }
.rep-name  { font-size: var(--fs-lg); letter-spacing: 0.14em; margin-top: 0.5rem; }
.rep-name small { font-size: 0.6em; letter-spacing: 0.08em; opacity: 0.6; }

.history { width: 100%; border-collapse: collapse; margin-top: 1.5rem; }
.history th, .history td {
  text-align: left; padding: 0.85rem 1rem 0.85rem 0;
  border-bottom: 1px solid var(--hairline); vertical-align: baseline;
  font-weight: 400; font-size: var(--fs-sm);
}
.history th { white-space: nowrap; width: 4.5rem; opacity: 0.55; }
.history td span { opacity: 0.55; }

.facts { text-align: center; display: grid; gap: 1.6rem; margin-top: 1.75rem; }
.facts dt {
  font-size: var(--fs-sm); letter-spacing: 0.06em;
  border-bottom: 1px solid var(--hairline-strong); display: inline-block;
  padding-bottom: 0.15rem; margin-bottom: 0.5rem;
}
.facts dd { font-size: var(--fs-base); }
.facts dd + dd { margin-top: 0.2rem; }

/* ---------- profile / contact：MISSION・SERVICE の設計を踏襲 ----------
   構成要素は変えず、書体（明朝＝見出し・社名／ゴシック＝本文・ラベル・注釈）、
   文字サイズ、色（可読な副次テキストはチャコール #36454f）、行間のみ調整。 */

/* 中央寄せの和文見出しはカーニング補正して視覚中央へ（SERVICE と同じ要領）*/
body.prof .sect-head h2,
body.contact .sect-head h1 {
  letter-spacing: 0.3em;
  margin-right: -0.3em;
}
/* 見出し下の英字を英字半行ぶん上へ（SERVICE と同じ）*/
body.prof .sect-head .en,
body.contact .sect-head .en { margin-top: calc(0.55rem - 0.85em); }

/* --- profile：導入（社名の由来）--- */
body.prof .p-title {
  font-size: 19px;
  letter-spacing: 0.18em;
  margin-right: -0.18em;   /* 末尾字間ぶんを相殺（中央寄せ）*/
}
body.prof .p-intro {
  font-family: var(--note-serif);
  font-size: 15px;
  line-height: 2;
  color: #36454f;
  margin-top: 1.6rem;
}
/* スマホ版のみ：ロゴ以外の HERO テキスト（社名見出し＋導入文、合計3行）の出現モーションを
   ロゴ・写真と全く同じに（スライドなしの純フェード・2.3s ease-in-out）。
   蛇腹状に連なるよう、発火タイミングだけロゴの0.2s後にずらす（詳細は .logo-mark 付近のコメント参照）。*/
@media (max-width: 40rem) {
  body.prof .p-title,
  body.prof .p-intro {
    transform: none;
    transition: opacity 2.3s ease-in-out;
    transition-delay: 0.2s;
  }
}
/* 「esprit」「plan」を「心 / 知性 / 才気」「設計」の上に注記表示（?ruby=1）。
   ネイティブ <ruby>/ruby-align は自動伸縮の副作用がありブラウザ差も大きいため使わず、
   position:absolute の手動配置で「ベースの中心＝注記の中心」を揃えるだけの
   シンプルな中央合わせにする（JS 不要・幅を揃えようとしないので確実に動く）。
   注記自身の文字間は esprit・plan で共通の値にする。 */
body.prof .p-intro--ruby { line-height: 2.5; }   /* 注記の上に余白を確保 */
body.prof .p-intro--ruby .p-ruby__base { position: relative; }
body.prof .p-intro--ruby .p-ruby__rt {
  position: absolute;
  left: 50%;
  bottom: 100%;
  /* 字面の中心をベースの中心に揃える（実測補正。.p-intro は固定15pxのため px 固定値で安定）。
     そこからさらに、ルビの文字間（letter-spacing: 0.6em）の1/3ぶんだけ左へ（-0.2em）。 */
  transform: translateX(calc(-50% + 4.14px - 0.2em));
  margin-bottom: 0.15em;
  line-height: 1;
  font-family: "EB Garamond", Georgia, "Times New Roman", serif;
  font-size: calc(0.62em + 0.5px);   /* 意味のある語なので注記としてはやや大きめ（+0.5px） */
  font-weight: 400;
  letter-spacing: 0.6em;      /* esprit・plan 共通の字間（以前の幅合わせ時と同程度に） */
  color: #36454f;
  opacity: 0.7;
  white-space: nowrap;
}
/* 対象語（知性・才気・設計）の文字間を、周囲の文章よりはっきり広げる */
body.prof .p-intro--ruby .p-tracked { letter-spacing: 0.16em; }
body.prof .p-intro--ruby .p-tracked--edge { margin-right: -0.16em; }

/* --- profile：代表プロフィール（写真＋自己紹介の2カラム）--- */
/* 写真＋テキストのまとまりをページ中央に。テキストは従来の可読幅を維持。 */
body.prof .rep-layout {
  display: flex;
  gap: clamp(1.75rem, 5vw, 3.5rem);
  align-items: flex-start;
  justify-content: center;
  max-width: 52rem;
  margin-inline: auto;
}
body.prof .rep-photo {
  flex: 0 0 clamp(9.5rem, 24vw, 15rem);
  margin: 0;
}
/* プロフィール写真：ロゴと同じ仕様のフェードイン（スライドなし・1.9s・ease-expo、PRM でも不透明度フェードは維持）。
   位置は折り返し下なので発火は従来どおりスクロールで（.reveal の IO）。 */
body.prof .rep-photo.reveal { transform: none; transition: opacity 1.9s var(--ease-expo); }
@media (prefers-reduced-motion: reduce) {
  body.prof .rep-photo.reveal { opacity: 0; transition: opacity 1.9s ease; }
  body.prof .rep-photo.reveal.is-visible { opacity: 1; }
}
body.prof .rep-photo img {
  width: 100%;
  aspect-ratio: 170 / 194;   /* ESPLAN ロゴの四角と同じ縦横比 */
  object-fit: cover;
  object-position: 40% 22%;   /* 顔まわりを中心に（実画像に合わせて微調整可）*/
  background: #e7e7e7;
  filter: grayscale(1) contrast(1.04);   /* モノクロ処理 */
}
body.prof .rep-body {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 34rem;
}
@media (max-width: 40rem) {
  body.prof .rep-layout { flex-direction: column; align-items: center; }
  body.prof .rep-photo { flex-basis: auto; width: min(13rem, 62%); }
  body.prof .rep-body { max-width: none; }
  /* スマホ版のみ：写真の出現モーションを SERVICE HERO メインコピーと全く同じに（2.3s ease-in-out。
     もとから純フェードなのでスライドの追加は不要）。
     蛇腹状に連なるよう、発火タイミングだけHEROコピー（ロゴの0.2s後）のさらに0.2s後にずらす
     （ロゴ基準で0.4s後＝ロゴ→コピー→写真が0.2s刻みで連なる）。*/
  body.prof .rep-photo.reveal { transition: opacity 2.3s ease-in-out; transition-delay: 0.4s; }
}

body.prof .rep-title {
  letter-spacing: 0.08em;
}
/* PC版のみ：名前・自己紹介文と同じ reveal フェードで表示させる（従来は opacity:0.6 が
   常時かかっていて reveal の 0→1 と衝突し、実質フェードしていなかった）。
   表示後の見え方（0.6・ミュート）自体はこれまでどおり維持する。 */
@media (min-width: 40.0625rem) {
  body.prof .rep-title.reveal.is-visible { opacity: 0.6; }
}
/* スマホ版は現状維持（今回の修正はPC版のみの指示のため）：フェードなしで常時0.6 */
@media (max-width: 40rem) {
  body.prof .rep-title { opacity: 0.6; }
}
body.prof #rep-h.rep-name {
  font-family: var(--note-serif);   /* 「Sakuma Kiyoshima」もセリフ（EB Garamond）*/
  font-size: 19px;                  /* 和文 17 → 19px */
  letter-spacing: 0.2em;            /* 和文の字間を広く */
}
body.prof #rep-h small {
  font-size: 12px;                  /* 欧文 ≒10 → 12px */
  letter-spacing: 0.08em;           /* 欧文はそのまま（和文の広い字間を引き継がない）*/
}
body.prof .p-bio {
  font-size: var(--fs-base);
  line-height: 1.95;
  color: #36454f;
  margin-top: 1.5rem;
}
body.prof .p-subhead {
  font-family: var(--gothic);
  font-size: var(--fs-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-top: 2.75rem;
}
/* スマホ版は現状維持（今回の修正はPC版のみの指示のため）：フェードなしで常時0.5 */
@media (max-width: 40rem) {
  body.prof .p-subhead { opacity: 0.5; }
}

/* --- profile：略歴テーブル（タイトル＝セリフ／チャコール、所属＝改行＋字下げ）--- */
body.prof .history { font-family: var(--note-serif); }
body.prof .history th {
  font-family: "EB Garamond", Georgia, "Times New Roman", serif;
  font-size: var(--fs-base);
  letter-spacing: 0.04em;
  opacity: 0.5;
}
body.prof .history td { line-height: 1.7; color: #36454f; }
body.prof .history td span {
  display: block;
  margin-top: 0.2em;
  padding-left: 1.25em;
  font-size: 0.9em;
  opacity: 0.5;
}

/* PC版のみ：略歴（見出し＋表）は SERVICE の制作実績と同じトリガー方式に変更。
   画面に入ってから 0.2s 後にフェードイン開始（JS が main.js で .is-risen を付与）。
   スマホ版は既存の reveal（IntersectionObserver）のまま変更していない。
   セレクタの specificity を汎用 .reveal.is-visible より確実に強くするため
   [data-history-reveal] 属性を使う。 */
@media (min-width: 40.0625rem) {
  body.prof [data-history-reveal].reveal {
    opacity: 0;
    transform: translateY(2.5rem);
    transition: opacity 1s var(--ease-expo), transform 1.2s var(--ease-expo);
  }
  body.prof [data-history-reveal].reveal.is-risen {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.prof [data-history-reveal].reveal { transform: none; }
}
:root[data-noanim] body.prof [data-history-reveal].reveal {
  transition: none;
  opacity: 1;
  transform: none;
}

/* --- profile：会社概要（中身は全てセリフ）--- */
body.prof .facts { font-family: var(--note-serif); }
body.prof .facts dt {
  font-size: 11px;   /* 小見出し（説明文は 15px）*/
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.5;
  line-height: 1.1;            /* 罫線を文字に近づける */
  padding-bottom: 0.1em;       /* 小見出しと罫線の隙間はごく僅かに */
  margin-bottom: 0.35rem;
}
body.prof .facts dd { font-size: 15px; line-height: 1.75; color: #36454f; }
/* 複数行の値（Business / Group）は行間を従来の約 2/3 に詰める */
body.prof .facts dd:has(+ dd),
body.prof .facts dd + dd { line-height: 1.45; }

/* 会社概要のリンク：罫線（.link-underline）ではなくテキスト下線で示す
   （dt の罫線と重なって見えるのを避ける）*/
body.prof .facts-link {
  border: 0;
  padding: 0;
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
  text-decoration-color: rgba(27, 58, 75, 0.45);
  transition: text-decoration-color 0.3s var(--ease);
}
body.prof .facts-link:hover { text-decoration-color: var(--accent); }

/* 電話番号：スマホ表示以外はリンクにしない（ただの本文として表示）*/
body.prof .facts-link--tel {
  color: inherit;
  text-decoration: none;
  pointer-events: none;
}
@media (max-width: 34rem) {
  body.prof .facts-link--tel {
    color: var(--accent);
    text-decoration: underline;
    text-decoration-color: rgba(27, 58, 75, 0.45);
    pointer-events: auto;
  }
}

/* --- contact --- */
body.contact .c-intro {
  font-family: var(--note-serif);
  font-size: 15px;
  line-height: 1.9;
  color: #36454f;
  margin-top: 0.4rem;
}
/* 1行に収まらない幅（実測：約417pxが境目）でのみ、読点の位置で改行する。
   ブラウザの自動折り返し（任意の文字間で起きる）に委ねず、意味の切れ目で揃える。 */
.c-intro .c-br { display: none; }
@media (max-width: 26rem) {
  .c-intro .c-br { display: inline; }
}
body.contact .form-note { font-family: var(--gothic); }
body.contact .alert { font-family: var(--gothic); }
/* 送信完了メッセージ：「お問い合わせを送信しました。確認のメールを自動送信しています。」が
   1行に収まる幅でだけ、その位置で改行する。収まらない幅では改行を一切出さず自然折り返しに任せる。 */
.alert--ok .thanks-br { display: inline; }
@media (max-width: 28rem) {
  .alert--ok .thanks-br { display: none; }
}
/* フォーム下の注釈：「いただいた個人情報は、お問い合わせへの対応のみに使用します。」が
   1行に収まる幅でだけ改行する。収まらない幅では改行を一切出さず自然折り返しに任せる。 */
.form-note .form-note-br { display: inline; }
@media (max-width: 23.5rem) {
  .form-note .form-note-br { display: none; }
}
/* フォームは機能テキスト＝ゴシックで統一（入力欄・ラベル・ボタン）*/
body.contact .field label,
body.contact .field input,
body.contact .field textarea { font-family: var(--gothic); }

/* CONTACT・PRIVACY：見出し上の余白を見出し1行分（≒1.7rem）詰める */
body.contact .section,
body.privacy .section {
  padding-top: calc(clamp(3.5rem, 2.5rem + 5vw, 6.5rem) - 1.7rem);
}

/* --- privacy：条文エリア --- */
body.privacy .measure { max-width: 57rem; }          /* 料金パート枠（38rem）の 1.5 倍 */
body.privacy .stack { font-family: var(--note-serif); }   /* 条文内の英数字はセリフ（EB Garamond）*/
body.privacy .stack h2 { font-size: var(--fs-base); }     /* 条見出しを 1px 大きく（13 → 14px）*/

/* ---------- buttons ----------
   通常時：グレーの枠線＋黒文字（背景なし）
   ホバー時：グレー背景（枠なし）＋白文字 */
.btn, .btn--filled {
  display: inline-flex; align-items: center; gap: 0.7em;
  padding: 0.9em 2.2em;
  font-family: var(--gothic);
  font-size: var(--fs-sm); letter-spacing: 0.18em;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--btn-gray, #9a9fa2);
  cursor: pointer;
  transition: background 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease);
}
/* 通常時の文字色を、通常時の枠線の色と同じにする（ホバーは白のまま） */
.btn--charcoal { color: var(--btn-gray, #9a9fa2); }
.btn:hover, .btn:focus-visible,
.btn--filled:hover, .btn--filled:focus-visible {
  background: var(--btn-gray-fill, #6f767a);
  border-color: transparent;
  color: #fff;
}
/* CONTACT ボタンの前後余白：ボタン下→フッター境界（＝section の padding-bottom）の 2/3 を上に取る */
.stack > .contact-cta {
  margin-top: calc(clamp(2.75rem, 2rem + 3vw, 4.5rem) * 2 / 3);
}

/* ---------- form ---------- */
.form { max-width: 30rem; margin-inline: auto; text-align: left; }
.field { margin-bottom: 2rem; }
.field label {
  display: block; font-size: var(--fs-sm); letter-spacing: 0.14em;
  text-transform: uppercase; opacity: 0.7; margin-bottom: 0.5rem;
}
.field .req { color: var(--accent); margin-left: 0.35em; }
.field input, .field textarea {
  width: 100%; padding: 0.6rem 0.1rem; background: transparent;
  border: 0; border-bottom: 1px solid var(--hairline-strong); border-radius: 0;
  transition: border-color 0.3s var(--ease);
}
.field textarea {
  min-height: 8rem; resize: vertical;
  border: 1px solid var(--hairline-strong); padding: 0.8rem 0.9rem; margin-top: 0.2rem;
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--accent); }
.field--hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Cloudflare Turnstile：内部(iframe)の色は制御できないため、外枠をNAME欄の罫線色＋ページ背景色に合わせ、
   ウィジェット全体をグレースケール化してロゴの橙色を抑える */
.cf-turnstile {
  display: block;
  margin-block: 1rem;
  filter: grayscale(1);
}
.form-note { font-size: var(--fs-xs); opacity: 0.55; margin-top: 1.25rem; line-height: 1.8; }
/* チャコールグレー（不透明度を戻し、しっかり読める濃さに） */
.note-charcoal { color: #36454f; opacity: 1; }
/* SERVICEページの注釈（実績・制作の流れ・料金）は和文・英数字ともサンセリフ */
body.svc .form-note { font-family: var(--gothic); }
/* 制作実績下の注釈：1行目「CGパースは月間100カット以上の制作実績があり、
   360°VRやウォークスルー動画の制作にも対応しています。」が1行に収まる幅でだけ改行する。
   収まらない幅では改行を一切出さず自然折り返しに任せる。 */
.works-note-br { display: inline; }
@media (max-width: 44.5rem) {
  .works-note-br { display: none; }
}

.alert {
  padding: 1rem 1.2rem; border: 1px solid var(--hairline-strong);
  font-size: var(--fs-sm); margin-bottom: 2rem; line-height: 1.8;
}
.alert--ok  { border-color: var(--accent); color: var(--accent); }
.alert--err { border-color: #9b2226; color: #9b2226; }

/* ---------- price / genres / steps / voices (3dcg) ---------- */
.price {
  max-width: 38rem;
  margin-inline: auto;
  text-align: center;
  font-family: var(--note-serif);   /* 枠内の英数字はセリフ（EB Garamond）*/
  border: 1px solid var(--hairline-strong);
  padding: clamp(1.75rem, 4vw, 2.75rem) clamp(1.5rem, 4vw, 3rem);
}
/* 枠下の注釈は枠と同じ幅 */
.price-note { max-width: 38rem; margin-inline: auto; }
.price__num { font-size: var(--fs-xl); letter-spacing: 0.04em; }
.price__amount { font-family: "EB Garamond", Georgia, "Times New Roman", serif; letter-spacing: 0.02em; }
/* 部分的に EB Garamond を当てる（英数字だけ差し替えたい箇所） */
.eg { font-family: "EB Garamond", Georgia, "Times New Roman", serif; }
.price__num small { font-size: 0.42em; letter-spacing: 0.08em; opacity: 0.6; }
.price__meta { margin-top: 0.9rem; font-size: var(--fs-sm); opacity: 0.6; letter-spacing: 0.06em; }

.genres { display: flex; flex-wrap: wrap; gap: 0.55rem 0.8rem; justify-content: center; margin-top: clamp(1.75rem, 5vw, 2.5rem); }
.genres li { list-style: none; font-size: var(--fs-sm); letter-spacing: 0.06em; padding: 0.4em 0.95em; border: 1px solid var(--hairline); }

/* 制作の流れ：4ステップを横一列に。幅は制作実績カードの表示範囲と同じ（.wrap）。
   縦の並び：番号 → 横線 → 小見出し → 説明文。 */
.steps {
  --steps-gap: clamp(1rem, 3vw, 2.5rem);
  --steps-no: clamp(2.96rem, 2.16rem + 2.56vw, 4.08rem);   /* 番号サイズ（さらに 80%）*/
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--steps-gap);
}
.steps li {
  list-style: none;
  position: relative;
}
.steps__no {
  display: block;
  font-family: "EB Garamond", Georgia, "Times New Roman", serif;   /* 番号はセリフ */
  font-size: var(--steps-no);
  line-height: 1;
  font-weight: 400;
  letter-spacing: -0.01em;
  opacity: 0.16;
  margin-bottom: 0.5rem;
}
/* 番号と小見出しの間の横線 */
.steps strong {
  display: block;
  border-top: 1px solid var(--hairline-strong);
  padding-top: 0.75rem;
  font-weight: 400;
  font-size: var(--fs-md);          /* 小見出し 16px */
  margin-bottom: 0.45rem;
}
.steps__desc {
  display: block;
  font-family: var(--gothic);       /* 説明文だけサンセリフ（小見出しは明朝のまま）*/
  font-size: var(--fs-sm);
  opacity: 0.6;
  line-height: 1.55;
}
@media (max-width: 46rem) {
  .steps { grid-template-columns: 1fr 1fr; gap: clamp(1.25rem, 5vw, 2rem); }
}
@media (max-width: 24rem) {
  .steps { grid-template-columns: 1fr; }
}

.voices {
  display: grid;
  grid-template-columns: repeat(3, 1fr);   /* 横一列 */
  gap: clamp(1.5rem, 4vw, 2.75rem) clamp(1.5rem, 3vw, 2.5rem);
  margin-top: clamp(2rem, 5vw, 3rem);
  /* .wrap（60rem）より少し広げ、匿名表記の右寄せが分かるゆとりを確保 */
  width: min(64rem, calc(100vw - 2 * var(--gutter)));
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
@media (max-width: 52rem) {
  .voices {
    grid-template-columns: 1fr;
    width: min(34rem, calc(100vw - 2 * var(--gutter)));
  }
}
.voice { position: relative; padding-top: 2.9rem; }
.voice::before {
  content: "\201C";                 /* 開きダブルクォーテーション（各声の左上）*/
  position: absolute;
  left: -0.02em;
  top: 0;
  font-family: "EB Garamond", Georgia, "Times New Roman", serif;
  font-size: 6rem;                  /* 従来の2倍 */
  line-height: 0.75;
  color: var(--hairline-strong);   /* グレー */
  pointer-events: none;
}
/* お客様の声はサンセリフ（和文もゴシック） */
.voice p, .voice cite { font-family: var(--gothic); }
.voice p { font-size: 18px; line-height: 1.7; color: #36454f; }
.voice cite {
  display: block;
  margin-top: 1rem;
  font-size: 13px;
  font-style: normal;
  opacity: 0.55;
  text-align: right;
}

/* ---------- FAQ（アコーディオン。moderno-pers 参照） ---------- */
.faq { max-width: 38rem; margin-inline: auto; }   /* 料金パートの枠と同じ幅 */
.faq__group + .faq__group { margin-top: clamp(1.75rem, 4vw, 2.5rem); }
.faq__group > h3 {
  font-size: var(--fs-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.5;
  margin-bottom: 0.4rem;
  font-weight: 400;
}
.faq details {
  border-bottom: 1px solid var(--hairline);
}
.faq details:first-of-type { border-top: 1px solid var(--hairline); }
.faq summary {
  position: relative;
  display: flex;
  gap: 0.7em;
  align-items: center;             /* 「Q」と質問文の垂直中心を合わせる */
  padding: 1.05rem 2rem 1.05rem 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--gothic);      /* 質問文はサンセリフ（「Q」マーカーは別途セリフ）*/
  font-size: var(--fs-base);
  line-height: 1.7;
  color: #36454f;                  /* 質問文＝チャコールグレー */
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before {
  content: "Q";
  font-family: "EB Garamond", Georgia, serif;
  font-size: 1.05em;
  line-height: 1;
  color: var(--ink);              /* 「Q」の色は据え置き（opacity で淡く）*/
  opacity: 0.4;
  flex: none;
}
.faq summary::after {
  content: "";
  position: absolute;
  right: 0.25rem;
  top: 1.5rem;
  width: 8px; height: 8px;
  border-right: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  transform: rotate(45deg);
  transition: transform 0.3s var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq summary:hover { opacity: 0.7; }
.faq__a {
  display: flex;
  gap: 0.7em;
  align-items: flex-start;
  padding: 0 1.5rem 1.25rem 0;
}
.faq__a::before {
  content: "A";
  font-family: "EB Garamond", Georgia, serif;
  font-size: 1.05em;
  line-height: calc(var(--fs-sm) * 1.9);   /* 回答文1行目の行高に合わせ、垂直中心を揃える */
  color: var(--ink);                        /* 「A」の色は据え置き（opacity で淡く）*/
  opacity: 0.4;
  flex: none;
}
.faq__a > div { font-family: var(--gothic); font-size: var(--fs-sm); color: #36454f; line-height: 1.9; }
.faq__a p + ul { margin-top: 0.4em; }
.faq__a ul { margin: 0; padding-left: 1.15em; }
.faq__a li { margin: 0.25em 0; }
.faq__a > div > :first-child { margin-top: 0; }
.faq__a > div > ul:first-child > li:first-child { margin-top: 0; }
@media (prefers-reduced-motion: reduce) { .faq summary::after { transition: none; } }

/* ---------- why professional / feature list ---------- */
.why { display: grid; gap: clamp(1.5rem, 4vw, 2.5rem); grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); margin-top: clamp(2rem, 5vw, 3rem); }
.why h3 { font-size: var(--fs-base); letter-spacing: 0.04em; margin-bottom: 0.5rem; }
.why h3::before { content: attr(data-no); display: block; font-size: var(--fs-sm); opacity: 0.35; letter-spacing: 0.1em; margin-bottom: 0.4rem; }
.why p { font-size: var(--fs-sm); opacity: 0.78; line-height: 1.75; }

/* ---------- process figures ---------- */
.flow-figure { margin: 0; overflow: hidden; }
.flow-figure img { width: 100%; }
.flow-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(0.5rem, 2vw, 1rem);
}
.flow-pair figure { margin: 0; overflow: hidden; }
.flow-pair img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }

/* ---------- works / instagram callout ---------- */
.callout {
  text-align: center;
  border: 1px solid var(--hairline-strong);
  padding: clamp(2rem, 5vw, 3.25rem);
}
.callout p { font-size: var(--fs-sm); opacity: 0.8; line-height: 1.75; }
.callout .handle { display: inline-block; margin-top: 1rem; font-size: var(--fs-md); letter-spacing: 0.1em; }

/* ---------- works：24業種グリッド（各カテゴリ1点） ---------- */
.works-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr));
  gap: clamp(1rem, 2.6vw, 1.6rem) clamp(0.7rem, 2vw, 1.1rem);
}
@media (max-width: 30rem) {
  .works-grid { grid-template-columns: 1fr 1fr; gap: 1rem 0.7rem; }
}
/* 画像単体のゴーストドラッグを防止。クリック対象は figure.work に集約 */
[data-gallery] img {
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-touch-callout: none;
  pointer-events: none;
}
.work {
  margin: 0;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}
.work > img {
  width: 100%;
  aspect-ratio: 1 / 1;                 /* カードは正方形にトリミング */
  object-fit: cover;
  background: #e9e9e9;
  transition: opacity 0.35s var(--ease);
}
@media (hover: hover) {
  .work:hover > img { opacity: 0.85; }
}
.work figcaption {
  padding-top: 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.15em;
  line-height: 1.4;
}
.work__jp { font-size: var(--fs-sm); letter-spacing: 0.04em; }
.work__en {
  font-size: var(--fs-xs);
  opacity: 0.42;
  letter-spacing: 0.12em;
  font-family: "Inter", "Helvetica Neue", "Segoe UI", Arial, sans-serif;
  margin-top: -0.3em;                 /* 英字フォント高さの30%だけ上へ（和文との間隔を詰める） */
}
.work:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* 「他の実績も見る」＋Instagramアイコン（アイコンをテキスト上に配置） */
.works-more a {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: var(--ink);
  font-family: var(--gothic);      /* 「他の実績も見る」はサンセリフ */
}
.works-more .ig-icon {
  width: 26px; height: 26px;
  opacity: 0.75;
  transition: opacity 0.3s var(--ease);
}
.works-more a:hover .ig-icon { opacity: 1; }

/* ---------- lightbox ---------- */
.lightbox[hidden] { display: none; }
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  padding: clamp(1rem, 5vw, 3rem);
  background: rgba(9, 17, 21, 0);
  backdrop-filter: blur(0px);
  transition: background 0.35s var(--ease-expo), backdrop-filter 0.35s var(--ease-expo);
}
.lightbox[data-open="true"] {
  background: rgba(9, 17, 21, 0.88);   /* 拡大表示中は背景を暗く */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.lightbox__fig {
  margin: 0; max-width: 100%; max-height: 100%;
  opacity: 0; transform: scale(0.98) translateY(0.5rem);
  transition: opacity 0.4s var(--ease-expo), transform 0.5s var(--ease-expo);
}
.lightbox[data-open="true"] .lightbox__fig { opacity: 1; transform: none; }
.lightbox__fig img {
  /* 拡大表示は元サイズ（等倍）。ビューポートを超える場合のみ縮小 */
  width: auto; height: auto;
  max-width: 100%; max-height: 88vh;
  object-fit: contain;
  box-shadow: 0 2px 40px rgba(5, 22, 26, 0.14);
}
.lightbox__fig figcaption { display: none; }   /* 拡大表示ではカテゴリ名を出さない */
.lightbox__close {
  position: absolute; top: 1rem; right: 1.25rem;
  width: 2.75rem; height: 2.75rem;
  border: 0; background: transparent; cursor: pointer;
  font-size: 1.8rem; line-height: 1; color: #fff; opacity: 0.7;
  transition: opacity 0.3s var(--ease);
}
.lightbox__close:hover { opacity: 1; }

/* ---------- footer ---------- */
.site-footer {
  background: var(--paper-pure);
  border-top: 1px solid var(--hairline);
  padding-block: clamp(2.25rem, 4vw, 3rem);
  text-align: center;
  font-family: "EB Garamond", Georgia, "Times New Roman",
               "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
}
.site-footer__copy { font-size: var(--fs-xs); opacity: 0.5; letter-spacing: 0.16em; }
.site-footer__meta { margin-top: 0.6rem; font-size: var(--fs-xs); opacity: 0.4; letter-spacing: 0.08em; }
.site-footer__meta a { border-bottom: 1px solid var(--hairline); transition: opacity 0.3s var(--ease); }
.site-footer__meta a:hover { opacity: 1; }

/* ---------- ミッション宣言：動きのある明朝（Shippori Mincho） ---------- */
.ms-1 {
  font-family: "Shippori Mincho", "Zen Old Mincho", "Hiragino Mincho ProN",
               "Yu Mincho", "Noto Serif JP", serif;
  font-weight: 500;
}
/* Shippori Mincho は palt 非対応のため、句読点を手動で詰める（約物半角）。
   inline のまま負マージンで前後を詰める（inline-block にすると折り返しが崩れる）。 */
.ms-1 .yk {
  margin-left: -0.08em;    /* 読点/句点 前アキを少し詰める */
  margin-right: -0.42em;   /* 後アキ（空白の右半分）を詰める */
  letter-spacing: 0;       /* 約物の直後に字間を残さない */
}
.ms-1 .yk--end { margin-right: -0.62em; }   /* 行末の句点：後アキを詰める */
/* タブレット以上では宣言文を1行に固定（約物詰めで折り返し計算が不安定になるのを回避） */
@media (min-width: 40rem) { .ms-1 { white-space: nowrap; } }
/* 1行に収まらない幅（〜40rem）では「デザイナーに、／もっと自由を。」で改行 */
.ms-1 .ms-br { display: none; }
@media (max-width: 40rem) {
  .ms-1 .ms-br { display: inline; }
  /* grid の justify-items:center で hero__inner が内容幅に縮み、各文がさらに折り返すのを防ぐ */
  body.home .hero--sticky .hero__inner { width: 100%; }
}

/* ---------- ミッション：表示直後にフェードイン（①宣言 → ②サブテキスト） ----------
   JS が .ms-go を付けた瞬間から開始。PRM でもフェード（不透明度）は残す。 */
.ms-1, .ms-2, .ms-3 {
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity 1.9s var(--ease-expo), transform 1.9s var(--ease-expo);
}
/* 宣言 → サブテキスト → 縦線 の順に */
.ms-1 { transition-delay: 0s; }
.ms-2 { transition-delay: 1.7s; }
.ms-3 { transition-delay: 3.3s; }
.ms-1.ms-go, .ms-2.ms-go, .ms-3.ms-go { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .ms-1, .ms-2, .ms-3 { transform: none; transition: opacity 1.9s ease; }
  .ms-2 { transition-delay: 1.7s; }
  .ms-3 { transition-delay: 3.3s; }
}
/* ?nofx（レビュー用の完全停止）のときだけ即表示 */
:root[data-noanim] .ms-1,
:root[data-noanim] .ms-2,
:root[data-noanim] .ms-3 { transition: none; opacity: 1; transform: none; }

/* ---------- scroll reveal ---------- */
.reveal, [data-reveal] {
  opacity: 0;
  transform: translateY(1.25rem);
  transition:
    opacity 1s var(--ease-expo),
    transform 1s var(--ease-expo);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.reveal.is-visible, [data-reveal].is-visible { opacity: 1; transform: none; }

/* スマホ版のみ：CONTACTページのフェードインを少しゆっくりに（今の1s → 2.0s。SERVICE HEROの2.3sより早く）*/
@media (max-width: 40rem) {
  body.contact .reveal { transition-duration: 2s; }
  /* 「お問い合わせ／CONTACT」の見出し塊は、スライド不要（フェードのみに） */
  body.contact .sect-head.reveal { transform: none; }
}

/* 画像用：カーテン状に立ち上がる控えめなマスク */
[data-reveal="mask"] {
  opacity: 1;
  transform: none;
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1.1s var(--ease-expo);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal="mask"] > * { transform: scale(1.06); transition: transform 1.4s var(--ease-expo); transition-delay: var(--reveal-delay, 0ms); }
[data-reveal="mask"].is-visible { clip-path: inset(0 0 0 0); }
[data-reveal="mask"].is-visible > * { transform: scale(1); }

@media (prefers-reduced-motion: reduce) {
  /* 動きは抑えるが不透明度フェードは残す（ヒーロー・宣言文と同じ方針）*/
  .reveal, [data-reveal] { transform: none; transition: opacity 1s var(--ease-expo); clip-path: none; }
  [data-reveal] > * { transform: none; }
}
/* レビュー用（?nofx）だけは完全停止＝即表示 */
:root[data-noanim] .reveal,
:root[data-noanim] [data-reveal] { transition: none; opacity: 1; transform: none; clip-path: none; }

/* ---------- skip link ---------- */
.skip {
  position: absolute; left: 0.5rem; top: 0.5rem; padding: 0.55rem 1rem;
  background: var(--ink); color: var(--paper); transform: translateY(-160%);
  transition: transform 0.2s; z-index: 100; font-size: var(--fs-sm);
}
.skip:focus { transform: none; }

/* ================= カスタムカーソル（比較用トグル：?cursor=rec|a|c） =================
   ?cursor が付いたときだけ有効。指定なし＝通常のマウスカーソル。 */
:root[data-cursor] * { cursor: none !important; }
:root[data-cursor] input,
:root[data-cursor] textarea,
:root[data-cursor] select { cursor: text !important; }

.cursor-el {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  mix-blend-mode: difference;
  transition: opacity .25s ease,
              width .3s var(--ease-expo), height .3s var(--ease-expo),
              background-color .3s var(--ease-expo);
}
:root.cursor-on .cursor-el { opacity: 1; }

.cursor-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #fff;
}
.cursor-ring {
  width: 34px; height: 34px;
  border: 1px solid #fff;
  border-radius: 50%;
}

/* --- A案：ドットのみ（少し大きめ・ホバーで拡大） --- */
:root[data-cursor="a"] .cursor-ring { display: none; }
:root[data-cursor="a"] .cursor-dot { width: 10px; height: 10px; }
:root[data-cursor="a"].cursor-hover .cursor-dot { width: 22px; height: 22px; }

/* --- C案（確定）：既定はドット、ホバーでリングに切替。
   背景に応じて自動反転するが、difference ではなく exclusion を使う。
   difference は |base - 背景| のため、文字のアンチエイリアス境界（黒→白の階調）で
   出力が 0 を挟んで V字に折り返し、輪郭に黒いフリンジ＝ガタつきが出る。
   exclusion は同じ端点（白背景→255-base、黒背景→base）を保ちつつ階調が
   単調に変化するので、反転時も文字の輪郭が滑らかになる。
   ベース色 #968c89 は、白背景で反転すると rgb(105,115,118)＝
   バリュー和文「柔軟であること」と同じグレーになる値（255 - 105/115/118）。 */
:root[data-cursor="c"] .cursor-el {
  mix-blend-mode: exclusion;
  transition: opacity .28s var(--ease-expo),
              width .35s var(--ease-expo), height .35s var(--ease-expo);
}
:root[data-cursor="c"] .cursor-dot {
  display: block;
  width: 8px; height: 8px;
  background: #968c89;
}
:root[data-cursor="c"] .cursor-ring {
  display: block;
  width: 30px; height: 30px;
  border-color: #968c89;
  opacity: 0 !important;          /* 既定は非表示 */
}
:root[data-cursor="c"].cursor-hover .cursor-dot { opacity: 0; }
:root[data-cursor="c"].cursor-hover .cursor-ring { opacity: 1 !important; }

/* --- 推し案：ドット＋追従リング、ホバーでリング拡大・ドット消灯 --- */
:root[data-cursor="rec"].cursor-hover .cursor-ring { width: 56px; height: 56px; }
:root[data-cursor="rec"].cursor-hover .cursor-dot { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .cursor-el { transition: opacity .25s ease; }
}