@charset "utf-8";

/* category.css */

#tab01.container {
	background: url(../images/pg_main_bg01.jpg) center top / cover no-repeat;
}
#tab02.container {
	background: url(../images/pg_main_bg02.jpg) center top / cover no-repeat;
}
#tab03.container {
	background: url(../images/pg_main_bg03.jpg) center top / cover no-repeat;
}
#tab04.container {
	background: url(../images/pg_main_bg04.jpg) center top / cover no-repeat;
}

main {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
}

.mainBase {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	overflow: hidden;
}

.mainBase > picture img {
  width: 100%;
}

.mainBase > img {
  width: 100%;
}

.partsSpTab {
	display: none;
}

.partsTab {
	position: absolute;
	left: 20%;
	top: 7.4626%;
	width: 67.4038%;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
}

.partsTab li {
	width: 23.9657%;
}

.partsTab li img {
	width: 100%;
	height: auto;
}

.partsTab li a.current {
	pointer-events:none;
}

.partsBtn {
	position: absolute;
	z-index: 1;
}

.partsBtn img {
	width: 100%;
	height: auto;
}

.partsBtn a img {
	transition: 0.2s ease-out;
}

.partsBtn a:hover img {
  transform: scale(1.1);
}

#tab01.container .partsBtn {
	left: 62.2115%;
	top: 69.7014%;
	width: 14.8076%;
}

#tab02.container .partsBtn {
	left: 62.2115%;
	top: 65.5223%;
	width: 14.9038%;
}

#tab03.container .partsBtn {
	left: 78.0769%;
	top: 42.5373%;
	width: 15%;
}

#tab04.container .partsBtn {
	left: 63.9423%;
	top: 65.9701%;
	width: 15.0961%;
}


@media only screen and (max-width: 767px) {
#tab01.container {
  padding-top: calc(1987 / 767 * 100%); /* calc(画像高さ ÷ 画像横幅 × 100%) */
	background: url(../images/sp/pg_main_bg01.jpg) center top / cover no-repeat;
}

#tab03.container {
  padding-top: calc(2252 / 767 * 100%); /* calc(画像高さ ÷ 画像横幅 × 100%) */
	background: url(../images/sp/pg_main_bg03.jpg) center top / cover no-repeat;
}

.partsSpTab {
	position: absolute;
	left: 9.4202%;
	top: 0;
	width: 81.5217%;
	padding: 2%;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
}

.partsSpTab li {
	width: 47.1111%;
}

.partsSpTab li img {
	width: 100%;
	height: auto;
}

#tab01.container .partsTab,
#tab03.container .partsTab {
	display: none;
}

#tab01.container .partsBtn,
#tab03.container .partsBtn {
	display: none;
}
}

@media only screen and (max-width: 420px) {
}