@charset "UTF-8";
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video,
input, select, textarea {
  box-sizing: border-box;
}

html {
  /* Sets a specific default `font-size` for user with `rem` type scales.*/
  font-size: 100%;
  /* Changes the default tap highlight to be completely transparent in iOS.*/
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
  color: #000;
  line-height: 1.6;
  /*background: url(../img/common/bg_body.png) center center/cover no-repeat;*/
  background: #d0f3ff;
  font-family: "Noto Sans Japanese", 游ゴシック体, "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Avenir, "Helvetica Neue", Helvetica, Arial, Verdana, Roboto, sans-serif;
  font-weight: 400;
  min-width: 1000px;
}

img {
  vertical-align: bottom;
  max-width: 100%;
  height: auto;
}

strong {
  font-weight: bold;
}

img {
  max-width: 100%;
  height: auto;
}

/*a:hover {
  opacity: .8;
}*/

.contain {
  width: 1000px;
  margin: 0 auto;
}

#mainVisual {
  background-image: url(../img/waveL.png),url(../img/waveR.png),url(../img/bg_yellow.png);
  background-position: left, right, top center;
  background-repeat: no-repeat,no-repeat,no-repeat;
  background-size: auto, auto, 100%;
}

#mainVisual h1 {
  text-align: center;
}

#gaiyou {
  text-align: center;
  background: url(../img/bg_gaiyou.png) top center/auto 431px no-repeat;
  /* height: 431px; 概要表示用*/
  height: 320px; /*概要非表示用 */
  margin-top: -200px;
  z-index: 2;
  position: relative;
}

#gaiyou .text {
  padding-top: 188px;
}

main {
  text-align: center;
}

#off {
  background: url(../img/bg_off.png) top center/1000px auto no-repeat;
  height: 623px;
  margin-top: -90px;
  z-index: 3;
  position: relative;
}

#off h2 {
  margin: 0 0 -16px 0;
  position: relative;
  top: -40px;
}

#off a:hover {
  opacity: .8;
}

#event {
  margin-top: 60px;
  margin-bottom: 60px;
}

#event h2 {
  margin-bottom: 12px;
}

#event .event_text {
  margin: 40px 0 20px;
}

#event .info{
  /* margin-left: -15px; */
  margin-top: -34px;
}

#event .info:not(:last-of-type) {
  margin-bottom: 35px;
}

#event .info1{
  margin-right: -40px;
  margin-bottom: 25px;
}

#event .info2{
  margin-left: -15px;
  margin-right: -22px;
  margin-top: -78px;
  margin-bottom: 25px;
}
#event .info_coming {
  margin-top: 0px;
}
.ttl {
  margin-bottom: 42px;
}

#movie {
  background: #002762;
  padding: 20px 0;
}

.video{
  position:relative;
  width:100%;
  padding-top:56.25%;
}
.video iframe{
  position:absolute;
  top:0;
  right:0;
  width:100%;
  height:100%;
}

#movieList {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

#movieList {
  margin: 40px 0 20px;
}
#movieList .info {
  width: 480px;
  position: relative;
  margin-bottom: 40px;
}

#movieList .num {
  position: absolute;
  top:-23px;
  left: -27px;
}

#movieList .play {
  position: absolute;
  top: calc(50% - 25px);
  left: 0;
  right: 0;
}

#movieList .play i {
  font-size: 30px;
  color: #fff;
  background-color: #e40000;
  border: 5px solid #fff;
  border-radius: 50%;
  padding: 10px 10px 10px 15px;
}

#movieList a:hover .play i {
  background-color: #3abd2e;
}

footer {
  background: #fff;
  text-align: center;
  padding: 35px 0;
  font-size: 12px;
}

/* デフォルト：1000px以上用（PC用）の記述 */
@media screen and (max-width: 1096px) {
  /* 1096px以下用（PC用）の記述 */
  #event {
    overflow: hidden;
  }
}
@media screen and (max-width: 999px) {
  /* 999px以下用（PC用）の記述 */
  #mainVisual {
    background-image: url(../img/waveL.png),url(../img/waveR.png),url(../img/bg_yellow.png);
    background-position: left, right, top center;
    background-repeat: no-repeat,no-repeat,no-repeat;
    background-size: auto, auto, 1440px;
  }
}

#event.event_btn_include .info{
  margin-top: 0;
  position: relative;
}
#event.event_btn_include .info .btn{
  position: absolute;
  width: 100%;
  bottom:50px;
}