@charset "utf-8";


/* top */
#top{
width: 100%;
min-height: 100vh;
/*min-height: 1100px;*/
position: relative;
}
#top .bg{
width: 100%;
height: 100%;
overflow: hidden;
display: flex;
align-items: top;
justify-content: center;
position: relative;
}
#top .bg > div{
width: 100%;
min-width: 1920px;
position: relative;
}
#top .bg img{
width: 100%;
position: relative;
}
#top .bg img:nth-child(2){
position: absolute;
top: 0;
left: 0;
}
#top .item{
width: 100%;
position: absolute;
bottom: 0;
left: 0;
padding: 0 10% 126px;
}
#top .item > div{
width: 100%;
max-width: 1100px;
position: relative;
margin: 0 auto;
}
#top .item .staff{
width: 100%;
max-width: 1000px;
position: relative;
margin: 0 auto -3%;
}
#top .item h1{
width: 100%;
position: relative;
margin: 0 auto 5px;
}
#top .item .day{
width: 100%;
max-width: 1000px;
position: relative;
margin: 0 auto 30px;
}
#top .item h1 img,
#top .item .day img,
#top .item .staff img{ width: 100%; }
#top .item .bt-base a{
width: 350px;
display: block;
font-size: 28px;
text-align: center;
}
#top .item .text{
width: 100%;
text-align: center;
font-size: 40px;
font-weight: 700;
position: relative;
background: -webkit-linear-gradient(90deg, #0013d3, #00e0e0);
background: linear-gradient(90deg, #0013d3, #00e0e0);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}


/* ホップアップ */
.pop-up{
width: 100%;
max-width: 1000px;
background: #fff;
position: relative;
padding: 20px;
border-radius: 15px;
}
.pop-up h3{
width: 100%;
position: relative;
margin: 0 0 20px;
}
.pop-up h3 img{
width: 100%;
border: 1px #eee solid;
border-radius: 10px;
}
.pop-up p{
width: 100%;
position: relative;
margin: 0 0 20px;
}
.pop-up > img{
width: 100%;
border: 1px #eee solid;
border-radius: 10px;
}


/* 概要 */
#intro{
width: 100%;
position: relative;
}
#intro > .bg{
width: 100%;
height: 100vh;
background: #000 url(../img/_bg.jpg) no-repeat center;
background-size: cover;
position: sticky;
top: 0;
}
#intro > .box{
width: 100%;
overflow: hidden;
position: relative;
margin: -100vh 0 0;
padding: 100px 0 0 0;
}
/* 概要 はじめに  */
#intro #story{
width: 100%;
position: relative;
padding: 0 5% 100px;
}
#intro #story .text{
width: 100%;
max-width: 1400px;
position: relative;
margin: 0 auto -80px;
}
#intro #story .text .bg{
width: 900px;
position: absolute;
top: -50%;
right: -15%;
}
#intro #story .text .bg img{
width: 100%;
position: relative;
}
#intro #story .text .bg img:nth-child(2){
z-index: 1;
position: absolute;
top: 0;
left: 0;
}
#intro #story .text .item{
width: 60%;
z-index: 2;
position: relative;
}
#intro #story .text .item *{
text-shadow: #fff 2px 0 0 , #fff 0 2px 0 , #fff -2px 0 0 , #fff 0 -2px 0 , #fff 2px 2px 0 , #fff -2px 2px 0 , #fff 2px -2px 0 , #fff -2px -2px 0;
}
#intro #story .text h3{
width: 100%;
font-size: 40px;
font-weight: 700;
color: #ff3380;
position: relative;
margin: 0 0 60px;
}
#intro #story .text p{
width: 100%;
font-size: 22px;
color: #001564;
font-weight: 700;
position: relative;
margin: 0 0 30px;
}
#intro #story .text p span{
font-size: 22px;
color: #ff3380;
font-weight: 700;
}
/* 概要 コンセプト＆ボーナス */
#intro #point{
width: 100%;
position: relative;
padding: 0 5% 100px;
}
#intro #point ul{
width: 100%;
max-width: 1400px;
position: relative;
margin: 0 auto -50px;
}
#intro #point ul li{
width: 100%;
position: relative;
margin: 0 0 50px;
}
#intro #point ul li .tag{
width: 100%;
height: 24px;
background: url(../img/project_tag.webp) no-repeat left top;
position: relative;
}
#intro #point ul li .tag p{
width: 200px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 18px;
font-weight: 700;
position: relative;
}
#intro #point ul li .item{
width: 100%;
background: linear-gradient(-10deg, rgba(0,185,202,0.7) 0%,rgba(0,65,178,0.7) 100%);
position: relative;
padding: 20px;
border: 1px #00e5d2 solid;
}
#intro #point ul li .item > div{
width: 100%;
min-height: 250px;
background: #fff url(../img/_texture02.gif);
display: flex;
justify-content: flex-end;
position: relative;
border-radius: 20px;
}
#intro #point ul li .item .info{
width: 100%;
z-index: 3;
display: flex;
align-items: center;
position: relative;
padding: 20px;
}
#intro #point ul li .item .info > div{
width: 100%;
position: relative;
}
#intro #point ul li .item .info h3{
width: 100%;
font-size: 30px;
font-weight: 700;
color: #ff3380;
position: relative;
margin: 0 0 15px;
text-shadow: #fff 2px 0 0 , #fff 0 2px 0 , #fff -2px 0 0 , #fff 0 -2px 0 , #fff 2px 2px 0 , #fff -2px 2px 0 , #fff 2px -2px 0 , #fff -2px -2px 0;
}
#intro #point ul li .item .info h3 p{
width: 100%;
font-size: 20px;
font-weight: 700;
color: #ff3380;
position: relative;
margin: 0 0 -5px;
}
#intro #point ul li .item .info > div > p{
width: 100%;
font-size: 18px;
position: relative;
text-shadow: #fff 2px 0 0 , #fff 0 2px 0 , #fff -2px 0 0 , #fff 0 -2px 0 , #fff 2px 2px 0 , #fff -2px 2px 0 , #fff 2px -2px 0 , #fff -2px -2px 0;
}
#intro #point ul li .item .image{
width: 1;

}


/* キャラクター紹介 */
#chara{
width: 100%;
position: relative;
padding: 150px 0 100px;
}
#chara #select{
width: 100%;
/*z-index: 99;*/
position: relative;
/*
position: sticky;
top: 20px;
*/
padding: 0 5%;
}
#chara #select ul{
width: 100%;
max-width: 1400px;
display: flex;
justify-content: center;
position: relative;
margin: 0 auto;
}
#chara #select ul li{
width: 130px;
position: relative;
margin: 0 5px;
}
  /*#chara #select ul li:nth-child(even){ margin: 70px 0 0 0; }*/
#chara #select ul li a{
width: 100%;
z-index: 1;
/*background: rgba(0, 0, 0, 0.5);*/
display: block;
position: relative;
cursor: pointer;
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
/*clip-path: polygon(0 0, calc(100% - 45px) 0, 100% 100%, 45px 100%);*/
}
	#chara #select .sebt_1 a,
	#chara #select .sebt_2 a{ background: #27a6eb; }
	#chara #select .sebt_3 a,
	#chara #select .sebt_4 a,
	#chara #select .sebt_5 a,
	#chara #select .sebt_6 a{ background: #eb2748; }
#chara #select ul li a img{ width: 100%; }
#chara #select ul li.focus a{ background: #e433ff; }
#chara #select ul li.focus a img{ mix-blend-mode: screen; }

/* キャラクター紹介 コンテンツ */
#chara > section{
width: 100%;
overflow: hidden;
position: relative;
padding: 0 5%;
}
#chara > section:nth-child(n+5){ display: none; }
#chara > section .item{
width: 100%;
max-width: 1400px;
display: flex;
position: relative;
margin: 0 auto;
}
/* キャラクター紹介 コンテンツ イメージ */
#chara .img{
width: 50%;
display: flex;
justify-content: center;
position: relative;
padding: 0 10px 0 0;
}
#chara .img img:nth-child(n+2){ display: none; }
/* キャラクター紹介 コンテンツ インフォ */
#chara .info{
width: 50%;
position: relative;
padding: 150px 0 0 10px;
}
#chara .info h3{	/* name */
width: 100%;
position: relative;
margin: 0 0 50px;
padding: 0;
}
#chara .info h3:nth-child(n+2){ display: none; }
#chara .info h3 span{
font-weight: 700;
position: relative;
text-shadow: #fff 2px 0 0 , #fff 0 2px 0 , #fff -2px 0 0 , #fff 0 -2px 0 , #fff 2px 2px 0 , #fff -2px 2px 0 , #fff 2px -2px 0 , #fff -2px -2px 0;
}
#chara .info h3 span.name01{ font-size: 57px; line-height: 1.4em; }
#chara .info h3 span.name02{ font-size: 30px; line-height: 1.4em; }
#chara .info h3 span.name03{ font-size: 18px; line-height: 1.4em; margin: 0 0 0 20px; }
#chara .info h3 .line{
width: 100%;
height: 28px;
position: relative;
margin: 0 0 10px;
}
#chara .info h3 .line hr{
width: 100%;
height: 1px;
border-bottom: #005465 3px solid;
position: absolute;
top: 0;
left: 0;
}
#chara .info h3 .line img{ position: relative; }
  #chara #chara_3 .info h3 .line hr,
  #chara #chara_4 .info h3 .line hr,
  #chara #chara_5 .info h3 .line hr,
  #chara #chara_6 .info h3 .line hr{ border-bottom: #680025 3px solid; }
/*
#chara .info h3::after{
content: " ";
width: 328px;
height: 10px;
background: url(../img/_frame-min.webp) no-repeat;
position: absolute;
bottom: 0;
left: 0;
transform: scale(1,-1);
}
*/
#chara .info h3 .cv{
width: 100%;
display: flex;
justify-content: flex-end;
font-size: 18px;
line-height: 1.0em;
font-weight: 700;
position: relative;
}
#chara .info h3 .cv span{
font-style: normal;
line-height: 1.0em;
}
#chara .info .text{
width: 100%;
font-size: 18px;
line-height: 1.5em;
font-weight: 700;
position: relative;
margin: 0 0 50px;
padding: 0 0 0 35px;
text-shadow: #fff 2px 0 0 , #fff 0 2px 0 , #fff -2px 0 0 , #fff 0 -2px 0 , #fff 2px 2px 0 , #fff -2px 2px 0 , #fff 2px -2px 0 , #fff -2px -2px 0;
}
#chara .info .text.p_2{ display: none; }
#chara .info dl{
width: 100%;
display: flex;
align-items: center;
position: relative;
margin: 0 0 20px;
padding: 0 0 0 35px;
}
#chara .info dl dt{
width: 150px;
flex-shrink: 0;
font-size: 18px;
line-height: 1.0em;
font-weight: 700;
position: relative;
}
#chara .info dl dt span{ font-style: normal; }
  #chara #chara_1 .info h3 span,
  #chara #chara_2 .info h3 span{ color: #1d4aec; }
  #chara #chara_3 .info h3 span,
  #chara #chara_4 .info h3 span,
  #chara #chara_5 .info h3 span,
  #chara #chara_6 .info h3 span{ color: #eb2748; }
#chara .info dl dd{
width: calc(100% - 150px);
display: flex;
position: relative;
}
#chara .info dl dd a{
width: 100px;
display: block;
font-size: 16px;
line-height: 1.0em;
text-align: center;
color: #fff;
position: relative;
margin: 0;
padding: 5px 20px;
/*border-radius: 4px;*/
cursor: pointer;
clip-path: polygon(20px 0, 100% 0, calc(100% - 20px) 100%, 0% 100%);
}
	#chara #chara_1 .info dl dd a,
	#chara #chara_2 .info dl dd a{ background: #1d4aec; }
	#chara #chara_3 .info dl dd a,
	#chara #chara_4 .info dl dd a,
	#chara #chara_5 .info dl dd a,
	#chara #chara_6 .info dl dd a{ background: #eb2748; }


/* サンプルCG */
#cg{
width: 100%;
position: relative;
}
#cg > .bg{
width: 100%;
height: 100%;
background: #000 url(../img/_bg.jpg) no-repeat center;
background-size: cover;
position: absolute;
top: 0;
left: 0;
}
#cg .box{
width: 100%;
position: relative;
/*margin: -100vh 0 0;*/
padding: 100px calc(5% - 15px);
}
#cg ul{
width: 100%;
max-width: 1430px;
display: flex;
flex-wrap: wrap;
justify-content: center;
position: relative;
margin: 0 auto;
}
#cg ul li{
width: calc(50% - 30px);
position: relative;
margin: 0 15px 30px;
}
#cg ul li a{
width: 100%;
display: block;
position: relative;
padding: 10px;
background: linear-gradient(-10deg, rgba(0,185,202,0.7) 0%,rgba(0,65,178,0.7) 100%);
border: 1px #00e5d2 solid;
}
#cg ul li a img{
width: 100%;
position: relative;
clip-path: polygon(20px 0, 0% 0%, 100% 0%, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0% 100%, 0% 100%, 0 20px);
}



/* 製品情報 */
#spec{
width: 100%;
position: relative;
padding: 100px calc(5% - 20px) 0;
}
#spec > section{
width: 100%;
max-width: 1440px;
display: flex;
flex-wrap: wrap;
position: relative;
margin: 0 auto;
padding: 0 0 100px;
}
#spec hr{
width: 100%;
opacity: 0.25;
position: relative;
margin: 30px 20px;
border-bottom: 1px #242424 solid;
}
#spec dl{
width: 50%;
display: flex;
flex-wrap: wrap;
align-items: center;
position: relative;
padding: 0 20px;
}
#spec dl.large{ width: 100%; }
#spec dl dt{
width: 100px;
background: #001564;
flex-shrink: 0;
text-align: center;
font-size: 12px;
line-height: 1.0em;
color: #fff;
position: relative;
margin: 10px 10px 10px 0;
padding: 10px;
border-radius: 6px;
text-shadow: none;
}
#spec dl dd{
width: calc(100% - 110px);
font-size: 16px;
line-height: 1.3em;
position: relative;
margin: 10px 0;
}
#spec .bay-link{
width: 100%;
position: relative;
margin: 0 0 100px;
}
#spec .bay-link h1{
width: 100%;
max-width: 1000px;
position: relative;
margin: 0 auto -1.5%;
}
#spec .bay-link h1 img{ width: 100%; }
#spec .bay-link .bt-base a{
width: 350px;
display: block;
font-size: 28px;
text-align: center;
}
#spec #topic{ padding: 0; }


/* レスポンシブ */


@media screen and (min-width: 2561px){



}


@media screen and (max-width: 1920px){



}


@media screen and (max-width: 1600px){



}


@media screen and (max-width: 1400px){

  #intro #story .text .bg{
  width: 800px;
  top: -40%;
  right: -15%;
  }

}


@media screen and (max-width: 1200px){

	#top{ min-height: auto; }

  #intro > .bg{
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  }
  #intro > .box{
  margin: 0;
  padding: 100px 0 0 0;
  }
  #intro #story .text .bg{ top: -30%; }

}


/* end */