dateArea@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900&display=swap');/*
↓明朝*/
/*@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;700&display=swap');*/
/* CSS Document */
*{zoom:1;}
:root{
	--black_bg:rgba(0,0,0,0.7);
	--r_b:linear-gradient(90deg,#f981b5,#3dc3e5);
	--r_b2:linear-gradient(90deg,#ff66b0,#16b1df);
	--green:#44edeb;
	--lightGreen:#44edeb;
	--darkGreen:#079997;
	--black:#111;
}
body {
	font-family:'Noto Sans JP', "游ゴシック", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	/*font-family: 'Noto Serif JP',"游明朝", YuMincho, "ヒラギノ明朝 Pro W6", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", serif;*/
    background-color:#000;
	background-image: url("../img/smp/bg.jpg");
	background-position: center top;
	background-repeat: repeat;
	background-size: 100vw auto;
	color:var(--black);
    width:100%;
	font-size:clamp(13px, 3.3vw, 14px);
   /*	font-size: max(3.3vw, 13px);*/
	line-height: 1.5em;
    overflow-y:scroll;
	overflow-x:hidden;
	margin:0;
	padding:0;
	box-sizing:border-box;
	text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
}
body:before {/*固定背景*/
	content: "";
	width: 100vw;
	height: 100vh;
	display: block;
	position: fixed;
	top:0;
	left: 0;
	background-image: url("../img/smp/bg.jpg");
	background-position: center;
	background-size: cover;
	z-index: -1;
}
nav,header,div,p,a,ul,li,section,article,dl,dt,dd,h1,h2,h3,h4,h5,h6,img,table th,td{
	margin:0;
	padding:0;
	font-weight:normal;
	list-style-type:none;	
	box-sizing:border-box;
	font-size: 1em;
}

body.fixed {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
}

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

::selection {
    background: #6c7f96;
    color: #fff;
}

/*Firefox*/
::-moz-selection {
    background: #6c7f96;
    color: #fff;
}

.clear{clear:both;}


img{
	width:100%;
    vertical-align: bottom;
    border:0;
}

a{
	text-decoration:none;
	word-break: break-all;
	outline: none;
}
a:hover{
}

a.txtLink{
	border-bottom: #fff 1px dashed;
	border-spacing: 2px;
	color: #fff;
	padding: 0 0.2em;
}
a.txtLink:hover{
	border-bottom: var(--green) 1px dashed;
	color: var(--green);
}
.br2{display:inline-block;}


ul.notes{margin-left:1em; font-size: max(0.7em,11px); line-height: 1.5em;}
ul.notes li{text-indent:-1em;}
/*ボックス関係*/
.corner_r{
	border-radius: 6px;
}
/*テキスト関係*/
.smallTxt{font-size: max(0.8em,11px);}
.center{text-align: center;}

.centerGrid{
	position: relative;
	display: grid;
	justify-content: center;
	width: 100%;
}
/*グリッド関係*/
.grid_box{
	display: grid;
	column-gap: 1em;
	row-gap: 1em;
}
.grid_4{grid-template-columns:repeat(4, 1fr);}
.grid_3{grid-template-columns:repeat(3, 1fr);}
.grid_2{grid-template-columns:repeat(2, 1fr);}
/*ルビ関係*/
ruby {
        display: inline-table;
        border-collapse: collapse;
        margin: 0;
        padding: 0;
        border: none;
        white-space: nowrap;
        text-indent: 0;
        vertical-align: 0.9em;
        text-decoration: inherit;
        text-align: center;
        line-height: 1em;
        }
ruby>rt {
    display: table-header-group;
    height: 25%;
    margin: 0;
    padding: 0 0.125em;
    border: none;
    font: inherit;
    font-size: 50%;
    line-height: 1em;
	text-align: center;
    }

/*----------------------------------------------------------------
トップへ戻る
-----------------------------------------------------------------*/
#backTop{

	 bottom:5em;
	right:0.5em;
	cursor:pointer;
	position: fixed;
	z-index:800;
	display: block;
	width: 4em;
	height: 4em;
	margin-left: auto;
	--backTopBg:#000;
}
#backTop span{
	display: block;
	position: relative;
	width: 4em;
	height: 4em;
	text-indent: -99999px;
	margin-left: auto;
}
#backTop span:before{
	content: "";
	width: 100%;
	top:0;
	bottom: 0;
	background-color: var(--backTopBg);
	border: var(--green) 2px solid;
	/*box-shadow:  inset 0 0 0 0.3em  var(--backTopBg), inset 0 0 0 0.4em #fff;*/
	position: absolute;
	display: block;
	border-radius: 50%;
	box-sizing: border-box;
}
#backTop span:after{
	content: "▲";
	width: 1em;
	height: 1em;
	margin-top: -0.5em;
	margin-left: -0.5em;
	top:50%;
	left: 50%;
	color: var(--green);
	border-top: var(--green) 2px solid;
	position: absolute;
	display: block;
	text-indent: 0;
	line-height: 1em;

}
/*----------------------------------------------------------------
ローディング
-----------------------------------------------------------------*/
.loading{
    width:100%;
    position:fixed;
   height: 100vh;
    z-index:800;
	font-size: 16px;
	display: grid;
	align-items: center;
	justify-content: center;

}
.loading .load{
	width: 15em;
}

/*----------------------------------------------------------------
コンテンツ
-----------------------------------------------------------------*/
	#wrap{
		width: 100%;
		display: block;
		position: relative;
		z-index: 5;

	}
	#contents{
		width: 100%;
		opacity: 0;
		position: relative;
	}
	.mainWrap{
	}

	.contentsBox{
		width: calc(100% - 2em);
		max-width: 1200px;
		margin: 0 auto;
	}

/*----------------------------------------------------------------
殿堂入り
-----------------------------------------------------------------*/
.review{
	display: block;
	position: absolute;
	top:0;
	left: 0;
	width: 20em;
}

/*----------------------------------------------------------------
TOPエリアBox
-----------------------------------------------------------------*/
.topBox{
	padding: 3em 0;
}
/*.topBox h2{
	margin-bottom: 1em;
	font-size: 2em;
	line-height: 1em;
	text-align: center;
}*/

.topBox a.more{/*viewmoreボタン*/
	max-width: 15em;
	text-align: center;
	padding: 1em 2em;
	
	color:var(--black);
	margin: 2em auto;
	display: block;
	font-weight: bold;
	letter-spacing: 1px;
	background-color: var(--lightGreen);
	box-shadow: 0.3em 0.3em var(--darkGreen);
	transition: all 0.2s 0s ease-out;
	transform: skewX(-5deg);
}
.topBox a.more:hover{
	background-color: var(--lightGreen);
	box-shadow: 0.1em 0.1em var(--darkGreen);
}
.topBox a.more span{
	position: relative;
	transform: skewX(5deg);
}
/*----------------------------------------------------------------
TOP発売日掲載エリア
-----------------------------------------------------------------*/
.dateArea{
	background:var(--black_bg);
	padding:0em 1em ;
	text-align: center;
}
	.platform{width: 85%;}

/*----------------------------------------------------------------
TOPトピックス(バナー)
-----------------------------------------------------------------*/
.topics{
	padding: 0.5em 0;
	text-align: center;
}
.topics a{
	display: block;
	margin: 0.5em 0;
	transition: opacity 0.2s 0s ease;
}
.topics a:hover{
	opacity: 0.7;
}
/*----------------------------------------------------------------
動画
-----------------------------------------------------------------*/

.movieThumBox{
	width: 100%;
	margin: 1em auto;
	max-width: 700px;
	/*border: #000 0.3em solid;*/
	background-color: #000;
	position: relative;
	display: block;
	transition: transform 0.8s 0s ease-out,opacity 0.8s 0s ease;
	opacity: 0;
	transform: translateY(1em);
	box-shadow: 0.5em 0.5em var(--green);

}
.movieThumBox.action {
	transform: translateY(0);
	opacity: 1;
	
}
#topMovie .movieThumBox{
	margin: 0 auto;
}

.movieThumBox .txt{
	/*background-color: var(--green);*/
	padding: 0.5em 0.5em 0;
	text-align: center;
	color: #fff;
}
 .movieThumBox .txt span{
	position: relative;
}

 .movieThumBox a.icon1 {
  display: block;
  position: relative;
}
 .movieThumBox .icon1:before, .movieThumBox .icon1:after{
	content: "";
	display: block;
	position: absolute;
	  left: 50%;
	  top:50%;
	/* opacity: 0.5;*/
	 transition: all 0.2s 0s ease-out;
	 transform: scale(1.1);
	box-sizing: border-box;
	--borderColor:#fff;
	z-index: 3;
}
 .movieThumBox .icon1:before{
	width: 5em;
	height:5em;
	margin-left: -2.5em;
	margin-top: -2.5em;
	/*border: var(--borderColor) 0.4em solid;
	border-radius: 50%;*/
	left: 50%;
	top:50%;
	 background-image: url("../img/play_bt.png");
	 background-position: center;
	 background-size: contain;
}
 .movieThumBox .icon1:after{
	  /*content: "";
	  position: absolute;
	  border-top: 1em solid transparent;
	  border-bottom: 1em solid transparent;
	  border-left: 1.5em solid  var(--borderColor);
	  margin-top: -1em;
	  margin-left: -0.5em;*/
}
 .movieThumBox .icon1:hover:before, .movieThumBox .icon1:hover:after{
	 transform: scale(1);
	 opacity: 1;
}
/*直貼り*/
/* .movieArea {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	margin:auto;
	border: solid 1px #2c2c2c;
}

.movieArea iframe,  
.movieArea object,  
.movieArea embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}*/

/*----------------------------------------------------------------
TOP製品情報画像エリア
-----------------------------------------------------------------*/
.topProductBox{
	max-width: 1200px;
	margin: 0 auto;
	text-align: center;
	column-gap: 1em;
	grid-template-columns:100%;
	row-gap: 1em;
	display: grid;
}

.topProductBox h3{
	max-width: 15em;
	margin: 0 auto 1em;
	padding: 0.8em 1em;
	text-shadow: none;
}
.topProductBox .box{
	padding: 1em 2em;
	
	transition: transform 0.8s 0s ease-out,opacity 0.8s 0s ease;
	opacity: 0;
	transform: translateY(1em);

}
.topProductBox .box.action{
	transform: translateY(0);
	opacity: 1;
	
}
img.tuujoImg{
	width: 70%;
}
.priceBox{
	margin: 0.5em auto;
	text-align: left;
}
#product .priceBox{/*製品情報ページ*/
	padding: 0;
	margin: 0 auto;
}
#product .bonusImg{
	padding-top: 2em;
}
#product .bonusTxt{
	padding-top: 0.5em;
	text-align: left;
}
#product .bonusTxt li{
	background-color: var(--green);
	padding: 0.5em;
	margin-bottom: 0.5em;
	font-weight: bold;
	color: #111;
}
.priceBox .price{
	font-size: 1.3em;
	line-height: 1.5em;
	text-align: center;
	
}
.priceBox .price .small{
	font-size: 0.7em;
}
.switch2_price{
	background-color: var(--lightGreen);
	color: var(--black);
	text-shadow: none;
	margin: 1em 0 0;
	text-align: left;
	padding: 0 0.5em;
	display: inline-block;
}
.topBonus{
	text-align: center;

}
.topBonus .box{
	position: relative;
	transition: transform 0.8s 0s ease-out,opacity 0.8s 0s ease;
	opacity: 0;
	transform: translateY(1em);
}

.topBonus .box.action{
	transform: translateY(0);
	opacity: 1;
	
}

.itemName{
	background-color: var(--green);
	color: var(--black);
	padding: 0.5em;
	text-align: center;
	font-weight: bold;
}

#bottomProduct .box1{/*ロゴ*/
	display: grid;
	align-items: center;
	justify-content: center;
}
/*#bottomProduct .box1{width: 80%; display: block; margin: 2em auto 0;}	*/
#bottomProduct .topProductBox{
	
	transition: transform 0.8s 0s ease-out,opacity 0.8s 0s ease;
	opacity: 0;
	transform: translateY(1em);

}
#bottomProduct.action .topProductBox{
	transform: translateY(0);
	opacity: 1;
	
}

/*----------------------------------------------------------------
製品情報テーブル
-----------------------------------------------------------------*/

.product{
	box-sizing: border-box;
	width: 100%;
	padding: 1em;
	text-align: center;
	font-size: 0.9em;
	font-weight: bold;
    margin-top: 5%;
	margin-bottom: 5%;
	font-family: "Rubik", sans-serif;
}
.product h3 img{
    width: 100%;
}
.product_wrap{
    max-width: 1700px;
    margin: 0 auto;
	display: flex;
}

.product .jacket{
	width: 45%;
	text-align: center;
	margin-right: 2%;
}
.product .jacket img{
	width: 100%;
	max-width: 550px;
	margin-top: -3%;
}
.product .spec{
	width: 50%;
	padding: 0% 0%;
	text-align: center;
	color: #FFF;
	text-shadow:1px 1px 2px #000,0px 0px  3px #000,0px 0px  5px #000;
}


.spec dl {
    text-align: left;
    display: flex;
    flex-wrap: wrap;
	
}

.spec dt {
    width: 30%;
	
	border-bottom: 1px #000 solid!important;
	line-height: 2em;
}

.spec dd {
  margin-left: 0;
	width: 65%;
	border-bottom: 1px #000 solid!important;
	font-weight: normal!important;
	line-height: 1.7em;
}



table.spec{
	border-spacing: 0;
	width: 100%;
	padding: 1em 0;
	margin: 0 auto;
	max-width: 33em;
	text-align: left;
	--tableborder:#fff;
}
table.spec th{
	width: 7.5em;
	vertical-align: top;
	color: #fff;
}
table.spec th,table.spec td{
	padding:1em 0.5em;
	border-bottom: var(--tableborder) 1px solid;
}
table.spec tr:last-child th,table.spec tr:last-child td{
	border: 0;
}
table.spec img.cero{width:min(5em,50px);}

.hpLink{
	position: relative;
	display: inline-block;
	vertical-align: middle;
	background-color: var(--green);
	color: var(--black);
	font-size: 0.65em;
	line-height: 1em;
	padding:0.2em 0.5em 0.3em;
	border-radius: 6px;
	text-shadow: none;
	margin-left: 0.5em;
	margin-top: -2px;
	font-weight: bold;
}
.hpLink:hover{
	background-color: #000;
	color: var(--green);
}
/*DL版購入ボタン*/
/*eStoreリンク*/
.eStoreLink{
	display: block;
	margin: 0.5em auto;
	width: 45%;
	max-width: 250px;
}

.dlLinkArea{
	text-align: center;
}
a.dlLink_ps{/*PS版DLリンクボタン*/
	width: calc(100% - 1em);
	max-width: 250px;
	text-align: center;
	padding: 1em 2em;
	color:#fff;
	margin: 0.5em auto;
	display:block;
	font-weight: bold;
	letter-spacing: 1px;
	font-size: 1.2em;
	background:linear-gradient(90deg,#117eed,#1b096d);
	box-shadow: 0.3em 0.3em #93819b;
	transition: all 0.2s 0s ease-out;
	transform: skewX(-5deg);
}
a.dlLink_ps:hover{
	background:linear-gradient(90deg,#117eed,#1b096d);
	box-shadow: 0.1em 0.1em #93819b;
}
a.dlLink_ps span{
	position: relative;
	transform: skewX(5deg);
}
a.dlLink_sw{/*Switch版DLリンクボタン*/
	width: calc(100% - 1em);
	max-width: 700px;
	text-align: center;
	padding: 1em 2em;
	color:#fff;
	margin: 0.5em auto;
	display:block;
	font-weight: bold;
	letter-spacing: 1px;
	background:linear-gradient(90deg,#b80e71,#1b096d);
	box-shadow: 0.3em 0.3em #93819b;
	transition: all 0.2s 0s ease-out;
	transform: skewX(-5deg);
}
a.dlLink_sw:hover{
	background:linear-gradient(90deg,#b80e71,#1b096d);
	box-shadow: 0.1em 0.1em #93819b;
}
a.dlLink_sw span{
	position: relative;
	transform: skewX(5deg);
}
	.eStoreLink{
	margin: 0.5em ;
	width: 45%;
	display: inline-block;
	vertical-align: middle;
}

a.dlLink_ps{/*PS版DLリンクボタン*/
	display: inline-block;
	vertical-align: middle;
	width: 45%;
	margin: 0.5em ;
}

/*----------------------------------------------------------------
二階層目
-----------------------------------------------------------------*/
.secondArea{
	padding-top: 1em;
	padding-bottom: 5em;
	position: relative;
	overflow: hidden;
}


.secondArea h1{
}


/*----------------------------------------------------------------
サブナビ
-----------------------------------------------------------------*/
#subNavi,#btSlide,#subNavi2{
	width: 100%;
	max-width: 1300px;
	margin:1em auto;
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	padding: 0 0.5em;
}
#subNavi a,#btSlide .slideBt,#subNavi2 a{
	font-size:clamp(12px, 1.5vw, 16px);
	width: calc(calc(100% / 4) - 0.5em);
	line-height: 1.2em;
	margin: 0.25em;
	padding:0 0.2em;
	text-align: center;
	display: grid;
	align-items: center;
	position: relative;
	
}
#subNavi a.non,#btSlide .slideBt.non{
	opacity: 0.3;
	pointer-events: none;
	filter: grayscale(1);
	color: #666;
}
#subNavi.bt2Set a,#btSlide.bt2Set .slideBt,#subNavi2.bt2Set a{
	width: calc(calc(100% / 2) - 0.5em);
	max-width:calc(calc(1300px / 4) - 0.5em);
}
#subNavi.bt3Set a,#btSlide.bt3Set .slideBt{
	width: calc(calc(100% / 3) - 0.5em);
	max-width:calc(calc(1300px / 4) - 0.5em);
}
#subNavi.bt5Set a,#btSlide.bt5Set .slideBt{
	width: calc(calc(100% / 3) - 0.5em);
	max-width:calc(calc(1300px / 4) - 0.5em);
}
#subNavi.bt5Set a:nth-child(1),#subNavi.bt5Set a:nth-child(2),
#btSlide.bt5Set .slideBt:nth-child(1),#btSlide.bt5Set .slideBt:nth-child(2){
	width: calc(calc(100% / 2) - 0.5em);
	max-width:calc(calc(1300px / 4) - 0.5em);
}

/*#subNavi a.selected{
	background-color:aqua;
}*/
/*ナビのスタイル*/
#subNavi a .box,#subNavi a .navbox,
#btSlide .slideBt .navbox,
#subNavi2 a .box{
	padding:1.2em 0em;
	font-weight: bold;
}
#subNavi .navStyle,
#btSlide .navStyle,
#subNavi2 .navStyle{
	font-weight: bold;
	
	background-color: #000;
	box-shadow: 0.2em 0.2em var(--darkGreen);
	color: #fff;
	letter-spacing: 1px;
	cursor: pointer;
}


#subNavi .navStyle.selected,#subNavi .navStyle:hover,
#btSlide .navStyle.selected,#btSlide .navStyle:hover,
#subNavi2 .navStyle.selected,#subNavi2 .navStyle:hover{
	color: var(--black);
	background-color: var(--green);
	box-shadow: 0.2em 0.2em var(--darkGreen);
}
#subNavi .navStyle.selected,
#btSlide .navStyle.selected,
#subNavi2 .navStyle.selected{
	pointer-events: none;
}
/*----------------------------------------------------------------
更新情報
-----------------------------------------------------------------*/

.newsArea{
}
.newsArea dl{
	padding: 1em;
	border: var(--green) 1px solid;
	margin-bottom: 1em;
}
.newsArea dt{
	width: 6em;
	float: left;
	color: var(--green);
}
.newsArea dd{
	margin-left: 6em;
}

#news .newsArea{
	
	transition: transform 0.8s 0s ease-out,opacity 0.8s 0s ease;
	opacity: 0;
	transform: translateY(1em);

}
#news .action .newsArea{
	transform: translateY(0);
	opacity: 1;
	
}
/*----------------------------------------------------------------
TOP掲載システム
-----------------------------------------------------------------*/
.topSysWrap{
	width: 100%;
	display: block;
	transition: transform 0.8s 0s ease-out,opacity 0.8s 0s ease;
	opacity: 0;
	transform: translateY(1em);

}

.topSysWrap .img{
	width: 100%;
	display: block;
}
.topSysWrap .txt{
	width: 100%;
	display: block;
	padding: 1em 0;

}




.topSysWrap.action{
	transform: translateY(0);
	opacity: 1;
	
}
/*----------------------------------------------------------------
サウンド
-----------------------------------------------------------------*/
.soundWrap,.bgmWrap{
	display: grid;
	column-gap: 1em;
	row-gap: 1em;
	grid-template-columns:repeat(1, 1fr);
}
.soundWrap .img,.bgmWrap .img{
	text-align: center;
}
.songInfo{
	text-align: center;
	padding: 3em 0;
}
.bgmInfo{
	padding: 1em 0;
}
.songTitle,.bgmArtist{
	font-size: 1.5em;
}
.bgmArtist{padding: 0 0.3em;}
.songArtist{
	font-size: 0.8em;
	border-top: #fff 1px solid;
	padding:0.3em 0 1em;
	margin-top: 0.3em;
}
.soundWrap .box,.bgmWrap .box{
	padding:0 0 1em ;
}
.soundWrap .txt,.bgmWrap .txt{
	padding: 0.5em;
	opacity: 1;
}
	.soundWrap h3,.bgmWrap h3{
		background-color: var(--green);
		color: var(--black);
		padding: 0.3em 0.5em;
		font-weight: 700;
	}
/*----------------------------------------------------------------
スペシャル
-----------------------------------------------------------------*/
/*SS*/
.ssTitleBox{text-align: center; font-size: 1.3em; padding:0.5em 1em 1em;}
.ssTitleBox .small{font-size: 0.6em; line-height: 1.5em;}
.ssTitle{ border-bottom: var(--green) 2px solid; padding: 0.3em 1em; display: inline-block; min-width: 10em;}
/*キャストコメント*/
.commentArea .inner2{
	padding: 1em;
}

.commentArea{
	transition: transform 0.8s 0s ease-out,opacity 0.8s 0s ease;
	opacity: 0;
	transform: translateY(2em);
}
.commentArea.scBox.action{
	opacity: 1;
	transform: translateY(0);
}
.commentMidashi{text-align: left;  position: relative;

	background: linear-gradient(#f981b5,#3dc3e5);
	padding: 2px;
	
}
.commentMidashi .bgBox{
	 font-size: 1.3em; 
	padding: 2em 2em 2.3em;
	background-color: #000;
		background-position: right top;
	background-repeat: no-repeat;
	background-size: auto 100%;
}
.commentMidashi span,.commentName{
	font-weight: bold;
}
.cast1 .commentMidashi .bgBox{background-image: url("../special/img/comment/cast1.jpg");}
.cast2 .commentMidashi .bgBox{background-image: url("../special/img/comment/cast2.jpg");}
.cast3 .commentMidashi .bgBox{background-image: url("../special/img/comment/cast3.jpg");}
.cast4 .commentMidashi .bgBox{background-image: url("../special/img/comment/cast4.jpg");}
.cast5 .commentMidashi .bgBox{background-image: url("../special/img/comment/cast5.jpg");}
.cast6 .commentMidashi .bgBox{background-image: url("../special/img/comment/cast6.jpg");}
.cast7 .commentMidashi .bgBox{background-image: url("../special/img/comment/cast7.jpg");}
.cast8 .commentMidashi .bgBox{background-image: url("../special/img/comment/cast8.jpg");}
.cast9 .commentMidashi .bgBox{background-image: url("../special/img/comment/cast9.jpg");}
.cast10 .commentMidashi .bgBox{background-image: url("../special/img/comment/cast10.jpg");}
.cast11 .commentMidashi .bgBox{background-image: url("../special/img/comment/cast11.jpg");}
.cast12 .commentMidashi .bgBox{background-image: url("../special/img/comment/cast12.jpg");}
.cast13 .commentMidashi .bgBox{background-image: url("../special/img/comment/cast13.jpg");}
.cast14 .commentMidashi .bgBox{background-image: url("../special/img/comment/cast14.jpg");}
.cast15 .commentMidashi .bgBox{background-image: url("../special/img/comment/cast15.jpg");}
.cast16 .commentMidashi .bgBox{background-image: url("../special/img/comment/cast16.jpg");}


.commentMidashi .small{font-size: 0.6em; line-height: 1.5em;}
.commentImg{
	width: 80%;
	max-width: 300px;
	margin: 1em auto;
}

.commentBox{
	margin: 0.5em 0;
}
.commentBox .qBox{
	padding: 0.5em;
	background-color: var(--green);
	color: #000;
}
.commentBox .aBox{
	padding: 0.5em;
}
/*カウントダウンボイスバックナンバー*/
#backNum .img{
	position: relative;
}
#backNum .btArea{
	padding: 0.3em;
	position: relative;
	width: 100%;
	bottom: 0;
	left: 0;
	z-index: 3;
	background-color: #000;
}
#backNum .btArea .playBT{
	width: 4em;
	height: 4em;
	max-width: 60px;
	max-height: 60px;
	display:block;
	padding: 1em;
	border:var(--green) 2px solid;

	color: #fff;
	margin: 0 0 0 auto;
	cursor: pointer;
	border-radius: 50%;
	text-align: center;
	position: relative;
	background-color: #000;

}
#backNum .btArea .playBT span:after{
	content: "▲";
	display: block;
	position: absolute;
	font-size: 1.5em;
	line-height: 1em;
	transform: rotate(90deg)scale(0.8);
	width: 100%;
	left: 0;
	text-align: center;
	top:50%;
	margin-top: -0.5em;
}
#backNum .btArea .playBT.selected span:after{
	content: "■";
	transform: rotate(0)scale(0.8);
}


#backNum .btArea .playBT:hover,#backNum .btArea .playBT.selected{
	background-color:  var(--green);

}

/*----------------------------------------------------------------
登場人物
-----------------------------------------------------------------*/
/*スライダー見た目上書き*/
.slideArea4 .swiper-button-prev,
.slideArea4 .swiper-button-next,
.slideAreaCh .swiper-button-prev,
.slideAreaCh .swiper-button-next{
	width: 3em;
	height:3em;
	background-position: left center;
	background-image: url("../img/arrow.png");
	transform: scale(-1,1);
	background-size: contain;
	background-color: transparent;
	border: 0;
}
.slideArea4 .swiper-button-next,
.slideAreaCh .swiper-button-next{

	transform: scale(1,1);
}

.slideArea4 .swiper-button-prev:after,
.slideAreaCh .swiper-button-prev:after,
.slideArea4 .swiper-button-next:after,
.slideAreaCh .swiper-button-next:after{
	display: none;
}

.swiper-pagination{
	color: var(--black);
	font-weight: bold;
}
/*TOPキャラボタン表示*/

.topChSet{
	
	transition: transform 0.8s 0s ease-out,opacity 0.8s 0s ease;
	opacity: 0;
	transform: translateY(1em);

}
.action .topChSet{
	transform: translateY(0);
	opacity: 1;
	
}
/*キャラページキャラ個別*/
.chWrap{

	/*padding-top: 2em;*/
	overflow: hidden;
	position: relative;
}
.chWrap:before{
	content: "";
	width:0%;
	height: 40%;
	background: var(--black_bg);
	display: block;
	position: absolute;
	z-index: -1;
	top:10%;
	transform: skewY(2deg);
	opacity: 0.5;
	transition: all 0.5s 0s ease-out;
}
.action .chWrap:before{
	width: 100%;
	height: 40%;
	/*transform: skewY(2deg);*/
}
.chArea{
	width:100%;
	margin: 0 auto;
	position: relative;
	max-width: 1300px;
	z-index: 5;
	
	
}
.chArea .chImg{
	width: 100%;
	background-position: center top;
	background-size: 100% auto;
	background-repeat: no-repeat;
	margin-right: 0;
	position: absolute;
	top:0;
	bottom: 20%;

	transition: transform 0.7s 0.3s ease-out,opacity 0.7s 0.3s ease;
	opacity: 0;
	transform: translateX(-2em);


}
.action .chArea .chImg{
	opacity: 1;
	transform: translateX(0);

}
#ch0 .chImg{background-image: url("../chara/img/ch0_0.png");}
#ch1 .chImg{background-image: url("../chara/img/ch1_0.png");}
#ch2 .chImg{background-image: url("../chara/img/ch2_0.png");}
#ch3 .chImg{background-image: url("../chara/img/ch3_0.png");}
#ch4 .chImg{background-image: url("../chara/img/ch4_0.png");}
#ch5 .chImg{background-image: url("../chara/img/ch5_0.png");}
#ch6 .chImg{background-image: url("../chara/img/ch6_0.png");}
#ch7 .chImg{background-image: url("../chara/img/ch7_0.png");}
#ch8 .chImg{background-image: url("../chara/img/ch8_0.png");}
#ch9 .chImg{background-image: url("../chara/img/ch9_0.png");}
#ch10 .chImg{background-image: url("../chara/img/ch10_0.png");}
#ch11 .chImg{background-image: url("../chara/img/ch11_0.png");}
#ch12 .chImg{background-image: url("../chara/img/ch12_0.png");}
#ch13 .chImg{background-image: url("../chara/img/ch13_0.png");}
#ch14 .chImg{background-image: url("../chara/img/ch14_0.png");}
#ch15 .chImg{background-image: url("../chara/img/ch15_0.png");}


.chArea .chWord{
	/*width: 10vw;*/
	/*max-width: 96px;*/
	width: 100%;
	max-width: 768px;
	/*width: 15vw;
	max-width: 144px;*/
	position: relative;
	/*left: 3.5em;*/
	left: 0;
	top:0;
	z-index: 5;
	background-position: left top;
	background-repeat: no-repeat;
	background-size:contain;
	opacity: 1;
	transform: translateX(0);


}

.chTxtArea{
	position: relative;
	width: 100%;
	right:0;
	top:0;
	bottom:0;
	display: grid;
	align-items: center;
	justify-content: center;
	z-index: 10;
	padding: 0 1em;
	
	transition: transform 0.6s 0.6s ease-out,opacity 0.6s 0.6s ease;
	opacity: 0;
	transform: translateY(1em);

	
}
.action .chTxtArea{
	opacity: 1;
	transform: translateY(0em);
}
.chTxtArea .box{
	max-width: 570px;
	padding-bottom: 2em;
}
.chTxt{
	padding:1em;
	border-top: var(--green) 1px solid;
}
/*前へ次へ*/
.arrowBt{
	width: 3em;
	height: 6em;
	position: absolute;

	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	top:40vh;
	z-index: 8;
}
.arrowBt:hover{
	opacity: 0.6;
}
.arrowBt.prev{
		left: 0;
	background-position: left center;
		background-image: url("../img/arrow.png");
	transform: scale(-1,1);
}
.arrowBt.next{
	right: 0;
	background-image: url("../img/arrow.png");
	background-position: left center;
	

}

/*サンプルボイス*/
.sampleVoice{
	position:relative;
	z-index: 5;
	text-align: center;
	--voiceBt:#000;
	--voiceOn:#666;
}
.sampleVoice .playBT{
	width: calc(calc(100% / 5) - 1em);
	margin: 0.5em;
	max-width: 89px;
	border: #fff 4px solid;
	background-color: var(--voiceBt);
	border-radius: 50%;
	/*overflow: hidden;*/
	cursor: pointer;
	display: inline-block;
	position: relative;
}
.sampleVoice .playBT img{
	border-radius: 50%;
}

.sampleVoice .playBT.selected,.sampleVoice .playBT:hover{
		background-color: var(--voiceOn);
}
.sampleVoice .playBT.new:before{
	content: "";
	width: 1em;
	height: 1em;
	border-radius: 50%;
	background-color: #4670e2;
	background-size: cover;
	display: block;
	position: absolute;
	transform: scale(0.8);
	z-index: 3;
	top:5px;
	left:5px;
}
.sampleVoice .playBT.new:after{
	content: "";
	width: 1em;
	height: 1em;
	border-radius: 50%;
	background-color: #b3d4ff;
	position: absolute;
	top:5px;
	left:5px;
	display: block;
    animation: 1s easeInOut 0s infinite normal forwards running;
	 animation-name: wave;
}

/*---------------------------------------------------------
フッター色変え
------------------------------------------------------------*/
footer.black{
	background: var(--black_bg);
}
/*---------------------------------------------------------
@media
------------------------------------------------------------*/

@media (max-width: 380px) {/*極小*/


	body{

		font-size:  max(3.6vw, 12px);
	}
	/*----------------------------------------------------------------
	コンテンツ
	-----------------------------------------------------------------*/

	.contentsBox{
		width: calc(100% - 2em);

	}


}

@media (min-width: 481px) {/*481~768px*/
	#backTop{

		bottom:5.5em;
	}

	body{
		font-size:clamp(12px, 2.6vw, 14px);
		line-height: 1.5em;
	}
}
/*@media (min-width: 769px) {*//*タブレット・PC(1300pxまで)*/
@media (min-width: 769px) {
	body{
		font-size:clamp(14px, 2vw, 16px);
		line-height: 1.5em;
	}
}
@media (min-width: 1025px) {/*タブレット・PC(1300pxまで)*/
	body{
		/*font-size:clamp(14px, 2vw, 16px);
		line-height: 1.5em;*/
		/*min-width:1100px;*/
		overflow-x: auto;
		background-image: url("../img/pc/bg.jpg");

	}
	body:before {/*固定背景*/

	background-image: url("../img/pc/bg.jpg");

}
/*----------------------------------------------------------------
サブナビ
-----------------------------------------------------------------*/
	#subNavi.bt5Set a{
	width: calc(calc(100% / 5) - 0.5em);
}
#subNavi.bt5Set a:nth-child(1),#subNavi.bt5Set a:nth-child(2){
	width: calc(calc(100% / 5) - 0.5em);
}

/*----------------------------------------------------------------
TOPへ戻る
-----------------------------------------------------------------*/

	#backTop{

		bottom:0.5em;
	}
/*----------------------------------------------------------------
発売日
-----------------------------------------------------------------*/	
.dateArea .contentsBox{
	max-width: 1000px;
	display: grid;
	column-gap: 1em;
	row-gap: 1em;
	grid-template-columns:repeat(2, 1fr);
	align-items: center;
}
/*----------------------------------------------------------------
TOPトピックス
-----------------------------------------------------------------*/
	.topics a{
		display: inline-block;
		width: calc(calc(100% / 4) - 0.5em);
		margin: 0.5em 0.25em;
	}
/*----------------------------------------------------------------
動画
-----------------------------------------------------------------*/
.movieThumBox{
	width: calc(calc(100% / 2) - 2em);
	margin: 1em;
	display: inline-block;
	vertical-align: top;
}
#topMovie .movieThumBox{
	width: 100%;
	margin: 0 auto;
	display:block;
}
/*----------------------------------------------------------------
TOP製品情報画像エリア
-----------------------------------------------------------------*/
.topProductBox{
	max-width: 1200px;
	display: grid;
	grid-template-areas:
	"a b"
	"d d"
	"c c";
	column-gap: 1em;
	grid-template-columns:40% 60%;
	row-gap: 1em;
}
	#bottomProduct .topProductBox{
		grid-template-columns:40% 60%;
		column-gap: 0;
	}
.topProductBox .box1{grid-area: a;}
.topProductBox .box2{grid-area: b;}
.topProductBox .box3{grid-area: c;}
.topProductBox .box4{grid-area: d;}
#bottomProduct .box1{padding-left: 1em; text-align: center;}
	
	
	
	/*DL版購入ボタン*/
.wide a.dlLink_ps{/*PS版DLリンクボタン*/
	width: calc(50% - 1em);
	display: inline-block;
	margin: 0.5em;
}
.wide a.dlLink_sw{/*Switch版DLリンクボタン*/
	width: calc(50% - 1em);
	display: inline-block;
	margin: 0.5em;
}

/*----------------------------------------------------------------
TOP掲載システム
-----------------------------------------------------------------*/
.topSysWrap .img{
	width: 50%;
	display: inline-block;
	vertical-align: middle;
	padding-right: 1em;
}
.topSysWrap .txt{
	width: 50%;
	display: inline-block;
	vertical-align: middle;
	padding: 1em 0 1em 1em;
}
/*----------------------------------------------------------------
サウンド
-----------------------------------------------------------------*/
.soundWrap{

	grid-template-columns:repeat(2, 1fr);
}
.bgmWrap{

	grid-template-columns:20% 1fr;
}
	.bgmWrap .img{
		padding-top: 1em;
	}
/*----------------------------------------------------------------
登場人物
-----------------------------------------------------------------*/
.arrowBt{
top:20%;
}

.chWrap:before{
	content: "";
	height: 60%;
	top:15%;
	transform: skewY(2deg);
}
.action .chWrap:before{
	width: 100%;
	height: 60%;
	/*transform: skewY(2deg);*/
}

	
.chArea .chImg{
	width: 50%;
	position: relative;
	background-size: contain;
	background-position: left top;
}
.chArea .chWord{
	/*width: 5vw;*/
	/*width: 7vw;*/
	width: 50%;

	position: absolute;
	/*left: 10%;*/
	left: 0;

}
.chTxtArea .box{
	min-height: 100vh;
	max-width: 570px;
}

.chTxtArea{
	position: absolute;
	width: 45%;
	right:2vw;
	top:0;
	bottom:0;
	display: grid;
	align-items: center;
	justify-content: center;
	
}
	.chArea:before{
		display: none;

	}
	
	/*----------------------------------------------------------------
	製品情報
	-----------------------------------------------------------------*/	
	#product .priceBox{/*製品情報ページ*/
		margin: 0.5em 0;
		padding: 2em 0;

	}
	#product .bonusImg{
		padding-top: 0;
	}
	img.tuujoImg{
	width: 96%;
}
	.eStoreLink{
	margin: 0.5em ;
	width: 45%;
	display: inline-block;
	vertical-align: middle;
}

a.dlLink_ps{/*PS版DLリンクボタン*/
	display: inline-block;
	vertical-align: middle;
	width: 45%;
	margin: 0.5em ;
}

}
@media (min-width: 1451px) {
	body{
		font-size:clamp(14px, 1.5vw, 18px);
		line-height: 1.5em;
	}

}
@media screen and (min-width: 1051px) {	
	.newsArea dl{
		width: 200%!important;
}

}
@media screen and (max-width: 1050px) {	
	.newsArea dl{
	width: none!important;
}
.product_wrap{
	display: block;
}
.product .jacket{
	width: 95%;
}
.product .jacket img{
	width: 80%;
	max-width:none;
}
.product .spec{
	width: 95%;
	margin-top: 5%;
	margin-left: 5%;
}
	
	
}