@charset "utf-8";

/** |READ ME| **********************************************************************************************************

"Message"

Cascading Style Sheet Setting File

Ver.20240111

------------------------------------------------------------------------------------------------------------------------

/** | Message | ***************************************************************************************** **/
.mes-mai {
    overflow: hidden;
    padding: 240px 0 0;
}
.mes-mai-img {
    position: relative;
    margin: 80px auto 0;
    max-width: 1100px;
}
.mes-mai-img img {
    display: block;
    width: 100%;
}
.mes-mai-name {
    display: block;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    margin-top: 20px;
}
.mes-mai-side {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(calc(100% + 30px) , -50%);
    color: #F03;
    font-size: 20px;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    font-family: 'Poppins', sans-serif;
    font-weight:700;
    letter-spacing: 0.2em;
    font-style: italic;
}
.mes-intro-sec {
    overflow: hidden;
    padding: 100px 0 0;
    background: rgb(244,253,255);
    background: linear-gradient(0deg, rgba(244,253,255,1) 0%, rgba(244,253,255,0) 100%);
}
.mes-intro-sec .cmn-frm{
    max-width: 1100px;
}
.mes-intro-ttl {
    font-size: 34px;
    font-weight: bold;
    line-height: 1.8;
    text-align: left;
    margin-bottom: 50px;
}
.mes-intro-txt {
    font-size: 16px;
    line-height: 2.4;
    text-align: left;
}
.mes-intro-box {
    display: flex;
    justify-content: space-between;
    padding: 0 0 100px;
}
.mes-intro-t-box {
    width: calc(100% - 440px);
}
.mes-intro-i-box {
    width: 340px;
}
.mes-intro-i-box img {
    display: block;
    width: 100%;
}
.mes-intro-i-box img + img {
    margin-top: 70px;
}
.mes-vis-ani{
    position: relative;
    font-size: 0;
    overflow: hidden;
    width: 100vw;
}
.mes-vis-ani img{
    display:block;
    width:100%;
    height:auto;
}
.mes-vis-obj{
    position: absolute;
    top:0;
    left:0;
}
.mes-vis-ttl {
    text-align: center;
    line-height: 1;
    margin-bottom: 70px;
}
.mes-vis-ttl-en {
    display: block;
    color: #F03;
    font-size: 55px;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
}
.mes-vis-ttl-jp {
    display: block;
    font-size: 18px;
    font-weight: bold;
    margin-top: 10px;
}
.mes-vis-txt {
    text-align: center;
    font-size: 15px;
    line-height: 2;
    margin-bottom: 70px;
}
.mes-con {
    padding:120px 0 240px;
}
.mes-con-lst {
    margin:auto;
    max-width: 1000px;
    display: flex;
    justify-content: space-between;
}
.mes-con-lst + .mes-con-lst {
    margin-top: 90px;
}
.mes-con-num {
    width: 148px;
    height: 148px;
    line-height: 148px;
    text-align: center;
    border: 1px solid #FF0033;
    border-radius: 50%;
    color: #F03;
    font-family: 'Oswald', sans-serif;
    font-size: 40px;
    font-weight: 500;
}
.mes-con-lst dd {
    width: calc(100% - 200px);
    text-align: left;
}
.mes-con-ttl {
    padding:0 0 5px;
    color: #F03;
    font-size: 28px;
    font-weight: bold;
    line-height:1.5;
}
.mes-con-txt {
    font-size: 16px;
    line-height: 2;
}
.mes-vis-sed{
    background-image:url('/recruit/newgraduate/img/message/mes-vis-sed.png?013004');
    background-repeat: repeat-x;
    background-position: 0 0;
    background-size: auto 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    animation-duration:9.0s;
    animation-name:mesVisSedAct;
    animation-timing-function: linear;
    animation-iteration-count:infinite;
}
.mes-vis-bus{
    background-image:url('/recruit/newgraduate/img/message/mes-vis-bus.png?013004');
    background-repeat: repeat-x;
    background-position: 0 0;
    background-size: auto 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    animation-duration:24.0s;
    animation-iteration-count:infinite;
    animation-timing-function: ease-in-out;
}
.mes-vis-bus.mes-vis-bus01{
    animation-name:mesVisBusAct01;
    background-position:0 0;
}
.mes-vis-bus.mes-vis-bus02{
    animation-name:mesVisBusAct02;
    background-position:14vw 0;
}
.mes-vis-bus.mes-vis-bus03{
    animation-name:mesVisBusAct03;
    background-position:28vw 0;
}
@keyframes mesVisSedAct{
    0%{background-position: 0 0;}
    100%{background-position: 150vw 0;}
}
@keyframes mesVisBusAct01{
    0%{background-position:0 0;}
    33.32%{background-position:-172vw 0;}
    66.64%{background-position:-186vw 0;}
    100%{background-position:-200vw 0;}
    /*
    0%{background-position:0 0;}
    16.66%{background-position:-172vw 0;}
    33.32%{background-position:-172vw 0;}
    49.98%{background-position:-186vw 0;}
    66.64%{background-position:-186vw 0;}
    83.3%{background-position:-200vw 0;}
    100%{background-position:-200vw 0;}
    */
}
@keyframes mesVisBusAct02{
    0%{background-position:14vw 0;}
    33.32%{background-position:0 0;}
    66.64%{background-position:-172vw 0;}
    100%{background-position:-186vw 0;}
    /*
    0%{background-position:14vw 0;}
    16.66%{background-position:0 0;}
    33.32%{background-position:0 0;}
    49.98%{background-position:-172vw 0;}
    66.64%{background-position:-172vw 0;}
    83.3%{background-position:-186vw 0;}
    100%{background-position:-186vw 0;}
    */
}
@keyframes mesVisBusAct03{
    0%{background-position:28vw 0;}
    33.32%{background-position:14vw 0;}
    66.64%{background-position:0 0;}
    100%{background-position:-172vw 0;}
    /*
    0%{background-position:28vw 0;}
    16.66%{background-position:14vw 0;}
    33.32%{background-position:14vw 0;}
    49.98%{background-position:0 0;}
    66.64%{background-position:0 0;}
    83.3%{background-position:-172vw 0;}
    100%{background-position:-172vw 0;}
    */
}
@keyframes mesVisBusActSp01{
    0%{background-position:0 0;}
    50%{background-position:-174.5vw 0;}
    100%{background-position:-200vw 0;}
    /*
    0%{background-position:0 0;}
    25%{background-position:-174.5vw 0;}
    50%{background-position:-174.5vw 0;}
    75%{background-position:-200vw 0;}
    100%{background-position:-200vw 0;}
    */
}
@keyframes mesVisBusActSp02{
    0%{background-position:-174.5vw 0;}
    50%{background-position:-200vw 0;}
    100%{background-position:-374.5vw 0;}
    /*
    0%{background-position:-174.5vw 0;}
    25%{background-position:-200vw 0;}
    50%{background-position:-200vw 0;}
    75%{background-position:-374.5vw 0;}
    100%{background-position:-374.5vw 0;}
    */
}
@media (min-width:641px) and (max-width:1000px){
    .mes-intro-box{
        display: block;
    }
    .mes-intro-t-box{
        width:auto;
        padding: 0 0 60px;
    }
    .mes-intro-i-box {
        width:auto;
        display: flex;
        justify-content: space-between;
    }
    .mes-intro-i-box img {
        display: block;
        width: calc(50% - 15px);
    }
    .mes-intro-i-box img + img {
        margin-top: 0;
    }
}
@media (max-width:640px){
    .mes-mai {
        padding: 15% 0 0;
    }
    .mes-mai-img {
        margin:15% 0 0;
        width: calc(100% + 40px);
        margin-left: -20px;
    }
    .mes-mai-name {
        font-size: 15px;
        margin-top: 20px;
    }
    .mes-mai-side {
        display: none;
    }
    .mes-intro-sec {
        padding: 10% 0 0;
    }
    .mes-intro-ttl {
        font-size: 22px;
        margin-bottom:20px;
    }
    .mes-intro-txt {
        font-size: 15px;
        padding: 0 0 10%;
    }
    .mes-intro-box {
        display: block;
        padding: 0 0 20%;
    }
    .mes-intro-t-box {
        width: 100%;
    }
    .mes-intro-i-box {
        width: 100%;
        display: flex;
        justify-content: space-between;
    }
    .mes-intro-i-box img {
        display: block;
        width: calc(50% - 10px);
    }
    .mes-intro-i-box img + img {
        margin-top: 0;
    }
    .mes-vis-ttl {
        margin-bottom: 5%;
    }
    .mes-vis-ttl-en {
        font-size: 9.5vw;
    }
    .mes-vis-ttl-jp {
        font-size: 16px;
    }
    .mes-vis-txt {
        font-size: 14px;
        margin-bottom:5%;
        text-align: left;
    }
    .mes-con{
        padding:10% 0 20%;
    }
    .mes-con-lst{
        padding: 0 20px;
        display: block;
    }
    .mes-con-lst + .mes-con-lst {
        margin-top:10%;
    }
    .mes-con-num {
        width: 80px;
        height: 80px;
        line-height: 80px;
        font-size: 26px;
    }
    .mes-con-lst dd {
        width: 100%;
        margin-top: 15px;
    }
    .mes-con-ttl {
        font-size: 22px;
        font-weight: bold;
    }
    .mes-con-txt {
        font-size: 15px;
        line-height: 2;
    }
    .mes-vis-sed{
        background-image:url('/recruit/newgraduate/img/message/mes-vis-sed-sp.png?013004');
        animation-duration:6.0s;
    }
    .mes-vis-bus{
        background-image:url('/recruit/newgraduate/img/message/mes-vis-bus-sp.png?013004');
        animation-duration:13.0s;
    }
    .mes-vis-bus.mes-vis-bus01{
        animation-name:mesVisBusActSp01;
        background-position:0 0;
    }
    .mes-vis-bus.mes-vis-bus02{
        animation-name:mesVisBusActSp02;
        background-position:-174.5vw 0;
    }
    .mes-vis-bus.mes-vis-bus03{
        display:none;
    }
}
