@charset "UTF-8";
/* ---------------------------------- */
/* layout.css                         */
/* ---------------------------------- */

/* =================================
   @MAIN
================================= */
#mainvisual{
  position: relative;
  background: url(../images/shared/mv.jpg) no-repeat center top;
  background-size: cover;
  width: 100%;
  height: 700px;
}
#mainvisual p{
  position: absolute;
}
#mainvisual p.info{
  bottom: -70px;
  left: 50%;
  margin-left: -375px;
}
#mainvisual p.thanks {
    bottom: -210px;
    left: 50%;
    margin-left: -375px;
}
#mainvisual p img{
  width: 100%;
  height: auto;
}
#mainvisual h2 {
  position: absolute;
  left: 50%;
  bottom: 20px;
  margin-left: -375px;
}
#mainvisual .grad {
  position: absolute;
  background: url(../images/shared/grad.png) repeat-x 0 center;
  bottom: 0;
  width: 100%;
  height: 188px;
}

#mainvisual .detail {
  text-align: center;
  padding: 0 0 48px;
  margin: 247px 0 0;
}

.btn a:hover,.btn a:visited,.btn a:focus,.btn a:active{
  outline: none;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  tap-highlight-color: rgba(0,0,0,0);
}

.pc{
  display: block;
}

.sp{
  display: none;
}

@media (max-width: 750px) {
#mainvisual{
  width: 750px;
  height: 360px;
}
#mainvisual h2 {
  bottom: -150px;
}
#mainvisual p.info{
  bottom: -250px;
}
#mainvisual p.thanks {
    bottom: -390px;
}

.pc{
  display: none;
}

.sp{
  display: block;
}
}

/* =================================
   @NAVI
================================= */
nav{
  margin: 235px auto 0;
}

nav ul.navi{
  width: 730px;
  margin: 0 auto;
  padding: 0 10px;
}

nav ul.navi li{
  float: left;
  width: 345px;
  margin-right: 20px;
}

nav ul.navi li.big{
  float: left;
  width: 710px;
  margin-right: 0px;
}

nav ul.navi li.new{
  position: relative;
}
nav ul.navi li.new:after{
  content: "";
  background: url(../images/shared/newicon.png) no-repeat center top;
  position: absolute;
  top: -20px;
  left: 50%;
  width: 92px;
  height: 34px;
  margin-left: -46px;
}

nav ul.navi li.party{
  background: url(../images/shared/nav_bg.jpg) no-repeat center top;
  width: 710px;
  height: 98px;
  padding: 55px 10px 0;
}

#top nav li.top img.on,
#ticket nav li.ticket img.on,
#live nav li.live img.on,
#stage nav li.stage img.on,
#attraction nav li.attraction img.on,
#ar nav li.ar img.on,
#cup nav li.cup img.on,
#goods nav li.goods img.on,
#after nav li.after img.on{
  opacity: 1!important;
}

@media (max-width: 750px) {
nav{
  margin: 418px auto 0;
}

}

/* =================================
   @CONTENTS
================================= */

section{
  position: relative;
  margin: 0px auto 0;
  padding: 150px 0 0;
  overflow: hidden;
}

section h3{
  position: absolute;
  top: 70px;
  left: 50%;
  margin-left: -424px;
}

section .line{
  background: #ff3b72;
  width: 100%;
  height: 4px;
  margin-bottom: 80px;
}

section .caution{
  font-size: 14px;
  margin: -20px 0 0;
  padding: 0 0 20px;
  text-align: center;
}

#contents .news_area{
  width: 708px;
  margin: 40px auto 0;
}

#contents .news_area a{
  color: #5d5d5d;
  text-decoration: underline;
}

#contents .news_area a:hover{
  color: #5d5d5d;
  text-decoration: none;
}

#contents .news_area dl{
  padding: 20px;
  border: 4px solid #ff3b72;
  border-radius: 0px 0px 10px 10px;
  color: #000;
}

#contents .news_area dl dt{
  color: #ff3b72;
  font-size: 22px;
  -webkit-text-size-adjust: 100%;
  font-weight: bold;
}

#contents .news_area dl dd{
  font-size: 18px;
  -webkit-text-size-adjust: 100%;
}

#about_area{
  padding: 150px 0 60px;
}

#about_area .btn_area{
  position: relative;
}

#about_area .btn_area p:last-child{
  position: absolute;
  bottom: 80px;
  left: 50%;
  margin-left: -135px;
}

#about_area .btn_area_02{
  position: relative;
}

#about_area .btn_area_02 p:last-child{
  position: absolute;
  bottom: 40px;
  left: 50%;
  margin-left: -135px;
}

#about_area .btn_area_03{
  position: relative;
}

#about_area .btn_area_03 p:last-child{
  position: absolute;
  bottom: 20px;
  left: 50%;
  margin-left: -135px;
}

#about_area02{
  position: relative;
  background: #f9f9f9;
  margin: 25px 0 0;
  padding: 60px 0;
}

#about_area02 h4{
  position: absolute;
  top: -25px;
}

#about_area02 .inner02{
  width: 669px;
  margin: 0 auto;
}

#about_area02 .btn{
  margin-top: 30px;
}

#about_area02 .detail{
  display: none;
}

#ticket_area{
  padding: 150px 0 0px;
}


#ticket_area h3{
  top: 70px;
}

#ticket_area .btn_area {
    position: relative;
}
#ticket_area .btn_area p:last-child {
    position: absolute;
    top: 233px;
    left: 50%;
    margin-left: -312px;
}

#ticket_area02{
  position: relative;
  background: #f9f9f9;
  margin: 25px 0 0;
  padding: 80px 0 60px;
}

#ticket_area02 h4{
  position: absolute;
  top: -25px;
}

#ticket_area02 ul{
  width: 675px;
  margin: 30px auto;
}
#ticket_area02 ul li{
  float: left;
  margin-right: 22px;
}
#ticket_area02 ul li:last-child{
  margin-right: 0;
}

#privilege_area{
  padding: 150px 0 60px;
}


#cup_area{
  padding: 150px 0 70px;
}

#cup_area h3{
  top: 70px;
}

#cup_area .subnav{
  width: 710px;
  margin: 0 auto 40px;
}

#cup_area .subnav li{
  float: left;
  width: 224px;
  margin-right: 19px;
}

#cup_area .subnav li:last-child{
  margin-right: 0px;
}

#cup_area .btn_area{
  position: relative;
}

#cup_area .btn_area p:last-child{
  position: absolute;
  bottom: 300px;
  left: 50%;
  margin-left: -135px;
}

#cup_area02{
  position: relative;
  background: #f9f9f9;
  margin: 25px 0 0;
  padding: 60px 0;
}

#cup_area02 h4{
  position: absolute;
  top: -25px;
}

#cup_area02 ul{
  width: 675px;
  margin: 30px auto;
}
#cup_area02 ul li{
  float: left;
  margin-right: 22px;
}
#cup_area02 ul li:last-child{
  margin-right: 0;
}

#goods_area{
  padding: 150px 0 0px;
}

#goods_area p{
  position: relative;
}
#goods_area p span.newl{
  content: "";
  background: url(../images/shared/newicon.png) no-repeat center top;
  position: absolute;
  top: -10px;
  left: 50%;
  width: 92px;
  height: 34px;
  margin-left: -239px;
}
#goods_area p span.newr{
  content: "";
  background: url(../images/shared/newicon.png) no-repeat center top;
  position: absolute;
  top: -10px;
  left: 50%;
  width: 92px;
  height: 34px;
  margin-left: 137px;
}

#goods_area p span.newl2{
  content: "";
  background: url(../images/shared/newicon.png) no-repeat center top;
  position: absolute;
  top: -28px;
  left: 50%;
  width: 92px;
  height: 34px;
  margin-left: -239px;
}
#goods_area p span.newr2{
  content: "";
  background: url(../images/shared/newicon.png) no-repeat center top;
  position: absolute;
  top: -28px;
  left: 50%;
  width: 92px;
  height: 34px;
  margin-left: 137px;
}

#attraction_area{
  padding: 150px 0 0px;
}

#attraction_area .btn_area,#attraction_area .btn_area02{
  position: relative;
}

#attraction_area .btn_area p:last-child{
  position: absolute;
  bottom: 69px;
  left: 50%;
  margin-left: -311px;
}

#attraction_area .btn_area02 p:last-child{
  position: absolute;
  bottom: 79px;
  left: 50%;
  margin-left: -311px;
}

#live_area{
  padding: 150px 0 0px;
}

#live_area .btn_area{
  position: relative;
}

#live_area .btn_area p:last-child{
  position: absolute;
  bottom: 32px;
  left: 50%;
  margin-left: -135px;
}

#live_area .subnav{
  width: 535px;
  margin: 0 auto 40px;
}

#live_area .subnav li{
  float: left;
  width: 258px;
  margin-right: 18px;
}

#live_area .subnav li:last-child{
  margin-right: 0px;
}

#AR_area{
  padding: 150px 0 0px;
}

#AR_area .subnav{
  width: 710px;
  margin: 0 auto 40px;
}

#AR_area .subnav li{
  float: left;
  width: 224px;
  margin-right: 19px;
}

#AR_area .subnav li:last-child{
  margin-right: 0px;
}

#AR_area .marker{
  position: relative;
  background: url(../images/AR/bg_marker.jpg) no-repeat center top;
  width: 750px;
  height: 707px;
  margin: 0 auto;
}

#AR_area .marker .bg {
  position: absolute;
  top: 274px;
  left: 50%;
  margin-left: -276px;
}

#AR_area .marker .slide {
  position: absolute;
  width: 546px;
  height: 344px;
  top: 241px;
  left: 50%;
  margin-left: -273px;
}

#AR_area .slide-nav {
  position: absolute;
  width: 450px;
  height: 40px;
  top: 609px;
  left: 50%;
  margin-left: -225px;
}

#AR_area #arrows-nav {
  position: absolute;
  width: 557px;
  top: 628px;
  left: 50%;
  margin-left: -277px;
}

#AR_area02{
  position: relative;
  background: #f9f9f9;
  margin: 25px 0 0;
  padding: 00;
}

#AR_area02 h4{
  position: absolute;
  top: -25px;
}

#AR_area03{
  position: relative;
  background: #feecf0;
  margin: 0;
  padding: 0px 0 30px;
}

#stage_area .btn_area{
  position: relative;
}

#stage_area .btn_area p:last-child{
  position: absolute;
  top: 248px;
  left: 50%;
  margin-left: -135px;
}

#lottery_area .btn_area{
  position: relative;
}

#lottery_area .btn_area p:last-child{
  position: absolute;
  bottom: 38px;
  left: 50%;
  margin-left: -135px;
}

@media (max-width: 750px) {

section{
  padding: 230px 0 0;
}

section h3{
  top: 70px;
}

section .line{
  display: none;
}

section .caution{
  font-size: 18px;
}

#about_area{
  padding: 230px 0 60px;
}

#ticket_area{
  padding: 230px 0 0px;
}

#privilege_area{
  padding: 230px 0 60px;
}

#cup_area .subnav{
  width: 710px;
  margin: 90px auto 40px;
}

#goods_area{
  padding: 230px 0 0px;
}

#attraction_area{
  padding: 230px 0 0px;
}

#live_area{
  padding: 230px 0 0px;
}

#AR_area{
  padding: 230px 0 0px;
}

}


/* 概要
---------------------- */
.container .about{
  margin: 10px 0 20px;
}
.container .about em{
  color: #ff3d73;
}

.container .period{
  background-color: #fff7f7;
  border-radius: 10px;
  width: 670px;
  padding: 52px 0 15px;
  margin: -43px auto 30px;
}
.container .period dl {
  width: 535px;
  margin: 0 auto 15px;
}
.container .period dt,
.container .period dd {
  float: left;
}
.container .period dt {
  background-color: #ff3b72;
  border-radius: 20px;
  width: 170px;
  font-size: 18px;
  color: #fff;
  text-align: center;
  line-height: 1;
  padding: 5px 0 3px;
  margin: 5px 0 0;
}
.container .period dd {
  margin: 0 0 0 10px;
}