@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Zen+Old+Mincho:wght@400;500;600;700;900&display=swap');

#Content_feature * {
  font-family: 'Noto Sans JP', "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
}
#Content_feature .fontMin {
  font-family: "Zen Old Mincho", serif;
}
#Content_feature{
	position: relative;
	background: #000000;
	margin-bottom: 20px;
}
/*固定背景*/
#Content_feature .contBgWrap::before{
    content: "";
    position: sticky;
	inset: 80px 0 0 0;
    display: block;
	width: 100%;
	height:calc(100svh - 80px);
	background: url(images/bg.png) no-repeat center top / cover;
}
/*//固定背景*/
#Content_feature a{
	color: #000 !important;
	text-decoration: none;
}
#Content_feature .article_inner{
	margin: 0 auto;
	max-width: 1000px;
}
#Content_feature .inner{
  margin: 0 auto;
  max-width: 930px;
}
#Content_feature a.btn{
	background: #595959;
	display: block;
	width: 100%;
	height: 41px;
	line-height: 41px;
	font-size: 22px;
	font-weight: 700;
	color: #ffffff !important;
	text-align: center;
}
#Content_feature a.btn:hover{
	opacity: 0.7;
}
@media (max-width: 820px) {
	/*固定背景*/
	#Content_feature .contBgWrap::before{
		inset: 60px 0 0 0;
		height:calc(100svh - 60px);
	}
	/*//固定背景*/
	#Content_feature .inner{
		max-width: 440px;
 		margin: auto;
		padding-left: 5.1%;
		padding-right: 5.1%;
	}
	#Content_feature .article_inner .inner{
		padding-left: 0%;
		padding-right: 0%;
	}
}/*-SP tablet-*/
@media (max-width: 660px) {
#Content_feature {/*feature.cssを上書き。固定背景のため*/
	overflow: visible;
}
}/*-SP tablet-*/
@media (max-width: 390px) {

}/*-SP-*/
#Content_feature .flex{
	display: flex;
	flex-wrap: wrap;
}
@media screen and (min-width: 821px){
#Content_feature .pcFlex{
	display: flex;
	flex-wrap: wrap;
}
}/*-PC only-*/


/*		#mv
-----------------------------*/
#mv{
	background: url(images/mv_bg.png) no-repeat center bottom / cover;
	padding-top: min(5.2vw, 52px);
	padding-bottom: min(6.5vw, 65px);
}
#mvTxt {
	display: grid;
	grid-template-columns: 1fr 63.5%;
	grid-template-rows: auto auto;
	width: 100%;	
	gap: 0 min(2.5vw, 25px);
}
#mvTxt #mainLead{
	margin-top: 1em;
	color: #ffffff;
	font-size: min(4.148vw, 20.74px);
}
#mainvisual {
	margin-left: -1.4vw;
}
@media (max-width: 820px) {
	#Content_feature #mvTxt.article_inner{
		padding: 0 5.12% 10px;
	}
	/**/
	#mvTxt h1 {
		align-self: end;
		grid-column: 2 / 3;
		grid-row: 1 / 2;
		margin-bottom: 0;
	}
	#mainvisual {
		grid-column: 1 / 2;
		grid-row: 1 / 2;
	}
	#mainLead {
		grid-column: 1 / 3;
		grid-row: 2 / 3;
	}
	/**/
	#mainvisual {
		display: block;
		text-align: center;
	}
	#mainvisual img{
    	width: min(100%, 320px);
		margin: auto;
	}
}/*-SP tablet-*/
@media screen and (min-width: 821px){
	#mvTxt {
		padding-right: min(3.5vw, 35px);
	}
	#mvTxt h1 {
		grid-column: 2 / 3;
		grid-row: 1 / 2;
		text-align: center;
		margin: 30px 0 0;
	}
	#mvTxt h1 img{
		width: min(90%, 542px);
		margin: 0 auto;
	}
	#mainvisual {
		grid-column: 1 / 2;
		grid-row: 1 / 3;
	}
	#mainLead {
		grid-column: 2 / 3;
		grid-row: 2 / 3;
	}
}/*-PC only-*/


/*		#menuList
-----------------------------*/
#Content_feature #menuList{
	width: min(100%, 970px);
  margin: min(3.5vw, 35px) auto 0;
  background-color: rgba(255, 255, 255, .8);
  border: 1px solid #251e1c;
  text-align: center;
}
#menuList .txt p{
	font-size: min(3.8vw, 19px);
	color: #ffffff;
	line-height: 1.2em;
	text-align: left;
}
#menuList .txt p span{
	display: block;
	font-size: 1.5em;
    line-height: 1.2em;
	color: #e71500;
}
#menuListSlider{
	padding: 35px min(2.5vw,25px) 35px 0;
}
#menuListSlider li{
  padding: 0 min(2.5vw,25px);
  text-align: center
}
#menuListSlider li a{
	display: block;
}
#menuListSlider li a img{
	width: 100%;
	aspect-ratio: 145/207;
}
@media (max-width: 820px) {
	#menuList{
		margin-top: 26px;
		padding: 0px 5.12%;
		text-align: center;
	}	
	#menuList .txt{
		position: relative;
		padding: 10px 0 40px;
	}
	#menuList .txt::before{
		position: absolute;
		top: 0;
		left: 0;
		content: "";
		display: block;
		margin: 0 -5.12vw;
		width: calc(100% + 10.24vw);
		height: 100%;
		background: url(images/mv_menu_bg2.png) no-repeat center bottom / cover;
	}
	#menuList .txt p{
		position: relative;
		display: flex;
        justify-content: center;
		align-items: center;
		gap: 0 1em;
	}
	#menuList .txt p span{
		display: inline-block;
	}
	#menuListSlider{
		padding: 10px min(2.5vw,25px) 20px 0;
	}
}/*-SP tablet-*/
@media screen and (min-width: 821px){
    #menuList {
        display: flex;
	}
    #menuList .txt {
		display: grid;
		align-items: center;
		width: 123px;
  		padding-left: 20px;
		background: url(images/mv_menu_bg.png) no-repeat left center / 100% 100%;
	}
	#menuList .txt p span{
		margin-bottom: 0.5em;
	}
	#menuListSlider{
		width: calc(100% - 123px)
    }
}/*-PC only-*/


/*		contBgWrap
-----------------------------*/
.contBgWrap{
	position: relative;
}


/*		.contBox
-----------------------------*/
#Content_feature #item01{	
    margin-top: calc(-100svh + 80px);
}
#Content_feature .contBox {
  position: relative;
  width: 100%;
  background: rgb(0, 0, 0, 0.65) url(images/item_arrow.png) no-repeat center min(3vw, 30px) / min(100%, 930px) auto;
  padding: min(12vw, 120px) min(5vw, 35px) 30px;
  z-index: 0;
}
#Content_feature .contBox:last-child {
    padding-bottom: 200px !important;
}
#Content_feature .contBox h4:has(img){
	font-size: 0;
}
#Content_feature .contBox .contBoxHead {
    text-align: center;
}
#Content_feature .contBox .contTiWrap {
	position: relative;
	display: inline-flex;
    flex-direction: column;
    align-items: center;
    color: #ffffff;
    text-align: center;
    font-weight: 700;
}
#Content_feature .contBox .contName {
	display: inline-block;
	margin-bottom: 0.5em;
	font-size: min(4.0vw,40px);
}
#Content_feature .contBox .contTi {
	position: relative;
	display: inline-flex;
    justify-content: center;
	align-items: center;
	padding: 0.3em 0.5em 0.6em;
	font-size: min(6.0vw,60px);
}
#Content_feature .contBox .contTi span .fontS{
	display: block;
	font-size: 0.4em;
}
#Content_feature .contBox .contTi::before,
#Content_feature .contBox .contTi::after {
	position: absolute;
	content: "";
	display: inline-block;
	width: 206px;
	height: 134px;
	border: solid #ffffff;
}
#Content_feature .contBox .contTi::before{
	top: 0;
	left: 0;
	border-width: 1px 0 0 1px;
}
#Content_feature .contBox .contTi::after {
	bottom: 0;
	right: 0;
	border-width: 0 1px 1px 0;
}
#Content_feature .contBox .price{
	margin-top: 14px;
	text-align: right;
	font-size: 14px;
	color: #ffffff;
}
@media (max-width: 820px) {	
#Content_feature #item01{	
    margin-top: calc(-100svh + 60px);
}
#Content_feature .contBox {
  /*background: rgb(0, 0, 0, 0.65) url(images/item_arrow.png) no-repeat center min(3vw, 30px) / max(100%, 664px) auto;*/
  background: rgb(0, 0, 0, 0.65) url(images/item_arrow.png) no-repeat center top / max(100%, 664px) auto;
  padding: min(18vw, 90px) min(5vw, 35px) 30px;
}
#Content_feature .contBox:last-child {
    padding-bottom: 100px !important;
}
#Content_feature .contBox .contName {
	font-size: 20px;
}
#Content_feature .contBox .contTi {
    min-width: 300px;
	min-height: 84px;
	font-size: 30px;
}
#Content_feature .contBox .contTi::before,
#Content_feature .contBox .contTi::after {
	width: 103px;
	height: 67px;
}
#Content_feature .contBox .price {
    width: 100%;
}
}/*-SP tablet-*/
@media screen and (min-width: 821px){
#Content_feature .contBox .contTi {
    min-width: 505px;
	min-height: 142px;
}
#Content_feature .contBox .price{
	position: absolute;
	top: 100%;
	right: 0;
}
}/*-PC only-*/


/*		.infoList
-----------------------------*/
.infoList {
	position: relative;
	margin-top: 14px;
	text-align: center;
}
.infoList li{
	font-size: 17px;
	line-height: 1.65em;
	color: #ffffff;
	font-weight: 700;
}
.infoList li:not(.price) span:not(.label){
	font-size: 1.2em;
}
.infoList li:not(.price) span.fontS{
	font-size: 17px;
}
@media (max-width: 820px) {	
.infoList li,
.infoList li:not(.price) span.fontS{
	font-size: 14px;
}	
}/*-SP tablet-*/
@media screen and (min-width: 821px){
}/*-PC only-*/


/*		.bookContent
-----------------------------*/
.bookContent {
	margin-top: 43px;
}
#Content_feature .bookContent h3{
	display: grid;
	align-items: center;
	margin-bottom: 2em;
	min-height: 3.89em;
	font-size: 28px;
	line-height: 1.5em;
	font-weight: 700;
	color: #989aa7;
}
.bookContent p{
	flex: 1;
}
.bookContentStory{
	display: flex;
	gap: 0 20px;
}
.bookContentStory h4{
	display: flex;
	flex-direction: column;
	gap: 6px 0;
	margin-top: 8px;
	width: 20px;
	font-size: 0;
}
.bookContentStory h4::after{
	content: "";
	display: block;
	width: 100%;
	flex: 1;
	border: 1px solid #e71500;
}
.bookContentStory h4 img{

}
.bookContentStory p{
	color: #ffffff;
	font-size: 15px;
	line-height: 1.7em;
	letter-spacing: 0.03em;
	font-weight: 500;
}
.bookContentZoku{
	margin-top: 37px;
}
.bookContentZoku h4{
	margin-bottom: 10px;
}
.bookContentZoku h4 img{
	margin-right: auto;
	width: 214px;
	aspect-ratio: 214/47;
}
.bookContentZoku p{
	font-size: 17px;
	color: #e71500;
	line-height: 1.7em;
	letter-spacing: 0.03em;
	font-weight: 700;
}
.bookContent .imgBtn .btnWrap a{
	margin-top: 0.8em;
}
@media (max-width: 820px) {		
.bookContent .imgBtn{
    margin: 40px auto;
	width: min(80%, 260px);
}
#Content_feature .bookContent h3{
	font-size: 20px;
}
.bookContentStory p{
	font-size: 13px;
}
.bookContentZoku h4 img{
	width: 140px;
}
.bookContentZoku p{
	font-size: 14px;
}
}/*-SP tablet-*/
@media (max-width: 660px) {
	
}/*-SP tablet-*/
@media screen and (min-width: 821px){
.bookContent {
	display: flex;
	flex-direction: row-reverse;
	gap: 0 calc(77/930*100%);
}
.bookContent .txt {
	flex: 1;
}
.bookContent .imgBtn {
	width: calc(273/930*100%);
}
.bookContent h3{
    margin-right: -1em;
}
}/*-PC only-*/


/*		.character
-----------------------------*/
.character {
	margin-top: 39px;
	padding-bottom: 24px;
	border-top: 2px solid #e71500;
	background-color: #ffffff;
}
.characterTi img{
	width: 131.7817px;
	height: 18.2754px;
}
.characterList {
	margin: 18px auto 0;
	width: 93.5%;
    display: flex;
    justify-content: center;
    gap: 30px calc(40 / 870 * 100%);
}
.character ul li:has(figure){
	display: flex;
	align-items: flex-start;
	gap: 0 16px;
}
.character ul li figure{
	width: min(42%,113px);
}
.character ul li .txts{
	flex: 1;
}
.character ul li h5{
    margin-bottom: 5px;
	color: #000000;
	font-size: 25px;
	/*line-height: 16px;*/
	line-height: 25px;
	font-weight: 700;
}
#item03 .character ul li p + h5{
	margin-top: 30px;
}
.character ul li h5 .rubby{
	display: block;
	font-size: 10px;
}
.character ul li:not(:has(figure)) h5 .rubby{
	display: inline-block;
}
.character ul li p{
	font-size: 14px;
	line-height: 1.78em;
	letter-spacing: 0.03em;
	font-weight: 500;
}
@media (max-width: 820px) {	
	.character {
        max-width: 440px;
        margin: 39px auto 0;
	}
	.characterList{
		flex-wrap: wrap;
		width: 90%;
	}
	
}/*-SP tablet-*/
@media (max-width: 660px) {
}/*-SP tablet-*/
@media screen and (min-width: 821px){
.charaBox {
	flex: 1;
}
.character ul li:not(:has(figure)) h5{
	text-align: center;
}
#item03 .character ul li{
	flex: auto;
	width: 32%;
}
#item03 .character ul li:not(:has(figure)){
	width: 30%;
}
#item03 .character ul li:not(:has(figure)) h5{
	text-align: left;
}
#item04 .character ul li{
	width: 32%;
    flex: auto;
}
#item04 .character ul li:nth-of-type(3){
	width: 23%;
}
}/*-PC only-*/


/*		.game
-----------------------------*/
.game{
	background-color: #e71500;
}
#Content_feature .game.inner{
	margin-top: 70px;
	padding: min(2.8vw,28px);
}
.game h3{
	margin-bottom: 1em;
	font-size: 22px;
	font-weight: 700;
	text-align: center;
}
.game .gameCatch{
	margin-bottom: 1em;
	font-size: 20px;
	color: #ffffff;
	text-align: center;
}
.game p:not(.gameCatch){
	font-size: 15px;
	font-weight: 500;
	line-height: 1.7em;
	letter-spacing: 0.03em;
}
@media (max-width: 820px) {	
#Content_feature .game.inner{
	padding: min(2.8vw,28px) min(5%,28px);
}
.game .img{
	margin-top: 20px;	
}	
/*
.game h3{
    margin-bottom: 4px;
	font-size: 20px;
}
.game .gameCatch{
    margin-bottom: 6px;
	font-size: 18px;
}
.game p:not(.gameCatch){
	font-size: 13px;
    line-height: 1.5em;
}
.game .img{
	margin-top: 10px;
	text-align: center;
}
.game .img img{
	width: min(100%, 220px);
}	*/
}/*-SP tablet-*/
@media screen and (min-width: 821px){
.game{
	display: flex;
	flex-direction: row-reverse;
	gap: 0 2.3%;
}
.game .txts{
	flex: 1;
}
.game .img{
	width: min(40.7%,356px);	
}
}/*-PC only-*/


/*		
-----------------------------*/
/* パソコンで見たときは"pc"のclassがついた画像が表示される */
@media (min-width: 821px) {
.sp { display: none !important; }
}
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media (max-width: 820px) {
.pc { display: none !important; }
}