@charset "utf-8";
/* CSS Document */


/* menu
   ========================================================================== */
.menu{
	margin: 0 0 0;
	position: relative;
}

.menu .menu_list{
	margin: 0 0 0;
}

.menu .menu_list > li{
	margin: 0 0 0;
	position: relative;
}

.menu .menu_list .inner{
	padding: 0;
}

.menu .menu_list .pc{
	display: none;
}

.menu .menu_list .photo{
	height: 50vw;
}

.menu .menu_list .text_box{
	padding: 5vw 3vw;
}

.menu .menu_list .text_box h3{
	font-size: 5vw;
	letter-spacing: 0.2em;
}

.menu .menu_list .text_box p{
	margin: 3vw 0 0;
	letter-spacing: 0.15em;
}


/* concept
   ========================================================================== */
.concept{
	margin: 0 0 0;
	position: relative;
}

.concept .inner{
	padding: 10vw 3vw;
}

.concept p{
	font-size: 4.1vw;
	letter-spacing: 0.15em;
	line-height: 230%;
}

.concept p .tab,
.concept p .pc{
	display: none;
}


/* reserve
   ========================================================================== */
.reserve{
	margin: 0 0 0;
	position: relative;
}

.reserve .inner{
	padding: 10vw 3vw;
}

.reserve .reserve_list{
	font-size: 0;
}

.reserve .reserve_list > li{
	margin: 2vw 0 0;
	display: inline-flex;
	vertical-align: top;
	box-sizing: border-box;
	width: 49%;
	height: 15vw;
	line-height: 0;
	border: 1px solid #DD0000;
	justify-content: center;
	align-items: center;
	overflow: hidden;
}

.reserve .reserve_list > li:nth-child(2n+2){
	margin-left: 2%;
}

.reserve .reserve_list > li:nth-child(2){
	border-color: #51B0E1;
}

.reserve .reserve_list > li:nth-child(3){
	border-color: #2CBF13;
}

.reserve .reserve_list > li:nth-child(4){
	border-color: #040404;
}

.reserve .reserve_list > li a{
	padding: 4vw 7vw;
	display: block;
	width: 100%;
	line-height: 0;
	text-align: center;
}

.reserve .design_table{
	margin-top: 10vw;
}


/* contact
   ========================================================================== */
.contact{
	margin: 0 0 0;
	position: relative;
}

.contact .inner{
	padding: 10vw 3vw;
}

/* form */
.req{
	color: #E54C39;
}

.contact table{
	width: 100%;
	font-size: 16px;
	letter-spacing: 0;
	box-sizing: border-box;
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
}

.contact th,
.contact td{
	width: 100%;
	display: block;
	font-weight: normal;
	border-bottom: none;
	box-sizing: border-box;
}

.contact tr:nth-child(2n+2){
	border-top: 1px solid #DDDDDD;
	border-bottom: 1px solid #DDDDDD;
}

.contact th{
	padding: 10px;
	font-weight: bold;
}

.contact td{
	padding: 0 10px;
}

.contact td .border{
	padding: 10px 0;
	border-top: 1px solid #ccc;
}

.contact input,
.contact textarea,
.contact select{
	font-size: 16px;
	padding: 5px;
	box-sizing: border-box;
	width: 100%;
	border: 1px solid #ddd;
	vertical-align: middle;
}

.zsk_btn_area{
	margin: auto;
	text-align: center;
	padding: 30px 0 0;
	font-size: 0;
	box-sizing: border-box;
	max-width: 500px;
}

.zsk_btn_area button{
	font-size: 18px;
	color: #FFF;
	border: none;
	position: relative;
	overflow: hidden;
	text-align: center;
}

.zsk_btn_area button span{
	padding: 10px 0;
	font-size: 18px;
	line-height: 150%;
	color: #FFF;
	border: none;
	display: block;
	z-index: 1;
}

.zsk_btn_area .zsk_btn01{
	background: #C91B53;
	width: 100%;
}

.zsk_btn_area .zsk_btn02{
	margin-right: 2%;
	background: #ccc;
	width: 28%;
}

.zsk_btn_area .zsk_btn03{
	background: #C91B53;
	width: 70%;
}

.thanks p{
	font-size: 4vw;
	line-height: 150%;
}

.thanks .go_top_btn{
	margin: 5vw 0 0;
	text-align: center;
}


@media screen and (min-width : 500px){


	/* menu
	   ========================================================================== */
	.menu{
		margin: 0 0 0;
		position: relative;
	}
	
	.menu .menu_list{
		margin: 0 0 0;
	}
	
	.menu .menu_list > li{
		margin: 0 0 0;
		position: relative;
	}
	
	.menu .menu_list .inner{
		padding: 0;
		display: flex;
	}
	
	.menu .menu_list .sp{
		display: none;
	}
	
	.menu .menu_list .pc{
		display: block;
	}
	
	.menu .menu_list .text_box,
	.menu .menu_list .photo{
		width: 50%;
		height: 35vw;
	}
	
	.menu .menu_list .text_box{
		padding: 5vw 3vw;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}
	
	.menu .menu_list .text_box h3{
		font-size: 3.5vw;
	}
	
	.menu .menu_list .text_box p{
		margin: 2vw 0 0;
	}


	/* concept
	   ========================================================================== */
	.concept{
		margin: 0 0 0;
	}
	
	.concept .inner{
		padding: 8vw 2vw;
	}
	
	.concept p{
		font-size: 2.4vw;
		text-align: center;
	}

	.concept p .tab,
	.concept p .pc{
		display: block;
	}


	/* reserve
	   ========================================================================== */
	.reserve{
		margin: 0 0 0;
		position: relative;
	}
	
	.reserve .inner{
		padding: 8vw 2vw;
	}
	
	.reserve .reserve_list{
		display: flex;
	}
	
	.reserve .reserve_list > li{
		margin: 0 0 0 2%;
		width: 23.5%;
		height: 9vw;
	}
	
	.reserve .reserve_list > li:nth-child(2n+2){
		margin-left: 2%;
	}
	
	.reserve .reserve_list > li:first-child{
		margin-left: 0;
	}
	
	.reserve .reserve_list > li a{
		padding: 3vw 3vw;
	}
	
	.reserve .design_table{
		margin-top: 6vw;
	}


	/* contact
	   ========================================================================== */
	.contact .inner{
		padding: 8vw 2vw;
	}
	
	/* form */
	.contact table{
		width: 100%;
		font-size: 16px;
		box-sizing: border-box;
		border-bottom: none;
	}
	
	.contact th,
	.contact td{
		width: auto;
		display: table-cell;
		vertical-align: middle;
		box-sizing: border-box;
	}
	
	.contact th{
		padding: 0 30px;
		width: 40%;
	}
	
	.contact .title_top th{
		padding-top: 30px;
		padding-bottom: 30px;
		vertical-align: top;
	}
	
	.contact td{
		padding: 23px 0;
	}

	.contact td .border{
		padding: 0 30px;
		min-height: 24px;
		border-top: none;
		border-left: 1px solid #ccc;
	}
	
	.contact input,
	.contact textarea,
	.contact select{
		font-size: 16px;
		padding: 5px;
		box-sizing: border-box;
		width: 100%;
		border: 1px solid #ddd;
	}
	
	.contact select{
		vertical-align: middle;
	}
	
	.zsk_btn_area{
		text-align: center;
		padding: 30px 0 0;
		margin: 0 auto;
		max-width: 55%;
	}
	
	.zsk_btn_area button{
		font-size: 30px;
	}

	.zsk_btn_area button span{
		padding: 10px 0;
		font-size: 22px;
	}
	
	.zsk_btn_area .zsk_btn01{
		width: 70%;
	}

	.thanks p{
		font-size: 16px;
		line-height: 230%;
		text-align: center;
	}
	
	.thanks .go_top_btn{
		margin: 40px 0 0;
		text-align: center;
	}
    

}
@media screen and (min-width : 768px){


    

}
@media screen and (min-width : 769px){


	/* menu
	   ========================================================================== */
	.menu{
		margin: 0 0 0;
		position: relative;
	}
	
	.menu .menu_list{
		margin: 0 0 0;
	}
	
	.menu .menu_list > li{
		margin: 0 0 0;
		position: relative;
	}
	
	.menu .menu_list > li::after{
		content: "";
		width: 1000%;
		height: 1px;
		background: #ddd;
		position: absolute;
		margin: auto;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: -1;
	}
	
	.menu .menu_list > li:last-child::after{
		display: none;
	}
	
	.menu .menu_list .inner{
		padding: 0;
		display: flex;
	}
	
	.menu .menu_list .text_box,
	.menu .menu_list .photo{
		width: 50%;
		height: 300px;
	}
	
	.menu .menu_list .text_box{
		padding: 0 15px 0 40px;
	}
	
	.menu .menu_list > li:nth-child(2n+2) .text_box{
		padding: 0 40px 0 0;
	}
	
	.menu .menu_list .text_box h3{
		font-size: 30px;
	}
	
	.menu .menu_list .text_box p{
		margin: 15px 0 0;
	}


	/* concept
	   ========================================================================== */
	.concept{
		margin: 0 0 0;
	}
	
	.concept .inner{
		padding: 75px 0 90px;
	}
	
	.concept p{
		font-size: 17px;
	}

	.concept p .tab{
		display: none;
	}


	/* reserve
	   ========================================================================== */
	.reserve{
		margin: 0 0 0;
		position: relative;
	}
	
	.reserve .inner{
		padding: 98px 0 105px;
	}
	
	.reserve .reserve_list{
		display: flex;
	}
	
	.reserve .reserve_list > li{
		height: 70px;
	}
	
	.reserve .reserve_list > li a{
		padding: 25px 0;
	}
	
	.reserve .design_table{
		margin-top: 52px;
	}


	/* contact
	   ========================================================================== */
	.contact .inner{
		padding: 70px 0 120px;
	}
	
	.contact th{
		padding: 0 30px;
		width: 30%;
		font-size: 18px;
	}
	
	.contact td{
		padding: 23px 0;
		font-size: 18px;
	}

	.contact td .border{
		padding: 0 30px;
	}
	
	.contact input,
	.contact textarea,
	.contact select{
		font-size: 18px;
		padding: 10px;
	}

	.zsk_btn_area{
		padding: 50px 0 0;
		max-width: none;
	}
	
	.zsk_btn_area button{
		cursor: pointer;
		transition: .3s;
		position: relative;
		overflow: hidden;
	}

	.zsk_btn_area button span{
		padding: 0;
    	height: 80px;
    	font-size: 26px;
    	font-weight: 400;
    	letter-spacing: 0.20em;
    	transition: .5s;
    	z-index: 1;
    	position: relative;
    	line-height: 80px;
	}
	
	.zsk_btn_area .zsk_btn01,
	.zsk_btn_area .zsk_btn03{
		width: 400px;
		border: 1px solid #C91B53;
	}

	.zsk_btn_area .zsk_btn02{
		width: 200px;
	}

	.zsk_btn_area .zsk_btn02:hover{
		opacity: .7;
	}
	
	button.anime_btn:hover span{
    	animation: anime_btn_text02 0.8s cubic-bezier(0.77, 0, 0.175, 1);
		animation-fill-mode: forwards;
	}
	
	button.anime_btn::after{
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: #fff;
		transform: translate(-100%,0);
	}
	
	button.anime_btn:hover::after{
    	animation: anime_btn 0.8s cubic-bezier(0.77, 0, 0.175, 1);
		animation-fill-mode: forwards;
	}

	.thanks p{
		font-size: 17px;
	}
	
	.thanks .go_top_btn{
		margin: 40px 0 0;
	}


}
@media screen and (min-width : 1025px){

	
	/* attachment
	   ========================================================================== */
	.attachment{
		background-attachment: fixed;
	}

	footer .footer_photo.photo_anime.on{
		animation-name: none;
	}

	
}


@keyframes anime_btn {
	0% { transform: translate(-100%,0);}
	48% { transform: translate(0,0);}
	52% { transform: translate(0,0); }
	100% { transform: translate(100%,0); }
}

@keyframes anime_btn_text02 {
	0% { color: #fff;}
	48% { color: #C91B53;}
	52% { color: #C91B53;}
	100% { color: #fff;}
}