@charset 'UTF-8';
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0;	border: 0; padding: 0; position: relative; font-size: 14px; line-height: 1.6em; }
/* html, body { overflow-x: hidden; } */
h1,h2,h3,h4,h5 { margin: 0; line-height: 1.6em; font-weight: 100; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0; }
img { border: 0; max-width: 100%; vertical-align: bottom; }

a { color: inherit; text-decoration: none; vertical-align: baseline; }
a:focus { outline: none; }
a:hover { text-decoration: none; }
.link,
.link:hover { text-decoration: underline !important; }
.primary { color: #bc013e; }

.img-borderd {
	border: 1px solid #ddd;
}
.pull-right { float: right; }
.cursor-pointer { cursor: pointer; }
.visible-block-md { display: none !important;}
.visible-sm { display: none !important;}
.visible-xs { display: none !important;}
@media (max-width: 544px) {
	.hidden-xs { display: none !important; }
	.visible-xs { display: initial !important;}
}
@media (max-width: 768px) {
	.hidden-md { display: none !important;}
	.hidden-sm { display: none !important;}
	.visible-sm { display: block !important;}
	.visible-block-md { display: block !important;}
}

.external-link::before {
	content: "";
	display: inline-block;
	width: 1em;
	height: 1em;
	margin-left: .3em;
	margin-right: .3em;
	background: transparent url('../img/icon/icon_exlink.png') center center no-repeat;
	background-size: 100% auto;
}
.external-link.small-icon::before {
	width: 1rem;
	height: 1rem;
	margin-right: .3rem;
	vertical-align: baseline;
}
.modal-link::before {
	content: "";
	display: inline-block;
	width: 1.2em;
	height: 1.2em;
	margin-left: .3em;
	margin-right: .3em;
	background: transparent url('../img/icon/icon_modal.png') center center no-repeat;
	background-size: 100% auto;
	vertical-align: middle;
}
.modal-link.small-icon::before {
	width: 1rem;
	height: 1rem;
	margin-right: .3rem;
	vertical-align: baseline;
}
.external-link:first-child::before,
.modal-link:first-child::before {
	margin-left: 0;
}

@font-face {
	font-family: "YuGothic-M";
	font-weight: normal;
	src: local("YuGothic-Medium"),
		local("Yu Gothic Medium"),
		local("YuGothic-Regular");
}
@font-face {
	font-family: "YuGothic-M";
	font-weight: bold;
	src: local("YoGothic-Bold"),
		local("Yu Gothic");
}
body {
	background: #000;
	-webkit-text-size-adjust: 100%;
	font-family: 'Roboto', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "YuGothic-M", helvetica, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-weight: 100;
	-webkit-font-feature-settings: "palt" 1;
	font-feature-settings: "palt" 1;
	/* overflow-x: hidden; */
}
html[lang=en] body { line-height: 1.4em; font-size: 16px; }
html[lang=en] #characterText,
html[lang=en] p.lead { line-height: 1.5em !important; }
body::-webkit-scrollbar {
    display: none;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
	::i-block-chrome, body {
		font-feature-settings: "pkna";
	}
}
@media (max-width:768px) {
	html, body { font-size: 12px; }
	html[lang=en] body { font-size: 14px; }
}
.gothic { font-family: 'Roboto', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "YuGothic-M", helvetica, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; }
.serif { font-family: "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "游明朝", YuMincho, "a-otf-ryumin-pr6n", "Times new Roman", "Times", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; }
.hyphen { letter-spacing: -0.15em; }

.clearfix::after {
	content: "";
	display: block;
	clear: both;
}
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	border: 0;
}
.d-flex	{ display: flex; }
.no-shrink { flex-shrink: 0; }

.slick-slide:focus { outline: none; }
.slick-next::before,
.slick-prev::before { display: none; }
.slick-next,
.slick-prev {
	z-index: 10;
	width: 72px;
	height: 100%;
	background-size: 100% auto !important;
	background-position: center bottom !important;
	background-repeat: no-repeat !important;
	opacity: .7;
	transition: .2s;
}
.slick-next { background-image: url('../img/icon/arrow_next.png') !important; }
.slick-prev { background-image: url('../img/icon/arrow_prev.png') !important; }
.slick-next:hover,
.slick-prev:hover { opacity: 1; }

.lazy {
	color: transparent;
}
.text-image {
	height: 1em !important;
	width: auto;
	margin-right: .5em;
	vertical-align: middle;
	-webkit-transform: translateY(-.2em);
	transform: translateY(-.2em);
}

#overlay {
	position: fixed;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;

	background: #090909;

	z-index: 1000;
	overflow: hidden;
}
#overlay.hidden {
	opacity: 0;
	transition: .6s;
}
#overlay .welcome {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	opacity: 0;

	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);

	color: #fff;
	font-weight: normal;
	text-align: center;
}
#overlay.in .welcome { opacity: 1; }
#overlay .title {
	margin-bottom: 1.5rem;
	overflow: hidden;
	line-height: 1em;
}
#overlay .title i {
	display: inline-block;
	width: 1.85em;

	font-style: normal;
	font-size: 20px;
	text-align: center;
	line-height: 1em;

	transition-duration: .42s;

	-webkit-transform: translate(-.15em, 100%);
	transform: translate(-.15em, 100%);
}
#overlay .loaded .title i {
	-webkit-transform: translate(-.15em, 0%);
	transform: translate(-.15em, 0%);
}
#overlay .title .spacer { width: 1.4em; }
#overlay .loading {
	position: absolute;
	top: 55%;
	left: 50%;

	width: 0;
	height: 1px;
	background: #fff;

	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);

	transition: 1s ease-in-out;
	transition-delay: 1s;
}
#overlay.in .loading {
	width: 100vw;
}
.select-lang-welcome {
	width: 30em;
	margin: auto;
	letter-spacing: .5em;
	line-height: 1em;
}
.select-lang-welcome .japanese {
	display: block;
	float: left;
	overflow: hidden;
}
.select-lang-welcome .english {
	display: block;
	float: right;
	overflow: hidden;
}

.select-lang-welcome span {
	display: inline-block;
	opacity: 0;

	transition: .6s ease-in-out;
	transition-delay: 1.5s;

	-webkit-transform: translateY(100%);
	transform: translateY(100%);
}
.welcome.loaded .select-lang-welcome span {
	opacity: 1;
	-webkit-transform: translateY(0);
	transform: translateY(0);
}
.welcome .please {
	position: absolute;
	bottom: -2rem;
	left: 0;
	width: 100%;

	color: #999;
	opacity: 0;

	-webkit-transform: translateX(1em);
	transform: translateX(1em);
}
.welcome.loaded .please {
	opacity: 1;
	transition: .4s;
	transition-delay: 4s;
}
@media (max-width: 544px) {
	#overlay .title { margin-bottom: 2.5em; }
	#overlay .title i {
		width: 1.5em;
		font-size: 16px;
	}
	.select-lang-welcome {
		width: 70%;
		font-size: 1rem;
	}
	.welcome .please { bottom: -3rem; }
}


header {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	z-index: 1000;

	color: #fff;
	font-weight: 300;
	background: linear-gradient( to bottom, rgba(0,0,0,0.6) 60%, rgba(0,0,0,.0) );
}
.header-inner {
	max-width: 1200px;
	width: 100%;
	margin: auto;

	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
header a { text-decoration: none; }
header h1 {
	margin: 1em 0;
	font-size: 1rem;
	line-height: 1em;
	font-weight: 300;
}
.select-language {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.select-language a {
	display: inline-block;
	padding-left: 1em;
	opacity: .5 !important;

	font-size: 1rem;
}
.select-language a.current { opacity: 1 !important; }
nav {
	width: 100%;
	border-top: 1px solid rgba(255,255,255,.8);
	font-size: 2rem;
	/* transition: .3s; */
}
nav ul {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
nav ul .underline {
	content: "";
	display: block;
	position: absolute;
	bottom: .2em;
	left: 0;
	padding: 0;
	height: 1px;
	transition: .3s ease-in-out;

	background: linear-gradient( to left, transparent, rgba(255,255,255,.8) 40%, rgba(255,255,255,.8) 60%, transparent ); 
}
nav li {
	padding: .5em 0;
	line-height: 1em;
}
header a {
	opacity: .8;
	transition: .2s;
}
header nav.in-anim ul li a { transition: none; }
header a:hover { opacity: 1 !important; }

header #menubtn { display: none; }

.global {
	position: fixed;
	background: #000;
	padding-bottom: 5px;
}
.global .header-inner { flex-wrap: nowrap; }
.global h1 {
	order: 0;
	margin: 0.75em 0.75em 0.75em 0;
}
.global h1 a {
	display: inline-block;
	padding-right: 3rem;
	border-right: 1px solid rgba(255,255,255,.8);
}
.global .select-language { order : 2; }
.global nav {
	order: 1;
	flex-grow: 1;

	display: flex;
	align-items: center;

	width: 1px;
	border-top: 0;
	font-size: 1rem;
}
#slidemenu { display: none; }
.global nav ul { justify-content: flex-start; }
.global nav ul li { padding-left: 3rem; }
.global nav ul .underline { opacity: 0; }

.global .scroll-pos {
	position: absolute;
	bottom: 0;
	left: 50%;
	height: 5px;
	width: 1em;
	background: #bc013e;
	transition: .05s ease-in-out;
}
@media (max-width: 1220px) {
	.header-inner { max-width: 90vw; }
	.global nav ul li { padding-left: 2rem; }
	@media (max-width:1027px) {
		nav { font-size: 1.7rem; }
		@media (max-width:767px) {
			header {
				position: fixed;
				top: auto;
				bottom: 0;
				left: 0;
				right: 0;
				background: #000;

				display: none;
			}
			.global { padding-bottom: 0; }
			.global .scroll-pos { display: none; }
			.global h1 { margin: 1em 0; }
			.global h1 a {
				padding-right: 0;
				border-right: 0;
			}
			nav { display: none !important; }
			.global nav ul li { padding-left: 1.5rem; }
			#slidemenu {
				display: block !important;
				position: fixed;
				right: 0;
				top: 0;
				height: 100vh;
				padding-bottom: 10vh;
				border: none;
				background: #000;
				color: #fff;
				-webkit-transform: translate3d(100%, 0, 1px);
				transform: translate3d(100%, 0, 1px);
			}
			#slidemenu ul {
				padding: 3rem 0 0 3rem;
				flex-direction: column;
				align-items: flex-start;
			}
			#slidemenu a {
				display: inline-block;
				padding-left: 1rem;
				border-left: 1px solid #fff;
			}
			#slidemenu .select-language {
				justify-content: center;

				z-index: 1;
				position: fixed;
				bottom: 80px;
				left: 0;
				width: 100%;

				font-size: 1rem;
				line-height: 1rem;
			}
			#slidemenu .select-language a {
				padding: 0 15px;
			}
			#slidemenu .select-language a:first-child {
				border-left: 0;
			}
			#menubtn {
				z-index: 1000;
				display: block;
				position: fixed;
				bottom: 1rem;
				right: 1rem;
				padding: 0 .7rem;
				width: 3.5rem;
				height: 3.5rem;
				border-radius: .2rem;
				background: #000;
				transition: .4s ease-in-out;
				-webkit-transform: translate3d( 0, 0, 1px);
				transform: translate3d( 0, 0, 1px);
			}
			.jslide-open #menubtn {
				-webkit-transform: translate3d(-250px, 0, 1px);
				transform: translate3d(-250px, 0, 1px);
			}
			#menubtn span {
				position: absolute;
				display: block;
				top: 50%;
				left: .7rem;
				right: .7rem;

				height: 100%;
				border-top: 1px solid #fff;
			}
			#menubtn span:first-child {
				-webkit-transform: translate(0, -.7rem);
				transform: translate(0, -.7rem);
			}
			#menubtn span:last-child {
				-webkit-transform: translate(0, .7rem);
				transform: translate(0, .7rem);
			}
		}
	}
}



#slidemenuDropdown {
	visibility: hidden;
	opacity: 0;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 10000;
	background: rgba(0,0,0,.6);
}
#slidemenuDropdown.show {
	opacity: 1;
	visibility: visible;
}
#slidemenuDropdown.visible {
}
.section-wrapper > section {
	display: block;
	width: 100%;
	visibility: hidden;
	overflow: hidden;
}
.shown > .section-wrapper section { visibility: visible; }
.container {
	width: 100%;
	max-width: 1200px;
	margin: auto;
}
@media (max-width:1220px) {
	.container { max-width: 90vw; }
	@media (max-width:767px) {
		.container {
			max-width: 100%;
			padding-left: 1rem;
			padding-right: 1rem;
		}
	}
}
.section-title {
	margin-bottom: 3rem;
	display: inline-block;
	position: relative;
	color: #fefefe;
	font-size: 7rem;
	font-weight: 100;
	line-height: 1.5em;
}
.section-title::after {
	content: "";
	position: absolute;
	bottom: .1em;
	right: 0;
	width: 200vw;
	height: 1px;
	background: #fefefe;
}
@media (max-width:767px) {
	.section-title {
		margin-bottom: 2rem;
		font-size: 4.5rem;
	}
}

.section-body { font-weight: normal; }

.bg-gear { position: relative; }
.bg-gear::before {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 50%;

	background-image: url('../img/bg_gear.png');
	background-repeat: repeat-y;
	background-position: left center;
	background-size: 500px auto;
}
.bg-gear::after {
	content: "";
	display: block;
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	width: 50%;

	background-image: url('../img/bg_gear.png');
	background-repeat: repeat-y;
	background-position: right center;
	background-size: 500px auto;
}


footer {
	z-index: 1000;
	text-align: center;
	visibility: hidden;
}
.shown footer {
	visibility: visible;
}
.footer-inner {
	background: #000;
	padding: .2rem 0 .2rem;
}
#author {
	position: relative;
	display: block;
	margin: -2rem auto 0;
}
#author::before {
	content: "";
	display: inline-block;
	border-right: 1.5rem solid #000;
	border-top: 2.4rem solid transparent;
	vertical-align: bottom;
}
#author::after {
	content: "";
	display: inline-block;
	border-left: 1.5rem solid #000;
	border-top: 2.4rem solid transparent;
	vertical-align: bottom;
}
#author img {
	padding: .2rem 0;
	height: 2.4rem;
	background: #000;
}
@media (max-width: 768px) {
	#author img { height: 2rem; }
}


.links {
	display: flex;
	justify-content: center;
	align-items: center;

	padding: 3rem 0;
}
.links a {
	display: block;
	padding: 1rem;
	max-width: 250px;
	min-width: 25%;
}
.links a.circle-logo img {
	height: 5rem;
}
.links a:first-of-type { padding-left: 0; }
.links a:last-of-type { padding-right: 0; }
.links a img {
	max-height: 150px;
}
.footer-twitter {
	padding-bottom: 5rem;
}
.footer-twitter a {
	display: block;
	margin: auto;
	opacity: .5;
	width: 3rem;
	transition: .2s;
}
.footer-twitter a:hover { opacity: 1; }

#copyright {
	color: #fff;
	font-size: 10px;
	padding-bottom: 1rem;
}

@media (max-width:768px) {
	.links { justify-content: space-between; }	
	.footer-twitter { padding-bottom: 4rem; }
	@media (max-width:767px) {
		.links { padding: 1rem 0; }
		#copyright { padding-bottom: 4rem; }
	}
}


body.open_modal {
	overflow-y: hidden;
}
.modal_overlay {
	position: fixed;
	z-index: 99999;
	-webkit-transform: translate3d(0px, 0px, 2px);
	transform: translate3d(0px, 0px, 2px);
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba( 0, 0, 0, .7);
	
    overflow-x: hidden;

	visibility: hidden;
	opacity: 0;
	transition: .2s;

	display: flex;
	justify-content: center;
	align-items: center;
}
.modal_overlay.show {
	visibility: visible;
	opacity: 1;
}
.modal {
	margin: auto;
	padding: 3rem;
	width: 100%;
	max-width: 1000px;

	transition: .4s;
}
.modal.backdrop {
	opacity: 0;
	transform: translateY(-5vh) scale(1);
	-webkit-transform: translateY(-5vh) scale(1);
}
.show .modal.backdrop {
	opacity: 1;
	transform: translateY(0px) scale(1);
	-webkit-transform: translateY(0px) scale(1);
}
.modal .modal_content {
	padding: 2px;
	background: #fff;
}
.modal .modal_body {
	position: relative;
	height: auto;
	max-height: 90vh;
	padding: 30px 20px;
	margin: 0 auto;
	background: #000;
	box-sizing: border-box;
	overflow-y: scroll;
}
.modal .close {
	position: absolute;
	right: 10px;
	top: 10px;
	z-index: 100;

	display: block;
	width: 32px;
	height: 32px;

	filter: brightness(.5);
	cursor: pointer;

	/* -webkit-transform: translate(100%, -100%);
	transform: translate(100%, -100%); */
}
.modal .close::before,
.modal .close::after {
	content: "";
	display: inline-block;
	width: 100%;
	height: 2px;
	background: #fff;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%) rotate(45deg);
	transform: translate(-50%, -50%) rotate(45deg);
}
.modal .close::after {
	-webkit-transform: translate(-50%, -50%) rotate(-45deg);
	transform: translate(-50%, -50%) rotate(-45deg);
}
.modal.movie {
	padding-left: 0;
	padding-right: 0;
	max-width: 960px;
}
.movie .modal_body {
	width: 100%;
	padding: 0;
	padding-top: 56.25%;
	overflow: hidden;
}
.movie.modal .close {
	top: 0;
	right: 0;
}
.modal.movie iframe {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
}
@media (max-width: 960px) {
	.movie.modal .close { right: 10px; }
}
@media (max-width: 767px) {
	.modal { padding: 3.5rem 1rem 1rem; }
	.modal .close {
		top: .5rem;
		right: .5rem;
	}
}


.video-frame {
	margin: auto;
	max-width: 960px;
}
.video-container {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
	overflow: hidden;
}
.video-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
}



.table {
	border-collapse: collapse;
	border: 1px solid #333;
}
.table tr th {
	padding: .25em .75em;
	border: 1px solid #333;
	vertical-align: middle;
}
.table tr td {
	padding: .25em .75em;
	border: 1px solid #333;
}
.table-responsive { position: relative; }
@media (max-width: 1220px) {
	.table tr th {
		padding: .25em .5em;
	}
	.table tr td {
		padding: .25em .5em;
	}
}
@media (max-width:768px) {
	.table-responsive {
		display: block;
		width: 100%;
		overflow-x: scroll;
	}
}



#swipebox-close { right: 2rem; }