/* サービス一覧の部品（inc/tochigi-services.php・2026-10-15）
 * トップ（新デザインv3）では --ov-* の書体と色、ほかのページでは style.css の --serif / --green を使う。
 * 🔴 文字は14px以上。ボタンの文言に矢印を付けない。押す的は44px以上。 */
.svc-band, .svc-page, .svc-mini {
  --svc-green: var(--ov-green, var(--green, #1f3a2e));
  --svc-green-deep: var(--ov-green-deep, var(--green-deep, #152a20));
  --svc-red: var(--ov-red, var(--red, #b5372e));
  --svc-red-deep: var(--ov-red-deep, #962b23);
  --svc-ink: var(--ov-ink, var(--ink, #23291f));
  --svc-sub: var(--ov-sub, var(--ink-3, #4a5142));
  --svc-line: var(--ov-line, var(--line-2, #d6d9d0));
  --svc-tint: var(--ov-tint, var(--bg-sub, #f3f4f0));
  --svc-serif: var(--ov-mincho, var(--serif, "Hiragino Mincho ProN", serif));
  --svc-sans: var(--ov-gothic, var(--sans, "Hiragino Sans", sans-serif));
}

/* ボタン */
.svc-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px;
  border-radius: 4px; border: 1px solid var(--svc-green); background: var(--svc-green); color: #fff !important;
  font-family: var(--svc-sans); font-size: 15px; font-weight: 700; letter-spacing: .04em; line-height: 1.4; text-align: center;
  text-decoration: none !important; transition: background .15s, border-color .15s, color .15s;
}
.svc-btn:hover { background: var(--svc-green-deep); border-color: var(--svc-green-deep); }
.svc-btn--red { background: var(--svc-red); border-color: var(--svc-red); }
.svc-btn--red:hover { background: var(--svc-red-deep); border-color: var(--svc-red-deep); }
.svc-btn--line { background: #fff; color: var(--svc-green) !important; }
.svc-btn--line:hover { background: var(--svc-green); color: #fff !important; }
.svc-btn--s { min-height: 44px; padding: 0 16px; font-size: 14px; }
.svc-btn:focus-visible { outline: 3px solid var(--svc-red); outline-offset: 3px; }
.svc-btn--red:focus-visible { outline-color: var(--svc-green); }

/* カード */
.svc-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.svc-card {
  display: flex; flex-direction: column; gap: 10px; min-width: 0; background: #fff; border: 1px solid var(--svc-line);
  border-radius: 10px; padding: 22px 22px 22px; color: var(--svc-ink); font-family: var(--svc-sans);
}
.svc-card--consult { border: 2px solid var(--svc-red); }
.svc-card__label { font-size: 14px; font-weight: 700; color: var(--svc-red); letter-spacing: .04em; line-height: 1.5; }
.svc-card__title { margin: 0; font-family: var(--svc-serif); font-weight: 700; font-size: 21px; line-height: 1.45; color: var(--svc-green); letter-spacing: .02em; text-wrap: balance; }
.svc-card__lead { margin: 0; font-size: 15px; line-height: 1.85; color: var(--svc-sub); flex: 1 0 auto; }
.svc-card__items { margin: 2px 0 0; padding-left: 1.2em; font-size: 15px; line-height: 1.8; color: var(--svc-ink); }
.svc-card__items li + li { margin-top: 4px; }
.svc-card__price { margin: 4px 0 0; font-size: 15px; font-weight: 700; color: var(--svc-ink); display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.svc-card__price span { font-size: 14px; font-weight: 700; color: #fff; background: var(--svc-green); border-radius: 3px; padding: 2px 8px; }
.svc-card__act { margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.svc-card__act .svc-btn { flex: 1 1 auto; }

/* トップ・締めの帯 */
.svc-band { background: var(--svc-tint); padding-block: clamp(56px, 7vw, 104px); }
.svc-band__in { max-width: 1440px; margin-inline: auto; padding-inline: var(--ov-pad, var(--pad, 20px)); box-sizing: border-box; }   /* トップv3の .ov-wrap と同じ幅にそろえる */
.svc-band__head { display: grid; gap: 10px; margin-bottom: 28px; }
.svc-band__kicker { margin: 0; font-family: var(--svc-sans); font-size: 14px; font-weight: 700; color: var(--svc-red); letter-spacing: .12em; }
.svc-band__h { margin: 0; font-family: var(--svc-serif); font-weight: 700; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.45; color: var(--svc-green); letter-spacing: .03em; }
.svc-band__note { margin: 0; font-family: var(--svc-sans); font-size: 16px; line-height: 1.8; color: var(--svc-sub); }
.svc-band__more { margin: 26px 0 0; text-align: center; }
.svc-band__more .svc-btn { min-width: 240px; }
.svc-grid--compact .svc-card { padding: 20px; }
.svc-grid--compact .svc-card__title { font-size: 19px; }

/* サービス一覧ページ */
.svc-page { display: grid; gap: 36px; }
.svc-page__lead { margin: 0; max-width: 46em; font-size: 16px; line-height: 2; color: var(--svc-ink); }
.svc-toc { display: flex; flex-wrap: wrap; gap: 8px; }
.svc-toc__a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid var(--svc-line); border-radius: 4px; background: #fff; font-size: 14px; font-weight: 700; color: var(--svc-green); text-decoration: none; }
.svc-toc__a:hover { border-color: var(--svc-green); }
.svc-page .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }   /* 4枚を2列×2段に（3列だと1枚だけ残る） */
@media (max-width: 760px) { .svc-page .svc-grid { grid-template-columns: 1fr; } }
.svc-page .svc-card { scroll-margin-top: 96px; padding: 26px 26px 24px; }
.svc-page .svc-card__title { font-size: 24px; }
.svc-flow, .svc-faq { display: grid; gap: 16px; }
.svc-flow h2, .svc-faq h2 { margin: 0; font-family: var(--svc-serif); font-size: 24px; color: var(--svc-green); padding-bottom: 12px; border-bottom: 2px solid var(--svc-green); }
.svc-flow ol { margin: 0; padding: 0; list-style: none; counter-reset: svcf; display: grid; gap: 12px; }
.svc-flow li { counter-increment: svcf; display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; align-items: start; background: #fff; border: 1px solid var(--svc-line); border-radius: 8px; padding: 16px 18px; }
.svc-flow li::before { content: counter(svcf); grid-row: 1 / span 2; width: 40px; height: 40px; border-radius: 50%; background: var(--svc-green); color: #fff; font-family: var(--svc-serif); font-weight: 700; font-size: 18px; display: flex; align-items: center; justify-content: center; }
.svc-flow li b { font-size: 17px; color: var(--svc-ink); line-height: 1.6; }
.svc-flow li span { font-size: 15px; line-height: 1.8; color: var(--svc-sub); }
.svc-faq__item { border-bottom: 1px solid var(--svc-line); }
.svc-faq__item summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; padding: 10px 0; font-size: 16px; font-weight: 700; color: var(--svc-ink); }
.svc-faq__item p { margin: 0 0 16px; font-size: 15px; line-height: 1.9; color: var(--svc-sub); }
.svc-page__note { margin: 0; font-size: 14px; color: var(--svc-sub); }

/* 締めの案内・記事の右欄の小さなボタン列 */
.svc-mini { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.side-cta .svc-mini .svc-btn { flex: 1 1 auto; }
.cta .svc-mini { justify-content: flex-start; }

@media (max-width: 600px) {
  .svc-card, .svc-page .svc-card { padding: 18px; }
  .svc-page .svc-card__title { font-size: 21px; }
  .svc-card__act .svc-btn { width: 100%; }
  .svc-band__more .svc-btn { width: 100%; min-width: 0; }
}

/* ヘッダーのメニュー（2026-10-15「サービス」を足して7項目。1024幅で「無料相談」が画面外へ出ていた）
   style.css の .gnav（gap 30px・15px）より後に読むので、ここで狭い幅だけ詰める */
@media (min-width: 821px) and (max-width: 1240px) {
  .gnav, .gnav ul { gap: 18px !important; }
  .gnav a { font-size: 14px !important; }
  .gnav li.is-cta a, .gnav a.is-cta { padding: 0 16px !important; }
  .brand__en { display: none !important; }
}
/* 821〜1040px は7項目が1行に収まらないので、スマホと同じ開閉式のメニューにする（style.css の 820px 以下と同じ定義） */
@media (min-width: 821px) and (max-width: 1040px) {
  .nav-toggle { display: block !important; }
  .gnav { display: none !important; }
  .gnav.is-open {
    display: block !important; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--bg, #faf8f3); border-bottom: 1px solid var(--green, #1f3a2e); padding: 20px var(--pad, 32px); z-index: 40;
  }
  .gnav.is-open ul { flex-direction: column; gap: 2px !important; }
  .gnav.is-open a { display: block; padding: 12px 0; min-height: 44px; }
  .gnav.is-open li.is-cta a, .gnav.is-open a.is-cta { display: inline-flex; padding: 0 22px !important; }
  .site-header { position: relative; }
  .site-header .wrap { align-items: center; }
}