.zen-old-mincho-regular {
  font-family: "Zen Old Mincho", serif;
  font-weight: 400;
  font-style: normal;
}

.ja {
  font-family: "Hina Mincho", serif;
  font-weight: 400;
  font-style: normal;
}

body {
  font-family: "Hina Mincho", serif;
  font-weight: 400;
  font-style: normal;
  width: 100%;
  overflow: hidden;
}

body .background {
  background: url(../img/kominka-night.jpg);
  background-size: cover;
  background-position: center;
  position: fixed;
  height: 100vh;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -100;
  opacity: 0.15;
}

.mv {
  height: 100vh;
  position: relative;
  background-color: #fff;
}

.mv .text {
  color: #000;
  font-family: "Hina Mincho", serif;
  font-weight: 400;
  font-style: normal;
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
  padding: 5rem 1.5rem;
  background-color: #fff;
  -webkit-animation-name: fadein;
          animation-name: fadein;
  -webkit-animation-duration: 5s;
          animation-duration: 5s;
  -webkit-animation-timing-function: ease-out;
          animation-timing-function: ease-out;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

@media screen and (min-width: 1024px) {
  .mv .text {
    -webkit-writing-mode: inherit;
        -ms-writing-mode: inherit;
            writing-mode: inherit;
    padding: 2rem 4rem;
  }
}

.mv .text h2 {
  font-size: 1.4rem;
}

@media screen and (min-width: 1024px) {
  .mv .text h2 {
    font-size: 2rem;
  }
}

.mv .text span {
  font-size: 1rem;
  padding: 1rem 0;
  -webkit-writing-mode: initial;
      -ms-writing-mode: initial;
          writing-mode: initial;
}

@media screen and (min-width: 768px) {
  .mv .text span {
    padding: 0 1rem;
    font-size: 1.6rem;
  }
}

.mv .text:nth-of-type(2) {
  position: absolute;
  top: 15rem;
  right: 0;
  z-index: 50;
}

@media screen and (min-width: 1024px) {
  .mv .text:nth-of-type(2) {
    display: none;
  }
}

.mv .text:nth-of-type(3) {
  position: absolute;
  left: 0;
  top: 20rem;
  z-index: 50;
  white-space: nowrap;
}

@media screen and (min-width: 1024px) {
  .mv .text:nth-of-type(3) {
    display: none;
  }
}

.mv .text2 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 50;
  text-align: center;
  width: 100%;
  font-size: 1rem;
  background: #7f9497;
  color: #fff;
  padding: 1rem 0;
}

.mv .text2 span {
  padding: 0 0.5rem;
}

.mv .logo {
  position: absolute;
  width: 22%;
  height: auto;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 50;
  display: none;
}

@media screen and (min-width: 1024px) {
  .mv .logo {
    display: block;
  }
}

.mv .reservation-btn {
  position: fixed;
  bottom: 2rem;
  left: 2rem;
  z-index: 100;
  border: #7f9497 solid 0.1rem;
  padding: 0.5rem;
}

.mv .reservation-btn .btn-bl {
  background-color: #7f9497;
  width: 100%;
}

.mv .reservation-btn .btn-bl a {
  color: #fff;
  padding: 1rem 5rem;
}

@media screen and (min-width: 1024px) {
  .mv .reservation-btn .btn-bl a {
    padding: 2rem 8rem;
  }
}

.mv .reservation-btn .btn-bl p {
  color: #fff;
}

@media screen and (min-width: 1024px) {
  .mv .reservation-btn .btn-bl p {
    font-size: 2rem;
  }
}

.mv .translation {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  background-color: #7f9497;
  z-index: 500;
  color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 0.5rem;
}

@media screen and (min-width: 1024px) {
  .mv .translation {
    top: 10rem;
    bottom: inherit;
    font-size: 1.6rem;
  }
}

.mv .translation p {
  padding: 0 0.5rem;
}

.mv .translation p span {
  color: #1b1b1b;
}

.my-mv {
  height: 100vh;
  position: relative;
  overflow: hidden;
  margin: 0 auto;
}

.my-mv .back-white {
  position: absolute;
  width: 100%;
  height: 100vh;
  background: #fff;
  top: 0;
  left: 0;
  opacity: 0.4;
}

.main_imgBox {
  height: 100vh;
  overflow: hidden;
  position: relative;
  background-color: #fff;
  -webkit-animation-name: fadein;
          animation-name: fadein;
  -webkit-animation-duration: 3s;
          animation-duration: 3s;
  -webkit-animation-timing-function: ease-out;
          animation-timing-function: ease-out;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  width: 100%;
}

@-webkit-keyframes fadein {
  0% {
    opacity: 0;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes fadein {
  0% {
    opacity: 0;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

.main_logo {
  z-index: 11;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 50%;
  height: auto;
}

.main_img {
  z-index: 10;
  opacity: 0;
  width: 100%;
  height: 100vh;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  left: 0;
  top: 0;
  -webkit-animation: anime 30s 0s infinite;
  animation: anime 30s 0s infinite;
}

.main_img:nth-of-type(1) {
  background-image: url(../img/kominka-main-3.jpg);
  background-position: left;
}

.main_img:nth-of-type(2) {
  -webkit-animation-delay: 6s;
  animation-delay: 6s;
  background-image: url(../img/kominka-main-2.jpg);
}

.main_img:nth-of-type(3) {
  -webkit-animation-delay: 12s;
  animation-delay: 12s;
  background-image: url(../img/kominka-main-5.jpg);
}

.main_img:nth-of-type(4) {
  -webkit-animation-delay: 18s;
  animation-delay: 18s;
  background-image: url(../img/kominka-main-4.jpg);
}

.main_img:nth-of-type(5) {
  -webkit-animation-delay: 24s;
  animation-delay: 24s;
  background-image: url(../img/kominka-main-1.jpg);
}

.main_imgM {
  opacity: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  position: absolute;
  left: 0;
  top: 0;
  -webkit-animation: anime 30s 0s infinite;
  animation: anime 30s 0s infinite;
}

.main_imgM:nth-of-type(2) {
  -webkit-animation-delay: 6s;
  animation-delay: 6s;
}

.main_imgM:nth-of-type(3) {
  -webkit-animation-delay: 12s;
  animation-delay: 12s;
}

.main_imgM:nth-of-type(4) {
  -webkit-animation-delay: 18s;
  animation-delay: 18s;
}

.main_imgM:nth-of-type(5) {
  -webkit-animation-delay: 24s;
  animation-delay: 24s;
}

@keyframes anime {
  0% {
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  17% {
    opacity: 1;
  }
  25% {
    opacity: 0;
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
    z-index: 9;
  }
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes anime {
  0% {
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  17% {
    opacity: 1;
  }
  25% {
    opacity: 0;
    -webkit-transform: scale(1.2);
    z-index: 9;
  }
  100% {
    opacity: 0;
  }
}

.scrollbar-text_05 {
  display: inline-block;
  position: absolute;
  bottom: 5rem;
  padding: 10px 10px 110px;
  color: #fff;
  font-size: 14px;
  font-family: serif;
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  -webkit-writing-mode: vertical-lr;
      -ms-writing-mode: tb-lr;
          writing-mode: vertical-lr;
  right: 2rem;
  z-index: 100;
}

.scrollbar_05 {
  position: absolute;
  right: 4rem;
  bottom: 5rem;
  z-index: 100;
}

.scrollbar_05::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 1px;
  height: 100px;
  background: #fff;
  -webkit-animation: liner 2.5s cubic-bezier(1, 0, 0, 1) infinite;
          animation: liner 2.5s cubic-bezier(1, 0, 0, 1) infinite;
}

@-webkit-keyframes liner {
  0% {
    -webkit-transform: scale(1, 0);
            transform: scale(1, 0);
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
  }
  30% {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
  }
  70% {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
    -webkit-transform-origin: 0 100%;
            transform-origin: 0 100%;
  }
  100% {
    -webkit-transform: scale(1, 0);
            transform: scale(1, 0);
    -webkit-transform-origin: 0 100%;
            transform-origin: 0 100%;
  }
}

@keyframes liner {
  0% {
    -webkit-transform: scale(1, 0);
            transform: scale(1, 0);
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
  }
  30% {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
  }
  70% {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
    -webkit-transform-origin: 0 100%;
            transform-origin: 0 100%;
  }
  100% {
    -webkit-transform: scale(1, 0);
            transform: scale(1, 0);
    -webkit-transform-origin: 0 100%;
            transform-origin: 0 100%;
  }
}

.news {
  background-color: #fff;
  padding: 5rem 2rem;
}

@media screen and (min-width: 1024px) {
  .news {
    padding: 8rem 20%;
  }
}

.news h4.pt-cv-title {
  font-size: 1.4rem;
}

.news .pt-cv-blockgrid.list1 .pt-cv-content-item {
  border-bottom: #7f9497 solid 0.1rem;
}

.concept {
  height: auto;
  padding: 5rem 2rem 3rem;
  background-color: #fff;
  position: relative;
}

@media screen and (min-width: 1024px) {
  .concept {
    padding: 10rem 15% 15rem;
  }
}

.concept .concept-text {
  padding: 1rem 0 1rem 2rem;
  font-size: 1.6rem;
}

@media screen and (min-width: 1024px) {
  .concept .concept-text {
    font-size: 2.4rem;
    padding: 1rem 0 1rem 4rem;
  }
}

.concept .top-text {
  padding: 2rem;
  opacity: 0;
  -webkit-transition: 1.3s;
  transition: 1.3s;
  -webkit-transform: translate(1rem);
          transform: translate(1rem);
}

@media screen and (min-width: 1024px) {
  .concept .top-text {
    text-align: left;
    padding: 5rem 0 5rem 4rem;
  }
}

.concept .top-text.is-scrollIn {
  opacity: 1;
  -webkit-transform: translate(0);
          transform: translate(0);
}

.concept .top-text p {
  color: #323232;
  font-family: "Cormorant", serif;
  font-optical-sizing: auto;
  font-style: normal;
  line-height: 2;
  letter-spacing: 1.3;
}

@media screen and (min-width: 768px) {
  .concept .top-text p {
    font-size: 1.6rem;
  }
}

@media screen and (min-width: 1024px) {
  .concept .top-text p {
    font-size: 2rem;
  }
}

.concept .top-text p span {
  font-size: 1.4rem;
  color: black;
  border-bottom: #3B6A6F solid 0.05rem;
  padding: 0 0.2rem 0.2rem;
}

@media screen and (min-width: 768px) {
  .concept .top-text p span {
    font-size: 2rem;
  }
}

@media screen and (min-width: 1024px) {
  .concept .top-text p span {
    font-size: 2.6rem;
  }
}

.concept .img-box {
  position: absolute;
  width: 50%;
  top: 0;
  right: 0;
  height: 300%;
  z-index: 100;
}

.concept .img-box img:nth-child(1) {
  width: 70%;
  margin: 10rem 2rem 5rem;
}

.concept .img-box img:nth-child(2) {
  width: 50%;
  margin: 5rem 2rem 5rem auto;
}

.concept .img-box img:nth-child(3) {
  width: 60%;
  margin: 5rem auto 5rem;
}

.section-title {
  opacity: 0.7;
}

.section-title h3 {
  color: #4A605C;
  font-size: 3rem;
  font-family: "Cormorant", serif;
  font-optical-sizing: auto;
  font-style: normal;
  position: relative;
  padding: 0 0 0 4rem;
}

.section-title h3::before {
  content: "";
  width: 5rem;
  height: 0.4rem;
  background-color: #4A605C;
  position: absolute;
  top: 50%;
  left: -2rem;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

@media screen and (min-width: 1024px) {
  .section-title h3::before {
    width: 10rem;
    left: -7rem;
  }
}

@media screen and (min-width: 1024px) {
  .section-title h3 {
    font-size: 8rem;
  }
}

.section-title p {
  font-size: 1.6rem;
  padding: 1rem 0 0 4rem;
}

@media screen and (min-width: 1024px) {
  .section-title p {
    font-size: 2rem;
    padding: 1rem 0 0 7rem;
  }
}

.style {
  height: 5rem;
  background-color: #fff;
  height: auto;
}

.style .loop {
  overflow: hidden;
}

.style .loop__box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100vw;
}

.style .loop__box img {
  min-width: 140vw;
}

.style .loop__box img:first-child {
  -webkit-animation: loop 50s -25s linear infinite;
          animation: loop 50s -25s linear infinite;
}

.style .loop__box img:last-child {
  -webkit-animation: loop2 50s linear infinite;
          animation: loop2 50s linear infinite;
}

@-webkit-keyframes loop {
  0% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
  to {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}

@keyframes loop {
  0% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
  to {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}

@-webkit-keyframes loop2 {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(-200%);
            transform: translateX(-200%);
  }
}

@keyframes loop2 {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(-200%);
            transform: translateX(-200%);
  }
}

.history {
  padding: 5rem 2rem;
  position: relative;
  background: url("../img/kominka-history-back.jpg");
  background-size: cover;
}

@media screen and (min-width: 768px) {
  .history {
    padding: 10rem 10%;
  }
}

@media screen and (min-width: 1024px) {
  .history {
    padding: 15rem 15%;
  }
}

.history .back {
  height: 150%;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: -10;
}

.history .bar {
  width: 0.2rem;
  height: 100%;
  background-color: #D8C8A3;
  position: absolute;
  bottom: 0;
  left: 2rem;
  z-index: 10;
}

@media screen and (min-width: 768px) {
  .history .bar {
    left: 10%;
  }
}

@media screen and (min-width: 1024px) {
  .history .bar {
    height: calc(100% + 15rem);
    left: 15%;
  }
}

.history .c {
  padding: 0 0 4rem 4rem;
  color: #000;
}

@media screen and (min-width: 768px) {
  .history .c {
    padding: 5rem 0 4rem 4rem;
  }
}

.history .c .title {
  position: relative;
  opacity: 0;
  -webkit-transition: 1.3s;
  transition: 1.3s;
  -webkit-transform: translateX(3rem);
          transform: translateX(3rem);
}

.history .c .title.is-scrollIn {
  opacity: 1;
  -webkit-transform: translate(0);
          transform: translate(0);
}

.history .c .title h4 {
  font-size: 1.8rem;
  margin: 0 0 1.5rem 0;
}

@media screen and (min-width: 1024px) {
  .history .c .title h4 {
    font-size: 2.4rem;
  }
}

.history .c .title::before {
  content: "";
  width: 2rem;
  height: 2rem;
  position: absolute;
  top: 0.2rem;
  left: -5rem;
  background-color: #D8C8A3;
  border-radius: 50%;
}

@media screen and (min-width: 1024px) {
  .history .c .title::before {
    width: 3rem;
    height: 3rem;
  }
}

.history .c .text {
  opacity: 0;
  -webkit-transition: 2s;
  transition: 2s;
  -webkit-transform: translateY(3rem);
          transform: translateY(3rem);
}

.history .c .text.is-scrollIn {
  opacity: 1;
  -webkit-transform: translate(0);
          transform: translate(0);
}

@media screen and (min-width: 1024px) {
  .history .c .text {
    font-size: 1.8rem;
  }
}

.history .c img {
  width: 60%;
  height: auto;
  margin: 0 3rem 0 auto;
  opacity: 0;
  -webkit-transition: 2s;
  transition: 2s;
}

@media screen and (min-width: 768px) {
  .history .c img {
    width: 50%;
  }
}

@media screen and (min-width: 1024px) {
  .history .c img {
    width: 30%;
    margin: 0 auto 0 0;
  }
}

.history .c img.is-scrollIn {
  opacity: 1;
  -webkit-transform: translate(0);
          transform: translate(0);
}

.feature {
  padding: 0 0 8rem;
  background-color: rgba(255, 255, 255, 0);
}

@media screen and (min-width: 1024px) {
  .feature {
    padding: 0 10% 15rem;
  }
}

.feature .menuma-img {
  height: 20rem;
  width: 100%;
  background: url(../img/next-10.jpg);
  background-size: cover;
  background-position: center;
  margin: 0 0 5rem;
}

@media screen and (min-width: 1024px) {
  .feature .menuma-img {
    margin: 0 0 10rem;
    height: 35rem;
  }
}

@media screen and (min-width: 1024px) {
  .feature .flex-box {
    padding: 5rem 0 10rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
}

.feature .c {
  padding: 5rem 0 0;
  opacity: 0;
  -webkit-transition: 2s;
  transition: 2s;
  -webkit-transform: translateY(3rem);
          transform: translateY(3rem);
}

@media screen and (min-width: 1024px) {
  .feature .c {
    width: 45%;
  }
}

.feature .c.is-scrollIn {
  opacity: 1;
  -webkit-transform: translate(0);
          transform: translate(0);
}

.feature .c .f-img-1,
.feature .c .f-img-2,
.feature .c .f-img-3,
.feature .c .f-img-4,
.feature .c .f-img-5 {
  width: 100%;
  height: 25rem;
  background-size: cover;
}

@media screen and (min-width: 1024px) {
  .feature .c .f-img-1,
  .feature .c .f-img-2,
  .feature .c .f-img-3,
  .feature .c .f-img-4,
  .feature .c .f-img-5 {
    height: 35rem;
  }
}

.feature .c .ca-1::before {
  content: "01";
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  left: 2rem;
  font-size: 2.4rem;
  color: #4A605C;
}

.feature .c .ca-2::before {
  content: "02";
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  left: 2rem;
  font-size: 2.4rem;
  color: #4A605C;
}

.feature .c .ca-3::before {
  content: "03";
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  left: 2rem;
  font-size: 2.4rem;
  color: #4A605C;
}

.feature .c .ca-4::before {
  content: "04";
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  left: 2rem;
  font-size: 2.4rem;
  color: #4A605C;
}

.feature .c .ca-5::before {
  content: "05";
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  left: 2rem;
  font-size: 2.4rem;
  color: #4A605C;
}

.feature .c .catch {
  padding: 2rem 0 2rem 8rem;
  position: relative;
  overflow: hidden;
}

.feature .c .catch p {
  font-size: 1.6rem;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  position: relative;
}

.feature .c .catch p::after {
  content: "";
  width: 20rem;
  height: 0.1rem;
  background-color: #4A605C;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  right: -22rem;
}

.feature .c .text {
  text-align: left;
  padding: 2rem 2rem 2rem 2rem;
}

@media screen and (min-width: 1024px) {
  .feature .c .text {
    padding: 2rem;
  }
}

.feature .hscroll {
  width: 100%;
  height: 25rem;
  position: relative;
  border: 1px solid lightgray;
}

@media screen and (min-width: 1024px) {
  .feature .hscroll {
    width: 50rem;
    height: 35rem;
  }
}

.feature .hscroll .hsc-1 {
  background: url(../img/kominka-n-f-4.jpg);
  background-size: cover;
  background-position: center;
}

.feature .hscroll .hsc-2 {
  background: url(../img/k-s-1.jpg);
  background-size: cover;
  background-position: center;
}

.feature .hscroll .hsc-3 {
  background: url(../img/k-s-2.jpg);
  background-size: cover;
  background-position: center;
}

.feature .hscroll .hsc-4 {
  background: url(../img/kominka-n-f-3.jpg);
  background-size: cover;
  background-position: center;
}

.feature .hscroll .hsc-5 {
  background: url(../img/k-e-1.jpg);
  background-size: cover;
  background-position: center;
}

.feature .hscroll .hsc-6 {
  background: url(../img/k-e-2.jpg);
  background-size: cover;
  background-position: center;
}

.feature .hscroll .hsc-7 {
  background: url(../img/k-e-3.jpg);
  background-size: cover;
  background-position: center;
}

.feature .hscroll ul {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  white-space: nowrap;
  -ms-scroll-snap-type: x mandatory;
      scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overflow-x: scroll;
}

.feature .hscroll img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.feature .hscroll li {
  list-style: none;
  display: inline-block;
  scroll-snap-align: center;
  width: 100%;
  height: 100%;
}

.feature .arrow {
  top: 0;
  position: absolute;
  width: 8%;
  height: 100%;
  cursor: pointer;
}

.feature .arrow:before {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  border-left: 4px solid #fff;
  border-bottom: 4px solid #fff;
}

.feature .left {
  left: 0px;
}

.feature .left:before {
  top: calc(50% - 10px);
  left: calc(50% - 4px);
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

.feature .right {
  right: 0;
}

.feature .right:before {
  top: calc(50% - 10px);
  right: calc(50% - 6px);
  -webkit-transform: rotate(-135deg);
          transform: rotate(-135deg);
}

@media screen and (min-width: 1024px) {
  .feature .c-j {
    width: 45%;
    padding: 10rem 0 0;
  }
}

.feature .c-j .text {
  text-align: left;
  padding: 2rem 2rem 2rem 2rem;
}

@media screen and (min-width: 1024px) {
  .feature .c-j .text {
    padding: 2rem;
  }
}

.feature .c-j .f-btn {
  text-align: center;
  padding: 2rem;
}

.feature .c-j .f-btn a {
  padding: 2rem;
  width: 100%;
  border: #3B6A6F 0.1rem solid;
  color: #3B6A6F;
  background-color: #fff;
}

.feature .f-img-1 {
  background: url("../img/kominka-n-3.jpg");
}

.feature .f-img-2 {
  background: url("../img/kominka-n-f-2.jpg");
}

.feature .f-img-3 {
  background: url("../img/kominka-n-f-3.jpg");
}

.feature .f-img-4 {
  background: url("../img/kominka-n-f-4.jpg");
}

.feature .f-img-5 {
  background: url("../img/activities-1.jpg");
}

.feature .c-c {
  opacity: 0;
  -webkit-transition: 2s;
  transition: 2s;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

@media screen and (min-width: 768px) {
  .feature .c-c {
    padding: 0 10%;
  }
}

.feature .c-c.is-scrollIn {
  opacity: 1;
  -webkit-transform: translate(0);
          transform: translate(0);
}

.feature .c-c .c {
  height: 50rem;
  position: relative;
  color: #000;
}

@media screen and (min-width: 768px) {
  .feature .c-c .c {
    height: 60rem;
  }
}

.feature .c-c .c .text-t {
  position: absolute;
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
  background-color: #fff;
  padding: 4rem 1.5rem;
  top: 10rem;
  left: 50%;
  font-size: 2rem;
  z-index: 100;
}

.feature .c-c .c .text-b {
  position: absolute;
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
  background-color: #fff;
  padding: 4rem 1.5rem;
  top: 20rem;
  right: 50%;
  font-size: 2rem;
  z-index: 100;
}

.feature .c-c .c .img-l {
  width: 65%;
  top: 5rem;
  left: -2rem;
  position: absolute;
}

@media screen and (min-width: 1024px) {
  .feature .c-c .c .img-l {
    width: 55%;
    top: 5rem;
    left: inherit;
    right: 50%;
  }
}

.feature .c-c .c .img-r {
  width: 65%;
  top: 30rem;
  right: -2rem;
  position: absolute;
}

@media screen and (min-width: 1024px) {
  .feature .c-c .c .img-r {
    width: 70%;
    top: 20rem;
    right: inherit;
    left: 50%;
  }
}

.floor {
  padding: 5rem 0 8rem;
  text-align: center;
  position: relative;
  background-color: #f5f5f5;
}

@media screen and (min-width: 1024px) {
  .floor {
    padding: 10rem 0;
  }
}

.floor .loop {
  overflow: hidden;
}

.floor .loop__box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100vw;
}

.floor .loop__box img {
  min-width: 140vw;
}

.floor .loop__box img:first-child {
  -webkit-animation: loop 50s -25s linear infinite;
          animation: loop 50s -25s linear infinite;
}

.floor .loop__box img:last-child {
  -webkit-animation: loop2 50s linear infinite;
          animation: loop2 50s linear infinite;
}

@keyframes loop {
  0% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
  to {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}

@keyframes loop2 {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(-200%);
            transform: translateX(-200%);
  }
}

.floor .title {
  position: relative;
  color: #1a1919;
  font-size: 2rem;
  padding: 10px 0 0.5rem;
  text-align: center;
  margin: 0 0 3rem;
  opacity: 0;
  -webkit-transition: 2s;
  transition: 2s;
  -webkit-transform: translateX(-3rem);
          transform: translateX(-3rem);
  position: relative;
  -webkit-box-reflect: below -10px -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0.5));
}

@media screen and (min-width: 1024px) {
  .floor .title {
    text-align: center;
    font-size: 2.8rem;
    margin: 0 0 5rem;
  }
}

.floor .title.is-scrollIn {
  opacity: 1;
  -webkit-transform: translate(0);
          transform: translate(0);
}

.floor .c-r {
  padding: 5rem 0 0;
  text-align: center;
}

@media screen and (min-width: 1024px) {
  .floor .c-r {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding: 8rem 0;
  }
}

.floor .c-r .c {
  padding: 0 0 5rem;
}

@media screen and (min-width: 1024px) {
  .floor .c-r .c {
    width: 25%;
    padding: 0;
  }
}

.floor .c-r .c .erea {
  padding: 1rem 2rem;
  position: relative;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  font-weight: bold;
  color: #1a1919;
  margin: 0 auto;
  border-bottom: #D8C8A3 solid 0.2rem;
}

@media screen and (min-width: 1024px) {
  .floor .c-r .c .erea {
    font-size: 1.8rem;
    font-weight: inherit;
  }
}

.floor .c-r .c .goods {
  padding: 2rem 0 0;
  position: relative;
}

.floor .c-r .c .goods p {
  margin: 0 0 1rem;
  position: relative;
  color: #1a1919;
}

@media screen and (min-width: 1024px) {
  .floor .c-r .c .goods p {
    font-size: 1.6rem;
    font-weight: inherit;
  }
}

.floor .equipment {
  padding: 0 2rem;
}

@media screen and (min-width: 1024px) {
  .floor .equipment {
    padding: 10rem 10%;
  }
}

.floor .equipment .free-service {
  padding: 5rem 0 2rem;
}

.floor .equipment .free-service h5 {
  font-size: 1.6rem;
  border-bottom: #D8C8A3 solid 0.2rem;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto 1rem;
  padding: 1rem 0;
}

@media screen and (min-width: 1024px) {
  .floor .equipment .free-service h5 {
    font-size: 2rem;
  }
}

.floor .equipment .text {
  padding: 0 0 2rem;
}

@media screen and (min-width: 1024px) {
  .floor .equipment .text {
    font-size: 1.6rem;
  }
}

@media screen and (min-width: 1024px) {
  .floor .equipment .amenity {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
}

.floor .equipment .amenity ul {
  padding: 2rem 0;
  background-color: #fff;
  margin: 0 0 2rem;
}

@media screen and (min-width: 1024px) {
  .floor .equipment .amenity ul {
    padding: 4rem 0;
    font-size: 1.6rem;
    width: 48%;
    margin: 0;
  }
}

.floor .equipment .amenity ul .e-title {
  position: relative;
  padding: 0 0 4rem;
  margin: 0 0 1rem;
}

.floor .equipment .amenity ul .e-title::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 0.1rem;
  background-color: #000;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  left: 0;
  z-index: 0;
}

.floor .equipment .amenity ul .e-title p {
  background-color: #fff;
  width: 70%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.floor .equipment .amenity ul li {
  text-align: center;
  padding: 0.1rem 0;
}

@media screen and (min-width: 1024px) {
  .floor .equipment .amenity ul li {
    font-size: 1.6rem;
    padding: 0.5rem 0;
  }
}

.floor .equipment .amenity ul .more a {
  padding: 1rem 2rem;
  border: #3B6A6F solid 0.1rem;
  width: 50%;
  margin: 0 auto;
}

.floor .equipment .amenity ul .t {
  position: relative;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
}

.floor .equipment .amenity ul .t::before {
  position: absolute;
  content: "";
  width: 2rem;
  height: 0.1rem;
  background-color: #000;
  top: 50%;
  left: -3rem;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.floor .equipment .amenity ul .t::after {
  position: absolute;
  content: "";
  width: 2rem;
  height: 0.1rem;
  background-color: #000;
  top: 50%;
  right: -3rem;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.price {
  padding: 5rem 0 5rem;
}

@media screen and (min-width: 1024px) {
  .price {
    padding: 10rem 10% 15rem;
  }
}

@media screen and (min-width: 1024px) {
  .price .section-title {
    margin: 0 0 5rem;
  }
}

.price .text {
  padding: 2rem 0 0 2rem;
}

.price .c {
  padding: 2rem 0 0 2rem;
  opacity: 0;
  -webkit-transition: 2s;
  transition: 2s;
  -webkit-transform: translateY(3rem);
          transform: translateY(3rem);
}

.price .c.is-scrollIn {
  opacity: 1;
  -webkit-transform: translate(0);
          transform: translate(0);
}

@media screen and (min-width: 1024px) {
  .price .c {
    padding: 0 0 0 15%;
  }
}

.price .c .back-c {
  background-color: #ffffff;
  padding: 0 0 2rem;
}

@media screen and (min-width: 1024px) {
  .price .c .back-c {
    padding: 5rem;
    margin: 0 0 5rem;
  }
}

.price .c .plan {
  padding: 3rem 0 2rem;
}

@media screen and (min-width: 1024px) {
  .price .c .plan {
    font-size: 1.8rem;
  }
}

.price .c .plan h5 {
  font-size: 1.8rem;
  margin: 0;
}

@media screen and (min-width: 1024px) {
  .price .c .plan h5 {
    font-size: 2.4rem;
  }
}

.price .c .plan table {
  padding: 2rem 0;
  margin: 0 auto;
}

.price .c .plan table tr {
  font-size: 1.6rem;
}

@media screen and (min-width: 1024px) {
  .price .c .plan table tr {
    font-size: 2rem;
  }
}

.price .c .plan table tr th {
  padding: 0 1rem;
}

@media screen and (min-width: 1024px) {
  .price .c .plan table tr th {
    padding: 0 2rem;
  }
}

.price .c .plan table tr td {
  padding: 0 1rem;
}

@media screen and (min-width: 1024px) {
  .price .c .plan table tr td {
    padding: 0 2rem;
  }
}

.price .c .plan .text {
  font-size: 1.2rem;
  margin: 0 0 2rem;
}

@media screen and (min-width: 1024px) {
  .price .c .plan .text {
    padding: 2rem 0 0;
    font-size: 1.8rem;
  }
}

.price .c .plan .plan-btn {
  border: #3B6A6F 0.1rem solid;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
}

.price .c .plan .plan-btn a {
  width: 100%;
}

.price .c .plan .plan-btn a p {
  padding: 1rem 2rem;
}

.price .c .bar {
  width: 70%;
  height: 0.2rem;
  margin: 1rem auto;
  background-color: #D8C8A3;
}

.price .plan {
  text-align: center;
}

.information {
  padding: 5rem 0;
  background-color: #fff;
}

@media screen and (min-width: 1024px) {
  .information {
    padding: 10rem 0 15rem;
  }
}

@media screen and (min-width: 1024px) {
  .information .section-title {
    padding-left: 10%;
  }
}

.information .flex-box {
  padding: 3rem 0;
}

@media screen and (min-width: 1024px) {
  .information .flex-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}

.information .flex-box .map {
  width: 100%;
  height: 20rem;
}

@media screen and (min-width: 1024px) {
  .information .flex-box .map {
    width: 60%;
    height: 50rem;
  }
}

.information .flex-box .map iframe {
  width: 100%;
  height: 100%;
}

.information .flex-box .info-text {
  background-color: #fff;
  padding: 3rem;
}

@media screen and (min-width: 1024px) {
  .information .flex-box .info-text {
    width: 40%;
  }
}

.information .flex-box .info-text .i {
  padding: 0 0 0 1rem;
  border-left: #4A605C solid 0.1rem;
}

.information .flex-box .info-text .i .i-t {
  padding: 1rem 5rem 1rem 0;
  font-size: 1.6rem;
  font-weight: bold;
  position: relative;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

@media screen and (min-width: 1024px) {
  .information .flex-box .info-text .i .i-t {
    font-size: 2rem;
  }
}

.information .flex-box .info-text .i .i-t::before {
  content: "";
  width: 3rem;
  height: 0.1rem;
  background-color: #4A605C;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  right: 0;
}

.information .flex-box .info-text .i .i-c {
  padding: 0 0 0.5rem 0;
}

@media screen and (min-width: 1024px) {
  .information .flex-box .info-text .i .i-c {
    font-size: 1.8rem;
  }
}

.information .flex-box .info-text .i .i-c span {
  font-weight: bold;
}

.sightseeing {
  padding: 5rem 0 3rem;
}

@media screen and (min-width: 1024px) {
  .sightseeing {
    padding: 10rem 15% 15rem;
  }
}

.sightseeing .title {
  font-size: 2rem;
  padding: 2rem;
  background-color: #D8C8A3;
  color: #383737;
}

@media screen and (min-width: 768px) {
  .sightseeing .title {
    padding: 2rem 10%;
  }
}

@media screen and (min-width: 1024px) {
  .sightseeing .title {
    padding: 2rem 15%;
  }
}

.sightseeing .c {
  padding: 0 2rem 5rem;
  opacity: 0;
  -webkit-transition: 2s;
  transition: 2s;
  -webkit-transform: translateY(3rem);
          transform: translateY(3rem);
}

.sightseeing .c.is-scrollIn {
  opacity: 1;
  -webkit-transform: translate(0);
          transform: translate(0);
}

@media screen and (min-width: 1024px) {
  .sightseeing .c {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 10rem 0 5rem;
  }
}

@media screen and (min-width: 1024px) {
  .sightseeing .c .c-left {
    width: 50%;
    padding: 0 3rem;
  }
}

@media screen and (min-width: 1024px) {
  .sightseeing .c .c-right {
    width: 50%;
  }
}

.sightseeing .c .p-btn {
  padding: 2rem 0;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 0 0 auto;
}

.sightseeing .c .title-s {
  padding: 2rem 0;
  text-align: center;
}

@media screen and (min-width: 1024px) {
  .sightseeing .c .title-s {
    padding: 0;
  }
}

.sightseeing .c .title-s h5 {
  font-size: 1.8rem;
}

.sightseeing .c p {
  padding: 0 0 2rem;
}

.sightseeing .c .img {
  width: 100%;
  height: auto;
}

.sightseeing .c .btn,
.sightseeing .c a.btn,
.sightseeing .c button.btn {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 1rem 4rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #3B6A6F;
  border-radius: 0.5rem;
}

.sightseeing .c a.btn-svg {
  font-weight: 700;
  line-height: 54px;
  width: 204px;
  height: 54px;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
  background-color: transparent;
}

.sightseeing .c a.btn-svg svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.sightseeing .c a.btn-svg svg rect {
  -webkit-transition: all 400ms ease;
  transition: all 400ms ease;
  stroke: #3B6A6F;
  stroke-width: 1;
  stroke-dasharray: 200px, 16px;
  stroke-dashoffset: 70px;
}

.sightseeing .c a.btn-svg:hover svg rect {
  stroke-dashoffset: 284px;
}

.sightseeing .c a.btn-svg span {
  color: #3B6A6F;
}
/*# sourceMappingURL=top.css.map */