@charset "utf-8";

h1, h2{
	font-family: toppan-bunkyu-midashi-go-std, sans-serif;
	font-weight: 900;
	font-style: normal;
	} 


/* top
-------------------------------------------------------------- */


#top {
	width: 100%;
	/* background-color: #ffff00; */
	position: relative;
	top: 0;
	color: #000000;
	}

#top #loader-bg {
	background: #081413;
	}

#top #mvBg {
	width: 100%;
	opacity: 0.8;
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	}

#top #mvInner {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	-webkit- transform: translateY(-50%) translateX(-50%);
	}

#top h1{
	font-size: 18vw;
	margin: 0 10px;
	}

#top h1 p{
	line-height: 0.9em;
	}

#top h2{
	font-size: 8vw;
	margin: 0 15px;
	}

#top h2 p{
	line-height: 1.2em;
	}

#top h2 p.h2l1{
	font-size: 8vw;
	}

#top h2 p.h2l2{
	font-size: 6.5vw;
	}

#top p.inPre{
	text-align: center;
	font-size: 30px;
	}

/* h1高さ対応 */
.mac.chrome #top #wrapper h1{
	padding-top: 11px;
	}
.mac.gecko #top #wrapper h1{
	padding-top: 15px;
	}
.mac.safari #top #wrapper h1{
	padding-top: 17px;
	}
.win.gecko #top #wrapper h1{
	padding-top: 10px;
	}

.tJus {
	text-align-last: justify; /* Chrome・Firefox用 */
	text-justify: inter-ideograph; /* IE・Edge用 */
	}

.lSpace {
	letter-spacing: 0.03em;
	}


/* PC */
@media print, screen and (min-width: 960px) {

#top h2 p.h2l2{
	font-size: 7vw;
	}


}


/* IE11向けhack */
@media all and (-ms-high-contrast: none) #top h1 p{
	//vertical-align: middle;
	line-height: normal;
	height: 0.9em;
	}




/* about
-------------------------------------------------------------- */

#about h1{
	position: relative;
	width: 100%;
	text-align: center;
	color: #e2e2e1;
	font-size: 11vw;
	}

#about h1 .frontTitle{
	position: absolute;
	top: -12%;
	width: 100%;
	text-align: center;
	}

#about h1 p{
	text-align: center;
	font-size: 10vw;
	margin-top: 5px;
	color: #000000;
	line-height: 1em;
	}

#about h2{
	width: 90%;
	margin: 50px auto 0 auto;
	text-align: left;
	font-size: 7vw;
	line-height: 1.5em;
	}

#about .yearImgBox{
	width: 90%;
	margin: 0 auto;
	margin-top: 50px;
	}

#about .yearBox{
	float: left;
	width: 100%;
	margin-bottom: 15px;
	}

#about .yearBox .year{
	font-size: 10vw;
	line-height: 1em;
	}

#about .yearBox .pNameLeft{
	display: block;
	margin: 8px 0 0 0;
	padding: 0 5px;
	background-color: #000000;
	color: #ffffff;
	font-size: 11.4vw;
	letter-spacing: 0.03em;
	line-height: 1.5em;
	vertical-align: middle;
	}

#about .yearBox .pNameRight{
	border: solid 5px #000000;
	margin: 8px 0 0 0;
	padding: 6px 5px;
	font-size: 10vw;
	line-height: 4.6em;
	text-align: center;
	vertical-align: middle;
	}

#about .message {
	width: 85%;
	margin: 50px auto 0 auto;
	text-align: left;
	font-family: dnp-shuei-gothic-kin-std, sans-serif;
	font-weight: 500;
	font-style: normal;
	font-size: 5vw;
	line-height: 2em;
	word-break: break-word;
    overflow-wrap: break-word;
	}

#about .triangle{
	width: 0;
	height: 0;
	border-top: 30px solid black;
	border-right: 30px solid transparent;
	border-left: 30px solid transparent;
	margin: 15px 0;
	}


/* タブレット */
@media print, screen and (min-width: 600px) {

#about h2{
	font-size: 30px;
	}

#about .message {
	font-size: 20px;
	}
}

/* PC */
@media print, screen and (min-width: 960px) {


#about h1{
	font-size: 110px;
	}

#about h1 .frontTitle{
	top: 18%;
	}

#about h1 p{
	font-size: 60px;
	}

#about h2{
	font-size: 30px;
	margin-top: 0;
	text-align: center;
	}
#about .yearImgBox{
	width: 710px;
	margin: 0 auto;
	margin-top: 70px;
	}

#about .yearBox{
	width: 330px;
	float: left;
	margin-bottom: 0;
	}

#about .yearBox .year{
	font-size: 45px;
	line-height: 1em;
	}

#about .yearBox .pNameLeft{
	width: 300px;
	font-size: 37px;
	}

#about .yearBox .pNameRight{
	width: 300px;
	font-size: 35px;
	}

#about .triangle{
	float: left;
	width: 0;
	height: 0;
	border-left: 30px solid black;
	border-right: none;
	border-top: 30px solid transparent;
	border-bottom: 30px solid transparent;
	margin: 110px 15px 0 0;
	}

#about .message {
	font-size: 25px;
	width: 750px;
	margin: 80px auto 0 auto;
	}

}



/* movie
-------------------------------------------------------------- */


#movie .movieBox{
	position:relative;
	width: 100%;
	padding-top:56.25%;
	display: block;
	float: left;
	margin-top: 30px;
	}

#movie .movieBox iframe{
	position:absolute;
	top:0;
	left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
	width: 90%;
	height: 90%;
	border-collapse: collapse;
	border: none;
	border-spacing: 0;
	background-color: #ffffff;
	border-top-width: 0;
	border-bottom-width: 0;
	border-left-width: 0;
	border-right-width: 0;
	}

#movie .movieBoxIE9{
	display: none;
	width:100%;
	}

#movie .movieBoxIE9 p{
	text-align: center;
	margin-top: 50px;
	font-size: 16px;
	font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo, sans-serif;
	}


/* PC */
@media print, screen and (min-width: 960px) {

#movie .movieBox{
	width: 50%;
	padding-top: 30%;
	}

#movie .movieBoxIE9 p{
	text-align: center;
	font-size: 24px;
	margin-top: 90px;
	}

#movie .mt50{
	margin-top: 90px;
	}

#movie iframe:-webkit-full-screen {
    -webkit-transform: none;
	}

}



/* performer
-------------------------------------------------------------- */

#performer {
	width: 90%;
	margin: 0 auto;
	overflow: hidden;
	}

#performer h1{
	letter-spacing: 0.03em;
	line-height: 1em;
	}

#performer #performerBox {
	margin-top: 50px;
	}

#performer #performerBox li{
	position: relative;
	margin-top: 30px;
	overflow:hidden;
	}

#performer #performerBox .dancer{
	float: left;
	width: 30%;
	}

#performer #performerBox .musician,
#performer #performerBox .liquid,
#performer #performerBox .performerCtg {
	float: left;
	width: 47%;
	}

#performer #performerBox .name{
	position: absolute;
	top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
	width: 100%;
	text-align: center;
	font-size: 2.5vw;
	color: #ffffff;
	z-index: 10;
	}

#performer #performerBox .mrSp5{
	margin-right: 5%;
	}

#performer #performerBox .mrSp10{
	margin-right: 6%;
	}

#performer #performerBox li img{
	width: 100%;
	height: 100%;
	transition:1s all;
	}
#performer #performerBox li img:hover{
	transform:scale(1.2,1.2);
	transition:1s all;
}

/* ------ modalbox用css ------ */
#performer .modal_box {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 9999;
	display: none;
	}

#performer .modal_bg {
	height: 100%;
	width: 100%;
	background-color: rgba(30, 30, 30, 0.9);
	}

#performer .modal_inner {
	left: 50%;
	padding: 40px;
	position: absolute;
	top: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 100%;
	color: #ffffff;
	height: 100%;
	}

#performer .modal_block {
	margin: 50px 0;
	height: 90%;
	overflow-y: scroll;
	}


#performer .modal_inner h1 {
	font-size: 50px;
	text-align: center;
	line-height: 1em;
	margin-bottom: 50px;
	}

#performer .modal_inner .text {
	width: 90%;
	margin: 40px auto;
	text-align: left;
	font-family: dnp-shuei-gothic-kin-std, sans-serif;
	font-weight: 500;
	font-style: normal;
	font-size: 18px;
	line-height: 1.5em;
	word-break: break-word;
    overflow-wrap: break-word;
	}

#performer .modal_inner img {
	width: 90%;
	height: auto;
	}

#performer .modal_close {
	cursor: pointer;
	position: absolute;
	right: 6%;
	top: 3%;
	font-size: 2rem;
	}

#performer .performerCtg{
	}

#performer .performerCtg p{
	line-height: 1.3em;
	text-align: justify;
	text-justify: inter-ideograph;
	color: #cccccc;
	}

#performer .performerCtg #dancer{
	font-size: 9vw;
	}
#performer .performerCtg #musician{
	font-size: 7vw;
	}
#performer .performerCtg #liquid{
	font-size: 4vw;
	}

#performer .modal_block .leftBox {
	text-align: center;
	}

#performer .modal_block .leftBoxHrz {
	text-align: center;
	}


/* スマホ */
@media screen and (max-width: 480px) {

#performer  .modal_trigger {
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	}
#performer .modal_trigger li {
	width: 47.5%;
	margin-top: 20px;
	max-width: inherit;
	}
#performer .modal_trigger li + li {
	margin-left: 0;
	}
#performer .modal_inner {
	width: 90%;
	padding: 25px;
	}
#performer .modal_close {
	font-size: 2.2rem;
	}
}


/* PC */
@media print, screen and (min-width: 960px) {

#performer h1{
	font-size: 7.5vw;
	}

#performer .modal_inner {
	width: 80%;
	line-height: 2em;
	}

#performer .modal_block {
	overflow-y: visible;
	}

#performer .modal_block .leftBox {
	float: left;
	height: 65vh;
	margin-right: 50px;
	text-align: right;
	}

#performer .modal_block .rightBox {
	float:left;
	width: 50%;
	color: #ffffff;
	}

#performer .modal_inner h1 {
	font-size: 70px;
	}

#performer .modal_inner .leftBox img {
	width: auto;
	height: 100%;
	}

#performer .modal_inner .text {
	margin: 0px auto;
	}

#performer .modal_close {
	position: static;
	width: 100%;
	cursor: pointer;
	font-size: 2.5rem;
	text-align: center;
	padding-top: 30px;
	}

#performer .scroll {
	overflow-y: scroll;
	}

#performer .modal_block .leftBoxHrz {
	float:left;
	width: 40%;
	margin-right: 50px;
	}

#performer .modal_block .leftBoxHrz img{
	width: 100%;
	height: auto;
	}

}



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

#gallery h1{
	width: 100%;
	min-height: 500px;
	font-size: 150px;
	text-align: right;
	padding-right: 20px;
	letter-spacing: 0.03em;
	color: #ffffff;
	background-image: url(../img/gallery01.jpg);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center; 
	}



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


#staff dl{
	margin-top: 20px;
	font-size: 4vw;
	}

#staff dl dt{
	text-align: center;
	vertical-align: middle;
	line-height: 1em;
	padding: 30px 0 0 0;
	}

#staff dl dd{
	text-align: center;
	vertical-align: middle;
	line-height: 1em;
	padding: 10px 0 0 0;
	}

#staff dl p {
	text-align: center;
	}

#staff .pt15{
	padding: 10px 0 0 0;
	}

/* タブレット */
@media screen and (min-width: 600px) {

#staff dl{
	font-size: 28px;
	}
}

/* PC */
@media screen and (min-width: 960px) {

#staff article {
	margin-bottom: 150px;
	}

#staff dl{
	margin: 0 auto;
	margin-top: 50px;
	width: 1050px;
	overflow: hidden;
	font-size: 30px;
	}

#staff dl dt{
	float: left;
	width: 470px;
	text-align: right;
	vertical-align: middle;
	line-height: 1em;
	padding: 15px 20px 15px 0;
	}

#staff dl dd{
	float: left;
	width: 500px;
	text-align: left;
	vertical-align: middle;
	line-height: 1em;
	padding: 15px 0 15px 20px;
	}

#staff dl p {
	text-align: left!important;
	}

#staff .pt15{
	padding: 15px 0 0 0;
	}

}