@charset "utf-8";

.mv-front{
    width: 100%;
    height:100vh;
    overflow: hidden;
    position: relative;
}
.mv-front__img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height:100vh;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    overflow: hidden;
    z-index:0;
}
.mv-front__img:nth-child(1) {
    background-image: url(/aaa/images/mv-1.png);
    opacity:0.4;
}
.mv-front__img:nth-child(2) {
    background-image: url(/aaa/images/mv-2.png);
    opacity:0.7;
}
.mv-front__img:nth-child(3) {
    background-image: url(/aaa/images/mv-3.png);
    opacity:1;
    animation-name:anime1;
}

@keyframes anime1 {
    0% {transform: scale(1.00);}
    50% {transform: scale(1.20);}
    100% {transform: scale(1.00);}
}
.mv-front__img  {
    animation-duration:20s;/*時間：*/
    animation-timing-function:linear;/*変化：一定*/
    animation-delay: 0s;/*開始時期：*/
    animation-iteration-count:infinite;/*繰返し：無限*/
    animation-direction:normal;/*再生方向：毎回順方向*/
    animation-fill-mode:both;/*開始時＆終了時のスタイル：両方適用*/
    animation-play-state:running;/*再生か停止：再生*/
/*    animation-delay: 5s;*/
}


@media screen and (max-width: 1366px) {
    .mv-front__img:nth-child(3) {
        background-image: url(/aaa/images/mv-3-3.png);
        opacity:1;
    }
}
@media screen and (max-width: 1024px) {
    .mv-front__img:nth-child(3) {
        background-image: url(/aaa/images/mv-3-2.png);
        opacity:1;
    }
}

.catchcopy{
    position: absolute;
    bottom: 0px;
    right: 0px;
    padding: 30px;
    color: aliceblue;
    text-shadow: 0px 0px 1px #0089ff,0px 0px 3px #0089ff,0px 0px 9px #0089ff; 
}
.catchcopy .first{
    text-align: right;
    font-size: 32px;
    padding-bottom: 10px
}
.catchcopy .first i{
    font-size: 40px;
}
.catchcopy .second{
    text-align: right;
    font-size: 18px;
}
@media screen and (max-width: 680px) {
    .catchcopy{
        position: absolute;
        bottom: 0px;
        right: 0px;
        padding: 20px;
        color: aliceblue;
        text-shadow: 0px 0px 1px #0089ff,0px 0px 3px #0089ff,0px 0px 9px #0089ff; 
    }
    .catchcopy .first{
        text-align: right;
        font-size: 24px;
        padding-bottom: 5px
    }
    .catchcopy .first i{
        font-size: 28px;
    }
    .catchcopy .second{
        text-align: right;
        font-size: 16px;
    }
}
@media screen and (max-width: 500px) {
    .catchcopy{
        position: absolute;
        bottom: 0px;
        right: 0px;
        padding-right: 15px;
        color: aliceblue;
        text-shadow: 0px 0px 1px #0089ff,0px 0px 3px #0089ff,0px 0px 9px #0089ff; 
    }
    .catchcopy .first{
        text-align: right;
        font-size: 22px;
        padding-bottom: 5px
    }
    .catchcopy .first i{
        font-size: 26px;
    }
    .catchcopy .second{
        text-align: right;
        font-size: 13px;
    }
}

/*----------------------------------*/
.sec__ctr.reserve .flex-item{
    margin: 0 auto;
}
.sec__ctr.reserve .btn-ctr{
    text-align: center;
}
.sec__ctr.reserve .btn a{
    padding: 1.5em 1em;
    display: block;
    max-width: 15em;
    text-align: center;
    color: #fff;
    margin: 0 auto 1em;
    border-radius: 5px;
    font-weight: bold;
    transition: 0.3s ease-out;
}
.sec__ctr.reserve .btn a:hover{
    opacity: 0.7;
    transition: 0.3s ease-out;
}
.sec__ctr.reserve .btn a.color1 {
    background-color: #e9795b;
}
.sec__ctr.reserve .btn a.color2 {
    background-color: #f1a218;
}
.sec__ctr.reserve .btn a.color3 {
    background-color: #7cc213;
}