/* File: assets/css/style.css */
@charset "UTF-8";

/* ==========================================================================
   0. RESET & VARIABLES (Brutalist Corporate)
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

:root {
  --header-height: 72px;
  --container-width: 1080px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* Colors: 徹底した白黒と、1%のネイビー */
  --c-black: #111111;
  --c-dark: #333333;
  --c-gray: #767676;
  --c-light: #f5f5f5;
  --c-white: #ffffff;
  --c-border: #e0e0e0;
  --c-accent: #0f2c59; /* 監査役の厳格なネイビー */
  --c-danger: #d32f2f;

  /* 【追加】3層フォントシステムの定義 */
  --font-base: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif; /* 本文・実務（ゴシック） */
  --font-serif: "Noto Serif JP", serif; /* 宣言・監査報告（明朝） */
  --font-mono: "Space Mono", monospace; /* データ・英数字（等幅） */
}

/* ==============================================
   ベース設定
============================================== */
/* ==============================================
   至高のコーポレート背景（ガラス × 白大理石 × 固定グラデ）
============================================== */

/* ==============================================
   至高のコーポレート背景（ガラス × 白大理石 × 固定グラデ）- Final Version
============================================== */

html {
  font-size: 16px;
  scroll-behavior: smooth;
  height: 100%;
  /* 最背面レイヤー：大理石の質感と固定グラデーション */
  background-color: #ffffff;
  background-image: 
    url("data:image/svg+xml,%3Csvg viewBox='0 0 500 500' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='marble'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.004' numOctaves='4' result='noise'/%3E%3CfeColorMatrix type='matrix' values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 4 -1.8' in='noise' result='colormatrix'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23marble)' opacity='0.07'/%3E%3C/svg%3E"),
    linear-gradient(135deg, #ffffff 0%, rgba(15, 44, 89, 0.05) 100%);
  background-attachment: fixed;
  background-size: 100vw 100vh, 100% 100%;
}

body {
  margin: 0;
  background: transparent;
  color: var(--c-dark);
  font-family: var(--font-base);
  line-height: 1.8;
  letter-spacing: 0.04em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
  z-index: 0; /* ガラス板の基準レイヤー */
  min-height: 100%;
}

/* ==============================================
   テキスト保護の絶対的ルール (Absolute Z-Index Protection)
============================================== */
/* 背景が絶対にテキストへ干渉しないよう、コンテンツ全体を上位レイヤーに強制固定する */
main,footer, .container, .hero-section { 
  position: relative; 
  z-index: 10 !important; /* 背景（マイナス値）と圧倒的な差をつけ、いかなる場合も前面に配置 */
}

/* ==============================================
   疑似リサージュ・極細ガラス軌道 (Lissajous Harmonic Glass Lines)
============================================== */

/* 共通スタイル：ガラスの質感定義（極めて軽量） */
body::before, body::after, main::before, main::after {
  content: "";
  position: fixed; /* スクロール追従 */
  /* 中央付近にアンカーを置き、そこを基準に回転・移動させる */
  top: 50%; left: 50%;
  
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.1) 100%);
  backdrop-filter: blur(16px); /* 面積が極小のため負荷はほぼゼロ */
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 10px 20px rgba(15, 44, 89, 0.05);
  pointer-events: none;
  will-change: transform;
}

/* ガラス1：主軸となる大きなサインカーブ */
body::before {
  width: 160vw;
  height: 2.5vh; /* ガラス感を残す限界の細さ */
  border-radius: 50% 50% 50% 50% / 80% 20% 80% 20%; /* わずかなS字カーブ */
  z-index: -5;
  /* 素数秒（23秒）で調和運動 */
  animation: lissa-1 23s infinite alternate ease-in-out;
}

/* ガラス2：逆位相で交差するコサインカーブ */
body::after {
  width: 150vw;
  height: 2vh;
  border-radius: 50% 50% 50% 50% / 20% 80% 20% 80%;
  z-index: -4;
  /* 素数秒（29秒）で調和運動 */
  animation: lissa-2 29s infinite alternate-reverse ease-in-out;
}

/* ガラス3：鋭角に切り込む極細の軌道 */
main::before {
  width: 140vw;
  height: 1.5vh; /* 最も細い線 */
  border-radius: 50% 50% 50% 50% / 70% 30% 70% 30%;
  z-index: -3;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.2) 100%);
  /* 素数秒（31秒）で調和運動 */
  animation: lissa-3 31s infinite alternate ease-in-out;
}

/* ガラス4：奥行きを作る遠景の軌道 */
main::after {
  width: 130vw;
  height: 2vh;
  border-radius: 50% 50% 50% 50% / 30% 70% 30% 70%;
  z-index: -6; /* 最奥 */
  opacity: 0.5;
  /* 素数秒（37秒）で調和運動 */
  animation: lissa-4 37s infinite alternate-reverse ease-in-out;
}

/* リサージュ軌道アニメーション
  異なる周期のXY移動と回転を組み合わせることで、
  中心付近で永遠に繰り返さない複雑な交差（数学的曲線）を生み出す
*/
@keyframes lissa-1 {
  0% { transform: translate(-40%, -60%) rotate(-35deg) skewX(10deg); }
  100% { transform: translate(-60%, -40%) rotate(15deg) skewX(-5deg); }
}
@keyframes lissa-2 {
  0% { transform: translate(-60%, -50%) rotate(45deg) skewX(-15deg); }
  100% { transform: translate(-40%, -50%) rotate(-10deg) skewX(10deg); }
}
@keyframes lissa-3 {
  0% { transform: translate(-50%, -40%) rotate(-60deg); }
  100% { transform: translate(-50%, -60%) rotate(30deg); }
}
@keyframes lissa-4 {
  0% { transform: translate(-30%, -30%) rotate(20deg); }
  100% { transform: translate(-70%, -70%) rotate(-25deg); }
}

/* スマホ表示時の最適化（配置のズレを防ぎ、確実に画面全体を覆う） */
@media (max-width: 768px) {
  /* 縦長のスマホ画面で回転・移動しても線の端（余白）が見えないよう、長さを「画面の最大辺の3倍」に拡張 */
  body::before { width: 300vmax; height: 1.5vh; }
  body::after { width: 300vmax; height: 1.2vh; }
  main::before { width: 300vmax; height: 1vh; } 
  main::after { display: none; } /* 情報過多と負荷を避けるため1本減らす */
}
body.scroll-lock { overflow: hidden; height: 100vh; }

img, svg { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; transition: opacity 0.3s; }
@media(hover:hover){ a:not(.btn):hover { opacity: 0.6; } }

/* ==========================================================================
   UTILITIES & TYPOGRAPHY
   ========================================================================== */
h1, h2, h3, h4 { color: var(--c-black); font-weight: 700; margin: 0; line-height: 1.4; }
p { margin: 0 0 1.5rem; }

/* 【追加】① 企業姿勢を示す大見出しにのみ明朝体を適用し「報告書・規約」の重みを出す */
.hero-title-massive,
.editorial-title,
.statement-catch,
.contact-title,
.legal-title,
.terms-title,
.results-title {
  font-family: var(--font-serif);
  font-weight: 900;
  letter-spacing: 0.02em;
}

/* 【追加】② 英語タイトル、数字、ラベルなどに等幅フォントを適用して「監査・データ解析感」を出す */
.page-title,
.dir-title,
.focus-title,
.label-tag,
.num,
.audit-number,
.gantt-day,
.policy-label,
.loading-text,
.log-time,
.log-type,
.footer-heading {
  font-family: var(--font-mono);
  letter-spacing: 0.05em;
}

.container { width: 100%; max-width: var(--container-width); margin: 0 auto; padding: 0 24px; }
.section { padding: 80px 0; }
.section-border-top { border-top: 1px solid var(--c-border); }
.bg-light { background-color: var(--c-light); }
.section-dark { background-color: var(--c-black); color: var(--c-white); padding: 100px 0; }

.text-main { color: var(--c-black); }
.text-muted { color: var(--c-gray); }
.text-danger { color: var(--c-danger); }
.text-accent { color: var(--c-accent); }
.fw-bold { font-weight: 700; }
.u-mb-16 { margin-bottom: 16px; }
.u-mb-24 { margin-bottom: 24px; }
.u-mb-40 { margin-bottom: 40px; }
.text-center { text-align: center; }
.text-white{color: var(--c-white) !important;}

.pc-only { display: none !important; }
.sp-only { display: block !important; }
@media (min-width: 769px) { 
  .pc-only { display: block !important; } 
  .sp-only { display: none !important; } 
}

/* ==========================================================================
   BUTTONS & LABELS
   ========================================================================== */
.btn {
  display: inline-flex; justify-content: center; align-items: center;
  min-height: 56px; padding: 0 40px; font-size: 1rem; font-weight: 700;
  border-radius: 4px; /* 鋭い角丸 */
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1); cursor: pointer; white-space: nowrap;
}
.btn-primary { background-color: var(--c-black); color: var(--c-white); border: 1px solid var(--c-black); }
.btn-outline { background-color: transparent; color: var(--c-black); border: 1px solid var(--c-black); }
.btn-large { min-height: 64px; font-size: 1.1rem; }
.block-mobile { width: 100%; }

@media (min-width: 769px) { .block-mobile { width: auto; } }
@media (hover: hover) {
  .btn-primary:hover { background-color: var(--c-accent); border-color: var(--c-accent); }
  .btn-outline:hover { background-color: var(--c-light); }
}

.label-tag {
  display: inline-block; padding: 6px 12px; font-size: 0.75rem; font-weight: bold; letter-spacing: 0.1em;
  border: 1px solid var(--c-border); color: var(--c-gray); margin-bottom: 24px;
}
.tag-inverted { border-color: rgba(255,255,255,0.3); color: var(--c-white); }

/* ==========================================================================
   HEADER (バグ修正・完璧な制御)
   ========================================================================== */
.header {
  position: fixed; top: 0; left: 0; width: 100%; height: var(--header-height);
  background: rgba(255,255,255,0.95); border-bottom: 1px solid var(--c-border);
  z-index: 1000; backdrop-filter: blur(8px);
}
.header-inner { height: 100%; display: flex; justify-content: space-between; align-items: center; padding: 0 24px; max-width: var(--container-width); margin: 0 auto; }
.logo { display: flex; align-items: center; gap: 12px; }
.logo__text { font-size: 1.2rem; font-weight: 800; letter-spacing: 0.05em; color: var(--c-black); }

/* Nav PC */
.nav-list { display: none; }
@media (min-width: 769px) {
  .nav-list { display: flex; align-items: center; gap: 32px; }
  .nav-list ul { list-style: none; display: flex; gap: 32px; margin: 0; padding: 0; }
  .nav-link { font-size: 0.9rem; font-weight: bold; color: var(--c-dark); }
  .nav-link.active { color: var(--c-accent); }
  .nav-cta { min-height: 40px; padding: 0 20px; font-size: 0.85rem; }
}

/* Nav SP Hamburger */
.menu-toggle {
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
  width: 48px; height: 48px; background: none; border: none; cursor: pointer; z-index: 1002;
}
@media (min-width: 769px) { .menu-toggle { display: none; } }
.bar { width: 24px; height: 2px; background-color: var(--c-black); transition: 0.3s; }
.menu-toggle.is-active .bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle.is-active .bar:nth-child(2) { opacity: 0; }
.menu-toggle.is-active .bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Nav Overlay */
.nav-overlay {
  position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: var(--c-white);
  z-index: 1001; display: flex; flex-direction: column; justify-content: center; align-items: center;
  opacity: 0; visibility: hidden; transition: 0.3s;
}
.nav-overlay.is-open { opacity: 1; visibility: visible; }
.nav-overlay ul { list-style: none; padding: 0; text-align: center; }
.nav-overlay .nav-link { font-size: 1.5rem; font-weight: bold; color: var(--c-black); display: block; padding: 16px; }

/* ==========================================================================
   EDITORIAL LAYOUTS (脱・箱型)
   ========================================================================== */
.editorial-title { font-size: clamp(2rem, 4vw, 2.5rem); margin-bottom: 16px; letter-spacing: -0.02em; }
.editorial-subtitle { font-size: 1.05rem; color: var(--c-gray); margin-bottom: 48px; }

/* Hero Split */
/* ==============================================
   Hero Section (Transparent & Marquee)
============================================== */

/* --- 真ん中の非対称エディトリアルレイアウト --- */
.hero-split-layout {
  display: grid;
  grid-template-columns: 1fr; /* スマホでは縦並び1列 */
  gap: 40px;
  align-items: start;
  width: 100%;
}

@media (min-width: 769px) {
  .hero-split-layout {
    grid-template-columns: 1.2fr 1fr; /* PCでは左の見出しエリアを少し広く取る */
    gap: 60px;
    align-items: end; /* 下端を揃えることで空間に知的で引き締まった印象を生む */
  }
}

.hero-split-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* 完全に左寄せ */
}

/* 既存の中央揃えを上書きして左寄せにする */
.hero-split-left .hero-title-massive {
  text-align: left;
  margin-bottom: 0; /* 下の余白はグリッドの整列に任せる */
}

/* リード文を収納する「仕様書」のようなパネル */
.lead-panel {
  border-left: 2px solid var(--c-black);
  padding-left: 24px;
}

.panel-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: bold;
  color: var(--c-gray);
  letter-spacing: 0.15em;
  margin-bottom: 12px;
}

/* 既存の中央揃えを上書きして左寄せにする */
.hero-split-right .hero-lead {
  text-align: left;
  margin: 0;
}

/* 背景画像やフィルターをなくし、大理石と動くガラス線を完全に見せる */
.hero-section.hero-transparent { 
  position: relative;
  padding-top: calc(var(--header-height) + 80px); 
  padding-bottom: 80px; 
  min-height: 80vh; 
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: transparent; 
  overflow: hidden; 
}

.hero-section.hero-transparent .container {
  position: relative;
  z-index: 2; 
  margin-bottom: 40px; 
}

.hero-centered { 
  max-width: 800px; 
  margin: 0 auto; 
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-centered .label-tag {
  margin-bottom: 24px;
}

.hero-title-massive { 
  font-size: clamp(2rem, 5vw, 4rem); 
  font-weight: 900; 
  line-height: 1.4; 
  margin-bottom: 32px; 
  letter-spacing: 0.05em; 
  color: var(--c-black);
  text-align: center;
}

.hero-lead { 
  font-size: 1.1rem; 
  line-height: 1.8; 
  color: var(--c-dark); 
  font-weight: bold;
  text-align: center;
}

/* --- Heroセクション専用：ローディング画面明けのアニメーション --- */
/* ローディング画面が消える時間（0.6秒）を考慮し、開始を意図的に遅らせる */

.hero-anim-up {
  opacity: 0;
  /* 0.6秒待ってから、0.8秒かけて下から現れる */
  animation: heroFadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.6s forwards;
}

.hero-anim-side {
  opacity: 0;
  /* 左側が出終わるタイミング（1.0秒後）に、右からスライドしてくる */
  animation: heroFadeSide 3s cubic-bezier(0.22, 1, 0.36, 1) 1.0s forwards;
}

/* --- 悩みバッジを下から登場させる（3番目に出現） --- */
.hero-anim-bottom {
  opacity: 0;
  /* 左側（0.6s開始）、右側（1.0s開始）に続き、1.4s後に下から現れる */
  animation: heroFadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 1.4s forwards;
}

@keyframes heroFadeUp {
  0% { opacity: 0; transform: translateY(30px) scale(0.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes heroFadeSide {
  0% { opacity: 0; transform: translateX(40px); }
  100% { opacity: 1; transform: translateX(0); }
}


/* --- 流れる悩み 2行版（ガラスの角丸長方形・マーキー） --- */
/* コンテナ全体にグラデーションマスクをかける */
.pain-marquee-container {
  display: flex;
  flex-direction: column;
  gap: 16px; /* 1行目と2行目の隙間 */
  width: 100vw;
  max-width: 100%;
  overflow: hidden;
  z-index: 2;
  mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
  padding: 10px 0;
}

.pain-marquee-wrapper {
  display: flex;
  width: 100%;
}

.pain-marquee {
  display: flex;
  gap: 24px;
  padding-right: 24px;
  width: max-content;
  /* 1行目は右から左へ（少し遅めにして落ち着きを出す） */
  animation: marquee-scroll 35s linear infinite; 
}

/* 2行目専用：逆方向（左から右）かつ、少し速度を変えて単調さを消す */
.pain-marquee.marquee-reverse {
  animation: marquee-scroll-reverse 40s linear infinite;
}

/* PCでマウスを乗せたら一時停止する */
.pain-marquee-container:hover .pain-marquee {
  animation-play-state: paused;
}

/* ガラス感のある角丸長方形バッジ */
.pain-item {
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 8px 24px rgba(15, 44, 89, 0.06);
  border-radius: 50px;
  padding: 16px 32px;
  font-size: 0.95rem;
  font-weight: bold;
  color: var(--c-black);
  white-space: nowrap;
  display: flex;
  align-items: center;
}

.pain-item::before {
  content: "!";
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  background: var(--c-black);
  color: var(--c-white);
  border-radius: 50%;
  font-size: 0.75rem;
  margin-right: 12px;
}

@keyframes marquee-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

/* 逆方向のアニメーションキーフレーム */
@keyframes marquee-scroll-reverse {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(0); }
}

/* スマホ表示時の最適化 */
@media (max-width: 768px) {
  .pain-marquee-container {
    gap: 12px;
  }
  .pain-item {
    padding: 12px 24px;
    font-size: 0.85rem;
  }
}

/* ==============================================
   FOCUS AREA (ターゲット業界リスト) - PC限定
============================================== */
.focus-area {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid rgba(15, 44, 89, 0.2); 
  width: 100%;
  max-width: 600px;
}

.focus-title {
  font-size: 0.85rem;
  font-weight: 900;
  letter-spacing: 0.15em;
  color: var(--c-gray);
  margin-bottom: 16px;
}

.focus-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  gap: 32px;
}

.focus-list li {
  font-size: 0.95rem;
  font-weight: bold;
  color: var(--c-accent); 
  position: relative;
  padding-left: 16px;
}

.focus-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  background-color: var(--c-accent);
  border-radius: 50%;
}

/* スマホ表示時の最適化 */
@media (max-width: 768px) {
  .hero-section.hero-bg-image { 
    min-height: 70vh;
    padding-top: calc(var(--header-height) + 40px); 
    padding-bottom: 60px; 
  }
  .hero-title-massive {
    font-size: 1.75rem; 
    line-height: 1.5;
  }
  .hero-lead {
    font-size: 0.95rem;
  }
  /* スマホではターゲットエリアを確実に非表示にする */
  .focus-area, 
  .pc-only {
    display: none !important;
  }
}

/* Audit List (巨大ナンバリング + 罫線) */
.audit-list { border-top: 1px solid var(--c-black); }
.audit-item { display: grid; grid-template-columns: 80px 1fr; gap: 24px; padding: 40px 0; border-bottom: 1px solid var(--c-border); }
.audit-number { font-size: 3rem; font-weight: 900; color: var(--c-light); -webkit-text-stroke: 1px var(--c-border); line-height: 1; }
.audit-title { font-size: 1.25rem; margin-bottom: 16px; }
.audit-text { color: var(--c-dark); }
@media (min-width: 769px) { .audit-item { grid-template-columns: 120px 1fr; gap: 40px; } .audit-number { font-size: 5rem; } }

/* Solution Flow */
.solution-grid { display: grid; grid-template-columns: 1fr; gap: 40px; }
.solution-flow { border-left: 1px solid var(--c-black); padding-left: 24px; margin-left: 8px; }
.flow-step { position: relative; margin-bottom: 40px; }
.flow-dot { position: absolute; left: -30px; top: 6px; width: 11px; height: 11px; background: var(--c-black); border-radius: 50%; }
.flow-title { font-size: 1.1rem; margin-bottom: 8px; }
.flow-text { color: var(--c-dark); font-size: 0.95rem; margin: 0; }
.solution-lead { font-size: 1.5rem; font-weight: bold; margin-bottom: 24px; line-height: 1.5; }
@media (min-width: 769px) { .solution-grid { grid-template-columns: 1fr 1fr; gap: 64px; } }

/* Offer (黒背景) */
.offer-editorial { text-align: center; max-width: 800px; margin: 0 auto; }
.offer-title { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 24px; }
.offer-desc { font-size: 1.1rem; color: #ccc; margin-bottom: 40px; }
.offer-note { font-size: 0.85rem; color: #888; margin-top: 16px; }

/* Compliance */
.compliance-grid { display: grid; grid-template-columns: 1fr; gap: 40px; }
.compliance-box { border: 1px solid var(--c-black); padding: 32px; }
.compliance-box-title { font-size: 1.1rem; margin-bottom: 16px; }
.compliance-list { padding-left: 20px; color: var(--c-dark); margin-bottom: 24px; }
.compliance-alert { background: var(--c-danger); color: white; padding: 12px; text-align: center; font-weight: bold; font-size: 0.9rem; }
@media (min-width: 769px) { .compliance-grid { grid-template-columns: 1fr 1fr; align-items: start; } }

/* Principles & Footer */
.principles-area { border-top: 1px solid var(--c-border); padding: 40px 0; }
.principles-grid { display: grid; grid-template-columns: 1fr; gap: 32px; text-align: center; }
.principle-item p { font-size: 0.85rem; color: var(--c-gray); margin-top: 8px; }
@media (min-width: 769px) { .principles-grid { grid-template-columns: repeat(3, 1fr); gap: 40px; } }

.footer { background: var(--c-light); border-top: 1px solid var(--c-border); padding: 60px 0 40px; }
.footer-top { display: grid; grid-template-columns: 1fr; gap: 40px; }
.footer-company-details { font-size: 0.85rem; color: var(--c-gray); }
.footer-links { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.footer-heading { font-size: 0.85rem; letter-spacing: 0.1em; margin-bottom: 16px; }
.footer-links ul { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 12px; font-size: 0.85rem; color: var(--c-dark); }
.footer-bottom { border-top: 1px solid var(--c-border); padding-top: 24px; margin-top: 40px; text-align: center; font-size: 0.75rem; color: var(--c-gray); }
@media (min-width: 769px) { .footer-top { grid-template-columns: 1fr 2fr; } }

/* ==============================================
   SP Fixed CTA (右下フローティング・カプセル型)
============================================== */
/* モバイルでのスクロール時の下部余白確保 */
@media (max-width: 768px) { 
  body { padding-bottom: 120px; } 
}

/* フローティングコンテナ（右下固定） */
.sp-fixed-cta { 
  position: fixed; 
  bottom: calc(24px + var(--safe-bottom)); 
  right: 16px; /* 右下に配置 */
  left: auto; /* 全幅設定を解除 */
  width: auto; 
  padding: 0; 
  background: transparent; 
  border: none; 
  z-index: 999; 
  
  /* ボタンを縦に並べるためのFlexbox */
  display: flex;
  flex-direction: column; 
  gap: 12px;
  align-items: flex-end; /* 右揃え */
  
  /* 【重要】透明なコンテナが背後のテキスト選択を邪魔しないようにする */
  pointer-events: none; 
}

/* 中のカプセル型ボタン */
.sp-fixed-cta .btn {
  pointer-events: auto; /* ボタン本体のみタップ可能にする */
  border-radius: 50px !important; /* 完全なカプセル型 */
  padding: 0 24px;
  min-height: 52px;
  box-shadow: 0 10px 25px rgba(15, 44, 89, 0.2); /* 監査カラーの影で浮遊感を出す */
  font-size: 0.9rem;
  font-weight: 700;
  white-space: nowrap;
  margin: 0;
  width: auto; /* テキスト幅に合わせる */
}

/* メインボタン（画像の上部オレンジに相当）：REMEDORAの黒でソリッドに */
.sp-fixed-cta .btn-primary {
  background: var(--c-black);
  color: var(--c-white);
  border: 1px solid var(--c-black);
}

/* サブボタン（画像の下部白に相当）：白背景＋ガラス質感で高級感を出す */
.sp-fixed-cta .btn-secondary {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--c-black);
  border: 1px solid var(--c-border);
}

/* PCでは非表示 */
@media (min-width: 769px) { 
  .sp-fixed-cta { display: none !important; } 
}

/* Load Screen */
#loading-screen { position: fixed; inset: 0; background: var(--c-white); z-index: 9999; display: flex; flex-direction: column; justify-content: center; align-items: center; transition: opacity 0.5s; }
#loading-screen.is-hidden { opacity: 0; pointer-events: none; }
.loading-text { font-weight: bold; letter-spacing: 0.1em; font-family: monospace; }


/* ==========================================================================
   SERVICE PAGE: SPECIFICATION (仕様書レイアウト・アップデート版)
   ========================================================================== */
.page-header { padding: 120px 0 40px; border-bottom: 2px solid var(--c-black); margin-bottom: 60px; }
.page-title { font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 900; letter-spacing: -0.02em; text-transform: uppercase; line-height: 1.1; }
.page-lead { font-size: 1.1rem; color: var(--c-gray); margin-top: 16px; font-weight: bold; }

.doc-layout { display: flex; flex-direction: column; gap: 40px; padding-bottom: 100px; }

@media (min-width: 992px) {
  .doc-layout { flex-direction: row; gap: 80px; align-items: flex-start; }
  .doc-sidebar { width: 220px; position: sticky; top: calc(var(--header-height) + 40px); flex-shrink: 0; }
  .doc-content { flex-grow: 1; min-width: 0; }
}

/* 左側固定メニュー */
.doc-nav { list-style: none; padding: 0; margin: 0; border-left: 2px solid var(--c-border); }
.doc-nav li a { display: block; padding: 10px 20px; color: var(--c-gray); font-weight: bold; font-size: 0.9rem; border-left: 2px solid transparent; margin-left: -2px; transition: 0.3s; }
.doc-nav li a:hover, .doc-nav li a.active { color: var(--c-black); border-color: var(--c-black); }

/* 右側コンテンツセクション */
.doc-section { margin-bottom: 100px; scroll-margin-top: calc(var(--header-height) + 40px); }
.doc-section-title { font-size: 1.75rem; border-bottom: 1px solid var(--c-border); padding-bottom: 16px; margin-bottom: 40px; letter-spacing: 0.05em; font-weight: 900; }

/* ==============================================
   01. 緻密な比較テーブル (スマホ縦サイズ極限圧縮版)
============================================== */
.spec-table-wrapper { overflow-x: auto; margin-bottom: 40px; border: 1px solid var(--c-border); }
.spec-table { width: 100%; min-width: 700px; border-collapse: collapse; text-align: left; font-size: 0.9rem; }
.spec-table th, .spec-table td { padding: 20px; border-bottom: 1px solid var(--c-border); border-right: 1px solid var(--c-border); }
.spec-table th:last-child, .spec-table td:last-child { border-right: none; }
.spec-table thead th { background: var(--c-light); font-weight: 900; color: var(--c-black); white-space: nowrap; font-size: 1rem; }
.spec-table tbody th { background: #fafafa; font-weight: 700; width: 25%; }
.spec-table tbody tr:last-child td, .spec-table tbody tr:last-child th { border-bottom: none; }
.spec-table .check { color: var(--c-accent); font-weight: 900; font-size: 1.2rem; }
.spec-table .cross { color: var(--c-gray); font-weight: bold; }
.spec-table .highlight-col { background-color: rgba(15, 44, 89, 0.03); }

/* --- テーブル横スクロールのヒント（スマホ専用） --- */
.table-scroll-hint {
  display: none; 
  text-align: right;
  font-size: 0.8rem;
  color: var(--c-gray);
  margin-bottom: 8px;
  font-weight: bold;
  animation: flashHint 2s infinite;
}

@keyframes flashHint {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* ==============================================
   スマホ表示時の設定（縦サイズを削り1画面に収める）
============================================== */
@media (max-width: 768px) {
  .table-scroll-hint {
    display: block;
  }
  
  .spec-table-wrapper {
    -webkit-overflow-scrolling: touch;
  }
  .spec-table-wrapper::-webkit-scrollbar {
    height: 4px; /* スクロールバーを細くして場所を取らせない */
  }
  .spec-table-wrapper::-webkit-scrollbar-track {
    background: var(--c-light);
  }
  .spec-table-wrapper::-webkit-scrollbar-thumb {
    background: var(--c-gray);
    border-radius: 4px;
  }

  /* テーブルのサイズ感圧縮 */
  .spec-table {
    min-width: 520px; /* 横スクロールはするが、元の700pxより縮めてコンパクトに */
    font-size: 0.75rem; /* 全体の文字サイズを縮小 */
  }
  
  /* セルの余白と行間を極限まで削る */
  .spec-table th, .spec-table td {
    padding: 10px 8px; /* 縦の余白をPC時の半分に */
    line-height: 1.3;
  }
  
  /* ヘッダーの調整 */
  .spec-table thead th {
    font-size: 0.8rem;
    padding: 12px 8px;
    white-space: normal; /* 折り返しを許容して横幅を節約 */
  }
  
  /* 左側の項目列の幅調整 */
  .spec-table tbody th {
    width: 28%;
    font-size: 0.75rem;
  }
  
  /* 記号やバッジの縮小 */
  .spec-table .check { font-size: 1rem; }
  .spec-table .cross { font-size: 0.9rem; }
  .spec-table .label-tag {
    font-size: 0.6rem;
    padding: 2px 4px;
    margin: 4px 0 0 !important; /* 上の隙間を詰める */
  }
  
  /* HTML直書きのインラインスタイル（1.5remなど）を強制上書きして縦幅の膨張を防ぐ */
  .spec-table strong { font-size: 1.05rem !important; }
  
  /* smallタグ（補足文）をブロック化して改行させ、スッキリ見せる */
  .spec-table small { 
    display: block; 
    font-size: 0.65rem; 
    margin-top: 2px; 
    line-height: 1.2;
  }
}

/* ==============================================
   Service Page: Zero-Interface Typography UI (完全統合・最終完成版)
============================================== */

/* --- 02 & 03. エッジ・トゥ・エッジ（箱のないアコーディオン全体） --- */
.brutal-folio-group {
  border-top: 2px solid var(--c-black);
}

/* ヘッダー（ボタン）のスタイル */
.folio-header-override {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(15, 44, 89, 0.1) !important;
  border-radius: 0 !important;
  /* 左右に余白（24px）を持たせ、画面端への張り付きを防ぐ */
  padding: 48px 24px !important; 
  box-shadow: none !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100%;
}

.folio-header-override:hover { background: rgba(15, 44, 89, 0.02) !important; }
.folio-header-override.is-active { border-bottom-color: var(--c-black) !important; }

.folio-header-left { display: flex; align-items: baseline; gap: 16px; text-align: left; }
.folio-num { font-family: var(--font-mono); font-size: 1.5rem; font-weight: 900; color: var(--c-accent); }
.folio-name { font-size: clamp(1.2rem, 3vw, 1.75rem); font-weight: 900; color: var(--c-black); margin: 0; letter-spacing: 0.02em; }
.folio-subname { font-size: 0.9rem; color: var(--c-gray); font-weight: normal; margin-left: 8px; }

.folio-header-right { display: flex; align-items: center; gap: 24px; }
.folio-price { font-family: var(--font-mono); font-size: 1.1rem; font-weight: bold; }

@media (max-width: 768px) {
  /* スマホでも左右に安全な余白（16px）を確保 */
  .folio-header-override { padding: 32px 16px !important; } 
  .folio-header-left { gap: 12px; }
  .folio-num { font-size: 1.25rem; }
  .folio-price { display: none; } 
}

/* --- アコーディオンの各項目（外枠）の余白設定 --- */
.folio-item {
  /* 下方向の余白を大幅に拡張（16pxから48pxへ） */
  margin-bottom: 30px !important; 
  border-bottom: none !important; /* 余計な線を消して余白を際立たせる */
}

@media (min-width: 769px) {
  .folio-item {
    /* PCではさらに大胆に広げ、1つずつのプランを独立させる */
    margin-bottom: 80px !important; 
  }
}

/* --- 中身の展開エリア --- */
.folio-collapse-override {
  background: transparent !important;
}

.folio-body {
  /* ヘッダーの左端と文字の開始位置を綺麗に揃える */
  padding: 48px 24px 80px; 
}

@media (max-width: 768px) {
  /* スマホでも左右に16pxの余白を確保 */
  .folio-body { padding: 32px 16px 64px; }
}

/* 情報を横に散らして圧迫感を消すグリッド */
.folio-grid {
  display: grid;
  gap: 64px; 
}

@media (min-width: 769px) {
  .folio-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 80px; 
  }
}

/* 追加オプション用の「PC時のみ2列」にするグリッド */
.folio-grid-half {
  gap: 48px; /* オプションは項目が少ないため少し隙間を詰める */
}

@media (min-width: 769px) {
  .folio-grid-half {
    grid-template-columns: repeat(2, 1fr);
    gap: 80px;
  }
}

.folio-col { display: flex; flex-direction: column; }
.folio-col.border-danger { border-left: 2px solid var(--c-danger); padding-left: 24px; }

/* 見出し（ラベル） */
.folio-label {
  font-family: var(--font-base);
  font-size: 1rem;
  font-weight: 900;
  color: var(--c-accent);
  letter-spacing: 0.05em;
  padding-left: 0;
  border-left: none;
  border-bottom: 1px solid rgba(15, 44, 89, 0.1);
  padding-bottom: 16px;
  margin-bottom: 24px;
}
.folio-label.text-danger { color: var(--c-danger); border-bottom-color: rgba(211, 47, 47, 0.2); }

/* 本文・リスト */
.folio-text { font-size: 0.95rem; line-height: 2; color: var(--c-dark); margin: 0; }
.folio-list { list-style: none; padding: 0; margin: 0; }
.folio-list li { position: relative; padding-left: 16px; margin-bottom: 20px; font-size: 0.95rem; line-height: 1.9; color: var(--c-dark); }
/* 箇条書きのマークを「小さなドット」に変更 */
.folio-list li::before { content: ""; position: absolute; left: 0; top: 12px; width: 4px; height: 4px; border-radius: 50%; background: var(--c-accent); opacity: 0.6; }

.folio-link { display: inline-block; margin-top: 16px; font-weight: bold; color: var(--c-accent); text-decoration: underline; text-underline-offset: 6px; }


/* --- 04 & 05. ブループリントUI (図面風境界線) --- */
.blueprint-layout { display: grid; gap: 40px; position: relative; padding: 24px 0; }

@media (min-width: 769px) {
  .blueprint-layout { grid-template-columns: 1fr 2px 1fr; gap: 64px; align-items: stretch; }
}

.blueprint-line { display: none; }
@media (min-width: 769px) {
  .blueprint-line { display: block; background: repeating-linear-gradient(to bottom, var(--c-border) 0, var(--c-border) 8px, transparent 8px, transparent 16px); }
}

.blueprint-head { 
  font-family: var(--font-base); 
  font-size: 1.5rem; 
  font-weight: 900; 
  letter-spacing: 0.05em; 
  margin-bottom: 40px; 
  line-height: 1.4; 
  padding-bottom: 16px;
  border-bottom: 2px solid var(--c-black); 
}
.blueprint-head.text-accent { border-bottom-color: var(--c-accent); }
.blueprint-head.text-danger { border-bottom-color: var(--c-danger); }

.blueprint-head span { display: block; font-size: 0.9rem; letter-spacing: 0; margin-top: 8px; opacity: 0.8; font-weight: bold; }

.blueprint-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 24px; }
.blueprint-list li { position: relative; padding-left: 32px; }
.blueprint-list li::before { position: absolute; left: 0; top: -2px; font-family: var(--font-mono); font-size: 1.2rem; font-weight: 900; }

.check-list li::before { content: "✔"; color: var(--c-accent); }
.cross-list li::before { content: "✕"; color: var(--c-gray); }

.blueprint-list strong { display: block; font-size: 1.05rem; color: var(--c-black); margin-bottom: 8px; }
.blueprint-list p { font-size: 0.9rem; color: var(--c-dark); line-height: 1.7; margin: 0; }

@media (max-width: 768px) {
  .blueprint-layout > div:last-child { padding-top: 40px; border-top: 2px dashed rgba(15, 44, 89, 0.2); }
}



/* --- 06. Q&A (開閉式ガラスアコーディオン) --- */
.faq-header-override {
  padding: 24px;
}

.glass-faq-q {
  font-size: 1rem;
  font-weight: bold;
  color: var(--c-black);
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 0;
  text-align: left;
  line-height: 1.5;
}

.glass-faq-q::before {
  content: "Q.";
  color: var(--c-accent);
  font-family: var(--font-mono);
  font-weight: 900;
  font-size: 1.2rem;
  line-height: 1;
}

.glass-faq-body {
  padding: 0 24px 24px 24px;
}

.glass-faq-a {
  font-size: 0.95rem;
  color: var(--c-dark);
  line-height: 1.8;
  display: flex;
  gap: 12px;
  margin: 0;
  border-top: 1px dashed rgba(15, 44, 89, 0.15);
  padding-top: 20px;
}

.glass-faq-a::before {
  content: "A.";
  color: var(--c-gray);
  font-family: var(--font-mono);
  font-weight: 900;
  font-size: 1.2rem;
  line-height: 1.2;
}

@media (max-width: 768px) {
  .faq-header-override { padding: 20px; }
  .glass-faq-q { font-size: 0.95rem; }
  .glass-faq-body { padding: 0 20px 20px 20px; }
}
/* ==========================================================================
   MONITOR PAGE: AGREEMENT (契約書・同意書レイアウト)
   ========================================================================== */

/* ヒーロー：契約書風 */
.hero-agreement { padding-top: calc(var(--header-height) + 60px); padding-bottom: 60px; border-bottom: 4px solid var(--c-black); text-align: center; }
.hero-agreement .tag-inverted { background: var(--c-black); color: var(--c-white); font-size: 0.9rem; padding: 8px 16px; margin-bottom: 32px; border: none; }

/* ==============================================
   Monitor Page: Glass Document UI (モニター要項)
============================================== */

/* --- 01. スケジュール（ガラス・タイムライン） --- */
.glass-timeline {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
  padding-left: 24px;
}

/* 縦のガイドライン */
.glass-timeline::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 7px;
  width: 2px;
  background: rgba(15, 44, 89, 0.15); /* うっすらとしたネイビーの線 */
}

.glass-timeline-item {
  position: relative;
  margin-bottom: 40px;
}

.glass-timeline-item:last-child {
  margin-bottom: 0;
}

/* 光るノード（点） */
.glass-timeline-node {
  position: absolute;
  left: -24px;
  top: 12px; /* カードの上端に合わせる */
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--c-accent);
  border: 3px solid var(--c-white);
  box-shadow: 0 0 0 4px rgba(15, 44, 89, 0.1);
  transform: translateX(-50%);
}

/* ガラスカード本体 */
.glass-timeline-content {
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 8px 32px rgba(15, 44, 89, 0.04);
  position: relative;
}

.glass-timeline-meta {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 900;
  color: var(--c-accent);
  letter-spacing: 0.1em;
  display: block;
  margin-bottom: 8px;
}

.glass-timeline-title {
  font-size: 1.15rem;
  font-weight: bold;
  color: var(--c-black);
  margin-bottom: 12px;
}

.glass-timeline-text {
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--c-dark);
  margin: 0;
}

@media (min-width: 769px) {
  .glass-timeline { padding-left: 40px; }
  .glass-timeline::before { left: 15px; }
  .glass-timeline-node { left: -25px; top: 16px; width: 20px; height: 20px; }
  .glass-timeline-content { padding: 32px; }
}

/* --- 02. 提供範囲と対象外（ツイン・ガラスパネル） --- */
.glass-comparison {
  display: grid;
  gap: 24px;
  max-width: 960px;
  margin: 0 auto;
}

@media (min-width: 769px) {
  .glass-comparison { grid-template-columns: 1fr 1fr; }
}

.glass-comp-card {
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 8px 32px rgba(15, 44, 89, 0.04);
}

.comp-do {
  border-top: 4px solid var(--c-accent); /* ネイビーのアクセント */
}

.comp-dont {
  border-top: 4px solid var(--c-gray); /* グレーのアクセント */
  background: rgba(255, 255, 255, 0.4); /* 対象外は少し透明度を上げる */
}

.comp-title {
  font-size: 1.25rem;
  font-weight: bold;
  margin-bottom: 24px;
  color: var(--c-black);
  border-bottom: 1px dashed var(--c-border);
  padding-bottom: 16px;
}

.comp-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.comp-list li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 16px;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--c-dark);
}

.comp-list li:last-child {
  margin-bottom: 0;
}

/* チェックマークとバツ印の擬似要素 */
.comp-do .comp-list li::before {
  content: "✔";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--c-accent);
  font-weight: bold;
}

.comp-dont .comp-list li::before {
  content: "✕";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--c-gray);
  font-weight: bold;
}

/* --- 03. 適用条件（アラート・ガラスカード） --- */
.condition-glass-grid {
  display: grid;
  gap: 24px;
  max-width: 800px;
  margin: 0 auto;
}

.condition-card {
  display: flex;
  gap: 16px;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-left: 4px solid var(--c-danger); /* 警告の赤ライン */
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 8px 24px rgba(211, 47, 47, 0.04);
}

.condition-icon {
  font-family: var(--font-mono);
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--c-danger);
  line-height: 1;
  flex-shrink: 0;
}

.condition-body {
  flex-grow: 1;
}

.condition-title {
  font-size: 1.1rem;
  font-weight: bold;
  color: var(--c-black);
  margin: 0 0 12px 0;
}

.condition-text {
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--c-dark);
  margin: 0;
}

@media (max-width: 768px) {
  .condition-card { flex-direction: column; gap: 12px; }
  .condition-icon { font-size: 1.25rem; }
}

/* ==============================================
   Monitor Page: スマホ用 横スワイプ（カルーセル）最適化
============================================== */
@media (max-width: 768px) {
  
  /* 提供範囲と適用条件のコンテナを横スクロール化 */
  .glass-comparison,
  .condition-glass-grid {
    display: flex; /* グリッドからフレックスに変更して横並びに */
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none; /* スクロールバーを隠す */
    
    /* 画面端（padding）を突き抜けてスワイプできるようにするハック */
    margin-left: -24px;
    margin-right: -24px;
    padding-left: 24px;
    padding-right: 24px;
    padding-bottom: 24px; /* 影が切れないように下余白を確保 */
  }

  /* Webkit系（Safari/Chrome）のスクロールバー非表示 */
  .glass-comparison::-webkit-scrollbar,
  .condition-glass-grid::-webkit-scrollbar {
    display: none;
  }

  /* 個別のカード設定（右端を少し見切れさせる） */
  .glass-comp-card,
  .condition-card {
    flex: 0 0 85vw; /* 画面幅の85%にして次のカードをチラ見せする */
    scroll-snap-align: center;
    height: auto; /* 高さを内容に合わせる */
  }

  /* ツインパネル（提供範囲）の高さを揃えるための微調整 */
  .glass-comp-card {
    display: flex;
    flex-direction: column;
  }
}

/* 同意確認ボックス（応募前フィルター） */
.consent-box { 
  background: var(--c-light, #f5f5f5); 
  /* 【修正】親のダークテーマに影響されないよう、文字色を明示的に暗くする */
  color: var(--c-black, #111111); 
  border: 2px solid var(--c-black); 
  padding: 32px; 
  max-width: 800px; 
  margin: 0 auto 40px; 
  text-align: left; 
}

.consent-title { 
  font-size: 1.1rem; 
  text-align: center; 
  margin-bottom: 24px; 
  font-weight: 900; 
  /* 【修正】タイトルの文字色も明示 */
  color: var(--c-black, #111111);
}

.consent-checklist { 
  list-style: none; 
  padding: 0; 
  margin: 0; 
}

.consent-checklist li { 
  position: relative; 
  padding-left: 36px; /* チェックボックスと文字の間隔を少し広げる */
  margin-bottom: 16px; 
  font-size: 0.95rem; 
  font-weight: bold; 
  line-height: 1.6;
  /* 【修正】リストの文字色も明示 */
  color: var(--c-dark, #333333); 
}

/* チェックボックスの枠 */
.consent-checklist li::before {
  content: ""; 
  position: absolute; 
  left: 0; 
  top: 3px; /* 文字の高さに揃える */
  width: 20px; 
  height: 20px;
  border: 2px solid var(--c-black); 
  background: var(--c-white); 
  border-radius: 2px;
  box-sizing: border-box;
}

/* 【修正】文字の「✔」をやめ、CSSの線でチェックマークを描画（環境依存のズレを防止） */
.consent-checklist li::after {
  content: ""; 
  position: absolute; 
  left: 7px; /* 枠の中で中央になるよう配置 */
  top: 5px; 
  width: 6px; 
  height: 10px;
  /* 右と下に線を引いて... */
  border-right: 3px solid var(--c-accent); 
  border-bottom: 3px solid var(--c-accent);
  /* 45度傾けることで美しいチェックマークにする */
  transform: rotate(45deg);
}

/* ==============================================
   About Page: Supreme Dynamic UX (最終完成版)
============================================== */

/* ★親要素の制限解除（Stickyの作動に必須） */
body, main, .section, .container, .reveal { overflow: visible !important; }

/* --- 1. ヒーローエリア（スクロール促し追加） --- */
.page-header-minimal { text-align: center; }
.page-header-minimal p { color: var(--c-gray); font-weight: bold; letter-spacing: 0.05em; margin: 0; }

.scroll-indicator {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  opacity: 0.7;
  animation: scrollBounce 2s infinite;
}
.scroll-text { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.1em; color: var(--c-dark); }
.scroll-line { width: 1px; height: 40px; background: var(--c-dark); }

@keyframes scrollBounce {
  0%, 100% { transform: translate(-50%, 0); opacity: 0.5; }
  50% { transform: translate(-50%, 10px); opacity: 1; }
}

/* --- 2. ステートメント（同一座標クロスフェード） --- */
.sticky-viewport {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: transparent;
}

.st-item {
  position: absolute;
  width: 100%;
  max-width: 800px;
  padding: 0 24px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.5s ease, visibility 0.5s;
  z-index: 1;
  text-align: center;
}

.st-item.is-active { opacity: 1; visibility: visible; transform: translateY(0); z-index: 2; }
.statement-catch-sp { font-size: clamp(1.75rem, 5vw, 2.75rem); font-weight: 900; line-height: 1.5; color: var(--c-black); letter-spacing: 0.05em; margin: 0; }
.st-item p { font-size: 1.15rem; line-height: 2.2; color: var(--c-dark); font-weight: bold; margin: 0; }


/* --- 3. 3つの事業方針（Grid同期レイヤー・見栄え完全改善） --- */
.policy-stack-grid {
  display: grid;
  grid-template-columns: 1fr;
  max-width: 800px;
  margin: 0 auto;
  /* 親全体のスクロール距離（カード出現＋タメ時間） */

}

/* すべてのレイヤーを同じセルに強制配置し、下端を揃える */
.policy-layer {
  grid-row: 1;
  grid-column: 1;
  position: relative;
  height: 100%; 
}

/* 後から来るレイヤーの背景がスクロールを邪魔しないようイベントオフ */
.layer-1 { z-index: 1; }
.layer-2 { z-index: 2; pointer-events: none; }
.layer-3 { z-index: 3; pointer-events: none; }

/* タイトルの固定設定 */
.policy-title {
  position: -webkit-sticky;
  position: sticky;
  top: calc(var(--header-height, 60px) + 16px);
  z-index: 10;
  text-align: center;
  font-size: 1.5rem;
  letter-spacing: 0.1em;
  font-weight: 900;
  color: var(--c-black);
  margin: 0 0 32px 0;
  background: var(--c-light); /* 裏のカードを隠すための同色背景 */
  padding: 16px 0;
}

/* 全カード共通の固定設定 */
.policy-card {
  position: -webkit-sticky;
  position: sticky;
  /* すべてのカードがタイトル下の同じ位置でピタッと止まる */
  top: calc(var(--header-height, 60px) + 90px); 
  pointer-events: auto; 
  background: var(--c-white);
  border: 1px solid rgba(15, 44, 89, 0.1);
  border-radius: 20px;
  padding: 40px 24px;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  gap: 24px;
}
@media (min-width: 769px) { .policy-card { flex-direction: row; padding: 48px; align-items: flex-start; } }

/* スクロール時間差の魔法：カードごとの位置を margin-top でズラす */
.card-base { margin-top: 0; background: rgba(245, 245, 245, 0.95); }
.overlay-2 { margin-top: 80vh; border-top: 4px solid var(--c-accent); }
.overlay-3 { margin-top: 160vh; border-top: 4px solid var(--c-black); }

/* カード内のテキストデザイン */
.policy-num { font-family: var(--font-mono); font-size: 3rem; font-weight: 900; color: var(--c-accent); line-height: 1; flex-shrink: 0; }
.policy-content h3 { font-size: 1.4rem; font-weight: 900; color: var(--c-black); margin-bottom: 16px; }
.policy-content p { font-size: 1rem; line-height: 2; color: var(--c-dark); margin: 0; font-weight: bold; }


/* --- 4. 代表メッセージ（画像中央＆LINE風・時間差ポップイン） --- */
.ceo-chat-section { max-width: 600px; margin: 0 auto; }
.ceo-intro-simple { text-align: center; margin-bottom: 40px; display: flex; flex-direction: column; align-items: center; }
.ceo-chat-photo-center { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; box-shadow: 0 10px 30px rgba(15, 44, 89, 0.1); margin-bottom: 16px; border: 4px solid var(--c-white); }
.ceo-name-badge-center { display: flex; flex-direction: column; align-items: center; }
.ceo-role-badge { font-size: 0.75rem; font-weight: bold; color: var(--c-accent); margin-bottom: 4px;}
.ceo-name-text { font-size: 1.3rem; font-weight: 900; color: var(--c-black); letter-spacing: 0.1em; }

.chat-timeline { display: flex; flex-direction: column; gap: 24px; padding: 40px 24px; background: rgba(15, 44, 89, 0.03); border-radius: 24px; }

@keyframes linePop {
  0% { opacity: 0; transform: scale(0.8) translateY(10px); }
  60% { opacity: 1; transform: scale(1.02) translateY(-2px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

.js-chat-bubble { opacity: 0; transform-origin: left top; }
.js-chat-bubble.is-visible { animation: linePop 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
.chat-bubble { background: var(--c-white); padding: 16px 20px; border-radius: 0 20px 20px 20px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); font-size: 0.95rem; line-height: 1.9; color: var(--c-dark); font-weight: bold; align-self: flex-start; max-width: 90%; }
.chat-bubble.catch-bubble { font-size: 1.2rem; font-weight: 900; color: var(--c-black); border-left: 4px solid var(--c-accent); }


/* --- 5. セキュリティ・ポリシー（絵文字なし App Settings UI） --- */
.app-settings-wrapper { max-width: 600px; margin: 0 auto; }
.app-settings-header { text-align: center; margin-bottom: 40px; }
.sec-title-sp { font-size: 1.5rem; font-weight: 900; color: var(--c-black); margin: 0 0 8px 0; letter-spacing: 0.05em; }
.sec-subtitle-sp { font-size: 0.95rem; color: var(--c-accent); font-weight: bold; margin: 0; }
.app-settings-desc { font-size: 0.95rem; line-height: 1.9; color: var(--c-dark); margin-bottom: 32px; font-weight: bold; }
.app-list-ui { list-style: none; padding: 0; margin: 0 0 24px 0; background: var(--c-white); border-radius: 16px; border: 1px solid var(--c-border); overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.02); }
.app-list-ui li { padding: 16px 20px; border-bottom: 1px solid var(--c-border); }
.app-list-ui li:last-child { border-bottom: none; }
.app-list-text strong { display: block; font-size: 1rem; color: var(--c-black); margin-bottom: 4px; font-weight: 900; }
.app-list-text span { display: block; font-size: 0.85rem; color: var(--c-dark); font-weight: bold; }
.app-settings-note { font-size: 0.85rem; color: var(--c-gray); font-weight: bold; margin: 0; text-align: center; }


/* ==========================================================================
   COMPANY PAGE: LEGAL DOCUMENT (公的文書・リーガルレイアウト)
   ========================================================================== */
.legal-header { padding: 120px 0 40px; border-bottom: 2px solid var(--c-black); margin-bottom: 60px; }
.legal-title { font-size: clamp(2rem, 4vw, 3rem); font-weight: 900; letter-spacing: 0.05em; color: var(--c-black); margin: 0; }

.legal-section { margin-bottom: 80px; }
.legal-section-title { font-size: 1.5rem; font-weight: bold; border-left: 4px solid var(--c-accent); padding-left: 16px; margin-bottom: 32px; color: var(--c-black); letter-spacing: 0.05em; }

.legal-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 0.95rem; }
.legal-table th, .legal-table td { padding: 24px 20px; border-bottom: 1px solid var(--c-border); line-height: 1.8; }
.legal-table tr:first-child th, .legal-table tr:first-child td { border-top: 1px solid var(--c-black); }
.legal-table tr:last-child th, .legal-table tr:last-child td { border-bottom: 1px solid var(--c-black); }
.legal-table th { width: 25%; font-weight: bold; color: var(--c-black); vertical-align: top; background: var(--c-light); }
.legal-table td { color: var(--c-dark); }
.legal-table p { margin: 0 0 8px; }
.legal-table p:last-child { margin: 0; }
.legal-table ul { padding-left: 20px; margin: 0; }
.legal-table .note { font-size: 0.85rem; color: var(--c-gray); margin-top: 8px; display: block; }

@media (max-width: 768px) {
  .legal-table th, .legal-table td { display: block; width: 100%; padding: 16px 0; }
  .legal-table tr { border-bottom: 1px solid var(--c-border); }
  .legal-table tr:last-child { border-bottom: 1px solid var(--c-black); }
  .legal-table th { border-bottom: none; padding-bottom: 4px; background: transparent; color: var(--c-accent); font-size: 0.85rem; letter-spacing: 0.05em; }
  .legal-table td { border-bottom: none; padding-top: 0; }
  .legal-table tr:first-child th { border-top: none; }
  .legal-table { border-top: 1px solid var(--c-black); }
}

/* ==============================================
   Results Page: Scroll-Telling UI (完全監査改善版)
============================================== */

/* ミニマルなヒーローエリア（透明化・抜け感拡張） */
.results-hero {
  padding: 120px 0 60px;
  border-bottom: 1px solid var(--c-border);
  text-align: center;
  /* 監査改善: 背景を透明にし、サイト全体のガラス背景を活かす */
  background: transparent; 
  background-image: radial-gradient(var(--c-border) 1px, transparent 1px);
  background-size: 20px 20px;
}
.results-title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 900;
  margin-bottom: 16px;
  color: var(--c-black);
}
.results-lead {
  color: var(--c-dark);
  font-weight: bold;
}

/* セクション見出し */
.results-heading {
  font-size: 1.75rem;
  font-weight: 900;
  margin-bottom: 40px;
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--c-black);
}
.results-heading::before {
  content: "";
  display: block;
  width: 8px;
  height: 24px;
  background: var(--c-accent);
}

/* ==============================================
   01. レポート比較（ダブル・スティッキー＆SP圧縮化）
============================================== */
body, main, .section, .container, .reveal, .report-scroll-container {
  overflow: visible !important; 
}

/* --- ベース配置 --- */
.report-scroll-container { position: relative; padding-bottom: 20vh; }
@media (min-width: 769px) { .report-scroll-container { max-width: 800px; margin: 0 auto; } }

/* タイトル周りの基本余白 */
.results-heading-wrapper { margin-bottom: 24px; }
.results-heading { margin-bottom: 16px; font-size: 1.5rem; font-weight: 900; }
.results-desc { color: var(--c-dark); font-weight: bold; line-height: 1.8; margin: 0; }

/* Sticky動作の基盤 */
.sticky-wrapper { position: -webkit-sticky !important; position: sticky !important; top: calc(var(--header-height, 60px) + 16px) !important; z-index: 1; }
.overlay-wrapper { position: relative; z-index: 2; margin-top: 80vh; height: 120vh; }

.report-panel-before { background: rgba(245, 245, 245, 0.8); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.9); border-radius: 20px; padding: 40px 24px; opacity: 0.7; filter: grayscale(50%); }
.overlay-panel { background: var(--c-white) !important; box-shadow: 0 -20px 60px rgba(15, 44, 89, 0.15); border-top: 4px solid var(--c-accent); border-radius: 20px; padding: 40px 24px; position: -webkit-sticky !important; position: sticky !important; top: calc(var(--header-height, 60px) + 16px) !important; }

/* パネル内の共通要素ベースサイズ */
.visual-funnel { margin-bottom: 40px; }
.clean-list { margin-bottom: 40px; }
.f-large { font-size: 1.2rem; }
.panel-note { font-size: 0.9rem; margin-top: 16px; }

/* PC用の余白 */
@media (min-width: 769px) {
  .report-panel-before, .overlay-panel { padding: 48px 48px; }
}


/* ==============================================
   ★ SP専用：超圧縮サイズ設定（料金表と同等の密度）
============================================== */
@media (max-width: 768px) {
  
  /* タイトル周りの圧縮 */
  .results-heading-wrapper { margin-bottom: 16px; }
  .results-heading { font-size: 1.2rem; margin-bottom: 8px; }
  .results-desc { font-size: 0.85rem; line-height: 1.6; }

  /* パネル自体の余白圧縮 */
  .report-panel-before, .overlay-panel { 
    padding: 20px 16px !important; 
    border-radius: 12px;
  }

  /* バッジの圧縮 */
  .panel-badge { font-size: 0.75rem; padding: 4px 8px; margin-bottom: 16px; }
  
  /* Before: モックデータの圧縮 */
  .raw-row { font-size: 0.8rem; padding: 6px 0; }
  .panel-note { font-size: 0.75rem; margin-top: 8px; }

  /* After: ファネルの圧縮（横並びを強制し、極限まで圧縮） */
  .visual-funnel { 
    margin-bottom: 20px; 
    display: flex; 
    flex-direction: row; /* 縦並びを解除し横並びに強制 */
    align-items: center; 
    justify-content: space-between;
    gap: 4px; /* 要素間の隙間を極小化 */
  }
  .funnel-step { 
    padding: 8px 4px; /* 左右の余白を削る */
    flex: 1; /* 3つのステップが均等に幅を取るようにする */
    text-align: center; 
    max-width: none; /* 前回のmax-width制限を解除 */
  }
  .f-num { font-size: 1.15rem; display: block; line-height: 1.2; }
  /* スマホで文字が折り返して崩れないよう white-space: nowrap を指定 */
  .f-label { font-size: 0.65rem; display: block; white-space: nowrap; margin-top: 4px; }
  
  /* 矢印の調整（横向きの形を維持し、潰れないようにする） */
  .f-arrow { 
    width: 16px; 
    height: auto; 
    margin: 0; 
    flex-shrink: 0; 
  }
  
  /* After: リストの圧縮 */
  .clean-list { margin-bottom: 20px; }
  .clean-list li { font-size: 0.85rem; padding: 8px 12px; margin-bottom: 8px; }
  .f-large { font-size: 1rem; }

  /* After: アクションボックスの圧縮 */
  .action-box { padding: 16px 12px; }
  .action-label { font-size: 0.7rem; margin-bottom: 8px; }
  .action-box p { font-size: 0.8rem; line-height: 1.6; }
  
  /* Sticky位置の微調整（画面の狭さに合わせて上部ギリギリで止める） */
  .sticky-wrapper, .overlay-panel {
    top: calc(var(--header-height, 60px) + 8px) !important;
  }
}

/* （中略：ラベルバッジ、タイトル、図解、リスト、アクション箱のスタイルは前のターンと同じでOK） */
.panel-badge { font-family: var(--font-mono); font-size: 0.85rem; font-weight: 900; padding: 6px 16px; display: inline-block; border-radius: 50px; margin-bottom: 24px; letter-spacing: 0.1em; }
.panel-badge.bad { background: var(--c-gray); color: var(--c-white); }
.panel-badge.good { background: var(--c-accent); color: var(--c-white); }

.panel-title-large { font-size: clamp(1.5rem, 4vw, 2rem); font-weight: 900; color: var(--c-black); margin-bottom: 32px; }

/* Before用 モックデータ */
.raw-data-mock { font-family: var(--font-mono); font-size: 0.9rem; color: var(--c-dark); margin-bottom: 24px; border: 1px solid var(--c-border); background: var(--c-white); padding: 16px; }
.raw-row { display: flex; justify-content: space-between; border-bottom: 1px dashed var(--c-border); padding: 8px 0; }
.raw-row:last-child { border-bottom: none; }

/* After用 図解ファネル */
.visual-funnel { display: flex; justify-content: space-between; align-items: center; background: rgba(15, 44, 89, 0.03); padding: 24px; border-radius: 12px; }
.funnel-step { display: flex; flex-direction: column; align-items: center; text-align: center; flex: 1; }
.f-num { font-family: var(--font-mono); font-size: clamp(1.5rem, 5vw, 2.5rem); font-weight: 900; color: var(--c-accent); line-height: 1; margin-bottom: 8px; }
.f-label { font-size: 0.65rem; font-weight: bold; color: var(--c-dark); }
.f-arrow { width: 24px; height: 2px; background: var(--c-border); position: relative; flex-shrink: 0; margin: 0 12px; }
.f-arrow::after { content: ""; position: absolute; right: 0; top: -4px; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 6px solid var(--c-border); }
.funnel-step.f-danger .f-num { color: var(--c-danger); }
.funnel-step.f-danger .f-label { color: var(--c-danger); }

/* リスト・ネクストアクション箱 (文字つめ解消・行間拡張) */
.overlay-panel li {
  line-height: 1.8; /* 行間拡張 */
  margin-bottom: 12px; /* 項目間拡張 */
}

.action-box { background: rgba(15, 44, 89, 0.05); border-left: 4px solid var(--c-accent); padding: 24px; position: relative; }
.action-label { font-family: var(--font-mono); font-size: 0.75rem; font-weight: 900; color: var(--c-accent); letter-spacing: 0.1em; display: block; margin-bottom: 8px; }
.action-box p { font-size: 0.95rem; font-weight: bold; color: var(--c-black); line-height: 1.9; margin: 0; }


/* --- 02. 作業ログ（ガラス・タイムラインUI） --- */
.terminal-section {
  /* 監査改善: 黒背景廃止、透明化 */
  background-color: transparent; 
  color: var(--c-dark); /* 文字色をダークへ */
  padding: 80px 0;
}

.glass-log-timeline {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
  padding-left: 16px;
}

@media (min-width: 769px) { .glass-log-timeline { padding-left: 32px; } }

/* 左の通し線 */
.glass-log-timeline::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 35px;
  width: 2px;
  background: rgba(15, 44, 89, 0.1);
}

@media (min-width: 769px) { .glass-log-timeline::before { left: 59px; } }

.log-item {
  position: relative;
  display: flex;
  gap: 24px;
  margin-bottom: 48px;
}

@media (min-width: 769px) { .log-item { gap: 40px; margin-bottom: 64px; } }
.log-item:last-child { margin-bottom: 0; }

/* 左側の状態ノード（ラベル） */
.log-node {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 900;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--c-white);
  z-index: 2;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.8);
}

@media (min-width: 769px) { .log-node { width: 56px; height: 56px; font-size: 0.85rem; } }

.node-hypo { background: rgba(15, 44, 89, 0.15); color: var(--c-accent); font-weight: 900; } /* 監査改善: 背景薄く、文字をアクセントカラーへ */
.node-act { background: var(--c-black); }
.node-res { background: var(--c-accent); }

/* ガラスカード（ログ本文） */
.glass-card {
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 12px;
  /* 監査改善: 左右に余白（20px）を持たせ、端への張り付きを防ぐ */
  padding: 24px; 
  box-shadow: 0 8px 32px rgba(15, 44, 89, 0.04);
  flex-grow: 1;
}

.glass-card.border-accent {
  border-left: 4px solid var(--c-accent);
}

.log-meta { font-family: var(--font-mono); font-size: 0.8rem; color: var(--c-gray); margin-bottom: 12px; letter-spacing: 0.05em; }
.log-text { font-size: 0.95rem; line-height: 1.9; color: var(--c-dark); margin: 0; }


/* --- 03. 計測データの共有 (エディトリアル・ポリシーUI) --- */

.policy-box {
  /* 前のセクションからの余白をたっぷり取る */
  padding: 120px 0 80px; 
  max-width: 800px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .policy-box { padding: 80px 0 60px; } 
}

/* タイトル部分の横並び設定 */
.policy-header {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 32px;
}

.policy-num {
  font-family: var(--font-mono);
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 900;
  color: var(--c-accent); /* REMEDORAカラーで強調 */
}

.policy-title {
  font-size: clamp(1.5rem, 4vw, 2.5rem); 
  font-weight: 900; 
  color: var(--c-black);
  letter-spacing: 0.05em;
  margin: 0;
}

/* 本文エリア（左側のダブルライン装飾） */
.policy-body {
  position: relative;
  padding-left: 32px; /* 左線の内側の余白 */
  margin-left: 8px; /* 線の開始位置をタイトルの開始位置と微調整 */
}

@media (max-width: 768px) {
  .policy-body { padding-left: 24px; margin-left: 4px; }
}

/* 1本目の線（背景となる細いグレー線） */
.policy-body::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(15, 44, 89, 0.15);
}

/* 2本目の線（先頭だけを強調する太いアクセント線） */
.policy-body::after {
  content: "";
  position: absolute;
  left: -2px; /* 少し左にはみ出させる */
  top: 0;
  height: 48px; /* 最初の2行分だけ強調 */
  width: 5px;
  background: var(--c-accent);
}

.policy-text {
  font-size: 1.05rem; 
  line-height: 2; 
  color: var(--c-dark);
  margin: 0;
  font-weight: bold;
}

/* フッター・リーガルメニュー (監査改善: 文字つめ解消) */
.footer-links ul {
  line-height: 2; /* 行間拡張 */
  margin-bottom: 16px; /* MENU/LEGAL間の隙間拡張 */
}

/* SP固定CTA (監査改善: 張り付き防止padding追加) */
.sp-fixed-cta {
  background: transparent !important; /* 背景透明 */
  box-shadow: none !important; /* 影を消してガラス背景を活かす */
  /* 監査改善: 左右に余白（16px）を確保、iOSセーフエリア対応 */
  padding: 16px 16px env(safe-area-inset-bottom) !important;
}

/* ==========================================================================
   CONTACT PAGE: GLASSMORPHISM & ACCORDION (最終洗練・スマホ最適化版)
   ========================================================================== */

/* --- ヘッダー --- */
.contact-header { padding: 120px 0 60px; text-align: center; border-bottom: 1px solid var(--c-border); }
.contact-title { font-family: var(--font-serif); font-size: clamp(2rem, 4vw, 3rem); font-weight: 900; letter-spacing: 0.05em; color: var(--c-black); margin-bottom: 16px; }
.contact-lead { font-size: 1.05rem; color: var(--c-dark); line-height: 1.8; }

/* --- ガラスパネルのラッパー --- */
.contact-glass-accordion { max-width: 720px; margin: 60px auto 0; display: flex; flex-direction: column; gap: 32px; }

/* --- 角丸すりガラスパネル（本体） --- */
.glass-panel-item {
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 16px 40px rgba(15, 44, 89, 0.06);
  overflow: hidden;
  transition: box-shadow 0.4s ease, transform 0.4s ease;
}
@media (hover: hover) {
  .glass-panel-item:hover { transform: translateY(-4px); box-shadow: 0 24px 48px rgba(15, 44, 89, 0.1); }
}

/* --- ヘッダー部分（タップ領域） --- */
.glass-panel-header {
  width: 100%; padding: 32px 40px; background: transparent; border: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; transition: background 0.3s ease;
}
.header-left { display: flex; align-items: baseline; gap: 16px; text-align: left; }
.glass-panel-num { font-family: var(--font-mono); font-size: 1.1rem; font-weight: 900; color: var(--c-accent); letter-spacing: 0.1em; opacity: 0.8; }
.glass-panel-title { font-size: 1.4rem; font-weight: bold; color: var(--c-black); margin: 0; letter-spacing: 0.02em; }

/* --- トグルアイコン --- */
.header-right { display: flex; align-items: center; justify-content: center; }
.toggle-icon {
  position: relative; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(15, 44, 89, 0.15); display: flex; align-items: center; justify-content: center;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.toggle-icon::before, .toggle-icon::after { content: ""; position: absolute; background: var(--c-black); transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
.toggle-icon::before { width: 14px; height: 2px; }
.toggle-icon::after { width: 2px; height: 14px; }
.glass-panel-header.is-active .toggle-icon { background: var(--c-black); border-color: var(--c-black); }
.glass-panel-header.is-active .toggle-icon::before { background: var(--c-white); }
.glass-panel-header.is-active .toggle-icon::after { transform: rotate(90deg) scale(0); background: var(--c-white); }

/* --- 開閉する中身 --- */
.glass-panel-collapse { max-height: 0; opacity: 0; transition: max-height 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease; }
.glass-panel-collapse.is-open { max-height: 1200px; opacity: 1; }

.glass-panel-body { padding: 0 40px 40px; }
.acc-text { font-size: 0.95rem; line-height: 1.8; color: var(--c-dark); margin-bottom: 32px; padding-top: 16px; border-top: 1px dashed rgba(15, 44, 89, 0.15); }

/* --- フォーム内部 --- */
.form-row { display: grid; gap: 24px; margin-bottom: 24px; }
@media (min-width: 769px) { .form-row { grid-template-columns: 1fr 1fr; } }
.form-group label { display: block; font-size: 0.85rem; font-weight: bold; margin-bottom: 8px; color: var(--c-black); }
.req { background: var(--c-black); color: var(--c-white); font-size: 0.65rem; padding: 2px 6px; margin-left: 8px; vertical-align: middle; }

.audit-form-glass input[type="text"], .audit-form-glass input[type="email"] {
  width: 100%; padding: 16px; border: 1px solid rgba(15, 44, 89, 0.1); background: rgba(255, 255, 255, 0.6);
  font-size: 1rem; color: var(--c-black); border-radius: 12px; transition: all 0.3s ease; box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
}
.audit-form-glass input[type="text"]:focus, .audit-form-glass input[type="email"]:focus {
  outline: none; border-color: var(--c-accent); background: #fff; box-shadow: 0 0 0 4px rgba(15, 44, 89, 0.05);
}

.checkbox-glass-group {
  display: flex; flex-wrap: wrap; gap: 16px 24px; background: rgba(255, 255, 255, 0.6);
  padding: 20px; border: 1px solid rgba(15, 44, 89, 0.1); border-radius: 12px; box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
}
.check-label { display: flex; align-items: center; gap: 8px; font-size: 0.9rem !important; cursor: pointer; margin: 0 !important; color: var(--c-dark) !important; font-weight: bold !important; }
.check-label input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--c-black); }

/* --- プライバシーポリシー同意チェック（スマホ崩れ防止） --- */
.consent-group {
  margin-top: 32px; padding-top: 24px; border-top: 1px dashed rgba(15, 44, 89, 0.15);
  display: flex; justify-content: center; width: 100%;
}
.consent-label { display: flex; align-items: center; gap: 8px; font-size: 0.9rem !important; text-align: left; cursor: pointer; }
.consent-label input[type="checkbox"] { width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--c-black); }
.text-link { color: var(--c-accent); text-decoration: underline; font-weight: bold; }

/* --- 送信ボタン・LINEボタン（中央揃え） --- */
.submit-btn-glass, .glass-btn {
  width: 100%; max-width: 400px; margin: 16px auto 0; /* 中央配置 */
  height: 60px; font-size: 1.05rem; letter-spacing: 0.05em; border: none; cursor: pointer;
  border-radius: 50px; display: flex; align-items: center; justify-content: center; gap: 12px; /* テキストと矢印を中央に */
  padding: 0 24px;
}
.btn-arrow { font-family: var(--font-mono); font-weight: bold; transition: transform 0.3s ease; }
@media (hover: hover) { .submit-btn-glass:hover .btn-arrow, .glass-btn:hover .btn-arrow { transform: translateX(4px); } }
.btn-line { background-color: #06c755; color: #ffffff; border: 1px solid #06c755; }
@media (hover: hover) { .btn-line:hover { background-color: #05b34c; border-color: #05b34c; color: #ffffff; } }

.hp-field { display: none !important; }
.form-msg { font-size: 0.85rem; font-weight: bold; text-align: center; margin-top: 16px; min-height: 1.5em; }
.msg-success { color: var(--c-black); }
.msg-error { color: var(--c-danger); }

/* ==========================================================================
   SP対応（スマホ用最適化）
   ========================================================================== */
@media (max-width: 768px) {
  /* スマホでは余白を減らして画面内に収める */
  .glass-panel-header { padding: 24px 20px; }
  .header-left { gap: 8px; flex-direction: column; }
  .glass-panel-title { font-size: 1.15rem; }
  .glass-panel-body { padding: 0 20px 24px; }
  .acc-text { margin-bottom: 24px; font-size: 0.9rem; }
  .checkbox-glass-group { padding: 16px; flex-direction: column; gap: 12px; }
}

/* ==========================================================================
   TERMS PAGE: LEGAL AGREEMENT (利用規約・約款レイアウト)
   ========================================================================== */

/* 規約コンテナ（読みやすい幅に制限） */
.terms-container { 
  max-width: 800px; 
  margin: 0 auto; 
  background: var(--c-white); 
  border: 1px solid var(--c-border); 
  padding: 40px 24px; 
}
@media (min-width: 769px) {
  .terms-container { padding: 60px 80px; }
}

/* 規約ヘッダー */
.terms-header {
  border-bottom: 2px solid var(--c-black);
  padding-bottom: 24px;
  margin-bottom: 40px;
}
.terms-title {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--c-black);
  margin-bottom: 8px;
}
.terms-date {
  font-size: 0.85rem;
  color: var(--c-gray);
}
.terms-preamble {
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--c-dark);
  margin-bottom: 60px;
}

/* 条項（Article）のレイアウト */
.terms-article {
  margin-bottom: 40px;
}
.terms-article-title {
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--c-black);
  margin-bottom: 16px;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.terms-content {
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--c-dark);
}

/* 規約内のリスト（字下げ） */
.terms-list {
  list-style: none;
  padding: 0;
  margin: 16px 0 0 0;
  counter-reset: terms-item;
}
.terms-list li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 8px;
}
.terms-list li::before {
  counter-increment: terms-item;
  content: "(" counter(terms-item) ")";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--c-gray);
}

/* ==========================================================================
   INDEX PAGE: CONCEPT & DIRECTORY (トップページ専用)
   ========================================================================== */

/* ==============================================
   Top Page: Comic Strip UI (横スクロールストーリー)
============================================== */
.comic-slider-container {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw); /* コンテナを画面全幅に拡張 */
  padding: 0 24px;
}

/* トラック（スワイプ領域） */
.comic-track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  padding-bottom: 40px;
  /* スクロールバー非表示 */
  scrollbar-width: none; 
}
.comic-track::-webkit-scrollbar { display: none; }

/* 漫画の1コマ */
.comic-panel {
  flex: 0 0 85vw; /* スマホで右端が少し見切れる幅に設定 */
  max-width: 400px; /* PCでの最大幅 */
  scroll-snap-align: center;
  position: relative;
}

@media (min-width: 769px) {
  .comic-track {
    justify-content: center; /* PCでは中央揃えで全コマ表示 */
    flex-wrap: wrap; /* 画面に収まらなければ折り返す */
  }
  .comic-panel {
    flex: 0 0 calc(50% - 12px); /* PCでは2列に並べる */
    max-width: none;
  }
  /* 最後の結論パネルは全幅にする */
  .panel-conclusion {
    flex: 0 0 100%;
  }
}

/* コマの中身（ Brutalist Corporate な太枠デザイン ） */
.comic-panel-inner {
  background: var(--c-white);
  border: 3px solid var(--c-black);
  border-radius: 8px;
  padding: 32px 24px;
  height: 100%;
  box-shadow: 8px 8px 0 rgba(15, 44, 89, 0.1); /* アメコミ風のソリッドな影 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: all 0.5s ease;
  opacity: 0.3; /* 初期状態は薄くしておく */
  transform: scale(0.95);
}

/* JSによって「今読んでいるコマ」になった時の発火スタイル */
.comic-panel.is-reading .comic-panel-inner {
  opacity: 1;
  transform: scale(1);
  box-shadow: 12px 12px 0 rgba(15, 44, 89, 0.15);
}

.comic-step {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  background: var(--c-light);
  padding: 4px 12px;
  display: inline-block;
  align-self: flex-start;
  margin-bottom: 24px;
  border: 1px solid var(--c-border);
}

/* セリフ（メインコピー） */
.comic-dialogue {
  font-size: 1.35rem;
  font-weight: 900;
  line-height: 1.5;
  color: var(--c-black);
  margin-bottom: 24px;
  /* 文字が下からスッと現れるアニメーションの準備 */
  overflow: hidden;
}

.comic-dialogue span {
  display: block;
  transform: translateY(100%);
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.comic-panel.is-reading .comic-dialogue span {
  transform: translateY(0);
}

.comic-caption {
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--c-dark);
  margin: 0;
  border-top: 1px dashed var(--c-border);
  padding-top: 16px;
}

/* --- 特殊効果（SCENE 03：絶望） --- */
.is-shock.is-reading .comic-panel-inner {
  border-color: var(--c-danger);
  box-shadow: 12px 12px 0 rgba(211, 47, 47, 0.2);
  /* ショックで画面が揺れるアニメーション */
  animation: shockShake 0.4s ease-in-out;
}
@keyframes shockShake {
  0%, 100% { transform: scale(1) translateX(0); }
  25% { transform: scale(1.02) translateX(-4px); }
  50% { transform: scale(1.02) translateX(4px); }
  75% { transform: scale(1.02) translateX(-4px); }
}

/* --- 特殊効果（SCENE 04：損失） --- */
.is-loss.is-reading .comic-panel-inner {
  background: var(--c-light);
  border-color: var(--c-gray);
  box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.05);
  filter: grayscale(100%);
}

/* --- 結論パネル --- */
.panel-conclusion .comic-panel-inner {
  background: rgba(15, 44, 89, 0.03); /* 監査カラーの背景 */
  border: 3px solid var(--c-accent);
  box-shadow: none;
}
.comic-conclusion-title {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--c-black);
  margin-bottom: 24px;
}
.comic-conclusion-text {
  font-size: 1rem;
  line-height: 1.9;
  color: var(--c-dark);
  margin: 0;
}

/* スワイプヒントの点滅 */
.comic-swipe-hint {
  text-align: center;
  font-size: 0.8rem;
  font-weight: bold;
  color: var(--c-gray);
  margin-top: 16px;
  animation: flashHint 2s infinite;
}
@media (min-width: 769px) { .comic-swipe-hint { display: none; } }

/* --- 漫画セクション：ページネーションバッジ --- */
.comic-pagination {
  position: absolute;
  top: -10px;
  right: 24px;
  background: var(--c-white);
  border: 2px solid var(--c-black);
  padding: 4px 12px;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 900;
  z-index: 10;
  box-shadow: 4px 4px 0 rgba(0,0,0,0.1);
}
@media (min-width: 769px) { .comic-pagination { display: none; } } /* PCでは全表示なので隠す */

/* ディレクトリ（目次）グリッド */
.directory-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-top: 2px solid var(--c-black);
}
.directory-item {
  padding: 40px 0;
  border-bottom: 1px solid var(--c-border);
  display: flex;
  flex-direction: column;
}
.dir-title { font-size: 1.5rem; font-weight: 900; margin-bottom: 16px; display: flex; justify-content: space-between; align-items: center; letter-spacing: 0.05em; }
.dir-title span { font-size: 1.2rem; color: var(--c-accent); }
.dir-desc { font-size: 0.95rem; line-height: 1.8; color: var(--c-dark); margin-bottom: 24px; flex-grow: 1; }
.dir-link { font-weight: bold; color: var(--c-black); text-decoration: underline; text-underline-offset: 4px; display: inline-block; }

@media (min-width: 769px) {
  .directory-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .directory-item:nth-child(odd) { padding-right: 40px; border-right: 1px solid var(--c-border); }
  .directory-item:nth-child(even) { padding-left: 40px; }
}

/* ==============================================
   Top Page: Interactive Audit UI (インデックス切り替え)
============================================== */
.interactive-audit {
  max-width: 800px;
  margin: 0 auto;
}

/* --- 番号ナビゲーション（ガラス上のスイッチ） --- */
/* --- 番号ナビゲーション（1画面・横4列等分UI） --- */
.audit-nav {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 画面幅を正確に4等分する */
  gap: 8px; /* スマホでは隙間を最小限に */
  margin-bottom: 40px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(15, 44, 89, 0.1);
}

.audit-nav-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center; /* 狭い幅に収めるため中央揃えに変更 */
  padding: 0;
  transition: all 0.3s ease;
  opacity: 0.4; /* 非アクティブ時は薄く */
}

/* アクティブな番号のスタイル */
.audit-nav-btn.is-active {
  opacity: 1;
}

.nav-num {
  font-family: var(--font-mono);
  /* スマホ画面に合わせて文字サイズを自動縮小 */
  font-size: clamp(1.5rem, 5.5vw, 2.5rem); 
  font-weight: 900;
  color: transparent;
  -webkit-text-stroke: 1px var(--c-black); 
  line-height: 1;
  transition: all 0.3s ease;
}

.audit-nav-btn.is-active .nav-num {
  color: var(--c-accent); 
  -webkit-text-stroke: 0;
  text-shadow: 0 4px 8px rgba(15, 44, 89, 0.15); 
  transform: scale(1.1); 
  transform-origin: center bottom; /* 中央揃えに合わせて中心から拡大 */
}

.nav-label {
  /* 文字が折り返さない限界のサイズに自動調整 */
  font-size: clamp(0.65rem, 2.5vw, 0.85rem); 
  font-weight: bold;
  color: var(--c-black);
  margin-top: 8px;
  text-align: center;
  white-space: nowrap; /* 【重要】文字の折り返しを強制的に禁止 */
  letter-spacing: 0; /* 狭い幅に入れるため字間を詰める */
}

/* PC表示時の最適化（ゆとりを持たせて左寄せに戻す） */
@media (min-width: 769px) {
  .audit-nav {
    gap: 24px;
    padding-bottom: 24px;
  }
  .audit-nav-btn {
    align-items: flex-start; /* PCでは左寄せが美しい */
  }
  .nav-num {
    font-size: 3rem;
  }
  .audit-nav-btn.is-active .nav-num {
    transform-origin: left bottom;
  }
  .nav-label {
    letter-spacing: 0.05em;
    font-size: 0.85rem;
  }
}

/* --- コンテンツエリア（箱なし・背景なし） --- */
.audit-content-area {
  min-height: 180px; /* 切り替え時のガタつき防止 */
  position: relative;
}

.audit-panel {
  display: none; /* 初期状態は非表示 */
}

.audit-panel.is-active {
  display: block;
  animation: panelFadeIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes panelFadeIn {
  0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}

.audit-panel-title {
  font-size: 1.3rem;
  font-weight: bold;
  color: var(--c-black);
  margin-bottom: 16px;
  line-height: 1.5;
}

.audit-panel-note {
  display: inline-block;
  font-size: 0.85rem;
  color: var(--c-gray);
  font-weight: normal;
  margin-left: 12px;
}

.audit-panel-text {
  font-size: 1rem;
  line-height: 1.9;
  color: var(--c-dark);
  margin: 0;
}

/* --- 特別枠（常に表示・うっすらガラス感） --- */
.audit-special {
  margin-top: 64px;
  padding-top: 40px;
  border-top: 1px dashed rgba(15, 44, 89, 0.2);
  position: relative;
}

.special-badge {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: bold;
  background: var(--c-black);
  color: var(--c-white);
  padding: 4px 12px;
  display: inline-block;
  margin-bottom: 16px;
  letter-spacing: 0.1em;
}

.audit-special-note {
  display: block;
  font-size: 0.85rem;
  color: var(--c-danger);
  font-weight: bold;
  margin-top: 16px;
}


/* ==============================================
   Works / Case Study (制作・改善事例)
============================================== */
.works-grid { 
  display: grid; 
  /* PCでは横並び、スマホでは縦並びになるレスポンシブ設定 */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
  gap: 24px; 
  margin-top: 40px;
}

/* カードの基本スタイル（クリーンで堅牢） */
.work-item { 
  position: relative; 
  background: var(--c-white);
  border: 1px solid var(--c-border); 
  overflow: hidden; 
  transition: transform 0.3s ease, box-shadow 0.3s ease; 
}

/* ホバー時に少し浮き上がる演出 */
.work-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(15, 44, 89, 0.08);
}

/* 画像（またはプレースホルダーテキスト）のエリア */
.work-img { 
  width: 100%; 
  height: 200px; 
  background: #f5f5f5; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  border-bottom: 1px solid var(--c-border); 
}

.work-img-text {
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: 0.1em;
}

.work-info { 
  padding: 32px 24px; 
}

.work-title { 
  font-weight: 900; 
  font-size: 1.2rem; 
  margin-bottom: 12px; 
  color: var(--c-black); 
}

.work-tag { 
  font-size: 0.75rem; 
  font-weight: bold;
  border: 1px solid var(--c-gray); 
  color: var(--c-gray); 
  padding: 4px 10px; 
  display: inline-block; 
  margin-bottom: 16px; 
  letter-spacing: 0.05em; 
}

.work-desc {
  font-size: 0.95rem; 
  color: var(--c-dark); 
  line-height: 1.6;
  margin: 0;
}

/* ==============================================
   YOUR PROJECT (空き枠のアピール用ハイライト)
============================================== */
.work-item-highlight {
  /* 監査カラー（ネイビー）の破線で「空き枠」であることを強調 */
  border: 2px dashed var(--c-accent); 
}

.work-item-highlight .work-img {
  background: rgba(15, 44, 89, 0.03); /* ほんのり色をつける */
  border-bottom: 2px dashed var(--c-accent);
}

.work-item-highlight .tag-highlight {
  border-color: var(--c-accent);
  color: var(--c-accent);
  background: rgba(15, 44, 89, 0.05);
}

/* ==============================================
   改修中（メンテナンス）ティザー画面
============================================== */
/* スクロールを完全にロック */
html.is-maintenance, body.is-maintenance {
  overflow: hidden !important;
  height: 100vh !important;
}

/* 背後のコンテンツ（文字や画像）を強力にぼかし、操作不能にする */
body.is-maintenance main,
body.is-maintenance header,
body.is-maintenance footer,
body.is-maintenance .container {
  filter: blur(20px) grayscale(50%); /* 読解不能にする */
  opacity: 0.15; /* 存在感だけを残す */
  pointer-events: none; /* クリック無効 */
  user-select: none; /* 選択無効 */
  transition: all 0.5s ease;
}

/* オーバーレイ本体のフルスクリーン固定 */
.maintenance-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999; /* サイト内の何よりも前面 */
  display: flex;
  justify-content: center;
  align-items: center;
  /* 背景の極細ガラス波紋をうっすらと透かして見せる */
  background: rgba(255, 255, 255, 0.4); 
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 24px;
}

/* 中央のメッセージカード（監査役らしい厳格なデザイン） */
.maintenance-card {
  background: var(--c-white, #ffffff);
  border: 1px solid var(--c-black, #111111);
  box-shadow: 0 30px 60px rgba(15, 44, 89, 0.15);
  padding: 48px 40px;
  max-width: 500px;
  width: 100%;
  text-align: center;
  /* 下からスッと浮かび上がる演出 */
  animation: maintenance-fade-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  border-radius: 10px;
}

.maintenance-title {
  font-size: 2rem;
  font-weight: 900;
  color: var(--c-accent, #0f2c59);
  letter-spacing: 0.1em;
  margin-top: 0;
  margin-bottom: 24px;
  border-bottom: 2px solid var(--c-accent, #0f2c59);
  padding-bottom: 16px;
}

/* CSSで「SYSTEM AUDIT」という英語をサブタイトルとして挿入 */
.maintenance-title::before {
  content: "SYSTEM AUDIT\A"; 
  white-space: pre;
  display: block;
  font-size: 0.9rem;
  color: var(--c-gray, #767676);
  letter-spacing: 0.2em;
  margin-bottom: 8px;
}

.maintenance-text {
  font-size: 1.05rem;
  font-weight: bold;
  color: var(--c-dark, #333333);
  line-height: 1.8;
  margin-bottom: 40px;
}

/* 強調部分（公式LINE）にLINEカラーのマーカー線を引く */
.maintenance-text strong {
  color: var(--c-black, #111111);
  background: linear-gradient(transparent 60%, rgba(6, 199, 85, 0.3) 60%);
}

/* ボタンレイアウト */
.maintenance-actions {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 32px;
}

/* 共通ボタンデザイン（ソリッドで堅牢） */
.maintenance-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 56px;
  padding: 0 24px;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  border-radius: 10px; /* 監査役らしいシャープな角丸 */
  transition: all 0.3s ease;
  width: 100%;
  border: 2px solid var(--c-black, #111111);
  background: transparent;
  color: var(--c-black, #111111);
  letter-spacing: 0.05em;
}

.maintenance-btn:hover {
  background: var(--c-light, #f5f5f5);
  opacity: 1;
}

/* LINEボタン専用デザイン */
.maintenance-btn.primary {
  background: #06c755;
  border-color: #06c755;
  color: #ffffff;
}

.maintenance-btn.primary:hover {
  background: #05b34c;
  border-color: #05b34c;
}

.maintenance-small {
  font-size: 0.85rem;
  color: var(--c-gray, #767676);
  margin: 0;
}

@keyframes maintenance-fade-in {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   ANIMATIONS & INTERACTIONS (スマホ対応・上品な動き)
   ========================================================================== */

/* --- 1. スクロール連動フェードイン (.reveal, .reveal-stagger) --- */
/* 【強化】上下の移動だけでなく、少し縮んだ状態(0.96)から現れることでスマホでも動きが際立つ */
.reveal, .reveal-stagger > * {
  opacity: 0;
  transform: translateY(30px) scale(0.96); 
  transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity;
}

/* 発火状態 */
.reveal.is-visible, .reveal-stagger.is-visible > * {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* 連続フェードインのディレイ（順番に出る） */
.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0s; }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 0.15s; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 0.3s; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 0.45s; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 0.6s; }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 0.75s; }


/* --- 2. ボタンのスマホ対応（自動光沢とタップ感） --- */
.btn {
  position: relative;
  overflow: hidden; /* 光のはみ出し防止 */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.0);
  transform: translateY(0);
}

/* タップ（クリック）した瞬間の物理的な押し心地を強化 */
.btn:active {
  transform: translateY(2px) scale(0.98) !important; /* グッと沈み込む */
  box-shadow: 0 1px 2px rgba(15, 44, 89, 0.1) !important;
  opacity: 0.9;
}

@media (hover: hover) {
  .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 15px rgba(15, 44, 89, 0.15);
    opacity: 1 !important;
  }
}

/* --- 3. 光の筋（スマホでも定期的に自動で光る） --- */
.btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 100%);
  transform: skewX(-25deg);
  z-index: 1;
  pointer-events: none;
  /* 【強化】ホバー不要。5秒に1回、自動でサッと光る */
  animation: shine-auto 5s infinite ease-in-out;
}

@keyframes shine-auto {
  0%, 80% { left: -100%; } /* 80%の時間は待機 */
  100% { left: 200%; }     /* 残り20%の時間で光が走り抜ける */
}


/* --- 4. カード要素（事例や窓口など）のホバーアクション --- */
.contact-card, .plan-detail-box, .directory-item {
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) {
  .contact-card:hover, .plan-detail-box:hover, .directory-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(15, 44, 89, 0.08);
    border-color: var(--c-accent); 
  }
}