@charset "utf-8";
.main_wrap{
	font-size: 10px;
	letter-spacing: .06em;
}
.main_wrap *{
	font-size: 10px;
	font-family: "Noto Sans JP", sans-serif;
	line-height: 1em;
}
:where(.main_wrap) a{
	cursor: pointer;
}
:root{
	--width: 1200px;
	--padding: 80px;
	--center: calc(50% - var(--width)/2);
	--shadow: drop-shadow(0 0 .7em rgba(164,164,164,.4));
	--color_spike: #0062bb;
	--color_shoes: #d90002;
	--color_wear: #3137ab;
	--color_accessory: #121212;
}
/* 全アイテムを見る */
.more{
	background: #878787;
	padding: var(--padding) var(--center);
}
.more a{
	font-size: 2.4em;
	aspect-ratio: 1200/70;
	color: #fff;
	border: 1px solid #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}
.more a::before{
	content: '';
	width: 1.4em;
	height: 1px;
	background: #fff;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: .8em;
}
.more a::after{
	content: '';
	width: .4em;
	height: 1px;
	background: #fff;
	position: absolute;
	top: 50%;
	transform: translateY(-50%) rotate(30deg);
	transform-origin: 100% 0;
	right: .8em;
}
.sp_only{
	display: none;
}

.fv{
	height: 54em;
}
.fv img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.about{
	width: var(--width);
	margin: -20em auto var(--padding);
}
.about img{
	width: 100%;
	max-width: 1000px;
	display: block;
	margin: 0 auto;
}
.menu{
	width: var(--width);
	margin: 0 auto var(--padding);
	display: flex;
	justify-content: space-between;
}
.menu li{
	width: 28.5em;
}
.menu li a{
	font-size: 2.2em;
	font-weight: 700;
	width: 100%;
	aspect-ratio: 285/70;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #fff;
}
.menu li:nth-child(1){
	background: var(--color_spike);
}
.menu li:nth-child(2){
	background: var(--color_shoes);
}
.menu li:nth-child(3){
	background: var(--color_wear);
}
.menu li:nth-child(4){
	background: var(--color_accessory);
}

.genre .list{
	padding: var(--padding) var(--center);
}
.genre .list:nth-child(2n){
	--bg: #fff;
	background: var(--bg);
}
.genre .list:nth-child(2n+1){
	--bg: #f1f1f1;
	background: var(--bg);
}
#spike{
	--main_color: var(--color_spike);
}
#shoes{
	--main_color: var(--color_shoes);
}
#wear{
	--main_color: var(--color_wear);
}
#accessory{
	--main_color: var(--color_accessory);
}

.list h3{
	margin: 0 0 1.3em;
	font-size: 4.2em;
	text-align: center;
	color: var(--main_color);
	font-weight: 700;
}
.list h3 span{
	font-size: .4761em;
	margin: 1em 0 0;
	display: block;
	font-weight: 700;
}

.model{
	margin: 0 0 6em;
	text-align: center;
	border: 1px solid #585858;
}
.model h4{
	margin: -.7em 0 0;
	padding: 0 .5em;
	font-size: 2.6em;
	font-weight: 700;
	color: #121212;
	background: var(--bg);
	letter-spacing: .02em;
	display: inline-block;
}
.model ul{
	width: 104em;
	margin: auto;
	padding: 3.5em 0 4em;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
}
.model li img{
	margin: 0 0 1.2em;
}
.model li:nth-child(1) img{
	width: 19.8em;
}
.model li:nth-child(2) img{
	width: 27.6em;
}
.model li:nth-child(3) img{
	width: 20.5em;
}
.model li p{
	font-size: 1.6em;
	font-weight: 700;
}
.select h4{
	margin: 0 0 1.8em;
	font-size: 2.4em;
	text-align: center;
	font-weight: 700;
	letter-spacing: .02em;
}
.form{
	margin: 0 0 var(--padding);
	border: 1px solid #bababa;
}
.form > li{
	display: flex;
}
.form > li + li{
	border-top: 1px solid #bababa;
}
.form h5{
	width: 11.25em;
	font-size: 1.6em;
	font-weight: 700;
	flex-shrink: 1;
	background: var(--main_color);
	color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
}
.form ul{
	width: 100%;
	padding: 2em 4em;
	background: #fff;
	display: flex;
	align-items: center;
	gap: 5em;
}
.form label{
	font-size: 1.6em;
	line-height: 1.4em;
	display: flex;
	align-items: center;
}
.form input{
	margin: 0 1em 0 0;
}

.item{
	padding: 1em 1em 5em 1em;
	gap: 4em;
	display: flex;
	overflow-x: scroll;
	overflow-y: hidden;
}
@supports not selector(::-webkit-scrollbar) {
	.item{
		scrollbar-color: #dadada rgba(0, 0, 0, 0);
		scrollbar-width: thin;
	}
}
.item::-webkit-scrollbar{
	background: rgba(0, 0, 0, 0);
	height: .5em;
}
.item::-webkit-scrollbar-thumb{
	background: #dadada;
	border-radius: 2em;
}
.item li{
	min-width: 29.2em;
	width: 29.2em;
	background: #fff;
	filter: var(--shadow);
}
.item a{
	padding: 0 0 3em;
	height: 100%;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	text-align: center;
}
.item img{
	width: 100%;
	aspect-ratio: 1/1;
	object-fit: contain;
	padding: 1em;
	box-sizing: border-box;
	display: block;
}
.item strong{
	font-size: 1.6em;
	margin: 0 .625em .625em;
	line-height: 1.4em;
	font-weight: 700;
	letter-spacing: .02em;
}
.item p{
	margin: 0 0 1.6em;
	font-size: 1.2em;
	line-height: 1.5em;
	font-weight: 400;
}
.item em{
	font-size: 1.8em;
	font-weight: 700;
	margin: auto 0 0;
}
a.select_more{
	font-size: 2em;
	width: 24em;
	margin: 3em auto 0;
	aspect-ratio: 480/68;
	border: 1px solid #000;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}
a.select_more::before{
	content: '';
	width: 1.4em;
	height: 1px;
	background: #000;
	position: absolute;
	top: 54%;
	transform: translateY(-50%);
	right: .5em;
}
a.select_more::after{
	content: '';
	width: .5em;
	height: 1px;
	background: #000;
	position: absolute;
	top: 54%;
	transform: translateY(-50%) rotate(30deg);
	transform-origin: 100% 0;
	right: .5em;
}
.select_img{
	margin: var(--padding) 0 0;
	width: 100%;
	display: block;
}

.select_img img{
	width: 100%;
}

@media screen and (max-width:1240px) {
	.main_wrap{
		font-size: .8vw;
	}
	.main_wrap *{
		font-size: .8vw;
	}
	:root{
		--width: 92%;
		--padding: 6.4vw;
	}
	.fv{
		height: auto;
	}
	.about{
		width: var(--width);
		margin: 2em auto 5em;
	}
	.menu li{
		width: 27em;
	}
}

@media screen and (max-width:768px) {
	.main_wrap{
		font-size: 1.3333vw;
	}
	.main_wrap *{
		font-size: 1.3333vw;
	}
	:root{
		--padding: 18vw;
	}
	
	.sp_only{
		display: block;
	}
	.menu{
		flex-wrap: wrap;
		gap: 2.4em 0;
	}
	.menu li{
		width: 48%;
	}
	.more{
		padding: 6em var(--center);
	}
	.more a{
		font-size: 3.6em;
		aspect-ratio: 1200/180;
	}
	.genre .list{
		padding: 6.5em var(--center);
	}
	.model h4{
		font-size: 2.8em;
	}
	.model ul{
		width: 100%;
		padding: 6em 0;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		gap: 7em;
	}
	.model li:nth-child(1) img{
		width: 29.7em;
	}
	.model li:nth-child(2) img{
		width: 41.6em;
	}
	.model li:nth-child(3) img{
		width: 30.8em;
	}
	.model li p{
		font-size: 2.4em;
		margin: .9em 0 0;
	}
	.select h4{
		font-size: 2.6em;
		line-height: 1.4em;
	}
	.form{
		margin: 0 0 6em;
	}
	.form h5{
		font-size: 2.4em;
		width: 22em;
	}
	.form ul{
		flex-wrap: wrap;
		gap: 4em 6em;
		padding: 4em 3.2em;
	}
	.form label{
		font-size: 2.4em;
	}
	.item::-webkit-scrollbar{
		height: 1em;
	}
	.item li{
		min-width: 44em;
		width: 44em;
	}
	.item li a{
		padding: 0 0 4.7em;
	}
	.item img{
		margin: 0 0 1.5em;
		padding: 1.6em;
	}
	.item strong{
		font-size: 2.4em;
	}
	.item p{
		font-size: 2em;
	}
	.item em{
		font-size: 2.6em;
	}
	a.select_more{
		font-size: 2.4em;
	}
	a.select_more{
		width: 20em;
		padding: 0 1.6em 0 0;
		box-sizing: border-box;
		aspect-ratio: 480/68;
	}
	a.select_more::before{
		right: .8em;
	}
	a.select_more::after{
		right: .8em;
	}
	.select_img{
		margin: 6em 0 0;
	}
}