@charset "UTF-8";

:root {

/*color*/	
 --color-01:#00134D;
 --color-02:#FFD700;/* strong*/
 --color-03:#ffffff;
 --color-04:#000000;
	
 --base-font-color:#ffffff;
	
 --link-font-color:#FFD7CC;
 --link-font-hover-color:#ffffff;
	
 --background-color:#000;

/*  contents width*/
  --pc-contents-width:95%;
  --sp-contents-width:90%;
	
  --width-default:1200px;
  --width-wide:1400px;
  --width-small:1000px;

/*font size*/	
  --14px: 0.875rem;
  --15px: 0.9375rem;
  --16px: 1rem;
  --17px: 1.0625rem;
  --18px: 1.125rem;
  --19px: 1.1875rem;
  --20px: 1.25rem;
  --21px: 1.3125rem;
	
  --font-size-large: clamp(1rem, 0.818rem + 0.91vw, 1.5rem);
  --font-size-default:clamp(0.95rem, 0.895rem + 0.27vw, 1.1rem);
  --font-size-default2: clamp(0.9rem, 0.864rem + 0.18vw, 1rem);
	
  --font-size-small: clamp(0.8rem, 0.764rem + 0.18vw, 0.9rem);
}
*{margin:0; padding:0;box-sizing:border-box;}
@font-face{
 font-family:"impossible_s";
 src:url("IMPOS-30.ttf");
 }
@font-face{
 font-family:"impossible_l";
 src:url("IMPOS10.ttf");
 }
@font-face{
 font-family:"notosanscjk";
 src:url("NotoSansCJK-wght-400-900.ttf.ttc");
 }

*{
 margin:0;padding:0;
 }
 
html {
	margin: 0;
	padding: 0;
	scroll-behavior: smooth;
	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-weight:400;
	font-style:normal;
}

body {
	margin: 0;
	padding: 0;
	color: var(--base-font-color);
	background-color: var(--background-color);
	font-weight: var(--font-weight-normal);
	font-style: normal;
	font-family: var(--base-font-family);
	font-size: var(--font-size-default); 
	overflow-x: scroll;
	 letter-spacing: 0.00rem; 
	
	/*font表示最適化 ON*/
	-webkit-font-smoothing: subpixel-antialiased;
	-moz-osx-font-smoothing: auto;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	text-shadow: 0px 0px;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-ms-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
	scroll-padding-top:40px;
}
body.fixed{
 overflow:hidden;
 }
body.fixed button{
 }
:target{scroll-margin-top:40px;}

a{
	color: var(--link-font-color);
 }
header{
   height:40px;
 }
main{
 position:relative;
 }
#mainvisual{
 text-align :center;
 }
#mainvisual img{
 width:100%;
 }
.youtube{
 height:70vh;
 aspect-ratio:16 / 9;
 margin:0 auto;
 opacity:1;
 max-width:100%;
 }
.youtube iframe{
 width:100%;
 height:100%;
 opacity:1;
 }
dialog{
  position: fixed;
  top:0;
  left:50%;
  transform: translate(-50%,0);
  margin:15px auto;
  padding:1em 0 0 0;
  z-index:10;
 }
dialog::backdrop {
    background-color: rgba(0, 0, 0, 0.8); /* 半透明の黒で背景を暗転 */
}
dialog form{
 text-align:center;
 margin-top:1em;
 padding:0.5em 0;
 }
button.closemodal{
 background-color:#000;
 color:#fff;
 padding:1em 5em;
 border:1px solid #fff;
 cursor:pointer;
 }
footer{
 text-align :center;
 margin:10vw 0 3vw 0;
 }
footer ul{
 width:calc(90%);
 margin:1em auto;
 text-align:left;
 list-style:square;
 }

#information dl{
 display:flex;
 flex-wrap:wrap;
 gap:1vw 0vw;
 margin:0 auto;
 padding:0;
 width:90vw;
 
 }
header nav{
 position:fixed;
 background-color:#222;
 height:40px;
 z-index:5;
 width:100%;
 }
header nav >div{
 position:absolute;
 right:0;
 }
header nav ul{
 overflow-x: visible;
 overflow-y: hidden;
 display:flex;
 list-style:none;
 width:100%;
 gap:1vw;
 margin-top:10px;
 padding-right:25px;
 }
header nav ul li{
 margin-left:1em;
 }
header nav #home{
 padding:1vw;
 display:none;
 position:absolute;
 z-index:10;
 }
header nav #home.show{
 display:inline-block;
 }
body.song header nav #home{
 display:inline-block;
 }
header nav #home img{
 width:70px;
 }
header nav ul a{
 text-decoration:none;
 color:#fff;
 font-family:"impossible_l";
 font-size:20px;
 font-style:italic;
 }
#information dl dt{
 width:20vw;
 padding:0.5vw;
 margin:0;
 background-color:#333;
 }
#information dl dd{
 width:25vw;
 padding:0.5vw;
 background-color:#111;
 }
a.btn{
 text-decoration:none;
 background-color:#c00;
 color:#fff;
 padding:0.5em 5em;
 }
section > h1{
 background-image:url("../img/h1bg.jpg");
 background-repeat:no-repeat;
 font-family:"impossible_l";
 font-size:40px;
 padding:1vw;
 margin:1em 0;
 opacity:0;
 transform: translateX(-100%);
 }
section#song > h1{
 font-size:24px;
 }
.slideAnimeLeftRight {
	animation-name:slideTextX100;
	animation-duration:0.8s;
	animation-fill-mode:forwards;
    opacity: 0;
}

@keyframes slideTextX100 {
  from {
	transform: translateX(-100%);
    opacity: 0;
  }

  to {
	transform: translateX(0);
    opacity: 1;
  }
}
#steamlink{
 margin-top:-15px;
 text-align:center;
 }
#steamlink a{
 background-color:#72AD21;
 color:#fff;
 padding:5px 20px;
 text-decoration:none;
 border-radius:10px;
 }

#news .slick,#media .slick,#system .slick{
 list-style:none;
 margin:2% auto;
 padding:0.5vw;
 background-color:#222;
 width:calc(100% - 50px);
 }
#news .slick li,#media .slick li,#system .slick li{
 width:400px;
 border:1px solid #222;
 }
#news .slick li img,#media .slick li img,#system .slick li img{
 width:100%;
 }
#news .slick li span,#media .slick li span,#system .slick li span{
 display:block;
 }
#news .slick li span.date{
 padding:0.3vw 0.3vw 0 0.3vw;
 }
#news .slick li span.txt,#media .slick li span.txt{
 padding:0.3vw;
 }
#media .slick li span.txt,#system .slick span.txt{
 text-align:center;
 }
#news .slick li a,#media .slick li a,#system .slick li button{
 text-decoration:none;
 color:#fff;
 font-size:0.8em;
 }
#news .slick li a:hover,#media .slick li a:hover,#system .slick li button:hover{
 filter: brightness(150%);
 }

dialog form.close{
  position:sticky;
  bottom:0;
  background-color:#000;
  opacity:0.8;
 }

#media dialog{
 width:100%;
 background:rgba(0,0,0,0.8);
 }
span.ruby{
 display:inline-block;
  height:1em;
  vertical-align: top;
 transform: translateY(0.1em);
 }
ruby{
  height:1em;
  display:flex;
  flex-direction:column-reverse;
  justify-content:center;
  align-items:center;
}
rb{line-height:1em;}
#story{
 position:relative;
 }
#story > div > h2{
 position:absolute;
 z-index:1;
 }
#story > div > h2 > img{
 width:48vw;
 opacity:0;
 }
.slideopacity {
	animation-name:opacity100;
	animation-duration:0.8s;
	animation-fill-mode:forwards;
    opacity: 0;
}

@keyframes opacity100 {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
#song > div{
 width:96vw;
 margin:0 auto 2em auto;
 }
#googleplay > h1{
 font-size:1em;
 }
#googleplay > div{
 width:96vw;
 margin:0 auto 2em auto;
 }
#googleplay > div > p{
 margin-bottom:1em;
 }
.googleplay form{
 margin:1em auto;
 display:flex;
 flex-direction:column;
 align-items:center;
 gap:1em;
 }
.googleplay form table{
 margin:1em;
 }
#story > div{
 width:96vw;
 height:40vw;
 margin:0 auto 2em 0;
 }
#story > div > div{
 padding:2vw;
 z-index:2;
 position:relative;
 text-shadow:#000 1px 0 5px;
 line-height:2em;
 }
#story > div.spider > div{
 margin-left:29vw;
 }
#story > div.spider > div > p{
 margin:1em 0;
 }
#copyright{
 margin-top:3em;
 }

#series > div{
 width:96vw;
 margin:0 auto 2em auto;
 line-height: 2em;
 }

section#form > h1{
 font-size:24px;
 }
#form >div{
 width:90vw;
 margin:1em auto;
 }
#form table{
 border-collapse:collapse;
 margin:1em auto;
 width:90%;
 border:1px solid #fff;
 }
#form table tr{
 border:1px solid #ddd;
 }
#form table td,#form table th{
 padding:1em;
 border:1px solid #ddd;
 }

#form input[type="submit"]{
 background-color:#900;
 padding:10px 30px;
 color:#fff;
 border:1px solid #000;
 }
form input.btn{
 background-color:#900;
 padding:10px 30px;
 color:#fff;
 border:1px solid #000;
 }
form textarea{
  width:100%;
  height:10em;
  }

form p.button{
 text-align:center;
 }

ul.flex{
 width:96vw;
 display:flex;
 justify-content:center;
 gap:1vw;
 list-style:none;
 margin:1vw auto;
 }
ul.flex li a img{
 max-width:100%;
 }
.confirm{
 border:none;
 color:#fff;
 background-color:#000;
 }
.hidden{
 display:none;
 }
#character dialog{
 width:100%;
 background:rgba(0,0,0,0.8);
 }
.charabox{
 display:flex;
 gap:1em;
 color:#fff;
 scroll-snap-align:start;
 }
.charabox h3{
 margin-top:1em;
 }
.charabox .cvcomment{
 font-size:0.8em;
 }
ul.chara{
 gap:1em;
 margin:0 1em;
 list-style:none;
 list-style:none;
 margin:2% auto;
 padding:0.5vw;
 width:calc(100% - 50px);
 }
ul.chara li{
 width:100px;
 }
.cbtn{
 width:100%;
 background-color:transparent;
 border:none;
 color:#fff;
 cursor:pointer;
 position:relative;
 display:block;
 }
.cbtn img{
 width:100%;
 margin:auto auto;
 }
.cbtn span{
 width:90%;
 display:block;
 text-align:center;
 position:absolute;
 bottom:0.5em;
 padding:3px;
 margin:0 5%;
 background: linear-gradient(rgba(220,59,27,1), rgba(135,14,37,1));
 font-size:1.2em;
 border-radius:1em;
 }

.charabox h2{
 padding:0.5em 0;
 border-bottom:1px solid #fff;
 }
.charabox .txt{
 flex:1;
 }
.charabox >.img{
 width:40%;
 position:relative;
 }
.charabox >.img .img{
 width:100%;
 }
.charabox .img img{
 max-width:100%;
 object-fit:cover;
 }
#character .cv{
 position:absolute;
 text-align:center;
 bottom:3em;
 width:100%;
 }
button.listen{
 display:flex;
 gap:1em;
 align-items:center;
 font-size:1.2em;
 color:#fff;
 border-radius:1em;
 border:none;
 padding:0.5em 2em 0.5em 3em;
 margin:0 auto;
 cursor:pointer;
 background: linear-gradient(rgba(230,20,143,1), rgba(220,27,54,1));
 }
button.listen span{
 line-height:1em;
 }
button.listen::after{
 content:"";
 display:inline-block;
 background-image:url("../img/speaker-svgrepo-com.svg");
 background-repeat:no-repeat;
 background-size:1em;
 width:1em;
 height:1em;
 right:0.5em;
 }
.catch{
  margin:0.5em 0;
  line-height: 1.6;
  color: #ffffff;
  font-size: 1.5em;
  text-shadow: 0px 0px 10px rgba(240, 198, 16, 1);
  font-weight: bold;
 }
.excerpt{
 }
.movemodal{
 display:flex;
 justify-content:center;
 align-items:center;
 background-color:#222;
 width:2em;
 color:#fff;
 border:1px solid #ccc;
 font-size:1.5em;
 cursor:pointer;
 }
#about > div{
 width: calc(100% - 50px);
 margin: 2% auto;
 }
#about > div > p{
 margin:1em;
 }
#about > div > h2{
 border-bottom:2px solid #900;
 margin-bottom:1em;
 }
#about > div > h3{
 color:#da3a1b;
 }
#music > h2{
 margin:0 1em;
 border-bottom:1px solid #fff;
 }

#music > p{
 margin:1em;
 }
#music >div{
 margin:1em;
 display:flex;
 }
#music dl{
 display:flex;
 margin:1em 0;
 gap:1em;
 border:1px solid #fff;
 padding-right:1em;
 width:50%;
 }
#music .txt dl{
 width:100%;
 }
#music dl dt{
 width:30%;
 background-color:#fff;
 color:#000;
 padding:1em;
 }
#music dl dd{
   width:calc(70% - 1.5em);
 padding:1em 0;
 }
#music dl dt span{
 display:block;
 }
#music dl dt .en{
 font-size:0.6em;
 }
#music dl dd{
 font-size:0.8em;
 }
#music table{
 border-collapse:collapse;
 width:calc(100% - 2em);
 margin:1em;
 }
#music table tr{
 border-bottom:1px dotted #fff;
 }
#music table th{
 background-color:#fff;
 color:#000;
 border:1px dotted #000;
 }
#music table td{
 border:1px dotted #fff;
 }
#music table th,#music table td{
 padding:5px;
 }
#music table td.sample{
 text-align:center;
 }
#music a.sample {
  cursor: pointer;
  font-weight: normal;
  font-size: 14px;
  color: #fff;
  padding: 2px 10px 2px 22px;
  background-color: #a90329;
  background: url("../img/i_cv.png"), -moz-linear-gradient(rgba(230,20,143,1), rgba(220,27,54,1));
  background: url("../img/i_cv.png"), -webkit-linear-gradient(rgba(230,20,143,1), rgba(220,27,54,1));
  background: url("../img/i_cv.png"), (rgba(230,20,143,1), rgba(220,27,54,1));
    background-position-x: 0%, 0%;
    background-position-y: 0%, 0%;
    background-repeat: repeat, repeat;
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6148f', endColorstr='#dc1b36',GradientType=0 );
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  background-repeat: no-repeat;
  background-position: 10% center;
}
#system > p{
 margin: 1em;
 }

#system .slick li > button{
 width:98%;
 }
#system .slick li > button > img{
 margin-bottom:15px;
 }
#system .cbtn span{
 bottom:0;
 }

#system dialog{
 width:100%;
 background:rgba(0,0,0,0.8);
 }
#system .charabox > .img{
 width:60%;
 }
#system .charabox > .img img{
 border:1px solid #333;
 }
#system .charabox > .excerpt{
 display:flex;
 width:40%;
 align-items:center;
 }
#download h2{
 margin:0 1em;
 border-bottom:1px solid #fff;
 }

#download   p{
 margin:1em;
 }
#download  >div{
 margin:1em;
 display:flex;
 }
#download  ul{
 margin:1em 2em;
 }
#download  dl{
 margin:1em;
 width:calc(100% - 2em);
 border:1px solid #fff;
 }
#download  dl dt{
 background-color:#fff;
 color:#000;
 padding:0.5em;
 }
#download  dl dd{
 padding:1em 0;
 font-size:0.8em;
 }
#download  dl dd ul{
 display:flex;
 gap:3em;
 }
ul.actionbox {
 width:calc(100% - 2em);
 position:absolute;
 margin-top:-50px;
 display:flex;
 gap:1em;
 list-style:none;
 margin:-50px 1em 0 1em;
 justify-content:end;
 }
ul.actionbox li a{
 display:flex;
 width:100px;
 height:100px;
 border-radius:50px;
 background: linear-gradient(rgba(220,59,27,1), rgba(135,14,37,1));
 align-items:center;
 justify-content:center;
 color:#fff;
 text-decoration:none;
 font-size:12px;
 }
#result div{
 display:flex;
 justify-content:center;
 align-items: flex-start;
 gap:20px;
 flex-wrap:wrap;
 }
#result table{
 width:calc(50% - 20px);
 border-collapse:collapse;
 margin:1em;
 border:1px solid #333;
 }
#result th{
 text-align:center;
 padding:5px;
 width:200px;
 border:1px solid #333;
 background-color:#fff;
 color:#000;
 }
#result td{
 padding:5px;
 border:1px solid #333;
 }
#meeting  h1{
 font-size:1em;
 }
#meeting  h2{
 font-size:1em;
 border-bottom:1px solid #fff;
 margin:2em 0;
 }
#meeting  .meeting{
 margin:2em 0;
 }
#meeting > div{
 width:96vw;
 margin:0 auto 2em auto;
 }
#meeting > div > p{
 margin-bottom:1em;
 }

dl.meeting{
 display:flex;
 flex-wrap:wrap;
 gap:10px;
 }
dl.meeting dt{
 width:60px;
 }
dl.meeting dt img{
 border-radius:10px;
 }
dl.meeting dd{
 width:calc(100% - 70px);
 border-radius:10px;
 background-color:#222;
 padding:10px;
 position:relative;
 }
dl.meeting dd::before{
 content:"";
 width:8px;
 height:8px;
 transform: rotate(45deg);
 background-color:#222;
 display:inline-block;
 position:absolute;
 left:-5px;
 top:10px;
 }
.col2{
 display:flex;
 justify-content:space-between;
}
.col2 >*{
 width:48%;
}
.col2 .img a{
 display:block;
 width:100%;
 text-align:center;
 }
.col2 .img a img{
 width:100%;
 }
@media screen and (max-width: 1000px) {
 .col2{
  display:block;
 }
 .col2 > *{
  width:100%;
 }
 #steamlink{
  margin-top:-15px;
  font-size:0.9em;
  }
 #steamlink a{
  padding:3px 20px;
  }
 #story > div{
   height:auto;
   }
 #story > div > div{
   height:auto;
   padding:0 2em;
   }
 #story > div > h2{
  position:static;
  display:inline-block;
  z-index:1;
  }
 #story > div.spider > h2{
  float:left;
  }
 #story > div.cuckoo > h2{
  float:right;
  }
 #story > div.spider > div{
  margin-left:0;
  }
 #story > div.cuckoo > div{
  margin-right:0;
  }
 #music >div{
  display:block;
  }
 #music dl{
  width:100%;
  }
 #system .charabox > .img{
  width:100%;
  }
 #system .charabox > .excerpt{
  width:100%;
  }
 #download >div{
  display:block;
  } 
 #download  dl dd ul{
  display:block;
  }
 }
ul#distributor{
 display:flex;
 list-style:none;
 flex-wrap:wrap;
 width:96%;
 margin:1em auto;
 }
ul#distributor li{
 width:180px;
 list-style:none;
 margin-right:10px;
 margin-bottom:10px;
 }
ul#distributor li a{
  width: 180px;
  display: block;
  text-align: center;
  background-color: #fff;
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  padding: 10px 15px 5px 15px;
  border: 1px solid #ccc;
  background: rgb(135,14,37);
  background: linear-gradient(0deg, rgba(135,14,37,1) 35%, rgba(220,59,27,1) 42%, rgba(255,255,255,1) 47%);
}
ul#distributor li a span.icon{
 width:150px;
 height:30px;
 display:inline-block;
 background-repeat:no-repeat;
 background-position:center center;
 background-size:contain;
 color:transparent;
 margin-bottom:15px;
 }
div.qa{
 border:3px double;
 margin:1em 0;
 padding:1em;
 }
dl.qa dt{
 margin-top:1em;
 border-bottom:1px solid;
 margin-bottom:0.5em;
 }
ul.lang{
 margin-top:1em;
 display:flex;
 justify-content:center;
 gap:1em;
 list-style:none;
 }
ul.lang li{
 position:relative;
 }
ul.lang li::before{
 content:"-";
 position:absolute;
 left:-0.7em;
 }
ul.lang li:first-child::before{
 content:none;
 }
.magazine{
 text-align:center;
 margin-bottom:2em;
 }
.magazine a{
 display:block;
 color:#fff;
 text-decoration:none;
 }
.magazine img{
 margin:1em auto;
 max-width:100%;
 }
.magazine figcaption{
 width:80%;
 margin:0 auto;
 }
.magazineflex{
 display:flex;
 gap:2em;
 flex-wrap:wrap;
 justify-content:center;
 }
.magazineflex a{
 color:#fff;
 text-decoration:none;
 }
.magazineflex li{
 display:flex;
 gap:1em;
 width:calc(33% - 2em);
 }
.magazineflex li span.img{
 width:20%;
 }
.magazineflex li span.img img{
 max-width:100%;
 }

@media screen and (max-width: 750px) {
 header nav div{
   width:calc(100vw - 190px);
   overflow-x: scroll;
   }
 header nav ul a{
   font-size:16px;
   }
 #information dl dt{
   width:40vw;
   padding:1vw;
   }
 #information dl dd{
   width:50vw;
   padding:1vw;
   }
 #series > div{
   width:92vw;
   }
 ul.actionbox {
  width:calc(100% -2em);
  margin-top:-30px;
  gap:10px;
  justify-content:space-between;
  }
 ul.actionbox li a{
  width:80px;
  height:80px;
  border-radius:40px;
   }
 ul.lang{
   margin-top:1em;
   }
 section#news h1{
   margin-top:0.5em;
   }
 ul.flex{
   flex-wrap:wrap;
   }
 ul.flex li{
   width:45vw;
   }
 .youtube{
  height:auto;
  width:90vw;
  }
 #character dialog{
    height:90vh;
    overflow:hidden;
    overscroll-behavior-y: contain;
    }
 .charabox{
   display:block;
   padding:10px;
   height:calc(100% - 50px);
   margin-top:15px;
   overflow:scroll;
   }
 .charabox >.img{
  width:100%;
  }
 .charabox h2{
  padding:0.2em 0;
  }
 .charabox .catch br{
  display:none;
  }
 .cv{
  margin-bottom:1em;
  }
 #character form.close{
  bottom:0;
  z-index:2;
  }
 .movemodal{
  position:absolute;
  bottom:-30px;
  z-index:3;
  }
 .movemodal.next{
  right:0;
  }
 #character form.close::after{
  content:"";
  position:absolute;
  width:2em;
  height:70px;
  top:-35px;
  right:3em;
  background-size:100%;
  background-image:url("../img/botharrow.svg");
  background-repeat:no-repeat;
  }
 #result table{
  width:100%;
  }
 .application th,.application td{
  display:block;
  }
 .magazineflex li{
  width:100%;
  }
 }