@charset "utf-8";
/*==========================================
 General
===========================================*/

#loading{
	width:100vw;
	height:100vh;
	background: #000;
	z-index:9999;
	display:block;
	position:fixed;
	top:0;
	left:0;
	transition: all 1s ease-out;
}

#loading span{
	position:absolute;
	left:50%;
	top:50%;
	margin-left:-25px;
	margin-top:-25px;
	 width: 50px;
  height: 50px;
  border: 1px solid #fff;
  border-right: 1px solid transparent;
  border-radius: 30px;
  animation: loading 1s linear infinite;
 
}

#content{
	display:block;
}


@keyframes loading {
  to {
  }

  from {
    transform: rotate(360deg);
    transform-origin: 50% 50%;
  }

}

html {
	font-size: 62.5%;
	-webkit-overflow-scrolling: touch;
	height: 100%
}
body {
	font-family: 'Noto Sans JP', sans-serif;
	margin: 0;
	padding: 0;
	width: 100%;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
	-webkit-overflow-scrolling: touch;
	min-width: 980px;
	font-size: 1.6rem;
	color: #fff;
	
}

@media only screen and (max-width: 768px) {
	
	

body {
	min-width: auto;
}
}
a {
	color: #fff;
	text-decoration: none;
}
a:link {
	color: #fff;
}
a:visited {
	color: #fff;
}
a:hover {
	color:#fff;
	text-decoration: underline;
}
a:active {
	color: #fff;
}
a.btn {
	padding: 10px 30px;
	font-size: 1.8rem;
	font-weight: normal;
	background-color: #ffd907;
	color: #fff;
	text-align: center;
	cursor: pointer;
	width: 100%;
	max-width: 300px;
	display: block;
	margin: 0 auto;
	border-radius: 10px 10px 10px 10px;
	-moz-border-radius: 10px 10px 10px 10px;
	-webkit-border-radius: 10px 10px 10px 10px;
	transition: all 0.2s linear;
	box-sizing: border-box;
}
a.btn:hover {
	text-decoration: none;
	opacity: 0.8;
}
a.outer-link {
	background: url(images/listmark.png) no-repeat;
	background-size: 16px 16px;
	padding-left: 20px;
	padding-top: 1px;
	line-height: 140%;
}
p.small {
	font-size: 1.5rem;
	text-align: left;
	color: #444;
	line-height: 2;
	margin-bottom: 30px;
}
p.large {
	font-size: 1.8rem!important;
}
.x-small {
	font-size: 1.3rem;
	line-height: 1.3;
}
p.last-sentence {
	margin-bottom: 70px!important;
}
p.center {
	text-align: center;
}
p.underline {
	text-decoration: underline;
}
.align-left {
	text-align: left!important;
}
.align-right {
	text-align: right!important;
}
.mgn0 {
	margin-bottom: 0!important;
}
.mgn20 {
	margin-bottom: 20px!important;
}
.mgn30 {
	margin-bottom: 30px!important;
}
.mgn40 {
	margin-bottom: 40px!important;
}
.mgn50 {
	margin-bottom: 50px!important;
}
.mgn60 {
	margin-bottom: 60px!important;
}
.mgn70 {
	margin-bottom: 70px!important;
}
.mgn80 {
	margin-bottom: 80px!important;
}
.mgn90 {
	margin-bottom: 90px!important;
}
.mgn100 {
	margin-bottom: 100px!important;
}
.mgn120 {
	margin-bottom: 120px!important;
}
.center {
	text-align: center;
}


@media only screen and (max-width: 768px) {
br.sp-none{
	display:none;
}
}


/*==========================================
text
===========================================*/

h1 {
	width: 100%;
	padding:60px 0;
	display: inline-block;
	text-align: center;
	background: #fff;
	
}


h2 {
	font-size: 2.5rem;
	letter-spacing: 0.2em;
	font-weight: normal;
	color: #fff;
	text-align: left!important;
	margin-bottom: 70px;
	line-height: 150%;
}

@media only screen and (max-width: 768px) {
h1 {
	font-size: 1.6rem;
	padding: 30px 0;
}

h2 {
	font-size: 2.2rem;
	text-align: center;
	position: relative;
	text-align: center!important;
}

}
@media only screen and (max-width: 768px) {
h1.h1-cast img{
	width:75px;
	height:auto;
}
h1.h1-staff img{
	width:84px;
	height:auto;
}
h1.h1-comment img{
	width:179px;
	height:auto;
}

}
/*==========================================
 header
===========================================*/
header {
	width: 100%;
	top: 0;
	left: 0;
	z-index: 700;
	position: relative;
	opacity: 0;
}
#head-inner {
	margin: 0 auto;
}

@media only screen and (max-width: 768px) {
#header {
	padding-top: 0;
	padding-bottom: 0px;
	position: fixed;
}
#head-inner {
	min-width: auto;
}
header.fixed {
	display: none;
}
}
/*==========================================
 ナビゲーション
===========================================*/

.menu {
	position: fixed;
	left: 30px;
	top: 30px;
	padding: 10px;
	width: 40px;
	height: 40px;
	cursor: pointer;
	z-index: 999;
	opacity: 0;
	border:1px solid #ddd;
}
.menu .bar {
	display: inline-block;
	width: 40px;
	height: 2px;
	background-color: #ddd;
	position: absolute;
	transition: .15s ease-in-out;
}
.menu .black {
	background-color: #000;
	position: absolute;
}
#bar01 {
	top: 10px;
	background: #ddd;
}
#bar02 {
	top: 20px;
	background: #ddd;
}
#bar03 {
	top: 30px;
	background: #ddd;
}
.menuOpen #bar01 {
	transform: translateY(10px) rotate(-25deg);
}
.menuOpen #bar02 {
	opacity: 0;
}
.menuOpen #bar03 {
	transform: translateY(-10px) rotate(25deg);
}
span.menu-text {
	position: absolute;
	top: 40px;
	color: #ccc;
	font-family: Comfortaa;
	letter-spacing: 0.05em;
	font-size: 12px;
}
nav#slideTop {
	z-index: 700;
	cursor: pointer;
	position: fixed;
	top: 0;
	width: 100%;
	height: auto;
	background: #c8a063;
	transition: .8s ease-out;
}
nav.off {
	
	opacity: 0;
	margin-top: -122px;
}
nav.on {
	display: block;
	
	margin-top: 0;
}
#slideTop .slide-inner {
	overflow: auto;
	overflow-x: hidden;
	padding:50px 0 38px;
}
#slideTop .slide-inner ul {
	float: left;
	margin-left: 175px;
	
}
#slideTop .slide-inner ul li {
	display: inline-block;
	transition: transform .8s 1.5s, opacity .8s 1.5s;
	color: #fff;
	font-family: 'Comfortaa', cursive;
	letter-spacing: 0.1em;
	width:120px;
	margin: 0 10px 10px 0;
	padding-bottom: 7px;
	text-align: center;
	border-bottom: 1px solid #fff;
}
#slideTop .slide-inner ul li a {
	font-size: 1.2rem;
	font-family: 'Lato', sans-serif;
	font-weight: 400;
	color: #fff;
	text-decoration: none;
	margin-left: 0;
	transition: 0.5s;
}
#slideTop .slide-inner ul li a {
}
#slideTop .slide-inner ul li a:hover {
	opacity: 0.4
}

@media only screen and (max-width: 768px) {
.menu {
	
	left: 15px;
	top:15px;
	
}
nav.off {
	
	opacity: 0;
	margin-top: -600px;
}
nav#slideTop{
	background: rgb(200,160,99);
background: linear-gradient(180deg, rgba(200,160,99,0.95) 0%, rgba(200,160,99,0.95) 20%, rgba(200,160,99,0.9) 100%);
height:100vh;
}
#slideTop .slide-inner {
	overflow: auto;
	overflow-x: hidden;
	padding-top: 20px;
	padding-left: 40px;
	padding-right: 40px;
	height:100wh;
}
#slideTop .slide-inner ul {
	float: none;
	margin:80px 0 40px 0;
}
#slideTop .slide-inner ul li {
	display:inline-block;
	letter-spacing: 0.1em;
	font-size: 2.4rem;
	width:45%;
	margin: 0 2% 20px 2%;
	padding-bottom: 7px;
	text-align: center;
	border-bottom: 1px solid #fff;
}

}

@media only screen and (max-width: 480px) {
	
	
	#slideTop .slide-inner {
	padding-left: 100px;
	padding-right: 100px;
}
	#slideTop .slide-inner ul {
	float: none;
	margin:80px auto 40px;
	text-align:center;
}
	#slideTop .slide-inner ul li {
	display:block;
	letter-spacing: 0.1em;
	
	width:140px;
	margin: 0 auto 30px;
	
	padding-bottom: 7px;
	text-align: center;
	border-bottom: 1px solid #fff;
}
#slideTop .slide-inner ul li a {
	font-size: 1.4rem;
	
}
#slideTop .slide-inner ul li:nth-child(even) {
	
}
}

/*  top main image
================================================== */

#topVisual{
	width:100%;
	margin-bottom:100vh;
	position:relative;
}

#topVisual #top-img1{
	width:42.97vw;
	float:left;
}
#topVisual #top-img2{
	width:calc(100vw - 42.97vw) ;
	float:left;
}
#topVisual #top-img1 img,#topVisual #top-img2 img{
	width:100%;
	height:auto;
	vertical-align:bottom;
}

#socialArea{
	position:absolute;
	bottom:40px;
	left:46vw;
}
#socialArea ul{
margin-bottom:32px;
}
#socialArea ul li{
	display:inline-block;
	margin-right:30px;
	width:46px;
}
#socialArea img{
	width:100%;
	height:auto;
}
#socialArea #data{
	width:425px;
}

#socialLink{
	display:none;
}

@media only screen and (max-width: 768px) {
	
	#topVisual #top-img1{
	width:100%;
	float:none;
}
#topVisual #top-img2{
	display:none;
}
	#socialArea{
	position:relative;
	background:#fff;
	top:0;
	left:0;
	text-align:center;
	display:inline-block;
	width:100%;
	padding:40px 0;
}
	#socialArea ul{
margin-bottom:32px;

text-align:center;
}
#socialArea ul li{
	display:inline-block;
	margin-right:30px;
	width:46px;
}
#socialArea ul li:last-child{
	margin-right:0;
}
#socialArea #data{
		max-width:425px;
	width:80%;
	margin:0 auto;
}
#socialLink{
	width: 90%;
    text-align: center;
    clear: left;
    margin: 20px auto;
    padding: 0;
	display:block;
}
#socialLink div{
	display:inline-block;
	margin-bottom:20px;
}
}
@media only screen and (max-width: 480px) {
	#socialLink{
	
    margin: 20px auto;
   
}
}


/*==========================================
 Contents
===========================================*/

.sublime_slideshow{
	
}


/*Layout
================================================== */
#contentsArea {
	width: 100%;
	padding-top: 0;
}
#contentsArea section{
	text-align:center;
	
}

#contentsArea .wfull {
	width: 100%;
}
#contentsArea .w1080 {
	width: 1080px;
	max-width: 1040px;
	padding: 0 20px 60px;
	margin: 0 auto;
}
#contentsArea .w980 {
	max-width: 1020px;
	padding: 0 20px;
	margin: 0 auto;
	padding-bottom: 30px;
}
#contentsArea .w920 {
	max-width: 960px;
	padding: 0 20px;
	margin: 0 auto;
	padding-bottom: 30px;
}
#contentsArea .w800 {
	max-width: 840px;
	padding: 0 20px;
	margin: 0 auto;
	padding-bottom: 60px;
}
#contentsArea section p {
	width: 100%;
	line-height: 180%;
	text-align: left;
	color: #fff;
	font-size: 1.5rem;
	font-weight: 500;
	margin-bottom: 30px;
}
#contentsArea section p.catch {
	font-size: 2.4rem;
	text-align: center;
	display: inline-block;
	color: #dfca64!important;
	font-weight: 500;
}
#contentsArea section img.full {
	width: 100%;
	height: auto;
	vertical-align: bottom;
}

@media only screen and (max-width: 768px) {
#contentsArea .w1080 {
	max-width: auto;
}
#contentsArea .w980 {
	max-width: auto;
}
#contentsArea .w920 {
	max-width: auto;
}
#contentsArea .w800 {
	max-width: auto;
}

#contentsArea section p {
	font-size: 1.4rem;
}


}

@media screen and (max-width: 480px) {

#contentsArea .w1080 {
	padding: 0 15px;
}
#contentsArea .w980 {
	padding: 0 15px;
}
#contentsArea .w920 {
	padding: 0 20px;
}
#contentsArea .w800 {
	padding: 0 15px;
}

}

#contentsArea section#about{
	background-color: rgba(255, 255, 255, 1);
}
#contentsArea section#about2{
	background-color: rgba(255, 255, 255, .5);
}
#contentsArea section#about3{
	background-color: rgba(255, 255, 255, .5);
}
#contentsArea section .center-copy{
	display:inline-block;
	margin:0 auto 75px;
	
}
#contentsArea section .center-copy-sp{
	display:inline-block;
	margin:0 auto 40px;
	display:none;
}

#contentsArea section .textbox{
	opacity:0;
	transition: all 1.4s 0.5s ease-out;
	transform: translateY(30px);
	position:relative;
	padding:10% 15px ;
}
#contentsArea section .textbox.active{
	opacity:1;
	transform: translateY(0px);
}

.bgWrapper {
	width: 100vw;
	
	background-position: center top;
	background-repeat: no-repeat;
	background-size: cover;
	text-align: center;
	padding:0;
	transition: all 1s 0.1s ease-out;
	opacity: .2;
	margin-bottom:80vh;
}
.bgWrapper.active {
opacity: 1;
	
}

	
.bg-about {
	
	background-image: url(../images/bg_about.jpg);
	background-position: left top;
}
.bg-about2 {
	background-image: url(../images/bg_about2.jpg);
	background-position: left top;
}
.bg-about3 {
	background-image: url(../images/bg_about3.jpg);
	background-position: left top;
}

div.sp-overlay{
	dsiplay:none;
}




@media only screen and (max-width: 768px) {
	
#contentsArea section .center-copy{
	width:90%;
	
}
#contentsArea section .center-copy img{
	width:100%;
	
	height:auto;
}


#contentsArea section#about .textbox.active{
	opacity:1;
	transform: translateY(0px);
	background: linear-gradient(to top, rgba(0,0,0,.3) 0%, rgba(0,0,0,.5)50%, rgba(0,0,0,0) 100%);
}
#contentsArea section#about2 .textbox.active{
	opacity:1;
	transform: translateY(0px);
	background: linear-gradient(to top, rgba(0,0,0,.3) 0%, rgba(0,0,0,.5)70%, rgba(0,0,0,0) 100%);
}
#contentsArea section#about3 .textbox.active{
	opacity:1;
	transform: translateY(0px);
	background: linear-gradient(to top, rgba(0,0,0,.3) 0%, rgba(0,0,0,.5)70%, rgba(0,0,0,0) 100%);
}

.bg-about {
	
	background-image: url(../images/bg_about.jpg);
	background-position: right center;
}
	
}
@media only screen and (max-width: 480px) {
	
#contentsArea section .center-copy{
	display:none;
	
}
#contentsArea section .center-copy-sp{
	width:90%;
	display:inline-block;
	margin-bottom:40px;
}
#contentsArea section .center-copy-sp img{
	width:100%;
	height:auto;
	
}
}


#contentsArea section#cast{
	background:#FFFFFF;
	margin-bottom:100vh;
}
#contentsArea section#cast p{
	color:#a0a0a0;
	font-weight:500;
}
#contentsArea #cast h3{
	text-align:left;
	margin-bottom:60px;
}
.bg-cast1 {
	height:60vh;
	background-image: url(../images/cast1.jpg);
	margin-bottom:0;
}
.bg-cast2 {
	height:60vh;
	background-image: url(../images/cast2.jpg);
	margin-bottom:0;
}
.bg-cast3 {
	height:60vh;
	background-image: url(../images/cast3.jpg);
	margin-bottom:0;
}
#contentsArea section#cast .textbox{
	
	padding:60px 15px;
}
#contentsArea section#cast .textbox .profile{
	width:64%;
	float:left;
	box-sizing:border-box;
	padding-right:80px;
	line-height:2.2;
}
#contentsArea section#cast .textbox .profile p{
	line-height:1.9;
}
#contentsArea section#cast .textbox .filmo{
	width:36%;
	float:left;
	box-sizing:border-box;
}

#contentsArea section#cast .textbox{
	opacity:0;
	transition: all 0.5s 0s ease-out;
	transform: translateY(30px);
}
#contentsArea section#cast .textbox.active{
	opacity:1;
	transform: translateY(0px);
}
#contentsArea section#cast ul{
	width:100%;
	box-sizing:border-box;
	padding:0 2px;
	margin-bottom:100px;
}
#contentsArea section#cast ul li{
	width:25%;
	float:left;
	box-sizing:border-box;
	padding:0 2px 0;
}
#contentsArea section#cast ul li img{
	width:100%;
	height:auto;
}

@media only screen and (max-width: 768px) {
	
#contentsArea #cast h3{
	margin-bottom:30px;
}

	.bg-cast1 {
	height:50vh;
	background-position:right top;
	margin-bottom:-20px;
}
.bg-cast2 {
	height:50vh;
	background-position:left top;
	margin-bottom:-20px;
}
.bg-cast3 {
	height:50vh;
	background-position:right top;
	margin-bottom:-20px;
}
#contentsArea section#cast .textbox .profile{
	width:100%;
	float:none;
	
	padding-right:0;
	
}

#contentsArea section#cast .textbox .filmo{
	width:100%;
	float:none;
	
}
#contentsArea section#cast ul{
	margin-bottom:0;
}
#contentsArea section#cast ul li{
	width:50%;
	padding:2px 2px 0;
}
}
@media only screen and (max-width: 480px) {
	
#contentsArea #cast h3 img{
	width:100%;
	height:auto;
}

#contentsArea #cast h3#cast1{
	width:315px;
	height:auto;
}
#contentsArea #cast h3#cast2{
	width:360px;
	height:auto;
}
#contentsArea #cast h3#cast3{
	width:252px;
	height:auto;
}
#contentsArea #cast h3#staff1{
	width:233px;
	height:auto;
}
#contentsArea #cast h3#staff2{
	width:351px;
	height:auto;
}

	
#contentsArea section#cast ul li{
	width:100%;
	float:none;
}
}


#contentsArea section#comment{
	background:#000;
	margin-bottom:0;
}

.bg-comment {
	
	background-image: url(../images/bg_comment.jpg);
	background-position: center top;
	position:relative;
}
.grad-rayer {
	position:absolute;
	top:0;
	left:0;
	display: block;
	width:100%;
	height:100%;
	background: linear-gradient(to top, rgba(100,100,100,0.2) 0%,rgba(100,100,100,0.15) 0.5%, rgba(80,80,80,0)3%, rgba(0,0,0,0) 100%);
}




#contentsArea section .half-box li{
	width:46%;
	float:left;
	box-sizing:border-box;
	margin-right:4%;
	line-height: 1.8;
	text-align: left;
	color: #fff;
	font-size: 1.5rem;
	font-weight: 500;
	margin-bottom: 30px;
	border-bottom: 1px solid;
	border-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(255,255,255,0.5)50%, rgba(0,0,0,0) 100%);
  border-image-slice: 1;
}

#contentsArea section .half-box li div{
	text-align:right;
	margin:30px 0 30px
}
#contentsArea section .half-box li div span{
	color:#cba66d;
	font-size: 1.8rem;
}
br.pc-none{
		display:none;
	}


@media only screen and (max-width: 768px) {
	.bg-comment {
	
	background-image: url(../images/bg_comment.jpg);
	background-position: center top;
	background-size: 200%;
}

	#contentsArea section .half-box li{
		width:80%;
	float:none;
	margin-right:0%;
	margin:0 auto 30px;
	}
	#contentsArea section .half-box li{
		font-size:1.4rem;
	}
	br.sp-none{
		display:none;
	}
	br.pc-none{
		display:block;
	}
	
}





/*==========================================
 You tube (訪問時再生）
===========================================*/

.mfp-content .youtube {
	width: 100%;
	padding: 50px 10px;
	box-sizing: border-box;
	max-width: 980px;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.mfp-content .iframeWrapper {
	width: 100%;
	padding-bottom: 56.25%;
	position: relative;
}
.mfp-content iframe {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	margin: auto;
	border-style: none;
	z-index:9980;
}
.mfp-content .youtube .mfp-close {
	color: #fff!important;
}
/* Go Page Top
================================================== */





/*footer
================================================== */

footer {
	width: 100%;
	box-sizing: border-box;
	margin: 0 auto;
	text-align: center;
}
footer #foot-logo {
	background: #000;
	padding: 30px 0;
	margin: 0 auto;
	text-align: center;
}
footer #foot-logo div {
	display: inline-block;
	width: 400px;
}
footer #foot-logo div img {
	width: 100%;
	height: auto;
}
footer #foot-date {
	background: #fff;
	padding: 22px 0;
	margin: 0 auto;
	text-align: center;
}
footer #foot-date div {
	display: inline-block;
}
footer #foot-date div img {
	width: 100%;
	height: auto;
}

@media only screen and (max-width: 480px) {
footer #foot-logo div {
	width: 80%;
}
footer #foot-date div {
	width: 80%;
}
}
/* ------------------------------------------------------------
	Clearfix
------------------------------------------------------------ */

.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	font-size: 0;
	clear: both;
	visibility: hidden;
}
.clearfix {
	display: inline-block;
}
/* Hides from IE Mac */
* html .clearfix {
	height: 1%;
}
.clearfix {
	display: block;
}
/* End Hack */