@charset "utf-8";

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


:root{
	--font_01:'Noto Serif JP', serif;
	--font_02:'Cormorant Upright', serif;
	
	--keyc_01:#160f3d;
	--keyc_02: #e9e9e9;
	--keyc_03: #d9910a;
}

figure{margin-block-end: 0; margin-inline-start: 0; margin-inline-end: 0; -webkit-margin-before: 0; -webkit-margin-block-after: 0; -webkit-margin-start: 0; -webkit-margin-end: 0;}

.fix_bg .fix_bg .bg {opacity: 1;}
.fix_bg {position: fixed; overflow: hidden;width: 100%;height: 100dvh;top: 0;z-index: -1; transition: .1s;}
.fix_bg.pc_only{}
.fix_bg .bg{width: 100%;height: 100%;}
.fix_bg.pc_only .bg{background-image: url(../images/pc_bg.webp); background-size: cover;}
.fix_bg.sp_only .bg{background-image: url(../images/sp_bg.webp); background-size: cover;}

body {
	text-align: center;
	color: #fff;
	font-family: var(--font_01);
	font-size: 16px;
	line-height: 1.5em;
	background-color: var(--keyc_01);
	font-feature-settings : "palt";
	background-repeat:repeat-y;
	background-size:100%;
	background-position:top left;
	background-attachment:fixed;
}
html {overflow-y:scroll; height:100%;}
img{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){
body{ background:none; position:relative;}
body:before{ content: ""; position: fixed; top: 0; left: 0; background: url(../images/main_bg_sp.jpg) center; background-repeat: no-repeat; background-size: 100%; width: 100%; height: 100vh; z-index: -1;}
}

/* header */
.head_nav{ top:0; right: 0; position: fixed; z-index: 100; width: 100%; background-color: rgba(0, 0, 0, .5);color: #d3c20d; line-height:0;display: flex;justify-content: flex-end;}
.head_nav .logo{ position: absolute;left: 0;width: 170px; margin: 2px 0 0 calc(1.8vw - 16px);}
.head_nav .logo img{ width:100%;}

.toggle_nav{position: relative;}
.nav{margin-bottom: 16px; margin-right: 14vw;}
.nav ul{ width: 100%;display: flex; }
.nav ul:after{clear:both;display:block;height:0;line-height:0;visibility:hidden;font-size:0.1em;content:".";}
.nav li {padding:0;}
.nav li a{ display:block; line-height:1.2em; font-size:20px;letter-spacing:0.05em;  color:#d3d3d3; text-align:center; padding: 26px calc(1.5vw - 3px) 8px; margin: 0 1px; position:relative; font-family: var(--font_02); font-weight: bold; transition: all 0.3s ease;}
.nav li.twittr{}
.nav li.twittr img{ width:38px;}
.nav li.twittr a{ padding:9px 12px 6px!important;}

.nav li a span.sub{display: block; font-size: 0.5em;line-height: 1.4em;}

.nav li a span.btm{ position: absolute; bottom: 0; left: 0px; width: 0%; height: 1px; background: var(--keyc_03);}
.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_03);}

.nav_trigger{display: none;}
.ticket_btn{display: block;position: absolute;top: 43px;right: 0;}

.ticket_btn a{color: #fff;font-size: 20px; font-weight: bold;background: var(--keyc_03);padding: 32px calc(5vw - 20px) 33px;font-family: var(--font_02);position: relative; transition: .5s;z-index: 2;}
.ticket_btn a:before {content: '';width: 7px;height: 7px;border: 0;border-top: 1px solid #fff;border-right: 1px solid #fff;transform: rotate(45deg);position: absolute;top: 50%;right: 1vw;margin-top: -6px;transition: .3s;}
.ticket_btn a:hover{padding:26px calc(5vw - 10px) 25px;opacity: .8;}
.ticket_btn a:hover:before {right: .8vw;}

@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.8); 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;}
	   .nav-active .global{ height:100dvh;padding-top:47px;}
	   .nav li.sp_top{ display: inherit;}

	   .head_nav{ height: 48px;}
	   .head_nav .logo{width: 60px;margin: 8px 0px 0 12px;}
	   
	   .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: block; }
	   .nav li{ border-top: 1px solid var(--keyc_02);  padding-right: 0; margin-bottom: 0;}
	   .nav li:last-of-type{ border-bottom: 1px solid var(--keyc_02);}
	   .nav li a:hover,nav li a.at{  border-bottom: none;}
	   .nav li a{ width:100%; max-width:inherit; text-align:center; padding:6vw 0; color:#fff; margin:0;}
	   .nav li a strong{ font-size:5vw; line-height:1em; margin-bottom:2vw; }
	   .nav li a.on{ border-bottom:none;}
	   
	   .nav li a span.btm{ display:none;}
	   
	   .nav li a:hover,
	   .nav li a.active{ color:var(--keyc_02);}
	   
	   .nav .twittr{ width:100%; margin-top:0;}
	   .nav .twittr img{ width:10%;}
	   .nav li.twittr a{ padding:15px 12px 10px!important;}

	   .nav .ticket_btn{top: 75svh;}
	   .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_03); -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_03); -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_03);}
	   .nav-active .nav_icon:after { margin-top: 0; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); background:var(--keyc_03);}
	   
	   .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;}
footer .footer_box .foot_left{ float:left;}
footer .footer_box .foot_left p{ line-height:1.5em; font-size: 13px; font-weight: bold;}
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{ float:right; text-align:right;} 
footer .footer_box .foot_right li{ display:inline-block; margin-left:5px;}
footer .footer_box .foot_right img{height: 46px; width:auto;}

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

footer .footer_box{ padding:10px 10px; }
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;}
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 li{}
footer .footer_box .foot_right img{ height:10vw;width: auto;}

}

/* =ページトップ
------------------------------------------------------------------------------------------*/
.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_03); 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;}
}



/* =clearfix
------------------------------------------------------------------------------------------*/
.clearfix:after{clear:both;display:block;height:0;line-height:0;visibility:hidden;font-size:0.1em;content:".";}



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

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