@charset "UTF-8";
/* =============================================================
   ミル LP  style.css
   最終更新: 2026-08-20

   数値はすべてデザイン仕様の確定値。
   375 / 430 / 768 / 992 / 1200 / 1280 / 1440 / 1920 の8幅で
   線形の流体式に還元してある。
   ============================================================= */

/* =============================================================
   0. Webフォント（同梱 / SIL Open Font License 1.1）
   Zen Kaku Gothic New。和文・欧文とも本書体1本で組む。
   ウェイトは 400 / 500 / 700 / 900 の4本。
   見出しの font-weight:600 は CSS のフォントマッチング規則により
   700 が選択されて描画される（意図した挙動）。
   ============================================================= */

@font-face{
  font-family:"Zen Kaku Gothic New";
  font-style:normal; font-weight:400; font-display:swap;
  src:url("../assets/fonts/ZenKakuGothicNew-400.woff2") format("woff2");
}
@font-face{
  font-family:"Zen Kaku Gothic New";
  font-style:normal; font-weight:500; font-display:swap;
  src:url("../assets/fonts/ZenKakuGothicNew-500.woff2") format("woff2");
}
@font-face{
  font-family:"Zen Kaku Gothic New";
  font-style:normal; font-weight:700; font-display:swap;
  src:url("../assets/fonts/ZenKakuGothicNew-700.woff2") format("woff2");
}
@font-face{
  font-family:"Zen Kaku Gothic New";
  font-style:normal; font-weight:900; font-display:swap;
  src:url("../assets/fonts/ZenKakuGothicNew-900.woff2") format("woff2");
}



/* === IMAGE-MAP:START (自動生成領域。手で書き換えない) === */
/* 画像パスの一覧です。scripts/miru_set_image.py が自動で書き換えます。
   手で書き換えないでください（次の差し替えで上書きされます）。 */
:root {
  --img-00: url("../images/00_logo-header.webp"); /* ヘッダーロゴ（横長・透過PNG/SVG推奨） */
  --img-01: url("../images/01_logo.webp"); /* ロゴ透かし（白のアウトライン・透過PNG推奨） */
  --img-02: url("../images/02_room1-bed.webp"); /* FVマーキー① 客室ベッドメイク */
  --img-03: url("../images/03_img03.webp"); /* FVマーキー② 洗面まわり */
  --img-04: url("../images/04_staff3.webp"); /* FVマーキー③ スタッフ作業中 */
  --img-05: url("../images/05_img05.webp"); /* FVマーキー④ リネン */
  --img-06: url("../images/06_kitchen5.webp"); /* FVマーキー⑤ キッチン */
  --img-07: url("../images/07_img07.webp"); /* FVマーキー⑥ 玄関・鍵渡し */
  --img-08: url("../images/08_bath7.webp"); /* FVマーキー⑦ 浴室 */
  --img-09: url("../images/09_logo5.webp"); /* ロゴ透かし（薄グレー・透過PNG推奨／53と同一素材可） */
  --img-10: url("../images/10_cleaning-room.webp"); /* ブランドメッセージ 全景（清掃後の客室） */
  --img-11: url("../images/11_thumb1.webp"); /* お知らせ詳細 本文中の写真 */
  --img-12: url("../images/12_thumb2.webp"); /* お知らせ② サムネイル */
  --img-13: url("../images/13_thumb3.webp"); /* お知らせ③ サムネイル */
  --img-14: url("../images/14_thumb4.webp"); /* お知らせ④ サムネイル */
  --img-15: none; /* カタログ請求 背景（資料を見る手元） */
  --img-16: url("../images/16_cleaning1.webp"); /* サービス① イメージ（清掃後リビング） */
  --img-17: url("../images/17_cleaning2.webp"); /* サービス内容③ リビングの清掃 */
  --img-18: none; /* 実績① 民泊1LDK */
  --img-19: none; /* 実績② 一棟貸し町家 */
  --img-20: none; /* 実績③ ホテル型客室 */
  --img-21: none; /* 実績④ 水まわり */
  --img-22: none; /* 実績⑤ オフィス */
  --img-23: none; /* 実績⑥ 退去後クリーニング */
  --img-24: none; /* 会員限定 背景（打合せ風景） */
  --img-25: url("../images/25_voice1.webp"); /* お客様の声① 物件写真 */
  --img-26: url("../images/26_voice2.webp"); /* お客様の声② 物件写真 */
  --img-27: url("../images/27_voice3.webp"); /* お客様の声③ 物件写真 */
  --img-28: url("../images/28_voice4.webp"); /* お客様の声④ 物件写真 */
  --img-29: url("../images/29_voice5.webp"); /* お客様の声⑤ 物件写真 */
  --img-30: url("../images/30_bath0-feature.webp"); /* 特集マーキー01 浴室 */
  --img-31: url("../images/31_feature0.webp"); /* 特集マーキー02 洗面台 */
  --img-32: url("../images/32_kitchen0-feature.webp"); /* 特集マーキー03 キッチン */
  --img-33: url("../images/33_bed0-feature.webp"); /* 特集マーキー04 ベッドメイク */
  --img-34: url("../images/34_feature0.webp"); /* 特集マーキー05 リビング */
  --img-35: url("../images/35_feature0.webp"); /* 特集マーキー06 玄関 */
  --img-36: url("../images/36_feature0.webp"); /* 特集マーキー07 バルコニー */
  --img-37: url("../images/37_amenity0-feature.webp"); /* 特集マーキー08 アメニティ補充 */
  --img-38: none; /* 柱1 品質基準 */
  --img-39: none; /* 柱2 写真報告 */
  --img-40: none; /* 柱3 研修体制 */
  --img-41: none; /* インクセクション 線画イラスト（透過PNG/SVG推奨） */
  --img-42: url("../images/42_img42.webp"); /* GUIDE① ヒアリング */
  --img-43: url("../images/43_img43.webp"); /* GUIDE② お見積り */
  --img-44: url("../images/44_img44.webp"); /* GUIDE③ 作業開始 */
  --img-45: none; /* 見学① 中村スタジオ */
  --img-46: none; /* 見学② 熱田スタジオ */
  --img-47: none; /* 見学③ 研修センター */
  --img-48: none; /* COMPANY 背景（事務所・チーム） */
  --img-49: url("../images/49_ceo.webp"); /* 代表ポートレート */
  --img-50: none; /* スタッフ① 顔写真 */
  --img-51: none; /* スタッフ② 顔写真 */
  --img-52: none; /* スタッフ③ 顔写真 */
  --img-53: none; /* スタッフ④ 顔写真 */
  --img-54: none; /* スタッフ⑤ 顔写真 */
  --img-55: none; /* スタッフ⑥ 顔写真 */
  --img-56: url("../images/56_blog1-thumb.webp"); /* ブログ① サムネイル */
  --img-57: url("../images/57_blog2-thumb.webp"); /* ブログ② サムネイル */
  --img-58: url("../images/58_blog3-thumb.webp"); /* ブログ③ サムネイル */
  --img-59: none; /* 関連事業① 背景 */
  --img-60: none; /* 関連事業② 背景 */
  --img-61: none; /* 関連事業③ 背景 */
  --img-62: url("../images/62_bg-contact.webp"); /* CONTACT 背景（明るい室内） */
  --img-63: url("../images/63_logo-footer.webp"); /* フッターロゴ（白・透過PNG/SVG推奨） */
  --img-64: url("../images/64_img64.webp"); /* SNSアイコン Instagram（★各社公式ブランドリソースの正規ファイル） */
  --img-65: url("../images/65_img65.webp"); /* SNSアイコン X（★各社公式ブランドリソースの正規ファイル） */
  --img-66: url("../images/66_img66.webp"); /* SNSアイコン LINE（★LINEヤフー社の公式ガイドラインに沿ったファイル） */
  --img-67: url("../images/67_minpaku1-thumb.webp"); /* ルームツアー1 動画サムネイル（1LDK 民泊タイプ） */
  --img-68: url("../images/68_room2-thumb.webp"); /* ルームツアー2 動画サムネイル（ホテル型 客室） */
  --img-69: url("../images/69_thumb3.webp"); /* ルームツアー3 動画サムネイル（水まわり特化） */
  --img-70: none; /* 実績詳細 メイン写真（清掃後） */
  --img-71: none; /* 実績詳細 Before（施工前） */
  --img-72: none; /* 実績詳細 After（施工後） */
  --img-73: none; /* 実績詳細 工程①（換気・ゴミ回収） */
  --img-74: none; /* 実績詳細 工程②（水まわり） */
  --img-75: none; /* 実績詳細 工程③（ベッドメイク・最終確認） */
  --img-76: url("../images/76_quality1.webp"); /* ミルの柱① 品質基準 */
  --img-77: url("../images/77_report2.webp"); /* ミルの柱② 写真報告 */
  --img-78: url("../images/78_img78.webp"); /* ミルの柱③ 育てる体制 */
  --img-79: url("../images/79_img79.webp"); /* ミルの柱④ 緊急対応 */
  --img-80: url("../images/80_hero-recruit.webp"); /* 採用 メインビジュアル（作業風景） */
  --img-81: url("../images/81_recruit1.webp"); /* 採用 仕事の内容①（手順書の確認） */
  --img-82: url("../images/82_cleaning2-room-recruit.webp"); /* 採用 仕事の内容②（客室清掃） */
  --img-83: url("../images/83_recruit3-report.webp"); /* 採用 仕事の内容③（写真報告） */
  --img-84: none; /* サービス内容① 寝室の清掃 */
  --img-85: url("../images/85_service2-cleaning-toilet.webp"); /* サービス内容② トイレの清掃 */
  --img-86: none; /* サービス内容④ 玄関の清掃 */
  --img-87: url("../images/87_service5.webp"); /* サービス内容⑤ 洗濯機 */
  --img-88: url("../images/88_service7.webp"); /* サービス内容⑦ ごみの回収・セッティング */
  --img-89: url("../images/89_service8-check.webp"); /* サービス内容⑧ 宿泊後の破損チェック */
}

/* 写真が設定済みの枠（自動生成）
   ★id ではなく [data-img-no] の属性セレクタで当てる。
     マーキーの複製要素は重複id防止のため id を持たないため、
     id セレクタだと複製側に写真が入らず番号ラベルも残ってしまう。
   ★.m-ph を前置してレイア担当の .m-ph::before / .m-ph--logo .m-ph__label より
     詳細度を高くしている（HTMLに data-img-set を書けないため、ここで代替する）。 */
[data-img-no="00"],
.m-ph[data-img-no="00"],
[data-img-no="01"],
.m-ph[data-img-no="01"],
[data-img-no="02"],
.m-ph[data-img-no="02"],
[data-img-no="03"],
.m-ph[data-img-no="03"],
[data-img-no="04"],
.m-ph[data-img-no="04"],
[data-img-no="05"],
.m-ph[data-img-no="05"],
[data-img-no="06"],
.m-ph[data-img-no="06"],
[data-img-no="07"],
.m-ph[data-img-no="07"],
[data-img-no="08"],
.m-ph[data-img-no="08"],
[data-img-no="09"],
.m-ph[data-img-no="09"],
[data-img-no="10"],
.m-ph[data-img-no="10"],
[data-img-no="11"],
.m-ph[data-img-no="11"],
[data-img-no="12"],
.m-ph[data-img-no="12"],
[data-img-no="13"],
.m-ph[data-img-no="13"],
[data-img-no="14"],
.m-ph[data-img-no="14"],
[data-img-no="16"],
.m-ph[data-img-no="16"],
[data-img-no="17"],
.m-ph[data-img-no="17"],
[data-img-no="25"],
.m-ph[data-img-no="25"],
[data-img-no="26"],
.m-ph[data-img-no="26"],
[data-img-no="27"],
.m-ph[data-img-no="27"],
[data-img-no="28"],
.m-ph[data-img-no="28"],
[data-img-no="29"],
.m-ph[data-img-no="29"],
[data-img-no="30"],
.m-ph[data-img-no="30"],
[data-img-no="31"],
.m-ph[data-img-no="31"],
[data-img-no="32"],
.m-ph[data-img-no="32"],
[data-img-no="33"],
.m-ph[data-img-no="33"],
[data-img-no="34"],
.m-ph[data-img-no="34"],
[data-img-no="35"],
.m-ph[data-img-no="35"],
[data-img-no="36"],
.m-ph[data-img-no="36"],
[data-img-no="37"],
.m-ph[data-img-no="37"],
[data-img-no="42"],
.m-ph[data-img-no="42"],
[data-img-no="43"],
.m-ph[data-img-no="43"],
[data-img-no="44"],
.m-ph[data-img-no="44"],
[data-img-no="49"],
.m-ph[data-img-no="49"],
[data-img-no="56"],
.m-ph[data-img-no="56"],
[data-img-no="57"],
.m-ph[data-img-no="57"],
[data-img-no="58"],
.m-ph[data-img-no="58"],
[data-img-no="62"],
.m-ph[data-img-no="62"],
[data-img-no="63"],
.m-ph[data-img-no="63"],
[data-img-no="64"],
.m-ph[data-img-no="64"],
[data-img-no="65"],
.m-ph[data-img-no="65"],
[data-img-no="66"],
.m-ph[data-img-no="66"],
[data-img-no="67"],
.m-ph[data-img-no="67"],
[data-img-no="68"],
.m-ph[data-img-no="68"],
[data-img-no="69"],
.m-ph[data-img-no="69"],
[data-img-no="76"],
.m-ph[data-img-no="76"],
[data-img-no="77"],
.m-ph[data-img-no="77"],
[data-img-no="78"],
.m-ph[data-img-no="78"],
[data-img-no="79"],
.m-ph[data-img-no="79"],
[data-img-no="80"],
.m-ph[data-img-no="80"],
[data-img-no="81"],
.m-ph[data-img-no="81"],
[data-img-no="82"],
.m-ph[data-img-no="82"],
[data-img-no="83"],
.m-ph[data-img-no="83"],
[data-img-no="85"],
.m-ph[data-img-no="85"],
[data-img-no="87"],
.m-ph[data-img-no="87"],
[data-img-no="88"],
.m-ph[data-img-no="88"],
[data-img-no="89"],
.m-ph[data-img-no="89"] {
  --has-img: 1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.m-ph[data-img-no="00"], [data-img-no="00"] { background-image: var(--img-00); }
.m-ph[data-img-no="01"], [data-img-no="01"] { background-image: var(--img-01); }
.m-ph[data-img-no="02"], [data-img-no="02"] { background-image: var(--img-02); }
.m-ph[data-img-no="03"], [data-img-no="03"] { background-image: var(--img-03); }
.m-ph[data-img-no="04"], [data-img-no="04"] { background-image: var(--img-04); }
.m-ph[data-img-no="05"], [data-img-no="05"] { background-image: var(--img-05); }
.m-ph[data-img-no="06"], [data-img-no="06"] { background-image: var(--img-06); }
.m-ph[data-img-no="07"], [data-img-no="07"] { background-image: var(--img-07); }
.m-ph[data-img-no="08"], [data-img-no="08"] { background-image: var(--img-08); }
.m-ph[data-img-no="09"], [data-img-no="09"] { background-image: var(--img-09); }
.m-ph[data-img-no="10"], [data-img-no="10"] { background-image: var(--img-10); }
.m-ph[data-img-no="11"], [data-img-no="11"] { background-image: var(--img-11); }
.m-ph[data-img-no="12"], [data-img-no="12"] { background-image: var(--img-12); }
.m-ph[data-img-no="13"], [data-img-no="13"] { background-image: var(--img-13); }
.m-ph[data-img-no="14"], [data-img-no="14"] { background-image: var(--img-14); }
.m-ph[data-img-no="16"], [data-img-no="16"] { background-image: var(--img-16); }
.m-ph[data-img-no="17"], [data-img-no="17"] { background-image: var(--img-17); }
.m-ph[data-img-no="25"], [data-img-no="25"] { background-image: var(--img-25); }
.m-ph[data-img-no="26"], [data-img-no="26"] { background-image: var(--img-26); }
.m-ph[data-img-no="27"], [data-img-no="27"] { background-image: var(--img-27); }
.m-ph[data-img-no="28"], [data-img-no="28"] { background-image: var(--img-28); }
.m-ph[data-img-no="29"], [data-img-no="29"] { background-image: var(--img-29); }
.m-ph[data-img-no="30"], [data-img-no="30"] { background-image: var(--img-30); }
.m-ph[data-img-no="31"], [data-img-no="31"] { background-image: var(--img-31); }
.m-ph[data-img-no="32"], [data-img-no="32"] { background-image: var(--img-32); }
.m-ph[data-img-no="33"], [data-img-no="33"] { background-image: var(--img-33); }
.m-ph[data-img-no="34"], [data-img-no="34"] { background-image: var(--img-34); }
.m-ph[data-img-no="35"], [data-img-no="35"] { background-image: var(--img-35); }
.m-ph[data-img-no="36"], [data-img-no="36"] { background-image: var(--img-36); }
.m-ph[data-img-no="37"], [data-img-no="37"] { background-image: var(--img-37); }
.m-ph[data-img-no="42"], [data-img-no="42"] { background-image: var(--img-42); }
.m-ph[data-img-no="43"], [data-img-no="43"] { background-image: var(--img-43); }
.m-ph[data-img-no="44"], [data-img-no="44"] { background-image: var(--img-44); }
.m-ph[data-img-no="49"], [data-img-no="49"] { background-image: var(--img-49); }
.m-ph[data-img-no="56"], [data-img-no="56"] { background-image: var(--img-56); }
.m-ph[data-img-no="57"], [data-img-no="57"] { background-image: var(--img-57); }
.m-ph[data-img-no="58"], [data-img-no="58"] { background-image: var(--img-58); }
.m-ph[data-img-no="62"], [data-img-no="62"] { background-image: var(--img-62); }
.m-ph[data-img-no="63"], [data-img-no="63"] { background-image: var(--img-63); }
.m-ph[data-img-no="64"], [data-img-no="64"] { background-image: var(--img-64); }
.m-ph[data-img-no="65"], [data-img-no="65"] { background-image: var(--img-65); }
.m-ph[data-img-no="66"], [data-img-no="66"] { background-image: var(--img-66); }
.m-ph[data-img-no="67"], [data-img-no="67"] { background-image: var(--img-67); }
.m-ph[data-img-no="68"], [data-img-no="68"] { background-image: var(--img-68); }
.m-ph[data-img-no="69"], [data-img-no="69"] { background-image: var(--img-69); }
.m-ph[data-img-no="76"], [data-img-no="76"] { background-image: var(--img-76); }
.m-ph[data-img-no="77"], [data-img-no="77"] { background-image: var(--img-77); }
.m-ph[data-img-no="78"], [data-img-no="78"] { background-image: var(--img-78); }
.m-ph[data-img-no="79"], [data-img-no="79"] { background-image: var(--img-79); }
.m-ph[data-img-no="80"], [data-img-no="80"] { background-image: var(--img-80); }
.m-ph[data-img-no="81"], [data-img-no="81"] { background-image: var(--img-81); }
.m-ph[data-img-no="82"], [data-img-no="82"] { background-image: var(--img-82); }
.m-ph[data-img-no="83"], [data-img-no="83"] { background-image: var(--img-83); }
.m-ph[data-img-no="85"], [data-img-no="85"] { background-image: var(--img-85); }
.m-ph[data-img-no="87"], [data-img-no="87"] { background-image: var(--img-87); }
.m-ph[data-img-no="88"], [data-img-no="88"] { background-image: var(--img-88); }
.m-ph[data-img-no="89"], [data-img-no="89"] { background-image: var(--img-89); }
[data-img-no="00"]::before,
.m-ph[data-img-no="00"]::before,
[data-img-no="01"]::before,
.m-ph[data-img-no="01"]::before,
[data-img-no="02"]::before,
.m-ph[data-img-no="02"]::before,
[data-img-no="03"]::before,
.m-ph[data-img-no="03"]::before,
[data-img-no="04"]::before,
.m-ph[data-img-no="04"]::before,
[data-img-no="05"]::before,
.m-ph[data-img-no="05"]::before,
[data-img-no="06"]::before,
.m-ph[data-img-no="06"]::before,
[data-img-no="07"]::before,
.m-ph[data-img-no="07"]::before,
[data-img-no="08"]::before,
.m-ph[data-img-no="08"]::before,
[data-img-no="09"]::before,
.m-ph[data-img-no="09"]::before,
[data-img-no="10"]::before,
.m-ph[data-img-no="10"]::before,
[data-img-no="11"]::before,
.m-ph[data-img-no="11"]::before,
[data-img-no="12"]::before,
.m-ph[data-img-no="12"]::before,
[data-img-no="13"]::before,
.m-ph[data-img-no="13"]::before,
[data-img-no="14"]::before,
.m-ph[data-img-no="14"]::before,
[data-img-no="16"]::before,
.m-ph[data-img-no="16"]::before,
[data-img-no="17"]::before,
.m-ph[data-img-no="17"]::before,
[data-img-no="25"]::before,
.m-ph[data-img-no="25"]::before,
[data-img-no="26"]::before,
.m-ph[data-img-no="26"]::before,
[data-img-no="27"]::before,
.m-ph[data-img-no="27"]::before,
[data-img-no="28"]::before,
.m-ph[data-img-no="28"]::before,
[data-img-no="29"]::before,
.m-ph[data-img-no="29"]::before,
[data-img-no="30"]::before,
.m-ph[data-img-no="30"]::before,
[data-img-no="31"]::before,
.m-ph[data-img-no="31"]::before,
[data-img-no="32"]::before,
.m-ph[data-img-no="32"]::before,
[data-img-no="33"]::before,
.m-ph[data-img-no="33"]::before,
[data-img-no="34"]::before,
.m-ph[data-img-no="34"]::before,
[data-img-no="35"]::before,
.m-ph[data-img-no="35"]::before,
[data-img-no="36"]::before,
.m-ph[data-img-no="36"]::before,
[data-img-no="37"]::before,
.m-ph[data-img-no="37"]::before,
[data-img-no="42"]::before,
.m-ph[data-img-no="42"]::before,
[data-img-no="43"]::before,
.m-ph[data-img-no="43"]::before,
[data-img-no="44"]::before,
.m-ph[data-img-no="44"]::before,
[data-img-no="49"]::before,
.m-ph[data-img-no="49"]::before,
[data-img-no="56"]::before,
.m-ph[data-img-no="56"]::before,
[data-img-no="57"]::before,
.m-ph[data-img-no="57"]::before,
[data-img-no="58"]::before,
.m-ph[data-img-no="58"]::before,
[data-img-no="62"]::before,
.m-ph[data-img-no="62"]::before,
[data-img-no="63"]::before,
.m-ph[data-img-no="63"]::before,
[data-img-no="64"]::before,
.m-ph[data-img-no="64"]::before,
[data-img-no="65"]::before,
.m-ph[data-img-no="65"]::before,
[data-img-no="66"]::before,
.m-ph[data-img-no="66"]::before,
[data-img-no="67"]::before,
.m-ph[data-img-no="67"]::before,
[data-img-no="68"]::before,
.m-ph[data-img-no="68"]::before,
[data-img-no="69"]::before,
.m-ph[data-img-no="69"]::before,
[data-img-no="76"]::before,
.m-ph[data-img-no="76"]::before,
[data-img-no="77"]::before,
.m-ph[data-img-no="77"]::before,
[data-img-no="78"]::before,
.m-ph[data-img-no="78"]::before,
[data-img-no="79"]::before,
.m-ph[data-img-no="79"]::before,
[data-img-no="80"]::before,
.m-ph[data-img-no="80"]::before,
[data-img-no="81"]::before,
.m-ph[data-img-no="81"]::before,
[data-img-no="82"]::before,
.m-ph[data-img-no="82"]::before,
[data-img-no="83"]::before,
.m-ph[data-img-no="83"]::before,
[data-img-no="85"]::before,
.m-ph[data-img-no="85"]::before,
[data-img-no="87"]::before,
.m-ph[data-img-no="87"]::before,
[data-img-no="88"]::before,
.m-ph[data-img-no="88"]::before,
[data-img-no="89"]::before,
.m-ph[data-img-no="89"]::before {
  display: none;
}
[data-img-no="00"] .m-ph__label,
.m-ph[data-img-no="00"] .m-ph__label,
[data-img-no="01"] .m-ph__label,
.m-ph[data-img-no="01"] .m-ph__label,
[data-img-no="02"] .m-ph__label,
.m-ph[data-img-no="02"] .m-ph__label,
[data-img-no="03"] .m-ph__label,
.m-ph[data-img-no="03"] .m-ph__label,
[data-img-no="04"] .m-ph__label,
.m-ph[data-img-no="04"] .m-ph__label,
[data-img-no="05"] .m-ph__label,
.m-ph[data-img-no="05"] .m-ph__label,
[data-img-no="06"] .m-ph__label,
.m-ph[data-img-no="06"] .m-ph__label,
[data-img-no="07"] .m-ph__label,
.m-ph[data-img-no="07"] .m-ph__label,
[data-img-no="08"] .m-ph__label,
.m-ph[data-img-no="08"] .m-ph__label,
[data-img-no="09"] .m-ph__label,
.m-ph[data-img-no="09"] .m-ph__label,
[data-img-no="10"] .m-ph__label,
.m-ph[data-img-no="10"] .m-ph__label,
[data-img-no="11"] .m-ph__label,
.m-ph[data-img-no="11"] .m-ph__label,
[data-img-no="12"] .m-ph__label,
.m-ph[data-img-no="12"] .m-ph__label,
[data-img-no="13"] .m-ph__label,
.m-ph[data-img-no="13"] .m-ph__label,
[data-img-no="14"] .m-ph__label,
.m-ph[data-img-no="14"] .m-ph__label,
[data-img-no="16"] .m-ph__label,
.m-ph[data-img-no="16"] .m-ph__label,
[data-img-no="17"] .m-ph__label,
.m-ph[data-img-no="17"] .m-ph__label,
[data-img-no="25"] .m-ph__label,
.m-ph[data-img-no="25"] .m-ph__label,
[data-img-no="26"] .m-ph__label,
.m-ph[data-img-no="26"] .m-ph__label,
[data-img-no="27"] .m-ph__label,
.m-ph[data-img-no="27"] .m-ph__label,
[data-img-no="28"] .m-ph__label,
.m-ph[data-img-no="28"] .m-ph__label,
[data-img-no="29"] .m-ph__label,
.m-ph[data-img-no="29"] .m-ph__label,
[data-img-no="30"] .m-ph__label,
.m-ph[data-img-no="30"] .m-ph__label,
[data-img-no="31"] .m-ph__label,
.m-ph[data-img-no="31"] .m-ph__label,
[data-img-no="32"] .m-ph__label,
.m-ph[data-img-no="32"] .m-ph__label,
[data-img-no="33"] .m-ph__label,
.m-ph[data-img-no="33"] .m-ph__label,
[data-img-no="34"] .m-ph__label,
.m-ph[data-img-no="34"] .m-ph__label,
[data-img-no="35"] .m-ph__label,
.m-ph[data-img-no="35"] .m-ph__label,
[data-img-no="36"] .m-ph__label,
.m-ph[data-img-no="36"] .m-ph__label,
[data-img-no="37"] .m-ph__label,
.m-ph[data-img-no="37"] .m-ph__label,
[data-img-no="42"] .m-ph__label,
.m-ph[data-img-no="42"] .m-ph__label,
[data-img-no="43"] .m-ph__label,
.m-ph[data-img-no="43"] .m-ph__label,
[data-img-no="44"] .m-ph__label,
.m-ph[data-img-no="44"] .m-ph__label,
[data-img-no="49"] .m-ph__label,
.m-ph[data-img-no="49"] .m-ph__label,
[data-img-no="56"] .m-ph__label,
.m-ph[data-img-no="56"] .m-ph__label,
[data-img-no="57"] .m-ph__label,
.m-ph[data-img-no="57"] .m-ph__label,
[data-img-no="58"] .m-ph__label,
.m-ph[data-img-no="58"] .m-ph__label,
[data-img-no="62"] .m-ph__label,
.m-ph[data-img-no="62"] .m-ph__label,
[data-img-no="63"] .m-ph__label,
.m-ph[data-img-no="63"] .m-ph__label,
[data-img-no="64"] .m-ph__label,
.m-ph[data-img-no="64"] .m-ph__label,
[data-img-no="65"] .m-ph__label,
.m-ph[data-img-no="65"] .m-ph__label,
[data-img-no="66"] .m-ph__label,
.m-ph[data-img-no="66"] .m-ph__label,
[data-img-no="67"] .m-ph__label,
.m-ph[data-img-no="67"] .m-ph__label,
[data-img-no="68"] .m-ph__label,
.m-ph[data-img-no="68"] .m-ph__label,
[data-img-no="69"] .m-ph__label,
.m-ph[data-img-no="69"] .m-ph__label,
[data-img-no="76"] .m-ph__label,
.m-ph[data-img-no="76"] .m-ph__label,
[data-img-no="77"] .m-ph__label,
.m-ph[data-img-no="77"] .m-ph__label,
[data-img-no="78"] .m-ph__label,
.m-ph[data-img-no="78"] .m-ph__label,
[data-img-no="79"] .m-ph__label,
.m-ph[data-img-no="79"] .m-ph__label,
[data-img-no="80"] .m-ph__label,
.m-ph[data-img-no="80"] .m-ph__label,
[data-img-no="81"] .m-ph__label,
.m-ph[data-img-no="81"] .m-ph__label,
[data-img-no="82"] .m-ph__label,
.m-ph[data-img-no="82"] .m-ph__label,
[data-img-no="83"] .m-ph__label,
.m-ph[data-img-no="83"] .m-ph__label,
[data-img-no="85"] .m-ph__label,
.m-ph[data-img-no="85"] .m-ph__label,
[data-img-no="87"] .m-ph__label,
.m-ph[data-img-no="87"] .m-ph__label,
[data-img-no="88"] .m-ph__label,
.m-ph[data-img-no="88"] .m-ph__label,
[data-img-no="89"] .m-ph__label,
.m-ph[data-img-no="89"] .m-ph__label {
  display: none;
}
.m-ph--logo[data-img-no="00"],
.m-ph--logo[data-img-no="01"],
.m-ph--logo[data-img-no="02"],
.m-ph--logo[data-img-no="03"],
.m-ph--logo[data-img-no="04"],
.m-ph--logo[data-img-no="05"],
.m-ph--logo[data-img-no="06"],
.m-ph--logo[data-img-no="07"],
.m-ph--logo[data-img-no="08"],
.m-ph--logo[data-img-no="09"],
.m-ph--logo[data-img-no="10"],
.m-ph--logo[data-img-no="11"],
.m-ph--logo[data-img-no="12"],
.m-ph--logo[data-img-no="13"],
.m-ph--logo[data-img-no="14"],
.m-ph--logo[data-img-no="16"],
.m-ph--logo[data-img-no="17"],
.m-ph--logo[data-img-no="25"],
.m-ph--logo[data-img-no="26"],
.m-ph--logo[data-img-no="27"],
.m-ph--logo[data-img-no="28"],
.m-ph--logo[data-img-no="29"],
.m-ph--logo[data-img-no="30"],
.m-ph--logo[data-img-no="31"],
.m-ph--logo[data-img-no="32"],
.m-ph--logo[data-img-no="33"],
.m-ph--logo[data-img-no="34"],
.m-ph--logo[data-img-no="35"],
.m-ph--logo[data-img-no="36"],
.m-ph--logo[data-img-no="37"],
.m-ph--logo[data-img-no="42"],
.m-ph--logo[data-img-no="43"],
.m-ph--logo[data-img-no="44"],
.m-ph--logo[data-img-no="49"],
.m-ph--logo[data-img-no="56"],
.m-ph--logo[data-img-no="57"],
.m-ph--logo[data-img-no="58"],
.m-ph--logo[data-img-no="62"],
.m-ph--logo[data-img-no="63"],
.m-ph--logo[data-img-no="64"],
.m-ph--logo[data-img-no="65"],
.m-ph--logo[data-img-no="66"],
.m-ph--logo[data-img-no="67"],
.m-ph--logo[data-img-no="68"],
.m-ph--logo[data-img-no="69"],
.m-ph--logo[data-img-no="76"],
.m-ph--logo[data-img-no="77"],
.m-ph--logo[data-img-no="78"],
.m-ph--logo[data-img-no="79"],
.m-ph--logo[data-img-no="80"],
.m-ph--logo[data-img-no="81"],
.m-ph--logo[data-img-no="82"],
.m-ph--logo[data-img-no="83"],
.m-ph--logo[data-img-no="85"],
.m-ph--logo[data-img-no="87"],
.m-ph--logo[data-img-no="88"],
.m-ph--logo[data-img-no="89"] {
  border: 0;
  background-color: transparent;
  background-size: contain;
}
/* === IMAGE-MAP:END === */


/* =============================================================
   1. デザイントークン
   ★マジックナンバーは以下に集約。本文中に直書きしない。
   ============================================================= */
:root{

  /* ---- 書体 ---- */
  --font-base: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", YuGothic, sans-serif;
  --font-display: var(--font-base);   /* 英字見出しも同じ書体 */

  /* ---- ウェイト ---- */
  --fw-normal: 400;   /* 本文 */
  --fw-medium: 500;   /* 和文見出し・カード見出し */
  --fw-display: 600;  /* 巨大英字（実際は700で描画される） */
  --fw-bold: 700;
  --fw-black: 900;    /* リード文 */

  /* ---- 色 -----------------------------------------------------
     ★アクセント＝深いオリーブ緑、サブアクセント＝ロゴと同じ金。
       背景（地・暗転）は従来のまま据え置き、色相を振るのは
       インク・罫・アクセントだけ。 */

  /* 明るい地 ＝ 変更しない */
  --c-bg:          #f0f0f0;  /* ページ地。白ではなく淡グレー（最頻出・出典 body） */
  --c-bg-white:    #ffffff;  /* 白地セクション */

  /* 暗い地 ＝ 無彩色の #2d2d2d は黒に見えて硬い。
     明度はほぼ据え置きのまま、色相だけアクセント（#4d5c3d／色相89°）と
     同じ family に寄せた。彩度は低く、緑と分かるかどうかの手前で止める。
     ★白文字とのコントラストは 13.77:1 → 13.70:1（差 0.5%）でほぼ不変。
     ★金 #c09843 とは 5.12:1 → 5.10:1。どちらも落としていない。
     ★振り幅の候補（1行差し替えるだけで切り替わる）
        控えめ #2c2f29（彩度 7%）／中間 #2a2f26（彩度11%・採用）／
        しっかり #25301f（彩度22%） */
  --c-bg-dark:     #2a2f26;  /* 暗転セクション地（旧 #2d2d2d） */
  --c-bg-nav:      #2a2f26;  /* フルスクリーンナビの地。暗転セクションと揃える */
  --c-bg-dark-deep:#171a14;  /* 暗地の上でさらに沈める面（hover 等・旧 #151515） */

  /* インク ＝ 明度は据え置きのまま、色相だけ緑寄り（＝冷たさを抜く）。
     元は #212529 のように青寄りで、これが「冷たい」印象の正体だった。 */
  --c-ink:         #272b23;  /* 主要テキスト・リンク（旧 #272727） */
  --c-ink-strong:  #010101;  /* 見出し。ほぼ黒なので色相を振っても変化しない */
  --c-ink-body:    #252921;  /* 本文（旧 #212529＝青寄りだった） */
  --c-ink-mute:    #b8bfb1;  /* 補助テキスト（旧 #b8b8b8） */
  --c-ink-sub:     #40463a;  /* 旧 #404040 */
  --c-white:       #ffffff;

  /* ---- 緑と金 ----
     --c-green はブランドの参考色から採った緑そのもの。
     ただし白文字を乗せると 4.29:1 で 4.5:1 に届かないため、
     CTA など「白文字を乗せる面」には色相(90°)を保ったまま
     暗くした --c-accent を使う。 */
  --c-green:       #727e66;  /* 参考画像の緑。面・図版むけ */
  --c-green-pale:  #aec09c;  /* 参考画像の淡い緑。ごく薄い面むけ */
  --c-accent:      #4d5c3d;  /* ★アクセント＝深いオリーブ緑。白文字と7.2:1 */
  --c-accent-deep: #3d4931;  /* アクセントのhover */
  --c-gold:        #c09843;  /* ★サブアクセント＝ロゴと同じ金 */
  --c-brown:       #665951;  /* 温かみのブラウン（CTAタブ2本目） */
  --c-gray:        #4f4f4f;  /* CTAタブ3本目 */
  --c-black:       #010101;  /* CTAタブ4本目 */

  --c-line:        #d1d6cc;  /* 罫線（旧 #d1d1d1） */

  /* ---- セクション巨大英字の4色 ----
     セクションごとに使い分ける。地に溶かす「透かし」と、
     はっきり読ませる「見出し」を交互に置いてリズムを作る。 */
  --c-en-ghost:    #ffffff;  /* 明るい地に溶かす透かし */
  --c-en-soft:     #f0f0f0;  /* 白地に溶かす透かし */
  --c-en-mid:      #40463a;  /* 読ませる（中）。旧 #404040 */
  --c-en-strong:   #010101;  /* 読ませる（強） */

  /* ---- 画像プレースホルダ（写真が入るまでの仮の塗り）----
     実際に入る写真は暗めの室内が多いため、仮の塗りも暗いグレーにしておく。
     こうすると白抜きの見出し・ロゴ・アイコンが仮の状態でも読める。 */
  --c-ph-fill:     #373b33;  /* 仮の塗り。暗地と同じ色相family（旧 #3a3a3a） */
  --c-ph-stripe:   rgba(255,255,255,.06);  /* 網掛け */
  --c-ph-label:    #ffffff;  /* 番号ラベルの文字 */
  --c-ph-label-bg: rgba(0,0,0,.55);        /* 番号ラベルの地 */
  --c-line-soft:   #eff1ed;  /* 旧 #efefef */

  /* ---- 流体タイポ（8幅の回帰式） ---- */

  /* ヒーロー巨大英字: 375→82.8px / 768→155.6px / 1280→164px / 1920→280px */
  --fs-hero: clamp(82.78px, calc(13.4px + 18.5vw), 164px);

  /* セクション巨大英字: <992 → 30px+8.333vw
                         ≧992 → max(120px, 9.375vw)（1280で120px・1920で180px） */
  --fs-sec-en: calc(30px + 8.333vw);

  /* セクション和文見出し: <992 → 9.01px+1.9424vw */
  --fs-sec-ja: calc(9.01px + 1.9424vw);

  /* リード大（375→18.7 / 1280→61.0 / 1920→90） */
  --fs-lead-lg: calc(1.4px + 4.615vw);
  /* リード本文（375→16.2 / 1280→30.3 / 1920→40） */
  --fs-lead: calc(10.47px + 1.538vw);
  /* カード見出し h3（375→14.1 / 992→19.3 / 1200以上→20で頭打ち） */
  --fs-card-title: min(20px, calc(11px + 0.8333vw));

  --fs-body: 16px;      /* 全幅で16px固定 */
  --fs-small: 14px;
  --fs-xsmall: 12px;

  /* ---- 行間 ---- */
  --lh-display: 1;      /* 巨大英字（164/164・120/120） */
  --lh-tight: 1.2;      /* 和文見出し 36/30・カード 24/20 */
  --lh-body: 1.5;       /* 本文 24/16 */
  --lh-lead: 1.8;       /* リード 109.8/61.0・54.6/30.3 */
  --lh-loose: 2;

  /* ---- 字間 ----
     全要素 letter-spacing:normal。トラッキングは盛らない。 */
  --ls-base: normal;
  --ls-display: normal;

  /* ---- 余白 ---------------------------------------------------
     セクション上下padding: 375→60.6 / 768→75.9 / 1280→95.8 / 1920→120 */
  --sec-pad: calc(46.16px + 3.846vw);
  --sec-pad-lg: calc(var(--sec-pad) * 1.6);   /* 155.7px @1280 */

  --gap-xs: 8px;    /* SNS・タグ列 */
  --gap-sm: 16px;   /* フッターナビ */
  --gap-md: 20px;   /* カードグリッド */
  --gap-lg: 40px;
  --gap-xl: 64px;

  /* ---- 内側幅 ---- */
  --inner-pad: 12px;
  --inner-max: 1140px;    /* 1200–1399 */
  --inner-max-xxl: 1320px;/* 1400以上 */

  /* ---- 右端CTAタブ ---- */
  --cta-w: 44px;          /* タブ幅 */
  --cta-text-w: 24px;     /* 内側テキスト幅 */
  --cta-z: 50;

  /* ---- ヒーロー ---- */
  --hero-h: calc(100svh - (var(--frame-pad) * 2));
  --hero-tilt: -16deg;    /* 帯の傾き。≧1200px では -10deg */
  --marquee-dur: 40s;     /* マーキー: 40s linear infinite */
  --hero-title-pad: 36px; /* 巨大見出しの左インデント（縦組みレールの逃げ） */
  /* ★最長行の字幅（em）。原稿を変えたら必ずここを直す。
     和文は1文字＝約1em。「信頼を層にして、」＝8文字＝8em。
     欧文は約0.55em/字。"Ready stay" なら 5.5。
     ★この値は「文字数」ではなく「器の割り数」。文字数ちょうど（=8）だと
       行が器の幅いっぱい（右端99%）まで届き、和文は字面が大きいので
       圧迫して見える。文字数より少し大きい値を入れて左右に余白を作る。
       9.2 = 8文字ぶんが器の約87%に収まる。 */
  --hero-title-em: 9.2;
  --hero-title-safety: 10px;  /* 右端の余裕 */
  /* 帯（傾いた写真マーキー）の位置と高さ。
     ★左端から始まり、下端は画面外まで抜ける。巨大英字はこの帯の上に乗る。 */
  --hero-band-top: 72%;   /* 帯の中心を画面のやや下に置く */
  --hero-band-h: 92vh;    /* 帯の厚み。上端が巨大英字を覆い、下端は画面外へ抜ける */
  /* ★帯にかける暗幕の濃さ。帯（写真）の上だけに掛かる。地色には掛けない。
     白見出しが3:1を割らない最小値。実測で決めた値なので勝手に上げない。 */
  --hero-scrim: 0.42;
  --feature-panel-h-sp: 180px;
  --feature-panel-h-pc: 240px;
  --hero-panel-w: 783px;  /* 横位パネル 783×482 */
  --hero-panel-h: 482px;
  --watermark-size: 320px;/* 透かしロゴ 320×320 */

  /* ---- パーツ ---- */
  --btn-circle: 40px;     /* 円ボタン 40×40 / radius 50% */
  --radius: 0px;          /* 角丸ゼロ・影なし */
  --shadow: none;
  --tap: 44px;            /* タップ領域下限 */

  /* ---- 額縁 ---- */
  --frame-pad: 5px;       /* body の padding。992px以上で 10px */
  --frame-radius: 8px;    /* FVの角丸 */
  --frame-border: 2px;    /* FVの白フチ */
  --frame-shadow: 0 0 10px rgba(0,0,0,.3);
  --c-sweep-dark: #423f3f;/* sweep塗り（暗） */
  --c-sweep-light:#cecece;/* sweep塗り（明） */

  --ease: cubic-bezier(.22,.61,.36,1);
  --dur: .6s;

  /* ---- 出現アニメーション ---- */
  --reveal-dur-opacity: .55s;
  --reveal-ease-opacity: ease;
  --reveal-dur-transform: .65s;
  --reveal-ease-transform: cubic-bezier(.2,.65,.2,1);
  --reveal-blur: 2px;

  --z-hero-bg: 0;
  --z-hero-fg: 3;
  --z-side: 50;
  --z-header: 400;
  --z-nav: 450;
  --z-burger: 500;
}

/* ≧992px: 巨大英字が別式に切り替わる */
@media (min-width:992px){
  :root{
    --frame-pad: 10px;
    --fs-sec-en: max(120px, 9.375vw);
    --fs-sec-ja: max(30px, calc(10.32px + 1.5458vw));
  }
}
@media (min-width:1200px){
  :root{
    --fs-hero: calc(100px + 5vw);   /* 1280→164px */
    --hero-tilt: -10deg;            /* PCでは帯の傾きを浅くする */
  }
}
@media (min-width:1600px){
  :root{ --fs-hero: 14.583vw; }           /* 1920→280px */
}


/* =============================================================
   2. リセット
   ============================================================= */
*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  /* ★横スクロール対策は「要素幅で解決」が原則。
     ただしヒーローの傾きコラージュは意図的に画面外へ出す設計のため、
     はみ出しは .m-hero 側の clip で閉じ込める（body に overflow-x:hidden を掛けない）。 */
}

/* 「額縁」: body 自体に余白を持たせ、ページ全体を細い縁で囲う */
body{
  margin:0;
  padding:var(--frame-pad);
  background:var(--c-bg);
  color:var(--c-ink-body);
  font-family:var(--font-base);
  font-size:var(--fs-body);
  font-weight:var(--fw-normal);
  line-height:var(--lh-body);
  letter-spacing:var(--ls-base);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-feature-settings:"palt" 1;   /* 和文の詰め */
}

h1,h2,h3,h4,h5,h6,p,figure,ul,ol,dl,dd,blockquote{ margin:0; padding:0; }
ul,ol{ list-style:none; }
img,svg,video{ max-width:100%; height:auto; display:block; }
a{ color:var(--c-ink); text-decoration:none; }
a:hover{ text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
table{ border-collapse:collapse; width:100%; }
:focus-visible{ outline:2px solid var(--c-accent); outline-offset:3px; } /* フォーカスリングは消さない */

/* 動きを減らす設定への対応 */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}


/* =============================================================
   3. 画像プレースホルダ  .m-ph
   ★変数未設定 → 網掛け＋「番号 / 用途 / 推奨サイズ」ラベルが見える
     変数設定＋data-img-set="1" → 写真になりラベルは消える
   ============================================================= */
.m-ph{
  position:relative;
  display:block;
  overflow:hidden;
  background-color:var(--c-ph-fill);
  background-repeat:no-repeat;
  background-position:center center;
  background-size:cover;
  border-radius:var(--radius);
}
/* 未設定時の網掛け（斜めストライプ）。写真が入ると上から覆われる */
.m-ph::before{
  content:"";
  position:absolute; inset:0;
  background-image:repeating-linear-gradient(
    -45deg,
    var(--c-ph-stripe) 0 10px,
    rgba(0,0,0,0)      10px 20px
  );
  pointer-events:none;
}
.m-ph[data-img-set="1"]::before{ display:none; }

.m-ph__label{
  /* ★枠いっぱいを覆う。小さいカードでも番号がはみ出さず必ず読める。
     （「12番をこの写真に」と番号で差し替え指示を出すため、番号の可読性は運用要件） */
  position:absolute; inset:0;
  z-index:2;
  display:grid;
  place-items:center;
  padding:4px;
  background:var(--c-ph-label-bg);
  color:var(--c-ph-label);
  font-size:clamp(9px, 2.4vw, 11px);
  font-weight:var(--fw-medium);
  line-height:1.35;
  letter-spacing:normal;
  text-align:center;
  overflow:hidden;
  word-break:break-word;
}
/* 画像が入ったら自動でラベルが消える */
.m-ph[data-img-set="1"] .m-ph__label{ display:none; }

/* 比率モディファイア */
.m-ph--16x9{ aspect-ratio:16/9; }
.m-ph--4x3 { aspect-ratio:4/3; }
.m-ph--3x4 { aspect-ratio:3/4; }
.m-ph--1x1 { aspect-ratio:1/1; }
.m-ph--21x9{ aspect-ratio:21/9; }
.m-ph--free{ aspect-ratio:auto; }
.m-ph--logo{
  background-size:contain;
  background-color:var(--c-ph-fill);
  border:1px dashed rgba(255,255,255,.45);
}
.m-ph--logo::before{ display:none; }
/* ロゴ枠は器が小さいので、さらに小さく */
.m-ph--logo .m-ph__label{ font-size:9px; line-height:1.2; padding:2px; }
.m-ph--logo[data-img-set="1"]{ border:0; background-color:transparent; }

/* 画像の当て込み（IMAGE-MAPブロックの外に置く）
   id ではなく [data-img-no] で当てる。マーキーの複製パネルは
   重複id防止のため id を持たないため、id セレクタでは背景が付かない。 */
[data-img-no="00"]{ background-image: var(--img-00, none); }
[data-img-no="01"]{ background-image: var(--img-01, none); }
[data-img-no="02"]{ background-image: var(--img-02, none); }
[data-img-no="03"]{ background-image: var(--img-03, none); }
[data-img-no="04"]{ background-image: var(--img-04, none); }
[data-img-no="05"]{ background-image: var(--img-05, none); }
[data-img-no="06"]{ background-image: var(--img-06, none); }
[data-img-no="07"]{ background-image: var(--img-07, none); }
[data-img-no="08"]{ background-image: var(--img-08, none); }
[data-img-no="09"]{ background-image: var(--img-09, none); }
[data-img-no="10"]{ background-image: var(--img-10, none); }
[data-img-no="11"]{ background-image: var(--img-11, none); }
[data-img-no="12"]{ background-image: var(--img-12, none); }
[data-img-no="13"]{ background-image: var(--img-13, none); }
[data-img-no="14"]{ background-image: var(--img-14, none); }
[data-img-no="15"]{ background-image: var(--img-15, none); }
[data-img-no="16"]{ background-image: var(--img-16, none); }
[data-img-no="17"]{ background-image: var(--img-17, none); }
[data-img-no="18"]{ background-image: var(--img-18, none); }
[data-img-no="19"]{ background-image: var(--img-19, none); }
[data-img-no="20"]{ background-image: var(--img-20, none); }
[data-img-no="21"]{ background-image: var(--img-21, none); }
[data-img-no="22"]{ background-image: var(--img-22, none); }
[data-img-no="23"]{ background-image: var(--img-23, none); }
[data-img-no="24"]{ background-image: var(--img-24, none); }
[data-img-no="25"]{ background-image: var(--img-25, none); }
[data-img-no="27"]{ background-image: var(--img-27, none); }
[data-img-no="28"]{ background-image: var(--img-28, none); }
[data-img-no="29"]{ background-image: var(--img-29, none); }
[data-img-no="30"]{ background-image: var(--img-30, none); }
[data-img-no="31"]{ background-image: var(--img-31, none); }
[data-img-no="32"]{ background-image: var(--img-32, none); }
[data-img-no="33"]{ background-image: var(--img-33, none); }
[data-img-no="34"]{ background-image: var(--img-34, none); }
[data-img-no="35"]{ background-image: var(--img-35, none); }
[data-img-no="36"]{ background-image: var(--img-36, none); }
[data-img-no="37"]{ background-image: var(--img-37, none); }
[data-img-no="38"]{ background-image: var(--img-38, none); }
[data-img-no="39"]{ background-image: var(--img-39, none); }
[data-img-no="40"]{ background-image: var(--img-40, none); }
[data-img-no="41"]{ background-image: var(--img-41, none); }
[data-img-no="42"]{ background-image: var(--img-42, none); }
[data-img-no="43"]{ background-image: var(--img-43, none); }
[data-img-no="44"]{ background-image: var(--img-44, none); }
[data-img-no="45"]{ background-image: var(--img-45, none); }
[data-img-no="46"]{ background-image: var(--img-46, none); }
[data-img-no="47"]{ background-image: var(--img-47, none); }
[data-img-no="48"]{ background-image: var(--img-48, none); }
[data-img-no="49"]{ background-image: var(--img-49, none); }
[data-img-no="50"]{ background-image: var(--img-50, none); }
[data-img-no="51"]{ background-image: var(--img-51, none); }
[data-img-no="52"]{ background-image: var(--img-52, none); }
[data-img-no="53"]{ background-image: var(--img-53, none); }
[data-img-no="54"]{ background-image: var(--img-54, none); }
[data-img-no="55"]{ background-image: var(--img-55, none); }
[data-img-no="26"]{ background-image: var(--img-26, none); }
[data-img-no="56"]{ background-image: var(--img-56, none); }
[data-img-no="57"]{ background-image: var(--img-57, none); }
[data-img-no="58"]{ background-image: var(--img-58, none); }
[data-img-no="59"]{ background-image: var(--img-59, none); }
[data-img-no="60"]{ background-image: var(--img-60, none); }
[data-img-no="61"]{ background-image: var(--img-61, none); }
[data-img-no="62"]{ background-image: var(--img-62, none); }
[data-img-no="63"]{ background-image: var(--img-63, none); }
[data-img-no="64"]{ background-image: var(--img-64, none); }
[data-img-no="65"]{ background-image: var(--img-65, none); }
[data-img-no="66"]{ background-image: var(--img-66, none); }
[data-img-no="67"]{ background-image: var(--img-67, none); }
[data-img-no="68"]{ background-image: var(--img-68, none); }
[data-img-no="69"]{ background-image: var(--img-69, none); }


/* =============================================================
   4. 共通レイアウト
   ============================================================= */
.m-main{ display:block; }

.m-inner{
  width:100%;
  max-width:none;
  margin-inline:auto;
  padding-inline:var(--inner-pad);
}
@media (min-width:768px){ .m-inner{ max-width:720px; } }
@media (min-width:992px){ .m-inner{ max-width:960px; } }
@media (min-width:1200px){ .m-inner{ max-width:var(--inner-max); } }
@media (min-width:1400px){ .m-inner{ max-width:var(--inner-max-xxl); } }

.m-section{
  position:relative;
  padding-block:var(--sec-pad);
  background:var(--c-bg);
}
.m-section--dark{
  background:var(--c-bg-dark);
  color:var(--c-white);
}
.m-section--dark a{ color:var(--c-white); }


/* -------- セクション見出し（巨大英字＋和文小見出しの2段） -------- */
.m-heading{
  position:relative;
  margin-bottom:var(--gap-md);
  line-height:var(--lh-display);
}
.m-heading__en{
  display:block;
  font-family:var(--font-display);
  font-size:var(--fs-sec-en);
  font-weight:var(--fw-display);
  line-height:var(--lh-display);
  letter-spacing:var(--ls-display);
  color:var(--c-white);
  /* 巨大英字は紙面から溢れさせる。はみ出しは親（.m-section）の clip で閉じる。 */
  white-space:nowrap;
}
.m-heading__ja{
  display:block;
  margin-top:.4em;
  font-size:var(--fs-sec-ja);
  font-weight:var(--fw-medium);
  line-height:var(--lh-tight);
  letter-spacing:var(--ls-base);
  color:var(--c-ink-strong);
}
/* 明るい地の上の巨大英字は、地よりわずかに明るい白で「透かし」に見せる */
.m-section:not(.m-section--dark) .m-heading__en{ color:var(--c-white); }
.m-section--dark .m-heading__ja,
.m-heading--onDark .m-heading__ja{ color:var(--c-white); }
.m-heading--onDark .m-heading__en{ color:var(--c-white); }

.m-heading--big .m-heading__en{ font-size:calc(var(--fs-sec-en) * 1.15); }

/* 白抜き（アウトライン）文字 */
.m-heading__stroke{
  color:transparent;
  -webkit-text-stroke:1px var(--c-white);
  paint-order:stroke fill;
}

/* セクションの巨大英字のはみ出しを閉じ込める（横スクロール防止の要） */
.m-section{ overflow:hidden; }


/* -------- ボタン -------- */
.m-btn{
  display:inline-flex;
  align-items:center;
  gap:12px;
  min-height:var(--tap);
  padding:0;
  color:var(--c-ink);
  font-size:var(--fs-body);
  font-weight:var(--fw-normal);
  line-height:var(--lh-body);
  letter-spacing:var(--ls-base);
  transition:opacity .3s var(--ease);
}
.m-btn:hover{ opacity:.6; }
.m-btn__icon,
.m-btn--circle .m-btn__icon{
  flex:0 0 var(--btn-circle);
  width:var(--btn-circle);
  height:var(--btn-circle);
  /* ★丸枠だけ金にする（サブアクセント）。ロゴが金なので、サイト側にも
     金を点在させないとロゴだけ浮く。ここはサイト全体で最も数が多い装飾。
     ★中の矢印は currentColor のまま＝インクの濃さを保つ。意味を運ぶ図形の
       コントラストは落とさず、装飾の輪郭だけを金にする。 */
  border:1px solid var(--c-gold);
  border-radius:50%;
  display:grid;
  place-items:center;
  position:relative;
  /* 丸の外へ図形が出ないための保険。輪の内側だけを見せる */
  overflow:hidden;
}
/* 円の中の矢印（アイコンが空のときの代替。図形が入っていれば出さない）
   ※図形と代替の両方が出ると、grid が2行に積んで中心がずれ、輪からはみ出す */
.m-btn__icon:not(:has(svg)):not(:has(img))::before{
  grid-area:1 / 1;
  content:"";
  width:9px; height:9px;
  border-top:1px solid currentColor;
  border-right:1px solid currentColor;
  transform:rotate(45deg) translate(-1px,1px);
}
/* 図形は必ず輪と同じマスの中央に置き、輪の内側に収まる大きさに固定する */
.m-btn__icon > svg,
.m-btn__icon > img{
  grid-area:1 / 1;
  display:block;
  width:calc(var(--btn-circle) * .45);
  height:calc(var(--btn-circle) * .45);
  /* 輪ぴったりではなく、内側に余白を残す */
  max-width:none;
  overflow:visible;
  color:inherit;
  pointer-events:none;
}
.m-btn__label{ display:inline-block; }
.m-btn--light{ color:var(--c-white); }
.m-btn--icononly .m-btn__label{
  position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%);
}
.m-btn-wrap{ margin-top:var(--gap-md); }
@media (min-width:768px){ .m-btn-wrap{ margin-top:var(--gap-lg); } }
.m-section--dark .m-btn{ color:var(--c-white); }


/* =============================================================
   5. S01 ヒーロー（最優先）
   高さ = 100vh相当 / 巨大英字2行 / 傾いた写真マーキー
   パネルは角丸なし・影なし
   ============================================================= */
.m-hero{
  position:relative;
  min-height:var(--hero-h);
  display:flex;
  flex-direction:column;
  justify-content:center;
  background:var(--c-bg);
  /* 額縁: 角丸8px + 白2px + 影 */
  border:var(--frame-border) solid var(--c-white);
  border-radius:var(--frame-radius);
  box-shadow:var(--frame-shadow);
  /* ★傾けたパネルは必ず画面外へ出る。ここで確実に閉じ込める＝375pxでも横スクロールしない */
  overflow:hidden;
  isolation:isolate;
}

/* ---- 背景の巨大な白いアウトラインロゴ透かし ---- */
.m-hero__watermark{
  position:absolute;
  top:50%; left:50%;
  translate:-50% -50%;
  z-index:var(--z-hero-bg);
  width:min(62vw, calc(var(--watermark-size) * 1.35));
  aspect-ratio:1/1;
  color:rgba(255,255,255,.14);
  pointer-events:none;
  opacity:.5;
  background-color:transparent;
  background-size:contain;
}
.m-hero__watermark::before{ display:none; }
.m-hero__watermark svg{ width:100%; height:auto; display:block; }
.m-hero__watermark .m-ph__label{
  font-size:10px;
}

/* ---- 傾いた写真マーキー ----
   40s linear infinite / 7枚+複製7枚=14枚
   帯の傾きは SP/TAB -16deg、PC(≧1200px) -10deg */
.m-hero__marquee{
  /* 画面いっぱいをクリップ枠にする。帯そのものはこの中で左端から始まる。 */
  position:absolute;
  inset:0;
  z-index:1;
  overflow:hidden;
  pointer-events:none;
}
.m-hero__track{
  position:absolute;
  left:0;                        /* ★左端から始める（左に隙間を作らない） */
  top:var(--hero-band-top);
  translate:0 -50%;
  transform-origin:0 50%;        /* 左端を軸に傾ける */
  rotate:var(--hero-tilt);
  display:flex;
  align-items:center;
  gap:10px;
  /* ★帯そのものに地を持たせる。パネル間の継ぎ目から明るい地が透けると
       その部分だけ白文字が読めなくなるため。 */
  background:var(--c-bg-dark);
  width:max-content;
  animation:mMarquee var(--marquee-dur) linear infinite;
}
.m-hero__panel{
  flex:0 0 auto;
  height:var(--hero-band-h);     /* ★帯の下端が画面外へ抜ける厚み */
  aspect-ratio:4/3;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

/* ---- 帯の上の暗幕 ----
   白の巨大見出しは帯の上に乗る。実写は明るいので、そのままだと白文字が沈む。
   ★掛けるのは帯（＝写真とパネル間の継ぎ目）の上だけ。地色は明るいまま残す。
   ★濃さは --hero-scrim。白文字が全域で3:1以上になる最小値を実測で決めている。
     これ以上濃くしない（写真が見えなくなる）。 */
.m-hero__track::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgb(0 0 0 / var(--hero-scrim));
  pointer-events:none;
}

/* トラックは「実体＋複製」の2セット。-50% 動かすと継ぎ目なくループする */
@keyframes mMarquee{
  from{ transform:translateX(0); }
  to  { transform:translateX(-50%); }
}

/* ヒーロー内のプレースホルダのラベルは小さく控えめに */
.m-hero .m-ph__label{ font-size:clamp(9px,1.1vw,11px); }

/* ---- 巨大な白抜き英字2行 ---- */
.m-hero__title{
  position:relative;
  z-index:var(--z-hero-fg);
  margin:0;
  /* 左は縦組みレールぶんだけ空ける */
  padding-left:var(--hero-title-pad);
  padding-right:var(--inner-pad);
  color:var(--c-white);
  font-family:var(--font-display);
  /* 規定サイズを上限にしつつ、1行が器に収まるところまでだけ落とす。
     --hero-title-em = 最長行の概算字幅（em）。原稿が変わったらここを直す。 */
  font-size:min(
    var(--fs-hero),
    calc((100vw - var(--hero-title-pad) - var(--inner-pad) - var(--hero-title-safety)) / var(--hero-title-em))
  );
  font-weight:var(--fw-display);
  /* 和文は字面が大きいので、欧文の1.0より少し開ける */
  line-height:1.2;
  letter-spacing:var(--ls-display);
}
.m-hero__title-line{
  display:block;
  white-space:nowrap;
}
/* ★PC（768px以上）だけ、巨大英字の見出しを一回り小さくする（2026-08-20 会長ご指示）。
   ・元の式（器に収まるまで落とす min() の仕組み）はそのまま生かし、最後に 0.85 を掛けるだけ。
   ・★スマホ（767px以下）にはこの指定が当たらないので、375px の見え方は1pxも変わらない。 */
@media (min-width:768px){
  .m-hero__title{
    font-size:calc(
      min(
        var(--fs-hero),
        calc((100vw - var(--hero-title-pad) - var(--inner-pad) - var(--hero-title-safety)) / var(--hero-title-em))
      ) * .85
    );
  }
}
@media (min-width:768px){ :root{ --hero-title-pad:80px; } }
@media (min-width:1200px){ :root{ --hero-title-pad:128px; } }

/* ---- 左端：縦組みの日本語 ---- */
.m-hero__vertical{
  position:absolute;
  left:12px; top:50%;
  translate:0 -50%;
  z-index:var(--z-hero-fg);
  writing-mode:vertical-rl;
  text-orientation:mixed;
  font-size:10px;                 /* 375→10px / 1280→14px */
  font-weight:var(--fw-normal);
  line-height:1.2;
  letter-spacing:var(--ls-base);
  color:rgba(255,255,255,.75);
  /* ★1列に保つ。折り返すと段組みになって巨大英字と衝突する */
  white-space:nowrap;
}
@media (min-width:768px){
  .m-hero__vertical{ left:32px; font-size:14px; }
}

/* ---- スクロールキュー ---- */
.m-hero__scrollcue{
  position:absolute;
  left:50%; bottom:24px;
  translate:-50% 0;
  z-index:var(--z-hero-fg);
  width:1px; height:56px;
  overflow:hidden;
}
.m-hero__scrollcue-line{
  display:block; width:1px; height:100%;
  background:rgba(255,255,255,.7);
  transform-origin:top;
  animation:mScrollCue 2s var(--ease) infinite;
}
@keyframes mScrollCue{
  0%   { transform:scaleY(0); transform-origin:top; }
  45%  { transform:scaleY(1); transform-origin:top; }
  55%  { transform:scaleY(1); transform-origin:bottom; }
  100% { transform:scaleY(0); transform-origin:bottom; }
}


/* =============================================================
   6. 左端固定 SNS（PC=表示 / SP=非表示）
   アイコン30×30・縦並び gap 8px・左 32px
   ============================================================= */
.m-sidesns{ display:none; }
@media (min-width:768px){
  .m-sidesns{
    position:fixed;
    left:32px; bottom:40px;
    z-index:var(--z-side);
    display:block;
  }
  .m-sidesns__list{ display:flex; flex-direction:column; gap:var(--gap-xs); }
  .m-sidesns__link{
    display:grid; place-items:center;
    width:30px; height:30px;
    color:var(--c-white);
    transition:opacity .3s var(--ease);
  }
  .m-sidesns__link:hover{ opacity:.6; }
  .m-sidesns__link svg{ width:20px; height:20px; }
}


/* =============================================================
   7. 右端 縦書きCTAタブ 4本
   PC: position:fixed / right:0 / 幅44px / z-index50 /
             writing-mode:vertical-rl / font-size16px / 上下中央
             色 = 緑(アクセント) / #665951(茶) / #4f4f4f(灰) / #010101(黒)
   SP では画面下部の固定4分割バーに切り替える。
   ============================================================= */
.m-sidecta{
  position:fixed;
  left:var(--frame-pad); right:var(--frame-pad); bottom:var(--frame-pad);
  z-index:var(--z-side);
}
.m-sidecta__list{
  /* ★本数に自動追随。タブが2本でも4本でも等分割になる。 */
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:1fr;
}
.m-sidecta__item{ display:block; }
.m-sidecta__link{
  display:grid;
  place-items:center;
  min-height:var(--tap);
  padding:10px 4px;
  background:var(--c-black);
  color:var(--c-white);
  font-size:var(--fs-xsmall);
  font-weight:var(--fw-medium);
  line-height:var(--lh-tight);
  letter-spacing:var(--ls-base);
  text-align:center;
  transition:opacity .3s var(--ease);
}
.m-sidecta__link:hover{ opacity:.85; }
/* 色は上から 赤 → 茶 → 灰 → 黒。タブが減っても先頭から順に適用される。
   --accent が付いた1本は、位置に関わらず必ず赤（最後に宣言して勝たせる）。 */
.m-sidecta__item:nth-child(1) .m-sidecta__link{ background:var(--c-accent); }
.m-sidecta__item:nth-child(2) .m-sidecta__link{ background:var(--c-brown); }
.m-sidecta__item:nth-child(3) .m-sidecta__link{ background:var(--c-gray); }
.m-sidecta__item:nth-child(4) .m-sidecta__link{ background:var(--c-black); }
.m-sidecta__item--accent .m-sidecta__link{ background:var(--c-accent); }

/* TAB/PC: 右端の縦書きタブへ（768pxから縦レール） */
@media (min-width:768px){
  .m-sidecta{
    left:auto; right:var(--frame-pad); bottom:auto;
    top:50%;
    translate:0 -50%;
  }
  .m-sidecta__list{
    display:flex;
    flex-direction:column;
  }
  .m-sidecta__link{
    width:var(--cta-w);
    min-height:0;
    padding:18px 0;
    writing-mode:vertical-rl;
    text-orientation:mixed;
    font-size:var(--fs-body);
    font-weight:var(--fw-normal);
    line-height:var(--lh-body);
    place-items:center;
  }
}


/* =============================================================
   8. 右下 円形回転バッジ
   ============================================================= */
.m-scrollbadge{
  position:fixed;
  right:12px; bottom:calc(var(--tap) + 12px);  /* SPは下部CTAバーの上に逃がす */
  z-index:calc(var(--z-side) + 1);
  width:84px; height:84px;
  pointer-events:none;
}
@media (min-width:768px){
  .m-scrollbadge{ right:calc(var(--cta-w) + 20px); bottom:24px; width:120px; height:120px; }
}
.m-scrollbadge__ring{
  position:absolute; inset:0;
  animation:mBadgeSpin 18s linear infinite;
}
.m-scrollbadge__ring svg,
.m-scrollbadge__text{ width:100%; height:100%; display:block; }
.m-scrollbadge__text{
  fill:var(--c-white);
  font-family:var(--font-display);
  font-size:11px;
  font-weight:var(--fw-medium);
  letter-spacing:2px;
}
.m-scrollbadge__core{
  position:absolute;
  top:50%; left:50%;
  translate:-50% -50%;
  width:34%; height:34%;
  border:1px solid var(--c-white);
  border-radius:50%;
  display:grid; place-items:center;
  color:var(--c-white);
}
@keyframes mBadgeSpin{ to{ rotate:360deg; } }
/* フッター到達などで JS が .is-hidden を付けたら消える */
.m-scrollbadge.is-hidden{ opacity:0; visibility:hidden; pointer-events:none; }
.m-scrollbadge{ transition:opacity .4s var(--ease), visibility .4s var(--ease); }


/* =============================================================
   9. SVGの寸法ガード
   ★viewBoxだけのインラインSVGは height:auto だと親いっぱいに膨らむ。
     必ず器側でサイズを決める。
   ============================================================= */
svg{ display:block; width:100%; height:100%; }
.m-hero__watermark svg,
.m-message__watermark svg{ height:auto; }


/* =============================================================
   10. ヘッダー（ロゴ＋ハンバーガーのみ）
   ============================================================= */
.m-header{
  position:fixed;
  top:var(--frame-pad); left:var(--frame-pad); right:var(--frame-pad);
  z-index:var(--z-header);
  padding:14px 0;
  transition:background-color .4s var(--ease);
}

.m-header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--gap-sm);
  padding-inline:var(--inner-pad);
}
@media (min-width:768px){ .m-header__inner{ padding-inline:32px; } }

.m-header__logo{
  display:inline-flex;
  align-items:center;
  gap:10px;
  /* ★白だと地(#f0f0f0)の上で 1.14:1 になり社名が読めなかった。
     ヘッダーが乗るのはほぼ明るい地なので、インクに戻す。 */
  color:var(--c-ink);
}
/* ★ナビを開いている間だけは白に戻す。
   ナビは暗地(--c-bg-nav)で、かつ開いている間はヘッダーが
   ナビ(z450)より上(z460)に持ち上げられるため、インクのままだと
   暗地に暗字で読めなくなる。実際にそうなることを画面で確認済み。 */
html.is-nav-open .m-header__logo{ color:var(--c-white); }
html.is-nav-open .m-header__logo-sub{ color:rgba(255,255,255,.7); }
.m-header__logo-mark{
  flex:0 0 auto;
  display:block;
  width:112px; height:36px;      /* 480x160 の透過ロゴを想定した器 */
  aspect-ratio:auto;
  color:currentColor;
}
.m-header__logo-mark svg{ width:100%; height:100%; }
.m-header__logo-text{ display:block; line-height:1.1; }
.m-header__logo-en{
  display:block;
  font-family:var(--font-display);
  font-size:20px;
  font-weight:var(--fw-bold);
  letter-spacing:.06em;
}
.m-header__logo-sub{
  display:block;
  margin-top:2px;
  font-size:9px;
  font-weight:var(--fw-normal);
  letter-spacing:.14em;
  color:var(--c-ink-sub);   /* 旧 rgba(255,255,255,.7)＝明るい地で読めなかった */
}

/* ハンバーガー */
.m-header__burger{
  position:relative;
  flex:0 0 auto;
  width:var(--tap); height:var(--tap);
  z-index:var(--z-burger);
}
@media (min-width:768px){ .m-header__burger{ width:56px; height:56px; } }
.m-header__burger-bar{
  position:absolute;
  left:50%; translate:-50% 0;
  width:26px; height:1.5px;
  /* ★社名と同じ理由。閉じている間は明るい地の上なのでインク。 */
  background:var(--c-ink);
  transition:transform .4s var(--ease), opacity .3s var(--ease);
}
/* ナビを開くとバーだけがナビ(暗地)の上に残る（z-index 500）。ここは白に戻す。 */
.m-header__burger[aria-expanded="true"] .m-header__burger-bar{
  background:var(--c-white);
}
.m-header__burger-bar:nth-child(1){ top:calc(50% - 7px); }
.m-header__burger-bar:nth-child(2){ top:50%; }
.m-header__burger-bar:nth-child(3){ top:calc(50% + 7px); }
.m-header__burger[aria-expanded="true"] .m-header__burger-bar:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.m-header__burger[aria-expanded="true"] .m-header__burger-bar:nth-child(2){ opacity:0; }
.m-header__burger[aria-expanded="true"] .m-header__burger-bar:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }


/* =============================================================
   11. フルスクリーンナビ（地色 --c-bg-nav）
   ============================================================= */
.m-gnav{
  position:fixed; inset:var(--frame-pad);
  z-index:var(--z-nav);
  border-radius:var(--frame-radius);
  background:var(--c-bg-nav);
  color:var(--c-white);
  overflow-y:auto;
  opacity:0;
  visibility:hidden;
  transition:opacity .45s var(--ease), visibility .45s var(--ease);
}
.m-gnav[hidden]{ display:none; }
.m-gnav.is-open{ opacity:1; visibility:visible; }
html.is-nav-open{ overflow:hidden; }

.m-gnav__inner{
  min-height:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:var(--gap-lg);
  padding:96px var(--inner-pad) 48px;
}
@media (min-width:768px){ .m-gnav__inner{ padding-inline:64px; } }

.m-gnav__list{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4px var(--gap-md);
}
@media (min-width:992px){ .m-gnav__list{ grid-template-columns:repeat(3,1fr); gap:8px var(--gap-xl); } }

.m-gnav__link{
  display:flex;
  align-items:baseline;
  gap:10px;
  min-height:var(--tap);
  padding:8px 0;
  color:var(--c-white);
  border-bottom:1px solid rgba(255,255,255,.14);
  transition:opacity .3s var(--ease);
}
.m-gnav__link:hover{ opacity:.6; }
.m-gnav__en{
  font-family:var(--font-display);
  font-size:clamp(18px, 4.4vw, 26px);
  font-weight:var(--fw-display);
  line-height:var(--lh-tight);
  letter-spacing:.02em;
}
.m-gnav__ja{
  font-size:var(--fs-xsmall);
  font-weight:var(--fw-normal);
  color:rgba(255,255,255,.62);
}
.m-gnav__foot{ margin-top:auto; }
.m-gnav__sns{ display:flex; gap:var(--gap-sm); }
.m-gnav__sns a{ display:grid; place-items:center; width:var(--tap); height:var(--tap); color:var(--c-white); }
.m-gnav__sns svg{ width:20px; height:20px; }


/* =============================================================
   12. S02 ブランドメッセージ
   リード = fw900 / lh1.8 / 大小2段
   ============================================================= */
.m-message{ background:var(--c-bg); }
.m-message__watermark{
  position:absolute;
  top:8%; right:-8%;
  width:min(60vw, 520px);
  /* ★高さは aspect-ratio で確保する。これが無いと中身が絶対配置のため
     高さ0pxに潰れ、どんな画像を入れても表示されない。 */
  aspect-ratio:1/1;
  /* ★.m-ph の既定（暗い塗り）を打ち消す。透かしは地に溶かすので箱を出さない。 */
  background-color:transparent;
  color:rgba(255,255,255,.55);
  /* ★透かしの濃さ。素のままだと地との差が1.47:1あり、社名まで読めて
     「透かし」でなく主張になる。地との差を約1.14:1まで落として紋様にする。
     ★ロゴの色そのものは変えない（商標のため）。濃さは不透明度だけで調整する。 */
  opacity:.35;
  pointer-events:none;
  z-index:0;
}
.m-message__watermark::before{ display:none; }
.m-message__watermark .m-ph__label{ display:none; }
/* ロゴは切り取らず全体を見せる。IMAGE-MAP側が写真用に background-size:cover を
   .m-ph[data-img-no] で当てるため、詳細度で上回る書き方にしている。
   （IMAGE-MAPブロックは自動生成なので、こちら側で受ける） */
.m-ph.m-ph--logo.m-message__watermark{ background-size:contain; }
.m-message .m-inner,
.m-message__visual{ position:relative; z-index:1; }

.m-message__lead{
  font-size:var(--fs-lead-lg);
  font-weight:var(--fw-black);
  line-height:var(--lh-lead);
  letter-spacing:var(--ls-base);
  color:var(--c-ink-body);
}
.m-message__body{
  margin-top:1.2em;
  font-size:var(--fs-lead);
  font-weight:var(--fw-black);
  line-height:var(--lh-lead);
  color:var(--c-ink-body);
}
.m-message__visual{
  margin-top:var(--gap-lg);
  padding-inline:var(--inner-pad);
}
.m-message__visual .m-ph{ aspect-ratio:16/10; }
@media (min-width:768px){
  .m-message__visual{ padding-inline:0; margin-top:var(--gap-lg); }
  .m-message__visual .m-ph{ aspect-ratio:21/9; }
}
/* ヒーロー型見出し（英字のみ・アウトライン） */
.m-heading--hero .m-heading__en{ color:var(--c-white); }


/* =============================================================
   13. カード共通の見た目（イベント／実績／ブログ 等）
   カード見出し fw500 / lh1.2 / #272727、角丸なし
   ============================================================= */
.m-event__list,
.m-feature__list,
.m-modelhouse__list,
.m-blog__list,
.m-pillars__list,
.m-related__list{
  display:grid;
  gap:var(--gap-md);
}
.m-event__list    { grid-template-columns:repeat(2,1fr); }
.m-feature__list  { grid-template-columns:repeat(2,1fr); }
.m-modelhouse__list{ grid-template-columns:repeat(2,1fr); }
.m-blog__list     { grid-template-columns:repeat(2,1fr); }
.m-pillars__list  { grid-template-columns:repeat(2,1fr); }
.m-related__list  { grid-template-columns:repeat(2,1fr); }

@media (min-width:768px){
  .m-event__list     { grid-template-columns:repeat(3,1fr); }
  .m-feature__list   { grid-template-columns:repeat(3,1fr); }
  .m-modelhouse__list{ grid-template-columns:repeat(3,1fr); }
  .m-blog__list      { grid-template-columns:repeat(3,1fr); }
  .m-pillars__list   { grid-template-columns:repeat(4,1fr); }
  .m-related__list   { grid-template-columns:repeat(3,1fr); }
}

.m-event__card,
.m-feature__card,
.m-modelhouse__card,
.m-blog__card,
.m-works__card{
  position:relative;
  display:block;
  color:var(--c-ink);
  transition:opacity .35s var(--ease);
}
.m-event__card:hover,
.m-feature__card:hover,
.m-modelhouse__card:hover,
.m-blog__card:hover,
.m-works__card:hover{ opacity:.72; }

/* サムネ比率 */
.m-event__badge   { display:block; aspect-ratio:4/3; }
.m-modelhouse__thumb,
.m-works__thumb   { aspect-ratio:4/3; }
.m-blog__thumb,
.m-guide__thumb   { aspect-ratio:16/9; }
/* 縦長サムネ。SPでは 4/3 に寝かせて間延びを防ぐ（768px以上で本来の3/4に戻す） */
.m-pillars__thumb,
.m-staff__thumb,
.m-voice__thumb,
.m-plans__thumb   { aspect-ratio:4/3; }
@media (min-width:992px){
  .m-pillars__thumb,
  .m-staff__thumb,
  .m-voice__thumb,
  .m-plans__thumb { aspect-ratio:3/4; }
}
/* 人物のポートレートだけは、どの画面幅でも縦長のまま。
   横長の枠に入れると頭が切れるため、寝かせる対象から外している */
.m-company__portrait{ aspect-ratio:3/4; }

/* 受付終了のサムネはトーンを落とす */
.m-event__badge--end{ filter:grayscale(1); opacity:.55; }

/* カード内テキスト */
.m-event__tag,
.m-works__tag,
.m-feature__tag,
.m-news__cat,
.m-blog__cat{
  display:inline-block;
  margin-top:12px;
  padding:3px 10px;
  background:var(--c-ink-strong);
  color:var(--c-white);
  font-size:11px;
  font-weight:var(--fw-medium);
  line-height:1.6;
  letter-spacing:var(--ls-base);
}
.m-event__meta,
.m-blog__meta,
.m-modelhouse__place{
  display:block;
  margin-top:10px;
  font-size:var(--fs-xsmall);
  font-weight:var(--fw-normal);
  line-height:var(--lh-body);
  color:var(--c-ink-sub);
}
.m-event__date{ margin-right:.6em; }
.m-event__place{ color:var(--c-ink-mute); }

.m-event__title,
.m-works__title,
.m-feature__title,
.m-modelhouse__name,
.m-blog__title,
.m-guide__title,
.m-pillars__title,
.m-plans__title,
.m-voice__title{
  display:block;
  margin-top:8px;
  font-size:var(--fs-card-title);
  font-weight:var(--fw-medium);
  line-height:var(--lh-tight);
  letter-spacing:var(--ls-base);
  color:var(--c-ink);
}
.m-section--dark .m-plans__title{ color:var(--c-white); }


/* =============================================================
   14. S04 カタログ / S07 会員 — 背景写真の上にコピー（帯）
   ============================================================= */
.m-catalog,
.m-members{
  position:relative;
  padding-block:0;
  min-height:280px;
  display:grid;
  align-items:center;
  background:var(--c-bg-dark);
  overflow:hidden;
}
.m-catalog__bg,
.m-members__bg{
  position:absolute; inset:0;
  z-index:0;
  aspect-ratio:auto;
  opacity:.5;
}
.m-catalog__body,
.m-members__body{
  position:relative;
  z-index:1;
  width:100%;
  max-width:var(--inner-max);
  margin-inline:auto;
  padding:var(--sec-pad) var(--inner-pad);
  text-align:center;
  color:var(--c-white);
}
.m-catalog__copy,
.m-members__copy{
  font-size:var(--fs-lead);
  font-weight:var(--fw-black);
  line-height:var(--lh-lead);
  color:var(--c-white);
}
.m-catalog .m-btn-wrap,
.m-members .m-btn-wrap{ display:flex; justify-content:center; }


/* =============================================================
   15. S05 SELECT PLANS（ダーク）
   ============================================================= */
.m-plans__lead{
  max-width:52em;
  font-size:var(--fs-xsmall);
  font-weight:var(--fw-normal);
  line-height:var(--lh-lead);
  color:rgba(255,255,255,.78);
}
@media (min-width:768px){ .m-plans__lead{ font-size:var(--fs-body); } }

.m-plans__list{
  margin-top:var(--gap-lg);
  display:grid;
  gap:var(--gap-md);
  grid-template-columns:repeat(2,1fr);
}
@media (min-width:768px){ .m-plans__list{ grid-template-columns:1fr 1fr; gap:var(--gap-lg); } }

.m-plans__item{ position:relative; }
.m-plans__body{ padding-top:16px; color:var(--c-white); }
.m-plans__sub{
  margin-top:8px;
  font-size:var(--fs-xsmall);
  font-weight:var(--fw-normal);
  line-height:var(--lh-lead);
  color:rgba(255,255,255,.72);
}
.m-plans__body .m-btn{ margin-top:14px; }


/* =============================================================
   16. スライダー（Swiper）共通
   カード間 gap 20px
   ============================================================= */
.swiper{ width:100%; overflow:hidden; }
.m-works__slider,
.m-staff__slider,
.m-voice__slider{
  margin-top:var(--gap-lg);
  padding-inline:var(--inner-pad);
}
@media (min-width:1200px){
  .m-works__slider,
  .m-staff__slider,
  .m-voice__slider{
    padding-inline:max(var(--inner-pad), calc((100vw - var(--inner-max)) / 2));
  }
}
.swiper-slide{ height:auto; }

.swiper-pagination{
  position:static;
  margin-top:24px;
  display:flex;
  justify-content:center;
  gap:var(--gap-xs);
}
.swiper-pagination-bullet{
  width:8px; height:8px;
  background:var(--c-line);
  border-radius:50%;
  opacity:1;
  transition:background-color .3s var(--ease);
}
.swiper-pagination-bullet-active{ background:var(--c-ink-strong); }

.swiper-button-prev,
.swiper-button-next{
  position:static;
  width:var(--tap); height:var(--tap);
  margin:0;
  color:var(--c-ink);
  border:1px solid currentColor;
  border-radius:50%;
  display:grid; place-items:center;
}
.swiper-button-prev::after,
.swiper-button-next::after{ font-size:13px; }

/* スライダー横のナビ行 */
.m-slidernav{
  margin-top:24px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:var(--gap-sm);
}
.m-slidernav--top{ margin-top:0; }
.m-slidernav__all{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:var(--tap);
  font-size:var(--fs-body);
  color:var(--c-ink);
}
.m-slidernav__all--accent{ color:var(--c-accent); }
.m-slidernav__btn{
  width:var(--tap); height:var(--tap);
  border:1px solid currentColor;
  border-radius:50%;
  display:grid; place-items:center;
  color:var(--c-ink);
}


/* =============================================================
   17. S08 VOICE
   ============================================================= */
.m-voice__card{
  background:var(--c-bg-white);
  padding:24px 20px;
  height:100%;
}
.m-voice__quote{
  display:block;
  font-family:var(--font-display);
  font-size:40px;
  font-weight:var(--fw-display);
  line-height:1;
  color:var(--c-line);
}
.m-voice__thumb{ margin-top:14px; }
.m-voice__body{
  margin-top:14px;
  font-size:var(--fs-xsmall);
  font-weight:var(--fw-normal);
  line-height:var(--lh-lead);
  color:var(--c-ink-body);
}
.m-voice__name{
  margin-top:12px;
  font-size:11px;
  color:var(--c-ink-mute);
}
.m-voice__prev,
.m-voice__next{
  width:var(--tap); height:var(--tap);
  border:1px solid var(--c-ink);
  border-radius:50%;
  display:grid; place-items:center;
  color:var(--c-ink);
}


/* =============================================================
   18. S09 特集 — 写真の上に文字を重ねるカード
   ============================================================= */
.m-feature__card{
  position:relative;
  display:grid;
  align-content:end;
  min-height:170px;
  padding:14px;
  overflow:hidden;
  color:var(--c-white);
  isolation:isolate;
}
.m-feature__bg{
  position:absolute; inset:0;
  z-index:-2;
  aspect-ratio:auto;
}
.m-feature__card::after{
  content:"";
  position:absolute; inset:0;
  z-index:-1;
  background:linear-gradient(180deg, rgba(1,1,1,.05) 0%, rgba(1,1,1,.62) 100%);
}
.m-feature__en{
  display:block;
  font-family:var(--font-display);
  font-size:clamp(28px, 6vw, 44px);
  font-weight:var(--fw-display);
  line-height:var(--lh-display);
  color:var(--c-white);
}
.m-feature__tags{ display:flex; flex-wrap:wrap; gap:var(--gap-xs); margin-top:10px; }
.m-feature__tag{ margin-top:0; background:rgba(255,255,255,.9); color:var(--c-ink-strong); }
.m-feature__card .m-feature__title{ color:var(--c-white); }


/* =============================================================
   19. S10 4つの柱
   ============================================================= */
.m-pillars__item{ position:relative; }
.m-pillars__no{
  display:block;
  font-family:var(--font-display);
  font-size:clamp(30px, 7vw, 56px);
  font-weight:var(--fw-display);
  line-height:1;
  color:var(--c-line);
  margin-bottom:10px;
}
.m-pillars__body{
  margin-top:10px;
  font-size:var(--fs-xsmall);
  font-weight:var(--fw-normal);
  line-height:var(--lh-lead);
  color:var(--c-ink-body);
}


/* =============================================================
   20. S11 GUIDE（ステップ）
   ============================================================= */
.m-guide__lead{
  max-width:44em;
  font-size:var(--fs-lead);
  font-weight:var(--fw-black);
  line-height:var(--lh-lead);
  color:var(--c-ink-body);
}
.m-guide__steps{
  margin-top:var(--gap-lg);
  display:grid;
  gap:var(--gap-md);
  grid-template-columns:repeat(2,1fr);
}
@media (min-width:768px){ .m-guide__steps{ grid-template-columns:repeat(3,1fr); gap:var(--gap-md); } }
.m-guide__step{ position:relative; }
.m-guide__step-no{
  display:block;
  font-family:var(--font-display);
  font-size:clamp(24px, 5vw, 40px);
  font-weight:var(--fw-display);
  line-height:1;
  color:var(--c-accent);
  margin-bottom:10px;
}
.m-guide__body{
  margin-top:10px;
  font-size:var(--fs-xsmall);
  line-height:var(--lh-lead);
  color:var(--c-ink-body);
}


/* =============================================================
   21. S13 COMPANY（ダーク・背景写真）
   ============================================================= */
.m-company{
  position:relative;
  background:var(--c-bg-dark);
  color:var(--c-white);
  overflow:hidden;
}
/* ★会社案内は背景写真なしの方針。
   枠はHTML側に残るので、こちらで出さない。暗地＋白文字だけで成立する。
   ★将来また背景写真を使うことになったら、この display:none を外す。 */
.m-company__bg{
  display:none;
  position:absolute; inset:0;
  z-index:0;
  aspect-ratio:auto;
  opacity:.28;
}
.m-company .m-inner{ position:relative; z-index:1; }
.m-company__body{
  margin-top:var(--gap-lg);
  display:grid;
  gap:var(--gap-lg);
}
@media (min-width:768px){
  .m-company__body{ grid-template-columns:minmax(0,320px) minmax(0,1fr); gap:var(--gap-xl); align-items:start; }
}
.m-company__copy{
  font-size:var(--fs-lead);
  font-weight:var(--fw-black);
  line-height:var(--lh-lead);
  color:var(--c-white);
}
.m-company__table{ margin-top:var(--gap-md); }
.m-company__row{
  display:grid;
  grid-template-columns:6.5em 1fr;
  gap:var(--gap-sm);
  padding:12px 0;
  border-bottom:1px solid rgba(255,255,255,.16);
  font-size:var(--fs-xsmall);
  line-height:var(--lh-body);
}
.m-company__row dt{ color:rgba(255,255,255,.6); }
.m-company__row dd{ margin:0; color:var(--c-white); }
@media (min-width:768px){ .m-company__row{ font-size:var(--fs-small); } }


/* =============================================================
   22. S14 STAFF
   ============================================================= */
.m-staff__role{
  margin-top:12px;
  font-size:11px;
  color:var(--c-ink-mute);
}
.m-staff__name{
  margin-top:4px;
  font-size:var(--fs-card-title);
  font-weight:var(--fw-medium);
  line-height:var(--lh-tight);
  color:var(--c-ink);
}


/* =============================================================
   23. S16 NEWS（テキストリスト）
   ============================================================= */
.m-news__list{ margin-top:var(--gap-md); border-top:1px solid var(--c-line); }
.m-news__item{ border-bottom:1px solid var(--c-line); }
.m-news__link{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:var(--gap-sm);
  min-height:var(--tap);
  padding:16px 0;
  color:var(--c-ink);
  transition:opacity .3s var(--ease);
}
.m-news__link:hover{ opacity:.6; }
.m-news__cat{ margin-top:0; }
.m-news__title{
  font-size:var(--fs-xsmall);
  font-weight:var(--fw-normal);
  line-height:var(--lh-body);
}
@media (min-width:768px){ .m-news__title{ font-size:var(--fs-body); } }


/* =============================================================
   24. S17 関連事業
   ============================================================= */
.m-related__list{ margin-top:var(--gap-lg); }
.m-related__card{
  position:relative;
  display:grid;
  align-content:end;
  min-height:190px;
  padding:16px 14px;
  overflow:hidden;
  color:var(--c-white);
  isolation:isolate;
}
.m-related__bg{ position:absolute; inset:0; z-index:-2; aspect-ratio:auto; }
.m-related__card::after{
  content:"";
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(1,1,1,.1) 0%, rgba(1,1,1,.68) 100%);
}
.m-related__en{
  display:block;
  font-family:var(--font-display);
  font-size:clamp(24px, 5.4vw, 38px);
  font-weight:var(--fw-display);
  line-height:var(--lh-display);
}
.m-related__copy{
  display:block;
  margin-top:8px;
  font-size:var(--fs-xsmall);
  line-height:var(--lh-lead);
  color:rgba(255,255,255,.86);
}
.m-related__btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top:14px;
  color:var(--c-white);
}


/* =============================================================
   25. CONTACT / フッター
   ============================================================= */
.m-contact{
  position:relative;
  padding-block:var(--sec-pad-lg);
  background:var(--c-bg-dark);
  color:var(--c-white);
  overflow:hidden;
}
.m-contact__bg{ position:absolute; inset:0; z-index:0; aspect-ratio:auto; opacity:.35; }
.m-contact .m-inner{ position:relative; z-index:1; }

.m-contact__list{
  margin-top:var(--gap-lg);
  display:grid;
  gap:1px;
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.18);
}
/* ★本数が増減しても空セルが出ない形にする。
   3本固定だったため、2本に減らしたときに3列目が空セル（1280で373px）
   として残っていた。auto-fit なら本数ぶんだけ列ができる。
   minmax(0,1fr) は中身が長いときに列が膨らむのを防ぐため。 */
@media (min-width:768px){
  .m-contact__list{
    grid-auto-flow:column;
    grid-auto-columns:minmax(0,1fr);
  }
}
.m-contact__link{
  display:flex;
  align-items:center;
  gap:14px;
  min-height:72px;
  padding:16px 20px;
  background:var(--c-bg-dark);
  color:var(--c-white);
  transition:background-color .3s var(--ease);
}
.m-contact__link:hover{ background:var(--c-bg-dark-deep); }
.m-contact__icon{ flex:0 0 24px; width:24px; height:24px; }
.m-contact__label{
  flex:1 1 auto;
  font-size:var(--fs-body);
  font-weight:var(--fw-medium);
  letter-spacing:var(--ls-base);
}
.m-contact__arrow{ flex:0 0 20px; width:20px; height:20px; opacity:.7; }
/* 先頭の1本だけアクセント色 */
.m-contact__item:first-child .m-contact__link{ background:var(--c-accent); }
.m-contact__item:first-child .m-contact__link:hover{ background:var(--c-accent-deep); }

.m-footer{ background:var(--c-bg); color:var(--c-ink-body); }
.m-footer__main{ padding-block:var(--sec-pad) 32px; }
.m-footer__main .m-inner{
  display:grid;
  gap:var(--gap-lg);
}
@media (min-width:992px){
  .m-footer__main .m-inner{ grid-template-columns:minmax(0,1fr) minmax(0,320px); gap:var(--gap-xl); }
}
.m-footer__list{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2px var(--gap-md);
}
@media (min-width:768px){ .m-footer__list{ grid-template-columns:repeat(3,1fr); gap:2px var(--gap-lg); } }
.m-footer__list a{
  display:block;
  min-height:var(--tap);
  padding:11px 0;
  color:var(--c-ink);
  font-size:var(--fs-xsmall);
  line-height:var(--lh-body);
  transition:opacity .3s var(--ease);
}
.m-footer__list a:hover{ opacity:.6; }

.m-footer__logo{ display:block; width:56px; height:34px; color:var(--c-ink); }
.m-footer__name{
  margin-top:12px;
  font-size:var(--fs-body);
  font-weight:var(--fw-medium);
  letter-spacing:var(--ls-base);
}
.m-footer__addr{
  margin-top:6px;
  font-size:var(--fs-xsmall);
  line-height:var(--lh-body);
  color:var(--c-ink-sub);
}
.m-footer__sns{ display:flex; gap:var(--gap-xs); margin-top:var(--gap-sm); }
.m-footer__sns a{ display:grid; place-items:center; width:var(--tap); height:var(--tap); color:var(--c-ink); }
.m-footer__sns svg{ width:20px; height:20px; }
.m-footer__copy{
  margin-top:var(--gap-lg);
  padding-top:20px;
  border-top:1px solid var(--c-line);
  font-size:11px;
  color:var(--c-ink-sub);
  text-align:center;
}
/* SP は下部固定CTAバーがあるので、フッター末尾に逃げ場を作る */
@media (max-width:767.98px){
  .m-footer{ padding-bottom:calc(var(--tap) + 12px); }
}


/* =============================================================
   26. スクロールリビール（初期状態と到達状態）
   状態クラス .is-visible は JS が付ける。CSS はそれを見た目に翻訳するだけ。
   ============================================================= */
[data-reveal]{
  opacity:0;
  filter:blur(var(--reveal-blur));
  transition:
    opacity   var(--reveal-dur-opacity)   var(--reveal-ease-opacity),
    filter    var(--reveal-dur-opacity)   var(--reveal-ease-opacity),
    transform var(--reveal-dur-transform) var(--reveal-ease-transform),
    clip-path var(--reveal-dur-transform) var(--reveal-ease-transform);
  will-change:opacity, transform, filter;
}
[data-reveal="fade-up"]   { transform:translateY(28px); }
[data-reveal="fade-down"] { transform:translateY(-28px); }
[data-reveal="fade-left"] { transform:translateX(28px); }
[data-reveal="fade-right"]{ transform:translateX(-28px); }
[data-reveal="zoom"]      { transform:scale(.94); }
[data-reveal="clip-up"]   { clip-path:inset(100% 0 0 0); opacity:1; }
[data-reveal="line"]      { transform:translateY(1.1em); }

[data-reveal].is-visible{
  opacity:1;
  filter:blur(0);
  transform:none;
  clip-path:inset(0 0 0 0);
}

[data-reveal-delay="100"]{ transition-delay:.10s; }
[data-reveal-delay="200"]{ transition-delay:.20s; }
[data-reveal-delay="300"]{ transition-delay:.30s; }

@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity:1; filter:none; transform:none; clip-path:none; }
  .m-hero__scrollcue-line,
  .m-scrollbadge__ring{ animation:none; }
}


/* =============================================================
   27. ユーティリティ
   ============================================================= */
.u-center{ text-align:center; }
.u-hide-sp{ display:none; }
@media (min-width:768px){ .u-hide-sp{ display:block; } }
.u-hide-pc{ display:block; }
@media (min-width:768px){ .u-hide-pc{ display:none; } }


/* =============================================================
   28. S09 特集 — 横マーキー第2種（傾きなし）
   40s linear infinite / 画像高さ 180px（≥bp 240px）
                 8枚 + 複製8枚 = 16枚
   ============================================================= */
.m-feature__lead{
  max-width:44em;
  margin-top:16px;
  font-size:var(--fs-lead);
  font-weight:var(--fw-black);
  line-height:var(--lh-lead);
  color:var(--c-ink-body);
}
.m-feature__marquee{
  position:relative;
  margin-top:var(--gap-lg);
  width:100%;
  overflow:hidden;
}
.m-feature__track{
  display:flex;
  align-items:center;
  gap:var(--gap-md);
  width:max-content;
  animation:mMarquee var(--marquee-dur) linear infinite;
}
.m-feature__panel{
  flex:0 0 auto;
  height:var(--feature-panel-h-sp);
  width:auto;
  aspect-ratio:4/3;
}
@media (min-width:768px){
  .m-feature__panel{ height:var(--feature-panel-h-pc); }
}
.m-feature__panel .m-ph__label{ font-size:10px; }

/* マーキーは装飾。動きを減らす設定では止める */
@media (prefers-reduced-motion: reduce){
  .m-hero__track,
  .m-feature__track{ animation:none; }
}

/* ★マーキーは .m-inner の外に出して全幅で流す（HTML上は .m-inner 内にある） */
.m-feature .m-inner{ max-width:none; }
@media (min-width:768px){
  .m-feature .m-inner{ padding-inline:0; }
  .m-feature .m-heading,
  .m-feature .m-feature__lead,
  .m-feature .m-btn-wrap{
    width:100%;
    max-width:var(--inner-max);
    margin-inline:auto;
    padding-inline:var(--inner-pad);
  }
}




/* =============================================================
   30. S18 ROOMTOUR（動画サムネのカードリスト）
   ============================================================= */
.m-roomtour__lead{
  max-width:44em;
  margin-top:16px;
  font-size:var(--fs-lead);
  font-weight:var(--fw-black);
  line-height:var(--lh-lead);
  color:var(--c-ink-body);
}
.m-roomtour__list{
  margin-top:var(--gap-lg);
  display:grid;
  gap:var(--gap-md);
  grid-template-columns:repeat(2,1fr);
}
@media (min-width:768px){ .m-roomtour__list{ grid-template-columns:repeat(3,1fr); } }
.m-roomtour__card{
  display:block;
  color:var(--c-ink);
  transition:opacity .35s var(--ease);
}
.m-roomtour__card:hover{ opacity:.72; }
.m-roomtour__thumb{ position:relative; }
/* 再生ボタン */
.m-roomtour__play{
  position:absolute;
  top:50%; left:50%;
  translate:-50% -50%;
  z-index:3;
  width:52px; height:52px;
  display:grid; place-items:center;
  border:1px solid var(--c-white);
  border-radius:50%;
  background:rgba(1,1,1,.35);
  color:var(--c-white);
}
.m-roomtour__play::before{
  content:"";
  width:0; height:0;
  margin-left:3px;
  border-left:12px solid currentColor;
  border-top:8px solid transparent;
  border-bottom:8px solid transparent;
}
.m-roomtour__title{
  display:block;
  margin-top:12px;
  font-size:var(--fs-card-title);
  font-weight:var(--fw-medium);
  line-height:var(--lh-tight);
  color:var(--c-ink);
}
.m-roomtour__body{
  display:block;
  margin-top:8px;
  font-size:var(--fs-xsmall);
  font-weight:var(--fw-normal);
  line-height:var(--lh-lead);
  color:var(--c-ink-sub);
}


/* =============================================================
   31. 細部（見出しセンター / 柱の罫線装飾 / SNSアイコン器 / 複製パネル）
   ============================================================= */
.m-heading--center{ text-align:center; }
.m-heading--center .m-heading__en{ white-space:normal; }

/* 複製パネルは実体と完全に同じ見た目（マーキーの継ぎ目を作らない） */
.m-hero__panel--clone,
.m-feature__panel--clone{ /* 実体と同一。個別指定はしない */ }

/* SNSアイコンの器（SVGは器いっぱいに描画される） */
.m-sidesns__icon,
.m-footer__sns-icon{
  display:block;
  width:20px; height:20px;
}
.m-sidesns__link{ color:var(--c-white); }

/* 4つの柱の罫線装飾 */
.m-pillars__guide-wrap{ position:relative; }
.m-pillars__lineart{
  position:absolute; inset:0;
  z-index:0;
  color:var(--c-line);
  pointer-events:none;
}
.m-pillars__line{
  stroke:currentColor;
  stroke-width:1;
  fill:none;
}
.m-pillars__list{ position:relative; z-index:1; }

/* ニュースの日付 */
.m-news__date{
  font-size:var(--fs-xsmall);
  font-weight:var(--fw-normal);
  color:var(--c-ink-sub);
  white-space:nowrap;
}

/* イベントのサムネ（badge から thumb にリネームされた場合の両対応） */
.m-event__thumb{ display:block; aspect-ratio:4/3; }

/* フッターの2カラム */
.m-footer__nav{ min-width:0; }
.m-footer__brand{ min-width:0; }


/* =============================================================
   32. セクション巨大英字の色をセクションごとに使い分ける

   全部を同じ白にすると、明るい地では文字が完全に消えてしまい、
   ページ全体が単調になる。地に溶かす「透かし」と、
   はっきり読ませる「見出し」を交互に置いてリズムを作る。
   ============================================================= */

/* 既定は明るい地に溶かす透かし */
.m-section:not(.m-section--dark) .m-heading__en{ color:var(--c-en-ghost); }

/* 白地のセクション。地を白にしたうえで、白より一段沈めた色で透かす
   （地と同色だと完全に消えてしまうため、地と文字は必ずずらす） */
#s06-works{ background:var(--c-bg-white); }
#s06-works .m-heading__en{ color:var(--c-en-soft); }

/* ★このセクションだけ透かしをやめて読ませる。アクセントの緑を当てて、
   ページで最初に出会う見出しがブランドの緑を提示する役目も持たせる。
   ★他のセクションの透かし見出しは変更しない。 */
#s02-message .m-heading__en{ color:var(--c-accent); }

/* ★はっきり読ませるセクション（ページのリズムの起点） */
#s10-pillars   .m-heading__en,
#s11-guide     .m-heading__en,
#s18-roomtour  .m-heading__en{ color:var(--c-en-mid); }

#s12-modelhouse .m-heading__en{ color:var(--c-en-strong); }

/* 暗転セクション・写真の上は白で読ませる */
.m-section--dark .m-heading__en,
.m-heading--onDark .m-heading__en,
.m-contact .m-heading__en{ color:var(--c-white); }

/* 和文の小見出しは全セクションで読ませる */
.m-heading__ja{ color:var(--c-ink-strong); }
.m-section--dark .m-heading__ja,
.m-heading--onDark .m-heading__ja,
.m-contact .m-heading__ja{ color:var(--c-white); }


/* =============================================================
   33. 下層ページ共通（.m-lower ＝ 固定ページ / .m-detail ＝ 投稿詳細）

   トップは1画面に1テーマの見せ方なので上下の余白を大きく取っているが、
   下層は1セクションあたりの中身が少ない。同じ式を当てると、
   見出しの下に画面1枚ぶん近い空きが出て「作りかけ」に見える。
   そこで下層だけ余白の式を差し替える。カスタムプロパティを
   ラッパー（<main>）で上書きするので、トップ側の値には一切触れない。

   下層のセクション上下padding: 375→40.4 / 768→50.5 / 1280→63.6 / 1920→80
   （トップは 60.6 / 75.9 / 95.8 / 120。おおむね2/3に詰めている）
   ============================================================= */
.m-lower,
.m-detail{
  --sec-pad: calc(30.77px + 2.564vw);
  --sec-pad-lg: calc(var(--sec-pad) * 1.35);
  --gap-lg: 32px;
  --gap-xl: 48px;
}

/* -------- 下層の見出しは「読ませる」 --------
   トップでは巨大英字を地に溶かす透かしとして使うが、それは前後に
   写真や暗転セクションが続いてリズムが生まれる場合の話。
   下層は白地が続くため、透かしのままだと見出しが消えてしまい、
   ただの空白に見える。下層では全部を読める濃さに揃える。
   ★トップの透かし見出しはこの規則の外なので変わらない。 */
.m-lower  .m-section:not(.m-section--dark):not(.m-contact):not(.m-pagehead) .m-heading__en,
.m-detail .m-section:not(.m-section--dark):not(.m-contact):not(.m-pagehead) .m-heading__en{
  color:var(--c-en-mid);          /* #40463a / 地#f0f0f0 で 8.55:1 */
}

/* -------- ページ見出し帯 .m-pagehead -------- */
/* ヘッダーは position:fixed なので、その高さ（ロゴ36 + 上下14 ≒ 64px）を
   セクションの余白に足しておかないとロゴと見出しが重なる。 */
.m-pagehead{
  padding-block:calc(var(--sec-pad) + 56px) var(--sec-pad);
}
@media (min-width:992px){
  .m-pagehead{ padding-block:calc(var(--sec-pad) + 64px) var(--sec-pad); }
}

/* パンくず＋詳細ページのパンくず（同じ見た目にする） */
.m-pagehead__crumbs,
.m-detail__crumbs{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:0 .5em;
  font-size:var(--fs-xsmall);
  line-height:var(--lh-body);
  color:var(--c-ink-sub);
}
.m-pagehead__crumbs a,
.m-detail__crumbs a{
  color:var(--c-ink-sub);
  text-decoration:none;
  transition:opacity .3s var(--ease);
}
.m-pagehead__crumbs a:hover,
.m-detail__crumbs a:hover{ text-decoration:underline; }
.m-pagehead__crumbs [aria-hidden="true"],
.m-detail__crumbs [aria-hidden="true"]{ color:var(--c-ink-mute); }
.m-pagehead__crumbs [aria-current="page"],
.m-detail__crumbs [aria-current="page"]{ color:var(--c-ink-body); }

/* h1。巨大英字はアクセントの緑で読ませる（トップの2番目のセクションと同じ扱い） */
.m-pagehead__title{
  margin-top:14px;
  margin-bottom:0;
}
.m-section.m-pagehead .m-heading__en{
  color:var(--c-accent);          /* #4d5c3d / 地#f0f0f0 で 6.32:1 */
  /* 器の幅を超えたぶんは .m-section の overflow:hidden が閉じるが、
     読ませる色になった以上は切れて見えるのは避けたい。
     長い英単語でも1行に収まる上限を掛けておく。 */
  font-size:min(calc(var(--fs-sec-en) * 1.15), 12.5vw);
}
.m-section.m-pagehead .m-heading__ja{ color:var(--c-ink-strong); }


/* =============================================================
   34. .m-form  お問い合わせフォーム

   ★入力欄の font-size は 16px を下回らせない。
     16px未満だと iOS Safari がフォーカス時に画面を拡大し、
     以後ユーザーが手で戻すまで横スクロールが残る。
   ★フォーカスリングは消さない（規約§8）。枠線の色替えは「追加」であって
     :focus-visible の outline の代わりではない。
   ============================================================= */
.m-form{ margin-top:var(--gap-lg); }

.m-form__row{
  display:grid;
  gap:8px;
  padding-block:14px;
  border-bottom:1px solid var(--c-line);
}
@media (min-width:768px){
  .m-form__row{
    grid-template-columns:200px minmax(0,1fr);
    gap:var(--gap-md);
    align-items:start;
    padding-block:18px;
  }
}
.m-form__row:first-child{ border-top:1px solid var(--c-line); }

.m-form__label{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:var(--fs-small);
  font-weight:var(--fw-medium);
  line-height:var(--lh-body);
  color:var(--c-ink-body);
}
@media (min-width:768px){
  .m-form__label{ min-height:48px; }   /* 入力欄と天地を合わせる */
}

/* 必須バッジ。アクセントの緑に白文字（7.21:1） */
.m-form__req{
  display:inline-block;
  flex:0 0 auto;
  padding:3px 8px;
  background:var(--c-accent);
  color:var(--c-white);
  font-size:11px;
  font-weight:var(--fw-medium);
  line-height:1.5;
  letter-spacing:var(--ls-base);
}

.m-form__input{
  width:100%;
  min-height:48px;               /* タップ領域44pxを上回る */
  padding:12px 14px;
  background:var(--c-bg-white);
  border:1px solid var(--c-line);
  border-radius:var(--radius);
  color:var(--c-ink-body);
  font-family:var(--font-base);
  font-size:16px;                /* ★16px固定。iOSの拡大対策 */
  font-weight:var(--fw-normal);
  line-height:var(--lh-body);
  letter-spacing:var(--ls-base);
  transition:border-color .3s var(--ease);
}
.m-form__input::placeholder{ color:var(--c-ink-mute); }
.m-form__input:hover{ border-color:var(--c-green); }
.m-form__input:focus{ border-color:var(--c-accent); }

/* セレクト。OS標準の三角を消して、サイトの矢印（1.6px線）に合わせる */
.m-form__select{
  appearance:none;
  -webkit-appearance:none;
  padding-right:42px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%234d5c3d' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:13px 9px;
}
.m-form__textarea{
  min-height:160px;
  resize:vertical;
}

/* 同意チェック。ここだけ罫線を引かず、PCでも1カラムで置く */
.m-form__row--agree{ border-bottom:0; }
@media (min-width:768px){
  .m-form__row--agree{ grid-template-columns:minmax(0,1fr); }
}
.m-form__check{
  display:flex;
  align-items:center;
  gap:12px;
  min-height:var(--tap);
  font-size:var(--fs-small);
  line-height:var(--lh-body);
  color:var(--c-ink-body);
  cursor:pointer;
}
.m-form__check input[type="checkbox"]{
  flex:0 0 24px;
  width:24px; height:24px;
  margin:0;
  accent-color:var(--c-accent);
}


/* =============================================================
   35. .m-detail  実績詳細ページ（WordPress: 投稿の個別ページ）

   ★トップと同じ部品づかいに揃える。見出しは .m-heading、
     カードは .m-works__card、ボタンは .m-btn をそのまま流用しているので、
     ここで足すのは「詳細ページ固有の器」だけ。
   ★白地と淡グレー地を交互に置いて、縦に長いページの区切りを作る。
     使う色は既存のトークンだけで、新しい背景色は足していない。
   ============================================================= */
.m-detail__article{ display:block; }

/* -------- 記事ヘッダー -------- */
.m-detail__head{ position:relative; }

/* メイン写真。ヘッダー（fixed）が上に重なるので、SPでは高さの下限を入れて
   ロゴの下に写真が残るようにする。 */
.m-detail__hero{
  width:100%;
  min-height:210px;
}
@media (min-width:768px){ .m-detail__hero{ min-height:280px; } }

.m-detail__head .m-inner{
  padding-block:var(--sec-pad) 0;
}

/* カテゴリ。カード用のタグ（.m-works__tag）と同じ見た目にする */
.m-detail__cat{
  display:inline-block;
  margin-top:0;
  padding:3px 10px;
  background:var(--c-ink-strong);
  color:var(--c-white);
  font-size:11px;
  font-weight:var(--fw-medium);
  line-height:1.6;
  letter-spacing:var(--ls-base);
}
.m-detail__crumbs + .m-detail__cat{ margin-top:16px; }

.m-detail__title{
  margin-top:16px;
  font-size:min(40px, calc(13.5px + 1.282vw));  /* 375→18.3 / 1280→30 / 1920→38 */
  font-weight:var(--fw-medium);
  line-height:var(--lh-tight);
  letter-spacing:var(--ls-base);
  color:var(--c-ink-strong);
}
.m-detail__date{
  margin-top:12px;
  font-size:var(--fs-xsmall);
  line-height:var(--lh-body);
  color:var(--c-ink-sub);
}

/* -------- Before / After -------- */
/* 2枚を並べて見比べさせるのが目的なので、SPでも縦に積まず横に並べる */
.m-detail__ba-list{
  margin-top:var(--gap-lg);
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--gap-md);
}
.m-detail__ba-item{ margin:0; min-width:0; }
.m-detail__ba-img{ width:100%; }
.m-detail__ba-cap{
  display:block;
  margin-top:10px;
  font-family:var(--font-display);
  font-size:var(--fs-xsmall);
  font-weight:var(--fw-display);
  line-height:var(--lh-body);
  letter-spacing:var(--ls-base);
  color:var(--c-ink-sub);
}

/* -------- 物件データ -------- */
/* 白地にして、前後の淡グレー地から一段持ち上げる */
.m-detail__spec{ background:var(--c-bg-white); }
.m-detail__spec .m-heading__en{ color:var(--c-en-soft); }

.m-detail__table{
  margin-top:var(--gap-lg);
  border-top:1px solid var(--c-line);
}
.m-detail__row{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:4px;
  padding:14px 0;
  border-bottom:1px solid var(--c-line);
  font-size:var(--fs-small);
  line-height:var(--lh-body);
}
@media (min-width:768px){
  .m-detail__row{ grid-template-columns:200px minmax(0,1fr); gap:var(--gap-md); padding:16px 0; }
}
.m-detail__row dt{
  font-weight:var(--fw-medium);
  color:var(--c-ink-sub);
}
.m-detail__row dd{ margin:0; color:var(--c-ink-body); }

/* -------- 作業の流れ -------- */
.m-detail__lead{
  max-width:44em;
  margin-top:var(--gap-md);
  font-size:var(--fs-lead);
  font-weight:var(--fw-black);
  line-height:var(--lh-lead);
  color:var(--c-ink-body);
}
.m-detail__steps{
  margin-top:var(--gap-lg);
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--gap-lg);
}
@media (min-width:768px){
  .m-detail__steps{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--gap-md); }
}
.m-detail__step{ position:relative; min-width:0; }
/* 工程番号は GUIDE のステップ番号と同じ扱い（アクセントの緑） */
.m-detail__step-no{
  display:block;
  margin-bottom:10px;
  font-family:var(--font-display);
  font-size:clamp(20px, 4vw, 30px);
  font-weight:var(--fw-display);
  line-height:1;
  letter-spacing:var(--ls-base);
  color:var(--c-accent);
}
.m-detail__step-img{ width:100%; }
.m-detail__step-title{
  margin-top:12px;
  font-size:var(--fs-card-title);
  font-weight:var(--fw-medium);
  line-height:var(--lh-tight);
  letter-spacing:var(--ls-base);
  color:var(--c-ink);
}
.m-detail__step-body{
  margin-top:8px;
  font-size:var(--fs-xsmall);
  line-height:var(--lh-lead);
  color:var(--c-ink-body);
}

/* -------- 他の清掃実績 -------- */
/* カードはトップの WORKS と同じ .m-works__card なので、器だけ用意する */
.m-detail__related-list{
  margin-top:var(--gap-lg);
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--gap-md);
}
@media (min-width:768px){
  .m-detail__related-list{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
.m-detail__related-item{ min-width:0; }


/* =============================================================
   36. 下層ページでは「HTMLに書かれた比率」を正とする

   .m-ph--16x9 のような比率モディファイアは、ブロック側の既定
   （例: .m-plans__thumb は縦長 3/4）に後から上書きされて効かない。
   トップはブロックごとの比率で紙面を作っているのでそのままでよいが、
   下層ページは写真の実寸（data-img-size）に合わせて置いているため、
   縦長に引き伸ばされると1枚で画面1枚ぶんの高さを食ってしまう。
   下層だけ、書かれた比率が勝つようにする。

   ★これから増えるページでも、HTMLに比率クラスを書けばそのとおりに出る。
   ============================================================= */
.m-lower  .m-ph.m-ph--16x9,
.m-detail .m-ph.m-ph--16x9{ aspect-ratio:16/9; }
.m-lower  .m-ph.m-ph--4x3,
.m-detail .m-ph.m-ph--4x3 { aspect-ratio:4/3; }
.m-lower  .m-ph.m-ph--3x4,
.m-detail .m-ph.m-ph--3x4 { aspect-ratio:3/4; }
.m-lower  .m-ph.m-ph--1x1,
.m-detail .m-ph.m-ph--1x1 { aspect-ratio:1/1; }
.m-lower  .m-ph.m-ph--21x9,
.m-detail .m-ph.m-ph--21x9{ aspect-ratio:21/9; }

/* 定義リストの見出し列。下層は「お見積り・現地確認」のように長い項目名が
   来るため、6.5em では2行に折れる。下層だけ列幅を広げる。 */
@media (min-width:768px){
  .m-lower .m-company__row{ grid-template-columns:10em minmax(0,1fr); }
}


/* =============================================================
   37. 下層ページの巨大英字は「器に収める」

   見出しは1文字ずつ span に分かれているため、器より長いと
   単語の途中で改行される（BEFORE / A｜FTER のように割れる）。
   トップは白の透かしなので目立たなかったが、下層は読ませる色にした以上
   割れ方がそのまま見える。

   そこで下層だけ、見出し幅の上限を「8em ぶん」と決めて字送りを抑える。
   実測した最長は "BEFORE / AFTER" の 7.33em。8em の予算があれば
   これから増えるページの見出しもまず1行に収まる。
   ★上限に当たらない幅（1200〜1399px）では、トップと同じ大きさのまま。
   ============================================================= */
.m-lower,
.m-detail{
  /* 器の内寸（画面幅 − 額縁5px×2 − .m-inner の padding 12px×2）÷ 8.4 */
  --fs-sec-en-cap: calc((100vw - 34px) / 8.4);
}
@media (min-width:768px){ .m-lower,.m-detail{ --fs-sec-en-cap: 87px;  } }
@media (min-width:992px){ .m-lower,.m-detail{ --fs-sec-en-cap: 117px; } }
@media (min-width:1200px){ .m-lower,.m-detail{ --fs-sec-en-cap: 139px; } }
@media (min-width:1400px){ .m-lower,.m-detail{ --fs-sec-en-cap: 162px; } }

.m-lower  .m-section:not(.m-pagehead) .m-heading__en,
.m-detail .m-section:not(.m-pagehead) .m-heading__en{
  font-size:min(var(--fs-sec-en), var(--fs-sec-en-cap));
}


/* =============================================================
   38. 一覧ページ・固定ページで新しく出てきた器

   一覧4枚（works / voice / blog / news）と固定ページ6枚が加わったときに
   出てきたクラス。どれも「新しい見た目」ではなく、既存の部品の置き場所。
   ============================================================= */

/* -------- 一覧ページ: カテゴリ絞り込み -------- */
.m-archive__cats{ margin-bottom:var(--gap-md); }
.m-archive__cats ul{
  display:flex;
  flex-wrap:wrap;
  gap:var(--gap-xs);
}
.m-archive__cat a{
  display:inline-flex;
  align-items:center;
  min-height:var(--tap);
  padding:0 16px;
  border:1px solid var(--c-line);
  background:var(--c-bg-white);
  color:var(--c-ink-body);
  font-size:var(--fs-xsmall);
  line-height:var(--lh-body);
  transition:background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.m-archive__cat a:hover{ border-color:var(--c-accent); color:var(--c-accent); }
/* 選択中。アクセントの緑に白文字（7.21:1） */
.m-archive__cat.is-current a{
  background:var(--c-accent);
  border-color:var(--c-accent);
  color:var(--c-white);
}

/* -------- 一覧ページ: ページ送り -------- */
.m-archive__pager{ margin-top:var(--gap-lg); }
.m-archive__pager ul{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:var(--gap-xs);
}
.m-archive__pager a,
.m-archive__pager span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:var(--tap);
  min-height:var(--tap);
  padding:0 12px;
  border:1px solid var(--c-line);
  color:var(--c-ink-body);
  font-size:var(--fs-small);
  line-height:1;
  transition:background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.m-archive__pager a:hover{ border-color:var(--c-accent); color:var(--c-accent); }
.m-archive__pager .is-current{
  background:var(--c-accent);
  border-color:var(--c-accent);
  color:var(--c-white);
}

/* -------- 規約系ページ（プライバシーポリシー等）の本文 -------- */
/* 長い文章は行長が伸びるほど読みにくくなる。器を1段細くする */
.m-inner--narrow{ max-width:820px; }
@media (min-width:768px){ .m-inner--narrow{ max-width:min(820px, 100%); } }

.m-detail__block{ margin-top:var(--gap-lg); }
.m-detail__lead-title{
  font-size:var(--fs-card-title);
  font-weight:var(--fw-medium);
  line-height:var(--lh-tight);
  letter-spacing:var(--ls-base);
  color:var(--c-ink-strong);
}
.m-detail__text{
  margin-top:10px;
  font-size:var(--fs-body);
  font-weight:var(--fw-normal);
  line-height:var(--lh-lead);
  color:var(--c-ink-body);
}
.m-detail__lead-title + .m-detail__text{ margin-top:12px; }

/* -------- 清掃プランページ -------- */
.m-plans__text{
  margin-top:12px;
  font-size:var(--fs-small);
  line-height:var(--lh-lead);
  color:var(--c-ink-body);
}
.m-section--dark .m-plans__text{ color:rgba(255,255,255,.86); }

/* 「こんな方に」の箇条書き。行頭にアクセントの短い罫を置く */
.m-plans__points{
  margin-top:16px;
  display:grid;
  gap:8px;
}
.m-plans__points li{
  position:relative;
  padding-left:18px;
  font-size:var(--fs-small);
  line-height:var(--lh-body);
  color:var(--c-ink-body);
}
.m-plans__points li::before{
  content:"";
  position:absolute;
  left:0; top:.62em;
  width:10px; height:1px;
  background:var(--c-accent);
}
.m-section--dark .m-plans__points li{ color:var(--c-white); }
.m-section--dark .m-plans__points li::before{ background:var(--c-green-pale); }

/* ボタンは既定で本文と同じ左揃え。中央寄せの器に入れたときだけ左に戻す */
.m-btn-wrap--left{ display:flex; justify-content:flex-start; }

/* -------- 会社案内: 代表あいさつ -------- */
.m-company__greeting{
  margin-top:16px;
  font-size:var(--fs-small);
  line-height:var(--lh-lead);
  color:rgba(255,255,255,.86);
}

/* -------- 採用ページ: メインビジュアル -------- */
.m-message__thumb{
  margin-top:var(--gap-lg);
  width:100%;
}


/* =============================================================
   39. 下層ページの「読みもの」タイポグラフィ

   ★直した不具合（根本原因）
   リード系のクラス（.m-guide__lead / .m-feature__lead /
   .m-roomtour__lead / .m-detail__lead / .m-message__body）は
   font-weight:900・font-size:var(--fs-lead) で組んである。
   これは「短い一文を大きく置く」ための指定で、トップの
   ブランドメッセージのように 2〜4行で言い切る文にだけ合う。

   ところが下層ページでは、同じクラスに「説明の文章」が入っている。
   その結果 1280px で

     和文見出し .m-heading__ja  30px / 500
     リード     .m-guide__lead  30px / 900   ← 見出しと同じ大きさで、より太い

   となり、見出しと本文の主従が逆転していた。
   ページ全体が太字に見えるのは、この 900 が本文の位置に居座っているため。

   ★直し方
   トップの組み（見出し=500 / 本文=400）に主従をそろえる。
   リードは「大きい本文」として 400 まで戻し、上限20pxに抑え、
   行間を 1.95 まで広げる。太さの担当は見出しに返す。

   ★適用範囲を .m-lower / .m-detail に絞ってある理由
   トップの .m-message__lead / .m-message__body は
   「詩のように置く2〜4行」で、900 はそちらの意匠として正しい。
   下層は読ませる文章なので、ページの階層ごと組み方を分ける。
   （§36〜37 で使っている .m-lower / .m-detail の切り分けと同じ考え方）
   ============================================================= */

/* -------- 39-1. リードを「大きい本文」に戻す -------- */
.m-lower  .m-guide__lead,
.m-detail .m-guide__lead,
.m-lower  .m-feature__lead,
.m-detail .m-feature__lead,
.m-lower  .m-roomtour__lead,
.m-detail .m-roomtour__lead,
.m-lower  .m-detail__lead,
.m-detail .m-detail__lead{
  /* 375→16.0 / 768→17.7 / 1280→20 で頭打ち */
  font-size:min(20px, calc(14.31px + 0.4444vw));
  font-weight:var(--fw-normal);
  line-height:1.95;
  letter-spacing:var(--ls-base);
  /* 1行の長さ。40em を超えると目が次の行頭に戻れなくなる */
  max-width:40em;
  color:var(--c-ink-body);
}

/* 見出し直下のリードは、見出しの下余白（--gap-md）に自分の分を足さない */
.m-lower  .m-heading + .m-guide__lead,
.m-detail .m-heading + .m-detail__lead{ margin-top:0; }

/* -------- 39-2. .m-message__body を「文章の器」としても使えるように --------
   トップ・ミルについては <p class="m-message__body"> と直接書いてあり、
   2〜4行を言い切る意匠なので 900 のまま触らない。
   採用のように <div class="m-message__body"> の中に <p> を並べた場合だけ、
   中の段落を本文の組みにする。器の使い分けを、構造で見分けている。 */
.m-message__body > p{
  font-size:min(18px, calc(14.65px + 0.26vw));
  font-weight:var(--fw-normal);
  line-height:1.95;
  letter-spacing:var(--ls-base);
  max-width:40em;
  color:var(--c-ink-body);
}
/* 段落と段落のあいだ。ここが 0 だと文章が1枚の壁になる */
.m-message__body > p + p{ margin-top:1.4em; }

/* -------- 39-3. 募集ステータスのバッジ --------
   .m-detail__cat は詳細ページのカテゴリ用で 11px。
   リード（60px）の直下に置くと、豆粒に見えて釣り合わない。
   文章の中に置く用として、ひとまわり大きくして余白を持たせる。 */
.m-message .m-detail__cat{
  margin-top:28px;
  padding:6px 14px;
  background:var(--c-accent);   /* #4d5c3d に白文字＝7.21:1 */
  font-size:var(--fs-xsmall);
  line-height:1.7;
}
.m-detail__cat + .m-message__body{ margin-top:24px; }

/* -------- 39-4. キャッチコピーの色は「地」で決める --------
   .m-company__copy は色を白で固定してあった。
   これはフッターの暗い COMPANY 帯の中でしか成り立たない。
   会社案内のごあいさつ（明るい地）に置くと、白文字が地に溶けて読めない。
   既定を「明るい地の文字色」にし、暗地のときだけ白に戻す。 */
.m-company__copy{ color:var(--c-ink-strong); }
.m-company .m-company__copy,
.m-section--dark .m-company__copy{ color:var(--c-white); }

/* -------- 39-5. ごあいさつ: 本文が左・写真が右 --------
   .m-company__body は「左320pxが写真／右が本文」の2カラム。
   ごあいさつはその逆にする。列幅を入れ替えたうえで、
   HTMLの順（写真→本文）を order で差し替える。
   ★768px 未満は1カラムなので、写真が先に来る縦並びのまま。 */
@media (min-width:768px){
  .m-company__body--reverse{
    grid-template-columns:minmax(0,1fr) minmax(0,320px);
  }
  .m-company__body--reverse > .m-company__portrait{ order:2; }
  .m-company__body--reverse > .m-company__text{ order:1; }
}

/* ごあいさつの本文カラム。署名を下端に落とすため縦のflexにする */
.m-greeting__text{
  display:flex;
  flex-direction:column;
}
.m-greeting__p{
  margin-top:1.4em;
  font-size:min(17px, calc(14.4px + 0.2vw));
  font-weight:var(--fw-normal);
  line-height:1.95;
  color:var(--c-ink-body);
  max-width:40em;
}

/* -------- 39-6. 署名は右下・右寄せ -------- */
.m-company__sign{
  margin-top:var(--gap-md);
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:4px;
  text-align:right;
  color:var(--c-ink-body);
}
.m-greeting__text .m-company__sign{
  /* 本文がどれだけ増えても、署名は本文カラムのいちばん下 */
  margin-top:auto;
  padding-top:var(--gap-lg);
}
.m-company__sign-corp{
  font-size:var(--fs-xsmall);
  line-height:var(--lh-body);
  color:var(--c-ink-sub);
}
/* 役職。社名と氏名のあいだ。氏名を主役にしたいので、社名と同じ小ささに置く */
.m-company__sign-title{
  font-size:var(--fs-xsmall);
  font-weight:var(--fw-normal);
  line-height:var(--lh-body);
  letter-spacing:var(--ls-base);
  color:var(--c-ink-sub);
}
.m-company__sign-name{
  font-size:min(20px, calc(13px + 0.55vw));
  font-weight:var(--fw-medium);
  line-height:var(--lh-tight);
  color:var(--c-ink-strong);
}
/* 役職のすぐ下が氏名。行間を詰めて1つのまとまりに見せる */
.m-company__sign-title + .m-company__sign-name{ margin-top:2px; }
.m-company .m-company__sign,
.m-section--dark .m-company__sign{ color:var(--c-white); }
.m-company .m-company__sign-corp,
.m-section--dark .m-company__sign-corp{ color:rgba(255,255,255,.6); }
.m-company .m-company__sign-title,
.m-section--dark .m-company__sign-title{ color:rgba(255,255,255,.6); }
.m-company .m-company__sign-name,
.m-section--dark .m-company__sign-name{ color:var(--c-white); }

/* -------- 39-7. ページ見出し: 巨大英字に和文を重ねる -------- */
/* 375px では英字がすでに器いっぱいで、重ねると和文が英字の上に乗って
   どちらも読めなくなる。重ねるのは器に余裕が出る 768px から。 */
.m-pagehead--overlap{
  /* この見出しで実際に描かれる英字の大きさ（§33 と同じ式） */
  --pagehead-en:min(calc(var(--fs-sec-en) * 1.15), 12.5vw);
}
@media (min-width:768px){
  .m-pagehead--overlap .m-heading__ja{
    /* 英字は line-height:1 なので、ベースラインより下に
       字面の約 0.12em ぶんの空きがある。持ち上げる量をその内側
       （0.11em）に収めると、和文が英字の字面に重なって
       読めなくなることがない。「重ねる」が「潰す」にならない上限。 */
    margin-top:calc(var(--pagehead-en) * -0.11);
    padding-left:.15em;
  }
}
/* 見出しの直後にパンくずの帯が来るときは、見出しの下余白を帯に譲る */
.m-pagehead:has(+ .m-crumbband){ padding-bottom:var(--gap-lg); }

/* -------- 39-8. 帯パンくず -------- */
.m-crumbband{
  background:var(--c-bg-white);
  border-top:1px solid var(--c-line);
  border-bottom:1px solid var(--c-line);
}
.m-crumbband__nav{
  padding-block:14px;
  min-height:var(--tap);
}

/* -------- 39-9. お客様の声のカード全体をリンクにする --------
   <a class="m-voice__card"> と書けるようにする。
   a は既定で inline なので、padding も height:100% も効かない。 */
.m-voice__card{
  display:block;
  color:inherit;
  text-decoration:none;
}
a.m-voice__card{ transition:opacity .3s var(--ease); }
a.m-voice__card:hover{ opacity:.7; }

/* -------- 39-10. メイン写真を置かない記事ヘッダー --------
   ヘッダーが position:fixed のため、その高さぶんを上に足さないと
   パンくずがヘッダーの下に潜り込む。.m-pagehead と同じ逃げ量。 */
.m-detail__head--nohero .m-inner{
  padding-block:calc(var(--sec-pad) + 56px) 0;
}
@media (min-width:992px){
  .m-detail__head--nohero .m-inner{
    padding-block:calc(var(--sec-pad) + 64px) 0;
  }
}

/* -------- 39-11. 会社概要（1カラム）・沿革 -------- */
/* ★.m-company__body は「写真＋文章」の2カラム専用。
   写真を並べない表は、こちらの1カラムの器に入れる。 */
.m-company__outline{ margin-top:var(--gap-lg); }
.m-company__outline .m-company__text{ max-width:900px; }

/* 沿革。暗い帯の中に「年 ─ できごと」を並べる */
.m-history{ margin-top:var(--gap-lg); }
.m-history__item{
  display:grid;
  grid-template-columns:6.5em minmax(0,1fr);
  gap:var(--gap-sm);
  padding:16px 0;
  border-bottom:1px solid rgba(255,255,255,.16);
  font-size:var(--fs-small);
  line-height:var(--lh-body);
}
@media (min-width:768px){
  .m-history__item{ grid-template-columns:10em minmax(0,1fr); }
}
.m-history__year{
  font-weight:var(--fw-medium);
  color:rgba(255,255,255,.6);
}
.m-history__text{ margin:0; color:var(--c-white); }