@charset "utf-8";

/* mv */
.common_mv {
    background-repeat: no-repeat;
    background-position: 50% 0;
    background-attachment: fixed;
}
@media (min-width: 751px) {
    .common_mv {
        background-image: url(/company/message/images/mv.jpg);
    }
}
@media (max-width: 750px) {
    .common_mv {
        background-image: url(/company/message/images/mv_sp.jpg);
    }
}

/* message */
.message_main{
    overflow-x: clip;
}
.message_box {
    display: flex;
    align-items: center;
}
.message_box_img_area {
    position: relative;
}
.message_box_img {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
}
.message_box_img::before,
.message_box_img::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
}
.message_box_img::before {
    background-color: #124b9c;
}
.message_box_img::after {
    background-color: #fff;
}
.message_box_img_inner {
    position: absolute;
    top: 0;
    left: 0;
}
.message_box_ttl_area {
    color: #fff;
    background-color: #124b9c;
    position: relative;
}
.message_box_ttl_inner {
    display: inline-block;
}
/* .message_box_ttl_inner::before,
.message_box_ttl_inner::after {
    content: '';
    width: 100%;
    height: 1px;
    background-color: #fff;
    display: block;
    position: absolute;
    left: 0;
} */
.message_box_ttl {
    line-height: 1.45;
}

.massage_txt {
    text-align: center;
}
@media (min-width: 1285px) {
    .message_box_ttl_inner {
        width: 589rem;
    }
}
@media (max-width: 1284px) and (min-width: 751px){
    .message_box_ttl_inner {
        width: 450rem;
    }
}
@media (min-width: 751px) {
    .message_box {
        width: 1440rem;
        margin: 144rem auto 0;
        padding-left: 120rem;
    }
    .message_box_img_area {
        width: 509rem;
        height: 713rem;
    }
    .message_box_img,
    .message_box_img::before,
    .message_box_img::after,
    .message_box_img_inner {
        width: 602rem;
        height: 713rem;
    }
    .message_box_img_inner {
        background: url(/company/message/images/message.jpg) no-repeat 50% / cover;
    }
    .message_box_ttl_area {
        box-sizing: border-box;
        width: 811rem;
        padding: 70rem 75rem;
    }
    .massage_txt {
        margin-top: 90rem;
        font-size: 18rem;
        line-height: 2;
    }
}
@media (max-width: 750px) {
    .message_box {
        margin-top: 137rem;
    }
    .message_box_img_area {
        width: 292rem;
        height: 480rem;
    }
    .message_box_img,
    .message_box_img::before,
    .message_box_img::after,
    .message_box_img_inner {
        width: 370rem;
        height: 480rem;
    }
    .message_box_img_inner {
        background: url(/company/message/images/message_sp.jpg) no-repeat 50% / cover;
    }
    .message_box_ttl_area {
        width: 459rem;
        padding: 50rem 0 50rem 40rem;
    }
    .message_box_ttl_inner {
        width: 370rem;
    }
    .massage_txt {
        margin-top: 82rem;
        font-size: 26rem;
        line-height: 2.08;
    }
}
/* animation */
.animation_ready .message_box_img::before,
.animation_ready .message_box_img::after {
    left: 0;
    transition: left 0.4s 0.2s cubic-bezier(0.11, 0, 0.5, 0);
}
.animation_ready .message_box_img::before {
    z-index: 1;
}
.animation_ready .message_box_img::after {
    transition-delay: 0.55s;
}
.animation_loaded .animated .message_box_img::before,
.animation_loaded .animated .message_box_img::after {
    left: 100%;
}
.animation_ready .message_box_img {
    width: 0;
    transition: width 0.4s 0s cubic-bezier(0.11, 0, 0.5, 0);
}
.animation_ready .message_box_ttl_area {
    opacity: 0;
    transition: opacity 0.6s 0.55s, translate 0.6s 0.75s;
}
.animation_loaded .animated .message_box_ttl_area {
    opacity: 1;
    translate: 0 0;
}
@media (min-width: 751px) {
    .animation_loaded .animated .message_box_img {
        width: 640px;
    }
    .animation_ready .message_box_ttl_area {
        translate: -60px 0;
    }
}
@media (max-width: 750px) {
    .animation_loaded .animated .message_box_img {
        width: 370rem;
    }
    .animation_ready .message_box_ttl_area {
        translate: -80rem 0;
    }
}