@charset "utf-8";

/*========= VISUAL ===============*/
.visual .topic {
    font-family: "Shippori Mincho", serif;
    font-weight: 400;
    color: var(--font-white);
}

.visual__topic .TextTyping {
    padding-left: 0.75em;
    line-height: 2;
}

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

    .visual__topic .TextTyping {
        padding-left: 0.4em;
    }
} /* VISUAL SP 768px */

@media screen and (max-width: 480px){
    .visual .topic {
        font-size: 2.8rem;
    }

} /* VISUAL SP 480px */

@media screen and (max-width: 375px){
    .visual .topic {
        font-size: 2.2rem;
    }

} /* VISUAL SP 375px */

/*========= CONCEPT ===============*/
.topic {
    color: var(--main-blue);
}

.section--concept .title {
    max-width: 237px;
}

.concept__contents {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 4em 0 0;
}

.conceptImg {
    width: 30%;
}

.concept__topic {
    margin-left: 7em;
}

.concept__txt {
    font-size: 2rem;
    color: var(--main-blue);
}

/*****  CONCEPT SP *****/
@media screen and (max-width: 1120px){
    .concept__contents {
        margin: 2em 0 0;
    }

    .concept__topic {
        margin-left: 3em;
    }
    
} /* CONCEPT SP 1120px */

@media screen and (max-width: 768px){
    .concept__contents,
    .conceptImg {
        display: block;
        margin: 3em auto 0;
    }

    .concept__topic {
        margin-left: 0;
    }

    .concept__txt {
        font-size: 1.8rem;
    }
    
} /* CONCEPT SP 768px */

@media screen and (max-width: 480px){
    .concept__txt {
        font-size: 1.6rem;
    }

} /* CONCEPT SP 480px */

@media screen and (max-width: 320px){
    .concept__txt {
        font-size: 1.4rem;
    }

} /* CONCEPT SP 320px */

/*========= VISION ===============*/
.section--vision {
    width: 100vw;
    padding: 10% 7% 7%;
    position: relative;
    background: url(../images/vision-bg.webp) center center / cover no-repeat;
    min-height: 600px;
}

.vision__contents {
    position: relative;
    z-index: 10;
}

.section--vision .title {
    max-width: 196px;
}

.ruby--color {
    color: var(--font-white);
}

.vision__topic,
.message__topic {
    margin-top: 4em;
    color: var(--font-white);
}

.vision__txt {
    color: var(--main-blue);
    font-size: 2.8rem;
    font-weight: 700;
}

/*****  VISION SP *****/
@media screen and (max-width: 768px){
    .section--vision {
        min-height: 400px;
        padding: 10% 7%;
    }

    .section--vision .title {
        margin: 0;
        max-width: 120px;
    }

    .vision__txt,
    .ft32 {
        font-size: 2rem;
    }
    
} /* VISION SP 768px */

@media screen and (max-width: 480px){
    .section--vision .title {
        margin: 0 auto;
    }

    .vision__topic, .message__topic {
        margin-top: 2em;
    }

    .vision__txt,
    .ft32 {
        font-size: 1.8rem;
    }
    
} /* VISION SP 480px */

/*========= VISION02 ===============*/
#vision02 {
    margin-top: 0;
}

.section--vision02 {
    position: relative;
    padding: 0 3%;
}

.section--vision02::after {
    content: '';
    position: absolute;
    width: 80%;
    height: 21em;
    background: var(--main-blue);
    top: 14%;
    left: 10%;
    z-index: -1;
}

.vision02__list {
    display: flex;
    justify-content: center;
}

.vision02__item {
    padding: 0 1em 1em;
    width: 45%;
    background: var(--font-white);
    box-shadow: 0 0 12px #ccc;
    margin: 0.5em;
}

.vision02__txt {
    color: var(--main-blue);
    margin-top: 1.5em;
    line-height: 1.8;
}

/*****  VISION02 SP *****/
@media screen and (max-width: 1200px){
    .ft20,
    .ft17 {
        font-size: 1.6rem;
    }

    .vision02__item {
        padding: 0 0.8em 1em;
    }

    .vision02__item p {
        font-size: 1.4rem;
    }
    
} /* VISION02 SP 1200px */

@media screen and (max-width: 1080px){
    .vision02__list {
        flex-wrap: wrap;
    }

    .vision02__item {
        padding: 0 1.5em 1.5em;
    }
} /* VISION02 SP 1080px */

@media screen and (max-width: 540px){
    .vision02__list {
        display: block;
    }

    .vision02__item {
        width: 70%;
        margin: 0 auto;
    }

    .section--vision02::after {
        top: 3%;
        height: 94%;
    }

    .vision02__txt {
        padding-top: 1em;
        margin-top: 1em;
    }
} /* VISION02 SP 540px */

@media screen and (max-width: 375px){
    .vision02__item {
        width: 75%;
        padding: 0 1em 1em;
    }

    .vision02__txt {
        font-size: 1.4rem;
    }

    .vision02__item p {
        font-size: 1.2rem;
    }
} /* VISION02 SP 375px */

/*========= MISSION ===============*/
.section--mission,
.section--company {
    text-align: center;
}

.mission__topic {
    margin-top: 2em;
}

.mission__txt {
    font-size: 2.4rem;
}

.cl {
    color: var(--main-blue);
    font-size: 3.2rem;
}

.spBr {
    display: none;
}

.mission__contents {
    width: 50%;
    text-align: left;
    margin: 2em auto 0;
}

/*****  MISSION SP *****/
@media screen and (max-width: 1024px){
    .mission__txt {
        font-size: 1.6rem;
        line-height: 1.6;
    }
    .cl {
        font-size: 2rem;
    }
    
    .mission__contents {
        font-size: 1.4rem;
    }
} /* MISSION SP 1024px */

@media screen and (max-width: 768px){
    .spBr {
        display: block;
    }

    .pcBr {
        display: none;
    }

    .mission__contents {
        width: 60%;
    }
} /* MISSION SP 768px */

@media screen and (max-width: 480px){
    .mission__contents {
        width: 75%;
    }
} /* MISSION SP 480px */

/*========= MESSAGE ===============*/
.section--message {
    position: relative;
    padding: 10% 7% 7%;
    background-color: #222;
    background: url(../images/messagevisual.webp) top / cover;
}

#message .title {
    max-width: 276px;
}

#message .topic {
    color: var(--accent);
}

.message__txt {
    color: var(--accent);
    font-size: 2.8rem;
}

#message .bgLRextend::before {
    background-color: var(--accent);
}

.message__contents {
    max-width: 59%;
}

.message__name {
    font-size: 2.4rem;
    line-height: 1.5;
}

/*****  MESSAGE SP *****/
@media screen and (max-width: 1200px){
    .section--message {
        background: url(../images/messagevisual_tb.webp) center / cover;
    }

    .message__txt {
        font-size: 2rem;
        line-height: 2;
    }
    
}/* MESSAGE SP 1200px */

@media screen and (max-width: 1024px){
    .message__contents {
        max-width: 68%;
    }
} /* MESSAGE SP 1024px */

@media screen and (max-width: 920px){
    .message__contents {
        max-width: 79%;
    }

    .message__name {
        font-size: 1.6rem;
    }
} /* MESSAGE SP 920px */

@media screen and (max-width: 640px){
    .section--message {
        background: url(../images/messagevisual_sp.webp) center / cover;
    }

    .message__contents {
        max-width: 68%;
    }

} /* MESSAGE SP 640px */

@media screen and (max-width: 480px){
    .message__contents {
        max-width: 80%;
    }
} /* MESSAGE SP 480px */

/*========= COMPANY ===============*/
.company__contents {
    width: 100%;
    width: 50%;
    margin: 4em 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 */