/* 公開HP専用：共通基礎・Navigation・TOP・ABOUT・SERVICE。 */
.public-site {
  --hp-font-ja: "Noto Sans JP", sans-serif;
  --hp-font-en: "Inter", "Noto Sans JP", sans-serif;
  --hp-white: #ffffff;
  --hp-primary: #183c72;
  --hp-accent: #b6242d;
  --hp-gray: #a9b1b7;
  --hp-text: #1d252c;
  --hp-text-secondary: #66717a;
  --hp-light-background: #f5f7f9;
  --hp-border: #dfe3e6;
  --hp-hero-size: 64px;
  --hp-page-title-size: 56px;
  --hp-section-heading-size: 40px;
  --hp-sub-heading-size: 24px;
  --hp-body-large-size: 18px;
  --hp-body-size: 16px;
  --hp-caption-size: 14px;
  --hp-heading-weight: 700;
  --hp-sub-heading-weight: 600;
  --hp-hero-line-height: 1.05;
  --hp-container-width: 1200px;
  --hp-wide-container-width: 1400px;
  --hp-section-space: 96px;
  --hp-large-section-space: 120px;
  --hp-gutter: 32px;
  --hp-button-height: 52px;
  --hp-button-padding: 28px;
  --hp-radius: 4px;
  --hp-radius-large: 8px;

  margin: 0;
  background: var(--hp-white);
  color: var(--hp-text);
  font-family: var(--hp-font-ja);
  font-size: var(--hp-body-size);
  line-height: 1.8;
}

.public-site *,
.public-site *::before,
.public-site *::after {
  box-sizing: border-box;
}

.public-site :lang(en) {
  font-family: var(--hp-font-en);
}

.public-site a {
  color: var(--hp-primary);
  text-underline-offset: 0.2em;
}

.public-site a:focus-visible {
  outline: 2px solid var(--hp-primary);
  outline-offset: 4px;
}

.public-site .public-site-container {
  width: calc(100% - var(--hp-gutter) * 2);
  max-width: var(--hp-container-width);
  margin-inline: auto;
}

.public-site .public-site-container--wide {
  max-width: var(--hp-wide-container-width);
}

.public-site .public-site-header {
  border-bottom: 1px solid var(--hp-border);
}

.public-site .public-site-footer {
  border-top: 1px solid var(--hp-border);
}

.public-site .public-site-header-inner,
.public-site .public-site-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 24px;
}

.public-site .public-site-header-inner {
  justify-content: space-between;
}

.public-site .public-site-brand {
  font-weight: var(--hp-heading-weight);
  text-decoration: none;
}

.public-site .public-site-page-title {
  margin: 0;
  font-size: var(--hp-page-title-size);
  font-weight: var(--hp-heading-weight);
  line-height: 1.2;
}

.public-site .public-site-section {
  padding-block: var(--hp-section-space);
  border-bottom: 1px solid var(--hp-border);
}

.public-site .public-site-section-heading {
  margin: 0;
  font-size: var(--hp-section-heading-size);
  font-weight: var(--hp-heading-weight);
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.public-site .public-site-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--hp-button-height);
  padding-inline: var(--hp-button-padding);
  border: 1px solid var(--hp-accent);
  border-radius: var(--hp-radius);
  background: var(--hp-accent);
  color: var(--hp-white);
  text-decoration: none;
}

.public-site .public-site-button--secondary {
  border-color: var(--hp-primary);
  background: transparent;
  color: var(--hp-primary);
}

.public-site .public-site-caption {
  color: var(--hp-text-secondary);
  font-size: var(--hp-caption-size);
}

/* Tablet / Small PC: 768–1199px。Desktopは1200px以上。 */
@media (min-width: 768px) and (max-width: 1199px) {
  .public-site {
    --hp-gutter: 24px;
  }
}

@media (max-width: 767px) {
  .public-site {
    --hp-hero-size: 40px;
    --hp-page-title-size: 36px;
    --hp-section-heading-size: 30px;
    --hp-sub-heading-size: 20px;
    --hp-section-space: 64px;
    --hp-large-section-space: 64px;
    --hp-gutter: 20px;
  }
}

/* Shared navigation — native details keeps mobile navigation usable without JS. */
.public-site .public-site-header { padding-block: 0; background: var(--hp-white); }
.public-site .public-site-header-inner { min-height: 80px; flex-wrap: nowrap; gap: 24px; }
.public-site .public-site-brand { white-space: nowrap; font-size: 19px; letter-spacing: -.035em; }
.public-site .public-site-header .public-site-nav { gap: 20px; flex-wrap: nowrap; font-size: 13px; font-weight: 600; }
.public-site .public-site-nav > a:not(.public-site-button) { text-decoration: none; padding-block: 8px; }
.public-site .public-site-nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--hp-accent); text-underline-offset: 8px; }
.public-site .public-site-store-links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.public-site .public-site-store-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 600; white-space: nowrap; }
.public-site .public-site-header .public-site-store-links { border-left: 1px solid var(--hp-border); padding-left: 20px; gap: 12px; }
.public-site .public-site-mobile-menu { display: none; }
.public-site .public-site-button { font-weight: 600; transition: background-color .15s, border-color .15s; }
.public-site .public-site-button:hover { background: var(--hp-primary); border-color: var(--hp-primary); color: var(--hp-white); }
.public-site .public-site-button--secondary:hover { background: var(--hp-primary); }
.public-site .public-site-nav > a:not(.public-site-button):hover,
.public-site .public-site-store-link:hover,
.public-site .public-site-legal a:hover { color: var(--hp-accent); }
.public-site .public-site-footer { padding-block: 48px 24px; }
.public-site .public-site-footer-top,
.public-site .public-site-footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.public-site .public-site-footer-top { padding-bottom: 40px; }
.public-site .public-site-footer-bottom { border-top: 1px solid var(--hp-border); padding-top: 24px; }
.public-site .public-site-footer .public-site-nav { font-size: 14px; }
.public-site .public-site-footer .public-site-caption { margin: 0; }
.public-site .public-site-legal { display: flex; flex-wrap: wrap; gap: 24px; font-size: 13px; }
.public-site .public-site-legal a { color: var(--hp-text-secondary); text-decoration: none; }

/* TOP: content-led sections, with a restrained graphic instead of a hero mockup. */
.public-site .public-site-top .public-site-section { border-bottom: 0; }
.public-site .public-site-top .public-site-section-heading { color: var(--hp-primary); line-height: 1.4; overflow-wrap: normal; }
.public-site .public-site-top p { margin: 0; }
.public-site .public-site-eyebrow { display: flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 600; letter-spacing: .1em; color: var(--hp-primary); }
.public-site .public-site-eyebrow::before { content: ""; flex: 0 0 24px; height: 2px; background: var(--hp-accent); }
.public-site .public-site-top .public-site-eyebrow { margin-bottom: 24px; }
.public-site .public-site-body-large { font-size: var(--hp-body-large-size); line-height: 1.8; }
.public-site .public-site-top-hero { padding-block: 80px 24px; background: var(--hp-light-background); }
.public-site .public-site-hero-layout { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.public-site .public-site-hero-copy h1 { margin: 0 0 28px; font-size: var(--hp-hero-size); font-weight: 700; line-height: var(--hp-hero-line-height); letter-spacing: -.035em; color: var(--hp-primary); }
@media (min-width: 1200px) {
  .public-site #top-hero-heading,
  .public-site #top-about-heading { white-space: nowrap; }
  .public-site #top-about-heading { font-size: 34px; }
}
.public-site .public-site-top .public-site-hero-sub { margin-bottom: 20px; font-size: 24px; font-weight: 600; letter-spacing: -.04em; }
.public-site .public-site-hero-copy .public-site-body-large { color: var(--hp-text-secondary); }
.public-site .public-site-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 24px; margin-top: 36px; }
/* Preserve the former diagram's occupied height at each breakpoint. */
.public-site .public-site-hero-graphic { min-width: 0; width: 100%; height: 416px; }
.public-site .public-site-hero-image { display: block; width: 100%; height: 100%; max-width: 100%; object-fit: contain; object-position: center; }
.public-site .public-site-top-about { padding-block: var(--hp-large-section-space); }
.public-site .public-site-about-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 72px; }
.public-site .public-site-about-layout .public-site-section-heading { font-size: var(--hp-section-heading-size); line-height: 1.65; letter-spacing: -.04em; }
.public-site .public-site-about-copy { padding-top: 44px; max-width: 36em; }
.public-site .public-site-about-copy p + p { margin-top: 24px; }
.public-site .public-site-about-copy .public-site-lead { font-size: var(--hp-sub-heading-size); font-weight: 600; color: var(--hp-primary); }
.public-site .public-site-top-service { background: var(--hp-light-background); }
.public-site .public-site-section-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 48px; }
.public-site .public-site-section-intro > .public-site-body-large { color: var(--hp-text-secondary); }
.public-site .public-site-service-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.public-site .public-site-service-item { padding: 36px 28px; border: 1px solid var(--hp-border); border-top: 2px solid var(--hp-primary); background: var(--hp-white); }
.public-site .public-site-service-item .public-site-item-label { margin-bottom: 32px; color: var(--hp-primary); font-size: 13px; letter-spacing: .08em; font-weight: 600; }
.public-site .public-site-service-item h3 { margin: 0 0 24px; font-size: var(--hp-sub-heading-size); font-weight: 600; }
.public-site .public-site-service-item p + p { margin-top: 20px; }
.public-site .public-site-service-item p:not(.public-site-item-label) { color: var(--hp-text-secondary); }
.public-site .public-site-top-why,
.public-site .public-site-top-cta { background: var(--hp-primary); color: var(--hp-white); }
.public-site .public-site-top-why .public-site-section-heading,
.public-site .public-site-top-cta .public-site-section-heading,
.public-site .public-site-top-why .public-site-eyebrow,
.public-site .public-site-top-cta .public-site-eyebrow { color: var(--hp-white); }
.public-site .public-site-why-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin-top: 56px; }
.public-site .public-site-why-item { padding-top: 24px; border-top: 1px solid rgb(255 255 255 / 35%); }
.public-site .public-site-why-item p { font-size: 12px; letter-spacing: .025em; color: #dfe3e6; }
.public-site .public-site-why-item h3 { margin: 16px 0 0; font-size: 20px; font-weight: 600; }
.public-site .public-site-why-item:last-child { position: relative; }
.public-site .public-site-why-item .public-site-why-note { position: absolute; top: 100%; inset-inline: 0; margin: 8px 0 0; overflow-wrap: anywhere; }
.public-site .public-site-top-mobile { padding-block: var(--hp-large-section-space); }
/* Preserve gallery placement after removing the 13px/1.8 hint and its 20px margin. */
.public-site .public-site-top-mobile .public-site-app-gallery { padding-top: calc(13px * 1.8 + 20px); }
.public-site .public-site-app-gallery { width: 100%; max-width: 100%; min-width: 0; display: flex; gap: 28px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding-bottom: 24px; scrollbar-color: var(--hp-primary) var(--hp-light-background); }
.public-site .public-site-app-gallery:focus-visible { outline: 2px solid var(--hp-primary); outline-offset: 6px; }
.public-site .public-site-app-slide { flex: 0 0 clamp(240px, 27%, 340px); min-width: 0; margin: 0; scroll-snap-align: start; }
.public-site .public-site-screen-placeholder,
.public-site .public-site-app-slide img { display: flex; width: 100%; aspect-ratio: 9 / 16; border: 1px solid var(--hp-border); border-radius: var(--hp-radius-large); background: var(--hp-light-background); object-fit: contain; }
.public-site .public-site-screen-placeholder { flex-direction: column; justify-content: center; align-items: center; gap: 16px; color: var(--hp-text-secondary); font-size: 13px; }
.public-site .public-site-screen-label { color: var(--hp-primary); letter-spacing: .12em; font-size: 12px; }
.public-site .public-site-screen-ratio { font-size: 32px; color: var(--hp-text-secondary); }
.public-site .public-site-app-slide figcaption { padding-top: 16px; font-size: 14px; font-weight: 600; }
.public-site .public-site-cta-layout { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 64px; }
.public-site .public-site-top-cta .public-site-body-large { margin-top: 28px; }
.public-site .public-site-cta-actions { display: flex; flex-direction: column; align-items: stretch; gap: 24px; min-width: 260px; }
.public-site .public-site-cta-actions .public-site-store-links { justify-content: center; }
.public-site .public-site-cta-actions .public-site-store-link { color: var(--hp-white); }
.public-site .public-site-top-cta .public-site-button:hover { border-color: var(--hp-white); }
.public-site .public-site-top-cta a:focus-visible { outline-color: var(--hp-white); }

@media (min-width: 768px) and (max-width: 1199px) {
  .public-site .public-site-header-inner { padding-block: 16px; align-items: flex-start; }
  .public-site .public-site-header .public-site-brand { padding-top: 12px; }
  .public-site .public-site-header .public-site-nav { display: grid; grid-template-columns: repeat(4, auto); justify-content: end; gap: 12px 20px; }
  .public-site .public-site-header .public-site-store-links { grid-column: 1 / -1; justify-content: flex-end; border-left: 0; padding-left: 0; }
  .public-site .public-site-hero-layout { gap: 32px; }
  .public-site .public-site-hero-copy h1 { font-size: 56px; }
  .public-site .public-site-top .public-site-hero-sub { font-size: 20px; }
  .public-site .public-site-hero-graphic { height: 432px; }
  .public-site .public-site-about-layout { gap: 32px; }
  .public-site .public-site-about-layout .public-site-section-heading { font-size: 30px; }
  .public-site .public-site-service-grid { gap: 16px; }
  .public-site .public-site-service-item { padding: 28px 20px; }
  .public-site .public-site-service-item h3 { font-size: 21px; }
  .public-site .public-site-service-item br { display: none; }
  .public-site .public-site-why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .public-site .public-site-app-slide { flex-basis: clamp(240px, 36%, 320px); }
  .public-site .public-site-section-intro { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 767px) {
  .public-site .public-site-header-inner { min-height: 72px; gap: 12px; position: relative; }
  .public-site .public-site-brand { font-size: 17px; }
  .public-site .public-site-desktop-nav { display: none; }
  .public-site .public-site-mobile-menu { display: block; }
  .public-site .public-site-menu-toggle { list-style: none; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 6px; min-width: 48px; min-height: 48px; cursor: pointer; color: var(--hp-primary); }
  .public-site .public-site-menu-toggle::-webkit-details-marker { display: none; }
  .public-site .public-site-menu-toggle:focus-visible { outline: 2px solid var(--hp-primary); outline-offset: 2px; }
  .public-site .public-site-menu-label { font-size: 9px; letter-spacing: .06em; }
  .public-site .public-site-menu-icon { display: grid; gap: 6px; }
  .public-site .public-site-menu-icon span { display: block; width: 22px; height: 2px; background: currentColor; transition: transform .15s; }
  .public-site .public-site-mobile-menu[open] .public-site-menu-icon span:first-child { transform: translateY(4px) rotate(45deg); }
  .public-site .public-site-mobile-menu[open] .public-site-menu-icon span:last-child { transform: translateY(-4px) rotate(-45deg); }
  .public-site .public-site-menu-panel { position: absolute; top: 100%; left: calc(-1 * var(--hp-gutter)); right: calc(-1 * var(--hp-gutter)); z-index: 10; padding: 24px var(--hp-gutter) 32px; background: var(--hp-white); border-block: 1px solid var(--hp-border); max-height: calc(100dvh - 72px); overflow-y: auto; }
  .public-site .public-site-header .public-site-nav { align-items: stretch; flex-direction: column; gap: 12px; }
  .public-site .public-site-header .public-site-nav > a:not(.public-site-button) { padding-block: 12px; }
  .public-site .public-site-header .public-site-store-links { border: 0; padding: 12px 0 0; justify-content: center; gap: 24px; }
  .public-site .public-site-top-hero { padding-top: 56px; }
  .public-site .public-site-hero-layout { grid-template-columns: 1fr; gap: 40px; }
  .public-site .public-site-hero-copy h1 { font-size: var(--hp-hero-size); }
  .public-site .public-site-top .public-site-hero-sub { font-size: 18px; }
  .public-site .public-site-body-large { font-size: 16px; }
  .public-site .public-site-eyebrow { font-size: 10px; gap: 8px; letter-spacing: .06em; }
  .public-site .public-site-actions { gap: 20px; margin-top: 28px; }
  .public-site .public-site-hero-graphic { height: 350px; }
  .public-site .public-site-about-layout { grid-template-columns: 1fr; gap: 32px; }
  .public-site .public-site-about-layout .public-site-section-heading { font-size: var(--hp-section-heading-size); line-height: 1.6; }
  .public-site .public-site-desktop-break { display: none; }
  .public-site .public-site-about-copy { padding-top: 0; }
  .public-site .public-site-section-intro { flex-direction: column; align-items: flex-start; gap: 24px; margin-bottom: 32px; }
  .public-site .public-site-service-grid { grid-template-columns: 1fr; gap: 16px; }
  .public-site .public-site-service-item { padding: 28px; }
  .public-site .public-site-service-item .public-site-item-label { margin-bottom: 20px; }
  .public-site .public-site-service-item h3 { margin-bottom: 16px; }
  .public-site .public-site-why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; margin-top: 36px; }
  .public-site .public-site-why-item h3 { font-size: 18px; }
  .public-site .public-site-why-item p { font-size: 11px; }
  .public-site .public-site-app-gallery { gap: 16px; }
  .public-site .public-site-app-slide { flex-basis: calc((100% - 16px) / 1.2); }
  .public-site .public-site-cta-layout { grid-template-columns: 1fr; gap: 36px; }
  .public-site .public-site-cta-actions { min-width: 0; align-items: flex-start; }
  .public-site .public-site-cta-actions > .public-site-button { width: 100%; }
  .public-site .public-site-cta-actions .public-site-store-links { width: 100%; }
  .public-site .public-site-footer-top,
  .public-site .public-site-footer-bottom { flex-direction: column; align-items: flex-start; }
  .public-site .public-site-footer-top { gap: 24px; padding-bottom: 28px; }
  .public-site .public-site-footer .public-site-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; gap: 8px 24px; }
  .public-site .public-site-footer-bottom { flex-direction: column-reverse; gap: 20px; }
}

@media (max-width: 480px) {
  .public-site .public-site-why-grid { grid-template-columns: 1fr; }
  .public-site .public-site-about-copy br { display: none; }
  .public-site .public-site-hero-graphic { height: 338px; }
}

@media (prefers-reduced-motion: reduce) {
  .public-site .public-site-button,
  .public-site .public-site-menu-icon span { transition: none; }
}

/* ABOUT only: company information, story and mission. */
.public-site .public-about .public-site-section {
  border-bottom: 0;
}

.public-site .public-about .public-site-page-title,
.public-site .public-about .public-site-section-heading {
  color: var(--hp-primary);
}

.public-site .public-about-hero .public-site-container {
  padding-bottom: 48px;
  border-bottom: 1px solid var(--hp-border);
}

.public-site .public-about-hero {
  padding-bottom: 0;
}

.public-site .public-about-hero .public-site-page-title::before {
  content: "";
  display: block;
  width: 32px;
  height: 2px;
  margin-bottom: 24px;
  background: var(--hp-accent);
}

.public-site .public-about-subtitle {
  margin: 20px 0 0;
  color: var(--hp-text-secondary);
  font-size: var(--hp-body-large-size);
}

.public-site .public-about-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 64px;
  align-items: start;
}

.public-site .public-about-company-details {
  margin: 0;
  min-width: 0;
}

.public-site .public-about-company-row {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 24px;
  padding-block: 28px;
  border-bottom: 1px solid var(--hp-border);
}

.public-site .public-about-company-row:first-child {
  border-top: 1px solid var(--hp-border);
}

.public-site .public-about-company-row dt {
  color: var(--hp-text-secondary);
  font-weight: 400;
}

.public-site .public-about-company-row dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.public-site .public-about-business-list {
  margin: 0;
  padding-left: 1.2em;
}

.public-site .public-about-business-list li + li {
  margin-top: 8px;
}

.public-site .public-about-story {
  padding-block: var(--hp-large-section-space);
  background: var(--hp-light-background);
}

.public-site .public-about-story-copy {
  min-width: 0;
  max-width: 38em;
  padding-left: 32px;
  border-left: 2px solid var(--hp-accent);
  font-size: var(--hp-body-large-size);
  line-height: 1.8;
}

.public-site .public-about-story-copy p {
  margin: 0;
}

.public-site .public-about-story-copy p + p {
  margin-top: 32px;
}

.public-site .public-about-vision {
  padding-block: var(--hp-large-section-space);
  background: var(--hp-primary);
  color: var(--hp-white);
  text-align: center;
}

.public-site .public-about-vision-label {
  margin: 0;
  font-size: var(--hp-caption-size);
  font-weight: 600;
  letter-spacing: .1em;
}

.public-site .public-about-vision-label::before {
  content: "";
  display: block;
  width: 32px;
  height: 2px;
  margin: 0 auto 24px;
  background: var(--hp-accent);
}

.public-site .public-about-vision-main {
  margin: 32px 0;
  font-size: var(--hp-section-heading-size);
  font-weight: var(--hp-heading-weight);
  line-height: 1.5;
}

.public-site .public-about-vision-copy {
  font-size: var(--hp-body-large-size);
  line-height: 1.8;
}

.public-site .public-about-vision-copy p {
  margin: 0;
}

.public-site .public-about-vision-copy p + p {
  margin-top: 24px;
}

@media (min-width: 768px) and (max-width: 1199px) {
  .public-site .public-about-columns {
    gap: 32px;
  }

  .public-site .public-about-company-row {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 16px;
  }

  .public-site .public-about-story .public-about-columns {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

@media (max-width: 767px) {
  .public-site .public-about-columns {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .public-site .public-about-hero .public-site-container {
    padding-bottom: 32px;
  }

  .public-site .public-about-company-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding-block: 24px;
  }

  .public-site .public-about-company-row dt {
    font-size: var(--hp-caption-size);
  }

  .public-site .public-about-story-copy {
    padding-left: 20px;
    font-size: var(--hp-body-size);
  }

  .public-site .public-about-story-copy br {
    display: none;
  }

  .public-site .public-about-vision-main {
    text-wrap: balance;
  }

  .public-site .public-about-vision-copy {
    font-size: var(--hp-body-size);
  }
}

/* SERVICE only: functionality and onboarding, isolated from TOP / ABOUT. */
.public-site .public-service-page .public-site-section { border-bottom: 0; }
.public-site .public-service-page .public-site-page-title { color: var(--hp-primary); }
.public-site .public-service-heading { margin: 0; color: var(--hp-primary); font-size: var(--hp-section-heading-size); font-weight: 700; line-height: 1.4; overflow-wrap: anywhere; }
.public-site .public-service-label { margin: 0 0 24px; display: flex; align-items: center; gap: 12px; color: var(--hp-primary); font-family: var(--hp-font-en); font-size: 13px; font-weight: 600; letter-spacing: .08em; }
.public-site .public-service-label::before { content: ""; width: 24px; height: 2px; flex-shrink: 0; background: var(--hp-accent); }
.public-site .public-service-copy { font-size: var(--hp-body-large-size); line-height: 1.8; min-width: 0; }
.public-site .public-service-copy p { margin: 0; }
.public-site .public-service-copy p + p { margin-top: 24px; }
.public-site .public-service-hero { padding-bottom: 0; }
.public-site .public-service-hero-inner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; gap: 64px; padding-bottom: 48px; border-bottom: 1px solid var(--hp-border); }
.public-site .public-service-hero .public-site-page-title::before { content: ""; display: block; width: 32px; height: 2px; margin-bottom: 24px; background: var(--hp-accent); }
.public-site .public-service-subtitle { margin: 20px 0 0; font-size: var(--hp-sub-heading-size); font-weight: 600; }
.public-site .public-service-hero .public-service-copy { color: var(--hp-text); }
.public-site .public-service-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; align-items: start; }
.public-site .public-service-listing,
.public-site .public-service-connection { background: var(--hp-light-background); }
.public-site .public-service-feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; align-items: center; }
.public-site .public-service-feature-copy .public-service-copy { margin-top: 32px; }
.public-site .public-service-feature--reverse .public-service-feature-copy { grid-column: 2; grid-row: 1; }
.public-site .public-service-feature--reverse .public-service-visual { grid-column: 1; grid-row: 1; }
.public-site .public-service-visual { margin: 0; width: 100%; max-width: 300px; justify-self: center; }
.public-site .public-service-screen,
.public-site .public-service-visual img { width: 100%; aspect-ratio: 9 / 16; border: 1px solid var(--hp-border); border-radius: var(--hp-radius-large); background: var(--hp-white); object-fit: contain; }
.public-site .public-service-screen { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 16px; color: var(--hp-text-secondary); font-size: 13px; }
.public-site .public-service-search .public-service-screen { background: var(--hp-light-background); }
.public-site .public-service-screen-label { color: var(--hp-primary); font-size: 12px; letter-spacing: .08em; }
.public-site .public-service-screen-ratio { color: var(--hp-text-secondary); font-size: 32px; }
.public-site .public-service-visual figcaption { margin-top: 16px; font-size: var(--hp-caption-size); color: var(--hp-text-secondary); text-align: center; }
.public-site .public-service-connection-line { display: flex; align-items: center; gap: 24px; margin-top: 40px; padding-block: 24px; border-block: 1px solid var(--hp-border); color: var(--hp-primary); font-weight: 600; }
.public-site .public-service-connection-arrow { flex: 1; text-align: center; color: var(--hp-gray); }
.public-site .public-service-support-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; }
.public-site .public-service-support-item { padding-top: 32px; border-top: 1px solid var(--hp-border); }
.public-site .public-service-support-item .public-service-copy { margin-top: 24px; font-size: var(--hp-body-size); }
.public-site .public-service-join { background: var(--hp-primary); color: var(--hp-white); }
.public-site .public-service-join .public-service-label,
.public-site .public-service-join .public-service-heading { color: var(--hp-white); }
.public-site .public-service-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin: 48px 0; padding: 0; list-style: none; }
.public-site .public-service-step { min-width: 0; border-top: 1px solid rgb(255 255 255 / 35%); padding-top: 24px; }
.public-site .public-service-step-number { font-size: var(--hp-caption-size); color: var(--hp-border); font-weight: 600; }
.public-site .public-service-step h3 { font-size: var(--hp-sub-heading-size); font-weight: 600; line-height: 1.5; margin: 16px 0; overflow-wrap: anywhere; }
.public-site .public-service-step p { margin: 0; color: var(--hp-border); }
.public-site .public-service-join-bottom { border-top: 1px solid rgb(255 255 255 / 35%); padding-top: 40px; display: flex; justify-content: space-between; align-items: center; gap: 32px; }
.public-site .public-service-pricing { display: flex; align-items: baseline; flex-wrap: wrap; gap: 16px 40px; }
.public-site .public-service-pricing p { margin: 0; }
.public-site .public-service-monthly { font-size: var(--hp-body-large-size); }
.public-site .public-service-monthly strong { font-size: var(--hp-section-heading-size); font-family: var(--hp-font-en); }
.public-site .public-service-join .public-site-button { min-width: 220px; }
.public-site .public-service-join .public-site-button:hover { border-color: var(--hp-white); }
.public-site .public-service-join a:focus-visible { outline-color: var(--hp-white); }

/* Decorative progress indicators: preserve the number's inline baseline. */
.public-site .public-service-step-arrow { display: none; }
@media (min-width: 1200px) {
  .public-site .public-service-step-number { display: inline-flex; align-items: center; width: 100%; }
  .public-site .public-service-step-arrow { display: flex; align-items: center; flex: 1; min-width: 0; margin-left: 12px; height: 8px; }
  .public-site .public-service-step-arrow::before {
    content: "";
    flex: 1;
    height: 2px;
    /* Reserve 3.5px for the scaled triangle and 3px of visible clearance. */
    margin-right: 6.5px;
    background: radial-gradient(circle at 5px 1px, #fff 1px, transparent 1px) right center / 6px 2px repeat-x;
  }
  .public-site .public-service-step-arrow::after {
    content: "";
    flex: 0 0 7px;
    width: 7px;
    height: 8px;
    background: #fff;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    transform-origin: right center;
    transform: scale(1.5);
  }
}

/* Center image / text bounds while retaining text widths and each orientation's spacing. */
@media (min-width: 1200px) {
  .public-site .public-service-feature {
    width: calc(100% - var(--hp-gutter) * 2 - 32px);
    max-width: calc(var(--hp-container-width) - 32px);
    --service-text-width: calc((100% - 32px) / 2);
    grid-template-columns: var(--service-text-width) 300px;
    column-gap: 32px;
    justify-content: center;
  }
  .public-site .public-service-feature--reverse {
    grid-template-columns: 300px var(--service-text-width);
    column-gap: calc((100% - 32px) / 2 - 300px + 32px);
    /* Optical adjustment: move the image / text group together without resizing it. */
    transform: translateX(64px);
  }
  .public-site .public-service-feature .public-service-visual { justify-self: start; }
  .public-site .public-service-feature--reverse .public-service-visual { justify-self: start; }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .public-site .public-service-hero-inner,
  .public-site .public-service-columns,
  .public-site .public-service-support-grid { gap: 32px; }
  .public-site .public-service-feature { gap: 40px; }
  .public-site .public-service-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .public-site .public-service-copy br { display: none; }
}

@media (max-width: 767px) {
  .public-site .public-service-hero-inner,
  .public-site .public-service-columns,
  .public-site .public-service-support-grid,
  .public-site .public-service-feature { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .public-site .public-service-hero-inner { padding-bottom: 32px; }
  .public-site .public-service-copy { font-size: var(--hp-body-size); }
  .public-site .public-service-copy br { display: none; }
  .public-site .public-service-feature--reverse .public-service-feature-copy,
  .public-site .public-service-feature--reverse .public-service-visual { grid-column: auto; grid-row: auto; }
  .public-site .public-service-feature-copy .public-service-copy { margin-top: 24px; }
  .public-site .public-service-visual { max-width: 280px; }
  .public-site .public-service-steps { grid-template-columns: minmax(0, 1fr); gap: 28px; margin-block: 32px; }
  .public-site .public-service-step p br { display: none; }
  .public-site .public-service-join-bottom { flex-direction: column; align-items: stretch; padding-top: 32px; }
  .public-site .public-service-pricing { flex-direction: column; gap: 12px; }
  .public-site .public-service-join .public-site-button { min-width: 0; width: 100%; }
}

/* Cross-page responsive safeguards. Do not mask overflow on body. */
.public-site .public-site-container > *,
.public-site .public-site-header-inner > *,
.public-site .public-site-hero-layout > *,
.public-site .public-site-about-layout > *,
.public-site .public-site-section-intro > *,
.public-site .public-site-cta-layout > *,
.public-site .public-service-hero-inner > *,
.public-site .public-service-columns > *,
.public-site .public-service-feature > *,
.public-site .public-service-join-bottom > * {
  min-width: 0;
}

.public-site .public-site-header .public-site-brand,
.public-site .public-site-mobile-menu {
  flex-shrink: 0;
}

.public-site .public-site-button {
  text-align: center;
  flex-shrink: 0;
}

.public-site .public-site-nav > a,
.public-site .public-site-legal a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.public-site .public-site-nav > .public-site-button {
  min-height: var(--hp-button-height);
}

.public-site .public-service-label {
  overflow-wrap: anywhere;
}

.public-site .public-about-company-row a[href^="tel:"] {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.public-site .public-service-copy {
  max-width: 38em;
}

.public-site .public-service-pricing p {
  white-space: nowrap;
}

@media (min-width: 768px) and (max-width: 1199px) {
  .public-site .public-site-footer .public-site-nav {
    justify-content: flex-end;
    gap: 8px 20px;
  }

  .public-site .public-site-service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  .public-site .public-site-service-item:last-child {
    grid-column: 1 / -1;
  }

  .public-site .public-site-about-copy br {
    display: none;
  }
}

@media (max-width: 767px) {
  .public-site .public-site-top-hero {
    padding-top: var(--hp-section-space);
  }

  .public-site .public-site-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .public-site .public-site-actions .public-site-store-links {
    justify-content: center;
  }

  .public-site .public-site-hero-copy h1,
  .public-site .public-site-top .public-site-section-heading {
    overflow-wrap: anywhere;
  }

  .public-site .public-site-cta-actions {
    gap: 20px;
  }

  .public-site .public-site-menu-panel {
    overscroll-behavior-y: contain;
  }

  .public-site .public-service-visual {
    width: 88%;
  }

  .public-site .public-service-connection-line {
    gap: 16px;
  }
}

/* Supplied assets: retain intrinsic ratios and never crop screenshots. */
.public-site .public-site-app-slide img,
.public-site .public-service-visual img {
  display: block;
  height: auto;
  max-width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: contain;
}

.public-site .public-site-store-badge {
  display: block;
  width: auto;
  height: 40px;
  max-width: 100%;
  object-fit: contain;
}

/* Google artwork includes its own clear space; preserve the entire asset. */
.public-site .public-site-store-badge--google {
  height: 52px;
}

.public-site .public-site-store-link {
  flex-shrink: 0;
}

@media (max-width: 767px) {
  .public-site .public-site-store-badge { height: 36px; }
  .public-site .public-site-store-badge--google { height: 47px; }
}

/* ABOUT story, operator introduction and vision. */
.public-site .public-about-content-heading { margin: 0 0 32px; font-size: var(--hp-section-heading-size); font-weight: 700; line-height: 1.5; overflow-wrap: anywhere; }
.public-site .public-about-us-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "image heading" "image copy"; column-gap: 64px; row-gap: 24px; }
.public-site .public-about-us-grid > * { min-width: 0; }
.public-site .public-about-us-heading { grid-area: heading; }
.public-site .public-about-us-label { margin: 0 0 24px; font-size: var(--hp-caption-size); font-weight: 600; letter-spacing: .1em; }
.public-site .public-about-us-heading h2 { margin: 0; }
.public-site .public-about-us-image { grid-area: image; margin: 0; align-self: center; }
.public-site .public-about-us-image img { display: block; width: 100%; height: auto; max-width: 100%; }
.public-site .public-about-us-copy { grid-area: copy; font-size: var(--hp-body-large-size); overflow-wrap: anywhere; }
.public-site .public-about-us-copy p { margin: 0; }
.public-site .public-about-us-copy > p + p { margin-top: 24px; }
.public-site .public-about-representative { margin-top: 32px; font-size: var(--hp-caption-size); color: var(--hp-text-secondary); }
.public-site .public-about-representative .public-about-representative-name { margin-top: 8px; font-size: var(--hp-sub-heading-size); font-weight: 600; color: var(--hp-primary); }
.public-site .public-about-vision-copy { max-width: 42em; margin-inline: auto; }
.public-site .public-about-vision-english { margin: 40px 0 0; font-size: var(--hp-body-size); }
.public-site .public-about-vision-slogan { margin: 24px 0 0; font-size: var(--hp-sub-heading-size); font-weight: 600; }
@media (min-width: 768px) and (max-width: 1199px) {
  .public-site .public-about-us-grid { column-gap: 32px; }
  .public-site .public-about-content-heading { font-size: 30px; }
}
@media (max-width: 767px) {
  .public-site .public-about-us-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "heading" "image" "copy"; gap: 32px; }
  .public-site .public-about-us-copy { font-size: var(--hp-body-size); }
  .public-site .public-about-vision-copy { text-align: left; }
}

/* ABOUT copy rhythm and desktop-only editorial line breaks. */
.public-site .public-about-story-copy > p { font-size: var(--hp-body-size); line-height: 1.9; }
.public-site .public-about-desktop-break { display: none; }
.public-site .public-about-vision-main { font-size: var(--hp-body-large-size); font-weight: 600; line-height: 1.8; }
@media (max-width: 767px) {
  .public-site .public-about-vision-main { font-size: var(--hp-body-size); }
}
.public-site .public-about-vision-slogan { font-size: var(--hp-section-heading-size); font-weight: var(--hp-heading-weight); line-height: 1.5; }
@media (min-width: 1200px) {
  .public-site .public-about-desktop-break { display: inline; }
  .public-site .public-about-vision-copy { max-width: 50em; }
  .public-site .public-about-vision-slogan { white-space: nowrap; }
}

/* ABOUT / COMPANY: center the information block without the former label column. */
.public-site .public-about-company-container { max-width: calc((var(--hp-container-width) - 64px) * 2 / 3); }
.public-site .public-about-company a[href^="tel:"] { white-space: nowrap; }
@media (min-width: 1200px) {
  .public-site #about-hero-heading { white-space: nowrap; }
  .public-site .public-about-company-row { grid-template-columns: 9em minmax(0, 1fr); }
  .public-site .public-about-company-row dt { white-space: nowrap; }
  .public-site .public-about-us-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 648px); }
}

/* ABOUT US: image-only Instagram link beside the shop heading. */
.public-site .public-about-us-title-row { display: flex; align-items: center; gap: 16px; }
.public-site .public-about-us-title-row h2 { min-width: 0; }
.public-site .public-about-instagram { display: block; flex: 0 0 36px; width: 36px; }
.public-site .public-about-instagram img { display: block; width: 100%; height: auto; }
.public-site .public-about-instagram:hover { opacity: .8; }
@media (max-width: 1199px) {
  .public-site .public-about-us-title-row { gap: 12px; }
  .public-site .public-about-instagram { flex-basis: 30px; width: 30px; }
}