@charset "utf-8";


/* ベース */
body{ height: 100%; background: #000; -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: text-bottom; }


/* フォント */
*{
font-family: "Noto Sans JP", sans-serif;
font-feature-settings: "palt";
font-weight: 600;
font-style: normal;
color: #fff;
line-height: 1.5em;
}
.f_title,
.f_title *{ font-family: "Kaisei Decol", serif; font-weight: 400; line-height: 1.1em; }
::selection{ background: rgba(133, 133, 133, 0.5); color: #fff; }


/* ボタンリンク */
.bt-link{ transition: all 0.8s ease; animation: all 0.8s ease; box-shadow: 0px 0px 30px rgba(239, 61, 255, 0.0); }
.bt-link:hover{
-webkit-animation-name: pulse;
animation-name: pulse;
box-shadow: 0px 0px 30px rgba(239, 61, 255, 0.5);
}
.no-link{ opacity: 0.2; cursor: default !important; }
.font-link{
transition: all 0.8s ease; animation: all 0.8s ease;
color: #ff5ade !important;
border-bottom: 1px #ff5ade solid !important;
text-shadow: 0px 0px 8px rgba(239, 61, 255, 0.0);
}
.font-link:hover{
color: #ffd9e5 !important;
border-bottom: 1px #ffd9e5 solid !important;
text-shadow: 0px 0px 8px rgba(239, 61, 255, 1);
}

/* ローディング */
#loading{
width: 100%;
height: 100%;
z-index: 9999;
background: #242424 url(../img/_bg_img01.jpg) center;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
position: fixed;
top: 0;
left: 0;
padding: 100px 5%;
}
#loading .item{
width: 100%;
max-width: 600px;
position: relative;
}
#loading .item img{
width: 100%;
position: relative;
margin: 0;
}
#loading .item #loading_text{
width: 100%;
text-align: center;
font-size: 14px;
line-height: 1.0em;
color: #242424;
position: relative;
margin: 0;
}
.load{
display: none;
position: relative;
}


/* ページトップ */
#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;
position: relative;
margin: 0 auto;
}
main > .bg{
width: 100%;
height: 100vh;
background: #000 url(../img/_bg_img01.jpg) center;
position: fixed;
top: 0;
left: 0;
}
.wp{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}


/* メニュー */
header{
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 8888;
}
header.home{ top: -150px; }
header .bg{
width: 100%;
height: 150px;
background: -webkit-linear-gradient(180deg, rgba(0,0,0,0.5), rgba(255,255,255,0.0));
background: linear-gradient(180deg, rgba(0,0,0,0.5), rgba(255,255,255,0.0));
position: absolute;
top: 0;
left: 0;
pointer-events: none;
}
header nav{
width: 100%;
max-width: 1600px;
position: relative;
margin: 0 auto;
}
header nav ul{
width: 100%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
header nav ul li,
header nav ul p{
height: 100%;
display: flex;
position: relative;
}
nav ul p{
font-size: 10px;
line-height: 1em;
}
header nav li a{
width: 100%;
height: 100%;
display: flex;
align-items: center;
font-size: 22px;
line-height: 1em;
text-decoration: none;
position: relative;
padding: 20px 25px;
}
header nav li a.font-link{
color: #fff !important;
border-bottom: none !important;
}
header nav li a.font-link:hover{
border-bottom: none !important;
}


/* フッター */
footer{
width: 100%;
min-width: 1200px;
background: #000;
position: relative;
margin: 0 auto;
padding: 60px 5%;
}
footer .bt-top{
width: 96px;
display: block;
position: relative;
margin: 0 auto 30px;
cursor: pointer;
transition: all 0.8s ease; animation: all 0.8s ease;
}
footer .bt-top:hover{
-webkit-animation-name: pulse;
animation-name: pulse;
}
footer .bt-top img{ width: 100%; }
footer ul{
width: 100%;
max-width: 1600px;
display: flex;
justify-content: center;
position: relative;
margin: 0 auto 30px;
}
footer ul li{
width: 60px;
position: relative;
margin: 0 10px;
}
footer ul li a{
width: 100%;
overflow: hidden;
display: block;
position: relative;
border-radius: 100%;
}
footer ul li a img{
width: 100%;
}
footer p{
width: 100%;
max-width: 1400px;
font-size: 16px;
line-height: 1.0em;
font-style: normal;
text-align: center;
position: relative;
margin: 0 auto;
}


/* 見出し */
h2.com{
width: 100%;
max-width: 1600px;
z-index: 10;
display: flex;
flex-wrap: wrap;
justify-content: center;
position: relative;
margin: 0 auto 80px;
}
h2.com p{
width: 100%;
z-index: 1;
font-size: 55px;
text-align: center;
position: relative;
margin: 0 0 10px;
}
  h2.rev p{ margin: 10px 0 0; }
h2.com .img{
width: 100%;
height: 40px;
background: url(../img/_h2_img01.webp) no-repeat center;
position: relative;
}
  h2.rev .img{ transform: scale(1,-1); }
h2.com span{
width: 100%;
z-index: 1;
font-size: 20px;
text-align: center;
position: relative;
margin: -30px 0 0;
}
  h2.rev span{ margin: 0 0 -30px; }


/* フレームa */
.base-frame{
width: 100%;
height: 100%;
z-index: 100;
opacity: 0.8;
position: absolute;
top: 0;
left: 0;
mix-blend-mode: color-dodge;
pointer-events: none;
}
.base-frame > div{
width: 100%;
height: 100%;
position: relative;
padding: 1%;
}
.base-frame .f_1{
width: 100%;
height: 146px;
display: flex;
position: relative;
}
.base-frame .f_1.re{ transform: scale(1,-1); }
	.base-frame.min .f_1
.base-frame .f_1 .img01{
width: 146px;
position: relative;
}
.base-frame .f_1 .img02{
width: 146px;
transform: scale(-1,1);
position: relative;
}
.base-frame .f_1 .line{
width: 100%;
height: 7px;
background: url(../img/_frame_a02.gif) repeat-x top;
position: relative;
}
.base-frame .f_2{
width: 100%;
height: calc(100% - 292px);
position: relative;
}
.base-frame .f_2 .line_1{
width: 7px;
height: 100%;
background: url(../img/_frame_a03.gif) repeat-y;
position: absolute;
top: 0;
left: 0;
}
.base-frame .f_2 .line_2{
width: 7px;
height: 100%;
background: url(../img/_frame_a03.gif) repeat-y;
transform: scale(-1,1);
position: absolute;
top: 0;
right: 0;
}
/* フレームb */
.frame_b{
width: 100%;
max-width: 1600px;
position: relative;
margin: 0 auto;
}
  .frame_b.rev{ transform: scale(1,-1); }
.frame_b .img{
width: 100%;
height: 53px;
background: url(../img/_frame_b.webp) no-repeat center;
position: relative;
}
.frame_b .line{
width: 100%;
height: 2px;
background: #534124 url(../img/_bg_img02.jpg);
position: relative;
}


/* ボタンベース */
.bt-base{
width: 100%;
display: flex;
justify-content: center;
position: relative;
}
.bt-base a{
width: auto;
background: #242424 url(../img/_bg_img01.jpg) center;
display: inline-block;
font-size: 20px;
color: #fff !important;
text-decoration: none;
position: relative;
margin: 0 10px;
padding: 10px 25px;
/*border: #ff5ade 2px solid;*/
text-shadow: none !important;
border-radius: 50px;
}



/* HOME */


/* top */
#home #top{
width: 100%;
background: url(../img/top_bg_img03.jpg) no-repeat center;
background-size: cover;
position: relative;
}
/* top 背景 */
#home #top .bg{
width: 100%;
overflow: hidden;
display: flex;
justify-content: center;
position: relative;
margin: -100vh 0 0;
padding: 0 5%;
}
#home #top .bg > img{
width: 100%;
max-width: 270px;
min-width: 100px;
display: block;
position: absolute;
bottom: 0;
right: 0;
}
#home #top .bg > div{
width: 100%;
max-width: 1920px;
display: flex;
justify-content: flex-end;
position: relative;
margin: 0 auto;
}
#home #top .bg > div > div{
width: 60%;
display: flex;
justify-content: center;
position: relative;
}
#home #top .bg .img{
width: 100%;
min-width: 1000px;
}
#home #top .bg p{
width: 10%;
max-width: 110px;
min-width: 80px;
z-index: 3;
position: absolute;
top: 5%;
left: 12%;
}
#home #top .bg p img{ width: 100%; }
/* top コンテンツ */
#home #top .item{
width: 100%;
height: 100vh;
z-index: 5;
display: flex;
align-items: center;
justify-content: flex-start;
position: sticky;
top: 0;
left: 0;
}
#home #top .item > div{
width: 50%;
display: flex;
justify-content: center;
position: relative;
padding: 0 5%;
}
#home #top .item > div > div{
width: 85%;
max-width: 780px;
min-width: 550px;
position: relative;
margin: 7.5% 0 0 0;
}
#home #top .item .adv{
width: 100%;
position: relative;
margin: 0 0 -8%;
}
#home #top .item h1{
width: 100%;
position: relative;
margin: 0 0 -6%;
}
#home #top .item .staff{
width: 100%;
position: relative;
margin: 0 0 -1.5%;
}
#home #top .item .day{
width: 100%;
position: relative;
}
#home #top .item .adv img,
#home #top .item h1 img,
#home #top .item .staff img,
#home #top .item .day img{ width: 100%; }
@-webkit-keyframes TopfadeInUp {
  from {
    opacity: 0;
    top: 40px
  }
  to {
    opacity: 1;
    top: 0
  }
}
@keyframes TopfadeInUp {
  from {
    opacity: 0;
    top: 40px
  }
  to {
    opacity: 1;
    top: 0
  }
}
.TopfadeInUp {
  -webkit-animation-name: TopfadeInUp;
  animation-name: TopfadeInUp;
}


/* info */
#home #info{
width: 100%;
position: relative;
padding: 130px 0;
}
/* info 更新情報 */
#home #info #news{
width: 100%;
position: relative;
margin: 0 0 30px;
padding: 0 5%;
}
#home #info #news > div{
width: 100%;
max-width: 1600px;
position: relative;
margin: 0 auto;
}
#home #info #news .frame_b .old-bt{
width: auto;
display: inline-block;
position: absolute;
bottom: 7px;
right: 0;
cursor: pointer;
}
#home #info #news .item{
width: 100%;
position: relative;
margin: 30px 0 0;
}
#home #info #news .item dl{
width: 100%;
display: flex;
align-items: flex-start;
position: relative;
}
  #home #info #news .item dl:nth-child(n+2){ display: none; }
/*
#home #info #news .item dl::-webkit-scrollbar{ width: 8px; }
#home #info #news .item dl::-webkit-scrollbar-track{ background: rgba(255,255,255,0.15); border-radius: 5px; }
#home #info #news .item dl::-webkit-scrollbar-thumb{ background-color: #ff5ade; border-radius: 5px; }
*/
#home #info #news .item dl dt{
width: 130px;
font-size: 20px;
position: relative;
}
#home #info #news .item dl dd{
width: calc(100% - 130px);
font-size: 20px;
position: relative;
}
#home #info #news .item dl dd a{ text-decoration: none; }
#home #info #news .item > hr{
width: 100%;
display: none;
position: relative;
border-bottom: 1px #534124 solid;
margin: 30px 0;
}
#home #info #news > div > hr{
width: 100%;
position: relative;
border-bottom: 2px #534124 solid;
margin: 30px 0;
}
/* info トピック */
#home #info #topic{
width: 100%;
position: relative;
padding: 0 calc(5% - 15px);
}
#home #info #topic ul{
width: 100%;
max-width: 1630px;
display: flex;
flex-wrap: wrap;
position: relative;
margin: 0 auto;
}
#home #info #topic ul li{
width: calc(33.33% - 30px);
position: relative;
margin: 0 15px 30px;
}
#home #info #topic ul li a{
width: 100%;
display: block;
position: relative;
}
#home #info #topic ul li a img{ width: 100%; }


/* about */
#home #about{
width: 100%;
position: relative;
}
#home #about > .bg{
width: 100%;
height: 100vh;
background: url(../img/_bg_img04.jpg) no-repeat;
background-size: cover;
position: sticky;
top: 0;
}
/* about ポイント */
#home #about #point{
width: 100%;
overflow: hidden;
position: relative;
margin: -100vh 0 0 0;
padding: 130px 5%;
}
#home #about #point > div{
width: 100%;
max-width: 1600px;
position: relative;
margin: 0 auto;
}
#home #about #point .bg{
width: 100%;
height: 100%;
z-index: 1;
display: flex;
align-items: center;
justify-content: flex-end;
position:  absolute;
top: 0;
left: 0;
}
#home #about #point .bg > div{
width: 50%;
max-width: 777px;
min-width: 700px;
position: relative;
left: 10%;
}
#home #about #point .bg img{
width: 100%;
position: relative;
}
#home #about #point .bg img:nth-child(2){
position: absolute;
top: 0;
left: 0;
}
#home #about #point .item{
width: 100%;
position: relative;
}
#home #about #point .item *{ text-shadow: 0 0 15px rgba(0,0,0,0.8); }
#home #about #point .item dl{
width: 60%;
z-index: 5;
position: relative;
}
#home #about #point .item dl dt{
width: 100%;
position: relative;
margin: 0 0 30px;
}
#home #about #point .item dl dt .point-bg{
width: 150px;
height: 150px;
opacity: 0.3;
position: absolute;
top: -55px;
left: -7%;
}
#home #about #point .item dl dt .point-bg img{ width: 100%; }
#home #about #point .item dl dt p{
width: 100%;
font-size: 26px;
position: relative;
margin: 0 0 10px;
}
#home #about #point .item dl dt h3{
width: 100%;
font-size: 50px;
position: relative;
}
#home #about #point .item dl dt h3 span{
font-size: 50px;
color: #ff5ade;
}
#home #about #point .item dl dd{
width: 100%;
font-size: 20px;
position: relative;
padding: 0 0 0 50px;
}
#home #about #point .item hr{
width: 100%;
position: relative;
margin: 30px 0;
border-bottom: 1px #fff solid;
}
/* about あらすじ */
#home #about #story{
width: 100%;
position: relative;
padding: 0 5% 130px;
}
#home #about #story *{ color: #534124; }
#home #about #story h2.com p span{ color: #ff5ade; }
#home #about #story .item{
width: 100%;
max-width: 1600px;
background: #534124 url(../img/_bg_img02.jpg);
position: relative;
margin: 0 auto;
padding: 20px;
border-radius: 20px;
}
#home #about #story .item > div{
width: 100%;
background: #eee url(../img/_bg_img03.jpg);
padding: 80px 50px 50px;
border-radius: 10px;
}
#home #about #story .item *{ text-shadow: 0 0 15px rgba(255,255,255,1.0); }
#home #about #story .item .bg{
width: 100%;
opacity: 0.3;
position: absolute;
bottom: 0;
left: 0;
mix-blend-mode: color-burn;
}
#home #about #story .item .bg img{ width: 100%; }
#home #about #story .item > div > p{
width: 100%;
text-align: center;
font-size: 22px;
line-height: 2.0em;
position: relative;
margin: 0 0 50px;
}


/* chara */
#home #chara{
width: 100%;
position: relative;
padding: 130px 0;
}
#home #chara .item{
width: 100%;
overflow: hidden;
position: relative;
margin: 0 0 -4%;
padding: 0 5%;
}
#home #chara .item > div{
width: 100%;
max-width: 1600px;
display: flex;
align-items: center;
position: relative;
margin: 0 auto;
}
#home #chara .item.re > div{ flex-direction: row-reverse; }
/* chara イメージ */
#home #chara .img{
width: 50%;
position: relative;
}
#home #chara .img .bg{
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
left: 0;
}
#home #chara .img .bg img{
width: 100%;
}
#home #chara .img .box{
width: 100%;
position: absolute;
left: 0;
right: -10%;
}
#home #chara .img .box img{
width: 100%;
display: none;
position: relative;
}
#home #chara .img .box img:first-child{ display: block; }
#home #chara .box.p_2,
#home #chara .box.p_3,
#home #chara .box.p_4{ display: none; }
#home #chara .item.re .box{
left: 0;
right: -10%;
}
#home #chara .img p{
width: 100%;
position: relative;
}
#home #chara .img p img{ width: 100%; }
#home #chara #c_2 .img .box img{ margin: 0 0 0 -8%; }

/* chara 紹介 */
#home #chara .info{
width: 50%;
position: relative;
}
#home #chara .info .name{
width: 100%;
position: relative;
margin: 0 0 40px;
}
#home #chara .info .name span{
width: 100%;
display: block;
font-size: 18px;
line-height: 1.0em;
position: relative;
}
#home #chara .info .name h3{
width: 100%;
z-index: 1;
font-size: 75px;
line-height: 1.2em;
position: relative;
}
#home #chara .info .name .line{
width: 100%;
height: 1px;
display: flex;
align-items: center;
position: relative;
margin: 5px 0 10px;
}
#home #chara .info .name .line img{
position: absolute;
top: -129px;
left: 0;
}
#home #chara .info .name .line hr{
width: 100%;
position: relative;
border-bottom: 1px #534124 solid;
}
#home #chara .info .name p{
width: 100%;
z-index: 1;
font-size: 26px;
text-align: right;
position: relative;
}
#home #chara .info .intro{
width: 100%;
font-size: 20px;
position: relative;
margin: 0 0 40px;
}
#home #chara .info dl{
width: 100%;
display: flex;
align-items: center;
position: relative;
margin: 0 0 20px;
}
#home #chara .info dl dt{
width: 80px;
flex-shrink: 0;
font-size: 18px;
line-height: 1.0em;
color: #fff;
position: relative;
}
#home #chara .info dl dd{
width: calc(100% - 90px);
display: flex;
position: relative;
}
#home #chara .info dl dd a{
width: 50px;
height: 50px;
background: #eee url(../img/_bg_img03.jpg);
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
line-height: 1.0em;
font-weight: bold;
color: #03181f;
position: relative;
margin: 0 10px 0 0;
padding: 6px 10px 8px;
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
cursor: pointer;
}
#home #chara .item .info dl dd a.active {
background-color: #ff5ade;
background-image: none;
color: #fff;
box-shadow: 0px 0px 10px rgba(239, 61, 255, 0.8);
}


/* gallery */
#gallery{
width: 100%;
position: relative;
padding: 130px calc(5% - 15px);
}
#gallery .bg{
width: 100%;
height: 100%;
background: url(../img/top_bg_img03.jpg) no-repeat center top fixed;
background-size: cover;
position: absolute;
top: 0;
left: 0;
}
#gallery ul{
width: 100%;
max-width: 1630px;
display: flex;
flex-wrap: wrap;
position: relative;
margin: 0 auto -30px;
}
#gallery ul li{
width: calc(33.33% - 30px);
position: relative;
margin: 0 15px 30px;
}
#gallery ul li a{
width: 100%;
display: block;
background: #534124 url(../img/_bg_img02.jpg);
position: relative;
padding: 10px;
border-radius: 10px;
}
#gallery ul li a > div{
width: 100%;
background: #eee url(../img/_bg_img03.jpg);
position: relative;
padding: 10px;
border-radius: 5px;
}
#gallery ul li a img{ width: 100%; }


/* spec */
#spec{
width: 100%;
overflow: hidden;
position: relative;
padding: 130px 5%;
}
#spec .item{
width: 100%;
max-width: 1600px;
display: flex;
align-items: center;
position: relative;
margin: 0 auto;
}
#spec .item .info{
width: calc(55% - 30px);
position: relative;
margin: 0 30px -50px 0;
}
#spec .item .info dl{
width: 100%;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
position: relative;
margin: 0 20px 50px;
}
#spec .item .info dl dt{
width: 150px;
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-top: 1px #534124 solid;
border-bottom: 1px #534124 solid;
}
#spec .item .info dl dd{
width: calc(100% - 170px);
font-size: 18px;
position: relative;
margin: 0 0 20px;
}
#spec .item .img{
width: 45%;
position: relative;
}
#spec .item .img img{
width: 100%;
border-radius: 15px;
}


/* ボーナス */


#bonus > h2{ margin: 0 auto 130px; padding: 130px 0 0; }
/* 特装版特典 */
#bonus #sp-edition{
width: 100%;
position: relative;
padding: 0 5% 130px;
}
#bonus #sp-edition *{ color: #534124; }
#bonus #sp-edition h2.com p span{
font-size: 55px;
color: #ff5ade;
}
#bonus #sp-edition .item{
width: 100%;
max-width: 1600px;
background: #534124 url(../img/_bg_img02.jpg);
position: relative;
margin: 0 auto;
padding: 20px;
border-radius: 20px;
}
#bonus #sp-edition .item *{ text-shadow: 0 0 15px rgba(255,255,255,1.0); }
#bonus #sp-edition .item > div{
width: 100%;
background: #eee url(../img/_bg_img03.jpg);
padding: 80px 50px 0;
border-radius: 10px;
}
#bonus #sp-edition .item .text{
width: 100%;
font-size: 20px;
text-align: center;
position: relative;
}
#bonus #sp-edition .item .text span{
font-size: 20px;
color: #ff5ade;
font-weight: 700;
}
#bonus #sp-edition .item .text p{
width: 100%;
font-size: 18px;
color: #ff5ade;
text-align: center;
position: relative;
margin: 15px 0 0 0;
}
#bonus #sp-edition .item .img{
width: 100%;
display: flex;
justify-content: center;
position: relative;
}
#bonus #sp-edition .item .img img{
width: 100%;
max-width: 850px;
position: relative;
}
#bonus #sp-edition .item .bt-base{ margin: 50px 0 0; }

/* 店舗特典 */
#bonus #shop{
width: 100%;
position: relative;
position: relative;
padding: 0 5% 130px;
}
#bonus #shop > p{
width: 100%;
max-width: 1600px;
font-size: 22px;
text-align: center;
position: relative;
margin: 0 auto;
}



/* レスポンシブ */


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

  main > .bg{
  height: 100%;
  position: absolute;
  }

}


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



}


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

  #home #top .bg p{
  top: 3%;
  left: auto;
  right: -1%;
  }

}


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

  /* top bg */
  #home #top .bg{ margin: 0; }

  /* top item */
  #home #top .item{
  height: 100%;
  position: absolute;
  }

}


/* end */