@charset "UTF-8";

/* ==========================
header
============================= */

.mainvisual {
    content: "";
    background-image: url(../images/mainvisual_mission.jpg);
    background-position: 54%;
    background-repeat: no-repeat;
    background-size: cover;
    height: 118vw;
    position: relative;
    margin-top: calc(10 * (100vw/1440));
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    /* これはcommon化してない */
}

/* ==========================
pc
============================= */
@media screen and (min-width:769px) {
    .mainvisual {
        background-image: url(../images/mainvisual_mission.jpg);
        height: calc(561 * (100vw/1440));
        margin-top: calc(8 * (100vw/1440));
    }

    .maintxt {
        width: calc(563 * (100vw/1440));
        font-size: calc(48 * (100vw/1440));
    }
}

/* ==========================
message
============================= */

.message_container {
    padding: 8% calc(17 * (100vw/375)) 32% calc(17 * (100vw/375));
    position: relative;
}

.message_container::after {
    content: "";
    background-image: url(../images/mission_decoration2.svg);
    background-repeat: no-repeat;
    background-size: contain;
    width: calc(117 * (100vw/375));
    height: calc(117 * (100vw/375));
    position: absolute;
    top: calc(30 * (100vw/375));
    right: calc(13 * (100vw/375));
}

.message_container::before {
    /* content: ""; */
    background-image: url(../images/mission_decoration3_animated.svg);
    background-repeat: no-repeat;
    background-size: contain;
    width: 37vw;
    height: 16vw;
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 1;
}

.topic_business {
    position: relative;
}

.topic_eng {
    color: var(--primary-bluetxt);
    font-size: calc(17 * (100vw/375));
    line-height: normal;
}

.topic_txt {
    color: var(--primary-bluetxt);
    font-size: calc(22 * (100vw/375));
    font-weight: 700;
    line-height: normal;
    letter-spacing: calc(1.76 * (100vw/375));
    position: relative;
}

.topic_txts {
    font-size: calc(15 * (100vw/375));
    line-height: normal;
    margin-top: calc(15 * (100vw/375));
}

.topic_txts:first-of-type {
    margin-top: calc(24 * (100vw/375));
}

.topic_txts_group {
    position: relative;
}

/* ==========================
pc
============================= */

@media screen and (min-width:769px) {

    .message_container::before {
        display: none;
    }

    .message {
        position: relative;
    }

    .message::before {
        position: absolute;
        content: "";
        background-image: url(../images/mission_decoration1_animated.svg);
        background-repeat: no-repeat;
        background-size: contain;
        width: calc(423 * (100vw/1440));
        height: calc(101 * (100vw/1440));
        left: 13%;
        bottom: 31%;
    }

    .message::after {
        position: absolute;
        content: "";
        background-image: url(../images/mission_decoration1_animated.svg);
        background-repeat: no-repeat;
        background-size: contain;
        width: calc(423 * (100vw/1440));
        height: calc(101 * (100vw/1440));
        left: 14%;
        bottom: 30%;
    }

    .message_container {
        padding: 5% calc(52 * (100vw/1440)) 22% calc(52 * (100vw/1440));
    }

    .message_container::after {
        width: calc(289 * (100vw/1440));
        height: calc(289 * (100vw/1440));
        top: calc(80 * (100vw/1440));
        right: calc(52 * (100vw/1440));
    }

    .topic_eng {
        font-size: calc(18 * (100vw/1440));
    }

    .topic_txt {
        font-size: calc(40 * (100vw/1440));
        letter-spacing: calc(3.2 * (100vw/1440));
    }

    .topic_txts:first-of-type {
        margin-top: calc(70 * (100vw/1440)) !important;
    }

    .topic_txts {
        font-size: calc(16 * (100vw/1440));
    }
}

/* @media screen and (min-width:1441px){
    .message::before{
        width: calc(423 * (100vw/1440));
        height: calc(101 * (100vw/1440));
    }

    .message::after{
        width: calc(423 * (100vw/1440));
        height: calc(101 * (100vw/1440));
    }

} */

/* ==========================
mission
============================= */
.mission {
    padding: calc(26 * (100vw/375)) calc(17 * (100vw/375));
    background-color: var(--primary-yellow);
}

.mission1 {
    position: relative;
}

.mission1::before {
    content: "";
    background-image: url(../images/Vector_upper_sp.png);
    background-repeat: no-repeat;
    background-size: cover;
    display: block;
    width: 100%;
    height: calc(80 * (100vw/375));
    position: absolute;
    top: 0;
    left: 0;
    transform: translateY(-100%);
    z-index: -1;
}

.mission_title {
    color: var(--primary-bluetxt);
    text-align: center;
    font-size: calc(20 * (100vw/375));
    font-weight: 500;
    line-height: normal;
}

.mission_img {
    width: calc(200 * (100vw/375));
    margin: calc(20 * (100vw/375)) auto 0;
}

.mission_img img {
    width: 100%;
}

.mission_txt {
    color: var(--primary_black);
    font-size: calc(15 * (100vw/375));
    line-height: normal;
    margin-top: calc(20 * (100vw/375));
}

.mission3 {
    position: relative;
}

.mission3::after {
    content: "";
    background-image: url(../images/Vector_under_sp2.png);
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: calc(80 * (100vw/375));
    position: absolute;
    left: 0;
    bottom: 0;
    transform: translateY(100%);
}

.mission3::before {
    /* content: ""; */
    background-image: url(../images/mission_decoration4_animated.svg);
    background-repeat: no-repeat;
    background-size: contain;
    width: 37vw;
    height: 16vw;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
    transform: translate(0, 100%);
}

/* ==========================
pc
============================= */

@media screen and (min-width:769px) {
    .mission_group::after {
        content: "";
        background-image: url(../images/vector_under_pc2.png);
        background-repeat: no-repeat;
        background-size: cover;
        width: 100%;
        height: calc(150 * (100vw/1440));
        position: absolute;
        left: 0;
        bottom: calc(1 * (100vw/1440));
        transform: translateY(100%);
    }

    .mission1::before {
        background-image: url(../images/vector_upper_pc.png);
        height: calc(150 * (100vw/1440));
        transform: translateY(-100%);
    }

    .mission3::before {
        display: none;
    }

    .mission3::after {
        display: none;
    }

    .mission_title {
        font-size: calc(24 * (100vw/1440));
    }

    .mission_img {
        width: calc(375 * (100vw/1440));
        margin: calc(24 * (100vw/1440)) auto 0;
    }

    .mission_txt {
        font-size: calc(16 * (100vw/1440));
        text-align: center;
        margin-top: calc(24 * (100vw/1440));
    }

    .mission_group {
        display: flex;
        position: relative;
        background-color: var(--primary-yellow);
        justify-content: center;
        gap: calc(100 * (100vw/1440));
        padding-bottom: calc(10 * (100vw/1440));
    }

    .mission1 {
        padding: 0 0 calc(100 * (100vw/1440));
    }

    .mission2,
    .mission3 {
        background-color: transparent;
        padding: 0;
    }

    .mission_img1 {
        position: relative;
    }

    .mission_img1::before {
        /* content: ""; */
        background-image: url(../images/mission_decoration3_pc_animated.svg);
        background-size: contain;
        background-repeat: no-repeat;
        width: 22vw;
        height: calc(125 * (100vw/1440));
        position: absolute;
        top: 0;
        left: calc(-340 * (100vw/1440));
    }

    .mission_img1::after {
        /* content: ""; */
        background-image: url(../images/mission_decoration4_pc_animated.svg);
        background-size: contain;
        background-repeat: no-repeat;
        width: 22vw;
        height: calc(125 * (100vw/1440));
        position: absolute;
        bottom: -18%;
        right: calc(-450 * (100vw/1440));
    }
}