@charset "utf-8";
/*リセットCSS（sanitize.css）の読み込み
---------------------------------------------------------------------------*/
@import url("https://unpkg.com/sanitize.css");
.events_area{
	width: 70%;
	margin: 0 auto 30px 20%;
	display: flex;
	flex-direction: column;
	max-width: 1050px;
}
.events_base2{
	position: relative;
	width: 100%;
	background-color: #fff;
	margin: 50px auto 20px;
	border:1px solid #fff;
	border-radius: 10px;
	padding: 40px 20px 40px 80px;
	z-index: 1;
	box-shadow: 2px 2px 5px 3px rgba(0, 0, 0, 0.1);
}
.events_base1{
	position: relative;
	width: 100%;
	background-color: #fff;
	margin: 50px auto 20px;
	border:1px solid #fff;
	border-radius: 10px;
	padding: 40px 20px 40px 80px;
	z-index: 1;
	box-shadow: 2px 2px 5px 3px rgba(0, 0, 0, 0.1);
}
.events_icon{
	position: absolute;
	width: 120px;
	top:-50px;
	left:-50px;
	z-index: 2;
}
.ev_col_1{
	color: #F7ACBB;
}
.ev_col_2{
	color: #BAD06D;
}
.ev_col_3{
	color: #DFB162;
}
.ev_col_4{
	color: #8ECDDD;
}

.events_main{
	width: 100%;
	margin: 0 auto;
	padding: 40px 0;
	max-width: 1350px;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: stretch;
	font-size: 0.8rem;
}
.events_main img{
	width: 100%;
	border-radius: 10px;
}
.events_main_item{
	width: 31.33%;
	margin: 0 1% 30px;
}

.events_other{
	width: 50%;
	margin: 30px auto 60px;
}
@media screen and (max-width:900px) {
.events_area{
	width: 80%;
	margin: 0 auto 30px 12%;
	display: flex;
	flex-direction: column;
	max-width: 1050px;
}
.events_base2{
	position: relative;
	width: 100%;
	background-color: #fff;
	margin: 50px auto 20px;
	border:1px solid #fff;
	border-radius: 10px;
	padding: 40px 20px 40px 80px;
	z-index: 1;
	box-shadow: 2px 2px 5px 3px rgba(0, 0, 0, 0.1);
}
.events_base1{
	position: relative;
	width: 100%;
	background-color: #fff;
	margin: 50px auto 20px;
	border:1px solid #fff;
	border-radius: 10px;
	padding: 40px 20px 40px 80px;
	z-index: 1;
	box-shadow: 2px 2px 5px 3px rgba(0, 0, 0, 0.1);
}
.events_icon{
	position: absolute;
	width: 120px;
	top:-50px;
	left:-50px;
	z-index: 2;
}
.ev_col_1{
	color: #F7ACBB;
}
.ev_col_2{
	color: #BAD06D;
}
.ev_col_3{
	color: #DFB162;
}
.ev_col_4{
	color: #8ECDDD;
}

.events_main{
	width: 100%;
	margin: 0 auto;
	padding: 40px 0;
	max-width: 1350px;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: stretch;
	font-size: 0.8rem;
}
.events_main img{
	width: 100%;
	border-radius: 10px;
}
.events_main_item{
	width: 31.33%;
	margin: 0 1% 30px;
}

.events_other{
	width: 70%;
	margin: 30px auto;
}
}
@media screen and (max-width:480px) {
.events_area{
	width: 100%;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	max-width: 500px;
}
.events_base2{
	position: relative;
	width: 90%;
	background-color: #fff;
	margin: 40px 0 20px 5%;
	border:1px solid #fff;
	border-radius: 10px;
	padding: 50px 20px 20px;
	z-index: 1;
	box-shadow: 2px 2px 5px 3px rgba(0, 0, 0, 0.1);}
.events_base1{
	position: relative;
	width: 90%;
	background-color: #fff;
	margin: 40px 0 20px 5%;
	border:1px solid #fff;
	border-radius: 10px;
	padding: 50px 20px 20px;
	z-index: 1;
	box-shadow: 2px 2px 5px 3px rgba(0, 0, 0, 0.1);
}
.events_icon{
	position: absolute;
	width: 24%;
	top:-11VW;
	left:38%;
	z-index: 2;
}


.events_main{
	width: 100%;
	margin: 0 auto;
	padding: 40px 0;
	max-width: 900px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: stretch;
	font-size: 0.8rem;
}
.events_main img{
	width: 100%;
	border-radius: 10px;
}
.events_main_item{
	width: 80%;
	margin: 10px AUTO;
}

.events_other{
	width: 90%;
	margin: 0 auto 30px;
}

}