@charset "UTF-8";


.sec-card ul{
	position: relative;
	background: var(--bg-main);
	width: calc((100% - 40px - 160px) / 3);
	padding: 20px;
}
.mono .sec-card ul::before{
	content: "01";
	display: block;
	font-size: calc(60px * var(--font-scale));
	font-family: "LEVANGA", sans-serif;
	color: var(--color-black);
  color: var(--color-white);
	z-index: 1;
	top: 0;
	left: 10px;
}
.mono .sec-card ul:nth-child(2)::before{
	content: "02";
}
.mono .sec-card ul:nth-child(3)::before{
	content: "03";
}
.mono .sec-card ul:nth-child(4)::before{
	content: "04";
}



.sec-card ul .title{
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 3rem;
	line-height: 1.2;
}
.mono .sec-card ul .ph{
	margin-bottom: 10px;
}

.mono .sec-card .col04{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}


.sec-step.c-flex{
	justify-content: space-between;
}
.sec-step ul{
	width: calc((100% - 200px) / 5);
	position: relative;
}
.sec-step ul.last::after{
	display: none;
}
.sec-step ul::after{
	content: '';
	display: flex;
	align-items: center;
	position: absolute;
	right: -40px;
	top: 0;
	width: 30px;
	height: 100%;
	background: url(../img/common/arrow-right01.svg)no-repeat;
	background-position: center;
	background-size: contain;
}


.sec-step ul .icon-no{
	position: absolute;
	left: -24px;
	top: -24px;
	z-index: 1;
	max-width: 83px;
}

  .step-carousel .step-carousel__btn,
  .step-carousel .step-carousel__dots {
    display: none;
  }








@media screen and (max-width: 1179px) {






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


	.sec-step ul .icon-no{
		left: -20px;
		top: -20px;
		max-width: 50px;
	}
  .sec-card ul .title{
    font-size: 16px;
  }

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


	.sec-card ul{
		position: relative;
		background: var(--bg-main);
		width: calc((100% - 20px - 80px) / 2);
		padding: 20px;
	}
	.sec-step ul .icon-no{
		left: -15px;
		top: -30px;
		max-width: 100px;
	}
  .mono .sec-card .col04 {
      justify-content: center;
      gap: 20px;
  }
  .mono .sec-card .col04 ul:last-child{
    margin-bottom: 0;
  }



/**************/
  .step-carousel {
    position: relative;
    
  }
  .sec-step ul::after{
  	display: none;
  }

  .sec-step.c-flex {
    display: flex;
    overflow-x: auto;
    gap: 30px;
    padding-top: 30px;
    padding-right: 15px;
    padding-inline: 10%;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 10%;
    -webkit-overflow-scrolling: touch;
  }

  .sec-step.c-flex::-webkit-scrollbar {
    display: none;
  }

 	.sec-step.c-flex > ul {
    flex: 0 0 80%;
    scroll-snap-align: center;
  }

  .sec-step.c-flex img {
    width: 100%;
    height: auto;
    display: block;
  }

  .step-carousel .step-carousel__btn {
  	display: block;
    position: absolute;
    top: 50%;
    z-index: 2;
    width: 30px;
    height: 65px;
    padding: 6px;
    border: none;
    border-radius: 2px;
    background: rgba(0, 0, 0, 1);
    color: #fff;
    font-size: 28px;
    line-height: 1;
    transform: translateY(-50%);
  }

  .step-carousel__btn.prev {
    left: 8px;
  }

  .step-carousel__btn.next {
    right: 8px;
  }
  .step-carousel__btn.prev img{
  	transform: scale(-1, 1);
  }

  .step-carousel__btn:disabled {
    opacity: 0.35;
  }

  .step-carousel .step-carousel__dots {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 30px;
  }

  .step-carousel__dots button {
    width: 15px;
    height: 15px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--glass-20);
  }

  .step-carousel__dots button.is-active {
    background: var(--color-main);
  }







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


    .sec-step ul .icon-no {
        left: -15px;
        top: -30px;
        max-width: 70px;
    }
  .sec-card ul .title{
    font-size: 14px;
  }


}