/* ==========================================================================
   style.css — エントリポイント
   プロジェクト: SCP 新WEBサイト
   作成: D5.ui-designer
   更新: D13.frontend-coder（Sprint 0 共通CSS補完）

   読み込み順序:
   1. base/     — リセット → 変数 → タイポグラフィ → グローバル
   2. components/ — 共通UIコンポーネント
   3. pages/    — ページ固有スタイル
   4. utilities/ — アニメーション・アクセシビリティ
   ========================================================================== */

/* === 認証ロック（最優先で読み込み） === */
/* [PROD] _simple-auth.css は本番のため除外 */

/* === Base === */
/* === base/_reset.css === */
/* ==========================================================================
   _reset.css — Modern Normalize 相当の自前リセット
   プロジェクト: SCP 新WEBサイト
   作成: D5.ui-designer
   ========================================================================== */

/* --- Box Model --- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* --- Document --- */
html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  line-height: 1.15;
  -webkit-tap-highlight-color: transparent;
}

/* --- Sections --- */
body {
  min-height: 100vh;
  min-height: 100dvh;
}

main {
  display: block;
}

/* --- Grouping Content --- */
hr {
  height: 0;
  color: inherit;
  border-top-width: 1px;
}

/* --- Text-level semantics --- */
a {
  color: inherit;
  text-decoration: none;
  background-color: transparent;
}

b,
strong {
  font-weight: bolder;
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* --- Embedded Content --- */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
  border-style: none;
}

/* --- Forms --- */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
  appearance: button;
  cursor: pointer;
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

fieldset {
  padding: 0;
  margin: 0;
  border: 0;
}

legend {
  padding: 0;
}

textarea {
  overflow: auto;
  resize: vertical;
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

[type="search"] {
  -webkit-appearance: textfield;
  appearance: textfield;
  outline-offset: -2px;
}

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

/* --- Interactive --- */
summary {
  display: list-item;
}

/* --- Tables --- */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* --- Lists --- */
ol,
ul {
  list-style: none;
}

/* --- Misc --- */
[hidden] {
  display: none;
}

/* === base/_variables.css === */
/* ==========================================================================
   _variables.css — CSS カスタムプロパティ（デザイントークン）
   プロジェクト: SCP 新WEBサイト
   作成: D5.ui-designer

   pattern-a-shidax-corporate.html の値を architecture.md 命名規則に統一。
   デザイン変更時はこのファイルの値を差替えるだけで全コンポーネントに波及する。
   ========================================================================== */

:root {
  /* ===================================================================
     カラーパレット
     pattern-a 変数名 → architecture.md 変数名のマッピング:
       --red        → --color-primary
       --red-dark   → --color-primary-dark
       --dark       → --color-secondary / --color-bg-dark
       --gray       → --color-text-secondary
       --light-gray → --color-bg-secondary
       --white      → --color-bg-primary
       --border     → --color-border
     =================================================================== */
  --color-primary: #DC000C;
  --color-primary-dark: #b0000a;
  --color-primary-light: #ff3333;
  --color-secondary: #1a1311;
  --color-accent: #f5a623;

  --color-text-primary: #333333;
  --color-text-secondary: #666666;
  --color-text-light: #999999;
  --color-text-white: #ffffff;

  --color-bg-primary: #ffffff;
  --color-bg-secondary: #f5f5f5;
  --color-bg-dark: #1a1311;
  --color-bg-overlay: rgba(26, 19, 17, 0.55);

  --color-border: #e8e8e8;
  --color-border-light: #f0f0f0;

  /* ===================================================================
     タイポグラフィ
     pattern-a: 見出し = 明朝体、本文 = ゴシック体
     architecture.md のフォントサイズ体系をそのまま採用
     =================================================================== */
  --font-family-base: "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic",
                       "Meiryo", sans-serif;
  --font-family-heading: "Hiragino Mincho ProN", "Noto Serif JP", "Yu Mincho",
                          serif;

  --font-size-xs: 0.75rem;       /* 12px */
  --font-size-sm: 0.875rem;      /* 14px */
  --font-size-base: 1rem;        /* 16px */
  --font-size-lg: 1.125rem;      /* 18px */
  --font-size-xl: 1.25rem;       /* 20px */
  --font-size-2xl: 1.5rem;       /* 24px */
  --font-size-3xl: 1.875rem;     /* 30px */
  --font-size-4xl: 2.25rem;      /* 36px */
  --font-size-5xl: 3rem;         /* 48px */

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-tight: 1.4;
  --line-height-base: 1.8;
  --line-height-loose: 2.0;

  --letter-spacing-tight: 0.04em;
  --letter-spacing-base: 0.06em;
  --letter-spacing-wide: 0.08em;
  --letter-spacing-wider: 0.12em;

  /* ===================================================================
     スペーシング
     architecture.md § 4.2 準拠
     =================================================================== */
  --spacing-xs: 0.25rem;         /* 4px */
  --spacing-sm: 0.5rem;          /* 8px */
  --spacing-md: 1rem;            /* 16px */
  --spacing-lg: 1.5rem;          /* 24px */
  --spacing-xl: 2rem;            /* 32px */
  --spacing-2xl: 3rem;           /* 48px */
  --spacing-3xl: 4rem;           /* 64px */
  --spacing-4xl: 6rem;           /* 96px */
  --spacing-section: 5rem;       /* 80px - セクション間余白 */
  --spacing-section-sp: 3.75rem; /* 60px - SP時セクション間余白 */

  /* ===================================================================
     レイアウト
     =================================================================== */
  --container-max-width: 1200px;
  --container-wide-max-width: 1280px;
  --container-padding: 1rem;
  --container-padding-tablet: 2rem;
  --container-padding-pc: 2.5rem;
  --header-height: 80px;
  --header-height-mobile: 60px;

  /* ===================================================================
     アニメーション
     =================================================================== */
  --transition-fast: 150ms ease;
  --transition-base: 300ms ease;
  --transition-slow: 500ms ease;

  /* ===================================================================
     シャドウ
     =================================================================== */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
  --shadow-header: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-card-hover: 0 8px 32px rgba(0, 0, 0, 0.1);

  /* ===================================================================
     ボーダー半径
     =================================================================== */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;
}

/* === base/_typography.css === */
/* ==========================================================================
   _typography.css — フォント定義・見出し・本文の基本タイポグラフィ
   プロジェクト: SCP 新WEBサイト
   作成: D5.ui-designer

   明朝体見出し + ゴシック本文（pattern-a デザインコンセプト準拠）
   ========================================================================== */

/* --- 本文ベース --- */
body {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-base);
  color: var(--color-text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --- 見出し共通 --- */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  color: var(--color-secondary);
  letter-spacing: var(--letter-spacing-base);
}

/* --- 見出しサイズ（SP ベース） --- */
h1 {
  font-size: var(--font-size-2xl);
}

h2 {
  font-size: var(--font-size-xl);
}

h3 {
  font-size: var(--font-size-lg);
}

h4 {
  font-size: var(--font-size-base);
}

h5 {
  font-size: var(--font-size-sm);
}

h6 {
  font-size: var(--font-size-xs);
}

/* --- タブレット以上 --- */
@media (min-width: 768px) {
  h1 {
    font-size: var(--font-size-3xl);
  }

  h2 {
    font-size: var(--font-size-2xl);
  }

  h3 {
    font-size: var(--font-size-xl);
  }
}

/* --- PC以上 --- */
@media (min-width: 1280px) {
  h1 {
    font-size: var(--font-size-4xl);
  }

  h2 {
    font-size: var(--font-size-3xl);
  }

  h3 {
    font-size: var(--font-size-2xl);
  }
}

/* --- 段落 --- */
p {
  margin-bottom: var(--spacing-md);
}

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

/* --- 補助テキスト --- */
small {
  font-size: var(--font-size-sm);
}

/* --- 英字ラベル（セクションヘッダー等で使用） --- */
.text-label-en {
  font-family: var(--font-family-base);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  color: var(--color-primary);
}

/* === base/_global.css === */
/* ==========================================================================
   _global.css — html, body, a, img 等の基本スタイル
   プロジェクト: SCP 新WEBサイト
   作成: D5.ui-designer
   ========================================================================== */

/* --- Document --- */
html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--color-bg-primary);
  overflow-x: hidden;
}

/* --- ヘッダー固定分のオフセット --- */
body {
  padding-top: var(--header-height-mobile);
}

@media (min-width: 1280px) {
  body {
    padding-top: var(--header-height);
  }
}

/* --- Links --- */
a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-base);
}

a:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* --- Images --- */
img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

/* --- Selection --- */
::selection {
  background-color: var(--color-primary);
  color: var(--color-text-white);
}

/* --- Container --- */
.container {
  width: 100%;
  max-width: var(--container-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

@media (min-width: 768px) {
  .container {
    padding-left: var(--container-padding-tablet);
    padding-right: var(--container-padding-tablet);
  }
}

@media (min-width: 1280px) {
  .container {
    padding-left: var(--container-padding-pc);
    padding-right: var(--container-padding-pc);
  }
}

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

/* --- Section spacing --- */
.section {
  padding-top: var(--spacing-section-sp);
  padding-bottom: var(--spacing-section-sp);
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
  max-width: var(--container-wide-max-width);
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 768px) {
  .section {
    padding-left: var(--container-padding-tablet);
    padding-right: var(--container-padding-tablet);
  }
}

@media (min-width: 1280px) {
  .section {
    padding-top: var(--spacing-section);
    padding-bottom: var(--spacing-section);
    padding-left: var(--container-padding-pc);
    padding-right: var(--container-padding-pc);
  }
}

/* --- Section background modifiers --- */
.section--gray {
  background-color: var(--color-bg-secondary);
}

.section--dark {
  background-color: var(--color-bg-dark);
  color: var(--color-text-white);
}


/* === Components === */
/* === components/_header.css === */
/* ==========================================================================
   _header.css — C1: 固定ヘッダー + 赤ボーダー
   プロジェクト: SCP 新WEBサイト
   作成: D5.ui-designer
   BEM: .header / .header__inner / .header__logo / .header__nav / ...
   ========================================================================== */

/* --- Block --- */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background-color: var(--color-bg-primary);
  border-bottom: 3px solid var(--color-primary);
  box-shadow: var(--shadow-header);
}

/* --- Inner container --- */
.header__inner {
  max-width: var(--container-wide-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
  height: var(--header-height-mobile);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

@media (min-width: 768px) {
  .header__inner {
    padding-left: var(--container-padding-tablet);
    padding-right: var(--container-padding-tablet);
  }
}

@media (min-width: 1280px) {
  .header__inner {
    padding-left: var(--container-padding-pc);
    padding-right: var(--container-padding-pc);
    height: var(--header-height);
  }
}

/* --- Logo --- */
.header__logo {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--spacing-sm);
}

.header__logo img,
.header__logo svg {
  height: 36px;
  width: auto;
  display: block;
}

@media (min-width: 768px) {
  .header__logo img,
  .header__logo svg {
    height: 40px;
  }
}

@media (min-width: 1280px) {
  .header__logo img,
  .header__logo svg {
    height: 44px;
  }
}

.header__logo-label {
  font-size: var(--font-size-base);
  color: var(--color-secondary);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-base);
  white-space: nowrap;
  line-height: 1;
}

@media (min-width: 1280px) {
  .header__logo-label {
    font-size: var(--font-size-lg);
  }
}

/* --- Navigation --- */
.header__nav {
  display: none;
  align-items: center;
  gap: var(--spacing-xl);
}

@media (min-width: 768px) {
  .header__nav {
    display: flex;
  }
}

.header__nav-list {
  display: flex;
  align-items: center;
  gap: var(--spacing-xl);
}

.header__nav-link {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-secondary);
  transition: color var(--transition-base);
  position: relative;
}

.header__nav-link:hover {
  color: var(--color-primary);
}

.header__nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 2px;
  background-color: var(--color-primary);
  transition: width var(--transition-base);
}

.header__nav-link:hover::after {
  width: 100%;
}

/* --- CTA Button in header --- */
.header__cta-button {
  display: inline-block;
  background-color: var(--color-primary);
  color: var(--color-text-white);
  padding: var(--spacing-sm) var(--spacing-lg);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-tight);
  transition: background-color var(--transition-base);
}

.header__cta-button:hover {
  background-color: var(--color-primary-dark);
  color: var(--color-text-white);
}

/* --- Hamburger button (SP) --- */
.header__hamburger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

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

.header__hamburger-line,
.header__hamburger-line::before,
.header__hamburger-line::after {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--color-secondary);
  transition: transform var(--transition-base), opacity var(--transition-base);
}

.header__hamburger-line {
  position: relative;
}

.header__hamburger-line::before,
.header__hamburger-line::after {
  content: "";
  position: absolute;
  left: 0;
}

.header__hamburger-line::before {
  top: -8px;
}

.header__hamburger-line::after {
  top: 8px;
}

/* --- Mobile nav open state --- */
.header__nav.is-open {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  position: fixed;
  top: var(--header-height-mobile);
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--color-bg-primary);
  padding: var(--spacing-xl) var(--container-padding);
  overflow-y: auto;
  z-index: 999;
}

.header__nav.is-open .header__nav-list {
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  width: 100%;
}

.header__nav.is-open .header__nav-link {
  display: block;
  padding: var(--spacing-md) 0;
  font-size: var(--font-size-lg);
  border-bottom: 1px solid var(--color-border);
  width: 100%;
}

.header__nav.is-open .header__cta-button {
  margin-top: var(--spacing-xl);
  width: 100%;
  text-align: center;
  padding: var(--spacing-md);
}

/* =====================================================================
   Mobile Nav (20260508): ハンバーガーメニュー専用 事業×子サービス階層
   PC では非表示。モバイルでドロワー展開時のみ表示する。
   ===================================================================== */
.mobile-nav {
  display: none;
}

/* PC: 完全非表示 */
@media (min-width: 768px) {
  .mobile-nav {
    display: none !important;
  }
}

/* モバイル: ドロワー展開時に表示し、PC用 .header__nav-list は隠す */
.header__nav.is-open .header__nav-list {
  display: none;
}

.header__nav.is-open .mobile-nav {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  list-style: none;
  padding: 0;
  margin: 0;
}

.mobile-nav__item--category {
  border-bottom: 1px solid var(--color-border);
}

.mobile-nav__link--category {
  display: block;
  padding: var(--spacing-md) 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-secondary);
}

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

.mobile-nav__sublist {
  list-style: none;
  padding: 0 0 var(--spacing-sm) var(--spacing-lg);
  margin: 0;
}

.mobile-nav__item--child {
  padding: 0;
}

.mobile-nav__link--child {
  display: block;
  padding: var(--spacing-sm) 0;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-primary);
  position: relative;
}

.mobile-nav__link--child::before {
  content: "—";
  display: inline-block;
  margin-right: var(--spacing-sm);
  color: var(--color-text-tertiary, var(--color-text-secondary));
}

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

/* --- Hamburger open state --- */
.header__hamburger[aria-expanded="true"] .header__hamburger-line {
  background-color: transparent;
}

.header__hamburger[aria-expanded="true"] .header__hamburger-line::before {
  top: 0;
  transform: rotate(45deg);
}

.header__hamburger[aria-expanded="true"] .header__hamburger-line::after {
  top: 0;
  transform: rotate(-45deg);
}

/* ==========================================================================
   20260629: スマホでロゴ横ブランド名(シダックス・コミュニティープラス)とハンバーガーが
   重なる問題を解消。ロゴ領域を可変(min-width:0)にして、ブランド名は画面幅に応じて縮小し、
   収まらない場合は「シダックス・」の後で2行に折返す。ハンバーガー領域(44px)は固定確保。
   ========================================================================== */
@media (max-width: 767px) {
  .header__inner {
    gap: 8px;
  }
  .header__logo {
    flex: 1 1 auto;
    min-width: 0;            /* 子要素のはみ出しを許可せず縮ませる */
  }
  .header__logo img {
    flex: 0 0 auto;
    height: 32px;
  }
  .header__logo-label {
    min-width: 0;
    white-space: normal;      /* 収まらなければ折り返す（重ならない） */
    word-break: keep-all;     /* CJKを途中で折らず、<wbr>の「シダックス・」の後で改行させる */
    line-height: 1.18;
    font-size: clamp(0.68rem, 2.7vw, 0.92rem);
  }
  .header__hamburger {
    flex: 0 0 44px;           /* ハンバーガー領域を必ず確保 */
    margin-left: 4px;
  }
}

/* ==========================================================================
   20260703: 横の画面ピクセル数が小さいスマホ(iPhone 13 mini=375px等)のときだけ、
   SHIDAXロゴを小さく＋ブランド名フォントを小さくして、ハンバーガー/✕ボタンの
   表示エリアを確保する（1行に収め、重なりを防ぐ）。
   ※PC・横ピクセルが多いスマホ(>400px)は現状のまま。
   ========================================================================== */
@media (max-width: 400px) {
  .header__logo img {
    height: 26px;              /* ロゴをさらに縮小（通常32px→26px） */
  }
  .header__logo-label {
    font-size: clamp(0.58rem, 2.5vw, 0.78rem);  /* ブランド名フォントをさらに縮小 */
    letter-spacing: 0;
  }
  .header__inner {
    gap: 6px;
  }
}

/* === components/_footer.css === */
/* ==========================================================================
   _footer.css — C9: ダーク背景フッター
   プロジェクト: SCP 新WEBサイト
   作成: D5.ui-designer
   BEM: .footer / .footer__inner / .footer__nav / .footer__sns / ...
   ========================================================================== */

/* --- Block --- */
.footer {
  background-color: var(--color-bg-dark);
  color: rgba(255, 255, 255, 0.7);
  padding: var(--spacing-section-sp) var(--container-padding) var(--spacing-lg);
}

@media (min-width: 768px) {
  .footer {
    padding-left: var(--container-padding-tablet);
    padding-right: var(--container-padding-tablet);
  }
}

@media (min-width: 1280px) {
  .footer {
    padding: var(--spacing-section) var(--container-padding-pc) var(--spacing-lg);
  }
}

/* --- Inner --- */
.footer__inner {
  max-width: var(--container-wide-max-width);
  margin-left: auto;
  margin-right: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-xl);
  margin-bottom: var(--spacing-2xl);
}

@media (min-width: 768px) {
  .footer__inner {
    grid-template-columns: 1fr 2fr;
    gap: var(--spacing-section-sp);
  }
}

/* --- Logo area --- */
.footer__logo img {
  height: 30px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
}

.footer__logo-tagline {
  font-size: var(--font-size-xs);
  color: var(--color-primary);
  letter-spacing: var(--letter-spacing-wide);
  margin-top: var(--spacing-xs);
  display: block;
}

.footer__company {
  font-size: var(--font-size-xs);
  margin-top: var(--spacing-md);
  line-height: var(--line-height-base);
}

/* --- Navigation --- */
.footer__nav {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-md);
}

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

.footer__nav-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.footer__nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.footer__nav-heading {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-white);
  margin-bottom: var(--spacing-xs);
}

.footer__nav-heading--link {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-white);
  margin-bottom: var(--spacing-xs);
  transition: color var(--transition-base);
  display: block;
}

.footer__nav-heading--link:hover {
  color: rgba(255, 255, 255, 0.75);
}

.footer__nav-link {
  font-size: var(--font-size-xs);
  color: rgba(255, 255, 255, 0.6);
  transition: color var(--transition-base);
}

.footer__nav-link:hover {
  color: var(--color-text-white);
}

.footer__nav-link--child {
  font-size: var(--font-size-xs);
  color: rgba(255, 255, 255, 0.5);
  transition: color var(--transition-base);
  padding-left: 0.75em;
}

.footer__nav-link--child:hover {
  color: var(--color-text-white);
}

/* --- Isolated group (About Us / お問い合わせ など独立太字グループ) --- */
.footer__nav-group--isolated {
  margin-top: var(--spacing-lg);
}

.footer__nav-heading--isolated {
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-base);
  letter-spacing: 0.02em;
}

/* --- Bottom bar --- */
.footer__bottom {
  max-width: var(--container-wide-max-width);
  margin-left: auto;
  margin-right: auto;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: var(--spacing-md);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  align-items: center;
  text-align: center;
  font-size: var(--font-size-xs);
}

@media (min-width: 768px) {
  .footer__bottom {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

/* --- SNS icons --- */
.footer__sns {
  display: flex;
  gap: var(--spacing-md);
}

.footer__sns-link {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xs);
  color: rgba(255, 255, 255, 0.6);
  transition: border-color var(--transition-base), color var(--transition-base);
}

.footer__sns-link:hover {
  border-color: var(--color-text-white);
  color: var(--color-text-white);
}

/* --- Legal --- */
.footer__privacy-link {
  color: rgba(255, 255, 255, 0.6);
  transition: color var(--transition-base);
}

.footer__privacy-link:hover {
  color: var(--color-text-white);
}

.footer__copyright {
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 0;
}

/* === components/_button.css === */
/* ==========================================================================
   _button.css — C10: ボタンバリエーション
   プロジェクト: SCP 新WEBサイト
   作成: D5.ui-designer
   BEM: .button / .button--primary / .button--outline / .button--ghost / ...
   ========================================================================== */

/* --- Base button --- */
.button {
  display: inline-block;
  padding: var(--spacing-md) var(--spacing-2xl);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-base);
  text-align: center;
  cursor: pointer;
  border: 2px solid transparent;
  transition: background-color var(--transition-base),
              color var(--transition-base),
              transform var(--transition-base),
              box-shadow var(--transition-base);
}

.button:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* --- Primary (赤背景・白文字) --- */
.button--primary {
  background-color: var(--color-primary);
  color: var(--color-text-white);
  border-color: var(--color-primary);
}

.button--primary:hover {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  transform: translateY(-2px);
  color: var(--color-text-white);
}

/* --- Outline (赤枠・赤文字 → ホバーで赤背景) --- */
.button--outline {
  background-color: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}

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

/* --- Ghost (白枠・白文字 — ヒーロー上用) --- */
.button--ghost {
  background-color: transparent;
  color: var(--color-text-white);
  border-color: var(--color-text-white);
}

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

/* --- White (白背景・赤文字 — CTA上用) --- */
.button--white {
  background-color: var(--color-text-white);
  color: var(--color-primary);
  border-color: var(--color-text-white);
}

.button--white:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* --- Size: Small --- */
.button--sm {
  padding: var(--spacing-sm) var(--spacing-lg);
  font-size: var(--font-size-sm);
}

/* --- Size: Large --- */
.button--lg {
  padding: var(--spacing-md) var(--spacing-3xl);
  font-size: var(--font-size-lg);
}

/* --- Link-style button (with arrow) --- */
.button--link {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: 0;
  border: none;
  background-color: transparent;
  color: var(--color-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  border-radius: 0;
  transition: gap var(--transition-base);
}

.button--link::after {
  content: "\2192"; /* → */
}

.button--link:hover {
  gap: var(--spacing-md);
}

/* === components/_card.css === */
/* ==========================================================================
   _card.css — C4+C5: サービスカード・事例カード
   プロジェクト: SCP 新WEBサイト
   作成: D5.ui-designer
   BEM: .service-card / .case-card
   ========================================================================== */

/* =====================================================================
   Service Card (C4)
   ===================================================================== */

/* --- Grid --- */
.service-card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-xl);
}

@media (min-width: 768px) {
  .service-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1280px) {
  .service-card-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --- Variants --- */
/* --auto: TOPページ 3事業領域カード
   20260513 (改訂): タブレット以上は3列固定で横並び1行表示 */
.service-card-grid--auto {
  grid-template-columns: 1fr;
  justify-content: center;
}

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

/* --- Card --- */
.service-card {
  background-color: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: box-shadow var(--transition-base), transform var(--transition-base);
  position: relative; /* stretched-link の基点 */
}

.service-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-4px);
  cursor: pointer;
}

/* カード内の .service-card__link を疑似要素でカード全体に広げ、
   カード全域をクリッカブルにする（stretched-link パターン） */
.service-card__link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* カード内部のボタン/リンク（service-card__link 自体を除く）は
   疑似要素より上に置き、誤クリック防止 */
.service-card__body > *:not(.service-card__link) {
  position: relative;
  z-index: 0;
}

/* 20260528 ID31-再再修正(v2): description 内に個別リンクを持つカード全般で
   stretched-link を無効化し、description 内の各サービス個別リンクを優先する。
   :has() セレクタで条件判定（TOP /scp/ と サービスTOP /scp/service/ の両方に効く）。
   「詳しく見る」リンクは個別 a で残るためカード全体クリックは失っても OK。 */
.service-card:has(.service-card__description a) .service-card__link::before,
.service-card--category .service-card__link::before {
  display: none;
}
.service-card:has(.service-card__description a) .service-card__body > .service-card__description,
.service-card--category .service-card__body > .service-card__description {
  position: relative;
  z-index: 3;
}
.service-card:has(.service-card__description a) .service-card__description a,
.service-card--category .service-card__description a {
  position: relative;
  z-index: 4;
  pointer-events: auto;
}

/* 20260528 ID37-延長: 画像領域・タイトル領域を個別 <a> でクリック可能化（カード全体クリックの代替）。
   stretched-link を無効化したため、画像・タイトル・description個別・詳しく見るボタン
   それぞれが独立したリンクとして機能する設計に。 */
.service-card__image-link {
  display: block;
  position: relative;
  z-index: 4;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.service-card__image-link:hover {
  opacity: 0.92;
}
.service-card__title-link {
  color: inherit;
  text-decoration: none;
  position: relative;
  z-index: 4;
}
.service-card__title-link:hover {
  color: var(--color-primary);
}

/* --- Image --- */
.service-card__image {
  width: 100%;
  /* 20260626: 固定高さ(180/200px)だと単一カラム時に画像が横長すぎて被写体が
     判別できないため、カード幅に比例するアスペクト比に変更（全幅でも縦が確保される） */
  aspect-ratio: 16 / 9;
  position: relative;
  overflow: hidden;
}

.service-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.service-card__image-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--spacing-sm) var(--spacing-md);
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.5));
  color: var(--color-text-white);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}

/* --- Body --- */
.service-card__body {
  padding: var(--spacing-lg);
}

/* --- Title --- */
.service-card__title {
  font-family: var(--font-family-base);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--spacing-sm);
  color: var(--color-secondary);
  line-height: var(--line-height-tight);
}

/* T014: エンターテインメント事業は文字数が多く改行されるため
   タイトルだけフォントを少し下げて1行に収める */
.service-card[data-slug="entertainment"] .service-card__title {
  font-size: var(--font-size-base);
  letter-spacing: -0.01em;
}

@media (min-width: 768px) {
  .service-card[data-slug="entertainment"] .service-card__title {
    font-size: var(--font-size-md, var(--font-size-base));
  }
}

/* --- Description --- */
.service-card__description {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-md);
  line-height: var(--line-height-base);
}

/* description内インラインリンク（T013: 4事業領域の施設運営事業内サービス名リンク化）
   stretched-link（::before）の上に重ねるため z-index を引き上げる */
.service-card__description a {
  position: relative;
  z-index: 2;
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.service-card__description a:hover {
  text-decoration-thickness: 2px;
}

/* --- Link --- */
.service-card__link {
  font-size: var(--font-size-sm);
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  transition: gap var(--transition-base);
}

.service-card__link:hover {
  gap: var(--spacing-md);
}

.service-card__link::after {
  content: "\2192"; /* → */
}

/* =====================================================================
   Case Card (C5)
   ===================================================================== */

/* --- Grid --- */
.case-card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-xl);
}

@media (min-width: 768px) {
  .case-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1280px) {
  .case-card-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --- Card --- */
.case-card {
  background-color: var(--color-bg-primary);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.case-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-4px);
}

/* --- Image --- */
.case-card__image {
  width: 100%;
  /* 20260626: 単一カラム時の横長つぶれ対策（アスペクト比でカード幅に追従） */
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.case-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Body --- */
.case-card__body {
  padding: var(--spacing-lg);
}

@media (min-width: 768px) {
  .case-card__body {
    padding: var(--spacing-md);
  }
}

/* --- Tag --- */
.case-card__tag {
  display: inline-block;
  background-color: var(--color-primary);
  color: var(--color-text-white);
  font-size: var(--font-size-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: 2px;
  margin-bottom: var(--spacing-sm);
  line-height: 1;
}

/* --- Title --- */
.case-card__title {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--spacing-sm);
  color: var(--color-text-primary);
  line-height: var(--line-height-tight);
}

/* --- Description --- */
.case-card__description {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  line-height: var(--line-height-base);
}

/* --- Clickable card link wrapper (F7) --- */
.case-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: var(--radius-md);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.case-card-link:hover .case-card {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-4px);
}

.case-card-link:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Remove hover from .case-card when wrapped in link */
.case-card-link .case-card {
  box-shadow: var(--shadow-sm);
}

.case-card-link .case-card:hover {
  box-shadow: inherit;
  transform: none;
}

/* --- More button wrapper --- */
.case-card-grid__more {
  text-align: center;
  margin-top: var(--spacing-2xl);
}

/* ==========================================================================
   20260703: 画像枠内の <picture>（ビルド後処理でwebp対応のため付与される）に
   高さが無いと、中の <img> が自然高さで表示され、カードごとに画像の高さがバラつく。
   picture を枠いっぱいに広げ、object-fit:cover を有効化して高さを揃える。
   対象: TOPカード/関連サービス/サービスTOP詳細カード/teaser 等すべての画像枠。
   ========================================================================== */
.service-card__image picture,
.service-card__image-wrap picture,
.teaser-card__image picture,
.case-card__image picture {
  display: block;
  width: 100%;
  height: 100%;
}

/* === components/_hero.css === */
/* ==========================================================================
   _hero.css — C2: 動画背景ヒーローセクション
   プロジェクト: SCP 新WEBサイト
   作成: D5.ui-designer
   BEM: .hero / .hero__video-wrap / .hero__overlay / .hero__content / ...
   ========================================================================== */

/* --- Block --- */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: var(--color-bg-dark);
}

@media (min-width: 768px) {
  .hero {
    min-height: 600px;
  }
}

/* --- Video wrapper --- */
.hero__video-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hero__video-wrap video {
  width: 100%;
  height: 111%;
  object-fit: cover;
  object-position: center top;
}

/* --- Overlay --- */
.hero__overlay {
  position: absolute;
  inset: 0;
  background-color: var(--color-bg-overlay);
}

/* --- Content --- */
.hero__content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: var(--color-text-white);
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

@media (min-width: 768px) {
  .hero__content {
    padding-left: var(--container-padding-pc);
    padding-right: var(--container-padding-pc);
  }
}

/* --- Hero copy (heading) --- */
.hero__copy {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-base);
  letter-spacing: var(--letter-spacing-wide);
  margin-bottom: var(--spacing-md);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

@media (min-width: 768px) {
  .hero__copy {
    font-size: var(--font-size-4xl);
  }
}

@media (min-width: 1280px) {
  .hero__copy {
    font-size: var(--font-size-5xl);
  }
}

/* --- Hero sub text --- */
.hero__sub {
  font-size: var(--font-size-sm);
  letter-spacing: var(--letter-spacing-base);
  margin-bottom: var(--spacing-2xl);
  opacity: 0.9;
}

@media (min-width: 768px) {
  .hero__sub {
    font-size: var(--font-size-base);
  }
}

/* --- CTA button group --- */
.hero__cta-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-md);
}

@media (min-width: 768px) {
  .hero__cta-group {
    flex-direction: row;
    justify-content: center;
  }
}

/* --- Scroll indicator --- */
.hero__scroll {
  position: absolute;
  bottom: var(--spacing-xl);
  left: 50%;
  transform: translateX(-50%);
  color: var(--color-text-white);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-wider);
  text-align: center;
  opacity: 0.7;
  z-index: 2;
}

.hero__scroll::after {
  content: "";
  display: block;
  width: 1px;
  height: 40px;
  background-color: var(--color-text-white);
  margin: var(--spacing-sm) auto 0;
  animation: hero-scroll-line 1.5s ease-in-out infinite;
}

@keyframes hero-scroll-line {
  0% {
    opacity: 0;
    transform: scaleY(0);
    transform-origin: top;
  }
  50% {
    opacity: 1;
    transform: scaleY(1);
    transform-origin: top;
  }
  100% {
    opacity: 0;
    transform: scaleY(1);
    transform-origin: bottom;
  }
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  .hero__scroll::after {
    animation: none;
    opacity: 0.5;
  }

  .hero__video-wrap video {
    animation: none;
  }
}


/* 20260526 ID14: AI生成注記
   20260702: SP=メイン画像の「下」に静的表示（CTA/Scrollとの重なり防止）
             PC=従来どおり画像内の右下にオーバーレイ（.hero-wrap基準） */
.hero-wrap {
  position: relative;
}
.hero__ai-notice { /* SP(モバイル基準): 画像の下のキャプション */
  display: block;
  margin: 0;
  padding: 8px 16px;
  font-size: 10px;
  line-height: 1.5;
  text-align: center;
  color: #8a8a8a;
  background: #ffffff;
  letter-spacing: 0.02em;
}
@media (min-width: 768px) { /* PC: 画像内 右下にオーバーレイ */
  .hero-wrap .hero__ai-notice {
    position: absolute;
    bottom: 10px;
    right: 16px;
    padding: 0;
    width: auto;
    text-align: right;
    color: rgba(255, 255, 255, 0.55);
    background: transparent;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    pointer-events: none;
    z-index: 3;
  }
}

/* === components/_cta-section.css === */
/* ==========================================================================
   _cta-section.css — C8: 赤背景CTAバナー
   プロジェクト: SCP 新WEBサイト
   作成: D5.ui-designer
   BEM: .cta-section / .cta-section__inner / .cta-section__heading / ...
   ========================================================================== */

/* --- Block --- */
.cta-section {
  background-color: var(--color-primary);
  padding: var(--spacing-section-sp) var(--container-padding);
  text-align: center;
  color: var(--color-text-white);
}

@media (min-width: 768px) {
  .cta-section {
    padding-left: var(--container-padding-tablet);
    padding-right: var(--container-padding-tablet);
  }
}

@media (min-width: 1280px) {
  .cta-section {
    padding: var(--spacing-section) var(--container-padding-pc);
  }
}

/* --- Inner --- */
.cta-section__inner {
  max-width: var(--container-max-width);
  margin-left: auto;
  margin-right: auto;
}

/* --- Heading --- */
.cta-section__heading {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--spacing-md);
  letter-spacing: var(--letter-spacing-base);
  color: var(--color-text-white);
}

@media (min-width: 768px) {
  .cta-section__heading {
    font-size: var(--font-size-2xl);
  }
}

@media (min-width: 1280px) {
  .cta-section__heading {
    font-size: var(--font-size-3xl);
  }
}

/* --- Sub text --- */
.cta-section__text {
  font-size: var(--font-size-sm);
  opacity: 0.9;
  margin-bottom: var(--spacing-xl);
}

@media (min-width: 768px) {
  .cta-section__text {
    font-size: var(--font-size-base);
  }
}

/* --- Button --- */
.cta-section__button {
  display: inline-block;
  background-color: var(--color-text-white);
  color: var(--color-primary);
  padding: var(--spacing-md) var(--spacing-3xl);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-tight);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.cta-section__button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  color: var(--color-primary);
}

/* =====================================================================
   With Form Variant (20260508): 赤枠の中に白フレームを設けてBownowフォーム埋め込み
   ===================================================================== */
.cta-section--with-form {
  padding-bottom: var(--spacing-section-sp);
}

@media (min-width: 1280px) {
  .cta-section--with-form {
    padding-bottom: var(--spacing-section);
  }
}

.cta-section--with-form .cta-section__text {
  margin-bottom: var(--spacing-xl);
}

.cta-section__form-frame {
  background-color: #fff;
  border-radius: var(--radius-md);
  padding: var(--spacing-lg) var(--spacing-md);
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
  color: var(--color-text-primary);
  text-align: left;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
  scroll-margin-top: 96px; /* ヘッダー追従時のアンカースクロール調整 */
}

@media (min-width: 768px) {
  .cta-section__form-frame {
    padding: var(--spacing-xl) var(--spacing-2xl);
  }
}

/* Bownowフォームが描画されるまでの最小高さ確保 */
.cta-section__form-frame > script + *,
.cta-section__form-frame iframe,
.cta-section__form-frame form {
  width: 100%;
}

.cta-section__form-frame .contact-form__noscript {
  text-align: center;
  color: var(--color-text-secondary);
  padding: var(--spacing-xl) 0;
}

/* アンカーリンク #contact-form-inline 用のスクロール余白 */
#contact-form-inline {
  scroll-margin-top: 80px;
}

@media (min-width: 1280px) {
  #contact-form-inline {
    scroll-margin-top: 100px;
  }
}

/* === components/_news.css === */
/* ==========================================================================
   _news.css — TOPニュース枠（シダックスから動的取得・方式C / 20260715追加）
   - 取得ロジック: modules/news-fallback.js
   - #news-section は既定 hidden。取得成功時のみ表示される
   - 既存デザイントークン（--color-*）に準拠
   ========================================================================== */

.scp-news-list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 920px;
  border-top: 1px solid var(--color-border, #e8e8e8);
}

.scp-news-item {
  border-bottom: 1px solid var(--color-border, #e8e8e8);
}

.scp-news-link {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 18px 4px;
  text-decoration: none;
  color: var(--color-text-primary, #333);
  transition: background-color .2s ease;
}

.scp-news-link:hover {
  background-color: var(--color-bg-secondary, #f5f5f5);
}

.scp-news-date {
  font-size: .9rem;
  color: var(--color-text-secondary, #666);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.scp-news-title {
  font-size: .98rem;
  line-height: 1.5;
  color: var(--color-text-primary, #333);
}

.scp-news-link:hover .scp-news-title {
  color: var(--color-primary, #DC000C);
}

.scp-news-more {
  text-align: right;
  max-width: 920px;
  margin: 16px auto 0;
}

.scp-news-more a {
  font-size: .9rem;
  color: var(--color-primary, #DC000C);
  text-decoration: none;
}

.scp-news-more a:hover {
  text-decoration: underline;
}

@media (max-width: 600px) {
  .scp-news-link {
    grid-template-columns: auto 1fr;
    gap: 6px 12px;
    padding: 14px 4px;
  }
  .scp-news-title {
    grid-column: 1 / -1;
  }
}

/* === components/_contract-table.css === */
/* ==========================================================================
   _contract-table.css — 契約形態比較表（20260508追加）
   レジデンスホテル運営受託の MC契約 vs 賃貸借契約 の比較セクション。
   ========================================================================== */

.contract-section {
  padding: var(--spacing-section-sp) var(--container-padding);
  background-color: var(--color-bg-secondary);
}

@media (min-width: 768px) {
  .contract-section {
    padding: var(--spacing-section) var(--container-padding-tablet);
  }
}

@media (min-width: 1280px) {
  .contract-section {
    padding: var(--spacing-section) var(--container-padding-pc);
  }
}

.contract-section__inner {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

.contract-section__lead {
  text-align: center;
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  line-height: var(--line-height-loose);
  margin: var(--spacing-xl) auto var(--spacing-2xl);
  max-width: 800px;
}

.contract-section__lead strong {
  color: var(--color-primary);
  font-weight: var(--font-weight-bold);
}

/* 表ラッパー（横スクロール対応） */
.contract-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-md);
  background-color: #fff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.contract-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 640px;
  font-size: var(--font-size-sm);
}

@media (min-width: 1280px) {
  .contract-table {
    font-size: var(--font-size-base);
  }
}

/* ヘッダー（thead） */
.contract-table thead {
  background-color: var(--color-primary);
  color: #fff;
}

.contract-table__col-head {
  padding: var(--spacing-md) var(--spacing-md);
  text-align: center;
  font-weight: var(--font-weight-bold);
  vertical-align: top;
  width: calc((100% - 200px) / 2);
  border-right: 1px solid rgba(255, 255, 255, 0.25);
}

.contract-table__col-head:last-child {
  border-right: none;
}

.contract-table__col-head--empty {
  background-color: var(--color-secondary);
  width: 200px;
}

@media (min-width: 768px) {
  .contract-table__col-head--empty {
    width: 220px;
  }
}

.contract-table__col-name {
  display: block;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.04em;
}

@media (min-width: 1280px) {
  .contract-table__col-name {
    font-size: var(--font-size-xl);
  }
}

.contract-table__col-sub {
  display: block;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-normal);
  opacity: 0.85;
  margin-top: 4px;
  letter-spacing: 0.02em;
}

.contract-table__col-highlight {
  display: inline-block;
  margin-top: var(--spacing-sm);
  padding: 4px 12px;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-full, 9999px);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}

/* ボディ（tbody） */
.contract-table tbody tr:nth-child(even) {
  background-color: var(--color-bg-secondary);
}

.contract-table__row-head {
  padding: var(--spacing-md);
  text-align: left;
  font-weight: var(--font-weight-bold);
  color: var(--color-secondary);
  background-color: rgba(220, 0, 12, 0.05);
  border-right: 2px solid var(--color-primary);
  vertical-align: top;
  font-size: var(--font-size-sm);
  white-space: nowrap;
}

@media (min-width: 768px) {
  .contract-table__row-head {
    padding: var(--spacing-md) var(--spacing-lg);
  }
}

.contract-table__cell {
  padding: var(--spacing-md);
  vertical-align: top;
  line-height: var(--line-height-loose);
  color: var(--color-text-primary);
  border-right: 1px solid var(--color-border);
  text-align: left;
}

.contract-table__cell:last-child {
  border-right: none;
}

@media (min-width: 768px) {
  .contract-table__cell {
    padding: var(--spacing-md) var(--spacing-lg);
  }
}

/* 行間の境界 */
.contract-table tbody tr {
  border-bottom: 1px solid var(--color-border);
}

.contract-table tbody tr:last-child {
  border-bottom: none;
}

/* フッター文 */
.contract-table__footer {
  margin-top: var(--spacing-xl);
  padding: var(--spacing-md) var(--spacing-lg);
  background-color: rgba(220, 0, 12, 0.06);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-loose);
  color: var(--color-text-primary);
}

/* モバイル: 横スクロールのヒント */
@media (max-width: 767px) {
  .contract-table-wrap {
    position: relative;
  }

  .contract-table-wrap::after {
    content: "← 横にスクロールできます →";
    display: block;
    text-align: center;
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    padding: var(--spacing-sm) 0;
    background-color: var(--color-bg-secondary);
  }

  .contract-table__col-name {
    font-size: var(--font-size-base);
  }
}

/* === components/_section-header.css === */
/* ==========================================================================
   _section-header.css — C3: EN+JP+赤線のセクション見出し
   プロジェクト: SCP 新WEBサイト
   作成: D5.ui-designer
   BEM: .section-header / .section-header__label-en / .section-header__title /
        .section-header__line
   ========================================================================== */

/* --- Block --- */
.section-header {
  text-align: center;
  margin-bottom: var(--spacing-2xl);
}

@media (min-width: 1280px) {
  .section-header {
    margin-bottom: var(--spacing-section-sp);
  }
}

/* --- English label (small, red, uppercase) --- */
.section-header__label-en {
  font-family: var(--font-family-base);
  font-size: var(--font-size-xs);
  color: var(--color-primary);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  margin-bottom: var(--spacing-sm);
  display: block;
}

@media (min-width: 768px) {
  .section-header__label-en {
    font-size: var(--font-size-sm);
  }
}

/* --- Japanese title --- */
.section-header__title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-secondary);
  letter-spacing: var(--letter-spacing-base);
  margin-bottom: var(--spacing-md);
}

@media (min-width: 768px) {
  .section-header__title {
    font-size: var(--font-size-2xl);
  }
}

@media (min-width: 1280px) {
  .section-header__title {
    font-size: var(--font-size-3xl);
  }
}

/* --- Red line accent --- */
.section-header__line {
  width: 60px;
  height: 3px;
  background-color: var(--color-primary);
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
}

/* === components/_breadcrumb.css === */
/* ==========================================================================
   _breadcrumb.css — パンくずリスト
   プロジェクト: SCP 新WEBサイト
   作成: D13.frontend-coder
   ========================================================================== */

.breadcrumb {
  padding: var(--spacing-sm) 0;
  margin: 0 auto;
  max-width: var(--container-max-width);
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-xs);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.breadcrumb__item {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.breadcrumb__item:not(:last-child)::after {
  content: ">";
  color: var(--color-text-light);
  font-size: var(--font-size-xs);
}

.breadcrumb__link {
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.breadcrumb__link:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

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

@media (min-width: 768px) {
  .breadcrumb {
    padding-left: var(--container-padding-tablet);
    padding-right: var(--container-padding-tablet);
  }

  .breadcrumb__list {
    font-size: var(--font-size-sm);
  }
}

@media (min-width: 1280px) {
  .breadcrumb {
    padding-left: var(--container-padding-pc);
    padding-right: var(--container-padding-pc);
  }
}

/* === components/_back-to-top.css === */
/* ==========================================================================
   _back-to-top.css — Back to top ボタン
   プロジェクト: SCP 新WEBサイト
   作成: D13.frontend-coder
   ========================================================================== */

.back-to-top {
  position: fixed;
  bottom: var(--spacing-lg);
  right: var(--spacing-lg);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: var(--radius-full);
  background-color: rgba(26, 19, 17, 0.6);
  color: var(--color-text-white);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-base), visibility var(--transition-base), background-color var(--transition-fast);
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
}

.back-to-top:hover {
  background-color: rgba(26, 19, 17, 0.85);
}

.back-to-top:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.back-to-top[hidden] {
  display: none;
}

.back-to-top__icon {
  width: 24px;
  height: 24px;
}

@media (min-width: 768px) {
  .back-to-top {
    bottom: var(--spacing-xl);
    right: var(--spacing-xl);
  }
}

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

/* 20260626: LP系詳細ページ(.lp-page)では画面下部に固定の相談CTAバー(.lp-float-cta)があり、
   ⇧(back-to-top)が右下で重なってボタン文字「相談する」に被る。⇧をCTAバーの上へ逃がす。 */
.lp-page .back-to-top {
  bottom: 6rem;
}
@media (max-width: 767px) {
  .lp-page .back-to-top {
    bottom: 5rem;
  }
}

/* === components/_pagination.css === */
/* ==========================================================================
   _pagination.css — ページネーション
   プロジェクト: SCP 新WEBサイト
   作成: D13.frontend-coder
   ========================================================================== */

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xs);
  margin-top: var(--spacing-2xl);
  padding: var(--spacing-md) 0;
}

.pagination__item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: var(--spacing-xs) var(--spacing-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
  text-decoration: none;
  transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

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

.pagination__item--active {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-white);
  pointer-events: none;
}

.pagination__item--disabled {
  opacity: 0.4;
  pointer-events: none;
}

.pagination__item--prev,
.pagination__item--next {
  font-weight: var(--font-weight-medium);
}

.pagination__ellipsis {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  color: var(--color-text-light);
  font-size: var(--font-size-sm);
}

@media (min-width: 768px) {
  .pagination {
    gap: var(--spacing-sm);
  }

  .pagination__item {
    min-width: 40px;
    min-height: 40px;
  }
}

/* === components/_page-hero.css === */
/* ==========================================================================
   _page-hero.css — サブページ用ページヒーロー
   プロジェクト: SCP 新WEBサイト
   作成: D13.frontend-coder
   BEM: .page-hero / .page-hero__bg / .page-hero__overlay /
        .page-hero__content / .page-hero__label-en / .page-hero__heading
   ========================================================================== */

/* --- Block --- */
.page-hero {
  position: relative;
  width: 100%;
  height: 300px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-bg-dark);
}

/* --- Background image --- */
.page-hero__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

/* --- Overlay --- */
.page-hero__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-bg-overlay);
  z-index: 2;
}

/* --- Content (centered) --- */
.page-hero__content {
  position: relative;
  z-index: 3;
  text-align: center;
  padding: 0 var(--container-padding);
}

/* --- English label --- */
.page-hero__label-en {
  font-family: var(--font-family-base);
  font-size: var(--font-size-xs);
  color: var(--color-text-white);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  margin-bottom: var(--spacing-sm);
}

/* --- H1 heading --- */
.page-hero__heading {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-white);
  letter-spacing: var(--letter-spacing-base);
  line-height: var(--line-height-tight);
}

/* --- Description (optional, for case list etc.) --- */
.page-hero__description {
  font-size: var(--font-size-sm);
  color: var(--color-text-white);
  line-height: var(--line-height-base);
  opacity: 0.9;
  max-width: 640px;
  margin: var(--spacing-md) auto 0;
}

/* --- Tablet --- */
@media (min-width: 768px) {
  .page-hero {
    height: 400px;
  }

  .page-hero__content {
    padding: 0 var(--container-padding-tablet);
  }

  .page-hero__label-en {
    font-size: var(--font-size-sm);
  }

  .page-hero__heading {
    font-size: var(--font-size-3xl);
  }
}

/* --- PC --- */
@media (min-width: 1280px) {
  .page-hero {
    height: 450px;
  }

  .page-hero__content {
    padding: 0 var(--container-padding-pc);
  }

  .page-hero__heading {
    font-size: var(--font-size-4xl);
  }
}

/* === components/_page-toc.css === */
/* ==========================================================================
   _page-toc.css — ページ内ナビ（目次）
   プロジェクト: SCP 新WEBサイト
   作成: D13.frontend-coder
   BEM: .page-toc / .page-toc__inner / .page-toc__toggle /
        .page-toc__list / .page-toc__item / .page-toc__link
   ========================================================================== */

/* --- Block --- */
.page-toc {
  background-color: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-border);
}

/* --- Inner container --- */
.page-toc__inner {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

/* --- Toggle button (SP only) --- */
.page-toc__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--spacing-md) 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  letter-spacing: var(--letter-spacing-tight);
}

.page-toc__toggle-icon {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--color-text-primary);
  border-bottom: 2px solid var(--color-text-primary);
  transform: rotate(45deg);
  transition: transform var(--transition-base);
}

.page-toc__toggle[aria-expanded="true"] .page-toc__toggle-icon {
  transform: rotate(-135deg);
}

/* --- List (SP: hidden by default) --- */
.page-toc__list {
  list-style: none;
  padding: 0;
  margin: 0;
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--transition-base);
}

.page-toc__list.is-open {
  max-height: 500px;
}

/* --- Item --- */
.page-toc__item {
  border-top: 1px solid var(--color-border-light);
}

/* --- Link --- */
.page-toc__link {
  display: block;
  padding: var(--spacing-sm) 0;
  color: var(--color-text-primary);
  text-decoration: none;
  font-size: var(--font-size-sm);
  letter-spacing: var(--letter-spacing-tight);
  transition: color var(--transition-fast);
}

.page-toc__link:hover,
.page-toc__link:focus-visible {
  color: var(--color-primary);
}

/* --- Tablet: expand by default --- */
@media (min-width: 768px) {
  .page-toc__inner {
    padding: 0 var(--container-padding-tablet);
  }

  .page-toc__toggle {
    display: none;
  }

  .page-toc__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm) var(--spacing-lg);
    max-height: none;
    overflow: visible;
    padding: var(--spacing-md) 0;
  }

  .page-toc__item {
    border-top: none;
  }

  .page-toc__link {
    padding: var(--spacing-xs) 0;
    font-size: var(--font-size-sm);
  }
}

/* --- PC --- */
@media (min-width: 1280px) {
  .page-toc__inner {
    padding: 0 var(--container-padding-pc);
  }

  .page-toc__list {
    justify-content: center;
    gap: var(--spacing-sm) var(--spacing-xl);
  }
}

/* --- prefers-reduced-motion --- */
@media (prefers-reduced-motion: reduce) {
  .page-toc__toggle-icon {
    transition: none;
  }

  .page-toc__list {
    transition: none;
  }
}

/* === components/_mvv-section.css === */
/* ==========================================================================
   _mvv-section.css — ミッション・ビジョン・バリューセクション
   プロジェクト: SCP 新WEBサイト
   作成: D13.frontend-coder
   BEM: .mvv-section / .mvv-section__inner / .mvv-section__grid /
        .mvv-section__block / .mvv-section__label / .mvv-section__subtitle /
        .mvv-section__text / .mvv-section__value-list / .mvv-section__value-item
   ========================================================================== */

/* --- Block --- */
.mvv-section {
  background-color: var(--color-bg-primary);
  padding: var(--spacing-section-sp) 0;
}

/* --- Inner container --- */
.mvv-section__inner {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

/* --- Grid (SP: stack, Tab+: 3-column) --- */
.mvv-section__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-2xl);
}

/* --- Block (Mission/Vision/Values) --- */
.mvv-section__block {
  text-align: center;
}

/* --- English label (red, uppercase) --- */
.mvv-section__label {
  font-family: var(--font-family-base);
  font-size: var(--font-size-xs);
  color: var(--color-primary);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  margin-bottom: var(--spacing-sm);
}

/* --- Subtitle (H3) --- */
.mvv-section__subtitle {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-secondary);
  letter-spacing: var(--letter-spacing-base);
  margin-bottom: var(--spacing-md);
}

/* --- Body text --- */
.mvv-section__text {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  line-height: var(--line-height-loose);
}

/* --- Statement (Mission - larger, serif) --- */
.mvv-section__text--statement {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-base);
}

/* --- Values list --- */
.mvv-section__value-list {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
}

.mvv-section__value-item {
  padding: var(--spacing-sm) 0;
  border-bottom: 1px solid var(--color-border-light);
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  line-height: var(--line-height-base);
}

.mvv-section__value-item:last-child {
  border-bottom: none;
}

.mvv-section__value-item strong {
  color: var(--color-secondary);
  font-weight: var(--font-weight-bold);
}

/* --- Tablet --- */
@media (min-width: 768px) {
  .mvv-section {
    padding: var(--spacing-section) 0;
  }

  .mvv-section__inner {
    padding: 0 var(--container-padding-tablet);
  }

  .mvv-section__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-xl);
  }

  .mvv-section__subtitle {
    font-size: var(--font-size-xl);
  }

  .mvv-section__text--statement {
    font-size: var(--font-size-xl);
  }
}

/* --- PC --- */
@media (min-width: 1280px) {
  .mvv-section__inner {
    padding: 0 var(--container-padding-pc);
  }

  .mvv-section__grid {
    gap: var(--spacing-2xl);
  }

  .mvv-section__subtitle {
    font-size: var(--font-size-2xl);
  }
}

/* === components/_ceo-message.css === */
/* ==========================================================================
   _ceo-message.css — 社長メッセージセクション
   プロジェクト: SCP 新WEBサイト
   作成: D13.frontend-coder
   BEM: .ceo-message / .ceo-message__inner / .ceo-message__content /
        .ceo-message__visual / .ceo-message__video-wrap /
        .ceo-message__thumbnail / .ceo-message__play-btn /
        .ceo-message__text / .ceo-message__name / .ceo-message__body
   ========================================================================== */

/* --- Block --- */
.ceo-message {
  background-color: var(--color-bg-secondary);
  padding: var(--spacing-section-sp) 0;
}

/* --- Inner container --- */
.ceo-message__inner {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

/* --- Content layout (SP: stack, Tab+: side-by-side) --- */
.ceo-message__content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
}

/* --- Visual (video thumbnail) --- */
.ceo-message__visual {
  width: 100%;
}

.ceo-message__video-wrap {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
}

.ceo-message__thumbnail {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* --- Play button --- */
.ceo-message__play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  border-radius: var(--radius-full);
  background-color: var(--color-primary);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.ceo-message__play-btn:hover {
  background-color: var(--color-primary-dark);
  transform: translate(-50%, -50%) scale(1.1);
}

.ceo-message__play-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.ceo-message__play-icon {
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 0 10px 18px;
  border-color: transparent transparent transparent var(--color-text-white);
  margin-left: 4px;
}

/* --- Text area --- */
.ceo-message__name {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-secondary);
  letter-spacing: var(--letter-spacing-base);
  margin-bottom: var(--spacing-md);
}

.ceo-message__body {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  line-height: var(--line-height-loose);
}

.ceo-message__body p {
  margin-bottom: var(--spacing-md);
}

.ceo-message__body p:last-child {
  margin-bottom: 0;
}

/* --- Tablet --- */
@media (min-width: 768px) {
  .ceo-message {
    padding: var(--spacing-section) 0;
  }

  .ceo-message__inner {
    padding: 0 var(--container-padding-tablet);
  }

  .ceo-message__content {
    flex-direction: row;
    align-items: flex-start;
  }

  .ceo-message__visual {
    flex: 0 0 400px;
    width: 400px;
  }

  .ceo-message__text {
    flex: 1;
  }

  .ceo-message__play-btn {
    width: 72px;
    height: 72px;
  }

  .ceo-message__play-icon {
    border-width: 12px 0 12px 20px;
  }
}

/* --- PC --- */
@media (min-width: 1280px) {
  .ceo-message__inner {
    padding: 0 var(--container-padding-pc);
  }
}

/* --- prefers-reduced-motion --- */
@media (prefers-reduced-motion: reduce) {
  .ceo-message__play-btn {
    transition: none;
  }
}

/* === components/_member-card.css === */
/* ==========================================================================
   _member-card.css — メンバーカード + メンバーグリッド
   プロジェクト: SCP 新WEBサイト
   作成: D13.frontend-coder
   BEM: .members-section / .members-grid / .member-card /
        .member-card__image-wrap / .member-card__photo /
        .member-card__overlay / .member-card__name /
        .member-card__role / .member-card__message /
        .member-card__caption
   ========================================================================== */

/* --- Members Section --- */
.members-section {
  background-color: var(--color-bg-primary);
  padding: var(--spacing-section-sp) 0;
}

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

/* --- Grid: SP=2col, Tab=3col, PC=4col --- */
.members-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-md);
}

/* --- Card --- */
.member-card {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
}

.member-card:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* --- Image wrap --- */
.member-card__image-wrap {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background-color: var(--color-bg-secondary);
}

/* --- Photo --- */
.member-card__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Overlay (hidden by default, shown on hover/tap) --- */
.member-card__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(26, 19, 17, 0.75);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-md);
  text-align: center;
  opacity: 0;
  transition: opacity var(--transition-base);
  pointer-events: none;
}

.member-card.is-active .member-card__overlay,
.member-card[aria-expanded="true"] .member-card__overlay {
  opacity: 1;
  pointer-events: auto;
}

/* PC hover */
@media (hover: hover) and (pointer: fine) {
  .member-card:hover .member-card__overlay {
    opacity: 1;
    pointer-events: auto;
  }
}

/* --- Overlay text --- */
.member-card__overlay .member-card__name {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-white);
  margin-bottom: var(--spacing-xs);
}

.member-card__overlay .member-card__role {
  font-size: var(--font-size-sm);
  color: var(--color-text-white);
  margin-bottom: var(--spacing-sm);
  opacity: 0.9;
}

.member-card__overlay .member-card__message {
  font-size: var(--font-size-sm);
  color: var(--color-text-white);
  line-height: var(--line-height-base);
  opacity: 0.9;
}

/* --- Caption (SP: always visible below image, Tab+: hidden) --- */
.member-card__caption {
  padding: var(--spacing-sm) var(--spacing-xs);
  text-align: center;
}

.member-card__caption-name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  display: block;
}

.member-card__caption-role {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  display: block;
}

/* --- Tablet --- */
@media (min-width: 768px) {
  .members-section {
    padding: var(--spacing-section) 0;
  }

  .members-section__inner {
    padding: 0 var(--container-padding-tablet);
  }

  .members-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
  }

  .member-card__caption {
    display: none;
  }
}

/* --- PC --- */
@media (min-width: 1280px) {
  .members-section__inner {
    padding: 0 var(--container-padding-pc);
  }

  .members-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-xl);
  }
}

/* --- prefers-reduced-motion --- */
@media (prefers-reduced-motion: reduce) {
  .member-card__overlay {
    transition: none;
  }
}

/* === components/_company-info.css === */
/* ==========================================================================
   _company-info.css — 会社概要テーブル
   プロジェクト: SCP 新WEBサイト
   作成: D13.frontend-coder
   BEM: .company-info / .company-info__inner / .company-info__table-wrap /
        .company-info__table / .company-info__label / .company-info__value
   ========================================================================== */

/* --- Block --- */
.company-info {
  background-color: var(--color-bg-secondary);
  padding: var(--spacing-section-sp) 0;
}

/* --- Inner container --- */
.company-info__inner {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

/* --- Table wrap --- */
.company-info__table-wrap {
  overflow-x: auto;
}

/* --- Table --- */
.company-info__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
}

.company-info__table tr {
  border-bottom: 1px solid var(--color-border);
}

.company-info__table th,
.company-info__table td {
  text-align: left;
  vertical-align: top;
  line-height: var(--line-height-base);
}

/* SP: stack th and td vertically */
.company-info__table th {
  display: block;
  padding: var(--spacing-md) 0 var(--spacing-xs) 0;
  font-weight: var(--font-weight-bold);
  color: var(--color-secondary);
  font-size: var(--font-size-sm);
  white-space: nowrap;
}

.company-info__table td {
  display: block;
  padding: 0 0 var(--spacing-md) 0;
  font-size: var(--font-size-base);
}

/* --- Tablet: horizontal table --- */
@media (min-width: 768px) {
  .company-info {
    padding: var(--spacing-section) 0;
  }

  .company-info__inner {
    padding: 0 var(--container-padding-tablet);
  }

  .company-info__table th,
  .company-info__table td {
    display: table-cell;
    padding: var(--spacing-md) var(--spacing-lg);
  }

  .company-info__table th {
    width: 180px;
    padding-left: 0;
    font-size: var(--font-size-base);
    background-color: transparent;
  }
}

/* --- PC --- */
@media (min-width: 1280px) {
  .company-info__inner {
    padding: 0 var(--container-padding-pc);
  }

  .company-info__table th {
    width: 200px;
  }
}

/* === components/_group-section.css === */
/* ==========================================================================
   _group-section.css — シダックスグループセクション
   プロジェクト: SCP 新WEBサイト
   作成: D13.frontend-coder
   BEM: .group-section / .group-section__inner / .group-section__content /
        .group-section__visual / .group-section__logo /
        .group-section__text / .group-section__description /
        .group-section__synergy-list / .group-section__synergy-item /
        .group-section__link
   ========================================================================== */

/* --- Block --- */
.group-section {
  background-color: var(--color-bg-secondary);
  padding: var(--spacing-section-sp) 0;
}

/* --- Inner container --- */
.group-section__inner {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

/* --- Content layout (SP: stack, Tab+: side-by-side) --- */
.group-section__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-xl);
}

/* --- Visual (logo) --- */
.group-section__visual {
  width: 60%;
  text-align: center;
}

.group-section__logo {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
}

/* --- Text area --- */
.group-section__description {
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  line-height: var(--line-height-base);
  margin-bottom: var(--spacing-lg);
}

.group-section__synergy-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--spacing-lg) 0;
}

.group-section__synergy-item {
  position: relative;
  padding-left: var(--spacing-lg);
  padding-bottom: var(--spacing-sm);
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  line-height: var(--line-height-base);
}

.group-section__synergy-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background-color: var(--color-primary);
}

.group-section__link {
  display: inline-flex;
  align-items: center;
  color: var(--color-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
  letter-spacing: var(--letter-spacing-tight);
  transition: color var(--transition-fast);
}

.group-section__link::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-right: 2px solid currentColor;
  border-top: 2px solid currentColor;
  transform: rotate(45deg);
  margin-left: var(--spacing-sm);
}

.group-section__link:hover,
.group-section__link:focus-visible {
  color: var(--color-primary-dark);
}

/* --- Tablet --- */
@media (min-width: 768px) {
  .group-section {
    padding: var(--spacing-section) 0;
  }

  .group-section__inner {
    padding: 0 var(--container-padding-tablet);
  }

  .group-section__content {
    flex-direction: row;
    align-items: flex-start;
  }

  .group-section__visual {
    flex: 0 0 300px;
    width: 300px;
  }

  .group-section__text {
    flex: 1;
  }
}

/* --- PC --- */
@media (min-width: 1280px) {
  .group-section__inner {
    padding: 0 var(--container-padding-pc);
  }
}

/* === components/_access-section.css === */
/* ==========================================================================
   _access-section.css — アクセスセクション
   プロジェクト: SCP 新WEBサイト
   作成: D13.frontend-coder
   BEM: .access-section / .access-section__inner / .access-section__content /
        .access-section__map / .access-section__iframe /
        .access-section__map-fallback / .access-section__info /
        .access-section__address / .access-section__transport /
        .access-section__tel
   ========================================================================== */

/* --- Block --- */
.access-section {
  background-color: var(--color-bg-primary);
  padding: var(--spacing-section-sp) 0;
}

/* --- Inner container --- */
.access-section__inner {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

/* --- Content layout (SP: stack, Tab+: side-by-side) --- */
.access-section__content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
}

/* --- Map --- */
.access-section__map {
  position: relative;
  width: 100%;
  height: 250px;
  background-color: var(--color-bg-secondary);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.access-section__iframe {
  width: 100%;
  height: 100%;
  display: block;
}

/* --- Map fallback --- */
.access-section__map-fallback {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: var(--color-bg-secondary);
  text-align: center;
  padding: var(--spacing-md);
}

.access-section__map-fallback p {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-sm);
}

.access-section__map-fallback a {
  color: var(--color-primary);
  font-weight: var(--font-weight-bold);
  text-decoration: underline;
}

/* --- Info --- */
.access-section__address {
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  line-height: var(--line-height-base);
  margin-bottom: var(--spacing-sm);
}

.access-section__transport {
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  line-height: var(--line-height-base);
  margin-bottom: var(--spacing-sm);
}

.access-section__tel {
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  line-height: var(--line-height-base);
}

.access-section__tel a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: var(--font-weight-bold);
}

.access-section__tel a:hover,
.access-section__tel a:focus-visible {
  text-decoration: underline;
}

/* --- Tablet --- */
@media (min-width: 768px) {
  .access-section {
    padding: var(--spacing-section) 0;
  }

  .access-section__inner {
    padding: 0 var(--container-padding-tablet);
  }

  .access-section__content {
    flex-direction: row;
    align-items: flex-start;
  }

  .access-section__map {
    flex: 0 0 60%;
    width: 60%;
    height: 350px;
  }

  .access-section__info {
    flex: 1;
  }
}

/* --- PC --- */
@media (min-width: 1280px) {
  .access-section__inner {
    padding: 0 var(--container-padding-pc);
  }
}

/* === components/_filter.css === */
/* ==========================================================================
   _filter.css — カテゴリフィルターボタン群
   プロジェクト: SCP 新WEBサイト
   作成: D13.frontend-coder
   BEM: .case-filter / .case-filter__inner / .case-filter__buttons /
        .case-filter__btn
   ========================================================================== */

/* --- Block --- */
.case-filter {
  background-color: var(--color-bg-primary);
  padding: var(--spacing-xl) 0;
}

/* --- Inner container --- */
.case-filter__inner {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

/* --- Button group --- */
.case-filter__buttons {
  display: flex;
  gap: var(--spacing-sm);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: var(--spacing-xs);
}

.case-filter__buttons::-webkit-scrollbar {
  display: none;
}

/* --- Individual button --- */
.case-filter__btn {
  flex-shrink: 0;
  padding: var(--spacing-sm) var(--spacing-lg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background-color: var(--color-bg-primary);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: background-color var(--transition-fast),
              color var(--transition-fast),
              border-color var(--transition-fast);
  white-space: nowrap;
  line-height: 1;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.case-filter__btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.case-filter__btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* --- Active state --- */
.case-filter__btn.is-active {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-white);
}

.case-filter__btn.is-active:hover {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: var(--color-text-white);
}

/* --- Tablet --- */
@media (min-width: 768px) {
  .case-filter {
    padding: var(--spacing-2xl) 0;
  }

  .case-filter__inner {
    padding: 0 var(--container-padding-tablet);
  }

  .case-filter__buttons {
    flex-wrap: wrap;
    justify-content: center;
    overflow-x: visible;
    gap: var(--spacing-sm);
  }
}

/* --- PC --- */
@media (min-width: 1280px) {
  .case-filter__inner {
    padding: 0 var(--container-padding-pc);
  }

  .case-filter__buttons {
    gap: var(--spacing-md);
  }
}

/* === components/_case-detail.css === */
/* ==========================================================================
   _case-detail.css — 事例詳細コンポーネント
   プロジェクト: SCP 新WEBサイト
   作成: D13.frontend-coder
   BEM: .case-hero / .case-section / .solution-step / .related-cases
   ========================================================================== */

/* =====================================================================
   Case Hero
   ===================================================================== */
.case-hero {
  position: relative;
  width: 100%;
  height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
  background-color: var(--color-bg-dark);
}

.case-hero__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(26, 19, 17, 0.6);
  z-index: 1;
}

.case-hero__inner {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 var(--container-padding);
  max-width: 800px;
}

.case-hero__tag {
  display: inline-block;
  background-color: var(--color-primary);
  color: var(--color-text-white);
  font-size: var(--font-size-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: 2px;
  margin-bottom: var(--spacing-md);
  line-height: 1;
}

.case-hero__title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-white);
  letter-spacing: var(--letter-spacing-base);
  line-height: var(--line-height-tight);
  margin-bottom: var(--spacing-md);
}

.case-hero__summary {
  font-size: var(--font-size-sm);
  color: var(--color-text-white);
  line-height: var(--line-height-base);
  opacity: 0.9;
}

/* =====================================================================
   Case Section (Challenge / Solution / Results)
   ===================================================================== */
.case-section {
  padding: var(--spacing-section-sp) 0;
  background-color: var(--color-bg-primary);
}

.case-section--gray {
  background-color: var(--color-bg-secondary);
}

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

.case-section__body {
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  line-height: var(--line-height-base);
}

.case-section__body p {
  margin-bottom: var(--spacing-lg);
  white-space: pre-line;
}

.case-section__overview {
  margin-bottom: var(--spacing-2xl);
}

/* --- Challenge points --- */
.case-section__points {
  list-style: none;
  padding: 0;
  margin-top: var(--spacing-xl);
}

.case-section__points li {
  position: relative;
  padding-left: var(--spacing-xl);
  margin-bottom: var(--spacing-md);
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  line-height: var(--line-height-base);
}

.case-section__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-primary);
}

/* =====================================================================
   Solution Steps
   ===================================================================== */
.solution-steps {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
}

.solution-step {
  background-color: var(--color-bg-primary);
  border-radius: var(--radius-md);
  padding: var(--spacing-xl);
  box-shadow: var(--shadow-sm);
}

.solution-step__number {
  display: inline-block;
  font-family: var(--font-family-base);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  margin-bottom: var(--spacing-sm);
  line-height: 1;
}

.solution-step__title {
  font-family: var(--font-family-base);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-sm);
  line-height: var(--line-height-tight);
}

.solution-step__description {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  line-height: var(--line-height-base);
}

/* =====================================================================
   Related Cases
   ===================================================================== */
.related-cases {
  padding: var(--spacing-section-sp) 0;
  background-color: var(--color-bg-primary);
}

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

.related-cases__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-xl);
  margin-bottom: var(--spacing-2xl);
}

.related-cases__more {
  text-align: center;
}

/* --- Button outline --- */
.button--outline {
  display: inline-block;
  padding: var(--spacing-sm) var(--spacing-2xl);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-full);
  background-color: transparent;
  color: var(--color-primary);
  font-size: var(--font-size-base);
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  transition: background-color var(--transition-fast),
              color var(--transition-fast);
  min-height: 44px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

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

.button--outline:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* --- Tablet --- */
@media (min-width: 768px) {
  .case-hero {
    height: 300px;
  }

  .case-hero__inner {
    padding: 0 var(--container-padding-tablet);
  }

  .case-hero__title {
    font-size: var(--font-size-3xl);
  }

  .case-hero__summary {
    font-size: var(--font-size-base);
  }

  .case-section {
    padding: var(--spacing-section) 0;
  }

  .case-section__inner {
    padding: 0 var(--container-padding-tablet);
  }

  .related-cases {
    padding: var(--spacing-section) 0;
  }

  .related-cases__inner {
    padding: 0 var(--container-padding-tablet);
  }

  .related-cases__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- PC --- */
@media (min-width: 1280px) {
  .case-hero {
    height: 360px;
  }

  .case-hero__inner {
    padding: 0 var(--container-padding-pc);
  }

  .case-hero__title {
    font-size: var(--font-size-4xl);
  }

  .case-section__inner {
    padding: 0 var(--container-padding-pc);
  }

  .related-cases__inner {
    padding: 0 var(--container-padding-pc);
  }

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

/* === components/_client-info.css === */
/* ==========================================================================
   _client-info.css — クライアント情報テーブル（定義リスト）
   プロジェクト: SCP 新WEBサイト
   作成: D13.frontend-coder
   BEM: .case-client / .case-client__inner / .case-client__list /
        .case-client__item / .case-client__label / .case-client__value
   ========================================================================== */

/* --- Block --- */
.case-client {
  padding: var(--spacing-section-sp) 0;
  background-color: var(--color-bg-primary);
}

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

/* --- Definition list --- */
.case-client__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--color-border);
}

/* --- Item (dt/dd pair wrapper) --- */
.case-client__item {
  display: flex;
  flex-direction: column;
  padding: var(--spacing-md) 0;
  border-bottom: 1px solid var(--color-border);
}

/* --- Label (dt) --- */
.case-client__label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-xs);
}

/* --- Value (dd) --- */
.case-client__value {
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  line-height: var(--line-height-base);
}

/* --- Tablet --- */
@media (min-width: 768px) {
  .case-client {
    padding: var(--spacing-section) 0;
  }

  .case-client__inner {
    padding: 0 var(--container-padding-tablet);
  }

  .case-client__list {
    grid-template-columns: repeat(2, 1fr);
    gap: 0 var(--spacing-2xl);
  }

  .case-client__item {
    flex-direction: row;
    align-items: baseline;
    gap: var(--spacing-lg);
  }

  .case-client__label {
    flex-shrink: 0;
    width: 140px;
    margin-bottom: 0;
  }
}

/* --- PC --- */
@media (min-width: 1280px) {
  .case-client__inner {
    padding: 0 var(--container-padding-pc);
  }
}

/* === components/_result-numbers.css === */
/* ==========================================================================
   _result-numbers.css — 成果数値カード表示
   プロジェクト: SCP 新WEBサイト
   作成: D13.frontend-coder
   BEM: .results-numbers / .results-numbers__grid /
        .result-number-card / .result-number-card__label /
        .result-number-card__value / .result-number-card__unit
   ========================================================================== */

/* --- Block --- */
.results-numbers {
  margin-top: var(--spacing-xl);
}

/* --- Grid --- */
.results-numbers__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-xl);
}

/* --- Card --- */
.result-number-card {
  text-align: center;
  padding: var(--spacing-xl);
  background-color: var(--color-bg-primary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

/* --- Label --- */
.result-number-card__label {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-sm);
  font-weight: var(--font-weight-medium);
}

/* --- Value --- */
.result-number-card__value {
  display: block;
  font-family: var(--font-family-base);
  font-size: 3rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  line-height: 1;
  margin-bottom: var(--spacing-xs);
}

/* --- Unit --- */
.result-number-card__unit {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-medium);
}

/* --- Tablet --- */
@media (min-width: 768px) {
  .results-numbers__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- PC --- */
@media (min-width: 1280px) {
  .results-numbers__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .result-number-card__value {
    font-size: 3.5rem;
  }
}

/* === components/_client-voice.css === */
/* ==========================================================================
   _client-voice.css — クライアントの声 + クライアント担当者
   プロジェクト: SCP 新WEBサイト
   作成: D13.frontend-coder
   BEM: .case-testimonial / .testimonial-card /
        .case-detail__client / .case-detail__client-card
   ========================================================================== */

/* =====================================================================
   Testimonial (Client Voice)
   ===================================================================== */
.case-testimonial {
  padding: var(--spacing-section-sp) 0;
  background-color: var(--color-bg-secondary);
}

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

/* --- Testimonial card --- */
.testimonial-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--spacing-xl);
}

.testimonial-card__photo {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
}

.testimonial-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.testimonial-card__quote {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-lg);
  color: var(--color-text-primary);
  line-height: var(--line-height-loose);
  font-style: normal;
  position: relative;
  padding: 0 var(--spacing-md);
  margin: 0;
}

.testimonial-card__quote::before {
  content: "\201C";
  font-size: var(--font-size-5xl);
  color: var(--color-primary);
  opacity: 0.3;
  position: absolute;
  top: -0.5em;
  left: -0.2em;
  line-height: 1;
}

.testimonial-card__cite {
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  font-style: normal;
  font-weight: var(--font-weight-semibold);
}

.testimonial-card__org {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-top: var(--spacing-xs);
}

/* =====================================================================
   Client Person Section
   ===================================================================== */
.case-detail__client {
  padding: var(--spacing-section-sp) 0;
  background-color: var(--color-bg-primary);
  border-top: 1px solid var(--color-border);
}

.case-detail__client-inner {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

/* --- Client card --- */
.case-detail__client-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-xl);
  text-align: center;
}

/* --- Photo --- */
.case-detail__client-photo {
  width: 120px;
  height: 120px;
  flex-shrink: 0;
}

.case-detail__client-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* --- Info --- */
.case-detail__client-info {
  flex: 1;
}

.case-detail__client-company {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-xs);
}

.case-detail__client-position {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-md);
}

.case-detail__client-bio {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  line-height: var(--line-height-base);
}

/* --- Tablet --- */
@media (min-width: 768px) {
  .case-testimonial {
    padding: var(--spacing-section) 0;
  }

  .case-testimonial__inner {
    padding: 0 var(--container-padding-tablet);
  }

  .testimonial-card {
    flex-direction: row;
    text-align: left;
    align-items: flex-start;
  }

  .testimonial-card__photo {
    width: 100px;
    height: 100px;
  }

  .case-detail__client {
    padding: var(--spacing-section) 0;
  }

  .case-detail__client-inner {
    padding: 0 var(--container-padding-tablet);
  }

  .case-detail__client-card {
    flex-direction: row;
    text-align: left;
    align-items: flex-start;
  }
}

/* --- PC --- */
@media (min-width: 1280px) {
  .case-testimonial__inner {
    padding: 0 var(--container-padding-pc);
  }

  .case-detail__client-inner {
    padding: 0 var(--container-padding-pc);
  }
}

/* === components/_feature-card.css === */
/* ==========================================================================
   _feature-card.css — 特長カードコンポーネント
   ========================================================================== */

.feature-card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-xl);
  margin-top: var(--spacing-xl);
}

.feature-card {
  background-color: var(--color-bg-secondary);
  border-radius: var(--radius-md);
  padding: var(--spacing-xl);
  text-align: center;
}

.feature-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin: 0 auto var(--spacing-md);
  color: var(--color-primary);
}

.feature-card__icon svg {
  width: 48px;
  height: 48px;
}

.feature-card__title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-sm);
}

.feature-card__description {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-base);
}

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

/* === components/_strength-card.css === */
/* ==========================================================================
   _strength-card.css — 強みカードコンポーネント
   ========================================================================== */

.strength-card {
  background-color: var(--color-bg-primary);
  border-radius: var(--radius-md);
  padding: var(--spacing-xl);
  text-align: center;
  box-shadow: var(--shadow-sm);
}

.strength-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin: 0 auto var(--spacing-md);
  color: var(--color-primary);
}

.strength-card__icon svg {
  width: 48px;
  height: 48px;
}

.strength-card__title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-sm);
}

.strength-card__text {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-base);
}

/* === components/_faq-accordion.css === */
/* ==========================================================================
   _faq-accordion.css — FAQアコーディオンコンポーネント
   ========================================================================== */

.accordion {
  max-width: 800px;
  margin: var(--spacing-xl) auto 0;
}

.accordion__item {
  border-bottom: 1px solid var(--color-border);
}

.accordion__item:first-child {
  border-top: 1px solid var(--color-border);
}

.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--spacing-lg) var(--spacing-md);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  line-height: var(--line-height-tight);
  min-height: 44px;
  transition: background-color var(--transition-fast);
}

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

.accordion__trigger:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.accordion__question {
  flex: 1;
  padding-right: var(--spacing-md);
}

.accordion__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  position: relative;
  color: var(--color-primary);
}

.accordion__icon::before,
.accordion__icon::after {
  content: "";
  position: absolute;
  background-color: currentColor;
  transition: transform var(--transition-base);
}

.accordion__icon::before {
  width: 16px;
  height: 2px;
}

.accordion__icon::after {
  width: 2px;
  height: 16px;
}

.accordion__trigger[aria-expanded="true"] .accordion__icon::after {
  transform: rotate(90deg);
}

.accordion__content {
  overflow: hidden;
  transition: max-height var(--transition-base);
}

.accordion__content[hidden] {
  display: none;
}

.accordion__answer {
  padding: 0 var(--spacing-md) var(--spacing-lg);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-base);
}

@media (min-width: 768px) {
  .accordion__trigger {
    padding: var(--spacing-lg);
  }

  .accordion__answer {
    padding: 0 var(--spacing-lg) var(--spacing-lg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .accordion__icon::before,
  .accordion__icon::after,
  .accordion__content {
    transition: none;
  }
}

/* === components/_related-services.css === */
/* ==========================================================================
   _related-services.css — 関連サービスセクション
   20260508改訂: カード数（最大3）に応じて自動センター合わせ＋ゆとりある横幅
   ========================================================================== */

.related-services {
  background-color: var(--color-bg-secondary);
  padding: var(--spacing-section-sp) var(--container-padding);
}

.related-services .section {
  max-width: var(--container-max-width);
  margin: 0 auto;
}

/* グリッドはカード数に応じて自動で並ぶ + 残りスペースを中央寄せ */
.related-services .service-card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-xl);
  margin-top: var(--spacing-xl);
  justify-content: center;
}

@media (min-width: 768px) {
  .related-services {
    padding: var(--spacing-section) var(--container-padding-tablet);
  }

  /* タブレット以上: auto-fit で 280-440px のカードを自動配置 */
  .related-services .service-card-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 440px));
    gap: var(--spacing-2xl, 2.5rem);
  }
}

@media (min-width: 1280px) {
  .related-services {
    padding: var(--spacing-section) var(--container-padding-pc);
  }

  /* PC: 最大3カードでも横幅にゆとり。1カード 320-480px */
  .related-services .service-card-grid {
    grid-template-columns: repeat(auto-fit, minmax(320px, 480px));
  }
}

/* カード単体の最大幅 */
.related-services .service-card-grid > .service-card {
  max-width: 480px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* === components/_service-detail.css === */
/* ==========================================================================
   _service-detail.css — サービス詳細ページ コンポーネント
   ========================================================================== */

/* Service Hero */
.service-hero {
  position: relative;
  width: 100%;
  height: 300px;
  overflow: hidden;
}

.service-hero__bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.service-hero__overlay {
  position: absolute;
  inset: 0;
  background-color: var(--color-bg-overlay);
}

.service-hero__content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--spacing-lg) var(--container-padding);
}

.service-hero__category {
  font-size: var(--font-size-sm);
  color: var(--color-text-white);
  background-color: rgba(255, 255, 255, 0.2);
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: var(--radius-full);
  margin-bottom: var(--spacing-md);
  letter-spacing: var(--letter-spacing-wide);
}

.service-hero__title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-white);
  line-height: var(--line-height-tight);
  margin-bottom: var(--spacing-sm);
}

.service-hero__catch {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  color: var(--color-text-white);
  line-height: var(--line-height-base);
  opacity: 0.9;
}

@media (min-width: 768px) {
  .service-hero {
    height: 400px;
  }

  .service-hero__title {
    font-size: var(--font-size-4xl);
  }
}

@media (min-width: 1280px) {
  .service-hero {
    height: 500px;
  }

  .service-hero__title {
    font-size: var(--font-size-5xl);
  }
}

/* TOC (Service Detail variant) */
.toc {
  max-width: var(--container-max-width);
  margin: var(--spacing-xl) auto;
  padding: 0 var(--container-padding);
}

.toc__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--spacing-md) var(--spacing-lg);
  background-color: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-family: var(--font-family-base);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.toc__toggle-icon {
  width: 12px;
  height: 12px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--transition-fast);
}

.toc__toggle[aria-expanded="true"] .toc__toggle-icon {
  transform: rotate(-135deg);
}

.toc__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: none;
  background-color: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-top: none;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  padding: var(--spacing-md) var(--spacing-lg);
}

.toc__toggle[aria-expanded="true"] + .toc__list {
  display: block;
}

.toc__item {
  margin-bottom: var(--spacing-xs);
}

.toc__link {
  display: block;
  padding: var(--spacing-xs) 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

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

@media (min-width: 768px) {
  .toc {
    padding: 0 var(--container-padding-tablet);
  }

  .toc__toggle {
    display: none;
  }

  .toc__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
  }

  .toc__item {
    margin-bottom: 0;
  }
}

@media (min-width: 1280px) {
  .toc {
    padding: 0 var(--container-padding-pc);
  }
}

/* Service Detail Overview */
.service-detail-overview {
  background-color: var(--color-bg-primary);
  padding: var(--spacing-section-sp) var(--container-padding);
}

.service-detail-overview .section {
  max-width: var(--container-max-width);
  margin: 0 auto;
}

.service-detail-overview__lead {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  line-height: var(--line-height-base);
  max-width: 800px;
  margin: var(--spacing-xl) auto 0;
  text-align: center;
}

@media (min-width: 768px) {
  .service-detail-overview {
    padding: var(--spacing-section) var(--container-padding-tablet);
  }
}

@media (min-width: 1280px) {
  .service-detail-overview {
    padding: var(--spacing-section) var(--container-padding-pc);
  }
}

/* Service Strength */
.service-strength {
  background-color: var(--color-bg-secondary);
  padding: var(--spacing-section-sp) var(--container-padding);
}

.service-strength .section {
  max-width: var(--container-max-width);
  margin: 0 auto;
}

.strength-metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-lg);
  margin-top: var(--spacing-xl);
  margin-bottom: var(--spacing-2xl);
}

.strength-metric {
  text-align: center;
  padding: var(--spacing-lg);
  background-color: var(--color-bg-primary);
  border-radius: var(--radius-md);
}

.strength-metric__number {
  display: block;
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  line-height: var(--line-height-tight);
  margin-bottom: var(--spacing-xs);
}

.strength-metric__label {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

/* OUR STRENGTH グリッド（ホテル・施設詳細共通） */
.strength-metrics--grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-lg);
  margin-top: var(--spacing-xl);
}

.strength-metrics__item {
  text-align: center;
  padding: var(--spacing-xl) var(--spacing-lg);
  background-color: var(--color-bg-primary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

.strength-metrics__number {
  display: block;
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  line-height: 1;
}

.strength-metrics__unit {
  display: block;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-secondary);
  margin-top: var(--spacing-xs);
  margin-bottom: var(--spacing-sm);
}

.strength-metrics__label {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
}

@media (max-width: 767px) {
  .strength-metrics--grid {
    grid-template-columns: 1fr;
  }
}

/* T003 (20260507指示書): OUR STRENGTH 3ボックスをセンター合わせ */
.strength-metrics--center {
  justify-items: center;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}
.strength-metrics--center .strength-metrics__item {
  width: 100%;
  max-width: 280px;
}

/* proposals-intro セクション */
.proposals-intro .section-header {
  margin-bottom: var(--spacing-md);
}

.proposals-intro__lead {
  text-align: center;
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  max-width: 640px;
  margin: 0 auto var(--spacing-xl);
  line-height: var(--line-height-relaxed);
}

.proposals-wrapper__header {
  padding-bottom: 0;
}

.strength-diagram {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-xl);
  align-items: center;
}

.strength-diagram__image {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  display: block;
}

.strength-diagram__text {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  line-height: var(--line-height-base);
}

@media (min-width: 768px) {
  .service-strength {
    padding: var(--spacing-section) var(--container-padding-tablet);
  }

  .strength-metrics {
    grid-template-columns: repeat(4, 1fr);
  }

  .strength-metric__number {
    font-size: var(--font-size-4xl);
  }

  .strength-diagram {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1280px) {
  .service-strength {
    padding: var(--spacing-section) var(--container-padding-pc);
  }
}

/* Cases Section */
.service-cases {
  background-color: var(--color-bg-primary);
  padding: var(--spacing-section-sp) var(--container-padding);
}

.service-cases .section {
  max-width: var(--container-max-width);
  margin: 0 auto;
}

@media (min-width: 768px) {
  .service-cases {
    padding: var(--spacing-section) var(--container-padding-tablet);
  }
}

@media (min-width: 1280px) {
  .service-cases {
    padding: var(--spacing-section) var(--container-padding-pc);
  }
}

/* Interviews Section */
.service-interviews {
  background-color: var(--color-bg-secondary);
  padding: var(--spacing-section-sp) var(--container-padding);
}

.service-interviews .section {
  max-width: var(--container-max-width);
  margin: 0 auto;
}

@media (min-width: 768px) {
  .service-interviews {
    padding: var(--spacing-section) var(--container-padding-tablet);
  }
}

@media (min-width: 1280px) {
  .service-interviews {
    padding: var(--spacing-section) var(--container-padding-pc);
  }
}

/* FAQ Section */
.service-faq {
  background-color: var(--color-bg-primary);
  padding: var(--spacing-section-sp) var(--container-padding);
}

.service-faq .section {
  max-width: var(--container-max-width);
  margin: 0 auto;
}

@media (min-width: 768px) {
  .service-faq {
    padding: var(--spacing-section) var(--container-padding-tablet);
  }
}

@media (min-width: 1280px) {
  .service-faq {
    padding: var(--spacing-section) var(--container-padding-pc);
  }
}

/* Coming Soon */
.coming-soon {
  text-align: center;
  padding: var(--spacing-2xl) var(--spacing-lg);
  margin-top: var(--spacing-xl);
}

.coming-soon__icon {
  font-size: var(--font-size-3xl);
  color: var(--color-text-light);
  margin-bottom: var(--spacing-md);
}

.coming-soon__text {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  line-height: var(--line-height-base);
}

/* service-hero__sub (.service-hero__catch のエイリアス) */
.service-hero__sub {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  color: var(--color-text-white);
  line-height: var(--line-height-base);
  opacity: 0.9;
}

/* service-hero バリアント */
.service-hero--hotel,
.service-hero--hall,
.service-hero--facility,
.service-hero--entertainment,
.service-hero--teaser {
  /* 共通上書き不要 — モディファイアとして宣言のみ */
}

.service-hero--dark .service-hero__overlay {
  background-color: rgba(26, 19, 17, 0.75);
}

.service-hero__overlay--heavy {
  background-color: rgba(26, 19, 17, 0.8);
}

/* service-hero ビデオバリアント */
.service-hero--video .service-hero__video-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.service-hero--video .service-hero__video-wrap video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.service-hero--video .service-hero__overlay,
.service-hero--video .service-hero__content {
  z-index: 1;
}

/* テイザーカード */
.teaser-card-wrap {
  max-width: 640px;
  margin: 0 auto;
}

.teaser-card {
  background: var(--color-bg-primary);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.teaser-card__image {
  position: relative;
  aspect-ratio: 3/2;
  overflow: hidden;
}

.teaser-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.teaser-card__badge {
  position: absolute;
  top: var(--spacing-md);
  left: var(--spacing-md);
  background: var(--color-primary);
  color: var(--color-text-white);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: var(--radius-sm);
  letter-spacing: var(--letter-spacing-wider);
}

.teaser-card__body {
  padding: var(--spacing-xl);
}

.teaser-card__label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-wider);
  color: var(--color-primary);
  margin-bottom: var(--spacing-sm);
}

.teaser-card__title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--spacing-md);
  color: var(--color-secondary);
}

.teaser-card__text {
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-xl);
}

/* COMING SOON バッジ */
.service-hero__badge {
  display: inline-block;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-wider);
  color: var(--color-text-white);
  border: 1px solid rgba(255, 255, 255, 0.7);
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: var(--radius-full);
  margin-bottom: var(--spacing-md);
}

/* エンタメ 事例カード */
.ent-case-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-2xl);
  align-items: start;
  background: var(--color-bg-primary);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

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

.ent-case-card__image {
  position: relative;
  aspect-ratio: 3/2;
  overflow: hidden;
}

.ent-case-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ent-case-card__label {
  position: absolute;
  top: var(--spacing-md);
  left: var(--spacing-md);
  background: var(--color-secondary);
  color: var(--color-text-white);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-wider);
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: var(--radius-sm);
}

.ent-case-card__body {
  padding: var(--spacing-xl);
}

.ent-case-card__eyebrow {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-wider);
  color: var(--color-primary);
  margin-bottom: var(--spacing-sm);
  text-transform: uppercase;
}

.ent-case-card__title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-secondary);
  line-height: var(--line-height-tight);
  margin-bottom: var(--spacing-lg);
}

.ent-case-card__text {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--spacing-lg);
}

.ent-case-card__points {
  list-style: none;
  padding: 0;
  margin-bottom: var(--spacing-lg);
}

.ent-case-card__points li {
  padding: var(--spacing-sm) 0;
  padding-left: var(--spacing-lg);
  position: relative;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  border-bottom: 1px solid var(--color-border);
}

.ent-case-card__points li::before {
  content: "▶";
  position: absolute;
  left: 0;
  color: var(--color-primary);
  font-size: var(--font-size-xs);
}

.ent-case-card__quote {
  background: var(--color-bg-secondary);
  border-left: 4px solid var(--color-primary);
  padding: var(--spacing-lg);
  margin: 0;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  font-style: italic;
}

.ent-case-card__quote cite {
  display: block;
  margin-top: var(--spacing-sm);
  font-size: var(--font-size-xs);
  font-style: normal;
  color: var(--color-text-light);
}

/* ==========================================================================
   20260703: 横幅が極端に狭いスマホ(iPhone 13 mini等)で、長いタイトルが折り返して
   ヒーロー固定高さ(300px)を超え、画像の下に灰色エリアが出る不具合の対策。
   狭い画面のときだけヒーローを内容に応じて伸縮させ、背景画像が全面を覆うようにする。
   （PC・広い画面は従来の固定高さのまま = 変更なし）
   ========================================================================== */
@media (max-width: 480px) {
  .service-hero {
    height: auto;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .service-hero__bg {
    position: absolute;
    inset: 0;
  }
  .service-hero__content {
    position: relative;
    inset: auto;
    padding-top: var(--spacing-xl);
    padding-bottom: var(--spacing-xl);
  }
}

/* === components/_contact-form.css === */
/* ==========================================================================
   _contact-form.css — お問い合わせフォームコンポーネント
   プロジェクト: SCP 新WEBサイト
   作成: D13.frontend-coder
   BEM: .contact-form / .contact-form__inner / .contact-form__description /
        .contact-form__iframe-wrap / .contact-form__loading
   ========================================================================== */

.contact-form {
  background-color: var(--color-bg-primary);
  padding: var(--spacing-section-sp) 0;
}

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

.contact-form__description {
  text-align: center;
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  line-height: var(--line-height-base);
  margin-bottom: var(--spacing-xl);
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.contact-form__iframe-wrap {
  max-width: 800px;
  margin: 0 auto;
  min-height: 400px;
  position: relative;
}

.contact-form__iframe {
  width: 100%;
  min-height: 600px;
  border: none;
}

.contact-form__loading {
  text-align: center;
  color: var(--color-text-light);
  font-size: var(--font-size-sm);
  padding: var(--spacing-2xl) 0;
}

/* --- リードエリア（20260528 ID32: page-hero削除→コンパクト見出しに変更） --- */
.contact-form__lead {
  text-align: center;
  margin-bottom: var(--spacing-xl);
}

.contact-form__heading {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  line-height: var(--line-height-tight);
  margin-bottom: var(--spacing-sm);
}

.contact-form__text {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  line-height: var(--line-height-base);
}

/* --- Tablet --- */
@media (min-width: 768px) {
  .contact-form {
    padding: var(--spacing-section) 0;
  }

  .contact-form__inner {
    padding: 0 var(--container-padding-tablet);
  }

  .contact-form__heading {
    font-size: var(--font-size-2xl);
  }
}

/* --- PC --- */
@media (min-width: 1280px) {
  .contact-form__inner {
    padding: 0 var(--container-padding-pc);
  }
}

/* === components/_contact-info.css === */
/* ==========================================================================
   _contact-info.css — その他お問い合わせ方法コンポーネント
   プロジェクト: SCP 新WEBサイト
   作成: D13.frontend-coder
   BEM: .other-contact / .other-contact__inner / .other-contact__cards /
        .other-contact__card / .other-contact__icon / .other-contact__label /
        .other-contact__value / .other-contact__note / .other-contact__tel
   ========================================================================== */

.other-contact {
  background-color: var(--color-bg-primary);
  padding: var(--spacing-section-sp) 0;
}

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

.other-contact__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-xl);
}

.other-contact__card {
  text-align: center;
  padding: var(--spacing-xl);
  background-color: var(--color-bg-secondary);
  border-radius: var(--radius-md);
}

.other-contact__icon {
  color: var(--color-primary);
  margin-bottom: var(--spacing-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.other-contact__label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-sm);
}

.other-contact__value {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  line-height: var(--line-height-tight);
}

.other-contact__tel {
  color: var(--color-text-primary);
  text-decoration: none;
}

.other-contact__tel:hover {
  color: var(--color-primary);
}

.other-contact__note {
  font-size: var(--font-size-xs);
  color: var(--color-text-light);
  margin-top: var(--spacing-xs);
  line-height: var(--line-height-base);
}

/* --- Tablet --- */
@media (min-width: 768px) {
  .other-contact {
    padding: var(--spacing-section) 0;
  }

  .other-contact__inner {
    padding: 0 var(--container-padding-tablet);
  }

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

/* --- PC --- */
@media (min-width: 1280px) {
  .other-contact__inner {
    padding: 0 var(--container-padding-pc);
  }
}

/* === components/_whitepaper-card.css === */
/* ==========================================================================
   _whitepaper-card.css — ホワイトペーパーカード・セクションコンポーネント
   プロジェクト: SCP 新WEBサイト
   作成: D13.frontend-coder
   BEM: .whitepaper-section / .whitepaper-section__inner /
        .whitepaper-section__description / .wp-card-grid / .wp-card /
        .wp-card__thumbnail / .wp-card__body / .wp-card__title /
        .wp-card__description / .wp-card__action / .wp-card__coming-soon
   ========================================================================== */

.whitepaper-section {
  padding: var(--spacing-section-sp) 0;
}

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

.whitepaper-section__description {
  text-align: center;
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  line-height: var(--line-height-base);
  margin-bottom: var(--spacing-xl);
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.wp-card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-xl);
}

.wp-card {
  background-color: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: box-shadow var(--transition-base);
}

.wp-card:hover {
  box-shadow: var(--shadow-lg);
}

.wp-card--coming-soon {
  opacity: 0.6;
}

.wp-card__thumbnail img {
  width: 100%;
  height: auto;
  display: block;
}

.wp-card__body {
  padding: var(--spacing-md);
}

.wp-card__title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-xs);
  line-height: var(--line-height-tight);
}

.wp-card__description {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-base);
  margin-bottom: var(--spacing-md);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.wp-card__action {
  padding: 0 var(--spacing-md) var(--spacing-md);
}

.wp-card__coming-soon {
  display: inline-block;
  padding: var(--spacing-xs) var(--spacing-sm);
  background-color: var(--color-bg-secondary);
  color: var(--color-text-light);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-sm);
}

/* --- Tablet --- */
@media (min-width: 768px) {
  .whitepaper-section {
    padding: var(--spacing-section) 0;
  }

  .whitepaper-section__inner {
    padding: 0 var(--container-padding-tablet);
  }

  .wp-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- PC --- */
@media (min-width: 1280px) {
  .whitepaper-section__inner {
    padding: 0 var(--container-padding-pc);
  }

  .wp-card-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* --- reduced-motion --- */
@media (prefers-reduced-motion: reduce) {
  .wp-card {
    transition: none;
  }
}

/* === components/_metric-bar.css === */
/* ==========================================================================
   _metric-bar.css — 数値ハイライト帯
   ========================================================================== */

.metric-bar {
  padding: var(--spacing-xl) var(--container-padding);
}

.metric-bar--red {
  background-color: var(--color-primary);
}

.metric-bar__inner {
  max-width: var(--container-max-width);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-xl) var(--spacing-2xl);
}

.metric-bar__item {
  text-align: center;
  min-width: 120px;
}

.metric-bar__number {
  display: block;
  font-family: var(--font-family-heading);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-white);
  line-height: var(--line-height-tight);
  margin-bottom: var(--spacing-xs);
}

.metric-bar__label {
  font-size: var(--font-size-xs);
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: var(--letter-spacing-base);
}

@media (min-width: 768px) {
  .metric-bar {
    padding: var(--spacing-xl) var(--container-padding-tablet);
  }

  .metric-bar__number {
    font-size: var(--font-size-4xl);
  }
}

@media (min-width: 1280px) {
  .metric-bar {
    padding: var(--spacing-xl) var(--container-padding-pc);
  }
}

/* === components/_service-lead.css === */
/* ==========================================================================
   _service-lead.css — サービスリード文セクション
   ========================================================================== */

.service-lead {
  padding: var(--spacing-section-sp) var(--container-padding);
}

.service-lead .section {
  max-width: var(--container-max-width);
  margin: 0 auto;
}

.service-lead__text {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-lg);
  color: var(--color-text-primary);
  line-height: var(--line-height-loose);
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

@media (min-width: 768px) {
  .service-lead {
    padding: var(--spacing-section) var(--container-padding-tablet);
  }

  .service-lead__text {
    font-size: var(--font-size-xl);
  }
}

@media (min-width: 1280px) {
  .service-lead {
    padding: var(--spacing-section) var(--container-padding-pc);
  }
}

/* === components/_custom-section.css === */
/* ==========================================================================
   _custom-section.css — サービス詳細提案セクション（交互レイアウト）
   ========================================================================== */

.custom-section {
  padding: var(--spacing-section-sp) var(--container-padding);
}

.custom-section:nth-of-type(even) {
  background-color: var(--color-bg-secondary);
}

.custom-section__inner {
  max-width: var(--container-max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-xl);
  align-items: center;
}

.custom-section__text {
  order: 2;
}

.custom-section__image {
  order: 1;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.custom-section__image img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform var(--transition-slow);
}

.custom-section__image:hover img {
  transform: scale(1.02);
}

/* 番号 + タイトルを横並び */
.custom-section__title-row {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-lg);
}

.custom-section__number {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  line-height: 1.1;
  flex-shrink: 0;
}

.custom-section__heading {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  line-height: var(--line-height-tight);
  padding-top: 0.25em;
  /* 手書き風の赤い下線 */
  text-decoration: underline;
  text-decoration-color: var(--color-primary);
  text-decoration-style: wavy;
  text-underline-offset: 6px;
  text-decoration-thickness: 2px;
}

/* キャッチコピー：中央寄せ・太字・「」は黒 */
.custom-section__catchcopy {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  text-align: center;
  line-height: var(--line-height-tight);
  margin-bottom: var(--spacing-lg);
  padding: var(--spacing-md) 0;
}

.custom-section__catchcopy::before {
  content: '「';
}

.custom-section__catchcopy::after {
  content: '」';
}

.custom-section__body {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  line-height: var(--line-height-base);
}

@media (min-width: 768px) {
  .custom-section {
    padding: var(--spacing-section) var(--container-padding-tablet);
  }

  .custom-section__inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-3xl);
  }

  /* text-left: テキスト左・画像右 */
  .custom-section--text-left .custom-section__text {
    order: 1;
  }

  .custom-section--text-left .custom-section__image {
    order: 2;
  }

  /* text-right: 画像左・テキスト右 */
  .custom-section--text-right .custom-section__text {
    order: 2;
  }

  .custom-section--text-right .custom-section__image {
    order: 1;
  }

  .custom-section__number {
    font-size: var(--font-size-4xl);
  }

  .custom-section__heading {
    font-size: var(--font-size-xl);
  }

  .custom-section__catchcopy {
    font-size: var(--font-size-2xl);
  }
}

@media (min-width: 1280px) {
  .custom-section {
    padding: var(--spacing-section) var(--container-padding-pc);
  }
}

@media (prefers-reduced-motion: reduce) {
  .custom-section__image img {
    transition: none;
  }

  .custom-section__image:hover img {
    transform: none;
  }
}

/* === components/_service-closing.css === */
/* ==========================================================================
   _service-closing.css — サービスページ クロージングCTA
   ========================================================================== */

.service-closing {
  padding: var(--spacing-section-sp) var(--container-padding);
  background-color: var(--color-bg-secondary);
  text-align: center;
}

.service-closing--dark {
  background-color: var(--color-bg-dark);
}

.service-closing__inner {
  max-width: 800px;
  margin: 0 auto;
}

.service-closing__heading {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  line-height: var(--line-height-tight);
  margin-bottom: var(--spacing-lg);
}

.service-closing--dark .service-closing__heading {
  color: var(--color-text-white);
}

.service-closing__text {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  line-height: var(--line-height-base);
  margin-bottom: var(--spacing-xl);
}

.service-closing--dark .service-closing__text {
  color: rgba(255, 255, 255, 0.75);
}

.service-closing__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-md) var(--spacing-2xl);
  border-radius: var(--radius-full);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
  transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.button--red,
.service-closing__button.button--red {
  background-color: var(--color-primary);
  color: var(--color-text-white);
}

.button--red:hover,
.service-closing__button.button--red:hover {
  background-color: var(--color-primary-dark);
  transform: translateY(-2px);
}

.service-closing__external {
  margin-top: var(--spacing-lg);
  font-size: var(--font-size-sm);
}

.service-closing__external-link {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: underline;
  transition: color var(--transition-fast);
}

.service-closing__external-link:hover {
  color: var(--color-text-white);
}

@media (min-width: 768px) {
  .service-closing {
    padding: var(--spacing-section) var(--container-padding-tablet);
  }

  .service-closing__heading {
    font-size: var(--font-size-3xl);
  }
}

@media (min-width: 1280px) {
  .service-closing {
    padding: var(--spacing-section) var(--container-padding-pc);
  }
}

@media (prefers-reduced-motion: reduce) {
  .button--red:hover,
  .service-closing__button.button--red:hover {
    transform: none;
  }
}

/* === components/_hall-components.css === */
/* ==========================================================================
   _hall-components.css — ホール運営専用コンポーネント
   ========================================================================== */

/* --- Hall Intro (2-col layout) --- */
.hall-intro {
  padding: var(--spacing-section-sp) var(--container-padding);
}

.hall-intro .section {
  max-width: var(--container-max-width);
  margin: 0 auto;
}

.hall-intro__lead {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-lg);
  color: var(--color-text-primary);
  line-height: var(--line-height-base);
  margin: var(--spacing-xl) auto var(--spacing-2xl);
  text-align: center;
  max-width: 700px;
}

.hall-intro__cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-xl);
  align-items: start;
}

/* --- Gallery --- */
.hall-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-sm);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.hall-gallery picture:first-child {
  grid-column: 1 / -1;
}

.hall-gallery__img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

.hall-gallery picture:first-child .hall-gallery__img {
  height: 280px;
}

/* --- Spec Table --- */
.hall-spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

.hall-spec-table__th {
  width: 35%;
  padding: var(--spacing-sm) var(--spacing-md);
  background-color: var(--color-bg-secondary);
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-medium);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}

.hall-spec-table__td {
  padding: var(--spacing-sm) var(--spacing-md);
  color: var(--color-text-primary);
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}

/* --- Services Grid --- */
.hall-services {
  padding: var(--spacing-section-sp) var(--container-padding);
}

.hall-services .section {
  max-width: var(--container-max-width);
  margin: 0 auto;
}

.hall-services__lead {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  margin: var(--spacing-xl) 0 var(--spacing-lg);
  text-align: center;
}

.hall-services-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-md);
}

.hall-services-grid__item {
  background-color: var(--color-bg-primary);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  box-shadow: var(--shadow-sm);
  display: grid;
  gap: var(--spacing-xs);
}

/* T114-T118: SHIDAX HALL セクション 写真3枚横並び + CTAボタン */
.hall-intro__photos {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-md);
  margin: var(--spacing-xl) 0;
}

@media (min-width: 768px) {
  .hall-intro__photos {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
  }
}

.hall-intro__photo {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-md);
}

.hall-intro__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  aspect-ratio: 4 / 3;
}

.hall-intro__cta {
  text-align: center;
  margin-top: var(--spacing-xl);
}

/* 20260508: 「シダックスカルチャーホール ご利用の流れ」直下の大型CTAボタン
   （旧「詳細はこちら」をここに移動・目立つボタンに変更）
   20260528 マスター指示: CTAコーナー全体を赤背景 + 白いボタン + 赤い文字 にして強力に目立たせる
   20260528 マスター指示v2: 赤背景を左右ぶち抜き(横100%)にする
   → 親 .section の左右 padding を打ち消すため negative margin + 100vw 幅で実装 */
.hall-flow-section__cta {
  text-align: center;
  margin-top: var(--spacing-2xl, 2.5rem);
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
  background-color: var(--color-primary);
  padding: 2.5rem 1.5rem;
  border-radius: 0;
  box-shadow: 0 10px 30px rgba(220, 0, 12, 0.25);
}

.hall-flow-section__cta-btn {
  display: inline-block;
  padding: 1.1em 3em;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  border-radius: var(--radius-md);
  background-color: #fff;
  color: var(--color-primary);
  letter-spacing: 0.04em;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  transition: transform var(--transition-base), box-shadow var(--transition-base), background-color var(--transition-base), color var(--transition-base);
  text-decoration: none;
}

.hall-flow-section__cta-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
  background-color: #fff;
  color: var(--color-primary);
}

@media (min-width: 768px) {
  .hall-flow-section__cta {
    padding: 3rem 2rem;
  }
  .hall-flow-section__cta-btn {
    font-size: var(--font-size-xl);
    padding: 1.2em 4em;
  }
}

/* T111: 赤い四角→ビジネスアイコン（白背景＋赤線SVG画像を中央表示） */
.hall-services-grid__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background-color: #fff;
  border: 1.5px solid var(--color-primary);
  border-radius: var(--radius-sm);
  margin-bottom: var(--spacing-sm);
  padding: 8px;
  box-sizing: border-box;
}

.hall-services-grid__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.hall-services-grid__name {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

.hall-services-grid__desc {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  line-height: var(--line-height-base);
}

/* --- Cases --- */
.hall-cases {
  padding: var(--spacing-section-sp) var(--container-padding);
}

.hall-cases .section {
  max-width: var(--container-max-width);
  margin: 0 auto;
}

.hall-cases__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-xl);
  margin-top: var(--spacing-xl);
}

.hall-case-card {
  background-color: var(--color-bg-primary);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.hall-case-card__image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

.hall-case-card__body {
  padding: var(--spacing-lg);
}

.hall-case-card__title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-sm);
}

.hall-case-card__text {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-base);
}

/* --- Flow --- */
.hall-flow-section {
  padding: var(--spacing-section-sp) var(--container-padding);
}

.hall-flow-section .section {
  max-width: var(--container-max-width);
  margin: 0 auto;
}

.hall-flow {
  list-style: none;
  padding: 0;
  margin: var(--spacing-xl) 0 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-lg);
}

.hall-flow__step {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: var(--spacing-md);
  align-items: start;
}

.hall-flow__step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-full);
  background-color: var(--color-primary);
  color: var(--color-text-white);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-wide);
  flex-shrink: 0;
}

.hall-flow__step-title {
  display: block;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-xs);
}

.hall-flow__step-desc {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-base);
}

/* --- Menu Grid --- */
.hall-menu-section {
  padding: var(--spacing-section-sp) var(--container-padding);
}

.hall-menu-section .section {
  max-width: var(--container-max-width);
  margin: 0 auto;
}

.hall-menu-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-lg);
  margin-top: var(--spacing-xl);
}

.hall-menu-card {
  background-color: var(--color-bg-primary);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.hall-menu-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-4px);
}

.hall-menu-card__image {
  width: 100%;
  height: 160px;
  object-fit: cover;
  display: block;
}

.hall-menu-card__body {
  padding: var(--spacing-md);
}

.hall-menu-card__name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-xs);
}

.hall-menu-card__price {
  font-size: var(--font-size-sm);
  color: var(--color-primary);
  font-weight: var(--font-weight-medium);
}

/* --- Access --- */
.hall-access {
  padding: var(--spacing-section-sp) var(--container-padding);
}

.hall-access .section {
  max-width: var(--container-max-width);
  margin: 0 auto;
}

.hall-access__cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-xl);
  margin-top: var(--spacing-xl);
}

.hall-access__map {
  border-radius: var(--radius-md);
  overflow: hidden;
}

.hall-access__map iframe {
  width: 100%;
  height: 300px;
  display: block;
  border: 0;
}

.hall-access__dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--spacing-xs) var(--spacing-lg);
  align-items: start;
}

.hall-access__dt {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  padding: var(--spacing-xs) 0;
  white-space: nowrap;
}

.hall-access__dd {
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  padding: var(--spacing-xs) 0;
  border-bottom: 1px solid var(--color-border-light);
}

.hall-access__tel {
  color: var(--color-primary);
  font-weight: var(--font-weight-medium);
}

/* --- Media Queries --- */
@media (min-width: 768px) {
  .hall-intro {
    padding: var(--spacing-section) var(--container-padding-tablet);
  }

  .hall-intro__cols {
    grid-template-columns: 1fr 1fr;
  }

  .hall-gallery__img {
    height: 250px;
  }

  .hall-gallery picture:first-child .hall-gallery__img {
    height: 360px;
  }

  .hall-services {
    padding: var(--spacing-section) var(--container-padding-tablet);
  }

  .hall-services-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .hall-cases {
    padding: var(--spacing-section) var(--container-padding-tablet);
  }

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

  .hall-flow-section {
    padding: var(--spacing-section) var(--container-padding-tablet);
  }

  .hall-flow {
    grid-template-columns: repeat(4, 1fr);
  }

  .hall-flow__step {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .hall-flow__step-num {
    margin: 0 auto var(--spacing-md);
  }

  .hall-menu-section {
    padding: var(--spacing-section) var(--container-padding-tablet);
  }

  .hall-menu-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .hall-access {
    padding: var(--spacing-section) var(--container-padding-tablet);
  }

  .hall-access__cols {
    grid-template-columns: 1fr 1fr;
  }

  .hall-access__map iframe {
    height: 100%;
    min-height: 350px;
  }
}

@media (min-width: 1280px) {
  .hall-intro,
  .hall-services,
  .hall-cases,
  .hall-flow-section,
  .hall-menu-section,
  .hall-access {
    padding: var(--spacing-section) var(--container-padding-pc);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hall-menu-card:hover {
    transform: none;
  }
}

/* =====================================================================
   20260508: ホール運営ページ全体のセクション間余白を詰める
   + SHIDAX HALL（hall-intro）と HOW TO USE（hall-flow-section）を
   両方とも白背景・上下を密着させて「シダックスカルチャーホール関連」の一括りに見せる。
   このブロックはファイル末尾に置き、上記メディアクエリのpaddingショートハンドを上書きする。
   ===================================================================== */
.hall-cases,
.hall-services,
.hall-intro,
.hall-flow-section {
  padding-top: var(--spacing-2xl, 2.5rem);
  padding-bottom: var(--spacing-2xl, 2.5rem);
}

@media (min-width: 768px) {
  .hall-cases,
  .hall-services,
  .hall-intro,
  .hall-flow-section {
    padding-top: var(--spacing-3xl, 3.5rem);
    padding-bottom: var(--spacing-3xl, 3.5rem);
  }
}

@media (min-width: 1280px) {
  .hall-cases,
  .hall-services,
  .hall-intro,
  .hall-flow-section {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}

/* SHIDAX HALL → ご利用の流れ を一括りに（密着・区切り線なし）
   hall-intro の下padding ＋ hall-flow-section の上padding を最小化する */
.hall-intro {
  padding-bottom: var(--spacing-md, 1rem);
}

.hall-flow-section {
  padding-top: 0;
}

@media (min-width: 768px) {
  .hall-intro {
    padding-bottom: var(--spacing-md, 1rem);
  }
  .hall-flow-section {
    padding-top: 0;
  }
}

@media (min-width: 1280px) {
  .hall-intro {
    padding-bottom: var(--spacing-md, 1rem);
  }
  .hall-flow-section {
    padding-top: 0;
  }
}

/* シダックスカルチャーホール関連の見出し位置を整える */
.hall-flow-section .section-header {
  margin-top: var(--spacing-xl);
}

/* === components/_history-timeline.css === */
/* ==========================================================================
   _history-timeline.css — 歴史タイムラインコンポーネント（エンタメTOP用）
   ========================================================================== */

.history-section {
  padding: var(--spacing-section-sp) var(--container-padding);
  background-color: var(--color-bg-dark);
}

.history-section .section {
  max-width: var(--container-max-width);
  margin: 0 auto;
}

/* ダークセクション内の section-header を白色に */
.section-header--light .section-header__label-en {
  color: rgba(255, 255, 255, 0.5);
}

.section-header--light .section-header__title {
  color: var(--color-text-white);
}

.section-header--light .section-header__line {
  background-color: var(--color-primary);
}

/* Timeline */
.history-timeline {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-xl);
  margin-top: var(--spacing-2xl);
  position: relative;
}

.history-timeline::before {
  content: "";
  position: absolute;
  left: 60px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom, var(--color-primary), rgba(220, 0, 12, 0.1));
}

.history-timeline__item {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: var(--spacing-lg);
  align-items: start;
  position: relative;
}

.history-timeline__item::before {
  content: "";
  position: absolute;
  left: 60px;
  top: 24px;
  width: 10px;
  height: 10px;
  background-color: var(--color-primary);
  border-radius: var(--radius-full);
  transform: translateX(-50%);
  box-shadow: 0 0 0 4px rgba(220, 0, 12, 0.2);
}

.history-timeline__year {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  line-height: var(--line-height-tight);
  padding-top: var(--spacing-xs);
}

.history-timeline__content {
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  border-left: 3px solid var(--color-primary);
}

.history-timeline__title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-white);
  margin-bottom: var(--spacing-sm);
}

.history-timeline__body {
  font-size: var(--font-size-sm);
  color: rgba(255, 255, 255, 0.75);
  line-height: var(--line-height-base);
}

@media (min-width: 768px) {
  .history-section {
    padding: var(--spacing-section) var(--container-padding-tablet);
  }

  .history-timeline {
    grid-template-columns: repeat(2, 1fr);
  }

  .history-timeline::before {
    display: none;
  }

  .history-timeline__item {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }

  .history-timeline__item::before {
    display: none;
  }

  .history-timeline__year {
    font-size: var(--font-size-3xl);
  }
}

@media (min-width: 1280px) {
  .history-section {
    padding: var(--spacing-section) var(--container-padding-pc);
  }

  /* T092: 3つの箱をセンター合わせ（4列→3列、コンテンツも中央揃え） */
  .history-timeline {
    grid-template-columns: repeat(3, minmax(0, 320px));
    justify-content: center;
  }
}

/* T092: 各箱のテキストもセンター合わせ */
.history-timeline__item {
  text-align: center;
}

.history-timeline__content {
  border-left: none;
  border-top: 3px solid var(--color-primary);
}

/* === components/_teaser-section.css === */
/* ==========================================================================
   _teaser-section.css — Coming Soon ティーザーページコンポーネント
   ========================================================================== */

.teaser-section {
  padding: var(--spacing-section-sp) var(--container-padding);
}

.teaser-section .section {
  max-width: var(--container-max-width);
  margin: 0 auto;
}

.teaser-section__body {
  text-align: center;
  max-width: 700px;
  margin: var(--spacing-xl) auto var(--spacing-2xl);
}

.teaser-section__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  margin: 0 auto var(--spacing-xl);
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-full);
}

.teaser-section__lead {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-lg);
  color: var(--color-text-primary);
  line-height: var(--line-height-base);
  margin-bottom: var(--spacing-lg);
}

.teaser-section__note {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-base);
}

.teaser-section__features {
  margin-top: var(--spacing-2xl);
}

@media (min-width: 768px) {
  .teaser-section {
    padding: var(--spacing-section) var(--container-padding-tablet);
  }
}

@media (min-width: 1280px) {
  .teaser-section {
    padding: var(--spacing-section) var(--container-padding-pc);
  }
}

/* === components/_vision-2030.css === */
/* ==========================================================================
   _vision-2030.css — 2030年ビジョン・ロードマップ
   BEM: .vision-2030-section / .roadmap-timeline / .roadmap-phase
   ========================================================================== */

.vision-2030-section {
  background-color: var(--color-bg-primary);
  padding: var(--spacing-section-sp) 0;
}

.vision-2030-section__inner {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.vision-2030-section__intro {
  max-width: 720px;
  margin: 0 auto var(--spacing-2xl);
  text-align: center;
  font-size: var(--font-size-md);
  line-height: 1.9;
  color: var(--color-text-primary);
}

.vision-2030-section__roadmap {
  margin-top: var(--spacing-2xl);
}

.vision-2030-section__roadmap-heading {
  text-align: center;
  font-size: var(--font-size-xl);
  font-weight: 700;
  margin-bottom: var(--spacing-xl);
  color: var(--color-text-primary);
}

/* ロードマップタイムライン */
.roadmap-timeline {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-xl);
}

.roadmap-phase {
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
  padding: var(--spacing-xl);
  border-left: 4px solid var(--color-accent, #DC000C);
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: var(--spacing-lg);
  align-items: start;
}

.roadmap-phase__year {
  font-size: var(--font-size-2xl, 2rem);
  font-weight: 700;
  color: var(--color-accent, #DC000C);
  line-height: 1;
}

.roadmap-phase__body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.roadmap-phase__label {
  font-size: var(--font-size-lg);
  font-weight: 700;
  margin: 0;
  color: var(--color-text-primary);
}

.roadmap-phase__actions {
  list-style: disc inside;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.roadmap-phase__action {
  font-size: var(--font-size-sm);
  line-height: 1.7;
  color: var(--color-text-secondary);
}

@media (min-width: 768px) {
  .vision-2030-section {
    padding: var(--spacing-section) 0;
  }
  .vision-2030-section__inner {
    padding: 0 var(--container-padding-tablet);
  }
}

@media (min-width: 1280px) {
  .vision-2030-section__inner {
    padding: 0 var(--container-padding-pc);
  }
  .roadmap-timeline {
    grid-template-columns: repeat(3, 1fr);
  }
  .roadmap-phase {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }
}

/* === components/_lp-detail.css === */
/* ================================================================
   lp-detail.css — サービス詳細 LPスタイル
   body.lp-page に適用。style.css の後に読み込む。
   ================================================================ */

/* ----------------------------------------------------------------
   Body offset リセット（ヘッダー分のpaddingを除去）
   ---------------------------------------------------------------- */
.lp-page {
  padding-top: 0 !important;
}

/* LPページではパンくずを非表示（HEROが画面を占領する） */
.lp-page .breadcrumb {
  display: none;
}

/* ----------------------------------------------------------------
   Header: 最初は非表示、スクロール後にフェードイン
   ---------------------------------------------------------------- */
.lp-page .header {
  opacity: 0;
  transform: translateY(-100%);
  transition: opacity 0.45s ease, transform 0.45s ease;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
}

.lp-page .header.header--visible {
  opacity: 1;
  transform: translateY(0);
}

/* ----------------------------------------------------------------
   Floating CTA（画面右下固定ボタン）
   ---------------------------------------------------------------- */
.lp-float-cta {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 200;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
}

.lp-float-cta.lp-float-cta--visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.lp-float-cta__btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: #DC000C;
  color: #fff;
  padding: 0.875rem 1.625rem;
  border-radius: 50px;
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 4px 24px rgba(220, 0, 12, 0.4);
  transition: box-shadow 0.2s, transform 0.2s;
  white-space: nowrap;
  letter-spacing: 0.03em;
}

.lp-float-cta__btn:hover {
  box-shadow: 0 6px 32px rgba(220, 0, 12, 0.5);
  transform: translateY(-2px);
}

.lp-float-cta__btn::before {
  content: "✉";
  font-size: 0.875rem;
}

/* ----------------------------------------------------------------
   LP Hero — 全画面写真 + 左下テキスト
   ---------------------------------------------------------------- */
.lp-hero {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 600px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}

/* ---- Slideshow ---- */
.lp-hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.4s ease;
  will-change: opacity;
}

.lp-hero__slide.is-active {
  opacity: 1;
}

.lp-hero__slide img,
.lp-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

.lp-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    160deg,
    rgba(0, 0, 0, 0.05) 0%,
    rgba(0, 0, 0, 0.20) 45%,
    rgba(0, 0, 0, 0.45) 100%
  );
}

.lp-hero__content {
  position: relative;
  z-index: 2;
  padding: 0 3.5rem 4.5rem;
  color: #fff;
  max-width: 920px;
  text-shadow: 0 2px 32px rgba(0, 0, 0, 0.6);
}

.lp-hero__category {
  display: inline-block;
  font-size: clamp(0.875rem, 1vw, 1rem);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 0.9;
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}

.lp-hero__title {
  font-size: clamp(1.875rem, 3.2vw, 3.25rem);
  font-weight: 700;
  line-height: 1.35;
  margin-bottom: 1.5rem;
  text-shadow: 0 2px 32px rgba(0, 0, 0, 0.7), 0 0 80px rgba(0, 0, 0, 0.4);
}

.lp-hero__sub {
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  opacity: 0.95;
  line-height: 1.85;
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.6);
}

/* Scroll indicator */
.lp-hero__scroll {
  position: absolute;
  bottom: 2.5rem;
  right: 3rem;
  z-index: 2;
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.625rem;
  letter-spacing: 0.25em;
  writing-mode: vertical-rl;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.lp-hero__scroll::after {
  content: "";
  width: 1px;
  height: 48px;
  background: rgba(255, 255, 255, 0.5);
  animation: lp-scroll-grow 1.8s ease-in-out infinite;
}

@keyframes lp-scroll-grow {
  0%   { transform: scaleY(0); transform-origin: top; opacity: 1; }
  45%  { transform: scaleY(1); transform-origin: top; opacity: 1; }
  46%  { transform: scaleY(1); transform-origin: bottom; opacity: 1; }
  100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}

/* ----------------------------------------------------------------
   LP Lead — センタリングされたリードセクション
   ---------------------------------------------------------------- */
.lp-lead {
  padding: clamp(5rem, 10vh, 8rem) clamp(1.5rem, 5vw, 5rem);
  text-align: center;
  background: #fff;
}

.lp-lead__label {
  display: inline-block;
  font-size: 0.65rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #DC000C;
  font-weight: 700;
  margin-bottom: 1.75rem;
}

.lp-lead__heading {
  font-size: clamp(1.375rem, 2.5vw, 2rem);
  font-weight: 700;
  line-height: 1.6;
  color: #111;
  margin-bottom: 2rem;
}

.lp-lead__text {
  font-size: clamp(0.875rem, 1.2vw, 0.9375rem);
  color: #555;
  line-height: 2.1;
  max-width: 680px;
  margin: 0 auto;
}

/* ----------------------------------------------------------------
   LP Metrics Bar — 数値実績帯（赤背景）
   ---------------------------------------------------------------- */
.lp-metric-bar {
  background: #DC000C;
  padding: 2.75rem 0;
}

.lp-metric-bar__inner {
  display: flex;
  align-items: stretch;
  justify-content: center;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.lp-metric-bar__item {
  flex: 1;
  text-align: center;
  color: #fff;
  padding: 0 2.5rem;
  border-right: 1px solid rgba(255, 255, 255, 0.22);
}

.lp-metric-bar__item:last-child {
  border-right: none;
}

.lp-metric-bar__number {
  display: block;
  font-size: clamp(2.25rem, 4vw, 3.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
}

.lp-metric-bar__label {
  display: block;
  font-size: 0.72rem;
  opacity: 0.82;
  margin-top: 0.5rem;
  line-height: 1.5;
}

/* ----------------------------------------------------------------
   LP Section title — 提案タイトル帯
   ---------------------------------------------------------------- */
.lp-proposals-title {
  padding: clamp(4rem, 8vh, 6rem) clamp(1.5rem, 5vw, 5rem);
  background: #f7f7f5;
  text-align: center;
}

.lp-proposals-title__en {
  display: block;
  font-size: 0.65rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #DC000C;
  font-weight: 700;
  margin-bottom: 1rem;
}

.lp-proposals-title__heading {
  font-size: clamp(1.375rem, 2.5vw, 2rem);
  font-weight: 700;
  color: #111;
  margin-bottom: 1.25rem;
}

.lp-proposals-title__lead {
  font-size: clamp(0.875rem, 1.2vw, 0.9375rem);
  color: #666;
  line-height: 2;
  max-width: 640px;
  margin: 0 auto;
}

/* ----------------------------------------------------------------
   LP Split — 写真 60% + テキスト 40% の分割セクション
   ---------------------------------------------------------------- */
.lp-split {
  display: grid;
  grid-template-columns: 60fr 40fr;
  min-height: 72vh;
}

.lp-split--flip {
  grid-template-columns: 40fr 60fr;
}

.lp-split--flip .lp-split__image {
  order: 2;
}

.lp-split--flip .lp-split__text {
  order: 1;
}

.lp-split__image {
  position: relative;
  overflow: hidden;
  min-height: 460px;
}

.lp-split__image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s ease;
}

.lp-split:hover .lp-split__image img {
  transform: scale(1.04);
}

.lp-split__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(3rem, 6vw, 5.5rem) clamp(2rem, 4vw, 4.5rem);
  background: #fff;
}

.lp-split--gray .lp-split__text {
  background: #f7f7f5;
}

.lp-split__number {
  display: block;
  font-size: clamp(4rem, 7vw, 7rem);
  font-weight: 800;
  color: #DC000C;
  opacity: 0.1;
  line-height: 1;
  letter-spacing: -0.04em;
  margin-bottom: -1.25rem;
  pointer-events: none;
}

.lp-split__heading {
  font-size: clamp(1.125rem, 2vw, 1.625rem);
  font-weight: 700;
  line-height: 1.5;
  color: #111;
  margin-bottom: 0.875rem;
}

.lp-split__catchcopy {
  font-size: 0.875rem;
  font-weight: 600;
  color: #DC000C;
  margin-bottom: 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid #e8e8e8;
}

.lp-split__body {
  font-size: clamp(0.8125rem, 1.1vw, 0.875rem);
  color: #555;
  line-height: 2;
}

/* ----------------------------------------------------------------
   LP Feature — 全面写真 + 右寄りフローティングダークパネル
   ---------------------------------------------------------------- */
.lp-feature {
  position: relative;
  min-height: 75vh;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.lp-feature__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.lp-feature__bg-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
}

/* パネルを右側に配置 */
.lp-feature__panel {
  position: relative;
  z-index: 2;
  margin-left: auto;
  width: min(46%, 560px);
  background: rgba(18, 18, 18, 0.91);
  backdrop-filter: blur(4px);
  padding: clamp(2.5rem, 4vw, 4rem) clamp(2rem, 3.5vw, 3.5rem);
  color: #fff;
}

/* パネルを左側に配置 */
.lp-feature--left .lp-feature__panel {
  margin-left: 0;
  margin-right: auto;
}

.lp-feature__number {
  display: block;
  font-size: clamp(4rem, 7vw, 7rem);
  font-weight: 800;
  color: #DC000C;
  opacity: 0.18;
  line-height: 1;
  letter-spacing: -0.04em;
  margin-bottom: -1.25rem;
}

.lp-feature__heading {
  font-size: clamp(1.125rem, 2vw, 1.5rem);
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 0.875rem;
  color: #fff;
}

.lp-feature__catchcopy {
  font-size: 0.875rem;
  font-weight: 600;
  color: #ff6b6b;
  margin-bottom: 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.lp-feature__body {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.8);
  line-height: 2;
}

/* ----------------------------------------------------------------
   LP Strength — ダーク背景の数値セクション
   ---------------------------------------------------------------- */
.lp-strength {
  background: #111;
  padding: clamp(5rem, 10vh, 7rem) clamp(1.5rem, 5vw, 4rem);
  text-align: center;
}

.lp-strength__en {
  display: block;
  font-size: 0.65rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #DC000C;
  font-weight: 700;
  margin-bottom: 1rem;
}

.lp-strength__heading {
  font-size: clamp(1.25rem, 2.5vw, 1.875rem);
  font-weight: 700;
  color: #fff;
  margin-bottom: 3.5rem;
}

.lp-strength__metrics {
  display: flex;
  justify-content: center;
  max-width: 900px;
  margin: 0 auto;
}

.lp-strength__metric {
  flex: 1;
  padding: 0 2rem;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.lp-strength__metric:last-child {
  border-right: none;
}

.lp-strength__number {
  display: block;
  font-size: clamp(2.5rem, 4.5vw, 4rem);
  font-weight: 800;
  color: #DC000C;
  line-height: 1;
  letter-spacing: -0.03em;
}

.lp-strength__unit {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.6);
}

.lp-strength__label {
  display: block;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.45);
  margin-top: 0.75rem;
  line-height: 1.6;
}

/* ----------------------------------------------------------------
   LP Closing CTA
   ---------------------------------------------------------------- */
.lp-closing {
  position: relative;
  overflow: hidden;
  padding: clamp(5rem, 10vh, 8rem) 2rem;
  text-align: center;
  background: #DC000C;
  color: #fff;
}

.lp-closing__heading {
  font-size: clamp(1.375rem, 2.8vw, 2.25rem);
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 1.25rem;
}

.lp-closing__text {
  font-size: 0.9375rem;
  opacity: 0.9;
  line-height: 2;
  max-width: 580px;
  margin: 0 auto 2.5rem;
}

.lp-closing__btn {
  display: inline-block;
  background: #fff;
  color: #DC000C;
  padding: 1rem 2.75rem;
  border-radius: 4px;
  font-weight: 700;
  font-size: 0.9375rem;
  text-decoration: none;
  letter-spacing: 0.05em;
  transition: background 0.2s, box-shadow 0.2s, transform 0.2s;
}

.lp-closing__btn:hover {
  background: #f5f5f5;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
  transform: translateY(-2px);
}

/* ----------------------------------------------------------------
   LP Contract — 契約方式（MC vs 賃貸借）
   ---------------------------------------------------------------- */
.lp-contract {
  padding: clamp(5rem, 10vh, 8rem) clamp(1.5rem, 5vw, 4rem);
  background: #f7f7f5;
}

.lp-contract__inner {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}

.lp-contract__label {
  display: inline-block;
  font-size: 0.7rem;
  letter-spacing: 0.25em;
  color: #DC000C;
  margin-bottom: 0.75rem;
  font-weight: 700;
}

.lp-contract__heading {
  font-size: clamp(1.375rem, 2.8vw, 2.125rem);
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 1rem;
  color: #111;
}

.lp-contract__lead {
  font-size: 0.9375rem;
  color: #555;
  line-height: 1.9;
  max-width: 640px;
  margin: 0 auto 3rem;
}

.lp-contract__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  text-align: left;
}

.lp-contract__card {
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  padding: clamp(1.75rem, 3vw, 2.5rem);
}

.lp-contract__card--highlight {
  border-color: #DC000C;
  box-shadow: 0 4px 24px rgba(220, 0, 12, 0.1);
}

.lp-contract__card-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #555;
  background: #f0f0ee;
  padding: 0.25rem 0.75rem;
  border-radius: 2px;
  margin-bottom: 0.875rem;
}

.lp-contract__card-badge--red {
  color: #DC000C;
  background: rgba(220, 0, 12, 0.08);
}

.lp-contract__card-title {
  font-size: clamp(1.1rem, 1.6vw, 1.375rem);
  font-weight: 700;
  color: #111;
  margin-bottom: 0.875rem;
}

.lp-contract__card-desc {
  font-size: 0.875rem;
  color: #444;
  line-height: 1.85;
  margin-bottom: 1.25rem;
}

.lp-contract__card-points {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.lp-contract__card-points li {
  font-size: 0.875rem;
  color: #333;
  padding-left: 1.25rem;
  position: relative;
}

.lp-contract__card-points li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #DC000C;
  font-weight: 700;
}

.lp-contract__note {
  font-size: 0.8125rem;
  color: #777;
  margin-top: 2rem;
}

@media (max-width: 700px) {
  .lp-contract__cards {
    grid-template-columns: 1fr;
  }
}

/* ----------------------------------------------------------------
   LP FAQ — style.css の accordion を流用、背景のみ変更
   ---------------------------------------------------------------- */
.lp-faq {
  padding: clamp(4rem, 8vh, 6rem) clamp(1.5rem, 5vw, 4rem);
  background: #f7f7f5;
}

.lp-faq .section-header {
  margin-bottom: 2.5rem;
}

/* ----------------------------------------------------------------
   LP Related services
   ---------------------------------------------------------------- */
.lp-related {
  padding: clamp(4rem, 8vh, 6rem) clamp(1.5rem, 5vw, 4rem);
  background: #fff;
}

/* ================================================================
   lp-chapter — 章立て型提案セクション（4:3画像 + 仕切り付き）
   ================================================================ */

/* --- スクロールアニメーション基盤 --- */
/* JavaScript 有効時のみ data-reveal を初期非表示にする（JS無効時は見える） */
.js-ready [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}
.js-ready [data-reveal="left"]  { transform: translateX(-36px); }
.js-ready [data-reveal="right"] { transform: translateX(36px); }
.js-ready [data-reveal].is-visible {
  opacity: 1;
  transform: translate(0, 0);
}
[data-delay="1"] { transition-delay: 0.12s; }
[data-delay="2"] { transition-delay: 0.26s; }
[data-delay="3"] { transition-delay: 0.42s; }
[data-delay="4"] { transition-delay: 0.58s; }

/* --- チャプター本体 --- */
.lp-chapter {
  background: #fff;
}
.lp-chapter--alt {
  background: #f7f7f5;
}

/* 仕切りバー */
.lp-chapter__sep {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: clamp(2.5rem, 5vh, 4rem) clamp(1.5rem, 6vw, 6rem) 0;
}
.lp-chapter__sep-badge {
  font-size: 0.58rem;
  letter-spacing: 0.3em;
  font-weight: 700;
  color: #DC000C;
  text-transform: uppercase;
  white-space: nowrap;
}
.lp-chapter__sep-num {
  font-size: 1.625rem;
  font-weight: 800;
  color: #111;
  letter-spacing: -0.03em;
  white-space: nowrap;
  line-height: 1;
}
.lp-chapter__sep-line {
  flex: 1;
  height: 1px;
  background: #ddd;
  display: block;
}

/* 写真＋テキスト グリッド */
.lp-chapter__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(2rem, 4vh, 3.5rem) clamp(1.5rem, 6vw, 6rem) clamp(3rem, 6vh, 5rem);
}

/* 偶数（alt）は写真を右に */
.lp-chapter--alt .lp-chapter__photo-wrap {
  order: 2;
}

/* 4:3 写真エリア */
.lp-chapter__photo-wrap {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 4px;
  position: relative;
}
.lp-chapter__photo {
  position: absolute;
  inset: -10% 0;
  width: 100%;
  height: 120%;
  object-fit: cover;
  object-position: center;
  will-change: transform;
  display: block;
}

/* テキストエリア */
.lp-chapter__text {
  /* テキストブロック全体 */
}

/* 見出し */
.lp-chapter__heading {
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  font-weight: 700;
  line-height: 1.55;
  color: #111;
  margin-bottom: 1.25rem;
}

/* キャッチコピー */
.lp-chapter__catchcopy {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #DC000C;
  margin-bottom: 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid #ddd;
  line-height: 1.6;
}

/* 本文 */
.lp-chapter__body {
  font-size: 0.875rem;
  color: #555;
  line-height: 2.1;
}

/* ================================================================
   lp-inbound — インバウンド市場背景セクション
   ================================================================ */
.lp-inbound {
  background: #0f1923;
  color: #fff;
  padding: clamp(5rem, 10vh, 8rem) clamp(1.5rem, 6vw, 6rem);
  text-align: center;
}
.lp-inbound__label {
  display: inline-block;
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #DC000C;
  font-weight: 700;
  margin-bottom: 1.5rem;
}
.lp-inbound__heading {
  font-size: clamp(1.375rem, 2.5vw, 2rem);
  font-weight: 700;
  line-height: 1.55;
  margin-bottom: 1rem;
}
.lp-inbound__lead {
  font-size: clamp(0.875rem, 1.2vw, 0.9375rem);
  color: rgba(255,255,255,0.7);
  line-height: 2;
  max-width: 640px;
  margin: 0 auto 4rem;
}
.lp-inbound__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: 960px;
  margin: 0 auto;
}
.lp-inbound__card {
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 4px;
  padding: 2.5rem 1.5rem;
  background: rgba(255,255,255,0.04);
}
.lp-inbound__card-num {
  display: block;
  font-size: clamp(2.25rem, 4vw, 3.25rem);
  font-weight: 800;
  color: #DC000C;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 0.75rem;
}
.lp-inbound__card-label {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.65);
  line-height: 1.7;
}
.lp-inbound__card-desc {
  display: block;
  font-size: 0.7rem;
  color: rgba(255,255,255,0.4);
  margin-top: 0.4rem;
}

/* ================================================================
   lp-simulation — 収益シミュレーション
   ================================================================ */
.lp-simulation {
  background: #fff;
  padding: clamp(5rem, 10vh, 8rem) clamp(1.5rem, 6vw, 6rem);
}
.lp-simulation__inner {
  max-width: 900px;
  margin: 0 auto;
}
.lp-simulation__label {
  display: inline-block;
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #DC000C;
  font-weight: 700;
  margin-bottom: 1.25rem;
}
.lp-simulation__heading {
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  font-weight: 700;
  line-height: 1.55;
  color: #111;
  margin-bottom: 0.75rem;
}
.lp-simulation__note {
  font-size: 0.875rem;
  color: #666;
  margin-bottom: 2.5rem;
  line-height: 1.8;
}
.lp-simulation__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.lp-simulation__table th,
.lp-simulation__table td {
  padding: 1rem 1.25rem;
  border: 1px solid #e8e8e8;
  text-align: left;
  vertical-align: middle;
  line-height: 1.6;
}
.lp-simulation__table thead th {
  background: #f7f7f5;
  font-size: 0.8rem;
  font-weight: 700;
  color: #333;
  letter-spacing: 0.02em;
}
.lp-simulation__table thead th:last-child {
  background: #DC000C;
  color: #fff;
}
.lp-simulation__table tbody tr:nth-child(even) td {
  background: #fafafa;
}
.lp-simulation__table tbody tr:nth-child(even) td:last-child {
  background: #fff5f5;
}
.lp-simulation__table td:last-child {
  font-weight: 700;
  color: #DC000C;
}
.lp-simulation__table td:first-child {
  color: #555;
  font-size: 0.825rem;
}
.lp-simulation__caption {
  font-size: 0.72rem;
  color: #999;
  margin-top: 1rem;
  line-height: 1.7;
}

/* ================================================================
   lp-flow — 導入フロー
   ================================================================ */
.lp-flow {
  background: #f7f7f5;
  padding: clamp(5rem, 10vh, 8rem) clamp(1.5rem, 6vw, 6rem);
  text-align: center;
}
.lp-flow__label {
  display: inline-block;
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #DC000C;
  font-weight: 700;
  margin-bottom: 1.25rem;
}
.lp-flow__heading {
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  font-weight: 700;
  color: #111;
  margin-bottom: 3.5rem;
}
.lp-flow__steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
}
.lp-flow__steps::before {
  content: "";
  position: absolute;
  top: 28px;
  left: calc(10% + 1rem);
  right: calc(10% + 1rem);
  height: 1px;
  background: #DC000C;
  opacity: 0.25;
}
.lp-flow__step {
  padding: 0 0.75rem;
  position: relative;
}
.lp-flow__step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #DC000C;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  margin: 0 auto 1.25rem;
  position: relative;
  z-index: 1;
}
.lp-flow__step-title {
  font-size: 0.875rem;
  font-weight: 700;
  color: #111;
  margin-bottom: 0.5rem;
  line-height: 1.4;
}
.lp-flow__step-desc {
  font-size: 0.75rem;
  color: #777;
  line-height: 1.7;
}

/* ================================================================
   Responsive — スマートフォン
   ================================================================ */
@media (max-width: 767px) {
  .lp-hero__content {
    padding: 0 1.5rem 3.5rem;
  }

  .lp-hero__scroll {
    right: 1.5rem;
  }

  .lp-split {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .lp-split--flip {
    grid-template-columns: 1fr;
  }

  .lp-split--flip .lp-split__image {
    order: 0;
  }

  .lp-split--flip .lp-split__text {
    order: 0;
  }

  .lp-split__image {
    min-height: 56vw;
  }

  .lp-feature__panel {
    width: 100%;
    margin: 0;
    position: relative;
    backdrop-filter: none;
  }

  .lp-feature {
    flex-direction: column;
    min-height: auto;
  }

  .lp-feature__bg {
    position: relative;
    inset: auto;
    width: 100%;
    height: 50vw;
    min-height: 200px;
    object-fit: cover;
  }

  .lp-feature__bg-overlay {
    display: none;
  }

  .lp-feature__panel {
    background: #121212;
  }

  .lp-metric-bar__inner {
    flex-direction: column;
    gap: 1.75rem;
  }

  .lp-metric-bar__item {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding-bottom: 1.75rem;
  }

  .lp-metric-bar__item:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }

  .lp-strength__metrics {
    flex-direction: column;
    gap: 2rem;
  }

  .lp-strength__metric {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 2rem;
  }

  .lp-strength__metric:last-child {
    border-bottom: none;
  }

  .lp-float-cta {
    bottom: 1rem;
    right: 1rem;
  }

  /* lp-inbound */
  .lp-inbound__cards { grid-template-columns: 1fr; gap: 1rem; }

  /* lp-simulation */
  .lp-simulation__table { font-size: 0.8rem; }
  .lp-simulation__table th,
  .lp-simulation__table td { padding: 0.75rem 0.75rem; }

  /* lp-flow */
  .lp-flow__steps {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .lp-flow__steps::before { display: none; }

  /* lp-chapter レスポンシブ */
  .lp-chapter__inner {
    grid-template-columns: 1fr;
  }
  .lp-chapter--alt .lp-chapter__photo-wrap {
    order: 0;
  }
  .lp-chapter__sep {
    padding-bottom: 0;
  }
}

/* === components/_customize-20260422.css === */
/* ==========================================================================
   _customize-20260422.css — 2026-04-22 修正指示反映（Phase 6後半）
   指示書: docs/date/指示書/修正指示_20260422.txt
   ========================================================================== */

/* --- TOP: hero copy を白文字化（既存の hero overlay 越し） --- */
.hero__copy {
  color: #ffffff;
}

/* --- TOP: CTA ボタンを 20px 下げる --- */
.hero__cta-group {
  margin-top: calc(var(--spacing-lg, 24px) + 20px);
}

/* --- TOP: mission 画像の SP 時横長レイアウト（16:4） --- */
@media (max-width: 767px) {
  .mission__visual {
    aspect-ratio: 16 / 4;
    height: auto;
  }
}

/* --- サービスTOP: 4カード高さ統一 & 4件横並び --- */
.service-card--uniform {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.service-card--uniform .service-card__image-wrap,
.service-card--uniform .service-card__image {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #f3f3f3;
}

.service-card--uniform .service-card__image-wrap img,
.service-card--uniform .service-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.service-card--uniform .service-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 12px;
}

.service-card--uniform .service-card__link {
  margin-top: auto;
}

/* サービスTOP: service-grid-section が単独設置の場合の上下余白調整
   20260528 ID37-再再修正 v4: 密着しすぎて窮屈だったため breadcrumb と少し離す。
   外側 padding-top:10px、内側 .section padding-top:0、grid margin-top:0 で 10px だけ空ける。 */
.service-grid-section--standalone {
  padding-top: 10px !important;
}
.service-grid-section--standalone .section {
  padding-top: 0 !important;
}
.service-grid-section--standalone .service-card-grid {
  margin-top: 0 !important;
}

@media (max-width: 767px) {
  .service-grid-section--standalone {
    padding-top: 10px !important;
  }
}

/* --- 関連サービス: グリッド設定は _related-services.css に集約（20260508変更） ---
   従来の repeat(4, 1fr) 固定は廃止。auto-fit ベースで2〜3カードを中央寄せ表示する仕様へ。
   ただしカード見た目（高さ揃え／アスペクト比固定／flex body）はここで継続維持。 */
.related-services .service-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.related-services .service-card__image {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #f3f3f3;
}

.related-services .service-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.related-services .service-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 8px;
}

.related-services .service-card__link {
  margin-top: auto;
}

/* --- フッター: 指定リンクを太字に --- */
.footer__nav-link--bold {
  font-weight: 700;
}

/* 空になるグループシナジーリストを非表示 */
.group-section__synergy-list:empty {
  display: none;
}

/* ==========================================================================
   TOP v2 (index_v2.html) — HERO動画 16:9 フル幅 + ヘッダー追従
   ========================================================================== */

/* v2 ページではヘッダーを最初は非表示、スクロール後にフェードイン
   （body.lp-page と同じ振る舞いだが、TOP v2 専用クラスでも動くように） */
.top-v2 {
  padding-top: 0 !important;
}
.top-v2 .header {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-100%);
  transition: opacity 0.45s ease, transform 0.45s ease, visibility 0s linear 0.45s;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
}
/* 20260515: 動画上にblurが残らないよう、backdrop-filterは表示状態でだけ適用 */
.top-v2 .header.header--visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.45s ease, transform 0.45s ease, visibility 0s;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.top-v2 .breadcrumb {
  display: none;
}

/* 20260626: モバイルのハンバーガーメニュー潰れ対策。
   TOP(v2)のヘッダーは transform / backdrop-filter を持つため、その内側にある
   position:fixed のドロワー(.header__nav.is-open)の「包含ブロック」がビューポートではなく
   ヘッダー(高さ60px)になり、メニューが約60pxに潰れて押せなくなる。
   メニュー展開中(body.nav-open)だけ、包含ブロック化する指定を解除してフルスクリーンに戻す。 */
body.nav-open .header {
  transform: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* HERO: 動画の縦を必ず全部見せる。横は最大100%、左右に黒帯OK */
.hero--video-full {
  position: relative;
  width: 100%;
  height: auto;
  min-height: 0;
  max-height: 100vh;
  background-color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
}
.hero--video-full:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -4px;
}

.hero__video-wrap--full {
  position: relative;
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero__video-wrap--full video {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: 100vh;
  object-fit: contain;
  object-position: center center;
  margin: 0 auto;
}

/* ==========================================================================
   service-hero スライドショー（facility-management 用）
   ========================================================================== */
.service-hero--slides .service-hero__slides {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}
.service-hero--slides .service-hero__slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
}
.service-hero--slides .service-hero__slide.is-active {
  opacity: 1;
}

/* service-hero--image 用の<img>表示 */
.service-hero--image .service-hero__image-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}
/* 20260626: ビルド後処理で <img> が <picture> に包まれると、picture に高さが無いため
   img の height:100% が効かず画像が縦フル表示→上端だけ見える（頭しか映らない）不具合に。
   picture をブロック化して wrap いっぱいに広げ、object-fit:cover / object-position を有効化する。 */
.service-hero--image .service-hero__image-wrap picture {
  display: block;
  width: 100%;
  height: 100%;
}
.service-hero--image .service-hero__image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* Scroll ↓ インジケーター（v2 専用、白文字+矢印）
   20260515: テロップとの被りを避けるため右上に移動
   20260515b: くもりガラス効果を削除し、白文字+影だけに */
.hero__scroll--v2 {
  position: absolute;
  top: 24px;
  right: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: #fff;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-decoration: none;
  z-index: 5;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6), 0 0 4px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  opacity: 0.95;
  transition: opacity 0.2s ease; /* 20260528 ID33-再再修正: transformトランジションは削除（hover解除時の戻りで揺れて見える原因） */
}
.hero__scroll--v2:hover {
  opacity: 1;
  /* 20260528 ID33: transform指定そのものを置かない（戻り遷移発生を完全排除） */
}
/* 20260528 ID33-再再修正: `.hero__scroll` 親クラスを継承して ::after の縦線が伸び縮みアニメする問題を完全停止 */
.hero__scroll--v2::after {
  animation: none !important;
  display: none; /* v2 では縦線を出さず Scroll+↓ のみ表示 */
}
.hero__scroll--v2 .hero__scroll-label {
  font-weight: 600;
}
.hero__scroll--v2 .hero__scroll-arrow {
  font-size: 1.25rem;
  line-height: 1;
  /* 20260527 ID30 + 20260528 ID33-再再修正: 揺れアニメ完全停止（最初の位置から動かない） */
  animation: none !important;
  transform: none !important;
  opacity: 0.85;
}

/* ==========================================================================
   20260626: TOP HERO 画像スライドショー（動画を一時的に画像ローテへ戻す）
   ========================================================================== */
.hero--slideshow {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 520px;
  max-height: 920px;
  background-color: #000;
}
.hero--slideshow .hero__slides {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}
.hero--slideshow .hero__slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  opacity: 0;
  transition: opacity 1.4s ease-in-out;
}
.hero--slideshow .hero__slide.is-active {
  opacity: 1;
}
/* テキスト可読性のためのオーバーレイ（上下を少し濃く） */
.hero--slideshow .hero__overlay {
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.45) 0%,
    rgba(0, 0, 0, 0.30) 40%,
    rgba(0, 0, 0, 0.50) 100%
  );
}
.hero--slideshow .hero__content {
  z-index: 2;
  max-width: 880px;
}
/* HERO リード文（旧ミッション本文をHEROに統合） */
.hero__lead {
  margin: var(--spacing-lg) auto 0;
  max-width: 760px;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-white);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}
@media (min-width: 768px) {
  .hero__lead {
    font-size: var(--font-size-base);
  }
}
/* HERO CTAボタン群（リード文の下に配置） */
.hero--slideshow .hero__cta-group {
  margin-top: var(--spacing-xl);
}

/* HERO Scroll↓ インジケーター（スライドショー専用・小さくクリーンに配置）
   ※旧 .hero__scroll--v2 は left/right/top/bottom が競合してリンクが巨大化し、
     画像全体がクリック領域化＋赤いフォーカス枠が出る不具合があったため独自クラスに刷新 */
.hero--slideshow .hero__scroll-down {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: #fff;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-decoration: none;
  z-index: 5;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6), 0 0 4px rgba(0, 0, 0, 0.4);
  opacity: 0.92;
  transition: opacity 0.2s ease;
}
.hero--slideshow .hero__scroll-down:hover {
  opacity: 1;
}
.hero--slideshow .hero__scroll-down:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}
.hero--slideshow .hero__scroll-down-label {
  font-weight: 600;
}
.hero--slideshow .hero__scroll-down-arrow {
  font-size: 1.25rem;
  line-height: 1;
  opacity: 0.85;
}

/* AI生成注記: 少しだけ大きく（10/11px → 12/13px） */
.hero__ai-notice {
  font-size: 12px;
}
@media (min-width: 768px) {
  .hero__ai-notice {
    font-size: 13px;
  }
}

/* Commune Plaza ロゴ（teaserカード見出しをテキスト→ロゴ画像に） */
.teaser-card__title--logo {
  margin-bottom: var(--spacing-md);
  text-align: left;
}
.teaser-card__logo {
  display: block;
  width: auto;
  max-width: 240px;
  height: auto;
}

/* PC専用の改行（スマホでは自然折り返しに任せて不自然な改行を防ぐ） */
@media (max-width: 767px) {
  .u-br-pc {
    display: none;
  }
}


/* === Pages === */
/* === pages/_top.css === */
/* ==========================================================================
   _top.css — C6: ミッションセクション等のTOPページ固有スタイル
   プロジェクト: SCP 新WEBサイト
   作成: D5.ui-designer
   BEM: .mission / .mission__visual / .mission__text / ...
   ========================================================================== */

/* =====================================================================
   Mission Section (C6)
   ===================================================================== */

/* --- Block --- */
.mission {
  padding: var(--spacing-section-sp) var(--container-padding);
  max-width: var(--container-wide-max-width);
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-xl);
}

@media (min-width: 768px) {
  .mission {
    flex-direction: row;
    gap: var(--spacing-3xl);
    padding-left: var(--container-padding-tablet);
    padding-right: var(--container-padding-tablet);
  }
}

@media (min-width: 1280px) {
  .mission {
    padding: var(--spacing-4xl) var(--container-padding-pc);
    gap: var(--spacing-section);
  }
}

/* --- Visual --- */
.mission__visual {
  width: 100%;
  height: 220px;
  border-radius: var(--radius-md);
  overflow: hidden;
}

@media (min-width: 768px) {
  .mission__visual {
    flex: 0 0 400px;
    height: 300px;
  }
}

.mission__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Text area --- */
.mission__text {
  flex: 1;
}

/* --- English label --- */
.mission__label {
  font-family: var(--font-family-base);
  font-size: var(--font-size-xs);
  color: var(--color-primary);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-wider);
  margin-bottom: var(--spacing-md);
  text-transform: uppercase;
}

@media (min-width: 768px) {
  .mission__label {
    font-size: var(--font-size-sm);
  }
}

/* --- Heading --- */
.mission__heading {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-base);
  margin-bottom: var(--spacing-lg);
  color: var(--color-secondary);
}

@media (min-width: 768px) {
  .mission__heading {
    font-size: var(--font-size-2xl);
  }
}

@media (min-width: 1280px) {
  .mission__heading {
    font-size: var(--font-size-3xl);
  }
}

/* --- Body text --- */
.mission__body {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-loose);
}

@media (min-width: 768px) {
  .mission__body {
    font-size: var(--font-size-base);
  }
}

/* --- Centered modifier (T011: 画像なし・テキスト中央寄せ) --- */
.mission--centered {
  flex-direction: column;
  text-align: center;
}

@media (min-width: 768px) {
  .mission--centered {
    flex-direction: column;
  }
}

.mission--centered .mission__text {
  flex: 0 1 auto;
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}

/* =====================================================================
   Cases Background wrapper (for alternating section bg)
   ===================================================================== */
.cases-bg {
  background-color: var(--color-bg-secondary);
}

/* =====================================================================
   News Block (T015/T016)
   BlueMonkey DCMSブロック ###_DCMS_BLOCK_BLOG_TAG_SCP_5_### の出力を整形。
   shidax.co.jp/column/foods の右側エリアと同様、日付＋タイトルのリスト表示。
   DCMSブロックが吐く ul/li/a/img/span 構造に汎用セレクタで効かせる。
   ===================================================================== */
.section--news {
  padding-bottom: var(--spacing-xl);
}

.news-block {
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}

/* DCMSブロックが返すリスト */
.news-block ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.news-block li {
  border-bottom: 1px solid var(--color-border);
}

.news-block li:first-child {
  border-top: 1px solid var(--color-border);
}

.news-block a {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  padding: var(--spacing-md) var(--spacing-sm);
  color: var(--color-text-primary);
  text-decoration: none;
  transition: color var(--transition-base), background-color var(--transition-base);
}

@media (min-width: 768px) {
  .news-block a {
    flex-direction: row;
    align-items: baseline;
    gap: var(--spacing-lg);
    padding: var(--spacing-md);
  }
}

.news-block a:hover {
  color: var(--color-primary);
  background-color: var(--color-bg-secondary);
}

/* DCMSブロック内に画像が含まれる場合の保険（TOP用は画像なし運用想定） */
.news-block img {
  width: 80px;
  height: 60px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

/* 日付（DCMSブロック側で .date / time / 最初の span のいずれかで出力される想定） */
.news-block time,
.news-block .date,
.news-block .blog_date,
.news-block .entry-date {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-normal);
  flex-shrink: 0;
  min-width: 6em;
  letter-spacing: var(--letter-spacing-wide);
}

/* タイトル（spanが2つある場合は2番目、1つの場合はそれがタイトル） */
.news-block span {
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
}

/* news-fallback.js が JS で差し込む「お知らせは準備中です」プレースホルダー */
.news-block__placeholder {
  text-align: center;
  padding: var(--spacing-xl) 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  margin: 0;
}

/* DCMSブロック生タグの一時露出を防ぐ：
   初期は visibility:hidden、JSが is-ready クラスを付けたら表示。
   BlueMonkey展開済み環境でも JS が即 is-ready を付けるので問題なし。 */
.news-block {
  visibility: hidden;
  min-height: 4em;
}

.news-block.is-ready {
  visibility: visible;
}

/* === pages/_case-list.css === */
/* ==========================================================================
   _case-list.css — 事例一覧ページ固有スタイル
   プロジェクト: SCP 新WEBサイト
   作成: D13.frontend-coder
   BEM: .case-grid / .case-grid__inner / .case-grid__list /
        .case-grid__empty / .case-grid__pagination
   ========================================================================== */

/* --- Case Grid Section --- */
.case-grid {
  background-color: var(--color-bg-secondary);
  padding: var(--spacing-section-sp) 0;
}

/* --- Inner container --- */
.case-grid__inner {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

/* --- Card list grid --- */
.case-grid__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-xl);
}

/* --- Empty state --- */
.case-grid__empty {
  text-align: center;
  padding: var(--spacing-4xl) var(--spacing-xl);
}

.case-grid__empty[hidden] {
  display: none;
}

.case-grid__empty-icon {
  color: var(--color-text-light);
  margin-bottom: var(--spacing-lg);
}

.case-grid__empty-message {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-xl);
  line-height: var(--line-height-base);
}

.case-grid__empty-action {
  display: inline-block;
  padding: var(--spacing-sm) var(--spacing-xl);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-full);
  background-color: transparent;
  color: var(--color-primary);
  font-size: var(--font-size-sm);
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: background-color var(--transition-fast),
              color var(--transition-fast);
  min-height: 44px;
}

.case-grid__empty-action:hover {
  background-color: var(--color-primary);
  color: var(--color-text-white);
}

.case-grid__empty-action:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* --- Card fade for filter --- */
.case-grid__list .case-card-link {
  transition: opacity var(--transition-base);
}

.case-grid__list .case-card-link.is-hidden {
  display: none;
}

/* --- Tablet --- */
@media (min-width: 768px) {
  .case-grid {
    padding: var(--spacing-section) 0;
  }

  .case-grid__inner {
    padding: 0 var(--container-padding-tablet);
  }

  .case-grid__list {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- PC --- */
@media (min-width: 1280px) {
  .case-grid__inner {
    padding: 0 var(--container-padding-pc);
  }

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

/* --- reduced-motion --- */
@media (prefers-reduced-motion: reduce) {
  .case-grid__list .case-card-link {
    transition: none;
  }
}

/* === pages/_case-detail.css === */
/* ==========================================================================
   _case-detail.css — 事例詳細ページ固有スタイル
   プロジェクト: SCP 新WEBサイト
   作成: D13.frontend-coder
   ========================================================================== */

/* --- Page-level overrides for case detail --- */

/* Solution section has gray background, so solution-step cards are white */
.case-section--gray .solution-step {
  background-color: var(--color-bg-primary);
}

/* Results section on white background, so number cards need subtle contrast */
.case-section:not(.case-section--gray) .result-number-card {
  border: 1px solid var(--color-border-light);
}

/* === pages/_service-top.css === */
/* ==========================================================================
   _service-top.css — サービスTOPページ固有スタイル
   ========================================================================== */

/* Page Hero (service-top variant) */
.page-hero--service-top {
  background-color: var(--color-bg-primary);
  padding: var(--spacing-section-sp) var(--container-padding);
  text-align: center;
}

.page-hero--service-top .page-hero__inner {
  max-width: var(--container-max-width);
  margin: 0 auto;
}

.page-hero--service-top .page-hero__label-en {
  font-size: var(--font-size-sm);
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wider);
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--spacing-md);
}

.page-hero--service-top .page-hero__title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  line-height: var(--line-height-tight);
  margin-bottom: var(--spacing-lg);
}

.page-hero--service-top .page-hero__lead {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  line-height: var(--line-height-base);
  max-width: 800px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .page-hero--service-top {
    padding: var(--spacing-section) var(--container-padding-tablet);
  }

  .page-hero--service-top .page-hero__title {
    font-size: var(--font-size-3xl);
  }
}

@media (min-width: 1280px) {
  .page-hero--service-top {
    padding: var(--spacing-section) var(--container-padding-pc);
  }

  .page-hero--service-top .page-hero__title {
    font-size: var(--font-size-4xl);
  }
}

/* Service Overview Section */
.service-overview {
  background-color: var(--color-bg-secondary);
  padding: var(--spacing-section-sp) var(--container-padding);
}

.service-overview .section {
  max-width: var(--container-max-width);
  margin: 0 auto;
}

.service-overview__body {
  margin-top: var(--spacing-xl);
}

.service-overview__text {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  line-height: var(--line-height-base);
  max-width: 800px;
  margin: 0 auto var(--spacing-2xl);
  text-align: center;
}

.service-overview__category-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-lg);
  max-width: 700px;
  margin: 0 auto;
}

.service-overview__category {
  background-color: var(--color-bg-primary);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  box-shadow: var(--shadow-sm);
}

.service-overview__category-label {
  display: inline-block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-white);
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: var(--radius-sm);
  margin-bottom: var(--spacing-md);
}

.service-overview__category-label--active {
  background-color: var(--color-primary);
}

.service-overview__category-label--future {
  background-color: var(--color-secondary);
}

.service-overview__category-items {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-sm);
}

.service-overview__category-items li {
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  padding: var(--spacing-xs) 0;
  padding-left: var(--spacing-md);
  position: relative;
}

.service-overview__category-items li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  background-color: var(--color-primary);
  border-radius: var(--radius-full);
}

@media (min-width: 768px) {
  .service-overview {
    padding: var(--spacing-section) var(--container-padding-tablet);
  }

  .service-overview__category-list {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1280px) {
  .service-overview {
    padding: var(--spacing-section) var(--container-padding-pc);
  }
}

/* Service Card Grid Section */
.service-grid-section {
  background-color: var(--color-bg-primary);
  padding: var(--spacing-section-sp) var(--container-padding);
}

.service-grid-section .section {
  max-width: var(--container-max-width);
  margin: 0 auto;
}

.service-card-grid--detailed {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-xl);
  margin-top: var(--spacing-xl);
}

/* 20260513: タブレット以上は3列固定で横並び1行表示 */
@media (min-width: 768px) {
  .service-card-grid--detailed {
    grid-template-columns: repeat(3, 1fr);
  }
}

.service-card--detailed {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background-color: var(--color-bg-primary);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.service-card--detailed:hover,
.service-card--detailed:focus-within {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-4px);
}

/* 20260513: カード画像の高さを統一（aspect-ratioで揃える） */
.service-card--detailed .service-card__image-wrap {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
}

.service-card--detailed .service-card__image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.service-card__image-label {
  position: absolute;
  top: var(--spacing-sm);
  left: var(--spacing-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-white);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
}

.service-card__image-label--active {
  background-color: var(--color-primary);
}

.service-card__image-label--future {
  background-color: var(--color-secondary);
}

.service-card--detailed .service-card__body {
  padding: var(--spacing-lg);
}

.service-card--detailed .service-card__title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-sm);
}

.service-card--detailed .service-card__description {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-base);
  margin-bottom: var(--spacing-md);
}

.service-card__metrics {
  margin-bottom: var(--spacing-md);
}

.service-card__metric-list {
  display: flex;
  gap: var(--spacing-lg);
  flex-wrap: wrap;
}

.service-card__metric-item {
  display: flex;
  flex-direction: column;
}

.service-card__metric-item dt {
  font-size: var(--font-size-xs);
  color: var(--color-text-light);
}

.service-card__metric-item dd {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
}

.service-card--detailed .service-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.service-card--detailed .service-card__link:hover {
  color: var(--color-primary-dark);
}

.service-card--detailed .service-card__link::after {
  content: "\2192";
}

@media (min-width: 768px) {
  .service-grid-section {
    padding: var(--spacing-section) var(--container-padding-tablet);
  }

  /* 20260513: タブレット以上は3列固定で横並び1行表示 */
  .service-card-grid--detailed {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1280px) {
  .service-grid-section {
    padding: var(--spacing-section) var(--container-padding-pc);
  }
}

@media (prefers-reduced-motion: reduce) {
  .service-card--detailed:hover,
  .service-card--detailed:focus-within {
    transform: none;
  }
}

/* Strength Section */
.strength-section {
  background-color: var(--color-bg-secondary);
  padding: var(--spacing-section-sp) var(--container-padding);
}

.strength-section .section {
  max-width: var(--container-max-width);
  margin: 0 auto;
}

.strength-section__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-xl);
  margin-top: var(--spacing-xl);
}

@media (min-width: 768px) {
  .strength-section {
    padding: var(--spacing-section) var(--container-padding-tablet);
  }

  .strength-section__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1280px) {
  .strength-section {
    padding: var(--spacing-section) var(--container-padding-pc);
  }

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

/* 3カラムグリッド（サービスTOP 3大分類用） */
@media (min-width: 1280px) {
  .service-card-grid--3col.service-card-grid--detailed {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 子サービスカードグリッド（施設運営/エンタメ 親ページ用） */
.service-children {
  padding: var(--spacing-section-sp) var(--container-padding);
}

.service-children .section {
  max-width: var(--container-max-width);
  margin: 0 auto;
}

.service-children__lead {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  line-height: var(--line-height-base);
  max-width: 700px;
  margin: var(--spacing-xl) auto var(--spacing-2xl);
  text-align: center;
}

.service-card-grid--children {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-lg);
  margin-top: var(--spacing-xl);
}

@media (min-width: 768px) {
  .service-children {
    padding: var(--spacing-section) var(--container-padding-tablet);
  }

  .service-card-grid--children {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1280px) {
  .service-children {
    padding: var(--spacing-section) var(--container-padding-pc);
  }

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

/* === pages/_service-detail.css === */
/* ==========================================================================
   _service-detail.css — サービス詳細ページ固有スタイル
   ========================================================================== */

/* Page-level adjustments for service detail pages */

/* === pages/_contact.css === */
/* ==========================================================================
   _contact.css — お問い合わせページ固有スタイル
   プロジェクト: SCP 新WEBサイト
   作成: D13.frontend-coder
   BEM: .page-hero--contact
   ========================================================================== */

/* --- Page Hero (contact variant) --- */
.page-hero--contact {
  background-color: var(--color-bg-secondary);
}

.page-hero--contact .page-hero__inner {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: var(--spacing-2xl) var(--container-padding);
  text-align: center;
}

.page-hero--contact .page-hero__label-en {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wider);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--spacing-sm);
}

.page-hero--contact .page-hero__title {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  letter-spacing: var(--letter-spacing-base);
  line-height: var(--line-height-tight);
  margin-bottom: var(--spacing-md);
}

.page-hero--contact .page-hero__lead {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  line-height: var(--line-height-base);
  max-width: 640px;
  margin: 0 auto;
}

/* --- Tablet --- */
@media (min-width: 768px) {
  .page-hero--contact .page-hero__inner {
    padding: var(--spacing-3xl) var(--container-padding-tablet);
  }

  .page-hero--contact .page-hero__title {
    font-size: var(--font-size-3xl);
  }
}

/* --- PC --- */
@media (min-width: 1280px) {
  .page-hero--contact .page-hero__inner {
    padding: var(--spacing-3xl) var(--container-padding-pc);
  }

  .page-hero--contact .page-hero__title {
    font-size: var(--font-size-4xl);
  }
}


/* === Utilities === */
/* === utilities/_animations.css === */
/* ==========================================================================
   _animations.css — スクロールアニメーション基盤
   プロジェクト: SCP 新WEBサイト
   作成: D5.ui-designer

   Intersection Observer で .is-visible を付与する前提。
   Phase 2 以降で拡充予定。
   ========================================================================== */

/* --- Base: 非表示状態（アニメーション対象要素） --- */
[data-animate] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}

/* --- Visible state (JS で付与) --- */
[data-animate].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- Fade in (default) --- */
[data-animate="fade-in"] {
  opacity: 0;
  transform: none;
}

[data-animate="fade-in"].is-visible {
  opacity: 1;
}

/* --- Slide up --- */
[data-animate="slide-up"] {
  opacity: 0;
  transform: translateY(30px);
}

[data-animate="slide-up"].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- Slide left --- */
[data-animate="slide-left"] {
  opacity: 0;
  transform: translateX(-30px);
}

[data-animate="slide-left"].is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* --- Slide right --- */
[data-animate="slide-right"] {
  opacity: 0;
  transform: translateX(30px);
}

[data-animate="slide-right"].is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* --- Stagger delay (children) --- */
[data-animate-stagger] > *:nth-child(1) { transition-delay: 0ms; }
[data-animate-stagger] > *:nth-child(2) { transition-delay: 100ms; }
[data-animate-stagger] > *:nth-child(3) { transition-delay: 200ms; }
[data-animate-stagger] > *:nth-child(4) { transition-delay: 300ms; }
[data-animate-stagger] > *:nth-child(5) { transition-delay: 400ms; }
[data-animate-stagger] > *:nth-child(6) { transition-delay: 500ms; }

/* --- Reduced motion: disable all animations --- */
@media (prefers-reduced-motion: reduce) {
  [data-animate],
  [data-animate].is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* === utilities/_a11y.css === */
/* ==========================================================================
   _a11y.css — アクセシビリティユーティリティ
   プロジェクト: SCP 新WEBサイト
   作成: D5.ui-designer
   ========================================================================== */

/* --- Screen reader only (visually hidden) --- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- SR only but focusable (skip link) --- */
.sr-only--focusable:focus,
.sr-only--focusable:active {
  position: static;
  width: auto;
  height: auto;
  padding: var(--spacing-sm) var(--spacing-md);
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  background-color: var(--color-bg-primary);
  color: var(--color-primary);
  font-weight: var(--font-weight-bold);
  z-index: 9999;
}

/* --- Focus visible --- */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* --- Skip to main content link --- */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--spacing-md);
  z-index: 9999;
  padding: var(--spacing-sm) var(--spacing-md);
  background-color: var(--color-primary);
  color: var(--color-text-white);
  font-weight: var(--font-weight-bold);
  border-radius: var(--radius-sm);
  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: var(--spacing-sm);
}

/* === utilities/_skip-link.css === */
/* ==========================================================================
   _skip-link.css — スキップリンク（アクセシビリティ）
   プロジェクト: SCP 新WEBサイト
   作成: D13.frontend-coder

   注: 基本スタイルは _a11y.css に定義済み。
   このファイルはスキップリンク固有の拡張用。
   ========================================================================== */

/* スキップリンクのフォーカス時アニメーション */
.skip-link:focus {
  position: fixed;
  top: var(--spacing-sm);
  left: var(--spacing-md);
  z-index: 10000;
  display: inline-block;
  padding: var(--spacing-sm) var(--spacing-lg);
  background-color: var(--color-primary);
  color: var(--color-text-white);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
}

@media (prefers-reduced-motion: reduce) {
  .skip-link {
    transition: none;
  }
}