@charset "UTF-8";

@font-face
{
	font-family: "f-icons";
	src:
		url('../_fonts/foundation-icons.ttf') format('truetype')
	;
	font-weight: normal;
}
.f-icons
{
	font-family: f-icons;
	font-weight: 400;
}

@font-face
{
	font-family: 'GG-R';
	src:
		url('../_fonts/GenShinGothic-Regular-web.ttf') format('truetype')
	;
	font-weight: 400;
}

@font-face
{
	font-family: 'GG-M';
	src:
		url('../_fonts/GenShinGothic-Medium-web.ttf') format('truetype')
	;
	font-weight: 500;
}

a:not([class]):link,
a:not([class]):active,
a:not([class]):visited,
a:not([class]):hover
{
	font-family: 'GG-M', system-ui, -apple-system, sans-serif;
	font-weight: 500;
	color:rgb(0, 0, 0);
	text-decoration: none;
	border-bottom: 1px dotted rgb(0, 0, 0);
	-webkit-transition: all .3s ease;
	-moz-transition: all .3s ease;
	-ms-transition: all .3s ease;
	-o-transition: all .3s ease;
	transition: all .3s ease;
}

body:not(.touch) a:not([class]):hover
{
	color:rgba(0, 0, 0, .5);
}

h1, h2, strong
{
	font-family: 'GG-M', system-ui, -apple-system, Hiragino Sans, '游ゴシック', 'Yu Gothic', sans-serif;
	font-weight: 500;
}
h3, h4, h5
{
	font-family: 'GG-M', system-ui, -apple-system, Hiragino Sans, '游ゴシック', 'Yu Gothic', sans-serif;
	font-weight: 500;
}

/*//////////////////////////////////////////////////////////////////////////////////
///=///////////////////////////////// Loadign //////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////*/

/* ボーダーローダー */
#loader
{
	position:fixed;
	height:100%;
	width:100%;
	top: 0px;
	left: 0px;
	background-color: rgb(100, 100, 100);
	z-index:9998;
}

.pace
{
	-webkit-pointer-events: none;
	pointer-events: none;

	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;

	z-index: 9999;
	position: fixed;
	margin: auto;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	width: 100%;
	background: rgba(255, 255, 255, .2);
	overflow: hidden;
}

.pace:after
{
	content: attr(data-progress-text);

	display: inline-block;
	
	position: fixed;
	top: calc(50% + 1.5em);
	left: 0;
	width: 100vw;
	text-align: center;
	font-size: 1rem;
	color: rgb(255, 255, 255);
}

.pace .pace-progress
{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;

	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	-o-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);

	max-width: 100%;
	position: fixed;
	z-index: 9999;
	display: block;
	position: absolute;
	top: 0;
	right: 100%;
	height: 100%;
	width: 100%;
	background: rgb(255, 255, 255);
}

.pace.pace-inactive, .loaded .pace
{
	display: none;
}

/*//////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////// Footer /////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////*/

#footer
{
	z-index: 2;
	position: relative;
	display: block;
	width:100%;
	background-color: rgba(100, 100, 100, 1);
	color: rgb(255, 255, 255);
	padding: 3rem 2rem 5rem;
	margin-top: 5rem;
}

#footer .logo
{
	display: block;
	margin-bottom: 1rem;
	width: 100%;
	max-width: 15rem;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 50% 50%;
}
#footer .logo:before
{
	content:"";
	position: relative;
	display: block;
	padding-top: 20%;
}
.svg #footer .logo
{
	background-image: url(../_img/logo-min_h.svg);
}
.no-svg #footer .logo
{
	background-image: url(../_img/logo-min_h.png);
}

#footer > .flex
{
	flex-direction:column;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-align-items: center;
	align-items: center;
}

#footer a.tel
{
	color: rgb(255, 255, 255);
	text-decoration: none;
}

#footer .mail,
#footer .contact
{
	font-size: .9rem;
	display: block;
	margin: 1rem 0;
	padding: .25em 2em;
	color: rgb(255, 255, 255);
	border: 1px solid;
	text-decoration: none;
}

#footer .sns
{
	font-size: 1.5rem;
	color:rgb(255, 255, 255);
	text-decoration: none;
	margin: 0 .5em;
}

#footer .credit
{
	color:rgb(255, 255, 255);
	margin-top: 2rem;
	font-size: .6rem;
	text-align: center;
}

/*//////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////// Contents ////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////*/

body
{
	-webkit-text-size-adjust: 100%; 
	color: rgb(50, 50, 50);
	text-align:center;
	line-height:1.7;
	font-size: 1rem;
	letter-spacing:0.025em;
	font-family: GG-R, sans-serif;
	font-weight: 400;
	word-wrap: break-word;
	position: relative;
}

#allWrapper
{
	position: relative;
	width: 100%;
	min-height: calc(100vh - 5rem);
}

.pageContainer
{
	overflow: hidden;
	margin: 0rem auto;
	z-index:1;
	
	-webkit-transition: width .7s ease;
	-moz-transition: width .7s ease;
	-ms-transition: width .7s ease;
	-o-transition: width .7s ease;
	transition: width .7s ease;
}
/*.pageContainer:not(#titleWrapper){overflow-x: hidden;}*/

.pageContainer .transY
{
	position: relative;
	box-sizing: border-box;
	
	transform: translateY(5rem);
	filter:alpha(opacity=0);
	-moz-opacity: 0;
	opacity: 0;
	
	-webkit-transition: transform .7s ease, opacity .7s ease;
	-moz-transition: transform .7s ease, opacity .7s ease;
	-ms-transition: transform .7s ease, opacity .7s ease;
	-o-transition: transform .7s ease, opacity .7s ease;
	transition: transform .7s ease, opacity .7s ease;
}
.pageContainer.end .transY
{
	transform: translateY(0rem);
	filter:alpha(opacity=100);
	-moz-opacity: 1;
	opacity: 1;
}

.pageContainer .marginY
{
	position: relative;
	box-sizing: border-box;
	
	margin-top: 5rem;
	filter:alpha(opacity=0);
	-moz-opacity: 0;
	opacity: 0;
	
	-webkit-transition: margin-top .7s ease, opacity .7s ease;
	-moz-transition: margin-top .7s ease, opacity .7s ease;
	-ms-transition: margin-top .7s ease, opacity .7s ease;
	-o-transition: margin-top .7s ease, opacity .7s ease;
	transition: margin-top .7s ease, opacity .7s ease;
}
.pageContainer.end .marginY
{
	margin-top: 0rem;
	filter:alpha(opacity=100);
	-moz-opacity: 1;
	opacity: 1;
}

.pageContainer .transX
{
	position: relative;
	box-sizing: border-box;
	
	transform: translateX(5rem);
	filter:alpha(opacity=0);
	-moz-opacity: 0;
	opacity: 0;
	
	-webkit-transition: transform .7s ease, opacity .7s ease;
	-moz-transition: transform .7s ease, opacity .7s ease;
	-ms-transition: transform .7s ease, opacity .7s ease;
	-o-transition: transform .7s ease, opacity .7s ease;
	transition: transform .7s ease, opacity .7s ease;
}
.pageContainer.end .transX
{
	transform: translateX(0rem);
	filter:alpha(opacity=100);
	-moz-opacity: 1;
	opacity: 1;
}

.pageContainer .transBlur
{
	position: relative;
	box-sizing: border-box;
	
	filter:alpha(opacity=0);
	-moz-opacity: 0;
	opacity: 0;
	
	-webkit-filter: blur(10px);
	filter: blur(10px);
	
	-webkit-transition: -webkit-filter .7s ease, opacity .7s ease;
	-moz-transition: -moz-filter .7s ease, -moz-opacity .7s ease;
	-ms-transition: -ms-filter .7s ease, opacity .7s ease;
	-o-transition: -o-filter .7s ease, opacity .7s ease;
	transition: filter .7s ease, opacity .7s ease;
}
.pageContainer.end .transBlur
{
	filter:alpha(opacity=100);
	-moz-opacity: 1;
	opacity: 1;
	
	-webkit-filter: blur(0px);
	filter: blur(0px);
}


#goTopBt
{
	position:fixed;
	bottom: 5.5rem;
	right: .0;
	z-index:7000;
	display:none;
	cursor:pointer;
	width: 2rem;
	height: 2rem;
	background-color: rgb(0, 0, 0);

	-webkit-transition:bottom .3s ease;
	-moz-transition:bottom .3s ease;
	-ms-transition:bottom .3s ease;
	-o-transition:bottom .3s ease;
	transition:bottom .3s ease;
}

body:not(.touch) #goTopBt:hover
{
	bottom: 6rem;
}

#goTopBt:after
{
	content:"";
	display: block;
	position: absolute;
	top: .5rem;
	left: .5rem;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 .5rem 0.866rem .5rem;
	border-color: transparent transparent #ffffff transparent;
}


/*//////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////// Selector ////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////*/

#selectorBts
{
	display: none;
}

#selector
{
	font-family: serif, "A1 Mincho", 'YuMin_36pKn-Medium';
	font-weight: 400;
	background-color: rgb(255, 255, 255);
	z-index: 9990;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
}

#selector > div
{
	padding: 0rem 0rem 0rem 1rem;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-webkit-align-items: center;
	align-items: center;
	
	-webkit-transition: all .1s ease;
	-moz-transition: all .1s ease;
	-ms-transition: all .1s ease;
	-o-transition: all .1s ease;
	transition: all .1s ease;
}

#logo
{
	-webkit-align-items: center;
	align-items: center;
}

#logo > p
{
	color: rgb(0, 0, 0);
	margin-left: .75rem;
	font-size: .9rem;
}

#selector .logo
{
	width: 14rem;
	display: block;
	background-size: cover;
	-webkit-transition: all .1s ease;
	-moz-transition: all .1s ease;
	-ms-transition: all .1s ease;
	-o-transition: all .1s ease;
	transition: all .1s ease;
}

#selector .logo:after
{
	content:"";
	display:block;
	padding-top: 20%;
}

.svg #selector .logo{background-image: url(../_img/logo-bk.svg)}
.no-svg #selector .logo{background-image: url(../_img/logo-bk.png)}

#selector .selector.flex,
#mainSelector
{
	-webkit-align-items: center;
	align-items: center;
}

.selector ul
{
	list-style: none;
}
.selector ul li
{
	display: block;
	margin: 0 1rem;
}
.selector ul li > a._a,
.selector ul li > a._b
{
	cursor: pointer;
	color: rgb(50, 50, 50);
	display: block;
}

body:not(.touch) .selector ul li > a._a > span:before,
body:not(.touch) .selector ul li > a._b > span:before
{
	content:"";
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	height:1px;
	width: 0%;
	background-color: rgb(50, 50, 50);
	
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	-ms-transition: all .5s ease;
	-o-transition: all .5s ease;
	transition: all .5s ease;
}

body:not(.touch) .selector ul li > a._a:hover > span:before,
body:not(.touch) .selector ul li > a._b:hover > span:before
{
	width: 100%;
	left:auto;
	right: 0;
}

#selector .lng
{
	font-size: .8em;
	border-left: 1px solid rgb(200,200,200);
	color: rgb(50, 50, 50);
	padding: 0 2em;
	margin-left: 1em;
	font-family: GG-R, sans-serif;
	font-weight: 400;
	cursor:pointer;
}
#selector .lng:after
{
	content:"";
	display:block;
	position:absolute;
	right: .75em;
	top: .55em;
	
	width: 0;
	height: 0;
	border-style: solid;
	border-width: .6em .35em 0 .35em;
	border-color: rgb(50, 50, 50) transparent transparent transparent;
}
#selector .lng > a
{
	display:block;
	position:absolute;
	transform:scaleY(0);
	transform-origin: 0% 0%;
	top:1.5em;
	left:0;
	padding: 1em 2em 0;
	border-bottom-width:0;
/*	font-family: "A1 Mincho", 'YuMin_36pKn-Medium', serif;*/
	font-family: GG-R, sans-serif;
	font-weight: 400;
}
#selector .lng:hover > a
{
	transform:scaleY(1);
}

#selector .ticket
{
	display:flex;
	flex-direction:column;
	justify-content: center;
	min-height: 3.75rem;
	margin-left: 1rem;
	padding: .5em 1rem .5rem 2.5rem;
	font-size: .8rem;
	color:rgb(255, 255, 255);
	background-color:rgb(0, 0, 0);
}
#selector .ticket:after,
#fixticket:after
{
	content:"";
	display: block;
	border-left: 1px dashed rgb(255, 255, 255);
	height: 100%;
	width: 0;
	position: absolute;
	left: 1rem;
	top: 0;
}

#fixticket
{
	flex-direction: column;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-align-items: center;
	align-items: center;
	
	width: 100%;
	bottom: 0;
	position: fixed;
	padding: .5em 1rem .5rem 2.5rem;
	font-size: .8rem;
	color:rgb(255, 255, 255);
	background-color:rgb(0, 0, 0);
	
	transform: translateY(100px);
	
	z-index: 10;
	
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	-ms-transition: all .5s ease;
	-o-transition: all .5s ease;
	transition: all .5s ease;
}

#menuBt
{
	display: none;
	position: fixed;
	top: 2rem;
	right: 2rem;
	cursor: pointer;
	height: 2rem;
	width: 2rem;
	padding: 1rem;
	z-index: 9000;
}

#menuBt.menuBtOpen
{
	height: 3rem;
}

#menuBt span
{
	top: calc(50%  - 2px);
	left: calc(50%  - 1rem);
	transition: all 0.3s;
	transform: rotate(0deg);
	width: 2rem;
	height: 2px;
	display: block;
	position: absolute;
	background: rgb(0, 0 ,0);
/*	border-bottom: 1px solid rgba(255, 255, 255, .7);*/
}

body.hamburger #menuBt span
{
	background: rgb(255, 255, 255);
}

#menuBt .top
{
	transform: translateY(-.5rem);
}
#menuBt .middle
{
	transform: translateY(0px);
}
#menuBt .bottom
{
	transform: translateY(.5rem);
}

#menuBt.menuBtOpen .middle
{
	background: rgba(0, 0, 0, 0);
}

#menuBt.menuBtOpen .top
{
	top: calc(50% + 0px);
	transform: rotate(-45deg);
}

#menuBt.menuBtOpen .bottom
{
	top: calc(50% + 0px);
	transform: rotate(45deg);
}

/*##############################
########### MENU LiIST #########
##############################*/

#menuList
{	
	font-family: serif, "A1 Mincho", 'YuMin_36pKn-Medium';
	font-weight: 400;
/*	text-transform: uppercase;*/
	position:fixed; 
	top: 0rem;
	margin: 0;
	padding: 2rem 2rem 8rem;
	width:100%;
	height:100vh;
	z-index: 8000;
	background-color: rgb(0, 0, 0);
	color: rgb(255, 255, 255);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

#menuList .logo
{
	display:block;
	background-size: cover;
	width: calc(100% / 3);
	max-width: 10rem;
	text-decoration: none;
}

.svg #menuList .logo{background-image: url(../_img/logo-min.svg);}
.no-svg #menuList .logo{background-image: url(../_img/logo-min.png);}

#menuList .logo:before
{
	content:"";
	display: block;
	position: relative;
	padding-top: 150%;
}

#menuList .linksWrapper
{
	margin: 2rem 0;
	
	flex-direction: column;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-align-items: center;
	align-items: center;
}

#menuList .linksWrapper a
{
	cursor: pointer;
	color: rgb(255, 255, 255);
	display: block;
	font-size: 1rem;
	margin: 1em 0;
}

#menuList .lng
{
	margin: 1em 0;
}

#menuList .lng a
{
	font-family: GG-R, sans-serif;
	font-weight: 400;
	font-size: .9rem;
	padding: 0 2em;
	line-height: 1;
}
#menuList .lng a + a
{
	border-left: 1px solid rgba(255, 255, 255, .5);
}

#menuList .ticket
{
	font-size: .9rem;
	display: block;
	margin: 1rem 0;
	padding: .25em 2em;
	color: rgb(255, 255, 255);
	border: 1px solid;
	text-decoration: none;
}

/**********************************************************/
/************************** Parts **************************/
/**********************************************************/


.linkBt, .pdfLink, .linkBtL
{
	display: inline-block;
	box-sizing: border-box;
	cursor: pointer;
	position: relative;
	text-decoration: none;
/*	text-transform: uppercase;*/
	color: inherit;
	border-style: solid;
	border-width: 0px;
	border-bottom-width: 0;
	
	color: rgb(255, 255, 255);
	background-color: rgb(0, 0, 0);
	
	line-height: 1.25;
	padding: .2em .5em;
	font-size: .8rem;
	margin: 0 1.5rem;
	letter-spacing: 0;
	
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	-ms-transition: all .5s ease;
	-o-transition: all .5s ease;
	transition: all .5s ease;
}

.linkBt.typesquare_option,
.pdfLink.typesquare_option,
.linkBtL.typesquare_option
{
	border-bottom-width: 0;
}

.linkBt:before, .pdfLink:before, .linkBtL:before, .linkBtM:before
{
	content:"";
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(150, 150, 150, 1);
	
	transform: scaleX(0);
	transform-origin: right center;

	-webkit-transition: transform .3s;
	-moz-transition: transform .3s;
	-ms-transition: transform .3s;
	-o-transition: transform .3s;
	transition: transform .3s;
}

body:not(.touch) .linkBt:hover:before,
body:not(.touch) .pdfLink:hover:before,
body:not(.touch) .linkBtL:hover:before,
body:not(.touch) .linkBtM:hover:before
{
	transform: scaleX(1);
	transform-origin: left center;
}

.linkBt{font-size: .8em; margin-left: .5em;}
.pdfLink{font-size: .9em; display:block; margin-top: 1em;}
.linkBtL{font-size: .9em; margin: 0 0 1rem 0; padding: .75em 2em;}
.linkBtM{font-size: .9em; padding: .5em 1em;}
.linkBtM p, .linkBtL p{display: inline-block; position: relative;}

.linkBtL p:not([class]),
.linkBtL p.typesquare_option
{
	padding-right: 3em;
	padding-left: 3em;
}
.linkBtL p:not([class]):before,
.linkBtL p.typesquare_option:before
{
	content:"";
	display: block;
	position: absolute;
	right: 0;
	top: calc(50% - 2px - .2em);
	width: .5em;
	height: .5em;
	border-style: solid;
	border-width: 0px 0px 1px 0px;
	transform: rotate(-135deg);
}
.linkBtL p:not([class]):after,
.linkBtL p.typesquare_option:after
{
	content:"";
	display: block;
	position: absolute;
	right: -1px;
	top: calc(50% - 2px);
	width: 2em;
	height: 0;
	border-style: solid;
	border-width: 1px 0 0 0;
}

.linkBtM
{
	background-color: rgba(255, 255, 255, 1);
	color: rgb(255, 255, 255);
}
.linkBtM:before
{
	background-color: rgb(255, 255, 255);
}

body:not(.touch) .linkBtL:hover p:not([class]):after, 
body:not(.touch) .linkBtL:hover p.typesquare_option:after, 
body:not(.touch) .linkBtL:hover p:not([class]):before,
body:not(.touch) .linkBtL:hover p.typesquare_option:before
{
	-webkit-transition: right .1s ease;
	-moz-transition: right .1s ease;
	-ms-transition: right .1s ease;
	-o-transition: right .1s ease;
	transition: right .1s ease;
	right: -.5em;
}

body:not(.touch) .linkBt:hover, 
body:not(.touch) .pdfLink:hover, 
body:not(.touch) .linkBtL:hover
{
/*	background-color: rgb(160, 160, 160);*/
	color: rgb(255, 255, 255);
}

body:not(.touch) .linkBtM:hover
{
/*	background-color: rgb(255, 255, 255);*/
	color: rgb(160, 160, 160);
}

.secTitleWrapper
{
	position:absolute;
	top: 0;
	left: 0;
}

.secTitleWrapper > div
{
	-ms-writing-mode: vertical-rl;
 	writing-mode: vertical-rl;
}

.secTitle
{
	font-size: 1.5rem;
	font-family: serif, "A1 Mincho", 'YuMin_36pKn-Medium';
	font-weight: 400;
	color: rgb(0, 0, 0);
}

.secTitleWrapper + .contents
{
	margin-left: 7rem;
}

.maxWidth
{
	margin: 0 auto;
	padding: 0 2rem;
	width: 100%;
	max-width: 1200px;
}

/*//////////////////////////////////////////////////////////////////////////////////
///////////////////////////////// MEDIA SCREEN ////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////*/

@media screen and (max-width: 1250px)
{
	.selector ul li
	{
		margin: 0 .75rem;
	}
}

@media screen and (max-width: 1240px)
{
	.selector ul li
	{
		margin: 0 .75rem;
	}
	#selector .logo
	{
		width: 12rem;
	}
}

@media screen and (max-width: 1180px)
{
	.selector ul li
	{
		margin: 0 .5rem;
	}
	#selector .logo
	{
		width: 10rem;
	}
}


@media screen and (max-width: 1120px)
{
	#selector
	{
		display: none;
	}
	#menuBt
	{
		display: block;
	}
	
	body.sc #fixticket
	{
		transform: translateY(0px);
	}

}


@media screen and (max-width: 650px)
{
	.secTitleWrapper
	{
		position:relative;
		margin-bottom: 2rem;
	}
	
	.secTitleWrapper > div
	{
		-ms-writing-mode: horizontal-tb;
		writing-mode: horizontal-tb;
		margin-bottom: 3rem;
	}
	
	h2.secTitle,
	h1.secTitle
	{
		text-align: center;
	}
	
	.secTitleWrapper + .contents
	{
		margin-left: 0rem;
	}
}