/* ============================================================
   LUMA — Shared Stylesheet
   Source of truth: STYLE_GUIDE.md
   このファイルは index.html を含む全ページで共通利用するベース。
   ページ固有スタイルは各HTMLの <style> ブロックで上書きする。
   ============================================================ */


/* ============================================================
   Line icons (inline SVG)
   アイコン形状は Lucide (https://lucide.dev) を使用。
   ISC License. Copyright (c) for portions of Lucide are held by
   Cole Bemis 2013-2022 as part of Feather (MIT). All other copyright (c)
   for Lucide are held by Lucide Contributors 2022.
   Permission to use, copy, modify, and/or distribute this software for any
   purpose with or without fee is hereby granted, provided that the above
   copyright notice and this permission notice appear in all copies.
   ============================================================ */
.i {
  width: 1em; height: 1em; display: inline-block; vertical-align: -0.14em;
  flex: none; overflow: visible;
}
/* Navy 面 + 白抜きの箱では親の色をそのまま継承する */
.svc-icon .i { width: 24px; height: 24px; vertical-align: 0; }
/* 単色の箱・カード内アイコンは Navy */
.cmp-emoji .i, .rule-icon .i, .payment-icon .i, .type-icon .i, .prize-medal .i,
.community-card-icon .i, .value-icon .i, .hv-card .ico .i,
.quick-info-card .ico .i, .feature-card .ico .i { color: var(--navy); }
/* ブロック表示の箱では baseline の余白を出さない */
.cmp-emoji .i, .payment-icon .i, .type-icon .i, .prize-medal .i,
.community-card-icon .i, .value-icon .i, .quick-info-card .ico .i,
.feature-card .ico .i, .pmed .i, .tmed .i { vertical-align: middle; }

:root {
  /* Light tokens (LUMA Soft Aqua — CLAUDE.md 4-1) */
  --bg: #EBF5FA;           /* Base 背景 */
  --bg-soft: #F8FBFC;      /* Ice White */
  --bg-muted: #D6EBF7;     /* Primary Light */
  --surface: #FFFFFF;      /* カード背景 */
  --border: #D7E5ED;       /* Border Light */
  --border-strong: #B8CED9;/* Border */
  --text: #2C3E50;         /* 本文テキスト */
  --text-muted: #566575;   /* 補足(AA確保) */
  --text-soft: #5C6B7A;    /* テキストライト(AA) */
  --accent: #1E88E5;       /* Primary Blue */
  --accent-soft: #D6EBF7;  /* Primary Light */
  --accent-2: #F59E0B;     /* CTA Orange */
  --navy: #134E6F;         /* H1 / Navy */
  --sky: #5BA9D7;          /* H3 / Sky Blue */
  --cta-hover: #D97706;    /* CTA Hover */
  /* Navy 面で AA(4.5:1)を満たす CTA Orange の明色版。濃色セクション専用 */
  --accent-2-light: #FBBF24;
  --success: #047857;
  --radius: 12px;
  --radius-lg: 18px;         /* カード角丸: 全ページ 18px に統一 (2026-08-06) */
  /* 影は Navy 系に統一 (黒の影はブランド外) */
  --shadow-sm: 0 1px 2px rgba(19,78,111,0.05), 0 1px 3px rgba(19,78,111,0.06);
  --shadow-md: 0 4px 12px rgba(19,78,111,0.07), 0 2px 4px rgba(19,78,111,0.05);
  --shadow-lg: 0 24px 48px -12px rgba(19,78,111,0.22);
  --font-sans: 'Poppins', 'Noto Sans JP', -apple-system, system-ui, sans-serif;
  /* ラベル用書体は Poppins に一本化 (2026-08-06)。日本語は Noto Sans JP のまま。
     変数名は既存の参照互換のため --font-mono を維持している。 */
  --font-mono: 'Poppins', 'Noto Sans JP', -apple-system, system-ui, sans-serif;
  --font-label: 'Poppins', 'Noto Sans JP', -apple-system, system-ui, sans-serif;
  /* HERO 暗幕 (Navy)。全ページ共通の被覆値 (案4 の配分に統一) */
  --scrim-1: rgba(10, 42, 62, 0.90);
  --scrim-2: rgba(10, 42, 62, 0.72);
  --scrim-3: rgba(10, 42, 62, 0.34);
  --scrim-4: rgba(10, 42, 62, 0.06);
  --scrim-text-shadow: 0 2px 20px rgba(10, 42, 62, 0.55), 0 1px 3px rgba(10, 42, 62, 0.45);
  --container: 1200px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; }
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
  line-height: 1.7;   /* 案4 の行間 */
  letter-spacing: normal;
  -webkit-font-smoothing: antialiased;
  transition: background 0.3s, color 0.3s;
  /* モバイルでサブピクセルのはみ出しが横スクロール(=画面の左右揺れ)を
     起こすのを全ページ共通で防止する。揺れの主要因への対策。
     2026-08-06: hidden → clip に変更。hidden は body をスクロールコンテナに
     変えてしまい、position:sticky のナビが固定されず流れていた(既存不具合)。
     clip は同じくはみ出しを切り落としつつスクロールコンテナを作らない。 */
  overflow-x: clip;
  width: 100%;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* スキップリンク: キーボードでフォーカスすると出現し、メインへジャンプ */
.skip-link { position: absolute; left: 8px; top: -60px; z-index: 200; background: var(--navy); color: #fff; padding: 10px 18px; border-radius: 8px; font-size: 14px; font-weight: 500; transition: top .2s; }
.skip-link:focus { top: 8px; outline: 3px solid var(--accent-2); outline-offset: 2px; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.eyebrow {
  font-family: var(--font-label); font-size: clamp(12px, 1vw, 14px); font-weight: 600;
  color: var(--accent); text-transform: uppercase; letter-spacing: 0.10em;
  display: inline-flex; align-items: center; gap: 8px;
}
.eyebrow::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}
h1, h2, h3, h4 {
  font-weight: 700; letter-spacing: -0.02em; line-height: 1.15;
  color: var(--text); text-wrap: pretty;
}
/* 見出し色ルール (2026-08-06 統一): h1・h2 = Navy / h3・h4 = テキスト色 */
h1, h2 { color: var(--navy); }
h1 { font-size: clamp(36px, 5.5vw, 64px); letter-spacing: -0.03em; }
h2 { font-size: clamp(26px, 3.4vw, 42px); }
h3 { font-size: clamp(20px, 2vw, 26px); }

/* ── NAV ─────────────────────────────── */
/* 2026-08-06 Sho指示: ヘッダーは常時固定・背景色も固定(スクロールで色を変えない)。
   配色は design-lab の案4 (Photo Immersive) に統一 = 白 86% + ぼかし + 細い境界線。
   nav.js が付与する .is-scrolled は影の有無だけに使う(色は変えない)。 */
nav.site-nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, #FFFFFF 86%, transparent);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--border);
  transition: box-shadow .25s ease;
}
nav.site-nav.is-scrolled { box-shadow: 0 10px 28px -22px rgba(19, 78, 111, 0.65); }
.nav-inner {
  max-width: var(--container); margin: 0 auto; padding: 14px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.brand {
  font-weight: 800; font-size: 18px; letter-spacing: -0.02em;
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--navy);
}
/* ロゴマーク (2026-08-06 案4対応):
   before = Blue→Orange グラデの角丸四角 26px/r7
   after  = Blue→Navy グラデ 28px/r8 + 右下に Orange の差し色ドット */
.brand-mark {
  position: relative;
  width: 28px; height: 28px; border-radius: 8px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--navy) 100%);
  display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 13px;
  line-height: 1;
  box-shadow: 0 2px 6px -2px rgba(19, 78, 111, 0.45);
}
.brand-mark::after {
  content: ''; position: absolute; right: -2px; bottom: -2px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent-2);
  box-shadow: 0 0 0 2px var(--bg);
}
.nav-links {
  display: flex; gap: 28px; list-style: none; align-items: center;
}
.nav-links a {
  font-size: 14px; color: var(--text-muted); font-weight: 500;
  transition: color .2s;
}
.nav-links a:hover { color: var(--text); }
.nav-cta {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px; background: var(--navy); color: #fff;
  border-radius: 10px; font-size: 14px; font-weight: 600;
  transition: background .2s;
}
.nav-cta:hover { background: var(--accent); }
.lang-switch {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 13px; color: var(--text-muted); padding: 6px 10px;
  border: 1px solid var(--border); border-radius: 8px;
}
.lang-switch:hover { border-color: var(--border-strong); color: var(--text); }

/* nav.js がモバイル用にパネル末尾へ複製する言語切替リンク。
   デスクトップではバー内の .lang-switch が見えているので複製側は隠す。 */
.nav-links .nav-lang-item { display: none; }

/* ── HAMBURGER (モバイルナビ開閉ボタン) ───
   デスクトップでは非表示。≤960px のメディアクエリで表示する。
   44x44px は WCAG のタッチターゲット最小サイズに準拠。 */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
}
.nav-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  margin: 0 auto;
  background: var(--text);
  border-radius: 2px;
  transition: transform .25s ease, opacity .2s ease;
}
/* 開いている時はバーを×印に変形 */
nav.site-nav.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
nav.site-nav.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
nav.site-nav.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── NAV DROPDOWN ─────────────────────── */
nav.site-nav .nav-links .has-dropdown { position: relative; }
nav.site-nav .nav-links .dropdown-toggle::after {
  content: ''; display: inline-block;
  width: 5px; height: 5px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  margin-left: 6px; vertical-align: middle;
  opacity: 0.55; transition: transform .2s, opacity .2s;
}
nav.site-nav .nav-links .has-dropdown:hover .dropdown-toggle::after {
  transform: rotate(225deg) translate(2px, 2px); opacity: 0.9;
}
/* Invisible hover bridge between trigger and menu (fills the gap so
   moving the cursor onto the menu doesn't drop the :hover state). */
nav.site-nav .nav-links .has-dropdown::after {
  content: ''; position: absolute;
  top: 100%; left: -16px; right: -16px;
  height: 18px;
}
nav.site-nav .nav-links .dropdown-menu {
  display: none; position: absolute;
  top: calc(100% + 18px); left: 50%; transform: translateX(-50%);
  margin: 0; padding: 8px 0;
  min-width: 240px;
  list-style: none; z-index: 100;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
nav.site-nav .nav-links .has-dropdown:hover .dropdown-menu,
nav.site-nav .nav-links .has-dropdown:focus-within .dropdown-menu { display: block; }
nav.site-nav .nav-links .dropdown-menu li { list-style: none; }
nav.site-nav .nav-links .dropdown-menu li a {
  display: block; padding: 9px 18px;
  font-size: 14px; font-weight: 500;
  color: var(--text-muted); white-space: nowrap;
  transition: color .15s, background .15s;
}
nav.site-nav .nav-links .dropdown-menu li a:hover {
  color: var(--accent); background: var(--bg-soft);
}

/* ── BREADCRUMB ─────────────────────── */
.breadcrumb {
  border-bottom: 1px solid var(--border); background: var(--bg-soft);
}
.breadcrumb ol {
  max-width: var(--container); margin: 0 auto; padding: 10px 24px;
  list-style: none; display: flex; gap: 8px; font-size: clamp(12px, 1vw, 14px);
  color: var(--text-soft); font-family: var(--font-mono);
}
.breadcrumb li::after { content: '/'; margin-left: 8px; opacity: 0.4; }
.breadcrumb li:last-child::after { content: ''; }
.breadcrumb li[aria-current="page"] { color: var(--text); }

/* ── HERO (Linear/Vercel風) ─────────── */
.hero {
  padding: 80px 0 100px;
  background: var(--bg);
  position: relative; overflow: hidden;
}
.hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(800px 400px at 80% -10%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%),
    radial-gradient(600px 300px at 10% 100%, color-mix(in srgb, var(--accent-2) 8%, transparent), transparent 70%);
}
.hero-grid {
  position: relative;
  display: grid; grid-template-columns: 1.1fr 1fr;
  gap: 64px; align-items: center;
}
.hero-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border: 1px solid var(--border);
  border-radius: 999px; font-size: 13px; color: var(--text-muted);
  background: var(--surface); margin-bottom: 24px;
}
.hero-pill .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--success);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 25%, transparent);
}
h1.hero-title {
  margin-bottom: 20px;
}
h1.hero-title .accent {
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-sub {
  font-size: clamp(16px, 1.4vw, 18px); color: var(--text-muted);
  max-width: 520px; margin-bottom: 32px;
}
.hero-cta-row { display: flex; gap: 12px; flex-wrap: wrap; }
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 20px; border-radius: 10px; font-weight: 600;
  font-size: 15px; transition: transform .15s, box-shadow .2s, background .2s;
  border: 1px solid transparent;
}
/* CTA は Orange に統一 (2026-08-06)。文字色 #3A2708 で AA 以上を確保 */
.btn-primary { background: var(--accent-2); color: #3A2708; border-color: var(--accent-2); }
.btn-primary:hover {
  background: var(--cta-hover); color: #fff; border-color: var(--cta-hover);
  transform: translateY(-1px); box-shadow: 0 10px 24px -10px rgba(217,119,6,0.55);
}
.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.btn-secondary:hover { border-color: var(--text); }
.hero-trust {
  margin-top: 40px; display: flex; gap: 32px; flex-wrap: wrap;
  padding-top: 28px; border-top: 1px solid var(--border);
}
.trust-item .num {
  font-size: 26px; font-weight: 800; letter-spacing: -0.02em;
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.trust-item .label {
  font-size: 16px; color: var(--text-soft); margin-top: 2px;
  text-transform: uppercase; letter-spacing: 0.06em;
  font-family: 'Poppins', -apple-system, system-ui, sans-serif;
}

/* Hero visual — abstract grid card stack */
.hero-visual {
  position: relative; aspect-ratio: 1/1; max-width: 520px; justify-self: end; width: 100%;
}
.hv-card {
  position: absolute; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 18px 20px; box-shadow: var(--shadow-md);
  display: flex; flex-direction: column; gap: 6px;
}
.hv-card .ico { font-size: 22px; line-height: 1; }
.hv-card .label { font-size: 16px; font-family: 'Poppins', -apple-system, system-ui, sans-serif; color: var(--text-soft); text-transform: uppercase; letter-spacing: 0.08em; }
.hv-card .title { font-size: 15px; font-weight: 600; color: var(--text); }
.hv-1 { top: 6%; left: 8%; width: 56%; }
.hv-2 { top: 28%; right: 4%; width: 50%; }
.hv-3 { bottom: 22%; left: 0%; width: 54%; }
.hv-4 { bottom: 4%; right: 8%; width: 48%; }
.hv-grid-bg {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(circle at 50% 50%, #000, transparent 70%);
}

/* ── LOGO STRIP ───────────────────────── */
.logo-strip {
  padding: 32px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  background: var(--bg-soft);
}
.logo-strip-inner {
  max-width: var(--container); margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 24px;
}
.logo-strip-label {
  font-size: 12px; color: var(--text-soft); text-transform: uppercase;
  letter-spacing: 0.08em; font-family: var(--font-mono);
}
.logo-strip-items {
  display: flex; gap: 32px; flex-wrap: wrap; align-items: center;
  color: var(--text-muted); font-weight: 600; font-size: 14px;
}
.logo-strip-items span {
  display: inline-flex; align-items: center; gap: 6px;
}

/* ── SECTION BASE ───────────────────── */
section { padding: 104px 0; }   /* 案4 の余白 */
.section-head { max-width: 720px; margin-bottom: 56px; }
.section-head h2 { margin: 16px 0 12px; }
.section-head p { color: var(--text-muted); font-size: 17px; }

/* ── SERVICES GRID (案4 Photo Immersive / 2026-08-06) ───
   旧: 1px罫線でつないだテーブル状グリッド
   新: 24px 間隔で独立した白カード + 角丸18px + 影 + ホバーで浮上 */
#services { background: var(--bg-soft); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.services-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px;
}
.svc {
  background: var(--surface); padding: 30px;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  display: flex; flex-direction: column; gap: 10px;
  box-shadow: 0 1px 2px rgba(19,78,111,0.05), 0 8px 24px -12px rgba(19,78,111,0.18);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  position: relative;
}
.svc:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: var(--border-strong);
}
.svc-num {
  font-family: var(--font-label); font-size: 11px; color: var(--sky);
  letter-spacing: 0.12em;
}
.svc-icon {
  /* 案4: アイコンは Navy 面 + 白抜き (design-lab [data-design="4"] 準拠) */
  width: 48px; height: 48px; border-radius: 10px;
  background: var(--navy); color: #fff;
  display: grid; place-items: center; font-size: 23px;
  margin-bottom: 6px;
}
.svc h3 { font-size: 20px; font-weight: 600; color: var(--navy); }
.svc-en {
  font-family: var(--font-label); font-size: 11px; font-weight: 600; color: var(--accent);
  text-transform: uppercase; letter-spacing: 0.12em;
}
.svc p { color: var(--text-muted); font-size: 14.5px; line-height: 1.75; }
.svc-meta {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: auto; padding-top: 16px; border-top: 1px dashed var(--border);
  font-size: 13px;
}
.svc-price { color: var(--navy); font-weight: 600; }
.svc-link {
  color: var(--accent); font-weight: 600;
  display: inline-flex; gap: 4px; align-items: center;
}
.svc-link:hover { gap: 8px; transition: gap .2s; }

/* ── COMPARE — Apple-inspired card grid ───────────────────── */
#compare { background: var(--bg-soft); }
.cmp-head { text-align: center; max-width: 760px; margin: 0 auto 64px; }
.cmp-head .eyebrow { display: inline-block; margin-bottom: 18px; }
.cmp-head h2 {
  font-size: clamp(40px, 5.5vw, 64px);
  line-height: 1.05; letter-spacing: -0.035em;
  font-weight: 600; margin: 0 0 20px; color: var(--navy);
}
.cmp-head p {
  font-size: clamp(17px, 1.4vw, 21px);
  line-height: 1.5; color: var(--text-soft);
  max-width: 560px; margin: 0 auto;
}
.cmp-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 460px));
  gap: 20px;
  justify-content: center;
  margin: 0 auto;
  max-width: 960px;
}
@media (max-width: 980px) { .cmp-grid { grid-template-columns: repeat(2, minmax(0, 360px)); } }
@media (max-width: 640px) { .cmp-grid { grid-template-columns: minmax(0, 420px); } }

.cmp-card {
  position: relative;
  background: var(--surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  min-height: 460px;
  transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s;
  text-decoration: none; color: inherit;
}
.cmp-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.cmp-card .cmp-visual {
  position: relative; height: 240px;
  display: flex; align-items: flex-end; justify-content: flex-start;
  padding: 32px;
  overflow: hidden;
}
.cmp-card .cmp-visual::before {
  content: ''; position: absolute; inset: 0;
  background: var(--cmp-bg, linear-gradient(135deg, var(--bg) 0%, var(--bg-muted) 100%));
  z-index: 0;
}
.cmp-card .cmp-emoji {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 88px; line-height: 1;
  opacity: .92; z-index: 1;
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
.cmp-card:hover .cmp-emoji { transform: translate(-50%, -50%) scale(1.08); }
/* When a card has a real photo (--cmp-bg overridden inline), hide emoji and
   strengthen the bottom gradient for tag legibility. */
.cmp-card.has-photo .cmp-emoji { display: none; }
.cmp-card.has-photo .cmp-visual::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(10,42,62,0) 50%, rgba(10,42,62,0.45) 100%);
}
.cmp-card .cmp-tag {
  position: relative; z-index: 2;
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--cmp-tag, var(--navy));
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  padding: 6px 12px; border-radius: 999px;
}

.cmp-card .cmp-body {
  padding: 28px 28px 24px;
  display: flex; flex-direction: column; flex: 1;
}
.cmp-card h3 {
  font-size: 24px; line-height: 1.2;
  font-weight: 600; letter-spacing: -0.02em;
  color: var(--navy); margin: 0 0 8px;
}
.cmp-card .cmp-pitch {
  font-size: 15px; line-height: 1.5;
  color: var(--text-soft); margin: 0 0 20px;
  flex: 1;
}
.cmp-card .cmp-meta {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--text-soft);
  margin-bottom: 18px;
}
.cmp-card .cmp-meta-dot {
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--border-strong);
}
.cmp-card .cmp-actions {
  display: flex; gap: 10px; flex-wrap: wrap;
  position: relative; z-index: 2;
}
.cmp-card .cmp-actions a { position: relative; z-index: 2; }
/* Stretched link covers the entire card for whole-card-click while
   buttons in .cmp-actions stay clickable above it (z-index: 2). */
.cmp-cardlink {
  position: absolute; inset: 0; z-index: 1;
  border-radius: inherit;
  text-indent: -9999px; overflow: hidden; white-space: nowrap;
}
.cmp-cardlink:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.cmp-card .cmp-btn {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 14px; font-weight: 500;
  padding: 10px 18px; border-radius: 999px;
  transition: all .2s ease;
  text-decoration: none;
}
.cmp-btn-primary {
  background: var(--accent); color: #fff;
}
.cmp-btn-primary:hover { background: var(--navy); }
.cmp-btn-link {
  color: var(--accent); padding-left: 4px;
}
.cmp-btn-link:hover { text-decoration: underline; }

/* Per-service color themes (Apple-style soft tints) */
.cmp-card.theme-eng    { --cmp-bg: linear-gradient(135deg, var(--bg) 0%, var(--bg-muted) 100%); --cmp-tag: var(--accent); }
.cmp-card.theme-photo  { --cmp-bg: linear-gradient(135deg, var(--bg) 0%, var(--bg-muted) 100%); --cmp-tag: var(--navy); }
.cmp-card.theme-mahjong{ --cmp-bg: linear-gradient(135deg, var(--bg) 0%, var(--bg-muted) 100%); --cmp-tag: var(--sky); }
.cmp-card.theme-tour   { --cmp-bg: linear-gradient(135deg, var(--bg) 0%, var(--bg-muted) 100%); --cmp-tag: var(--cta-hover); }

/* ── ABOUT / WHO ─────────────────────── */
.who-grid {
  display: grid; grid-template-columns: 280px 1fr; gap: 56px; align-items: center;
}
.who-photo {
  aspect-ratio: 1/1; border-radius: var(--radius-lg); overflow: hidden;
  background: linear-gradient(135deg, var(--accent-soft), var(--bg-muted));
  border: 1px solid var(--border);
  display: grid; place-items: center;
  color: var(--text-soft); font-family: var(--font-mono); font-size: 12px;
}
.who-photo img { width: 100%; height: 100%; object-fit: cover; }
.who-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.who-tag {
  padding: 5px 12px; border: 1px solid var(--border); border-radius: 999px;
  font-size: 12px; color: var(--text-muted); background: var(--surface);
}

/* ── FAQ (Notion風) ──────────────────── */
#faq { background: var(--bg-soft); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.faq-list { max-width: 820px; margin: 0 auto; }
.faq-item {
  border-bottom: 1px solid var(--border);
}
.faq-q {
  width: 100%; background: none; border: none; text-align: left;
  padding: 24px 0; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; font-size: 17px; font-weight: 600; color: var(--text);
}
.faq-q:hover { color: var(--accent); }
.faq-icon {
  width: 24px; height: 24px; border: 1px solid var(--border-strong);
  border-radius: 6px; flex-shrink: 0; display: grid; place-items: center;
  font-size: 14px; color: var(--text-muted); transition: transform .25s;
}
.faq-item[data-open="true"] .faq-icon { transform: rotate(45deg); background: var(--navy); color: #fff; border-color: var(--navy); }
.faq-a {
  max-height: 0; overflow: hidden; transition: max-height .35s ease;
  color: var(--text-muted); font-size: 15px; line-height: 1.7;
}
.faq-a-inner { padding: 0 0 24px; }
.faq-item[data-open="true"] .faq-a { max-height: 400px; }

/* ── CTA BIG ─────────────────────────── */
.cta-big {
  background: var(--navy); color: #fff;
  border-radius: var(--radius-lg); padding: 64px 48px;
  text-align: center; position: relative; overflow: hidden;
}
.cta-big::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(600px 320px at 28% 12%, color-mix(in srgb, var(--accent) 45%, transparent), transparent 65%);
}
.cta-big > * { position: relative; }
.cta-big h2 { color: #fff; margin-bottom: 12px; }
.cta-big p { color: rgba(255,255,255,0.82); margin-bottom: 28px; }

/* ── FOOTER ───────────────────────────
   案4 のリズム(濃色で締める)に合わせ Navy 反転 (2026-08-06)。
   before = --bg-soft の淡い面 / after = Navy #134E6F。
   Navy(相対輝度 0.0674)上の文字は全て AA(4.5:1)以上を実測で確認済み。 */
footer {
  background: #134E6F; color: #fff;
  border-top: none;
  padding: 72px 0 32px;
  position: relative; overflow: hidden;
}
footer::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(720px 380px at 86% -20%, rgba(30, 136, 229, 0.32), transparent 62%),
    radial-gradient(560px 300px at 2% 118%, rgba(245, 158, 11, 0.14), transparent 70%);
}
footer > * { position: relative; z-index: 1; }
footer .brand { color: #fff; }
/* Navy 面ではロゴマークを白地 + Navy 文字に反転する */
footer .brand-mark {
  background: #fff; color: #134E6F;
  box-shadow: 0 2px 8px -2px rgba(6, 26, 40, 0.6);
}
footer .brand-mark::after { box-shadow: 0 0 0 2px #134E6F; }
.footer-grid {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 48px;
  padding-bottom: 48px; border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}
/* #8ECDF7 on #134E6F = 5.21:1 (AA) */
.footer-col h4 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 16px; color: #8ECDF7; font-family: var(--font-mono); font-weight: 500; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
/* rgba(255,255,255,.86) on #134E6F = 7.07:1 (AA) */
.footer-col a { color: rgba(255, 255, 255, 0.86); font-size: 14px; transition: color .18s; }
.footer-col a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.footer-brand p { font-size: 14px; color: rgba(255, 255, 255, 0.86); margin-top: 12px; max-width: 320px; }
.footer-bottom {
  padding-top: 24px; display: flex; justify-content: space-between;
  align-items: center; flex-wrap: wrap; gap: 16px;
  /* rgba(255,255,255,.74) on #134E6F = 5.71:1 (AA) */
  font-size: 12px; color: rgba(255, 255, 255, 0.74);
}
.footer-bottom a { color: rgba(255, 255, 255, 0.86); }
.footer-bottom a:hover { color: #fff; }

/* Reveal */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
/* JS無効時は reveal を最初から表示（本文が消えないためのフォールバック） */
@media (scripting: none) { .reveal { opacity: 1 !important; transform: none !important; } }

/* ── RESPONSIVE ────────────────────── */
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-visual { max-width: 420px; margin: 0 auto; justify-self: center; }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .who-grid { grid-template-columns: 1fr; gap: 28px; text-align: left; }
  .who-photo { max-width: 220px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }

  /* ── モバイルナビ: .nav-links を「閉じた状態のパネル」に切替 ──
     従来は display:none で消すだけ → モバイルでメニューが無かった。
     ハンバーガー(.nav-toggle)を表示し、開くとパネルが降りる方式へ。 */
  .nav-toggle { display: inline-flex; }

  nav.site-nav .nav-links {
    display: none;                 /* 閉じている状態 */
    position: absolute;            /* sticky な nav.site-nav が基準 */
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 8px 0;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    max-height: calc(100vh - 60px);
    overflow-y: auto;
  }
  /* ハンバーガーで開いた時のみ表示 */
  nav.site-nav.nav-open .nav-links { display: flex; }

  nav.site-nav .nav-links > li { width: 100%; }
  nav.site-nav .nav-links a {
    display: block;
    padding: 13px 24px;
    font-size: 15px;
  }
  /* サービスのサブメニューはホバー不可なので常時展開・字下げ表示 */
  nav.site-nav .nav-links .has-dropdown::after { display: none; } /* hoverブリッジ無効 */
  nav.site-nav .nav-links .dropdown-toggle::after { display: none; } /* 矢印無効 */
  nav.site-nav .nav-links .dropdown-menu {
    display: block;
    position: static;
    transform: none;
    min-width: 0;
    margin: 0;
    padding: 0 0 6px;
    background: transparent;
    border: none;
    box-shadow: none;
  }
  nav.site-nav .nav-links .dropdown-menu li a {
    padding: 10px 24px 10px 40px;
    font-size: 14px;
    white-space: normal;
  }

  /* バー内の言語切替はモバイルでは隠し、CTAは省スペース化
     (はみ出しによる横揺れ防止も兼ねる)。
     代わりに nav.js が複製した .nav-lang-item をパネル内に表示する。 */
  nav.site-nav .lang-switch { display: none; }
  nav.site-nav .nav-links .nav-lang-item {
    display: block;
    margin-top: 6px; padding-top: 6px;
    border-top: 1px solid var(--border);
  }
  nav.site-nav .nav-cta { padding: 7px 12px; font-size: 13px; }
}
@media (max-width: 640px) {
  section { padding: 64px 0; }
  .hero { padding: 56px 0 72px; }
  .services-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .cta-big { padding: 48px 24px; }
  .hero-trust { gap: 20px; }
  /* nav-inner の余白を詰めて狭幅でのはみ出しを防止 */
  .nav-inner { gap: 12px; padding: 12px 16px; }
}
/* ══════════════════════════════════════════════════════════════
   HERO PHOTO — 全ページ共通の写真ヒーロー (2026-08-06 集約)
   使い方: <header class="hero hero--photo" style="--hero-photo:url('...')">
   暗幕は Navy (--scrim-*)。各ページで個別に定義していた
   linear-gradient(rgba(0,0,0,…)) 版はすべてこれに置き換えた。
   ══════════════════════════════════════════════════════════════ */
.hero--photo {
  position: relative; color: #fff;
  background:
    linear-gradient(90deg, var(--scrim-1) 0%, var(--scrim-2) 34%, var(--scrim-3) 58%, var(--scrim-4) 76%),
    var(--hero-photo, linear-gradient(135deg, var(--navy), var(--accent))) center / cover no-repeat;
}
.hero--photo::before { display: none; }
.hero--photo h1, .hero--photo h2, .hero--photo h3 { color: #fff; text-shadow: var(--scrim-text-shadow); }
.hero--photo h1 .accent, .hero--photo .accent {
  background: none; -webkit-background-clip: initial; background-clip: initial;
  color: var(--accent-2);
}
.hero--photo .sub, .hero--photo .hero-sub, .hero--photo p {
  color: #fff; font-weight: 500;
  text-shadow: 0 1px 12px rgba(10, 42, 62, 0.65), 0 1px 2px rgba(10, 42, 62, 0.5);
}
.hero--photo .sub strong, .hero--photo .hero-sub strong { color: var(--accent-2) !important; }
.hero--photo .eyebrow { color: #fff; }
.hero--photo .eyebrow::before { background: var(--accent-2); }
.hero--photo .hero-meta { color: rgba(255, 255, 255, 0.75); }
.hero--photo .hero-pill {
  background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.38); color: #fff;
}
.hero--photo .btn-secondary {
  background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.45);
}
.hero--photo .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.14); border-color: #fff;
}
.hero--photo .hero-trust { border-top-color: rgba(255, 255, 255, 0.30); }
/* 実績数値は案4に合わせ白抜き 30px/800。Orange は h1 と CTA に限定する */
.hero--photo .trust-item .num {
  background: none; -webkit-background-clip: initial; background-clip: initial;
  color: var(--accent-2); font-size: 30px; line-height: 1.1;
  text-shadow: var(--scrim-text-shadow);
}
.hero--photo .trust-item .label {
  color: rgba(255, 255, 255, 0.82);
  font-size: 12px; letter-spacing: 0.08em; margin-top: 4px;
}
.hero--photo .svc-tag {
  border-color: rgba(255, 255, 255, 0.4); color: #fff; background: rgba(255, 255, 255, 0.10);
}
.hero--photo .svc-tag:hover { border-color: rgba(255, 255, 255, 0.8); background: rgba(255, 255, 255, 0.2); }
/* モバイルはテキストが全幅に広がるため、横グラデでは右側の白文字が読めない。
   全体を均一に暗くする縦グラデへ差し替える (従来の各ページ実装と同じ考え方)。 */
@media (max-width: 640px) {
  .hero--photo {
    background:
      linear-gradient(180deg, rgba(10, 42, 62, 0.70) 0%, rgba(10, 42, 62, 0.52) 50%, rgba(10, 42, 62, 0.72) 100%),
      var(--hero-photo, linear-gradient(135deg, var(--navy), var(--accent))) center / cover no-repeat;
  }
}

/* ══════════════════════════════════════════════════════════════
   MARQUEE — 特徴バンドを左へ流し続ける (2026-09-03)
   同じ並びを2組つないだトラックを -50% まで動かすので、継ぎ目なくつながる。
   2組目は aria-hidden。読み上げが二重になるのを防ぐ。
   停止ボタンは置かない (Sho指示 2026-09-03)。prefers-reduced-motion も見ない
   (Sho指示 2026-09-04)。止まるのはマウスでのホバー中とフォーカス中だけ。
   https://www.w3.org/WAI/WCAG22/Understanding/pause-stop-hide.html
   ══════════════════════════════════════════════════════════════ */
.marquee { flex: 1 1 320px; min-width: 0; overflow: hidden; position: relative; }
/* 左右の端で文字が切れて見えないよう、地色のグラデーションを重ねて隠す。
   mask-image は Safari で transform アニメーションと併用すると描画が止まる例があるため使わない。 */
.marquee::before, .marquee::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 36px;
  z-index: 1; pointer-events: none;
}
.marquee::before { left: 0;  background: linear-gradient(90deg, var(--bg-soft), transparent); }
.marquee::after  { right: 0; background: linear-gradient(270deg, var(--bg-soft), transparent); }
.marquee-track {
  display: flex; width: max-content;
  animation: marquee-scroll 46s linear infinite;
  will-change: transform;          /* iOS Safari でコンポジタに載せる */
}
.marquee-set { display: flex; gap: 32px; align-items: center; padding-right: 32px; }
@keyframes marquee-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
/* 読みたい語を追えるよう、ホバー中とフォーカス中は止める。
   ホバーはマウスのある環境だけに限る。iOS Safari はタップした要素に :hover を当てて
   別の場所をタップするまで外さないため、タッチだと指が触れた時点で永久に止まる。
   停止ボタンは Sho の指示で置かない (2026-09-03)。 */
@media (hover: hover) and (pointer: fine) {
  .marquee:hover .marquee-track { animation-play-state: paused; }
}
.marquee:focus-within .marquee-track { animation-play-state: paused; }

/* prefers-reduced-motion は意図的に見ない (Sho指示 2026-09-04)。
   端末側で「視差効果を減らす」を有効にしている人にも流し続ける。
   一般には横スクロールを止めるのが望ましく、停止ボタンも置いていないため
   WCAG 2.2.2 の観点では止める手段がマウスのホバーだけになるが、
   常に流すことを優先した判断。
   https://www.w3.org/WAI/WCAG22/Understanding/pause-stop-hide.html */
@media (max-width: 640px) {
  .marquee { flex-basis: 100%; }
  .marquee-set { gap: 22px; padding-right: 22px; }
}

/* ══════════════════════════════════════════════════════════════
   NEWS — ニュースページ (2026-09-03 / 案5: ハイライト + 一覧)
   分類チップの配色は白または #3A2708 とのコントラストを実測して選んだ。
   最も低い「新ページ」でも 6.64:1 で WCAG AA (4.5:1) に適合する。
   ══════════════════════════════════════════════════════════════ */
.nw-hero { padding: clamp(56px, 8vw, 88px) 0 clamp(40px, 6vw, 64px); min-height: 0; }
.nw-hero h1 { font-size: clamp(28px, 3.6vw, 42px); margin-top: 14px; }
.nw-hero .nw-lede { max-width: 52ch; margin-top: 14px; font-size: 15.5px; }

.nw { max-width: 900px; margin: 0 auto; padding: 44px 24px 96px; }

.nw-chip {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.03em;
  padding: 3px 10px; border-radius: 999px; white-space: nowrap; line-height: 1.6;
}
.nw-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.nw-meta time, .nw-cl time {
  font-family: var(--font-mono); font-size: 12.5px; color: var(--text-soft);
  letter-spacing: 0.02em; font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* ── ハイライト (最新1件) ── */
.nw-hl {
  display: grid; grid-template-columns: 1.1fr 1fr;
  border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden;
  background: var(--surface); text-decoration: none; color: inherit;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.nw-hl:hover, .nw-hl:focus-visible { border-color: var(--accent); transform: translateY(-2px); }
.nw-hl img {
  width: 100%; height: 100%; min-height: 260px; object-fit: cover;
  display: block; background: var(--bg-muted);
}
.nw-hl-b { padding: 32px 32px; display: flex; flex-direction: column; justify-content: center; }
.nw-hl-b h2 { font-size: 22px; color: var(--navy); margin: 13px 0 0; line-height: 1.55; }
.nw-hl-b p { font-size: 14.5px; color: var(--text-soft); line-height: 1.9; margin: 11px 0 0; }
.nw-more { margin-top: 17px; font-size: 13.5px; font-weight: 600; color: var(--accent); }

/* ── 一覧 (2件目以降) ── */
.nw-clh {
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--navy); font-weight: 700; margin: 46px 0 0;
}
.nw-cl { list-style: none; margin: 12px 0 0; padding: 0; border-top: 1px solid var(--border); }
.nw-cl li { border-bottom: 1px solid var(--border); }
.nw-cl a {
  display: flex; align-items: center; gap: 13px; padding: 15px 8px;
  text-decoration: none; color: inherit; flex-wrap: wrap;
  transition: background 0.2s ease;
}
.nw-cl a:hover, .nw-cl a:focus-visible { background: var(--bg-soft); }
.nw-lt { font-size: 15px; color: var(--navy); line-height: 1.7; font-weight: 500; }

/* ── 個別ページ ── */
.nw-art { max-width: 720px; margin: 0 auto; padding: 52px 24px 96px; }
.nw-art-h { border-bottom: 1px solid var(--border); padding-bottom: 26px; }
.nw-art h1 { font-size: clamp(24px, 3vw, 34px); color: var(--navy); margin: 15px 0 0; line-height: 1.5; }
.nw-art-lead { font-size: 16.5px; color: var(--text-soft); line-height: 1.95; margin: 15px 0 0; }
.nw-art p { font-size: 16.5px; line-height: 2; margin: 22px 0 0; }
.nw-fig { margin: 32px 0 0; }
.nw-fig img {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius-lg); background: var(--bg-muted);
}
.nw-cta { margin-top: 26px !important; }
.nw-cta a { color: var(--accent); font-weight: 600; text-decoration: none; }
.nw-cta a:hover { text-decoration: underline; }

/* ── 共有ボタン ── */
.nw-share {
  margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.nw-share-h { font-size: 13px; color: var(--text-soft); margin-right: 4px; }
.nw-share-b {
  font-size: 13px; font-weight: 600; padding: 8px 16px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface); color: var(--navy);
  text-decoration: none; transition: border-color 0.2s ease, color 0.2s ease;
}
.nw-share-b:hover, .nw-share-b:focus-visible { border-color: var(--accent); color: var(--accent); }

/* ── 前後の記事 ── */
.nw-nbs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 36px; }
.nw-nb {
  border: 1px solid var(--border); border-radius: var(--radius); padding: 15px 18px;
  text-decoration: none; color: inherit; background: var(--surface);
  transition: border-color 0.2s ease;
}
.nw-nb:hover, .nw-nb:focus-visible { border-color: var(--accent); }
.nw-nb span { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-soft); display: block; }
.nw-nb b { font-size: 14px; color: var(--navy); font-weight: 600; line-height: 1.6; display: block; margin-top: 6px; }
.nw-nb.next { text-align: right; }
.nw-back { margin-top: 34px !important; font-size: 14px; }
.nw-back a { color: var(--accent); text-decoration: none; font-weight: 600; }
.nw-back a:hover { text-decoration: underline; }

/* ── トップページの最新3件 ── */
.nw-home { padding: 88px 0; background: var(--bg-soft); }
.nw-home h2 { color: var(--navy); margin: 12px 0 0; }
.nw-cl-home { margin-top: 22px; max-width: 760px; }
.nw-cl-home a { background: var(--surface); padding: 15px 18px; }
.nw-home-all { margin-top: 22px; font-size: 14px; }
.nw-home-all a { color: var(--accent); font-weight: 600; text-decoration: none; }
.nw-home-all a:hover { text-decoration: underline; }

@media (max-width: 860px) {
  .nw-hl { grid-template-columns: 1fr; }
  .nw-hl img { min-height: 200px; }
  .nw-hl-b { padding: 24px 22px; }
}
@media (max-width: 640px) {
  .nw { padding: 32px 14px 64px; }
  .nw-art { padding: 36px 16px 64px; }
  .nw-nbs { grid-template-columns: 1fr; }
  .nw-nb.next { text-align: left; }
  .nw-home { padding: 64px 0; }
}

/* ══════════════════════════════════════════════════════════════
   HERO SLIDESHOW — 背景写真を一定間隔で入れ替える (2026-09-03)
   .hero--photo は背景を1枚の写真で塗るため、クロスフェードできない。
   写真を子レイヤー2枚に逃がし、暗幕を ::after に移して重ね順を作る。
   暗幕は .hero--photo と同じ横グラデに、均一な rgba(10,42,62,.25) を重ねたもの。
   写真ごとに明るさが違うため、15枚それぞれのテキスト領域を実測して .25 を決めた。
   白文字のコントラスト比は最も不利な1枚 (横浜みなとみらいの夕景) でも 4.77:1 で
   WCAG AA (4.5:1) に適合する。
   自動切り替えの停止ボタンは WCAG 2.2.2「一時停止、停止、非表示」への対応。
   https://www.w3.org/WAI/WCAG22/Understanding/pause-stop-hide.html
   ══════════════════════════════════════════════════════════════ */
.hero--slideshow {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--navy);
}
.hero--slideshow .hero-slides { position: absolute; inset: 0; z-index: 0; }
.hero--slideshow .hero-slide {
  position: absolute; inset: 0;
  background-position: center; background-size: cover; background-repeat: no-repeat;
  opacity: 0; transition: opacity 1.2s ease-in-out;
}
.hero--slideshow .hero-slide.is-on { opacity: 1; }
.hero--slideshow::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(0deg, rgba(10, 42, 62, 0.25), rgba(10, 42, 62, 0.25)),
    linear-gradient(90deg, var(--scrim-1) 0%, var(--scrim-2) 34%, var(--scrim-3) 58%, var(--scrim-4) 76%);
}
.hero--slideshow > .container { position: relative; z-index: 2; }

/* 停止・再生ボタン。白文字 on rgba(10,42,62,.72) 相当で 8:1 以上を確保する。
   右下は .line-float (position:fixed / z-index:900) の定位置で必ず重なるため、左下に置く。 */
.hero-slide-toggle {
  position: absolute; left: 20px; bottom: 20px; z-index: 3;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: 999px;
  background: rgba(10, 42, 62, 0.72); border: 1px solid rgba(255, 255, 255, 0.42);
  color: #fff; font-family: var(--font-sans); font-size: 12.5px; font-weight: 600;
  cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease;
}
.hero-slide-toggle:hover,
.hero-slide-toggle:focus-visible { background: rgba(10, 42, 62, 0.9); border-color: #fff; }
.hero-slide-toggle svg { flex: none; }
.hero-slide-toggle[hidden] { display: none; }

@media (max-width: 640px) {
  /* .hero--photo と同じ考え方で、モバイルは全体を均一に暗くする縦グラデにする */
  .hero--slideshow::after {
    background:
      linear-gradient(0deg, rgba(10, 42, 62, 0.25), rgba(10, 42, 62, 0.25)),
      linear-gradient(180deg, rgba(10, 42, 62, 0.70) 0%, rgba(10, 42, 62, 0.52) 50%, rgba(10, 42, 62, 0.72) 100%);
  }
  .hero-slide-toggle { left: 14px; bottom: 14px; padding: 7px 12px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  /* opacity だけのクロスフェードは要素が動かないため止めない。
     ただちらつきを抑えるためフェードを長くする。切り替え間隔は JS 側で伸ばす。
     transition:none にすると逆にハードカットになって目に障るので使わない。 */
  .hero--slideshow .hero-slide { transition-duration: 2.4s; }
}

/* ══════════════════════════════════════════════════════════════
   SECTION INVERT — Navy 反転セクション (案4 / 2026-08-06)
   全ページに1つ、リズムを作る濃色ブロックとして使う。
   実装方針: 色を直接指定するのではなく「配下で使われるトークンを反転」する。
   各ページの page-overrides も var(--text) / var(--text-muted) 等を
   参照しているため、セレクタの詳細度に関係なく確実に反転できる。
   ══════════════════════════════════════════════════════════════ */
.section-invert {
  --text: #FFFFFF;
  --text-muted: rgba(255, 255, 255, 0.86);
  --text-soft: rgba(255, 255, 255, 0.74);
  --navy: #FFFFFF;                      /* h1・h2 の色として参照される */
  --sky: rgba(255, 255, 255, 0.78);
  --surface: rgba(255, 255, 255, 0.08);
  --bg: #134E6F;
  --bg-soft: rgba(255, 255, 255, 0.06);
  --bg-muted: rgba(255, 255, 255, 0.12);
  --border: rgba(255, 255, 255, 0.22);
  --border-strong: rgba(255, 255, 255, 0.38);
  --accent: #8ECDF7;                    /* Navy 上で AA を満たす明るいブルー */
  --accent-soft: rgba(255, 255, 255, 0.12);
  --shadow-sm: none;
  --shadow-md: 0 8px 24px rgba(6, 26, 40, 0.35);
  --shadow-lg: 0 24px 48px -12px rgba(6, 26, 40, 0.55);
  background: #134E6F;
  color: #fff;
  border-top: none; border-bottom: none;
  position: relative; overflow: hidden;
}
/* id セレクタ(詳細度 1-0-0)で背景が指定されているセクションにも効かせる */
#about.section-invert, #story.section-invert, #values.section-invert,
#compare.section-invert, #flow.section-invert, #gallery.section-invert,
#schedule.section-invert, #faq.section-invert, #services.section-invert,
#spotlight.section-invert, #prizes.section-invert {
  background: #134E6F;
  border-top: none; border-bottom: none;
}
.section-invert::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(720px 380px at 84% -10%, rgba(30, 136, 229, 0.38), transparent 62%),
    radial-gradient(560px 300px at 4% 108%, rgba(245, 158, 11, 0.16), transparent 70%);
}
.section-invert > * { position: relative; z-index: 1; }
.section-invert .eyebrow { color: var(--accent-2-light); }
.section-invert .eyebrow::before { background: var(--accent-2-light); }
.section-invert a:not(.btn):not(.svc-link):not(.cmp-btn):not(.cmp-cardlink) { color: var(--accent-2-light); }
.section-invert .btn-secondary { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.45); }
.section-invert .btn-secondary:hover { background: rgba(255, 255, 255, 0.14); border-color: #fff; }
.section-invert .who-tag, .section-invert .about-tag, .section-invert .svc-tag {
  background: rgba(255, 255, 255, 0.10); border-color: rgba(255, 255, 255, 0.30); color: #fff;
}
.section-invert .timeline-year { color: var(--accent-2-light); }
/* 反転セクション内で「白面の上に置かれる要素」は固定色に戻す
   (トークン反転が二重に効いて白地に白文字になるのを防ぐ) */
.section-invert .cmp-tag { color: #134E6F; background: rgba(255, 255, 255, 0.92); }
.section-invert .cmp-btn-primary { background: #1E88E5; color: #fff; }
.section-invert .cmp-btn-primary:hover { background: #0B6BC4; }
.section-invert .cmp-btn-link { color: #1E88E5; }
.section-invert .cmp-card { background: #fff; }
.section-invert .cmp-card h3 { color: #134E6F; }
.section-invert .cmp-card .cmp-pitch, .section-invert .cmp-card .cmp-meta { color: #566575; }
/* 円形ステップ番号は Navy 上で AA を満たすよう白文字に */
.section-invert .sp-flow-num { background: rgba(255, 255, 255, 0.18); color: #fff; }
/* 反転セクション内の強調時刻(S.League 24 のタイムライン)は
   Navy 上で AA を満たす明色オレンジに置き換える */
.section-invert .schedule-item.highlight .schedule-time { color: var(--accent-2-light); }

/* ══════════════════════════════════════════════════════════════
   FLOATING CARD — 案4 のカード表現を全ページのカード類へ (2026-08-06)
   各ページで個別定義されている枠線だけのカードに、
   影とホバー時の浮上を共通で付与する。
   ページ側の定義(詳細度 0-1-0)より強くするため body を前置している。
   ══════════════════════════════════════════════════════════════ */
body .info-card,
body .sp-plan,
body .prize-card,
body .type-card,
body .event-card {
  box-shadow: 0 1px 2px rgba(19, 78, 111, 0.05), 0 8px 24px -12px rgba(19, 78, 111, 0.18);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
body .info-card:hover,
body .sp-plan:hover,
body .prize-card:hover,
body .type-card:hover,
body .event-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: var(--border-strong);
}
/* 反転セクション内のカードは Navy 上に置かれるため影を強める */
.section-invert .info-card,
.section-invert .prize-card,
.section-invert .type-card,
.section-invert .event-card {
  box-shadow: 0 10px 30px -14px rgba(6, 26, 40, 0.55);
}

/* ============================================================
   LINE 相談ボタン (2026-08-29 追加 / 全ページ共通)
   - 右下フローティング + フッター内リンク
   - 配色は LUMA CTA Orange。LINE 社のロゴ画像は使用しない
   ============================================================ */
/* 拡大表示 (ライトボックス) 中は LINE ボタンを隠す。暗幕は不透明度0.94のため、
   明るいアンバーのボタンだけが透けて見えてしまう。.lightbox = 作例ページ / .alb = 撮影ノート */
body:has(.lightbox.open) .line-float,
body:has(.alb.open) .line-float { display: none; }

.line-float{
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 900;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 20px;
  border-radius: 999px;
  background: var(--accent-2, #F59E0B);
  color: #3A2A02;
  font-family: 'Poppins', 'Noto Sans JP', sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 10px 28px -8px rgba(6, 26, 40, .45);
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.line-float:hover,
.line-float:focus-visible{
  background: var(--cta-hover, #D97706);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 14px 34px -10px rgba(6, 26, 40, .55);
}
.line-float:focus-visible{ outline: 3px solid #134E6F; outline-offset: 3px; }
.line-float .lf-icon{ width: 18px; height: 18px; flex: none; }
@media (max-width: 640px){
  .line-float{ right: 14px; bottom: 14px; padding: 12px 17px; font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce){
  .line-float{ transition: none; }
  .line-float:hover, .line-float:focus-visible{ transform: none; }
}

/* HERO の LINE 相談ボタン (2026-08-29 追加)
   主CTA(btn-primary / Orange)より一段弱く、btn-secondary より明確に見える中間トーン */
.btn-line {
  background: var(--accent-soft);
  color: #134E6F;
  border-color: var(--accent-soft);
  font-weight: 600;
}
.btn-line:hover {
  background: var(--accent, #1E88E5);
  color: #fff;
  border-color: var(--accent, #1E88E5);
  transform: translateY(-1px);
}
/* 反転(Navy)セクション上に置かれた場合の可読性確保 */
.section-invert .btn-line {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.38);
}
.section-invert .btn-line:hover {
  background: #8ECDF7;
  color: #0B3450;
}
/* 写真ヒーロー上: 主CTA(Orange ベタ)と競合しないよう半透明の白面にする。
   優先度は 予約する(ベタOrange) > LINE で相談(白半透明) > サービスを見る(枠線のみ) */
.hero--photo .btn-line {
  background: #06803A;
  color: #fff;
  border-color: #06803A;
  text-shadow: none;
}
.hero--photo .btn-line:hover,
.hero--photo .btn-line:focus-visible {
  background: #05672F;
  border-color: #05672F;
  color: #fff;
}


/* ============================================================
   Phase 12 / 工程B — 予約導線と作例・料金・流れの共通パーツ
   (2026-09-05 追加。index / service-photo / s-league 系で共用)
   ============================================================ */

/* ── 作例グリッド ── */
.work-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.work-tile {
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease;
}
.work-tile:hover,
.work-tile:focus-visible { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.work-tile img { width: 100%; height: 220px; object-fit: cover; }
.work-tile .wt-cap {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 16px; font-size: 14px; color: var(--text); font-weight: 600;
}
.work-tile .wt-cap span:last-child { color: var(--accent); font-size: 13px; font-weight: 600; }
@media (max-width: 900px) { .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .work-grid { grid-template-columns: 1fr; gap: 14px; }
  .work-tile img { height: 200px; }
}

/* ── 料金の抜粋カード (トップ用の簡易版) ── */
.mini-plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.mini-plan {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 26px 24px;
  box-shadow: var(--shadow-sm);
}
.mini-plan h3 { font-size: 17px; color: var(--navy); margin-bottom: 4px; }
.mini-plan .mp-en {
  display: block; font-family: var(--font-label); font-size: 12px;
  color: var(--text-soft); letter-spacing: 0.06em; margin-bottom: 14px;
}
.mini-plan .mp-price { font-family: var(--font-label); font-size: 30px; font-weight: 700; color: var(--text); line-height: 1.2; }
.mini-plan .mp-price small { font-size: 13px; font-weight: 500; color: var(--text-soft); margin-left: 6px; }
.mini-plan .mp-note { font-size: 14px; color: var(--text-muted); margin-top: 10px; line-height: 1.7; }
@media (max-width: 900px) { .mini-plans { grid-template-columns: 1fr; } }

/* ── 4ステップ ── */
.steps-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.step-4 {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px 22px;
}
.step-4 .s4-num {
  font-family: var(--font-label); font-size: 13px; font-weight: 700;
  color: var(--accent); letter-spacing: 0.1em; display: block; margin-bottom: 10px;
}
.step-4 h3 { font-size: 17px; color: var(--navy); margin-bottom: 8px; }
.step-4 p { font-size: 14.5px; color: var(--text-muted); line-height: 1.75; }
@media (max-width: 900px) { .steps-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .steps-4 { grid-template-columns: 1fr; } }

/* ── 実績の証拠バンド (S.League) ── */
.proof-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 36px;
  align-items: center;
}
.proof-media { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.proof-media img {
  width: 100%; height: 200px; object-fit: cover;
  border-radius: var(--radius-lg); border: 1px solid var(--border);
}
.proof-stats { display: flex; gap: 28px; flex-wrap: wrap; margin: 20px 0 24px; }
.proof-stats .num { font-family: var(--font-label); font-size: 26px; font-weight: 700; color: var(--navy); line-height: 1.2; }
.proof-stats .label { font-size: 13px; color: var(--text-soft); }
@media (max-width: 860px) {
  .proof-grid { grid-template-columns: 1fr; gap: 24px; }
  .proof-media img { height: 160px; }
}

/* ── 中央寄せのボタン行 (最終CTA・中間CTA用) ── */
.cta-row-center { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* ── 料金カード内のプラン別 CTA ── */
.pplan-cta {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 16px; font-size: 14px; font-weight: 600; color: var(--accent);
}
.pplan-cta:hover { text-decoration: underline; }

/* ── フォーム冒頭の LINE 案内 ── */
.form-line-note {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 22px;
  margin-bottom: 28px;
}
.form-line-note p { font-size: 14.5px; color: var(--text-muted); margin: 0; }

/* ── 記事一覧の末尾 CTA (blog / news) ── */
.list-end-cta {
  text-align: center;
  border-top: 1px solid var(--border);
  margin-top: 48px;
  padding-top: 40px;
}
.list-end-cta h2 { font-size: clamp(20px, 2.6vw, 26px); color: var(--navy); margin-bottom: 10px; }
.list-end-cta p { color: var(--text-muted); font-size: 15px; margin: 0 auto 22px; max-width: 560px; }

/* ── 375px で HERO のボタンが3行にならないようにする ──
   .btn は横 padding 20px + font-size 15px。375px (container padding 24px×2 で
   実効 327px) では主CTA が1行を占め、LINE ボタンが2行目に収まる。 */
@media (max-width: 400px) {
  .hero-cta-row { gap: 10px; }
  .hero-cta-row .btn { padding: 12px 16px; font-size: 14.5px; }
}

/* ── フッターの SNS 行 (工程D) ──
   footer-grid と footer-bottom の間に置く1行。Navy #134E6F 面での
   コントラストは footer-col と同じ値を使う。 */
.footer-sns {
  padding-top: 22px;
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px;
  font-size: 14px;
}
/* #8ECDF7 on #134E6F = 5.21:1 (AA) */
.footer-sns-h {
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: #8ECDF7; font-family: var(--font-mono); font-weight: 500;
}
/* rgba(255,255,255,.86) on #134E6F = 7.07:1 (AA) */
.footer-sns a { color: rgba(255, 255, 255, 0.86); transition: color .18s; }
.footer-sns a:hover, .footer-sns a:focus-visible { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* ── Instagram への導線 (写真系ページ・フッター直上) ── */
.ig-note { padding: 0 0 96px; }
.ig-note-in {
  max-width: 760px; margin: 0 auto;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  text-align: center;
}
.ig-note-in h2 { font-size: clamp(19px, 2.4vw, 24px); color: var(--navy); margin: 0 0 10px; }
.ig-note-in p { color: var(--text-muted); font-size: 15px; margin: 0 auto; max-width: 560px; }
.ig-note-cta { margin-top: 20px !important; }
.ig-note-cta a {
  display: inline-block; min-height: 44px; line-height: 26px;
  padding: 9px 22px; border-radius: 999px;
  border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--navy); font-weight: 600; font-size: 15px; text-decoration: none;
  transition: border-color .2s ease, color .2s ease;
}
.ig-note-cta a:hover, .ig-note-cta a:focus-visible { border-color: var(--accent); color: var(--accent); }
@media (max-width: 600px) {
  .ig-note { padding-bottom: 64px; }
  .ig-note-in { padding: 26px 20px; }
}

/* ── lp/links.html (Instagram プロフィール用の分岐ページ) ── */
.lk-wrap { max-width: 520px; margin: 0 auto; padding: 56px 20px 72px; }
.lk-head { text-align: center; margin-bottom: 32px; }
.lk-head .brand { justify-content: center; }
.lk-head h1 { font-size: clamp(22px, 5vw, 28px); color: var(--navy); margin: 18px 0 0; }
.lk-list { display: flex; flex-direction: column; gap: 12px; }
.lk-item {
  display: block; min-height: 44px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 16px 18px;
  text-decoration: none; box-shadow: var(--shadow-sm);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.lk-item:hover, .lk-item:focus-visible {
  border-color: var(--accent); box-shadow: var(--shadow-md); transform: translateY(-1px);
}
.lk-item b { display: block; font-size: 16px; color: var(--navy); font-weight: 600; }
.lk-item span { display: block; font-size: 13.5px; color: var(--text-muted); margin-top: 5px; }
.lk-item.is-line { background: var(--accent-soft); border-color: var(--border-strong); }
.lk-sub {
  margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; gap: 10px 20px; justify-content: center;
}
.lk-sub a {
  font-size: 13.5px; color: var(--text-soft); text-decoration: none;
  min-height: 44px; display: inline-flex; align-items: center;
}
.lk-sub a:hover, .lk-sub a:focus-visible { color: var(--accent); text-decoration: underline; }
.lk-foot { margin-top: 26px; text-align: center; font-size: 12px; color: var(--text-muted); }
.lk-foot a { color: var(--text-muted); }

/* ── 日本語の折り返し (2026-09-05 追加) ─────────────────
   Sho 指摘「PC でも変な場所で改行が入る」への対策。
   word-break: auto-phrase は文節単位で折り返す (Chrome 119+ / 未対応ブラウザは無視)。
   未対応ブラウザ向けには HTML 側の <wbr> と <span class="nb"> で補う。
   overflow-wrap: anywhere は使わない (語中で切れるため)。 */
h1, h2, h3,
.hero-title, .hero-sub, .hero-pill, .eyebrow,
.btn, .faq-q, .faq-q > span, .cmp-btn, .svc-link,
.lk-item b, .nw-clh, .wt-cap {
  word-break: auto-phrase;
  text-wrap: balance;
}
p, .sub, .hero-sub, .faq-a-inner, .cmp-pitch, .mp-note, .lk-item span, .nw-lede {
  word-break: auto-phrase;
  text-wrap: pretty;
}
/* 切れてはいけないまとまりを囲む */
.nb { white-space: nowrap; }
/* 768px 以下でだけ改行する <br class="sp"> */
br.sp { display: none; }
@media (max-width: 768px) {
  br.sp { display: inline; }
}

/* ══════════════════════════════════════════════════════════════
   WEBP 差し替え (2026-09-05 / 工程C)
   image-set() 対応ブラウザには WebP、非対応には従来の JPEG を配る。
   1行目の background-image (JPEG) を 2行目が上書きする。image-set() を
   解釈できないブラウザは 2行目をパースエラーとして捨て、1行目が残る。
   URL は shared.css からの相対パスなので en/ 配下のページでも同じ値で解決する。
   ══════════════════════════════════════════════════════════════ */
.cmp-card.has-photo.theme-eng .cmp-visual::before {
  background-image: url('images/compare/compare-eng.jpg');
  background-image: image-set(url('images/compare/compare-eng.webp') type("image/webp"), url('images/compare/compare-eng.jpg') type("image/jpeg"));
}
.cmp-card.has-photo.theme-photo .cmp-visual::before {
  background-image: url('images/compare/compare-photo.jpg');
  background-image: image-set(url('images/compare/compare-photo.webp') type("image/webp"), url('images/compare/compare-photo.jpg') type("image/jpeg"));
}
.cmp-card.has-photo.theme-mahjong .cmp-visual::before {
  background-image: url('images/compare/compare-mahjong.jpg');
  background-image: image-set(url('images/compare/compare-mahjong.webp') type("image/webp"), url('images/compare/compare-mahjong.jpg') type("image/jpeg"));
}
.cmp-card.has-photo.theme-tour .cmp-visual::before {
  background-image: url('images/compare/compare-tour.jpg');
  background-image: image-set(url('images/compare/compare-tour.webp') type("image/webp"), url('images/compare/compare-tour.jpg') type("image/jpeg"));
}

/* HERO 写真 (--hero-photo) の WebP 差し替え。--hero-photo は暗幕グラデーションと
   2枚重ねなので、image-set 側でも 1枚目のグラデーションを書き直す */
.hero--photo.hero-webp-eng, .hero--photo.hero-webp-photo,
.hero--photo.hero-webp-tour, .hero--photo.hero-webp-services {
  background-image:
    linear-gradient(90deg, var(--scrim-1) 0%, var(--scrim-2) 34%, var(--scrim-3) 58%, var(--scrim-4) 76%),
    var(--hero-photo, linear-gradient(135deg, var(--navy), var(--accent)));
}
.hero--photo.hero-webp-eng {
  background-image:
    linear-gradient(90deg, var(--scrim-1) 0%, var(--scrim-2) 34%, var(--scrim-3) 58%, var(--scrim-4) 76%),
    image-set(url('images/compare/compare-eng.webp') type("image/webp"), url('images/compare/compare-eng.jpg') type("image/jpeg"));
}
.hero--photo.hero-webp-photo {
  background-image:
    linear-gradient(90deg, var(--scrim-1) 0%, var(--scrim-2) 34%, var(--scrim-3) 58%, var(--scrim-4) 76%),
    image-set(url('images/compare/compare-photo.webp') type("image/webp"), url('images/compare/compare-photo.jpg') type("image/jpeg"));
}
.hero--photo.hero-webp-tour {
  background-image:
    linear-gradient(90deg, var(--scrim-1) 0%, var(--scrim-2) 34%, var(--scrim-3) 58%, var(--scrim-4) 76%),
    image-set(url('images/compare/compare-tour.webp') type("image/webp"), url('images/compare/compare-tour.jpg') type("image/jpeg"));
}
.hero--photo.hero-webp-services {
  background-image:
    linear-gradient(90deg, var(--scrim-1) 0%, var(--scrim-2) 34%, var(--scrim-3) 58%, var(--scrim-4) 76%),
    image-set(url('IMG_0078.webp') type("image/webp"), url('IMG_0078.jpg') type("image/jpeg"));
}

/* ギャラリーの <img> を <picture> で包んだため (2026-09-05 / 工程C)。
   picture は既定でインライン要素なので、行送り分の隙間が出ないよう block にする */
.photo-item picture { display: block; }


/* ── ページ横断で共通の定義(3ページ以上で重複していた page-overrides を集約)── */
.contact-hero h1 .accent{background:linear-gradient(120deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.nw-art h2{font-size:21px;color:var(--navy);margin:40px 0 0;line-height:1.55}
.photo-hero{padding:64px 0 32px}
.photo-hero h1 .accent{background:linear-gradient(120deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.photo-hero .sub{font-size:clamp(15px,1.4vw,18px);color:var(--text-muted);margin-top:12px}
.filter-bar{position:sticky;top:56px;z-index:40;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:saturate(180%) blur(12px);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.filter-bar-inner{max-width:var(--container);margin:0 auto;padding:14px 24px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:space-between}
.filter-buttons{display:flex;gap:8px;flex-wrap:wrap}
.filter-btn{padding:10px 16px;min-height:44px;display:inline-flex;align-items:center;flex:0 0 auto;white-space:nowrap;font-size:13px;font-weight:600;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--text-muted);transition:all .2s}
.filter-btn:hover{border-color:var(--text-muted);color:var(--text)}
.filter-btn.active{background:var(--text);color:var(--bg);border-color:var(--text)}
.photo-count{font-family:var(--font-mono);font-size:12px;color:var(--text-soft);text-transform:uppercase;letter-spacing:0.06em}
.gallery{columns:3 280px;column-gap:16px;padding:48px 24px 96px;max-width:1280px;margin:0 auto}
.photo-item{break-inside:avoid;margin-bottom:16px;position:relative;cursor:pointer;overflow:hidden;border-radius:var(--radius);border:1px solid var(--border);background:var(--bg-soft);display:block;transition:transform .25s,box-shadow .25s}
.photo-item:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.photo-item.hidden{display:none}
.photo-item:focus-visible,.filter-btn:focus-visible,.lb-btn:focus-visible,.lb-close:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.photo-item img{width:100%;height:auto;display:block;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.photo-item:hover img{transform:scale(1.03)}
.photo-overlay{position:absolute;inset:0;padding:14px 16px;background:linear-gradient(0deg,rgba(10,42,62,0.65) 0%,rgba(10,42,62,0) 50%);color:#fff;opacity:0;transition:opacity .25s;display:flex;flex-direction:column;justify-content:flex-end}
.photo-item:hover .photo-overlay{opacity:1}
.photo-title{font-size:14px;font-weight:700}
.photo-en{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:0.06em;color:rgba(255,255,255,0.85);margin-top:2px}
.lightbox{display:none;position:fixed;inset:0;background:rgba(10,10,10,0.94);z-index:1000;align-items:center;justify-content:center;padding:24px}
.lightbox.open{display:flex}
.lb-inner{position:relative;max-width:1200px;max-height:100%;width:100%;display:flex;flex-direction:column;align-items:center;gap:16px}
.lb-img-wrap{width:100%;max-height:78vh;display:flex;justify-content:center}
.lb-img{max-width:100%;max-height:78vh;object-fit:contain;border-radius:var(--radius)}
.lb-info{color:#fff;text-align:center;font-family:var(--font-sans);display:flex;flex-direction:column;gap:4px}
.lb-caption{font-size:16px;font-weight:600}
.lb-counter{font-family:var(--font-mono);font-size:12px;color:rgba(255,255,255,0.6);text-transform:uppercase;letter-spacing:0.08em}
.lb-btn{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2);color:#fff;font-size:18px;cursor:pointer;transition:background .2s,border-color .2s;display:grid;place-items:center}
.lb-btn:hover{background:rgba(255,255,255,0.2);border-color:rgba(255,255,255,0.4)}
.lb-prev{left:16px}
.lb-next{right:16px}
.lb-close:hover{background:rgba(255,255,255,0.2)}
.community-card h3{font-size:15px;margin-bottom:6px}
.community-card p{font-size:13px;color:var(--text-muted);line-height:1.6}
.stat-item{text-align:center}
.svc-overview-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:start}
.svc-overview-lead{font-size:clamp(22px,2.4vw,30px);line-height:1.4;letter-spacing:-0.02em;color:var(--text);font-weight:700;margin-bottom:20px}
.svc-overview-lead em{font-style:normal;color:var(--accent)}
.svc-overview-body{font-size:16px;color:var(--text-muted);line-height:1.75}
.offers-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.offer-card{background:var(--surface);padding:28px;border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:0 1px 2px rgba(19,78,111,0.05),0 8px 24px -12px rgba(19,78,111,0.18);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;display:flex;flex-direction:column;gap:8px}
.offer-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--border-strong)}
.offer-card.feature{background:color-mix(in srgb,var(--surface) 88%,var(--accent) 6%);border-left:3px solid var(--accent)}
.offer-card p{font-size:14px;color:var(--text-muted);line-height:1.65;margin-top:6px}
#pricing{background:var(--bg-soft);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.price-box{max-width:760px;margin:0 auto;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:40px 44px;position:relative;overflow:hidden}
.price-box::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--accent),var(--accent-2))}
.price-row{display:flex;justify-content:space-between;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--border);gap:16px}
.price-row:last-of-type{border-bottom:none}
.price-label{font-size:15px;color:var(--text-muted)}
.price-note{font-size:13px;color:var(--text-soft);margin-top:20px;line-height:1.7}
.flow-steps{max-width:820px;margin:0 auto;display:flex;flex-direction:column}
.flow-step{display:grid;grid-template-columns:88px 1fr;gap:32px;padding:28px 0;border-bottom:1px solid var(--border)}
.flow-step:last-child{border-bottom:none}
.flow-step h3{font-size:19px;margin-bottom:8px}
.flow-step p{font-size:15px;color:var(--text-muted);line-height:1.7}
.info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.info-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px}
.info-label{font-family:var(--font-mono);font-size:11px;color:var(--accent);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:6px;display:block}
.info-val{font-size:22px;font-weight:700;color:var(--text);margin-bottom:4px}
.info-sub{font-size:13px;color:var(--text-muted);line-height:1.6}
.schedule-list{list-style:none;max-width:760px;margin:0 auto}
.schedule-item:last-child{border-bottom:none}
.schedule-time{font-family:var(--font-mono);font-size:16px;font-weight:700;color:var(--accent);padding-top:2px}
.schedule-text{font-size:15px;color:var(--text-muted);line-height:1.7}
.schedule-bold{font-weight:700;color:var(--text);display:block;margin-bottom:4px}
.payment-icon{font-size:36px;display:block;margin-bottom:8px}
.payment-desc{font-size:12px;color:var(--text-muted);line-height:1.6}
.payment-detail-title{font-size:16px;font-weight:700;margin-bottom:12px;color:var(--text)}
.payment-detail-body{font-size:14px;color:var(--text-muted);line-height:1.8}
.terms-note{font-size:12px;color:var(--text-soft);line-height:1.7;border-top:1px solid var(--border);padding-top:14px;margin-top:14px}
.terms-note a{color:var(--accent);text-decoration:underline}
.rules-list{list-style:none;max-width:760px;margin:36px auto 0;display:grid;gap:16px}
.rule-item{display:grid;grid-template-columns:52px 1fr;gap:18px;align-items:start;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:22px 24px}
.rule-icon{width:52px;height:52px;font-size:24px;line-height:1;display:flex;align-items:center;justify-content:center;background:var(--bg-muted);border-radius:14px}
.rule-title{font-size:17px;font-weight:700;color:var(--text);display:block;margin-bottom:6px}
.rule-desc{font-size:14px;color:var(--text-muted);line-height:1.85}
.rule-desc strong{color:var(--accent);font-weight:700}
.rules-note{text-align:center;font-size:12px;color:var(--text-soft);margin-top:20px;line-height:1.7}
.sl-hero .hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.sl-gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.svc-overview-aside{border-left:2px solid var(--border-strong);padding-left:28px}
.svc-overview-aside .en-lead{font-size:17px;color:var(--text);line-height:1.55;font-weight:600;letter-spacing:-0.01em;margin-bottom:14px}
.svc-overview-aside .en-body{font-size:13px;color:var(--text-soft);line-height:1.75}

@media (max-width:980px){
  .offers-grid{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:880px){
  .svc-overview-grid{grid-template-columns:1fr;gap:32px}
  .info-grid{grid-template-columns:1fr}
}

@media (max-width:640px){
  .gallery{columns:2 160px;column-gap:10px;padding:32px 12px 64px}
  .photo-item{margin-bottom:10px}
  .lb-prev,.lb-next{width:40px;height:40px}
  .lb-prev{left:8px}
  .lb-next{right:8px}
  .offers-grid{grid-template-columns:1fr}
  .price-box{padding:28px 22px}
  .flow-step{grid-template-columns:56px 1fr;gap:20px}
  .schedule-time{font-size:14px}
  .rule-item{grid-template-columns:44px 1fr;gap:14px;padding:18px 18px}
  .rule-icon{width:44px;height:44px;font-size:20px;border-radius:12px}
  .sl-gallery-grid{grid-template-columns:1fr 1fr}
}

@media (prefers-reduced-motion:reduce){
  .sl-hero .hero-video{display:none}
}

/* 画像の保存操作の制限 (2026-09-06): ドラッグと iOS 長押しメニューを抑える。クリックは通す */
img, picture img { -webkit-user-drag: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }