@charset "utf-8";

/* main */
#main{
	position: relative;
	margin: 0 auto;
	padding: 0;
}
#main .header{
	position: relative;
	margin: 0 auto;
	width: 100%;
}
#main .header img{width: 100%;}
#main h2{
	position: absolute;
	padding: 0;
	margin: 0;
	top:50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 60%;
	max-width: 400px;
}

/*.mainImage{
	position: relative;
	margin: 0 auto;
	width: 100%;
	height:0;
	padding-top: 24.12%;
	background-image: url("../img/activity/main.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 50% 0;
}*/
h3{
	position: relative;
	margin: 0 auto;
	width:100%;
	text-align: center;
}
h3 img{margin: 0 auto; width: 40%;max-width: 270px;}
/* 園の生活 */
#activity{
	position: relative;
	margin: 0 auto;
	background-color: #f2f2cc;
	box-shadow:0px 12px 16px -10px rgba(0,0,0,0.3) inset;
}
#activity h2{
	position: absolute;
	padding: 0;
	margin: 0;
	top:50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 60%;
	max-width: 400px;
}
/*#activity h2{
	position: relative;
	margin: 4% auto;
	width: 100%;
	height:0;
	padding-top: 18%;
	background-image: url("../img/common/ttl_activity.png");
	background-size: 50% auto;
	background-repeat: no-repeat;
	background-position: 50% 50%;
}*/
#activity .activityWrap{
	position: relative;
	margin: -2% auto -20px auto;
	width: calc(100% - 50px);
	max-width: 1050px;
}
#activity .toptxt{
	width: 100%;
	margin: 0 auto;
	text-align: left;
}

/* 一日の流れ */
#day{
	position: relative;
	padding: 60px 0 0 0;
	background-color: #f2f2cc;
}
#day .dayWrap{
	position: relative;
	margin: 0 auto;
	max-width: 980px;
}
#day .dayWrap .photo{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 80px);
	max-width: 380px;
}
#day .dayWrap .photo img{
	position: relative;
	margin: 0 auto;
}
#day .dayWrap .txt{
	position: relative;
	margin: 10px auto 30px auto;
	width: calc(100% - 50px);
	max-width: 410px;
}
#day .dayWrap .txt p{
	position: relative;
	margin: 0 auto;
	font-size: .13rem;
	text-align: left;
}
#day .dayWrap .txt p.ttl{
	display: flex;
    align-items: center; /* 縦方向の中央揃え */
    justify-content: left; /* 横方向の中央揃え */
    gap: 5px; /* 画像とテキストの間隔を調整 */
    margin: 0 auto 5px auto;
    color: #6a3906;
    font-size: .16rem;
    font-weight: bold;
}
#day .monthly{
	position: relative;
	margin: 30px auto 0 auto;
	width: calc(100% - 40px);
	font-size: .15rem;
	color: #759458;
}
.clock{
	width: 30px;
	height: auto;
}

/* events 年間行事用 */
#events{
	position: relative;
	margin:  0 auto;
	padding:50px 0;
	box-shadow:0px 12px 16px -10px rgba(0,0,0,0.3) inset;
}
#events .taisuikids .taisui .taisuichuou .taisuinorth{margin: 0 auto 60px auto;}
#events h2{
	position: relative;
	margin: 0 auto;
	width: 40%;
	max-width: 240px;
}
#events h3{margin: 0 auto 30px auto;}
#events .lead{
	position: relative;
	margin: 0 auto 30px auto;
	width: calc(100% - 50px);
}
#events .eventsWrap{
	position: relative;
	margin: 40px auto 0 auto;
	max-width: 800px;
}
#events .eventsWrap .photo{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 80px);
	max-width: 350px;
}
#events .eventsWrap .photo img{
	position: relative;
	margin: 0 auto;
}
#events .eventsWrap .txt{
	position: relative;
	margin: 30px auto auto;
	width: calc(100% - 40px);
}
#events .eventsWrap .txt .ttl{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 80px);
	max-width: 300px;
	padding: 5px 0;
	border-radius: 100px;
}
#events .eventsWrap .txt .ttl img{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 80px);
	max-width: 102px;
}
#events .eventsWrap.season01 .txt .ttl{background-color: #ea609e;}
#events .eventsWrap.season02 .txt .ttl{background-color: #009944;}
#events .eventsWrap.season03 .txt .ttl{background-color: #ea5514;}
#events .eventsWrap.season04 .txt .ttl{background-color: #036eb8;}
#events .eventsWrap .txt ul{
	position: relative;
	margin: 20px auto 0 auto;
	width: calc(100% - 40px);
	gap: 10px 20px;
}
#events .eventsWrap .txt ul li{
	position: relative;
	margin: 0;
	width: 3em;
	text-align: left;
}

#events .eventsWrap .txt ul li{
	position: relative;
	margin: 0;
	width: calc(100% - 3em - 20px);
}
#events .eventsWrap .txt ul li p{
	position: relative;
	display: inline-block;
	width: auto;
	padding-left: 1.2em;
	padding-right: 1em;
}
#events .eventsWrap .txt ul li p::before{
	position: absolute;
	top:0;
	left: 0;
	content: '・';
}
#events .monthly{
	position: relative;
	margin: 100px auto 0 auto;
	width: calc(100% - 40px);
	font-size: .22rem;
	font-weight: bold;
	background-color: #759458;
	color: #ffffff;
	border: 1px solid #759458;
	padding: 1%;
	border-radius: 10px;
}
#events .monthlyetc{
	margin: 5% 5%;
	text-align: left;
}
#events .monthlyetc dt{
	font-weight: bold;
	font-size: .18rem;
	color:#759458;
}
#events .monthlyetc dd{
	margin: 0 0 5% 3%;
}



/* ----- pc ----- */
@media screen and (min-width: 641px) {
	
	/* main */
	#main{margin: 0 auto;}

	h3{margin: 0 auto 80px auto;}

	#activity h2{
	position: relative;
	margin: 4% auto;
	width: 100%;
	height:0;
	padding-top: 18%;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 50% 50%;
}
	#activity .activityWrap{gap:0 100px;}
	#activity .toptxt{
	width: 50%;
	margin: -80px auto 0 auto;
	text-align: center;
}
	/* day */
	#day{padding: 100px 0;}
	#day .dayWrap{margin: 0 auto 100px auto;gap:0 80px;flex-direction: row-reverse;}
	#day .dayWrap .photo{margin: 0;width: calc(50% - 80px);}
	#day .dayWrap .txt{margin: 0;width: 50%;}
	#day .dayWrap .txt p{font-size: .14rem;}
	#day .dayWrap .txt p.ttl{
		margin: 0 auto 10px auto;
		font-size: .25rem;
	}
	#day .caution{
		margin: 100px auto 0 auto;
		font-size: .20rem;
	}
	/* events 年間行事 */
	#events .taisuikids .taisui .taisuichuou .taisuinorth{margin: 0 auto 100px auto;}
	#events{padding:50px 0 100px 0;}
	#events h3{margin: 0 auto 60px auto;}
	#events .lead{margin: 0 auto 60px auto;font-size: .18rem;}
	#events .eventsWrap{margin: 0 auto 100px auto;gap:0 80px;}
	#events .eventsWrap.season02, #events .eventsWrap.season04{flex-direction: row-reverse;}
	#events .eventsWrap .photo{
		margin: 0;
		width: calc(50% - 80px);
	}
	#events .eventsWrap .txt{
		margin: 10px 0 0 0;
		width: calc(50% - 40px);
	}
	#events .eventsWrap .txt .ttl{
		margin: 0;
		padding: 10px 0;
	}
	#events .eventsWrap .txt ul{
		margin: 30px auto 0 auto;
		width: 100%;
		gap:8px 20px;
	}
	#events .eventsWrap .txt ul li p{line-height: 2.2em;}
	#events .monthly{
		margin: 60px auto 0 auto;
		font-size: .20rem;
		width: 600px;
	}
	#events .monthlyetc{
		width: 600px;
		margin: 20px auto;;
		text-align: left;
	}
	#events .monthlyetc dd{
		margin: 0 0 20px 10px;
	}



}