@charset "utf-8";

/*--------------------------------------------------------------------------------------------------------------
  初期設定
--------------------------------------------------------------------------------------------------------------*/

body {
		-webkit-text-size-adjust: 100%;
	line-height: 1.6;
	letter-spacing: 1px;
	background: #000;
}

div {
	margin: 0 auto;
}

div,h1,h2,h3,h4,h5,p,li,dl,dt,dd,th,td,article,header,footer,nav,span,a {
		-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

a {
	color: inherit;
	text-decoration: none;
}

img {
	height: auto;
	width: auto;
	max-width: 100%;
	line-height: 100%;
	vertical-align: bottom;
}

em {
	font-style: normal;
}

h2,h3,h4,h5 {
	line-height: 1.6;
	margin: 0;
}

p,li,td,th,dt,dd {
	font-size: 18px;
	line-height: 1.6;
	margin: 0;
	word-wrap: break-word;
}

ul,
ol,
dl {
	padding: 0;
	margin: 0;
}

.cf:after {
	content: "";
	display: block;
	clear: both;
}


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

	.pc {
		display: none !important;
	}
	
	p,li,td,th,dt,dd {
		font-size: 12px;
	}

}


/*------------------------------------------
  フォント
------------------------------------------*/

body {
	font-family: "Noto Sans Japanese", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
}

.nav .item,
.copyright,
.aboutPageNav li {
	font-family: 'Anton', sans-serif;
}


/*------------------------------------------
  スクロールされたらフェードイン
------------------------------------------*/

.fade-in {
	opacity : 0.1;
	transform : translate(0, 80px);
	transition : all 500ms;
}

.fade-in.scrollin {
	opacity : 1;
	transform : translate(0, 0);
}

@media screen and (max-width: 768px) {
	.fade-in {
		transform : translate(0, 50px);
	}
}


/*------------------------------------------
  枠内にfitするimg
------------------------------------------*/

.imgFitBox img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	font-family: 'object-fit: cover; object-position: center;';
}


/*--------------------------------------------------------------------------------------------------------------
  footer
--------------------------------------------------------------------------------------------------------------*/

.footer {
	padding-bottom: 35px;
}


/*
	copyright
---------------------------*/

.copyright {
	color: #fff;
	font-size: 12px;
	text-align: center;
}


/*--------------------------------------------------------------------------------------------------------------
  main
--------------------------------------------------------------------------------------------------------------*/

.main {
	margin-bottom: 35px;
}


/*============================================================================================================
  index.html
============================================================================================================*/

/*------------------------------------------
  nav
------------------------------------------*/

.nav {
	position: fixed;
	padding: 35px 0 0 40px;
	z-index: 1000;
}

.nav a {
	cursor: pointer;
	display: block;
}

.nav .item {
	color: #666;
	font-size: 20px;
	letter-spacing: 2px;
	margin-bottom: 28px;
	position: relative;
}

.nav .item a {
	color: #fff;
}

.nav .snsLink {
	position: relative;
}

.nav .snsLink .item {
	display: inline-block;
	font-size: 24px;
}

.nav .snsLink .item + .item {
	margin-left: 11px;
}

.nav .snsLink .fb {
	font-size: 21px;
	vertical-align: 1px;
}


@media screen and (min-width: 769px) {
	
	.nav {
		display: block !important;
		opacity: 1 !important;
	}

}

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

	.nav {
		display: none;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 50px 20px;
		overflow-y: scroll;
		background-color: rgba(0,0,0,.8);
		width: 100%;
	}
	
	.nav .item,
	.nav .snsLink {
		left: 0 !important;
	}

	.nav .item {
		font-size: 30px;
		margin-bottom: 22px;
	}
	
	.nav .snsLink .item {
		font-size: 24px;
	}
	
	.nav .snsLink .item + .item {
		margin-left: 20px;
	}

	
	/*
		メニューを開くボタン
	---------------------------*/
	
	.nav_btn {
			-moz-transition: .5s;
			-webkit-transition: .5s;
			-o-transition: .5s;
			-ms-transition: .5s;
		transition: .5s;
		cursor: pointer;
		width: 40px;
		height: 40px;
		top: 0;
		right: 0;
		position: fixed;
		text-align: center;
		background: #a51211;
		z-index: 1001;
	}
	
	.nav_btn,
	.nav_btn span {
		display: inline-block;
		transition: all .4s;
		box-sizing: border-box;
	}
	
	.nav_btn span {
		position: absolute;
		left: 0;
		right: 0;
		margin: auto;
		width: 21px;
		height: 3px;
		background-color: #fff;
	}
	
	.nav_btn.close {
		background: none;
	}

	.nav_btn span:nth-of-type(1) {
		top: 30%;
	}
	
	.nav_btn span:nth-of-type(2) {
		top: 0;
		bottom: 0;
		margin: auto;
	}
	
	.nav_btn span:nth-of-type(3) {
		bottom: 30%;
	}
	
	.nav_btn.close span:nth-of-type(1) {
			-webkit-transform: translateY(7px) rotate(-45deg);
		transform: translateY(7px) rotate(-45deg);
	}
	
	.nav_btn.close span:nth-of-type(2) {
		left: 50%;
		opacity: 0;
			-webkit-animation: active-menu-bar02 .8s forwards;
		animation: active-menu-bar02 .8s forwards;
	}
	
	.nav_btn.close span:nth-of-type(3) {
			-webkit-transform: translateY(-6px) rotate(45deg);
		transform: translateY(-6px) rotate(45deg);
	}
	
		@-webkit-keyframes active-menu-bar02  {
			100%  {
				height: 0;
			}
		}
		
		@keyframes active-menu-bar02  {
			100%  {
				height: 0;
			}
		}

}


/*--------------------------------------------------------------------------------------------------------------
  footer
--------------------------------------------------------------------------------------------------------------*/

/*
	bnrLink
---------------------------*/

.bnrLink {
	max-width: 900px;
	margin: 0 auto 40px;
	text-align: center;
}

.bnrLink .item {
	width: 31%;
	float: left;
	margin: 0 1.1% 2%;
}


/*
	shareLink
---------------------------*/

.shareLink {
	text-align: center;
	margin-bottom: 75px;
}

.shareLink .item {
	line-height: 1;
	display: inline-block;
	margin: 0 5px;
	vertical-align: top;
}


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

	.footer {
		padding: 0 10px 15px;
	}
	
	
	/*
		bnrLink
	---------------------------*/
	
	.bnrLink {
		max-width: 320px;
		margin-bottom: 30px;
	}
	
	.bnrLink .item {
		width: 49%;
		margin: 0 auto 2%;
	}
	
	.bnrLink .item:nth-of-type(even) {
		float: right;
	}
	
	
	/*
		shareLink
	---------------------------*/
	
	.shareLink {
		margin-bottom: 30px;
	}
	
	.shareLink .item {
		margin: 0;
	}
	
	/*
		copyright
	---------------------------*/
	
	.copyright {
		font-size: 10px;
			-webkit-transform: scale(.8);
			-ms-transform: scale(.8);
		transform: scale(.8);
	}

}


/*--------------------------------------------------------------------------------------------------------------
  main
--------------------------------------------------------------------------------------------------------------*/

@media screen and (max-width: 768px) {
	.main {
		padding-bottom: 30px;
	}
}


/*------------------------------------------
  mv
------------------------------------------*/

.mv {
	text-align: center;
	overflow: hidden;
}


/*
	mvBox01
---------------------------*/

.mv .mvBox01 {
	position: relative;
}

.mv .mvBox01 .ttl {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	margin: auto;
	height: 300px;
	width: 100%;
}

.mv .mvBox01 .txt01 {
	display: table;
	position: absolute;
	top: 37px;
	right: 15px;
	width: 13%;
}


/*
	mvBox02
---------------------------*/

.mv .mvBox02 {
	position: relative;
}

.mv .mvBox02 .txtBox {
	position: absolute;
	top: -75px;
	left: 0;
	right: 0;
	margin: auto;
}

.mv .mvBox02 .txtBox .txt02 {
	margin-bottom: 15px;
}


/*
	mvBox03
---------------------------*/

.mvBox03 {
	margin-top: -210px;
	position: relative;
	z-index: 2;
}

@media screen and (min-width: 769px) and (max-width: 990px) {
	.mvBox03 {
		margin-top: -17%;
	}
}

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

	/*
		mvBox01
	---------------------------*/
	
	.mv .mvBox01 {
		z-index: 2;
	}
	
	.mv .mvBox01 .ttl {
		width: 70%;
		display: block;
		height: auto;
		top: auto !important;
		bottom: -42%;
		z-index: 100;
	}
	
	.mv .mvBox01 .txt01 {
		width: 16%;
		display: block;
		top: 7% !important;
		left: 0;
		right: 0;
		margin: auto;
	}
	
	.mv .mvBox01 .imgBox {
		margin:0 -11% 0 -15%;
	}
	
	
	/*
		mvBox02
	---------------------------*/
	
	.mv .mvBox02 {
		margin-top: -4%;
	}
	
	.mv .mvBox02 .txtBox {
		top: auto;
		bottom: -6%;
	}
	
	.mv .mvBox02 .txtBox .txt02 {
		padding: 0 7% 8px;
		margin-bottom: -3px;
		background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 40%, rgba(0,0,0,0.65) 100%);
		background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 40%,rgba(0,0,0,0.65) 100%);
		background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 40%,rgba(0,0,0,0.65) 100%);
	}

	.mv .mvBox02 .txtBox .txt03 {
		width: 93%;
		margin: 0 auto;
	}
	
	.mv .mvBox02 .imgBox {
		margin: 0 -14%;
	}
	
	
	/*
		mvBox03
	---------------------------*/
	
	.mvBox03 {
		margin-top: 13%;
	}

}


/*============================================================================================================
  about.html
============================================================================================================*/

/*------------------------------------------
  枠
------------------------------------------*/

.inner {
	width: 1000px;
}


/*------------------------------------------
  header (aboutHeader)
------------------------------------------*/

.aboutHeader {
	padding: 0;
	background: url(../img/bg/bg_header.png) no-repeat center;
	background-size: cover;
	min-width: 1000px;
}

.aboutHeader .inner {
	padding: 26px 0 20px;
	position: relative;
}


/*
	.aboutLogo
---------------------------*/

.aboutLogo {
	width: 155px;
	margin: 0;
	position: absolute;
	top: -8px;
	left: -20px;
}


/*------------------------------------------
  nav (aboutPageNav)
------------------------------------------*/

.aboutPageNav {
	display: table;
	margin: 0 auto;
}

.aboutPageNav li {
	color: #fff;
	float: left;
	font-size: 20px;
	line-height: 1;
	letter-spacing: 2px;
	margin: 0 17px;
}


/*
	snsLink
---------------------------*/

.aboutPageNavWrap .snsLink {
	float: right;
	margin-top: -20px;
}

.aboutPageNavWrap .snsLink li {
	color: #fff;
	float: left;
	font-size: 22px;
	margin-left: 20px;
	line-height: 1;
}


/*------------------------------------------
  footer
------------------------------------------*/

/*
	btnRetop
---------------------------*/

.btnRetop {
	width: 84px;
	height: 20px;
	position: fixed;
	right: 30px;
	bottom: 30px;
	z-index: 800;
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	visibility: hidden;
	opacity: 0;
	line-height: 1;
}

.btnRetop.fixed {
	visibility: visible;
	opacity: 1;
}

.btnRetop img {
	position: absolute;
	top: 0;
	left: 0;
}

.btnRetop .on {
	opacity: 0;
}


/*------------------------------------------
  main (aboutMain)
------------------------------------------*/

.aboutMain {
	padding: 80px 0 35px;
}

.aboutTtl {
	margin-bottom: 50px;
}

.aboutMain p {
	color: #fff;
	font-size: 14px;
	line-height: 2.2;
	letter-spacing: 0;
}


/*
	#introduction
---------------------------*/

#introduction .aboutSubTtl {
	margin-bottom: 5px;
}

#introduction .imgAbout01 {
	display: block;
	margin: 0 auto 35px;
}

#introduction .imgAbout02 {
	display: block;
	margin: 30px auto 0;
}

#introduction p {
	margin-bottom: 15px;
}


/*
	#story
---------------------------*/

#story {
	padding-top: 80px;
	position: relative;
}

#story p {
	width: 410px;
	padding: 40px 0 40px 40px;
	position: absolute;
	top: 180px;
	left: 0;
}

#story .imgAbout03 {
	display: block;
	margin: 0 auto;
}

#story .imgAbout04 {
	display: block;
	margin: -25px auto 0;
}


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

#cast {
	padding-top: 80px;
}

.castBox {
	width: 50%;
	float: left;
	margin-bottom: 45px;
}

.castBox p {
	width: 96%;
}

.castBox:nth-of-type(odd) {
	clear: both;
}

.castBox:nth-of-type(even) p {
	margin-right: 0;
	margin-left: auto;
}

.imgCast {
	display: block;
	margin: 0 auto 5px;
}

.castBox .profile {
	color: #d4cab3;
	font-size: 13px;
	line-height: 2.3;
	margin-bottom: 25px;
}

.txtCast {
	margin-bottom: 15px;
}

#cast .imgAbout05 {
	float: right;
}


/*
	#staff
---------------------------*/

#staff {
	padding-top: 50px;
}

#staff .aboutTtl {
	margin-bottom: 30px;
}

.txtStaff {
	margin-bottom: 20px;
}

#staff p {
	margin-bottom: 25px;
}


/*============================================================================================================
  modal
============================================================================================================*/

.mfp-auto-cursor .mfp-content {
	width: 900px;
}

.mfp-close-btn-in .mfp-close {
	color: #fff;
	top: -44px;
}

.mvWrap {
  position: relative;
}

.mvWrap iframe {
  width: 100%;
  height: 506px;
}

.tab_index {
  font-size: 0;
  position: absolute;
  left: 0;
  bottom: -40px;
  width: 100%;
	text-align: center;
	margin: 0 auto;
	display: table;
	table-layout: fixed;
}

.tab_index li {
	font-size: 16px;
	letter-spacing: 2px;
  text-align: center;
	display: table-cell;
}

.tab_index li + li a {
	border-left: 1px solid #666;
}

.tab_index li.active a,
.tab_index li a:hover {
	color: #fff;
  background: #a51211;
}

.tab_index li a {
	color: #fff;
  display: block;
	height: 100%;
	padding: 12px 5px;
  background: #000;
}

.tab_index li a:hover {
	opacity: 1;
}


@media screen and (max-width: 768px) {
	
	.mfp-auto-cursor .mfp-content {
		width: 100%;
	}	

	.mvWrap {
		position: relative;
		padding-bottom: 70%;
		height: 0;
		overflow: hidden;
	}

 .mvWrap iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 70%;
		height: calc(100% - 40px);
			-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

	.tab_index {
		bottom: 0;
	}

	.tab_index li {
		font-size: 14px;
	}

	.tab_index li a {
		padding: 10px 5px;
	}

}


/*============================================================================================================
  PC のみ
============================================================================================================*/

@media screen and (min-width: 769px) {

.sp {
	display: none;
}


/*------------------------------------------
  hover
------------------------------------------*/

a,
.btnRetop img {
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

a:hover {
	filter: alpha(opacity=60);
	 -moz-opacity: 0.6;
	opacity: 0.6;
}

.nav a:hover,
.aboutPageNav li a:hover,
.btnRetop a:hover {
	filter: alpha(opacity=100);
	 -moz-opacity: 1;
	opacity: 1;
}

.nav a:hover {
	color: #f20000;
	transform: translateY(-3px);
}

.aboutPageNav li a:hover {
	color: #f20000;
}

.btnRetop a:hover .off {
	opacity: 0;
}

.btnRetop a:hover .on {
	opacity: 1;
}

}