/* 
 *　小谷村移住なび
 *　　子育て
 */
/* hero */
#hero {
	margin: 0 auto;
	max-width: 1126px;
	position: relative;
	width: 90%;
}
#hero:before {
	content: "";
	display: block;
	padding-top: 45.56%;
}
#image_wrap {
	background-image: url(../img/child/photo_top.png);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}
#image_wrap img {
	margin-left: 30px;
	margin-top: calc(22.78% - 29px);
	max-width: 455px;
	width: calc(100% - 60px);
}

/* 教育施設 */
#facilities {
	margin: 55px auto 0;
	max-width: 960px;
	width: 95%;
}
h2 {
	margin: 0;
}
div.tile {
	margin: 0 auto 28px;
	max-width: 696px;
	min-height: 690px;
	padding-bottom: 25px;
	width: 100%;
}
div.tile.nursery {
	background-image: url(../img/child/icon_boy.png),
					  url(../img/child/bg_facilities.png);
	background-position: calc(50% - 18px) 78px,
						 left top;
	background-repeat: no-repeat;
	margin-top: calc((696px - 100%) / 4);
}
div.tile.school {
	background-image: url(../img/child/icon_girl1.png),
					  url(../img/child/bg_facilities.png);
	background-position: calc(50% - 20px) 78px,
						 left top;
	background-repeat: no-repeat;
}
div.tile.j_h_s {
	background-image: url(../img/child/icon_girl2.png),
					  url(../img/child/bg_facilities.png);
	background-position: calc(50% - 17px) 78px,
						 left top;
	background-repeat: no-repeat;
}
div.tile.juku {
	background-image: url(../img/child/bg_facilities.png);
	background-position: left top;
	background-repeat: no-repeat;
}
h3 {
	color: #60643B;
	float: left;
	font-size: 2.5rem;
	font-weight: bold;
	margin: 47px 0 29px 50%;
	text-align: center;
	width: 1em;
}
p.info {
	color: #60643B;
	float: left;
	font-size: 1.3rem;
	line-height: 1.6em;
	margin: 50px 0 0 60px;
}
div.tile p + img {
	clear: left;
	display: block;
	margin: 0 auto;
	max-width: 377px;
	width: 90%;
}
h4 {
	color: #370000;
	font-size: 2.3rem;
	font-weight: normal;
	margin: 39px auto;
	text-align: center;
}
div.tile.juku h4 {
	margin: 24px auto;
}
p.detail {
	color: #370000;
	font-size: 1.5rem;
	line-height: 1.8em;
	margin: 0 auto;
	max-width: 500px;
	width: 90%;
}

/* パンフレット */
#pamph {
	align-items: center;
	display: flex;
	justify-content: center;
	margin: 40px 15px;
}
#kosodate {
	background: url(../img/child/banner_pamphlet.png) no-repeat center center;
	display: inline-block;
	height: 182px;
	width: 460px;
}
.hide {
	display: none;
}

@media (max-width: 500px) {
	#kosodate {
		background-image: url(../img/child/banner_pamphlet_s.png);
		height: 99px;
		width: 249px;
	}
}

/* 子育て体験 */
#experience {
	margin: 0 auto;
	max-width: 1085px;
	width: 95%;
}
#experience h2 {
	float: left;
	margin-left: -29px;
	margin-top:  -45px;
}
#column {
	float: right;
	font-size: 0;
	margin-top: 70px;
	max-width: 879px;
	width: 100%;
}
div.column {
	cursor: pointer;
	display: inline-block;
	margin-left: calc((100% - 621px) / 4);
	margin-top: 50px;
	width: 207px;
}
div.column svg {
	height: 182px;
	width: 204px;
}
div.column ul {
	list-style: none;
	margin-top: 12px;
	padding: 0;
}
div.column ul li {
	color: #5F6439;
	font-size: 1.8rem;
	font-weight: bold;
	letter-spacing: -2px;
}

@media (max-width: 1200px) {
	#experience h2 {
		float: none;
		margin: 0;
	}
	div#column {
		margin-top: 0;
	}
}
@media (max-width: 760px) {
	div.tile {
		background-color: white;
		border-radius: 60px;
	}
	div.tile.nursery {
		background-image: url(../img/child/icon_boy.png);
		background-position: calc(50% - 18px) 78px;
		background-repeat: no-repeat;
	}
	div.tile.school {
		background-image: url(../img/child/icon_girl1.png);
		background-position: calc(50% - 20px) 78px;
		background-repeat: no-repeat;
	}
	div.tile.j_h_s {
		background-image: url(../img/child/icon_girl2.png);
		background-position: calc(50% - 17px) 78px;
		background-repeat: no-repeat;
	}
	div.tile.juku {
		background-image: none;
	}
	div.column {
		margin-left: calc((100% - 414px) / 3);
	}
}
@media (max-width: 680px) {
	p.info {
		clear: left;
		margin: 12px 5%;
	}
}
@media (max-width: 560px) {
	div.column {
		margin-left: calc((100% - 207px) / 2);
	}
}
