@charset "UTF-8";
:root {
  --main-color: #54676c;
  --blue: #5ac3e0;
}
html, body {
  overflow-x: hidden;
}
body {
  font-family: "Zen Maru Gothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-size: 16px;
  color: var(--main-color);
  font-weight: 500;
  -webkit-text-size-adjust: 100%;
  font-feature-settings: "palt";
	letter-spacing:1px;
  /*letter-spacing: .1em;*/
	line-height:1.5;
}
.al_right {text-align:right;}
.al_center {text-align:center;}
img {
	max-width: 100%;
	height: auto;
	vertical-align:middle;
	image-rendering: crisp-edges;
	image-rendering: -webkit-optimize-contrast;
}
.alignleft {
	float:left;
	margin:0 20px 20px 0;
}
.alignright {
	float:right;
	margin:0 0 20px 20px;
}
.aligncenter {
	clear: both;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
li {
	list-style-type:none;
}

@media screen and (max-width: 480px) {
	.sp {display: block;}
	.pc {display:none!important;}
}

@media screen and (min-width: 481px) {
	.pc {display: block;}
	.sp {display:none!important;}
}

a {
	transition: all .3s;
	color:var(--main-color);
	text-decoration:none;
}
a:hover {
	opacity: 0.7;
}
p::after {
	content:'';
    display: block; 
    clear:both;

}
.flex {
	display:flex;
}
.between {
	justify-content:space-between;
}
.start {
	justify-content:start;
}

.btntop {
	position:fixed;
	bottom:260px;
	right:3vw;
	opacity: 0;
	visibility: hidden;
	cursor:pointer;
}
.footbanner {
	position:fixed;
	bottom:20px;
	left:0;
	width:100vw!important;
	padding:20px 5vw;
	background:#fff;
	box-shadow: 0px 12px 27px 0px rgba(0, 0, 0, 0.13);
	border-top:#ebebeb 3px solid;
	align-items:center;
	opacity: 0;
	visibility: hidden;
}
.active {
	opacity:1;
	visibility:visible;
}
.footbanner .reservesection a, .footbanner .reservesection span {display:inline-block;margin-right:0;margin-left:10px;}
.footbanner .reservesection a span {vertical-align:top;}
@media screen and (max-width: 1024px) {
	.footbanner .logo {display:none;}
	.footbanner .reservesection {width:100%;text-align:center;}
}
@media screen and (max-width: 820px) {
	.footbanner {padding:5px 0;bottom:2px;white-space:nowrap;width:100vw;}
	.footbanner .logo {display:none;}
	.footbanner .reservesection {width:100%;text-align:center;}
	.footbanner .reservesection .tel, .footbanner .reservesection .reserve {font-size:18px!important;letter-spacing:0;padding: 9px 12px 10px 38px;margin:0 4px;}
	.footbanner .reservesection .reserve {padding: 9px 12px 10px 46px;}
	.footbanner .reservesection .tel::after {left:12px;}
	.footbanner .reservesection .reserve::after {left:12px;top:8px;}
	.footbanner .reservesection img.insta {max-width:46px;}
	.footbanner .reservesection {padding:10px 2px 20px 2px;flex-wrap:nowrap;background:#fff;justify-content:center;}
	.footbanner .reservesection a {width:auto;margin:0 4px;}
}
@media screen and (max-width: 480px) {
	.btntop.sp_position {left: calc(50% - 22px);bottom:150px;}
	.btntop img {max-width:45px;}
}
@media screen and (max-width:380px) {
	.footbanner .reservesection .tel, .footbanneru .reservesection .reserve {font-size:16px;}
	.footbanner .reservesection a {margin:0 1px;}
	.footbanner .reservesection img.insta {max-width:40px;}
	.footbanner .reserve span {display:none;}
}

/* Loading Block */
#loading {
  width: 100vw;
  height: 100vh;
  transition: all 1s;
  background-color: #ffeef4;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
}
.spinner {
  width: 100px;
  height: 100px;
  margin: 200px auto;
  background-color: #f09dc1;
  border-radius: 100%;
  animation: sk-scaleout 1.0s infinite ease-in-out;
}
/* Loading Animation */
@keyframes sk-scaleout {
  0% {
    transform: scale(0);
  } 100% {
    transform: scale(1.0);
    opacity: 0;
  }
}

/* Hide Loading Block */
.loaded {
  opacity: 0;
  visibility: hidden;
}