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

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

.wrapper{
	width:100%;
	margin:0 auto;
	position:relative;
}


/* header */

header{
	border-top:5px solid #ED92B3;
}
header .head{
	padding:10px 0;
}
header .logo{
	width:65%;
	margin:0 auto;
}

.menu_btn{
}
.menu_btn a{
	width:34px;
	height:23px;
	display:block;
	position:fixed; top:25px; right:10px;
	pointer-events:auto;
	z-index:100;
	text-align:center;
}
.menu_btn a span.acc{
	width:34px;
	height:3px;
	margin:0 0 0 -17px;
	background:#ED92B3;
	border-radius:0;
	display:block;
	position:absolute; top:50%; left:50%;
	transition:0.2s;
}
.menu_btn a span.acc:before,
.menu_btn a span.acc:after{
	content:"";
	width:34px;
	height:3px;
	background:#ED92B3;
	border-radius:0;
	display:block;
	position:absolute; top:50%; left:0;
	transition:0.3s;
}
.menu_btn a span.acc:before{
	margin-top:-10px;
}
.menu_btn a span.acc:after{
	margin-top:8px;
}
.menu_btn a.on span.acc{
	background:transparent;
}
.menu_btn a.on span.acc:before,
.menu_btn a.on span.acc:after{
	margin-top:0;
}
.menu_btn a.on span.acc:before{
	transform:rotate(-45deg);
	-webkit-transform:rotate(-45deg);
}
.menu_btn a.on span.acc:after{
	transform:rotate(-135deg);
	-webkit-transform:rotate(-135deg);
}

.menu{
}
.menu .box{
	width:100%;
	height:100%;
	position:fixed; top:60px; left:0;
	z-index:50;
	display:none;
	text-align:center;
	pointer-events:auto;
}
.menu nav{
	border-top:1px solid #FFF;
}
.menu div{
	border-bottom:1px solid #FFF;
}
.menu div a{
	padding:15px 0;
	display:block;
	font-size:16px;
	color:#FFF;
	text-decoration:none;
}
.menu div a.on,
.menu div a:hover{
	background:#000;
	color:#FFF;
}
.menu .back{
	width:100%;
	height:100%;
	min-height:100%;
	position:fixed; top:0; left:0;
	background:#000;
	z-index:40;
	display:none;
}
.menu .back a{
	width:100%;
	height:100%;
	display:block;
}


/* main_contents*/

.main_image{
	position:relative;
	text-align:center;
}
.main_image:after{
	content:"※定休日（水）";
	padding:0 5px;
	background:#FFF;
	position:absolute; bottom:10px; right:10px;
	font-size:14px;
	line-height:22px;
	color:#333;
	font-weight:bold;
}

.container{
	padding:0 2% 20px 2%;
}
.container .wrapper{
	overflow:visible;
}
.main{
	width:77%;
	float:right;
}
.side{
	width:21%;
	padding:0;
	float:left;
	font-size:0;
}
.side .item{
	width:100%;
	margin-top:10px;
	float:none;
	text-align:center;
}
.side .item:nth-child(2n),
.side .item:last-child{
	margin-left:0;
}

h2{
	margin-top:10px;
	padding:0 2%;
	background:#ED92B3;
	border-top:3px solid #4F412F;
	border-bottom:3px solid #4F412F;
	font-size:17px;
	color:#FFF;
	text-shadow:-1px -1px 1px #999;
}

h2.point_title{
	padding-left:calc(2% + 100px);
	position:relative;
}
h2.point_title:after{
	content:"";
	width:100px;
	height:66px;
	background:url(../images/point/balloon.png) no-repeat;
	background-size:100% 100%;
	position:absolute; top:-35px; left:5px;
}
.point{
	padding:0;
}
.point .item{
	margin-top:20px;
	padding:20px 8px 8px 8px;
	background:#F9F8F4;
	border:2px solid #CABDAA;
	position:relative;
}
.point .number{
	width:20%;
	position:absolute; top:-18px; left:8px;
}
.point .text{
}

.photo{
	padding:0;
	font-size:0;
}
.photo .item{
	width:49%;
	margin-top:10px;
	padding:3px;
	border:solid 1px #CCBA9E;
	display:inline-block;
	vertical-align:top;
	font-size:14px;
	line-height:1.4;
	text-align:center;
}
.photo .item:nth-child(2n){
	margin-left:2%;
}
.photo.pickup .item{
	padding:0;
	border:none;
}
.photo.one .item{
	width:60%;
	margin:10px auto 0 auto;
	display:block;
}
.photo.one .item img{
	width:100%;
}
.photo.three .item,
.photo.four .item{
	width:32%;
	margin-right:2%;
}
.photo.three .item:nth-child(2n),
.photo.four .item:nth-child(2n){
	margin-left:0;
}
.photo.three .item:nth-child(3n),
.photo.four .item:nth-child(3n){
	margin-right:0;
}
.photo .item .title{
	padding:5px 5px 0 5px;
	font-weight:bold;
	text-align:left;
}
.photo .item .text{
	padding:0 5px;
	font-size:12px;
	text-align:left;
}
.photo .item .price{
	padding:3px 5px 5px 5px;
	color:#936;
	text-align:left;
}
.photo_text{
	margin:10px 2% 0 2%;
	padding:9px 11px;
	background:#FAF8F5;
	border:1px solid #CCBA9E;
	text-align:center;
}

.tel_banner{
	width:100%;
	margin:10px auto 0 auto;
	text-align:center;
}


/* rental */

.flow_sub_title{
	padding:5px 0;
	border-bottom:1px dashed #CCC;
	font-size:15px;
	text-align:right;
}
.flow{
}
.flow .item{
	padding:10px 0 5px 0;
}
h3{
	padding:5px 2% 4px 2%;
	background:#E98794 linear-gradient(#EE96A1, #E27483);
	font-size:16px;
	color:#FFF;
	font-weight:normal;
	text-shadow:-1px -1px 1px #999;
}
.flow .inner{
	padding:10px 2% 0 2%;
}
.flow .thum{
	width:22%;
	float:left;
}
.flow .thum img{
	width:100%;
}
.flow .text{
	width:75%;
	float:right;
}
.flow_banner{
	padding:0;
}
.flow_banner .item{
	margin-top:10px;
	text-align:center;
}


/* shop */

.map{
	height:0;
	margin:10px 0 0 0;
	padding-top:50%;
	position:relative;
	overflow:hidden;
}
.map iframe{
	width:100%;
	height:100%;
	position:absolute; top:0; left:0;
}

.shop{
	margin:10px 0 0 0;
	padding:15px;
	background:#FBE3EE;
}
.shop .name{
	font-size:22px;
}
.shop .address{
	padding-top:5px;
	font-size:16px;
}
.shop .text{
	padding-top:5px;
	text-align:right;
}
.shop .access{
	padding-top:5px;
	color:#005CAC;
}
.map_image{
	margin:10px 0 0 0;
	text-align:center;
}
.shop .map_image{
	margin:10px 0 0 0;
}

.table_box{
	margin:10px 0 0 0;
}

span.link_image{
	margin:10px 0 5px 0;
	display:block;
}


/* contact */

form .table_box{
	margin-top:20px;
}
.form_btn{
	margin:20px 2%;
	font-size:0;
	text-align:center;
}
.form_btn button{
	width:30%;
	margin:0 2%;
	padding:15px 0;
	display:inline-block;
	background:#ED92B3;
	border:none;
	border-radius:4px;
	outline:none;
	vertical-align:baseline;
	font-size:18px;
	color:#FFF;
	font-weight:normal;
	cursor:pointer;
}
.form_btn button.btn{
	width:50%;
}
.form_btn button.prev{
	background:#AAA;
}

.thanks{
	padding:30px 0 0 0;
	font-size:16px;
	line-height:1.7;
	text-align:center;
}


/* footer */

footer{
	background:url(../images/footer/bg.jpg) repeat-x;
	background-size:auto 100%;
	border-top:1px solid #DB8699;
}
footer .foot{
	padding:10px 2%;
	text-align:center;
}

footer .inner{
	margin-left:10%;
	display:inline-block;
	vertical-align:top;
	color:#352614;
	text-align:left;
}
footer .logo{
	width:80%;
}
footer .address{
	padding-top:5px;
}
footer .tel{
	padding-top:3px;
}

.copyright{
	padding:5px 2%;
	background:#31220F;
	font-size:12px;
	color:#FFF;
	text-align:center;
}
.top_marker{
	width:3%;
	position:fixed; bottom:30px; right:0;
	z-index:30;
}
.top_marker img{
	width:100%;
}

}