@charset "utf-8";
/* CSS Document */
.cate1 {
	gap: 80px;
}
.cate1 .topbox{
	gap: 60px;
	align-items: flex-start;
	margin-bottom: 60px;
}
.cate1 .txtbox{
	gap: 40px;
	width: calc(50% - 30px);
	flex-direction: column;
	align-items: flex-start;
}
.cate1 .imgbox{
	position: relative;
	gap: 40px;
	width: calc(50% - 30px);
	justify-content: flex-end;
}
.cate1 .imgbox .img1{
	border-radius: 50%;
	width: 80%;
	align-items: flex-start;
  	aspect-ratio: 1 / 1;
	object-fit: cover; 
}
.cate1 .imgbox .img2{
	position: absolute;
	border-radius: 50%;
	width: 40%;
	aspect-ratio: 1 / 1;
	object-fit: cover; 
	right: -5%;
	bottom: -20%;
}
.cate1 .topbox:nth-of-type(even) {
    flex-direction: row-reverse;
}
.cate1 .topbox:nth-of-type(even) .imgbox {
    justify-content: flex-start; 
}

.cate1 .topbox:nth-of-type(even) .imgbox .img2 {
    right: 5%;
    left: auto;
}

/* ---------- IEのみ ---------- */
@media all and (-ms-high-contrast: none) {
}
/* ---------- 1280px ~ ---------- */
@media screen and (max-width: 1280px){
	.cate1 .topbox {
		margin-bottom: 0px;
	}
}
/* ---------- 1080px ~ ---------- */
@media screen and (max-width: 1080px){
	
	.cate1 .topbox {
		flex-direction: column-reverse;
		gap: 10px;
	}
	.cate1 .topbox:nth-of-type(even) {
		flex-direction: column-reverse;
	}
	.cate1 .topbox:nth-of-type(even) .imgbox {
		justify-content: flex-end; 
	}
	.cate1 .txtbox {
		gap: 30px;
		width: 90%;
		margin-right: auto;
	}
	.cate1 .imgbox {
		width: 70%;
		margin-left: auto;
		padding-right: 10%;
	}
	.cate1 .imgbox .img1{
		border-radius: 50%;
		width: 80%;
		align-items: flex-start;
	}
	.cate1 .imgbox .img2{
		right: 0%;
	}
	.cate1 .topbox:nth-of-type(even) .imgbox .img2 {
		right: 0%;
	}
}
/* ---------- 768px ~ ---------- */
@media screen and (max-width: 768px){
    
    .cate1 .txtbox {
        gap: 20px;
        width: 100%;
    }
	.cate1 .imgbox {
        width: 80%;
        margin-left: auto;
    }
}
/* ---------- 576px ~ ---------- */
@media screen and (max-width: 576px){
.empty-wrap .more a > div {
    padding: 5px;
    gap: 5px;
}
      .more3 a p {
                font-size: 12px;
  }
}
/* ---------- 350px ~ ---------- */
@media screen and (max-width: 350px){
}