@charset "utf-8";

/* mainVisual =========================*/
#mainVisual{margin-bottom: 150px;}
.advantage_mv_text{position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-55%); z-index: 3;
    max-width: 1280px; margin: 0 auto; padding: 0 15px;}
.advantage_mv_text h2{font-size: 50px; color: #fff; font-weight: 500; letter-spacing: 2px; line-height: 1.8;
    display: inline-block; overflow: hidden; position: relative;}
.advantage_mv_text h2::before{
    content: '';
    display: inline-block;
    width: 0;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    background: #fff;
}
.advantage_mv_text h2.show::before{
    -webkit-animation: passing-bar 1s ease 0.5s 1 normal forwards;
    animation: passing-bar 1s ease 0.5s 1 normal forwards;
}
.advantage_mv_text h2 span{
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
.advantage_mv_text h2.show span{
	-webkit-animation: passing-txt 0s ease 1s 1 normal forwards;
	animation:passing-txt 0s ease 1s 1 normal forwards;
}

.mv_link{width: 100%; max-width: 900px; margin: 0 auto; position: absolute; bottom: 0; left: 0; right: 0; z-index: 3; transform: translateY(50%);}
.mv_link ul{display: flex; flex-wrap: wrap; justify-content: space-between; margin: 0 15px;}
.mv_link ul li{width: 50%; border-left: 1px solid #fff;}
.mv_link ul li:nth-child(1){border-left: none;}
.mv_link ul a{font-family: 'Lato'; font-size: 20px; letter-spacing: 4px; color: #fff; display: block; text-align: center; background: #003f65; width: 100%; padding: 20px 0; position: relative;}
.mv_link ul a::before{content: ""; position: absolute; top: 0; left: 0; width: 0%; height: 100%; background: rgba(255, 255, 255, 0.4); transition: all .25s ease-out;}
.mv_link ul a:hover::before{width: 100%;}
.mv_link ul a span{position: relative; z-index: 2;}
.mv_link ul a span small{display: block; font-size: 12px; margin-top: 10px;}

.mainVisual_image::before{content: ""; width: 100%; height: 100%; display: block; background: rgba(20,100,120,0.4); position: absolute; top: 0; bottom: 0; left: 0; right: 0;}

.con_link_wrap .page_link{bottom: 50px;}
.con_link_wrap .page_link .page_title span{line-height: 1.8;}

@media screen and (max-width:1200px){
    #mainVisual{margin-bottom: 250px;}
}
@media screen and (max-width:960px){
    #mainVisual{    margin-bottom: 200px;}
    .advantage_mv_text h2{font-size: 30px; line-height: 1.5;}
    .mv_link ul a{font-size: 22px;}

    .con_link_wrap {margin-bottom: 24vw;}
    .con_link_wrap .page_link .page_title{margin-bottom: 6vw;}
    .con_link_wrap .page_link p{margin-bottom: 25px; font-size: 13px;}
    .con_link_wrap .page_link p br{display: none;}
}
@media screen and (max-width:640px){
    #mainVisual{margin-bottom: 100px;}
    .advantage_mv_text h2{font-size: 6vw;}
    .mv_link ul a{font-size: 15px; line-height: 1.5; padding: 15px 0;}

    .con_link_wrap{margin-bottom: 15vw;}
    .con_link_wrap .blue_bar::before{height: 200px;}
    .con_link_wrap .blue_bar::after{height: 200px;}
    .con_link_wrap .page_title span{margin-top: 5px;}
    .con_link_wrap .page_link{left: 18vw; right: 7vw; bottom: 30px;}
    .con_link_wrap.img_right .page_link{left: 11vw; right: 16vw;}
    .con_link_wrap .page_link p{letter-spacing: 1px;}

    .con_link_wrap .con_link_image{padding-bottom: 140px;}
}