@charset "utf-8";

:root {
    /* color */
    --purple: #C700FF;
    --orange: #FF6932;
    --blue: #8232FF;
    --white: #F0F0F0;
    --dark: #323232;

    /* font family */
    --en: "trade-gothic-next-compressed", sans-serif;

    /* font size */
    --font10: 0.625rem;
    --font12: 0.75rem;
    --font14: 0.875rem;
    --font18: 1.125rem;
    --font20: 1.25rem;
    --font22: 1.375rem;
    --font24: 1.5rem;
    --font26: 1.625rem;
    --font28: 1.75rem;
    --font30: 1.875rem;
    --font32: 2.0rem;
    --font34: 2.125rem;
    --font36: 2.25rem;
    --font38: 2.375rem;
    --font40: 2.5rem;
    --font42: 2.625rem;
    --font44: 2.75rem;
    --font46: 2.875rem;
    --font48: 3.0rem;
    --font50: 3.125rem;
    --font56: 3.5rem;
    --font76: 4.75rem;
    --font80: 5.0rem;
    --font112: 7.0rem;
    --font160: 10.0rem;

    /* width */
    --width10: 0.6803vw;
    --width20: 1.3605vw;
    --width30: 2.0408vw;
    --width40: 2.7211vw;
    --width50: 3.4014vw;
    --width60: 4.0816vw;
    --width70: 4.7619vw;
    --width80: 5.4422vw;
    --width90: 6.1224vw;
    --width100: 6.8027vw;
    --width110: 7.483vw;
    --width120: 8.1633vw;
    --width130: 8.8435vw;
    --width140: 9.5238vw;
    --width150: 10.2041vw;
    --width160: 10.8844vw;
    --width170: 11.5646vw;
    --width180: 12.2449vw;
    --width190: 12.9252vw;
    --width200: 13.6054vw;
}

/* about top --------------------------------------------------------------------------- */

.about_top {
    padding: var(--width80) 0 0;
}

.about_top .section_title{
    margin-bottom: var(--width80);
}

.about_content h3{
    color: var(--purple);
    font-size: var(--font42);
    font-weight: 700;
    text-align: center;
    margin-bottom: var(--width60);
}

.about_content h3:nth-child(3){
    margin-top: var(--width80);
    margin-bottom: var(--width60);
}

.about_content p{
    font-size: var(--font26);
    font-weight: 500;
    line-height: 2.4;
    text-align: center;
}


/* business --------------------------------------------------------------------------- */

.business{
    padding: var(--width150) 0;
}

.business h2{
    font-size: var(--font40);
    font-weight: 600;
    text-align: center;
    margin-bottom: var(--width40);
}

.business_content{
    display: grid;
    grid-template-columns: 1fr 84.31vw 1fr;
    row-gap: var(--width30);
}

.business_item{
    display: flex;
    align-items: center;
    gap: var(--width40);
}

.business_item_left{
    grid-column: 1/3;
}

.business_item_right{
    grid-column: 2/4;
    flex-flow: row-reverse;
}

.business_img{
    flex: 0.85;
}

.business_text{
    flex: 1;
    font-size: var(--font18);
    font-weight: 500;
}

.business_title {
    font-size: var(--font30);
    font-weight: 600;
    margin-bottom: var(--width40);
}

.business_title h3::after {
    content: "";
    display: block;
    width: 0%;
    height: 2px;
    background: var(--purple);
    transition: width 1s ease-in-out;
}

.business_title.show h3::after {
    width: 100%;
}





/* responsive --------------------------------------------------------------------------- */

@media (max-width: 767px) {

    :root {
        --width10: 2.564vw;
        --width20: 5.128vw;
        --width30: 7.692vw;
        --width40: 10.256vw;
        --width50: 12.821vw;
        --width60: 15.385vw;
        --width70: 17.949vw;
        --width80: 20.513vw;
        --width90: 23.077vw;
        --width100: 25.641vw;
        --width110: 28.205vw;
        --width120: 30.769vw;
        --width130: 33.333vw;
        --width140: 35.897vw;
        --width150: 38.462vw;
        --width160: 41.026vw;
        --width170: 43.590vw;
        --width180: 46.154vw;
        --width190: 48.718vw;
        --width200: 51.282vw;
    }

    /* about top --------------------------------------------------------------------------- */

    .about_top {
        padding: var(--width110) 0 0;
    }

    .about_top .section_title{
        margin-bottom: var(--width50);
    }

    .about_content h3{
        font-size: var(--font20);
        margin-bottom: var(--width30);
        text-align: left;
    }

    .about_content h3:nth-child(3){
        margin-top: var(--width50);
        margin-bottom: var(--width30);
    }

    .about_content p{
        font-size: var(--font16);
        text-align: left;
    }


    /* business --------------------------------------------------------------------------- */

    .business{
        padding: var(--width50) 0 var(--width100);
    }

    .business h2{
        font-size: var(--font24);
    }

    .business_content{
        grid-template-columns: 1fr 90vw 1fr;
        row-gap: var(--width60);
    }

    .business_item{
        flex-flow: column;
        gap: var(--width30);
    }

    .business_img{
        flex: 1;
    }

    .business_item_left .business_img{
        margin-right: var(--width40);
    }

    .business_item_right .business_img{
        margin-left: var(--width40);
    }

    .business_item_left .business_text{
        margin-left: 5vw;
    }

    .business_item_right .business_text{
        margin-right: 5vw;
    }

    .business_text{
        font-size: 1rem;
    }

    .business_title{
        font-size: var(--font20);
        margin-bottom: var(--width30);
    }

    .business_title h3::after{
        margin-top: var(--width10);
    }
}