@import url('https://fonts.googleapis.com/css2?family=Electrolize&display=swap');
.c-footer {
	position: relative!important;
	z-index: 10!important;
}
@media screen and (max-width: 800px) {
	.c-header {
		position: relative!important;
	}
}
header, #breadcrumb, footer {
	position: relative;
	z-index: 20;
}
/*text*/
.paddingHorizontal1 {
	padding-left: 1em!important;
	padding-right: 1em!important;
}
.attentionList > li {
	margin-left: 1em;
	text-indent: -1em;
}
.titleWithBox {
	position: relative;
	padding-left: 1em;
}
.titleWithBox::before {
	content: "";
	display: block;
	position: absolute;
	top: 0.25em;
	left: 0;
	width: 0.5em;
	height: 1em;
	background-color: #7059ff;
	/*
	background: linear-gradient(0deg, #7059ff 0%, #01c647 100%);
	*/
}
/*別ウィンドウでYouTubeを開く*/
.movieWrapperLink {
	position: relative;
	width: 80%;
	height: 0;
	margin-left: auto;
	margin-right: auto;
	padding-top: 44.82%;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	overflow: hidden;
}
.movieWrapperLink iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.movieWrapperLink a,
.movieWrapperLink a span {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.movieWrapperLink a {
	background-color: rgba(0,0,0,0);
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
.movieWrapperLink.hover a {
	background-color: rgba(0,0,0,0.4);
	-webkit-transition: all 0.15s ease;
	transition: all 0.15s ease;
}
.movieWrapperLink a span {
	display: block;
	background-image: url("../images/btnPlay.png");
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 50% auto;
	cursor: pointer!important;
}
.movieWrapperLink.hover a span {
	background-size: 55% auto;
	-webkit-transition: all 0.15s ease;
	transition: all 0.15s ease;
	cursor: pointer!important;
}
@media screen and (max-width: 800px) {
	.movieWrapper,
	.movieWrapperLink {
		width: 100%;
		padding-top: 56.25%;
	}
	.movieWrapper span span,
	.movieWrapperLink a span {
		background-size: 65% auto;
	}
}
.eclipse.eclipseEn #specialHeader h2 a {
	background-image: url('../images/headerLogoEclipseEn.png');
}
.eclipse.eclipseEn .mainVisual > div {
	background-image: url("../images/_kvWide/2105eclipseEn.jpg");
}
.eclipse.eclipseEn.comic .mainVisual > div {
	background-image: url("../images/_comic/kvEn.jpg");
}
/*detail*/
#detail .widthWrapper {
	background-attachment: fixed;
	background-image: url("../images/bgDetail.jpg");
	background-position: center top;
	background-repeat: no-repeat;
	background-size: cover;
}
.eclipse #detail .widthWrapper {
	padding-bottom: 1em;
	background-image: url("../images/bgDetailEclipse.jpg");
}
/*lineup*/
#lineup .flexLineup a {
	display: block;
	width: 100%;
}
/*popup*/
.mechanicalDetailImages {
	width: 80%;
	margin-left: auto;
	margin-right: auto;
}
.mechanicalDetailImages li:not(:nth-child(1)) {
	display: none;
}
.mechanicalDetailThumb li {
	display: inline-block;
	width: 9.1%;
	margin: 3px 1% 0 0;
	padding: 0;
	box-sizing: border-box;
	cursor: pointer;
	-webkit-transition: all 0.15s ease;
	transition: all 0.15s ease;
}
.mechanicalDetailThumb li:nth-child(10n + 10) {
	margin-right: 0;
}
/*
.mechanicalDetailThumb li > img {
	display: block;
	background: linear-gradient(120deg, #1b27dd 0%, #eb035c 100%);
	box-sizing: border-box;
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
.mechanicalDetailThumb li.selected > img {
	border: 4px solid rgba(202,12,12,1);
	border-image: linear-gradient(120deg, #1b27dd 0%, #eb035c 100%);
	border-image-slice: 1;
	-webkit-transition: all 0.15s ease;
	transition: all 0.15s ease;
}
*/
@media screen and (min-width: 801px) and (max-width: 1500px) {
	.mechanicalDetailThumb li {
		margin-top: 0.2vw;
	}
}
@media screen and (max-width: 800px) {
	.mechanicalDetailImages {
		width: 100%;
	}
	.mechanicalDetailThumb li {
		width: 18.5%;
		margin: 2vw 1.87% 0 0;
	}
	.mechanicalDetailThumb li:nth-child(5n + 5) {
		margin-right: 0;
	}
	/*
	.mechanicalDetailThumb li.selected > img {
		border: 2px solid rgba(202,12,12,1);
		border-image: linear-gradient(120deg, #1b27dd 0%, #eb035c 100%);
		border-image-slice: 1;
	}
	*/
}
.movieWrapper {
	position: relative;
	width: 80%;
	height: 0;
	margin-left: auto;
	margin-right: auto;
	padding-top: 44.82%;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	overflow: hidden;
}
/*
.movieWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.movieWrapper span,
.movieWrapper span img,
.movieWrapper span span {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.movieWrapper span {
	background-color: rgba(0,0,0,0);
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
.movieWrapper.hover span {
	background-color: rgba(0,0,0,0.4);
	-webkit-transition: all 0.15s ease;
	transition: all 0.15s ease;
}
.movieWrapper span span {
	display: block;
	background-image: url("../images/btnPlay.png");
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 50% auto;
	cursor: pointer!important;
}
.movieWrapper.hover span span {
	background-size: 55% auto;
	-webkit-transition: all 0.15s ease;
	transition: all 0.15s ease;
	cursor: pointer!important;
}
*/
.movieWrapper > ul {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding-left: 0;
}
.movieWrapper > ul > li {
	width: 50%;
	height: 100%;
}
.movieWrapper > ul > li.wide {
	width: 100%;
	height: 100%;
}
.movieWrapper > ul > li > a {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
}
.movieWrapper > ul > li > a span,
.movieWrapper > ul > li > a span span {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.movieWrapper > ul > li > a span {
	background-color: rgba(0,0,0,0.25);
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
.movieWrapper > ul > li > a.hover span {
	background-color: rgba(0,0,0,0.4);
	-webkit-transition: all 0.15s ease;
	transition: all 0.15s ease;
}
.movieWrapper > ul > li > a span::before {
	display: block;
	position: absolute;
	top: 1.5em;
	left: 50%;
	color: #fff;
	font-family: 'Electrolize', sans-serif;
	transform: translateX(-50%);
}
.movieWrapper > ul > li.btnYoutube > a span::before {
	content: "YouTube";
}
.movieWrapper > ul > li.btnYouku > a span::before {
	content: "Youku";
}
.movieWrapper > ul > li.btnBilibili > a span::before {
	content: "bilibili";
}
.movieWrapper > ul > li > a span span {
	display: block;
	background-image: url("../images/btnPlay.png");
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 90% auto;
	cursor: pointer!important;
}
.movieWrapper > ul > li > a.hover span span {
	background-size: 99% auto;
	-webkit-transition: all 0.15s ease;
	transition: all 0.15s ease;
	cursor: pointer!important;
}