@charset "UTF-8";
/**
 * legal.css — 法務・共通3ページ共用（プライバシーポリシー / イヤホンガイド機器レンタル約款 / サイトマップ）
 *
 * 読み込み条件は functions.php セクション2の $kennet_under に
 *   'privacy_policy' => 'legal'
 *   'provision'      => 'legal'
 *   'sitemap'        => 'legal'
 * の3スラッグで登録する（いずれのページも同じこのファイルを読む・common.css の後）。
 *
 * ■ ここに書くもの／書かないもの
 *   書く    … 法務文書ならではの本文差分（番号付きリストのマーカー・擬似リスト・署名の右寄せ）と
 *             ページ末尾の CONTACT 帯（.legal-contact）
 *   書かない… 本文の体裁（見出し・段落・リスト・区切り線・リンク・表）は
 *             common.css 469行〜「コンテンツ内見出し（固定ページ・投稿共通）」以降の
 *             .page__body が正本。二重管理にしないため、ここは差分だけを持つ。
 *             ヒーロー帯（.page-title）・パンくず・矢印（.ar 系）も common.css の共通部品を流用する。
 *
 * ■ カンプについて
 *   この2ページは Figma のカンプが無く、既存サイト（www.earphone-guide.jp）の原稿を
 *   新サイトの本文体裁に載せ替えるページ。見た目は当方設計で、判断の理由は各所に書いてある。
 *   新しい装飾（囲み・背景色・アイコン）は増やさない方針。
 *
 * ■ 数値の作り方
 *   カンプ幅 1440px 基準のリキッド。clamp(最小, 実測px ÷ 14.4 vw, 実測px) で 1440px 時に実測値へ一致。
 *   固定値は「固定でないと整わない箇所」だけに使い、その場で理由を書く。
 *   メディアクエリは max-width の単独指定（下の帯へ継承させるため min-width で下限を切らない）。
 */

/* =============================================================
   1. 本文（.legal__body ＝ <div class="page__body legal__body"> の差分）

   本文の指定はすべて common.css の .page__body が持っている。ここに書くのは
   「法務文書だと common.css のままでは意味が変わってしまう3点」だけ。

   セレクタの強さについて：legal.css は common.css の後に読むため、同じ強さの指定は
   こちらが勝つ。common.css より弱くなるもの（クラス1つだけのセレクタ）は
   .legal__body で囲って強さを足している（該当箇所にその旨を書いた）。

   見出し h2 / h3 の余白は common.css 478〜494行（上 4rem・下 1.5rem）のままで足りるため
   ここには書かない。本文の1つ目の要素は原稿ではどちらのページも段落のため、
   .section の上余白（common.css 80行）と見出しの上余白が二重になる問題も起きない。
   段落の行間・字送りも body の line-height 1.8（common.css 67行）を基本にする。
   区切り線 hr は common.css 588行の .page__body hr がそのまま効くので重複して書かない。
   ============================================================= */

/* 小見出し（Cookieについて／IPアドレスについて／個人情報の取り扱いについて など）。
   common.css 490行の `.page__body h3` は clamp(1.8rem, 1.65vw, 2.2rem)＝1440px で 22px だが、
   原本（既存サイト）の同じ見出しは実測 16px・太さ700＝本文と同じ大きさの太字だけ。
   2026-08-18 CEO 指示「太字だけだろ？」に合わせ、本文サイズの太字に戻す。
   上下の余白は common.css 478〜482行のまま（節の切れ目を保つため）。 */
.legal__body h3 {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.8;
}

/* ------------------------------------------------------------------
   行間・余白は原本（既存サイト）の実測に合わせる。
   2026-08-18 CEO 指摘（「不要なマージンボトムは何？」を3か所）への対応。

   原本を実測すると、段落・見出し・リストの余白はすべて 0 で、間隔は
   原文に置かれた空行（<p><br></p>）1行ぶんだけで作られている。
     段落どうし          … 4〜5px（行送りだけ）
     空行が1つある所      … 33〜34px（1行ぶん）
     小見出し(h4)の前後   … 5px
     h2 の前（hr を挟む） … 38px ／ h2 の後 … 6px
   common.css の .page__body は p / ul / ol に 1.5em の下余白を持つため、
   そのままだと全部が 29px 間隔になり「間隔が空きすぎ」になる。ここで戻す。
   空行1行ぶん＝1.8em（16px × 1.8 の行送り＝28.8px）。
   ------------------------------------------------------------------ */
.legal__body p,
.legal__body ul,
.legal__body ol {
  margin-bottom: 0;
}

/* 指示があったのは小見出し（h3）の下の余白だけ。h2 と hr（区切り線）は
   common.css のまま触らない＝大見出しの前後の間隔は元のレイアウトを保つ。 */
.legal__body h3 {
  margin-bottom: 0;
}

/* 原本で空行が1行あった箇所だけ、その1行ぶんを空ける。
   ・.legal__gap … 段落の前に空行があった箇所（PHP 側でクラスを付ける）
   ・p + ol / p + ul … 原本ではリストの前に必ず空行が入っている
   ・擬似リストが続く箇所（1(1) の直後に 2(2) が来る所） */
.legal__body .legal__gap,
.legal__body p + ol,
.legal__body p + ul,
.legal__body ul + .legal__list--plain {
  margin-top: 1.8em;
}

/* 約款は条文ごとに空行が入る（原本は各段落が <br> で始まっている）ため、
   段落が続く間はつねに1行ぶん空ける。プライバシーポリシー側には当てない。
   条文の枝番・丸数字の行（ul）は条文の続きなので、条文との間は空けない。 */
.legal__body--article p + p,
.legal__body--article ul + p {
  margin-top: 1.8em;
}
.legal__body--article p + ul {
  margin-top: 0;
}

/* 原本で空行が入っていない段落（18条の続き＝原本の段落だけ <br> で始まっていない）は
   前の段落に続けて詰める。 */
.legal__body .legal__tight {
  margin-top: 0;
}

/* 本文セクションの上余白。2026-08-18 CEO 指示「この2ページの .section のパディングトップは
   今の半分に。間隔が空きすぎ」により、common.css 81行の
   `padding: clamp(6rem, 6.88vw, 10rem) 0;` の上側だけを半分にする（下は変えない）。
   legal.css はこの2ページでしか読まないうえ、2ページ内で .section が付くのは本文の
   セクション1つだけ（CONTACT 帯は .legal-contact で .section を持たない）ため、
   ここに書けば他ページへは波及しない。
   値は 1440px で 49.5px（99.072 の半分）・下限 3rem（60px の半分）。 */
.section {
  padding-top: clamp(3rem, 3.44vw, 5rem);
}

/* リストの見え方は原本（既存サイト）に合わせる。実測＝list-style: none ／
   padding-left 30px ／ li の下余白 0（項目は行送りだけで詰めて並ぶ）。
   2026-08-18 CEO 指示「何で段落番号になってるんだよ」「li に不要なマージンボトム」により、
   いったん入れていた list-style: decimal と li の下余白 .8em を取りやめた。
   マーカー無しは common.css 8行のリセットのまま、字下げは common.css 503行の
   padding-left: 1.8em（1440px で 28.8px＝原本の 30px とほぼ同じ）をそのまま使うため、
   ここに指定は書かない。項目間の余白だけ common.css 507行の .5em を 0 に戻す。 */
.legal__body li {
  margin-bottom: 0;
}

/* 本文側に「1　(1)…」と番号が書かれている擬似リスト。
   マーカーを出すと番号が二重に見えるため付けず、字下げも外して段落と行頭をそろえる。
   .legal__list--plain だけでは common.css 502行の `.page__body ul`（クラス＋要素）より
   弱く padding-left を打ち消せないため、.legal__body で囲って強さを上げている。 */
.legal__body .legal__list--plain {
  list-style: none;
  padding-left: 0;
  /* 原本ではこの見出し行と直後の説明行が1つの塊（行送りだけの間隔）で並ぶ。
     common.css 502行の `.page__body ul` の下余白 1.5em が入ると塊が分かれて見えるため 0 にする。
     塊どうしの間隔は、直後の段落が持つ下余白（common.css 499行・1.5em）が受け持つ。 */
  margin-bottom: 0;
}

/* ------------------------------------------------------------------
   折り返した2行目以降の行頭をそろえるための3つのリスト（2026-08-18 CEO 指示）。
   原本は <br> で改行しているだけなので、狭い画面や長い行では2行目が
   いちばん左まで戻ってしまい、どこからどこまでが1項目か分からなくなる。
   1行＝1項目の <li> にして、padding-left（塊の下げ幅）と
   text-indent（1行目だけ戻す＝ぶら下げ）で行頭をそろえる。
     .legal__list--bullet … 「・」で始まる箇条（プライバシーポリシー）
     .legal__list--indent … 記号の無い説明行（原本は全角スペースで字下げ）
     .legal__list--hang   … 約款の枝番 (1)/丸数字/※ の行
   約款の各条の段落（「11．…」）は番号の桁数がそろわないため字下げしない（原本どおり）。
   ------------------------------------------------------------------ */
.legal__body .legal__list--bullet,
.legal__body .legal__list--indent,
.legal__body .legal__list--hang {
  list-style: none;
  padding-left: 0;
}

/* 「・」は 1em の位置、折り返しはその右（2em）にそろう */
.legal__body .legal__list--bullet li {
  padding-left: 2em;
  text-indent: -1em;
}

/* 記号が無い説明行。行頭は「・」の箇条や見出し行（1(1)・2(2)…）と同じ 1em にそろえる。
   ここだけ 2em にすると 3(3) の説明行だけ深く入って見え、並びが崩れる。 */
.legal__body .legal__list--indent li {
  padding-left: 1em;
}

/* 枝番 (1)/丸数字/※ の行だけ、折り返しを1em右にそろえる。
   各条の段落（11．12．のように番号が2桁になる）は、ぶら下げると桁数の違いで
   かえって行頭がそろわないため、原本どおり字下げなし（2026-08-18 CEO 指示）。 */
.legal__body .legal__list--hang li {
  padding-left: 1em;
  text-indent: -1em;
}

/* 擬似リストの行頭を1文字分だけ下げる（2026-08-18 CEO 指示）。
   text-indent（1行目だけ）ではなく padding-left で塊ごと下げる。
   text-indent だと2行目以降が1行目より左に出て折り返しが不自然になるため。
   原本も ul の padding-left 30px で塊ごと下げており、2行目の行頭は1行目と
   同じ位置（実測 left 165px で一致）にそろっている。 */
.legal__body .legal__list--plain li {
  padding-left: 1em;
}

/* 署名・制定日・「以上」。原本の <p style="text-align: right;"> と同じ右寄せにする。
   上下の余白は common.css 499行の p（margin-bottom: 1.5em）のまま。 */
.legal__body .legal__sign {
  text-align: right;
}


/* =============================================================================
 * 2. contact（CONTACT 帯）
 * assets/css/warranty.css 479〜649行の CONTACT 帯から、クラスの接頭辞だけ
 * .legal-contact に置き換えて転記（同じコンポーネント・数値は1つも変えていない）。
 * warranty.css 側の数値はさらに assets/css/top.css 1935〜2100行（.top-contact 系）が出所で、
 * 各宣言に書いてある top.css の行番号もそのまま残してある。
 * top.css / warranty.css はそれぞれのページ限定で読み込まれ本2ページでは効かないため、
 * クラスを別（legal-contact__*）にして必要な分だけここに持つ。
 * ========================================================================== */
.legal-contact {
  /* 上下は top.css 1936行と同値（Figma pad(80,276,80,276) の上下）。
     左右は .section__inner を使わない取り決めのためここで持つ。 */
  padding-block: 8rem;
  padding-inline: clamp(2rem, 2.75vw, 4rem);
  background: var(--gradient); /* Figma cta_gr。top.css 1937行は同じ値を直書き */
  color: #fff;
}

.legal-contact__inner {
  display: flex;
  align-items: center;
  gap: clamp(4rem, 6.94vw, 10rem); /* top.css 1944行 10rem。1024px 付近で右カラムを潰さないよう縮む側にした */
  max-width: 100rem; /* top.css 1945行。Figma 実配置 220〜1220px */
  min-height: 26.6rem; /* top.css 1946行。Figma title-wrap 266px（426 − 上下 padding 160） */
  margin-inline: auto;
}

/* -----------------------------------------------------------------------------
 * 左カラム（warranty.css 500〜575行 ／ 出所は top.css 1950〜2025行）
 * -------------------------------------------------------------------------- */
.legal-contact__intro {
  flex: 0 0 30rem; /* top.css 1951行 */
  align-self: stretch; /* top.css 1952行。カンプは左カラムだけ上寄せ（266px 枠の上端から始まる） */
}

.legal-contact__label {
  display: flex; /* top.css 1956行 */
  align-items: center;
  gap: .4rem; /* Figma 丸マーク右端234 → 文字左端238 */
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .05em;
}

.legal-contact__label-mark {
  flex: 0 0 1.4rem; /* top.css 1966行。Figma Ellipse 14×14・stroke 3px INSIDE */
  width: 1.4rem;
  height: 1.4rem;
  border: 3px solid #fff;
  border-radius: 50%;
}

.legal-contact__title {
  font-family: var(--font_eng); /* top.css 1975行は "Roboto", sans-serif 直書き。変数の中身は同じ */
  font-size: clamp(4.4rem, 4.17vw, 6rem); /* 上限 top.css 1976行 6rem ／ 下限 同 2337行 4.4rem */
  font-weight: 700;
  line-height: 1.4; /* Figma lh 84 */
  letter-spacing: 0; /* top.css 1979行。CONTACT だけ字間を空けない */
}

.legal-contact__point {
  display: block; /* top.css 1983行。Figma point 68×4 */
  width: 6.8rem;
  height: .4rem;
  margin: 2rem 0;
  background: #fff;
}

.legal-contact__tel-label {
  font-size: 1.5rem; /* top.css 1991行 */
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .05em;
}

.legal-contact__tel {
  display: flex; /* top.css 1998行 */
  align-items: center;
  gap: .4rem;
}

.legal-contact__tel-icon {
  flex: 0 0 3.2rem; /* top.css 2003行。Figma icon 32×32 */
  width: 3.2rem;
  height: 3.2rem;
}

.legal-contact__tel a {
  font-family: var(--font_eng); /* top.css 2009行 */
  font-size: clamp(2.8rem, 2.36vw, 3.4rem); /* 上限 top.css 2010行 3.4rem ／ 下限 同 2341行 2.8rem */
  font-weight: 700;
  line-height: 1.4; /* Figma lh 47.6 */
  text-decoration: none;
  letter-spacing: .05em;
}

.legal-contact__hours {
  margin-top: .8rem; /* top.css 2018行。Figma gap 8 */
  padding: .7rem; /* top.css 2019行。Figma 34px = border 1px + 7px + 本文 18.2px + 7px + border 1px */
  border: 1px solid var(--color_line); /* top.css 2020行は #EAEAEA 直書き */
  font-size: clamp(1.2rem, .9vw, 1.3rem); /* 上限 top.css 2021行 1.3rem ／ 下限 同 2345行 1.2rem */
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .05em;
}

/* -----------------------------------------------------------------------------
 * 右カラム（ボタン2本・warranty.css 580〜649行 ／ 出所は top.css 2031〜2100行）
 * -------------------------------------------------------------------------- */
.legal-contact__btns {
  display: flex; /* top.css 2032行 */
  flex: 0 1 60rem; /* Figma ボタン 600px。1024px 付近では縮む側にする */
  flex-direction: column;
  gap: 2rem; /* top.css 2036行。Figma wrap gap 20 */
  min-width: 0;
}

.legal-contact__btn {
  position: relative; /* top.css 2039行 */
  display: flex;
  align-items: center;
  justify-content: center;
  height: 12rem; /* top.css 2044行。Figma 120px */
  box-shadow: 0 10px 30px rgba(134, 13, 8, .3); /* Figma DROP_SHADOW(0,10 r=30 #860D08@0.3)・top.css 2045行と同値 */
  text-decoration: none;
  transition: var(--transition, all .3s ease);
}

.legal-contact__btn--rental {
  background: var(--color_main_dark); /* Figma main_color_dark #7C0002・top.css 2050行 */
  color: #fff;
}

.legal-contact__btn--inquiry {
  background: #fff; /* top.css 2055行 */
  color: var(--color_main);
}

/* hover はフローティング CTA（common.css 1716行）と同じ語彙。白地は内側 2px の赤枠、
   濃い赤地はその白枠版。box-shadow は1プロパティなので既存の外影を併記して維持する。
   2026-08-20 CEO 指示により opacity: .85 から変更（薄くなるだけで分からなかったため）。 */
.legal-contact__btn--rental:hover {
  box-shadow: 0 10px 30px rgba(134, 13, 8, .3), inset 0 0 0 2px #fff;
}

.legal-contact__btn--inquiry:hover {
  box-shadow: 0 10px 30px rgba(134, 13, 8, .3), inset 0 0 0 2px var(--color_main);
}

.legal-contact__btn-icon {
  position: absolute; /* top.css 2064行。Figma 64×64・ボタン左端から40px */
  top: 50%;
  left: 4rem;
  width: 6.4rem;
  height: 6.4rem;
  transform: translateY(-50%);
}

.legal-contact__btn-txt {
  display: flex; /* top.css 2072行 */
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  text-align: center;
}

.legal-contact__btn-main {
  font-size: 2.4rem; /* top.css 2080行。Figma 24px */
  font-weight: 700;
  line-height: 1;
  letter-spacing: .05em;
}

.legal-contact__btn-sub {
  font-size: 1.5rem; /* top.css 2087行。Figma 15px */
  font-weight: 700;
  line-height: 1;
  letter-spacing: .05em;
}

.legal-contact__btn .ar {
  position: absolute; /* top.css 2093行。Figma 24×24・ボタン右端から20px */
  top: 50%;
  right: 2rem;
  transform: translateY(-50%);
}


/* =============================================================================
 * 3. 1023px 以下（warranty.css 659〜676行から転記・CONTACT 帯の分だけ）
 * 2カラムのままだと右カラムが 600px を切り、ボタンの中の文字
 * （最長「レンタル・購入・デモ機などのご相談はこちら」＝約330px）と
 * 左右のアイコン・矢印（合わせて148px）が競って折り返しが増えるため縦積みにする。
 * WEB版イヤホンガイドの CONTACT 帯（_wgd/70_contact.css）と同じ切り替え位置。
 * ========================================================================== */
@media (max-width: 1023px) {
  .legal-contact__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 4rem;
    min-height: 0;
  }

  /* 縦積みでは左右いっぱいに広げず、カンプのボタン幅 600px にそろえて置く
     （営業時間の枠だけが 850px まで伸びて間延びするのを防ぐ） */
  .legal-contact__intro,
  .legal-contact__btns {
    flex: 0 0 auto;
    width: 100%;
    max-width: 60rem;
    margin-inline: auto;
  }
}


/* =============================================================================
 * 4. 768px 以下（warranty.css 697〜727行から転記・CONTACT 帯の分だけ。
 *    出所は top.css 2320〜2375行）
 * ========================================================================== */
@media (max-width: 768px) {
  .legal-contact {
    padding-block: 6rem; /* top.css 2321行 */
  }

  .legal-contact__btn {
    height: auto; /* top.css 2350行 */
    min-height: 10rem;
    padding: 2rem 4.4rem 2rem 8.8rem;
  }

  .legal-contact__btn-icon {
    left: 1.6rem; /* top.css 2356行 */
    width: 5.6rem;
    height: 5.6rem;
  }

  .legal-contact__btn-main {
    /* 1行に収める（トップと同じ扱い＝top.css 2364行）。最長の「お問い合わせ・見積相談」は
       19px だと 219px 必要で入る幅が 203px しかなく折り返す。17px なら 196px で収まる。 */
    font-size: 1.7rem;
  }

  .legal-contact__btn-sub {
    font-size: 1.3rem; /* top.css 2370行 */
    line-height: 1.4;
  }

  .legal-contact__btn .ar {
    right: 1.2rem; /* top.css 2373行 */
  }
}


/* ==========================================================================
   サイトマップ（page-sitemap.php・slug: sitemap）
   2026-08-24 のケンネット様ご連絡（実装指示書 A16）で新設したページ。
   カンプが無いため専用 CSS は起こさず、法務2ページと同じこのファイルに同居させる
   （支給のディレクションシート38行が sitemap を privacy_policy・provision と同じ
   「法務・共通」グループに置いているため）。
   見出し帯・本文の基本・CONTACT 帯は上の節と common.css が面倒を見るので、
   ここでは入れ子リストの余白と階層の見分けだけを足す。
   ========================================================================== */

/* common.css 510行の .page__body ul は padding-left 1.8em・margin-bottom 1.5em を
   持っており、入れ子にすると段ごとに下余白が重なって並びが不揃いになる。打ち消す。 */
.sitemap__body .sitemap__list {
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

.sitemap__body .sitemap__item {
  margin-bottom: 0; /* common.css 515行の li 下余白を打ち消し、段ごとの余白で揃える */
}

/* 第1階層＝サイトの大分類。1件ずつ区切り線で分ける。
   線の色はフッターのリンク列の仕切り（footer.php 出典の #EAEAEA）と同じ。 */
.sitemap__body > .sitemap__list > .sitemap__item {
  padding: 1.6rem 0;
  border-bottom: 1px solid #EAEAEA;
}

.sitemap__body > .sitemap__list > .sitemap__item > a {
  font-weight: 700;
}

/* 第2階層以降＝子ページとページ内アンカー。1段ごとに字下げする。 */
.sitemap__body .sitemap__list .sitemap__list {
  padding-left: 2rem;
  margin-top: .8rem;
}

.sitemap__body .sitemap__list .sitemap__list > .sitemap__item {
  position: relative;
  padding-left: 1.4em;
  margin-top: .8rem;
}

/* 行頭の赤い横棒。li に置いているのは、a の中に入れると下線が一緒に伸びるため。 */
.sitemap__body .sitemap__list .sitemap__list > .sitemap__item::before {
  content: "";
  position: absolute;
  top: .75em;
  left: 0;
  width: .8em;
  height: 1px;
  background: var(--color_main);
}