@charset "UTF-8";
body{min-width:inherit;min-width:auto;}
img{width: 100%!important}
article{ min-width:inherit;min-width:auto;}
.floor{width: 100%; max-width:inherit;padding:50px 5px;box-sizing:border-box}
.mini{font-size:1.0rem;}
.br768{display: none}

@media screen and (max-width: 640px){
	.br640b{display: block}
	.br640{display: none}
}

@media screen and (max-width: 420px){
	.br420{display: none}
}


/*-load-*/
#loading{width: 90%;}

/*-mv-*/
#mv-contents{min-width:inherit!important;min-width:auto!important;min-height:inherit!important;min-height:auto!important;}
mv-logo{ right:0}
.logo-img{width:60%!important;margin:0 0 0 auto!important}
.release-img{width:60%!important;margin:0 0 0 auto!important}
.mv-banner-sub{width:60%!important;margin:0 0 0 auto!important}
.mv-catch{width:24%!important;}
.mv-catch div{top:60px!important;left:40%!important;-ms-transform: translate(-50%,0)!important;-webkit-transform : translate(-50%,0)!important;transform : translate(-50%,0)!important;}

#mv-demo{width: 50%!important}
.demo{padding:56% 0 0!important;}

@media screen and (max-width: 640px){
	.mv-chara-msup{background-size:cover!important}
	#mv-demo{top:auto!important;right:auto!important; bottom:auto!important;left:auto!important;position:relative!important; width: 100%!important; max-width: inherit!important;background:rgba(255,255,255,.75)!important;padding:20px 0!important}
	.demo{margin: 0 auto!important;max-width: 480px!important;box-shadow:none!important; width:94%!important;padding:44% 0 0!important;}
}

@media screen and (max-width: 480px){
	.demo{padding:55% 0 0!important;}
	.logo-img{width:55%!important;margin:0 auto!important}
	.release-img{width:55%!important;margin:0 auto!important}
	.mv-banner-sub{width:55%!important;margin:0 auto!important}
}

@media screen and (max-height:420px){
	.mv-chara-msup{background-size:contain!important}
	#mv-demo{top:auto!important;right:auto!important; bottom:auto!important;left:auto!important;position:relative!important; width: 100%!important; max-width: inherit!important;background:rgba(255,255,255,.75)!important;padding:20px 0!important}
	.demo{margin: 0 auto!important;max-width: 480px!important;box-shadow:none!important; width:94%!important;padding:44% 0 0!important;}
}

.more-box{ width: 80%; margin: 10px auto 0;}
/*-ヘッダー--*/
header{min-width:inherit;min-width:auto;}
#navi{display:none;background:rgba(0,0,0,.75); overflow: hidden; height: 100%;}
.navi-sub{height:100vh;}
.n-logo{width: 100%; float:none; margin:0;height: 48px; position: relative;border-bottom:1px dotted #bbb;}
.n-logo a{width: 100%;display: block;position: absolute; top:50%;left:50%;border-radius:3px;-ms-transform: translate(-50%,-50%);-webkit-transform : translate(-50%,-50%);transform : translate(-50%,-50%);text-align: center;text-decoration: none;}
.menu{max-width:inherit; float:none;padding:0; margin:0;height: 90%;}
.menu .new{width:50px;right:10px;top:50%;bottom:50%;left:inherit;border-radius:3px;-ms-transform: translate(-50%,0);-webkit-transform : translate(-50%,0);transform : translate(-50%,0);text-align: center;}
.menu li{display: block;margin: 0; border-bottom:1px dotted #bbb; height:43px;}
.menu li:last-of-type{ margin: 0;border-bottom:none }
.menu li.tw{ width: 100%; max-width: inherit;position: relative; border-radius:0;}
.tw a{width: 100%;display: block;position: absolute; top:50%;left:50%;border-radius:3px;-ms-transform: translate(-50%,-50%);-webkit-transform : translate(-50%,-50%);transform : translate(-50%,-50%);text-decoration: none;}
.b00,.b09{display: none}
.b00t,.b09t{display:block}
.b01,.b02,.b03,.b04,.b05,.b06,.b07,.b08{ background:none;width: 100%;text-indent:0}
.b01t,.b02t,.b03t,.b04t,.b05t,.b06t,.b07t,.b08t{ display:block; position: absolute; top:50%;left:50%;border-radius:3px;-ms-transform: translate(-50%,-50%);-webkit-transform : translate(-50%,-50%);transform : translate(-50%,-50%);}
.b01t,.b02t,.b03t,.b04t,.b05t,.b06t,.b07t,.b08t,.b00t,.b09t{font-family:'Playfair Display','Sawarabi Mincho','Times New Roman', '游明朝', 'YuMincho', 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'HG明朝E', 'メイリオ', 'Meiryo', 'serif';font-size:1.9rem;line-height:1.9rem; color:#fff!important;}

/*ハンバーガーメニュー指示*/
#nav-toggle {display: block;}
#nav-toggle {position: fixed;left: 10px;top: 10px;width: 38px;height: 38px;cursor: pointer;z-index: 101; background: rgba(0,0,0,0.5); padding:5px;border-radius:3px;box-sizing: border-box;}
#nav-toggle div { position: relative;}
#nav-toggle span {display: block;position: absolute;height: 4px;width: 100%;background: #fff;left: 0;-webkit-transition: .35s ease-in-out;-moz-transition: .35s ease-in-out;transition: .35s ease-in-out;}
#nav-toggle span:nth-child(1) {top: 0;}
#nav-toggle span:nth-child(2) {top: 12px;}
#nav-toggle span:nth-child(3) {top: 23px;}

/*--最新情報--*/
.infoList{ padding:0 5px;}
.infoList dl{position: relative;padding:20px 0; border-bottom:none}
.infoList dt,
.infoList dd{float:none; position:relative;top:auto;transform:none}

.infoList dt{ width:100%; margin: 0 0 5px; background:#ffecf1;padding:0 0 0 5px}
.infoList dt time{ font-weight: 800}
.infoList dt.new:before{content:'New';top:0;right:0; width:20%;height:inherit;}
.infoList dt.new:after{content:none;}
.infoList dd{margin:10px 0 0;}

/*--トピックス--*/
#topics{ width: 100%;}
.cont{ padding:0 5px; font-size: 0; line-height: 0}
.cont-box{ width: 50%; vertical-align: top; padding:2px;margin: 0}
.cont-box p{ font-size: 1.1rem;}
.c-new{width:16px;-webkit-writing-mode: vertical-rl;-ms-writing-mode: tb-rl;writing-mode: vertical-rl; font-size: 1.0rem;}
.c-new:before{border: 8px solid #c71c48;border-bottom: 5px solid transparent;height: 38px}

@media screen and (max-width: 420px){
.cont-btn{padding:0; border: none;}
}

/*--Tw--*/
.twitter {width:100%!important;margin:40px 0 0}
.tw-box{width:90%; margin: 0 auto; border: 1px solid #e2e9ec}


/*--ストーリー--*/
.story-text{padding:5px 0;font-size:1.4rem; line-height: 2.4rem;}
.story-text b{font-size:1.4rem; line-height: 2.4rem;}

@media screen and (max-width: 420px){
.story-text{text-align: left}
}

/*--ポイント--*/
.point01,.point02{ padding: 50px 0}
.point02{margin: 0}
.point01 h3.subtit{ padding: 30px 0}
.p-text p{font-size:1.4rem; line-height: 2.4rem; padding:10px 5px}
.point01 .p-text{ text-align: center;}
.point01 .p-img{ height: auto; width: 480px;top:50%;left:50%;right:auto;-ms-transform: translate(-50%,-50%);-webkit-transform : translate(-50%,-50%);transform : translate(-50%,-50%);z-index: -1;filter:alpha(opacity=50);-moz-opacity: 0.5;opacity: 0.5;}
.point01 h3.subtit{ text-align: center; padding:5px 0;color:#fff;background: linear-gradient(-90deg,rgba(232,127,255,0)0%,rgba(232,127,255,1.0)50%,rgba(255,55,110,0)100%) fixed!important;background:-webkit-gradient(linear-gradient(-90deg,rgba(232,127,255,0)0%,rgba(232,127,255,1.0)50%,rgba(255,55,110,0)100%))}

.p-text02{ background: rgba(255,255,255,.8); padding: 10px 0;font-weight: 800}
.p-text03{font-weight:normal}

.point02 .p-text{ text-align: center;}
.point02 .p-img{ height: auto; width: 480px;top:50%;left:50%;-ms-transform: translate(-50%,-50%);-webkit-transform : translate(-50%,-50%);transform : translate(-50%,-50%);z-index: -1;filter:alpha(opacity=50);-moz-opacity: 0.5;opacity: 0.5;}
.point02 h3.subtit{ text-align: center; padding:5px 0;color:#fff;background: linear-gradient(-90deg,rgba(255,145,50,0)0%,rgba(255,120,140,1.0)50%,rgba(255,120,140,0)100%) fixed!important;background:-webkit-gradient(linear-gradient(-90deg,rgba(255,145,50,0)0%,rgba(255,120,140,1.0)50%,rgba(255,120,140,0)100%))}

.p-text03,.point02 .p-text03{ display: block;line-height:1.8rem; text-align: center; padding:1px 0; width: 80%; margin: 0 auto 5px}

@media screen and (max-width: 420px){
.point01 .p-text{ text-align: left;}
.point02 .p-text{ text-align: left;}
.point01,.point02{padding: 20px 0}
}

/*---キャラ--*/
#chara01,#chara02,#chara03,#chara04,#chara05{ display:none}
#chara01b,#chara02b,#chara03b,#chara04b,#chara05b{ display:block}

.cha-inner{position: absolute;top: 20px;left: 0;width: 100%;height: 100%;margin: 0 0 0;}
.sp-arrows{ display: none}
.sp-slide{position:relative;position:relative;width:100%;padding:140% 0 0 0;}
#chara .inner{position:absolute;top:0;left:0;width:100%;height:100%;margin:0 0 0}
.sp-horizontal .sp-previous-arrow{left:1%!important;}

.sp-chara{position:absolute;left:0;right:0;margin:auto;width:88%;max-width:640px;}
.voice{bottom:12%; left:0; width: 100%;}
.voice-title{width: 14%;}
.voice-btn{width:26%;margin:0 1%}



/*--ギャラリー--*/
.gallery-box{ font-size: 0; line-height: 0}
.g-sam{ max-width: none; width:49%;margin:0.5%}
@media screen and (max-width: 420px){
.g-sam{ max-width: none; width:100%;margin:0.5% 0}
}

/*-spec--*/
.spec-text{display: -webkit-block;display: -ms-block;display:block;-webkit-box-pack: left;-ms-flex-pack:left;justify-content:left; text-align:left}
.spec-tit02{max-width: none; width: 100%}
.spec-tit{text-align: left;font-size:1.6rem;padding:0 15px}
.spec-text .block{ text-align: left}

.img-box-spec{ text-align: center}
.img-sam-spec{width: 40%}

@media screen and (max-width: 640px){
	.item-spec-img{ width: 100%!important;}
	.item-spec-text{ width: 100%; padding:0;}
	.item-spec-text-sub:first-of-type{margin:10px 0 2px;}
	.img-sam-spec{width:49%}
}

@media screen and (max-width: 480px){
	.item-spec-list td{padding:5px;}
	.item-spec-list tr:first-of-type td{text-align:left}
	.spec-text li{padding:15px 5px}
	.s-name{display: block}
	.img-sam-spec{padding:3px}
}


/*--footer--*/
footer{min-width:inherit;min-width:auto;}
.footimg{display: -webkit-blox;display: -ms-blox;display: blox;}
.footimg div{-webkit-box-flex:none;-ms-flex:none;flex:none;padding:0 3% 1%; display: inline-block; width: 25%;}
#footer:after{;width: 100%; height:73px;background-size:contain;}

@media screen and (max-width: 420px){
	.footimg div{padding:0 2% 1%; display: inline-block; width: 25%;}
}

/*--pagetop-*/
#support{height:auto}
#pt-box{min-width:inherit;min-width:auto;}

/*--サポート--*/
#support h1.subtit{padding:60px 0 0 }
#support p{ text-align: left; line-height: 2.4rem;}
label p{ text-align: left!important}
fieldset {width:100%; padding:40px 10px 20px}
label{float:none;margin-right:0px;text-align:left; display:block}
input{width:100%;}
textarea{width:100%;}
select{width:100%;}









/*--ティザー-*/
.inner{width:100%;height:100%;}

/*---ロード----------------------*/
div#loader .lord-img{width: 100%; height:100%; position:relative}
div#loader .lord-img img{ width:100%;position:absolute; max-width:640px; top:0; bottom:0; left:0; right:0; margin:auto} 

/*---メインビジュアル------------*/
.mv{min-width:initial;height:100%; min-height:initial}
.main .logo{ width:80%; max-width:480px;position:absolute;margin:auto; left:0; right:0;bottom:20%; top:inherit}
.main .copy,.main .tw{left:5px;right:inherit;}
.main .copy{top:5px;}
.main .tw{top:65px}
.main .release{ width:55%;bottom:10%}
.main .catch01{ width:6%;left:38%;top:10%;}

@media screen and (max-width: 480px){
.main .catch01{ width:10%;left:33%;top:10%;}
.main .release{bottom:13%}
}
@media screen and (max-width: 420px){
.aba420{ display:block;}
.main .staff{font-size:1.0rem; line-height:1.4rem;}
}
@media screen and (max-width: 400px){
.main .logo{bottom:35%;}
.main .release{width:72%;bottom:20%}
}

@media screen and (max-height: 420px){
div#loader .lord-img img{max-width:320px;}
.main .staff{font-size:1.0rem; line-height:1.4rem;}
.mv{min-height:480px}
.logo-img{width:55%!important;margin:0 0 0 auto!important}
.release-img{width:55%!important;margin:0 0 0 auto!important}
.mv-banner-sub{width:55%!important;margin:0 0 0 auto!important}
	
.main .logo{ width:50%; bottom:40%}
.main .release{ width:50%; bottom:18%}
}
@media screen and (max-height: 320px){
div#loader .lord-img img{max-width:320px;}
.main .staff{font-size:1.0rem; line-height:1.4rem;}
.mv{min-height:320px}
.main .logo{ width:44%; bottom:42%}
.main .release{ width:50%; bottom:20%}
}