/* TOP pricing: concise free-service labels, with details beside the price. */
.top-fees { padding: 24px 18px 20px; color: #173954; background: #f3f8ff; scroll-margin-top: calc(var(--water-header-height, 60px) + 12px); }
.top-fees h2 { margin: 0 0 18px; color: #064db2; font-size: clamp(19px, 5vw, 28px); line-height: 1.45; text-align: center; font-weight: 900; }
.top-fees h2 span { white-space: nowrap; }
.top-fees__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(8px, 2.5vw, 18px); max-width: 580px; margin: 0 auto; }
.top-fees__item { aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8px 4px; border-radius: 50%; background: #ffe83c; color: #064ba9; }
.top-fees__item > span { display: flex; align-items: center; justify-content: center; min-height: 2.6em; font-size: clamp(12px, 3.4vw, 19px); line-height: 1.3; font-weight: 900; text-align: center; }
.top-fees__item strong { display: block; font-size: clamp(34px, 10.5vw, 69px); font-weight: 900; line-height: 1.05; font-variant-numeric: lining-nums; }
.top-fees__item small { font-size: .4em; margin-left: 2px; }
.top-fees__promise { margin: 18px 0 12px; font-size: clamp(14px, 3.7vw, 18px); line-height: 1.6; font-weight: 800; text-align: center; }
.top-fees__note { margin: 0; color: #495b6d; font-size: 13px; line-height: 1.75; }
.top-fees__details { margin-top: 16px; border-top: 1px solid #c6daef; border-bottom: 1px solid #c6daef; }
.top-fees__details summary { position: relative; padding: 14px 28px 14px 0; color: #074fae; font-size: 15px; font-weight: 800; line-height: 1.5; cursor: pointer; list-style: none; }
.top-fees__details summary::-webkit-details-marker { display: none; }
.top-fees__details summary::after { content: '+'; position: absolute; right: 3px; top: 12px; font-size: 23px; line-height: 1; }
.top-fees__details[open] summary::after { content: '−'; }
.top-fees__detail-body { padding: 0 0 16px; }
.top-fees__detail-body dl { margin: 0; }
.top-fees__detail-body dl > div { padding: 12px 0; border-top: 1px solid #dae6f2; }
.top-fees__detail-body dt { margin-bottom: 5px; color: #173e6b; font-size: 15px; line-height: 1.5; font-weight: 800; }
.top-fees__detail-body dd { margin: 0; color: #41556c; font-size: 14px; line-height: 1.85; }
.top-fees__price-link { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-top: 10px; padding: 12px 14px; border: 1px solid #0b60c2; border-radius: 6px; color: #064faa; background: #fff; text-decoration: none; font-size: 15px; line-height: 1.5; font-weight: 800; }
.top-consultation-fees { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 2px 12px; margin: 0; padding: 0 6px; color: #064faa; text-align: center; font-size: 15px; line-height: 1.5; font-weight: 800; }
.top-consultation-fees > span { white-space: nowrap; }
.top-consultation-fees strong { margin-left: 4px; font-size: 25px; line-height: 1.2; }
.top-consultation-fees small { font-size: 15px; }
.top-consultation-fees > a { color: #41556c; font-size: 12px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.top-fees a:focus-visible, .top-fees summary:focus-visible, .top-consultation-fees a:focus-visible { outline: 3px solid #ff9c00; outline-offset: 4px; }
.top-price-guide .free-service-table th { width: 50%; }
.top-price-guide .price-table td strong { white-space: normal; overflow-wrap: anywhere; }
.top-price-guide #cost-title { scroll-margin-top: 100px; }
.top-price-guide .section-intro { line-height: 1.85; }
@media (max-width: 360px) { .top-fees { padding-inline: 12px; } .top-fees__grid { gap: 8px; } .top-fees__item > span { font-size: 12px; } }

/* Reference LP notes at 390px: 11px / 500 / 1.4 / #5a5a5a. */
body.top-page {
  --top-note-size: 15px;
  --top-note-leading: 1.666667;
  --top-note-color: #5a5a5a;
}
body.top-page .lp05-hero-note,
body.top-page .lp05-minor-note,
body.top-page .top-fees__note,
body.top-page .top-consultation-fees > a,
body.top-page .lp05-work-notes,
body.top-page .lp05-service-related {
  font-family: "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
  color: var(--top-note-color);
  font-size: var(--top-note-size);
  font-weight: 500;
  line-height: var(--top-note-leading);
  letter-spacing: normal;
  text-align: left;
}
body.top-page .lp05-hero-note {
  margin: -1px 0 0;
  padding: 6px 12px 8px;
  color: rgba(255, 255, 255, .8);
  background: #0145cd;
  border: 0;
}
body.top-page .lp05-minor-note a {
  color: inherit;
  font-weight: inherit;
  text-decoration-thickness: 1px;
}
body.top-page .top-fees { background: #fff; }
body.top-page .top-fees__note { margin: 0; padding: 0; background: none; border: 0; }
body.top-page .top-fees__details { margin-top: 8px; border: 0; }
body.top-page .top-fees__details summary {
  min-height: 36px;
  padding: 9px 24px 9px 0;
  color: var(--top-note-color);
  font-size: var(--top-note-size);
  font-weight: 500;
  line-height: var(--top-note-leading);
}
body.top-page .top-fees__details summary::after { top: 8px; font-size: 18px; }
body.top-page .top-fees__detail-body { padding-bottom: 8px; }
body.top-page .top-fees__detail-body dl > div { padding: 9px 0; border-color: #e7e7e7; }
body.top-page .top-fees__detail-body dt,
body.top-page .top-fees__detail-body dd {
  color: var(--top-note-color);
  font-size: var(--top-note-size);
  line-height: 1.6;
}
body.top-page .top-fees__detail-body dt { margin-bottom: 3px; font-weight: 600; }
body.top-page .top-fees__detail-body dd { font-weight: 500; }
body.top-page .top-fees__price-link {
  min-height: 36px;
  margin-top: 3px;
  padding: 9px 0;
  border: 0;
  color: var(--top-note-color);
  font-size: var(--top-note-size);
  font-weight: 500;
  line-height: var(--top-note-leading);
  text-decoration: underline;
  text-underline-offset: 3px;
}
body.top-page .lp05-service-related { padding: 0; background: none; border: 0; }
body.top-page .top-consultation-fees {
  display: block;
  width: 100%;
  max-width: 630px;
  margin: 0 auto;
  padding: 0;
  text-align: left;
}
body.top-page .top-consultation-fees > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  padding-left: clamp(7px, 2vw, 16px);
  overflow: hidden;
  border: 1px solid #2854a3;
  border-radius: 5px;
  background: #fff;
  color: #2854a3;
  font-size: clamp(11px, 3.3vw, 24px);
  font-weight: 700;
  line-height: 1.4;
}
body.top-page .top-consultation-fees strong {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  align-items: baseline;
  min-width: clamp(48px, 14vw, 84px);
  margin: 0;
  padding: 3px 8px;
  background: #2854a3;
  color: #fff;
  font-size: clamp(21px, 6vw, 38px);
  font-weight: 700;
  line-height: 1.2;
}
body.top-page .top-consultation-fees small { font-size: .55em; }
body.top-page .top-consultation-fees > a {
  display: block;
  margin-top: 5px;
  padding: 0;
  text-decoration: none;
}
body.top-page .top-consultation-fees > a:hover { text-decoration: underline; }
@media (max-width: 767px) {
  body.top-page { --top-note-size: 11px; --top-note-leading: 1.4; }
}

/* Compact conditions below the TOP pricing image. */
body.top-page .top-fees--conditions { padding: 0; }
body.top-page .top-fees__conditions { padding: 10px 18px 12px; }
@media (max-width: 360px) {
  body.top-page .top-fees__conditions { padding-inline: 12px; }
}