@charset "utf-8";
/* ============================================================
   Weppy.Co — legal.css
   /legal/（特定商取引法に基づく表記）と /privacy/（プライバシーポリシー）の
   2ページで共有する。style.css の @layer に相乗りする（順序を壊さない）。

   この2ページの性格
   ------------------------------------------------------------
   ・読ませるページではなく「探して確かめる」ページ。
     語りの装置（縦ラベル・透かし数字・強い一行・計器）は持ち込まない。
   ・必要なのは「項目名と中身が一対で、上から拾える」こと。
     だから定義リスト1本で組み、罫で行を区切るだけにする。
   ・色は使わない。地は紙、文字はインク、罫は共通の --rule。
     オレンジは見出しの罫（.rule3）だけ ── サイトの一部であることの印。
   ============================================================ */

@layer component {

  /* ---------- 器 -------------------------------------------- */
  /* 右のレール（トップの時計・ownerのハート）は無い。その余白は要らないので
     右の padding を普通の gutter に戻す。 */
  .lgl { --rail-clock: 0px; }
  .lgl .sec { padding-block: clamp(76px, 7vw, 116px); }
  /* 先頭だけ、セミナー／参加と同じ。固定ヘッダー（66px）の下に同じ呼吸を置く。 */
  .lgl main > .sec:first-child { padding-top: clamp(96px, 9vw, 150px); }
  .lgl .hdr { opacity: 1; }
  .lgl .hdr__sep { background: var(--rule-dot); }
  .lgl .hdr__join:hover { background: var(--orange-700); border-color: var(--orange-700); color: #fff; }
  .lgl .hdr__lnk:hover { color: var(--orange-700); }

  /* ---------- ページ見出し ----------------------------------- */
  .lgl__hd { max-width: 44rem; }
  .lgl__h {
    margin-top: 12px;
    font-family: var(--font-gothic); font-weight: 700;
    font-size: clamp(1.5rem, 3.4vw, 2.375rem); line-height: 1.4; letter-spacing: .01em;
    color: var(--ink-800); font-feature-settings: "palt" 1;
  }
  /* 改定日。日付なので等幅。小さく、控えめに */
  .lgl__date {
    margin-top: clamp(20px, 2.2vw, 30px);
    font-family: var(--font-mono); font-size: 12px;
    letter-spacing: .08em; color: var(--fg-dim);
  }
  .lgl__lead {
    max-width: 40rem; margin-top: clamp(26px, 2.8vw, 38px);
    font-size: clamp(1rem, 1.2vw, 1.0625rem); line-height: 1.95;
    letter-spacing: .01em; color: #3E4854;
  }

  /* ---------- 定義リスト（この2ページの本体） -----------------
     項目名は左、中身は右。720px を境に2列と縦積みを切り替える。
     行の区切りは上罫1本だけ。囲うと「表」になり、探しにくくなる。 */
  .dl {
    max-width: 58rem; margin-top: clamp(34px, 3.6vw, 52px);
    border-top: 1px solid var(--rule);
  }
  .dl__r {
    display: grid; gap: 4px 0;
    padding-block: clamp(18px, 2vw, 26px);
    border-bottom: 1px solid var(--rule);
  }
  @media (min-width: 720px) {
    .dl__r { grid-template-columns: 15rem 1fr; gap: 0 clamp(24px, 3vw, 48px); }
    /* 1行に dd が複数ある項目（連絡先・支払時期）は、列を明示しないと
       dt→左, dd1→右, dd2→左… と折り返して、2つ目以降が項目名の列に落ちる。
       dt を1行目の左に固定し、dd はすべて右の列に積む。 */
    .dl__r dt { grid-column: 1; grid-row: 1; }
    .dl__r dd { grid-column: 2; }
  }
  .dl dt {
    font-family: var(--font-gothic); font-weight: 700;
    font-size: clamp(.9375rem, 1.1vw, 1rem); line-height: 1.75;
    letter-spacing: .02em; color: var(--ink-800);
  }
  .dl dd {
    margin: 0;
    font-size: clamp(.9375rem, 1.15vw, 1.0625rem); line-height: 1.95;
    letter-spacing: .01em; color: #3E4854;
  }
  .dl dd + dd { margin-top: .5em; }
  .dl dd b { font-weight: 700; color: var(--ink-800); }
  /* 中身の中の但し書き。本文より一段落とす */
  .dl dd small,
  .art li small {
    display: block; margin-top: .45em;
    font-size: 13px; line-height: 1.85; color: var(--fg-dim);
  }
  /* 価格のように、いくつか並ぶもの */
  .dl ul { margin: 0; padding: 0; list-style: none; }
  .dl li + li { margin-top: .45em; }
  .dl li b { font-weight: 700; color: var(--ink-800); }

  /* ---------- 条項（プライバシーポリシー） -------------------- */
  .art { max-width: 44rem; margin-top: clamp(40px, 4.2vw, 62px); }
  .art__h {
    display: flex; align-items: baseline; gap: 12px;
    font-family: var(--font-gothic); font-weight: 700;
    font-size: clamp(1.0625rem, 1.6vw, 1.25rem); line-height: 1.6;
    letter-spacing: .01em; color: var(--ink-800);
    padding-bottom: 12px; border-bottom: 1px solid var(--rule);
  }
  /* 条番号。等幅・オレンジ。トップの章番号と同じ扱い */
  .art__n {
    flex: none; font-family: var(--font-mono); font-weight: 700;
    font-size: 13px; letter-spacing: .1em; color: var(--orange-700);
  }
  .art p {
    margin-top: clamp(16px, 1.8vw, 22px);
    font-size: clamp(.9375rem, 1.15vw, 1.0625rem); line-height: 1.95;
    letter-spacing: .01em; color: #3E4854;
  }
  .art p + p { margin-top: 1.2em; }
  .art b { font-weight: 700; color: var(--ink-800); }
  /* 箇条書き。行頭の印は罫と同じ色の短い棒にして、点を増やさない */
  .art ul { margin-top: clamp(14px, 1.6vw, 20px); padding: 0; list-style: none; max-width: 40rem; }
  .art li {
    position: relative; padding-left: 26px;
    font-size: clamp(.9375rem, 1.15vw, 1.0625rem); line-height: 1.95; color: #3E4854;
  }
  .art li + li { margin-top: .5em; }
  .art li::before {
    content: ""; position: absolute; left: 0; top: calc(.95em - 1px);
    width: 14px; height: 1px; background: var(--rule-dot);
  }
  /* 番号付き。法令の条文と同じく「(1)」で並べる */
  .art ol { margin-top: clamp(14px, 1.6vw, 20px); padding-left: 1.6em; max-width: 40rem; }
  .art ol li { padding-left: 0; }
  .art ol li::before { content: none; }

  /* ---------- 追記の箱 ---------------------------------------
     「フォームができたら差し替える」のような、いまは暫定という断り。
     色は付けず、左の罫だけで区別する。 */
  .prov {
    max-width: 44rem; margin-top: clamp(30px, 3.2vw, 44px);
    padding: clamp(14px, 1.6vw, 20px) 0 clamp(14px, 1.6vw, 20px) clamp(16px, 1.8vw, 22px);
    border-left: 2px solid var(--rule-dot);
    font-size: 13.5px; line-height: 1.9; color: var(--fg-dim);
  }

  /* ---------- お問い合わせフォーム ---------------------------
     中身は Contact Form 7 が出力する。プラグインの素の見た目は
     ブラウザ既定のフォーム部品なので、このサイトの上では確実に浮く。
     だから「罫・級数・ボタン」の3点だけこちらで揃える。
     出力される class 名（wpcf7-*）に合わせてあるので、
     フォームの項目を増やしてもそのまま効く。 */
  .lgl__form { max-width: 40rem; margin-top: 14px; }
  /* CF7 は p で項目を積む。.art p / p+p の本文用マージンが乗ると縦に伸びるので、ここで打ち消す。 */
  .lgl__form .wpcf7-form {
    position: relative;
    display: grid; grid-template-columns: 1fr; gap: 10px 18px;
  }
  @media (min-width: 560px) {
    .lgl__form .wpcf7-form { grid-template-columns: 1fr 1fr; }
    .lgl__form .wpcf7-form > p:nth-of-type(n+5) { grid-column: 1 / -1; }
  }
  .lgl__form .hidden-fields-container { display: none; }
  .lgl__form p,
  .lgl__form p + p {
    margin: 0;
    font-size: 13px; line-height: 1.4;
  }
  .lgl__form br { display: none; }
  .lgl__form label {
    display: block;
    font-family: var(--font-gothic); font-weight: 700;
    font-size: 13px; letter-spacing: .02em; color: var(--ink-800);
    line-height: 1.4;
  }
  .lgl__form input[type="text"],
  .lgl__form input[type="email"],
  .lgl__form input[type="tel"],
  .lgl__form input[type="url"],
  .lgl__form select,
  .lgl__form textarea {
    display: block; width: 100%; margin-top: 5px;
    padding: 8px 12px;
    font-family: inherit; font-size: 16px; line-height: 1.4; color: var(--ink-800);
    background: var(--paper-card);
    border: 1px solid var(--rule-dot); border-radius: var(--radius-m);
    transition: border-color var(--dur-3) var(--ease-out);
  }
  /* 16px を割ると iOS が勝手に拡大する。だから上は 16px 固定 */
  .lgl__form textarea { min-height: 5.5rem; height: 5.5rem; resize: vertical; }
  .lgl__form :is(input, select, textarea):focus-visible {
    outline: none; border-color: var(--orange-500);
    box-shadow: 0 0 0 3px rgba(255,106,31,.14);
  }
  .lgl__form input[type="submit"], .lgl__form button[type="submit"] {
    margin-top: 2px;
    padding: 11px 28px;
    font-family: var(--font-gothic); font-weight: 700;
    font-size: 14px; letter-spacing: .04em; color: #fff;
    background: var(--orange-700); border: 1px solid var(--orange-700);
    border-radius: var(--radius-m); cursor: pointer;
    transition: background var(--dur-3) var(--ease-out);
  }
  .lgl__form input[type="submit"]:hover { background: var(--orange-800); }
  /* 必須の印と、検証のメッセージ */
  .lgl__form .wpcf7-not-valid-tip {
    margin-top: 7px; font-size: 13px; color: var(--orange-800);
  }
  .lgl__form .wpcf7-response-output {
    grid-column: 1 / -1;
    margin: 8px 0 0; padding: 10px 12px;
    font-size: 13px; line-height: 1.7;
    border: 1px solid var(--rule-dot); border-radius: var(--radius-m);
  }
  .lgl__form .wpcf7-spinner { margin-left: 12px; }
}