@charset "UTF-8";
/* Eric Meyer’s “Reset CSS” 2.0 */
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 {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {display: block;}

ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {content: ''; content: none;}
table {border-collapse: collapse; border-spacing: 0;}

/* site custum stayrock */
body,html{ height:100%; font-size:62.5%;}
body{
	line-height: 1.5;
	font-family:-apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", sans-serif;
	color:#FFF;
	position:relative;
	-webkit-text-size-adjust: none;
	font-size-adjust: none;
	font-size:1.3rem;
	overflow-x:hidden;
	background:url(../images/bgimage@1.jpg)no-repeat center 0 #020317;
	background-image: -webkit-image-set(url(../images/bgimage@1.jpg) 1x, url(../images/bgimage@2.jpg) 2x);
	background-size: 100% auto;
}
@media screen and (-webkit-min-device-pixel-ratio: 2),
                  (min-resolution: 2dppx){
background:url(../images/bgimage@2.jpg)no-repeat center -200px #020317;
}
.firstview,.detail,.setlist{ width:96%; margin:0 auto;}


/* ALL DEVICE */
p{ padding-bottom:15px; font-size:1.5rem;}

/* -------------------
FIRST VIEW 
------------------- */
.dvdmain{ width:100%; height:auto;}
.titletxt{ width:100%; padding:20px 0; margin:0 auto;}
.mob{ display:block;}
.pc{display: none;}
.arrow{display: none;}
.titlem{ display: block; width:60%; height: auto; margin:0 auto; padding:30px 0;}

/* -------------------
DETAIL
------------------- */
.detail{margin-bottom:30px;}
.detail h2{
	line-height:1.6;
	margin:0 auto;
	width:96%;
	font-size:1.6rem; font-weight:bold; padding:15px 0;
	border-top:2px solid #fff;
}

.detail ul{ display: flex; justify-content:center; }
.detail li{ position: relative; width:48%; padding:2% 2% 4%; background:rgba(255,255,255,.15); border-radius:2px; }
.detail .limited{
display: block; position: absolute; top:-6px; right:-6px; padding:4px;
 text-align: center; font-size:0.6rem; line-height:1.2;
 background:rgba(255,0,0,1); color:#FFF; font-weight: bold; 
 border-radius:.4rem; }

.detail p{ font-size:1.3rem;}
.detail p span{ display: block; padding:5px 0; text-align: center; font-size:1.3rem; color: #F00; font-weight: bold;}
.detail li img{ width:100%;}
.detail h3{ font-size:1.4rem; text-align: center; line-height:1.3; font-weight: bold; padding-bottom:10px;}
.detail h3.normaltitle{ padding:10px 0 18px;}
.preinfo a{ text-decoration:none; line-height:1.6; font-size:1.2rem; color#FFF; display: block; padding:4px 0; background:#F00; color:#FFF; text-align: center; font-weight: bold; border-radius:4px;}
.preinfo a:hover{background:#ff5e5e; transition:.3s;}
.detail p.infoatt{ display: block; line-height:1.4; font-size:1.0rem; color#F00; padding:6px 3px; border-top:2px solid #FFF; border-bottom:2px solid #FFF; color:#FFF; background:rgba(255,255,255,.15); text-align: center;}
.dminfo{ color:#FFD5D6;}
p.preorder{ display: block; width:100%; text-align: center; padding:5px 0; background:#CCC;}

/* -------------------
NOVERTY
------------------- */
.novelty{margin:0 auto; padding:30px 0; width:96%; background:rgba(255,255,255,.15); z-index: -1;}
.novelty .inner{ width:96%; margin:0 auto; }
.rectangle{
	margin:0 auto 30px;
  position: relative;
  width:200px;
  text-align: center;
}
.rectangle h2 {
	font-size:1.4rem; text-align: center; color:#000; font-weight: bold; padding-bottom:30px; 
    padding: 3px 0px;
    margin: auto;
	z-index: 1;
  }
.rectangle::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background:#05CEB1;
  z-index: -1;
  transform: skew(-15deg);
}

.box{ display: block; margin:0 auto 20px; border-bottom:1px solid #636363;}
.box img{ display: block; margin:0 auto; padding-bottom:10px; width:240px; height: auto;}

p.novdes{font-size:1.2rem; text-align: center;color:#FFF; font-weight: bold; padding:0 0 20px;}
.box p{font-size:1.3rem; text-align: center;color:#FFF; font-weight: bold; padding:10px 0 20px;}
.box p a{ color:#05CEB1; font-weight: bold;}

/* -------------------
BUY AREA
------------------- */
/* -- 購入エリア-- */
.buy-area{padding:20px 0;}
/* QA リスト部分 */
.buy-area .menu-list{
	max-width: 96%;
	margin: 0 auto;
	padding: 0;
}
.buy-area label{
  display: block;
  margin: 0 0 2px 0;
  padding :9px 12px 12px 36px;
  color :#fff;
  font-size:1.4rem;
  font-size:14px;
  background :#3B3B3B;
  cursor :pointer;
  position:relative;
  transition: .3s;
}
.buy-area label:hover{ background :#666;}
/* ボタン */ 
.buy-area input {display: none;}
.menu-list ul{
 margin: 0;
 padding: 0;
 list-style: none;
}

li.info img{ display: block;
	width:25%; padding:5px;}

li.info{
color: #FFF;
margin:0;
padding:0;
max-height: 0;
overflow-y: hidden;
transition: all .3s;
position: relative;
}

/* QA リスト P */
.buy-area .menu-list p{ padding: 10px;}
#menu_bar01:checked ~ #links01 li{ max-height: 100%; opacity:1;}
/* -------------------
SPOT MOVIE
------------------- */
.spotmovie{
	width:calc(100% - 2px);
	margin:15px auto;
}

.spotmovie h2{font-size:1.6rem; text-align: center; font-weight: bold; padding-bottom:20px;}
.spotmovie .iframeouter{position: relative;  width: 100%; padding-top: 56.25%; border:1px solid #CCC;}
.spotmovie iframe{
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
  }
 
/* -------------------
SETLIST
------------------- */
.setlist{
	padding:30px 0; 
	border-top:2px solid #FFF;
}
.setlist h2{font-size:1.6rem; text-align: center; font-weight: bold; padding-bottom:20px;}
.setlist p{ text-align: center; padding-bottom:20px;}
.song{ display : flex; width:100%; margin:0 auto; justify-content: space-between; line-height:1.8;}
.song ul{ width:50%;}
.mc{ color:#05CEB1; font-size:1.1rem;}

/* -------------------
WALL
------------------- */
.wall{color:#020317; 
	padding:30px 0; 
	background:rgba(255,255,255,1.00);
}

.wall h2{font-size:1.6rem; text-align: center; font-weight:bold; padding-bottom:20px;}
.wall p{text-align: center; padding-bottom:20px;}
.wall p a{ color:#020317;}
.wall img{ width:96%; display: block; margin:0 auto; padding-bottom:30px;}

/* -------------------
FOOTER
------------------- */
footer{ padding:30px 0 20px; text-align: center;}
footer p a{color:#FFF;}

/* ------------------------------------------
-- TAB --
--------------------------------------------*/
@media all and (min-width:751px) and (max-width:1024px) {
.firstview,.spotmovie,.detail,.setlist,.wall{padding-bottom:40px; margin-bottom:40px;}
.firstview .inner,.spotmovie .inner,.setlist .inner,.wall .inner{ width:720px; margin:0 auto; abckground:#CCC;}
.mob{ display: none;}
.pc{display: block;}
.dvdmain{ padding-top:50px;}
  
/* -------------------
DETAIL TAB
------------------- */
.detail{margin-bottom:30px;}
.titletxtpc{ display: block; width:84%; padding:20px 0; margin:0 auto;}
.detail h2{
	width:76%;
	 margin:0 auto;
	line-height:1.8;
	margin:0 auto;
	font-size:2.15rem; font-weight:bold; padding:15px 0;
	border-top:2px solid #fff;
}
.detailtxt{width:76%; margin:0 auto; padding:0 0 30px;}

.detail ul{ width:70%; margin:0 auto;}
.detail li{ width:36%; padding:10px 4% 0;  background:rgba(255,255,255,.10); border-radius:2px; }
.detail p{ line-height:1.6; font-size:1.4rem;}
.detail p span{ font-size:1.6rem; padding:5% 0; }
.detail h3{ font-size:1.6rem; }
.detail h3.normaltitle{ padding:12px 0 20px;}

.detail .limited{
display: block; position: absolute; top:-5px; right:-5px; padding:4px;
 text-align: center; font-size:1.0rem; line-height:1.2;
 background:rgba(255,0,0,1); color:#FFF; font-weight: bold; 
 border-radius:.4rem;
 }
 .preinfo a{ text-decoration:none; line-height:1.6; font-size:1.4rem; color#FFF; display: block; padding:5px; background:#F00; color:#FFF; text-align: center; border-radius:4px;}
.preinfo a:hover{background:#ff5e5e; transition:.3s;}

.detail p.infoatt{ display: block; line-height:1.5; font-size:1.2rem; color#F00; padding:6px 2px; letter-spacing:-0..5rem;
	border-top:2px solid #FFF; border-bottom:2px solid #FFF; color:#FFF; background:rgba(255,255,255,.15); text-align: center;}
	
/* -------------------
NOVERTY TAB
------------------- */
.novelty{
	width:60%;
	margin:0 auto 30px;
}
.rectangle{
	margin:0 auto 30px;
  position: relative;
  width:300px;
  text-align: center;
}
.rectangle h2 {
	font-size:2.0rem; text-align: center; color:#000; font-weight: bold; padding-bottom:30px; 
    padding: 3px 0px;
    margin: auto;
	z-index: 1;
  }

p.novdes{font-size:1.4rem; text-align: center;color:#FFF; font-weight: bold; padding:0 0 20px; margin:0 auto 30px;}
.box p{ font-sized:1.6rem; line-height:1.6rem;}

/* -------------------
SETLIST TAB
------------------- */
.setlist{
	padding:40px 0 60px;
	border-top:2px solid #FFF;
	background:url(../images/setlisthero@1.jpg) no-repeat top left;
	background-size:70%  auto;
}
.setlist h2{font-size:2.0rem; text-align: center; font-weight: bold; padding-bottom:20px; }
.setlist p{ text-align: center; padding-bottom:20px;}

.song{ display : flex; width:60%; padding-left:40%; justify-content: space-between; line-height:1.8; font-size:1.4rem;}
.song ul{ width:50%; }
.mc{ font-size:1.2rem;}

/* -------------------
WALL TAB
------------------- */

.wall{
	padding:40px 0 60px;
	color:#020317; 
	background:rgba(255,255,255,1.00);	
}
.wall h2{font-size:2.0rem; text-align: center; font-weight: bold; padding-bottom:20px; }
.wall p{ text-align: center; padding-bottom:20px;}
.wall p a{ color:#020317;}
.wall img{ width:96%; display: block; margin:0 auto; padding-bottom:30px;}
}

/* ------------------------------------------
-- PC --
--------------------------------------------*/
@media all and (min-width:1025px) and (max-width:9999px) {
/* -------------------
FIRSTVIEW PC
------------------- */
.firstview{ height:100vh; position: relative;}
.dvdmain{  display: block; width:750px; 
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
  }
.spotmovie{ display: block; width:750px; margin:0 auto 50px;}
.spotmovie .inner{width:750px; margin:0 auto;}
.mob{ display:none;}
.pc{display: block;}

.arrow {display: block;}
.arrow a {
  position: absolute;
  bottom: 3px;
  left:calc(50% - 20px);
  z-index: 2;
  display: inline-block;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  color: #fff;
  font-size:1.4rem;
  letter-spacing: .1em;
  text-decoration: none;
  transition: opacity .3s;
}
.arrow a:hover { opacity: .75;}
.arrow a {padding-top:30px;}
.arrow a span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border-left: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  box-sizing: border-box;
}

/* -------------------
DETAIL PC
------------------- */
.titletxtpc{ display: block; width:900px; padding:20px 0; margin:0 auto;}	
.detail h2{width: 780px; font-size:2.3rem; letter-spacing:-0.06rem;}
.detailtxt{width: 780px; margin:0 auto; font-size:1.5rem; line-height:1.6; padding:0 0 30px;}
.detail .inner{width:840px; margin:0 auto;}
.detail ul{
	 justify-content: space-between; 	
	width:780px;
	margin:0 auto 30px;
}

.detail li{ width:40%; padding:2% 4% 0; background:rgba(255,255,255,.10); border-radius:2px; }
.detail p{ line-height:1.7; font-size:1.5rem;}
.detail p span{ font-size:1.7rem; padding:10px 0; }

.detail h3{ font-size:1.8rem; }
.detail h3.normaltitle{ padding:12px 0 20px;}

.detail .limited{
display: block; position: absolute; top:-7px; right:-7px; padding:4px;
 text-align: center; font-size:1.2rem; line-height:1.4;
 background:rgba(255,0,0,1); color:#FFF; font-weight: bold; 
 border-radius:.4rem;}
 
 .preinfo a{ text-decoration:none; line-height:1.6; font-size:1.8rem; color#FFF; display: block; padding:5px; background:#F00; color:#FFF; text-align: center; border-radius:4px; font-weight: bold;}
.preinfo a:hover{background:#ff5e5e; transition:.3s;}
.detail p.infoatt{ display: block; line-height:1.5; font-size:1.3rem; color#F00; padding:6px 2px; letter-spacing:-0..5rem;
	border-top:2px solid #FFF; border-bottom:2px solid #FFF; color:#FFF; background:rgba(255,255,255,.15); text-align: center;}

/* -------------------
NOVERTY PC
------------------- */
.novelty{
	width:780px; margin:0 auto 30px;
}
p.novdes{font-size:1.5rem; line-height:1.8; text-align: center;color:#FFF; font-weight: bold; padding:0 0 20px; margin:0 auto 30px;}

.rectangle{
	margin:0 auto 30px;
  position: relative;
  width:320px;
  text-align: center;
}
.rectangle h2 {
	font-size:2.0rem; text-align: center; color:#000; font-weight: bold; padding-bottom:30px; 
    padding: 3px 0px;
    margin: auto;
	z-index: 1;
  }
.box img{ display: block; margin:0 auto; padding-bottom:10px; width:360px; height: auto;}
.box p{ font-size:1.6rem; }


	
/* -------------------
SETLIST PC
------------------- */
.setlist{
	padding:60px 0 80px;
	border-top:2px solid #FFF;
	background:url(../images/setlisthero@1.jpg) no-repeat 0 0;
	background-size:800px  auto;
}
.setlist .inner{width:840px; margin:0 auto;}
.setlist h2{font-size:2.2rem; text-align: center; font-weight: bold; padding-bottom:20px; }
.setlist p{ text-align: center; padding-bottom:20px;}

.song{ display : flex; width:60%; padding-left:40%; justify-content: space-between; line-height:1.8; font-size:1.5rem;}
.song ul{ width:50%; }
.mc{ font-size:1.3rem;}


/* -------------------
WALL PC
------------------- */
.wall{padding:60px 0 80px; background:#FFF;}
.wall h2{font-size:2.2rem; text-align: center; font-weight: bold; padding-bottom:20px; }
.wall img{ max-width:750px;}
.wall a{ font-weight:bold;}


}