/* =========================================
  Service Page
========================================= */
.service-page {
  padding: 54px 0 110px;
}

.service-page__inner {
  width: min(1160px, 92%);
  margin: 0 auto;
}

/* ✅ Tablet：左右3% / SP：左右5% */
@media (max-width:1200px) {
  .service-page__inner {
    width: 100%;
    padding-left: 3%;
    padding-right: 3%;
  }
}

@media (max-width:750px) {
  .service-page__inner {
    padding-left: 5%;
    padding-right: 5%;
  }
}

/* =========================================
  本見出し（about方式：中央固定）
========================================= */
.service-page .top-bookhead {
  --book-w: min(240px, 56vw);
  --line-y: 66px;

  position: relative;
  width: 100%;
  height: 132px;
  margin: 0 auto 56px;

  display: block;
  padding-top: 0;
}

.service-page .top-bookhead__bookwrap {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: var(--book-w);
}

.service-page .top-bookhead__book {
  width: 100%;
  height: auto;
  display: block;
}

.service-page .top-bookhead__label {
  position: absolute;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
  line-height: 1;
  white-space: nowrap;
  font-size: 24px;
  color: #333;
}

.service-page .top-bookhead__line {
  position: absolute;
  top: var(--line-y);
  width: calc(50% - (var(--book-w) / 2) - 22px);
  height: auto;
  max-height: 18px;
  display: block;
}

.service-page .top-bookhead__line:first-of-type {
  left: 0;
}

.service-page .top-bookhead__line:last-of-type {
  right: 0;
}

/* =========================================
  サービス 2カラム（PC）
========================================= */
.service-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 90px;
  row-gap: 110px;
  align-items: start;
}

.service-card {
  position: relative;
  min-height: 320px;
  padding: 38px 24px 36px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  /* ✅ 背景がはみ出して他要素に見えないように */
  overflow: hidden;
}

/* =========================================
  背景SVG（番号付き）※ここを1箇所だけに統一
  - inset:0 を使わず「固定箱」で中央に配置
  - contain で縦横比維持（引き伸ばしなし）
========================================= */
.service-page .service-card::before {
  content: "";
  position: absolute;

  /* ✅ inset を明示的に無効化（過去の残骸があっても潰す） */
  inset: auto;
  right: auto;
  bottom: auto;

  left: 50%;
  top: 50%;
  width: var(--svc-bg-size, 360px);
  height: var(--svc-bg-size, 360px);
  transform: translate(-50%, -50%);

  background-image: var(--service-bg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  pointer-events: none;
  z-index: 0;
}

.service-card__title,
.service-card__desc {
  position: relative;
  z-index: 1;
}

.service-card__title {
  margin: 0 0 14px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.7;
  color: #222;
  letter-spacing: 0.02em;
}

.service-card__desc {
  margin: 0;
  font-size: 18px;
  line-height: 2;
  color: #333;
  max-width: 430px;
}

/* =========================================
  CTA
========================================= */
.service-cta {
  margin-top: 90px;
  text-align: center;
}

.service-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 34px;
  border-radius: 9999px;
  background: #163B6B;
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  text-decoration: none;
  border: 2px solid transparent;
  transition: opacity .2s ease, transform .2s ease;
}

.service-cta__btn:hover {
  opacity: .92;
  transform: translateY(-1px);
}

/* =========================================
  Tablet
========================================= */
@media (max-width:1200px) {
  .service-grid {
    column-gap: 60px;
    row-gap: 90px;
  }

  /* ✅ 背景サイズを少し縮小 */
  .service-page .service-card::before {
    width: 320px;
    height: 320px;
  }
}

/* =========================================
  SP（1カラム）
========================================= */
@media (max-width:750px) {
  .service-page {
    padding: 40px 0 80px;
  }

  .service-page .top-bookhead {
    --book-w: min(190px, 62vw);
    --line-y: 58px;
    height: 116px;
    margin: 0 auto 34px;
  }

  .service-page .top-bookhead__label {
    font-size: 16px;
  }

  .service-page .top-bookhead__line {
    max-height: 16px;
  }

  .service-grid {
    grid-template-columns: 1fr;
    row-gap: 52px;
  }

  .service-card {
    min-height: 240px;
    padding: 26px 16px 22px;
  }

  /* ✅ SP：背景をさらに小さく固定 */
  .service-page .service-card::before {
    width: 240px;
    height: 240px;
  }

  .service-card__title {
    font-size: 15px;
    line-height: 1.75;
  }

  .service-card__desc {
    font-size: 12px;
    line-height: 2;
  }

  .service-cta {
    margin-top: 60px;
  }
}

/* さらに小さい端末用（必要なら） */
@media (max-width:375px) {
  .service-page .service-card::before {
    width: 220px;
    height: 220px;
  }
}

/* =========================================
  SPで右側に余白（横スクロール）が出る対策
  width + padding で実幅が100%を超えないようにする
========================================= */
.service-page__inner {
  box-sizing: border-box;
}

/* 念のため：serviceページだけ横はみ出しを隠す（最終保険） */
body.page-template-page-service-php {
  overflow-x: hidden;
}

/* =========================
   手書きフォント読み込み
========================= */
@font-face {
  font-family: "VivalaboTegaki";
  src: url("../fonts/851tegaki_zatsu_normal_0883.ttf") format("truetype");
  font-display: swap;
  font-weight: 400;
  font-style: normal;
}

/* =========================
   手書きフォント適用
========================= */
.top-bookhead__label.viva-hand {
  font-family: "VivalaboTegaki", "Noto Sans JP", sans-serif !important;
  font-weight: 400 !important;
  /* ← @font-face が 400 なので合わせる */
  text-align: center;
}