/* ---------------------------------------

	/index.html

--------------------------------------- */
.room {
  height: 100dvh;
}

.room__subtitle {
  width: 100%;
  text-align: center;
  font-size: clamp(14px, 2.1vw, 22px);
  font-style: italic;
  line-height: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

@media (max-width: 767px) {
  .room__subtitle {
    font-size: 14px;
  }
}

.room__list {
  display: grid;
  gap: 3% 0.5%;
  grid-template-columns: calc(50% - 0.25%) calc(50% - 0.25%);
  grid-template-rows: calc(50% - 1.5%) calc(50% - 1.5%);
  height: 100dvh;
  width: 100vw;
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

@media (max-width: 767px) {
  .room__list {
    gap: 4.2% 1.4%;
  }
}

.room__item {
  width: 100%;
  height: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin: 0;
  margin-bottom: 20px;
  position: relative;
}

@-webkit-keyframes pt01_lefttop_katakata {
  0%,
  100% {
    -webkit-transform: rotate(270deg) scale(1);
            transform: rotate(270deg) scale(1);
  }
  50% {
    -webkit-transform: rotate(273deg) scale(1.04);
            transform: rotate(273deg) scale(1.04);
  }
}

@keyframes pt01_lefttop_katakata {
  0%,
  100% {
    -webkit-transform: rotate(270deg) scale(1);
            transform: rotate(270deg) scale(1);
  }
  50% {
    -webkit-transform: rotate(273deg) scale(1.04);
            transform: rotate(273deg) scale(1.04);
  }
}

@-webkit-keyframes pt02_lefttop_katakata {
  0%,
  100% {
    -webkit-transform: rotate(0deg) scale(1);
            transform: rotate(0deg) scale(1);
  }
  25% {
    -webkit-transform: rotate(2deg) scale(1.03);
            transform: rotate(2deg) scale(1.03);
  }
  75% {
    -webkit-transform: rotate(-1.5deg) scale(1.02);
            transform: rotate(-1.5deg) scale(1.02);
  }
}

@keyframes pt02_lefttop_katakata {
  0%,
  100% {
    -webkit-transform: rotate(0deg) scale(1);
            transform: rotate(0deg) scale(1);
  }
  25% {
    -webkit-transform: rotate(2deg) scale(1.03);
            transform: rotate(2deg) scale(1.03);
  }
  75% {
    -webkit-transform: rotate(-1.5deg) scale(1.02);
            transform: rotate(-1.5deg) scale(1.02);
  }
}

@-webkit-keyframes pt03_lefttop_katakata {
  0%,
  100% {
    -webkit-transform: rotate(90deg) scale(1);
            transform: rotate(90deg) scale(1);
  }
  40% {
    -webkit-transform: rotate(93deg) scale(1.03);
            transform: rotate(93deg) scale(1.03);
  }
  60% {
    -webkit-transform: rotate(87deg) scale(1.01);
            transform: rotate(87deg) scale(1.01);
  }
}

@keyframes pt03_lefttop_katakata {
  0%,
  100% {
    -webkit-transform: rotate(90deg) scale(1);
            transform: rotate(90deg) scale(1);
  }
  40% {
    -webkit-transform: rotate(93deg) scale(1.03);
            transform: rotate(93deg) scale(1.03);
  }
  60% {
    -webkit-transform: rotate(87deg) scale(1.01);
            transform: rotate(87deg) scale(1.01);
  }
}

@-webkit-keyframes pt01_righttop_katakata {
  0%,
  100% {
    -webkit-transform: rotate(0deg) translateX(0) scale(1);
            transform: rotate(0deg) translateX(0) scale(1);
  }
  25% {
    -webkit-transform: rotate(2deg) translateX(-2px) scale(1.03);
            transform: rotate(2deg) translateX(-2px) scale(1.03);
  }
  75% {
    -webkit-transform: rotate(-2deg) translateX(2px) scale(1.01);
            transform: rotate(-2deg) translateX(2px) scale(1.01);
  }
}

@keyframes pt01_righttop_katakata {
  0%,
  100% {
    -webkit-transform: rotate(0deg) translateX(0) scale(1);
            transform: rotate(0deg) translateX(0) scale(1);
  }
  25% {
    -webkit-transform: rotate(2deg) translateX(-2px) scale(1.03);
            transform: rotate(2deg) translateX(-2px) scale(1.03);
  }
  75% {
    -webkit-transform: rotate(-2deg) translateX(2px) scale(1.01);
            transform: rotate(-2deg) translateX(2px) scale(1.01);
  }
}

@-webkit-keyframes pt02_righttop_katakata {
  0%,
  100% {
    -webkit-transform: rotate(90deg) scaleX(-1) scale(1);
            transform: rotate(90deg) scaleX(-1) scale(1);
  }
  50% {
    -webkit-transform: rotate(93deg) scaleX(-1) scale(1.05);
            transform: rotate(93deg) scaleX(-1) scale(1.05);
  }
}

@keyframes pt02_righttop_katakata {
  0%,
  100% {
    -webkit-transform: rotate(90deg) scaleX(-1) scale(1);
            transform: rotate(90deg) scaleX(-1) scale(1);
  }
  50% {
    -webkit-transform: rotate(93deg) scaleX(-1) scale(1.05);
            transform: rotate(93deg) scaleX(-1) scale(1.05);
  }
}

@-webkit-keyframes pt03_righttop_katakata {
  0%,
  100% {
    -webkit-transform: rotate(170deg) scale(1);
            transform: rotate(170deg) scale(1);
  }
  40% {
    -webkit-transform: rotate(174deg) scale(1.03);
            transform: rotate(174deg) scale(1.03);
  }
  60% {
    -webkit-transform: rotate(166deg) scale(1.02);
            transform: rotate(166deg) scale(1.02);
  }
}

@keyframes pt03_righttop_katakata {
  0%,
  100% {
    -webkit-transform: rotate(170deg) scale(1);
            transform: rotate(170deg) scale(1);
  }
  40% {
    -webkit-transform: rotate(174deg) scale(1.03);
            transform: rotate(174deg) scale(1.03);
  }
  60% {
    -webkit-transform: rotate(166deg) scale(1.02);
            transform: rotate(166deg) scale(1.02);
  }
}

@-webkit-keyframes pt01_leftbottom_katakata {
  0%,
  100% {
    -webkit-transform: rotate(0deg) scale(1);
            transform: rotate(0deg) scale(1);
  }
  25% {
    -webkit-transform: rotate(2deg) scale(1.03);
            transform: rotate(2deg) scale(1.03);
  }
  75% {
    -webkit-transform: rotate(-2deg) scale(1.02);
            transform: rotate(-2deg) scale(1.02);
  }
}

@keyframes pt01_leftbottom_katakata {
  0%,
  100% {
    -webkit-transform: rotate(0deg) scale(1);
            transform: rotate(0deg) scale(1);
  }
  25% {
    -webkit-transform: rotate(2deg) scale(1.03);
            transform: rotate(2deg) scale(1.03);
  }
  75% {
    -webkit-transform: rotate(-2deg) scale(1.02);
            transform: rotate(-2deg) scale(1.02);
  }
}

@-webkit-keyframes pt02_leftbottom_katakata {
  0%,
  100% {
    -webkit-transform: rotate(90deg) scale(1);
            transform: rotate(90deg) scale(1);
  }
  50% {
    -webkit-transform: rotate(96deg) scale(1.05);
            transform: rotate(96deg) scale(1.05);
  }
}

@keyframes pt02_leftbottom_katakata {
  0%,
  100% {
    -webkit-transform: rotate(90deg) scale(1);
            transform: rotate(90deg) scale(1);
  }
  50% {
    -webkit-transform: rotate(96deg) scale(1.05);
            transform: rotate(96deg) scale(1.05);
  }
}

@-webkit-keyframes pt03_leftbottom_katakata {
  0%,
  100% {
    -webkit-transform: rotate(180deg) translateX(0) scale(1);
            transform: rotate(180deg) translateX(0) scale(1);
  }
  30% {
    -webkit-transform: rotate(182deg) translateX(-4px) scale(1.02);
            transform: rotate(182deg) translateX(-4px) scale(1.02);
  }
  70% {
    -webkit-transform: rotate(178deg) translateX(3px) scale(1.01);
            transform: rotate(178deg) translateX(3px) scale(1.01);
  }
}

@keyframes pt03_leftbottom_katakata {
  0%,
  100% {
    -webkit-transform: rotate(180deg) translateX(0) scale(1);
            transform: rotate(180deg) translateX(0) scale(1);
  }
  30% {
    -webkit-transform: rotate(182deg) translateX(-4px) scale(1.02);
            transform: rotate(182deg) translateX(-4px) scale(1.02);
  }
  70% {
    -webkit-transform: rotate(178deg) translateX(3px) scale(1.01);
            transform: rotate(178deg) translateX(3px) scale(1.01);
  }
}

@-webkit-keyframes pt01_rightbottom_katakata {
  0%,
  100% {
    -webkit-transform: rotate(0deg) scale(1);
            transform: rotate(0deg) scale(1);
  }
  25% {
    -webkit-transform: rotate(2deg) scale(1.03);
            transform: rotate(2deg) scale(1.03);
  }
  75% {
    -webkit-transform: rotate(-2deg) scale(1.02);
            transform: rotate(-2deg) scale(1.02);
  }
}

@keyframes pt01_rightbottom_katakata {
  0%,
  100% {
    -webkit-transform: rotate(0deg) scale(1);
            transform: rotate(0deg) scale(1);
  }
  25% {
    -webkit-transform: rotate(2deg) scale(1.03);
            transform: rotate(2deg) scale(1.03);
  }
  75% {
    -webkit-transform: rotate(-2deg) scale(1.02);
            transform: rotate(-2deg) scale(1.02);
  }
}

@-webkit-keyframes pt02_rightbottom_katakata {
  0%,
  100% {
    -webkit-transform: rotate(180deg) scaleY(-1) scale(1);
            transform: rotate(180deg) scaleY(-1) scale(1);
  }
  50% {
    -webkit-transform: rotate(183deg) scaleY(-1) scale(1.04);
            transform: rotate(183deg) scaleY(-1) scale(1.04);
  }
}

@keyframes pt02_rightbottom_katakata {
  0%,
  100% {
    -webkit-transform: rotate(180deg) scaleY(-1) scale(1);
            transform: rotate(180deg) scaleY(-1) scale(1);
  }
  50% {
    -webkit-transform: rotate(183deg) scaleY(-1) scale(1.04);
            transform: rotate(183deg) scaleY(-1) scale(1.04);
  }
}

@-webkit-keyframes pt03_rightbottom_katakata {
  0%,
  100% {
    -webkit-transform: rotate(120deg) scaleY(-1) translateX(0) scale(1);
            transform: rotate(120deg) scaleY(-1) translateX(0) scale(1);
  }
  30% {
    -webkit-transform: rotate(122deg) scaleY(-1) translateX(-4px) scale(1.02);
            transform: rotate(122deg) scaleY(-1) translateX(-4px) scale(1.02);
  }
  70% {
    -webkit-transform: rotate(118deg) scaleY(-1) translateX(3px) scale(1.01);
            transform: rotate(118deg) scaleY(-1) translateX(3px) scale(1.01);
  }
}

@keyframes pt03_rightbottom_katakata {
  0%,
  100% {
    -webkit-transform: rotate(120deg) scaleY(-1) translateX(0) scale(1);
            transform: rotate(120deg) scaleY(-1) translateX(0) scale(1);
  }
  30% {
    -webkit-transform: rotate(122deg) scaleY(-1) translateX(-4px) scale(1.02);
            transform: rotate(122deg) scaleY(-1) translateX(-4px) scale(1.02);
  }
  70% {
    -webkit-transform: rotate(118deg) scaleY(-1) translateX(3px) scale(1.01);
            transform: rotate(118deg) scaleY(-1) translateX(3px) scale(1.01);
  }
}

.room__item.lefttop {
  background-color: #37485a;
  overflow: hidden;
}

.room__item.lefttop img {
  width: 60%;
  height: auto;
  position: absolute;
  bottom: 0;
  right: 0;
}

@media (max-width: 767px) {
  .room__item.lefttop img.pt01 {
    width: 180%;
    top: 0;
    right: -130px;
    -webkit-transform: rotate(270deg);
            transform: rotate(270deg);
    -webkit-animation: pt01_lefttop_katakata 0.8s infinite ease-in-out;
            animation: pt01_lefttop_katakata 0.8s infinite ease-in-out;
    -webkit-transform-origin: center center;
            transform-origin: center center;
  }
  .room__item.lefttop img.pt02 {
    width: 130%;
    top: 30%;
    right: 0;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-animation: pt02_lefttop_katakata 0.8s infinite ease-in-out;
            animation: pt02_lefttop_katakata 0.8s infinite ease-in-out;
    -webkit-transform-origin: center center;
            transform-origin: center center;
  }
  .room__item.lefttop img.pt03 {
    width: 150%;
    top: auto;
    bottom: 10%;
    right: 0;
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
    -webkit-animation: pt03_lefttop_katakata 0.8s infinite ease-in-out;
            animation: pt03_lefttop_katakata 0.8s infinite ease-in-out;
    -webkit-transform-origin: center center;
            transform-origin: center center;
  }
}

.room__item.righttop {
  background-color: #6b655d;
  overflow: hidden;
}

.room__item.righttop img {
  width: 58%;
  height: auto;
  position: absolute;
  bottom: 0;
  left: 0;
}

@media (max-width: 767px) {
  .room__item.righttop img.pt01 {
    width: 100%;
    top: 40%;
    right: -130px;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-animation: pt01_righttop_katakata 0.9s infinite ease-in-out;
            animation: pt01_righttop_katakata 0.9s infinite ease-in-out;
    -webkit-transform-origin: center center;
            transform-origin: center center;
  }
  .room__item.righttop img.pt02 {
    width: 130%;
    top: 34%;
    right: 0;
    -webkit-transform: rotate(90deg) scaleX(-1);
            transform: rotate(90deg) scaleX(-1);
    -webkit-animation: pt02_righttop_katakata 0.9s infinite ease-in-out;
            animation: pt02_righttop_katakata 0.9s infinite ease-in-out;
    -webkit-transform-origin: center center;
            transform-origin: center center;
  }
  .room__item.righttop img.pt03 {
    width: 120%;
    top: auto;
    bottom: 20%;
    right: auto;
    left: -20px;
    -webkit-transform: rotate(170deg);
            transform: rotate(170deg);
    -webkit-animation: pt03_righttop_katakata 1.2s infinite ease-in-out;
            animation: pt03_righttop_katakata 1.2s infinite ease-in-out;
    -webkit-transform-origin: center center;
            transform-origin: center center;
  }
}

.room__item.leftbottom {
  background-color: #4f462e;
  overflow: hidden;
}

.room__item.leftbottom img {
  width: 60%;
  height: auto;
  position: absolute;
  top: 0;
  right: 0;
}

@media (max-width: 767px) {
  .room__item.leftbottom img.pt01 {
    width: 120%;
    top: 0;
    right: 0;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-animation: pt01_leftbottom_katakata 0.9s infinite ease-in-out;
            animation: pt01_leftbottom_katakata 0.9s infinite ease-in-out;
    -webkit-transform-origin: center center;
            transform-origin: center center;
  }
  .room__item.leftbottom img.pt02 {
    width: 150%;
    top: 30%;
    right: -90px;
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
    -webkit-animation: pt02_leftbottom_katakata 1s infinite ease-in-out;
            animation: pt02_leftbottom_katakata 1s infinite ease-in-out;
    -webkit-transform-origin: center center;
            transform-origin: center center;
  }
  .room__item.leftbottom img.pt03 {
    width: 170%;
    top: auto;
    bottom: 0%;
    left: -30px;
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
    -webkit-animation: pt03_leftbottom_katakata 1.2s infinite ease-in-out;
            animation: pt03_leftbottom_katakata 1.2s infinite ease-in-out;
    -webkit-transform-origin: center center;
            transform-origin: center center;
  }
}

.room__item.rightbottom {
  background-color: #673632;
  overflow: hidden;
}

.room__item.rightbottom img {
  width: 57.5%;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
}

@media (max-width: 767px) {
  .room__item.rightbottom img.pt01 {
    width: 150%;
    top: 20%;
    right: 0;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-animation: pt01_rightbottom_katakata 0.9s infinite ease-in-out;
            animation: pt01_rightbottom_katakata 0.9s infinite ease-in-out;
    -webkit-transform-origin: center center;
            transform-origin: center center;
  }
  .room__item.rightbottom img.pt02 {
    width: 130%;
    top: 0;
    left: 10px;
    -webkit-transform: rotate(180deg) scaleY(-1);
            transform: rotate(180deg) scaleY(-1);
    -webkit-animation: pt02_rightbottom_katakata 1s infinite ease-in-out;
            animation: pt02_rightbottom_katakata 1s infinite ease-in-out;
    -webkit-transform-origin: center center;
            transform-origin: center center;
  }
  .room__item.rightbottom img.pt03 {
    width: 150%;
    top: 5%;
    left: 10px;
    -webkit-transform: rotate(120deg) scaleY(-1);
            transform: rotate(120deg) scaleY(-1);
    -webkit-animation: pt03_rightbottom_katakata 1.1s infinite ease-in-out;
            animation: pt03_rightbottom_katakata 1.1s infinite ease-in-out;
    -webkit-transform-origin: center center;
            transform-origin: center center;
  }
}

.room__logoblock {
  width: 20%;
  height: auto;
  position: absolute;
  bottom: 2.78%;
  left: 1.56%;
  z-index: 999;
}

@media (max-width: 767px) {
  .room__logoblock {
    width: 30%;
    height: 130px;
    top: 3%;
    left: 5%;
  }
}

.room__logo {
  width: 50%;
  min-width: 80px;
  margin-bottom: 7%;
}

.room__address {
  font-size: clamp(10px, 1.1vw, 16px);
  letter-spacing: 0px;
}

.room__btn {
  display: block;
  width: 100%;
  height: 100%;
}

.room__btn img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  vertical-align: bottom;
}

@-webkit-keyframes katakata01 {
  0%,
  100% {
    -webkit-transform: rotate(0deg) translateX(0) scale(1);
            transform: rotate(0deg) translateX(0) scale(1);
  }
  25% {
    -webkit-transform: rotate(2deg) translateX(-2px) scale(1.02);
            transform: rotate(2deg) translateX(-2px) scale(1.02);
  }
  75% {
    -webkit-transform: rotate(-2deg) translateX(2px) scale(1.03);
            transform: rotate(-2deg) translateX(2px) scale(1.03);
  }
}

@keyframes katakata01 {
  0%,
  100% {
    -webkit-transform: rotate(0deg) translateX(0) scale(1);
            transform: rotate(0deg) translateX(0) scale(1);
  }
  25% {
    -webkit-transform: rotate(2deg) translateX(-2px) scale(1.02);
            transform: rotate(2deg) translateX(-2px) scale(1.02);
  }
  75% {
    -webkit-transform: rotate(-2deg) translateX(2px) scale(1.03);
            transform: rotate(-2deg) translateX(2px) scale(1.03);
  }
}

@-webkit-keyframes katakata02 {
  0%,
  100% {
    -webkit-transform: rotate(0deg) scale(1);
            transform: rotate(0deg) scale(1);
  }
  25% {
    -webkit-transform: rotate(-1.5deg) scale(1.02);
            transform: rotate(-1.5deg) scale(1.02);
  }
  75% {
    -webkit-transform: rotate(1.5deg) scale(1.01);
            transform: rotate(1.5deg) scale(1.01);
  }
}

@keyframes katakata02 {
  0%,
  100% {
    -webkit-transform: rotate(0deg) scale(1);
            transform: rotate(0deg) scale(1);
  }
  25% {
    -webkit-transform: rotate(-1.5deg) scale(1.02);
            transform: rotate(-1.5deg) scale(1.02);
  }
  75% {
    -webkit-transform: rotate(1.5deg) scale(1.01);
            transform: rotate(1.5deg) scale(1.01);
  }
}

@-webkit-keyframes katakata03 {
  0%,
  100% {
    -webkit-transform: rotate(0deg) scale(1);
            transform: rotate(0deg) scale(1);
  }
  40% {
    -webkit-transform: rotate(1.2deg) scale(1.02);
            transform: rotate(1.2deg) scale(1.02);
  }
  60% {
    -webkit-transform: rotate(-1.2deg) scale(1.01);
            transform: rotate(-1.2deg) scale(1.01);
  }
}

@keyframes katakata03 {
  0%,
  100% {
    -webkit-transform: rotate(0deg) scale(1);
            transform: rotate(0deg) scale(1);
  }
  40% {
    -webkit-transform: rotate(1.2deg) scale(1.02);
            transform: rotate(1.2deg) scale(1.02);
  }
  60% {
    -webkit-transform: rotate(-1.2deg) scale(1.01);
            transform: rotate(-1.2deg) scale(1.01);
  }
}

@-webkit-keyframes katakata04 {
  0%,
  100% {
    -webkit-transform: rotate(0deg) scale(1);
            transform: rotate(0deg) scale(1);
  }
  30% {
    -webkit-transform: rotate(-2deg) scale(1.03);
            transform: rotate(-2deg) scale(1.03);
  }
  70% {
    -webkit-transform: rotate(2deg) scale(1.02);
            transform: rotate(2deg) scale(1.02);
  }
}

@keyframes katakata04 {
  0%,
  100% {
    -webkit-transform: rotate(0deg) scale(1);
            transform: rotate(0deg) scale(1);
  }
  30% {
    -webkit-transform: rotate(-2deg) scale(1.03);
            transform: rotate(-2deg) scale(1.03);
  }
  70% {
    -webkit-transform: rotate(2deg) scale(1.02);
            transform: rotate(2deg) scale(1.02);
  }
}

.katakata01,
.katakata02,
.katakata03,
.katakata04 {
  -webkit-transform-origin: center center;
          transform-origin: center center;
}

.room__btn:hover .katakata01 {
  -webkit-animation: katakata01 0.6s infinite ease-in-out;
          animation: katakata01 0.6s infinite ease-in-out;
}

.room__btn:hover .katakata02 {
  -webkit-animation: katakata02 0.8s infinite ease-in-out;
          animation: katakata02 0.8s infinite ease-in-out;
}

.room__btn:hover .katakata03 {
  -webkit-animation: katakata03 0.7s infinite ease-in-out;
          animation: katakata03 0.7s infinite ease-in-out;
}

.room__btn:hover .katakata04 {
  -webkit-animation: katakata04 0.9s infinite ease-in-out;
          animation: katakata04 0.9s infinite ease-in-out;
}