@charset "UTF-8";

html {
  font-size: 62.5%;
}

.body {
  font-family: "Shippori Mincho", "Yu Mincho Medium", "YuMincho", "Yu Mincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "MS PMincho", serif;
  color: #323232;
}

.body img {
  display: block;
  width: 100%;
}

.body.no_scroll {
  overflow: hidden;
}

.pc {
  display: block;
}

@media screen and (max-width: 767px) {
  .pc {
    display: none;
  }
}

.sp {
  display: none;
}

@media screen and (max-width: 767px) {
  .sp {
    display: block;
  }
}

.circle_anker-list {
  display: flex;
  justify-content: center;
  gap: 4.4rem;
}

@media screen and (max-width: 767px) {
  .circle_anker-list {
    flex-wrap: wrap;
    gap: 6.6666666667vw;
  }
}

.circle_anker-list li {
  width: 23.3rem;
  height: 23.3rem;
  border-radius: 50rem;
  background-color: #8A6D75;
}

@media screen and (max-width: 767px) {
  .circle_anker-list li {
    width: 42.6666666667vw;
    height: 42.6666666667vw;
    border-radius: 42.6666666667vw;
  }
}

@media screen and (max-width: 767px) {
  .circle_anker-list li.sp_100 {
    margin: 0 5.3333333333vw;
  }
}

.circle_anker-list li a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  border-radius: 50rem;
  color: #FFFFFF;
  line-height: 1.7;
  font-family: "Shippori Mincho", "Yu Mincho Medium", "YuMincho", "Yu Mincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "MS PMincho", serif;
  font-size: 2.1rem;
  text-align: center;
  position: relative;
}

@media screen and (max-width: 767px) {
  .circle_anker-list li a {
    border-radius: 13.3333333333vw;
    font-size: 3.4666666667vw;
  }
}

.circle_anker-list li a::after {
  content: "";
  display: block;
  width: 1.7rem;
  height: 2rem;
  background-image: url(../img/icon_arrow_down.png);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  bottom: 2.1rem;
}

@media screen and (max-width: 767px) {
  .circle_anker-list li a::after {
    width: 2.9333333333vw;
    height: 3.4666666667vw;
    bottom: 4vw;
  }
}

.section__ttl {
  padding: 11.1rem 0 0 0;
}

@media screen and (max-width: 767px) {
  .section__ttl {
    padding: 8.5333333333vw 0 0 0;
  }
}

.section__ttl img {
  display: block;
  width: 6.8rem;
  margin: 0 auto;
}

@media screen and (max-width: 767px) {
  .section__ttl img {
    width: 10.6666666667vw;
  }
}

.section__ttl h3 {
  font-family: "Shippori Mincho", "Yu Mincho Medium", "YuMincho", "Yu Mincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "MS PMincho", serif;
  font-size: 3.8rem;
  font-weight: 500;
  text-align: center;
  margin: 1.3rem 0 0 0;
  line-height: 1.8;
}

@media screen and (max-width: 767px) {
  .section__ttl h3 {
    font-size: 6.4vw;
    margin: 4.8vw 0 0 0;
  }
}

.section__ttl h3 span {
  font-size: 2.8rem;
}

@media screen and (max-width: 767px) {
  .section__ttl h3 span {
    font-size: 4.2666666667vw;
  }
}

.hamburger__icon {
  position: fixed;
  top: 3rem;
  right: 3rem;
  width: 3.5rem;
  height: 2.6rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 99;
}

@media screen and (max-width: 767px) {
  .hamburger__icon {
    top: 8vw;
    right: 6.4vw;
    width: 6.9333333333vw;
    height: 5.8666666667vw;
  }
}

.hamburger__icon span {
  background-color: #8A6D75;
  display: block;
  width: 3.5rem;
  height: 0.2rem;
}

@media screen and (max-width: 767px) {
  .hamburger__icon span {
    width: 6.9333333333vw;
    height: 0.5333333333vw;
  }
}

.hamburger__nav {
  opacity: 0;
  background-color: #8A6D75;
  width: 44.2rem;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100;
  transition: opacity 0.4s ease, visibility 0s ease 0.4s;
  visibility: hidden;
}

@media screen and (max-width: 767px) {
  .hamburger__nav {
    width: 100vw;
    height: auto;
  }
}

.hamburger__nav.open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.4s ease, visibility 0s ease 0s;
}

.hamburger__nav .nav_close {
  width: 3.5rem;
  height: 2.6rem;
  cursor: pointer;
  position: absolute;
  top: 3rem;
  right: 3rem;
}

@media screen and (max-width: 767px) {
  .hamburger__nav .nav_close {
    width: 6.9333333333vw;
    height: 6.9333333333vw;
    top: 8vw;
    right: 6.4vw;
  }
}

.hamburger__nav .nav_close span {
  background-color: #FFFFFF;
  display: block;
  width: 3.5rem;
  height: 0.2rem;
  position: absolute;
  top: 50%;
}

@media screen and (max-width: 767px) {
  .hamburger__nav .nav_close span {
    width: 7.4666666667vw;
    height: 0.5333333333vw;
  }
}

.hamburger__nav .nav_close span:first-of-type {
  transform: rotate(45deg) translate(0, -50%);
}

.hamburger__nav .nav_close span:last-of-type {
  transform: rotate(-45deg) translate(0, -50%);
}

.hamburger__nav ul {
  padding: 8.7rem 4.7rem;
  display: flex;
  flex-direction: column;
  gap: 6.2rem 0;
}

@media screen and (max-width: 767px) {
  .hamburger__nav ul {
    padding: 13.3333333333vw 8vw;
  }
}

.hamburger__nav ul li a {
  display: flex;
  gap: 0 1.7rem;
  color: #FFFFFF;
  font-size: 2.1rem;
  line-height: 1.7;
}

@media screen and (max-width: 767px) {
  .hamburger__nav ul li a {
    gap: 0 2.6666666667vw;
    font-size: 4.5333333333vw;
  }
}

.hamburger__nav ul li a::before {
  content: "";
  display: block;
  width: 3.6rem;
  height: 2.6rem;
  background-image: url(../img/icon_onsen-white.png);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  margin: 0.5rem 0 0 0;
}

@media screen and (max-width: 767px) {
  .hamburger__nav ul li a::before {
    width: 10.1333333333vw;
    height: 5.6vw;
    margin: 0.5333333333vw 0 0 0;
  }
}

.mv {
  background-image: url(../img/bg.jpg);
  background-size: contain;
  padding: 0 0 10.8rem;
  position: relative;
}

@media screen and (max-width: 767px) {
  .mv {
    padding: 0 0 10.6666666667vw;
  }
}

.mv h2 {
  width: 60.6rem;
  margin: 0 0 0 6.8rem;
  padding: 3.3rem 0;
}

@media screen and (max-width: 767px) {
  .mv h2 {
    width: 69.3333333333vw;
    margin: 0 0 0 6.4vw;
    padding: 8.8vw 0 8vw;
  }
}

.mv h2 img {
  display: block;
  width: 100%;
}

.mv_slider {
  margin: 0;
}

@media screen and (max-width: 767px) {
  .mv_slider {
    margin: 0;
  }
}

.mv_slider--wrapper {
  position: relative;
}

.mv h1 {
  position: absolute;
  z-index: 9;
  width: clamp(18vh, 14.84375vw, 19.6rem);
  top: 50%;
  right: 12.6rem;
  transform: translate(0, -50%);
}

@media screen and (max-width: 767px) {
  .mv h1 {
    min-width: auto;
    max-width: none;
    width: 30.9333333333vw;
    right: 6.4vw;
  }
}

.mv h1 img {
  display: block;
  width: 100%;
}

.mv .slider_01 li {
  min-height: 50rem;
  max-height: 90rem;
  height: 86vh;
  padding: 0.2rem;
}

@media screen and (max-width: 767px) {
  .mv .slider_01 li {
    min-height: 62.6666666667vw;
    max-height: none;
    width: auto;
    height: 106.6666666667vw;
    padding: 0 0.5333333333vw;
  }
}

.mv .slider_01 li img {
  width: auto;
  height: 100%;
}

@media screen and (max-width: 767px) {
  .mv .slider_01 li img {
    height: 100%;
  }
}

.mv__read {
  color: #323232;
  font-family: "Shippori Mincho", "Yu Mincho Medium", "YuMincho", "Yu Mincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "MS PMincho", serif;
  font-size: 2.1rem;
  text-align: center;
  line-height: 2.8;
  margin: 6.2rem 0 0 0;
}

@media screen and (max-width: 767px) {
  .mv__read {
    font-size: 3.7333333333vw;
    margin: 13.3333333333vw 0 0 0;
  }
}

.mv__anker {
  margin: 6rem 0 0 0;
}

@media screen and (max-width: 767px) {
  .mv__anker {
    margin: 8.5333333333vw 0 0 0;
  }
}

.area_01 {
  padding: 0 0 12.3rem 0;
}

@media screen and (max-width: 767px) {
  .area_01 {
    padding: 0 0 14.9333333333vw 0;
  }
}

.area_01 .block_01 {
  margin: 0 auto;
  padding: 0 4.1rem;
  overflow: hidden;
}

@media screen and (max-width: 1280px) {
  .area_01 .block_01 {
    padding: 0;
  }
}

@media screen and (max-width: 767px) {
  .area_01 .block_01 {
    margin: 0;
    padding: 0;
  }
}

.area_01 .block_01--inner {
  max-width: 128rem;
  width: 100vw;
  margin: 7.5rem auto 0;
}

@media screen and (max-width: 1280px) {
  .area_01 .block_01--inner {
    max-width: none;
  }
}

@media screen and (max-width: 767px) {
  .area_01 .block_01--inner {
    margin: 0;
    max-width: none;
    width: 100%;
  }
}

.area_01 .block_01--inner__cap1 {
  font-family: "Shippori Mincho", "Yu Mincho Medium", "YuMincho", "Yu Mincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "MS PMincho", serif;
  font-size: 2.4rem;
  font-weight: 500;
}

@media screen and (max-width: 1280px) {
  .area_01 .block_01--inner__cap1 {
    font-size: clamp(2rem, 2.4rem, 1.875vw);
  }
}

@media screen and (max-width: 767px) {
  .area_01 .block_01--inner__cap1 {
    font-size: 4.2666666667vw;
  }
}

.area_01 .block_01--inner__cap2 {
  font-family: "Shippori Mincho", "Yu Mincho Medium", "YuMincho", "Yu Mincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "MS PMincho", serif;
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 1.6;
  margin: 1rem 0 0 0;
}

@media screen and (max-width: 1280px) {
  .area_01 .block_01--inner__cap2 {
    font-size: clamp(1.4rem, 1.8rem, 1.40625vw);
  }
}

@media screen and (max-width: 767px) {
  .area_01 .block_01--inner__cap2 {
    font-size: 3.7333333333vw;
  }
}

.area_01 .block_01--inner__item-01 {
  display: flex;
  justify-content: end;
  gap: 1.7rem;
  margin: 0 16.3rem 0 0;
}

@media screen and (max-width: 1280px) {
  .area_01 .block_01--inner__item-01 {
    margin: 0 clamp(3.3rem, -5.589rem + 18.52vw, 16.3rem) 0 0;
  }
}

@media screen and (max-width: 767px) {
  .area_01 .block_01--inner__item-01 {
    flex-direction: column-reverse;
    margin: 8.5333333333vw 0 0 0;
  }
}

.area_01 .block_01--inner__item-01 img {
  max-width: 47rem;
  width: 36.71875vw;
}

@media screen and (max-width: 1280px) {
  .area_01 .block_01--inner__item-01 img {
    width: clamp(35rem, 47rem, 36.71875vw);
  }
}

@media screen and (max-width: 767px) {
  .area_01 .block_01--inner__item-01 img {
    max-width: none;
    width: 80vw;
  }
}

@media screen and (max-width: 767px) {
  .area_01 .block_01--inner__item-01 figcaption {
    margin: 0 0 0 6.4vw;
  }
}

.area_01 .block_01--inner__item-02 {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: end;
  align-content: flex-end;
  gap: 1.7rem;
  margin: -4.6rem 0 0 0;
}

@media screen and (max-width: 767px) {
  .area_01 .block_01--inner__item-02 {
    margin: -10.6666666667vw 0 0 0;
    position: relative;
    right: -3px;
  }
}

.area_01 .block_01--inner__item-02 img {
  max-width: 47rem;
  width: 36.71875vw;
}

@media screen and (max-width: 1280px) {
  .area_01 .block_01--inner__item-02 img {
    width: clamp(35rem, 47rem, 36.71875vw);
  }
}

@media screen and (max-width: 767px) {
  .area_01 .block_01--inner__item-02 img {
    max-width: none;
    width: 89.6vw;
  }
}

.area_01 .block_01--inner__item-03 {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column-reverse;
  gap: 1.7rem;
  margin: -25.3rem 0 0 0;
}

@media screen and (max-width: 1280px) {
  .area_01 .block_01--inner__item-03 {
    margin: clamp(-23rem, -25.3rem, -19.765625vw) 0 0 4.6875vw;
  }
}

@media screen and (max-width: 767px) {
  .area_01 .block_01--inner__item-03 {
    margin: 14.9333333333vw 0 0 0;
  }
}

.area_01 .block_01--inner__item-03 img {
  max-width: 61.4rem;
  width: 47.96875vw;
}

@media screen and (max-width: 1280px) {
  .area_01 .block_01--inner__item-03 img {
    width: clamp(38rem, 47.96875vw, 61.4rem);
  }
}

@media screen and (max-width: 767px) {
  .area_01 .block_01--inner__item-03 img {
    max-width: none;
    width: 103%;
    position: relative;
    left: 50%;
    transform: translate(-50%, 0);
  }
}

@media screen and (max-width: 767px) {
  .area_01 .block_01--inner__item-03 figcaption {
    margin: 0 0 0 6.4vw;
  }
}

.area_01 .block_01--inner__item-04 {
  display: flex;
  justify-content: end;
  align-items: end;
  gap: 1.7rem;
  margin: 7.7rem 6rem 0 0;
}

@media screen and (max-width: 767px) {
  .area_01 .block_01--inner__item-04 {
    margin: 14.9333333333vw 0 0 0;
    align-items: flex-start;
    flex-wrap: wrap;
    flex-direction: column-reverse;
    justify-content: end;
    align-content: flex-end;
  }
}

.area_01 .block_01--inner__item-04 img {
  max-width: 51.2rem;
  width: 40vw;
}

@media screen and (max-width: 1280px) {
  .area_01 .block_01--inner__item-04 img {
    width: clamp(35rem, 40vw, 51.2rem);
  }
}

@media screen and (max-width: 767px) {
  .area_01 .block_01--inner__item-04 img {
    max-width: none;
    width: 80vw;
  }
}

.area_01 .block_01--inner__item-05 {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column-reverse;
  gap: 1.7rem;
  margin: -17rem 0 0 9.9rem;
  position: relative;
  z-index: 1;
}

@media screen and (max-width: 1280px) {
  .area_01 .block_01--inner__item-05 {
    margin: clamp(-12rem, 1.328125vw, -17rem) 0 0 clamp(3rem, 0.7734375vw, 9.9rem);
  }
}

@media screen and (max-width: 767px) {
  .area_01 .block_01--inner__item-05 {
    margin: 3.2vw 0 0 0;
    flex-direction: column;
  }
}

.area_01 .block_01--inner__item-05 img {
  max-width: 47rem;
  width: 36.71875vw;
}

@media screen and (max-width: 1280px) {
  .area_01 .block_01--inner__item-05 img {
    width: clamp(30rem, 36.71875vw, 47rem);
  }
}

@media screen and (max-width: 767px) {
  .area_01 .block_01--inner__item-05 img {
    max-width: none;
    width: 80vw;
  }
}

@media screen and (max-width: 767px) {
  .area_01 .block_01--inner__item-05 figcaption {
    margin: 0 0 0 6.4vw;
  }
}

.area_01 .block_01--inner__item-06 {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row-reverse;
  justify-content: end;
  align-items: end;
  gap: 3.7rem;
  margin: -10.6rem 6rem 0 0;
}

@media screen and (max-width: 1280px) {
  .area_01 .block_01--inner__item-06 {
    margin: clamp(-4rem, 8.28125vw, -10.6rem) 4.6875vw 0 0;
  }
}

@media screen and (max-width: 767px) {
  .area_01 .block_01--inner__item-06 {
    flex-direction: column-reverse;
    align-items: flex-start;
    margin: 10.6666666667vw 0 0 0;
  }
}

.area_01 .block_01--inner__item-06 img {
  max-width: 68rem;
  width: 53.125vw;
}

@media screen and (max-width: 1280px) {
  .area_01 .block_01--inner__item-06 img {
    width: clamp(45rem, 53.125vw, 68rem);
  }
}

@media screen and (max-width: 767px) {
  .area_01 .block_01--inner__item-06 img {
    max-width: none;
    width: 103%;
    position: relative;
    left: 50%;
    transform: translate(-50%, 0);
  }
}

@media screen and (max-width: 767px) {
  .area_01 .block_01--inner__item-06 figcaption {
    margin: 0 0 0 6.4vw;
  }
}

.area_01 .block_02 {
  padding: 0 6rem;
}

@media screen and (max-width: 1280px) {
  .area_01 .block_02 {
    padding: 0 4.6875vw;
  }
}

@media screen and (max-width: 767px) {
  .area_01 .block_02 {
    padding: 0 4.2666666667vw;
  }
}

.area_01 .block_02-bg {
  max-width: 116rem;
  background-color: #E1DED5;
  border-radius: 1.1rem;
  margin: 14.4rem auto 0;
  padding: 6.2rem 4.1rem 5.8rem;
}

@media screen and (max-width: 1280px) {
  .area_01 .block_02-bg {
    padding: 6.2rem 3.203125vw 5.8rem;
  }
}

@media screen and (max-width: 767px) {
  .area_01 .block_02-bg {
    max-width: none;
    border-radius: 2.1333333333vw;
    margin: 14.9333333333vw auto 0;
    padding: 8.5333333333vw 0;
  }
}

.area_01 .block_02--ttl {
  font-family: "Shippori Mincho", "Yu Mincho Medium", "YuMincho", "Yu Mincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "MS PMincho", serif;
  font-weight: 500;
  font-size: 3rem;
  text-align: center;
}

@media screen and (max-width: 767px) {
  .area_01 .block_02--ttl {
    font-size: 5.3333333333vw;
  }
}

.area_01 .block_02--read {
  font-family: "Shippori Mincho", "Yu Mincho Medium", "YuMincho", "Yu Mincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "MS PMincho", serif;
  font-size: 2.1rem;
  text-align: center;
  margin: 2.4rem 0 0 0;
  line-height: 1.7;
}

@media screen and (max-width: 767px) {
  .area_01 .block_02--read {
    font-size: 3.7333333333vw;
    margin: 5.3333333333vw 0 0 0;
  }
}

.area_01 .block_02--inner {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  margin: 3.2rem 0 0 0;
  padding: 0;
}

@media screen and (max-width: 767px) {
  .area_01 .block_02--inner {
    flex-wrap: wrap;
    gap: 12.8vw;
    margin: 5.3333333333vw 0 0 0;
    padding: 0 4.2666666667vw;
  }
}

.area_01 .block_02--inner figure {
  width: 33.3333333333%;
}

@media screen and (max-width: 767px) {
  .area_01 .block_02--inner figure {
    width: 100%;
  }
}

.area_01 .block_02--inner figure figcaption {
  margin: 1.6rem 0 0 0;
}

@media screen and (max-width: 767px) {
  .area_01 .block_02--inner figure figcaption {
    margin: 2.6666666667vw 0 0 0;
  }
}

.area_01 .block_02--txt_area {
  font-size: 1.6rem;
  text-align: center;
  line-height: 1.75;
}

@media screen and (max-width: 767px) {
  .area_01 .block_02--txt_area {
    font-size: 3.7333333333vw;
  }
}

.area_01 .block_02--txt_dep {
  font-size: 1.8rem;
  text-align: center;
  line-height: 1.75;
}

@media screen and (max-width: 767px) {
  .area_01 .block_02--txt_dep {
    font-size: 3.7333333333vw;
  }
}

.area_01 .block_02--txt_pre {
  font-size: 2.1rem;
  text-align: center;
  line-height: 1.75;
}

@media screen and (max-width: 767px) {
  .area_01 .block_02--txt_pre {
    font-size: 5.3333333333vw;
  }
}

.area_01 .block_02--txt_hotels {
  display: block;
  color: #8A6D75;
  font-size: 1.8rem;
  text-align: center;
  text-decoration: underline;
  line-height: 1.75;
}

@media screen and (max-width: 767px) {
  .area_01 .block_02--txt_hotels {
    font-size: 3.7333333333vw;
  }
}

.area_01 .block_02--txt_hotels:first-of-type {
  margin: 2.2rem 0 0 0;
}

@media screen and (max-width: 767px) {
  .area_01 .block_02--txt_hotels:first-of-type {
    margin: 2.6666666667vw 0 0 0;
  }
}

.area_02 {
  background-image: url(../img/bg.jpg);
  background-size: contain;
  padding: 0;
}

@media screen and (max-width: 767px) {
  .area_02 {
    padding: 0;
  }
}

.area_02 .block_01 {
  max-width: 114.9rem;
  width: 92.109375vw;
  position: relative;
  padding: 0 0 10.7rem 0;
  margin: 7rem auto 0;
}

@media screen and (max-width: 767px) {
  .area_02 .block_01 {
    max-width: none;
    width: 100%;
    padding: 0 0 8.5333333333vw 0;
    margin: 8.5333333333vw auto 0;
  }
}

.area_02 .block_01--inner {
  width: 100%;
  margin: 0 auto;
  position: relative;
}

@media screen and (max-width: 767px) {
  .area_02 .block_01--inner {
    overflow: hidden;
  }
}

.area_02 .block_01-dec_01 {
  position: absolute;
  top: 0;
  left: 0;
}

@media screen and (max-width: 767px) {
  .area_02 .block_01-dec_01 {
    left: 2.6666666667vw;
  }
}

.area_02 .block_01-dec_01 p {
  font-size: 2.1rem;
  font-weight: 500;
}

@media screen and (max-width: 1280px) {
  .area_02 .block_01-dec_01 p {
    font-size: 1.640625vw;
  }
}

@media screen and (max-width: 767px) {
  .area_02 .block_01-dec_01 p {
    font-size: 4.2666666667vw;
  }
}

.area_02 .block_01-dec_01 img {
  max-width: 23.7rem;
  width: 18.515625vw;
  margin: -8rem 0 0 0;
}

@media screen and (max-width: 1280px) {
  .area_02 .block_01-dec_01 img {
    margin: -6.25vw 0 0 0;
  }
}

@media screen and (max-width: 767px) {
  .area_02 .block_01-dec_01 img {
    max-width: none;
    width: 40.2666666667vw;
    margin: -13.3333333333vw 0 0 0;
  }
}

.area_02 .block_01--map {
  display: block;
  margin: 0 auto;
}

@media screen and (max-width: 767px) {
  .area_02 .block_01--map {
    width: 106.4vw;
    margin: 0 0 0 -6.4vw;
  }
}

.area_02 .block_01--list li a {
  display: block;
  width: clamp(6.8rem, 10.8rem, 8.4375vw);
  height: clamp(6.8rem, 10.8rem, 8.4375vw);
  border-radius: 50%;
  position: absolute;
  overflow: hidden;
  cursor: pointer;
}

@media screen and (max-width: 767px) {
  .area_02 .block_01--list li a {
    width: 16vw;
    height: 16vw;
  }
}

.area_02 .block_01--list li a::before {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: block;
  content: "";
  transition: transform 0.8s ease-in-out;
}

@media (hover: hover) {
  .area_02 .block_01--list li a:hover::before {
    opacity: 1;
    transform: scale(1.3);
  }
}

.area_02 .block_01--list li .map_item-01 {
  top: 0%;
  left: 26.3%;
}

@media screen and (max-width: 767px) {
  .area_02 .block_01--list li .map_item-01 {
    top: 0;
    left: auto;
    right: 26.6666666667vw;
  }
}

.area_02 .block_01--list li .map_item-01::before {
  background-image: url(../img/map_hokkaido.png);
}

.area_02 .block_01--list li .map_item-02 {
  top: 34.9%;
  right: 21.8%;
}

@media screen and (max-width: 767px) {
  .area_02 .block_01--list li .map_item-02 {
    top: 40.5333333333vw;
    right: 5.8666666667vw;
  }
}

.area_02 .block_01--list li .map_item-02::before {
  background-image: url(../img/map_akita.png);
}

.area_02 .block_01--list li .map_item-03 {
  top: 50.9%;
  right: 21.72%;
}

@media screen and (max-width: 767px) {
  .area_02 .block_01--list li .map_item-03 {
    top: 73.0666666667vw;
    right: 5.6vw;
  }
}

.area_02 .block_01--list li .map_item-03::before {
  background-image: url(../img/map_tokyo.png);
}

.area_02 .block_01--list li .map_item-04 {
  top: 69.8%;
  right: 21.72%;
}

@media screen and (max-width: 767px) {
  .area_02 .block_01--list li .map_item-04 {
    top: 103.7333333333vw;
    right: 5.6vw;
  }
}

.area_02 .block_01--list li .map_item-04::before {
  background-image: url(../img/map_kanagawa.png);
}

.area_02 .block_01--list li .map_item-05 {
  top: 86%;
  right: 37.52%;
}

@media screen and (max-width: 767px) {
  .area_02 .block_01--list li .map_item-05 {
    top: 103.7333333333vw;
    right: 29.6vw;
  }
}

.area_02 .block_01--list li .map_item-05::before {
  background-image: url(../img/map_shizuoka.png);
}

.area_02 .block_01--list li .map_item-06 {
  top: 86%;
  left: 26.2%;
}

@media screen and (max-width: 767px) {
  .area_02 .block_01--list li .map_item-06 {
    top: 103.7333333333vw;
    left: 30.4vw;
  }
}

.area_02 .block_01--list li .map_item-06::before {
  background-image: url(../img/map_osaka.png);
}

.area_02 .block_01--list li .map_item-07 {
  top: 42.72%;
  left: 0%;
}

@media screen and (max-width: 767px) {
  .area_02 .block_01--list li .map_item-07 {
    top: 103.7333333333vw;
    left: 6.4vw;
  }
}

.area_02 .block_01--list li .map_item-07::before {
  background-image: url(../img/map_hiroshima.png);
}

.area_02 .block_01--list li .map_item-08 {
  top: 16%;
  left: 26.3%;
}

@media screen and (max-width: 767px) {
  .area_02 .block_01--list li .map_item-08 {
    top: 36.2666666667vw;
    left: 45.8666666667vw;
  }
}

.area_02 .block_01--list li .map_item-08::before {
  background-image: url(../img/map_nigata.png);
}

.area_02 .block_01--list li .map_item-09 {
  top: 32%;
  left: 26.2%;
}

@media screen and (max-width: 767px) {
  .area_02 .block_01--list li .map_item-09 {
    top: 55.2vw;
    left: 24vw;
  }
}

.area_02 .block_01--list li .map_item-09::before {
  background-image: url(../img/map_nagano.png);
}

.area_02 .block_01--list li .map_item-10 {
  top: 58.76%;
  left: 0%;
}

@media screen and (max-width: 767px) {
  .area_02 .block_01--list li .map_item-10 {
    top: 33.0666666667vw;
    left: 6.4vw;
  }
}

.area_02 .block_01--list li .map_item-10::before {
  background-image: url(../img/map_okinawa.png);
}

.area_02 .block_01 .modal_item .modal {
  display: none;
}

.area_02 .block_02 {
  margin: 0 auto;
  border-top: 0.1rem solid #323232;
}

@media screen and (max-width: 767px) {
  .area_02 .block_02 {
    width: 100%;
    border-top: 0.2666666667vw solid #323232;
  }
}

.area_02 .block_02--ttl {
  font-size: 3.5rem;
  font-weight: 500;
  text-align: center;
  margin: 7.4rem 0 0 0;
}

@media screen and (max-width: 767px) {
  .area_02 .block_02--ttl {
    font-size: 6.4vw;
    margin: 8.5333333333vw 0 0 0;
  }
}

.area_02 .block_02 .grid {
  margin: 10rem auto 0;
  max-width: 120.6rem;
  width: 100%;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}

@media screen and (max-width: 767px) {
  .area_02 .block_02 .grid {
    margin: 12.8vw 0 0 0;
  }
}

.area_02 .block_02 .grid .item {
  display: block;
  max-width: 57.3rem;
  width: calc(50% - 3rem);
  margin: 0 1.5rem 5.4rem;
  z-index: 1;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.3s ease 0.5s, transform 0.3s ease 0.5s;
}

@media screen and (max-width: 767px) {
  .area_02 .block_02 .grid .item {
    max-width: none;
    width: calc(100% - 8.5333333333vw);
    margin: 4.2666666667vw;
  }
}

.area_02 .block_02 .grid .item.is-fading {
  opacity: 0;
  transform: translateY(1.5rem);
}

.area_02 .block_02 .grid .item.is-hidden {
  display: none;
}

.area_02 .block_02 .grid .item .sort-tag {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem 0.5rem;
  padding: 2.1rem 3.5rem 0;
}

@media screen and (max-width: 767px) {
  .area_02 .block_02 .grid .item .sort-tag {
    gap: 1.8666666667vw 1.3333333333vw;
    padding: 3.2vw 4.2666666667vw 0;
  }
}

.area_02 .block_02 .grid .item .sort-tag li {
  display: inline-block;
  flex-shrink: 0;
  background-color: #A49C85;
  border-radius: 5rem;
  color: #F9F9F5;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  padding: 0 1.65rem;
  line-height: 2.3rem;
}

@media screen and (max-width: 767px) {
  .area_02 .block_02 .grid .item .sort-tag li {
    font-size: 3.2vw;
    padding: 0 4.8vw;
    line-height: 6.1333333333vw;
  }
}

.area_02 .block_02 .grid .item-content {
  background: #f5f5f5;
  border-radius: 0.8rem;
  padding: 0 0 4.5rem 0;
}

@media screen and (max-width: 767px) {
  .area_02 .block_02 .grid .item-content {
    border-radius: 2.1333333333vw;
    padding: 0 0 4.2666666667vw 0;
  }
}

.area_02 .block_02 .grid .item-content .my-custom-content {
  height: 100%;
}

.area_02 .block_02 .grid .item-content__area {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.8rem;
  font-weight: 500;
  text-decoration: underline;
  padding: 1rem 0 0 1.5rem;
}

@media screen and (max-width: 767px) {
  .area_02 .block_02 .grid .item-content__area {
    font-size: 3.7333333333vw;
    padding: 4.2666666667vw 0 0 4.2666666667vw;
  }
}

.area_02 .block_02 .grid .item-content__hotels {
  font-size: 2.6rem;
  font-weight: 400;
  text-align: center;
  margin: 1.5rem 0 0 0;
}

@media screen and (max-width: 767px) {
  .area_02 .block_02 .grid .item-content__hotels {
    font-size: 4.8vw;
    margin: 3.2vw 0 0 0;
  }
}

.area_02 .block_02 .grid .item-content__detl {
  font-size: 2rem;
  font-weight: 400;
  text-align: center;
  line-height: 1.4;
}

@media screen and (max-width: 767px) {
  .area_02 .block_02 .grid .item-content__detl {
    font-size: 3.4666666667vw;
  }
}

.area_02 .block_02 .grid .item-content__detl span {
  font-size: 1.8rem;
}

@media screen and (max-width: 767px) {
  .area_02 .block_02 .grid .item-content__detl span {
    font-size: 3.2vw;
  }
}

.area_02 .block_02 .grid .item-content__toc {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.2rem;
  text-align: center;
  margin: 1rem 0 0 0;
}

@media screen and (max-width: 767px) {
  .area_02 .block_02 .grid .item-content__toc {
    font-size: 2.6666666667vw;
  }
}

.area_02 .block_02 .grid .item-content__text {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.5rem;
  line-height: 1.75;
  margin: 1.2rem 0 0 0;
  padding: 0 3.5rem;
}

@media screen and (max-width: 767px) {
  .area_02 .block_02 .grid .item-content__text {
    font-size: 3.7333333333vw;
    margin: 3.2vw 0 0 0;
    padding: 0 4.2666666667vw;
  }
}

.area_02 .block_02 .grid .item-content__text span {
  font-size: 1.2rem;
}

@media screen and (max-width: 767px) {
  .area_02 .block_02 .grid .item-content__text span {
    font-size: 2.6666666667vw;
  }
}

.area_02 .block_02 .grid .item-content__text span a {
  color: #323232;
  text-decoration: underline;
  transition: 0.4s;
}

@media (hover: hover) {
  .area_02 .block_02 .grid .item-content__text span a:hover {
    color: #8A6D75;
  }
}

.area_02 .block_02 .grid .item-content__ttl {
  font-family: "Noto Sans JP", sans-serif;
  color: #8A6D75;
  font-size: 1.7rem;
  font-weight: 600;
  padding: 0 3.5rem;
  margin: 1.7rem 0 0 0;
}

@media screen and (max-width: 767px) {
  .area_02 .block_02 .grid .item-content__ttl {
    font-size: 4.2666666667vw;
    margin: 3.2vw 0 0 0;
    padding: 0 4.2666666667vw;
  }
}

.area_02 .block_02 .grid .item-content__btnlist {
  display: flex;
  justify-content: center;
  gap: 1.1rem;
  margin: 1.7rem 0 0 0;
  padding: 0 3.6rem;
}

@media screen and (max-width: 767px) {
  .area_02 .block_02 .grid .item-content__btnlist {
    gap: 2.4vw;
    margin: 3.2vw 0 0 0;
    padding: 0 4.2666666667vw;
  }
}

.area_02 .block_02 .grid .item .slider__wrapper {
  width: 100%;
  margin: 2.1rem 0 0 0;
  position: relative;
}

@media screen and (max-width: 767px) {
  .area_02 .block_02 .grid .item .slider__wrapper {
    margin: 3.2vw 0 0 0;
  }
}

.area_02 .block_02 .grid .item .slider__wrapper.icon_onsen::before {
  content: "温泉\a総選挙\a受賞";
  display: flex;
  justify-content: center;
  align-items: center;
  width: 7.9rem;
  height: 7.9rem;
  white-space: pre;
  background-color: #A49C85;
  border: 0.1rem solid #FFFFFF;
  border-radius: 5rem;
  color: #FFFFFF;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  text-align: center;
  line-height: 1.4;
  position: absolute;
  top: 1.3rem;
  right: 1.3rem;
  z-index: 99;
}

.area_02 .block_02 .grid .item .slider__wrapper .slider_02 {
  overflow: visible;
  width: 100%;
  max-width: 57.3rem;
}

@media screen and (max-width: 767px) {
  .area_02 .block_02 .grid .item .slider__wrapper .slider_02 {
    max-width: none;
    max-width: 91.4666666667vw;
  }
}

.area_02 .block_02 .grid .item .slider__wrapper .slider_02 .slick-list {
  width: 100%;
  aspect-ratio: 573/323;
  overflow: hidden;
}

@media screen and (max-width: 767px) {
  .area_02 .block_02 .grid .item .slider__wrapper .slider_02 .slick-list {
    aspect-ratio: 343/193;
  }
}

.area_02 .block_02 .grid .item .slider__wrapper .slider_02 .slick-list .slick-track,
.area_02 .block_02 .grid .item .slider__wrapper .slider_02 .slick-list .slick-slide {
  width: 100%;
}

.area_02 .block_02 .grid .item .slider__wrapper .slider_02 li {
  width: 100%;
  height: 100%;
}

@media screen and (max-width: 767px) {
  .area_02 .block_02 .grid .item .slider__wrapper .slider_02 li {
    max-width: none;
  }
}

.area_02 .block_02 .grid .item .slider__wrapper .slider_02 li img {
  display: block;
  -o-object-fit: cover;
  object-fit: cover;
}

.area_02 .block_02 .grid .item .slider__wrapper .slider_02 .dots-wrap {
  display: flex;
  justify-content: flex-end;
  margin: 0.8rem 1.5rem 0 0;
}

@media screen and (max-width: 767px) {
  .area_02 .block_02 .grid .item .slider__wrapper .slider_02 .dots-wrap {
    margin: 2.1333333333vw 4.2666666667vw 0 0;
  }
}

.area_02 .block_02 .grid .item .slider__wrapper .slider_02 .dots-wrap li {
  width: 1.5rem;
  height: 0.28rem;
  margin: 0 0.4rem;
  background: #E1DED5;
  cursor: pointer;
}

@media screen and (max-width: 767px) {
  .area_02 .block_02 .grid .item .slider__wrapper .slider_02 .dots-wrap li {
    width: 3.4133333333vw;
    height: 0.6266666667vw;
    margin: 0 0.5333333333vw;
  }
}

.area_02 .block_02 .grid .item .slider__wrapper .slider_02 .dots-wrap li:hover,
.area_02 .block_02 .grid .item .slider__wrapper .slider_02 .dots-wrap li.slick-active {
  background: #A49C85;
}

.area_02 .block_02 .grid .item .slider__wrapper .slider_02 .dots-wrap li button {
  display: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  padding: 0;
  border: none;
  background-color: transparent;
}

.area_02 .block_02 .grid .item .btn_01 {
  display: block;
  width: calc(100% - 7rem);
  padding: 2.17rem 0;
  background-color: #8A6D75;
  border-radius: 0;
  color: #f5f5f5;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.8rem;
  font-weight: 400;
  margin: 1.2rem auto 0;
  text-align: center;
  position: relative;
}

@media screen and (max-width: 767px) {
  .area_02 .block_02 .grid .item .btn_01 {
    width: calc(100% - 8.5333333333vw);
    padding: 3.7333333333vw 0;
    font-size: 3.7333333333vw;
    margin: 2.6666666667vw auto 0;
  }
}

.area_02 .block_02 .grid .item .btn_01::after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-top: 1.4rem solid transparent;
  border-bottom: 1.4rem solid transparent;
  border-left: 1.5rem solid #555555;
  border-right: 0;
  position: absolute;
  bottom: -0.9rem;
  right: -0.2rem;
  transform: rotate(45deg);
}

@media screen and (max-width: 767px) {
  .area_02 .block_02 .grid .item .btn_01::after {
    border-top: 2.6666666667vw solid transparent;
    border-bottom: 2.6666666667vw solid transparent;
    border-left: 2.6666666667vw solid #555555;
    bottom: -1.4933333333vw;
    right: -0.1866666667vw;
  }
}

.area_02 .block_02 .grid .item .btn_02 {
  display: block;
  width: 50%;
  padding: 1.54rem 0;
  background-color: #e2e0dd;
  border-radius: 0;
  color: #323232;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  margin: 0 auto;
  text-align: center;
  position: relative;
}

@media screen and (max-width: 767px) {
  .area_02 .block_02 .grid .item .btn_02 {
    padding: 3.7333333333vw 0;
    font-size: 3.7333333333vw;
  }
}

.area_02 .block_02 .grid .item .btn_02::after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-top: 1.4rem solid transparent;
  border-bottom: 1.4rem solid transparent;
  border-left: 1.5rem solid #bfb6b3;
  border-right: 0;
  position: absolute;
  bottom: -0.9rem;
  right: -0.2rem;
  transform: rotate(45deg);
}

@media screen and (max-width: 767px) {
  .area_02 .block_02 .grid .item .btn_02::after {
    border-top: 2.6666666667vw solid transparent;
    border-bottom: 2.6666666667vw solid transparent;
    border-left: 2.6666666667vw solid #bfb6b3;
    bottom: -1.4933333333vw;
    right: -0.1866666667vw;
  }
}

.area_02 .block_02 .filter-buttons {
  margin-bottom: 30px;
}

@media screen and (max-width: 767px) {
  .area_02 .block_02 .filter-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 14px 8px;
    margin: 8.5333333333vw 0 10.6666666667vw 0;
  }
}

.area_02 .block_02 .filter-buttons .filter1 {
  max-width: 83rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.9rem 1rem;
  margin: 4.3rem auto 0;
}

@media screen and (max-width: 767px) {
  .area_02 .block_02 .filter-buttons .filter1 {
    max-width: none;
    width: 100%;
    display: contents;
    gap: 5.0666666667vw 2.6666666667vw;
  }
}

.area_02 .block_02 .filter-buttons .filter1:nth-of-type(2) {
  margin: 1.9rem auto 0;
}

@media screen and (max-width: 767px) {
  .area_02 .block_02 .filter-buttons .filter1:nth-of-type(2) {
    margin: 5.0666666667vw auto 0;
  }
}

.area_02 .block_02 .filter-buttons .filter2 {
  max-width: 83rem;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.9rem 1rem;
  margin: 4.3rem auto 0;
}

@media screen and (max-width: 767px) {
  .area_02 .block_02 .filter-buttons .filter2 {
    max-width: none;
    width: 100%;
    display: contents;
  }
}

.area_02 .block_02 .filter-buttons .filter2:nth-of-type(2) {
  margin: 1.9rem auto 0;
}

.area_02 .block_02 button {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.7rem;
  font-weight: 500;
  padding: 0.424rem 2.15rem;
  border-radius: 5rem;
  background: #F4F3ED;
  cursor: pointer;
  display: block;
  flex-shrink: 1;
}

@media screen and (max-width: 767px) {
  .area_02 .block_02 button {
    font-size: 3.2vw;
    padding: 2.1333333333vw 6.4vw;
    border-radius: 13.3333333333vw;
  }
}

.area_02 .block_02 button.is-active {
  background: #A49C85;
  color: #F9F9F5;
}

.area_02 .block_02 button.btn_01 {
  width: 50.1rem;
  padding: 2.25rem 0;
  background-color: #8A6D75;
  border-radius: 0;
  color: #f5f5f5;
  font-size: 1.8rem;
  font-weight: 300;
  margin: 0 auto;
  text-align: center;
  position: relative;
}

@media screen and (max-width: 767px) {
  .area_02 .block_02 button.btn_01 {
    width: calc(100% - 8.5333333333vw);
    padding: 4vw 0;
    font-size: 4vw;
  }
}

.area_02 .block_02 button.btn_01::after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-top: 1.4rem solid transparent;
  border-bottom: 1.4rem solid transparent;
  border-left: 1.5rem solid #555555;
  border-right: 0;
  position: absolute;
  bottom: -0.9rem;
  right: -0.2rem;
  transform: rotate(45deg);
}

@media screen and (max-width: 767px) {
  .area_02 .block_02 button.btn_01::after {
    border-top: 2.6666666667vw solid transparent;
    border-bottom: 2.6666666667vw solid transparent;
    border-left: 2.6666666667vw solid #555555;
    bottom: -1.4933333333vw;
    right: -0.1866666667vw;
  }
}

.area_02 .block_02 .btn_fixed {
  width: 9.9rem;
  height: 9.9rem;
  background-color: #8A6D75;
  border-radius: 5rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.9rem;
  position: fixed;
  z-index: 99;
  bottom: 4rem;
  left: 2.6rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

@media screen and (max-width: 767px) {
  .area_02 .block_02 .btn_fixed {
    width: 21.3333333333vw;
    height: 21.3333333333vw;
    border-radius: 13.3333333333vw;
    gap: 2.1333333333vw;
    bottom: 5.3333333333vw;
    left: 5.3333333333vw;
  }
}

.area_02 .block_02 .btn_fixed img {
  width: 2.1rem;
}

@media screen and (max-width: 767px) {
  .area_02 .block_02 .btn_fixed img {
    width: 4.5333333333vw;
  }
}

.area_02 .block_02 .btn_fixed p {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.5rem;
  font-weight: 400;
  color: #f5f5f5;
}

@media screen and (max-width: 767px) {
  .area_02 .block_02 .btn_fixed p {
    font-size: 3.7333333333vw;
  }
}

.area_02 .block_02 .btn_fixed--modal {
  display: none;
}

.area_02 .block_02 .btn_fixed--modal.open {
  display: block;
}

.area_02 .block_02 .btn_fixed.is-show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.modaal-wrapper .modal_item--ttl {
  font-size: 2.8rem;
  font-weight: 500;
  text-align: center;
}

@media screen and (max-width: 767px) {
  .modaal-wrapper .modal_item--ttl {
    font-size: 6.4vw;
  }
}

.modaal-wrapper p {
  font-size: 1.8rem;
  text-align: center;
  margin: 2.3rem 0 0 0;
  line-height: 1.5;
}

@media screen and (max-width: 767px) {
  .modaal-wrapper p {
    font-size: 4.2666666667vw;
    margin: 2.6666666667vw 0 0 0;
  }
}

.modaal-wrapper .modal_item--list {
  width: 66rem;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6.2rem 6.2rem;
  margin: 4.6rem auto 0;
}

@media screen and (max-width: 767px) {
  .modaal-wrapper .modal_item--list {
    width: 100%;
    flex-direction: column;
    gap: 9.3333333333vw;
    margin: 8vw 0 0 0;
  }
}

.modaal-wrapper .modal_item--detl {
  display: block;
  width: 29.9rem;
}

@media screen and (max-width: 767px) {
  .modaal-wrapper .modal_item--detl {
    width: 100%;
  }
}

.modaal-wrapper .modal_item--detl figcaption {
  color: #8A6D75;
  font-size: 1.8rem;
  text-decoration: underline;
  margin: 1.1rem 0 0 0;
}

@media screen and (max-width: 767px) {
  .modaal-wrapper .modal_item--detl figcaption {
    font-size: 4.2666666667vw;
    margin: 2.6666666667vw 0 0 0;
  }
}

.modaal-wrapper .modaal-content-container {
  padding: 8.5rem 3rem 7.7rem;
}

@media screen and (max-width: 767px) {
  .modaal-wrapper .modaal-content-container {
    padding: 13.3333333333vw 4.2666666667vw 18.6666666667vw;
  }
}

.modaal-wrapper .modaal-close {
  width: 2.15rem;
  height: 2.15rem;
  position: absolute;
}

.modaal-wrapper .modaal-close:after,
.modaal-wrapper .modaal-close:before {
  background: #242424;
  top: 0px;
  left: 10px;
  width: 2px;
  height: 21px;
}

.modaal-wrapper .block_02--ttl {
  font-size: 3.5rem;
  font-weight: 600;
  text-align: center;
  margin: 0;
}

@media screen and (max-width: 767px) {
  .modaal-wrapper .block_02--ttl {
    font-size: 6.6666666667vw;
    margin: 10.6666666667vw 0 0 0;
  }
}

.modaal-wrapper .block_02--ttl:nth-of-type(2) {
  margin: 7.4rem 0 0 0;
}

.modaal-wrapper .filter-buttons {
  margin-bottom: 6rem;
}

@media screen and (max-width: 767px) {
  .modaal-wrapper .filter-buttons {
    margin-bottom: 8vw;
  }
}

.modaal-wrapper .filter-buttons .filter1 {
  width: 83rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.9rem 1rem;
  margin: 4.3rem auto 0;
}

@media screen and (max-width: 767px) {
  .modaal-wrapper .filter-buttons .filter1 {
    width: 100%;
    gap: 4vw 3.2vw;
    margin: 8vw auto 0;
  }
}

.modaal-wrapper .filter-buttons .filter1:nth-of-type(2) {
  margin: 1.9rem auto 0;
}

@media screen and (max-width: 767px) {
  .modaal-wrapper .filter-buttons .filter1:nth-of-type(2) {
    margin: 4vw auto 0;
  }
}

.modaal-wrapper .filter-buttons .filter2 {
  width: 83rem;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.9rem 1rem;
  margin: 4.3rem auto 0;
}

@media screen and (max-width: 767px) {
  .modaal-wrapper .filter-buttons .filter2 {
    width: 100%;
    gap: 4vw 3.2vw;
    margin: 8vw auto 0;
  }
}

.modaal-wrapper .filter-buttons .filter2:nth-of-type(2) {
  margin: 1.9rem auto 0;
}

@media screen and (max-width: 767px) {
  .modaal-wrapper .filter-buttons .filter2:nth-of-type(2) {
    margin: 4vw auto 0;
  }
}

.modaal-wrapper .filter-buttons button {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.7rem;
  padding: 0.424rem 2.15rem;
  border-radius: 5rem;
  background: #F4F3ED;
  cursor: pointer;
  display: block;
  flex-shrink: 1;
}

.modaal-wrapper .filter-buttons button.is-active {
  background: #A49C85;
  color: #F9F9F5;
}

.modaal-wrapper .btn_01 {
  display: block;
  width: 50.1rem;
  padding: 2.25rem 0;
  background-color: #8A6D75;
  border-radius: 0;
  color: #f5f5f5;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.8rem;
  font-weight: 400;
  margin: 0 auto;
  text-align: center;
  position: relative;
}

@media screen and (max-width: 767px) {
  .modaal-wrapper .btn_01 {
    width: 100%;
    padding: 5.3333333333vw 0;
    font-size: 4.8vw;
  }
}

.modaal-wrapper .btn_01::after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-top: 1.4rem solid transparent;
  border-bottom: 1.4rem solid transparent;
  border-left: 1.5rem solid #555555;
  border-right: 0;
  position: absolute;
  bottom: -0.9rem;
  right: -0.2rem;
  transform: rotate(45deg);
}

@media screen and (max-width: 767px) {
  .modaal-wrapper .btn_01::after {
    border-top: 2.6666666667vw solid transparent;
    border-bottom: 2.6666666667vw solid transparent;
    border-left: 2.6666666667vw solid #555555;
    bottom: -1.4933333333vw;
    right: -0.1866666667vw;
  }
}

.footer {
  padding: 5.6rem 0 2rem;
}

@media screen and (max-width: 767px) {
  .footer {
    padding: 8.5333333333vw 4.2666666667vw 21.3333333333vw;
  }
}

.footer__toc li {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.2rem;
  text-align: center;
  line-height: 2;
}

@media screen and (max-width: 767px) {
  .footer__toc li {
    font-size: 2.6666666667vw;
    text-align: left;
  }
}

.footer__logo {
  display: block;
  width: 18.9rem;
  margin: 4rem auto 0;
}

@media screen and (max-width: 767px) {
  .footer__logo {
    width: 42.4vw;
    margin: 2.1333333333vw auto 0;
  }
}

.footer__list {
  display: flex;
  justify-content: center;
  margin: 4.1rem 0 0 0;
}

@media screen and (max-width: 767px) {
  .footer__list {
    flex-direction: column;
    align-items: center;
    margin: 0.5333333333vw 0 0 0;
    gap: 1.3333333333vw;
  }
}

.footer__list li {
  padding: 0 2rem;
  border-right: 0.1rem solid #323232;
}

@media screen and (max-width: 767px) {
  .footer__list li {
    width: -moz-fit-content;
    width: fit-content;
    padding: 0px 2.6666666667vw;
    border-right: 0.2666666667vw solid #323232;
    border-left: 0.2666666667vw solid #323232;
  }
}

.footer__list li:first-of-type {
  border-left: 0.1rem solid #323232;
}

@media screen and (max-width: 767px) {
  .footer__list li:first-of-type {
    border-left: 0.2666666667vw solid #323232;
  }
}

.footer__list li a {
  display: block;
  color: #323232;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
}

@media screen and (max-width: 767px) {
  .footer__list li a {
    font-size: 3.7333333333vw;
    text-align: center;
  }
}

.footer_copy {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: 1rem;
  text-align: center;
  padding: 4rem 1rem 1rem;
}

@media screen and (max-width: 767px) {
  .footer_copy {
    font-size: 2.6666666667vw;
    padding: 8vw 0 0 0;
    line-height: 1.75;
  }
}

.page-top {
  display: block;
  width: 4.7rem;
  height: 4.7rem;
  position: fixed;
  z-index: 99;
  bottom: 3.2rem;
  right: 3.2rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

.page-top.is-show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.3s ease, visibility 0s linear 0s;
}

.fade-in-out {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s ease-out, transform 1s ease-out;
}

.fade-in-out.active {
  opacity: 1;
  transform: translateY(0);
}

.fade-in-out-2 {
  opacity: 0;
  transform: scale(0.8, 0.8);
  transition: opacity 1s ease-out, transform 1s ease-out;
}

.fade-in-out-2.active {
  opacity: 1;
  transform: scale(1, 1);
}