@charset "utf-8";
/*ヘッダーイメージ*/
#top_img { width: 100%; height: auto;  margin-top: 100px; }
.img_area { display: flex; justify-content: center; align-items: flex-end; width: 100%; background: url( "../../img/top_img2.jpg") no-repeat top center; background-size: cover; aspect-ratio: 8 / 1; }
.img_area img { width: 100%; height: auto;}


.jokyo_area { max-width: 900px; width: 100%; margin: 0 auto;}
.back_color { max-width: 900px; width: 100%; margin: 0 auto; background: #E1E8C6; box-shadow: 0 0 0 100vmax #E1E8C6; clip-path: inset(0 -100vmax); overflow: hidden;}
.teiten_tit { width: 100%; line-height: 65px; font-size: 26px; font-weight: bold; padding-left: 20px; background: #E1E8C6; border-top: solid 6px #095256;}
.teiten_come { margin: 30px 0 0 0;}
.year { width: 100%; margin: 0 auto; font-size: 21px; font-weight: bold; color: #095256; border-left: solid 10px #095256; line-height: 33px; padding-left: 15px; margin-top: 50px; }

.jokyo_list { display: flex; flex-wrap: wrap; justify-content: space-between; width: 100%; margin-top: 30px;}
.jokyo_list li { width: 440px; background: #F5F5F5; margin-bottom: 30px;}
.jokyo_list_col4 { display: flex; flex-wrap: wrap; justify-content: flex-start; width: 100%; margin-top: 30px;}
.jokyo_list_col4:last-child { margin-bottom: 150px;}
.jokyo_list_col4 li { width: 24%; background: #F5F5F5; margin: 0 0.5% 30px;}
.jokyo_list img, .jokyo_list_col4 img { width: 100%; height: auto; }
.jokyo_img{
	overflow: hidden;
	box-shadow: 0 2px 2px -1px rgba(0,0,0,0); 
/*	cursor: pointer;
	&:hover {
		&::before {
			opacity: 1;
		}
		& img {
			scale: 1.03;
		}
	}*/
}
/*.jokyo_img img { width: 290px; aspect-ratio: 3/2; 
	object-fit: cover; transition-property: scale, filter; transition-duration: .4s}*/
.jokyo_day { display: inline-block; padding: 15px 20px 0; font-size: 13px;}
.jokyo_come { display: inline-block; padding: 0 20px 15px 20px;}
.jokyo_list_col4 .jokyo_come { font-size: 0.9em;}
.jokyo_area:first-child .jokyo_list li:first-child { width: 100%;}

@media screen and (max-width: 800px) {
	main {}
	/*ヘッダーイメージ*/
	#top_img { min-width: auto; margin-top: 90px;  }
	.img_area { width: 100%;  height: 200px; background: url( "../../img/top_img2_m.jpg") no-repeat center center;  aspect-ratio: auto; background-size: cover; }
	
	.teiten_tit {}
	.teiten_come {}
	.year {}
	
	.jokyo_area { padding:  0 5%}
	.jokyo_list { justify-content: center;}
	
	.jokyo_list_col4 li { width: 100%; background: #F5F5F5; margin: 0 0 30px;}
	.jokyo_list_col4 .jokyo_come { font-size: 1em;}
	
}