/* ============================================================
   info-page.css - 情報ページ共通スタイル
   ご利用ガイド / 利用規約 / プライバシーポリシー / 特商法
   ============================================================ */

.info-page {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.info-page h1 {
  font-size: 1.5rem;
  font-weight: 700;
  border-bottom: 2px solid var(--primary);
  padding-bottom: 10px;
  margin-bottom: 24px;
}

.info-page .lead {
  font-size: 14px;
  color: var(--text-light);
  line-height: 1.8;
  margin-bottom: 32px;
}

/* --- 目次ナビ（ガイドページ用） --- */
.guide-nav {
  margin-bottom: 36px;
}
.guide-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}
.guide-nav-list a {
  color: var(--primary);
  text-decoration: none;
  font-size: 14px;
}
.guide-nav-list a::before {
  content: "›";
  margin-right: 4px;
}
.guide-nav-list a:hover {
  text-decoration: underline;
}

/* --- セクション --- */
.info-section {
  margin-bottom: 40px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--border);
}
.info-section:last-of-type {
  border-bottom: none;
}
.info-section h2 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 16px;
  padding-left: 12px;
  border-left: 3px solid var(--primary);
}
.info-section h3 {
  font-size: .95rem;
  font-weight: 700;
  margin: 20px 0 8px;
}
.info-section p {
  font-size: 14px;
  line-height: 1.8;
  margin-bottom: 12px;
}
.info-section ul,
.info-section ol {
  font-size: 14px;
  line-height: 1.8;
  padding-left: 1.5em;
  margin-bottom: 12px;
}
.info-section li {
  margin-bottom: 4px;
}

/* 注意書き */
.info-section .note {
  font-size: 13px;
  color: var(--text-light);
}

/* --- お買い物の流れ（STEPリスト） --- */
.flow-list {
  list-style: none;
  padding: 0;
  counter-reset: flow;
}
.flow-list > li {
  position: relative;
  padding: 16px 16px 16px 80px;
  margin-bottom: 12px;
  background: var(--bg-gray);
  border-radius: var(--border-radius);
  min-height: 60px;
}
.flow-step {
  position: absolute;
  left: 16px;
  top: 16px;
  display: inline-block;
  background: var(--primary);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 3px;
  letter-spacing: .05em;
}
.flow-list h3 {
  font-size: .9rem;
  font-weight: 700;
  margin: 0 0 4px;
}
.flow-list p {
  margin: 0;
  font-size: 13px;
}

/* --- お支払い方法ブロック --- */
.payment-method {
  background: var(--bg-gray);
  border-radius: var(--border-radius);
  padding: 16px 20px;
  margin-bottom: 12px;
}
.payment-method h3 {
  margin-top: 0;
}

/* --- 返品ブロック --- */
.return-block {
  margin-bottom: 20px;
}

/* --- 送料テーブル --- */
.shipping-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin-bottom: 12px;
}
.shipping-table th,
.shipping-table td {
  border: 1px solid var(--border);
  padding: 10px 14px;
  text-align: left;
}
.shipping-table thead th {
  background: var(--bg-gray);
  font-weight: 700;
}

/* --- 特商法テーブル --- */
.tokushoho-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.tokushoho-table th,
.tokushoho-table td {
  border: 1px solid var(--border);
  padding: 12px 16px;
  vertical-align: top;
  line-height: 1.7;
}
.tokushoho-table th {
  background: var(--bg-gray);
  font-weight: 700;
  white-space: nowrap;
  width: 180px;
}
.tokushoho-table ul {
  margin: 0;
  padding-left: 1.2em;
}
.tokushoho-table li {
  margin-bottom: 4px;
}

/* --- 利用規約セクション --- */
.terms-section h2 {
  font-size: 1rem;
}
.terms-section ol {
  padding-left: 1.5em;
}
.terms-section ol ul {
  list-style: disc;
  margin-top: 8px;
}

/* --- お問い合わせ情報 --- */
.contact-info {
  background: var(--bg-gray);
  border-radius: var(--border-radius);
  padding: 16px 20px;
  font-size: 14px;
}
.contact-info dt {
  font-weight: 700;
  margin-top: 8px;
}
.contact-info dt:first-child { margin-top: 0; }
.contact-info dd {
  margin: 0 0 4px;
}

/* --- 改定日 --- */
.revision-date {
  text-align: right;
  font-size: 13px;
  color: var(--text-light);
  margin-top: 32px;
}

/* --- 時間帯リスト --- */
.time-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.time-list li {
  background: var(--bg-gray);
  padding: 4px 12px;
  border-radius: 3px;
  font-size: 13px;
}

/* --- レスポンシブ --- */
@media (max-width: 575px) {
  .flow-list > li {
    padding: 48px 14px 14px;
  }
  .flow-step {
    position: static;
    display: inline-block;
    margin-bottom: 6px;
  }
  .tokushoho-table th {
    width: auto;
    display: block;
  }
  .tokushoho-table td {
    display: block;
  }
}