@charset "utf-8";

h2{
	display: grid;
	grid-template-rows: auto;
	justify-items: center;
	grid-row-gap: 1em;
	margin-bottom:70px;
	img{
		width:2.5em;
		margin-bottom: 1em;
	}
	span{
		font-size: 3.2rem;
		letter-spacing: .5em;
		font-weight: 400;
	}
	span.english{
		color: #FF9F2F;
		font-size: 1.8rem;
		font-weight: 600;
		letter-spacing: 0.1em;
	}
}
h3{
	font-size: 2.8rem;
	letter-spacing: 0.3em;
	font-weight: 400;
	line-height: 1.6;
	text-align: center;
	margin-bottom: .5em;
}
#mv {
	.wrap {
		padding: 0;
        width: 100%;
        background: url(../img/top/mv.jpg) no-repeat top center / cover;
		overflow: hidden;
		.contents {
			margin:0 auto;
			width: 100%;
			max-width: 100%;
			position: relative;
			height: 640px;
			.title{
				display:inline-block;
				position:absolute;
				bottom:0;
				left:50%;
				padding-bottom: 2em;
				z-index: 1;
				&::after{
					content: "";
                    background-color: #ffffff9c;
                    position: absolute;
                    display: inline-block;
                    border-radius: 50%;
                    width: 130%;
                    height: 260%;
                    z-index: -1;
                    bottom: -120%;
                    left: 45%;
                    transform: translateX(-50%);
				}
				h1{
					font-size: 2.8rem;
					font-weight: 400;
					line-height: 1.6;
					margin-bottom: 1em;
					letter-spacing: 0.3em;
				}
				p.copy{
					line-height: 2;
					letter-spacing: 0.2em;
				}
			}
			
		}
	}
}
#news{
	.wrap{
		background-color: #F8F8F8;
		.contents{
			.contents_inner{
				display: grid;
				grid-template-columns: repeat(4, 1fr);
				grid-column-gap: 30px;
				dl{
					border-radius: 20px;
					background-color: #fff;
					height: 260px;
					box-shadow: 0 0 2px gray;
					position: relative;
					&::after{
                        content:"";
                        position: absolute;
                        bottom: 0.5em;
                        right: 1em;
                        display: inline-block;
                        background-image: url('../img/common/icon_arrow_orange.svg');
                        background-size: contain;
                        background-repeat: no-repeat;
                        width: 7px;
                        height: 20px;
                        z-index: 2;
                    }
					dt{
						line-height: 1.5;
						padding: 1em;						
						font-size:1.6rem;
					}
					dd{
						padding: 0 1em 1em;
						font-size:1.4rem;
						&.img{
							padding: 0;
							border-radius: 20px 20px 0 0;
							img{
								border-radius: 20px 20px 0 0;
							}
						}
					}
				}
			}
		}
	}
}
#about{
	.wrap{
		position: relative;
		img.about1{
			position: absolute;
			display: inline-block;
			top:5%;
			right:calc(50vw + 400px);
			width:500px;
			height: auto;
		}
		img.about2{
			position: absolute;
			display: inline-block;
			bottom:5%;			
			left:calc(50vw + 450px);
			width:500px;
			height: auto;
		}
		overflow: hidden;
		.contents{
			.contents_inner{
				margin: 0 auto;
				max-width: 800px;
				p{
					border-bottom: #FF9F2F dotted 5px;
					padding: 2em 0;
					&:first-child{
						padding-top: 0;
					}
					&:last-child{
						padding-bottom: 0;
						border-bottom: none
					}
					
				}
			}
		}
	}
}
#curriculum{
	.wrap{
		background-color: #FCF6EC;
		.contents{
			.contents_inner{
				display: grid;
				grid-template-columns: repeat(3, auto);
				grid-column-gap: 100px;
				.curriculum_box{
					position: relative;
					dt{
						z-index: 1;
						position: absolute;
						display:inline-block;
						top:0;
						left: 50%;
						transform: translateX(-50%);
						h3{
							font-size: 2.0rem;
							color: #fff;
							background-color: #FF9F2F;
							width: 13em;
							text-align: center;
							padding:0.6em 1.2em;
							border-radius: 15px;	
						}
					}
					.img{
						img{
							border-radius: 50%;
							border: #FF9F2F solid 5px;
						}
					}
					.text{
						background-color: #fff;
						padding:1.5em 2em;
						border-radius: 20px;
						line-height: 1.8
					}
				}
			}
		}
	}
}
#program{
	.wrap{
		.contents{
			p{
				margin-bottom: 50px;
				text-align: center;
			}
			a.btn{
				width: 18em;
				position: relative;
				padding-left: 2em;
				&::before{
					position: absolute;
					content:"";
					top: 50%;
					transform: translateY(-50%);
					left:1em;
					width: 20px;
					height: 20px;
					background-image:url("../img/common/icon_contact.svg");
					background-size: contain;
					background-repeat: no-repeat;
				}
			}
			.contents_inner{
				display:grid;
				grid-template-columns: auto 1fr;
				grid-column-gap: 50px;
				margin-bottom:70px;
				&:has(+ .btn){
					margin-bottom:0;
				}
				.img{
					width: 240px;
					img{
						border-radius:20px;						
					}
				}
				.detail{
					h4{
						color: #FF9F2F;
						font-size: 2.4rem;
						line-height: 1.6;
						margin-bottom: 0.7em;
						padding-bottom: 0.5em;
						border-bottom: #FF9F2F dotted 3px;
						font-weight: 500;
					}
					p{
						text-align: left;
					}
				}
			}
		}
	}
}
#schedule{
	.wrap{
		background-color: #F8F8F8;
		.contents{
			.contents_inner{
				background-color: #fff;
				padding: 2em;
				border-radius: 20px;
				border: solid 5px #D6D3D3;
				margin-bottom: 30px;
				position: relative;
				&:last-child{
					margin-bottom: 0;
				}
				h3{
					color: #FF9F2F;
					font-size: 2.0rem;
					line-height: 1.6;
					text-align: left;
					margin-bottom: 1.5em;
					font-weight: 500;
				}
				.schedule_box{
					display: grid;
					grid-row-gap: 3em;
					dl{
						display: grid;
						grid-template-columns: auto 1fr;
						grid-column-gap: 4em;
						position: relative;
						dt{
							font-size: 1.8rem;
						}
						dd{
							font-size: 1.8rem;
						}
						&::after{
							content: "";
							background-color: #D6D3D3;
							width: 3px;
							height: 4em;
							display: inline-block;
							position: absolute;
							left: 5em;
							top:0.5em;
						}
						&:last-child{
							&::after{
								display: none;
							}
						}
						&::before{
							content: "";
							background-color: #FF9F2F;
							width: 1em;
							height: 1em;
							display: inline-block;
							position: absolute;
							left: 4.6em;
							top:0.3em;
							border-radius: 20px;
							z-index: 2;
						}
					}
				}
				&::after{
					content: "";
					width: 150px;
					height: 200px;
					background-image:url("../img/top/schedule_01.png");
					background-size: contain;
					background-repeat: no-repeat;
					position: absolute;
					top: 60%;
					transform: translateY(-50%);
					right:30px;
				}
				&.ver2{
					&::after{
						background-image:url("../img/top/schedule_02.png");
					}
				}
			}
		}
	}
}
#information{
	.wrap{
		background-color: #FCF6EC;
		.contents{
			margin-bottom:70px;
			&:last-child{
				margin-bottom:0px;
				h3{
					margin-bottom: .5em;
				}
			}
			h3{
				margin-bottom: 50px;
			}
			p{
				text-align: center;
			}
			.contents_inner{
				display: grid;
				grid-template-columns: repeat(4, auto);
				grid-column-gap: 30px;
				/*margin-bottom: 70px;*/
				.info_box{
					border:solid #FF9F2F 3px;
					border-radius: 30px;
					position: relative;
					padding: 40px 20px 20px;
					display:grid;
					justify-items: center;
					grid-row-gap: 0.5em;
					background-color: #fff;
					position: relative;
					&::after{
						content:"";
						position: absolute;
						background-image:url("../img/common/icon_arrow_orange.svg");
						width: 13px;
						height: 23px;
						top: 50%;
						transform: translateY(-50%);
						right:-1.5em;
						background-repeat: no-repeat;
						background-position: center;
    					background-size: contain;
					}
					&:last-child{
						&::after{
							display: none;							
						}
					}
					dt{
						color: #FF9F2F;
						font-size: 2.2rem;
					}
					dd{
						line-height: 1.6;
					}
					.number{
						position: absolute;
						display: inline-block;
						left: 50%;
						transform: translateX(-50%);
						top:-0.7em;
						font-size: 3.2rem;
						background-color: #FF9F2F;
						border-radius: 50%;
						width: 1.5em;
						height: 1.5em;
						color:#fff;
						font-weight: 500;
						text-align: center;
						padding-top: 0.25em;
						line-height: 1;
					}
					.img{
						width: 4em;
					}
				}
			}
			.price_box{
				background-color: #fff;
				padding: 2em;
				border-radius: 20px;
				width: 100%;
				max-width: 800px;
				margin: 30px auto;
				dl{
					display: grid;
					grid-template-columns: 1fr 10em;
					padding: 0.7em;
					border-bottom: dotted 2px #CCCCCC;
					&:first-child{
						padding-top: 0;
					}
					&:last-child{
						padding-bottom: 0;
						border-bottom: none;
					}
					dt{
						line-height: 1.6;
					}
					dd{
						line-height: 1.6;
					}
				}
			}
			.coution{
				li{
					line-height: 2;
					font-size: 0.9em;
				}
			}
		}
	}
}
#access{
	.wrap{
		.contents{
			h2{
				img{
					width:2.2em;
				}
			}
			.contents_inner{
				display: grid;
				grid-template-columns: 1fr 60%;
				grid-column-gap: 50px;
				margin-bottom: 70px;
				.detail{
					display: grid;
                    grid-row-gap: 40px;
                    align-content: start;
					dl{
						display: grid;
						grid-template-columns: 60px 1fr;
						grid-column-gap: 30px;
						align-items: center;
						&:last-child{
							dd{
								background-color: #F4C200;								
							}
						}
						dd{
							background-color: #FF9F2F;
							padding: 5px;
						}
						dt{
							line-height: 1.8;
						}
					}
				}
			}
			&.map{
				width: 100%;
				max-width: 100%;
				iframe{
					width: 100%;
					height: 400px;
				}
			}
		}
	}
}
@media (hover:hover) {

	section {
		.wrap {
			.contents {
				&.masonry-wrap {
					.masonry-item {
						img {
							transition-duration:.3s;
						}
						h2 {
							transition-duration:.3s;
						}
						&:hover {
							img {
								filter:brightness(.33);
							}
							h2 {
								opacity:1;
							}
						}
					}
				}
			}
		}
	}
	
}

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

	h2{
		margin-bottom: 50px;
		img{
			width:2.2em;
			margin-bottom: 0.5em;
		}
		span{
			font-size: 2.8rem;
			letter-spacing: .3em;
		}
		span.english{
			font-size: 1.6rem;
		}
	}
	h3{
		font-size: 2.4rem;
		letter-spacing: 0.2em;
	}
	p{
		font-size: 1.5rem;
	}
	#mv {
		.wrap {
			.contents {
				height: 440px;
				.title{
					h1{
						font-size: 2.2rem;
					}
					p.copy{
						letter-spacing: 0.1em;
						font-size: 1.4rem;
					}
				}
				
			}
		}
	}
	#news{
		.wrap{
			.contents{
				.contents_inner{
					dl{
						height: 230px;
						dt{
							font-size:1.5rem;
						}
						dd{
							font-size:1.3rem;
						}
					}
				}
			}
		}
	}
	#about{
		.wrap{
			img.about1{
				right:calc(50vw + 300px);
				width:300px;
			}
			img.about2{	
				left:calc(50vw + 300px);
				width:300px;
			}
			.contents{
				.contents_inner{
					max-width: 550px;
				}
			}
		}
	}
	#curriculum{
		.wrap{
			.contents{
				.contents_inner{
					grid-column-gap: 50px;
					.curriculum_box{
						dt{
							h3{
								font-size: 1.8rem;
								width: 11em;
								text-align: center;
								padding:0.4em 1em;	
								border-radius: 10px;			
							}
						}
						.img {
							text-align: center;
							img {
								border: #FF9F2F solid 4px;
								width: 80%;
							}
						}
						.text{
							padding:1em 1.5em;
							font-size: 1.5rem;
						}
					}
				}
			}
		}
	}
	#program{
		.wrap{
			.contents{
				p{
					margin-bottom: 40px;
				}
				a.btn{
					&::before{
						top: 55%;
						transform: translateY(-50%);
					}
				}
				.contents_inner{
					grid-column-gap: 30px;
					margin-bottom:50px;
					.img{
						width: 200px;
					}
					.detail{
						h4{
							font-size: 2rem;
						}
						p{
							margin-bottom: 0;
						}
					}
				}
			}
		}
	}
	#schedule{
		.wrap{
			.contents{
				.contents_inner{
					padding: 1.5em;
					.schedule_box{
						grid-row-gap: 2em;
						dl{
							position: relative;
							dt{
								font-size: 1.6rem;
							}
							dd{
								font-size: 1.6rem;
							}
							&::after{
								height: 3em;
							}
							&:last-child{
								&::after{
									display: none;
								}
							}
							&::before{
								top:0;
							}
						}
					}
					&::after{
						width: 130px;
						height: 180px;
					}
				}
			}
		}
	}
	#information{
		.wrap{
			background-color: #FCF6EC;
			.contents{
				margin-bottom:50px;
				&:last-child{
					margin-bottom:0px;
					h3{
						margin-bottom: .5em;
					}
				}
				h3{
					margin-bottom: 30px;
				}
				.contents_inner{
					.info_box{
						padding: 30px 15px 10px;
						grid-row-gap: 0.2em;
						dt{
							font-size: 2.0rem;
						}
						dd{
							font-size: 1.4rem;
						}
						.number{
							font-size: 2.8rem;
						}
						.img{
							width: 4em;
						}
					}
				}
				.price_box{
					padding: 1.5em;
					dl{
						padding: 0.5em;
						&:first-child{
							padding-top: 0;
						}
						&:last-child{
							padding-bottom: 0;
							border-bottom: none;
						}
					}
				}
			}
		}
	}
	#access{
		.wrap{
			.contents{
				h2{
					img{
						width:1.8em;
					}
				}
				.contents_inner{
					grid-column-gap: 30px;
					margin-bottom: 50px;
					.detail{
						grid-row-gap: 30px;
						dl{
							grid-column-gap: 30px;
						}
					}
				}
				&.map{
					iframe{
						height: 380px;
					}
				}
			}
		}
	}
}

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

	h2{
		margin-bottom: 40px;
		img{
			width:1.8em;
		}
		span{
			font-size: 2.4rem;
			letter-spacing: .2em;
		}
		span.english{
			font-size: 1.5rem;
		}
	}
	h3{
		font-size: 2rem;
		letter-spacing: 0.1em;
	}
	p{
		font-size: 1.4rem;
	}
	#mv {
		.wrap {
			.contents {
				height: 380px;
				.title{
					left:40%;
					h1{
						font-size: 1.8rem;
					}
					p.copy{
						font-size: 1.3rem;
					}
				}
				
			}
		}
	}
	#news{
		.wrap{
			.contents{
				.contents_inner{
					grid-template-columns: repeat(3, 1fr);
					dl{
						height: 220px;
						dt{
							font-size:1.4rem;
						}
						dd{
							font-size:1.2rem;
							&.img{
								img{
									width: 100%;
                                	height: 120px;
                               	object-fit: cover;
								}
							}								
						}
						/* &:last-child{						
								display: none;							
						} */
					}
					& > a {
						&:nth-child(n+4) {
							display: none;
						}
					}
				}
			}
		}
	}
	#about{
		.wrap{
			img.about1{
				right:calc(50vw + 220px);
				width:250px;
			}
			img.about2{	
				left:calc(50vw + 240px);
				width:250px;
			}
			.contents{
				.contents_inner{
					max-width: 450px;
					p {
						border-bottom: #FF9F2F dotted 3px;
						padding: 1em 0;
						&:first-child{
							padding-top: 0;
						}
						&:last-child{
							padding-bottom: 0;
						}
					}
				}
			}
		}
	}
	#curriculum{
		.wrap{
			.contents{
				.contents_inner{
					grid-column-gap: 30px;
					.curriculum_box{
						dt{
							h3{
								font-size: 1.6rem;
								width: 10em;		
							}
						}
						.img {
							img {
								border: #FF9F2F solid 3px;
								width: 90%;
							}
						}
						.text{
							padding:1em 1.3em;
							font-size: 1.4rem;
							line-height: 1.6;
						}
					}
				}
			}
		}
	}
	#program{
		.wrap{
			.contents{
				.contents_inner{
					.detail{
						h4{
							font-size: 1.8rem;
						}
						p{
							font-size: 1.4rem;
						}
					}
				}
			}
		}
	}
	#schedule{
		.wrap{
			.contents{
				.contents_inner{
					padding: 1.5em;
					h3{
						font-size: 1.8rem;
					}
					.schedule_box{
						grid-row-gap: 2em;
						dl{
							position: relative;
							dt{
								font-size: 1.6rem;
							}
							dd{
								font-size: 1.6rem;
							}
							&::after{
								height: 3em;
							}
							&:last-child{
								&::after{
									display: none;
								}
							}
							&::before{
								top:0;
							}
						}
					}
					&::after{
						width: 100px;
						height: 150px;
					}
				}
			}
		}
	}
	#information{
		.wrap{
			background-color: #FCF6EC;
			.contents{
				margin-bottom:40px;
				&:last-child{
					margin-bottom:0px;
					h3{
						margin-bottom: .5em;
					}
					p{
						text-align: left;
					}
				}
				h3{
					margin-bottom: 20px;
				}
				.contents_inner{
					.info_box{
						padding: 30px 10px 10px;
						grid-row-gap: 0.2em;
						border-radius: 20px;
						dt{
							font-size: 1.8rem;
						}
						dd{
							font-size: 1.4rem;
						}
						.number{
							font-size: 2.4rem;
						}
						.img{
							width: 3em;
						}
					}
				}
				.price_box{
					padding: 1em;
					margin: 20px auto;
					dl{
						padding: 0.5em;
						&:first-child{
							padding-top: 0;
						}
						&:last-child{
							padding-bottom: 0;
							border-bottom: none;
						}
						dt{
							font-size: 1.5rem;
						}
						dd{
							font-size: 1.5rem;
						}
					}
					
				}
				& .coution {
					li {
						line-height: 1.6;
						font-size: 0.8em;
					}
				}
			}
		}
	}
	#access{
		.wrap{
			.contents{
				h2{
					img{
						width:1.8em;
					}
				}
				.contents_inner{
					grid-template-columns: 1fr;
					grid-column-gap: 25px;
					margin-bottom: 50px;
					.detail{
						grid-template-columns: auto auto;
						grid-row-gap: 20px;
						grid-column-gap: 50px;
						justify-content: center;
						dl{
							grid-column-gap: 1em;
							margin-bottom: 30px;
							dt{
								font-size: 1.5rem;
							}
						}
						p{
							grid-area: 1/1/2/3;
							text-align: center;
						}
					}
					.img{
						max-width: 700px;
						margin: 0 auto;
					}
				}
				&.map{
					iframe{
						height: 340px;
					}
				}
			}
		}
	}
}

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

	h2{
		margin-bottom: 20px;
		grid-row-gap: 0.6em;
		span{
			font-size: 2rem;
			letter-spacing: .1em;
		}
		span.english{
			font-size: 1.4rem;
		}
	}
	h3{
		font-size: 1.8rem;
		letter-spacing: 0;
	}
	#mv {
		.wrap {
			.contents {
				height: 420px;
				.title{
					left:0;
					padding: 0 20px 20px;
					&::after {
						width: 130%;
						height: 250%;
					}
				}				
			}
		}
	}
	#news{
		.wrap{
			.contents{
				.contents_inner{
					grid-template-columns: repeat(2, 1fr);
					grid-column-gap: 20px;
					dl{
						height: 210px;
						dt{
							padding: 0.5em 1em 1em;
							font-size:1.4rem;
						}
						dd{
							font-size:1.2rem;
							&.img{
								img{
									width: 100%;
                                	height: 120px;
                               	object-fit: cover;
								}
							}								
						}
						/* &:nth-last-child(-n+2){						
								display: none;							
						} */
					}
					& > a {
						&:nth-child(n+3) {
							display: none;
						}
					}
				}
			}
		}
	}
	#about{
		.wrap{
			img.about1{
				display: none;
			}
			img.about2{	
				display: none;
			}
			.contents{
				.contents_inner{
					max-width: 100%;
					p {
						border-bottom: #FF9F2F dotted 2px;
					}
				}
			}
		}
	}
	#curriculum{
		.wrap{
			.contents{
				.contents_inner{
					grid-template-columns: 1fr;
					grid-column-gap: inherit;
					grid-row-gap: 30px;
					.curriculum_box{
						dt{
							h3{
								font-size: 1.5rem;
							}
						}
						.img {
							img {
								border: #FF9F2F solid 3px;
								width: 50%;
							}
						}
					}
				}
			}
		}
	}
	#program{
		.wrap{
			.contents{
				p {
                    margin-bottom: 20px;
                }
				.contents_inner{
					grid-template-columns: 1fr;
					justify-items: center;
					grid-row-gap: 20px;
					margin-bottom: 30px;
					.img{
						text-align: center;
						order: 2;
						img{
							width: 80%;
						}
					}
					.detail{
						order: 1;
						h4{
							font-size: 1.6rem;
						}
						p{
							font-size: 1.4rem;
						}
					}
				}
			}
		}
	}
	#schedule{
		.wrap{
			.contents{
				.contents_inner{
					padding: 1em;
					h3{
						font-size: 1.6rem;
						margin-bottom: 1em;
					}
					.schedule_box{
						grid-row-gap: 1em;
						dl{
							dt{
								font-size: 1.5rem;
							}
							dd{
								font-size: 1.5rem;
							}
							&::after{
								height: 2em;
							}
							&:last-child{
								&::after{
									display: none;
								}
							}
							&::before{
								top:0.2em;
								left: 4.75em;
								width: 0.7em;
								height: 0.7em;
							}
						}
					}
					&::after{
						display: none;
					}
				}
			}
		}
	}
	#information{
		.wrap{
			.contents{
				margin-bottom:30px;
				&:last-child{
					margin-bottom:0px;
				}
				.contents_inner{
					grid-template-columns: 1fr;
					grid-row-gap: 3em;
					.info_box{
						padding: 25px 15px 15px;
						grid-row-gap: 0.5em;
						grid-template-columns:6em 1fr;
						grid-column-gap: 1em;
						align-items: center;
						&::after {
							top: inherit;
                            bottom: -2em;
							right: inherit;
							left: 50%;
							transform: translateX(-50%) rotate(90deg);
						}
						dt{
							font-size: 1.6rem;
						}
						dd{
							font-size: 1.4rem;
							&:last-child{
								grid-area:1/2/3/3;
							}
						}
						.number{
							font-size: 2.2rem;
						}
					}
				}
				.price_box{
					dl{
						grid-template-columns: 1fr 6em;
						grid-column-gap: 1em;
						padding: 0.5em 0;
						&:first-child{
							padding-top: 0;
						}
						&:last-child{
							padding-bottom: 0;
						}
						dt{
							font-size: 1.4rem;
						}
						dd{
							font-size: 1.4rem;
						}
					}					
				}
				&.coution {
					li {
						font-size: 1.3rem;
					}
				}
			}
		}
	}
	#access{
		.wrap{
			.contents{
				h2{
					img{
						width:1.6em;
					}
				}
				.contents_inner{
					grid-template-columns: 1fr;
					grid-column-gap: inherit;
					grid-row-gap: 30px;
					margin-bottom: 30px;
					.detail{
						grid-template-columns: 1fr;
						dl{
							margin-bottom: 0;
							dt{
								font-size: 1.4rem;
							}
						}
						p{
							grid-area: inherit;
						}
					}
					.img{
						max-width: 100%;
					}
				}
				&.map{
					iframe{
						height: 300px;
					}
				}
			}
		}
	}
}

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


}