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

@font-face{
	font-family: 'WebSymbolsRegular';
	src: url('/font/websymbols-regular-webfont.eot');
	src: url('/font/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'),
			url('/font/websymbols-regular-webfont.woff') format('woff'),
			url('/font/websymbols-regular-webfont.ttf') format('truetype'),
			url('/font/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg');
	font-weight: normal;
	font-style: normal;
}

.roppongi-bg{
	background: #ecdecb;	
}

.harajuku-bg{
	background: #edd16d;	
}

.harajukuterrace-bg{
	background: #c7e6e0;	
}

/* 20210711 *add* */
.mogumogu-bg {
    background-image: -webkit-linear-gradient(135deg, #ffffff 0% 25%, #ddc5ac 25% 50%, #ffffff 50% 75%, #ddc5ac 75% 100%);
    -webkit-background-size: 40px 40px;
}

/* 20210718 *add* */
.doubutsuen-bg{
	background: #fcc2cd;	
}

/* 20210718 *add* */
.yokohama-bg{
	background: #d9eccc;	
}

.roppongi-bg:hover{
	background: #cec6a4;
}

.harajuku-bg:hover{
	background: #cfb946;
}

.harajukuterrace-bg:hover{
	background: #a9ceb9;
}

/* 20210711 *add* */
.mogumogu-bg:hover{
    background-image: -webkit-linear-gradient(135deg, #ffffff 0% 25%, #bfad85 25% 50%, #ffffff 50% 75%, #bfad85 75% 100%);
    -webkit-background-size: 40px 40px;
}

/* 20210718 *add* */
.doubutsuen-bg:hover{
	background: #deaaa6;	
}

/* 20210718 *add* */
.yokohama-bg:hover{
	background: #bbd4a5;	
}

#btn-list{
	margin: 0 20px;
}

#resv-btn a{
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
}

#resv-btn .title{
	color: #ffffff;
	font-size: 24px;
	font-weight: bold;
}

#resv-btn .title{
  text-shadow: 1px 1px 2px #bf9999;
}

#resv-btn .text{
	text-shadow: 1px 1px 2px #bf9999;
}

#resv-btn:hover .icon{
	text-shadow: 1px 1px 10px #ffffff, -1px -1px 10px #ffffff;
	color: transparent;
}

#resv-btn:hover .title{
	-webkit-animation: frombottom 0.5s ease;
	animation: frombottom 0.5s ease;
}

#resv-btn:hover .text{
	-webkit-animation: frombottom 0.5s ease;
	animation: frombottom 0.5s ease;
}


@-webkit-keyframes frombottom {
	0% { -webkit-transform: translateY(50px);}
	50% { -webkit-transform: translateY(-10px);}
	100% { -webkit-transform: translateY(0px);}
}
@keyframes frombottom {
	0% { transform: translateY(50px);}
	50% { transform: translateY(-10px);}
	100% { transform: translateY(0px);}
}



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

#resv-btn{
	border: 10px solid #ffffff;
	border-radius: 56px;
	box-shadow: 1px 1px 2px rgba(0,0,0,0.1), inset 1px 1px 30px rgba(255,255,255,0.7), inset -1px -1px 30px rgba(255,255,255,0.7);
	width: 330px;
	height: 120px;
	overflow: hidden;
	position: relative;
	-webkit-transition: all 0.5s linear;
	transition: all 0.5s linear;
}

#resv-btn .icon{
	color: #ffffff;
	font-family: 'WebSymbolsRegular', cursive;
	font-size: 46px;
	text-shadow: 1px 0px 1px rgba(255,255,255,0.7);
	line-height: 70px;
	position: absolute;
	width: 100%;
	height: 50%;
	left: 30px;
	top: 12%;
	-webkit-transition: all 0.2s linear;
	transition: all 0.2s linear;
}

#resv-btn .content{
	position: absolute;
	top: 30%;
	left: 100px;
	width: 100%;
	height: 50%;
}

#resv-btn .title{
	color: #ffffff;
	font-size: 24px;
	font-weight: bold;
}

#resv-btn .text{
	color: #000000;
	font-size: 14px;
	margin: 3px 0 0;
	display: none;
}

}

@media (min-width: 640px) and (max-width: 1024px) {

#resv-btn{
	border: 10px solid #ffffff;
	border-radius: 56px;
	box-shadow: 1px 1px 2px rgba(0,0,0,0.1), inset 1px 1px 30px rgba(255,255,255,0.7), inset -1px -1px 30px rgba(255,255,255,0.7);
	width: 250px;
	height: 100px;
	overflow: hidden;
	position: relative;
	-webkit-transition: all 0.5s linear;
	transition: all 0.5s linear;
}

#resv-btn a{
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
}

#resv-btn .icon{
	color: #ffffff;
	font-family: 'WebSymbolsRegular', cursive;
	font-size: 46px;
	text-shadow: 1px 0px 1px rgba(255,255,255,0.7);
	line-height: 70px;
	position: absolute;
	width: 100%;
	height: 50%;
	left: 30px;
	top: 0px;
	-webkit-transition: all 0.2s linear;
	transition: all 0.2s linear;
}

#resv-btn .content{
	position: absolute;
	top: 28%;
	left: 32%;
	width: 100%;
	height: 50%;
}

#resv-btn .title{
	color: #ffffff;
	font-size: 20px;
	font-weight: bold;
}

#resv-btn .text{
	color: #000000;
	font-size: 14px;
	margin: 3px 0 0;
	display:none;
}

}

@media (max-width: 639px) {

#resv-btn{
	border: 10px solid #ffffff;
	border-radius: 56px;
	box-shadow: 1px 1px 2px rgba(0,0,0,0.1), inset 1px 1px 30px rgba(255,255,255,0.7), inset -1px -1px 30px rgba(255,255,255,0.7);
	width: 95%;
	height: 96px;
	overflow: hidden;
	position: relative;
	-webkit-transition: all 0.5s linear;
	transition: all 0.5s linear;
}

#resv-btn a{
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
}

#resv-btn .icon{
	color: #ffffff;
	font-family: 'WebSymbolsRegular', cursive;
	font-size: 46px;
	text-shadow: 1px 0px 1px rgba(255,255,255,0.7);
	line-height: 70px;
	position: absolute;
	width: 100%;
	height: 50%;
	left: 30px;
	top: 0px;
	-webkit-transition: all 0.2s linear;
	transition: all 0.2s linear;
}

#resv-btn .content{
	position: absolute;
	top: 32%;
	left: 36%;
	width: 100%;
	height: 50%;
}

#resv-btn .title{
	color: #ffffff;
	font-size: 16px;
	font-weight: bold;
}

#resv-btn .text{
	color: #000000;
	font-size: 9px;
	margin: 3px 0 0;
	display:none;
}

}