/* ==========================================================================
   page.css
   下層ページ（privacy.html / terms.html）専用スタイル
   ヘッダー・パンくず・フッターは components.css の共通パーツを使う
   ========================================================================== */


/* --------------------------------------------------------------------------
   ページ全体の余白
   -------------------------------------------------------------------------- */
.policy {
  padding: var(--space-30) var(--space-23) var(--space-60);
}

@media (min-width: 768px) {
  .policy {
    max-width: 90rem;
    margin-inline: auto;
    padding: var(--space-45) var(--space-110) var(--space-110);
  }
}


/* --------------------------------------------------------------------------
   本文（リード文＋各条）
   -------------------------------------------------------------------------- */
.policy__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-30);
  margin-top: var(--space-30);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-loose);
}

.policy__article {
  display: flex;
  flex-direction: column;
  gap: var(--space-15);
}

.policy__heading {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  color: var(--color-main);
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
}

.policy__heading::before {
  content: "";
  flex-shrink: 0;
  width: 0.3125rem;
  height: 1.375rem;
  background-color: var(--color-main);
}

@media (min-width: 768px) {
  .policy__body {
    gap: var(--space-50);
    margin-top: var(--space-50);
    font-size: var(--font-size-16);
  }

  .policy__article {
    gap: var(--space-30);
  }

  .policy__heading {
    gap: var(--space-15);
    font-size: var(--font-size-24);
  }

  .policy__heading::before {
    height: 2rem;
  }
}


/* --------------------------------------------------------------------------
   条文内の番号付きリスト
   base.css のリセットで list-style:none になっているため、ここで戻す
   -------------------------------------------------------------------------- */
.policy__list {
  list-style: decimal;
  padding-left: 1.3125rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

.policy__list .policy__list {
  margin-top: var(--space-10);
}

.policy__list--alpha {
  list-style: lower-alpha;
  padding-left: 1.625rem;
}

.policy__list--roman {
  list-style: lower-roman;
  padding-left: 1.625rem;
}

@media (min-width: 768px) {
  .policy__list {
    padding-left: 1.5rem;
  }

  .policy__list--alpha,
  .policy__list--roman {
    padding-left: 1.875rem;
  }
}


/* --------------------------------------------------------------------------
   章の中に複数の条がある場合（貸渡約款など）
   <section class="policy__article">
     <h2 class="policy__heading">第１章　総則</h2>
     <div class="policy__clauses">
       <div class="policy__clause">
         <h3 class="policy__subheading">第1条（約款の適用）</h3>
         <ol class="policy__list">...</ol>
       </div>
     </div>
   </section>
   -------------------------------------------------------------------------- */
.policy__clauses {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
  width: 100%;
}

.policy__clause {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

.policy__subheading {
  font-weight: var(--font-weight-medium);
}