@charset "UTF-8";

/* ============================================================
北九州ステンレス技巧 page.css

構成
  00) ブランドトークン（:root）
  01) 共通ベース（section / inner のリズム）
  02) 共通パーツ（見出し・ボタン・back2top）
  03) 共通 header
  04) 共通 footer
  05) モーション初期状態
  10) top-page（index.html → front-page.php）
  20) business-page（business.html → page-business.php）

※ 03/04 の header・footer は全ページ共通パーツのため、
   例外的に body のページ class でスコープを切っていない。
   ページ固有の見た目は必ず 10) 以降に書くこと。
============================================================= */


/* ============================
00) ブランドトークン
---------------------------- */
:root {
  --ks-blue:      #0E7BD1; /* キーカラー（明るめブルー） */
  --ks-blue-d:    #0A5C9E; /* 濃色（ホバー・文字） */
  --ks-blue-dd:   #08477A; /* 最濃（グラデ終端） */
  --ks-blue-l:    #4FA9EA; /* 明色 */
  --ks-blue-p:    #E9F3FC; /* 淡色背景 */
  --ks-blue-p2:   #F5FAFE; /* 最淡背景 */

  --ks-accent:    #FF8D28; /* アクセント（火花のオレンジ） */
  --ks-accent-d:  #D9690B; /* アクセント文字用 */

  --ks-ink:       #22333F; /* 本文 */
  --ks-ink-m:     #5B6E7C; /* 補助文 */
  --ks-line:      #D7E6F3; /* 罫線 */

  --ks-shadow:    0 1.2rem 3.2rem rgba(10, 76, 130, 0.12);
  --ks-shadow-s:  0 0.6rem 1.8rem rgba(10, 76, 130, 0.08);

  --ks-r:   1.6rem; /* 角丸 */
  --ks-r-s: 0.8rem;

  /* セクションの上下余白（中間域は clamp で縮みを止める） */
  --ks-sec-pd: clamp(6.4rem, calc(var(--s1) * 110), 11rem);
  /* 左右の内側余白 */
  --ks-inner-pd: clamp(2rem, calc(var(--s1) * 40), 4rem);
}


/* ============================
01) 共通ベース
---------------------------- */
body {
  font-feature-settings: "palt" 1;
  letter-spacing: 0.02em;
}

/* 1枚目のセクションが header の下から始まるよう、main の padding は各セクションで持つ */
main {
  padding-top: 0;
}

/* セクションは全幅。内容幅は .inner で絞る */
main section {
  width: 100%;
  max-width: 100%;
  position: relative;
}
@media screen and (max-width: 767px) {
  main section {
    width: 100%;
    max-width: 100%;
  }
}
main section > .outer {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: var(--ks-sec-pd);
  padding-bottom: var(--ks-sec-pd);
}
main section > .outer > .inner {
  margin: 0 auto;
  width: 100%;
  max-width: calc(var(--s1) * 1200);
  padding-left: var(--ks-inner-pd);
  padding-right: var(--ks-inner-pd);
}
@media screen and (max-width: 767px) {
  main section > .outer > .inner {
    padding-left: 5vw;
    padding-right: 5vw;
  }
}

p {
  line-height: 195%;
}
h2, h3, h4 {
  margin-bottom: 0;
  letter-spacing: 0.04em;
}


/* ============================
02) 共通パーツ
---------------------------- */

/* ---- セクション見出し ---- */
.sec-head {
  margin-bottom: clamp(3.2rem, calc(var(--s1) * 56), 5.6rem);
}
.sec-head .eyebrow {
  margin: 0;
  line-height: 1;
}
.sec-head .eyebrow .en {
  display: inline-flex;
  align-items: center;
  gap: clamp(0.8rem, var(--s12), 1.2rem);
  font-family: var(--ff-r);
  font-size: clamp(1.2rem, var(--s14), 1.4rem);
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ks-blue);
}
.sec-head .eyebrow .en::before {
  content: "";
  width: clamp(2.4rem, calc(var(--s1) * 44), 4.4rem);
  height: 0.2rem;
  border-radius: 0.2rem;
  background: linear-gradient(90deg, var(--ks-blue-l), var(--ks-blue));
}
.sec-head.tc .eyebrow .en::after {
  content: "";
  width: clamp(2.4rem, calc(var(--s1) * 44), 4.4rem);
  height: 0.2rem;
  border-radius: 0.2rem;
  background: linear-gradient(90deg, var(--ks-blue), var(--ks-blue-l));
}
.sec-head h2 {
  margin: clamp(1.2rem, var(--s16), 1.6rem) 0 0;
  font-size: clamp(2.4rem, calc(var(--s1) * 40), 4rem);
  font-weight: 700;
  line-height: 140%;
}
.sec-head .sec-lead {
  margin: clamp(1.6rem, var(--s20), 2rem) 0 0;
  color: var(--ks-ink-m);
  font-size: clamp(1.4rem, var(--s16), 1.6rem);
}

/* ---- ボタン ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.8rem, var(--s12), 1.2rem);
  padding: clamp(1.4rem, var(--s20), 2rem) clamp(2.8rem, calc(var(--s1) * 40), 4rem);
  border: none;
  border-radius: 100rem;
  font-family: var(--ff-g);
  font-size: clamp(1.4rem, var(--s16), 1.6rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1),
              box-shadow 0.35s cubic-bezier(0.2, 0.7, 0.3, 1),
              background-color 0.35s ease, color 0.35s ease;
}
.btn::after {
  content: "";
  width: 0.9rem;
  height: 0.9rem;
  border-top: 0.2rem solid currentColor;
  border-right: 0.2rem solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.btn:hover::after {
  transform: rotate(45deg) translate(0.3rem, -0.3rem);
}
/* ---- 外部リンクアイコン（サイト共通ルール） ----
   外部サイトへ遷移するリンク／ボタンは、必ずこの .ico-ex を文字の右に置く。
   currentColor で描くので、白文字の上でも青文字の上でも背景と同化しない。
   .btn に付ける場合は、既定の「＞」を消すために .btn-ex も併記する */
.ico-ex {
  width: clamp(1.4rem, var(--s16), 1.6rem);
  height: auto;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.btn-ex::after {
  content: none;
}
.btn:hover .ico-ex {
  transform: translate(0.2rem, -0.2rem);
}
.btn-lg {
  padding-left: clamp(3.6rem, calc(var(--s1) * 56), 5.6rem);
  padding-right: clamp(3.6rem, calc(var(--s1) * 56), 5.6rem);
}

.btn-main,
a.btn-main:link,
a.btn-main:visited {
  background: linear-gradient(135deg, var(--ks-blue) 0%, #2E9BE8 100%);
  color: #FFFFFF;
  box-shadow: 0 0.8rem 2rem rgba(14, 123, 209, 0.32);
}
.btn-main:hover,
a.btn-main:hover {
  color: #FFFFFF;
  opacity: 1;
  transform: translateY(-0.3rem);
  box-shadow: 0 1.4rem 2.8rem rgba(14, 123, 209, 0.42);
}

.btn-line,
a.btn-line:link,
a.btn-line:visited {
  background: rgba(255, 255, 255, 0.10);
  border: 0.2rem solid rgba(255, 255, 255, 0.72);
  color: #FFFFFF;
  -webkit-backdrop-filter: blur(0.6rem);
  backdrop-filter: blur(0.6rem);
}
.btn-line:hover,
a.btn-line:hover {
  background: #FFFFFF;
  color: var(--ks-blue-d);
  opacity: 1;
  transform: translateY(-0.3rem);
}

.btn-wh,
a.btn-wh:link,
a.btn-wh:visited {
  background: #FFFFFF;
  color: var(--ks-blue-d);
  box-shadow: 0 0.8rem 2rem rgba(0, 0, 0, 0.14);
}
.btn-wh:hover,
a.btn-wh:hover {
  color: var(--ks-blue-d);
  opacity: 1;
  transform: translateY(-0.3rem);
  box-shadow: 0 1.4rem 2.8rem rgba(0, 0, 0, 0.2);
}

/* ---- back2top ---- */
.back2top {
  position: fixed;
  right: clamp(1.6rem, var(--s24), 2.4rem);
  bottom: clamp(1.6rem, var(--s24), 2.4rem);
  width: clamp(4.4rem, calc(var(--s1) * 56), 5.6rem);
  height: clamp(4.4rem, calc(var(--s1) * 56), 5.6rem);
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ks-blue) 0%, #2E9BE8 100%);
  box-shadow: 0 0.8rem 2rem rgba(14, 123, 209, 0.38);
  z-index: 9000;
}
.back2top::before {
  content: "";
  position: absolute;
  top: 54%;
  left: 50%;
  width: 1rem;
  height: 1rem;
  border-top: 0.2rem solid #FFFFFF;
  border-right: 0.2rem solid #FFFFFF;
  transform: translate(-50%, -50%) rotate(-45deg);
}
.back2top:hover {
  opacity: 1;
  transform: translateY(-0.4rem);
}


/* ============================
03) 共通 header
---------------------------- */
header {
  -webkit-backdrop-filter: blur(1.2rem);
  backdrop-filter: blur(1.2rem);
  border-bottom: 0.1rem solid var(--ks-line);
  transition: box-shadow 0.4s ease;
}
header.is-scrolled {
  box-shadow: 0 0.6rem 2.4rem rgba(10, 76, 130, 0.10);
}
header .outer .inner {
  max-width: calc(var(--s1) * 1440);
  margin: 0 auto;
  padding: 0 var(--ks-inner-pd);
}
@media screen and (max-width: 767px) {
  header .outer .inner {
    padding: 0 5vw;
  }
}

header .logo {
  margin: 0;
  line-height: 1;
}
header .logo a {
  display: flex;
  align-items: center;
  gap: clamp(0.8rem, var(--s14), 1.4rem);
}
header .logo a:hover {
  opacity: 0.75;
}
header .logo img {
  width: clamp(3.2rem, calc(var(--s1) * 46), 4.6rem);
  height: auto;
}
header .logo .logo-tx {
  display: block;
}
header .logo .nm {
  display: block;
  font-size: clamp(1.4rem, var(--s16), 1.6rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ks-ink);
}
header .logo .en {
  display: block;
  margin-top: 0.4rem;
  font-family: var(--ff-r);
  font-size: clamp(0.9rem, var(--s10), 1rem);
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--ks-blue);
}
@media screen and (max-width: 767px) {
  header .logo .en {
    display: none;
  }
  header .logo .nm {
    font-size: 1.3rem;
  }
}

/* ---- main menu ---- */
header .menu .menu-main {
  align-items: center;
  gap: clamp(1.6rem, calc(var(--s1) * 30), 3rem);
}
header .menu .menu-main > .itm > a {
  position: relative;
  padding: 0.6rem 0;
  text-align: center;
  font-size: clamp(1.3rem, var(--s14), 1.4rem);
  font-weight: 700;
  color: var(--ks-ink);
}
header .menu .menu-main > .itm > a .en {
  display: block;
  margin-top: 0.3rem;
  font-family: var(--ff-r);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--ks-blue-l);
  transition: color 0.3s ease;
}
header .menu .menu-main > .itm:not(.contact) > a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.2rem;
  width: 100%;
  height: 0.2rem;
  border-radius: 0.2rem;
  background: linear-gradient(90deg, var(--ks-blue), var(--ks-blue-l));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.3, 1);
}
header .menu .menu-main > .itm:not(.contact) > a:hover,
header .menu .menu-main > .itm.current > a {
  color: var(--ks-blue);
  opacity: 1;
}
header .menu .menu-main > .itm:not(.contact) > a:hover::after,
header .menu .menu-main > .itm.current > a::after {
  transform: scaleX(1);
}

/* CTA */
header .menu .menu-main > .itm.contact > a {
  display: inline-flex;
  align-items: center;
  gap: clamp(0.6rem, var(--s10), 1rem);
  background: linear-gradient(135deg, var(--ks-blue) 0%, #2E9BE8 100%);
  border: none;
  border-radius: 100rem;
  padding: clamp(1rem, var(--s14), 1.4rem) clamp(1.8rem, var(--s24), 2.4rem);
  color: #FFFFFF;
  box-shadow: 0 0.5rem 1.4rem rgba(14, 123, 209, 0.32);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
/* メールアイコン。currentColor で描くので、PC（白抜き）でも
   SP メニュー（白地＋青文字）でも自動で色が追従する */
header .menu .menu-main > .itm.contact .ico {
  width: clamp(1.4rem, var(--s16), 1.6rem);
  height: auto;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
header .menu .menu-main > .itm.contact > a:hover {
  color: #FFFFFF;
  opacity: 1;
  transform: translateY(-0.2rem);
  box-shadow: 0 0.9rem 2rem rgba(14, 123, 209, 0.42);
}

/* ---- SP メニュー ---- */
@media screen and (max-width: 767px) {
  header .menu {
    background: linear-gradient(160deg, var(--ks-blue) 0%, var(--ks-blue-d) 70%, var(--ks-blue-dd) 100%);
  }
  header .menu .menu-main {
    gap: 0;
    padding: 0 8vw;
  }
  header .menu .menu-main > .itm {
    border-bottom: 0.1rem solid rgba(255, 255, 255, 0.24);
    padding-top: 2.2rem;
    padding-bottom: 2.2rem;
  }
  header .menu .menu-main > .itm > a {
    color: #FFFFFF;
    font-size: 1.7rem;
  }
  header .menu .menu-main > .itm > a .en {
    color: rgba(255, 255, 255, 0.7);
  }
  header .menu .menu-main > .itm:not(.contact) > a::after {
    display: none;
  }
  header .menu .menu-main > .itm.contact {
    border-bottom: none;
    margin-top: 1.2rem;
  }
  header .menu .menu-main > .itm.contact > a {
    display: inline-flex;
    /* .itm が display:grid ＋ width:100% で、a が幅いっぱいに伸びるため中央寄せ */
    justify-content: center;
    background: #FFFFFF;
    color: var(--ks-blue-d);
    padding: 1.4rem 3.2rem;
  }
  /* PC 用の hover（color:#FFFFFF）がそのまま効くと、SP は白地＋白文字で
     文字とアイコンが消えるため打ち消す。タップ後に :hover が残る端末対策も兼ねる */
  header .menu .menu-main > .itm.contact > a:hover {
    background: var(--ks-blue-p);
    color: var(--ks-blue-d);
    transform: none;
  }
}


/* ============================
04) 共通 footer
---------------------------- */
footer {
  background: linear-gradient(160deg, var(--ks-blue) 0%, var(--ks-blue-d) 62%, var(--ks-blue-dd) 100%);
  color: #FFFFFF;
}
footer a,
footer a:link,
footer a:visited,
footer a:hover {
  color: #FFFFFF;
}
footer section {
  width: 100%;
  max-width: 100%;
}
@media screen and (max-width: 767px) {
  footer section {
    width: 100%;
    max-width: 100%;
  }
}
footer section > .outer {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: clamp(4.8rem, calc(var(--s1) * 84), 8.4rem);
  padding-bottom: clamp(4.8rem, calc(var(--s1) * 84), 8.4rem);
}
footer section > .outer > .inner {
  margin: 0 auto;
  width: 100%;
  max-width: calc(var(--s1) * 1200);
  padding-left: var(--ks-inner-pd);
  padding-right: var(--ks-inner-pd);
}
@media screen and (max-width: 767px) {
  footer section > .outer > .inner {
    padding-left: 5vw;
    padding-right: 5vw;
  }
}

footer .foot-flex > .itm1 {
  flex: 1 1 auto;
  min-width: 0;
}
footer .foot-flex > .itm2 {
  flex: 0 0 auto;
}

footer .foot-logo {
  display: flex;
  align-items: center;
  gap: clamp(1rem, var(--s16), 1.6rem);
  margin: 0 0 clamp(1.6rem, var(--s24), 2.4rem);
  font-size: clamp(1.7rem, calc(var(--s1) * 22), 2.2rem);
  font-weight: 700;
  letter-spacing: 0.04em;
}
footer .foot-logo img {
  width: clamp(4rem, calc(var(--s1) * 56), 5.6rem);
  height: auto;
}
footer address {
  margin: 0 0 clamp(2.4rem, calc(var(--s1) * 36), 3.6rem);
  font-size: clamp(1.3rem, var(--s14), 1.4rem);
  line-height: 190%;
  color: rgba(255, 255, 255, 0.88);
}
footer .sitemap-lst {
  margin: 0;
  padding: 0;
}
footer .sitemap-lst > .itm > a {
  position: relative;
  display: inline-block;
  padding-bottom: 0.3rem;
  font-size: clamp(1.3rem, var(--s14), 1.4rem);
  font-weight: 500;
}
footer .sitemap-lst > .itm > a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0.1rem;
  background: rgba(255, 255, 255, 0.85);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1);
}
footer .sitemap-lst > .itm > a:hover {
  opacity: 1;
}
footer .sitemap-lst > .itm > a:hover::after {
  transform: scaleX(1);
}

/* Googleマップ埋め込み。画像時（420px 相当）から一回り広げて 460px 相当・4:3 */
footer .foot-map {
  position: relative;
  width: clamp(28rem, calc(var(--s1) * 460), 46rem);
  aspect-ratio: 4 / 3;
  border-radius: var(--ks-r);
  overflow: hidden;
  box-shadow: 0 1.2rem 3.2rem rgba(0, 0, 0, 0.22);
  background: #E8EEF3; /* iframe 読み込み前の下地 */
}
footer .foot-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
footer .foot-map-link {
  margin: clamp(1.2rem, var(--s16), 1.6rem) 0 0;
  text-align: right;
  width: clamp(28rem, calc(var(--s1) * 460), 46rem);
}
footer .foot-map-link a {
  display: inline-flex;
  align-items: center;
  gap: clamp(0.5rem, calc(var(--s1) * 6), 0.6rem);
  padding-bottom: 0.3rem;
  font-size: clamp(1.3rem, var(--s14), 1.4rem);
  font-weight: 700;
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1);
}
/* 下線はテキストにだけ引く。a に引くとアイコンの下まで線が伸びるため */
footer .foot-map-link a .tx {
  position: relative;
}
footer .foot-map-link a .tx::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.3rem;
  width: 100%;
  height: 0.1rem;
  background: rgba(255, 255, 255, 0.85);
}
footer .foot-map-link a:hover {
  opacity: 1;
  transform: translateX(0.3rem);
}
@media screen and (max-width: 767px) {
  footer .foot-map {
    width: 100%;
  }
  footer .foot-map-link {
    width: 100%;
  }
}

footer section.copyright > .outer {
  padding-top: clamp(1.8rem, var(--s24), 2.4rem);
  padding-bottom: clamp(1.8rem, var(--s24), 2.4rem);
  border-top: 0.1rem solid rgba(255, 255, 255, 0.24);
}
footer section.copyright > .outer > .inner {
  margin: 0 auto;
}
footer section.copyright p {
  margin: 0;
  font-size: clamp(1.1rem, var(--s12), 1.2rem);
  color: rgba(255, 255, 255, 0.82);
}


/* ============================
05) モーション初期状態
---------------------------- */
.js-motion .js-rv,
.js-motion .js-rv-stagger > * {
  opacity: 0;
  transform: translateY(2.8rem);
}
.js-motion .js-rv-img {
  clip-path: inset(0 100% 0 0);
}
.js-rv-lines .ln {
  display: block;
  overflow: hidden;
  padding-bottom: 0.12em;
}
.js-rv-lines .ln > span {
  display: block;
}
.js-motion .js-rv-lines .ln > span {
  transform: translateY(115%);
}

@media (prefers-reduced-motion: reduce) {
  .js-motion .js-rv,
  .js-motion .js-rv-stagger > * {
    opacity: 1;
    transform: none;
  }
  .js-motion .js-rv-img {
    clip-path: none;
  }
  .js-motion .js-rv-lines .ln > span {
    transform: none;
  }
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ============================================================
10) top-page（index.html → front-page.php）
============================================================= */

/* ---------- MV ---------- */
body.top-page section.mv {
  width: 100%;
  max-width: 100%;
  min-height: 100svh;
  display: flex;
  align-items: center;
  background: var(--ks-blue-dd);
  overflow: hidden;
}
@media screen and (max-width: 767px) {
  body.top-page section.mv {
    min-height: 92svh;
    aspect-ratio: auto;
  }
}
body.top-page section.mv > .outer {
  position: relative;
  z-index: 3;
  width: 100%;
  padding-top: calc(var(--common_header_height) + var(--ks-sec-pd));
  padding-bottom: var(--ks-sec-pd);
}

/* 写真モザイク */
body.top-page .mv-bg {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
}
body.top-page .mv-bg .mv-row {
  flex: 1 1 0;
  min-height: 0;
}
body.top-page .mv-bg .itm {
  position: relative;
  overflow: hidden;
  min-width: 0;
}
body.top-page .mv-bg .itm img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.72) contrast(1.06) brightness(0.94);
  transform: scale(1.08);
  animation: ks-drift 26s ease-in-out infinite alternate;
}
body.top-page .mv-bg .itm1 { flex: 1.15 1 0; }
body.top-page .mv-bg .itm2 { flex: 0.85 1 0; }
body.top-page .mv-bg .itm3 { flex: 1.05 1 0; }
body.top-page .mv-bg .itm4 { flex: 0.92 1 0; }
body.top-page .mv-bg .itm5 { flex: 1.12 1 0; }
body.top-page .mv-bg .itm6 { flex: 0.96 1 0; }
body.top-page .mv-bg .itm7 { flex: 1.00 1 0; }
body.top-page .mv-bg .itm2 img { animation-delay: -4s; }
body.top-page .mv-bg .itm3 img { animation-delay: -8s; }
body.top-page .mv-bg .itm4 img { animation-delay: -12s; }
body.top-page .mv-bg .itm5 img { animation-delay: -16s; }
body.top-page .mv-bg .itm6 img { animation-delay: -20s; }
body.top-page .mv-bg .itm7 img { animation-delay: -24s; }
@keyframes ks-drift {
  from { transform: scale(1.08) translate3d(-1.2%, 0.6%, 0); }
  to   { transform: scale(1.16) translate3d(1.2%, -0.6%, 0); }
}
@media screen and (max-width: 767px) {
  body.top-page .mv-bg .itm3,
  body.top-page .mv-bg .itm7 {
    display: none;
  }
}

/* ブルーのベール＋設計図グリッド */
body.top-page .mv-veil {
  position: absolute;
  inset: 0;
  z-index: 1;

/*
  background:
    linear-gradient(103deg,
      rgba(8, 71, 122, 0.94) 0%,
      rgba(10, 92, 158, 0.86) 38%,
      rgba(14, 123, 209, 0.58) 66%,
      rgba(14, 123, 209, 0.34) 100%);
*/

  background:
    linear-gradient(103deg,
      rgba(8, 71, 122, 0.94) 0%,
      rgba(10, 92, 158, 0.86) 5%,
      rgba(14, 123, 209, 0.58) 10%,
      rgba(14, 123, 209, 0.34) 15%);
}
body.top-page .mv-grid {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0.22;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.5) 0.1rem, transparent 0.1rem),
    linear-gradient(90deg, rgba(255, 255, 255, 0.5) 0.1rem, transparent 0.1rem);
  background-size: 8rem 8rem;
  -webkit-mask-image: radial-gradient(120% 90% at 22% 50%, #000 0%, transparent 72%);
  mask-image: radial-gradient(120% 90% at 22% 50%, #000 0%, transparent 72%);
}

body.top-page .mv-copy {
  max-width: calc(var(--s1) * 1040);
  color: #FFFFFF;
}
body.top-page .mv-copy .eyebrow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(0.8rem, var(--s14), 1.4rem);
  margin: 0 0 clamp(1.6rem, var(--s24), 2.4rem);
  font-size: clamp(1.2rem, var(--s14), 1.4rem);
  font-weight: 500;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.9);
}
body.top-page .mv-copy .eyebrow span {
  padding: 0.5rem 1.2rem;
  border: 0.1rem solid rgba(255, 255, 255, 0.55);
  border-radius: 100rem;
  font-family: var(--ff-r);
  font-size: clamp(1.1rem, var(--s12), 1.2rem);
  font-weight: 700;
  letter-spacing: 0.14em;
}
body.top-page .mv-copy h1 {
  margin: 0;
  font-size: clamp(2.8rem, calc(var(--s1) * 58), 5.8rem);
  font-weight: 700;
  line-height: 148%;
  letter-spacing: 0.02em;
}
/* コピーの改行位置を「…未来を／支える技術集団」で固定する。
   1行目が16文字あるため、.mv-copy の受け幅を 1040px 相当まで広げたうえで
   .ln 内の折り返しを止めている（幅・字送りとも --s1 基準で連動して縮む）。 */
body.top-page .mv-copy h1 .ln {
  white-space: nowrap;
}
@media screen and (max-width: 767px) {
  /* SP は画面幅が足りないので、1行に収まるところまで字を落とす */
  body.top-page .mv-copy h1 {
    font-size: clamp(1.7rem, 5.4vw, 2.6rem);
  }
}
body.top-page .mv-copy h1 em {
  position: relative;
  font-style: normal;
  color: var(--ks-accent);
}
body.top-page .mv-copy .lead {
  margin: clamp(2rem, calc(var(--s1) * 32), 3.2rem) 0 clamp(2.8rem, calc(var(--s1) * 44), 4.4rem);
  font-size: clamp(1.4rem, calc(var(--s1) * 18), 1.8rem);
  line-height: 200%;
  color: rgba(255, 255, 255, 0.94);
}
@media screen and (max-width: 767px) {
  body.top-page .mv-btn-flex {
    flex-direction: column;
    align-items: stretch;
  }
  body.top-page .mv-btn-flex .btn {
    width: 100%;
  }
}

body.top-page .mv-copy .eyebrow,
body.top-page .mv-copy h1,
body.top-page .mv-copy .lead {
  text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.75);
}

body.top-page .mv-scroll {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 2.4rem;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  font-family: var(--ff-r);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  color: rgba(255, 255, 255, 0.8);
}
body.top-page .mv-scroll::after {
  content: "";
  width: 0.1rem;
  height: 5.6rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0));
  transform-origin: top center;
  animation: ks-scrollline 2.2s ease-in-out infinite;
}
@keyframes ks-scrollline {
  0%   { transform: scaleY(0); opacity: 0; }
  35%  { opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}
@media screen and (max-width: 767px) {
  body.top-page .mv-scroll {
    display: none;
  }
}

/* ---------- message ---------- */
body.top-page section.message {
  background: var(--ks-blue-p2);
}
body.top-page section.message::before {
  content: "";
  position: absolute;
  right: -6%;
  top: 8%;
  width: clamp(24rem, calc(var(--s1) * 460), 46rem);
  aspect-ratio: 1 / 1; /* ロゴマーク差し替えに伴い 528:427 → 正方形へ */
  background: url(../imgs/logo_mark.svg) center / contain no-repeat;
  opacity: 0.045;
  pointer-events: none;
}
body.top-page .message-body {
  max-width: calc(var(--s1) * 880);
  margin: 0 auto;
}
body.top-page .message-body p {
  margin: 0 0 clamp(1.8rem, var(--s24), 2.4rem);
  font-size: clamp(1.4rem, calc(var(--s1) * 17), 1.7rem);
  color: var(--ks-ink);
}
body.top-page .message-body p:last-child {
  margin-bottom: 0;
}

body.top-page .stat-flex {
  margin: clamp(4rem, calc(var(--s1) * 72), 7.2rem) auto 0;
  max-width: calc(var(--s1) * 960);
  padding: 0;
}
body.top-page .stat-flex > .itm {
  padding: clamp(2.4rem, calc(var(--s1) * 40), 4rem) clamp(1.6rem, var(--s24), 2.4rem);
  background: #FFFFFF;
  border: 0.1rem solid var(--ks-line);
  border-radius: var(--ks-r);
  box-shadow: var(--ks-shadow-s);
  text-align: center;
}
body.top-page .stat-flex .num {
  margin: 0 0 0.8rem;
  font-family: var(--ff-r);
  font-size: clamp(3.4rem, calc(var(--s1) * 56), 5.6rem);
  font-weight: 700;
  line-height: 1;
  color: var(--ks-blue);
}
body.top-page .stat-flex .num .unit {
  margin-left: 0.2em;
  font-family: var(--ff-g);
  font-size: 0.36em;
  font-weight: 700;
}
body.top-page .stat-flex .num .en {
  font-family: var(--ff-g);
  font-size: 0.72em;
}
body.top-page .stat-flex .cap {
  margin: 0;
  font-size: clamp(1.3rem, var(--s14), 1.4rem);
  font-weight: 500;
  color: var(--ks-ink-m);
  line-height: 160%;
}

/* ---------- Business ---------- */
body.top-page section.business > .outer {
  padding-bottom: 0;
}
body.top-page .biz-flex > .itm {
  flex: 1 1 0;
  min-width: 0;
}
body.top-page .biz-img {
  position: relative;
  border-radius: var(--ks-r);
  overflow: hidden;
  box-shadow: var(--ks-shadow);
}
body.top-page .biz-img img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
body.top-page .biz-img::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: clamp(6rem, calc(var(--s1) * 96), 9.6rem);
  height: 0.6rem;
  background: linear-gradient(90deg, var(--ks-accent), #FFB86B);
}
body.top-page .biz-flex .itm2 p {
  font-size: clamp(1.4rem, calc(var(--s1) * 17), 1.7rem);
  margin: 0 0 clamp(2rem, calc(var(--s1) * 32), 3.2rem);
}
body.top-page .tag-flex {
  margin: 0 0 clamp(2.8rem, calc(var(--s1) * 40), 4rem);
  padding: 0;
}
body.top-page .tag-flex > .itm {
  padding: 0.7rem 1.6rem;
  border-radius: 100rem;
  background: var(--ks-blue-p);
  color: var(--ks-blue-d);
  font-size: clamp(1.2rem, var(--s14), 1.4rem);
  font-weight: 700;
}

/* 施工事例ストリップ（無限スクロール） */
body.top-page .works-strip {
  margin-top: clamp(4.8rem, calc(var(--s1) * 88), 8.8rem);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
body.top-page .strip-flex {
  width: max-content;
  margin: 0;
  padding: 0;
  animation: ks-marquee 64s linear infinite;
}
body.top-page .works-strip:hover .strip-flex {
  animation-play-state: paused;
}
body.top-page .strip-flex > .itm {
  flex: 0 0 auto;
  width: clamp(18rem, calc(var(--s1) * 300), 30rem);
  margin-right: clamp(1.2rem, var(--s16), 1.6rem);
  aspect-ratio: 4 / 3;
  border-radius: var(--ks-r-s);
  overflow: hidden;
}
body.top-page .strip-flex > .itm img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.9);
}
@keyframes ks-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* ---------- COMPANY ---------- */
body.top-page section.company {
  background: var(--ks-blue-p);
}
body.top-page .company-lst {
  max-width: calc(var(--s1) * 880);
  margin: 0 auto;
  padding: 0;
  background: #FFFFFF;
  border-radius: var(--ks-r);
  overflow: hidden;
  box-shadow: var(--ks-shadow-s);
}
body.top-page .company-lst > .itm {
  display: grid;
  grid-template-columns: clamp(12rem, calc(var(--s1) * 220), 22rem) 1fr;
  border-bottom: 0.1rem solid var(--ks-line);
}
body.top-page .company-lst > .itm:last-child {
  border-bottom: none;
}
body.top-page .company-lst dt,
body.top-page .company-lst dd {
  margin: 0;
  padding: clamp(1.6rem, var(--s24), 2.4rem) clamp(1.8rem, calc(var(--s1) * 32), 3.2rem);
  font-size: clamp(1.4rem, var(--s16), 1.6rem);
  line-height: 175%;
}
body.top-page .company-lst dt {
  background: var(--ks-blue-p2);
  border-right: 0.1rem solid var(--ks-line);
  font-weight: 700;
  color: var(--ks-blue-d);
}
@media screen and (max-width: 767px) {
  body.top-page .company-lst > .itm {
    grid-template-columns: 1fr;
  }
  body.top-page .company-lst dt {
    border-right: none;
    border-bottom: 0.1rem solid var(--ks-line);
    padding-top: 1.2rem;
    padding-bottom: 1.2rem;
  }
}

/* ---------- Recruit ---------- */
body.top-page section.recruit {
  background: linear-gradient(118deg, var(--ks-blue) 0%, var(--ks-blue-d) 68%, var(--ks-blue-dd) 100%);
  color: #FFFFFF;
}
body.top-page section.recruit::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.16;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.6) 0.1rem, transparent 0.1rem),
    linear-gradient(90deg, rgba(255, 255, 255, 0.6) 0.1rem, transparent 0.1rem);
  background-size: 6rem 6rem;
  -webkit-mask-image: radial-gradient(90% 120% at 8% 20%, #000 0%, transparent 70%);
  mask-image: radial-gradient(90% 120% at 8% 20%, #000 0%, transparent 70%);
  pointer-events: none;
}
body.top-page section.recruit .sec-head .eyebrow .en {
  color: #FFFFFF;
}
body.top-page section.recruit .sec-head .eyebrow .en::before {
  background: rgba(255, 255, 255, 0.85);
}
body.top-page .rec-flex > .itm {
  flex: 1 1 0;
  min-width: 0;
}
body.top-page .rec-flex .itm1 p {
  font-size: clamp(1.4rem, calc(var(--s1) * 17), 1.7rem);
  margin: 0 0 clamp(2.4rem, calc(var(--s1) * 36), 3.6rem);
  color: rgba(255, 255, 255, 0.94);
}
body.top-page .rec-img {
  border-radius: var(--ks-r);
  overflow: hidden;
  box-shadow: 0 1.6rem 4rem rgba(0, 20, 45, 0.32);
}
body.top-page .rec-img img {
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
}

/* ---------- CONTACT ---------- */
body.top-page .contact-form {
  position: relative; /* .hp（ハニーポット）の absolute の基準 */
  max-width: calc(var(--s1) * 900);
  margin: 0 auto;
  padding: clamp(2.4rem, calc(var(--s1) * 52), 5.2rem);
  background: var(--ks-blue-p2);
  border: 0.1rem solid var(--ks-line);
  border-radius: var(--ks-r);
  box-shadow: var(--ks-shadow-s);
}
body.top-page .form-lst .row {
  display: grid;
  grid-template-columns: clamp(11rem, calc(var(--s1) * 190), 19rem) 1fr;
  gap: clamp(1.2rem, var(--s20), 2rem);
  align-items: start;
  padding: clamp(1.6rem, var(--s24), 2.4rem) 0;
  border-bottom: 0.1rem dashed var(--ks-line);
}
body.top-page .form-lst .row:first-child {
  padding-top: 0;
}
body.top-page .form-lst label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.8rem;
  padding-top: 1.2rem;
  font-size: clamp(1.3rem, var(--s14), 1.4rem);
  font-weight: 700;
  color: var(--ks-ink);
}
body.top-page .form-lst .req {
  padding: 0.3rem 0.8rem;
  border-radius: 0.4rem;
  background: var(--ks-accent-d);
  color: #FFFFFF;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}
body.top-page .contact-form input[type="text"],
body.top-page .contact-form input[type="email"],
body.top-page .contact-form input[type="tel"],
body.top-page .contact-form textarea {
  background: #FFFFFF;
  border: 0.1rem solid var(--ks-line);
  border-radius: var(--ks-r-s);
  padding: clamp(1.1rem, var(--s14), 1.4rem) clamp(1.2rem, var(--s16), 1.6rem);
  font-size: clamp(1.4rem, var(--s16), 1.6rem);
  font-family: var(--ff-g);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
body.top-page .contact-form input[type="text"]:focus,
body.top-page .contact-form input[type="email"]:focus,
body.top-page .contact-form input[type="tel"]:focus,
body.top-page .contact-form textarea:focus {
  outline: none;
  border-color: var(--ks-blue);
  box-shadow: 0 0 0 0.3rem rgba(14, 123, 209, 0.18);
}
body.top-page .contact-form textarea {
  height: clamp(14rem, calc(var(--s1) * 200), 20rem);
  line-height: 180%;
}
body.top-page .addr-flex .zip {
  max-width: clamp(14rem, calc(var(--s1) * 220), 22rem);
}
body.top-page .form-lst .note {
  margin: 0.8rem 0 0;
  font-size: clamp(1.1rem, var(--s12), 1.2rem);
  color: var(--ks-ink-m);
}

body.top-page .privacy {
  margin-top: clamp(2.4rem, calc(var(--s1) * 40), 4rem);
}
body.top-page .privacy .ttl {
  margin: 0 0 1.2rem;
  font-size: clamp(1.3rem, var(--s14), 1.4rem);
  font-weight: 700;
}
body.top-page .privacy .box {
  max-height: 16rem;
  overflow-y: auto;
  padding: clamp(1.6rem, var(--s20), 2rem);
  background: #FFFFFF;
  border: 0.1rem solid var(--ks-line);
  border-radius: var(--ks-r-s);
}
body.top-page .privacy .box p {
  margin: 0 0 1.2rem;
  font-size: clamp(1.2rem, calc(var(--s1) * 13), 1.3rem);
  line-height: 190%;
  color: var(--ks-ink-m);
}
body.top-page .privacy .box p:last-child {
  margin-bottom: 0;
}
body.top-page .privacy .agree {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin-top: clamp(1.6rem, var(--s20), 2rem);
  font-size: clamp(1.3rem, var(--s14), 1.4rem);
  font-weight: 700;
  cursor: pointer;
}
body.top-page .privacy .agree input[type="checkbox"] {
  accent-color: var(--ks-blue);
  border-color: var(--ks-line);
  background: #FFFFFF;
}
body.top-page .privacy .agree input[type="checkbox"]::before {
  border-right-color: var(--ks-blue);
  border-bottom-color: var(--ks-blue);
}
body.top-page .privacy .agree input[type="checkbox"]:focus,
body.top-page .privacy .agree input[type="checkbox"]:focus-visible {
  box-shadow: 0 0 0 0.3rem rgba(14, 123, 209, 0.28);
}
body.top-page .submit-wrap {
  margin: clamp(2.8rem, calc(var(--s1) * 44), 4.4rem) 0 0;
  text-align: center;
}

/* ---- フォーム送信（js/contact.js）関連 ---- */

/* ハニーポット：画面外に追い出す（display:none だとボットが無視するので使わない） */
body.top-page .contact-form .hp {
  position: absolute;
  left: -999rem;
  top: auto;
  width: 0.1rem;
  height: 0.1rem;
  overflow: hidden;
  opacity: 0;
}

/* 全体メッセージ（サーバーエラー・reCAPTCHA 失敗など） */
body.top-page .form-msg {
  margin: 0 0 clamp(1.6rem, var(--s24), 2.4rem);
  padding: clamp(1.2rem, var(--s14), 1.4rem) clamp(1.4rem, var(--s16), 1.6rem);
  background: #FFF3F0;
  border: 0.1rem solid #F5B9A8;
  border-radius: var(--ks-r-s);
  color: #C0392B;
  font-size: clamp(1.3rem, var(--s14), 1.4rem);
  font-weight: 700;
  line-height: 170%;
}

/* 項目ごとのエラー */
body.top-page .contact-form .err {
  margin: 0.6rem 0 0;
  font-size: clamp(1.2rem, calc(var(--s1) * 13), 1.3rem);
  font-weight: 700;
  color: #C0392B;
}
body.top-page .contact-form .is-error input[aria-invalid="true"],
body.top-page .contact-form .is-error textarea[aria-invalid="true"] {
  border-color: #E0674F;
  background: #FFF8F6;
}
body.top-page .privacy.is-error .agree {
  color: #C0392B;
}
body.top-page .privacy > .err {
  margin-top: 0.8rem;
  text-align: center;
}

/* 送信中：入力を触れなくする */
body.top-page .contact-form.is-sending input,
body.top-page .contact-form.is-sending textarea {
  opacity: 0.6;
  pointer-events: none;
}
body.top-page .contact-form .btn:disabled {
  cursor: default;
  opacity: 0.7;
  transform: none;
  box-shadow: 0 0.8rem 2rem rgba(14, 123, 209, 0.2);
}

/* プログレスバー（ボタンの下） */
body.top-page .form-progress {
  max-width: calc(var(--s1) * 420);
  margin: clamp(1.6rem, var(--s20), 2rem) auto 0;
}
body.top-page .form-progress .track {
  height: 0.8rem;
  border-radius: 0.4rem;
  background: var(--ks-blue-p);
  overflow: hidden;
}
body.top-page .form-progress .bar {
  position: relative;
  width: 0;
  height: 100%;
  border-radius: 0.4rem;
  background: linear-gradient(90deg, var(--ks-blue) 0%, var(--ks-blue-l) 100%);
  overflow: hidden;
}
/* バー上を流れるハイライト */
body.top-page .form-progress .bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0) 100%);
  transform: translateX(-100%);
  animation: ks-bar-shine 1.2s ease-in-out infinite;
}
body.top-page .form-progress.is-done .bar {
  background: linear-gradient(90deg, var(--ks-blue) 0%, var(--ks-blue-d) 100%);
}
body.top-page .form-progress.is-done .bar::after {
  animation: none;
}
body.top-page .form-progress .tx {
  margin: 0.8rem 0 0;
  font-size: clamp(1.2rem, calc(var(--s1) * 13), 1.3rem);
  font-weight: 700;
  color: var(--ks-blue-d);
  text-align: center;
}
@keyframes ks-bar-shine {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* reCAPTCHA v3：バッジを隠す代わりに規約表記を出す（Google の FAQ で許可された方式） */
body.top-page .grecaptcha-badge {
  visibility: hidden;
}
body.top-page .recaptcha-note {
  margin: clamp(1.6rem, var(--s20), 2rem) 0 0;
  font-size: clamp(1.1rem, var(--s12), 1.2rem);
  line-height: 170%;
  color: var(--ks-ink-m);
}
body.top-page .recaptcha-note a {
  text-decoration: underline;
}

/* 送信完了 */
body.top-page .form-done {
  padding: clamp(1.6rem, var(--s24), 2.4rem) 0;
  text-align: center;
}
body.top-page .form-done::before {
  content: "";
  display: block;
  width: clamp(5.6rem, calc(var(--s1) * 72), 7.2rem);
  height: clamp(5.6rem, calc(var(--s1) * 72), 7.2rem);
  margin: 0 auto clamp(1.6rem, var(--s20), 2rem);
  border-radius: 50%;
  background:
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 50% no-repeat,
    linear-gradient(135deg, var(--ks-blue) 0%, #2E9BE8 100%);
  box-shadow: 0 0.8rem 2rem rgba(14, 123, 209, 0.32);
}
body.top-page .form-done .ttl {
  margin: 0 0 clamp(1.2rem, var(--s16), 1.6rem);
  font-size: clamp(1.8rem, var(--s24), 2.4rem);
  font-weight: 700;
  color: var(--ks-blue-d);
}
body.top-page .form-done p {
  font-size: clamp(1.4rem, var(--s16), 1.6rem);
  line-height: 190%;
}
body.top-page .form-done .note {
  margin-top: clamp(1.2rem, var(--s16), 1.6rem);
  font-size: clamp(1.2rem, calc(var(--s1) * 13), 1.3rem);
  color: var(--ks-ink-m);
}

@media screen and (max-width: 767px) {
  body.top-page .form-lst .row {
    grid-template-columns: 1fr;
    gap: 0.8rem;
  }
  body.top-page .form-lst label {
    padding-top: 0;
  }
  body.top-page .submit-wrap .btn {
    width: 100%;
    padding-left: 2rem;  /* btn-lg の左右余白のままだと 390px で文言が折れる */
    padding-right: 2rem;
    white-space: nowrap;
  }
}


/* ============================================================
20) business-page（business.html → page-business.php）
============================================================= */

/* ---------- ページヘッド ---------- */
body.business-page section.page-head {
  width: 100%;
  max-width: 100%;
  display: flex;
  align-items: flex-end;
  /* min-height: clamp(30rem, calc(var(--s1) * 460), 46rem); */
  min-height: clamp(30rem, calc(var(--s1) * 700), 70rem);
  min-height: clamp(30rem, calc(var(--s1) * 500), 50rem);
  background: var(--ks-blue-dd);
  overflow: hidden;
}
body.business-page .ph-bg {
  position: absolute;
  inset: 0;
}
body.business-page .ph-bg .ph-flex {
  width: 100%;
  height: 100%;
}
body.business-page .ph-bg .itm {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
}
body.business-page .ph-bg .itm img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.72) contrast(1.05);
  transform: scale(1.06);
  animation: ks-drift 30s ease-in-out infinite alternate;
}
body.business-page .ph-bg .itm2 img {
  animation-delay: -10s;
}
body.business-page .ph-veil {
  position: absolute;
  inset: 0;
/*
  background: linear-gradient(100deg,
    rgba(8, 71, 122, 0.94) 0%,
    rgba(10, 92, 158, 0.84) 45%,
    rgba(14, 123, 209, 0.48) 100%);
*/
  background:
    linear-gradient(103deg,
      rgba(8, 71, 122, 0.94) 0%,
      rgba(10, 92, 158, 0.86) 5%,
      rgba(14, 123, 209, 0.58) 10%,
      rgba(14, 123, 209, 0.34) 15%);
}
body.business-page section.page-head > .outer {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-top: calc(var(--common_header_height) + var(--ks-sec-pd));
  padding-bottom: clamp(3.2rem, calc(var(--s1) * 56), 5.6rem);
}
body.business-page section.page-head .eyebrow {
  margin: 0;
  line-height: 1;
}
body.business-page section.page-head .eyebrow .en {
  display: inline-flex;
  align-items: center;
  gap: 1.2rem;
  font-family: var(--ff-r);
  font-size: clamp(1.2rem, var(--s14), 1.4rem);
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #FFFFFF;
}
body.business-page section.page-head .eyebrow .en::before {
  content: "";
  width: clamp(2.4rem, calc(var(--s1) * 44), 4.4rem);
  height: 0.2rem;
  border-radius: 0.2rem;
  background: rgba(255, 255, 255, 0.85);
}
body.business-page section.page-head h1 {
  margin: clamp(1.2rem, var(--s16), 1.6rem) 0 clamp(2rem, calc(var(--s1) * 32), 3.2rem);
  font-size: clamp(2.8rem, calc(var(--s1) * 52), 5.2rem);
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: 0.06em;
  text-shadow: 0 0.2rem 3rem rgba(0, 30, 60, 0.3);
}
body.business-page .bread-lst {
  margin: 0;
  padding: 0;
  font-size: clamp(1.1rem, var(--s12), 1.2rem);
  color: rgba(255, 255, 255, 0.86);
}
body.business-page .bread-lst > .itm + .itm::before {
  content: "／";
  margin-right: 1rem;
  opacity: 0.6;
}
body.business-page .bread-lst > .itm a,
body.business-page .bread-lst > .itm a:link,
body.business-page .bread-lst > .itm a:visited {
  color: #FFFFFF;
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}

/* ---------- リード ---------- */
body.business-page section.intro > .outer {
  padding-bottom: 0;
}
body.business-page .intro-panel {
  position: relative;
  max-width: calc(var(--s1) * 940);
  margin: 0 auto;
  padding: clamp(2.8rem, calc(var(--s1) * 52), 5.2rem);
  background: var(--ks-blue-p2);
  border: 0.1rem solid var(--ks-line);
  border-radius: var(--ks-r);
  box-shadow: var(--ks-shadow-s);
  text-align: center;
}
body.business-page .intro-panel::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: clamp(6rem, calc(var(--s1) * 96), 9.6rem);
  height: 0.5rem;
  border-radius: 0 0 0.5rem 0.5rem;
  background: linear-gradient(90deg, var(--ks-accent), #FFB86B);
  transform: translateX(-50%);
}
body.business-page .intro-panel h2 {
  margin: 0 0 clamp(1.6rem, var(--s24), 2.4rem);
  font-size: clamp(1.8rem, calc(var(--s1) * 30), 3rem);
  font-weight: 700;
  line-height: 150%;
  color: var(--ks-accent-d);
}
body.business-page .intro-panel p {
  margin: 0;
  font-size: clamp(1.4rem, calc(var(--s1) * 16), 1.6rem);
  text-align: left;
  color: var(--ks-ink);
}

/* ---------- 施工事例 ---------- */
body.business-page section.works {
  background: transparent;
}
body.business-page .works-lst {
  margin: 0;
  padding: 0;
}
body.business-page .works-lst > .itm {
  background: #FFFFFF;
  border: 0.1rem solid var(--ks-line);
  border-radius: var(--ks-r);
  overflow: hidden;
  box-shadow: var(--ks-shadow-s);
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.3, 1),
              box-shadow 0.45s cubic-bezier(0.2, 0.7, 0.3, 1);
}
body.business-page .works-lst > .itm:hover {
  transform: translateY(-0.6rem);
  box-shadow: var(--ks-shadow);
}
body.business-page .works-lst .ph {
  overflow: hidden;
  background: var(--ks-blue-p);
}
body.business-page .works-lst .ph img {
  transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.3, 1);
}
body.business-page .works-lst > .itm:hover .ph img {
  transform: scale(1.07);
}
body.business-page .works-lst .cap {
  margin: 0;
  padding: clamp(1.6rem, var(--s20), 2rem) clamp(1.6rem, var(--s20), 2rem) clamp(2rem, var(--s24), 2.4rem);
  font-size: clamp(1.4rem, var(--s16), 1.6rem);
  font-weight: 700;
  line-height: 160%;
  color: var(--ks-ink);
}
body.business-page .works-lst .cap .sub {
  display: block;
  margin-top: 0.4rem;
  font-size: clamp(1.2rem, calc(var(--s1) * 13), 1.3rem);
  font-weight: 400;
  color: var(--ks-ink-m);
}
body.business-page .works-lst .cap .note {
  display: block;
  margin-top: 0.6rem;
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--ks-accent-d);
}

/* ---------- 機械紹介 ---------- */
body.business-page section.machine {
  background: var(--ks-blue-p);
}
body.business-page .machine-lst {
  margin: 0;
  padding: 0;
}
body.business-page .machine-lst > .itm {
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border: 0.1rem solid var(--ks-line);
  border-radius: var(--ks-r);
  overflow: hidden;
  box-shadow: var(--ks-shadow-s);
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.3, 1),
              box-shadow 0.45s cubic-bezier(0.2, 0.7, 0.3, 1);
}
body.business-page .machine-lst > .itm:hover {
  transform: translateY(-0.6rem);
  box-shadow: var(--ks-shadow);
}
body.business-page .machine-lst .ph {
  overflow: hidden;
  background: #EDF2F6;
}
body.business-page .machine-lst .ph img {
  transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.3, 1);
}
body.business-page .machine-lst > .itm:hover .ph img {
  transform: scale(1.07);
}
body.business-page .machine-lst .txt {
  flex: 1 1 auto;
  padding: clamp(1.8rem, var(--s24), 2.4rem);
}
body.business-page .machine-lst h3 {
  margin: 0 0 clamp(1.2rem, var(--s16), 1.6rem);
  font-size: clamp(1.4rem, calc(var(--s1) * 17), 1.7rem);
  font-weight: 700;
  line-height: 150%;
  color: var(--ks-blue-d);
}
body.business-page .machine-lst .spec {
  margin: 0;
  padding: 0;
}
body.business-page .machine-lst .spec .rw {
  display: grid;
  grid-template-columns: 3.6em 1fr;
  gap: 0.8rem;
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 0.1rem dashed var(--ks-line);
}
body.business-page .machine-lst .spec dt,
body.business-page .machine-lst .spec dd {
  margin: 0;
  font-size: clamp(1.2rem, calc(var(--s1) * 13), 1.3rem);
  line-height: 180%;
}
body.business-page .machine-lst .spec dt {
  font-weight: 700;
  color: var(--ks-blue);
}
body.business-page .machine-lst .spec dd {
  color: var(--ks-ink-m);
}

/* ---------- CTA ---------- */
body.business-page section.cta > .outer {
  /* 直前の machine セクション（淡ブルー）とパネルが接して詰まって見えるため、
     他セクションと同じ上下リズム（--ks-sec-pd）を持たせる */
  padding-top: var(--ks-sec-pd);
}
body.business-page .cta-panel {
  position: relative;
  overflow: hidden;
  padding: clamp(3.6rem, calc(var(--s1) * 72), 7.2rem) clamp(2.4rem, calc(var(--s1) * 48), 4.8rem);
  border-radius: clamp(1.6rem, calc(var(--s1) * 28), 2.8rem);
  background: linear-gradient(118deg, var(--ks-blue) 0%, var(--ks-blue-d) 68%, var(--ks-blue-dd) 100%);
  box-shadow: 0 1.6rem 4.4rem rgba(10, 76, 130, 0.28);
  color: #FFFFFF;
  text-align: center;
}
body.business-page .cta-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.16;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.6) 0.1rem, transparent 0.1rem),
    linear-gradient(90deg, rgba(255, 255, 255, 0.6) 0.1rem, transparent 0.1rem);
  background-size: 5rem 5rem;
  -webkit-mask-image: radial-gradient(80% 120% at 12% 10%, #000 0%, transparent 68%);
  mask-image: radial-gradient(80% 120% at 12% 10%, #000 0%, transparent 68%);
  pointer-events: none;
}
body.business-page .cta-panel > * {
  position: relative;
  z-index: 1;
}
body.business-page .cta-panel .eyebrow {
  margin: 0;
  line-height: 1;
}
body.business-page .cta-panel .eyebrow .en {
  font-family: var(--ff-r);
  font-size: clamp(1.2rem, var(--s14), 1.4rem);
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
}
body.business-page .cta-panel h2 {
  margin: clamp(1.2rem, var(--s16), 1.6rem) 0 clamp(1.6rem, var(--s24), 2.4rem);
  font-size: clamp(2.2rem, calc(var(--s1) * 40), 4rem);
  font-weight: 700;
  line-height: 145%;
}
body.business-page .cta-panel p {
  margin: 0;
  font-size: clamp(1.3rem, calc(var(--s1) * 16), 1.6rem);
  color: rgba(255, 255, 255, 0.94);
}
body.business-page .cta-panel .btn-wrap {
  margin: clamp(2.8rem, calc(var(--s1) * 44), 4.4rem) 0 0;
}
@media screen and (max-width: 767px) {
  body.business-page .cta-panel .btn {
    width: 100%;
  }
}