@charset "utf-8";

*{ box-sizing: border-box;word-break: break-all;}

:root {
    --keyc: #E60012;
	--font01:"Noto Sans JP", sans-serif;
	--font02:"Yuji Syuku", serif;
	--font03:"Zen Maru Gothic", sans-serif;
}


/* =base
------------------------------------------------------------------------------------------*/
body {
	text-align: center;
	font-family: var(--font01);
	font-weight: 500;
	font-size: 16px;
	line-height: 1.5em;
	color: #000;
	background-color: #fff;
	overflow-x: hidden;
}

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

@media only screen and (max-width: 768px){
    body{}
    body:before{ height: 100%;}    
    
    .sp_only{display: initial;}
    .pc_only{display: none!important;}
}

html {overflow-y:scroll;overflow-x: hidden;height:100%;}
a { font-weight: bold; text-decoration: none;  cursor: pointer;color: var(--keyc); outline:none;transition:0.3s; }
a:link {  text-decoration: none; }
a:hover {  text-decoration: none; opacity: 0.8;}
a:active {  text-decoration: none;}
a img { outline:none;}
a:hover img {  opacity: .9;  -webkit-opacity: .9;  -moz-opacity: .9;  filter: alpha(opacity=90);  -ms-filter: "alpha(opacity=90)";}

.arrow{ position:relative;}
.arrow::after {content: "";position: absolute;top: calc(50% - 3px);right: 4%;width: 4px;height: 4px;border: 1px solid;border-color: transparent #061f58 #061f58 transparent;transform: rotate(-45deg);}

/* bg */
.main_bg_box{position: fixed;height: 100dvh;width: 100%;top: 0;left: 0;background-image: url(../images/bg.webp);background-repeat: no-repeat;background-position: center;background-size: cover;z-index: -1;opacity: 1;pointer-events: none;}
.main_bg_box img{width: 100%;}
.main_bg_box .bg_01{position: absolute;width: min(40%,1000px);left: max(calc(400px * -1),calc(6vw * -1));bottom: max(calc(110px * -1),calc(8vw * -1));opacity: 0.6;z-index: 1;}
.main_bg_box .bg_02{position: absolute;width: min(50%, 1000px);right: max(calc(470px * -1), calc(6vw * -1));top: max(calc(300px * -1), calc(8vw * -1));opacity: 0.7;z-index: 1;}
.main_bg_box .path_area{position: absolute;top: 5%;left: 3%;background-color: #fff;border-radius: 76px;width: 94%;height: 90%;z-index: 0;}
.main_bg_box .sakana{position: absolute;z-index: 1;width: min(320px, 39%);right: max(calc(170px * -1), calc(21vw * -1));bottom: max(calc(30px * -1), calc(20vw * -1));transform: scale(-1, 1);}
.main_bg_box .sakana img{transition: 2s cubic-bezier(0.65, 0.05, 0.36, 1);animation: hor_swing 4s linear infinite;animation-timing-function: cubic-bezier(0.65, 0.05, 0.36, 1);}

@keyframes hor_swing {
    0% {transform: translateY(5%);}
    50% {transform: translateY(0);}
    100% {transform: translateY(5%);}
}

@media only screen and (max-width: 768px){
    .main_bg_box{background-image: url(../images/bg_sp.webp);}
    .main_bg_box .path_area{border-radius: 26px;}
}

/* border
------------------------------------------------------ */
.l-border { pointer-events: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 9999;}
.l-border__elm {position: absolute;}
.l-border__elm--bottom, .l-border__elm--top {height: 1vw;left: 1vw;width: calc(100% - 2vw);}
.l-border__elm--left, .l-border__elm--right {width: 1vw;top: calc(1vw - 1px);height: calc(100% - 2vw + 2px);}
.l-border__elm--top {top: 0;border-bottom: 1px solid #40210f;}
.l-border__elm--right {right: 0;border-left: 1px solid #40210f;}
.l-border__elm--bottom {bottom: 0;border-top: 1px solid #40210f;}
.l-border__elm--left {left: 0;border-right: 1px solid #40210f;}

@media only screen and (max-width: 768px){
.l-border__elm--bottom, .l-border__elm--top {height: 2vw; left: 2vw; width: calc(100% - 4vw);}
.l-border__elm--left, .l-border__elm--right {width: 2vw; top: calc(2vw - 1px); height: calc(100% - 4vw + 2px);}
}


/* =loading
/********************** loading *******************************/
#loading {position: fixed; top: 0; left: 0; display: block; width: 100%; height: 100%; background-color: #fff; z-index: 10001;}
#loading.is_loaded {display: none;}
#loading .loading_bg {position: absolute; top: 0; left: 0; width: 100%; height: 100vh; opacity: 1;background:#fff;}
#loading .logo {position: absolute; top: 50%; left: 50%; transform: translate(-50% , -50%); width: min(20%, 100px); height: auto;}
#loading .logo img{width: 100%; height: auto; animation:logo_anime 1.5s ease forwards; animation-fill-mode: both;}
#loading.open { animation: fade_out 0.8s ease forwards; pointer-events: none; animation-delay: 0.9s;}

@keyframes fade_out { 
	0% { filter: blur(0); opacity: 1; visibility: visible; transform: translateZ(0); }
	100% { filter: blur(10px); opacity: 0; visibility: hidden; transform: translateZ(0); } 
}
/* animation: fade_out 0.4s ease forwards; */

@keyframes logo_anime { 
	0% { transform: rotate(20deg); }
	25% { transform: rotate(-20deg); }
	50% { transform: rotate(20deg); }
	75% { transform: rotate(-20deg); }
	90% { transform: translateY(-60px); opacity: 1;}
	100% { transform: translateY(0); opacity: 0; } 
}
/* animation: logo_anime 0.4s ease forwards; */


.top_body{}
.top_body #fv .kv img{transform: scale(2.4) translateY(-5vw);opacity: 0;transition: 1.8s cubic-bezier(0.25, 0.1, 0, 1.1);}
.top_body #fv .main_tit img{transform: scale(1.6);opacity: 0;transition: 1.8s cubic-bezier(0.25, 0.1, 0, 1.1);}
.top_body #fv .txt_block .date{transform: scale(1.4);opacity: 0;transition: 1.6s cubic-bezier(0.25, 0.1, 0, 1.1);}
.top_body #fv .txt_block .place{transform: scale(1.4);opacity: 0;transition: 1.6s cubic-bezier(0.25, 0.1, 0, 1.1);}
.top_body #fv .txt_block .cast{transform: scale(1.4);opacity: 0;transition: 1.6s cubic-bezier(0.25, 0.1, 0, 1.1);}
.top_body header{transform: translateY(-120px);opacity: 0;transition: 1.8s cubic-bezier(0.25, 0.1, 0, 1.1);}

.top_body.open #fv .kv img{transform: scale(1) translateY(0);opacity: 1; transition-delay: 0.6s;}
.top_body.open #fv .main_tit img{transform: scale(1);opacity: 1; transition-delay: 0.8s;}
.top_body.open #fv .txt_block .date{transform: scale(1);opacity: 1; transition-delay: 0.9s;}
.top_body.open #fv .txt_block .place{transform: scale(1);opacity: 1; transition-delay: 1.0s;}
.top_body.open #fv .txt_block .cast{transform: scale(1);opacity: 1; transition-delay: 1.1s;}
.top_body.open header{transform: translateY(0);opacity: 1; transition-delay: 1.3s;}


/* =page fade
/********************** page fade *******************************/
#page_fade {position: fixed; top: 0; left: 0; display: block; width: 100%; height: 100%; z-index: 10000; opacity: 1; visibility: visible; transition: 0.2s;}
#page_fade .wave_box{position: absolute;top: 0;width: 51%;height: 120%;background: #ffd500;clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);transition: 0.6s;}
#page_fade .wave_box.left{left: 0;}
#page_fade .wave_box.right{right: 0;}
#page_fade.open {opacity: 0; visibility: hidden; transition: 1.0s;}
#page_fade.open .wave_box{}
#page_fade.open .wave_box.left{clip-path: polygon(0 0, 100% 0, 0% 100%, 0% 100%);left: -50%;transition: 1.0s;}
#page_fade.open .wave_box.right{clip-path: polygon(0 0, 100% 0, 100% 100%, 100% 100%);right: -50%;transition: 1.0s;}
@media only screen and (max-width: 768px){
	#page_fade .wave_box {}
}


/********************** header *******************************/
header{text-align:left;position:fixed;z-index:99;top:0;width:100%;}
header .head_logo{ float: left; margin: 12px 0 0 20px; width: 60px;}
header .head_logo img{ width:100%;}


.toggle_nav{ float:right;}
.nav ul{width: 100%;margin-right:1.5vw;display: flex;gap: 0 24px;align-items: center;}
.nav li {}
.nav li a{color: #000;font-size: 18px;font-weight: bold;line-height: 3em;font-family: var(--font03);padding: 0;display: block;letter-spacing: -0.1em;}
.nav li a span{display: block;font-size: 0.4em;font-weight: 600;line-height: 1em;text-align: center;position: relative;top: -8px;}
.nav li a:hover,
.nav li a.active{ color:var(--keyc);}
.nav li a.non_active{ color:#666; cursor: inherit;}
.nav li.twittr{/* padding: 20px 12px; */}
.nav li.twittr img{width: 30px;}
.nav li.twittr a{/* padding: 0px 12px !important; */line-height: 1em;}

.nav li.twittr a:hover,
.nav li.twittr a.active{ background:none; opacity:0.8;}

.nav_trigger{display: none;}


@media only screen and (max-width: 1250px){
.nav li{}
.nav li a{ font-size: 1.4vw;}
}

@media only screen and (max-width: 1180px){
header{position: fixed !important;right: inherit !important;left: 0;z-index: 9999;}
header .head_logo{width: 36px;margin: 16px 0 0 18px;}
header .head_logo img{ width: 100%;}

header nav li.sns{ display: flex; margin-top: 5vw;}
header nav li.sns a{ width: auto; margin-right: 2vw;}
header nav li.sns img{ height: 40px;}
header nav li a span{ text-align: left;}

.global{width:100%;position:fixed;z-index: 10;top:0;left:0;overflow-y: hidden;padding-top:0;height: 100vh;background-color: #fbf9e0;box-sizing: border-box;-webkit-transition: 1s ease;-moz-transition: 0.5s ease;-o-transition: 0.5s ease;-ms-transition: 0.5s ease;transition:0.5s ease;overflow-y: scroll;display: block;opacity: 0;visibility: hidden;flex-direction: column;}
.global li{width: 100%;display:inherit;padding: 0 0 0 12vw;text-align: left;}
.nav-active .global{padding-top: 40px;opacity: 1;visibility: visible;}
.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 li{}
.nav li:first-child{}
.nav li a:hover,nav li a.at{  border-bottom: none;}
.nav li a{width:100%;max-width:inherit;text-align:center;padding: 1.4vw 0;font-weight:bold;display: block;text-align: left;font-size: 20px;}
.nav li a span{ text-align: left;}
.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.active{}

.nav li.twittr{ padding: 0 0 0 12vw;}
.nav li.twittr img{}
.nav li.twittr a{ padding: 15px 0 !important;}

/* Default navigation icon */
.nav_trigger {display: block;position: fixed;width: 30px;height: 25px;right: 5vw;top: 14px;z-index: 200;line-height:1;}
.nav_trigger:after{position: absolute;content: "メニュー";width: 42px;height: 13px;bottom: -12px;left: -4px;transition: 0.2s;font-family: var(--font03);font-weight: 900;font-size: 12px;white-space: nowrap;letter-spacing: -0.15em;color: var(--keyc);}
.nav-active .nav_trigger { opacity: 0.7;}
.nav-active .nav_trigger:after{opacity: 0;}
.nav_icon {display: inline-block;position: relative;width: 30px;height: 2px;background-color: transparent;-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: 4px;position: absolute;background: var(--keyc);-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;border-radius: 50px;}
.nav_icon:before {margin-top: -6px;}
.nav_icon:after {margin-top: 2px;width: 30px;right: 0;}
.nav-active .nav_icon {background: rgba(0, 0, 0, 0);}
.nav-active .nav_icon:before {margin-top: 0;-webkit-transform: rotate(135deg);transform: rotate(135deg);background: var(--keyc);}
.nav-active .nav_icon:after {margin-top: 0;-webkit-transform: rotate(45deg);transform: rotate(45deg);background: var(--keyc);width: 30px;}
}


/* =foot
-----------------------------------------------------------------------------------------*/
footer{padding: 6vw 0;font-size:12px;position: relative;}
footer small{line-height: 1.5em;font-size: 12px;}

footer .bnr_box{ margin-bottom: 50px; font-size: 0; line-height: 0;}
footer .bnr_box li{display: inline-block;margin: 0 6px;width: 22%;max-width: 202px;}
footer .bnr_box li img{width:100%;border: 1px solid #e3e3e3;}


@media only screen and (max-width: 768px){
    footer{padding: 30px 0 80px;font-size:12px;line-height:1.5em;width: 90%;margin: 0 auto;}
    footer .bnr_box li{ width:47%; margin:0 1% 2%;}
    footer .bnr_box li a{}
    footer .bnr_box li img{}
}



/* =ページトップ
------------------------------------------------------------------------------------------*/
.page_top{text-align: right;margin: 0;  width:80px;  text-align:center;position:fixed; right:30px; bottom:40px;  z-index:10}
.page_top a{background-color:#c3a368; display:block;border-radius: 50%;height:80px; width:80px; line-height:80px; color:#fff; font-family: 'Oswald';font-size:12px;}
.page_top a:hover{background-color:#d1b582; text-decoration:none;}



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



/* =video
------------------------------------------------------ */
#bgvid {
 position: fixed; bottom: 0; right:0; width: 100%; z-index: -1; mix-blend-mode: screen; opacity: 0.8; 
}
@media only screen and (max-width: 768px){
#bgvid { width: auto; height: 100%; bottom: 0; opacity: 0.5;}
}

@media all and (-ms-high-contrast: none) {
#bgvid{ bottom: 0; opacity: 0.06;}
}



/* = 404
------------------------------------------------------------------------------------------*/
.error_404{ max-width: 470px; width: 94%; margin: 270px auto;}
.error_404 .stit{ font-size: 64px; font-weight: 400; letter-spacing: 0.05em; margin-bottom: 34px; line-height: 1em; text-align: center;}
.error_404 p{ font-size: 14px; line-height: 1.5em; text-align: left;}
.error_404 .btn a{display: block;background-color: #e65087;padding: 0.75em 1em;color: #fff;text-align: center;line-height: 1em;}

@media (max-width: 768px){
.error_404{ margin: 160px auto;}
.error_404 .stit{ font-size: 40px; margin-bottom: 24px;}
.error_404 p{ font-size: 13px; text-align: left;}
}

/* = parallax
------------------------------------------------------------------------------------------*/

.fadeInUp {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1.5s;
 -ms-animation-duration:1.5s;
 animation-duration:1.5s;

 -webkit-animation-name: fadeInUp;
 animation-name: fadeInUp;
 visibility: visible !important;
}
@-webkit-keyframes fadeInUp {
 0% { opacity: 0; -webkit-transform: translateY(100px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInUp {
 0% { opacity: 0; -webkit-transform: translateY(100px); -ms-transform: translateY(100px); transform: translateY(100px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}



.fadeInRight {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1.5s;
 -ms-animation-duration:1.5s;
 animation-duration:1.5s;
 -webkit-animation-name: fadeInRight;
 animation-name: fadeInRight;
 visibility: visible !important;
}
@-webkit-keyframes fadeInRight {
 0% { opacity: 0; -webkit-transform: translateX(30px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInRight {
 0% { opacity: 0; -webkit-transform: translateX(30px); -ms-transform: translateX(30px); transform: translateX(30px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}

.fadeInDown {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1.5s;
 -ms-animation-duration:1.5s;
 animation-duration:1.5s;
 -webkit-animation-name: fadeInDown;
 animation-name: fadeInDown;
 visibility: visible !important;
}
@-webkit-keyframes fadeInDown {
 0% { opacity: 0; -webkit-transform: translateY(-50px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInDown {
 0% { opacity: 0; -webkit-transform: translateY(-50px); -ms-transform: translateY(-50px); transform: translateY(-50px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}

.fadeInLeft {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1.5s;
 -ms-animation-duration:1.5s;
 animation-duration:1.5s;
 -webkit-animation-name: fadeInLeft;
 animation-name: fadeInLeft;
 visibility: visible !important;
}
@-webkit-keyframes fadeInLeft {
 0% { opacity: 0; -webkit-transform: translateX(-20px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInLeft {
 0% { opacity: 0; -webkit-transform: translateX(-20px); -ms-transform: translateX(-20px); transform: translateX(-20px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}