@charset "UTF-8";

#content {
	margin: -12px auto 0;
	min-width: 1200px;
	max-width: 100%;
	min-height: 30px;
  color: #000;
	overflow: hidden;
}
@media screen and (max-width: 1366px){
  #content {
    margin: -28px auto 0;
  }
}

.game{
	font-family: 'Noto Sans JP',"Hiragino Sans","Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro","游ゴシック", "Yu Gothic", YuGothic,"メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif;
  font-size: 15px;
  line-height: 1.4;
  font-weight: 700;
  background: #000;
}

.game h1,
.game h2,
.game h3,
.game h4,
.game h5{
  font-weight: 700;
  line-height: 1;
}

.game * {
  box-sizing: border-box
}
.game *:before,.game *:after {
  box-sizing: border-box
}

.game .game_inner{
  max-width: 980px;
  margin: 0 auto;
}

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

.game a{
  color: #2ea7e0;
}

@media screen and (min-width:769px){
  .mv > div{
    text-align: center;
    background: url("../images/mv_bk2.jpg") center no-repeat;
    background-size: cover;
    position: relative;
  }
}

.mv > div > div{
  position: absolute;
  bottom: 36px;
  left: 50%;
  margin-left: -480px;
}

.mv > div > div > a.open{
  width: 400px;
  height: 63px;
  font-size: 17px;
  line-height: 1;
  font-weight: 700;
  color: #FFF;
  display: block;
  padding-top: 13px;
  border: 1px solid #FFF;
  box-shadow: 0px 0px 15px 0px rgba(255, 255, 255, 0.35);
  background: url("../images/mv_btn.png") no-repeat;
  background-size: cover;
  position: relative;
}

.mv > div > div > a.open span{
  font-size: 13px;
  line-height: 1;
  display: block;
  margin-top: 5px;
}

.mv > div > div > a.open::after{
  content: "＞";
  font-size: 14px;
  font-weight: 900;
  position: absolute;
  top: 50%;
  right: 13px;
  transform: translateY(-50%) scale(1.6,1) rotate(90deg);
}

.mv > div > div > a.close{
  width: 416px;
  height: 73px;
  font-size: 17px;
  line-height: 1.3;
  font-weight: 700;
  color: #000;
  display: block;
  padding-top: 15px;
  background: rgba(200,200,200,.9);
  border: 1px solid #000;
  border-radius: 10px;
  position: absolute;
  bottom: 40px;
  left: -8px;
  transition: .3s;
}
@media screen and (min-width:769px){
  .mv > div > div > a.close:hover{
    opacity: 1;
    background: rgba(230,230,230,.9);
    transition: .3s;
  }
}

.mv > div > div p{
  font-size: 14px;
  line-height: 1;
  color: #FFF;
  text-align: left;
  margin-top: 15px;
}

.mv > div > div p a{
  text-decoration: underline;
}

.mv > div > div p.copy{
  font-size: 11px;
  margin-top: 5px;
  font-weight: 500;
  display: none;
}

@media screen and (min-width:769px){
  .mv > p{
    height: 95px;
    padding-top: 25px;
    text-align: center;
    background: url("../images/mv_txt_bk.png") repeat-x;
    background-size: auto 100%;
    border-bottom: 1px solid #FFF;
  }
}

.game_mode{
  width: 1260px;
  margin: 0 auto;
  color: #FFF;
}

@media screen and (min-width:769px){
  .game_info{
    text-align: center;
    height: 817px;
    padding-top: 30px;
    background: url("../images/game_bk2.jpg") no-repeat center top;
    background-size: auto 100%;
  }
}

.game_info > div{
  width: 885px;
  margin: 0 auto;
}

.game_info > div > div {
  width: 800px;
  aspect-ratio: 16 / 9;
  margin: 20px auto 0;
}
.game_info > div > div iframe {
  width: 100%;
  height: 100%;
}

.game_info > p{
  font-size: 30px;
  line-height: 1.3;
  text-align: center;
  margin-top: 30px;
}

.game_info ul{
  width: 800px;
  margin: 20px auto;
  display: flex;
  justify-content: flex-start;
}

.game_info ul li{
  width: 267px;
  border: 1px solid #FFF;
  box-sizing: border-box;
}

.game_info ul li + li{
  margin-left: -1px;
}

.game_info ul li a{
  display: block;
  background: rgba(0,0,0,.8)
}

@media screen and (min-width:769px){
  .game_mode .tb{
    width: 800px;
    height: 59px;
    font-size: 24px;
    line-height: 59px;
    background: url("../images/game_txt_bk.png") no-repeat;
    background-size: 100% auto;
    margin: 0 auto;
  }
}

.game .note{
  font-size: 10px;
  line-height: 1.5;
  font-weight: 400;
  color: #9e9f9f;
  text-align: left;
}

@media screen and (min-width:769px){
  .game01{
    height: 1765px;
    text-align: center;
    padding-top: 77px;
    background: url("../images/game01_bk.jpg") no-repeat;
    background-size: 100% 100%;
  }
}

.game01 h2{
  margin-bottom: 45px;
}

.game01 h4{
  width: 602px;
  margin: 47px auto 30px;
}

.game01 p{
  font-size: 16px;
  line-height: 2;
}

.game01 .g01_pic{
  max-width: inherit;
  width: 853px;
  display: block;
  margin-left: -25px;
}

.game01 > div,
.game02 > div,
.game03 > div,
.game04 > div{
  width: 800px;
  margin: 0 auto;
}

.game01 > div > h3{
  width: 640px;
  margin: 0 auto 27px;
}

.game01 ul{
  margin-top: 10px;
}

.game01 .new{
  position: relative;
}

.game01 .new img.pic{
  width: 220px;
  height: auto;
  position: absolute;
  right: -90px;
  bottom: -20px;
}

@media screen and (min-width:769px){
  .game02{
    height: 2577px;
    text-align: center;
    padding-top: 80px;
    background: url("../images/game02_bk.jpg") no-repeat;
    background-size: auto 100%;
  }
}

.game02 h2{
  margin-bottom: 45px;
}

.game02 h3{
  margin-bottom: 30px !important;
}

.game02 p{
  font-size: 16px;
  line-height: 2;
  white-space: nowrap;
  margin-bottom: 30px;
}

.game02 p.note{
  margin-top: 20px;
  margin-bottom: 55px;
}

.sh{
  box-shadow: 5px 5px 20px 0px rgba(0, 0, 0, 0.4);
}

@media screen and (min-width:769px){
  .game03{
    height: 1015px;
    text-align: center;
    padding-top: 80px;
    background: url("../images/game03_bk.jpg") no-repeat;
    background-size: auto 100%;
  }
}

.game03 h2{
  margin-bottom: 45px;
}

.game03 h3{
  margin-bottom: 30px !important;
}

.game03 p{
  font-size: 16px;
  line-height: 2;
  margin-bottom: 30px;
}

.game03 .note{
  margin-top: 25px;
}

.game03 sup{
  font-size: 10px;
}

@media screen and (min-width:769px){
  .game04{
    height: 968px;
    text-align: center;
    padding-top: 70px;
    background: url("../images/game04_bk.jpg") no-repeat;
    background-size: auto 100%;
  }
}

.game04 h2{
  margin-bottom: 45px;
}

.game04 h3{
  margin-bottom: 30px !important;
}

.game04 p{
  font-size: 16px;
  line-height: 2;
  margin-bottom: 35px;
}

@media screen and (min-width:769px){
  .game04 > div > div{
    text-align: left;
    border-radius: 10px;
    padding: 30px 35px;
    background: url("../images/game04_pic.jpg") no-repeat right 15px bottom #FFF;
  }
}

.game04 > div > div h3{
  font-size: 24px;
  line-height: 1;
  color: #7437bb;
  text-align: center;
  margin-bottom: 55px !important;
}

.game04 > div > div ul{
  padding: 20px;
  background: #eae1f5;
  border-radius: 15px;
  display: inline-block;
}

.game04 > div > div ul li{
  font-size: 16px;
  line-height: 1.3;
  color: #000;
}

.game04 > div > div ul li sup{
  font-size: 10px;
}

.game04 > div > div ul li + li{
  margin-top: 10px;
}

.game04 .note{
  margin-top: 20px;
}

.lineup{
  max-width: 1260px;
  margin: 0 auto;
  background: #FFF;
  padding: 90px 0 80px;
}

.lineup > div{
  width: 990px;
  margin: 0 auto;
}

.lineup > div h2{
  width: 293px;
  margin: 0 auto 40px;
}

.lineup > div > div{
  position: relative;
}

.lineup > div > div + div{
  margin-top: 25px;
}

.lineup ul{
  width: 830px;
  display: flex;
  justify-content: space-between;
  position: absolute;
  top: 50px;
  left: 160px;
}

.lineup ul li{
  width: 207px;
  text-align: center;
}

.lineup > div > div + div ul li{
  width: 277px;
}

.lineup ul li a{
  font-size: 16px;
  text-decoration: underline;
}

@media screen and (min-width:769px){
  .cam{
    max-width: 1260px;
    margin: 0 auto;
    padding: 20px 0;
  }
}

.cam ul.note{
  font-size: 12px;
  line-height: 1.4;
  margin: 0;
}

.cam ul.note li{
  text-indent: -1em;
  padding-left: 1em;
}

.cam > div{
  width: 960px;
  margin: 0 auto;
}

.cam h2{
  width: 454px;
  margin: 0 auto 35px;
}

@media screen and (min-width:769px){
  .cam h3{
    width: 100%;
    height: 146px;
    font-size: 25px;
    line-height: 1;
    color: #FFF;
    text-align: center;
    padding: 28px 55px 0;
    margin-bottom: 25px;
    background: url("../images/cam_title_bk.png") no-repeat;
    background-size: 100% auto;
  }
}

.cam h3 span{
  font-size: 20px;
  line-height: 1.3;
  display: block;
  border-bottom: 1px solid #FFF;
  padding-bottom: 13px;
  margin-bottom: 20px;
}

.cam p{
  font-size: 14px;
  line-height: 1.8;
  color: #FFF;
  margin-bottom: 15px;
}

.cam .close_box{
  position: relative;
}

.cam p.close{
  width: 103%;
  height: 370px;
  font-size: 40px;
  text-align: center;
  line-height: 1.3;
  font-weight: 700;
  color: #000;
  white-space: nowrap;
  background: rgba(200,200,200,.9);
  border: 1px solid #000;
  border-radius: 10px;
  padding: 10px 0;
  box-sizing: content-box;
  position: absolute;
  top: -140px;
  left: -1.5%;
  z-index: 1;
}

.cam p.close.sm{
  height: 740px;
  top: -55px;
}

.cam p.close span{
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.cam .note{
  margin: 8px 0 35px;
}

.cam h3:last-of-type{
  padding: 15px 55px 0;
  position: relative;
}

.cam h3:last-of-type::after{
  content: "";
  width: 55px;
  height: 55px;
  background: url("../images/icon_x.png") no-repeat;
  background-size: 100% auto;
  position: absolute;
  top: 15px;
  right: 55px;
}

.cam .box{
  display: flex;
  justify-content: space-between;
}

.cam .box > div{
  width: 300px;
}

.cam .box > div + div{
  width: 630px;
  border: 1px solid #FFF;
}

.cam .box p + p{
  text-align: center;
  margin-top: 20px;
  padding: 12px 0;
  border-top: 1px solid #FFF;
  border-bottom: 1px solid #FFF;
}

.cam .box ul{
  display: flex;
  justify-content: space-between;
}

.cam .box ul li + li{
  border-left: 1px solid #FFF;
}

.cam .box ul img{
  width: auto;
  height: 402px;
}

.cam > div > a{
  width: 620px;
  height: 90px;
  font-size: 24px;
  line-height: 90px;
  text-align: center;
  color: #FFF;
  font-feature-settings: "palt";
  border-radius: 15px;
  display: block;
  margin: 25px auto 0;
  position: relative;
  background: rgb(242,151,0);
  background: -moz-linear-gradient(-45deg,  rgba(242,151,0,1) 0%, rgba(233,85,20,1) 100%);
  background: -webkit-linear-gradient(-45deg,  rgba(242,151,0,1) 0%,rgba(233,85,20,1) 100%);
  background: linear-gradient(135deg,  rgba(242,151,0,1) 0%,rgba(233,85,20,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f29700', endColorstr='#e95514',GradientType=1 );
}

.cam > div > a span{
  font-size: 18px;
  transform: translateY(.1em);
  display: inline-block;
}

.cam > div > a::after{
  content: "＞";
  font-size: 14px;
  font-weight: 900;
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%) scale(1,1.4);
}

.sp{
  display: none;
}

.pc{
  display: block;
  margin: 0 auto;
}

@media screen and (max-width:768px){
  
  .sp{
    display: block !important;
  }

  .pc{
    display: none !important;
    margin: 0;
  }
  
  #content {
    margin: 60px auto 0;
    min-width: inherit;
    color: #000;
    overflow: hidden;
  }
  
  .game {
    overflow: hidden;
    font-size: 3.5vw;
  }
  
  .game img{
    max-width: inherit;
    width: 100%;
    height: auto;
  }

  .mv > div{
    text-align: center;
    background-size: cover;
    position: relative;
  }

  .mv > div > div{
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    margin-left: 0;
    padding: 4vw 4vw;
    background: rgba(0,0,0,.8);
  }

  .mv > div > div > a.open{
    width: 100%;
    height: 16vw;
    font-size: 4vw;
    line-height: 1;
    font-weight: 700;
    color: #FFF;
    font-feature-settings: "palt";
    display: block;
    padding-top: 3.5vw;
    box-shadow: 0px 0px 2vw 0px rgba(255, 255, 255, 0.35);
  }

  .mv > div > div > a.open span{
    font-size: 3vw;
    line-height: 1;
    margin-top: 1.5vw;
  }

  .mv > div > div > a.open::after{
    content: "＞";
    font-size: 2.8vw;
    font-weight: 900;
    position: absolute;
    top: 50%;
    right: 5vw;
    transform: translateY(-50%) scale(1.8,1) rotate(90deg);
  }
  
  .mv > div > div > a.close{
    width: 95vw;
    height: 18vw;
    font-size: 4.5vw;
    padding-top: 3.3vw;
    border-radius: 1vw;
    position: absolute;
    bottom: 10vw;
    left: 2.5vw;
  }

  .mv > div > div p{
    font-size: 3.5vw;
    line-height: 1;
    margin-top: 0;
  }

  .mv > div > div p.copy{
    font-size: 2vw;
    margin-top: 2vw;
    display: block;
  }

  .mv > p{
    text-align: center;
    border-bottom: 1px solid #FFF;
  }

  .game_mode{
    width: 100%;
  }

  .game_info{
    text-align: center;
    height: 95vw;
    background: url("../images/sp_game_bk2.jpg") no-repeat center top;
    background-size: cover;
  }

  .game_info > div{
    width: 100%;
    margin: 0 auto;
  }

  .game_info > div > div {
    width: 88%;
    margin-top: 0;
  }

  .game_info > p{
    font-size: 4.5vw;
    line-height: 1.3;
    margin-top: 2vw;
  }
  
  .game_info ul{
    width: 90vw;
    margin: 0 auto;
  }

  .game_info ul li{
    width: 33%;
  }

  .game_mode .tb{
    width: 100%;
    height: 18vw;
    font-size: 4.3vw;
    line-height: 1.3;
    padding-top: 3.5vw;
    background: url("../images/sp_game_txt_bk.png") no-repeat;
    background-size: cover;
    margin: 0 auto;
  }

  .game .note{
    font-size: 2.5vw;
    line-height: 1.5;
    word-break: break-all;
  }

  .game01{
    height: 346vw;
    text-align: center;
    padding-top: 5vw;
    background: url("../images/sp_game01_bk.jpg") no-repeat;
    background-size: 100% 100%;
  }

  .game01 h2{
    margin-bottom: 0;
  }

  .game01 h4{
    width: 100%;
    margin: 0;
  }

  .game01 p{
    font-size: 3.8vw;
    line-height: 1.6;
    text-align: left;
    font-weight: 500;
  }
  
  .game01 p span{
    font-feature-settings: "palt";
  }

  .game01 .g01_pic{
    width: 100vw;
    margin-left: -5vw;
  }

  .game01 > div,
  .game02 > div,
  .game03 > div,
  .game04 > div{
    width: 100%;
    padding: 0 5vw;
  }

  .game01 > div > h3{
    width: 100%;
    margin: 0 auto;
  }
  
  .game01 .tbs{
    width: 100vw;
    height: 33vw;
    overflow: auto;
    padding: 0 5vw;
    margin-left: -5vw;
    margin-top: 5vw;
    position: relative;
  }
  
  .game01 .tbs img{
    width: auto;
    height: 30vw;
    display: block;
  }

  .game01 ul{
    margin-top: 1vw;
  }
  
  .game01 .new{
    position: relative;
  }

  .game01 .new img.pic{
    width: 25vw;
    right: -6vw;
    bottom: 18vw;
  }

  .game02{
    height: 464vw;
    text-align: center;
    padding-top: 5vw;
    background: url("../images/sp_game02_bk.jpg") no-repeat;
    background-size: cover;
  }
  
  .game_mode .game02 .tb{
    padding-top: 6.5vw;
  }
  
  .game_mode .game02 .tb:last-of-type{
    padding-top: 3.5vw;
  }

  .game02 h2{
    margin-bottom: 0;
  }

  .game02 h3{
    margin-bottom: 3vw !important;
  }

  .game02 p{
    font-size: 3.8vw;
    line-height: 1.6;
    font-weight: 500;
    text-align: left;
    white-space: normal;
    margin-bottom: 4vw;
  }

  .game02 p.note{
    margin-top: 2vw;
    margin-bottom: 10vw;
  }

  .sh{
    box-shadow: 1vw 1vw 5vw 0px rgba(0, 0, 0, 0.8);
  }

  .game03{
    height: 218.5vw;
    text-align: center;
    padding-top: 3vw;
    background: url("../images/sp_game03_bk.jpg") no-repeat;
    background-size: 100% 100%;
  }

  .game03 h2{
    margin-bottom: 0;
  }

  .game03 h3{
    margin-bottom: 3vw !important;
  }

  .game03 p{
    font-size: 3.8vw;
    line-height: 1.6;
    font-weight: 500;
    text-align: left;
    margin-bottom: 4vw;
  }

  .game03 .note{
    margin-top: 2vw;
  }
  
  .game03 sup{
    font-size: 2vw;
  }

  .game04{
    height: 174.5vw;
    text-align: center;
    padding-top: 5vw;
    background: url("../images/sp_game04_bk.jpg") no-repeat;
    background-size: cover;
  }

  .game04 h2{
    margin-bottom: 0;
  }

  .game04 h3{
    margin-bottom: 3vw !important;
  }

  .game04 p{
    font-size: 3.8vw;
    line-height: 1.6;
    font-weight: 500;
    text-align: left;
    margin-bottom: 4vw;
  }

  .game04 > div > div{
    text-align: left;
    border-radius: 2vw;
    padding: 4vw 3vw 6vw;
    background: #FFF;
    position: relative;
  }
  
  .game04 > div > div::after{
    content: "";
    width: 45vw;
    height: 34vw;
    background: url("../images/sp_game04_pic.png") right bottom no-repeat;
    background-size: 100% auto;
    position: absolute;
    bottom: 0;
    right: 0;
  }

  .game04 > div > div h3{
    font-size: 4.5vw;
    line-height: 1.5;
    color: #7437bb;
    text-align: center;
    margin-bottom: 4vw !important;
  }

  .game04 > div > div ul{
    padding: 3vw;
    border-radius: 2vw;
  }

  .game04 > div > div ul li{
    font-size: 3vw;
    line-height: 1.3;
    font-weight: 400;
    color: #000;
  }

  .game04 > div > div ul li sup{
    font-size: 2vw;
  }

  .game04 > div > div ul li + li{
    margin-top: 1vw;
  }

  .game04 .note{
    margin-top: 2vw;
  }

  .lineup{
    max-width: inherit;
    padding: 10vw 0;
  }

  .lineup > div{
    width: 100%;
  }

  .lineup > div h2{
    width: 100%;
    margin: 0 auto 5vw;
  }

  .lineup > div > div{
    width: 100vw;
    padding: 0 3vw;
    overflow: auto;
  }
  
  .lineup > div > div img{
    width: auto;
    height: 115vw;
  }
  
  .lineup > div > div + div img{
    height: 95.5vw;
  }

  .lineup > div > div + div{
    margin-top: 5vw;
  }

  .lineup ul{
    width: 166.5vw;
    display: flex;
    justify-content: space-between;
    position: absolute;
    top: 9.5vw;
    left: 34vw;
  }
  
  .lineup > div > div + div ul{
    width: 165vw;
    left: 35vw
  }
  
  .lineup ul li{
    width: 12.5%;
  }
  
  .lineup > div > div + div ul li{
    width: 33.33%;
  }

  .lineup ul li a{
    font-size: 3.6vw;
    text-decoration: underline;
  }

  .cam{
    max-width: inherit;
    margin: 0 auto;
    padding: 0 5vw;
    padding-bottom: 5vw;
  }
  
  .cam ul.note{
    font-size: 2.8vw;
    line-height: 1.4;
    margin: 0;
  }

  .cam > div{
    width: 100%;
    margin: 0 auto;
    padding: 0 2vw;
  }

  .cam h2{
    width: 100%;
    margin: 0;
  }

  .cam h3{
    width: 100%;
    height: 48.5vw;
    font-size: 5vw;
    line-height: 1.4;
    color: #FFF;
    text-align: center;
    padding: 5vw 3vw 0;
    margin-bottom: 5vw;
    background: url("../images/sp_cam_title_bk01.png") no-repeat;
    background-size: cover;
  }

  .cam h3 span{
    font-size: 4vw;
    line-height: 1.4;
    display: block;
    border-bottom: 1px solid #FFF;
    padding-bottom: 3vw;
    margin-bottom: 3vw;
  }

  .cam p{
    font-size: 3.8vw;
    line-height: 1.6;
    font-weight: 500;
    text-align: left;
    margin-bottom: 3vw;
  }
  
  .cam p.close{
    width: 102%;
    height: 120.5vw;
    font-size: 6vw;
    line-height: 1.4;
    border-radius: 1vw;
    padding: 2vw 0;
    box-sizing: content-box;
    position: absolute;
    top: -20vw;
    left: -1%;
    z-index: 1;
  }

  .cam p.close.sm{
    height: 336.5vw;
    font-size: 5vw;
    top: -17vw;
  }
  
  .cam .note{
    margin: 6vw 0 8vw !important;
  }

  .cam h3:last-of-type{
    height: 56.5vw;
    padding: 7vw 3vw 0;
    background: url("../images/sp_cam_title_bk02.png") no-repeat;
    background-size: cover
  }

  .cam h3:last-of-type::after{
    width: 9vw;
    height: 9vw;
    background: url("../images/icon_x.png") no-repeat;
    background-size: 100% auto;
    position: absolute;
    top: 2vw;
    right: 2vw;
  }

  .cam .box{
    display: block;
  }

  .cam .box > div{
    width: 100%;
  }

  .cam .box > div + div{
    width: 100%;
    border: 1px solid #FFF;
  }

  .cam .box p + p{
    text-align: center;
    font-size: 4.3vw;
    font-weight: 700;
    margin-top: 5vw;
    padding: 3vw 0;
    border-top: 1px solid #FFF;
    border-bottom: 1px solid #FFF;
  }

  .cam .box ul{
    display: block;
  }

  .cam .box ul li + li{
    border-left: none;
    border-top: 1px solid #FFF;
  }

  .cam .box ul img{
    width: 100%;
    height: auto;
  }

  .cam > div > a{
    width: 100%;
    height: auto;
    font-size: 4.3vw;
    line-height: 1.5;
    border-radius: 2vw;
    display: block;
    padding: 3vw 0;
    margin: 5vw auto 0;
    position: relative;
  }

  .cam > div > a span{
    font-size: 3vw;
    transform: translateY(.5em);
    display: inline-block;
  }

  .cam > div > a::after{
    font-size: 2.8vw;
    right: 5vw;
    transform: translateY(-50%) scale(1,1.6);
  }

   
}