/* ========================================
   COMPANY PAGE
======================================== */

.company-page {
    background: #fff;
    overflow: hidden;
}


/* ========================================
   HERO
======================================== */

.company-hero {
    position: relative;

    min-height: 65vh;

    padding:
        130px
        max(6vw, 30px)
        100px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    border-bottom: 1px solid #d8d8d8;
}

.company-index {
    position: absolute;

    top: 80px;
    right: max(6vw, 30px);

    margin: 0;

    font-size: 13px;
    letter-spacing: .15em;
}

.company-hero h1 {
    margin: 0;

    font-size: clamp(72px, 12vw, 170px);
    line-height: .85;

    font-weight: 700;
    letter-spacing: -.06em;
}

.company-jp {
    margin: 20px 0 0;

    font-size: 16px;
    letter-spacing: .15em;
}

.company-tagline {
    max-width: 750px;

    margin: 65px 0 0;

    font-size: clamp(26px, 3.5vw, 50px);
    line-height: 1.25;

    letter-spacing: -.025em;
}


/* ========================================
   COMMON SECTION
======================================== */

.company-about,
.company-purpose,
.company-business,
.company-profile,
.company-next {
    padding:
        130px
        max(6vw, 30px);
}


/* ========================================
   ABOUT
======================================== */

.company-about {
    background: #fff;
}

.company-about h2 {
    margin: 15px 0 0;

    font-size: clamp(34px, 4vw, 56px);
    line-height: 1;

    letter-spacing: -.04em;
}

.company-about-heading {
    max-width: 900px;

    margin: 0;

    font-size: clamp(32px, 4.5vw, 64px);
    line-height: 1.15;

    letter-spacing: -.035em;
}

.company-about-text {
    max-width: 680px;

    margin-top: 45px;

    font-size: 17px;
    line-height: 1.9;
}

.section-index {
    margin: 0;

    font-size: 12px;
    letter-spacing: .15em;
}


/* ========================================
   PURPOSE
======================================== */



.company-purpose > p:first-child {
    margin: 0 0 55px;

    font-size: 12px;
    letter-spacing: .15em;
}

.company-purpose h2 {
    max-width: 1100px;

    margin: 0;

    font-size: clamp(45px, 7vw, 100px);
    line-height: .98;

    letter-spacing: -.055em;
}

.company-purpose > p:last-child {
    max-width: 650px;

    margin: 55px 0 0 auto;

    font-size: 17px;
    line-height: 1.9;
}


/* ========================================
   SECTION HEADINGS
======================================== */

.company-section-heading {
    margin-bottom: 75px;
}

.company-section-heading > p:first-child {
    margin: 0 0 10px;

    font-size: 12px;
    letter-spacing: .15em;
}

.company-section-heading h2 {
    margin: 0;

    font-size: clamp(42px, 6vw, 80px);
    line-height: 1;

    letter-spacing: -.045em;
}

.company-section-heading h2 + p {
    margin: 14px 0 0;

    font-size: 14px;
    letter-spacing: .1em;
}


/* ========================================
   BUSINESS
======================================== */

.company-business-row {
    display: grid;

    grid-template-columns:
        70px
        minmax(240px, 360px)
        minmax(0, 1fr);

    align-items: center;

    gap: 30px;

    padding: 38px 0;

    border-top: 1px solid #d8d8d8;
}

.company-business-row:last-child {
    border-bottom: 1px solid #d8d8d8;
}

.company-business-row > p:first-child {
    margin: 0;

    font-size: 12px;
    letter-spacing: .15em;
}

.company-business-row h3 {
    margin: 0;

    font-size: clamp(24px, 3vw, 42px);
    line-height: 1;

    letter-spacing: -.035em;
}

.company-business-row > p:last-child {
    max-width: 620px;

    margin: 0;

    font-size: 15px;
    line-height: 1.75;
}


/* ========================================
   COMPANY PROFILE
======================================== */



.company-profile-table {
    max-width: 1000px;
}

.company-profile-row {
    display: grid;

    grid-template-columns:
        minmax(160px, 260px)
        minmax(0, 1fr);

    gap: 40px;

    padding: 28px 0;

    border-top: 1px solid #ccc;
}

.company-profile-row:last-child {
    border-bottom: 1px solid #ccc;
}

.company-profile-row p {
    margin: 0;

    font-size: 15px;
    line-height: 1.75;
}

.company-profile-row > p:first-child {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
}


/* ========================================
   PRINCIPLE
======================================== */

.company-principle {
    position: relative;

    min-height: 650px;

    padding:
        160px
        max(6vw, 30px);

    display: flex;
    flex-direction: column;
    justify-content: center;

    overflow: hidden;


}

.company-principle > *:not(.company-principle-bg) {
    position: relative;
    z-index: 2;
}

.company-principle > p:first-of-type:not(.company-principle-bg) {
    font-size: 12px;
    letter-spacing: .15em;
}

.company-principle h2 {
    max-width: 1000px;

    margin: 45px 0 35px;

    font-size: clamp(52px, 8vw, 115px);
    line-height: .92;

    letter-spacing: -.055em;
}

.company-principle > p:last-child {
    max-width: 650px;

    font-size: 17px;
    line-height: 1.85;
}

.company-principle-bg {
    position: absolute;

    left: -2vw;
    bottom: -.22em;

    margin: 0;

    font-size: clamp(150px, 23vw, 400px);
    line-height: 1;

    font-weight: 700;
    letter-spacing: -.08em;

    opacity: .04;

    white-space: nowrap;

    pointer-events: none;
}


/* ========================================
   NEXT
======================================== */

.company-next > p:first-child {
    margin: 0 0 50px;

    font-size: 12px;
    font-weight: 600;
    letter-spacing: .15em;
}

.company-next-link {
    padding: 30px 0;

    border-top: 1px solid #ccc;

    transition:
        padding-left .25s ease;
}

.company-next-link:last-child {
    border-bottom: 1px solid #ccc;
}

.company-next-link h3 {
    margin: 0;

    font-size: clamp(32px, 4vw, 60px);

    letter-spacing: -.035em;
}

.company-next-link a {
    color: inherit;
    text-decoration: none;
}

.company-next-link:hover {
    padding-left: 25px;
}


/* ========================================
   MOBILE
======================================== */

@media (max-width: 781px) {

    .company-hero {
        min-height: 560px;

        padding-top: 110px;
        padding-bottom: 75px;
    }

    .company-index {
        top: 50px;
    }

    .company-tagline {
        margin-top: 45px;
    }


    .company-about,
    .company-purpose,
    .company-business,
    .company-profile,
    .company-next {
        padding-top: 90px;
        padding-bottom: 90px;
    }


    .company-about .wp-block-columns {
        gap: 55px;
    }


    .company-purpose > p:last-child {
        margin-left: 0;
    }


    .company-business-row {
        grid-template-columns:
            40px
            1fr;

        gap: 10px 20px;

        padding: 30px 0;
    }

    .company-business-row > p:last-child {
        grid-column: 2;

        margin-top: 8px;
    }


    .company-profile-row {
        grid-template-columns: 1fr;

        gap: 10px;

        padding: 23px 0;
    }


    .company-principle {
        min-height: 570px;

        padding-top: 110px;
        padding-bottom: 110px;
    }

}