@charset "UTF-8";

h1, h2, .bg-wrapper p{
	font-family: 'Noto Sans JP', sans-serif!important;
}

h1, h2{
	color:#364f72;
	line-height:1.8;
}

.mid-caption h1{
	font-size:2.5rem;
}

.mid-wrapper h1{
	font-size:2.8rem;
}

h2{
	font-size:2.5rem;
}

.bg-wrapper{
	box-sizing: border-box;
	padding:30px 0;
}

.bg-wrapper p{
	font-weight:400;
	color:#000;
}

.bg-wrapper:nth-of-type(odd){
	background-color:#d0d9d4;
}

.bg-wrapper:nth-of-type(even){
	background-color:#edebe4;
}

.title-img{
	width:6%;
	margin:20px auto 20px;
	padding:70px 0 30px;
}

.mid-caption{
	width:50%;
	margin:40px auto 60px;
	padding-bottom:30px;
}

.mid-caption p{
	margin-top:15px;
}

.mid-wrapper{
	width:70%;
	margin:30px auto;
	position:relative;
	z-index:1;
}

.relative-img-01, .relative-img-02, .relative-img-03, .relative-img-04, .relative-img-05, .relative-img-06{
	position:absolute;
	z-index:2;
}

.relative-img-01{
	width:17%;
	height:100%;
	top:50px;
	left:92%;
}

.relative-img-02{
    width: 30%;
    height: 100%;
    top: 1950px;
    right: 85%;
}

.relative-img-03{
	width:30%;
	height:100%;
	top:40px;
	left:80%;
}

.relative-img-04{
	width:35%;
	height:100%;
	top:1260px;
	right:75%;
	transform: rotate(-5deg);
}

.relative-img-05{
	width:18%;
	height:100%;
	top:5%;
	right:93%;
}

.relative-img-06{
	width:18%;
	height:100%;
	top:45%;
	left:93%;
}

.flex{
	align-items: center;
}

.place-info{
	width:80%;
	margin:0 auto 40px;
}

.round-img{
	width:20%;
}

.round-img div{
	width:80%;
	margin:auto;
}

.place-name{
	width:80%;
	box-sizing: border-box;
	padding:0 0 0 30px;
}

.place-name p, .place-caption p{
	margin:20px 0;
}

.place-name a{
	font-size:1.3rem;
	display: block;
	line-height:2.5;
}

.place-name a i{
	font-size:1.6rem!important;
	margin-right:10px;
}

.big-img, .big-slide{
	width:70%;
	margin:40px auto;
}

.koko{
	position:relative;
	width:30%;
	height:100%;
	right:15%;
}

.caption-container{
	width:80%;
	margin:30px auto;
	box-sizing: border-box;
	padding:40px 0;
	justify-content: space-between;
}

.place-caption{
	width:50%;
}

.caption-container-no-flex .place-caption{
	width:80%!important;
	margin:auto;
	padding:20px 0;
	box-sizing:border-box;
}

.place-img{
	width:45%;
}

.big-slide p{
	text-align: center;
	font-size:1.6rem;
	font-weight:700;
	color:#364f72;
	margin-top:10px;
}

.flex-img{
	width:85%;
	margin:auto;
	box-sizing: border-box;
	padding:40px 0 20px 0;
	justify-content: space-between;
}

.flex-img img{
	width:49%;
}

.yomo-title{
	width:43%;
	margin-bottom:30px;
}

.double-slick{
	padding-top:25px;
}

.double-slick img{
	box-sizing: border-box;
	padding:5px;
}

/*タブレット用*/
@media screen and (max-width: 820px){

	.title-img{
		width:12%;
		margin:20px auto 20px;
		padding:70px 0 30px;
	}

	.mid-caption{
		width:65%;
		margin:30px auto;
	}

	.mid-wrapper{
		width:90%;
	}
	
	.relative-img-01{
		width:17%;
		height:100%;
		top:8%;
		left:86%;
	}

	.relative-img-02{
		width:25%;
		height:100%;
		top:60%;
		right:78%;
	}

	.relative-img-03{
		width:30%;
		height:100%;
		top:5%;
		left:74%;
	}

	.relative-img-04{
		width:35%;
		height:100%;
		top:4%;
		left:59%;
		transform: rotate(5deg);
	}

	.relative-img-05{
		width:18%;
		height:100%;
		top:10%;
		right:86%;
	}

	.relative-img-06{
		width:18%;
		height:100%;
		top:75%;
		left:86%;
	}

}

/*スマホ用*/
@media screen and (max-width:640px){

	.flex{
		display:block;
	}
	
	/*.main-wrapper{
		overflow: hidden;
	}*/
	
	.mid-wrapper, .place-info, .place-caption, .caption-container-no-flex .place-caption{
		width:90%!important;
		margin:auto;
	}
	
	.mid-caption h1{
		font-size:1.8rem;
	}

	.mid-wrapper h1{
		font-size:1.9rem;
	}
	
	h2{
		font-size:1.7rem;
	}

	.title-img{
		width:18%;
		margin:20px auto 20px;
		padding:20px 0 20px;
	}
	
	.mid-caption{
		width:85%;
	}
	
	.round-img{
		width:55%;
		margin:10px auto 40px;
	}
	
	.place-name, .big-img, .caption-container, .big-slide, .flex-img img{
		width:100%!important;
	}
	
	.place-name{
		padding:0;
	}
	
	.place-img{
		width:85%;
		margin:auto;
		padding-top:20px;
	}
	
	.koko{
		width:40%;
		right:2%;
		transform: rotate(5deg);
		margin-bottom:5px;
	}
	
	.caption-container{
		padding:20px 0;
	}
	
	.big-slide p{
		font-size:1.3rem;
	}
	
	.flex-img{
		display:block;
	}
	
	.flex-img{
		width:85%;
		margin:auto;
	}
	
	.flex-img img{
		margin-bottom:20px;
	}
	
	.relative-img-01{
		width:27%;
		height:100%;
		top:300px;
		left:78.5%;
	}

	.relative-img-02{
		width:50%;
		height:100%;
		top:98.5%;
		right:52%;
	}

	.relative-img-03{
		width:41%;
		height:100%;
		top:780px;
		left:61%;
	}

	.relative-img-04{
		width:55%;
		height:100%;
		top:97.8%;
		left:1%;
		transform: rotate(8deg);
	}

	.relative-img-05{
		width:30%;
		height:100%;
		top:2%;
		right:75%;
	}

	.relative-img-06{
		width:30%;
		height:100%;
		top:99%;
		left:70%;
	}

	.yomo-title{
		width:80%;
	}
	
}
/* CSS Document */