/* ! normalize.css v1.0.0 | MIT License | git.io/normalize */



/* ==========================================================================
Hero
========================================================================== */

.hero {
    position: relative;
    padding: 0 0 0 0;
    color: #FFF;
    width: 100%;
}
.hero .container {
	top: 10%;
	position: relative;
	width:auto;
	margin:0;
	padding:0;
}
.hero a.nav-toggle {
	font-family: 'Mallanna', sans-serif;
	letter-spacing: 0.1em;
	right: initial;
	left: 15px;
}
.hero .col-md-6 {
	float: right;
	text-align: right;
}
.hero .col-md-6.navicon {
	float: left;
	text-align: left;
	position: fixed;
	top: 30px;
	left: 15px;
	z-index: 500;
}
.hero .navicon p {
     margin: 27px 0 0 -0.25em;
}
video {
	position: fixed;
	top: 0;
	left: 0;
	min-width: 100vw;
	min-height: 100vh;
	width: auto;
	height: auto;
	z-index: -1;
}
.images{
	width:100%;
	margin: 0 auto 0;
	padding:0;
	position:relative;
}
.hero img {
	width: 100%;
	height: auto;
}
.hero .mov01{
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
	opacity: 0;
    width: 100%;
	transition-delay: 2.3s;
	transition-duration:1.8s;
}
.hero img.mov02{
	width: 100%;
	height: auto;
	position:absolute;
	top:0;
	left:-1%;
	opacity:0;
	transition-duration:0.6s;
	transition-delay:3.9s;
}
.hero img.mov03{
	width: 100%;
	height: auto;
	position:absolute;
	top:0;
	left:0;
	opacity:0;
	transition-duration:0.9s;
	transition-delay:4.4s;
}
.hero img.mov04{
	width: 100%;
	height: auto;
	position:absolute;
	top:0;
	left:0;
}
.covervid-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* ==========================================================================
grnv
========================================================================== */

.grnv{
    padding: 0;
    z-index: 2;
    width: 100%;
    position: absolute;
    bottom: 10%;
}
.sp_page .grnv{
    position: inherit;
	bottom: auto;
	background: #000;
}

.grnv i {
    margin-left: 8px;
}
.grnv ul {
	max-width: 750px;
    height: auto;
    overflow: hidden;
    margin: 0 auto;
    padding: 0;
    letter-spacing: -.40em;
	text-align: center;
}
.grnv ul li {
	width: 24.5%;
	height: auto;
	overflow: hidden;
	margin: 0 0 0 0.5%;
	list-style: none;
	float: none;
	display:inline-block;	
}
.grnv ul li:first-child{
	margin: 0 0 0 0;
}
.grnv ul li a {
	width: 100%;
	height: auto;
	display: block;
    padding: 18px 0;
    border: 2px solid #e7bb70;
    border-radius: 3px;
    color: #e7bb70;
    font-size: 14px;
	font-family: 'Mallanna', sans-serif;
	letter-spacing: 0.1em;
}

.grnv ul li a:hover,.grnv ul li a:focus {
    color: #616161;
	border-color:#616161;
    text-decoration: none;
}

/* ----------------------------------------------------------------
	about the movie
-----------------------------------------------------------------*/

body.about_the_movie{
	background: #fff;
}

.about{
	margin: 0;
	padding: 0;
}

.about .frame{
    margin: 0;
    padding: 0;
    top: 4%;
    left: 50%;
    -webkit-transform: translate(-50%,0);
    -moz-transform: translate(-50%,0);
    -ms-transform: translate(-50%,0);
    -o-transform: translate(-50%,0);
    transform: translate(-50%,0);
    width: 96%;
}

.about .about_txt{
	margin: auto;
	padding: 0;
	top: 22%;
	left: 50%;
	transform: translate(-50%,0);
	width: 41.4%;
}

.about h1{
	margin: 0 0 6%;
    padding: 0;
    width: 100%;
}

.about h2{
	margin: 0 auto;
	padding: 0;
	width: 58.7%;
}

.about .arrows {
	width: 60px;
	height: 72px;
	position: absolute;
	left: 50%;
	margin-left: -30px;
	bottom: 30px;
}

.about .arrows path {
	stroke: rgba(255,255,255,0.5);
	fill: transparent;
	stroke-width: 1px;	
	animation: arrow 2s infinite;
	-webkit-animation: arrow 2s infinite; 
}

@keyframes arrow
{
0% {opacity:0}
40% {opacity:1}
80% {opacity:0}
100% {opacity:0}
}

@-webkit-keyframes arrow /*Safari and Chrome*/
{
0% {opacity:0}
40% {opacity:1}
80% {opacity:0}
100% {opacity:0}
}

.about .arrows path.a1 {
	animation-delay:-1s;
	-webkit-animation-delay:-1s; /* Safari 和 Chrome */
}

.about .arrows path.a2 {
	animation-delay:-0.5s;
	-webkit-animation-delay:-0.5s; /* Safari 和 Chrome */
}

.about .arrows path.a3 {	
	animation-delay:0s;
	-webkit-animation-delay:0s; /* Safari 和 Chrome */
}

/* ----------------------------------------------------------------
	comment
-----------------------------------------------------------------*/

.comment{
	margin: 0;
	padding: 0;
	position: relative;
	background: #fff;
}

.comment .left{
	position: absolute;
	top: 0;
	left: 0;
	width: 50%;
	height: 100%;
	background: url(../img/comment_bg.jpg) no-repeat;
	background-size: cover;
	background-position: center;
	overflow: hidden;
}

.comment .white{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #fff;
	transition: all 600ms cubic-bezier(0.77, 0, 0.175, 1);
}

.comment .right{
	padding: 10% 6.5% 7.6%;
	margin: 0 0 0 50%;
}

.comment h2{
	margin: 0 0 18% 0;
	padding: 0;
}

.comment .comment_txt{
	padding: 0;
	margin: 0;
}

.comment .comment_txt .c_left{
	padding: 0;
	margin: 0;
	width: 49.5%;
	float: left;
}

.comment .comment_txt .c_right{
	padding: 0;
	margin: 0;
	width: 37.8%;
	float: right;
}

.comment .comment_txt .border{
	padding: 0;
	margin: 13% auto 0;
	width: 63%;
	height: 1px;
	background: #000;
}

.comment .comment_txt .c_logo{
	padding: 0;
	margin: 11% auto 0;
	width: 63%;
}

/* ----------------------------------------------------------------
	Chairman
-----------------------------------------------------------------*/

.chairman{
	margin: 0;
	padding: 8% 8% 20% 8%;
	position: relative;
	background: url(../img/chairman_bg.jpg) no-repeat;
	background-size: cover;
}

.chairman .conts > img{
    width: 64%;
    position: absolute;
    top: 20%;
    left: 6%;
}

.chairman .chairman_comment{
	margin: 0;
	padding: 2.5%;
	width: 32.8%;
	box-sizing: border-box;
	border: 1px solid #fff;
	color: #fff;
	float: right;
	position: relative;
	font-size: 12px;
}

.chairman .chairman_comment img{
    width: 50%;
}


/* ----------------------------------------------------------------
	intro & story
-----------------------------------------------------------------*/

.intro{
	margin: 0;
	padding: 2.5%;
	background: #fff;
}

.intro .i_white{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #fff;
	transition: all 600ms cubic-bezier(0.77, 0, 0.175, 1);
}

.intro .bg{
	margin: 0;
	padding: 0;
	position: relative;
	overflow: hidden;
}

.intro .bg img{
	margin: 0 auto;
	padding: 0;
}

.intro h2{
    margin: 0;
    padding: 0;
    width: 45%;
    position: absolute;
    bottom: 18%;
    left: 6%;
}

.intro .border{
    padding: 0;
    margin: 0;
    width: 145px;
    height: 1px;
    background: #c19d5c;
    transform: rotate(-45deg);
}

.intro .txt{
	padding: 0;
}

.intro .txt .clearfix{
	padding-top: 147px;
}

.intro .left{
	float: left;
	width: 43%;
	padding: 0 0 0 6%;
	box-sizing: border-box;
}

.intro h3{
	width: 98%;
	margin: 0 0 71px 0;
	padding: 0;
}
	
.intro .right{
	float: right;
	width: 50%;
	position: relative;
}	
	
.intro .right img.absolute{
	top: 0;
	left: 0;
}		
	

/* ----------------------------------------------------------------
	music
-----------------------------------------------------------------*/

.music{
	margin: 0;
	padding: 2.5%;
	position: relative;
	background: url(../img/music_bg.png) no-repeat;
	background-size: cover;
	background-position: center;
}
.music .conts{
	background: rgba(19,12,20,0.37);
}
.music .txt{
	color: #fff;
	margin: -5% auto -1.5%;
	text-align: center;
}
.music h2{
	width: 13%;
	margin: 0 auto 80px;
	padding: 0;
}
.music h3{
	margin: 0 0 40px 0;
	padding: 0;
	font-size: 25px;
}
.music .txt > img{
	width: 386px;
	margin: 0 auto;
}

/* ----------------------------------------------------------------
	gallery
-----------------------------------------------------------------*/

.gallery{
	margin: 0;
	padding: 8%;
	position: relative;
	background: #fff;
}

.gallery .absolute{
	overflow: hidden;
	opacity: 0;
}

.gallery .absolute img{
	transition: all 800ms cubic-bezier(0.23, 1, 0.32, 1);
}

.gallery .absolute:hover img{
	transform: scale(1.2);
}

.gallery .absolute:nth-of-type(1){
    top: 0;
    left: 0;
    width: 32.5%;
	transition-delay: 0.1s;
}
.gallery .absolute:nth-of-type(2){
    bottom: 0;
    left: 0;
    width: 32.5%;
	transition-delay: 0.2s;
}
.gallery .absolute:nth-of-type(3){
    top: 0;
    left: 33.6%;
    width: 32.6%;
	transition-delay: 0.3s;
}
.gallery .absolute:nth-of-type(4){
    top: 34%;
    left: 33.6%;
    width: 32.6%;
	transition-delay: 0.4s;
}
.gallery .absolute:nth-of-type(5){
    bottom: 0;
    left: 33.6%;
    width: 32.6%;
	transition-delay: 0.5s;
}
.gallery .absolute:nth-of-type(6){
    top: 0;
    right: 0;
    width: 32.5%;
	transition-delay: 0.6s;
}
.gallery .absolute:nth-of-type(7){
    bottom: 0;
    right: 0;
    width: 32.5%;
	transition-delay: 0.7s;
}


	
/* ----------------------------------------------------------------
	note
-----------------------------------------------------------------*/

.note{
	margin: 0;
	padding: 0;
	position: relative;
	z-index: 1;
	background: url(../img/note_bg02.jpg) no-repeat;
	background-size: cover;
	background-attachment: fixed;
	background-position: center;
	box-sizing: border-box;
	overflow: hidden;
}
.note .n_white{
	position: absolute;
	top: 0;
	left: 0;
	width: 50%;
	height: 100%;
	background: url(../img/note_bg.jpg) no-repeat;
	background-size: cover;
	background-attachment: fixed;
	background-position: center;
	transition: all 600ms cubic-bezier(0.77, 0, 0.175, 1);
}
.note .bg{
	margin:0;
	padding: 0;
	width: 50%;
	height: 103%;
	top: 0;
	right: 0;
	z-index: -1;
	background: url(../img/note_bg.jpg) no-repeat;
	background-size: cover;
	background-attachment: fixed;
	background-position: center;
}
.note .left{
	position: absolute;
	width: 50%;
	top: 50%;
    left: 0;
    transform: translate(0,-50%);
	padding: 0 6%;
}
.note .right{
	float: right;
	width: 50%;
	padding: 4% 6%;
}
.note h2{
	margin: auto;
	width: 100%;
}
.note ul li{
	width: 48%;
	margin: 0 0 10% 0;
	padding: 0;
	float: left;
}
.note ul li:nth-child(odd){
	margin-right: 4%;
}
.note li a{
	display: block;
	overflow: hidden;
	background: #000;
	position: relative;
}
.note li a img{
	transition: all 1000ms cubic-bezier(0.23, 1, 0.32, 1);
}
.note li a:hover img{
	opacity: 0.6;
	transform: scale(1.2);
}
.note li a span{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    font-size: 14px;
    text-align: center;
    width: 70%;
    height: 22px;
    transition: all 600ms cubic-bezier(0.77, 0, 0.175, 1);
    background: rgba(255,255,255,0.7);
    color: #000;
    padding: 10px 0;
    box-sizing: content-box;
    transform: translateX(-122%);
}
.note li a:hover span{
	transform:translateX(0);
}
.note li a:hover span:hover{	
    background: rgba(255,255,255,1);
}
.note li p{
	margin: auto;
	padding: 0;
	margin: 15px 0 0;
	font-size: 18px;
	line-height: 1.5em;
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}


/* ----------------------------------------------------------------
	note_dit
-----------------------------------------------------------------*/

.note_dit{
	padding: 0;
	margin: 0;
	background: #fff;	
}
.note_dit .modal-contents{
    display: block;
    margin: 0;
    padding: 0;
    color: #000;
	position: relative;
}
.note_dit .bg{
	position: absolute;
	height: 100%;
	width: 50%;
	left: 0;
	top: 0;
}
.note_dit .line{
    position: absolute;
    width: 8%;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
.note_dit .title{
    position: absolute;
    width: 203px;
    left: 2%;
    top: 50%;
    transform: translate(-100px,-50%) rotate(-90deg);
}
#content01 .bg{
	background: url(../img/note_dit01_bg.jpg) no-repeat;
	background-size: cover;
	background-position: center;	
}
#content02 .bg{
	background: url(../img/note_dit02_bg.jpg) no-repeat;
	background-size: cover;
	background-position: center;	
}
#content03 .bg{
	background: url(../img/note_dit03_bg.jpg) no-repeat;
	background-size: cover;
	background-position: center;	
}
#content04 .bg{
	background: url(../img/note_dit04_bg.jpg) no-repeat;
	background-size: cover;
	background-position: center;	
}
#content05 .bg{
	background: url(../img/note_dit05_bg.jpg) no-repeat;
	background-size: cover;
	background-position: center;	
}
#content06 .bg{
	background: url(../img/note_dit06_bg.jpg) no-repeat;
	background-size: cover;
	background-position: center;	
}
.note_dit .modal_txt{
	margin: 0 0 0 50%;
	padding: 10%;
	min-height: 100vh;
}
.note_dit h4{
	margin: 0;
	padding: 0;
	font-weight: 700;
	font-size: 25px;
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

.note_dit p{
	margin: 65px 0 0;
	padding:0;
	font-size:14px;
	line-height: 2em;
}

.close_a{
	position:fixed;
    top: 15px;
    left: 15px;
	z-index: 3;
}

.close_button{
	width: 52px;
    height: 49px;
	margin:0;
	padding:0;
	display:block;
	cursor: pointer;
}

.modal-contents .close_button{
	width:150px;
	height:auto;
	margin:3% auto;
	padding:0;
	display:block;
}

.modal-contents span.border{
	display: block;
	margin: 0 auto 5%;
	padding: 0;
	width: 1px;
	height: 140px;
	background: #fff;
}

/* ----------------------------------------------------------------
	cast
-----------------------------------------------------------------*/

.cast{
	margin: 0;
	padding: 6% 6%;
	background: #fff;;
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

.cast h2{
	margin: 0 auto;
	padding: 0;
	width: 26%;
}

.cast .lead_cast{
    opacity: 0;
}

/*cast*/

.cast .cast01{
	margin-top: 6%;
	position: relative;
	z-index: 1;
}
.cast ul{
	margin: 0 auto;
	padding: 0;
    clear: both;
}
.cast li{
	margin: 0 0 0 0;
	padding: 0;
	float: left;
	width: 33.333333%;
	border: 1px solid #c5a15e;
	border-top: none;
	overflow: hidden;
	text-align: center;
	box-sizing: border-box;
}
.cast li:nth-of-type(2),
.cast li:nth-of-type(3),
.cast li:nth-of-type(5),
.cast li:nth-of-type(6),
.cast li:nth-of-type(8),
.cast li:nth-of-type(9),
.cast li:nth-of-type(11),
.cast li:nth-of-type(12){
	border-left: none;
}
.cast li:nth-of-type(1),
.cast li:nth-of-type(2),
.cast li:nth-of-type(3){
	border-top: 1px solid #c5a15e;
}
.cast li a{
	padding: 15% 5%;
	display: block;
	text-align: center;
}
.cast li a > span{
	width: 45.4%;
	display: block;
	margin: 0 auto 10%;
	border-radius: 50%;
	padding: 10px;
	position: relative;
	box-sizing: border-box;
	z-index: 1;
}
.cast li a > span::after{
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
    transform: translate(-50%,-50%) scale(0.8);
	border-radius: 50%;
	border: 1px solid #c5a15e;
	z-index: -1;
	transition-duration: 0.2s;
}
.cast li a:hover span::after{
    transform: translate(-50%,-50%) scale(1);	
}
.cast li img{
	border-radius: 50%;
}
.cast li .txt{
	display: inline-block;
	text-align: left;
	color: #000;
}
.cast .txt h3{
	font-size: 18px;
	margin: 0;
	padding: 0;
	letter-spacing: -0.1em;
	font-weight: bold;
}
.cast .txt p{
	color: #c5a15e;
	font-size: 14px;
	margin: 0;
	padding: 0;
	font-weight: bold;
}
.cast .txt span{
	font-size: 12px;
	margin: 0;
	padding: 0;
	letter-spacing: -0.1em;
}


/* ----------------------------------------------------------------
	cast_dit
-----------------------------------------------------------------*/

.cast_dit{
	padding: 0;
	margin: 0;
	background: #fff;	
}
.cast_dit .modal-contents{
    display: block;
    margin: 0;
    padding: 0;
    color: #000;
	position: relative;
}
.cast_dit .bg{
	position: absolute;
	height: 100%;
	width: 50%;
	left: 0;
	top: 0;
}
.cast_dit .title{
    position: absolute;
    width: 45px;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%) rotate(-90deg);
}
.cast_dit .line{
    position: absolute;
    width: 85%;
	height: 85%;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
	border: 1px solid #c5a15e;
	pointer-events: none;
}
#content07 .bg{
	background: url(../img/cast_dit01_bg.jpg) no-repeat;
	background-size: cover;
	background-position: center;	
}
#content08 .bg{
	background: url(../img/cast_dit02_bg.jpg) no-repeat;
	background-size: cover;
	background-position: center;	
}
#content09 .bg{
	background: url(../img/cast_dit03_bg.jpg) no-repeat;
	background-size: cover;
	background-position: center;	
}
#content10 .bg{
	background: url(../img/cast_dit04_bg.jpg) no-repeat;
	background-size: cover;
	background-position: center;	
}
#content11 .bg{
	background: url(../img/cast_dit05_bg.jpg) no-repeat;
	background-size: cover;
	background-position: center;	
}
#content12 .bg{
	background: url(../img/cast_dit06_bg.jpg) no-repeat;
	background-size: cover;
	background-position: center;	
}
#content13 .bg{
	background: url(../img/cast_dit07_bg.jpg) no-repeat;
	background-size: cover;
	background-position: center;	
}
#content14 .bg{
	background: url(../img/cast_dit08_bg.jpg) no-repeat;
	background-size: cover;
	background-position: center;	
}
#content15 .bg{
	background: url(../img/cast_dit09_bg.jpg) no-repeat;
	background-size: cover;
	background-position: center;	
}
#content16 .bg{
	background: url(../img/cast_dit10_bg.jpg) no-repeat;
	background-size: cover;
	background-position: center;	
}
#content17 .bg{
	background: url(../img/cast_dit11_bg.jpg) no-repeat;
	background-size: cover;
	background-position: center;	
}
#content18 .bg{
	background: url(../img/cast_dit12_bg.jpg) no-repeat;
	background-size: cover;
	background-position: center;	
}
.cast_dit .modal_txt{
	margin: 0 0 0 50%;
	padding: 10% 17.5% 10% 10%;
	min-height: 100vh;
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
.cast_dit h3{
	font-size: 20px;
	margin: 0;
	padding: 0;
	letter-spacing: -0.1em;
	font-weight: bold;
}
.cast_dit p.name{
	color: #c5a15e;
	font-size: 20px;
	margin: 0;
	padding: 0;
	font-weight: bold;
}
.cast_dit span{
	font-size: 14px;
	margin: 0;
	padding: 0;
	letter-spacing: -0.1em;
}
.cast_dit p.profile{
	margin: 50px 0 0;
	padding:0;
	font-size:14px;
	line-height: 2em;
	letter-spacing: 0;
}


/* ----------------------------------------------------------------
	epilogue
-----------------------------------------------------------------*/

.epilogue{
    margin: 0;
    padding: 28% 0 3% 0;
    background: url(../img/end_bg.jpg) no-repeat;
    background-size: cover;
    background-position: center;	
}

.epilogue img{
	width: 35%;
	margin: 0 auto;
}