@charset "UTF-8";

.other-page {
    color: var(--color-text-inverse);
    background: var(--color-header-bg);
}

.page-heading--contact {
    background-image: url("../images/other/head_bg_contact.webp");
}

.page-heading--pp {
    background-image: url("../images/other/head_bg_pp.webp");
}

.contact-page__content {
    padding-block: 15vh;
}

.contact-page__lead {
    margin-block-end: 10vh;
    color: var(--color-text-inverse);
}

.contact-form {
    width: 100%;
}

.contact-form tr {
    font-size: 1.125rem; /* 18px */
}

.contact-form th,
.contact-form td {
    display: block;
    width: 100%;
}

.contact-form th {
    padding-block-end: var(--space-xs);
    color: var(--color-text-inverse);
    font-size: 1.25rem; /* 20px */
    font-weight: 700;
    text-align: left;
}

.contact-form td {
    padding-block-end: var(--space-2xl);
}

.contact-form__required {
    margin-inline: var(--space-xs);
    color: var(--color-primary);
    font-size: 0.875rem; /* 14px */
}

.contact-form input,
.contact-form select,
.contact-form textarea {
    width: 100%;
    padding: var(--space-md) var(--space-xs);
    border: 0;
    color: var(--color-text);
    background: var(--color-surface);
    font-size: .9rem;
}

.contact-form textarea {
    resize: vertical;
}

.contact-page__note {
    margin-block-end: var(--space-lg);
    color: var(--color-text-inverse);
    font-size: 0.875rem; /* 14px */
}

.contact-page__note a {
    color: var(--color-text-inverse);
    text-decoration: underline;
}

.contact-page__submit {
    margin-block: 5vh;
}

/* Privacy Policy */
.pp-anchor__list {
    display: flex;
    justify-content: center;
    padding-block: 10vh;
}

.pp-anchor__list li {
    display: flex;
    align-items: center;
}

.pp-anchor__list li::before,
.pp-anchor__list li:last-child::after {
    margin-inline: var(--space-xs);
    color: var(--color-text-inverse);
    content: "|";
}

.pp-anchor__list a {
    color: var(--color-text-inverse);
    text-decoration: none;
}

.pp-section {
    padding-block-end: 20vh;
    color: var(--color-text-inverse);
    text-align: start;
    scroll-margin-block-start: var(--space-xl);
}

.pp-section > h2 {
    margin-block-end: var(--space-xl);
    font-size: 2.25rem; /* 36px */
    font-weight: 700;
}

.pp-section > h2::before {
    display: inline-block;
    width: 1.2rem;
    height: 1.5rem;
    margin-inline-end: var(--space-sm);
    background-image: url("../images/common/ttl_logo_pink.webp");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    vertical-align: middle;
    content: "";
}

.pp-section h3 {
    margin-block-end: var(--space-xl);
    padding-block-end: var(--space-xs);
    border-bottom: 1px solid var(--color-primary);
    font-size: 1.5rem; /* 24px */
    font-weight: 700;
}

.pp-section p {
    padding-block-end: var(--space-xl);
    color: var(--color-text-inverse);
}

.pp-section div > p:last-child {
    margin-block-end: 5rem; /* 80px */
}

.pp-section__emphasis {
    color: var(--color-primary);
    font-weight: 700;
}

.pp-section__align-right {
    text-align: end;
}

@media (max-width: 768px) {
    .page-heading--contact h1 img {
        width: 50vw;
    }

    .contact-page__content {
        padding-block: 5vh;
    }

    .pp-anchor__list {
        flex-wrap: wrap;
        justify-content: flex-start;
        padding-block: 5vh;
    }

    .pp-anchor__list li {
        margin-block: var(--space-2xs);
    }

    .pp-section {
        padding-block-end: 10vh;
    }

    .pp-section > h2 {
        font-size: clamp(1.5rem, 7vw, 2.25rem);
    }

    .pp-section h3 {
        font-size: clamp(1.125rem, 5vw, 1.5rem);
    }

    .pp-section p {
        padding-block-end: var(--space-lg);
    }

    .pp-section div > p:last-child {
        margin-block-end: var(--space-2xl);
    }
}