@charset "UTF-8";

/*----- common -----*/
body { background-color: #fff; color: #333; font-family: 'Noto Sans JP', sans-serif; font-weight:400;font-size: 16px; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; }
button, input, select, textarea {font-family : inherit;font-size : 100%;}
img{max-width: 100%;height: auto;width /***/:auto;}


sub{font-size:0.7em;}
.t_center{text-align:center;}
.t_right{text-align:right;}
.t_left{text-align:left;}
.t_bold {font-weight: bold;}
.nowrap{white-space: nowrap;}


@media (max-width : 768px) {
  .pc {display: none;}
}
@media (min-width : 769px) {
  .sp{display: none;}
}


/*----- header -----*/
header{position:fixed;top:0;left:0;z-index:300;width:100%;height:55px;background: rgba(255,255,255,1.0);box-shadow: 0px 5px 8px -5px rgba(0,0,0,0.3);}
#header_inner{text-align: center;}
header #logo a{text-decoration:none;font-style:italic;color:#333;font-weight: 500;}
header #logo img{display:inline-block;margin-right:0.8rem;}
@media (max-width : 768px) {
header #logo img{height: 35px;padding-top: 18px;}
}
@media (min-width : 769px) {
	header #logo img{height: 50px;padding-top: 15px;}
}


#menu{position:absolute;top:0;right:15px; width:50px;height:50px;font-size: 12px;text-align: center;}
#menu span,#menu span::before, #menu span::after {display: block; position: absolute;content: '';
          height: 2px;background: #0a0a0a;
          transition: transform .5s;}
#menu span {width: 60%;top:55%;left: 20%;}
#menu span::before {width: 100%;top:-9px;left:0;}
#menu span::after {width: 100%;top:9px;left:0;} 
#menu.active span {background: rgba(255, 255, 255, 0);}
#menu.active span::before {top:0;transform: rotate(45deg);}
#menu.active span::after {top:0;transform: rotate(-45deg);}             

nav{position:fixed;top:0;right: 0; z-index:100;width:300px;height:100%; overflow: auto; 
  background-color: #f5f5f5;box-shadow: -5px 0px 10px -5px rgba(0,0,0,0.3);
  visibility: hidden; opacity: 0; transition: all .5s;transform-origin: right;transform: scaleX(0);}
nav.open{opacity: 1; visibility: visible;transform: scaleX(1);}

nav > ul{margin:80px 1.5em;}
nav > ul > li{line-height: 2.6em;}
nav > ul > li:hover{border-bottom:2px #ccc solid;}
nav > ul > li a{text-decoration:none;color:#000;font-weight: 700;}


/*----- footer -----*/
footer{width:90%;margin:80px auto 0;padding-top: 20px;border-top:1px solid #000;}
#footer_copy{width:100%;padding:10px 0 20px;text-align:center;color:#333;font-size:12px;line-height:1.6em;}


/*----- main visual -----*/
#main_visual{position: relative;}
.video-box {position: relative;overflow: hidden;width: 100%;height: 100vh;}
.video {object-fit: cover;width: 100%;height: 100%;}
@media (max-width: 768px){
  .video-box {height: calc(100vh - 100px);}
}
@media all and (-ms-high-contrast:none){
  .fitImg{position: absolute;}
  .video {width: auto;height: auto;}
}

.overlay::after {position: absolute;top: 0;left: 0;display: block;width: 100%;height: 100%;content: "";background: rgba(0, 0, 0, 0.3);}
.text-box {position: absolute;top: 50%;left: 50%;width: 100%;transform: translate(-50%, -50%);}
.main_visual_catch {font-family: 'Noto Serif JP', serif;font-size: 7.0vw;font-weight: 600;color: #fff;text-shadow: 0 0 10px rgb(0 0 0 / 40%);
                line-height: 2em;letter-spacing: 0.1em; padding: 0;text-align: center;}
@media (min-width:769px) {
  .main_visual_catch {font-size: 56px;}
}