@charset "utf-8";


/* ベース */
body{ height: 100%; background: #fff; -webkit-text-size-adjust: 100%; }
*{ margin: 0; padding: 0; border:none; list-style: none; box-sizing: border-box; }
h1 , h2 , h3 , h4 , h5 , h6{ font-weight: normal; }
img{ vertical-align: middle; }


/* フォント */
*{
font-family: "Noto Serif JP", serif;
font-feature-settings: "palt";
font-weight: 700 !important;
color: #424242;
line-height: 1.6em;
}
.meiryo{ font-family: 'メイリオ','Meiryo', serif !important; font-weight: normal !important; }
::selection{ background: rgba(133, 133, 133, 0.5); color: #fff; }


/* ボタンリンク */
.bt-link{ animation: all 0.8s ease; }
.bt-link:hover{
z-index: 1;
-webkit-animation-name: pulse;
animation-name: pulse;
}
.no-link{ opacity: 0.2; cursor: default !important; }
.font-link{ color: #e7306b !important; }


/* ページトップ */
#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: 1400px;
min-width: 1000px;
position: relative;
margin: 0 auto;
}
main > .bg{
width: 100%;
height: 100vh;
background: url(../img/_bg01.jpg) no-repeat center top;
background-size: cover;
position: fixed;
top: 0;
left: 0;
}
.wp{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
/* 見出し */
h2{
width: 100%;
z-index: 5;
display: flex;
justify-content: center;
position: relative;
margin: 0 0 50px;
}
h2 img{
display: block;
position: relative;
}
/* ボタンベース */
.bt-base{
width: 100%;
display: flex;
justify-content: center;
position: relative;
}
.bt-base a{
width: auto;
background: #e7306b;
display: inline-block;
text-decoration: none;
font-size: 20px;
line-height: 1.0em;
color: #fff;
font-weight: 900;
position: relative;
margin: 0 10px;
padding: 15px 30px;
border-radius: 10px;
}


/* ヘッダー */
header{
width: 100%;
height: 100px;
z-index: 999;
display: flex;
align-items: center;
position: sticky;
top: 0;
margin: 0 0 -100px;
}
header .bg{
width: 100%;
height: 100%;
background: linear-gradient(180deg, rgba(255,255,255,0.95) 0% , rgba(255,255,255,0.5) 60% , rgba(255,255,255,0) 100%);
position: absolute;
top: 0;
left: 0;
}
header nav{
width: 100%;
display: flex;
justify-content: space-between;
position: relative;
padding: 0 2%;
}
header nav .title{
width: 174px;
display: block;
flex-shrink: 1;
position: relative;
}
header nav .title img{ width: 100%; }
header nav ul{
width: 100%;
display: flex;
justify-content: flex-end;
position: relative;
}
header nav ul li{
width: auto;
display: inline-block;
position: relative;
margin: 0 0 0 30px;
}
header nav ul li a{
width: auto;
display: inline-block;
font-size: 18px;
text-decoration: none;
position: relative;
text-shadow: 0 0 5px #fff , 0 0 5px #fff , 0 0 5px #fff;
}
header nav ul li a:hover{
color: #fff;
text-shadow: 0 0 5px #e7306b , 0 0 5px #e7306b , 0 0 5px #e7306b;
}


/* トップ */
#top{
width: 100%;
position: relative;
}
#top .bg{
width: 100%;
position: relative;
/*margin: -100vh 0 0;*/
}
#top .bg img{ width: 100%; }
#top .item{
width: 100%;
height: 100%;
/*height: 100vh;*/
z-index: 5;
position: absolute;
/*position: sticky;*/
top: 0;
left: 0;
}
#top .item h1{
width: 10%;
max-width: 143px;
position: absolute;
top: 110px;
/*top: 7.5%;*/
right: 4.5%;
}
#top .item h1 img{ width: 100%; }
#top .item .text{
width: 100%;
position: absolute;
bottom: 0;
left: 0;
padding: 0 5% 5%;
}
#top .item .text .grad{
width: 100%;
height: 120%;
background: linear-gradient(0deg, rgba(255,255,255,0.95) 0% , rgba(255,255,255,0.5) 60% , rgba(255,255,255,0) 100%);
position: absolute;
bottom: 0;
left: 0;
}
#top .item .text p{
width: 100%;
position: relative;
}
#top .item .text p img{ width: 100%; }
#top .item ul{
width: 15%;
max-width: 180px;
position: absolute;
top: 150px;
left: 2%;
}
#top .item ul li{
width: 100%;
position: relative;
margin: 0 0 10px;
}
#top .item ul li a{
width: 100%;
display: block;
position: relative;
}
#top .item ul li a img{
width: 100%;
border-radius: 5px;
}


.main-bg{
width: 100%;
height: 100vh;
background: url(../img/_bg01.jpg) no-repeat center;
background-size: cover;
position: sticky;
top: 0;
}


/* ストーリー */
#story{
width: 100%;
position: relative;
margin: -100vh 0 0 0;
padding: 100px 0;
}
#story .grad{
width: 100%;
height: 60%;
background: #fff;
position: absolute;
top: 0;
left: 0;
}
#story .item{
width: 100%;
position: relative;
margin: 0 0 -30px;
padding: 0 2%;
}
#story .item .bg{
width: 100%;
height: 100%;
display: flex;
align-items: center;
position: absolute;
top: 0;
left: 0;
}
#story .item .bg img{ width: 100%; }
#story .item p{
width: 100%;
font-size: 20px;
text-align: center;
position: relative;
margin: 0 0 30px;
text-shadow: 0 0 5px #fff , 0 0 5px #fff , 0 0 5px #fff , 0 0 5px #fff , 0 0 5px #fff , 0 0 5px #fff , 0 0 5px #fff , 0 0 5px #fff;
}
#story .item p span{
font-size: 35px;
text-shadow: 0 0 5px #fff , 0 0 5px #fff , 0 0 5px #fff , 0 0 5px #fff , 0 0 5px #fff , 0 0 5px #fff , 0 0 5px #fff , 0 0 5px #fff;
}
#story .item p span span{
font-size: 20px;
text-shadow: 0 0 5px #fff , 0 0 5px #fff , 0 0 5px #fff , 0 0 5px #fff , 0 0 5px #fff , 0 0 5px #fff , 0 0 5px #fff , 0 0 5px #fff;
}


/* ポイント */
#point{
width: 100%;
position: relative;
padding: 50px 0 100px;
}
#point ul{
width: 100%;
position: relative;
margin: 0 auto;
padding: 0 2%;
}
#point ul li{
width: 90%;
max-width: 1100px;
display: flex;
align-items: center;
position: relative;
margin: 0 auto 1%;
}
  #point ul li.re{ flex-direction: row-reverse; }
#point ul li .img{
width: 25%;
max-width: 310px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
#point ul li .img img{
width: 100%;
position: relative;
}
  #point ul li:nth-child(5) .img img{ width: 150%; }
#point ul li .img img:nth-child(1){ z-index: 1; }
#point ul li .img img:nth-child(2){
position: absolute;
top: 0;
left: 0;
}
#point ul li .item{
width: 75%;
display: flex;
align-items: center;
position: relative;
}
  #point ul li.re .item{ flex-direction: row-reverse; }
#point ul li .item .info{
width: calc(100% - 20px);
background: #fff;
font-size: 18px;
position: relative;
padding: 30px;
border-radius: 20px;
box-shadow: 0 5px 0 rgba(66,155,232,0.3);
}
#point ul li .item .info h3{
width: 100%;
max-width: 564px;
position: relative;
margin: 0 0 20px;
}
#point ul li .item .info h3 img{ width: 100%; }
#point ul li .item .shapes{
width: 20px;
height: 20px;
background: #fff;
position: relative;
clip-path: polygon(100% 50%, 0 0, 0 100%);
}
  #point ul li.re .item .shapes{ transform: scale(-1 , 1); }


/* キャラクター */
#chara{
width: 100%;
position: relative;
padding: 0 0 100px;
}
/* キャラクター セレクト */
#chara #select{
width: 100%;
display: flex;
position: relative;
padding: 0 calc(2% - 5px);
}
#chara #select li{
width: 25%;
position: relative;
margin: 0 5px;
}
#chara #select li a{
width: 100%;
background: #fff;
overflow: hidden;
display: block;
position: relative;
padding: 5px;
border: #e7306b 1px solid;
border-radius: 10px;
cursor: pointer;
}
#chara #select li a img{
width: 100%;
display: block;
position: relative;
border-radius: 5px;
}
/* キャラクター ミニセレクト */
#chara #min-select{
width: 100%;
z-index: 5;
display: flex;
position: relative;
margin: 0 0 30px;
}
#chara #min-select li{
width: 84px;
position: relative;
margin: 0 10px 0 0;
}
#chara #min-select li a{
width: 100%;
overflow: hidden;
background: #fff;
display: block;
position: relative;
border: #e7306b 1px solid;
border-radius: 5px;
cursor: pointer;
}
  #chara #min-select li.focus a{ background: #e7306b; }
#chara #min-select li a img{ width: 100%; }
/* キャラクター 紹介 */
#chara .set{
width: 100%;
min-height: 1000px;
display: none;
position: relative;
}
/* キャラクター 紹介 イメージ */
#chara .set .img{
width: 100%;
z-index: 2;
display: flex;
justify-content: flex-end;
position: relative;
}
#chara .set .img > div{
width: 55%;
position: relative;
right: -5%;
}
  #chara .set .img > div.small{ display: none; }
#chara .set .img img{
width: 100%;
z-index: 1;
display: none;
position: relative;
}
#chara .set .img img:nth-child(1){ display: block; }
/* キャラクター 紹介 データ */
#chara .set .info{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
padding: 0 2%;
}
#chara .set .info .item{
width: 100%;
background: url(../img/chara/bg01.jpg) no-repeat center top;
background-size: cover;
display: flex;
position: relative;
margin: 0 0 30px;
padding: 30px;
border-radius: 10px;
}
#chara .set .info .item .bg{
width: 30%;
position: absolute;
top: 0;
left: 0;
}
#chara .set .info .item .box{
width: 65%;
position: relative;
}
#chara .set .info h3{
width: 100%;
position: relative;
margin: 0 0 30px;
}
#chara .set .info h3 p{
width: 100%;
z-index: 5;
font-size: 60px;
position: relative;
text-shadow: 0 0 5px #fff , 0 0 5px #fff , 0 0 5px #fff , 0 0 5px #fff , 0 0 5px #fff , 0 0 5px #fff , 0 0 5px #fff , 0 0 5px #fff;
}
#chara .set .info h3 img{
opacity: 0.5;
display: block;
position: relative;
margin: 5px 0;
}
#chara .set .info h3 span{
z-index: 5;
display: block;
font-size: 24px;
position: relative;
text-shadow: 0 0 5px #fff , 0 0 5px #fff , 0 0 5px #fff , 0 0 5px #fff , 0 0 5px #fff , 0 0 5px #fff , 0 0 5px #fff , 0 0 5px #fff;
}
#chara .set .info .voice{
width: 100%;
z-index: 5;
position: relative;
margin: 0 0 30px;
}
#chara .set .info .voice p{
width: 100%;
font-size: 24px;
position: relative;
text-shadow: 0 0 5px #fff , 0 0 5px #fff , 0 0 5px #fff , 0 0 5px #fff , 0 0 5px #fff , 0 0 5px #fff , 0 0 5px #fff , 0 0 5px #fff;
}
#chara .set .info .voice ul{
width: 100%;
display: flex;
position: relative;
}
#chara .set .info .voice ul li{
width: 110px;
position: relative;
margin: 0 10px 0 0;
}
#chara .set .info .voice ul li a{
width: 100%;
background: #e7306b;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
color: #fff;
text-decoration: none;
position: relative;
padding: 3px 0;
border-radius: 5px;
cursor: pointer;
}
#chara .set .info .voice ul li a img{ margin: 0 3px 0 0; }
#chara .set .info .lines{
width: 100%;
z-index: 5;
font-size: 20px;
color: #e7306b;
position: relative;
margin: 0 0 30px;
text-shadow: 0 0 5px #fff , 0 0 5px #fff , 0 0 5px #fff , 0 0 5px #fff , 0 0 5px #fff , 0 0 5px #fff , 0 0 5px #fff , 0 0 5px #fff;
}
#chara .set .info .text{
width: 100%;
z-index: 5;
font-size: 16px;
position: relative;
text-shadow: 0 0 5px #fff , 0 0 5px #fff , 0 0 5px #fff , 0 0 5px #fff , 0 0 5px #fff , 0 0 5px #fff , 0 0 5px #fff , 0 0 5px #fff;
}
#chara .set .info .diff{
width: 640px;
z-index: 5;
display: flex;
flex-wrap: wrap;
position: relative;
}
#chara .set .info .diff li{
width: 220px;
position: relative;
margin: 0 10px 10px 0;
}
  #chara .set .info .diff li:nth-child(3),
  #chara .set .info .diff li:nth-child(6){ width: 120px; }
  #chara .set .info .diff li.active{ background: #e7306b; }
#chara .set .info .diff li a{
width: 100%;
overflow: hidden;
background: #fff;
display: block;
position: relative;
border: #e7306b 1px solid;
border-radius: 5px;
cursor: pointer;
}
#chara .set .info .diff li a img{
width: 100%;
position: relative;
}


/* ギャラリー */
#cg{
width: 100%;
position: relative;
padding: 0 0 100px;
}
#cg .bg{
width: 100%;
height: 100%;
display: flex;
align-items: center;
position: absolute;
top: 0;
left: 0;
}
#cg .bg img{
width: 100%;
height: 100%;
}
#cg ul{
width: 100%;
display: flex;
flex-wrap: wrap;
position: relative;
padding: 0 calc(2% - 5px);
}
#cg ul li{
width: calc(33.33% - 10px);
position: relative;
margin: 0 5px 10px;
}
#cg ul li a{
width: 100%;
overflow: hidden;
display: block;
position: relative;
cursor: pointer;
border-radius: 10px;
border: #e7306b 1px solid;
}
#cg ul li img{ width: 100%; }
/* ギャラリー ポップアップ */
.cg_popup{
max-width: 1400px;
background: #fff;
position: relative;
}
.cg_popup img{
width: 100%;
position: relative;
}
.cg_popup .thumbnail li{
cursor: pointer;
transition: all 0.4s ease; animation: all 0.4s ease;
}
.cg_popup .thumbnail li:hover{ opacity: 0.4; }


/* 店舗特典 */
#shop{
width: 100%;
position: relative;
padding: 0 0 100px;
}
#shop .note{
width: 100%;
position: relative;
padding: 0 2%;
}
#shop .note p{
width: 100%;
z-index: 1;
text-align: center;
font-size: 26px;
position: relative;
text-shadow: 0 0 5px #fff , 0 0 5px #fff , 0 0 5px #fff , 0 0 5px #fff , 0 0 5px #fff , 0 0 5px #fff , 0 0 5px #fff , 0 0 5px #fff;
}
#shop .note img{
width: auto;
display: block;
position: relative;
margin: 0 auto;
}
#shop ul{
width: 100%;
max-width: 1010px;
display: flex;
flex-wrap: wrap;
justify-content: center;
position: relative;
margin: 0 auto;
padding: 0 calc(2% - 5px);
}
#shop ul li{
width: calc(50% - 10px);
background: #fff;
position: relative;
margin: 0 5px 30px;
padding: 10px;
border-radius: 10px;
border: #429be8 1px solid;
}
#shop ul li img{
width: 100%;
position: relative;
margin: 10px 0;
border-radius: 5px;
}
#shop ul li p{
width: 100%;
text-align: center;
font-size: 18px;
position: relative;
}
#shop ul li span{
width: 100%;
display: block;
text-align: center;
font-size: 16px;
text-align: center;
position: relative;
margin: 0 0 10px;
}
#shop ul li .button{
width: 100%;
display: flex;
justify-content: center;
position: relative;
}
#shop ul li .button a{
width: 300px;
background: #e7306b;
display: block;
text-align: center;
font-size: 16px;
text-decoration: none;
color: #fff;
position: relative;
padding: 10px 0;
border-radius: 10px;
}


/* スペック */
#spec{
width: 100%;
position: relative;
padding: 0 2% 100px;
}
#spec .item{
width: 100%;
max-width: 1200px;
display: flex;
position: relative;
margin: 0 auto;
}
#spec .item dl{
width: calc(50% - 10px);
display: grid;
grid-template-columns: auto auto 1fr;
position: relative;
}
  #spec .item dl:nth-child(1){ margin: 0 20px 0 0; }
#spec .item dl *{
font-size: 16px;
text-shadow: 0 0 5px #fff , 0 0 5px #fff , 0 0 5px #fff , 0 0 5px #fff , 0 0 5px #fff , 0 0 5px #fff , 0 0 5px #fff , 0 0 5px #fff;
}
#spec .item dl dt,
#spec .item dl dd{
position: relative;
margin: 0 0 10px;
}
#spec .item dl hr{
width: 100%;
position: relative;
margin: 15px 0;
border-bottom: 1px #cdcdcd solid;
}
#spec .accent{
display: block;
position: relative;
margin: 20px auto;
}
#spec .topic{
width: 100%;
display: flex;
justify-content: center;
position: relative;
}
#spec .topic li{
width: 100%;
max-width: 200px;
position: relative;
margin: 0 5px;
}
#spec .topic li a{
width: 100%;
display: block;
position: relative;
}
#spec .topic li a img{
width: 100%;
border-radius: 5px;
}


/* フッター */
footer{
width: 100%;
max-width: 1400px;
background: #fff;
position: relative;
margin: 0 auto;
padding: 50px 2%;
}
footer a{
width: 100%;
max-width: 180px;
display: block;
position: relative;
margin: 0 auto 20px;
}
footer a img{ width: 100%; }
footer p{
width: 100%;
font-size: 12px;
text-align: center;
position: relative;
margin: 0 auto;
}


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


/* レスポンシブ */


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



}


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

  /* メイン */
  main{ max-width: 1100px; }

}


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

  #chara{ overflow: hidden; }
  #chara .set .img > div{ width: 60%; }

}


/* end */