/* ================================================================
   HUG Foundation — Legal Pages CSS  (legal.css)
   page-common.php が読み込む共通スタイル
   ================================================================ */

/* ================================================================
   01. HERO（コンパクト版）
   ================================================================ */
.legal-hero {
  position: relative;
  padding: 180px 80px 100px;
  background: var(--charcoal);
  overflow: hidden;
}
.legal-hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 80px; right: 80px;
  height: 1px;
  background: linear-gradient(to right,
    transparent 0%,
    rgba(201,169,110,0.25) 20%,
    rgba(201,169,110,0.25) 80%,
    transparent 100%
  );
}

/* 背景装飾 */
.legal-hero-bg {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background:
    radial-gradient(ellipse at 15% 60%, rgba(201,169,110,0.07) 0%, transparent 50%),
    radial-gradient(ellipse at 85% 30%, rgba(201,169,110,0.04) 0%, transparent 40%);
  pointer-events: none;
}

.legal-hero-page-label {
  position: absolute;
  top: 120px; left: 80px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 1;
}
.legal-label-en {
  font-family: 'Cormorant Garamond', serif;
  font-size: var(--fs-micro);
  font-style: italic;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: rgba(201,169,110,0.7);
}
.legal-label-slash { color: rgba(201,169,110,0.3); font-size: var(--fs-micro); }
.legal-label-ja {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-wide);
  color: rgba(245,240,232,0.5);
  font-weight: 300;
}

.legal-hero-content {
  position: relative;
  z-index: 1;
  max-width: 900px;
}
.legal-hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 28px;
}
.legal-eyebrow-line {
  display: block;
  width: 40px; height: 1px;
  background: var(--gold);
  opacity: 0.7;
}
.legal-eyebrow-text {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--gold);
  font-size: var(--fs-sm);
}
.legal-hero-title {
  font-family: 'Noto Serif JP', serif;
  font-size: clamp(1.6rem, 3.5vw, 2.8rem);
  font-weight: 400;
  color: var(--cream);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  margin-bottom: 20px;
}
.legal-hero-sub {
  font-size: var(--fs-sm);
  color: rgba(245,240,232,0.5);
  letter-spacing: var(--ls-wide);
  font-weight: 300;
}

/* 最終更新日 */
.legal-updated {
  margin-top: 28px;
  font-size: var(--fs-micro);
  color: rgba(201,169,110,0.5);
  letter-spacing: var(--ls-eyebrow);
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
}


/* ================================================================
   02. BODY — コンテンツ
   ================================================================ */
.legal-body {
  background: var(--warm-white);
  padding: 100px 80px 140px;
}
.legal-body-inner {
  max-width: 860px;
  margin: 0 auto;
}


/* ================================================================
   03. CONTENT — WordPress エディタ出力のスタイリング
   the_content() が出力する要素に legal-section と同じ見た目を適用
   ================================================================ */

/* 全体コンテナ */
.legal-content {
  /* セクション間の区切り線ルールをブロック単位で再現 */
}

/* ——— 見出し ——— */
.legal-content h2 {
  font-family: 'Noto Serif JP', serif;
  font-size: clamp(1rem, 1.6vw, 1.3rem);
  font-weight: 400;
  color: var(--text);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-normal);
  margin: 72px 0 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(44,40,32,0.08);
}
.legal-content h2:first-child { margin-top: 0; }

.legal-content h3 {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--charcoal);
  letter-spacing: var(--ls-wide);
  margin: 32px 0 16px;
}

/* ——— 段落 ——— */
.legal-content p {
  font-size: var(--fs-sm);
  color: var(--text-light);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-normal);
  font-weight: 300;
  margin-bottom: 16px;
}

/* ——— リスト ——— */
.legal-content ul,
.legal-content ol {
  margin: 16px 0 20px 0;
  padding-left: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.legal-content ul li,
.legal-content ol li {
  font-size: var(--fs-sm);
  color: var(--text-light);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-normal);
  font-weight: 300;
  padding-left: 20px;
  position: relative;
}
.legal-content ul li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--gold);
  opacity: 0.6;
  font-family: 'Cormorant Garamond', serif;
}
.legal-content ol {
  counter-reset: legal-ol;
}
.legal-content ol li::before {
  content: counter(legal-ol, decimal-leading-zero);
  counter-increment: legal-ol;
  position: absolute;
  left: 0;
  color: var(--gold);
  opacity: 0.5;
  font-family: 'Cormorant Garamond', serif;
  font-size: var(--fs-micro);
  font-style: italic;
}

/* ——— テーブル ——— */
.legal-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
  font-size: var(--fs-sm);
}
.legal-content th,
.legal-content td {
  padding: 18px 24px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid rgba(44,40,32,0.07);
  font-weight: 300;
  letter-spacing: var(--ls-normal);
  line-height: var(--lh-body);
}
.legal-content th {
  width: 32%;
  color: var(--charcoal);
  font-weight: 500;
  font-family: 'Zen Kaku Gothic New', sans-serif;
  background: rgba(44,40,32,0.03);
  white-space: nowrap;
}
.legal-content td {
  color: var(--text-light);
}
.legal-content tr:last-child th,
.legal-content tr:last-child td {
  border-bottom: none;
}

/* ——— リンク ——— */
.legal-content a {
  color: var(--soft-brown);
  text-decoration: underline;
  text-decoration-color: rgba(139,115,85,0.3);
  transition: color 0.25s;
}
.legal-content a:hover { color: var(--gold); }

/* ——— Gutenberg ブロック間隔リセット ——— */
.legal-content .wp-block-group { margin-bottom: 0; }
.legal-content :last-child { margin-bottom: 0; }

/* ——— 注記 <small>・<em> ——— */
.legal-content small,
.legal-content .wp-element-caption {
  font-size: var(--fs-micro);
  color: rgba(44,40,32,0.4);
  letter-spacing: 0.04em;
  line-height: 1.9;
  font-weight: 300;
  display: block;
  margin-top: 12px;
}


/* ================================================================
   04. セクション構造
   ================================================================ */
.legal-section {
  margin-bottom: 72px;
  padding-bottom: 72px;
  border-bottom: 1px solid rgba(44,40,32,0.07);
}
.legal-section:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.legal-section-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: var(--fs-micro);
  font-style: italic;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--gold);
  display: block;
  margin-bottom: 12px;
}
.legal-section-title {
  font-family: 'Noto Serif JP', serif;
  font-size: clamp(1rem, 1.6vw, 1.3rem);
  font-weight: 400;
  color: var(--text);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-normal);
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(44,40,32,0.08);
}

.legal-text {
  font-size: var(--fs-sm);
  color: var(--text-light);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-normal);
  font-weight: 300;
  margin-bottom: 20px;
}
.legal-text:last-child { margin-bottom: 0; }

.legal-list {
  margin: 16px 0 20px 0;
  padding-left: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.legal-list li {
  font-size: var(--fs-sm);
  color: var(--text-light);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-normal);
  font-weight: 300;
  padding-left: 20px;
  position: relative;
}
.legal-list li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--gold);
  opacity: 0.6;
  font-family: 'Cormorant Garamond', serif;
}

.legal-note {
  font-size: var(--fs-micro);
  color: rgba(44,40,32,0.4);
  letter-spacing: 0.04em;
  line-height: 1.9;
  font-weight: 300;
  margin-top: 12px;
}


/* ================================================================
   04. テーブル（特商法ページ用）
   ================================================================ */
.legal-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}
.legal-table th,
.legal-table td {
  padding: 18px 24px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid rgba(44,40,32,0.07);
  font-size: var(--fs-sm);
  font-weight: 300;
  letter-spacing: var(--ls-normal);
  line-height: var(--lh-body);
}
.legal-table th {
  width: 32%;
  color: var(--charcoal);
  font-weight: 500;
  font-family: 'Zen Kaku Gothic New', sans-serif;
  background: rgba(44,40,32,0.03);
  white-space: nowrap;
}
.legal-table td {
  color: var(--text-light);
}
.legal-table tr:last-child th,
.legal-table tr:last-child td {
  border-bottom: none;
}

/* メールリンク */
.legal-table td a {
  color: var(--soft-brown);
  text-decoration: underline;
  text-decoration-color: rgba(139,115,85,0.3);
  transition: color 0.25s;
}
.legal-table td a:hover { color: var(--gold); }


/* ================================================================
   05. コンタクトボックス
   ================================================================ */
.legal-contact-box {
  margin-top: 60px;
  padding: 48px 56px;
  background: var(--charcoal);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}
.legal-contact-box-text h3 {
  font-family: 'Noto Serif JP', serif;
  font-size: var(--fs-md);
  font-weight: 400;
  color: var(--cream);
  line-height: var(--lh-heading);
  margin-bottom: 12px;
}
.legal-contact-box-text p {
  font-size: var(--fs-sm);
  color: rgba(245,240,232,0.5);
  letter-spacing: var(--ls-normal);
  font-weight: 300;
}
.legal-contact-box-btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 16px 44px;
  border: 1px solid rgba(201,169,110,0.4);
  font-size: var(--fs-micro);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.35s, color 0.35s;
  flex-shrink: 0;
}
.legal-contact-box-btn:hover {
  background: var(--gold);
  color: var(--charcoal);
}


/* ================================================================
   06. RESPONSIVE
   ================================================================ */
@media (max-width: 900px) {
  .legal-hero { padding: 160px 40px 80px; }
  .legal-hero-page-label { left: 40px; top: 100px; }
  .legal-body { padding: 72px 40px 100px; }

  .legal-table th { width: 38%; white-space: normal; }
  .legal-contact-box { padding: 40px 32px; }
}

@media (max-width: 640px) {
  .legal-hero { padding: 140px 24px 60px; }
  .legal-hero-page-label { display: none; }
  .legal-body { padding: 56px 20px 80px; }

  .legal-table,
  .legal-table tbody,
  .legal-table tr,
  .legal-table th,
  .legal-table td {
    display: block;
    width: 100%;
  }
  .legal-table th {
    padding: 16px 20px 8px;
    border-bottom: none;
    color: var(--charcoal);
    font-size: var(--fs-micro);
    letter-spacing: 0.06em;
  }
  .legal-table td {
    padding: 4px 20px 20px;
  }
  .legal-contact-box {
    flex-direction: column;
    align-items: flex-start;
    padding: 32px 24px;
  }
  .legal-contact-box-btn { width: 100%; justify-content: center; }
}