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


	COMMON CSS - PC -


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

/* clearfix
--------------------------------- */
.clearfix:after { content:" "; display:block; clear:both; }

/* base
============================== */
html,body {
	height: 100%;
	background: #ededed;
	color: #000;
	font-family: 'ヒラギノ角ゴ Pro W3', 'メイリオ', sans-serif;
	font-size: 14px;
	line-height: 1.7;
}
img { max-width: 100%; }
a {	color: #000; -webkit-transition: all .3s ease; transition: all .3s ease;}
a:hover { color: #ccc; text-decoration: none; }
section,p,a,div,span{ word-break: break-all; box-sizing: border-box;-webkit-box-sizing: border-box;}

/* layout
============================== */
#wrap { 
	min-height: 100%; 
	position: relative;
	z-index: 10;
	/* padding-bottom: 70px; */
}
#container{
	width: 100%;
	height: 100%;
	min-height: 100vh;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	border: 12px solid #fff;
	padding: 0;
	margin: 0 auto;
}

.ph,.imgGuard { position: relative; margin: 0 0 20px;}
.dummy { width: 100%; height: 100%; position: absolute; left: 0; top: 0; }
.nodata { margin: 0 auto 160px; }
.sp, #svg { display: none; }

/* btn
------------------------------ */
.btn{ text-align: center; }
.btn a, .btn input{ display:block; text-align:center; text-decoration: none;  opacity: 1;}
.btn .main{ background: #333; color: #fff; border-color: #333; }
.btn .main:hover{ background: #aaa; border-color: #333;}
.btn .sub{ color: #333; border-color: #333; }
.btn .sub:hover{ color: #fff; background: #333; }
.btn .more{
	display:inline-block;
	font-size: 15px;
	font-weight: bold;
	padding: 0;
	position: relative;
}
.btn .more::after{
	content: '';
	background: #ccc;
	width: 0;
	height: 2px;
	position: absolute;
	left: 0;
	bottom: -2px;
	-webkit-transition: all .3s ease;
	transition: all .3s ease;
}
.btn .more:hover::after{ width:100%;}
.back{ width: 100%; text-align: center; margin: 100px auto; }
.back a{
	display: inline-block;
	font-family: 'Nunito', serif;
	font-weight: 300;
	font-size: 15px;
	text-decoration: none;
	position: relative;
	letter-spacing: 0.07em;
}


/* txt style
------------------------------ */
.subTxt{ font-size: 12px; }


/* autopager loader
------------------------------ */
.loader,
.loader:before,
.loader:after {
	width: 1em;
	height: 1em;
	border-radius: 50%;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation: loadAnim 1.8s infinite ease-in-out;
	animation: loadAnim 1.8s infinite ease-in-out;
}
.loader {
	display: block;
	color: #ccc;
	font-size: 10px;
	margin: 40px auto;
	position: relative;
	text-indent: -9999em;
	-webkit-transform: translateZ(0);
	-ms-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-animation-delay: -0.16s;
	animation-delay: -0.16s;
}
.loader:before,
.loader:after { content: ''; position: absolute; top: 0; }
.loader:before { left: -3.5em; -webkit-animation-delay: -0.32s; animation-delay: -0.32s; }
.loader:after { left: 3.5em; }
@-webkit-keyframes loadAnim {
	0%, 80%, 100% { box-shadow: 0 2.5em 0 -1.3em; }
	40% { box-shadow: 0 2.5em 0 0; }
}
@keyframes loadAnim {
	0%, 80%, 100% { box-shadow: 0 2.5em 0 -1.3em; }
	40% { box-shadow: 0 2.5em 0 0; }
}


/* header
------------------------------ */
header {
	display: none;
	width: 100%;
	text-align: center;
	padding: 0;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 999;
}
#header h1,
#home #header h1{
	width: 411px;
	height: 160px;
	position: absolute;
	top: 13px;
	left: 12px;
}
header h1 a{ display: block; width: 100%; height: 100%; }
header h1 a svg{ width: 100%; height: 100%; }
header.menuOpen #header h1{ display: none; }
.hoverd{ opacity:0.3; }

#headerInner{
	width: 100%;
	height: 100%;
	height: 100vh;
	background: #fff;
	position: relative;
	z-index: 400;
}

#headerInner li{ display: inline-block; margin: 0 14px 15px; }
#headerInner li a{
	color: #000;
	font-family: 'Nunito', serif;
	font-weight: 300;
	font-size: 30px;
	text-decoration: none;
}
#headerInner li.weibo {
    margin-left: 8px;
}

#headerInner #gnav{
	width: 980px;
	height: 200px;
	position: fixed;
	top: 45%;
	left: 50%;
	margin-left: -490px;
	margin-top: -100px;
}

header #gnav .socialNav li a{
	display: block;
	width: 18px;
	background: no-repeat center;
	background-size: contain;
	-webkit-background-size: contain;
	position:relative;
}
header #gnav .socialNav li a i{ display:block; text-indent: -9999px;}
header #gnav .socialNav li a::after{
	display:block;
	content:"";
	font-size: 24px;
	font-family: "FontAwesome";
	color: #000;
	position: absolute;
	top:0;
	left:0;
}

header #gnav .socialNav li.insta a::after{ content:"\f16d"; }
header #gnav .socialNav li.weibo a::after{ content:"\f18a"; }

header #gnav .socialNav li.twitter a::after {
    content: '';
    background: url(/static/backnumber/official/cmn/ico_x.png);
    background-size: contain;
    width: 22px;
    height: 23px;
    background-repeat: no-repeat;
    background-position: 0px 70%;
}
header.menuOpen #gnav .socialNav li.twitter a::after {
    width: 34px;
    height: 36px;
}

header #gnav .socialNav li.twitter.member a::before{
	content: 'k';
	display: block;
	font-size: 13px;
	position: absolute;
	right: -5px;
	top: 14px;
}
header #gnav .socialNav li.twitter.member2 a::before{
	content: 'i';
	display: block;
	font-size: 13px;
	position: absolute;
	right: -5px;
	top: 10px;
}
header #gnav .socialNav li.twitter.staff a::before{
	content: 's';
	font-size: 13px;
	position: absolute;
	right: -4px;
	top: 8px;
}
header.menuOpen #gnav .socialNav li.twitter.member a::before{ right: -17px; top: 14px;}
header.menuOpen #gnav .socialNav li.twitter.member2 a::before{ right: -14px; top: 14px;}
header.menuOpen #gnav .socialNav li.twitter.staff a::before{ right: -17px; top: 14px;}
header.menuOpen #gnav .socialNav li.shop a{top:-7px;}
header.menuOpen #gnav .socialNav li.youtube a{top:5px;}

header #gnav .socialNav li.facebook a::after{ content:"\f09a";}
header #gnav .socialNav li.mailmag a::after{ content:"\f003";}
header #gnav .socialNav li.youtube a::after{ content:"\f167"; font-size: 20px; top:-4px;}
header #gnav .socialNav li.shop a{ width: 100px; background-image: url(/static/backnumber/official/cmn/ico_online_shop.png); top: -11px; }
header #gnav .socialNav li.store a{ width: 100px; background-image: url(/static/backnumber/official/cmn/ico_online_store.png); top: -2px; }
header #gnav .socialNav li.bknb a{ width:33px; background-image:url(/static/backnumber/official/cmn/ico_bknb.png); top: -6px;}header #gnav .socialNav li.tiktok a{ width:21px; background-image:url(/static/backnumber/official/cmn/ico_tiktok.png); top: -6px;}
header #gnav .socialNav li.line a{ width: 24px; background-image: url(/static/backnumber/official/cmn/ico_line_k.png); top: -5px; }
header #gnav .socialNav li.app a{ 
    width: 30px;
    background-image: url(/static/backnumber/official/cmn/ico_app.png);
    vertical-align: -2px;
    display: inline-block;
}
header:not(.fixed) #gnav .socialNav li.app a {
    vertical-align: 3px;
}

/* navBtn */
#navBtn{
	display: block;
	width: 30px;
	height: 26px;
	float: right;
	text-align: center;
	padding: 0px;
	position: absolute;
	top: 47px;
	right: 47px;
	cursor: pointer;
	z-index: 1000;
}
#home #navBtn{ position: absolute;}
#home #navBtn .bar { background: #fff; }
#home #navBtn span.btnTxt { color:#fff; }
#navBtn span {
	width: 100%;
	height: 2px;
	text-indent: -9999em;
	background: #000;
	-webkit-transition: all .3s ease;
	transition: all .3s ease;
	position: absolute;
	right: 0;
	z-index: 50;
}
#navBtn .top { top: 0px;}
#navBtn .mid { top: 8px;}
#navBtn .btm { top: 16px;}
#navBtn:hover .top{ top:-2px;}
#navBtn:hover .btm{ top:18px;}
.menuOpen + #navBtn:hover .top,
.menuOpen + #navBtn:hover .btm{ width: 35px; right: -3px; margin: 0; -webkit-transition: all .3s ease; transition: all .3s ease; }
#navCover{ width:100%; height: 100%; cursor: pointer;}
#navBtn span.btnTxt {
	width: 33px;
	text-indent: 0;
	background: none;
	height: auto;
	color: #000;
	font-family: 'Nunito', serif;
	font-weight: 300;
	font-size: 11px;
	letter-spacing: 0.03em;
	text-indent: -9999em;
	top: 0;
	left: -1px;
}
#navBtn span.btnTxt::after{ display: block; content:'menu'; text-indent: 0;}

.fixed #header{ width: 100%; height: 100%; text-align: right; }
.fixed #headerInner { height: 80px; }
header.fixed #headerInner #gnav{
	display: block;
	width: 710px;
	height: 60px;
	padding: 15px 30px 0 0;
	margin: 0 0 0 auto;
	position: static;
}
header.fixed h1 a svg{ fill:#000; }
header.fixed h1 a:hover{ opacity: 0.6; }
header.fixed #header h1{
	width: 200px;
	height: 25px;
	position: absolute;
	left: 30px;
	top: 25px;
	z-index: 999;
}
header.fixed h1{ display: block; }
header.fixed #headerInner #gnav .socialNav{ text-align: right; position: static; margin: 0 0 8px; }
header.fixed #gnav li { display: inline-block; margin: 0 7px; }
header.fixed #gnav .socialNav li.youtube{margin:0;}
header.fixed #gnav li.archives {margin-right: 0;}
header.fixed #gnav li.bknb {margin-left: 2px;}
header.fixed #gnav li.tiktok {margin-left: 2px;}
header.fixed #gnav li.facebook {
    margin-right: 3px;
}
header.fixed #gnav li.weibo {
    margin-left: 0;
}
header.fixed #gnav li.app {
    margin-left: 0;
}
header.fixed #gnav li a{
	text-decoration: none;
	text-align: center;
	font-family: 'Nunito', serif;
	font-weight: 300;
	color: #777;
	font-size: 14px;
	letter-spacing: 0.03em;
	position: relative;
	-webkit-transition: all .3s ease;
	transition: all .3s ease;
}
header .language {
    position: absolute;
    right: 120px;
    top: 43px;
    color: #777;
    font-size: 11px;
    letter-spacing: 0.5px;
    padding: 5px;
    border: 1px solid;
    width: 130px;
    background: rgba(255,255,255,0.5);
}

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;
}

header.fixed .language {
    z-index: 500;
    right: 575px;
    top: 15px;
}
header.fixed #gnav li.live{ width: 25px;}
header.fixed #gnav li.disc{ width: 28px;}
header.fixed #gnav li.blog{ width: 30px; }
header.fixed #gnav li.home,
header.fixed #gnav li.news{width:40px;}
header.fixed #gnav li.media,
header.fixed #gnav li.goods{width:43px;}
header.fixed #gnav li.profile{width:46px;}
header.fixed #gnav li.fc{width:55px;}
header.fixed #gnav li.archives{ width: 57px; }
header.fixed #gnav li.schedule{ width: 62px; }

header.fixed #gnav .gnav li a:hover{ color: #000; }
header.fixed #gnav .socialNav li a{ color: #000; opacity: 0.7;}
header.fixed #gnav .socialNav li a:hover{ opacity: 1;}
header.fixed #gnav .socialNav li a:hover{ opacity: 1;}

header.fixed #gnav .socialNav li.mailmag a::after { font-size: 18px;}
header.fixed #gnav .socialNav li.shop a{ top: 2px; width: 105px; margin-left: -11px; }
header.fixed #gnav .socialNav li.store a{ top: 2px; width: 105px; margin-left: -11px; }
header.fixed #gnav .socialNav li.bknb a { top: 3px; }
header.fixed #gnav .socialNav li.tiktok a { top: 1px;width: 14px; }
header.fixed #gnav .socialNav li a::after{ font-size:16px; }
header.fixed #gnav .socialNav li.youtube a::after{ font-size:18px; }
header.fixed #gnav .socialNav li.twitter.member a::before{ right: -8px; top:9px;}
header.fixed #gnav .socialNav li.twitter.member2 a::before{ right: -6px; top:9px;}
header.fixed #gnav .socialNav li.twitter.staff a::before{right:-7px; top: 7px;}
header.fixed #gnav .socialNav li.line a{ top: 2px; width: 18px; margin-left: -11px; }

#home header.fixed #gnav .gnav li#home a,
#news header.fixed #gnav .gnav li.news a,
#schedule header.fixed #gnav .gnav li.schedule a,
#live header.fixed #gnav .gnav li.live a,
#profile header.fixed #gnav .gnav li.profile a,
#media header.fixed #gnav .gnav li.media a,
#disc header.fixed #gnav .gnav li.disc a,
#goods header.fixed #gnav .gnav li.goods a,
#blog header.fixed #gnav .gnav li.blog a,
#archives header.fixed #gnav .gnav li.archives a{ color: #000; }

#home header.menuOpen+#navBtn span{background: #000;}
#home header.menuOpen+#navBtn .btnTxt{background: none; color: #000;}
#home header.menuOpen+ #navBtn{ z-index:1000;}
header.menuOpen+#navBtn .mid{ width:0; opacity:0;margin: 0 auto; }
header.menuOpen+#navBtn .top{ top: 7px; transform: rotate(45deg); -webkit-transform: rotate(45deg); }
header.menuOpen+#navBtn .btm{ top: 7px; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); }
header.menuOpen+#navBtn span.btnTxt::after{ content:'close'; }
header.menuOpen { height: 100%;  background: #fff;}
header.menuOpen h1 { display:none !important;}
h1#detailHeader {
	width: 450px;
	height: 170px;
	position: absolute;
	top: 13px;
	left: 12px;
}
#detailHeader svg{width: 100%;height: 100%; fill: #e7e7e7;}
#headerInner #gnav .socialNav{ position: absolute; bottom: -30px; left: 44%; margin-left: -277px; }



header #headerInner .app_btn_box {
    width: 360px;
    margin: 100px auto 0;
    position: relative;
    padding: 0 20px 5px;
}

header #headerInner .app_btn_box::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    border: 1px solid #aaa;
    position: absolute;
    top: 13px;
    left: 0;
    pointer-events: none;
}


header:not(.menuOpen) #headerInner .app_btn_box {
    display: none;
}

header #headerInner .app_btn_wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

header #headerInner .app_btn_wrap li {
    width: 43%;
    margin: 0;
}
header #headerInner .app_btn_wrap li:last-child {
    width: 51.5%;
}

header #headerInner .app_btn_wrap li a {
    display: block;
    line-height: 0;
}
header #headerInner .app_btn_txt {
    font-family: 'Nunito', 'ヒラギノ角ゴ Pro W3', 'メイリオ', sans-serif;
    font-size: 17px;
    margin-bottom: 10px;
    position: relative;
    z-index: 1;
}

header #headerInner .app_btn_txt::before {
    content: '';
    display: block;
    width: 60%;
    height: 100%;
    background: white;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 20%;
}

/* footer
------------------------------ */
footer {
	width: 100%;
	height: 70px;
	background: #fff;
	line-height: 45px;
	position: absolute;
	bottom: 0;
	left:0;
	z-index: 10;
	-webkit-transition: all .3s ease;
	transition: all .3s ease;
}
footer .copyright {
	width: 100%;
	color: #555;
	font-size: 10px;
	text-align: left;
	padding-left: 30px;
	position: absolute;
	bottom: 17px;
}
.footerLink{ width: 730px; position: absolute; right: 20px; top: 8px; }
#home footer .copyright{ bottom: 10px; }
#home footer .footerLink{ top: 14px; }

.footerLink li{ display: inline-block; width: 48px; margin-right: 12px; }
.footerLink li:last-child{ margin-right: 0;}
.footerLink li a{
	display: block;
	width: 100%;
	text-indent: -9999px;
	background: no-repeat center;
	background-size: contain;
	-webkit-background-size: contain;
}
.footerLink li.oneroom{ width: 90px; }
.footerLink li.oneroom a{ background-image: url(/static/backnumber/official/cmn/logo_oneroom.png);}
.footerLink li.id a{ background-image: url(/static/backnumber/official/cmn/logo_id.png);}
.footerLink li.idol a{ background-image: url(/static/backnumber/official/cmn/logo_idol.png);}
.footerLink li.universal a{ background-image: url(/static/backnumber/official/cmn/logo_universal.png);}

/* pageTop */
#pageTop{
	display:none;
	position: fixed;
	right: -25px;
	z-index: 500;
	bottom: -100px;
	transform: rotate(-90deg);
	-webkit-transform: rotate(-90deg);
	z-index: 5;
}
#pageTop a {
	display: block;
	width: 100px;
	height: 30px;
	text-decoration: none;
	line-height: 32px;
	letter-spacing: 0.05em;
	font-size: 11px;
	color: #828282;
	position: relative;
	right: 0;
	opacity:1;
}
#pageTop a::after {
	content: "\f105";
	font-size: 14px;
	font-family: "FontAwesome";
	color: #828282;
	margin-left: 5px;
	-webkit-transition: all .3s ease;
	transition: all .3s ease;
}
#pageTop a:hover { opacity: 0.6; }


/* loading
------------------------------ */
#load{
	display: none;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1002;
	background: #fff;
}
#loading{ width: 100%; position: fixed; left: 0; top: 0; }
#loading .bar{
	display: block;
	width: 0;
	height: 1px;
	background: -moz-linear-gradient(-45deg,  rgba(69,231,255,1) 0%, rgba(69,231,255,1) 17%, rgba(66,62,231,1) 33%, rgba(136,72,223,1) 50%, rgba(251,174,174,1) 67%, rgba(249,251,174,1) 83%, rgba(114,243,130,1) 100%);
	background: -webkit-linear-gradient(-45deg,  rgba(69,231,255,1) 0%,rgba(69,231,255,1) 17%,rgba(66,62,231,1) 33%,rgba(136,72,223,1) 50%,rgba(251,174,174,1) 67%,rgba(249,251,174,1) 83%,rgba(114,243,130,1) 100%);
	background: linear-gradient(135deg,  rgba(69,231,255,1) 0%,rgba(69,231,255,1) 17%,rgba(66,62,231,1) 33%,rgba(136,72,223,1) 50%,rgba(251,174,174,1) 67%,rgba(249,251,174,1) 83%,rgba(114,243,130,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45e7ff', endColorstr='#423ee7',GradientType=1 );
	background-size: 1000% 1000%;
	-webkit-animation: AnimationName 10s ease infinite;
	-moz-animation: AnimationName 10s ease infinite;
	animation: AnimationName 10s ease infinite;
	position: absolute;
	top: 50vh;
}

/* contents
------------------------------ */
.date {
	font-family: 'Lusitana', serif;
	font-weight: normal;
	font-style: italic;
	font-size: 11px;
	line-height: 1;
	margin: 0 0 5px;
	letter-spacing: 0.08em;
}
.up{
	display: inline-block;
	font-family: 'Lusitana', serif;
	font-weight: normal;
	font-style: italic;
	font-size: 11px;
	color: #d71917;
	letter-spacing: 0;
	padding-left: 9px;
	position: relative;
}
.up::before{
	content: '';
	display: block;
	width: 4px;
	height: 1px;
	background: #000;
	position: absolute;
	bottom: 4px;
	left: 2px;
}
.thumb{ line-height: 0; margin-bottom: 20px; position:relative; -webkit-transition: all .3s ease; transition: all .3s ease; }
.thumb img{ width: 100%;}
a:hover .thumb{
	box-shadow: 0 3px 10px rgba(0,0,0,0.4);
	-webkit-transition: all .3s ease; transition: all .3s ease;
}
.tit {
	font-size: 14px;
	font-weight: normal;
	line-height: 1.5;
	text-align: justify;
	text-justify: inter-ideograph;
	margin: 0 0 30px;
}
.cat{
	display: inline-block;
	width: 7em;
	font-family: 'Nunito', serif;
	font-weight: 300;
	font-size: 10px;
	letter-spacing: 0.07em;
	text-align: center;
	line-height: 1;
	border: 1px solid #d0d0d0;
	padding: 3px 0 3px;
}
.text{ font-size: 13px; line-height: 2; letter-spacing: 0.05em; }
b {
	font-weight: bold !important;
}

/* home
============================== */
#home #wrap{
	background:no-repeat center;
	background-attachment: fixed;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
    padding-bottom: 60px !important;
}
#home #bg {
    position: relative;
    z-index: 2;
    width: 100%;
    text-align: center;
    overflow: hidden;
    line-height: 0;
    max-height: 115vh;
    background-image: url(/static/backnumber/official/artistph/ph_main_20210823_HGQW35ti.jpg);
    background-position: center 10%;
    background-size: cover;
}
#home #bg .blurBg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-filter: blur(5px);
    filter: blur(15px);
    background-size: cover;
    transform: scale(1.2);
    background: none !important;
}
#home #bg img {
    width: auto;
    position: relative;
    z-index: 1;
    margin: auto 0 0;
    opacity: 0;
}

#home h1{ display: none; }
#home #container {
    padding: 0;
}
#home section{
	width: 100%;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	padding: 100px 0;
	position:relative;
	z-index: 10;
}
#home #heroImg{
	width: 100%;
	height: 98.5vh;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	background: -moz-linear-gradient(-45deg,  rgba(69,231,255,1) 0%, rgba(69,231,255,1) 17%, rgba(66,62,231,1) 33%, rgba(136,72,223,1) 50%, rgba(251,174,174,1) 67%, rgba(249,251,174,1) 83%, rgba(114,243,130,1) 100%);
	background: -webkit-linear-gradient(-45deg,  rgba(69,231,255,1) 0%,rgba(69,231,255,1) 17%,rgba(66,62,231,1) 33%,rgba(136,72,223,1) 50%,rgba(251,174,174,1) 67%,rgba(249,251,174,1) 83%,rgba(114,243,130,1) 100%);
	background: -webkit-gradient(-45deg,  rgba(69,231,255,1) 0%,rgba(69,231,255,1) 17%,rgba(66,62,231,1) 33%,rgba(136,72,223,1) 50%,rgba(251,174,174,1) 67%,rgba(249,251,174,1) 83%,rgba(114,243,130,1) 100%);
	background: linear-gradient(135deg,  rgba(69,231,255,1) 0%,rgba(69,231,255,1) 17%,rgba(66,62,231,1) 33%,rgba(136,72,223,1) 50%,rgba(251,174,174,1) 67%,rgba(249,251,174,1) 83%,rgba(114,243,130,1) 100%);
	background-size: 1000% 1000%;
	-webkit-animation: AnimationName 30s ease infinite;
	-moz-animation: AnimationName 30s ease infinite;
	animation: AnimationName 30s ease infinite;
	border-bottom: 1.8vh solid #fff;
	position: relative;
}
@-webkit-keyframes AnimationName {
	0%{background-position:0% 50%}
	50%{background-position:100% 50%}
	100%{background-position:0% 50%}
}
@-moz-keyframes AnimationName {
	0%{background-position:0% 50%}
	50%{background-position:100% 50%}
	100%{background-position:0% 50%}
}
@keyframes AnimationName {
	0%{background-position:0% 50%}
	50%{background-position:100% 50%}
	100%{background-position:0% 50%}
}
#home #heroImg .inner{ width: 56%; height: 54.7%; margin-top: -7%; }
#home #heroImg .inner h1{ display: block; height: 100%; min-height: 300px; margin-bottom: 50px; }
#home #heroImg .inner h1 svg{ width: 100%; height: 100%; opacity: 0.7; fill: #fff; }
#home #schedule{ padding-left: 5px; position: relative; top: 10px; opacity:0; }
#home #schedule a{display: inline-block; width: 100%; color: #fff; text-decoration: none; }
#home #schedule a:hover{ opacity: 0.7; }

#home #schedule a .cat{
	border-color: rgba(255, 255, 255, 0.6);
	font-family: 'Nunito', serif;
	font-weight: 300;
	font-size: 10px;
 }
#home #schedule dl{ width: 100%;}
#home #schedule dt{
	display: inline-block;
	font-family: 'Nunito', serif;
	font-weight: 300;
	font-size: 13px;
	color: #fff;
	padding-right: 44px;
	letter-spacing: 0.03em;
	position: relative;
}
#home #schedule dt::after{
	content: '';
	display: block;
	width: 27px;
	height: 1px;
	background: #fff;
	position: absolute;
	left: 100px;
	top: 11px;
	margin-left: 15px;
}
#home #schedule dd{ display:inline-block; vertical-align: top;}
#home #schedule dd p{ padding-bottom: 10px; }
#home #schedule dd .tit,
#home #schedule dd .cat{ font-size: 12px;}
#home #schedule dd .tit{ margin-left: 10px; }
#home .anchor{
	height: 62px;
	font-family: 'Nunito', serif;
	font-weight: 300;
	font-size: 15px;
	color: #fff;
	letter-spacing: 0.03em;
	cursor: pointer;
	position: absolute;
	bottom: 0;
	left: 50%;
	margin-left: -16px;
}

#home .bx-wrapper{ padding-left: 155px; margin-top: -22px !important;}

@-webkit-keyframes aniAnchor {
	0%{ -webkit-transform: scaleY(0); -ms-transform: scaleY(0); transform: scaleY(0); opacity:0;}
	15%{ -webkit-transform: scaleY(0); -ms-transform: scaleY(0); transform: scaleY(0); opacity:0;}
	40%{ -webkit-transform: scaleY(1); -ms-transform: scaleY(1); transform: scaleY(1); opacity:1;}
	70%{ -webkit-transform: scaleY(1); -ms-transform: scaleY(1); transform: scaleY(1); opacity:1;}
	100%{ -webkit-transform: scaleY(1); -ms-transform: scaleY(1); transform: scaleY(1); opacity:0;}
}
@-moz-keyframes aniAnchor {
	0%{ -webkit-transform: scaleY(0); -ms-transform: scaleY(0); transform: scaleY(0); opacity:0;}
	15%{ -webkit-transform: scaleY(0); -ms-transform: scaleY(0); transform: scaleY(0); opacity:0;}
	40%{ -webkit-transform: scaleY(1); -ms-transform: scaleY(1); transform: scaleY(1); opacity:1;}
	70%{ -webkit-transform: scaleY(1); -ms-transform: scaleY(1); transform: scaleY(1); opacity:1;}
	100%{ -webkit-transform: scaleY(1); -ms-transform: scaleY(1); transform: scaleY(1); opacity:0;}
}
@keyframes aniAnchor {
	0%{ -webkit-transform: scaleY(0); -ms-transform: scaleY(0); transform: scaleY(0); opacity:0;}
	15%{ -webkit-transform: scaleY(0); -ms-transform: scaleY(0); transform: scaleY(0); opacity:0;}
	40%{ -webkit-transform: scaleY(1); -ms-transform: scaleY(1); transform: scaleY(1); opacity:1;}
	70%{ -webkit-transform: scaleY(1); -ms-transform: scaleY(1); transform: scaleY(1); opacity:1;}
	100%{ -webkit-transform: scaleY(1); -ms-transform: scaleY(1); transform: scaleY(1); opacity:0;}
}
@-webkit-keyframes aniAnchor02 {
	0%{ opacity: 0;}
	30%{ opacity:1;}
	70%{ opacity:1;}
	100%{ opacity: 0;}
}
@-moz-keyframes aniAnchor02 {
	0%{ opacity: 0;}
	30%{ opacity:1;}
	70%{ opacity:1;}
	100%{ opacity: 0;}
}
@keyframes aniAnchor02 {
	0%{ opacity: 0;}
	30%{ opacity:1;}
	70%{ opacity:1;}
	100%{ opacity: 0;}
}
#home .anchor span{opacity:0;}
#home .anchor.aniAnchor span{
	opacity: 0;
	-webkit-animation: aniAnchor02 2.8s ease infinite;
	-moz-animation: aniAnchor02 2.8s ease infinite;
	animation: aniAnchor02 2.8s ease infinite;
}
#home .anchor.aniAnchor::after{
	transform-origin: 0% 0%;
	-webkit-transform-origin: 0% 0%;
	-webkit-animation: aniAnchor 2.8s ease infinite;
	-moz-animation: aniAnchor 2.8s ease infinite;
	animation: aniAnchor 2.8s ease infinite;
}
#home .anchor::after{
	content:'';
	display: block;
	width: 1px;
	height: 35px;
	-webkit-transform: scaleY(-1);
	-ms-transform: scaleY(-1);
	transform: scaleY(-1);
	background: #fff;
	position: absolute;
	bottom: 0;
	left: 17px;
}
#home #bnr{ background: #fff; }
#home #bnr .inner,#home #info .inner{ width: 940px; margin: 0 auto; }
#home #bnr li{
	border: 1px solid #ececec;
	width: 100%;
	line-height: 0;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	margin-bottom: 40px;
}
#home #bnr li:last-child{ margin-bottom: 0;}
#home #bnr li a{ display: block; width: 100%; line-height: 0; position: relative; }
#home #bnr li a:hover{ box-shadow: 0 3px 10px rgba(0,0,0,0.3); -webkit-box-shadow: 0 3px 10px rgba(0,0,0,0.3); -moz-box-shadow: 0 3px 10px rgba(0,0,0,0.3); }
#home #bnr li a img{ width: 100%;}

#home #info{ background: #f2f2f2; padding-bottom: 50px; }

#home #info .infoList {
    height: auto !important;
}

#home #info .inner {
    margin-bottom: 0px;
}

#home #info li{
    width: 100%;
    margin-bottom: 30px;
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
}
#home #info li:last-child{
    margin-bottom: 0;
}


#home #info li:nth-child(n+7){ display: none;}
#home #info li a{ display:block; width: 100%;text-decoration: none; color: #333;}
#home #info li a .date{ height: 13px;margin-bottom: 3px;}
#home #homeInnner{ display :block;  }
#home .back{ display: none; }
li .youtube div { width: 100%; padding-top: 56.25%; position: relative; }
li .youtube iframe, .youtube object, .youtube embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
#home .date .youbi{ font-size: 10px;  margin-left: 1px; }






/* home popup
============================== */
.youtubeOpen #navBtn{
	opacity: 0;
    pointer-events: none;
}
#home .popup {
    width: 100%;
    height: 100%;
    color: #fff;
    box-sizing: border-box;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1001;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
#home .popup .shade{
    position: fixed;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    z-index: -1;
}
#home .popup .popInBox{
    width: 750px;
    margin: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
#home .popup .popTit{
    text-align: center;
    font-size: 30px;
    line-height: 1em;
    margin: 0 0 60px;
    color: #000;
    letter-spacing: 0.1em;
}
#home .popup .close {
	width: 50px;
    height: 50px;
    position: fixed;
    right: 50px;
    top: 50px;
    cursor: pointer;
    transition: 0.3s ease;
    transform: rotate(45deg);
    pointer-events:cursor;
}
#home .popup .close::before,
#home .popup .close::after {
    content: '';
    display: inline-block;
    width: 100%;
    height: 2px;
    background: #FFF;
    position: absolute;
    left: 50%;
    top: 50%;
}
#home .popup .close::before {
	transform: translate(-50%,-50%);
}
#home .popup .close::after {
    transform: translate(-50%,-50%) rotate(90deg);
}
#home .mov {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
}
#home .mov iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}

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

===================================*/
@media screen and (min-width: 865px){ 

#home .popup .close:hover{
	transform: rotate(135deg);
}
}
/*=================================

===================================*/
@media screen and (max-width: 865px){ 

#home .popup .popInBox{
	width: 90%;
} 
#home .popup .close{
    width: 30px;
    height: 30px;
    right: 20px;
    top: 20px;
}

}




/* 下層
------------------------------ */
#wrap{ background: none;}
.section{ max-width: 1000px; padding-top: 210px; margin: 0 auto; }
#content{ position: relative; }
#mainClm{ width: 700px; float:left; }
#subClm{
	width: 230px;
	line-height:1.2;
	padding-right: 20px;
	position: absolute;
	right:0;
	top:0;
}

/* title */
.pageTitArea{ width: 100%; position: relative; margin-bottom: 50px; }
.pageTit {
	display: inline-block;
	color: #000;
	font-family: 'Nunito', serif;
	font-weight: 300;
	font-size: 30px;
	position:relative;
	margin-bottom: 80px;
}
.pageTit::after{
	content: '';
	display: block;
	width: 26px;
	height: 1px;
	background: #000;
	position: absolute;
	bottom: -50px;
}

/* catNav */
#catNav{
	display: inline-block;
	font-family: 'Nunito', serif;
	font-weight: 300;
	font-size:16px;
	vertical-align: 2px;
	letter-spacing: 0.03em;
	margin-left: 80px;
}
#catNav li{ display: inline-block; margin-right: 40px; }
#catNav li.current{ color: #000; }
#catNav li .jpn{ font-family: 'ヒラギノ角ゴ Pro W3', 'メイリオ', sans-serif; font-size:14px;}
#catNav li a{ color: #aaa; text-decoration: none; }
#catNav li a:hover,
#catNav li.current a,
#catNav li.current a:hover{ color: #000; }

/* subClm */
#subClm li{ margin-bottom: 20px; }
#subClm li a{ display: block;text-decoration: none; }
#subClm .date{ display: block; letter-spacing: 0.09em; }
#subClm .up{ color: #d71917;}
#subClm .cat{	font-family: 'ヒラギノ角ゴ Pro W3', 'メイリオ', sans-serif;display: inline-block; font-style: normal; padding-top: 3px; margin-left: 7px; }
#subClm .tit{ font-size: 13px;line-height: 1.8; }
#subClm div > .tit{
	font-family: 'Nunito', serif;
	font-weight: 300;
	font-size: 16px;
	letter-spacing: 0.03em;
	margin-bottom: 10px;
}
#subClm.fixed { position: absolute; right: inherit; }

/* #detail│記事詳細 */
#detail.section{ max-width: 700px; }
#detail #mainClm{ float: none; margin: 0 auto;}

/* article */
article{ border-bottom: 1px solid #cdcdcd; padding-bottom: 120px; margin-bottom: 120px; }
article:last-of-type{ border-bottom: none;padding-bottom: 0;margin-bottom: 0;}
article:last-child::after{display:none;}
article .date{ font-size: 16px; margin-bottom: 5px; }
article .date .cat,
#schedule .cat{ margin-left: 11px; vertical-align: 3px; font-style: normal; }
article .tit{ font-size: 30px; line-height: 1.6; margin-bottom: 40px; }
article iframe{ width: 100%; height: 394px; margin: 60px auto; }
article .thumb{ width: 100%; line-height:0; margin: 60px auto;}
article .thumb img{ width: 100%;}

/* paging */
#paging{ text-align: center; margin: 120px auto 0;clear: both;    padding-top: 120px; }
#paging a{ display: block; color: #aaa; text-decoration: none; padding: 0 10px; }
#paging a:hover{ color: #000; }
#paging li{
	display:inline-block;
	font-family: 'Lusitana', serif;
	font-weight: normal;
	font-style: italic;
	font-size: 15px;
	margin: 0 10px;
	position:relative;
}
#paging li a:hover span::before,
#paging li a:hover span::after{ background:#000; -webkit-transition: all .3s ease; transition: all .3s ease; }
#paging li.prev{ margin-right: 40px; }
#paging li.prev a,
#paging li.next a{ position: absolute; height: 20px; top: -15px;}
#paging li.next a{ top: -3px;}
#paging li span{
	display: block;
	position: absolute;
	top: 0px;
	width: 20px;
	height: 20px;
	-webkit-transition: all .3s ease; transition: all .3s ease;
}
#paging li span::after,
#paging li span::before{
	content:'';
	display: block;
	width: 1px;
	height: 7px;
	background: #aaa;
	position: absolute;
	top: 6px;
}
#paging li span.max{ text-indent: -9999px; }
#paging li span::before{ transform:rotate(-45deg); -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); top: 10px; }
#paging li span::after{ transform:rotate(45deg); -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); top:6px; }
#paging li.next span::before{ top: -8px; }
#paging li.next span::after{ top:-3px }
#paging li.current{ margin: 0 20px; }
#paging li.offLink span::after,
#paging li.offLink span::before{ background: #eee; }
#paging li.offLink a {cursor: default;}
#paging li.offLink a:hover span::before,
#paging li.offLink a:hover span::after{ background:#eee;}


/* live */
.ticketAttention .bnr{ background: #fff; margin-bottom: 30px; }
article .date{display:inline-block;}
#news article .date{ display: block; }
#schedule article .endDate,
#live article .endDate{ padding-left: 17px; position: relative; top: 0; left: 0; }
#schedule article .endDate::before,
#live article .endDate::before{
	display: block;
	content: '';
	width: 10px;
	height: 1px;
	background: #555;
	position: absolute;
	top: 7px;
	left: 2px;
}
.date .end{ position:relative;}
.date .end::before{
	display: block;
	content: '';
	width: 10px;
	height: 1px;
	background: #555;
	position: absolute;
	top: 16px;
	left: -1px;
}

/* ticket attention */
.ticketAttention .pageTitArea .bnr{ width: 290px; position: absolute; top: 10px; right: 0; }
.ticketAttention .bnr a{
	display:block;
	width: 100%;
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	font-weight: bold;
	text-decoration: none;
	text-align: center;
	color: #f00;
	font-size: 13px;
	line-height: 1.5;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	padding: 10px;
	outline: none;
}
.ticketAttention .bnr a:hover{
	box-shadow: 0 2px 5px rgba(0,0,0,0.1);
	-webkit-box-shadow: 0 2px 5px rgba(0,0,0,0.1);
	-moz-box-shadow: 0 2px 5px rgba(0,0,0,0.1);
	-webkit-transition: all .3s ease;
	transition: all .3s ease;
}
.attentionBox{ width: 700px; background: #fff; box-sizing: border-box; padding: 30px 50px ; }
.attentionBox .text p{ line-height: 180%; margin-bottom: 15px; }
.attentionBox .text p:last-child{ margin-bottom: 0;}
#ticketAttention.attentionBox .text .tit,
#goodsAttention.attentionBox .text .tit{
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	color: #f00;
	font-size: 24px;
	margin-bottom: 30px;
}
.bottombnr{ display: inline-block; float: left; margin-right: 10px; }
.bottombnr a{
	display: inline-block;
	font-weight: bold;
	text-decoration: none;
	text-align: center;
	color: #ff2e2e;
	font-size: 10px;
	line-height: 100%;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	padding: 9px 8px 7px;
	outline: none;
	border: 1px solid #aaa;
}
.bottombnr a:hover{ opacity: 0.7; -webkit-transition: all .3s ease; transition: all .3s ease; }
.mfp-close-btn-in .mfp-content .attentionBox .mfp-close { top: -50px; right: -50px; }


/* discograpy */
#disc .section{ width: 1100px; }
.discList li{ display: inline-block; width: 160px; vertical-align: top; margin: 0 0 50px 40px; }
.discList li:nth-child(5n+1){ margin-left:0; }
.discList a { display: block; color: #333;text-decoration: none; position:relative; }
.discList .thumb { line-height: 0; overflow: hidden;}
.discList .thumb.dvd img{ background-position: top; }
.discList .thumb img {
	width: 100%;
	background: no-repeat center;
	background-size: contain;
	/* background-color: #000; */
	position: relative;
	z-index: 10;
}

.discList .cat{
	width: auto;
	font-size: 10px;
	letter-spacing: 0.01em;
	margin-bottom: 5px;
	padding: 3px 5px;
}
.discList .tit{ font-size:11px; text-align: left;margin-bottom:0;}
#disc .section{max-width:1000px;}
#disc .section #mainClm{width:1000px;}
#disc .section #mainClm .thumb{ width: 480px; float: left; margin: 0 50px 0 0; position: relative; }
#disc .section #mainClm .thumb .dummy{ position:absolute; top: 0; left:0; }
#disc .section #mainClm .discDetail{ overflow:hidden;     padding-top: 4px; }
#disc .section #mainClm .discDetail .cat{ width: auto;overflow:hidden; margin: -5px 0 0;padding: 3px 10px; }
#disc .section #mainClm .discDetail .tit{ text-align: left;margin-bottom: 5px; }
#disc .section #mainClm .discDetail .date{
	font-size:14px;
	font-family: 'Nunito', serif;
	font-style: normal;
	font-weight: 300;
	margin-bottom: 40px;
}
#disc .section #mainClm .discDetail .mtitle{ margin: 20px 0 3px; position: relative; font-size: 12px; color: #777; }
#disc .section #mainClm .discDetail .tracks{ font-size: 13px;margin-bottom: 40px;}
#disc .section #mainClm .discDetail .tracks:last-child{ margin-bottom: 0;}
#disc .section #mainClm .discDetail .tracks li{ margin-bottom: 5px;}
#disc .section #mainClm .discDetail .tracks span{ display: inline-block; font-family: 'Nunito', serif; font-weight: 300; font-size: 12px; margin-right: 5px; }
#disc .cCheck{ display:none; }
#disc #paging{ padding-top: 0; margin-top:0;}
#disc #paging .sp{ display: block; }
#disc #paging .sp.simple{display: none;}
#disc .maxPage{ display:inline-block; font-size:1px; opacity: 0; }
#disc .autopager.sp{display:block;}

/* news */
#home .infoList li .date .md{ font-size:11px; margin-right: 0; }
#home .infoList li .date .youbi{ font-size:10px; }

/* schedule */
#schedule .section{ width: 800px; }
#schedule .infoList li.child{ margin-left: 126px; margin-top: -50px;}
#schedule .infoList li:not(last-child){ margin-bottom: 70px; }
#schedule .infoList li a{ display: block; text-decoration :none; }
#schedule .infoList .date{ width: 125px; float: left; }
#schedule .infoList .date .end{ padding: 8px 0 0 15px; }
.date .md{ font-size: 16px; margin-right: 0;}
#schedule .date .youbi{ font-size: 14px;}
#schedule .date .year { font-size: 12px; }
#subClm .date .md { font-size: 11px; margin-right: 1px; }
.date .youbi{ display: inline-block; font-size: 11px; margin-left: 5px; }
.date .year{ font-size: 10px;}
#schedule .infoList .tit{ overflow: hidden; padding-top: 0; padding-left:5px; }
#schedule .infoList .tit .cat{ vertical-align: 1px; margin-right: 24px; margin-left: 3px; }
#schedule .infoList .tit .title{ display: inline-block; width: 470px; vertical-align: top; }
#schedule #detail .date .year{ font-size: 12px; }
#schedule #detail article .tit { font-size: 30px; line-height: 1.6; vertical-align: -3px; margin-bottom: 40px; }

/* profile */
#profile #mainClm{ float:none; margin: 0 auto; }
#profile .ph{ width: 100%;margin-bottom: 60px; }
#profile .ph img{ width: 100%;}
#profile .member { margin-bottom: 40px;}
#profile .text p { margin-bottom: 25px;}

/* live */
#live article,#goods article{ margin-top: 30px; }

/* goods */
#goods #mainClm ul li{
	display: inline-block;
	width: 150px;
	height: 150px;
	background: #fff;
	vertical-align: top;
	margin-right: 20px;
	margin-bottom: 20px;
}
#goods #mainClm ul li a{
	display:block;
	text-decoration: none;
	color: #fff;
	position: relative;
	outline: none;
}
#goods #mainClm ul li a:hover .thumb{ box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none; }
#goods #mainClm ul li .tit{ overflow: hidden; }
#goods #mainClm ul li .tit::before{
	content:'';
	display:block;
	background: linear-gradient(135deg, rgba(69,231,255,0.9) 0%,rgba(69,231,255,0.9) 1%,rgba(69,231,255,0.9) 17%,rgba(66,62,231,0.9) 33%,rgba(136,72,223,0.9) 50%,rgba(251,174,174,0.9) 67%,rgba(249,251,174,0.9) 83%,rgba(114,243,130,0.9) 100%);
	background-size: 1000% 1000%;
	-webkit-animation: AnimationName 30s ease infinite;
	-moz-animation: AnimationName 30s ease infinite;
	animation: AnimationName 30s ease infinite;
	width: 100%;
	height: 100%;
	position: absolute;
	bottom: -50%;
	left: 0;
	-webkit-transform: scaleY(0);
	-ms-transform: scaleY(0);
	transform: scaleY(0);
	-webkit-transition: all .5s ease;
	transition: all .5s ease;
}
#goods #mainClm ul li .tit:hover::before{
	-webkit-transform: scaleY(2);
	-ms-transform: scaleY(2);
	transform: scaleY(2);
	-webkit-transition: all .4s ease;
	transition: all .4s ease;
}
#goods #mainClm ul li a .thumb:hover{ box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none; }
#goods #mainClm ul li .thumb{margin: 0 auto; }
#goods #mainClm ul li .tit{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	font-size: 11px;
	text-align: center;
	padding: 10px;
	position: absolute;
	top: 0;
	z-index: 10;
	height: 100%;
}
#goods #mainClm ul li .tit span{ position: relative; opacity:0; -webkit-transition: all .3s ease; transition: all .3s ease; }
#goods #mainClm ul li .tit:hover span{ opacity:1; -webkit-transition: all .3s ease; transition: all .3s ease; }
#goods #subClm .btn{ margin-top: 60px; }
#goods #subClm .btn .main {
	background: #fff;
	color: #000;
	border-color: #333;
	font-family: 'Nunito', serif;
	font-weight: 300;
	font-size: 13px;
	padding: 20px 0;
	letter-spacing: 0.03em;
}
#goods #subClm .btn .main:hover {
	box-shadow: 0 2px 5px rgba(0,0,0,0.1);
	-webkit-box-shadow: 0 2px 5px rgba(0,0,0,0.1);
	-moz-box-shadow: 0 2px 5px rgba(0,0,0,0.1);
	-webkit-transition: all .3s ease; transition: all .3s ease;
}
.mfp-content .modal{ width: 50%; position: relative; top: 0; left: 50%; margin-left: -25%; }
.mfp-content .inner .thumb{ width: 70%; margin: 0 auto 20px; }
.mfp-content .inner .thumb .photo{ width: 100%; background: no-repeat center; background-size: contain; -webkit-background-size: contain; }
.mfp-content .inner .comment{ color: #fff;text-align: center; font-size:11px; }
.mfp-content .inner .tit{ color: #fff; text-align: center; font-size: 16px; margin-bottom: 5px; }
.mfp-content .inner .btn a{
	width: 100px;
	color: #fff;
	font-size: 10px;
	letter-spacing: 0.06em;
	border: 1px solid rgba(255,255,255,0.5);
	line-height: 20px;
	margin: 10px auto 0;
	position: relative;
}
.mfp-close-btn-in .mfp-content .mfp-close{
	display: block;
	color: #fff;
	opacity: 1;
	top: -10px;
	right: 6%;
	text-indent: -9999px;
	position: absolute;
	font-size: 31px;
}
.mfp-close-btn-in .mfp-content .mfp-close::before,
.mfp-close-btn-in .mfp-content .mfp-close::after{
	display: block;
	content: '';
	width: 100%;
	height: 1px;
	background: #fff;
	position:absolute;
	top: 21px;
	left: 0px;
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
}
.mfp-close-btn-in .mfp-content .mfp-close::after{ transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); }
.mfp-content .inner .btn a:hover,
.mfp-close-btn-in .mfp-content .mfp-close:hover{ opacity: 0.5; }
.mfp-wrap.mfp-gallery .mfp-arrow::before,
.mfp-wrap.mfp-gallery .mfp-arrow::after {
	content: '';
	display: block;
	width: 20px;
	height: 1px;
	position: absolute;
	left: 0;
	top: 0;
	margin-top: 35px;
	margin-left: 35px;
	border: none;
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	background: #fff;
}
.mfp-arrow-left { left: 24% !important; }
.mfp-arrow-right { right: 24% !important; }
.mfp-wrap.mfp-gallery .mfp-arrow-right::before{
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	top: 14px;
	left: 0px;
}
.mfp-wrap.mfp-gallery .mfp-arrow-left:before{
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	top: 3px;
	left: -4px;
}
.mfp-wrap.mfp-gallery .mfp-arrow-left:after{ border-right: none; margin-left: 31px; top: 17px; }

/* media */
#media article{ padding-bottom: 65px; margin-bottom: 65px; margin-top: 30px;  }
#media article:last-of-type { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }

/* archives */
#archives #mainClm li{ width: 100%; margin-bottom: 30px; }
#archives #mainClm li:last-child{margin-bottom: 0;}
#archives #mainClm li a{ display:block;}

/* blog */
#blog #subClm{ padding-top:0; }
#blog #subClm .btn{ text-align: left; margin-bottom: 15px; }
#blog #subClm .btn a{ text-align: left; font-size: 12px; letter-spacing: 0.03em;}
#blog #subClm .btn a i{ display: inline-block; margin-left: 5px; }
#blog #subClm > div{ margin-bottom: 60px; }
#blog h3{
	font-family: 'Nunito', serif;
	font-weight: 300;
	font-size: 26px;
	text-align: inherit;
	text-justify: inherit;
	margin-bottom: 50px;
	letter-spacing: 0.03em;
}
#blog h3 a{ text-decoration: none;}
#blog h3 span{
	display: inline-block;
	font-size: 11px;
	font-family: 'ヒラギノ角ゴ Pro W3', 'メイリオ', sans-serif;
	vertical-align: 3px;
	letter-spacing: 0.08em;
	margin-left: 12px;
}
#blogM{ margin-bottom: 150px; }
#blog article{border-bottom: none; padding-bottom: 60px;margin-bottom: 60px; }
#blog article a{ text-decoration: none; }
#blog article .tit{ margin-bottom: 20px; }
#blog .box a .date{ text-decoration: none;}
#blog article .date .cat{ text-decoration: none; font-family: 'ヒラギノ角ゴ Pro W3', 'メイリオ', sans-serif; padding-top: 3px;}
#blog .link {margin-top: 60px;}
#blog h3.tit{ border-bottom: 1px solid #ccc; padding-bottom: 30px; margin-bottom: 80px; }
.longclm #subClm.fixed.btmFix{ top:inherit; }

#blog #subClm .text{ display: none; }
#blog #subClm .date{ font-size: 11px; letter-spacing: 0.09em;}
#blog #subClm article{ padding: 0; margin-bottom: 20px; }
#blog #subClm .date .cat{ vertical-align: inherit;}


/* twitter */
#blog .twitter.pageTitArea{ margin-top: 200px; }
.SandboxRoot.env-bp-660 .timeline-Tweet-text{ font-size: 14px; }
.timeline-Tweet{ -webkit-transition: all .3s ease; transition: all .3s ease; }
.timeline-Tweet:hover { background-color: transparent; opacity: 0.5; -webkit-transition: all .3s ease; transition: all .3s ease; }
.SandboxRoot.env-bp-660 .TweetAuthor-name{ font-weight: normal; }
.timeline-Tweet { padding: 0 40px 60px 0; }
#twiM{margin-bottom: 140px;}

/* shareList */
.shareList{
	color: #000;
	font-size: 10px;
	text-align: right;
	margin: 0 auto 20px;
	position: relative;
}
.shareList ul{ display: inline-block; position: relative; }
.shareList li{ display: inline-block; margin-right: 5px;vertical-align: middle;}
.shareList a{
	display: block;
	background: none;
	line-height: 10px;
	text-align: center;
	color:#000;
	font-size: 18px;
	position: relative;
	margin-bottom: 3px;
}
.shareList .fa{vertical-align:-2px;}
.shareList .facebook .fa{ position: relative; left: -1px; }
.shareList .line{ display: none; }



/* Questionnaire */

.questionnaire {
	font-size:13px;
}

.questionnaire h5{
	font-size:30px;
	font-weight:bold;
	margin:0 0 30px;
}

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

.questionnaire .subLead{
    text-align: center;
    margin:0 0 10px;
    font-size:12px;
}

.icoMust::before {
	content: '必須';
	display: inline-block;
	background: #ff2020;
	color: #fff;
	font-size: 9px;
	letter-spacing: 0.3em;
	text-align: center;
	line-height: 100%;
	border-radius: 2px;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	padding: 3px 2px 2px 6px;
	margin-left: 4px;
	position: relative;
	top: -2px;
}


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

.questionnaire dt{
    width: auto;
    float: none;
    text-align: left;
    font-size: 13px;
    padding: 0;
    margin: 0 0 10px;
    font-weight: normal;
}

.questionnaire dd{
    font-size: 16px;
    margin: 0 0 40px;
}

.questionnaire dd .textBox{
    display: inline-block;
    width: 100%;
    font-size: 16px;
    border-radius: 4px;
    border: 1px solid #666;
    padding: 7px;
}

.questionnaire dd .selectBox{
    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{
    display: inline-block;
    width: auto;
    min-width: 250px;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    border-radius: 23px;
    cursor: pointer;
    padding: 10px 15px;
    margin: 0 auto 10px;
    transition: all .3s ease;
}

.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 50px;
	font-size:16px;
}

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

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

.questionnaireRe dd{
    font-size: 16px;
    margin:0 0 15px
}

.questionnaireRe span{
	font-size:14px;
	font-weight:bold;
}

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

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

.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;
}


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


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

.questionnaireResult .btn .main:hover{
    background: #fff;
    border: solid 1px #151515;
    color: #151515;
    padding: 10px;
    font-size: 13px;
	border-radius:100px;
}

/* PC only
============================== */
@media screen and (min-width:961px){
	html,body,#wrap{ min-width:1050px; }
	#container{ padding:0 20px; }
	header.menuOpen+ #navBtn{ position:fixed; }
}


/* sp only
============================== */
@media screen and (max-width: 960px) {
.timeline-Tweet { padding: 0 0 60px 0; }
.timeline-Viewport{-webkit-overflow-scrolling: touch;}
}


/* tablet landscape only
============================== */
@media only screen and (max-device-width: 1280px) and (orientation: landscape){
	html,body,#wrap{ min-width:inherit; }
	#home #wrap{ background: none !important; padding-bottom: 430px; }
	header.menuOpen + #navBtn{ position:fixed; }
	#home #container{position:relative; z-index:3;}
	#home #bg {display:block; height: 480px; width: 100%; }
	#home #schedule dl { width: 69%; margin: 0 auto; }
	#home #heroImg .inner h1 { margin-bottom: 40px; }
	#container{ padding:0 40px; }
	.discList li { width: 164px; margin: 0px 0 40px 30px; }
	#disc #detail.section #mainClm { width: 100%; }
	#mainClm {width: 640px;}
	#subClm.fixed {left: 690px !important;}
	.ticketAttention .mfp-content .modal { margin-left: -35%; }
	#goods #mainClm ul li { width: 135px;  height: 135px;}
}


/* 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);
	}
  }