.ai-practice-body {
    --ai-navy: #172e43;
    --ai-paper: #f7f4eb;
    --ai-orange: #c8431b;
    --ai-muted: #526170;
    color: var(--ai-navy);
    background: var(--ai-paper);
}

.ai-practice-body header {
    background: rgba(247, 244, 235, 0.97);
    border-bottom: 1px solid rgba(23, 46, 67, 0.1);
}

/* Header link to the invitation: navy, so orange stays the page's single action color. */
@media (min-width: 769px) {
    .ai-practice-body header .nav-contact-btn {
        border-color: var(--ai-navy);
        color: var(--ai-paper);
        background: var(--ai-navy);
    }

    .ai-practice-body header .nav-contact-btn:hover {
        border-color: #0e1f2e;
        color: var(--ai-paper);
        background: #0e1f2e;
    }
}

.ai-page {
    font-family: 'Hiragino Kaku Gothic ProN', 'Yu Gothic', Meiryo, sans-serif;
    line-height: 1.9;
}

/* Explicit reset so shared default margins do not stack with this page's spacing. */
.ai-page :where(h1, h2, h3, p, ol, dl, dt, dd, figure) {
    margin: 0;
}

.ai-page h1,
.ai-page h2,
.ai-page h3 {
    font-family: inherit;
    line-height: 1.5;
    letter-spacing: -0.035em;
}

.ai-page section {
    padding: 0;
    scroll-margin-top: 110px;
}

.ai-shell {
    width: min(100% - 96px, 1240px);
    margin-inline: auto;
}

.ai-page a {
    color: inherit;
    text-underline-offset: 0.25em;
}

.ai-practice-body a:focus-visible,
.ai-practice-body button:focus-visible,
.ai-page input:focus-visible,
.ai-page .ai-consent:focus-within,
.ai-page summary:focus-visible {
    outline: 3px solid var(--ai-orange);
    outline-offset: 5px;
}

.ai-skip {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 2000;
    padding: 12px 18px;
    color: var(--ai-navy);
    background: white;
    transform: translateY(-160%);
}

.ai-skip:focus {
    transform: none;
}

.ai-page .ai-hero {
    padding-top: 124px;
    padding-bottom: 80px;
}

/* Hero: phones and tablets read heading -> two finished flyers -> action; desktop puts the flyers on the right. */
.ai-hero__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "head"
        "visual"
        "action";
    row-gap: 24px;
}

.ai-hero__head {
    grid-area: head;
    min-width: 0;
}

.ai-hero__eyebrow {
    color: var(--ai-muted);
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.06em;
}

.ai-hero h1 {
    margin-top: 6px;
    font-size: clamp(2rem, 4vw, 3.5rem);
    line-height: 1.32;
    font-weight: 800;
}

/* Wrap only after the comma, never inside a phrase. */
.ai-hero h1 span {
    display: inline-block;
}

.ai-hero__visual {
    grid-area: visual;
    width: min(100%, 760px);
    min-width: 0;
}

/* Two finished flyers at their 1200 x 1440 ratio, side by side, never cropped or overlapped. */
.ai-hero__flyers {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ai-hero__flyers li {
    min-width: 0;
}

.ai-hero__flyers img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1200 / 1440;
    background: white;
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(23, 46, 67, 0.12), 0 8px 20px rgba(23, 46, 67, 0.1);
}

.ai-hero__visual figcaption {
    margin-top: 10px;
    color: var(--ai-muted);
    font-size: 0.875rem;
    line-height: 1.5;
}

.ai-hero__action {
    grid-area: action;
    width: min(100%, 760px);
    min-width: 0;
}

.ai-hero__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 8px;
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
}

.ai-hero__tags li {
    padding: 2px 10px;
    border: 1px solid var(--ai-navy);
    border-radius: 2px;
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.6;
    white-space: nowrap;
}

.ai-hero__tags li:first-child {
    color: var(--ai-paper);
    background: var(--ai-navy);
}

.ai-hero__cta {
    min-width: 0;
}

.ai-page .ai-hero__cta .ai-button {
    display: flex;
    width: 100%;
}

.ai-hero__note {
    margin-top: 8px;
    color: var(--ai-muted);
    font-size: 0.875rem;
    line-height: 1.6;
}

@media (min-width: 701px) {
    .ai-hero__action {
        display: grid;
        grid-template-columns: auto minmax(0, 360px);
        justify-content: space-between;
        align-items: center;
        column-gap: 24px;
    }

    .ai-hero__tags {
        margin-bottom: 0;
    }
}

/* Desktop: copy and action on the left, flyers on the right, below the fixed site header. */
@media (min-width: 1001px) {
    .ai-hero__layout {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        grid-template-rows: 1fr auto 1fr;
        grid-template-areas:
            ".      visual"
            "head   visual"
            "action visual";
        column-gap: 64px;
        row-gap: 0;
        align-items: center;
    }

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

    /* Keeps the 10-character second line on one row inside the 5fr column. */
    .ai-hero h1 {
        font-size: clamp(2rem, 0.5rem + 2.4vw, 3rem);
    }

    .ai-hero__eyebrow {
        font-size: 1rem;
    }

    .ai-hero__visual {
        justify-self: end;
        width: 100%;
        max-width: 640px;
    }

    .ai-hero__flyers {
        gap: 20px;
    }

    .ai-hero__action {
        display: block;
        align-self: start;
        width: auto;
        margin-top: 32px;
    }

    .ai-hero__tags {
        margin-bottom: 16px;
    }

    .ai-hero__cta {
        max-width: 360px;
    }
}

.ai-page .ai-button {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    max-width: 100%;
    min-height: 54px;
    padding: 14px 22px;
    background: var(--ai-orange);
    color: white;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.5;
    text-decoration: none;
    transition: background-color 0.2s;
}

.ai-page .ai-button:hover {
    background: #a63515;
}

.ai-text-link {
    font-size: 0.875rem;
}

.ai-eyebrow {
    margin-bottom: 12px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.ai-page h2 {
    font-size: clamp(1.6rem, 2.8vw, 2.5rem);
}

.ai-page .ai-program {
    padding-block: 80px;
    color: var(--ai-paper);
    background: var(--ai-navy);
}

.ai-section-lead {
    max-width: 42em;
    margin-top: 16px;
    font-size: 1rem;
    line-height: 1.8;
}

/* Wrap the program heading only between phrases. */
.ai-program h2 span {
    display: inline-block;
}

.ai-flow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 0;
    margin-top: 20px;
    padding: 0;
    list-style: none;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.6;
}

.ai-flow li:not(:last-child)::after {
    content: "→";
    margin-inline: 12px;
    color: #ffa47f;
}

/* Decorative arrow: give it empty alt text where supported. */
@supports (content: "→" / "") {
    .ai-flow li:not(:last-child)::after {
        content: "→" / "";
    }
}

/* Finished flyers are the section's main content: one column on phones, side by side from 880px. */
.ai-flyers {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
    max-width: 600px;
    margin-top: 40px;
}

.ai-flyer {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.ai-flyer h3 {
    padding-top: 16px;
    border-top: 1px solid rgba(247, 244, 235, 0.32);
    font-size: 1.15rem;
}

.ai-flyer__text {
    display: grid;
    gap: 6px;
    align-content: start;
}

.ai-flyer__text > div {
    display: grid;
    grid-template-columns: 3.5em minmax(0, 1fr);
    gap: 12px;
    align-items: baseline;
    font-size: 0.95rem;
    line-height: 1.7;
}

.ai-flyer__text dt {
    color: #ffa47f;
    font-size: 0.8rem;
    font-weight: 700;
}

.ai-flyer__memo {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1em;
    margin: 0;
    padding: 0;
    list-style: none;
    color: #d0d8dd;
}

.ai-flyer__memo li::before {
    content: "・";
}

@supports (content: "・" / "") {
    .ai-flyer__memo li::before {
        content: "・" / "";
    }
}

.ai-flyer__intro {
    font-weight: 700;
}

.ai-flyer__image {
    display: block;
    margin-top: 4px;
}

.ai-flyer__image img {
    display: block;
    width: 100%;
    height: auto;
    background: var(--ai-paper);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
}

.ai-flyers__note {
    margin-top: 28px;
    color: #d0d8dd;
    font-size: 0.85rem;
    line-height: 1.7;
}

.ai-program__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px 32px;
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid rgba(247, 244, 235, 0.32);
}

.ai-program__more {
    flex: 1 1 20em;
    min-width: 0;
}

.ai-program__mail {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.7;
}

.ai-program__note {
    margin-top: 4px;
    color: #d0d8dd;
    font-size: 0.85rem;
}

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

    /* Align both flyer images even when the memo lengths differ. */
    @supports (grid-template-rows: subgrid) {
        .ai-flyer {
            display: grid;
            grid-row: span 3;
            grid-template-rows: subgrid;
            row-gap: 14px;
        }
    }
}

.ai-page .ai-faq {
    padding-block: 80px 64px;
}

.ai-faq__layout {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 80px;
}

.ai-faq details {
    padding-block: 18px;
    border-bottom: 1px solid rgba(23, 46, 67, 0.16);
}

.ai-faq details:first-child {
    padding-top: 0;
}

.ai-faq summary {
    padding-right: 12px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 700;
}

.ai-faq details p {
    margin-top: 6px;
    color: var(--ai-muted);
    font-size: 0.95rem;
    line-height: 1.8;
}

.ai-page .ai-invitation {
    padding-bottom: 88px;
}

.ai-invitation__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 56px;
    align-items: start;
    padding: clamp(28px, 4vw, 56px);
    border: 1px solid rgba(23, 46, 67, 0.18);
    background: #fffdf7;
}

.ai-invitation__copy {
    min-width: 0;
}

.ai-invitation h2 {
    font-size: clamp(1.6rem, 2.5vw, 2.1rem);
}

.ai-invitation__purpose {
    margin-top: 16px;
    line-height: 1.8;
}

.ai-facts {
    margin-top: 24px;
    border-top: 1px solid rgba(23, 46, 67, 0.16);
}

.ai-facts > div {
    display: grid;
    grid-template-columns: 4.5em minmax(0, 1fr);
    gap: 16px;
    padding-block: 10px;
    border-bottom: 1px solid rgba(23, 46, 67, 0.16);
    font-size: 0.95rem;
    line-height: 1.7;
}

.ai-facts dt {
    font-weight: 700;
}

.ai-facts dd span {
    display: inline-block;
}

.ai-facts__note {
    margin-top: 10px;
    color: var(--ai-muted);
    font-size: 0.875rem;
    line-height: 1.7;
}

.ai-host {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 16px;
    margin-top: 24px;
}

.ai-host__label {
    color: var(--ai-muted);
    font-size: 0.8rem;
    font-weight: 700;
}

.ai-host__name {
    font-size: 0.875rem;
}

.ai-host__name strong {
    margin-right: 0.75em;
    font-size: 1.1rem;
}

.ai-invitation__form {
    min-width: 0;
}

.ai-invitation__form fieldset {
    min-width: 0;
    margin: 0;
    border: 0;
    padding: 0;
}

.ai-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.ai-visually-hidden input {
    width: 1px;
    min-width: 0;
    padding: 0;
    border: 0;
}

.ai-form-note {
    margin-bottom: 22px;
    padding: 14px 16px;
    border-left: 3px solid var(--ai-orange);
    background: var(--ai-paper);
    font-size: 0.875rem;
    line-height: 1.8;
}

.ai-field + .ai-field {
    margin-top: 20px;
}

.ai-field label {
    display: block;
    margin-bottom: 8px;
    font-weight: 700;
    font-size: 0.95rem;
}

.ai-field__required {
    margin-left: 8px;
    color: var(--ai-orange);
    font-size: 0.75rem;
    font-weight: 400;
}

.ai-field input {
    width: 100%;
    min-width: 0;
    min-height: 48px;
    padding: 12px;
    border: 1px solid #7a8590;
    border-radius: 2px;
    color: var(--ai-navy);
    background: white;
    font: inherit;
    line-height: 1.5;
}

.ai-privacy-note {
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid rgba(23, 46, 67, 0.16);
    color: var(--ai-muted);
    font-size: 0.85rem;
    line-height: 1.8;
}

.ai-privacy-note p + p {
    margin-top: 6px;
}

.ai-consent {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-top: 14px;
    font-size: 0.9rem;
    cursor: pointer;
}

.ai-consent input {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin: 4px 0 0;
    accent-color: var(--ai-navy);
}

.ai-verification {
    min-width: 0;
    margin-top: 20px;
}

.ai-verification-retry {
    margin-top: 12px;
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid var(--ai-muted);
    color: var(--ai-navy);
    background: transparent;
    font: inherit;
    font-size: 0.875rem;
    cursor: pointer;
}

.ai-page .ai-form-submit {
    margin-top: 24px;
    border: 0;
    font-family: inherit;
    cursor: pointer;
}

.ai-page .ai-form-submit:disabled {
    background: var(--ai-muted);
    cursor: not-allowed;
}

.ai-practice-body footer {
    padding: 64px 0 32px;
    background: #0a1526;
}

.ai-practice-body .footer-container {
    width: min(100% - 96px, 1240px);
    max-width: none;
    gap: 80px;
}

.ai-practice-body .footer-links h3 {
    color: #c7d0da;
    font-size: 0.875rem;
}

.ai-practice-body .footer-links a {
    color: #f7f4eb;
    font-size: 0.875rem;
}

.ai-practice-body .copyright {
    width: min(100% - 96px, 1240px);
    max-width: none;
    color: #c7d0da;
    font-size: 0.75rem;
    text-align: left;
}

@media (max-width: 1000px) {
    .ai-shell,
    .ai-practice-body .footer-container,
    .ai-practice-body .copyright {
        width: calc(100% - 64px);
    }

    .ai-faq__layout {
        gap: 40px;
    }

    .ai-invitation__inner {
        gap: 32px;
    }
}

@media (max-width: 768px) {
    .ai-practice-body .menu-overlay {
        z-index: 999;
    }
}

/* Keep this landing page's header spacing when using the current shared CSS. */
@media (min-width: 769px) and (max-width: 1000px) {
    .ai-practice-body .header-container {
        padding-inline: 32px;
    }

    .ai-practice-body header nav {
        gap: 40px;
    }

    .ai-practice-body header nav > ul {
        gap: 32px;
    }
}

@media (max-width: 700px) {
    .ai-shell,
    .ai-practice-body .footer-container,
    .ai-practice-body .copyright {
        width: calc(100% - 40px);
    }

    /* Phones: heading, both flyers and the action fit the first view at 320 x 740 and 390 x 844. */
    .ai-page .ai-hero {
        padding-top: 100px;
        padding-bottom: 40px;
    }

    .ai-hero__layout {
        row-gap: 16px;
    }

    .ai-hero__eyebrow {
        font-size: 0.8125rem;
    }

    .ai-hero h1 {
        margin-top: 4px;
        font-size: clamp(1.5rem, 7vw, 2.25rem);
    }

    .ai-hero__flyers {
        gap: 10px;
    }

    .ai-hero__visual figcaption {
        margin-top: 8px;
        font-size: 0.8125rem;
    }

    .ai-hero__tags {
        margin-bottom: 10px;
    }

    .ai-hero__cta .ai-button,
    .ai-program__footer .ai-button,
    .ai-invitation .ai-button {
        width: 100%;
        gap: 12px;
        padding-inline: 16px;
    }

    .ai-page .ai-program {
        padding-block: 56px;
    }

    .ai-flyers {
        gap: 40px;
        margin-top: 32px;
    }

    /* Narrower label column and slightly smaller memo so each memo fits in about three lines. */
    .ai-flyer__text > div {
        grid-template-columns: 2.6rem minmax(0, 1fr);
        gap: 10px;
    }

    .ai-flyer__memo {
        gap: 0 0.875em;
        font-size: 0.875rem;
    }

    .ai-flyers__note {
        margin-top: 24px;
    }

    .ai-page .ai-faq {
        padding-block: 56px 48px;
    }

    .ai-faq__layout,
    .ai-invitation__inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }

    .ai-page .ai-invitation {
        padding-bottom: 56px;
    }

    .ai-invitation__inner {
        gap: 32px;
        padding: 20px;
    }

    .ai-facts > div {
        grid-template-columns: 3.5em minmax(0, 1fr);
        gap: 12px;
        font-size: 0.9rem;
    }

    .ai-practice-body .footer-container {
        gap: 32px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ai-page .ai-button {
        transition: none;
    }
}