/* CSS Document */

/*================================================
*  tablet
================================================*/
@media screen and (max-width: 768px) {
	body {
		min-width: 100%;
		width: 100%;
	}
	#header > nav > ul {
		width: 100%;
		margin: 0;
	}
	#header > nav > ul > li {
		text-align: center;
		float: left;
		width: 16.6%;
	}
}
/*================================================
*  sp
================================================*/
@media screen and (max-width: 480px) {
	body {
		min-width: 100%;
		width: 100%;
	}
	.pc {
		display: none;
	}
	.sp {
		display: block;
	}
	#header > nav > ul {
		min-width: 100%;
		width: 100%;
	}
	#header > nav > ul >li {
		width: 25%;
	}
	.paper {
		width: 90%;
	}
	.ggmap iframe,
	.ggmap object,
	.ggmap embed {
		height: 250px;
	}

	#guide .area-map {
		width: 90%;
		height: 50vh;
	}
	.price_table {
		width: 98%;
	}
	.price_table th,
	.price_table td {
		width: 25%;
	}
	.price .pre_open {
		width: 98%;
	}

	.camp_area {
		width: 100%;
		margin: 0 auto;
		padding-bottom: 2em;
		display: flex;
	}
	.price > .container > h3 {
		width: 100%;
		font-size: 1.5em;
		font-weight: bold;
		padding: 1em;
		margin: 0 auto;
	}
	.price .area_price h4 {
		font-weight: bold;
		font-size: 1.2em;
	}
	.area_img {
		width: 100%;
	}
	.area_img img{
		width: 100%;
	}
	.area_price {
		display: flex;
		flex-direction: column;
		margin: 0 0.5em;
		line-height: 1.5;
		font-size: 1.2em;
		width: 100%;
	}
	.lodge {
		display:flex;
		margin: 0.5em 0 1.8em 1em;
		flex-wrap: wrap;
		line-height: 1.5;
	}
	.lodge dt {
		width: 20%;
		padding-left: 0.5em;
		border-bottom: 2px solid #586164;
	}
	.lodge dd {
		width: 80%;
		padding-left: 0.5em;
		border-bottom: 1px solid #666;
	}
	.day_camp {
		display:flex;
		margin: 0.5em 0 0 1em;
		flex-wrap: wrap;
		line-height: 1.5;
	}
	.day_camp dt {
		width: 20%;
		border-bottom: 2px solid #586164;
	}
	.day_camp dd {
		width: 80%;
		border-bottom: 1px solid #666;
	}
	
	.slick-prev
	{
		left: 0;
	}
	.slick-next
	{
		right: 0;
	}
	.slick-next.slick-arrow,
	.slick-prev.slick-arrow {
		height: 100%;
		width: 80px;
	}
	.slick-prev:before,
	.slick-next:before
	{
		color: gray;
		font-size: 24px;
	}
	
	#nav-content {
		max-width: 70%;
	}
}