@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,500,700,900&display=swap&subset=japanese");
@import url("https://fonts.googleapis.com/css?family=Ropa+Sans:400,400i&display=swap");

/* base
------------------------------------------------------------*/
* { box-sizing: border-box;}
body { background: #efefef; font-family: 'Noto Sans JP', 'Ropa Sans', sans-serif;}

a,
a:hover { color: #333; text-decoration: none;}

img { vertical-align: top;}
img.full-img { width: 100%;}

/* header 
------------------------------------------------------------*/
header { position: fixed; top: 0; left: 0; right: 0; padding: 40px 40px 0; z-index: 10000;}
header .inner { position: relative; z-index: 10;}
header .inner h1 img { height: 40px; width: auto;}

header .inner nav { position: absolute; top: 0; right: 0; left: 0; text-align: right; z-index: 5;}
header .inner nav ul li { display: inline-block; opacity: .4; transition: all .5s;}
header .inner nav ul li:hover,
header .inner nav ul li.current { opacity: 1;}
header .inner nav ul li+li { margin-left: 30px;}
header .inner nav ul li a { display: block;}
header .inner nav ul li a img { height: 11px; width: auto;}

@media screen and (max-width: 767px){
header { padding: 20px 30px 16px; background: #efefef;}
header .inner h1 { font-size: 18px; display: inline-block; position: relative; z-index: 10;}
header .inner h1 img { height: 28px;}
header .inner nav { top: 50%; transform: translateY(-50%);}
header .inner nav ul li+li { margin-left: 15px;}
	
}
@media screen and (max-width: 320px){
header { padding: 30px 30px 0;}
header .inner nav ul li+li { margin-left: 15px;}
header .inner nav ul li a img { height: 8px;}
}

/* footer
------------------------------------------------------------*/
footer { position: fixed; bottom: 0; left: 0; right: 0; padding: 0 40px 40px;}
footer .inner { position: relative;}
footer .inner p img { height: 9px; width: auto;}
footer .inner ul { position: absolute; bottom: 0; right: 0; left: 0; text-align: right;}
footer .inner ul li { display: inline-block;}
footer .inner ul li+li { margin-left: 15px;}
footer .inner ul li img { height: 18px;}

@media screen and (max-width: 767px){
footer { padding: 0 30px 30px;}
}

/* bug
------------------------------------------------------------*/
.bug { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 10000; pointer-events: none; opacity: 0; transition: all .3s;}
.bug::after { content: ''; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; background: url("../img/elements/glitch3.gif") center center no-repeat; background-size: cover;}
.bug .inner-wrap { position: relative; z-index: 10; margin: 60px;}
.bug .inner-wrap p { color: #fff; font-size: 24px; font-weight: bold; letter-spacing: -1px;}
.bug .inner-wrap p+p { margin-top: 60px;}
.bug .inner-wrap p span { display: block; opacity: 0;}
.bug .inner-wrap p span+span { margin-top: 5px;}

.bug .inner-wrap p span:first-child { transition: all .5s;}
.bug .inner-wrap p span:first-child+* { transition: all .5s .8s;}
.bug .inner-wrap p span:first-child+*+* { transition: all .5s 1.6s;}
.bug .inner-wrap p span:first-child+*+*+* { transition: all .5s 2.4s;}
.bug .inner-wrap p span:first-child+*+*+*+* { transition: all .5s 3.2s;}
.bug .inner-wrap p span:first-child+*+*+*+*+* { transition: all .5s 4s;}
.bug .inner-wrap p.active span { opacity: 1;}
.bug .inner-wrap a { display: inline-block; width: 110px; height: 40px; line-height: 38px; text-align: center; background: #fff; margin-top: 30px; border-radius: 20px; font-weight: 600;}

body.onoff-10 .bug { opacity: 1; pointer-events: inherit;}

@media screen and (max-width: 767px){
.bug .inner-wrap { margin: 25px 20px 0 20px; padding-bottom: 30px;}
.bug .inner-wrap p { font-size: 18px;}
.bug .inner-wrap p+p { margin-top: 30px;}
}

/* MouseStoker
------------------------------------------------------------*/
html,body { cursor: none;}
a:hover,
label:hover,
button:hover { cursor: none;}
.cursor,
.follower { border-radius: 50%; position: absolute; top: 0; left: 0; pointer-events: none;}

.cursor { width: 8px; height: 8px; background-color: #000; z-index: 10002; position: relative;}
.cursor.is-active { background: none;}
.cursor.is-active::after { content: '→'; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
.cursor.is-active.back-active::after { content: '←';}

.follower { display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; width: 40px; height: 40px; background-color: rgba(253, 254, 0, 0.6); z-index: 10001; -webkit-transition: -webkit-transform ease .2s; transition: -webkit-transform ease .2s; transition: transform ease .2s; transition: transform ease .2s, -webkit-transform ease .2s; text-align: center;}
.follower span { display: inline-block; font-size: 14px; font-weight: bold; -webkit-transform: scale(0); transform: scale(0);}
.follower.is-active,
.follower.close-active { -webkit-transform: scale(3.5); transform: scale(3.5); background-color: rgba(253, 254, 0, 0.7);}