@charset "utf-8";
/* CSS Document */


.pcOnlyB{
	display:none;
}

.pcOnlyI{
	display:none;
}

/* トップページ */

.mainImage{
	width: 100%;
	height: 400px;
	background-color: #F2F2F2;
	display: grid;
	place-content: center;
}

.topOsusume{
	padding: 50px 0;
}

.topOsusume__list{
	display: flex;
	justify-content: center;
	gap: 20px;
}

.topOsusume__list figure{
	width: 240px;
}

.topCate{
	padding: 50px 0;
}

.topCate__list{
	display: flex;
	justify-content: center;
	gap: 20px;
}

.topCate__list figure{
	width: 300px;
}

.cateList{
	display: grid;
	grid-template-columns: repeat(5,1fr);
	gap: 30px;
	margin-bottom: 40px;
}

.cate2Box{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	min-height: 100%;
	background-color: rgba(255, 255, 255, 0.9);
	display: none;
}

.cate2BoxInner{
	width: var(--inner-width);
	position: absolute;
	text-align: left;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
}

.cate2Box.on{
	display: block;
}

.activeCate{
	display: grid;
	grid-template-columns:150px 100px auto 150px;
	gap: 20px;
	border: solid 1px #CCC;
	align-items: center;
	margin-bottom: 40px;
	margin-top: 20px;
}

.searchResult__item{
	display: grid;
	grid-template-columns: 280px auto;
	gap: 20px;
	margin-bottom: 30px;
	border-bottom: dotted 1px #333;
	padding-bottom: 30px;
}

.searchResult__item table,
.filterBox table,
.defTbl{
	border: solid 1px #CCC;
	width: 100%;
	font-size: 1.6rem;
}

.searchResult__item table th,
.filterBox table th,
.defTbl th{
	padding: 10px;
	background-color: #F2F2F2;
}

.searchResult__item table td,
.filterBox table td,
.defTbl td{
	padding: 5px 10px;
}

.searchResult__item>div{
	position: relative;
}

.btnMylist{
	position: absolute;
	right: 0;
	top: 0;
}

.detail__mylist{
	text-align: right;
	margin-bottom: 20px;
}

.detail__contnet{
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 40px;
	margin-bottom: 40px;
}

.detail__contnet .image>figure{
	border: solid 1px #CCC;
	margin-bottom: 10px;
	img{
		width:100%;
		height:auto;
		aspect-ratio:1/1;
		object-fit:contain;
	}
}

.detail__contnet .image .thum{
	display: grid;
	grid-template-columns: repeat(3,1fr);
	gap: 10px;
	figure{
		border: solid 1px #CCC;
		img{
			width:100%;
			height:auto;
			aspect-ratio:1/1;
			object-fit:contain;
		}
	}
}

.sumpo{
	margin-bottom: 40px;
	&>figure{
		border: solid 1px #CCC;
		width: 200px;
	}
}

.filterBox{
	background: #F2F2F2;
	padding: 20px;
}

.filterBox table{
	background-color: #FFF;
	margin-bottom:20px;
	& td{
		border-bottom: solid 1px #CCC;
	}
}

.filterBox>div,
.filterBox>h3{
	margin-bottom: 20px;
}

.filterBox button{
	padding: 8px 40px;
}

.defTbl{
	margin-bottom: 20px;
}

.dlBtn{
	padding: 5px 30px;
}