@charset "utf-8";
/* CSS Document */

/* Common settings
--------------------------------------------------------- */
*,*:before,*:after{box-sizing:border-box}
html,body {height: 100%; margin: 0 auto;}
a {text-decoration:none;}
img {max-width:100%;}

html #devileve_con{
  background:initial;
	font-size: 1.3em;
	}
	
/* パンくず調整 */
#devileve_con{padding: 34px 0 0 0;}
#devileve_con .breadcrumb ul{background-color:#FFF;}
/* --------------------------------------------------------- */

#devileve_con h3,#devileve_con h4,#devileve_con h5 {
  margin-top: 0;
  margin-left: 0;
  padding-left: 0;
	font-size: 1.5em;
  line-height: 2em;
  font-weight: bolder;
	}
#devileve_con h3 {
  width: 100%;
  text-align: center;
  margin-bottom: 5%;
	}
#devileve_con h3 img { width: 48%;}
@media screen and (max-width: 640px) {
  #devileve_con h3 {margin-top:2em;}
	#devileve_con h3 img {width: 90%;}
	}

#devileve_con strong { color: #d90400;}
#devileve_con hr {
  height: 1px;
  background: #bbb;
  background-image: -webkit-linear-gradient(left, #eee, #777, #eee);
  background-image: -moz-linear-gradient(left, #eee, #777, #eee);
  background-image: -ms-linear-gradient(left, #eee, #777, #eee);
  background-image: -o-linear-gradient(left, #eee, #777, #eee);
	}

/*=============================================================================================*/

#devil_eve{line-height: 1.8em; letter-spacing: 0.1em;background-color: #000;}
#devil_eve article{padding: 10%;}
#devil_eve a{color: #d90400; font-weight: bold;}

.cnt{background:linear-gradient(90deg, #ffffff 50%, #000 50%,#000);}
.cnt p span {background:linear-gradient(transparent 0%, #ffffff 0%); color: #fff;}

.cnt2{background:linear-gradient(90deg, #000 50%, #ffffff 50%,#ffffff); color: #fff;}
.cnt2 p{margin-top:1em;}
.cnt2 p span{background:linear-gradient(transparent 0%, #000 0%);}

.cnt_white{background-color: #fff; color: #000000;}
.cnt_white p span {background:linear-gradient(transparent 0%, #fff 0%);}

.cnt_red{background-color: #d90400; color: #fff;}
.cnt_red p{margin-top:1em;}
.cnt_red p span{background:linear-gradient(transparent 0%, #d90400 0%);}

.cnt_black{background-color: #000000; color: #fff;}
.cnt_black p{margin-top:1em;}
.cnt_black p span{background:linear-gradient(transparent 0%, #fff 0%);}

.bg_top, .bg_bottom{width: 100%; position: absolute; z-index: 0;}
.bg_top {
  background: url(../img/top.png) no-repeat center top;
  background-size: 100% auto; height: 100vh; top: -80px;
	}
.bg_bottom {
  background: url(../img/bottom.png?r2) no-repeat center bottom;
  background-size: 100% auto; height: 12vh; top: 320px;
	}
.de_top_text{
  text-align:center;
	color:#d90400;
	font-weight:bold;
	font-size:1.8em;
	}
.de_top_text img{width:25px;}

.de_overview_area{
	/*background:#fff;*/
	background: #000;
	margin: 0 auto 2em;
	padding: 1.4em;
}
.de_overview_title{
    text-align: center;
    color: #d90400;
    font-weight: bold;
    font-size: 1.6em;
    margin: 0 auto 0.2em;
	}
.de_overview_text{
  text-align:center;
	color:#fff;
	font-weight:bold;
	font-size:1.4em;
	line-height: 1.6em;
	}
.de_overview_title img{width:26px;}

#de_top{
  position:relative;
	width:100%;
	text-align:center;	
	/*padding-bottom: 120px;*//* キービジュアルないときは生かす・ある時は0にする*/
	padding-bottom: 0;
	}
#de_top .keyvisual{
  margin: 3em auto 0;
	width: 60%;
	}
/*#de_title{
 	position:relative;
	z-index:100;
	padding-top:8%;
}*/
#de_title img{
	max-width: 1000px;
}	

@media screen and (max-width: 786px) {
  .cnt,.cnt2{min-height: 240px;}
	#de_top{
		/*padding-bottom: 40px;*//* キービジュアルないときは生かす・ある時は0にする*/
	}
	#devil_eve article{padding: 3%;}
  #de_title img, #de_subtitle img {
    max-width:98%;
		margin:0 auto;}
  /*#de_title {padding-top:80px;}*/
	.de_overview_area{
		padding: 1.4em 0.5em;
	}
	.de_overview_title{
    	font-size: 1.2em;
	}
	.de_overview_text{
		font-size: 1.2em;
		line-height: 1.2em;
	}
	.de_top_text{
		font-size: 1.5em;
		line-height: 2em;
	}
	.bg_top{top:0;}
	#de_top .keyvisual{
    width: 90%;
    margin: 2em auto 0;
	}
	.de_top_title img{width:24px;}
	.bg_bottom {
		top: 184px;
	}
}

#de_cast ul{display: flex; flex-direction: row; justify-content: space-between; text-align: center;}
#de_cast ul li img{width: 90%;}
.de_menber{width: 100%; height:35vh; position:relative; z-index: 100;}
.de_menber img{width: 80%;}
.baseH, .coverH{overflow: hidden;
  background: transparent no-repeat;
  background-size: cover;
  background-size: 100% auto;
  background-position: center;
	}
.coverH{width: 100%; height: 100%;}
.member01{background-image: url(../img/menber_on.png);}
.member02{background-image: url(../img/menber_off.png);}
.effectH-opacity {
  opacity: 1;
  transition: .5s;
  }
.effectH-opacity:hover{opacity: 0;}

@media screen and (max-width: 900px){
  .de_menber{height:15vh;}
  .member02{opacity:0;}
	}

#de_guest ul, #de_goods ul,#de_ticket ul, .de_others ul{ 
	display: flex; 
	flex-direction: row; 
	justify-content: center;
  flex-wrap: wrap;	
	}
#de_guest ul li,#de_goods ul li,#de_ticket ul li,.de_others ul li {
  width: 45%;
	margin: 1em;
	text-align: center;
	}
#de_guest ul li img, #de_goods ul li img,#de_ticket ul li img, .de_others ul li img{width:100%;}
#de_goods p, .de_others p{
  font-size: 1.2em;
  line-height: 2em;
  }

.de_goods_text{
	text-align:center;
	color:#fff;
	font-weight:bold;
	font-size:2.4em;
	line-height: 2em;
	}
.de_goods_text img{width:25px;}

#de_goods .flex, .de_others .flex {
  display: -webkit-flex;
  display: flex;
  flex-direction: row;
  -webkit-justify-content: center;
  justify-content: center;
  margin: 10%;
	}
#de_goods .flex img,.de_others .flex img { margin-right: 1em;}

#de_sponsor ul{
	display: flex; 
	flex-direction: column;
	justify-content: center;
  flex-wrap: wrap;
	}
#de_sponsor ul li{
  width: 100%;
	margin: 1em auto;
	text-align: center;
	}
#de_sponsor ul li img {
  width: 400px;
	font-size: 1.2em;
  line-height: 2em;
	}

@media screen and (max-width: 768px) {
	#de_goods .flex , #de_sponsor ul, .de_others ul { flex-direction: column;}
	#de_goods .flex img, .de_others .flex img { margin:0 auto;}
	.de_goods_text{
    font-size: 1.8em;
    line-height: 2em;
		}
	#de_sponsor ul { text-align: center;}
	#de_guest ul, #de_goods ul,#de_sponsor ul , #de_ticket ul, .de_others ul{flex-direction: column;}
	#de_guest ul li,#de_goods ul li,#de_sponsor ul li,#de_ticket ul li, .de_others ul li {
    width: 90%;
    margin: 1em auto 0;
		}
	}

#de_ticket #de_ticket_inner div { position: relative; text-align:center;}
#de_ticket #de_ticket_inner div:nth-child(2) { margin-top: 30px;}
#de_ticket h4 { color: #d90400; font-size: 1.5em;}
.square_btn{
  padding:1px;
  margin-bottom:3vw;
  text-align:center
}
.square_btn a{
  position:relative;
  display:inline-block;
  min-width:40%;
  margin:0 10px;
  padding:.5em 1em;
  box-shadow:0 4px #bb0000;
  border-radius: 3px;
  background: #d90400;
  color: #FFF!important;
  text-decoration: none;
  text-align:center;
  transition:none;
  border: 4px solid;
  }
.square_btn a:hover {
  top:4px;
  box-shadow:0 0 #bb0000;
}
#de_goods .square_btn a{
  font-size:1.6em
}
#de_about table { width: 100%; border-spacing: 0.3em;font-size: 1.2em;}
#de_about table tr { margin-bottom: 0.5em;}
#de_about table tr td:nth-child(1){
  background-color:#000;
	color:#fff;
	border-bottom:solid 0.3em #fff;
	background-clip:padding-box;
	width: 20%;
	}
#de_about table tr td:nth-child(2){
  background:linear-gradient(transparent 0%, #fff 0%);
	}
#de_about table span { font-size: 0.7em;}

#de_aboutB table{
  width:100%;
	border-spacing:0.3em;
	font-size: 1.2em;
	}
#de_aboutB table tr { margin-bottom: 0.5em;}
#de_about table tr td:nth-child(1),#de_about table tr td:nth-child(2),
#de_aboutB table tr td:nth-child(1),#de_aboutB table tr td:nth-child(2){
  padding:0.8em;
	line-height:2em;
	}
#de_aboutB table tr td:nth-child(1){
  background-color: #fff;
	color:#000;
	border-bottom:solid 0.3em #000;
	background-clip:padding-box;
	width:20%;
	}
#de_aboutB table tr td:nth-child(2){
  background:linear-gradient(transparent 0%, #000 0%);
	}
/*#de_aboutB table span {font-size:0.7em;}*/

#de_aboutB table tr td{
	border-bottom: #fff solid;
}
#de_aboutB table tr:last-child td {
  border-bottom: none;
}

@media screen and (max-width: 768px) {
  #de_about table tr td:nth-child(1),#de_about table tr td:nth-child(2),
	#de_aboutB table tr td:nth-child(1),#de_aboutB table tr td:nth-child(2){
    display: block;
		margin: 0 auto;
		width: 90%;
		padding: 0.5em;
		}
	#de_about table tr td:nth-child(1),#de_aboutB table tr td:nth-child(1){
    text-align: center;
		}
	#de_aboutB table tr td{
		border-bottom: none;
	}
}

#de_content{text-align:center;}
#devil_eve strong img{
  width: 36px;
  padding-right: 0.5em;
	}

#de_ticket h3 img, #de_cast ul li.invert img {
   -webkit-filter: invert(100%);
   -moz-filter: invert(100%);
   -o-filter: invert(100%);
   -ms-filter: invert(100%);
   filter: invert(100%);
	 }

#de_attention p,#kokuchi p{
  margin-top:1em;
	font-size: 1.5em;
  line-height: 2em;
	}
#de_attention ul.list,#kokuchi ul.list{
	background-color: #000;
	list-style:square;
	padding-left: 2em;/*3em*/
	width: 100%;/*96%*/
  }
#de_attention ul.list li,#kokuchi ul.list li{
  background: linear-gradient(transparent 0%, #000 0%);
	font-size: 1.2em;
  padding:0.75em 1em 0.25em 0;
	border-bottom: #FFF dotted 2px;
	color: #FFF;
	}
/*#de_attention ul.list li:last-child{
  border-bottom: none;
	}*/
#devil_eve h3, #devil_eve h4 {background-color: rgba(0,0,0,0) !important;}

@media all and (-ms-high-contrast: none){
  #de_attention h3 img,#kokuchi ul.list, #de_about h3 img, #de_cast ul li.invert img {background-color:red;}
  #de_about h3 {color:#000;}
	}


.infobox {
	padding: 2em;
	margin: 2em 0;
	border: solid 3px #000;
	background: #FFF;
	}
.infobox p {
	margin: 40px 0;
	font-size: 1.2em;
	line-height: 1.8em;
	}
.otherImage{
  width: 85%;
	text-align: center;
	margin: 1em auto;
	}
article:last-child { padding-bottom: 300px !important;}
@media screen and (max-width: 680px){   
	.infobox p { font-size: 0.8em;}
	.otherImage{max-width:100%;}
	#de_attention p,#kokuchi p{text-align: center;}
	#de_attention ul.list,#kokuchi ul.list{width: 100%;}
	}

/* Universal use
--------------------------------------------------------- */

/*　　　　イベントポップアップ　　　　*/
.event_popup_container {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	text-align: center;
	background: rgba(0, 0, 0, 0.5);
	overflow: auto;
	opacity: 0;
	visibility: hidden;
	transition: .3s ease-out;
	z-index: 9999;
}
.event_popup_container::before {
	content: "";
	display: inline-block;
	vertical-align: middle;
	height: 100%;
}
.event_popup_container.active {
	opacity: 1;
	visibility: visible;
}
.event_popup_body {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	max-width: 600px;
	width: 70%;
}
@media screen and (max-width: 768px) {
	.event_popup_body {
		width: 80%;
	}
}
.event_popup_close {
	width: 6vw;
	position: absolute;
	right: 3vw;
	top: 6vw;
	-webkit-transform: translate(100%, -150%);
		transform: translate(100%, -150%);
		overflow: visible;
		height: auto;
		cursor: pointer;
}
@media screen and (max-width: 768px) {
	.event_popup_close {
		width: 12vw;
		-webkit-transform: translate(0%, -150%);
			transform: translate(0%, -150%);
			right: -5vw;
			top: 12vw;
	}
}
.event_popup_content {
	background: #fff;
	border: 20px solid #fff;
	text-align: left;
	/*padding: 30px;*/
	font-weight: bold;
}
.event_popup_content_ttl {
	padding: 1em;
	background: #6dd8e0;
	margin: 8px 8px 0;
	font-size: 2.6em;
	font-weight: 900;
	text-align: center;
}
@media screen and (max-width: 768px) {
	.event_popup_content_ttl {
		padding: 2vw;
		font-size: 3.6vw;
	}
}
.event_popup_content_txt {
	padding: 0.6 0;
	background: #fff;
	text-align: center;

}
.event_popup_content_txt a {
	color: #d90400;
	font-size: 2em;
	font-weight: bold;
	text-decoration:underline;
}
@media screen and (max-width: 768px) {
	.event_popup_content_txt {
		padding: 2vw;
		font-size: 2.5vw;
	}
}
.event_popup_content_txt strong {
  display: block;
  /*padding: 1em;
  margin-bottom: 1.0416666667vw;*/
  font-weight: 900;
  color: #fff800;
  font-size: 2vw;
}
@media screen and (max-width: 768px) {
  .event_popup_content_txt strong {
    padding: 0;
    /*margin-bottom: 2.6041666667vw;*/
    font-size: 3vw;
  }
}

#de_attention div.attentionTtl,#kokuchi div.attentionTtl{
	background-color: #000;
	width: 96%;
	padding: 1em;
}
#de_attention div.attentionTtl p,#kokuchi div.attentionTtl p{
	margin-top:0;
}
@media screen and (max-width: 680px) {
	#de_attention div.attentionTtl,#kokuchi div.attentionTtl{
	width: 100%;
	padding: 1em 0;
	}
}

.marker_bl_r{
	background:-webkit-linear-gradient(transparent 60%, #9b0000 60%);
	background:-o-linear-gradient(transparent 60%, #9b0000 60%);
	background:linear-gradient(transparent 60%, #9b0000 60%);
	padding: 0 5px;
	color: #fff;
}

/* テキスト - SPのみ
------------------------*/
@media screen and (max-width:767px){
  .brSP:before{content:"\A";display:block}
  .hiddenSP,.forPC,.forTB{display:none}
}
/* テキスト - TBのみ
------------------------*/
@media screen and (min-width:768px) and (max-device-width:991px){
  .brTB:before{content:"\A";display:block}
  .hiddenTB,.forPC,.forSP{display:none}
}
/* テキスト - PC
------------------------*/
@media screen and (min-width:992px){
  .brPC:before{content:"\A";display:block}
  .hiddenPC,.forTB,.forSP{display:none}
  }

.fontSS{font-size:0.5em!important;}
.fontS{font-size:0.8em!important;}
.fontM{font-size:1.2em!important;}
.fontMM{font-size:1.3em!important; line-height:1.6em!important;}
.fontL{font-size:1.5em!important;line-height:1.8!important;}
.fontLL{font-size:2em}

.mt0{margin-top:0 !important}
.mt5{margin-top:5px !important}
.mt10{margin-top:10px !important}
.mt1em{margin-top:1em !important}
.mt2em{margin-top:2em !important}

.mb0{margin-bottom:0 !important}
.mb5{margin-bottom:5px !important}
.mb10{margin-bottom:10px !important}
.mb1em{margin-bottom:1em !important}
.mb2em{margin-bottom:2em !important}

.mr0{margin-right:0 !important}
.mr5{margin-right:5px !important}
.mr10{margin-right:10px !important}
.mr1em{margin-right:1em !important}
.mr2em{margin-right:2em !important}

.ml0{margin-left:0 !important}
.ml5{margin-left:5px !important}
.ml10{margin-left:10px !important}
.ml1em{margin-left:1em !important}
.ml2em{margin-left:2em !important}

.mtb0{margin-top:0;margin-bottom:0 !important}
.mrl8{margin-right:8px;margin-left:8px !important}

.fontRed{color:#dc000c!important;}
.fontRB{font-weight:bold;color:#dc000c;}

.txtC{text-align:center!important}
.txtR{text-align:right!important}
.txtL{text-align:left!important}