@charset "UTF-8";
/* ==========================================================================
   CBC 特定商取引法に基づく表記 ページ
   - 英字タイトル: Akshar / 本文: Zen Kaku Gothic New（ともにGoogle Fonts）
   - 既存 common.css との衝突を避けるため、原則 #pageSctl 配下にスコープ
   - ヘッダー／フッター／モバイルドロワーは FAQ ページ（faq.css）と共通の設計
   ========================================================================== */

#pageSctl {
  --cbc-ink: #333333;
  --cbc-ink-2: #4a4a4a;
  --cbc-muted: #9a9a9a;
  --cbc-line: #e2e2e2;
  --cbc-bg: #ffffff;
  --cbc-bg-soft: #f4f3f1;
  --cbc-yellow: #f5cf3d;
  --cbc-yellow-soft: #fbe79f;
  --cbc-teal: #56b0ac;
  --cbc-pink: #e88b8b;
  --cbc-pink-soft: #f6d3d3;
  --cbc-th: #6b6b6b;
  --cbc-footer: #3d3b39;

  margin: 0;
  padding: 0;
  color: var(--cbc-ink);
  background: var(--cbc-bg);
  font-family: 'Zen Kaku Gothic New', -apple-system, 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', sans-serif;
  font-size: 1.6rem;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

#pageSctl *,
#pageSctl *::before,
#pageSctl *::after {
  box-sizing: border-box;
}

#pageSctl a {
  text-decoration: none;
}

/* ============ HERO ============ */
.sctlHero {
  background: linear-gradient(100deg, #ffffff 0%, #ffffff 22%, var(--cbc-pink-soft) 58%, var(--cbc-pink) 100%);
}
.sctlHeroInner {
  max-width: var(--cbc-hero-max);
  margin: 0 auto;
  /* タイトルを小さくした分の帯高さをFAQと揃えるため縦paddingを微増 */
  padding: 42px 32px;
  padding-left: var(--cbc-hero-pad-l);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-height: 173px;
  gap: 6px;
}
/* HERO英字見出しの左端はヘッダーのCBCロゴ左端に追従する。
   帯幅・内寄せは :root の --cbc-hero-max / --cbc-hero-pad-l（1280px→1100px で線形に縮む）に統合済み。
   ≥1280px では従来と同じ max-width:1280px / padding-left:134px になる。 */
.sctlHeroTitle {
  font-weight: 700;
  /* 和文＋太字でFAQ（英字）より大きく見えるため、光学的に揃うよう少し小さく */
  font-size: 3.2rem;
  line-height: 1.3;
  color: var(--cbc-ink);
  margin: 0;
}
.sctlHeroSub {
  font-family: 'Akshar', sans-serif;
  font-weight: 500;
  font-size: 1.6rem;
  letter-spacing: 0.02em;
  color: var(--cbc-ink-2);
  margin: 0;
}

/* ============ BODY / TABLE ============ */
.sctlBody {
  background: var(--cbc-bg-soft);
  padding: 56px 32px 80px;
}
.sctlBodyInner {
  max-width: 940px;
  margin: 0 auto;
}
.sctlTable {
  width: 100%;
  border-collapse: collapse;
  background: var(--cbc-bg);
  border: 1px solid var(--cbc-line);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .04);
}
.sctlTable th,
.sctlTable td {
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--cbc-line);
}
.sctlTable tr:last-child th,
.sctlTable tr:last-child td {
  border-bottom: 0;
}
.sctlTable th {
  width: 260px;
  padding: 22px 24px;
  background: var(--cbc-th);
  color: #ffffff;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.6;
  border-right: 1px solid var(--cbc-line);
  border-bottom-color: rgba(255, 255, 255, .18);
}
.sctlTable tr:last-child th {
  border-bottom: 0;
}
.sctlTable td {
  padding: 22px 28px;
  color: var(--cbc-ink-2);
  font-size: 1.6rem;
  line-height: 1.85;
}
.sctlTable td p {
  margin: 0;
}
.sctlTable td p + p {
  margin-top: 6px;
}
.sctlNote {
  font-size: 1.4rem;
  color: var(--cbc-muted);
  line-height: 1.7;
}
.sctlLink {
  color: #3f9c98;
  border-bottom: 1px solid #9dd0cd;
  word-break: break-all;
  transition: opacity .2s;
}
.sctlLink:hover {
  opacity: .75;
}

/* ============ レスポンシブ（〜767px） ============ */
@media screen and (max-width: 767px) {
  #pageSctl {
    font-size: 1.4rem;
  }

  .sctlHeroInner {
    padding: 12px 18px;
    min-height: 134px;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .sctlHeroTitle {
    font-size: 2.0rem;
  }
  .sctlHeroSub {
    font-size: 1.4rem;
  }

  .sctlBody {
    padding: 28px 16px 48px;
  }
  /* SP：th を各行の見出しとして積む定義リスト風レイアウト */
  .sctlTable,
  .sctlTable tbody,
  .sctlTable tr,
  .sctlTable th,
  .sctlTable td {
    display: block;
    width: auto;
  }
  .sctlTable {
    border: 0;
    box-shadow: none;
    background: transparent;
  }
  .sctlTable tr {
    background: #ffffff;
    border: 1px solid var(--cbc-line);
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .04);
    overflow: hidden;
    margin-bottom: 14px;
  }
  .sctlTable tr:last-child {
    margin-bottom: 0;
  }
  .sctlTable th {
    width: auto;
    padding: 12px 16px;
    font-size: 1.4rem;
    border-right: 0;
    border-bottom: 0;
  }
  .sctlTable td {
    padding: 14px 16px;
    font-size: 1.4rem;
  }
  .sctlNote {
    font-size: 1.4rem;
  }
}