@charset "UTF-8";

/* ============================================================================
   TAILOR WORKS / TOPページ デザインカンプ v1
   ベース: tailorworks_wf_v5.html（WF確定版）
   設計言語: 現行テーマ（WP/tailor works）のブランド定義を継承

   目次
     01. デザイントークン
     02. リセット / ベース
     03. レイアウト（container / section / section-heading）
     04. パーツ: button / text-link / icon
     05. サイトヘッダー / グローバルナビ / モバイルメニュー
     06. ヒーロー（MV）
     07. 導入企業ロゴマーキー
     08. コンセプト
     09. オリジネーションエンジン
     10. オリジネーションサイクル図（PC/TB 円環・SP 縦フロー）
     11. 提供形態カード
     12. 利用シーン（ペルソナタブ / ステップ / 画面モック / 導入効果）
     13. データポリシー
     14. 導入メリット
     15. CTA帯
     16. 機能一覧
     17. ニュース
     18. コンタクト
     19. サイトフッター
     20. スクロールイン演出
     21. シングル記事共通（パンくず / 本文 / ナビ / CTA）
     22. アーカイブ一覧共通（事例 / イベント / ニュース / ページネーション）
     23. 固定ページ / 404

   ブレークポイント
     sm  640px … ペルソナタブを横並びへ
     md  768px … 主要な1カラム→2カラム切替。以降が「PCレイアウト」
     lg 1024px … グローバルナビ展開 / サイクル図を等倍表示
     xl 1280px … 機能一覧を4カラムへ
   ========================================================================= */


/* ==========================================================================
   01. デザイントークン
   ========================================================================== */
:root {
  /* --- 書体 --- */
  --font-base: "YakuHanJP", "Noto Sans JP", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* --- ブランドカラー --- */
  --color-primary: #0288d1;
  --color-primary-hover: #1c91a3;
  --color-primary-tint: rgba(2, 136, 209, 0.1);
  --color-primary-rule: rgba(2, 136, 209, 0.4);
  --color-secondary: #4b5965;
  --color-secondary-hover: #343e46;

  /* --- アクセント（MVの波・サイクル図で使用） --- */
  --color-accent-sky: #6bc8f2;
  --color-accent-pink: #f3aecc;
  --color-accent-pink-soft: #fbe4ee;
  --color-accent-pink-ink: #7a1e3c;

  /* --- 文字 --- */
  --color-text: #111111;
  --color-text-muted: #4b5563;
  --color-text-subtle: #6b7785;
  --color-text-faint: #6b7280;

  /* --- 面 --- */
  --color-surface: #ffffff;
  --color-surface-tint: #f3f7f8;
  --color-surface-muted: #f7f7f7;
  --color-surface-dark: #111111;
  --color-surface-darker: #2b2b2b;
  --color-surface-mock: #fafcfd;
  --color-surface-mock-dark: #16191e;

  /* --- 罫線 --- */
  --color-border: #e4e9ec;
  --color-border-faint: #f3f4f6;
  --color-border-muted: #e5e7eb;
  --color-border-strong: #d1d5db;

  /* --- 暗背景上の文字 --- */
  --color-on-dark: #ffffff;
  --color-on-dark-muted: rgba(255, 255, 255, 0.6);
  --color-on-dark-subtle: rgba(255, 255, 255, 0.45);
  --color-on-dark-line: rgba(255, 255, 255, 0.42);

  /* --- 角丸 --- */
  --radius-xs: 2px;
  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-pill: 999px;

  /* --- 影 --- */
  --shadow-header: 0 6px 20px rgba(0, 0, 0, 0.06);
  --shadow-card: 0 0 18px rgba(0, 0, 0, 0.15);
  --shadow-soft: 0 15px 40px rgba(0, 0, 0, 0.08);
  --shadow-elevated: 0 12px 30px rgba(0, 0, 0, 0.12);
  --shadow-elevated-hover: 0 18px 40px rgba(0, 0, 0, 0.18);
  --shadow-float: 0 14px 34px rgba(0, 0, 0, 0.45);
  --shadow-pill: 0 6px 16px rgba(0, 0, 0, 0.35);
  /* 丸アイコンの外側に重ねる淡いリング（視線を集める） */
  --ring-icon: 0 0 0 7px rgba(2, 136, 209, 0.14);

  /* --- 寸法（メディアクエリで上書き） --- */
  --container-max: 72rem;
  --container-max-tight: 56rem;
  --container-padding: 1rem;
  --section-padding: 4rem;
  --section-padding-compact: 4rem;
  --section-padding-band: 3.5rem;
  --section-padding-spacious: 5rem;
  --header-height: 3.5rem;

  /* --- モーション --- */
  --duration: 0.3s;
  --duration-slow: 0.7s;
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  /* GSAP相当: power3.out / power2.inOut */
  --ease-reveal: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-slide: cubic-bezier(0.45, 0, 0.55, 1);
}

@media (min-width: 768px) {
  :root {
    --container-padding: 1.5rem;
    --section-padding: 6rem;
    --section-padding-compact: 5rem;
    --section-padding-band: 4rem;
    --section-padding-spacious: 7rem;
    --header-height: 4rem;
  }
}


/* ==========================================================================
   02. リセット / ベース
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* ヘッダーがfixedのため、アンカーリンク（#engine等）の着地点がヘッダーの裏に隠れないよう補正 */
  scroll-padding-top: var(--header-height);
}

body {
  margin: 0;
  overflow-x: hidden;
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.7;
  letter-spacing: 0.05em;
  color: var(--color-text);
  background: var(--color-surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
p,
figure {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

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

/* SVGは比率を保った自動縮小をさせない（アート表現・アイコンで寸法を明示するため） */
svg {
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  margin: 0;
  padding: 0;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

strong {
  font-weight: 700;
}

[hidden] {
  display: none !important;
}


/* ==========================================================================
   03. レイアウト
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

.container--tight {
  max-width: var(--container-max-tight);
}

/* --- セクション：余白と地色のバリエーション --- */
.section {
  padding-block: var(--section-padding);
}

.section--compact {
  padding-block: var(--section-padding-compact);
}

.section--band {
  padding-block: var(--section-padding-band);
}

.section--spacious {
  padding-block: var(--section-padding-spacious);
}

.section--tint {
  background: var(--color-surface-tint);
}

.section--accent-tint {
  background: var(--color-primary-tint);
}

/* 水色×ピンクの淡いグラデーション地（ヒーローの波と同じブランドカラーの組み合わせ） */
.section--gradient-tint {
  background:
    radial-gradient(60% 55% at 10% 0%, rgba(107, 200, 242, 0.22) 0%, rgba(107, 200, 242, 0) 72%),
    radial-gradient(65% 60% at 100% 100%, rgba(243, 174, 204, 0.22) 0%, rgba(243, 174, 204, 0) 72%),
    var(--color-surface);
}

.section--dark {
  color: var(--color-on-dark);
  background: var(--color-surface-dark);
}

/* データを扱うセクションの地：薄いドットグリッド＋上方向の発光 */
.section--dotted {
  position: relative;
  overflow: hidden;
}

.section--dotted::before,
.section--dotted::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.section--dotted::before {
  background-image: radial-gradient(rgba(2, 136, 209, 0.3) 1.2px, transparent 1.2px);
  background-size: 20px 20px;
  -webkit-mask-image: radial-gradient(100% 95% at 50% 0%, #000 0%, transparent 82%);
  mask-image: radial-gradient(100% 95% at 50% 0%, #000 0%, transparent 82%);
}

.section--dotted::after {
  background: radial-gradient(60% 70% at 50% 0%,
      rgba(107, 200, 242, 0.28) 0%,
      rgba(107, 200, 242, 0) 70%);
}

.section--dotted>.container {
  position: relative;
  z-index: 1;
}

/* CTA帯：無地では素っ気ないので、薄いグリッドとグラデーションで奥行きを出す */
.section--cta {
  position: relative;
  overflow: hidden;
}

.section--cta::before,
.section--cta::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* 方眼：左から中央にかけて見せ、CTAボタン側では消す */
.section--cta::before {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 48%, transparent 88%);
  mask-image: linear-gradient(90deg, #000 0%, #000 48%, transparent 88%);
}

/* 発光：左上にブランドブルー、右下にアクセントピンクを薄く重ねる */
.section--cta::after {
  background:
    radial-gradient(70% 150% at 4% 0%, rgba(2, 136, 209, 0.4) 0%, rgba(2, 136, 209, 0) 68%),
    radial-gradient(60% 150% at 96% 100%, rgba(243, 174, 204, 0.22) 0%, rgba(243, 174, 204, 0) 68%);
}

/* 白セクションとの境目に細いハイライトを入れて帯として締める */
.section--cta {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* --- セクション見出し --- */
/* スマホでは左寄せ、タブレット以上でセンター揃えに切り替える */
.section-heading--center {
  text-align: left;
}

.section-heading__eyebrow {
  margin-bottom: 0.75rem;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--color-primary);
}

.section-heading__title {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.4;
}

.section-heading__lead {
  max-width: 48rem;
  margin-top: 1.25rem;
  font-size: 0.875rem;
  line-height: 1.9;
  color: var(--color-text-muted);
}

/* 英字を大きく見せる表示用（FUNCTION / NEWS / CONTACT） */
.section-heading--display .section-heading__eyebrow {
  margin-bottom: 0;
  letter-spacing: normal;
}

.section-heading--display .section-heading__title {
  font-size: 1.875rem;
}

/* 暗背景に置いた見出し */
.section--dark .section-heading__lead {
  color: var(--color-on-dark-muted);
}

@media (min-width: 768px) {
  .section-heading--center {
    text-align: center;
  }

  .section-heading--center .section-heading__lead {
    margin-inline: auto;
  }

  .section-heading__title {
    font-size: 2.25rem;
  }

  .section-heading__lead {
    font-size: 0.9375rem;
  }

  .section-heading--display .section-heading__title {
    font-size: 3rem;
  }
}


/* ==========================================================================
   04. パーツ: button / text-link / icon
   ========================================================================== */

/* インラインSVGアイコン共通の描画設定（サイズは親コンポーネントが決める） */
.icon {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- ボタン ---
   構成: .button（土台）+ 配色 --primary/--secondary/--light
         + 形 --with-icon / サイズ --lg/--xl / 幅 --fill/--header/--wide/--band */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.5rem 1.25rem;
  border-radius: var(--radius-pill);
  font-size: 0.875rem;
  /* 現行サイトの font-semibold に合わせる */
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  transition:
    color var(--duration),
    background-color var(--duration),
    transform var(--duration);
}

.button__icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-pill);
}

.button__icon .icon {
  width: 0.875rem;
  height: 0.875rem;
}

/* 矢印は右へ抜けて左から戻る（現行サイトの arrow-loop と同じ挙動） */
.button:hover .button__icon .icon {
  animation: cta-arrow-loop 0.45s ease-out forwards;
}

@keyframes cta-arrow-loop {
  0% {
    transform: translateX(0);
    opacity: 1;
  }

  45% {
    transform: translateX(140%);
    opacity: 0;
  }

  55% {
    transform: translateX(-140%);
    opacity: 0;
  }

  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

/* 形：ラベル左・円形アイコン右 */
.button--with-icon {
  justify-content: space-between;
  padding: 0.75rem 1rem 0.75rem 2rem;
}

.button--lg {
  padding-block: 1rem;
}

.button--xl {
  padding-block: 1.25rem;
}

/* 配色 */
.button--primary {
  color: var(--color-on-dark);
  background: var(--color-primary);
}

.button--primary:hover {
  background: var(--color-primary-hover);
}

.button--primary .button__icon {
  color: var(--color-primary);
  background: var(--color-surface);
}

.button--secondary {
  color: var(--color-on-dark);
  background: var(--color-secondary);
}

.button--secondary:hover {
  background: var(--color-secondary-hover);
}

.button--light {
  color: var(--color-text);
  background: var(--color-surface);
}

.button--light:hover {
  color: var(--color-on-dark);
  background: var(--color-primary);
}

.button--light .button__icon {
  color: var(--color-on-dark);
  background: var(--color-primary);
}

/* 装飾・ふるまい */
.button--raised {
  box-shadow: var(--shadow-soft);
}

.button--grow:hover {
  transform: scale(1.1);
}

/* 幅 */
.button--fill {
  width: 100%;
}

.button--header {
  width: 10.625rem;
}

.button--wide,
.button--band {
  width: 100%;
}

@media (min-width: 768px) {
  .button--wide {
    width: 17.5rem;
  }

  .button--band {
    width: 18.75rem;
  }
}

/* --- テキストリンク（○○一覧を見る） --- */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1rem;
  font-size: 0.875rem;
  transition: opacity var(--duration);
}

.text-link:hover {
  opacity: 0.7;
}

.text-link__icon {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  color: var(--color-text-faint);
  border: 1px solid var(--color-text-faint);
  border-radius: var(--radius-pill);
  transition:
    color var(--duration),
    background-color var(--duration),
    border-color var(--duration);
}

.text-link__icon .icon {
  width: 0.875rem;
  height: 0.875rem;
}

.text-link:hover .text-link__icon {
  color: var(--color-on-dark);
  background: var(--color-primary);
  border-color: transparent;
}


/* ==========================================================================
   05. サイトヘッダー / グローバルナビ / モバイルメニュー
   ========================================================================== */
/* 最初は透明、scrollY > 10 で白背景＋ブラー＋影に切り替わる（JSでクラス付与）。
   position:fixed でフローから外し、ヒーローの波がヘッダーの裏まで回り込んで見えるようにする
   （ヒーロー側は header-height 分の padding-top で content の位置だけ補正） */
.site-header {
  position: fixed;
  top: 0;
  inset-inline: 0;
  z-index: 50;
  background: transparent;
  transition: background-color var(--duration), box-shadow var(--duration);
}

/* ログイン中はWP管理バー（position:fixed; z-index:99999）の高さだけヘッダーを下げ、
   重なりを防ぐ（ログアウトすると管理バーが消えて見た目が変わって見える原因） */
body.admin-bar .site-header {
  top: 32px;
}

@media screen and (max-width: 782px) {
  body.admin-bar .site-header {
    top: 46px;
  }
}

.site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow-header);
}

.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
}

/* lg未満はハンバーガー、lg以上でナビ展開
   ※現行テーマはmd(768px)で展開しているが、ロゴワードマーク229px＋ナビ4項目＋CTA2本は
     768pxに収まらずCTAが欠けるため lg へ引き上げている */
.site-header__bar--wide {
  display: none;
}

.site-header__logo {
  flex: 0 0 auto;
}

.site-header__logo img {
  height: 1.5rem;
  width: auto;
  max-width: none;
}

.site-header__actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.75rem;
}

@media (min-width: 1024px) {
  .site-header__bar--wide {
    display: flex;
  }

  .site-header__bar--compact {
    display: none;
  }
}

/* --- グローバルナビ（下線が伸びるホバー） --- */
.global-nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-left: auto;
  margin-right: 1.5rem;
  font-size: 0.875rem;
  white-space: nowrap;
}

.global-nav__link {
  position: relative;
  display: inline-block;
  padding-bottom: 2px;
  transition: color var(--duration);
}

.global-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 0;
  height: 1px;
  background: var(--color-primary);
  transition: width 0.28s ease;
}

.global-nav__link:hover {
  color: var(--color-primary);
}

.global-nav__link:hover::after {
  width: 100%;
}

/* --- ハンバーガーボタン：開くと3本線がばつ印にモーフする --- */
.menu-toggle {
  position: relative;
  width: 2.75rem;
  height: 2.75rem;
  margin-right: -0.25rem;
}

.menu-toggle__bar {
  position: absolute;
  left: 50%;
  width: 1.5rem;
  height: 2px;
  background: var(--color-text);
  border-radius: var(--radius-pill);
  transform: translateX(-50%);
  transition:
    transform 0.28s ease,
    opacity 0.2s ease,
    top 0.28s ease,
    bottom 0.28s ease;
}

.menu-toggle__bar:nth-child(1) {
  top: 0.875rem;
}

.menu-toggle__bar:nth-child(2) {
  top: 50%;
  transform: translate(-50%, -50%);
}

.menu-toggle__bar:nth-child(3) {
  bottom: 0.875rem;
}

.menu-toggle.is-open .menu-toggle__bar:nth-child(1) {
  top: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
}

.menu-toggle.is-open .menu-toggle__bar:nth-child(2) {
  opacity: 0;
}

.menu-toggle.is-open .menu-toggle__bar:nth-child(3) {
  bottom: auto;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* --- モバイルメニュー：開くと上からアニメーションで表示 --- */
.mobile-menu {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-8px);
  background: var(--color-surface);
  border-top: 1px solid var(--color-border-faint);
  transition:
    max-height 0.32s ease,
    opacity 0.26s ease,
    transform 0.32s ease;
}

.mobile-menu.is-open {
  max-height: 480px;
  opacity: 1;
  transform: translateY(0);
}

.mobile-menu__nav {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-block: 1rem;
  font-size: 0.875rem;
}

.mobile-menu__link {
  padding-block: 0.5rem;
}

.mobile-menu__divider {
  height: 1px;
  margin-block: 0.5rem;
  background: var(--color-border-muted);
}

.mobile-menu .button {
  width: 100%;
  padding-block: 0.75rem;
}

@media (min-width: 1024px) {
  .mobile-menu {
    display: none;
  }
}

/* ==========================================================================
   06. ヒーロー（MV）
   ========================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  /* ヘッダーがfixedでフローから抜けた分、コンテンツの開始位置を補正する
     （背景の波はこのpaddingごと含めて描画されるので、ヘッダーの裏まで回り込む） */
  padding-top: calc(var(--header-height) + 0.5rem);
  background-image: linear-gradient(0deg, var(--color-surface-tint), var(--color-surface));
}

/* 背景：現行テーマのレイヤー波アートワーク
   読み込み完了後に左→右へ現れる（.hero.is-loaded をJSが付与）
   現行サイトの clip-path inset(0 100% 0 0) → inset(0) / 2.2s / power3.out 相当 */
.hero__waves {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 2.2s var(--ease-reveal);
}

.hero.is-loaded .hero__waves {
  clip-path: inset(0 0 0 0);
}

/* 波は「横方向にだけ引き伸ばす」アート表現のため、高さはレイヤーごとに固定する
   （比率を保って拡大すると画面全体を覆ってしまう） */
.hero__wave {
  position: absolute;
  top: -0.75rem;
  left: 0;
  width: 200%;
  max-width: none;
  height: var(--hero-wave-height);
}

/* 1レイヤーごとに同じ形を少しずつずらして重ね、厚みのある帯にする
   （現行サイトの <use> ×3 ＋ opacity/rotate 指定に合わせている） */
.hero__wave-shape,
.hero__wave-echo {
  mix-blend-mode: multiply;
}

.hero__wave-echo--2,
.hero__wave-echo--3 {
  opacity: 0.5;
}

.hero__wave-echo--2 {
  transform: rotate(6deg);
}

.hero__wave-echo--3 {
  transform: rotate(5deg);
}

.hero__wave--back {
  --hero-wave-height: 921px;
}

.hero__wave--mid {
  --hero-wave-height: 779px;
}

.hero__wave--front {
  --hero-wave-height: 761px;
}

/* 上段：導入事例フォト ＋ プロダクト画面
   現行サイト（tailorworks.ai）は items-start（上揃え）のため合わせる */
.hero__visuals {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 2rem;
  align-items: start;
  padding-top: 1.5rem;
}

/* --- 導入事例スライドショー（右→左スライドイン / ドットで切替）
   スマホでは非表示、タブレット以上（768px〜）でのみ表示する --- */
.hero-slider {
  display: none;
  flex-direction: column;
  gap: 0.75rem;
}

.hero-slider__viewport {
  position: relative;
  flex: 1 1 auto;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-card);
}

/* 待機中のスライドは右外に置く。transition は表示中/退場中のクラスだけが持つので、
   クラスを外した瞬間はアニメーションせず待機位置へ戻る */
.hero-slider__slide {
  position: absolute;
  inset: 0;
  z-index: 0;
  transform: translateX(100%);
}

/* 退場側：フェードも移動もせず、その場に静止したまま表示し続ける。
   新しいスライドがこの上に右から重なって隠れるまで、透けたり消えたりしない */
.hero-slider__slide.is-leaving {
  z-index: 1;
  transform: none;
}

/* 表示側：待機位置(右外)から現在位置へスライドインし、退場側の上に覆いかぶさる */
.hero-slider__slide.is-current {
  z-index: 2;
  transform: none;
  transition: transform 0.7s var(--ease-slide);
}

.hero-slider__link {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

.hero-slider__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}

.hero-slider__link:hover .hero-slider__image {
  transform: scale(1.04);
}

.hero-slider__scrim {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 6rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
  pointer-events: none;
}

.hero-slider__caption {
  position: absolute;
  left: 1rem;
  bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--color-on-dark);
}

.hero-slider__badge {
  padding: 3px 0.5rem;
  font-size: 0.625rem;
  background: var(--color-primary);
  border-radius: var(--radius-xs);
}

/* ドットはサムネイル左端に揃えて下に配置（現行サイトの mv-dots に合わせる）。
   プロダクト画面（z-index 2）の透明な余白が被る場合に備えて前面に置く */
.hero-slider__dots {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: flex-start;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

.hero-slider__dot {
  flex: 0 0 auto;
  width: 28px;
  height: 3px;
  background: rgba(95, 95, 95, 0.65);
  border-radius: 2px;
  transition:
    transform var(--duration),
    background-color var(--duration);
}

.hero-slider__dot[aria-current="true"] {
  background: var(--color-primary);
  transform: scale(1.2);
}

/* プロダクト画面は事例フォト・波より前面に置く。
   装飾なので、透明な余白がスライダーのドットのクリックを奪わないようにする */
.hero__product {
  position: relative;
  z-index: 2;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 13.125rem;
}

.hero__product img {
  width: 100%;
  max-width: 42.5rem;
  /* ふわふわ浮遊（現行サイトのGSAP: y -8px / rotate 2deg / 3.2s / yoyo / sine.inOut 相当） */
  animation: hero-product-float 3.2s ease-in-out infinite alternate;
}

@keyframes hero-product-float {
  from {
    transform: translateY(0) rotate(0deg);
  }

  to {
    transform: translateY(-8px) rotate(2deg);
  }
}


/* キャッチコピー */
.hero__copy {
  position: relative;
  z-index: 1;
  margin-top: 2.5rem;
}

.hero__title {
  font-size: 1.75rem;
  font-weight: 700;
}

.hero__title-lead {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 1rem;
  font-weight: 700;
  color: rgba(17, 17, 17, 0.8);
}

.hero__actions {
  margin-top: 1.5rem;
}

/* 信頼訴求（左右の稲穂アイコン付き1行） */
.hero__trust {
  position: relative;
  z-index: 1;
  padding-top: 2.5rem;
  padding-bottom: 1rem;
}

.hero__trust-text {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  max-width: 56rem;
  margin-inline: auto;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.625;
  text-align: center;
}

.hero__trust-icon {
  flex: 0 0 auto;
  width: 1rem;
  user-select: none;
}

@media (min-width: 768px) {
  .hero {
    padding-bottom: 0.5rem;
  }

  .hero__visuals {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    padding-top: 2.5rem;
  }

  .hero-slider {
    display: flex;
  }

  .hero-slider__viewport {
    aspect-ratio: 16 / 9;
  }

  .hero-slider__caption {
    font-size: 0.875rem;
  }

  .hero-slider__badge {
    font-size: 0.75rem;
  }

  .hero__product {
    justify-content: flex-end;
    height: 23.75rem;
  }

  .hero__product img {
    width: 118%;
    margin-right: -2rem;
  }

  .hero__title {
    font-size: 2.25rem;
    line-height: 1.4;
  }

  .hero__title-break {
    display: none;
  }

  .hero__title-lead {
    margin-bottom: 0;
    font-size: 1.25rem;
    line-height: 2.5rem;
  }

  .hero__actions {
    margin-top: 1.75rem;
  }

  .hero__trust {
    padding-top: 3.5rem;
  }

  .hero__trust-text {
    gap: 1rem;
    font-size: 1.125rem;
  }

  .hero__trust-icon {
    width: 1.25rem;
  }
}


/* ==========================================================================
   07. 導入企業ロゴマーキー
   ========================================================================== */
.logo-marquee {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  background: var(--color-surface);
}

/* 左右端をフェードさせて流れの始点/終点を隠す */
.logo-marquee__viewport {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.logo-marquee__track {
  display: flex;
  align-items: center;
  gap: 3rem;
  width: max-content;
  padding-inline: 1.5rem;
  will-change: transform;
  animation: logo-marquee-scroll 38s linear infinite;
}

.logo-marquee__track:hover {
  animation-play-state: paused;
}

/* トラックは同じ並びを2セット持つため、-50%で1周する */
@keyframes logo-marquee-scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

.logo-marquee__item {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  height: 1.5rem;
}

@media (min-width: 768px) {
  .logo-marquee {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  .logo-marquee__track {
    gap: 4rem;
  }

  .logo-marquee__item {
    height: 1.75rem;
  }
}


/* ==========================================================================
   08. コンセプト
   ========================================================================== */
.concept {
  position: relative;
  overflow: hidden;
}

.concept__layout {
  position: relative;
  z-index: 1;
  display: grid;
  align-items: center;
}

.concept__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
}

/* section-heading__eyebrow の margin-bottom(0.75rem) と親の gap(1.25rem) が
   加算されるため、他の見出しと揃うように打ち消して 0.75rem に調整 */
.concept__text > .section-heading__eyebrow {
  margin-bottom: -0.5rem;
}

.concept__paragraph {
  font-size: 0.9375rem;
  line-height: 1.9;
  color: var(--color-text-muted);
}

.concept__paragraph--emphasis {
  font-size: 1.0625rem;
}

/* SP: 本文の下に全幅で敷く */
.concept__photo--inline {
  margin-top: 2.5rem;
  margin-inline: calc(var(--container-padding) * -1);
}

.concept__photo--inline img {
  width: 100%;
  height: 16rem;
  object-fit: cover;
}

/* PC: 右半分にブリードさせ、左肩だけ角丸 */
.concept__photo--bleed {
  display: none;
}

@media (min-width: 768px) {
  .concept__layout {
    grid-template-columns: 1fr 1fr;
  }

  .concept__photo--inline {
    display: none;
  }

  .concept__photo--bleed {
    display: block;
    position: absolute;
    inset-block: 0;
    right: 0;
    width: 50%;
    padding-top: 3.75rem;
  }

  .concept__photo--bleed img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
  }
}

@media (min-width: 1024px) {
  .concept__photo--bleed {
    width: 45%;
  }
}

/* ==========================================================================
   09. オリジネーションエンジン
   ========================================================================== */
.engine {
  position: relative;
  overflow: hidden;
}

/* 背景のロゴウォーターマーク（現行テーマ #step 準拠） */
.engine__watermark {
  position: absolute;
  inset-inline: 0;
  top: 26.25rem;
  width: 100%;
  max-width: none;
  opacity: 0.03;
  filter: invert(1);
  pointer-events: none;
}

.engine__intro {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 2.5rem;
  align-items: center;
}

.engine__eyebrow {
  margin-bottom: 0.75rem;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--color-accent-sky);
}

.engine__lead {
  margin-bottom: 0.5rem;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--color-on-dark-muted);
}

.engine__title {
  margin-bottom: 1.5rem;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.4;
}

.engine__description {
  font-size: 0.875rem;
  line-height: 1.9;
  color: var(--color-on-dark-muted);
}

.engine__description--spaced {
  margin-top: 1.5em;
}

@media (min-width: 768px) {
  .engine__watermark {
    top: 31.25rem;
  }

  .engine__intro {
    grid-template-columns: 1.05fr 0.95fr;
    gap: 3rem;
  }

  .engine__title {
    font-size: 2.25rem;
  }

  .engine__description {
    font-size: 0.9375rem;
  }
}


/* ==========================================================================
   10. オリジネーションサイクル図
   PC/TB: 900×840 の円環（.cycle__viewport）
   SP   : 縦フロー（.cycle-flow）に切り替え
   ========================================================================== */
.cycle {
  position: relative;
  z-index: 1;
  margin-top: 4rem;
}

/* --- 円環（md以上） --- */
.cycle__viewport {
  display: none;
}

.cycle__stage {
  position: relative;
  flex-shrink: 0;
  width: 56.25rem;
  /* 900px */
  height: 52.5rem;
  /* 840px */
  margin-inline: auto;
  transform-origin: top center;
}

@media (min-width: 768px) {
  .cycle__viewport {
    display: flex;
    justify-content: center;
    /* stage 840px を 0.7 倍した実寸 */
    height: 36.75rem;
  }

  .cycle__stage {
    transform: scale(0.7);
  }
}

@media (min-width: 1024px) {
  .cycle {
    margin-top: 5rem;
  }

  .cycle__viewport {
    height: 52.5rem;
  }

  .cycle__stage {
    transform: none;
  }
}

/* 中心の光 */
.cycle__glow {
  position: absolute;
  left: 50%;
  top: 25.625rem;
  width: 44rem;
  height: 44rem;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle,
      rgba(2, 136, 209, 0.22) 0%,
      rgba(2, 136, 209, 0.06) 42%,
      rgba(2, 136, 209, 0) 70%);
  pointer-events: none;
}

/* 円弧（SVG） */
.cycle__arcs {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.cycle__arc {
  fill: none;
  stroke-linecap: round;
}

/* フェーズ1：顧客課題の発見・策定（STEP01→02→03） */
.cycle__arc--discover {
  stroke: url(#cycleGradientDiscover);
  stroke-width: 11;
}

/* フェーズ2：顧客へ具体提案（STEP03→04） */
.cycle__arc--propose {
  stroke: url(#cycleGradientPropose);
  stroke-width: 11;
}

/* フィードバックループ（実線） */
.cycle__arc--feedback {
  stroke: var(--color-on-dark-line);
  stroke-width: 11;
}

/* ステップカード：位置は modifier が --cycle-x / --cycle-y で指定する。
   説明文が50文字程度入るため、幅・パディングを拡大している */
.cycle__step {
  position: absolute;
  left: var(--cycle-x);
  top: var(--cycle-y);
  width: 16.5rem;
  padding: 1.375rem 1.375rem;
  transform: translate(-50%, -50%);
  text-align: center;
  color: var(--color-text);
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-float);
}

/* 5ステップを円周上に72°間隔で配置（STEP01を12時の位置に固定し、時計回りに配置）
   円の半径を280pxに拡大（カード拡大に伴い再計算） */
.cycle__step--customer {
  --cycle-x: 28.125rem;
  --cycle-y: 8.125rem;
}

.cycle__step--market {
  --cycle-x: 44.768rem;
  --cycle-y: 20.217rem;
}

.cycle__step--hypothesis {
  --cycle-x: 38.411rem;
  --cycle-y: 39.783rem;
}

.cycle__step--proposal {
  --cycle-x: 17.839rem;
  --cycle-y: 39.783rem;
}

.cycle__step--fifth {
  --cycle-x: 11.482rem;
  --cycle-y: 20.217rem;
}

/* フェーズラベル（ピル） */
.cycle__phase {
  position: absolute;
  left: var(--cycle-x);
  top: var(--cycle-y);
  z-index: 3;
  padding: 0.375rem 0.875rem;
  transform: translate(-50%, -50%);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-pill);
}

.cycle__phase--discover {
  --cycle-x: 43.085rem;
  --cycle-y: 6.411rem;
}

.cycle__phase--propose {
  --cycle-x: 28.125rem;
  --cycle-y: 49.375rem;
}

/* STEP05→STEP01（フィードバック弧）の脇に置く、発見・提案と同様のフェーズピル */
.cycle__phase--feedback {
  --cycle-x: 12.5rem;
  --cycle-y: 6.411rem;
}

/* 中心のフィードバック説明 */
.cycle__center {
  position: absolute;
  left: 28.125rem;
  top: 25.625rem;
  width: 12.5rem;
  transform: translate(-50%, -50%);
  text-align: center;
}

.cycle__center-label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.59375rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--color-on-dark-subtle);
}

.cycle__center-text {
  display: block;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.7;
  color: var(--color-on-dark);
}

@media (min-width: 768px) {
  .cycle__center-text {
    font-size: 1rem;
  }
}

/* --- フェーズラベルの配色（円環・縦フロー共用） --- */
.phase-label {
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  /* --feedback だけ実線ボーダーを持つため、透明ボーダーで箱の高さを揃える */
  border: 1px solid transparent;
}

.phase-label--discover {
  color: var(--color-on-dark);
  background: var(--color-primary);
}

.phase-label--propose {
  color: var(--color-accent-pink-ink);
  background: var(--color-accent-pink);
}

/* フィードバック（発見・提案とは別の中立トーン。ダーク背景に浮かせるガラス調のピル） */
.phase-label--feedback {
  color: var(--color-on-dark);
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.35);
}

/* --- ステップの中身（円環・縦フロー共用） --- */
.process-step__index {
  display: inline-block;
  margin-bottom: 0.625rem;
  padding: 3px 0.625rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--color-primary);
  background: var(--color-primary-tint);
  border-radius: var(--radius-pill);
}

.process-step__title {
  display: block;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.45;
  color: var(--color-text);
}

.process-step__note {
  display: block;
  margin-top: 0.5625rem;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.7;
  color: var(--color-text-subtle);
}

/* --- 縦フロー（SP） --- */
.cycle-flow {
  margin-top: 3rem;
}

@media (min-width: 768px) {
  .cycle-flow {
    display: none;
  }
}

.cycle-flow__phases {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.cycle-flow__phase {
  padding: 0.375rem 0.875rem;
  border-radius: var(--radius-pill);
}

/* 軸線はブルー→ピンクで2フェーズを示す（discover 3項目・propose 2項目 = 60%地点で切替） */
.cycle-flow__list {
  position: relative;
  padding-left: 1.625rem;
}

.cycle-flow__list::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 0.5rem;
  bottom: 0.5rem;
  width: 2px;
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg,
      var(--color-primary) 0%,
      var(--color-primary) 60%,
      var(--color-accent-pink) 60%,
      var(--color-accent-pink) 100%);
}

/* STEP05からSTEP01へ戻るループを示すバッジ */
.cycle-flow__loop {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: fit-content;
  margin: 0.75rem auto 0;
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-accent-pink);
  border: 1px dashed var(--color-accent-pink);
  border-radius: var(--radius-pill);
}

.cycle-flow__loop-icon {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cycle-flow__item {
  position: relative;
  margin-bottom: 0.875rem;
  padding: 1rem;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
}

.cycle-flow__item::before {
  content: "";
  position: absolute;
  left: -1.625rem;
  top: 1.375rem;
  width: 0.75rem;
  height: 0.75rem;
  background: var(--color-surface);
  border: 3px solid var(--color-primary);
  border-radius: var(--radius-pill);
}

.cycle-flow__item--propose::before {
  border-color: var(--color-accent-pink);
}

.cycle-flow__feedback {
  margin-top: 1rem;
  font-size: 0.75rem;
  line-height: 1.625;
  text-align: center;
  color: var(--color-on-dark-muted);
}

.cycle-flow__feedback-label {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.59375rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--color-on-dark-subtle);
}


/* ==========================================================================
   11. 提供形態カード（サイクルからの分岐）
   ========================================================================== */
.offerings {
  margin-top: 3.5rem;
}

.offerings__divider {
  display: flex;
  justify-content: center;
  color: rgba(255, 255, 255, 0.3);
}

.offerings__divider .icon {
  width: 2.5rem;
  height: 2.5rem;
}

.offerings__list {
  display: grid;
  gap: 1.25rem;
  margin-top: 1.5rem;
}

/* アクセント色は modifier が --offering-accent で切り替える */
.offering {
  padding: 1.5rem;
  color: var(--color-text);
  text-align: center;
  background: var(--color-surface);
  border-top: 4px solid var(--offering-accent);
  border-radius: var(--radius-xl);
}

.offering--product {
  --offering-accent: var(--color-primary);
}

.offering--bpo {
  --offering-accent: var(--color-primary);
}

.offering__eyebrow {
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.offering__title {
  margin-bottom: 1rem;
  font-size: 1rem;
  font-weight: 700;
}

.offering__tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}

.offering__tag {
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--offering-accent);
  border: 1px solid var(--offering-accent);
  border-radius: var(--radius-md);
}

@media (min-width: 768px) {
  .offerings {
    margin-top: 4rem;
  }

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

  .offering {
    padding: 1.75rem;
  }

  .offering__title {
    font-size: 1.125rem;
  }
}

/* ==========================================================================
   12. 利用シーン
   ========================================================================== */

/* --- ペルソナ切替タブ（状態は aria-selected で表現） --- */
.persona-tabs {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 2.5rem;
}

.persona-tabs__tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.75rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 700;
  text-align: center;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  transition:
    color var(--duration),
    background-color var(--duration),
    border-color var(--duration);
}

.persona-tabs__tab-main {
  font-size: 1rem;
}

.persona-tabs__tab-sub {
  font-size: 0.75rem;
  font-weight: 500;
}

.persona-tabs__tab:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.persona-tabs__tab[aria-selected="true"] {
  color: var(--color-on-dark);
  background: var(--color-primary);
  border-color: var(--color-primary);
}

@media (min-width: 640px) {
  .persona-tabs {
    flex-direction: row;
  }
}

@media (min-width: 768px) {
  .persona-tabs {
    margin-top: 3rem;
  }
}

/* --- ステップ（テキストと画面を左右交互に） --- */
.step-list {
  display: flex;
  flex-direction: column;
  gap: 3.5rem;
  margin-top: 3rem;
}

.step {
  display: grid;
  gap: 2rem;
  align-items: center;
}

.step__meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.step__index {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--color-primary);
}

.step__rule {
  width: 3rem;
  height: 1px;
  background: var(--color-primary-rule);
}

.step__title {
  margin-bottom: 1rem;
  font-size: 1.25rem;
  font-weight: 700;
}

.step__description {
  font-size: 0.875rem;
  line-height: 1.9;
  color: var(--color-text-muted);
}

@media (min-width: 768px) {
  .step-list {
    gap: 5rem;
    margin-top: 4rem;
  }

  .step {
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
  }

  /* 偶数ステップは画面を左に */
  .step--reverse .step__body {
    order: 2;
  }

  .step--reverse .step__figure {
    order: 1;
  }

  .step__title {
    font-size: 1.5rem;
  }

  .step__description {
    font-size: 0.9375rem;
  }
}

/* --- 画面モック（実キャプチャ差し替え前提のプレースホルダー） --- */
.screen-mock {
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}

.screen-mock__chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 1.75rem;
  padding-inline: 0.75rem;
  background: #f1f4f6;
  border-bottom: 1px solid var(--color-border);
}

.screen-mock__dot {
  width: 8px;
  height: 8px;
  background: #cbd3d8;
  border-radius: var(--radius-pill);
}

.screen-mock__canvas {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  background:
    radial-gradient(120% 100% at 12% 0%, rgba(107, 200, 242, 0.2) 0%, rgba(107, 200, 242, 0) 55%),
    radial-gradient(120% 100% at 100% 100%, rgba(243, 174, 204, 0.22) 0%, rgba(243, 174, 204, 0) 55%),
    var(--color-surface-mock);
}

/* 方眼で「画面」であることを示す */
.screen-mock__canvas::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--color-border-subtle) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-border-subtle) 1px, transparent 1px);
  background-size: 34px 34px;
  opacity: 0.55;
}

.screen-mock__caption {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-text-subtle);
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
}

.screen-mock__caption .icon {
  width: 0.875rem;
  height: 0.875rem;
}

/* 暗背景に置くモック */
.screen-mock--dark {
  background: var(--color-surface-mock-dark);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: var(--shadow-card);
}

.screen-mock--dark .screen-mock__chrome {
  background: #1f242a;
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

.screen-mock--dark .screen-mock__dot {
  background: rgba(255, 255, 255, 0.22);
}

.screen-mock--dark .screen-mock__canvas {
  background:
    radial-gradient(120% 100% at 12% 0%, rgba(2, 136, 209, 0.28) 0%, rgba(2, 136, 209, 0) 58%),
    radial-gradient(120% 100% at 100% 100%, rgba(243, 174, 204, 0.2) 0%, rgba(243, 174, 204, 0) 58%),
    var(--color-surface-mock-dark);
}

.screen-mock--dark .screen-mock__canvas::before {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  opacity: 1;
}

.screen-mock--dark .screen-mock__caption {
  color: rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.16);
}

/* --- 導入効果（数値カード） --- */
.results {
  margin-top: 4rem;
}

.results__title {
  margin-bottom: 2rem;
  font-size: 1.25rem;
  font-weight: 700;
  text-align: center;
}

/* 注釈を伴う場合は見出し直下の余白を詰める */
.results__title--noted {
  margin-bottom: 0.5rem;
}

.results__note {
  margin-bottom: 2rem;
  font-size: 0.75rem;
  text-align: center;
  color: var(--color-text-faint);
}

.results__list {
  display: grid;
  gap: 1.5rem;
}

.result-card {
  position: relative;
  overflow: hidden;
  padding: 2rem;
  text-align: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border-faint);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
}

/* 背面に薄く敷く英字 */
.result-card__watermark {
  position: absolute;
  left: 50%;
  bottom: 1.15rem;
  width: 100%;
  transform: translateX(-50%);
  font-size: 2.25rem;
  letter-spacing: 0.1em;
  white-space: nowrap;
  color: var(--color-primary);
  opacity: 0.12;
}

.result-card__icon {
  width: 3rem;
  height: 3rem;
  margin: 0 auto 1.25rem;
}

.result-card__icon--wide {
  width: 4rem;
}

.result-card__value {
  line-height: 1;
}

.result-card__number {
  font-size: 2.75rem;
  font-weight: 700;
  color: var(--color-primary);
}

.result-card__unit {
  font-size: 1.375rem;
  font-weight: 700;
}

.result-card__unit-mark {
  color: var(--color-primary);
}

.result-card__label {
  margin-top: 0.75rem;
  font-size: 0.875rem;
  font-weight: 700;
}

@media (min-width: 768px) {
  .results {
    margin-top: 5rem;
  }

  .results__title {
    font-size: 1.5rem;
  }

  .results__list {
    grid-template-columns: repeat(3, 1fr);
  }

  .result-card__number {
    font-size: 3.375rem;
  }

  .result-card__unit {
    font-size: 1.625rem;
  }

  .result-card__label {
    font-size: 1rem;
  }
}

/* ==========================================================================
   13. データポリシー
   ========================================================================== */
.policy-list {
  display: grid;
  gap: 1.25rem;
  margin-top: 2.5rem;
}

.policy-card {
  position: relative;
  overflow: hidden;
  /* 上端の余白は図版が担うのでゼロ */
  padding: 0 1.5rem 1.75rem;
  text-align: center;
  background: var(--color-surface);
  border: 1px solid rgba(2, 136, 209, 0.12);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
}

/* 上端のアクセントバーで3項目を一連のものとして見せる */
.policy-card::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-accent-sky), var(--color-primary));
}

/* 図版：3枚とも同じ 16:10 に整列済みの画像を使う。
   左右はカード端まで広げ、テナント図の文字まで読める幅を確保する。
   上下には内側に余白を取り、画像自体も一回り小さく表示して余白の中に収める */
.policy-card__figure {
  margin: 0 -1.5rem;
  padding-block: 1.5rem;
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface);
  border-radius: var(--radius-sm);
}

.policy-card__figure img {
  /* height は auto にして画像自体の比率（16:10）に委ねる。
     flexアイテムの height:% はコンテナ高さの解決順序でブラウザ差が出るため使わない */
  width: 70%;
  height: auto;
  object-fit: contain;
}

.policy-card__title {
  font-size: 1rem;
  font-weight: 700;
}

.policy-card__text {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.625;
  color: var(--color-text-muted);
}

@media (min-width: 768px) {
  .policy-list {
    grid-template-columns: repeat(3, 1fr);
  }

  .policy-card__title {
    font-size: 1.125rem;
  }
}


/* ==========================================================================
   14. 導入メリット
   ========================================================================== */
.merit-list {
  display: grid;
  gap: 1.25rem;
  margin-top: 2.5rem;
}

.merit {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.5rem 1.5rem 1.5rem 1.75rem;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
}

/* 左端のアクセントバーで4項目を一連のものとして見せる */
.merit::before {
  content: "";
  position: absolute;
  inset-block: 0;
  left: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--color-accent-sky), var(--color-primary));
}

/* 通し番号を背面に薄く敷く（数値カードのウォーターマークと同じ手法） */
.merit__index {
  position: absolute;
  right: 0.75rem;
  bottom: -0.5rem;
  font-size: 3.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--color-primary);
  opacity: 0.1;
  pointer-events: none;
}

.merit__icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2.75rem;
  height: 2.75rem;
  color: var(--color-on-dark);
  background: var(--color-primary);
  border-radius: var(--radius-pill);
  box-shadow: var(--ring-icon);
}

.merit__icon .icon {
  width: 1.25rem;
  height: 1.25rem;
}

.merit__text {
  position: relative;
  padding-top: 0.5rem;
  padding-right: 2.5rem;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.625;
}

.merit__badge {
  margin-left: 0.25rem;
  padding: 0.125rem 0.5rem;
  font-size: 0.6875rem;
  font-weight: 700;
  vertical-align: middle;
  color: var(--color-on-dark);
  background: var(--color-surface-dark);
  border-radius: var(--radius-xs);
}

@media (min-width: 768px) {
  .merit-list {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-top: 3rem;
  }

  .merit {
    padding: 1.75rem 1.75rem 1.75rem 2rem;
  }

  .merit__text {
    font-size: 1rem;
  }
}


/* ==========================================================================
   15. CTA帯（資料ダウンロード / 無料相談）
   ========================================================================== */
.cta-band {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.cta-band__title {
  font-size: 1.125rem;
  font-weight: 700;
}

.cta-band__note {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: var(--color-on-dark-muted);
}

.cta-band__action {
  flex: 0 0 auto;
}

@media (min-width: 768px) {
  .cta-band {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .cta-band__title {
    font-size: 1.25rem;
  }
}


/* ==========================================================================
   16. 機能一覧
   ========================================================================== */
/* スマホ1列 → タブレット3列 → PC5列 */
.function-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem 0.85rem;
  margin-top: 2rem;
}

/* 縦積みカード：上に図版（白地）、下に説明（薄グレー地） */
.function-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
}

.function-card__figure {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 7rem;
  background: var(--color-surface);
}

.function-card__figure img {
  width: 8rem;
  height: 6rem;
  object-fit: contain;
}

.function-card__body {
  flex: 1 1 auto;
  padding: 1rem;
  background: var(--color-surface-tint);
}

.function-card__title {
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.4;
}

.function-card__text {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--color-text-faint);
}

@media (min-width: 768px) {
  .function-list {
    grid-template-columns: repeat(3, 1fr);
  }

  .function-card__figure {
    height: 8rem;
  }

  .function-card__title {
    font-size: 1rem;
  }

  .function-card__text {
    font-size: 0.8125rem;
  }
}

@media (min-width: 1024px) {
  .function-list {
    grid-template-columns: repeat(5, 1fr);
  }
}


/* ==========================================================================
   17. ニュース
   ========================================================================== */
.news {
  display: grid;
  gap: 2.5rem;
  align-items: start;
}

.news-item {
  padding-block: 1.25rem;
}

/* 項目間だけに罫線を引く */
.news-item+.news-item {
  border-top: 1px solid var(--color-border-muted);
}

.news-item__meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.875rem;
}

.news-item__date {
  color: var(--color-text-faint);
}

/* ニュースカテゴリー（news_category タクソノミー）バッジ */
.news-item__category {
  padding: 2px 0.5rem;
  font-size: 0.75rem;
  color: var(--color-on-dark);
  background: var(--color-text);
  border-radius: var(--radius-xs);
}

.news-item__link {
  display: block;
  margin-top: 0.5rem;
  line-height: 1.625;
  transition: color var(--duration);
}

.news-item__link:hover {
  color: var(--color-primary);
}

@media (min-width: 768px) {
  .news {
    grid-template-columns: 16.25rem 1fr;
  }

  .news-item {
    padding: 1.5rem;
  }
}


/* ==========================================================================
   18. コンタクト
   ========================================================================== */
.contact {
  text-align: center;
}

.contact__lead {
  margin-top: 1.5rem;
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.7);
}

.contact__lead strong {
  color: var(--color-on-dark);
}

.contact__actions {
  display: grid;
  gap: 1.5rem;
  margin-top: 2.5rem;
}

@media (min-width: 768px) {
  .contact__actions {
    grid-template-columns: 1fr 1fr;
  }
}


/* ==========================================================================
   19. サイトフッター
   ========================================================================== */
.site-footer {
  background: var(--color-surface-dark);
}

.site-footer__main {
  padding-bottom: 2.5rem;
}

.site-footer__top {
  display: grid;
  gap: 2rem;
  align-items: start;
  padding-top: 2.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
}

.site-footer__wordmark {
  font-size: 1.75rem;
  font-weight: 700;
  text-align: center;
  color: var(--color-on-dark);
}

.site-footer__nav {
  display: flex;
  flex-direction: column;
  gap: 0;
  font-size: 0.8125rem;
  line-height: 2.5;
  color: #f3f4f6;
}

.site-footer__nav-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 1.5rem;
}

.site-footer__nav-link:hover {
  opacity: 0.8;
}

/* --- ポリシー & 認証バッジ（白帯） --- */
.site-footer__legal {
  background: var(--color-surface);
}

.site-footer__legal-inner {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding-top: 1.5rem;
  padding-bottom: 1rem;
}

.site-footer__policy-list {
  display: flex;
  flex-wrap: wrap;
  column-gap: 1.5rem;
  row-gap: 0.75rem;
  font-size: 0.75rem;
  color: #374151;
}

.site-footer__policy-link:hover {
  opacity: 0.8;
}

.site-footer__badges {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border-strong);
}

.site-footer__badges img {
  width: auto;
  max-width: none;
  height: 3.5rem;
}

.site-footer__copyright {
  padding-block: 1rem;
  font-size: 0.75rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.85);
  background: var(--color-surface-darker);
}

@media (min-width: 768px) {
  .site-footer__main {
    padding-bottom: 3rem;
  }

  .site-footer__top {
    grid-template-columns: auto 1fr;
    gap: 2.5rem;
    padding-top: 3rem;
  }

  .site-footer__wordmark {
    font-size: 2.125rem;
    text-align: left;
  }

  .site-footer__nav {
    align-items: flex-end;
    justify-self: end;
    font-size: 0.875rem;
  }

  .site-footer__nav-list {
    justify-content: flex-end;
    column-gap: 2rem;
  }

  .site-footer__legal-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-block: 1rem;
  }

  .site-footer__badges {
    gap: 1.5rem;
    padding-top: 0;
    border-top: 0;
  }
}


/* ==========================================================================
   20. スクロールイン演出
   実装時は現行テーマと同じ GSAP ScrollTrigger に差し替え可
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(1.5rem);
  transition:
    opacity var(--duration-slow) var(--ease-out),
    transform var(--duration-slow) var(--ease-out);
}

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

.reveal--delay-1 {
  transition-delay: 0.1s;
}

.reveal--delay-2 {
  transition-delay: 0.2s;
}

.reveal--delay-3 {
  transition-delay: 0.3s;
}

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

  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .logo-marquee__track,
  .hero__product img,
  .button:hover .button__icon .icon {
    animation: none;
  }

  /* 波は最初から開いた状態、スライドは瞬時に切替（自動再生もJS側で停止） */
  .hero__waves {
    clip-path: none;
    transition: none;
  }

  .hero-slider__slide.is-current,
  .hero-slider__slide.is-leaving {
    transition: none;
  }

  .hero-slider__link:hover .hero-slider__image,
  .button--grow:hover {
    transform: none;
  }
}


/* ==========================================================================
   21. シングル記事共通（パンくず / 本文 / ナビ / CTA）
   news-single（ニュース詳細）/ case-single（導入事例詳細・single.php 兼用）で使用
   ========================================================================== */
.container--narrow {
  max-width: 64rem;
  /* 1024px */
}

/* --- パンくず --- */
.breadcrumb {
  margin-bottom: 1.5rem;
  font-size: 0.75rem;
  color: var(--color-text-faint);
}

.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
}

.breadcrumb__link {
  transition: opacity var(--duration);
}

.breadcrumb__link:hover {
  opacity: 0.7;
}

.breadcrumb__current {
  color: var(--color-text-subtle);
}

/* --- 記事ヘッダー：日付 + バッジ + タイトル --- */
.single-header {
  padding-bottom: 1rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--color-border-muted);
}

.single-header__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  font-size: 0.75rem;
  color: var(--color-text-faint);
}

/* news-single はタイトル→メタの順（他の single-header 利用箇所はメタ→タイトルのまま） */
.news-single .single-header__title {
  margin-bottom: 0.5rem;
}

.news-single .single-header__meta {
  margin-bottom: 0;
}

.single-header__title {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.6;
}

@media (min-width: 768px) {
  .single-header__title {
    font-size: 1.5rem;
  }

  .news-single .single-header__title {
    font-size: 1.875rem;
    line-height: 1.4;
  }
}

/* イベントの開催状況バッジ（event_category） */
.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 0.5rem;
  font-size: 0.6875rem;
  font-weight: 700;
  border-radius: var(--radius-xs);
  background: var(--color-border-strong);
  color: var(--color-text-muted);
}

.status-badge--available {
  background: #00a99d;
  color: var(--color-on-dark);
}

.status-badge--accepting {
  background: #2f80ed;
  color: var(--color-on-dark);
}

.status-badge--report {
  background: #f2994a;
  color: var(--color-on-dark);
}

.status-badge--finished {
  background: #828282;
  color: var(--color-on-dark);
}

/* --- アイキャッチ（ニュース詳細 / イベント詳細など、装飾なしの単純版） --- */
.single-thumbnail {
  margin-bottom: 1.5rem;
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.single-thumbnail img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* --- 事例詳細のアイキャッチ：企業名・担当者名オーバーレイ付き --- */
.case-single__thumbnail {
  position: relative;
  margin-bottom: 1.5rem;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-md);
}

.case-single__thumbnail img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.case-single__thumbnail-overlay {
  position: absolute;
  z-index: 1;
  left: 1rem;
  bottom: 1rem;
  max-width: calc(100% - 2rem);
}

.case-single__thumbnail-org {
  padding: 0.25rem 1rem;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  color: var(--color-on-dark);
  background: #2a2a2a;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  box-shadow: var(--shadow-soft);
}

.case-single__thumbnail-names {
  padding: 0.25rem 1rem;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  color: var(--color-text);
  background: var(--color-surface);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  box-shadow: var(--shadow-soft);
}

.case-single__thumbnail-name {
  display: block;
}

/* --- 企業ロゴ / 会社名 / リード文（事例詳細） --- */
.case-single-profile {
  padding-block: 2rem;
}

.case-single-profile__row {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.case-single-profile__logo-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--color-border-strong);
}

.case-single-profile__logo {
  max-height: 4rem;
  width: auto;
  object-fit: contain;
}

.case-single-profile__org-name {
  font-size: 1.125rem;
  line-height: 1.4;
}

.case-single-profile__lead {
  font-size: 0.875rem;
  line-height: 1.75;
  color: var(--color-text-muted);
  white-space: pre-line;
}

@media (min-width: 768px) {
  .case-single-profile__row {
    flex-direction: row;
    gap: 1.5rem;
  }

  .case-single-profile__logo-col {
    flex: 0 0 25%;
    padding-bottom: 0;
    padding-right: 1rem;
    border-bottom: none;
    border-right: 1px solid var(--color-border-strong);
  }

  .case-single-profile__lead {
    flex: 1;
    font-size: 1rem;
    line-height: 2;
  }
}

.case-single__article {
  padding: 1.5rem;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

@media (min-width: 768px) {
  .case-single__article {
    padding: 2rem;
  }
}

/* --- タクソノミータグ（case_industry / case_department / case_scene） --- */
.case-taxonomy {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.case-taxonomy__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.case-taxonomy__group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.case-taxonomy__group-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-text-subtle);
  white-space: nowrap;
}

.tag-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 0.75rem;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.4;
  color: #1d4f91;
  background: #e8f1fb;
  border: 1px solid #c8ddf5;
  border-radius: var(--radius-pill);
}

/* --- 本文（the_content の出力） --- */
.post-content > * + * {
  margin-top: 1.2em;
}

.post-content ul {
  padding-left: 1.2em;
  list-style: disc;
}

.post-content ol {
  padding-left: 1.5em;
  list-style: decimal;
}

.post-content a {
  color: var(--color-primary);
  transition: color var(--duration);
}

.post-content a:hover {
  color: var(--color-primary-hover);
}

.post-content blockquote {
  position: relative;
  margin-inline: 0;
  padding: 25px 25px 25px 15px;
  background: var(--color-surface-muted);
  border-left: 3px solid #ddd;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.post-content blockquote::before {
  content: "\201C";
  display: inline-block;
  position: absolute;
  top: 23px;
  left: 10px;
  font-size: 80px;
  line-height: 1;
  color: #ddd;
}

.post-content blockquote p {
  position: relative;
  padding-left: 1.875rem;
}

.post-content blockquote cite {
  display: block;
  font-size: 0.8rem;
  color: #a0a0a0;
  text-align: right;
}

.news-single .post-content {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--color-text);
}

.news-single .post-content h2 {
  margin-top: 1.6em;
  margin-bottom: 1em;
  font-size: 1.4em;
  font-weight: 700;
  line-height: 1.6;
}

.news-single .post-content h3 {
  margin-top: 1.6em;
  margin-bottom: 0.75em;
  font-size: 1.2em;
  font-weight: 700;
  line-height: 1.6;
}

.case-single .post-content {
  font-size: 1rem;
  line-height: 2;
  color: var(--color-text);
}

.case-single .post-content h2 {
  position: relative;
  padding-left: 1.25rem;
  margin-top: 1.6em;
  font-size: 1.4em;
  font-weight: 700;
  line-height: 2;
  scroll-margin-top: calc(var(--header-height) + 0.5rem);
}

.case-single .post-content h2::before {
  content: "";
  position: absolute;
  top: 0.4em;
  bottom: 0.4em;
  left: 0;
  width: 4px;
  background: linear-gradient(to bottom, var(--color-primary), #00353d);
  border-radius: 2px;
}

.case-single .post-content h3 {
  position: relative;
  padding-left: 2em;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.5;
}

.case-single .post-content h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 2em;
  height: 2px;
  background: currentColor;
  transform: translateY(-50%);
}

.case-single .post-content h4 {
  font-size: 1.1rem;
  font-weight: 700;
}

/* --- 目次（tw2_generate_toc が本文先頭に挿入） --- */
.case-single .post-content .toc {
  padding: 16px;
  margin-bottom: 24px;
  background: var(--color-surface-muted);
  border-radius: var(--radius-md);
}

.case-single .post-content .toc-title {
  margin-bottom: 8px;
  font-weight: 700;
}

.case-single .post-content .toc ul {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.case-single .post-content .toc ul ul {
  padding-left: 16px;
  font-size: 0.95em;
}

.case-single .post-content .toc ul li {
  position: relative;
  padding-left: 1rem;
  margin-bottom: 6px;
  font-size: 0.85rem;
  list-style: none;
}

.case-single .post-content .toc ul li::before {
  content: "・";
  position: absolute;
  top: 0;
  left: 3px;
  color: #2563eb;
}

.case-single .post-content .toc a {
  color: #2563eb;
  text-decoration: none;
}

.case-single .post-content .toc a:hover {
  text-decoration: underline;
}

.case-single .post-content .toc a.active {
  color: #1d4ed8;
  font-weight: 700;
}

.case-single .post-content .wp-block-table {
  padding: 20px;
  font-size: 0.85rem;
  background: var(--color-surface-muted);
  border-radius: var(--radius-md);
}

.case-single .post-content .case-profile {
  font-weight: 700;
}

.case-single .post-content .wp-block-table td,
.case-single .post-content .wp-block-table th {
  border: none;
}

@media (max-width: 767px) {
  .case-single .post-content .wp-block-table td,
  .case-single .post-content .wp-block-table th {
    display: block;
  }
}

/* --- リスト（「・」を手入力する素の箇条書き / .case-list の丸マーカー付き箇条書き） --- */
.case-single .post-content ul {
  padding-left: 0;
  list-style: none;
}

.case-single .post-content ul.case-list {
  padding-left: 1.2em;
  list-style: disc;
}

.case-single .post-content .case-point {
  font-weight: 700;
  font-size: 1.1em;
}

.case-single .post-content ul.case-list li + li .case-point {
  display: inline-block;
  margin-top: 0.8em;
}

.single-pagination {
  padding-top: 1rem;
  margin-top: 1.5rem;
  font-size: 0.875rem;
  border-top: 1px solid var(--color-border-muted);
}

.single-pagination > span {
  margin-right: 0.5rem;
}

/* --- 前後ナビ & 一覧へ戻る --- */
.single-nav {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-top: 1.5rem;
  margin-top: 3rem;
  border-top: 1px solid var(--color-border-muted);
  font-size: 0.875rem;
}

.single-nav__adjacent {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.single-nav__adjacent a {
  transition: opacity var(--duration);
}

.single-nav__adjacent a:hover {
  opacity: 0.7;
}

@media (min-width: 768px) {
  .single-nav {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .single-nav__adjacent {
    flex-direction: row;
    gap: 1.5rem;
  }
}

.single-back {
  margin-top: 1.5rem;
  text-align: right;
}

/* --- 記事内CTA帯 --- */
.inline-cta {
  padding: 2.5rem 1.5rem;
  margin-top: 3rem;
  text-align: center;
  background: var(--color-surface-tint);
  border-radius: var(--radius-lg);
}

.inline-cta__title {
  margin-bottom: 1rem;
  font-size: 1.125rem;
  font-weight: 700;
}

.inline-cta__lead {
  max-width: 36rem;
  margin: 0 auto 2rem;
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

@media (min-width: 768px) {
  .inline-cta__title {
    font-size: 1.375rem;
  }

  .inline-cta__lead {
    font-size: 1rem;
  }
}


/* ==========================================================================
   22. アーカイブ一覧共通（事例 / イベント / ニュース / ページネーション）
   ========================================================================== */
.archive-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 2rem;
}

.archive-header__eyebrow {
  font-size: 0.875rem;
  color: var(--color-primary);
}

.archive-header__title {
  font-size: 1.875rem;
  font-weight: 800;
  line-height: 1.3;
}

@media (min-width: 768px) {
  .archive-header {
    margin-bottom: 3rem;
  }

  .archive-header__title {
    font-size: 3rem;
  }
}

/* --- カード一覧グリッド（事例 / イベント） --- */
.archive-grid {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .archive-grid {
    gap: 2rem;
    grid-template-columns: 1fr 1fr;
  }
}

.archive-card {
  overflow: hidden;
  background: var(--color-surface);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-elevated);
  transition: box-shadow var(--duration);
}

.archive-card:hover {
  box-shadow: var(--shadow-elevated-hover);
}

.archive-card__link {
  display: block;
  height: 100%;
}

.archive-card__media {
  position: relative;
  display: block;
  width: 100%;
  height: 12rem;
  overflow: hidden;
}

.archive-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease-out;
}

.archive-card:hover .archive-card__media img {
  transform: scale(1.1);
}

.archive-card__placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-size: 0.875rem;
  color: var(--color-text-faint);
  background: var(--color-border-faint);
}

.archive-card__body {
  padding: 1.5rem;
}

.archive-card__logo {
  display: block;
  max-width: 10rem;
  height: auto;
  margin: 0 auto 1rem;
  object-fit: contain;
}

.archive-card__title {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.6;
  transition: opacity var(--duration);
}

.archive-card:hover .archive-card__title,
.archive-card__title-link:hover {
  opacity: 0.8;
}

.archive-card__org {
  padding-top: 1rem;
  margin-top: 1rem;
  font-size: 0.875rem;
  text-align: center;
  color: var(--color-text-faint);
  border-top: 1px solid var(--color-border-muted);
}

.archive-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  font-size: 0.75rem;
  color: var(--color-text-faint);
}

.archive-card__excerpt {
  margin-top: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.archive-card__more {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 1rem;
  font-size: 0.8125rem;
  color: var(--color-primary);
  transition: opacity var(--duration);
}

.archive-card__more:hover {
  opacity: 0.7;
}

.archive-card__more .icon {
  width: 0.875rem;
  height: 0.875rem;
}

.archive-card__hashtags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.hashtag-chip {
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-on-dark);
  background: var(--color-text);
  border-radius: var(--radius-xs);
}

@media (min-width: 768px) {
  .archive-card__media {
    height: 14rem;
  }

  .archive-card__body {
    padding: 2rem;
  }

  .archive-card__title {
    font-size: 1.125rem;
  }
}

/* --- ニュース一覧: front-page の .news / .news-item / .news__list をそのまま再利用 --- */

/* --- ページネーション（the_posts_pagination の出力） --- */
.archive-pagination {
  margin-top: 2rem;
}

.archive-pagination .nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
}

.archive-pagination .page-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.1875rem;
  height: 2.1875rem;
  font-size: 0.875rem;
  border: 1px solid var(--color-text-faint);
  border-radius: 3px;
}

.archive-pagination .page-numbers.current {
  color: var(--color-on-dark);
  background: var(--color-text);
  border-color: var(--color-text);
}

.archive-pagination .page-numbers.prev,
.archive-pagination .page-numbers.next {
  border: none;
}

/* --- 導入事例/イベント一覧が空のとき --- */
.archive-empty {
  padding-block: 2rem;
  color: var(--color-text-muted);
}


/* ==========================================================================
   23. 固定ページ / 404
   ========================================================================== */
.error-404 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 6rem 1.5rem;
  text-align: center;
  color: var(--color-on-dark);
  background: var(--color-surface-dark);
}

.error-404__code {
  font-size: 3.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.error-404__lead {
  margin-top: 1rem;
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--color-on-dark-muted);
}

.error-404__note {
  margin-top: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--color-on-dark-subtle);
}

.error-404__back {
  display: inline-block;
  padding: 0.75rem 2rem;
  margin-top: 2.5rem;
  font-weight: 700;
  color: var(--color-on-dark);
  /* 現行サイトのボタン配色（サイト共通のCTAブルーとは別系統のティール）を維持 */
  background: #31a2b2;
  border-radius: var(--radius-sm);
  transition: background-color var(--duration);
}

.error-404__back:hover {
  background: #238593;
}

@media (min-width: 768px) {
  .error-404__code {
    font-size: 5rem;
  }

  .error-404__lead {
    font-size: 1.25rem;
  }

  .error-404__note {
    font-size: 1rem;
  }
}

/* --- 固定ページ「お問い合わせ」 --- */
.page-contact {
  display: grid;
  gap: 2.5rem;
}

.page-contact__body {
  padding: 1.5rem;
}

@media (min-width: 768px) {
  .page-contact {
    grid-template-columns: 16.25rem 1fr;
    align-items: start;
  }

  .page-contact__body {
    padding: 2rem;
  }
}

/* --- 固定ページ（汎用） --- */
.page__title {
  margin-bottom: 2rem;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
}

@media (min-width: 768px) {
  .page__title {
    margin-bottom: 2.5rem;
    font-size: 1.875rem;
  }
}

.page__article {
  background: var(--color-surface);
  border-radius: var(--radius-md);
}