@charset "utf-8";
/*-----------------------------------------------
 * Header
-------------------------------------------------*/
#header{
	position: relative;
	width: 100%;
	height: 100vh;
	min-height: 952px;
	z-index: 4;
}
.header_info{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	display: flex;
	align-items: center;
	flex-direction: column;
	z-index: 2;
}
.h1_logo{
	width: 472px;
	height: 240px;
	background: url(../img/common/logo.png) no-repeat center / contain;
	/*margin-bottom: 8px;*/
}

.head_releaseDay{
	position: relative;
	padding: 0 16px 16px;
	line-height: 1;
	font-size: 36px;
	color: #fff;
	/*font-family: 'EB Garamond', serif;*/
	font-weight: 700;
	text-align: center;
}
.head_releaseDay small{
	font-size: 30px;
}
.head_releaseDay small.min2{
	font-size: 18px;
}
/*.head_releaseDay:before{
	content: '';
	position: absolute;
	height: 32px;
	right: 0;
	bottom: 0;
	left: 0;
	background: url(../img/top/bg_releaseDay.svg) no-repeat center / cover;
}*/
.head_releaseDay:after{
	content: '';
	width: 147px;
	height: 144px;
	position: absolute;
	top: -30px;
	right: -10px;
	background: url(../img/top/accent_head_releaseDay.png)no-repeat center right / contain;
}
.head_releaseDay span.head_releaseDayTxt{
	position: relative;
	z-index: 2;
	text-align: center;
}

@media screen and (min-width: 768px){
	.head_releaseDay span.head_releaseDayTxt:nth-of-type(2){
		margin-top: 12px;
		display: inline-block;
	}
}

.head_releaseDayTxt:before{
	content: '';
	position: absolute;
	height: 32px;
	right: -10px;
	bottom: 0;
	left: -10px;
	background: url(../img/top/bg_releaseDay.svg) no-repeat center / 100%;
	z-index: -1;
}
.head_releaseDay span.head_releaseDayTxt span{
	color: #ffe66b;
	font-size: 48px;
}

.buyListsWrap{
	padding-top: 24px;
}
.buyListsWrap p{
	font-size: 24px;
	font-weight: 500;
	margin-bottom: 24px;
	line-height: 1;
	text-align: center;
}
.buyLists{
	width: 600px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.buyList{
	padding: 0 12px;
}
.buyList a{
	width: 240px;
	height: 64px;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0 56px 0 28px;
	transition: .3s ease;
	position: relative;
	background-color: rgba(0,0,0,.64);
}
.buyList a.cs{
	opacity: 0.6;
}
.buyList a:before{
	content: '';
	position: absolute;
	top: 4px;
	right: 4px;
	bottom: 4px;
	left: 4px;
	/*background: url(../img/common/buyList_frm.svg) no-repeat center center/ contain;*/
	background-image: url(../img/common/buyList_frm_tl.svg),url(../img/common/buyList_frm_tr.svg),url(../img/common/buyList_frm_bl.svg),url(../img/common/buyList_frm_br.svg);
	background-repeat: no-repeat;
	background-position: left top,right top,left bottom,right bottom;
	background-size: 12px 12px;
}
.buyList a:after{
	content: '';
	position: absolute;
	width: 33px;
	height: 20px;
	top: calc(50% - 10px);
	right: 15px;
	background: url(../img/common/arrow.png) no-repeat center right / contain;
	transition: .3s ease;
}
.buyList a:hover{
	background-color: rgba(167, 0, 26,.64);
}
.buyList a:hover::after{
	transform: translateX(4px);
}

.buyList_ps5{
	display: block;
	width: 132px;
	padding-top: 32px;
	background: url(../img/common/logo_ps5.svg) no-repeat center / contain;
}
.buyList_steam{
	display: block;
	width: 107px;
	padding-top: 32px;
	background: url(../img/common/logo_steam.svg) no-repeat center / contain;
}
.buyList_xbox{
	display: block;
	width: 120px;
	padding-top: 32px;
	background: url(../img/common/logo_xbox.svg) no-repeat center / contain;
}

.buyList_frm{
	position: absolute;
	top: 7px;
	left: 7px;
	bottom: 7px;
	right: 7px;
	border: 1px solid #bba84d;
}
.buyList_frm:before{
	content: '';
	position: absolute;
	top: -4px;
	bottom: -4px;
	right: 7px;
	left: 7px;
	border-top: 1px solid #bba84d;
	border-bottom: 1px solid #bba84d;
}
.buyList_frm:after{
	content: '';
	position: absolute;
	top: 7px;
	bottom: 7px;
	right: -4px;
	left: -4px;
	border-right: 1px solid #bba84d;
	border-left: 1px solid #bba84d;
}



@media screen and (max-width: 767px){
	#header{
		min-height: auto;
		padding-top: calc(max(165.3334%, 740px) + 105px);
		height: auto;
	}
	#header:before{
		content: '';
		position: absolute;
		height: 60px;
		top: 0;
		left: 0;
		right: 0;
		background: url(../img/common/sp_top_frm_l.png),url(../img/common/sp_top_frm_r.png);
		background-position: top left, top right;
		background-repeat: no-repeat;
		background-size: 24px 60px;
		z-index: 2;
	}
	#header:after{
		content: '';
		position: absolute;
		top: 4px;
		height: 4px;
		right: 24px;
		left: 24px;
		background: linear-gradient(180deg, #bba84d 0%, #bba84d 25%, transparent 25.1%, transparent 74.9%, #bba84d 75%);
		opacity: 0.8;
	}
	.header_infoWrap{
		position: absolute;
		overflow: hidden;
		top: 0;
		right: 0;
		left: 0;
		padding-top: max(165.3334%, 740px);
	}
	.header_infoWrap:before{
		content: '';
		position: absolute;
		height: 60px;
		bottom: 0;
		left: 0;
		right: 0;
		background: url(../img/common/sp_bottom_frm_l.png),url(../img/common/sp_bottom_frm_r.png);
		background-position: bottom left, bottom right;
		background-repeat: no-repeat;
		background-size: 24px 60px;
		z-index: 2;
	}
	.header_infoWrap:after{
		content: '';
		position: absolute;
		bottom: 4px;
		height: 4px;
		right: 24px;
		left: 24px;
		background: linear-gradient(180deg, #bba84d 0%, #bba84d 25%, transparent 25.1%, transparent 74.9%, #bba84d 75%);
		opacity: 0.8;
		z-index: 1;
	}
	.header_info{
		width: 100%;
	}
	.h1_logo{
		width: 76.4%;
		height: auto;
		padding-top: 38.8%;
		margin-bottom: 16px;
	}
	.head_releaseDay{
		font-size: 3.3rem;
		line-height: 1.1;
	}
	.head_releaseDay:before{
		content: unset;
	}
	.head_releaseDay span.head_releaseDayTxt span{
		font-size: 2.8rem;
	}
	.head_releaseDay small{
		font-size: 1.6rem;
	}
	.head_releaseDay small.min2{
		font-size: 1.4rem;
	}
	.head_releaseDayTxt:before{
		content: '';
		position: absolute;
		height: 24px;
		right: -10px;
		bottom: 0;
		left: -10px;
		background: url(../img/top/bg_releaseDay.svg) no-repeat center / 100%;
		z-index: -1;
	}
	.head_releaseDay:after{
		content: unset;
	}
	.head_releaseDayTxt:last-child::after{
		content: '';
		position: absolute;
		width: 73.5px;
		height: 72px;
		background: url(../img/top/accent_head_releaseDay.png) no-repeat center right / contain;
		right: -36px;
		top: calc(50% - 36px);
		z-index: -1;
	}
	.head_releaseDay span.head_releaseDayTxt:last-child {
		z-index: 1;
	}
	.buyListsWrap{
		width: 100%;
		padding-top: 12px;
	}
	.buyListsWrap p{
		font-size: 1.6rem;
		margin-bottom: 2px;
	}
	.buyLists{
		width: 100%;
		flex-wrap: wrap;
		justify-content: center;
	}
	.buyList{
		padding: 0 6px;
		max-width: calc(50% - 6px);
		margin-top: 12px;
	}
	.buyList a{
		width: 160px;
		max-width: 100%;
		height: 48px;
		padding: 0 28px 0 14px;
	}
	.buyList a:before{
		background-size: 8px 8px;
	}
	.buyList a:after{
		width: 20px;
		height: 12px;
		top: calc(50% - 6px);
		right: 12px;
	}
	.buyList_ps5{
		width: 76px;
		height: 16px;
	}
	.buyList_steam{
		width: 67px;
		height: 20px;
	}
	.buyList_xbox{
		width: 80px;
		height: 20px;
	}
	.buyList_frm{
		top: 6px;
		right: 6px;
		bottom: 6px;
		left: 6px;
	}
	.buyList_frm:before{
		top: -4px;
		bottom: -4px;
		right: 4px;
		left: 4px;
	}
	.buyList_frm:after{
		top: 4px;
		bottom: 4px;
		right: -4px;
		left: -4px;
	}
}

@media screen and (max-width: 330px){
	.head_releaseDay small.min2{
		font-size: 1.1rem;
	}
}

/* HEADER BG IMAGE */
.headerIMGWrap{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	overflow: hidden;
}
.headerIMGWrap .js-headerIMG{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	opacity: 0;
	transition: 1.5s ease;
}
.js-headerIMG.header-active{
	opacity: 1;
	animation:headerIMG 16s linear;
}
.js-headerIMG.header-active-out{
	animation:headerIMG 16s linear;
}
.headerIMGWrap:after{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0,0,0,.4) url(../img/top/pattern_header.png) repeat;
}

/** HEADER BG SET **/
#headerIMG01{
	background: url(../img/top/header/header_img01.jpg) no-repeat top center / cover;
}
#headerIMG02{
	background: url(../img/top/header/header_img02.jpg) no-repeat center / cover;
}
#headerIMG03{
	background: url(../img/top/header/header_img03.jpg) no-repeat center / cover;
}
#headerIMG04{
	background: url(../img/top/header/header_img04.jpg) no-repeat center / cover;
}
#headerIMG05{
	background: url(../img/top/header/header_img05.jpg) no-repeat center / cover;
}
#headerIMG06{
	background: url(../img/top/header/header_img06.jpg) no-repeat center / cover;
}
#headerIMG07{
	background: url(../img/top/header/header_img07.jpg) no-repeat center / cover;
}
.header_mainVS{
	background: url(../img/top/header/header_mainvs.jpg) no-repeat center / cover;
}
.header_mainVS01{
	background: url(../img/top/header/header_mainvs01.jpg) no-repeat center / cover;
}

@keyframes headerIMG{
	0%{
		filter: brightness(3) contrast(3) opacity(0) saturate(0);
		transform: scale(1);
	}
	20% {
		filter: brightness(1) contrast(2) opacity(1) saturate(0.4);
		transform: scale(1.05);
	}
	40% {
		filter: brightness(1) contrast(1) opacity(1) saturate(0.8);
		transform: scale(1.1);
	}
	60% {
		filter: brightness(1) contrast(1) opacity(1) saturate(1);
		transform: scale(1.15);
	}
	100%{
		transform: scale(1.25);
	}
}

@media screen and (max-width: 767px){
	.headerIMGWrap{
		bottom: unset;
		padding-top: max(165.3334%, 740px);
	}
	.header_mainVS{
		background: url(../img/top/header/header_mainvs_sp.jpg) no-repeat center / cover;
	}
	.header_mainVS01{
		background: url(../img/top/header/header_mainvs01_sp.jpg) no-repeat center / cover;
	}
}


/* HEADER NEWS */
.header_newsWrap{
	position: absolute;
	height: 72px;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
	color: #fff;
	background-color: rgba(0,0,0,.64);
}
.header_newsWrap:before{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	margin-top: -0.667%;
	width: 100%;
	padding-top: 0.667%;
	background: url(../img/top/hnews_bg_top.png) no-repeat top center / cover;
}
.header_newsWrap:after{
	content: '';
	position: absolute;
	bottom: 0;
	right: 0;
	left: 0;
	margin-bottom: -0.667%;
	width: 100%;
	padding-top: 0.667%;
	background: url(../img/common/nav_bg_bottom2.png) no-repeat bottom center / cover;
}
.header_newsWrap{
	padding: 8px 3.3334% 8px 2.667%;
	display: flex;
	align-items: center;
}
.hnews_h2{
	font-size: 16px;
	color: #fff;
	padding: 8px 0 8px 20px;
	flex-shrink: 0;
	position: relative;
	z-index: 2;
}
.hnews_h2:before{
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 13px;
	padding-top: 13px;
	background: url(../img/common/accent.svg) no-repeat center / contain;
}
.newsList{
	width: 100%;
	display: flex;
	font-size: 16px;
	line-height: 1.5;
	padding: 8px 40px;
}
.newsList.swiper-slide{
	align-items: center;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0!important;
}
.newsList.swiper-slide.swiper-slide-active{
	opacity: 1!important;
	pointer-events: auto;
}
.newsList time{
	flex-shrink: 0;
	color: #ffe66b;
	font-family: 'EB Garamond', serif;
}
.newsList p{
	font-size: 16px;
	padding-left: 16px;
	overflow: hidden;
	text-overflow: ellipsis;
}
.newsList a{
	color: #d60021;
	text-decoration: underline;
}

.hnews_more{
	width: 120px;
	height: 32px;
	position: relative;
	z-index: 2;
	padding: 2px;
	flex-shrink: 0;
		background-image: url(../img/common/btn_frm_tl.svg),url(../img/common/btn_frm_tr.svg),url(../img/common/btn_frm_bl.svg),url(../img/common/btn_frm_br.svg);
	background-repeat: no-repeat;
	background-position: left top,right top,left bottom,right bottom;
	background-size: 9px 9px;
}
.hnews_more:before{
	content: '';
	position: absolute;
	right: 9px;
	left: 9px;
	top: 0;
	bottom: 0;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
}
.hnews_more:after{
	content: '';
	position: absolute;
	top: 9px;
	bottom: 9px;
	right: 0;
	left: 0;
	border-left: 1px solid #fff;
	border-right: 1px solid #fff;
}

.hnews_more button{
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #fff;
	color: #fff;
	font-size: 14px;
	font-weight: 500;
	width: 100%;
	height: 100%;
	position: relative;
	z-index: 3;
	transition: .3s ease;
}
.hnews_more button:after{
	content: '';
	position: absolute;
	width: 10px;
	height: 7px;
	top: calc(50% - 3.5px);
	right: 8px;
	-webkit-mask-image: url(../img/common/more_arrow.png);
	mask-image: url(../img/common/more_arrow.png);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: 100%;
	mask-size: 100%;
	transition: .3s ease;
	background-color: #fff;
}
.hnews_more button.open{
		background-color: #fff;
		color: #000;
	}
.hnews_more button.open:after{
	transform: rotateX(180deg);
	background-color: #000;
}

@media screen and (min-width: 768px){
	.hnews_more button:hover{
		background-color: #a7001a;
	}
	.hnews_more button.open:hover{
		color: #fff;
	}
	.hnews_more button.open:hover::after{
		background-color: #fff;
	}
}
.hnews_more button span:after{
	content: 'MORE';
 }
.hnews_more button.open span:after{
	content: 'CLOSE';
}

@media screen and (max-width: 767px){
	.header_newsWrap{
		/*height: 16.9355%;*/
		height: 105px;
		background: #000;
		padding: 3.2%;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.header_newsWrap:before{
		content: unset;
	}
	.header_newsWrap:after{
		content: '';
		position: absolute;
		bottom: 0;
		right: 0;
		left: 0;
		padding-top: 2.2667%;
		margin-bottom: -2.2667%;
		background: url(../img/common/header_bottom_bg.png) no-repeat bottom left / contain;
	}
	.hnews_h2{
		font-size: 1.6rem;
		line-height: 1;
		padding: 6px 0 6px 20px;
	}
	.hnews_h2:before{
		width: 12px;
		padding-top: 12px;
	}
	.header_newsSwiper{
		order: 3;
	}
	.newsList{
		padding: 0;
		font-size: 1.2rem;
		line-height: 2;
	}
	.newsList.swiper-slide{
		align-items: flex-start;
		white-space: normal;
	}
	.newsList p{
		font-size: 1.2rem;
		line-height: 2;
		height: 48px;
		overflow: hidden;
		position: relative;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}
	.hnews_more{
		width: 100px;
		height: 24px;
	}
	.hnews_more button{
		font-size: 1rem;
	}
	.hnews_more button:after{
		width: 10px;
		height: 6.5px;
		top: calc(50% - 3.5px);
		right: 8px;
	}
}

/*-----------------------------------------------
 * Common
-----------------------------------------------*/
 .contWrap{
	position: relative;
	background:url(../img/common/bg_wh.jpg) repeat;
}
.contIn{
	position: relative;
	z-index: 2;
}
.cont_h2{
	text-align: center;
	font-size: 56px;
	font-family: 'EB Garamond', serif;
	font-weight: 500;
	line-height: 0.75;
}
.cont_h2 span{
	position: relative;
	padding: 0 144px;
	line-height: 0.75;
}
.cont_h2 span:before,.cont_h2 span:after{
	content: '';
	position: absolute;
	top: calc(50% - 6.5px);
	width: 120px;
	padding-top: 13px;
}
.cont_h2 span:before{
	left: 0;
	background: url(../img/common/h2_arrow_l.svg) no-repeat center / contain;
}
.cont_h2 span:after{
	right: 0;
	background: url(../img/common/h2_arrow_r.svg) no-repeat center / contain;
}

@media screen and (max-width: 767px){
	.cont_h2{
		font-size: 3.2rem;
	}
	.cont_h2 span{
		padding: 0 72px;
	}
	.cont_h2 span:before,.cont_h2 span:after{
		width: 60px;
		padding-top: 7px;
		top: calc(50% - 3.5px);
	}
}


/*-----------------------------------------------
 * News
-------------------------------------------------*/
#news{
	width: 100%;
	background-color: rgba(0,0,0,.8);
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 320px;
	z-index: 10;
	display: none;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}
.newsListsWrap{
	width: 100%;
	padding: 40px 10% 40px 2.667%;
}
.newsLists{
	width: 100%;
	height: 240px;
	overflow: auto;
	padding-right: 32px;
	padding-left: 107.24px;
}
.newsLists .newsList{
	padding: 12px 0;
	border-bottom: 1px solid rgba(254,254,254,.4);
}
.newsLists .newsList:first-child{
	padding-top: 0;
}

@media screen and (max-width: 767px){
	.newsListsWrap{
		padding: 12px 3.2% 24px;
	}
	.newsLists{
		height: 284px;
		padding-right: 16px;
		padding-left: 0;
	}
	.newsLists .newsList{
		margin-bottom: 6px;
	}
	.newsLists .newsList p{
		height: auto;
		overflow: unset;
		display: block;
		-webkit-box-orient: unset;
		-webkit-line-clamp: unset;
	}
}


/*-----------------------------------------------
 * Section1
-------------------------------------------------*/
.tSection1{
	position: relative;

}
.tSection1:before{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: url(../img/top/about_bg.jpg) no-repeat center / cover;
	background-attachment: fixed;
	opacity: 24%;
}
@media screen and (max-width: 768px){
	.tSection1:before{
		background-attachment: unset;
		background-position: 78% 50%;
	}
}

/*-----------------------------------------------
 * About
-------------------------------------------------*/
#about{
	display: flex;
	flex-direction: column;
	position: relative;
	z-index: 3;
}

#about_movWrap{
	width: 100%;
	position: relative;
	order: 1;
	padding: 40px 0 80px;
}
.about_movInWrap{
	width: 50%;
	margin: 0 auto;
}
.movieList{
	opacity: 0!important;
}
.movieList.swiper-slide-active{
	opacity: 1!important;
}
.about_movIn{
	position: relative;
	width: 100%;
	padding-top: 56.25%;
}
.about_mov{
	position: absolute;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}
.about_mov img{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}



.about_txtWrap{
	order: 2;
	width: 100%;
	position: relative;
}
.about_h2{
	font-size: 176px;
	font-weight: 500;
	line-height: 120px;
	letter-spacing: 0.05em;
	color: #a7001a;
	opacity: 24%;
}
.about_txtInWrap{
	width: 100%;
	margin-top: -40px;
	/*padding: 80px 6.6667% 160px;*/
}
.about_txtTop{
/*	display: flex;
	align-items: center;*/
	width: 100%;
	text-align: center;
	padding: 0 10%;
}
.about_txt_h3{
	width: 100%;
	font-size: 46px;
	letter-spacing: 0;
	line-height: 1.625;
	font-weight: 900;
	color: #000;
	/*padding-right: 90px;*/
	position: relative;
	text-align: center;
}
.about_txt_h3 .about_txt_h3txt{
	color: #000;
	position: relative;
	text-shadow:1px 1px 16px rgba(254,254,254,.6), -1px -1px 16px rgba(254,254,254,.6),
				-1px 1px 16px rgba(254,254,254,.6), 1px -1px 16px rgba(254,254,254,.6),
				0px 1px 16px rgba(254,254,254,.6),  0 -1px 16px rgba(254,254,254,.6),
				-1px 0 16px rgba(254,254,254,.6), 1px 0 16px rgba(254,254,254,.6);
	padding-right: 90px;
}
.about_txt_h3txt:after{
	content: '';
	position: absolute;
	width: 112px;
	height: 167px;
	top: calc(50% - 83.5px);
	right: -6px;
	background: url(../img/top/accent_about_txt_h3.png) no-repeat center / contain;
}
.about_txt_h3 .about_txt_h3txtIn{
	position: relative;
	z-index: 2;
}
.about_txt_h3 .about_txt_h3txtIn span{
	color: #a7001a;
}
.about_txt_h3 .about_txt_h3txtIn span.about_txt_h3txtIn_sp{
	color: #000;
}
.about_txt_h3txtIn:before{
	content: '';
	position: absolute;
	right: -18px;
	left: -18px;
	bottom: 0;
	height: 26px;
	z-index: -1;
}
.about_txt_h3txtIn.b01:before{
		background: url(../img/top/about_h3_b01.svg) no-repeat center center / cover;
}
.about_txt_h3txtIn.b02:before{
	background: url(../img/top/about_h3_b02.svg) no-repeat center center / cover;
}
.about_txt_img{
	width: 50%;
}
.about_txt_img img{
	width: 100%;
}
.about_txt{
	width: 100%;
	padding: 80px 6.6667% 160px;
	font-size: 20px;
	color: #000;
	font-weight: 500;
	line-height: 2;
}
.about_txt p{
	text-shadow:1px 1px 4px rgba(254,254,254,.6), -1px -1px 4px rgba(254,254,254,.6),
				-1px 1px 4px rgba(254,254,254,.6), 1px -1px 4px rgba(254,254,254,.6),
				0px 1px 4px rgba(254,254,254,.6),  0 -1px 4px rgba(254,254,254,.6),
				-1px 0 4px rgba(254,254,254,.6), 1px 0 4px rgba(254,254,254,.6);
}
.about_txt p > span{
	background-color: #a7001a;
	color: #fff;
	text-shadow: unset;
	text-shadow:0px 0px 0px rgba(254,254,254,0), 0px 0px 0px rgba(254,254,254,0),
				0px 0px 0px rgba(254,254,254,0), 0px 0px 0px rgba(254,254,254,0),
				0px 0px 0px rgba(254,254,254,0),  0 0px 0px rgba(254,254,254,0),
				0px 0 0px rgba(254,254,254,0), 0px 0 0px rgba(254,254,254,0);
	line-height: 1.4;
}

@media screen and (max-width: 768px){
	#about_movWrap{
		padding: 24px 0;
	}
	.about_movInWrap{
		width: 74.4%;
	}
	.about_h2{
		font-size: 88px;
		letter-spacing: 0;
		line-height: 60px;
	}
	.about_txtInWrap{
		margin-top: -20px;
	}
	.about_txtTop{
		padding: 0 6.4%;
	}
	.about_txt_h3{
		font-size: 2.4rem;
	}
	.about_txt_h3 .about_txt_h3txt{
		padding-right: 0;
		text-shadow:1px 1px 8px rgba(254,254,254,.6), -1px -1px 8px rgba(254,254,254,.6),
				-1px 1px 8px rgba(254,254,254,.6), 1px -1px 8px rgba(254,254,254,.6),
				0px 1px 8px rgba(254,254,254,.6),  0 -1px 8px rgba(254,254,254,.6),
				-1px 0 8px rgba(254,254,254,.6), 1px 0 8px rgba(254,254,254,.6);
	}
	.about_txt_h3txt:before{
		content: unset;
	}
	.about_txt_h3txt:after{
		width: 56px;
		height: 84px;
		top: unset;
		bottom: 0;
		right: -24px;
	}
	.about_txt_h3txtIn,
	.about_txt_h3txtIn_sp{
		position: relative;
	}
	.about_txt_h3txtIn:before,
	.about_txt_h3txtIn_sp:before{
		content: '';
		position: absolute;
		bottom: 0;
		right: -14px;
		left: -14px;
		height: 16px;
		z-index: -1;
	}
	.about_txt_h3txtIn.b01:before,
	.about_txt_h3txtIn_sp.b01:before{
		background: url(../img/top/about_h3_b01.svg) no-repeat center center / cover;
	}
	.about_txt_h3txtIn.b02:before,
	.about_txt_h3txtIn_sp.b02:before{
		background: url(../img/top/about_h3_b02.svg) no-repeat center center / cover;
	}
	.about_txt{
		padding: 32px 6.4% 48px;
		font-size: 1.2rem;
	}
}
@media screen and (max-width: 360px){
	.about_txt_h3{
		font-size: 2rem;
	}
	.about_txt_h3txtIn:before{
		height: 12px;
	}
}

/*-----------------------------------------------
 * Gallery
-------------------------------------------------*/
#gallery{
	position: relative;
	padding: 160px 0;
}
#gallery:before{
	content: '';
	position: absolute;
	right: 0;
	top: -42px;
	width: 363px;
	height: 128px;
	background: url(../img/top/accent_gallery_conth2.png) no-repeat center right / contain;
	z-index: 10;
}
#gallery .cont_h2{
	color: #ffe66b;
	position: relative;
}

.galleryCont{
	margin-top: 80px;
}
.galleryLists{
	margin-bottom: 40px;
}
.galleryList{
	width: calc(50% + 3.334%);
	padding: 0 1.667%;
}
.galleryImg{
	width: 100%;
	padding-top: 56.25%;
	filter: grayscale(1);
	transition: .3s ease;
	position: relative;
	transition-delay: .1s;
}
.swiper-slide-active .galleryImg{
	filter: grayscale(0);
	transition-delay: .2s;
}
/*.galleryImg button, .galleryImg img{
	width: 100%;
}*/
.btn_imgModal{
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	text-align: center;
	background-color: #1a1a1a;
	transition: .3s ease;
}
.btn_imgModal img{
	max-width: 100%;
	max-height: 100%;
	height: 100%;
}
.galleryImg .Only_galleryModal{
	display: none;
}
#imgModal .Only_galleryThumb{
	display: none;
}
.gyt{
	padding-top: 56.25%;
}
.gyt a{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: block;
	transition: .3s ease;
}
.gyt a:hover{
	filter: brightness(1.5);
}
@media screen and (min-width: 768px){
	.btn_imgModal:hover{
		filter: brightness(1.5);
	}
	.gyt a:hover{
		filter: brightness(1.5);
	}
}

.movPlay{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 82px;
	height: 79px;
	background: url(../img/common/movPlay.png) no-repeat center center / contain;
}
.galleryTxt{
	margin-top: 36px;
	text-align: center;
	color: #fff;
	line-height: 2;
	font-size: 16px;
	padding: 0 6.667%;
}

.gallery_pagination{
	position: relative;
	width: 100%;
	padding: 0 6.6667%;
	display: flex;
	align-items: center;
}
.gallery_prev{
	width: 46px;
	height: 90px;
	margin-right: 34px;
	background: url(../img/common/swiper_prev.png) no-repeat center right / contain;
	transition: .3s ease;
}
.gallery_next{
	width: 46px;
	height: 80px;
	margin-left: 34px;
	background: url(../img/common/swiper_next.png) no-repeat center right / contain;
	transition: .3s ease;
}
.gallery_prev.swiper-button-disabled, .gallery_next.swiper-button-disabled{
	opacity: 0.5;
	pointer-events: none;
}
@media screen and (min-width: 768px){
	.gallery_prev:hover{
		transform: translateX(-10px);
	}
	.gallery_next:hover{
		transform: translateX(10px);
	}
}

.gallery_scrollbarWrap{
	width: calc(100% - 160px);
	height: 6px;
}
.gallery_scrollbar{
	height: 6px;
	background: linear-gradient(180deg,  transparent 0%, transparent 16.666%, #666 16.667%, #666 83.331%, transparent 83.332%);
}
.gallery_scrollbar .swiper-scrollbar-drag{
	background-color: #a7001a;
	border-radius: unset;
}

.bgc_bl{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	mix-blend-mode: difference;
	background: #eeeeee;
}
.bgc_bl:before{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	margin-top: -0.667%;
	width: 100%;
	padding-top: 5.3334%;
	background: url(../img/top/gallery_bg_top.png) no-repeat top center / cover;
}
.bgc_bl:after{
	content: '';
	position: absolute;
	bottom: 0;
	right: 0;
	left: 0;
	margin-bottom: -0.667%;
	width: 100%;
	padding-top: 5.3334%;
	background: url(../img/top/gallery_bg_top.png) no-repeat bottom center / cover;
	transform: rotate(-180deg);
}

@media screen and (max-width: 767px){
	#gallery{
		padding: 48px 0;
	}
	#gallery:before{
		content: '';
		position: absolute;
		width: 173px;
		height: 77px;
		top: -52px;
		right: 0;
		background: url(../img/top/accent_gallery_conth2.png) no-repeat bottom right / contain;
		z-index: 3;
	}
	#gallery .cont_h2:before{
		content: unset;
	}
	.galleryCont{
		margin-top: 48px;
	}
	.galleryLists{
		margin-bottom: 20px;
	}
	.galleryList{
		width: 80.8%;
		padding: 0 3.2%;
	}
	.movPlay{
		width: 14.6954%;
		height: 0;
		padding-top: 14.1578%;
	}
	.gallery_pagination{
		padding: 0 3.2%;
	}
	.gallery_prev{
		width: 28px;
		height: 48px;
		margin-right: 8px;
	}
	.gallery_next{
		width: 28px;
		height: 48px;
		margin-left: 8px;
	}
	.gallery_scrollbarWrap{
		width: calc(100% - 72px);
	}
	.bgc_bl:before{
		padding-top: 2.2667%;
		margin-top: -2.2667%;
		background: url(../img/top/gallery_bg_top_sp.png) no-repeat top left / cover;
	}
	.bgc_bl:after{
		padding-top: 2.2667%;
		margin-bottom: -2.2667%;
		background: url(../img/top/gallery_bg_bottom_sp.png) no-repeat bottom left / cover;
	}

	.js-imgModalIn img.galleryimg_tate{
		width: 87.2%;
	}
}



/*-----------------------------------------------
 * Contact
-------------------------------------------------*/
#contact{
	padding: 160px 0 160px;
	position: relative;
}
#contact:before{
	content: '';
	position: absolute;
	width: 398px;
	height: 209px;
	left: 0;
	top: -20px;
	background: url(../img/top/accent_contact.png) no-repeat bottom left / contain;
}
#contact .cont_h2{
	color: #a7001a;
}
.contactCont{
	margin: 80px auto 0;
	width: 880px;
}
.contact_txt{
	font-size: 16px;
	line-height: 2;
	color: #000;
	text-align: center;
}
.contactLists{
	margin-top: 40px;
}
.contactList{
	width: 100%;
	margin-bottom: 40px;
}
.contactList:last-child{
	margin-bottom: 0;
}
.contactList a{
	width: 100%;
	display: block;
	padding: 29px 40px;
	background-color: #000;
	position: relative;
	color: #fff;
	text-decoration: none;
	transition: .4s ease-in-out;
}
.contactList a:before{
	content: '';
	position: absolute;
	top: 4px;
	left: 4px;
	right: 4px;
	bottom: 4px;
	background: url(../img/top/contact_frm_tl.svg),url(../img/top/contact_frm_tr.svg),url(../img/top/contact_frm_bl.svg),url(../img/top/contact_frm_br.svg);
	background-position: top left, top right, bottom left, bottom right;
	background-repeat: no-repeat;
	background-size: 23px 23px;
	z-index: 2;
}
.contactList a:after{
	content: '';
	position: absolute;
	width: 65px;
	height: 40px;
	top: calc(50% - 20px);
	right: 40px;
	background: url(../img/common/arrow.png) no-repeat center / contain;
	transition: .4s ease-in-out;
}
.contactList a:hover{
	background-color: #a7001a;
}
.contactList a:hover::after{
	transform: translateX(10px);
}
.contactList_steam{
	display: flex;
	position: relative;
	align-items: center;
	height: 46px;
	padding-left: 133px;
	padding-right: 133px;
}
.contactList_steam:before{
	content: '';
	top: 0;
	left: 0;
	bottom: 0;
	position: absolute;
	width: 133px;
	padding-top: 40px;
	background: url(../img/common/logo_steam.svg) no-repeat center / contain;
}
.contactList_discord{
	display: flex;
	position: relative;
	align-items: center;
	height: 46px;
	padding-left: 40px;
	padding-right: 40px;
}
.contactList_discord:before{
	content: '';
	top: 0;
	left: 0;
	bottom: 0;
	position: absolute;
	width: 40px;
	padding-top: 46px;
	background: url(../img/common/logo_discord.svg) no-repeat center / contain;
}
.contact_linkTxt{
	width: 100%;
	text-align: center;
	font-size: 20px;
	line-height: 1.6;
	font-weight: 500;
}
.contact_linkTxt span{
	color: #d50122;
	transition: .4s ease-in-out;
}
.contactList a:hover .contact_linkTxt span{
	color: #fff;
}
.contact_link_border{
	position: absolute;
	top: 4px;
	right: 4px;
	bottom: 4px;
	left: 4px;
}
.contact_link_border:before{
	content: '';
	position: absolute;
	top: 0.5px;
	right: 23px;
	bottom: 0.5px;
	left: 23px;
	border-top: 1px solid #bba84d;
	border-bottom: 1px solid #bba84d;
}
.contact_link_border:after{
	content: '';
	position: absolute;
	right: 0.5px;
	top: 22px;
	left: 0.5px;
	bottom: 22px;
	border-right: 1px solid #bba84d;
	border-left: 1px solid #bba84d;
}
.contact_link_bg{
	position: absolute;
	width: 640px;
	height: 56px;
	top: calc(50% - 28px);
	left: calc(50% - 320px);
	background: url(../img/top/contact_link_bg.png)no-repeat center / contain;
	transition: .4s ease-in-out;
}
.contactList a:hover .contact_link_bg{
	transform: scale(1.3);
}

@media screen and (max-width: 767px){
	#contact{
		padding: 56px 0;
	}
	#contact:before{
		top: -35px;
		width: 165px;
		height: 125px;
		background: url(../img/top/accent_contact_sp.png) no-repeat bottom left / contain;
	}
	.contactCont{
		margin: 48px auto 0;
		width: 100%;
		padding: 0 6.4%;
	}
	.contact_txt{
		font-size: 1.2rem;
	}
	.contactLists{
		margin-top: 32px;
	}
	.contactList{
		margin-bottom: 24px;
	}
	.contactList a{
		padding: 16px 7.33%;
	}
	.contactList a:after{
		top: 50%;
	}
	.contactList_steam,.contactList_discord{
		height: auto;
		padding-top: 40px;
		padding-left: 0;
		padding-right: 70px;
	}
	.contactList_steam:before{
		width: 107px;
		padding-top: 32px;
		height: 0;
		right: 0;
		margin: 0 auto;
	}
	.contactList_discord:before{
		width: 28px;
		padding-top: 33px;
		height: 0;
		right: 0;
		margin: 0 auto;
	}
	.contact_linkTxt{
		font-size: 1.5rem;
		line-height: 2;
		text-align: left;
		letter-spacing: 0;
	}
	.contact_link_bg{
		width: 92.661%;
		height: 0;
		padding-top: 8.75%;
		top: calc(41.25% + 10px);
		left: 3.6695%;
	}
}




/*-------------------------
 2303add
--------------------------*/
/* header */
@media screen and (min-width: 768px){
	.header_infoWrap{
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
	}
	.header_info{
		left: unset;
		top: unset;
		transform: unset;
	}
}
.head_catch{
	order: -1;
	font-size: 28px;
	font-weight: 700;
	text-align: center;
	position: relative;
	margin-bottom: 12px;
	/*text-shadow: 1px 1px 16px rgb(0 0 0 / 40%), -1px -1px 16px rgb(0 0 0 / 40%), -1px 1px 16px rgb(0 0 0 / 40%), 1px -1px 16px rgb(0 0 0 / 40%), 0px 1px 16px rgb(0 0 0 / 40%), 0 -1px 16px rgb(0 0 0 / 40%), -1px 0 16px rgb(0 0 0 / 40%), 1px 0 16px rgb(0 0 0 / 40%);*/
}
.head_catch span.head_releaseDayTxt{
	position: relative;
	z-index: 2;
	display: inline-block;
	padding: 0 4px 4px;
}
.head_earlyTxt{
	margin: 48px 0 24px;
	font-size: 26px;
	line-height: 1.2;
	text-align: center;
	color: #FFF;
	font-weight: 700;
}
.head_earlyTxt a{
	color: #FFF;
}
.head_earlyTxt span{
	color: #e41e3c;
	text-shadow: 1px 1px 16px rgb(0 0 0 / 40%), -1px -1px 16px rgb(0 0 0 / 40%), -1px 1px 16px rgb(0 0 0 / 40%), 1px -1px 16px rgb(0 0 0 / 40%), 0px 1px 16px rgb(0 0 0 / 40%), 0 -1px 16px rgb(0 0 0 / 40%), -1px 0 16px rgb(0 0 0 / 40%), 1px 0 16px rgb(0 0 0 / 40%);
}
.head_earlyTxt small{
	font-size: 53.8462%;
}
.head_toProcuct{
	margin-top: 24px;
}
.head_toProcuct a{
	width: auto;
	font-size: 18px;
	color: #FFF;
	text-decoration: none;
}
.head_toProcuct a:after{
	width: 20px;
	height: 14px;
	top: calc(50% - 7px);
	right: 20px;
	-webkit-mask: url(../img/common/more_arrow.png) no-repeat center / contain;
	mask: url(../img/common/more_arrow.png) no-repeat center / contain;
	background-color: #fff;
}
.head_toProcuct a:hover::after{
	transform: translateY(4px);
}
@media screen and (max-width: 767px){
	.head_catch{
		font-size: 1.6rem;
		margin-bottom: 14px;
	}
	.head_catch .head_releaseDayTxt:last-child::after{
		content: unset;
	}
	.head_earlyTxt{
		margin: 32px 0 16px;
		font-size: 1.4rem;
	}
	.head_earlyTxt small{
		display: inline-block;
		font-size: 1rem;
		margin-top: 8px;
		line-height: 1.4;
	}
	.head_toProcuct{
		max-width: 80%;
		width: 230px;
		margin-top: 16px;
	}
	.head_toProcuct a{
		font-size: 1.2rem;
	}
	.head_toProcuct a:after{
		width: 16px;
		height: 12px;
		top: calc(50% - 6px);
		right: 16px;
	}
}


/* Movie */
.movieLists_paginationWrap{
	display: flex;
	justify-content: center;
	margin-top: 24px;
}
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet.movieLists_pagination{
	width: 24px;
	height: 24px;
	opacity: 1;
	margin: 0 12px;
	position: relative;
	pointer-events: auto;
	cursor: pointer;
	background-color: transparent;
}
.movieLists_pagination:before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #000;
	-webkit-mask: url(../img/common/icon_nav.svg) no-repeat center / contain;
	mask: url(../img/common/icon_nav.svg) no-repeat center / contain;
	transition: .3s ease;
}
.swiper-pagination-bullet-active.movieLists_pagination:before{
	background-color: #a7001a;
}

@media screen and (max-width: 767px){
	.movieLists_paginationWrap{
		margin-top: 12px;
	}
	.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet.movieLists_pagination{
		width: 16px;
		height: 16px;
		margin: 0 6px;
	}
}

/*-----------------------------------------------
 * Characters
-----------------------------------------------*/
#characters{
	position: relative;
	padding: 160px 0;
}
#characters .cont_h2 {
	color: #ffe66b;
	position: relative;
}
.charactersCont{
	margin-top: 32px;
	position: relative;
	width: 100%;
}
.characterList{
	width: 100%;
	padding: 0 20% 0 13.3334%;
	position: relative;
}
.charaContIn{
	width: min(100%, 1200px);
	margin: 0 auto;
	display: flex;
	position: relative;
	padding-bottom: 16px;
}
.character_detail{
	width: 50%;
	padding-top: 10%;
	order: 2;
	position: relative;
	z-index: 2;
}
.character_nameWrap{
	display: flex;
	flex-direction: column;
}
.chara_detail__name{
	order: 2;
	position: relative;
	padding: 20px 0 32px;
	font-size: 48px;
	font-weight: 900;
	line-height: 1;
	color: #FFF;
}
.chara_detail__name:before{
	content: '';
	position: absolute;
	width: 113px;
	height: 113px;
	background: url(../img/top/character/chara_name_bg.png) no-repeat center / contain;
	left: -45px;
	top: -16px;
}
.chara_detail__name span{
	position: relative;
	z-index: 1;
}

.chara_detail__catch{
	margin-top: 8px;
}
.chara_detail__catchIn{
	font-size: 20px;
	font-weight: 700;
	color: #ffe66b;
	line-height: 1;
	padding-bottom: 6px;
	position: relative;
	display: inline-block;
}
.chara_detail__catchIn:before{
	content: '';
	position: absolute;
	bottom: 0;
	left: -20px;
	right: -12px;
	height: 16px;
	background: url(../img/top/about_h3_bg.svg) no-repeat center center / 100%;
}
.chara_detail__catch span{
	position: relative;
	z-index: 1;
}

.chara__text{
	font-size: 16px;
	line-height: 2;
	margin-top: 24px;
}

.charaImage{
	width: 50%;
	order: 1;
	position: relative;
	z-index: 1;
}
.charaImageIn{
	width: 110%;
}
.charaImageIn img{
	width: 100%;
}

@media screen and (max-width: 767px){
	#characters{
		padding: 48px 0;
	}
	.charactersCont{
		margin-top: 48px;
	}
	.characterList{
		padding: 0 6.4%;
	}
	.charaContIn{
		width: 100%;
		flex-direction: column;
		padding-bottom: 0;
	}
	.character_detail{
		width: 100%;
		padding-top: 0;
	}
	.chara_detail__name{
		padding: 10px 0 16px;
		font-size: 2.4rem;
	}
	.chara_detail__name:before{
		width: 56px;
		height: 56px;
		left: -22px;
		top: -8px;
	}
	.chara_detail__catchIn{
		font-size: 1.4rem;
		padding-bottom: 4px;
	}
	.chara_detail__catchIn:before{
		left: -14px;
		right: -8px;
		height: 12px;
	}
	.chara__text{
		font-size: 1.2rem;
		margin-top: 12px;
	}
	.charaImage{
		width: 100%;
	}
	.charaImageIn{
		width: 107.3395%;
	}
}


.chara_engName{
	position: absolute;
	bottom: 0;
	left: 0;
	font-size: 120px;
	font-weight: 500;
	line-height: 120px;
	letter-spacing: 0.05em;
	color: #a7001a;
	opacity: 24%;
}
@media screen and (max-width: 767px){
	.chara_engName{
		bottom: 50%;
		top: 50%;
		line-height: 1;
		font-size: 64px;
	}
}


.charaThumbListsWrap{
	width: min(6.6667%, 120px);
	position: absolute;
	top: 0;
	right: 0;
	z-index: 2;
}
.charaThumbLists{
	width: 100%;
}
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet.charaThumbList{
	width: 100%;
	height: auto;
	padding-top: 100%;
	position: relative;
	filter: grayscale(1);
	transition: .3s ease;
	opacity: 1;
	margin: 0;
}
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet.charaThumbList:not(:last-child){
	margin-bottom: 10%;
}
.btn_charaThumbList{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	transition: .3s ease;
	background-color: #1a1a1a;
}
.btn_charaThumbList img{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet-active.charaThumbList{
	filter: grayscale(0);
}
.swiper-pagination-bullet-active.charaThumbList .btn_charaThumbList{
	background-color: #a7001a;
}
@media screen and (max-width: 767px){
	.charaThumbListsWrap{
		width: 12.8%;
	}
}



.chara_pagination{
	position: relative;
	width: 100%;
	padding: 0 6.6667%;
	display: flex;
	align-items: center;
	margin-top: 40px;
}
.chara_prev{
	width: 46px;
	height: 90px;
	margin-right: 34px;
	background: url(../img/common/swiper_prev.png) no-repeat center right / contain;
	transition: .3s ease;
}
.chara_next{
	width: 46px;
	height: 80px;
	margin-left: 34px;
	background: url(../img/common/swiper_next.png) no-repeat center right / contain;
	transition: .3s ease;
}
.chara_prev.swiper-button-disabled, .chara_next.swiper-button-disabled{
	opacity: 0.5;
	pointer-events: none;
}
@media screen and (min-width: 768px){
	.chara_prev:hover{
		transform: translateX(-10px);
	}
	.chara_next:hover{
		transform: translateX(10px);
	}
}

.chara_scrollbarWrap{
	width: calc(100% - 160px);
	height: 6px;
}
.chara_scrollbar{
	height: 6px;
	background: linear-gradient(180deg,  transparent 0%, transparent 16.666%, #666 16.667%, #666 83.331%, transparent 83.332%);
}
.chara_scrollbar .swiper-scrollbar-drag{
	background-color: #a7001a;
	border-radius: unset;
}

@media screen and (max-width: 767px){
	.chara_pagination{
		padding: 0 3.2%;
	}
	.chara_prev{
		width: 28px;
		height: 48px;
		margin-right: 8px;
	}
	.chara_next{
		width: 28px;
		height: 48px;
		margin-left: 8px;
	}
	.chara_scrollbarWrap{
		width: calc(100% - 72px);
	}
}

/*-----------------------------------------------
 * KEYFEATURE
-----------------------------------------------*/
#keyfeatures{
	padding: 160px 0 160px;
	position: relative;
	color: #000;
}
#keyfeatures:before {
	content: '';
	position: absolute;
	width: 398px;
	height: 209px;
	left: 0;
	top: -20px;
	background: url(../img/top/accent_contact.png) no-repeat bottom left / contain;
}
#keyfeatures .cont_h2 {
	color: #a7001a;
}
.keyfeaturesCont{
	margin: 80px auto 0;
	width: min(86.6667%, 1560px);
}
.keyfeatureLists{
/*	display: grid;
	grid-template-columns: repeat(3, 3fr);*/
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: clamp(16px, 1.3334vw, 24px);
}
.keyfeatureList{
	width: calc(100% / 3 - clamp(10.6667px, 0.8889vw, 16.0006px));
}
.btn_keyfeature{
	width: 100%;
	overflow: hidden;
	transition: .3s ease;
}
.btn_keyfeature img{
	width: 100%;
	transition: .3s ease;
}
@media screen and (min-width: 768px){
	.btn_keyfeature:hover{
		filter: brightness(1.5);
	}
}
.btn_keyfeature:hover img{
	transform: scale(1.025);
}

.keyfeatureList figcaption{
	font-size: 16px;
	font-weight: 500;
	text-align: center;
	line-height: 2;
	margin: 8px 0 0;
}

@media screen and (max-width: 767px){
	#keyfeatures{
		padding: 56px 0;
	}
	#keyfeatures:before {
		top: -35px;
		width: 165px;
		height: 125px;
		background: url(../img/top/accent_contact_sp.png) no-repeat bottom left / contain;
	}
	#keyfeatures .cont_h2 span{
		padding: 0 64px;
		letter-spacing: 0;
	}
	.keyfeaturesCont{
		margin: 48px auto 0;
		width: 100%;
		padding: 0 6.4%;
	}
	.keyfeatureLists{
		display: grid;
		grid-template-columns: repeat(2, 2fr);
		gap: min(3.2vw, 24px);
	}
	.keyfeatureList{
		width: 100%;
	}
	.keyfeatureList figcaption{
		font-size: 1.2rem;
		line-height: 1.5;
		margin: 4px 0 0;
	}
}

/*-----------------------------------------------
 * PRODUCT
-----------------------------------------------*/
#product{
	padding: 160px 0 160px;
	position: relative;
	color: #000;
}
#product:before {
	content: '';
	position: absolute;
	width: 398px;
	height: 209px;
	left: 0;
	top: -20px;
	background: url(../img/top/accent_contact.png) no-repeat bottom left / contain;
}
#product .cont_h2 {
	color: #a7001a;
}
.productCont{
	margin: 80px auto 0;
	width: min(86.6667%, 1170px);
}
.productDetail{
	width: min(100%, 1170px);
	display: flex;
	justify-content: space-between;
	margin: 0 auto;
}
.productDetail__imgWrap{
	flex-shrink: 0;
	width: 30.7693%;
}
.productDetail__img{
	text-align: center;
}
.productDetail__img:not(:last-child){
	margin-bottom: 24px;
}
.productDetail__img img{
	max-width: 100%;
}

.productDetail__dlListsWrap{
	flex-shrink: 0;
	width: min(65.3847%, 670px);
}
.productDetail__dlList{
	display: flex;
	font-size: 16px;
}
.productDetail__dlList:not(:last-child){
	margin-bottom: 24px;
}
.productDetail__dlList dt{
	flex-shrink: 0;
	font-weight: 500;
	display: inline-block;
}
.productDetail__dlList dt span{
	min-width: 9em;
	display: inline-block;
	background-color: #a7001a;
	color: #fff;
	padding: 0 0.25em;
	text-align: center;
}
.productDetail__dlList dd{
	padding-left: 24px;
}

.indent{
	display: inline-block;
	padding-left: 0.65em;
	text-indent: -0.65em;
}

@media screen and (min-width: 768px){
	.sp_flexdl{
		width: 100%;
		display: flex;
		align-items: center;
	}
	.sp_flexdl dt{
		flex-shrink: unset;
		margin-bottom: 0;
	}
	.sp_flexdl dd{
		display: inline;
		padding-left: 0;
	}
	.shrink0{
		flex-shrink: 0;
	}
}


.product_benefit{
	width: 100%;
	margin-top: 80px;
}
.product_benefit h3{
	font-size: 32px;
	font-family: 'Noto Serif JP', serif;
	font-weight: 700;
	line-height: 1;
	color: #FFF;
}
.product_benefitLists{
	margin-top: 80px;
}

.product_benefitList{
	display: flex;
	font-size: 16px;
}
.product_benefitList:not(:last-child){
	margin-bottom: 40px;
}
.product_benefitList__dt{
	flex-shrink: 0;
	font-size: 20px;
	font-weight: 500;
	display: inline-block;
}
.product_benefitList__dt span{
	min-width: 10.5em;
	display: inline-block;
	background-color: #a7001a;
	color: #fff;
	padding: 0 0.25em;
	text-align: center;
}
.product_benefitList__dd_dlWrap{
	width: 54%;
	padding: 0 24px;
}
.product_benefitListIn dt{
	font-size: 20px;
	font-weight: 500;
	margin-bottom: 4px;
}

.product_benefitList .buyList{
	flex-shrink: 0;
	margin-left: auto;
	padding-right: 0;
}
.product_benefitList .buyList a{
	background-color: #000;
	color: #FFF;
	font-size: 20px;
	text-decoration: none;
}
.product_benefitList .buyList a:hover{
	background-color: #a7001a;
}
.product_benefitList .buyList a.cs{
	opacity: 0.4;
}


@media screen and (max-width: 767px){
	#product{
		padding: 56px 0;
	}
	#product:before {
		top: -35px;
		width: 165px;
		height: 125px;
		background: url(../img/top/accent_contact_sp.png) no-repeat bottom left / contain;
	}
	.productCont{
		margin: 48px auto 0;
		width: 100%;
		padding: 0 6.4%;
	}
	.productDetail{
		width: 100%;
		flex-direction: column;
	}
	.productDetail__imgWrap{
		display: flex;
		justify-content: center;
		width: 100%;
		margin: 0 auto 32px;
	}
	.productDetail__img:nth-of-type(1){
		width: 100%;
	}
	.productDetail__img:not(:last-child){
		margin-bottom: 0;
	}
	.productDetail__dlListsWrap{
		width: 100%;
	}
	.productDetail__dlList{
		flex-direction: column;
		font-size: 1.2rem;
	}
	.productDetail__dlList:not(:last-child){
		margin-bottom: 16px;
	}
	.productDetail__dlList dt{
		margin-bottom: 8px;
	}
	.productDetail__dlList dd{
		padding-left: 0;
	}
	.sp_flexdl{
		width: 100%;
		display: flex;
		align-items: center;
	}
	.sp_flexdl dt{
		flex-shrink: unset;
		margin-bottom: 0;
	}
	.shrink0{
		flex-shrink: 0;
	}

	.product_benefit{
		margin-top: 40px;
	}
	.product_benefit h3{
		font-size: 2.4rem;
	}
	.product_benefitLists{
		margin-top: 48px;
	}

	.product_benefitList{
		flex-direction: column;
		font-size: 1.2rem;
	}
	.product_benefitList:not(:last-child){
		margin-bottom: 40px;
	}
	.product_benefitList__dt{
		width: 100%;
		font-size: 1.2rem;
	}
	.product_benefitList__dd_dlWrap{
		width: 100%;
		padding: 8px 0 8px;
	}
	.product_benefitListIn dt{
		font-size: 1.2rem;
		font-weight: 700;
	}
	.product_benefitList .buyList{
		max-width: 80%;
		width: 180px;
		margin-right: auto;
	}
	.product_benefitList .buyList a{
		width: 100%;
		font-size: 1.2rem;
	}
}

/*-------------------------
 2306add
--------------------------*/
/* ABOUT */
.about_btn{
	text-align: center;
	margin-top: 40px;
}
.about_btn a{
	width: auto;
	font-size: 18px;
	color: #FFF;
	text-decoration: none;
	text-shadow: unset;
	display: inline-flex;
	background-color: #000;
}
.about_btn a:after{
	width: 20px;
	height: 14px;
	top: calc(50% - 7px);
	right: 20px;
	-webkit-mask: url(../img/common/more_arrow.png) no-repeat center / contain;
	mask: url(../img/common/more_arrow.png) no-repeat center / contain;
	background-color: #fff;
	transform: rotate(-90deg);
}
.about_btn a:hover::after{
	transform: translateX(4px) rotate(-90deg);
}

@media screen and (max-width: 767px){
	.about_btn{
		max-width: 100%;
		width: auto;
		margin-top: 32px;
	}
	.about_btn a{
		font-size: 1.2rem;
		padding: 0 40px 0 20px;
	}
	.about_btn a:after{
		width: 16px;
		height: 12px;
		top: calc(50% - 6px);
		right: 16px;
	}
}


/** about modal **/
.about_modalContent{
	width: 86.6667%;
	margin: 0 auto;
}
.about_modal_h2{
	text-align: center;
	margin-bottom: 32px;
}
.about_modal_h2In {
	position: relative;
	padding: 0 16px 16px;
	line-height: 1;
	font-size: 32px;
	color: #fff;
	/* font-family: 'EB Garamond', serif; */
	font-weight: 700;
	text-align: center;
}
.about_modal_h2InTxt{
	position: relative;
	z-index: 2;
	text-align: center;
}
.about_modal_h2InTxt:before {
	content: '';
	position: absolute;
	height: 16px;
	right: -10px;
	bottom: 0;
	left: -10px;
	background: url(../img/top/bg_releaseDay.svg) no-repeat center / 100%;
	z-index: -1;
}
.about_modal_text{
	font-size: 16px;
	line-height: 2;
}
@media screen and (max-width: 767px){
	.about_modalContent{
		width: 87.2%;
	}
	.about_modal_h2{
		margin-bottom: 12px;
	}
	.about_modal_h2In {
		font-size: 1.6rem;
	}
	.about_modal_h2InTxt:before {
		height: 8px;
	}
	.about_modal_text{
		font-size: 1.2rem;
	}
}

/*-------------------------
 2307add
--------------------------*/
/* banner */
.bannerWrap{
	position: relative;
	z-index: 2;
	width: 100%;
	padding: 80px 6.6667% 40px;
}
.bannerLists{
	width: 100%;
	max-width: 1560px;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 24px;
}
.bannerList{
	width: calc(100% / 4 - 18px);
}
.bannerList a{
	display: block;
	transition: .3s ease;
	overflow: hidden;
}
.bannerList a img{
	width: 100%;
	transition: .3s ease;
}
.bannerList.--nolink a{
	pointer-events: none;
}
@media screen and (min-width: 768px){
	.bannerList a:hover{
		filter: brightness(1.125);
	}
	.bannerList a:hover img{
		transform: scale(1.025);
	}
}
@media screen and (max-width: 767px){
	.bannerWrap{
		padding: 32px 6.4% 16px;
	}
	.bannerLists{
		gap: 16px;
	}
	.bannerList{
		width: calc(100% / 2 - 8px);
	}
}