@charset "utf-8";


/* ベース */
body{ height: 100%; background: #03181f; background-size: cover; -webkit-text-size-adjust: 100%; }
*{ margin: 0; padding: 0; border:none; list-style: none; }
h1 , h2 , h3 , h4 , h5 , h6{ font-weight: normal; }
img{ vertical-align: text-bottom; }
.flat{ border-radius: 8px; }
*{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }


/* フォント */
*{
font-family: 'Noto Sans JP', sans-serif;
color: #2d2e2f;
line-height: 1.5em;
}
.meiryo{ font-family: 'メイリオ','Meiryo', serif !important; }
::selection{ background: rgba(133, 133, 133, 0.5); color: #fff; }


/* ボタンリンク */
.bt-link{ transition: all 0.4s ease; animation: all 0.4s ease; }
.bt-link:hover{
z-index: 1;
opacity: 0.5;
}
.no-link{ opacity: 0.15; }


/* ローディング */
#loading{
width: 100%;
height: 100%;
z-index: 9999;
background: #002bab url(../img/_/bg_02.gif);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
position: fixed;
top: 0;
left: 0;
padding: 100px;
}
#loading .bg,
#loading .bg > div{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
	#loading .bg > div:nth-child(1){
	background: #002bab url(../img/_/bg_02.gif);
	}
	#loading .bg > div:nth-child(2){
	background: #ab0000 url(../img/_/bg_01.gif);
	-webkit-mask-image: linear-gradient( -45deg, black 20%, transparent 80%);
	mask-image: linear-gradient( -45deg, black 20%, transparent 80%);
	}
#loading .item{
width: 100%;
max-width: 600px;
position: relative;
}
#loading .item img{
width: 100%;
position: relative;
margin: 0 0 30px;
}
#loading .item #loading_text{
width: 100%;
text-align: center;
font-size: 14px;
line-height: 1.0em;
color: #424242;
position: relative;
margin: 0;
}
.load{ display: none; }


/* ページトップ */
#side-bt{
width: 80px;
z-index: 998;
position: fixed;
bottom: 20px;
right: -100px;
cursor: pointer;
}
#side-bt a{
width: 100%;
display: block;
position: relative;
}
#side-bt a img{ width: 100%; }


/* メイン */
main{
width: 100%;
max-width: 2560px;
min-width: 1200px;
background: #fff url(../img/_/body_bg.jpg) center;
position: relative;
margin: 0 auto;
}
/* 見出し */
main h2{
width: 100%;
max-width: 825px;
display: flex;
justify-content: center;
position: relative;
margin: 0 auto 100px;
}
main h2 img{ width: 100%; }
.wp{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
/* ボタンベース */
.bt-base{
width: 100%;
display: flex;
justify-content: center;
position: relative;
margin: 0 0 -20px;
}
.bt-base a{
width: auto;
background: #03181f;
overflow: hidden;
display: inline-block;
font-size: 22px;
text-align: center;
color: #fff;
font-weight: bold;
text-decoration: none;
position: relative;
margin: 0 10px 20px;
padding: 10px 20px;
border-radius: 10px;
box-shadow: 0px 3px 10px rgba(0,0,0,0.2);
}


/* トップ */
#top{
width: 100%;
overflow: hidden;
position: relative;
}
#top .box{
width: 100%;
max-width: 2560px;
position: relative;
margin: 0 auto;
}
#top .img{
width: 100%;
display: flex;
justify-content: center;
position: relative;
}
#top .img img{
width: 100%;
min-width: 2000px;
position: relative;
}
#top .item{
width: 100%;
height: 100%;
display: flex;
align-items: flex-end;
position: absolute;
top: 0;
left: 0;
padding: 0 5%;
}
#top .item > div{
width: 100%;
max-width: 1000px;
position: relative;
margin: 0 auto;
padding: 0 0 100px;
}
#top .item h1,
#top .item .day,
#top .item .staff{
width: 100%;
position: relative;
}
#top .item .text img,
#top .item h1 img,
#top .item .day img,
#top .item .staff img{
width: 100%;
display: block;
position: relative;
}


/* インフォ */
#info{
width: 100%;
position: relative;
padding: 100px 0;
}
#info .bg{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0
}
#info .bg > div{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0
}
	#info .bg > div:nth-child(1){
	background: #002bab url(../img/_/bg_02.gif);
	}
	#info .bg > div:nth-child(2){
	background: #ab0000 url(../img/_/bg_01.gif);
	-webkit-mask-image: linear-gradient(to left, black 20%, transparent 80%);
	mask-image: linear-gradient(to left, black 20%, transparent 80%);
	}
#info #topic{
width: 100%;
position: relative;
padding: 0 calc(5% - 15px);
}
#info #topic ul{
width: 100%;
max-width: calc(1400px + 30px);
display: flex;
flex-wrap: wrap;
justify-content: center;
position: relative;
margin: 0 auto -30px;
}
#info #topic ul li{
width: calc(50% - 30px);
position: relative;
margin: 0 15px 30px;
}
#info #topic ul li a{
width: 100%;
display: block;
position: relative;
}
#info #topic ul li a img{
width: 100%;
border-radius: 20px;
box-shadow: 0px 3px 10px rgba(0,0,0,0.2);
}


/* ホップアップ */
#master-up,
#pop01{
width: 100%;
max-width: 1280px;
position: relative;
}
#master-up img,
#pop01 img{ width: 100%; }


/* 作品紹介 */
#intro{
width: 100%;
overflow: hidden;
position: relative;
}
/* 作品紹介 概要 */
#intro #about{
width: 100%;
position: relative;
padding: 100px 5%;
}
#intro #about .bg{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0
}
#intro #about .bg > div{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0
}
	#intro #about .bg > div:nth-child(1){
	background: #002bab url(../img/_/bg_02.gif);
	}
	#intro #about .bg > div:nth-child(2){
	background: #ab0000 url(../img/_/bg_01.gif);
	-webkit-mask-image: linear-gradient(to left, black 20%, transparent 80%);
	mask-image: linear-gradient(to left, black 20%, transparent 80%);
	}
#intro #about .item{
width: 100%;
max-width: 1400px;
text-align: center;
position: relative;
margin: 0 auto -50px;
}
#intro #about .item p{
width: 100%;
font-size: 25px;
color: #fff;
position: relative;
margin: 0 0 50px;
}
#intro #about .item p span{
font-size: 33px;
color: #ffe241;
font-weight: bold;
/*
text-shadow:
	1.5px 1.5px 0 #fff,
	-1.5px 1.5px 0 #fff,
	1.5px -1.5px 0 #fff,
	-1.5px -1.5px 0 #fff,
	1.5px 0 0 #fff,
	-1.5px 0 0 #fff,
	0 1.5px 0 #fff,
	0 -1.5px 0 #fff;
*/
}
	#intro #about .item p span.c01{ color: #e61739; }
	#intro #about .item p span.c02{ color: #1755e6; }
	#intro #about .item p span.c03{ color: #ca17e6; }
/* 作品紹介 同梱物一覧 */
#intro #conte{
width: 100%;
position: relative;
padding: 100px 5% 0;
}
#intro #conte ul{
width: 100%;
max-width: 1400px;
position: relative;
margin: 0 auto;
}
#intro #conte ul li{
width: 100%;
display: flex;
align-items: center;
position: relative;
margin: 0 0 50px;
padding: 50px;
border-radius: 15px;
box-shadow: 0px 3px 10px rgba(0,0,0,0.2);
}
	#intro #conte ul li.c01{ background: #ab0000 url(../img/_/bg_01.gif); }
	#intro #conte ul li.c02{ background: #002bab url(../img/_/bg_02.gif); }
	#intro #conte ul li.c04{ background: #7800ab url(../img/_/bg_04.gif); }
#intro #conte ul li .number{
width: 310px;
height: 40px;
background: url(../img/_/h3_img.webp) no-repeat;
display: flex;
align-items: center;
justify-content: center;
font-size: 23px;
color: #fff;
position: absolute;
top: -20px;
left: -20px;
}
#intro #conte ul li .img{
width: 450px;
flex-shrink: 0;
position: relative;
}
#intro #conte ul li .img img{
width: 100%;
display: block;
position: relative;
border-radius: 15px;
border: 2px #eee solid;
}
#intro #conte ul li .info{
width: calc(100% - 450px);
position: relative;
padding: 0 0 0 50px;
}
#intro #conte ul li .info h3{
width: 100%;
max-width: 560px;
position: relative;
margin: 0 0 30px;
}
#intro #conte ul li .info h3 img{ width: 100%; }
#intro #conte ul li .info .text{
width: 100%;
font-size: 18px;
color: #fff;
position: relative;
margin: 0 0 30px;
}
#intro #conte ul li .info .bt-base{ display: block; }
#intro #conte ul li .info .bt-base a{ margin: 0; }


/* 作品紹介 コンセプト */
#intro #conce{
width: 100%;
position: relative;
padding: 0 5%;
}
#intro #conce ul{
width: 100%;
max-width: 1400px;
position: relative;
margin: 0 auto;
}
#intro #conce ul li{
width: 100%;
background: #002bab url(../img/_/bg_02.gif);
position: relative;
margin: 0 0 50px;
padding: 50px;
border-radius: 15px;
box-shadow: 0px 3px 10px rgba(0,0,0,0.2);
}
#intro #conce ul li .number{
width: 310px;
height: 40px;
background: url(../img/_/h3_img.webp) no-repeat;
display: flex;
align-items: center;
justify-content: center;
font-size: 23px;
color: #fff;
position: absolute;
top: -20px;
left: -20px;
}
#intro #conce ul li h3{
width: 100%;
position: relative;
margin: 0 0 30px;
}
#intro #conce ul li h3 img{ width: 100%; }
#intro #conce ul li .text{
width: 100%;
font-size: 25px;
color: #fff;
position: relative;
}
#intro #conce ul li .text span{
font-size: 33px;
font-weight: bold;
color: #ffe241;
border-bottom: 2px #ffe241 solid;
}


/* 特典 */
#bonus{
width: 100%;
position: relative;
padding: 100px 0;
}
#bonus h3{
width: 100%;
display: flex;
justify-content: center;
position: relative;
margin: 0 0 30px;
}
#bonus h3 p{
width: 310px;
height: 40px;
background: url(../img/_/h3_img.webp) no-repeat;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
color: #fff;
position: relative;
}
#bonus .text{
width: 100%;
font-size: 18px;
text-align: center;
position: relative;
}
/* 特典 ポップ */
#bonus #shop_pop{
width: 100%;
position: relative;
padding: 0 calc(5% - 5px);
}
#bonus #shop_pop > div{
width: 100%;
max-width: calc(1400px + 10px);
display: flex;
flex-wrap: wrap;
justify-content: center;
position: relative;
margin: 0 auto 20px;
}
#bonus #shop_pop a{
width: calc(65% - 10px);
display: block;
position: relative;
margin: 0 5px 10px;
}
#bonus #shop_pop a img{
width: 100%;
border-radius: 20px;
box-shadow: 0px 3px 10px rgba(0,0,0,0.2);
}
/* 特典 ダウンロードボイス特典付き */
#bonus #pur,
#bonus #dl{
width: 100%;
position: relative;
margin: 0 0 50px;
padding: 0 5%;
}
/* 特典 店舗特典 */
#bonus #shop{
width: 100%;
position: relative;
margin: 0 0 50px;
padding: 0 calc(5% - 15px);
}
#bonus ul{
width: 100%;
max-width: 1430px;
display: flex;
flex-wrap: wrap;
justify-content: center;
position: relative;
margin: 0 auto -30px;
}
#bonus ul li{
width: calc(50% - 30px);
/*background: #7800ab url(../img/_/bg_04.gif);*/
overflow: hidden;
position: relative;
margin: 0 15px 30px;
padding: 50px;
border-radius: 15px;
box-shadow: 0px 3px 10px rgba(0,0,0,0.2);
}
#bonus ul li .bg,
#bonus ul li .bg > div{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0
}
	#bonus ul li .bg > div:nth-child(1){
	background: #002bab url(../img/_/bg_02.gif);
	}
	#bonus ul li .bg > div:nth-child(2){
	background: #ab0000 url(../img/_/bg_01.gif);
	-webkit-mask-image: linear-gradient(to left, black 20%, transparent 80%);
	mask-image: linear-gradient(to left, black 20%, transparent 80%);
	}
#bonus ul li h4{
width: 100%;
font-size: 24px;
text-align: center;
color: #fff;
font-weight: bold;
position: relative;
}
#bonus ul li img{
width: 100%;
position: relative;
margin: 30px 0;
border-radius: 10px;
}
#bonus ul li p{
width: 100%;
color: #fff;
font-size: 18px;
position: relative;
text-align: center;
margin: auto 0 30px;
}
#bonus ul li p span{
color: #fff;
font-size: 15px;
}
#bonus ul li .bt-base a{ width: 60%; }
#bonus ul > p{
width: 80%;
background: #2d2e2f;
text-align: center;
font-size: 35px;
font-weight: bold;
color: #fff;
margin: 20px auto 30px;
padding: 10px 20px;
clip-path: polygon(40px 0%, calc(100% - 40px) 0%, 100% 50%, calc(100% - 40px) 100%, 40px 100%, 0% 50%);
}


/* 製品概要 */
#spec{
width: 100%;
position: relative;
padding: 0 5% 100px;
}
#spec .item{
width: 100%;
max-width: 1400px;
display: flex;
position: relative;
margin: 0 auto;
}
#spec .item .info{
width: calc(60% - 30px);
position: relative;
margin: 0 30px -70px 0;
}
#spec .item .info dl{
width: 100%;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
position: relative;
margin: 0 0 50px;
}
#spec .item .info dl dt{
width: 150px;
/*background: #7800ab;*/
background: linear-gradient(90deg, #002bab 0%, #ab0000 100%);
flex-shrink: 0;
text-align: center;
font-size: 14px;
line-height: 1.0em;
color: #fff;
position: relative;
margin: 0 20px 20px 0;
padding: 5px 10px;
border-radius: 50px;
}
#spec .item .info dl dd{
width: calc(100% - 170px);
font-size: 18px;
position: relative;
margin: 0 0 20px;
}
#spec .item .img{
width: 40%;
display: flex;
align-items: center;
position: relative;
}
#spec .item .img img{
width: 100%;
border-radius: 15px;
box-shadow: 0px 3px 10px rgba(0,0,0,0.2);
}


/* フッター */
footer{
width: 100%;
max-width: 2560px;
min-width: 1200px;
/*background: #7800ab;*/
background: linear-gradient(90deg, #002bab 0%, #ab0000 100%);
position: relative;
margin: 0 auto;
padding: 100px 5%;
}
footer a{
width: 100%;
max-width: 350px;
display: block;
position: relative;
margin: 0 auto 20px;
}
footer a img{ width: 100%; }
footer p{
width: 100%;
max-width: 1400px;
font-size: 12px;
line-height: 1.4em;
color: #fff;
font-style: normal;
text-align: center;
position: relative;
margin: 0 auto;
}


/* レスポンシブ */


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



}


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



}


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

	#intro #about .bg .img03{ right: -13%; }

}


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

	#intro #about .bg .img03{ right: -20%; }

	#chara #chara_intro #c_2 .img .box img{ left: 45%; }
	#chara #chara_intro #c_3 .img .box img{ left: 15%; }
	#chara #chara_intro #c_4 .img .box img{ left: -20%; }
	#chara #chara_intro #c_5 .img .box img{ left: -15%; }

}


/* end */