@charset "UTF-8";
/* -----------------------------------------------
* Page エントリーポイント
-------------------------------------------------- */
/* FLOCSS
----------------------------------------------------- */
/* =====================================================
# 株式会社ネッツ TOP（index）page エントリ
# 各セクション SCSS を集約（visual / business / projects / recruit / contact）。
# セクション本体は別エージェントが page/home/sections/_*.scss に実装する。
# カラー：暗背景 projects/contact=$color_navy、白 business/recruit=$color_bg。
===================================================== */
/* =====================================================
# TOP section: visual（ファーストビュー / FV）
# block: .p-visual
# 一次ソース: blueprint/visual.md（inspect 219-233・カンプ2000基準）
# 背景＝visual-bg.webp 1枚（写真＋回路ライン＋下端斜め濃紺を焼き込み済）。
#   → CSS の clip-path shape は描かない（二重描画事故の回避）。
#   → visual-bg 内の白帯がセクション間の隙間に見えない位置でFV下端をクロップする。
# キャッチ: left vw(207) / top vw(369) / 64px #fff NotoSans Regular / 手動2行（h1はヘッダーロゴ→FVはh2）
===================================================== */
.p-visual {
  position: relative;
  width: 100%;
  height: min(min(49.5vw, 990px), 990px);
  background-color: #fff;
  overflow: hidden;
  /* --- 背景写真スライダー（同一画像×2を my-gsap.js が scale 1→1.1 ズーム＋クロスフェードでループ・ウッドワーカーと同設定）
     PSD y=1008 でクロップ＝section の overflow:hidden が白帯を隠す（PC は img height:auto を上寄せ） --- */
}
.p-visual__bg {
  position: relative;
  width: 100%;
  height: 100%;
}
.p-visual__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
}
.p-visual__slide picture {
  display: block;
  width: 100%;
  height: 100%;
}
.p-visual__slide img {
  display: block;
  width: 100%;
  height: auto;
  will-change: transform;
}
.p-visual {
  /* --- キャッチコピー（左上・写真の上） --- */
}
.p-visual__copy {
  position: absolute;
  left: min(10.35vw, 207px);
  top: min(18.45vw, 369px);
  z-index: 3;
  max-width: calc(100% - min(20.7vw, 414px));
}
.p-visual__catch {
  color: #fff;
  font-family: "Noto Sans JP", "YuGothic", "游ゴシック", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;
  font-size: clamp(13px, 3.2vw, 64px);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
}
.p-visual {
  /* キャッチ各行（ウッドワーカーと同方式。my-gsap.js が1文字ずつ下から上げる。<br> の代わりに block で2行を積む） */
}
.p-visual__catch-line {
  display: block;
}
.p-visual {
  /* =======================
  # タブレット（〜1199）
  ======================= */
}
.p-visual {
  /* =======================
  # スマホ（〜767）— ヒーローの可読性のため下限を引き上げ（クランプ維持）
  ======================= */
}

/* =====================================================
# TOP section: business（事業内容）
# 一次ソース: PSD「デザイン案_20260619_03.psd」business group
# 座標（2000px基準）:
# section [0,1008,2000,1994] / navy [0,0,605,986]
# photo [204,160,868,824] / title [1000,160,1297,221]
# cards x=999/1276/1553 y=364 w=243 h=323
===================================================== */
.p-business {
  position: relative;
  z-index: 1;
  height: min(min(49.3vw, 986px), 986px);
  max-width: 2000px;
  margin-inline: auto;
  background-color: #fff;
  overflow: hidden;
}
.p-business::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: min(min(30.25vw, 605px), 605px);
  height: 100%;
  background: #0e3469 url("../img/top/business-bg.webp") 0 0/100% 100% no-repeat;
  z-index: 0;
}
.p-business__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
}
.p-business__fig {
  position: absolute;
  top: min(min(8vw, 160px), 160px);
  left: min(min(10.2vw, 204px), 204px);
  width: min(min(33.2vw, 664px), 664px);
  height: min(min(33.2vw, 664px), 664px);
  border-radius: min(min(0.6vw, 12px), 12px);
  overflow: hidden;
  z-index: 2;
}
.p-business__photos, .p-business__photo, .p-business__photo img {
  display: block;
  width: 100%;
  height: 100%;
}
.p-business__photos {
  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;
}
.p-business__photo {
  height: 50%;
  overflow: hidden;
}
.p-business__photo img {
  -o-object-fit: cover;
     object-fit: cover;
}
.p-business__body {
  position: absolute;
  top: min(min(8vw, 160px), 160px);
  left: min(min(49.95vw, 999px), 999px);
  width: min(min(39.85vw, 797px), 797px);
  height: min(min(26.75vw, 535px), 535px);
  z-index: 3;
}
.p-business__ttl {
  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;
  gap: min(min(0.85vw, 17px), 17px);
  margin: 0;
  color: #014099;
  font-family: "Noto Sans JP", "YuGothic", "游ゴシック", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;
}
.p-business__ttl-dot {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: clamp(10px, min(0.8vw, 16px), 16px);
  height: clamp(10px, min(0.8vw, 16px), 16px);
  margin-top: min(min(0.4vw, 8px), 8px);
  border-radius: 50%;
  background-color: currentColor;
}
.p-business__ttl-text {
  display: block;
  color: #014099;
  font-family: "Noto Sans JP", "YuGothic", "游ゴシック", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;
  font-size: clamp(32px, min(3.2vw, 64px), 64px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.04em;
}
.p-business__nav {
  position: absolute;
  top: min(min(10.2vw, 204px), 204px);
  left: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  gap: min(min(1.7vw, 34px), 34px);
  width: min(min(39.85vw, 797px), 797px);
  height: min(min(16.15vw, 323px), 323px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.p-business__nav-item {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  list-style: none;
}
.p-business__card {
  position: relative;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: block;
  width: min(min(12.15vw, 243px), 243px);
  height: min(min(16.15vw, 323px), 323px);
  background-color: #fff;
  border: 2px solid #014099;
  border-radius: min(min(0.35vw, 7px), 7px);
  color: #014099;
  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;
}
.p-business__card-icon {
  position: absolute;
  top: min(min(1.85vw, 37px), 37px);
  left: 50%;
  display: block;
  width: min(min(5vw, 100px), 100px);
  height: min(min(5.75vw, 115px), 115px);
  color: #014099;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.p-business__card-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}
.p-business__card-label {
  position: absolute;
  top: min(min(9.1vw, 182px), 182px);
  left: 0;
  right: 0;
  display: block;
  color: #014099;
  font-family: "Noto Sans JP", "YuGothic", "游ゴシック", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;
  font-size: min(min(1.2vw, 24px), 24px);
  font-weight: 700;
  line-height: 1.32;
  letter-spacing: 0.02em;
  text-align: center;
}
.p-business__card-label--maintenance {
  left: min(min(2.4vw, 48px), 48px);
  right: auto;
  width: min(min(7.1vw, 142px), 142px);
  line-height: 1.2;
  text-align: left;
  white-space: nowrap;
}
.p-business__card-deco {
  position: absolute;
  left: calc(50% - min(min(0.05vw, 1px), 1px));
  top: min(min(13.85vw, 277px), 277px);
  display: block;
  width: min(min(0.9vw, 18px), 18px);
  height: min(min(2.05vw, 41px), 41px);
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.p-business__card-deco::before, .p-business__card-deco::after {
  content: "";
  position: absolute;
  left: 50%;
  background-color: #014099;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.p-business__card-deco::before {
  top: 0;
  width: min(min(0.9vw, 18px), 18px);
  height: min(min(0.9vw, 18px), 18px);
  border-radius: 50%;
}
.p-business__card-deco::after {
  top: min(min(0.75vw, 15px), 15px);
  width: min(min(0.1vw, 2px), 2px);
  height: min(min(1.45vw, 29px), 29px);
}

/* =====================================================
# TOP section: projects（施工実績・横スライダー）— PSD 厳格再現
# 一次ソース inspect（2000 基準・projects [0,1992,2000,2878] H886）:
#   section padding-block 161（title top2153 / nav bottom2717→panel2878）
#   見出し dot[205,2153]16×16 白 ＋ "施工実績"64px Medium 白[238,2153]（gap17）
#   desc 16px 白[204,2292]（2行）/ desc top は title 下端2214+78
#   詳細を見る 240×60 白地[205,2417] 青字18px[278,2438] 青矢印(線24+丸8)[421,2446]
#   前後ナビ 80×80 #e7ebf0 丸 ＋ 青チェブロン16×27 [205,2637]/[302,2637] gap17（nav top=btn下端2477+160）
#   カード 498×566 白[736,2151] 画像498×398[..2549] / カード間 gap40（736→1274）
#     タグ100×32 #014099 白字[776,2589] / 施設名32px #014099[776,2644]（tag下端+23）/ 右下ドット14×14 #014099
#   ※カード説明文は PSD で hidden ＝出さない
# 自己完結（共有 c-ttl/c-btn 非依存）。スライダー JS は script.js（.top-item__*）。
===================================================== */
.p-projects {
  position: relative;
  overflow: hidden;
  background-color: #0f3469;
  background-image: url("../img/top/projects-deco.webp");
  background-repeat: no-repeat;
  background-position: left top;
  background-size: min(min(35vw, 700px), 700px) 100%;
  color: #fff;
  padding-block: min(min(8.05vw, 161px), 161px);
}
.p-projects__inner {
  position: relative;
  z-index: 1;
  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;
  gap: 0;
}
.p-projects {
  /* ── 左カラム（見出し〜ナビ）。幅531で 1枚目カードが x736 から始まる ── */
}
.p-projects__head {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: min(min(26.55vw, 531px), 531px);
}
.p-projects {
  /* 見出し: dot + 施工実績（64px・dot は左上） */
}
.p-projects__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;
  gap: min(min(0.85vw, 17px), 17px);
}
.p-projects__title-dot {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: clamp(10px, min(0.8vw, 16px), 16px);
  height: clamp(10px, min(0.8vw, 16px), 16px);
  margin-top: min(min(0.4vw, 8px), 8px);
  border-radius: 50%;
  background-color: #fff;
}
.p-projects__title-text {
  font-family: "Noto Sans JP", "YuGothic", "游ゴシック", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;
  font-size: clamp(32px, min(3.2vw, 64px), 64px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.04em;
  color: #fff;
}
.p-projects {
  /* 説明（2行・白） */
}
.p-projects__desc {
  margin-top: min(min(3.9vw, 78px), 78px);
  font-size: clamp(13px, min(0.8vw, 16px), 16px);
  font-weight: 500;
  line-height: 1.65;
  letter-spacing: 0.04em;
  color: #fff;
}
.p-projects {
  /* 詳細を見る（240×60 白地・青字・青矢印［線＋丸］・ラベル中央／矢印右端） */
}
.p-projects__more {
  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;
  width: min(min(12vw, 240px), 240px);
  height: min(min(3vw, 60px), 60px);
  margin-top: min(min(4vw, 80px), 80px);
  background-color: #fff;
  border-radius: clamp(4px, min(0.3vw, 6px), 6px);
  text-decoration: none;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}
.p-projects__more-label {
  color: #014099;
  font-family: "Noto Sans JP", "YuGothic", "游ゴシック", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;
  font-size: clamp(14px, min(0.9vw, 18px), 18px);
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1;
}
.p-projects {
  /* 矢印: 線(24×2) ＋ 丸(8) 丸は左端（PSD: dot x421 / 線 x421-445） */
}
.p-projects__more-arrow {
  position: absolute;
  top: 50%;
  right: 0;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: min(min(1.2vw, 24px), 24px);
  height: min(min(0.4vw, 8px), 8px);
  color: #014099;
}
.p-projects__more-arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: currentColor;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.p-projects__more-arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: min(min(0.4vw, 8px), 8px);
  height: min(min(0.4vw, 8px), 8px);
  border-radius: 50%;
  background-color: currentColor;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.p-projects {
  /* 前後ナビ（80×80 淡青グレー丸 ＋ 青チェブロン） */
}
.p-projects__nav {
  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(min(0.85vw, 17px), 17px);
  margin-top: min(min(8vw, 160px), 160px);
}
.p-projects__nav-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;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: min(min(4vw, 80px), 80px);
  height: min(min(4vw, 80px), 80px);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: #e7ebf0;
  color: #014099;
  cursor: pointer;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}
.p-projects__nav-btn:disabled {
  opacity: 0.4;
  cursor: default;
}
.p-projects__nav-ic {
  display: block;
  width: min(min(0.8vw, 16px), 16px);
  height: min(min(1.35vw, 27px), 27px);
}
.p-projects {
  /* ── スライダー（右・右端へはみ出し） ── */
  /* .top-item__list = overflow ビューポート */
}
.p-projects__slider {
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 0;
      -ms-flex: 1 1 0px;
          flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  margin-top: min(min(-0.1vw, -2px), -2px);
  margin-right: min(min(-10.25vw, -205px), -205px);
}
.p-projects {
  /* .top-item__track = translateX レール（件数可変・CMS 拡張性） */
}
.p-projects__track {
  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;
  gap: min(min(2vw, 40px), 40px);
  margin: 0;
  padding: 0;
  list-style: none;
  -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;
  will-change: transform;
}
.p-projects {
  /* .top-item__card（各カード li） */
}
.p-projects__item {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: min(min(24.9vw, 498px), 498px);
}
.p-projects__card {
  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;
  height: 100%;
  overflow: hidden;
  background-color: #fff;
  border-radius: clamp(4px, min(0.4vw, 8px), 8px);
}
.p-projects__thumb {
  position: relative;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 100%;
  aspect-ratio: 498/398;
  overflow: hidden;
}
.p-projects__thumb picture {
  position: absolute;
  inset: 0;
  display: block;
}
.p-projects__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
.p-projects__body {
  position: relative;
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  padding: min(min(2vw, 40px), 40px);
}
.p-projects {
  /* カテゴリタグ（design 固定幅 100×32・縮めない＝CJK 字送り差対策） */
}
.p-projects__cat {
  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(5vw, 100px), 100px);
  height: min(min(1.6vw, 32px), 32px);
  background-color: #014099;
  color: #fff;
  border-radius: clamp(2px, min(0.15vw, 3px), 3px);
  font-size: clamp(13px, min(0.65vw, 13px), 13px);
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1;
}
.p-projects {
  /* 施設名（h3・32px・青） */
}
.p-projects__name {
  margin-top: 0;
  color: #014099;
  font-size: clamp(16px, min(1.6vw, 32px), 32px);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.04em;
  overflow-wrap: anywhere;
}
.p-projects {
  /* 右下 装飾ドット（14×14・青） */
}
.p-projects__card-dot {
  position: absolute;
  right: min(min(0.5vw, 10px), 10px);
  bottom: min(min(0.5vw, 10px), 10px);
  width: min(min(0.7vw, 14px), 14px);
  height: min(min(0.7vw, 14px), 14px);
  border-radius: 50%;
  background-color: #014099;
}

/* =====================================================
# TOP section: recruit（採用情報）— PSD 厳格再現
# inspect recruit [0,2878,2000,3860]（白地・H982）
#   左図版 recruit-figure.webp 900×982（紺帯+方形#1958a0+風景写真+NETUロゴ 焼き込み）
#   右 淡色パネル #edf0ff [836,3121,1794,3773] 958×652（padding 上左160/下168/右60）
#     見出し dot[996,3281] + "採用情報"64px #014099 / desc 16px #000f30(2行) / 詳細ボタン240×60 #014099地白字
# 自己完結（共有 c-ttl/c-btn 非依存）。
===================================================== */
.p-recruit {
  position: relative;
  overflow: hidden;
  background-color: #ffffff;
  min-height: min(min(49.1vw, 982px), 982px);
}
.p-recruit {
  /* 左図版（焼き込み 900×982） */
}
.p-recruit__figure {
  position: absolute;
  left: 0;
  top: 0;
  width: min(min(45vw, 900px), 900px);
  height: 100%;
  z-index: 0;
}
.p-recruit__figure picture, .p-recruit__figure img {
  display: block;
  width: 100%;
  height: 100%;
}
.p-recruit__figure img {
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: left top;
     object-position: left top;
}
.p-recruit__inner {
  position: static;
}
.p-recruit {
  /* 右 淡色パネル（figure と同じ vw 基準で重ねる。通常フローでセクション高さを駆動＝
     LG 時まで PC レイアウトを維持してもパネルがクリップされない。位置は旧 absolute と同一） */
}
.p-recruit__panel {
  position: relative;
  z-index: 1;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin-top: min(min(12.15vw, 243px), 243px);
  margin-left: min(min(41.8vw, 836px), 836px);
  width: min(min(47.9vw, 958px), 958px);
  padding: min(min(8vw, 160px), 160px) min(min(3vw, 60px), 60px) min(min(8.4vw, 168px), 168px) min(min(8vw, 160px), 160px);
  background-color: #edf0ff;
  border-radius: clamp(8px, min(0.7vw, 14px), 14px);
}
.p-recruit__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;
  gap: min(min(0.85vw, 17px), 17px);
}
.p-recruit__title-dot {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: clamp(10px, min(0.8vw, 16px), 16px);
  height: clamp(10px, min(0.8vw, 16px), 16px);
  margin-top: min(min(0.4vw, 8px), 8px);
  border-radius: 50%;
  background-color: #014099;
}
.p-recruit__title-text {
  font-family: "Noto Sans JP", "YuGothic", "游ゴシック", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;
  font-size: clamp(32px, min(3.2vw, 64px), 64px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.04em;
  color: #014099;
}
.p-recruit__desc {
  margin-top: min(min(3.95vw, 79px), 79px);
  font-size: clamp(13px, min(0.8vw, 16px), 16px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: #000f30;
}
.p-recruit {
  /* 詳細を見る（240×60 #014099地・白字・白矢印） */
}
.p-recruit__more {
  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;
  width: min(min(12vw, 240px), 240px);
  height: min(min(3vw, 60px), 60px);
  margin-top: min(min(3.95vw, 79px), 79px);
  background-color: #014099;
  border-radius: clamp(4px, min(0.3vw, 6px), 6px);
  text-decoration: none;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}
.p-recruit__more-label {
  color: #fff;
  font-family: "Noto Sans JP", "YuGothic", "游ゴシック", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;
  font-size: clamp(14px, min(0.9vw, 18px), 18px);
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1;
}
.p-recruit__more-arrow {
  position: absolute;
  top: 50%;
  right: 0;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: min(min(1.2vw, 24px), 24px);
  height: min(min(0.4vw, 8px), 8px);
  color: #fff;
}
.p-recruit__more-arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: currentColor;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.p-recruit__more-arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: min(min(0.4vw, 8px), 8px);
  height: min(min(0.4vw, 8px), 8px);
  border-radius: 50%;
  background-color: currentColor;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

/* =====================================================
# TOP section: contact（お問い合わせ）— PSD 厳格再現
# inspect contact [0,3860,2000,4842]（紺地 #0f3469・H982）
#   左: お問い合わせ(白64px dot)[205,4019] / お電話(32px)[207,4158] / phone40+06-6886-7820(56px)[208,4244]
#       / 営業時間(16px)[206,4325] / メール(32px)[208,4448] / フォームボタン480×100白地青字[206,4534]
#   右図版 contact-figure.webp 1180×982（オフィス写真 焼き込み・紺地込み）/ 左端 contact-deco.webp
# 自己完結（共有 c-ttl/c-btn 非依存）。phone は data-action="call"（tel-3.1.js）。
===================================================== */
.p-contact {
  position: relative;
  overflow: hidden;
  background-color: #0f3469;
  background-image: url("../img/top/contact-deco.webp");
  background-repeat: no-repeat;
  background-position: left top;
  background-size: min(min(35vw, 700px), 700px) 100%;
  color: #fff;
  min-height: min(min(49.1vw, 982px), 982px);
}
.p-contact {
  /* 右図版（焼き込み 1180×982） */
}
.p-contact__figure {
  position: absolute;
  right: 0;
  top: 0;
  width: min(min(59vw, 1180px), 1180px);
  aspect-ratio: 1180/982;
  z-index: 0;
}
.p-contact__figure picture, .p-contact__figure img {
  display: block;
  width: 100%;
  height: 100%;
}
.p-contact__figure img {
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
.p-contact__inner {
  position: relative;
  z-index: 1;
}
.p-contact__body {
  padding-block: min(min(7.95vw, 159px), 159px) min(min(10.4vw, 208px), 208px);
}
.p-contact {
  /* 見出し（白64px + dot） */
}
.p-contact__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;
  gap: min(min(0.85vw, 17px), 17px);
}
.p-contact__title-dot {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: clamp(10px, min(0.8vw, 16px), 16px);
  height: clamp(10px, min(0.8vw, 16px), 16px);
  margin-top: min(min(0.4vw, 8px), 8px);
  border-radius: 50%;
  background-color: #fff;
}
.p-contact__title-text {
  font-family: "Noto Sans JP", "YuGothic", "游ゴシック", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;
  font-size: clamp(32px, min(3.2vw, 64px), 64px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.04em;
  color: #fff;
}
.p-contact {
  /* お電話/メール の各ブロック */
}
.p-contact__item {
  margin-top: min(min(5.35vw, 107px), 107px);
}
.p-contact__item:first-of-type {
  margin-top: min(min(3.95vw, 79px), 79px);
}
.p-contact__label {
  font-family: "Noto Sans JP", "YuGothic", "游ゴシック", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;
  font-size: clamp(16px, min(1.6vw, 32px), 32px);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: #fff;
}
.p-contact {
  /* 電話（phone-solid 40 + 06-6886-7820 56px・PC は表示のみ） */
}
.p-contact__tel {
  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(min(0.55vw, 11px), 11px);
  margin-top: min(min(2.75vw, 55px), 55px);
}
.p-contact__tel-icon {
  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;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: min(min(2vw, 40px), 40px);
  height: min(min(2vw, 40px), 40px);
  color: #fff;
  line-height: 0;
}
.p-contact__tel-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}
.p-contact__tel-num {
  font-family: "Noto Sans JP", "YuGothic", "游ゴシック", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;
  font-size: clamp(28px, min(2.8vw, 56px), 56px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02em;
  color: #fff;
  white-space: nowrap;
}
.p-contact__hours {
  margin-top: min(min(1.9vw, 38px), 38px);
  font-size: clamp(13px, min(0.8vw, 16px), 16px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.04em;
  color: #fff;
}
.p-contact {
  /* お問い合わせフォーム（recruit__more と同じ 240×60 サイズ・白地・青字・封筒） */
}
.p-contact__form {
  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;
  gap: min(min(0.5vw, 10px), 10px);
  width: 240px;
  height: 60px;
  margin-top: min(min(2.75vw, 55px), 55px);
  background-color: #fff;
  border-radius: clamp(4px, min(0.3vw, 6px), 6px);
  text-decoration: none;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}
.p-contact__form-icon {
  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;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: min(min(1vw, 20px), 20px);
  height: min(min(0.75vw, 15px), 15px);
  color: #014099;
  line-height: 0;
}
.p-contact__form-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}
.p-contact__form-label {
  color: #014099;
  font-family: "Noto Sans JP", "YuGothic", "游ゴシック", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;
  font-size: clamp(14px, min(0.9vw, 18px), 18px);
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1;
}

body.index {
  background-color: #ffffff;
}

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

/* =====================================================
# Business（事業内容）— TOP 踏襲（紺 #014099 / Noto）
#  - 写真（左右交互）＋ 淡青テキストボックスが重なり合うレイアウト
#  - PC：重なり 2 カラム / タブレット・SP：縦積み（重なり解除）
#  - 各セクション番号（01/02/03）は写真上部に淡色の大きな数字で配置
#  - ブロック名は body.business と衝突しないよう business-item / business-items 接頭辞
===================================================== */
.business-items {
  position: relative;
  background-color: #ffffff;
  padding-block: min(min(5.5vw, 110px), 110px);
  overflow: hidden;
  /* 背景あしらい（お問い合わせ同様の回路モチーフ・右側のみフェード／白地用に紺の淡色） */
}
.business-items::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: min(min(22vw, 440px), 440px);
  background-image: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(70%, rgba(1, 64, 153, 0.06)));
  background-image: linear-gradient(90deg, transparent 0%, rgba(1, 64, 153, 0.06) 70%);
  -webkit-mask: url("../img/company/circuit.svg") repeat-y left top/100% auto;
  mask: url("../img/company/circuit.svg") repeat-y left top/100% auto;
  pointer-events: none;
  z-index: 0;
}
.business-items::after {
  right: min(min(0.5vw, 10px), 10px);
}

.business-item {
  position: relative;
  z-index: 1;
  scroll-margin-top: clamp(80px, min(6.2vw, 124px), 124px);
}
.business-item + .business-item {
  margin-top: min(min(6vw, 120px), 120px);
}
.business-item__inner {
  width: 100%;
  max-width: 1510px;
  margin-inline: auto;
  padding-inline: 15px;
}
.business-item {
  /* ── 行（重なり 2 カラム） ── */
}
.business-item__row {
  position: relative;
  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;
}
.business-item {
  /* ── 写真 ── */
}
.business-item__media {
  position: relative;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 50%;
      -ms-flex: 0 0 50%;
          flex: 0 0 50%;
  max-width: 50%;
  min-width: 0;
}
.business-item__photo {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  aspect-ratio: 3/2;
  overflow: hidden;
}
.business-item__photo img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.business-item {
  /* 大きな番号（写真の前面・上端から半分はみ出す） */
}
.business-item__num {
  position: absolute;
  top: min(min(-2.9vw, -58px), -58px);
  left: min(min(0.4vw, 8px), 8px);
  z-index: 3;
  font-family: "Noto Sans JP", "YuGothic", "游ゴシック", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;
  font-size: clamp(72px, min(7.5vw, 150px), 150px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  color: rgba(1, 64, 153, 0.5);
  pointer-events: none;
}
.business-item {
  /* ── テキストボックス（淡青・写真に重なる） ── */
}
.business-item__box {
  position: relative;
  z-index: 2;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 54%;
      -ms-flex: 0 0 54%;
          flex: 0 0 54%;
  max-width: 54%;
  margin-left: -4%;
  margin-top: min(min(6vw, 120px), 120px);
  padding: min(min(2.8vw, 56px), 56px);
  background-color: #edf0ff;
}
.business-item {
  /* 逆並び（写真右・ボックス左） */
}
.business-item--reverse .business-item__row {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
}
.business-item--reverse .business-item__media {
  -webkit-box-ordinal-group: 3;
  -webkit-order: 2;
      -ms-flex-order: 2;
          order: 2;
}
.business-item--reverse .business-item__box {
  -webkit-box-ordinal-group: 2;
  -webkit-order: 1;
      -ms-flex-order: 1;
          order: 1;
  margin-left: 0;
  margin-right: -4%;
}
.business-item--reverse .business-item__num {
  left: auto;
  right: min(min(0.4vw, 8px), 8px);
}
.business-item {
  /* タイトル（中央・紺・大きめ） */
}
.business-item__title {
  color: #014099;
  font-family: "Noto Sans JP", "YuGothic", "游ゴシック", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;
  font-size: clamp(24px, min(2vw, 40px), 40px);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.06em;
  text-align: center;
}
.business-item {
  /* タイトルあしらい（中央のライン＋ドット） */
}
.business-item__title-deco {
  position: relative;
  display: block;
  width: min(min(3.6vw, 72px), 72px);
  height: 1px;
  margin: min(min(1.1vw, 22px), 22px) auto min(min(1.5vw, 30px), 30px);
  background-color: rgba(1, 64, 153, 0.45);
}
.business-item__title-deco-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: clamp(8px, min(0.5vw, 10px), 10px);
  height: clamp(8px, min(0.5vw, 10px), 10px);
  border-radius: 50%;
  background-color: #014099;
}
.business-item {
  /* 説明文（本文 justify・18px / CEO 指示） */
}
.business-item__text {
  color: #000f30;
  font-family: "Noto Sans JP", "YuGothic", "游ゴシック", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;
  font-size: clamp(16px, min(1.25vw, 25px), 18px);
  font-weight: 400;
  line-height: 1.95;
  letter-spacing: 0.04em;
  text-align: justify;
  overflow-wrap: anywhere;
}
.business-item__text + .business-item__text {
  margin-top: min(min(0.8vw, 16px), 16px);
}
.business-item {
  /* 主な仕事内容（区切り線で本文と分ける） */
}
.business-item__tasks {
  margin-top: min(min(1.7vw, 34px), 34px);
  padding-top: min(min(1.6vw, 32px), 32px);
  border-top: 1px solid rgba(1, 64, 153, 0.2);
}
.business-item__tasks-title {
  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;
  color: #014099;
  font-family: "Noto Sans JP", "YuGothic", "游ゴシック", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;
  font-size: clamp(16px, min(1vw, 20px), 20px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
}
.business-item__tasks-dot {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: clamp(8px, min(0.6vw, 12px), 12px);
  height: clamp(8px, min(0.6vw, 12px), 12px);
  margin-right: min(min(0.4vw, 8px), 8px);
  border-radius: 50%;
  background-color: #014099;
}
.business-item__list {
  margin: min(min(0.7vw, 14px), 14px) 0 0;
  padding: 0;
  list-style: none;
}
.business-item__list-item {
  position: relative;
  padding-left: 1.2em;
  color: #000f30;
  font-family: "Noto Sans JP", "YuGothic", "游ゴシック", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;
  font-size: clamp(16px, min(1.25vw, 25px), 18px);
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: 0.04em;
  overflow-wrap: anywhere;
}
.business-item__list-item::before {
  content: "・";
  position: absolute;
  left: 0;
  color: #014099;
}

/* =====================================================
# Company（会社概要）— TOP 踏襲（紺 #0f3469 / 青 #014099 / 白・Noto・回路ドット見出し）
#   MV(mv-h2) → ご挨拶(白) → 企業理念(紺地・白文字) → 会社概要(白・表) → アクセスマップ(淡 #edf0ff)
#   本文は下層 justify（CEO ルール）。リキッド均整 clamp(13px, vw, px)。
===================================================== */
body.company {
  background-color: #ffffff;
  /* ── セクション共通 ── */
}
body.company .company-section {
  position: relative;
  overflow: hidden;
  padding-block: min(min(5.6vw, 112px), 112px);
}
body.company .company-section--navy {
  background-color: #0f3469;
  color: #fff;
}
body.company .company-section--pale {
  background-color: #edf0ff;
}
body.company .company-section {
  /* 回路トレースのあしらい（淡色セクション=アクセスの四隅・点対称）。企業理念(紺)は別途 contact-tel 方式（両側フェード）。 */
}
body.company .company-section--pale::before, body.company .company-section--pale::after {
  content: "";
  position: absolute;
  width: min(min(19vw, 380px), 380px);
  aspect-ratio: 1/1;
  background-color: rgba(1, 64, 153, 0.07);
  -webkit-mask: url("../img/company/circuit.svg") no-repeat center/contain;
  mask: url("../img/company/circuit.svg") no-repeat center/contain;
  pointer-events: none;
  z-index: 0;
}
body.company .company-section--pale::before {
  top: 0;
  right: 0;
}
body.company .company-section--pale::after {
  bottom: 0;
  left: 0;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
body.company .company-section__inner {
  position: relative;
  z-index: 1;
}
body.company {
  /* ── 見出し（小EN ＋ 回路ドット＋和字タイトル・中央） ── */
  /* 見出し（ホーム/お問い合わせのセクションタイトルと完全統一：ドット + 和文・$color_main） */
}
body.company .company-heading {
  text-align: center;
  margin-bottom: min(min(2.8vw, 56px), 56px);
}
body.company .company-heading__ja {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: min(min(0.8vw, 16px), 16px);
  margin: 0;
  font-family: "Noto Sans JP", "YuGothic", "游ゴシック", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;
  font-size: clamp(24px, min(2.2vw, 44px), 44px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.04em;
  color: #014099;
}
body.company .company-heading__dot {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: clamp(10px, min(0.8vw, 16px), 16px);
  height: clamp(10px, min(0.8vw, 16px), 16px);
  margin-top: clamp(6px, min(0.5vw, 10px), 10px);
  border-radius: 50%;
  background-color: #014099;
}
body.company .company-heading {
  /* 紺地（企業理念）用 */
}
body.company .company-heading--light .company-heading__ja {
  color: #fff;
}
body.company .company-heading--light .company-heading__dot {
  background-color: #fff;
}
body.company {
  /* ── ご挨拶 ── */
}
body.company .company-greeting__body {
  max-width: calc(910 * var(--to-rem));
  margin-inline: auto;
}
body.company .company-greeting__text {
  margin: 0;
  font-family: "Noto Sans JP", "YuGothic", "游ゴシック", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;
  font-weight: 400;
  font-size: clamp(15px, min(1.15vw, 23px), 23px);
  line-height: 2.05;
  letter-spacing: 0.04em;
  color: #000f30;
  text-align: justify;
}
body.company .company-greeting__text:not(:first-child) {
  margin-top: min(min(1.4vw, 28px), 28px);
}
body.company .company-greeting__sign {
  margin: min(min(2.4vw, 48px), 48px) 0 0;
  text-align: right;
  color: #014099;
  font-family: "Noto Sans JP", "YuGothic", "游ゴシック", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;
}
body.company .company-greeting__sign-role {
  font-size: clamp(13px, min(0.75vw, 15px), 15px);
  letter-spacing: 0.12em;
  margin-right: min(min(0.7vw, 14px), 14px);
}
body.company .company-greeting__sign-name {
  font-size: clamp(18px, min(1.2vw, 24px), 24px);
  font-weight: 700;
  letter-spacing: 0.12em;
}
body.company {
  /* ── 企業理念（紺地・白文字） ── */
}
body.company .company-philosophy {
  /* あしらい：回路装飾を左右「上部だけ」に置き内側へフェード（contact-tel と同じ横幅基準スケール・縦伸び防止） */
}
body.company .company-philosophy::before, body.company .company-philosophy::after {
  content: "";
  position: absolute;
  top: 0;
  width: min(min(23vw, 460px), 460px);
  height: min(min(28vw, 560px), 560px);
  background: url(../img/top/contact-deco.webp) no-repeat left top;
  background-size: cover;
  opacity: 0.7;
  pointer-events: none;
  z-index: 0;
  -webkit-mask-image: -webkit-gradient(linear, left top, right top, color-stop(35%, #000), to(transparent));
  -webkit-mask-image: linear-gradient(90deg, #000 35%, transparent 100%);
  mask-image: -webkit-gradient(linear, left top, right top, color-stop(35%, #000), to(transparent));
  mask-image: linear-gradient(90deg, #000 35%, transparent 100%);
}
body.company .company-philosophy::before {
  left: 0;
}
body.company .company-philosophy::after {
  right: 0;
  -webkit-transform: scaleX(-1);
          transform: scaleX(-1);
}
body.company .company-philosophy__catch {
  margin: 0 0 min(min(2.4vw, 48px), 48px);
  text-align: center;
  font-family: "Noto Sans JP", "YuGothic", "游ゴシック", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;
  font-weight: 700;
  font-size: clamp(20px, min(1.4vw, 28px), 28px);
  line-height: 1.7;
  letter-spacing: 0.08em;
  color: #ffe082;
}
body.company .company-philosophy__body {
  max-width: calc(1000 * var(--to-rem));
  margin-inline: auto;
}
body.company .company-philosophy__text {
  margin: 0;
  font-family: "Noto Sans JP", "YuGothic", "游ゴシック", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;
  font-weight: 400;
  font-size: clamp(13px, min(1vw, 20px), 20px);
  line-height: 2.05;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.92);
  text-align: center;
}
body.company .company-philosophy__text:not(:first-child) {
  margin-top: min(min(1.2vw, 24px), 24px);
}
body.company {
  /* ── 会社概要（表） ── */
}
body.company .company-table {
  width: 100%;
  max-width: calc(900 * var(--to-rem));
  margin-inline: auto;
  border-collapse: collapse;
  border-top: 1px solid rgba(1, 64, 153, 0.35);
}
body.company .company-table tr {
  border-bottom: 1px solid rgba(1, 64, 153, 0.18);
}
body.company .company-table th,
body.company .company-table td {
  padding: min(min(1.2vw, 24px), 24px) min(min(1.2vw, 24px), 24px);
  vertical-align: top;
  text-align: left;
  font-size: clamp(15px, min(1vw, 20px), 20px);
  line-height: 1.9;
  letter-spacing: 0.04em;
}
body.company .company-table th {
  width: 28%;
  font-family: "Noto Sans JP", "YuGothic", "游ゴシック", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;
  font-weight: 700;
  color: #014099;
  white-space: nowrap;
  background-color: #edf0ff;
}
body.company .company-table td {
  font-family: "Noto Sans JP", "YuGothic", "游ゴシック", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;
  font-weight: 400;
  color: #000f30;
  background-color: #fff;
}
body.company .company-table {
  /* SP：th/td を縦積みブロックに */
}
body.company {
  /* ── アクセスマップ ── */
}
body.company .company-map__frame {
  max-width: calc(900 * var(--to-rem));
  margin-inline: auto;
  line-height: 0;
  -webkit-box-shadow: 0 min(min(0.7vw, 14px), 14px) min(min(2vw, 40px), 40px) rgba(15, 52, 105, 0.14);
          box-shadow: 0 min(min(0.7vw, 14px), 14px) min(min(2vw, 40px), 40px) rgba(15, 52, 105, 0.14);
}
body.company .company-map__frame iframe {
  display: block;
  width: 100%;
  height: clamp(280px, min(22vw, 440px), 440px);
  border: 0;
}
body.company .company-map__action {
  text-align: center;
  margin-top: min(min(2vw, 40px), 40px);
}
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: clamp(220px, min(13vw, 260px), 260px);
  height: clamp(52px, min(3vw, 60px), 60px);
  padding-inline: clamp(20px, min(1.6vw, 32px), 32px);
  background-color: #014099;
  color: #fff;
  text-decoration: none;
  border-radius: clamp(4px, min(0.3vw, 6px), 6px);
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}
body.company .company-map__btn-text {
  font-family: "Noto Sans JP", "YuGothic", "游ゴシック", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;
  font-size: clamp(14px, min(0.85vw, 17px), 17px);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-indent: 0.1em;
  line-height: 1;
}

/* =====================================================
# page: products（施工実績 / CL02・CMS カード）
#  - TOP（p-projects）の配色・トーンを踏襲（タグ＝紺 #014099 白字 / 見出し＝紺 / Noto）
#  - カード高さ均一：Grid で行内 stretch ＝高さ自動均一
#      本体は flex 縦 → タイトルを flex:1 で伸ばし view more を下端固定
#      サムネは aspect-ratio 固定 → 写真が無くてもグレー地で同じ高さを維持
#  - カテゴリ／件数／写真は CL02 で動的（増減に耐える：flex-wrap・overflow-wrap・横スクロール0）
#  - ブロック名は body.products と衝突しないよう必ず products- 接頭辞（.products 単体は使わない）
===================================================== */
/* 下層コンテンツ枠（recruit / contact と同じ約1100px。max-width は固定px＝vw連動禁止） */
.products-listing__inner,
.products-other__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1130px;
  margin-inline: auto;
  padding-inline: 15px;
}

/* ── 一覧セクション（見出しを持たない＝div コンテナ） ── */
.products-listing {
  position: relative;
  background-color: #ffffff;
  padding-block: min(min(5vw, 100px), 100px);
  overflow: hidden;
  /* 回路あしらい（会社概要と同じ circuit モチーフ・四隅 点対称・淡色） */
}
.products-listing::before, .products-listing::after {
  content: "";
  position: absolute;
  width: min(min(18vw, 360px), 360px);
  aspect-ratio: 1/1;
  background-color: rgba(1, 64, 153, 0.1);
  -webkit-mask: url("../img/company/circuit.svg") no-repeat center/contain;
  mask: url("../img/company/circuit.svg") no-repeat center/contain;
  pointer-events: none;
  z-index: 0;
}
.products-listing::before {
  top: min(min(2vw, 40px), 40px);
  right: 0;
}
.products-listing::after {
  bottom: min(min(2vw, 40px), 40px);
  left: 0;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

/* ── カテゴリ（<a> リンク遷移・増減対応で flex-wrap） ── */
.products-cat {
  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: min(min(1vw, 20px), 20px);
}
.products-cat__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: min(min(8vw, 160px), 160px);
  min-height: min(min(2.8vw, 56px), 56px);
  padding-inline: min(min(1.8vw, 36px), 36px);
  border: 1px solid #014099;
  border-radius: clamp(4px, min(0.3vw, 6px), 6px);
  background-color: #fff;
  color: #014099;
  font-family: "Noto Sans JP", "YuGothic", "游ゴシック", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;
  font-size: clamp(14px, min(0.9vw, 18px), 18px);
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  -webkit-transition: background-color 0.3s ease, color 0.3s ease;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.products-cat__btn.is-active {
  background-color: #014099;
  color: #fff;
}

/* ── カードグリッド（PC3列 / TB2列 / SP1列・行内 stretch で高さ均一） ── */
.products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  -webkit-column-gap: min(min(2vw, 40px), 40px);
     -moz-column-gap: min(min(2vw, 40px), 40px);
          column-gap: min(min(2vw, 40px), 40px);
  row-gap: min(min(2.4vw, 48px), 48px);
  margin-top: 0;
}

/* ── カード（article = grid item） ── */
.products-card {
  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;
  height: 100%;
  background-color: #fff;
  border: 1px solid #cfd6e1;
  overflow: hidden;
  -webkit-transition: -webkit-box-shadow 0.3s ease, -webkit-transform 0.3s ease;
  transition: -webkit-box-shadow 0.3s ease, -webkit-transform 0.3s ease;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  transition: box-shadow 0.3s ease, transform 0.3s ease, -webkit-box-shadow 0.3s ease, -webkit-transform 0.3s ease;
}
.products-card {
  /* サムネ（aspect-ratio 固定＝写真の有無で高さが変わらない） */
}
.products-card__thumb {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 3/2;
  background-color: #c9ccce;
  overflow: hidden;
}
.products-card__thumb picture,
.products-card__thumb img {
  display: block;
  width: 100%;
  height: 100%;
}
.products-card__thumb img {
  -o-object-fit: cover;
     object-fit: cover;
}
.products-card {
  /* 本体（flex 縦：バッジ上 / タイトル中央伸縮 / view more 下端） */
}
.products-card__body {
  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-flex: 1;
  -webkit-flex: 1 1 auto;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  min-width: 0;
  padding: min(min(1.2vw, 24px), 24px);
}
.products-card {
  /* カテゴリバッジ（紺地・白字・上部左寄せ。有無で崩れない絶対サイズ） */
}
.products-card__cat {
  -webkit-align-self: flex-start;
      -ms-flex-item-align: start;
          align-self: flex-start;
  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;
  padding: min(min(0.3vw, 6px), 6px) min(min(0.8vw, 16px), 16px);
  background-color: #014099;
  color: #fff;
  font-size: clamp(13px, min(0.7vw, 14px), 14px);
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.4;
  white-space: nowrap;
}
.products-card {
  /* タイトル（中央・flex:1 で伸ばし高さを均一化・文字増減に追従） */
}
.products-card__title {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  -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;
  color: #000f30;
  font-family: "Noto Sans JP", "YuGothic", "游ゴシック", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;
  font-size: clamp(16px, min(1vw, 20px), 20px);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.04em;
  text-align: center;
  overflow-wrap: anywhere;
}
.products-card {
  /* view more（淡青地・紺字・下端右寄せ） */
}
.products-card__more {
  -webkit-align-self: flex-end;
      -ms-flex-item-align: end;
          align-self: flex-end;
  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(min(0.4vw, 8px), 8px);
  margin-top: min(min(1vw, 20px), 20px);
  padding: 9px min(min(0.9vw, 18px), 18px);
  background-color: #c4d4ea;
  color: #014099;
}
.products-card__more-text {
  font-family: "Noto Sans JP", "YuGothic", "游ゴシック", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;
  font-size: clamp(13px, min(0.7vw, 14px), 14px);
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1;
}
.products-card__more-arrow {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  width: min(min(1.3vw, 26px), 26px);
  color: #014099;
}
.products-card__more-arrow svg {
  display: block;
  width: 100%;
  height: auto;
}

/* ── ページネーション（EZ標準 .paging 構造・分割ピル） ── */
.products-paging {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: min(min(3.6vw, 72px), 72px) auto 0;
  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;
  border: 1px solid #014099;
  border-radius: clamp(4px, min(0.4vw, 8px), 8px);
  overflow: hidden;
}
.products-paging .paging-text {
  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;
  font-family: "Noto Sans JP", "YuGothic", "游ゴシック", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;
  font-size: clamp(14px, min(0.9vw, 18px), 18px);
  font-weight: 500;
  line-height: 1;
}
.products-paging .paging-text + .paging-text {
  border-left: 1px solid #014099;
}
.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;
  min-width: min(min(2.8vw, 56px), 56px);
  min-height: min(min(2.6vw, 52px), 52px);
  padding-inline: min(min(0.7vw, 14px), 14px);
  color: #014099;
  text-decoration: none;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}
.products-paging .current {
  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-width: min(min(2.8vw, 56px), 56px);
  min-height: min(min(2.6vw, 52px), 52px);
  padding-inline: min(min(0.9vw, 18px), 18px);
  background-color: #014099;
  color: #fff;
}

/* ── 【その他】施工実績一覧（静的テキスト） ── */
.products-other {
  background-color: #ffffff;
  padding-bottom: min(min(6vw, 120px), 120px);
}
.products-other__title {
  color: #014099;
  font-family: "Noto Sans JP", "YuGothic", "游ゴシック", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;
  font-size: clamp(20px, min(1.4vw, 28px), 28px);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.4;
}
.products-other__box {
  margin-top: min(min(1.6vw, 32px), 32px);
  padding: min(min(2.8vw, 56px), 56px);
  background-color: #edf0ff;
  border-radius: clamp(4px, min(0.4vw, 8px), 8px);
}
.products-other__group + .products-other__group {
  margin-top: min(min(2.4vw, 48px), 48px);
}
.products-other__cat {
  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;
  color: #014099;
  font-family: "Noto Sans JP", "YuGothic", "游ゴシック", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;
  font-size: clamp(16px, min(1.1vw, 22px), 22px);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.4;
}
.products-other__bullet {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: clamp(8px, min(0.6vw, 12px), 12px);
  height: clamp(8px, min(0.6vw, 12px), 12px);
  margin-right: min(min(0.4vw, 8px), 8px);
  border-radius: 50%;
  background-color: #014099;
}
.products-other__text {
  margin-top: min(min(0.8vw, 16px), 16px);
  color: #000f30;
  font-size: clamp(13px, min(0.8vw, 16px), 16px);
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: 0.04em;
  overflow-wrap: anywhere;
}
.products-other__text:first-of-type {
  margin-top: min(min(1vw, 20px), 20px);
}

/* =====================================================
# page: products-detail（施工実績 詳細 / products.html・CL02 CMS 詳細）
#  - TOP（p-projects）の配色・トーンを踏襲：メイン青 #014099 / Noto / ドット・矢印
#  - レイアウト：写真（左）／タイトル・説明文（右）の 2 カラム（SP で縦積み）
#  - 写真はメイン・サムネとも .photo-ofi（どんな縦横比でも全体表示・CMS 写真枚数可変）
#  - ブロック名は body.products-detail と衝突しないよう products-single 接頭辞
===================================================== */
.products-single {
  background-color: #ffffff;
  padding-block: min(min(5vw, 100px), 100px);
  overflow-x: hidden;
}
.products-single {
  /* 下層コンテンツ枠（products / recruit / contact と同じ約1100px・固定px＝vw連動禁止） */
}
.products-single__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1130px;
  margin-inline: auto;
  padding-inline: 15px;
}
.products-single {
  /* ── 2 カラム本体 ── */
}
.products-single__main {
  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;
  gap: min(min(3vw, 60px), 60px);
}
.products-single {
  /* ── 左：写真エリア ── */
}
.products-single__media {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 45%;
      -ms-flex: 0 0 45%;
          flex: 0 0 45%;
  max-width: 45%;
  min-width: 0;
}
.products-single {
  /* ── 右：テキストボックス ── */
}
.products-single__text-box {
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  min-width: 0;
  padding-top: min(min(0.4vw, 8px), 8px);
}
.products-single__title {
  color: #014099;
  font-family: "Noto Sans JP", "YuGothic", "游ゴシック", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;
  font-size: clamp(20px, min(1.6vw, 32px), 32px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
  overflow-wrap: anywhere;
}
.products-single {
  /* 説明文（html 入力エリア＝div / line-height: normal を明示） */
}
.products-single__text {
  margin-top: min(min(1.4vw, 28px), 28px);
  color: #000f30;
  font-family: "Noto Sans JP", "YuGothic", "游ゴシック", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;
  font-size: clamp(16px, min(0.8vw, 16px), 16px);
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0.04em;
  text-align: left;
  overflow-wrap: anywhere;
}
.products-single__text p {
  margin-block: 0;
}
.products-single__text p + p {
  margin-top: 1em;
}
.products-single {
  /* ── メインスライダー ── */
}
.products-single-slider {
  position: relative;
}
.products-single-slider .photo-ofi {
  padding-bottom: 66.66%;
  background-color: #efefef;
}
.products-single {
  /* メイン画像（クリックで拡大モーダル）＝スライド内ボタン */
}
.products-single__zoom {
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid #cfd6e1;
  background: none;
  cursor: -webkit-zoom-in;
  cursor: zoom-in;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.products-single {
  /* 前後ナビ（TOP と同トーン：淡青グレー丸＋青チェブロン） */
}
.products-single__nav {
  position: absolute;
  top: 50%;
  z-index: 3;
  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: 39px;
  height: 39px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  border: none;
  border-radius: 50%;
  background-color: #e7ebf0;
  color: #014099;
  cursor: pointer;
  -webkit-box-shadow: 0 2px 10px rgba(15, 52, 105, 0.18);
          box-shadow: 0 2px 10px rgba(15, 52, 105, 0.18);
  -webkit-transition: opacity 0.3s ease, background-color 0.3s ease;
  transition: opacity 0.3s ease, background-color 0.3s ease;
}
.products-single__nav svg {
  display: block;
  width: 9px;
  height: auto;
}
.products-single__nav--prev {
  left: min(min(0.7vw, 14px), 14px);
}
.products-single__nav--next {
  right: min(min(0.7vw, 14px), 14px);
}
.products-single__nav.swiper-button-disabled {
  opacity: 0.3;
  cursor: default;
  -webkit-box-shadow: none;
          box-shadow: none;
}
.products-single {
  /* ── サムネイルスライダー（クリックでメイン連動・active は青枠） ── */
}
.products-single-thumbs {
  margin-top: min(min(0.7vw, 14px), 14px);
}
.products-single-thumbs .swiper-slide {
  cursor: pointer;
  border: 1px solid #cfd6e1;
  opacity: 0.6;
  -webkit-transition: border-color 0.3s ease, opacity 0.3s ease;
  transition: border-color 0.3s ease, opacity 0.3s ease;
}
.products-single-thumbs .swiper-slide-thumb-active {
  border-color: #014099;
  opacity: 1;
}
.products-single-thumbs .photo-ofi {
  padding-bottom: 66.66%;
}
.products-single {
  /* ── 一覧に戻る ── */
}
.products-single__back {
  margin-top: min(min(3.6vw, 72px), 72px);
  text-align: center;
}
.products-single__back-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;
  gap: min(min(0.7vw, 14px), 14px);
  min-width: min(min(12vw, 240px), 240px);
  min-height: 60px;
  padding-inline: min(min(1.8vw, 36px), 36px);
  background-color: #c4d4ea;
  color: #014099;
  font-family: "Noto Sans JP", "YuGothic", "游ゴシック", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;
  font-size: clamp(14px, min(0.9vw, 18px), 18px);
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.4;
  text-decoration: none;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}
.products-single__back-arrow {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  width: min(min(1.3vw, 26px), 26px);
  color: #014099;
}
.products-single__back-arrow svg {
  display: block;
  width: 100%;
  height: auto;
}

/* =====================================================
# Contact Page（TOP 踏襲）
#   MV(mv-h2) → お電話でのお問い合わせ(紺地・TOP p-contact 踏襲)
#   → メールでのお問い合わせ(白地フォーム・ドット見出し)
===================================================== */
body.contact {
  /* ---------- 必須ラベル ---------- */
}
body.contact .label {
  display: inline-block;
  background-color: #014099;
  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 {
  /* ---------- お電話でのお問い合わせ（TOP p-contact 踏襲・紺地＋回路あしらい） ---------- */
}
body.contact .contact-tel {
  position: relative;
  overflow: hidden;
  background-color: #0f3469;
  color: #fff;
  padding-block: min(min(5.6vw, 112px), 112px);
}
body.contact .contact-tel {
  /* あしらい：回路風ライン装飾（TOP お問い合わせ踏襲・contact-deco）を左右に配置し中央を挟む。
     内側へフェードして紺地に馴染ませる */
}
body.contact .contact-tel::before, body.contact .contact-tel::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: min(min(23vw, 460px), 460px);
  background: url(../img/top/contact-deco.webp) no-repeat left top;
  background-size: cover;
  opacity: 0.7;
  pointer-events: none;
  z-index: 0;
  -webkit-mask-image: -webkit-gradient(linear, left top, right top, color-stop(35%, #000), to(transparent));
  -webkit-mask-image: linear-gradient(90deg, #000 35%, transparent 100%);
  mask-image: -webkit-gradient(linear, left top, right top, color-stop(35%, #000), to(transparent));
  mask-image: linear-gradient(90deg, #000 35%, transparent 100%);
}
body.contact .contact-tel::before {
  left: 0;
}
body.contact .contact-tel::after {
  right: 0;
  -webkit-transform: scaleX(-1);
          transform: scaleX(-1);
}
body.contact .contact-tel__inner {
  position: relative;
  z-index: 1;
  text-align: center;
}
body.contact .contact-tel {
  /* ラベル：左右に短い装飾ライン（あしらい） */
}
body.contact .contact-tel__label {
  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(min(1vw, 20px), 20px);
  font-family: "Noto Sans JP", "YuGothic", "游ゴシック", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;
  font-size: clamp(16px, min(1.4vw, 28px), 28px);
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.4;
}
body.contact .contact-tel__label::before, body.contact .contact-tel__label::after {
  content: "";
  width: clamp(28px, min(2.7vw, 54px), 54px);
  height: 1px;
  background-color: rgba(255, 255, 255, 0.55);
}
body.contact .contact-tel__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;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: min(min(0.7vw, 14px), 14px);
  margin-top: min(min(2vw, 40px), 40px);
}
body.contact .contact-tel__icon {
  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;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: min(min(2vw, 40px), 40px);
  height: min(min(2vw, 40px), 40px);
  color: #fff;
  line-height: 0;
}
body.contact .contact-tel__icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}
body.contact .contact-tel__tel {
  font-family: "Noto Sans JP", "YuGothic", "游ゴシック", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;
  font-size: clamp(28px, min(2.8vw, 56px), 56px);
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1;
  color: #fff;
  white-space: nowrap; /* 番号を1行に固定。PC は表示のみ＝cursor/hover/transition なし */
}
body.contact .contact-tel__hours {
  margin-top: min(min(1.7vw, 34px), 34px);
  font-size: clamp(13px, min(0.8vw, 16px), 16px);
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1;
}
body.contact {
  /* ---------- メールでのお問い合わせ（フォーム・白地） ---------- */
}
body.contact .mail-form {
  background-color: #fff;
  padding-block: min(min(5.5vw, 110px), 110px);
  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 {
  /* 見出し（TOP p-contact 踏襲：ドット + 和文・$color_main） */
}
body.contact .mail-form__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;
  gap: min(min(0.8vw, 16px), 16px);
}
body.contact .mail-form__title-dot {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: clamp(10px, min(0.8vw, 16px), 16px);
  height: clamp(10px, min(0.8vw, 16px), 16px);
  margin-top: clamp(6px, min(0.5vw, 10px), 10px);
  border-radius: 50%;
  background-color: #014099;
}
body.contact .mail-form__title-text {
  font-family: "Noto Sans JP", "YuGothic", "游ゴシック", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;
  font-size: clamp(24px, min(2.2vw, 44px), 44px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.04em;
  color: #014099;
}
body.contact .mail-form__text {
  margin-top: min(min(2.5vw, 50px), 50px);
  text-align: justify; /* EZルール：下層ページの本文は両端揃え */
}
body.contact .mail-form__text > p {
  line-height: 2;
}
body.contact .mail-form__text {
  /* 必須ラベルと「は必須項目です。」の間に余白（CEO 指示 2026-06-24） */
}
body.contact .mail-form__text .label {
  margin-right: 5px;
}
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(237, 240, 255, 0.6);
  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 {
  /* ラジオボタン・チェックボックス */
}
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 #014099;
  border-right: 3px solid #014099;
  -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;
}

/* =====================================================
# 個人情報の取り扱い（お問い合わせ・採用エントリーで共有）
#   2026-08-06 採用情報ページにも同ブロックを設置したため
#   body.contact の内側から出して両ページで共有する
===================================================== */
body.contact .privacy-policy,
body.recruit .privacy-policy {
  font-size: calc(20 * var(--to-rem));
  font-weight: 500;
  margin-block: 30px;
  text-align: center;
  font-family: "Noto Sans JP", "YuGothic", "游ゴシック", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;
  color: #014099;
}
body.contact .box-scroll,
body.recruit .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ルール：下層ページの本文は両端揃え */
}
body.contact .box-scroll__title,
body.recruit .box-scroll__title {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
  border-left: 8px solid #000f30;
  margin-bottom: 8px;
  padding-left: 8px;
}
body.contact .box-scroll__li,
body.recruit .box-scroll__li {
  text-indent: -25px;
  padding-left: 25px;
  letter-spacing: 0;
  margin-bottom: 7px;
}
body.contact .privacy-wrapper,
body.recruit .privacy-wrapper {
  text-align: center;
}
body.contact .privacy__title,
body.recruit .privacy__title {
  font-weight: 600;
  border-bottom: 1px solid #666;
  padding-bottom: 5px;
  margin-bottom: 10px;
}
body.contact .privacy__link,
body.recruit .privacy__link {
  color: blue;
  text-decoration: underline;
}
body.contact .privacy-btn,
body.recruit .privacy-btn {
  display: inline-block;
  background-color: #014099;
  color: #fff;
  padding: 15px 10px;
  width: 350px;
}
body.contact .privacy-btn__wrapper,
body.recruit .privacy-btn__wrapper {
  text-align: center;
  margin-top: 60px;
  margin-bottom: 30px;
}

/* =====================================================
# Recruit Page（TOP 踏襲）
#   MV(mv-h2) → 採用メッセージ(淡色) → 募集要項(表) →
#   エントリーフォーム(白地) → パートナー募集(淡色)
===================================================== */
body.recruit {
  /* ---------- 必須ラベル ---------- */
}
body.recruit .label {
  display: inline-block;
  background-color: #014099;
  color: #fff;
  font-size: 13px;
  text-align: center;
  width: 45px;
  height: calc(28 * var(--to-rem));
  line-height: calc(28 * var(--to-rem));
}
body.recruit {
  /* ---------- 共通：ドット見出し（TOP 踏襲） ---------- */
}
body.recruit .recruit-heading {
  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;
  gap: min(min(0.8vw, 16px), 16px);
}
body.recruit .recruit-heading__dot {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: clamp(10px, min(0.8vw, 16px), 16px);
  height: clamp(10px, min(0.8vw, 16px), 16px);
  margin-top: clamp(8px, min(0.6vw, 12px), 12px);
  border-radius: 50%;
  background-color: #014099;
}
body.recruit .recruit-heading__text {
  font-family: "Noto Sans JP", "YuGothic", "游ゴシック", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;
  font-size: clamp(26px, min(2.4vw, 48px), 48px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.04em;
  color: #014099;
}
body.recruit {
  /* ---------- 採用メッセージ（淡色パネル・TOP 採用情報踏襲） ---------- */
}
body.recruit .recruit-lead {
  position: relative;
  overflow: hidden;
  background-color: #edf0ff;
  padding-block: min(min(5vw, 100px), 100px);
}
body.recruit .recruit-lead {
  /* あしらい：回路風ライン装飾（contact-tel と同方式・淡色版 recruit-deco）を左右に配置し中央へフェード */
}
body.recruit .recruit-lead::before, body.recruit .recruit-lead::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: min(min(23vw, 460px), 460px);
  background: url(../img/recruit/recruit-deco.webp) no-repeat left top;
  background-size: cover;
  opacity: 0.4;
  pointer-events: none;
  z-index: 0;
  -webkit-mask-image: -webkit-gradient(linear, left top, right top, color-stop(30%, #000), to(transparent));
  -webkit-mask-image: linear-gradient(90deg, #000 30%, transparent 100%);
  mask-image: -webkit-gradient(linear, left top, right top, color-stop(30%, #000), to(transparent));
  mask-image: linear-gradient(90deg, #000 30%, transparent 100%);
}
body.recruit .recruit-lead::before {
  left: 0;
}
body.recruit .recruit-lead::after {
  right: 0;
  -webkit-transform: scaleX(-1);
          transform: scaleX(-1);
}
body.recruit .recruit-lead__inner {
  position: relative;
  z-index: 1;
  text-align: center;
}
body.recruit .recruit-lead__catch {
  font-family: "Noto Sans JP", "YuGothic", "游ゴシック", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;
  font-size: clamp(22px, min(2vw, 40px), 40px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: #014099;
}
body.recruit .recruit-lead__text {
  margin-top: min(min(2.8vw, 56px), 56px);
  color: #000f30;
}
body.recruit .recruit-lead__text p {
  /* 会社概要 company-greeting__text に合わせる（20px・CEO 指示 2026-06-24） */
  font-size: clamp(13px, min(1vw, 20px), 20px);
  line-height: 2;
}
body.recruit .recruit-lead__text p + p {
  margin-top: 1.6em;
}
body.recruit {
  /* ---------- 募集要項 ---------- */
}
body.recruit .recruit-info {
  background-color: #ffffff;
  padding-block: min(min(5.5vw, 110px), 110px);
}
body.recruit .recruit-info__inner {
  max-width: 1130px;
  padding-inline: calc(15 * var(--to-rem));
  margin-inline: auto;
}
body.recruit .recruit-table {
  width: 100%;
  margin-top: min(min(2.5vw, 50px), 50px);
  border-collapse: collapse;
}
body.recruit .recruit-table th,
body.recruit .recruit-table td {
  border: 1px solid #ccc;
  padding: min(min(1.2vw, 24px), 24px) min(min(1.5vw, 30px), 30px);
  vertical-align: middle;
  line-height: 1.7;
  font-size: clamp(14px, min(0.8vw, 16px), 16px);
}
body.recruit .recruit-table th {
  width: 22%;
  background-color: #edf0ff;
  color: #014099;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}
body.recruit .recruit-table td {
  background-color: #f6f6f6;
  color: #000f30;
  text-align: center;
}
body.recruit {
  /* ---------- エントリーフォーム（白地） ---------- */
}
body.recruit .entry-form {
  background-color: #ffffff;
  padding-block: min(min(5.5vw, 110px), 110px);
  letter-spacing: 0;
}
body.recruit .entry-form__inner {
  max-width: 1100px;
  padding-inline: calc(15 * var(--to-rem));
  margin-inline: auto;
}
body.recruit .entry-form ::-webkit-input-placeholder {
  color: #aaa;
}
body.recruit .entry-form ::-moz-placeholder {
  color: #aaa;
}
body.recruit .entry-form :-ms-input-placeholder {
  color: #aaa;
}
body.recruit .entry-form ::-ms-input-placeholder {
  color: #aaa;
}
body.recruit .entry-form ::placeholder {
  color: #aaa;
}
body.recruit .entry-form .form-p {
  display: inline-block;
}
body.recruit .entry-form .form-note {
  display: block;
  margin-top: calc(6 * var(--to-rem));
  font-size: 13px;
  font-weight: normal;
  color: #666;
  line-height: 1.4;
}
body.recruit .entry-form .form-input {
  border: 1px solid #aaa;
  padding: 5px 10px;
  width: 100%;
}
body.recruit .entry-form .form-file {
  width: 100%;
  font-size: 14px;
}
body.recruit .entry-form .horizontal-table {
  margin-top: min(min(2.5vw, 50px), 50px);
}
body.recruit .entry-form .horizontal-table table {
  width: 100%;
}
body.recruit .entry-form .horizontal-table th {
  width: 27%;
  padding: 20px;
  background-color: rgba(237, 240, 255, 0.6);
  border-bottom: 1px solid #ccc;
  border-left: 1px solid #ccc;
  font-weight: bold;
  vertical-align: middle;
  text-align: left;
}
body.recruit .entry-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.recruit .entry-form .horizontal-table th:first-child {
  border-top: 1px solid #ccc;
}
body.recruit .entry-form .horizontal-table th:last-child {
  border-right-width: 0;
}
body.recruit .entry-form .horizontal-table td {
  padding: 10px 20px;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  vertical-align: middle;
}
body.recruit .entry-form .horizontal-table td:first-of-type {
  border-top: 1px solid #ccc;
}
body.recruit .entry-form {
  /* ラジオボタン・チェックボックス */
}
body.recruit .entry-form input[type=radio],
body.recruit .entry-form input[type=checkbox] {
  opacity: 0;
  position: absolute;
}
body.recruit .entry-form input[type=radio]:focus + span,
body.recruit .entry-form input[type=checkbox]:focus + span {
  outline: 1px solid #ccc;
}
body.recruit .entry-form input[type=radio] + span,
body.recruit .entry-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.recruit .entry-form {
  /* チェックボックス（四角） */
}
body.recruit .entry-form input[type=checkbox] + span:before {
  position: absolute;
  top: 0.1em;
  left: 0;
  content: "";
  width: 1.25em;
  height: 1.25em;
  border: 1px solid #999;
  background: #fff;
}
body.recruit .entry-form input[type=checkbox]:checked + span:after {
  content: "";
  display: block;
  position: absolute;
  top: 0.2em;
  left: 0.4em;
  width: 0.5em;
  height: 1em;
  border-bottom: 3px solid #014099;
  border-right: 3px solid #014099;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
body.recruit .entry-form {
  /* ラジオボタン（円） */
}
body.recruit .entry-form input[type=radio] + span:before {
  position: absolute;
  top: 0.05em;
  left: 0;
  content: "";
  width: 1.3em;
  height: 1.3em;
  border: 1px solid #999;
  border-radius: 50%;
  background: #fff;
}
body.recruit .entry-form input[type=radio]:checked + span:after {
  content: "";
  display: block;
  position: absolute;
  top: 0.42em;
  left: 0.37em;
  width: 0.58em;
  height: 0.58em;
  border-radius: 50%;
  background-color: #014099;
}
body.recruit .entry-form {
  /* セレクトボックス */
}
body.recruit .entry-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.recruit .entry-form .selectWrap {
  position: relative;
  display: block;
  width: 30%;
}
body.recruit .entry-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.recruit .entry-form textarea {
  resize: none;
}
body.recruit .entry-form {
  /* 送信ボタン（個人情報の取扱いについて同意の上、確認画面へ） */
}
body.recruit .entry-form__btn-wrapper {
  text-align: center;
  margin-top: min(min(2.8vw, 56px), 56px);
}
body.recruit .entry-form__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;
  gap: min(min(0.7vw, 14px), 14px);
  min-width: min(min(28vw, 560px), 560px);
  padding: min(min(1.1vw, 22px), 22px) min(min(2vw, 40px), 40px);
  background-color: #014099;
  color: #fff;
  border: 0;
  cursor: pointer;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}
body.recruit .entry-form__btn-arrow {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: clamp(7px, min(0.45vw, 9px), 9px);
  height: clamp(7px, min(0.45vw, 9px), 9px);
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
body.recruit .entry-form__btn-label {
  font-family: "Noto Sans JP", "YuGothic", "游ゴシック", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;
  font-size: clamp(14px, min(0.9vw, 18px), 18px);
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.4;
}
body.recruit {
  /* ---------- パートナー（協力業者）募集（淡色） ---------- */
}
body.recruit .partner {
  background-color: #edf0ff;
  padding-block: min(min(5.5vw, 110px), 110px);
}
body.recruit .partner__title {
  text-align: center;
  font-family: "Noto Sans JP", "YuGothic", "游ゴシック", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;
  font-size: clamp(22px, min(1.8vw, 36px), 36px);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: #014099;
}
body.recruit .partner__lead {
  margin-top: min(min(2vw, 40px), 40px);
  text-align: center;
  color: #000f30;
}
body.recruit .partner__lead p {
  font-size: clamp(14px, min(0.8vw, 16px), 16px);
  line-height: 1.9;
}
body.recruit .partner__terms {
  max-width: calc(820 * var(--to-rem));
  margin: min(min(2.5vw, 50px), 50px) auto 0;
}
body.recruit .partner__term {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  gap: min(min(2vw, 40px), 40px);
}
body.recruit .partner__term:not(:first-child) {
  margin-top: min(min(2.2vw, 44px), 44px);
}
body.recruit .partner__term-label {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: clamp(96px, min(6.5vw, 130px), 130px);
  white-space: nowrap;
  font-weight: 700;
  color: #014099;
  font-size: clamp(13px, min(1vw, 20px), 20px);
  line-height: 1.7;
}
body.recruit .partner__term-body {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  color: #000f30;
  font-size: clamp(14px, min(0.8vw, 16px), 16px);
  line-height: 1.8;
}
body.recruit .partner__list li {
  position: relative;
  padding-left: 1.2em;
}
body.recruit .partner__list li::before {
  content: "・";
  position: absolute;
  left: 0;
}
body.recruit .partner__actions {
  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: min(min(2vw, 40px), 40px);
  margin-top: min(min(2.8vw, 56px), 56px);
}
body.recruit .partner__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;
  gap: min(min(0.6vw, 12px), 12px);
  width: min(min(18vw, 360px), 360px);
  height: min(min(4vw, 80px), 80px);
  background-color: #014099;
  color: #fff;
  text-decoration: none;
  border-radius: clamp(4px, min(0.3vw, 6px), 6px);
}
body.recruit .partner__btn {
  /* --mail のみホバー（リンク）。--tel は PC 表示のみ＝cursor/hover なし */
}
body.recruit .partner__btn--mail {
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}
body.recruit .partner__btn-icon {
  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;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: min(min(1.4vw, 28px), 28px);
  height: min(min(1.2vw, 24px), 24px);
  color: #fff;
  line-height: 0;
}
body.recruit .partner__btn-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}
body.recruit .partner__btn-label {
  font-family: "Noto Sans JP", "YuGothic", "游ゴシック", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;
  font-size: clamp(16px, min(1.2vw, 24px), 24px);
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
}

/* 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", "游ゴシック", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.8px;
  color: #000f30;
  background-color: #fff;
}

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;
}

.p-business__title-dot,
.p-business__ttl-dot,
.p-projects__title-dot,
.p-contact__title-dot,
.p-recruit__title-dot,
.mail-form__title-dot,
.company-heading__dot,
.recruit-heading__dot,
.products-other__bullet,
.business-item__title-deco-dot,
.business-item__tasks-dot,
.c-ttl__dot {
  display: none !important;
}

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

/* =====================================================
# l-header（株式会社ネッツ・透過オーバーレイ）
# 背景は持たない（FV visual の上に乗る position:absolute）。テキスト・ロゴは白。
# カンプ 2000px 基準。左ロゴ＋右 nav（5項目 / Tel 表示のみ / お問い合わせボタン）。
# SP（mq xl）はハンバーガー表示・nav 非表示→ドロワー（_l-drawer）に委譲。
===================================================== */
.l-header {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 50;
  width: 100%;
  max-width: 2000px;
  margin-inline: auto;
  height: clamp(64px, min(5vw, 100px), 100px);
}
.l-header__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: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 100%;
  height: 100%;
  padding-inline: clamp(16px, min(2vw, 40px), 40px) clamp(16px, min(1.6vw, 32px), 32px);
}
.l-header {
  /* ▼ ロゴ（h1=index / div=下層） */
}
.l-header__logo {
  margin: 0;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
}
.l-header__logo-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;
  text-decoration: none;
  -webkit-transform: translateY(3px);
          transform: translateY(3px);
}
.l-header__logo-link img {
  display: block;
  width: clamp(280px, min(21vw, 420px), 420px);
  height: auto;
}
.l-header {
  /* ▼ ナビ（nav リスト ＋ CTA）。PC のみ表示 */
}
.l-header__nav {
  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: clamp(20px, min(2.4vw, 48px), 48px);
}
.l-header__nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  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: clamp(16px, min(2vw, 40px), 40px);
}
.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: inline-block;
  color: #fff;
  font-family: "Noto Sans JP", "YuGothic", "游ゴシック", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;
  font-size: clamp(14px, min(0.8vw, 16px), 16px);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.06em;
  text-decoration: none;
  white-space: nowrap;
  -webkit-transition: color 0.3s ease;
  transition: color 0.3s ease;
}
.l-header__nav-link {
  /* アクティブページ＝目に優しい黄色（company catch / ドロワー active と同色・CEO 指示 2026-06-25）。
     白文字ヘッダーでは opacity 減光だと判別しづらいため、視認できる暖色イエローで明示する */
}
.l-header__nav-link.is-active {
  color: #ffe082;
}
.l-header {
  /* ▼ CTA（お問い合わせボタン［左］＋ Tel 表示［右］・PSD 順） */
}
.l-header__cta {
  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: clamp(12px, min(1.2vw, 24px), 24px);
}
.l-header {
  /* ▼ Tel（PC は表示のみ・hover/cursor/transition なし。SP は tel-3.1.js が発信化） */
}
.l-header__tel {
  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: clamp(6px, min(0.5vw, 10px), 10px);
  color: #fff;
}
.l-header__tel-icon {
  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;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: clamp(16px, min(1.2vw, 24px), 24px);
  height: clamp(16px, min(1.2vw, 24px), 24px);
  line-height: 0;
}
.l-header__tel-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}
.l-header__tel-number {
  font-family: "Noto Sans JP", "YuGothic", "游ゴシック", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;
  font-size: clamp(18px, min(1.6vw, 32px), 32px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.l-header {
  /* お問い合わせボタンは c-btn--contact を流用（component/_c-btn.scss） */
}
.l-header__contact {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
}
.l-header {
  /* ▼ ハンバーガー（SP のみ表示・3本線） */
}
.l-header__hamburger {
  display: none;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  position: relative;
  width: calc(40 * var(--to-rem));
  height: calc(40 * var(--to-rem));
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
}
.l-header__hamburger span {
  position: absolute;
  left: 50%;
  width: calc(30 * var(--to-rem));
  height: 2px;
  background-color: #fff;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  -webkit-transition: opacity 0.3s ease, background-color 0.3s ease, -webkit-transform 0.3s ease;
  transition: opacity 0.3s ease, background-color 0.3s ease, -webkit-transform 0.3s ease;
  transition: transform 0.3s ease, opacity 0.3s ease, background-color 0.3s ease;
  transition: transform 0.3s ease, opacity 0.3s ease, background-color 0.3s ease, -webkit-transform 0.3s ease;
}
.l-header__hamburger span:nth-child(1) {
  top: calc(13 * 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(25 * var(--to-rem));
}
.l-header__hamburger.is-checked span:nth-child(1) {
  -webkit-transform: translate(-50%, calc(6 * var(--to-rem))) rotate(45deg);
          transform: translate(-50%, calc(6 * 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(-6 * var(--to-rem))) rotate(-45deg);
          transform: translate(-50%, calc(-6 * var(--to-rem))) rotate(-45deg);
}

/* =====================================================
# 逆スクロール（上方向）で固定ヘッダー表示
#   script.js が #header に .show を付与（80px 超で下スクロール=非表示／30px 超の逆スクロール=表示）。
#   通常は FV/MV 上の透過オーバーレイ（白文字/白ロゴ）でページと共に流れ去る。
#   .show 時のみ固定＝白文字が白背景コンテンツ上に出るため、紺バー（$color_navy）を敷いて可読性を確保。
#   全ページ共通（TOP/下層ともヘッダーは透過オーバーレイのため出し分け不要）。
===================================================== */
.l-header.show {
  position: fixed;
  inset: 0 0 auto 0;
  margin-inline: auto;
  background-color: #0f3469;
  -webkit-box-shadow: 0 2px 12px rgba(6, 22, 45, 0.2);
          box-shadow: 0 2px 12px rgba(6, 22, 45, 0.2);
  -webkit-animation: l-header-slide-in 0.3s ease;
          animation: l-header-slide-in 0.3s ease;
}

@-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);
  }
}
/* =====================================================
# l-drawer（SP ドロワーメニュー）
# 画面右外から is-checked でスライドイン。EZ 標準 script.js の
# #js-drawer-icon / #js-drawer-content / #js-drawer-close / a が is-checked をトグル。
# 暗紺地（$color_navy_deep）＋白文字。nav 5項目＋お問い合わせボタン＋Tel。
===================================================== */
.l-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: min(84vw, 340 * var(--to-rem));
  height: 100%;
  z-index: 105;
  background-color: #06162d;
  background-image: linear-gradient(165deg, #0f3469 0%, #06162d 100%);
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
  -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;
  overflow-y: auto;
}
.l-drawer.is-checked {
  -webkit-transform: translateX(0);
          transform: translateX(0);
}
.l-drawer__close {
  position: absolute;
  top: calc(22 * var(--to-rem));
  right: calc(22 * 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: 2px;
  background-color: #fff;
}
.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 {
  padding: calc(80 * var(--to-rem)) calc(36 * var(--to-rem)) calc(48 * var(--to-rem));
}
.l-drawer__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.l-drawer__list li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
.l-drawer__list li:first-child {
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.l-drawer__list a {
  display: block;
  padding: calc(17 * var(--to-rem)) calc(8 * var(--to-rem));
  color: #fff;
  font-family: "Noto Sans JP", "YuGothic", "游ゴシック", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;
  font-size: calc(17 * var(--to-rem));
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-decoration: none;
  -webkit-transition: padding-left 0.3s ease, opacity 0.3s ease;
  transition: padding-left 0.3s ease, opacity 0.3s ease;
}
.l-drawer__list a.is-active {
  color: #ffe082;
  padding-left: calc(16 * var(--to-rem));
}
.l-drawer {
  /* お問い合わせボタン（c-btn--contact 流用） */
}
.l-drawer__contact {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin: calc(35 * var(--to-rem)) auto 0;
}
.l-drawer__contact.c-btn--contact {
  width: 100%;
  height: calc(60 * var(--to-rem));
  gap: calc(12 * var(--to-rem));
}
.l-drawer__contact.c-btn--contact .c-btn__icon {
  width: calc(26 * var(--to-rem));
  height: calc(20 * var(--to-rem));
}
.l-drawer__contact.c-btn--contact .c-btn__label {
  font-size: calc(18 * var(--to-rem));
}
.l-drawer {
  /* 電話（下部） */
}
.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: start;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: calc(5 * var(--to-rem));
  margin-top: calc(28 * var(--to-rem));
  text-align: left;
}
.l-drawer__tel-label {
  font-family: "Noto Sans JP", "YuGothic", "游ゴシック", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;
  font-size: calc(11 * var(--to-rem));
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}
.l-drawer__tel-num {
  font-family: "Noto Sans JP", "YuGothic", "游ゴシック", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;
  font-size: calc(22 * var(--to-rem));
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #fff;
}

/* =====================================================
# l-footer（株式会社ネッツ）— PSD 厳格再現
# inspect footer [0,4842,2000,5436]（紺地 #06162d・H594）
#   左: ロゴlockup(header-logo 355×60)[205,5003] + 住所/TEL(16px)[207,5104]（logo下端+41）
#   右: ナビ5項目(16px)[1123,5077] + お問い合わせ(180×40 白地青字 envelope)[1615,5064]（top row内 margin-top61）
#   右下: ©2026 株式会社ネッツ(14px)[1635,5362]（footer下端-60）
# 内側コンテナは .inner（max1590中央寄せ）。flex 列で copyright を下端へ。
===================================================== */
.l-footer {
  position: relative;
  width: 100%;
  background-color: #06162d;
  color: #fff;
  font-family: "Noto Sans JP", "YuGothic", "游ゴシック", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;
}
.l-footer__inner {
  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;
  min-height: min(min(29.7vw, 594px), 594px);
  padding-block: min(min(8.05vw, 161px), 161px) min(min(3vw, 60px), 60px);
}
.l-footer {
  /* 上段：左ブランド ＋ 右ナビ */
}
.l-footer__body {
  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 {
  /* ▼ 左ブランド（ロゴ lockup ＋ 住所/TEL） */
}
.l-footer__brand {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
}
.l-footer__logo {
  margin: 0;
  line-height: 0;
}
.l-footer__logo picture {
  display: block;
  line-height: 0;
}
.l-footer__logo img {
  display: block;
  width: min(min(19.5vw, 390px), 390px);
  height: auto;
}
.l-footer__address {
  margin: min(min(2.05vw, 41px), 41px) 0 0;
  font-size: clamp(13px, min(0.8vw, 16px), 16px);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.04em;
}
.l-footer {
  /* ▼ 右ナビ（ナビ列 ＋ お問い合わせボタン・1行・top row 内で margin-top61） */
}
.l-footer__nav {
  -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: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  gap: min(min(2vw, 40px), 40px);
  margin-top: min(min(3.05vw, 61px), 61px);
}
.l-footer__nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  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(min(1.8vw, 36px), 36px);
}
.l-footer__nav-list li {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
}
.l-footer__nav-link {
  color: #fff;
  font-size: clamp(13px, min(0.8vw, 16px), 16px);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-decoration: none;
  white-space: nowrap;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}
.l-footer {
  /* お問い合わせ（180×40 白地・青字・封筒） */
}
.l-footer__contact {
  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;
  gap: min(min(0.5vw, 10px), 10px);
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: min(min(9vw, 180px), 180px);
  height: min(min(2vw, 40px), 40px);
  background-color: #fff;
  color: #014099;
  border-radius: clamp(3px, min(0.2vw, 4px), 4px);
  text-decoration: none;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}
.l-footer__contact-icon {
  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;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: min(min(1.05vw, 21px), 21px);
  height: min(min(0.8vw, 16px), 16px);
  line-height: 0;
}
.l-footer__contact-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}
.l-footer__contact-label {
  font-size: clamp(13px, min(0.8vw, 16px), 16px);
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1;
  -webkit-transform: translateY(-1px);
          transform: translateY(-1px);
}
.l-footer {
  /* ▼ コピーライト（右下・flex 列で最下段へ） */
}
.l-footer__copyright {
  margin: min(min(2vw, 40px), 40px) 0 0;
  margin-top: auto;
  text-align: right;
  font-size: clamp(13px, min(0.7vw, 14px), 14px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.04em;
}

/* =====================================================
# ページトップへ戻るボタン（#js-pagetop / script.js が is-show をトグル）
#   100px 超スクロールで出現・href="#" でスムーススクロール（script.js）。
#   サイズは単調 clamp で下限を担保（XL/SP で豆粒化しない・1199/1200 境界の飛びなし）。
===================================================== */
.l-footer__pagetop {
  position: fixed;
  right: max(min(min(2vw, 40px), 40px), (100vw - 2000px) / 2 + 40px);
  bottom: calc(min(min(2vw, 40px), 40px) + 50px);
  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: clamp(48px, min(3vw, 60px), 60px);
  height: clamp(48px, min(3vw, 60px), 60px);
  border-radius: 50%;
  background-color: #014099;
  border: 1px solid #fff;
  color: #fff;
  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: 90;
}
.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", "游ゴシック", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;
  font-weight: 700;
  font-size: clamp(20px, min(1.2vw, 24px), 24px);
  line-height: 1;
  color: #fff;
}

/* =====================================================
# 下層ページ メインビジュアル
===================================================== */
.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 {
  background-position: center center;
}
.mv-jumbotron.is-business::after {
  background: rgba(6, 22, 45, 0.45);
}
.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 {
  /* 写真を僅かに沈めて白文字の可読性を確保（濃紺寄りスクリム・2026-06-24 MV 刷新） */
}
.mv-jumbotron::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(15, 52, 105, 0.28)), to(rgba(6, 22, 45, 0.5)));
  background: linear-gradient(180deg, rgba(15, 52, 105, 0.28) 0%, rgba(6, 22, 45, 0.5) 100%);
  pointer-events: none;
}
.mv-jumbotron__inner {
  position: relative;
  z-index: 2;
  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 中央寄せ */
  width: 100%;
  height: 100%;
  padding-top: calc(90 * var(--to-rem)); /* mpc(>2000px) 用：中央からやや下に */
}
.mv {
  /* mv-h2: 下層ページ共通 メインビジュアル見出し（2026-06-24 1から刷新）
     塗り箱を廃止。暗化した写真上に「白英字 + 細い区切り線 + 白和字」でフォーマルに。
     letter-spacing は控えめ。mq を使わず clamp() でリキッド均整。 */
}
.mv .mv-h2 {
  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(12px, min(0.8vw, 16px), 16px);
  /* 英字見出し（大・白） */
}
.mv .mv-h2__en {
  display: block;
  font-family: "Noto Sans JP", "YuGothic", "游ゴシック", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;
  font-size: clamp(34px, min(3.1vw, 62px), 62px);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  color: #fff;
  text-shadow: 0 clamp(2px, min(0.15vw, 3px), 3px) clamp(10px, min(0.9vw, 18px), 18px) rgba(6, 22, 45, 0.5);
}
.mv .mv-h2 {
  /* 和字見出し（小・白・区切り線＋中央ノード点） */
}
.mv .mv-h2__ja {
  display: block;
  position: relative;
  font-family: "Noto Sans JP", "YuGothic", "游ゴシック", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;
  font-size: clamp(14px, min(0.9vw, 18px), 18px);
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1;
  color: #fff;
  padding-top: clamp(16px, min(1.1vw, 22px), 22px);
  text-shadow: 0 clamp(1px, min(0.1vw, 2px), 2px) clamp(6px, min(0.5vw, 10px), 10px) rgba(6, 22, 45, 0.5);
  /* 区切り線 */
}
.mv .mv-h2__ja::before {
  content: "";
  position: absolute;
  top: clamp(6px, min(0.4vw, 8px), 8px);
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: clamp(54px, min(3.2vw, 64px), 64px);
  height: 1px;
  background-color: rgba(255, 255, 255, 0.8);
}
.mv .mv-h2__ja {
  /* 区切り線 中央のノード点（回路モチーフのさりげない反映） */
}
.mv .mv-h2__ja::after {
  content: "";
  position: absolute;
  top: clamp(3px, min(0.25vw, 5px), 5px);
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: clamp(6px, min(0.35vw, 7px), 7px);
  height: clamp(6px, min(0.35vw, 7px), 7px);
  border-radius: 50%;
  background-color: #fff;
}

/* 左から右にカーテン
---------------------------------------------------- */
.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-ttl — 見出しコンポーネント
# c-ttl--h2: TOP 各セクションの h2 見出し（英字大 __en ＋ 円ドット __dot ＋ 日本語サブ）
#
# 構造（推奨）:
#   <h2 class="c-ttl c-ttl--h2">
#     <span class="c-ttl__dot" aria-hidden="true"></span>
#     <span class="c-ttl__en">BUSINESS</span>
#     <span class="c-ttl__sub">事業内容</span>
#   </h2>
#
# 色は要素の color を継承（__en/__sub）。__dot は currentColor 追従（見出し文字色に追従）。
# 暗背景セクション（projects / contact）は利用側で .c-ttl--h2 { color: $white; } を当てる
# か、modifier .c-ttl--white を付与する。既定は青見出し（$color_main）。
===================================================== */
.c-ttl--h2 {
  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;
  color: #014099;
  font-family: "Noto Sans JP", "YuGothic", "游ゴシック", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;
}
.c-ttl--h2 .c-ttl__dot {
  display: block;
  width: clamp(10px, min(0.8vw, 16px), 16px);
  height: clamp(10px, min(0.8vw, 16px), 16px);
  border-radius: 50%;
  background-color: currentColor;
  margin-bottom: clamp(10px, min(0.8vw, 16px), 16px);
}
.c-ttl--h2 .c-ttl__en {
  display: block;
  font-size: clamp(32px, min(3.2vw, 64px), 64px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.04em;
  color: inherit;
}
.c-ttl--h2 .c-ttl__sub {
  display: block;
  margin-top: clamp(12px, min(1vw, 20px), 20px);
  font-size: clamp(15px, min(1vw, 20px), 20px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.08em;
  color: inherit;
}
.c-ttl {
  /* 白見出し（暗背景セクション：projects / contact） */
}
.c-ttl--white {
  color: #fff;
}

/* =====================================================
# c-btn — ボタン共通コンポーネント
#
# 1) c-btn--contact … お問い合わせ（白地 / #014099 文字 / 封筒アイコン）180×40
#      <a class="c-btn c-btn--contact">
#        <span class="c-btn__icon" aria-hidden="true"><svg .../></span>
#        <span class="c-btn__label">お問い合わせ</span>
#      </a>
#
# 2) c-btn--form … お問い合わせフォーム大ボタン（白地 / #014099 文字）480×100
#      <a class="c-btn c-btn--form">
#        <span class="c-btn__icon" aria-hidden="true"><svg .../></span>
#        <span class="c-btn__label">お問い合わせフォームはこちら</span>
#      </a>
#
# 3) c-btn--more … 「詳細を見る」240×60。矢印（線24×2 + 丸8×8）は __arrow 要素で描画。
#      modifier:
#        --ghost … 白地 / #014099 文字（淡背景・projects 等で使用）
#        --fill  … #014099 地 / 白文字（白パネル上・recruit 等で使用）
#      <a class="c-btn c-btn--more c-btn--ghost">
#        <span class="c-btn__label">詳細を見る</span>
#        <span class="c-btn__arrow" aria-hidden="true"></span>
#      </a>
#
# 共通: 図形は design 固定幅（width 固定）＋テキスト中央寄せ（padding で縮めない＝CJK 字送り差対策）。
#       hover は @include mq(mmd) 内・opacity:0.6。
===================================================== */
.c-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;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  font-family: "Noto Sans JP", "YuGothic", "游ゴシック", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}
.c-btn__icon {
  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;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  line-height: 0;
}
.c-btn__icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}
.c-btn__label {
  display: inline-block;
  line-height: 1.2;
}
.c-btn {
  /* ▼ お問い合わせ（白地・青文字・封筒アイコン）180×40 */
}
.c-btn--contact {
  width: clamp(140px, min(9vw, 180px), 180px);
  height: clamp(36px, min(2vw, 40px), 40px);
  gap: clamp(6px, min(0.5vw, 10px), 10px);
  background-color: #fff;
  color: #014099;
  border-radius: clamp(3px, min(0.2vw, 4px), 4px);
}
.c-btn--contact .c-btn__icon {
  width: clamp(14px, min(1.05vw, 21px), 21px);
  height: clamp(11px, min(0.8vw, 16px), 16px);
}
.c-btn--contact .c-btn__label {
  font-size: clamp(13px, min(0.8vw, 16px), 16px);
  font-weight: 500;
  letter-spacing: 0.04em;
  -webkit-transform: translateY(-1px);
          transform: translateY(-1px);
}
.c-btn {
  /* ▼ お問い合わせフォーム大ボタン（白地・青文字）480×100 */
}
.c-btn--form {
  width: clamp(280px, min(24vw, 480px), 480px);
  height: clamp(64px, min(5vw, 100px), 100px);
  gap: clamp(10px, min(0.8vw, 16px), 16px);
  background-color: #fff;
  color: #014099;
  border-radius: clamp(4px, min(0.3vw, 6px), 6px);
}
.c-btn--form .c-btn__icon {
  width: clamp(20px, min(1.5vw, 30px), 30px);
  height: clamp(15px, min(1.1vw, 22px), 22px);
}
.c-btn--form .c-btn__label {
  font-size: clamp(16px, min(1.1vw, 22px), 22px);
  font-weight: 700;
  letter-spacing: 0.06em;
}
.c-btn {
  /* ▼ 詳細を見る 240×60（矢印＝線24×2 + 丸8×8） */
}
.c-btn--more {
  position: relative;
  width: clamp(180px, min(12vw, 240px), 240px);
  height: clamp(48px, min(3vw, 60px), 60px);
  gap: clamp(10px, min(0.8vw, 16px), 16px);
  border-radius: clamp(48px, min(3vw, 60px), 60px);
  border: 1px solid currentColor;
}
.c-btn--more .c-btn__label {
  font-size: clamp(14px, min(0.8vw, 16px), 16px);
  font-weight: 500;
  letter-spacing: 0.08em;
}
.c-btn--more {
  /* 矢印：軸線（線24×2）＋丸（8×8）。color に追従。 */
}
.c-btn--more .c-btn__arrow {
  position: relative;
  display: inline-block;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: clamp(18px, min(1.2vw, 24px), 24px);
  height: clamp(6px, min(0.4vw, 8px), 8px);
  /* 軸線（太さ 2px） */
}
.c-btn--more .c-btn__arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: currentColor;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.c-btn--more .c-btn__arrow {
  /* 先端の丸（8×8） */
}
.c-btn--more .c-btn__arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: clamp(6px, min(0.4vw, 8px), 8px);
  height: clamp(6px, min(0.4vw, 8px), 8px);
  border-radius: 50%;
  background-color: currentColor;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.c-btn {
  /* ▼ c-btn--more の塗り反転 modifier */
}
.c-btn--ghost {
  background-color: #fff;
  color: #014099;
}
.c-btn--fill {
  background-color: #014099;
  color: #fff;
  border-color: #fff;
}

/* =====================================================
# c-icon — inline SVG アイコン共通（色は currentColor 追従）
# 使い方: <span class="c-icon c-icon--phone" aria-hidden="true"><svg .../></span>
# 親要素の color を継承して fill/stroke を currentColor で描画する。
# サイズは modifier or 利用側コンポーネント（c-btn 等）で個別指定する。
===================================================== */
.c-icon {
  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;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  line-height: 0;
  color: currentColor;
}
.c-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}
.c-icon {
  /* 電話アイコン（ヘッダー Tel・白文字に追従） */
}
.c-icon--phone {
  width: clamp(16px, min(1.2vw, 24px), 24px);
  height: clamp(16px, min(1.2vw, 24px), 24px);
}
.c-icon {
  /* メールアイコン（お問い合わせボタン・#014099 に追従） */
}
.c-icon--mail {
  width: clamp(14px, min(1.05vw, 21px), 21px);
  height: clamp(11px, min(0.8vw, 16px), 16px);
}

/* =====================================================
# c-photo-ofi — カタログ／CMS 画像のアスペクト自動フィット枠
#  EZ-programrule「カタログ用画像」公式 CSS 準拠。
#  どのような縦横比の画像が CMS で流し込まれても画像全体が表示されるよう
#  object-fit: scale-down + グレー地で受ける（プログラム設置ページ共通の標準枠）。
#  ※ アスペクト比（padding-bottom）は配置先で上書きする（既定 75% = 4:3）。
===================================================== */
.photo-ofi {
  display: block;
  height: 0;
  padding-bottom: 75%; /* 高さ＝枠の横幅基準（既定 4:3。配置先で上書き） */
  background-color: #efefef;
  overflow: hidden;
  position: relative;
}

.photo-ofi img {
  max-width: inherit;
  max-height: inherit;
  width: 100%;
  height: 100%;
  -o-object-fit: scale-down;
     object-fit: scale-down;
  font-family: "object-fit: scale-down;";
  position: absolute;
  left: 0;
  top: 0;
}

.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: 1199px) {
  .p-visual {
    height: min(min(49.5vw, 990px), 990px);
  }
  .p-visual__copy {
    left: min(6vw, 120px);
    top: min(15vw, 300px);
    max-width: calc(100% - min(12vw, 240px));
  }
  .p-visual__catch {
    font-size: clamp(20px, 4vw, 48px);
    line-height: 1.55;
  }
  .p-business {
    height: auto;
    padding: calc(72 * var(--to-rem)) calc(24 * var(--to-rem));
  }
  .p-business::before, .p-business::after {
    display: none;
  }
  .p-business__inner {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: column-reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    height: auto;
    gap: calc(48 * var(--to-rem));
  }
  .p-business__fig, .p-business__body {
    position: static;
    width: 100%;
  }
  .p-business__fig {
    max-width: calc(480 * var(--to-rem));
    height: auto;
    aspect-ratio: 1/1;
    border-radius: calc(12 * var(--to-rem));
  }
  .p-business__body {
    max-width: calc(797 * var(--to-rem));
    height: auto;
  }
  .p-business__ttl {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .p-business__ttl-dot {
    width: calc(14 * var(--to-rem));
    height: calc(14 * var(--to-rem));
    margin-top: calc(7 * var(--to-rem));
  }
  .p-business__nav {
    position: static;
    margin-top: calc(48 * var(--to-rem));
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    gap: calc(28 * var(--to-rem));
    width: auto;
    height: auto;
  }
  .p-business__card {
    width: calc(243 * var(--to-rem));
    height: calc(323 * var(--to-rem));
    background-color: #fff;
    border: 2px solid #014099;
    border-radius: calc(7 * var(--to-rem));
  }
  .p-business__card-icon {
    top: calc(37 * var(--to-rem));
    width: calc(100 * var(--to-rem));
    height: calc(115 * var(--to-rem));
  }
  .p-business__card-label {
    top: calc(182 * var(--to-rem));
    font-size: calc(24 * var(--to-rem));
  }
  .p-business__card-label--maintenance {
    left: calc(48 * var(--to-rem));
    width: calc(142 * var(--to-rem));
    line-height: 1.2;
    white-space: nowrap;
  }
  .p-business__card-deco {
    width: calc(18 * var(--to-rem));
    height: calc(41 * var(--to-rem));
    left: calc(50% - calc(1 * var(--to-rem)));
    top: calc(277 * var(--to-rem));
  }
  .p-business__card-deco::before {
    width: calc(18 * var(--to-rem));
    height: calc(18 * var(--to-rem));
  }
  .p-business__card-deco::after {
    top: calc(15 * var(--to-rem));
    width: calc(2 * var(--to-rem));
    height: calc(29 * var(--to-rem));
  }
  .p-projects {
    padding-block: min(10.0083402836vw, 120px);
    background-image: none;
  }
  .p-projects::after {
    content: "";
    position: absolute;
    top: min(6.6722268557vw, 80px);
    right: 0;
    width: min(36.6972477064vw, 360px);
    aspect-ratio: 1/1;
    background-color: rgba(255, 255, 255, 0.08);
    -webkit-mask: url("../img/company/circuit.svg") no-repeat center/contain;
    mask: url("../img/company/circuit.svg") no-repeat center/contain;
    pointer-events: none;
    z-index: 0;
  }
  .p-projects__inner {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .p-projects__head {
    width: 100%;
  }
  .p-projects__desc {
    margin-top: calc(28 * var(--to-rem));
    font-size: clamp(13px, 1.3344453711vw, 16px);
  }
  .p-projects__more {
    width: min(25.0208507089vw, 240px);
    height: min(6.1718098415vw, 60px);
    margin-top: min(6.0050041701vw, 72px);
  }
  .p-projects__more-label {
    font-size: clamp(14px, 1.8348623853vw, 18px);
  }
  .p-projects__more-arrow {
    width: min(2.5020850709vw, 24px);
  }
  .p-projects__more-arrow::after {
    width: clamp(6px, 0.834028357vw, 8px);
    height: clamp(6px, 0.834028357vw, 8px);
  }
  .p-projects__nav {
    margin-top: calc(40 * var(--to-rem));
  }
  .p-projects__slider {
    width: 100%;
    -webkit-box-flex: 0;
    -webkit-flex: none;
        -ms-flex: none;
            flex: none;
    margin-top: calc(40 * var(--to-rem));
    margin-right: 0;
  }
  .p-projects__item {
    width: min(35.0291909925vw, 420px);
  }
  .p-projects__cat {
    width: auto;
    min-width: min(10.0083402836vw, 100px);
    height: min(3.1693077565vw, 32px);
    padding-inline: min(1.3344453711vw, 16px);
  }
  .p-projects__name {
    font-size: clamp(16px, 2.3352793995vw, 32px);
  }
  .p-recruit {
    padding-bottom: min(min(6vw, 120px), 120px);
  }
  .p-recruit__more {
    width: min(25.0208507089vw, 240px);
    height: min(6.1718098415vw, 60px);
    margin-top: min(8.0066722269vw, 79px);
  }
  .p-recruit__more-label {
    font-size: clamp(14px, 1.8348623853vw, 18px);
  }
  .p-recruit__more-arrow {
    width: min(2.5020850709vw, 24px);
  }
  .p-recruit__more-arrow::after {
    width: clamp(6px, 0.834028357vw, 8px);
    height: clamp(6px, 0.834028357vw, 8px);
  }
  .p-contact {
    background-image: none;
  }
  .p-contact__form {
    width: min(25.0208507089vw, 240px);
    height: min(6.1718098415vw, 60px);
    margin-top: min(5.3377814846vw, 55px);
    gap: min(1.0008340284vw, 10px);
  }
  .p-contact__form-icon {
    width: clamp(16px, 2.0850708924vw, 20px);
    height: clamp(12px, 1.5846538782vw, 15px);
  }
  .p-contact__form-label {
    font-size: clamp(14px, 1.8348623853vw, 18px);
  }
  .business-items {
    padding-block: min(7.3394495413vw, 88px);
  }
  .business-item + .business-item {
    margin-top: calc(72 * var(--to-rem));
  }
  .business-item__row {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
  }
  .business-item__media {
    -webkit-box-flex: 0;
    -webkit-flex: none;
        -ms-flex: none;
            flex: none;
    max-width: min(56.7139282736vw, 680px);
    width: 100%;
    margin-inline: auto;
  }
  .business-item__num {
    top: calc(-44 * var(--to-rem));
    left: calc(4 * var(--to-rem));
    font-size: clamp(60px, 10.0083402836vw, 120px);
  }
  .business-item__box {
    -webkit-box-flex: 0;
    -webkit-flex: none;
        -ms-flex: none;
            flex: none;
    max-width: min(68.3903252711vw, 820px);
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: calc(-32 * var(--to-rem));
    padding: min(4.0033361134vw, 48px);
  }
  .business-item--reverse .business-item__row {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .business-item--reverse .business-item__media {
    -webkit-box-ordinal-group: 1;
    -webkit-order: 0;
        -ms-flex-order: 0;
            order: 0;
  }
  .business-item--reverse .business-item__box {
    margin-right: auto;
    margin-left: auto;
  }
  .business-item--reverse .business-item__num {
    right: calc(4 * var(--to-rem));
  }
  .business-item__title {
    font-size: clamp(24px, 3.0025020851vw, 40px);
  }
  .business-item__text {
    font-size: clamp(16px, 1.6680567139vw, 18px);
  }
  .business-item__tasks-title {
    font-size: clamp(16px, 1.6680567139vw, 20px);
  }
  .business-item__list-item {
    font-size: clamp(16px, 1.6680567139vw, 18px);
  }
  body.company .company-section {
    padding-block: min(7.3394495413vw, 88px);
  }
  body.company .company-greeting__text {
    font-size: clamp(15px, 1.918265221vw, 23px);
  }
  body.company .company-philosophy__catch {
    font-size: clamp(20px, 2.0850708924vw, 28px);
  }
  body.company .company-philosophy__text {
    font-size: clamp(13px, 1.6680567139vw, 20px);
    text-align: justify;
  }
  body.company .company-philosophy__text br {
    display: none;
  }
  .products-listing {
    padding-block: min(6.6722268557vw, 80px);
  }
  .products-grid {
    grid-template-columns: repeat(2, 1fr);
    -webkit-column-gap: min(2.3352793995vw, 28px);
       -moz-column-gap: min(2.3352793995vw, 28px);
            column-gap: min(2.3352793995vw, 28px);
    row-gap: min(3.0025020851vw, 36px);
    margin-top: 0;
  }
  .products-card__title {
    font-size: clamp(16px, 1.6680567139vw, 20px);
  }
  .products-paging .paging-text {
    font-size: clamp(14px, 1.8348623853vw, 18px);
  }
  .products-paging .paging-text a {
    min-width: clamp(46px, 5.8381984987vw, 56px);
    min-height: clamp(44px, 5.3377814846vw, 52px);
    padding-inline: min(1.5012510425vw, 14px);
  }
  .products-paging .current {
    min-width: clamp(46px, 5.8381984987vw, 56px);
    min-height: clamp(44px, 5.3377814846vw, 52px);
    padding-inline: min(1.8348623853vw, 18px);
  }
  .products-other {
    padding-bottom: min(7.5062552127vw, 90px);
  }
  .products-other__title {
    font-size: clamp(20px, 2.1684737281vw, 28px);
  }
  .products-other__box {
    margin-top: calc(24 * var(--to-rem));
    padding: min(3.3361134279vw, 40px);
  }
  .products-other__cat {
    font-size: clamp(16px, 1.6680567139vw, 22px);
  }
  .products-other__text {
    font-size: clamp(13px, 1.3344453711vw, 16px);
  }
  .products-single {
    padding-block: min(6.6722268557vw, 80px);
  }
  .products-single__main {
    gap: min(3.3361134279vw, 40px);
  }
  .products-single__title {
    font-size: clamp(20px, 2.3352793995vw, 32px);
  }
  .products-single__text {
    font-size: clamp(16px, 1.3344453711vw, 16px);
  }
  .products-single__back {
    margin-top: min(4.670558799vw, 56px);
  }
  body.recruit .partner__btn {
    width: min(37.5312760634vw, 360px);
    height: min(8.3402835696vw, 80px);
    gap: min(1.3344453711vw, 12px);
  }
  body.recruit .partner__btn-icon {
    width: clamp(20px, 3.0025020851vw, 28px);
    height: clamp(17px, 2.5854879066vw, 24px);
  }
  body.recruit .partner__btn-label {
    font-size: clamp(16px, 2.5020850709vw, 24px);
  }
  .l-header__nav {
    display: none;
  }
  .l-header__hamburger {
    display: inline-block;
  }
  .l-footer__inner {
    min-height: 0;
    padding-block: min(6.6722268557vw, 80px) calc(32 * var(--to-rem));
  }
  .l-footer__body {
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    gap: calc(28 * var(--to-rem)) calc(40 * var(--to-rem));
  }
  .l-footer__nav {
    margin-top: min(2.5020850709vw, 30px);
  }
  .l-footer__contact {
    width: min(20.0166805671vw, 180px);
    height: min(4.5037531276vw, 40px);
    gap: min(1.0842368641vw, 10px);
  }
  .l-footer__contact-icon {
    width: clamp(17px, 2.3352793995vw, 21px);
    height: clamp(13px, 1.7514595496vw, 16px);
  }
  .l-footer__contact-label {
    font-size: clamp(13px, 1.6680567139vw, 16px);
  }
}

@media screen and (max-width: 767px) {
  .p-visual {
    height: 60svh;
  }
  .p-visual__slide img {
    height: 128%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center top;
       object-position: center top;
  }
  .p-visual__copy {
    left: calc(24 * var(--to-rem));
    top: clamp(110px, 22vw, 220px);
    max-width: calc(100% - calc(48 * var(--to-rem)));
  }
  .p-visual__catch {
    font-size: clamp(20px, 5.4vw, 32px);
    line-height: 1.6;
  }
  .p-business {
    padding: calc(56 * var(--to-rem)) calc(16 * var(--to-rem));
  }
  .p-business__inner {
    gap: calc(36 * var(--to-rem));
  }
  .p-business__ttl {
    font-size: clamp(30px, 5.4758800522vw, 42px);
    letter-spacing: 0.08em;
  }
  .p-business__nav {
    margin-top: calc(36 * var(--to-rem));
    -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(24 * var(--to-rem));
  }
  .p-business__nav-item {
    width: 100%;
    max-width: calc(320 * var(--to-rem));
  }
  .p-business__card {
    width: 100%;
    height: calc(260 * var(--to-rem));
  }
  .p-business__card-icon {
    top: calc(28 * var(--to-rem));
    width: calc(88 * var(--to-rem));
    height: calc(101 * var(--to-rem));
  }
  .p-business__card-label {
    top: calc(150 * var(--to-rem));
    font-size: calc(22 * var(--to-rem));
  }
  .p-business__card-label--maintenance {
    left: 50%;
    width: auto;
    line-height: 1.32;
    text-align: center;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    white-space: normal;
  }
  .p-business__card-deco {
    top: calc(214 * var(--to-rem));
  }
  .p-projects {
    padding-block: calc(64 * var(--to-rem));
  }
  .p-projects__title {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .p-projects__title-dot {
    margin-top: calc(6 * var(--to-rem));
  }
  .p-projects__desc {
    margin-top: calc(22 * var(--to-rem));
    font-size: clamp(13px, 2.0860495437vw, 16px);
    text-align: justify;
  }
  .p-projects__more {
    width: calc(220 * var(--to-rem));
    height: calc(56 * var(--to-rem));
    margin-top: calc(26 * var(--to-rem));
    margin-inline: auto;
  }
  .p-projects__more-label {
    font-size: clamp(14px, 3.1290743155vw, 18px);
  }
  .p-projects__more-arrow {
    width: calc(24 * var(--to-rem));
    height: calc(8 * var(--to-rem));
  }
  .p-projects__more-arrow::after {
    width: calc(8 * var(--to-rem));
    height: calc(8 * var(--to-rem));
  }
  .p-projects__nav {
    margin-top: calc(32 * var(--to-rem));
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: calc(16 * var(--to-rem));
  }
  .p-projects__nav-btn {
    width: calc(56 * var(--to-rem));
    height: calc(56 * var(--to-rem));
  }
  .p-projects__nav-ic {
    width: calc(12 * var(--to-rem));
    height: calc(20 * var(--to-rem));
  }
  .p-projects__track {
    gap: calc(16 * var(--to-rem));
  }
  .p-projects__item {
    width: min(80vw, 320 * var(--to-rem));
  }
  .p-projects__body {
    padding: calc(22 * var(--to-rem)) calc(20 * var(--to-rem)) calc(26 * var(--to-rem));
  }
  .p-projects__cat {
    width: calc(90 * var(--to-rem));
    height: calc(28 * var(--to-rem));
    font-size: 13px;
  }
  .p-projects__name {
    font-size: clamp(16px, 2.8683181226vw, 32px);
  }
  .p-projects__card-dot {
    right: calc(12 * var(--to-rem));
    bottom: calc(12 * var(--to-rem));
    width: calc(12 * var(--to-rem));
    height: calc(12 * var(--to-rem));
  }
  .p-recruit {
    min-height: 0;
  }
  body .p-recruit {
    padding-bottom: calc(48 * var(--to-rem));
  }
  .p-recruit__figure {
    position: relative;
    width: 100%;
    height: auto;
  }
  .p-recruit__figure img {
    height: auto;
    -o-object-fit: contain;
       object-fit: contain;
  }
  .p-recruit__panel {
    width: 100%;
    margin-top: calc(24 * var(--to-rem));
    margin-left: 0;
    padding: calc(40 * var(--to-rem)) calc(28 * var(--to-rem));
    border-radius: calc(12 * var(--to-rem));
  }
  .p-recruit__desc {
    margin-top: calc(20 * var(--to-rem));
    font-size: clamp(13px, 2.0860495437vw, 16px);
  }
  .p-recruit__more {
    width: calc(220 * var(--to-rem));
    height: calc(56 * var(--to-rem));
    margin-top: calc(28 * var(--to-rem));
  }
  .p-recruit__more-label {
    font-size: clamp(14px, 3.1290743155vw, 18px);
  }
  .p-recruit__more-arrow {
    width: calc(24 * var(--to-rem));
    height: calc(8 * var(--to-rem));
  }
  .p-recruit__more-arrow::after {
    width: calc(8 * var(--to-rem));
    height: calc(8 * var(--to-rem));
  }
  .p-contact {
    min-height: 0;
    padding-bottom: calc(48 * var(--to-rem));
  }
  .p-contact__figure {
    position: relative;
    width: 100%;
    height: auto;
  }
  .p-contact__figure img {
    height: auto;
    -o-object-fit: contain;
       object-fit: contain;
  }
  body .p-contact__figure {
    margin-top: 0;
  }
  .p-contact__body {
    padding-block: 0 0;
  }
  .p-contact__item {
    margin-top: calc(32 * var(--to-rem));
  }
  .p-contact__item:first-of-type {
    margin-top: calc(28 * var(--to-rem));
  }
  .p-contact__label {
    font-size: clamp(16px, 2.8683181226vw, 32px);
  }
  .p-contact__tel {
    margin-top: calc(16 * var(--to-rem));
  }
  .p-contact__tel-icon {
    width: calc(28 * var(--to-rem));
    height: calc(28 * var(--to-rem));
  }
  .p-contact__tel-num {
    font-size: clamp(28px, 5.2151238592vw, 56px);
  }
  .p-contact__hours {
    margin-top: calc(12 * var(--to-rem));
    font-size: clamp(13px, 2.0860495437vw, 16px);
  }
  .p-contact__form {
    width: calc(220 * var(--to-rem));
    height: calc(56 * var(--to-rem));
    margin-top: calc(16 * var(--to-rem));
  }
  .p-contact__form-icon {
    width: calc(20 * var(--to-rem));
    height: calc(15 * var(--to-rem));
  }
  .p-contact__form-label {
    font-size: clamp(14px, 3.1290743155vw, 18px);
  }
  .business-items::after {
    width: 42%;
  }
  .business-items {
    padding-block: calc(60 * var(--to-rem));
  }
  .business-item + .business-item {
    margin-top: calc(56 * var(--to-rem));
  }
  body .business-item__media {
    max-width: 88%;
  }
  .business-item__num {
    top: calc(-30 * var(--to-rem));
    font-size: calc(76 * var(--to-rem));
  }
  .business-item__box {
    max-width: 92%;
    margin-top: calc(-24 * var(--to-rem));
    padding: calc(28 * var(--to-rem)) calc(22 * var(--to-rem)) calc(32 * var(--to-rem));
  }
  .business-item--reverse .business-item__num {
    right: calc(8 * var(--to-rem));
  }
  .business-item__title {
    font-size: clamp(22px, 3.6505867014vw, 40px);
  }
  .business-item__title-deco {
    width: calc(64 * var(--to-rem));
    margin: calc(16 * var(--to-rem)) auto calc(22 * var(--to-rem));
  }
  .business-item__text {
    font-size: clamp(15px, 2.3468057366vw, 18px);
    line-height: 1.9;
  }
  .business-item__text + .business-item__text {
    margin-top: calc(14 * var(--to-rem));
  }
  .business-item__tasks {
    margin-top: calc(26 * var(--to-rem));
    padding-top: calc(22 * var(--to-rem));
  }
  .business-item__tasks-title {
    font-size: clamp(16px, 2.3468057366vw, 20px);
  }
  .business-item__list {
    margin-top: calc(12 * var(--to-rem));
  }
  .business-item__list-item {
    font-size: clamp(15px, 2.3468057366vw, 18px);
  }
  body.company .company-section {
    padding-block: calc(58 * var(--to-rem));
  }
  body.company .company-section--pale::before, body.company .company-section--pale::after {
    width: min(27.3794002608vw, 210px);
  }
  body.company .company-heading {
    margin-bottom: calc(32 * var(--to-rem));
  }
  body.company .company-greeting__text {
    font-size: clamp(15px, 2.998696219vw, 23px);
    line-height: 1.95;
  }
  body.company .company-greeting__text:not(:first-child) {
    margin-top: calc(20 * var(--to-rem));
  }
  body.company .company-greeting__sign {
    margin-top: calc(28 * var(--to-rem));
  }
  body.company .company-greeting__sign-role {
    font-size: clamp(13px, 1.8252933507vw, 14px);
  }
  body.company .company-greeting__sign-name {
    font-size: clamp(17px, 2.7379400261vw, 24px);
  }
  body.company .company-philosophy::before, body.company .company-philosophy::after {
    width: 42%;
    height: min(46.9361147327vw, 360px);
    opacity: 0.45;
  }
  body.company .company-philosophy__catch {
    font-size: clamp(19px, 2.7379400261vw, 28px);
    margin-bottom: calc(28 * var(--to-rem));
    line-height: 1.75;
  }
  body.company .company-philosophy__text {
    font-size: clamp(13px, 2.6075619296vw, 20px);
    line-height: 1.95;
  }
  body.company .company-philosophy__text:not(:first-child) {
    margin-top: calc(18 * var(--to-rem));
  }
  body.company .company-table th,
  body.company .company-table td {
    font-size: clamp(15px, 2.6075619296vw, 20px);
  }
  body.company .company-table {
    border-top: 0;
  }
  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 {
    border-bottom: 1px solid rgba(1, 64, 153, 0.18);
    padding: calc(14 * var(--to-rem)) 0;
  }
  body.company .company-table th {
    white-space: normal;
    background-color: transparent;
    padding: 0 0 calc(6 * var(--to-rem));
  }
  body.company .company-table td {
    padding: 0;
    background-color: transparent;
  }
  body.company .company-map__frame iframe {
    height: calc(280 * var(--to-rem));
  }
  body.company .company-map__action {
    margin-top: calc(28 * var(--to-rem));
  }
  body.company .company-map__btn {
    height: calc(54 * var(--to-rem));
    min-width: calc(220 * var(--to-rem));
  }
  body.company .company-map__btn-text {
    font-size: clamp(14px, 2.0860495437vw, 17px);
  }
  .products-listing::before, .products-listing::after {
    width: min(26.075619296vw, 200px);
  }
  .products-listing {
    padding-block: calc(56 * var(--to-rem));
  }
  .products-cat {
    gap: calc(12 * var(--to-rem));
  }
  .products-cat__btn {
    min-width: calc(120 * var(--to-rem));
    min-height: calc(48 * var(--to-rem));
    padding-inline: calc(20 * var(--to-rem));
    font-size: clamp(13px, 2.0860495437vw, 18px);
  }
  .products-grid {
    grid-template-columns: 1fr;
    -webkit-column-gap: 0;
       -moz-column-gap: 0;
            column-gap: 0;
    row-gap: calc(28 * var(--to-rem));
    margin-top: 0;
  }
  .products-card__body {
    padding: calc(20 * var(--to-rem));
  }
  .products-card__cat {
    padding: calc(5 * var(--to-rem)) calc(12 * var(--to-rem));
    font-size: 13px;
  }
  .products-card__title {
    margin-top: calc(16 * var(--to-rem));
    font-size: clamp(16px, 2.3468057366vw, 20px);
  }
  .products-card__more {
    margin-top: calc(18 * var(--to-rem));
    padding: calc(8 * var(--to-rem)) calc(16 * var(--to-rem));
  }
  .products-card__more-text {
    font-size: 13px;
  }
  .products-card__more-arrow {
    width: calc(22 * var(--to-rem));
  }
  .products-paging {
    margin-top: calc(40 * var(--to-rem));
  }
  .products-paging .paging-text {
    font-size: clamp(13px, 2.0860495437vw, 18px);
  }
  .products-paging .paging-text a {
    min-width: calc(46 * var(--to-rem));
    min-height: calc(44 * var(--to-rem));
  }
  .products-paging .current {
    min-width: calc(46 * var(--to-rem));
    min-height: calc(44 * var(--to-rem));
  }
  .products-other {
    padding-bottom: calc(64 * var(--to-rem));
  }
  .products-other__title {
    font-size: clamp(18px, 2.8683181226vw, 28px);
  }
  .products-other__box {
    margin-top: calc(20 * var(--to-rem));
    padding: calc(28 * var(--to-rem)) calc(22 * var(--to-rem));
  }
  .products-other__group + .products-other__group {
    margin-top: calc(35 * var(--to-rem));
  }
  .products-other__cat {
    font-size: clamp(16px, 2.3468057366vw, 22px);
  }
  .products-other__text {
    margin-top: calc(12 * var(--to-rem));
    font-size: clamp(13px, 1.9556714472vw, 16px);
    line-height: 1.8;
  }
  .products-other__text:first-of-type {
    margin-top: calc(14 * var(--to-rem));
  }
  .products-single {
    padding-block: calc(56 * var(--to-rem));
  }
  .products-single__main {
    display: block;
  }
  .products-single__media {
    max-width: 100%;
  }
  .products-single__text-box {
    padding-top: 0;
    margin-top: calc(35 * var(--to-rem));
  }
  .products-single__title {
    font-size: clamp(18px, 2.8683181226vw, 32px);
  }
  .products-single__text {
    margin-top: calc(20 * var(--to-rem));
    font-size: clamp(13px, 1.9556714472vw, 16px);
  }
  .products-single__nav--prev {
    left: calc(8 * var(--to-rem));
  }
  .products-single__nav--next {
    right: calc(8 * var(--to-rem));
  }
  .products-single-thumbs {
    margin-top: calc(12 * var(--to-rem));
  }
  .products-single__back {
    margin-top: calc(40 * var(--to-rem));
  }
  .products-single__back-btn {
    min-width: calc(200 * var(--to-rem));
    min-height: calc(52 * var(--to-rem));
    padding-inline: calc(28 * var(--to-rem));
    font-size: clamp(13px, 2.0860495437vw, 18px);
  }
  .products-single__back-arrow {
    width: calc(22 * var(--to-rem));
  }
  body.contact .contact-tel {
    padding-block: calc(58 * var(--to-rem));
  }
  body.contact .contact-tel::before, body.contact .contact-tel::after {
    width: 42%;
    opacity: 0.45;
  }
  body.contact .contact-tel__label {
    font-size: clamp(16px, 2.6075619296vw, 28px);
    gap: calc(10 * var(--to-rem));
  }
  body.contact .contact-tel__label::before, body.contact .contact-tel__label::after {
    width: calc(22 * var(--to-rem));
  }
  body.contact .contact-tel__num {
    margin-top: calc(18 * var(--to-rem));
    gap: calc(8 * var(--to-rem));
  }
  body.contact .contact-tel__icon {
    width: calc(26 * var(--to-rem));
    height: calc(26 * var(--to-rem));
  }
  body.contact .contact-tel__tel {
    font-size: clamp(26px, 5.2151238592vw, 56px);
  }
  body.contact .contact-tel__hours {
    margin-top: calc(14 * var(--to-rem));
    font-size: clamp(13px, 1.9556714472vw, 16px);
  }
  body.contact .mail-form {
    padding-block: calc(50 * var(--to-rem));
  }
  body.contact .mail-form__title {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  body.contact .mail-form__text {
    margin-top: calc(35 * var(--to-rem));
  }
  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%;
  }
  body.contact .box-scroll__title,
  body.recruit .box-scroll__title {
    font-size: 16px;
  }
  body.contact .privacy-btn,
  body.recruit .privacy-btn {
    width: 100%;
    margin-bottom: 0px;
  }
  body.contact .privacy-btn__wrapper,
  body.recruit .privacy-btn__wrapper {
    margin-top: 30px;
    margin-bottom: 15px;
  }
  body.recruit .recruit-heading {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  body.recruit .recruit-lead {
    padding-block: calc(56 * var(--to-rem));
  }
  body.recruit .recruit-lead::before, body.recruit .recruit-lead::after {
    width: 42%;
    opacity: 0.3;
  }
  body.recruit .recruit-lead__catch {
    font-size: clamp(20px, 3.259452412vw, 40px);
  }
  body.recruit .recruit-lead__text {
    margin-top: calc(32 * var(--to-rem));
  }
  body.recruit .recruit-lead__text p {
    font-size: clamp(13px, 2.6075619296vw, 20px);
  }
  body.recruit .recruit-info {
    padding-block: calc(56 * var(--to-rem));
  }
  body.recruit .recruit-table {
    margin-top: calc(32 * var(--to-rem));
  }
  body.recruit .recruit-table th,
  body.recruit .recruit-table td {
    display: block;
    width: 100%;
    padding: calc(12 * var(--to-rem)) calc(16 * var(--to-rem));
    font-size: clamp(14px, 1.9556714472vw, 16px);
  }
  body.recruit .recruit-table th {
    width: 100%;
    text-align: left;
    border-bottom: 0;
  }
  body.recruit .recruit-table td {
    text-align: left;
  }
  body.recruit .recruit-table tr {
    display: block;
  }
  body.recruit .entry-form {
    padding-block: calc(56 * var(--to-rem));
  }
  body.recruit .entry-form .horizontal-table {
    margin-top: calc(32 * var(--to-rem));
  }
  body.recruit .entry-form input[type=radio] + span,
  body.recruit .entry-form input[type=checkbox] + span {
    font-size: 15px;
    line-height: 1.4;
    letter-spacing: 0;
  }
  body.recruit .entry-form .selectWrap {
    width: 60%;
  }
  body.recruit .entry-form__btn-wrapper {
    margin-top: calc(32 * var(--to-rem));
  }
  body.recruit .entry-form__btn {
    width: 100%;
    min-width: 0;
    padding: calc(16 * var(--to-rem)) calc(20 * var(--to-rem));
  }
  body.recruit .partner {
    padding-block: calc(56 * var(--to-rem));
  }
  body.recruit .partner__title {
    font-size: clamp(20px, 3.1290743155vw, 36px);
  }
  body.recruit .partner__lead {
    margin-top: calc(24 * var(--to-rem));
  }
  body.recruit .partner__lead p {
    font-size: clamp(14px, 1.9556714472vw, 16px);
  }
  body.recruit .partner__terms {
    margin-top: calc(30 * var(--to-rem));
  }
  body.recruit .partner__term {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: calc(8 * var(--to-rem));
  }
  body.recruit .partner__term:not(:first-child) {
    margin-top: calc(40 * var(--to-rem));
  }
  body.recruit .partner__term-label {
    width: auto;
    white-space: normal;
    font-size: clamp(13px, 2.6075619296vw, 20px);
  }
  body.recruit .partner__actions {
    -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(16 * var(--to-rem));
    margin-top: calc(36 * var(--to-rem));
  }
  body.recruit .partner__btn {
    width: min(86vw, 360 * var(--to-rem));
    height: calc(64 * var(--to-rem));
  }
  body.recruit .partner__btn-icon {
    width: calc(28 * var(--to-rem));
    height: calc(24 * var(--to-rem));
  }
  body.recruit .partner__btn-label {
    font-size: clamp(16px, 3.9113428944vw, 24px);
  }
  .l-header__inner {
    padding-inline: calc(16 * var(--to-rem));
  }
  .l-header__logo-link img {
    width: calc(280 * var(--to-rem));
  }
  .l-footer__inner {
    padding-block: calc(48 * var(--to-rem)) calc(24 * var(--to-rem));
  }
  .l-footer__body {
    -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));
  }
  .l-footer__logo img {
    width: calc(260 * var(--to-rem));
  }
  .l-footer__address {
    margin-top: calc(20 * var(--to-rem));
    font-size: clamp(13px, 2.0860495437vw, 16px);
  }
  .l-footer__nav {
    margin-top: 0;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    gap: calc(20 * var(--to-rem));
    width: 100%;
  }
  .l-footer__nav-list {
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    gap: calc(16 * var(--to-rem)) calc(24 * var(--to-rem));
  }
  .l-footer__contact {
    width: calc(200 * var(--to-rem));
    height: calc(44 * var(--to-rem));
  }
  .l-footer__contact-icon {
    width: calc(21 * var(--to-rem));
    height: calc(16 * var(--to-rem));
  }
  .l-footer__contact-label {
    font-size: clamp(13px, 2.3468057366vw, 16px);
  }
  .l-footer__copyright {
    margin-top: calc(32 * var(--to-rem));
    text-align: left;
  }
  .mv-jumbotron {
    height: 50svh;
  }
  .c-ttl--h2 {
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    text-align: center;
  }
  .c-ttl--h2 .c-ttl__dot {
    margin-bottom: calc(12 * var(--to-rem));
  }
  .c-ttl--h2 .c-ttl__sub {
    margin-top: calc(12 * var(--to-rem));
  }
  .c-btn--contact {
    width: calc(220 * var(--to-rem));
    height: calc(48 * var(--to-rem));
    gap: calc(10 * var(--to-rem));
  }
  .c-btn--contact .c-btn__icon {
    width: calc(21 * var(--to-rem));
    height: calc(16 * var(--to-rem));
  }
  .c-btn--contact .c-btn__label {
    font-size: calc(15 * var(--to-rem));
  }
  .c-btn--form {
    width: min(86vw, 420 * var(--to-rem));
    height: calc(76 * var(--to-rem));
    gap: calc(14 * var(--to-rem));
  }
  .c-btn--form .c-btn__icon {
    width: calc(26 * var(--to-rem));
    height: calc(19 * var(--to-rem));
  }
  .c-btn--form .c-btn__label {
    font-size: calc(18 * var(--to-rem));
  }
  .c-btn--more {
    width: calc(200 * var(--to-rem));
    height: calc(54 * var(--to-rem));
    gap: calc(14 * var(--to-rem));
  }
  .c-btn--more .c-btn__label {
    font-size: calc(15 * var(--to-rem));
  }
  .c-btn--more .c-btn__arrow {
    width: calc(22 * var(--to-rem));
    height: calc(8 * 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 (min-width: 768px) {
  .p-business__card:hover, .p-business__card:focus {
    -webkit-transform: translateY(calc(-6 * var(--to-rem)));
            transform: translateY(calc(-6 * var(--to-rem)));
  }
  .p-projects__more:hover, .p-projects__more:focus {
    opacity: 0.6;
  }
  .p-projects__nav-btn:hover:not(:disabled), .p-projects__nav-btn:focus:not(:disabled) {
    opacity: 0.7;
  }
  .p-recruit__more:hover, .p-recruit__more:focus {
    opacity: 0.6;
  }
  .p-contact__form:hover, .p-contact__form:focus {
    opacity: 0.6;
  }
  body.company .company-map__btn:hover, body.company .company-map__btn:focus {
    opacity: 0.6;
  }
  .products-cat__btn:hover, .products-cat__btn:focus {
    background-color: #014099;
    color: #fff;
  }
  .products-card:hover, .products-card:focus-within {
    -webkit-transform: translateY(-4px);
            transform: translateY(-4px);
    -webkit-box-shadow: 0 10px 28px rgba(1, 64, 153, 0.16);
            box-shadow: 0 10px 28px rgba(1, 64, 153, 0.16);
  }
  .products-paging .paging-text a:hover, .products-paging .paging-text a:focus {
    opacity: 0.6;
  }
  .products-single__zoom {
    -webkit-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
  }
  .products-single__zoom:hover, .products-single__zoom:focus-visible {
    opacity: 0.85;
  }
  .products-single__nav:not(.swiper-button-disabled):hover, .products-single__nav:not(.swiper-button-disabled):focus {
    background-color: #014099;
    color: #fff;
  }
  .products-single-thumbs .swiper-slide:hover {
    opacity: 1;
  }
  .products-single__back-btn:hover, .products-single__back-btn:focus {
    opacity: 0.6;
  }
  body.contact .privacy__link:focus, body.contact .privacy__link:hover,
  body.recruit .privacy__link:focus,
  body.recruit .privacy__link:hover {
    opacity: 0.6;
  }
  body.contact .privacy-btn:focus, body.contact .privacy-btn:hover,
  body.recruit .privacy-btn:focus,
  body.recruit .privacy-btn:hover {
    opacity: 0.6;
  }
  body.recruit .entry-form__btn:hover, body.recruit .entry-form__btn:focus {
    opacity: 0.6;
  }
  body.recruit .partner__btn--mail:hover, body.recruit .partner__btn--mail:focus {
    opacity: 0.6;
  }
  .l-header__nav-link {
    /* hover は目に優しい黄色に（opacity 減光だと白文字ヘッダーで分かりづらい・CEO 指示 2026-06-25） */
  }
  .l-header__nav-link:hover, .l-header__nav-link:focus {
    color: #ffe082;
  }
  .l-drawer__list a:hover, .l-drawer__list a:focus {
    opacity: 0.6;
    padding-left: calc(16 * var(--to-rem));
  }
  .l-footer__nav-link:hover, .l-footer__nav-link:focus {
    opacity: 0.6;
  }
  .l-footer__contact:hover, .l-footer__contact:focus {
    opacity: 0.6;
  }
  .l-footer__pagetop.is-show:focus, .l-footer__pagetop.is-show:hover {
    opacity: 0.6;
    -webkit-transform: translateY(calc(-4 * var(--to-rem)));
            transform: translateY(calc(-4 * var(--to-rem)));
  }
  .c-btn:hover, .c-btn:focus {
    opacity: 0.6;
  }
  .hidden-pc {
    display: none;
  }
}

@media screen and (max-width: 1023px) {
  .p-projects__more {
    width: calc(240 * var(--to-rem));
    height: calc(60 * var(--to-rem));
  }
  .p-recruit__more {
    width: calc(240 * var(--to-rem));
    height: calc(60 * var(--to-rem));
    margin-top: calc(40 * var(--to-rem));
  }
  .p-contact__form {
    width: calc(240 * var(--to-rem));
    height: calc(60 * var(--to-rem));
    margin-top: calc(40 * 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: #edf0ff;
    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 .box-scroll,
  body.recruit .box-scroll {
    height: 220px;
    margin-bottom: 15px;
    padding: 15px;
    word-break: break-all;
  }
  body.recruit .entry-form .horizontal-table table {
    font-size: 16px;
  }
  body.recruit .entry-form .horizontal-table th {
    border-bottom-width: 0;
    border-left: unset;
    background-color: #edf0ff;
    width: 100%;
    border-right: 0;
    padding: 10px;
  }
  body.recruit .entry-form .horizontal-table td {
    border-bottom-width: 0;
    border-right: unset;
    border-left: unset;
    width: 100%;
    padding: 10px;
  }
  body.recruit .entry-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;
  }
  .mv-jumbotron.is-recruit {
    background-position: left top;
  }
}

@media screen and (max-width: 1023px) and (min-width: 768px) {
  body.company .company-heading {
    margin-bottom: calc(min(2.8vw, 56px) + 15px);
  }
  body.contact .contact-tel__icon {
    width: min(3.3361134279vw, 40px);
    height: min(3.3361134279vw, 40px);
  }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
  .products-cat__btn {
    min-height: calc(52 * var(--to-rem));
  }
}

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

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