@charset "UTF-8";

.title {
  justify-content: center;
  display: flex;
  color: var(--title-font-color);
  letter-spacing: 2.28px;
  gap: 16px;
  margin: var(--spacing-xl) 0 var(--spacing-md) 0;
}

.section {
  padding: var(--spacing-xl) 0 var(--spacing-xl) 0;
}

.section-header {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* .whats-doto-area-section START */
.whats-doto-area-section {
  display: flex;
  margin: auto;
  width: 100%;

  padding-bottom: 0;

  .content {
    .whats-doto-img {
      max-width: 350px;
      margin: 0 auto;

      img {
        width: 100%;
      }
    }

    gap: 16px;
    width: 350px;
    /* display: flex; */
    flex-direction: column;
    letter-spacing: 1.28px;
    margin: 5rem 55% 5rem auto;
  }

  .simple {
    display: none;
  }
}

@media screen and (max-width: 900px) {
  .whats-doto-area-section {
    display: block;
  }

  .whats-doto-area-section .content {
    width: auto;
    padding: 0 var(--spacing-lg);
    margin: 0 auto;
  }

  .whats-doto-area-section .simple {
    display: block;
    text-align: center;

    img {
      width: 100%;
    }
  }
}

@media screen and (min-width: 901px) {
  .whats-doto-area-section {
    background-origin: content-box;
    background-image: url(img/dotomap.svg);
    background-size: auto 95%;
    background-repeat: no-repeat;
    background-position: bottom 0 left 35vw;
  }
}

@media screen and (max-width: 1024px) {
  .whats-doto-area-section {
    background-position: bottom 0 left 25vw;
  }
}

/* .whats-doto-area-section END */

/* .area-introduction START */
.area-introduction {
  margin: 0 auto;
  max-width: var(--container-max-width);
  padding-top: 0;

  .select-area#origin-select-area {
    padding-bottom: var(--spacing-xl);
  }

  .select-area#duplicate-select-area {
    padding-top: var(--spacing-xl);
  }

  .select-area {
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
    max-width: var(--container-max-width);

    .area {
      flex: 0 0 auto;
      width: 20%;
      min-width: 175px;

      .area-body {
        padding: var(--spacing-md);

        .area-img {
          position: relative;
          display: inline-block;
          margin: 0 var(--spacing-sm) 0 var(--spacing-sm);

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

          img:nth-child(1) {
            border-radius: 50%;
          }

          img:nth-child(2) {
            border-radius: 8px;
            position: absolute;
            top: 0;
            left: 0;
            transition: 0.5s all;
          }
        }

        .name {
          font-size: var(--font-size-sm);
          font-weight: 750;
        }
      }

      .area-body:hover,
      .area-body:has(.area-img.selected) {
        .name {
          color: var(--area-hover-font-color);
        }

        .area-img {
          img:nth-child(2) {
            transition: 0.5s all;
            opacity: 0;
          }
        }
      }
    }

    .area:has(.area-body .area-img.selected) {
      pointer-events: none;
    }
  }

  .area-description {
    align-items: center;
    gap: 32px;
    padding: 64px var(--spacing-xxl) 64px var(--spacing-xxl);
    display: flex;
    flex-direction: column;
    position: relative;

    .area-header {
      display: flex;
      align-items: center;
      gap: var(--spacing-xxl);
      text-align: justify;
      letter-spacing: 1.6px;

      .area-logo img {
        width: 240px;
      }
    }

    .bar-area {
      width: 100%;

      .bar {
        height: 4px;
        background-color: var(--border-color);
      }
    }

    .area-body {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 48px;
    }

    .spot {
      display: flex;
      align-items: center;
      gap: var(--spacing-xxl);
      text-align: justify;

      .spot-roma {
        color: var(--roma-font-color);
      }
    }

    .button-group {
      width: 100%;
      justify-content: center;
      display: flex;
      flex-wrap: wrap;
      gap: var(--spacing-md);
    }

    .button-link {
      width: auto;
    }

    .button-large {
      width: 400px;
      height: auto;
      padding: var(--spacing-sm);
    }
  }
}

@media screen and (max-width: 900px) {
  .area-introduction {
    margin-top: -96px;
  }
}

@media screen and (max-width: 834px) {
  .area-introduction .area-description .area-header {
    display: contents;
  }

  .area-introduction .area-description .area-header .area-logo img {
    width: 100%;
    max-width: 220px;
  }

  .area-introduction .area-description .spot {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .area-introduction .area-description .spot-sp-reverse {
    width: 100%;
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-start;
  }

  .area-introduction .area-description .spot .spot-img,
  .area-introduction .area-description .spot .spot-img img {
    width: 100%;
  }
}

@media screen and (max-width: 480px) {
  .area-introduction .area-description {
    padding: 64px var(--spacing-sm) 64px var(--spacing-sm);
  }

  .area-introduction .select-area .area .area-body .name {
    font-weight: normal;
  }
}

@media screen and (max-width: 570px) {
  .area-introduction {
    .select-area {
      .area {
        width: 33.3%;
        min-width: auto;

        .area-body {
          .area-img {
            img:nth-child(2) {
              transition: 0 all;
            }
          }
        }

        .area-body {
          padding: var(--spacing-sm);

          .area-img.selected {
            img:nth-child(1) {
              border: 5px solid var(--border-color);
              box-sizing: border-box;
              -moz-box-sizing: border-box;
              -webkit-box-sizing: border-box;
            }

            img:nth-child(2) {
              transition: 0 all;
              opacity: 0;
            }
          }
        }
      }
    }
  }

  .area-introduction .area-description .button-large {
    width: auto;
    max-width: 400px;
  }
}

/* .area-introduction END */

.article-list {
  justify-content: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  padding: var(--spacing-xl) 0px var(--spacing-xl) 0px;
  margin: 0 auto;
  max-width: var(--container-max-width);

  .article {
    flex: 1 0 0%;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);

    @media screen and (max-width: 480px) {
      flex: 100%;
    }

    .article-img {
      margin: var(--spacing-sm) 0;
      aspect-ratio: 3 / 2;
      display: flex;

      img {
        align-self: center;
      }
    }
  }
}

.travel-fetured {
  background-color: var(--bg-color-special);
  padding: var(--spacing-xl) 0px var(--spacing-xl) 0px;

  .article-list {
    .article {
      min-width: 280px;
      max-width: 330px;
    }
  }

  .button-area {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}

.featured-experiences {
  background-color: var(--bg-color-featured-experiences);
  padding: var(--spacing-xl) 0px var(--spacing-xl) 0px;

  .article-list {
    .article {
      min-width: 280px;
      max-width: 330px;

      .article-img {
        aspect-ratio: 16 / 9;
      }
    }
  }
}

.model-course {
  .select-model-course {
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    padding: var(--spacing-xl) 0px var(--spacing-xl) 0px;
    margin: 0 auto;
    max-width: var(--container-max-width);

    .course {
      min-width: 320px;
      max-width: 400px;
      flex: 1 0 0%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      height: 182px;
      background-color: var(--bg-color-sub);

      @media screen and (max-width: 480px) {
        min-width: 100%;
      }

      .course-no {
        gap: 8px;
        color: var(--title-font-color);
        display: flex;
      }

      .course-body {
        position: absolute;
        top: 50%;
        right: 0;
        left: 0;
        margin: auto;
        transform: translateY(-50%);

        .course-no {
          justify-content: center;
        }
      }

      .course-second-body {
        position: absolute;
        top: 50%;
        margin: auto 0.5rem;
        transform: translateY(-50%);

        .course-bar {
          background-color: var(--border-color);
          height: 2px;
          width: 3rem;
          margin-bottom: 0.5rem;
        }

        .course-no {
          justify-content: start;
        }
      }

      .course-arrow {
        position: absolute;
        top: 75%;
        right: 0;
        margin: auto 0.5rem;
        transform: translateY(-50%);
        background-color: var(--title-font-color);
        border-radius: 50%;
        color: white;
        text-align: center;
        width: calc(var(--font-size-lg) * 2);
        height: calc(var(--font-size-lg) * 2);
        line-height: calc(var(--font-size-lg) * 2);
        font-size: var(--font-size-lg);
      }

      .course-arrow:after {
        content: "↓";
      }
    }
  }

  .course-detail {
    display: flex;
    flex-wrap: wrap;
    padding: var(--spacing-xl) 0px var(--spacing-xl) 0px;
    margin: 0 auto;
    max-width: var(--container-max-width);
    justify-content: space-between;
    --border-property: rgba(230, 230, 230, 1) solid 1px;

    .course-detail-header {
      width: 100%;

      .course-no {
        color: var(--title-font-color);
      }

      .course-title {
        display: inline-flex;
        gap: var(--spacing-md);
        width: 100%;
        border-bottom: var(--border-property);
        margin: 0.5rem auto;

        @media screen and (max-width: 480px) {
          display: inline-block;
        }
      }

      .course-trip {
        display: table;

        .course-days,
        .course-route {
          display: table-cell;
          vertical-align: middle;
        }

        .course-days {
          padding-right: 2rem;
          border-right: var(--border-property);
        }

        .course-route {
          padding-left: 2rem;
        }

        .course-route > span {
          display: table-cell;
          vertical-align: middle;
          padding-right: 0.5rem;
        }

        @media screen and (max-width: 480px) {
          .course-days {
            padding-right: 0.5rem;
          }

          .course-route {
            padding-left: 0.5rem;
          }
        }
      }
    }

    .course-img,
    .course-summary {
      margin-top: var(--spacing-md);
    }

    .course-img {
      --swiper-pagination-color: rgba(0, 0, 0, 1);
      width: calc(55% - (var(--spacing-lg) / 2));

      .course-map {
        width: 100%;
      }

      .course-map,
      .swiper {
        margin-bottom: var(--spacing-md);
      }

      /* 前へ次への矢印カスタマイズ */
      .swiper-button-prev,
      .swiper-button-next,
      .swiper-button-prev:after,
      .swiper-button-next:after {
        height: var(--swiper-customize-arrow-size);
        width: var(--swiper-customize-arrow-size);
      }

      /* 前へ次への矢印カスタマイズ */
      .swiper-button-prev:after,
      .swiper-button-next:after {
        background-repeat: no-repeat;
        background-size: contain;
        content: "";
        margin: auto;
      }

      /* 前への矢印カスタマイズ */
      .swiper-button-prev:after {
        background-image: url(./img/icon-arrow-left.svg);
      }

      /* 次への矢印カスタマイズ */
      .swiper-button-next:after {
        background-image: url(./img/icon-arrow-right.svg);
      }
    }

    .course-summary {
      width: calc(45% - (var(--spacing-lg) / 2));

      .course-summary-header {
        width: 100%;
        border-bottom: rgba(112, 112, 112, 1) solid 1px;
        margin-bottom: 0.25rem;
      }

      .course-summary-explain {
        margin-bottom: 2rem;
      }

      .course-schedule {
        margin: 2rem 0;
        display: block;
        width: 100%;

        .course-plan {
          padding: 0.5rem 0 0.25rem 0;
          display: flex;
          border-top: var(--border-property);

          .course-plan-title {
            display: flex;
            gap: var(--spacing-xs);
            padding: 0 var(--spacing-xs);
            justify-content: space-between;

            .course-plan-text {
              flex: 1;

              .description {
                margin-left: 0.5rem;
              }

              .description:first-child {
                margin-top: 0.25rem;
              }
            }

            .button-link {
              height: 1.2rem;
            }
          }

          .course-plan-list {
            width: 100%;

            .course-plan-title {
              padding-top: 0.5rem;
            }

            .course-plan-title:first-child {
              padding-top: 0;
            }
          }
        }
      }
    }

    @media screen and (min-width: 901px) {
      .course-img .swiper {
        border-radius: 8px;
      }
    }

    @media screen and (min-width: 481px) {
      .course-img .swiper .swiper-pagination {
        display: none !important;
      }
    }

    @media screen and (max-width: 900px) {
      .course-img {
        width: 100%;
        padding: 0 var(--spacing-sm);
      }

      .course-summary {
        width: 100%;
        padding: 0 var(--spacing-sm);
      }
    }

    @media screen and (max-width: 480px) {
      .course-img {
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        width: 100vw;
        padding: 0;
      }

      .course-img .swiper .swiper-pagination {
        position: static;
      }

      .course-img .swiper .swiper-button-prev,
      .course-img .swiper .swiper-button-next {
        display: none !important;
      }

      .course-img .swiper .swiper-slide {
        display: flex;
        justify-content: center;
        border-radius: 8px;
        overflow: hidden;
        aspect-ratio: 1 / 1;

        img {
          height: 100%;
          width: auto !important;
        }
      }
    }
  }
}

/* 固定値 */
:root {
  --swiper-customize-arrow-size: 1.5rem;
  --hover-slider-transition: 0.5s;
}

/* スライドのスタイル */
.swiper {
  width: 100%;
}

.swiper-slide img {
  width: 100%;
  align-self: center;
}

.swiper.swiper.top-slider {
  --swiper-pagination-color: rgba(255, 255, 255, 1);
  --swiper-navigation-color: rgba(255, 255, 255, 0.75);
  --swiper-pagination-bullet-inactive-color: var(--swiper-pagination-color);
  --swiper-pagination-bullet-inactive-opacity: 0.5;
  --swiper-navigation-size: 32px;
}

.swiper.top-slider .swiper-slide {
  display: flex;
  justify-content: center;

  max-height: calc(100vh - var(--navbar-height));
}

.swiper-wrapper {
  line-height: 0;
}

.swiper.swiper-rounded {
  border-radius: 8px;
}

.swiper-button-prev.swiper-button-bottom,
.swiper-button-next.swiper-button-bottom {
  top: initial;
  bottom: 5%;
}

.swiper-button-prev.swiper-button-bottom {
  left: calc(50% - var(--swiper-customize-arrow-size) * 2);
}

.swiper-button-next.swiper-button-bottom {
  right: calc(50% - var(--swiper-customize-arrow-size) * 2);
}

.swiper-logo {
  position: absolute;
  z-index: 10;
  width: 485px;
  max-width: 70%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

.swiper-catchphrase {
  position: absolute;
  top: 50%;
  left: 4rem;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  z-index: 10;

  @media screen and (max-width: 1024px) {
    left: 2rem;
  }

  @media screen and (max-width: 480px) {
    left: 0.5rem;
  }
}

.catchphrase-body {
  display: inline-flex;
}

.catchphrase-body .catchphrase-text {
  writing-mode: vertical-rl;
  position: relative;
  color: white;
  font-size: var(--font-size-xl);
  letter-spacing: 3.2px;
  line-height: 3.5rem;
}

.bar-wrapper .bar-top,
.bar-wrapper .bar-bottom {
  width: 50%;
  height: 100%;
  background-color: white;
  margin-bottom: 1rem;
  margin-top: 1rem;
}

.bar-wrapper .bar-top {
  float: right;
}

.bar-wrapper .bar-bottom {
  float: left;
}

.bar-wrapper {
  width: 100%;
  height: 4px;
}

@media screen and (max-width: 1024px) {
  .catchphrase-body .catchphrase-text {
    font-size: var(--font-size-md);
    line-height: 2.5rem;
  }
}

@media screen and (max-width: 900px) {
  .swiper-logo {
    max-width: 35%;
  }
}

@media screen and (max-width: 480px) {
  .swiper-logo {
    max-width: 75%;
  }

  .swiper.top-slider {
    height: 85vh;
    width: 100%;
  }

  .swiper.top-slider .swiper-slide img {
    height: 100%;
    width: auto;
  }

  .swiper-catchphrase {
    top: 0.5rem;
    transform: translateY(0%);
    -webkit-transform: translateY(0%);
    -ms-transform: translateY(0%);
  }

  .catchphrase-body .catchphrase-text {
    font-size: var(--font-size-md);
    letter-spacing: 6.4px;
    line-height: 3rem;
  }
}

/* .swiper-article-slider .swiper-wrapper {
    line-height: normal;
} */

/* ホバーしたら表示がスライドする */
.hover-slider-wrapper {
  width: 100%;
  height: 300px;
  overflow: hidden;
  flex-flow: column;
  background-color: var(--bg-color-sub);
}

.hover-slider-wrapper .hover-slider-body {
  /* position: relative;
    top: 0; */
  transform: translateY(0%);
  height: 100%;
  transition: var(--hover-slider-transition) all;
}

.hover-slider-wrapper:hover .hover-slider-body {
  /* top: -100%; */
  transform: translateY(-100%);
}

@media screen and (max-width: 480px), (hover: none) {
  .hover-slider-wrapper:hover .hover-slider-body {
    /* top: 0; */
    transform: translateY(0%);
  }

  .hover-slider-wrapper .hover-slider-body:first-child {
    display: none;
  }
}

.booking-site {
  background-color: var(--bg-color-sub);
  padding: 0;

  .title {
    color: var(--font-color);
  }

  .article-list {
    max-width: 1140px;

    .article {
      min-width: 310px;
      max-width: 360px;

      @media screen and (max-width: 480px) {
        min-width: 100%;
      }
    }
  }

  .button-area {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}

/* @media screen and (min-width: 901px) {
    .course-img .swiper {
        overflow: auto !important;
        border-radius: 0 !important;
    }

    .course-img .swiper-wrapper {
        display: block;
    }

    .course-img .swiper-wrapper img {
        border-radius: 8px !important;
    }

    .course-img .swiper-wrapper .d-pc-none-boundary,
    .course-img .swiper-wrapper .d-pc-none-boundary~.swiper-slide {
        display: none !important;
    }

    .course-img .swiper-slide {
        margin-bottom: var(--spacing-md);
    }

    .course-img .swiper .swiper-button-prev,
    .course-img .swiper .swiper-button-next {
        display: none !important;
    }
} */

/* タブ切り替え */
.area-tab-container {
  display: flex;
  flex-wrap: wrap;
}

.area-tab-container .tab-header,
.area-tab-container .tab-footer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  padding-left: var(--spacing-sm);
  padding-right: var(--spacing-sm);
  justify-content: center;
  width: 100%;
}

.area-tab-container .tab-header .tab,
.area-tab-container .tab-footer .tab {
  flex: 1;
  min-width: 100px;
  max-width: 190px;
  text-align: center;
  cursor: pointer;
  padding: var(--spacing-sm);
  box-sizing: border-box;
  background: var(--btn-color);
  color: var(--btn-font-color);
  opacity: 0.5;
  transition: opacity 0.5s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.area-tab-container .tab-header .tab {
  margin-bottom: 0;
}

.area-tab-container .tab-footer .tab {
  margin-top: 0;
}

.area-tab-container .tab-header .tab:hover,
.area-tab-container .tab-footer .tab:hover {
  opacity: 0.75;
}

.area-tab-container .tab-header .tab.active,
.area-tab-container .tab-footer .tab.active {
  cursor: default;
  opacity: 1;
}

.area-tab-container .tab-content {
  border: 4px solid var(--border-color);
  background-color: var(--bg-color-sub);
}

.area-tab-container .tab-content .content {
  display: none;
  box-sizing: border-box;
}

.area-tab-container .tab-content .content.active {
  display: block;
}

.area-tab-container .content {
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.area-tab-container .content.active {
  display: block;
  opacity: 1;
}