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

.cate_wrap .cate1 .circle p{
	font-family: "Roboto", sans-serif;
	font-weight: 400;
	font-size: clamp(16px,1.8vw,20px);
}

.cate4{
	overflow: hidden;
}
.cate4 .swiper-container{
	position: relative;
}
.cate4 .swiper-container .swiper-wrapper{
	transition-timing-function: linear !important;
}
.cate4 .swiper-container .swiper-wrapper .swiper-slide{
	opacity: 1;
}
body.gjs-dashed .cate4 .swiper-container .swiper-wrapper .swiper-slide{width: 25%;display: inline-block;}

.cate4 .swiper-container .swiper-wrapper .swiper-slide a{
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	position: relative;
}
.cate4 .swiper-container .swiper-wrapper .swiper-slide a:hover{
	opacity: 1;
}
.cate4 .swiper-container .swiper-wrapper .swiper-slide a .bg_img_wrap2{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 100%;
	transform: translate(-50%,-50%);
	transition: ease 0.6s;
}
.cate4 .swiper-container .swiper-wrapper .swiper-slide a:hover .bg_img_wrap2{
	transform: translate(-50%,-50%) scale(1.1);
}

.cate4 .width-1280-max a{
	gap: 10px;
	padding-bottom: 5px;
	border-bottom: 3px solid #231816;
}
.cate4 .width-1280-max a img{
	width: 12px;
	transition: ease 0.3s;
}
.cate4 .width-1280-max a:hover img{
	transform: translate(2px,-2px);
}


/* ---------- IEのみ ---------- */
@media all and (-ms-high-contrast: none) {
}
/* ---------- 1280px ~ ---------- */
@media screen and (max-width: 1280px){
}
/* ---------- 1080px ~ ---------- */
@media screen and (max-width: 1080px){
}
/* ---------- 768px ~ ---------- */
@media screen and (max-width: 768px){
}
/* ---------- 576px ~ ---------- */
@media screen and (max-width: 576px){
}

/* ---------- 350px ~ ---------- */
@media screen and (max-width: 350px){
}