@charset "utf-8";

main {
    color: var(--font-black);
}

.topic {
    line-height: 1;
}

#concept .ruby,
#company .ruby  {
    font-size: clamp(1.2rem, 1.39vw, 2rem);
    color: var(--font-white);
}

#concept .bgLRextend::before,
#company .bgLRextend::before {
    background: var(--main-purpleLow);
}

/*========= VISUAL ===============*/
.visual {
    background: url(../images/companyvisual.webp) center / cover;
}

/* VISUAL SP */
@media (max-width: 768px) {
    .visual {
    background: url(../images/companyvisual_sp.webp) center / cover;
}
} /* VISUAL SP 768px */

@media (max-width: 480px) {
    .visual {
    background: url(../images/companyvisual_sp02.webp) center / cover;
}
} /* VISUAL SP 480px */

/*========= CONCEPT ===============*/
.concept__topic,
.concept__text {
    width: clamp(90%, 85%, 80%);
    margin: clamp(5rem, 6.94vw, 10rem) auto;
}

.concept__sign {
    display: flex;
    align-items: flex-start;
    position: relative;
    min-height: 950px;
    width: 90%;
    margin: clamp(5rem, 6.94vw, 10rem) 7% 0;
}

.concept__image {
    position: relative;
    width: 400px; 
    height: 250px; 
}

.conceptImg01 {
    position: absolute;
    top: 328px;
    left: 218px;
    z-index: 1;
}

.conceptImg02 {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    opacity: 0.9;
}

.concept__signImg {
    position: absolute;
    right: 0;
    top: 0;
    display: inline-block;
    width: 28vw;
}

/* CONCEPT SP */
@media (max-width: 1160px) {
    .concept__image {
        width: 30vw;
    }
} /* CONCEPT SP 1160px */

@media (max-width: 900px) {
    .concept__sign {
        width: 80%;
        margin: clamp(4rem, 6.94vw, 10rem) auto 0;
    }

    .concept__image,
    .concept__signImg {
        width: 25vw;
    }

    .conceptImg01 {
        top: 120px;
        left: 132px;
    }
} /* CONCEPT SP 900px */

@media (max-width: 640px) {
    .conceptImg01 {
        top: 100px;
        left: 98px;
    }
} /* CONCEPT SP 640px */

@media (max-width: 480px) {
    .conceptImg01 {
        top: 160px;
        left: 48px;
    }

    .concept__image,
    .concept__signImg {
        width: 30vw;
    }
} /* CONCEPT SP 480px */

@media (max-width: 425px) {
    .concept__sign {
        width: 85%;
        min-height: initial;
    }

    .conceptImg01 {
        display: none;
    }

    .concept__image {
        width: 40vw;
    }

    .concept__signImg {
        width: 27vw;
    }
} /* CONCEPT SP 425px */


/*========= COMPANY ===============*/
.company__contents {
    font-family: 'Noto Sans JP', 'Roboto', sans-serif;
    font-size: 1.6rem;
}

.company__contents {
    width: 70%;
    margin: clamp(3rem, 4.17vw, 6rem) auto 0;
}

.company__item {
    display: flex;
    border-bottom: 1px solid rgba(var(--font-black-rgb), 0.3);
    padding: 3em 0;
}

.company__item:last-child {
    border-bottom: none;
}

.company__label {
    flex: 0 0 16em;
    text-align: left;
    line-height: 2;
}

.company__text {
    flex: 1;
    line-height: 2;
    text-align: left;
}

/*****  COMPANY SP *****/
@media screen and (max-width: 1024px) {
    .company__contents {
        width: 65%;
    }

    .company__label {
        flex: 0 0 11em;
    }
} /* COMPANY SP 1024px */

@media screen and (max-width: 768px) {
    .company__contents {
        margin: 2em auto 0;
    }

    .company__item {
        flex-direction: column;
        padding: 2em 0;
    }
    
    .company__label {
        flex: none;
        margin-bottom: 0.5em;
        font-size: 1.4rem;
    }
    
    .company__text {
        font-size: 1.4rem;
    }
} /* COMPANY SP 768px */

@media screen and (max-width: 480px) {
    .company__contents {
        width: 80%;
    }
    
    .company__label {
        font-size: 1.3rem;
    }
    
    .company__text {
        font-size: 1.2rem;
        line-height: 1.5;
    }
} /* COMPANY SP 480px */

/*========= FOOTER ===============*/
.footer {
    background: url(../images/footer02.webp) center / cover;
}

/* FOOTER SP */
@media screen and (max-width: 768px){
    .footer {
        background: url(../images/footer02_sp.webp) center / cover;
    }
}

@media screen and (max-width: 540px){
    .footer {
        background: url(../images/footer02_sp02.webp) center / cover;
    }
}