/* ==========================================================
   案内ページ共通
   （shop_info.php / tokushoho.php / terms.php / privacy.php / guide.php / shipping.php）

   構成
     1. 色の定義・全体
     2. 見出し
     3. セクション（生成りの枠）
     4. 項目と内容の一覧（会社名：◯◯ の形）
     5. 目次（販売規約）
     6. 地図（ショップ情報）
     7. 説明の札・表・注記（送料・お支払い）
     8. スマホ表示（640px以下）
========================================================== */


/* ==========================================================
   1. 色の定義・全体
   （style.css の変数を使い、無ければ同じ色を直接指定）
========================================================== */
.info-container {
  --info-green: var(--color-green-deep, #234d30);
  --info-green-ink: var(--color-green-ink, #1a3c24);
  --info-gold: var(--color-gold, #d4a017);
  --info-gold-dark: var(--color-gold-dark, #b68e12);
  --info-text: var(--color-text, #2e2a26);
  --info-sub: #6b6257;     /* 補足の文字色 */
  --info-paper: #fcfaf5;   /* 生成り */
  --info-line: #dcd4c5;    /* 罫線 */

  min-width: 0;
  max-width: 820px;
  margin: 0 auto;
  padding: 28px 24px 40px;
  box-sizing: border-box;
  color: var(--info-text);
  font-size: 16px;
  line-height: 1.9;
}

.info-container a {
  color: var(--info-green);
  text-underline-offset: 3px;
}

.info-container a:hover {
  color: var(--info-gold-dark);
}

.info-container a:focus-visible {
  outline: 3px solid var(--info-gold);
  outline-offset: 2px;
}


/* ==========================================================
   2. 見出し
========================================================== */
.info-title {
  margin: 0 0 6px;
  font-size: clamp(1.25rem, 1rem + 1.2vw, 1.75rem);
  line-height: 1.4;
  letter-spacing: 0.08em;
  color: var(--info-green-ink);
}

/* 見出しの下の案内文 */
.info-lead {
  margin: 0 0 28px;
  padding-left: 12px;
  border-left: 3px solid var(--info-gold);
  font-size: 15px;
  line-height: 1.7;
  color: var(--info-sub);
}

/* 案内文が無いページ用の余白 */
.info-title + .info-section,
.info-title + .info-toc {
  margin-top: 22px;
}


/* ==========================================================
   3. セクション（生成りの枠）
========================================================== */
.info-section {
  margin-bottom: 20px;
  padding: 18px 20px 20px;
  border: 1px solid var(--info-line);
  border-radius: 6px;
  background: var(--info-paper);
  scroll-margin-top: 16px; /* 目次から飛んだ時、見出しが画面の端に付かないようにする */
}

.info-section-title {
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--info-line);
  font-size: 17px;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--info-green-ink);
}

.info-section p {
  margin: 0 0 10px;
}

.info-section ul {
  margin: 0 0 10px;
  padding-left: 1.4em;
}

.info-section > :last-child {
  margin-bottom: 0;
}


/* ==========================================================
   4. 項目と内容の一覧（会社名：◯◯ の形）
========================================================== */
.info-rows {
  margin: 0;
}

.info-row {
  display: grid;
  grid-template-columns: 11em minmax(0, 1fr);
  gap: 4px 20px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--info-line);
}

.info-row:first-child {
  padding-top: 0;
}

.info-row:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.info-row dt {
  font-weight: bold;
  color: var(--info-green-ink);
}

.info-row dd {
  margin: 0;
  overflow-wrap: anywhere;
}


/* ==========================================================
   5. 目次（販売規約）
========================================================== */
.info-toc {
  margin-bottom: 20px;
  padding: 14px 20px;
  border: 1px solid var(--info-line);
  border-left: 3px solid var(--info-gold);
  border-radius: 6px;
  background: #fff;
}

.info-toc ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 2px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}


/* ==========================================================
   6. 地図（ショップ情報）
========================================================== */
.info-map {
  overflow: hidden;
  border: 1px solid var(--info-line);
  border-radius: 4px;
  background: #fff;
}

.info-map iframe {
  display: block;
  width: 100%;
  height: 380px;
  border: 0;
}


/* ==========================================================
   7. 説明の札・表・注記（送料・お支払い）
========================================================== */

/* 説明を札にして横に並べる（お支払い方法など） */
.info-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}

.info-card {
  padding: 14px 16px;
  border: 1px solid var(--info-line);
  border-radius: 4px;
  background: #fff;
}

.info-card-title {
  margin: 0 0 6px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--info-green-ink);
}

.info-card p {
  margin: 0;
  font-size: 15px;
}

/* 表（送料など）。金額の列は右寄せ */
.info-table {
  width: 100%;
  margin-bottom: 12px;
  border-collapse: collapse;
}

.info-table th,
.info-table td {
  padding: 10px 4px;
  border-bottom: 1px dashed var(--info-line);
  text-align: left;
}

.info-table thead th {
  padding-top: 0;
  border-bottom: 1px solid var(--info-line);
  font-size: 13px;
  font-weight: normal;
  color: var(--info-sub);
}

.info-table th:last-child,
.info-table td:last-child {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.info-table tbody td:last-child {
  font-size: 18px;
  font-weight: bold;
}

/* 送料の表（2列目・3列目が金額） */
.info-table.is-fees th:nth-child(n+2),
.info-table.is-fees td:nth-child(n+2) {
  width: 30%;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.info-table.is-fees tbody td:nth-child(n+2) {
  font-size: 18px;
  font-weight: bold;
}

.info-section .info-text-sub {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--info-sub);
}

/* 注記 */
.info-section .info-note {
  margin: 0 0 8px;
  padding: 8px 12px;
  border-left: 3px solid var(--info-gold);
  background: #fff;
  font-size: 15px;
  line-height: 1.7;
}

/* 注意してほしい注記（朱） */
.info-section .info-note.is-caution {
  border-left-color: #b23a2e;
  font-weight: bold;
  color: #b23a2e;
}


/* ==========================================================
   8. スマホ表示
========================================================== */

/* 768px以下では .site-body が縦並びになるので、横幅いっぱいに広げる */
@media (max-width: 768px) {
  .info-container {
    width: 100%;
  }
}

@media (max-width: 640px) {

  .info-container {
    padding: 16px clamp(4px, 6.15vw - 15.4px, 24px) 28px;
  }

  .info-section {
    padding: 14px clamp(14px, 2.3vw + 5.2px, 20px) 16px;
  }

  /* 項目名を内容の上に置く */
  .info-row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .info-row dt {
    font-size: 14px;
  }

  .info-map iframe {
    height: 300px;
  }
}