@charset "UTF-8";

html{
	transform: translate3d(0,0,0);
}

.flex{
	justify-content: space-between;
	align-items: center;
}

.title-img{
	width:500px;
	margin:50px auto;
	display:flex;
	justify-content: space-between;
	height:auto;
}

.title_01{
	width:50%;
}

.title_02{
	width:28%;
	margin-top:100px;
}

.first-wrapper .mid-caption, .second-wrapper .mid-caption{
	width:800px;
	margin:30px auto;
}

.first-wrapper, .second-wrapper, .third-wrapper, .fourth-wrapper, .fifth-wrapper{
	box-sizing: border-box;
	padding:50px 0;
	font-family:"Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
	color:#000;
}

.first-wrapper h1, .second-wrapper h1, .third-wrapper h1, .fourth-wrapper h1, .fifth-wrapper h1{
	font-size:1.7rem;
	line-height:2.3;
	color:#000;
}

.first-wrapper, .third-wrapper{
	background-color:#c4e2dd;
}

.second-wrapper{
	background-color:#fefef5;
}

.fourth-wrapper{
	background-color:#f4f0f1;
}

.mid-container{
	width:900px;
	margin:60px auto 20px;
	box-sizing: border-box;
	padding:50px 0 30px;
}

.third-wrapper .mid-container{
	margin:20px auto -30px!important;
	padding:20px 0 10px!important;
}

.second-wrapper .mid-container{
	margin:40px auto -120px!important;
	padding:20px 0!important;
}

.fourth-wrapper .mid-container{
	margin:40px auto -30px!important;
	padding:20px 0 30px!important;
}

.place-img-top{
	width:100%;
	height:40vw;
	box-sizing: border-box;
	padding:20px;
	margin:30px auto;
	background-size:cover;
	background-repeat: no-repeat;
	position:relative;
}

.place-img-top .place-title img{
	position:absolute;
	bottom:20px;
	width:auto;
	height:50px;
	z-index:10;
}

.caption-flex{
	margin:40px 0;
	padding:30px 0;
}

.text-flex-box{
	width:65%;
}

.img-flex-box{
	width:30%;
}

.flex-mid-img{
	width:90%;
	margin:50px auto;
	justify-content: space-between;
	flex-wrap: wrap;
	gap:30px;
}

.mid-img{
	width:calc((100% - 15px * 2) / 2);
}

.first-wrapper .place-img-top{
	background-image: url("img/place-1-01.jpg");
}

.start{
	width:35%;
	position:relative;
	bottom:60px;
	right:50px;
	z-index:13;
}

.mid-caption{
	margin:50px auto;
	padding-top:40px;
}

.first-wrapper .flex-container{
	padding-top:70px;
}

.first-wrapper .flex-container .small-flex-box{
	width:40%;
	align-items: center;
}

.first-wrapper .flex-container .small-flex-img{
	width:30%;
}

.swing {
	animation: swing 2s ease-in-out infinite;
	will-change: animation;
}
/* swing */
@keyframes swing {
    20% {
        transform: rotate(15deg)
    }
    40% {
        transform: rotate(-10deg)
    }
    60% {
        transform: rotate(5deg)
    }
    80% {
        transform: rotate(-5deg)
    }
    100% {
        transform: rotate(0deg)
    }
}

.second-wrapper .place-img-top{
	background-image: url("img/place-2-03.jpg");
}

.dekita, .oishii{
	width:25%;
	position:relative;
	bottom:70px;
	right:30px;
	z-index:12;
}

.address{
	box-sizing:border-box;
	padding:20px 0;
}

.address p{
	font-size:1.2rem!important;
}

.second-wrapper .round-img{
	width:14%;
	position:relative;
	left:120px;
	top:20px;
	margin-bottom:-90px;
	z-index:14;
}

.third-wrapper .place-img-top{
	background-image:url("img/place-3-01.jpg");
}

.fourth-wrapper .place-img-top{
	background-image: url("img/place-4-01.jpg");
}

.fifth-wrapper {
	margin-top:-100px;
}

.pc-wave{
	display: block;
}

.sp-wave{
	display:none;
}

.wave {
  height:65vw;
  width: 100%;
  background-image: url("img/asquare-top-img.jpg");
  background-size: cover;
  position:relative;
}

.wave .mid-caption{
	margin:50px 80px;
	box-sizing: border-box;
	padding:100px 0 0;
}

.bottom-caption{
	width:700px;
	position:absolute;
	bottom:30px;
	margin-left:80px;
	color:#fff!important;
}

.wave .round-img{
	width:16%;
	position:relative;
	top:40vw;
	left:75%;
	z-index:15;
}

.asquare-flex{
	width:800px;
	margin:50px auto;
	padding:60px 0 0;
	flex-wrap: wrap;
	gap:50px 30px;
	justify-content: space-between;
	align-items:flex-start;
}

.place-small-box{
	width:calc((100% - 30px * 2) / 3);
}

.place-small-box p, .nakaura-img p{
	font-size:1.3rem;
	box-sizing: border-box;
	padding:10px 5px;
}

.as-round, .as-round p, .nakaura-img p{
	text-align: center!important;
}

.as-round img{
	width:80%;
}

.nakaura-box{
	width:900px;
	margin:40px auto 0;
	padding-top:30px;
}

.nakaura-img{
	width:20%;
}

.nakaura-caption{
	width:75%;
}

.nakaura-caption h1{
	padding-bottom:20px;
}

.yomo-title{
	width:40%;
	margin-bottom:50px;
}

.yomoyama_txt .flex{
	align-items: center!important;
	justify-content: space-between!important;
}

.yomoyama_box .small{
	padding-top:20px;
}

.yomo-flex-text h2{
	margin-bottom:20px;
	font-family:"Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
}

.yomo-flex-text{
	width:68%;
}

.yomo-flex-img{
	width:28%;
}

.edit-box{
	padding-bottom:70px;
}

.edit-img{
	width:80%;
	margin:30px auto;
}

.edit-text h1{
	font-family:"Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
	font-size:2.5rem;
	text-align: center;
	margin-bottom:20px;
}

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

	.title-img{
		margin:30px auto;
	}

	.title_01{
		width:45%;
	}

	.title_02{
		width:28%;
		margin-top:130px;
	}
	
	.first-wrapper .mid-caption, .second-wrapper .mid-caption{
		width:600px;
	}
	
	.mid-container{
		width:700px;
		margin:60px auto 20px;
		padding:50px 0 30px;
	}
	
	.place-img-top{
		height:50vw;
	}
	
	.first-wrapper .flex-container{
		width:550px;
		margin:30px auto 0;
		padding-top:50px;
	}

	.first-wrapper .flex-container .small-flex-box{
		width:50%;
		align-items: center;
		justify-content: space-between;
	}

	.first-wrapper .flex-container .small-flex-img{
		width:40%;
	}

	.second-wrapper .mid-container{
		margin:40px auto -90px!important;
		padding:20px 0!important;
	}

	.third-wrapper .mid-container{
		margin:20px auto -30px!important;
		padding:20px 0 10px!important;
	}
	
	.fourth-wrapper .mid-container{
		margin:10px auto 20px!important;
		padding:20px 0 30px!important;
	}

	.second-wrapper .round-img{
		width:20%;
		position:relative;
		left:30px;
		top:30px;
		margin-bottom:-90px;
		z-index:14;
	}
	.wave{
		padding-top:30px;
	}
	
	.wave .mid-caption{
		margin:30px;
		box-sizing: border-box;
		padding:20px;
		background-color:rgba(255,246,246,0.7);
	}

	.bottom-caption{
		bottom:10px;
	}

	.wave .round-img{
		width:18%;
		position:relative;
		top:30vw;
		left:77%;
		z-index:15;
	}
	
	.asquare-flex, .nakaura-box{
		width:700px;
	}

}

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

	.flex-mid-img, .small-flex-box, .asquare-flex{
		display:flex!important;
	}

	.title-img{
		width:80%;
		margin:0 auto;
	}

	.title_01{
		width:50%;
	}

	.title_02{
		width:30%;
		margin-top:130px;
	}
	
	.first-wrapper .mid-caption{
		width:80%;
	}
	
	.second-wrapper .mid-caption{
		width:100%;
	}

	.first-wrapper h1, .second-wrapper h1, .third-wrapper h1, .fourth-wrapper h1, .fifth-wrapper h1, .edit-text h1{
		font-size:1.5rem;
	}
	
	.mid-container, .nakaura-box{
		width:80%;
	}

	.mid-container{
		margin:40px auto 20px;
		padding:30px 0;
	}
	
	.first-wrapper .mid-container{
		padding:40px 0 0;
	}
	
	.start, .dekita, .oishii{
		width:55%;
		bottom:50px;
		right:30px;
	}
	
	.place-img-top .place-title img{
		bottom:10px;
		height:25px;
	}
	
	.caption-flex, .nakaura-box, .yomo-flex-box, .first-wrapper .flex-container{
		display: block!important;
	}
	
	.first-wrapper .flex-container, .yomo-title, .yomo-flex-text, .edit-img{
		width:100%;
	}
	
	.second-wrapper .mid-container{
		margin:20px auto -50px!important;
		padding:20px 0!important;
	}

	.third-wrapper .mid-container{
		margin:-20px auto -40px!important;
		padding:20px 0 10px!important;
	}

	.second-wrapper .round-img{
		width:30%;
		left:10px;
	}

	
	.small-flex-img{
		width:50%!important;
		position:relative;
		top:100px;
		left:50%;
		margin-top:-80px;
		margin-bottom:-30px;
	}
	
	.text-flex-box, .nakaura-caption{
		width:100%;
	}

	.small-flex-box{
		width:80%!important;
		margin:-50px auto 20px;
	}

	.text-flex-box{
		margin:20px auto;
	}

	.img-flex-box{
		width:50%;
		margin:auto;
	}
		
	.flex-mid-img{
		width:100%;
		margin:50px auto;
		gap:0;
	}
	
	.mid-img{
		width:48%;
	}
	
	.second-wrapper .flex-mid-img{
		gap:20px 10px;
	}
	
	.second-wrapper .mid-img{
		width:calc((100% - 5px * 2) / 2);
	}
	
	.fifth-wrapper{
		padding-bottom:0;
	}

	.nakaura-img{
		width:60%;
		margin:20px auto 0;
	}

	.pc-wave{
		display:none;
	}
	
	.sp-wave{
		display:block;
	}
	
	.sp-wave .mid-caption, .sp-wave .bottom-caption{
		width:80%;
	}
	
	.sp-wave .bottom-caption{
		position:static!important;
		margin:20px auto;
		color:#000!important;
	}
	
	.asquare-flex{
		width:90%;
		margin:30px auto;
		padding:20px 0 0;
		gap:50px 10px;
	}

	.place-small-box{
		width:calc((100% - 5px * 2) / 2);
	}
	
	.yomoyama_box{
		margin-top:20px;
	}

	.yomo-flex-img{
		width:80%;
		margin-top:15px;
	}
	
	

}
/* CSS Document */

