:root{
   font-size: 16px;
   font-weight: 400;

}
*{
   margin: 0;
   box-sizing:content-box;
   


}

/* carousel */
.carousel{
   position: relative;
   
   
}

.carousel_inner{
   width: 100%;
   overflow: hidden;
   border-radius:10px;
}

.carousel_inner::after{
   content: "";
   display: block;
   clear: both;
   border-radius:10px;
}

.carousel_item{
   position: relative;
   float: left;
   display: none;
   width: 100%;
   height: 85%;
   margin-right: -100%;
   
}

/* slide effect */
.carousel_item__active,
.carousel_item__pos_prev,
.carousel_item__pos_next{
   display: block;
}

.carousel_item__pos_prev{
   left: -100%;
}

.carousel_item__pos_next{
   left: 100%;
}

.carousel_item__prev{
   transform: translateX(100%);
   transition: transform .5s ease-in-out;
}

.carousel_item__next{
   transform: translateX(-100%);
   transition: transform .5s ease-in-out;
}

/* fade effect */
.carousel__fade .carousel_item__pos_prev,
.carousel__fade .carousel_item__pos_next{
   left: 0;
   opacity: 0;
}

.carousel__fade .carousel_item__prev,
.carousel__fade .carousel_item__next{
   transform: none;
   opacity: 1;
   transition: opacity .5s ease-in-out;
}

.carousel__fade .carousel_item__active.carousel_item__prev,
.carousel__fade .carousel_item__active.carousel_item__next{
   opacity: 0;
}

/* carousel */
.carousel_img{
   display: block;
   width: 98%;
   border-radius:10px;
}

.carousel_caption{
	position: absolute;
	top: 169px;
	left: 2px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 633px;
	height: 93px;
	padding: 3rem 4rem;
	text-align: center;
	color:#03e4ff;
	font-family:"UD Digi Kyokasho NP-B";
	z-index: 1;
}

.carousel_title{
   color:#03e4ff;
	font-family:"UD Digi Kyokasho NP-B";
   font-size:24px;
   font-weight: 300;
}

.carousel_description{
   margin-top: .75rem;
   line-height: 150%;
   font-size:24px;
}

.carousel_indicator{
	position: absolute;
	bottom: 6px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	flex-direction: row;
	gap: .5rem;
	z-index: 1;
}

.carousel_dot{
   display: block;
   padding: .25rem;
   background-color: rgba(255, 255, 255, .25);
   border: none;
   border-radius: 50%;
   cursor: pointer;
   transition: background-color .5s ease-in-out;
}

.carousel_dot__active{
   background-color: lightskyblue;
   cursor: default;
   pointer-events: none;
}

.carousel_control{
   position: absolute;
   top: 0;
   left: 0;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   width: 100%;
   height: 100%;
}

.carousel_button{
   display: block;
   padding-inline: 1rem;
   font-family: "Raleway", sans-serif;
   font-size: 1.375rem;
   background-color: transparent;
   color: rgba(255, 255, 255, .25);
   border: none;
   cursor: pointer;
   transition: color .25s;
   z-index: 1;
}

.carousel_button:hover{
   color: rgba(135, 206, 250, .75);
}