/* Website only. Continue the pricing/School palette through Flow, FAQ and Contact.
   Keep the existing copy, ordered steps, question articles and consultation link. */
body.service-website-page :is(#top-service-flow, #questions, #contact) {
  --closing-ink: #304b59;
  --closing-body: #506773;
  --closing-accent: #597a8a;
  --closing-line: #c7d8df;
  --closing-soft: #eef5f7;
  --closing-columns: minmax(140px, .24fr) minmax(0, .76fr);
  position: relative;
  display: block;
  width: 100%;
  min-height: 0;
  height: auto;
  margin: 0;
  padding: 96px 0;
  color: var(--closing-ink);
  background: #fff;
  font-family: "Noto Sans JP", sans-serif;
  text-align: left;
  box-sizing: border-box;
  scroll-margin-top: 80px;
}
body.service-website-page :is(#top-service-flow, #questions, #contact)::before { content: none; }
body.service-website-page #top-service-flow > :is(.top-service-heading, ol),
body.service-website-page #questions > :is(.chapter-heading, .answer-board),
body.service-website-page #contact > .movie-contact__inner {
  width: min(88.9vw, 1280px);
  max-width: none;
  margin-inline: auto;
  box-sizing: border-box;
}

/* One shared title rhythm: a quiet English label and a Japanese Mincho heading. */
body.service-website-page #top-service-flow > .top-service-heading,
body.service-website-page #questions .chapter-heading h2,
body.service-website-page #contact .movie-contact__heading {
  display: grid;
  grid-template-columns: var(--closing-columns);
  grid-template-rows: auto auto;
  align-items: start;
  gap: 20px 0;
  margin-block: 0;
  padding: 0;
  border: 0;
  text-align: left;
}
body.service-website-page #top-service-flow .top-service-heading > div { display: contents; }
body.service-website-page #contact .movie-contact__heading h2 {
  display: grid;
  grid-template-columns: var(--closing-columns);
  grid-column: 1 / -1;
  grid-row: 1;
  align-items: start;
  gap: 0;
  margin: 0;
}
body.service-website-page #top-service-flow .top-service-detail__kicker,
body.service-website-page #questions .chapter-heading h2 > span,
body.service-website-page #contact .movie-contact__heading h2 > span {
  grid-column: 1;
  grid-row: 1;
  display: block;
  margin: 0;
  padding-top: 12px;
  color: var(--closing-accent);
  font: 400 21px/1.4 "Cormorant Garamond", serif;
  letter-spacing: .06em;
  text-transform: none;
}
body.service-website-page #top-service-flow .top-service-heading h2,
body.service-website-page #questions .chapter-heading h2 > small,
body.service-website-page #contact .movie-contact__heading h2 > small {
  grid-column: 2;
  grid-row: 1;
  display: block;
  margin: 0;
  padding: 0;
  color: var(--closing-ink);
  font: 400 clamp(28px, 3.2vw, 42px)/1.65 "Shippori Mincho B1", serif;
  letter-spacing: .05em;
  text-align: left;
}
body.service-website-page #top-service-flow .top-service-heading > p,
body.service-website-page #contact .movie-contact__heading > p {
  grid-column: 2;
  grid-row: 2;
  width: auto;
  max-width: 740px;
  margin: 0;
  color: var(--closing-body);
  font: 400 14px/2.1 "Noto Sans JP", sans-serif;
  letter-spacing: .02em;
}

/* The five steps remain a semantic ordered list, without a second visible marker. */
body.service-website-page #top-service-flow > ol {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin-top: 40px;
  padding: 0;
  border: 0;
  list-style: none;
}
body.service-website-page #top-service-flow > ol > li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 20px;
  min-width: 0;
  min-height: 148px;
  margin: 0;
  padding: 25px 20px;
  border: 1px solid var(--closing-line);
  border-radius: 12px;
  color: var(--closing-ink);
  background: var(--closing-soft);
  box-sizing: border-box;
}
body.service-website-page #top-service-flow li > span {
  margin: 0;
  color: var(--closing-accent);
  font: 400 28px/1 "Cormorant Garamond", serif;
  letter-spacing: .04em;
}
body.service-website-page #top-service-flow li > strong {
  color: var(--closing-ink);
  font: 500 14px/1.85 "Noto Sans JP", sans-serif;
  letter-spacing: .01em;
  overflow-wrap: anywhere;
}

/* Questions use the same border, corners and readable body scale as the guide. */
body.service-website-page #questions .chapter-heading { margin-block: 0; padding: 0; }
body.service-website-page #questions .answer-board {
  display: block;
  margin-top: 36px;
  padding: 0;
  border: 0;
  color: var(--closing-ink);
  background: transparent;
  box-shadow: none;
}
body.service-website-page #questions .answer-board-head { position: static; margin: 0 0 18px; padding: 0; }
body.service-website-page #questions .answer-board-head .section-kicker,
body.service-website-page #contact .movie-contact__primary-eyebrow {
  margin: 0;
  color: var(--closing-accent);
  font: 500 10px/1.8 "Noto Sans JP", sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
}
body.service-website-page #questions .answer-board-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
body.service-website-page #questions .answer-board-list > article {
  display: grid;
  grid-template-columns: 35px minmax(0, 1fr);
  align-content: start;
  gap: 16px;
  min-width: 0;
  margin: 0;
  padding: 28px;
  border: 1px solid var(--closing-line);
  border-radius: 12px;
  background: var(--closing-soft);
}
body.service-website-page #questions .answer-board-list > article > span {
  margin: 0;
  padding-top: 3px;
  color: var(--closing-accent);
  font: 500 11px/1.9 "Noto Sans JP", sans-serif;
  letter-spacing: .05em;
}
body.service-website-page #questions .answer-board-list > article h4 {
  margin: 0 0 12px;
  color: var(--closing-ink);
  font: 500 15px/1.9 "Noto Sans JP", sans-serif;
  letter-spacing: .015em;
}
body.service-website-page #questions .answer-board-list > article p {
  margin: 0;
  color: var(--closing-body);
  font: 400 13px/2.05 "Noto Sans JP", sans-serif;
  letter-spacing: .01em;
  overflow-wrap: anywhere;
}

/* Consultation continues the same grid; the existing link remains the sole action. */
body.service-website-page #contact > .movie-contact__inner { display: block; }
body.service-website-page #contact .movie-contact__panel {
  display: grid;
  grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr);
  grid-template-rows: auto auto auto;
  align-items: start;
  gap: 12px 44px;
  width: 100%;
  max-width: none;
  margin: 40px 0 0;
  padding: 40px;
  border: 1px solid var(--closing-line);
  border-radius: 16px;
  color: var(--closing-ink);
  background: var(--closing-soft);
  box-shadow: none;
  text-align: left;
  box-sizing: border-box;
}
body.service-website-page #contact .movie-contact__primary-eyebrow { grid-column: 1; grid-row: 1; }
body.service-website-page #contact .movie-contact__panel h3 {
  grid-column: 1;
  grid-row: 2;
  margin: 0;
  color: var(--closing-ink);
  font: 400 32px/1.65 "Shippori Mincho B1", serif;
  letter-spacing: .05em;
}
body.service-website-page #contact .movie-contact__description {
  grid-column: 2;
  grid-row: 1 / 3;
  margin: 0;
  color: var(--closing-body);
  font: 400 14px/2.1 "Noto Sans JP", sans-serif;
  letter-spacing: .02em;
}
body.service-website-page #contact .movie-contact__primary-link {
  grid-column: 2;
  grid-row: 3;
  width: 100%;
  min-height: 64px;
  margin: 12px 0 0;
  border: 1px solid var(--closing-ink);
  border-radius: 8px;
  color: #fff;
  background: var(--closing-ink);
  box-shadow: none;
  transform: none;
  transition: background-color .2s ease, border-color .2s ease;
}
body.service-website-page #contact .movie-contact__primary-link > span { font-family: "Noto Sans JP", sans-serif; font-weight: 400; text-wrap: balance; }
body.service-website-page #contact .movie-contact__primary-link > i { color: inherit; border-color: rgb(255 255 255 / 35%); transform: none; }
body.service-website-page #contact .movie-contact__primary-link:hover { background: #426675; border-color: #426675; box-shadow: none; transform: none; }
body.service-website-page #contact .movie-contact__primary-link:focus-visible { outline: 2px solid #597a8a; outline-offset: 5px; background: #426675; box-shadow: none; }

@media (max-width: 1000px) {
  body.service-website-page #top-service-flow > ol { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  body.service-website-page #top-service-flow > ol > li { flex-direction: row; align-items: center; gap: 24px; min-height: 76px; padding: 20px 24px; }
  body.service-website-page #questions .answer-board-list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 820px) {
  body.service-website-page :is(#top-service-flow, #questions, #contact) { --closing-columns: minmax(0, 1fr); padding-block: 64px; }
  body.service-website-page #top-service-flow > :is(.top-service-heading, ol),
  body.service-website-page #questions > :is(.chapter-heading, .answer-board),
  body.service-website-page #contact > .movie-contact__inner { width: calc(100% - 40px); }
  body.service-website-page #top-service-flow > .top-service-heading,
  body.service-website-page #questions .chapter-heading h2,
  body.service-website-page #contact .movie-contact__heading { grid-template-rows: auto auto auto; gap: 16px; }
  body.service-website-page #top-service-flow .top-service-detail__kicker,
  body.service-website-page #questions .chapter-heading h2 > span,
  body.service-website-page #contact .movie-contact__heading h2 > span { padding: 0; font-size: 18px; }
  body.service-website-page #top-service-flow .top-service-heading h2,
  body.service-website-page #questions .chapter-heading h2 > small,
  body.service-website-page #contact .movie-contact__heading h2 > small { grid-column: 1; grid-row: 2; font-size: 28px; }
  body.service-website-page #top-service-flow .top-service-heading > p,
  body.service-website-page #contact .movie-contact__heading > p { grid-column: 1; grid-row: 3; font-size: 13px; }
  body.service-website-page #contact .movie-contact__heading h2 { gap: 16px; }
  body.service-website-page #contact .movie-contact__heading > p { grid-row: 2; }
  body.service-website-page #top-service-flow > ol,
  body.service-website-page #questions .answer-board,
  body.service-website-page #contact .movie-contact__panel { margin-top: 28px; }
  body.service-website-page #questions .answer-board-list > article { padding: 22px 20px; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; }
  body.service-website-page #questions .answer-board-list > article h4 { font-size: 14px; }
  body.service-website-page #contact .movie-contact__panel { grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(4, auto); gap: 12px; padding: 28px 22px; }
  body.service-website-page #contact .movie-contact__panel h3 { font-size: 28px; }
  body.service-website-page #contact .movie-contact__description { grid-column: 1; grid-row: 3; margin-top: 8px; font-size: 13px; }
  body.service-website-page #contact .movie-contact__primary-link { grid-column: 1; grid-row: 4; }
}
@media (prefers-reduced-motion: reduce) {
  body.service-website-page #contact .movie-contact__primary-link { transition: none; }
}