/* =====================================================================
 * Inventy Policies — 固有スタイル
 * ---------------------------------------------------------------------
 * Policies (利用規約 / プライバシーポリシー / 特商法表記) 専用のスタイル
 * のみを定義します。デザイントークン・基本コンポーネント・ヘッダー・
 * フッターなどの共通部分は ../res/css/site.css に集約しています。
 *
 * 残すべきもの:
 *   - .policies-nav および その子要素
 *   - main.doc-main の余白制御
 *   - .doc-content および 文書用タイポ (h1/h2/h3/p/dl/ol/ul/table 等)
 *   - 上記コンポーネントに関するレスポンシブ調整
 *
 * 共通化済み (ここに書かないこと):
 *   - :root のデザイントークン
 *   - リセット (html/body/img/a/button/*)
 *   - body 背景グラデーション
 *   - .wrap / .wrap-narrow / .glass / .glass-bar
 *   - .btn / .btn-primary / .btn-secondary
 *   - .eyebrow / .panel / .logo / .logo-mark
 *   - フローティングヘッダー (.site-header)
 *   - フッター (.site-footer / .foot-grid / .foot-col / .foot-brand / .foot-bottom)
 * ===================================================================== */

/* ============ Policies 固有: 規約間ナビ ============ */
.policies-nav {
  display: flex;
  gap: 20px;
  font-size: 13px;
  font-weight: 500;
  color: var(--on-surface-variant);
  flex-wrap: wrap;
  justify-content: center;
}

.policies-nav a {
  position: relative;
  padding: 4px 2px;
  transition: color .15s ease;
}

.policies-nav a:hover {
  color: var(--primary);
}

.policies-nav a[aria-current="page"] {
  color: var(--primary);
  font-weight: 700;
}

.policies-nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 2px;
  background: var(--primary);
  border-radius: 2px;
}

/* ----------------------------------------------------------------------
 * 中間幅 (タブレット ~860px) ではナビのフォントを縮めて gap を詰め、
 * 3要素 (ロゴ / ナビ / LPへ戻る) を 1 行で並べきる。
 * ---------------------------------------------------------------------- */
@media (max-width: 860px) {
  .site-header .glass-bar {
    gap: 12px;
  }
  .policies-nav {
    font-size: 12px;
    gap: 12px;
  }
  .site-header .btn {
    padding: 10px 16px;
    font-size: 13px;
  }
}

/* ----------------------------------------------------------------------
 * モバイル (〜768px) ではヘッダー内の規約間ナビを非表示にする。
 * 狭幅で 3 要素 (ロゴ / policies-nav / LPへ戻る) を並べると文字が重なり
 * 視認性を損なうため。同じ 3 リンクはフッター ("運営" カラム) に常設して
 * いるため、ヘッダーから一時的に消してもナビゲーション性は失われない。
 * ---------------------------------------------------------------------- */
@media (max-width: 768px) {
  .site-header .policies-nav {
    display: none;
  }
}

/* ============ MAIN PANEL / DOC CONTENT ============ */
main.doc-main {
  /* fixed header (60px) + 16px*2 margin = 約 92px の余白を確保 */
  padding: 132px 0 80px;
}

@media (max-width: 860px) {
  main.doc-main {
    padding: 124px 0 60px;
  }
}

/* Policies の panel は LP本体より上下 padding を抑える (56px vs 64px) */
.doc-main .panel {
  padding: 56px 56px;
}

@media (max-width: 700px) {
  .doc-main .panel {
    padding: 32px 22px;
  }
}

/* 文書本文用 */
.doc-content {
  color: var(--on-surface);
}

.doc-content > * + * {
  margin-top: 18px;
}

.doc-content h1 {
  font-weight: 800;
  font-size: clamp(28px, 3.4vw, 38px);
  line-height: 1.4;
  color: var(--tone-700);
  text-wrap: pretty;
  margin-bottom: 8px;
}

.doc-content h1 + .doc-meta {
  margin-top: 0;
}

.doc-content .doc-meta {
  font-size: 13px;
  color: var(--on-surface-variant);
  margin-bottom: 24px;
}

.doc-content section {
  margin-top: 36px;
}

.doc-content section + section {
  border-top: 1px solid rgba(137, 49, 26, 0.10);
  padding-top: 32px;
}

.doc-content h2 {
  font-weight: 700;
  font-size: clamp(20px, 2.2vw, 24px);
  line-height: 1.5;
  color: var(--tone-700);
  margin-bottom: 16px;
  text-wrap: pretty;
}

.doc-content h3 {
  font-weight: 700;
  font-size: 16px;
  line-height: 1.6;
  color: var(--tone-700);
  margin-top: 22px;
  margin-bottom: 10px;
}

.doc-content p {
  font-size: 15px;
  line-height: 1.85;
  color: var(--on-surface);
  text-wrap: pretty;
}

.doc-content p + p {
  margin-top: 14px;
}

.doc-content a {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

.doc-content a:hover {
  color: var(--tone-800);
  text-decoration-thickness: 2px;
}

.doc-content ul,
.doc-content ol {
  padding-left: 1.5em;
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.85;
}

.doc-content ul {
  list-style: disc;
}

.doc-content ol {
  list-style: decimal;
}

.doc-content li + li {
  margin-top: 8px;
}

.doc-content li > ul,
.doc-content li > ol {
  margin-top: 8px;
  margin-bottom: 4px;
}

/* 用語定義 (利用規約 第1条で使用) */
.doc-content dl {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 12px;
}

.doc-content dt {
  font-weight: 700;
  color: var(--tone-700);
  font-size: 15px;
}

.doc-content dd {
  margin-left: 1.2em;
  margin-top: 4px;
  font-size: 15px;
  line-height: 1.85;
  color: var(--on-surface);
}

/* 表 (特商法ページで使用) */
.doc-content table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 16px;
  border: 1px solid var(--outline-variant);
  border-radius: var(--r-12);
  overflow: hidden;
  background: #fff;
}

.doc-content th,
.doc-content td {
  text-align: left;
  padding: 14px 18px;
  font-size: 14px;
  line-height: 1.75;
  vertical-align: top;
  border-bottom: 1px solid var(--outline-variant);
}

.doc-content tr:last-child th,
.doc-content tr:last-child td {
  border-bottom: 0;
}

.doc-content th {
  background: var(--surface-high);
  color: var(--tone-700);
  font-weight: 700;
  width: 30%;
  white-space: nowrap;
}

@media (max-width: 700px) {
  .doc-content table,
  .doc-content tbody,
  .doc-content tr {
    display: block;
    width: 100%;
  }
  .doc-content tr {
    border-bottom: 1px solid var(--outline-variant);
  }
  .doc-content tr:last-child {
    border-bottom: 0;
  }
  .doc-content th,
  .doc-content td {
    display: block;
    width: 100%;
    border-bottom: 0;
    white-space: normal;
  }
  .doc-content th {
    padding-bottom: 4px;
  }
  .doc-content td {
    padding-top: 4px;
  }
}

.doc-content .note,
.doc-content .fineprint {
  font-size: 12px;
  color: var(--on-surface-variant);
  line-height: 1.7;
}

/* 強調色 */
.doc-content strong {
  color: var(--tone-700);
  font-weight: 700;
}