/* ============================================
   法務系ページ共通スタイル
   （特商法 / プライバシーポリシー）
   ベースは style.css のカラートークンを再利用
   ============================================ */

/* --- body / 背景 --- */
body.legal-page {
  background: var(--color-bg-soft, #f7f5f0);
  color: var(--color-text, #2c2a26);
  font-family: 'Noto Sans JP', sans-serif;
  line-height: 1.8;
}

/* --- パンくず --- */
.legal-breadcrumb {
  padding: 18px 0 0;
  font-size: 0.9rem;
  color: var(--color-text-sub, #4e4c48);
}
.legal-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.legal-breadcrumb li {
  display: flex;
  align-items: center;
  gap: 10px;
}
.legal-breadcrumb li + li::before {
  content: '›';
  color: var(--color-text-muted, #8a8880);
}
.legal-breadcrumb a {
  color: var(--color-accent, #1f4e6b);
  text-decoration: none;
}
.legal-breadcrumb a:hover {
  text-decoration: underline;
}
.legal-breadcrumb [aria-current="page"] {
  color: var(--color-text-sub, #5a5853);
}

/* --- メイン --- */
.legal-main {
  padding: 40px 0 80px;
}

/* --- ページ見出し --- */
.legal-head {
  text-align: center;
  margin-bottom: 48px;
  padding: 24px 0 28px;
  border-bottom: 1px solid var(--color-border, #e6e1d6);
}
.legal-eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  color: var(--color-accent, #1f4e6b);
  margin: 0 0 10px;
  font-weight: 500;
}
.legal-title {
  font-family: 'Noto Serif JP', serif;
  font-size: 2rem;
  line-height: 1.5;
  color: var(--color-text, #1f1d1a);
  margin: 0 0 14px;
  font-weight: 700;
}
.legal-lead {
  font-size: 0.95rem;
  color: var(--color-text-sub, #5a5853);
  margin: 0;
}
/* 冒頭説明文を左寄せ・行間を整えて可読性を上げる（プライバシーポリシー用） */
.legal-lead.legal-lead-left {
  text-align: left;
  max-width: 720px;
  margin: 0 auto;
  line-height: 1.95;
}

/* --- 定義リスト --- */
.legal-list {
  background: #ffffff;
  border: 1px solid var(--color-border, #e6e1d6);
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(30, 40, 50, 0.04);
  padding: 8px 28px;
  margin: 0 0 32px;
}
.legal-row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 24px;
  padding: 22px 0;
  border-bottom: 1px solid var(--color-border-soft, #efeadd);
}
.legal-row:last-child {
  border-bottom: none;
}
.legal-row dt {
  font-weight: 700;
  color: var(--color-accent, #1f4e6b);
  font-size: 0.95rem;
  line-height: 1.6;
  padding-top: 2px;
}
.legal-row dd {
  margin: 0;
  color: var(--color-text, #2c2a26);
  font-size: 0.95rem;
  line-height: 1.85;
}

/* --- 箇条書き --- */
.legal-bullets {
  list-style: none;
  padding: 0;
  margin: 4px 0 8px;
}
.legal-bullets li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 4px;
}
.legal-bullets li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 0.75em;
  width: 6px;
  height: 6px;
  background: var(--color-accent, #1f4e6b);
  border-radius: 50%;
}

/* 長文項目（料金・お見積／クーリング・オフ）の段落区切りを軽く整える */
.legal-row dd.legal-paragraph p {
  margin: 0 0 8px;
}
.legal-row dd.legal-paragraph p:last-child {
  margin-bottom: 0;
}

/* 取得情報・利用目的カード内の箇条書きの視認性をわずかに向上 */
.legal-section ul.privacy-itemized {
  list-style: none;
  padding-left: 0;
  margin: 10px 0 4px;
}
.legal-section ul.privacy-itemized li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 8px;
  line-height: 1.85;
}
.legal-section ul.privacy-itemized li::before {
  content: '・';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-accent, #1f4e6b);
  font-weight: 700;
}

/* --- 補足文言 --- */
.legal-note {
  display: inline-block;
  font-size: 0.85rem;
  color: var(--color-text-sub, #5a5853);
  margin-top: 4px;
}
.legal-zip {
  display: inline-block;
  font-size: 0.9rem;
  color: var(--color-text-sub, #5a5853);
  margin-bottom: 2px;
}

/* --- リンク --- */
.legal-link,
.legal-tel {
  color: var(--color-accent, #1f4e6b);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 500;
}
.legal-link:hover,
.legal-tel:hover {
  color: var(--color-accent-dark, #163a51);
}

/* --- 最終更新日 --- */
.legal-updated {
  text-align: right;
  font-size: 0.8rem;
  color: var(--color-text-muted, #a6a49c);
  margin: 18px 4px 28px;
  letter-spacing: 0.02em;
}

/* --- 戻る導線 --- */
.legal-back {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
.legal-back-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  background: #ffffff;
  color: var(--color-accent, #1f4e6b);
  border: 1.5px solid var(--color-accent, #1f4e6b);
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  transition: all 0.2s ease;
}
.legal-back-link:hover {
  background: var(--color-accent, #1f4e6b);
  color: #ffffff;
}

/* --- プライバシーポリシー 本文 --- */
.legal-section {
  background: #ffffff;
  border: 1px solid var(--color-border, #e6e1d6);
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(30, 40, 50, 0.04);
  padding: 28px 32px;
  margin: 0 0 20px;
}
.legal-section h2 {
  font-size: 1.15rem;
  color: var(--color-accent, #1f4e6b);
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--color-border-soft, #efeadd);
  font-weight: 700;
}
.legal-section h3 {
  font-size: 1rem;
  color: var(--color-text, #2c2a26);
  margin: 18px 0 8px;
  font-weight: 700;
}
.legal-section p {
  margin: 0 0 12px;
  font-size: 0.95rem;
  line-height: 1.85;
}
.legal-section p:last-child {
  margin-bottom: 0;
}
.legal-section ul:not(.legal-bullets) {
  padding-left: 1.4em;
  margin: 8px 0 16px;
}
.legal-section ul:not(.legal-bullets) li {
  margin-bottom: 4px;
  line-height: 1.8;
}

/* --- プライバシーポリシー お問い合わせ窓口の定義リスト --- */
.privacy-contact {
  margin: 8px 0 0;
  background: var(--color-bg-soft, #f7f5f0);
  border: 1px solid var(--color-border-soft, #efeadd);
  border-radius: 8px;
  padding: 18px 22px;
}
.privacy-contact-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px dashed var(--color-border-soft, #efeadd);
}
.privacy-contact-row:last-child {
  border-bottom: none;
}
.privacy-contact-row dt {
  font-weight: 700;
  color: var(--color-accent, #1f4e6b);
  font-size: 0.9rem;
}
.privacy-contact-row dd {
  margin: 0;
  font-size: 0.92rem;
}

@media (max-width: 768px) {
  .privacy-contact {
    padding: 14px 16px;
  }
  .privacy-contact-row {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 10px 0;
  }
  .privacy-contact-row dt {
    font-size: 0.85rem;
  }
  .privacy-contact-row dd {
    font-size: 0.9rem;
  }
}

/* --- フッター法務ナビ --- */
.footer-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin: 10px 0 6px;
  font-size: 0.9rem;
}
.footer-nav a {
  color: var(--color-text-sub, #4e4c48);
  text-decoration: none;
}
.footer-nav a:hover {
  color: var(--color-accent, #1f4e6b);
  text-decoration: underline;
}
.footer-nav-sep {
  color: var(--color-text-muted, #8a8880);
}

/* ============================================
   LP本体への追加：法務導線（最小差分）
   CTAより目立たない / 既存余白に馴染ませる
   ============================================ */

/* フォーム送信ボタン下のクーリング・オフ補足文 */
.cta-legal-note {
  margin: 14px auto 0;
  max-width: 640px;
  font-size: 0.8rem;
  line-height: 1.75;
  color: var(--color-text-sub, #5a5853);
  text-align: center;
}
.cta-legal-note a {
  color: var(--color-accent, #1f4e6b);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cta-legal-note a:hover {
  color: var(--color-accent-dark, #163a51);
}
/* 補助テキストとしてもう一段なじませる（クーリング・オフ補足文用） */
/* 詳細度を上げて他ルールの上書きを確実にする */
.cta-section .cta-box p.cta-legal-note.cta-legal-note-sub,
p.cta-legal-note.cta-legal-note-sub {
  font-size: 0.72rem;
  color: #9a9890;
  line-height: 1.75;
  margin-top: 22px;
  opacity: 1;
}
.cta-section .cta-box p.cta-legal-note.cta-legal-note-sub a,
p.cta-legal-note.cta-legal-note-sub a {
  color: #7a7872;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cta-section .cta-box p.cta-legal-note.cta-legal-note-sub a:hover,
p.cta-legal-note.cta-legal-note-sub a:hover {
  color: var(--color-accent, #1f4e6b);
}

/* フォーム下の補助法務リンク（さらに控えめに） */
/* 詳細度を上げて他ルールの上書きを確実にする */
.cta-section .cta-box nav.cta-legal-links,
nav.cta-legal-links {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin: 8px 0 0;
  font-size: 0.76rem;
}
.cta-section .cta-box nav.cta-legal-links a,
nav.cta-legal-links a {
  color: #8a8880;
  text-decoration: none;
  padding: 6px 4px;
}
.cta-section .cta-box nav.cta-legal-links a:hover,
nav.cta-legal-links a:hover {
  color: var(--color-accent, #1f4e6b);
  text-decoration: underline;
}
.cta-legal-sep {
  color: #c2c0b8;
}

@media (max-width: 768px) {
  .cta-legal-note {
    font-size: 0.78rem;
    margin-top: 12px;
    padding: 0 4px;
  }
  .cta-legal-links {
    gap: 4px 8px;
    font-size: 0.82rem;
  }
  .cta-legal-links a {
    padding: 8px 6px; /* スマホ時のタップ領域を確保 */
  }
}

/* ============================================
   スマホ対応
   ============================================ */
@media (max-width: 768px) {
  .legal-main {
    padding: 24px 0 60px;
  }
  .legal-head {
    margin-bottom: 32px;
    padding: 12px 0 20px;
  }
  .legal-title {
    font-size: 1.5rem;
    line-height: 1.5;
  }
  .legal-lead {
    font-size: 0.88rem;
    text-align: left;
  }
  .legal-list {
    padding: 4px 18px;
    border-radius: 8px;
  }
  .legal-row {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 18px 0;
  }
  .legal-row dt {
    font-size: 0.9rem;
    padding-top: 0;
  }
  .legal-row dd {
    font-size: 0.92rem;
  }
  .legal-section {
    padding: 22px 20px;
    border-radius: 8px;
  }
  .legal-section h2 {
    font-size: 1.05rem;
  }
  .legal-section p,
  .legal-section li {
    font-size: 0.9rem;
  }
  .legal-back-link {
    width: 100%;
    justify-content: center;
    padding: 14px 20px;
    box-sizing: border-box;
  }
  .legal-breadcrumb {
    font-size: 0.78rem;
    padding: 14px 0 0;
  }

  /* ============================================
     特商法ページ モバイル専用微調整（PC表示には影響なし）
     ============================================ */

  /* 【対象1】ヘッダー導入部の縦余白を詰める（パンくず・Legal Notice・タイトル・説明文・区切り線） */
  body.legal-page .legal-breadcrumb {
    padding: 10px 0 0;
  }
  body.legal-page .legal-head {
    margin-bottom: 24px;
    padding: 8px 0 14px;
  }
  body.legal-page .legal-eyebrow {
    margin: 0 0 6px;
  }
  body.legal-page .legal-title {
    margin: 0 0 8px;
  }
  body.legal-page .legal-lead {
    line-height: 1.75;
  }

  /* 【対象2】運営サービス名の改行調整（長い括弧内を折り返しやすく） */
  .legal-row dd {
    word-break: normal;
    overflow-wrap: anywhere;
    line-break: strict;
  }

  /* 【対象3】メールアドレスのはみ出し防止・行間調整 */
  .legal-row dd a.legal-tel[href^="mailto:"] {
    word-break: break-all;
    overflow-wrap: anywhere;
    line-height: 1.7;
    display: inline-block;
  }

  /* 【対象4】長文項目（料金・お見積／お支払い方法／お支払い時期／クーリング・オフ／契約不適合・返品）の
     段落余白・行間・箇条書き間隔をモバイルでわずかに広げて可読性を上げる */
  .legal-row dd.legal-paragraph p {
    margin: 0 0 10px;
    line-height: 1.85;
  }
  .legal-row dd.legal-paragraph p:last-child {
    margin-bottom: 0;
  }
  .legal-bullets li {
    margin-bottom: 6px;
    line-height: 1.75;
  }
  .legal-bullets li::before {
    top: 0.7em;
  }
  .legal-note {
    line-height: 1.7;
    margin-top: 6px;
  }

  /* 【対象5】ページ下部（最終更新日・戻るボタン・フッター間）の縦間隔をわずかに詰める */
  body.legal-page .legal-updated {
    margin: 12px 4px 16px;
  }
  body.legal-page .legal-back {
    margin-top: 12px;
  }
  body.legal-page .site-footer {
    margin-top: 0;
  }

  /* ============================================
     プライバシーポリシーページ モバイル専用微調整
     （PC表示には影響なし／privacy.html のみ想定）
     ============================================ */

  /* 【対象1】ヘッダー直下の導入部（パンくず／Privacy Policy／タイトル／説明文／区切り線）の縦圧迫感を軽減 */
  body.legal-page .privacy-itemized ~ *,
  body.legal-page .privacy-contact ~ * {
    /* スコープ用ダミー（後続ルールに影響させない） */
  }

  /* 【対象2】「1. 取得する情報」一覧の可読性：余白と字下げを整える */
  .privacy-itemized {
    padding-left: 1.2em;
    margin: 6px 0 0;
  }
  .privacy-itemized li {
    margin-bottom: 8px;
    line-height: 1.8;
    padding-left: 2px;
    text-indent: 0;
  }
  .privacy-itemized li:last-child {
    margin-bottom: 0;
  }
  .privacy-itemized li::marker {
    color: var(--color-accent, #1f4e6b);
  }

  /* 【対象3】「2. 利用目的」一覧も同様に整える（.privacy-itemized で共通適用済み）
     2行以上の項目の2行目以降のぶら下がりインデントを自然に */
  .privacy-itemized li {
    padding-left: 0;
  }

  /* 【対象4】「6. 開示・訂正・削除等」本文の行間をわずかに広げ密度を下げる */
  body.legal-page .legal-section p {
    line-height: 1.9;
  }

  /* 【対象5】「7. お問い合わせ窓口」メールアドレスの折返し・行高・リンク範囲 */
  .privacy-contact a.legal-tel[href^="mailto:"] {
    word-break: break-all;
    overflow-wrap: anywhere;
    line-height: 1.7;
    display: inline-block;
    padding: 2px 0;
  }

  /* 【対象6】ページ下部（最終更新日／戻るボタン／フッター間）の縦余白を少し締める
     ※【対象5】セクション全体と整合を取りつつ、プライバシーページ側の詰めを少しだけ強化 */
  body.legal-page .legal-updated {
    margin: 10px 4px 14px;
  }
  body.legal-page .legal-back {
    margin-top: 10px;
    margin-bottom: 20px;
  }
}

/* ============================================
   【対象1】プライバシーポリシー導入部 スマホ微調整
   （狭いスコープで末尾追加／PC表示は不変）
   ============================================ */
@media (max-width: 768px) {
  body.legal-page .legal-breadcrumb {
    padding: 8px 0 0;
    font-size: 0.8rem;
  }
  body.legal-page .legal-head {
    margin-bottom: 20px;
    padding: 6px 0 12px;
  }
  body.legal-page .legal-eyebrow {
    margin: 0 0 4px;
    letter-spacing: 0.08em;
  }
  body.legal-page .legal-title {
    margin: 0 0 6px;
    line-height: 1.45;
  }
  body.legal-page .legal-lead {
    margin: 0;
    line-height: 1.8;
  }
  /* 特商法ページのタイトルのみ：スマホで1行表示にする
     （ブロック内の他のスタイル・他ページには影響なし） */
  body.legal-page.tokushoho-page .legal-title {
    white-space: nowrap;
    font-size: 1.32rem;
    letter-spacing: 0;
  }
}

/* ============================================
   LP 問い合わせフォーム「プライバシーポリシー同意」行
   スマホ専用：アイコンとテキスト1行目中央を自然に揃える
   （PC表示は不変・この同意チェック行のみ最小差分で調整）
   ============================================ */
@media (max-width: 768px) {
  /* label 全体を flex-start に切り替えて、複数行折り返し時も不自然にならないように */
  .form-row-check .form-check {
    display: inline-flex;
    align-items: flex-start;
    gap: 10px;
  }
  /* チェックボックスを 1 行目の文字中央に合わせる（line-height 1.6 × 0.9rem を目安に微調整） */
  .form-row-check .form-checkbox {
    margin-top: 0.35em;
    flex-shrink: 0;
  }
  /* テキスト側は折り返し時の 2 行目以降のぶら下がりを自然に */
  .form-row-check .form-check-text {
    line-height: 1.6;
  }
}

/* ============================================
   LP 問い合わせフォーム「訪問希望日時」ブロック
   スマホ専用：各行のラベルと入力欄の縦位置を自然に揃える
   （PC表示は不変・このブロックのみ最小差分で調整）
   ----
   確定方針：iOS Safari の input[type="date"] は UA 側で
   内部高さを膨らませるため、CSS では完全制御できない。
   → スマホ時のみ input[type="date"] 自体を画面外に隠し、
     .form-date-display（span）を疑似入力欄として表示。
     タップで隠し input の showPicker() を呼び出す。
   ============================================ */
@media (max-width: 768px) {
  /* 各行を縦中央基準で揃え、上下余白を均一に */
  .form-row.form-row-visit .form-visit-row {
    align-items: center;
    min-height: 48px;
    row-gap: 0;
  }
  /* 左ラベル：入力欄と同じ高さで中央に置く */
  .form-row.form-row-visit .form-visit-sublabel {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    margin: 0;
    padding: 0;
    line-height: 1.4;
  }

  /* 日付ラッパー：スマホでも見た目用ボタン＋非表示ネイティブ input 構成
     （iOS Safari で input[type="date"] の内部高さ膨張と文字位置ズレを
       回避するため、表示は button 側に完全委譲） */
  .form-row.form-row-visit .form-date-wrap {
    position: relative;
    display: block;
    height: 48px;
  }
  .form-row.form-row-visit .form-select-wrap {
    display: block;
  }

  /* スマホではボタン型UIを非表示にし、カスタム日付ピッカー（年月日3セレクト）に切替
     （iOS Safari の input[type="date"] の文字位置ズレを根本回避） */
  .form-row.form-row-visit .form-date-wrap .form-date-btn {
    display: none !important;
  }
  /* カスタム日付ピッカー：年・月・日を横並びで表示（時間帯プルダウンと同じ見た目） */
  .form-row.form-row-visit .form-date-wrap .form-date-picker {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 6px;
    width: 100%;
    height: 48px;
    box-sizing: border-box;
  }
  .form-row.form-row-visit .form-date-wrap .form-date-picker .form-select {
    width: 100%;
    height: 48px;
    min-height: 48px;
    max-height: 48px;
    padding: 0 26px 0 10px;
    font-size: 16px; /* iOS ズーム抑制 */
    line-height: 1;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
    background-clip: padding-box;
    text-align: left;
  }

  /* ネイティブ input[type="date"] はスマホでも視覚的に完全非表示
     （カレンダーUI起動・value送信・required判定のみ機能として保持） */
  .form-row.form-row-visit .form-date-wrap .form-input-date-native {
    position: absolute !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: -1 !important;
    clip: rect(0 0 0 0) !important;
    overflow: hidden !important;
  }

  /* プルダウン側は従来通り、日付欄と寸法を揃える */
  .form-row.form-row-visit .form-select {
    display: block;
    width: 100%;
    height: 48px;
    min-height: 48px;
    max-height: 48px;
    padding: 0 34px 0 14px;
    font-size: 16px;
    line-height: 1;
    box-sizing: border-box;
    vertical-align: middle;
    -webkit-appearance: none;
    appearance: none;
    background-clip: padding-box;
  }

  /* セット間の上下余白も均一に */
  .form-row.form-row-visit .form-visit-set {
    gap: 10px;
  }
  .form-row.form-row-visit .form-visit-set + .form-visit-set {
    margin-top: 10px;
  }
}

/* ============================================
   LP フォーム下「チェックマーク付き箇条書き」ブロック
   スマホ専用：アイコンとテキスト1行目の中心を自然に揃える
   （PC表示は不変・このブロックのみ最小差分で調整）
   ----
   真の原因：
   1) 既存 CSS で .form-notes-outer li i に margin-top: 3px が
      指定され、アイコンが下寄りに見えていた。
   2) Font Awesome の circle-check グリフは、アイコン内で
      チェック記号が視覚的中央よりわずかに下寄りにデザイン
      されているため、line-height を揃えただけでは
      「アイコン自体が下にある」ように錯覚する。
   → アイコンを 1 行目と同じ行高の inline-block として扱い、
      margin-top をゼロにリセットしつつ、光学補正で
      ごくわずかに上へ移動させる（negative translateY）。
   ============================================ */
@media (max-width: 768px) {
  .form-notes-outer li {
    align-items: flex-start;
    gap: 10px;
  }
  .form-notes-outer li i {
    /* テキスト側（font-size 0.82rem × line-height 1.8）の 1 行目中心に
       アイコン中心を合わせる */
    display: inline-block;
    font-size: 0.9rem;
    line-height: 1.8;          /* 本文と同じ行高で1行目相当のボックス高を確保 */
    height: calc(0.82rem * 1.8); /* 本文1行分の行ボックス高に固定 */
    margin-top: 0;
    align-self: flex-start;
    vertical-align: middle;
    /* Font Awesome circle-check の光学的下寄りを視覚的に補正（上方向へ微量移動） */
    transform: translateY(-0.02em);
  }
  .form-notes-outer li span {
    line-height: 1.8;
  }
}