/*
 * 🔴 Green 製の打ち消し CSS（Step3-22-3）。**移送物ではない**（Blue に対応するファイルは無い）。
 *
 * ── なぜ要るか ──────────────────────────────────────────────
 * 海外レイアウトは「モバイル版を土台にして、広い幅で PC 版を上から着せる」形で統合した。
 * このとき **PC 版が再宣言していないプロパティはモバイル版の指定が広い幅にも残る**。
 * 過去に3回踏んだ型（13-2e ／ 14-5a-3a-2 ／ 21-2b）で、**ファイルを読むだけでは異常に見えない**。
 *
 * ── 値の出どころ ────────────────────────────────────────────
 * 🎯 **すべて Blue 本番（https://hinode.pics/lang/en/legal/privacy）を PC 幅 1280 で
 *    実測した computed style**（2026-08-05・chrome-devtools）。**値は1つも発明していない。**
 *
 * ── 適用範囲 ────────────────────────────────────────────────
 * ⚠️ このファイルは `media="(min-width: 768px)"` 付きで読み込む（狭い幅には1つも当たらない）。
 *    しきい値は PC 版 CSS を着せる条件と**同値**でなければならない
 *    （ズレると「PC の見た目なのに打ち消しが効かない幅」が生まれる）。
 * ⚠️ セレクタは**モバイル版と同じ形**にしてある（詳細度を揃え、読み込み順の後勝ちで打ち消す）。
 *    素の `.header_wrap` のような短い形に書き換えると**詳細度で負けて静かに効かなくなる**。
 *
 * ── ここに無いもの（意図的）──────────────────────────────────
 * 🟢 `.title_wrap` の背景色と padding は**残しても害が無い**ので触らない＝
 *    色は PC と同じ #28A8F5（PC は `.header_wrap` 側に塗る）／padding は
 *    `header { height: 60px; align-items: center }` の中なので**高さが変わらない**（実測で確認）。
 * 🟢 本文の `ul` の黒丸は Blue PC も `none`（PC は `ul li`、モバイルは `ul` に書いているだけ）＝**同じ**。
 * ⚠️ `#breadcrumb_list_wrap nav ul li.separate`（モバイルは三角形の区切り）は**このページに出ない**ので
 *    書いていない。**出ないものを打ち消しても検証できない**ため。次の Lang ページで採寸してから足すこと。
 */

@charset "utf-8";

/* ─────────────────────────────────────────────────────────────
 * 🔴 **`media` 属性は `<link>` に付けず、このファイルの中で分ける**（Step3-23-4）。
 *    理由＝**狭い幅にだけ効かせたい打ち消しが出てきた**ため（パンくずの区切り）。
 *    `<link media="...">` にすると狭い幅の規則を1つも書けない。
 *    📌 `/moon` の `green.css` も同じ作法（media 属性なしで読み、中で分ける）。
 * ⚠️ **しきい値は PC 版 CSS を着せる条件と同値**（**1000px**・Step3-32 で 768px から上げた）。
 *    ズレると「PC の見た目なのに打ち消しが効かない幅」が生まれる。
 * 🔴 **狭い側は `999.98px` であって `999px` ではない**＝整数どうしで組むと
 *    幅が小数（999.5px 等）のときに**どちらの規則も当たらない隙間**ができる（27-6 で実測）。
 * ───────────────────────────────────────────────────────────── */

@media (min-width: 1000px) {
  /* ヘッダー：モバイルは下に 15px 空けるが、Blue の PC は 0（実測 marginBottom: 0px）。 */
  html body #body_wrap .header_wrap {
    margin-bottom: 0;
  }

  /* メニューアイコン：モバイルだけ角丸と影が付く。Blue の PC は none / 0px（実測）。 */
  html body #body_wrap .header_wrap > header .menu_wrap > ul > li a {
    border-radius: 0;
    box-shadow: none;
  }

  /* パンくずの器：モバイルは白帯＋影。Blue の PC は背景も影も無い（実測 transparent / none）。 */
  html body #body_wrap .main_content_wrap #breadcrumb_list_wrap {
    background-color: transparent;
    box-shadow: none;
  }

  /* パンくずの中身：モバイルは横スクロールの帯（overflow-x: auto）。Blue の PC は visible（実測）。 */
  html body #body_wrap .main_content_wrap #breadcrumb_list_wrap nav {
    overflow-x: visible;
  }

  /* パンくずの余白：モバイルは 12px 15px。Blue の PC は 0（実測 paddingTop/Left: 0px）。 */
  html body #body_wrap .main_content_wrap #breadcrumb_list_wrap nav ul {
    padding: 0;
  }

  /* パンくずの文字：モバイルは 1.2rem（12px）。Blue の PC は 16px＝本文と同じ（実測）。 */
  html body #body_wrap .main_content_wrap #breadcrumb_list_wrap nav ul li {
    font-size: 1.6rem;
  }

  /* 見出しの器：モバイルは 15px 15px 10px。Blue の PC は 0（実測）。 */
  html body #body_wrap .main_content_wrap #h1_wrap {
    padding: 0;
  }

  /* 見出し：モバイルは 2.2rem（22px）。Blue の PC は 32px＝ブラウザ既定の 2em（実測 fontSize: 32px）。 */
  html body #body_wrap .main_content_wrap #h1_wrap h1 {
    font-size: 2em;
  }

  /* SNS ボタンの帯：モバイルは 20px 0 10px。Blue の PC は 0（実測）。 */
  html body #body_wrap .footer_wrap footer .social_butons_wrap {
    padding: 0;
  }

  /* 著作権表示：モバイルは 10px 0 20px。Blue の PC は 0（実測）。 */
  html body #body_wrap .footer_wrap footer #copyright_wrap {
    padding: 0;
  }

  /* ─── パンくずの区切り（Step3-23-4・10枚目で初めて実物が出た）───────────
   * モバイル版 CSS は `li.separate` を **三角形**にする（`width:0; height:0;`＋border）。
   * Blue の PC は **border を持たず、ビューが書いた `>` の文字をそのまま見せる**
   * （実測 borderStyle:none / width:8.89px / margin:0px 15px）。
   * ⚠️ 打ち消さないと **三角形と `>` が二重に出て、しかも文字が潰れる**
   *    （2026-08-05 ユーザーが実機で発見）。
   */
  html body #body_wrap .main_content_wrap #breadcrumb_list_wrap nav ul li.separate {
    width: auto;
    height: auto;
    border: 0;
    margin: 0 15px;
  }
}

/* ─────────────────────────────────────────────────────────────
 * 狭い幅（モバイル版の見た目）だけに効く打ち消し。
 * ───────────────────────────────────────────────────────────── */

@media (max-width: 999.98px) {
  /* ─── パンくずの区切りの文字を隠す ───────────────────────────────
   * Blue の**モバイル版ビューは `li.separate` が空**で、CSS の三角形だけを見せる。
   * Green は PC 側に統一した1枚のビューなので `>` の文字を持っている＝
   * **そのままだと三角形と `>` が二重に出る**。
   * → **狭い幅では文字を隠して三角形だけにする**＝Blue のモバイルと同じ見た目になる。
   * 📌 器（`li`）自体は消さない（三角形は `li` の border で描かれているため）。
   */
  html body #body_wrap .main_content_wrap #breadcrumb_list_wrap nav ul li.separate > span {
    display: none;
  }
}