/* =========================================================
   Services Page 専用スタイル（統一デザイン適用版）
   ※ KV・背景・見出しなどの共通部分は main.css に統合済み
========================================================= */

/* ---------------------------------------------------------
   KV内のボタン（個人向け・法人向け）
--------------------------------------------------------- */
.kv--service .service-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: clamp(24px, 3vw, 40px);
}

.kv--service .service-buttons .btn {
  border-radius: 100px;
  font-weight: 700;
  font-size: clamp(14px, 1.4vw, 16px);
  letter-spacing: .02em;
  text-decoration: none;
  transition: all .25s ease;
  text-align: center;
  white-space: nowrap;
  padding: 16px 28px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .10);
}

.kv--service .btn--solid {
  background: linear-gradient(135deg, #2a9df4, #0f3fff);
  color: #fff;
  border: none;
}

.kv--service .btn--solid:hover {
  opacity: .9;
  box-shadow: 0 12px 34px rgba(30, 136, 255, .22);
  transform: translateY(-1px);
}

.kv--service .btn--outline {
  background: #fff;
  color: #1f56b3;
  border: 2px solid #1f56b3;
}

.kv--service .btn--outline:hover {
  background: #1f56b3;
  color: #fff;
  border-color: #1f56b3;
}

@media (max-width:768px) {
  .kv--service .service-buttons {
    justify-content: center;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    max-width: var(--sp-safe, 58vw);
  }

  .kv--service .service-buttons .btn {
    width: 100%;
    padding: 12px 16px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .06);
  }
}

/* ---------------------------------------------------------
   個人向けサービスカード一覧
--------------------------------------------------------- */
/* ---------------------------------------------------------
   個人向けサービスカード一覧（Refined Grid）
--------------------------------------------------------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 32px;
  padding: 0;
}

.card-grid .card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
}

.card-grid .card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.025);
  transform: translateY(-2px);
}

.card-grid .card .thumb {
  width: 100%;
  height: 200px;
  background: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  border-bottom: 1px solid #f1f5f9;
}

.card-grid .card .thumb::after {
  display: none;
  /* グラデーション削除 */
}

.card-grid .card .thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.05));
  transition: transform 0.3s ease;
}

.card-grid .card:hover .thumb img {
  transform: scale(1.05);
}

.card-grid .card-content {
  padding: 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.card-grid .card h3 {
  font-size: 18px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 12px;
  line-height: 1.4;
}

.card-grid .card .meta {
  font-size: 14px;
  color: #64748b;
  line-height: 1.6;
  margin: 0 0 24px;
  flex-grow: 1;
}

.card-grid .card-tags {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.card-grid .card-tags li {
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  background: #f1f5f9;
  padding: 4px 10px;
  border-radius: 4px;
  /* 角丸を小さく */
  transition: background 0.2s;
}

/* Responsive */
@media (max-width: 600px) {
  .card-grid {
    grid-template-columns: 1fr;
  }

  .card-grid .card {
    flex-direction: row;
    height: auto;
    align-items: stretch;
  }

  .card-grid .card .thumb {
    width: 110px;
    height: auto;
    padding: 16px;
    flex-shrink: 0;
  }

  .card-grid .card-content {
    padding: 16px;
  }

  .card-grid .card h3 {
    font-size: 16px;
    margin-bottom: 6px;
  }

  .card-grid .card .meta {
    font-size: 13px;
    margin-bottom: 12px;
  }

  .card-grid .card-tags li {
    font-size: 11px;
    padding: 4px 10px;
  }
}

/* ---------------------------------------------------------
   CTA Band (Professional Standard)
   ※ .cta-band--works には適用しない
--------------------------------------------------------- */
.cta-band:not(.cta-band--works) {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-left: 4px solid #1e88ff;
  /* 左側のアクセントラインのみ残す */
  border-radius: 12px;
  padding: clamp(32px, 4vw, 48px);
  margin-top: 80px;
  display: flex;
  align-items: center;
  gap: clamp(40px, 5vw, 60px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
}

/* Remove excessive decorations */
.cta-band:not(.cta-band--works)::before {
  display: none;
}

.cta-band:not(.cta-band--works)>div:first-child {
  flex: 1;
}

.cta-band:not(.cta-band--works) h3 {
  font-size: clamp(22px, 2.5vw, 26px);
  font-weight: 700;
  margin-bottom: 12px;
  color: #1e293b;
  background: none;
  -webkit-text-fill-color: initial;
}

.cta-band:not(.cta-band--works) .note {
  color: #64748b;
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 24px;
}

.cta-band:not(.cta-band--works) .btn {
  background: #1e88ff;
  color: #fff;
  border: none;
  padding: 12px 28px;
  font-weight: 600;
  border-radius: 6px;
  transition: background 0.3s;
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.cta-band:not(.cta-band--works) .btn:hover {
  background: #166cd6;
  transform: none;
  box-shadow: none;
}

.cta-band:not(.cta-band--works) .ph {
  flex: 0 0 35%;
  border-radius: 8px;
  overflow: hidden;
  transform: none;
  /* 3D効果削除 */
  box-shadow: none;
  border: 1px solid #f1f5f9;
}

.cta-band:not(.cta-band--works):hover .ph {
  transform: none;
}

.cta-band:not(.cta-band--works) .ph img {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 768px) {
  .cta-band:not(.cta-band--works) {
    flex-direction: column-reverse;
    text-align: left;
    gap: 32px;
  }

  .cta-band:not(.cta-band--works) .ph {
    width: 100%;
    flex: none;
  }

  .cta-band:not(.cta-band--works) .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ---------------------------------------------------------
   対応エリアセクション
--------------------------------------------------------- */
.area {
  background: linear-gradient(180deg, #fafcff 0%, #f6f9ff 100%);
  padding-block: clamp(36px, 6vw, 72px);
}

.area__wrap {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(20px, 4vw, 40px);
  align-items: center;
}

@media (max-width: 900px) {
  .area__wrap {
    grid-template-columns: 1fr;
  }
}

.area__badge {
  display: inline-block;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .12em;
  color: #1f56b3;
  background: #eaf2ff;
  border: 1px solid #d6e3ff;
  border-radius: 999px;
  padding: 6px 10px;
  margin-bottom: 10px;
}

.area__title {
  margin: 0 0 8px;
  font-weight: 900;
  color: #14286b;
  font-size: clamp(20px, 3.2vw, 28px);
  letter-spacing: .02em;
}

.area__title b {
  color: #1f56b3;
}

.area__lead {
  margin: 0 0 clamp(12px, 2.2vw, 18px);
  color: #344056;
  line-height: 1.9;
}

/* 市町チップ */
.area__chips {
  list-style: none;
  margin: 0 0 clamp(16px, 2.6vw, 24px);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.area__chips li {
  background: #fff;
  color: #1a2140;
  border: 1px solid #e8edf3;
  border-radius: 999px;
  padding: 6px 12px;
  font-weight: 700;
  font-size: 13px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .04);
}

/* 連絡先 */
.area__contact {
  margin-top: 16px;
}

.area__tel {
  font-weight: 900;
  color: #14286b;
  font-size: clamp(18px, 2.6vw, 22px);
  display: flex;
  align-items: center;
  gap: 8px;
}

.area__note {
  margin: 6px 0 0;
  color: #5a647b;
  font-size: 13px;
}

.area__actions {
  margin-top: 20px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.area__actions .btn {
  padding: 14px 28px 14px 48px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
  position: relative;
  border: 2px solid transparent;
}

/* お問い合わせ（フォーム）ボタン */
.area__actions .btn:not(.ghost) {
  background: linear-gradient(135deg, #1e88ff 0%, #0f66d6 100%);
  color: #fff;
  box-shadow: 0 4px 16px rgba(30, 136, 255, 0.3);
}

.area__actions .btn:not(.ghost)::before {
  content: "✉";
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.area__actions .btn:not(.ghost):hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(30, 136, 255, 0.4);
  background: linear-gradient(135deg, #0f66d6 0%, #0d52b0 100%);
  border-color: rgba(255, 255, 255, 0.3);
}

/* 今すぐ電話するボタン */
.area__actions .btn.ghost {
  background: #fff;
  color: #1e88ff;
  border: 2px solid #1e88ff;
  box-shadow: 0 2px 12px rgba(30, 136, 255, 0.15);
  padding: 14px 28px 14px 48px;
}

.area__actions .btn.ghost::before {
  content: "📞";
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
}

.area__actions .btn.ghost:hover {
  background: #1e88ff;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(30, 136, 255, 0.3);
}

.area__actions .btn:active {
  transform: translateY(0);
}

/* 地図カード */
.area__map {
  margin: 0;
  background: #fff;
  border: 1px solid #e8edf3;
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .06);
  overflow: hidden;
}

.area__map img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: contain;
  background-color: #fff;
  border-radius: 14px 14px 0 0;
}

.area__map figcaption {
  padding: 10px 12px;
  font-size: 13px;
  color: #5a647b;
  border-top: 1px solid #eef3f8;
}

/* 余白の統一（左右のパディング） */
.section.area .container {
  padding-inline: clamp(18px, 6vw, 60px);
}

/* ---------------------------------------------------------
   法人・公共：番号付きボックス
--------------------------------------------------------- */
/* ---------------------------------------------------------
   法人・公共：番号付きボックス
--------------------------------------------------------- */
/* Intro Section Text Color Update */
.grid-2 h3 {
  color: #1e293b;
  /* 黒系に変更 */
}

.svc-list.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(32px, 4vw, 48px);
  /* 余白は広め（強化）を維持 */
  counter-reset: svc;
  align-items: stretch;
  padding: 0;
  list-style: none;
  margin: 40px 0 0;
}

@media (max-width: 1024px) {
  .svc-list.grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .svc-list.grid {
    grid-template-columns: 1fr;
    gap: clamp(24px, 5vw, 32px);
  }
}

.svc {
  counter-increment: svc;
  background: #fff;
  border: 1px solid #e8edf3;
  /* 元のボーダー色 */
  border-radius: 16px;
  /* 少しだけ丸みを調整 */
  padding: 32px;
  /* パディングは広め（強化）を維持 */
  box-shadow: 0 8px 22px rgba(0, 0, 0, .05);
  /* 元のシャドウ */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  transition: box-shadow .3s ease, transform .25s ease;
  position: relative;
}

@media (hover: hover) {
  .svc:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 32px rgba(0, 0, 0, .1);
  }
}

.svc__head {
  text-align: center;
  margin-bottom: 24px;
}

.svc__num {
  font: 800 clamp(26px, 5vw, 42px)/1 "Inter", system-ui, sans-serif;
  color: #1f56b3;
  /* 元の青色 */
  margin-bottom: 12px;
}

.svc__num::before {
  content: counter(svc, decimal-leading-zero);
}

.svc__title {
  margin: 6px 0 0;
  font-weight: 800;
  color: #14286b;
  font-size: clamp(18px, 2.4vw, 22px);
}

.svc__title a {
  color: inherit;
  text-decoration: none;
}

.svc__title a:hover {
  text-decoration: underline;
}

.svc__lead {
  color: #344056;
  font-size: clamp(14px, 1.7vw, 15px);
  line-height: 1.8;
  margin-bottom: 24px;
}

.svc__box {
  background: #f3f4f6;
  /* 元の背景色 */
  border: 1px solid #e2e6ee;
  border-radius: 10px;
  padding: 16px;
  text-align: center;
  margin-top: auto;
}

.svc__box-text {
  margin: 0;
  color: #333;
  font-size: clamp(14px, 1.6vw, 15px);
  line-height: 1.8;
}

/* ---------------------------------------------------------
   施工実績スライダー
--------------------------------------------------------- */
.works-slider {
  position: relative;
  overflow: visible;
  --edge: 48px;
  --brand: #1f56b3;
  --swiper-theme-color: var(--brand);
  --swiper-navigation-size: 18px;
  padding-inline: var(--edge);
  margin-top: clamp(24px, 4vw, 40px);
  -webkit-mask-image: linear-gradient(90deg,
      transparent 0,
      #000 var(--edge),
      #000 calc(100% - var(--edge)),
      transparent 100%);
  mask-image: linear-gradient(90deg,
      transparent 0,
      #000 var(--edge),
      #000 calc(100% - var(--edge)),
      transparent 100%);
}

.works-slider .swiper-wrapper {
  display: flex;
  align-items: stretch;
}

.works-slider .swiper-slide {
  flex: 1 0 calc(33.333% - 20px);
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: stretch;
  height: auto !important;
  min-width: 280px;
}

#works .card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  background: #fff;
  border: 1px solid #e8edf3;
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .06);
  transition: transform .25s ease, box-shadow .25s ease;
  overflow: hidden;
}

#works .card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(0, 0, 0, .12);
}

#works .card .thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 0;
  padding: 0;
  border: 0;
  line-height: 0;
  border-radius: 0;
  overflow: hidden;
}

#works .card .thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  margin: 0;
  padding: 0;
  border: 0;
}

#works .card h3 {
  margin: 10px 16px 6px;
  font-weight: 800;
  color: #14286b;
  font-size: clamp(15px, 1.7vw, 18px);
  line-height: 1.45;
  letter-spacing: .01em;
  min-height: 2.8em;
}

#works .card p.meta,
#works .card time.meta {
  margin: 0 16px 16px;
  color: #5a647b;
  font-size: clamp(12.5px, 1.5vw, 14px);
  line-height: 1.7;
  min-height: 2.4em;
  display: block;
}

#works .card time.meta {
  margin-top: 8px;
  margin-bottom: 0;
}

/* ナビゲーションボタン */
.works-slider .swiper-button-next,
.works-slider .swiper-button-prev {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  inset-inline: auto;
  width: 46px !important;
  height: 46px !important;
  border-radius: 50% !important;
  background: #fff !important;
  color: var(--brand) !important;
  border: 1px solid rgba(15, 31, 58, .14) !important;
  box-shadow: 0 10px 24px rgba(15, 31, 58, .14) !important;
  z-index: 3 !important;
}

.works-slider .swiper-button-prev {
  left: 8px !important;
  right: auto !important;
}

.works-slider .swiper-button-next {
  right: 8px !important;
  left: auto !important;
}

.works-slider .swiper-button-next:after,
.works-slider .swiper-button-prev:after {
  font-size: 18px !important;
  font-weight: 800;
}

@media (hover: hover) {

  .works-slider .swiper-button-next:hover,
  .works-slider .swiper-button-prev:hover {
    background: var(--brand) !important;
    color: #fff !important;
    transform: translateY(-50%) translateY(-1px) !important;
    box-shadow: 0 14px 28px rgba(31, 86, 179, .28) !important;
  }
}

.works-slider .swiper-button-next:active,
.works-slider .swiper-button-prev:active {
  transform: translateY(-50%) scale(.98) !important;
}

.works-slider .swiper-button-next:focus-visible,
.works-slider .swiper-button-prev:focus-visible {
  outline: 3px solid #96b7f0;
  outline-offset: 2px;
}

/* ページネーション */
.works-slider .swiper-pagination {
  position: static;
  margin-top: clamp(10px, 1.8vw, 14px);
  display: flex;
  justify-content: center;
  gap: 10px;
}

.works-slider .swiper-pagination-bullet {
  width: 22px;
  height: 8px;
  border-radius: 999px;
  background: #d6deef !important;
  opacity: 1 !important;
  transition: width .25s ease, background .25s ease;
}

.works-slider .swiper-pagination-bullet-active {
  width: 34px;
  background: var(--brand) !important;
}

@media (max-width: 1024px) {
  .works-slider .swiper-slide {
    flex: 1 0 calc(50% - 16px);
  }
}

@media (max-width: 768px) {
  .works-slider {
    --edge: 22px;
    overflow: hidden;
  }

  .works-slider .swiper-button-next,
  .works-slider .swiper-button-prev {
    width: 40px !important;
    height: 40px !important;
  }

  .works-slider .swiper-button-next:after,
  .works-slider .swiper-button-prev:after {
    font-size: 16px !important;
  }

  #works .card {
    border-radius: 12px;
  }

  #works .card h3 {
    font-size: 15px;
    margin: 10px 14px 6px;
  }

  #works .card p.meta,
  #works .card time.meta {
    margin: 0 14px 14px;
    font-size: 13px;
  }
}

@media (max-width: 640px) {
  .works-slider .swiper-slide {
    flex: 1 0 100%;
    min-width: auto;
  }

  /* モバイル時のスライダー表示修正 */
  .works-slider {
    --edge: 16px;
    padding-inline: var(--edge);
    overflow: hidden;
    -webkit-mask-image: none;
    mask-image: none;
  }

  #works .card {
    width: 100%;
    max-width: 100%;
  }

  #works .card .thumb {
    aspect-ratio: 16 / 10;
  }
}

/* ---------------------------------------------------------
   Section Panel (Private Customer)
--------------------------------------------------------- */
.section--panel {
  padding: clamp(60px, 8vw, 100px) 0;
  /* 余白は維持 */
}

/* ---------------------------------------------------------
   個人向けサービス：導入エリア（Simple & Direct CTA）
--------------------------------------------------------- */
.section--panel .section__inner {
  display: flex;
  align-items: center;
  gap: clamp(40px, 6vw, 80px);
  margin-bottom: 50px;
  background: #f1f5f9;
  /* 淡いグレーでエリアを明確化 */
  padding: clamp(40px, 5vw, 60px);
  border-radius: 24px;
  position: relative;
}

.section--panel .section__inner::after {
  display: none;
}

/* Text Area */
.section--panel .section__inner>div:first-child {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.section--panel .section__inner h3 {
  font-size: clamp(22px, 2.5vw, 28px);
  font-weight: 800;
  line-height: 1.5;
  margin-bottom: 20px;
  color: #1e293b;
}

.section--panel .section__inner p {
  font-size: 16px;
  line-height: 1.8;
  color: #475569;
  margin-bottom: 32px;
}

/* CTA Button Enhancement */
.section--panel .section__inner .btn {
  align-self: flex-start;
  /* 左寄せ */
  background: #1e88ff;
  color: #fff;
  padding: 16px 32px;
  border-radius: 999px;
  font-weight: 700;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 4px 12px rgba(30, 136, 255, 0.3);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.section--panel .section__inner .btn::after {
  content: "→";
  transition: transform 0.2s;
}

.section--panel .section__inner .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(30, 136, 255, 0.4);
}

.section--panel .section__inner .btn:hover::after {
  transform: translateX(4px);
}

/* Image Area */
.section--panel .section__inner .ph {
  flex: 1;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
  /* aspect-ratio removed to show full image */
}

.section--panel .section__inner .ph img {
  width: 100%;
  object-fit: contain;
  display: block;
}

/* Responsive */
@media (max-width: 900px) {
  .section--panel .section__inner {
    flex-direction: column-reverse;
    padding: 32px 24px;
    text-align: center;
    gap: 32px;
  }

  .section--panel .section__inner>div:first-child {
    align-items: center;
    /* モバイルでは中央揃え */
  }

  .section--panel .section__inner .btn {
    align-self: center;
  }

  .section--panel .section__inner .ph {
    width: 100%;
    aspect-ratio: 16 / 9;
  }
}

/* ---------------------------------------------------------
   Worry Header (Problem -> Solution Flow)
--------------------------------------------------------- */
.worry-header {
  text-align: center;
  margin-bottom: 40px;
  position: relative;
}

.page-service .service-section-title,
.service-section-title {
  display: inline-block;
  font-size: clamp(22px, 3vw, 26px);
  font-weight: 800;
  color: #1e88ff !important;
  background: transparent;
  padding: 0;
  margin: 0;
  letter-spacing: 0.03em;
  position: relative;
  border-bottom: 3px solid #1e88ff;
}

.service-section-title::after {
  display: none;
}

/* Description Text */
.worry-header .t-center {
  font-size: 15px;
  color: #64748b;
  line-height: 1.8;
  margin-bottom: 0;
}

/* Connect to Grid with a dotted line */
.worry-header::after {
  display: none;
}

/* ---------------------------------------------------------
   施工の流れ（ステップタイムライン）
--------------------------------------------------------- */
.flow-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
  counter-reset: step;
}

.flow-step {
  position: relative;
  padding: 14px 14px 14px 56px;
  border: 1px solid #e8edf3;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .04);
}

.flow-step__number {
  position: absolute;
  left: 14px;
  top: 14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(91, 155, 213, .12);
  color: #1f2a44;
  font-weight: 700;
}

.flow-step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 30px;
  top: calc(14px + 32px);
  width: 4px;
  bottom: -14px;
  background: linear-gradient(#e8eef6, #edf2f7);
  border-radius: 2px;
}

.flow-step__title {
  margin: 2px 0 4px;
  font-size: 16px;
  font-weight: 800;
  color: #14286b;
}

.flow-step__text {
  margin: 0;
  color: #374151;
  font-size: 14px;
  line-height: 1.7;
}

/* ---------------------------------------------------------
   CTA Band (Modern Light Theme)
   ※ .cta-band--works には適用しない
--------------------------------------------------------- */
.cta-band:not(.cta-band--works) {
  background: linear-gradient(135deg, #ffffff 0%, #f0f7ff 100%);
  /* 白ベース＋淡い青 */
  border: 1px solid #e2e8f0;
  border-radius: 24px;
  padding: clamp(40px, 5vw, 60px);
  margin-top: 80px;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  align-items: center;
  gap: clamp(40px, 5vw, 80px);
  position: relative;
  overflow: hidden;
  color: #1e293b;
  /* テキストはダークカラー */
  box-shadow: 0 20px 40px rgba(30, 136, 255, 0.08);
  /* 青系の淡い影 */
}

/* Decorative Gradient Border/Glow */
.cta-band:not(.cta-band--works)::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  height: 100%;
  background: linear-gradient(180deg, #3b82f6, #06b6d4);
}

/* Text Content */
.cta-band:not(.cta-band--works)>div:first-child {
  position: relative;
  z-index: 2;
}

.cta-band:not(.cta-band--works) h3 {
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 800;
  margin-bottom: 16px;
  line-height: 1.4;
  color: #0f2d63;
  /* 濃紺で引き締め */
  background: none;
  -webkit-text-fill-color: initial;
}

.cta-band:not(.cta-band--works) .note {
  color: #475569;
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 32px;
}

/* Button in CTA */
.cta-band:not(.cta-band--works) .btn {
  background: #1e88ff;
  color: #fff;
  border: none;
  padding: 16px 40px;
  font-weight: 700;
  border-radius: 999px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(30, 136, 255, 0.3);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.cta-band:not(.cta-band--works) .btn::after {
  content: "→";
  transition: transform 0.2s;
}

.cta-band:not(.cta-band--works) .btn:hover {
  background: #0f2d63;
  /* ホバー時は濃紺へ */
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(15, 45, 99, 0.2);
}

.cta-band:not(.cta-band--works) .btn:hover::after {
  transform: translateX(4px);
}

/* Image Area */
.cta-band:not(.cta-band--works) .ph {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  transform: perspective(1000px) rotateY(-5deg);
  transition: transform 0.5s ease;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  border: 4px solid #fff;
  /* 白枠で清潔感 */
}

.cta-band:not(.cta-band--works):hover .ph {
  transform: perspective(1000px) rotateY(0deg) scale(1.02);
}

.cta-band:not(.cta-band--works) .ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Responsive */
@media (max-width: 900px) {
  .cta-band:not(.cta-band--works) {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 40px;
    padding: 40px 24px;
  }

  .cta-band:not(.cta-band--works)::before {
    width: 100%;
    height: 6px;
    top: 0;
    left: 0;
    background: linear-gradient(90deg, #3b82f6, #06b6d4);
  }

  .cta-band:not(.cta-band--works) .ph {
    transform: none;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    aspect-ratio: 16 / 9;
  }

  .cta-band:not(.cta-band--works):hover .ph {
    transform: scale(1.02);
  }
}

/* ---------------------------------------------------------
   ボタン行（施工実績一覧へ）
--------------------------------------------------------- */
.btn-row {
  margin-top: clamp(32px, 4vw, 56px);
  text-align: center;
  display: flex;
  gap: 12px;
  justify-content: center;
}

/* ---------------------------------------------------------
   その他調整（インラインスタイル移行含む）
--------------------------------------------------------- */

/* セクション小見出しのマージン（すべての .sub に共通） */
.section .sub {
  margin-bottom: 20px;
}

/* 「個人のお客さま」ブロックの上部余白 */
.section.section--panel .section__inner {
  padding-top: 28px;
}

/* 「主なサービス内容」見出し（中央寄せ＋余白） */
.h3-center {
  text-align: center;
  margin-top: 48px;
  margin-bottom: 16px;
}

/* h3 下の説明文（個人向けセクション） */
.section.section--panel .t-center {
  color: var(--muted);
  margin-bottom: 32px;
}

/* 法人セクションの 2 カラムブロック下の余白 */
.section.section--alt .grid-2 {
  margin-bottom: 28px;
}

/* フッター最下部行のレイアウト */
.footer>.container:last-of-type {
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
  flex-wrap: wrap;
}

/* 汎用調整 */
.t-center {
  text-align: center;
}

.grid-2 {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(16px, 3.5vw, 28px);
  align-items: start;
}

@media (max-width: 960px) {
  .grid-2 {
    grid-template-columns: 1fr;
  }
}

/* アニメ軽減 */
@media (prefers-reduced-motion: reduce) {

  .card,
  .svc,
  .works-slider .swiper-button-next,
  .works-slider .swiper-button-prev {
    transition: none !important;
  }
}

/* ==== 個人向けカード：配管ライン風アクセント ==== */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: 1px solid #e8edf3;
  border-radius: 16px;
  padding: 14px;
  text-decoration: none;
  color: inherit;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .05);
  overflow: hidden;
}

/* 上部にカラーラインを入れる（配管イメージ） */
.card::before {
  content: "";
  position: absolute;
  left: -12px;
  right: -12px;
  top: 0;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, #2a9df4, #0f3fff);
}

/* カードごとに少し色味を変えてテンプレ感を減らす */
.card:nth-child(2)::before {
  background: linear-gradient(90deg, #2ecc71, #16a085);
}

.card:nth-child(3)::before {
  background: linear-gradient(90deg, #f4b41a, #f57c00);
}

.card:nth-child(4)::before {
  background: linear-gradient(90deg, #9b59b6, #6c5ce7);
}

.card:nth-child(5)::before {
  background: linear-gradient(90deg, #1abc9c, #00bcd4);
}

.card:nth-child(6)::before {
  background: linear-gradient(90deg, #e74c3c, #ff7675);
}

/* hover は少しだけ大きく＆浮かせる */
.card:hover,
.card:focus-visible {
  transform: translateY(-3px) scale(1.01);
  box-shadow: 0 14px 32px rgba(0, 0, 0, .12);
  border-color: rgba(91, 155, 213, .4);
  outline: none;
}

.area {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, #fafcff 0%, #f6f9ff 100%);
  padding-block: clamp(36px, 6vw, 72px);
}

.area::before {
  content: "";
  position: absolute;
  inset: -40px;
  background-image:
    linear-gradient(to right, rgba(31, 86, 179, .03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(31, 86, 179, .03) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
  z-index: 0;
}

.area__wrap {
  position: relative;
  z-index: 1;
  /* グリッドの上に置く */
}

/* ---------------------------------------------------------
   Modern Scroll Animations
--------------------------------------------------------- */
.fade-up {
  opacity: 0;
  transform: translateY(60px);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.fade-up.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Fade from left */
.fade-left {
  opacity: 0;
  transform: translateX(-60px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.fade-left.in-view {
  opacity: 1;
  transform: translateX(0);
}

/* Fade from right */
.fade-right {
  opacity: 0;
  transform: translateX(60px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.fade-right.in-view {
  opacity: 1;
  transform: translateX(0);
}

/* Scale animation */
.fade-scale {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.8s cubic-bezier(0.34, 1.56, 0.64, 1),
    transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.fade-scale.in-view {
  opacity: 1;
  transform: scale(1);
}

/* Stagger animation for cards */
.card-grid .card {
  opacity: 0;
  transform: translateY(40px) scale(0.95);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.card-grid.in-view .card:nth-child(1) {
  transition-delay: 0.1s;
}

.card-grid.in-view .card:nth-child(2) {
  transition-delay: 0.2s;
}

.card-grid.in-view .card:nth-child(3) {
  transition-delay: 0.3s;
}

.card-grid.in-view .card:nth-child(4) {
  transition-delay: 0.4s;
}

.card-grid.in-view .card:nth-child(5) {
  transition-delay: 0.5s;
}

.card-grid.in-view .card:nth-child(6) {
  transition-delay: 0.6s;
}

.card-grid.in-view .card {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Stagger animation for service list */
.svc-list.in-view .svc {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.svc-list.in-view .svc:nth-child(1) {
  transition-delay: 0.1s;
}

.svc-list.in-view .svc:nth-child(2) {
  transition-delay: 0.2s;
}

.svc-list.in-view .svc:nth-child(3) {
  transition-delay: 0.3s;
}

.svc-list.in-view .svc:nth-child(4) {
  transition-delay: 0.4s;
}

.svc-list.in-view .svc:nth-child(5) {
  transition-delay: 0.5s;
}

.svc-list.in-view .svc:nth-child(6) {
  transition-delay: 0.6s;
}

.svc-list.in-view .svc {
  opacity: 1;
  transform: translateY(0);
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {

  .fade-up,
  .fade-left,
  .fade-right,
  .fade-scale,
  .card-grid .card,
  .svc-list .svc {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* =========================================================
   Services Page Refresh (Pop & Friendly Design)
   トップページとトンマナを合わせたポップな改修
========================================================= */

/* ---------------------------------------------------------
   1. 共通設定・背景装飾
--------------------------------------------------------- */
/* 背景に楽しいドットパターンを追加 */
.section--panel,
.section--alt {
  background-color: #fff;
  background-image:
    radial-gradient(#e0efff 20%, transparent 20%),
    radial-gradient(#e0efff 20%, transparent 20%);
  background-position: 0 0, 10px 10px;
  background-size: 20px 20px;
}

/* セクション見出し：トップページ共通の「波線」装飾 */
h2[id^="sec-"] {
  position: relative;
  display: inline-block;
  color: #1e88ff !important;
  /* 明るい青 */
  font-size: clamp(28px, 4vw, 36px);
  font-weight: 900;
  letter-spacing: 0.05em;
  margin-bottom: 16px;
  background: none !important;
  /* 既存の背景装飾リセット */
  padding: 0 !important;
}

h2[id^="sec-"]::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 100%;
  height: 6px;
  /* 波線SVG */
  background: url('data:image/svg+xml;charset=utf8,%3Csvg viewBox="0 0 20 4" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M0 4 C5 4 5 0 10 0 C15 0 15 4 20 4" stroke="%232a9df4" stroke-width="2" fill="none"/%3E%3C/svg%3E') repeat-x;
  background-size: 20px 6px;
  opacity: 0.6;
}

/* サブテキスト（p.sub） */
.sub {
  color: #5a6c88 !important;
  font-weight: 700;
  margin-bottom: 48px !important;
}

/* ---------------------------------------------------------
   2. ボタンの統一（トップページプランBスタイル）
   ※ .cta-band--works のボタンは除外
--------------------------------------------------------- */
/* ページ内のすべての.btn（KV以外・CTAセクション以外）をポップスタイルに */
.section:not(.section--cta) .btn,
.area__actions .btn,
.cta-band:not(.cta-band--works) .btn,
.btn-row .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 40px !important;

  background: #fff !important;
  color: #1e88ff !important;
  border: 3px solid #1e88ff !important;
  border-radius: 50px !important;

  font-size: 16px !important;
  font-weight: 900 !important;
  text-decoration: none;
  line-height: 1;

  /* ポップな影 */
  box-shadow: 4px 4px 0 #bce0fd !important;
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  transform: none;
  /* 初期状態リセット */
}

/* ホバー時 */
.section:not(.section--cta) .btn:hover,
.area__actions .btn:hover,
.cta-band:not(.cta-band--works) .btn:hover,
.btn-row .btn:hover {
  background: #1e88ff !important;
  color: #fff !important;
  box-shadow: 0 0 0 #bce0fd !important;
  transform: translate(4px, 4px) !important;
  opacity: 1;
}

/* 矢印アイコンなどがあれば色調整 */
.section .btn::after,
.section .btn::before {
  font-weight: bold;
}

/* ---------------------------------------------------------
   3. 個人のお客さま（Introduction Panel）
--------------------------------------------------------- */
.section--panel .section__inner {
  background: #fff;
  /* 背景を白に */
  border: 4px solid #f0f7ff;
  /* 淡い枠線 */
  box-shadow: 0 20px 50px rgba(30, 136, 255, 0.1);
  border-radius: 32px;
  /* 大きな角丸 */
  overflow: visible;
  /* 画像をはみ出させるため */
}

/* 画像をポラロイド風に傾ける */
.section--panel .section__inner .ph {
  transform: rotate(3deg);
  border: 6px solid #fff;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  border-radius: 16px;
  transition: transform 0.4s ease;
}

.section--panel .section__inner:hover .ph {
  transform: rotate(0deg) scale(1.05);
}

/* ---------------------------------------------------------
   4. カードグリッド（個人・法人共通）
--------------------------------------------------------- */
/* カードベース */
.card-grid .card,
#works .card {
  border: none !important;
  /* 既存のボーダー消去 */
  border-radius: 24px !important;
  background: #fff;
  /* ふんわり浮く影 */
  box-shadow: 0 10px 30px rgba(30, 136, 255, 0.1) !important;
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease !important;
}

/* カード上部のカラーライン（配管風）はそのまま活かすか、ポップにする */
.card-grid .card::before {
  height: 8px;
  /* 少し太く */
}

/* ホバー時の動き（ボヨンと跳ねる） */
.card-grid .card:hover,
#works .card:hover {
  transform: translateY(-10px) scale(1.02) !important;
  box-shadow: 0 20px 40px rgba(30, 136, 255, 0.2) !important;
}

/* カード内の画像エリア */
.card-grid .card .thumb {
  background: #f0f7ff;
  /* 淡い青背景 */
  border-bottom: none;
  padding: 30px;
}

.card-grid .card .thumb img {
  filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.1));
  /* アイコンに影 */
}

/* カードタイトル */
.card-grid .card h3 {
  color: #0e255a;
  font-size: 20px;
}

/* タグ（Chips） */
.card-grid .card-tags li {
  background: #fff;
  border: 2px solid #e0efff;
  color: #1e88ff;
  border-radius: 20px;
  /* カプセル型 */
  padding: 6px 12px;
}

/* ---------------------------------------------------------
   5. エリアセクション（地図とチップ）
--------------------------------------------------------- */
.area {
  /* グラデーションを少し明るく */
  background: linear-gradient(180deg, #fff 0%, #eef6ff 100%);
}

.area__title {
  color: #0e255a;
}

.area__title b {
  color: #1e88ff;
  background: linear-gradient(transparent 70%, #bce0fd 70%);
  /* マーカー風 */
}

/* 市町チップ */
.area__chips li {
  background: #fff;
  color: #1e88ff;
  border: 2px solid #1e88ff;
  /* 青枠 */
  box-shadow: 4px 4px 0 #bce0fd;
  /* ポップな影 */
  font-weight: 900;
  padding: 8px 16px;
  transition: transform 0.2s;
}

.area__chips li:hover {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 #bce0fd;
}

/* 地図画像 */
.area__map {
  border: 4px solid #fff;
  border-radius: 24px;
  box-shadow: 0 20px 40px rgba(30, 136, 255, 0.15);
  transform: rotate(-2deg);
  /* 少し傾けて楽しげに */
  transition: transform 0.4s;
}

.area__map:hover {
  transform: rotate(0deg) scale(1.02);
}

/* ---------------------------------------------------------
   6. 法人向け（Numbered List）
--------------------------------------------------------- */
.svc-list.grid {
  gap: 30px;
}

.svc {
  border: none;
  border-radius: 30px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  position: relative;
}

/* 番号のデザイン変更 */
.svc__num {
  font-family: sans-serif;
  color: #e0efff;
  /* 薄い色で背景に巨大に配置 */
  font-size: 120px;
  position: absolute;
  top: -20px;
  right: -20px;
  line-height: 1;
  opacity: 0.5;
  z-index: 0;
  pointer-events: none;
}

.svc__num::before {
  /* contentはHTML側またはcounterで生成済み */
}

.svc__head,
.svc__lead,
.svc__box {
  position: relative;
  z-index: 1;
}

.svc__title {
  font-size: 22px;
  color: #1e88ff;
}

.svc__box {
  background: #f0f7ff;
  border: 2px dashed #bce0fd;
  /* 破線で可愛く */
  border-radius: 16px;
  color: #0e255a;
  font-weight: bold;
}

/* ホバーアクション */
.svc:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(30, 136, 255, 0.15);
}

/* ---------------------------------------------------------
   7. 施工の流れ（Step Timeline）
--------------------------------------------------------- */
.flow-step {
  border: none;
  border-radius: 24px;
  box-shadow: 0 8px 24px rgba(30, 136, 255, 0.08);
  padding-left: 80px;
  /* 番号スペース確保 */
}

/* 番号をカラフルなバッジに */
.flow-step__number {
  background: #1e88ff;
  color: #fff;
  width: 50px;
  height: 50px;
  font-size: 24px;
  font-weight: 900;
  box-shadow: 0 4px 10px rgba(30, 136, 255, 0.3);
  left: 15px;
  top: 15px;
}

/* 繋ぎの線 */
.flow-step:not(:last-child)::after {
  background: #d6eaff;
  /* 水色 */
  width: 4px;
  left: 38px;
  /* 中心の調整 */
}

/* ---------------------------------------------------------
   8. CTA Band（下部誘導）
   ※ .cta-band--works には適用しない
--------------------------------------------------------- */
/* トップページのRecruitバナーのように明るく */
.cta-band:not(.cta-band--works) {
  background: linear-gradient(120deg, #1e88ff 0%, #60aeff 100%);
  color: #fff;
  border: 4px solid #fff;
  box-shadow: 0 20px 40px rgba(30, 136, 255, 0.25);
  border-radius: 32px;
}

/* 内部テキスト色調整 */
.cta-band:not(.cta-band--works) h3 {
  color: #fff;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1);
}

.cta-band:not(.cta-band--works) .note {
  color: #e0f2ff;
}

/* CTA内部のボタン */
.cta-band:not(.cta-band--works) .btn {
  /* ここだけ特別に黄色ボタン（トップページ同様）にする場合 */
  background: #ffcc00 !important;
  color: #0e255a !important;
  border-color: #fff !important;
  box-shadow: 0 6px 0 #d4a000 !important;
}

.cta-band:not(.cta-band--works) .btn:hover {
  background: #ffdb4d !important;
  transform: translateY(4px) !important;
  box-shadow: 0 2px 0 #d4a000 !important;
}

/* CTA画像 */
.cta-band:not(.cta-band--works) .ph {
  border: 6px solid #fff;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  transform: rotate(3deg);
}

/* =========================================================
   Fix: Flow Step Alignment
   施工の流れ：番号と縦線の位置ズレ修正
========================================================= */

/* 1. 番号バッジのサイズと位置を確定 */
.flow-step__number {
  width: 50px !important;
  height: 50px !important;
  font-size: 24px !important;
  line-height: 50px !important;
  /* 文字を垂直中央に */

  position: absolute !important;
  left: 15px !important;
  top: 15px !important;

  border-radius: 50% !important;
  z-index: 2;
  /* 線より上に表示 */
}

/* 2. 縦線（連結線）の位置をバッジに合わせて修正 */
.flow-step:not(:last-child)::after {
  content: "";
  position: absolute;
  width: 4px !important;
  background: #d6eaff !important;
  /* 水色 */

  /* --- 横位置の計算 --- */
  /* バッジ左端(15px) + 半分(25px) = 中心40px */
  /* 線幅(4px)の半分(2px)を引く = 38px */
  left: 38px !important;

  /* --- 縦位置の計算 --- */
  /* バッジ上端(15px) + 高さ(50px) = 65px */
  top: 65px !important;

  /* --- 長さの調整 --- */
  /* 次の要素のバッジ上端まで伸ばす */
  /* コンテナ下端までの距離(auto) + グリッドの隙間分(約14px) + 次のパディング分 */
  bottom: -20px !important;

  z-index: 1;
}

/* 3. コンテナの余白調整（バッジが被らないように） */
.flow-step {
  /* バッジ幅(50px) + 左位置(15px) + 余白(15px) = 80px */
  padding-left: 80px !important;
  padding-top: 24px !important;
  /* 上も少し広げてバランス調整 */
  padding-bottom: 24px !important;
}

/* スマホ表示時の微調整（必要であれば） */
@media (max-width: 600px) {
  .flow-step__number {
    width: 40px !important;
    height: 40px !important;
    font-size: 20px !important;
    line-height: 40px !important;
    left: 10px !important;
    top: 15px !important;
  }

  .flow-step:not(:last-child)::after {
    /* バッジ左(10) + 半分(20) - 線半分(2) = 28px */
    left: 28px !important;
    /* バッジ上(15) + 高さ(40) = 55px */
    top: 55px !important;
  }

  .flow-step {
    padding-left: 60px !important;
    /* スマホでは少し狭く */
  }
}

/* =========================================================
   Mobile Fix: Service Card Image Full Width
   スマホ表示時、サービス画像の余白をなくして枠いっぱいに表示
========================================================= */

@media (max-width: 600px) {

  /* 画像エリア（枠）の設定 */
  .card-grid .card .thumb {
    padding: 0 !important;
    /* 余白を完全に削除 */
    width: 120px !important;
    /* 横幅を少し広げてバランス調整 */
    height: auto !important;
    /* 高さはカード本体に合わせる */
    flex-shrink: 0;
    /* 幅が縮まないように固定 */

    /* フレックスボックスで画像を中央配置（念のため） */
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f0f7ff;
    /* 背景色は維持（画像透過時用） */
  }

  /* 画像本体の設定 */
  .card-grid .card .thumb img {
    width: 100% !important;
    height: 100% !important;

    /* 画像を枠いっぱいに広げる設定 */
    object-fit: cover !important;
    /* ※イラスト全体を絶対に見切れさせたくない場合は contain に変更してください */

    border-radius: 0 !important;
    /* 画像自体の角丸があればリセット */
  }
}

/* =========================================================

/* =========================================================
   CTA Section - Force Override for .cta-band--works
   services.cssの汎用.cta-bandを完全に無効化
========================================================= */

/* 汎用.cta-bandスタイルを.cta-band--worksには適用しない */
.section--cta .cta-band--works {
  background: transparent !important;
  border: none !important;
  border-left: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin-top: 0 !important;
  padding: 60px clamp(24px, 4vw, 40px) !important;
  position: relative !important;
  overflow: visible !important;
}

/* 疑似要素を強制表示 */
.section--cta .cta-band--works::before {
  display: block !important;
  content: "" !important;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  z-index: -1;
  background: linear-gradient(135deg, #1e88ff 0%, #40c9ff 100%);
  background-image:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.1) 0, rgba(255, 255, 255, 0.1) 10px, transparent 10px, transparent 20px),
    linear-gradient(135deg, #1e88ff 0%, #40c9ff 100%);
  box-shadow: 0 10px 40px rgba(30, 136, 255, 0.2);
}

/* レスポンシブ時も青背景を維持 */
@media (max-width: 900px) {
  .section--cta .cta-band--works {
    background: transparent !important;
    border: none !important;
    flex-direction: column-reverse !important;
    text-align: center !important;
    padding: 40px clamp(20px, 4vw, 24px) !important;
  }

  .section--cta .cta-band--works::before {
    display: block !important;
  }

  .section--cta .cta-band--works .ph {
    width: 80% !important;
    max-width: 500px !important;
    margin: 0 auto 20px !important;
    transform: rotate(-2deg) !important;
  }

  .section--cta .cta-band--works .cta-band__actions {
    justify-content: center !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  .section--cta .cta-band--works .btn--primary,
  .section--cta .cta-band--works .cta-band__actions .btn--primary,
  .section--cta .cta-band--works .btn.ghost,
  .section--cta .cta-band--works .cta-band__actions .btn.ghost {
    width: 100% !important;
    max-width: 400px !important;
  }
}

@media (max-width: 768px) {
  .section--cta .cta-band--works {
    background: transparent !important;
    border: none !important;
    padding: 32px clamp(16px, 4vw, 20px) !important;
  }

  .section--cta .cta-band--works::before {
    display: block !important;
  }

  .section--cta .cta-band--works h2,
  .section--cta .cta-band--works h3 {
    font-size: 24px !important;
    margin-bottom: 12px !important;
    color: #fff !important;
  }

  .section--cta .cta-band--works .note {
    font-size: 14px !important;
    line-height: 1.9;
    color: #fff !important;
  }

  .section--cta .cta-band--works .btn--primary,
  .section--cta .cta-band--works .cta-band__actions .btn--primary {
    padding: 14px 32px !important;
    font-size: 16px !important;
  }

  .section--cta .cta-band--works .btn.ghost,
  .section--cta .cta-band--works .cta-band__actions .btn.ghost {
    padding: 14px 28px !important;
    font-size: 15px !important;
  }

  .section--cta .cta-band--works .ph {
    width: 90% !important;
  }
}

@media (max-width: 600px) {
  .section--cta .cta-band--works {
    background: transparent !important;
    padding: 28px 16px !important;
  }

  .section--cta .cta-band--works::before {
    display: block !important;
  }

  .section--cta .cta-band--works h2,
  .section--cta .cta-band--works h3 {
    font-size: 20px !important;
    color: #fff !important;
  }

  .section--cta .cta-band--works .note {
    font-size: 13px !important;
    color: #fff !important;
  }
}

/* =========================================================
   Works Slider Card Refresh
   施工実績スライダーのデザイン修正（統一デザイン）
========================================================= */

/* カード本体：枠線を消して影と丸みをつける */
#works .card {
  display: flex;
  flex-direction: column;
  background: #fff !important;
  border: none !important;
  /* 古い枠線を削除 */
  border-radius: 24px !important;
  /* 大きな丸み */
  box-shadow: 0 10px 30px rgba(30, 136, 255, 0.1) !important;
  /* 青みのある影 */
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease !important;
  height: 100%;
  /* スライドの高さを揃える */
}

/* ホバー時の動き：浮き上がって影を濃く */
#works .card:hover {
  transform: translateY(-10px) !important;
  box-shadow: 0 20px 40px rgba(30, 136, 255, 0.2) !important;
}

/* 画像エリア：枠いっぱいに広げる */
#works .card .thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  /* 比率固定 */
  margin: 0;
  padding: 0;
  background: #edf2f7;
  overflow: hidden;
  border-radius: 0;
  /* 画像部分の角丸は親に任せる */
}

/* 画像本体：ズーム効果用 */
#works .card .thumb img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

/* 画像ホバー時のズーム */
#works .card:hover .thumb img {
  transform: scale(1.08);
}

/* 日付（カテゴリカラーの青文字に） */
#works .card time.meta {
  display: block;
  margin: 16px 20px 0;
  font-size: 12px;
  font-weight: 700;
  color: #1e88ff;
  letter-spacing: 0.05em;
}

/* タイトル */
#works .card h3 {
  margin: 8px 20px 12px;
  font-size: 17px;
  font-weight: 800;
  color: #0e255a;
  line-height: 1.5;
}

/* 所在地などのメタ情報（下部に配置） */
#works .card p.meta {
  margin: auto 20px 20px;
  /* 上マージンautoで下寄せ */
  padding-top: 12px;
  border-top: 1px solid #f0f4f8;
  /* 薄い区切り線 */
  font-size: 13px;
  color: #5a647b;
}

/* スライダーの矢印ボタン（見やすく調整） */
.works-slider .swiper-button-next,
.works-slider .swiper-button-prev {
  background: #fff !important;
  color: #1e88ff !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  box-shadow: 0 4px 12px rgba(30, 136, 255, 0.2) !important;
  border: 2px solid #fff !important;
}

.works-slider .swiper-button-next:hover,
.works-slider .swiper-button-prev:hover {
  background: #1e88ff !important;
  color: #fff !important;
  transform: translateY(-50%) scale(1.1) !important;
}

/* =========================================================
   CTA Section - .cta-band--works 専用スタイル
   施工実績ページと完全統一
========================================================= */

/* コンテナ設定（全画面背景の準備） */
.cta-band--works {
  width: 100%;
  padding: 60px 0 !important;
  margin-top: 0 !important;

  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;

  position: relative;
  overflow: visible !important;

  /* レイアウト */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

/* 全画面背景（疑似要素） */
.cta-band--works::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  z-index: -1;

  /* 青グラデーション＋ストライプ */
  background: linear-gradient(135deg, #1e88ff 0%, #40c9ff 100%);
  background-image:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.1) 0, rgba(255, 255, 255, 0.1) 10px, transparent 10px, transparent 20px),
    linear-gradient(135deg, #1e88ff 0%, #40c9ff 100%);
  box-shadow: 0 10px 40px rgba(30, 136, 255, 0.2);
}

/* テキスト色調整 */
.cta-band--works h2,
.cta-band--works .note {
  color: #fff !important;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1);
}

.cta-band--works h2 {
  font-size: clamp(28px, 4vw, 40px);
  margin-bottom: 16px;
}

/* 画像（ポラロイド風） */
.cta-band--works .ph {
  flex: 0 0 45%;
  max-width: 400px;
  background: #fff !important;
  border: 8px solid #fff;
  border-radius: 4px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  transform: rotate(3deg);
  overflow: visible;
  aspect-ratio: auto;
}

/* 画像ホバー */
.cta-band--works:hover .ph {
  transform: rotate(0deg) scale(1.02);
}

/* --- アクションボタンエリア --- */
.cta-band--works .cta-band__actions {
  display: flex !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
  margin-top: clamp(20px, 3vw, 32px) !important;
}

/* メインボタン（黄色） */
.cta-band--works .cta-band__actions .btn--primary {
  background: #ffcc00 !important;
  color: #0e255a !important;
  border: 3px solid #fff !important;
  box-shadow: 0 6px 0 #d4a000 !important;
  border-radius: 50px !important;
  padding: 16px 40px !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  animation: pulse-btn 2s infinite;
}

.cta-band--works .cta-band__actions .btn--primary:hover {
  background: #ffdb4d !important;
  transform: translateY(4px) !important;
  box-shadow: 0 2px 0 #d4a000 !important;
  opacity: 1 !important;
}

/* サブボタン（白ゴースト・電話） */
.cta-band--works .cta-band__actions .btn.ghost {
  background: transparent !important;
  color: #fff !important;
  border: 2px solid #fff !important;
  box-shadow: none !important;
  border-radius: 50px !important;
  padding: 16px 32px !important;
  font-weight: 700 !important;
}

.cta-band--works .cta-band__actions .btn.ghost:hover {
  background: #fff !important;
  color: #1e88ff !important;
  transform: translateY(-2px) !important;
}

/* CTAモバイル調整 */
@media (max-width: 900px) {
  .cta-band--works {
    flex-direction: column-reverse !important;
    text-align: center !important;
    padding: 40px 0 !important;
  }

  .cta-band--works .ph {
    width: 80% !important;
    margin-bottom: 20px !important;
    transform: rotate(-2deg) !important;
  }

  .cta-band--works .cta-band__actions {
    justify-content: center !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
  }

  .cta-band--works .cta-band__actions .btn {
    width: 100% !important;
    max-width: 400px !important;
  }
}

/* 鼓動アニメーション定義 */
@keyframes pulse-btn {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }

  100% {
    transform: scale(1);
  }
}

@media (max-width: 768px) {
  .cta-band--works h2 {
    font-size: 24px !important;
  }

  .cta-band--works .note {
    font-size: 14px !important;
    line-height: 1.9;
  }

  .cta-band--works .cta-band__actions .btn--primary {
    padding: 14px 32px !important;
    font-size: 16px !important;
  }

  .cta-band--works .cta-band__actions .btn.ghost {
    padding: 14px 28px !important;
    font-size: 15px !important;
  }
}

@media (max-width: 600px) {
  .cta-band--works h2 {
    font-size: 20px !important;
  }

  .cta-band--works .note {
    font-size: 13px !important;
  }
}