@charset "UTF-8";
/* CSS Document */
#container {
  text-align: center;
  margin: 0 auto;
  padding: 0;
  width: 750px;
}
@media screen and (max-width: 749px) {
  #container {
    width: 100%;
  }
}
@media screen and (max-width: 1200px) {
  #container {
    width: 100%;
  }
}
video {
  width: 100%;
}
.movie_area {
  margin: 10px auto 40px;
}
.movie_area iframe {
  width: 100%;
  height: 422px;
}
@media screen and (max-width: 749px) {
  .movie_area iframe {
    width: 100%;
    height: 211px;
  }
}
.btn_area01 {
  margin: 0 auto;
  width: 100%;
  padding: 20px 0 20px;
  background: #fff;
}
.btn_area02 {
  margin: 0 auto;
  width: 100%;
  padding: 0 0 0;
  background: #ffdfad;
}
.btn_area03 {
  margin: 0 auto;
  width: 100%;
  padding: 0 0 0;
  background: #fff;
}
.btn {
  text-align: center;
  width: 80%;
  margin: 0 auto;
  padding: 8% 0;
  background: linear-gradient(45deg, #0D9300, #0D9300, #0D9300, #0D9300, #0D9300, #0D9300, #58DD4A, #0D9300, #0D9300, #0D9300, #0D9300, #0D9300, #0D9300);
  background-size: 500% 500%;
  border-radius: 50px;
  border: 8px solid #0b7200;
  position: relative;
  display: block;
  animation: btn_gradation 2s ease infinite, btn_anime 4s ease infinite;
  transform: scale(1);
  filter: drop-shadow(1px 3px 5px rgba(0, 0, 0, 0.5));
}
@media screen and (max-width: 749px) {
  .btn {
    border: 5px solid #0b7200;
  }
}
/*ボタン背景グラデーション*/
@keyframes btn_gradation {
  0% {
    background-position: 0% 50%
  }
  100% {
    background-position: 100% 50%
  }
}
@media only screen and (max-width: 480px) {
  .gradation {
    width: 90%;
    font-size: 24px;
  }
}
/*ボタン全体動き*/
@keyframes btn_anime {
  28%, 48% {
    transform: skew(0deg);
  }
  32% {
    transform: skew(10deg);
  }
  36% {
    transform: skew(-10deg);
  }
  40% {
    transform: skew(5deg);
  }
  44% {
    transform: skew(-5deg);
  }
}
/*ボタンテキスト*/
.btn .btn_txt {
  width: 70%;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.btn .btn_txt_anime {
  animation: btn_txt 3.5s ease infinite;
}
@keyframes btn_txt {
  0%, 100%, 20%, 8% {
    opacity: 1;
    transform: scale(1);
  }
  12% {
    opacity: 1;
    transform: scale(1.2);
  }
  16% {
    opacity: 1;
    transform: scale(0.9);
  }
}
/*ボタン矢印*/
.btn .btn_arrow {
  width: 12%;
  position: absolute;
  top: 50%;
  left: -5%;
  transform: translateY(-50%);
}
@media screen and (max-width: 749px) {
  .btn .btn_arrow {
    left: -7%;
  }
}
.btn .btn_arrow_anime {
  animation: btn_arrow 1s ease-in infinite;
}
@keyframes btn_arrow {
  0% {
    transform: translateX(0px);
  }
  45% {
    transform: translateX(20px);
  }
  50% {
    transform: translateX(25px);
  }
  55% {
    transform: translateX(20px);
  }
  95% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(0px);
  }
}
footer {
  padding: 50px 0;
  background: #0099b9;
}
footer p {
  color: #fff;
}
footer a {
  color: #fff;
  text-decoration: none;
}
footer a:hover {
  text-decoration: underline;
}
footer ul {
  margin: 0 auto 20px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: stretch;
}
@media screen and (max-width: 749px) {
  footer ul {
    margin: 0 auto 25px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
  }
}
footer li {
  padding: 0 10px;
  border-right: 1px solid #fff;
}
@media screen and (max-width: 749px) {
  footer li {
    margin: 0 0 7px;
    border-right: 0px solid #fff;
  }
}
footer li:last-child {
  border-right: 0px solid #fff;
}


/* ポップアップ */
.popup-area {
    display:none;
    width:80vw;
    background:#fff;
    padding:10px;
    position: fixed;
    z-index: 9999;  
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    text-align: center;
    border-radius:8px;
    box-shadow: 0 0 4px 4px rgba(0,0,0,0.4);
}
@media screen and (min-width: 980px) {
        .popup-area {
        width:auto;
        max-width: 460px;
    }
}
.popup-area button {
    margin:30px auto 0;
}
.popup-area .icon{
    font-size:3em;
    color:red;
}
/* 背景色 */
.cover-eml {
    background:rgba(0,0,0,0.3);
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 999;   
    top:0;
    right:0;
    bottom:0;
    left:0;
}