@charset "utf-8";
/* CSS Document */
.header_d {
  background-color: #000;}
  .header_d .more a{
    border: 1px solid #fff;
}
body{

}
.swiper-container{overflow:hidden}
.company_a .company-wrap .item {
    padding: 0px;
}
.company_a .company-wrap .item p span{
    font-size: 14px;
}
.cate2 .box_wrap{
	gap: 60px;
	align-items: flex-start;
}
.cate2 .box_wrap .box-item{
	width: calc((100% - 180px)/4);
}
.cate2 .stepbox .step{
	font-size: 12px;
}
.cate2 .imgbox {
    position: relative;
}
.cate2 .imgbox img{
    border-radius: 5px;
}
.cate2 .imgbox {
    --step-size: clamp(64px, 9vw, 120px);  
    --step-ox: 50%;  
    --step-oy: 50%;  
}
.cate2 .step-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--step-size);
    aspect-ratio: 1 / 1;
    transform: translate(calc(-1 * var(--step-ox)), calc(-1 * var(--step-oy)));
    background: url("https://astral253.com/system_panel/uploads/images/step-bg.svg") center / contain no-repeat;
    z-index: 2;
    pointer-events: none;
}
.cate2 .step-bg .stepbox {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;    
    align-items: center;    
    justify-content: center; 
    text-align: center;
	gap: 5px;
}

.cate2 .stepbox > * {
    position: static;    
    margin: 0;
    color: #fff;
	line-height: 1;
}

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

}
/* ---------- 1080px ~ ---------- */
@media screen and (max-width: 1080px){
	.cate2 .box_wrap .box-item{
		width: calc((100% - 100px)/2);
	}
	.cate2 .box_wrap {
		width: 80%;
		margin: 0 auto;
		align-items: flex-start;
	}
}
/* ---------- 768px ~ ---------- */
@media screen and (max-width: 768px){
	.cate2 .box_wrap .box-item{
		width: calc((100% - 60px)/1);
	}
	.cate2 .box_wrap {
		width: 60%;
		gap: 60px;
	}
}
/* ---------- 576px ~ ---------- */
@media screen and (max-width: 576px){
    .company_a .company-wrap .item > div {
        width: 70%;
        padding-left: 10px;
    }
	.cate2 .box_wrap {
		width: 90%;
	}
}
/* ---------- 350px ~ ---------- */
@media screen and (max-width: 350px){
}