:root {
  --blue: #1769aa;
  --blue-dark: #005daa;
  --blue-deep: #004f92;
  --green: #8ccb36;
  --green-dark: #5f942a;
  --text: #252b2f;
  --muted: #5f6e78;
  --line: #d8e6f0;
  --line-strong: #abcce4;
  --soft-blue: #f1f7fb;
  --soft-green: #f5faec;
  --white: #ffffff;
  --radius: 12px;
  --container: 1180px;
  --icon-chat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 3C6.9 3 3 6.5 3 11.1c0 2 .8 3.8 2.2 5.2L4 21l5.1-1.8c.9.3 1.9.5 2.9.5 5.1 0 9-3.6 9-8.5C21 6.5 17.1 3 12 3Zm-3.6 9.1a1.2 1.2 0 1 1 0-2.4 1.2 1.2 0 0 1 0 2.4Zm3.6 0a1.2 1.2 0 1 1 0-2.4 1.2 1.2 0 0 1 0 2.4Zm3.6 0a1.2 1.2 0 1 1 0-2.4 1.2 1.2 0 0 1 0 2.4Z'/%3E%3C/svg%3E");
  --icon-file: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6 2h9l5 5v13a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2Zm8 1.8V8h4.2L14 3.8ZM8 11v2h8v-2H8Zm0 4v2h8v-2H8Z'/%3E%3C/svg%3E");
  --icon-send: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M21.6 2.4 3 9.5c-.9.3-.9 1.6 0 1.9l7 2.6 2.6 7c.3.9 1.6.9 1.9 0l7.1-18.6ZM11.1 12.9 6.3 11l10.2-3.9-5.4 5.8Zm1.9 4.8-1.9-4.8 5.8-5.4L13 17.7Z'/%3E%3C/svg%3E");
  --icon-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm0 2c-4.9 0-8 2.7-8 6.2 0 1 .8 1.8 1.8 1.8h12.4c1 0 1.8-.8 1.8-1.8 0-3.5-3.1-6.2-8-6.2Z'/%3E%3C/svg%3E");
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  margin: 0;
  color: var(--text);
  background: var(--white);
  font-family: "Noto Sans JP", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 17px;
  line-height: 1.85;
  line-break: strict;
  word-break: normal;
  overflow-wrap: break-word;
  overflow-x: hidden;
}

img,
picture,
figure {
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
}

.container {
  width: min(100% - 64px, var(--container));
  margin-inline: auto;
}

.hero .container {
  width: min(100% - 64px, 1320px);
}

.section {
  padding-block: 112px;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(18px);
}

.site-header.is-scrolled {
  border-bottom: 1px solid var(--line);
}

.header-inner {
  width: min(100% - 64px, var(--container));
  min-height: 76px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  transition: min-height 180ms ease;
}

.site-header.is-scrolled .header-inner {
  min-height: 68px;
}

.brand {
  color: var(--blue);
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
}

.desktop-nav {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-left: auto;
}

.nav-link,
.nav-dropdown-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.nav-link:hover,
.nav-link:focus-visible,
.nav-dropdown-button:hover,
.nav-dropdown-button:focus-visible {
  color: var(--blue);
  outline: none;
}

.nav-dropdown {
  position: relative;
}

.chevron {
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
}

.dropdown-panel {
  position: absolute;
  top: calc(100% + 12px);
  left: -18px;
  min-width: 200px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease;
}

.nav-dropdown.is-open .dropdown-panel,
.nav-dropdown:hover .dropdown-panel,
.nav-dropdown:focus-within .dropdown-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-panel a {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}

.dropdown-panel a:hover,
.dropdown-panel a:focus-visible {
  background: var(--soft-blue);
  color: var(--blue);
  outline: none;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-cta,
.button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 56px;
  border-radius: 6px;
  font-weight: 700;
  line-height: 1.45;
  transition: transform 160ms ease, background 160ms ease, color 160ms ease, border-color 160ms ease;
}

.header-cta {
  min-height: 44px;
  padding: 0 22px;
  background: var(--blue-dark);
  color: var(--white);
  font-size: 14px;
}

.header-cta::after,
.button::after {
  content: "→";
  color: currentColor;
  font-weight: 700;
}

.header-cta::before,
.button::before,
.mobile-menu-cta::before {
  content: "";
  display: none;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}

.header-cta::before {
  width: 18px;
  height: 18px;
}

.header-cta::before,
.mobile-menu-cta::before,
.button-consult::before {
  display: block;
  -webkit-mask-image: var(--icon-chat);
  mask-image: var(--icon-chat);
}

.button-price::before {
  display: block;
  -webkit-mask-image: var(--icon-file);
  mask-image: var(--icon-file);
}

.button-about::before {
  display: block;
  -webkit-mask-image: var(--icon-user);
  mask-image: var(--icon-user);
}

.button-send::before {
  display: block;
  -webkit-mask-image: var(--icon-send);
  mask-image: var(--icon-send);
}

.header-cta:hover,
.header-cta:focus-visible,
.button:hover,
.button:focus-visible {
  transform: translateY(-2px);
  outline: none;
}

.header-cta:hover,
.header-cta:focus-visible,
.button-primary:hover,
.button-primary:focus-visible {
  background: var(--blue-deep);
}

.button {
  min-width: 248px;
  min-height: 68px;
  padding: 12px 28px;
  font-size: 16px;
  text-align: left;
}

.button-label {
  display: grid;
  gap: 1px;
  line-height: 1.48;
  word-break: keep-all;
  overflow-wrap: normal;
}

.button-label span {
  display: block;
  white-space: nowrap;
}

.button-primary {
  background: var(--blue-dark);
  color: var(--white);
}

.button-light {
  background: var(--white);
  color: var(--blue-dark);
}

.button-outline {
  min-height: 62px;
  border: 1px solid var(--blue);
  background: var(--white);
  color: var(--blue);
}

.button-outline:hover,
.button-outline:focus-visible {
  border-color: var(--blue-deep);
  color: var(--blue-deep);
}

.sp-label {
  display: none;
}

.menu-button {
  display: none;
  width: 44px;
  height: 44px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.menu-button span {
  width: 25px;
  height: 2px;
  border-radius: 999px;
  background: var(--text);
}

.mobile-menu {
  display: none;
}

.hero {
  padding-block: 70px 86px;
  background: var(--white);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.49fr) minmax(0, 0.51fr);
  align-items: center;
  gap: 52px;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2,
h3 {
  text-wrap: balance;
  word-break: normal;
  overflow-wrap: break-word;
}

p,
li,
summary,
.line-item,
.scope-list span,
.notice-list p {
  line-break: strict;
  word-break: normal;
  overflow-wrap: break-word;
}

h1 {
  margin-bottom: 32px;
  font-size: 52px;
  line-height: 1.28;
  letter-spacing: 0;
}

.hero h1 > span {
  display: block;
}

.jp-break {
  word-break: keep-all;
  overflow-wrap: normal;
}

.jp-break-text {
  text-wrap: pretty;
  word-break: keep-all;
  overflow-wrap: normal;
}

.nowrap {
  white-space: nowrap;
}

.sp-br {
  display: none;
}

h1 em {
  position: relative;
  display: inline-block;
  color: var(--green-dark);
  font-style: normal;
}

h1 em::after {
  content: "";
  position: absolute;
  left: 0.03em;
  right: 0.03em;
  bottom: -0.24em;
  height: 4px;
  background: var(--green);
}

h2 {
  margin-bottom: 42px;
  font-size: 40px;
  line-height: 1.35;
  letter-spacing: 0;
}

h3 {
  margin-bottom: 18px;
  font-size: 28px;
  line-height: 1.35;
  letter-spacing: 0;
}

.lead {
  margin-bottom: 36px;
  color: var(--text);
  font-weight: 500;
}

.hero-visual {
  margin: 0;
}

.hero-visual img {
  display: block;
  width: 100%;
  height: auto;
}

.problem {
  background: var(--soft-blue);
  text-align: center;
}

.problem h2 {
  margin-bottom: 40px;
  font-size: 32px;
}

.problem-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.problem-item {
  min-height: 132px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 14px;
  padding: 28px 22px;
}

.problem-item:not(:last-child) {
  border-right: 1px solid var(--line);
}

.check {
  position: relative;
  width: 22px;
  height: 22px;
  border: 2px solid #88aac6;
  border-radius: 3px;
  background: var(--white);
}

.check::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 2px;
  width: 6px;
  height: 11px;
  border-right: 2px solid var(--blue);
  border-bottom: 2px solid var(--blue);
  transform: rotate(45deg);
}

.problem-item p {
  margin: 0;
  font-weight: 700;
  line-height: 1.7;
}

.problem-note {
  max-width: 690px;
  margin: 34px auto 0;
  text-align: center;
  font-size: 15px;
  font-weight: 500;
}

.services {
  background: var(--white);
  text-align: center;
}

.section-label {
  margin: 0 0 10px;
  color: var(--blue);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
}

.section-lead {
  max-width: 720px;
  margin: -22px auto 42px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.9;
}

.services .section-label,
.approach .section-label {
  text-align: center;
}

.services h2 {
  margin-bottom: 36px;
}

.services h2 + .section-lead {
  margin-top: -20px;
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  text-align: left;
}

.service-grid-priority {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: auto;
}

.service-card {
  position: relative;
  min-height: 374px;
  padding: 30px;
  border-radius: var(--radius);
  overflow: hidden;
}

.service-blue,
.service-sky {
  background: linear-gradient(135deg, #f4f9fd, #eaf4fb);
}

.service-green {
  background: linear-gradient(135deg, #fbfdf7, var(--soft-green));
}

.service-card-featured {
  grid-column: 1 / -1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.82fr);
  column-gap: 42px;
  align-items: center;
  padding: 42px;
  border: 1px solid var(--line-strong);
}

.service-card-featured .service-badge,
.service-card-featured .service-kicker,
.service-card-featured h3,
.service-card-featured p:last-of-type,
.service-card-featured .service-points {
  grid-column: 1;
}

.service-card-featured h3 {
  font-size: 40px;
}

.service-card-featured .service-figure {
  grid-column: 2;
  grid-row: 1 / 6;
  width: min(100%, 380px);
  margin: 0 auto;
}

.service-card-compact {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 170px;
  column-gap: 22px;
  align-items: center;
  padding: 26px;
}

.service-card-compact .card-arrow {
  top: 26px;
  right: 26px;
}

.service-card-compact .service-kicker,
.service-card-compact h3,
.service-card-compact p:last-child {
  grid-column: 1;
}

.service-card-compact .service-figure {
  grid-column: 2;
  grid-row: 1 / 5;
  width: 170px;
  margin: 0;
}

.service-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 30px;
  margin-bottom: 18px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--blue-dark);
  color: var(--white);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}

.service-points {
  display: grid;
  gap: 8px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.service-points li {
  position: relative;
  padding-left: 22px;
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.65;
}

.service-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
}

.card-arrow {
  position: absolute;
  top: 54px;
  right: 30px;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  color: var(--blue);
  font-weight: 700;
}

.service-green .card-arrow {
  color: var(--green-dark);
}

.service-kicker {
  margin-bottom: 8px;
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.7;
}

.service-card h3 {
  color: var(--blue);
}

.service-green h3 {
  color: var(--green-dark);
}

.service-card p:last-child {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.8;
}

.service-figure {
  display: block;
  width: min(100%, 240px);
  height: auto;
  margin: 18px auto 22px;
  border-radius: 10px;
}

.approach {
  background: linear-gradient(180deg, #f9fcf5 0%, var(--soft-green) 100%);
  text-align: center;
}

.approach h2 {
  margin-bottom: 50px;
}

.approach-flow {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 54px 1fr 54px 1fr 54px 1fr 54px 1fr;
  align-items: start;
  max-width: 1040px;
  margin-inline: auto;
  padding-bottom: 70px;
}

.approach-step {
  display: grid;
  justify-items: center;
  text-align: center;
}

.approach-step img {
  width: 82px;
  height: 82px;
  object-fit: contain;
  margin-bottom: 10px;
}

.approach-step h3 {
  margin-bottom: 6px;
  color: var(--blue);
  font-size: 22px;
  line-height: 1.35;
}

.approach-step-green h3 {
  color: var(--green-dark);
}

.approach-step p {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.65;
}

.approach-arrow {
  display: grid;
  place-items: center;
  height: 82px;
  color: var(--blue);
}

.approach-arrow svg {
  display: block;
  width: 34px;
  height: 34px;
}

.approach-arrow-green { color: var(--green); }

.approach-return {
  position: absolute;
  left: 8.5%;
  right: 8.5%;
  bottom: 0;
  height: 50px;
  border-right: 3px solid var(--green);
  border-bottom: 3px solid var(--green);
  border-left: 3px solid var(--green);
}

.approach-return::before {
  content: "";
  position: absolute;
  left: -10px;
  top: -2px;
  width: 18px;
  height: 18px;
  border-left: 3px solid var(--green);
  border-top: 3px solid var(--green);
  transform: rotate(45deg);
}

.approach-note {
  max-width: 610px;
  margin: 18px auto 0;
  font-size: 15px;
  font-weight: 500;
}

.owner {
  background: var(--white);
}

.owner-grid {
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  gap: 80px;
  align-items: center;
}

.owner-copy h2 {
  margin-bottom: 18px;
  font-size: 31px;
}

.owner-copy p {
  margin-bottom: 26px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.85;
}

.owner-timeline {
  margin: 0;
}

.owner-timeline img {
  display: block;
  width: 100%;
  height: auto;
}

.owner-timeline-visual img {
  border-radius: 8px;
}

.pricing {
  padding-block: 64px;
  background: var(--soft-blue);
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr) 240px;
  align-items: center;
  gap: 0;
}

.price-item {
  min-height: 154px;
  display: grid;
  align-content: center;
  gap: 2px;
  padding: 14px 34px;
}

.price-item:not(:last-of-type) {
  border-right: 1px solid #aebfca;
}

.price-item p {
  margin-bottom: 2px;
  font-size: 15px;
  font-weight: 700;
}

.price-item strong {
  display: block;
  color: var(--text);
  font-size: 58px;
  line-height: 1.1;
}

.price-item strong span {
  margin-left: 4px;
  font-size: 24px;
}

.price-item small {
  font-size: 14px;
  font-weight: 700;
}

.price-item > span {
  margin-top: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.6;
}

.price-link {
  justify-self: end;
  width: 270px;
}

.final-cta {
  padding-block: 38px;
  background: linear-gradient(100deg, var(--blue-dark), #0080d6);
  color: var(--white);
}

.final-cta-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr 1fr;
  gap: 44px;
  align-items: center;
}

.final-cta h2 {
  margin: 0;
  font-size: 31px;
  line-height: 1.55;
}

.final-cta p {
  margin: 0;
  font-weight: 700;
  line-height: 1.85;
}

.final-action {
  display: grid;
  gap: 10px;
  justify-items: end;
}

.final-action .button {
  width: min(100%, 330px);
  justify-content: space-between;
}

.final-action small {
  text-align: center;
  font-size: 13px;
  font-weight: 700;
}

.site-footer {
  padding-block: 70px 34px;
  background: var(--soft-blue);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr;
  gap: 56px;
}

.footer-intro p {
  max-width: 360px;
  margin: 22px 0 0;
  font-size: 15px;
  font-weight: 500;
}

.site-footer nav {
  display: grid;
  align-content: start;
  gap: 14px;
}

.site-footer nav a {
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
}

.site-footer nav a:hover,
.site-footer nav a:focus-visible {
  color: var(--blue);
  outline: none;
}

.copyright {
  width: min(100% - 64px, var(--container));
  margin: 56px auto 0;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}

.legal-main {
  padding-block: 96px 128px;
  background: var(--white);
}

.legal-page {
  width: min(100% - 64px, 800px);
  margin-inline: auto;
}

.legal-page h1 {
  margin-bottom: 42px;
  font-size: 40px;
  line-height: 1.35;
}

.legal-page p {
  font-size: 16px;
  line-height: 1.9;
}

.legal-section {
  padding-top: 34px;
  margin-top: 34px;
  border-top: 1px solid var(--line);
}

.legal-section h2 {
  margin-bottom: 14px;
  color: var(--blue);
  font-size: 22px;
  line-height: 1.45;
}

.page-main {
  background: var(--white);
}

.page-hero {
  padding-block: 96px 108px;
}

.page-hero-blue {
  background: linear-gradient(135deg, #ffffff 0%, #eef7fd 100%);
}

.page-hero-green {
  background: linear-gradient(135deg, #ffffff 0%, #f4faeb 100%);
}

.simple-hero {
  background: linear-gradient(180deg, #ffffff 0%, var(--soft-blue) 100%);
  text-align: center;
}

.page-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 72px;
  align-items: center;
}

.page-kicker {
  margin-bottom: 14px;
  color: var(--blue);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
}

.page-hero h1,
.contact-main h1,
.thanks-main h1 {
  margin-bottom: 24px;
  font-size: 46px;
  line-height: 1.35;
}

.page-lead {
  margin-bottom: 30px;
  color: var(--text);
  font-weight: 500;
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 32px;
}

.meta-pill {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
}

.page-hero-figure {
  margin: 0;
}

.page-hero-figure img {
  display: block;
  width: 100%;
  height: auto;
}

.page-section {
  padding-block: 104px;
}

.page-section-soft {
  background: var(--soft-blue);
}

.page-section-green {
  background: linear-gradient(180deg, #fbfdf7 0%, var(--soft-green) 100%);
}

.narrow {
  max-width: 820px;
}

.section-heading {
  max-width: 780px;
  margin-bottom: 46px;
}

.section-heading.center {
  margin-inline: auto;
  text-align: center;
}

.section-heading.center .section-label {
  text-align: center;
}

.section-heading h2 {
  margin-bottom: 16px;
}

.subsection-heading {
  margin-top: 64px;
}

.section-heading p,
.split-layout p,
.page-note {
  margin-bottom: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.9;
}

.line-list {
  border-top: 1px solid var(--line);
}

.line-item {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  column-gap: 16px;
  align-items: center;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
  font-weight: 700;
}

.line-item::before {
  content: "";
  width: 20px;
  height: 20px;
  border: 2px solid #88aac6;
  border-radius: 3px;
  background-color: var(--white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.2 8.1 6.4 11.3 12.9 4.8' fill='none' stroke='%23005daa' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 14px 14px;
}

.line-item::after {
  content: none;
}

.three-grid,
.note-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.note-grid {
  grid-template-columns: repeat(2, 1fr);
  margin-top: 36px;
}

.content-card,
.note-grid article,
.quiet-panel,
.price-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
}

.content-card,
.note-grid article,
.quiet-panel {
  padding: 28px;
}

.content-card h3,
.note-grid h3 {
  margin-bottom: 12px;
  color: var(--blue);
  font-size: 22px;
}

.content-card p,
.note-grid p,
.quiet-panel p {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.85;
}

.mini-flow {
  display: grid;
  gap: 24px;
  max-width: 1020px;
  margin-inline: auto;
}

.mini-flow-5 {
  grid-template-columns: repeat(5, 1fr);
}

.mini-flow div {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 10px;
  color: var(--blue);
  text-align: center;
}

.mini-flow div:not(:last-child)::after {
  content: "→";
  position: absolute;
  top: 34px;
  right: -21px;
  color: var(--blue);
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
}

.mini-flow .green,
.mini-flow .green::after {
  color: var(--green-dark);
}

.mini-flow img {
  width: 80px;
  height: 80px;
  object-fit: contain;
}

.split-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 72px;
  align-items: center;
}

.split-layout h2 {
  margin-bottom: 18px;
}

.method-visual {
  margin: 0;
}

.method-visual img {
  display: block;
  width: min(100%, 620px);
  height: auto;
  margin-inline: auto;
}

.service-detail-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.82fr) minmax(0, 1.18fr);
  gap: 36px;
  align-items: stretch;
}

.price-card {
  padding: 30px;
}

.price-card > p {
  margin-bottom: 10px;
  font-weight: 700;
}

.price-card strong {
  display: block;
  margin-bottom: 10px;
  color: var(--text);
  font-size: 54px;
  line-height: 1.08;
}

.price-card strong span {
  margin-left: 4px;
  font-size: 22px;
}

.price-card small {
  display: block;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.7;
}

.price-card-green strong,
.price-card-green .text-link {
  color: var(--green-dark);
}

.pricing-summary-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) repeat(2, minmax(0, 0.94fr));
  gap: 24px;
}

.pricing-summary-card {
  display: grid;
  align-content: start;
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
}

.pricing-summary-main {
  border-color: var(--line-strong);
  background: linear-gradient(135deg, #ffffff 0%, #eef7fd 100%);
}

.pricing-summary-green {
  background: linear-gradient(135deg, #ffffff 0%, var(--soft-green) 100%);
}

.pricing-summary-card h3 {
  margin-bottom: 14px;
  color: var(--blue);
  font-size: 26px;
}

.pricing-summary-green h3,
.pricing-summary-green .text-link {
  color: var(--green-dark);
}

.pricing-summary-price {
  margin: 0 0 8px;
  color: var(--text);
  font-size: 50px;
  font-weight: 700;
  line-height: 1.08;
}

.pricing-summary-price span {
  margin-left: 4px;
  font-size: 21px;
}

.pricing-summary-meta {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.65;
}

.pricing-summary-text {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.85;
}

.pricing-summary-points {
  display: grid;
  gap: 9px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.pricing-summary-points li {
  position: relative;
  padding-left: 20px;
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.65;
}

.pricing-summary-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
}

.scope-list {
  display: grid;
  border-top: 1px solid var(--line);
}

.scope-list div {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 24px;
  padding: 23px 0;
  border-bottom: 1px solid var(--line);
}

.scope-list strong {
  color: var(--blue);
  font-size: 20px;
}

.scope-list span {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.85;
}

.steps-list {
  max-width: 900px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.steps-list li {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 28px;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
}

.steps-list strong {
  color: var(--blue);
  font-size: 20px;
}

.steps-list span {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.85;
}

.faq-list {
  border-top: 1px solid var(--line);
}

.faq-list details {
  border-bottom: 1px solid var(--line);
}

.faq-list summary {
  position: relative;
  padding: 24px 48px 24px 0;
  color: var(--text);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 22px;
  color: var(--blue);
  font-size: 26px;
  line-height: 1;
}

.faq-list details[open] summary::after {
  content: "-";
}

.faq-list p {
  margin: -8px 0 24px;
  color: var(--muted);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.85;
}

.conversion-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
}

.conversion-flow span {
  min-width: 140px;
  padding: 16px 22px;
  border-radius: 8px;
  background: var(--soft-blue);
  color: var(--blue);
  font-size: 22px;
  font-weight: 700;
  text-align: center;
}

.conversion-flow strong {
  color: var(--green-dark);
  font-size: 30px;
}

.conversion-flow.compact {
  flex-wrap: wrap;
}

.quiet-panel strong {
  display: block;
  margin-bottom: 12px;
  color: var(--blue);
  font-size: 21px;
}

.page-note {
  max-width: 760px;
  margin: 34px auto 0;
  text-align: center;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  color: var(--blue);
  font-size: 15px;
  font-weight: 700;
}

.text-link::after {
  content: "→";
}

.choice-map {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.choice-map div {
  display: grid;
  gap: 12px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
}

.choice-map strong {
  font-size: 18px;
  line-height: 1.65;
}

.choice-map span {
  color: var(--blue);
  font-weight: 700;
}

.pricing-info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}

.pricing-info-grid article {
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
}

.pricing-info-grid h3 {
  margin-bottom: 18px;
  color: var(--blue);
  font-size: 24px;
}

.pricing-info-grid ul {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pricing-info-grid li {
  position: relative;
  padding-left: 22px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.75;
}

.pricing-info-grid li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.75em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
}

.pricing-scope-grid {
  display: grid;
  gap: 28px;
}

.pricing-scope-table {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
}

.pricing-scope-row {
  display: grid;
  grid-template-columns: minmax(118px, 0.72fr) repeat(3, minmax(0, 1fr));
}

.pricing-scope-row:not(:last-child) {
  border-bottom: 1px solid var(--line);
}

.pricing-scope-row > * {
  min-width: 0;
  padding: 20px;
}

.pricing-scope-row > *:not(:last-child) {
  border-right: 1px solid var(--line);
}

.pricing-scope-row strong {
  color: var(--blue);
  font-size: 16px;
  line-height: 1.65;
}

.pricing-scope-row > span {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.8;
}

.pricing-scope-headrow {
  background: linear-gradient(135deg, #ffffff 0%, #eef7fd 100%);
}

.pricing-scope-headrow strong {
  font-size: 15px;
  text-align: center;
}

.pricing-scope-card {
  display: grid;
  grid-template-columns: minmax(240px, 0.72fr) minmax(0, 1.28fr);
  gap: 34px;
  align-items: center;
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
}

.pricing-scope-main {
  border-color: var(--line-strong);
  background: linear-gradient(135deg, #ffffff 0%, #eef7fd 100%);
}

.pricing-scope-green {
  background: linear-gradient(135deg, #ffffff 0%, var(--soft-green) 100%);
}

.pricing-scope-head {
  display: grid;
  align-content: start;
}

.pricing-scope-head h3 {
  margin-bottom: 10px;
  color: var(--blue);
  font-size: 26px;
}

.pricing-scope-green .pricing-scope-head h3 {
  color: var(--green-dark);
}

.pricing-scope-head p:not(.service-badge) {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.85;
}

.pricing-scope-body h4 {
  margin: 0 0 16px;
  color: var(--blue);
  font-size: 20px;
  line-height: 1.45;
}

.pricing-scope-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.pricing-scope-list li {
  display: grid;
  grid-template-columns: 126px 1fr;
  gap: 20px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}

.pricing-scope-list strong {
  color: var(--blue);
  font-size: 16px;
  line-height: 1.6;
}

.pricing-scope-green .pricing-scope-list strong {
  color: var(--green-dark);
}

.pricing-scope-list span {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.75;
}

.pricing-scope-note {
  margin: 18px 0 0;
  padding: 16px 18px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.76);
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.75;
}

.pricing-factor-grid,
.work-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 32px;
}

.pricing-factor-grid article,
.work-card {
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
}

.pricing-factor-grid h3,
.work-card h3 {
  margin-bottom: 12px;
  color: var(--blue);
  font-size: 21px;
  line-height: 1.45;
}

.pricing-factor-grid p,
.work-card p {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.85;
}

.work-card ul {
  display: grid;
  gap: 9px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.work-card li {
  position: relative;
  padding-left: 20px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.7;
}

.work-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
}

.notice-list {
  border-top: 1px solid var(--line);
}

.notice-list p {
  margin: 0;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  font-weight: 500;
}

.principle-list {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}

.principle-list div {
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
}

.principle-list strong {
  display: block;
  margin-bottom: 8px;
  color: var(--blue);
  font-size: 21px;
}

.principle-list p {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.85;
}

.page-cta {
  padding-block: 82px;
  background: linear-gradient(100deg, var(--blue-dark), #0080d6);
  color: var(--white);
  text-align: center;
}

.page-cta h2 {
  margin-bottom: 16px;
  font-size: 34px;
}

.page-cta p {
  max-width: 720px;
  margin: 0 auto 30px;
  font-weight: 700;
}

.contact-main,
.thanks-main {
  padding-block: 96px 128px;
  background: linear-gradient(180deg, #ffffff 0%, var(--soft-blue) 100%);
}

.contact-wrap,
.thanks-wrap {
  width: min(100% - 64px, 760px);
  margin-inline: auto;
}

.contact-form {
  display: grid;
  gap: 24px;
  margin-top: 42px;
}

.form-field {
  display: grid;
  gap: 8px;
}

.form-field label {
  font-size: 15px;
  font-weight: 700;
}

.form-field label span,
.form-field label small {
  display: inline-flex;
  margin-left: 8px;
  color: var(--blue);
  font-size: 12px;
  font-weight: 700;
}

.form-field label small {
  color: var(--muted);
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  min-height: 54px;
  padding: 13px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--white);
  color: var(--text);
  font: inherit;
  line-height: 1.6;
}

.form-field textarea {
  resize: vertical;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--blue);
  outline: 3px solid rgba(23, 105, 170, 0.16);
}

.form-note {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
}

.form-note a {
  color: var(--blue);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.contact-form .button {
  justify-self: start;
  border: 0;
  cursor: pointer;
}

.thanks-wrap {
  display: grid;
  justify-items: center;
  text-align: center;
}

.thanks-check {
  position: relative;
  width: 72px;
  height: 72px;
  margin-bottom: 26px;
  border-radius: 50%;
  background: var(--green);
}

.thanks-check::after {
  content: "";
  position: absolute;
  left: 23px;
  top: 18px;
  width: 18px;
  height: 30px;
  border-right: 5px solid var(--white);
  border-bottom: 5px solid var(--white);
  transform: rotate(45deg);
}

.thanks-wrap p {
  margin-bottom: 34px;
  font-weight: 500;
}

@media (max-width: 1180px) {
  .hero-grid {
    grid-template-columns: 1fr;
  }

  .hero-copy {
    max-width: 720px;
  }

  .hero-visual {
    max-width: 760px;
  }
}

@media (max-width: 1120px) {
  .pricing-grid {
    grid-template-columns: repeat(3, 1fr);
    row-gap: 32px;
  }

  .price-link {
    grid-column: 1 / -1;
    justify-self: center;
  }
}

@media (max-width: 920px) {
  .container,
  .hero .container,
  .header-inner,
  .copyright,
  .legal-page {
    width: calc(100% - 40px);
  }

  .desktop-nav {
    display: none;
  }

  .pc-label {
    display: none;
  }

  .sp-label {
    display: inline;
  }

  .header-inner {
    min-height: 64px;
    gap: 16px;
  }

  .site-header.is-scrolled .header-inner {
    min-height: 64px;
  }

  .brand {
    font-size: 22px;
  }

  .header-cta {
    min-height: 40px;
    padding: 0 16px;
    border-radius: 5px;
    gap: 8px;
  }

  .header-cta::before {
    width: 15px;
    height: 15px;
  }

  .menu-button {
    display: inline-flex;
  }

  .mobile-menu {
    position: fixed;
    inset: 64px 0 auto;
    display: block;
    max-height: 0;
    overflow: hidden;
    border-bottom: 1px solid transparent;
    background: var(--white);
    transition: max-height 220ms ease, border-color 220ms ease;
  }

  .mobile-menu.is-open {
    max-height: calc(100vh - 64px);
    border-color: var(--line);
  }

  .mobile-menu nav {
    width: calc(100% - 40px);
    margin-inline: auto;
    display: grid;
    gap: 16px;
    padding-block: 22px 30px;
  }

  .mobile-menu a {
    font-weight: 700;
  }

  .mobile-menu-cta {
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 8px;
    border-radius: 6px;
    background: var(--blue-dark);
    color: var(--white);
  }

  .section {
    padding-block: 84px;
  }

  .hero {
    padding-block: 40px 0;
  }

  h1 {
    font-size: 43px;
  }

  h2 {
    margin-bottom: 32px;
    font-size: 31px;
  }

  .hero-visual {
    margin-inline: auto;
  }

  .problem-list,
  .service-grid,
  .owner-grid,
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .service-grid-priority {
    grid-auto-rows: auto;
  }

  .service-card-featured {
    grid-row: auto;
  }

  .problem-item:not(:last-child) {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .service-grid {
    max-width: 560px;
    margin-inline: auto;
  }

  .service-grid-priority {
    max-width: 720px;
  }

  .approach-note {
    margin-top: 38px;
    text-align: left;
  }

  .owner-grid {
    gap: 48px;
  }

  .pricing-grid {
    grid-template-columns: 1fr;
  }

  .price-item {
    min-height: 112px;
    padding-inline: 0;
  }

  .price-item:not(:last-of-type) {
    border-right: 0;
    border-bottom: 1px solid #b9cbd8;
  }

  .price-link {
    width: 100%;
    margin-top: 20px;
  }

  .final-cta {
    padding-block: 72px;
    text-align: center;
  }

  .final-cta-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .final-action {
    justify-items: center;
  }

  .legal-main {
    padding-block: 72px 96px;
  }

  .page-hero {
    padding-block: 78px 88px;
  }

  .page-hero-grid,
  .split-layout,
  .service-detail-grid {
    grid-template-columns: 1fr;
    gap: 46px;
    min-width: 0;
  }

  .page-hero-copy {
    max-width: 760px;
  }

  .page-hero-figure {
    max-width: 640px;
    margin-inline: auto;
  }

  .page-section {
    padding-block: 84px;
  }

  .three-grid,
  .note-grid,
  .pricing-summary-grid,
  .choice-map,
  .pricing-info-grid,
  .pricing-factor-grid,
  .work-card-grid,
  .pricing-scope-card {
    grid-template-columns: 1fr;
  }

  .mini-flow-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
  }

  .mini-flow div:not(:last-child)::after {
    right: 0;
    font-size: 20px;
  }

  .contact-wrap,
  .thanks-wrap {
    width: calc(100% - 40px);
  }
}

@media (max-width: 640px) {
  body {
    font-size: 16px;
    line-height: 1.8;
  }

  .container,
  .hero .container,
  .header-inner,
  .copyright,
  .legal-page,
  .contact-wrap,
  .thanks-wrap {
    width: calc(100% - 32px);
  }

  .header-inner,
  .header-actions,
  .container,
  .hero-grid,
  .page-hero-grid,
  .split-layout,
  .service-detail-grid,
  .final-cta-grid,
  .section-heading {
    min-width: 0;
  }

  .header-actions {
    gap: 8px;
  }

  .header-cta {
    flex-shrink: 0;
    padding-inline: 14px;
  }

  .final-cta-grid > *,
  .split-layout > *,
  .page-hero-grid > *,
  .service-detail-grid > *,
  .three-grid > *,
  .note-grid > *,
  .pricing-summary-grid > *,
  .choice-map > *,
  .pricing-info-grid > *,
  .pricing-factor-grid > *,
  .work-card-grid > *,
  .pricing-scope-card > * {
    min-width: 0;
  }

  .jp-break,
  .jp-break-text {
    text-wrap: auto;
    word-break: normal;
    overflow-wrap: break-word;
  }

  h1,
  h2,
  h3,
  p,
  li,
  summary,
  .line-item,
  .scope-list span,
  .notice-list p,
  .work-card p,
  .work-card li,
  .note-grid p,
  .steps-list span,
  .pricing-scope-list span {
    text-wrap: auto;
    word-break: normal;
    overflow-wrap: break-word;
  }

  .button {
    width: 100%;
    min-height: 56px;
    justify-content: center;
    gap: 16px;
    padding-inline: 18px;
  }

  .button::after {
    flex: 0 0 auto;
  }

  .button-label {
    flex: 0 1 auto;
  }

  .button-label span {
    white-space: normal;
  }

  .sp-br {
    display: initial;
  }

  .hero-copy {
    display: contents;
    padding-bottom: 0;
  }

  .hero {
    min-height: 0;
    display: block;
    padding-block: 38px 48px;
  }

  .hero-grid {
    gap: 18px;
    min-width: 0;
  }

  .hero-copy h1 {
    order: 1;
  }

  .hero-copy .lead {
    order: 2;
  }

  .hero-visual {
    order: 3;
  }

  .hero-copy .button {
    order: 4;
  }

  h1 {
    margin-bottom: 26px;
    font-size: 31px;
    line-height: 1.55;
  }

  .hero h1 {
    margin-bottom: 16px;
    font-size: 28px;
    line-height: 1.45;
  }

  h1 em::after {
    bottom: -0.18em;
    height: 3px;
  }

  h2 {
    font-size: 27px;
  }

  .lead {
    margin-bottom: 18px;
    font-size: 15px;
    line-height: 1.75;
  }

  .hero-visual {
    width: 100%;
    margin-left: 0;
  }

  .hero-visual img {
    max-height: 28svh;
    object-fit: contain;
  }

  .problem {
    text-align: left;
  }

  .problem h2,
  .services h2,
  .approach h2 {
    text-align: center;
  }

  .problem-list {
    border: 0;
    gap: 10px;
  }

  .problem-item {
    min-height: 76px;
    display: grid;
    grid-template-columns: 26px 1fr;
    place-items: initial;
    align-items: center;
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--white);
  }

  .problem-item:not(:last-child) {
    border-bottom: 1px solid var(--line);
  }

  .problem-item p {
    line-height: 1.55;
  }

  .service-card {
    min-height: 0;
    padding: 24px;
  }

  .service-card-featured {
    grid-template-columns: 1fr;
    padding: 28px 24px;
  }

  .service-card-featured .service-badge,
  .service-card-featured .service-kicker,
  .service-card-featured h3,
  .service-card-featured p:last-of-type,
  .service-card-featured .service-points,
  .service-card-featured .service-figure {
    grid-column: auto;
  }

  .service-card-featured h3 {
    font-size: 31px;
  }

  .service-card-featured .service-figure {
    grid-row: auto;
    width: min(100%, 260px);
    margin: 18px auto 22px;
  }

  .service-card-compact {
    grid-template-columns: 1fr;
  }

  .service-card-compact .service-kicker,
  .service-card-compact h3,
  .service-card-compact p:last-child,
  .service-card-compact .service-figure {
    grid-column: auto;
  }

  .service-card-compact .service-figure {
    grid-row: auto;
    width: min(100%, 210px);
    margin: 12px auto 18px;
  }

  .card-arrow {
    top: 42px;
    right: 24px;
  }

  .service-figure {
    width: min(100%, 220px);
    height: auto;
  }

  .approach {
    text-align: left;
  }

  .approach-flow {
    grid-template-columns: 1fr;
    max-width: 360px;
    padding-bottom: 0;
  }

  .approach-step {
    grid-template-columns: 84px 1fr;
    grid-template-areas:
      "icon title"
      "icon text";
    justify-items: start;
    column-gap: 18px;
    text-align: left;
  }

  .approach-step img {
    grid-area: icon;
    width: 70px;
    height: 70px;
    margin: 0;
  }

  .approach-step h3 {
    grid-area: title;
    align-self: end;
    margin: 0;
    font-size: 22px;
  }

  .approach-step p {
    grid-area: text;
  }

  .approach-arrow {
    width: 70px;
    height: 48px;
  }

  .approach-arrow svg { transform: rotate(90deg); }

  .approach-return {
    display: none;
  }

  .owner-copy h2 {
    order: 1;
    margin-bottom: 0;
    font-size: 26px;
    line-height: 1.45;
  }

  .owner-copy {
    display: contents;
  }

  .owner-copy p {
    order: 2;
    margin-bottom: 0;
    font-size: 14px;
    line-height: 1.75;
  }

  .owner-timeline {
    order: 3;
    width: min(100%, 320px);
    margin: 2px auto 0;
  }

  .owner-copy .button {
    order: 4;
  }

  .owner.section {
    padding-block: 48px 44px;
  }

  .owner-grid {
    gap: 22px;
  }

  .final-action,
  .final-action .button {
    width: 100%;
    max-width: 100%;
  }

  .final-action .button {
    justify-content: center;
  }

  .price-item strong {
    font-size: 48px;
  }

  .final-cta h2 {
    font-size: 26px;
  }

  .page-hero {
    padding-block: 28px 48px;
  }

  .page-hero:not(.simple-hero) {
    min-height: 0;
    display: block;
  }

  .page-hero-grid {
    gap: 18px;
    min-width: 0;
  }

  .page-hero-copy {
    display: contents;
  }

  .page-hero-copy .page-kicker {
    order: 1;
  }

  .page-kicker {
    margin-bottom: 8px;
  }

  .page-hero-copy h1 {
    order: 2;
  }

  .page-hero-copy .page-lead {
    order: 3;
  }

  .page-hero-figure {
    order: 4;
  }

  .page-hero-copy .hero-meta {
    order: 5;
  }

  .page-hero-copy .button {
    order: 6;
  }

  .page-hero h1,
  .contact-main h1,
  .thanks-main h1 {
    font-size: 28px;
    line-height: 1.42;
  }

  .page-hero h1 {
    margin-bottom: 14px;
  }

  .page-lead {
    margin-bottom: 14px;
    font-size: 14px;
    line-height: 1.68;
  }

  .hero-meta {
    gap: 6px;
    margin-bottom: 14px;
  }

  .meta-pill {
    min-height: 30px;
    padding: 4px 10px;
    font-size: 12px;
  }

  .page-hero-figure {
    width: 100%;
    margin-left: 0;
  }

  .page-hero-figure img {
    max-height: 28svh;
    object-fit: contain;
  }

  .page-section {
    padding-block: 72px;
  }

  .section-heading {
    margin-bottom: 34px;
  }

  .subsection-heading {
    margin-top: 48px;
  }

  .section-heading.center {
    text-align: left;
  }

  .page-section .section-heading.center h2,
  .simple-hero,
  .page-cta {
    text-align: center;
  }

  .mini-flow-5 {
    grid-template-columns: 1fr;
    max-width: 230px;
    gap: 24px;
  }

  .mini-flow div {
    grid-template-columns: 66px minmax(0, 1fr);
    justify-items: start;
    align-items: center;
    column-gap: 14px;
    min-height: 66px;
    text-align: left;
  }

  .mini-flow img {
    width: 66px;
    height: 66px;
  }

  .mini-flow div:not(:last-child)::after {
    content: "";
    top: calc(100% + 2px);
    right: auto;
    bottom: auto;
    left: 32px;
    width: 2px;
    height: 16px;
    background: currentColor;
    transform: none;
  }

  .mini-flow div:not(:last-child)::before {
    content: "";
    position: absolute;
    top: calc(100% + 12px);
    left: 27px;
    width: 10px;
    height: 10px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
  }

  .conversion-flow {
    align-items: stretch;
    flex-direction: column;
  }

  .method-visual {
    position: relative;
    aspect-ratio: 1.25 / 1;
    background-image: url("./assets/improvement-method-visual.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 134% auto;
  }

  .method-visual img {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
  }

  .conversion-flow span {
    width: 100%;
    min-width: 0;
  }

  .service-detail-grid {
    gap: 32px;
  }

  .price-card strong {
    font-size: 46px;
  }

  .pricing-summary-card {
    padding: 24px;
  }

  .pricing-summary-price {
    font-size: 42px;
  }

  .pricing-scope-table {
    overflow: visible;
    border: 0;
    background: transparent;
    gap: 12px;
  }

  .pricing-scope-headrow {
    display: none;
  }

  .pricing-scope-row {
    overflow: hidden;
    grid-template-columns: 1fr;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--white);
  }

  .pricing-scope-row:not(:last-child) {
    border-bottom: 1px solid var(--line);
  }

  .pricing-scope-row > * {
    padding: 14px 16px;
  }

  .pricing-scope-row > *:not(:last-child) {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .pricing-scope-row > strong {
    background: linear-gradient(135deg, #ffffff 0%, #eef7fd 100%);
    font-size: 15px;
  }

  .pricing-scope-row > span::before {
    display: block;
    margin-bottom: 4px;
    color: var(--blue);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.5;
  }

  .pricing-scope-row > span:nth-child(2)::before {
    content: "Webサイト改善";
  }

  .pricing-scope-row > span:nth-child(3)::before {
    content: "LP制作";
    color: var(--green-dark);
  }

  .pricing-scope-row > span:nth-child(4)::before {
    content: "Webサイト制作";
  }

  .pricing-scope-card {
    gap: 22px;
    padding: 24px;
  }

  .scope-list div,
  .steps-list li,
  .pricing-scope-list li {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .page-cta h2 {
    font-size: 27px;
  }

  .contact-main,
  .thanks-main {
    padding-block: 52px 84px;
  }

  .contact-form .button {
    justify-self: stretch;
  }
}


/* Operator profile: text-led introduction on TOP and ABOUT. */
.owner-profile-grid {
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 6vw, 80px);
}

.owner-work {
  margin: 0;
  padding: clamp(24px, 3vw, 40px);
  background: var(--soft-blue);
  border-left: 3px solid var(--blue);
}

.owner-work div + div {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--line-strong);
}

.owner-work dt,
.profile-experience dt {
  color: var(--blue-dark);
  font-weight: 700;
}

.owner-work dd,
.profile-experience dd {
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 1.9;
}

.profile-experience {
  margin: 0;
  border-top: 1px solid var(--line);
}

.profile-experience > div {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 24px;
  padding-block: 28px;
  border-bottom: 1px solid var(--line);
}

.profile-experience dd {
  margin: 0;
}

.profile-story > p {
  margin: 0 0 24px;
  line-height: 2;
}

@media (max-width: 980px) {
  .owner-profile-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .owner-profile-grid .owner-work {
    order: 3;
  }

  .profile-experience > div {
    grid-template-columns: 1fr;
    gap: 8px;
    padding-block: 24px;
  }
}


/* ABOUT line breaks: one desktop title, an explicit name line on mobile. */
.about-hero > .container {
  max-width: 1100px;
}

.about-hero .about-title {
  font-size: clamp(28px, 4.2vw, 46px);
  white-space: nowrap;
}

.about-page .text-unit {
  display: inline-block;
}

.about-page :is(p, dd) {
  text-wrap: pretty;
}

.about-page h2 {
  text-wrap: balance;
}

.about-hero .intro-sentence {
  display: block;
  text-wrap: balance;
}

.about-hero .intro-sentence + .intro-sentence {
  margin-top: 0.35em;
}

@media (max-width: 640px) {
  .about-hero .about-title {
    font-size: clamp(22px, 7.1vw, 32px);
    line-height: 1.55;
  }

  .about-hero .page-lead + .page-lead {
    margin-top: 24px;
  }
}


/* Pricing: common desktop rows align headings, amounts and detail links. */
.pricing-page .copy-tail {
  white-space: nowrap;
}

.pricing-page :is(p, li, .pricing-scope-row > span) {
  text-wrap: pretty;
}

.pricing-page :is(h1, h2, h3) {
  text-wrap: balance;
}

.pricing-page .pricing-summary-price {
  white-space: nowrap;
}

@media (min-width: 921px) {
  .pricing-page .pricing-summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 24px;
    row-gap: 0;
  }

  .pricing-page .pricing-summary-card {
    grid-row: span 7;
    grid-template-rows: subgrid;
    row-gap: 0;
    padding: clamp(22px, 2.3vw, 30px);
  }

  .pricing-page .pricing-summary-card > .service-badge { grid-row: 1; }
  .pricing-page .pricing-summary-card > h3 { grid-row: 2; }
  .pricing-page .pricing-summary-price { grid-row: 3; font-size: clamp(36px, 3.9vw, 50px); }
  .pricing-page .pricing-summary-meta { grid-row: 4; }
  .pricing-page .pricing-summary-text { grid-row: 5; }
  .pricing-page .pricing-summary-points { grid-row: 6; }
  .pricing-page .pricing-summary-card > .text-link { grid-row: 7; align-self: end; }
}

.pricing-page .copy-unit { display: inline-block; }


/* Shared footer: give the introduction room and wrap at phrase boundaries. */
.footer-intro {
  min-width: 0;
}

.footer-intro .footer-copy {
  max-width: 34em;
  line-height: 1.9;
}

.footer-sentence {
  display: block;
  text-wrap: balance;
}

.footer-sentence + .footer-sentence {
  margin-top: 0.25em;
}

.footer-phrase {
  display: inline-block;
}

@media (min-width: 921px) {
  .footer-grid {
    grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr));
    gap: clamp(32px, 4vw, 56px);
  }
}


/* Pricing hierarchy: identify every service, spotlight site improvement. */
.pricing-page .service-badge-secondary {
  color: #4d6272;
  background: #edf2f6;
}

.pricing-page .pricing-summary-green .service-badge-secondary {
  color: #496329;
  background: #eef4e5;
}

.pricing-page .pricing-summary-main {
  position: relative;
  border-color: var(--blue);
  background: linear-gradient(145deg, #f8fcff 0%, #e5f2ff 100%);
  box-shadow: inset 0 0 0 1px var(--blue), 0 8px 24px rgba(0, 93, 170, 0.10);
}

.pricing-page .pricing-summary-main::before {
  content: "";
  position: absolute;
  inset: -1px -1px auto;
  height: 5px;
  border-radius: 8px 8px 0 0;
  background: var(--blue-dark);
}

.pricing-page .pricing-summary-main .pricing-summary-price {
  color: var(--blue-deep);
}

.pricing-page .pricing-summary-card > .text-link {
  width: fit-content;
  min-height: 46px;
  padding: 9px 16px;
  border: 1px solid transparent;
  border-radius: 6px;
}

.pricing-page .pricing-summary-main > .text-link {
  color: var(--white);
  background: var(--blue-dark);
}

.pricing-page .pricing-summary-main > .text-link:hover {
  background: var(--blue-deep);
}

.pricing-page .pricing-summary-card > .text-link:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 4px;
}


/* Compact stacked pricing cards; preserve the aligned desktop comparison. */
@media (max-width: 920px) {
  .pricing-page .pricing-summary-grid { gap: 20px; }

  .pricing-page .pricing-summary-card {
    padding: 22px;
    min-width: 0;
    align-items: start;
  }

  .pricing-page .pricing-summary-card > .service-badge { margin: 0 0 12px; }
  .pricing-page .pricing-summary-card > h3 { margin: 0 0 8px; font-size: 24px; }
  .pricing-page .pricing-summary-price { margin: 0 0 6px; font-size: 40px; }
  .pricing-page .pricing-summary-meta { margin: 0 0 12px; }
  .pricing-page .pricing-summary-text { line-height: 1.75; }
  .pricing-page .pricing-summary-points { margin: 12px 0 0; gap: 6px; }

  .pricing-page .pricing-summary-card > .text-link {
    width: 100%;
    justify-content: center;
    margin-top: 18px;
    border-color: var(--line-strong);
  }

  .pricing-page .pricing-summary-main > .text-link { border-color: var(--blue-dark); }
}

@media (min-width: 400px) and (max-width: 640px) {
  .pricing-page .pricing-summary-points {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
  }

  .pricing-page .pricing-summary-points > li:last-child { grid-column: 1 / -1; }
}

@media (min-width: 641px) and (max-width: 920px) {
  .pricing-page .pricing-summary-card {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    column-gap: 28px;
    grid-template-areas:
      "badge description"
      "title description"
      "price points"
      "meta points"
      "action action";
  }

  .pricing-page .pricing-summary-card > .service-badge { grid-area: badge; }
  .pricing-page .pricing-summary-card > h3 { grid-area: title; }
  .pricing-page .pricing-summary-price { grid-area: price; }
  .pricing-page .pricing-summary-meta { grid-area: meta; margin-bottom: 0; }
  .pricing-page .pricing-summary-text { grid-area: description; }
  .pricing-page .pricing-summary-points { grid-area: points; margin-top: 8px; }
  .pricing-page .pricing-summary-card > .text-link {
    grid-area: action;
    width: 220px;
    max-width: 100%;
    justify-self: end;
  }
}


/* Business pricing: show one amount with a compact tax-exclusive label. */
.pricing-summary-price .price-tax,
.price-card strong .price-tax,
.price-item strong .price-tax {
  display: inline-block;
  margin-left: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
  vertical-align: baseline;
}

@media (max-width: 399px) {
  .pricing-page .pricing-summary-price { font-size: 36px; }
  .price-card strong { font-size: 36px; }
}

/* Contact submission states. */
.form-trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.form-status { padding: 16px; border-left: 3px solid var(--blue); background: #f0f7fc; line-height: 1.8; }
.form-status[hidden] { display: none; }
.contact-form button:disabled { opacity: .6; cursor: wait; }

/* Contact receipt: readable phrases, separate addresses, one-line action. */
.thanks-wrap { min-width: 0; }
.thanks-wrap h1 { font-size: clamp(24px, 3.5vw, 36px); line-height: 1.5; text-wrap: balance; }
.thanks-wrap .receipt-summary {
  width: 100%;
  max-width: 44rem;
  min-width: 0;
  padding: 28px 32px;
  margin-bottom: 32px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--white);
  text-align: left;
}
.thanks-wrap .receipt-summary p { margin: 0 0 20px; text-wrap: wrap; overflow-wrap: normal; }
.thanks-wrap .receipt-summary p:last-child { margin-bottom: 0; }
.thanks-wrap .receipt-phrase { display: inline-block; }
.thanks-wrap .receipt-summary a { color: var(--blue); text-decoration: underline; }
.thanks-wrap .receipt-label { display: block; font-size: 13px; color: var(--muted); }
.thanks-wrap .receipt-address { display: block; overflow-wrap: anywhere; }
.thanks-wrap [data-receipt-reference] { font-size: 13px; color: var(--muted); }
.thanks-wrap .receipt-contact { padding-top: 16px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.thanks-wrap .receipt-contact a { display: block; width: fit-content; max-width: 100%; font-size: 16px; white-space: nowrap; }
.thanks-wrap .thanks-home { min-height: 56px; max-width: 100%; white-space: nowrap; }
@media (max-width: 480px) {
  .thanks-wrap .receipt-summary { padding: 20px; font-size: 15px; }
  .thanks-wrap .receipt-contact a { font-size: 15px; }
}

/* Shared Japanese copy: keep meaningful endings intact at narrow widths. */
.copy-tail { display: inline-block; white-space: nowrap; }
main :is(p, li, dd, dt) { text-wrap: pretty; }
.page-hero-grid > * { min-width: 0; max-width: 100%; }
.legal-page h1 { font-size: clamp(26px, 4vw, 42px); }
.jp-break { word-break: normal; overflow-wrap: break-word; text-wrap: balance; }
.line-item-copy { min-width: 0; text-wrap: pretty; }
.conversion-flow.compact { flex-wrap: nowrap; gap: 10px; padding: 22px; }
.conversion-flow.compact span { min-width: 0; flex: 1; padding: 14px 8px; font-size: 17px; white-space: nowrap; }
@media (max-width: 640px) {
  .conversion-flow strong { align-self: center; transform: rotate(90deg); }
}

/* Editorial headings: explicit thought boundaries, with phrase-level wrapping. */
.editorial-heading, .editorial-heading .heading-line { text-wrap: wrap; }
.heading-line { display: block; }
.heading-phrase { display: inline-block; white-space: nowrap; }
.editorial-section-wide { max-width: 100%; }
@media (min-width: 921px) {
  .editorial-split { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); }
  .editorial-split h2 { font-size: clamp(28px, 2.6vw, 40px); }
}

/* Keep the LP introduction sentence on one desktop line. */
@media (min-width: 921px) {
  .lp-hero-grid { grid-template-columns: minmax(32em, 1.2fr) minmax(0, .8fr); gap: 48px; }
  .lp-hero-sentence { white-space: nowrap; }
}

.final-action .cta-invitation {
  width: min(100%, 330px);
  font-size: 14px;
  line-height: 1.5;
  white-space: nowrap;
}

/* Preserve the TOP headline's phrase lines with the longer service name. */
@media (min-width: 1181px) {
  .hero h1 { font-size: clamp(36px, 3.6vw, 48px); }
}

/* Mobile reading hierarchy and consistent consultation actions. */
@media (max-width: 640px) {
  body { font-size: 17px; }

  .hero h1 {
    font-size: clamp(27px, 8.4vw, 42px);
    line-height: 1.5;
    letter-spacing: -.04em;
    text-align: center;
  }
  .hero .lead { font-size: 16px; line-height: 1.9; text-align: center; }
  .hero-grid { gap: 24px; }
  .hero-visual img { max-height: 260px; }

  .mobile-menu nav { width: calc(100% - 32px); }
  .mobile-menu a { font-size: 17px; }
  .button-consult.button, .mobile-menu .mobile-menu-cta {
    min-height: 56px;
    padding: 12px 8px;
    gap: 6px;
    font-size: 16px;
    line-height: 1.5;
    white-space: nowrap;
  }
  .button-consult.button .button-label,
  .button-consult.button .button-label span { display: inline; white-space: nowrap; }
  .button-consult.button::before, .mobile-menu-cta::before { width: 18px; height: 18px; }
  .mobile-menu-cta::after { content: "→"; }
  .header-cta { min-height: 44px; font-size: 15px; }

  #top h2 { font-size: clamp(24px, 7.2vw, 28px); line-height: 1.5; }
  .problem h2 > wbr, .approach h2 > wbr { display: none; }
  .problem-heading-line, .approach-heading-line { display: block; }
  .problem-item { grid-template-columns: 22px minmax(0, 1fr); gap: 12px; padding: 16px; }
  .problem-item p { font-size: 17px; line-height: 1.7; text-wrap: wrap; }
  .problem-item br { display: none; }
  .problem-phrase { display: inline-block; white-space: nowrap; }

  .approach { text-align: center; }
  .approach-flow { width: max-content; max-width: 100%; margin-inline: auto; }
  .approach-step { grid-template-columns: 72px max-content; column-gap: 20px; }
  .approach-step h3 { font-size: 24px; }
  .approach-step p { font-size: 16px; }
  .approach h2 { line-height: 1.5; }

  .problem-note, .approach-note, .owner-copy p,
  .service-card p:last-child, .service-kicker, .service-points li,
  .owner-work dd, .footer-intro p, .site-footer nav a,
  .price-item p, .price-item small, .price-item > span, .text-link {
    font-size: 16px;
    line-height: 1.85;
  }
  .section-label { font-size: 16px; }
  .problem-note, .approach-note { text-align: center; }
  .service-card-featured h3 { font-size: clamp(24px, 7.2vw, 28px); }
}

/* TOP pricing: introduce the section and compare complete service cards. */
.home-pricing { padding-block: 88px; }
.home-pricing-heading { margin-bottom: 36px; text-align: center; }
.home-pricing-heading h2 { margin-bottom: 18px; }
.home-pricing-heading p { margin: 0; font-size: 17px; line-height: 1.9; }
.home-pricing-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.home-price-card {
  min-width: 0;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  padding: 28px;
  border: 1px solid var(--line-strong);
  border-top: 4px solid var(--line-strong);
  border-radius: 10px;
  background: var(--white);
}
.home-price-card-main { border-top-color: var(--blue); }
.home-price-card h3 { margin: 0 0 24px; font-size: 22px; line-height: 1.5; }
.home-price-card-main h3 { color: var(--blue-dark); }
.home-price-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.home-price-amount { margin: 0; }
.home-price-amount > strong { display: block; font-size: 52px; line-height: 1.1; white-space: nowrap; }
.home-price-amount > strong > span { margin-left: 4px; font-size: 22px; }
.home-price-tax { display: block; margin-top: 6px; font-size: 13px; color: var(--muted); }
.home-price-period { margin: 0; text-align: right; white-space: nowrap; }
.home-price-period > span { display: block; margin-bottom: 4px; font-size: 13px; color: var(--muted); }
.home-price-period > strong { font-size: 16px; }
.home-price-scope { margin: 22px 0; font-size: 16px; line-height: 1.8; }
.home-price-detail {
  min-height: 48px;
  justify-content: space-between;
  margin-top: 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 16px;
}
.home-price-detail:hover { text-decoration: underline; text-underline-offset: 4px; }
.home-price-detail:focus-visible { outline: 2px solid var(--blue); outline-offset: 5px; border-radius: 2px; }
.home-pricing-action { margin-top: 32px; text-align: center; }
.home-pricing-action .button { width: auto; max-width: 100%; font-size: 16px; white-space: nowrap; }
@media (min-width: 921px) and (max-width: 1120px) {
  .home-pricing-grid { gap: 16px; }
  .home-price-card { padding: 22px; }
  .home-price-card h3 { font-size: 20px; }
  .home-price-amount > strong { font-size: 44px; }
  .home-price-amount > strong > span { font-size: 20px; }
}
@media (max-width: 920px) {
  .home-pricing-grid { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; gap: 20px; }
}
@media (max-width: 640px) {
  .home-pricing { padding-block: 64px; }
  .home-pricing-heading { margin-bottom: 28px; }
  .home-pricing-heading p { font-size: 16px; }
  .home-price-card { padding: 22px 20px 18px; }
  .home-price-card h3 { font-size: 20px; margin-bottom: 18px; }
  .home-price-amount > strong { font-size: 44px; }
  .home-price-amount > strong > span { font-size: 20px; }
  .home-price-scope { margin-block: 18px; }
  .home-pricing-action .button { width: 100%; max-width: 560px; padding-inline: 10px; gap: 8px; }
}

/* Mobile service cards: use the full content width without desktop grid tracks. */
@media (max-width: 640px) {
  .services .service-card-compact {
    display: block;
    min-width: 0;
    padding: 24px 20px;
  }
  .services .service-card-compact > :is(p, h3) {
    width: 100%;
    max-width: none;
    min-width: 0;
    text-wrap: wrap;
  }
  .services .service-card-compact .service-kicker {
    min-height: 44px;
    padding-right: 54px;
  }
  .services .service-card-compact .card-arrow { top: 24px; right: 20px; }
  .services .service-card-compact h3 { font-size: clamp(24px, 7.2vw, 28px); }
  .services .service-card-compact .service-figure {
    width: 100%;
    max-width: 280px;
    height: auto;
    margin: 16px auto 20px;
  }
}

/* Profile layout: explicit sections instead of display: contents on mobile. */
.owner-profile-grid {
  grid-template-areas: "intro work" "action work";
  row-gap: 24px;
}
.owner-profile-grid .owner-copy { grid-area: intro; }
.owner-profile-grid .owner-work { grid-area: work; }
.owner-profile-link { grid-area: action; justify-self: start; }
@media (max-width: 980px) {
  .owner-profile-grid { grid-template-areas: "intro" "work" "action"; }
}
@media (max-width: 640px) {
  main :is(p, li, dd, dt) { text-wrap: wrap; }
  .section { padding-block: 64px; }
  .final-cta { padding-block: 48px; }
  .owner-profile-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .owner-profile-grid .owner-copy { display: block; width: 100%; min-width: 0; }
  .owner-profile-grid .owner-copy h2 { margin-bottom: 22px; text-align: center; text-wrap: wrap; }
  .owner-profile-grid .owner-copy p { width: 100%; max-width: none; margin: 0; text-wrap: wrap; }
  .owner-profile-grid .owner-work { min-width: 0; width: 100%; padding: 22px 20px; }
  .owner-profile-link { width: 100%; }

  .site-footer { padding-block: 40px 24px; }
  .site-footer .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }
  .footer-intro { grid-column: 1 / -1; }
  .footer-intro .footer-copy { width: 100%; max-width: none; margin-top: 16px; text-wrap: wrap; }
  .site-footer nav { min-width: 0; gap: 8px; }
  .site-footer nav a {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
    min-height: 56px;
    padding: 10px 22px 10px 10px;
    border: 1px solid var(--line-strong);
    border-radius: 6px;
    background: var(--white);
    font-size: 16px;
    line-height: 1.5;
  }
  .footer-link-label { min-width: 0; }
  .footer-link-label > span { display: inline-block; white-space: nowrap; }
  .site-footer nav a::after {
    content: "›";
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--blue);
    font-size: 22px;
    line-height: 1;
  }
  .site-footer nav a:hover { background: #e7f2fa; }
  .site-footer nav a:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
  .copyright { margin-top: 24px; padding-top: 16px; }
}

/* Mobile layout rules: centered section headings, left-aligned reading text. */
.site-footer .footer-grid { grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)); }
.site-footer :is(.footer-services, .footer-secondary) { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (max-width: 920px) {
  .site-footer .footer-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  body.mobile-ui main :is(h1, h2) { text-align: center; }
  body.mobile-ui main h2 { font-size: clamp(24px, 7.2vw, 28px); line-height: 1.5; margin-bottom: 24px; }
  body.mobile-ui main :is(article, .content-card, .work-card, .price-card, .quiet-panel, .legal-page) :is(h2, h3) { text-align: left; }
  body.mobile-ui main :is(.section-label, .page-kicker) { text-align: center; }
  body.mobile-ui main .mobile-prose {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    font-size: 16px;
    line-height: 1.85;
    text-align: left;
    text-wrap: wrap;
  }
  body.mobile-ui main .mobile-prose :is(.copy-tail, .text-unit, .copy-unit, .nowrap, .receipt-phrase) {
    display: inline;
    white-space: normal;
  }
  body.mobile-ui .about-hero .intro-sentence { text-wrap: wrap; }
  body.mobile-ui main .mobile-prose br { display: none; }
  body.mobile-ui main h2 :is(.copy-tail, .text-unit, .copy-unit) { display: inline-block; white-space: nowrap; }
  body.mobile-ui main :is(.section-heading, .section-heading.center) { width: 100%; max-width: none; margin-inline: 0; }
  body.mobile-ui .hero-meta { justify-content: center; }
  body.mobile-ui .meta-pill { font-size: 14px; min-height: 36px; }
  body.mobile-ui .page-section { padding-block: 64px; }
  body.mobile-ui .page-cta { padding-block: 48px; }
  body.mobile-ui .site-footer .footer-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  body.mobile-ui .footer-intro { grid-column: auto; }
  body.mobile-ui .site-footer .footer-services { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  body.mobile-ui .site-footer .footer-secondary { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
}

/* Mobile navigation: clear, generously sized touch targets. */
@media (max-width: 920px) {
  .menu-button {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    padding: 0;
    gap: 5px;
    border: 1px solid var(--blue);
    border-radius: 8px;
    background: #f0f7fc;
  }
  .menu-button span { width: 22px; background: var(--blue); }
  .menu-button[aria-expanded="true"] { background: var(--blue); }
  .menu-button[aria-expanded="true"] span { background: var(--white); }
  .menu-button[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-button[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu-button[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .menu-button:focus-visible, .mobile-menu a:focus-visible {
    outline: 3px solid var(--blue);
    outline-offset: 2px;
  }
  .mobile-menu { visibility: hidden; }
  .mobile-menu.is-open {
    visibility: visible;
    max-height: calc(100dvh - 64px);
    overflow-y: auto;
    overscroll-behavior: contain;
    box-shadow: 0 10px 20px rgb(20 55 80 / 10%);
  }
  .mobile-menu nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding-block: 16px 20px;
  }
  .mobile-menu a:not(.mobile-menu-cta) {
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border: 1px solid #c3dced;
    border-radius: 8px;
    background: #f0f7fc;
    font-size: 16px;
    line-height: 1.5;
  }
  .mobile-menu a:nth-child(-n+3), .mobile-menu .mobile-menu-cta { grid-column: 1 / -1; }
  .mobile-menu a:not(.mobile-menu-cta)::after { content: "›"; color: var(--blue); font-size: 24px; line-height: 1; }
  .mobile-menu a:not(.mobile-menu-cta):is(:hover, :active) { background: #e0eef9; border-color: var(--blue); }
  .mobile-menu .mobile-menu-cta { margin-top: 8px; border-radius: 8px; }
}

/* Give mobile headings and actions more prominence without narrowing prose. */
@media (max-width: 640px) {
  body.mobile-ui .hero h1 { font-size: clamp(27px, 8.6vw, 44px); }
  body.mobile-ui :is(.page-hero, .contact-main, .thanks-main) h1 { font-size: clamp(30px, 8.5vw, 36px); }
  body.mobile-ui .about-hero .about-title { font-size: clamp(22px, 7.1vw, 32px); }
  body.mobile-ui main h2, body.mobile-ui #top h2 { font-size: clamp(26px, 7.8vw, 30px); }
  body.mobile-ui .services :is(.service-card-featured, .service-card-compact) h3 { font-size: clamp(26px, 7.8vw, 30px); }
  body.mobile-ui .home-price-card h3 { font-size: 22px; }
  body.mobile-ui .button, body.mobile-ui .mobile-menu .mobile-menu-cta {
    font-size: clamp(16px, 4.8vw, 18px);
    min-height: 60px;
  }
  body.mobile-ui .header-cta { font-size: 16px; }
}

@media (max-width: 359px) {
  body.mobile-ui .header-cta { padding-inline: 10px; }
  body.mobile-ui .hero h1 { font-size: 27px; }
  body.mobile-ui .button-consult.button, body.mobile-ui .mobile-menu .mobile-menu-cta { padding-inline: 4px; gap: 0; }
  body.mobile-ui .button-consult.button::before, body.mobile-ui .button-consult.button::after,
  body.mobile-ui .mobile-menu-cta::before, body.mobile-ui .mobile-menu-cta::after { display: none; }
}

@media (max-width: 920px) {
  body.mobile-ui .header-cta::after { display: none; }
}