@charset "UTF-8";
/*===========
body
============*/
@media screen and (orientation: landscape) {/* 横向きの場合のスタイル*/}
@media screen and (orientation: portrait) {/* 縦向きの場合のスタイル */}

/* html/body
------------------------------------------------- */
html{width: 100%;font-size: 62.5%;-webkit-font-smoothing: antialiased;}

@media screen and (max-width:767px){/*スマホ設定*/
html {overflow-x: hidden;}
}
body {
font-family: "Noto Sans JP", sans-serif;
font-optical-sizing: auto;
font-weight: 500;
font-style: normal;
font-size: 20px;
line-height: 1.8;
position: relative;
width: 100%;

text-align: center;
color: #000;-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;overflow-x: hidden;position: relative;transition: 0.4s;overflow-x: hidden;box-sizing:border-box;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;-o-box-sizing: border-box;text-size-adjust: 100%;-webkit-text-size-adjust: 100%;/*Chrome,Safari*/-ms-text-size-adjust: 100%;/*EgdeMobile*/-moz-text-size-adjust: 100%;/*firefox*/
background: #0061a3;
}
@media screen and (max-width:767px){/*スマホ設定*/
body {font-size: 12px;font-size: 1.2rem;}
}
img{width: 100%;height: auto}
/*STYLE
------------------------------------------------- */
#wrapper {position: relative;max-width: 100%;margin: auto;background: #feec00;width:800px;margin: auto;box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;background: linear-gradient(to bottom,  #44799b 50%,#0061a3 100%);display: block;}
@media screen and (max-width:640px){/*スマホ設定*/
#wrapper {width: 100%}
}

/*header*/
#header{position: relative;}
#header h1{position: absolute;left: 0;right: 0;top: 10%;margin: auto;width: 66%}
#header h2{position: absolute;bottom: 10%;left: 0;right: 0;margin: auto; width: 80%;}
@media screen and (max-width:767px){/*スマホ設定*/
}
.bouncing-image {
    animation: bounceAndScale 1s ease-out forwards;
    transform: scale(0);
    opacity: 0;
}

/* キーフレームアニメーションの定義 */
@keyframes bounceAndScale {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.3);
        opacity: 1;
    }
    75% {
        transform: scale(0.9);
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}


.contents{padding: 0 30px;margin-top: -12%;position: relative}
.contents li.comming{margin-bottom: 20px}
.contents li.comming img{width: 98%}
.contents .bt{margin-top: 30px}

@media screen and (max-width:767px){/*スマホ設定*/
.contents{padding: 0 20px;}
}

#footer{padding: 20px 0 0;font-size: 1.5rem;color: #fff}
#footer h2{width: 62%;margin: 0 auto 12px}
#footer .address{margin-top: 20px;padding-bottom: 20px}
@media screen and (max-width:767px){/*スマホ設定*/
#footer .coution{text-align: left;padding: 0 20px}
#footer{font-size: 1rem;}
}

.contents li .coution{color: #fff;font-size: 1.3rem;text-align: right;margin-bottom: 20px}
.movie{position: relative;	background: #fff; margin:0 auto 0px;width: 98%;border: 3px solid #fff;border-radius: 10px;padding-bottom: 0}
.movie video{	width: 100%;border-radius: 9px;display: block;}
.movie .play-btn{display: block;width: 80px;position: absolute;top: 50%;left: 50%;transform: translateY(-50%) translateX(-50%);-webkit- transform: translateY(-50%) translateX(-50%);cursor: pointer;z-index: 3}
.movie .play-btn.playActive{display:none;}
@media screen and (max-width:896px){/*スマホ対応*/
.movie .play-btn{width: 50px;}
}

/*===========
inview
===========*/

.fadeIn_up {
  opacity: 0;
  transform: translate(0, 50%);
  transition: 2s;
}
.fadeIn_up.is-show {
  transform: translate(0, 0);
  opacity: 1;
}