@charset "utf-8";

:root {
	/* base */
	--cts-gutter: 25px;

	/* font */
	--dp-font: "Noto Sans JP", sans-serif;
	/* Noto Sans JP
	Noto Sans JP Regular 400
	Noto Sans JP Medium 500
	Noto Sans JP Bold 600
	Noto Sans JP Black 900
	*/
	--cts-font: paralucent-stencil,sans-serif;
	/* ParalucentStencil
	ParalucentStencil ExtraLight 200
	ParalucentStencil Heavy 900
	*/

	--cts-font-size: clamp(12px,3.2vw,16px);
	--cts-font-ls: .015em;/*letter-spacing*/
	--cts-font-ls-02: .1em;
	--cts-font-ls-03: .05em;

	/* color */
	--cts-color: #484848;
	--cts-color-02: #8303B1;
	--cts-color-03: #011E60;
}


/* LP共通汎用
____________________*/
#container {
	width: 100%;
	margin: auto;
}
.column2R #main {
	float: none;
	width: auto;
}
.breadCrumb {
	margin: 0 auto !important;
}
.pagetop {
	margin: 0 auto;
	width: 1050px;
}
#pagetop {
	display: none;
	position: fixed;
	bottom: 30px;
	right: 55px;
}
#pagetop a {
	color: #fff;
	background-color: #333;
	border-radius: 5px;
	display: block;
	font-size: 12px;
	line-height: 1.5em;
	padding: 5px 10px;
	text-align: center;
	text-decoration: none;
}
figure {
	margin: 0;
}
img {
	image-rendering: -webkit-optimize-contrast;
}
.sp {
	display: none;
}
#s_container {
	font-family: var(--dp-font);
	width: 100%;
	margin: 10px auto;
}
.contentWrap {
	width: 100%;
	color: var(--cts-color);
	font-size: var(--cts-font-size);
}
.contentWrap img {
	max-width: 100%;
}
.clearfix:after, #nav1:after, #nav2:after, #nav3:after, #container:after, #contents:after, #footerNav:after {
	content: none !important;
}

@media (max-width: 479px) {
	#container {
		margin-bottom: 0 !important;
	}
}


/* コンテンツ汎用
____________________*/
.contentWrap {
	background-color: #011E60;
}
.contents {
	padding-top: clamp(50px,13.33vw,180px);
	padding-bottom: clamp(80px,21.33vw,230px);
}
.contents>* {
	width: clamp(300px,calc(100% - var(--cts-gutter) * 2),calc(var(--cts-width) +  var(--cts-gutter) * 2));
	margin-inline: auto;
	padding-left: var(--cts-gutter);
	padding-right: var(--cts-gutter);
	box-sizing: border-box;
}
.contents__ttl {
	position: relative;
	font-size: 50px;
	font-family: var(--cts-font);
	font-weight: 200;
	text-align: center;
	color: #fff;
}
.contents__ttliconimg {
	width: clamp(30px,8vw,42px);
}
.contents__ttlinner {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 350px;
	height: 70px;
	margin-top: 10px;
	margin-inline: auto;
	background: linear-gradient(90deg, #A40ADB 0%, #1D056E 100%);
	clip-path: polygon(15px 0%, 335px 0%, 100% 15px, 100% 55px, 335px 100%, 15px 100%, 0% 55px, 0% 15px);
	line-height: 1;
	letter-spacing: var(--cts-font-ls-02);
	box-sizing: border-box;
}


/* mv
____________________*/
.contents--mv {
	width: 100%;
	padding: 0;
}
.contents--mv img {
	width: 100%;
	padding: 0;
}


/* product
____________________*/
.contents--product {
	position: relative;
	background: url(../../gamepc/img/collab_masanorich/product_bg.webp) repeat-y center center;
	background-size: contain;
	border-top: clamp(5px,1.33vw,12px) solid var(--cts-color-03);
	border-bottom: clamp(5px,1.33vw,12px) solid var(--cts-color-03);
}
.contents--product::before,
.contents--product::after {
	content: "";
	position: absolute;
	width: clamp(140px,37.33vw,465px);
	height: clamp(10px,2.67vw,30px);
	background: var(--cts-color-03);
	left: 50%;
	transform: translateX(-50%);
}
.contents--product::before {
	top: -1px;
	clip-path: polygon(0 0, 100% 0, 96% 100%, 4% 100%);
}
.contents--product::after {
	bottom: -1px;
	clip-path: polygon(4% 0, 96% 0, 100% 100%, 0 100%);
}
.contents--product>* {
	--cts-width: 740px;
}
.contents__subttl {
	margin-top: clamp(30px,8vw,45px);
	font-size: 30px;
	font-family: var(--cts-font);
	font-weight: 900;
	color: var(--cts-color-02);
	text-align: center;
	letter-spacing: var(--cts-font-ls-02);
}
.contents__subttl--note {
	margin-top: clamp(65px,17.33vw,100px);
}
.contents__subttlinner {
	--cts-ttlmarker: 20px;
	display: inline-block;
	width: 260px;
	background: linear-gradient(#fff, #fff) 0 100%/100% var(--cts-ttlmarker) no-repeat;
	background-position: 100% 100%;
	line-height: calc(.85em + var(--cts-ttlmarker));
}
.contents__product {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: clamp(30px,8vw,45px) 40px;
	margin-top: clamp(30px,8vw,40px);
}
.contents__productitem {
	--cts-imgspacer: 250px;
	position: relative;
	width: clamp(300px,calc(100vw - var(--cts-gutter) * 2),350px);
	padding: clamp(20px,5.33vw,28px) clamp(20px,5.33vw,25px) clamp(20px,5.33vw,25px);
	background: #fff;
	border-radius: 5px;
	box-sizing: border-box;
	box-shadow: 0px 0px 15px #a40adb4d;
}
.contents__productcatch {
	font-size: clamp(14px,3.73vw,18px);
	font-weight: 500;
	text-align: center;
	color: var(--cts-color-02);
	letter-spacing: var(--cts-font-ls);
	line-height: 1.66;
}
.fade--marker {
	background: linear-gradient(#FFFF7E, #FFFF7E) 0 calc(1.66em - 3px)/0% 10px no-repeat;
	padding: 10px;
	transition: all .5s;
}
.contents__productcatchicon {
	position: absolute;
	width: 125px;
	right: -37.5px;
	top: -30px;
}
.contents__productinner {
	position: relative;
	background: #F6F6F6;
	margin-top: clamp(85px,22.67vw,110px);
}
.contents__productimg {
	position: absolute;
	width: 210px;
	top: clamp(-105px,-22.67vw,-85px);
	left: 50%;
	transform: translateX(-50%);
}
.contents__productdetail {
	margin-top: clamp(8px,2.13vw,10px);
	padding: clamp(110px,29.33vw,135px) 10px clamp(20px,5.33vw,25px);
	text-align: center;
	color: var(--cts-color);
}
.contents__productname {
	font-size: clamp(13px,3.47vw,18px);
}
.contents__productname strong {
	font-weight: 500;
}
.contents__productspeclist {
	display: flex;
	align-items: center;
	flex-direction: column;
	gap: clamp(3px,.53vw,5px) 20px;
	margin-top: clamp(13px,3.47vw,15px);
    flex-wrap: wrap;
}
.contents__productspec {
	--cts-lineupspec-arrow: clamp(3.5px,.93vw,4.5px);
	position: relative;
	display: flex;
	align-items: center;
	padding-left: calc(clamp(7px,1.87vw,9px) + var(--cts-lineupspec-arrow));
	font-size: clamp(12px,3.2vw,14px);
	letter-spacing: .03em;
    white-space: nowrap;
}
.contents__productspec::before {
	content: "";
	position: absolute;
	display: inline-block;
	width: var(--cts-lineupspec-arrow);
	height: var(--cts-lineupspec-arrow);
	top: 50%;
	left: 0;
	border-bottom: solid 1px var(--cts-color-02);
	border-right: solid 1px var(--cts-color-02);
	transform: translateY(-50%) rotate(-45deg);
}
.contents__productdetailinner {
	display: flex;
	flex-direction: column;
	gap: clamp(16px,4.27vw,20px) 25px;
	margin-top: clamp(12px,3.2vw,20px);
}
.contents__productprice {
	font-size: clamp(16px,4.27vw,21px);
	letter-spacing: var(--cts-font-ls-03);
}
.contents__producttax {
	font-size: var(--cts-font-size);
	letter-spacing: var(--cts-font-ls-03);
}
.contents__productlink {
	position: relative;
	display: inline-block;
	bottom: 0;
	width: clamp(180px,48vw,215px);
	padding: clamp(5px,1.33vw,7px) 10px;
	font-size: clamp(13px,3.47vw,16px);
	color: #fff;
	text-align: center;
	text-decoration: none;
	letter-spacing: var(--cts-font-ls-03);
	box-sizing: border-box;
	box-shadow: 3px 4px 0px #0000002E;
	opacity: 1;
	overflow: hidden;
	transition: all .2s;
}
.contents__productlink:hover {
	bottom: -3px;
	box-shadow: 1px 1px 0px #0000002E;
	opacity: .8;
}
.contents__productlink::before {
	content: "";
	position: absolute;
	background: linear-gradient(90deg,#1D056E 0, #A40ADB 50%, #1D056E 100%);
	width: 200%;
	height: 100%;
	top: 0;
	left: -100%;
	z-index: 1;
	transition: all .2s;
}
.contents__productlink:hover::before {
	left: 0;
}
.contents__productlink span {
	position: relative;
	z-index: 100;
}


/* benefit
____________________*/
.contents--benefit {
	padding-top: clamp(70px,18.67vw,150px);
	padding-bottom:  clamp(80px,21.33vw,200px);
	background: url(../../gamepc/img/collab_masanorich/benefit_bg.webp) no-repeat center center;
	background-size: cover;
}
.contents--benefit>* {
	--cts-width: 740px;
}
.contents__benefit {
	width: 740px;
	margin: clamp(35px,9.33vw,50px) auto 0;
	padding: clamp(25px,6.67vw,50px) 15px;
	background: rgba(255,255,255,.85);
	border: 2px solid #8303B1;
	box-sizing: border-box;
	box-shadow: 0px 0px 10px #fff;
}
.contents__ttlinner--benefits {
	background: #fff;
	color: var(--cts-color-02);
}
.contents__benefitttl {
	font-size: clamp(13px,3.47vw,18px);
	text-align: center;
	color: var(--cts-color-02);
	letter-spacing: var(--cts-font-ls-03);
	box-sizing: border-box;
}
.contents__benefitttlinner {
	display: block;
	width: 400px;
	margin-top: 2px;
	margin-inline: auto;
	padding: 4px 10px;
	background: linear-gradient(90deg, #A40ADB 0%, #1D056E 100%) no-repeat;
	font-weight: 400;
	color: #fff;
	box-sizing: border-box;
}
.contents__benefitimgbox {
	text-align: center;
	margin-top: clamp(15px,4vw,25px);
}
.contents__benefit--wallpaper .contents__benefitimg,
.contents__benefit--folder .contents__benefitimg,
.contents__benefit--sticker .contents__benefitimg {
	box-shadow: 0px 3px 6px rgba(0,0,0,.3);
	pointer-events: none;
}
.contents__benefitimgtxt {
	margin-top: clamp(15px,4vw,25px);
	letter-spacing: .025em;
}
.contents__benefit--folder .contents__benefitimgtxt {
	margin-top: 0;
	font-size: clamp(10px,2.67vw,16px);
	text-align: right;
}
.contents__benefitimgtxt a {
	background: linear-gradient(var(--cts-color), var(--cts-color)) 0 100%/100% 1px no-repeat;
	background-position: 100% 100%;
	color: var(--cts-color);
	text-decoration: none;
	opacity: 1;
	transition: all .3s;
}
.contents__benefitimgtxt a:hover {
	background-size: 0 1px;
	opacity: .8;
}
.contents__benefitimgflex {
	display: flex;
	justify-content: center;
	gap: 7px 20px;
}


/* about
____________________*/
.contents--about {
	position: relative;
	background: url(../../gamepc/img/collab_masanorich/about_bg.webp) repeat-y center center;
	background-size: cover;
	padding-bottom: clamp(65px,17.33vw,185px);
	border-top: clamp(5px,1.33vw,12px) solid var(--cts-color-03);
	border-bottom: clamp(5px,1.33vw,12px) solid var(--cts-color-03);
}
.contents--about::before,
.contents--about::after {
	content: "";
	position: absolute;
	width: clamp(140px,37.33vw,465px);
	height: clamp(10px,2.67vw,30px);
	background: var(--cts-color-03);
	left: 50%;
	transform: translateX(-50%);
}
.contents--about::before {
	top: -1px;
	clip-path: polygon(0 0, 100% 0, 96% 100%, 4% 100%);
}
.contents--about::after {
	bottom: -1px;
	clip-path: polygon(4% 0, 96% 0, 100% 100%, 0 100%);
}
.contents__about {
	display: flex;
	justify-content: center;
	width: 1050px;
	margin: auto;
	color: var(--cts-color-02);
}
.contents__aboutimgbox {
	text-align: center;
}
.contents__aboutimg {
	width: clamp(270px,72vw,415px);
}
.contents__aboutttl {
	display: flex;
	align-items: flex-end;
	font-size: clamp(40px,10.67vw,72px);
	font-family: var(--cts-font);
	color: var(--cts-color-02);
	line-height: 1;
}
.contents__aboutttltxt--jp {
	margin-left: clamp(8px,2.13vw,15px);
	margin-bottom: clamp(6px,1.6vw,8px);
	font-size: clamp(18px,4.8vw,30px);
	font-family: var(--dp-font);
	line-height: 1.07;
}
.contents__aboutdescription {
	width: 510px;
	margin-top: 10px;
	color: var(--cts-color-03);
	line-height: 1.56;
}
.contents__aboutresultttl {
	margin-top: clamp(1em,3.2vw,2em);
	font-weight: 400;
}
.contents__aboutresultitem {
	padding-left: 1em;
	text-indent: -1em;
}
.contents__aboutresultitem::before {
	content: "・";
}
.contents__aboutlinklist {
	display: flex;
	gap: clamp(15px,4vw,22px);
	margin-top: clamp(20px,5.33vw,30px);
}
.contents__aboutlink {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: clamp(8px,2.13vw,15px);
	width: clamp(135px,36vw,245px);
	bottom: 0;
	background: #fff;
	padding: clamp(8px,2.13vw,10px) 10px;
	border: 2px solid var(--cts-color-02);
	text-decoration: none;
	color: var(--cts-color-03);
	box-sizing: border-box;
	box-shadow: 1px 6px 0px var(--cts-color-02);
	opacity: 1;
	transition: all .2s;
}
.contents__aboutlink:hover {
	bottom: -5px;
	box-shadow: 1px 1px 0px var(--cts-color-03);
	opacity: .8;
}
.contents__aboutlink span {
	font-size: clamp(12px,3.2vw,20px);
	font-weight: 600;
	color: var(--cts-color-03);
	letter-spacing: var(--cts-font-ls-02);
}


/* footer
____________________*/
.contents--footer {
	--cts-width: 1200px;
	position: relative;
	background-color: #011E60;
	padding-block: clamp(35px,9.33vw,70px);
}
.contents__footer {
	text-align: center;
}


/* PC
____________________*/
@media (min-width: 480px) {
	.contents__productitem--wide {
		width: 100%;
		margin-top: 40px;
		padding-bottom: 30px;
	}
	.contents__productitem--noicon {
		margin-top: 0;
	}
	.contents__productitem--wide .contents__productinner {
		display: flex;
		align-items: flex-end;
		margin-top: 20px;
		padding: 25px 40px 25px 10px;
	}
	.contents__productitem--wide .contents__productcatch {
		padding-top: 16px;
		text-align: left;
	}
	.contents__productitem--wide .contents__productcatch p {
		margin-left: var(--cts-imgspacer);
	}
	.contents__productitem--wide .contents__productcatchicon {
		position: absolute;
		top: -85px;
		right: -65px;
	}
	.contents__productitem--wide .contents__productimg {
		flex-shrink: 0;
		width: auto;
		top: auto;
		bottom: 10px;
		left: auto;
		transform: none;
	}
	.contents__productitem--wide .contents__productdetail {
		margin-top: 0;
		margin-left: var(--cts-imgspacer);
		padding: 0;
		text-align: left;
	}
	.contents__productitem--wide .contents__productspeclist {
		flex-direction: row;
		margin-top: 10px;
	}
	.contents__productitem--wide .contents__productdetailinner {
		align-items: center;
		flex-direction: row;
	}
}

/* モバイル
____________________*/
@media (max-width: 479px) {
	#s_container {
		margin: auto;
	}
	.pc {
		display: none;
	}
	.sp {
		display: block;
	}

	.contents__ttl {
		font-size: max(35px,9.33vw);
	}
	.contents__ttlinner {
		width: 250px;
		height: 50px;
		clip-path: polygon(10px 0%, 240px 0%, 100% 10px, 100% 40px, 240px 100%, 10px 100%, 0% 40px, 0% 10px);
	}
	.contents__subttl {
		margin-top: max(30px,8vw);
		font-size: max(20px,5.33vw);
	}
	.contents__subttl--note {
		margin-top: clamp(60px,16vw,100px);
	}
	.contents__subttlinner {
		--cts-ttlmarker: 14px;
		width: 190px;
	}
	.contents__product {
		width: 100vw;
	}
	.contents__productcatchicon {
		width: clamp(110px,30.67vw,125px);
		top: 5px;
		right: -30px;
	}
	.contents__productimg {
		text-align: center;
	}
	.contents__productimg img {
		width: max(175px,46.67vw);
	}
	.contents__benefit {
		width: auto;
	}
	.contents__benefitwrap {
		width: 100vw;
	}
	.contents__benefitttlinner {
		width: 100%;
	}
	.contents__benefitimgbox {
		width: calc(100% - 20px);
		margin-left: auto;
		margin-right: auto;
	}
	.contents__benefitimgtxt a {
		display: inline-block;
	}
	.contents__benefitimgflex {
		flex-direction: column;
	}
	.contents__benefitimgflex .contents__benefitimgbox {
		width: min(200px,65%);
	}
	.contents__benefitimgflex .contents__benefitimgbox:nth-child(n+2) {
		margin-top: 0;
	}
	.contents__about {
		flex-direction: column;
		width: max(300px,calc(100vw - var(--cts-gutter) * 2));
		padding-left: 0;
		padding-right: 0;
	}
	.contents__aboutdetail {
		width: 100%;
	}
	.contents__aboutttl {
		justify-content: center;
		padding-left: 0;
	}
	.contents__aboutdescription {
		width: clamp(290px,77.33vw,100%);
		margin-inline: auto;
	}
	.contents__aboutlinklist {
		justify-content: center;
	}
	.contents__aboutlink img {
		width: max(25px,6.67vw);
	}
	.contents__aboutlinklist .contents__aboutlinkitem:nth-of-type(1) span {
		white-space: nowrap;
		letter-spacing: -0.2px;
	}
	.contents__footer {
		padding: 0 max(10px,2.67vw);
	}
}


/* fade
____________________*/
.fade {
	opacity: 0;
	transform: translateY(50px);
	transition: all .7s;
}
.fade--left {
	opacity: 0;
	transform: translateX(-100%);
	transition: all .3s;
}
.fade--icon {
	position: relative;
	right: 0;
	opacity: 0;
}
.fade--iconimg {
	transform: rotate(30deg);
}
.fade.fadeShow,
.fade--left.fadeShow {
	transform: translate(0, 0);
	opacity: 1;
}
.fade--icon.fadeShow {
	animation: fade--icon 1s cubic-bezier(.12,0,.39,0) forwards;
}
.fade--iconimg.fadeShow {
	animation: fade--iconimg 1s cubic-bezier(.12,0,.39,0) forwards;
}
.fade--marker.fadeShow {
	background-size: 100% 10px;
}
@keyframes fade--icon {
	0% {
		right: -50%;
		opacity: 0;
	}
	100% {
		right: 0;
		opacity: 1;
	}
}
@keyframes fade--iconimg {
	0% {
		transform: rotate(1080deg);
	}
	100% {
		transform: rotate(0);
	}
}