@charset "UTF-8";
/* Google fonts import */
@import url("https://fonts.googleapis.com/earlyaccess/sawarabimincho.css"); /* mincho [font-family: "Sawarabi Mincho";] */
@import url("https://fonts.googleapis.com/earlyaccess/notosansjapanese.css"); /* gothic [font-family: "Noto Sans Japanese";] */
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;700&display=swap&subset=japanese");
/*■reset----------------------------------------------*/
html, body {
  padding: 0;
  margin: 0;
}

body {
  background: #FFFFFF;
}

.pre-inc {
  padding: 0;
  margin: 0;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-family: "Noto Serif Japanese", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", 游明朝, YuMincho, HG明朝E, "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-family: "Noto Sans Japanese";
  font-family: "Noto Serif JP", serif;
}
.pre-inc * {
  padding: 0;
  margin: 0;
}
.pre-inc h1, .pre-inc h2, .pre-inc h3, .pre-inc h4, .pre-inc h5, .pre-inc h6 {
  font-size: 14px;
  font-weight: normal;
}
.pre-inc ul, .pre-inc ol, .pre-inc li {
  list-style-type: none;
}
.pre-inc a {
  font-size: 14px;
  transition: all 0.5s;
  text-decoration: none;
}
.pre-inc a:hover {
  opacity: 0.68;
}
.pre-inc img {
  border: none;
  display: block;
  width: 100%;
}
.pre-inc p {
  font-size: 14px;
  line-height: 140%;
}
.pre-inc br.sp {
  display: none;
}
@media screen and (max-width: 640px) {
  .pre-inc br.sp {
    display: block;
  }
}
.pre-inc .effect {
  opacity: 0;
  -ms-filter: blur(6px);
  filter: blur(6px);
  position: relative;
  top: -30px;
  transition: all 1.3s;
}
.pre-inc .effect.move {
  opacity: 1;
  -ms-filter: blur(0px);
  filter: blur(0px);
  top: 0px;
}
.pre-inc .effect_re {
  opacity: 0;
  -ms-filter: blur(6px);
  filter: blur(6px);
  transition: all 1.3s;
}
.pre-inc .effect_re.move {
  opacity: 1;
  -ms-filter: blur(0px);
  filter: blur(0px);
}
.pre-inc {
  /* Header
  ---------------------------------------------------------- */
}
.pre-inc header {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  height: 80px;
  z-index: 5;
}
.pre-inc header .Area {
  position: relative;
  z-index: 5;
  height: 80px;
}
.pre-inc header .Area .Logo {
  display: block;
  width: 200px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
}
.pre-inc header .Area .Cta {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 80px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.pre-inc header .Area .Cta ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  position: relative;
}
.pre-inc header .Area .Cta li {
  width: 170px;
  margin: 0 0 0 10px;
}
.pre-inc header .Area .Cta li .wappen {
  display: block;
  position: absolute;
  bottom: -50px;
  right: -1%;
  width: 50%;
  animation: purun 2s linear 0s 1;
  animation-iteration-count: infinite;
}
@keyframes purun {
  0% {
    transform: translate(0%, 0%);
  }
  10% {
    transform: translate(0%, 7%);
  }
  20% {
    transform: translate(0%, 14%);
  }
  40% {
    transform: translate(0%, -14%);
  }
  60% {
    transform: translate(0%, 7%);
  }
  80% {
    transform: translate(0%, 0%);
  }
  100% {
    transform: translate(0%, 0%);
  }
}
.pre-inc header .Area .Cta li a {
  display: block;
  color: #312a28;
  padding: 3px;
  text-align: center;
  font-size: 14px;
  letter-spacing: 1px;
}
.pre-inc header .Area .Cta li a div {
  border: solid 1px #312a28;
  padding: 10px 0;
}
.pre-inc header .Area .Cta li a.e {
  background-color: #c0a263;
  background: linear-gradient(90deg, rgb(192, 162, 99) 0%, rgb(233, 215, 179) 50%, rgb(192, 162, 99) 100%);
  display: block;
}
.pre-inc header .Area .Cta li a.reserve {
  background-color: #a0a0a0;
  background: linear-gradient(90deg, rgb(160, 160, 160) 0%, rgb(255, 255, 255) 50%, rgb(160, 160, 160) 100%);
}
@media screen and (max-width: 640px) {
  .pre-inc header {
    height: 60px;
  }
  .pre-inc header .Area {
    height: 60px;
  }
  .pre-inc header .Area .Logo {
    width: 140px;
    left: 2px;
  }
  .pre-inc header .Area .Cta {
    display: none;
  }
}
.pre-inc header .Area .Mlink {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 434px;
}
.pre-inc header .Area .Mlink ul {
  text-align: left;
}
.pre-inc header .Area .Mlink li {
  display: inline-block;
  margin-right: 15px;
}
.pre-inc header .Area .Mlink li a {
  display: block;
  color: #FFFFFF;
  font-size: 14px;
  letter-spacing: 1px;
  position: relative;
  padding-left: 18px;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.9), 0 0 10px rgba(0, 0, 0, 0.9), 0 0 10px rgba(0, 0, 0, 0.9);
}
.pre-inc header .Area .Mlink li a::after {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  border-top: 1px solid #FFFFFF;
  border-right: 1px solid #FFFFFF;
  transform: rotate(45deg) translateY(-50%);
  position: absolute;
  left: 0;
  top: 50%;
}
@media screen and (max-width: 640px) {
  .pre-inc header .Area .Mlink {
    display: none;
  }
}
.pre-inc #MenuBtn {
  display: block;
  position: fixed;
  top: 18px;
  right: 20px;
  width: 60px;
  height: 60px;
  text-decoration: none;
  color: #FFFFFF;
  z-index: 60;
  cursor: pointer;
}
.pre-inc #MenuBtn span {
  position: absolute;
  left: 18px;
  width: 70%;
  height: 1px;
  background: #FFFFFF;
  border-radius: 1px;
  transition: all 0.5s;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.9), 0 0 10px rgba(0, 0, 0, 0.9), 0 0 10px rgba(0, 0, 0, 0.9);
}
.pre-inc #MenuBtn span:nth-of-type(1) {
  top: 12px;
}
.pre-inc #MenuBtn span:nth-of-type(2) {
  top: 20px;
}
.pre-inc #MenuBtn span:nth-of-type(3) {
  bottom: 30px;
}
.pre-inc #MenuBtn.active span:nth-of-type(1) {
  transform: translateY(9px) rotate(-45deg);
}
.pre-inc #MenuBtn.active span:nth-of-type(2) {
  opacity: 0;
}
.pre-inc #MenuBtn.active span:nth-of-type(3) {
  transform: translateY(-7px) rotate(45deg);
}
.pre-inc #MenuBtn i {
  font-style: normal;
  position: absolute;
  left: 0;
  bottom: 5px;
  width: 100%;
  display: block;
  text-align: center;
  letter-spacing: 1px;
  font-size: 10px;
  transition: all 0.5s;
}
.pre-inc #MenuBtn i.c {
  opacity: 0;
}
.pre-inc #MenuBtn.active i.o {
  opacity: 0;
}
.pre-inc #MenuBtn.active i.c {
  opacity: 1;
}
@media screen and (max-width: 640px) {
  .pre-inc #MenuBtn {
    top: 8px;
    right: 20px;
    width: 48px;
    height: 48px;
  }
  .pre-inc #MenuBtn span:nth-of-type(1) {
    top: 12px;
  }
  .pre-inc #MenuBtn span:nth-of-type(2) {
    top: 26px;
  }
  .pre-inc #MenuBtn span:nth-of-type(3) {
    bottom: 28px;
  }
  .pre-inc #MenuBtn.active span:nth-of-type(1) {
    transform: translateY(6px) rotate(-45deg);
  }
  .pre-inc #MenuBtn.active span:nth-of-type(2) {
    opacity: 0;
  }
  .pre-inc #MenuBtn.active span:nth-of-type(3) {
    transform: translateY(-2px) rotate(45deg);
  }
}
.pre-inc .Gnavi {
  width: 100%;
  position: fixed;
  top: 0;
  padding-top: 80px;
  left: 0;
  height: 100%;
  background: rgba(49, 42, 40, 0.92);
  display: none;
  backdrop-filter: blur(8px);
  z-index: 4;
}
.pre-inc .Gnavi ul {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.pre-inc .Gnavi ul li {
  width: 22%;
  margin: 0 1.5%;
}
.pre-inc .Gnavi ul li.new {
  position: relative;
}
.pre-inc .Gnavi ul li.new::after {
  content: "NEW";
  position: absolute;
  top: 1em;
  left: 0;
  font-size: 14px;
  background: #fff;
  color: #ff0000;
  padding: 0.25em 0.5em;
}
.pre-inc .Gnavi ul li a {
  padding: 80px 0;
  color: #FFFFFF;
  font-size: 13px;
  letter-spacing: 4px;
  border-bottom: solid 1px rgba(255, 255, 255, 0.4);
  display: block;
  text-align: center;
}
.pre-inc .Gnavi ul li a.h02,.pre-inc .Gnavi ul li a.h03,.pre-inc .Gnavi ul li a.h04 {
  min-height: 6.2em;
}
.pre-inc .Gnavi ul li a.w02 {
  letter-spacing: 1px;
}
.pre-inc .Gnavi ul li a[nohref] {
  opacity: 0.2;
  cursor: default;
  pointer-events: none;
}
.pre-inc .Gnavi ul li a span {
  font-size: 165%;
  display: block;
}
@media screen and (max-width: 640px) {
  .pre-inc .Gnavi {
    padding-top: 60px;
  }
  .pre-inc .Gnavi ul li {
    width: 42%;
    margin: 0 4%;
  }
  .pre-inc .Gnavi ul li a {
    padding: 30px 0;
    font-size: 10px;
    letter-spacing: 3px;
  }
  .pre-inc .Gnavi ul li a.w02 {
    letter-spacing: 1px;
  }
  .pre-inc .Gnavi ul li a.h02 {
    min-height: 5.8em;
  }
  .pre-inc .Gnavi ul li.new::after {
    font-size: 2.5vw;
  }
  .pre-inc .Gnavi ul li a span {
    font-size: 145%;
  }
}
.pre-inc main {
  padding: 80px 0 0 0;
  background: rgb(49, 42, 40);
}
@media screen and (max-width: 640px) {
  .pre-inc main {
    padding: 60px 0 0 0;
  }
}
.pre-inc .FloImg {
  width: 23%;
  position: absolute;
}
.pre-inc .FloImg#Flo01 {
  top: 2%;
  right: 20px;
  opacity: 0;
  transition: opacity 1.5s;
}
.pre-inc .FloImg#Flo02 {
  top: 24%;
  left: 20px;
  opacity: 0;
  transition: opacity 1.5s;
}
.pre-inc .FloImg#Flo01.on,
.pre-inc .FloImg#Flo02.on {
  opacity: 1;
}
.pre-inc .FloImg#Flo03 {
  bottom: 12.5%;
  right: 10px;
}
.pre-inc .FloImg#Flo04 {
  bottom: 1%;
  left: 10px;
}
@media screen and (min-width: 1720px) {
  .pre-inc .FloImg#Flo03 {
    bottom: 7.5%;
  }
}
@media screen and (max-width: 640px) {
  .pre-inc .FloImg {
    width: 32%;
  }
  .pre-inc .FloImg#Flo01 {
    top: 1.5%;
    right: 0;
  }
  .pre-inc .FloImg#Flo02 {
    top: 9%;
    left: 0;
  }
  .pre-inc .FloImg#Flo03 {
    bottom: 24%;
    right: 0;
  }
  .pre-inc .FloImg#Flo04 {
    bottom: 1%;
    left: 0;
    width: 24%;
  }
}
.pre-inc a.CtaBtn {
  width: 86%;
  max-width: 400px;
  margin: auto;
  display: block;
  background-color: #c0a263;
  background: linear-gradient(90deg, rgb(192, 162, 99) 0%, rgb(233, 215, 179) 50%, rgb(192, 162, 99) 100%);
  color: #312a28;
  text-align: center;
  font-size: 20px;
  padding: 16px 0;
  margin-top: 25px;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
  letter-spacing: 2px;
  position: relative;
}
.pre-inc a.CtaBtn.reserve {
  background-color: #a0a0a0;
  background: linear-gradient(90deg, rgb(160, 160, 160) 0%, rgb(255, 255, 255) 50%, rgb(160, 160, 160) 100%);
}
.pre-inc a.CtaBtn.s {
  font-size: 18px;
  padding: 12px 0;
}
.pre-inc a.CtaBtn::after {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  border-top: 1px solid #312a28;
  border-right: 1px solid #312a28;
  transform: rotate(45deg) translateY(-50%);
  position: absolute;
  right: 15px;
  top: 50%;
}
@media screen and (max-width: 640px) {
  .pre-inc a.CtaBtn {
    font-size: 16px;
    padding: 10px 0;
    margin-top: 15px;
  }
  .pre-inc a.CtaBtn.s {
    font-size: 14px;
    padding: 8px 0;
  }
}
.pre-inc .EntryFlow {
  width: 100%;
  background-color: #312a28;
  background: -webkit-linear-gradient(left, #312a28, #625D5A, #312a28);
  background: linear-gradient(left, #312a28, #625D5A, #312a28);
  padding: 120px 0 160px 0;
  position: relative;
  margin: auto;
}
.pre-inc .EntryFlow::after {
  content: "";
  display: block;
  background-color: #efc02e;
  height: 3px;
  background: -webkit-linear-gradient(left, #efc02e 0%, #faf6c9 25%, #bb8d31 60%, #e6d084 88%, #faf6c9 100%);
  background: linear-gradient(left, #efc02e 0%, #faf6c9 25%, #bb8d31 60%, #e6d084 88%, #faf6c9 100%);
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
}
.pre-inc .EntryFlow h3 {
  font-size: 38px;
  letter-spacing: 3px;
  text-align: center;
  color: #FFFFFF;
  margin-bottom: 45px;
  position: relative;
  z-index: 2;
}
.pre-inc .EntryFlow h4 {
  font-size: 24px;
  letter-spacing: 2px;
  text-align: center;
  color: #4c3a29;
  margin-bottom: 40px;
}
.pre-inc .EntryFlow h4.sp {
  display: none;
}
.pre-inc .EntryFlow h5 {
  font-size: 22px;
  letter-spacing: 1px;
  text-align: center;
  color: #705a4a;
  margin-bottom: 20px;
}
.pre-inc .EntryFlow h5 b {
  font-weight: normal;
  font-size: 135%;
}
.pre-inc .EntryFlow h5 span {
  background: #705a4a;
  color: #FFFFFF;
  display: block;
  padding: 4px 0;
  font-size: 85%;
  letter-spacing: 3px;
  width: 70%;
  margin: auto;
}
.pre-inc .EntryFlow p {
  font-size: 14px;
  color: #333333;
  letter-spacing: 1px;
  line-height: 175%;
  text-align: center;
}
.pre-inc .EntryFlow .Area {
  width: 92%;
  max-width: 1080px;
  margin: auto;
  background: #DDD2C7;
  padding: 12px;
  position: relative;
  z-index: 2;
}
.pre-inc .EntryFlow .Area .b {
  border: solid 2px #4c3a29;
  padding: 40px;
}
.pre-inc .EntryFlow .Area .f {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.pre-inc .EntryFlow .Area .f .w {
  width: 30%;
}
.pre-inc .EntryFlow .Area .f .border {
  width: 1px;
  background: #4c3a29;
}
.pre-inc .EntryFlow .BgImg {
  width: 60%;
  position: absolute;
  top: 0;
  left: 0;
}
.pre-inc .EntryFlow .BgImg.r {
  top: auto;
  left: auto;
  bottom: 0;
  right: 0;
}
@media screen and (max-width: 640px) {
  .pre-inc .EntryFlow {
    padding: 40px 0 70px 0;
  }
  .pre-inc .EntryFlow::after {
    height: 2px;
  }
  .pre-inc .EntryFlow h3 {
    font-size: 25px;
    margin-bottom: 35px;
    text-shadow: 0 0 3px rgb(0, 0, 0), 0 0 3px rgb(0, 0, 0), 0 0 3px rgb(0, 0, 0), 0 0 3px rgb(0, 0, 0);
  }
  .pre-inc .EntryFlow h4 {
    font-size: 18px;
    margin-bottom: 25px;
  }
  .pre-inc .EntryFlow h4.pc {
    display: none;
  }
  .pre-inc .EntryFlow h4.sp {
    display: block;
  }
  .pre-inc .EntryFlow h4 span {
    font-size: 85%;
    display: block;
    position: relative;
    text-align: left;
    padding-left: 50px;
    margin-top: 45px;
  }
  .pre-inc .EntryFlow h4 i {
    width: 45px;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    display: block;
    height: 1px;
    background: #4c3a29;
  }
  .pre-inc .EntryFlow h5 {
    font-size: 16px;
    margin-bottom: 14px;
    text-align: left;
  }
  .pre-inc .EntryFlow h5 span {
    padding: 1px 8px;
    margin-left: 8px;
    font-size: 12px;
    width: auto;
    display: inline-block;
    vertical-align: text-top;
  }
  .pre-inc .EntryFlow p {
    font-size: 13px;
  }
  .pre-inc .EntryFlow .Area {
    width: 82%;
    padding: 5px;
  }
  .pre-inc .EntryFlow .Area .b {
    border: solid 1px #4c3a29;
    padding: 20px;
  }
  .pre-inc .EntryFlow .Area .f .w {
    width: 90%;
    margin: auto;
  }
  .pre-inc .EntryFlow .Area .f .border {
    width: 90%;
    height: 1px;
    margin: 34px auto;
  }
  .pre-inc .EntryFlow .BgImg {
    width: 50%;
  }
}
.pre-inc .foot-area {
  width: 100%;
  padding: 60px 0;
  background: #5A514C;
}
.pre-inc .foot-area .Area {
  width: 90%;
  max-width: 1080px;
  margin: auto;
}
.pre-inc .foot-area .Area .Cap {
  width: 100%;
  margin-bottom: 80px;
}
.pre-inc .foot-area .Area .Cap p {
  font-size: 10px;
  color: #FFFFFF;
  letter-spacing: 1px;
  line-height: 165%;
}
.pre-inc .SPFoot {
  display: none;
}
@media screen and (max-width: 640px) {
  .pre-inc .foot-area {
    padding: 40px 0;
  }
  .pre-inc .foot-area .Area .Cap {
    margin-bottom: 40px;
  }
  .pre-inc .SPFoot {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 5;
  }
  .pre-inc .SPFoot ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .pre-inc .SPFoot ul li {
    width: 20%;
  }
  .pre-inc .SPFoot ul li a {
    display: block;
    background: #FFFFFF;
  }
  .pre-inc .SPFoot ul li a[nohref] {
    opacity: 0.7;
  }
  .pre-inc .SPFoot ul li a.g {
    background-color: #c0a263;
    background: linear-gradient(90deg, rgb(192, 162, 99) 0%, rgb(233, 215, 179) 50%, rgb(192, 162, 99) 100%);
  }
  .pre-inc .SPFoot ul li a.s {
    background-color: #a0a0a0;
    background: linear-gradient(90deg, rgb(160, 160, 160) 0%, rgb(255, 255, 255) 50%, rgb(160, 160, 160) 100%);
  }
}
.pre-inc .infobox {
  text-align: center;
  font-size: 14px;
  margin: 1em auto 50px;
  border: 1px solid #ce0000;
  background: #fff;
  padding: 2em;
  max-width: 860px;
  box-sizing: border-box;
}
@media screen and (max-width: 767px) {
  .pre-inc .infobox {
    width: 95%;
    font-size: 3vw;
    padding: 1em;
    margin: 1em auto 30px;
  }
}
.pre-inc .bnrBox {
  width: 95%;
  max-width: 850px;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .pre-inc .bnrBox {
    margin: 0 auto;
  }
}
.pre-inc .bnrBox .bnr {
  margin: 0 auto 2em;
}
@media screen and (max-width: 767px) {
  .pre-inc .bnrBox .bnr {
    margin: 0 auto 1em;
  }
}
.pre-inc .floatingBnr {
  position: fixed;
  bottom: 0;
  right: 0;
  max-width: 850px;
  font-size: 0;
}
@media screen and (max-width: 767px) {
  .pre-inc .floatingBnr {
    bottom: 56px;
  }
}
.pre-inc .floatingBnr .bnr {
  position: relative;
  font-size: 0;
}
.pre-inc .floatingBnr .bnr a {
  font-size: 0;
  display: block;
}
.pre-inc .floatingBnr .bnr .close {
  position: absolute;
  top: 0;
  right: 0;
  background: #000;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  display: block;
  width: 2em;
  text-align: center;
  padding: 1em 0;
}
.pre-inc .pc-on {
  display: inline;
}
@media screen and (max-width: 767px) {
  .pre-inc .pc-on {
    display: none;
  }
}
.pre-inc .sp-on {
  display: none;
}
@media screen and (max-width: 767px) {
  .pre-inc .sp-on {
    display: inline;
  }
}
.pre-inc .shine {
  overflow: hidden;
  display: block;
  position: relative;
}
.pre-inc .shine::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: -100%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0) 28%, rgba(255, 255, 255, 0.75) 32%, rgba(255, 255, 255, 0.75) 78%, rgba(255, 255, 255, 0) 82%);
  animation: shine-loop 4s linear infinite;
}
@keyframes shine-loop {
  0% {
    transform: translateX(0);
  }
  10% {
    transform: translateX(200%);
  }
  100% {
    transform: translateX(200%);
  }
}
.pre-inc {
  /* Room login */
}
.pre-inc .roomwap {
  position: relative;
}
.pre-inc .roomwap .roomwap_bt {
  background: rgb(255, 218, 104);
  background: linear-gradient(90deg, rgb(255, 218, 104) 0%, rgb(233, 201, 102) 30%, rgb(195, 150, 13) 100%);
  position: absolute;
  top: 10px;
  left: 10px;
  width: calc(100% - 20px);
  height: 2px;
  z-index: 1;
}
.pre-inc .roomwap .roomwap_br {
  background: rgb(255, 218, 104);
  background: linear-gradient(0deg, rgb(255, 218, 104) 0%, rgb(255, 239, 194) 30%, rgb(195, 150, 13) 100%);
  position: absolute;
  top: 10px;
  right: 10px;
  width: 2px;
  height: calc(100% - 20px);
  z-index: 1;
}
.pre-inc .roomwap .roomwap_bb {
  background: rgb(255, 218, 104);
  background: linear-gradient(270deg, rgb(255, 218, 104) 0%, rgb(233, 201, 102) 30%, rgb(195, 150, 13) 100%);
  position: absolute;
  bottom: 10px;
  left: 10px;
  width: calc(100% - 20px);
  height: 2px;
  z-index: 1;
}
.pre-inc .roomwap .roomwap_bl {
  background: rgb(255, 218, 104);
  background: linear-gradient(180deg, rgb(255, 218, 104) 0%, rgb(255, 239, 194) 30%, rgb(195, 150, 13) 100%);
  position: absolute;
  top: 10px;
  left: 10px;
  width: 2px;
  height: calc(100% - 20px);
  z-index: 1;
}
.pre-inc #roomlogin {
  padding: 100px 0;
  background: url("../img/common/roomlogin_bg.webp") no-repeat center center/cover;
  position: relative;
}
.pre-inc {
  /* #roomlogin i{display: block;width: 100%;height: 100%;position: absolute;left: 0;top: 0;background: rgba(255,255,255,0.5);animation: 3s fadeIn 0s forwards;z-index: -1;} */
}
.pre-inc #roomlogin .wrap1024 {
  animation-name: fadeInUp;
  animation-delay: 1.5s;
  z-index: 1;
}
.pre-inc #roomlogin p {
  font-size: 24px;
  text-align: center;
}
.pre-inc #roomlogin p.note {
  font-size: 13px;
  text-align: center;
  margin: 30px auto;
  color: #B20000;
}
.pre-inc #roomlogin p.infolabel {
  font-size: 40px;
  font-weight: 400;
  margin: 30px 0;
  letter-spacing: 0.05em;
}
.pre-inc #roomlogin p.infolabel span {
  font-size: 28px;
}
.pre-inc #roomlogin .top_tit {
  font-size: 1.8em;
  text-align: center;
  font-weight: 700;
  animation-name: fadeInUp;
}
.pre-inc #roomlogin .top_tit span {
  border-bottom: 1px solid #000;
  font-size: 36px;
  font-weight: bold;
}
.pre-inc #roomlogin p.cap_wb {
  position: absolute;
  bottom: 2%;
  right: 1%;
  font-size: 12px;
}
.pre-inc .rlogin {
  width: 100%;
  max-width: 600px;
  display: flex;
  justify-content: center;
  margin: 80px auto 0;
}
.pre-inc .rlogin div {
  display: flex;
  height: 40px;
  align-items: center;
}
.pre-inc .rlogin div.loginlabel {
  background: rgba(102, 96, 87, 0.8);
  width: 160px;
  justify-content: center;
  font-size: 18px;
  color: #FFF;
}
.pre-inc .rlogin div.logininput {
  margin-right: 10px;
  flex: 1;
}
.pre-inc .rlogin div.logininput input {
  color: #333;
  box-shadow: none;
  padding: 10px;
  width: 100%;
}
.pre-inc .rlogin div.loginbtn input {
  background: rgba(0, 0, 0, 0.8);
  height: 38px;
  width: 120px;
  box-shadow: none;
  padding: 0;
  border: none;
  color: #FFF;
  font-family: Arial, "Public Sans", "Noto Sans JP", sans-serif;
  font-size: 18px;
}
.pre-inc #roomlogin_flow {
  background: #EEEEE8;
  padding: 30px 0 40px;
}
.pre-inc .loginflow {
  max-width: 1050px;
  width: 96%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
.pre-inc .flow01, .pre-inc .flow02 {
  background: url("../img/common/roomlogin_arw.png") no-repeat right center;
  width: 30.47619%;
}
.pre-inc .flow03 {
  width: 28.571428%;
}
.pre-inc .flownum {
  font-size: 46px;
  font-style: italic;
}
.pre-inc .flowttl {
  font-size: 28px;
}
.pre-inc .loginflow p {
  font-size: 16px;
  line-height: 140%;
}
.pre-inc #roomlogin_flow .loginflow {
  animation-name: fadeInUp;
  animation-delay: 1.5s;
  z-index: 1;
}
.pre-inc #roomlogin_flow .entry_btn {
  width: 100%;
  max-width: 240px;
  color: #fff;
  text-align: center;
  padding: 5px;
  background: #94823e;
  display: block;
  margin-top: 10px;
}
.pre-inc #roomlogin_flow .entry_btn span {
  line-height: 1;
  font-size: 18px;
  font-weight: 500;
}
.pre-inc #roomlogin_flow .entry_btn > i {
  width: 0;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  animation: 1s entry_btn_bk 1.3s forwards;
  overflow: hidden;
}
.pre-inc #roomlogin_flow .entry_btn > i i {
  width: 42px;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: url("../img/common/line01.svg") no-repeat left center/cover;
  display: block;
}
.pre-inc #roomlogin_flow .entry_btn::after {
  content: "";
  width: 1.6em;
  height: 1.4em;
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 1em;
  margin: auto 0;
  background: url("../img/common/link_arrow.svg") no-repeat center center/contain;
  transition: 0.6s all;
}
@keyframes entry_btn_bk {
  0% {
    width: 0;
  }
  100% {
    width: 3.85em;
  }
}
.pre-inc .contents_bg {
  background: url("../img/common/contentsbg_p.jpg");
  padding: 80px 0;
}
.pre-inc .pagehead {
  animation: 3s fadeIn 0s forwards;
  text-align: center;
}
.pre-inc .pagetitle {
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  display: block;
  margin-bottom: 20px;
}
.pre-inc .pagehead p {
  font-size: 24px;
}
.pre-inc #roomlogin p.errtext {
  font-size: 15px;
  margin-top: 5px;
}
@media only screen and (max-width: 1000px) {
  .pre-inc .flow01, .pre-inc .flow02 {
    background: url("../img/common/roomlogin_arw.png") no-repeat right center;
    background-size: 20px auto;
    width: 30.47619%;
  }
  .pre-inc .flow03 {
    width: 28.571428%;
  }
  .pre-inc .flownum {
    font-size: 36px;
    font-style: italic;
  }
  .pre-inc .flowttl {
    font-size: 22px;
  }
  .pre-inc .loginflow p {
    font-size: 15px;
  }
}
@media only screen and (max-width: 768px) {
  .pre-inc .rlogin {
    margin-top: 30px;
    flex-wrap: wrap;
  }
  .pre-inc #roomlogin .top_tit span {
    font-size: 28px;
  }
  .pre-inc .rlogin div.loginlabel {
    width: 40%;
    font-size: 16px;
  }
  .pre-inc .rlogin div.logininput {
    margin-right: 0px;
    width: 60%;
    flex: none;
  }
  .pre-inc .rlogin div.loginbtn input {
    width: 160px;
    margin-top: 10px;
  }
  .pre-inc #roomlogin_flow {
    padding: 20px 20px 30px;
  }
  .pre-inc .loginflow {
    flex-wrap: wrap;
  }
  .pre-inc .flow01, .pre-inc .flow02 {
    background: url("../img/common/roomlogin_arw_sp.png") no-repeat bottom center;
    background-size: 45px auto;
    padding: 0 0 35px 0;
  }
  .pre-inc .flow01, .pre-inc .flow02, .pre-inc .flow03 {
    width: 100%;
  }
  .pre-inc .flow01 p br, .pre-inc .flow02 p br, .pre-inc .flow03 p br {
    display: none;
  }
  .pre-inc #roomlogin p {
    font-size: 18px;
    text-align: center;
  }
  .pre-inc #roomlogin p.infolabel {
    font-size: 26px;
    font-weight: 400;
    margin: 20px 0;
  }
  .pre-inc #roomlogin p.infolabel span {
    font-size: 22px;
  }
  .pre-inc #roomlogin p.cap_wb {
    bottom: 2%;
    font-size: 12px;
  }
  .pre-inc #roomlogin {
    padding: 45px 10px;
  }
  .pre-inc .pagehead p {
    font-size: 20px;
  }
}
.pre-inc #footerBnr {
  max-width: 1024px;
  margin: 80px auto;
  padding: 0;
}
.pre-inc #footerBnr .ps_banner {
  width: 100%;
  text-align: center;
}
.pre-inc #footerBnr .ps_banner a:hover {
  opacity: 0.7;
}
@media screen and (max-width: 768px) {
  .pre-inc #footerBnr {
    margin: 20px auto 40px;
    padding: 0;
  }
  .pre-inc #footerBnr .ps_banner {
    width: 96%;
    margin: 0 auto;
  }
}
.pre-inc {
  /* キャプション類 */
}
.pre-inc .cap_w,
.pre-inc .cap_wb,
.pre-inc .cap_b,
.pre-inc .cap_bw,
.pre-inc .cap_l {
  font-size: 12px;
  position: absolute;
  right: 0.7em;
  bottom: 0.7em;
  z-index: 1;
  line-height: 1.4;
}
.pre-inc .cap_w {
  color: #fff;
}
.pre-inc .cap_wb {
  color: #fff;
  text-shadow: 0px 0px 0.15em rgba(0, 0, 0, 0.7), 0px 0px 0.15em rgba(0, 0, 0, 0.7), 0px 0px 0.15em rgba(0, 0, 0, 0.7), 0px 0px 0.15em rgba(0, 0, 0, 0.7), 0px 0px 0.15em rgba(0, 0, 0, 0.7), 0px 0px 0.15em rgba(0, 0, 0, 0.7), 0px 0px 0.15em rgba(0, 0, 0, 0.7);
  text-align: right;
}
.pre-inc .cap_b {
  color: #000;
}
.pre-inc .cap_bw {
  text-shadow: 0px 0px 0.15em rgba(255, 255, 255, 0.9), 0px 0px 0.15em rgba(255, 255, 255, 0.9), 0px 0px 0.15em rgba(255, 255, 255, 0.9), 0px 0px 0.15em rgba(255, 255, 255, 0.9), 0px 0px 0.15em rgba(255, 255, 255, 0.9), 0px 0px 0.15em rgba(255, 255, 255, 0.9);
}
.pre-inc .cap_o {
  font-size: 12px;
  margin-top: 0.5em;
  text-align: right;
  position: static;
}
.pre-inc .cap_ol {
  font-size: 12px;
  margin-top: 0.5em;
  position: static;
}
.pre-inc .cap_oc {
  font-size: 12px;
  margin-top: 0.5em;
  position: static;
  text-align: center;
}
.pre-inc .cap_l {
  right: auto;
  left: 1em;
}
.pre-inc .cap_r30 {
  right: 21.5%;
}
.pre-inc .suji {
  background: #000;
  padding: 0 5px;
}
@media screen and (max-width: 768px) {
  .pre-inc {
    /* キャプション類 */
  }
  .pre-inc .cap_w,
  .pre-inc .cap_wb,
  .pre-inc .cap_b,
  .pre-inc .cap_bw,
  .pre-inc .cap_l,
  .pre-inc .cap_o,
  .pre-inc .cap_ol,
  .pre-inc .cap_oc,
  .pre-inc .cap_l {
    font-size: 2.8vw;
  }
  .pre-inc .cap_r30 {
    right: 17.5%;
  }
  .pre-inc .cap_collage {
    text-align: left;
    line-height: 1.5;
  }
}
.pre-inc.modelroom .slick-track, .pre-inc.location .slick-track {
  display: flex;
}

/*# sourceMappingURL=common.css.map */