/* ===========================================================
   RUNBIRD-WEB — design tokens
   =========================================================== */
:root {
  --ink: #0d0b08;
  --ink-soft: #211d18;
  --paper: #ffffff;
  --paper-alt: #f1efea;
  --card: #ffffff;
  --gold: #b8863c;
  --gold-light: #d9b472;
  --gold-deep: #8c6427;
  --line: rgba(13, 11, 8, 0.09);
  --text-muted: #6b655d;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --shadow-card: 0 10px 30px -18px rgba(13, 11, 8, 0.35);
  --ease: cubic-bezier(0.19, 1, 0.22, 1);
  --font-display: "Outfit", "Noto Sans JP", sans-serif;
  --font-body: "Inter", "Noto Sans JP", sans-serif;
  --container: 1180px;
}

* { box-sizing: border-box; }
/* v5(runbird_v5.html)と同じscroll-snapによる「カチッと止まる」感覚。smoothと組み合わせるとフワッとして
   スナップの手応えが薄れるためautoにする(2026-07-17)。
   scroll-snap-typeは常時mandatoryにはせず、JS側でヒーロー+SERVICES区間だけ有効化する(2026-07-22変更)。
   理由：mandatoryをページ全体にかけたまま、SERVICES以降(未来を共に〜CTA)にsnap-pointを置かないでいると、
   「その区間の唯一の着地点」まで実機スクロールが一気に飛んでしまい、途中の全セクションを読み飛ばすバグが発生した。
   詳細はfrontend-css-pitfalls.md⑥参照 */
html { scroll-behavior: auto; }
/* will-changeはWebKitに「このプロパティは動的に変わる」と事前に伝えるヒント。
   scroll-snap-stop:alwaysの撤去と合わせて、実機でスナップ位置がスクロール中に更新した
   panel.style.transformに追従できず古いキャッシュのまま固まる問題への対策(2026-09-29) */
html.snap-zone-active { scroll-snap-type: y mandatory; will-change: scroll-snap-type; }
/* 各ステップ/パネルの開始位置に置く高さ0の目印。
   scroll-snap-alignは対応するゾーンclassがhtmlに付いている間だけ有効にする(2026-07-27)。
   常時有効のままだと、2つのゾーンのスナップ点が同時に「候補」として見えてしまい、
   本来無関係な遠くの点へスクロールが引っ張られる誤動作の原因になるため */
/* scroll-snap-stop:alwaysは「フリックの勢いに関わらず全てのスナップ点で強制的に止まる」という
   最も強い指定で、position:stickyと組み合わさるiOS実機で「固まる/逆走で崩れる」報告が複数あるため撤去。
   scroll-snap-type:mandatory自体は維持(proximityより実機で安定するとの調査結果のため)(2026-09-29) */
.snap-point { position: absolute; left: 0; width: 1px; height: 1px; pointer-events: none; }
html.snap-zone-active .snap-point { scroll-snap-align: start; }
/* ITのチカラで、人を繋ぐ。／お客様から選ばれる理由／数字で見るRUNBIRDの入り口の目印(2026-07-27、河合さん指示)。
   CSSのscroll-snapをリアクティブにトグルする方式を2回試したが、実機DevToolsでの実測で
   position:stickyを含むこのページ構成とCSS scroll-snapの相性が悪いことが確定したため、
   ここでは位置の目印としてのみ使い、実際のスナップはJS側でscrollTo(behavior:'smooth')に
   よる「磁石式」で直接制御する(script.js内 trySnapToNearestTarget 参照) */
.snap-point-story { position: absolute; top: 0; left: 0; width: 1px; height: 1px; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* 「未来を共に」〜「数字で見るRUNBIRD」まで貫く1枚の固定背景キャンバス。
   PKSHA Technology実サイト参考：セクションが切り替わるたびに背景色がグーンと変化し、
   中央の丸がスクロールにつれ地球儀のように育っていく（2026-07-22） */
.story-bg {
  position: fixed; inset: 0; z-index: -1;
  opacity: 0; pointer-events: none;
  transition: opacity 0.5s var(--ease);
}
.story-bg.is-active { opacity: 1; }
.story-bg canvas { width: 100%; height: 100%; display: block; }

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

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

.noise-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.025;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* TOPのヒーロー(heroBgCanvas)の「風に吹かれる粒子」をページ全体の背景に流用(2026-07-30、
   事業案内限定)。ページは白系背景が中心なのでTOPの白粒子(rgba(255,255,255,...))ではなく
   ゴールド系(.morph-shape-bgと同系色)に変更し、固定背景として全セクションの裏に敷く */
.wind-particles-bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 0 0 14px;
}
/* PKSHA Technology「— 事業紹介」のダッシュ+ラベル表記を、未来を共に〜数字で見るRUNBIRD区間で採用(2026-07-22) */
.focus-eyebrow::before,
.glance-text .eyebrow::before,
.why-us .eyebrow::before,
.stats--story .eyebrow::before {
  content: "—";
  margin-right: 8px;
  opacity: 0.6;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
  text-wrap: balance;
  margin: 0;
}

h1 { font-size: clamp(2.4rem, 5.4vw, 4.2rem); line-height: 1.18; letter-spacing: -0.01em; }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); line-height: 1.28; letter-spacing: -0.01em; }
h3 { font-size: 1.25rem; line-height: 1.4; }

.accent-text { color: var(--gold); }

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

/* ---------- reveal-on-scroll ---------- */
/* 方向ルール：テキスト系=下から／ビジュアル系=左右／数字・データ系=下から(遅延はJSのstagger)。
   要素ごとにdata-reveal="left"|"right"を指定して方向を切り替える(2026-07-17) */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
[data-reveal="left"] { transform: translateX(-48px); }
[data-reveal="right"] { transform: translateX(48px); }
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}
[data-reveal="left"].is-visible,
[data-reveal="right"].is-visible {
  transform: translateX(0);
}

/* ---------- ヒーロー専用：左からサッと3段階で入ってくる演出 ----------
   通常の[data-reveal](0.9秒のゆっくりしたフェードアップ)とは別に、TOPヒーローの
   見出し・説明文・ボタンだけ、もっと速く・左からの横スライドで「サッ！」という
   勢いのある入り方にしたい、との河合さんFB(2026-09-25)。ヒーローは常に初期表示で
   画面内にあるためスクロール判定は不要で、ページ読み込み時にJS側で直接3段階
   staggerして.is-visibleを付与する(script.js参照)。数値は共通[data-reveal]より
   速い0.5秒・オーバーシュート気味のイージングで「サッ」の勢いを出す */
[data-hero-in] {
  opacity: 0;
  transform: translateX(-56px);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-hero-in].is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* ===========================================================
   Header
   =========================================================== */
/* ヘッダーの背景だけ白に変更(2026-07-29、河合さん指示)。ナビ・ロゴのデザイン(黒い箱で
   縁取るブロックハイライト方式)自体は変更していない、指示された背景色のみの変更 */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  /* .mobile-nav(z-index:1100)より低いままだと、メニューを開いた時にパネル自体が
     ハンバーガーボタン(.menu-toggle、.site-header配下)の上に重なってしまい、
     見た目上はis-open状態でX字に変形していても実際にはクリックできなくなっていた
     (2026-09-25、河合さんFB「メニュー出したら引っ込めるボタンがない」。
     elementFromPointで実測し、ボタン位置の最前面要素が.mobile-navになっていたことを確認)。
     .mobile-navより確実に上になるよう1200に引き上げる */
  z-index: 1200;
  background: transparent;
  color: var(--paper);
  transition: background 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease), color 0.4s var(--ease);
  border-bottom: 1px solid transparent;
}
/* ヘッダー背後のセクションが明るいか暗いかで文字色(主にハンバーガーメニュー等、
   黒枠を持たない要素)を自動切り替えする(2026-07-29、河合さん指示)。ナビ各リンク・
   ロゴ自体は黒箱の背景を持つため実質影響ないが、箱を持たない要素のために用意する */
.site-header.is-on-light { color: var(--ink); }
/* ヘッダーは常に白文字固定。ロゴ位置も初期位置で固定。
   中央寄せ(max-width)をやめ、ヒーロー側(left/right:40px)とロゴ・ナビの位置を揃える(2026-07-17) */
.header-inner {
  padding: 30px 40px;
  display: flex;
  align-items: flex-start;
  gap: 32px;
}

/* ナビのブロックハイライトと合わせ、ロゴにも黒枠をつける。枠の左端は画面端にくっつける。
   枠の上端は画面上部から10px(ナビ側と統一 2026-07-21) */
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
  margin: 0 auto 0 -40px;
  padding: 3px 16px 3px 40px;
  background: var(--ink);
  border-radius: 0 3px 3px 0;
}
.brand-mark { width: 34px; height: 34px; object-fit: contain; }
.brand-word {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  /* .brand自体は常に黒箱(background:var(--ink))固定なので、文字色もcolor:inheritではなく
     常に白固定にする。inheritだと.site-header.is-on-light時にヘッダー全体の文字色が
     ink(黒)へ切り替わり、黒箱の上で黒文字become invisibleになっていた
     (2026-07-29、河合さん指摘「会社概要のロゴがTOPと違う」で発覚) */
  color: var(--paper);
}

/* v5(runbird_v5.html)の.hero-page-navと同じ縦積み・右揃えをベースに、参考サイト(serverless.co.jp)の
   「単色ブロックでハイライトされた右揃えナビ」をRUNBIRDのゴールド×黒トーンに翻訳(2026-07-21) */
.main-nav {
  display: flex; flex-direction: column; align-items: flex-end; gap: 11px;
  margin-right: -40px; /* 枠を右端までくっつける(2026-07-21) */
}
/* 右paddingを40px分伸ばして枠だけ画面端まで届かせる。文字自体の位置は変えない(2026-07-21) */
.main-nav a:not(.btn-nav) {
  font-size: calc(0.82rem - 0.5px);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.2;
  color: var(--paper);
  background: var(--ink);
  padding: 1px 48px 1px 8px;
  border-radius: 3px 0 0 3px;
  transition: background 0.25s var(--ease), transform 0.25s var(--ease);
}
.main-nav a:not(.btn-nav):hover { background: var(--ink-soft); transform: translateX(-2px); }
.main-nav a.is-current-nav { background: var(--gold); color: var(--paper); }

/* v5(runbird_v5.html)のhero-page-linkと同じ「英語_日本語」表記。.enは濃いめのゴールドで固定(2026-07-21) */
.main-nav .en { color: var(--gold); font-weight: 700; }
.main-nav a.is-current-nav .en { color: var(--paper); }
.mobile-nav .en, .footer-nav .en { color: var(--gold); font-weight: 700; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 26px;
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
  font-weight: 600;
  white-space: nowrap;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), background 0.3s var(--ease);
  outline: none; /* ブラウザ標準の青いフォーカス枠がクリック時にも出てしまうケースがあったため撤去し、
                    キーボード操作時のみ:focus-visibleで分かりやすい枠を出す(2026-09-30、本番で発覚) */
  border: none; /* 本番で有効なvk-blocks-proプラグインが読み込むBootstrap(bootstrap_vk_using.css)の
                   .btn/.btn-primaryとクラス名が衝突し、うちのCSSがborderを未指定だったため
                   Bootstrap側の青いborder(1px solid #007bff)がそのまま効いていた(2026-09-30、本番で発覚)。
                   .btn-ghostは後続の自分のルールでborderを上書きするため影響なし */
}
.btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.btn-primary {
  background: var(--ink);
  color: var(--paper);
}
.btn-primary:hover { background: var(--gold-deep); transform: translateY(-2px); }
.btn-nav.btn-primary { background: var(--gold); color: var(--ink); }
.btn-nav.btn-primary:hover { background: var(--gold-light); }
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
}
.btn-ghost:hover { border-color: var(--gold); color: var(--gold-deep); transform: translateY(-2px); }
.btn-lg { padding: 16px 38px; font-size: 1rem; }

.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}
.menu-toggle span { width: 22px; height: 2px; background: currentColor; border-radius: 2px; transition: transform 0.3s var(--ease), opacity 0.3s var(--ease); }
.menu-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle.is-open span:nth-child(2) { opacity: 0; }
.menu-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav {
  position: fixed;
  top: 0; right: 0;
  height: 100vh;
  width: min(78vw, 320px);
  background: var(--paper);
  z-index: 1100;
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding: 100px 36px 40px;
  transform: translateX(100%);
  transition: transform 0.45s var(--ease);
  box-shadow: -20px 0 40px -20px rgba(13,11,8,0.2);
}
.mobile-nav.is-open { transform: translateX(0); }
.mobile-nav a { font-size: 1.05rem; font-weight: 500; }

/* ===========================================================
   Hero
   =========================================================== */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at 50% 15%, #16130f 0%, var(--ink) 55%, #0a0806 100%);
  color: var(--paper);
  overflow: hidden;
  padding: 140px 32px 100px;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 760px;
  text-align: center;
}
.hero .eyebrow { color: var(--gold-light); text-align: center; }
.hero h1 { color: var(--paper); }
.hero-lead {
  margin: 26px auto 0;
  max-width: 560px;
  color: rgba(250, 249, 246, 0.72);
  font-size: 1.05rem;
}
.hero-actions {
  margin-top: 40px;
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}
.hero .btn-ghost { color: var(--paper); border-color: rgba(250,249,246,0.28); }
.hero .btn-ghost:hover { border-color: var(--gold); color: var(--gold-light); }

.scroll-cue {
  position: absolute;
  bottom: 40px; left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  z-index: 2;
}
.scroll-cue span {
  width: 1px; height: 40px;
  background: linear-gradient(to bottom, rgba(184,134,60,0.9), transparent);
  animation: pulse-down 2.2s var(--ease) infinite;
}
.scroll-cue p {
  margin: 0;
  font-size: 0.68rem;
  letter-spacing: 0.3em;
  color: rgba(250,249,246,0.5);
}
@keyframes pulse-down {
  0% { transform: scaleY(0.4); opacity: 0.3; transform-origin: top; }
  50% { transform: scaleY(1); opacity: 1; transform-origin: top; }
  100% { transform: scaleY(0.4); opacity: 0.3; transform-origin: bottom; }
}

/* ===========================================================
   Hero：v5(scroll-motion-prototype)のヒーローを忠実に移植（index.html専用。
   #canvasHero にスコープして .hero 基底クラスはpattern1〜3.htmlのため無傷のまま残す）
   =========================================================== */
#canvasHero {
  /* iOS Safariはplain vhをツールバー折りたたみ後の"大きい"ビューポートで固定解決するが、
     script.js側のscroll計算はwindow.innerHeight(ツールバーの開閉で伸縮する"生きた"値)を使っているため、
     スクロール中にCSSの高さとJSの計算基準がズレて、ヒーローが実機だけ途中で次のセクションと
     重なって見える不具合になっていた(2026-09-29、河合さんFB「スクロールしてくる画面が半分くいこんじゃってる」)。
     dvhはwindow.innerHeightと同じ"生きた"値に追従するため、対応ブラウザではこちらで上書きする */
  height: 300vh; height: 300dvh; overflow: visible; padding: 0; display: block;
  /* canvasが描画されるまで(または未対応環境用)のフォールバック背景。v5と同じグラデーションを踏襲。
     background-colorも明示しておくことで、ヘッダーの背景色自動判定(script.js)がこの区間を
     「暗い」と正しく認識できるようにする(2026-07-17) */
  background-color: #1a1510;
  background-image: linear-gradient(135deg, #0d0b08 0%, #1a1510 55%, #5c431d 100%);
}
/* 背景動画(Seedance生成)。heroBgCanvasと同じ全画面固定レイヤーで、canvasHeroを抜けたら
   script.js側でopacity:0にする(#storyBg等の背後に透けて見えるのを防ぐため) */
/* .hero-stage(position:sticky)の内側に配置し、hero-giantと同じ「親のsticky解除と同時に
   自動で画面から外れる」挙動に乗せる(2026-09-29、経緯はindex.html側のコメント参照) */
#canvasHero .hero-bg-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
#canvasHero .hero-bg-video-overlay {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 8, 6, 0.3), rgba(10, 8, 6, 0.55));
}
#canvasHero .hero-stage {
  position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden; z-index: 1;
  display: flex; flex-direction: column;
}

#canvasHero .hero-giant {
  position: absolute; top: 128px; left: 40px; right: 40px; z-index: 1; pointer-events: none;
  margin: 0; font-family: var(--font-display);
  font-size: clamp(2.6rem, 10vw, 10.5rem); font-weight: 800; letter-spacing: -0.02em; line-height: 0.98;
  text-wrap: balance; color: var(--paper);
  display: grid;
}
/* 1スクロールでRUNBIRD→Expectations,Plus More.にクロスフェード(grid-areaを重ねてクロスフェード、
   親の高さは一番背の高い方に自動追従する 2026-07-17)。
   (2026-09-30) 二重表示の真因は`heroStepIdx`のヒステリシス判定バグ(毎フレーム0↔1を往復し続けていた)
   と判明・修正済みのため、クロスフェード自体は無実と確定、復活させる。遷移時間はスプリットフラップ
   撤去後「遅く感じる」FBを受けて設定した0.2sのまま */
#canvasHero .hero-giant-word {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}
/* 既に通過した方は上へ抜けて消え、まだ来ていない方は下で待機→下から上がってくる(2026-07-17) */
#canvasHero .hero-giant-word.is-passed { transform: translateY(-40px); }
#canvasHero .hero-giant-word.is-active { opacity: 1; transform: translateY(0); }

#canvasHero .hero-body {
  flex: 1; display: grid; grid-template-columns: 60px 1fr; column-gap: 32px;
  padding: 0 40px 60px; align-items: end; position: relative; z-index: 2;
}
#canvasHero .stepper {
  display: flex; flex-direction: row; gap: 18px; writing-mode: vertical-rl;
  font-size: 0.72rem; letter-spacing: 0.08em; color: rgba(250, 249, 246, 0.35); font-weight: 600;
}
#canvasHero .stepper .step-label { transition: color 0.4s var(--ease); }
#canvasHero .stepper .step-label.is-active { color: var(--paper); }

#canvasHero .hero-body-main { position: relative; }
#canvasHero .headline-stack { position: relative; height: 300px; }
#canvasHero .headline-step {
  position: absolute; bottom: 0; left: 0; right: 0;
  opacity: 0; transform: translateY(40px); pointer-events: none;
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
}
/* 通過済みのステップは上へ抜けて消え、次のステップは下から上がってくる(2026-07-17) */
#canvasHero .headline-step.is-passed { transform: translateY(-40px); }
#canvasHero .headline-step.is-active { opacity: 1; transform: translateY(0); pointer-events: auto; }
#canvasHero .headline-step .eyebrow { text-align: left; color: var(--gold-light); }
#canvasHero .headline-step h2 {
  margin-top: 14px; font-family: var(--font-display); color: var(--paper);
  font-size: clamp(1.8rem, 4vw, 3.2rem); font-weight: 800; letter-spacing: -0.01em; line-height: 1.3;
  text-wrap: pretty; max-width: 720px;
}
#canvasHero .headline-step .accent-heading { color: var(--gold); }
#canvasHero .headline-desc { margin-top: 16px; font-size: 0.95rem; color: rgba(250, 249, 246, 0.65); max-width: 480px; text-wrap: pretty; }
#canvasHero .hero-actions { margin-top: 32px; justify-content: flex-start; }

#canvasHero .step-pills { position: absolute; right: 0; bottom: 60px; display: flex; flex-direction: column; gap: 8px; z-index: 3; }
#canvasHero .step-pill {
  font-size: 0.72rem; font-weight: 700; padding: 7px 14px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.08); color: rgba(250, 249, 246, 0.5);
  transition: background 0.4s var(--ease), color 0.4s var(--ease);
}
#canvasHero .step-pill.is-active { background: var(--gold); color: var(--ink); }

#canvasHero .scroll-cue { left: 40px; bottom: 24px; transform: none; align-items: flex-start; }

@media (max-width: 860px) {
  #canvasHero .hero-giant { top: 110px; }
}
@media (max-width: 720px) {
  /* .hero-giant(RUNBIRD)は左右固定40pxのままだったが、.hero-body側はこのブレイクポイントで
     paddingが24pxに縮むため、基準がズレて「ABOUT」より右にずれて見えていた(2026-09-25、
     河合さんFB)。同じ24pxに揃える */
  #canvasHero .hero-giant { left: 24px; right: 24px; }
  #canvasHero .hero-body { grid-template-columns: 1fr; padding: 0 24px 40px; }
  #canvasHero .stepper { writing-mode: horizontal-tb; flex-direction: row; gap: 14px; margin-bottom: 20px; }
  #canvasHero .step-pills { position: static; margin-top: 20px; flex-direction: row; flex-wrap: wrap; }
  /* 340pxだと実機のフォント計測(PCのデベロッパーツール幅リサイズでは再現しない)で
     見出し+本文+ボタンの実際の高さがこれを超え、親.hero-stageのoverflow:hiddenで
     上側(見出しの1行目付近)が切れて見える不具合があった。スクロール計算とは無関係の
     単純な高さ不足だったため、十分な余裕を持たせる(2026-09-29、河合さんFB「ヒーローが
     全体表示されてない」) */
  #canvasHero .headline-stack { height: 460px; }
  #canvasHero .scroll-cue { display: none; }
}

/* 動きを抑えたい環境では、4ステップを縦に並べて全部そのまま読めるようにする(ピン留め+フェードは行わない) */
@media (prefers-reduced-motion: reduce) {
  #canvasHero { height: auto; }
  #canvasHero .hero-stage { position: static; height: auto; display: block; padding: 160px 32px 60px; }
  #canvasHero .hero-giant { position: static; margin-bottom: 40px; }
  #canvasHero .hero-body { display: block; padding: 0; }
  #canvasHero .stepper { display: none; }
  #canvasHero .headline-stack { height: auto; }
  #canvasHero .headline-step { position: static; opacity: 1; transform: none; pointer-events: auto; margin-bottom: 48px; }
  #canvasHero .step-pills { display: none; }
}

/* ===========================================================
   Statement (scroll-pinned progressive reveal)
   =========================================================== */
.statement {
  position: relative;
  height: 260vh;
  background: var(--paper);
}
.statement-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 0 32px;
  text-align: center;
}
.statement-line {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 4.2vw, 3rem);
  line-height: 1.4;
  color: var(--ink);
  opacity: 0.14;
  transition: opacity 0.25s linear, color 0.25s linear;
}
.statement-line.is-active { opacity: 1; }
.statement-accent.is-active { color: var(--gold); }

/* ===========================================================
   Section shared
   =========================================================== */
main > section {
  padding: 130px 32px;
  /* #canvasHeroの固定canvas(position:fixed)は「位置指定あり要素」なので、position:staticのままだと
     非位置指定要素は常にその下に描画されてしまう(DOM順に関わらず)。position:relativeにして
     positioned要素の描画レイヤーに引き上げ、DOM順(=こちらが後)で固定canvasの上に来るようにする */
  position: relative;
  z-index: 1;
}
.section-head {
  max-width: var(--container);
  margin: 0 auto 64px;
  padding: 0 32px;
}

/* ===========================================================
   Services
   =========================================================== */
/* #serviceStackが画面いっぱいに広がるスタック演出のため、上下の余白(共有padding由来)は不要。
   さらにヒーローの終盤(sticky解除直前)に迫り上がって重なるよう、負のmargin-top+ヒーローより高いz-indexにする(2026-07-17) */
.services {
  background: var(--paper);
  padding: 0;
  position: relative;
  z-index: 2;
  /* ヒーロー300vh(ステップ2つ×100vh+重なり用100vh)に合わせ、最後のステップの静止位置では
     次セクションが覗かず、そこからさらにスクロールした分だけ重なってくる(2026-07-21) */
  margin-top: -100vh;
}

/* ---- service-panels: 写真背景×分割パネル（ホバーで展開） ---- */
.service-panels {
  max-width: calc(var(--container) - 64px);
  margin: 0 auto;
  display: flex;
  align-items: stretch;
  height: 560px;
  gap: 4px;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.service-panel {
  position: relative;
  flex: 1;
  min-width: 64px;
  overflow: hidden;
  text-decoration: none;
  color: var(--paper);
  background: var(--ink);
  transition: flex 0.7s var(--ease);
}
.service-panel-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.08);
  opacity: 0.5;
  transition: transform 1.1s var(--ease), opacity 0.6s var(--ease);
}
.service-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13,11,8,0.15) 0%, rgba(13,11,8,0.88) 100%);
}
.service-panel:hover,
.service-panel:focus-visible { flex: 3.2; }
.service-panel:hover .service-panel-bg,
.service-panel:focus-visible .service-panel-bg { opacity: 0.85; transform: scale(1); }

.service-panel-number {
  position: absolute;
  top: 26px;
  left: 26px;
  z-index: 1;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--gold-light);
}
.service-panel-vertical {
  position: absolute;
  left: 50%;
  bottom: 28px;
  z-index: 1;
  transform: translateX(-50%);
  writing-mode: vertical-rl;
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.86rem;
  letter-spacing: 0.16em;
  transition: opacity 0.3s var(--ease);
}
.service-panel:hover .service-panel-vertical,
.service-panel:focus-visible .service-panel-vertical { opacity: 0; }

.service-panel-content {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 26px;
  z-index: 1;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s var(--ease) 0.1s, transform 0.5s var(--ease) 0.1s;
}
.service-panel:hover .service-panel-content,
.service-panel:focus-visible .service-panel-content { opacity: 1; transform: translateY(0); }
.service-panel-jp {
  display: block;
  font-size: 0.8rem;
  color: var(--gold-light);
  margin-bottom: 4px;
}
.service-panel-en {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.28rem;
  letter-spacing: 0.02em;
  margin-bottom: 10px;
  white-space: nowrap;
}
.service-panel-desc {
  margin: 0 0 14px;
  font-size: 0.85rem;
  line-height: 1.7;
  color: rgba(250,249,246,0.85);
  max-width: 320px;
}
.service-panel-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--gold-light);
}

/* タッチデバイス：hoverが効かないので常時全展開・縦積みにする */
@media (hover: none) {
  .service-panels { flex-direction: column; height: auto; gap: 14px; }
  .service-panel {
    flex: none;
    min-height: 280px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 26px 24px;
  }
  .service-panel-number { position: static; margin-bottom: auto; }
  .service-panel-vertical { display: none; }
  .service-panel-content { opacity: 1; transform: translateY(0); position: static; }
  .service-panel-bg { opacity: 0.75; transform: scale(1); }
}

/* ---- stack-section: v5(runbird_v5.html)のスタックパネル技法をそのまま移植 ----
   1つのsticky土台(.stack-stage)に全パネルをposition:absoluteで重ねて置き、
   1枚目は固定、2枚目以降は自分の区間の中だけでtranslateX 100%→0%を動かして
   前のパネルを右から覆っていく(通り過ぎる隙間が出ない構造。詳細はrunbird_v5.html参照) */
#serviceStack {
  position: relative; height: 850vh; height: 850dvh; /* 5事業→6事業化に伴い500vh→600vhに変更（2026-07-22）。
     dvh追加の経緯はcanvasHeroの同種コメント参照(2026-09-29)。
     カード切り替えが「流れていってしまう」とのFBを受け、1枚あたりの必要スクロール量を
     1.5倍(100vh→150vh)にするため600vh→850vhに変更(2026-09-30。scrollable=750vh÷5枚=150vh) */
  /* 親.servicesのpadding(main > section共通ルール)の影響を受けず、常に画面幅いっぱいに広げる */
  width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
}
.stack-stage { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden; }
.stack-panel {
  position: absolute; inset: 0;
  display: grid; grid-template-columns: 1fr 1fr; align-items: center;
  overflow: hidden; will-change: transform;
  transform: translateX(100%);
}
.stack-panel:nth-child(1) { transform: none; z-index: 1; background: var(--gold); color: var(--ink); }
.stack-panel:nth-child(2) { z-index: 2; background: var(--ink); color: var(--paper); }
.stack-panel:nth-child(3) { z-index: 3; background: var(--paper-alt); color: var(--ink); }
.stack-panel:nth-child(4) { z-index: 4; background: var(--gold-deep); color: var(--paper); }
.stack-panel:nth-child(5) { z-index: 5; background: var(--ink-soft); color: var(--paper); }
.stack-panel:nth-child(6) { z-index: 6; background: var(--paper); color: var(--ink); }

.panel-index {
  /* v5にはない実サイトの固定ヘッダー(高さ約90px)と被らないよう下げてある */
  position: absolute; top: 110px; left: 40px;
  writing-mode: vertical-rl; font-family: var(--font-display); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.05em;
}

.panel-body { padding: 0 60px 0 90px; }
.panel-body .eyebrow { font-family: var(--font-display); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.08em; opacity: 0.7; color: inherit; text-align: left; }
.panel-body h2 { margin-top: 16px; font-family: var(--font-display); font-size: clamp(2.4rem, 5vw, 4.2rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; text-wrap: pretty; color: inherit; }
.panel-divider { margin-top: 40px; width: 100%; max-width: 420px; height: 1px; background: currentColor; opacity: 0.25; }
.panel-desc { margin-top: 32px; font-size: 1rem; font-weight: 600; line-height: 1.8; opacity: 0.85; max-width: 380px; text-wrap: pretty; }
.panel-arrow {
  margin-top: 40px; width: 64px; height: 64px; border-radius: 10px;
  background: var(--ink); color: var(--paper); border: none;
  display: flex; align-items: center; justify-content: center; font-size: 1.3rem;
  cursor: pointer; text-decoration: none; transition: transform 0.3s var(--ease);
}
.panel-arrow:hover, .panel-arrow:focus-visible { transform: translateX(4px); }
.stack-panel:nth-child(2) .panel-arrow,
.stack-panel:nth-child(4) .panel-arrow,
.stack-panel:nth-child(5) .panel-arrow { background: var(--paper); color: var(--ink); }

.panel-photo {
  position: relative; height: 100%; margin: 0 40px 0 0;
  background-size: cover; background-position: center;
  will-change: transform;
}
.panel-photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(13,11,8,0.12), rgba(13,11,8,0.55));
}

@media (max-width: 860px) {
  /* モバイルは写真を省略し文字面を主役にする方針だったが、「画像も見せたい」との
     河合さんFB(2026-09-24)を受けて、写真を上・テキストを下の縦積みに変更。
     さらに「上下50:50の2in1にしたい」との追加指示(同日)で34vh:残りから50vh:50vhに変更。
     .stack-panelは position:absolute;inset:0;overflow:hidden の100vhフル画面のまま
     なので、grid-template-rowsで上下に分割する(orderでDOM順(body→photo)を視覚上は
     photo→bodyに入れ替える) */
  .stack-panel { grid-template-columns: 1fr; grid-template-rows: 50vh 50vh; }
  /* 固定ヘッダー(実測高さ73px、z-index:1000)の裏に隠れないよう、その下に配置する */
  .panel-index { top: 90px; left: 24px; writing-mode: horizontal-tb; color: var(--paper); text-shadow: 0 1px 4px rgba(13,11,8,0.6); }
  /* 親.stack-panelのalign-items:center(デスクトップの左右2カラム用)がそのまま効くと、
     文字ブロックの実高さが行の高さより低い分だけ上下中央寄せされ、写真の直下に大きな
     空白ができてしまう。align-self:startで写真の直後から詰めて配置する */
  .panel-body { padding: 20px 24px 20px; overflow-y: auto; align-self: start; }
  .panel-body h2 { margin-top: 8px; font-size: clamp(1.6rem, 6.4vw, 2.6rem); }
  .panel-divider { margin-top: 20px; }
  .panel-desc { margin-top: 16px; }
  .panel-arrow { margin-top: 20px; width: 52px; height: 52px; }
  .panel-photo { display: block; height: 100%; margin: 0; order: -1; }
}

/* ===========================================================
   VALUES：ぼやけた単語がスクロールでピントを結ぶ演出（v5のFOCUS BLUR技法をそのまま移植。
   実機分解元はPKSHA Technology https://www.pkshatech.com/ 、詳細はrunbird_v5.html参照）
   =========================================================== */
.focus-section {
  /* position:sticky+height:160vh(画面に固定してピント合わせを見せる形式)をやめ、
     普通のスクロールで流れる形式に作り直した(2026-07-28、河合さん指示：
     スクロールでピタッと止める仕組み自体が無くなったので、固定表示にする必要がなくなったため) */
  /* 上200px(前セクションとの切れ目)は維持。下は「Co-creating our future→Bridging people through IT」の
     間を-100pxする指示(2026-07-28)を受けて200px→100pxに変更 */
  position: relative; padding: 200px 0 100px;
  /* 背景色は#storyBg(固定キャンバス、未来を共に〜数字で見るRUNBIRDまで1枚で貫通)が担当するため透明にする
     (2026-07-22、河合さんがPKSHA Technology実サイトのスクショを送ってくれて判明。以前はセクション毎に
     背景色を個別に持たせていたが誤りだった) */
  background: transparent;
  /* main > sectionの共有padding(横方向)の影響を受けず、常に画面幅いっぱいに広げる(恒久チェック項目#6) */
  width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
}
.focus-stage {
  max-width: var(--container); margin: 0 auto; padding: 0 60px;
}
.focus-single {
  position: relative; z-index: 1;
  max-width: 560px;
  /* PKSHAの「Our Vision」等と同じく、低コントラスト+ぼかしから鮮明になる1本の見出し(2026-07-22) */
  filter: blur(var(--focus-blur, 14px));
  opacity: var(--focus-opacity, 0.3);
}
/* 自社開発→提供→フィードバック→共に育てる、のサイクル図。
   PKSHA Technology実サイト(pkshatech.com)を直接確認して再構築(2026-07-22・2回目の訂正)：
   円は「薄い輪郭線のオブジェクト」ではなく、円自体が柔らかい塗り(radial-gradientをぼかしたもの)を
   持ち、重なり合うことで背景のもやっとした質感を作っている。「背景」と「オブジェクト」を
   分けずに、円の塗りそのものが背景を兼ねる形に作り直した（河合さん指摘） */
.focus-diagram {
  position: relative; z-index: 1; flex: 0 0 auto;
  width: 640px; height: 560px; margin-right: -60px; margin-top: 60px;
}
.focus-diagram-circle {
  position: absolute; border-radius: 50%;
  filter: blur(var(--focus-blur, 14px));
  opacity: var(--focus-opacity, 0.3);
}
/* 文字・矢印は撤去し、円それぞれが違う速度でゆっくり回転しながら中心へ寄ったり外へ離れたりする
   純粋なアンビエント演出に変更（2026-07-22）。位置決め(top/left/right/bottom)は外側の
   .focus-diagram-circleが担当し、回転・ドリフトのアニメーションは内側のinnerで行う
   （同じ要素にstatic transformとkeyframeのtransformを両方使うと競合するため分離） */
.focus-diagram-circle-inner {
  width: 100%; height: 100%; border-radius: 50%;
  border: 1px solid rgba(250, 249, 246, 0.14);
}
.focus-diagram-circle--a {
  width: 380px; height: 380px; top: 0; left: 0;
}
.focus-diagram-circle--a .focus-diagram-circle-inner {
  background: radial-gradient(circle at 35% 30%, rgba(217, 180, 114, 0.22), rgba(217, 180, 114, 0.04) 70%, transparent 100%);
  animation: circleDriftA 26s ease-in-out infinite;
}
.focus-diagram-circle--b {
  width: 380px; height: 380px; top: 0; right: 0;
}
.focus-diagram-circle--b .focus-diagram-circle-inner {
  background: radial-gradient(circle at 65% 30%, rgba(250, 249, 246, 0.14), rgba(250, 249, 246, 0.03) 70%, transparent 100%);
  animation: circleDriftB 34s ease-in-out infinite;
}
.focus-diagram-circle--c {
  width: 460px; height: 460px; bottom: 0; left: 50%; transform: translateX(-50%);
}
.focus-diagram-circle--c .focus-diagram-circle-inner {
  background: radial-gradient(circle at 50% 40%, rgba(217, 180, 114, 0.26), rgba(217, 180, 114, 0.05) 70%, transparent 100%);
  border-color: rgba(217, 180, 114, 0.3);
  animation: circleDriftC 42s ease-in-out infinite;
}
/* 3つとも速度・振れ幅・方向を変え、回転しながら中心に寄ったり離れたりする(2026-07-22) */
@keyframes circleDriftA {
  0%   { transform: rotate(0deg) translate(0, 0) scale(1); }
  50%  { transform: rotate(160deg) translate(18px, 14px) scale(1.06); }
  100% { transform: rotate(360deg) translate(0, 0) scale(1); }
}
@keyframes circleDriftB {
  0%   { transform: rotate(0deg) translate(0, 0) scale(1); }
  50%  { transform: rotate(-140deg) translate(-22px, 10px) scale(0.94); }
  100% { transform: rotate(-360deg) translate(0, 0) scale(1); }
}
@keyframes circleDriftC {
  0%   { transform: rotate(0deg) translate(0, 0) scale(1); }
  50%  { transform: rotate(120deg) translate(0, -20px) scale(1.05); }
  100% { transform: rotate(360deg) translate(0, 0) scale(1); }
}
@media (max-width: 960px) {
  .focus-stage { flex-direction: column; justify-content: center; gap: 40px; padding: 0 24px; }
  .focus-diagram { width: 320px; height: 380px; margin-right: 0; }
  .focus-diagram-circle--a, .focus-diagram-circle--b { width: 190px; height: 190px; }
  .focus-diagram-circle--c { width: 260px; height: 260px; }
}
.focus-eyebrow {
  font-family: var(--font-display); font-weight: 700; font-size: 0.85rem;
  letter-spacing: 0.12em; color: var(--gold-light); margin: 0 0 18px;
}
.focus-heading {
  font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em;
  color: #fff; font-size: clamp(2.4rem, 5.2vw, 4rem); line-height: 1.15; margin: 0 0 24px;
}
.focus-sub { font-size: 0.95rem; color: var(--gold-light); font-weight: 600; margin: 0 0 14px; }
.focus-body { font-size: 0.9rem; color: rgba(255,255,255,0.62); line-height: 1.8; max-width: 420px; margin: 0; }

/* ヒーローの巨大文字(#canvasHero .hero-giant)と同じ文字サイズ感で、各セクションに英字見出しを
   アクセントとして配置する(2026-07-27、河合さん指示)。フリップ演出はjs側のplayFlapAnimationを再利用 */
.flap-giant {
  position: absolute;
  font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em;
  font-size: clamp(2.6rem, 10vw, 10.5rem); line-height: 0.98;
  color: var(--paper);
  text-wrap: balance;
  /* 改行位置は<br>で明示的に指定するようにしたため(2026-07-27)、ここでは
     指定した行がさらに折り返されない程度に広げておく */
  max-width: 900px;
  pointer-events: none;
  z-index: 0;
}
/* スクロールの流れで自然に見せる形式にしたため(2026-07-28)、絶対配置(position:absolute)をやめ、
   見出しブロックの下に普通に積む形にする。これで見切れる心配が無くなる */
.flap-giant--focus {
  position: static;
  margin-top: 100px;
  text-align: right;
  margin-left: auto;
}
/* 余白ルール(2026-07-28)：ヘッダーナビ自体の高さは実測約193pxあるため、topは200pxにしておけば潜り込みも回避できる。
   leftは単純な固定pxだと.glance(画面幅いっぱいのセクション)基準になり、
   「未来を共に、つくる。」(.focus-stageのmax-width:1180pxを画面中央寄せした上でのパディング)
   と基準がズレて、画面が広いほど左あきの差が開いて見える不具合があった(河合さん実機指摘・2026-07-28)。
   .focus-stageと同じ「中央寄せした1180px基準」に揃え、河合さん指定の100pxを additiveに使うことで
   画面幅が変わっても未来を共に、つくる。とセットで一致させる */
.flap-giant--glance { left: calc(max(0px, (100vw - var(--container)) / 2) + 100px); top: 200px; text-align: left; }
@media (max-width: 860px) {
  .flap-giant { display: none; }
  /* 「未来を共に、つくる。」のCo-creating our future と「ITのチカラで、人を繋ぐ。」の
     Bridging people through ITの2つは、モバイルでも表示したいとの河合さんFB(2026-09-24)。
     他のflap-giant(ページヒーロー・フッター)は従来通り非表示のまま、この2つだけ復活させる */
  .flap-giant--focus, .flap-giant--glance {
    display: block;
    font-size: clamp(2rem, 11vw, 3.2rem);
  }
  /* --glanceはデスクトップ用にposition:absoluteで細かく座標指定されており、モバイルの
     1カラムレイアウト(.glance-innerが縦積みになる)とは基準がズレて重なる。--focus同様
     position:staticにして、DOM順(このタグ→.glance-inner)通り自然に上へ積む */
  .flap-giant--glance { position: static; left: auto; top: auto; text-align: left; margin: 0 0 24px; }
  .flap-giant--focus { margin-top: 40px; }
  /* Co-creating our future→Bridging people through ITの間が190px(focus-section下100px+
     glance上90pxの合計)空いていたのを、河合さんFB「1/3くらいまで減らして」を受けて
     半分程度(合計100px)に圧縮(2026-09-24) */
  .focus-section { padding-bottom: 50px; }
  .glance { padding-top: 50px; }
}

@media (max-width: 720px) {
  .focus-single { padding: 0 24px; }
  .focus-heading { font-size: clamp(1.8rem, 8vw, 2.6rem); }
}

/* ===========================================================
   Company glance
   =========================================================== */
.glance {
  /* 背景は#storyBgが担当（2026-07-22、未来を共に〜数字で見るRUNBIRDまで1枚の背景に統合） */
  background: transparent;
  position: relative;
  overflow: hidden;
  /* COMPANY/見出し/本文/リンクを右端から50pxの位置に統一する(2026-07-27、河合さん指示。
     main > sectionの共有padding(32px)を上書き) */
  padding-right: 50px;
}
.glance-inner { position: relative; z-index: 1; }
/* company.htmlのMESSAGEを.sticky-showcase(2カラム+写真切替)に作り直したため(2026-07-29)、
   .glance-innerを経由せず直接.sticky-showcaseを子要素にしている。同じく前面表示に持ち上げる */
.glance--standalone .sticky-showcase { position: relative; z-index: 1; }
.glance-inner {
  /* main > section側で既に130px/32pxの余白があるため、ここでは重ねて余白を足さない(2026-07-22、一貫性チェックで発見) */
  max-width: 720px;
  /* 右側に配置(2026-07-27、河合さん指示。左上のBridging people through ITと住み分けるため)。
     ブロック全体を左に100px移動する指示も含む(2026-07-28) */
  margin: 0 100px 0 auto;
}
.glance-text { text-align: right; }
/* COMPANYのラベルがヘッダーナビ(固定表示)と高さがほぼ被って埋もれて見えなくなっていたため、
   上に余白を足してナビの下にちゃんと収まるようにする(2026-07-27)。
   見出しとの間隔もFUTURE(.focus-eyebrow)に合わせて18pxにし、フォント自体も揃える。
   以前h2側に付けていたmargin-top:150pxは、COMPANYと見出しの間が離れすぎて
   「COMPANYが見出しの真上に来ていない」状態を作っていたため撤去した(2026-07-27)。
   その後、左上の.flap-giant--glance(Bridging people through IT)と高さが被っていたことが
   実測(getBoundingClientRect)で判明したため、被らない位置まで330px→550pxにさらに下げた(2026-07-28) */
.glance-text .eyebrow {
  margin-top: 550px;
  margin-bottom: 18px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  color: var(--gold-light);
}
.glance-text h2 { color: var(--paper); font-size: clamp(2.4rem, 5.2vw, 4rem); line-height: 1.15; margin-top: 0; }
/* max-widthで幅を狭めるとブロック自体は左寄りのまま残り、text-align:rightだけでは
   見出し(幅いっぱい)と右端が揃わなかったため、margin-left:autoでブロックごと右に寄せる(2026-07-27) */
.glance-lead { color: rgba(250, 249, 246, 0.62); margin: 22px 0 30px auto; max-width: 480px; }
.glance-text .link-arrow {
  color: var(--paper); border-color: rgba(250, 249, 246, 0.4);
  /* 右揃えの1行だけの要素にmargin-leftをつけても見た目上は動かないため、
     下線ごと左に40px広がるpadding-leftにする(2026-07-27) */
  padding-left: 40px; margin-bottom: 60px;
}
.glance-text .link-arrow:hover { color: var(--gold-light); border-color: var(--gold-light); }
/* PKSHAの「Our Business」導入フレームは丸やロゴを添えず、テキストだけで構成されていた。
   丸のグラフィックは「未来を共に」(サイクル図)・「数字で見るRUNBIRD」(日本地図)の
   意味のある場所にだけ置く方針にしたため、ここのロゴマークは非表示のまま単一カラムにする(2026-07-22) */
.glance-mark { display: none; }
@media (max-width: 720px) {
  /* .glance-innerはデスクトップで「右側の細い縦長ブロック」として設計されており
     (max-width:720px＋右マージン100pxで画面の半分以下に収まる)、狭いモバイル画面では
     見出しが1文字ずつ折り返される崩れた見た目になっていた(2026-09-24、河合さんFB
     「ITのチカラで〜が画面半分しかつかわれてない、1カラム表示と同等にしよ」)。
     TOP専用の右寄せ設定(margin-right:100px・text-align:right・max-width:720px)を
     モバイルだけ解除し、他の1カラムセクションと同じ左寄せ・フル幅にする。
     company.html側の.glance--standaloneは別セレクタで既に独自の左寄せ指定を持つため無関係 */
  .glance-inner { padding: 32px 24px; max-width: none; margin: 0; }
  .glance-text { text-align: left; }
  .glance-lead { max-width: none; margin: 22px 0 30px; }
  .glance-text .link-arrow { padding-left: 0; }
  /* .glanceは「COMPANYラベルを右端から50pxに統一する」というデスクトップ専用の
     padding-right:50px(固定値・モバイル未対応)を持っており、左側は.glance-innerの
     padding-left(24px)だけなのに対して右は50px+24px=74pxと非対称になっていた
     (2026-09-24、河合さんFB「右の空きを左の空きにあわせて」)。モバイルだけ0にして、
     左右とも.glance-innerの24pxのみで揃える */
  .glance { padding-left: 0; padding-right: 0; }
  /* h2のclamp()下限2.4rem(38.4px)のままだと、フル幅化後の実測カラム幅255pxに対して
     「ITのチカラで、」が入りきらず、<br>で指定した2行のうち1行目がさらに折り返されて
     3行になっていた。他の下層ページ見出しと同じ考え方でモバイルだけ縮小する */
  .glance-text h2 { font-size: clamp(2rem, 8vw, 2.4rem); }
}
/* company.html「MESSAGE」セクション専用の上書き(2026-07-28、河合さん実機指摘で発覚)。
   .glanceは#storyBg(暗い固定背景)前提で背景透明+白文字にチューニングされているため、
   storyBgを持たないcompany.htmlでは白文字が実質白背景に乗って完全に見えなくなっていた。
   さらにeyebrowのmargin-top:550px・glance-innerのmargin-right:100pxは
   TOPの「Bridging people through IT」との被り回避のための値で、Bridgingが無いcompany.htmlでは
   無関係な巨大な空白を作っていた。ロゴマーク非表示もTOP専用の判断だったため、ここでは復活させる */
/* 参考サイト(IMAYO・PKSHA)を実際に確認したところ、この種の企業紹介・導入文セクションは
   どちらもテキストのみの単一カラムで、写真もロゴも添えていなかった。TOP側の既存方針
   「丸グラフィックは意味のある場所にだけ置く」(.glance-mark非表示の理由)とも合致するため、
   ロゴマーク+2カラム化は撤回し単一カラムに戻す(2026-07-28、河合さん指摘「バランス悪い」を受けて
   壁打ちループで再検討)。視覚的な見どころは.glow-surfaceのカーソル追従グローに任せる */
.glance--standalone {
  background: #fff;
  /* .glanceの overflow:hidden が原因で写真のposition:stickyが機能していなかった
     (2026-07-29、河合さん「写真ついてきてない」を受けて発見。sticky要素は祖先に
     overflow:hidden/auto等があると正しく追従できなくなる) */
  overflow: visible;
  /* main > sectionの共有padding-top:130pxを上書き。事業案内のショーケード開始位置の
     余白(#showcase、padding-top:120px、ページヒーローと隙間なく隣接)と合計値を揃える
     (2026-07-29、河合さんFB「TOP/会社概要からMESSAGEまでの空きを事業案内に合わせる」。
     2026-07-30、「あきすぎ、-100pxくらいで」を受けて200px→100pxに再調整)。
     内側の.sticky-showcase自身が持つpadding-top:20pxと合わせて合計120pxになる */
  padding-top: 100px;
  /* .glanceのpadding-right:50pxはTOP専用(Bridging文字との位置合わせ用)の左右非対称設定。
     ここでは左右均等にして、中央寄せのブロックが片側に偏らないようにする(2026-07-29、
     河合さん指摘「全部右(左)に寄ってる」を受けて発見。ブロック自体が画面端にくっついて
     右半分が丸ごと空白になっていた) */
  padding-right: 32px;
}
@media (max-width: 720px) {
  /* TOP(.glance)側で「右のあきを左に揃えて」との河合さんFB(2026-09-24)に対応した際、
     company.html側(.glance--standalone、代表メッセージ)も左右非対称のまま残っていた
     （左は他の類似クラスの影響でpadding-left:0になっていたのに対し、右はここの
     padding-right:32pxが単独クラス同士の詳細度勝負でソース順により生き残っていたため、
     実測で左32px・右64pxと2倍近い差になっていた）。モバイルだけ0にして左右を揃える */
  .glance--standalone { padding-right: 0; }
}
.glance--standalone .glance-inner {
  margin: 0 auto;
  max-width: 720px;
}
.glance--standalone .glance-text {
  text-align: left;
}
.glance--standalone .glance-text .eyebrow {
  margin-top: 0;
  color: var(--gold-deep);
  justify-content: flex-start;
}
.glance--standalone .glance-text h2 { color: var(--ink); }
.glance--standalone .glance-lead { color: var(--text-muted); margin: 22px 0 30px 0; }
.glance--standalone .glance-text .link-arrow {
  color: var(--ink); border-color: rgba(26, 22, 15, 0.3);
}
.glance--standalone .glance-text .link-arrow:hover { color: var(--gold-deep); border-color: var(--gold-deep); }
/* 代表メッセージの実写真(2026-07-29、runbird.net/company/message/の実サイトと同じく
   見出し直後・本文の前に写真を挟む構成。実サイトの実際の構造をそのまま踏襲することで
   ロゴマーク時のような「バランスの悪い余白」を避ける) */
.glance--standalone .glance-photo {
  margin: 32px 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.glance--standalone .glance-photo img {
  display: block;
  width: 100%;
  height: auto;
}
/* .glance-text .eyebrowのmargin-top:550pxは.flap-giant--glance(Bridging)との被り回避が目的だが、
   Bridging自体は860px以下で非表示になるため、この余白も存在意義がなくなり無駄な空白になっていた
   (壁打ちループで発見・2026-07-28)。モバイルヘッダー実測72pxに対して十分な130pxに戻す。
   .glance-text .eyebrow本体ルールと詳細度が同じため、CSSソース順で本体より後ろに置く必要がある。
   →2026-09-24、Bridgingをモバイルでも再表示したのに伴い、この130pxも前提(Bridging非表示)が
   崩れて再び無駄な空白になっていた。「Bridging〜ITのチカラでの間を1/3くらいに」との
   河合さんFBで0に詰める（Bridgingは既に上で表示されているので、ヘッダー避けの余白はもう不要） */
@media (max-width: 860px) {
  .glance-text .eyebrow { margin-top: 0; }
}
.link-arrow {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2px;
  display: inline-flex;
  gap: 8px;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease), gap 0.3s var(--ease);
}
.link-arrow:hover { color: var(--gold-deep); border-color: var(--gold-deep); gap: 14px; }

/* ===========================================================
   News
   =========================================================== */
.news { background: var(--paper); padding-top: 50px; }
.news-filter {
  max-width: var(--container);
  margin: 0 auto 30px;
  padding: 0 32px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.news-filter-btn {
  padding: 9px 20px;
  border-radius: 100px;
  border: 1px solid var(--line);
  background: var(--card);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.25s var(--ease);
  font-family: var(--font-body);
}
.news-filter-btn:hover { border-color: var(--gold); color: var(--gold-deep); }
.news-filter-btn.is-active { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.news-list li[hidden] { display: none; }
.news-list {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
  border-top: 1px solid var(--line);
}
.news-list li {
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 26px 4px;
  border-bottom: 1px solid var(--line);
  transition: padding-left 0.3s var(--ease);
}
.news-list li:hover { padding-left: 10px; }
/* 一覧→詳細ページへのリンクを持つ行専用。liのflex/paddingをリンク側に肩代わりさせ、
   liはリンクの当たり判定を邪魔しない透明な入れ物にする(2026-09-23、投稿詳細ページ新設に伴い追加) */
.news-list li.has-link { display: block; padding: 0; }
.news-list li.has-link:hover { padding-left: 0; }
.news-list-link {
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 26px 4px;
  color: inherit;
  text-decoration: none;
  transition: padding-left 0.3s var(--ease);
}
.news-list-link:hover { padding-left: 10px; }
.news-date { font-family: var(--font-display); font-size: 0.85rem; color: var(--text-muted); flex: 0 0 100px; }
.news-tag {
  flex: 0 0 auto;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--gold-deep);
  background: rgba(184,134,60,0.1);
  padding: 5px 12px;
  border-radius: 100px;
}
.news-title { font-size: 0.98rem; }
.news-note {
  max-width: var(--container);
  margin: 20px auto 0;
  padding: 0 32px;
  font-size: 0.8rem;
  color: var(--text-muted);
}
.news > .link-arrow {
  max-width: var(--container);
  margin: 34px auto 0;
  padding: 0 32px;
  display: flex;
}

/* ===========================================================
   お知らせ個別記事（投稿詳細）ページ（2026-09-23新規。WPテーマ化した際は
   WordPress標準の投稿ループ(single.php相当)に載せる想定。カテゴリ・日付は
   .news-tag/.news-dateを流用し、一覧ページとの見た目の連続性を保つ） */
.page-hero--article .article-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 22px;
}
.page-hero--article .page-hero-inner { max-width: 780px; }
.page-hero--article h1 { font-size: clamp(1.6rem, 3.4vw, 2.6rem); line-height: 1.4; }

.article { background: var(--paper); padding-top: 50px; }
/* 記事本文は可読性優先で container(1180px)より狭い760pxに絞る(Apple Newsroom等の記事幅を参考) */
.article-cover {
  max-width: 900px;
  margin: 0 auto 56px;
  padding: 0 32px;
}
.article-cover img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  display: block;
}
/* アイキャッチ未設定の記事用フォールバック（特定サービスの写真流用をやめ、ブランドロゴのみの専用プレースホルダーに。2026-09-30） */
.article-cover-fallback {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  background: linear-gradient(135deg, var(--ink) 0%, var(--ink-soft) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.article-cover-fallback img {
  width: 25%;
  max-width: 96px;
  aspect-ratio: auto;
  opacity: 0.85;
  border-radius: 0;
  box-shadow: none;
}
/* お知らせ一覧のページネーション（the_posts_pagination()のWP標準markup用。2026-09-30、無地状態を解消） */
.news-pagination .nav-links {
  display: flex;
  align-items: center;
  gap: 8px;
}
.news-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
  transition: background-color 0.2s ease, color 0.2s ease;
}
a.news-pagination .page-numbers,
.news-pagination a.page-numbers {
  cursor: pointer;
}
.news-pagination .page-numbers:hover {
  background: var(--paper-alt);
}
.news-pagination .page-numbers.current {
  background: var(--gold);
  color: var(--paper);
  font-weight: 600;
}
.news-pagination .page-numbers.dots {
  background: none;
}
.article-body {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 32px;
  font-size: 1.02rem;
  line-height: 1.9;
  color: var(--ink-soft);
}
.article-body p { margin: 0 0 26px; }
.article-body h2 {
  font-size: clamp(1.3rem, 2.2vw, 1.6rem);
  line-height: 1.4;
  margin: 56px 0 22px;
}
.article-body h3 { font-size: 1.1rem; line-height: 1.5; margin: 40px 0 16px; }
.article-body img { width: 100%; border-radius: var(--radius-md); margin: 12px 0 32px; display: block; }
.article-body blockquote {
  margin: 0 0 32px;
  padding: 4px 0 4px 24px;
  border-left: 3px solid var(--gold);
  color: var(--text-muted);
  font-style: italic;
}
.article-foot {
  max-width: 760px;
  margin: 60px auto 0;
  padding: 28px 32px 0;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

/* ---- 関連記事（works-listカルーセルと同じ「カード＋タグ＋日付」の語彙を再利用） ---- */
.article-related { background: var(--paper-alt); }
.article-related-grid {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.article-related-card {
  display: block;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 24px;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.article-related-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
.article-related-card .news-date { display: block; margin-bottom: 10px; }
.article-related-card .news-tag { display: inline-block; margin-bottom: 14px; }
.article-related-card h3 { font-size: 1.02rem; line-height: 1.5; font-weight: 600; }
@media (max-width: 860px) {
  .article-related-grid { grid-template-columns: 1fr; }
  .article-cover { margin-bottom: 40px; }
}

/* ===========================================================
   Footer
   =========================================================== */
/* 参考デザイン(河合さん提供のスクショ)に合わせて、CONTACT見出し+丸ボタン→拠点/リンク列→
   PLUS MOREタグライン→ロゴ+コピーライトの縦積み構成に作り直した(2026-07-28) */
.site-footer { background: var(--ink); color: rgba(250,249,246,0.6); padding: 100px 32px 40px; position: relative; z-index: 1; overflow: hidden; }
.footer-inner { max-width: var(--container); margin: 0 auto; padding: 0 32px; }

/* 旧.ctaセクションの見出しをここへ移設(2026-08-05、河合さん指示。p+ボタンは削除、
   h2だけをCONTACTの巨大見出しの上に配置するリード文として残す) */
.footer-contact-lead { text-align: center; font-size: 1.1rem; color: var(--paper); margin: 0 0 24px; }
/* 採用ページ限定：CONTACTとは別枠の「採用サイトへ」リンク(2026-08-05) */
.footer-contact-entry-link { display: flex; justify-content: center; margin: 0 0 40px; }
.site-footer .link-arrow { color: var(--paper); border-color: rgba(250, 249, 246, 0.4); }
.site-footer .link-arrow:hover { color: var(--gold-light); border-color: var(--gold-light); }

/* CONTACT見出し+丸ボタンをセットのまま中央に寄せる(2026-07-28、河合さん指示) */
.footer-top { display: flex; align-items: center; justify-content: center; gap: 32px; margin-bottom: 80px; }
/* 英字の巨大見出しは参考画像だとかなり大きいが、ヒーローのRUNBIRDと同じサイズ感に揃える指示のため
   .flap-giantの共通clamp(2.6rem, 10vw, 10.5rem)をそのまま使う。絶対配置ではなく通常フローで積む */
.flap-giant--footer-contact {
  position: static; margin: 0; color: var(--paper);
}
.footer-contact-circle {
  flex: 0 0 auto;
  width: 160px; height: 160px;
  border-radius: 50%;
  border: 1px solid rgba(250,249,246,0.4);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; color: var(--paper);
  transition: background 0.3s var(--ease), color 0.3s var(--ease), transform 0.3s var(--ease);
}
.footer-contact-circle:hover { background: var(--gold); color: var(--ink); border-color: var(--gold); transform: scale(1.05); }
@media (max-width: 720px) {
  .footer-contact-circle { width: 90px; height: 90px; font-size: 1.2rem; }
}
/* .flap-giant共通ルールが860px以下でdisplay:noneにするため、フッターのCONTACT見出し・
   PLUS MOREタグラインがモバイルで完全に非表示になっていた(壁打ちループで発見・2026-07-28)。
   フッターの主要CTA/タグラインなので、ここだけは小さいサイズで表示を復活させる */
@media (max-width: 860px) {
  .flap-giant--footer-contact,
  .flap-giant--footer-tagline {
    display: block;
    font-size: clamp(1.8rem, 11vw, 3.5rem);
  }
}

.footer-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  border-top: 1px solid rgba(250,249,246,0.12);
  padding-top: 40px;
  margin-bottom: 100px;
}
.footer-col { display: flex; flex-direction: column; gap: 12px; }
.footer-col-label {
  font-family: var(--font-display); font-weight: 700; font-size: 0.78rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--paper);
  margin: 0 0 6px;
}
.footer-col-label--spaced { margin-top: 18px; }
.footer-col a { font-size: 0.88rem; color: rgba(250,249,246,0.6); transition: color 0.3s var(--ease); }
.footer-col a:hover { color: var(--gold-light); }
/* 絵文字ピン(📍)ではなくmask画像でアイコン化(2026-08-06、河合さん指示)。currentColorで
   文字色を継承させているため、色調整はこの要素のcolorだけ変えれば済む */
.footer-office-item {
  font-size: 0.88rem; margin: 0; color: rgba(250,249,246,0.6);
  display: flex; align-items: center; gap: 8px;
}
.footer-office-item::before {
  content: "";
  width: 12px; height: 12px;
  flex-shrink: 0;
  background-color: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 2C7.58 2 4 5.58 4 10c0 5.25 6.72 11.44 7.24 11.9a1.15 1.15 0 0 0 1.52 0C13.28 21.44 20 15.25 20 10c0-4.42-3.58-8-8-8zm0 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6z'/%3E%3C/svg%3E") no-repeat center / contain;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 2C7.58 2 4 5.58 4 10c0 5.25 6.72 11.44 7.24 11.9a1.15 1.15 0 0 0 1.52 0C13.28 21.44 20 15.25 20 10c0-4.42-3.58-8-8-8zm0 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6z'/%3E%3C/svg%3E") no-repeat center / contain;
}
.footer-plain { font-size: 0.85rem; line-height: 1.6; margin: 0; color: rgba(250,249,246,0.6); }
@media (max-width: 960px) {
  .footer-cols { grid-template-columns: repeat(2, 1fr); gap: 32px 24px; }
}
@media (max-width: 560px) {
  .footer-cols { grid-template-columns: 1fr; }
  .footer-top { flex-direction: column; align-items: flex-start; gap: 24px; }
  .footer-contact-lead { text-align: left; }
}

/* PLUS MORE：ヒーローと同じサイズ感の英字タグライン。中央寄せで大きく置く */
.flap-giant--footer-tagline {
  /* max-widthはあるがwidthが無いブロックはtext-align:centerだけでは中央に来ない
     (ボックス自体が左詰めのまま)ため、margin:autoでブロックごと中央に寄せる(2026-07-28) */
  position: static; text-align: center; color: var(--paper);
  margin: 0 auto 60px;
}

.footer-bottom {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 24px;
  border-top: 1px solid rgba(250,249,246,0.12);
  padding-top: 24px;
}
.footer-inner .brand-word { color: var(--paper); }
.footer-copy { font-size: 0.78rem; margin: 0; color: rgba(250,249,246,0.4); }

/* ===========================================================
   アンビエントパーティクル（黒背景セクション共通の演出）
   =========================================================== */
.ambient-particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
/* ページ全体で継ぎ目なく漂わせる版(2026-08-31)。position:fixedでビューポート基準にすることで
   セクション毎に独立した.ambient-particlesが境界で途切れて見える問題を解消する */
.ambient-particles--global {
  position: fixed;
  overflow: hidden;
  z-index: 5;
  transition: opacity 0.6s var(--ease);
}
.ambient-particles span {
  position: absolute;
  bottom: -8%;
  width: var(--size, 5px);
  height: var(--size, 5px);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(217, 180, 114, 0.95), rgba(184, 134, 60, 0.15) 70%, transparent 100%);
  opacity: 0;
  will-change: transform, opacity;
}
/* グローバル版はbottom基準ではなくJSが設定するtop(%)基準で配置する */
.ambient-particles--global span { bottom: auto; }

/* ===========================================================
   Page hero（下層ページ共通の小型ヒーロー）
   =========================================================== */
.page-hero {
  position: relative;
  min-height: 46vh;
  display: flex;
  align-items: center;
  justify-content: center;
  /* TOPのヒーローは維持しつつ、サブページのpage-heroは白(実質透明)に変更(2026-07-29、河合さん指示) */
  background: transparent;
  color: var(--ink);
  overflow: hidden;
  padding: 160px 32px 80px;
  text-align: center;
}
/* ゴールドの円のアウトラインは白背景化(2026-07-29)に伴い撤去(河合さん指示) */
.page-hero::before {
  content: none;
}
/* 幾何学背景グラフィック（ACES社の参考事例を翻案：半透明の四角を積んだ抽象シルエット） */
.page-hero-shapes {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.page-hero-shape {
  position: absolute;
  /* 白背景化(2026-07-29)に伴い、ダーク背景用のゴールド味だと黄色いシミのように見えたため、
     色味自体を無くして純白(実質見えない)にする(河合さんFB「薄くてか純白に」) */
  background: transparent;
  clip-path: polygon(32% 0%, 68% 0%, 42% 100%, 6% 100%);
}
.page-hero-shape--1 { width: 360px; height: 640px; top: -80px; right: 4%; }
.page-hero-shape--2 {
  width: 230px; height: 520px; top: 20px; right: 20%;
  opacity: 0.7;
  background: transparent;
}
@media (max-width: 640px) {
  .page-hero-shape--1 { width: 160px; height: 420px; right: -20px; }
  .page-hero-shape--2 { width: 100px; height: 340px; right: 60px; }
}
/* サブページ共通：TOPで確立したフラップ演出の巨大英語ステートメントを流用。
   .page-heroは46vhの短いヒーローで日本語H1・リード文が主役のため、同じ手法でも喧嘩しないよう
   背景に薄く沈めるアレンジにする(TOP側のCo-creating/Bridging等は主役として使うが、ここは脇役)(2026-07-28) */
.flap-giant--page-hero {
  position: absolute;
  top: 48px; left: 0;
  transform: none;
  z-index: 0;
  width: auto;
  max-width: 90%;
  /* 河合さんFBで左上配置・左揃えに変更、サイズも130%→さらに10%UP(2026-07-29) */
  font-size: clamp(3.146rem, 11.44vw, 11.44rem);
  opacity: 0.08;
  color: var(--ink);
  text-align: left;
  pointer-events: none;
}
@media (max-width: 720px) {
  .flap-giant--page-hero { display: none; }
}
/* お知らせ/アクセス/お問い合わせ等、min-height:34vhの短いヒーロー専用。
   通常の.flap-giant--page-heroの文字サイズだと2行で34vhからはみ出し下端が見切れる
   バグを壁打ちループで発見(2026-07-28)。専用に一回り小さいサイズを用意する */
.page-hero--compact {
  min-height: 34vh;
}
.page-hero--compact .flap-giant--page-hero {
  font-size: clamp(1.6rem, 6vw, 4.5rem);
}
.page-hero-inner { position: relative; z-index: 1; max-width: 720px; }
.page-hero .eyebrow { color: var(--gold-deep); justify-content: center; }
.page-hero h1 { color: var(--ink); }
.page-hero-lead {
  margin: 22px auto 0;
  max-width: 560px;
  color: var(--text-muted);
  font-size: 1rem;
}
.page-hero-crumb {
  margin: 18px 0 0;
  font-size: 0.78rem;
  color: rgba(13, 11, 8, 0.45);
  letter-spacing: 0.06em;
}
.page-hero-crumb a { color: rgba(13, 11, 8, 0.75); }
.page-hero-crumb a:hover { color: var(--gold-deep); }

/* page-hero-shape：スクロール連動パララックス（2026-07-22追加。全ページのpage-hero背景に「動き」を持たせる） */
.page-hero-shape { transition: transform 0.05s linear; will-change: transform; }

/* anchor jump時に固定ヘッダーの下に隠れないようにする */
[id] { scroll-margin-top: 96px; }

/* ===========================================================
   料金ハイライト（事業詳細ページ共通・2026-07-22追加）
   =========================================================== */
.pricing-highlight {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 0 0 28px;
}
.pricing-item {
  flex: 1 1 220px;
  padding: 20px 22px;
  border-radius: var(--radius-md);
  background: var(--paper-alt);
  border: 1px solid var(--line);
}
.pricing-item-label { display: block; font-size: 0.78rem; color: var(--text-muted); margin-bottom: 6px; }
.pricing-item-value { display: block; font-size: 1.3rem; font-weight: 700; color: var(--ink); }
.pricing-item-value .unit { font-size: 0.85rem; font-weight: 500; color: var(--text-muted); margin-left: 2px; }

/* ===========================================================
   制作実績ギャラリー（WEB制作ページ・2026-07-22追加）
   =========================================================== */
.demo-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 0 0 28px;
}
.demo-card {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  aspect-ratio: 4 / 3;
}
.demo-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.demo-card:hover img { transform: scale(1.06); }
.demo-card-label {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 10px 14px;
  font-size: 0.8rem;
  color: var(--paper);
  background: linear-gradient(0deg, rgba(13,11,8,0.75), transparent);
}
@media (max-width: 720px) {
  .demo-gallery { grid-template-columns: 1fr; }
}


/* 制作実績カード：Apple ipadページ「iPadの魅力を紹介します。」を参考にしたダーク
   カード+横スクロールカルーセル版(2026-08-28、当初のdemo-card--rich版から差し替え) */
/* カード列が親のmax-width(コンテナ幅)に閉じ込められて画面端まで届かない、というFB
   (2026-08-28)を受けて、wrapをビューポート幅いっぱいに広げるフルブリード手法を採用。
   祖先に何重にmax-widthのラッパーが被さっていても100vw基準で計算するので突き抜けられる */
.works-carousel-wrap {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
}
.works-list {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.works-list::-webkit-scrollbar { display: none; }
/* scroll-snap-type:mandatoryは「静止位置は必ずスナップ対象の開始位置」を強制するため、
   1枚目カードの前にmargin/paddingで余白を入れても、ページ読み込み時点でブラウザが
   自動的にその余白ぶんスクロールして帳消しにしてしまう(2026-08-28、河合さんFBで発覚。
   見出しの左端とカード列が揃わず、カードが画面端に貼り付いて見えていた)。
   余白専用のダミー要素を1枚目として追加し、それ自体をスナップ対象にすることで解決する */
/* 右端も左端(.works-list-spacer)と同じ可変幅のダミー要素で余白を揃える。固定32pxの
   margin-rightだと画面幅が広いほど左端の余白との差が開いてしまっていた(2026-09-21、河合さんFB) */
.works-list-spacer { flex: 0 0 max(44px, calc((100vw - var(--container)) / 2 + 12px)); scroll-snap-align: start; }
.works-card {
  position: relative;
  flex: 0 0 300px;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  background: var(--ink);
  border-radius: 24px;
  overflow: hidden;
  height: 520px;
}
/* 上に別枠の黒帯を敷くのをやめ、写真の上に直接テキストを重ねる形に(2026-08-28)。
   グラデーションのスクリムだけ敷いて文字の可読性を確保する */
.works-card-top {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 1;
  padding: 24px;
  background: linear-gradient(180deg, rgba(13, 11, 8, 0.8) 0%, rgba(13, 11, 8, 0.35) 65%, transparent 100%);
}
.works-card-tag { display: block; font-size: 0.8rem; color: rgba(250, 249, 246, 0.75); margin-bottom: 10px; }
.works-card-title { font-size: 1.3rem; font-weight: 700; color: var(--paper); line-height: 1.35; margin: 0; }
.works-card-media { height: 100%; position: relative; }
.works-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* TOP「お客様から選ばれる理由」：動画ページ「制作実績」と同じダークカードカルーセルの
   見た目にしつつ、REASON番号＋見出し＋説明文の3点セットは維持したいとのFB(2026-09-07)。
   写真の上部は既存の.works-card-topを流用(タグ=REASON番号、タイトル=見出し)、
   説明文は新規に下部グラデーションのパネルへ配置する */
.works-card--reason { height: 560px; }
.works-card-bottom {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 1;
  padding: 24px;
  background: linear-gradient(0deg, rgba(13, 11, 8, 0.88) 0%, rgba(13, 11, 8, 0.55) 60%, transparent 100%);
}
.works-card-desc { font-size: 0.85rem; line-height: 1.7; color: rgba(250, 249, 246, 0.85); margin: 0; }
/* WEB制作ページ「制作実績」：ページ全体画像を主役に大きく、PC・スマホ表示画像を手前に
   小さく重ねて奥行きを出すレイアウト(2026-09-01・4回目の作り直し。同サイズの2カラム横並び
   だと情報量が拮抗してフラットに見えるとのFBを受け、エージェンシー系ポートフォリオでよくある
   「大小を重ねる」型に変更)。2段目以降は主役画像の左右を入れ替えて互い違いにする */
.portfolio-rows { display: grid; gap: 166px; }
.portfolio-row { position: relative; padding-top: 28px; }
/* 最後の行だけ、はみ出たモックアップ画像＋drop-shadowの分の余白が
   親.processのpadding-bottom(130px)だけでは足りず、section自体のoverflow:hiddenで
   影の下端が切れていた（2026-09-05、河合さんFB「画像の枠の影が…」で発覚）。
   後続の行がある場合は次の行のgap/padding-topが緩衝材になるが、最後の行だけ足りない。
   影はoffset16px+blur26pxなので、見た目上フェードし切るまで16+26*2.5=81px程度必要
   （最初32pxで直した気になったが、河合さんに「まだ切れてる」と再度指摘されて発覚。
   一度目の確認がフォーカスの外れた実Chromeタブ(9223)でdocument.hidden:trueのままrAFが
   止まっていた状態での誤判定だった。以後はheadless(9225)で確実に確認してから報告する） */
.portfolio-row:last-child { padding-bottom: 96px; }
.portfolio-stage { position: relative; }
/* overflow:hiddenと同じ要素にbox-shadowを乗せると、影が自分自身のoverflowでクリップ
   されてしまう(2026-09-02、河合さんFB「影がバツンと切れてる」で発覚)。border-radiusで
   画像の角を丸めるためのoverflow:hiddenは残しつつ、影はoverflowの影響を受けない
   filter:drop-shadowに置き換える */
.portfolio-media {
  border-radius: var(--radius-md);
  overflow: hidden;
  filter: drop-shadow(0 10px 18px rgba(13, 11, 8, 0.22));
  border: 1px solid var(--line);
  background: var(--paper);
}
.portfolio-media img { width: 100%; height: auto; display: block; }
.portfolio-media--full { width: 82%; margin-left: 0; margin-right: auto; }
.portfolio-media--mockup {
  position: absolute;
  width: 42%;
  right: 4%;
  bottom: -13%;
  z-index: 2;
  border-width: 5px;
  border-color: var(--paper);
  filter: drop-shadow(0 16px 26px rgba(13, 11, 8, 0.32));
}
.portfolio-row:nth-child(even) .portfolio-media--full { margin-left: auto; margin-right: 0; }
.portfolio-row:nth-child(even) .portfolio-media--mockup { right: auto; left: 4%; }
.portfolio-row-tag {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 0.8rem;
  padding: 6px 14px;
  border-radius: 100px;
  background: var(--paper-alt);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  z-index: 3;
}
.portfolio-row:nth-child(even) .portfolio-row-tag { left: auto; right: 0; }
@media (max-width: 720px) {
  .portfolio-media--full { width: 100%; margin: 0; }
  .portfolio-media--mockup { width: 62%; right: -4%; bottom: -8%; }
  .portfolio-row:nth-child(even) .portfolio-media--full { margin: 0; }
  .portfolio-row:nth-child(even) .portfolio-media--mockup { left: -4%; right: auto; }
  .portfolio-row { padding-top: 44px; padding-bottom: 24px; }
}
@media (max-width: 720px) {
  .works-card { flex-basis: 78vw; height: 460px; }
  /* スマホでスクロールして次のカードへ移動すると、左端(scroll-snap-align:start)に
     ピタッと張り付いて見えるとのFB(2026-09-25、河合さんFB「真ん中にくるようにできる？」)。
     カード自体はflex-basis:78vwで画面幅より少し狭いため、centerに変えれば
     両端に均等な余白ができて画面中央に来るようになる。先頭/末尾の.works-list-spacerは
     見出しとの位置合わせ用の別役割のためstartのまま変更しない */
  .works-card { scroll-snap-align: center; }
}

/* 旧demo-card--rich版(2026-08-27〜28、現在未使用。他ページで採用する可能性を考え残置) */
.demo-gallery--movie { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) {
  .demo-gallery--movie { grid-template-columns: repeat(4, 1fr); }
}
/* .demo-card本体のaspect-ratio:4/3・overflow:hiddenは画像専用だったため、外箱ごと
   説明文込みで高さが切り詰められ、説明文が丸ごと不可視になっていた。この場では
   外箱側を解除し、aspect-ratio/overflow-hiddenを内側の.demo-card-mediaだけに掛け直す */
.demo-card--rich { aspect-ratio: auto; overflow: visible; box-shadow: none; }
.demo-card--rich .demo-card-media {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  aspect-ratio: 4 / 3;
}
.demo-card--rich .demo-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.demo-card--rich:hover .demo-card-media img { transform: scale(1.06); }
.demo-card-desc { margin-top: 12px; font-size: 0.85rem; color: var(--text-muted); line-height: 1.6; }

/* ===========================================================
   Service detail（事業案内：交互レイアウト詳細ブロック）
   =========================================================== */
.service-detail-list { background: var(--paper); }
/* INTRO直下のラッパー(旧インラインstyle "padding: 90px 32px 40px"をクラス化)。
   .service-detail-list自身がmain > sectionの共通padding(640px以下は90px 22px)を
   打ち消していなかったため、この90pxとここの90pxが二重にかかり、パンくず〜「WEB SOLUTIONS」等の
   間が実測288pxまで広がっていた(2026-09-25、河合さんFB「ヒーローとヘッダーの間のスペースを半分に」
   ※実際はパンくず〜INTRO見出しの間の余白のこと)。640px以下では.service-detail-list側の
   重複分をゼロにした上で、ここの上パディングも90px→45pxに縮め、体感で約半分にする */
.service-intro-inner { padding: 90px 32px 40px; }
@media (max-width: 640px) {
  .service-detail-list { padding-top: 0; }
  .service-intro-inner { padding-top: 45px; }
}
/* 動画制作ページ限定：Seedance生成の背景動画付きバリエーション(2026-08-31追加)。
   他ページも共有する.service-detail-listの基本スタイルは変更せず、モディファイアで上書きする */
.service-detail-list--video-bg {
  position: relative;
  overflow: hidden;
  background: #0d0b08;
}
.service-detail-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.service-detail-bg-video-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, rgba(13, 11, 8, 0.74) 0%, rgba(13, 11, 8, 0.6) 45%, rgba(13, 11, 8, 0.8) 100%);
}
.service-detail-list--video-bg .eyebrow { color: var(--gold-light); }
.service-detail-list--video-bg .pain-tags-label--lg { color: var(--paper); }
.service-detail-list--video-bg .pain-tags-label { color: rgba(250, 249, 246, 0.65); }
.service-detail-list--video-bg .pain-tag {
  color: rgba(250, 249, 246, 0.85);
  background: rgba(250, 249, 246, 0.1);
  border-color: rgba(250, 249, 246, 0.22);
}
.service-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center;
  max-width: var(--container);
  margin: 0 auto;
  padding: 90px 32px;
}
.service-detail:nth-of-type(even) { background: var(--paper-alt); }
.service-detail:nth-of-type(even) .service-detail-media { order: 2; }
.service-detail-media { position: relative; }
.service-detail-text .service-panel-number {
  position: static;
  display: block;
  margin-bottom: 10px;
  color: var(--gold-deep);
}
.service-detail-text .eyebrow { margin-bottom: 8px; }
.service-detail-text h2 { margin-bottom: 20px; }
.service-detail-text p { color: var(--text-muted); margin: 0 0 18px; }
.service-detail-list-inline {
  margin: 22px 0 28px;
  display: grid;
  gap: 12px;
}
.service-detail-list-inline li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.92rem;
  color: var(--ink-soft);
}
.pain-tags {
  margin: 0 0 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pain-tags-label {
  width: 100%;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 4px;
}
/* 動画制作ページ限定：eyebrow(英字)+大きめ見出しの形式に(2026-08-28追加。既存の
   .pain-tags-labelは他ページでも使うため変更せず、モディファイアで上書きする) */
.pain-tags-label--lg {
  /* 「選ばれる理由」等のsection-head h2と同じサイズに揃える(2026-08-28) */
  font-size: clamp(1.9rem, 3.6vw, 2.8rem);
  line-height: 1.28;
  letter-spacing: -0.01em;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 14px;
}
.pain-tag {
  font-size: 0.82rem;
  color: var(--ink-soft);
  background: var(--paper-alt);
  border: 1px solid var(--line);
  padding: 6px 14px;
  border-radius: 100px;
}
.service-detail-list-inline li::before {
  content: "";
  flex: 0 0 auto;
  width: 6px; height: 6px;
  margin-top: 8px;
  border-radius: 50%;
  background: var(--gold);
}

/* 斜めスライドイン・ステージング（複数写真） */
.stagger-photos {
  position: relative;
  height: 380px;
}
.stagger-photo {
  position: absolute;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.stagger-photo.is-visible { opacity: 1; }
.stagger-photo--1 {
  width: 68%; height: 320px;
  top: 0; left: 0;
  z-index: 2;
  transform: translate(-46px, 34px) rotate(-7deg);
  transition-delay: 0.05s;
}
.stagger-photo--1.is-visible { transform: translate(0, 0) rotate(-2deg); }
.stagger-photo--2 {
  width: 56%; height: 240px;
  right: 0; bottom: 0;
  z-index: 1;
  transform: translate(50px, -30px) rotate(9deg);
  transition-delay: 0.2s;
}
.stagger-photo--2.is-visible { transform: translate(0, 0) rotate(3deg); }

@media (max-width: 1024px) {
  .service-detail { grid-template-columns: 1fr; gap: 40px; padding: 70px 32px; }
  .service-detail:nth-of-type(even) .service-detail-media { order: 0; }
  .stagger-photos { height: 300px; }
}
@media (max-width: 640px) {
  .service-detail { padding: 56px 22px; }
  .stagger-photos { height: 240px; }
  .stagger-photo--1 { width: 72%; height: 200px; }
  .stagger-photo--2 { width: 58%; height: 160px; }
}

/* ===========================================================
   05. ピン留め画像＋切り替わるテキスト
   =========================================================== */
.sticky-showcase {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 70px;
  padding: 20px 32px 40px;
}
/* 事業案内のショーケード、ページヒーロー直後にほぼ余白なく写真・文章とも上に張り付いて
   始まってしまい見にくいというFB(2026-07-29)。開始位置に余白を足して、画像とテキストが
   一旦画面中央付近で落ち着いてからスクロールし始める体感にする。
   このsectionはページヒーローと隙間なく直接隣接するため、この値がそのまま実際の
   「ページヒーロー〜最初のテキスト」間の余白になる。
   その後「ページヒーローとの間があきすぎ、-100pxくらいで」というFB(2026-07-30)を受けて
   220px→120pxに縮小。会社概要側のMESSAGE(.glance--standalone、padding-top:100px＋
   この.sticky-showcase自身のpadding-top:20px＝合計120px)と同じ合計値になるよう揃える
   （※このsectionには data-reveal を付けているため、Puppeteerでバックグラウンドタブの
   まま getBoundingClientRect() で計測すると reveal 用 transform:translateY(28px) が
   解除されずに残り、実際より28px下にズレて見える計測アーティファクトがある。数値を
   検証する時は offsetTop ベースで確認すること） */
#showcase.sticky-showcase { padding-top: 120px; }
/* ページヒーロー〜最初の画像までの空きが240pxとかなり広かったため、河合さんFB(2026-09-25)
   「一番始めの画像の上のスペースを-150pxして」を受けて150px詰める。paddingは負の値を
   指定できないため、セクションごとmargin-topで引き上げる方式にする（会社概要MESSAGEとの
   合計値を揃える、という上のコメントの意図とはここで分岐する） */
#showcase.sticky-showcase { margin-top: -150px; }
/* 会社概要のMESSAGE写真だけ、画面中央あたりまでスクロールしたらそこでくっついてほしい
   というFB(2026-07-29)。事業案内のshowcaseには影響させないよう.message-showcase限定にする。
   transform:translateY(-50%)で見た目だけ中央にずらす方式は、stickyの「動ける範囲」の判定に
   transformが反映されないため、overflow:visible化した際に前のセクション(page-hero)へ
   はみ出して見える不具合の原因になっていた。transform無しの素直なtop指定に変更して解消 */
.message-showcase .sticky-showcase-media {
  top: 15vh;
}
.sticky-showcase-media {
  position: sticky;
  top: 110px;
  height: fit-content;
  /* 写真の存在感が弱いというFBを受け、横長4:3→縦長3:4に変更(2026-07-28)。
     動画(Seedance生成想定)に差し替える場合もこの比率のまま使う */
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--ink);
  box-shadow: var(--shadow-card);
}
.sticky-showcase-media img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 0.8s var(--ease);
}
.sticky-showcase-media img.is-current {
  opacity: 1;
  animation: showcase-kenburns 13s ease-in-out infinite alternate;
}
@keyframes showcase-kenburns {
  0% { transform: scale(1) translate(0, 0); }
  100% { transform: scale(1.08) translate(-1.5%, -1%); }
}

/* 進捗ドット（今どの事業を見ているか） */
.showcase-progress {
  position: absolute;
  left: 22px; bottom: 22px;
  z-index: 2;
  display: flex;
  gap: 16px;
  align-items: center;
}
.showcase-progress span {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.78rem;
  color: rgba(250, 249, 246, 0.38);
  transition: color 0.35s var(--ease), transform 0.35s var(--ease);
}
.showcase-progress span.is-current { color: var(--gold-light); transform: scale(1.35); }
.sticky-showcase-list { display: flex; flex-direction: column; gap: 0; }
.sticky-showcase-item {
  padding: 64px 0;
  border-bottom: 1px solid var(--line);
  opacity: 0.35;
  transition: opacity 0.4s var(--ease);
}
.sticky-showcase-item:first-child { padding-top: 8px; }
.sticky-showcase-item.is-current { opacity: 1; }
/* 事業案内の6事業ショーケード、各項目の滞在時間(スクロール距離)が短く、出てきたと思ったら
   すぐ次の項目に切り替わってしまい読みにくいというFB(2026-07-30)。IntersectionObserverの
   判定帯(rootMargin:-45%/-45%、画面中央の10%)を通過している間だけis-currentになる仕組み上、
   「is-currentでいられるスクロール距離 ≒ そのitemの高さ」になる。padding上下を64px→220pxに
   広げてitem自体の高さを底上げし、1項目あたりの滞在スクロール距離を伸ばす */
/* 220pxのpaddingだけで滞在時間を伸ばすと、文章の前後に「何も表示されない空白ゾーン」が
   できてしまい「見たら何も表示されなくなった」というFB(2026-07-30)に繋がった。paddingで
   間延びさせるのではなく、テキスト自体(.showcase-item-text)をitem内でposition:stickyにして、
   スクロール中も画面内の同じ位置に留まり続けるようにする。写真(.sticky-showcase-media)が
   ショーケース全体に対してstickyなのと同じ理屈を、テキストにも項目単位で適用するイメージ */
#showcase .sticky-showcase-item {
  /* min-heightがそのまま「1項目にとどまる=次に切り替わるまでのスクロール量」になる。
     90vhだと切り替わりが遅すぎるとのFB(2026-08-28)を受けて70vhに短縮 */
  min-height: 70vh;
  padding: 0;
}
#showcase .showcase-item-text {
  position: sticky;
  /* 写真(.sticky-showcase-media)のsticky top(110px)と揃えて、文字の開始位置が写真より
     下にずれて見える違和感を解消（2026-07-30、河合さんFB「文字の方が画像に対して少し下」） */
  top: 110px;
}
/* 写真の下に余白が余って中途半端に切れて見えるというFB(2026-07-30、「したが出てない状態だと
   違和感がある」)。3:4固定比率をやめ、画面の高さに合わせて伸縮するようにする
   （sticky top:110pxと対になる下110px分を差し引いた高さ） */
#showcase .sticky-showcase-media {
  height: calc(100vh - 220px);
  aspect-ratio: unset;
}
/* 会社概要MESSAGEの最後の項目(代表挨拶の締め・署名)、写真が画面中央に来た状態のまま
   読み切れず、写真が離れていってしまうFB(2026-07-29)。最後の項目だけ下に余白を足して
   スクロール尺を伸ばし、写真が中央に留まっている間に読み終えられるようにする */
.message-showcase .sticky-showcase-item:last-child { padding-bottom: 24vh; }
.sticky-showcase-item .service-panel-number { position: static; display: block; margin-bottom: 10px; color: var(--gold-deep); font-size: 1.5625rem; }
.sticky-showcase-item h2 { margin-bottom: 16px; }
.sticky-showcase-item p { color: var(--text-muted); margin: 0 0 16px; }

.showcase-item-thumb {
  display: none;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--radius-md);
  margin-bottom: 20px;
}
/* .showcase-item-thumbは事業案内(#showcase、横長のdetail画像)と会社概要MESSAGE
   (.message-showcase、縦長3:4の実写真)で共有しているクラス。会社概要側の写真は
   デスクトップの.sticky-showcase-mediaと同じ3:4で撮影されているのに、モバイルだけ
   16:10(横長)で切り抜かれてしまい人物や建物が大きく欠けていた(2026-09-24、河合さんFB)。
   事業案内側の横長画像には影響させないよう.message-showcase限定で3:4に変更する */
.message-showcase .showcase-item-thumb { aspect-ratio: 3 / 4; }

/* タブレット・スマホでは「画面固定＋切り替え」の代わりに、各項目自身に画像を1枚ずつ持たせる
   （固定画像を1箇所にまとめる方式だと、2つ目以降の項目までスクロールした時点で
   　画像が画面外に取り残されて見えなくなるため。2026-07-10発見） */
@media (max-width: 1024px) {
  .sticky-showcase { grid-template-columns: 1fr; }
  .sticky-showcase-media { display: none; }
  .showcase-item-thumb { display: block; }
  .sticky-showcase-item { opacity: 1; padding: 40px 0; }
  /* デスクトップ専用のsticky滞在演出(min-height:90vh・.showcase-item-textのposition:sticky)は
     モバイルでは無効化し、通常の縦積みレイアウトに戻す。
     #showcaseのID指定(padding:0)がメディアクエリの内外に関わらず勝ってしまうため、
     ここでも同じ#showcase指定でpaddingを明示的に戻す必要がある */
  #showcase .sticky-showcase-item { min-height: auto; padding: 40px 0; }
  #showcase .showcase-item-text { position: static; top: auto; }
}

/* ===========================================================
   ご依頼の流れ（プロセス図）
   =========================================================== */
.process { background: var(--paper-alt); position: relative; overflow: hidden; }
/* .morph-shape-bg(position:fixed, z-index:0)の上に文章が埋もれないよう、会社概要の
   .company-dataと同じくコンテンツ側を明示的に前面へ(2026-07-30、TOP/会社概要に続き
   事業案内にも「でかい物体」を追加) */
.process > .section-head, .process > .process-steps { position: relative; z-index: 1; }

/* SEO・MEO対策ページ限定：実績カード2枚・自社ツール紹介2枚のグリッド。
   従来インラインstyleで直書きされておりモバイル対応が無く、スマホでも2カラムのまま
   縮こまって読みにくくなっていた(2026-09-24、河合さんFB)。クラス化してモバイル用の
   1カラム化を`@media (max-width: 640px)`側にまとめて定義する */
.meo-results-grid { max-width: var(--container); margin: 0 auto; padding: 0 32px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.meo-tools-grid { max-width: var(--container); margin: 0 auto; padding: 0 32px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
.process-steps {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
}
/* 個別サービスページ(WEB制作・動画制作・広告運用・SEO/MEO・AIコンサル)は4項目構成なのに、
   事業案内ハブページ(5項目)向けのrepeat(5,1fr)をそのまま共有していたため、5列目ぶんの
   空白が右側に残り、4枚のカード全体が左に寄って見えるバグがあった(2026-08-28発見)。
   4項目のページ側にこのモディファイアを付けて専用の列数にする */
.process-steps--4up { grid-template-columns: repeat(4, 1fr); }
.process-steps--3up { grid-template-columns: repeat(3, 1fr); }
/* 黒背景セクションに置く場合、カードの白背景箱をやめて文字色を明るくするバリアント
   (2026-09-08、service-ai.html「支援できる領域の例」で使用。「白枠なしで、文字の色を
   白にする」との河合さんFB) */
.process-steps--on-dark .process-step { background: transparent; box-shadow: none; }
.process-steps--on-dark .process-step-icon { background: rgba(217, 180, 114, 0.14); color: var(--gold-light); }
.process-steps--on-dark .process-step h3 { color: var(--paper); }
.process-steps--on-dark .process-step p { color: rgba(250, 249, 246, 0.75); }
/* アイコン付きの項目カード(数字ステップではなく並列の特徴紹介用、2026-08-28追加) */
.process-step-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: rgba(184, 134, 60, 0.12);
  color: var(--gold-deep);
}
.process-step {
  position: relative;
  background: var(--card);
  border-radius: var(--radius-md);
  padding: 32px 22px;
  text-align: center;
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
/* data-reveal="left"を各カードに個別付与すると、.is-visible時のtransform（identity値でも）が
   各カードごとに新しいスタッキングコンテキストを作ってしまい、右にはみ出す矢印(::after)が
   次のカードの背景の下に隠れて見えなくなる(2026-09-08、河合さんFB「矢印がきえた」で発覚。
   同じ構造のservice.html/service-web.htmlでも同様に矢印が消えていたことが判明した潜在バグ)。
   左のカードほど手前に来るよう明示的に降順のz-indexを振って解決する */
.process-step:nth-child(1) { z-index: 6; }
.process-step:nth-child(2) { z-index: 5; }
.process-step:nth-child(3) { z-index: 4; }
.process-step:nth-child(4) { z-index: 3; }
.process-step:nth-child(5) { z-index: 2; }
.process-step:nth-child(6) { z-index: 1; }
/* 画面上端から完全に出て行ったら右にまとまって消える退場演出(2026-07-30)。
   data-reveal="left"の入場(左からtranslateX(-48px)→0)と対になる、逆方向の退場 */
.process-step.is-leaving {
  opacity: 0;
  transform: translateX(48px);
}
.process-step-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--gold);
  margin-bottom: 12px;
}
.process-step h3 { font-size: 1rem; margin-bottom: 8px; }
.process-step p { font-size: 0.85rem; color: var(--text-muted); margin: 0; }
.process-step:not(:last-child)::after {
  content: "\2192";
  position: absolute;
  top: 50%; right: -18px;
  transform: translateY(-50%);
  color: var(--gold);
  font-size: 1.1rem;
  z-index: 1;
}
@media (max-width: 860px) {
  .process-steps { grid-template-columns: 1fr; gap: 14px; }
  .process-step:not(:last-child)::after { content: "\2193"; top: auto; bottom: -18px; left: 50%; right: auto; transform: translateX(-50%); }
}
/* AI動画活用の4項目は順番通りの「流れ」ではなく並列の特徴紹介なので、矢印は不要(2026-08-28) */
.process-steps--no-arrows .process-step::after { content: none; }

/* ===========================================================
   お客様から選ばれる理由（TOP専用。serverless.co.jp/features/参考に刷新・2026-07-22）
   番号+大見出し+キーワードハイライトの縦積み、常時ゆっくり動く背景で「パワー」を出す
   =========================================================== */
/* 背景は#storyBgが担当（2026-07-22、未来を共に〜数字で見るRUNBIRDまで1枚の背景に統合） */
.why-us { background: transparent; position: relative; overflow: hidden; }
.why-us > .section-head, .why-us > .why-us-list { position: relative; z-index: 1; }
/* このセクションの背景は#storyBgにより常に真っ白なので、文字色はスクロールで切り替えず
   最初から濃い色で固定する(2026-07-27、河合さん指示：白→黒に変わる「効果」自体が不要) */
.why-us .eyebrow { color: var(--gold-deep); }
.why-us .section-head h2 { color: var(--ink); }
@media (max-width: 860px) {
  /* 「お客様から／選ばれる理由」の2行化にあわせて、見出し下の余白を64px→34pxに詰める
     (2026-09-25、河合さんFB「下のスペースを-30px」)。.section-head自体は全ページ共通の
     クラスのため、ここは.why-us限定でスコープする */
  .why-us .section-head { margin-bottom: 34px; }
}
.why-us-list {
  max-width: var(--container);
  margin: 0 auto;
}
/* PKSHA「This is Enterprise AI in Japan」統計セクションのタイポグラフィ階層
   （小さい大文字ラベル→太い見出し→説明文→細い区切り線）を参考に刷新（2026-07-22） */
.why-us-row {
  padding: 36px 0;
  border-top: 1px solid rgba(26, 22, 15, 0.12);
}
.why-us-row:last-child { border-bottom: 1px solid rgba(26, 22, 15, 0.12); }
/* PKSHA実サイトのCLIENTSラベル/見出し/本文をgetComputedStyleで実測し、その数値をそのまま採用（2026-07-22）：
   ラベル13px/weight500/letter-spacing0.65px、見出し20px/weight700/letter-spacing1.6px/line-height1.0、
   本文14px/weight400/letter-spacing0.7px/line-height1.6。PKSHAは色が寒色グレーだが、色だけ
   RUNBIRDのゴールド×ダークに置き換え、数値(サイズ・太さ・字間・行間)はそのまま踏襲する */
.why-us-label {
  margin: 0 0 10px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.65px;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.why-us-heading {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 1.6px;
  font-size: 20px;
  line-height: 1.3;
  color: var(--ink);
}
.why-us-desc {
  margin: 0;
  max-width: 560px;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.7px;
  line-height: 1.6;
  color: rgba(26, 22, 15, 0.62);
}
.why-us-mark {
  display: inline-block;
  background: var(--gold);
  color: var(--ink);
  padding: 2px 14px;
  margin: 0 2px;
}
/* 個別サービスページのカルーセル版は帯ハイライトなしのプレーンな文字色に(2026-08-28)。
   TOPの縦積みリスト版は帯付きのまま維持するので、ここはカルーセル限定で上書きする */
.why-us-list--grid .why-us-mark {
  display: inline;
  background: none;
  color: var(--gold-deep);
  padding: 0;
  margin: 0;
  /* 「オーダーメイド」のような単語の途中で改行されるのを防ぐ。行の折り返し自体は
     問題なく、マーク単位が割れて見えるのだけを避ける(2026-08-28、河合さんFB) */
  white-space: nowrap;
}
@media (max-width: 720px) {
  .why-us-row { padding: 28px 0; }
}

/* 個別サービスページ用：Appleのipad紹介ページ(apple.com/jp/ipad/)を参考にした
   横スクロール+スナップのカルーセル版(2026-08-28。当初3列グリッドで組んだが
   「Appleのこの見せ方がいい」というFBを受けてカルーセルに作り直した)。
   TOPの.why-us(縦積みリスト)には影響しない、個別ページ限定のモディファイア */
.why-us--carousel { background: var(--paper-alt); }
/* カード列が親のmax-width(コンテナ幅)に閉じ込められて画面端まで届かない、というFB
   (2026-08-28)を受けてフルブリード化。works-carousel-wrapと同じ考え方 */
.why-us-carousel-wrap {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
}
.why-us-list--grid {
  /* 縦積みリスト版(TOP)の基本クラス.why-us-listが持つmax-width+margin:0 autoが
     このカルーセル版にも効いたままで、フルブリードのwrapの中でさらに中央寄せされ
     直してしまっていた(2026-08-28発見)。ここで明示的に打ち消す */
  max-width: none;
  margin: 0;
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  /* overflow-x:autoを指定するとoverflow-yも自動的にautoになりY軸方向もクリップされるため、
     4pxだと.why-us-row自身のbox-shadow(--shadow-card、下方向に約22px分見える)が
     途中でバッサリ切れて見えていた(2026-09-25、河合さんFB「全ページの選ばれる理由カードの
     下のシャドウがばっつん切れてる」)。影が完全に収まる余裕を持たせて32pxに拡張 */
  padding-bottom: 32px;
  scrollbar-width: none;
}
.why-us-list--grid::-webkit-scrollbar { display: none; }
/* scroll-snap-type:mandatoryが読み込み時に余白ぶんを自動で相殺してしまう問題への対処。
   works-list-spacerと同じ考え方(2026-08-28) */
/* 右端も左端(.why-us-list-spacer)と同じ可変幅のダミー要素で余白を揃える。固定32pxの
   margin-rightだと画面幅が広いほど左端の余白との差が開いてしまっていた
   (2026-09-24、TOPの.works-listで直したのと同じ問題。カードを使う全カルーセルに横展開) */
.why-us-list-spacer { flex: 0 0 max(44px, calc((100vw - var(--container)) / 2 + 12px)); scroll-snap-align: start; }
.why-us-list--grid .why-us-row {
  flex: 0 0 320px;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  padding: 28px 24px;
  background: var(--paper);
  border: none;
  border-radius: var(--radius-lg, var(--radius-md));
  box-shadow: var(--shadow-card);
}
.why-us-list--grid .why-us-row:last-child { border-bottom: none; }
@media (max-width: 720px) {
  .why-us-list--grid .why-us-row { flex-basis: 82vw; scroll-snap-align: center; }
}
/* 写真を入れる予定の箇所の仮グレーボックス(2026-08-28追加。実素材ができ次第差し替え) */
.why-us-row-media {
  aspect-ratio: 4 / 3;
  background: var(--paper-alt);
  border: 1px solid rgba(26, 22, 15, 0.08);
  border-radius: var(--radius-md);
  margin-bottom: 18px;
  overflow: hidden;
}
.why-us-list--grid .why-us-row .why-us-row-media { background: rgba(26, 22, 15, 0.06); }
.why-us-row-media img { width: 100%; height: 100%; object-fit: cover; display: block; }


/* カルーセルの矢印ボタン(Apple版と同じく右下に配置) */
.why-us-carousel-nav {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
  /* カード列と同じくwrapがフルブリード(100vw)になったので、矢印だけ画面の真端に
     張り付かないよう右側にコンテナ相当のガターを確保する(2026-08-28) */
  padding-right: max(32px, calc((100vw - var(--container)) / 2));
}
/* 選ばれる理由カルーセル直後のセクションは、双方のpadding(130px×2)が単純加算されて
   288px前後の余白になり間延びして見えていた(2026-09-01、河合さんFB)。
   「仲間じゃないブロック同士」の目安レンジ(100〜150px)に収まるよう、直後セクションの
   上パディングだけを引き締める */
.why-us--carousel + section {
  padding-top: 40px;
}
.why-us-carousel-btn {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(26, 22, 15, 0.18);
  background: var(--paper);
  color: var(--ink);
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.why-us-carousel-btn:hover { background: var(--gold); border-color: var(--gold); color: var(--paper); }

/* 背景は#storyBgにより選ばれる理由〜数字で見るRUNBIRDの間ずっと真っ白なので、
   スクロールで切り替える「効果」は使わず、最初から濃い色で固定する(2026-07-27、河合さん指示)。
   .stat-label/.stat-tileは会社概要・採用情報ページの.statsとも共有するクラスのため、
   ここでは.stats--story配下だけに絞って上書きする */
.stats--story .eyebrow { color: var(--gold-deep); }
/* 数字で見るRUNBIRDのスナップ着地位置だと、見出しが固定ヘッダーナビの裏に少し隠れて
   選択できなくなっていたため、COMPANYラベルと同じ理由で上に余白を足す(2026-07-27) */
.stats--story .section-head { margin-top: -20px; }
.stats--story .section-head h2 { color: var(--ink); }
.stats--story .stat-label { color: rgba(26, 22, 15, 0.6); }
.stats--story .stat-tile { border-color: rgba(26, 22, 15, 0.12); }


/* ===========================================================
   07. カウントアップ数字（数字で見るRUNBIRD）
   =========================================================== */
.stats { background: var(--ink); color: var(--paper); position: relative; overflow: hidden; }
.stats > .section-head, .stats > .stats-grid { position: relative; z-index: 1; }
/* serverless.co.jp参考：常時ゆっくり動く背景で数字セクションに力強さを出す(2026-07-22) */
.stats::before {
  content: "";
  position: absolute; inset: -20%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(600px circle at 80% 15%, rgba(184, 134, 60, 0.2), transparent 60%),
    radial-gradient(520px circle at 10% 85%, rgba(217, 180, 114, 0.16), transparent 65%);
  animation: whyUsDrift 18s ease-in-out infinite alternate-reverse;
}
@keyframes whyUsDrift {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(4%, -3%) scale(1.08); }
}
/* TOP（index.html）のみ：背景は#storyBgが担当するため、この個別セクションの背景・アンビエントは無効化する
   (2026-07-22、未来を共に〜数字で見るRUNBIRDまで1枚の背景に統合。company.html/recruit.htmlの.statsは
   このクラスを持たないため従来どおりの個別背景のまま) */
.stats--story { background: transparent; }
.stats--story::before { content: none; }
.stats-map {
  position: absolute; top: 50%; left: 6%; transform: translateY(-50%);
  width: min(480px, 40vw); height: auto; z-index: 0; pointer-events: none;
  opacity: 0.9;
}
/* PKSHA実サイトの「極めて淡い同心円の波紋」を再現。線・ラベルは足さず、控えめに保つ(2026-07-22) */
.stats-map-ripple { fill: none; stroke: rgba(250, 249, 246, 0.1); stroke-width: 1; }
.stats-map-dot { fill: var(--gold-light); }
.stats-map-label {
  fill: rgba(217, 180, 114, 0.55); font-size: 11px;
  font-family: var(--font-body); font-weight: 500;
}
@media (max-width: 960px) {
  .stats-map { display: none; }
}
.stats-grid {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  /* auto-fitに変更（2026-07-22）：4タイル(会社概要/採用情報)・5タイル(TOP)どちらでも列数が自動調整される */
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 4px;
}
.stat-tile {
  padding: 48px 24px;
  text-align: center;
  border-left: 1px solid rgba(250,249,246,0.12);
}
.stat-tile:first-child { border-left: none; }
.stat-num {
  font-family: var(--font-display);
  font-weight: 800;
  /* serverless.co.jp参考：数字の「パワー」を出すため大幅に拡大(2026-07-22、旧clamp(2.2rem,4vw,3.2rem)) */
  font-size: clamp(3rem, 6.4vw, 5.2rem);
  letter-spacing: -0.02em;
  color: var(--gold-light);
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
}
.stat-unit { font-size: 1.3rem; font-weight: 600; }
.stat-label { margin-top: 10px; font-size: 0.85rem; color: rgba(250,249,246,0.6); }
@media (max-width: 860px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-tile { border-left: none; border-top: 1px solid rgba(250,249,246,0.12); }
  .stat-tile:nth-child(1), .stat-tile:nth-child(2) { border-top: none; }
  /* 「数字で見るRUNBIRD」(TOP・会社概要、5タイル)は2カラムだと2+2+1で最後の1枚だけ
     浮いて見えるため、河合さんFB(2026-09-24)「本文は1カラムにしよ」を受けて1カラムに変更。
     採用情報の「4拠点で、働ける。」(4タイル・2×2で割り切れる)は対象外にするため
     .stats--numbersという専用クラスをTOP/会社概要側にだけ付けて区別する */
  .stats--numbers .stats-grid { grid-template-columns: 1fr; }
  .stats--numbers .stat-tile { border-top: 1px solid rgba(250,249,246,0.12); }
  .stats--numbers .stat-tile:first-child { border-top: none; }
  /* 1カラム化に伴い、各タイルの上下48pxパディングがそのまま項目間の空きとして積み重なり、
     間延びして見えていた(2026-09-25、河合さんFB「各内容同士のスペースが空きすぎてるから
     1/3くらいまで減らして」)。TOP・会社概要共通の.stats--numbersだけ16pxに詰める
     （採用情報の2×2グリッドは対象外のためこれまで通り48px） */
  .stats--numbers .stat-tile { padding: 8px 24px; }
  /* 見出し「数字で見るRUNBIRD」下端〜最初の数字上端が72px(section-headの共通margin-bottom
     64px＋タイル自身のpadding-top 8px)だったのを、河合さんFB(2026-09-25)で60pxに指定。
     タイル側は他のタイル間隔と揃えたままにしたいため、section-head側のmargin-bottomだけ
     52pxに削って調整する(52+8=60) */
  .stats--numbers .section-head { margin-bottom: 52px; }
}

/* ===========================================================
   沿革（年表）
   =========================================================== */
.timeline { max-width: 760px; margin: 0 auto; }
.timeline-item {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 24px;
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
}
.timeline-year { font-family: var(--font-display); font-weight: 700; color: var(--gold-deep); }
.timeline-text { color: var(--ink-soft); }

/* ===========================================================
   メンバー紹介
   =========================================================== */
.members-grid {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
}
.member-card { text-align: center; }
.member-photo {
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 16px;
  background: var(--paper-alt);
}
.member-photo img { width: 100%; height: 100%; object-fit: cover; }
.member-name { font-weight: 600; font-size: 0.98rem; }
.member-role { font-size: 0.82rem; color: var(--text-muted); margin-top: 4px; }
@media (max-width: 860px) { .members-grid { grid-template-columns: repeat(2, 1fr); } }

/* ===========================================================
   08. カード3Dチルト
   =========================================================== */
.tilt-card {
  transform-style: preserve-3d;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
  will-change: transform;
}
.tilt-card.is-tilting { transition: none; }
.tilt-card:hover { box-shadow: var(--shadow-card); }

/* ===========================================================
   採用情報：職種カード
   =========================================================== */
.recruit-roles { background: var(--paper); }
.recruit-role {
  max-width: calc(var(--container) - 64px);
  margin: 0 auto 26px;
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 32px;
  align-items: center;
  padding: 34px 32px;
  background: var(--card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.recruit-role-num { font-family: var(--font-display); font-weight: 700; font-size: 2rem; color: var(--gold); text-align: center; }
.recruit-role-head { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.recruit-role h3 { margin: 0; }
.recruit-role p { margin: 0; color: var(--text-muted); max-width: 640px; }
.recruit-role-tag {
  flex: 0 0 auto;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--gold-deep);
  background: rgba(184,134,60,0.1);
  padding: 5px 12px;
  border-radius: 100px;
}
@media (max-width: 640px) {
  .recruit-role { grid-template-columns: 1fr; text-align: center; padding: 28px 22px; }
  /* 番号・職種名・タグは中央寄せのままにしつつ、本文の説明文だけは各行が個別に中央寄せされて
     ガタガタに見えるため左揃えに戻す(2026-09-25、河合さんFB「本文は両端揃えの左揃えに」) */
  .recruit-role p { text-align: left; }
}
.recruit-roles-cta { max-width: calc(var(--container) - 64px); margin: 8px auto 0; text-align: center; }

/* ===========================================================
   アクセス：地図＋拠点カード
   =========================================================== */
.access-map { padding: 40px 32px 0; }
.map-frame {
  max-width: calc(var(--container) - 64px);
  margin: 0 auto;
  height: 420px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.offices { background: var(--paper); }
.offices-grid {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px;
}
.office-card {
  padding: 34px 30px;
  background: var(--card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.office-label {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--gold-deep);
  margin-bottom: 10px;
  display: block;
}
.office-card h3 { margin-bottom: 12px; }
.office-address { color: var(--text-muted); font-size: 0.92rem; line-height: 1.8; margin: 0; }
@media (max-width: 860px) { .offices-grid { grid-template-columns: 1fr; } }

/* ===========================================================
   会社概要：データテーブル
   =========================================================== */
.company-data { background: var(--paper-alt); position: relative; overflow: hidden; }
.company-data > .section-head, .company-data > .data-table { position: relative; z-index: 1; }

/* ===========================================================
   幾何学モーフィング背景オブジェクト（三角形→六角形→四角形→八角形と
   スクロールに応じて滑らかに変形しつつ、常時ゆっくり回転し続ける立体的な装飾。
   2026-07-29、河合さん指示。会社概要の代表挨拶・会社情報セクションの背景に使用） */
.morph-shape-bg {
  /* position:absoluteだとセクション内の1点に固定されてスクロールで通り過ぎてしまうため、
     position:fixedにしてスクロール中も画面上に居続けるようにする(2026-07-29、河合さんFB
     「スクロールに合わせてついてきてほしい」)。表示/非表示はJS側で該当セクションが
     画面内にある間だけopacityを出す形で制御する */
  position: fixed;
  /* top:50%+translateY(-50%)だと箱が大きい分、上端がヘッダー(高さ約190px)に食い込んでいた
     (2026-07-29、河合さんFB)。ヘッダーより確実に下から始まる固定オフセットにする */
  top: 220px;
  z-index: 0;
  pointer-events: none;
  width: min(1500px, 130vw);
  height: min(1500px, 130vw);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
.morph-shape-bg.is-in-view { opacity: 0.85; }
.morph-shape-bg--right { right: -18%; }
.morph-shape-canvas { width: 100%; height: 100%; display: block; }
@media (max-width: 860px) {
  .morph-shape-bg { display: none; }
}
/* 会社概要データテーブルの上に東京本社(晴海トリトンスクエア)の実写真を添える(2026-07-29) */
.outline-photo {
  position: relative;
  z-index: 1;
  max-width: calc(var(--container) - 64px);
  margin: 0 auto 48px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.outline-photo img {
  display: block;
  width: 100%;
  /* 実写真(toriton-rs2.jpg)の元比率にあわせて枠を65:24に指定(2026-09-24、河合さん指示) */
  aspect-ratio: 65 / 24;
  object-fit: cover;
}
.data-table {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
  border-top: 1px solid var(--line);
}
.data-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 24px;
  padding: 22px 4px;
  border-bottom: 1px solid var(--line);
}
.data-label { font-weight: 600; color: var(--gold-deep); font-size: 0.9rem; }
.data-value { color: var(--ink-soft); line-height: 1.8; }
@media (max-width: 640px) {
  .data-row { grid-template-columns: 1fr; gap: 6px; }
}

/* ===========================================================
   お問い合わせ：フォーム＋FAQ
   =========================================================== */
.contact-section { background: var(--paper-alt); }
.contact-layout {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
}
.contact-form-card {
  background: var(--card);
  border-radius: var(--radius-lg);
  padding: 44px;
  box-shadow: var(--shadow-card);
  min-width: 0; /* CSS Gridアイテムのデフォルトmin-width:autoにより、モバイル幅で内部コンテンツの
                   最小幅ぶん親(.contact-layout)からはみ出し6px程度の横スクロールが発生していたのを解消（2026-09-30） */
}
.form-row { margin-bottom: 22px; }
.form-row label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 8px; }
.form-row input,
.form-row textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.95rem;
  background: var(--paper);
  transition: border-color 0.3s var(--ease);
}
.form-row input:focus, .form-row textarea:focus { outline: none; border-color: var(--gold); }
.form-required { color: var(--gold-deep); font-size: 0.72rem; margin-left: 6px; }
/* お問い合わせ種別（商品・サービス／採用）の2択トグル(2026-09-25、河合さんFB「お名前の上に
   選べるようにして」)。ネイティブのradio inputは非表示にし、隣接するspanをカード状に
   スタイリングして選択状態をgoldでハイライトする */
.form-choice-group { display: flex; gap: 12px; }
.form-choice { flex: 1; cursor: pointer; }
.form-choice input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}
.form-choice span {
  display: block;
  text-align: center;
  padding: 14px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink-soft);
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease), color 0.25s var(--ease);
}
.form-choice input:checked + span {
  border-color: var(--gold);
  background: rgba(184, 134, 60, 0.08);
  color: var(--gold-deep);
}
.form-choice input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (max-width: 480px) {
  .form-choice-group { flex-direction: column; }
}
.form-note { font-size: 0.8rem; color: var(--text-muted); margin: 0 0 24px; }
/* Contact Form 7が実際に生成するマークアップ用のスタイル(2026-10-01、本番QAで発覚：
   .form-rowは静的サイト時代のモックアップ用クラスでCF7の実出力には存在せず、
   入力欄がブラウザ標準の素のスタイルのまま表示されていた) */
.contact-form-card .wpcf7-form p { margin-bottom: 22px; }
.contact-form-card .wpcf7-form label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 8px; }
.contact-form-card .wpcf7-form-control.wpcf7-text,
.contact-form-card .wpcf7-form-control.wpcf7-textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.95rem;
  background: var(--paper);
  transition: border-color 0.3s var(--ease);
}
.contact-form-card .wpcf7-form-control.wpcf7-text:focus,
.contact-form-card .wpcf7-form-control.wpcf7-textarea:focus { outline: none; border-color: var(--gold); }
.contact-form-card .wpcf7-acceptance .wpcf7-list-item-label { font-size: 0.85rem; color: var(--text-muted); }
.contact-form-card .wpcf7-form-control.wpcf7-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 26px;
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
  font-weight: 600;
  background: var(--ink);
  color: var(--paper);
  border: none;
  cursor: pointer;
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}
.contact-form-card .wpcf7-form-control.wpcf7-submit:hover { background: var(--gold-deep); transform: translateY(-2px); }
.contact-form-card .wpcf7-not-valid-tip { color: #c0392b; font-size: 0.8rem; margin-top: 4px; display: block; }

.faq-list { display: flex; flex-direction: column; gap: 4px; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 4px;
  background: none;
  border: none;
  text-align: left;
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  font-family: var(--font-body);
}
.faq-q-mark { color: var(--gold); font-family: var(--font-display); }
.faq-icon {
  flex: 0 0 auto;
  font-size: 1.2rem;
  color: var(--gold-deep);
  transition: transform 0.35s var(--ease);
}
.faq-item.is-open .faq-icon { transform: rotate(45deg); }
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s var(--ease), padding 0.4s var(--ease);
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.8;
}
.faq-item.is-open .faq-a { padding-bottom: 22px; }
@media (max-width: 1024px) {
  .contact-layout { grid-template-columns: 1fr; gap: 50px; }
}

/* ===========================================================
   Responsive
   =========================================================== */
@media (max-width: 1024px) {
  .service-panels { height: 460px; }
  .glance-inner { grid-template-columns: 1fr; }
  .glance-mark { order: -1; }
  .glance-mark img { width: 180px; }
}

@media (max-width: 860px) {
  .main-nav, .btn-nav { display: none; }
  .menu-toggle { display: flex; }
  .br-sp { display: inline; }
  .br-pc { display: none; }
}

@media (max-width: 640px) {
  main > section { padding: 90px 22px; }
  .header-inner { padding: 16px 20px; }
  .news-list li { flex-wrap: wrap; gap: 10px; }
  .news-date { flex-basis: auto; }
  .hero { padding: 120px 22px 80px; }
  .service-panel { height: 190px; }
  .service-panel-content { margin-top: 100px; }
  /* 下層ページの.page-hero h1はclamp()の下限2.4rem(38.4px)がそのまま効いてしまい、
     <br>で改行を指定している見出し(例：service-meo.htmlの3行見出し)が、狭い画面幅では
     1行の中身が収まりきらずさらに折り返され、意図した行数より増えてしまっていた
     (2026-09-24、河合さんFB「SP版はタイトルを3行で表示できる文字サイズに」)。
     見出しの重み(font-weight)自体はh1本体のものを継承するので、ここではサイズだけ縮める */
  .page-hero h1 { font-size: clamp(1.9rem, 8.5vw, 2.4rem); }
  /* カルーセル(works-list-spacer/why-us-list-spacer)の左端固定44pxは、main > sectionの
     基本パディング32pxに対して合わせた値だった。ここ(640px以下)だけsection側が22pxに
     縮むため、見出し(.section-head h2)の開始位置(22+32=54px)とカードの開始位置(44+gap20=64px)が
     10pxズレて見えていた(2026-09-24、河合さんFB「カードの開始位置を文字に左合わせ」)。
     このブレイクポイントだけ floor を34pxに縮めて揃える(34+20=54) */
  .works-list-spacer, .why-us-list-spacer { flex-basis: 34px; }
  /* SEO・MEO対策ページの実績カード・自社ツール紹介グリッドを1カラムに(2026-09-24、
     河合さんFB「スマホは1カラムに」)。同じ問題(インラインstyleの2カラムグリッドが
     モバイル対応されていない)は site全体でこの2箇所のみだったため、ここに集約する */
  .meo-results-grid, .meo-tools-grid { grid-template-columns: 1fr; }
  /* お問い合わせフォームのカード(.contact-form-card)がpadding:44px固定のままで、
     スマホだとカード幅267pxに対して片側44px×2=88pxも余白に取られ、実質の使える幅が
     179pxしかなく窮屈だった(2026-09-25、河合さんFB「ご相談・お見積もり依頼がスマホだと
     ぎゅうぎゅう」)。他のモバイルカード類と揃えて28px 24pxに縮める */
  .contact-form-card { padding: 28px 24px; }
  /* .contact-layout自体の左右32pxも、他の1カラムセクション(main > section、640px以下で22px)より
     広めのまま固定されていたため、カードのpaddingを詰めた後もあわせて22pxに緩和する
     （河合さん「左右のマージンも緩和するかここだけ」、2026-09-25） */
  .contact-layout { padding: 0 22px; }
  /* 「ご相談・お見積り／を依頼する」を2行で揃えたいが(河合さんFB「二段でパソコンもスマホも」)、
     h2のclamp()下限30.4pxのままだと「ご相談・お見積り」(8文字)が実質幅239pxにわずかに
     収まりきらず、3行に増えてしまっていた。この見出しだけ少し縮めて2行に収める */
  .contact-form-card h2 { font-size: 1.7rem; }
}

/* ===========================================================
   TOP 3パターン比較モックアップ 専用スタイル（2026-07-13追加）
   mockup-patterns/pattern{1,2,3}.html でのみ使用
   =========================================================== */

/* --- 共通：COMPANY GLANCEに幾何学背景を追加 --- */
.glance--shapes { position: relative; overflow: hidden; }
.glance--shapes .glance-inner { position: relative; z-index: 1; }

/* --- パターン2：ピン留めなしの静的ステートメント --- */
.statement--static {
  height: auto;
  padding: 130px 32px;
  background: var(--paper);
}
.statement--static .statement-sticky {
  position: static;
  height: auto;
}
.statement--static .statement-line { opacity: 1; }
.statement--static .statement-accent { color: var(--gold); }

/* --- パターン2：SERVICES 常時表示・独立カード --- */
.service-flat-grid {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}
.service-flat-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--ink);
  background: var(--paper-alt);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.service-flat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
.service-flat-thumb {
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
}
.service-flat-body { padding: 20px 18px 22px; }
.service-flat-num {
  display: block;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--gold-deep);
  margin-bottom: 8px;
}
.service-flat-jp { display: block; font-weight: 700; margin-bottom: 8px; }
.service-flat-desc { margin: 0 0 12px; font-size: 0.82rem; line-height: 1.7; color: var(--text-muted); }
.service-flat-more { font-size: 0.78rem; font-weight: 600; color: var(--gold-deep); }
@media (max-width: 1024px) { .service-flat-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .service-flat-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }

/* --- パターン2：COMPANY＋RECRUIT 統合2段組 --- */
.company-recruit-split {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
}
.company-recruit-split .split-col p { color: var(--text-muted); margin: 16px 0 24px; }
@media (max-width: 860px) {
  .company-recruit-split { grid-template-columns: 1fr; gap: 40px; }
}

/* --- パターン3：SERVICES 常時「事業名＋1文目」＋ホバーで2文目 --- */
.service-panel-static {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 26px;
  z-index: 1;
}
.service-panel-static .service-panel-jp { display: block; font-size: 0.8rem; color: var(--gold-light); margin-bottom: 4px; }
.service-panel-static .service-panel-desc {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.6;
  color: rgba(250,249,246,0.92);
  max-width: 260px;
}
.service-panel-static { transition: opacity 0.3s var(--ease); }
.service-panel:hover .service-panel-static,
.service-panel:focus-visible .service-panel-static { opacity: 0; }

/* --teaser：デフォルトは非表示、ホバーで「事業名＋1文目＋2文目＋リンク」をまとめてクロスフェード表示 */
.service-panel-content--teaser {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 26px;
  z-index: 1;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s var(--ease) 0.1s, transform 0.4s var(--ease) 0.1s;
}
.service-panel:hover .service-panel-content--teaser,
.service-panel:focus-visible .service-panel-content--teaser {
  opacity: 1;
  transform: translateY(0);
}
.service-panel-desc-more { margin: 8px 0 10px; font-size: 0.84rem; line-height: 1.6; color: rgba(250,249,246,0.85); max-width: 300px; }

@media (hover: none) {
  .service-panel-content--teaser { position: static; opacity: 1; transform: none; }
  .service-panel-static { display: none; }
}

/* ===========================================================
   WPテーマ化：汎用固定ページ（page.php）のドキュメント調レイアウト
   spec.md「内側ページは白背景・黒文字・左揃えの落ち着いたドキュメント調」方針に基づく。
   /terms/配下の規約ページ等、専用テンプレートを持たないWP固定ページ全般に適用される。
   既存のカラートークン(--ink/--paper/--text-muted等)をそのまま流用し、新規の色は追加しない。
   =========================================================== */
.wp-page-content {
  max-width: 760px;
  margin: 0 auto;
  padding: 130px 32px;
  background: var(--paper);
  color: var(--ink);
  text-align: left;
}
.wp-page-content h1 {
  margin: 0 0 48px;
  font-size: clamp(1.9rem, 3.6vw, 2.6rem);
  line-height: 1.28;
  letter-spacing: -0.01em;
}
.page-prose {
  font-size: 1rem;
  line-height: 1.9;
  color: var(--ink-soft);
}
.page-prose h2 {
  margin: 56px 0 20px;
  font-size: 1.4rem;
  line-height: 1.5;
  color: var(--ink);
}
.page-prose h3 {
  margin: 40px 0 16px;
  font-size: 1.15rem;
  line-height: 1.5;
  color: var(--ink);
}
.page-prose p {
  margin: 0 0 24px;
}
.page-prose ul,
.page-prose ol {
  margin: 0 0 24px;
  padding-left: 1.4em;
}
.page-prose li {
  margin-bottom: 8px;
}
.page-prose a {
  color: var(--gold);
  text-decoration: underline;
}
.page-prose strong {
  color: var(--ink);
}

@media (max-width: 640px) {
  .wp-page-content {
    padding: 90px 22px;
  }
}