@charset "UTF-8";
/*----------------------------------------
  Base
----------------------------------------*/
html {
  scroll-behavior: smooth;
}

body {
  font-family: "Epilogue", sans-serif;
  font-size: 1.1111111111vw;
  font-weight: normal;
  color: #000;
  background: #fff;
}
@media (max-width: 768px) {
  body {
    font-size: 3.7333333333vw;
  }
}

html:lang(zh-cmn-Han) body,
html:lang(zh-cmn-Hant) body {
  font-family: "Noto Sans SC", sans-serif;
}

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

ul, ol {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.3s;
}

a:focus, button:focus, input:focus, select:focus, textarea:focus {
  outline-width: medium;
}

a:active, a:hover {
  outline-width: medium;
}

a, button {
  transition: opacity 0.3s;
}
a:hover, button:hover {
  opacity: 0.8;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

small {
  font-size: 100%;
}

/*----------------------------------------
  Layout
----------------------------------------*/
.wrapper {
  overflow-x: hidden;
  overflow-y: auto;
}

.main-contents {
  margin-top: min(6.9444444444vw, 100px);
}
@media (max-width: 768px) {
  .main-contents {
    margin-top: 17.0666666667vw;
  }
}

.container {
  width: 87.5%;
  margin-inline: auto;
}
.container .full-width {
  margin-inline: calc(50% - 50vw);
  padding-left: calc(50vw - 50%);
  padding-right: calc(50vw - 50%);
}

/* ヘッダー
----------------------------------------*/
.header {
  position: fixed;
  z-index: 999;
  width: 100%;
  height: min(6.9444444444vw, 100px);
  background: #fff;
  box-shadow: 0 0 0.6944444444vw rgba(0, 0, 0, 0.2);
}
@media (max-width: 768px) {
  .header {
    height: 17.0666666667vw;
    box-shadow: 0 0 2.6666666667vw rgba(0, 0, 0, 0.2);
  }
}

.header__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

.header__title {
  font-size: min(1.3888888889vw, 20px);
  font-weight: 500;
}
@media (max-width: 768px) {
  .header__title {
    font-size: 5.3333333333vw;
  }
}
.header__title span {
  font-weight: 900;
}
@media (max-width: 768px) {
  .header__title span {
    display: block;
  }
}

.header__nav {
  display: flex;
  align-items: center;
  gap: min(1.3888888889vw, 20px);
}

.header__list {
  display: flex;
}
@media (max-width: 768px) {
  .header__list {
    display: none;
  }
}
.header__list a {
  font-family: "Epilogue", sans-serif;
  display: block;
  padding: min(0.4861111111vw, 7px) min(1.3888888889vw, 20px);
  font-size: min(1.1111111111vw, 16px);
  line-height: 1;
}

.header__langButton {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: min(0.3472222222vw, 5px);
  padding: min(0.3472222222vw, 5px) min(0.6944444444vw, 10px);
  border-radius: 100vmax;
  font-family: "Epilogue", sans-serif;
  font-size: min(0.8333333333vw, 12px);
  font-weight: 500;
  color: #fff;
  background: #000;
}
@media (max-width: 768px) {
  .header__langButton {
    gap: 1.3333333333vw;
    padding: 1.3333333333vw 2.6666666667vw;
    font-size: 3.2vw;
  }
}
.header__langButton::before {
  content: "";
  width: min(1.3888888889vw, 20px);
  height: min(1.3888888889vw, 20px);
  background: url(../images/ico_lang.svg) no-repeat center/contain;
}
@media (max-width: 768px) {
  .header__langButton::before {
    width: 5.3333333333vw;
    height: 5.3333333333vw;
  }
}

.header__langSelect {
  overflow: hidden;
  position: absolute;
  z-index: -1;
  top: min(6.9444444444vw, 100px);
  right: min(6.25vw, 90px);
  background: #fff;
  box-shadow: 0 0.3472222222vw 0.3472222222vw rgba(0, 0, 0, 0.1);
  max-height: 0;
  opacity: 0;
  transition: max-height 0.3s, opacity 0.3s;
}
@media (max-width: 768px) {
  .header__langSelect {
    top: 17.0666666667vw;
    right: 0;
    width: 100%;
    box-shadow: 0 1.3333333333vw 1.3333333333vw rgba(0, 0, 0, 0.1);
  }
}
.header__langSelect a {
  display: block;
  padding: min(1.3888888889vw, 20px);
  font-size: min(0.9722222222vw, 14px);
  font-weight: 500;
  line-height: 1;
}
@media (max-width: 768px) {
  .header__langSelect a {
    padding: 5.3333333333vw;
    font-size: 3.7333333333vw;
  }
}
.header__langSelect a:hover {
  color: #000;
  background: #F4E802;
}
.header__langSelect a[target=_blank]::after {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  margin: 0 0 -0.2em 0.5em;
  background: url(../images/ico_elink_b.svg) no-repeat center/contain;
}

.header__langSelect.is-open {
  max-height: min(20.8333333333vw, 300px);
  opacity: 1;
}
@media (max-width: 768px) {
  .header__langSelect.is-open {
    max-height: 80vw;
  }
}

/* フッター
----------------------------------------*/
.footer {
  padding: min(5.5555555556vw, 80px) 0;
  color: #fff;
  background: #000;
}
@media (max-width: 768px) {
  .footer {
    padding: 10.6666666667vw 0;
  }
}

.footer__copyright {
  font-size: min(0.8333333333vw, 12px);
  font-weight: bold;
  line-height: 1.4;
  text-align: center;
}
@media (max-width: 768px) {
  .footer__copyright {
    font-size: 3.2vw;
  }
}

/*----------------------------------------
Main Contents
----------------------------------------*/
.section-title h3 {
  font-size: 3.3333333333vw;
  font-weight: bold;
  line-height: 1.4;
}
@media (max-width: 768px) {
  .section-title h3 {
    font-size: 8vw;
  }
}
.section-title p {
  margin-top: 0.6944444444vw;
  font-size: 1.3888888889vw;
  font-weight: bold;
  line-height: 1.4;
}
@media (max-width: 768px) {
  .section-title p {
    margin-top: 2.6666666667vw;
    font-size: 5.3333333333vw;
  }
}

.base-text {
  font-size: 1.1111111111vw;
  font-weight: normal;
  line-height: 2.2;
}
@media (max-width: 768px) {
  .base-text {
    font-size: 3.7333333333vw;
  }
}

/* メインビジュアル
----------------------------------------*/
.mv {
  position: relative;
  z-index: 0;
  height: 56.25vw;
  max-height: calc(100vh - min(6.9444444444vw, 100px));
}
@media (max-width: 768px) {
  .mv {
    height: calc(100vh - 17.0666666667vw);
    max-height: none;
  }
}

.mv__bg {
  position: absolute;
  z-index: -1;
  inset: 0;
}
.mv__bg .swiper-fade .swiper-slide {
  transition-property: opacity !important;
}
.mv__bg .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 8s linear;
}
.mv__bg .swiper-slide-active img {
  transform: scale(1.1);
}
.mv__bg .swiper-horizontal > .swiper-pagination-bullets,
.mv__bg .swiper-pagination-bullets.swiper-pagination-horizontal,
.mv__bg .swiper-pagination-custom,
.mv__bg .swiper-pagination-fraction {
  position: absolute;
  bottom: 2.0833333333vw;
  left: initial;
  right: 2.0833333333vw;
  width: auto;
  font-size: 0;
}
@media (max-width: 768px) {
  .mv__bg .swiper-horizontal > .swiper-pagination-bullets,
  .mv__bg .swiper-pagination-bullets.swiper-pagination-horizontal,
  .mv__bg .swiper-pagination-custom,
  .mv__bg .swiper-pagination-fraction {
    bottom: 4vw;
    right: 4vw;
    transform: rotate(90deg);
    transform-origin: right bottom;
  }
}
.mv__bg .swiper-pagination-bullet {
  position: relative;
  width: 3.4722222222vw;
  height: 0.1388888889vw;
  border-radius: 0;
  background: #fff;
  opacity: 1;
}
@media (max-width: 768px) {
  .mv__bg .swiper-pagination-bullet {
    width: 13.3333333333vw;
    height: 0.5333333333vw;
  }
}
.mv__bg .swiper-pagination-bullet::before {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: #F4E802;
}
.mv__bg .swiper-pagination-bullet-active::before {
  animation: paginationActive 6s linear forwards;
}
@keyframes paginationActive {
  100% {
    width: 100%;
  }
}

.mv__contents {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  width: 100%;
  height: 100%;
  color: #fff;
}

.mv__copy {
  font-size: 5vw;
  font-weight: bold;
  line-height: 1.1;
}
@media (max-width: 768px) {
  .mv__copy {
    font-size: 10.6666666667vw;
  }
}

.mv__caption {
  margin: 2.2916666667vw 0;
}
@media (max-width: 768px) {
  .mv__caption {
    margin: 10.6666666667vw 0;
  }
}

.mv__captionText {
  height: 0;
  display: flex;
  align-items: center;
  gap: 1.3888888889vw;
  font-size: 0.8333333333vw;
  line-height: 1.1;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s, visibility 1s;
}
@media (max-width: 768px) {
  .mv__captionText {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2.6666666667vw;
    font-size: 3.2vw;
  }
}
.mv__captionText span {
  flex-shrink: 0;
  font-weight: bold;
}
.mv__captionText.is-active {
  visibility: visible;
  opacity: 1;
}

/* Fukuoka Smart Travel Guideとは
----------------------------------------*/
.about {
  display: flex;
}
@media (max-width: 768px) {
  .about {
    flex-direction: column;
    margin: 17.0666666667vw 0;
  }
}

.about__img {
  flex-shrink: 0;
  width: 31.25vw;
  margin-left: -6.25vw;
}
@media (max-width: 768px) {
  .about__img {
    position: relative;
    margin-top: 8.5333333333vw;
    margin-left: 0;
    margin-right: calc(50% - 50vw);
    width: 100%;
  }
}
.about__img::before {
  display: block;
  content: "";
  width: 100%;
  height: 4.1666666667vw;
  background: #F4E802;
}
@media (max-width: 768px) {
  .about__img::before {
    position: absolute;
    top: 0;
    left: 0;
    translate: -100% 0;
    width: 6.25vw;
    height: 100%;
  }
}

.about__body {
  margin: 4.1666666667vw 0 0 6.25vw;
}
@media (max-width: 768px) {
  .about__body {
    display: contents;
  }
}

.about__heading {
  font-size: 3.3333333333vw;
  font-weight: bold;
  line-height: 1.6;
}
@media (max-width: 768px) {
  .about__heading {
    order: -1;
    font-size: 8vw;
  }
}

.about__text {
  margin-top: 4.1666666667vw;
}
@media (max-width: 768px) {
  .about__text {
    margin-top: 8.5333333333vw;
  }
}

/* Smart Travel
----------------------------------------*/
.travel {
  position: relative;
  margin: 4.1666666667vw 0;
  scroll-margin-top: min(11.1111111111vw, 160px);
}
@media (max-width: 768px) {
  .travel {
    margin: 17.0666666667vw 0 12.8vw;
    scroll-margin-top: 34.1333333333vw;
  }
}
.travel::after {
  position: absolute;
  top: -10.4166666667vw;
  right: 0;
  content: "";
  width: 10.4166666667vw;
  height: 17.0833333333vw;
  background: url(../images/illust_walk.png) no-repeat center/contain;
}
@media (max-width: 768px) {
  .travel::after {
    width: 26.6666666667vw;
    height: 43.7333333333vw;
    display: none;
  }
}

.travel__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6.25vw;
  margin-top: 4.1666666667vw;
}
@media (max-width: 768px) {
  .travel__grid {
    grid-template-columns: none;
    gap: 12.8vw;
    margin-top: 8.5333333333vw;
  }
}

.travel__title {
  display: inline-block;
  padding: 0.6944444444vw 1.25vw;
  font-size: 1.25vw;
  font-weight: bold;
  line-height: 1.2;
  background: #F4E802;
}
@media (max-width: 768px) {
  .travel__title {
    padding: 2.6666666667vw 4.2666666667vw;
    font-size: 4.2666666667vw;
  }
}

.travel__body {
  display: flex;
  align-items: flex-start;
  margin-top: 2.0833333333vw;
  gap: 2.0833333333vw;
}
@media (max-width: 768px) {
  .travel__body {
    margin-top: 4.2666666667vw;
    gap: 4.2666666667vw;
  }
}

.travel__catch {
  flex-shrink: 0;
  width: 6.25vw;
}
@media (max-width: 768px) {
  .travel__catch {
    width: 24vw;
  }
}

/* タッチ決済
----------------------------------------*/
.transportation {
  margin: 4.1666666667vw 0 6.9444444444vw;
  padding: 2.7777777778vw 4.1666666667vw;
  display: flex;
  align-items: center;
  gap: 2.0833333333vw;
  color: #fff;
  background: #000 url(../images/smart_train.webp) no-repeat right center/auto 100%;
}
@media (max-width: 768px) {
  .transportation {
    margin: 12.8vw 0 17.0666666667vw;
    padding: 8.5333333333vw 4.2666666667vw 50.9333333333vw;
    gap: 8.5333333333vw;
    flex-direction: column;
    background-image: url(../images/smart_train_sp@2x.webp);
    background-position: center bottom;
    background-size: 100% auto;
  }
}

.transportation__img {
  flex-shrink: 0;
  width: 10.4166666667vw;
}
@media (max-width: 768px) {
  .transportation__img {
    width: 40vw;
  }
}

.transportation__body {
  max-width: 52.0833333333vw;
}
@media (max-width: 768px) {
  .transportation__body {
    max-width: none;
  }
}

.transportation__title {
  font-size: 2.0833333333vw;
  font-weight: bold;
  line-height: 1.4;
}
@media (max-width: 768px) {
  .transportation__title {
    font-size: 6.4vw;
    text-align: center;
  }
}

.transportation__text {
  margin-top: 1.3888888889vw;
  font-size: 1.1111111111vw;
  line-height: 2.2;
}
@media (max-width: 768px) {
  .transportation__text {
    margin-top: 4.2666666667vw;
    font-size: 3.7333333333vw;
  }
}

.transportation__link {
  margin-top: 1.3888888889vw;
  font-size: 0.9722222222vw;
  font-weight: bold;
  line-height: 1.2;
}
@media (max-width: 768px) {
  .transportation__link {
    margin-top: 4.2666666667vw;
    font-size: 3.7333333333vw;
    line-height: 1.6;
  }
}
.transportation__link a {
  text-decoration: underline;
  vertical-align: middle;
}
.transportation__link a i {
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  margin-left: 0.5em;
  vertical-align: middle;
}
.transportation__link a i svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

/* Respect Tips
----------------------------------------*/
.guide {
  margin: 6.9444444444vw 0 32.0833333333vw;
  padding: 6.9444444444vw;
  color: #fff;
  background: #000;
  scroll-margin-top: min(6.9444444444vw, 100px);
}
@media (max-width: 768px) {
  .guide {
    margin: 17.0666666667vw 0 32.2666666667vw;
    padding: 17.0666666667vw 0;
    scroll-margin-top: 17.0666666667vw;
  }
}

.guide__head {
  display: grid;
  grid-template-columns: 1fr 2fr;
}
@media (max-width: 768px) {
  .guide__head {
    display: block;
  }
}

.guide__text {
  grid-column: 2/3;
  font-size: 1.1111111111vw;
  line-height: 2;
}
@media (max-width: 768px) {
  .guide__text {
    margin-top: 8.5333333333vw;
    font-size: 3.7333333333vw;
  }
}

.guide__grid {
  counter-reset: label;
  margin-top: 6.9444444444vw;
  margin-right: calc(50% - 50vw);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  box-shadow: 0 0 0.6944444444vw rgba(0, 0, 0, 0.2);
}
@media (max-width: 768px) {
  .guide__grid {
    margin-top: 8.5333333333vw;
    grid-template-columns: repeat(2, 1fr);
  }
}

.guide__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4.5138888889vw 4.1666666667vw;
  color: #000;
  background: #fff;
  border-right: 0.0694444444vw solid rgba(0, 0, 0, 0.15);
  border-bottom: 0.0694444444vw solid rgba(0, 0, 0, 0.15);
}
@media (max-width: 768px) {
  .guide__item {
    padding: 8.5333333333vw 4.2666666667vw;
    border-right-width: 0.2666666667vw;
    border-bottom-width: 0.2666666667vw;
  }
}
.guide__item::before {
  position: absolute;
  top: 0;
  left: 0;
  counter-increment: label;
  content: counter(label);
  width: 8.3333333333vw;
  height: 8.3333333333vw;
  padding: 1.3888888889vw 1.6666666667vw;
  font-size: 2.7777777778vw;
  font-weight: 300;
  line-height: 1.1;
  background: #F4E802;
  clip-path: polygon(0 0, 0% 100%, 100% 0);
}
@media (max-width: 768px) {
  .guide__item::before {
    width: 12.8vw;
    height: 12.8vw;
    padding: 2.1333333333vw;
    font-size: 4.8vw;
  }
}

.guide__img {
  width: 12.5vw;
}
@media (max-width: 768px) {
  .guide__img {
    width: 24vw;
  }
}

.guide__title {
  margin: 2.0833333333vw 0 1.3888888889vw;
  font-size: 1.6666666667vw;
  font-weight: bold;
  line-height: 1.2;
  text-align: center;
}
@media (max-width: 768px) {
  .guide__title {
    margin: 1.5em 0 1em;
    font-size: 4.2666666667vw;
  }
}

.guide__item .base-text {
  flex-grow: 1;
}

.guide__button {
  margin-top: 2.0833333333vw;
  display: inline-block;
  padding: 0.8333333333vw 1.3888888889vw 0.5555555556vw;
  width: 10.4166666667vw;
  font-family: "Epilogue", sans-serif;
  font-size: 1.1111111111vw;
  font-weight: bold;
  line-height: 1.25;
  text-align: center;
  color: #fff;
  background: #000;
  transition: color 0.3s, background-color 0.3s;
}
@media (max-width: 768px) {
  .guide__button {
    margin-top: 4.2666666667vw;
    padding: 3.2vw 5.3333333333vw 2.1333333333vw;
    width: 100%;
    font-size: 3.7333333333vw;
  }
}
.guide__button:hover {
  color: #000;
  background: #F4E802;
}

.guide__video {
  width: 100%;
  max-width: 1000px;
  aspect-ratio: 16/9;
  margin: 6.9444444444vw auto -32.0833333333vw;
}
@media (max-width: 768px) {
  .guide__video {
    margin: 17.0666666667vw auto -32.2666666667vw;
  }
}
.guide__video iframe {
  width: 100%;
  height: 100%;
}

/*  モーダル
----------------------------------------*/
.modal {
  position: fixed;
  inset: 0;
  margin: auto;
  max-width: 79.1666666667vw;
  max-height: calc(100vh - 8.3333333333vw);
  border-radius: 0.6944444444vw;
  background: #fff;
  border: none;
  opacity: 0;
  scale: 0.6;
  transition: all 0.3s allow-discrete;
}
@media (max-width: 768px) {
  .modal {
    max-width: 87.5%;
    max-height: calc(100vh - 21.3333333333vw);
    border-radius: 2.6666666667vw;
  }
}
.modal[open] {
  opacity: 1;
  scale: 1;
}
@starting-style {
  .modal[open] {
    opacity: 0;
    scale: 0.6;
  }
}

.modal::backdrop {
  background: rgba(0, 0, 0, 0.8);
  opacity: 0;
  transition: display 0.3s allow-discrete, opacity 0.3s;
}

.modal[open]::backdrop {
  opacity: 1;
}
@starting-style {
  .modal[open]::backdrop {
    opacity: 0;
  }
}

.modal__slide {
  margin: 0 0 4.1666666667vw;
  padding: 8.3333333333vw 8.3333333333vw 0;
  display: flex;
  flex-direction: column;
  gap: 4.1666666667vw;
}
@media (max-width: 768px) {
  .modal__slide {
    margin: 0 0 6.4vw;
    padding: 4.2666666667vw 6.4vw 0;
    gap: 6.4vw;
  }
}

.modal__section {
  position: absolute;
  top: 8.3333333333vw;
  left: 3.4722222222vw;
  font-size: 1.1111111111vw;
  font-weight: bold;
  line-height: 1.2;
  writing-mode: sideways-lr;
  white-space: nowrap;
}
@media (max-width: 768px) {
  .modal__section {
    position: static;
    font-size: 3.7333333333vw;
    writing-mode: horizontal-tb;
    text-align: center;
  }
}
.modal__section span {
  color: #F4E802;
}

.modal__label {
  position: absolute;
  top: 0;
  left: 0;
  width: 8.3333333333vw;
  height: 8.3333333333vw;
  padding: 1.3888888889vw 1.6666666667vw;
  font-size: 2.7777777778vw;
  font-weight: 300;
  line-height: 1.1;
  background: #F4E802;
  clip-path: polygon(0 0, 0% 100%, 100% 0);
}
@media (max-width: 768px) {
  .modal__label {
    width: 12.8vw;
    height: 12.8vw;
    padding: 2.1333333333vw;
    font-size: 4.8vw;
  }
}

.modal__body {
  display: flex;
  align-items: flex-start;
  gap: 4.1666666667vw;
}
@media (max-width: 768px) {
  .modal__body {
    flex-direction: column;
    gap: 4.2666666667vw;
  }
}

.modal__contents {
  flex-grow: 1;
}
@media (max-width: 768px) {
  .modal__contents {
    display: contents;
  }
}
.modal__contents .base-text {
  margin-top: 2.7777777778vw;
}
@media (max-width: 768px) {
  .modal__contents .base-text {
    margin-top: 0;
  }
}

.modal__title {
  font-size: 2.2222222222vw;
  font-weight: bold;
  line-height: 1.2;
}
@media (max-width: 768px) {
  .modal__title {
    order: -2;
    font-size: 5.3333333333vw;
  }
}

.modal__img {
  flex-shrink: 0;
  width: 16.6666666667vw;
}
@media (max-width: 768px) {
  .modal__img {
    order: -1;
    width: 100%;
  }
  .modal__img img {
    max-width: none;
    width: 100%;
  }
}

.modal__nav {
  margin: 4.1666666667vw 0 0;
  padding: 0 8.3333333333vw 8.3333333333vw;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: "prev close next";
  gap: 2.7777777778vw;
}
@media (max-width: 768px) {
  .modal__nav {
    margin: 6.4vw 0 0;
    padding: 0 6.4vw 6.4vw;
    gap: 5.3333333333vw;
  }
}

.modal__prev,
.modal__next {
  display: flex;
  align-items: center;
  gap: 0.6944444444vw;
  font-family: "Epilogue", sans-serif;
  font-size: 1.1111111111vw;
}
@media (max-width: 768px) {
  .modal__prev,
  .modal__next {
    gap: 1.3333333333vw;
    font-size: 3.7333333333vw;
  }
}
.modal__prev.is-disabled,
.modal__next.is-disabled {
  visibility: hidden;
  opacity: 0;
}

.modal__prev {
  grid-area: prev;
  margin-right: auto;
  justify-content: flex-start;
}
.modal__prev::before {
  display: inline-block;
  content: "";
  width: 1.3888888889vw;
  height: 1.3888888889vw;
  background: url(../images/ico_arrow_back.svg) no-repeat center/contain;
  opacity: inherit;
}
@media (max-width: 768px) {
  .modal__prev::before {
    width: 5.3333333333vw;
    height: 5.3333333333vw;
  }
}

.modal__next {
  grid-area: next;
  margin-left: auto;
  justify-content: flex-end;
}
.modal__next::after {
  display: inline-block;
  content: "";
  width: 1.3888888889vw;
  height: 1.3888888889vw;
  background: url(../images/ico_arrow_next.svg) no-repeat center/contain;
  opacity: inherit;
}
@media (max-width: 768px) {
  .modal__next::after {
    width: 5.3333333333vw;
    height: 5.3333333333vw;
  }
}

.modal__close {
  width: 10.4166666667vw;
  padding: 0.8333333333vw 1.5277777778vw 0.6944444444vw;
  border: 0.0694444444vw solid;
  border-radius: 100vmax;
  font-family: "Epilogue", sans-serif;
  font-size: 1.1111111111vw;
  line-height: 1;
  text-align: center;
  background: none;
}
@media (max-width: 768px) {
  .modal__close {
    width: 24vw;
    padding: 3.2vw 5.3333333333vw 2.6666666667vw;
    font-size: 3.7333333333vw;
  }
}

/* クイズ（モーダル内コンテンツ）
----------------------------------------*/
.quiz {
  display: flex;
  align-items: flex-start;
  gap: 3.8194444444vw;
  padding: 4.0972222222vw;
  border-radius: 0.6944444444vw;
  border: 0.0694444444vw solid rgba(0, 0, 0, 0.1);
}
@media (max-width: 768px) {
  .quiz {
    flex-direction: column;
    align-items: stretch;
    gap: 4.2666666667vw;
    padding: 6.1333333333vw 4vw;
    border-radius: 2.6666666667vw;
    border-width: 0.2666666667vw;
  }
}

.quiz__heading {
  font-size: 2.2222222222vw;
  font-weight: 300;
  line-height: 1;
}
@media (max-width: 768px) {
  .quiz__heading {
    font-size: 5.3333333333vw;
    text-align: center;
  }
}

.quiz__body {
  flex-grow: 1;
}

.quiz__title {
  font-size: 1.3888888889vw;
  font-weight: bold;
  line-height: 1.2;
}
@media (max-width: 768px) {
  .quiz__title {
    font-size: 4.2666666667vw;
  }
}

.quiz__questionList {
  margin-top: 2.7777777778vw;
}
@media (max-width: 768px) {
  .quiz__questionList {
    margin-top: 6.4vw;
  }
}

.quiz__choice {
  display: flex;
  align-items: center;
  gap: 1.3888888889vw;
  margin-top: 1.3888888889vw;
  font-size: 1.3888888889vw;
  line-height: 1.2;
}
@media (max-width: 768px) {
  .quiz__choice {
    gap: 1em;
    margin-top: 1em;
    font-size: 4.2666666667vw;
  }
}
.quiz__choice span {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2.7777777778vw;
  height: 2.7777777778vw;
  border-radius: 50%;
  font-size: 1.1111111111vw;
  font-weight: bold;
  line-height: 1;
  text-align: center;
}
@media (max-width: 768px) {
  .quiz__choice span {
    width: 8.5333333333vw;
    height: 8.5333333333vw;
    font-size: 3.7333333333vw;
  }
}
.quiz__question .quiz__choice span {
  background: #F4E802;
}
.quiz__answer .quiz__choice span {
  background: #fff;
}

.quiz__button {
  display: block;
  margin: 2.7777777778vw auto 0 0;
  min-width: 13.8888888889vw;
  padding: 0.8333333333vw 1.3888888889vw 0.5555555556vw;
  font-family: "Epilogue", sans-serif;
  font-size: 1.1111111111vw;
  line-height: 1.2;
  text-align: center;
  color: #fff;
  background: #000;
  transition: color 0.3s, background-color 0.3s;
}
@media (max-width: 768px) {
  .quiz__button {
    margin: 6.4vw auto 0;
    min-width: 50vw;
    padding: 3.2vw 5.3333333333vw 2.1333333333vw;
    font-size: 3.7333333333vw;
  }
}
.quiz__button:hover {
  color: #000;
  background: #F4E802;
}
.quiz__button:has(+ .quiz__answer.is-active) {
  display: none;
}

.quiz__answer {
  display: none;
  margin-top: 2.7777777778vw;
  padding: 2.0833333333vw;
  border-radius: 0.6944444444vw;
  background: #F4E802;
}
@media (max-width: 768px) {
  .quiz__answer {
    margin-top: 6.4vw;
    padding: 4.2666666667vw;
    border-radius: 2.6666666667vw;
  }
}
.quiz__answer.is-active {
  display: block;
}

.quiz__text {
  margin-top: 1.3888888889vw;
  border-top: 0.0694444444vw solid rgba(0, 0, 0, 0.1);
  padding-top: 1.3194444444vw;
}
@media (max-width: 768px) {
  .quiz__text {
    margin-top: 4.2666666667vw;
    border-width: 0.2666666667vw;
    padding-top: 4vw;
  }
}

/* Smart Travel Map
----------------------------------------*/
.map {
  margin: 6.9444444444vw 0;
  padding: 0 !important;
  display: flex;
  scroll-margin-top: min(6.9444444444vw, 100px);
}
@media (max-width: 768px) {
  .map {
    margin: 17.0666666667vw 0;
    flex-direction: column;
    scroll-margin-top: 17.0666666667vw;
  }
}

.map__view {
  flex-grow: 1;
  aspect-ratio: 1050/720;
}
@media (max-width: 768px) {
  .map__view {
    width: 100%;
    margin-left: auto;
    margin-top: 0;
    aspect-ratio: 1/1.25;
  }
}
.map__view iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.map__body {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 2.7777777778vw;
  width: 27.0833333333vw;
  padding: 4.1666666667vw;
  background: #F4E802;
}
@media (max-width: 768px) {
  .map__body {
    margin-bottom: 0;
    gap: 4.2666666667vw;
    width: 100%;
    padding: 17.0666666667vw 6.25%;
  }
}

.map__pinList {
  display: flex;
  flex-wrap: wrap;
  gap: 1.3888888889vw;
}
@media (max-width: 768px) {
  .map__pinList {
    margin: 4.2666666667vw 0;
    gap: 4.2666666667vw;
  }
}

.map__pin {
  display: flex;
  align-items: center;
  gap: 0.3472222222vw;
  font-size: 0.9722222222vw;
}
@media (max-width: 768px) {
  .map__pin {
    gap: 1.3333333333vw;
    font-size: 3.7333333333vw;
  }
}
.map__pin img {
  width: 1.6666666667vw;
}
@media (max-width: 768px) {
  .map__pin img {
    width: 6.4vw;
  }
}

.map__button {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.3472222222vw;
  padding: 0.8333333333vw 1.7361111111vw;
  width: 100%;
  height: 2.7777777778vw;
  font-size: 0.9722222222vw;
  font-weight: bold;
  line-height: 1;
  text-align: center;
  color: #fff;
  background: #000;
  border: 0.0694444444vw solid #000;
  transition: color 0.3s, background-color 0.3s;
}
@media (max-width: 768px) {
  .map__button {
    gap: 1.3333333333vw;
    padding: 3.2vw 6.6666666667vw;
    width: fit-content;
    height: 10.6666666667vw;
    font-size: 3.7333333333vw;
  }
}
.map__button:hover {
  color: #000;
  background: transparent;
}
.map__button i {
  width: 1em;
  height: 1em;
}
.map__button i svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

/* ハンズフリーサービス観光サービス
----------------------------------------*/
.service {
  padding: 6.9444444444vw 0;
  color: #fff;
  background: #000;
}
@media (max-width: 768px) {
  .service {
    padding: 17.0666666667vw 0;
  }
}

.service__title {
  font-size: 1.6666666667vw;
  font-weight: bold;
  line-height: 1.6;
  text-align: center;
}
@media (max-width: 768px) {
  .service__title {
    font-size: 5.3333333333vw;
  }
}

.service__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.7777777778vw 2.0833333333vw;
  margin-top: 2.7777777778vw;
}
@media (max-width: 768px) {
  .service__grid {
    grid-template-columns: auto;
    gap: 12.8vw;
    margin-top: 8.5333333333vw;
  }
}

.service__name {
  margin-top: 1.3888888889vw;
  font-size: 1.1111111111vw;
  font-weight: bold;
  line-height: 1;
  text-decoration: underline;
}
@media (max-width: 768px) {
  .service__name {
    margin-top: 1.5em;
    font-size: 4.2666666667vw;
  }
}

.service__text {
  margin-top: 0.6944444444vw;
  font-size: 0.9722222222vw;
  line-height: 1.6;
}
@media (max-width: 768px) {
  .service__text {
    margin-top: 4.2666666667vw;
    font-size: 3.7333333333vw;
  }
}

/* 資料ダウンロード
----------------------------------------*/
.download {
  padding: 6.9444444444vw 0;
  margin-left: -2.0833333333vw;
}
@media (max-width: 768px) {
  .download {
    padding: 17.0666666667vw 0;
    margin-left: 0;
  }
}

.download__title {
  font-size: 1.6666666667vw;
  font-weight: bold;
  line-height: 1.6;
}
@media (max-width: 768px) {
  .download__title {
    font-size: 5.3333333333vw;
  }
}

.download__lead {
  margin-top: 1.3888888889vw;
}
@media (max-width: 768px) {
  .download__lead {
    margin-top: 4.2666666667vw;
  }
}

.download__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.0833333333vw;
  margin-top: 2.7777777778vw;
}
@media (max-width: 768px) {
  .download__grid {
    grid-template-columns: auto;
    gap: 6.4vw;
    margin-top: 8.5333333333vw;
  }
}

.download__item {
  padding: 2.0138888889vw;
  border: 0.0694444444vw solid rgba(0, 0, 0, 0.1);
}
@media (max-width: 768px) {
  .download__item {
    padding: 4vw;
    border-width: 0.2666666667vw;
  }
}

.download__link {
  font-size: 1.1111111111vw;
  font-weight: bold;
  line-height: 1.6;
  text-decoration: underline;
}
@media (max-width: 768px) {
  .download__link {
    font-size: 4.2666666667vw;
  }
}

.download__text {
  margin-top: 1.3888888889vw;
  font-size: 0.9722222222vw;
  line-height: 2;
}
@media (max-width: 768px) {
  .download__text {
    margin-top: 4.2666666667vw;
    font-size: 3.7333333333vw;
  }
}/*# sourceMappingURL=common.css.map */