/*////////////////////////////////////////////////////////////////////////
reset
////////////////////////////////////////////////////////////////////////*/
* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	vertical-align: top;
}

html {
	/*image-rendering: -webkit-optimize-contrast;*/
}

body{
	overflow-y: scroll; /* スクロールバー常に表示 */
}

html,body {
	font-size-adjust:100%;
	-webkit-font-size-adjust: 100%;
}

body,h1,h2,h3,h4,h5,h6,p,img,
hr,li,ul,dl,dt,dd
{
	padding: 0;
	margin: 0;
	border: 0;
	list-style: none;
}

table th{font-weight:normal;}

img{
	width: 100%;
	border:0px;
	image-rendering:auto;
}

.clear{clear:both;}

.clearfix:after {
  content: "";
  clear: both;
  display: block;
}

.e_shop_Bt{
	display: block;
	position: relative;
	margin: 0.5em 0 0;
	max-width: 256px;
	transition: all 200ms 0s ease-out;
	transform: scale(1);
}
.e_shop_Bt:hover{
	transform: scale(1.1);
}

/*////////////////////////////////////////////////////////////////////////
基本カラー
////////////////////////////////////////////////////////////////////////*/
:root{
--black:#181818;
--gray:#adadad;
--white:#fefeff;
	
--red:#96053b;
--gold:#bea373;
--pink:#e20384;
--yellow:#ffff37;
--orange:#ff9c00;
	
	
--black50: rgba(0,0,0,0.5);
--black70: rgba(0,0,0,0.7);
--white10: rgba(255,255,255,0.1);
--white30: rgba(255,255,255,0.3);
--white50: rgba(255,255,255,0.5);
--white70: rgba(255,255,255,0.7);
--white80: rgba(255,255,255,0.8);
	
--c0:#4BA1FF;
--c1:#521F95;
--c2:#FFFF21;
--c3:#FFA7A7;
--c4:#F12B2C;
--c5:#F98315;
	
--c6:#F500EB;
	
--c9:#19204E;
	
--c99:#9b9b9b;
	
/*
#FED776
#9FF086

#05F3FF
#FF1971
#CC9900
#9DFA06
#A08ED2
#169A13
*/
	
}


/*////////////////////////////////////////////////////////////////////////
基本
////////////////////////////////////////////////////////////////////////*/
.non{
	opacity:0.3;
	cursor:default;
	pointer-events: none;
}

ruby {
        display: inline-table;
        border-collapse: collapse;
        margin: 0;
        padding: 0;
        border: none;
        white-space: nowrap;
        text-indent: 0;
        vertical-align: bottom;
        text-decoration: inherit;
        text-align: center;
        }
ruby>rt {
    display: table-header-group;
    height: 25%;
    margin: 0;
    padding: 0 0.125em;
    border: none;
    font: inherit;
    line-height: 1.1em;
	text-align: center;
	font-size: 50%;
	position: relative;
	transform: translateY(0.5em);
    }

br.txtCutNone{display:none;}

a{
	color: var(--white);
	text-decoration:none;
	outline:none;
}

a:hover{
	text-decoration: none;
}

::selection {
	color: #fff;
	background-color:#00b4c8;
}
::-moz-selection {
	color: #fff;
	background-color:#00b4c8;
}

hr.solidLine{
	border-top: solid 1px var(--gold);
}

.txtCutNone{
	display: none;
}

.fadeUp{
	opacity: 0;
	position: relative;
	bottom: -20px;
}

.lSpace{
	letter-spacing: -0.2em;
}

.txtLink{
	letter-spacing: 0.05em;
	padding:0.2em 0.5em;
	display: inline-block;
	color: var(--red);
	font-weight: bold;
}

.txtLink:hover{
	color: var(--gold);
}

table.cast{
	border-collapse:collapse;
}


/*////////////////////////////////////////////////////////////////////////
全体ボックス
////////////////////////////////////////////////////////////////////////*/
html{
}

body{
	font-family:"メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size:15px;
	color: var(--white);
	min-width: 1300px;
	background-color: var(--black);
	letter-spacing: 0.05em;
}

body::after {
	content:"";
	display:block;
	position:fixed;
	top:0;
	left:0;
	z-index:-3;
	width:100%;
	height:100vh;
	background-image: url("../img/animebg_1.jpg");
	background-position: center bottom;
	background-repeat: no-repeat;
	background-size: auto;
}

.bgAnimewrap{
	position: relative;
	overflow: hidden;
}
	
.bgAnime{
	position: fixed;
	inset: 0;
	z-index: -1;
	overflow: hidden;
}

.bgAnime img{
	width: 100%;
	height: 100vh;
	object-fit: cover;
	object-position: right bottom; 
}

.bgAnime2{
	clip-path: inset(0 100% 0 0);
	background-position: center bottom;
}

.bgAnime3{
	transform: scale(5);
	opacity: 0;
	background-position: center bottom;
}

.bgAnime2.is-inview{
	animation: revealMask 0.2s ease forwards;
	animation-delay: 0.5s;
}

.bgAnime3.is-inview{
	animation: zoomOut 0.1s ease forwards;
	animation-delay: 1s;
}

@keyframes revealMask {
	from { clip-path: inset(0 100% 0 0); }
	to   { clip-path: inset(0 0 0 0); }
}

@keyframes zoomOut {
	from {
		transform: scale(5);
		opacity: 0;
	}
	to {
		transform: scale(1);
		opacity: 1;
	}
}



h1{
	padding: 5% 0 3%;
	position: relative;
	z-index: 1;
}

h1 img{
	width: 70%;
	max-width: 550px;
}


h2{
	margin: 0.5em auto 2em;
	text-align: center;
	position: relative;
	z-index: 1;
}

h2 img{
	max-width:800px;
}


h3{
	border-top: double 3px var(--black);
	border-bottom: double 3px var(--black);
	font-weight: normal;
	padding: 0.5em;
	letter-spacing: 0.05em;
	margin: 2em auto;
}


h4{
	border-bottom: 3px double var(--black);
	padding-bottom: 0.3em;
	margin-bottom: 0.3em;
	font-size: 120%;
}

#backTop{
	width: 10%;
	max-width: 80px;
	z-index: 99;
	position: fixed;
	bottom: 2%;
	right: 1%;
	cursor: pointer;
	overflow: hidden;
	background-color: var(--white);
	border: solid 2px var(--gold);
	border-radius: calc(1px/0);
}

@media (hover: hover) { /*PC*/
	#backTop:hover{
		background-color: var(--red);
	}
}

@media (hover: none) { /*タッチ端末*/
	#backTop:active{
		background-color: var(--red);
	}
}

#backTop img{
	width: 100%;
}


.storySmpL{
	padding: 0.2em 0 0 0.5em !important;
}

.storySmpR{
	padding: 0.2em 0.5em 0 0 !important;
}


/*////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////*/
#loading{
	width:100%;
	height: 100%;
	position:fixed;
	z-index:99;
	display: flex;
    justify-content: center;
    align-items: center;
	text-align:center;
	pointer-events: none;
	background-image: url("../img/bg_2.jpg");
	background-size: cover;
	background-position: center center;
	background-color: var(--red);
}

#loading p{
	display: block;
	width: 100%;
	padding: 5px;
}

#loading p img{
	width: 50%;
	max-width: 300px;
}

#mainBox{
	width: 100%;
	margin: auto;
	opacity: 0;
	text-align: center;
	position: relative;
	z-index: 0;
}

.subBox{
	margin-top: 4%;
	/*padding-top: 4em;*/
	min-height: 80vh;
}

.inBox{
	max-width: 1300px;
	padding:5em 3%;
	margin: auto;
}

.subBox .inBox{
	padding:1em 3%;
}

.subBox h2{
	max-width: 600px;
}

.indent{
	padding-left: 1em;
}

.indent li{
	text-indent: -1em;
	line-height: 1.2em;
	margin-bottom: 0.4em;
}

/*////////////////////////////////////////////////////////////////////////
モーション
////////////////////////////////////////////////////////////////////////*/
:root{
	--size:3480px;
	--size2:1920px;
}

/*
.roopTxtBg{
	background-image: url("../img/bg_top.png"), url("../img/bg_bottom.png");
	background-repeat: repeat-x, repeat-x;
	background-size: var(--size) auto, var(--size) auto;
	animation: bg-slider 20s linear infinite; 
}
*/

.roopTxtBg{
	background-image: url("../img/bg_top.png"), url("../img/bg_bottom.png");
	background-repeat: repeat-x, repeat-x;
	background-size: var(--size) auto, var(--size) auto;
	background-position: 90% -10%, 2% 110%;
}

@keyframes bg-slider {
	from {
		background-position:
			/*calc(100% - var(--size)) -10%,*/
			0 -10%,
			0 110%;
	}
	to {
		background-position:
			/*calc(100% - var(--size) + var(--size)) -10%,*/
			var(--size) -10%,
			var(--size) 110%;
	}
}


:root{
	--img-w: 1920px; /* 元画像幅 */
	--speed: 5s;
}

/* スマホ時：50% */
@media (max-width: 800px){
	:root{
		--img-w: 640px;
	}
}

.roopArrowBg{
	background-image:
		url("../img/arrow_white.png"),
		url("../img/arrow_white.png");

	background-repeat: repeat-x, repeat-x;

	background-size:
		var(--img-w) auto,
		var(--img-w) auto;

	animation: arrow-loop-shift var(--speed) linear infinite;
}

@keyframes arrow-loop-shift{
	0%{
		background-position:
			0 top,
			calc(var(--img-w) * -0.5) bottom;
	}
	100%{
		background-position:
			var(--img-w) top,
			calc(var(--img-w) * 0.5) bottom;
	}
}




/*////////////////////////////////////////////////////////////////////////
ヘッダー
////////////////////////////////////////////////////////////////////////*/
header{
	width: 100%;
	position: fixed;
	background-color: var(--black);
	z-index: 999;
	top: 0;
	left: 0;
	min-width: 1300px;
}

/* ------------------------------
ナビ
------------------------------*/
:root{
	--nLogo:10.5%;
	--nShop:46%;
	--nOther:27%;
	--iconBox:20%;
}

header nav{
	display: inline-block;
	text-align: center;
	position: relative;
	vertical-align: middle;
	width: calc(100% - var(--nLogo) - var(--iconBox));
	font-size:min(1vw,17px);
	font-weight: bold;
}

header nav ul{
	margin: auto;
	margin-left: -2em;
}

header nav ul li{
	position: relative;
	display: inline-block;
	margin: 0.1em;
	border: none;
}

header nav ul li a{
	display: inline-block;
	padding: 1em 0.8em;
	font-size: 90%;
}

header nav ul li.select a,
header nav ul li a:hover{
	background-image: url("../img/select.png");
	background-size: 2em;
	background-repeat: no-repeat;
	background-position: left center;
}

header .iconBox{
	width: var(--iconBox);
	display: inline-block !important;
	text-align: right;
}

header .iconBox p{
	display: inline-block;
	text-align: center;
	vertical-align: middle;
}

header nav ul li span{
	display: none;
}


/* ------------------------------
ナビボタン
------------------------------*/
 header .navBtn,
 header .spArea{
	display: none !important;
}

header .logo{
	width: var(--nLogo);
	display: inline-block;
	vertical-align: middle;
	text-align: left;
}

header  .shopBtn{
	width: var(--nShop);
	background-color: var(--red);
}

header  .youtubeBtn,
header  .snsBtn,
header  .navBtn{
	width: var(--nOther);
	transition: transform .5s ease;
}

header  .shopBtn img:hover,
header  .youtubeBtn img:hover,
header  .snsBtn img:hover{
	transform: scale(1.1);
	transition: transform .5s ease;
}


/* ------------------------------
ボトムナビ
------------------------------*/
#bottomNavi{
    display: none;
}

/* ------------------------------
サブナビ
------------------------------*/
#subNavi{
	width: 100%;
	margin: auto;
}

.nomalNavi ul li{
	display: inline-block;
	margin: 0.5%;
	position: relative;
	width: 48%;
	max-width:250px;
	font-size: 110%;
	vertical-align: middle;
	/*border: double 6px var(--gold);*/
	border-radius: calc(1px /0);
	background-color: var(--white);
	font-weight: bold;
}

.nomalNavi ul li a{
	display: block;
	padding: 1.1em 0.3em 1em;
	vertical-align: middle;
	line-height: 1em;
	color: var(--gold);
}


@media (hover: hover) { /*PC*/
	.nomalNavi ul li.select, .nomalNavi ul li:hover{
		background: var(--gold);
		/*border: double 6px var(--white);*/
	}
	
	.nomalNavi ul li.select a, .nomalNavi ul a:hover{
		color: var(--white);
	}
}

@media (hover: none) { /*タッチ端末*/
	.nomalNavi ul li.select, .nomalNavi ul li:active{
		background: var(--gold);
		color: var(--white);
		/*border: double 6px var(--white);*/
	}
	
	.nomalNavi ul li.select a, .nomalNavi ul a:active{
		color: var(--white);
	}
}


.nomalNavi .product{
	display: flex;
	margin: 0 auto;
	justify-content: center;
}

.nomalNavi .product li{
	flex: 1; 
	display: flex; 
	align-items: stretch;
}

.nomalNavi .product li a{
	flex: 1;
	display: flex;
	align-items: center; 
	justify-content: center;
	text-align: center;
	height: 100%; 
}

/*////////////////////////////////////////////////////////////////////////
トップ
////////////////////////////////////////////////////////////////////////*/
.moreBtn{
	width: 16em;
	margin:2em auto 0;
	font-size: 120%;
	background: var(--gold);
	text-align: center;
	font-weight: bold;
	border-radius: calc(1px/0);
}

.moreBtn a{
	display:block;
	padding: 0.8em 1em;
	letter-spacing: 0.05em;
	color: var(--white);
}

.moreBtn *:hover{
	background: var(--black);
	border-radius: calc(1px/0);
}

.moreBtn.red{
	background: var(--red);
}

.moreBtn.wide{
	width: 100%;
	line-height: 2em;
}

/* ------------------------------
キービジュ
------------------------------*/
.index #keyBox{
	position: relative;
	pointer-events: none;
	background-color: #000;
	padding-top: 5%;
	overflow: hidden;
}

.index  #keyBox .key{
	position: relative;
	z-index: 0;
	opacity: 0;
}

.index  #keyBox .logo{
	position: absolute;
	bottom: 4%;
	left: 0;
	right: 0;
	text-align:center;
	z-index: 2;
	opacity: 0;
	animation: zoomOut2 0.5s ease forwards;
	animation-delay: 1s;
	transform: scale(1.2);
}

.index #keyBox .logo img{
	width: 28%;
	max-width: 600px;
}


@keyframes zoomOut2 {
	from {
		transform: scale(1.2);
		opacity: 0;
	}
	to {
		transform: scale(1);
		opacity: 1;
	}
}


.index #keyBox .catch{
	width: 4%;
	position: absolute;
	z-index: 2;
}

.index #keyBox .catch.right{
	top: 21%;
	right: 34%;
	animation: Cup 1s ease forwards;
	opacity: 0;
}

.index #keyBox .catch.left{
	top: 37%;
	left: 34%;
	animation: Cdown 1s ease forwards;
	opacity: 0;
}


@keyframes Cup {
	from {
		transform: translate(0,5em);
		opacity: 0;
	}
	to {
		transform:  translate(0,0);
		opacity: 1;
	}
}

@keyframes Cdown {
	from {
		transform: translate(0,-5em);
		opacity: 0;
	}
	to {
		transform:  translate(0,0);
		opacity: 1;
	}
}

/* ------------------------------
releaseDay
------------------------------*/
.index #releaseDay{
	padding: 2em;
	position: relative;
	background-image:url("../img/top/day_bg.png"), url("../img/bg.jpg");
	background-position:-140px 125%, left top;
	background-size:1800px, 125%;
	background-repeat: no-repeat, no-repeat;
}

.index #releaseDay img{
	width: 40%;
	max-width: 500px;
}

/* ------------------------------
バナー
------------------------------*/
.index #topBanner{
	text-align: center;
	background-color: var(--red);
	padding: 1em;
}

.index #topBanner img{
	width: 48%;
	max-width: 400px;
	margin: 1%;
	transition: 0.2s;
}

.index #topBanner img:hover{
	transition: 0.2s;
}


/* ------------------------------
動画
------------------------------*/
.index #topMovie {
	background-image: url("../img/bg_2.jpg");
	background-size: cover;
	background-position: center center;
	position: relative;
	overflow: hidden;
}

.index #topMovie .thum{
	width: 700px;
	margin: auto;
	position: relative;
	overflow: hidden;
	display: inline-block;
	border: solid 1px var(--gold);
}

.index #topMovie .thum::after {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	content: "";
	display: block;
	background-image: url("../img/movie/icon.png");
	background-repeat: no-repeat;
	background-position: center center;
	background-size:100%;
	z-index: 2;
	transition: transform .5s ease;
}

.index #topMovie .thum:hover::after {
  transform: scale(1.2);
}


/* ------------------------------
ストーリー
------------------------------*/
.index  #topStory{
	text-align: center;
	background-image: url("../img/top/story.jpg");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	border-top: 5px solid var(--white);
	border-bottom: 5px solid var(--white);
	position: relative;
	overflow: hidden;
}

.index  #topStory .roopArrowBg{
	background-image: url("../img/arrow_white.png"), url("../img/arrow_white.png");
}


.index #topStory .inBox{
	position: relative;
	z-index: 1;
}

.index #topStory .salesPoint{
	max-width: 650px;
	margin:0 auto 5em;
}

.index  #topStory .txt{
	font-size: 120%;
	display: inline-block;
	margin:0 auto 2em;
	text-align: left;
	font-weight: bold;
	line-height: 1.8em;
	color: var(--red);
}

.index  #topStory .roopArrowBg{
	padding: 2em 0;
}


/* ------------------------------
キャラ
------------------------------*/
.index  #topChara{
	margin: auto;
	text-align: left;
	border-bottom: 5px solid var(--gold);
	background-image: url("../img/bg_2.jpg");
	background-size: cover;
	background-position: center center;
	position: relative;
	overflow: hidden;
}

.index #topChara .slideBox{
	position: relative; 
}

.index  #topChara .swiper-container{
	margin-left: 12.5%;
	padding-right: 1%;
}

.index  #topChara .roopTxtBg{
	padding: 4em 0;
}

/*---------------------
スライダーカスタム
---------------------*/
.index  #topChara .swiper-slide{
	transition: transform 0.6s;
	transform: scale(0.9);
}

.index  #topChara .swiper-slide img{
	border: solid 2px var(--gold);
}

.index #topChara .swiper-slide:hover{
	transition: transform 0.6s;
	transform: scale(0.95);
}

.index #topChara .swiper-button-prev,
.index #topChara .swiper-container-rtl .swiper-button-next {
  left: 6vw;
}

.index #topChara .swiper-button-next,
.index #topChara .swiper-container-rtl .swiper-button-prev {
  right: 13.8vw;
}

.index #topChara .swiper-button-prev,
.index #topChara .swiper-button-next {
  color: var(--white);
}


/* ------------------------------
product
------------------------------*/
.index #topProduct{
	margin: auto;
	padding: 4em 0;
}

.index #topProduct .productBox{
	margin:0 0 1em;
}

.index #topProduct .productBox .set{
	max-width: 400px;
	width: 50%;
	display: inline-block;
	text-align: center;
	vertical-align: bottom;
	font-size:120%;
	padding: 1em;
}

.index #topProduct .productBox .type{
	background-color: var(--black);
	border-bottom:solid 3px var(--pink);
	padding:0.6em;
	color: var(--white);
	transform: skewX(16deg);
	background-image: url("../img/arrow_white_left.png");
	background-position: left center;
	background-size: 125%;
	background-repeat: no-repeat;
	margin-bottom: 0.5em;
}

.index #topProduct .productBox .type img{
	width: 80%;
	margin: auto;
	transform: skewX(-16deg);
	border: none;
}

.index #topProduct .productBox .set .jacket,
.index #topProduct .productBox .set .price{
	width: 95%;
	margin: auto;
	display: block;
	border: solid 1px var(--black);
}

.index #topProduct .productBox .set .price{
	padding: 0.5em 1em;
	background-color: var(--black);
}

.index #topProduct .productBox .set .jacket.nomal,
.index #topProduct .productBox .set .price.nomal{
	width: 75%;
	overflow: hidden;
}

.index #topProduct .productBox .set .jacket.nomal{
	margin-top: 1.65em;
}

.index #topProduct .productBox .set .price.nomal img{
	width: 130%;
	margin-left: -15%;
}


.index #topProduct .moreBtn{
	margin-top: 1em;
}

.index #topProduct .storeBtn{
	width: 100%;
	max-width: 350px;
	margin:1em auto 0;
	border: solid 2px var(--black);
	box-shadow: 0 10px var(--black);
	border-radius: 30px 0 30px 0;
	font-size: 130%;
	background-image:url("../img/arrow_nnm.png"), linear-gradient(160deg, var(--orange) 20%, var(--yellow) 20% 80%, var(--orange) 80%);
	background-position: right bottom;
	background-size: 100%;
}

.index #topProduct .storeBtn a{
	color: var(--black);
	font-weight: bold;
	padding: 1em 1em 0.8em;
	display: block;
	transition: .2s ease-in-out;
	position: relative;
}

.index #topProduct .storeBtn:hover{
	box-shadow: 0 0 var(--black);
	top: 10px;
}


/* ------------------------------
プレオーダー
------------------------------*/
.index #pre{
	margin: auto;
	padding: 3em;
	background-color: var(--black);
	position: relative;
}

.index #pre:after{
	content: "";
	border: solid 2px var(--gold);
	position: absolute;
	top: 1em;
	left: 1em;
	width: calc(100% - 2em);
	height: calc(100% - 2em);
	pointer-events: none;
}

.index #pre h2{
	background-color: var(--red);
	padding: 0.5em 0 0.3em;
	font-size: 150%;
	margin-bottom: 1em;
}

.index #pre .inBox{
	padding:0;
}

.index #pre .box{
	width: 50%;
	display: inline-block;
	text-align: left;
}

.index #pre .img{
	padding-right: 3%;
}

.index #pre .img img{
	border: solid 1px var(--black);
}

.index #pre .box .txt{
	text-align: left;
	line-height: 1.3em;
	padding: 1.5em 0;
}

.index #pre .box ul{
	padding-top: 0.5em;
}

.index #pre .box h4{
	text-align: center;
	border-bottom: 1px solid var(--white);
	font-weight: normal;
}

.index #pre .box dl dt{
	background-color: var(--purple);
	padding: 0.5em 1em;
	text-align: center;
	font-weight: bold;
	font-size: 110%;
	margin-bottom: 1em;
}

.index #pre .box dl dd span{
	background-color: #666;
	display: inline-block;
	padding: 0.3em 0.5em 0.2em;
	margin: 0.2em auto;
}

.index #pre .box  .indent{
	font-size: 85%;
	opacity: 0.6;
}


/* ------------------------------
スペック
------------------------------*/
#spec{
	padding: 10em 0 0;
	background-image: url("../img/top/specbg.jpg");
	background-position: center top;
	background-color: var(--black);
	background-repeat: no-repeat;
}

#spec .box{
	width: 50%;
	display: inline-block;
	vertical-align: middle;
}

#spec .box img{
	width: 80%;
}

#spec .box table{
	width: 100%;
	text-align: left;
	border-spacing: 0.5em;
}

#spec .box table tr {
	border-bottom: 1px solid var(--white);
	display: block;
	padding: 0.5em;
}

#spec .box table th {
	text-align: left;
	width: 6em;
	padding-right: 1em;
}





/*////////////////////////////////////////////////////////////////////////
新着
////////////////////////////////////////////////////////////////////////*/
#news{
	padding-bottom: 3em;
}

#news.roopArrowBg{
	padding-top: 4em;
}

#news dl {
	padding: 1em;
	text-align: left;
	margin: 1em auto; 
	background-color: var(--black);
	border: solid 1px var(--gold);
	outline: solid 5px var(--black);
}

#news dl dt{
	width: 7em;
	display: inline-block;
	vertical-align: middle;
	font-weight: bold;
	letter-spacing: 0em;
}

#news dl dd{
	width:calc(100% - 7em);
	display: inline-block;
	vertical-align: middle;
	padding-left: 1em;
	line-height: 1.2em;
}

#news dl dd a{
	display: inline-block;
	vertical-align: middle;
	color: var(--gold);
}


/*////////////////////////////////////////////////////////////////////////
ストーリー
////////////////////////////////////////////////////////////////////////*/
#story{
	position: relative;
}

#story .roopArrowBg{
	padding-top: 4em;
}

#story .roopArrowBgB{
	background-image: url("../img/arrow_black.png"), url("../img/arrow_black.png");
	padding-bottom: 5em;
}


#story.bg{
	background-image:url("../img/story/bg_grd.png"), url("../img/story/bg.jpg");
	background-position:center bottom, center top;
	background-repeat:repeat-x, no-repeat;
	background-size: auto, cover;
}

#story .catch{
	width: 100%;
	max-width: 950px;
	margin: 1em auto;
}

#story .txt{
	border-top: none;
	display: inline-block;
	margin: auto;
	font-size: 120%;
	text-align: left;
	font-weight: bold;
	line-height: 1.8em;
	/*text-shadow: 
    var(--black) 2px 0px 0px, var(--black) -2px 0px 0px,
    var(--black) 0px -2px 0px, var(--black) 0px 2px 0px,
    var(--black) 2px 2px 0px, var(--black) -2px 2px 0px,
    var(--black) 2px -2px 0px, var(--black) -2px -2px 0px,
    var(--black) 1px 2px 0px, var(--black) -1px 2px 0px,
    var(--black) 1px -2px 0px, var(--black) -1px -2px 0px,
    var(--black) 2px 1px 0px, var(--black) -2px 1px 0px,
    var(--black) 2px -1px 0px, var(--black) -2px -1px 0px,
    var(--black) 1px 1px 0px, var(--black) -1px 1px 0px,
    var(--black) 1px -1px 0px, var(--black) -1px -1px 0px;*/
}

#story .txt span{
	background-color: var(--red);
	padding: 0.3em 0.5em 0.2em;
	font-size: 125%;
	display: inline-block;
	margin-bottom: 5px;
	text-shadow: none;
	margin-left: -0.5em;
}

/*---------------------
世界観
---------------------*/
#story .world{
	display: flex;
	flex-wrap: wrap;
	justify-content:center;
	padding-top: 2em;
}

#story .worldBox{
	width: 46%;
	margin: 2%;
	text-align: left;
	background-image:url("../img/tex_top.png"), url("../img/tex_2.jpg?ver=2");
	background-size:150% auto;
	background-repeat: no-repeat, no-repeat;
	background-position: center -1em, center top;
	border: solid 2px var(--gold);
	outline: solid 10px var(--white);
	padding:2em 1.5em;
	position: relative;
	color: var(--black);
}


#story .worldBox img{
	margin-bottom: 1em;
}

#story .worldBox .title{
	border-bottom: 3px double var(--gold);
	margin: 0.5em auto;
	text-align: center;
}

#story .worldBox .title img{
	width: 50%;
}


/*////////////////////////////////////////////////////////////////////////
キャラ
////////////////////////////////////////////////////////////////////////*/
#chara{
	padding-bottom: 3em;
	position: relative;
	background-image: url("../img/ball.png");
	background-size: 55%;
	background-position: -22% -2em;
	background-repeat: no-repeat;
}

#chara .roopArrowBg{
	padding-top: 4em;
}


:root{
	--img-w: 1920px; /* 元画像幅 */
	--speed: 5s;
	--bottom: 70%;
}

/* スマホ時：50% */
@media (max-width: 800px){
	:root{
		--img-w: 640px;
		--bottom:40%;
	}
}

#chara .roopArrowBg{
	background-image:
		url("../img/arrow_white.png"),
		url("../img/arrow_white.png");

	background-repeat: repeat-x, repeat-x;

	background-size:
		var(--img-w) auto,
		var(--img-w) auto;

	animation: arrow-loop-shift2 var(--speed) linear infinite;
}

@keyframes arrow-loop-shift2{
	0%{
		background-position:
			0 top,
			calc(var(--img-w) * -0.5) var(--bottom);
	}
	100%{
		background-position:
			var(--img-w) top,
			calc(var(--img-w) * 0.5) var(--bottom);
	}
}



/*---------------------
スライダーカスタム
---------------------*/
#chara .slideBox{
	width: 100%;
	max-width: 1200px;
	margin: auto;
}
	
#chara .swiper-slide{
	transition: transform 0.6s;
	transform: scale(0.95);
	padding: 2% 0;
}

#chara .swiper-slide img{
	filter: brightness(60%);
	border: solid 1px var(--black);
}

#chara .swiper-slide-active{
	transform: scale(1.1);
	z-index: 1;
}

#chara .swiper-slide-active img{
	filter: brightness(1);
}

#chara .swiper-button-prev,
#chara .swiper-container-rtl .swiper-button-next {
	left: 12%;
	transform: translateY(-1em);
}

#chara .swiper-button-next,
#chara .swiper-container-rtl .swiper-button-prev {
	right: 12%;
	transform: translateY(-1em);
}

#chara .swiper-pagination{
	right: 0;
	top:0;
	text-align: right;
	z-index: 0;
}

#chara .swiper-pagination span{
	vertical-align: baseline;
}

#chara .swiper-pagination .swiper-pagination-current{
	font-size: 130%;
}

/* ------------------------------
矢印
------------------------------*/
#chara .charaBox .next,
#chara .charaBox .prev{
	position: absolute;
	top: 30%;
	width: 80px;
	z-index: 9;
}

#chara .charaBox .next:hover,
#chara .charaBox .prev:hover{
	opacity: 0.5;
}

#chara .charaBox .next{
	right: 2%;
}

#chara .charaBox .prev{
	left: 2%;
}

/* ------------------------------
立ち絵
------------------------------*/
#chara .charaImg{
	width: 50%;
	display: inline-block;
	position: relative;
	pointer-events: none;
}

#chara .charaImg .pose{
	width: 100%;
	margin-left: 5%;
}

#chara .selif{
	position:absolute;
	left: 0;
	top: 10%;
	width:23%;
	max-width: 200px;
}


/* ------------------------------
テキストセット
------------------------------*/
#chara .txtAria{
	width: 50%;
	display: inline-block;
	position: relative;
	margin-top: 3em;
}

#chara .txtAria .charaName{
	width: 100%;
	position: relative;
}

#chara .txtAria .charaName .hiroMark{
	width: 100%;
	max-width: 180px;
	margin: auto;
}

#chara .txtAria .charaName .catch{
	margin: -0.5em auto 0;
}

#chara .txtAria .name{
	padding: 1em 0;
	border-bottom: 3px double var(--gold);
}

#chara .txtAria .voiceActer{
	margin: 1em auto 4em;
}

#chara .txtAria .txtBox{
	background-image: url("../img/tex_2.jpg");
	background-size: 100%;
	border: solid 2px var(--gold);
	outline: solid 10px var(--white);
	padding:2em 1.5em;
	color: var(--black);
	text-align: left;
}

#chara .txtAria .txtBox table{
	margin-top: 2em;
}

#chara .txtAria .txtBox tr{
	display: inline-block;
	width: 50%;
	margin-bottom: 3px;
}

#chara .txtAria .txtBox th,
#chara .txtAria .txtBox td{
	padding: 0.5em 0.5em;
	display:table-cell;
	align-content:center;
	line-height: 1em;
}

#chara .txtAria .txtBox .position,
#chara .txtAria .txtBox th{
	background-color: var(--red);
	width:7em;
	display: inline-block;
	color: var(--white);
	text-align: center;
}

#chara .txtAria .txtBox .position{
	width: 100%;
	padding: 0.5em;
	font-weight: bold;
	margin-bottom: 1em;
}

#chara .txtAria .txtBox td{
	width: calc(100% - 7em);
	display: inline-block;
}


/*---------------------------------------------
ボタン
---------------------------------------------*/
.btnBox{
	margin: 3em auto;
	text-align: center;
}

.btnBox .svAria{
}

.btnBox .svAria .sv{
	cursor: pointer;
	color: #fff;
	position: relative;
	display: inline-block;
	width: 18%;
	margin: 0.2%;
}

.btnBox .svAria .sv img{
	z-index: 1;
	position: relative;
	padding: 2% 0;
}

.btnBox .svAria  .play-bt,
.btnBox .svAria  .stop-bt{
	display:block;
	cursor: pointer;
	background-image: url("../img/chara/sv_off.png");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 100%;
}

.btnBox .svAria  .stop-bt{
	background-image: url("../img/chara/sv_on.png?ver=3");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 100%;
}

@media (hover: hover) {
.btnBox .svAria  .play-bt:hover{
		background-image: url("../img/chara/sv_on.png?ver=3");
		background-repeat: no-repeat;
		background-position: center center;
		background-size: 100%;
	}
}

@media (hover: none) {
.btnBox .svAria  .play-bt:active{
		background-image: url("../img/chara/sv_on.png?ver=3");
		background-repeat: no-repeat;
		background-position: center center;
		background-size: 100%;
		-webkit-tap-highlight-color: transparent;
	}
}


/*////////////////////////////////////////////////////////////////////////
ギャラリー
////////////////////////////////////////////////////////////////////////*/
#gallery{
}

#gallery.roopArrowBg{
	padding-top: 4em;
}

#gallery ul {
	text-align: left;
}

#gallery ul li{
	width:24%;
	margin: 0.5%;
	display: inline-block;
	border: 1px solid;
	border: solid 2px var(--black);
	overflow: hidden;
}

#gallery ul li img{
	width: 100%;
	transition:0.3s all;
}

#gallery ul li:hover img{
	transform: scale(1.1);
	transition:0.3s all;
}

.galleryBox{
	padding: 2em 2em 5em;
	text-align: left;
	max-width: 1000px;
	margin:1em auto;
	background-color: var(--black);
	border: solid 1px var(--gold);
	outline: solid 5px var(--black);
}

.galleryBox .img img{
	width: 100%;
	max-width: 1000px;
	margin-bottom: 2em;
	display: block;
	border: 1px solid;
	border: solid 2px var(--black);
}

.galleryBox .txt{
	padding: 0 1em;
	font-size: 110%;
}

.galleryBox .txt p{
	margin-bottom: 2em;
}

.galleryBox .txt .name{
	margin-bottom: 0;
	text-indent: -1em;
	font-weight: bold;
}

.galleryBox .txt .selif{
	text-indent: -1em;
}

.galleryBox .txt .mono{
	margin-left: -1em;
}

.galleryBox .txt .c0{color: var(--c0);}
.galleryBox .txt .c1{color: #9a77c7;}
.galleryBox .txt .c2{color: var(--c2);}
.galleryBox .txt .c3{color: var(--c3);}
.galleryBox .txt .c4{color: var(--c4);}
.galleryBox .txt .c5{color: var(--c5);}
.galleryBox .txt .c6{color: var(--c6);}

.galleryBox .txt .c9{color: #5e68a9;}


.galleryBox .txt .c99{color: var(--c99);}

/*////////////////////////////////////////////////////////////////////////
システム
////////////////////////////////////////////////////////////////////////*/


/*////////////////////////////////////////////////////////////////////////
ムービー
////////////////////////////////////////////////////////////////////////*/
#movie{
	padding-bottom: 3em;
}

#movie.roopArrowBg{
	padding-top: 4em;
}

#movie .movieBox{
	width:45%;
	display: inline-block;
	margin: 2.5%;
}

#movie .movieBox .thum{
	position: relative;
	border: solid 2px var(--black);
}

#movie .movieBox .thum::after {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	content: "";
	display: block;
	background-image: url("../img/movie/icon.png");
	background-repeat: no-repeat;
	background-position: center center;
	background-size:100%;
	z-index: 2;
	transition: transform .5s ease;
}

#movie .movieBox .thum:hover::after {
  transform: scale(1.2);
}

/*////////////////////////////////////////////////////////////////////////
サウンド
////////////////////////////////////////////////////////////////////////*/
#sound.roopArrowBg{
	padding-top: 4em;
}

#sound h3{
	margin-bottom:2em;
}

#sound .soundBox{
	padding-top: 3em;
}

#sound .soundBox .harf{
	width: 50%;
	display: inline-block;
}

#sound .soundBox .image{
	padding: 0 2em;
	margin-top: -10px;
}

#sound .soundBox .txt{
	line-height: 1.8em;
}

#sound .soundBox .image img{
	border: 1px solid var(--black);
}

#sound .songBox{
	margin: 0 auto 3em;
	background-image:url("../img/tex_top.png"), url("../img/tex_2.jpg?ver=2");
	background-size:150% auto;
	background-repeat: no-repeat, no-repeat;
	background-position: center -1em, center top;
	
	background-color: var(--white);
	border: solid 2px var(--gold);
	outline: solid 10px var(--white);
	padding:2em 1.5em;
	position: relative;
	color: var(--black);
	line-height: 1.5em;
}


#sound .soundBox .mds{
	font-size: 110%;
	background-color: var(--red);
	border-bottom:solid 3px var(--pink);
	padding:0.8em 0.3em 0.6em;
	color: var(--white);
	transform: skewX(16deg);
	background-image: url("../img/arrow_white_left.png");
	background-position: left center;
	background-size: 100%;
	background-repeat: no-repeat;
	margin-bottom: 0.5em;
}

#sound .soundBox .mds img{
	width: 40%;
	margin: auto;
	transform: skewX(-16deg);
}


#sound .soundBox .title{
	font-size: 180%;
	border-bottom: 1px dashed var(--gray);
	padding: 0.8em 0;
	margin-bottom: 0.5em;
	font-weight: bold;
}

#sound .soundBox .artist{
	font-size: 130%;
	line-height: 1.2em;
	font-weight: bold;
}

#sound .soundBox .intxt{
	margin-top: 2em;
	text-align: left;
	display: inline-block;
}

#sound .soundBox .comment{
	text-align: left;
	margin: 1em auto;
}

#bgm{
	margin-bottom: 5em;
}

#sound .bgmBox{
	background-image:url("../img/tex_top_left.png"), url("../img/tex_top_right.png"), url("../img/tex_2.jpg?ver=2");
	background-size:25%, 5%,  100%;
	background-position:left top, right top, center top;
	background-repeat: no-repeat,  no-repeat, no-repeat;
	margin-top: 5em;
}

#sound .bgmBox .comment{
	width: 100%;
	max-width: 550px;
	margin:1.5em auto;
}

/*////////////////////////////////////////////////////////////////////////
アイテム
////////////////////////////////////////////////////////////////////////*/
#item .itemBox{
	padding-top: 3em;
	text-align: left;
}

#item .itemBox .icon li{
	width: 24%;
	margin: 1.5% 0.5%;
	display: inline-block;
}

#item .itemBox li p{
	background-color: var(--purple);
	padding:0.5em 0.2em;
	text-align: center;
	margin-top: 0.5em;
}

#item .itemBox li p:hover{
	opacity: 0.6;
}

#item .itemBox .header li{
	width: 49%;
	margin: 1% 0.5%;
	display: inline-block;
}

/*////////////////////////////////////////////////////////////////////////
スペシャル
////////////////////////////////////////////////////////////////////////*/


/*////////////////////////////////////////////////////////////////////////
インフォ
////////////////////////////////////////////////////////////////////////*/
#product h3, #product h4{
	text-align: center;
	margin-bottom: 1.5em;
}

#product h4{
}

#product h4 small{
	font-weight: normal;
}

#product .mds{
	width: 50%;
	max-width: 400px;
	margin: auto;
}

#product .inBox{
	padding: 3em 1em 0;
	text-align: left;
}

#product .inBox .setBox{
	border: 1px solid var(--black);
	padding: 2em;
	margin-bottom: 5em;
}

#product .setBox .half{
	display: inline-block;
	width: 50%;	
}

#product .setBox .half img{
	padding:0 1em;
}

#product .setBox .half img.dlImg{
	max-width: 450px;
	width: 80%;
	display: block;
	margin: auto;
}

#product .setBox .half .price{
	font-weight: bold;
	text-align: center;
	margin: 0 auto;
	font-size: 140%;
}

#product .setBox .half .txt dl,
.inlineShopItem .txt{
}

#product .setBox .half dl dt{
	background-color: var(--purple);
	padding: 0.5em 1em;
	margin: 1em auto 0.3em;
}

#product .setBox .half .txt .indent,
.inlineShopItem .indent{
	margin-top: 2em;
	font-size: 85%;
}

#product dl span,
.inlineShopItem dl span{
	background-color: var(--gray);
	display: inline-block;
	padding: 0.2em 0.5em 0.25em;
	margin: 0.2em auto;
}

/*---------------------------------------------
店舗特典
---------------------------------------------*/
#product .shop{
	border: 1px solid;
	border-image: linear-gradient(to right, rgba(0, 126, 255, 1) 0%, rgba(95, 40, 219, 1) 50%, rgba(207, 14, 255, 1)) 1;
	padding: 2em;
	margin-bottom: 5em;
	background-color: var(--black);
}

#product .shopCaution{
	padding:0 2em 1em;
	font-size: 80%;
}

#product .shop .box{
}

#product .shop .box dl dt,
.inlineShopItem dl dt{
	background-color: var(--purple);
	padding: 0.5em 1em;
	margin: 0 auto 1em;
}

#product .shop .box dl dd,
.inlineShopItem dl dd{
	margin: 0 auto 1em;
}

#product .shop .box dl.mini{
	width: 48%;
	margin: 0 1%;
	display: inline-block;
}

#product .shop .box dl.solo{
	width: 48%;
	margin: 0 auto;
	display: block;
}

#product .shop .shopName{
	background: var(--grd1);
	text-align: center;
}

#product .shop .half{
	width: 48%;
	margin: 1%;
	display: inline-block;
}

#product .shop .box .set{
	border: solid 1px var(--purple);
	padding: 1em 1em 0;
	margin-bottom: 1em;
}

#product .shop .box dl img,
.inlineShopItem .inTxt dl img{
	max-width: 700px;
	margin: 0 auto 0.5em;
	padding:0 !important;
}

#product .shop .moreBtn{
	margin:0 auto 0.5em;
	display: inline-block;
}

#product .shop .box .moreBtn{
	text-align: center;
	border: solid 1px var(--purple);
	margin: 1em auto 1.5em;
	display: block;
	font-size: 100%;
}

#product .shop .setName,
.inlineShopItem .setName{
	background:  var(--purple);
	padding: 0.5em;
	text-align: center;
}

#product .shop .indent{
	margin: 2em auto;
	border-top: 1px dashed var(--purple);
	padding-top: 1em;
	font-size: 85%;
}

#product .shop .btnSet{
	text-align: center;
}

.inlineShopItem{
	padding: 2em;
	text-align: left;
	width: 100%;
	max-width: 1000px;
	margin: auto;
}

.inlineShopItem h4{
	text-align: center;
}

.inlineShopItem .txt{
 	display: flex;
	flex-wrap: wrap;
	justify-content:flex-start; 
}

.inlineShopItem .inTxt{
	width: 48%;
	margin: 1% auto;
	border: solid 1px var(--purple);
	padding: 1em;
	display: inline-block;
	background-color:var(--black);
}

.inlineShopItem .inTxt dl dd p{
	border: 1px solid var(--purple);
	padding: 0.2em;
	margin-bottom: 0.5em;
}

/*######################################################################
メディアクエリ
######################################################################*/
/*//////////////////////////////////////////////////////////////////////*/
@media screen and (max-width: 1300px) {
/*//////////////////////////////////////////////////////////////////////*/
header nav{
	font-size:13.5px;
}

	
/*//////////////////////////////////////////////////////////////////////*/
}
@media screen and (max-width: 1000px) {
/*//////////////////////////////////////////////////////////////////////*/
	
	
/*//////////////////////////////////////////////////////////////////////*/
}
@media screen and (max-width: 800px) {
/*//////////////////////////////////////////////////////////////////////*/
body{
	min-width: inherit;
	/*font-size:min(3.5vw,16px);*/
	font-size: 12px;
}
	
body::after {
	background-position: 80% top;
	background-size: cover;
}
	
br.txtCut{display:none;}
br.txtCutNone{display:block;}

#loading{
	background-image: url("../img/bg_2.jpg");
	background-size: cover;
	background-position: center center;
}

#mainBox{
	padding-top:0;
	overflow: hidden;
}
	
.inBox{
	max-width: inherit;
	padding:0 1em 5em;
}
	
.subBox{
	margin-top: 12%;
}
	
h2{
	margin: 0 auto 1em;
}
	
h2 img{
	width: 80%;
	max-width:inherit;
}
	
.subBox h2{
	width: 85%;
	max-width: inherit;
	margin-bottom: 2em;
}

h3{
	line-height: 1.3em;
}

#backTop{
	bottom: 6em;
	right: 2%;
	width: 11%;
}
	
.storySmpL{
	padding: 0.2em 0.5em 0 !important;
	display: inline-block;
}
	
.storySmpR{
	padding: 0.2em 0.5em 0 !important;
	display: inline-block;
}
	

/*////////////////////////////////////////////////////////////////////////
モーション
////////////////////////////////////////////////////////////////////////*/
.bgAnime img{
	width: 100%;
	object-fit: cover;
	object-position: 85% center; 
}
	
.roopTxtBg{
	background-size: 170% auto, 170% auto;
	background-position: 100% 0%, 4% 100%;
}

	
/*////////////////////////////////////////////////////////////////////////
ヘッダー
////////////////////////////////////////////////////////////////////////*/
/* ------------------------------
ナビ
------------------------------*/
:root{
	--nLogo:30%;
	--nShop:32%;
	--nOther:19%;
	--iconBox:70%;
}

/* ------------------------------
ナビボタン
------------------------------*/
header .logo img{
	width: 88% !important;
}

header{
	position: fixed;
	width: 100%;
	z-index: 10;
	background-color: var(--black);
	min-width: inherit;
	color: var(--white);
}

header nav{
	position: absolute;
	overflow-y: scroll;
	width: 100vw;
	height: 100vh;
	padding: 1em 0 5em;
	left: 0;
	top: 100%;
	z-index: 10;
	background-color: var(--black);
	background-image:url("../img/nav.jpg") !important;
	background-position: right top;
	background-repeat: no-repeat;
	background-size: 40%;
}

header nav ul{
	margin-bottom: 0;
	max-width: inherit;
	margin-left: 0;
	width: 60%;
	background-color: var(--black);
}

header nav ul li{
	width: 100%;
	margin: 0 auto;
	display: block;
	text-align: left;
	box-sizing:border-box;
	position: relative;
	border-bottom: none;
	background-color: var(--black);
}
		
header nav ul li.select a,
header nav ul li a:hover{
	background-size: 2em;
	background-position: 1em 44%;
}
	
header nav ul li  a{
	display: block;
	padding:1em 2em;
}
	
header .iconBox{
	height: 13vw; /* ビューポートの幅に基づいた高さ */
	overflow: hidden;
}
	
header .iconBox .snsBtn{
	background-color: var(--gold)
}
	
header .iconBox .youtubeBtn{
	background-color: var(--pink);
}
	
header nav ul li span{
	display: block;
	font-weight: normal;
	color: var(--gold);
}

	
/* ------------------------------
バーガーメニュー
------------------------------*/
header .navBtn {
	display: inline-block !important;
    position: relative;
    cursor: pointer;
    height: 13vw; /* ビューポートの幅に基づいた高さ */
    padding: 1vw; 
    box-sizing: border-box; /* paddingとborderを含める */
	color: var(--black);
	background-color: var(--yellow);
	background-image: url("../img/icon_ball.png");
	background-position: right top;
	background-size: 130%;
	background-repeat: no-repeat;
}
	
header .navBtn span {
    display: inline-block;
    transition: all .4s;
    position: absolute;
    background: var(--black);
    border-radius: 2px;
    width: 50%; /* アイコンの幅を調整 */
    height: 5%;  /* アイコンの高さを調整 */
}

header .navBtn:hover:after{
	color: var(--black);
}
	
header .navBtn:hover span{
	background: var(--black);
}
	
header .navBtn:after{
	content: "MENU";
	position: absolute;
	text-align: center;
	width: 100%;
	left: 0;
	top: 65%;
	font-size: 2vw;
	font-family:"メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	letter-spacing: 0.1em;
	font-weight: bold;
}
	
header .navBtn.active:after{
	content: "CLOSE";
	position: absolute;
	text-align: center;
	width: 100%;
	left: 0;
	top: 65%;
	font-size: 2vw;
	font-family:"メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	letter-spacing: 0.1em;
	color: var(--black);
}
	
header .navBtn span:nth-of-type(1) {
    top:30%; /* アイコンの位置調整 */
    left: 25%; /* アイコンの位置調整 */
    transform: rotate(0deg);
}

header .navBtn span:nth-of-type(2) {
    top: 43%; /* アイコンの位置調整 */
    left: 25%; /* アイコンの位置調整 */
    transform: rotate(0deg);
}

header .navBtn span:nth-of-type(3) {
    top: 55%; /* アイコンの位置調整 */
    left: 25%; /* アイコンの位置調整 */
    transform: rotate(0deg);
}

header .navBtn.active span:nth-of-type(1) {
    top: 45%;
    left: 50%;
    width: 50%;
    height: 5%;
    transform: translate(-50%, -50%) rotate(-45deg);
}

header .navBtn.active span:nth-of-type(2) {
    opacity: 0;
}

.navBtn.active span:nth-of-type(3) {
    top: 45%;
    left: 50%;
    width: 50%;
    height: 5%;
    transform: translate(-50%, -50%) rotate(45deg);
}

 header .spArea{
	 display: block !important;
	 text-align: left;
	 font-size: 80%;
	 padding:2em;
	 color: var(--gold);
	 font-weight: normal;
}
	
 header .spArea span{
	  vertical-align: middle;
	 display: inline-block;
}
	
 header .spArea img{
	 width: 50px !important;
	 margin-left: -1em;
}
	
	

	
/* ------------------------------
ボトムナビ
------------------------------*/
#bottomNavi{
	position: fixed;
    bottom: 0;
	background-color: var(--black);
	display: block;
    width: 100%;
    left: 0;
    z-index: 9;
	border-top: 1px solid var(--white);
	font-size:min(2.2vw,12px);
	letter-spacing: -0.05em;
}
	
#bottomNavi ul{	
	text-align: center;
}
	
#bottomNavi ul li{
	width: 20%;
	display: inline-block;
	background-color:var(--black);
	text-align: center;
	border-right: 1px solid var(--white);
}
	
#bottomNavi ul li:last-child{
	border-right:none;
}
	
#bottomNavi ul li img{
	width: 35%;
	max-width: 25px;
}
	
#bottomNavi ul li a{
	display: block;
	padding: 1em 0;
	color: var(--white);
}
	
/* ------------------------------
サブナビ
------------------------------*/
#subNavi{
	padding:0 1em;
}

.nomalNavi ul li{
	margin: 0.5% 1%;
	font-size:min(3vw,14px);
}
	
.nomalNavi .product li{
	width: 24%;
}

/*////////////////////////////////////////////////////////////////////////
トップ
////////////////////////////////////////////////////////////////////////*/
.moreBtn{
	background-color: var(--gold);
	width: 60%;
}

/* ------------------------------
キービジュ
------------------------------*/
.index #keyBox{
	padding-top: 13.2%;
}

.index #keyBox .logo img{
	width: 55%;
	max-width: inherit;
}
	
.index #keyBox .catch{
	width: 10.4%;
}

.index #keyBox .catch.right{
	top: 37%;
	right: 18%;
}

.index #keyBox .catch.left{
	top: 42%;
	left: 17%;
}

	
/* ------------------------------
releaseDay
------------------------------*/
.index #releaseDay{
	padding: 3.5em 0 2em;
	background-position:center 15%, left top;
	background-size:200%, 200%;
}

.index #releaseDay img{
	width: 85%;
	max-width: inherit;
}


/* ------------------------------
バナー
------------------------------*/
.index #topBanner{
	padding: 2em 0;
}

.index #topBanner img{
	width: 80%;
	max-width: inherit;
	margin: 1% auto;
}

/* ------------------------------
動画
------------------------------*/
.index #topMovie{
	background-position: center right;
}
	
.index #topMovie .roopTxtBg{
	padding: 4em 1em 0;
}
	
.index #topMovie .thum{
	width:100%;
}

.index #topMovie .thum::after {
	background-size:100%;
}

.index .point.right{
	right: 0;
	top: -1em;
	width: 60%;
}

.index .point.left{
	left: 0;
	bottom: 0;
	width: 80%;
}

/* ------------------------------
ストーリー
------------------------------*/
.index  #topStory{
	background-image: url("../img/top/story_smp.jpg");
}
	
.index  #topStory .roopArrowBg{
	padding:5em 0 0;
}

.index  #topStory .txt{
	padding: 0;
	max-width: 33em;
	display: inline-block;
	margin: auto;
	letter-spacing: -0.02em;
	font-size:min(3.6vw,18px);
}

.index  #topStory .txt span{
	margin-bottom: 4px;
}
	

/* ------------------------------
キャラ
------------------------------*/
.index  #topChara{
	background-size: cover;
	background-position: center top;
}
	
.index  #topChara .roopTxtBg{
	padding: 4em 0 3em;
}
	
.index #topChara .slideBox{
	position: relative; 
	margin-top: -1em;
	margin-bottom: -1em;
}

.index  #topChara .swiper-container{
	margin-left: 0;
	padding-right: 0;
}
	
/*---------------------
スライダーカスタム
---------------------*/
.index  #topChara .swiper-slide{
	transform: scale(1);
	padding: 2em;
}
	
.index  #topChara .swiper-button-prev,
.index  #topChara .swiper-container-rtl .swiper-button-next {
	left: 7%;
	width: 15%;
}

.index  #topChara .swiper-button-next,
.index  #topChara .swiper-container-rtl .swiper-button-prev {
	right: 7%;
	width: 15%;
}

.index  #topChara .swiper-slide,
.index  #topChara .swiper-slide:hover{
	transition:none;
	transform: scale(1);
}
	
/* ------------------------------
product
------------------------------*/
.index #topProduct{
	padding: 4em 0 0;
}

.index #topProduct .productBox{
	max-width: inherit;
	font-size: 90%;
}

.index #topProduct .productBox .type{
	padding:0.8em;
}
	
.index #topProduct .productBox .set{
	max-width: inherit;
	width: 85%;
	display: block;
	margin: auto;
}

.index #topProduct .productBox .set .jacket.nomal{
	margin-top: 0;
}

.index #topProduct .storeBtn{
	width: 68%;
	max-width: inherit;
	border-bottom: 5px solid var(--black);
	border-radius: 20px 0 20px 0;
}
	

/* ------------------------------
プレオーダー
------------------------------*/
.index #pre{
	padding: 2em;
}

.index #pre:after{
	top: 0.5em;
	left: 0.5em;
	width: calc(100% - 1.5em);
	height: calc(100% - 1em);
}
	
.index #pre .box{
	width: 100%;
	display: block;
}
	
.index #pre h2{
	width: 100%;
	margin:0  auto 1em;
	padding: 1em;
	line-height: 1.2em;
}

.index #pre .img{
	padding-right: 0;
	margin-bottom: 0;
}

.index #pre .box dl dt{
	margin: 1em auto;
}

/* ------------------------------
スペック
------------------------------*/	
#spec{
	padding: 14em 0 0;
	background-image: url("../img/top/specbg_smp.jpg");
	background-size: 100%;
}

#spec .inBox{
	padding-bottom: 3em;
}
	
#spec .box{
	width: 100%;
	display: block;
	font-size: 90%;
}
	
#spec .box table th {
	text-align: left;
	width: 5.5em;
	padding-right: 0.5em;
}
	
#spec .box img{
	width: 60%;
}
	
/*////////////////////////////////////////////////////////////////////////
ストーリー
////////////////////////////////////////////////////////////////////////*/

#story.bg{
	background-image:url("../img/story/bg_grd.png"), url("../img/story/bg.jpg");
	background-position:center bottom, left top;
}

#story .roopArrowBgB{
	padding-bottom: 3em;
}
	
#story .catch{
	width: 130%;
	margin-left: -15%;
}

#story .txt{
	padding: 1em;
	font-size: 100%;
}


/*---------------------
世界観
---------------------*/
#story .world{
	padding-top: 2em;
}

#story .worldBox{
	width: 96%;
	margin: 1.5em auto;
}
	
#story .worldBox .title img{
	width: 60%;
}
	
/*////////////////////////////////////////////////////////////////////////
キャラ
////////////////////////////////////////////////////////////////////////*/
#chara{
	background-image: url("../img/ball.png");
	background-size: 150%;
	background-position: 70% 6em;
	background-repeat: no-repeat;
}
	
#chara .inBox{
	padding: 0;
}

#chara .arrowTop{
	top: -1em;
	right: 0;
}
	
#chara .arrowBottom{
	bottom:inherit;
	top: 72em;
	left: 0;
}
	
/* ------------------------------
ナビ
------------------------------*/
#chara .slideBox{
	position: relative; 
	margin-top: 4em;
}

#chara .swiper-pagination{
	top:-1em;
	left: inherit;
	right: 2em;
}
	
#chara .swiper-button-prev,
#chara .swiper-container-rtl .swiper-button-next {
	left: 16%;
	width: 8%;
}

#chara .swiper-button-next,
#chara .swiper-container-rtl .swiper-button-prev {
	right: 16%;
	width: 8%;
}
	
/* ------------------------------
矢印
------------------------------*/
#chara .charaBox .next,
#chara .charaBox .prev{
	width: 30%;
	top: 15vh;
}

/* ------------------------------
立ち絵
------------------------------*/	
#chara .charaImg{
	width: 100%;
	display: block;
	margin-top: -2em;
}

#chara .charaImg .pose{
	width: 100%;
	margin-left:0;
}

#chara .selif{
	width:20%;
	left: 10%;
	top: 28%;
}

/* ------------------------------
テキストセット
------------------------------*/
#chara .txtAria .charaName .catch img{
	width: 120%;
	margin-left: -10%;
}
	
#chara .txtAria{
	width: 100%;
	display: block;
	padding: 0 1em;
	margin-top: -2em;
}
		
#chara .txtAria .txtBox{
	width: 95%;
	margin: auto;
	border: solid 1px var(--gold);
	outline: solid 5px var(--white);
	padding:2em 1em;
}

	
#chara .txtAria .txtBox tr{
}
	
	
#chara .txtAria .txtBox th{
	width:6em;
}
	
#chara .txtAria .txtBox tr:first-of-type th{
	letter-spacing: -0.05em;
}

#chara .txtAria .txtBox td{
	width: calc(100% - 6em);
}

	
/*////////////////////////////////////////////////////////////////////////
ギャラリー
////////////////////////////////////////////////////////////////////////*/
#gallery ul li{
	width:48%;
	margin: 1%;
}

.galleryBox{
	padding: 5em 2em 3em;
	margin:auto;
}

	
/*////////////////////////////////////////////////////////////////////////
システム
////////////////////////////////////////////////////////////////////////*/

	
/*////////////////////////////////////////////////////////////////////////
サウンド
////////////////////////////////////////////////////////////////////////*/
#sound h3{
	margin-bottom:2em;
}

#sound .soundBox .harf{
	width: 100%;
	display: block;
}

#sound .soundBox .image{
	width: 80%;
	margin:0 auto 2em;
}
	
#sound .soundBox .mds img{
	width: 60%;
}

#sound .soundBox .txt{
	line-height: 1.8em;
}

#sound .soundBox .image img{
	border: 1px solid var(--black);
}

#sound .songBox{
	width: 95%;
	margin:0 auto 3em;
	background-size:150%, 150%;
}
	
	
#sound .bgmBox{
	background-image:url("../img/tex_top.png"), url("../img/tex_2.jpg?ver=2");
	background-size:150% auto;
	background-repeat: no-repeat, no-repeat;
	background-position: center -1em, center top;
	margin-top: 5em;
}


	
/*////////////////////////////////////////////////////////////////////////
ムービー
////////////////////////////////////////////////////////////////////////*/
#movie .movieBox{
	width:100%;
	display: block;
	margin: 0 auto 2em;
}

#movie .movieBox .thum::after {
	background-size:100%;
}

/*////////////////////////////////////////////////////////////////////////
アイテム
////////////////////////////////////////////////////////////////////////*/
#item .itemBox .icon li{
	width: 48%;
	margin:0 1% 4%;
}

#item .itemBox .header li{
	width: 100%;
	margin: 0 auto 5%;
	display: block;
}

/*////////////////////////////////////////////////////////////////////////
スペシャル
////////////////////////////////////////////////////////////////////////*/

	
/*////////////////////////////////////////////////////////////////////////
インフォ
////////////////////////////////////////////////////////////////////////*/
#product .inBox .setBox{
	padding:2em 1em;
}
	
#product .setBox .half{
	display: block;
	width: 100%;	
}

#product .setBox .half img{
	padding:0;
	margin-bottom: 2em;
}
	
#product .setBox .half.dl{
	padding: 4em 0 2em;
}
	
#product .setBox .half .mds{
	margin-bottom: -2em;
}
	
#product .setBox .half .price{
	font-size:min(4.8vw,22px);
}
	
#product h3{
	font-size:min(4.8vw,22px);
}	
	
#product h4{
	font-size: 110%;
}	

#product dl span,
.inlineShopItem dl span{
	padding: 0.2em 0.5em 0.35em;
}
	
/*---------------------------------------------
店舗特典
---------------------------------------------*/
#product .shop{
	padding:2em 1em;
}
	
#product .shop .box dl.mini{
	width: 48%;
	margin: 0 1%;
	display: inline-block;
}
	
#product .shop .box dl.mini2{
	width: 100%;
	margin: 0 auto;
	display: block;
}

#product .shop .box dl.solo{
	width: 100%;
	margin: 0 auto;
	display: block;
}

#product .shop .half{
	width: 100%;
	margin: 1% auto;
	display: block;
}
.inlineShopItem .inTxt{
	width: 100%;
	margin: 1em auto;
	display: block;
}


	
/*//////////////////////////////////////////////////////////////////////*/
}
@media screen and (max-width: 480px) {
/*//////////////////////////////////////////////////////////////////////*/

	
/*//////////////////////////////////////////////////////////////////////*/
/*//////////////////////////////////////////////////////////////////////*/
}