/* ***********************************
 *
 *    CSS Top
 *
 * *********************************** */

/* FACEBOOK
 * *********************************** */

.fb_iframe_widget,
.fb_iframe_widget span,
.fb_iframe_widget iframe[style]{
	width: 100% !important;
}

.facebook {
	max-width: 500px;
	margin: 0 auto;
	padding: 3rem;
}

.fbpage {
	min-height: 500px;
}


/* body contents
 * *********************************** */

main {
	clear: both;
}

main p {
	margin-bottom: 1.5rem;
}

.swiper-slide {
	text-align: center;
}

.swiper-slide img {
	width: 100%;
}

.swiper-pagination-bullet-active {
	opacity: 1;
	background: #fff;
}

.swiper-button-prev,
.swiper-button-next {
	width: 32px;
	height: 32px;
	margin-top: -16px;
}
.swiper-button-prev {
	background: url(https://haniwaman.com/wp-content/uploads/2018/05/swiper3.png) no-repeat center center / contain;
}
.swiper-button-next {
	background: url(https://haniwaman.com/wp-content/uploads/2018/05/swiper4.png) no-repeat center center / contain;
}

#main-visual,
#what-ninjin,
#inenreihoiku,
#ensoku {
	background-color: #fefdf0;
}

#kyodohoiku,
#sotoasobi,
#ninjin-lunch {
	background-color: #ebf8cd;
}

.sec01,
.sec02 {
	padding: 2rem 0;
}

.sec01 h2,
.sec02 h2 {
	text-align: center;
	margin-bottom: 1.5rem;
}

.lo {
	display: flex;
	flex-flow: row wrap;
}

.exlo,
.exlo02 {
	order: 2;
	display: flex;
	flex-flow: row wrap;
	width: 100%;
}

.explanation,
.explanation02 {
	order: 2;
	padding: 0 1rem;
}

.nav01,
.nav03,
.nav05 {
	order: 1;
	display: inline-block;
	margin: 1.5rem 0;
	text-align: center;
	width: 100%;
}

.nav02,
.nav04,
.nav06 {
	order: 1;
	display: inline-block;
	margin: 1.5rem 0;
	text-align: center;
	width: 100%;
}

.mainImage01,
.mainImage02,
.mainImage03,
.mainImage04,
.mainImage05,
.mainImage06 {
	width: 100%;
	text-align: center;
}

.mainImage02,
.mainImage04,
.mainImage06 {
	order: 1;
}

.mainImage01 img,
.mainImage02 img,
.mainImage03 img,
.mainImage04 img,
.mainImage05 img,
.mainImage06 img {
	width: 100%;
}

.nav01 li,
.nav02 li,
.nav03 li,
.nav04 li,
.nav05 li,
.nav06 li {
	display: inline;
	list-style: none;
}

.nav01 li img,
.nav02 li img,
.nav03 li img,
.nav04 li img,
.nav05 li img,
.nav06 li img {
	width: 18%;
	box-sizing: border-box;
}

.over img {
	opacity: 0.5;
	border: 3px solid #ff9966;
}

.info-area .info {
	padding: 2rem 1rem 4rem 1rem;
}

.info-area .info h2 {
	text-align: center;
	padding: 1rem;
}

.info-area .info .info01 a,
.info-area .info .info02 a {
	color: #7a532d;
	font-weight: 300;
	background-color: #fff;
	border-top: 1px solid #f6dd87;
	border-bottom: 1px solid #f6dd87;
	display: block;
	padding: 1rem 3rem 1rem 1rem;
	position: relative;
}

.info-area .info .info02 a {
	border-top: none;
}

.info-area .info .info01 a::after,
.info-area .info .info02 a::after {
	content: "";
	position: absolute;
	display: block;
	right: 1rem;
	top: 0;
	bottom: 0;
	margin: auto;
	width: 8px;
	height: 8px;
	border-top: 1px solid #7a532d;
	border-right: 1px solid #7a532d;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

.info-list-btn {
	width: 180px;
	margin: 0 auto;
}

.info-list {
	display: inline-block;
	width: 180px;
	text-align: center;
	color: #fff;
	position: relative;
	margin: 2rem 0 0 0;
}

.info-list a:after {
	content: "";
	position: absolute;
	display: block;
	right: 1rem;
	top: 0;
	bottom: 0.4rem;
	margin: auto;
	width: 8px;
	height: 8px;
	border-top: 1px solid #fff;
	border-right: 1px solid #fff;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

.info-button {
	display: inline-block;
	width: 180px;
	padding: 0.5rem 1rem;
	background: #be8349;/*ボタン色*/
	border-radius: 2rem;
}


@media screen and (min-width: 800px) {
	main {
		margin: 0 auto;
	}

	.sec01,
	.sec02 {
		width: 1024px;
		margin: 0 auto;
		padding: 3rem 0 4rem 0;
	}

	.sec01 h2,
	.sec02 h2 {
		margin-bottom: 3rem;
	}

	.lo {
		display: flex;
		flex-flow: row wrap;
	}

	.exlo,
	.exlo02 {
		width: 50%;
	}

	.explanation {
		order: 1;
		width: 100%;
		padding: 0;
	}

	.explanation02 {
		order: 2;
		width: 100%;
		padding: 0;
	}

	.mainImage01,
	.mainImage03,
	.mainImage05 {
		width: 48%;
		margin-right: 2%;
	}

	.mainImage02,
	.mainImage04,
	.mainImage06 {
		order: 3;
		width: 48%;
		margin-left: 2%;
	}

	.nav01 li img,
	.nav02 li img,
	.nav03 li img,
	.nav04 li img,
	.nav05 li img,
	.nav06 li img {
		width: 78px;
		box-sizing: border-box;
	}

	.nav01,
	.nav03,
	.nav05 {
		order: 2;
		text-align: left;
		width: 100%;
	}

	.nav02,
	.nav04,
	.nav06 {
		order: 2;
		text-align: right;
		width: 100%;
	}

	.nav01 ul,
	.nav02 ul,
	.nav03 ul,
	.nav04 ul,
	.nav05 ul,
	.nav06 ul {
		margin: 0.35em 0 0;
		padding: 0;
	}

	.over img {
		opacity: 0.5;
		border: 3px solid #ff9966;
	}

	.info-area {
		width: 1024px;
		margin: 0 auto;
	}

	.facebook {
		float: left;
		width: 500px;
		margin: 0;
		padding: 2rem 1rem 4rem 0;
	}

	.info {
		float: right;
		margin: 0;
		padding: 0;
	}

}