@charset "utf-8";

/* =base
------------------------------------------------------------------------------------------*/
*{box-sizing: border-box;}


:root{
	--font_01:'Noto Sans JP', sans-serif;
	--font_02:'Passion One', sans-serif;
	
	--keyc_01:#cbaff3;
	--keyc_02:#8562b6;
}



body {
	text-align: center;
	color: #fff;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 16px;
	line-height: 1.5em;
	background-color:#000;
}
body:after{ background-image: url("../images/pc_bg.jpg"); content: ''; display: block; position: fixed; left: 0; top: 0; width: 100%; height: 100lvh; z-index: -1;}
html {overflow-y:scroll; height:100%;}
img{max-width: 100%;}

a {color: #dac498;text-decoration: none; outline:none;}
a:hover {color: #E9D8B6;text-decoration: none;}
a:hover img{opacity:0.9;filter: alpha(opacity=90);}

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

/* header */
.head_nav{ top:0; left: 0; position: fixed; z-index: 100; width: 100%; background-color: rgba(0,0,0,0.7); line-height:0;display: flex; justify-content: space-between; padding-right: 17%;}
.head_nav .logo{ height: 60px; margin: 0 0 0 2%; display: flex; align-items: center;}
.head_nav .logo img{ height: 25px;}

.nav{}
.nav ul{ width: 100%; display: flex;}
.nav li {  padding:0; margin-bottom:8px}
.nav li a{ display:block; line-height:1.2em; font-size:20px; font-weight:600; letter-spacing:0.05em;  color:var(--keyc_01); text-align:center; padding:20px 0.6em 10px; margin: 0 1px; position:relative; font-family: var(--font_02); font-weight: 100;}

.nav li a span.btm{ position: absolute; bottom: 0; left: 0px; width: 0%; height: 1px; background: var(--keyc_01); transition: all 0.3s ease;}
.nav li a:hover span.btm,
.nav li a.active span.btm{ width:100%;}

.nav li a:hover,
.nav li a.active{ color:var(--keyc_01);}

.nav .ticket_btn{position: absolute;right: 0; top: 0%; width: 15%;} 
.nav .ticket_btn a{background-color: var(--keyc_01);color: #000;font-family: var(--font_02);font-size: min(3vw, 40px);line-height: 1.4em;border-radius: 0 0 0 8px; display: block; width: 100%; padding: 10px 0;}
.nav .ticket_btn a:after {content: ''; background-image: url("../images/arrow.svg"); background-size: contain; background-position: right;  background-repeat: no-repeat; position: absolute;transform: translate(0% ,-50%); right: 5%;top: 50%;height: 30%; width: 50%;}
.nav_trigger{display: none; }

.nav .ticket_btn a:hover{background-color: #d8c4f4; transition: .5s;}


@media only screen and (max-width: 768px){
	.global{width:100%; position:fixed; z-index:10; top:0; left:0; overflow-y: hidden; padding-top:0; height:0; background-color:rgba(0,0,0,0.7); box-sizing: border-box;
		-webkit-transition: 0.5s;  -moz-transition: 0.3s;  -o-transition: 0.3s;  -ms-transition: 0.3s;  transition:0.3s;}
	   .global li{width: 100%; display:inherit; background-color:var(--keyc_02);}
    
    .head_nav .logo{ height: 50px;}
    .head_nav .logo img{ height: 20px;}
    
	   .nav-active .global{ height:100dvh;padding-top:47px;}
	   .nav li.sp_top{ display: inherit;}
	   
	   .toggle_nav{ -webkit-transition: 0.2s ease;  -moz-transition: 0.2s ease;  -o-transition: 0.2s ease;  -ms-transition: 0.2s ease;  transition: 0.2s ease;}
	   .nav{ margin-bottom:0; width:100%; height:inherit;}
        .nav ul{ display: inherit;}
	   .nav li{  padding-right: 0; margin-bottom: 0;}
	   .nav li a{ width:100%; max-width:inherit; text-align:center; padding:6vw 0;  margin:0; background-color: #000;}
	   .nav li a strong{ font-size:5vw; line-height:1em; margin-bottom:2vw; }
	   .nav li a.on{ border-bottom:none;}
	   .nav li a:hover,nav li a.at{  border-bottom: none; }
	   
	   .nav li a span.btm{ display:none;}
	   
	   .nav li a:hover,
	   .nav li a.active{ color:var(--keyc_02); background-color:#000;}
	   
	   .nav .twittr{ width:100%; margin-top:0;}
	   .nav .twittr img{ width:10%;}
	   .nav li.twittr a{ padding:15px 12px 10px!important;}

	   .nav .ticket_btn{bottom: 4svh; top:auto; position: fixed;transform:none; display: none;}
	   .nav .ticket_btn a{padding: 8px 64px 1px 34px;font-size: 42px;line-height: 1.4em;border-radius:0;}

	   
	   /* Default navigation icon */
	   .nav_trigger { display: block; position: fixed; width: 30px; height: 25px; right:3vw; top: 11px; z-index: 200; line-height:1;}
	   .nav-active .nav_trigger { opacity: 0.7;}
	   .nav_icon { display: inline-block; position: relative; width: 30px; height: 3px; background-color: var(--keyc_01); -webkit-transition-property: background-color, -webkit-transform; transition-property: background-color, -webkit-transform; transition-property: background-color, transform; transition-property: background-color, transform, -webkit-transform; -webkit-transition-duration: 300ms; transition-duration: 300ms;}
	   .nav_icon:before,
	   .nav_icon:after { content: ''; display: block; width: 30px; height: 3px; position: absolute; background: var(--keyc_01); -webkit-transition-property: margin, -webkit-transform; transition-property: margin, -webkit-transform; transition-property: margin, transform; transition-property: margin, transform, -webkit-transform; -webkit-transition-duration: 300ms; transition-duration: 300ms;}
	   .nav_icon:before { margin-top: -9px;}
	   .nav_icon:after { margin-top: 9px;}
	   .nav-active .nav_icon { background: rgba(0, 0, 0, 0);}
	   .nav-active .nav_icon:before { margin-top: 0; -webkit-transform: rotate(45deg); transform: rotate(45deg);background:var(--keyc_01);}
	   .nav-active .nav_icon:after { margin-top: 0; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); background:var(--keyc_01);}
	   
	   .nav li a:hover span.btm,
	   .nav li a.active span.btm{ display:none;}
	   .nav li a span.jp{ font-size:3vw;}
}


/* =foot
-----------------------------------------------------------------------------------------*/
footer{ width:100%;text-align:left;}

footer .footer_box{ padding:20px 0px 120px; display: flex; justify-content: space-between; align-items: flex-end;}
footer .footer_box .foot_left{ }
footer .footer_box .foot_left p{ line-height:1.5em; font-size: 13px; font-weight: bold; margin-bottom: 0;}
footer .footer_box .foot_left .pick_box{ border: 1px solid #000; padding: 12px 20px 6px; margin-top: 30px; display: inline-block;}
footer .footer_box .foot_left .pick_txt{font-weight: bold; line-height: 1.5em; margin-bottom: 10px; font-size: 18px; text-align: center; display: inline-block; background-color: #000; color: #fff; width: 100%; padding: 2px 0;}
footer .footer_box .foot_left img{ height:46px;}
footer .footer_box .foot_right{ text-align:right;} 
footer .footer_box .foot_right ul{ display: flex; align-items: center;}
footer .footer_box .foot_right li{  margin-left:15px;}
footer .footer_box .foot_right .ln img{ width: 110px;}
footer .footer_box .foot_right .hp img{ width: 90px;}

@media only screen and (max-width: 768px){
	
footer{padding-bottom: 80px;}

footer .footer_box{ padding:10px 10px; display: inherit;}
footer .footer_box .foot_left{ float:none; margin-bottom:10px;}
footer .footer_box .foot_left p{ font-size:12px; text-align: center; color: #fff;font-weight: 400; margin-bottom: 1em;}
footer .footer_box .foot_left .pick_box{ padding: 9px 8px 2px; margin-top: 8px;}
footer .footer_box .foot_left .pick_txt{ font-size: 14px; width: 100%; margin: 0 0 8px;}
footer .footer_box .foot_left img{ width: 100%; height: auto;}
	
footer .footer_box .foot_right{ float:none; text-align:center;} 
	footer .footer_box .foot_right ul{ justify-content: center;}
footer .footer_box .foot_right li{}
footer .footer_box .foot_right img{ height:10vw;}

}

/* =ページトップ
------------------------------------------------------------------------------------------*/
.page_top{margin: 0;  width:80px;  text-align:center;position:fixed; right:30px; bottom:40px;  z-index:10}
.page_top a{background-color:var(--keyc_01); display:block;border-radius: 50%;height:80px; width:80px; line-height:80px; color:#000; font-size:12px; font-weight:bold;}
.page_top a:hover{text-decoration:none; opacity:0.8;}


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


.pc_only{ display: inline;}
.sp_only{ display:none;}

@media only screen and (max-width: 768px){
    .pc_only{ display:none;}
    .sp_only{ display:block;}
}