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

.sp{
	display: none;
}

/*---------------右下ポップアップ----------------*/

/* 右側の追従バナーエリア */
#flyin {
z-index:9000;
border-radius:10px 0 0;
width: 188px;
position:fixed;
bottom: 120px;
right:0px;
-webkit-backface-visibility:visible!important;
-ms-backface-visibility:visible!important;
backface-visibility:visible!important;
-webkit-animation:flipInY 1s cubic-bezier(0.77,0,.175,1);
-moz-animation:flipInY 1s cubic-bezier(0.77,0,.175,1);
-o-animation:flipInY 1s cubic-bezier(0.77,0,.175,1);
animation:flipInY 1s cubic-bezier(0.77,0,.175,1);
-webkit-transition:bottom .5s ease,background-position .5s ease;
transition:bottom .5s ease,background-position .5s ease;
padding:0;
filter: drop-shadow(0px 0px 7px #aaa);
transition: 0.3s ease-in-out;
}

#flyin #flying_subscribe {
-webkit-transition:opacity .5s ease,background-color .5s ease;
transition:opacity .5s ease,background-color .5s ease;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border:none;
width:100%;
color:#fff;
font-size:16px;
font-family:'Goudy Bookletter 1911',arial,sans-serif;
background:#55a753;
text-align:center;
cursor:pointer;
padding:11px 0 10px;
}

#flyin #flying_subscribe:hover,#flyin .flyinbutton:hover {
background-color:#408c3f;
}

#flyin #exit_emailinput {
-webkit-transition:opacity .5s;
transition:opacity .5s;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
width:220px;
background:#f8fafa;
border:1px solid #e4e9e9;
color:#b3b3b3;
font-size:13px;
margin:0 0 10px;
padding:11px 20px;
}

#flyin .flyinclose {
-webkit-transition:0 .5s ease .2s,opacity .5s ease,top .5s ease .2s;
transition:transform .5s ease .2s,opacity .5s ease,top .5s ease .2s;
content:'';
display:block;
z-index:2;
box-shadow:0 0 10px rgba(0,0,0,.2);
cursor:pointer;
width:30px;
height:30px;
border-radius:30px;
background:#fff url(//cdn.elegantthemes.com/img/exitpopup-x.png) no-repeat center center;
position:absolute;
top:-10px;
left:-5px;
margin:0;
padding:0;
}

#flyin .flyinbutton {
-webkit-transition:top .5s ease,opacity .5s ease,background-color .5s ease;
transition:top .5s ease,opacity .5s ease,background-color .5s ease;
width:300px;
height:20px;
top:400px;
opacity:0;
position:absolute;
left:10px;
z-index:5;
display:block;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border:none;
color:#fff;
font-size:16px;
font-family:'Goudy Bookletter 1911',arial,sans-serif;
background:#55a753;
text-align:center;
cursor:pointer;
padding:11px 0 10px;
}

.hide {
opacity:0;
-webkit-transition:opacity 1s ease;
transition:opacity 1s ease;
}

.hide div {
top:60%!important;
-webkit-transition:top 1s ease;
transition:top 1s ease;
}


.target.is-hidden {
  padding-top: 0;
  padding-bottom: 0;
  line-height: 0;
  pointer-events: none;
  display:none;
}

div#flyin:hover {
    transform: translateY(-5px);
    transition: all .5s;
}





/*---------------右下ポップアップバナー----------------*/

/* 右側の追従バナーエリア */
.flyin_banner_sp {
	display: none;
}

#flyin_banner {
 	background-color: #dbdcdc;
    z-index: 9000;
    width: 74px;
    position: fixed;
    right: 0px;
	top: 100px;
    padding: 12px 0 12px 12px;
	border-radius: 10px 0px 0px 10px;
    -webkit-backface-visibility: visible!important;
    -ms-backface-visibility: visible!important;
    backface-visibility: visible!important;
    -webkit-animation: flipInY 1s cubic-bezier(0.77,0,.175,1);
    -moz-animation: flipInY 1s cubic-bezier(0.77,0,.175,1);
    -o-animation: flipInY 1s cubic-bezier(0.77,0,.175,1);
    animation: flipInY 1s cubic-bezier(0.77,0,.175,1);
    -webkit-transition: bottom .5s ease,background-position .5s ease;
    transition: bottom .5s ease,background-position .5s ease;
    transition: 0.3s ease-in-out;
}


#flyin_banner a {
    display: block;
    background-color: #ed848c;
    border-radius: 10px 0px 0px 10px;
    margin-top: 5px;
    font-size: 15px;
    margin-left: auto;
    margin-right: auto;
    color: #fff;
    letter-spacing: 0.1em;
    height: 180px;
    position: relative;
    writing-mode: vertical-lr;
	text-align: center;
	padding-right: 20px;
	padding-left: 15px;
}

#flyin_banner a.voice {
    background-color: #ef802e;
}

#flyin_banner a.contact {
    background-color: #06C755;
}

#flyin_banner #flying_subscribe:hover,#flyin_banner .flyinbutton:hover {
	background-color:#408c3f;
}

#flyin_banner .flyinclose {
	-webkit-transition:0 .5s ease .2s,opacity .5s ease,top .5s ease .2s;
	transition:transform .5s ease .2s,opacity .5s ease,top .5s ease .2s;
	content:'';
	display:block;
	z-index:2;
	box-shadow:0 0 10px rgba(0,0,0,.2);
	cursor:pointer;
	width:30px;
	height:30px;
	border-radius:30px;
	background:#fff url("../images/close_button.svg");
	background-repeat: no-repeat;
	position:absolute;
	top:-10px;
	left:-5px;
	margin:0;
	padding:0;
}

#flyin_banner a.reservation::before {
	content: url("../images/icn_reserve.svg");
    width: 36px;
    height: 36px;
	display: inline-block;
	margin-bottom: 10px;
}

#flyin_banner a.voice::before {
    content: url("../images/voice_icon.svg");
    width: 36px;
    height: 36px;
	display: inline-block;
	margin-bottom: 10px;
}

#flyin_banner a.contact::before {
	content: url("../images/icn_info.svg");
    width: 36px;
    height: 36px;
	display: inline-block;
	margin-bottom: 10px;
}

#flyin_banner a:hover {
	opacity: 0.8;
}

#flyin_banner a.sp {
	display: none;
}






/*---------------SP----------------*/

@media screen and (max-width:950px){

.pc{
	display: none;
}
	
.sp{
	display: block;
}

	
	

/*---------------------右下ポップアップSP-------------------------------*/

/* 右側の追従バナーエリア */
#flyin {
z-index:7000;
width: 100%;
position:fixed;
top:auto;
	bottom: 0px;
right:auto;
	background-color: #f0f0f0;
	text-align: center;
	height: 110px;
	vertical-align: middle;
}
	
.oubo_flex{
	width: 100%;
	max-width: 340px;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 5px;
	vertical-align: middle;
	margin-left: auto;
	margin-right: auto;
}
	
#flyin #flying_subscribe {
-webkit-transition:opacity .5s ease,background-color .5s ease;
transition:opacity .5s ease,background-color .5s ease;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border:none;
width:100%;
color:#fff;
font-size:16px;
font-family:'Goudy Bookletter 1911',arial,sans-serif;
background:#55a753;
text-align:center;
cursor:pointer;
padding:11px 0 10px;
}

#flyin #flying_subscribe:hover,#flyin .flyinbutton:hover {
background-color:#408c3f;
}

#flyin #exit_emailinput {
-webkit-transition:opacity .5s;
transition:opacity .5s;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
width:220px;
background:#f8fafa;
border:1px solid #e4e9e9;
color:#b3b3b3;
font-size:13px;
margin:0 0 10px;
padding:11px 20px;
}

#flyin .flyinclose {
-webkit-transition:0 .5s ease .2s,opacity .5s ease,top .5s ease .2s;
transition:transform .5s ease .2s,opacity .5s ease,top .5s ease .2s;
content:'';
display:block;
z-index:2;
box-shadow:0 0 10px rgba(0,0,0,.2);
cursor:pointer;
width:30px;
height:30px;
border-radius:30px;
background:#fff url(//cdn.elegantthemes.com/img/exitpopup-x.png) no-repeat center center;
position:absolute;
top:-10px;
left:-5px;
margin:0;
padding:0;
}

#flyin .flyinbutton {
-webkit-transition:top .5s ease,opacity .5s ease,background-color .5s ease;
transition:top .5s ease,opacity .5s ease,background-color .5s ease;
width:300px;
height:20px;
top:400px;
opacity:0;
position:absolute;
left:10px;
z-index:5;
display:block;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border:none;
color:#fff;
font-size:16px;
font-family:'Goudy Bookletter 1911',arial,sans-serif;
background:#55a753;
text-align:center;
cursor:pointer;
padding:11px 0 10px;
}

.hide {
opacity:0;
-webkit-transition:opacity 1s ease;
transition:opacity 1s ease;
}

.hide div {
top:60%!important;
-webkit-transition:top 1s ease;
transition:top 1s ease;
}

.target.is-hidden {
  padding-top: 0;
  padding-bottom: 0;
  line-height: 0;
  pointer-events: none;
  display:none;
}

div#flyin:hover {
    transform: translateY(0px);
    transition: all .5s;
}
	
	
	
/*-------------右下ポップアップSP バナー--------------*/

/* 右側の追従バナーエリア */
#flyin_banner {
    background-color: #544c4b;
    display: flex;
    z-index: 7000;
    justify-content: center;
    width: 100vw;
    position: fixed;
    top: auto;
    bottom: 0px;
    text-align: center;
    height: 100px;
    vertical-align: middle;
    padding-right: 10px;
	padding-left: 10px;
	border-radius: 0px;
}
	
#flyin_banner a{
    background-color: #ed848c;
    border-radius: 10px;
	 margin-top: 0px;
	font-size: calc(100vw / 33);
	padding: 0px;
    width: 100%;
	writing-mode: rl;
	display: inline-block;
	height: auto;
	padding-top: 5px;
}
	
#flyin_banner a.voice {
	background-color: #ef802e;
	margin-left: 10px;
	margin-top: 0;
}
	
#flyin_banner a.contact {
	margin-left: 10px;
    margin-top: 0;
}

#flyin_banner a.reservation::before {
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 5px;
}
	
#flyin_banner a.voice::before {
    display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 5px;
}
	
#flyin_banner a.contact::before {
    display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 5px;
}

#flyin_banner #flying_subscribe:hover,#flyin_banner .flyinbutton:hover {
background-color:#408c3f;
}

#flyin_banner .flyinclose {
-webkit-transition:0 .5s ease .2s,opacity .5s ease,top .5s ease .2s;
transition:transform .5s ease .2s,opacity .5s ease,top .5s ease .2s;
content:'';
display:block;
z-index:2;
box-shadow:0 0 10px rgba(0,0,0,.2);
cursor:pointer;
width:30px;
height:30px;
border-radius:30px;
background:#fff url("../images/close_button.svg")no-repeat center center;
position:absolute;
top:-10px;
right:0px;
left: auto;
margin:0;
padding:0;
}

#flyin_banner .flyinbutton {
-webkit-transition:top .5s ease,opacity .5s ease,background-color .5s ease;
transition:top .5s ease,opacity .5s ease,background-color .5s ease;
width:300px;
height:20px;
top:400px;
opacity:0;
position:absolute;
left:10px;
z-index:5;
display:block;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border:none;
color:#fff;
font-size:16px;
font-family:'Goudy Bookletter 1911',arial,sans-serif;
background:#55a753;
text-align:center;
cursor:pointer;
padding:11px 0 10px;
}

/*
div#flyin_banner:hover {
    transform: translateY(0px);
    transition: all .5s;
}		
*/
	

	
}

@media screen and (max-width: 600px) {
#flyin_banner a {
    font-size: calc(100vw / 28);
}
	
}