* {
	padding:0;
	margin:0;
	background: transparent;
}

body {
	text-align: start;
	background-color: #000;
	position:relative;
	font: normal normal 14px garamond, 'Times New Roman', Times, FreeSerif, serif;
}
:focus{outline:none;}

/*------[font]-------*/
.Garam-It {
	font-family: garamond-premier-pro-caption, serif;
	font-weight: 400;
	font-style: italic;
}
	
.Garam {
	font-family: garamond-premier-pro-caption, serif;
	font-weight: 400;
	font-style: normal;
}
	
.Din-Narrow-Light {
	font-family: din-2014-narrow, sans-serif;
	font-weight: 300;
	font-style: normal;
}


/*------[spinner]-------*/
.spinner {
	position: fixed;
	top: 0;/*WEBオリジナル*/
	bottom: 0;
	left: 0;
	right: 0;
	width: 30px;
	height: 30px;
	margin: auto;
	background-color: #ccc;
	border-radius: 100%;
	-webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
	animation: sk-scaleout 1.0s infinite ease-in-out;
}

@keyframes sk-scaleout {
	0% { 
		-webkit-transform: scale(0);
		transform: scale(0);
	} 100% {
		-webkit-transform: scale(1.0);
		transform: scale(1.0);
		opacity: 0;
	}
}

/*------[layout]-------*/
#playerArea {
	position:relative;
	width: 100%; 
	overflow: hidden;
}

#mainPlayer, #subPlayer, #sub2ndPlayer{
	-moz-transition: 25s ease-in-out;
	-ms-transition: 25s ease-in-out;
	-o-transition: 25s ease-in-out;
	-webkit-transition: 25s ease-in-out;
	transition: 25s ease-in-out;
	-webkit-transform: scale(10);
	-o-transform: scale(10);
	-moz-transform: scale(10);
	-ms-transform: scale(10);
	transform: scale(10);
}

#subPlayer, #sub2ndPlayer{
	position:absolute;
	top:0;
	left:0;
}
#mainPlayer {
	position:fixed;
	width: 100%;
	height: 1050px; 
	top:0;
	left:0;
}
#subPlayer{
	mix-blend-mode: hard-light;
}
#sub2ndPlayer{
	mix-blend-mode: hard-light;
}
#mainSpeaker{
	width:1px;
	height:1px;
	opacity:0;
}
#subSpeaker, #sub2ndSpeaker, #sub3rdSpeaker{
	width:1px;
	height:1px;
	opacity:0;
}

#mainPlayer.transX{
	-webkit-transform: scale(30,1.15);
	-o-transform: scale(30,1.15);
	-moz-transform: scale(30,1.15);
	-ms-transform: scale(30,1.15);
	transform: scale(30,1.15);
}

#mainPlayer.transY{
	-webkit-transform: scale(1.15,30);
	-o-transform: scale(1.15,30);
	-moz-transform: scale(1.15,30);
	-ms-transform: scale(1.15,30);
	transform: scale(1.15,30);
}

#mainPlayer.transZ{
	-webkit-transform: scale(25);
	-o-transform: scale(25);
	-moz-transform: scale(25);
	-ms-transform: scale(25);
	transform: scale(25);
}

#mainPlayer.just{
	-webkit-transform: scale(14,7);
	-o-transform: scale(14,7);
	-moz-transform: scale(14,7);
	-ms-transform: scale(14,7);
	transform: scale(14,7);
}

#subPlayer.transX{
	-webkit-transform: scale(30,1.25);
	-o-transform: scale(30,1.25);
	-moz-transform: scale(30,1.25);
	-ms-transform: scale(30,1.25);
	transform: scale(30,1.25);
}
#subPlayer.transY{
	-webkit-transform: scale(1.15,30);
	-o-transform: scale(1.15,30);
	-moz-transform: scale(1.15,30);
	-ms-transform: scale(1.15,30);
	transform: scale(1.15,30);
}
#subPlayer.transZ{
	-webkit-transform: scale(30,1.25);
	-o-transform: scale(30,1.25);
	-moz-transform: scale(30,1.25);
	-ms-transform: scale(30,1.25);
	transform: scale(30,1.25);
}
#subPlayer.just {
	-webkit-transform: scale(7,14);
	-o-transform: scale(7,14);
	-moz-transform: scale(7,14);
	-ms-transform: scale(7,14);
	transform: scale(7,14);
}
	
#sub2ndPlayer.transX{
	-webkit-transform: scale(30,1.15);
	-o-transform: scale(30,1.15);
	-moz-transform: scale(30,1.15);
	-ms-transform: scale(30,1.15);
	transform: scale(30,1.15);
}
	
#sub2ndPlayer.transY{
	-webkit-transform: scale(1.15,30);
	-o-transform: scale(1.15,30);
	-moz-transform: scale(1.15,30);
	-ms-transform: scale(1.15,30);
	transform: scale(1.15,30);
}

#sub2ndPlayer.transZ{
	-webkit-transform: scale(1.15,30);
	-o-transform: scale(1.15,30);
	-moz-transform: scale(1.15,30);
	-ms-transform: scale(1.15,30);
	transform: scale(1.15,30);
}
#sub2ndPlayer.just {
	-webkit-transform: scale(14,7);
	-o-transform: scale(14,7);
	-moz-transform: scale(14,7);
	-ms-transform: scale(14,7);
	transform: scale(14,7);
}

#caption{ 
	position:fixed; 
	width:100%; 
	top:0; 
	bottom:0; 
	background-color:black; 
	z-index:999;
	font-size:120%; /*WEBオリジナル*/
}
#title {
	font-size:	28px; /*WEBオリジナル*/
}
#caption-data{
	position: fixed;
	color: #dcdcdc;
	top: -11rem; /*WEBオリジナル*/
	bottom: 0;
	right: 0;
	left: 0;
	margin: auto;
	width:100%;
	height: fit-content;
	text-align:center;
	line-height: 1.5;
}
#caption-data:hover{ cursor: default;}


#masthead-search {
	width: 350px; /*WEBオリジナル*/
	overflow: hidden;
	position:fixed;
	top: 0; /*WEBオリジナル*/
	bottom: 0;
	right: 0;
	left: 0;
	margin: auto;
	height: 50px; /*WEBオリジナル*/
	z-index:999;
}
#masthead-search.repos { }
#masthead-search.repos #search-terms { }
#masthead-search.repos #q { }
#masthead-search::after { }

#search {
	height: 100%;
}

#search-terms {
	border: 1px solid #ccc;
	-moz-box-shadow: inset 0 1px 2px #eee;
	-ms-box-shadow: inset 0 1px 2px #eee;
	position: relative;
	overflow: hidden;
	margin: 0;
	padding-left: 10px;
	padding-right: 50px;
	font-size: 14px;
	line-height: 30px;
	background-color: #fff;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	-moz-transition: border-color .2s ease;
	-ms-transition: border-color .2s ease;
	-o-transition: border-color .2s ease;
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
	border-radius: 0;
	height: 100%;
	width: 400px; /*WEBオリジナル*/
	float:left;
}

#search-terms.hover {
	-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
	-ms-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
	background-color: #eee;
}

#search-terms.focus {
	-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
	-ms-box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
	background-color: #ccc;
}

#search-terms label {
	height: 100%;
	display: block;
	_margin-top: 5px;
	height: 100%;
	line-height: 30px;
	padding: 0;
	border: none;
	overflow: hidden;
	cursor: default;
}

#q {
	outline: none;
	height: 100%;
	display: inline-block;
	width: 100%;
	padding: 2px 6px;
	margin: 0;
	border: 0;
	outline: none;
	background: transparent;
	font-size: 16px; /*WEBオリジナル*/
	_position: absolute;
	_left: 0;
	_width: 100%;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
#q:-webkit-autofill{
	-webkit-transition: background-color 9999s;
	transition: background-color 9999s;
}

#search_btn {
	position: absolute;
	right: 0;
	top: 0;
	z-index: 10;
	-webkit-appearance: none;
	-webkit-background-clip: border-box;
	-webkit-background-origin: padding-box;
	-webkit-background-size: auto;
	-webkit-box-align: center;
	background-attachment: scroll;
	background-clip: border-box;
	background-color: transparent;
	background-origin: padding-box;
	background-size: auto;
	border: none;
	box-sizing: border-box;
	color: rgb(130, 130, 130);
	cursor: pointer;
	direction: ltr;
	display: block;
	filter: none;
	float: right;
	font-family: arial, sans-serif;
	font-size: 11px; /*WEBオリジナル*/
	font-weight: bold;
	height: 100%;
	letter-spacing: normal;
	line-height: normal;
	margin: 0px;
	padding: 0px;
	text-align: center;
	text-indent: 0px;
	text-shadow: rgba(255, 255, 255, 0.498039) 0px 1px 0px;
	text-transform: none;
	unicode-bidi: embed;
	vertical-align: middle;
	white-space: nowrap;
	width: 50px; /*WEBオリジナル*/
	word-spacing: 0px;
	word-wrap: normal;
	-moz-transition: border-color .2s ease;
	-ms-transition: border-color .2s ease;
	-o-transition: border-color .2s ease;
	-webkit-transition: border-color .2s ease;
	transition: border-color .2s ease;
}

#search_btn.hover {
	border: 1px solid #b9b9b9;
	border-left-width: 0px;
	background-color: transparent;
}

#search_btn .btn{
	background: no-repeat url(../img/www-hitchhiker-vflmnaCdT.png) -237px -50px;
	cursor: pointer;
	display: block;
	font-size: 11px;
	font-weight: bold;
	height: 14px;
	margin: 0 auto;
	opacity: 0.6;
	text-align: center;
	text-indent: -10000px;
	width: 14px;
}

#search_btn.hover .btn{
	opacity: 1;
}

.hasPlaceholder {
   color: #999;
}

::-webkit-input-placeholder {
    color:    #ccc;
}
:-moz-placeholder {
    color:    #ccc;
}

#next {
	width: 100%; 
	height: 100%; 
	overflow:hidden; 
	position:absolute;
	top:0;
	left:0;
	z-index:998;
}

#list-area{ 
	position: fixed;
	top:0; 
	left:0; 
	overflow:hidden; 
	background: rgba(0, 0, 0, 0.7); 
	z-index:998;
	transition: left 200ms ease;
	-webkit-transition: left 200ms ease;
	-moz-transition: left 200ms ease;
	-o-transition: left 200ms ease;
	-ms-transition: left 200ms ease;
}
#list-area.listShow{left:0;}
#list-area.listClose{left:-103px;} 

#list-area {
	width: 80px;
	height: 100%;
	overflow: scroll;
	-ms-overflow-style: none; /* スクロールバー非表示 IE, Edge 対応 */
	scrollbar-width: none; /* スクロールバー非表示 Firefox 対応 */
}
#list-area::-webkit-scrollbar { /* スクロールバー非表示 Chrome, Safari 対応 */
	display:none; 
}

#list-area ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
	left:0;
}

#list{
	left:0;
	transition: left 200ms ease;
	-webkit-transition: left 200ms ease;
	-moz-transition: left 200ms ease;
	-o-transition: left 200ms ease;
	-ms-transition: left 200ms ease;
}

#list.listShow{left:0;}
#list.listClose{left:-103px;} 

li.movie {
	position:relative;
	width:80px;
	height:45px;
	overflow:hidden;
}
li.movie:nth-last-of-type(1){margin-bottom:0;}

li.movie.on {
	background: rgba(0, 0, 0, 1); 
}

li.movie.playing,
li.movie.mainPlaying,
li.movie.subPlaying,
li.movie.sub2ndPlaying,
li.movie.mainSpeaking,
li.movie.subSpeaking,
li.movie.sub2ndSpeaking{
	background: rgba(0, 0, 0, 1); 
	background: rgba(145, 145, 145, 1); 
}

li.movie img {
	position:	absolute;
	width:		80px;
	margin:		auto;
	top:		0;
	bottom:		0;
	left:		0;
	right:		0;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; /* IE */
	filter: alpha(opacity=40); /* IE */
	-moz-opacity:0.4; /* Firefox(old) */
	-khtml-opacity: 0.4; /* Safari(old) */
	opacity: 0.4;
	cursor: pointer;
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	filter: grayscale(100%);
}
li.movie img:hover {
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; /* IE */
	filter: alpha(opacity=100); /* IE */
	-moz-opacity:1; /* Firefox(old) */
	-khtml-opacity: 1; /* Safari(old) */
	opacity: 1;
}

li.movie.playing img,
li.movie.mainPlaying img,
li.movie.subPlaying img,
li.movie.sub2ndPlaying img,
li.movie.mainSpeaking img,
li.movie.subSpeaking img,
li.movie.sub2ndSpeaking img{
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; /* IE */
	filter: alpha(opacity=100); /* IE */
	-moz-opacity:1; /* Firefox(old) */
	-khtml-opacity: 1; /* Safari(old) */
	opacity: 1;
	-webkit-filter: grayscale(50%);
	-moz-filter: grayscale(50%);
	-ms-filter: grayscale(50%);
	-o-filter: grayscale(50%);
	filter: grayscale(50%);
}

.multiply{
	mix-blend-mode:		multiply !important;
	opacity:			0.7 !important;
}
.darken{
	mix-blend-mode:		darken !important;
}
.screen{
	mix-blend-mode:		screen !important;
	opacity:			1 !important;
}
.lighten{
	mix-blend-mode:		lighten !important;
	opacity:			1 !important;
}
.overlay{
	mix-blend-mode:		overlay !important;
	opacity:			1 !important;
}
.colordodge{
	mix-blend-mode:		color-dodge !important;
	opacity:			0.7 !important;
}
.colorburn{
	mix-blend-mode:		color-burn !important;
	opacity:			0.7 !important;
}
.hardlight{
	mix-blend-mode:		hard-light !important;
	opacity:			0.7 !important;
}
.softlight{
	mix-blend-mode:		soft-light !important;
	opacity:			0.7 !important;
}
.difference{
	mix-blend-mode:		difference !important;
	opacity:			0.7 !important;
}
.exclusion{
	mix-blend-mode:		exclusion !important;
	opacity:			0.7 !important;
}
.hue{
	mix-blend-mode:		hue !important;
	opacity:			0.7 !important;
}
.saturation{
	mix-blend-mode:		saturation !important;
	opacity:			0.7 !important;
}
.color{
	mix-blend-mode:		color !important;
	opacity:			0.7 !important;
}
.luminosity{
	mix-blend-mode:		luminosity !important;
	opacity:			0.7 !important;
}

.hidden {
	display:none;
}
.invisible {
	visibility:			hidden !important;
}

.cursor-hide {
	cursor: 			none !important;
}
.cursor-hide #next {
	cursor: 			none !important;
}

@media screen and (min-width:1920px){
	.spinner {
		top: 17rem;/*KAATバージョン*/
	}
	#caption{ 
		font-size:400%; /*KAATバージョン*/
	}
	#title {
		font-size: 77px; /*KAATバージョン*/
	}
	#caption-data{
		top: -8rem; /*KAATバージョン*/
	}
	#masthead-search {
		width: 570px; /*KAATバージョン*/
		top: 17rem;/*KAATバージョン*/
		height:	72px;/*KAATバージョン*/
	}
	#masthead-search.repos {
		top: 0;/*KAATバージョン*/
	}
	#search-terms {
		width: 100%; /*KAATバージョン*/
	}
	#q {
		font-size: 370%; /*KAATバージョン*/
		text-align: center; /*KAATバージョン*/
	}
	#search_btn {
		font-size: 20px;/*KAATバージョン*/
		width: 70px;/*KAATバージョン*/
	}
}

@media screen and (max-width:414px){
	#masthead-search {
	    width: 350px !important;
	}
	#search-terms {
		width: 350px !important;
;
	}
	#list-area {
		display:none;
	}
	#masthead-search.repos {
		left:0;
		right:0;
		width: 100% !important;
	}
	#masthead-search.repos #search-terms {
		left:0;
		right:0;
		width:100% !important;
	}
}

@media screen and (max-width:375px){
	#masthead-search {
	    width: 320px !important;
	}
	#search-terms {
		width: 320px !important;
	}
}

@media screen and (max-width:320px){
	#masthead-search {
    	width: 300px !important;
	}
	#search-terms {
		width: 300px !important;
	}
}