@charset "UTF-8";
/* -----------------------------------------------
* Page エントリーポイント
-------------------------------------------------- */
/* 2026-05-31: 未使用 leftover（えんの会テンプレ由来 service/strength/recruit/friendship/friendship-detail/triangle）の @use を除去 */
/* FLOCSS
----------------------------------------------------- */
/* =====================================================
# ゼロ・システム TOP — page styles（Figma 2000px 幅基準・2026-05-30 実装）
# 2000px 以下は実幅に比例（リキッド）、2000px 超は px 値で頭打ち。
# EZ-DESIGN リキッド均整：font-size は zfs()(=clamp 13px..)・寸法は zvw()。
===================================================== */
body.index {
  background-color: white;
}

/* メインコンテンツは 2000px で頭打ち・中央寄せ（超広幅での崩れ防止） */
.main {
  width: 100%;
  max-width: 2000px;
  margin-inline: auto;
  overflow-x: clip;
}

/* =====================================================
# first-view（Figma 4:29 準拠・2026-05-30 再実装）
# 全面建設写真の上にヘッダーをオーバーレイ、右下に明朝キャッチコピー。カンプ native 2000×889。
===================================================== */
body.index .fv {
  position: relative;
  width: 100%;
  overflow: hidden;
  aspect-ratio: 2000/889;
  max-height: 889px;
}
body.index .fv {
  /* 背景スライドショー（同じ写真を複数枚クロスフェード＋ズーム方式・
     scale 1→1.1 ease:none でゆっくり拡大、フェードで次へ受け渡し＝縮小せずループ。
     ズーム/フェードは my-gsap.js が制御。CEO 指示 2026-05-30） */
}
body.index .fv__slides {
  position: absolute;
  inset: 0;
  z-index: 0;
}
body.index .fv__slide {
  position: absolute;
  inset: 0;
  opacity: 0; /* 初期は非表示。GSAP がフェードイン */
}
body.index .fv__slide picture {
  display: block;
  width: 100%;
  height: 100%;
}
body.index .fv__slide img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
body.index .fv {
  /* キャッチコピー（カンプ left=911/top=485 of 2000×889） */
}
body.index .fv__catch {
  position: absolute;
  left: 45.55%;
  top: 54.5%;
  margin: 0;
  z-index: 2;
  font-family: "Noto Serif JP", "YuMincho", "游明朝", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif;
  font-weight: 800;
  font-size: clamp(13px, 4vw, 80px);
  line-height: 1.25;
  letter-spacing: 0.02em;
  color: white;
  text-shadow: 10px 4px 100px rgba(52, 61, 65, 0.23);
  white-space: nowrap;
}
body.index .fv__catch-line {
  display: block;
}

/* =====================================================
# 共通 VIEW MORE ボタン（赤文字 + 矢印）
===================================================== */
.c-more {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  gap: min(100vw * 12 / 2000, 12px);
  text-decoration: none;
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
  /* hover で右に 10px スライド（TOP の VIEW MORE 共通・CEO 指示 2026-05-30）。
     CEO 指示 2026-05-31：business__more は js-fadeUp の GSAP インライン transform(translate0,0)が
     残りホバーを打ち消すため !important で勝たせる（全 VIEW MORE で必ずホバーを効かせる） */
}
.c-more__text {
  font-family: "Noto Sans JP", "YuGothic", "游ゴシック", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;
  font-weight: 500;
  font-size: clamp(13px, 100vw * 25 / 2000, 25px);
  letter-spacing: 0.14em;
  color: #b70005;
  line-height: 1;
  white-space: nowrap;
}
.c-more__arrow {
  position: relative;
  display: inline-block;
}
.c-more__arrow img {
  display: block;
}

/* =====================================================
# about（Figma 4:46 準拠・2000×996）
===================================================== */
body.index .about {
  position: relative;
  width: 100%;
  height: min(100vw * 996 / 2000, 996px);
}
body.index .about {
  /* 右上の装飾ロゴ写真 */
}
body.index .about__logo {
  position: absolute;
  left: min(100vw * 1352 / 2000, 1352px);
  top: min(100vw * 54 / 2000, 54px);
  width: min(100vw * 623 / 2000, 623px);
  z-index: 0;
  opacity: 0.3; /* CEO 指示 2026-05-30：about ロゴの不透明度を 0.3 に */
}
body.index .about__logo img {
  width: 100%;
  height: auto;
  display: block;
}
body.index .about {
  /* 左の写真クラスター（2枚重なり） */
}
body.index .about__photos {
  position: absolute;
  left: 0;
  top: 0;
  width: min(100vw * 832 / 2000, 832px);
  height: min(100vw * 843 / 2000, 843px);
  z-index: 1;
}
body.index .about__photo {
  position: absolute;
  display: block;
}
body.index .about__photo img {
  width: 100%;
  height: auto;
  display: block;
}
body.index .about__photo--top {
  left: 0;
  top: 0;
  width: min(100vw * 539 / 2000, 539px);
  z-index: 1;
}
body.index .about__photo--bottom {
  left: min(100vw * 101 / 2000, 101px);
  top: min(100vw * 376 / 2000, 376px);
  width: min(100vw * 730 / 2000, 730px);
  z-index: 2;
}
body.index .about__photo--sp {
  display: none;
}
body.index .about__photo { /* PC（xl超）は非表示・xl時以下のみ表示 */ }
body.index .about {
  /* 右のテキストカラム */
}
body.index .about__body {
  position: absolute;
  left: min(100vw * 938 / 2000, 938px);
  top: min(100vw * 159 / 2000, 159px);
  width: min(100vw * 813 / 2000, 813px);
  height: min(100vw * 694 / 2000, 694px);
  z-index: 3;
}
body.index .about__head {
  position: relative;
  /* 見出し左の縦アクセントバー */
}
body.index .about__head::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: min(100vw * 6 / 2000, 6px);
  height: min(100vw * 105 / 2000, 105px);
  background: url(../img/top/zs-about-accent-bar.webp) center/contain no-repeat;
}
body.index .about__sub {
  position: absolute;
  left: min(100vw * 19 / 2000, 19px);
  top: min(100vw * 1 / 2000, 1px);
  font-family: "Noto Sans JP", "YuGothic", "游ゴシック", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;
  font-weight: 400;
  font-size: clamp(13px, 100vw * 20 / 2000, 20px);
  letter-spacing: 0.14em;
  color: #00a9eb;
  line-height: 1.48;
  white-space: nowrap;
}
body.index .about__en {
  position: absolute;
  left: min(100vw * 19 / 2000, 19px);
  /* CEO 2026-05-30：sub との間隔を Figma 通りに。Figma 値 top=18 だと line-height:1.0 の
     half-leading 欠損で大英字が上に詰まる（cap-top が box-top+9px）。Figma は cap-top=box-top+32px
     なので欠損 +23px を top に加算（18→41）して見た目を一致させる。 */
  top: min(100vw * 41 / 2000, 41px);
  margin: 0;
  font-family: "Besley", "Times New Roman", "YuMincho", serif;
  font-weight: 600;
  font-size: clamp(13px, 100vw * 70 / 2000, 70px);
  letter-spacing: 0.03em;
  color: #001157;
  line-height: 1;
}
body.index .about__en { /* CEO 指示 2026-05-31：SP英字タイトルが小さい→svw(767基準)で適正化（xl は tvw=1199基準で小さく出ていた）*/ }
body.index .about__text {
  position: absolute;
  left: min(100vw * 19 / 2000, 19px);
  top: min(100vw * 184 / 2000, 184px);
  width: min(100vw * 799 / 2000, 799px); /* CEO 指示 2026-05-30：横幅を約5px広げる（794→799） */
  margin: 0;
  font-family: "Noto Sans JP", "YuGothic", "游ゴシック", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;
  font-weight: 500;
  font-size: clamp(13px, 100vw * 25 / 2000, 25px);
  line-height: 2;
  letter-spacing: 0.14em;
  color: #0e0d0d;
  text-align: justify; /* CEO 指示 2026-05-30：本文は両端揃え */
}
body.index .about {
  /* VIEW MORE：products__more と同じ単一矢印画像方式に統一（CEO 指示 2026-05-30） */
}
body.index .about__more {
  position: absolute;
  left: min(100vw * 434 / 2000, 434px);
  top: min(100vw * 617 / 2000, 617px);
}
body.index .about__more .c-more__arrow img {
  width: min(100vw * 173 / 2000, 173px);
}

/* =====================================================
# business（Figma 4:54 準拠・2000×813・ダークブルー背景）
===================================================== */
body.index .business {
  position: relative;
  width: 100%;
  height: min(100vw * 813 / 2000, 813px);
  overflow: hidden;
}
body.index .business {
  /* 背景写真（ダークブルー・左側） */
}
body.index .business__bg {
  position: absolute;
  left: 0;
  top: 0;
  width: min(100vw * 1437 / 2000, 1437px);
  height: min(100vw * 728 / 2000, 728px);
  z-index: 0;
}
body.index .business__bg img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
body.index .business {
  /* テキストカラム（左） */
}
body.index .business__body {
  position: absolute;
  left: min(100vw * 262 / 2000, 262px);
  top: min(100vw * 78 / 2000, 78px);
  width: min(100vw * 767 / 2000, 767px);
  z-index: 2;
}
body.index .business__head {
  position: relative;
  height: min(100vw * 139 / 2000, 139px);
  /* 見出し左の縦バー */
}
body.index .business__head::before {
  content: "";
  position: absolute;
  left: 0;
  top: min(100vw * 4 / 2000, 4px);
  width: min(100vw * 6 / 2000, 6px);
  height: min(100vw * 105 / 2000, 105px);
  background: url(../img/top/zs-business-heading-bar.webp) center/contain no-repeat;
}
body.index .business__sub {
  position: absolute;
  left: min(100vw * 17 / 2000, 17px);
  top: 0;
  font-family: "Noto Sans JP", "YuGothic", "游ゴシック", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;
  font-weight: 400;
  font-size: clamp(13px, 100vw * 20 / 2000, 20px);
  letter-spacing: 0.14em;
  color: #00a9eb;
  line-height: 1.48;
}
body.index .business__en {
  position: absolute;
  left: min(100vw * 17 / 2000, 17px);
  /* CEO 2026-05-30：sub との間隔を Figma 通りに（line-height:1.0 の half-leading 欠損 +23px。22→45） */
  top: min(100vw * 45 / 2000, 45px);
  margin: 0;
  font-family: "Besley", "Times New Roman", "YuMincho", serif;
  font-weight: 600;
  font-size: clamp(13px, 100vw * 70 / 2000, 70px);
  letter-spacing: 0.03em;
  color: white;
  line-height: 1;
}
body.index .business__en { /* CEO 指示 2026-05-31：SP英字タイトルが小さい→svw(767基準)で適正化（xl は tvw=1199基準で小さく出ていた）*/ }
body.index .business__lead {
  position: absolute;
  left: 0;
  top: min(100vw * 190 / 2000, 190px);
  width: min(100vw * 767 / 2000, 767px);
  margin: 0;
  font-family: "Noto Sans JP", "YuGothic", "游ゴシック", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;
  font-weight: 700;
  font-size: clamp(13px, 100vw * 25 / 2000, 25px);
  line-height: 2;
  letter-spacing: 0.14em;
  color: white;
  text-align: justify; /* CEO 指示 2026-05-31：本文を両端揃えに */
}
body.index .business__more {
  position: absolute;
  left: min(100vw * 391 / 2000, 391px);
  top: min(100vw * 500 / 2000, 500px);
}
body.index .business__more .c-more__arrow img {
  width: min(100vw * 173 / 2000, 173px);
}
body.index .business {
  /* 右側の写真2点 */
}
body.index .business__photos {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
body.index .business__photo {
  position: absolute;
  display: block;
}
body.index .business__photo img {
  width: 100%;
  height: auto;
  display: block;
}
body.index .business__photo--main {
  left: min(100vw * 1426 / 2000, 1426px);
  top: min(100vw * 2 / 2000, 2px);
  width: min(100vw * 574 / 2000, 574px);
  z-index: 2;
}
body.index .business__photo--sub {
  left: min(100vw * 1133 / 2000, 1133px);
  top: min(100vw * 413 / 2000, 413px);
  width: min(100vw * 400 / 2000, 400px);
  z-index: 1;
}
body.index .business__photo--sp {
  display: none;
}
body.index .business__photo { /* PC（xl超）は非表示・xl時以下のみ表示 */ }

/* =====================================================
# products（施工事例 / Figma 4:101 準拠・2000×903・スカイブルー背景）
===================================================== */
body.index .products {
  position: relative;
  width: 100%;
  height: min(100vw * 903 / 2000, 903px);
  overflow: hidden;
}
body.index .products {
  /* 背景写真（スカイブルー・右寄せ） */
}
body.index .products__bg {
  position: absolute;
  left: min(100vw * 576 / 2000, 576px);
  top: 0;
  width: min(100vw * 1424 / 2000, 1424px);
  height: min(100vw * 903 / 2000, 903px);
  z-index: 0;
}
body.index .products__bg img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
body.index .products__inner {
  position: absolute;
  left: min(100vw * 263 / 2000, 263px);
  top: min(100vw * 70 / 2000, 70px);
  width: min(100vw * 1475 / 2000, 1475px);
  z-index: 2;
}
body.index .products__head {
  position: relative;
  height: min(100vw * 142 / 2000, 142px);
}
body.index .products__head {
  /* CEO 指示 2026-05-31：SP は縦並び・左揃え・gap20。xl の align-items:flex-end が
     mqpacker(md→xl)で後勝ちするため &[class] で詳細度を上げて md を確実に勝たせる */
}
body.index .products__head-title {
  position: relative;
  padding-left: min(100vw * 15 / 2000, 15px);
}
body.index .products__sub {
  position: absolute;
  left: min(100vw * 15 / 2000, 15px);
  top: 0;
  font-family: "Noto Sans JP", "YuGothic", "游ゴシック", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;
  font-weight: 400;
  font-size: clamp(13px, 100vw * 20 / 2000, 20px);
  letter-spacing: 0.14em;
  color: #00a9eb;
  line-height: 1.48;
}
body.index .products__en {
  position: absolute;
  left: min(100vw * 18 / 2000, 18px);
  /* CEO 2026-05-30：sub との間隔を Figma 通りに（line-height:1.0 の half-leading 欠損 +23px。15→38） */
  top: min(100vw * 38 / 2000, 38px);
  margin: 0;
  font-family: "Besley", "Times New Roman", "YuMincho", serif;
  font-weight: 600;
  font-size: clamp(13px, 100vw * 70 / 2000, 70px);
  letter-spacing: 0.03em;
  color: #001157;
  line-height: 1;
}
body.index .products__en { /* CEO 指示 2026-05-31：SP英字タイトルが小さい→svw(767基準)で適正化（xl は tvw=1199基準で小さく出ていた）*/ }
body.index .products__more {
  position: absolute;
  left: min(100vw * 1125 / 2000, 1125px);
  top: min(100vw * 6 / 2000, 6px);
}
body.index .products__more .c-more__arrow img {
  width: min(100vw * 173 / 2000, 173px);
}
body.index .products {
  /* 見出し下の横区切り線 */
}
body.index .products__head::after {
  content: "";
  position: absolute;
  left: 0;
  top: min(100vw * 136 / 2000, 136px);
  width: min(100vw * 1475 / 2000, 1475px);
  height: min(100vw * 6 / 2000, 6px);
  background: url(../img/top/zs-products-divider.webp) center/100% 100% no-repeat;
}
body.index .products {
  /* カードグリッド（3カラム） */
}
body.index .products__list {
  position: absolute;
  left: 0;
  top: min(100vw * 204 / 2000, 204px);
  width: min(100vw * 1475 / 2000, 1475px);
  list-style: none;
  margin: 0;
  padding: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  gap: min(100vw * 16 / 2000, 16px);
}
body.index .products__list {
  /* SP：1カラム縦並び（CEO 指示 2026-05-31）。xl(45%) が後勝ちするため item 幅はリスト配下で詳細度を上げて勝たせる */
}
body.index .products__item {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: min(100vw * 481 / 2000, 481px);
}

/* 施工事例カード */
.p-card {
  display: block;
  text-decoration: none;
  /* 四方均等の薄い影（下方向のみ→上下左右を均等に・CEO 指示 2026-05-30） */
  -webkit-box-shadow: 0 0 min(100vw * 24 / 2000, 24px) rgba(0, 17, 87, 0.13);
          box-shadow: 0 0 min(100vw * 24 / 2000, 24px) rgba(0, 17, 87, 0.13);
}
.p-card__photo {
  display: block;
  width: 100%;
  height: min(100vw * 326 / 2000, 326px);
  overflow: hidden;
}
.p-card__photo img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  -webkit-transition: -webkit-transform 0.4s ease;
  transition: -webkit-transform 0.4s ease;
  transition: transform 0.4s ease;
  transition: transform 0.4s ease, -webkit-transform 0.4s ease;
}
.p-card__title {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start; /* CEO 指示 2026-05-30：Y中央→上揃え */
  min-height: min(100vw * 145 / 2000, 145px);
  padding: min(100vw * 25 / 2000, 25px) min(100vw * 27 / 2000, 27px) min(100vw * 15 / 2000, 15px); /* CEO 指示 2026-05-30：上25・左右27・下15 */
  background: white; /* プレート画像の下方向のみ影を撤去し、四方均等の CSS 影へ統一（CEO 指示 2026-05-30） */
  font-family: "Noto Sans JP", "YuGothic", "游ゴシック", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;
  font-weight: 400;
  font-size: clamp(13px, 100vw * 25 / 2000, 25px);
  letter-spacing: 0.14em;
  color: #001157;
  line-height: 1.2;
}

/* =====================================================
# news（お知らせ / Figma 5:114 準拠・2000×857）
===================================================== */
body.index .news {
  position: relative;
  width: 100%;
  height: min(100vw * 857 / 2000, 857px);
}
body.index .news__inner {
  position: absolute;
  left: min(100vw * 336 / 2000, 336px);
  top: min(100vw * 173 / 2000, 173px);
  width: min(100vw * 1330 / 2000, 1330px);
  z-index: 2;
}
body.index .news__head {
  position: relative;
  height: min(100vw * 142 / 2000, 142px);
}
body.index .news__head {
  /* 見出し下の横区切り線 */
}
body.index .news__head::after {
  content: "";
  position: absolute;
  left: 0;
  top: min(100vw * 136 / 2000, 136px);
  width: min(100vw * 1330 / 2000, 1330px);
  height: min(100vw * 6 / 2000, 6px);
  background: url(../img/top/zs-news-1.webp) center/100% 100% no-repeat;
}
body.index .news__head-title {
  position: relative;
  padding-left: min(100vw * 33 / 2000, 33px);
}
body.index .news__sub {
  position: absolute;
  left: min(100vw * 33 / 2000, 33px);
  top: 0;
  font-family: "Noto Sans JP", "YuGothic", "游ゴシック", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;
  font-weight: 400;
  font-size: clamp(13px, 100vw * 20 / 2000, 20px);
  letter-spacing: 0.14em;
  color: #00a9eb;
  line-height: 1.2;
}
body.index .news__en {
  position: absolute;
  left: min(100vw * 33 / 2000, 33px);
  /* CEO 2026-05-30：sub との間隔を Figma 通りに（line-height:1.0 の half-leading 欠損 +23px。18→41） */
  top: min(100vw * 41 / 2000, 41px);
  margin: 0;
  font-family: "Besley", "Times New Roman", "YuMincho", serif;
  font-weight: 600;
  font-size: clamp(13px, 100vw * 70 / 2000, 70px);
  letter-spacing: 0.03em;
  color: #001157;
  line-height: 1;
}
body.index .news__en { /* CEO 指示 2026-05-31：SP英字タイトルが小さい→svw(767基準)で適正化（xl は tvw=1199基準で小さく出ていた）*/ }
body.index .news {
  /* 記事リスト（3行） */
}
body.index .news__list {
  position: absolute;
  left: min(100vw * 33 / 2000, 33px);
  top: min(100vw * 207 / 2000, 207px);
  width: min(100vw * 1117 / 2000, 1117px);
  list-style: none;
  margin: 0;
  padding: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: min(100vw * 52 / 2000, 52px);
}
body.index .news__item {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
}
body.index .news__meta {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: min(100vw * 316 / 2000, 316px);
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  gap: min(100vw * 55 / 2000, 55px);
  padding-top: min(100vw * 8 / 2000, 8px);
}
body.index .news__date {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: clamp(13px, 100vw * 20 / 2000, 20px);
  letter-spacing: 0.14em;
  color: #000;
  white-space: nowrap;
}
body.index .news__cat {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: clamp(13px, 100vw * 20 / 2000, 20px);
  letter-spacing: 0.14em;
  color: #dd6565;
  white-space: nowrap;
}
body.index .news__title {
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  font-family: "Noto Sans JP", "YuGothic", "游ゴシック", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;
  font-weight: 700;
  font-size: clamp(13px, 100vw * 25 / 2000, 25px);
  line-height: 1.6;
  letter-spacing: 0.14em;
  color: #000;
  text-decoration: none;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  -webkit-transition: color 0.3s ease;
  transition: color 0.3s ease;
}

/* =====================================================
# Business（事業内容）— クラシカル × ドレッシー（company と統一）
# 濃紺 × アイボリー紙地 × アンティークゴールドの細罫／明朝＋セリフ英字（Besley）
# 写真は金細枠＋濃紺シャドウで「正式書類」のような格調。番号はセリフ大字。
===================================================== */
body.business {
  background-color: #fcfaf4;
  /* ── セクション共通（company と同一） ── */
}
body.business .business-section {
  position: relative;
  padding: clamp(56px, min(6.2992125984vw, 120px), 120px) calc(20 * var(--to-rem));
}
body.business .business-section--ivory {
  background-color: #f7f3ea;
}
body.business .business-section--paper {
  background-color: #fcfaf4;
}
body.business .business-section--navy {
  background-color: #001157;
  border-top: 1px solid rgba(203, 176, 121, 0.45);
  border-bottom: 1px solid rgba(203, 176, 121, 0.45);
}
body.business .business-section__inner {
  max-width: calc(1000 * var(--to-rem));
  margin-inline: auto;
}
body.business {
  /* ── 見出し（EN セリフ＋金罫＋中央の菱形オーナメント・company と同一） ── */
}
body.business .business-heading {
  text-align: center;
  margin-bottom: clamp(36px, min(3.3595800525vw, 64px), 64px);
}
body.business .business-heading__en {
  display: block;
  font-family: "Besley", "Times New Roman", "YuMincho", serif;
  font-weight: 500;
  font-size: clamp(13px, min(1.0498687664vw, 20px), 20px);
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  text-transform: uppercase;
  color: #b0935a;
  line-height: 1;
  margin-bottom: calc(16 * var(--to-rem));
}
body.business .business-heading__en { /* CEO 指示 2026-05-31：SP英字タイトルが小さい→svw基準で適正化（vw=1905基準で13px張り付きだった）*/ }
body.business .business-heading__ja {
  position: relative;
  display: inline-block;
  margin: 0;
  font-family: "Noto Serif JP", "YuMincho", "游明朝", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif;
  font-weight: 600;
  font-size: clamp(22px, min(1.9947506562vw, 38px), 38px);
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  color: #001157;
  line-height: 1.2;
  padding-bottom: calc(24 * var(--to-rem));
}
body.business .business-heading__ja::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(7 * var(--to-rem));
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: calc(130 * var(--to-rem));
  height: 1px;
  background: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(20%, #b0935a), color-stop(80%, #b0935a), to(transparent));
  background: linear-gradient(90deg, transparent, #b0935a 20%, #b0935a 80%, transparent);
}
body.business .business-heading__ja::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(2 * var(--to-rem));
  -webkit-transform: translateX(-50%) rotate(45deg);
          transform: translateX(-50%) rotate(45deg);
  width: calc(9 * var(--to-rem));
  height: calc(9 * var(--to-rem));
  background-color: #b0935a;
}
body.business .business-heading--light .business-heading__en {
  color: #cbb079;
}
body.business .business-heading--light .business-heading__ja {
  color: #fff;
}
body.business .business-heading--light .business-heading__ja::before {
  background: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(20%, #cbb079), color-stop(80%, #cbb079), to(transparent));
  background: linear-gradient(90deg, transparent, #cbb079 20%, #cbb079 80%, transparent);
}
body.business .business-heading--light .business-heading__ja::after {
  background-color: #cbb079;
}
body.business {
  /* ── 総合建設業（リード文・中央寄せの明朝） ── */
}
body.business .business-lead__text {
  max-width: calc(945 * var(--to-rem));
  margin-inline: auto;
  font-family: "Noto Serif JP", "YuMincho", "游明朝", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif;
  font-weight: 400;
  font-size: clamp(14px, min(0.9973753281vw, 19px), 19px);
  line-height: 2.4;
  letter-spacing: 0.08em;
  color: #2c2a26;
  text-align: center;
}
body.business {
  /* ── 事業項目（写真＋本文の左右組み・番号付き見出し） ── */
}
body.business .business-item__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  gap: clamp(32px, min(3.3595800525vw, 64px), 64px);
}
body.business .business-item {
  /* reverse：本文を左・写真を右に */
}
body.business .business-item--reverse .business-item__media {
  -webkit-box-ordinal-group: 3;
  -webkit-order: 2;
      -ms-flex-order: 2;
          order: 2;
}
body.business .business-item--reverse .business-item__body {
  -webkit-box-ordinal-group: 2;
  -webkit-order: 1;
      -ms-flex-order: 1;
          order: 1;
}
body.business .business-item--reverse {
  /* reverse は sub 無しの単写真。main を media 列の右端（= inner 右端）へ寄せる */
}
body.business .business-item--reverse .business-item__photo--main {
  margin-left: auto;
  margin-right: 0;
}
body.business .business-item {
  /* ── 写真（金細枠＋濃紺シャドウ。2枚は斜めにずらして重ねる＝ワイヤー準拠） ──
     main を media 枠いっぱい（= inner 右端まで）に広げ、sub を左下へ重ねる。
     media を相対基準にし、sub を absolute で左下へオフセット。 */
}
body.business .business-item__media {
  position: relative;
}
body.business .business-item {
  /* sub のある足場セクション（非reverse）だけ sub の食い込み代を下に確保。
     sub の無い資材レンタル（reverse）は padding 無し＝本文と Y 中央で揃う */
}
body.business .business-item:not(.business-item--reverse) .business-item__media {
  padding-bottom: 24%;
}
body.business .business-item:not(.business-item--reverse) .business-item__media {
  /* 足場の main だけ小さく＋右揃え（資材レンタルの main 100% とはリンクさせない）。
     CEO 指示 2026-05-30 */
}
body.business .business-item:not(.business-item--reverse) .business-item__media .business-item__photo--main {
  width: 80%;
  margin-left: auto;
  margin-right: 0;
  /* CEO 指示 2026-05-31：足場の main は SP も少し小さく(80%)＋右揃え。資材レンタル(reverse)は対象外 */
}
body.business .business-item__photo {
  display: block;
  background-color: #fff;
  padding: calc(6 * var(--to-rem));
  border: 1px solid rgba(176, 147, 90, 0.6);
  -webkit-box-shadow: 0 calc(16 * var(--to-rem)) calc(40 * var(--to-rem)) rgba(0, 17, 87, 0.16);
          box-shadow: 0 calc(16 * var(--to-rem)) calc(40 * var(--to-rem)) rgba(0, 17, 87, 0.16);
}
body.business .business-item__photo img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  aspect-ratio: 3/2;
}
body.business .business-item__photo {
  /* main：媒体枠いっぱい（資材レンタル等の単写真はこの 100% を使う） */
}
body.business .business-item__photo--main {
  position: relative;
  z-index: 1;
  width: 100%;
}
body.business .business-item__photo {
  /* sub：左下に斜めずらしで重ねる（main の左端より外へ少し出す） */
}
body.business .business-item__photo--sub {
  position: absolute;
  z-index: 2;
  left: calc(-12 * var(--to-rem));
  bottom: 0;
  width: 54%;
}
body.business .business-item {
  /* ── 本文 ── */
}
body.business .business-item__title {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
  -webkit-align-items: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  gap: calc(16 * var(--to-rem));
  margin: 0 0 clamp(20px, min(1.5748031496vw, 30px), 30px);
  padding-bottom: calc(18 * var(--to-rem));
  border-bottom: 1px solid rgba(176, 147, 90, 0.5);
}
body.business .business-item__num {
  font-family: "Besley", "Times New Roman", "YuMincho", serif;
  font-size: clamp(34px, min(2.9396325459vw, 56px), 56px);
  font-weight: 600;
  line-height: 1;
  color: #b0935a;
}
body.business .business-item__name {
  font-family: "Noto Serif JP", "YuMincho", "游明朝", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif;
  font-size: clamp(19px, min(1.469816273vw, 28px), 28px);
  font-weight: 600;
  letter-spacing: 0.12em;
  color: #001157;
  line-height: 1.4;
}
body.business .business-item__text {
  margin: 0;
  font-family: "Noto Sans JP", "YuGothic", "游ゴシック", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif; /* CEO 指示 2026-05-30：本文は読みやすいゴシック体に */
  font-weight: 400;
  font-size: clamp(14px, min(0.8923884514vw, 17px), 17px);
  line-height: 2.2;
  letter-spacing: 0.06em;
  color: #2c2a26;
  text-align: justify; /* EZルール（CEO 指示 2026-05-30）：下層ページの本文は両端揃え */
}
body.business {
  /* ── その他（濃紺地・工事業の羅列） ── */
  /* ── その他（白[紙]地・工事業の羅列。背景白化に合わせ文字を濃色＋金罫枠で上品に） ── */
}
body.business .business-other__text {
  max-width: calc(880 * var(--to-rem));
  margin-inline: auto;
  padding: clamp(28px, min(2.3097112861vw, 44px), 44px) clamp(20px, min(2.5196850394vw, 48px), 48px);
  font-family: "Noto Sans JP", "YuGothic", "游ゴシック", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;
  font-weight: 400;
  font-size: clamp(14px, min(0.8923884514vw, 17px), 17px);
  line-height: 2.4;
  letter-spacing: 0.08em;
  color: #2c2a26;
  text-align: justify; /* CEO 指示 2026-05-31：本文を両端揃え（justify）に */
  /* 白地で間延びしないよう金ヘアラインの囲み罫＋淡い紙地 */
  background-color: #f7f3ea;
  border: 1px solid rgba(176, 147, 90, 0.4);
}

/* =====================================================
# Company（会社概要）— クラシカル × ドレッシー（格調・上品・古典的）
# 濃紺 × アイボリー紙地 × アンティークゴールドの細罫／明朝＋セリフ英字（Besley）
# 左右対称・余白広め・letter-spacing 広めで「正式書類」のような佇まい。
===================================================== */
body.company {
  background-color: #fcfaf4;
  /* ── セクション共通 ── */
}
body.company .company-section {
  position: relative;
  padding: clamp(56px, min(6.2992125984vw, 120px), 120px) calc(20 * var(--to-rem));
}
body.company .company-section--ivory {
  background-color: #f7f3ea;
}
body.company .company-section--paper {
  background-color: #fcfaf4;
}
body.company .company-section--navy {
  background-color: #001157;
  /* 濃紺地の上下にゴールドのヘアラインを敷いてドレッシーに */
  border-top: 1px solid rgba(203, 176, 121, 0.45);
  border-bottom: 1px solid rgba(203, 176, 121, 0.45);
}
body.company .company-section__inner {
  max-width: calc(1000 * var(--to-rem));
  margin-inline: auto;
}
body.company {
  /* ── 見出し（EN セリフ＋金罫＋中央の菱形オーナメント） ── */
}
body.company .company-heading {
  text-align: center;
  margin-bottom: clamp(36px, min(3.3595800525vw, 64px), 64px);
}
body.company .company-heading__en {
  display: block;
  font-family: "Besley", "Times New Roman", "YuMincho", serif;
  font-weight: 500;
  font-size: clamp(13px, min(1.0498687664vw, 20px), 20px);
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  text-transform: uppercase;
  color: #b0935a;
  line-height: 1;
  margin-bottom: calc(16 * var(--to-rem));
}
body.company .company-heading__en { /* CEO 指示 2026-05-31：SP英字タイトルが小さい→svw基準で適正化（vw=1905基準で13px張り付きだった）*/ }
body.company .company-heading__ja {
  position: relative;
  display: inline-block;
  margin: 0;
  font-family: "Noto Serif JP", "YuMincho", "游明朝", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif;
  font-weight: 600;
  font-size: clamp(22px, min(1.9947506562vw, 38px), 38px);
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  color: #001157;
  line-height: 1.2;
  padding-bottom: calc(24 * var(--to-rem));
  /* 金のヘアライン（両端フェード） */
}
body.company .company-heading__ja::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(7 * var(--to-rem));
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: calc(130 * var(--to-rem));
  height: 1px;
  background: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(20%, #b0935a), color-stop(80%, #b0935a), to(transparent));
  background: linear-gradient(90deg, transparent, #b0935a 20%, #b0935a 80%, transparent);
}
body.company .company-heading__ja {
  /* 中央の菱形オーナメント */
}
body.company .company-heading__ja::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(2 * var(--to-rem));
  -webkit-transform: translateX(-50%) rotate(45deg);
          transform: translateX(-50%) rotate(45deg);
  width: calc(9 * var(--to-rem));
  height: calc(9 * var(--to-rem));
  background-color: #b0935a;
}
body.company .company-heading--light .company-heading__en {
  color: #cbb079;
}
body.company .company-heading--light .company-heading__ja {
  color: #fff;
}
body.company .company-heading--light .company-heading__ja::before {
  background: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(20%, #cbb079), color-stop(80%, #cbb079), to(transparent));
  background: linear-gradient(90deg, transparent, #cbb079 20%, #cbb079 80%, transparent);
}
body.company .company-heading--light .company-heading__ja::after {
  background-color: #cbb079;
}
body.company {
  /* ── ご挨拶 ── */
}
body.company .company-greeting__body {
  max-width: calc(945 * var(--to-rem)); /* CEO 指示 2026-05-30：挨拶文の折返し最適値 945 */
  margin-inline: auto;
}
body.company .company-greeting__text {
  margin: 0;
  font-family: "Noto Serif JP", "YuMincho", "游明朝", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif;
  font-weight: 400;
  font-size: clamp(14px, min(0.9973753281vw, 19px), 19px); /* CEO 指示 2026-05-30：17 → 19 */
  line-height: 2.4;
  letter-spacing: 0.08em;
  color: #2c2a26;
  text-align: center;
}
body.company .company-greeting__sign {
  margin: clamp(28px, min(2.4146981627vw, 46px), 46px) 0 0;
  text-align: right;
  font-family: "Noto Serif JP", "YuMincho", "游明朝", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif;
  color: #001157;
}
body.company .company-greeting__sign-role {
  font-size: clamp(12px, min(0.7349081365vw, 14px), 14px);
  letter-spacing: 0.16em;
  color: #6b665d;
  margin-right: calc(14 * var(--to-rem));
}
body.company .company-greeting__sign-name {
  font-size: clamp(16px, min(1.154855643vw, 22px), 22px);
  font-weight: 600;
  letter-spacing: 0.16em;
}
body.company {
  /* ── 表（正式書類風・金ヘアライン罫） ── */
}
body.company .company-table {
  width: 100%;
  max-width: calc(880 * var(--to-rem));
  margin-inline: auto;
  border-collapse: collapse;
  border-top: 2px solid rgba(0, 17, 87, 0.85);
  border-bottom: 2px solid rgba(0, 17, 87, 0.85);
}
body.company .company-table tr {
  border-bottom: 1px solid rgba(176, 147, 90, 0.45);
}
body.company .company-table tr:last-child {
  border-bottom: 0;
}
body.company .company-table th,
body.company .company-table td {
  padding: clamp(16px, min(1.3648293963vw, 26px), 26px) clamp(8px, min(1.0498687664vw, 20px), 20px);
  vertical-align: top;
  text-align: left;
  font-size: clamp(13px, min(0.8398950131vw, 16px), 16px);
  line-height: 1.95;
  letter-spacing: 0.06em;
}
body.company .company-table th {
  width: 28%;
  font-family: "Noto Serif JP", "YuMincho", "游明朝", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif;
  font-weight: 600;
  color: #001157;
  white-space: nowrap;
}
body.company .company-table td {
  font-family: "Noto Sans JP", "YuGothic", "游ゴシック", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;
  font-weight: 400;
  color: #2c2a26;
}
body.company .company-table__br {
  display: none;
}
body.company .company-table {
  /* 濃紺地（採用情報）用 */
}
body.company .company-table--light {
  border-top-color: rgba(203, 176, 121, 0.85);
  border-bottom-color: rgba(203, 176, 121, 0.85);
}
body.company .company-table--light tr {
  border-bottom-color: rgba(203, 176, 121, 0.32);
}
body.company .company-table--light th {
  color: #cbb079;
}
body.company .company-table--light td {
  color: #ece9e2;
}
body.company .company-table {
  /* SP：th/td を縦積みのブロックに */
}
body.company {
  /* ── 採用情報（画像バナー＋見出しオーバーレイ → 表） ── */
}
body.company .company-recruit {
  padding: 0;
  /* 画像バナー（濃紺オーバーレイで上品＝ドレッシーに沈める） */
}
body.company .company-recruit__banner {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-height: clamp(240px, min(20.9973753281vw, 400px), 400px);
  overflow: hidden;
}
body.company .company-recruit__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
body.company .company-recruit__bg img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
body.company .company-recruit__bg {
  /* 濃紺グラデのベール（古典的・文字可読性） */
}
body.company .company-recruit__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 17, 87, 0.58)), to(rgba(0, 17, 87, 0.82)));
  background: linear-gradient(180deg, rgba(0, 17, 87, 0.58) 0%, rgba(0, 17, 87, 0.82) 100%);
  opacity: 0.4; /* CEO 指示 2026-05-30：フィルターの透明度を 0.4 に */
}
body.company .company-recruit__heading {
  position: relative;
  z-index: 1;
  margin-bottom: 0;
}
body.company .company-recruit {
  /* 表エリア（濃紺地・上下に余白） */
}
body.company .company-recruit__body {
  padding: clamp(48px, min(4.4094488189vw, 84px), 84px) calc(20 * var(--to-rem)) clamp(56px, min(6.2992125984vw, 120px), 120px);
}
body.company {
  /* ── アクセスマップ ── */
}
body.company .company-map__frame {
  max-width: calc(880 * var(--to-rem));
  margin-inline: auto;
  padding: calc(8 * var(--to-rem));
  background-color: #fff;
  border: 1px solid rgba(176, 147, 90, 0.6);
  -webkit-box-shadow: 0 calc(16 * var(--to-rem)) calc(44 * var(--to-rem)) rgba(0, 17, 87, 0.12);
          box-shadow: 0 calc(16 * var(--to-rem)) calc(44 * var(--to-rem)) rgba(0, 17, 87, 0.12);
}
body.company .company-map__frame iframe {
  display: block;
  width: 100%;
  height: clamp(280px, min(23.0971128609vw, 440px), 440px);
  border: 0;
}
body.company .company-map__action {
  text-align: center;
  margin-top: clamp(28px, min(2.3097112861vw, 44px), 44px);
}
body.company .company-map__btn {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-width: calc(260 * var(--to-rem));
  padding: calc(17 * var(--to-rem)) calc(40 * var(--to-rem));
  font-family: "Noto Serif JP", "YuMincho", "游明朝", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif;
  font-size: clamp(13px, min(0.8398950131vw, 16px), 16px);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  color: #001157;
  text-decoration: none;
  background-color: transparent;
  border: 1px solid #b0935a;
  -webkit-transition: color 0.4s ease, background-color 0.4s ease, border-color 0.4s ease;
  transition: color 0.4s ease, background-color 0.4s ease, border-color 0.4s ease;
}

/* =====================================================
# Products（施工事例）— company と同じクラシカル × ドレッシー
# 濃紺 × アイボリー紙地 × アンティークゴールド。見出しは明朝＋セリフ英字、
# 本文・UIはゴシック。各アイテムに Swiper ギャラリー（メイン＋サムネ）。
===================================================== */
body.products {
  background-color: #fcfaf4;
}
body.products .products-page {
  padding: clamp(56px, min(5.7742782152vw, 110px), 110px) calc(20 * var(--to-rem)) clamp(64px, min(6.8241469816vw, 130px), 130px);
}
body.products .products-page__inner {
  max-width: calc(1120 * var(--to-rem));
  margin-inline: auto;
}
body.products {
  /* ── カテゴリ切替（a リンク・紺ボタン） ── */
}
body.products .products-cat {
  list-style: none;
  margin: 0 0 clamp(28px, min(2.5196850394vw, 48px), 48px);
  padding: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: calc(14 * var(--to-rem));
}
body.products .products-cat__link {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-width: calc(150 * var(--to-rem));
  padding: calc(13 * var(--to-rem)) calc(28 * var(--to-rem));
  font-family: "Noto Sans JP", "YuGothic", "游ゴシック", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;
  font-weight: 500;
  font-size: clamp(13px, min(0.8398950131vw, 16px), 16px);
  letter-spacing: 0.12em;
  text-decoration: none;
  color: #001157;
  background-color: #fff;
  border: 1px solid rgba(0, 17, 87, 0.4);
  -webkit-transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
  transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}
body.products .products-cat {
  /* 選択中カテゴリは紺塗り＋金の細枠（ドレッシー） */
}
body.products .products-cat__item.is-active .products-cat__link {
  background-color: #001157;
  border-color: #001157;
  color: #fff;
  -webkit-box-shadow: inset 0 0 0 1px rgba(203, 176, 121, 0.6);
          box-shadow: inset 0 0 0 1px rgba(203, 176, 121, 0.6);
}
body.products {
  /* ── カテゴリータイトル（明朝＋金の下線） ── */
}
body.products .products-cat-title {
  position: relative;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 0 clamp(36px, min(2.9396325459vw, 56px), 56px);
  padding-bottom: calc(14 * var(--to-rem));
  font-family: "Noto Serif JP", "YuMincho", "游明朝", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif;
  font-weight: 600;
  font-size: clamp(20px, min(1.5748031496vw, 30px), 30px);
  letter-spacing: 0.14em;
  color: #001157;
  line-height: 1.3;
}
body.products .products-cat-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: -webkit-gradient(linear, left top, right top, from(#b0935a), to(rgba(176, 147, 90, 0.15)));
  background: linear-gradient(90deg, #b0935a 0%, rgba(176, 147, 90, 0.15) 100%);
}
body.products {
  /* ── 施工事例リスト ── */
}
body.products .products-list {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: clamp(48px, min(4.1994750656vw, 80px), 80px);
}
body.products .products-item {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  gap: clamp(28px, min(2.9396325459vw, 56px), 56px);
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
}
body.products .products-item__media {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 46%;
      -ms-flex: 0 0 46%;
          flex: 0 0 46%;
  width: 46%;
}
body.products .products-item__body {
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  padding-top: calc(6 * var(--to-rem));
}
body.products .products-item__title {
  margin: 0 0 calc(20 * var(--to-rem));
  padding-bottom: calc(16 * var(--to-rem));
  font-family: "Noto Serif JP", "YuMincho", "游明朝", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif;
  font-weight: 600;
  font-size: clamp(18px, min(1.3648293963vw, 26px), 26px);
  letter-spacing: 0.1em;
  color: #001157;
  line-height: 1.5;
  border-bottom: 1px solid rgba(176, 147, 90, 0.4);
}
body.products .products-item__desc {
  font-family: "Noto Sans JP", "YuGothic", "游ゴシック", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;
  font-weight: 400;
  font-size: clamp(13px, min(0.8398950131vw, 16px), 16px);
  letter-spacing: 0.04em;
  color: #2c2a26;
  text-align: justify; /* EZルール（CEO 指示 2026-05-30）：下層ページの本文は両端揃え */
}
body.products .products-item__desc p {
  margin: 0;
  line-height: 2;
}
body.products .products-item__desc p + p {
  margin-top: calc(14 * var(--to-rem));
}
body.products .products-item__desc {
  /* テキスト未入力時は詰めて表示（空なら高さを持たない） */
}
body.products .products-item__desc:empty {
  display: none;
}
body.products {
  /* ── メインスライダー（Swiper） ── */
}
body.products .products-slider {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
  background-color: #e9e1cf;
}
body.products .products-slider .swiper-wrapper {
  height: 100%;
}
body.products .products-slider .swiper-slide {
  height: 100%;
}
body.products .products-slider {
  /* photo-ofi（EZ-programrule#catalog 準拠）: どの縦横比でも全体表示・余白はアイボリー */
}
body.products .products-slider__pic {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
}
body.products .products-slider__img {
  width: 100%;
  height: 100%;
  -o-object-fit: scale-down;
     object-fit: scale-down;
  font-family: "object-fit: scale-down;"; /* ofi ポリフィル用（IE11） */
  display: block;
  cursor: -webkit-zoom-in;
  cursor: zoom-in;
}
body.products {
  /* 前後ボタン（金の丸・ドレッシー） */
}
body.products .products-next,
body.products .products-prev {
  width: calc(44 * var(--to-rem));
  height: calc(44 * var(--to-rem));
  margin-top: calc(calc(44 * var(--to-rem)) / -2);
  background-color: rgba(0, 17, 87, 0.78);
  border: 1px solid rgba(203, 176, 121, 0.7);
  border-radius: 50%;
  -webkit-transition: background-color 0.3s ease;
  transition: background-color 0.3s ease;
}
body.products .products-next::after,
body.products .products-prev::after {
  font-size: calc(15 * var(--to-rem));
  color: #cbb079;
  font-weight: 700;
}
body.products .products-prev {
  left: calc(12 * var(--to-rem));
}
body.products .products-next {
  right: calc(12 * var(--to-rem));
}
body.products {
  /* ── サムネイルスライダー（5枚/ページ） ── */
}
body.products .products-thumbs {
  margin-top: calc(10 * var(--to-rem));
}
body.products .products-thumbs .swiper-slide {
  cursor: pointer;
}
body.products .products-thumbs .products-thumb {
  aspect-ratio: 4/3;
  overflow: hidden;
  opacity: 0.55;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
  background-color: #e9e1cf; /* photo-ofi の余白色 */
  /* photo-ofi（EZ-programrule#catalog 準拠）: サムネも全体表示・トリミングしない */
}
body.products .products-thumbs .products-thumb .photo-ofi {
  display: block;
  width: 100%;
  height: 100%;
}
body.products .products-thumbs .products-thumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: scale-down;
     object-fit: scale-down;
  font-family: "object-fit: scale-down;"; /* ofi ポリフィル用（IE11） */
  display: block;
}
body.products .products-thumbs .products-thumb.swiper-slide-thumb-active {
  opacity: 1;
}
body.products {
  /* ── ページネーション（EZ-codingrule 規定 HTML をクラシカルに装飾） ── */
}
body.products .products-paging {
  margin-top: clamp(48px, min(4.1994750656vw, 80px), 80px);
  text-align: center;
}
body.products .paging {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  gap: calc(8 * var(--to-rem));
}
body.products .paging .paging-text {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  min-width: calc(44 * var(--to-rem));
  height: calc(44 * var(--to-rem));
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 0 calc(8 * var(--to-rem));
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: calc(15 * var(--to-rem));
  letter-spacing: 0.06em;
  color: #001157;
  border: 1px solid rgba(0, 17, 87, 0.3);
  background-color: #fff;
}
body.products .paging .paging-text a {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  height: 100%;
  color: inherit;
  text-decoration: none;
}
body.products .paging .current.paging-text {
  color: #fff;
  background-color: #001157;
  border-color: #001157;
  -webkit-box-shadow: inset 0 0 0 1px rgba(203, 176, 121, 0.6);
          box-shadow: inset 0 0 0 1px rgba(203, 176, 121, 0.6);
}
body.products {
  /* ── 画像拡大モーダル ── */
}
body.products .products-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: calc(40 * var(--to-rem));
  background-color: rgba(0, 7, 20, 0.9);
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity 0.3s ease, visibility 0.3s ease;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
body.products .products-modal.is-open {
  opacity: 1;
  visibility: visible;
}
body.products .products-modal__inner {
  max-width: calc(1100 * var(--to-rem));
  max-height: 86vh;
  border: 1px solid rgba(203, 176, 121, 0.6);
}
body.products .products-modal__img {
  display: block;
  max-width: 100%;
  max-height: 86vh;
  width: auto;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
}
body.products .products-modal__close {
  position: absolute;
  top: calc(24 * var(--to-rem));
  right: calc(28 * var(--to-rem));
  width: calc(40 * var(--to-rem));
  height: calc(40 * var(--to-rem));
  background: none;
  border: 0;
  cursor: pointer;
}
body.products .products-modal__close span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(30 * var(--to-rem));
  height: 1px;
  background-color: #cbb079;
}
body.products .products-modal__close span:nth-child(1) {
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
          transform: translate(-50%, -50%) rotate(45deg);
}
body.products .products-modal__close span:nth-child(2) {
  -webkit-transform: translate(-50%, -50%) rotate(-45deg);
          transform: translate(-50%, -50%) rotate(-45deg);
}

/* =====================================================
# Contact Page
===================================================== */
body.contact {
  /* ---------- ラベル ---------- */
}
body.contact .label {
  display: inline-block;
  background-color: #b70005;
  color: #fff;
  font-size: 13px;
  text-align: center;
  width: 45px;
  height: calc(28 * var(--to-rem));
  line-height: calc(28 * var(--to-rem));
}
body.contact {
  /* ---------- 電話・FAX 背景セクション ---------- */
}
body.contact .contact-intro {
  background-color: #e1ebf1;
  padding-block: calc(90 * var(--to-rem));
}
body.contact .contact__inner {
  max-width: calc(1000 * var(--to-rem) + 15 * var(--to-rem) * 2);
  margin-inline: auto;
  padding-inline: calc(15 * var(--to-rem));
}
body.contact .tel-fax__content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(20 * var(--to-rem));
}
body.contact .tel-fax__box {
  position: relative;
  width: 100%;
  margin-inline: auto;
  text-align: center;
  /* tel-fax__box / is-fax を grid で独立カード化（gap 20）。
     CEO 指示 2026-05-30：mv-h2 と同様の枠線（外枠＋内側二重罫線）を内側に入れる */
  background-color: #001157;
  border: 1px solid rgba(0, 169, 235, 0.55); /* mv-h2 と同じ水色細枠 */
  padding: 40px 15px;
  /* mv-h2 と同様の内側二重罫線（リッチ装飾） */
}
body.contact .tel-fax__box::before {
  content: "";
  position: absolute;
  inset: clamp(6px, min(0.4199475066vw, 8px), 8px);
  border: 1px solid rgba(0, 169, 235, 0.32);
  pointer-events: none;
}
body.contact .tel-fax__hours {
  margin-top: calc(10 * var(--to-rem));
  color: #fff;
  font-size: calc(14 * var(--to-rem));
}
body.contact .tel-fax .tel-number {
  display: inline-block;
  font-size: 40px;
  font-weight: bold;
  padding-left: 6px;
  color: white;
  white-space: nowrap; /* CEO 指示 2026-05-30：番号を1行に固定（折り返し防止） */
}
body.contact .tel-fax .tel-number {
  /* SP(375px)の font-size は mqpacker の md→xl 出力順で xl(35px) が md(25px) を
     後勝ち上書きするため、&.tel-number で詳細度を上げて 25px を確実に適用し1行に収める
     （mqpacker 無効化は FV 崩壊のため不可・2026-05-30 CEO 指示） */
}
body.contact .tel-fax .tel-number::before {
  content: "";
  display: inline-block;
  width: 35px;
  height: 35px;
  background: url(../img/common/tel-icon-wt.webp) center center/contain no-repeat;
  vertical-align: -3px;
  margin-right: 10px;
}
body.contact .tel-fax .is-fax .tel-number::before {
  width: 45px;
  height: 45px;
  vertical-align: -8px;
  background: url(../img/common/fax_24.webp) center center/contain no-repeat;
}
body.contact .tel-fax__title {
  font-size: calc(24 * var(--to-rem));
  font-weight: 500;
  color: #fff;
  font-family: "Noto Serif JP", "YuMincho", "游明朝", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif; /* CEO 指示 2026-05-31：company-heading__ja と同じ明朝に */
}
body.contact .tel-fax__title .large {
  font-size: calc(27 * var(--to-rem));
  font-weight: 600;
  color: #f15b5b; /* CEO 指示 2026-05-31：濃紺カード背景($color_main)上で深紅#b70005が沈み視認性が悪いため、目に優しい明るめの赤へ（コントラスト約5.6:1。$color_accentは共通アクセント色のため変更せず.largeのみ局所変更）*/
  margin-right: calc(5 * var(--to-rem));
}
body.contact {
  /* ---------- メールフォーム ---------- */
}
body.contact .mail-form {
  background-color: #fff;
  padding-block: 100px;
  letter-spacing: 0;
}
body.contact .mail-form__inner {
  max-width: 1100px;
  padding-inline: calc(15 * var(--to-rem));
  margin-inline: auto;
}
body.contact .mail-form ::-webkit-input-placeholder {
  color: #aaa;
}
body.contact .mail-form ::-moz-placeholder {
  color: #aaa;
}
body.contact .mail-form :-ms-input-placeholder {
  color: #aaa;
}
body.contact .mail-form ::-ms-input-placeholder {
  color: #aaa;
}
body.contact .mail-form ::placeholder {
  color: #aaa;
}
body.contact .mail-form__title {
  display: block;
  text-align: center;
  margin-inline: auto;
  font-size: calc(30 * var(--to-rem));
  font-weight: 900; /* CEO 指示 2026-05-31：更に太く（Noto Serif JP 900 を読込追加） */
  letter-spacing: 0.1em;
  line-height: 1.1;
  font-family: "Noto Serif JP", "YuMincho", "游明朝", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif; /* CEO 指示 2026-05-31：company-heading__ja と同じ明朝に */
  color: #001157;
}
body.contact .mail-form__text {
  margin-top: calc(50 * var(--to-rem));
  text-align: justify; /* EZルール（CEO 指示 2026-05-30）：下層ページの本文は両端揃え */
}
body.contact .mail-form__text > p {
  line-height: 2;
}
body.contact .mail-form .form-p {
  display: inline-block;
}
body.contact .mail-form .form-input {
  border: 1px solid #aaa;
  padding: 5px 10px;
  width: 100%;
}
body.contact .mail-form .form-input--shortbox {
  max-width: calc(220 * var(--to-rem));
}
body.contact .mail-form .horizontal-table {
  margin-top: calc(30 * var(--to-rem));
}
body.contact .mail-form .horizontal-table table {
  width: 100%;
}
body.contact .mail-form .horizontal-table th {
  width: 27%;
  padding: 20px;
  background-color: rgba(225, 235, 241, 0.5);
  border-bottom: 1px solid #ccc;
  border-left: 1px solid #ccc;
  font-weight: bold;
  vertical-align: middle;
  text-align: left;
}
body.contact .mail-form .horizontal-table th .required {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
body.contact .mail-form .horizontal-table th:first-child {
  border-top: 1px solid #ccc;
}
body.contact .mail-form .horizontal-table th:last-child {
  border-right-width: 0;
}
body.contact .mail-form .horizontal-table td {
  padding: 10px 20px;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  vertical-align: middle;
}
body.contact .mail-form .horizontal-table td:first-of-type {
  border-top: 1px solid #ccc;
}
body.contact .mail-form .privacy-policy {
  font-size: calc(20 * var(--to-rem));
  font-weight: 500;
  margin-block: 30px;
  text-align: center;
  font-family: "Noto Sans JP", "YuGothic", "游ゴシック", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;
  color: #001157;
}
body.contact .mail-form .box-scroll {
  width: 100%;
  height: 240px;
  padding: 20px;
  border: 1px solid #ddd;
  overflow: hidden;
  overflow-y: scroll;
  margin-bottom: 30px;
  background-color: #fff;
  text-align: justify; /* EZルール（CEO 指示 2026-05-30）：下層ページの本文は両端揃え */
}
body.contact .mail-form .box-scroll__title {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
  border-left: 8px solid #0e0d0d;
  margin-bottom: 8px;
  padding-left: 8px;
}
body.contact .mail-form .box-scroll__li {
  text-indent: -25px;
  padding-left: 25px;
  letter-spacing: 0;
  margin-bottom: 7px;
}
body.contact .mail-form .privacy-wrapper {
  text-align: center;
}
body.contact .mail-form .privacy__title {
  font-weight: 600;
  border-bottom: 1px solid #666;
  padding-bottom: 5px;
  margin-bottom: 10px;
}
body.contact .mail-form .privacy__address {
  text-indent: -43px;
  padding-left: 43px;
}
body.contact .mail-form .privacy__link {
  color: blue;
  text-decoration: underline;
}
body.contact .mail-form .privacy-btn {
  display: inline-block;
  background-color: #001157;
  color: #fff;
  padding: 15px 10px;
  width: 350px;
}
body.contact .mail-form .privacy-btn__wrapper {
  text-align: center;
  margin-top: 60px;
  margin-bottom: 30px;
}
body.contact .mail-form .send-btn__wrapper {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: 30px;
  margin-bottom: 30px;
}
body.contact .mail-form .send-btn {
  display: inline-block;
  background-color: #001157;
  color: #fff;
  border: 2px solid transparent;
  padding: 15px;
  text-align: center;
  width: 320px;
}
body.contact .mail-form .send-btn--back {
  margin-right: 100px;
  color: #001157;
  background-color: #fff;
  border: 2px solid #001157;
}
body.contact .mail-form {
  /* ラジオボタン・チェックボックス */
}
body.contact .mail-form input[type=radio],
body.contact .mail-form input[type=checkbox] {
  opacity: 0;
  position: absolute;
}
body.contact .mail-form input[type=radio]:focus + span,
body.contact .mail-form input[type=checkbox]:focus + span {
  outline: 1px solid #ccc;
}
body.contact .mail-form input[type=radio] + span,
body.contact .mail-form input[type=checkbox] + span {
  display: inline-block;
  position: relative;
  margin: 0 2em 0 0;
  padding: 0.3em 0.3em 0.3em 2em;
  line-height: 1;
  vertical-align: middle;
  cursor: pointer;
}
body.contact .mail-form input[type=checkbox] + span:before {
  position: absolute;
  top: 0.2em;
  left: 0;
  content: "";
  width: 1.25em;
  height: 1.25em;
  border: 1px solid #999;
  background: #fff;
  line-height: 1;
  vertical-align: middle;
}
body.contact .mail-form input[type=checkbox] + span:after {
  content: "";
  display: none;
}
body.contact .mail-form input[type=checkbox]:checked + span:after {
  display: block;
  position: absolute;
  top: 0.3em;
  left: 0.4em;
  width: 0.5em;
  height: 1em;
  content: "";
  border-bottom: 3px solid #b70005;
  border-right: 3px solid #b70005;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
body.contact .mail-form {
  /* セレクトボックス */
}
body.contact .mail-form select {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  display: block;
  width: 100%;
  padding: 5px 30px 5px 10px;
  border-radius: 4px;
  border: 1px solid #ccc;
  background-color: #fff;
}
body.contact .mail-form .selectWrap {
  position: relative;
  display: block;
  width: 30%;
}
body.contact .mail-form .selectWrap::after {
  position: absolute;
  right: 10px;
  top: 0;
  bottom: 0;
  margin: auto;
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-right: 2px solid #999;
  border-bottom: 2px solid #999;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  pointer-events: none;
}
body.contact .mail-form {
  /* テキストエリア */
}
body.contact .mail-form textarea {
  resize: none;
}

/* FLOCSS
----------------------------------------------------- */
/* FLOCSS
----------------------------------------------------- */
/*! destyle.css v2.0.2 | MIT License | https://github.com/nicolas-cusan/destyle.css */
/* Reset box-model and set borders */
/* ============================================ */
*,
::before,
::after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border-style: solid;
  border-width: 0;
}

/* Document */
/* ============================================ */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 * 3. Remove gray overlay on links for iOS.
 */
html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -webkit-tap-highlight-color: transparent; /* 3*/
}

/* Sections */
/* ============================================ */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
  display: block;
}

/* Vertical rhythm */
/* ============================================ */
p,
table,
blockquote,
address,
pre,
iframe,
form,
figure,
dl {
  margin: 0;
}

/* Headings */
/* ============================================ */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  margin: 0;
}

/* Lists (enumeration) */
/* ============================================ */
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Lists (definition) */
/* ============================================ */
dt {
  font-weight: bold;
}

dd {
  margin-left: 0;
}

/* Grouping content */
/* ============================================ */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  -webkit-box-sizing: content-box;
          box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
  border-top-width: 1px;
  margin: 0;
  clear: both;
  color: inherit;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace; /* 1 */
  font-size: inherit; /* 2 */
}

address {
  font-style: inherit;
}

/* Text-level semantics */
/* ============================================ */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
  text-decoration: none;
  color: inherit;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  text-decoration: underline; /* 2 */
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: inherit; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content */
/* ============================================ */
/**
 * Prevent vertical alignment issues.
 */
img,
embed,
object,
iframe {
  vertical-align: bottom;
}

img {
  max-width: 100%;
}

/* Forms */
/* ============================================ */
/**
 * Reset form fields to make them styleable
 */
button,
input,
optgroup,
select,
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  vertical-align: middle;
  color: inherit;
  font: inherit;
  background: transparent;
  padding: 0;
  margin: 0;
  outline: 0;
  border-radius: 0;
  text-align: inherit;
}

/**
 * Reset radio and checkbox appearance to preserve their look in iOS.
 */
[type=checkbox] {
  -webkit-appearance: checkbox;
  -moz-appearance: checkbox;
       appearance: checkbox;
}

[type=radio] {
  -webkit-appearance: radio;
  -moz-appearance: radio;
       appearance: radio;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
  /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
  /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type=button],
[type=reset],
[type=submit] {
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
}

button[disabled],
[type=button][disabled],
[type=reset][disabled],
[type=submit][disabled] {
  cursor: default;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Remove arrow in IE10 & IE11
 */
select::-ms-expand {
  display: none;
}

/**
 * Remove padding
 */
option {
  padding: 0;
}

/**
 * Reset to invisible
 */
fieldset {
  margin: 0;
  padding: 0;
  min-width: 0;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the outline style in Safari.
 */
[type=search] {
  outline-offset: -2px; /* 1 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/**
 * Clickable labels
 */
label[for] {
  cursor: pointer;
}

/* Interactive */
/* ============================================ */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/*
 * Remove outline for editable content.
 */
[contenteditable] {
  outline: none;
}

/* Table */
/* ============================================ */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption {
  text-align: left;
}

td,
th {
  vertical-align: top;
  padding: 0;
}

th {
  text-align: left;
  font-weight: bold;
}

/* Misc */
/* ============================================ */
/**
 * Add the correct display in IE 10+.
 */
template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
  display: none;
}

:root {
  --to-rem: 0.0625rem;
}

main {
  overflow: hidden; /*横スクロールの発生を防止*/
  background-size: auto auto;
}

html {
  background-color: #fbf5ea;
}

body {
  max-width: 2000px;
  margin-inline: auto;
  font-size: calc(16 * var(--to-rem));
  font-family: "Noto Sans JP", "YuGothic", "游ゴシック", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.8px;
  color: #0e0d0d;
  background-color: white;
}

section > picture,
section picture {
  display: block;
  line-height: 0;
}

a {
  -webkit-transition: 0.25s;
  transition: 0.25s;
}

a:hover {
  text-decoration: none;
}

img {
  height: auto;
}

/* FLOCSS
----------------------------------------------------- */
.inner {
  padding-inline: 15px;
  max-width: calc(1200px + 30px);
  margin-inline: auto;
}

/* =====================================================
# Header（ゼロ・システム / Figma 21:163 準拠・2026-05-30 再実装）
# 透過オーバーレイ。ロゴ左 / nav 中央右（白） / CTA 2ボタン（濃紺Tel + 赤お問い合わせ）右端密着
# header native: x=102, h=212 / nav gap 36 / button h=117
#
# 設計基準幅 2000px（FV カンプ native 2000×889 と一致）。
# グローバルの vw() は $pcDesignSize=1905 基準で about 以降が依存するため変更せず、
# ヘッダー（FV オーバーレイ）専用に 2000 基準のリキッド関数 hvw() を定義して使う。
# FV キャッチコピーが calc(100vw*N/2000) を使っているのと分母を揃え、
# ロゴ・nav・ボタンが画面全幅でカンプ比率（x=102 / h=117 等）を保つようにする。
===================================================== */
.l-header {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 10;
  width: 100%;
  max-width: 2000px; /* CEO 指示 2026-05-30：ヘッダーを 2000px に収める（コンテンツ .main と同幅・中央寄せ） */
  margin-inline: auto;
}
.l-header__row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-flex-wrap: nowrap;
      -ms-flex-wrap: nowrap;
          flex-wrap: nowrap;
  width: 100%;
  /* CTA(Frame11) はカンプでフレーム最上端 y=0 に密着するため row 側に top padding を持たせず、
     ロゴと nav のみ個別に top=20 を取る。padding-left のみ row で共有（header x=102） */
  padding-left: min(100vw * 102 / 2000, 102px);
}
.l-header {
  /* ▼ ロゴエリア（ZERO system ロゴ画像 160×192）／カンプ top=20 */
}
.l-header__logo-area {
  margin: 0;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  padding-top: min(100vw * 20 / 2000, 20px);
}
.l-header__logo-area > a {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  text-decoration: none;
}
.l-header__logo-img {
  display: inline-block;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
}
.l-header__logo-img img {
  width: min(100vw * 160 / 2000, 160px);
  height: auto;
  display: block;
}
.l-header {
  /* ▼ ナビエリア（nav + CTA）。
     nav はカンプ top=20 / CTA(Frame11) はフレーム最上端 y=0 に密着するため
     align-items:flex-start のまま nav 側だけ top=20 を持たせ CTA は持たせない。
     nav と CTA の間隔はカンプ gap=64 */
}
.l-header__nav-area {
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  gap: min(100vw * 64 / 2000, 64px);
}
.l-header {
  /* ▼ ナビ（縦並び：日本語 + 英字サブ）／カンプ top=20（row との二重加算を排除） */
}
.l-header__nav {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  padding-top: min(100vw * 20 / 2000, 20px);
}
.l-header__nav-list {
  list-style: none;
  margin: 0;
  margin-top: min(100vw * 20 / 2000, 20px); /* ナビ位置を20px下げる（2026-05-30 CEO 指示） */
  padding: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: nowrap;
      -ms-flex-wrap: nowrap;
          flex-wrap: nowrap;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: min(100vw * 36 / 2000, 36px);
}
.l-header__nav-list li {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
}
.l-header__nav-link {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  gap: calc(3 * var(--to-rem));
  text-decoration: none;
  color: #f7fafb;
  font-family: "Noto Sans JP", "YuGothic", "游ゴシック", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;
  font-weight: 600; /* CEO 指示 2026-05-30：nav-link のフォントウェイトを 600 に */
  line-height: 1.2;
  white-space: nowrap;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}
.l-header__nav-link.is-active {
  color: #f4c95d; /* CEO 指示 2026-05-30：彩度控えめの黄（ゴールド）で視認性UP */
}
.l-header__nav-ja {
  font-size: min(100vw * 20 / 2000, 20px);
  font-weight: 600; /* CEO 指示 2026-05-30：nav-link を 600 に（子の 700 が親を上書きするため） */
  letter-spacing: 0.15em; /* 3 / 20 */
}
.l-header__nav-en {
  /* カンプ 10px。clamp(13px, …, 10px) は min>max のため 13px に固定されてしまうので
     2000 基準の hvw(10)（= min(100vw*10/2000, 10px)）で実際に 10px へ寄せる */
  font-size: min(100vw * 10 / 2000, 10px);
  font-weight: 600; /* CEO 指示 2026-05-30：nav-link を 600 に */
  letter-spacing: 0.05em;
  opacity: 0.95;
}
.l-header {
  /* ▼ CTA（Tel ボタン + お問い合わせボタン）右端密着・高さ 117
     カンプ Frame11 はフレーム最上端 y=0 に密着。nav-area が align-items:flex-start のため
     CTA は上端に揃い、上端オフセットを足さない（top=0） */
}
.l-header__cta {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
}
.l-header {
  /* ▼ 電話ボタン（濃紺・表示のみ／hover・リンクなし）。カンプ 218×117 */
}
.l-header__tel {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: min(100vw * 4 / 2000, 4px);
  width: min(100vw * 218 / 2000, 218px);
  height: min(100vw * 117 / 2000, 117px);
  background-color: #001157;
  padding-inline: min(100vw * 26 / 2000, 26px);
  text-align: center;
}
.l-header__tel-icon img {
  width: min(100vw * 37 / 2000, 37px);
  height: auto;
  display: block;
}
.l-header__tel-number {
  font-family: "Noto Sans JP", "YuGothic", "游ゴシック", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;
  font-weight: 600; /* CEO 指示 2026-05-30：700 → 600 */
  font-size: min(100vw * 20 / 2000, 20px);
  letter-spacing: 0.15em; /* 3 / 20 */
  color: white; /* カンプ番号グリフ実測 #ffffff（純白） */
  line-height: 1.2;
  white-space: nowrap; /* CEO 指示 2026-05-30：電話番号を1行に収める（折り返し防止） */
}
.l-header__tel-hours {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-weight: 600; /* CEO 指示 2026-05-30：700 → 600 */
  /* カンプ 10px。clamp(13px, …, 10px) は min>max で 13px 固定になるため hvw(10) で 10px へ寄せる */
  font-size: min(100vw * 10 / 2000, 10px);
  letter-spacing: 0.15em; /* 1.5 / 10 */
  color: white;
  line-height: 1.2;
}
.l-header {
  /* ▼ お問い合わせボタン（赤）。カンプ 216×117 */
}
.l-header__mail {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: min(100vw * 12 / 2000, 12px);
  width: min(100vw * 216 / 2000, 216px);
  height: min(100vw * 117 / 2000, 117px);
  background-color: #b70005;
  padding-inline: min(100vw * 34 / 2000, 34px);
  text-decoration: none;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}
.l-header__mail-icon img {
  width: min(100vw * 40 / 2000, 40px);
  height: auto;
  display: block;
}
.l-header__mail-text {
  font-family: "Noto Sans JP", "YuGothic", "游ゴシック", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;
  font-weight: 600; /* CEO 指示 2026-05-30：700 → 600 */
  font-size: min(100vw * 20 / 2000, 20px);
  letter-spacing: 0.15em; /* 3 / 20 */
  color: white;
  line-height: 1.2;
  white-space: nowrap;
}
.l-header {
  /* ▼ ハンバーガー（SP のみ表示） */
}
.l-header__hamburger {
  display: none;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: calc(40 * var(--to-rem));
  height: calc(40 * var(--to-rem));
  position: relative;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
}
.l-header__hamburger span {
  position: absolute;
  left: 50%;
  width: calc(38 * var(--to-rem)); /* CEO 指示 2026-05-30：28 → 38 */
  height: 3px; /* CEO 指示 2026-05-30：2 → 3 */
  background-color: #f4c95d; /* CEO 指示 2026-05-31：ナビアクティブと同じ黄色($color_active #f4c95d)に */
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  -webkit-transition: opacity 0.3s ease, -webkit-transform 0.3s ease;
  transition: opacity 0.3s ease, -webkit-transform 0.3s ease;
  transition: transform 0.3s ease, opacity 0.3s ease;
  transition: transform 0.3s ease, opacity 0.3s ease, -webkit-transform 0.3s ease;
}
.l-header__hamburger span:nth-child(1) {
  top: calc(12 * var(--to-rem));
}
.l-header__hamburger span:nth-child(2) {
  top: calc(19 * var(--to-rem));
}
.l-header__hamburger span:nth-child(3) {
  top: calc(26 * var(--to-rem));
}
.l-header__hamburger.is-checked span {
  background-color: #001157;
}
.l-header__hamburger.is-checked span:nth-child(1) {
  -webkit-transform: translate(-50%, calc(7 * var(--to-rem))) rotate(45deg);
          transform: translate(-50%, calc(7 * var(--to-rem))) rotate(45deg);
}
.l-header__hamburger.is-checked span:nth-child(2) {
  opacity: 0;
}
.l-header__hamburger.is-checked span:nth-child(3) {
  -webkit-transform: translate(-50%, calc(-7 * var(--to-rem))) rotate(-45deg);
          transform: translate(-50%, calc(-7 * var(--to-rem))) rotate(-45deg);
}

/* =====================================================
# 下層ページのヘッダー（CEO 指示 2026-05-30 改訂）
# 1) 背景色は撤去（透過）
# 2) 透過オーバーレイにして MV を最上部（top 0）に置く（CEO 指示「下層 MV の top を 0」）
# 3) 逆スクロール（上方向）時に固定表示。script.js が #header に .show を付与する
===================================================== */
body:not(.index) .l-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  margin-inline: auto;
  background-color: transparent; /* CEO 指示 2026-05-30：下層ヘッダーの背景色を撤去 */
}

/* CEO 指示 2026-05-30：下層は nav が MV 画像上に乗るため、視認性確保に
   全体的にボカシの効いた薄い黒影を付与（TOP は FV 上で別途調整済みのため対象外） */
body:not(.index) .l-header__nav-ja,
body:not(.index) .l-header__nav-en {
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.5), 0 0 12px rgba(0, 0, 0, 0.35);
}

/* 逆スクロールで固定表示＋上からスライドイン（全ページ。
   CEO 指示 2026-05-30：旧 body:not(.index) 限定で TOP だけ表示されなかったため全ページ有効化。
   max-width:2000px の中央寄せを fixed でも維持するため left/right 0 + margin-inline auto） */
.l-header.show {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  margin-inline: auto;
  -webkit-animation: l-header-slide-in 0.3s ease;
          animation: l-header-slide-in 0.3s ease;
}

/* TOP は固定表示時に明るいセクション上へ乗るため、nav にボカシ黒影で視認性確保
   （FV オーバーレイ時＝.show なしの時は付けない。下層は別途常時付与済み） */
body.index .l-header.show .l-header__nav-ja,
body.index .l-header.show .l-header__nav-en {
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.5), 0 0 12px rgba(0, 0, 0, 0.35);
}

@-webkit-keyframes l-header-slide-in {
  from {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
  to {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes l-header-slide-in {
  from {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
  to {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
/* ドロワー（SP メニュー） */
/* =====================================================
# ドロワー（SP メニュー）— 古典的 × ドレッシー（CEO 指示 2026-05-30）
# 濃紺グラデ地＋金の内側フレーム＋金ヘアライン罫＋菱形オーナメント。
# 文字は視認性優先で「ゴシック体（Noto Sans JP）」。古典感は配色・罫・装飾で表現。
===================================================== */
.l-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: min(84vw, 340 * var(--to-rem));
  height: 100%;
  z-index: 105;
  background-color: #001157;
  background-image: linear-gradient(165deg, #0a2168 0%, #001157 52%, #00072a 100%);
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
  -webkit-transition: -webkit-transform 0.45s ease;
  transition: -webkit-transform 0.45s ease;
  transition: transform 0.45s ease;
  transition: transform 0.45s ease, -webkit-transform 0.45s ease;
  overflow-y: auto;
}
.l-drawer.is-checked {
  -webkit-transform: translateX(0);
          transform: translateX(0);
}
.l-drawer {
  /* 内側の金フレーム（古典的な額縁） */
}
.l-drawer::before {
  content: "";
  position: absolute;
  inset: calc(14 * var(--to-rem));
  border: 1px solid rgba(203, 176, 121, 0.45);
  pointer-events: none;
  z-index: 0;
}
.l-drawer__close {
  position: absolute;
  top: calc(24 * var(--to-rem));
  right: calc(24 * var(--to-rem));
  width: calc(32 * var(--to-rem));
  height: calc(32 * var(--to-rem));
  background: none;
  border: 0;
  cursor: pointer;
  z-index: 2;
}
.l-drawer__close span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(24 * var(--to-rem));
  height: 1px;
  background-color: #cbb079;
}
.l-drawer__close span:nth-child(1) {
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
          transform: translate(-50%, -50%) rotate(45deg);
}
.l-drawer__close span:nth-child(2) {
  -webkit-transform: translate(-50%, -50%) rotate(-45deg);
          transform: translate(-50%, -50%) rotate(-45deg);
}
.l-drawer__inner {
  position: relative;
  z-index: 1;
  padding: calc(78 * var(--to-rem)) calc(40 * var(--to-rem)) calc(48 * var(--to-rem));
}
.l-drawer {
  /* MENU 見出し（金英字＋金罫＋菱形オーナメント） */
}
.l-drawer__head {
  text-align: center;
  margin-bottom: calc(38 * var(--to-rem));
}
.l-drawer__head-en {
  position: relative;
  display: inline-block;
  font-family: "Noto Sans JP", "YuGothic", "游ゴシック", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;
  font-weight: 500;
  font-size: calc(13 * var(--to-rem));
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  text-transform: uppercase;
  color: #cbb079;
  padding-bottom: calc(18 * var(--to-rem));
}
.l-drawer__head-en::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(6 * var(--to-rem));
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: calc(74 * var(--to-rem));
  height: 1px;
  background: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(50%, #cbb079), to(transparent));
  background: linear-gradient(90deg, transparent, #cbb079 50%, transparent);
}
.l-drawer__head-en::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(3 * var(--to-rem));
  -webkit-transform: translateX(-50%) rotate(45deg);
          transform: translateX(-50%) rotate(45deg);
  width: calc(7 * var(--to-rem));
  height: calc(7 * var(--to-rem));
  background-color: #cbb079;
}
.l-drawer__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.l-drawer__list li {
  border-bottom: 1px solid rgba(203, 176, 121, 0.22);
}
.l-drawer__list li:first-child {
  border-top: 1px solid rgba(203, 176, 121, 0.22);
}
.l-drawer__list a {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: calc(3 * var(--to-rem));
  padding: calc(17 * var(--to-rem)) calc(8 * var(--to-rem));
  text-decoration: none;
  -webkit-transition: padding-left 0.3s ease, background-color 0.3s ease;
  transition: padding-left 0.3s ease, background-color 0.3s ease;
}
.l-drawer__list a.is-active {
  background-color: rgba(203, 176, 121, 0.08);
}
.l-drawer__list a.is-active .l-drawer__ja {
  color: #cbb079;
}
.l-drawer__ja {
  font-family: "Noto Sans JP", "YuGothic", "游ゴシック", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;
  font-weight: 500;
  font-size: calc(17 * var(--to-rem));
  letter-spacing: 0.12em;
  color: white;
  line-height: 1.4;
}
.l-drawer__en {
  font-family: "Noto Sans JP", "YuGothic", "游ゴシック", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;
  font-weight: 400;
  font-size: calc(10 * var(--to-rem));
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #cbb079;
  line-height: 1;
}
.l-drawer {
  /* 電話（下部）。区切り線は list 最終 li の border-bottom が担うため TEL 側 border-top は付けない（二重線回避）。
     CEO 指摘 2026-05-30：消す罫線の場所が違っていた件の修正（li:last-child の線は戻し、TEL 上罫を撤去） */
}
.l-drawer__tel {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  gap: calc(5 * var(--to-rem));
  margin-top: calc(28 * var(--to-rem));
  text-align: center;
}
.l-drawer__tel-label {
  font-family: "Noto Sans JP", "YuGothic", "游ゴシック", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;
  font-size: calc(11 * var(--to-rem));
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  text-transform: uppercase;
  color: #cbb079;
}
.l-drawer__tel-num {
  font-family: "Noto Sans JP", "YuGothic", "游ゴシック", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;
  font-weight: 700;
  font-size: calc(20 * var(--to-rem));
  letter-spacing: 0.08em;
  color: white;
}
/* =====================================================
# footer（Figma 21:162 準拠・ゼロ・システム・2026-05-30）
# 上：CONTACT エリア（背景写真・白文字）／下：footer-content（ロゴ・住所・ナビ・コピーライト）
# カンプ 2000px 幅基準。2000px 以下リキッド・超で px 頭打ち。
===================================================== */
.l-footer {
  position: relative;
  width: 100%;
  max-width: 2000px;
  margin-inline: auto;
  overflow: hidden;
  font-family: "Noto Sans JP", "YuGothic", "游ゴシック", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;
  /* CEO 指示 2026-05-31：footer の白地を #e1ebf1 で埋める。
     当初 xl 以下のみ対応だったが、PC でも波背景画像(&__bg)が下端まで届かず最下部に約7pxの白帯が出るため
     base（全ブレイクポイント）に背景色を敷く。#e1ebf1 は波画像と同系色でモバイルとも統一。 */
  background-color: #e1ebf1;
  /* 下部の全幅背景写真（最背面・rel y=345〜） */
}
.l-footer__bg {
  position: absolute;
  left: 0;
  top: min(100vw * 345 / 2000, 345px);
  width: 100%;
  z-index: 0;
  pointer-events: none;
}
.l-footer__bg picture,
.l-footer__bg img {
  display: block;
  width: 100%;
  height: auto;
}
.l-footer {
  /* ================= CONTACT ================= */
}
.l-footer__contact {
  position: relative;
  z-index: 1;
  width: min(100vw * 1802 / 2000, 1802px);
  height: min(100vw * 693 / 2000, 693px);
  margin: 0 auto;
}
.l-footer__contact-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.l-footer__contact-bg picture,
.l-footer__contact-bg img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.l-footer__contact-inner {
  position: relative;
  z-index: 1;
  max-width: min(100vw * 1237 / 2000, 1237px);
  margin: 0 auto;
  padding-top: min(100vw * 89 / 2000, 89px);
  color: white;
  text-align: center;
}
.l-footer__contact-sub {
  display: block;
  font-family: "Noto Sans JP", "YuGothic", "游ゴシック", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;
  font-weight: 400;
  font-size: clamp(13px, 100vw * 20 / 2000, 20px);
  letter-spacing: 0.14em;
  line-height: 1.2;
}
.l-footer__contact-en {
  /* CEO 2026-05-30：sub「お問い合わせ」との間隔を Figma 通りに。Figma は en cap-top が
     sub box-top から約 +50px だが line-height:1.05 では約 +36px に詰まるため margin-top +14px で補う。 */
  margin: min(100vw * 14 / 2000, 14px) 0 0;
  font-family: "Besley", "Times New Roman", "YuMincho", serif;
  font-weight: 600;
  font-size: clamp(13px, 100vw * 80 / 2000, 80px);
  letter-spacing: 0.03em;
  line-height: 1.05;
}
.l-footer__contact-lead {
  margin: min(100vw * 24 / 2000, 24px) 0 0;
  font-family: "Noto Sans JP", "YuGothic", "游ゴシック", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;
  font-weight: 500;
  font-size: clamp(13px, 100vw * 25 / 2000, 25px);
  line-height: 1.48;
  letter-spacing: 0.14em;
}
.l-footer__contact-cta {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: min(100vw * 120 / 2000, 120px);
  margin-top: min(100vw * 110 / 2000, 110px);
}
.l-footer__telblock {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  gap: min(100vw * 8 / 2000, 8px);
}
.l-footer__telblock-label, .l-footer__telblock-hours {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-weight: 600;
  font-size: clamp(13px, 100vw * 20 / 2000, 20px);
  letter-spacing: 0.14em;
}
.l-footer__telblock-num {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  gap: min(100vw * 12 / 2000, 12px);
  font-family: "Noto Sans JP", "YuGothic", "游ゴシック", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;
  font-weight: 700;
  font-size: clamp(13px, 100vw * 48 / 2000, 48px);
  letter-spacing: 0.14em;
  line-height: 1;
}
.l-footer__telblock-num {
  /* CEO 指示 2026-05-31：SP の電話番号が tvw(1199基準)で13pxに潰れていた→SPは20pxへ。
     xl が SP にも掛かり mqpacker(md→xl)で後勝ちするため &[class] で md を勝たせる（svw41で375px時≈20・上限20） */
}
.l-footer__tel-icon {
  width: min(100vw * 37 / 2000, 37px);
  height: auto;
  display: block;
}
.l-footer__mailblock {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  gap: min(100vw * 7 / 2000, 7px);
}
.l-footer__mailblock-label {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-weight: 600;
  font-size: clamp(13px, 100vw * 20 / 2000, 20px);
  letter-spacing: 0.14em;
}
.l-footer__mailbtn {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: min(100vw * 24 / 2000, 24px);
  width: min(100vw * 484 / 2000, 484px);
  height: min(100vw * 95 / 2000, 95px);
  background: url(../img/top/zs-footer-mail-btn-bg.webp) center/cover no-repeat;
  color: white;
  text-decoration: none;
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-weight: 600;
  font-size: clamp(13px, 100vw * 20 / 2000, 20px);
  letter-spacing: 0.14em;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}
.l-footer__mail-icon {
  width: min(100vw * 40 / 2000, 40px);
  height: auto;
  display: block;
}
.l-footer {
  /* ================= footer-content ================= */
}
.l-footer__content {
  position: relative;
  z-index: 1;
  width: min(100vw * 1793 / 2000, 1793px);
  margin: min(100vw * 80 / 2000, 80px) auto 0;
  padding-bottom: min(100vw * 57 / 2000, 57px);
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
}
.l-footer__brand {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
}
.l-footer__logo {
  display: block;
  width: min(100vw * 157 / 2000, 157px);
}
.l-footer__logo img {
  width: 100%;
  height: auto;
  display: block;
}
.l-footer__address {
  margin: min(100vw * 30 / 2000, 30px) 0 0;
  font-weight: 500;
  font-size: clamp(13px, 100vw * 20 / 2000, 20px);
  letter-spacing: 0.14em;
  color: #9da2b8;
  line-height: 1.45;
}
.l-footer__telfax {
  margin: min(100vw * 20 / 2000, 20px) 0 0;
  font-weight: 600;
  font-size: clamp(13px, 100vw * 25 / 2000, 25px);
  letter-spacing: 0.14em;
  color: #001157;
}
.l-footer__right {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
      -ms-flex-align: end;
          align-items: flex-end;
  min-height: min(100vw * 245 / 2000, 245px);
  margin-top: min(100vw * 178 / 2000, 178px); /* CEO 指示 2026-05-30：Figma 通り右カラム(ナビ+コピーライト)を下げる（footer-content 内 top=178） */
}
.l-footer__nav-list {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  gap: min(100vw * 44 / 2000, 44px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.l-footer__nav-link {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  gap: min(100vw * 3 / 2000, 3px);
  text-decoration: none;
}
.l-footer__nav-ja {
  font-weight: 700;
  font-size: clamp(13px, 100vw * 20 / 2000, 20px);
  letter-spacing: 0.14em;
  color: #001157;
}
.l-footer__nav-en {
  font-weight: 700;
  font-size: clamp(13px, 100vw * 10 / 2000, 10px);
  letter-spacing: 0.14em;
  color: #9da2b8;
}
.l-footer__copyright {
  margin: auto 0 0;
  font-weight: 700;
  font-size: clamp(13px, 100vw * 10 / 2000, 10px);
  letter-spacing: 0.14em;
  color: #001157;
}

/* =====================================================
# l-footer__pagetop — ページトップへ戻る（$color_main 背景 + 1px 白枠）
# script.js が scrollTop>100 で .is-show を付与、a[href="#"] のスムーススクロールで最上部へ
===================================================== */
.l-footer__pagetop {
  position: fixed;
  /* 2000px 超モニタではコンテンツ右端（中央2000pxの右端）から40px内側に固定 */
  right: max(min(min(2.0997375328vw, 40px), 40px), (100vw - 2000px) / 2 + 40px);
  bottom: min(min(3.6745406824vw, 70px), 70px); /* CEO 指示 2026-05-31：PC時のみ上へ（40→60→70。さらに+10） */
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: min(min(3.6745406824vw, 70px), 70px); /* CEO 指示 2026-05-31：PC時のみ約10大きく（60→70） */
  height: min(min(3.6745406824vw, 70px), 70px);
  border-radius: 50%;
  background-color: #001157;
  border: 1px solid #fff;
  color: white;
  text-decoration: none;
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translateY(calc(10 * var(--to-rem)));
          transform: translateY(calc(10 * var(--to-rem)));
  -webkit-transition: opacity 0.3s, visibility 0.3s, -webkit-transform 0.3s;
  transition: opacity 0.3s, visibility 0.3s, -webkit-transform 0.3s;
  transition: opacity 0.3s, visibility 0.3s, transform 0.3s;
  transition: opacity 0.3s, visibility 0.3s, transform 0.3s, -webkit-transform 0.3s;
  z-index: 100;
}
.l-footer__pagetop.is-show {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}
.l-footer__pagetop-arrow {
  font-family: "Noto Sans JP", "YuGothic", "游ゴシック", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;
  font-weight: 700;
  font-size: clamp(13px, min(1.2598425197vw, 24px), 24px);
  line-height: 1;
  color: white;
}

/* =====================================================
# 下層ページ メインビジュアル（ANIMA LINK 構造踏襲）
===================================================== */
.mv {
  background-color: #fff;
  position: relative;
  z-index: 1;
}
.mv-jumbotron {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  background-color: #999;
  background-size: cover;
  background-position: center center;
  height: calc(450 * var(--to-rem));
  position: relative;
  z-index: -1;
}
.mv-jumbotron.is-contact {
  background-position: center center;
}
.mv-jumbotron.is-business {
  /* CEO 指示 2026-05-31：配置は top から約20%（足場画像 pixta_97235831_L 差し替え） */
  background-position: center 20%;
}
.mv-jumbotron {
  /* Friendship ページのみ MV 画像の基準値を bottom に（2026-05-22 CEO 指示） */
}
.mv-jumbotron.is-friendship {
  background-position: center bottom;
}
.mv-jumbotron {
  /* Triangle ページも MV 画像の基準値を bottom に（2026-05-23 CEO 指示） */
}
.mv-jumbotron.is-triangle {
  background-position: center bottom;
}
.mv-jumbotron {
  /* カンプ準拠: MV画像にフィルター/オーバーレイは掛けない */
}
.mv-jumbotron__inner {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center; /* 縦中央寄せ */
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center; /* X 中央寄せ（2026-05-22 CEO 指示） */
  width: 100%;
  height: 100%;
  /* padding-top で content-box を下に押し下げ、中央位置から mv 高さの約10%下に */
  padding-top: calc(90 * var(--to-rem)); /* rem(450) × 0.2 = 90px。pc以下(≤2000px)では無くすため、実質 mpc(>2000px) 用 */
  /* pc以下（≤2000px = ほぼ全画面）は padding-top を無くす（CEO 指示 2026-05-25） */
}
.mv {
  /* mv-h2: 下層ページ共通 メインビジュアル見出し（リッチ・フォーマル / 2026-05-30 CEO 指示で刷新）
     濃紺ガラスボックス＋水色二重罫線＋セリフ英字(Besley)＋明朝和字＋区切り線。
     mq を使わず clamp() でリキッド均整（mqpacker 後勝ち問題を回避） */
}
.mv .mv-h2 {
  margin: 0 auto;
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
  gap: clamp(8px, min(0.5249343832vw, 10px), 10px);
  padding: clamp(26px, min(2.0997375328vw, 40px), 40px) clamp(34px, min(3.4645669291vw, 66px), 66px);
  background-color: rgba(0, 17, 87, 0.82); /* 濃紺ガラス */
  border: 1px solid rgba(0, 169, 235, 0.55); /* 水色の細枠 */
  border-radius: calc(3 * var(--to-rem)); /* フォーマル＝角は控えめ */
  -webkit-box-shadow: 0 clamp(8px, min(0.7349081365vw, 14px), 14px) clamp(28px, min(2.3097112861vw, 44px), 44px) rgba(0, 0, 0, 0.28);
          box-shadow: 0 clamp(8px, min(0.7349081365vw, 14px), 14px) clamp(28px, min(2.3097112861vw, 44px), 44px) rgba(0, 0, 0, 0.28);
  /* 内側の二重罫線（リッチ装飾） */
}
.mv .mv-h2::before {
  content: "";
  position: absolute;
  inset: clamp(6px, min(0.4199475066vw, 8px), 8px);
  border: 1px solid rgba(0, 169, 235, 0.32);
  pointer-events: none;
}
.mv .mv-h2 {
  /* 英字見出し（大・Besley セリフ） */
}
.mv .mv-h2__en {
  display: block;
  font-family: "Besley", "Times New Roman", "YuMincho", serif;
  font-size: clamp(30px, min(3.1496062992vw, 60px), 60px);
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1;
  color: white;
  text-indent: 0.12em; /* letter-spacing の右余白を相殺し中央を合わせる */
}
.mv .mv-h2 {
  /* 和字見出し（小・明朝・区切り線付き） */
}
.mv .mv-h2__ja {
  display: block;
  position: relative;
  font-family: "Noto Serif JP", "YuMincho", "游明朝", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif;
  font-size: clamp(13px, min(0.8923884514vw, 17px), 17px);
  font-weight: 600;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  line-height: 1;
  color: #00a9eb;
  padding-top: clamp(12px, min(0.8398950131vw, 16px), 16px);
  margin-top: clamp(4px, min(0.3149606299vw, 6px), 6px);
}
.mv .mv-h2__ja::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: clamp(36px, min(2.3097112861vw, 44px), 44px);
  height: 1px;
  background-color: rgba(0, 169, 235, 0.85);
}

/* 左から右にカーテン
---------------------------------------------------- */
.curtainLefttoRight {
  position: relative;
}

.curtainLefttoRight.visible {
  -webkit-animation-name: curtainLeftFadeIn;
          animation-name: curtainLeftFadeIn;
  -webkit-animation-duration: 1.2s;
          animation-duration: 1.2s;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
}

.curtainLefttoRight.visible:before {
  display: block;
  content: "";
  position: absolute;
  z-index: 999;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  -webkit-transform: scaleX(0);
          transform: scaleX(0);
  background-color: #000;
  pointer-events: none; /* アニメ後も残るのでクリック・選択を阻害させない */
  -webkit-animation-name: curtainLeft;
          animation-name: curtainLeft;
  -webkit-animation-duration: 1.2s;
          animation-duration: 1.2s;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

@-webkit-keyframes curtainLeftFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes curtainLeftFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes curtainLeft {
  0% {
    -webkit-transform-origin: left;
            transform-origin: left;
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
  50% {
    -webkit-transform-origin: left;
            transform-origin: left;
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
  50.001% {
    -webkit-transform-origin: right;
            transform-origin: right;
  }
  100% {
    -webkit-transform-origin: right;
            transform-origin: right;
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
}
@keyframes curtainLeft {
  0% {
    -webkit-transform-origin: left;
            transform-origin: left;
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
  50% {
    -webkit-transform-origin: left;
            transform-origin: left;
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
  50.001% {
    -webkit-transform-origin: right;
            transform-origin: right;
  }
  100% {
    -webkit-transform-origin: right;
            transform-origin: right;
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
}
/* FLOCSS
----------------------------------------------------- */
.c-btn-viewmore {
  position: relative;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: min(min(14.8556430446vw, 283px), 283px);
  height: min(min(3.8845144357vw, 74px), 74px);
  padding: 0 min(min(2.624671916vw, 50px), 50px) 0 min(min(1.5748031496vw, 30px), 30px);
  background-color: #001157;
  color: white;
  text-decoration: none;
  border-radius: 9999px;
  -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
  transition: opacity 0.3s, -webkit-transform 0.3s;
  transition: opacity 0.3s, transform 0.3s;
  transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s;
}
.c-btn-viewmore__label {
  font-family: "Roboto", "Noto Sans JP", "YuGothic", "游ゴシック", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;
  font-weight: 500;
  font-size: clamp(13px, min(0.9448818898vw, 18px), 18px);
  line-height: 1;
  color: white;
  letter-spacing: 0.02em;
}
.c-btn-viewmore__icon {
  position: absolute;
  right: min(min(1.3648293963vw, 26px), 26px);
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: min(min(0.6299212598vw, 12px), 12px);
  height: min(min(0.9448818898vw, 18px), 18px);
  color: white;
}
.c-btn-viewmore__icon svg {
  display: block;
  width: 100%;
  height: 100%;
}
.c-btn-viewmore--sm {
  width: min(min(11.7585301837vw, 224px), 224px);
  padding: 0 min(min(2.0997375328vw, 40px), 40px) 0 min(min(1.0498687664vw, 20px), 20px);
}

.u-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.mt-1 {
  margin-top: 10px;
}

.mt-2 {
  margin-top: 20px;
}

.mt-3 {
  margin-top: 30px;
}

.mt-4 {
  margin-top: 40px;
}

.mt-5 {
  margin-top: 50px;
}

.mt-6 {
  margin-top: 60px;
}

.mt-7 {
  margin-top: 70px;
}

.mt-8 {
  margin-top: 80px;
}

.mt-9 {
  margin-top: 90px;
}

.mt-10 {
  margin-top: 100px;
}

@media screen and (max-width: 767px) {
  body.index .fv {
    aspect-ratio: auto;
    height: 55svh; /* CEO 指示 2026-05-30：SP は 55svh */
    min-height: calc(420 * var(--to-rem));
  }
  body.index .fv__catch {
    /* CEO 指示 2026-05-30：SP は上下左右中央＋フォント拡大。
       mqpacker の md→xl 出力順で xl ブロックに後勝ち上書きされるため、
       &[class] で詳細度を1つ上げて md を確実に優先させる */
  }
  body.index .fv__catch[class] {
    inset: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
        -ms-flex-align: start;
            align-items: flex-start; /* CEO 指示 2026-05-31：中央→左揃え */
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    text-align: left; /* CEO 指示 2026-05-31：中央→左揃え */
    white-space: normal;
    padding-inline: calc(16 * var(--to-rem));
    font-size: clamp(16px, 7.3011734029vw, 56px);
  }
  .c-more {
    gap: calc(10 * var(--to-rem));
  }
  .c-more__text {
    font-size: clamp(13px, 2.3468057366vw, 18px);
  }
  body.index .about__en[class] {
    font-size: clamp(18px, 6.7796610169vw, 52px);
  }
  body.index .business__en[class] {
    font-size: clamp(18px, 6.7796610169vw, 52px);
  }
  body.index .products__head[class] {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: calc(20 * var(--to-rem));
  }
  body.index .products__en[class] {
    font-size: clamp(18px, 6.7796610169vw, 52px);
  }
  body.index .products__list {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
  }
  body.index .products__list .products__item {
    width: 100%;
    max-width: calc(360 * var(--to-rem));
  }
  body.index .news__en[class] {
    font-size: clamp(18px, 6.7796610169vw, 52px);
  }
  body.index .news__item {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: calc(6 * var(--to-rem));
  }
  body.index .news__meta {
    width: auto;
    padding-top: 0;
  }
  body.business .business-section {
    padding: calc(56 * var(--to-rem)) calc(20 * var(--to-rem));
  }
  body.business .business-heading__en {
    font-size: clamp(16px, 2.6075619296vw, 20px);
  }
  body.business .business-lead__text {
    text-align: left;
    line-height: 2.15;
  }
  body.business .business-item__row {
    grid-template-columns: 1fr;
    gap: calc(28 * var(--to-rem));
  }
  body.business .business-item--reverse .business-item__media {
    -webkit-box-ordinal-group: 2;
    -webkit-order: 1;
        -ms-flex-order: 1;
            order: 1;
  }
  body.business .business-item--reverse .business-item__body {
    -webkit-box-ordinal-group: 3;
    -webkit-order: 2;
        -ms-flex-order: 2;
            order: 2;
  }
  body.business .business-item--reverse .business-item__photo--main {
    margin-inline: auto;
  }
  body.business .business-item:not(.business-item--reverse) .business-item__media {
    padding-bottom: calc(76 * var(--to-rem)); /* CEO 指示 2026-05-31：SP で sub をもう少し下へ。media を縦に伸ばし bottom:0 の sub を下げる＝media内に収め、body との gap(28px)/アイテム間を侵食しない（48→76で約28px下げ） */
  }
  body.business .business-item:not(.business-item--reverse) .business-item__media .business-item__photo--main {
    width: 80%;
    margin-left: auto;
    margin-right: 0;
  }
  body.business .business-item__photo--sub {
    left: 0;
    width: 64%;
  }
  body.business .business-item__text {
    line-height: 2.05;
  }
  body.business .business-other__text {
    padding: calc(24 * var(--to-rem)) calc(20 * var(--to-rem));
    text-align: justify; /* CEO 指示 2026-05-31：SP も両端揃え（justify）に統一 */
    line-height: 2.2;
  }
  body.company .company-section {
    padding: calc(56 * var(--to-rem)) calc(20 * var(--to-rem));
  }
  body.company .company-heading__en {
    font-size: clamp(16px, 2.6075619296vw, 20px);
  }
  body.company .company-greeting__text {
    text-align: left;
    line-height: 2.15;
  }
  body.company .company-greeting__text br {
    display: none;
  }
  body.company .company-greeting__sign {
    text-align: right;
  }
  body.company .company-table,
  body.company .company-table tbody,
  body.company .company-table tr,
  body.company .company-table th,
  body.company .company-table td {
    display: block;
    width: 100%;
  }
  body.company .company-table tr {
    padding: calc(16 * var(--to-rem)) 0;
  }
  body.company .company-table th {
    white-space: normal;
    padding: 0 0 calc(6 * var(--to-rem));
    font-size: calc(15 * var(--to-rem));
  }
  body.company .company-table td {
    padding: 0;
    font-size: calc(15 * var(--to-rem));
    line-height: 1.9;
  }
  body.company .company-table__br {
    display: inline;
  }
  body.company .company-recruit__banner {
    min-height: calc(220 * var(--to-rem));
  }
  body.products .products-cat__link {
    min-width: calc(110 * var(--to-rem));
    padding: calc(11 * var(--to-rem)) calc(18 * var(--to-rem));
  }
  body.contact .contact-intro {
    padding-block: calc(50 * var(--to-rem));
  }
  body.contact .tel-fax__content {
    grid-template-columns: 1fr;
    max-width: 400px;
    margin-inline: auto;
  }
  body.contact .tel-fax__box {
    padding: 20px calc(30 * var(--to-rem));
  }
  body.contact .tel-fax__hours {
    font-size: calc(12 * var(--to-rem));
  }
  body.contact .tel-fax .tel-number {
    padding-left: 2px;
  }
  body.contact .tel-fax .tel-number.tel-number {
    font-size: 27px; /* CEO 指示 2026-05-30：SP の番号を 27 に（&.tel-number で xl(35px) に勝たせて適用） */
  }
  body.contact .tel-fax .tel-number::before {
    width: 29px; /* CEO 指示 2026-05-30：SP アイコンを気持ち大きく（25→29） */
    height: 29px;
    vertical-align: -5px;
  }
  body.contact .tel-fax .is-fax .tel-number::before {
    width: 34px; /* CEO 指示 2026-05-30：SP アイコンを気持ち大きく（30→34） */
    height: 34px;
    vertical-align: -7px;
  }
  body.contact .tel-fax__title {
    font-size: calc(18 * var(--to-rem));
  }
  body.contact .tel-fax__title .large {
    font-size: calc(20 * var(--to-rem)); /* CEO 指示 2026-05-30：SP の .large を 20 に */
  }
  body.contact .mail-form {
    padding-block: 50px;
  }
  body.contact .mail-form__title {
    font-size: calc(21 * var(--to-rem));
    line-height: 1.5;
  }
  body.contact .mail-form__text {
    margin-top: calc(40 * var(--to-rem));
  }
  body.contact .mail-form .box-scroll__title {
    font-size: 16px;
  }
  body.contact .mail-form .privacy-btn {
    width: 100%;
    margin-bottom: 0px;
  }
  body.contact .mail-form .privacy-btn__wrapper {
    margin-top: 30px;
    margin-bottom: 15px;
  }
  body.contact .mail-form .send-btn__wrapper {
    width: 100%;
    margin-bottom: 0px;
    display: block;
  }
  body.contact .mail-form .send-btn {
    width: 100%;
    margin-bottom: 15px;
  }
  body.contact .mail-form .send-btn--back {
    margin-right: 0px;
  }
  body.contact .mail-form input[type=radio] + span,
  body.contact .mail-form input[type=checkbox] + span {
    font-size: 15px;
    margin-right: 0;
    line-height: 1.4;
    letter-spacing: 0;
  }
  body.contact .mail-form input[type=checkbox] + span:before {
    top: 0.3em;
  }
  body.contact .mail-form .selectWrap {
    width: 60%;
  }
  .l-header__row {
    padding: calc(8 * var(--to-rem)) calc(12 * var(--to-rem));
  }
  .l-header__logo-img img {
    width: calc(72 * var(--to-rem));
  }
  body .l-header__row {
    padding: calc(8 * var(--to-rem)) calc(12 * var(--to-rem));
  }
  .l-footer__contact-cta {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    gap: calc(32 * var(--to-rem));
    margin-top: calc(40 * var(--to-rem));
  }
  .l-footer__telblock-num[class] {
    font-size: clamp(16px, 5.3455019557vw, 20px);
  }
  .l-footer__nav-list {
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: calc(16 * var(--to-rem)) calc(24 * var(--to-rem));
  }
  .l-footer__pagetop {
    right: calc(16 * var(--to-rem));
    bottom: calc(16 * var(--to-rem));
    width: calc(48 * var(--to-rem));
    height: calc(48 * var(--to-rem));
  }
  .l-footer__pagetop-arrow {
    font-size: calc(20 * var(--to-rem));
  }
  .mv-jumbotron {
    height: 50svh;
  }
  .c-btn-viewmore {
    width: calc(220 * var(--to-rem));
    height: calc(56 * var(--to-rem));
    padding: 0 calc(36 * var(--to-rem)) 0 calc(22 * var(--to-rem));
  }
  .c-btn-viewmore__label {
    font-size: calc(15 * var(--to-rem));
  }
  .c-btn-viewmore__icon {
    right: calc(18 * var(--to-rem));
    width: calc(10 * var(--to-rem));
    height: calc(15 * var(--to-rem));
  }
  .c-btn-viewmore--sm {
    width: calc(180 * var(--to-rem));
    padding: 0 calc(28 * var(--to-rem)) 0 calc(16 * var(--to-rem));
  }
  .hidden-sp {
    display: none;
  }
  .mt-2 {
    margin-top: 10px;
  }
  .mt-3 {
    margin-top: 15px;
  }
  .mt-4 {
    margin-top: 20px;
  }
  .mt-5 {
    margin-top: 25px;
  }
  .mt-6 {
    margin-top: 30px;
  }
  .mt-7 {
    margin-top: 35px;
  }
  .mt-8 {
    margin-top: 40px;
  }
  .mt-9 {
    margin-top: 45px;
  }
  .mt-10 {
    margin-top: 50px;
  }
}

@media screen and (max-width: 1199px) {
  body.index .fv__catch {
    left: calc(32 * var(--to-rem)); /* CEO 指示 2026-05-31：右→左アンカーに（xl以下を左揃え） */
    right: auto;
    top: auto;
    bottom: calc(48 * var(--to-rem));
    text-align: left; /* CEO 指示 2026-05-31：右揃え→左揃え */
    font-size: clamp(13px, 4.670558799vw, 56px);
  }
  body.index .about {
    height: auto;
    padding: calc(64 * var(--to-rem)) calc(24 * var(--to-rem)) calc(72 * var(--to-rem));
  }
  body.index .about__logo {
    display: none;
  }
  body.index .about__photos {
    position: relative;
    width: min(560 * var(--to-rem), 90%);
    height: auto;
    margin: calc(30 * var(--to-rem)) auto calc(40 * var(--to-rem)); /* CEO 指示 2026-05-31：xl時以下 about__photos の上余白を 30（本文との間隔） */
  }
  body.index .about__photo {
    position: relative;
    /* CEO 指示 2026-05-31：xl時以下は2枚を隠し、合成1枚（webp）に差し替え */
  }
  body.index .about__photo--top, body.index .about__photo--bottom {
    display: none;
  }
  body.index .about__photo--sp {
    display: block;
    width: 100%;
  }
  body.index .about__body {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
    max-width: calc(680 * var(--to-rem));
    margin-inline: auto;
  }
  body.index .about__head::before {
    height: calc(60 * var(--to-rem));
    width: calc(4 * var(--to-rem));
  }
  body.index .about__sub {
    position: static;
    margin-left: calc(20 * var(--to-rem));
    font-size: clamp(13px, 1.5012510425vw, 18px);
  }
  body.index .about__en {
    position: static;
    margin: calc(2 * var(--to-rem)) 0 0 calc(20 * var(--to-rem));
    font-size: clamp(13px, 4.3369474562vw, 52px);
  }
  body.index .about__text {
    position: static;
    width: 100%;
    margin-top: calc(28 * var(--to-rem));
    font-size: clamp(13px, 1.5012510425vw, 18px);
    line-height: 1.9;
  }
  body.index .about__more {
    position: static;
    margin-top: calc(32 * var(--to-rem));
  }
  body.index .about__more .c-more__arrow img {
    width: calc(64 * var(--to-rem));
  }
  body.index .business {
    height: auto;
    overflow: visible;
    padding: calc(56 * var(--to-rem)) calc(24 * var(--to-rem)) calc(64 * var(--to-rem));
    background-color: #001157;
  }
  body.index .business__bg {
    display: none;
  }
  body.index .business__body {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    max-width: calc(680 * var(--to-rem));
    margin-inline: auto;
  }
  body.index .business__head::before {
    top: 0;
    height: calc(60 * var(--to-rem));
    width: calc(4 * var(--to-rem));
  }
  body.index .business__head {
    height: auto;
    padding-left: calc(20 * var(--to-rem));
  }
  body.index .business__sub {
    position: static;
    font-size: clamp(13px, 1.5012510425vw, 18px);
  }
  body.index .business__en {
    position: static;
    margin-top: calc(2 * var(--to-rem));
    font-size: clamp(13px, 4.3369474562vw, 52px);
  }
  body.index .business__lead {
    position: static;
    width: 100%;
    margin-top: calc(24 * var(--to-rem));
    font-size: clamp(13px, 1.5012510425vw, 18px);
    line-height: 1.9;
  }
  body.index .business__more {
    position: static;
    margin-top: calc(28 * var(--to-rem));
  }
  body.index .business__more .c-more__arrow img {
    width: calc(64 * var(--to-rem));
  }
  body.index .business__photos {
    position: relative;
    inset: auto;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: calc(16 * var(--to-rem));
    margin-top: calc(40 * var(--to-rem));
  }
  body.index .business__photo {
    position: relative;
    inset: auto;
    /* CEO 指示 2026-05-31：xl時以下は2枚を隠し、合成1枚（webp）に差し替え */
  }
  body.index .business__photo--main, body.index .business__photo--sub {
    display: none;
  }
  body.index .business__photo--sp {
    display: block;
    width: min(560 * var(--to-rem), 90%);
  }
  body.index .products {
    height: auto;
    overflow: visible;
    padding: calc(56 * var(--to-rem)) calc(24 * var(--to-rem)) calc(72 * var(--to-rem));
  }
  body.index .products__bg {
    display: none;
  }
  body.index .products__inner {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    max-width: calc(1100 * var(--to-rem));
    margin-inline: auto;
  }
  body.index .products__head {
    height: auto;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
        -ms-flex-align: end;
            align-items: flex-end;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
            justify-content: space-between;
    padding-bottom: calc(16 * var(--to-rem));
    border-bottom: 1px solid rgba(0, 17, 87, 0.2);
  }
  body.index .products__head-title {
    padding-left: 0;
  }
  body.index .products__sub {
    position: static;
    font-size: clamp(13px, 1.5012510425vw, 18px);
  }
  body.index .products__en {
    position: static;
    margin-top: calc(2 * var(--to-rem));
    font-size: clamp(13px, 4.3369474562vw, 52px);
  }
  body.index .products__more {
    position: static;
  }
  body.index .products__more .c-more__arrow img {
    width: calc(64 * var(--to-rem));
  }
  body.index .products__head::after {
    display: none;
  }
  body.index .products__list {
    position: static;
    width: 100%;
    margin-top: calc(32 * var(--to-rem));
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: calc(20 * var(--to-rem));
  }
  body.index .products__item {
    width: min(340 * var(--to-rem), 45%);
  }
  .p-card {
    -webkit-box-shadow: 0 0 calc(16 * var(--to-rem)) rgba(0, 0, 0, 0.1);
            box-shadow: 0 0 calc(16 * var(--to-rem)) rgba(0, 0, 0, 0.1);
  }
  .p-card__photo {
    height: calc(210 * var(--to-rem));
  }
  .p-card__title {
    min-height: calc(80 * var(--to-rem));
    padding: calc(25 * var(--to-rem)) calc(20 * var(--to-rem)) calc(15 * var(--to-rem));
    font-size: clamp(13px, 1.5012510425vw, 18px);
  }
  body.index .news {
    height: auto;
    padding: calc(48 * var(--to-rem)) calc(24 * var(--to-rem)) calc(64 * var(--to-rem));
  }
  body.index .news__inner {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    max-width: calc(1000 * var(--to-rem));
    margin-inline: auto;
  }
  body.index .news__head {
    height: auto;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
        -ms-flex-align: end;
            align-items: flex-end;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
            justify-content: space-between;
    padding-bottom: calc(16 * var(--to-rem));
    border-bottom: 1px solid rgba(0, 17, 87, 0.2);
  }
  body.index .news__head::after {
    display: none;
  }
  body.index .news__head-title {
    padding-left: 0;
  }
  body.index .news__sub {
    position: static;
    font-size: clamp(13px, 1.5012510425vw, 18px);
  }
  body.index .news__en {
    position: static;
    margin-top: calc(2 * var(--to-rem));
    font-size: clamp(13px, 4.3369474562vw, 52px);
  }
  body.index .news__list {
    position: static;
    width: 100%;
    margin-top: calc(32 * var(--to-rem));
    gap: calc(28 * var(--to-rem));
  }
  body.index .news__meta {
    width: calc(220 * var(--to-rem));
    gap: calc(20 * var(--to-rem));
  }
  body.index .news__date {
    font-size: clamp(13px, 1.3344453711vw, 16px);
  }
  body.index .news__cat {
    font-size: clamp(13px, 1.3344453711vw, 16px);
  }
  body.index .news__title {
    font-size: clamp(13px, 1.5012510425vw, 18px);
  }
  body.contact .tel-fax .tel-number {
    font-size: 35px;
  }
  .l-header__row {
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
        -ms-flex-align: start;
            align-items: flex-start; /* CEO 指示 2026-05-30：center → flex-start */
    padding: calc(16 * var(--to-rem)) calc(20 * var(--to-rem));
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  .l-header__logo-area {
    padding-top: 0;
  }
  .l-header__logo-img img {
    width: calc(96 * var(--to-rem));
  }
  .l-header__nav-area {
    display: none;
  }
  .l-header__hamburger {
    display: inline-block;
  }
  .l-footer__bg {
    top: auto;
    bottom: 0;
    height: 55%;
  }
  .l-footer__bg img {
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
  .l-footer__contact {
    width: 100%;
    height: auto;
    padding: calc(56 * var(--to-rem)) calc(24 * var(--to-rem)) calc(64 * var(--to-rem));
  }
  .l-footer__contact-inner {
    max-width: calc(760 * var(--to-rem));
    padding-top: 0;
  }
  .l-footer__contact-sub {
    font-size: clamp(13px, 1.3344453711vw, 16px);
  }
  .l-footer__contact-en {
    font-size: clamp(13px, 4.670558799vw, 56px);
  }
  .l-footer__contact-lead {
    font-size: clamp(13px, 1.3344453711vw, 16px);
    margin-top: calc(20 * var(--to-rem));
  }
  .l-footer__telblock-label, .l-footer__telblock-hours {
    font-size: clamp(13px, 1.2510425354vw, 15px);
  }
  .l-footer__telblock-num {
    font-size: clamp(13px, 2.8356964137vw, 34px);
  }
  .l-footer__tel-icon {
    width: calc(26 * var(--to-rem));
  }
  .l-footer__mailblock-label {
    font-size: clamp(13px, 1.2510425354vw, 15px);
  }
  .l-footer__mailbtn {
    width: calc(320 * var(--to-rem));
    height: calc(64 * var(--to-rem));
    font-size: clamp(13px, 1.2510425354vw, 15px);
  }
  .l-footer__mail-icon {
    width: calc(28 * var(--to-rem));
  }
  .l-footer__content {
    width: 100%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    text-align: center;
    gap: calc(40 * var(--to-rem));
    margin-top: calc(48 * var(--to-rem));
    padding: 0 calc(24 * var(--to-rem)) calc(48 * var(--to-rem));
  }
  .l-footer__logo {
    width: calc(110 * var(--to-rem));
    margin-inline: auto;
  }
  .l-footer__address {
    font-size: clamp(13px, 1.2510425354vw, 15px);
    margin-top: calc(20 * var(--to-rem));
  }
  .l-footer__telfax {
    font-size: clamp(13px, 1.5012510425vw, 18px);
  }
  .l-footer__right {
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    min-height: 0;
    margin-top: 0;
    gap: calc(24 * var(--to-rem));
  }
  .l-footer__nav-ja {
    font-size: clamp(13px, 1.2510425354vw, 15px);
  }
  .l-footer__nav-en {
    font-size: 10px;
  }
  .l-footer__copyright {
    margin: 0;
    font-size: 11px;
  }
  .l-footer__pagetop {
    right: calc(24 * var(--to-rem));
    bottom: calc(20 * var(--to-rem));
    width: calc(56 * var(--to-rem));
    height: calc(56 * var(--to-rem));
  }
  .l-footer__pagetop-arrow {
    font-size: calc(22 * var(--to-rem));
  }
  .c-btn-viewmore {
    width: calc(240 * var(--to-rem));
    height: calc(64 * var(--to-rem));
    padding: 0 calc(40 * var(--to-rem)) 0 calc(24 * var(--to-rem));
  }
  .c-btn-viewmore__label {
    font-size: calc(16 * var(--to-rem));
  }
  .c-btn-viewmore__icon {
    right: calc(20 * var(--to-rem));
    width: calc(11 * var(--to-rem));
    height: calc(16 * var(--to-rem));
  }
  .c-btn-viewmore--sm {
    width: calc(200 * var(--to-rem));
    padding: 0 calc(32 * var(--to-rem)) 0 calc(18 * var(--to-rem));
  }
}

@media screen and (min-width: 768px) {
  .c-more:hover {
    -webkit-transform: translateX(10px) !important;
            transform: translateX(10px) !important;
  }
  body.index .news__meta {
    padding-top: 0;
  }
  .p-card:hover .p-card__photo img {
    -webkit-transform: scale(1.05);
            transform: scale(1.05);
  }
  body.index .news__title:hover {
    color: #b70005;
  }
  body.index .news__title p {
    margin-bottom: 0 !important;
  }
  body.company .company-map__btn:hover, body.company .company-map__btn:focus {
    background-color: #001157;
    border-color: #001157;
    color: #fff;
  }
  body.products .products-cat__link:hover, body.products .products-cat__link:focus {
    background-color: #001157;
    border-color: #001157;
    color: #fff;
  }
  body.products .products-next:hover,
  body.products .products-prev:hover {
    background-color: #001157;
  }
  body.products .paging .paging-text a:hover {
    color: #b0935a;
  }
  body.contact .mail-form .privacy__link:focus, body.contact .mail-form .privacy__link:hover {
    color: #999;
  }
  body.contact .mail-form .privacy-btn:focus, body.contact .mail-form .privacy-btn:hover {
    opacity: 0.6;
  }
  body.contact .mail-form .send-btn:focus, body.contact .mail-form .send-btn:hover {
    opacity: 0.6;
  }
  .l-header__nav-link:hover, .l-header__nav-link:focus {
    opacity: 0.75;
  }
  .l-header__mail:hover, .l-header__mail:focus {
    opacity: 0.85;
  }
  .l-drawer__list a:hover, .l-drawer__list a:focus {
    background-color: rgba(203, 176, 121, 0.08);
    padding-left: calc(16 * var(--to-rem));
  }
  .l-footer__mailbtn:hover, .l-footer__mailbtn:focus {
    opacity: 0.85;
  }
  .l-footer__nav-link:hover .l-footer__nav-ja {
    opacity: 0.7;
  }
  .l-footer__pagetop.is-show:focus,
  .l-footer__pagetop.is-show:hover {
    opacity: 0.85;
    -webkit-transform: translateY(calc(-4 * var(--to-rem)));
            transform: translateY(calc(-4 * var(--to-rem)));
  }
  .c-btn-viewmore:focus, .c-btn-viewmore:hover {
    opacity: 0.85;
    -webkit-transform: translateX(calc(4 * var(--to-rem)));
            transform: translateX(calc(4 * var(--to-rem)));
  }
  .hidden-pc {
    display: none;
  }
}

@media screen and (max-width: 1023px) {
  body.products .products-item {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: calc(28 * var(--to-rem));
  }
  body.products .products-item__media {
    -webkit-box-flex: 0;
    -webkit-flex: none;
        -ms-flex: none;
            flex: none;
    width: 100%;
    max-width: calc(560 * var(--to-rem));
  }
  body.contact .mail-form .horizontal-table table {
    font-size: 16px;
  }
  body.contact .mail-form .horizontal-table th {
    border-bottom-width: 0;
    border-left: unset;
    background-color: #efefef;
    width: 100%;
    border-right: 0;
    padding: 10px;
  }
  body.contact .mail-form .horizontal-table td {
    border-bottom-width: 0;
    border-right: unset;
    border-left: unset;
    width: 100%;
    padding: 10px;
  }
  body.contact .mail-form .horizontal-table tr {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  body.contact .mail-form .box-scroll {
    height: 220px;
    margin-bottom: 15px;
    padding: 15px;
    word-break: break-all;
  }
  .mv-jumbotron.is-recruit {
    background-position: left top;
  }
}

@media screen and (max-width: 2000px) {
  .mv-jumbotron__inner {
    padding-top: 0;
  }
}

@media screen and (min-width: 1024px) {
  .hidden-tab {
    display: none;
  }
}

@media screen and (min-width: 1200px) {
  body.index .news {
    height: auto;
    min-height: min(100vw * 857 / 2000, 857px);
    padding-top: min(100vw * 173 / 2000, 173px);
    padding-bottom: min(100vw * 120 / 2000, 120px);
  }
  body.index .news__inner {
    position: relative;
    left: auto;
    top: auto;
    margin-left: min(100vw * 336 / 2000, 336px);
  }
  body.index .news__list {
    position: static;
    margin-top: min(100vw * 65 / 2000, 65px);
  }
}