/* サービス一覧（/service）だけで使う部品。sub.css の後に読む */

/* ページの頭：節への目次 */
.jump { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 8px; }
.jump a { display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; background: var(--paper); border-radius: var(--radius); font-size: var(--fs-s); font-weight: 600; text-decoration: none; transition: background-color 0.2s; }
.jump a::after { content: "↓"; font-family: var(--font-en); }
.jump a:hover { background: var(--paper-2); }

/* サービスのカード */
.svc-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.svc-cards.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.svc-cards > li { display: flex; }
.svc-card { position: relative; flex: 1; display: flex; flex-direction: column; padding: 32px 32px 28px; background: var(--paper); border-radius: var(--radius); text-decoration: none; transition: background-color 0.2s; }
.textured .svc-card { background: var(--white); }
.svc-card:hover { background: var(--paper-2); }
.textured .svc-card:hover { background: #fafafa; }
.svc-card h3 { font-size: var(--fs-l); font-weight: 600; line-height: 1.5; font-feature-settings: "palt"; }
.sc-desc { margin-top: 10px; font-size: var(--fs-s); color: var(--ink-2); }
.sc-price { margin-top: auto; padding-top: 28px; padding-right: 40px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 2px; }
.sc-price b { font-family: var(--font-en); font-size: 1.75rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }
.sc-price small { font-size: var(--fs-s); font-weight: 600; }
.sc-tax { margin-right: 10px; padding: 1px 8px; background: var(--white); font-size: var(--fs-xs); font-weight: 500; color: var(--ink-2); border-radius: 2px; align-self: center; }
.textured .sc-tax { background: var(--paper); }
.sc-part { display: inline-flex; align-items: baseline; gap: 2px; }
.sc-part + .sc-part { margin-left: 16px; }
.sc-part small:first-child { margin-right: 4px; }
.svc-card::after { content: "→"; position: absolute; right: 32px; bottom: 32px; font-family: var(--font-en); font-size: var(--fs-l); line-height: 1; transition: transform 0.2s; }
.svc-card:hover::after { transform: translateX(4px); }

/* 迷ったときの選び方 */
.guide { display: grid; gap: 8px; }
.guide-row { position: relative; display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px 56px; align-items: center; padding: 28px 96px 28px 36px; background: var(--white); border-radius: var(--radius); text-decoration: none; transition: background-color 0.2s; }
.guide-row:hover { background: #fafafa; }
.guide-row::after { content: "→"; position: absolute; right: 36px; top: 50%; margin-top: -0.5em; font-family: var(--font-en); font-size: var(--fs-l); line-height: 1; transition: transform 0.2s; }
.guide-row:hover::after { transform: translateX(4px); }
.g-label { display: inline-block; padding: 1px 8px; background: var(--paper); font-size: var(--fs-xs); font-weight: 500; color: var(--ink-2); border-radius: 2px; }
.g-aim h3 { margin-top: 8px; font-size: var(--fs-l); font-weight: 600; font-feature-settings: "palt"; }
.g-aim p { margin-top: 4px; font-size: var(--fs-s); color: var(--ink-2); }
.g-svc { display: flex; flex-direction: column; gap: 2px; }
.g-svc b { font-size: var(--fs-b); font-weight: 700; }
.g-svc span { font-family: var(--font-en); font-size: var(--fs-s); font-weight: 600; color: var(--ink-2); }
.guide-note { margin-top: 28px; font-size: var(--fs-s); color: var(--ink-2); }

/* 料金の目安：表を2つに分ける */
.price-group { margin-bottom: 16px; font-size: var(--fs-l); font-weight: 600; }
.price-table-wrap + .price-cards + .price-group { margin-top: 56px; }

@media (max-width: 1024px) {
  .svc-cards { grid-template-columns: 1fr 1fr; }
  .guide-row { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 640px) {
  .jump { margin-top: 28px; gap: 6px; }
  .jump a { padding: 10px 14px; font-size: var(--fs-xs); }
  .svc-cards, .svc-cards.cols-2 { grid-template-columns: 1fr; }
  .svc-card { padding: 24px 20px 22px; }
  .svc-card::after { right: 20px; bottom: 26px; }
  .sc-price { padding-top: 20px; }
  .sc-price b { font-size: 1.5rem; }
  .guide-row { padding: 22px 56px 22px 20px; }
  .guide-row::after { right: 20px; }
  .price-table-wrap + .price-cards + .price-group { margin-top: 40px; }
}

/* 折り返しの位置を決める・2つの料金表の列をそろえる */
.nw { display: inline-block; }
#price .price-table { table-layout: fixed; }
#price .price-table thead th:first-child { width: 25%; }