@charset "utf-8";
/* ===== サービス一覧（page-service.php 専用） ===== */

/* 上の大きな背景写真 */
.s-ttit .svc-hero {
  background: url(/wp-content/uploads/2026/10/kv-water.jpg) center / cover no-repeat;
}

/* 冒頭の見出し */
.svc-intro .recu-box {
  position: relative; overflow: hidden; text-align: center;
  padding: 80px 60px 70px; border-top: 6px solid #50ad92; border-radius: 16px;
  background: linear-gradient(135deg, #fff 55%, #e8f5f1);
}
.svc-intro .recu-box::before {
  content: "SERVICE"; position: absolute; top: 4px; left: 50%;
  transform: translateX(-50%); white-space: nowrap; pointer-events: none;
  font-size: 130px; font-weight: 700; line-height: 1; letter-spacing: .1em;
  color: rgba(80, 173, 146, .13);
}
.svc-intro .recu-box h3 {
  position: relative; display: inline-block;
  font-size: 42px; letter-spacing: .12em; padding: 0 0 22px; margin-bottom: 28px;
}
.svc-intro .recu-box h3::after {
  content: ""; position: absolute; left: 50%; bottom: 0;
  width: 90px; height: 4px; border-radius: 2px; background: #50ad92;
  transform: translateX(-50%);
}
.svc-intro .greet p {
  position: relative; max-width: 780px; margin: 0 auto;
  font-size: 20px; line-height: 2;
}

/* カード */
.svc-grid {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 28px;
  max-width: 1200px; margin: 0 auto; padding: 0 20px; box-sizing: border-box;
}
.svc-card {
  width: calc((100% - 56px) / 3);
  background: #fff; border-radius: 16px; overflow: hidden;
  box-shadow: 0 10px 30px rgba(4, 53, 128, .15);
  transition: transform .3s, box-shadow .3s;
}
.svc-card:hover { transform: translateY(-6px); box-shadow: 0 16px 36px rgba(4, 53, 128, .25); }
.svc-card figure { margin: 0; aspect-ratio: 3 / 2; overflow: hidden; }
.svc-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.svc-card:hover img { transform: scale(1.06); }
.svc-body { padding: 24px 26px 28px; }
.svc-body h3 {
  display: inline-block; font-size: 20px; font-weight: 700; color: #002651;
  padding-bottom: 10px; margin-bottom: 12px; border-bottom: 3px solid #50ad92;
}
.svc-body p { font-size: 15px; line-height: 1.8; margin: 0; }

/* 電話の帯 */
#svc-cta {
  margin-top: 40px; padding: 80px 20px; text-align: center; color: #fff;
  background:
    linear-gradient(rgba(0, 38, 81, .65), rgba(0, 38, 81, .65)),
    url(/wp-content/uploads/2026/10/top_01_bg.jpg) center / cover no-repeat;
}
.svc-cta-lead { font-size: 24px; font-weight: 700; letter-spacing: .08em; margin-bottom: 28px; }
.svc-cta-tel {
  display: inline-block; padding: 18px 48px; border-radius: 60px;
  background: #fff; color: #002651; font-size: 30px; font-weight: 700;
  text-decoration: none; letter-spacing: .08em;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25); transition: transform .3s;
}
.svc-cta-tel:hover { transform: translateY(-3px); }

/* スマホ・タブレット */
@media screen and (max-width: 900px) { .svc-card { width: calc((100% - 28px) / 2); } }
@media screen and (max-width: 600px) {
  .svc-intro .recu-box { padding: 60px 24px 50px; }
  .svc-intro .recu-box::before { font-size: 64px; }
  .svc-intro .recu-box h3 { font-size: 28px; }
  .svc-intro .greet p { font-size: 16px; }
  .svc-card { width: 100%; }
  .svc-grid { gap: 20px; }
  #svc-cta { padding: 56px 20px; }
  .svc-cta-lead { font-size: 18px; }
  .svc-cta-tel { font-size: 22px; padding: 14px 32px; }
}

/* スマホ：ヒーローの英語見出しを1行にする（強め） */
@media screen and (max-width: 600px) {
  .s-ttit .s-ttit_bg.svc-hero .s-ttit_box .s-ttit_sub {
    font-size: 5vw !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    letter-spacing: 0 !important;
  }
}