@charset "utf-8";

/* ==========================================================================
common
========================================================================== */

html, body {
	width:100%;
	min-width:960px;
	height:auto;
	min-height:100%;
	background:#fff;
	font-family:"Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
	font-weight: 400;
	color: #000000;
	letter-spacing: 0.05em;
	-webkit-font-smoothing: antialiased;
}

#loader {
	width: 100%;
	height: 100%;
	background: #fff;
	display: block;
}

li {list-style: none;}
img {max-width: 100%;}

.mincho{
	font-family: YakuHanMPs, "游明朝",YuMincho,"ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","HG明朝E","メイリオ",Meiryo,sans-serif;
    font-weight: 400;
}

.conts {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 7.5%;
}

.animated{
	opacity: 0;
	transition-delay: 0.5s
}


.clearfix:after {
  content: ".";  /* 新しいコンテンツ */
  display: block;
  clear: both;
  height: 0;
  visibility: hidden; /* 非表示に */
}

.clearfix {
  min-height: 1px;
}

* html .clearfix {
  height: 1px;
  /*¥*//*/
  height: auto;
  overflow: hidden;
  /**/
}



/* ==========================================================================
TOP
========================================================================== */

.content {
    position: relative;
    width: 100%;
    height: auto;
    margin: auto;
    z-index: 0;
    /*margin-top: 73px;*/
  /*background: url(../img/bg02.jpg?v=171211) no-repeat top center;
	background-size: 100% auto;*/
}
.content .mv_set {
    width: 100%;
    height: auto;
    margin: 0 auto;
    position: relative;
  	background: url(../img/bg.jpg?v=171211) no-repeat top center;
	background-size: 100% auto;
}
.content .mv_set h1 {
    margin: 0;
    padding: 0;
    width: 27.1%;
    position: absolute;
    top: 6.1%;
    left: 15%;
}
.content .mv_set h1 img {
	width: 100%;
	height: auto;
}
.content .mv_set h2 {
    margin: 0;
    padding: 0;
    width: 46.5%;
    position: absolute;
    top: 33.2%;
    left: 5.4%;
}
.content .mv_set h2 img {
	width: 100%;
	height: auto;
}
.content .mv_set .btn-tokuban {
    position: absolute;
    bottom: 5.7%;
    left: 1.8%;
    width: 9%;
    transition: all .2s linear;
    z-index: 2;
}
.content .mv_set .btn-tokuban a {
    margin: 10px auto 0;
	display: block;
    width: 100%;
    text-align: center;
    color: #fff;
	height: 100%;
	text-decoration: none;
	transition-duration: 0.2s;
	background: #fff;	
}
.content .mv_set .btn-tokuban a:nth-child(2) {
    margin-top: 10px
}
.content .mv_set .btn-tokuban a img {
	transition-duration: 0.2s;	
}
.content .mv_set .btn-tokuban a:hover img {
    opacity: 0.7
}
br.pc{
	display: inline-block;
}
.content .mv_set .btn-link {
    position: absolute;
    bottom: 27.3%;
    left: 11%;
    width: 35.6%;
    /*transition: all .2s linear;*/
    z-index: 1;
    text-align: center;
    letter-spacing: -0.4em;
    z-index: 1;
}
.content .mv_set .btn-link a {
    margin: 0 1.2% 0;
    display: inline-block;
    width: 30.333%;
    text-align: center;
    position: relative;
    text-decoration: none;
    letter-spacing: normal;
}
.content .mv_set .btn-link a .on {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	opacity: 0;
	transition-duration: 0.6s;
}
.content .mv_set .btn-link a:hover .on {
	opacity: 1;
}
#furutachi {
	background: #fff;
}
#furutachi #cboxClose{
	position: absolute;
}
.wdgpc { 
	background: #d7d7d7;
	width: 100%;
}
.wdgpc iframe { 
	background: #d7d7d7;
	margin: 0;
	padding: 0;
	border: none;
}

.__bn-bddvd {
	position: absolute;
	bottom: 15.0%;
	left: 17%;
	width: 23%;
	z-index: 2;
}
.__bn-bddvd img {
	transition: 0.2s all;
}
.__bn-bddvd:hover img {
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	filter: grayscale(100%);
}

/* ==========================================================================
nav
========================================================================== */

nav .btn_set {
    width: 100%;
    height: auto;
    overflow: hidden;
    padding: 104px 0 140px 0;
    letter-spacing: -.4em;
    list-style: none;
    margin: 0 auto;
    margin-bottom: 0;
    text-align: center;
    max-width: 1200px;
}
nav .btn_set li {
	display: inline-block;
	width: 30%;
	max-width: 200px;
	height: 2.5em;
	margin: 0 .5% 1%;
	box-sizing: border-box;
	background: #e60012;
	color: #fff;
	font-size: 14px;
	font-weight: 500;
	text-align: center;
	line-height: 2.5em;
	text-decoration: none;
	-webkit-transition: 0.5s;
	transition: 0.5s;
	letter-spacing: .1em;
	font-family: 'Roboto Slab', serif;
	border-radius: 5px;
}
/*nav .btn_set li:last-child {
	margin: 0;
}*/
/*nav .btn_set li:nth-child(n+4) {
	margin-bottom: 0;
}*/
nav .btn_set li:hover {
	background: #000;
}
nav .btn_set a {
	color: #fff;
	display: block;
	height: 100%;
	width: 100%;
	text-decoration: none;
}

/* ==========================================================================
visual
========================================================================== */

.visual_01{
	margin: 0;
	padding: 400px 0;
	background: url(../img/visual01_bg.jpg) no-repeat;
	background-size: cover;
	background-attachment: fixed;
	background-position: center;
	text-align: center;
}
.visual_01 img{
	width: 10%;
	margin: 0;
	padding: 0;
}
.visual_02{
	margin: 0;
	padding: 0;
	text-align: center;
}
.visual_02 .bg{
	margin: 0;
	padding: 100vh 0 0;
	background: url(../img/visual02_bg.jpg) no-repeat;
	background-size: cover;
	background-attachment: fixed;
	background-position: center;
}
.visual_02 .inner{
	margin: 0;
	padding: 200px 0;
	background: #fff;
}
.visual_02 img{
	width: 13%;
	margin: 0;
	padding: 0;
}
.visual_03{
	margin: 0;
	padding: 600px 0 0;
	background: url(../img/visual03_bg.jpg) no-repeat;
	background-size: cover;
	background-attachment: fixed;
	background-position: center;
	text-align: center;
}

.visual_04{
	margin: 0;
	padding: 100vh 0 0;
	background: url(../img/visual04_bg.jpg) no-repeat;
	background-size: cover;
	background-attachment: fixed;
	background-position: center;
	text-align: center;
}

.visual_05{
	margin: 0;
	padding: 600px 0 0;
	background: url(../img/visual05_bg.jpg) no-repeat;
	background-size: cover;
	background-attachment: fixed;
	background-position: center;
	text-align: center;
}


/* ==========================================================================
gallery
========================================================================== */

.gallery{
	margin: 0;
	padding: 5%;
}
.gallery ul{
	margin: 0;
	padding: 0;
}
.gallery ul:nth-of-type(2){
	margin: 3% 0 0 0;
}
.gallery li{
	float: left;
	width: 22.75%;
	margin: 0 0 0 3%;
	padding: 0;
}
.gallery li:nth-child(1){
	margin-left: 0;
}
.gallery.g01 li:nth-child(1) img{
	background: url(../img/gallery01_img01.jpg) no-repeat;
	background-size: cover;
}
.gallery.g02 ul:nth-of-type(1) li:nth-child(2) img{
	background: url(../img/gallery02_img03.jpg) no-repeat;
	background-size: cover;
}
.gallery.g02 ul:nth-of-type(2) li:nth-child(3) img{
	background: url(../img/gallery02_img08.jpg) no-repeat;
	background-size: cover;
}
.gallery.g02 ul:nth-of-type(2) li:nth-child(4) img{
	background: url(../img/gallery02_img09.jpg) no-repeat;
	background-size: cover;
}


/* ==========================================================================
intro
========================================================================== */

.intro{
	margin: 0;
	padding: 150px 0 120px;
}
.intro h2{
	width: 33%;
	margin: 0 auto 150px;
	padding: 0;
}
.intro dt{
	font-size: 20px;
	color: #e60012;
	line-height: 1.8em;
	margin-bottom: 70px;
}
.intro dd{
	line-height: 2.3em;
}
.intro .features-slider .sp-buttons {
    margin-top: 70px;
}


/* ==========================================================================
story
========================================================================== */

.story{
	margin: 0;
	position: relative;
	background: url(../img/story_bg01.jpg) no-repeat;
	background-size: cover;
	background-position: top center;
	z-index: 1;
}
.story .bg{
	opacity: 0;
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: -1;
	transition-duration: 0.5s;
}
.story .bg02{
	background: url(../img/story_bg02.jpg) no-repeat;
	background-size: cover;
	background-position: top center;
}
.story .bg03{
	background: url(../img/story_bg03.jpg) no-repeat;
	background-size: cover;
	background-position: top center;
}
.story .bg04{
	background: url(../img/story_bg04.jpg) no-repeat;
	background-size: cover;
	background-position: top center;
}
.story .conts{
	padding: 120px 7.5% 70px;
}
.story h2{
	width: 13.5%;
	margin: 0 auto 33%;
	padding: 0;
}
.story dd{
	line-height: 2.3em;
	color: #fff;
}
.story .features-slider .sp-buttons {
    margin-top: 70px;
}
.story .sp-buttons .sp-button {
    border: 1px solid #fff;
}

.story .sp-buttons .sp-button.sp-selected-button {
    background: #fff;
}
.story .sp-buttons div:before {
    color: #fff;
}
.story .sp-buttons div.sp-selected-button:before {
    color: #e60012;
}


/* ==========================================================================
cast
========================================================================== */

.cast{
	margin: 0;
	padding: 0;
	position: relative;
}
.cast .conts{
	padding-top: 230px;
}
.cast h2{
	width: 11%;
	margin: 0 auto 170px;
	padding: 0;
}
.cast ul{
	margin: 0 0 100px 0;
	padding: 0;
}
.cast ul:nth-of-type(3){
	margin-bottom: 0;
}
.cast li{
	margin: 0;
	padding: 0;
	width: 43.5%;
	float: left;
}
.cast li.right{
	float: right;
}
.cast li a{
	display: block;
	transition-duration: 0.6s;
}
.cast li a:hover{
	opacity: 0.7;
}
.cast li.ikuta a img{
	background: url(../img/cast_img01.jpg) no-repeat;
	background-size: cover;
}
.cast li .name{
	width: 80%;
	margin: 25px 0 0;
}


/* ==========================================================================
staff
========================================================================== */

.staff{
	margin: 0;
	padding: 0;
	position: relative;
}
.staff .conts{
	padding-top: 230px;
}
.staff h2{
	width: 13%;
	margin: 0 auto 170px;
	padding: 0;
}
.staff ul{
	margin: 0 0 100px 0;
	padding: 0;
}
.staff li{
	margin: 0;
	padding: 0;
	width: 43.5%;
	float: left;
}
.staff li.right{
	float: right;
	width: 50%;
}
.staff li .name{
	width: 80%;
	margin: 25px 0 0;
}
.staff li ul{
	margin: 0 0 70px 0;
	padding: 0;
}
.staff li a{
	display: block;
	transition-duration: 0.6s;
}
.staff li a:hover{
	opacity: 0.7;
}
.staff li ul li{
	width: 45%;
	float: left;	
}
.staff li ul li:nth-child(even){
	float: right;
}


/* ==========================================================================
cast staff modal
========================================================================== */

.cf_modal{
	display: none;
}
.cf_modal_conts{
	background: #fff;
	color: #000;
	padding: 5%;
}
.cf_modal_conts .image{
	float: left;
	width: 52.7%;
}
#cast01.cf_modal_conts .image img{
	background: url(../img/cast_img01.jpg) no-repeat;
	background-size: cover;
}
.cf_modal_conts .modal_txt{
	float: right;
	width: 42%;
}
.cf_modal_conts.staff02 .modal_txt,
.cf_modal_conts.staff03 .modal_txt{
	float: none;
	width: 100%;
}
.cf_modal_conts h3{
	width: 90%;
	margin: 0 0 35px;
}
.cf_modal_conts.staff02 h3{
    width: 42%;
	margin: 0 0 35px;
}
.cf_modal_conts.staff02 h3 img{
    width: 72%;
}
.cf_modal_conts a{
    font-family: 'Roboto Slab', serif;
	font-weight: 500;
	color: #e60012;
	text-decoration: none;
	font-size: 16px;	
	display: block;
	margin: 0 auto;
	width: 150px;
	text-align: center;
	margin-top: 50px;
}



/* ==========================================================================
note
========================================================================== */

.note{
	margin: 0;
	padding: 250px 0 0;
	position: relative;
}
.note h2{
	width: 42%;
	margin: 0 auto 170px;
	padding: 0;
}
.note .note_conts{
	margin-bottom: 150px;
}
.note .note_conts > img{
	margin-bottom: 50px;
}
.note .note_conts.note01 img{
	background: url(../img/note_img01.jpg) no-repeat;
	background-size: cover;
}
.note .note_conts.note04 img{
	background: url(../img/note_img04.jpg) no-repeat;
	background-size: cover;
}
.note .note_conts dt{
	margin-bottom: 1.8em;
	color: #e60012;
	font-weight: 700;
	font-size: 16px;
	position: relative;
}
.note .note_conts dd{
    line-height: 2.3em;
}

/* sp */
.note .sp .note_conts {
    margin-bottom: 0;
}
.note .sp .note_conts dt{
    border-bottom: 1px solid #e60012;
    padding: 0 30px 1em 0;
}
.note .sp .note_conts dt::after{
	content: "";
    width: 18px;
    height: 18px;
    top: 0;
    right: 0;
    background: url(../img/arrow.svg) no-repeat;
    background-size: 100% auto;
    background-position: center;
    position: absolute;
	transition-duration: 0.2s;
}
.note .sp .note_conts dt.active::after{
	transform: rotate(-180deg);
}
.note .sp .note_conts dd{
    display: none;
	margin-bottom: 95px;
}

/* ==========================================================================
release_date
========================================================================== */

.release_date {
	margin: 0 auto;
    padding-top: 70%;
    padding-bottom: 3%;
    background: url(../img/release_date_bg.jpg) no-repeat;
    background-size: cover;
    background-position: bottom center;
    text-align: center;
}

.release_date img {
    width: 45%;
}



/* ==========================================================================
slider-pro
========================================================================== */

.sp-buttons .sp-button {
    width: 25px;
    height: 25px;
    opacity: 1;
    background: none;
    border: 1px solid #e60012;
	border-radius: 3px;
    -webkit-transition: background 0.3s;
    transition: background 0.3s;
	position: relative;
}
.sp-buttons .sp-button.sp-selected-button {
    background: #e60012;
}
.sp-buttons div:before {
    width: 25px;
    margin-left: 0; 
    line-height: 22px;
    text-align: center; 
    position: absolute;
    font-size: 11px;
    color: #e60012;
    position: absolute;
    top: 0;
    left: 0;
}

.sp-buttons div:first-child:before {
	content: "1";
}
.sp-buttons div:nth-child(2):before {
	content: "2";
}
.sp-buttons div:nth-child(3):before {
	content: "3";
}
.sp-buttons div:nth-child(4):before {
	content: "4";
}
.sp-buttons div:nth-child(5):before {
	content: "5";
}
.sp-buttons div.sp-selected-button:before {
	color: #fff;
}


/* ==========================================================================
@media
========================================================================== */

@media print {
    img { display: none !important; }
	body * {
		background: none !important;
	}
}

@media screen and (max-width:1010px) {
	.wdgpc iframe{ height: 158px}
	/*.content {
		margin-top: 162px;
	}*/
}
@media screen and (max-width:768px) {
  html, body {
    min-width:100%;
    overflow-x:hidden;
  }	
	nav .btn_set{
		padding: 10% 5%
	}
	nav .btn_set li {
		width: 48%;
		margin: 0 1% 2%;
		float: left;
		display: block;
		max-width: inherit;
	}
	/*nav .btn_set li:nth-child(even) {
		float: right
	}*/
}

@media screen and (min-width:641px) {
	.sp{display: none;}
}

@media screen and (max-width:640px) {
	
.wdgpc { 
	background: #d7d7d7;
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
}
	
#furutachi #cboxClose {
    transform: scale(0.68);
    top: 0;
    right: 0;
}
	.pc{display: none;}
	
	.content {
		min-width:320px;
		max-width:100%;
		background: url(../img/bg-sp.jpg?v=171211) no-repeat top center;
		  background-size: 100% auto;
		    margin-top: 0;
	}
	.content .mv_set {
		width: 85%;
		margin: 0 auto 10%;
		padding-top: 131%;
		background: none;
	}
	.content .mv_set h1 {
		width: 100%;
		height: auto;
		padding: 0 0 10%;
		box-sizing: border-box;
		display: block;
		text-align: right;
		margin: 0 auto;
		text-align: center;
		position: static;
		top: auto;
		left: auto;
	}
	.content .mv_set h1 img {
		width: 70%;
		height: auto;
	}
	.content .mv_set h2 {
		width: 100%;
		margin: 0 auto;
		position: static;
		top: auto;
		left: auto;
	}
	/*.content .mv_set .btn-tokuban {
		position: relative;
		bottom: auto;
		left: auto;
		color: #e60012;
		background: none;
		border: solid 2px #e60012;
		border-radius: 5px;
		display: block;
		width: 90%;
		height: auto;
		min-height: auto;
		padding: 10px;
		margin: 0 5% 10% auto;
		text-align: center;
		font-size: 22px;
	}*/
	.content .mv_set .btn-tokuban {
		position: relative;
		bottom: auto;
		left: auto;
		display: block;
		width: 100%;
		height: auto;
		min-height: auto;
		margin: 0 auto 2.5%;
	}
	.content .mv_set .btn-tokuban a {
		color: #e60012;
	}
	.content .mv_set .btn-link {
		position: relative;
		bottom: auto;
		left: auto;
		display: block;
		width: 100%;
		margin: 0 auto 10%;
	}
	.content .mv_set .btn-link a {
		width: 100%;
		display: block;
		margin: 0 auto 2.5%;
		transition-duration: 0.2s;
	}
	.content .mv_set .btn-link a:hover {
		opacity: 0.7;
	}
	br.pc{
		display: none;
	}
	
	.__bn-bddvd {
		position: relative;
		bottom: inherit;
		left: 0;
		width: 100%;
		z-index: 2;
	}
	
	/* ==========================================================================
		visual
		========================================================================== */
	
	.visual_01 {
	    padding: 30px 0;
	    background-attachment: inherit;
	}
	.visual_01 img {
		width: 27%;
	}
	
	.visual_02 .bg {
		margin: 0;
		padding: 71% 0 0;
		background-attachment: inherit;
	}
	.visual_02 .inner {
		margin: 0;
		padding: 43px 0 61px;
		background: #fff;
	}
	.visual_02 img {
		width: 24.8%;
		margin: 0;
		padding: 0;
	}
	.visual_03 {
		padding: 87% 0 0;
		background-attachment: inherit;
	}
	.visual_04 {
		padding: 75% 0 0;
		background-attachment: inherit;
	}	
	.visual_05 {
		padding: 60% 0 0;
		background-attachment: inherit;
	}	
	
	
	/* ==========================================================================
		gallery
		========================================================================== */

	.gallery li {
		float: left;
		width: 46.65%;
		margin: 0 0 6.2% 6.2%;
		padding: 0;
	}
	
	.gallery li:nth-child(odd) {
		margin-left: 0;
	}
	.gallery li:nth-child(3),
	.gallery li:nth-child(4) {
		margin-bottom: 0;
	}
	
	/* ==========================================================================
		intro
		========================================================================== */
	
	.intro {
		padding: 65px 0 121px;
	}
	.intro h2 {
		width: 62%;
		margin: 0 auto 56px;
		padding: 0;
	}
	.intro dt {
		margin-bottom: 38px;
	}
	.intro dt br {
		display: none;
	}
	
	/* ==========================================================================
		story
		========================================================================== */
	

	.story{
		background: url(../img/story_bg01_sp.jpg?v=02) no-repeat;
		background-position: top center;
		background-size: cover;
	}
	.story .bg02{
		background: url(../img/story_bg02_sp.jpg) no-repeat;
		background-position: top center;
		background-size: cover;
	}
	.story .bg03{
		background: url(../img/story_bg03_sp.jpg) no-repeat;
		background-position: top center;
		background-size: cover;
	}
	.story .bg04{
		background: url(../img/story_bg04_sp.jpg) no-repeat;
		background-position: top center;
		background-size: cover;
	}
	.story .conts {
		padding: 47px 7.5% 10%;
	}
	.story h2 {
		width: 25%;
		margin: 0 auto ;
		padding: 0;
	}
	.story #storySlider {
	    margin-top: 97%;
	}
	.story dd {
		line-height: 1.8em;
		color: #fff;
	}
	
	/* ==========================================================================
		cast
		========================================================================== */
	
	.cast .conts {
		padding-top: 98px;
	}
	.cast h2 {
		width: 19.8%;
		margin: 0 auto 66px;
		padding: 0;
	}
	.cast ul {
		margin: 0 0 25px 0;
		padding: 0;
	}
	.cast li {
		width: 46.8%;
	}
	.cast li .name {
		width: 95%;
		margin: 12px 0 0;
	}
	
	/* ==========================================================================
		staff
		========================================================================== */
	
	.staff .conts {
		padding-top: 87px;
	}
	.staff h2 {
		width: 25%;
		margin: 0 auto 66px;
		padding: 0;
	}
	.staff li {
		margin: 0;
		padding: 0;
		width: 46.8%;
		float: left;
	}
	.staff li .name {
		width: 87%;
		margin: 12px 0 0;
	}
	.staff li.right {
		float: right;
		width: 41%;
	}
	.staff li ul li {
		width: 92%;
		float: left;
	}
	.staff li ul {
		margin: 0;
		padding: 0;
	}
	.staff li ul li {
		margin-bottom: 20px;
	}
	.staff li ul li:nth-child(even) {
		float: none;
	}
	
	
	/* ==========================================================================
		cast staff modal
		========================================================================== */
	
	.cf_modal_conts {
		min-height: 100vh;
		padding-bottom: 100px;
	}
	.cf_modal_conts .image{
		float: none;
		width: 100%;
	}
	.cf_modal_conts .modal_txt{
		float: none;
		width: 100%;
		margin-top: 50px;
	}
	.cf_modal_conts h3{
		width: 90%;
		margin: 0 0 35px;
	}
	.cf_modal_conts.staff02 h3{
		width: 100%;
		margin: 0 0 35px;
	}
	.cf_modal_conts.staff02 h3 img{
		width: 72%;
	}
	
	
	/* ==========================================================================
		note
		========================================================================== */

	.note {
		margin: 0;
		padding: 104px 0 90px;
		position: relative;
	}
	.note h2 {
		width: 79%;
		margin: 0 auto 77px;
		padding: 0;
	}	
	
	
	/* ==========================================================================
		release_date
		========================================================================== */
	
	.release_date {
		margin: 0 auto;
		padding-top: 136%;
		padding-bottom: 7%;
		background: url(../img/release_date_bg_sp.jpg) #fff no-repeat;
		background-size: cover;
		background-position: bottom center;
		text-align: center;
	}

	.release_date img {
		width: 100%;
	}	

	
}

/*@media screen and (max-width:600px) {
	nav .btn_set {
		width: 90%;
		padding: 0;
		margin: 0 5% 10% auto;
	}
	nav .btn_set li {
		width: 100%;
		height: 35px;
		font-size: 12px;
		line-height: 35px;
		margin: 0 auto 3%;
	}
	nav .btn_set li:nth-child(2n) {
		margin: 0 auto 3%;
	}
}*/

body > iframe {
  position:absolute;
  top:0;
  right:0;
}

#cboxOverlay {
  overflow:hidden !important;  
  position:fixed !important;
}