/* =============================================
   CHYLIM — 汎用固定ページスタイル (chylim_page.css)
   プライバシーポリシー・会社概要・完了画面等で使用
============================================= */

/* ===== BREADCRUMB ===== */
.breadcrumb-bar {
  background: var(--gray-light);
  border-bottom: 1px solid #e8e8e8;
  padding: 10px 24px;
}
.breadcrumb-inner {
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--gray-mid);
}
.breadcrumb-inner a { color: var(--green-main); text-decoration: none; }
.breadcrumb-inner a:hover { text-decoration: underline; }
.breadcrumb-sep { color: #ccc; }

/* ===== STATIC PAGE BODY ===== */
.static-page-body {
  padding: 64px 24px 100px;
  background: #fafaf8;
  min-height: 70vh;
}
.static-page-inner {
  max-width: 860px;
  margin: 0 auto;
}

/* ページヘッダー */
.static-page-header {
  margin-bottom: 48px;
  padding-bottom: 32px;
  border-bottom: 2px solid #efefef;
}
.static-page-label {
  font-family: var(--font-sub);
  font-size: 11px;
  letter-spacing: 4px;
  color: var(--green-main);
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 10px;
}
.static-page-title {
  font-family: var(--font-display);
  font-size: clamp(32px, 6vw, 52px);
  color: var(--green-dark);
  line-height: 1;
  letter-spacing: 2px;
  margin-bottom: 10px;
}
.static-page-updated {
  font-size: 12px;
  color: var(--gray-mid);
  font-family: var(--font-sub);
}

/* 本文 */
.static-page-content {
  font-size: 14px;
  line-height: 1.9;
  color: var(--text);
}
.static-page-content p { margin-bottom: 20px; }
.static-page-content h2 {
  font-family: var(--font-sub);
  font-size: 17px;
  font-weight: 700;
  color: var(--green-dark);
  margin: 40px 0 12px;
  padding: 10px 16px;
  background: var(--green-pale);
  border-left: 4px solid var(--green-main);
  border-radius: 0 8px 8px 0;
}
.static-page-content h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--green-dark);
  margin: 28px 0 10px;
}
.static-page-content ul, .static-page-content ol {
  margin: 0 0 20px 22px;
}
.static-page-content li { margin-bottom: 6px; }
.static-page-content strong { color: var(--green-dark); }
.static-page-content a { color: var(--green-main); }
.static-page-content a:hover { text-decoration: underline; }

.static-page-content table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 28px;
  font-size: 13px;
}
.static-page-content table tr { border-bottom: 1px solid #efefef; }
.static-page-content table tr:first-child { border-top: 1px solid #efefef; }
.static-page-content table th {
  width: 140px;
  padding: 12px 14px;
  background: var(--gray-light);
  font-weight: 700;
  color: var(--green-dark);
  vertical-align: top;
  white-space: nowrap;
  text-align: left;
}
.static-page-content table td { padding: 12px 14px; }

/* お問合せボックス */
.static-page-contact-box {
  background: var(--green-pale);
  border: 1px solid rgba(64,145,108,0.2);
  border-radius: 12px;
  padding: 24px;
  margin-top: 32px;
}
.static-page-contact-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--green-main);
  text-transform: uppercase;
  margin-bottom: 10px;
}

/* ===== システム系（完了・エラー）用バリエーション ===== */
/* 使い方: .static-page-header に .is-system クラスを追加 */
.static-page-header.is-complete .static-page-title { color: var(--green-main); }
.static-page-header.is-error .static-page-title { color: var(--accent-dark); }
.static-page-header.is-error .static-page-label { color: var(--accent-dark); }

/* 完了/エラー用アイコンエリア */
.static-page-icon {
  font-size: 64px;
  text-align: center;
  margin-bottom: 20px;
  line-height: 1;
}
.static-page-icon.complete::before { content: '✅'; }
.static-page-icon.error::before { content: '⚠️'; }

/* ===== RESPONSIVE ===== */
@media (max-width: 600px) {
  .static-page-body { padding: 48px 16px 72px; }
  .static-page-content h2 { font-size: 15px; }
  .static-page-content table th { width: 100px; font-size: 12px; padding: 10px; }
  .static-page-content table td { font-size: 12px; padding: 10px; }
}