@charset "UTF-8";

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

.page-heading--about {
    background-image: url("../images/about/head_bg_about.webp");
}

.page-heading--business {
    background-image: url("../images/about/head_bg_business.webp");
}

.page-heading--productionenvironment {
    background-image: url("../images/about/head_bg_productionenvironment.webp");
}

.page-heading--business h1 {
    color: var(--color-text-inverse);
    font-size: 3rem; /* 48px */
    font-weight: 700;
}

.about-anchor__list {
    display: flex;
    justify-content: center;
    padding-block: 10vh;
}

.about-anchor__list li {
    padding-inline: var(--space-xs);
}

.about-anchor__list a {
    display: block;
}

.about-section {
    padding-block: 10vh;
    text-align: center;
    scroll-margin-block-start: var(--space-xl);
}

.about-section h2 {
    padding-block-end: 5vh;
}

.about-section h3 {
    margin-block-end: var(--space-xl);
    color: var(--color-text-inverse);
    font-size: 1.5rem; /* 24px */
    font-weight: 700;
}

.about-section > p {
    margin-block-end: var(--space-lg);
    color: var(--color-text-inverse);
}

.about-concept .about-section__image {
    padding-block-end: var(--space-xl);
}

.about-concept img {
    margin-inline: auto;
}

.about-concept > p:last-of-type {
    margin-block-end: 0;
}

.about-company__inner {
    display: flex;
    justify-content: space-evenly;
}

.about-company__content {
    width: 50%;
    color: var(--color-text-inverse);
}

.about-company table {
    width: 100%;
    margin-block: 5vh;
}

.about-company tr {
    border-bottom: 1px solid var(--color-primary);
}

.about-company tr:last-of-type {
    border-bottom: 0;
}

.about-company th,
.about-company td {
    padding-block: var(--space-md);
}

.about-company th {
    width: 8rem; /* 128px */
    color: var(--color-text-muted);
}

.about-company td {
    text-align: start;
}

.about-message {
    padding-block-end: 20vh;
}

.about-message__heading {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-block-end: 5vh;
}

.about-message__heading h2 {
    padding-block-end: 0;
}

.about-message__heading img {
    margin-inline: 3.5vw;
}

/* Business */
.business-content {
    padding-block: 10vh;
    text-align: center;
}

.business-content > h2 {
    padding-block-end: var(--space-2xl);
}

.business-content > h2 img {
    margin-inline: auto;
}

.business-content > p {
    padding-block-end: var(--space-lg);
    color: var(--color-text-inverse);
}

.business-feature {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    margin-block-end: 20vh;
    padding-block: 5vh;
}

.business-feature:nth-of-type(even) {
    flex-direction: column-reverse;
}

.business-feature:last-of-type {
    margin-block-end: 30vh;
}

.business-feature__text {
    position: absolute;
    inset-block-start: 40vh;
    inset-inline-end: 10vw;
    z-index: 3;
    width: 25vw;
    padding: var(--space-xl);
    color: var(--color-text-inverse);
    background: var(--color-header-bg);
    text-align: start;
}

.business-feature:nth-of-type(even) .business-feature__text {
    inset-inline: 10vw auto;
}

.business-feature__text h3 {
    padding-block-end: var(--space-md);
    color: var(--color-text-inverse);
    font-size: 1.5rem; /* 24px */
    font-weight: 700;
}

.business-feature__text h3 span {
    font-size: 0.875rem; /* 14px */
}

.business-feature__text p {
    color: var(--color-text-inverse);
}

/* Production environment */
.productionenvironment-section {
    padding-block: 10vh;
    color: var(--color-text-inverse);
    text-align: center;
}

.productionenvironment-section--second {
    padding-block-start: 0;
}

.productionenvironment-section h2 {
    padding-block-end: var(--space-2xl);
}

.productionenvironment-section h2 img {
    margin-inline: auto;
}

.productionenvironment-section > p {
    padding-block-end: var(--space-lg);
    color: var(--color-text-inverse);
}

.productionenvironment-section__link {
    padding-block-end: 0 !important;
}

.productionenvironment-section__link a {
    color: var(--color-primary);
    font-weight: 700;
    text-decoration: underline;
}

.productionenvironment-section__link a::after {
    display: inline-block;
    width: 1rem; /* 16px */
    height: 1.2rem; /* 19.2px */
    margin-block: var(--space-md);
    margin-inline-start: var(--space-md);
    background-image: url("../images/common/ttl_logo_pink.webp");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
    content: "";
}

.productionenvironment-gallery {
    margin-block: 5vh;
}

.productionenvironment-gallery li {
    margin-block: var(--space-xl);
}

.productionenvironment-gallery img {
    margin-inline: auto;
}

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

    .page-heading--business h1 {
        font-size: clamp(2rem, 8vw, 3rem);
    }

    .about-anchor {
        width: 100%;
        padding-inline: 0;
    }

    .about-anchor__list {
        padding-block: 5vh;
    }

    .about-section {
        padding-block: 5vh;
    }

    .about-section h2 img {
        width: 60%;
        margin-inline: auto;
    }

    .about-section h3 {
        font-size: clamp(1rem, 4.5vw, 1.5rem);
    }

    .about-company__inner {
        flex-direction: column;
    }

    .about-company__inner > .about-section__image img,
    .about-message__heading .about-section__image img {
        width: 70%;
        margin-inline: auto;
    }

    .about-company__content {
        width: 100%;
    }

    .about-company__content h2 {
        padding-block-end: 0;
    }

    .about-message {
        padding-block-end: 10vh;
    }

    .about-message__heading {
        flex-direction: column-reverse;
    }

    .business-content > h2 img {
        width: 70%;
    }

    .business-feature__text {
        inset-block-start: 25vh;
        inset-inline-end: -1vw;
        width: 80vw;
        padding: var(--space-md);
    }

    .business-feature:nth-of-type(even) .business-feature__text {
        inset-inline: -1vw auto;
    }

    .productionenvironment-section__music img {
        width: 70%;
    }

    .productionenvironment-section__motion img {
        width: 90%;
    }
}