@charset "utf-8";
/* ========================================


	COMMON CSS - SP -

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

/* base
============================== */
body{background: #fff;} 
#wrap{	background: #ededed;}

/* layout
============================== */
#container { border-width: 2vw; position: relative; z-index: 10; padding-bottom: 185px;}
.sp{ display: block; }
.pc{ display:none; }

/* contents
------------------------------ */
.date { font-size: 10px; margin-bottom:4px; }
.tit { font-size: 13px; line-height: 1.5; }
.text { font-size: 12px; line-height: 1.8; }
.date .md{ font-size: 14px;margin-right:0; }
.date .year { font-size: 11px; }
.date .youbi { margin-left: 3px; }
 .text img{ height: auto !important; }
 b {
	font-weight: bold !important;
 }
.cat{
	width: 7.2em;
	border-width: 0.5px;
	font-size: 9px;
	border: 0.5px solid #aaa;
	padding: 2px 10px;
}
.back { width: 100%; text-align: center; font-size: 9px; margin: 20px auto 50px; }

/* header
------------------------------ */
header + #navBtn{ width: 26px; top: 30px; right: 20px; }
header + #navBtn .mid { top: 7px; }
header + #navBtn .btm { top: 14px; }
header + #navBtn span.btnTxt { font-size: 10px; top: 0; left: -3px; }
header + #navBtn span.btnTxt::after { position: absolute; top: 16px; left: 3px; }
header.menuOpen + #navBtn span.btnTxt::after { top: 20px; }
#navBtn:hover .top{top:0;}
#navBtn:hover .btm{ top: 14px;}

#home header.bk + #navBtn .bar{ background:#000; }
#home header.bk + #navBtn span.btnTxt { color:#000; }

/* footer
------------------------------ */
footer{ height: 185px; line-height: 1; padding-top: 5px;}
.footerLink{
	width: 100%;
	position: static;
	text-align: center;
	position: relative;
	right: inherit;
}
.footerLink li{ width: 40px; height: 25px;}
.footerLink li.oneroom{ width: 70px; }
.footerLink li a{ height: 100%; }
footer .copyright { text-align:center;font-size: 8px; padding: 10px 0 9px; bottom: 9px;}
#loading .bar{ top: 48vh; }


/* auto pager
------------------------------ */
.loader, .loader:before, .loader:after { width: 0.8em; height: 0.8em; }
.loader:before { left: -2.5em; }
.loader:after { left: 2.5em; }



/* home
============================== */
#home #wrap{ padding-bottom: 200px !important; }
#home #bg{
	display: block;
	height: 300px;
	bottom: 117px;
}
#home #bg span::before{ top: -500px; }
#home #bg span::after{ top: 250px; }
#home #navBtn{ position:fixed; }
#home section{ padding: 0;}
#home #heroImg { border-bottom: solid 1.3vw #fff; }
#home #heroImg .inner { width: 80%; height: 32%; margin-top:-15vh;  }
#home #heroImg .inner h1 { min-height: auto; margin-bottom: 10px;}
#home #heroImg .inner h1 svg{ min-height: inherit; margin-bottom: 0;}

#home #schedule {  padding-left:0; }
#home #schedule a{ font-size: 11px; padding: 10px 0; position: relative; }
#home #schedule dt {
	width: auto;
	font-size: 11px;
	padding-right: 0;
	float: none;
	margin-top: 0;
	margin-left: 0;
	margin: 0 0 5px;
}
#home #schedule dt::after{
	width: 12px;
	background: #ffffff;
	left: 0;
	top: 28px;
	margin-left: 0;
}
#home #schedule dd{ overflow: hidden; display: block; word-break: break-all; }
#home #schedule dd p{ line-height: 1.2;margin-bottom: 5px;}
#home #schedule dd p:last-child{ margin-bottom:0; }
#home #schedule dd .tit{
	display: block;
	font-size: 11px;
	line-height: 1.7;
	letter-spacing: -0.03em;
	padding-left: 84px;
	margin-bottom: -10px;
	position: relative;
	top: -12px;
}
#home #schedule dd .cat{
	display: block;
	border: 0.5px solid #fff;
	line-height: 1;
	color: #fff;
	padding: 0 4px 1px;
	margin-right: 4px;
	font-size: 10px;
	position: relative;
	top: 0;
	left: 0;
	margin: 0 0 8px;
}
#home #bnr{ padding: 5px 0 2.2vw; }
#home #bnr li { border-width: 1px;margin-bottom: 2.2vw; }
#home #bnr .inner, #home #info .inner { width: 100%;}
#home #info { padding: 26px 7%; }
#home #info li{ width: 100%; margin-bottom: 20px; }
#home #info li:last-child{margin-bottom: 0; }

header.menuOpen #gnav .socialNav li.shop a{ top: 0px; }
header.menuOpen #gnav .socialNav li.twitter.member a::before{right: -9px; top: 9.9px; }
header.menuOpen #gnav .socialNav li.twitter.staff a::before { right: -7px; top: 9px;}
header.menuOpen #gnav .socialNav li.youtube a {top: -1px;}

header.menuOpen #gnav .socialNav li.twitter.member2 a::before {
    right: -5px;
    top: 9.9px;
}
header.menuOpen #gnav .socialNav li.twitter a::after {
    width: 24px;
    height: 24px;
}

#home footer .footerLink{ top:0; padding-top:15px; }
#home footer{ height: 195px;}


body:not(#home) #app-bnr {
    display: none !important;
}

#app-bnr {
    position: relative;
    width: 100%;
    z-index: 99;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    display: block;
    box-shadow: 0 0 12px #0000001a;
}

#app-bnr a {
display: block;
background: #f2f2f2;
color: inherit;
position: relative;
font-size: 12px;
line-height: 1.5em;
color: #000;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
display: webkit-flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
letter-spacing: 0;
-webkit-transition: none;
transition: none;
text-decoration: none;
    padding: 10px 7% 10px 25px;
    filter: drop-shadow(0px 3px 7px rgba(0, 0, 0, 0.1215686275));
}

#app-bnr a::before {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    border-right: 2px solid;
    border-top: 2px solid;
    border-color: #797878;
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%) rotate(45deg);
}

#app-bnr a .icon {
width: 17%;
    float: left;
    line-height: 0;
    margin: 0 3.5% 0 0;
    border: 1px solid #d7d7d7;
    border-radius: 5px;
    overflow: hidden;
}
#app-bnr a .icon img {
    width: 100%;
    height: 100%;
}

#app-bnr a .txt {
    overflow: hidden;
    -webkit-flex: 1;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    line-height: 1.5em;
    font-size: 14px;
    color: #333333;
    font-weight: bold;
}

#app-bnr .close {
margin: 0;
    width: 30px;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
}

#app-bnr .close::before, #app-bnr .close::after {
    content: '';
    width: 12px;
    height: 2px;
    background: #333;
    border-radius: 2px;
    position: absolute;
    top: 50%;
    left: 9px;
    margin-top: -2px;
}
#app-bnr .close::before {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

#app-bnr .close::after {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.bnr-removed #app-bnr {
display:none;
opacity:0;
z-index:-10;
}

.bnr-show #heroImg {
    height: calc(100svh - 86px) !important;
}

#home.bnr-show:not(.scrolled) #navBtn {
    top: 96px;
}
#home.bnr-show #navBtn {
    transition: 0.2s;
}

header #headerInner .app_btn_box {
    width: 275px;
    margin: 120px auto 0;
    max-width: 80%;
}

header #headerInner .app_btn_box::before {
    top: 11px;
}
header #headerInner .app_btn_txt::before {
    width: 70%;
    left: 15%;
}

header #headerInner .app_btn_txt {
    font-size: 14px;
    margin-bottom: 8px;
}


/* detail
============================== */
#wrap{background: #ededed;}
.pageTitArea{ margin-bottom: 70px; }
.section { max-width: 100%; padding-bottom: 20px; }

/* header */
 h1#detailHeader {
	width: 200px;
	height: 85px;
	position: absolute;
	top: -29px;
	left: 2vw;
	z-index:100;
}
h1#detailHeader a{display:block; width: 100%; }
h1#detailHeader svg { fill: #e4e4e4; width:100%; height: 100%;}
#navBtn { top: 26px; right: 25px; }
#home #navBtn span.bar{ background: #fff;}
#home #navBtn span.btnTxt{ color: #fff;}
#navBtn span,
#home .menuOpen + #navBtn span { background: #000; }
#navBtn span.btnTxt,
#home .menuOpen + #navBtn  span.btnTxt{ color: #000; background: none; }

header .language {
    z-index: 1000;
    right: 65px;
    top: 26px;
    color: #777;
    font-size: 11px;
    letter-spacing: 0.5px;
    padding: 5px;
    border: 1px solid;
    width: 130px;
    background: rgba(255,255,255,0.9);
}

header .language dt {
    cursor: pointer;
    position: relative;
}
header .language dt::after {
    position: absolute;
    margin: -12px 0 0;
    content: "";
    top: 80%;
    right: 4px;
    width: 6px;
    height: 6px;
    border-top: 1px solid;
    border-right: 1px solid;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
}
header .language dt.open::after {
  margin: -5px 0 0;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  transition: 0.4s;
  top: 65%;
}
header .language dd{
  display: none;

}
header .language dd a{
    text-decoration: none;
    display: block;
    margin: 5px 0;
    color: #777;
}
header .language dd a:hover{
    color: #000;
}

header .language dd a:last-of-type{
    margin: 5px 0 0;
}
#home .bx-wrapper{ padding-left: 0; margin-top: 0 !important;}
.section { max-width: 100%; padding: 100px 7% 80px;background: #ededed; }
#home header{ display: none; height:100%; transition: inherit; -webkit-transition: inherit; }

#headerInner{background: #fff;}
#headerInner #gnav{
	width: 100%;
	height: 100%;
	position: static;
	padding-top: 5.5em;
	margin: 0;
}
#headerInner li{ display: block; width: 40%; float: left; margin: 5px 0; }
#headerInner li:nth-child(2n+1) { margin-right: 2%; margin-left: 10%; }


header #gnav li a { font-size: 16px; letter-spacing: 0.05em; }
#headerInner #gnav .gnav li a{ color: #000; }
.hoverd{opacity:1;}



#headerInner #gnav .socialNav{ 
    text-align: center;
    position: absolute;
    width: 90%;
    left: 50%;
    margin-left: 0;
    transform: translateX(-50%);
    top: 23em;
    bottom: inherit;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

#headerInner #gnav .socialNav li{ 
	display: inline-block;
    width: auto;
    float: none;
    margin: 0!important;
    padding: 5px 10px;
}
#headerInner #gnav .socialNav li a{ 
	opacity: 1 !important;
    margin: 0 auto;
}
#headerInner #gnav .socialNav li:nth-child(2n+1){ 
	margin: 0;
}
#headerInner #gnav .socialNav li:nth-child(4){
	margin-right:0;
}
#headerInner #gnav .socialNav li:nth-child(5){
	margin-left: 0;
	margin-right: 0;
}
#headerInner #gnav .socialNav li.line,
#headerInner #gnav .socialNav li.twitter,
#headerInner #gnav .socialNav li.insta,
#headerInner #gnav .socialNav li.tiktok,
#headerInner #gnav .socialNav li.facebook,
#headerInner #gnav .socialNav li.weibo{
    width: 12%;
    text-align: center;
	padding: 5px 0;
}
header #gnav .socialNav li.tiktok a {
    width: 15px;
}


#headerInner #gnav .socialNav li:nth-child(10){margin-right:0;}
#headerInner li a{ color: #000; font-size: 16px; letter-spacing: 0.05em; }
header #gnav .socialNav li.bknb a{ top: -1px; }
header #gnav .socialNav li.tiktok a{ top: -1px; }
header #gnav .socialNav li a::after{ 
    font-size: 16px;
    left: 50%;
    transform: translateX(-50%);
}
header #gnav .socialNav li.shop a{ width: 62px; top: -2px; left:0; }
header #gnav .socialNav li.line a{ width: 19px; top: 0px; left: 0px; }
header #gnav li { display: block; margin: 5px 0; }


#headerInner #gnav .gnav{ width: 79%; text-align: left; margin: 0px auto 0 12%; }
#headerInner #gnav .gnav li:nth-child(2n+1){ margin-right: 10%;}

#header{ text-align: center; height: 100%;}
#home #header h1{ display: none !important; }
.menuOpen #header h1 { display: none;}
.menuOpen #headerInner{ height: 100%; background: #fff; }
#navBtn { position: fixed; z-index: 1000; }

/* content */
#mainClm{ width: 100%; float: none; }
#subClm{ display: none; }
#paging{ margin-bottom: 0;  margin-top: 80px; padding-top: 0;}

#paging .simple{ position: relative; }
#paging .simple li{ position:absolute; }
#paging .simple li.prev{ left: -15px;}
#paging .simple li.next{ right:7px; }
#paging .simple li.numbers{ top: -12px; left: 50%; margin-left: -1.8em; }
#paging .simple li.numbers span{ display:inline-block; position:static; }
#paging .simple li.numbers span::before,
#paging .simple li.numbers span::after{ display: none;}

#paging li span { width: auto; top: -19px;padding: 0 5px;}
#paging li span::before { top: 17px;}
#paging .simple li.next span{ top:-2px; }
#paging .simple li.prev span{ left: 6px; }
#paging .simple li.prev a{ top: 9px;left: -8px; }
#paging li span::after,
#paging li span::before { height: 8px; background: #000; top: 12px; }
#paging li.prev span::before { top: 18px;}
#paging li.next span::before { top: -5px; right: 6px; }
#paging li.next span::after{ top:0; right: 6px;}

#paging li span.current::after,
#paging li span.current::before { background: #aaa; }

/* title */
.pageTit { font-size: 20px; margin-bottom: 0;}
.pageTit::after { width: 22px; bottom: -18px; }

/* article */
article { padding-bottom: 70px;margin-bottom: 70px; position:relative; }
article:last-of-type::after{ display:none; }
article .date { font-size: 14px; margin-bottom: 5px; }
article .tit { font-size: 16px; line-height: 1.6; margin-bottom: 20px; }
article .thumb { margin: 20px auto; }
article iframe { width: 100%; height: auto; margin: 20px auto; }
.shareList .line{ display: inline-block; }

#catNav{
	display:block;
	width: 100%;
	vertical-align: 0;
	letter-spacing: 0.03em;
	margin: 70px 0 0;
}

/* pulldownBox */
.pulldownBox{ background: #fff; padding: 3px 0; margin-bottom: 30px;position: relative; }
.pulldownBox select {
	font-family: 'Nunito','ヒラギノ角ゴ Pro W3', 'メイリオ', sans-serif;
	font-weight: 300;
	-webkit-appearance: none;
	-moz-appearance: button;
	width: 100%;
	height: 36px;
	background: white none repeat scroll 0 0;
	color: #111;
	font-size: 16px;
	text-align: center;
	border: medium none;
	border-radius: 2px;
	box-sizing: border-box;
	line-height: 24px;
	padding: 0 10px;
	position: relative;
}
.pulldownBox::before,
.pulldownBox::after{
	display: block;
	content: '';
	width: 9px;
	height: 1px;
	background: #000;
	position: absolute;
	right: 17px;
	top: 50%;
	z-index: 10;
	margin-top: 1px;
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
}
.pulldownBox::after{ transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); right: 11px; }

/* live */
.ticketAttention{ margin-top: -20px; }
.ticketAttention .bnr{ margin-bottom: 40px; }
.ticketAttention .bnr a{ letter-spacing: -0.02em; padding: 17px 10px; }
#ticketAttention,
#goodsAttention {
	width: 94%;
	background: #fff;
	box-sizing: border-box;
	padding: 20px 5%;
	margin: 0 auto;
}
#ticketAttention.attentionBox .text .tit,
#goodsAttention.attentionBox .text .tit {
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	color: #f00;
	text-align: center;
	font-size: 18px;
	line-height: 140%;
	margin-bottom: 10px;
}
#ticketAttention .text p { text-align:justify;  }
.ticketAttention .mfp-container{ top: 10%; }
.ticketAttention .mfp-close-btn-in .mfp-content .mfp-close::before,
.ticketAttention .mfp-close-btn-in .mfp-content .mfp-close::after {
	background: #000;
}
.bottombnr{
	display: block;
	float: none;
	margin-right:0;
	margin-bottom: 5px;
}
.bottombnr:last-of-type{ margin-bottom:22px;}
.bottombnr a{
	display: block;
	width: 80%;
	border-width: 0.5px;
	font-size: 11px;
	font-weight: normal;
	padding: 14px 6px 13px;
	margin: 0 auto;
}
.attentionBox .text p{ font-size:12px; line-height: 160%; }
.mfp-close-btn-in .mfp-content .attentionBox .mfp-close { width: 20px; top: -4px; right: 6px; color:#333;}
.mfp-close-btn-in .mfp-content .attentionBox .mfp-close::before,
.mfp-close-btn-in .mfp-content .attentionBox .mfp-close::after{
	display: block;
	content: '';
	width: 100%;
	height: 1px;
	background: #333;
}
.ticketAttention .mfp-close-btn-in .mfp-content .mfp-close {  }
.ticketAttention .pageTitArea { margin-bottom: 50px; }
#live article .endDate::before { width: 6px; top: 6px; }
#live article .endDate{padding-left: 15px;}

/* media */
#media article { padding-bottom: 40px; margin-bottom: 40px; }
#media .cat { vertical-align: 3px;margin-right: 5px; }

/* schedule */
#schedule .section{ width: 100%; }
#schedule .infoList li.child{ margin-left: 0; margin-top: -60px;}
#schedule .infoList li:not(last-child){ margin-bottom: 70px; }
#schedule .infoList .date { width: auto; float: none; margin-bottom: 10px;}
#schedule .infoList .tit{
	line-height: 1.7;
	padding: 0;
	padding-left: 88px;
	position: relative;
	left: -5px;
}
#schedule .infoList .tit .cat {
	vertical-align: 2px;
	margin-right: 10px;
	margin-top: 4px;
	width: 72px;
	text-align: center;
	box-sizing: border-box;
	position: absolute;
	left: 0;
}
#schedule .infoList .tit .title{ width: auto; }
#schedule .infoList .date .md{ font-size: 20px; }
#schedule .cat{ vertical-align:4px; margin:0 0 0 5px; }
#schedule #detail .date .year { font-size: 12px; }
#schedule #detail article .tit { font-size: 16px; vertical-align: -3px; margin-left: 5px; margin-bottom: 20px; }


/* disc */
.discList li { display: block; width: 100%; margin: 0 0 30px; }
.discList .thumb {
	line-height: 0;
	width: 35%;
	float: left;
	margin-right: 6%;
	margin-bottom: 0;
}
.discList .box{
	display: flex;
	-webkit-flex-direction: column;
	flex-direction:column;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: baseline;
	-webkit-align-items: baseline;
	-ms-flex-align: baseline;
	align-items: baseline;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
}
#disc #paging{ margin-top:0; padding-top:0; }
#disc .sp.simple{display:none;}
#disc .section,
#disc .section #mainClm{ width: 100%; }
#disc .section #mainClm .thumb { width: 100%; float: none; padding-top: 0; margin: 0 auto 40px; }
#disc .section #mainClm .discDetail { text-align: center; margin-top: 0; }
#disc .section #mainClm .discDetail .cat { width: auto; margin: 0 auto 10px;}
#disc .section #mainClm .discDetail .date { font-size: 10px;}
#disc .section #mainClm .discDetail .text,
#disc .section #mainClm .discDetail .mtitle,
#disc .section #mainClm .discDetail .tracks { text-align: left;}
#disc .section #mainClm .discDetail .mtitle { font-size: 11px;margin-bottom: 5px; }
#disc .section #mainClm .discDetail .mtitle::after { width: 16px; bottom: -11px;}
#disc .section #mainClm .discDetail .tracks { font-size: 11px;}
#disc .section #mainClm .discDetail .tracks li { margin-bottom: 0;}
#disc .discDetail .pageTitArea { margin-bottom: 50px; }
#disc .section #mainClm .discDetail .tit{ text-align: center; margin-bottom: 20px; }
.maxPage{opacity: 0;}


/* goods */
#goods #catNav { margin: 40px 0 0; }
#goods #mainClm ul li{
	display: inline-block;
	width: 46%;
	height: auto;
 	background: none;
	vertical-align: top;
	margin-right: 5.5%;
	margin-bottom: 26px;
}
#goods #mainClm ul li:nth-child(2n){ margin-right: 0; }
#goods #mainClm ul li .thumb { margin-bottom: 8px;}
#goods #mainClm ul li .tit {
	display: block;
	width: 100%;
	height: auto;
	font-size: 10px;
	line-height: 1.4;
	text-align: left;
	padding: 0;
	position: static;
	top: 0;
	z-index: 10;
	margin-bottom: 0;
}
#goods #mainClm ul li:last-of-type(1),
#goods #mainClm ul li:last-of-type(2){ margin-bottom: 0; }
#goods #mainClm ul li .tit span{ opacity:1; }
#goods #mainClm ul li a { color: #000; }
#goods #mainClm ul li .tit::before{ display: none; }
#goods .btn .main{ background: #fff; color: #333; padding: 15px 0; margin: 70px auto 0; }
.mfp-content .modal{ width: 100%; left:0; margin-left:0; }
.mfp-content .inner .tit { font-size: 13px; }
.mfp-close-btn-in .mfp-content .mfp-close{ top: -8%; right: 3%; }
.mfp-arrow-left { left: 0 !important; }
.mfp-arrow-right { right: 0 !important; }
.mfp-arrow { margin-top: -75px !important; }

/* profile */
#profile .ph{margin-bottom: 20px; }
#profile .member { margin-bottom: 20px; font-size: 13px; }
#profile .text p {  margin-bottom: 10px; }

/* blog */
#blog h3{ font-size: 18px; }
#blog h3 span{ display:block; font-size: 9px;margin-top: 3px; margin-left:0; }
#blog .cat{ width: 9em; padding: 3px 0 2px; }
#blog article .date .cat { vertical-align: 1px; font-style: normal; }
#blog #blogM{ margin-bottom: 140px; }
#blog #blogM article:last-child::after{display: none; }
#twiM,#twiS{width: 100%; margin: 0 auto;}
#twiM{margin-bottom: 100px;}
#blog .twitter.pageTitArea{margin-top: 100px;}
#blog #twiM h3,.blog #twiS h3{ margin-bottom: 20px; }


/* android 2系
============================== */
#home.android #heroImg {
	background: -moz-linear-gradient(-45deg,  rgba(69,231,255,1) 0%, rgba(66,62,231,1) 26%, rgba(251,174,174,1) 55%, rgba(249,251,174,1) 80%, rgba(114,243,130,1) 100%);
	background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(69,231,255,1)), color-stop(26%,rgba(66,62,231,1)), color-stop(55%,rgba(251,174,174,1)), color-stop(80%,rgba(249,251,174,1)), color-stop(100%,rgba(114,243,130,1)));
	background-size: 1000% 1000%;
}
#home.android #heroImg .inner{ height: auto; }
#home.android #heroImg .inner h1{
	height: 100px;
	min-height: inherit;
	background: url(/static/backnumber/official/cmn/logo_android_top.png) no-repeat center top;
	background-size: contain;
	-webkit-background-size: contain;
	-moz-background-size: contain;
}
#home.android #heroImg .inner h1 svg{ display: none;}
#home.android #bnr { padding: 10px 0;}
#home.android #bnr li { margin-bottom: 10px;}
#home.android #bnr li:last-child { margin-bottom: 0;}

#wrap.android .cat { border-width: 1px !important;}
#wrap.android #detailHeader svg { display:none;}

#wrap.android h1#detailHeader { 
	background: url(/static/backnumber/official/cmn/logo_android_detail.png) no-repeat center bottom;
	background-size: contain;
	-webkit-background-size: contain;
	-moz-background-size: contain;
	top: 5px;
}

#wrap.android h1#detailHeader a{ width: 100%; height: 100%; }
#wrap.android #paging li.next a { width: 30px; left: -13px; top: -7px; }
#wrap.android #paging li.prev a { width: 30px; left: -10px; top: 7px; }
#wrap.android #loading .bar{
	background: -moz-linear-gradient(-45deg,  rgba(69,231,255,1) 0%, rgba(66,62,231,1) 26%, rgba(251,174,174,1) 55%, rgba(249,251,174,1) 80%, rgba(114,243,130,1) 100%);
	background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(69,231,255,1)), color-stop(26%,rgba(66,62,231,1)), color-stop(55%,rgba(251,174,174,1)), color-stop(80%,rgba(249,251,174,1)), color-stop(100%,rgba(114,243,130,1)));
	margin-top: 250px;
}

#wrap.android .discList .box{display:block;text-align:left;}
#wrap.android .discList .cat{display:inline-block; width: auto;}
#wrap.android .discList .tit{display: block;}



/* tablet
============================== */
@media screen and (min-width:600px) and ( max-width:960px ) {

	html, body { font-size: 14px; }
	header + #navBtn { top: 50px; right: 40px; }
	header #gnav li { margin: 14px 0; }
	header #gnav li a { font-size: 30px; letter-spacing: 0.02em;}
	header #gnav .socialNav li a::after { font-size: 24px; }
	#wrap{ padding-bottom:155px; }
	#wrap#home {  padding-bottom: 390px; }
	#home #container {
    padding: 0;
  }
  #home #bg {
      display: block;
      bottom: 0;
      position: relative;
      width: 100%;
      line-height: 0;
      height: 100%;
  }
  #home #bg img {
    height: auto;
    width: 100%;
    position: relative;
  }
	.schedule .infoList .tit .cat{ width: 80px; font-size: 10px;}
	#headerInner #gnav .socialNav li:nth-child(2n+1),
	#headerInner #gnav .socialNav li:nth-child(5){ margin: 0 33px;}
	#headerInner #gnav .socialNav { margin-left: -41%;top: 43em;}

	header.menuOpen + #navBtn span.btnTxt::after { top: 0; }
	header.menuOpen #gnav .socialNav li.twitter.member a::before { right: -12px; top: 18px;}
	header.menuOpen #gnav .socialNav li.twitter.staff a::before { right: -9px; top: 15px; }
	.menuOpen + #navBtn span.btnTxt { font-size: 10px; top: 20px; left: -4px; }
	#home #info { padding: 26px 5%; }
	#home #heroImg{ height: 92.5vh; }
	#home #schedule dt{ width: auto; font-size: 13px; padding-right: 44px; top: -5px; }
	#home #schedule dt::after {
		width: 27px;
		height: 1px;
		position: absolute;
		left: 100px;
		top: 11px;
		margin-left: 15px;
	}
	#home #schedule dd .cat { top: 3px;}
	#home #schedule dd .tit { padding-left: 74px; top: -10px; }
	#home #schedule dd { display: inline-block; }
	#home #info li { margin-bottom: 40px; }
	header.menuOpen #gnav .socialNav li.shop a { width: 24px; top: -5px; }
	header #gnav .socialNav li.bknb a { width: 29px;top: -6px; }
	header #gnav .socialNav li.youtube a::after{ font-size:25px; }
	header.menuOpen #gnav .socialNav li.youtube a {top: -1px;}
	
	footer{ height: 150px; }
	#home footer{ height: 160px; }
	#home footer .footerLink{ padding-top:20px; }

	.pageTit { font-size: 34px; margin-bottom: 30px; }
	.date { font-size: 13px; margin-bottom: 5px; }
	.tit { font-size: 15px; }
	 h1#detailHeader { width: 370px; height: 175px; position: absolute; top: 12px;}
	 .section { padding: 200px 7% 50px; }

	.bottombnr:last-of-type{ margin-bottom:22px;}
	.bottombnr{
		display: inline-block;
		width: 40%;
		margin-right: 5px;
		margin-bottom: 20px;
		text-align: center;
	}
	.bottombnr a{
		display: block;
		width: 100%;
		font-size: 12px;
		font-weight: normal;
		padding: 10px 6px;
		margin: 0 auto;
	}
	.attentionBox .text p{
		font-size: 13px;
		line-height: 200%;
	}
	#ticketAttention.attentionBox .text .tit, #goodsAttention.attentionBox .text .tit{ font-size:24px; }
	.attention a{
		margin-right: 20px;
	}
	#ticketAttention, #goodsAttention { padding: 40px 5%; }
	 .text { font-size: 14px; line-height: 2; }
	 article .tit { font-size: 28px; line-height: 1.6; margin-bottom: 40px; }
	.discList li { display: inline-block; width: 45%; margin: 0 0 60px; }
	.discList li:nth-child(2n+1) { margin-right: 9%;}
	.discList .thumb {
		line-height: 0;
		width: 100%;
		float: none;
		margin-right: 0;
		margin-bottom: 10px;
	}
	.discList .box{ display: block; }
	.discList .tit { font-size: 15px; }
}


/* Questionnaire */

.questionnaire .mb30{margin-bottom:30px!important;}

.questionnaire {
	font-size:13px;
}

.questionnaire h5{
    font-size: 16px;
    font-weight: bold;
    text-align: justify;
    word-break: break-all;
    line-height: 1.4em;
    margin: 0 0 20px;
}

.questionnaire .Lead{
	margin:0 0 20px;
}

.questionnaire .subLead{
    font-size: 11px;
    margin:0 0 10px;
}

.questionnaire dl{
    margin: 0 0 20px;
}

.questionnaire dt{
    font-size: 0.9em;
    margin: 0 0 5px;
}

.questionnaire dd{
    font-size: 14px;
}

.questionnaire dd .textBox{
    -webkit-appearance: none;
    display: inline-block;
    width: 100%;
    max-width: 100%;
    color: #333;
    font-size: 16px;
    text-align: left;
    box-sizing: border-box;
    border-radius: 4px;
    border: 1px solid #666;
    padding: 10px;
    margin: 0;
}

.questionnaire dd .selectBox{

    background: #fff;
    line-height: 1em;
    border: 1px solid #666;
    padding: 10px;
    margin: 0 5px 0 0;
    font-size: 12px;
    width:100%;

}


.questionnaire dd .bdBox{

    background: #fff;
    line-height: 1em;
    border: 1px solid #666;
    padding: 5px 10px;
    margin: 0 5px 0 0;
    font-size: 16px;

}


.questionnaire dd .mailBox{
	margin:0 0 10px;
}

.questionnaire dd .ageBox{
	width:50px;
}



.btn input{
    -webkit-appearance: none;
    display: inline-block;
    min-width: 80%;
    max-width: 100%;
    font-size: 14px;
    font-weight: bold;
    line-height: 46px;
    text-align: center;
    text-decoration: none;
    border: none;
    border-radius: 23px;
    padding: 0 20px;
    margin: 0 auto 10px;
}

.questionnaire .btn .main{
    background: #151515;
    border: solid 1px #151515;
    color: #FFF;
}

.questionnaire .btn .main:hover{
    background: #fff;
    border: solid 1px #151515;
    color: #151515;
}

.questionnaire .btn .sub{
    background: #fff;
    border: solid 1px #151515;
    color: #151515;
}

.questionnaire .btn .sub:hover{
    background: #151515;
    border: solid 1px #151515;
    color: #fff;
}
.questionnaireRe{

}

.questionnaireRe .Lead{
	margin:0 0 30px;
	font-size:16px;
}

.questionnaireRe .subLead{
    text-align: center;
	margin:20px 0;
}

.questionnaireRe .mb30{
	margin-bottom:30px!important;
}

.questionnaireRe dl{
    margin: 0 0 30px;
}

.questionnaireRe dd{
    font-size: 14px;
    margin:0 0 10px
}

.questionnaireRe .btn .main{
    background: #151515;
    border: solid 1px #151515;
    color: #FFF;
}

.questionnaireRe .btn .main:hover{
    background: #fff;
    border: solid 1px #151515;
    color: #151515;
}

.questionnaireRe .btn .sub{
    background: #fff;
    border: solid 1px #151515;
    color: #151515;
}

.questionnaireRe .btn .sub:hover{
    background: #151515;
    border: solid 1px #151515;
    color: #fff;
}

.questionnaireRe .mb30{
	margin-bottom:30px;
}


.questionnaireResult .result{
	text-align:center;
	margin:0 0 20px;
	font-weight:bold;
}


.questionnaireResult .btn .main{
    background: #151515;
    border: solid 1px #151515;
    color: #FFF;
    padding: 10px;
    font-size: 13px;
	border-radius:100px;
	width:50%;
	margin:0 auto;
}


/* loading
------------------------------ */
.loading {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: rgba(255, 255, 255, 0.5);
	z-index: 99;
  }
  .loading span,
  .loading span:after {
	border-radius: 50%;
	width: 5em;
	height: 5em;
  }
  .loading span {
	display: block;
	font-size: 10px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -2.5em 0 0 -2.5em;
	text-indent: -9999em;
	border-top: 0.75em solid rgba(0, 0, 0, 0.15);
	border-right: 0.75em solid rgba(0, 0, 0, 0.15);
	border-bottom: 0.75em solid rgba(0, 0, 0, 0.15);
	border-left: .75em solid #222;
	-webkit-transform: translateZ(0);
	-ms-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-animation: loading 1.1s infinite linear;
	animation: loading 1.1s infinite linear;
  }
  @-webkit-keyframes loading {
	0% {
	  -webkit-transform: rotate(0deg);
	  transform: rotate(0deg);
	}
	100% {
	  -webkit-transform: rotate(360deg);
	  transform: rotate(360deg);
	}
  }
  @keyframes loading {
	0% {
	  -webkit-transform: rotate(0deg);
	  transform: rotate(0deg);
	}
	100% {
	  -webkit-transform: rotate(360deg);
	  transform: rotate(360deg);
	}
  }


@media screen and ( max-width:700px ) {
  #home #container {
    padding: 0;
  }
  #home #bg {
      display: block;
      bottom: 0;
      position: relative;
      width: 100%;
      line-height: 0;
      height: 100%;
  }
  #home #bg img {
    height: auto;
    width: 100%;
    position: relative;
  }
}