@charset "utf-8";
section {
    .wrap {
        padding-bottom: 90px;
		.contents {
            h1 {
                font-size:1.6rem;
                font-weight:500;
                letter-spacing:.1em;
                line-height:1.5;
                margin-bottom:2em;
                span{
                    font-size:4.2rem;
                    margin-right: 0.5em;
                }
            }
        }
    }
}
#mv {
	.wrap {
		.contents {
			position: relative;
			.contents_inner {
				display:grid;
				grid-template-columns:42.5% 1fr;
				aspect-ratio:2.3;
				.slider_wrap {
					position:relative;
				}
				.detail{
					display: grid;
					grid-gap: 20px;
					align-content: start;
					padding: 40px;
					h1{
						font-size: 3.0rem;
						line-height: 1.8;
					}
					p{
						font-size: 1.8rem;
					}
				}
			}
			.name{
				background-color: #027A36;
				color: #fff;
				display: inline-block;
				font-size: 4.8rem;
				font-weight: 700;
				letter-spacing: 0.02em;
				padding: 0.5em 1em;
				line-height: 1;
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				bottom: 0.5em;
				z-index: 2;
			}
			.slider {
				position:absolute;
				z-index:0;
				left:0;
				top:0;
				width:100%;
				height:100%;
				.slick-list {
					overflow: visible;
				}
				.slide {
					img {
						display: block;
						width:100%;
						height:100%;
						object-fit:cover;
					}
				}
			}
			.detail {
				position:relative;
				z-index:2;
				background-color:#E5E5E5;
			}
		}
	}
}
#banner{
	.wrap{
		.contents{
			max-width: 1920px;
			.contents_inner{
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				a{
					dl{
						position: relative;
						&::before{
							content:"";
							border: #fff 2px solid;
							position: absolute;
							top:50%;
							left:50%;
							transform: translate(-50%, -50%);
							width: 97%;
							height: 90%;
							z-index: 2;
						}
						dt{
							font-size: 3.0rem;
							position: absolute;
							top:50%;
							left:50%;
							transform: translate(-50%, -50%);
							color: #fff;
							text-shadow: 3px 4px 3px rgb(61 70 70);
						}
						dd{
							img{
								filter: brightness(.8);
							}
						}
					}
				}				
			}
		}
	}
}
#event{
	.wrap{
		.contents{
			.contents_inner{
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				a{
					.event_box{
						border-top: #B9B9B9 solid 1px;
						border-left: #B9B9B9 solid 1px;
						padding: 20px;
						display: grid;
						grid-template-columns: 155px 1fr;
						grid-gap: 40px;
						align-items: center;
						background-color: #fff;
						position: relative;
						.detail{
							display: grid;
							grid-gap: 1.2em;
							
							dt{
								font-size: 2.2rem;
								font-weight: 500;
								margin-top: 1em;
							}
							.text{
								line-height: 1.6;
							}
							.date{
								font-size: 1.4rem;
								position: absolute;
								top:0em;
								right: 0em;
								letter-spacing: 0.1em;
								background-color: #444;
								color: #fff;
								padding: 0.3em 0.7em 0.5em;
								animation: blink 1s infinite;
							}				
						}
						&::after{
							content: "";
							background-image: url(../img/common/arrow_01.svg);
							position: absolute;
							right:0.5em;
							bottom:0.5em;
							width: 20px;
							height: 20px;
						}
					}
					&:nth-child(2n){
						.event_box{
							border-right: #B9B9B9 solid 1px;
						}						
					}
					&:nth-child(3),&:nth-child(4){
						.event_box{
							border-bottom: #B9B9B9 solid 1px;
						}
					}
					&:nth-child(2),&:nth-child(3){
						.event_box{
							background-color: #F2F2F2;
						}
					}
				}								
			}
		}
	}
}			
@keyframes blink {
	0%, 100% {
		background-color:#ff9900;
	}
	50% {
		background-color:#ff6600;
	}
}
#course{
	.wrap{
		.contents{
			.contents_inner{
				display: grid;
				grid-template-columns: repeat(4, 1fr);
				grid-gap: 20px;
				.course{
                    background-color: #8FBE10;
                    height: 170px;
                    position: relative;
					.text{
						position: absolute;
						bottom:-4em;
						left:0;
						line-height: 1.6;
					}
                    dt{
                        z-index: 2;
                        .en{
                            position: absolute;
                            right: 0;
                            top: 0;
                            font-size: 7rem;
                            color: #fff;
                            opacity: 0.5;
                            font-weight: 700;
							z-index: 2;
                        }
                        .jp{
                            font-size: 1.8rem;
                            color: #fff;
                            position: absolute;
                            top:65%;
                            transform: translateY(-50%);
                            left:55%;
							line-height: 1.6;
                        }
                    }
                    &::after {
                        content: "";
                        display: block;
                        background-image: url(../img/top/course_01.jpg);
                        background-position: center;
                        background-size: cover;
                        position: absolute;
                        z-index: 1;
                        top: 0;
                        left: 0;
                        width: 50%;
                        height: 100%;
                    }
                    &.course_02{
                        background-color: #EABC3F;
                        &::after {
                            background-image: url(../img/top/course_02.jpg);
                        }
                    }
                    &.course_03{
                        background-color: #6B91C2;
                        &::after {
                            background-image: url(../img/top/course_03.jpg);
                        }
                    }
                    &.course_04{
                        background-color: #C26BB1;
                        &::after {
                            background-image: url(../img/top/course_04.jpg);
                        }
                    }
                    &.course_05{
                        background-color: #027A36;
                        &::after {
                            background-image: url(../img/top/course_05.jpg);
                        }
                    }
                }
			}
			a.btn{
				margin-top: 100px;
			}
		}
	}
}
#news{
	.wrap{
		.contents{
			.contents_inner{
				display: grid;
				grid-template-columns: 25% 1fr;
				grid-gap: 40px;
				.news_box{
					display: grid;
					grid-gap: 1.5em;
					dl{
						display: grid;
						grid-template-columns: 6em 1fr;
						grid-gap: 2em;
					}
				}				
			}
		}
	}
}
@media (hover:hover) {

	*#banner{
		.wrap{
			.contents{
				max-width: 1920px;
				.contents_inner{
					display: grid;
					grid-template-columns: repeat(3, 1fr);
					a{
						opacity: 1;
						&:hover{
							dd{
								img{
									filter: brightness(.9);	
									transition: .3s;							
								}
							}
						}						
					}
				}
			}
		}
	}

}

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

}

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

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

}