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

body {
	width: 100%;
	height: 100%;
	/* position: absolute; */
	background-color: #000;
	min-width: 900px;
	/*
    background-image: url(../img/sub-bg.jpg);
    */
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
}
body.top {
	position: inherit !important;
	width: inherit;
	background-image: none;
	background-color: #000;
}
header {
	/* background-color: #000; */
    /*position: absolute;*/
	z-index: 10;
	width: 100%;
	top: 0px;
	left: 0px;
}
.header-wrap.clearfix {
	padding: 30px;
	position: relative;
}
header h1 {
	font-size: 10.5px;
	margin-bottom: 20px;
	margin-left: -3px;
	color: #9e9a95;
}
header a {
	float: left;
}
header a img {
	width: 140px;
}
header nav {
	float: right;
}
header nav ul {
	margin-top: 10px;
}
header nav ul li {
	display: inline-block;
	margin-right: 38px;
	text-align: center;
}
header nav ul li:last-child {
	margin-right: 10px;
}
header nav ul li a {
	font-size: 16px;
	color: #dad4c9;
}
/* /header */

.first img {
	width: 600px;
	display: block;
	margin: 0 auto;
}
footer.top-footer {
	text-align: center;
	position: absolute;
	width: 100%;
	bottom: 0px;
	z-index: 11;
}
footer p {
	font-size: 9px;
	color: #686868;
	margin-bottom: 60px;
	text-align: center;
}
div.information {
}
div.information div.first {
	text-align: center;
}
div.information div.first p {
	font-size: 13px;
	line-height: 1.8;
}
div.sub-header {
	text-align: center;
	padding-bottom: 105px;
	margin-top: 75px;
}
div.sub-header h2 {
	font-weight: bold;
	font-size: 24px;
	color: #c6c0b2;
}
video#video {
	width: 100%;
	height: 100%;
}
div.video-cover {
	position: absolute;
	height: 100%;
	width: 100%;
	background-image: url(../img/movie-cover.png);
	z-index: 3;
}
header nav ul li:last-child a {
}
a.labo-logo {
	position: absolute;
	top: 29px;
	right: 40px;
}
a.labo-logo img {
	width: 45px;
}
footer {
	margin-top: 90px;
}
/* ▼subpage contents start */

div.information {
}
div.information p {
}
.trial a {
	display: inline-block;
	margin-bottom: 30px;
	border: 1px solid rgba(204, 204, 204, 0.17);
	margin: 5px;
	margin-bottom: 30px;
}
.video-wrap {
	text-align: center;
	position: relative;
	z-index: 2;
}
video#video {
	width: 100%;
	height: 100%;
	margin: 0 auto;
}
div.vol {
	display: inline-block;
	position: absolute;
	top: 43px;
	right: 104px;
	font-size: 13px;
}
div.vol span {
	cursor: pointer;
	background-color: #665c55;
	padding: 2px 8px;
	font-size: 11px;
	border-radius: 3px;
	color: #dedede;
}
/* ▲subpage contents start */




div.cast {
	margin-bottom: 60px;
}
div.cast h2 {
	font-weight: bold;
	font-size: 17px;
	margin-bottom: 17px;
}
div.cast div.inner {
	/* display: table; */
	text-align: left;
	width: 360px;
	margin: 15px auto;
	font-size: 0px;
}
div.cast div.inner.inner-freewidth {
	/* display: table; */
	width: 100%;
}
div.cast div.inner p {
	display: inline-block;
	width: 51%;
	font-size: 15px;
}
div.cast div.inner p.single {
	display: inline-block;
	width: 100%;
	text-align: center;
}
div.cast div.inner span {
	display: table-cell;
	width: 26%;
	font-size: 15px;
	display: inline-block;
}
div.cast div.inner a {
	display: table-cell;
ll;
*/ 	width: 19px;
	width: 5%;
	font-size: 12px;
	display: inline-block;/* color: #7e756b; */
}
div.cast div.inner a i {
	color: #94805f !important;
}
div.cast div.inner a.link {
	width: inherit;
	display: inline;
	font-size: 14px;
	text-decoration: underline;
}
div.cast div.inner p span.small {
	font-size: 65%;
	width: inherit;
	display: inline-block;
}
/*  */ 

.story {
	text-align: center;
}
.story .inner {
	display: inline-block;
	text-align: left;
}
.story .inner p {
	font-size: 13.5px;
	/* text-align: center; */
	line-height: 2.3;
	margin-top: -97px;
}
/*  */


.header-wrap-sub {
	background-image: url(../img/sub-bg1.png);
	background-position: center bottom -25px;
	;
	margin-bottom: 40px;
	background-repeat: no-repeat;
}
body.top header {
	position: absolute;
}
header nav ul li a i {
	display: block;
	font-size: 9px;
	margin-top: 6px;
	opacity: 0.8;
}
ul.sm-slider {
	position: absolute !important;
	width: 0px !important;
	height: 0px !important;
}
img.dorm {
	margin-top: 9px;
}
.rand-msg {
	position: absolute;
	z-index: 20;
	top: 45%;
	width: 100%;
	text-align: center;
	font-size: 30px;
	font-weight: bold;
	line-height: 1.9;
}
div.graphic {
	width: 800px;
	margin: 0 auto;
	font-size: 0px;
	text-align: center;
}
div.graphic a {
	display: inline-block;
	border: 4px solid rgba(204, 204, 204, 0.17);
	margin: 5px;
	vertical-align: top;
}
div.graphic a img.transit.alto-descrive {
	width: 230px;
}
a.labo-link {
	width: inherit !important;
	font-size: 15px !important;
	text-decoration: underline;
}
h3.graphic-h3 {
	font-weight: bold;
	text-align: center;
	font-size: 17px;
	margin-bottom: 20px;
}
div.graphic-sns {
}
div.graphic-sns a {
	width: 230px;
	height: 175px;
	display: inline-block;
	border: 4px solid rgb(34, 34, 34);
	margin: 5px;
	background-size: cover;
}
div.graphic-sns a.gs-1 {
	background-image: url(../img/sns1.jpg);
}
div.graphic-sns a.gs-2 {
	background-image: url(../img/sns2.jpg);
}
div.graphic-sns a.gs-3 {
	background-image: url(../img/sns3.jpg);
}
div.graphic-sns a.gs-4 {
	background-image: url(../img/sns4.jpg);
}
div.graphic-sns a.gs-5 {
	background-image: url(../img/sns5.jpg);
}
div.graphic-sns a.gs-6 {
	background-image: url(../img/sns6.jpg);
}
div.graphic-sns a.gs-7 {
	background-image: url(../img/sns7.jpg);
}
div.graphic-sns a.gs-8 {
	background-image: url(../img/sns8.jpg);
}
div.story-memento {
	width: 400px;
	margin: 0 auto;
	border: 1px solid;
	padding: 30px;
	margin-top: 40px;
	text-align: center;
}
div.story-memento p {
	font-size: 14px;
	margin-bottom: 20px;
	line-height: 1.8;
}
div.story-memento a {
	text-decoration: underline;
}
a.reverse {
	background-color: #aca197;
	/* padding: 0px 4px; */
	font-size: 11px;
	color: #000;
	font-weight: bold;
	text-decoration: none !important;
	border-radius: 3px;
	width: 100%;
	display: inline-block;
	margin-bottom: 5px;
}
img.story-door {
	vertical-align: top;
	margin-top: 10px;
	display: block;
	margin: 0 auto;
}
img.story-door2 {
	vertical-align: top;
	margin-top: 10px;
	display: block;
	margin: 0 auto;
}
div.character {
	text-align: center;
	margin-top: 70px;
	margin-bottom: 40px;
}
div.character h2 {
	font-size: 20px;
	font-weight: bold;
	margin-bottom: 40px;
}
div.character div.wrap {
	font-size: 0px;
	display: inline-block;
}
div.character div.wrap div.single {
	margin-bottom: 25px;
	text-align: left;
}
div.character div.wrap div.single img {
	display: inline-block;
	vertical-align: top;
	margin-right: 30px;
}
div.character div.wrap div.single div.text {
	display: inline-block;
	vertical-align: top;
	text-align: left;
}
div.character div.wrap div.single div.text h3 {
	font-weight: bold;
	font-size: 16px;
	margin-bottom: 20px;
	margin-top: 3px;
}
div.character div.wrap div.single div.text p {
	font-size: 13.5px;/* text-align: center; */
	line-height: 1.7;
}
div.character div.wrap div.single img.img/ch-2.png {
}
div.character div.wrap div.single img.img/ch-3.png {
}
div.control {
	text-align: center;
}
div.control h2 {
	font-size: 20px;
	font-weight: bold;
	margin-bottom: 40px;
}
div.control div.wrap {
	display: inline-block;
}
div.control div.wrap table {
	text-align: left;
	display: inline-block;
	vertical-align: top;
}
div.control div.wrap table tbody {/* padding-right: 30px; */
}
div.control div.wrap table tbody tr {
	margin-bottom: 10px;/* display: block; */
}
div.control div.wrap table tbody tr th {
	padding-bottom: 20px;
	padding-right: 15px;
}
div.control div.wrap table tbody tr th span {
	border: 2px solid;
	border-radius: 4px;
	padding: 4px 8px;
	display: inline-block;
	font-size: 15px;
}
div.control div.wrap table tbody tr td {
	font-size: 14px;
}
div.control div.wrap div.cross-save {
	display: inline-block;
	vertical-align: top;
	margin-left: 40px;
}
div.control div.wrap div.cross-save img {
}
div.control div.wrap div.cross-save p {
	text-align: center;
	font-size: 13px;
	line-height: 1.5;
	margin-top: 5px;
}
div.playthrough {
	text-align: center;
}
div.playthrough div.inner {
	display: inline-block;
	text-align: left;
}
div.playthrough p {
	font-size: 13px;
	line-height: 1.8;
	margin-bottom: 45px;
	font-size: 13px;
	line-height: 2.0;
	margin-bottom: 45px;
	word-wrap: break-word;
	word-break: break-all;
}
div.playthrough h3 {
	font-weight: bold;
	margin-bottom: 20px;
}
div.concept {
	width: 780px;
	margin: 0 auto;
}
div.concept div.q {
	margin-bottom: 25px;
	text-align: right;
}
div.concept div.a {
	margin-bottom: 25px;
}
div.concept div p {
	line-height: 1.9;
	width: 515px;
	border-radius: 10px;
	display: inline-block;
	vertical-align: top;
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Noto Sans Japanese", "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, Meiryo, sans-serif;
	font-size: 15px;
	font-weight: lighter;
	padding: 20px 20px 20px 20px;
}
div.concept div p span {
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Noto Sans Japanese", "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, Meiryo, sans-serif;
	font-weight: bold;
}
div.concept div.q p {
	position: relative;
	border: 1px solid #d7d7d7;
	margin-right: 13px;
	min-height: 25px;
}
div.concept div.a p {
	position: relative;
	margin-left: 15px;
}
div.concept div.q p:after {
	content: "";
	position: absolute;
	width: 10px;
	height: 15px;
	background-image: url(../img/arrow-1.png);
	background-repeat: no-repeat;
	top: 20px;
	right: -10px;
}
div.concept div.a p:after {
	content: "";
	position: absolute;
	width: 10px;
	height: 15px;
	background-image: url(../img/arrow-2.png);
	background-repeat: no-repeat;
	top: 20px;
	left: -10px;
}
div.concept div.q:after {
	content: "";
	width: 93px;
	height: 93px;
	display: inline-block;
	background-image: url(../img/face1.png);
	background-position: center center;
	vertical-align: top;
	border-radius: 10px;
}
div.concept div.a:before {
	content: "";
	width: 93px;
	height: 93px;
	display: inline-block;
	background-image: url(../img/face2.png);
	background-position: center center;
	vertical-align: top;
	border-radius: 10px;
}
div.concept h3 {
	text-align: center;
	margin-bottom: 60px;
	margin-top: 40px;
	font-size: 18px;
	line-height: 1.6;
}
div.concept div.a {
}
div.concept div.a p {
}
div.concept-wrap {
}
div.concept div p {
	color: #000;
	font-weight: normal;
	font-size: 13px;
}
div.concept {
	padding: 50px 50px;
}
div.concept {
	background-color: #fff;
	border-radius: 10px;
	background-image: url(../img/bg-paper.jpg);
}
div.concept div p span {
	color: #000;
	font-weight: bold;
}
div.concept h3 {
	font-weight: bold;
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Noto Sans Japanese", "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, Meiryo, sans-serif;
	font-size: 24px;
	color: #000;
}
div.concept div.a p a {
	font-size: 15px;
	color: #000;
	font-weight: normal;
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Noto Sans Japanese", "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, Meiryo, sans-serif;
	border: 1px solid #b9b9b9;
	border-radius: 7px;
	background-color: #edebe7;
	padding: 6px 11px;
}
div.concept div.a p {
	border: 1px solid #d7d7d7;
}
div.concept div.a p a:after {
	content: "\f08e";
	font-family: FontAwesome;
	margin-left: 7px;
	position: relative;
	top: 1px;
}
div.concept div.q.q-2:after {
	background-image: url(../img/face1b.png);
}
div.concept div.q.q-3:after {
	background-image: url(../img/face1c.png);
}
div.concept div.q.q-4:after {
	background-image: url(../img/face1d.png);
}
div.concept div.q.q-5:after {
	background-image: url(../img/face1e.png);
}
div.concept div.q.q-6:after {
	background-image: url(../img/face1f.png);
}

div.concept div.q.q-7:after {
	background-image: url(../img/face1g.png);
}

div.concept div.a.a-1:before {
	background-image: url(../img/face3b.png);
}
div.concept div.a.a-2:before {
	background-image: url(../img/face4b.png);
}

div.concept div.a.a-3:before {
	background-image: url(../img/face2b.png);
}



div.concept div.a.a-5:before {
	background-image: url(../img/face5.png);
}

div.concept div.a.a-6:before {
	background-image: url(../img/face6.png);
}

div.concept div.a.a-7:before {
	background-image: url(../img/face7.png);
}

.interview-banner {
	text-align: center;
	margin-bottom: 35px;
}
div.interview-movie {
}
div.interview-movie h3 {
    margin: 0px;
    margin-bottom: 20px;
}
div.interview-movie h3 span {
	font-weight: bold;
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Noto Sans Japanese", "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, Meiryo, sans-serif;
	font-size: 14px;
	color: #000;
	display: block;
}
div.interview-movie div.movie {
	    text-align: center;
    margin-bottom: 50px;
    border-bottom: 1px solid #7c6d68;
    padding-bottom: 35px;
}
div.interview-movie div.movie h4 {
	font-weight: bold;/* font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Noto Sans Japanese", "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, Meiryo, sans-serif; */
	font-size: 23px;
	color: #000;
	display: block;
	font-weight: bold;
	margin-bottom: 35px;
}
div.interview-movie div.movie h4 span {
	font-weight: bold;/* font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Noto Sans Japanese", "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, Meiryo, sans-serif; */
	font-size: 14px;
	color: #000;
	display: block;
	margin-bottom: 12px;
}
div.interview-movie div.movie div.image {
	width: 250px;
	float: left;
}
div.interview-movie div.movie div.image img {
	width: 100%;
}
div.interview-movie div.movie div.image p {
	width: inherit;
	margin: 0px;
	padding: 0px;
	margin-bottom: 10px;
	font-size: 11px;
	text-align: left;
}
div.interview-movie div.movie div.text {
	text-align: left;
	color: #000;
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Noto Sans Japanese", "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, Meiryo, sans-serif;
	font-size: 12px;
	line-height: 1.8;
	float: right;
	width: 500px;
}
.clearfix2:after {
	content: "";
	clear: both;
	display: block;
}

div.interview-movie h4 i {
	color: #000;
	margin-bottom:10px;
	    display: inline-block;
}

div.interview-movie div.movie div.text span.m {
	color: #000;
    font-size: 12px;
	padding: 3px 5px;
    background-color: #ab9238;
    /* border: 1px solid #ccc; */
    border-radius: 6px;
    color: #fff;
	}
	
div.interview-movie div.movie div.text span.m:before {
	width:30px;
	height:34px;
	background-image:url(../img/tip-m.png);
	content:"";
	display:inline-block;
	}
	
div.interview-movie div.movie div.text span.y:before {
	width:30px;
	height:34px;
	background-image:url(../img/tip-y.png);
	content:"";
	display:inline-block;
	}	
	
div.interview-movie div.movie div.text span.y {
	padding: 3px 5px;
    background-color: #726e74;
    /* border: 1px solid #ccc; */
    border-radius: 6px;
    color: #fff;
	}
	
div.interview-movie div.movie div.text span.y:before {
	
	}	

p.review {
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Noto Sans Japanese", "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, Meiryo, sans-serif;
    text-align: center;
    font-weight: bold;
    color: #000;
    font-size: 12px;
}

p.review i{
	    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Noto Sans Japanese", "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, Meiryo, sans-serif;
    text-align: center;
    font-weight: bold;
    color: #000;
    font-size: 12px;
    text-decoration: line-through;
	}

div.interview-movie div.movie div.image a {
	position:relative;
	display:block;
	}
	
div.interview-movie div.movie div.image a:after{
	    position: absolute;
    width: 40px;
    height: 40px;
    background-image: url(../img/playicon.png);
    display: block;
    content: "";
    top: 50%;
    left: 50%;
	background-size:cover;
	margin-top:-20px;
	margin-left:-20px;
	
	}
	
div.switch {

text-align: center;

font-size: 0px;
margin-bottom: 35px;
}	

div.switch a{
	
font-size: 18px;
	
color: #49453e;
	
font-weight: bold;
	
display: inline-block;
	
padding: 15px 25px;
	
/* border: 1px solid; */
	
	border: 1px solid #49453e;
	
margin: 20px;
}

div.switch a.active {
    color: #fff;
    /* border: 1px solid #000; */
    background-color: #49453e;
	position:relative;
}

div.switch a.active::after{
 position: absolute;
    content: "";
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-top: 10px solid #49453e;
    left: 50%;
    bottom: -18px;
    margin-left: -7px;
}


a.mv-link {
    color: #000;
    font-weight: normal;
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Noto Sans Japanese", "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, Meiryo, sans-serif;
    border: 1px solid #b9b9b9;
    border-radius: 7px;
    background-color: #edebe7;
    padding: 6px 11px;
	font-size: 13px;
    display: inline-block;
    margin-top: 15px;
	}

a.mv-link:after {
    content: "\f08e";
    font-family: FontAwesome;
    margin-left: 7px;
    position: relative;
    top: 1px;
}

div.concept div p {
    color: #000;
    font-weight: normal;
    font-size: 13px;
    padding: 3px 0px 25px 25px;
}

.interview-banner a {
    margin: 10px;
    display: inline-block;
}


div.index-ko {text-align: center;line-height: 1.7em;}

div.index-ko h2{
font-size: 20px;
    font-weight: bold;
    margin-bottom: 40px;
}

div.index-ko div.inner {text-align: center;}
div.index-ko div.inner div.ko-a1 {/* font-size: 24px; */}
div.index-ko div.inner div.ko-a1 p {
}
div.index-ko div.inner div.ko-a1 h2 {}
div.index-ko div.inner div.character {
}
div.index-ko div.inner div.character h2 {
}
div.index-ko div.inner div.character div.wrap {
}
div.index-ko div.inner div.character div.wrap div.single {
}
div.index-ko div.inner div.character div.wrap div.single img {
}
div.index-ko div.inner div.character div.wrap div.single div.text {
}
div.index-ko div.inner div.character div.wrap div.single div.text h3 {
}
div.index-ko div.inner div.character div.wrap div.single div.text p {
}
div.index-ko div.inner div.ko-about {
}
div.index-ko div.inner div.ko-about h2 {
}
div.index-ko div.inner div.ko-about h2 p {
}
div.index-ko div.inner img.story-door2 {
}

div.kr-buy {margin-top: 20px; margin-bottom: 20px;}
div.kr-buy div.tip {display: inline-block;width: 40%;margin-right: 2%;vertical-align: top;}
div.kr-buy div.tip h3 {background-color: #484541;margin-bottom: 15px;}
div.kr-buy div.tip p {
}
div.kr-buy div.tip p a {
    text-decoration: underline;
}
div.kr-buy div.tip a.buy {border: 1px solid #484541;display: block;margin-bottom: 10px;}

a.rel-link {
border: 1px solid #484541;
    display: block;
    margin-bottom: 10px;
    display: inline-block;
    padding:5px 30px;
}

a.rel-link {
    margin-top: 30px;
    margin-bottom: 30px;
}