/*
 * 法務ページ（特定商取引法に基づく表記・プライバシーポリシー）の共通スタイル。
 * 配色と余白は app/renai_numa/styles.css に合わせてあるが、
 * 法務ページは診断アプリと独立して開かれる（決済画面やフッターからの直リンク）ため、
 * アプリ側のCSSには依存させず、このファイルだけで完結させている。
 */

:root {
  --bg: #110814;
  --bg-glow-1: rgba(225, 29, 72, 0.25);
  --bg-glow-2: rgba(124, 58, 237, 0.22);
  --panel-soft: rgba(27, 13, 34, 0.85);
  --border: rgba(255, 255, 255, 0.12);
  --text: #fff7ed;
  --text-muted: #c9b9c8;
  --gold: #d6b35a;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at top left, var(--bg-glow-1), transparent 28rem),
    radial-gradient(circle at bottom right, var(--bg-glow-2), transparent 26rem),
    var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN",
    "Yu Gothic", sans-serif;
  line-height: 1.8;
}

.legal {
  max-width: 680px;
  margin: 0 auto;
  padding: 28px 16px 64px;
}

.legal-card {
  background: var(--panel-soft);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 26px 22px;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.4);
}

.eyebrow {
  display: inline-flex;
  margin: 0 0 12px;
  color: var(--gold);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  border: 1px solid rgba(214, 179, 90, 0.35);
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(214, 179, 90, 0.08);
}

h1 {
  margin: 0 0 8px;
  font-size: 22px;
  line-height: 1.5;
}

.updated {
  margin: 0 0 26px;
  color: var(--text-muted);
  font-size: 13px;
}

h2 {
  margin: 32px 0 10px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
  font-size: 16px;
  color: var(--gold);
}

h2:first-of-type {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}

p,
li {
  font-size: 15px;
}

p {
  margin: 0 0 14px;
}

ul,
ol {
  margin: 0 0 14px;
  padding-left: 1.3em;
}

li {
  margin-bottom: 6px;
}

a {
  color: var(--gold);
}

/* 定義リスト形式の表（特商法の表記）。狭い画面では縦積みになる。
 *
 * **`table-layout: fixed` で列幅を内容から切り離す。**
 * 既定（auto）だと列幅が中身の長さで動くので、
 * 「販売事業者の氏名および所在地、電話番号、メールアドレス」のような長い見出しが
 * 左の列を押し広げてしまう。それを避けるために以前は見出し側を
 * `white-space: nowrap` で固め、HTMLに手で `<br>` を入れて改行位置を作っていた。
 * **その `<br>` がスマホで悪さをした**——狭い画面では見出しが縦積み（block）になって
 * 幅がまるまる使えるのに、手で入れた改行だけが残り、見出しが4行に伸びていた。
 * 幅を先に決めてしまえば手動の改行は要らず、どの画面でも自然に折り返す */
.legal-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 18px;
  table-layout: fixed;
}

.legal-table th,
.legal-table td {
  border-bottom: 1px solid var(--border);
  padding: 14px 4px;
  text-align: left;
  vertical-align: top;
  font-size: 15px;
}

.legal-table th {
  width: 34%;
  color: var(--text-muted);
  font-weight: 700;
}

@media (max-width: 520px) {
  .legal-table th,
  .legal-table td {
    display: block;
    width: 100%;
  }

  .legal-table th {
    border-bottom: none;
    padding-bottom: 0;
    font-size: 13px;
  }

  .legal-table td {
    padding-top: 4px;
  }
}

/* 見落とされると困る条項（返品不可・未成年）を囲む */
.notice-box {
  margin: 0 0 18px;
  padding: 16px 16px 4px;
  border: 1px solid rgba(214, 179, 90, 0.35);
  border-radius: 14px;
  background: rgba(214, 179, 90, 0.06);
}

.notice-box p:last-child {
  margin-bottom: 12px;
}

/*
 * 戻り口。**2つある。**
 *
 * 「前のページに戻る」（button・.back-button）
 *   法務ページは無料診断・販売ページ・購入前チェック・決済画面のどこからでも開かれる。
 *   行き先を固定できないので履歴をひとつ戻す。**履歴が無いときはJSが出さない**
 *   （押しても何も起きないボタンを見せないため）。出し入れは legal-back.js。
 *
 * 「ホームへ戻る」（a・.home-link）
 *   **いつでも出る。JSが動かなくても出る。**検索やSNSからURLを直接開いた人には
 *   履歴が無く、上のボタンが出ない。**その人にとって、これが唯一の出口。**
 *
 * **見た目は .nav-button で共通、JSのフックは .back-button だけ。**
 * 一緒にすると、legal-back.js が「ホームへ戻る」にも history.back() を付けてしまう。
 */
/* 戻り口を2つ並べる。**履歴が無いときは「前のページに戻る」が出ない**ので、
   そのときは「ホームへ戻る」が横幅いっぱいになる。
   狭い画面では折り返して縦に積む */
.page-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.page-nav-top {
  margin: 0 0 22px;
}

.page-nav-bottom {
  margin: 32px 0 0;
}

/* ボタン（button）とリンク（a）を同じ見た目にする。
   **中身の中央寄せは flex で行う。**`text-align` だけに頼ると、
   button と a で既定が違ううえ、親からの継承にも左右される。
   実際、リンク側だけ文字が左に寄っていた */
.nav-button {
  flex: 1 1 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 13px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.nav-button:hover {
  background: rgba(255, 255, 255, 0.09);
}

/* **`display: flex` がブラウザ既定の `[hidden] { display: none }` を
   打ち消してしまうのを止める。**作成者スタイルのほうが強いので、
   そのままだと**履歴が無い人にも「前のページに戻る」が見えて、押しても何も起きない**
   ——legal-back.js が避けようとしている状態そのものになる。
   クラスと属性を重ねて（0,2,0）確実に打ち消す */
.nav-button[hidden] {
  display: none;
}

/* 本文に対する補足。**本文（15px）よりはっきり小さく、色も落とす。**
   行頭に ※ を置くので、その分だけ字下げして2行目以降を揃える */
.legal-note {
  margin-top: 6px;
  padding-left: 1.1em;
  text-indent: -1.1em;
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-muted);
}

/* ------------------------------------------------------------
   お問い合わせフォーム（app/contact.php）
   ------------------------------------------------------------ */

.contact-form {
  margin: 22px 0 0;
}

.contact-label {
  display: block;
  margin: 18px 0 6px;
  font-size: 14px;
  font-weight: 700;
}

.contact-required {
  margin-left: 6px;
  color: var(--gold);
  font-size: 12px;
  font-weight: 400;
}

.contact-optional {
  margin-left: 6px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 400;
}

.contact-input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font-family: inherit;
  /* **16px を下回らせない。**iOSは小さいと入力時に画面を勝手に拡大する */
  font-size: 16px;
  line-height: 1.7;
}

.contact-input:focus {
  outline: 2px solid rgba(214, 179, 90, 0.6);
  outline-offset: 1px;
}

/* プルダウン。**入力欄と同じ見た目に揃える。**
   ブラウザ既定の見た目（白背景・角丸なし）が出ないよう appearance を切り、
   自前の三角を右端に描く */
.contact-select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
    linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position:
    calc(100% - 20px) calc(50% - 2px),
    calc(100% - 14px) calc(50% - 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  cursor: pointer;
}

/* 開いたときの一覧は端末側が描く。**暗い文字が暗い背景に乗らないよう色を指定する** */
.contact-select option {
  background: #1b0d22;
  color: var(--text);
}

.contact-textarea {
  resize: vertical;
  min-height: 160px;
}

/* **黒地に白字では太字が伝わらない。**金色＋下線＋一回り大きい字で、
   ひと目で「ここを読め」と分かるようにする */
.contact-alert {
  margin: 0 0 10px;
  color: var(--gold);
  font-size: 16px;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.contact-error {
  margin: 6px 0 0;
  color: #ff9db1;
  font-size: 13px;
}

/* **reCAPTCHAの枠は 304×78px の固定寸法で、狭い画面からはみ出す。**
   使える幅＝画面幅 −32（.legal の余白）−44（.legal-card の余白）なので、
   **画面が380px未満だと収まらない**（iPhone SE は375px）。
   縮小して収める。`transform` は元の高さを残すので、器の高さも詰める */
.contact-captcha {
  margin: 22px 0 0;
}

@media (max-width: 400px) {
  .contact-captcha {
    height: 66px;          /* 78 × 0.85 */
    overflow: hidden;
  }

  .contact-captcha .g-recaptcha {
    transform: scale(0.85);   /* 304 × 0.85 = 258px */
    transform-origin: 0 0;
  }
}

@media (max-width: 340px) {
  .contact-captcha {
    height: 59px;          /* 78 × 0.75 */
  }

  .contact-captcha .g-recaptcha {
    transform: scale(0.75);   /* 304 × 0.75 = 228px */
  }
}

/* **このページで一番押してほしいもの。**入力欄と同じ見た目だと埋もれるので、
   大きくして金色を薄く敷く。横幅いっぱいなので中央に座る */
.contact-submit {
  width: 100%;
  margin-top: 30px;
  padding: 18px 20px;
  font-size: 17px;
  border-color: rgba(214, 179, 90, 0.5);
  background: rgba(214, 179, 90, 0.16);
  color: var(--gold);
}

.contact-submit:hover {
  background: rgba(214, 179, 90, 0.26);
}

.contact-submit[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* **ボタンから離す。**近いと、注記がボタンの一部に見える */
.contact-notes {
  margin-top: 34px;
}

/* 入力に不備があったとき、**上にまとめて出す欄。**
   項目ごとの表示だけだと、画面が長いときにどこで止まったのか分からない */
.contact-summary {
  margin: 0 0 4px;
  padding: 14px 16px 14px 18px;
  border: 1px solid rgba(255, 157, 177, 0.45);
  border-radius: 14px;
  background: rgba(255, 157, 177, 0.08);
}

.contact-summary-head {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 700;
  color: #ff9db1;
}

.contact-summary ul {
  margin: 0;
  padding-left: 1.2em;
}

.contact-summary li {
  font-size: 14px;
  color: var(--text);
}

/* **人には見えない欄。**機械だけがここを埋める。
   `display: none` にしないのは、それを見て避ける機械がいるため。
   画面の外へ追い出し、読み上げからも外し、タブでも到達させない */
.contact-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.legal-footer {
  margin-top: 28px;
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
}

.legal-footer a {
  margin: 0 8px;
  white-space: nowrap;
}