@charset "utf-8";
/* CSS Document */
.cate1 .box_wrap{
	gap: 60px;
}
.cate1 .box_wrap .box-item{
	gap: 30px;
	align-items: stretch;
}
.cate1 .box_wrap .box-item .imgbox{
    flex: 1;
}
.cate1 .box_wrap .box-item .stepbox{
    flex: 0 0 70px;  
}
.cate1 .box_wrap .box-item .txtbox{
    flex: 1;
}
.cate1 .box_wrap .box-item .txtbox .more{
	justify-content: flex-start;
}
.cate1 .box_wrap .box-item .stepbox .stepitem{
    width: 100%;
	aspect-ratio: 1 / 1;
	border: #F39533 2px solid;
	border-radius: 50%;
}
.cate1 .box_wrap .box-item .stepbox .stepitem p{
	line-height: 1;
}
.cate1 .box_wrap .box-item .stepbox .stepline{
    flex: 1;    
    width: 2px;
    margin: 10px auto 0;        
    background: repeating-linear-gradient(
        to bottom,
        #C1C0C0 0px,
        #C1C0C0 6px,
        transparent 6px,
        transparent 12px
    );
}
/* ---------- IEのみ ---------- */
@media all and (-ms-high-contrast: none) {
}
/* ---------- 1280px ~ ---------- */
@media screen and (max-width: 1280px){
}
/* ---------- 1080px ~ ---------- */
@media screen and (max-width: 1080px){
	.cate1 .box_wrap .box-item .stepbox {
		flex: 0 0 60px;
	}
	.cate1 .box_wrap .box-item {
		gap: 20px;
	}

}
/* ---------- 768px ~ ---------- */
@media screen and (max-width: 768px){
    .cate1 .box_wrap .box-item {
        flex-direction: column;
		align-items: center;
    }
	.cate1 .box_wrap .box-item .imgbox{
		width: 80%;
	}
	.cate1 .box_wrap .box-item .stepbox{
		width: 60px; 
	}
	.cate1 .box_wrap .box-item .txtbox{
		width: 80%;
	}
	.cate1 .box_wrap .box-item .txtbox h2{
		text-align: center;
	}
	.cate1 .box_wrap .box-item .stepbox .stepline{
		display: none;
	}
    .cate1 .box_wrap .box-item {
        gap: 15px;
    }
	.cate1 .box_wrap .box-item .txtbox .more{
		justify-content: center;
	}
}
/* ---------- 576px ~ ---------- */
@media screen and (max-width: 576px){
	.cate1 .box_wrap .box-item .imgbox{
		width: 100%;
	}
	.cate1 .box_wrap .box-item .stepbox{
		width: 50px; 
	}
	.cate1 .box_wrap .box-item .txtbox{
		width: 100%;
	}
    .cate1 .box_wrap .box-item {
        gap: 10px;
    }
}
/* ---------- 350px ~ ---------- */
@media screen and (max-width: 350px){
}