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

.en {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.hero-text {
  background: rgba(0, 0, 0, 0.35);
  padding: 20px 30px;
  display: inline-block;
  border-radius: 4px;
}

.white-shadow {
  color: #ffffff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}

/* スライド全体の土台 */
.slides li > section > div {
  position: relative;
  overflow: hidden;
}

/* 背景画像（既にそうなっていると思うけど念のため） */
.background-holder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  z-index: 0;
}

/* 背景の上に黒のオーバーレイをかける */
.background-holder::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35); /* 濃すぎたら 0.25〜0.3 に調整 */
}

/* テキスト側を背景より前面に */
.hero-content {
  position: relative;
  z-index: 1;
}

/* 白文字＋黒シャドウ（読みやすさUP） */
.white-shadow {
  color: #ffffff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.55);
}

.holder-none::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0);
}

/* テキストロゴ（株式会社吉積商会） */
.text-logo {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #1f2d3d; /* ダークネイビー */
  text-decoration: none;
  white-space: nowrap;
}

.text-logo:hover {
  color: #1f2d3d;
  text-decoration: none;
}

.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.hero-content {
  position: relative;
  z-index: 1;
}

/* =========================
   STEP6: スマホはヒーロー1枚固定
========================= */
@media (max-width: 768px) {
  .flexslider .slides > li:not(:first-child) {
    display: none;
  }

  .flexslider {
    height: auto;
  }
}
/* =========================
   ヒーロー画像 img 化対応
========================= */
.hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* ← 超重要 */
  z-index: 1;
}
.hero-content {
  position: relative;
  z-index: 2;
}
/* =========================
   スマホ時のヒーロー安定化
========================= */
@media (max-width: 768px) {
  .flexslider,
  .flexslider .slides,
  .flexslider .slides > li,
  .flexslider section {
    min-height: 100vh;
  }

  .hero-content {
    text-align: center;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}
@media (max-width: 768px) {
  .hero-content h2 {
    font-size: 1.6rem;
    line-height: 1.4;
  }

  .hero-content p {
    font-size: 1rem;
    line-height: 1.8;
  }
}

/* =========================
   ヒーローの高さの土台
========================= */
.hero-slide {
  min-height: 100vh;
  display: flex;
  align-items: center;
}
@media (max-width: 768px) {
  .hero-slide .py-8 {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
  }
}
.hero-slide .container {
  position: relative;
  z-index: 2;
}
.hero-mobile {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
}

.hero-mobile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-content-mobile {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 1.5rem;
  text-align: center;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}
@media (max-width: 768px) {
  .flexslider {
    display: none;
  }
}
/* 表示切り替え */
.pc-only {
  display: block;
}
.sp-only {
  display: none;
}

@media (max-width: 768px) {
  .pc-only {
    display: none;
  }
  .sp-only {
    display: block;
  }
}

/* スマホ採用ヒーロー */
.recruit-hero-sp {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.recruit-hero-sp img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top; /* ← 人の顔を守る */
}

.recruit-hero-sp::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.25),
    rgba(0, 0, 0, 0.65)
  );
}

.recruit-hero-sp__content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 24px;
  color: #fff;
  z-index: 2;
  text-align: center;
}

.recruit-hero-sp h2 {
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.recruit-hero-sp p {
  font-size: 1rem;
  margin-bottom: 1rem;
}

.recruit-points {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
}

.recruit-points li {
  font-size: 0.95rem;
}

.service-card {
  background: #ffffff;
  border-radius: 0.75rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
  height: 100%;
}
.service-card .service-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(61, 76, 111, 0.1);
  margin-bottom: 1rem;
}
.service-card .service-icon i {
  font-size: 26px;
}
.service-card ul {
  padding-left: 1.1rem;
  margin-bottom: 0;
}
.service-card ul li {
  margin-bottom: 0.35rem;
}
.service-badge {
  display: inline-block;
  font-size: 12px;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  background: rgba(255, 193, 7, 0.22);
  color: #b07a00;
  font-weight: 700;
}
.hero-sub {
  max-width: 42rem;
}
.cta-box {
  border-radius: 1rem;
  overflow: hidden;
}
.note-small {
  font-size: 0.9rem;
  opacity: 0.9;
}

/* work.html のタイトル（h1#workTitle）をモバイルだけ少し小さく */
#workTitle {
  line-height: 1.15;
  letter-spacing: -0.02em;
}

@media (max-width: 575.98px) {
  #workTitle {
    font-size: 1.6rem; /* ←ここで調整（1.4〜1.8がおすすめ） */
    line-height: 1.2;
  }
}

@media (min-width: 576px) {
  #workTitle {
    font-size: 2.4rem; /* PC/タブレット側 */
  }
}

/* 施工実績 詳細：要約テキスト */
  #workSummary{
    color: #333;
    margin-bottom: 1.25rem;
    line-height: 1.7;
  }

  /* モバイル */
  @media (max-width: 575.98px){
    #workSummary{
      font-size: 0.95rem;   /* ←ここが効く */
      line-height: 1.7;
    }
  }

  /* タブレット〜PC */
  @media (min-width: 576px){
    #workSummary{
      font-size: 1.05rem;   /* PCでも“大きすぎない” */
      line-height: 1.75;
    }
  }