/*
Usage:
    <hgroup class="sectionTitle">
        <p class="sectionTitle__en">EN Title</p>
        <h2 class="sectionTitle__ja">
            <span class="sectionTitle__square sectionTitle__square--orange"></span>
            <span>JA Title</span>
        </h2>
    </hgroup>
*/

.sectionTitle {
    display: inline-grid;
    font-weight: 600;
    row-gap: 1.25rem;
}

.sectionTitle--white {
    color: var(--color-text-white);
}

.sectionTitle__en {
    color: var(--color-orange);
    font-family: var(--font-inter);
    font-size: 2.25rem;
    font-weight: 600;
    letter-spacing: 0em;
    line-height: 0.9;
}

.sectionTitle--white .sectionTitle__en {
    color: var(--color-text-white);
}

.sectionTitle__ja {
    align-items: center;
    display: grid;
    font-family: var(--font-ibm);
    font-size: 1.125rem;
    gap: 0.5rem;
    grid-template-columns: auto 1fr;
    letter-spacing: 0.06em;
    line-height: 1;
}

.sectionTitle__square {
    aspect-ratio: 1;
    content: "";
    display: inline-block;
    margin-bottom: 0.125rem;
    width: 0.375rem;
}

.sectionTitle__square--orange {
    background-color: var(--color-orange);
}

.sectionTitle__square--white {
    background-color: var(--color-text-white);
}

@media (max-width: 48rem) {
    .sectionTitle {
        row-gap: 0.75rem;
    }

    .sectionTitle__en {
        font-size: 1.75rem;
    }

    .sectionTitle__ja {
        font-size: 0.875rem;
    }
}