@charset "UTF-8";

:root {
  --primary-color: #333;
  --accent-color: #ff6b6b;
  --bg-color: #ffffff;
  --bg-color-rich: rgba(233, 223, 215, 1);
  --bg-color-light: rgba(233, 223, 215, 0.59);
  --bg-color-modal: rgba(46, 61, 48, 0.95);
  --text-white: #ffffff;
  --text-main: #333333;
  --text-caption: #808080;
  --red: #ac2c24;

  --font-base: clamp(15px, 0.1vw + 14.62px, 16px);
  --font-h1: clamp(2rem, 5vw, 3.5rem);
  --font-h2: clamp(1.5rem, 4vw, 2.5rem);

  --section-padding: clamp(60px, 10vw, 100px);
  --container-width: 1200px;

  --transition: 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}


*,
*::before,
*::after {
  box-sizing: border-box;
}


html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  font-size: var(--font-base);
  color: var(--text-main);
  background-color: var(--bg-color);
  line-height: 1.75;
  letter-spacing: 0.023em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
dl,
dt,
dd,
figure {
  margin: 0;
  padding: 0;
  font-weight: 300;
  font-size: inherit;
}

img,
picture,
svg,
video {
  display: block;
  width: 100%;
  height: auto;
}

a,
button {
  text-decoration: none;
  color: inherit;
  transition: var(--transition);
}

a:hover,
button:hover {
  opacity: 0.7;
}

ul,
ol {
  list-style: none;
  padding: 0;
  margin: 0;
}

.show_pc {
  display: block;
}

.show_sp {
  display: none;
}

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

  .show_sp {
    display: block;
  }
}


.hamburger {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 10001;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
}

.hamburger:hover {
  opacity: 1;
}

.hamburger-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 1px;
  width: 48px;
}

.hamburger-grid span {
  width: 11px;
  height: 11px;
  border: 1px solid rgba(51, 51, 51, 0.79);
  background-color: rgba(230, 95, 97, 0.79);
  transition: 0.3s;
}


.hamburger:hover .hamburger-grid span {
  width: 10px;
  height: 10px;
  margin-bottom: 1.5px;
  transform: rotate(45deg);
  transition: 0.3s;
}


.hamburger-text img {
  margin-top: 5px;
  width: 50px;
  height: auto;
}


body.is-drawer-open .hamburger-grid span {
  background-color: #ff0000;
}

.drawer-menu {
  position: fixed;
  top: 0;
  right: 0;
  width: calc(400/1366*100%);
  max-width: 80%;
  min-width: 350px;
  height: 100%;
  background: var(--bg-color-rich);
  z-index: 10000;
  padding: 100px 40px;
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  overflow-y: scroll;
}

.drawer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: 0.4s;
}

.drawer-menu ul.language_list {
  position: absolute;
  top: 20px;
  display: flex;
}

.drawer-menu ul.language_list li {
  font-size: 14px;
  margin-right: 20px;
  font-weight: 500;
  text-decoration: unset;
}

.drawer-menu ul.language_list li.jp {
  opacity: 0.3;
}





.drawer-menu ul.nav_list li {
  margin-bottom: 20px;
  transition: transform 0.3s ease;
}

.drawer-menu ul.nav_list li img {
  height: 15px;
  width: auto;
}

.drawer-menu ul.nav_list li p {
  font-size: 13px;
  font-weight: 400;
  color: #666;
  margin-top: 4px;
  transition: transform 0.3s ease;
}

.drawer-menu ul.nav_list li:hover p {
  color: var(--red);
  font-weight: 500;
  transition: transform 0.3s ease;
}


.drawer-menu ul.nav_list li p::after {
  content: "";
  width: 12px;
  height: 12px;
  background-size: cover;
  background-position: center;
  background-image: url(../img/map/map_icon_yajirushi.svg);
  display: inline-block;
  margin-left: 9px;
  margin-bottom: -1px;
  opacity: 0.6;
}

body.is-drawer-open .drawer-menu {
  transform: translateX(0);
}

body.is-drawer-open .drawer-overlay {
  opacity: 1;
  visibility: visible;
}


body.is-drawer-open .hamburger {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.drawer-close {
  position: absolute;
  top: 0;
  right: 0;
  border: none;
  cursor: pointer;
  width: 60px;
  height: 26px;
  background-color: #000;
}

.drawer-close img {
  height: 10px;
}


@media screen and (max-width: 768px) {
  .hamburger-grid {
    width: 40px;
  }

  .hamburger-grid span {
    width: 9px;
    height: 9px;
  }

  .hamburger-text img {
    width: 42px;
    margin-top: 0;
  }

  .drawer-menu {
    width: 95%;
    max-width: 95%;
    min-width: unset;
    padding: 80px 40px;
  }


}



.hero {
  position: relative;
  width: 100%;
  overflow: visible;
}

.hero .txt_area {
  position: absolute;
  top: 50%;
  right: calc(875/1366*100%);
  transform: translateY(-50%);
  width: calc(286/1366*100%);
}

.hero .txt_area h1 svg {
  margin-bottom: 37px;
}

.hero .txt_area h2 img {
  width: 100%;
  margin-bottom: 16px;
  margin-bottom: 48px;
}


.hero .txt_area .date_area img.date {
  width: calc(242/286*100%);
  width: 100%;
}


.floating-btn,
.floating-btn-fornav {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9999;

  color: #fff;
  text-decoration: none;
  font-weight: bold;

  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
  width: calc(100/1366*100%);
  min-width: 100px;

}

.floating-btn img,
.floating-btn-fornav img {
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.2));
}

.floating-btn:hover,
.floating-btn-fornav:hover {
  transform: translateY(-3px) scale(1.025);
  opacity: 1;
  transition: transform 0.3s ease;
}

.floating-btn.is-hidden {
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  pointer-events: none;
}



@media screen and (max-width: 768px) {
  .hero .txt_area {
    width: calc(518 / 750 * 100%);
    transform: unset;
    right: unset;
    top: unset;
    bottom: 35px;
    left: 18px;
  }

  .hero .txt_area h1 svg {
    width: calc(474/514*100%);
    margin-bottom: 13px;
  }

  .hero .txt_area h2 img {
    margin-bottom: 28px;
  }

}


.intro .bg_subimg {
  width: 100%;
  height: auto;
  aspect-ratio: 2735/2051;

  background-image: url("../img/intro_bg_pc.jpg?260224");

  background-image: -webkit-image-set(url("../img/intro_bg_pc.webp") type("image/webp"),
      url("../img/intro_bg_pc.jpg") type("image/jpeg"));

  background-image: image-set(url("../img/intro_bg_pc.webp") type("image/webp"),
      url("../img/intro_bg_pc.jpg") type("image/jpeg"));

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  background-attachment: scroll;
  position: relative;
}

@media (min-width: 1366px) and (any-hover: hover) {
  .intro .bg_subimg {
     /*aspect-ratio: unset;
   height: 1025px;
    background-attachment: fixed;
    will-change: background-position;*/
  }
}

@media (max-width: 1920px) {
  .intro .bg_subimg {
    background-attachment: unset;
    height: auto;
    aspect-ratio: 2735/2051;

  }
}


.intro .bg_subimg .txt_area {
  width: calc(358/1366*100%);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: calc(60/1366*100%);
}


.intro .bg_subimg .txt_area h2 img {
  width: calc(323/358*100%);
  margin-bottom: calc(25/1366*100vw);
}


.intro .bg_subimg .txt_area img.subttl {
  width: calc(280/358*100%);
  margin-bottom: calc(68/1366*100vw);
}

.intro .bg_subimg .txt_area h3 img {
  width: calc(296/358*100%);
  margin-bottom: calc(50/1366*100vw);
}

.intro .bg_subimg .txt_area p {
  color: #fff;
  font-weight: 400;
  margin-bottom: calc(36/1366*100vw);
}

.intro .bg_subimg .txt_area button {
  padding: 0;
  background-color: unset;
  border: none;
  width: calc(210/358*100%);
  cursor: pointer;
}

@media screen and (max-width: 768px) {
  .intro .bg_subimg {
    background-image: url(../img/intro_bg_sp.jpg?260224);

    background-image: -webkit-image-set(url("../img/intro_bg_sp.webp") type("image/webp"),
        url("../img/intro_bg_sp.jpg") type("image/jpeg"));

    background-image: image-set(url("../img/intro_bg_sp.webp") type("image/webp"),
        url("../img/intro_bg_sp.jpg") type("image/jpeg"));


    aspect-ratio: unset;
    padding-top: calc(1095/750*100vw);
    padding-bottom: calc(124/750*100vw);
  }


  .intro .bg_subimg .ttl_area {
    width: calc(560 / 600 * 100%);
    max-width: 280px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: calc(370 / 750 * 100vw);
  }

  .intro .bg_subimg .ttl_area h2 img {
    margin-bottom: 12px;
  }


  .intro .bg_subimg .txt_area {
    position: relative;
    width: calc(600/750*100%);
    transform: unset;
    top: unset;
    right: unset;
    margin: 0 auto;
  }


  .intro .bg_subimg .txt_area h3 img {
    max-width: 261px;
    margin: 0 auto 35px;
    width: calc(532 / 600 * 100%);
  }



  .intro .bg_subimg .txt_area p {
    text-align: center;
    margin-bottom: 35px;
  }

  .intro .bg_subimg .txt_area button {
    width: calc(446/600*100%);
    margin: 0 auto;
    display: block;
    max-width: 223px;
  }



}




.gallery-container {
  overflow: hidden;
  width: 100%;
  background-color: var(--bg-color-light);
}

.gallery-track {
  display: flex;
  width: max-content;
  backface-visibility: hidden;
  perspective: 1000px;
}

.gallery-content {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  animation: scroll-left 90s linear infinite;
  will-change: transform;
}

.gallery-content li {
  width: 33.333vw;
  flex-shrink: 0;
  margin-right: -1px;
}

.gallery-content img {
  width: calc(100% + 1px);
  height: auto;
  display: block;
  image-rendering: -webkit-optimize-contrast;
}

@keyframes scroll-left {
  0% {
    transform: translate3d(0, 0, 0);
  }

  100% {
    transform: translate3d(-100%, 0, 0);
  }
}

@media screen and (max-width: 768px) {
  .gallery-content li {
    width: calc(533/750*100vw);
  }
}







.sec01 {
  background-color: var(--bg-color-light);
  padding-top: clamp(120px, 5.5px + 21.2vw, 170px);
  padding-bottom: clamp(60px, 58.18px + 4.48vw, 112px);
}

.sec01 .wrapper {
  width: calc(1100/1366*100%);
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
}

.sec01 .wrapper img.deco1 {
  position: absolute;
  width: calc(200/1100*100%);
  top: 50%;
}

.sec01 .wrapper img.deco2 {
  position: absolute;
  width: calc(246/1100*100%);
  right: 0;
}

.sec01 .wrapper img.deco3 {
  position: absolute;
  width: calc(140/1100*100%);
  right: 0;
  top: 28%;
}

.sec01 .wrapper h2 img {
  width: calc(275/1100*100%);
  max-width: 275px;
  display: block;
  margin: 0 auto;
}

.sec01 .wrapper h3 img {
  width: calc(350 / 1100 * 100%);
  margin: 0 auto 45px;
}


.sec01 .wrapper p {
  width: calc(566/1100*100%);
  margin: clamp(50px, 2vw, 55px) auto 0;
  font-size: var(--font-base);
  color: var(--text-main);
}

.sec01 .wrapper ul {
  display: flex;
  justify-content: space-between;
  width: calc(432/1100*100%);
  margin: clamp(50px, 2vw, 55px) auto 0;
}

.sec01 .wrapper ul li {
  width: calc(194/432*100%);
}

.sec01 .wrapper ul li img {
  transition: transform 0.2s ease;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.1));
}

.sec01 .wrapper ul li img:hover {
  transform: translateY(3px);
  transition: transform 0.2s ease;
}


@media screen and (max-width: 768px) {
  .sec01 .wrapper {
    width: calc(675/750*100%);
    width: 100%;
  }

  .sec01 .wrapper img.deco1 {
    width: calc(240 / 750 * 100%);
    top: 50px;
    max-width: 120px;
  }

  .sec01 .wrapper img.deco2 {
    width: calc(284 / 750 * 100%);
    top: -65px;
    max-width: 142px;
  }

  .sec01 .wrapper img.deco3 {
    width: calc(169 / 750 * 100%);
    top: 20px;
    right: 20px;
    max-width: 84px;

  }

  .sec01 .wrapper h3 img {
    height: 50px;
    width: auto;
    margin-bottom: 100px;
  }

  .sec01 .wrapper h2 img {
    height: 16px;
    width: auto;
    max-width: unset;
  }

  .sec01 .wrapper p {
    width: calc(600/750*100%);
  }

  .sec01 .wrapper ul {
    width: calc(675/750*100%);
    max-width: 340px;
  }

  .sec01 .wrapper ul li {
    width: calc(320/675*100%);
  }


}




.sec02,
.sec03 {
  background-color: var(--bg-color-rich);
  padding-top: clamp(80px, 5vw, 150px);
  padding-bottom: clamp(80px, 0.5vw, 140px);
}

.sec03 {
  background-color: var(--bg-color-light);
}

.sec02 .txt_area,
.sec03 .txt_area {
  width: calc(1100/1366*100%);
  margin: 0 auto;
  max-width: 1100px;
  position: relative;
}

.sec02 .txt_area .inner,
.sec03 .txt_area .inner {
  width: calc(566/1100*100%);
  margin: 0 auto;
}

.sec02 .inner h2 img {
  width: calc(150/566*100%);
  max-width: 150px;
  display: block;
  margin: 0 auto;
}

.sec03 .inner h2 img {
  width: calc(194/566*100%);
  max-width: 194px;
  display: block;
  margin: 0 auto;
}




.sec02 .inner p,
.sec03 .inner p {
  margin: clamp(50px, 2vw, 55px) auto 0;
  font-size: var(--font-base);
  color: var(--text-main);
}

.sec02 .txt_area img.decoguide {
  position: absolute;
  width: calc(104/1100*100%);
  right: 0;
  bottom: 0;
}

.sec03 .txt_area img.decoguide {
  position: absolute;
  width: calc(100/1100*100%);
  right: 0;
  bottom: 0;
}


.sync-container {
  overflow-x: auto;
  overflow-y: hidden;
}

.sync-container::-webkit-scrollbar {
  height: 0;
}

.sec02 .map_area,
.sec03 .map_area {
  width: calc(1100/1366*100%);
  max-width: 1100px;
  width: 1100px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sec02 .map_area .mt_info,
.sec03 .map_area .mt_info {
  width: calc(233/1100*100%);
  width: 233px;
}

.map_area .mt_info ul li {
  margin-bottom: 40px;
  display: flex;
  align-items: center;
  transition: transform 0.4s ease;
  cursor: pointer;
  width: fit-content;
}

.map_area .mt_info ul li img {
  background-color: #808080;
  width: 26px;
  height: 26px;
  margin-right: 13px;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.1));
  transition: transform 0.4s ease;
}


.map_area .mt_info ul li.is-active {
  transform: scale(1.05);
  opacity: 1;
}

.map_area .mt_info ul li.is-active img.chara {
  background-color: var(--red);
  transition: transform 0.4s ease;
  opacity: 1;
}

.map_area .mt_info ul li.is-active p {
  font-weight: 600;
  transition: transform 0.4s ease;
  opacity: 1;
}


.map_area .mt_info ul li p {
  font-weight: 400;
}

.map_area .mt_info ul li p::after {
  content: "";
  width: 14px;
  height: 14px;
  background-size: cover;
  background-position: center;
  background-image: url("../img/map/map_icon_yajirushi.svg");
  display: inline-block;
  margin-left: 8px;
}

.map_area .mt_info img.map_name {
  margin-top: 110px;
  width: 223px;
}


.map_area .main_map {
  width: calc(604/1100*100%);
  width: 604px;
  position: relative;
}


.map_area .main_map img.icon {
  width: 24px;
  height: 24px;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.1));
  transition: transform 0.4s ease;
  position: absolute;
  cursor: pointer;
}

.map_area .main_map img.icon.chara {
  background-color: #808080;
}

.map_area .main_map img.icon.chara.icon_a {
  right: 108px;
  bottom: 298px;
}

.map_area .main_map img.icon.chara.icon_b {
  right: 209px;
  bottom: 335px;
}

.map_area .main_map img.icon.chara.icon_c {
  left: 171px;
  top: 192px;
}

.map_area .main_map img.icon.chara.icon_d {
  right: 266px;
  top: 100px;
}

.map_area .main_map img.icon.chara.icon_e {
  right: 105px;
  top: 152px;
}


.map_area .main_map img.icon.num {
  background-color: #000;
}

.map_area .main_map img.icon.chara.is-active,
.map_area .main_map img.icon.num.is-active {
  background-color: var(--red);
  transition: transform 0.4s ease;
  transform: scale(1.5);
  opacity: 1;
}

.map_area .main_map img.deco {
  position: absolute;
  cursor: pointer;
}

.map_area .main_map.outbound img.icon.num.icon_1 {
  bottom: 125px;
  right: 305px;
}

.map_area .main_map.outbound img.deco.deco_1 {
  width: 75px;
  bottom: 147px;
  right: 307px;
  transform: rotate(-8deg);
}

.map_area .main_map.outbound img.icon.num.icon_2 {
  bottom: 404px;
  left: 9px;
}

.map_area .main_map.outbound img.deco.deco_2 {
  width: 50px;
  top: 314px;
  left: -32px;
  transform: rotate(-8deg);
}

.map_area .main_map.outbound img.icon.num.icon_3 {
  top: 320px;
  right: 97px;
}

.map_area .main_map.outbound img.deco.deco_3 {
  width: 50px;
  top: 314px;
  right: 32px;
  transform: rotate(12deg);
}


.map_area .main_map.outbound img.icon.num.icon_4 {
  top: 280px;
  right: 127px;
}

.map_area .main_map.outbound img.deco.deco_4 {
  width: 75px;
  top: 264px;
  right: 43px;
  transform: rotate(-12deg);
}


.map_area .main_map.outbound img.icon.num.icon_5 {
  top: 175px;
  right: 225px;
}

.map_area .main_map.outbound img.deco.deco_5 {
  width: 50px;
  top: 158px;
  left: 294px;
  transform: rotate(-8deg);
}

.map_area .main_map.outbound img.icon.num.icon_6 {
  top: 100px;
  right: 173px;
}

.map_area .main_map.outbound img.deco.deco_6 {
  width: 75px;
  top: 40px;
  left: 419px;
  transform: rotate(-8deg);
}



.map_area .main_map.inbound img.icon.num.icon_1 {
  top: 233px;
  right: 175px;
}

.map_area .main_map.inbound img.icon.num.icon_2 {
  top: 280px;
  right: 127px;
}

.map_area .main_map.inbound img.deco.deco_2 {
  width: 75px;
  top: 264px;
  right: 43px;
  transform: rotate(-12deg);
}


.map_area .main_map.inbound img.icon.num.icon_3 {
  top: 363px;
  right: 270px;
}

.map_area .main_map.inbound img.deco.deco_3 {
  width: 70px;
  top: 321px;
  right: 243px;
  transform: rotate(-12deg);
}

.map_area .main_map.inbound img.icon.num.icon_4 {
  top: 304px;
  left: 96px;
}

.map_area .main_map.inbound img.deco.deco_4 {
  width: 75px;
  top: 274px;
  left: 118px;
  transform: rotate(-8deg);
}

.map_area .main_map.inbound img.icon.num.icon_5 {
  bottom: 404px;
  left: 9px;
}

.map_area .main_map.inbound img.deco.deco_5 {
  width: 50px;
  top: 314px;
  left: -32px;
  transform: rotate(-8deg);
}





.map_area .pickup_info {
  width: calc(263/1100*100%);
  width: 263px;
}


.map_area .pickup_info ul {
  width: 226px;
  margin: 0 0 0 auto;
}

.map_area .pickup_info ul li {
  background-color: rgba(255, 255, 255, 0.3);
  border-bottom: 2px solid #000;
  margin-bottom: 40px;
  transition: transform 0.4s ease;
  cursor: pointer;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
}

.map_area .pickup_info ul li.is-active {
  opacity: 1;
  border-bottom: 2px solid var(--red);
  transform: scale(1.05);
}

.map_area .pickup_info ul li .wrapper {
  position: relative;
}

.map_area .pickup_info ul li .wrapper img.num {
  position: absolute;
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
  background-color: #000;
}

.map_area .pickup_info ul li.is-active .wrapper img.num {
  background-color: var(--red);
}


.map_area .pickup_info ul li .wrapper .txt_area {
  width: auto;
  padding: 8px 30px;
}

.map_area .pickup_info ul li .wrapper .txt_area p.txt_s {
  font-size: 13px;
  line-height: 16px;
}

.map_area .pickup_info ul li .wrapper .txt_area p.txt_l {
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
}

.map_area .pickup_info ul li .wrapper .txt_area p.txt_m {
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: -0.097em
}


.map_area .pickup_info ul li img.deco {
  position: absolute;
}

.map_area .pickup_info.outbound ul li:nth-child(1) img.deco,
.map_area .pickup_info.outbound ul li:nth-child(4) img.deco,
.map_area .pickup_info.inbound ul li:nth-child(4) img.deco {
  width: 110px;
  right: -45px;
  top: -20px;
}

.map_area .pickup_info.outbound ul li:nth-child(2) img.deco,
.map_area .pickup_info.outbound ul li:nth-child(3) img.deco,
.map_area .pickup_info.outbound ul li:nth-child(5) img.deco,
.map_area .pickup_info.inbound ul li:nth-child(1) img.deco,
.map_area .pickup_info.inbound ul li:nth-child(5) img.deco {
  width: 68px;
  right: -20px;
  top: -20px;
}

.map_area .pickup_info.outbound ul li:nth-child(6) img.deco {
  width: 78px;
  right: -25px;
  top: -30px;
}

.map_area .pickup_info.inbound ul li:nth-child(2) img.deco,
.map_area .pickup_info.inbound ul li:nth-child(3) img.deco {
  width: 88px;
  right: -35px;
  top: -20px;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--bg-color-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10001;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.modal-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.modal-content {
  background: #fff;
  width: calc(460/1366*100%);
  max-width: 600px;
  min-width: 460px;
  padding: 30px;
  position: relative;
  transform: translateY(20px);
  transition: all 0.3s ease;
  z-index: 1000;
  pointer-events: auto;
}


.modal-content.video-only {
  width: 85%;
  max-width: unset;
  aspect-ratio: 16 / 9;
}

.video-container {
  position: relative;
  width: 85%;
  margin: 0 auto;
  padding-top: 56.25%;
  height: 0;
  overflow: hidden;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  border: none;
}

.modal-overlay.is-open .modal-content {
  transform: translateY(0);
}

.modal-close {
  position: absolute;
  top: 0;
  right: 0;
  border: none;
  cursor: pointer;
  width: 60px;
  height: 26px;
  background-color: #000;
}

.modal-close img {
  height: 10px;
}

.modal-image-area {
  margin-bottom: 20px;
}

.modal-image-area img {
  width: 100%;
  height: auto;
  margin-top: 20px;
  margin-bottom: 20px;
}

.modal-text-area {
  flex: 1;
}

.modal-text-area .ttl_area {
  display: flex;
  align-items: flex-start;
}

.modal-text-area .ttl_area img#modal-number {
  width: 26px;
  height: 26px;
  margin-right: 12px;
  background-color: var(--red);
}

.modal-text-area .ttl_area h2 {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.25;
  margin-bottom: 14px;
}

.modal-text-area .ttl_area h2 span.span_s {
  font-size: 14px;
  color: #808080;
  margin-left: 8px;
}

.modal-text-area .ttl_area h2 span.span_m {
  font-size: 15px;
  display: block;
  margin-bottom: 4px;
  color: #808080;
}


.modal-text-area p {
  font-size: 15px;
}

.modal-navigation {
  margin-top: 30px;
  padding-bottom: 20px;
  text-align: center;
}

.modal-navigation button {
  border: none;
  background-color: unset;
  cursor: pointer;
  position: relative;
  z-index: 9999 !important;
  pointer-events: auto !important;
  touch-action: manipulation;

}

.modal-navigation button img {
  height: 12px;
  width: auto;

}

.modal-navigation button.prev-btn img {
  margin-right: 20px;

}

#modal-number,
#modal-title,
#modal-desc,
.modal-image-area {
  opacity: 0;
  transition: opacity 0.5s ease, transform 0.5s ease;
  will-change: opacity, transform;
}


#modal-number.is-up,
#modal-title.is-up,
#modal-desc.is-up,
.modal-image-area.is-up {
  opacity: 1 !important;
}


@media screen and (max-width: 768px) {

  .modal-content,
  .modal-content.video-only {
    width: 95%;
    padding: 40px 10px 40px 10px;
    min-width: unset;
  }

  .video-container {
    width: 95%;
  }

  .map_area .main_map img.icon.chara.is-active,
  .map_area .main_map img.icon.num.is-active,
  .map_area .main_map ul li.is-active img.icon.chara,
  .map_area .main_map ul li.is-active img.icon.num {
    transform: translate(-50%, -50%);
  }

  .map_area .pickup_info ul li.is-active,
  .map_area .mt_info ul li.is-active {
    transform: unset;
  }



  .map_area .main_map img.icon {
    transform: translate(-50%, -50%);
    width: calc(50 / 750 * 100%);
    aspect-ratio: 1;
    height: auto;
    max-width: 50px;
    min-width: 25px;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.4));
  }


  .map_area .main_map img.icon.chara.icon_a {
    right: calc(62 / 750 * 100%);
    bottom: calc(330 / 968 * 100%);
  }

  .map_area .main_map img.icon.chara.icon_b {
    right: calc(202 / 750 * 100%);
    bottom: calc(385 / 968 * 100%);
  }


  .map_area .main_map img.icon.chara.icon_c {
    left: calc(220 / 750 * 100%);
    top: calc(266 / 968 * 100%);
  }


  .map_area .main_map img.icon.chara.icon_d {

    right: unset;
    left: calc(401 / 750 * 100%);
    top: calc(122 / 968 * 100%);
  }

  .map_area .main_map img.icon.chara.icon_e {
    right: calc(60 / 750 * 100%);
    top: calc(161 / 968 * 100%);
  }


  .map_area .main_map.outbound img.icon.num.icon_1 {
    right: calc(371 / 750 * 100%);
    bottom: calc(111 / 968 * 100%);
  }

  .map_area .main_map.outbound img.deco.deco_1 {
    right: calc(435 / 750 * 100%);
    bottom: calc(178 / 968 * 100%);
    width: calc(100 / 750 * 100%);
    max-width: 100px;
  }

  .map_area .main_map.outbound img.icon.num.icon_2 {
    left: calc(80 / 750 * 100%);
    top: calc(376 / 968 * 100%);
  }

  .map_area .main_map.outbound img.deco.deco_2 {
    left: calc(120 / 750 * 100%);
    top: calc(338 / 968 * 100%);
    width: calc(70 / 750 * 100%);
    max-width: 70px;
  }

  .map_area .main_map.outbound img.icon.num.icon_3 {
    right: calc(54 / 750 * 100%);
    top: unset;
    bottom: calc(514 / 968 * 100%);
  }

  .map_area .main_map.outbound img.deco.deco_3 {
    right: calc(24 / 750 * 100%);
    top: unset;
    bottom: calc(590 / 968 * 100%);
    width: calc(60 / 750 * 100%);
    max-width: 60px;
  }

  .map_area .main_map.outbound img.icon.num.icon_4 {
    right: calc(94 / 750 * 100%);
    top: unset;
    bottom: calc(574 / 968 * 100%);
  }

  .map_area .main_map.outbound img.deco.deco_4 {
    right: calc(47 / 750 * 100%);
    top: unset;
    bottom: calc(641 / 968 * 100%);
    width: calc(70 / 750 * 100%);
    max-width: 70px;
    transform: rotate(0);
  }

  .map_area .main_map.outbound img.icon.num.icon_5 {
    right: unset;
    left: calc(450 / 750 * 100%);
    top: calc(202 / 968 * 100%);
  }

  .map_area .main_map.outbound img.deco.deco_5 {
    left: calc(341 / 750 * 100%);
    top: calc(157 / 968 * 100%);
    width: calc(70 / 750 * 100%);
    max-width: 70px;
  }

  .map_area .main_map.outbound img.icon.num.icon_6 {
    right: unset;
    left: calc(536 / 750 * 100%);
    top: calc(92 / 968 * 100%);
  }

  .map_area .main_map.outbound img.deco.deco_6 {
    left: calc(561 / 750 * 100%);
    top: calc(17 / 968 * 100%);
    width: calc(90 / 750 * 100%);
    max-width: 90px;
  }

  .map_area .main_map.inbound img.icon.num.icon_1 {
    right: calc(176 / 750 * 100%);
    top: unset;
    bottom: calc(625 / 968 * 100%);
  }

  .map_area .main_map.inbound img.icon.num.icon_2 {
    right: calc(94 / 750 * 100%);
    top: unset;
    bottom: calc(574 / 968 * 100%);
  }

  .map_area .main_map.inbound img.deco.deco_2 {
    right: calc(30 / 750 * 100%);
    top: unset;
    bottom: calc(604 / 968 * 100%);
    width: calc(80 / 750 * 100%);
    max-width: 80px;
    transform: rotate(0);
  }

  .map_area .main_map.inbound img.icon.num.icon_3 {
    right: calc(297 / 750 * 100%);
    bottom: calc(455 / 968 * 100%);
    top: unset;
  }

  .map_area .main_map.inbound img.deco.deco_3 {
    right: calc(309 / 750 * 100%);
    bottom: calc(535 / 968 * 100%);
    top: unset;
    width: calc(70 / 750 * 100%);
    max-width: 70px;
  }

  .map_area .main_map.inbound img.icon.num.icon_4 {
    left: calc(110 / 750 * 100%);
    top: calc(376 / 968 * 100%);
  }

  .map_area .main_map.inbound img.deco.deco_4 {
    width: calc(90 / 750 * 100%);
    max-width: 90px;
    transform: rotate(0);
    left: calc(140 / 750 * 100%);
    top: calc(338 / 968 * 100%);
  }

  .map_area .main_map.inbound img.icon.num.icon_5 {
    left: calc(49 / 750 * 100%);
    top: calc(537 / 968 * 100%);
  }

  .map_area .main_map.inbound img.deco.deco_5 {
    left: calc(78 / 750 * 100%);
    top: calc(512 / 968 * 100%);
    width: calc(60 / 750 * 100%);
    max-width: 60px;
  }

}





.sec02 .itinerary_area h3 img,
.sec03 .itinerary_area h3 img {
  width: calc(117/1100*100%);
  max-width: 117px;
  display: block;
  margin: 0 auto;
}

.sec02 .itinerary_area p.lead,
.sec03 .itinerary_area p.lead {
  text-align: center;
  font-size: var(--font-base);
  margin: clamp(20px, 2vw, 23px) auto 0;
}

.js-more-group {
  margin: clamp(60px, 2vw, 80px) auto 0;
  width: calc(1100/1366*100%);
  max-width: 1100px;
  position: relative;
}

.sec02 .itinerary_area ul,
.sec03 .itinerary_area ul {

  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 40px;
}

.sec02 img.decottl,
.sec03 img.decottl {
  width: 10px;
  position: absolute;
  left: calc(-60/1366*100%);
}

.sec02 .itinerary_area ul li,
.sec03 .itinerary_area ul li {
  width: calc(500/1100*100%);
}

.sec02 .itinerary_area ul li h4 img,
.sec03 .itinerary_area ul li h4 img {
  margin-top: clamp(20px, 0.5vw + 18px, 24px);
  height: clamp(15px, 0.2vw + 13.2px, 16px);
  width: auto;
}

.sec02 .itinerary_area ul li p,
.sec03 .itinerary_area ul li p {
  width: 80%;
  font-size: clamp(14px, 0.2vw + 13.2px, 15px);
  line-height: 1.5;
  letter-spacing: 0.05em;
  margin-top: clamp(18px, 0.5vw + 18px, 20px);
}

.sec02 .itinerary_area ul li p span,
.sec03 .itinerary_area ul li p span {
  display: block;
  font-size: 13px;
  letter-spacing: 0.025em;
  color: var(--text-caption);
}


.more-btn {
  display: none;
}


@media screen and (max-width: 768px) {

  .sec02 .inner h2 img,
  .sec03 .inner h2 img {
    width: auto;
    height: 52px;
  }


  .sec02 .txt_area,
  .sec03 .txt_area {
    width: calc(600 / 750 * 100%);
    margin: 0 auto;
  }

  .sec02 .txt_area .inner,
  .sec03 .txt_area .inner {
    width: 100%;
  }

  .sec02 .txt_area img.decoguide {
    width: calc(115 / 600 * 100%);
    margin-right: calc(213/600*100%);
    margin-bottom: 10px;
  }

  .sec03 .txt_area img.decoguide {
    width: calc(110 / 600 * 100%);
    margin-right: calc(222/600*100%);
    margin-bottom: 10px;
  }

  .sec02 .txt_area img.map_name.show_sp,
  .sec03 .txt_area img.map_name.show_sp {
    width: calc(250/600*100%);
    margin-top: 50px;
  }


  .sync-container {
    overflow-x: hidden;
    margin-top: -30px;
  }


  .sec02 .map_area,
  .sec03 .map_area {
    display: block;
    width: 100%;
  }

  .map_area .main_map {
    width: 100%;
    overflow: hidden;
  }

  .map_area .main_map img.main_map_outbound,
  .map_area .main_map img.main_map_inbound {
    transform: scale(1.098) translateX(calc(1/750*100%))
  }


  .map_area .pickup_info {
    width: calc(700 / 750 * 100%);
    margin: 0 auto;
    margin-top: 10px;
  }

  .map_area .pickup_info ul {
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .map_area .pickup_info ul li {
    width: calc(340 / 700 * 100%);
    margin-bottom: 25px;
  }

  .map_area .pickup_info ul li .wrapper img.num {
    width: 18px;
    height: 18px;
  }

  .map_area .pickup_info ul li .wrapper .txt_area {
    padding: 12px 5px 12px 21px
  }

  .map_area .pickup_info ul li .wrapper .txt_area p.txt_m,
  .map_area .pickup_info ul li .wrapper .txt_area p.txt_l {
    font-size: 14px;
  }


  .map_area .pickup_info.outbound ul li:nth-child(2) img.deco,
  .map_area .pickup_info.outbound ul li:nth-child(3) img.deco,
  .map_area .pickup_info.outbound ul li:nth-child(5) img.deco,
  .map_area .pickup_info.inbound ul li:nth-child(1) img.deco,
  .map_area .pickup_info.inbound ul li:nth-child(5) img.deco {
    width: 48px;
    right: -5px;
    top: -15px;
  }



  .map_area .pickup_info.inbound ul li:nth-child(2) img.deco,
  .map_area .pickup_info.inbound ul li:nth-child(3) img.deco {
    width: 68px;
    right: -7px;
    top: -28px;
  }

  .map_area .pickup_info.outbound ul li:nth-child(1) img.deco,
  .map_area .pickup_info.outbound ul li:nth-child(4) img.deco,
  .map_area .pickup_info.inbound ul li:nth-child(4) img.deco {
    width: 80px;
    right: -8px;
    top: -16px;
  }

  .map_area .pickup_info.outbound ul li:nth-child(1) img.deco {
    top: -26px;
  }

  .map_area .pickup_info.outbound ul li:nth-child(6) img.deco {
    width: 68px;
    right: -10px;
    top: -18px;
  }

  .sec02 .map_area .mt_info,
  .sec03 .map_area .mt_info {
    width: calc(700 / 750 * 100%);
    margin: 0 auto;
  }

  .sec02 .map_area .mt_info ul,
  .sec03 .map_area .mt_info ul {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .map_area .mt_info ul li {
    margin-bottom: 18px;
  }

  .map_area .mt_info ul li img {
    width: 20px;
    height: 20px;
    margin-right: 8px;
  }

  .map_area .mt_info ul li p {
    margin-right: 15px;
  }


  .sec02 .itinerary_area,
  .sec03 .itinerary_area {
    margin-top: 85px;
  }

  .sec02 .itinerary_area h3 img,
  .sec03 .itinerary_area h3 img {
    width: 85px;
  }


  .js-more-group {
    width: 100%;
  }

  .sec02 img.decottl,
  .sec03 img.decottl {
    left: 10px;
  }

  .sec02 .itinerary_area ul,
  .sec03 .itinerary_area ul {
    width: calc(600 / 750 * 100%);
    display: block;
    margin: 0 auto;
  }

  .sec02 .itinerary_area ul li,
  .sec03 .itinerary_area ul li {
    width: 100%;
    margin-bottom: 60px;
  }

  .sec02 .itinerary_area ul li:last-child,
  .sec03 .itinerary_area ul li:last-child {
    margin-bottom: 0;
  }

  .sec02 .itinerary_area ul li p,
  .sec03 .itinerary_area ul li p {
    width: 100%;
  }

  .more-btn {
    display: block;
    width: 200px;
    height: 40px;
    background-color: #2e3d30;
    margin: 0 auto;
    border: unset;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.1));
  }

  .more-btn img {
    width: 95px;
    margin: 0 auto;
  }



  .itinerary_list li:nth-child(n+2) {
    display: none;
  }

  .js-more-group.is-open .itinerary_list li:nth-child(n+2) {
    display: block;
  }

  .js-more-group.is-open .js-more-btn {
    display: none;
  }

}






.insert {
  width: 100%;
  height: auto;
  aspect-ratio: 2734/1467;

  background-image: url('../img/insert_img.jpg');

  background-image: -webkit-image-set(url("../img/insert_img.webp") type("image/webp"),
      url(".../img/insert_img.jpg") type("image/jpeg"));

  background-image: image-set(url("../img/insert_img.webp") type("image/webp"),
      url("../img/insert_img.jpg") type("image/jpeg"));



  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  background-attachment: scroll;
}

@media (min-width: 1366px) and (any-hover: hover) {
/*  .insert {
    aspect-ratio: unset;
    height: 730px;
    background-attachment: fixed;
    will-change: background-position;
  }*/
}

@media (max-width: 1920px) {
  .insert {
    background-attachment: unset;
    height: auto;
    aspect-ratio: 2734/1467;
  }
}

.sec04 {
  background-color: var(--bg-color-rich);
  padding-top: clamp(50px, 15.14vw - 6.76px, 200px);
}

.sec04 .wrapper {
  width: calc(1100/1366*100%);
  max-width: 1100px;
  margin: 0 auto;
}

.sec04 .wrapper .ttl_area {
  position: relative;
}

.sec04 .wrapper .ttl_area h2 img {
  width: calc(136/1100*100%);
  max-width: 136px;
  display: block;
  margin: 0 auto;
}

.sec04 .wrapper .ttl_area img.decoashiyu {
  position: absolute;
  width: calc(234/1100*100%);
  bottom: 0;
  left: 0;
}


.sec04 .wrapper .upper,
.sec04 .wrapper .mid,
.sec04 .wrapper .lower {
  display: flex;
  justify-content: space-between;
}


.sec04 .wrapper .upper {
  margin-top: clamp(45px, 5.55vw + 24.19px, 100px);

}

.sec04 .wrapper .upper p {
  width: calc(445/1100*100%);
  line-height: 2.25;
}

.sec04 .wrapper .upper .ropeway_area {
  width: calc(542/1100*100%);
  position: relative;
}

.sec04 .wrapper .upper .ropeway_area img.decoropeway {
  width: calc(222 / 542 * 100%);
  position: absolute;
  right: 0;
  translate: 0 -90%;
  top: 0;
}


.sec04 .wrapper .mid {
  margin-top: clamp(35px, 7.77vw + 5.86px, 112px);
  width: calc(1043/1100*100%);
  align-items: start;
  flex-direction: row-reverse;
}

.sec04 .wrapper .mid img.img02 {
  width: calc(420/1043*100%);
}

.sec04 .wrapper .mid img.img03 {
  width: calc(540/1043*100%);
  margin-top: clamp(35px, 5.02vw + 17.43px, 86px);
}

.sec04 .wrapper .lower {
  margin-top: clamp(26px, 0.81vw + 22.97px, 34px);
  width: calc(928/1100*100%);
  align-items: start;
  flex-direction: row-reverse;
  max-width: 928px;
}

.sec04 .wrapper .lower img.img04 {
  width: calc(261/928*100%);
}

.sec04 .wrapper .lower img.decobridge {
  width: calc(306 / 928 * 100%);
  margin-left: calc(90 / 928 * 100%);
  margin-top: calc(60 / 1366 * 100vw);
}

.sec04 .wrapper h3 img {
  width: calc(283/1100*100%);
  margin: 0 auto 56px;
}


@media screen and (max-width: 768px) {
  .sec04 .wrapper {
    width: 100%;
  }

  .sec04 .wrapper .ttl_area {
    width: calc(700/750*100%);
    margin: 0 auto;
  }

  .sec04 .wrapper .ttl_area img.decoashiyu {
    position: relative;
    width: calc(235/700*100%);
  }

  .sec04 .wrapper h3 img {
    width: calc(274 / 700 * 100%);
    margin-bottom: 20px;
  }

  .sec04 .wrapper .ttl_area h2 img {
    width: calc(245/700*100%);
  }

  .sec04 .wrapper .upper,
  .sec04 .wrapper .mid,
  .sec04 .wrapper .lower {
    display: block;
  }

  .sec04 .wrapper .upper {
    width: calc(675 / 750 * 100%);
    margin: 60px auto 0;
  }

  .sec04 .wrapper .upper p {
    width: calc(600/675*100%);
    line-height: 2;
    margin: 0 auto 60px;
  }

  .sec04 .wrapper .upper .ropeway_area {
    width: calc(450 / 675 * 100%);
    margin: 120px 0 0 auto;
  }

  .sec04 .wrapper .mid {
    width: calc(540 / 750 * 100%);
  }

  .sec04 .wrapper .mid img.img02 {
    width: calc(350/540*100%);
    margin-left: calc(45/540*100%);
  }

  .sec04 .wrapper .mid img.img03 {
    width: 100%;
  }

  .sec04 .wrapper .lower {
    width: calc(680/750*100%);
  }

  .sec04 .wrapper .lower img.img04 {
    width: calc(250 / 680 * 100%);
    margin: 0 0 0 auto;
  }

  .sec04 .wrapper .lower img.decobridge {
    width: calc(330 / 650 * 100%);
    margin-top: calc(-94 / 750 * 100vh);
    margin-left: 0;
  }


}





.sec05,
.sec07 {
  background-color: var(--bg-color-light);
  padding: clamp(70px, 4.04vw + 54.86px, 110px) 0;
}

.sec06 {
  background-color: var(--bg-color);
  padding: clamp(70px, 4.04vw + 54.86px, 110px) 0;
}

.sec05 .wrapper,
.sec06 .wrapper,
.sec07 .wrapper {
  width: calc(1100/1366*100%);
  margin: 0 auto;
  max-width: 1100px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.sec05 .wrapper .ttl_area,
.sec06 .wrapper .ttl_area,
.sec07 .wrapper .ttl_area {
  width: calc(350/1100*100%);
  position: sticky;
  top: 20px;
}

.sec05 .wrapper .ttl_area h3 img {
  width: calc(96/350*100%);
  margin-bottom: 25px;
}

.sec06 .wrapper .ttl_area h3 img {
  width: calc(160/350*100%);
  margin-bottom: 25px;
}

.sec07 .wrapper .ttl_area h3 img {
  width: calc(52/350*100%);
  margin-bottom: 25px;
}




.sec05 .wrapper .ttl_area h2,
.sec06 .wrapper .ttl_area h2,
.sec07 .wrapper .ttl_area h2 {
  font-size: var(--font-base);
  font-weight: 400;
}

.sec05 .wrapper .ttl_area img.decoticket {
  width: calc(222/350*100%);
  margin-top: calc(70/1366*100vw);
}

.sec06 .wrapper .ttl_area img.decobusstop {
  width: calc(74/350*100%);
  margin-top: calc(70/1366*100vw);
}

.sec07 .wrapper .ttl_area .decofaq {
  width: calc(132/350*100%);
  margin-top: calc(70/1366*100vw);
  display: flex;
  align-items: flex-end;
}

.sec07 .wrapper .ttl_area .decofaq img.decofaq00 {
  width: 60%;
}

.sec07 .wrapper .ttl_area .decofaq img.decofaq01 {
  width: 40%;
}



.sec05 .wrapper .info_area,
.sec06 .wrapper .info_area,
.sec07 .wrapper .info_area {
  width: calc(750/1100*100%);
}

.sec05 .wrapper .info_area .fare ul li.num {
  position: relative;
  padding-left: 1.75em;
  font-size: 14px;
  line-height: 1.75;
}

.sec05 .wrapper .info_area .fare ul li.num.no1::before {
  content: "１）";
  position: absolute;
  left: 0;
  top: 0;
}

.sec05 .wrapper .info_area .fare ul li.num.no2::before {
  content: "２）";
  position: absolute;
  left: 0;
  top: 0;
}

.sec05 .wrapper .info_area .fare ul li.caption {
  position: relative;
  padding-left: 1.2em;
  font-size: 14px;
  line-height: 1.75;
}

.sec05 .wrapper .info_area .fare ul li.caption::before {
  content: "※";
  position: absolute;
  left: 0;
  top: 0;
}

.sec05 .wrapper .info_area p {
  font-size: clamp(14px, 0.1vw + 13.62px, 15px);
}

.sec05 .wrapper .info_area .caption {
  color: var(--text-caption);
}

.sec05 .wrapper .info_area h4 img {
  height: 22px;
  margin-bottom: 10px;
  width: auto;
}

.sec05 .wrapper .info_area .upper {
  display: flex;
  align-items: flex-start;
}

.sec05 .wrapper .info_area .upper .period,
.sec05 .wrapper .info_area .upper .area {
  width: 50%;
}

.sec05 .wrapper .info_area .fare,
.sec05 .wrapper .info_area .perchase {
  margin-top: 50px;
}

.sec05 .wrapper .info_area .sub_info {
  background-color: var(--bg-color-rich);
  padding: 30px 40px;
}

.sec05 .wrapper .info_area .sub_info.online {
  margin-top: 25px;
  margin-bottom: 10px;
}

.sec05 .wrapper .info_area .sub_info h5 {
  font-size: clamp(14px, 0.1vw + 13.62px, 15px);
  font-weight: 500;
  margin-bottom: 10px;
}

.sec05 .wrapper .info_area .sub_info p {
  margin-bottom: 10px;
}

.sec05 .wrapper .info_area .sub_info a.btn {
  background-color: var(--red);
  width: 200px;
  height: 40px;
  display: block;
  margin: 0 auto 30px 0;
  position: relative;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.2));
}

.sec05 .wrapper .info_area .sub_info a img {
  height: 14px;
  width: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.sec05 .wrapper .info_area .sub_info a.telno:hover {
  color: var(--red);
}


.sec06 .info_area .table_ttl_area {
  display: flex;
  justify-content: space-between;
}

.sec06 .info_area .table_ttl_area p.area {
  font-weight: 500;
}

.sec06 .info_area .table_ttl_area p.caption {
  color: var(--text-caption);
  font-size: 13px;
}

.sec06 .info_area table th {
  background-color: #2e3d30;
  box-shadow: 0 0 0 1px #2e3d30;
  color: #fff;
}

.timetable-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.timetable {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  white-space: nowrap;
  margin-top: 10px;
}

.timetable.outbound {
  margin-bottom: 50px;
}

.timetable th,
.timetable td {
  padding: 10px 20px;
  background-color: #fff;
  border: none;
  font-weight: 300;
}

.timetable th::after {
  content: "";
  position: absolute;
  top: 0;
  right: -11px;
  width: 10px;
  height: 100%;
  background-color: #fff;
  border-right: 1px solid #fff;
}

.timetable tr.first th,
.timetable tr.first td {
  padding: 20px 20px 10px;
}

.timetable tr.last th,
.timetable tr.last td {
  padding: 10px 20px 20px;
}



.timetable th {
  font-weight: 500;
}

.timetable th span {
  color: var(--text-caption);
  margin-right: 20px;
  font-weight: 300;
}

.timetable td {
  background-color: #f2eeeb;
  text-align: center;
  font-weight: 400;
}

.sticky-col {
  position: sticky;
  left: 0;
  z-index: 2;
  font-weight: bold;
  text-align: left;
  border-right: 10px solid #f5f5f5;
  background-clip: padding-box;
}


.sec07 {
  background-color: var(--bg-color-light);
}

.faq-container {
  max-width: 800px;
  margin: 0 auto;
  font-size: 15px;
}

.faq-item {
  background-color: var(--bg-color-rich);
  margin-bottom: 10px;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.05));
}

.faq-question {
  display: flex;
  align-items: flex-start;
  padding: 20px;
  cursor: pointer;
  position: relative;
  font-weight: 300;
}

.prefix {
  margin-right: 10px;
}

.prefix img {
  width: 17px;
  height: auto;
  padding-top: 7px;
}

.question-text {
  flex: 1;
  padding-right: 46px;
}

.toggle-icon {
  position: absolute;
  right: 20px;
  width: 16px;
  height: 16px;
  top: 26px;
}

.line-horizontal,
.line-vertical {
  position: absolute;
  background-color: #c7c7c7;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: transform 0.3s ease;
}

.line-horizontal {
  width: 100%;
  height: 1px;
}

.line-vertical {
  width: 1px;
  height: 100%;
}

.faq-item.is-open .line-vertical {
  transform: translate(-50%, -50%) rotate(90deg);
}

.faq-answer {
  overflow: hidden;
  height: 0;
  transition: height 0.3s ease;
  background-color: #f9f9f9;
}

.answer-content {
  padding: 20px 66px 20px 20px;
  display: flex;
  line-height: 1.6;
}

.answer-content a {
  color: var(--red);
  font-weight: 500;
  text-decoration: underline;
}


.heartbeat {
  animation: heartbeat 1.2s ease-in-out infinite;
  transform-origin: center;
}

@keyframes heartbeat {
  0% {
    transform: scale(1);
  }

  15% {
    transform: scale(1.08);
  }

  30% {
    transform: scale(1);
  }

  45% {
    transform: scale(1.06);
  }

  60% {
    transform: scale(1);
  }

  100% {
    transform: scale(1);
  }
}





@media screen and (max-width: 768px) {
  .sec05 .wrapper {
    width: calc(600/750*100%);
    display: block;
  }

  .sec06 .wrapper,
  .sec07 .wrapper {
    width: calc(675/750*100%);
    display: block;
  }

  .sec05 .wrapper .ttl_area {
    width: 100%;
    margin: 0 auto 40px;
    position: relative;
    top: unset;
  }

  .sec06 .wrapper .ttl_area,
  .sec07 .wrapper .ttl_area {
    width: calc(600/675*100%);
    margin: 0 auto 40px;
    position: relative;
    top: unset;
  }

  .sec05 .wrapper .ttl_area .left h3 img {
    height: 21px;
    width: auto;
    margin-bottom: 13px;
  }

  .sec06 .wrapper .ttl_area .left h3 img {
    height: 20px;
    width: auto;
    margin-bottom: 13px;
  }

  .sec07 .wrapper .ttl_area .left h3 img {
    height: 23px;
    width: auto;
    margin-bottom: 13px;
  }

  .sec05 .wrapper .ttl_area img.decoticket {
    width: calc(280/600*100%);
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    max-width: 140px;
  }

  .sec06 .wrapper .ttl_area img.decobusstop {
    width: calc(74/600*100%);
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    max-width: 38px;
  }

    .sec07 .wrapper .ttl_area .decofaq{
    width: calc(195/600*100%);
    max-width: 98px;
    position: absolute;
    top: 0;
    right: 0;
    margin:0;
  }



  .sec05 .wrapper .info_area,
  .sec06 .wrapper .info_area,
  .sec07 .wrapper .info_area {
    width: 100%;
  }


  .sec05 .wrapper .info_area .upper,
  .sec05 .wrapper .info_area .upper .period,
  .sec05 .wrapper .info_area .upper .area {
    display: block;
    width: 100%;
  }

  .sec05 .wrapper .info_area .upper .area,
  .sec05 .wrapper .info_area .fare,
  .sec05 .wrapper .info_area .perchase {
    margin-top: 30px;
  }


  .sec05 .wrapper .info_area .sub_info {
    padding: 30px 26px;
  }


  .sec06 .info_area .table_ttl_area {
    display: block;
  }

  .sec06 .info_area .table_ttl_area.inbound {
    margin-top: 40px;
  }

  .timetable.outbound {
    margin-bottom: 0;
  }

  .timetable.inbound {
    margin-bottom: 0;
  }

  .timetable th,
  .timetable td {
    padding: 10px 16px 10px;
  }

  .timetable tr.first th,
  .timetable tr.first td {
    padding: 20px 16px 10px;
  }

  .timetable tr.last th,
  .timetable tr.last td {
    padding: 10px 16px 20px;
  }

  .timetable td,
  .timetable tr.last td,
  .timetable tr.first td {
    padding-left: 36px;
    padding-right: 0;
  }

  .timetable td.last,
  tr.last td.last,
  .timetable tr.first td.last {
    padding-right: 36px;
  }

  .timetable th span {
    margin-right: 14px;
  }





  .question-text {
    line-height: 22px;
    padding-right: 28px;
  }

  .answer-content {
    padding-right: 58px;
  }

  .answer-text {
    line-height: 22px;
  }



}





footer {
  background-color: var(--bg-color-light);
}

footer a {
  padding: 0;
  border: 0;
  background: unset;
  width: calc(65/1366*100%);
  margin: 0 80px 0 auto;
  display: block;
  cursor: pointer;
  transition: transform 0.2s ease;
  min-width: 75px;
}

footer a:hover {
  transform: translateY(-3px) scale(1.025);
  opacity: 1;
  transition: transform 0.2s ease;
}

footer a img {
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.2));
  margin-bottom: 12px;
}

footer .mountain_wrapper.bus-track {
  position: relative;
  width: 100%;
  overflow: hidden;
  position: relative;
}


.moving-bus {
  position: absolute;
  bottom: -2px;
  width: 82px;
  height: auto;
  animation:
    bus-drive 50s linear infinite,
    bus-vibration 0.5s ease-in-out infinite;
  animation-delay: -10s;
}

@keyframes bus-drive {
  0% {
    left: -200px;
  }

  100% {
    left: 100%;
  }
}


@keyframes bus-vibration {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-1px);
  }
}





footer .footer_wrapper {
  background-color: #000;
  padding-bottom: 120px;
}

footer .footer_wrapper .txt_area {
  padding-top: 70px;
  padding-left: 10%;
}

footer .footer_wrapper .txt_area img.logo {
  width: 207px;
  margin-bottom: 75px;
}

footer .footer_wrapper .txt_area ul {
  color: #b3b3b3;
  font-size: 13px;
}

@media screen and (max-width: 768px) {
  footer a {
    width: calc(100 / 750 * 100%);
    min-width: 50px;
    margin-right: calc(38 / 750 * 100%);
  }

  footer .footer_wrapper {
    padding-bottom: 60px;
  }


  footer .footer_wrapper .txt_area {
    padding-left: 0;
    width: calc(675/750*100%);
    margin: 0 auto;
  }
}