@charset "utf-8";

*{ box-sizing: border-box;}

:root {
  --keyc:#fff;
  --keyc2:#fff;
  --font1:'Jost', 'Noto Sans JP', sans-serif;
}


/* =base
------------------------------------------------------------------------------------------*/
body {
	text-align: center;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.5em;
	color: #fff;
	margin: 0;
	min-height:100%;
	overflow-x: hidden;
	background-color:#000;
	/*
    -webkit-touch-callout:none; 
    -webkit-user-select:none; 	
	*/
}


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

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

html {overflow-y:scroll; height:100%;}
a {text-decoration: none;cursor: pointer;color:var(--keyc);outline:none;transition: 0.2s ease;}
a:link { text-decoration: none;}
a:hover { text-decoration: none;transition: 0.2s ease;}
a:active { text-decoration: none;}
a img { outline:none; transition: 0.2s ease;}
a:hover img {  opacity: .8;  -webkit-opacity: .8;  -moz-opacity: .8;  filter: alpha(opacity=80);  -ms-filter: "alpha(opacity=80)"; transition:0.3s;}


/********************** header *******************************/
header{text-align:left;position:fixed;z-index:99;top:0;width:100%;height: 50px;}
header.top{ opacity:1;}
header .head_logo{float: left;margin: 0;width: 150px; position: relative; z-index: 10; transition:0.3s;padding: 15px 0 0 2vw;}
header .head_logo img{ width:100%;}
header:before{display:block; content:''; height:0;  width:100%; position:absolute; top:-1px; left:0; transition:0.3s; background:rgba(255,255,255,0.5);}
header.on:before{ height: 100%;}

header.on .nav li ul li a{padding: 0;}
header.on .nav li:hover ul li a{padding: 20px 20px;}

.toggle_nav{ float:right;}
.nav ul{width: 100%;margin-right:2vw;display: flex;align-items: center;}
.nav li {display: flex;align-items: center; padding:0;position: relative;}
.nav li a{display:block;line-height:1em;font-size: min(14px,1.3vw);letter-spacing: 0.05em;color: var(--keyc);text-align:center;transition: all 0.3s ease;padding: 15px min(15px,1.2vw) 20px;font-style: normal;font-weight: bold;position:relative;line-height: 0;}
.nav li a:hover{ opacity: 0.9;}
.nav li.sns{ margin:0 0 0 10px;}
.nav li.sns img{width: 28px; transition: 0.2s ease;}
.nav li.sns a{padding:15px 0px 20px;}

.nav li a:after{content: "";position: absolute;width: 0;height: 1px;background-color: var(--keyc);right: 0;bottom: 0;transition: 0.2s ease;}
.nav li a:hover:after{ width: 100%;right:inherit;left: 0;}

.nav li.sns a:hover{ opacity:1;}
.nav li.sns a:hover:after{ display:none;}

.nav_trigger{display: none;}


@media only screen and (max-width: 768px){
	.nav_trigger{}
	
	.nav ul{ margin-right: 0;}
	.nav li a{}
	
	header .head_logo{ width: 80px; padding: 3vw 0 0 3vw;}

  .global{
    width: 0 !important;
    position:fixed;
    display: block;
    z-index:10;
    top:0;
    right: 0;
    padding-top: calc(1vw + 60px);
    overflow: hidden;
    height: 100svh;
    background-color: rgb(0 0 0 / 90%);
    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;
    opacity: 0;
    display: block !important;
    }
   .global li{width: 100%; display:inherit; }
   .nav-active .global{width: 100% !important;overflow: hidden;opacity: 1;}
   .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;
    margin: 0;}
   .nav{ margin-bottom:0; width:100%; height:inherit;}
   .nav li{margin-left: auto;margin-right: calc(1vw + 12px);}
   .nav li a:hover,nav li a.at{  border-bottom: none;}
   .nav li a{width:100%;text-align: right;color:var(--keyc);font-weight:400;line-height: 1.5em;display: block;white-space: nowrap;font-family: var(--font1);font-size: 5.5vh;padding: 0;padding-right: calc(3vw + 8px); letter-spacing: 0;}
    .nav li a:after{ display: none;}
   
   .nav li a:hover,
   .nav li a.active{color:#fff;background-color: #92dfb8ab;}
   
   .nav li ul{ width:100%; position:inherit; top:0; display: none; background:none;}
   .nav li ul li{ padding: 0; width: 100%; margin-bottom: 1px;}
   .nav li ul li a,
   .nav li:hover ul li a{ overflow:visible; line-height:1em;padding:5vw ; background-color: var(--keyc2); height: auto; font-size: 16px;}
	
	.nav li.sns{  margin: 0;   padding-right: calc(3vw + 8px); width: auto; float: right; padding-top: 1em;}
	.nav li.sns a{ padding: 0; font-size: 16px;}
	.nav li.sns img{ width: 32px;}
   
   /* Default navigation icon */
   .nav_trigger {display: block;position: fixed;width: 40px;height: 40px;z-index: 200;line-height:1;right: 3vw;top: 3vw;}
   .nav_trigger:hover{cursor: pointer;}
   .nav-active .nav_trigger { opacity: 0.7;}
   .nav_icon {display: inline-block;position: relative;width: 40px;height: 1px;background-color: var(--keyc);-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: 1px;position: absolute;background:var(--keyc);right: 0; -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: -10px;}
   .nav_icon:after { margin-top: 10px;}
   .nav-active .nav_icon { background: rgba(0, 0, 0, 0);}
   .nav-active .nav_icon:before {margin-top: 0;-webkit-transform: rotate(45deg);transform: rotate(225deg);}
   .nav-active .nav_icon:after {margin-top: 0;-webkit-transform: rotate(-45deg);transform: rotate(135deg);}
}


/* =foot
-----------------------------------------------------------------------------------------*/
footer{padding: 4vw 0;background-color: #00000052;}
footer .foot_staff{ font-size: 16px; font-weight: bold; line-height: 2em; margin-bottom: 30px;}
footer .foot_contact{ font-size: 14px;  line-height: 1.7em; margin-bottom: 30px;}
footer .foot_bnr{ display: flex; justify-content: center; margin-bottom: 40px;}
footer .foot_bnr li{ width: 50px; margin: 0 10px;}
footer .foot_bnr img{ width:100%;}

footer small{ font-size: 14px; line-height: 1.5em;}

@media only screen and (max-width: 768px){
    footer{ padding: 40px 5% ;}
    footer .foot_staff{  margin-bottom: 20px; font-size: 12px;}
    footer .foot_bnr{ margin-bottom: 20px;}    
    footer .foot_bnr li{ width: 45px;}
	footer small{ font-size: 12px; line-height: 1.5em; width: 94%; margin: 0 auto; display: block;}
}


/* modal */
.modal_layer {--modal_btn_size: clamp(50px, 5vw, 70px);position: fixed;top: 0px;left: 0;right: 0;bottom: 0;width: 100%;height: calc(100%);z-index: 11000;opacity: 0;visibility: hidden;pointer-events: none;transition: 0.2s}
.modal_layer .modal_bg {position: absolute;top: 0px;left: 0;right: 0;bottom: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.8)}
.modal_layer .modal_inner {position: absolute;width: auto;height: auto;top: 50%;left: 50%;transform: translateX(-50%) translateY(-50%);text-align: left}
.modal_layer .modal_inner img {width: auto !important;height: auto;max-width: min(1400px, 94vw);max-height: 75vh}
.modal_layer .modal_inner .yt_video_box {width: min(1200px, 94vw);padding-top: min(90vh, calc(100% * 1080 / 1920))}
.modal_layer .modal_inner .yt_video_box iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%}
.modal_layer .modal_inner .yt_video_box img {position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: contain}
.modal_layer .modal_inner .modal_textbox {width: min(1000px, 94vw);height: calc(75vh);background-color: #fcfcfc;padding: clamp(12px, 4vw, 50px);text-align: left;overflow: hidden;font-size: clamp(13px, 2vw, 16px);filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.1))}
.modal_layer .modal_inner .modal_textbox.scrollable {overflow-x: hidden;overflow-y: scroll;overscroll-behavior: contain}
.modal_layer .modal_close_btn {position: absolute;top: 4px;right: 4px;width: var(--modal_btn_size);height: var(--modal_btn_size);background: no-repeat center url("../images/svg/parts/btn_close_v02.svg");background-size: contain;cursor: pointer}
.modal_layer.op_modal {display: none}
.modal_layer.op_modal.is_active {display: block}
.modal_layer.visible {opacity: 1;visibility: visible;pointer-events: auto}

/* first popup */
.popup{position: fixed;width: 100%;height: 100lvh;top: 0;left: 0;background: #6c7a7a73;z-index: 10000;opacity: 0;}
.intro_on .popup{opacity: 1;transition:.6s;transition-delay: 0.5s;}
.intro_on .popup.del{pointer-events: none;opacity: 0;visibility: hidden;transition:.4s;}
.popup .img{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: min(1200px,96%);}
.popup .img img{max-height: 90vh;max-width: 100%;object-fit: contain;}
.popup .close{position: absolute;top: 0;right: 0;width: max(50px,5vw);cursor: pointer;}


/* =video
------------------------------------------------------ */
#bgvid {
 position: fixed; min-width: 100%;
    min-height: 100%; z-index: -1;  opacity: 0.33; 
    top: 50%; right:50%; transform: translate(50%,-50%);
    /*
    top: 50%; right:0%; transform: translate(0%,-50%);
    */
}
@media only screen and (max-width: 768px){
#bgvid { width: auto; height: 100%; bottom: 0;}
}

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


/* =ページトップ
------------------------------------------------------------------------------------------*/

.page_top{display:block; width:14vw; height: 2.8vw; /*background-color: rgba(255,255,0,0.5);*/ position:fixed;right:1vw;bottom:1vw;z-index:100;}
.page_top:hover{ cursor: pointer;}


@media only screen and (max-width: 639px){
.page_top{ right: 3vw; bottom: 2vw;height: 7vw;width: 20vw;}
}




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


@media all and (-ms-high-contrast: none) {
.nav li a{ transition:inherit;}
}

/************* ANIMATIONS ***************/

.anime{ position:relative; overflow:hidden; opacity:0;}
.play.blkin.spring:before{ background-color: #e65087; }
.play.blkin.summer:before{ background-color: #fabe00; }
.play.blkin.autumn:before{ background-color: #f0824b; }
.play.blkin.winter:before{ background-color: #1eafe6; }
@keyframes imageAnimation { 
  0% { opacity: 0; animation-timing-function: ease-in; }
  10% { opacity: 1; animation-timing-function: ease-out; }
  25% { opacity: 1; }
  37% { opacity: 0; }
  100% { opacity: 0; }
}

/* SLIDE BOX ANIMATION */
@keyframes play {
  from {transform: translateX(-100%);opacity: 0;}
  to {transform: translateX(0);opacity: 1;}
}
@keyframes maskOut {
  from {transform: translateX(0); }  
  to {transform: translateX(101%); }
}

.play.blkin { animation-name: play; animation-duration: .4s; animation-fill-mode: forwards; animation-timing-function: cubic-bezier(.8,0,.5,1); position: relative;}
.play.blkin:before { animation-name: maskOut; animation-duration: .4s; animation-delay: .4s; animation-fill-mode: forwards; animation-timing-function: cubic-bezier(.8,0,.5,1); content: ''; position: absolute; top: 0; left: 0; z-index: 1000; width: 100%; height: 100%; background: #666;}

.play.fade_up {animation-fill-mode:both; animation-duration:1.5s; animation-name: fadeInUp;visibility: visible !important;}

@-webkit-keyframes fadeInUp { 
    0% { opacity: 0; -webkit-transform: translateY(50px); } 
    100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInUp {
 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); }
}

.play.fade_in { animation-fill-mode:both; animation-duration:1.5s; animation-name: fadeIn; visibility: visible !important;}
@-webkit-keyframes fadeIn {
 0% { opacity: 0;}
 100% { opacity: 1;}
}
@keyframes fadeIn {
 0% { opacity: 0;}
 100% { opacity: 1;}
}