@charset "utf-8";

*{ box-sizing: border-box;}

:root {
  --keyc:#A13B00;
  --keyc2:#fff;
  --font1:"Yuji Syuku", "Noto Sans JP", serif;
  --font2:"Zen Antique Soft", "Noto Sans JP", serif;
}

@media print {
	body {
	  display: none; 
	}
  }
/* =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; 	
	*/
}
body:before{ content: ""; display: block; position: fixed; height: 100vh; width: 100%; 
	background-image: url("../images/bg/bg_pc.webp"); 
    background-repeat: no-repeat; 
	background-position: center; 
	background-size: cover; 
	z-index: -1; opacity: 0.8;}

body#top:before{ opacity: 1; }

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

.inbg:before{ }

.frame{position: fixed;width: 100%;height: 100dvh;top: 0;left: 0;border: 12px solid #000;z-index: 9996;pointer-events: none;}
.frame .left_bg{position: absolute;top: 0;left: 0;width: 22vw;}
.frame .right_bg{position: absolute;bottom: 0;right: 0;width: 17vw;}

@media only screen and (max-width: 768px){
    body:before{ height: 100%; background-image: url("../images/bg/bg_sp.webp"); }
    body:after{ opacity: 1;}
    body#top:before{ opacity: 1;}
    body#top:after{ opacity: 1;}
    
    .sp_only{display: initial;}
    .pc_only{display: none!important;}

	.frame{border: 6px solid #000;}
	.frame .left_bg{width: 42vw;}
	.frame .right_bg{width: 37vw;}
}

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;}
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:9999; top:0; width:100%; 
/*	background: linear-gradient(to bottom, rgba(23,11,25,0.5) 0%,rgba(23,11,25,0.5) 40%,rgba(23,11,25,0) 100%);*/
	background: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0) 100%);

}


header .headlogo{width: 7%;max-width: 70px;height: 100%;margin: 1.5vw 0 0 2vw;line-height: 0;float: left;}
header .headlogo a{ }
header .headlogo img{ width: 100%;}

.toggle_nav{ float:right;margin: 0.5vw 0 0 0;}
.global{ width: 100%; padding-right:2.2vw; display: flex;align-content: center;}
.nav li {padding:0; position:relative; }
.nav li a{display:block;line-height:1em;font-size: max(0.9vw,14px);color:#fff;text-align:center;transition: all 0.3s ease;padding: 1.3em 0.75em;font-weight: 100;position:relative;font-family: var(--font2);}
.nav li a:hover,
.nav li a.active{color: #ff5d00;}
.nav li.twittr{}
.nav li.twittr img{ width: max(1.5vw,20px);}
.nav li.twittr a{padding: 1.05em 0 0.75em 1.5em!important;}

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

.nav_trigger{display: none;}

header.in_head{ background-image:url(../images/in_nav_bg.png); background-repeat:repeat-x; padding-bottom:30px; }
header.in_head .head_wrap{ width:95%; max-width:1000px; margin:0 auto; position:relative;}
header.in_head .nav li a{ color:#fff;}
header.in_head h1{padding: 12px 0 0 0;position: absolute; top: 0px; left: 0; width: 260px;}
header.in_head h1 img{width: 100%;}
header.in_head .nav{}
header.in_head .nav ul{ margin-right:0;}
header.in_head .nav li a{ font-size:18px; padding:15px 12px 12px; }
header.in_head .nav li.twittr a{ padding:5px 0px 10px 7px!important;}

header.in_head h1.smaller { width:150px; padding-top:10px; }

/* sub nav */
.nav li ul{ position:absolute; top:max(3vw,42px); background-color:var(--keyc2); width:180px; display:block; left: 50%; transform: translate(-50%,0);}
.nav li ul li{ float:none; display:inherit;}
.nav li ul li a{ transition:0.25s; overflow:hidden; line-height:0; padding:0 1em;text-align:center; height: 0; color: var(--keyc); font-weight: bold; font-size: 16px;}
.nav li ul li a:hover{ background-color:var(--keyc);color:var(--keyc2);}
.nav li:hover ul li a{ overflow:visible; padding:15px 1em; line-height:1.4em; height:auto; text-align: center;}

@media only screen and (max-width: 768px){
	header {top:0;/* height:46px; */}
	header .headlogo {width: 12%;margin: 15px 0 0 4%;}	
	header .headlogo img{max-width: 100%; max-height: 100%;}

	header.in_head{ background-image:none;  }
	header.in_head .head_wrap{ width:100%;}
	header.in_head .nav li a{ color:#279abf;}
	header.in_head h1{padding: 6px 0 0 2vw;;position: inherit;}
	header.in_head h1 img{    width: 80px;}
	header.in_head .nav li a{ font-size:18px; padding: 6vw 0; }
	header.in_head .nav li a:hover,header.in_head .nav li a.active { background-color: rgba(0,0,0,0.9); color: #fff;}

	.nav li a span.btm{ display:none;}

	.global{width:100%; position:fixed; display: inherit;z-index:10; top:0; left:0; overflow-y: hidden; padding:0; height:0; background-color:#5e3a1ef2; 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; align-content: flex-start;}
	.global li{width: 100%; display:inherit; }
	.nav-active .global{ height:100vh;padding-top:46px;}
	.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{padding-right: 0;}
	.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:6vw 0; color:#fff; font-weight:500; font-size: 16px;}
	.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{color:#fff;background-color: var(--keyc);;}

	.nav li.twittr{ width:100%; margin-top:0;}
	.nav li.twittr img{ width:24px;}
	.nav li.twittr a{padding: 15px 12px !important;}

	.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;}
	
	/* Default navigation icon */
	.nav_trigger { display: block; position: fixed; width: 30px; height: 25px; right:4vw; top: 10px; z-index: 200; line-height:1;}
	.nav-active .nav_trigger { opacity: 0.7;}
	.nav_icon { display: inline-block; position: relative; width: 30px; height: 1px; background-color: #fff; -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: #fff; -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: -8px;}
	.nav_icon:after { margin-top: 8px;}
	.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);}
	.nav-active .nav_icon:after { margin-top: 0; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }

	.nav li a:hover span.btm,
	.nav li a.active span.btm{ display:none;}
	.nav li a span.jp{ font-size:3vw;}
}


/* =foot
-----------------------------------------------------------------------------------------*/
footer{position: relative; padding: 6vw 0 ;}
footer:after{position: absolute;content: "";background-image: url(../images/bg/parts_ft_pc.webp);background-position: center;background-repeat: no-repeat;background-size: contain;width: 30vw;height: 5vw;bottom: 0;right: 0;}
footer.in_page:after{display: none;}

footer .foot_bnr{ width: 100px; margin: 0 auto;}

footer .foot_staff{ font-size: 19px; font-weight: bold; line-height: 2em; margin-bottom: 30px;}
footer .foot_bnr{ display: flex; justify-content: center; margin-bottom: 30px;}
footer .foot_bnr li{ width: 150px;}
footer .foot_bnr img{ width:100%;}

footer .l_comic{position: absolute;width: min(280px, 20vw);bottom: 0;left: 0; z-index: 10;}
footer .r_comic{position: absolute;width: min(300px, 20vw);bottom: 3vw;right: 0; z-index: 10;}

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

@media only screen and (max-width: 768px){
    footer{padding: 20vw 0;}
	footer:after{background-image: url(../images/bg/parts_ft_sp.webp);width: 100vw;height: 14vw;}

    footer .foot_staff{  margin-bottom: 20px; font-size: 15px;}
    footer .foot_bnr{ margin-bottom: 20px;}    
    footer .foot_bnr li{ width: 120px;}

	footer .l_comic{width: 33vw;}
	footer .r_comic{width: 26vw;bottom: 18vw;right: 0;}

	footer small{ font-size: 12px; line-height: 1.5em; width: 94%; margin: 0 auto; display: block;}
}


/* =video
------------------------------------------------------ */
#bgvid {
 position: fixed; bottom: 0; left:0; min-height: 100%;  z-index: -1; mix-blend-mode: screen; opacity: 0.1; 
}
@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{text-align: right;margin: 0;text-align:center;position:fixed;right: 20px;bottom:20px;z-index: 9997;transition: 1s;}
.page_top a{display:block; width:8vw; line-height:0; margin-top: 0.5vw;}
.page_top a img{ width:100%;}
.page_top a:hover img{ opacity:0.9; }



.page_top.in{ bottom:-300px;}


@media only screen and (max-width: 639px){
.page_top{ right:4vw; bottom:4vw; display: flex;}
.page_top a{ width:24vw; margin-top: 0; margin-right: 1vw;}

.page_top.in{ bottom:-40vw;}
}

/* =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: #333;}

.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;}
}


/*-- list style --*/
:root {--cmn_list_color: var(--keyc);}
ul {
	&.cmn_list_circle , &.cmn_list_kome , &.cmn_list_asterisk  { 
		li {position: relative; display: block; margin-bottom: 0.5em; padding-left: 1.2em;
			&:last-of-type {margin-bottom: 0;}
		}
	}
	&.cmn_list_circle {
		li {
			&::before {position: absolute; display: block; content: ""; top: 0; left: 0; width: 1em; height: 1em; transform: translateY(0.3em) scale(0.4); background-color: var(--cmn_list_color); border-radius: 9999px;}
		}
	}
	&.cmn_list_kome {
		li { padding-left: 1.2em; font-size:0.95em; line-height:1.4em;
			&::before {position: absolute; display: block; content: ""; content: "※"; top: 0; left: 0; width: 1em; height: 1em; transform: translateY(0em); color: var(--cmn_list_color); background: initial;}
		}
	}
	&.cmn_list_asterisk {
		li { padding-left: 0.8em; font-size:0.95em; line-height:1.4em;
			&::before {position: absolute; display: block; content: ""; content: "*"; top: 0; left: 0; width: 1em; height: 1em; transform: translateY(0em); color: var(--cmn_list_color); background: initial;}
		}
	}
	&.cmn_list_underline {
		li { line-height:1.4em; border-bottom: 1px solid var(--cmn_list_color); padding-top: 0.8em; padding-bottom: 0.8em; margin-bottom: 0;
			&::before {position: absolute; display: block; content: ""; top: 0; left: 0; width: 1em; height: 1em; transform: translateY(calc(0.3em + 0.8em)) scale(0.4); background-color: var(--cmn_list_color); border-radius: 9999px;}
		}
	}
}
/*-- list style --*/