@charset "UTF-8";
/* -----------------------------------------------
* Page エントリーポイント
*   1ページ＝1ディレクトリ。各ページの担当者は自分のディレクトリだけを触る。
-------------------------------------------------- */
/* -----------------------------------------------
* TOP（index.html）— セクションごとにファイルを分ける
*   中身は各セクションの担当者が書く。ここは読み込みの束ねだけ。
-------------------------------------------------- */
/* FLOCSS
----------------------------------------------------- */
/* =====================================================
# home-fv — TOP の FV（全面写真のループスライダー＋キャッチ）
#
# 数値の一次ソース
#   構造・帯の座標 = ~/work/_ascii/arimura-top-inspect.log の GROUP visual [0,0,2000,1080]
#   文字組み       = デザイン案_20260909.psd のテキストエンジン値を psd_tools で直読み
#                    （FontSize / Tracking / Leading / 文字原点 / 縁取り効果まで実値）
#   参照画像       = self-coding-log/ref/fv.png（2000×1080・ink 走査で上の値を裏取り）
#
# カンプ実測（DOC 2000 基準）
#   FV 帯   [0,0,2000,1080]。ヘッダーは別担当の透過ヘッダーが上に重なるので、ここで余白は作らない。
#   和文    ShipporiMincho-Medium 64px / Tracking 50（=0.05em）/ Leading 89.6px / 白 #ffffff
#           文字原点 x=800.2 ・ 1行目ベースライン y=488.88 ・ ink [803,433,1696,584]
#   英文    Marcellus-Regular 40px / Tracking 50（=0.05em）/ Leading 64px / 白 #ffffff
#           文字原点 x=800.5 ・ ベースライン y=676.61 ・ ink [802,647,1704,689]
#   縁取り  和文・英文とも「光彩（外側）」＝ 乗算・#362918・不透明度 72%・サイズ 24px・スプレッド 0
#           → CSS では text-shadow: 0 0 24px rgba(54,41,24,.72) に置き換える（写真の上の可読性）
#
# 位置は ink ではなく「文字の原点」で置く（ink は書体のサイドベアリング分だけずれるため）。
#   ブロック上端 = 1行目ベースライン −（行送りの余り ÷2 ＋ アセンダ）
#     和文 = 488.88 −（(89.6 − 64×1.448)÷2 ＋ 64×1.16）    = 416.2 → top vw(416)
#     英文 = 676.61 −（(64 − 40×1.2539)÷2 ＋ 40×0.97412）  = 630.7
#     ※ Shippori Mincho は upem 1000 / hhea 1160・-288、Marcellus は upem 2048 / hhea 1995・-573。
#       いずれも hhea と usWin が同値なので Mac / Windows で行ボックスがずれない。
#   和文ブロックの高さ 89.6×2 = 179.2 → 下端 595.4。英文上端 630.7 との差 35.3 = margin-top vw(35)。
#
# 幅 768〜2000 は帯も文字も vw() で 2000 基準の比率を保つので、絶対配置のまま崩れない。
# そのため mq(xl) の上書きは不要（1199px / 768px で縦横比・文字位置とも比例することを確認済み）。
# 縦積み・配置替えを行うのは SP（md）だけ。
===================================================== */
.home-fv {
  position: relative;
  width: 100%;
  height: min(54vw, 1080px);
  overflow: hidden;
}
.home-fv {
  /* ▼ 写真の器。スライドは重ねて置き、表示中の1枚だけを見せる */
}
.home-fv__slider {
  position: absolute;
  z-index: 1;
  inset: 0;
}
.home-fv__slide {
  position: absolute;
  inset: 0;
}
.home-fv__slide picture {
  display: block;
  width: 100%;
  height: 100%;
  line-height: 0;
}
.home-fv__slide img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center center;
     object-position: center center;
}
.home-fv {
  /* スライドは既定で表示しておく（支給素材が1枚の間・JS を切った時も写真が消えない）。
     2枚以上あるときだけ JS が .is-ready を付け、そこから先はフェードで入れ替える。 */
}
.home-fv__slider.is-ready .home-fv__slide {
  opacity: 0;
  -webkit-transition: opacity 1.6s ease-in-out;
  transition: opacity 1.6s ease-in-out;
}
.home-fv__slider.is-ready .home-fv__slide.is-current {
  opacity: 1;
}
.home-fv {
  /* ▼ 文字（和文キャッチ＋英文）。カンプはどちらも左端 800 でそろう */
}
.home-fv__body {
  position: absolute;
  z-index: 2;
  left: min(40vw, 800px);
  top: min(20.8vw, 416px);
}
.home-fv {
  /* ▼ 和文キャッチ（コピー文なので p のまま） */
}
.home-fv__catch {
  color: #fff;
  font-family: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
  font-weight: 500;
  font-size: clamp(20px, min(3.2vw, 64px), 64px);
  line-height: 1.4;
  letter-spacing: 0.05em;
  text-shadow: 0 0 min(0.3vw, 6px) rgba(54, 41, 24, 0.72), 0 0 min(0.6vw, 12px) rgba(54, 41, 24, 0.72), 0 0 min(1.2vw, 24px) rgba(54, 41, 24, 0.72);
}
.home-fv {
  /* ▼ 英文（Marcellus） */
}
.home-fv__en {
  margin-top: min(1.75vw, 35px);
  color: #fff;
  font-family: "Marcellus", "Times New Roman", serif;
  font-weight: 400;
  font-size: clamp(14px, min(2vw, 40px), 40px);
  line-height: 1.6;
  letter-spacing: 0.05em;
  text-shadow: 0 0 min(0.3vw, 6px) rgba(54, 41, 24, 0.72), 0 0 min(0.6vw, 12px) rgba(54, 41, 24, 0.72), 0 0 min(1.2vw, 24px) rgba(54, 41, 24, 0.72);
}

/* =====================================================
# home-about — TOP の About（私たちについて）
#
# カンプ実測（DOC 2000 基準・~/work/_ascii/arimura-top-inspect.log ＋ ref/about.png の ink 走査）
#   地       about [0,1080,2000,2250] #362918（走査した実測色も (54,41,24) で一致）
#   和文     [263,1240,491,1270] 32px SemiBold 白
#   横罫     [265,1255,1735,1256] 1px
#   小英字   [263,1300,624,1361] 80px Marcellus 白
#   本文     [266,1480,768,1676] 24px Medium 白・4行
#            ink 行頭 y = 1480 / 1538 / 1595 / 1653 ＝ ピッチ 57.6px ＝ 24 × line-height 2.4
#            送りは letter-spacing 0.05em（4行の ink 幅 259/359/501/433 が計算値と 1px 以内で一致）
#   ボタン   [264,1756,508,1820] 244×64
#   写真     [878,1440,2000,2090] 1122×650
#            左上の角丸は ref/about.png の輪郭走査で半径 80px（dy=10→dx40 / 20→26 / 30→17 /
#            40→10 / 50→5 / 60→2 / 70→0 が r=80 の円と 1px 以内で一致）。
#            左下・右側は角丸なし（左下は y2088 まで x=878 のまま・右は画面端で見切れる）
#   大英字   [-16,2071,1066,2251] 240px Marcellus
#            ink 幅 1082 に対し Marcellus の素の字幅は 997 → letter-spacing 0.05em
#            実測色 (78,70,59)＝濃茶の地に白 14%（rgba で置く。地色に対する重ねなので変数参照）
#   刷毛     [-124,1811,724,2416] 848×605
#
# 縦の積み上げ（すべてカンプ実測から逆算・フォントメトリクスは実ファイルから取得）
#   Shippori Mincho  upem 1000 / ascent 1160 / descent -288（= 1.448em）
#   Marcellus        upem 2048 / ascent 1995 / descent -573（= 1.2539em）
#   → 本文（24px・行送り 2.4）は行ボックス天から ink 天まで 17.5px（Chromium 実測）。
#     ink 天 1480 なので本文ブロックの箱の天は 1462。
#   → 見出しの箱は c-sec-title 側が line-height:1 前提で
#     和文 1238〜1270 ／ 小英字 1291.8〜1371.8（＝見出しブロックの高さ 133.8）。
#   セクション天 1080 → 見出しの箱の天 1238        ＝ padding-top   158
#   見出しの箱の底 1371.8 → 写真の天 1440          ＝ __row の margin-top 68
#   写真の天 1440 → 本文の箱の天 1462              ＝ __desc の margin-top 22
#   本文の箱の底 1692.4 → ボタンの天 1756          ＝ __btn の margin-top 64
#   写真の底 2090 → セクション底 2250              ＝ padding-bottom 160
#   合計 158 + 133.8 + 68 + 650 + 160 = 1169.8 ≒ カンプのセクション高さ 1170
#   （縦の最終値は Chromium で描画実測して 1px 以内に合わせ込み済み）
#
# 🚨 見出しの箱の高さは c-sec-title（別担当）の実装で決まる。ズレたら
#    padding-top と __row の margin-top の2つだけで吸収する（他の値は触らない）。
===================================================== */
.home-about {
  position: relative;
  overflow: hidden;
  padding-top: min(7.9vw, 158px);
  padding-bottom: min(8vw, 160px);
  background-color: #362918;
  color: #fff;
}
.home-about {
  /* ▼ 見出しの帯（横罫がコンテナ全幅 1470px と一致するので .inner の中に置く） */
}
.home-about__head {
  position: relative;
  z-index: 2;
}
.home-about {
  /* ▼ 本文＋ボタン と 写真 の行
       写真だけが右の画面端（カンプ x=2000）まで出るため .inner に入れず、
       .inner と同じ左オフセットだけを自前で持つ（値は layout/_l-inner.scss と同義）。
       2000px 時 (100% - 1470) / 2 = 265 ＝ カンプのコンテナ左端に一致する。 */
}
.home-about__row {
  position: relative;
  z-index: 2;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
  margin-top: min(3.4vw, 68px);
  padding-left: max(calc(30 * var(--to-rem)), (100% - calc(1470 * var(--to-rem))) * 0.5);
}
.home-about {
  /* ▼ 左の本文カラム
       PC は 2000 - 265(左オフセット) - 1122(写真) = 613px がそのまま割り当たる。
       lg 以下は縦積みになるので、右端に .inner と同じ余白を自前で作る。 */
}
.home-about__body {
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  min-width: 0;
}
.home-about {
  /* ▼ 本文（改行位置はカンプのテキストレイヤー原文どおり） */
}
.home-about__desc {
  margin-top: min(1.1vw, 22px);
  font-family: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
  font-size: clamp(16px, min(1.2vw, 24px), 24px);
  font-weight: 500;
  line-height: 2.4;
  letter-spacing: 0.05em;
}
.home-about {
  /* ▼ View More（リンク先は仕様書 TOP レイアウトの指示どおり company.html） */
}
.home-about__btn {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin-top: min(3.2vw, 64px);
}
.home-about {
  /* ▼ 写真（右は画面端まで見切れる・左上だけ角丸 80px） */
}
.home-about__fig {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: min(56.1vw, 1122px);
  overflow: hidden;
  border-radius: min(4vw, 80px) 0 0 0;
}
.home-about__fig img {
  width: 100%;
  height: auto;
  aspect-ratio: 1122/650;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: 50% 5%;
     object-position: 50% 5%;
}
.home-about {
  /* ▼ 大英字（セクション下端に沈む装飾）
       ベースラインをセクションの底に合わせる。Marcellus は line-height:1 のとき
       行ボックスの底からベースラインまで 0.15283em、カンプのベースラインは
       セクション底 2250 の 2.6px 上（ink 底 2251 − 文字の下はみ出し 3.6px）。
       → 底のオフセット = 0.15283em − 2.6px ＝ 0.142em ぶん下げる。
       左は "A" の左サイドベアリング −2.34px を戻して ink 左端 −16 に合わせる（0.057em）。
       いずれも em で持つので、clamp が効いても位置関係が崩れない。 */
}
.home-about__en {
  position: absolute;
  left: -0.057em;
  bottom: -0.142em;
  z-index: 1;
  margin: 0;
  color: rgba(255, 255, 255, 0.14);
  font-family: "Marcellus", "Times New Roman", serif;
  font-size: clamp(60px, min(12vw, 240px), 240px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.05em;
  white-space: nowrap;
  pointer-events: none;
}
.home-about {
  /* ▼ 刷毛のストローク（左端から見切れる・下はセクションの外へ 166px 出る）
       カンプ [-124,1811,724,2416]。底を基準に置くと見出しの高さに影響されない。 */
}
.home-about__brush {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 0;
  width: min(36.2vw, 724px);
  pointer-events: none;
}
.home-about__brush img {
  width: 100%;
  height: auto;
}

/* =====================================================
# home-business — TOP の Business（業務内容）
#
# カンプ: デザイン案_20260909.psd（DOC 2000 × 6394）
# 数値の一次ソース
#   構造・座標 = ~/work/_ascii/arimura-top-inspect.log ＋ PSD 直読み（psd_tools）
#   色・にじみ = self-coding-log/ref/business.png（カンプ 2000px の y2251-3373 帯）を画素実測
#   文字の行ボックス = Marcellus / ShipporiMincho の hhea・glyph bounds から逆算
#
# セクション帯 [0,2251,2000,3373]・地は白（$color_bg）
#   ├ 見出し（c-sec-title--right）  和文 2410 ／ 罫 2426 ／ 小英字 2473
#   ├ 大英字 "Business"            ink [1177,2514,2087,2687] 240px
#   ├ 写真（可視）                 [-1,2609,1121,3259] 1122×650・右上だけ角丸
#   ├ 石材パネル                   [879,2686,2001,3373] 1122×687・左下だけ角丸
#   └ 業務内容リスト               罫 [1245,2889,1735,2890] 幅 490・送り 121 × 4
#
# 🚨 縦位置の基準の取り方
#   __body の箱を石材パネル [.., 2686, .., 3373] とピタリ同じにしてある。
#   写真も大英字も「__body の天から上へ何 px」で置いているので、
#   見出し（別担当の c-sec-title）の実装高さが変わっても下半分はズレない。
#   PC だけ見出しを絶対配置にしているのはこのため（xl 以下は通常フローへ戻す）。
===================================================== */
.home-business {
  position: relative;
  padding-top: min(21.75vw, 435px);
  padding-bottom: 0;
  background-color: #ffffff;
}
.home-business {
  /* ▼ 見出し（c-sec-title--right）を載せる箱
       カンプの和文 ink 天 2410 から ShipporiMincho の行ボックス天を逆算すると 2407.9。
       セクション天 2251 との差 156.9 → vw(157)。
       （hhea ascent 1.160em / descent 0.288em・「業」の ink 天 = baseline - 0.849em） */
}
.home-business__head {
  position: absolute;
  z-index: 1;
  top: min(7.85vw, 157px);
  right: 0;
  left: 0;
}
.home-business {
  /* ▼ 大英字 "Business"（右端から見切れる装飾）
       ink [1177,2514,2087,2687] 240px Marcellus・PSD の塗り 20/255。
       画面上の実測は #f3f3f3 ＝ 白地の上の rgba(#362918, .06) と同値。
       ・左  : ink 左 1177 − Marcellus "B" の左サイドベアリング 16.8px = 1160.2 → 58.01%
       ・上  : ink 天 2514 → baseline 2683.9 → 行ボックス天 2480.6。
               __body の天 2686 との差 205.4 → vw(206)。
               font-size と同じ vw 係数で効くので、どの幅でも baseline がパネルの
               天に乗り続ける（＝カンプの狙いどおり）。
       ・字送り: 素の字幅 824.9px に対しカンプ ink は 910px → 0.05em（80px 側も同値） */
}
.home-business__deco {
  position: absolute;
  z-index: 1;
  top: calc(min(10.3vw, 206px) * -1);
  left: 58.01%;
  margin: 0;
  color: rgba(54, 41, 24, 0.06);
  font-family: "Marcellus", "Times New Roman", serif;
  font-size: clamp(64px, min(12vw, 240px), 240px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.05em;
  white-space: nowrap;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.home-business {
  /* ▼ 本体（箱＝石材パネル 1122×687）
       高さは中身で決まる: 上余白 83（2686→2769）＋ 4項目 484 ＋ 下余白 120 = 687 */
}
.home-business__body {
  position: relative;
  padding-top: min(4.15vw, 83px);
  padding-bottom: min(6vw, 120px);
}
.home-business__body {
  /* 石材パネル [879,2686,2001,3373]。左下だけ角丸（横 73 / 縦 80 の楕円）。
     テクスチャは PSD からの書き出し（1121×687＝パネルと同寸）。
     読み込めなかったときのために地色 $color_bg_gray も敷いておく。 */
}
.home-business__body::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 56.05%;
  border-bottom-left-radius: 6.51% 11.64%;
  background-color: #e2e1df;
  background-image: url(../img/common/texture-stone.webp);
  background-position: center;
  background-size: cover;
  pointer-events: none;
}
.home-business {
  /* ▼ 写真（可視範囲 1122×650・右上だけ角丸）
       パネルの天より 77px 上（2609 と 2686 の差）から始まり、左は画面の端まで届く。 */
}
.home-business__fig {
  position: absolute;
  z-index: 2;
  top: calc(min(3.85vw, 77px) * -1);
  left: 0;
  width: 56.05%;
  aspect-ratio: 1122/650;
  overflow: hidden;
  border-top-right-radius: 6.51% 12.31%;
}
.home-business__fig picture {
  display: block;
  width: 100%;
  height: 100%;
}
.home-business__fig {
  /* 写真は 2026-09-30 修正#2 で縦長（3:4）に差し替え。枠（1122×650）いっぱいに
     cover で敷き、職人のヘルメットから手元までが入る縦位置を持つ。
     absolute で敷くのは、md で枠を relative に戻しても基準が枠のままになるため。 */
}
.home-business__fig img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: 50% 16%;
     object-position: 50% 16%;
}
.home-business {
  /* ▼ リストを載せる inner（パネル・写真より手前に出す） */
}
.home-business__body > .inner {
  position: relative;
  z-index: 3;
}

/* =====================================================
# p-business-nav — 業務内容の4項目リスト（TOP business）
#
# カンプ実測（DOC 2000 基準）
#   罫 線3      [1245,2889,1735,2890] 1px #362918 ＝ 幅 490・項目の送りは 121
#   和文        「左官工事」ink [1245,2815,1373,2844] 32px ShipporiMincho SemiBold
#   円 楕円形1  実体 [1687,2806,1735,2854] ＝ 48×48・塗り 0・1px の境界線 #362918
#               （inspect ログの 54×54 は境界線効果のにじみを含んだ値なので採らない）
#   矢印        ink シャフト [1700,2829,1721,2830] 22px ／ 矢じり x1713-1721・y2821-2838
#   円の中心 (1711,2830) は項目の箱 [1245,2769,1735,2889] の縦中央と一致する。
#
# 図形なので寸法は「単調 clamp」（base 1本）で下限を確保する＝XL・SP でも豆粒化しない。
# ※ 本サイトには project レイヤーのディレクトリが無いため、当面ここに置く。
===================================================== */
.p-business-nav {
  width: 33.333%;
  margin: 0 0 0 auto;
  padding: 0;
  list-style: none;
}
.p-business-nav__item {
  border-bottom: 1px solid #362918;
}
.p-business-nav__link {
  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;
  gap: min(1vw, 20px);
  min-height: clamp(64px, min(6vw, 120px), 120px);
  color: #362918;
  text-decoration: none;
}
.p-business-nav__label {
  font-family: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
  font-size: clamp(16px, min(1.6vw, 32px), 32px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
}
.p-business-nav {
  /* ▼ 円 48px（塗りなし・1px 罫）＋ 中の矢印。
       矢印はカンプの素材 arrow-right-thin をそのまま背景に置く（global の arrow-thin）。
       2026-10-06 修正#4: 以前は横線と矢じりを疑似要素2つで組んでおり、横線が先端より約1px はみ出していた。 */
}
.p-business-nav__icon {
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
  width: clamp(36px, min(2.4vw, 48px), 48px);
  height: clamp(36px, min(2.4vw, 48px), 48px);
  border: 1px solid #362918;
  border-radius: 50%;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%23362918' d='M218.83,130.83l-72,72a4,4,0,0,1-5.66-5.66L206.34,132H40a4,4,0,0,1,0-8H206.34L141.17,58.83a4,4,0,0,1,5.66-5.66l72,72A4,4,0,0,1,218.83,130.83Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-origin: border-box;
  background-position: center;
  background-size: 66.667% auto;
  -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;
}

/* =====================================================
# home-cases — TOP の 施工事例（Cases）
#
# カンプ実測（DOC 2000 基準・~/work/_ascii/arimura-top-inspect.log ＋ ref/cases.png の ink 走査）
#   セクションの箱   [0,3373,2000,4556]
#                    白地  3373 → 3756（383px）／ 濃茶 #362918  3756 → 4556（800px）
#   和文「施工事例」 ink [264,3533,391,3562] 32px ShipporiMincho SemiBold #362918
#   横罫             [265,3548,1735,3549]（和文の背後だけ地色でマスク＝ ref では 413 から見える）
#   小英字「Cases」  ink [267,3595,472,3652] 80px Marcellus #362918
#   リード           ink 1行目 [1098,3596,1734,3617] ／ 2行目 [1099,3654,1306,3675]
#                    24px ShipporiMincho Medium・行ピッチ 58px・字間 0.05em
#   写真カード       y 3836〜4316（480×480）・角丸 32px（ref の角追跡で実測）
#                    x = -281 / 239 / 759 / 1279 / 1799（間隔 520 ＝ 480 ＋ 40）
#                    ref の横断走査でも 0〜198 / 239〜718 / 759〜1238 / 1279〜1758 / 1799〜1999 と一致
#   大英字「Cases」  ink [-47,4377,571,4552] 240px Marcellus・実測色 #4e463b
#                    ＝ 濃茶 #362918 の上に白 13%
#   View More        [1494,4372,1738,4436]（共通部品 c-btn--more）
#
# フォントの実測（Google Fonts を実描画して計測。字間はいずれも 0.05em で ink 幅がカンプと一致）
#   Marcellus 240px / line-height:1
#     行ボックス天 → 字面天 32px ／ 字面底 → 行ボックス底 34px ／ 字面幅 617（カンプ 618）
#   Marcellus 80px  / line-height:1     行ボックス天 → 字面天 10px
#   ShipporiMincho 32px / line-height:1 行ボックス天 → 字面天 3px（＝和文見出しの箱天は 3530）
#   ShipporiMincho 24px / line-height:2.4167
#     行ボックス天 → 1行目の字面天 19px ／ 字面幅 637（カンプ 1行目 637）
#
# 🚨 見出しブロックの縦位置は「c-sec-title の __ja が line-height:1」を前提に置いている。
#    共通部品側で行送りを変える時は、この padding-top も合わせて見直すこと。
===================================================== */
.home-cases {
  /* ▼ 白地の見出し部（3373 → 3756） */
}
.home-cases__head {
  display: grid;
  min-height: min(19.15vw, 383px);
  padding-top: clamp(40px, min(7.85vw, 157px), 157px);
  padding-bottom: clamp(35px, min(3vw, 60px), 60px);
}
.home-cases__title {
  grid-area: 1/1;
}
.home-cases {
  /* ▼ リード文（右カラム・2行・改行位置は PSD 原文どおり） */
}
.home-cases__lead {
  grid-area: 1/1;
  justify-self: start;
  width: 44.8%;
  margin-top: min(2.35vw, 47px);
  margin-left: 56.6%;
  color: #362918;
  font-family: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
  font-size: clamp(16px, min(1.2vw, 24px), 24px);
  font-weight: 500;
  line-height: 2.4167;
  letter-spacing: 0.05em;
}
.home-cases {
  /* ▼ 濃茶の帯（3756 → 4556 の 800px）
       カードと大英字はどちらも画面の外へ出るので、はみ出しはこの箱の中で閉じる。 */
}
.home-cases__body {
  position: relative;
  padding-top: clamp(40px, min(4vw, 80px), 80px);
  padding-bottom: clamp(60px, min(6vw, 120px), 120px);
  overflow: hidden;
  background-color: #362918;
}
.home-cases {
  /* ▼ 写真の帯（5枚 × 2セット）
       トラックの半分＝1セットぶん左へ流したら先頭へ戻す。戻った瞬間の絵が流す前と同じなので
       継ぎ目が出ない。始点の -4.616% はカンプの 1枚目の左端 -281 ÷ トラック幅 5200。
       % で持たせてあるので、カードが小さくなる幅でも同じ見え方のまま比率が保たれる。 */
}
.home-cases__track {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  -webkit-transform: translate3d(-4.616%, 0, 0);
          transform: translate3d(-4.616%, 0, 0);
  -webkit-animation: home-cases-slide 40s linear infinite;
          animation: home-cases-slide 40s linear infinite;
}
.home-cases__item {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: clamp(240px, min(24vw, 480px), 480px);
  margin-right: clamp(20px, min(2vw, 40px), 40px);
}
.home-cases__img {
  display: block;
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: clamp(16px, min(1.6vw, 32px), 32px);
  -o-object-fit: cover;
     object-fit: cover;
}
.home-cases {
  /* ▼ 帯の下（View More ボタン） */
}
.home-cases__foot {
  position: relative;
  z-index: 1;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  padding-top: clamp(35px, min(2.8vw, 56px), 56px);
}
.home-cases {
  /* ▼ 帯の左下に敷く大英字（装飾）
       left / bottom は自分の font-size 基準の em で持つので、文字が縮む幅でも
       カンプと同じ食い込み方（字面左 -47・字面底が帯底の 4px 上）のまま保たれる。 */
}
.home-cases__deco {
  position: absolute;
  bottom: -0.125em;
  left: -0.2333em;
  color: rgba(255, 255, 255, 0.13);
  font-family: "Marcellus", "Times New Roman", serif;
  font-size: clamp(72px, min(12vw, 240px), 240px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.05em;
  white-space: nowrap;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

@-webkit-keyframes home-cases-slide {
  from {
    -webkit-transform: translate3d(-4.616%, 0, 0);
            transform: translate3d(-4.616%, 0, 0);
  }
  to {
    -webkit-transform: translate3d(-54.616%, 0, 0);
            transform: translate3d(-54.616%, 0, 0);
  }
}

@keyframes home-cases-slide {
  from {
    -webkit-transform: translate3d(-4.616%, 0, 0);
            transform: translate3d(-4.616%, 0, 0);
  }
  to {
    -webkit-transform: translate3d(-54.616%, 0, 0);
            transform: translate3d(-54.616%, 0, 0);
  }
}
/* =====================================================
# TOP > CONTACT（お問い合わせ）
#
# カンプ実測（DOC 2000 基準）
#   一次ソース1 = ~/work/_ascii/arimura-top-inspect.log の GROUP contact
#   一次ソース2 = デザイン案_20260909.psd を psd_tools で直読み（図形パス・レイヤー効果・
#                 テキストの行送り/トラッキング・塗り不透明度）
#   一次ソース3 = self-coding-log/ref/contact.png（カンプ jpg の画素走査。色と角丸の検算）
#
#   セクション    [0,4556,2000,5596]（地は白。下側に石材テクスチャ色の帯）
#   帯            [0,4916,2000,5596] 角丸 上 80 / 下 0（PSD RoundedRectangle）
#                 画素走査でも x=10→y4957 / 20→4943 / 40→4926 / 60→4918 が
#                 半径 80 の円弧と 1px 以内で一致する
#   大英字        "Contact" 240px Marcellus・ink [-37,4746,894,4921]
#                 文字色は $color_main だが PSD の塗り不透明度が 20/255（＝約 8%）
#   カード 3枚    458×458・角丸 40・カード間 32（PSD のパス実測）
#                 inspect ログの 465×465／間隔 26 は「外側の光彩」を含む箱なので採らない
#                 3枚の合計 1438 は .inner（1470）の中で左右 16px ずつ余る＝中央寄せ
#   カード内      見出し 32px SemiBold 2行（行送り 44.8）・左寄せ
#                 短い罫線 298px（＝カードの内容幅そのもの）
#                 円 80px（内側 1px ストローク）・アイコン 32px
#                 番号 48px SemiBold ／ 注記 18px Regular ／ ボタン 297×80・角丸 8
#
# 縦の位置は「PSD のベースライン」から CSS の行ボックスに直して置いている。
#   Shippori Mincho は ascent 1.16em / descent 0.29em（＝内容領域 1.45em）、
#   Marcellus は 0.97em / 0.28em（同 1.25em）。ブラウザ実測値。
#   例）見出し 32px・行送り 1.4 → 行ボックス 44.8・ハーフレディング -0.8。
#       1行目ベースライン 5105.44 から箱の上端は 5069.12 ＝ カード上端 4997 から 72.1。
===================================================== */
.home-contact {
  position: relative;
  overflow: hidden;
  padding-top: clamp(60px, min(7.875vw, 157.5px), 157.5px);
  background-color: #ffffff;
}

/* ▼ 見出し（共通部品 c-sec-title の右寄せ）。帯・大英字より前面に置く */
.home-contact__head {
  position: relative;
  z-index: 2;
  margin-bottom: clamp(24px, min(3.45vw, 69px), 69px);
}

/* ▼ 左端から見切れる装飾の大英字。帯（z-index:1）の背面に置く */
.home-contact__deco {
  position: absolute;
  top: clamp(90px, min(7.89vw, 157.8px), 157.8px);
  left: calc(min(2.295vw, 45.9px) * -1);
  z-index: 0;
  margin: 0;
  color: rgba(54, 41, 24, 0.08);
  font-family: "Marcellus", "Times New Roman", serif;
  font-size: clamp(60px, min(12vw, 240px), 240px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.05em;
  white-space: nowrap;
  pointer-events: none;
}

/* ▼ 石材テクスチャ色の帯（画面幅いっぱい・上だけ角丸 80） */
.home-contact__band {
  position: relative;
  z-index: 1;
  padding-block: clamp(40px, min(4.05vw, 81px), 81px) clamp(60px, min(7.05vw, 141px), 141px);
  border-radius: min(4vw, 80px) min(4vw, 80px) 0 0;
  background-color: #e2e1df;
  background-image: url("../img/common/texture-stone.webp");
  background-position: center;
  background-size: cover;
}

/* ▼ お問い合わせカード（案件メモの共通の型 p-contact__card）
     TOP の CONTACT でしか使わないのでこのファイルに置く。
     下層でも同じカードが要るようになったら project 層へ移す */
.p-contact__list {
  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: 2.1769%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.p-contact__card {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  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;
  width: 31.1565%;
  padding: clamp(28px, min(3.605vw, 72.1px), 72.1px) 5.4422% clamp(28px, min(3.55vw, 71px), 71px);
  border-radius: clamp(16px, min(2vw, 40px), 40px);
  background-color: #fff;
  -webkit-box-shadow: 0 0 clamp(2px, min(0.2vw, 4px), 4px) rgba(54, 41, 24, 0.24);
          box-shadow: 0 0 clamp(2px, min(0.2vw, 4px), 4px) rgba(54, 41, 24, 0.24);
}

.p-contact__title {
  margin: 0;
  padding-bottom: clamp(6px, min(0.515vw, 10.3px), 10.3px);
  border-bottom: 1px solid #362918;
  color: #362918;
  font-family: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
  font-size: clamp(20px, min(1.6vw, 32px), 32px);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.05em;
}

.p-contact__icon {
  -webkit-align-self: center;
      -ms-flex-item-align: center;
          align-self: center;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  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(4vw, 80px), 80px);
  height: clamp(48px, min(4vw, 80px), 80px);
  margin-top: clamp(16px, min(1.65vw, 33px), 33px);
  border: 1px solid currentcolor;
  border-radius: 50%;
  color: #6f5506;
}
.p-contact__icon svg {
  display: block;
  width: clamp(20px, min(1.6vw, 32px), 32px);
  height: auto;
}

/* ▼ メールだけ淡い金（PSD のストローク／アイコン色が電話・FAX と違う） */
.p-contact__icon--mail {
  color: #a78c35;
}

.p-contact__num {
  margin: clamp(3px, min(0.25vw, 5px), 5px) -12% 0;
  color: #362918;
  font-family: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
  font-size: clamp(24px, min(2.4vw, 48px), 48px);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.05em;
  text-align: center;
}
.p-contact__num a {
  color: inherit;
  text-decoration: none;
}

.p-contact__note {
  margin: 0;
  color: #362918;
  font-family: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
  font-size: clamp(14px, min(0.9vw, 18px), 18px);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.05em;
  text-align: center;
}

/* ▼ メールカードのボタン（contact.html ＝ 仕様書シート5 のメールフォームへ） */
.p-contact__btn {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  height: clamp(56px, min(4vw, 80px), 80px);
  margin-top: clamp(14px, min(1.05vw, 21px), 21px);
  border-radius: clamp(4px, min(0.4vw, 8px), 8px);
  background-color: #a78c35;
  -webkit-box-shadow: 0 0 clamp(2px, min(0.2vw, 4px), 4px) rgba(54, 41, 24, 0.24);
          box-shadow: 0 0 clamp(2px, min(0.2vw, 4px), 4px) rgba(54, 41, 24, 0.24);
  color: #fff;
  font-family: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
  font-size: clamp(16px, min(1.2vw, 24px), 24px);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.05em;
  text-decoration: none;
  -webkit-transition: opacity 0.4s ease;
  transition: opacity 0.4s ease;
}

/* ▼ 1024〜1199px：3枚並びのまま。寸法は clamp が受けるので上書きしない */
/* ▼ 〜1023px：番号 48px の下限 24px がカードの内容幅に収まらなくなるので、
      内側の余白を詰めて、番号の下限も 20px まで下げる */
/* ▼ SP：カード3枚を縦積み */
/* =====================================================
# business-service — 下層 business.html（業務内容）
#
# 数値の一次ソース
#   レイアウト = 仕様書 xlsx の図形ダンプ（xl/drawings/drawing5.xml）を px 換算した実測。
#                ワイヤーの版面は 1368px（全幅の帯「正方形/長方形 4」の x 61〜1429）。
#                カンプ DOC 2000px へは ×1.462 で換算する（以下 (w→c) と表記）。
#   型・色・字  = TOP（_assets/scss/page/home/sections/*.scss）と _variables.scss。
#                下層は TOP の設計言語を踏襲し新しい型を作らない（EZ 規約）。
#
# ワイヤーの実測（w = ワイヤー px ／ c = 2000 換算）
#   リード帯     w y489〜708（MV の直下に隙間なし・高さ 219 → c 320）／文字は中央寄せ3行
#   1項目の構成  番号＋工事名 → 画像 → パネル（説明文の地）
#     01 番号     w x176 y765-859（48pt）  工事名 w x313 y795-838（18pt）
#     01 画像     w x166-627 y888-1168     464×265 → c 700×467（3:2・司令指示「480×320 相当」）
#     01 パネル   w x584-1375 y937-1199    幅 791 → c 1156（画面の端まで抜ける）
#     01 説明文   w x677-1261 y1013-1148   14pt・4行
#   → 相対値に直すと全4項目で共通
#     パネルは画像の右端に 43(w) → 63(c) 重なる
#     パネルの天は画像の天より 49(w) → 72(c) 下がる
#     説明文の天は画像の天より 125(w) → 183(c) 下がる
#     説明文の左端は画像の右端から 74(w) → 73(c)（＝パネル左端から 136c）
#     説明文の右端は .inner の右端（w1261 → c1754 ≒ inner 右 1735）
#     説明文の底からパネルの底まで 51(w) → 75(c)
#
# 文字の階層はワイヤーの pt 比が TOP の実測値とそのまま一致する（新しい階層を作らない）
#   番号 48pt : 工事名 18pt : 本文 14pt ＝ 80px : 32px : 24px
#   ＝ c-sec-title__en（80px Marcellus）／ c-sec-title__ja（32px SemiBold）／ body（24px Medium）
#   説明文の行数もこの換算で全4項目ワイヤーと一致する（4 / 5 / 3 / 2 行）。
#
# 塗り分け（ワイヤーは 9D4F01 と 582C00 の2色を交互に使う）
#   01・03 明るい面 → 石材テクスチャ（TOP business のパネルと同じ地）
#   02・04 濃い面   → $color_main の濃茶＋白文字（TOP about と同じ地）
#
# 🚨 縦位置の基準
#   1項目 ＝ 2行×2列のグリッド。行1にラベル、行2に画像・パネル・説明文を重ねて置く。
#   パネルは行2に stretch させるので、説明文が伸びてもパネルの底が必ず追従する。
#   パネルが外へ抜ける量は vw(265)（＝2000 時の .inner の外側余白）で足りる。
#   はみ出しは foundation/_base.scss の main{overflow:hidden} が切る。
===================================================== */
.business-service {
  padding-bottom: min(8vw, 160px);
}
.business-service {
  /* ▼ リード帯（ワイヤー「正方形/長方形 4」）
       MV の直下に隙間なく続く全幅の帯。地は TOP business のパネルと同じ石材テクスチャ。
       高さ 320c ＝ 上下の余白 74 ＋ 本文3行 173。 */
}
.business-service__lead {
  padding-block: min(3.7vw, 74px);
  background-color: #e2e1df;
  background-image: url(../img/common/texture-stone.webp);
  background-position: center;
  background-size: cover;
}
.business-service {
  /* ▼ リード本文
       ワイヤーは本文と同じ 14pt なので、EZ 規約のリード 20px ではなく本文と同じ 24px で置く
       （中央寄せのリードは justify にしない＝EZ 規約）。 */
}
.business-service__lead-text {
  margin: 0;
  font-size: clamp(16px, min(1.2vw, 24px), 24px);
  font-weight: 500;
  line-height: 2.4;
  letter-spacing: 0.05em;
  text-align: center;
}
.business-service {
  /* ▼ 01〜04 の並び。仕様書ワイヤーはリード帯の直後に 01 が来る（セクション見出しは無い） */
}
.business-service__list {
  margin-top: min(6vw, 120px);
}
.business-service {
  /* ▼ 1項目（01〜04）
       列 ＝ 画像 47.62% ／ 本文 1fr。左右の余白は .inner と同じ量を padding で持つ。
       行 ＝ 1:ラベル（番号＋工事名） 2:画像・パネル・説明文（重ねる）。 */
}
.business-service__item {
  display: grid;
  grid-template-columns: 47.62% minmax(0, 1fr);
  grid-template-rows: auto auto;
  row-gap: min(2.5vw, 50px);
  padding-inline: max(calc(30 * var(--to-rem)), (100% - calc(1470 * var(--to-rem))) * 0.5);
  scroll-margin-top: clamp(64px, min(6.4vw, 128px), 128px);
}
.business-service__item + .business-service__item {
  margin-top: min(6vw, 120px);
}
.business-service__item {
  /* パネル（説明文の地）。空の div を置かずグリッドアイテムとして描く。
     外側は画面の端まで抜き、内側は画像の下へ 63c 潜り込ませる。 */
}
.business-service__item::before {
  content: "";
  grid-area: 2/2/3/3;
  z-index: 0;
  margin-top: min(3.6vw, 72px);
  margin-left: calc(min(3.15vw, 63px) * -1);
  margin-right: calc(min(13.25vw, 265px) * -1);
  border-bottom-left-radius: min(3.65vw, 73px) min(4vw, 80px);
  background-color: #e2e1df;
  background-image: url(../img/common/texture-stone.webp);
  background-position: center;
  background-size: cover;
}
.business-service__item {
  /* lg 以下は画像が 360px を切って本文の桁も足りなくなるので縦積みにする。
     行 ＝ 1:ラベル 2:画像 3:説明文（パネルは3行目に敷いて左右へ抜く）。 */
}
.business-service {
  /* ▼ 偶数の段（02・04）は左右反転（ワイヤーの交互配置） */
}
.business-service__item--reverse {
  grid-template-columns: minmax(0, 1fr) 47.62%;
}
.business-service__item--reverse::before {
  grid-area: 2/1/3/2;
  margin-right: calc(min(3.15vw, 63px) * -1);
  margin-left: calc(min(13.25vw, 265px) * -1);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: min(3.65vw, 73px) min(4vw, 80px);
}
.business-service {
  /* ▼ 濃い面の段（02・04＝ワイヤーの塗り 582C00） */
}
.business-service__item--dark::before {
  background-color: #362918;
  background-image: none;
}
.business-service__item--dark .business-service__desc {
  color: #fff;
}
.business-service {
  /* ▼ 番号＋工事名（画像の上・画像の左端にそろえる） */
}
.business-service__label {
  grid-area: 1/1/2/2;
  align-self: start;
  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(2.2vw, 44px);
}
.business-service__item--reverse .business-service__label {
  grid-area: 1/2/2/3;
}
.business-service {
  /* ▼ 番号（ワイヤー 48pt ＝ TOP の小英字と同じ 80px Marcellus）
       色は $color_accent（_variables.scss の「中間茶・罫線や補助装飾」）。 */
}
.business-service__num {
  margin: 0;
  color: #8e7052;
  font-family: "Marcellus", "Times New Roman", serif;
  font-size: clamp(36px, min(4vw, 80px), 80px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.05em;
}
.business-service {
  /* ▼ 工事名（ワイヤー 18pt ＝ カンプ 32px SemiBold。
       2026-09-10 CEO ご指示で 40px へ引き上げ＝番号 80px の半分の大きさにそろう） */
}
.business-service__name {
  margin: 0;
  /* カンプ幅 2000px で 40px（番号 80px のちょうど半分）。
     下限 32px＝1600px を切っても小さくしない（2026-09-10 CEO ご指示）。 */
  font-size: clamp(32px, min(2vw, 40px), 40px);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.05em;
  /* TB 帯（1199〜768）は 32px から 28px まで。1024px 以下は下限 28px が効く */
}
.business-service__name {
  /* LG 帯（1023〜768）— 2026-09-10 CEO ご指示の値をそのまま置く
     （2.6688907423vw は tvw(32) と同値＝TB 設計幅 1199px 基準の 32px） */
}
.business-service__name {
  /* SP 帯（767〜375）は 28px から 24px まで。番号の 36px は上回らせない */
}
.business-service {
  /* ▼ 画像（700×467・3:2。2026-09-30 修正#2 で縦長・4:3 の写真に差し替えたので cover で切り抜く）
       パネル側の上角だけ丸める（TOP business の写真と同じ 横73×縦80 の楕円）。 */
}
.business-service__fig {
  grid-area: 2/1/3/2;
  align-self: start;
  z-index: 2;
  overflow: hidden;
  border-top-right-radius: min(3.65vw, 73px) min(4vw, 80px);
  line-height: 0;
}
.business-service__fig img {
  width: 100%;
  height: auto;
  aspect-ratio: 3/2;
  -o-object-fit: cover;
     object-fit: cover;
}
.business-service__item--reverse .business-service__fig {
  grid-area: 2/2/3/3;
  border-top-right-radius: 0;
  border-top-left-radius: min(3.65vw, 73px) min(4vw, 80px);
}
.business-service {
  /* ▼ 写真ごとの縦の切り抜き位置（2026-09-30 修正#2 で縦長・4:3 の写真に差し替え）。
       枠は 3:2 のまま cover で収め、横は全幅が入るので縦位置だけを持つ */
}
.business-service__fig--service01 img {
  -o-object-position: 50% 46%;
     object-position: 50% 46%;
}
.business-service__fig--service02 img {
  -o-object-position: 50% 50%;
     object-position: 50% 50%;
}
.business-service__fig--service03 img {
  -o-object-position: 50% 50%;
     object-position: 50% 50%;
}
.business-service__fig--service04 img {
  -o-object-position: 50% 30%;
     object-position: 50% 30%;
}
.business-service {
  /* ▼ 説明文（パネルの上に載る）
       天は画像の天から 183c 下・左は画像の右端から 73c・右は .inner の右端。
       底からパネルの底まで 75c を padding で確保する。 */
}
.business-service__desc {
  grid-area: 2/2/3/3;
  align-self: start;
  z-index: 1;
  margin: min(9.15vw, 183px) 0 0;
  padding: 0 0 min(3.75vw, 75px) min(3.65vw, 73px);
  font-size: clamp(16px, min(1.2vw, 24px), 24px);
  font-weight: 500;
  line-height: 2.4;
  letter-spacing: 0.05em;
  text-align: justify;
}
.business-service__item--reverse .business-service__desc {
  grid-area: 2/1/3/2;
  padding: 0 min(3.65vw, 73px) min(3.75vw, 75px) 0;
}

/* =====================================================
# cases.html（施工事例）
#
# 下層カンプの支給は無い。数値の根拠は次の2つ。
#   1. 仕様書 xlsx シート3 のワイヤー（xl/drawings/drawing6.xml を px 換算・ブロック幅 1379）
#        カテゴリのリンク  MV の下に横並び2件（セル値 Z35 / AN35）
#        ブロック          [41.6,854.5]→[1420.5,1526.5]（2件目も同じ寸法）
#        見出し            [651.5,913.9] 24pt
#        事例名＋説明文    [180.1,1072.8]（左カラム）
#        写真              [726,1065.7]→[1331.9,1442.5] 606×377 ＝ ブロック幅の 43.9%（右カラム）
#   2. TOP の設計言語（EZ 規約「下層は TOP の型を流用し新規の型を発明しない」）
#        見出し    共通部品 c-sec-title（和文 32px SemiBold ＋ .inner 全幅の横罫）
#        写真      角丸 32px ＝ TOP の写真カード（home-cases__img）と同値
#        円と矢印  円と1px 罫は TOP の業務内容リスト（p-business-nav__icon）と同値・矢印はカンプ素材 arrow-right-thin
#        事例名    「見出し＋直下の短い横罫」＝ TOP の お問い合わせカード（p-contact__title）の型
#
# レスポンシブ
#   XL（1199 以下）まで2カラムを保ち、SP（767 以下）で縦積みにする。
#   縦積みに変わる BP では gap を 0 にして、隣接ブロックの margin-top を明示する。
===================================================== */
/* =====================================================
# cases-nav — カテゴリへのアンカーリンク
#   仕様書注記[16]「クリックで各項目にアンカーリンクお願いいたします。」
#   1項目の幅 33.333%（490 ÷ 1470）は TOP の業務内容リストと同じ。
===================================================== */
.cases-nav {
  margin-top: clamp(40px, min(5vw, 100px), 100px);
}
.cases-nav__list {
  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: clamp(24px, min(3vw, 60px), 60px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.cases-nav__item {
  width: 33.333%;
}
.cases-nav {
  /* ▼ ヘッダーの TEL ボタン（l-header__btn--tel）と同じ型のボタン。
       箱＝角丸 8px・地 $color_sub・白文字・浮かせる薄い影、
       中身＝和文ラベル＋白い円のアイコン（中の矢印は地色）の並び。 */
}
.cases-nav__link {
  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;
  gap: clamp(14px, min(1.6vw, 32px), 32px);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 100%;
  min-height: clamp(52px, min(4vw, 80px), 80px);
  padding-left: clamp(16px, min(1.2vw, 24px), 24px);
  padding-right: clamp(6px, min(0.45vw, 9px), 9px);
  border-radius: 9999px;
  background-color: #6f5506;
  color: #fff;
  text-decoration: none;
  -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
          box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
}
.cases-nav__label {
  font-family: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
  font-size: clamp(16px, min(1.2vw, 24px), 24px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
}
.cases-nav {
  /* ▼ 白い円 46φ ＋ 中の矢印（円の中の色は地色＝ヘッダーボタンのアイコンと同じ作り）。
       矢印はカンプの素材 arrow-right-thin をそのまま背景に置く（global の arrow-thin）。
       2026-10-06 修正#4: 以前は横線と矢じりを疑似要素2つで組んでおり、横線が先端より約1px はみ出していた。 */
}
.cases-nav__icon {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: clamp(34px, min(2.3vw, 46px), 46px);
  height: clamp(34px, min(2.3vw, 46px), 46px);
  border-radius: 50%;
  background-color: #fff;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%236f5506' d='M218.83,130.83l-72,72a4,4,0,0,1-5.66-5.66L206.34,132H40a4,4,0,0,1,0-8H206.34L141.17,58.83a4,4,0,0,1,5.66-5.66l72,72A4,4,0,0,1,218.83,130.83Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 69.565% auto;
}

/* =====================================================
# cases-category — カテゴリ1つ分（左官工事 / 外構工事）
===================================================== */
.cases-category {
  padding-top: clamp(50px, min(6vw, 120px), 120px);
  padding-bottom: clamp(50px, min(6vw, 120px), 120px);
  scroll-margin-top: clamp(64px, min(6.4vw, 128px), 128px);
}
.cases-category {
  /* ▼ 見出し（c-sec-title）。仕様書ワイヤーに英字は無いので和文だけを置く */
}
.cases-category__title {
  color: #362918;
}
.cases-category {
  /* ▼ 左＝説明文 ／ 右＝写真（ワイヤーどおり上ぞろえ） */
}
.cases-category__body {
  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: clamp(24px, min(4vw, 80px), 80px);
  margin-top: clamp(30px, min(3.5vw, 70px), 70px);
}
.cases-category__text {
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  min-width: 0;
}
.cases-category {
  /* ▼ 説明文。文字サイズ・行送り・字送りは body（カンプ本文 24px）を継ぐ */
}
.cases-category__desc {
  margin: clamp(14px, min(1.2vw, 24px), 24px) 0 0;
}
.cases-category__desc:first-child {
  margin-top: 0;
}
.cases-category {
  /* ▼ 写真（Swiper）。ワイヤーの写真幅 606 ÷ ブロック幅 1379 ＝ 43.9% */
}
.cases-category__figure {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 43.9%;
  padding-bottom: clamp(28px, min(2.2vw, 44px), 44px);
}
.cases-category__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: clamp(16px, min(1.6vw, 32px), 32px);
}
.cases-category {
  /* ▼ 写真ごとの縦の切り抜き位置（2026-09-30 修正#2）。縦長（3:4）と横長（4:3）が
       混ざるので、枠を 16:9 に固定して cover で収める。拡大（lightcase）では写真全体が出る */
}
.cases-category__img--sakan01 {
  -o-object-position: 50% 30%;
     object-position: 50% 30%;
}
.cases-category__img--sakan02 {
  -o-object-position: 50% 50%;
     object-position: 50% 50%;
}
.cases-category__img--sakan03 {
  -o-object-position: 50% 85%;
     object-position: 50% 85%;
}
.cases-category__img--sakan04 {
  -o-object-position: 50% 0%;
     object-position: 50% 0%;
}
.cases-category__img--gaikou01 {
  -o-object-position: 50% 33%;
     object-position: 50% 33%;
}
.cases-category__img--gaikou02 {
  -o-object-position: 50% 0%;
     object-position: 50% 0%;
}
.cases-category__img--gaikou03 {
  -o-object-position: 50% 29%;
     object-position: 50% 29%;
}
.cases-category__img--gaikou04 {
  -o-object-position: 50% 50%;
     object-position: 50% 50%;
}

/* =====================================================
# p-figure — 写真の器（参考サイト https://www.taisei2006.biz/business.html と同じ名前）
#   本サイトには project レイヤーのディレクトリが無いため、TOP の p-business-nav と同じく
#   当面ページ側に置く。
===================================================== */
.p-figure {
  margin: 0;
}

/* =====================================================
# Swiper の見た目をサイトの色に合わせる
#
#   🚨 vender/swiper/swiper-bundle.min.css は cases.ejs（body 側）で読むので css/style.css より
#      後に載る。同じ詳細度だと後勝ちで負けるため、上書きは必ず .cases-category__figure の
#      入れ子（＝クラス2つ以上）で書くこと。
#   既定値は CSS 変数で渡し、変数で届かないものだけ入れ子で上書きする。
===================================================== */
.cases-category__figure {
  --swiper-theme-color: #362918;
  --swiper-navigation-color: #362918;
  --swiper-navigation-size: clamp(14px, min(1vw, 20px), 20px);
  --swiper-navigation-sides-offset: clamp(10px, min(1vw, 20px), 20px);
  --swiper-pagination-color: #362918;
  --swiper-pagination-bullet-inactive-color: #362918;
  --swiper-pagination-bullet-inactive-opacity: 0.25;
  --swiper-pagination-bullet-size: clamp(8px, min(0.6vw, 12px), 12px);
  --swiper-pagination-bullet-horizontal-gap: clamp(4px, min(0.3vw, 6px), 6px);
  --swiper-pagination-top: 100%;
  --swiper-pagination-bottom: auto;
}
.cases-category__figure .swiper {
  width: 100%;
}
.cases-category__figure {
  /* ▼ スライドの写真は lightcase で拡大する（クリックできることを hover で示す） */
}
.cases-category__figure .swiper-slide a {
  display: block;
  color: inherit;
}
.cases-category__figure {
  /* ▼ ドット。写真の下に出すので絶対配置の基準（top:100%）から下へずらす。
       行送りは body の 2.4167 を継ぐと箱が縦に膨らむので 1 に戻す。 */
}
.cases-category__figure .swiper .swiper-pagination {
  margin-top: clamp(12px, min(1vw, 20px), 20px);
  line-height: 1;
}
.cases-category__figure {
  /* ▼ 前後の矢印。TOP の円（48φ・1px 罫）に合わせ、中は Swiper 既定の矢じりを使う */
}
.cases-category__figure .swiper-button-prev,
.cases-category__figure .swiper-button-next {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: clamp(36px, min(2.4vw, 48px), 48px);
  height: clamp(36px, min(2.4vw, 48px), 48px);
  margin-top: 0;
  border: 1px solid #362918;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.85);
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  -webkit-transition: opacity 0.25s;
  transition: opacity 0.25s;
}
.cases-category__figure .swiper-button-prev::after,
.cases-category__figure .swiper-button-next::after {
  font-size: var(--swiper-navigation-size);
  font-weight: 700;
}

/* =====================================================
# company.html — 会社概要（仕様書シート4「4.会社概要」）
#
# 下層カンプの支給は無いので TOP の設計言語と共通部品だけで組む（EZ 規約）
#   見出し   c-sec-title（和文 h2 32px → 横罫 1px → 小英字 80px Marcellus）
#   表       c-table（1px の細い横罫だけの定義表・左右端は .inner に一致）
#   ボタン   c-btn c-btn--more（TOP の View More。白地なので色だけここで反転）
#   地       白（$color_bg）＝ TOP の Business・Contact 上部と同じ
#
# 縦の間隔は TOP の About（padding-top 158 / padding-bottom 160・見出し→本体 68）を基準に、
# 2セクションが続く下層向けへ寄せた値。すべてカンプ基準 2000px の vw()。
#   セクション天  →  見出し      140（MV 直下・About の 158 よりわずかに詰める）
#   見出し        →  表・地図     64（EZ 規約の下限 min(vw(56),56px) 以上）
#   地図          →  ボタン       48
#   セクション底                 100 / 160（最後はフッターの濃茶と離す）
===================================================== */
/* -----------------------------------------------
# 会社概要（Outline）— 定義表9行
-------------------------------------------------- */
.company-outline {
  padding-block: min(7vw, 140px) min(5vw, 100px);
  background-color: #ffffff;
}
.company-outline__table {
  margin-top: min(3.2vw, 64px);
}

/* -----------------------------------------------
# アクセスマップ（Accessmap）— Google マップ埋め込み＋Googlemap ボタン
-------------------------------------------------- */
.company-access {
  padding-block: min(5vw, 100px) min(8vw, 160px);
  background-color: #ffffff;
}
.company-access {
  /* ▼ 地図の枠
       幅は .inner いっぱい（1470px）＝ c-sec-title の横罫と左右端がそろう。
       高さは 1470 : 560（比 2.625）。TOP の写真 1122×650 より横長にして、
       最寄り駅から所在地までが1画面に入る引きを確保している。
       角丸は TOP の Contact カードと同じ 40px。 */
}
.company-access__frame {
  position: relative;
  margin-top: min(3.2vw, 64px);
  aspect-ratio: 1470/560;
  overflow: hidden;
  border-radius: clamp(16px, min(2vw, 40px), 40px);
}
.company-access__frame iframe {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.company-access {
  /* ▼ Googlemap ボタン（別ウインドウ） */
}
.company-access__btn {
  margin: min(2.4vw, 48px) 0 0;
}
.company-access__btn {
  /* 型は TOP の View More。c-btn--more は濃茶の地に載る前提で
     文字・下線・円がすべて白なので、白地のこのページでは色を反転させる。
     修飾クラスを増やすのは component 側の領分なので、ページ層で色だけ上書きする。
     （style.scss は page → component の順に出力されるため、
      page 側は必ずクラス2つ以上の詳細度で書かないと component に負ける） */
}
.company-access__btn .c-btn--more {
  color: #362918;
}
.company-access__btn .c-btn--more::after {
  background-color: #362918;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%23fff' d='M218.83,130.83l-72,72a4,4,0,0,1-5.66-5.66L206.34,132H40a4,4,0,0,1,0-8H206.34L141.17,58.83a4,4,0,0,1,5.66-5.66l72,72A4,4,0,0,1,218.83,130.83Z'/%3E%3C/svg%3E");
}

/* =====================================================
# contact.html（仕様書シート5「5.お問い合わせ」・プログラム MF01）
#
# 構成（上から）
#   1 MV            … common/_mv.ejs（layout/_l-mv.scss）
#   2 .contact-info … 電話／FAX の2枠。TOP CONTACT のカードの型を踏襲する
#                     （白カード・角丸 40・外側の光彩・見出しの短い罫線・円 80 のアイコン）
#   3 .contact-form … MF01 のメールフォーム（word1〜word12・別紙全文のスクロール枠）
#
# 地色の作り
#   TOP CONTACT は「白 → 石材テクスチャ色の帯（上だけ角丸 80）→ フッタ」の順に続く。
#   下層でも同じ流れにして、電話／FAX のカードから下（フォームまで）を石材色の帯にする。
#   .contact-info__band と .contact-form が同じ地色なので、境目は見えず1枚の帯になる。
#
# 寸法の一次ソース
#   カード内の数値（見出し 32／罫線までの 10.3／円 80／番号 48／注記 18 と縦の間）は
#   page/home/sections/_contact.scss（PSD 直読みの実測）と同値。下層カンプの支給が
#   無いため、EZ 規約どおり TOP の型を流用し新しい型を作らない。
#   フォーム側は支給の数値が無いので、本文 24px・注記 18px・.inner 1470 を土台に置いた。
#
# 色は変数参照のみ。font-size は clamp(下限, vw(N), Npx)。max-width は固定 px（rem()）。
===================================================== */
/* =====================================================
# 1. お問い合わせ（電話・FAX）
===================================================== */
.contact-info {
  background-color: #ffffff;
  padding-top: clamp(56px, min(7.875vw, 157.5px), 157.5px);
}

/* ▼ 見出し（共通部品 c-sec-title）。仕様書の下層ワイヤーに英字が無いので和文だけ置く */
.contact-info__head {
  margin-bottom: clamp(24px, min(3.45vw, 69px), 69px);
}

/* ▼ 石材テクスチャ色の帯（画面幅いっぱい・上だけ角丸 80＝TOP と同じ） */
.contact-info__band {
  padding-block: clamp(40px, min(4.05vw, 81px), 81px) clamp(48px, min(6vw, 120px), 120px);
  border-radius: min(4vw, 80px) min(4vw, 80px) 0 0;
  background-color: #e2e1df;
}

.contact-info__list {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  gap: 2.1769%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.contact-info__card {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  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 0;
      -ms-flex: 1 1 0px;
          flex: 1 1 0;
  min-width: 0;
  padding: clamp(28px, min(3.605vw, 72.1px), 72.1px) clamp(20px, min(4vw, 80px), 80px) clamp(28px, min(3.55vw, 71px), 71px);
  border-radius: clamp(16px, min(2vw, 40px), 40px);
  background-color: #fff;
  -webkit-box-shadow: 0 0 clamp(2px, min(0.2vw, 4px), 4px) rgba(54, 41, 24, 0.24);
          box-shadow: 0 0 clamp(2px, min(0.2vw, 4px), 4px) rgba(54, 41, 24, 0.24);
}

/* SP で縦積みに変わるので隣接ブロックの間隔を明示する（EZ 規約） */

.contact-info__title {
  margin: 0;
  padding-bottom: clamp(6px, min(0.515vw, 10.3px), 10.3px);
  border-bottom: 1px solid #362918;
  color: #362918;
  font-family: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
  font-size: clamp(20px, min(1.6vw, 32px), 32px);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.05em;
}

.contact-info__icon {
  -webkit-align-self: center;
      -ms-flex-item-align: center;
          align-self: center;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  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(4vw, 80px), 80px);
  height: clamp(48px, min(4vw, 80px), 80px);
  margin-top: clamp(16px, min(1.65vw, 33px), 33px);
  border: 1px solid currentcolor;
  border-radius: 50%;
  color: #6f5506;
}
.contact-info__icon svg {
  display: block;
  width: clamp(20px, min(1.6vw, 32px), 32px);
  height: auto;
}

.contact-info__num {
  margin: clamp(3px, min(0.25vw, 5px), 5px) 0 0;
  color: #362918;
  font-family: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
  font-size: clamp(24px, min(2.4vw, 48px), 48px);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.05em;
  text-align: center;
}
.contact-info__num a {
  color: inherit;
  text-decoration: none;
}

.contact-info__note {
  margin: 0;
  color: #362918;
  font-family: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
  font-size: clamp(14px, min(0.9vw, 18px), 18px);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.05em;
  text-align: center;
}

/* =====================================================
# 2. メールでのお問い合わせ（MF01）
===================================================== */
.contact-form {
  padding-block: clamp(40px, min(6vw, 120px), 120px) clamp(56px, min(8vw, 160px), 160px);
  background-color: #e2e1df;
}
.contact-form .c-sec-title {
  --c-sec-title-plate: #e2e1df;
}

.contact-form__lead {
  margin-top: clamp(24px, min(2.8vw, 56px), 56px);
}
.contact-form__lead p {
  margin: 0;
  text-align: justify;
}

/* ▼【必須】の印。白地でも読める深い金茶（$color_sub）。
     行末に来ても途中で割れないようにする */
.contact-form__required {
  color: #6f5506;
  font-weight: 600;
  white-space: nowrap;
}

/* ▼ 白い角丸パネル（form の外側＝確認画面にも引き継がれる範囲） */
.contact-form__panel {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin-top: clamp(20px, min(2vw, 40px), 40px);
  padding: clamp(24px, min(4vw, 80px), 80px);
  border-radius: clamp(16px, min(2vw, 40px), 40px);
  background-color: #fff;
  -webkit-box-shadow: 0 0 clamp(2px, min(0.2vw, 4px), 4px) rgba(54, 41, 24, 0.24);
          box-shadow: 0 0 clamp(2px, min(0.2vw, 4px), 4px) rgba(54, 41, 24, 0.24);
}

.contact-form__note {
  margin: 0 0 clamp(16px, min(1.6vw, 32px), 32px);
  font-size: clamp(14px, min(0.9vw, 18px), 18px);
  line-height: 1.8;
}

/* ▼ 入力表（EZ 公式：メールフォームは table で組む） */
.contact-form__table-wrap {
  width: 100%;
}

.contact-form__table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
.contact-form__table th,
.contact-form__table td {
  padding-block: clamp(14px, min(1.4vw, 28px), 28px);
  border-bottom: 1px solid rgba(54, 41, 24, 0.25);
  vertical-align: top;
}
.contact-form__table td {
  overflow-wrap: anywhere;
}
.contact-form__table th {
  width: 30%;
  padding-right: clamp(12px, min(2vw, 40px), 40px);
  font-size: clamp(16px, min(1.2vw, 24px), 24px);
  font-weight: 600;
  line-height: 1.8;
}

/* ▼ 入力欄・セレクト（form 部品はフォントを継承しないので明示する） */
.contact-form__input,
.contact-form__select {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 100%;
  padding: clamp(10px, min(0.8vw, 16px), 16px) clamp(12px, min(1vw, 20px), 20px);
  border: 1px solid rgba(54, 41, 24, 0.25);
  border-radius: clamp(4px, min(0.4vw, 8px), 8px);
  background-color: #fff;
  color: #362918;
  font-family: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
  font-size: clamp(16px, min(1vw, 20px), 20px);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.075em;
}
.contact-form__input:focus,
.contact-form__select:focus {
  outline: 2px solid #6f5506;
  outline-offset: 1px;
}

.contact-form__input::-webkit-input-placeholder {
  color: rgba(54, 41, 24, 0.45);
}

.contact-form__input::-moz-placeholder {
  color: rgba(54, 41, 24, 0.45);
}

.contact-form__input:-ms-input-placeholder {
  color: rgba(54, 41, 24, 0.45);
}

.contact-form__input::-ms-input-placeholder {
  color: rgba(54, 41, 24, 0.45);
}

.contact-form__input::placeholder {
  color: rgba(54, 41, 24, 0.45);
}

.contact-form__input--area {
  min-height: clamp(160px, min(13vw, 260px), 260px);
  resize: vertical;
}

/* ▼ 郵便番号（〒 ＋ 入力欄）。自動補完は vender/yubinbango.js（p-postal-code） */
.contact-form__postal {
  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(6px, min(0.6vw, 12px), 12px);
}

.contact-form__postal-mark {
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
  font-size: clamp(16px, min(1.2vw, 24px), 24px);
  font-weight: 600;
}

.contact-form__input--postal {
  max-width: calc(320 * var(--to-rem));
}

/* ▼ 都道府県（select）。標準の矢印を消し、矢印は select 自身の背景に置く。
     疑似要素で重ねると矢印の上だけクリックが効かなくなり、それを避ける
     pointer-events は css3 プロファイルのバリデータで通らないため、この作りにする */
.contact-form__select-wrap {
  max-width: calc(480 * var(--to-rem));
}

.contact-form__select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  padding-right: clamp(36px, min(2.8vw, 56px), 56px);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1 6 6 11 1' fill='none' stroke='%23362918' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right clamp(14px, min(1.1vw, 22px), 22px) center;
  background-size: clamp(12px, min(0.8vw, 16px), 16px) auto;
  cursor: pointer;
}

/* ▼ 個人情報の取扱い（別紙全文のスクロール枠） */
.contact-form__privacy-ttl {
  margin: clamp(28px, min(3.2vw, 64px), 64px) 0 0;
  font-size: clamp(18px, min(1.4vw, 28px), 28px);
  font-weight: 600;
  line-height: 1.6;
}

.contact-form__privacy {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  max-height: clamp(280px, min(26vw, 520px), 520px);
  margin-top: clamp(12px, min(1.2vw, 24px), 24px);
  padding: clamp(16px, min(1.6vw, 32px), 32px);
  border: 1px solid rgba(54, 41, 24, 0.25);
  border-radius: clamp(4px, min(0.4vw, 8px), 8px);
  overflow-y: auto;
  -ms-scroll-chaining: none;
      overscroll-behavior: contain;
  font-size: clamp(14px, min(0.9vw, 18px), 18px);
  line-height: 1.9;
  text-align: justify;
}
.contact-form__privacy:focus-visible {
  outline: 2px solid #6f5506;
  outline-offset: 2px;
}
.contact-form__privacy > * {
  margin: 0;
}
.contact-form__privacy > * + * {
  margin-top: clamp(10px, min(1vw, 20px), 20px);
}

.contact-form__privacy-lead {
  font-size: clamp(15px, min(1vw, 20px), 20px);
  font-weight: 600;
  text-align: center;
}

.contact-form__privacy-article {
  font-weight: 600;
}

/* 原文に「(1)」等の番号が入っているので記号は出さず、ぶら下げインデントにする */
.contact-form__privacy-list {
  padding-left: 0;
  list-style: none;
}
.contact-form__privacy-list li {
  padding-left: 2.2em;
  text-indent: -2.2em;
}
.contact-form__privacy-list li + li {
  margin-top: 0.4em;
}

.contact-form__privacy-link {
  color: inherit;
  text-decoration: underline;
  overflow-wrap: anywhere;
}

/* ▼ 同意チェック（仕様書 F120 の「□」が実チェックボックス） */
.contact-form__agree {
  margin-top: clamp(24px, min(2.4vw, 48px), 48px);
  text-align: center;
}

.contact-form__agree-label {
  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: clamp(8px, min(0.8vw, 16px), 16px);
  font-size: clamp(16px, min(1vw, 20px), 20px);
  line-height: 1.6;
  text-align: left;
  cursor: pointer;
}

.contact-form__agree-check {
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
  width: clamp(20px, min(1.4vw, 28px), 28px);
  height: clamp(20px, min(1.4vw, 28px), 28px);
  margin: calc((1.6em - clamp(20px, min(1.4vw, 28px), 28px)) / 2) 0 0;
  font-size: inherit;
  accent-color: #6f5506;
  cursor: pointer;
}

/* ▼ ボタン */
.contact-form__btns {
  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: clamp(12px, min(1.6vw, 32px), 32px);
  margin-top: clamp(24px, min(2.8vw, 56px), 56px);
}

.contact-form__btn {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  max-width: calc(800 * var(--to-rem));
  min-height: clamp(56px, min(4.4vw, 88px), 88px);
  padding: clamp(12px, min(1vw, 20px), 20px) clamp(16px, min(1.6vw, 32px), 32px);
  border: 0;
  border-radius: clamp(4px, min(0.4vw, 8px), 8px);
  background-color: #a78c35;
  -webkit-box-shadow: 0 0 clamp(2px, min(0.2vw, 4px), 4px) rgba(54, 41, 24, 0.24);
          box-shadow: 0 0 clamp(2px, min(0.2vw, 4px), 4px) rgba(54, 41, 24, 0.24);
  color: #fff;
  font-family: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
  font-size: clamp(16px, min(1.2vw, 24px), 24px);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.05em;
  text-align: center;
  cursor: pointer;
  -webkit-transition: opacity 0.4s ease;
  transition: opacity 0.4s ease;
}

/* 確認画面の「戻る」。送信ボタンと区別できるよう白地＋枠にする */
.contact-form__btn--back {
  background-color: #fff;
  border: 1px solid #a78c35;
  color: #a78c35;
}

/* 確認画面用のボタンは入力画面（form.h-adr の中）でだけ隠す（EZ 公式「フォーム＞ボタン」）。
   確認画面のフォームはプログラム（CakePHP の Form->create）が作り、h-adr が付かないので、
   View/Contact/msg.html へ移植されたボタンはそのまま出る
   （2026-09-30 修正#2・前田様「メッセージページに移植しても見えない」への対応。
    福田建材 2026-09-14 の CEO ご判断「確認画面だけに表示」と同じ作り）。 */
.h-adr .contact-form__btns--confirm.confirm-only {
  display: none;
}

/* =====================================================
# SP（〜767px）：入力表を縦積みにして横スクロールを出さない
===================================================== */
/* =====================================================
# 印刷：個人情報の取扱いはスクロール枠なので、紙では全文を出す
#   （print.scss は js-* の強制表示までしか面倒を見ない）
===================================================== */
/* 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;
}

/* =====================================================
# base — サイト全体の土台
#   数値の一次ソースはカンプ（デザイン案_20260909.psd / 同 jpg・DOC 2000×6394）。
#   本文     24px ShipporiMincho-Medium #362918
#   行送り   実測 58px（about-desc の行頭 y = 1480 / 1539 / 1595 / 1654、
#            cases-desc の行頭 y = 3596 / 3654）→ 58 ÷ 24 = 2.4167
===================================================== */
:root {
  --to-rem: 0.0625rem;
}

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

html {
  background-color: #f8f8f8;
}

body {
  position: relative;
  max-width: 2000px;
  margin-inline: auto;
  font-size: clamp(16px, min(1.2vw, 24px), 24px);
  font-family: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
  font-weight: 500;
  line-height: 2.4167;
  letter-spacing: 0.075em;
  color: #362918;
  background-color: #f8f8f8;
}

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

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

img {
  height: auto;
}

/* FLOCSS
----------------------------------------------------- */
/* =====================================================
# .inner — 内側コンテナ
#   カンプ本文の左端 265 / 右端 1735（2000 - 265×2 = 1470 ＝ $width-inner）。
#   フッターの社名左端 266 / ナビ右端 1733 とも一致する。
#   box-sizing:border-box なので max-width は 1470 ＋ 左右パディング分。
#   max-width は固定 px（vw 連動は EZ 規約で禁止）＋ width:100%。
#   class 名は `.inner`（`l-inner` は存在しない）＝EZ 規約。
===================================================== */
.inner {
  width: 100%;
  max-width: 1530px;
  margin-inline: auto;
  padding-inline: 30px;
}

/* =====================================================
# l-header — 全ページ共通の透過ヘッダー（FV／下層 MV の写真の上に重なる）
#
# カンプ実測（DOC 2000 基準）
#   数値の一次ソース＝~/work/_ascii/arimura-top-inspect.log ＋ カンプ jpg の画素実測。
#   inspect ログのレイヤー境界 [27,20,1964,108] は影を含むので、塗りの実測値を採る。
#
#   ロゴ         ink [43,36,437,79]     48px ShipporiMincho-Medium 白
#                                       字送り実測 50.4px＝1.05em ピッチ（body の 0.075em で再現）
#   ナビ         ink [962,55,1334,72]   20px SemiBold 白・4項目
#                                       項目間は全角スペース1つ分（実測 20px）
#   ナビ右端 1334 → お問い合わせボタン左端 1392 ＝ 58px
#   お問い合わせ 箱 [1392,24,1672,104]  280×80・角丸 8px・地 #a78c35
#                円 [1401,41,1447,87]   46φ 白（箱の左から 9px）
#                封筒 24×18 中央
#                ラベル ink [1488,54,1607,71] 20px SemiBold 白（円の右端から 41px）
#   TEL          箱 [1680,24,1960,104]  280×80・角丸 8px・地 #6f5606 ＝ $color_sub
#                円 [1689,41,1735,87]   46φ 白（箱の左から 9px）
#                受話器 24×24 中央
#                番号 ink [1767,56,1920,72] 24px SemiBold 白（円の右端から 32px）
#   2ボタンの間隔 1672 → 1680 ＝ 8px
#   縦位置はナビ・ボタンとも中心 64 → 帯の高さ 128px
#   左右の余白 40px（ロゴ字面 43 から送り込みを戻すと 39／ボタン右端 1960 → 2000-1960=40）
#
# 角丸 8px の根拠: 箱の左上角を走査すると y=24 で x+6、y=26 で x+3、y=28 で x+1、
#   y=30 で x+0 まで詰まる ＝ 半径 8 の円弧と 1px 以内で一致。
#
# ヘッダーは通常フローに場所を取らない（position:absolute）。
#   TOP  … FV 写真 [0,0,2000,1080] の上に重なる
#   下層 … l-mv の写真の上に重なる（l-mv 側で本文を帯の分だけ下げている）
#   逆スクロール時は script.js が #header に .show を付けて固定する。
#   透過のまま固定すると本文の上で白文字が読めなくなるため、固定時だけ濃茶の地を敷く（EZ 規約）。
===================================================== */
.l-header {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 50;
  width: 100%;
  height: clamp(64px, min(6.4vw, 128px), 128px);
}
.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: min(2vw, 40px);
}
.l-header {
  /* ▼ ロゴ（EZ 公式 2026-08-03: header 内に h1 を置かない＝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: inline-block;
  color: #fff;
  font-size: clamp(26px, min(2.4vw, 48px), 48px);
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  text-shadow: 0 0 min(0.2vw, 4px) rgba(54, 41, 24, 0.72), 0 0 min(0.4vw, 8px) rgba(54, 41, 24, 0.72), 0 0 min(0.8vw, 16px) rgba(54, 41, 24, 0.72);
  -webkit-transition: color 0.3s ease;
  transition: color 0.3s ease;
}
.l-header {
  /* ▼ 右側（ナビ ＋ 2ボタン）。XL 以下は非表示にしてドロワーへ */
}
.l-header__right {
  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(2.9vw, 58px);
}
.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: min(1vw, 20px);
}
.l-header__nav-item {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  text-shadow: 0 0 min(0.2vw, 4px) rgba(54, 41, 24, 0.72), 0 0 min(0.4vw, 8px) rgba(54, 41, 24, 0.72), 0 0 min(0.8vw, 16px) rgba(54, 41, 24, 0.72);
}
.l-header__nav-link {
  display: inline-block;
  color: #fff;
  font-size: clamp(14px, min(1vw, 20px), 20px);
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
  -webkit-transition: color 0.3s ease;
  transition: color 0.3s ease;
}
.l-header__nav-link {
  /* 現在地 */
}
.l-header__nav-link.is-active {
  color: #ffe082;
}
.l-header {
  /* ▼ お問い合わせ／TEL の2ボタン */
}
.l-header__btns {
  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(0.4vw, 8px);
}
.l-header__btn {
  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-sizing: border-box;
          box-sizing: border-box;
  width: clamp(190px, min(14vw, 280px), 280px);
  height: clamp(52px, min(4vw, 80px), 80px);
  padding-left: clamp(6px, min(0.45vw, 9px), 9px);
  border-radius: 8px;
  color: #fff;
  text-decoration: none;
  -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
          box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
}
.l-header__btn-icon {
  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;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: clamp(34px, min(2.3vw, 46px), 46px);
  height: clamp(34px, min(2.3vw, 46px), 46px);
  border-radius: 50%;
  background-color: #fff;
}
.l-header__btn-icon svg {
  display: block;
  width: clamp(18px, min(1.2vw, 24px), 24px);
  height: auto;
  fill: currentColor;
}
.l-header__btn-label, .l-header__btn-num {
  line-height: 1;
  white-space: nowrap;
}
.l-header {
  /* ▼ お問い合わせ（リンク） */
}
.l-header__btn--mail {
  background-color: #a78c35;
}
.l-header__btn--mail .l-header__btn-icon {
  color: #a78c35;
  margin-right: clamp(16px, min(2.05vw, 41px), 41px);
}
.l-header__btn--mail .l-header__btn-label {
  font-size: clamp(14px, min(1vw, 20px), 20px);
  font-weight: 600;
}
.l-header {
  /* ▼ TEL（PC は表示のみ。hover / cursor / transition / tel リンクを付けない＝EZ 規約）
       SP は tel-3.1.js が data-action="call" の span を発信リンクで包む */
}
.l-header__btn--tel {
  background-color: #6f5506;
}
.l-header__btn--tel .l-header__btn-icon {
  color: #6f5506;
  margin-right: clamp(14px, min(1.6vw, 32px), 32px);
}
.l-header__btn--tel .l-header__btn-num {
  font-size: clamp(16px, min(1.2vw, 24px), 24px);
  font-weight: 600;
  letter-spacing: 0;
}
.l-header {
  /* ▼ ハンバーガー（XL 以下のみ表示・写真の上なので白線） */
}
.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(44 * var(--to-rem));
  height: calc(44 * var(--to-rem));
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.l-header__hamburger span {
  position: absolute;
  left: 50%;
  width: calc(30 * var(--to-rem));
  height: 2px;
  background-color: #fff;
  -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.35);
          box-shadow: 0 0 4px rgba(0, 0, 0, 0.35);
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  -webkit-transition: opacity 0.3s ease, -webkit-transform 0.3s ease;
  transition: opacity 0.3s ease, -webkit-transform 0.3s ease;
  transition: transform 0.3s ease, opacity 0.3s ease;
  transition: transform 0.3s ease, opacity 0.3s ease, -webkit-transform 0.3s ease;
}
.l-header__hamburger span:nth-child(1) {
  top: calc(14 * var(--to-rem));
}
.l-header__hamburger span:nth-child(2) {
  top: calc(21 * var(--to-rem));
}
.l-header__hamburger span:nth-child(3) {
  top: calc(28 * var(--to-rem));
}
.l-header__hamburger.is-checked span:nth-child(1) {
  -webkit-transform: translate(-50%, 7px) rotate(45deg);
          transform: translate(-50%, 7px) 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%, -7px) rotate(-45deg);
          transform: translate(-50%, -7px) rotate(-45deg);
}

/* =====================================================
# 逆スクロール（上方向）でヘッダーを固定表示
#   script.js が #header に .show を付与する（EZ 標準）。
#   透過のままだと本文の上で白文字が読めないので、固定時だけ濃茶の地を敷く（EZ 規約）。
===================================================== */
.l-header.show {
  position: fixed;
  inset: 0 0 auto 0;
  max-width: 2000px;
  margin-inline: auto;
  background-color: #362918;
  -webkit-box-shadow: 0 2px 12px rgba(0, 0, 0, 0.24);
          box-shadow: 0 2px 12px rgba(0, 0, 0, 0.24);
  -webkit-animation: l-header-slide-in 0.3s ease;
          animation: l-header-slide-in 0.3s ease;
}
.l-header.show .l-header__logo-link,
.l-header.show .l-header__nav-link {
  text-shadow: none;
}

@-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 — XL 以下のドロワーメニュー
#   雛形 JS（script.js）が #js-drawer-icon / #js-drawer-content / #js-drawer-close と
#   中のリンクで .is-checked をトグルする（.is-open は使わない＝EZ 規約）。
#   SP カンプの支給が無いため、ヘッダーの構成（ナビ＋お問い合わせ＋TEL）を縦に並べる。
#   地はフッターと同じ濃茶 $color_main ＋白文字なので、現在地と hover は視認できる黄色
#   $color_active_light（opacity 減光で済ませない・transition は color）＝EZ 規約。
===================================================== */
.l-drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 105;
  width: min(86vw, 360 * var(--to-rem));
  height: 100%;
  background-color: #362918;
  -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(14 * var(--to-rem));
  right: calc(16 * var(--to-rem));
  z-index: 2;
  width: calc(44 * var(--to-rem));
  height: calc(44 * var(--to-rem));
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.l-drawer__close span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(26 * 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(84 * var(--to-rem)) calc(28 * 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.4);
}
.l-drawer__list li:first-child {
  border-top: 1px solid rgba(255, 255, 255, 0.4);
}
.l-drawer__list a {
  display: block;
  padding: calc(16 * var(--to-rem)) calc(6 * var(--to-rem));
  color: #fff;
  font-size: clamp(16px, 2.3468057366vw, 18px);
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  -webkit-transition: color 0.3s ease;
  transition: color 0.3s ease;
}
.l-drawer__list a.is-active {
  color: #ffe082;
}
.l-drawer {
  /* ▼ TEL（PC は表示のみ。SP は tel-3.1.js が data-action="call" を発信リンクにする） */
}
.l-drawer__tel {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  gap: calc(4 * var(--to-rem));
  margin-top: calc(32 * var(--to-rem));
  padding: calc(14 * var(--to-rem)) calc(12 * var(--to-rem));
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff;
  text-align: center;
}
.l-drawer__tel-label {
  font-size: clamp(13px, 1.8252933507vw, 14px);
  font-weight: 500;
  line-height: 1.4;
}
.l-drawer__tel-num {
  font-size: clamp(20px, 3.1290743155vw, 24px);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

/* =====================================================
# l-mv — 下層4ページ共通のメインビジュアル（common/_mv.ejs）
#
# 下層カンプの支給が無いため、TOP の型をそのまま流用する
# （EZ 規約「下層は TOP の型を流用し新規の型を発明しない」）。
#   英字  80px Marcellus 白  ＝ TOP セクション見出しの小英字（実測 [263,1300,624,1361] など）
#   和文  32px SemiBold 白   ＝ TOP セクション見出しの和文（実測 [263,1240,491,1270] など）
#   英字の字面下端 → 和文の字面上端は TOP の見出しと同じ 30px 相当を取る
#   高さ 600px は TOP の FV 1080px の 10:3 相当（下層 MV 素材の 1400×420 と同比）
#
# ヘッダーは透過で写真の上に重なる（position:absolute・帯 128px）ので、
# 本文はその分だけ下げて視覚的な中央に置く。
===================================================== */
.l-mv {
  position: relative;
  width: 100%;
  height: clamp(220px, min(30vw, 600px), 600px);
  overflow: hidden;
}
.l-mv__bg {
  position: absolute;
  inset: 0;
  line-height: 0;
}
.l-mv__bg img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center center;
     object-position: center center;
}
.l-mv__bg {
  /* 白文字の可読性を確保する暗幕（TOP の FV も写真の上に白文字を置いている） */
}
.l-mv__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(54, 41, 24, 0.35);
}
.l-mv__body {
  position: relative;
  z-index: 2;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 100%;
  padding-top: clamp(64px, min(6.4vw, 128px), 128px);
  text-align: center;
  color: #fff;
}
.l-mv__en {
  margin: 0;
  font-family: "Marcellus", "Times New Roman", serif;
  font-size: clamp(32px, min(4vw, 80px), 80px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.05em;
}
.l-mv__ja {
  margin: min(0.9vw, 18px) 0 0;
  font-size: clamp(18px, min(1.6vw, 32px), 32px);
  font-weight: 600;
  line-height: 1.4;
}

/* =====================================================
# l-footer — カンプ実測（DOC 2000 基準・地 #362918 ＝ $color_main）
#   帯          [0,5594,2000,6394] ＝ 800px
#   社名        ink [266,5755,660,5799] 48px SemiBold 白（字送り 50.1px＝1.05em ピッチ）
#               帯上端 5594 → 社名の行ボックス上端 5753.5 ＝ 上余白 160px
#   横罫        y=5777（社名の字面の中心）／ x 681〜1735 の 1px 白
#               ＝ 265〜1735 の全幅罫を社名の背後だけ地色で切っている（PSD「長方形 3」）
#               社名の字面右端 660 → 罫の開始 681 ＝ 21px
#   住所3行     ink 行頭 y 5862 / 5907 / 5951（行ピッチ実測 44.5px ＝ 24px × 1.854）
#   ナビ        ink [1109,5863,1733,5885] 24px SemiBold・項目間は全角スペース1つ分（実測 24px）
#               住所1行目と同じ高さに並ぶので、行送りも住所と同じ 1.854 にして字面をそろえる
#   コピーライト ink [1481,6212,1732,6230] 20px Medium・右下（右端は .inner 右 1735 と一致）
#   帯下端 6394 → コピーライトの行ボックス下端 6240 ＝ 下余白 154px
===================================================== */
.l-footer {
  --l-footer-name: clamp(24px, min(2.4vw, 48px), 48px);
  position: relative;
  width: 100%;
  background-color: #362918;
  color: #fff;
  padding-block: min(7.85vw, 157px) min(7.7vw, 154px);
}
.l-footer {
  /* ▼ 社名 ＋ 横罫 */
}
.l-footer__head {
  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;
}
.l-footer__name {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  margin: 0;
  font-size: var(--l-footer-name);
  font-weight: 600;
  line-height: 1;
}
.l-footer__rule {
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  height: 1px;
  margin-left: min(0.9vw, 18px);
  margin-top: calc(var(--l-footer-name) * 0.052);
  background-color: #fff;
}
.l-footer {
  /* ▼ 住所・TEL・FAX ／ ナビ */
}
.l-footer__body {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: min(2vw, 40px);
  margin-top: min(2.55vw, 51px);
}
.l-footer__info {
  -webkit-box-flex: 0;
  -webkit-flex: 0 1 auto;
      -ms-flex: 0 1 auto;
          flex: 0 1 auto;
}
.l-footer__address, .l-footer__tel, .l-footer__fax {
  margin: 0;
  font-size: clamp(16px, min(1.2vw, 24px), 24px);
  font-weight: 500;
  line-height: 1.854;
}
.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;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  gap: min(1.2vw, 24px);
}
.l-footer__nav-item {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
}
.l-footer__nav-link {
  display: inline-block;
  color: #fff;
  font-size: clamp(15px, min(1.2vw, 24px), 24px);
  font-weight: 600;
  line-height: 1.854;
  text-decoration: none;
  white-space: nowrap;
  -webkit-transition: color 0.3s ease;
  transition: color 0.3s ease;
}
.l-footer__nav-link.is-active {
  color: #ffe082;
}
.l-footer {
  /* ▼ コピーライト（右下） */
}
.l-footer__copyright {
  margin: min(10.95vw, 219px) 0 0;
  font-size: clamp(13px, min(1vw, 20px), 20px);
  font-weight: 500;
  line-height: 1.854;
  text-align: right;
}
.l-footer__copyright small {
  font-size: inherit;
}

/* =====================================================
# l-pagetop — ページトップへ戻る（#js-pagetop ＋ script.js の .is-show）
#   カンプに該当パーツが無いため、サイトの型で作る。
#     円 … 濃茶 $color_main（フッター・About の地と同じ色）
#     矢印 … カンプの arrow-right-thin（線 2px の細い矢印）を上向きにしたもの
#   2000px 幅で右 30 / 下 30。実体は <a>・単調 clamp で下限 48px を担保（EZ 標準）。
===================================================== */
.l-pagetop {
  position: fixed;
  right: max(clamp(12px, min(1.5vw, 30px), 30px), (100vw - 2000px) / 2 + 30px);
  bottom: clamp(12px, min(1.5vw, 30px), 30px);
  z-index: 90;
  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(3.5vw, 70px), 70px);
  height: clamp(48px, min(3.5vw, 70px), 70px);
  border-radius: 50%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border: 1px solid #fff;
  background-color: #362918;
  text-decoration: none;
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translateY(10px);
          transform: translateY(10px);
  -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;
}
.l-pagetop svg {
  display: block;
  width: clamp(16px, min(1.15vw, 23px), 23px);
  height: auto;
  fill: none;
  stroke: #fff;
  stroke-width: 2;
}
.l-pagetop.is-show {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

/* FLOCSS
----------------------------------------------------- */
/* =====================================================
# c-sec-title — セクション見出し（4セクション共通の型）
#
# 構成（上から）
#   和文 32px SemiBold → 横罫 1px（.inner 全幅 265〜1735）→ 小英字 80px Marcellus
#   横罫は和文の字面の中心を通り、和文の背後だけ地色のベタで切ってある（PSD「長方形 3」）。
#
# カンプ実測（DOC 2000 基準）
#   about    和文 ink [263,1240,491,1270] 白 ／ 罫 y=1255 白 ／ ベタ [265,1239,514,1271] #362918
#            英字 ink [263,1300,624,1361] 白
#   business 和文 ink [1606,2410,1735,2441] ／ 罫 y=2426 ／ ベタ [1587,2410,1735,2442] 白
#            英字 ink [1431,2473,1735,2531]（右寄せ）
#   cases    和文 ink [263,3532,392,3563] ／ 罫 y=3548 ／ ベタ [265,3532,413,3564] 白
#            英字 ink [267,3595,473,3654]
#   contact  和文 ink [1541,4715,1736,4746] ／ 罫 y=4731 ／ ベタ [1519,4715,1735,4747] 白
#            英字 ink [1425,4778,1735,4837]（右寄せ）
#   ベタが和文の字面からはみ出す量は 19〜23px（4箇所）→ 21px を採用
#   和文の字面下端 → 英字の字面上端は 30〜32px（4箇所）→ 32px を採用
#
# 使い方（HTML）
#   <div class="c-sec-title">
#     <h2 class="c-sec-title__ja">私たちについて</h2>
#     <p class="c-sec-title__en">About Us</p>
#   </div>
#   ※ 英字は装飾なので <p>、和文が h2。1つの h2 にまとめると見出しテキストが
#     「私たちについて About Us」になるので分けたまま使う。
#   ※ 大英字 240px（About Us / Business / Cases / Contact）は見出しブロックとは別位置の
#     装飾なので、このコンポーネントには含めない（各セクション側で配置する）。
#
#   修飾クラス
#     --right … 右寄せ（business / contact）
#     --light … 白文字＋濃茶のベタ（about のように $color_main の地に載せる時）
#
# 罫線は .inner の全幅に伸ばすので、このブロックは .inner の直下に width:100% で置く。
===================================================== */
.c-sec-title {
  --c-sec-title-ja: clamp(18px, min(1.6vw, 32px), 32px);
  --c-sec-title-plate: #ffffff;
  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: start;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
  width: 100%;
  color: #362918;
  /* ▼ 横罫（.inner 全幅・和文の行ボックスの中央を通す） */
}
.c-sec-title::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--c-sec-title-ja) * 0.547);
  height: 1px;
  background-color: currentColor;
}
.c-sec-title__ja {
  position: relative;
  margin: 0;
  padding-right: min(1.05vw, 21px);
  background-color: var(--c-sec-title-plate);
  font-size: var(--c-sec-title-ja);
  font-weight: 600;
  line-height: 1;
}
.c-sec-title__en {
  margin: min(1.15vw, 23px) 0 0;
  font-family: "Marcellus", "Times New Roman", serif;
  font-size: clamp(32px, min(4vw, 80px), 80px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.05em;
}
.c-sec-title {
  /* ▼ 右寄せ（business / contact） */
}
.c-sec-title--right {
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
      -ms-flex-align: end;
          align-items: flex-end;
  text-align: right;
}
.c-sec-title--right .c-sec-title__ja {
  padding-right: 0;
  padding-left: min(1.05vw, 21px);
  margin-right: -0.075em;
}
.c-sec-title--right .c-sec-title__en {
  margin-right: -0.05em;
}
.c-sec-title {
  /* ▼ 白文字＋濃茶のベタ（about のように $color_main の地に載せる時） */
}
.c-sec-title--light {
  --c-sec-title-plate: #362918;
  color: #fff;
}

/* =====================================================
# c-btn — ボタン共通
#
# c-btn--more（View More）カンプ実測（DOC 2000 基準）
#   about  下線 y=1819 x 265〜504（240×1px）／ 円 [458,1765,504,1811] 46φ 白
#          ラベル ink [264,1776,439,1800] 32px Marcellus 白 ／ 矢印 24×20 黒
#   cases  下線 y=4435 x 1495〜1734（240×1px）／ 円 [1688,4381,1734,4427] 46φ 白
#          ラベル ink [1495,4393,1667,4414] 32px Marcellus 白
#   円の下端 1811 → 下線 1819 ＝ 8〜9px ／ 円の右端と下線の右端が一致
#   ラベルの字面中心 1788 と円の中心 1787.5 が一致 → 上下は中央そろえ
#   全体 240×56（円 46 ＋ 下線までの 9 ＋ 罫 1）
#   矢印の色はカンプ実測で中性の黒（最暗 #050505・濃茶ではない）
#
# 使い方（HTML）
#   <a href="company.html" class="c-btn c-btn--more">
#     <span class="c-btn__label">View More</span>
#   </a>
#   円と矢印は CSS（::after ＋ インライン SVG のデータ URI）で描くので HTML には書かない。
#   文字色・下線色は currentColor。カンプの2箇所はどちらも白なので既定を白にしている。
===================================================== */
.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-sizing: border-box;
          box-sizing: border-box;
  color: inherit;
  text-decoration: none;
}

.c-btn--more {
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: clamp(180px, min(12vw, 240px), 240px);
  padding-bottom: clamp(6px, min(0.45vw, 9px), 9px);
  border-bottom: 1px solid currentColor;
  color: #fff;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}
.c-btn--more .c-btn__label {
  font-family: "Marcellus", "Times New Roman", serif;
  font-size: clamp(18px, min(1.6vw, 32px), 32px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.c-btn--more {
  /* ▼ 右端の円 46φ ＋ 中の細い矢印（カンプの素材 arrow-right-thin をそのまま使う＝global の arrow-thin） */
}
.c-btn--more::after {
  content: "";
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: clamp(34px, min(2.3vw, 46px), 46px);
  height: clamp(34px, min(2.3vw, 46px), 46px);
  border-radius: 50%;
  background-color: #fff;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%23000' d='M218.83,130.83l-72,72a4,4,0,0,1-5.66-5.66L206.34,132H40a4,4,0,0,1,0-8H206.34L141.17,58.83a4,4,0,0,1,5.66-5.66l72,72A4,4,0,0,1,218.83,130.83Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 69.565% auto;
  -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;
}

/* =====================================================
# c-table — 下層ページの定義表（company.html の会社概要ほか）
#
# 下層カンプの支給が無いので TOP の設計言語だけで組む（新しい型を発明しない＝EZ 規約）
#   ・区切りは 1px の細い横罫（$color_line_thin＝濃茶を薄めた線）
#   ・外枠と縦罫は持たない。表の左右端が .inner（1470px）と一致するので、
#     直上に置く c-sec-title の横罫（カンプ 265〜1735）とそのまま一直線に並ぶ
#   ・文字は本文と同じ Shippori Mincho（body から継承）・見出し列だけ SemiBold（カンプの和文見出しと同じ）
#   ・SP（md）は th / td を縦積みにして横スクロールを出さない
#
# 使い方（HTML）
#   <div class="c-table__wrap">
#     <table class="c-table">
#       <tbody>
#         <tr><th scope="row">社名</th><td>有村工業 株式会社</td></tr>
#       </tbody>
#     </table>
#   </div>
===================================================== */
.c-table__wrap {
  width: 100%;
  /* contact-info__band と同じ地。帯の上に白い表が乗る（contact のカードと同じ型） */
  padding: clamp(24px, min(2.4vw, 48px), 48px);
  border-radius: clamp(12px, min(1.2vw, 24px), 24px);
  background-color: #e2e1df;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.c-table {
  width: 100%;
  border-collapse: collapse;
  /* 表そのものは白（帯の上に乗る白いカード） */
  background-color: #fff;
  border-radius: clamp(8px, min(0.8vw, 16px), 16px);
  overflow: hidden;
  /* カンプ本文と同じ 24px 設計（下限 16px＝本文の可読性・EZ 規約） */
  font-size: clamp(16px, min(1.2vw, 24px), 24px);
  /* 本文の行送り 2.4 は表では間延びするので、行内 2行以上でも詰まらない 1.8 に落とす */
  line-height: 1.8;
}
.c-table th,
.c-table td {
  padding-block: min(min(1.4vw, 28px), 28px);
  border: 0;
  border-bottom: 1px solid rgba(54, 41, 24, 0.25);
  text-align: left;
  vertical-align: top;
  /* 長い住所・URL でも横スクロールを出さない */
  overflow-wrap: anywhere;
}
.c-table th {
  /* 最長の見出し「所在地（本社）」が 768px 幅でも1行に収まる下限 180px */
  width: clamp(180px, min(20vw, 400px), 400px);
  padding-inline: clamp(16px, min(2vw, 40px), 40px) min(min(2vw, 40px), 40px);
  background-color: rgba(54, 41, 24, 0.03);
  font-weight: 600;
}
.c-table td {
  /* 見出し列の地から離すため左にも余白を取る */
  padding-inline: clamp(16px, min(2vw, 40px), 40px) clamp(16px, min(2vw, 40px), 40px);
}
.c-table {
  /* 最終行の下罫は角丸を横切ってしまうので持たせない */
}
.c-table tr:last-child th,
.c-table tr:last-child td {
  border-bottom: 0;
}
.c-table {
  /* 住所と TEL/FAX を別々の行に置く（1行に流すと中途半端な位置で折り返すため） */
}
.c-table__line {
  display: block;
}
.c-table {
  /* 電話・FAX 番号は行またぎで割れないようにする（既定ではハイフンの後ろで折り返せてしまう）。
     [data-action="call"] は SP のみ tel-3.1.js が発信リンクで包む電話番号、
     __num は発信させない番号（FAX）用 */
}
.c-table [data-action=call], .c-table__num {
  white-space: nowrap;
}

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

@media (max-width: 1199px) {
  .home-about {
    padding-top: calc(90 * var(--to-rem));
    padding-bottom: calc(100 * var(--to-rem));
  }
  .home-about__row {
    margin-top: calc(50 * var(--to-rem));
    padding-left: max(calc(24 * var(--to-rem)), (100% - calc(1470 * var(--to-rem))) * 0.5);
  }
  .home-about__desc {
    margin-top: calc(24 * var(--to-rem));
  }
  .home-about__btn {
    margin-top: calc(40 * var(--to-rem));
  }
  .home-about__fig {
    width: 50%;
    border-radius: calc(40 * var(--to-rem)) 0 0 0;
  }
  .home-business {
    padding-top: calc(64 * var(--to-rem));
  }
  .home-business__head {
    position: static;
  }
  .home-business__body {
    margin-top: calc(48 * var(--to-rem));
  }
  .home-cases__lead {
    grid-area: auto;
    width: 100%;
    margin-top: calc(30 * var(--to-rem));
    margin-left: 0;
  }
  .business-service {
    padding-bottom: calc(100 * var(--to-rem));
  }
  .business-service__lead {
    padding-block: calc(48 * var(--to-rem));
  }
  .business-service__list {
    margin-top: calc(72 * var(--to-rem));
  }
  .business-service__item {
    row-gap: calc(30 * var(--to-rem));
    padding-inline: calc(24 * var(--to-rem));
    scroll-margin-top: calc(72 * var(--to-rem));
  }
  .business-service__item + .business-service__item {
    margin-top: calc(80 * var(--to-rem));
  }
  .business-service__item::before {
    margin-top: calc(40 * var(--to-rem));
    margin-left: calc(-40 * var(--to-rem));
    border-bottom-left-radius: calc(40 * var(--to-rem)) calc(44 * var(--to-rem));
  }
  .business-service__item--reverse::before {
    margin-right: calc(-40 * var(--to-rem));
    border-bottom-right-radius: calc(40 * var(--to-rem)) calc(44 * var(--to-rem));
  }
  .business-service__label {
    gap: calc(20 * var(--to-rem));
  }
  .business-service__name {
    font-size: clamp(28px, 2.6688907423vw, 32px);
  }
  .business-service__fig {
    border-top-right-radius: calc(40 * var(--to-rem)) calc(44 * var(--to-rem));
  }
  .business-service__item--reverse .business-service__fig {
    border-top-left-radius: calc(40 * var(--to-rem)) calc(44 * var(--to-rem));
  }
  .business-service__desc {
    margin-top: calc(100 * var(--to-rem));
    padding: 0 0 calc(40 * var(--to-rem)) calc(40 * var(--to-rem));
  }
  .business-service__item--reverse .business-service__desc {
    padding: 0 calc(40 * var(--to-rem)) calc(40 * var(--to-rem)) 0;
  }
  .cases-category {
    scroll-margin-top: calc(72 * var(--to-rem));
  }
  .company-outline {
    padding-block: calc(80 * var(--to-rem)) calc(56 * var(--to-rem));
  }
  .company-outline__table {
    margin-top: calc(40 * var(--to-rem));
  }
  .company-access {
    padding-block: calc(56 * var(--to-rem)) calc(90 * var(--to-rem));
  }
  .company-access__frame {
    margin-top: calc(40 * var(--to-rem));
  }
  .company-access__btn {
    margin-top: calc(32 * var(--to-rem));
  }
  .contact-info {
    padding-top: calc(72 * var(--to-rem));
  }
  .contact-form__panel {
    padding: calc(40 * var(--to-rem)) calc(32 * var(--to-rem));
  }
  .contact-form__table th {
    width: 34%;
  }
  .inner {
    padding-inline: calc(24 * var(--to-rem));
  }
  .l-header {
    height: calc(72 * var(--to-rem));
  }
  .l-header__inner {
    padding-inline: calc(20 * var(--to-rem)) calc(16 * var(--to-rem));
  }
  .l-header__right {
    display: none;
  }
  .l-header__hamburger {
    display: inline-block;
  }
  .l-mv {
    height: clamp(220px, 30.0250208507vw, 360px);
  }
  .l-mv__body {
    padding-top: calc(72 * var(--to-rem));
  }
  .l-footer {
    padding-block: calc(70 * var(--to-rem)) calc(60 * 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;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
        -ms-flex-align: start;
            align-items: flex-start;
    margin-top: calc(30 * var(--to-rem));
    gap: calc(24 * var(--to-rem));
  }
  .l-footer__copyright {
    margin-top: calc(40 * var(--to-rem));
  }
}

@media (max-width: 1023px) {
  .home-about__body {
    width: 100%;
    padding-right: calc(24 * var(--to-rem));
  }
  .home-about__fig {
    width: 100%;
    margin-top: calc(40 * var(--to-rem));
  }
  .p-contact__card {
    padding-inline: 3.4%;
  }
  .p-contact__num {
    font-size: clamp(20px, min(2.4vw, 48px), 48px);
  }
  .business-service__item {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    row-gap: 0;
  }
  .business-service__item::before {
    grid-area: 3/1/4/2;
    margin-top: calc(-40 * var(--to-rem));
    margin-inline: calc(min(13.25vw, 265px) * -1);
    border-radius: 0;
  }
  .business-service__item--reverse {
    grid-template-columns: minmax(0, 1fr);
  }
  .business-service__item--reverse::before {
    grid-area: 3/1/4/2;
    margin-inline: calc(min(13.25vw, 265px) * -1);
    border-radius: 0;
  }
  .business-service__label {
    grid-area: 1/1/2/2;
  }
  .business-service__item--reverse .business-service__label {
    grid-area: 1/1/2/2;
  }
  .business-service__name {
    font-size: clamp(25px, 2.6688907423vw, 32px);
  }
  .business-service__fig {
    grid-area: 2/1/3/2;
    margin-top: calc(30 * var(--to-rem));
    border-radius: calc(40 * var(--to-rem)) calc(40 * var(--to-rem)) 0 0;
  }
  .business-service__item--reverse .business-service__fig {
    grid-area: 2/1/3/2;
    border-radius: calc(40 * var(--to-rem)) calc(40 * var(--to-rem)) 0 0;
  }
  .business-service__desc {
    grid-area: 3/1/4/2;
    margin-top: 0;
    padding: calc(70 * var(--to-rem)) 0 calc(40 * var(--to-rem));
    line-height: 2.2;
  }
  .business-service__item--reverse .business-service__desc {
    grid-area: 3/1/4/2;
    padding: calc(70 * var(--to-rem)) 0 calc(40 * var(--to-rem));
  }
}

@media (max-width: 767px) {
  .home-fv {
    height: clamp(420px, 57.3663624511vw, 440px);
  }
  .home-fv__slide img {
    -o-object-position: 15% center;
       object-position: 15% center;
  }
  .home-fv__body {
    left: 0;
    right: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    padding-inline: calc(16 * var(--to-rem));
    text-align: center;
  }
  .home-fv__catch {
    font-size: clamp(19px, 5.2151238592vw, 40px);
    text-shadow: 0 0 0.7822685789vw rgba(54, 41, 24, 0.72), 0 0 1.5645371578vw rgba(54, 41, 24, 0.72), 0 0 3.1290743155vw rgba(54, 41, 24, 0.72);
  }
  .home-fv__en {
    margin-top: calc(20 * var(--to-rem));
    font-size: clamp(13px, 2.8683181226vw, 22px);
    letter-spacing: 0.02em;
    text-shadow: 0 0 0.7822685789vw rgba(54, 41, 24, 0.72), 0 0 1.5645371578vw rgba(54, 41, 24, 0.72), 0 0 3.1290743155vw rgba(54, 41, 24, 0.72);
  }
  .home-about {
    padding-top: calc(60 * var(--to-rem));
    padding-bottom: calc(70 * var(--to-rem));
  }
  .home-about__row {
    margin-top: calc(35 * var(--to-rem));
    padding-left: max(calc(16 * var(--to-rem)), (100% - calc(1470 * var(--to-rem))) * 0.5);
  }
  .home-about__body {
    padding-right: calc(16 * var(--to-rem));
  }
  .home-about__desc {
    margin-top: calc(20 * var(--to-rem));
    line-height: 2;
  }
  .home-about__btn {
    margin-top: calc(35 * var(--to-rem));
  }
  .home-about__fig {
    margin-top: calc(35 * var(--to-rem));
    border-radius: calc(24 * var(--to-rem)) 0 0 0;
  }
  .home-about__brush {
    left: calc(-60 * var(--to-rem));
    bottom: calc(-30 * var(--to-rem));
    width: calc(320 * var(--to-rem));
  }
  .home-business {
    padding-top: calc(48 * var(--to-rem));
  }
  .home-business__deco {
    top: calc(max(min(10.3vw, 206px), calc(56 * var(--to-rem))) * -1);
    right: 0%;
    left: auto;
  }
  .home-business__body {
    margin-top: calc(96 * var(--to-rem));
    padding-top: 0;
    padding-bottom: calc(48 * var(--to-rem));
  }
  .home-business__body::before {
    width: 100%;
    border-bottom-left-radius: 0;
  }
  .home-business__fig {
    position: relative;
    top: auto;
    width: 100%;
    border-top-right-radius: calc(40 * var(--to-rem));
  }
  .p-business-nav {
    width: 100%;
    margin-top: calc(35 * var(--to-rem));
  }
  .home-contact__band {
    padding-block: calc(40 * var(--to-rem)) calc(48 * var(--to-rem));
  }
  .p-contact__list {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 0;
  }
  .p-contact__card {
    width: 100%;
    max-width: calc(458 * var(--to-rem));
    padding: calc(40 * var(--to-rem)) calc(30 * var(--to-rem)) calc(36 * var(--to-rem));
  }
  .p-contact__card + .p-contact__card {
    margin-top: calc(35 * var(--to-rem));
  }
  .p-contact__num {
    margin-inline: 0;
    font-size: clamp(24px, min(2.4vw, 48px), 48px);
  }
  .business-service {
    padding-bottom: calc(70 * var(--to-rem));
  }
  .business-service__lead {
    padding-block: calc(35 * var(--to-rem));
  }
  .business-service__lead-text {
    line-height: 2;
  }
  .business-service__lead-text br {
    display: none;
  }
  .business-service__list {
    margin-top: calc(40 * var(--to-rem));
  }
  .business-service__item {
    padding-inline: calc(16 * var(--to-rem));
    scroll-margin-top: calc(72 * var(--to-rem));
  }
  .business-service__item + .business-service__item {
    margin-top: calc(50 * var(--to-rem));
  }
  .business-service__item::before {
    margin-top: calc(-30 * var(--to-rem));
  }
  .business-service__name {
    font-size: clamp(24px, 3.6505867014vw, 28px);
  }
  .business-service__fig {
    margin-top: calc(20 * var(--to-rem));
    border-radius: calc(24 * var(--to-rem)) calc(24 * var(--to-rem)) 0 0;
  }
  .business-service__item--reverse .business-service__fig {
    border-radius: calc(24 * var(--to-rem)) calc(24 * var(--to-rem)) 0 0;
  }
  .business-service__desc {
    padding: calc(50 * var(--to-rem)) 0 calc(35 * var(--to-rem));
    line-height: 2;
  }
  .business-service__item--reverse .business-service__desc {
    padding: calc(50 * var(--to-rem)) 0 calc(35 * var(--to-rem));
  }
  .cases-nav__list {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: calc(16 * var(--to-rem));
  }
  .cases-nav__item {
    width: 100%;
  }
  .cases-category__body {
    -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;
    gap: 0;
  }
  .cases-category__figure {
    width: 100%;
    margin-top: calc(28 * var(--to-rem));
  }
  .company-outline {
    padding-block: calc(56 * var(--to-rem)) calc(40 * var(--to-rem));
  }
  .company-outline__table {
    margin-top: calc(32 * var(--to-rem));
  }
  .company-access {
    padding-block: calc(40 * var(--to-rem)) calc(60 * var(--to-rem));
  }
  .company-access__frame {
    margin-top: calc(32 * var(--to-rem));
    aspect-ratio: 4/3;
  }
  .company-access__btn {
    margin-top: calc(24 * var(--to-rem));
  }
  .contact-info {
    padding-top: calc(48 * var(--to-rem));
  }
  .contact-info__head {
    margin-bottom: calc(28 * var(--to-rem));
  }
  .contact-info__band {
    padding-block: calc(40 * var(--to-rem)) calc(48 * var(--to-rem));
    border-radius: calc(40 * var(--to-rem)) calc(40 * var(--to-rem)) 0 0;
  }
  .contact-info__list {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 0;
  }
  .contact-info__card {
    width: 100%;
    max-width: calc(458 * var(--to-rem));
    padding: calc(40 * var(--to-rem)) calc(30 * var(--to-rem)) calc(36 * var(--to-rem));
  }
  .contact-info__card + .contact-info__card {
    margin-top: calc(35 * var(--to-rem));
  }
  .contact-form {
    padding-block: calc(48 * var(--to-rem)) calc(56 * var(--to-rem));
  }
  .contact-form__lead {
    margin-top: calc(28 * var(--to-rem));
  }
  .contact-form__panel {
    padding: calc(24 * var(--to-rem)) calc(20 * var(--to-rem));
    border-radius: calc(20 * var(--to-rem));
  }
  .contact-form__btns {
    -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));
  }
  .contact-form__table,
  .contact-form__table tbody,
  .contact-form__table tr,
  .contact-form__table th,
  .contact-form__table td {
    display: block;
    width: 100%;
  }
  .contact-form__table th {
    padding: calc(16 * var(--to-rem)) 0 calc(8 * var(--to-rem));
    border-bottom: 0;
  }
  .contact-form__table td {
    padding: 0 0 calc(16 * var(--to-rem));
  }
  .contact-form__input--postal,
  .contact-form__select-wrap {
    max-width: none;
  }
  .contact-form__btn {
    max-width: none;
  }
  .inner {
    padding-inline: calc(16 * var(--to-rem));
  }
  .l-mv {
    height: max(50vh, clamp(200px, 36.5058670143vw, 280px));
  }
  .l-mv__ja {
    margin-top: calc(10 * var(--to-rem));
  }
  .l-footer {
    padding-block: calc(50 * var(--to-rem)) calc(40 * var(--to-rem));
  }
  .l-footer__nav-list {
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    gap: calc(8 * var(--to-rem)) calc(20 * var(--to-rem));
  }
  .l-footer__copyright {
    margin-top: calc(30 * var(--to-rem));
    text-align: left;
  }
  .c-table__wrap {
    padding: calc(20 * var(--to-rem));
    border-radius: calc(16 * var(--to-rem));
  }
  .c-table th,
  .c-table td {
    display: block;
    width: 100%;
    padding-inline: calc(16 * var(--to-rem));
    /* 縦積みでは th の地色の帯・td の白い帯がそれぞれ独立した箱になるため、
       上下の余白を同値にして文字を帯の上下中央に置く
       （2026-09-10 CEO ご指示。旧値 th 18/4・td 0/18 では見出しが帯の下端に、
         値が帯の上端に寄っていた）。 */
    padding-block: calc(11 * var(--to-rem));
  }
  .c-table th {
    /* 縦積みなので見出しと値の間の罫は消し、行の区切りは td 側の罫だけにする */
    border-bottom: 0;
  }
}

@media (min-width: 768px) {
  .p-business-nav__link:hover, .p-business-nav__link:focus {
    opacity: 0.6;
  }
  .p-business-nav__link:hover .p-business-nav__icon, .p-business-nav__link:focus .p-business-nav__icon {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
  .home-cases__track:hover {
    -webkit-animation-play-state: paused;
            animation-play-state: paused;
  }
  .p-contact__btn:focus, .p-contact__btn:hover {
    opacity: 0.6;
  }
  .cases-nav__link:hover, .cases-nav__link:focus {
    opacity: 0.6;
  }
  .cases-category__figure .swiper-slide a:hover, .cases-category__figure .swiper-slide a:focus {
    opacity: 0.6;
  }
  .cases-category__figure .swiper-button-prev:hover, .cases-category__figure .swiper-button-prev:focus,
  .cases-category__figure .swiper-button-next:hover,
  .cases-category__figure .swiper-button-next:focus {
    opacity: 0.6;
  }
  .contact-form__btn:focus, .contact-form__btn:hover {
    opacity: 0.6;
  }
  .l-header__logo-link:focus, .l-header__logo-link:hover {
    color: #ffe082;
  }
  .l-header__nav-link:focus, .l-header__nav-link:hover {
    color: #ffe082;
  }
  .l-header__btn--mail:focus, .l-header__btn--mail:hover {
    opacity: 0.6;
  }
  .l-drawer__list a:focus, .l-drawer__list a:hover {
    color: #ffe082;
  }
  .l-footer__nav-link:focus, .l-footer__nav-link:hover {
    color: #ffe082;
  }
  .l-pagetop.is-show:focus, .l-pagetop.is-show:hover {
    opacity: 0.6;
  }
  .c-btn--more:focus, .c-btn--more:hover {
    opacity: 0.6;
  }
  .c-btn--more:focus::after, .c-btn--more:hover::after {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-cases__track {
    -webkit-animation: none;
            animation: none;
  }
}

@media print {
  .contact-form__privacy {
    max-height: none;
    overflow: visible;
  }
  .h-adr .contact-form__btns--confirm.confirm-only {
    display: none !important;
  }
}