page_loaded .appear_item_active {
    transition: opacity 1s ease, transform 0.8s ease-out;
}
.container2 {
	/* 
	display: flex; 
	flex-wrap: wrap;
    gap: 38px;
    justify-content: start;
	*/
	
  display: flex; /* flexboxを有効にする */
  flex-wrap: wrap; /* 要素が折り返すように設定 */
  justify-content: flex-start; /* 要素をコンテナの開始位置（左側）に揃える */
  /* width: 300px; */ /* 例: コンテナの幅 */
  margin-left: 20px;

}
.school_cont {
    display: flex;
    gap: 15px;
    align-items: flex-start;
    margin-bottom: 90px;
}

.top_contents_item {
  /* 要素の幅を3分の1に設定する */
  flex-basis: calc(90% / 3); /* 3カラムにするための幅設定 */
  /* width: calc(100% / 3); */ /* flex-basisの代わりにも使える */
  height: 320px; /* 要素の高さ（例）*/
  margin: 18px;
  box-sizing: border-box;

}
.appear_item_active {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 1s ease;
}

.column {
	padding: 5px;
	box-sizing: border-box;
}

.top_contents_ico {
    position: absolute;
    top: -34px;
    left: calc(50% - 34px);
    width: 68px;
    height: 68px;
    padding: 10px;
    background-color: #000;
    border-radius: 50%;
    z-index: 3;
}

.abo_tit{
	font-size: 18px;
	font-weight: 500;
	min-height: 58px;
}

.abo_let{
    font-size: 0.9rem;
}


@media (min-width: 768px) and (max-width: 1179px) {
	.top_contents_item {
	  /* 要素の幅を3分の1に設定する */
	  /*flex-basis: calc(85% / 3); */ /* 3カラムにするための幅設定 */
	  /* width: calc(100% / 3); */ /* flex-basisの代わりにも使える */
	  height: 290px; /* 要素の高さ（例）*/
	  margin: 18px;
	  box-sizing: border-box;
	}
	.container2 {
	    display: flex;
	    flex-wrap: wrap;
	    justify-content: flex-start;
	    /* width: 300px; */
	    margin-left: 0px;
	}
}

/* タブレット横対応 */
@media (min-width: 1025px) and (max-width: 1366px) {
	.container2 {
	    display: flex;
	    flex-wrap: wrap;
	    justify-content: flex-start;
		gap: 50px;
		margin-left: 0px;
	}
	.top_contents_item {
	    /*flex-basis: calc(80% / 3);*/
	     width: calc(100% / 3); 
	    height: 320px;
	    margin: 0;
	    box-sizing: border-box;
	}
	.about_training_flex {
	    display: flex;
	    gap: 30px;
	    margin-bottom: 50px;
	    flex-wrap: wrap;
  	    flex-basis: calc(100% / 2);
  	    justify-content: space-evenly;
    }
	.school_cont {
	    display: flex;
	    gap: 15px;
	    align-items: flex-start;
	    margin-bottom: 90px;
	}
}




/* タブレット縦対応 */
@media (min-width: 768px) and (max-width: 1023px) {
    .column {
        flex: 31%;
    }
	.about_training_flex {
	    display: flex;
	    gap: 30px;
	    margin-bottom: 50px;
	    flex-wrap: wrap;
  	    justify-content: space-evenly;
	}
	.about_training_flex img{
	    width: 370px;
	}
	.school_cont {
	    display: block;
	    gap: 50px;
	    /*text-align: center;*/
	    margin-bottom: 90px;
	    margin-left: 20px;
	    margin-right: 20px;
	}
}



@media (max-width: 767px) { /* Adjust breakpoint as needed */
	.column {
		flex: 100%; /* Makes columns take up full width on smaller screens */
	}
	.top_contents_item {
	    position: relative;
	    margin: 10px auto 0;
	    max-width: 500px;
	    height: 270px;
	}
	.top_contents_ico {
	    position: absolute;
	    top: -34px;
	    left: calc(50% - 34px);
	    width: 50px;
	    height: 50px;
	    padding: 10px;
	    background-color: #000;
	    border-radius: 50%;
	    z-index: 3;
	}
}


@media print, screen and (min-width: 1000px) {
    .top_contents_item span {
        padding: 30px;
    }
}
@media print, screen and (min-width: 768px) {
    .top_contents_item span {
        position: relative;
        height: 100%;
        transition: transform 0.25s ease-out, box-shadow 0.25s ease-out;
    }
}
.top_contents_item span {
    position: relative;
    display: block;
    padding: 15px;
    z-index: 2;
    background-color: #fbfbfb;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
}


/* width 768対応　*/
@media screen and (max-width: 767px) {
	.image-carousel {
	    background-position: 50%;
	    background-repeat: no-repeat;
	    background-size: cover;
	    margin: 30px 0 65px;
	}

}


@media print, screen and (min-width: 768px) {
    .top_contents_item span:before {
        content: '';
        position: absolute;
        display: block;
        top: 50%;
        left: 50%;
        width: calc(100% - 6px);
        height: calc(100% - 6px);
        background: linear-gradient(-45deg, #5351c0, #b54d6e, #f54c31);
        border-radius: 8px;
        opacity: 0;
        z-index: 1;
        transform: translate(-50%, -50%);
        transition: opacity 0.5s ease;
    }
}

.top_contents_img {
    position: relative;
    z-index: 1;
}

media print, screen and (min-width: 1000px) {
    .top_contents_title {
        padding: 85px 0 0;
    }
}
@media print, screen and (min-width: 768px) {
    .top_contents_title {
        transition: transform 0.32s ease-out, text-shadow 0.2s ease;
    }
}
@media print, screen and (min-width: 768px) {
    .top_contents_title {
        padding: 70px 0 0;
    }
}
.top_contents_title {
    position: relative;
    text-align: center;
    padding: 20px 0 0;
    z-index: 2;
}

@media print, screen and (min-width: 1000px) {
    .top_contents_item:not(.top_contents_large) .top_contents_ico {
        left: calc(50% - 62px);
        top: -62px;
    }
}
@media print, screen and (min-width: 768px) {
    .top_contents_item:not(.top_contents_large) .top_contents_ico {
        left: calc(55% - 50px);
        top: -30px;
    }
}
@media print, screen and (min-width: 768px) {
    .top_contents_item .top_contents_ico {
        transform: scale(1) translateY(0);
        transition: transform 0.28s ease-out, box-shadow 0.2s ease;
        box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.2);
    }
}
@media print, screen and (min-width: 1000px) {
    .top_contents_ico {
        width: 124px;
        height: 124px;
        padding: 20px;
    }
}
@media print, screen and (min-width: 768px) {
    .top_contents_ico {
        width: 30px;
        height: 30px;
        padding: 15px;
    }
}


/* slick */
.page-template--home .image-carousel {
    background-image: none !important;
}
@media (min-width: 900px) {
    .image-carousel {
        margin: 0 0 100px;
    }
}
.image-carousel {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    margin: 0 0 65px;
}

@media (min-width: 900px) {
    .image-carousel__inner {
        padding-left: 30px;
        padding-right: 30px;
    }
}
.image-carousel__inner {
    margin: 0 auto;
    padding: 0 24px;
    width: 100%;
}