@charset "utf-8";
/* =====================================================================
   field-c.net 2026 リニューアル サービス利用料（service.php）
   - 料金カード（.scard）・交通費・お問合せ・フッタは fc2026.css
   - メディアクエリはファイル末尾に集約
   ===================================================================== */

/* ---------------------------------------------------------------------
   サービス利用料
--------------------------------------------------------------------- */
.sv_plan { padding-top: clamp(40px, 5vw, 90px); }
.sv_intro {
  width: min(100% - var(--gutter) * 2, 680px);
  margin: 1.2em auto clamp(28px, 3vw, 52px);
  color: #004444;
  line-height: 2;
}

/* 料金カードは本文量が多いので、写真列をトップより少し細く */
.page-service .scard { grid-template-columns: 32% 1fr; }
.page-service .scard--imgR { grid-template-columns: 1fr 32%; }

/* ---------------------------------------------------------------------
   お支払い
   ロゴは幅で大きさを揃える（--logo-w：カード形ロゴの幅 × 各 li の --k）。
   どの SVG も絵柄が上下中央に描かれているので、行内は上下中央揃え
--------------------------------------------------------------------- */
.sv_pay {
  width: min(100% - var(--gutter) * 2, 880px);
  margin-inline: auto;
  padding-block: clamp(48px, 5vw, 80px) var(--sec-pad);
}
.sv_pay_logo {
  --logo-w: 90px;
  --row-gap: 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 30px;
  margin-top: 1.6em;
  padding-inline: 24px;
}
/* 行間は各ロゴの上下マージンで取る（改行用の空の項目の行に行間が付かないように） */
.sv_pay_logo li { flex: none; width: calc(var(--logo-w) * var(--k, 1)); margin-block: calc(var(--row-gap) / 2); }
.sv_pay_logo img { width: 100%; height: auto; }
.sv_pay_logo .sv_pay_br { flex-basis: 100%; width: auto; height: 0; margin: 0; }

.sv_pay_note { margin: 1.6em 0 clamp(32px, 4vw, 64px); padding-inline: clamp(0px, 2vw, 32px); color: #000; font-size: var(--fs-s); }
.sv_pay_note > li { position: relative; padding-left: 1.3em; line-height: 1.8; }
.sv_pay_note > li + li { margin-top: .5em; }
.sv_pay_note > li::before { content: "◦"; position: absolute; left: 0; color: var(--c-text-sub); }
.sv_pay_note dl { margin-top: .2em; }
.sv_pay_note dt { margin-top: .4em; font-weight: normal; }

/* =====================================================================
   メディアクエリ
   ===================================================================== */

/* ---- タブレット（デザイン 1024px：ロゴ幅71px・横の間隔30px） ---- */
@media (max-width: 1024px) {
  .sv_pay_logo { --logo-w: 6.93vw; --row-gap: 1.4vw; column-gap: 2.93vw; padding-inline: 0; }
}

/* ---- スマートフォン ---- */
@media (max-width: 767px) {
  .page-service .scard,
  .page-service .scard--imgR { grid-template-columns: 1fr; }
  /* 初回ご相談の写真も、ほかのカードと同じ横長の枠（デザイン 373×300）で切り抜く */
  .page-service .scard--first .scard_img { aspect-ratio: 373 / 300; }
  .page-service .scard--first .scard_price > div { display: flex; }
  .page-service .scard--first .scard_price dd { margin: 0; }

  /* お支払い：種別の改行をやめ、1行5つ前後で詰めて流す（デザイン 393px：ロゴ幅49px・横の間隔20px） */
  .sv_pay_logo { --logo-w: 12.5vw; --row-gap: 3.1vw; column-gap: 5.1vw; padding-inline: 0; }
  .sv_pay_logo .sv_pay_br { display: none; }
}