body:before {
    background-image: url(../images/mission/main-mission-photo.webp);
    background-position: 50% 2.6%;
}


/* areaMission */
.areaMission {
    background: linear-gradient(135deg,#ffffff 19%, rgb(187 187 187) 7%,rgb(205, 205, 205) 44%,#fff 44%);
    padding: 167px 0 144px;
}
.areaMission .wrapTitle {
    margin-bottom: 78px;
}
.areaMission .wrapTitle .titleBig {
    display: inline-block;
    padding-left: 27px;
}
.areaMission .wrapTitle .titleBig:before{
    height: 125%;
    width: 8px;
    top: 47%;
    transform:translateY(-50%) skew(10deg, 0deg);
}
.areaMission .missionWrap {
    text-align: center;
    margin-bottom: 199px;
}
.areaMission .missionWrap .wrapTitle {
    margin-bottom: 56px;
}
.areaMission .missionSub {
    font-size: 28px;
    font-weight: bold;
    letter-spacing: 1.4px;
    line-height: 1.6;
}

.areaMission .missionVision {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 40px;
    flex-direction: row;
    margin-bottom: 210px;
}
.areaMission .missionVision .wrapTitle .titleBig:before {
    height: 94%;
}
.areaMission .missionVision .visionPhoto {
    position: relative;
    transform: translate(0px, 0px) skew(10deg, 0deg);
    width: 52.7%;
    height: 400px;
    margin-left: -4.7%;
    border-radius: 12px;
    overflow: hidden;
}
.areaMission .missionVision .visionPhoto::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 12px;
    width: 100%;
    background: url(../images/mission/mission-photo.webp) no-repeat top 50.2% left 99.3%;
    height: 100%;
    background-size: 106.6%;
}
.areaMission .missionVision .visionWrap {
    width: 48%;
}
.areaMission .missionVision .visionWrap .missionSub {
    margin-bottom: 40px;
}
.areaMission .missionVision .visionWrap .missionText {
    width: 100%;
    max-width: 480px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.8px;
    line-height: 1.6;
}
.areaMission .missionValue .inner {
    max-width: 1292px;
}
.areaMission .missionValue .wrapTitle {
    text-align: center;
    margin-bottom: 11px;
}
.areaMission .missionValue .valueNote {
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 48px;
}
.areaMission .missionValue .valueList li {
    display: block;
    width: 100%;
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 30px 40px 30px rgba(0, 0, 0, 0.1);
    padding: 49px 48px 48px;
}
.areaMission .missionValue .valueList li:not(:last-child) {
    margin-bottom: 47px;
}
.areaMission .missionValue .valueList li .valueName {
    color: #bd9f00;
    font-size: 40px;
    font-weight: 700;
    letter-spacing: 2.2px;
    line-height: 1;
    margin-bottom: -1px;
}
.areaMission .missionValue .valueList li .valueText {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.8px;
    margin-bottom: 18px;
}
.areaMission .missionValue .valueList li .valueSub {
    letter-spacing: 0.6px;
    line-height: 1.4;
    margin-bottom: 20px;
}
.areaMission .missionValue .valueList li .valueWrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    background: #f8f7f6;
    padding: 21px 20px 19px;
}
.areaMission .missionValue .valueList li .valueWrap .wrapSub {
    width: calc(50% - 10px);
    letter-spacing: 0.7px;
    line-height: 1.4;
}
/* areaMission */

.areaNextPage {
    background-image: url(../images/common/bg-page-next.webp);
}

@media(max-width: 1075px) and (min-width: 768px) {
    .areaMission .missionVision .visionPhoto::before {
        background-position: center;
        background-size: cover;
    }
}
@media(max-width: 1020px) and (min-width: 768px) {
    .areaMission .missionVision .visionPhoto {
        width: 50.7%;
        margin-left: -7.7%;
    }
}
@media(max-width: 768px) {
    .areaMission {
        padding: 122px 0 120px;
    }
    .areaMission .missionWrap .wrapTitle {
        margin-bottom: 78px;
    }
    .areaMission .wrapTitle .titleBig {
        padding-left: 28px;
    }
    .areaMission .wrapTitle .titleBig:before {
        height: 285%;
        width: 8px;
        top: 50%;
    }
    .areaMission .missionSub {
        font-size: clamp(18px,3.2vw,24px);
        letter-spacing: 1px;
    }
    .areaMission .missionWrap {
        margin-bottom: 82px;
    }
    .areaMission .missionVision {
        flex-direction: column-reverse;
        padding: 0 48px;
        margin-bottom: 86px;
    }
    .areaMission .missionVision .visionWrap {
        width: 100%;
    }
    .areaMission .missionVision .wrapTitle .titleBig:before {
        height: 214%;
        top: 107%;
    }
    .areaMission .missionVision .visionWrap .wrapTitle {
        margin-bottom: 124px;
    }
    .areaMission .missionVision .visionWrap .missionSub {
        line-height: 1.61;
        margin-bottom: 45px;
    }
    .areaMission .missionVision .visionWrap .missionText {
        font-size: clamp(12px,2.2vw,14px);
        letter-spacing: 0.6px;
        line-height: 1.58;
    }
    .areaMission .missionVision .visionPhoto {
        width: 100%;
        height: 320px;
        transform: none;
        margin: 0;
    }
    .areaMission .missionVision .visionPhoto::before {
        background: url(../images/mission/mission-photo.webp) repeat-y top left/100%;
    }
    .areaMission .missionValue .wrapTitle {
        margin-bottom: 27px;
    }
    .areaMission .missionValue .valueNote {
        font-size: clamp(18px, 3.2vw, 24px);
        margin-bottom: 22px;
        letter-spacing: 1px;
    }
    .areaMission .missionValue .valueList li:not(:last-child) {
        margin-bottom: 24px;
    }
    .areaMission .missionValue .valueList li {
        padding: 24px 12px;
    }
    .areaMission .missionValue .valueList li .valueName {
        font-size: clamp(28px,7vw,38px);
        letter-spacing: 1.6px;
        margin-bottom: 0;
    }
    .areaMission .missionValue .valueList li .valueText {
        font-size: clamp(12px,2.2vw,14px);
        margin-bottom: 19px;
    }
    .areaMission .missionValue .valueList li .valueSub {
        font-size: clamp(12px,2.2vw,14px);
        line-height: 1.4;
        margin-bottom: 20px;
    }
    .areaMission .missionValue .valueList li .valueWrap {
        padding: 11px 10px 9px;
    }
    .areaMission .missionValue .valueList li .valueWrap .wrapSub {
        font-size: clamp(10px,2vw,12px);
        letter-spacing: 0.4px;
    }
    .areaMission .missionValue .valueList li .valueWrap .wrapSub:not(:last-child) {
        margin-bottom: 20px;
    }
}
@media(max-width:430px) {
    .areaMission .missionValue .valueList li .valueWrap .wrapSub {
        width: 100%;
    }
}