html {
    box-sizing: border-box;
    text-size-adjust: 100%;
  }

  body,
  h1,
  h2,
  h3,
  p,
  ul,
  ol,
  dl,
  dd,
  figure,
  blockquote {
    margin: 0;
  }

  ul,
  ol {
    padding: 0;
  }

  button,
  input,
  textarea,
  select {
    box-sizing: border-box;
    font: inherit;
  }

  img,
  svg {
    display: block;
    max-inline-size: 100%;
  }

  :root {
    color-scheme: light;
    --color-primary: #176f9f;
    --color-primary-deep: #11547a;
    --color-accent: #087daf;
    --color-accent-hover: #075f87;
    --color-base: #eff8fc;
    --color-surface: #ffffff;
    --color-text: #163449;
    --color-secondary: #526b7a;
    --color-border: #cfe2ec;
    --color-ui-border: #6b8798;
    --color-focus: #005fcc;
    --color-error: #9c2f25;
    --font-heading: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
    --font-body: "BIZ UDPGothic", "Hiragino Sans", "Yu Gothic", sans-serif;
    --font-mono: "IBM Plex Mono", "SFMono-Regular", "Roboto Mono", monospace;
    --space-1: 0.5rem;
    --space-2: 0.75rem;
    --space-3: 1rem;
    --space-4: 1.5rem;
    --space-5: 2rem;
    --space-6: 3rem;
    --space-7: 4rem;
    --space-8: 5rem;
    --space-9: 6rem;
    --radius-small: 0.375rem;
    --radius-media: 0.5rem;
    --shadow-raised: 0 0.75rem 2.5rem rgb(22 52 73 / 0.09);
    --container: 70rem;
    --container-wide: 80rem;
    --prose: 52rem;
    --gutter: 3rem;
  }

  html {
    scroll-behavior: smooth;
  }

  body {
    min-inline-size: 20rem;
    background: var(--color-surface);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.8;
    overflow-wrap: break-word;
  }

  main:focus {
    outline: none;
  }

  h1,
  h2,
  h3 {
    color: var(--color-text);
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.35;
    text-wrap: balance;
  }

  @supports (word-break: auto-phrase) {
    h1,
    h2,
    h3 {
      word-break: auto-phrase;
    }
  }

  .heading-phrase {
    white-space: nowrap;
  }

  h1 {
    font-size: clamp(2.5rem, 5vw, 3.625rem);
    font-weight: 900;
    letter-spacing: -0.035em;
  }

  h2 {
    font-size: clamp(1.875rem, 3.2vw, 2.375rem);
    letter-spacing: -0.025em;
  }

  h3 {
    font-size: clamp(1.375rem, 2vw, 1.5rem);
    letter-spacing: -0.015em;
  }

  p {
    text-wrap: pretty;
  }

  a {
    color: inherit;
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.2em;
  }

  a:hover {
    text-decoration-thickness: 0.14em;
  }

  :focus-visible {
    outline: 0.1875rem solid var(--color-focus);
    outline-offset: 0.25rem;
  }

  .contact-band :focus-visible,
  .site-footer :focus-visible {
    outline-color: var(--color-surface);
  }

  ::selection {
    background: var(--color-primary);
    color: var(--color-surface);
  }

  [hidden] {
    display: none !important;
  }

  .skip-link {
    position: fixed;
    inset-block-start: 0.75rem;
    inset-inline-start: 0.75rem;
    z-index: 100;
    transform: translateY(-180%);
    background: var(--color-surface);
    border: 0.125rem solid var(--color-primary);
    border-radius: var(--radius-small);
    color: var(--color-primary-deep);
    font-weight: 700;
    padding: 0.75rem 1rem;
  }

  .skip-link:focus {
    transform: translateY(0);
  }

  .container,
  .container-wide,
  .prose-container {
    box-sizing: border-box;
    inline-size: min(100% - (var(--gutter) * 2), var(--container));
    margin-inline: auto;
  }

  .container-wide {
    max-inline-size: var(--container-wide);
  }

  .prose-container {
    max-inline-size: var(--prose);
  }

  .site-header {
    background: var(--color-surface);
    border-block-end: 0.0625rem solid var(--color-border);
  }

  .header-inner {
    min-block-size: 6rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
  }

.brand {
  min-inline-size: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.875rem;
  color: var(--color-text);
  letter-spacing: normal;
  text-decoration: none;
}

  .brand:hover {
    text-decoration: none;
  }

  .brand-mark {
    position: relative;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    flex: 0 0 auto;
    border: 0.125rem solid var(--color-primary);
  }

  .brand-mark::before,
  .brand-mark::after {
    content: "";
    position: absolute;
    background: var(--color-primary);
  }

  .brand-mark::before {
    inset-block-start: 0.75rem;
    inset-inline-start: 0.625rem;
    inline-size: 1.25rem;
    block-size: 0.125rem;
    box-shadow: 0 0.75rem 0 var(--color-primary);
  }

  .brand-mark::after {
    inset-block-start: 0.75rem;
    inset-inline-start: 1.75rem;
    inline-size: 0.125rem;
    block-size: 0.875rem;
  }

  .brand-copy {
    display: grid;
    gap: 0.125rem;
  }

  .brand-name {
    font-family: var(--font-heading);
    font-size: 1.125rem;
    font-weight: 900;
    line-height: 1.35;
    white-space: nowrap;
  }

  .brand-en {
    color: var(--color-secondary);
    font-family: var(--font-mono);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.4;
  }

  .desktop-nav ul {
    display: flex;
    align-items: center;
    gap: 1.75rem;
    list-style: none;
  }

  .desktop-nav a {
    min-block-size: 3rem;
    display: inline-flex;
    align-items: center;
    border-block-end: 0.1875rem solid transparent;
    font-weight: 700;
    text-decoration: none;
  }

  .desktop-nav a:hover,
  .desktop-nav a[aria-current="page"] {
    border-block-end-color: var(--color-primary);
    color: var(--color-primary-deep);
  }

  .desktop-nav .nav-contact {
    min-block-size: 3.5rem;
    border: 0.125rem solid var(--color-accent);
    border-radius: var(--radius-small);
    background: var(--color-accent);
    color: var(--color-surface);
    padding-inline: 1.25rem;
  }

  .desktop-nav .nav-contact:hover,
  .desktop-nav .nav-contact[aria-current="page"] {
    background: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
    color: var(--color-surface);
  }

  .mobile-nav {
    display: none;
  }

  .mobile-nav summary {
    min-block-size: 3rem;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    box-sizing: border-box;
    border: 0.0625rem solid var(--color-ui-border);
    border-radius: var(--radius-small);
    cursor: pointer;
    font-weight: 700;
    list-style: none;
    padding: 0.5rem 0.875rem;
  }

  .mobile-nav summary::-webkit-details-marker {
    display: none;
  }

  .menu-icon {
    inline-size: 1.25rem;
    display: grid;
    gap: 0.25rem;
  }

  .menu-icon span {
    block-size: 0.125rem;
    background: currentColor;
  }

  .mobile-nav-panel {
    position: absolute;
    inset-inline: var(--gutter);
    z-index: 20;
    margin-block-start: 0.75rem;
    background: var(--color-surface);
    border: 0.0625rem solid var(--color-ui-border);
    box-shadow: var(--shadow-raised);
    padding: 0.75rem;
  }

  .mobile-nav-panel ul {
    list-style: none;
  }

  .mobile-nav-panel a {
    min-block-size: 3.5rem;
    display: flex;
    align-items: center;
    border-block-end: 0.0625rem solid var(--color-border);
    font-weight: 700;
    padding-inline: 0.75rem;
    text-decoration: none;
  }

  .mobile-nav-panel li:last-child a {
    border-block-end: 0;
    color: var(--color-accent);
  }

  .eyebrow {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--color-primary-deep);
    font-family: var(--font-mono);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1.5;
    text-transform: uppercase;
  }

  .eyebrow::before {
    content: "";
    inline-size: 1.75rem;
    block-size: 0.125rem;
    background: var(--color-primary);
  }

  .section-heading {
    display: grid;
    gap: 1rem;
    max-inline-size: 52rem;
    margin-block-end: 3rem;
  }

  .section-heading p:last-child {
    color: var(--color-secondary);
    font-size: 1.125rem;
  }

  .button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
  }

  .button {
    min-block-size: 3.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    box-sizing: border-box;
    border: 0.125rem solid transparent;
    border-radius: var(--radius-small);
    font-weight: 700;
    line-height: 1.4;
    padding: 0.875rem 1.5rem;
    text-align: center;
    text-decoration: none;
  }

  .button::after {
    content: "→";
    font-family: var(--font-mono);
    transition: transform 180ms ease;
  }

  .button:hover {
    text-decoration: none;
  }

  .button:hover::after {
    transform: translateX(0.25rem);
  }

  .button-primary {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-surface);
  }

  .button-primary:hover {
    background: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
  }

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

  .button-secondary:hover {
    background: var(--color-base);
  }

  .button-compact {
    min-block-size: 3rem;
    justify-self: start;
    padding: 0.625rem 1rem;
  }

  .site-media {
    --media-ratio: 4 / 3;
    box-sizing: border-box;
    min-inline-size: 0;
    overflow: hidden;
    border: 0.0625rem solid var(--color-ui-border);
    border-radius: var(--radius-media);
    background: var(--color-base);
  }

  .site-media img {
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: var(--media-ratio);
    object-fit: cover;
  }

  .breadcrumb {
    background: var(--color-base);
    border-block-end: 0.0625rem solid var(--color-border);
  }

  .breadcrumb ol {
    min-block-size: 3.5rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    list-style: none;
  }

  .breadcrumb li {
    color: var(--color-secondary);
    font-size: 1rem;
  }

  .breadcrumb li:not(:last-child)::after {
    content: "/";
    margin-inline-start: 0.5rem;
  }

  .breadcrumb a {
    min-block-size: 2.75rem;
    display: inline-flex;
    align-items: center;
    color: var(--color-primary-deep);
  }

  .page-hero {
    padding-block: 5rem;
    border-block-end: 0.0625rem solid var(--color-border);
  }

  .page-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: end;
  }

  .page-hero-copy {
    display: grid;
    gap: 1.5rem;
  }

  .page-hero h1 {
    max-inline-size: none;
    font-size: clamp(2.25rem, 4vw, 3rem);
  }

  .page-hero-copy > p:last-child {
    max-inline-size: 44rem;
    color: var(--color-secondary);
    font-size: 1.125rem;
  }

  .section {
    padding-block: var(--space-9);
  }

  .section-base {
    background: var(--color-base);
  }

  .route-list {
    list-style: none;
  }

  .route-step {
    position: relative;
    min-inline-size: 0;
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr);
    gap: 1.5rem;
    padding-block: 0 2.25rem;
    padding-inline-start: 2rem;
  }

  .route-step:last-child {
    padding-block-end: 0;
  }

  .route-step::before {
    content: "";
    position: absolute;
    inset-block-start: 0.5rem;
    inset-inline-start: -0.1875rem;
    inline-size: 0.75rem;
    block-size: 0.75rem;
    box-sizing: border-box;
    background: var(--color-surface);
    border: 0.1875rem solid var(--color-primary);
  }

  .route-step:not(:last-child)::after {
    content: "";
    position: absolute;
    inset-block-start: 1.25rem;
    inset-block-end: 0;
    inset-inline-start: 0.125rem;
    inline-size: 0.125rem;
    background: var(--color-primary);
    transform-origin: top;
  }

  .route-number {
    color: var(--color-primary-deep);
    font-family: var(--font-mono);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.7;
  }

  .route-copy {
    display: grid;
    gap: 0.5rem;
  }

  .route-copy p {
    color: var(--color-secondary);
  }

  .site-footer {
    background: var(--color-text);
    color: var(--color-surface);
    padding-block: 4rem 2rem;
  }

  .footer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    gap: 4rem;
  }

  .footer-brand {
    display: grid;
    gap: 1rem;
    max-inline-size: 35rem;
  }

  .footer-brand strong {
    font-family: var(--font-heading);
    font-size: 1.375rem;
  }

  .footer-brand p {
    color: #cfe2ec;
  }

  .footer-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem 2rem;
    list-style: none;
  }

  .footer-nav a {
    min-block-size: 3rem;
    display: inline-flex;
    align-items: center;
    color: var(--color-surface);
  }

  .footer-bottom {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    border-block-start: 0.0625rem solid #526b7a;
    margin-block-start: 3rem;
    padding-block-start: 1.5rem;
  }

  .footer-bottom p {
    color: #cfe2ec;
    font-size: 1rem;
  }

  .footer-bottom small {
    font-size: 1em;
  }

  .sample-disclaimer {
    background: #f7fbfd;
    border-block: 0.0625rem solid var(--color-ui-border);
    padding-block: 2rem;
  }

  .sample-disclaimer-inner {
    display: grid;
    grid-template-columns: minmax(12rem, 3fr) minmax(0, 9fr);
    align-items: start;
    gap: 2rem;
  }

  .sample-disclaimer-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--color-primary-deep);
    font-family: var(--font-mono);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.6;
  }

  .sample-disclaimer-label::before {
    content: "";
    inline-size: 0.75rem;
    block-size: 0.75rem;
    flex: 0 0 auto;
    box-sizing: border-box;
    border: 0.1875rem solid var(--color-primary);
  }

  .sample-disclaimer-copy {
    border-inline-start: 0.0625rem dashed var(--color-ui-border);
    padding-inline-start: 2rem;
  }

  .sample-disclaimer-copy strong {
    display: block;
    font-family: var(--font-heading);
    font-size: 1.125rem;
    line-height: 1.6;
  }

  .sample-disclaimer-copy p {
    color: var(--color-secondary);
    margin-block-start: 0.5rem;
  }

  .demo-label {
    display: inline-flex;
    align-items: center;
    min-block-size: 2rem;
    border: 0.0625rem solid currentColor;
    color: var(--color-primary-deep);
    font-weight: 700;
    line-height: 1.4;
    padding: 0.25rem 0.625rem;
  }

  .note-box {
    border: 0.0625rem solid var(--color-border);
    border-block-start: 0.1875rem solid var(--color-primary);
    border-radius: var(--radius-small);
    background: var(--color-surface);
    color: var(--color-secondary);
    padding: 1.5rem 1.75rem;
  }

  .note-box strong {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--color-text);
    font-family: var(--font-heading);
    font-size: 1.125rem;
    line-height: 1.5;
    margin-block-end: 0.625rem;
  }

  .note-box strong::before {
    content: "";
    inline-size: 0.625rem;
    block-size: 0.625rem;
    flex: 0 0 auto;
    box-sizing: border-box;
    border: 0.125rem solid var(--color-primary);
  }

  .note-box p {
    color: var(--color-secondary);
  }

  .home-hero {
    padding-block: 5rem 6rem;
    border-block-end: 0.0625rem solid var(--color-border);
  }

  .home-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(18rem, 5fr);
    align-items: center;
    gap: 4rem;
  }

  .home-hero-copy {
    min-inline-size: 0;
    display: grid;
    gap: 1.75rem;
  }

  .home-hero h1 {
    max-inline-size: none;
    font-size: clamp(2rem, 4.5vw, 3.5rem);
    letter-spacing: -0.06em;
  }

  .hero-heading-line {
    display: block;
  }

  .hero-lead {
    max-inline-size: 40rem;
    color: var(--color-secondary);
    font-size: 1.125rem;
    line-height: 1.9;
  }

  .hero-assurance {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    border-block-start: 0.0625rem solid var(--color-border);
    padding-block-start: 1.25rem;
    list-style: none;
  }

  .hero-assurance li {
    position: relative;
    padding-inline-start: 1.25rem;
    font-weight: 700;
  }

  .hero-assurance li::before {
    content: "";
    position: absolute;
    inset-block-start: 0.72rem;
    inset-inline-start: 0;
    inline-size: 0.5rem;
    block-size: 0.5rem;
    background: var(--color-primary);
  }

  .home-hero .site-media {
    --media-ratio: 4 / 5;
  }

  .overview-grid {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(18rem, 5fr);
    align-items: start;
    gap: 4rem;
  }

  .overview-copy {
    display: grid;
    gap: 1.5rem;
  }

  .overview-copy p {
    color: var(--color-secondary);
  }

  .overview-facts {
    display: grid;
    gap: 0;
    border-block-start: 0.125rem solid var(--color-primary);
  }

  .overview-side {
    min-inline-size: 0;
    display: grid;
    gap: 1.5rem;
  }

  .overview-facts div {
    display: grid;
    grid-template-columns: 6.5rem minmax(0, 1fr);
    gap: 1rem;
    border-block-end: 0.0625rem solid var(--color-ui-border);
    padding-block: 1rem;
  }

  .overview-facts dt {
    color: var(--color-secondary);
    font-weight: 700;
  }

  .overview-facts dd {
    font-weight: 700;
  }

  .service-list {
    border-block-start: 0.125rem solid var(--color-text);
  }

  .service-row {
    display: grid;
    grid-template-columns: minmax(12rem, 3fr) minmax(0, 5fr) minmax(12rem, 2.4fr);
    align-items: start;
    gap: 2rem;
    border-block-end: 0.0625rem solid var(--color-ui-border);
    padding-block: 2.25rem;
  }

  .service-row-title {
    display: grid;
    gap: 0.75rem;
  }

  .service-code {
    color: var(--color-primary-deep);
    font-family: var(--font-mono);
    font-size: 1rem;
    font-weight: 600;
  }

  .service-row-copy {
    display: grid;
    gap: 1rem;
  }

  .service-row-copy p {
    color: var(--color-secondary);
  }

  .service-deliverables {
    list-style: none;
  }

  .service-deliverables li {
    position: relative;
    padding-inline-start: 1.25rem;
  }

  .service-deliverables li::before {
    content: "—";
    position: absolute;
    inset-inline-start: 0;
    color: var(--color-primary);
  }

  .service-meta {
    display: grid;
    gap: 0.875rem;
    border-inline-start: 0.0625rem solid var(--color-border);
    padding-inline-start: 1.5rem;
  }

  .price {
    font-family: var(--font-mono);
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-weight: 600;
    line-height: 1.35;
  }

  .price small {
    display: block;
    color: var(--color-secondary);
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 400;
  }

  .features-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 4rem;
  }

  .feature-copy {
    display: grid;
    gap: 2rem;
  }

  .feature-item {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr);
    gap: 1rem;
    border-block-start: 0.0625rem solid var(--color-ui-border);
    padding-block-start: 1.5rem;
  }

  .feature-item > span {
    color: var(--color-primary-deep);
    font-family: var(--font-mono);
    font-weight: 600;
  }

  .feature-item div {
    display: grid;
    gap: 0.5rem;
  }

  .feature-item p {
    color: var(--color-secondary);
  }

  .non-scope {
    border: 0.0625rem solid var(--color-ui-border);
    padding: 1.5rem;
  }

  .non-scope strong {
    display: block;
    margin-block-end: 0.75rem;
    font-family: var(--font-heading);
    font-size: 1.125rem;
  }

  .process-grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 4rem;
  }

  .process-intro {
    display: grid;
    align-content: start;
    gap: 1.5rem;
  }

  .process-intro p {
    color: var(--color-secondary);
  }

  .company-home-grid {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(17rem, 5fr);
    align-items: start;
    gap: 4rem;
  }

  .company-summary {
    display: grid;
    gap: 2rem;
  }

  .company-table {
    border-block-start: 0.125rem solid var(--color-text);
  }

  .company-table-row {
    display: grid;
    grid-template-columns: 9rem minmax(0, 1fr);
    gap: 1.5rem;
    border-block-end: 0.0625rem solid var(--color-ui-border);
    padding-block: 1.25rem;
  }

  .company-table-row dt {
    color: var(--color-secondary);
    font-weight: 700;
  }

  .news-list {
    border-block-start: 0.125rem solid var(--color-text);
    list-style: none;
  }

  .news-list a {
    min-block-size: 5.5rem;
    display: grid;
    grid-template-columns: 9rem 8rem minmax(0, 1fr) 2rem;
    align-items: center;
    gap: 1.5rem;
    border-block-end: 0.0625rem solid var(--color-ui-border);
    padding-block: 1rem;
    text-decoration: none;
  }

  .news-list a:hover {
    background: var(--color-base);
  }

  .news-date {
    font-family: var(--font-mono);
    font-size: 1rem;
    font-weight: 500;
  }

  .news-category {
    border: 0.0625rem solid var(--color-primary);
    color: var(--color-primary-deep);
    font-weight: 700;
    padding: 0.25rem 0.625rem;
    text-align: center;
  }

  .news-title {
    font-family: var(--font-heading);
    font-size: 1.125rem;
    font-weight: 700;
  }

  .news-arrow {
    color: var(--color-primary-deep);
    font-family: var(--font-mono);
    font-size: 1.25rem;
  }

  .contact-band {
    background: var(--color-primary);
    color: var(--color-surface);
  }

  .contact-band-grid {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(18rem, 5fr);
    align-items: center;
    gap: 4rem;
  }

  .contact-band-copy {
    display: grid;
    gap: 1.25rem;
  }

  .contact-band h2,
  .contact-band p {
    color: var(--color-surface);
  }

  .contact-band .eyebrow {
    color: var(--color-surface);
  }

  .contact-band .eyebrow::before {
    background: var(--color-surface);
  }

  .contact-band .button-secondary {
    border-color: var(--color-surface);
    color: var(--color-surface);
  }

  .contact-band .button-secondary:hover {
    background: var(--color-surface);
    color: var(--color-primary-deep);
  }

  .contact-band-note {
    border: 0.0625rem solid #a9d6e8;
    padding: 1.5rem;
  }

  .contact-band-note strong {
    display: block;
    font-family: var(--font-heading);
    font-size: 1.125rem;
    margin-block-end: 0.5rem;
  }

  .service-intro-grid,
  .contact-intro-grid,
  .company-intro-grid {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(18rem, 5fr);
    align-items: start;
    gap: 4rem;
  }

  .lead-copy {
    display: grid;
    gap: 1.5rem;
  }

  .lead-copy > p {
    color: var(--color-secondary);
    font-size: 1.125rem;
  }

  .package-list {
    border-block-start: 0.125rem solid var(--color-text);
  }

  .package {
    display: grid;
    grid-template-columns: minmax(18rem, 4fr) minmax(0, 8fr);
    gap: 4rem;
    border-block-end: 0.0625rem solid var(--color-ui-border);
    padding-block: 4rem;
  }

  .package-visual {
    display: grid;
    align-content: start;
    gap: 1.5rem;
  }

  .overview-side .site-media,
  .process-intro .site-media,
  .package-visual .site-media {
    --media-ratio: 3 / 2;
  }

  .package-body {
    display: grid;
    gap: 1.75rem;
  }

  .package-heading {
    display: grid;
    gap: 0.75rem;
  }

  .package-body > p {
    color: var(--color-secondary);
  }

  .package-specs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    border-block-start: 0.0625rem solid var(--color-ui-border);
    border-inline-start: 0.0625rem solid var(--color-ui-border);
  }

  .package-specs > div {
    min-inline-size: 0;
    border-block-end: 0.0625rem solid var(--color-ui-border);
    border-inline-end: 0.0625rem solid var(--color-ui-border);
    padding: 1.25rem;
  }

  .package-specs dt {
    color: var(--color-secondary);
    font-weight: 700;
    margin-block-end: 0.375rem;
  }

  .package-specs dd {
    font-weight: 700;
  }

  .deliverable-block h3 {
    margin-block-end: 0.75rem;
  }

  .check-list {
    display: grid;
    gap: 0.5rem;
    list-style: none;
  }

  .check-list li {
    position: relative;
    padding-inline-start: 1.75rem;
  }

  .check-list li::before {
    content: "";
    position: absolute;
    inset-block-start: 0.65rem;
    inset-inline-start: 0;
    inline-size: 0.75rem;
    block-size: 0.75rem;
    border: 0.125rem solid var(--color-primary);
  }

  .comparison-wrap {
    overflow-x: auto;
    border: 0.0625rem solid var(--color-ui-border);
  }

  .comparison-table {
    inline-size: 100%;
    min-inline-size: 48rem;
    border-collapse: collapse;
  }

  .comparison-table th,
  .comparison-table td {
    border-block-end: 0.0625rem solid var(--color-ui-border);
    border-inline-end: 0.0625rem solid var(--color-ui-border);
    padding: 1.125rem;
    text-align: start;
    vertical-align: top;
  }

  .comparison-table th {
    background: var(--color-base);
    font-family: var(--font-heading);
    font-size: 1.0625rem;
  }

  .comparison-table tr:last-child th,
  .comparison-table tr:last-child td {
    border-block-end: 0;
  }

  .faq-list {
    border-block-start: 0.125rem solid var(--color-text);
  }

  .faq-list details {
    border-block-end: 0.0625rem solid var(--color-ui-border);
  }

  .faq-list summary {
    min-block-size: 5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    cursor: pointer;
    font-family: var(--font-heading);
    font-size: 1.125rem;
    font-weight: 700;
    list-style: none;
    padding-block: 1rem;
  }

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

  .faq-list summary::after {
    content: "+";
    flex: 0 0 auto;
    color: var(--color-primary-deep);
    font-family: var(--font-mono);
    font-size: 1.5rem;
  }

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

  .faq-answer {
    max-inline-size: none;
    color: var(--color-secondary);
    padding-block: 0.5rem 1.5rem;
    padding-inline-end: clamp(0rem, 5vw, 4rem);
  }

  .faq-answer p {
    text-wrap: pretty;
  }

  .company-principles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-block-start: 0.125rem solid var(--color-text);
    border-inline-start: 0.0625rem solid var(--color-ui-border);
  }

  .company-principle {
    min-inline-size: 0;
    border-inline-end: 0.0625rem solid var(--color-ui-border);
    border-block-end: 0.0625rem solid var(--color-ui-border);
    padding: 2rem;
  }

  .company-principle span {
    display: block;
    color: var(--color-primary-deep);
    font-family: var(--font-mono);
    font-weight: 600;
    margin-block-end: 1rem;
  }

  .company-principle h3 {
    margin-block-end: 0.75rem;
  }

  .company-principle p {
    color: var(--color-secondary);
  }

  .identity-statement {
    border-inline-start: 0.25rem solid var(--color-primary);
    padding-inline-start: 2rem;
  }

  .identity-statement p:first-child {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    line-height: 1.55;
  }

  .identity-statement p:last-child {
    color: var(--color-secondary);
    margin-block-start: 1rem;
  }

  .contact-form-wrap {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: 4rem;
  }

  .contact-guide {
    display: grid;
    align-content: start;
    gap: 1.5rem;
  }

  .contact-guide ul {
    display: grid;
    gap: 0.75rem;
    list-style: none;
  }

  .contact-guide li {
    position: relative;
    padding-inline-start: 1.5rem;
  }

  .contact-guide li::before {
    content: "";
    position: absolute;
    inset-block-start: 0.68rem;
    inset-inline-start: 0;
    inline-size: 0.5rem;
    block-size: 0.5rem;
    background: var(--color-primary);
  }

  .demo-form {
    display: grid;
    gap: 2rem;
  }

  .form-intro {
    border: 0.125rem solid var(--color-primary);
    padding: 1.5rem;
  }

  .form-intro strong {
    display: block;
    font-family: var(--font-heading);
    font-size: 1.125rem;
    margin-block-end: 0.5rem;
  }

  .field {
    display: grid;
    gap: 0.625rem;
  }

  .field-label {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.625rem;
    font-weight: 700;
  }

  .required,
  .optional {
    display: inline-flex;
    min-block-size: 1.75rem;
    align-items: center;
    border: 0.0625rem solid currentColor;
    font-size: 1rem;
    line-height: 1.35;
    padding: 0.125rem 0.5rem;
  }

  .required {
    color: var(--color-error);
  }

  .optional {
    color: var(--color-secondary);
  }

  .field input,
  .field select,
  .field textarea {
    inline-size: 100%;
    min-block-size: 3.5rem;
    background: var(--color-surface);
    border: 0.125rem solid var(--color-ui-border);
    border-radius: var(--radius-small);
    color: var(--color-text);
    padding: 0.75rem 0.875rem;
  }

  .field textarea {
    min-block-size: 12.5rem;
    resize: vertical;
  }

  .field input:user-invalid,
  .field select:user-invalid,
  .field textarea:user-invalid {
    border-color: var(--color-error);
  }

  .field-help {
    color: var(--color-secondary);
    font-size: 1rem;
  }

  .consent-row {
    min-block-size: 3rem;
    display: grid;
    grid-template-columns: 1.5rem minmax(0, 1fr);
    align-items: start;
    gap: 1rem;
    cursor: pointer;
    line-height: 1.8;
  }

  .consent-row input {
    inline-size: 1.5rem;
    block-size: 1.5rem;
    margin: 0.15rem 0 0;
    accent-color: var(--color-primary);
  }

  .consent-row span {
    min-inline-size: 0;
  }

  .consent-row a {
    display: inline;
  }

  .demo-submit {
    inline-size: 100%;
    min-block-size: 4rem;
    border: 0.125rem solid var(--color-secondary);
    border-radius: var(--radius-small);
    background: #e5eff4;
    color: var(--color-text);
    cursor: not-allowed;
    font-weight: 700;
    padding: 0.875rem 1.5rem;
  }

  .submit-note {
    color: var(--color-secondary);
    margin-block-start: -1rem;
  }

  .policy-article,
  .news-article {
    display: grid;
    gap: 3rem;
  }

  .policy-article section,
  .news-article section {
    display: grid;
    gap: 1rem;
  }

  .policy-article ul,
  .news-article ul {
    display: grid;
    gap: 0.5rem;
    padding-inline-start: 1.5rem;
  }

  .article-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.5rem;
    color: var(--color-secondary);
  }

  .article-meta time {
    font-family: var(--font-mono);
    font-size: 1rem;
  }

  .article-lead {
    border-inline-start: 0.25rem solid var(--color-primary);
    font-size: 1.125rem;
    padding-inline-start: 1.5rem;
  }

  .article-nav {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    border-block-start: 0.0625rem solid var(--color-ui-border);
    padding-block-start: 2rem;
  }

  .article-nav a {
    min-block-size: 3rem;
    display: inline-flex;
    align-items: center;
    color: var(--color-primary-deep);
    font-weight: 700;
  }

  .sr-only {
    position: absolute;
    inline-size: 0.0625rem;
    block-size: 0.0625rem;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .mt-3 {
    margin-block-start: 1rem;
  }

  .mt-4 {
    margin-block-start: 1.5rem;
  }

  .mt-5 {
    margin-block-start: 2rem;
  }

  .align-end {
    align-self: end;
  }

@media (width < 1200px) {
  :root {
    --gutter: 2rem;
  }
}

@media (width < 1024px) {
  :root {
    --space-9: 5rem;
  }

  .desktop-nav {
    display: none;
  }

  .mobile-nav {
    display: block;
  }

  .header-inner {
    min-block-size: 5.5rem;
  }

  .home-hero-grid,
  .overview-grid,
  .features-grid,
  .process-grid,
  .company-home-grid,
  .contact-band-grid,
  .service-intro-grid,
  .contact-intro-grid,
  .company-intro-grid,
  .contact-form-wrap {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
  }

  .home-hero .site-media {
    max-inline-size: 30rem;
  }

  .service-row {
    grid-template-columns: minmax(12rem, 3fr) minmax(0, 5fr);
  }

  .service-meta {
    grid-column: 2;
    border-inline-start: 0;
    border-block-start: 0.0625rem solid var(--color-border);
    padding-block-start: 1rem;
    padding-inline-start: 0;
  }

  .features-grid,
  .company-home-grid,
  .service-intro-grid,
  .contact-intro-grid,
  .company-intro-grid {
    gap: 2.5rem;
  }

  .process-grid,
  .contact-form-wrap {
    gap: 3rem;
  }

  .package {
    gap: 2.5rem;
  }

  .company-principle {
    padding: 1.5rem;
  }
}

@media (width < 768px) {
  :root {
    --gutter: 1.25rem;
    --space-9: 3.5rem;
  }

  html {
    scroll-behavior: auto;
  }

  h1 {
    font-size: 2.5rem;
  }

  h2 {
    font-size: 1.875rem;
  }

  .page-hero h1 {
    font-size: 2.25rem;
  }

  .brand-mark {
    inline-size: 2.5rem;
    block-size: 2.5rem;
  }

  .brand-name {
    font-size: 1rem;
  }

  .brand-en {
    display: none;
  }

  .header-inner {
    min-block-size: 4.75rem;
    gap: 0.5rem;
  }

  .mobile-nav summary {
    gap: 0.25rem;
    padding-inline: 0.375rem;
  }

  .mobile-nav-panel {
    inset-inline: 1.25rem;
  }

  .page-hero {
    padding-block: 3.5rem;
  }

  .page-hero-inner,
  .home-hero-grid,
  .overview-grid,
  .features-grid,
  .process-grid,
  .company-home-grid,
  .contact-band-grid,
  .service-intro-grid,
  .contact-intro-grid,
  .company-intro-grid,
  .contact-form-wrap,
  .footer-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .home-hero {
    padding-block: 3rem 3.5rem;
  }

  .home-hero-copy {
    gap: 1.5rem;
  }

  .home-hero h1 {
    max-inline-size: none;
    font-size: 2rem;
  }

  .home-hero .site-media {
    max-inline-size: 30rem;
  }

  .button-row {
    display: grid;
  }

  .button {
    inline-size: 100%;
  }

  .button-compact {
    justify-self: stretch;
  }

  .sample-disclaimer-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
  }

  .sample-disclaimer-copy {
    border-block-start: 0.0625rem dashed var(--color-ui-border);
    border-inline-start: 0;
    padding-block-start: 1rem;
    padding-inline-start: 0;
  }

  .overview-grid,
  .features-grid,
  .process-grid,
  .company-home-grid,
  .contact-band-grid,
  .service-intro-grid,
  .contact-intro-grid,
  .company-intro-grid,
  .contact-form-wrap {
    gap: 2.5rem;
  }

  .overview-facts div {
    grid-template-columns: 5.5rem minmax(0, 1fr);
  }

  .service-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
  }

  .service-meta {
    grid-column: 1;
  }

  .feature-item {
    grid-template-columns: 2.5rem minmax(0, 1fr);
  }

  .route-step {
    grid-template-columns: 4rem minmax(0, 1fr);
    gap: 1rem;
    padding-inline-start: 1.5rem;
  }

  .package {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
    padding-block: 3rem;
  }

  .package-specs {
    grid-template-columns: minmax(0, 1fr);
  }

  .company-principles {
    grid-template-columns: minmax(0, 1fr);
  }

  .news-list a {
    grid-template-columns: minmax(0, 1fr) 2rem;
    gap: 0.5rem 1rem;
    padding-block: 1.25rem;
  }

  .news-date,
  .news-category {
    grid-column: 1;
    justify-self: start;
  }

  .news-title {
    grid-column: 1;
  }

  .news-arrow {
    grid-column: 2;
    grid-row: 1 / 4;
  }

  .company-table-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.375rem;
  }

  .footer-grid {
    gap: 2.5rem;
  }

  .footer-bottom,
  .article-nav {
    flex-direction: column;
  }
}

/* Lightning の2カラム用ラッパーを、このブロックページでは使用しない。 */
body.page .site-body-container.container {
  display: block;
}

body.page .site-body-container > .main-section,
body.page .site-body-container > .main-section > .entry,
body.page .site-body-container > .main-section .entry-body {
  inline-size: 100%;
  max-inline-size: none;
}

body.page .site-body-container > .sub-section {
  display: none;
}

/* テーマ本文の上下余白はブロックページでは使わず、静的版の各sectionの余白に任せる。 */
body.page .site-body {
  padding-block: 0;
}

/* Gutenberg の標準ボタンスタイルよりも、このサイトのボタン定義を優先する。 */
.sumino-site .wp-block-button__link.wp-element-button.button-primary {
  background: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
  color: var(--color-surface) !important;
}

.sumino-site .wp-block-button__link.wp-element-button.button-primary:hover,
.sumino-site .wp-block-button__link.wp-element-button.button-primary:focus-visible {
  background: var(--color-accent-hover) !important;
  border-color: var(--color-accent-hover) !important;
  color: var(--color-surface) !important;
}

.sumino-site .wp-block-button__link.wp-element-button.button-secondary {
  background: transparent !important;
  border-color: var(--color-primary) !important;
  color: var(--color-primary-deep) !important;
}

.sumino-site .wp-block-button__link.wp-element-button.button-secondary:hover,
.sumino-site .wp-block-button__link.wp-element-button.button-secondary:focus-visible {
  background: #e6f2f7 !important;
  border-color: var(--color-primary-deep) !important;
  color: var(--color-primary-deep) !important;
}

/* お知らせ行はブロックエディタのリスト余白を使わず、ホバー色を行全体に揃える。 */
.sumino-site .news-list > li {
  margin: 0 !important;
  padding: 0;
}

.sumino-site .news-list > li > a:hover,
.sumino-site .news-list > li > a:focus-visible {
  background: #e6f2f7;
}

/* 青いお問い合わせ帯では、第二CTAも白いアウトライン仕様にする。 */
.sumino-site .contact-band .wp-block-button__link.wp-element-button.button-secondary {
  border-color: var(--color-surface) !important;
  background: transparent !important;
  color: var(--color-surface) !important;
}

.sumino-site .contact-band .wp-block-button__link.wp-element-button.button-secondary:hover,
.sumino-site .contact-band .wp-block-button__link.wp-element-button.button-secondary:focus-visible {
  border-color: var(--color-surface) !important;
  background: rgb(255 255 255 / 0.16) !important;
  color: var(--color-surface) !important;
}

/* WordPress のグローバルナビ内でも、最後の「相談する」を静的版と同じCTAにする。 */
@media (width >= 768px) {
  .site-header .global-nav .global-nav-list > li:last-child > a {
    min-block-size: 3.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border: 0.125rem solid var(--color-accent) !important;
    border-radius: var(--radius-small);
    background: var(--color-accent) !important;
    color: var(--color-surface) !important;
    font-weight: 700;
    padding-inline: 1.25rem;
    text-decoration: none;
  }

  .site-header .global-nav .global-nav-list > li:last-child > a:hover,
  .site-header .global-nav .global-nav-list > li:last-child > a:focus-visible,
  .site-header .global-nav .global-nav-list > li:last-child.current-menu-item > a {
    border-color: var(--color-accent-hover) !important;
    background: var(--color-accent-hover) !important;
    color: var(--color-surface) !important;
  }
}

/* ヘッダーナビゲーション -------------------------------------------------------- */
@media (width >= 992px) {
  .site-header .global-nav-list > li:not(:last-child) > a {
    min-block-size: 3.5rem;
    border-block-end: 0 !important;
    padding-inline: 1.1rem;
  }

  .site-header .global-nav-list > li:not(:last-child) > a::after {
    content: "";
    position: absolute;
    inset-block-end: 0.45rem;
    inset-inline-start: 50%;
    inline-size: 2.25rem;
    block-size: 0.1875rem;
    background: transparent;
    transform: translateX(-50%);
  }

  .site-header .global-nav-list > li:not(:last-child).current-menu-item > a::after,
  .site-header .global-nav-list > li:not(:last-child) > a:hover::after,
  .site-header .global-nav-list > li:not(:last-child) > a:focus-visible::after {
    background: var(--color-primary);
  }

  .site-header .global-nav .global-nav-list > li:last-child > a {
    block-size: 2.75rem !important;
    height: 2.75rem !important;
    min-block-size: 2.75rem !important;
    border-radius: 0.375rem;
    padding-block: 0 !important;
    padding-inline: 1.1rem;
  }

  .header_scrolled .site-header .global-nav .global-nav-list > li:last-child > a {
    block-size: 2.5rem !important;
    height: 2.5rem !important;
    min-block-size: 2.5rem !important;
    padding-block: 0 !important;
  }
}

/* WordPressの見出し装飾は使用せず、静的版の素直な見出しへ統一する。 */
.sumino-site .wp-block-heading {
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.sumino-site .wp-block-heading::before,
.sumino-site .wp-block-heading::after {
  content: none !important;
}

/* トップの導入部だけ、テーマ移行で増えた上側の空きを詰める。 */
.sumino-site .home-hero {
  padding-block: 5rem 6rem;
}

/* 表形式の情報は、静的版の行・セル構成を再現する。 */
.sumino-site .overview-facts {
  border-block-start: 0.125rem solid var(--color-primary);
}

.sumino-site .overview-facts > .wp-block-group {
  grid-template-columns: 6.5rem minmax(0, 1fr);
}

.sumino-site .company-table {
  border-block-start: 0.125rem solid var(--color-text);
}

.sumino-site .package-specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border-block-start: 0.0625rem solid var(--color-ui-border);
  border-inline-start: 0.0625rem solid var(--color-ui-border);
}

.sumino-site .package-specs > .wp-block-group {
  display: block;
  min-inline-size: 0;
  border-block-end: 0.0625rem solid var(--color-ui-border);
  border-inline-end: 0.0625rem solid var(--color-ui-border);
  padding: 1.25rem;
}

.sumino-site .package-specs .wp-block-heading,
.sumino-site .package-specs .wp-block-paragraph {
  grid-column: auto;
  margin: 0;
}

.sumino-site .package-specs .wp-block-heading {
  color: var(--color-secondary);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0;
  margin-block-end: 0.375rem;
}

.sumino-site .package-specs .wp-block-paragraph {
  font-weight: 700;
}

.sumino-site-footer::after {
  content: none !important;
  display: none !important;
}

/* WordPressテーマのフッター用文字サイズ・リスト余白を静的版に持ち込まない。 */
.sumino-site-footer {
  font-size: 1rem;
  line-height: 1.8;
}

.sumino-site-footer p,
.sumino-site-footer ul {
  margin: 0;
}

.sumino-site-footer ul.footer-nav {
  padding: 0 !important;
}

.sumino-site-footer .footer-brand strong {
  line-height: 1.35;
  white-space: nowrap;
}

.sumino-site-footer .footer-brand p,
.sumino-site-footer .footer-nav,
.sumino-site-footer .footer-nav a {
  font-size: 1rem;
  line-height: 1.8;
}

.sumino-site-footer .footer-nav a {
  white-space: nowrap;
}

/* 会社案内のCTAはお問い合わせへの導線だけを表示する。 */
body.page-id-25 .contact-band .button-secondary {
  display: none;
}

/* お問い合わせフォーム導入部の囲み装飾を使用しない。 */
.sumino-site .form-intro {
  border: 0;
  padding: 0;
}

/* お知らせページで削除した案内セクションの空の親ブロックを除去する。 */
body.page-id-28 .sumino-site > section.section-base:not(:has(*)) {
  display: none;
}

/* お知らせ一覧は本文幅に収め、左右の余白を常に均等に保つ。 */
body.page.page-id-28 .site-body-container.container {
  inline-size: min(100% - (var(--gutter) * 2), var(--container));
  max-inline-size: var(--container);
  padding-inline: 0;
}

/* 投稿ページとして表示するお知らせ一覧。 */
.sumino-news-archive-body {
  padding-block: 0 !important;
}

.sumino-news-archive.container {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(17rem, 0.42fr);
  align-items: start;
  gap: clamp(2.5rem, 5vw, 5rem);
  inline-size: min(100% - (var(--gutter) * 2), var(--container));
  max-inline-size: var(--container);
  margin-inline: auto;
}

.sumino-news-archive-main {
  min-inline-size: 0;
}

.sumino-news-archive-hero {
  border-block-end: 0.0625rem solid var(--color-border);
  display: grid;
  gap: 1rem;
  padding-block: 3.5rem;
}

.sumino-news-archive-hero h1 {
  font-size: clamp(2.25rem, 4vw, 3rem);
  margin: 0 !important;
}

.sumino-news-archive-hero > p:last-child {
  color: var(--color-secondary);
  font-size: 1.125rem;
}

.sumino-news-archive-list {
  display: grid;
  gap: 1rem;
  padding-block: 3rem 3.5rem;
}

.sumino-news-archive-list h2 {
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.sumino-news-archive-list h2::before,
.sumino-news-archive-list h2::after {
  content: none !important;
}

.sumino-news-archive-list .news-list {
  margin: 0;
}

.sumino-news-archive-list .news-list > li {
  margin: 0;
  padding: 0;
}

.sumino-news-archive .sumino-news-sidebar {
  margin-block-start: 5rem;
}

/* お知らせ一覧・記事詳細 -------------------------------------------------------- */
body.page-id-28 .site-body-container.container,
body.single-post .site-body-container.container {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(17rem, 0.42fr);
  align-items: start;
  gap: clamp(2.5rem, 5vw, 5rem);
  inline-size: min(100% - (var(--gutter) * 2), var(--container-wide));
  max-inline-size: var(--container-wide);
  margin-inline: auto;
}

body.page-id-28 .site-body-container > .main-section,
body.single-post .site-body-container > .main-section {
  inline-size: auto;
  max-inline-size: none;
  min-inline-size: 0;
}

body.page-id-28 .site-body-container > .sub-section,
body.single-post .site-body-container > .sub-section {
  display: block;
  inline-size: auto;
  max-inline-size: none;
  min-inline-size: 0;
  margin: 0;
}

body.single-post .site-body {
  padding-block: 4rem 5rem;
}

/* 記事本文のブロック見出しを正とし、テーマ標準のカテゴリ帯と重複要素を表示しない。 */
body.single-post .page-header,
body.single-post .breadcrumb,
body.single-post .site-body-bottom {
  display: none;
}

body.single-post .entry-header,
body.single-post .entry-footer,
body.single-post .comments-area,
body.single-post .next-prev {
  display: none;
}

body.single-post .entry,
body.single-post .entry-body {
  margin: 0;
}

body.single-post .entry-body > .wp-block-group {
  margin-block: 0;
}

body.single-post .entry-body .page-hero {
  border-block-end: 0;
  padding-block: 0 3rem;
}

body.single-post .entry-body .page-hero-copy {
  gap: 1rem;
}

body.single-post .entry-body .page-hero-copy > * {
  margin-block: 0;
}

body.single-post .entry-body .page-hero h1 {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: clamp(2rem, 2.8vw, 2.75rem);
  line-height: 1.28;
  margin: 0 !important;
  padding: 0 !important;
}

body.single-post .entry-body .page-hero h1::before,
body.single-post .entry-body .page-hero h1::after {
  content: none !important;
}

body.single-post .entry-body .news-article {
  gap: 3.25rem;
  padding-block: 0;
}

/* 記事詳細はテーマ標準ではなく、サイト固有の見出し・本文レイアウトを使用する。 */
body.single-post .entry-body .news-article.prose-container {
  inline-size: 100%;
  max-inline-size: none;
  margin-inline: 0;
}

body.single-post .entry-body .news-article > .wp-block-group {
  display: grid;
  gap: 1rem;
  margin: 0;
}

body.single-post .entry-body .news-article p {
  margin-block: 0;
  font-size: 1rem;
  line-height: 1.9;
}

body.single-post .entry-body .news-article .article-lead {
  font-size: 1.125rem;
  line-height: 1.8;
  padding-inline-start: 1.25rem;
}

body.single-post .entry-body .news-article :is(h2, h3, h4, h5, h6) {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--color-text);
  font-family: var(--font-heading);
  margin: 0 !important;
  padding: 0 !important;
}

body.single-post .entry-body .news-article :is(h2, h3, h4, h5, h6)::before,
body.single-post .entry-body .news-article :is(h2, h3, h4, h5, h6)::after {
  content: none !important;
}

body.single-post .entry-body .news-article h2 {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.35;
}

body.single-post .entry-body .news-article .article-nav {
  border-block-start: 0.0625rem solid var(--color-ui-border);
  padding-block-start: 1.75rem;
}

.sumino-news-sidebar {
  display: grid;
  gap: 1.75rem;
  position: static;
}

/* 一覧のサイドバーは、本文のページ見出しと同じ高さから始める。 */
body.page-id-28 .sumino-news-sidebar {
  margin-block-start: 5rem;
}

.news-sidebar-section {
  border-block-end: 0.0625rem solid var(--color-ui-border);
  padding-block-end: 1.5rem;
}

.news-sidebar-section h2 {
  border: 0 !important;
  color: var(--color-primary-deep);
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.4;
  margin: 0 0 0.625rem;
  padding: 0 !important;
}

.news-sidebar-section h2::before,
.news-sidebar-section h2::after {
  content: none !important;
}

.news-sidebar-list,
.news-sidebar-links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.news-sidebar-list li,
.news-sidebar-links li {
  border: 0;
  margin: 0;
}

.news-sidebar-list a,
.news-sidebar-links a {
  color: var(--color-text);
  padding-block: 0.5rem;
  text-decoration: none;
}

.news-sidebar-list a {
  display: grid;
  grid-template-columns: 5.25rem minmax(0, 1fr);
  align-items: baseline;
  gap: 0.625rem;
}

.news-sidebar-links a {
  display: block;
}

.news-sidebar-list a:hover,
.news-sidebar-list a:focus-visible,
.news-sidebar-links a:hover,
.news-sidebar-links a:focus-visible {
  color: var(--color-primary-deep);
}

.news-sidebar-date {
  color: var(--color-secondary);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  white-space: nowrap;
}

.news-sidebar-title,
.news-sidebar-links a {
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.6;
}

@media (width < 992px) {
  .sumino-news-archive.container {
    display: block;
    inline-size: 100%;
    padding-inline: 0;
  }

  .sumino-news-archive-main,
  .sumino-news-archive .sumino-news-sidebar {
    box-sizing: border-box;
    inline-size: min(100% - (var(--gutter) * 2), var(--container));
    margin-inline: auto;
  }

  .sumino-news-archive .sumino-news-sidebar {
    margin-block-start: 4rem;
  }

  body.page-id-28 .site-body-container.container,
  body.single-post .site-body-container.container {
    display: block;
    inline-size: 100%;
    padding-inline: 0;
  }

  body.page-id-28 .site-body-container > .sub-section,
  body.single-post .site-body-container > .sub-section {
    box-sizing: border-box;
    inline-size: min(100% - (var(--gutter) * 2), var(--container));
    margin: 4rem auto 0;
  }

  /* 個別記事の本文もヘッダーと同じ左右ガター内に収める。 */
  body.single-post .site-body-container > .main-section {
    box-sizing: border-box;
    inline-size: min(100% - (var(--gutter) * 2), var(--container));
    margin-inline: auto;
  }

  .sumino-news-sidebar {
    /* 本文の下へ回る幅では、読み順どおり一列に積む。 */
    grid-template-columns: 1fr;
    align-items: start;
    gap: 2rem;
    margin-block-start: 0;
    position: static;
  }
}

@media (width < 640px) {
  .sumino-news-archive-hero,
  .sumino-news-archive-list {
    padding-block: 2.5rem;
  }

  body.single-post .site-body {
    padding-block: 2.5rem 3.5rem;
  }

  body.single-post .entry-body .page-hero {
    padding-block-end: 2.5rem;
  }

}


/* 見出しにテーマ由来の句点・罫線・余白が混入しないようにする。 */
.sumino-site :is(h1, h2, h3) {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  margin: 0;
  padding: 0 !important;
}

.sumino-site :is(h1, h2, h3)::before,
.sumino-site :is(h1, h2, h3)::after {
  content: none !important;
}

/* スクロール時もロゴを残し、メニューを右端へ固定する。 */
@media (width >= 992px) {
  .header_scrolled .sumino-header .header-inner {
    min-block-size: 6rem;
  }

  .header_scrolled .sumino-header .site-header-logo {
    display: block !important;
    inline-size: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .header_scrolled .sumino-header .desktop-nav {
    margin-inline-start: auto;
  }
}

@media (width < 768px) {
  .sumino-site .package-specs {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* 子テーマの静的版ヘッダー：選択中の下線は短い一本だけにする。 */
@media (width >= 992px) {
  .sumino-header .desktop-nav li:not(:last-child) > a {
    position: relative;
    border-block-end-color: transparent !important;
  }

  .sumino-header .desktop-nav li:not(:last-child) > a::before {
    content: "";
    position: absolute;
    inset-block-end: 0;
    inset-inline-start: 50%;
    inline-size: 2.25rem;
    block-size: 0.1875rem;
    background: transparent;
    transform: translateX(-50%);
  }

  .sumino-header .desktop-nav li:not(:last-child) > a:hover::before,
  .sumino-header .desktop-nav li:not(:last-child) > a:focus-visible::before,
  .sumino-header .desktop-nav li.current-menu-item > a::before,
  .sumino-header .desktop-nav li.current_page_item > a::before {
    background: var(--color-primary);
  }
}

/* Contact Form 7 -------------------------------------------------------------- */
.sumino-site .wpcf7-form {
  gap: 2rem;
}

.sumino-site .wpcf7-form > p:not(.consent-row) {
  display: block;
  margin: 0;
}

.sumino-site .wpcf7-form > p:not(.consent-row) > label {
  display: block;
  color: var(--color-text);
  font-weight: 700;
}

.sumino-site .wpcf7-form > p:not(.consent-row) > label > br {
  display: none;
}

.sumino-site .wpcf7-form > p:not(.consent-row) .wpcf7-form-control-wrap {
  display: block;
  margin-block-start: 0.625rem;
}

.sumino-site .wpcf7-form .required,
.sumino-site .wpcf7-form .optional {
  display: inline-flex;
  min-block-size: 1.75rem;
  align-items: center;
  border: 0.0625rem solid currentColor;
  font-size: 1rem;
  line-height: 1.35;
  padding: 0.125rem 0.5rem;
  vertical-align: middle;
}

.sumino-site .wpcf7-form .required {
  color: var(--color-error);
}

.sumino-site .wpcf7-form .optional {
  color: var(--color-secondary);
}

.sumino-site .wpcf7-form > p.consent-row {
  display: block;
  min-block-size: 0;
  margin: 0;
}

.sumino-site .wpcf7-form .consent-row .wpcf7-form-control-wrap,
.sumino-site .wpcf7-form .consent-row .wpcf7-acceptance,
.sumino-site .wpcf7-form .consent-row .wpcf7-list-item {
  display: block;
  inline-size: 100%;
  margin: 0;
}

.sumino-site .wpcf7-form .consent-row .wpcf7-acceptance label {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  align-items: start;
  gap: 1rem;
  font-weight: 400;
  line-height: 1.8;
}

.sumino-site .wpcf7-form .consent-row .wpcf7-list-item-label {
  min-inline-size: 0;
}

.sumino-site .wpcf7-form input[type="submit"] {
  margin: 0;
}

@media (width < 375px) {
  :root {
    --gutter: 1rem;
  }

  .mobile-nav-panel {
    inset-inline: 1rem;
  }

  .hero-heading-line {
    display: inline;
  }

  h1 {
    font-size: 2.25rem;
  }

  .brand {
    gap: 0.625rem;
  }

  .brand-mark {
    inline-size: 2.25rem;
    block-size: 2.25rem;
  }

  .brand-mark::before {
    inset-inline-start: 0.5rem;
  }

  .brand-mark::after {
    inset-inline-start: 1.625rem;
  }

  .mobile-nav summary {
    position: relative;
    inline-size: 3rem;
    justify-content: center;
    overflow: hidden;
    color: transparent;
    font-size: 1rem;
    padding-inline: 0.5rem;
  }

  .mobile-nav summary .menu-icon {
    position: absolute;
    inset-inline-start: 50%;
    color: var(--color-text);
    transform: translateX(-50%);
  }

  .news-list a {
    grid-template-columns: minmax(0, 1fr);
  }

  .news-arrow {
    display: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .route-step:not(:last-child)::after {
    animation: route-draw 420ms ease-out both;
  }

  @keyframes route-draw {
    from {
      transform: scaleY(0);
    }

    to {
      transform: scaleY(1);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .button::after {
    transition: none;
  }
}

@media print {
  .site-header,
  .site-footer,
  .button-row,
  .mobile-nav {
    display: none;
  }

  body {
    color: #000000;
  }

  a {
    text-decoration: none;
  }
}

/* WordPress / Gutenberg adaptation ------------------------------------------------ */
/* Lightningのレイアウト指定を、今回のブロックページでは解除する。 */
body.page .page-header,
body.page .site-body-bottom,
body.page .lightning_swiper {
  display: none;
}

body.page .site-body-container.container {
  inline-size: 100%;
  max-inline-size: none;
  padding-inline: 0;
}

body.page .main-section,
body.page .entry-body {
  margin: 0;
}

.entry-content > .sumino-site,
.editor-styles-wrapper .sumino-site {
  max-inline-size: none;
  margin: 0;
}

.sumino-site > .wp-block-group {
  margin-block: 0;
}

/* テーマの全幅指定を内側のコンテナに継承させず、静的版と同じ余白・最大幅に戻す。 */
.sumino-site .container,
.sumino-site .container-wide,
.sumino-site .prose-container {
  box-sizing: border-box;
  inline-size: min(100% - (var(--gutter) * 2), var(--container));
  margin-inline: auto;
}

.sumino-site .container-wide {
  max-inline-size: var(--container-wide);
}

.sumino-site .prose-container {
  max-inline-size: var(--prose);
}

.sumino-site .wp-block-buttons.button-row {
  align-items: stretch;
}

.sumino-site .wp-block-button {
  margin: 0;
}

/* ボタンの外側ラッパーには装飾を付けず、リンク本体だけをボタンとして表示する。 */
.sumino-site .wp-block-button.button {
  display: block;
  min-block-size: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  padding: 0;
}

.sumino-site .wp-block-button.button::after {
  content: none;
}

.sumino-site figure.wp-block-image {
  margin: 0;
}

.sumino-site .wp-block-button__link.button {
  box-shadow: none;
}

.sumino-site .overview-facts > .wp-block-group,
.sumino-site .company-table-row,
.sumino-site .package-specs > .wp-block-group {
  display: grid;
  grid-template-columns: minmax(7rem, 0.35fr) 1fr;
  gap: 0.75rem 1.5rem;
  border-block-end: 0.0625rem solid var(--color-ui-border);
  padding-block: 1rem;
}

.sumino-site .overview-facts .wp-block-heading,
.sumino-site .company-table-row .wp-block-heading,
.sumino-site .package-specs .wp-block-heading {
  grid-column: 1;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0;
}

.sumino-site .overview-facts .wp-block-paragraph,
.sumino-site .company-table-row .wp-block-paragraph,
.sumino-site .package-specs .wp-block-paragraph {
  grid-column: 2;
  margin: 0;
}

/* Contact Form 7 */
.sumino-site .wpcf7-form {
  display: grid;
  gap: 1.5rem;
}

.sumino-site .wpcf7-form > p {
  display: grid;
  gap: 0.625rem;
  margin: 0;
}

.sumino-site .wpcf7-form label {
  display: grid;
  gap: 0.625rem;
  color: var(--color-text);
  font-weight: 700;
}

.sumino-site .wpcf7-form .wpcf7-form-control-wrap {
  display: block;
}

.sumino-site .wpcf7-form input:not([type="checkbox"]),
.sumino-site .wpcf7-form select,
.sumino-site .wpcf7-form textarea {
  inline-size: 100%;
  min-block-size: 3.5rem;
  box-sizing: border-box;
  background: var(--color-surface);
  border: 0.125rem solid var(--color-ui-border);
  border-radius: var(--radius-small);
  color: var(--color-text);
  font: inherit;
  padding: 0.75rem 0.875rem;
}

.sumino-site .wpcf7-form input::placeholder,
.sumino-site .wpcf7-form textarea::placeholder {
  color: color-mix(in srgb, var(--color-secondary) 72%, var(--color-surface));
  opacity: 1;
}

.sumino-site .wpcf7-form textarea {
  min-block-size: 12.5rem;
  resize: vertical;
}

.sumino-site .wpcf7-form input:focus,
.sumino-site .wpcf7-form select:focus,
.sumino-site .wpcf7-form textarea:focus {
  border-color: var(--color-primary);
  outline: 0.1875rem solid color-mix(in srgb, var(--color-primary) 25%, transparent);
  outline-offset: 0;
}

.sumino-site .wpcf7-form .wpcf7-not-valid-tip {
  color: var(--color-error);
  font-size: 0.9375rem;
  font-weight: 700;
}

.sumino-site .wpcf7-form .wpcf7-response-output {
  margin: 0;
  border: 0.125rem solid var(--color-primary);
  padding: 1rem 1.25rem;
}

.sumino-site .wpcf7-form .wpcf7-list-item {
  display: block;
  margin: 0;
}

.sumino-site .wpcf7-form .wpcf7-acceptance label {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  align-items: start;
  gap: 1rem;
  font-weight: 400;
}

.sumino-site .wpcf7-form input[type="checkbox"] {
  inline-size: 1.5rem;
  block-size: 1.5rem;
  margin: 0.15rem 0 0;
  accent-color: var(--color-primary);
}

.sumino-site .wpcf7-form input[type="submit"] {
  inline-size: 100%;
  min-block-size: 4rem;
  box-sizing: border-box;
  border: 0.125rem solid var(--color-accent);
  border-radius: var(--radius-small);
  background: var(--color-accent);
  color: var(--color-surface);
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  padding: 0.875rem 1.5rem;
}

.sumino-site .wpcf7-form input[type="submit"]:hover {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
}

/* サイト固有のモバイルメニューを使うため、Lightning標準の重複ボタンは表示しない。 */
#vk-mobile-nav-menu-btn,
#vk-mobile-nav {
  display: none !important;
}

.mobile-nav-backdrop {
  display: none;
}

/* モバイルメニュー ------------------------------------------------------------ */
@media (width < 1024px) {
  /* Lightning のスクロール時スタイルでも、サイト固有のロゴとメニューを維持する。 */
  body.header_scrolled .sumino-header {
    inset-block-start: 0;
    inset-inline-start: 0;
    position: fixed !important;
    z-index: 1100;
  }

  body.header_scrolled.admin-bar .sumino-header {
    inset-block-start: 2rem;
  }

  body.header_scrolled .sumino-header .site-header-logo {
    display: block !important;
    inline-size: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 開いたメニューの背後だけを抑え、ヘッダーとメニューパネルは明るく保つ。 */
  .sumino-header:has(.mobile-nav[open]) {
    isolation: isolate;
    position: relative;
    z-index: 1100;
  }

  .sumino-header:has(.mobile-nav[open]) .mobile-nav-backdrop {
    display: block;
    position: fixed;
    z-index: 1;
    inset: 0;
    border: 0;
    margin: 0;
    padding: 0;
    background: rgb(13 38 57 / 0.32);
    cursor: pointer;
  }

  .sumino-header:has(.mobile-nav[open]) .header-inner {
    position: relative;
    z-index: 2;
  }

  .sumino-header:has(.mobile-nav[open]) .mobile-nav-panel {
    z-index: 3;
  }
}

@media (width < 783px) {
  body.header_scrolled.admin-bar .sumino-header {
    inset-block-start: 2.875rem;
  }
}

@media (width < 768px) {
  .sumino-site .overview-facts > .wp-block-group,
  .sumino-site .company-table-row,
  .sumino-site .package-specs > .wp-block-group {
    grid-template-columns: 1fr;
    gap: 0.25rem;
  }

  .sumino-site .overview-facts .wp-block-heading,
  .sumino-site .overview-facts .wp-block-paragraph,
  .sumino-site .company-table-row .wp-block-heading,
  .sumino-site .company-table-row .wp-block-paragraph,
  .sumino-site .package-specs .wp-block-heading,
  .sumino-site .package-specs .wp-block-paragraph {
    grid-column: 1;
  }
}

/* 1列になる幅では、ヒーロー画像を背景として使い、縦に間延びさせない。 */
@media (width < 1024px) {
  .sumino-site .home-hero {
    --home-hero-image: url("/wp-content/uploads/2026/08/hero-workflow.webp");
    position: relative;
    overflow: hidden;
    padding-block: 0;
    background-image: linear-gradient(90deg, rgb(255 255 255 / 0.96) 0%, rgb(255 255 255 / 0.9) 52%, rgb(255 255 255 / 0.48) 100%), var(--home-hero-image);
    background-position: center;
    background-size: cover;
  }

  .sumino-site .home-hero-grid {
    position: relative;
    inline-size: 100%;
    max-inline-size: none;
    min-block-size: clamp(32rem, 72svh, 42rem);
    align-content: center;
    isolation: isolate;
    margin-inline: 0;
    padding-block: clamp(3.5rem, 8vw, 5rem);
    padding-inline: var(--gutter);
  }

  .sumino-site .home-hero-copy {
    position: relative;
    z-index: 2;
    max-inline-size: 40rem;
  }

  .sumino-site .home-hero-grid::before {
    content: none;
  }

  .sumino-site .home-hero .site-media {
    display: none;
  }
}

@media (width < 640px) {
  .sumino-site .home-hero-grid {
    min-block-size: 36rem;
    padding-block: 3.5rem;
  }

  .sumino-site .home-hero-grid::before {
    content: none;
  }

  .sumino-site .home-hero {
    background-image: linear-gradient(rgb(255 255 255 / 0.84), rgb(255 255 255 / 0.84)), var(--home-hero-image);
  }
}