@charset "utf-8";

:root {
	/* base */
	--cts-gutter: 30px;
	--cts-width: 940px;

	/* font */
	--dp-font-jp: "Noto Sans JP", sans-serif;
	/* Noto Sans JP
	Noto Sans JP Thin 100
	Noto Sans JP Light 300
	Noto Sans JP Regular 400
	Noto Sans JP Medium 500
	Noto Sans JP Bold 600
	*/
	
	--cts-font: rockwell-nova, sans-serif;
	/*	rockwell font
	font-weight: 700;
	font-style: normal;
	*/

	--dp-h1-size: clamp(24px,calc(1.159rem + 1.45vw),36px);
	--dp-h2-size: clamp(20px,calc(1.023rem + .97vw),28px);
	--dp-h3-size: clamp(18px,calc(.955rem + .73vw),24px);
	--dp-h4-size: clamp(16px,calc(.886rem + .48vw),20px);
	--dp-p-l-size: clamp(14px,calc(.818rem + .24vw),16px);/* 本文 Large */
	--dp-p-note-size: clamp(10px,calc(.597rem + .12vw),11px);/* 本文 Notes */
	--dp-price-s-size: clamp(16px,calc(.886rem + .48vw),20px);/* 価格 Small */
	--dp-price-tax-s-size: clamp(12px,calc(.693rem + .24vw),14px);/* 円・税 Small */

	--cts-font-size: clamp(12px,calc(.693rem + .24vw),14px);/* DP-Medium */
	--cts-font-ls: .025em;/*letter-spacing*/
	--cts-font-ls-02: .05em;

	/* color */
	--dp-color: #004da1;
	--dp-color-price: #e43344;
	--cts-color: #484848;
}

/*	フォントスタイル */

#container h2{
	font-family: var(--cts-font);
	font-size: clamp(45px, 2rem + 2.67vw, 60px);
	font-weight: 600;
	color: #fff;
	letter-spacing: .1em
}
.contents__ttl{
	padding-block-start: clamp(70px, 0.556rem + 16.3vw, 180px);
}
.product__lineup,
.benefits__lineup {
	display: inline-block;
	font-size: clamp(17px, 0.785rem + 1.19vw, 25px);
	color: #ffffff;
	border: 1px solid #FF0000;
	background-color: #FF0000;
	width: clamp(306px, 14.889rem + 18.07vw, 428px);
	letter-spacing: .1em;
	font-weight: 400;
}
.product__type {
	font-family: var(--cts-font);
	font-size: 25px;
	color: #ffffff;
	text-align: center;
	letter-spacing: 0.1em;
	padding-bottom: 12px;
}
.ttl--redcolor{
	color: #FF0000;
}
#container h4, #container h5{
	font-weight: 500;
}
#container h4 {
	font-size: clamp(0.938rem, 0.875rem + 0.31vw, 1.125rem);
	color: #ffffff;
	letter-spacing: .015em;
}
#container h5 {
	font-size: clamp(0.938rem, 0.875rem + 0.31vw, 1.125rem);
	color: #484848;
	letter-spacing: 0;
}


/* LP共通汎用
____________________*/
#container {
	width: 100%;
	margin: auto;
}
#s_container {
	font-family: var(--dp-font-jp);
	width: 100%;
	background-color: #D5D5D5;
}
.column2R #main {
	float: none;
	width: auto;
}
.breadCrumb {
	margin: 0 auto !important;
	width: 970px;
}
.pagetop {
	display: none;
}
#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;
}
#container img {
	image-rendering: -webkit-optimize-contrast;
}
.sp {
	display: none;
}
.contentsWrap {
	width: 100%;
	text-align: center;
}
.contentsWrap 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;
	}
	.leadSection.clearfix {
		display: none;
	}
.breadCrumb {
	width: 100%;
}
}

/* .contents
____________________*/
.contents::after {
	content: "";
	display: block;
	width: 100%;
	height: clamp(25px, 0.694rem + 3.7vw, 50px);
	background: linear-gradient(90deg, #000000 0%, #888888 49%, #000000 100%);
}
.contents--esportsteam::after {
	content: none;
}

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


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


/* product
____________________*/

.product__inner {
	position: relative;
	background: url(../../gamepc/img/collab_alphad/bg_01.webp) no-repeat;
	background-size: cover;
	padding-inline: var(--cts-gutter);
}
.product__list {
	max-width: 800px;
	position: relative;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: clamp(35px, 0.972rem + 5.19vw, 70px) 50px;
	padding-block-start: clamp(30px, 0.833rem + 4.44vw, 60px);
	padding-block-end: clamp(85px, 1.319rem + 17.04vw, 200px);
}
.product__item {
	position: relative;
	width: 370px;
	text-align: center;
	box-sizing: border-box;
}
.product__iteminner {
	padding-top: clamp(18px, 0.882rem + 1.04vw, 25px);
	background: #6D6D6D;
}
.product__detail {
	margin-top: 25px;
	padding-block: clamp(20px, 1.076rem + 0.74vw, 25px) clamp(25px, 1.389rem + 0.74vw, 30px);
	padding-inline: clamp(20px, 1.076rem + 0.74vw, 25px);
	background-color: #ffffff;
}
.product__detailinner {
    margin: 0 auto;
    text-align: center;
    width: auto;
    display: inline-block;
}
.product__link span {
	position: relative;
	color: #ffffff !important;
	letter-spacing: .015em;
	z-index: 10;
}
.link--out::before {
    animation: link-out ease-in .4s both;
}
.product__link {
	position: relative;
	max-width: 200px;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: clamp(8px, 0.431rem + 0.3vw, 10px);
	margin-inline: auto;
	padding-block: clamp(5px,0.236rem + 0.38vw,8px);
	padding-inline: clamp(25px,0.737rem + 2vw,40px);
	background: var(--dp-color);
	font-size: var(--dp-p-l-size);
	font-weight: 300;
	text-decoration: none !important;
	letter-spacing: var(--cts-font-ls);
	box-sizing: border-box;
	overflow: hidden;
	z-index: 1;
}
.product__link::before {
	position: absolute;
	content: "";
	width: 150%;
	height: 100%;
	top: 0;
	left: -168%;
	background: #00a2e6;
	transform: skewX(-18deg);
	opacity: .3;
	z-index: -1;
}
.product__link::after {
	content: "";
	position: absolute;
	top: calc(50% - 3px);
	right: 17px;
	width: 6px;
	height: 6px;
	border-right: 1px solid;
	border-bottom: 1px solid;
	border-color: #fff;
	transform: rotate(-45deg);
}
.link--over::before {
	animation: link-over ease-out .4s both;
}
.link--out::before {
	animation: link-out ease-in .4s both;
}
@keyframes link-over {
	0% {
		left: -168%;
	}
	100% {
		left: -18%;
	}
}
@keyframes link-out {
	0% {
		left: -18%;
	}
	100% {
		left: 168%;
	}
}

.product__spec {
	display: flex;
	flex-direction: row;
	align-items: center;
	margin-block-start: 5px;
	color: #585657;
	justify-content: center;
    flex-wrap: wrap;
}
.product__spec li {
	position: relative;
	display: flex;
	align-items: center;
	font-size: clamp(13px, 0.778rem + 0.15vw, 14px);
    white-space: nowrap;
}
.product__price {
	font-size: var(--dp-price-s-size);
	font-weight: 600;
	margin-top: clamp(12px, 0.472rem + 1.19vw, 20px);
	color: #585657;
	letter-spacing: .05em;
}
.product__tax {
	font-size: var(--dp-price-tax-s-size);
	font-weight: 400;
	letter-spacing: .05em;
}
.product__catch {
	margin-top: 5px;
	font-weight: 400;
}


/* benefits
____________________*/
.benefits {
	padding-block-end: clamp(85px, 1.319rem + 17.04vw, 200px);
	padding-inline: var(--cts-gutter);
}
.benefits__inner {
    display: inline-block;
}

.contents--benefits {
	background: url(../../gamepc/img/collab_alphad/bg_03.webp) no-repeat;
	background-size: cover;
}
.benefits--box {
	width: 740px;
	margin-top: clamp(30px, 1.319rem + 3.7vw, 60px);
	background-color: #000;
	border: 2px solid #FF0000;
	box-sizing: border-box;
	padding-block: clamp(30px, 0.66rem + 5.19vw, 65px) clamp(30px, 0.313rem + 6.67vw, 75px);
	color: #fff;
}
.benefits--box a {
	color: #fff !important;
}
.benefit--font__underline {
	display: inline-block;
	width: 454px;
	border-bottom: 2px solid #FF0000;
	font-size: clamp(13px, 0.639rem + 0.74vw, 18px);
	letter-spacing: .05em;
	line-height: 1.3;
}
.benefit--font__number{
	font-family: rockwell-nova, sans-serif;
	color: #fff;
	font-size: clamp(25px, 0.694rem + 3.7vw, 50px);
	font-weight: 600;
	padding-right: clamp(8px, 0.257rem + 1.04vw, 15px);
	letter-spacing: 0;
}
.benefits--item01inner,
.benefits--wallpaper__img,
.benefits__flex {
	margin-top: clamp(20px, 0.556rem + 2.96vw, 40px);
}
.benefits--item01__link {
	transition: all .3s;
}
.benefits--item01__link:hover {
	opacity: .75;
}
.benefits__annotation--mt {
	margin-top: clamp(25px, 0.694rem + 3.7vw, 50px);
}
.benefits__annotation--mt25 {
	margin-top: clamp(12px, 0.299rem + 1.93vw, 25px);
}
.benefit--wallpaper__item + .benefit--wallpaper__item {
	margin-top: 0;
}
.benefits__flex {
	display: flex;
	justify-content: space-between;
	max-width: 480px;
	margin-inline: auto;
}
.benefits__flex + .benefits--wallpaper__img {
	margin-top: 0;
}
.benefit--wallpaper__txt {
	margin-bottom: 10px;
}
.benefit--wallpaper__item img {
	pointer-events: none;
}


/* esports team 
____________________*/

.esportsteam__ttl{
	margin-block-start: clamp(80px, 2.917em + 10.42vw, 180px);
}
.esports--txt__teamname{
	margin-top: clamp(25px, 0.694rem + 3.7vw, 50px);
	font-family: var(--cts-font);
	font-size: clamp(25px, 1.389rem + 0.74vw, 30px);
	font-weight: bold;
	color: #FF0000;
	letter-spacing: 0.025em;
}

.esports--txt__history{
	margin-top: clamp(11px, 0.375rem + 1.33vw, 20px);
	color: #000000;
	font-size: clamp(11px, 0.514rem + 0.74vw, 16px);
	line-height: 1.8;
}

.contents--esportsteam{
	background: linear-gradient(180deg, #D5D5D5 0%, #FFFFFF 100%);
}
.overviewBtn {
	margin-top: clamp(33px, 1.646rem + 1.78vw, 45px);
}
.overviewBtn li{
	width: 200px;
	height: 40px;
	line-height: 3.0;
}
.overviewBtn .product__link {
	color: #fff;
	background-color: #00A2E6;
	max-width: 225px;
}
.overviewBtn .product__link::before {
	background: #61cffd;
}
.esportsteam__imgbox {
	margin-top: clamp(33px, 1.646rem + 1.78vw, 45px);
}


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

	.product__item {
		width: clamp(300px, 2.975rem + 67.31vw, 370px);
	}
	.product__img img {
		width: clamp(240px, 5.084rem + 42.31vw, 284px);
	}
	.product__spec {
		display: block;
	}
	.product__spec li {
		display: inline-block;
	}
	.benefits__lineup {
		width: 100%;
	}
	.benefits--box {
		width: 100%;
		padding-inline: 30px;
	}
	.benefit--font__underline {
		width: 100%;
	}
	.esportsteam__inner {
		padding-inline: 30px;
	}
	.esportsteam__imgbox img {
		margin-inline: auto;
	}
}


/* fade
____________________*/
.fade {
	opacity: 0;
	transform: translateY(50px);
	transition: all .5s ease;
}
.fade.fadeShow {
	transform: translateY(0);
	opacity: 1;
}
.fade--bg::after {
	opacity: 0;
	transform: translateX(-100px);
	transition: all 1.3s ease;
}
.fade--bg.fadeShow::after {
	transform: translateX(0);
	opacity: 1;
}
.fade--chart {
	transform: scale(0);
	transition: all 1s ease;
}
.fade--chart.fadeShow {
	transform: scale(1);
}