/* Detail pages share HOME typography, with layouts specific to their purpose. */
.legal-copy {
    max-width: 850px
}

.legal-copy h2:not(:first-child) {
    margin-top: 44px
}

.legal-list {
    margin: 0
}

.legal-list>div {
    padding: 24px 0;
    border-bottom: 1px solid #cbd7e3
}

.legal-list dt {
    font-weight: 600;
    margin-bottom: 10px
}

.legal-list dd {
    margin: 0
}

.contact-page .consent {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-size: 14px;
    line-height: 1.9
}

.contact-page .consent input {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    margin: 4px 0 0
}

a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid #245ab3;
    outline-offset: 4px
}

.interior {
    --serif: 'Yu Mincho', 'Hiragino Mincho ProN', serif
}

.interior main p {
    line-height: 1.95
}

.detail-hero {
    padding: 90px 0 82px;
    background: #edf2f7;
    border-bottom: 1px solid #d4dfe9
}

.detail-hero h1 {
    font-family: var(--serif);
    font-size: clamp(2.15rem, 4.4vw, 3.4rem);
    line-height: 1.5;
    margin: 0 0 28px
}

.page-context {
    color: #526a84;
    font-size: .875rem;
    letter-spacing: .07em;
    margin-bottom: 22px
}

.intro {
    font-size: 1.16rem;
    max-width: 42em;
    line-height: 1.95
}

.medium-note {
    font-size: .875rem;
    color: #536478;
    margin: 20px 0 0
}

.hero-explanation {
    max-width: 42em
}

.chapter {
    padding: 100px 0
}

.editorial {
    display: grid;
    grid-template-columns: 1fr 1.12fr;
    gap: 90px;
    align-items: start
}

.editorial>*,
.contact-columns>* {
    min-width: 0
}

.chapter h2,
.detail-next h2 {
    font-family: var(--serif);
    font-weight: 500;
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    line-height: 1.7;
    margin-bottom: 28px
}

.chapter h3 {
    font-size: 1.07rem;
    font-weight: 600;
    line-height: 1.8;
    margin: 0 0 13px
}

.chapter p {
    color: #4c6076;
    max-width: 36em
}

.chapter p:last-child {
    margin-bottom: 0
}

.tinted {
    background: #f0f4f8
}

.chapter-cool {
    background: #edf2f7
}

.trial-chapter {
    background: #eeeae4
}

.price-focus {
    border-left: 2px solid #b4c6dc;
    padding: 14px 0 14px 48px
}

.price-focus .large-price {
    font: 3.5rem/1.3 Georgia, serif;
    color: var(--ink);
    margin: 10px 0 18px;
    white-space: nowrap
}

.large-price span {
    font: 1rem/1.8 sans-serif;
    margin-left: 8px
}

.price-focus .button {
    margin-top: 10px
}

.plan-list {
    margin: 0
}

.plan-list>div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 28px;
    border-top: 1px solid #cbd7e3;
    padding: 28px 0
}

.plan-list>div:last-child {
    border-bottom: 1px solid #cbd7e3
}

.plan-list dt {
    font-size: 1.05rem;
    font-weight: 500
}

.plan-list dt span {
    display: block;
    font-size: .9rem;
    color: var(--muted);
    margin-top: 7px
}

.plan-list dd {
    font: 2.4rem/1.5 Georgia, serif;
    text-align: right;
    white-space: nowrap
}

.plan-list dd span {
    display: block;
    font: .8125rem/1.6 sans-serif
}

.reading-steps {
    list-style: none;
    counter-reset: step;
    margin: 0;
    padding: 0
}

.reading-steps li {
    position: relative;
    padding: 0 0 27px 53px;
    margin-bottom: 27px;
    border-bottom: 1px solid #cbd7e3;
    counter-increment: step
}

.reading-steps li:before {
    content: "0" counter(step);
    position: absolute;
    left: 0;
    top: 0;
    color: #5b7a9c;
    font-family: Georgia, serif
}

.reading-steps li:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0
}

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

.faq-list summary {
    font-weight: 500;
    line-height: 1.8;
    padding-right: 10px
}

.faq-list details p {
    font-size: .9375rem
}

.detail-next {
    padding: 80px 0 90px;
    background: #e8eff7;
    text-align: center
}

.detail-next p {
    color: var(--muted)
}

.detail-next .button {
    margin-top: 10px
}

.next-secondary {
    display: table;
    margin: 25px auto 0
}

.about-hero {
    background: #eeeae4
}

.about-hero .editorial {
    align-items: center
}

.about-hero h1 {
    font-family: Georgia, serif;
    font-size: 3rem
}

.about-hero h1 .name-part {
    display: inline-block;
    white-space: nowrap;
}

.name-jp {
    display: block;
    font: 1.1rem/2 sans-serif;
    letter-spacing: .08em;
    margin-top: 12px
}

.identity-note {
    border-left: 1px solid #c6bcb0;
    padding: 25px 0 25px 45px
}

.credential-line {
    font-size: 1.35rem;
    margin-bottom: 5px
}

.identity-note p {
    color: #4e5a65
}

.profile-column {
    display: grid;
    gap: 38px
}

.profile-photo-frame {
    width: min(100%, 360px);
    aspect-ratio: 4 / 5;
    margin: 0;
    overflow: hidden;
    border: 1px solid #d1dbe5;
    background: #e8eff7
}

.profile-photo-frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.experience-list {
    margin: 0;
    padding: 0
}

.experience-list>div {
    padding: 0 0 26px;
    margin-bottom: 26px;
    border-bottom: 1px solid #d1dbe5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px
}

.experience-list dt {
    font-size: .9375rem;
    font-weight: 400;
    line-height: 1.8
}

.experience-list dd {
    white-space: nowrap;
    font-size: 1rem
}

.experience-list b {
    font: 3.3rem Georgia, serif;
    margin-right: 9px
}

.experience-list .experience-current {
    display: block;
    border-bottom: 0
}

.experience-current dd {
    white-space: normal;
    font-size: 1rem;
    color: var(--muted);
    margin-top: 12px
}

.ink-chapter {
    background: #182f4b;
    color: white
}

.ink-chapter p {
    color: #d8e3ef
}

.principles article+article {
    border-top: 1px solid #50657d;
    padding-top: 28px;
    margin-top: 28px
}

.principles h3 {
    color: #fff
}

.credential-details article+article,
.activity-lines article+article {
    border-top: 1px solid #cbd7e3;
    padding-top: 30px;
    margin-top: 30px
}

.team-hero {
    background: #e9f0ef
}

.team-hero h1 {
    font-family: Georgia, serif;
    letter-spacing: 0
}

.team-hero .page-context {
    color: #486a69
}

.team-page .button {
    background: #365c65;
    border-color: #365c65
}

.team-page .button:hover {
    background: #24444c
}

.team-page .text-link {
    color: #365c65
}

.team-tint {
    background: #edf3f2
}

.team-conversation>div {
    padding: 0 0 24px 50px;
    margin-bottom: 24px;
    border-bottom: 1px solid #d1dddc;
    position: relative
}

.team-conversation>div:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: 0
}

.team-conversation span {
    position: absolute;
    left: 0;
    top: 3px;
    font-family: Georgia, serif;
    color: #577e7d
}

.role-lines article+article {
    margin-top: 35px;
    padding-top: 35px;
    border-top: 1px solid #bbcecd
}

.team-consult {
    border-left: 2px solid #a4c0bd;
    padding-left: 40px
}

.team-consult .text-link {
    display: block;
    margin-top: 24px
}

.contact-columns {
    display: grid;
    grid-template-columns: .8fr 1.3fr;
    gap: 80px
}

.contact-price {
    font-size: 1.15rem;
    color: var(--ink) !important
}

.contact-aside-note {
    border-top: 1px solid var(--line);
    padding-top: 30px;
    margin-top: 40px
}

.demo-notice {
    padding: 22px 28px;
    border: 1px solid #c4d1de;
    background: #fff
}

.demo-notice p {
    font-size: .875rem;
    margin: 6px 0 0
}

.contact-page form {
    padding: 30px;
    background: #f0f4f8
}

.field-help {
    font-size: .8125rem;
    margin-top: -8px;
    color: var(--muted)
}

.required-label,
.optional-label {
    font-size: .75rem;
    margin-left: 6px;
    color: #546a81
}

input,
select,
textarea {
    font-size: 16px
}

label {
    font-weight: 500
}

.contact-page .form-result {
    background: white;
    padding: 20px;
    margin-top: 25px;
    font-size: .9375rem
}

.contact-page .form-result[hidden] {
    display: none
}

.privacy-note {
    padding-top: 42px;
    scroll-margin-top: 105px
}

.privacy-note h2 {
    font-family: inherit;
    font-size: 1.2rem
}

.privacy-note p {
    font-size: .875rem
}

.contact-page .detail-hero {
    padding-bottom: 65px
}

.contact-chapter {
    padding-top: 65px
}

@media(max-width:1050px) {
    .editorial {
        gap: 48px
    }

    .contact-columns {
        gap: 45px
    }

    .price-focus {
        padding-left: 30px
    }

    .plan-list {
        font-size: .9375rem
    }

    .plan-list>div {
        gap: 12px
    }

    .plan-list dd {
        font-size: 2rem
    }
}

@media(max-width:760px) {
    .detail-hero {
        padding: 48px 0 52px
    }

    .detail-hero h1 {
        font-size: 2.1rem;
        margin-bottom: 23px;
        overflow-wrap: anywhere
    }

    .intro {
        font-size: 1.05rem
    }

    .intro br,
    .hero-explanation br {
        display: none
    }

    .chapter {
        padding: 60px 0
    }

    .editorial,
    .contact-columns {
        grid-template-columns: 1fr;
        gap: 34px
    }

    .chapter h2,
    .detail-next h2 {
        font-size: 1.55rem;
        margin-bottom: 23px
    }

    .chapter p {
        max-width: none
    }

    .price-focus {
        border-left: 0;
        border-top: 2px solid #b4c6dc;
        padding: 27px 0 0
    }

    .price-focus .large-price {
        font-size: 3.1rem
    }

    .plan-list>div {
        padding: 24px 0
    }

    .plan-list dd {
        font-size: 2.15rem
    }

    .reading-steps li {
        padding-left: 42px
    }

    .detail-next {
        padding: 58px 0 64px;
        text-align: left
    }

    .next-secondary {
        margin: 24px 0 0
    }

    .identity-note {
        padding: 25px 0 0;
        border-left: 0;
        border-top: 1px solid #c6bcb0
    }

    .about-hero h1 {
        font-size: 1.75rem
    }

    .profile-photo-frame {
        width: min(100%, 320px);
        justify-self: center
    }

    .experience-list b {
        font-size: 3rem
    }

    .experience-list>div {
        gap: 14px
    }

    .team-consult {
        border-left: 0;
        border-top: 2px solid #a4c0bd;
        padding: 27px 0 0
    }

    .contact-page .detail-hero {
        padding-bottom: 45px
    }

    .contact-page form {
        padding: 25px 20px
    }

    .demo-notice {
        padding: 20px
    }

    .contact-columns aside .contact-aside-note {
        margin-top: 28px
    }

    .contact-page .button {
        width: 100%;
        font-size: .875rem;
        padding-inline: 14px;
        gap: 10px
    }

    .privacy-note {
        padding-top: 32px
    }
}

@media(max-width:380px) {
    .plan-list dd {
        font-size: 1.8rem
    }

    .plan-list dt {
        font-size: 1rem
    }

    .price-focus .large-price {
        font-size: 2.8rem
    }

    .detail-hero h1 {
        font-size: 1.95rem
    }

    .experience-list dt {
        font-size: .85rem
    }

    .experience-list b {
        font-size: 2.6rem
    }
}

/* The embedded form keeps Google standard controls and notices visible. */
.form-wrap {
    max-width: 850px
}

.contact-copy {
    max-width: 950px
}

.google-form {
    display: block;
    width: 100%;
    height: 1500px;
    border: 0;
    margin-top: 30px
}

.contact-chapter .privacy-note {
    padding-top: 0
}

.contact-chapter .privacy-note p {
    max-width: none
}

.team-hero-copy {
    max-width: 1000px
}

.team-message {
    font-family: var(--serif);
    font-size: clamp(1.6rem, 3vw, 2.5rem);
    line-height: 1.6
}

.team-hero-copy p {
    max-width: 42em
}

@media(max-width:600px) {
    .form-wrap {
        width: 100%;
        padding-inline: 8px
    }

    .form-wrap .privacy-note {
        padding-inline: 16px
    }

    .google-form {
        height: 1800px
    }
}