/*
 * ======================================
 * 追加クラス一覧（共通SCSS取り込み検討用）
 * ======================================
 *
 * .hk-sec-140 / -128 / -112 / -100   - clamp()による可変セクション余白
 * .hk-bg-gray                         - うっすらグレー（白に近い）のセクション背景
 * .hk-heading (--white / --lead / --sm / --accent / --center) - 大きな英字（紺→青グラデ）＋日本語の左揃え見出し
 * .hk-ttl                             - 下層の日本語のみの小見出し（紺）
 * .hk-btn (--solid / --line)          - 直角・右矢印付きのボタン（ホバー：オレンジ or 紺）
 * .hk-arrow                           - ボタン内の右矢印SVG
 * .hk-header / -tel / .hk-logo-text / .hk-spnav-tel - ヘッダー差分（紺のメニューボタン・電話2段表示）
 * .sp-fixed-bar（hk-fixed-bar）       - 1100px以下の画面下固定ボタン（電話・メール）
 * .hk-footer                          - フッター差分（温白背景・2列ナビ・紺のコピーライト帯）
 * .hk-cta                             - お問い合わせCTA（電話枠＋MAIL FORMボタン）
 * .hk-hero                            - 下層ヒーロー（左濃→右薄の紺グラデ暗幕・＞区切りパンくず）
 * .hk-mv                              - TOPメインビジュアル（#slideshow の高さ・中央キャッチ）
 * .hk-news / .hk-news-list          - お知らせ（一覧）
 * .hk-tri-deco                       - 斜めグラデの三角装飾（右下配置：TOP採用の背景）
 * [data-aos]（AOS）                    - TOPの軽いフェードアップ（./aos/ を全ページで読み込み。ホバー透過の再指定・動きを減らす設定に対応）
 * .hk-about                           - 企業紹介（石垣島シルエットのマスク装飾）
 * .hk-sec-head                        - 見出し＋右端ボタンの見出し行
 * .hk-svc-card                        - 事業内容カード（写真＋下線付きタイトル行）
 * .hk-works-bnr                       - 施工実績バナー（全面写真＋右側紺パネル）
 * .hk-recruit                         - TOP採用（写真＋テキスト）
 * .hk-message                         - 代表挨拶（写真の右下に紺ブロックをずらし重ね）
 * .hk-company / .hk-table / .hk-history - 会社概要の表・沿革タイムライン
 * .hk-health / .hk-cert               - 健康経営（認定ボックス・証書の重ね配置）
 * .hk-map                             - Googleマップ
 * .hk-svc-layout / .hk-svc-nav / .hk-svc - 事業内容（追従サイド目次・写真下リード帯・タグ）
 * .hk-works / .hk-work-card / .hk-lb  - 施工実績（タブ・カード・写真ビューア）
 * .hk-recruit-intro / .hk-req         - 採用情報（写真＋テキスト横並びの見出し・オレンジ線・募集要項表）
 * .hk-contact / .hk-cms-form          - お問い合わせ（電話ボックス・CMSフォームのデザイン上書き）
 *
 * ======================================
 * 共通SCSSに不足していたもの
 * ======================================
 *
 * 値の粒度不足：
 *   - section の余白が固定値（120/60px）のみ。clamp()による可変余白がない
 *   - container の左右余白が 1320px 以下でしか付かない（常時 clamp(20px,4vw,40px) が必要）
 *   - body の文字サイズが tablet 14px / SP 12px 固定（本案件は SP 15px）
 * 構造不足：
 *   - heading-big--gradient が base→sub の2色固定（任意グラデーション指定不可）
 *   - 下層ヒーローで「大きな英字＋小さな日本語＋パンくず」を左下に置く型がない
 *   - 写真の下部にテキスト帯を重ねる型（事業内容のリード見出し）がない
 *   - 表の行が SP で自然に折り返す dl 型のテーブルがない
 * 装飾パターン不足：
 *   - 角丸なし・右矢印付きで両端揃えの直角ボタンがない（.btn は角丸・中央揃え）
 *   - 画像マスク（mask-image）でシルエットを敷く装飾がない
 *   - セクション右上の斜めグラデーション三角がない
 *   - 写真に紺ブロックをずらして重ねる装飾がない
 * 状態不足：
 *   - 重なった画像をホバーで前面に出す（z-index 切替）utility がない
 *
 */

/* ==========================================================================
   Base（本案件の本文サイズ：PC 16px / SP 15px）
   ========================================================================== */
body {
  font-size: 1.5rem;
  line-height: 1.9;
}
@media (min-width: 1024px) {
  body { font-size: 1.6rem; }
}
a:hover { color: #0b3d8f; }

.container {
  max-width: 1300px;
  padding-left: clamp(20px, 4vw, 40px);
  padding-right: clamp(20px, 4vw, 40px);
}
.container-narrow {
  max-width: 880px;
  margin: 0 auto;
  padding-left: clamp(20px, 4vw, 40px);
  padding-right: clamp(20px, 4vw, 40px);
}

/* セクション余白（clamp） */
.hk-sec-140 { padding: clamp(72px, 10vw, 140px) 0; }
.hk-sec-128 { padding: clamp(72px, 9vw, 128px) 0; }
.hk-sec-112 { padding: clamp(64px, 8vw, 112px) 0; }
.hk-sec-100 { padding: clamp(56px, 7vw, 100px) 0; }
/* うっすらグレー（白に近い）のセクション背景 */
.hk-bg-gray { background: #f6f7f9; }

/* 本文の共通サイズ */
.hk-text {
  font-size: clamp(15px, 1.25vw, 16px);
  line-height: 2.1;
}

/* ==========================================================================
   見出し
   ========================================================================== */
.hk-heading {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hk-heading .heading__en {
  align-self: flex-start;
  padding-bottom: .05em;
  font-size: clamp(38px, 5vw, 64px);
  line-height: .95;
  letter-spacing: 0;
  color: #042966;
  background: linear-gradient(100deg, #042966 0%, #0b4fa8 60%, #2f7fd0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hk-heading .heading__ja {
  margin-top: 0;
  font-size: clamp(18px, 1.6vw, 21px);
  font-weight: 700;
  line-height: 1.9;
  letter-spacing: .14em;
  color: inherit;
}
/* 白文字（紺背景・写真上） */
.hk-heading--white .heading__en {
  letter-spacing: .02em;
  color: #fefefe;
  background: none;
  -webkit-text-fill-color: currentColor;
}
.hk-heading--white .heading__ja { color: #fefefe; }
/* 大きめの日本語見出し（TOP採用） */
.hk-heading--lead { gap: clamp(20px, 2.4vw, 28px); }
.hk-heading--lead .heading__ja {
  font-size: clamp(20px, 2.4vw, 30px);
  text-wrap: balance;
  word-break: auto-phrase;
  line-height: 1.6;
  letter-spacing: .08em;
  color: #042966;
}
/* 小さな英字＋日本語（募集要項・フォーム・ENTRY） */
.hk-heading--sm .heading__en {
  font-size: 13px;
  line-height: 1.9;
  letter-spacing: .26em;
  padding-bottom: 0;
  color: #042966;
  background: none;
  -webkit-text-fill-color: currentColor;
}
.hk-heading--sm .heading__ja {
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.9;
  letter-spacing: .1em;
  color: #042966;
}
.hk-heading--accent .heading__en { color: #FF2B00; }
.hk-heading--accent .heading__ja { color: #fefefe; }
.hk-heading--center {
  align-items: center;
  text-align: center;
}
.hk-heading--center .heading__en { align-self: center; }

/* 下層の日本語のみ見出し */
.hk-ttl {
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 700;
  line-height: 1.9;
  letter-spacing: .1em;
  color: #042966;
}

/* ==========================================================================
   ボタン
   ========================================================================== */
.hk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-width: min(100%, 260px);
  height: 56px;
  padding: 0 28px;
  border: 1px solid #042966;
  background: #fefefe;
  color: #042966;
  font-size: clamp(15px, 1.25vw, 16px);
  font-weight: 700;
  letter-spacing: .12em;
  transition: background .2s, color .2s, border-color .2s;
}
.hk-btn:hover {
  background: #FF2B00;
  border-color: #FF2B00;
  color: #fefefe;
  opacity: 1;
}
.hk-btn--solid {
  min-width: min(100%, 300px);
  height: 60px;
  background: #042966;
  color: #fefefe;
}
.hk-btn--line {
  min-width: 260px;
  min-height: 56px;
  height: auto;
  padding: 0 26px;
  gap: 20px;
  border-width: 1.5px;
  letter-spacing: .1em;
}
.hk-btn--line:hover {
  background: #042966;
  border-color: #042966;
}
.hk-arrow { flex: none; }

/* ==========================================================================
   ヘッダー
   ========================================================================== */
.hk-header {
  position: sticky;
  top: 0;
  background: rgba(254, 254, 254, .97);
  border-bottom: 1px solid #e3e7ee;
  box-shadow: none;
}
.hk-header .header__inner {
  max-width: 1320px;
  height: clamp(64px, 7vw, 88px);
  padding: 0 clamp(16px, 3vw, 40px);
  gap: 24px;
}
.hk-header .header__logo,
.hk-footer .footer-body__logo {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
}
.hk-header .header__logo img,
.hk-footer .footer-body__logo img {
  display: block;
  width: auto;
  height: clamp(36px, 3.6vw, 46px);
}
.hk-logo-text {
  font-weight: 700;
  font-size: clamp(21px, 1.6vw, 27px);
  line-height: 1.2;
  letter-spacing: .08em;
  color: #042966;
}
/* 項目padding 13px + inner gap 24px − 9px = 電話との間 28px */
.hk-header .header__nav { margin-right: -9px; }
.hk-header .header__nav-item a {
  padding: 6px 13px;
  line-height: 1.3;
}
.hk-header .header__nav-item a::after { display: none; }
.hk-header .header__nav-en {
  font-size: 10px;
  line-height: 1.3;
  letter-spacing: .2em;
}
.hk-header .header__nav-ja {
  margin-top: 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .1em;
  color: #1d2433;
  transition: color .3s;
}
.hk-header .header__nav-item a:hover .header__nav-ja { color: #042966; }
.hk-header .header__right {
  height: auto;
  padding-left: 24px;
  border-left: 1px solid #e3e7ee;
}
.hk-header-tel {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.hk-header-tel:hover { opacity: 1; }
.hk-header-tel__num {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: "Barlow", sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: .04em;
  color: #042966;
}
.hk-header-tel__time {
  font-size: 11px;
  letter-spacing: .06em;
  color: #4a5468;
}

/* ハンバーガー（紺の正方形） */
.nav-toggle {
  top: calc((clamp(64px, 7vw, 88px) - 48px) / 2);
  right: clamp(16px, 3vw, 40px);
  width: 48px;
  height: 48px;
  background: #042966;
  border-radius: 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.nav-toggle__line {
  width: 20px;
  background: #fefefe;
}
.nav-toggle__line:nth-child(1) { top: 16px; }
.nav-toggle__line:nth-child(2) { top: 23px; }
.nav-toggle__line:nth-child(3) { top: 30px; }
.nav-toggle.is-active .nav-toggle__line:nth-child(1),
.nav-toggle.is-active .nav-toggle__line:nth-child(3) { top: 23px; }

/* SPメニュー（ヘッダー下の全画面・紺） */
.sp-nav {
  top: clamp(64px, 7vw, 88px);
  background: #042966;
  align-items: stretch;
  justify-content: flex-start;
  gap: 28px;
  padding: 24px 24px 40px;
}
.sp-nav__list {
  max-width: none;
  text-align: left;
}
.sp-nav__item { border-bottom: 1px solid rgba(254, 254, 254, .18); }
.sp-nav__item:first-child { border-top: 0; }
.sp-nav__link {
  align-items: baseline;
  padding: 18px 4px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .1em;
}
.sp-nav__link::after { display: none; }
.sp-nav__link:hover {
  background: none;
  color: #fefefe;
}
.sp-nav__en {
  margin-left: auto;
  margin-right: 0;
  padding-left: 12px;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .2em;
  color: #FF2B00;
  opacity: 1;
}
.sp-nav__bottom {
  max-width: none;
  margin-top: 0;
}
.hk-spnav-tel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 18px;
  border: 1px solid rgba(254, 254, 254, .4);
  color: #fefefe;
}
.hk-spnav-tel:hover { color: #fefefe; }
.hk-spnav-tel__num {
  font-family: "Barlow", sans-serif;
  font-weight: 700;
  font-size: 26px;
  line-height: 1.5;
  letter-spacing: .04em;
}
.hk-spnav-tel__time { font-size: 12px; }

/* ==========================================================================
   フッター
   ========================================================================== */
/* レイアウト：ロゴ・会社情報・ナビをすべて中央に縦積み（ナビは区切り線の下に横並び） */
.hk-footer .footer-body {
  padding: 0;
  background: #f3f3f3;
  border-top: 1px solid #e3e7ee;
}
.hk-footer .footer-body__inner {
  max-width: 1300px;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: clamp(56px, 6vw, 88px) clamp(20px, 4vw, 40px) clamp(48px, 5vw, 72px);
  text-align: center;
}
.hk-footer .footer-body__left {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(20px, 2.4vw, 32px);
  width: 100%;
}
.hk-footer .footer-body__logo {
  align-self: center;
  margin-bottom: 0;
}
.hk-footer .footer-body__info {
  margin-bottom: 0;
  font-size: 15px;
  line-height: 2.1;
  color: #1d2433;
}
.hk-footer .footer-body__info a { font-weight: 700; }
.hk-footer .footer-body__hours { margin-left: 1.6em; }
/* ナビ：上に区切り線、項目は縦線で区切って横並び */
.hk-footer .footer-body__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;
  width: 100%;
  margin-top: clamp(32px, 3.4vw, 44px);
  padding-top: clamp(24px, 2.6vw, 32px);
  border-top: 1px solid #dcdcdc;
}
.hk-footer .footer-body__nav-item + .footer-body__nav-item { border-left: 1px solid #dcdcdc; }
.hk-footer .footer-body__nav-item a {
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 0 clamp(20px, 2.4vw, 36px);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .08em;
  color: #1d2433;
}
.hk-footer .footer-body__nav-item a:hover { color: #042966; }
.hk-footer .footer-bottom {
  padding: 16px;
  background: #042966;
  color: #fefefe;
  text-align: center;
}
.hk-footer .footer-bottom__copyright {
  color: #fefefe;
  font-family: "Barlow", sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .14em;
}

/* ==========================================================================
   お問い合わせCTA
   ========================================================================== */
.hk-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(28px, 4vw, 56px);
}
.hk-cta__head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1 1 380px;
}
.hk-cta__lead {
  margin-top: 8px;
  font-size: clamp(15px, 1.25vw, 16px);
  line-height: 2;
}
.hk-heading--sm + .hk-cta__lead { margin-top: 0; }
.hk-cta__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  flex: 1 1 480px;
}
.hk-cta__tel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex: 1 1 260px;
  padding: 22px 26px;
  border: 1px solid rgba(254, 254, 254, .45);
  color: #fefefe;
  transition: background .2s;
}
.hk-cta__tel:hover {
  background: #021a45;
  color: #fefefe;
  opacity: 1;
}
.hk-cta__num {
  font-family: "Barlow", sans-serif;
  font-weight: 700;
  font-size: clamp(26px, 2.6vw, 30px);
  line-height: 1.2;
  letter-spacing: .04em;
}
.hk-cta__time {
  font-size: 12px;
  letter-spacing: .06em;
}
.hk-cta__mail {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex: 1 1 220px;
  min-height: 96px;
  padding: 22px 26px;
  background: #fefefe;
  color: #042966;
  font-size: clamp(15px, 1.25vw, 16px);
  font-weight: 700;
  letter-spacing: 0;
  transition: background .2s, color .2s;
}
.hk-cta__mail:hover {
  background: #FF2B00;
  color: #fefefe;
  opacity: 1;
}
.hk-cta__tel-body,
.hk-cta__mail-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ==========================================================================
   下層ページヒーロー
   ========================================================================== */
.hk-hero {
  background: #042966;
  color: #fefefe;
}
.hk-hero .page-hero__overlay.hk-hero__overlay {
  background: linear-gradient(90deg, rgba(2, 22, 58, .78) 0%, rgba(2, 22, 58, .5) 60%, rgba(2, 22, 58, .35) 100%);
}
.hk-hero__inner {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  padding-top: clamp(80px, 10vw, 150px);
  padding-bottom: clamp(48px, 6vw, 80px);
}
.hk-hero .hk-hero__en {
  font-size: clamp(48px, 7vw, 96px);
  line-height: .95;
  letter-spacing: 0;
  color: #fefefe;
}
.hk-hero .hk-hero__ja {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.9;
  letter-spacing: .14em;
}
.hk-hero__breadcrumb {
  margin-top: 20px;
  padding: 0;
  font-size: 12px;
}
.hk-hero__breadcrumb .breadcrumb__item:not(:last-child)::after {
  content: "＞";
  margin: 0 10px;
  color: #fefefe;
}
.hk-hero__breadcrumb .breadcrumb__link,
.hk-hero__breadcrumb .breadcrumb__link:hover {
  color: #fefefe;
  text-decoration: underline;
}
.hk-hero__breadcrumb .breadcrumb__current { color: #fefefe; }

/* ==========================================================================
   TOP：メインビジュアル
   ========================================================================== */
.hk-mv {
  position: relative;
  overflow: hidden;
  background: #042966;
}
.hk-mv #slideshow {
  position: relative;
  height: calc(100vh - clamp(64px, 7vw, 88px));
  height: calc(100svh - clamp(64px, 7vw, 88px));
  min-height: 520px;
  overflow: hidden;
  z-index: 0; /* CMSスライダー内のz-indexをこの中に閉じ込める */
  background: #dde3ec;
}
/* キャッチ側（左）に斜めの紺レイヤーを2層：::before＝外側の薄い層、::after＝内側の濃い層 */
.hk-mv::before,
.hk-mv::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.hk-mv::before {
  background: rgba(4, 41, 102, .35);
  clip-path: polygon(0 0, 52% 0, 40% 100%, 0 100%);
}
.hk-mv::after {
  background: rgba(4, 41, 102, .45);
  clip-path: polygon(0 0, 40% 0, 28% 100%, 0 100%);
}
/* タブレット・スマホ：キャッチが横に広がるので層も広げる */
@media (max-width: 896px) {
  .hk-mv::before { clip-path: polygon(0 0, 92% 0, 72% 100%, 0 100%); }
  .hk-mv::after  { clip-path: polygon(0 0, 66% 0, 46% 100%, 0 100%); }
}
/* CMSスライダー：高さはCMS側の変数 --swiper-wrapper-height で決まるため、#slideshow いっぱいに指定 */
.hk-mv #cms-slider-1-1-area { height: 100%; }
.hk-mv #main_slider.slider_wrapper { --swiper-wrapper-height: 100%; }
.hk-mv__content {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: clamp(18px, 2.2vw, 28px);
  /* 左下配置（左端は画面端から最大72px） */
  padding: 0 clamp(20px, 4vw, 40px) clamp(56px, 8vw, 112px) clamp(20px, 5vw, 72px);
  text-align: left;
  color: #fefefe;
  text-shadow: 0 2px 16px rgba(2, 22, 58, .5);
  pointer-events: none;
}
.hk-mv__catch {
  font-weight: 700;
  /* 3行固定：最長行（8文字＋字間）が画面幅に収まるサイズ */
  font-size: clamp(24px, calc((100vw - 40px) / 9.4), 55px);
  white-space: nowrap;
  line-height: 1.5;
  letter-spacing: .1em;
}
.hk-mv__lead {
  font-size: clamp(14px, 1.3vw, 20px);
  line-height: 2;
  letter-spacing: .06em;
}

/* ==========================================================================
   TOP：お知らせ
   ========================================================================== */
/* 斜めグラデーションの三角（右下配置：TOP採用セクションの背景） */
.hk-tri-deco {
  position: absolute;
  right: 0;
  bottom: 0;
  width: min(32vw, 440px);
  height: 72%;
  /* 英字見出しと同じ紺→青→水色のグラデーション */
  background: linear-gradient(315deg, #042966 0%, #0b4fa8 55%, #2f7fd0 100%);
  opacity: .14;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  pointer-events: none;
}
.hk-news {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(28px, 5vw, 72px);
}
.hk-news__head { flex: 1 1 240px; }
.hk-news__body { flex: 999 1 560px; }
/* 2件分の高さで表示し、3件目以降はスクロール（高さは js/top.js で実測して上書き） */
.hk-news-list {
  max-height: 167px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-top: 1px solid #042966;
  scrollbar-width: thin;
  scrollbar-color: #042966 #e6e9ef;
}
.hk-news-list::-webkit-scrollbar { width: 4px; }
.hk-news-list::-webkit-scrollbar-track { background: #e6e9ef; }
.hk-news-list::-webkit-scrollbar-thumb { background: #042966; }
.hk-news-list__area { display: block; }
@media (max-width: 639px) {
  .hk-news-list { max-height: 231px; }
}
.hk-news-list .blog-list__item { border-bottom: 1px solid #dfe3ea; }
.hk-news-list .blog-list__link {
  flex-wrap: wrap;
  gap: 6px 32px;
  padding: 26px 0;
  color: #1d2433;
}
.hk-news-list .blog-list__link:hover { background: none; }
.hk-news-list .blog-list__date {
  flex: 0 0 110px;
  font-weight: 600;
  font-size: clamp(15px, 1.25vw, 16px);
  line-height: 1.8;
  letter-spacing: .06em;
}
.hk-news-list .blog-list__title {
  flex: 1 1 320px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.8;
}

/* ==========================================================================
   TOP：企業紹介
   ========================================================================== */
.hk-about {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(32px, 6vw, 96px);
}
.hk-about__head {
  position: relative;
  flex: 1 1 380px;
}
.hk-about__map {
  position: absolute;
  top: 50%;
  left: clamp(40px, 10vw, 160px);
  width: clamp(260px, 30vw, 440px);
  aspect-ratio: 460 / 575;
  transform: translateY(-50%);
  background: #042966;
  opacity: .08;
  -webkit-mask: url(https://ros-cdn.s3.ap-northeast-1.amazonaws.com/hp/img/ros_keiyaku/28757/ishigakimap.png) center / contain no-repeat;
  mask: url(https://ros-cdn.s3.ap-northeast-1.amazonaws.com/hp/img/ros_keiyaku/28757/ishigakimap.png) center / contain no-repeat;
  pointer-events: none;
}
/* セクションタイトル「私たちについて」（短い紺線＋日本語） */
.hk-about__label {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: clamp(16px, 2vw, 24px);
  font-size: clamp(18px, 1.6vw, 21px);
  font-weight: 700;
  line-height: 1.9;
  letter-spacing: .14em;
}
.hk-about__label::before {
  content: "";
  width: 32px;
  height: 2px;
  background: #042966;
}
.hk-about__title {
  position: relative;
  font-weight: 700;
  font-size: clamp(26px, 3.2vw, 40px);
  line-height: 1.6;
  letter-spacing: .08em;
  color: #042966;
}
.hk-about__text {
  flex: 1 1 440px;
  padding-top: clamp(0px, 3vw, 44px);
  font-size: clamp(15px, 1.25vw, 16px);
  line-height: 2.15;
}

/* ==========================================================================
   TOP：事業内容
   ========================================================================== */
.hk-sec-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: clamp(36px, 4.4vw, 56px);
}
.hk-svc-grid { gap: clamp(24px, 3vw, 40px); }
.hk-svc-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  color: #1d2433;
}
.hk-svc-card:hover { color: #1d2433; }
.hk-svc-card__img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: #dde3ec;
}
.hk-svc-card__head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid #042966;
  color: #042966;
}
.hk-svc-card__head .hk-arrow { margin-left: auto; }
.hk-svc-card__title {
  font-size: clamp(19px, 1.7vw, 22px);
  font-weight: 700;
  line-height: 1.9;
  letter-spacing: .1em;
}
.hk-svc-card__en {
  font-family: "Barlow", sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .2em;
  color: #4a5468;
}
.hk-svc-card__text {
  font-size: clamp(15px, 1.25vw, 16px);
  line-height: 2;
}

/* ==========================================================================
   TOP：施工実績バナー
   ========================================================================== */
.hk-works-bnr {
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
  min-height: clamp(240px, 26vw, 340px);
  overflow: hidden;
  background: #042966;
  color: #fefefe;
}
.hk-works-bnr:hover {
  color: #fefefe;
  opacity: .94;
}
/* 画像は左側（パネルの手前まで）だけに表示 */
.hk-works-bnr__img {
  display: block;
  flex: 1 1 0;
  min-width: 0;
  width: 100%;
  object-fit: cover;
}
.hk-works-bnr__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  flex: 0 0 min(100%, 560px);
  padding: clamp(28px, 4vw, 52px) clamp(24px, 4vw, 56px);
  background: #042966;
  font-size: clamp(15px, 1.25vw, 16px);
}
/* SP：画像を上、パネルを下に縦積み */
@media (max-width: 896px) {
  .hk-works-bnr { flex-direction: column; }
  .hk-works-bnr__img {
    flex: none;
    aspect-ratio: 16 / 9;
  }
  .hk-works-bnr__panel { flex: none; }
}
.hk-works-bnr__panel .hk-heading { gap: 14px; }
.hk-works-bnr__more {
  display: flex;
  align-items: center;
  gap: 18px;
  align-self: flex-start;
  margin-top: 10px;
  padding-bottom: 6px;
  border-bottom: 2px solid #FF2B00;
  font-weight: 700;
  letter-spacing: .12em;
}

/* ==========================================================================
   TOP：採用情報
   ========================================================================== */
.hk-recruit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(32px, 5vw, 80px);
}
.hk-recruit__img {
  display: block;
  flex: 1 1 440px;
  min-width: 0;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.hk-recruit__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(20px, 2.4vw, 28px);
  flex: 1 1 400px;
}
.hk-recruit__body .hk-heading { align-self: stretch; }
.hk-recruit__text {
  font-size: clamp(15px, 1.25vw, 16px);
  line-height: 2.1;
}

/* ==========================================================================
   会社概要：代表挨拶
   ========================================================================== */
.hk-message {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(40px, 6vw, 88px);
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
}
.hk-message__photo {
  position: relative;
  flex: 0 1 360px;
  min-width: min(100%, 260px);
  padding: 0 clamp(14px, 1.6vw, 22px) clamp(14px, 1.6vw, 22px) 0;
}
.hk-message__photo::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 78%;
  height: 78%;
  background: #042966;
}
.hk-message__photo img {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
}
.hk-message__body {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 2.8vw, 36px);
  flex: 1 1 440px;
}
.hk-message__lead {
  font-weight: 700;
  font-size: clamp(24px, 2.8vw, 32px);
  line-height: 1.6;
  letter-spacing: .1em;
  color: #042966;
}
.hk-message__text.sentence p + p { margin-top: 18px; }
.hk-message__sign {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 16px;
}
.hk-message__sign::before {
  content: "";
  align-self: center;
  width: 40px;
  height: 1px;
  background: #042966;
}
.hk-message__role {
  font-size: 13px;
  letter-spacing: .08em;
  color: #4a5468;
}
.hk-message__name {
  font-size: clamp(20px, 2vw, 24px);
  font-weight: 700;
  letter-spacing: .2em;
}

/* ==========================================================================
   会社概要：表・沿革
   ========================================================================== */
.hk-company {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: clamp(48px, 5vw, 72px);
  margin-top: 28px;
}
.hk-company__table { flex: 1.5 1 520px; }
.hk-company__history {
  position: sticky;
  top: clamp(84px, 8vw, 110px);
  flex: 1 1 340px;
}
@media (max-width: 896px) {
  .hk-company__history { position: static; }
}

/* dl型テーブル（SPで自然に折り返す） */
.hk-table {
  background: #fefefe;
  border-top: 2px solid #042966;
}
.hk-table__row {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid #dfe3ea;
}
.hk-table__th {
  flex: 1 1 130px;
  max-width: 100%;
  padding: 16px 20px;
  background: #eef1f6;
  font-size: 14px;
  font-weight: 700;
  color: #042966;
}
.hk-table__td {
  flex: 999 1 300px;
  padding: 16px 20px;
  font-size: 15px;
  line-height: 1.9;
}
/* 募集要項（紺の見出しセル） */
.hk-table--navy .hk-table__th {
  flex: 1 1 180px;
  padding: 18px 24px;
  background: #042966;
  border-bottom: 1px solid #1a3d78;
  font-size: clamp(15px, 1.25vw, 16px);
  color: #fefefe;
}
.hk-table--navy .hk-table__td {
  flex: 999 1 400px;
  padding: 18px 24px;
  font-size: clamp(15px, 1.25vw, 16px);
}

.hk-history__ttl {
  padding: 18px clamp(24px, 2.6vw, 32px);
  background: #042966;
  color: #fefefe;
  font-size: clamp(19px, 1.8vw, 22px);
  font-weight: 700;
  line-height: 1.9;
  letter-spacing: .2em;
}
.hk-history__list {
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 2.6vw, 32px);
  background: #fefefe;
  border: 1px solid #dfe3ea;
  border-top: 0;
}
.hk-history__item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 0 28px 24px;
  border-left: 1px solid #c9d0db;
}
.hk-history__item::before {
  content: "";
  position: absolute;
  top: 6px;
  left: -5px;
  width: 9px;
  height: 9px;
  background: #042966;
}
.hk-history__date {
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: #042966;
}
.hk-history__year {
  font-family: "Barlow", sans-serif;
  font-weight: 700;
  font-size: 26px;
  line-height: 1;
}
.hk-history__wareki {
  font-size: 13px;
  font-weight: 700;
}
.hk-history__text {
  font-size: 14px;
  line-height: 1.9;
}

/* ==========================================================================
   会社概要：健康経営
   ========================================================================== */
.hk-sec-health { padding: clamp(56px, 7vw, 100px) 0 clamp(72px, 9vw, 128px); }
.hk-health {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(40px, 6vw, 96px);
}
.hk-health__body {
  display: flex;
  flex-direction: column;
  gap: 22px;
  flex: 1 1 420px;
}
.hk-health__ttl {
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .1em;
  color: #042966;
}
.hk-health__certs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: 6px;
  background: #042966;
  border: 1px solid #042966;
}
.hk-health__cert {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 20px;
  background: #fefefe;
  color: #042966;
}
.hk-health__date {
  font-family: "Barlow", sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .06em;
}
.hk-health__name {
  /* 「うちなー健康経営宣言」（10文字）が1行に収まるサイズ */
  font-size: clamp(16px, 1.45vw, 21px);
  white-space: nowrap;
  font-weight: 700;
  line-height: 1.4;
}
@media (max-width: 639px) {
  .hk-health__certs { grid-template-columns: 1fr; }
}
.hk-cert {
  position: relative;
  flex: 1 1 360px;
  /* 証書（幅57%・縦横比1:1.415）2枚を上下にずらして重ねる高さを、幅に比例して確保 */
  aspect-ratio: 100 / 105;
}
.hk-cert__item {
  position: absolute;
  z-index: 1;
  width: 57%;
  aspect-ratio: 1000 / 1415;
  background: #fefefe;
  border: 1px solid #d9dde4;
  box-shadow: 0 14px 36px rgba(4, 41, 102, .18);
  transition: box-shadow .25s;
}
.hk-cert__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.hk-cert__item--front {
  top: 0;
  left: 0;
  z-index: 2;
  box-shadow: 0 10px 30px rgba(4, 41, 102, .12);
}
.hk-cert__item--back {
  right: 0;
  bottom: 0;
}
.hk-cert__item:hover {
  z-index: 3;
  opacity: 1;
  box-shadow: 0 16px 40px rgba(4, 41, 102, .24);
}

/* アクセス */
.hk-access {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 3.4vw, 40px);
}
/* 見出し「アクセス」と住所の横並び（狭い画面では折り返し） */
.hk-access__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px clamp(20px, 3vw, 40px);
}
.hk-access__addr {
  font-size: 16px;
  font-weight: 700;
}
.hk-map.embed {
  height: clamp(300px, 36vw, 460px);
  border-radius: 0;
}
.hk-map iframe { filter: grayscale(.3); }

/* ==========================================================================
   事業内容
   ========================================================================== */
.hk-svc-intro {
  padding: clamp(64px, 8vw, 112px) 0 clamp(24px, 3vw, 40px);
}
.hk-svc-intro .sentence {
  font-size: clamp(15px, 1.3vw, 17px);
  line-height: 2.2;
  text-align: center;
  text-wrap: balance;
  word-break: auto-phrase;
}
.hk-svc-layout {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: clamp(32px, 5vw, 72px);
  padding-top: clamp(40px, 5vw, 72px);
  padding-bottom: clamp(72px, 9vw, 128px);
}
.hk-svc-nav {
  position: sticky;
  top: 110px;
  display: flex;
  flex-direction: column;
  flex: 0 1 220px;
  border-top: 2px solid #042966;
}
.hk-svc-nav__link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 18px 4px;
  border-bottom: 1px solid #dfe3ea;
  color: #042966;
  line-height: 1.9;
  transition: color .2s;
}
.hk-svc-nav__link:hover {
  color: #FF2B00;
  opacity: 1;
}
.hk-svc-nav__en {
  font-family: "Barlow", sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .22em;
}
.hk-svc-nav__ja {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .12em;
}
.hk-svc-list {
  display: flex;
  flex-direction: column;
  gap: clamp(72px, 9vw, 120px);
  flex: 1 1 560px;
}
.hk-svc {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(24px, 3vw, 36px);
  scroll-margin-top: 110px;
}
.hk-svc > * { align-self: stretch; }
.hk-svc > .hk-btn { align-self: flex-start; }
.hk-svc__ttl {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 700;
  line-height: 1.9;
  letter-spacing: .14em;
  color: #042966;
}
.hk-svc__ttl::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #042966;
}
.hk-svc__photo {
  position: relative;
  padding-bottom: clamp(28px, 3vw, 40px);
}
.hk-svc__photo img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 8;
  object-fit: cover;
  background: #dde3ec;
}
.hk-svc__lead {
  position: absolute;
  left: 0;
  bottom: 0;
  max-width: calc(100% - clamp(24px, 4vw, 64px));
  padding: clamp(14px, 1.8vw, 22px) clamp(20px, 2.6vw, 36px);
  background: #042966;
  color: #fefefe;
  font-size: clamp(17px, 1.9vw, 23px);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .06em;
}
.hk-svc__box {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(20px, 2.6vw, 32px);
  background: #f5f3ee;
}
.hk-svc__box-ttl {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .1em;
  color: #042966;
}
.hk-svc__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.hk-svc__tag {
  padding: 6px 14px;
  background: #fefefe;
  border: 1px solid #d9dde4;
  font-size: 13px;
  line-height: 1.6;
}

/* ==========================================================================
   施工実績
   ========================================================================== */
.hk-sec-list { padding: clamp(56px, 7vw, 96px) 0 clamp(80px, 10vw, 140px); }
.hk-works {
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 4vw, 48px);
}
.hk-lead {
  font-size: clamp(15px, 1.3vw, 17px);
  line-height: 2.1;
}
.hk-works .tab-nav {
  gap: 8px;
  border-bottom: 1px solid #042966;
}
.hk-works .tab-nav__item {
  height: 48px;
  padding: 0 22px;
  border: 1px solid #042966;
  border-bottom: 0;
  border-radius: 0;
  background: #fefefe;
  color: #042966;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .1em;
}
.hk-works .tab-nav__item.is-active {
  background: #042966;
  color: #fefefe;
}
.hk-works-grid { gap: clamp(36px, 4vw, 56px) clamp(24px, 3vw, 40px); }
/* 工事経歴（年度ごとの開閉） */
.hk-history-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: clamp(24px, 4vw, 56px);
}
.hk-history-year__head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px clamp(20px, 2.6vw, 32px);
  background: #042966;
  color: #fefefe;
  font-size: clamp(16px, 1.4vw, 18px);
  font-weight: 700;
  letter-spacing: .14em;
  list-style: none;
  cursor: pointer;
}
.hk-history-year__head::-webkit-details-marker { display: none; }
.hk-history-year__head::after {
  content: "+";
  margin-left: auto;
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
}
.hk-history-year[open] .hk-history-year__head::after { content: "−"; }
.hk-history-year .hk-table { border-top: 0; }
.hk-history-year .hk-table__th { flex: 0 1 140px; }
.hk-history-year__client {
  display: block;
  font-size: 13px;
  color: #5b6577;
}
.hk-work-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.hk-work-card[hidden] { display: none; }
.hk-work-card__photo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  padding: 0;
  border: 0;
  background: repeating-linear-gradient(135deg, #e7ebf2 0 14px, #dde3ec 14px 28px);
  cursor: pointer;
  transition: opacity .3s;
}
.hk-work-card__photo:hover { opacity: .85; }
.hk-work-card__photo img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hk-work-card__ph {
  padding: 6px 10px;
  background: #fefefe;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12px;
  color: #4a5468;
}
.hk-work-card__more {
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: #042966;
  color: #fefefe;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
}
.hk-work-card__cat {
  align-self: flex-start;
  padding: 1px 10px;
  border: 1px solid #042966;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  color: #042966;
}
.hk-work-card__ttl {
  padding-left: 14px;
  border-left: 4px solid #042966;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.6;
}
.hk-work-card__info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
}
.hk-work-card__row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.hk-work-card__row dt {
  flex: 0 0 76px;
  padding: 3px 0;
  background: #042966;
  color: #fefefe;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-align: center;
}
.hk-work-card__row dd { line-height: 1.7; }

/* 写真ビューア */
.hk-lb {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 48px);
  overflow: auto;
  background: rgba(2, 20, 52, .94);
}
.hk-lb.is-open { display: flex; }
.hk-lb__box {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: min(100%, 1000px, calc((100vh - 240px) * 1.5));
  min-width: min(100%, 320px);
  margin: auto;
  color: #fefefe;
}
.hk-lb__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.hk-lb__caption {
  display: flex;
  flex-direction: column;
  line-height: 1.5;
}
.hk-lb__cat {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  color: #FF2B00;
}
.hk-lb__title {
  font-size: 16px;
  font-weight: 700;
}
.hk-lb__close {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(254, 254, 254, .5);
  background: none;
  cursor: pointer;
}
.hk-lb__stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 3 / 2;
  background: repeating-linear-gradient(135deg, #e7ebf2 0 14px, #dde3ec 14px 28px);
}
.hk-lb__ph {
  padding: 6px 10px;
  background: #fefefe;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 13px;
  color: #4a5468;
}
.hk-lb__img {
  position: absolute;
  inset: 0;
  display: none;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #0a1a38;
}
.hk-lb__img.is-show { display: block; }
.hk-lb__count {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  padding: 4px 12px;
  background: #042966;
  color: #fefefe;
  font-family: "Barlow", sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .1em;
}
.hk-lb__nav {
  position: absolute;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 72px;
  transform: translateY(-50%);
  border: 0;
  background: #042966;
  cursor: pointer;
}
.hk-lb__nav--prev { left: 0; }
.hk-lb__nav--next { right: 0; }
.hk-lb__thumbs {
  display: flex;
  gap: 10px;
  overflow-x: auto;
}
.hk-lb__thumb {
  flex: 0 0 96px;
  aspect-ratio: 3 / 2;
  border: 0;
  outline: 3px solid transparent;
  outline-offset: -3px;
  background: repeating-linear-gradient(135deg, #e7ebf2 0 8px, #dde3ec 8px 16px) center / cover;
  font-family: "Barlow", sans-serif;
  font-weight: 700;
  font-size: 12px;
  color: #042966;
  cursor: pointer;
}
.hk-lb__thumb.is-active { outline-color: #FF2B00; }

/* ==========================================================================
   採用情報
   ========================================================================== */
/* 導入（画像＋テキストの横並び：レイアウトは TOP の .hk-recruit を共用） */
.hk-recruit-intro__ttl {
  font-weight: 700;
  font-size: clamp(24px, 2.8vw, 36px);
  line-height: 1.6;
  letter-spacing: .08em;
  color: #042966;
}
.hk-recruit-intro__bar {
  display: block;
  width: 48px;
  height: 3px;
  background: #FF2B00;
}
.hk-recruit-intro__text.sentence p + p { margin-top: 16px; }
.hk-req {
  display: flex;
  flex-direction: column;
  gap: clamp(36px, 4.4vw, 56px);
  max-width: 960px;
}

/* ==========================================================================
   お問い合わせ
   ========================================================================== */
.hk-contact {
  display: flex;
  flex-direction: column;
  gap: clamp(36px, 4.4vw, 56px);
}
.hk-contact__intro {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.hk-contact__tel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 20px;
  padding: 26px 24px;
  background: #042966;
  color: #fefefe;
}
.hk-contact__tel:hover { color: #fefefe; }
.hk-contact__num {
  font-family: "Barlow", sans-serif;
  font-weight: 700;
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.2;
  letter-spacing: .04em;
}
.hk-contact__time { font-size: 13px; }
.hk-heading--form .heading__ja { font-size: clamp(22px, 2.4vw, 30px); }

/* お問い合わせフォーム（CMS埋め込み：cdn.rs-sys.jp mail-form.css を .hk-cms-form で上書き） */
.hk-cms-form .form-contents {
  padding: 0;
  background: none;
}
.hk-cms-form .form-contents form dl {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) minmax(0, 2.4fr);
  margin-bottom: 0;
  border-top: 2px solid #042966;
}
.hk-cms-form .form-contents form dl dt:not(.pattern-exclusion),
.hk-cms-form .form-contents form dl dd:not(.pattern-exclusion) {
  float: none;
  width: auto;
  margin: 0;
  padding: 24px 0;
  border-bottom: 1px solid #dfe3ea;
}
.hk-cms-form .form-contents form dl dt:not(.pattern-exclusion) {
  display: flex;
  align-items: center;
  padding-right: 24px;
  font-size: clamp(15px, 1.25vw, 16px);
  font-weight: 700;
}
.hk-cms-form .form-contents form dl dt:not(.pattern-exclusion):has(+ dd textarea) {
  align-items: flex-start;
  padding-top: 36px;
}
.hk-cms-form .form-contents form dl dd:not(.pattern-exclusion) {
  line-height: 1.9;
}
/* 必須・任意バッジ（項目名の後ろ） */
.hk-cms-form .form-contents form dl dt:not(.pattern-exclusion) span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  white-space: nowrap;
}
.hk-cms-form .form-pattern-1 dl dt:not(.pattern-exclusion) span.required::before,
.hk-cms-form .form-pattern-1 dl dt:not(.pattern-exclusion) span.optional::before { content: none; }
.hk-cms-form .form-pattern-1 dl dt:not(.pattern-exclusion) span::after {
  font-size: 11px;
  font-weight: 400;
  line-height: 1.9;
}
.hk-cms-form .form-pattern-1 dl dt:not(.pattern-exclusion) span.required::after {
  content: "必須";
  padding: 1px 8px;
  background: #042966;
  color: #fefefe;
}
.hk-cms-form .form-pattern-1 dl dt:not(.pattern-exclusion) span.optional::after {
  content: "任意";
  padding: 0 8px;
  border: 1px solid #9aa5b8;
  color: #4a5468;
}
/* ラジオ */
.hk-cms-form .form-contents dd:not(.pattern-exclusion) label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-right: 24px;
  font-size: clamp(15px, 1.25vw, 16px);
  cursor: pointer;
}
.hk-cms-form .form-contents dd:not(.pattern-exclusion) input.radio {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: #042966;
}
/* 入力欄 */
.hk-cms-form .form-pattern-1 dd:not(.pattern-exclusion) .textarea {
  width: 100%;
  padding: 0 16px;
  border: 1px solid #c9d0db;
  border-radius: 0;
  background: #fefefe;
  font-family: inherit;
  font-size: 16px;
  color: #1d2433;
  outline: none;
  transition: border-color .2s;
}
.hk-cms-form .form-contents dd:not(.pattern-exclusion) input.textarea { height: 52px; }
.hk-cms-form .form-pattern-1 dd:not(.pattern-exclusion) textarea.textarea {
  height: 230px;
  padding: 14px 16px;
  line-height: 1.8;
  resize: vertical;
}
.hk-cms-form .form-pattern-1 dd:not(.pattern-exclusion) .textarea:focus { border-color: #042966; }
/* 送信ボタン（.hk-btn--solid と同じ見た目） */
.hk-cms-form .form-contents .submit-btn {
  margin: 40px auto 0;
}
.hk-cms-form .form-pattern-1 .submit-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: min(100%, 320px);
  height: 64px;
  padding: 0 28px;
  border: 0;
  border-radius: 0;
  background: #042966;
  color: #fefefe;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .14em;
  transition: background .2s;
}
.hk-cms-form .form-pattern-1 .submit-btn::before { content: none; }
.hk-cms-form .form-pattern-1 .submit-btn::after {
  content: "";
  width: 16px;
  height: 10px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10' fill='none' stroke='%23fefefe' stroke-width='1.6'%3E%3Cpath d='M0 5h14M10 1l4 4-4 4'/%3E%3C/svg%3E") center / contain no-repeat;
}
.hk-cms-form .form-pattern-1 :not(.pattern-exclusion) button.submit-btn:hover { background: #FF2B00; }
/* 送信完了・エラー */
.hk-cms-form .form-pattern-1 .form-thanks-msg {
  padding: 48px 32px;
  background: #f5f3ee;
  border: 0;
  border-top: 2px solid #042966;
}
.hk-cms-form .form-pattern-1 .form-thanks-msg .back-home-btn a {
  border: 1px solid #042966;
  border-radius: 0;
  background: #fefefe;
  color: #042966;
  letter-spacing: .1em;
}
.hk-cms-form .form-pattern-1 .form-thanks-msg .back-home-btn a:hover {
  background: #FF2B00;
  border-color: #FF2B00;
  color: #fefefe;
}
@media (max-width: 639px) {
  .hk-cms-form .form-contents form dl { grid-template-columns: 1fr; }
  .hk-cms-form .form-contents form dl dt:not(.pattern-exclusion),
  .hk-cms-form .form-contents form dl dt:not(.pattern-exclusion):has(+ dd textarea) {
    padding: 24px 0 10px;
    border-bottom: 0;
  }
  .hk-cms-form .form-contents form dl dd:not(.pattern-exclusion) { padding-top: 0; }
}

/* 事業内容ページ：冒頭タイトル（代表挨拶と同じ英字＋日本語・中央配置） */
.hk-svc-intro__head { margin-bottom: clamp(28px, 3.4vw, 44px); }

/* 企業紹介：メインカラー（紺）背景版 */
.hk-about--dark .hk-about__label,
.hk-about--dark .hk-about__title,
.hk-about--dark .hk-about__text { color: #fefefe; }
.hk-about--dark .hk-about__label::before { background: #FF2B00; }
.hk-about--dark .hk-about__map {
  background: #fefefe;
  opacity: .13;
}

/* AOS（TOPの軽いフェードアップ）：AOS の opacity 指定でホバーの透過が消えないよう再指定 */
.hk-svc-card.aos-animate[data-aos]:hover { opacity: .8; }
.hk-works-bnr.aos-animate[data-aos]:hover { opacity: .94; }
/* 動きを減らす設定の端末ではアニメーションしない（詳細度でAOSの指定を上書き） */
@media (prefers-reduced-motion: reduce) {
  html [data-aos][data-aos][data-aos] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ==========================================================================
   タブレット・SP調整
   ========================================================================== */
/* TOP事業内容：タブレットでも3列（2列だと3枚目が1枚残る） */
@media (min-width: 640px) and (max-width: 896px) {
  .hk-svc-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .hk-svc-card__head { flex-wrap: wrap; gap: 4px 10px; }
  .hk-svc-card__text { font-size: 14px; line-height: 1.9; }
}
/* 施工実績タブ：SPは4つを2×2で等幅に */
@media (max-width: 639px) {
  .hk-works .tab-nav {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    padding-bottom: 0;
  }
  .hk-works .tab-nav__item {
    height: 44px;
    padding: 0 8px;
    border-bottom: 1px solid #042966;
  }
}

/* 紺背景上の白抜きボタン（ホバーでオレンジ） */
.hk-btn--white {
  background: transparent;
  border-color: #fefefe;
  color: #fefefe;
}
.hk-about__btn { margin-top: clamp(28px, 3vw, 40px); }

/* 事業内容：サイド目次（タブレット・SPは3列の横並び） */
@media (max-width: 896px) {
  /* タブレット・SP：サイド目次を3列の横並びに */
  .hk-svc-nav {
    position: static;
    flex: 1 1 100%;
    flex-direction: row;
  }
  .hk-svc-nav__link {
    flex: 1 1 0;
    min-width: 0;
    padding: 14px 10px;
  }
  .hk-svc-nav__link + .hk-svc-nav__link { border-left: 1px solid #dfe3ea; }
}
@media (max-width: 639px) {
  .hk-svc-nav__en { font-size: 10px; letter-spacing: .08em; }
  .hk-svc-nav__ja { font-size: 14px; letter-spacing: .06em; }
}

/* セクション背景（温白 → 明るいグレー） */
.bg-section {
  background: #f5f5f5;
}

/* タブレット・スマホ（1100px以下）：メインビューの高さを画面の65% */
@media (max-width: 1100px) {
  .hk-mv #slideshow {
    height: 65vh;
    height: 65svh;
    min-height: 0;
  }
}

/* スマホ：リード文は左揃え、途中改行（<br>）なし */
@media (max-width: 639px) {
  .hk-lead,
  .hk-lead.text-center { text-align: left; }
  .hk-lead br { display: none; }
}

/* フッター：ハンバーガーメニューが出る幅（1100px以下）ではフッターナビを出さない */
@media (max-width: 1100px) {
  .hk-footer .footer-body__nav { display: none; }
}
/* フッター：スマホは営業時間を次の行に */
@media (max-width: 639px) {
  .hk-footer .footer-body__hours {
    display: block;
    margin-left: 0;
  }
}
/* 画面下固定ボタン（電話・メール）：ハンバーガーメニューが出る1100px以下で表示 */
.sp-fixed-bar.hk-fixed-bar {
  display: none;
  padding: 0;
  border-top: 0;
  box-shadow: 0 -4px 16px rgba(4, 41, 102, .12);
}
@media (max-width: 1100px) {
  .sp-fixed-bar.hk-fixed-bar { display: flex; }
  /* 固定ボタンの高さ分、ページ最下部（コピーライト）が隠れないようにする */
  body { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }
}
.hk-fixed-bar .sp-fixed-bar__link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 56px;
  padding: 0 8px;
  padding-bottom: env(safe-area-inset-bottom);
  box-sizing: content-box;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .08em;
  color: #fefefe;
}
.hk-fixed-bar .hk-fixed-bar__tel { background: #042966; }
.hk-fixed-bar .hk-fixed-bar__mail { background: #FF2B00; }
.hk-fixed-bar .sp-fixed-bar__link:hover { color: #fefefe; opacity: .9; }

/* スマホ：お知らせの日付とタイトルの間を詰める */
@media (max-width: 639px) {
  .hk-news-list .blog-list__link {
    flex-wrap: wrap;
    gap: 0;
  }
}

/* スマホ：白見出し（CONTACT）を中央揃え（WORKSバナーは左揃えのまま） */
@media (max-width: 639px) {
  .hk-cta .hk-heading--white {
    align-items: center;
    text-align: center;
  }
  .hk-cta .hk-heading--white .heading__en { align-self: center; }
  .hk-cta__lead { text-align: center; }
}

/* SPナビ：英語も白 */
.sp-nav__en { color: #fefefe; }

/* スマホ：代表挨拶 */
@media (max-width: 639px) {
  /* 写真は幅80%で中央 */
  .hk-message__photo {
    flex: none;
    width: 80%;
    min-width: 0;
    margin: 0 auto;
  }
  /* 署名：右揃え・間を詰める */
  .hk-message__sign {
    justify-content: flex-end;
    gap: 0;
    text-align: right;
  }
  .hk-message__sign::before { margin-right: 12px; }
}

/* タブレット・スマホ（1100px以下）：事業内容の冒頭文は左揃え（balanceによる行の長さそろえも解除） */
@media (max-width: 1100px) {
  .hk-svc-intro .sentence,
  .hk-svc-intro .sentence.text-center {
    text-align: left;
    text-wrap: wrap;
    word-break: normal;
  }
}

/* スマホ：事業内容の写真上リード見出し */
@media (max-width: 639px) {
  .hk-svc__lead { font-size: clamp(16px, 1.9vw, 23px); }
}

/* 表の中の箇条書き（list-dot）：行間を本文に合わせ、最後の余白をなくす */
.hk-table__list li { margin-bottom: 0; }

/* お問い合わせ：電話番号の前の受話器アイコン */
.hk-contact__num {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.hk-contact__icon {
  flex: none;
  width: .8em;
  height: .8em;
}

/* 幅の狭いスマホ（374px以下）：ロゴ文字がメニューボタンに重ならないよう少し小さく */
@media (max-width: 374px) {
  .hk-header .hk-logo-text { font-size: 18px; }
}

/* 採用情報：導入写真まわりの装飾（紺のずらし板＋オレンジのコーナー線＋縦書き英字） */
.hk-recruit-photo {
  position: relative;
  flex: 1 1 440px;
  min-width: 0;
  padding: 0 0 clamp(14px, 1.6vw, 22px) clamp(14px, 1.6vw, 22px);
}
.hk-recruit-photo::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 72%;
  height: 72%;
  background: #042966;
}
.hk-recruit-photo::after {
  content: "";
  position: absolute;
  top: calc(clamp(14px, 1.6vw, 22px) * -1);
  right: calc(clamp(14px, 1.6vw, 22px) * -1);
  width: clamp(56px, 7vw, 96px);
  height: clamp(56px, 7vw, 96px);
  border-top: 3px solid #FF2B00;
  border-right: 3px solid #FF2B00;
  pointer-events: none;
}
.hk-recruit-photo .hk-recruit__img {
  position: relative;
}
.hk-recruit-photo__en {
  position: absolute;
  left: 0;
  bottom: clamp(14px, 1.6vw, 22px);
  width: clamp(14px, 1.6vw, 22px);
  font-family: "Barlow", sans-serif;
  font-weight: 700;
  font-size: clamp(9px, 1vw, 12px);
  letter-spacing: .3em;
  color: #fefefe;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-align: center;
  white-space: nowrap;
  padding: 16px 0;
}
@media (max-width: 639px) {
  .hk-recruit-photo::after {
    top: -10px;
    right: -6px;
  }
}

/* 会社概要：有資格者の箇条書き（PCは2つずつ横並び） */
@media (min-width: 897px) {
  .hk-table__list--2col {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    column-gap: 40px;
  }
}

/* スマホ（639px以下）だけ改行する <br class="hk-br-sp"> */
.hk-br-sp { display: none; }
@media (max-width: 639px) {
  .hk-br-sp { display: inline; }
}

/* 幅の狭いスマホ（374px以下）：事業内容の写真上リード見出しが指定位置で2行に収まるよう調整 */
@media (max-width: 374px) {
  .hk-svc__lead {
    font-size: 14px;
    padding-left: 14px;
    padding-right: 14px;
  }
}

/* 幅の狭いスマホ（374px以下）：お問い合わせCTAの受付時間が矢印と並んでも折り返さないよう詰める */
@media (max-width: 374px) {
  .hk-cta__tel,
  .hk-cta__mail {
    gap: 12px;
    padding-left: 18px;
    padding-right: 18px;
  }
  .hk-cta__time { font-size: 11px; letter-spacing: 0; }
}

/* ヘッダー：PCナビが出る幅の狭い側（1101〜1280px）で日本語が2行に折れないよう詰める */
.hk-header .header__nav-ja,
.hk-header .header__nav-en { white-space: nowrap; }
@media (min-width: 1101px) and (max-width: 1280px) {
  .hk-header .header__inner { gap: 16px; }
  .hk-header .header__nav-item a { padding-left: 9px; padding-right: 9px; }
  .hk-header .header__nav-ja { font-size: 15px; letter-spacing: .06em; }
  .hk-header .header__nav-en { letter-spacing: .12em; }
  .hk-header .header__right { padding-left: 18px; }
  .hk-header-tel__num { font-size: 20px; }
}

/* タブレット・スマホ：健康経営の証書は本文の下で中央に、幅を抑えて配置 */
@media (max-width: 1100px) {
  .hk-health .hk-cert {
    flex: none;
    width: min(100%, 560px);
    margin: 0 auto;
  }
}

/* スマホ：本文の字間 */
@media (max-width: 639px) {
  body { letter-spacing: 0; }
}

/* スマホ：主な対応実績のタグは横幅をそろえて1行ずつ（右端のガタつきをなくす） */
@media (max-width: 639px) {
  .hk-svc__box { padding: 20px 16px; }
  .hk-svc__tags {
    flex-direction: column;
    gap: 6px;
  }
  .hk-svc__tag { padding: 8px 14px; }
}