@charset "utf-8";

@import url("style/variables.css");/*変数定義*/

@import url("style/form_mail.css");/*フォームメール周りまとめ*/
	
:root{
}

#top_img{
	padding:20px 0 0 0;
	overflow: hidden;
	position:relative !important;
	img{
		border-radius: 30px;
	}
	a{
		&:hover{
			opacity: .75;
		}
	}
	@include media_query_md{
		padding:20px 20px 30px 20px;
	}
}
.swiper-wrapper{
	position:static !important;
}
.swiper-button-next:after, .swiper-button-prev:after {/*左右の矢印変更！*/
	display: none;
 }
 .fa-arrow-circle-left,.fa-arrow-circle-right{/*矢印色変更*/
	 color:white;
	 @include text-shadow(0px,0px,2px,rgba(0,0,0,.25));
	 &:hover{
		 color:$mainColor;
	 }
 }
 .swiper-button-prev, .swiper-rtl .swiper-button-next {/*矢印位置調整*/
	 left:50% !important;
	 margin-left:-580px;
	 @include media_query_lg{
		 left:20px !important;
		 margin-left:0;
	 }
 }
 .swiper-button-next, .swiper-rtl .swiper-button-prev{/*矢印位置調整*/
	right:50% !important;
	margin-right:-580px;
	@include media_query_lg{
		right:20px !important;
		margin-right:0;
	}
 }
	
#breadcrumb{
	display:none;
}


#top_com{
	> h3{
		font-size: 1.5rem;
		font-weight: 600;
	}
	> p{
		margin:20px auto 0 auto;
		width:min(680px,100%);
		text-align: left;
		font-size: 1.1rem;
	}
	figure{
		margin:20px auto 0 auto;
	}
}


#info{/*blog rss*/
	margin:60px auto 0 auto;
	width:min(960px,100%);
	display:grid;
	grid-template-columns: 230px 1fr;
	gap:10px;
	align-items: center;
	> h3{
		font-size: 1.3em;
		font-weight: 500;
		color:rgb(var(--mainColor));
		a{
			color:rgb(var(--mainColor));
			text-decoration: underline;
			text-underline-offset: .2em;
			text-decoration-thickness: 1px;
			&:hover{
				text-decoration: none;
				
			}
		}
	}
	ul{
		border-bottom:1px dotted silver;
		li{
			display:grid;
			justify-content: start;
			grid-template-columns: 10em 1fr;
			gap:.2em 15px;
			padding:10px;
			border-top:1px dotted silver;
			align-items: center;
			h3{
				font-size: 1.1em;
				text-align: left;
				display:flex;
					flex-wrap:wrap;
					justify-content: start;
					gap:.3em 1em;
				a{
					
					&:nth-of-type(1){
						text-align: center;
						display:block;
						width:8em;
						font-size: .8em;
						background:#333;
						color:white;
						padding:.1em .3em;
						&:hover{
							background:#666;
						}
					}
					&:nth-of-type(2){
						color:rgb(var(--baceFontColor));
						text-decoration: underline;
						text-underline-offset: .2em;
						&:hover{
							text-decoration: none;
						}
					}
				}
			}
		}
	}
	@media (max-width: 960px) {
		display:block;
		ul{
			margin:20px auto 0 auto;
			li{
				display:block;
				time{
					font-size: .9em;
					display:block;
					text-align: left;
				}
				h3{
					margin:.3em auto 0 auto;
				}
			}
		}
	}
}

#top_cause_list{/*小中高*/
	
	> div{
		display:grid;
		grid-template-columns: repeat(auto-fill,minmax(min(300px,100%),1fr));
		gap:30px;
		margin:80px auto 0 auto;
		
		section{
			border:5px solid #eee;
			border-radius: 15px;
			overflow: hidden;
			a{
				display:block;
				color:rgb(var(--baceFontColor));
				height:100%;
				figure{
					figcaption{
						margin:10px auto 0 auto;
						font-size: 1.3rem;
						font-weight: 600;
					}
				}
				p{
					padding:10px 20px 20px 20px;
					text-align: left;
				}
				&:hover{
					figure{
						img{
							opacity: .75;
						}
					}
				}
				&:has(aside){/*準備中*/
					figure{
						position:relative;
						aside{
							font-size: 1.2rem;
							font-weight: 600;
							position: absolute;
    					top: 50%;
    					left: 50%;
    					transform: translate(-50%, -50%);
    					-webkit-transform: translate(-50%, -50%);
    					-ms-transform: translate(-50%, -50%);
							background:#28581f;
							color:white;
							padding:.3em .7em;
							border-radius: 10px;;
							border:2px solid white;
						}
					}
				}
			}
			&:nth-of-type(1){
				border:5px solid #ffd924;
			}
			&:nth-of-type(2){
				border:5px solid #17a7bb;
			}
			&:nth-of-type(3){
				border:5px solid #ff3778;
			}
			&:nth-of-type(4){
				border:5px solid #105fd6;
			}
			&:nth-of-type(5){
				border:5px solid #109d00;
			}
		}
	}
}

#top_banners{/*バナー*/
	margin:50px auto 0 auto;
	background:#f2f2f2;
	padding:30px;
	border-radius: 15px;
	display:grid;
	grid-template-columns: repeat(3,1fr);
	gap:30px;
	box-shadow: 0 0 2px 2px #ebebeb;
	figure{
		a{
			display:block;
			border-radius: 10px;
			overflow: hidden;
			img{
			}
			&:hover{
				opacity: .75;
			}
		}
	}
	@media (max-width: 768px) {
		padding:20px;
		grid-template-columns: repeat(auto-fill,minmax(min(200px,100%),1fr));
	}
}