@import url('https://fonts.googleapis.com/css?family=Press+Start+2P&display=swap');

body {
	background-image: none;
	padding: 0;
	margin: 0;
	height: 100%;
	-webkit-text-size-adjust: none;
	min-width: initial;
}
ul, li { list-style: none; margin: 0; padding: 0; }
a { text-decoration: none; }

/*==================== NAV ====================*/
#sp_nav {
	width: 100%;
	padding: 0 1%;
	box-sizing: border-box;
	position: fixed;
	top:0;
	z-index: 1000;
	display: -webkit-box; display: -ms-flexbox; display: flex;
	-ms-flex-wrap: nowrap; flex-wrap: nowrap;
	-webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;
	height: 100px;
	background-color: #FFB300;
}
#sp_nav > h1 {
	display: block;
	width: 34.3%;
	max-width: 150px;
	margin: 0;
	background: url(/image/dra/logo-dragonsH.svg) no-repeat left center;
}
#sp_nav > h1 > a { display: block; width: 100%; text-indent: -99999px; overflow: hidden; height: 100%; }
#sp_nav ul {
	width: 100%;
	margin: 0;
	padding: 0 0 0 50px;
	list-style: none;
	align-items: center;
	display: -webkit-box; display: -ms-flexbox; display: flex;
	-ms-flex-wrap: nowrap; flex-wrap: nowrap;
	-webkit-box-pack: end;-ms-flex-pack: end;justify-content: flex-end;
	-webkit-box-align: center; -ms-flex-align: center; align-items: center;
	font-family: 'Press Start 2P', cursive;
	font-weight: 400;
	font-style: normal;
	font-size: 164.3%;
}
#sp_nav ul li:first-child,
#sp_nav ul li { text-align: center; font-weight: bold; border: none; padding: 0 20px; }
#sp_nav ul li span { font-size: 14px; font-weight: normal; display: block; line-height: 1; background-color: #15438e; color: #FFFFFF; padding: 3px 0; width: 65%; margin-right: auto; margin-left: auto; }
#sp_nav ul li a,
#sp_nav ul li a:link,
#sp_nav ul li a:visited {
	color: #FFFFFF;
	display: block;
	width: 100%;
	height: 77px;
	margin-top: 40px;
	padding: 0;
	min-height: initial;
}
#sp_nav ul li a:after { display: none; }
#sp_nav ul li a:hover { text-decoration: none; }
#sp_nav ul li a:hover:after {
	display: block;
	position: static;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	display: block;
	font-size: 20px;
	content: "\f0d7";
	color: #2FE0FF;
}
#sp_nav ul li.live a:hover:after,
#sp_nav ul li.goods a:hover:after { content: "\f35d"; }


/*==================== header ====================*/
div.spHeader {
	min-width:1000px;
	margin:100px 0 0;
	position: static;
}
div.spHeader > h1 {
	background-image: url(../image/mainView.jpg);
	background-repeat:no-repeat;
	background-position: center top;
	background-size: cover;
	text-indent: -99999px;
	overflow: hidden;
	height: 40vw;
	margin: 0 auto;
	text-align: center;
}


/*==================== contents ====================*/
main {
	margin-top: -100px;
	padding-bottom: 100px;
	background-color: #FFF;
	font-family: vdl-linegr, sans-serif;
	font-weight: 400;
	font-style: normal;
}
section {
	margin-top: 100px;
	padding-bottom: 100px;
	margin-bottom: -100px;
	padding-top: 100px;
	position: static;
}
@media all and (-ms-high-contrast:none) {
	section:first-child {margin-top: 0;}
}
section { background-color: #FFCC99; }
section:nth-of-type(1),section:nth-of-type(4) {
	background-color: #2FE0FF;
	background-image: url(../image/bg01TL.png),url(../image/bg01TR.png),url(../image/bg01BL.png),url(../image/bg01BR.png);
	background-position: left top,right top,left bottom,right bottom;
	background-repeat: no-repeat,no-repeat,no-repeat,no-repeat;
}
section:nth-of-type(2),section:nth-of-type(5) {
	background-color: #66CC00;
	background-image: url(../image/bg02TL.png),url(../image/bg02TR.png),url(../image/bg02BL.png),url(../image/bg02BR.png);
	background-position: left top,right top,left bottom,right bottom;
	background-repeat: no-repeat,no-repeat,no-repeat,no-repeat;
}
section:nth-of-type(3),section:nth-of-type(6) {
	background-color: #F7EB82;
	background-image: url(../image/bg03TL.png),url(../image/bg03TR.png),url(../image/bg03BL.png),url(../image/bg03BR.png);
	background-position: left top,right top,left bottom,right bottom;
	background-repeat: no-repeat,no-repeat,no-repeat,no-repeat;
}
section#news { background-color: #FFCC99; background-image: none; }
.content { margin: 0 auto; max-width: 1000px; line-height: 1.6; color: #3F0000; }
.content .flexBox.tate > div,
.content .flexBox.tate > div { margin: 0 20px 15px 0; }
.contInner {
	background-image: url(../image/contentBg.png);
	background-size: 100% 100%;
	box-sizing: border-box;
	min-height: 300px;
	padding: 30px;
}
.pcdisplay { display: block; }
.mbdisplay { display: none; }
/* iframe レスポンシブ */
.movieWrap {
    position: relative;
    width: calc(100% - 10px);
    max-width: 800px;
    margin: 0 auto;
}
.iframeWrap {
    height: 0;
    padding-bottom: 56.25%;
}
iframe {
    position: absolute;
    top: 0;
    left: 0;
}
.memo {
	border: #0d2195 8px dashed;
	padding: 8px;
	box-sizing: border-box;
}
.memo > p {
	background-color: rgba(255,255,255,0.7);
	box-sizing: border-box;
	padding: 25px;
}
.fontG { font-family: 'Press Start 2P', cursive; }
.fontA { font-family: vdl-logog,sans-serif; }


/*==================== 見出し ====================*/
h2 {
	margin: 0 0 50px;
	border-left: none;
	padding: 0;
	min-height: initial;
	color: initial;
	background-color: transparent;
	border-bottom: none;
	font-size: 142.9%;
	text-align: center;
	box-sizing: border-box;
	font-weight: 900;
}
section#news h2 { font-family: 'Press Start 2P', cursive; font-size: 20px; color: #FF7200; width: auto; }
h3 {
	margin: 0 0 10px;
	padding: 0;
	min-height: 22px;
	font-size: 26px;
	line-height: 1.5;
	border-left: none;
	color: #3F0000;
}


/*==================== ABOUT ====================*/
.date {
	display: -webkit-box;display: -ms-flexbox;display: flex;
	-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;
	-webkit-box-align: center;-ms-flex-align: center;align-items: center;
}
.date > div { margin: 0 20px; }
.date > div:last-child { margin: 0 0 0 20px; }
.date > div > a { display: block; margin-bottom: 8px; }
.saleWrap { border:#400000 4px solid; }
section#about h5 { color: #400000; border-color: #400000; border-width: 2px; padding-bottom: 10px; margin-bottom: 10px; }
.saledate { padding: 10px 20px; font-size: 24px; }
.saledate > div:nth-of-type(2) { margin: 0 50px; }
.saledate > div > span:nth-of-type(1) { font-size: 18px; color: #0D2195; display: block; padding-right: 15px; font-family: vdl-linegr, sans-serif; }
.saledate > div > span:nth-of-type(2) { font-size: 16px; padding: 0 5px; }
#attention {
	border-top: #FFFF00 4px solid;
	border-bottom: #FFFF00 4px solid;
	padding: 30px 0;
}


/*==================== TICKET ====================*/


/*==================== EVENT ====================*/
section#event {}


/*==================== PRESENT ====================*/
section#present { font-size: 20px; }
section#present h3 { font-size: 40px; text-align: center; padding: 30px 0; }
section#present h3 span { color: #0C1F93; }


/*==================== NEWS ====================*/
#newsScroll { position: relative; padding: 20px 0; border: #FFF 1px solid; }
#newsScroll .viewport { height: 160px; overflow: hidden; position: relative; }
#newsScroll .overview {
  list-style: none;
  position: absolute;
  left: 0;
  top: 0;
  padding:0 10px;
  margin: 0;
}
#newsScroll .scrollbar {
  background: transparent;
  position: relative;
  background-position: 0 0;
  float: right;
  width: 10px;
}
#newsScroll .track {
  background: transparent;
  height: 100%;
  width: 10px;
  position: relative;
  padding: 0 1px;
}
#newsScroll .thumb {
  background: #FF8237;
  height: 20px;
  width: 10px;
  cursor: pointer;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
}
#newsScroll .thumb .end {
  background: #FF8237;
  overflow: hidden;
  height: 5px;
  width: 10px;
}
#newsScroll .disable { display: none; }
#newsScroll .noSelect {
  -ms-user-select: none;
      user-select: none;
  -o-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
}
section#news ul { font-size: 16px; line-height: 2; }
section#news ul li { padding-left:20px; margin-bottom: 10px; border:none; }
section#news ul li span { color: #CC3333; margin-right: 20px; }
section#news ul li a { color: #480000; }
section#news ul li a:after { display: none; }


/*==================== SNS ====================*/
#snsWrap {
	width: 100%;
	height: 80px;
	font-size: 22px;
	line-height: 80px;
	color: #FFF;
	background-color: #FFB300;
	box-sizing: border-box;
	padding-right: 80px;
	display: -webkit-box;display: -ms-flexbox;display: flex;
	-webkit-box-pack: end;-ms-flex-pack: end;justify-content: flex-end;
	font-family: vdl-logog, sans-serif;
	font-weight: 400;
	font-style: normal;
}
#snsWrap a {
	background-color: #FFF;
	width: 40px;
	height: 40px;
	padding: 5px;
	margin-left: 10px;
	margin-top: 15px;
}
#snsWrap a img { height: 40px; width: auto; display: block; }
#snsWrap a.tw { width: 50px; height: 50px; padding:0; }
#snsWrap a.tw img { height: 50px; }


/*==================== BUTTON ====================*/
*[class^="button-"],
.button { margin: 0 auto; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; }
*[class^="button-"]:hover,
.button:hover { -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; }
*[class^="button-"] > a:hover,
.button > a:hover { text-decoration: none; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; }
*[class^="button-"] > a,
.button > a { color: #FFF; padding: 10px 0; }/*色変更*/
.button.line { border-color: #FFF; color: #FFF; }/*色変更*/
*[class^="button-"].line,
.button.line,
*[class^="button-"].line > a,
.button.line > a { background-color: #09063F; }/*色変更*/
.button.line > a { color: #FFF; }/*色変更*/
.button.line:hover,.button.line > a:hover { border-color: #FFF; background-color: #FFF; color: #0A063F; }/*色変更*/


/* ==================== TO TOP ==================== */
.topToFix { right: 0; z-index: 1000; }
/*==================== FOOTER ====================*/
footer { min-width: initial; position: relative; }
/*==================== OTHER ====================*/
.vp100 { width: 100% }
.vp90 { width: 90% }
.vp80 { width: 80% }
.vp70 { width: 70% }
.vp60 { width: 60% }
.vp50 { width: 50% }
.vp40 { width: 40% }
.vp30 { width: 30% }
.vp20 { width: 20% }
/* ========== 各カテゴリ重ね順 ========== */
div.spHeader { z-index: 150 }
section#about { z-index: 90 }
section#ticket { z-index: 80 }
section#event { z-index: 70 }
section#present { z-index: 60 }
section#goods { z-index: 50 }
section#gourmet { z-index: 40 }
section#news { z-index: 20 }
#sp_footer { z-index: 20 }

/*
====================================================================================================
671～1040
====================================================================================================
*/
@media screen and (min-width:671px) and ( max-width:1040px) {
/*671～1040 START*/
/*==================== NAV ====================*/
#sp_nav,
#sp_nav > h1,
#sp_nav > h1 > a { height: 100px; }
#sp_nav > h1 { background-size: 100% auto; }
#sp_nav ul { font-size: 150%; }

/*==================== header ====================*/
div.spHeader { margin-top: 100px; min-width:initial; }
.content { padding: 10px; }
section:last-of-type { padding-bottom: 100px; }
.vp100 { width: 100% }
.vp90 { width: 90% }
.vp80 { width: 80% }
.vp70 { width: 70% }
.vp60 { width: 60% }
.vp50 { width: 50% }
.vp40 { width: 40% }
.vp30 { width: 30% }
.vp20 { width: 20% }
#sp_footer { width: auto; }
#sp_footer footer { display: none; }

/*==================== contents ====================*/
.movieWrap { max-width: 800px; }

/*==================== ABOUT ====================*/
section#about .flexBox { display: block; }
.saledate { padding: 20px; }
.saledate > div:nth-of-type(2) { margin: 10px 0; }
.centerW { text-align: center; }
.centerW a { display: block; }


/*==================== TICKET ====================*/
section#ticket .flexBox { display: block; }
section#ticket .flexBox .vp60 { width: auto; }


/*==================== EVENT ====================*/



/*==================== PRESENT ====================*/



/*==================== NEWS ====================*/
section#news ul li span { display: block; }

/*==================== SNS ====================*/
#snsWrap { -webkit-box-pack: start;-ms-flex-pack: start;justify-content: flex-start; padding-left: 30px; }
#snsWrap p { margin-right: 30px; }
/*671～1040 END*/
}
/*
====================================================================================================
～670
====================================================================================================
*/
@media screen and ( max-width:670px ){
img { max-width: 100%; }
/*～670 START*/
/*==================== NAV ====================*/
#sp_nav { height: 100px; display: block; }
#sp_nav > h1,
#sp_nav > h1 > a { height: 40px; margin: 10px 0 5px; }
#sp_nav > h1 { background-size:auto 100%; width: 100% }
#sp_nav ul { font-size: 80%; padding: 0; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
#sp_nav ul li:first-child,#sp_nav ul li { padding: 0; }
#sp_nav ul li a,
#sp_nav ul li a:link,
#sp_nav ul li a:visited { height: 40px; margin-top: 0; padding-top: 10px; }
#sp_nav ul li a:hover:after { font-size: 10px; }

/*==================== header ====================*/
div.spHeader {
	min-width:initial;
	margin-top: 100px;
}
div.spHeader > h1 {
	background-image: url(../image/mainView_sp.jpg);
	height: 66.57vw;
	max-height: 447px;
}

/*==================== contents ====================*/
main { margin-top: -50px; padding-bottom: 50px; }
section { margin-top: 50px; padding-top: 50px; }
section:nth-of-type(1),section:nth-of-type(4), 
section:nth-of-type(2),section:nth-of-type(5),
section:nth-of-type(3),section:nth-of-type(6) { background-image: none; }
.content { padding: 10px; }
.pcdisplay { display: none; }
.mbdisplay { display: block; }
.movieWrap { max-width: 670px; }

/*==================== 見出し ====================*/
h2 {
	margin: 0 0 30px;
	width: 100%;
}
h2 > span {
	font-size: 1.5em;
	padding: 10px 0;
}
h2.right { float: none; text-align: center; }
h3 { font-size: 150%; }

/*==================== ABOUT ====================*/
section#about .flexBox { display: block; }
section#about .full-image img { width: 50%; max-width: 220px; }
.date { display: block; margin-top: 20px; }
.date.mgB40 { margin-bottom: 20px !important; }
.date > div { margin: 0; }
.date > div:first-of-type { margin-bottom: 20px; }
.date > div:last-of-type { margin-left: 0; }
.saledate { padding: 20px; font-size: 20px; }
.saledate > div:nth-of-type(2) { margin: 10px 0; }
.centerW { text-align: center; }
.centerW a { display: block; }


/*==================== TICKET ====================*/
section#ticket .flexBox { display: block; }
section#ticket .flexBox .vp60 { width: auto; }
section#ticket .flexBox .vp60.pdL50 { padding-left: 0!important; }
section#ticket .flexBox .vp60 .right { text-align: center; }
section#ticket .contInner { padding: 15px; }

/*==================== EVENT ====================*/


/*==================== PRESENT ====================*/
section#present h3 { font-size: 30px; }


/*==================== NEWS ====================*/
section#news ul li span { display: block; }

/*==================== SNS ====================*/
#snsWrap {
	height: 50px;
	font-size: 14px;
	line-height: 50px;
	padding-right: 0;
	-webkit-box-pack: start;-ms-flex-pack: start;justify-content: flex-start;
	-ms-flex-line-pack: center;align-content: center;
}
#snsWrap p { margin-left: 5px; }
#snsWrap a {
	background-color: #FFF;
	width: 20px;
	height: 20px;
	padding: 5px;
	margin-left: 8px;
	margin-top: 0;
	-ms-flex-item-align: center;-ms-grid-row-align: center;align-self: center;
}
#snsWrap a img { height: 20px; width: auto; display: block; }
#snsWrap a.tw { width: 30px; height: 30px; padding:0; }
#snsWrap a.tw img { height: 30px; }

/* ==================== TO TOP ==================== */
.topToFix { width:35px; height:35px; margin-right: 5px; }
.topToFix a { width:25px; height:25px; }
.topToFix img { width:25px; vertical-align:sub; }
/*==================== FOOTER ====================*/
#sp_footer { width: auto; }
#sp_footer footer { display: none; }
/*==================== OTHER ====================*/
.mgB50 { margin-bottom: 25px!important; }
.vp100 { width: 100% }
.vp90 { width: 100% }
.vp80 { width: 100% }
.vp70 { width: 100% }
.vp60 { width: 100% }
.vp50 { width: 100% }
.vp40 { width: 100% }
.vp30 { width: 100% }
.vp20 { width: 100% }
/*～670 END*/
}