@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/about/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;}

/* 当園について */
#about{
	position: relative;
	margin: 0 auto;
	background-color: #f2f2cc;
	box-shadow:0px 12px 16px -10px rgba(0,0,0,0.3) inset;
}

#about h2{
	position: relative;
	margin: 4% auto;
	width: 100%;
	height:0;
	padding-top: 18%;
	background-image: url("../img/common/ttl_about.png");
	background-size: 50% auto;
	background-repeat: no-repeat;
	background-position: 50% 50%;
}
#about .aboutWrap{
	position: relative;
	margin: -2% auto 0 auto;
	width: calc(100% - 50px);
	max-width: 1050px;
}
#about .aboutWrap .photo{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 80px);
	max-width: 300px;
	color: #6a3906;
}
#about .aboutWrap .photo img{
	position: relative;
	margin: 0 auto;
}
#about .aboutWrap .photo .exective{
	position: relative;
	margin:  10px auto;
	font-size: .20rem;
}
#about .aboutWrap .photo .exective span{font-size: .13rem;}
#about .aboutWrap .photo .name{
	position: relative;
	margin: 0 auto;
	font-size: .20rem;
	padding-left: 10px;
}
#about .aboutWrap .photo .name span{font-size: .13rem;}
#about .aboutWrap .ttl{
	font-size: .26rem;
	font-weight: bold;
	color: #759458;
	text-align: center;
}
	#about .aboutWrap .txt{
	position: relative;
	margin: 20px auto 30px auto;
	text-align: left;
	line-height: .26rem;
}
#about .aboutWrap .txt p{
	padding-top: 1em;
}
/* 概要 */
#gaiyou{
	position: relative;
	margin: 0 auto;
	background-color: #fef6e5;
	box-shadow:0px 12px 16px -10px rgba(0,0,0,0.3) inset;
}
#gaiyou dl{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 50px);
	max-width: 600px;
}
#gaiyou dl dt{
	position: relative;
	margin: 0 0 10px 0;
	padding: 0 0 5px 0;
	width: 7em;
	color: #602506;
	border-bottom: dotted 1px #e1e1e1;
	text-align: left;
}
#gaiyou dl dd{
	position: relative;
	margin: 0 0 10px 0;
	padding: 0 0 5px 0;
	width: calc(100% - 7em);
	text-align: left;
	border-bottom:dotted 1px #e1e1e1;
}
#gaiyou .links{
	position: relative;
	margin: 10px auto 0 auto;
	width: calc(100% - 50px);
	max-width: 600px;
}
#gaiyou .links a{
	padding-right: 20px;
	background-image: url("../img/about/arrow.png");
	background-repeat: no-repeat;
	background-position: 100% 50%;
	background-size: 14px auto;
	color: #602506;
}
/* 施設紹介 */
#facility{
	position: relative;
	margin: -12px auto 0 auto;
	background-color: #ffffff;
	box-shadow:0px 12px 16px -10px rgba(0,0,0,0.3) inset;
}
#facility .facilityWrap{
	position: relative;
	margin: 0 auto 3% auto;
	width: calc(100% - 50px);
	max-width: 1050px;
}
#facility .facilityWrap .photo{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 80px);
	max-width: 380px;
}
#facility .facilityWrap .photo img{
	position: relative;
	margin: 0 auto;
}
#facility .facilityWrap .txt{
	position: relative;
	margin: 20px auto 0 auto;
	width: calc(100% - 50px);
	max-width: 410px;
}
#facility .facilityWrap .txt p{
	position: relative;
	margin: 0 auto 2% auto;
	font-size: .20rem;
}
/* 苦情 */
#complaint{
	position: relative;
	margin: -12px auto 0 auto;
	background-color: #ffffff;
	box-shadow:0px 12px 16px -10px rgba(0,0,0,0.3) inset;
}
#complaint .complaintWrap{
	position: relative;
	margin: 10% auto 3% auto;
	width: calc(100% - 50px);
	max-width: 1050px;
}

#complaint ul li{
	margin: 2% auto;
}
#complaint .links a{
	padding-right: 20px;
	background-image: url("../img/about/arrow.png");
	background-repeat: no-repeat;
	background-position: 100% 50%;
	background-size: 14px auto;
	color: #602506;
}

#complaint .txt{
	position: relative;
	margin: 0 auto 2% auto;
	font-size: .16rem;
	width: 90%;
	text-align: left;
}
/* ----- pc ----- */
@media screen and (min-width: 641px) {
	
	/* main */
	#main{margin: 0 auto;}

	h3{margin: 50px auto 10px auto;}

	
	/* about */
	#about{padding:0 auto;}
	#about .aboutWrap{gap:0 100px;}
	#about .aboutWrap .photo{
		margin: 100px 0 auto 0;
		padding-bottom: 100px;
		width: 25%;
	}
	#about .aboutWrap .photo .exective{	font-size: .23rem;}
	#about .aboutWrap .photo .exective span{font-size: 80%;}
	#about .aboutWrap .photo .name{font-size: .26rem;}
	#about .aboutWrap .photo .name span{font-size: .16rem;}
	#about .aboutWrap .txt{
		margin: 100px 0 auto 0;
		width: calc(50% - 100px);
		max-width: 700px;
	}
	#about .aboutWrap .txt p{
		padding-top: 0;
		padding-bottom: 1em;
	}
	#about h2{
	position: relative;
	margin: 4% auto;
	width: 100%;
	height:0;
	padding-top: 18%;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 50% 50%;
}
	#gaiyou{padding: 100px 0;}
	#gaiyou dl{font-size: .20rem;}
	#gaiyou dl dt{
		margin: 0 0 20px 0;
		padding: 0 0 15px 0;
		width: 8em;
		border-bottom: dashed 2px #e1e1e1;
	}
	#gaiyou dl dd{
		margin: 0 0 20px 0;
		padding: 0 0 15px 0;
		width: calc(100% - 8em);
		border-bottom: dashed 2px #e1e1e1;
	}
	#gaiyou dl dd p{
		line-height: .30rem;
	}
	#gaiyou .links a{
		padding-right: 30px;
		background-size: 20px auto;
		font-size: .20rem;
	}
	
	#facility{padding: 100px 0;}
	#facility .facilityWrap{gap:0 100px;}
	#facility .facilityWrap .photo{margin: 0;width: 100%;}
	#facility .facilityWrap .txt{margin: 20px 0 10px 0;width: calc(100% - 10px);}
	#facility .facilityWrap .txt p{font-size: .20rem;}
	
	#complaint{padding: 100px 0;}
	#complaint .complaintWrap{gap:0 100px;}
}
	#complaint ul{
		width: 300px;
		margin: 50px auto;
	}
	#complaint ul li{
	margin: 10px auto;
		text-align: left;
	}
	#complaint .txt{
		width: 600px;
		margin: auto;
		line-height: .24rem;
	}



	
}