@charset "utf-8";
/*@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP&display=swap');*/
/*
↓明朝*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;700&display=swap');
/* CSS Document */
*{zoom:1;}
:root{
	--gold:#947c2d;
	--goldTxt:#d2b880;
	--gLine:linear-gradient(90deg,rgba(148,124,45,0) ,#947c2d 5% ,#947c2d 95% ,rgba(148,124,45,0) );
}
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: 100% auto;
	color:#fff;
    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%;
}
nav,header,div,p,a,ul,li,section,article,dl,dt,dd,h1,h2,h3,h4,h5,h6,img,table{
	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;
	-webkit-tap-highlight-color: transparent;
}
a:hover{
}

a.txtLink{
	border-bottom: #fff 1px dashed;
	border-spacing: 2px;
	color: #fff;
}
a.txtLink:hover{
	border-bottom: var(--goldTxt) 1px dashed;
	color: var(--goldTxt);
}
.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(--gold) 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(--gold);
	border-top: var(--gold) 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;

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

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


/*----------------------------------------------------------------
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;
	background-image: url("../img/viewmore_bg.png");
	background-size:100% 100%;
	
	color:var(--goldTxt);
	margin: 2em auto;
	display: block;
	font-weight: bold;
	letter-spacing: 1px;
}
.topBox a.more:hover{
	background-image: url("../img/viewmore_bg_hover.png");

}

/*----------------------------------------------------------------
TOP発売日掲載エリア
-----------------------------------------------------------------*/
.dateArea{
	
}
/*----------------------------------------------------------------
TOPトピックス
-----------------------------------------------------------------*/
.topics{
	padding: 0.5em 0;
}
.topics a{
	display: block;
	margin: 0.5em 0;
}
/*----------------------------------------------------------------
動画
-----------------------------------------------------------------*/

.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);

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


 .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;
}
/*タイトル別画像*/
img.movieTitle{
	position: absolute;
	display: block;
	width: 100%;
	left: 0;
	top:-1em;
	z-index: 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: 1000px;
	margin: 0 auto;
	text-align: center;
}
.topProductBox .box{
	padding: 1em 0;
	
	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;
	
}

.topProductBox .price{
	font-size: 1.3em;
	line-height: 1.5em;
	text-align: center;
	color: var(--goldTxt);
}
#bottomProduct .box1{/*ロゴ*/
	display: grid;
	align-items: center;
	justify-content: center;
}
/*----------------------------------------------------------------
製品情報テーブル
-----------------------------------------------------------------*/
table.spec{
	border-spacing: 0;
	width: 100%;
	padding: 1em 0;
	margin: 0 auto;
	max-width: 32em;
	text-align: left;
	--tableborder:var(--gold);
}
table.spec th{
	width: 4.5em;
	vertical-align: top;
	color: var(--goldTxt);
}
table.spec th,table.spec td{
	padding:1em;
	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);}


/*----------------------------------------------------------------
二階層目
-----------------------------------------------------------------*/
.secondArea{
	padding-top: 1em;
	padding-bottom: 5em;
	position: relative;
	overflow: hidden;
}
.secondArea:before{
	content: "";
	width: 50%;
	top:0;
	left: 0;
	height: 50vh;
	background-image: url("../img/leaf.png");
	background-repeat: no-repeat;
	background-size: contain;
	display: block;
	position: absolute;
	z-index: -1;
	transition: transform 0.7s 0s ease-out,opacity 0.7s 0s ease;
	opacity: 0;
	transform: translateX(-2em);

}
.secondArea:after{
	content: "";
	width: 50%;
	top:0;
	right: 0;
	height: 50vh;
	background-image: url("../img/leaf.png");
	background-repeat: no-repeat;
	background-size: contain;
	display: block;
	position: absolute;
	z-index: -1;
	transform: scale(-1,1) translateX(-2em);
	transition: transform 0.7s 0s ease-out,opacity 0.7s 0s ease;
	opacity: 0;
}
.action .secondArea:before{
	transform: translateX(0);
	opacity: 1;
}
.action .secondArea:after{
	transform: translateX(0) scale(-1,1);
	opacity: 1;
}
#chara .secondArea:before{

	opacity: 1;
	transform: translateX(0);

}
#chara .secondArea:after{

	transform: scale(-1,1) translateX(0);
	transition: transform 0.7s 0s ease-out,opacity 0.7s 0s ease;
	opacity: 1;
}

.secondArea h1{
}
/*----------------------------------------------------------------
サブナビ
-----------------------------------------------------------------*/
#subNavi{
	width: 100%;
	max-width: 1300px;
	margin:1em auto;
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	padding: 0 1em;
}
#subNavi a{
	font-size:clamp(12px, 1.5vw, 16px);
	width: calc(calc(100% / 4) - 0.5em);
	line-height: 1.2em;
	margin: 0.25em;
	padding:0 1.2em;
	text-align: center;
	display: grid;
	align-items: center;
	position: relative;
	color: var(--goldTxt);
	
}

#subNavi.bt2Set a{
	width: calc(calc(100% / 2) - 0.5em);
	max-width:calc(calc(1300px / 4) - 0.5em);
}
#subNavi.bt3Set a{
	width: calc(calc(100% / 3) - 0.5em);
	max-width:calc(calc(1300px / 4) - 0.5em);
}
/*#subNavi a.selected{
	background-color:aqua;
}*/
/*ナビのスタイル*/
#subNavi a .box{
	padding:1.2em 1em;
}
#subNavi .navStyle .box{
	font-weight: bold;
	
	background-image: url("../img/navi/sub_m.png");
	background-position: center top;
	background-size: auto 100%;
}
#subNavi .navStyle .box:before,
#subNavi .navStyle .box:after{
	content: "";
	position: absolute;
	display: inline-block;
	top:0;
	bottom: 0;
	width: 1.2em;
	background-repeat: no-repeat;
	background-size: auto 100%;
}
#subNavi .navStyle .box:before{
	background-position: left top;
	background-image: url("../img/navi/sub_l.png");
	left: 0;
}
#subNavi .navStyle .box:after{
	background-position: right top;
	background-image: url("../img/navi/sub_r.png");
	right: 0;
}
#subNavi .navStyle.selected .box,#subNavi .navStyle:hover .box{
	background-image: url("../img/navi/sub_m_select.png");
}

#subNavi .navStyle.selected .box:before,#subNavi .navStyle:hover .box:before{
	background-image: url("../img/navi/sub_l_select.png");
}
#subNavi .navStyle.selected .box:after,#subNavi .navStyle:hover .box:after{
	background-image: url("../img/navi/sub_r_select.png");
}
/*----------------------------------------------------------------
更新情報
-----------------------------------------------------------------*/
.newsArea dl{
	padding: 1em;
	border: var(--gold) 1px solid;
	margin-bottom: 1em;
}
.newsArea dt{
	width: 6em;
	float: left;
	color: var(--goldTxt);
}
.newsArea dd{
	margin-left: 6em;
}
/*----------------------------------------------------------------
登場人物
-----------------------------------------------------------------*/
/*スライダー見た目上書き*/
.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;
}
/*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;
}


.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.1s ease-out,opacity 0.7s 0.1s 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");}
#ch6 .chImg{background-image: url("../chara/img/ch7_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;
	
}
.chTxtArea .box{
	max-width: 570px;
	padding-bottom: 2em;
}
.chTxt{
	padding: 1.5em;
}
/*前へ次へ*/
.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-color: transparent;
	/*background-color: #2a4073;*/
	border-color: var(--gold);
}
/*---------------------------------------------------------
@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(1450pxまで)*/
@media (min-width: 769px) {
	body{
		font-size:clamp(14px, 2vw, 16px);
		line-height: 1.5em;
	}
}
@media (min-width: 1025px) {/*タブレット・PC(1450pxまで)*/
	body{
		/*font-size:14px;
		line-height:1.5em;*/
		min-width:1300px;
		overflow-x: auto;
		background-image: url("../img/pc/bg.jpg");

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

	#backTop{

		bottom:0.5em;
	}
/*----------------------------------------------------------------
TOPトピックス
-----------------------------------------------------------------*/
	.topics a{
		display: inline-block;
		width: calc(50% - 1em);
		margin: 0.5em;
	}
/*----------------------------------------------------------------
動画
-----------------------------------------------------------------*/
.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: 1000px;
	display: grid;
	grid-template-areas:
	"a b"
	"c c";
	column-gap: 1em;
	
	
}
.topProductBox .box.box1{grid-area: a;}
.topProductBox .box.box2{grid-area: b;}
.topProductBox .box.box3{grid-area: c;}
	

/*----------------------------------------------------------------
登場人物
-----------------------------------------------------------------*/
.arrowBt{
top:20%;
}


.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;

	}

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