@charset "utf-8";

:root{
}

/*-----------------------------------------------------	*/
/*	for all						*/
/*-----------------------------------------------------	*/
	/*** main px ***/
	
	#top_img{
		width: min(1200px,calc(100% - 40px));
		margin:90px auto 0 auto;
		aspect-ratio: 2 / 1;
		background: url(grp/top_img.jpg);
		background-size: cover;
		background-position: center center;
		border-radius: 30px;
		@media (max-width: 600px) {
			aspect-ratio: 6 / 5;
			background: url(grp/top_img2.jpg);
			background-size: cover;
			background-position: center center;
		}
	}
	
	#breadcrumb{
		display:none;
	}
	
	#preamble{
		main{
			width:auto;
			margin:0 auto 0 auto;
			padding:0 0 0 0;
			> div:has(> section){
				padding:100px 0;
				> section{
					width:var(--container-width);
					margin:0 auto;
				}
			}
		}
	}

	#infobox{
		background:url(grp/gakusei.png) right 20px bottom 0 no-repeat,url(grp/hato.png) top 30px left 30px no-repeat;
		> section{
			h2{
			}
			ul{
				width:min(680px,100%);
				margin:0 auto;
				border-bottom:1px dotted silver;
				li{
					text-align: left;
					padding:1.3em .5em;
					border-top:1px dotted silver;
					time{
						font-size: .9em;
						margin:0 .5em 0 0;
					}
					> a{
						font-size: .8em;
						background:#eee;
						padding:.1em .5em;
						border-radius: 5px;
						display:inline-block;
						color:rgb(var(--baceFontColor));
						&:hover{
							background:rgb(var(--baceFontColor));
							color:white;
						}
					}
					p{
						margin:.3em auto 0 auto;
						a{
							color:rgb(var(--baceFontColor));
							text-decoration: underline;
							text-underline-offset: .2em;
							&:hover{
								text-decoration: none;
							}
						}
					}
				}
			}
			aside{
				width:min(680px,100%);
				margin:30px auto 0 auto;
				text-align: right;
				> a{
					display:inline-block;
					padding:.3em .7em;
					background:#587845;
					border-radius: 10px;
					color:white;
					svg{
						margin:0 0 0 .2em;
						vertical-align: -2px;
					}
					&:hover{
						background:rgb(var(--baceFontColor));
						color:white;
					}
				}
			}
		}
		@media (max-width: 800px) {
			background:url(grp/gakusei.png) right 20px bottom 0 no-repeat,url(grp/hato_s.png) top 30px left 30px no-repeat;
		}
	}

	#yume{
		width: 100%;
		padding:30px 0;
		aspect-ratio: 2 / 1;
		background: url(grp/yume.jpg);
		background-size: cover;
		background-position: center center;
		align-items: center;
		vertical-align: middle;
		> section{
			display:grid;
			grid-template-columns:repeat(2,1fr);
			height:100%;
			align-items: center;
			> div{
				&:nth-of-type(2){
					p{
						margin:20px auto 0 auto;
						text-align: left;
						color:white;
						font-weight: 500;
					}
				}
			}
		}
		@media (max-width: 800px) {
			width:auto;
			aspect-ratio: auto;
			background:#62922e;
			> section{
				display:grid;
				grid-template-columns: repeat(auto-fill,minmax(min(300px,100%),1fr));
				gap:20px;
				> div{
					&:nth-of-type(1){
						aspect-ratio: 4 / 3;
						background: url(grp/yume.jpg);
						background-size: cover;
						background-position: center center;
						align-items: center;
						vertical-align: middle;
						border-radius: 10px;
					}
					&:nth-of-type(2){
						margin:30px auto 0 auto;
					} 
				}
			}
		}
	}
	
	#gakka{
		background:url(grp/dotted.png),#fff8e3;
		> section{
			div.gakka{
				display:grid;
				grid-template-columns: 230px 1fr;
				align-items: center;
				h3{
					font-family: var(--font-family-minchou);
					--clamp-max: 35;
					--clamp-min: 27;
					font-size: var(--clamp);
					font-weight: 500;
				}
				> ul{
					display:grid;
					grid-template-columns: repeat(auto-fill,minmax(min(250px,100%),1fr));
					gap:.5em 1em;
					li{
						text-align: left;
						a{
							display:block;
							background:white;
							border:1px solid silver;
							border-radius: 10px;
							font-size: .9em;
							padding:.5em 20px .5em 10px;
							color:rgb(var(--baceFontColor));
							position:relative;
							&::after{
								display: inline-block;
            		content: "";
            		background-color: rgb(var(--baceFontColor));
        
            		-webkit-mask-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="currentColor" stroke-width="2" class="ai ai-CircleChevronRightFill"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 1C5.925 1 1 5.925 1 12s4.925 11 11 11 11-4.925 11-11S18.075 1 12 1zM9.793 8.707a1 1 0 0 1 1.414-1.414l4 4a1 1 0 0 1 0 1.414l-4 4a1 1 0 0 1-1.414-1.414L13.086 12 9.793 8.707z"/></svg>');
            		-webkit-mask-size: contain;
            		mask-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="currentColor" stroke-width="2" class="ai ai-CircleChevronRightFill"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 1C5.925 1 1 5.925 1 12s4.925 11 11 11 11-4.925 11-11S18.075 1 12 1zM9.793 8.707a1 1 0 0 1 1.414-1.414l4 4a1 1 0 0 1 0 1.414l-4 4a1 1 0 0 1-1.414-1.414L13.086 12 9.793 8.707z"/></svg>');
            		mask-size: contain;
            		mask-repeat: no-repeat;
        
            		height: 1.3em;
            		width: 1.3em;

								position: absolute;
								right:10px;
								top:50%;
								margin-top:-.65em;
							}
							&:hover{
								color:rgb(var(--mainColor));
								&::after{
									background:rgb(var(--mainColor));
								}
							}
						}
					}
				}
			}
			aside{
				margin:150px auto 0 auto;
				background:#ffe4d2;
				padding:30px;
				border-radius: 15px;
				position:relative;
				ul{
					display:flex;
					justify-content: center;
					flex-wrap:wrap;
					gap:20px;
					li{
						width:min(380px,100%);
						a{
							&:hover{
								img{
									opacity: .75;
								}
							}
						}
					}
				}
				&::before{
					content:url(grp/img_sensei.png);
					position:absolute;
					left:30px;
					top:-62px;
				}
				&::after{
					content:url(grp/img_gakusei.png);
					right:30px;
					top:-116px;
					position:absolute;
				}
			}
		}
		@media (max-width: 800px) {
			> section{
				div.gakka{
					display:block;
					> ul{
						margin:30px auto 0 auto;
					}
				}
				aside{
					&::before{
						left:0;
					}
					&::after{
						right:0;
					}
				}
			}
		}
	}

	#voice{
		section{
			width:100% !important;
			h2{
				&::before{
					content:url(grp/leef1.png);
					vertical-align: -5px;
					margin:0 .5em 0 0;
				}
				&::after{
					content:url(grp/leef2.png);
					margin:0 0 0 .5em;
					vertical-align: -5px;
				}
			}
			ul{
				li{
					background:white;
					height:100%;
					border-radius: 10px;
					overflow: hidden;
					a{
						display:block;
						color:#666;
						padding-bottom:15px;
						figure{
							aspect-ratio: 4 / 3;
							width:100%;
							position:relative;
							overflow: hidden;
							img{
								min-width:100%;
								min-height:100%;
								object-fit: cover;
								position: absolute;
								top: 50%;
								transform: translate(0%, -50%);
							}
						}
						> * + *{
							margin:.3em 15px;
						}
						p{
							&:nth-of-type(1){
								text-align: left;
								font-size: .8em;
								margin-top:15px;
							}
							&:nth-of-type(2){
								
								text-align: left;
								font-size: .8em;
							}
							&:nth-of-type(3){
								text-align: left;
								font-weight: 500;
								color:rgb(var(--baceFontColor));
							}
							&:nth-of-type(4){
								text-align: right;
								font-size: .8em;
							}
						}
						&:hover{
							figure{
								img{
									opacity: .75;
								}
							}
						}
					}
				}
			}
		}
	}

	.slider {/*スライダー*/
		margin: 0 auto;
	
		.slick-slide {
			margin: 0 10px;
		}
		.slick-list{
			z-index: 5;
		}
		.slick-prev,
		.slick-next {
			z-index: 10;
			position: absolute;
			top: 40%;
			cursor: pointer;
			outline: none;
			border-top: 2px solid #666;
			border-right: 2px solid #666;
			height: 15px;
			width: 15px;
	
			&.slick-prev {
				left: 1.5%;
				transform: rotate(-135deg);
			}
	
			&.slick-next {
				right: 1.5%;
				transform: rotate(45deg);
			}
		}
	
		.slick-dots {
			text-align: center;
			margin: 40px 0 0 0;
	
			li {
				display: inline-block;
				margin: 0 5px;
	
				button {
					color: transparent;
					outline: none;
					width: 8px;
					height: 8px;
					display: block;
					border-radius: 50%;
					background: #ccc;
				}
	
				&.slick-active button {
					background: #333;
				}
			}
		}
	}