/* ============================================================
   WORDS — 特定商取引法ページ専用CSS（自己完結版）
   ------------------------------------------------------------
   ■ 貼り付け先
     カラーミー管理画面 → 特定商取引法ページの「CSSを編集する」欄に
     このファイルを “まるごと全文” 貼り付けてください。
   ■ 対応HTML
     特商法_tokushoho.html（<div class="container sys-legal"> 構造）
   ※ これ1枚で土台&#12316;デザインまで完結します。他ページには影響しません。
   ============================================================ */

:root{
  --w-ink:#26231e; --w-muted:#7a7368; --w-gold:#cf9c3a; --w-gold-d:#bd8c2f;
  --w-line:#e5e0d3; --w-cream:#f4efe5; --w-cream2:#faf7f1; --w-paper:#ffffff;
  --w-serif:'Cormorant Garamond', serif;
}

/* ---------- 土台 ---------- */
.sys-legal{
  font-family:'Noto Sans JP',-apple-system,"Hiragino Kaku Gothic ProN",sans-serif;
  color:var(--w-ink); line-height:1.9; -webkit-font-smoothing:antialiased;
}
/* 固定ヘッダーに本文が潜らないよう上に余白（ヘッダー高さ分） */
.sys-legal.container{ max-width:1000px; margin:0 auto; padding:118px 24px 48px; }
.sys-legal a{ color:var(--w-gold-d); text-decoration:none; transition:opacity .2s; }
.sys-legal a:hover{ opacity:.7; }
.sys-legal img{ max-width:100%; height:auto; }

/* ---------- ページ見出し ---------- */
.sys-legal .sys-pagehead{ text-align:center; padding:6px 0 40px; }
.sys-legal .sys-pagehead__en{
  display:block; font-family:var(--w-serif); font-size:13px; letter-spacing:.3em; color:var(--w-gold);
}
.sys-legal .sys-pagehead__ja{
  font-size:24px; font-weight:600; letter-spacing:.1em; color:var(--w-ink);
  margin:10px 0 0; padding-bottom:18px; position:relative; line-height:1.4;
}
.sys-legal .sys-pagehead__ja::after{
  content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:40px; height:2px; background:var(--w-gold);
}

/* ---------- 目次タブ ---------- */
.sys-legal .sys-toc{
  display:grid; grid-template-columns:repeat(3,1fr); gap:12px;
  max-width:760px; margin:0 auto 52px;
}
.sys-legal .sys-toc__item{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  background:var(--w-cream2); border:1px solid var(--w-line); border-radius:10px;
  padding:18px 12px; text-align:center;
  transition:transform .2s, box-shadow .25s, border-color .25s;
}
.sys-legal .sys-toc__item:hover{
  transform:translateY(-2px); border-color:var(--w-gold); opacity:1;
  box-shadow:0 8px 20px rgba(90,70,40,.08);
}
.sys-legal .sys-toc__en{
  font-family:var(--w-serif); font-size:12px; letter-spacing:.24em; color:var(--w-gold);
}
.sys-legal .sys-toc__ja{ font-size:13px; font-weight:700; color:var(--w-ink); letter-spacing:.03em; }

/* ---------- 各セクションをカード化 ---------- */
.sys-legal .section__block{
  background:var(--w-paper); border:1px solid var(--w-line); border-radius:12px;
  padding:30px 34px; margin:0 auto 26px; max-width:880px;
  scroll-margin-top:110px; /* アンカー移動時に固定ヘッダーへ潜らない */
}
.sys-legal .section__title-h2,.sys-legal .section__title-h1{
  font-size:18px; font-weight:700; letter-spacing:.04em; color:var(--w-ink);
  margin:0 0 16px; padding-left:14px; position:relative; line-height:1.6;
}
.sys-legal .section__title-h2::before,.sys-legal .section__title-h1::before{
  content:""; position:absolute; left:0; top:.2em; bottom:.2em; width:3px;
  background:var(--w-gold); border-radius:2px;
}

/* ---------- 項目を横並びの表組みに（ラベル左／内容右） ---------- */
.sys-legal .dl-vertical-list{
  border-top:1px solid var(--w-line); margin:18px 0 0;
  display:grid; grid-template-columns:200px 1fr;
}
.sys-legal .dl-vertical-list__title{
  grid-column:1; color:var(--w-ink); font-size:13px; font-weight:700; letter-spacing:.02em;
  padding:16px 18px 16px 4px; border-bottom:1px solid var(--w-line);
  display:flex; align-items:center;
}
.sys-legal .dl-vertical-list__content{
  grid-column:2; padding:16px 4px 16px 18px; border-bottom:1px solid var(--w-line);
  font-size:13.5px; color:#4f483f; line-height:1.9; margin:0; border-left:1px solid var(--w-line);
}
.sys-legal .dl-vertical-list__content img{ margin-bottom:6px; }
/* 事業者情報など .row 内に dl が並ぶ場合も1枚の表として連続させる */
.sys-legal .row{ display:block; }
.sys-legal .row .dl-vertical-list{ margin-top:0; border-top:none; }
.sys-legal .row .dl-vertical-list:first-child{ border-top:1px solid var(--w-line); }

/* ---------- 事業者情報は控えめに（最下部・小さめ・くすませる） ---------- */
.sys-legal .section__block--muted{
  background:var(--w-cream2); border-style:dashed; margin-top:46px;
  padding:24px 30px; max-width:760px;
}
.sys-legal .section__block--muted .section__title-h2{
  font-size:14px; color:var(--w-muted); font-weight:700;
}
.sys-legal .section__block--muted .section__title-h2::before{ background:var(--w-line); }
.sys-legal .section__block--muted .dl-vertical-list__title{
  font-size:12px; color:var(--w-muted); font-weight:500; padding-top:12px; padding-bottom:12px;
}
.sys-legal .section__block--muted .dl-vertical-list__content{
  font-size:12.5px; color:#6f675c; padding-top:12px; padding-bottom:12px;
}

/* ---------- レスポンシブ ---------- */
@media (max-width:768px){
  .sys-legal.container{ padding:92px 20px 40px; }
  .sys-legal .sys-toc{ grid-template-columns:1fr; gap:10px; margin-bottom:36px; }
  .sys-legal .sys-toc__item{ flex-direction:row; justify-content:center; gap:10px; padding:14px; }
  .sys-legal .section__block{ padding:22px 18px; }
  .sys-legal .dl-vertical-list,
  .sys-legal .section__block--muted .dl-vertical-list{ grid-template-columns:1fr; }
  .sys-legal .dl-vertical-list__title{ border-bottom:none; padding-bottom:0; }
  .sys-legal .dl-vertical-list__content{ border-left:none; padding-left:4px; padding-top:6px; }
}