/* ==============================
 * /common/css/headfoot.css
 * ------------------------------
 * - Global Header
 * - Global Contents
 * - Global Footer
 * - Others
================================= */
/* - Global Header
--------------------------------- */
.hidden {
	display: none;
}
#content.hidden {
	opacity: 0;
	display: block;
}
.global-header {
	position:fixed;
	z-index:110;
	width:100%;
	height:47px;
	top:0;
	background:#000
}
.global-header:after,.global-header:before {
	content:"";
	display:table
}
.logo,.logo img,.nav-btn,.nav-btn i,.sns-header:after {
	display:block
}
.logo {
	float:left;
	width:212px;
	margin:15px 6px
}
.mobile-nav {
	float:right
}
.mobile-nav:after,.mobile-nav:before {
	content:"";
	display:table
}
.nav-btn {
	border:0;
	font:0/0 a;
	text-shadow:none;
	color:transparent;
	background-color:transparent;
	width:45px;
	height:47px;
	float:left
}
.nav-btn i {
	background-image:url(../img/sprite.png);
	background-repeat:no-repeat
}
@media only screen and (-webkit-min-device-pixel-ratio:2),only screen and (min-resolution:192dpi) {
.nav-btn i {
	background-image:url(../img/sprite-2x.png);
	background-size:230px 178px
}
}
.nav-btn.search i {
	width:25px;
	height:25px;
	margin:11px auto 0;
	background-position:-187px -92px
}
.nav-btn.menu i {
	width:25px;
	height:28px;
	margin:9px auto;
	background-position:-163px 0
}
.nav-btn.active {
	background:#fff
}

.nav-btn.active i {
	width:18px;
	height:19px;
	margin:14px auto;
	background-position:-197px -67px
}
@media only screen and (min-width:768px) {
.mobile-nav {
	display:none
}

.global-header {
	position:relative;
	height:auto
}

.logo {
	width:298px;
	margin:10px 20px 9px
}
}

@media only screen and (min-width:1024px) {
.logo {
	width:411px;
	margin:12px 22px
}
}

.global-nav {
	display:none;
	width:100%;
	height: calc(100% - 47px);
	position:fixed;
	font-size:1.6rem;
	z-index:100;
	background:#000;
}
@media only screen and (max-width:768px) {
	.global-nav {
		overflow: auto;
	}
}
.global-nav a {
	font-family:HelveticaNeue-CondensedBold,HelveticaNeueBoldCondensed,HelveticaNeue,"Helvetica Neue",TeXGyreHerosCnBold,Helvetica,Tahoma,Geneva,"Arial Narrow",Arial,sans-serif;
	font-weight:600;
	font-stretch:condensed
}
.global-nav.active {
	display:block
}
.global-nav .primary-nav {
	background:rgba(0,0,0,.9);
	border-top:1px solid #fff
}
.global-nav .primary-nav:after,.global-nav .primary-nav:before {
	content:"";
	display:table
}
.global-nav .primary-item {
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-ms-box-sizing:border-box;
	box-sizing:border-box;
	border:1px solid #fff;
	border-width:0 0 1px
}
.mobile-search-form,.search-input {
	-moz-box-sizing:border-box;
	-ms-box-sizing:border-box
}
.global-nav .primary-item .primary-item-link {
	border-bottom:1px solid #fff;
	margin-bottom:-1px;
	display:block;
	padding:12px 16px;
	color:#fff;
	text-decoration:none;
	text-transform:uppercase
}
.global-nav .primary-item .primary-item-link i {
	-webkit-transition:border-bottom 0 ease-in-out;
	transition:border-bottom 0 ease-in-out;
	transition-delay:.3s;
	-webkit-transition-delay:.3s
}
.global-nav .open-dropdown .primary-item-link {
	position:relative
}
.global-nav .open-dropdown .primary-item-link i {
	top:0;
	right:0;
	position:absolute;
	width:48px;
	height:100%;
	display:block;
	background:#2e2e2e;
	border-left:1px solid #fff;
	border-bottom:1px solid #fff
}

.global-nav .open-dropdown .primary-item-link i:after {
	background-image:url(../img/sprite.png);
	background-repeat:no-repeat;
	-webkit-transform:rotateZ(180deg);
	-moz-transform:rotateZ(180deg);
	-ms-transform:rotate(180deg);
	-o-transform:rotateZ(180deg);
	transform:rotateZ(180deg);
	content:'';
	display:block;
	width:14px;
	height:9px;
	margin:20px auto 0;
	background-position:-163px -160px
}

@media only screen and (-webkit-min-device-pixel-ratio:2),only screen and (min-resolution:192dpi) {
.global-nav .open-dropdown .primary-item-link i:after {
	background-image:url(../img/sprite-2x.png);
	background-size:230px 178px
}
}

.global-nav .open-dropdown.active .primary-item-link i {
	-webkit-transition:none;
	transition:none;
	border-bottom:1px solid rgba(49,51,53,.9)
}

.global-nav .open-dropdown.active .primary-item-link i:after {
	-webkit-transform:rotateZ(0);
	-moz-transform:rotateZ(0);
	-ms-transform:rotate(0);
	-o-transform:rotateZ(0);
	transform:rotateZ(0)
}

.global-nav .open-dropdown.active .secondary-nav {
	max-height:1000px
}

.global-nav .primary-item-link {
	cursor:pointer
}

.global-nav .secondary-nav {
	-webkit-transition:max-height .3s ease-in-out;
	transition:max-height .3s ease-in-out;
	overflow:hidden;
	max-height:0;
	background:rgba(49,51,53,.9)
}

.global-nav .secondary-nav.genres a {
	font-family:"ヒラギノ角ゴ Pro W6","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif;
	font-weight:600;
	font-stretch:normal;
	font-size:.938em
}

.global-nav .secondary-item {
	border-bottom:1px solid #747474
}

.global-nav .secondary-item:last-child {
	border-bottom:0
}

.global-nav .secondary-item a {
	font-family:HelveticaNeue-CondensedBold,HelveticaNeueBoldCondensed,HelveticaNeue,"Helvetica Neue",TeXGyreHerosCnBold,Helvetica,Tahoma,Geneva,"Arial Narrow",Arial,sans-serif;
	font-stretch:condensed;
	color:#fff;
	font-weight:500;
	display:block;
	padding:12px 16px;
	text-decoration:none;
	font-size:.875em;
	letter-spacing:.1em
}

.global-nav .search-form {
	display:none;
	margin:0 8px 0 0;
	padding:6px 0;
	float:right
}

.global-nav .search-form .search-input {
	width:196px;
	border-radius:4px
}

.mobile-search-form {
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
	display:none;
	width:100%;
	height:100%;
	position:fixed;
	z-index:100;
	background:#000;
	border-top:1px solid #fff;
	padding:137px 16px 0
}

.mobile-search-form.active {
	display:block
}

.mobile-search-form .search-input {
	width:100%;
	border-bottom:1px solid #fff;
	padding:12px 12px 14px 40px
}

.mobile-search-form .search-input::placeholder {
	color: #CCCCCC;
	opacity: 1; /* Firefox */
}
.mobile-search-form .search-input:-ms-input-placeholder {
	color: #CCCCCC;
}
.mobile-search-form .search-input::-ms-input-placeholder {
	color: #CCCCCC;
}
@media only screen and (min-width:768px) {
.global-nav {
	width:auto;
	height:auto;
	position:relative;
	display:block;
	background:#fff;
	border:1px solid #f3f3f3;
	border-width:1px 0
}

.global-nav:after,.global-nav:before {
	content:"";
	display:table
}

.global-nav:after {
	clear:both
}

.global-nav .primary-nav {
	background:0 0;
	border-top:0;
	margin:0 0 0 8px;
	float:left
}

.global-nav .primary-item {
	float:left;
	padding:5px 0;
	border-bottom-width:0
}

.global-nav .primary-item:first-child .primary-item-link {
	border-left:1px solid #f3f3f3
}

.global-nav .primary-item:nth-child(even) .primary-item-link {
	border-width:0 1px 0 0
}

.global-nav .primary-item .primary-item-link {
	position:relative;
	color:#000;
	padding:6px 19px 5px;
	float:left;
	border:1px solid #f3f3f3;
	border-width:0 1px 0 0;
	margin-bottom:0
}

.global-nav .primary-item .primary-item-link:focus {
	outline:0
}

.global-nav .primary-item .primary-item-link i {
	display:none;
	content:'';
	position:absolute;
	width:0;
	height:0;
	border-left:6px solid transparent;
	border-right:6px solid transparent;
	border-bottom:6px solid #193092;
	background:0 0;
	margin:0 auto;
	top:auto;
	right:0;
	left:0;
	bottom:-6px
}

.global-nav .primary-item .primary-item-link i:after {
	display:none
}

.global-nav .open-dropdown {
	background:inherit
}

.global-nav .open-dropdown.active .primary-item-link {
	color:#193092
}

.global-nav .open-dropdown.active .primary-item-link i {
	display:block;
	border-bottom:6px solid #193092
}

.global-nav .open-dropdown.active .secondary-nav {
	max-height:none;
	display:block
}

.global-nav .primary-item-link {
	font-size:.875em
}

.global-nav .secondary-nav {
	display:none;
	position:absolute;
	margin-right:20px;
	width:100%;
	left:0;
	top:42px;
	border:1px solid #193092;
	border-width:1px 0;
	background:rgba(49,51,53,.95);
	z-index:90;
	padding:16px 0
}

.global-nav .secondary-nav.genres a {
	font-size:.75em
}

.global-nav .secondary-nav i {
	background-image:url(../img/sprite.png);
	background-repeat:no-repeat;
	-webkit-transition:all .2s;
	transition:all .2s;
	width:9px;
	height:12px;
	display:inline-block;
	margin-right:10px;
	background-position:-216px 1px;
	/*background-position:-216px -175px;*/
}

.global-nav .secondary-item {
	width:330px;
	float:left;
	border-bottom:0
}

.global-nav .secondary-item:last-child {
	margin-bottom:0
}

.global-nav .secondary-item a {
	padding:11px 16px
}

.global-nav .search-form {
	padding:3px 0;
	display:block
}
}

@media only screen and (min-width:768px) and only screen and (-webkit-min-device-pixel-ratio:2),only screen and (min-width:768px) and only screen and (min-resolution:192dpi) {
.global-nav .secondary-nav i {
	background-image:url(../img/sprite-2x.png);
	background-size:230px 178px
}
}

/*@media only screen and (min-width:768px) and (-webkit-min-device-pixel-ratio:2),only screen and (min-width:768px) and (min-resolution:192dpi) {*/
.global-nav .secondary-nav i {
	background-image:url(../img/sprite-2x.png);
	background-size:230px 178px
}
/*}*/

#artist-list-content,#artist-list-content .search-results-wrap ul li .search-results-header h2,#artist-list-content .sp-search-module label select {
	font-family:HelveticaNeue-CondensedBold,HelveticaNeueBoldCondensed,HelveticaNeue,"Helvetica Neue",TeXGyreHerosCnBold,Helvetica,Tahoma,Geneva,"Arial Narrow",Arial,sans-serif;
	font-weight:600;
	font-stretch:condensed
}

@media only screen and (min-width:1024px) {
.global-nav a {
	-webkit-transition:all .3s;
	transition:all .3s
}

.global-nav .primary-nav {
	margin:0 0 0 22px
}

.global-nav .primary-item {
	padding:6px 0 5px
}

.global-nav .primary-item:hover {
	background:inherit
}

.global-nav .primary-item:hover .primary-item-link {
	color:#193092
}

.global-nav .primary-item:hover .primary-item-link i {
	display:block
}

.global-nav .primary-item .primary-item-link {
	padding:8px 19px
}

.global-nav .primary-item .primary-item-link i {
	bottom:-6px
}

.global-nav .secondary-nav {
	top:48px
}

.global-nav .secondary-nav .secondary-item a {
	padding:9px 16px
}

.global-nav .secondary-nav .secondary-item:hover a {
	color:#696b78
}

.global-nav .secondary-nav .secondary-item:hover i {
	opacity:.2
}

.global-nav .secondary-nav.genres a {
	font-size:.813em
}

.global-nav .search-form {
	margin:0 23px 0 0;
	padding:5px 0
}

.global-nav .search-form .search-input {
	width:240px;
	padding:10px 12px 10px 40px
}
.global-nav .search-form .search-input::placeholder {
	color: #CCCCCC;
	opacity: 1; /* Firefox */
}
.global-nav .search-form .search-input:-ms-input-placeholder {
	color: #CCCCCC;
}
.global-nav .search-form .search-input::-ms-input-placeholder {
	color: #CCCCCC;
}
}

.global-header:after,.global-nav .primary-nav:after,.mobile-nav:after {
clear:both
}

/* - Global Footer
--------------------------------- */
.global-footer {
	position:relative;
	overflow:hidden;
	font-family:"ヒラギノ角ゴ Pro W6","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif;
	font-weight:400;
	font-size: 1.6rem;
	font-stretch:normal
}

.global-footer nav a {
	font-size:.75em;
	position:relative;
	display:block;
	color:#333;
	background:#fff;
	padding:17px 16px;
	margin-bottom:1px;
	text-decoration:none
}

.back-to-top,.global-footer nav i {
	/*position:absolute;*/
	right:0px;
	display:block
}

.global-footer nav i {
	background-image:url(../img/sprite.png);
	background-repeat:no-repeat;
	background-position:-122px -144px;
	width:8px;
	height:14px;
	top:50%;
	margin-top:-7px
}

@media only screen and (-webkit-min-device-pixel-ratio:2),only screen and (min-resolution:192dpi) {
.global-footer nav i {
	background-image:url(../img/sprite-2x.png);
	background-position:-117px -144px;
	-webkit-background-size:230px 178px;
	background-size:230px 178px;
}
}

.copyright {
	font-family:HelveticaNeue-Condensed,HelveticaNeueCondensed,HelveticaNeue,"Helvetica Neue",HelveticaNeueRoman,HelveticaNeue-Roman,"Helvetica Neue Roman",TeXGyreHerosCnRegular,Helvetica,Tahoma,Geneva,"Arial Narrow",Arial,sans-serif;
	font-weight:400;
	font-stretch:condensed;
	font-size:.438em;
	text-align:center;
	margin:18px 0 38px
}

.back-to-top {
	border:0;
	font:0/0 a;
	text-shadow:none;
	color:transparent;
	/*background:#000;*/
	bottom:0;
	/*width:40px;*/
	/*height:40px*/
}

.back-to-top i,.search-icon {
	position:relative
}

.back-to-top i {
	background-image:url(../img/back-to-top.png);
	background-position:0 9px;
	display:block;
	width:14px;
	height:9px;
	top:50%;
	margin:-5px auto 0
}

.back-to-top:hover i {
	-webkit-transition:background-position .3s;
	transition:background-position .3s;
	background-position:0 -9px
}

@media only screen and (-webkit-min-device-pixel-ratio:2),only screen and (min-resolution:192dpi) {
.back-to-top i {
	background-image:url(../img/back-to-top-2x.png);
	background-size:14px 18px
}
}

@media only screen and (min-width:768px) {
.back-to-top,.global-footer nav i {
    position:absolute;
    right:16px;
    display:block
}
.back-to-top {
    border: 0;
    font: 0/0 a;
    text-shadow: none;
    color: transparent;
    background:#000;
    bottom: 0;
    width:40px;
    height:40px

}
    .global-footer {
	background:#fff
}
.global-footer .wrapper {
	max-width: 1340px;
}
.global-footer.module {
	padding:23px 36px 18px
}

.global-footer nav {
	text-align:center
}

.global-footer nav li {
	display:inline-block
}

.global-footer nav li:last-child a {
	margin-right:0
}

.global-footer nav a {
	padding:	5px;
	margin-right:20px;
	font-size:.719em
}

.global-footer nav a i {
	display:none
}

.copyright {
	width:100%;
	margin:52px 0 0;
	font-size:.5em
}

.back-to-top {
	width:61px;
	height:61px;
	right:0
}

.back-to-top i {
	-webkit-transform:rotateZ(-90deg);
	-moz-transform:rotateZ(-90deg);
	-ms-transform:rotate(-90deg);
	-o-transform:rotateZ(-90deg);
	transform:rotateZ(-90deg);
	background-image:url(../img/global-arrows-large-sprite.png);
	background-repeat:repeat-x;
	width:17px;
	height:29px;
	margin-top:-14px;
	background-position:-17px -105px
}

.back-to-top:hover i {
	-webkit-transition:background-position .3s;
	transition:background-position .3s;
	background-position:17px -105px
}
}

@media only screen and (min-width:768px) and only screen and (-webkit-min-device-pixel-ratio:2),only screen and (min-width:768px) and only screen and (min-resolution:192dpi) {
.back-to-top i {
	background-image:url(../img/global-arrows-large-sprite-2x.png);
	background-size:34px 185px
}
}

@media only screen and (min-width:768px) and (-webkit-min-device-pixel-ratio:2),only screen and (min-width:768px) and (min-resolution:192dpi) {
.back-to-top i {
	background-image:url(../img/global-arrows-large-sprite-2x.png);
	background-size:34px 185px
}
}

@media only screen and (min-width:1024px) {
.global-footer.module {
	padding:13px 0
}

.global-footer a:hover {
	text-decoration:underline
}
}

/* - Others
--------------------------------- */
.module {
	padding:20px 16px
}
.button,.search-input {
	font-family:HelveticaNeue-CondensedBold,HelveticaNeueBoldCondensed,HelveticaNeue,"Helvetica Neue",TeXGyreHerosCnBold,Helvetica,Tahoma,Geneva,"Arial Narrow",Arial,sans-serif;
	font-weight:600;
	font-stretch:condensed;
	color:#fff
}
@media only screen and (min-width:768px) {
.module {
	padding:35px 36px
}
}

@media only screen and (min-width:1024px) {
	.module {
		padding:43px 0
	}

	.module.animation-widget {
		padding:0;
	}
}
.search-icon i {
	display:inline-block
}
.search-input {
	-webkit-border-radius:0;
	-moz-border-radius:0;
	border-radius:0;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
	font-style:italic;
	font-size:.875em;
	background-color:#000;
	border:0;
	padding:12px 12px 12px 40px;
	-webkit-appearance:none
}

.search-icon button,.search-icon i {
	position:absolute;
	width:25px;
	height:25px;
	background-color:transparent;
	background-position:-187px -91px;
	background-repeat:no-repeat
}

.search-icon i {
	background-image:url(../img/sprite.png);
	top:8px;
	left:6px
}
@media only screen and (-webkit-min-device-pixel-ratio:2),only screen and (min-resolution:192dpi) {
.search-icon i {
	background-image:url(../img/sprite-2x.png);
	background-size:230px 178px
}
}

.search-icon button {
	background-image:url(../img/sprite.png);
	font:0/0 a;
	text-shadow:none;
	color:transparent;
	content:'';
	border:0
}
/*@media only screen and (-webkit-min-device-pixel-ratio:2),only screen and (min-resolution:192dpi) {*/
.search-icon button {
	background-image:url(../img/sprite-2x.png);
	background-size:230px 178px
}
/*}*/

.mobile-search-form .search-icon button {
	top:6px;
	left:0
}

.placeholder {
	color:#999
}

@media only screen and (min-width:768px) {
.search-input {
	font-size:.875em;
	padding:8px 12px 10px 31px
}

.search-icon button {
	width:17px;
	height:17px;
	background-position:-163px -91px;
	top:11px;
	left:7px
}
}

@media only screen and (min-width:1024px) {
.search-input {
	padding:12px 12px 12px 35px
}

.search-icon button {
	top:14px;
	left:11px
}
}

body.-global-menu-open .stackla-widget-mask {
   display: none;
}
body.-global-menu-open {
	overflow: hidden;
}
