/* ------------------------------
General Styles
--------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500&display=swap');

html {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, Arial, Helvetica, sans-serif;
  color: #222222;
  font-size: 62.5%;
  scroll-padding-top: 70px;
  box-sizing: border-box;
}

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

body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #fff;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

picture {
  max-width: 100%;
  height: auto;
  display: block;
}

main {
  display: flex;
  flex-flow: column;
  padding: 50px 0 0;
  min-height: calc(100vh - 50px);
}

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

a {
  font-size: 1.6rem;
  text-decoration: none;
  color: #222222;
  cursor: pointer;
  word-wrap: break-word;
}

dd, dt {
  cursor: pointer;
}

select {
  -webkit-appearance: none;
  /* Chrome および Safari でデフォルトスタイルを解除 */
  -moz-appearance: none;
  /* Firefox でデフォルトスタイルを解除 */
}

/* ----------------------------
メディアクエリ
------------------------------ */
/*
SPファーストで記述

幅768px以下 スマホサイズ

@media screen and (min-width:768px) and (max-width:1000px)
幅769px以上1000px以下 タブレットサイズ

@media screen and (min-width:1024px)
幅1025px以上〜 PCサイズ-- */
.sp {
  display: block !important;
}

.tab {
  display: none !important;
}

.sp-tab {
  display: block !important;
}

.tab-pc {
  display: none !important;
}

.pc {
  display: none !important;
}

@media screen and (min-width:768px) {
  .sp {
    display: none !important;
  }

  .tab {
    display: block !important;
  }

  .sp-tab {
    display: block !important;
  }

  .tab-pc {
    display: block !important;
  }

  .pc {
    display: none !important;
  }
}

@media screen and (min-width:1024px) {
  .sp {
    display: none !important;
  }

  .tab {
    display: none !important;
  }

  .sp-tab {
    display: none !important;
  }

  .tab-pc {
    display: block !important;
  }

  .pc {
    display: block !important;
  }
}

/* ----------------------------
font
------------------------------ */
h1, h2, h3, h4, h5, p {
  margin: 0;
  padding: 0;
}

p {
  font-size: 1.6rem;
  line-height: 1.75;
  font-weight: 400;
}

p a {
  text-decoration: underline;
  color: #006E47;
  cursor: pointer;
  word-wrap: break-word;
}

/* ------------------------------
Transition elsements
------------------------------ */
a, button {
  -webkit-transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
  -moz-transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
  -o-transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
  transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
}

.button:hover {
  cursor: pointer !important;
}

a:hover {
  opacity: 0.7;
  cursor: pointer !important;
}

/* ------------------------------
スクロールで表示
------------------------------ */
/* ふわっと */
.fadeIn-content {
  opacity: 0;
}

.fadeIn {
  animation-name: fadeInAnime;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeInAnime {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* ------------------------------
loading
--------------------------------- */
.no-scroll {
  overflow: hidden;
  height: 100vh;
}

#loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #006E47;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 1;
}

.loading-wrapper {
  width: calc(100% - 160px);
  max-width: 320px;
}

.loading-circles {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 16px auto 0;
  --step-count: 5;
  --duration: 1.2s;
  animation: loading-animation var(--duration) steps(var(--step-count)) infinite;
}

.loading-circles div {
  width: 12px;
  height: 12px;
  background: #fff;
  border-radius: 50%;
  opacity: 0.4;
  transition: opacity 0.2s;
}

.loading-circles div.active {
  opacity: 1;
}

/* ----------------------------
button
------------------------------ */
button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  appearance: none;
  border-radius: 0;
}

.button {
  display: block;
  padding: 20px 16px;
  margin: 0 auto;
  width: calc(100% - 40px);
  max-width: 440px;
  max-height: 64px;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, Arial, Helvetica, sans-serif;
  font-size: clamp(1.2rem, 4.1vw, 1.6rem);
  line-height: 1;
  font-weight: 700;
  text-align: center;
}

.button:hover {
  opacity: 1;
}

.primary-btn,
.external-btn,
.back-btn,
.more-btn {
  background: #fff;
  color: #006E47;
  border: 2px solid #006E47;
  border-radius: 4px;
  position: relative;
}

.primary-btn:hover,
.external-btn:hover,
.back-btn:hover,
.more-btn:hover {
  background: #E7ECE3;
}

.primary-btn span,
.external-btn span,
.back-btn span,
.more-btn span {
  display: inline-block;
  width: 100%;
  padding: 0 8px 0 0;

}

/* -- 右矢印ボタン 戻るボタン　ページ遷移 -- */
.primary-btn::after,
.back-btn::after {
  display: block;
  content: '';
  width: 20px;
  height: 20px;
  position: absolute;
  top: 35%;
  right: 8px;
  background: url(../images/arrow_right-g.svg) no-repeat top 50% left 50% / 20px 20px;
  transition: 0.5s ease 100ms;
}

.primary-btn:hover::after,
.back-btn:hover::after {
  right: 0px;
}

/* -- リンクボタン 外部リンク -- */
.external-btn::after {
  display: block;
  content: '';
  width: 20px;
  height: 20px;
  position: absolute;
  top: 35%;
  right: 8px;
  background: url(../images/icon-link-g.svg) no-repeat top 50% left 50% / 20px 20px;
}

/* -- 下矢印ボタン もっと見るボタン　コンテンツ読み込み -- */
.more-btn::after {
  display: block;
  content: '';
  width: 20px;
  height: 20px;
  position: absolute;
  top: 35%;
  right: 8px;
  background: url(../images/arrow_bottom-g.svg) no-repeat top 50% left 50% / 20px 20px;
  transition: 0.5s ease 80ms;
}

.more-btn:hover::after {
  top: 45%;
}

/* -- カートボタン -- */
.cart-btn {
  background: #BBA53D;
  color: #fff;
  border-radius: 4px;
  position: relative;
}

.cart-btn span {
  width: fit-content;
  padding-left: 34px;
  background: url(../images/icon-cart.svg) no-repeat top 50% left 0 / 26px 24px;
}

.cart-btn ::after {
  display: block;
  content: '';
  width: 20px;
  height: 20px;
  background: url(../images/arrow_right-w.svg) no-repeat top 50% left 50% / 20px 20px;
  position: absolute;
  top: 30%;
  right: 8px;
}


/* -- 翻訳ボタン 翻訳前 -- */
.translate-btn {
  background-color: #006E47;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1ch;
}

.translate-btn:hover {
  background-color: #004D32;
}

.translate-btn span {
  display: block;
  background: url(../images/icon-lang.svg)top 9px center / 22px 22px no-repeat;
  width: 56px;
  height: 56px;
  position: relative;
}

.translate-btn span::after {
  content: 'lang';
  font-size: 1.2rem;
  line-height: 1;
  font-weight: 700;
  color: #fff;
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* -- 翻訳ボタン 翻訳前 -- */
.translate-btn.clear span {
  background: url(../images/icon-lang-clear.svg)top 9px center / 31px 22px no-repeat;
}

.translate-btn.clear span::after {
  content: 'clear';
}

/* -- 追従ボタン -- */
.sticky-ticket-button {
  display: block;
  opacity: 0;
  width: fit-content;
  font-size: 1.4rem;
  font-weight: 700;
  color: #006E47;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  text-align: center;
  padding: 10px 16px;
  border: 4px solid #006E47;
  border-right: none;
  background: #fff;
  border-radius: 8px 0 0 8px;
  position: fixed;
  bottom: 32px;
  right: 0px;
  z-index: 10;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.sticky-ticket-button.display {
  opacity: 1;
}

.sticky-ticket-button.display:hover {
  background: #F5FFE6;
}

.sticky-ticket-button span {
  position: relative;
}

.sticky-ticket-button span::before {
  opacity: 1;
  display: block;
  content: '';
  width: 48px;
  height: 48px;
  position: absolute;
  top: -59px;
  right: -16px;
  background: no-repeat url('../images/img-character-sticky-button.svg');
}

@media screen and (min-width:768px) {
  .button {
    display: block;
    padding: 23px 16px;
    font-size: 1.8rem;
  }

  /* -- 追従ボタン -- */
  .sticky-ticket-button {
    font-size: 2rem;
    padding: 20px 24px;
    bottom: 40px;
  }

  .sticky-ticket-button span::before {
    width: 72px;
    height: 72px;
    top: -91px;
    right: -19px;
  }
}

@media screen and (min-width:1024px) {

  /* -- 右矢印ボタン ページ遷移 -- */
  .primary-btn,
  .external-btn,
  .back-btn {
    width: 440px;
  }

  /* -- 翻訳ボタン 翻訳前 -- */
  .translate-btn {
    width: 50px;
    height: 50px;
  }

  .translate-btn span {
    background: url(../images/icon-lang.svg)top 8px center / 20px 20px no-repeat;
    width: 50px;
    height: 50px;
  }

  .translate-btn span::after {
    bottom: 1px;
  }

  /* -- 翻訳ボタン 翻訳前 -- */
  .translate-btn.clear span {
    background: url(../images/icon-lang-clear.svg)top 8px center / 28px 20px no-repeat;
  }
}

/* ------------------------------
ハンバーガーメニューボタン
------------------------------ */
.openbtn {
  position: relative;
  cursor: pointer;
  width: 56px;
  height: 56px;
  z-index: 101;
  margin: 0;
  float: right;
  background-color: #BBA53D;
}

.openbtn span {
  display: inline-block;
  transition: all .6s;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  width: 53.6%;
  height: 3px;
  border-radius: 3px;
  background: #fff;
}

.openbtn span:nth-of-type(1) {
  top: 30%;
}

.openbtn span:nth-of-type(2) {
  top: 50%;
}

.openbtn span:nth-of-type(3) {
  top: 68%;
}

.is-menu-active .openbtn span:nth-of-type(1) {
  top: 35%;
  left: 20%;
  transform: translateY(6px) rotate(-45deg);
  width: 60%;
}

.is-menu-active .openbtn span:nth-of-type(2) {
  opacity: 0;
}

.is-menu-active .openbtn span:nth-of-type(3) {
  top: 57%;
  left: 20%;
  transform: translateY(-6px) rotate(45deg);
  width: 60%;
}

body.is-menu-active {
  overflow: hidden;
}

@media screen and (min-width:1024px) {
  .openbtn {
    width: 50px;
    height: 50px;
  }
}

/* ----------------------------
header
------------------------------ */
header {
  width: 100%;
  z-index: 100;
  position: fixed;
  border-bottom: 1px solid #E7ECE3;
}

header .header-wrapper {
  background: #fff;
  display: flex;
  justify-content: space-between;
}

header .header-wrapper {
  justify-content: flex-end;
}

header .header-wrapper .header-logo {
  width: 56px;
  height: 56px;
  z-index: 2;
  background: url(../images/logo-icon.svg) no-repeat top 50% left 50% / 56px 56px;
}

header .header-wrapper.teaser .header-logo {
  background: none;
}

header .header-wrapper .header-logo {
  margin-right: auto;
}

/* -- policy header -- */
header.rules .header-wrapper .header-logo {
  background: none;
}

/* --メニューの動き　非表示状態（デフォルト）-- */
header .header-wrapper .menu {
  position: absolute;
  top: 0;
  z-index: 2;
  width: 100%;
  height: calc(100dvh - 56px);
  transform: translateX(200vw);
  transition: all 0.6s ease;
  margin: 56px auto 0;
  pointer-events: none;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* iOS対応 */
}

/* --メニューの動き　表示状態-- */
header .header-wrapper .menu.is-active {
  transform: translateX(0);
  right: 0;
  pointer-events: auto;
}

/* --メニュー内表示-- */
.menu .menu-wrapper {
  background: #fff;
  padding: 16px 16px 80px;
  border-top: 1px solid #E7ECE3;
}

/* --メニュー内表示 エリアガイド-- */
.menu .menu-wrapper .map-box {
  background: #F5FFE6;
  padding: 24px 16px;
  border-radius: 8px;
}

.menu .menu-wrapper .map-box h1 {
  font-size: 2.4rem;
  line-height: 1.5;
  font-weight: 700;
  color: #006E47;
  text-align: center;
  margin: 0 auto 32px;
  padding-bottom: 12px;
  position: relative;
}

.menu .menu-wrapper .map-box h1::after {
  display: block;
  content: '';
  width: 52px;
  height: 4px;
  background: #BBA53D;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, -50%);
}

.menu .menu-wrapper .map-box .area-map {
  width: 75.4%;
  max-width: 540px;
  height: auto;
  margin: 0 auto;
}

.menu .menu-wrapper .map-box .area-map-btn-wrapper {
  width: calc(100% - 16px);
  max-width: 800px;
  margin: 24px auto 0;
}

/* -- エリアガイド マップボタン共通-- */
.map-box .area-map-btn-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.map-box .area-map-btn-wrapper .area-map-btn {
  width: calc(50% - 6px);
  border-radius: 4px;
  border: 2px solid #000;
  background: #fff;
  padding: 16px 8px;
  margin: 0;
  position: relative;
}

.map-box .area-map-btn-wrapper .area-map-btn.douou {
  border: 2px solid #F76636;
}

.map-box .area-map-btn-wrapper .area-map-btn.dounan {
  border: 2px solid #BEA8E6;
}

.map-box .area-map-btn-wrapper .area-map-btn.douhoku {
  border: 2px solid #F59A30;
}

.map-box .area-map-btn-wrapper .area-map-btn.iburi {
  border: 2px solid #CF2800;
}

.map-box .area-map-btn-wrapper .area-map-btn.tokachi {
  border: 2px solid #AAD170;
}

.map-box .area-map-btn-wrapper .area-map-btn.nemuro {
  border: 2px solid #008481;
}

.map-box .area-map-btn-wrapper .area-map-btn.ohotuku {
  border: 2px solid #91C3CE;
}

.map-box .area-map-btn-wrapper .area-map-btn ::after {
  display: block;
  content: '';
  width: 20px;
  height: 20px;
  background-image: url(../images/arrow_right-w.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 15px 15px;
  border-radius: 50px;
  position: absolute;
  top: 25%;
  right: 8px;
}

.map-box .area-map-btn-wrapper .area-map-btn.douou ::after {
  background-color: #F76636;
}

.map-box .area-map-btn-wrapper .area-map-btn.dounan ::after {
  background-color: #BEA8E6;
}

.map-box .area-map-btn-wrapper .area-map-btn.douhoku ::after {
  background-color: #F59A30;
}

.map-box .area-map-btn-wrapper .area-map-btn.iburi ::after {
  background-color: #CF2800;
}

.map-box .area-map-btn-wrapper .area-map-btn.tokachi ::after {
  background-color: #AAD170;
}

.map-box .area-map-btn-wrapper .area-map-btn.nemuro ::after {
  background-color: #008481;
}

.map-box .area-map-btn-wrapper .area-map-btn.ohotuku ::after {
  background-color: #91C3CE;
}

/* --メニュー内表示 バナー-- */
.menu .menu-wrapper .bnr-box {
  width: 100%;
  max-width: 540px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin: 24px auto 0;
}

.menu .menu-wrapper .bnr-box img {
  width: 100%;
}

/* --メニュー内表示 メニューリスト-- */
.menu .menu-wrapper .menu-list {
  margin: 24px auto 0;
}

.menu .menu-wrapper .menu-list li a {
  display: block;
  width: 100%;
  padding: 16px 8px;
  border-top: solid 1px #F2F2F2;
  font-size: 1.6rem;
  line-height: 1;
  font-weight: 700;
  position: relative;
}

.menu .menu-wrapper .menu-list li:last-child a {
  border-bottom: solid 1px #F2F2F2;
}

.menu .menu-wrapper .menu-list li a::after {
  display: block;
  content: '';
  position: absolute;
  top: 20%;
  right: 0;
}

.menu .menu-wrapper .menu-list li a.menu-item::after {
  width: 24px;
  height: 24px;
  background: url(../images/arrow_right-g.svg) no-repeat top 50% left 50% / 24px 24px;
}

.menu .menu-wrapper .menu-list li a.menu-item-ex::after {
  width: 20px;
  height: 20px;
  background: url(../images/icon-link-g.svg) no-repeat top 50% left 50% / 20px 20px;
}

@media screen and (min-width:768px) {
  .menu .menu-wrapper .map-box .area-map-btn-wrapper {
    width: calc(100% - 40px);
    margin: 24px auto 0;
  }
}

@media screen and (min-width:1024px) {
  header .header-wrapper .header-logo {
    width: 50px;
    height: 50px;
    background: url(../images/logo-icon.svg) no-repeat top 50% left 50% / 50px 50px;
    padding: 0 0 0 40px;
  }

  /* --メニューの動き　表示状態-- */
  header .header-wrapper .menu {
    width: 416px;
    height: calc(100dvh - 50px);
    margin: 50px auto 0;
  }

  header .header-wrapper .menu.is-active {
    height: calc(100dvh - 50px);
    margin: 50px auto 0;
    background: #fff;
    box-shadow: 4px 8px 8px 0 #000000;
  }

  header .header-wrapper .menu .menu-wrapper .menu-list {
    margin: 24px auto 80px;
  }

  /* --メニューの動き　黒背景部分-- */
  .overlay {
    width: 100%;
    height: 100dvh;
    background: rgba(0, 0, 0, .8);
    display: block;
    height: 100%;
    left: 0;
    opacity: 0;
    pointer-events: none;
    position: fixed;
    top: 50px;
    transition: opacity .3s;
  }

  .overlay.is-active {
    opacity: 1;
    pointer-events: auto;
  }

  /* --メニュー内表示-- */
  .menu .menu-wrapper {
    padding: 0;
    position: absolute;
    right: 0;
  }

  /* --メニュー内表示 エリアガイド-- */
  .menu .menu-wrapper .map-box {
    border-radius: 0px;
  }

  .menu .menu-wrapper .map-box .area-map {
    width: 270px;
  }

  .menu .menu-wrapper .map-box .area-map-btn-wrapper {
    width: 100%;
  }

  /* -- エリアガイド マップボタン共通-- */
  .map-box .area-map-btn-wrapper {
    gap: 8px;
  }

  .map-box .area-map-btn-wrapper .area-map-btn {
    width: calc(50% - 8px);
  }

  .map-box .area-map-btn-wrapper .area-map-btn ::after {
    top: 25%;
    right: 8px;
  }

  /* --メニュー内表示 バナー-- */
  .menu .menu-wrapper .bnr-box {
    width: calc(100% - 32px);
  }

  /* --メニュー内表示 メニューリスト-- */
  .menu .menu-wrapper .menu-list {
    width: calc(100% - 32px);
  }
}

/* ----------------------------
fade-in
------------------------------ */
.fadein {
  opacity: 0;
  transform: translate(0, 0);
  transition: all 2s;
}

.fadein.scrollin {
  opacity: 1 !important;
  transform: translate(0, 0) !important;
}

/* ----------------------------
index / hero
------------------------------ */
.hero-area {
  width: 100%;
  height: 100%;
  margin: 24px auto 0;
  padding: 0 8px;
  overflow: hidden;
}

.hero-area .hero-area-wrapper {
  width: 100%;
  height: auto;
  display: grid;
  gap: 0 2%;
  grid-template-columns: 37.08% 3.60% 10.35% 5.54% 4.10% 29.34%;
  grid-template-rows: auto auto 0.3fr 0.4fr 0.3fr auto auto;
  align-items: stretch;
}

.hero-area .hero-area-wrapper>* {
  min-width: 0;
}

/* グリッド内の画像すべてに適用 */
.hero-area .hero-area-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 8px;
}

.hero-area .hero-area-wrapper .hero-img-1 {
  grid-column: 1 / 5;
  grid-row: 1;
  aspect-ratio: 235 / 100;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-area .hero-area-wrapper .hero-img-2 {
  grid-column: 6 / 7;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 3.4%;
}

.hero-area .hero-area-wrapper .hero-img-3 {
  grid-column: 6 / 7;
  grid-row: 2;
}

.hero-area .hero-area-wrapper .hero-logo {
  grid-column: 1 / 5;
  grid-row: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 3.4%;
}

.hero-area .hero-area-wrapper h1 {
  width: 100%;
  height: auto;
}

.hero-area .hero-area-wrapper .hero-img-4 {
  grid-column: 1 / 2;
  grid-row: 3 / 6;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-area .hero-area-wrapper .hero-img-4 picture {
  height: 100%;
}

.hero-area .hero-area-wrapper .hero-img-5 {
  grid-column: 3 / 7;
  grid-row: 4 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.hero-area .hero-area-wrapper .hero-img-5 .character {
  width: 25.64vw;
  height: auto;
  position: absolute;
  bottom: -20%;
  right: 4.1vw;
}

.hero-area .hero-area-wrapper .hero-img-5 .character img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-area .hero-area-wrapper .hero-txt-box {
  grid-column: 1 / 8;
  grid-row: 6;
  padding: 5% 0;
}

.hero-area .hero-area-wrapper .hero-txt-box p {
  font-size: clamp(1rem, 3.589vw, 1.8rem);
  line-height: 1.8;
  font-weight: 700;
  text-align: center;
}

.hero-area .hero-area-wrapper .hero-img-6 {
  grid-column: 1 / 4;
  grid-row: 7;
  aspect-ratio: 212 / 102;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.hero-area .hero-area-wrapper .hero-img-7 {
  grid-column: 5 / 7;
  grid-row: 7;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* グリッド内の画像を時間差で表示する */
.hero-area .hero-area-wrapper .hero-img-1 {
  opacity: 0;
  animation: fadeIn-img 1.2s ease-out 2s forwards;
}

.hero-area .hero-area-wrapper .hero-img-2 {
  opacity: 0;
  animation: fadeIn-img 1.2s ease-out 2.5s forwards;
}

.hero-area .hero-area-wrapper .hero-img-3 {
  opacity: 0;
  animation: fadeIn-img 1.2s ease-out 3s forwards;
}

.hero-area .hero-area-wrapper .hero-img-4 {
  opacity: 0;
  animation: fadeIn-img 1.2s ease-out 2s forwards;
}

.hero-area .hero-area-wrapper .hero-img-5 {
  opacity: 0;
  animation: fadeIn-img 1.2s ease-out 3s forwards;
}

.hero-area .hero-area-wrapper .hero-img-6 {
  opacity: 0;
  animation: fadeIn-img 1.2s ease-out 3s forwards;
}

.hero-area .hero-area-wrapper .hero-img-7 {
  opacity: 0;
  animation: fadeIn-img 1.2s ease-out 2s forwards;
}

.hero-area .hero-area-wrapper .character {
  opacity: 0;
  animation: fadeIn-img 1.2s ease-out 3.75s forwards;
}

.hero-area .hero-area-wrapper .hero-txt-box {
  opacity: 0;
  animation: fadeIn-img 1.2s ease-out 3s forwards;
}

@keyframes fadeIn-img {
  to {
    opacity: 1;
  }
}


@media screen and (min-width:768px) {
  .hero-area {
    padding: 0 16px;
  }

  .hero-area .hero-area-wrapper .hero-img-5 .character {
    width: 161px;
  }
}

@media screen and (min-width:1024px) {
  .hero-area {
    padding: 0 0 0 16px;
  }

  .hero-area .hero-area-wrapper {
    max-width: 1350px;
    gap: 2% 0;
    grid-template-columns: 3.32% 16.84% 3.16% 5.30% 2.77% 7.44% 8.23% 9.26% 7.44% 8.07% 23.58% 4.59%;
    grid-template-rows: auto auto auto auto;
    margin: 0 auto;
  }

  .hero-area .hero-area-wrapper .hero-img-1 {
    grid-column: 1 / 6;
    grid-row: 1;
    aspect-ratio: 397 / 170;
  }

  .hero-area .hero-area-wrapper .hero-img-2 {
    grid-column: 7 / 9;
    grid-row: 1;
    padding-left: 0;
  }

  .hero-area .hero-area-wrapper .hero-img-3 {
    grid-column: 10 / 13;
    grid-row: 1 / 4;
  }

  .hero-area .hero-area-wrapper .hero-img-3 img {
    border-radius: 8px 0 0 8px !important;
  }

  .hero-area .hero-area-wrapper .hero-logo {
    grid-column: 2 / 9;
    grid-row: 2;
    padding-left: 0;
  }

  .hero-area .hero-area-wrapper .hero-logo h1 {
    width: 36.09375vw;
    max-width: 494px;
    height: auto;
  }

  .hero-area .hero-area-wrapper .hero-img-4 {
    grid-column: 1 / 3;
    grid-row: 3 / 4;
  }

  .hero-area .hero-area-wrapper .hero-img-5 {
    grid-column: 4 / 8;
    grid-row: 3;
  }

  .hero-area .hero-area-wrapper .hero-img-5 .character {
    width: 12.58vw;
    max-width: 172px;
    height: auto;
    position: absolute;
    bottom: 0;
    right: -14vw;
  }

  .hero-area .hero-area-wrapper .hero-txt-box {
    grid-column: 5 / 11;
    grid-row: 4;
    padding: 5% 0;
  }

  .hero-area .hero-area-wrapper .hero-txt-box p {
    font-size: 1.6rem;
  }

  .hero-area .hero-area-wrapper .hero-img-6 {
    grid-column: 2 / 5;
    grid-row: 4;
    aspect-ratio: unset;
    align-items: center;
  }

  .hero-area .hero-area-wrapper .hero-img-7 {
    grid-column: 11 / 12;
    grid-row: 4;
    aspect-ratio: unset;
    justify-content: center;
  }
}

@media screen and (min-width:1350px) {
  .hero-area .hero-area-wrapper .hero-img-3 img {
    border-radius: 8px !important;
  }

  .hero-area .hero-area-wrapper .hero-img-5 .character {
    position: absolute;
    bottom: 0;
    right: -190px;
  }
}

/* ----------------------------
index / teaser
------------------------------ */
.teaser-page .hero-area .hero-area-wrapper .hero-txt-box h2 {
  width: fit-content;
  font-size: clamp(2.4rem, 8vw, 3.2rem);
  line-height: 1.2;
  font-weight: 700;
  color: #006E47;
  text-align: center;
  margin: 0 auto 16px;
  padding-bottom: 5px;
  background: linear-gradient(transparent 70%, rgba(187, 165, 61, .6) 30%);
}

.teaser-page .banner-area {
  margin: 80px auto 0;
}

@media screen and (min-width:1024px) {
  .teaser-page .banner-area {
    margin: 120px auto 0;
  }
}


/* ----------------------------
index / hero-news
------------------------------ */
.hero-news-area {
  width: 100%;
  margin: 40px auto 0;
}

.hero-news-area .hero-news-area-wrapper {
  width: calc(100% - 32px);
  max-width: 900px;
  margin: 0 auto;
}

.hero-news-area .hero-news-area-wrapper h2 {
  font-size: 2rem;
  line-height: 1.5;
  font-weight: 700;
  color: #006E47;
  padding-left: 12px;
  position: relative;
}

.hero-news-area .hero-news-area-wrapper h2::before {
  display: block;
  content: '';
  width: 4px;
  height: calc(100% - 6px);
  background: #BBA53D;
  position: absolute;
  top: 3px;
  left: 0;
}

.hero-news-area .hero-news-area-wrapper .news-headline {
  margin: 12px auto 0;
}

/* --　news共通　-- */
.news-headline {
  width: 100%;
  display: grid;
  grid-template-columns: 70px 70px 1fr;
  grid-template-rows: 20px auto;
  gap: 8px 8px;
}

.news-date {
  font-size: 1.4rem;
  line-height: 1;
  font-weight: 700;
  color: #006E47;
}

.news-headline .news-date {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.news-tag {
  display: inline-block;
  position: relative;
}

.news-headline .news-tag {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
}

.news-tag::after {
  position: absolute;
  color: #fff;
  font-size: 1.2rem;
  line-height: 1;
  width: 70px;
  padding: 5px 0;
  text-align: center;
  border-radius: 50px;
}

.news-tag.news-traffic-info::after {
  background: #CB5934;
  content: "交通情報";
}

.news-tag.news-info::after {
  background: #009963;
  content: "お知らせ";
}

.news-tag.news-topic::after {
  background: #009963;
  content: "トピック";
}

.news-headline .news-ttl {
  font-size: 1.6rem;
  line-height: 1.5;
  display: block;
  grid-column: 1 / 4;
  grid-row: 2 / 3;
  padding-right: 24px;
  position: relative;
}

.news-headline .news-ttl::after {
  display: block;
  content: '';
  width: 24px;
  height: 24px;
  background: url(../images/arrow_right-g.svg) no-repeat;
  background-size: contain;
  position: absolute;
  top: 0;
  right: 0;
}

@media screen and (min-width:768px) {
  .hero-news-area {
    margin: 40px auto 0;
  }
}

@media screen and (min-width:1024px) {
  .hero-news-area {
    margin: 80px auto 0;
  }

  .hero-news-area .hero-news-area-wrapper {
    width: 900px;
    display: flex;
    gap: 24px;
    align-items: start;
  }

  .hero-news-area .hero-news-area-wrapper h2 {
    font-size: 2.4rem;
  }

  .hero-news-area .hero-news-area-wrapper .news-headline {
    margin: 0;
  }

  /* --　news共通　-- */
  .news-headline {
    grid-template-columns: 82px 82px 1fr;
    grid-template-rows: 22px auto;
  }

  .news-tag::after {
    font-size: 1.4rem;
    width: 82px;
  }
}

/* ----------------------------
index / region-guide-area
------------------------------ */
.region-guide-area {
  width: 100%;
  margin: 24px auto 0;
  background: #F5FFE6;
  padding-top: 8.78vw;
  position: relative;
}

.region-guide-area::before {
  display: block;
  content: '';
  width: 100%;
  height: 8.78vw;
  background: #fff url(../images/region-guide-area-bg.svg) no-repeat;
  background-size: contain;
  position: absolute;
  top: 0;
  left: 0;
}

/* --map-area-- */
.map-area .map-box h2 {
  font-size: 2.4rem;
  line-height: 1.5;
  color: #006E47;
  font-weight: 700;
  text-align: center;
  margin: 24px 0 auto;
  position: relative;
  padding-bottom: 12px;
}

.map-area .map-box h2::after {
  display: block;
  content: '';
  width: 52px;
  height: 4px;
  background: #BBA53D;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, -50%);
}

.map-area .map-box .area-map {
  width: calc(100% - 32px);
  max-width: 600px;
  height: auto;
  margin: 40px auto 0;
}

.map-area .map-box .area-map-btn-wrapper {
  width: calc(100% - 32px);
  height: auto;
  margin: 32px auto 0;
}

.map-area .map-box .area-map-btn-wrapper .area-map-btn:hover {
  opacity: 1;
}

.map-area .map-box .area-map-btn-wrapper .area-map-btn ::after {
  width: 24px;
  height: 24px;
  background-image: url(../images/arrow_bottom-w.svg);
}

/* --region-date-area-- */
.region-date-area {
  width: 100%;
  max-width: 980px;
  margin: 40px auto 0;
  padding-bottom: 50px;
  background: #fff;
  border-radius: 32px 32px 0 0;
}

.region-date-area .region-date-area-wrapper {
  width: calc(100% - 32px);
  max-width: 900px;
  margin: 0 auto;
  padding-top: 40px;
}

.region-date-area .region-date-area-wrapper .region-date {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto auto auto auto;
  grid-template-areas:
    "headline"
    "region-name"
    "map"
    "txt"
    "highlights"
    "region-btn";
  margin: 0 auto 80px;
}

.region-date-area .region-date-area-wrapper .ohotuku-area {
  margin: 0 auto;
}

.region-date-area .region-date-area-wrapper .region-date .headline {
  width: calc(100% - 16px);
  font-size: clamp(1rem, 4.1vw, 1.6rem);
  line-height: 1.7;
  font-weight: 700;
  text-align: center;
  color: #fff;
  border-radius: 50px;
  margin: 0 auto 12px;
  padding: 4px 8px;
  grid-area: headline;
}

.region-date-area .region-date-area-wrapper .douou-area .headline {
  background: #F76636;
}

.region-date-area .region-date-area-wrapper .dounan-area .headline {
  background: #BEA8E6;
}

.region-date-area .region-date-area-wrapper .douhoku-area .headline {
  background: #F59A30;
}

.region-date-area .region-date-area-wrapper .iburi-area .headline {
  background: #CF2800;
}

.region-date-area .region-date-area-wrapper .tokachi-area .headline {
  background: #AAD170;
}

.region-date-area .region-date-area-wrapper .nemuro-area .headline {
  background: #008481;
}

.region-date-area .region-date-area-wrapper .ohotuku-area .headline {
  background: #91C3CE;
}

.region-date-area .region-date-area-wrapper .region-date h1 {
  font-size: 2.4rem;
  line-height: 1.5;
  font-weight: 700;
  text-align: center;
  margin: 0 auto;
  padding-left: 26px;
  position: relative;
  grid-area: region-name;
}

.region-date-area .region-date-area-wrapper .region-date h1::before {
  display: block;
  content: '';
  width: 22px;
  height: 28px;
  position: absolute;
  top: 5px;
  left: 0;
}

.region-date-area .region-date-area-wrapper .douou-area h1::before {
  background: url(../images/icon-mappin-douou.svg) center center / contain no-repeat;
}

.region-date-area .region-date-area-wrapper .dounan-area h1::before {
  background: url(../images/icon-mappin-dounan.svg) center center / contain no-repeat;
}

.region-date-area .region-date-area-wrapper .douhoku-area h1::before {
  background: url(../images/icon-mappin-douhoku.svg) center center / contain no-repeat;
}

.region-date-area .region-date-area-wrapper .iburi-area h1::before {
  background: url(../images/icon-mappin-iburi.svg) center center / contain no-repeat;
}

.region-date-area .region-date-area-wrapper .tokachi-area h1::before {
  background: url(../images/icon-mappin-tokachi.svg) center center / contain no-repeat;
}

.region-date-area .region-date-area-wrapper .nemuro-area h1::before {
  background: url(../images/icon-mappin-nemuro.svg) center center / contain no-repeat;
}

.region-date-area .region-date-area-wrapper .ohotuku-area h1::before {
  background: url(../images/icon-mappin-ohotuku.svg) center center / contain no-repeat;
}

.region-date-area .region-date-area-wrapper .region-date .map {
  width: 61.53vw;
  height: auto;
  margin: 16px auto 0;
  grid-area: map;
}

.region-date-area .region-date-area-wrapper .region-date .explanatory-txt {
  margin: 16px auto 0;
  grid-area: txt;
}

.region-date-area .region-date-area-wrapper .region-date .highlights {
  width: 100%;
  margin: 32px auto 0;
  grid-area: highlights;
}

.region-date-area .region-date-area-wrapper .region-date .highlights h2 {
  font-size: 1.8rem;
  line-height: 1.5;
  font-weight: 700;
  padding: 3px 0 3px 12px;
  position: relative;
}

.region-date-area .region-date-area-wrapper .region-date .highlights h2::before {
  content: '';
  display: block;
  width: 4px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.region-date-area .region-date-area-wrapper .douou-area .highlights h2::before {
  background: #F76636;
}

.region-date-area .region-date-area-wrapper .dounan-area .highlights h2::before {
  background: #BEA8E6;
}

.region-date-area .region-date-area-wrapper .douhoku-area .highlights h2::before {
  background: #F59A30;
}

.region-date-area .region-date-area-wrapper .iburi-area .highlights h2::before {
  background: #CF2800;
}

.region-date-area .region-date-area-wrapper .tokachi-area .highlights h2::before {
  background: #AAD170;
}

.region-date-area .region-date-area-wrapper .nemuro-area .highlights h2::before {
  background: #008481;
}

.region-date-area .region-date-area-wrapper .ohotuku-area .highlights h2::before {
  background: #91C3CE;
}

.region-date-area .region-date-area-wrapper .region-date .highlights h2+.highlights-cnt {
  margin: 20px auto 0;
}

.region-date-area .region-date-area-wrapper .region-date .highlights .highlights-cnt {
  margin: 32px auto 0;
}

.region-date-area .region-date-area-wrapper .region-date .highlights h3 {
  font-size: 1.6rem;
  line-height: 1.5;
  font-weight: 700;
  color: #767676;
  margin: 0 0 16px;
}

.region-date-area .region-date-area-wrapper .region-date .highlights h3 span {
  font-size: 1.2rem;
  font-weight: 400;
  padding-left: 8px;
}

.region-date-area .region-date-area-wrapper .region-date .highlights .highlights-cnt ul {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.region-date-area .region-date-area-wrapper .region-date .highlights .highlights-cnt ul li {
  display: block;
  width: calc((100% - 32px) / 3);
}

.region-date-area .region-date-area-wrapper .region-date .highlights .highlights-cnt ul li picture {
  aspect-ratio: 27 / 20;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}


.region-date-area .region-date-area-wrapper .region-date .highlights .highlights-cnt ul li img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.region-date-area .region-date-area-wrapper .region-date .highlights .highlights-cnt ul li p {
  font-size: 1.2rem;
  line-height: 1.5;
  text-align: center;
  margin: 8px auto 0;
}

.region-date-area .region-date-area-wrapper .region-date .region-btn {
  max-width: 330px;
  background: #fff;
  box-shadow: 0px 4px 0 0 #D9D9D9;
  margin: 40px auto 0;
  padding: 20px 32px 20px 16px;
  border-radius: 4px;
  grid-area: region-btn;
  position: relative;
}

.region-date-area .region-date-area-wrapper .region-date .region-btn:hover {
  opacity: 1;
  box-shadow: none;
}

.region-date-area .region-date-area-wrapper .region-date .region-btn::after {
  display: block;
  content: '';
  width: 24px;
  height: 24px;
  background-image: url(../images/arrow_right-w.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 15px 15px;
  border-radius: 50px;
  position: absolute;
  top: 30%;
  right: 8px;
}

.region-date-area .region-date-area-wrapper .douou-area .region-btn::after {
  background-color: #F76636;
}

.region-date-area .region-date-area-wrapper .dounan-area .region-btn::after {
  background-color: #BEA8E6;
}

.region-date-area .region-date-area-wrapper .douhoku-area .region-btn::after {
  background-color: #F59A30;
}

.region-date-area .region-date-area-wrapper .iburi-area .region-btn::after {
  background-color: #CF2800;
}

.region-date-area .region-date-area-wrapper .tokachi-area .region-btn::after {
  background-color: #AAD170;
}

.region-date-area .region-date-area-wrapper .nemuro-area .region-btn::after {
  background-color: #008481;
}

.region-date-area .region-date-area-wrapper .ohotuku-area .region-btn::after {
  background-color: #91C3CE;
}

.region-date-area .region-date-area-wrapper .douou-area .region-btn {
  border: 2px solid #F76636;
}

.region-date-area .region-date-area-wrapper .dounan-area .region-btn {
  border: 2px solid #BEA8E6;
}

.region-date-area .region-date-area-wrapper .douhoku-area .region-btn {
  border: 2px solid #F59A30;
}

.region-date-area .region-date-area-wrapper .iburi-area .region-btn {
  border: 2px solid #CF2800;
}

.region-date-area .region-date-area-wrapper .tokachi-area .region-btn {
  border: 2px solid #AAD170;
}

.region-date-area .region-date-area-wrapper .nemuro-area .region-btn {
  border: 2px solid #008481;
}

.region-date-area .region-date-area-wrapper .ohotuku-area .region-btn {
  border: 2px solid #91C3CE;
}

@media screen and (min-width:768px) {
  .region-guide-area {
    margin: 40px auto 0;
  }

  /* --map-area-- */
  .map-area .map-box .area-map-btn-wrapper {
    max-width: 664px;
    margin: 40px auto 0;
  }

  /* --region-date-area-- */
  .region-date-area .region-date-area-wrapper .region-date .headline {
    margin: 0 auto 24px;
  }

  .region-date-area .region-date-area-wrapper .region-date .map {
    width: 390px;
    margin: 24px auto 0;
  }

  .region-date-area .region-date-area-wrapper .region-date .explanatory-txt {
    margin: 24px auto 0;
  }

  .region-date-area .region-date-area-wrapper .region-date .highlights h2+.highlights-cnt {
    margin: 24px auto 0;
  }

  .region-date-area .region-date-area-wrapper .region-date .highlights .highlights-cnt ul {
    gap: 24px;
  }

  .region-date-area .region-date-area-wrapper .region-date .highlights .highlights-cnt ul li {
    display: block;
    width: calc((100% - 48px) / 3);
  }

  .region-date-area .region-date-area-wrapper .region-date .highlights .highlights-cnt ul li p {
    margin: 12px auto 0;
  }

  .region-date-area .region-date-area-wrapper .region-date .region-btn {
    max-width: 358px;
  }
}

@media screen and (min-width:1024px) {
  .region-guide-area {
    margin: 64px auto 0;
    padding-bottom: 80px;
  }

  /* --map-area-- */
  .map-area .map-box h2 {
    font-size: 3.2rem;
    margin: -50px 0 auto;
  }

  .map-area .map-box .area-map-btn-wrapper {
    margin: 48px auto 0;
    position: relative;
    padding-top: 449px;
  }

  .map-area .map-box .area-map-btn-wrapper::before {
    display: block;
    content: '';
    width: 602px;
    height: 449px;
    background: url(../images/map.svg)no-repeat;
    background-size: contain;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0%);
  }

  .map-area .map-box .area-map-btn-wrapper .area-map-btn {
    width: 169px;
    font-size: 1.6rem;
    padding: 13px 8px;
    border-radius: 50px;
    position: absolute;
  }

  .map-area .map-box .area-map-btn-wrapper .area-map-btn::after {
    width: 24px;
    height: 24px;
    background: url(../images/arrow_bottom-w.svg) no-repeat top 50% left 50% / 20px 20px;
    top: 25%;
    right: 8px;
  }

  .map-area .map-box .area-map-btn-wrapper .area-map-btn:hover {
    box-shadow: 0px 5px 15px 0 rgba(0, 0, 0, 0.2);
  }

  .map-area .map-box .area-map-btn-wrapper .douou {
    top: 180px;
    left: 20px;
  }

  .map-area .map-box .area-map-btn-wrapper .dounan {
    bottom: -48px;
    left: 80px;
  }

  .map-area .map-box .area-map-btn-wrapper .douhoku {
    top: 0;
    left: 260px;
  }

  .map-area .map-box .area-map-btn-wrapper .iburi {
    bottom: 20px;
    left: 190px;
  }

  .map-area .map-box .area-map-btn-wrapper .tokachi {
    bottom: 80px;
    right: 100px;
  }

  .map-area .map-box .area-map-btn-wrapper .nemuro {
    bottom: 140px;
    right: 0;
  }

  .map-area .map-box .area-map-btn-wrapper .ohotuku {
    top: 64px;
    right: 120px;
  }

  /* --region-date-area-- */
  .region-date-area {
    margin: 88px auto 0;
    padding-bottom: 50px;
    border-radius: 32px;
  }

  .region-date-area .region-date-area-wrapper {
    width: calc(100% - 80px);
  }

  .region-date-area .region-date-area-wrapper .region-date {
    width: 100%;
    display: grid;
    grid-template-columns: 470px 390px;
    grid-template-rows: auto auto auto auto auto;
    grid-template-areas:
      "headline headline"
      "region-name region-name"
      "txt txt"
      "highlights map"
      "highlights region-btn";
    margin: 0 auto 100px;
    gap: 0;
    justify-content: space-between;
  }

  .region-date-area .region-date-area-wrapper .ohotuku-area {
    margin: 0 auto;
  }

  .region-date-area .region-date-area-wrapper .region-date .headline {
    font-size: 1.8rem;
    margin: 0 auto 24px;
  }

  .region-date-area .region-date-area-wrapper .region-date h1 {
    font-size: 3.2rem;
    padding-left: 40px;
  }

  .region-date-area .region-date-area-wrapper .region-date h1::before {
    width: 32px;
    height: 40px;
  }

  .region-date-area .region-date-area-wrapper .region-date .map {
    width: 390px;
    margin: 80px auto 0;
  }

  .region-date-area .region-date-area-wrapper .region-date .explanatory-txt {
    margin: 24px auto 0;
  }

  .region-date-area .region-date-area-wrapper .region-date .highlights {
    width: 470px;
    margin: 32px 0 0 0;
  }

  .region-date-area .region-date-area-wrapper .region-date .highlights h2+.highlights-cnt {
    margin: 24px auto 0;
  }

  .region-date-area .region-date-area-wrapper .region-date .highlights .highlights-cnt {
    margin: 24px auto 0;
  }

  .region-date-area .region-date-area-wrapper .region-date .region-btn {
    width: 358px;
    max-width: none;
    height: 64px;
    line-height: 1;
    margin: -130px auto 0;
    padding: 20px 48px 25px 16px;
  }

  .region-date-area .region-date-area-wrapper .region-date .highlights .highlights-cnt ul {
    gap: 16px;
  }

  .region-date-area .region-date-area-wrapper .region-date .highlights .highlights-cnt ul li {
    width: calc((100% - 32px) / 3);
  }
}

/* ----------------------------
index / AI-bnr-area
------------------------------ */
.AI-bnr-area {
  width: 100%;
  background: #FFFDC6;
  padding: 32px 0 40px;
}

.AI-bnr-area .AI-bnr-area-wrapper {
  width: calc(100% - 32px);
  margin: 0 auto;
}

.AI-bnr-area .AI-bnr-area-wrapper h2 {
  width: calc(100% - 16px);
  max-width: 500px;
  margin: 0 auto;
}

.AI-bnr-area .AI-bnr-area-wrapper .bnr {
  width: 100%;
  max-width: 500px;
  margin: 16px auto 0;
}

.AI-bnr-area .AI-bnr-area-wrapper .bnr-AI:hover {
  opacity: 1;
}

.AI-bnr-area .AI-bnr-area-wrapper p {
  font-size: clamp(1rem, 4.1vw, 1.6rem);
  line-height: 1.8;
  color: #6D3A24;
  text-align: center;
  max-width: 770px;
  background: #fff;
  border-radius: 8px;
  padding: 16px 24px;
  margin: 16px auto 0;
}

@media screen and (min-width:768px) {
  .AI-bnr-area .AI-bnr-area-wrapper {
    margin: 24px auto 0;
  }

  .AI-bnr-area .AI-bnr-area-wrapper p {
    padding: 24px;
    margin: 24px auto 0;
  }
}

@media screen and (min-width:1024px) {
  .AI-bnr-area {
    padding: 64px 0;
  }

  .AI-bnr-area .AI-bnr-area-wrapper {
    width: 770px;
  }

  .AI-bnr-area .AI-bnr-area-wrapper p {
    font-size: 1.6rem;
    padding: 32px 24px;
    margin: 32px auto 0;
  }
}

/* ----------------------------
index / NEWS-area
------------------------------ */
.news-area {
  width: calc(100% - 16px);
  max-width: 900px;
  margin: 40px auto 0;
}

.news-area .news-area-wrapper h2 {
  font-size: 2.4rem;
  line-height: 1.5;
  font-weight: 700;
  color: #006E47;
  text-align: center;
  margin: 0 auto 32px;
  padding-bottom: 12px;
  position: relative;
}

.news-area .news-area-wrapper h2::after {
  display: block;
  content: '';
  width: 52px;
  height: 4px;
  background: #BBA53D;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, -50%);
}

.news-area .news-area-wrapper ul li {
  padding: 16px;
  border-top: 1px solid #F2F2F2;
}

.news-area .news-area-wrapper ul li:last-child {
  border-bottom: 1px solid #F2F2F2;
}

.news-area .news-area-wrapper .primary-btn {
  max-width: 300px;
  margin: 40px auto 0;
}

@media screen and (min-width:1024px) {
  .news-area {
    margin: 124px auto 60px;
    border: 2px solid #006E47;
    position: relative;
  }

  .news-area .news-area-wrapper {
    padding: 69px 40px 40px;
  }

  .news-area .news-area-wrapper h2 {
    font-size: 3.2rem;
    margin: 0 auto 32px;
    padding: 0 24px 12px;
    position: absolute;
    top: -30px;
    left: 380px;
    background: #fff;
  }

  .news-area .news-area-wrapper .primary-btn {
    max-width: 440px;
    margin: 40px auto 0;
  }
}

/* ----------------------------
index / QA-area
------------------------------ */
.qa-area {
  width: 100%;
  background: #F5FFE6;
  margin: 64px auto 0;
  padding: 40px 0 64px
}

.qa-area .qa-area-wrapper h2 {
  font-size: 2.4rem;
  line-height: 1.5;
  font-weight: 700;
  color: #006E47;
  text-align: center;
  margin: 0 auto 24px;
  padding-bottom: 12px;
  position: relative;
}

.qa-area .qa-area-wrapper h2::after {
  display: block;
  content: '';
  width: 52px;
  height: 4px;
  background: #BBA53D;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, -50%);
}

.qa-area .qa-area-wrapper .qa-list {
  width: calc(100% - 32px);
  max-width: 900px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  margin: 0 auto;
}

.qa-area .qa-area-wrapper .qa-list li {
  width: 100%;
  background: #fff;
  padding: 24px 16px;
  border-radius: 4px;
}

.qa-area .qa-area-wrapper .qa-list li h3 {
  font-size: 1.6rem;
  line-height: 1.7;
  font-weight: 500;
  padding: 0 0 0 40px;
  color: #004D32;
  position: relative;
}

.qa-area .qa-area-wrapper .qa-list li h3 span {
  font-size: 1rem;
  vertical-align: top;
}

.qa-area .qa-area-wrapper .qa-list li h3::before {
  display: block;
  content: '';
  width: 32px;
  height: 32px;
  background: url(../images/icon-Q.svg)no-repeat;
  position: absolute;
  top: 0;
  left: 0;
}

.qa-area .qa-area-wrapper .qa-list li p {
  margin: 8px auto 0;
  padding: 0 0 0 40px;
  position: relative;
}

.qa-area .qa-area-wrapper .qa-list li p::before {
  display: block;
  content: '';
  width: 32px;
  height: 32px;
  background: url(../images/icon-A.svg)no-repeat;
  position: absolute;
  top: 0;
  left: 0;
}

.qa-area .qa-area-wrapper .qa-list li p span {
  font-size: 1.4rem;
}

.qa-btn-wrapper {
  width: fit-content;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  margin: 40px auto 0;
}

.qa-btn-wrapper .external-btn {
  width: 100%;
  margin: 0;
}

@media screen and (min-width:1024px) {
  .qa-area {
    margin: 0 auto;
    padding: 80px 0;
  }

  .qa-area .qa-area-wrapper h2 {
    font-size: 3.2rem;
    margin: 0 auto 48px;
  }

  .qa-area .qa-area-wrapper .qa-list {
    gap: 24px;
  }

  .qa-area .qa-area-wrapper .qa-list li {
    padding: 40px;
  }

  .qa-area .qa-area-wrapper .qa-list li p {
    margin: 24px auto 0;
  }

  .qa-btn-wrapper {
    margin: 48px auto 0;
    flex-direction: row;
  }

  .qa-btn-wrapper .external-btn {
    min-width: 440px;
  }
}

/* ----------------------------
index / banner-area
------------------------------ */
.banner-area {
  width: 100%;
  margin: 48px auto 0;
}

.banner-area .banner-area-wrapper {
  width: calc(100% - 32px);
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 80px;
}

.banner-area .banner-area-wrapper .banner-block h2 {
  font-size: 2.4rem;
  line-height: 1.5;
  font-weight: 700;
  color: #006E47;
  text-align: center;
  margin: 0 auto 32px;
  padding-bottom: 12px;
  position: relative;
}

.banner-area .banner-area-wrapper .banner-block h2::after {
  display: block;
  content: '';
  width: 52px;
  height: 4px;
  background: #BBA53D;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, -50%);
}


.banner-area .banner-area-wrapper .banner-block ul {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.banner-area .banner-area-wrapper .banner-block ul li {
  width: calc((100% - 32px) / 3);
}

.banner-area .banner-area-wrapper .banner-block ul li img {
  width: 100%;
}

@media screen and (min-width:768px) {
  .banner-area .banner-area-wrapper .banner-block h2 {
    font-size: 3.2rem;
  }

  .banner-area .banner-area-wrapper .banner-block ul li {
    width: calc((100% - 64px) / 5);
  }
}

@media screen and (min-width:1024px) {
  .banner-area {
    margin: 84px auto 0;
  }

  .banner-area .banner-area-wrapper {
    gap: 120px;
  }

  .banner-area .banner-area-wrapper .banner-block h2 {
    margin: 0px auto 48px;
  }

  .banner-area .banner-area-wrapper .banner-block {
    flex: 1;
  }

  .banner-area .banner-area-wrapper .banner-block ul li {
    width: calc((100% - 112px) / 8);
  }
}

/* ----------------------------
footer
------------------------------ */
/* --SNS-area-- */
footer {
  width: 100%;
  margin: 100px auto 0;
}

footer .SNS-area {
  width: calc(100% - 92px);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
}

footer .SNS-area .icon-wrapper {
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}

/* --about-area-- */
footer .about-area {
  width: 100%;
  background: #E7ECE3;
  margin: 24px auto 0;
  padding: 40px 24px;
}

footer .about-area p {
  font-size: 1.4rem;
  line-height: 2;
  color: #687E72;
  text-align: center;
}

/* --link-area-- */
.link-area {
  width: 100%;
  background: #1B1B1B;
  padding: 32px 16px 40px;
}

.link-area .link-area-wrapper {
  margin: 0 auto;
  text-align: center;
}

.link-area .link-area-wrapper .logo {
  width: calc(100% - 158px);
  max-width: 200px;
  min-width: 200px;
  margin: 0 auto;
}

.link-area .link-area-wrapper ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 24px auto 0;
}

.link-area .link-area-wrapper ul li a {
  font-size: 1.2rem;
  line-height: 1.5;
  color: #fff;
}

.link-area .link-area-wrapper .hokkaidolove {
  display: block;
  margin: 32px auto 0;
}

@media screen and (min-width:1024px) {

  /* --SNS-area-- */
  footer {
    margin: 160px auto 0;
  }

  /* --about-area-- */
  footer .about-area {
    margin: 32px auto 0;
  }

  /* --link-area-- */
  .link-area {
    padding: 24px 16px;
  }

  .link-area .link-area-wrapper {
    max-width: 1024px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
  }

  .link-area .link-area-wrapper .logo {
    width: 140px;
    height: auto;
    max-width: unset;
    min-width: unset;
    margin: 0;
  }

  .link-area .link-area-wrapper ul {
    display: flex;
    flex-direction: row;
    gap: 12px;
    margin: 0 auto;
  }

  .link-area .link-area-wrapper .hokkaidolove {
    margin: 0;
  }

  .link-area .link-area-wrapper .hokkaidolove img {
    height: 18px;
  }
}

/* ----------------------------
個別エリアページ
------------------------------ */
/* --見出し-- */
.intro-area {
  width: 100%;
  height: auto;
}

.intro-area .intro-area-wrapper {
  width: 100%;
  height: 240px;
  position: relative;
}

.douou .intro-area .intro-area-wrapper {
  background: url(../images/bg_douou.png) no-repeat center / cover;
}

.dounan .intro-area .intro-area-wrapper {
  background: url(../images/bg_dounan.png) no-repeat center / cover;
}

.douhoku .intro-area .intro-area-wrapper {
  background: url(../images/bg_douhoku.png) no-repeat center / cover;
}

.iburi .intro-area .intro-area-wrapper {
  background: url(../images/bg_iburi.png) no-repeat center / cover;
}

.tokachi .intro-area .intro-area-wrapper {
  background: url(../images/bg_tokachi.png) no-repeat center / cover;
}

.nemuro .intro-area .intro-area-wrapper {
  background: url(../images/bg_nemuro.png) no-repeat center / cover;
}

.ohotuku .intro-area .intro-area-wrapper {
  background: url(../images/bg_ohotuku.png) no-repeat center / cover;
}

.intro-area .intro-area-wrapper .ttl {
  width: 100%;
  height: auto;
  padding: 28px 16px;
  background: rgba(0, 0, 0, 0.35);
  position: absolute;
  bottom: 0;
}

.intro-area .intro-area-wrapper .ttl h1 {
  font-size: 2.4rem;
  line-height: 1;
  font-weight: 700;
  color: #fff;
  text-align: center;
}

.intro-area .intro-area-wrapper .ttl .map {
  width: 20vw;
  max-width: 86px;
  position: absolute;
  bottom: 8px;
  left: 16px;
}

.intro-area .explanatory-txt {
  width: calc(100% - 32px);
  max-width: 980px;
  margin: 24px auto 0;
}

/* --おすすめコンテンツ-- */
.recommend-area {
  width: calc(100% - 32px);
  max-width: 980px;
  margin: 48px auto 0;
}

.recommend-area .recommend-area-wrapper h2 {
  font-size: 2rem;
  line-height: 1.5;
  font-weight: 700;
  color: #006E47;
  text-align: left;
  margin: 0 0 24px 0;
  padding: 0 0 0 12px;
  position: relative;
}

.recommend-area .recommend-area-wrapper h2::before {
  display: block;
  content: '';
  width: 4px;
  height: 24px;
  background: #BBA53D;
  position: absolute;
  top: 3px;
  left: 0;
}

.recommend-area .recommend-area-wrapper .recommend-content+.button {
  margin: 40px auto 0;
}

/* --おすすめコンテンツ　共通-- */
.recommend-content {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 32px 16px;
}

.recommend-content li {
  width: calc((100% - 16px) / 2);
}

.recommend-content li picture {
  position: relative;
  width: 100%;
  aspect-ratio: 300 / 186;
  overflow: visible;
  margin: 0 auto 12px;
}

.recommend-content li picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 8px;
}

.recommend-content li picture::after {
  display: block;
  content: '';
  width: 32px;
  height: 32px;
  border: 1px solid #BBA53D;
  border-radius: 50px;
  background: #fff url(../images/arrow_right-gold.svg) no-repeat center / 24px 24px;
  position: absolute;
  bottom: -4px;
  right: -4px;
  transition: 0.3s ease 50ms;
}

.recommend-content li :hover picture::after {
  width: 40px;
  height: 40px;
  background: #fff url(../images/arrow_right-gold.svg) no-repeat center / 32px 32px;
  bottom: -8px;
  right: -8px;
}

.recommend-content li h3 {
  font-size: 1.4rem;
  line-height: 1.5;
  font-weight: 700;
  margin: 0 auto 8px;
}

.recommend-content li h3+p {
  font-size: 1.4rem;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  /* 4行まで表示 */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --おすすめコンテンツ　コース-- */
.recommend-area.recommend-course,
.recommend-area.recommend-spot {
  margin: 80px auto 0;
}

/* --その他エリアを見る-- */
.child-page .map-area {
  margin: 100px auto 0;
}

.child-page .map-area .map-box h2 {
  margin: 0 auto;
}

.child-page .map-area .map-box .area-map-btn-wrapper .area-map-btn ::after {
  background-image: url(../images/arrow_right-w.svg);
}

.child-page .map-area .map-box .area-map-btn-wrapper .area-map-btn.douou.check {
  background-color: rgba(247, 102, 54, 0.2);
}

.child-page .map-area .map-box .area-map-btn-wrapper .area-map-btn.dounan.check {
  background-color: rgba(190, 168, 230, 0.2);
}

.child-page .map-area .map-box .area-map-btn-wrapper .area-map-btn.douhoku.check {
  background-color: rgba(245, 154, 48, 0.2);
}

.child-page .map-area .map-box .area-map-btn-wrapper .area-map-btn.iburi.check {
  background-color: rgba(207, 40, 0, 0.2);
}

.child-page .map-area .map-box .area-map-btn-wrapper .area-map-btn.tokachi.check {
  background-color: rgba(170, 209, 112, 0.2);
}

.child-page .map-area .map-box .area-map-btn-wrapper .area-map-btn.nemuro.check {
  background-color: rgba(0, 132, 129, 0.2);
}

.child-page .map-area .map-box .area-map-btn-wrapper .area-map-btn.ohotuku.check {
  background-color: rgba(145, 195, 206, 0.2);
}

.child-page .map-area .map-box .area-map-btn-wrapper .area-map-btn.check:hover {
  opacity: 1;
  cursor: default !important;
}

.child-page .map-area .map-box .area-map-btn-wrapper .area-map-btn.check ::after {
  display: none;
}


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

  /* --見出し-- */
  .tokachi .intro-area .intro-area-wrapper {
    background: url(../images/bg_tokachi.png) no-repeat bottom / cover;
  }

  /* --おすすめコンテンツ　共通-- */
  .recommend-content li {
    width: calc((100% - 40px) / 3);
  }

  .recommend-content li h3 {
    text-align: center;
  }

  .recommend-content li h3+p {
    -webkit-line-clamp: 3;
    /* 3行まで表示 */
  }
}

@media screen and (min-width:1024px) {

  /* --見出し-- */
  .intro-area .intro-area-wrapper {
    height: 400px;
  }

  .intro-area .intro-area-wrapper .ttl {
    padding: 20px 16px;
  }

  .intro-area .intro-area-wrapper .ttl h1 {
    font-size: 4rem;
  }

  .intro-area .intro-area-wrapper .ttl .map {
    width: 215px;
    height: 160px;
    max-width: unset;
    position: absolute;
    bottom: 16px;
    left: 150px;
  }

  .intro-area .explanatory-txt {
    line-height: 2;
    margin: 40px auto 0;
  }

  .nemuro .intro-area .intro-area-wrapper {
    background: url(../images/bg_nemuro.png) no-repeat center 30% / cover;
  }

  /* --おすすめコンテンツ-- */
  .recommend-area {
    margin: 64px auto 0;
  }

  .recommend-area .recommend-area-wrapper h2 {
    font-size: 2.4rem;
  }

  .recommend-area .recommend-area-wrapper h2::before {
    height: 36px;
    top: 6%;
  }

  .recommend-area .recommend-area-wrapper .recommend-content+.button {
    margin: 80px auto 0;
  }

  /* --おすすめコンテンツ　共通-- */
  .recommend-content {
    gap: 40px;
  }

  .recommend-content li {
    width: calc((100% - 80px) / 3);
  }

  .recommend-content li picture {
    margin: 0 auto 16px;
  }

  .recommend-content li picture img {
    border-radius: 8px;
  }

  .recommend-content li h3 {
    font-size: 1.6rem;
  }

  .recommend-content li h3+p {
    text-align: center;
  }

  /* --おすすめコンテンツ　コース-- */
  .recommend-area.recommend-course,
  .recommend-area.recommend-spot {
    margin: 120px auto 0;
  }

  /* --その他エリアを見る-- */
  .child-page .map-area {
    width: 800px;
    height: auto;
    margin: 160px auto 0;
    padding: 0 48px 96px 48px;
    border: 2px solid #006E47;
    position: relative;
  }

  .child-page .map-area .map-box h2 {
    width: fit-content;
    margin: -24px auto 0;
    padding: 0 16px 12px 16px;
    background: #fff;
  }

  .child-page .map-area .character {
    position: absolute;
    right: 32px;
    bottom: 40px;
  }
}

/* ----------------------------
個別スポットページ
------------------------------ */
/* --トップ部分 見出し　コースページと共通-- */
.introduction-area {
  width: calc(100% - 32px);
  max-width: 980px;
  margin: 40px auto 0;
}

.introduction-area .introduction-img-wrapper {
  width: 100%;
  max-width: 980px;
  aspect-ratio: 980 / 560;
  overflow: hidden;
  position: relative;
  border-radius: 8px;
}

.introduction-area .introduction-img-wrapper .top-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.introduction-area .introduction-img-wrapper .area-tag {
  display: block;
  position: absolute;
  bottom: 8px;
  left: 8px;
}

.area-tag::before {
  display: block;
  content: '';
  width: fit-content;
  min-width: 80px;
  height: fit-content;
  font-size: 1.2rem;
  line-height: 1;
  font-weight: 700;
  text-align: center;
  color: #222222;
  background: #fff;
  padding: 7px 24px;
  border-radius: 50px;
}

.area-tag.douou::before {
  content: '道央';
  border: 2px solid #F76636;
}

.area-tag.dounan::before {
  content: '道南';
  border: 2px solid #BEA8E6;
}

.area-tag.douhoku::before {
  content: '道北';
  border: 2px solid #F59A30;
}

.area-tag.iburi::before {
  content: '胆振・日高';
  border: 2px solid #CF2800;
}

.area-tag.tokachi::before {
  content: '十勝';
  border: 2px solid #AAD170;
}

.area-tag.nemuro::before {
  content: '根室・釧路';
  border: 2px solid #008481;
}

.area-tag.ohotuku::before {
  content: 'オホーツク';
  border: 2px solid #91C3CE;
}

.introduction-area h1 {
  font-size: 2.4rem;
  line-height: 1.5;
  font-weight: 700;
  text-align: center;
  margin: 24px auto 0;
}

.introduction-area .tag-area-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 8px;
  justify-content: center;
  align-items: center;
  margin: 24px auto 0;
}

.introduction-area .tag-area-wrapper .tag a {
  display: block;
  font-size: 1.2rem;
  line-height: 1;
  font-weight: 500;
  color: #687E72;
  padding: 8px;
  border-radius: 50px;
  background: #E7ECE3;
}

.introduction-area .content-txt {
  margin: 24px auto 0;
}

.introduction-area .note {
  font-size: 1.2rem;
  margin: 16px auto 0;
}

.spot-page .detailed-info-area,
.course-page .detailed-info-area {
  width: 100%;
  margin: 64px auto 0;
}

.spot-page .detailed-info-area h2,
.course-page .detailed-info-area h2 {
  width: 100%;
  max-width: 980px;
  font-size: 2.4rem;
  line-height: 1.5;
  font-weight: 700;
  color: #006E47;
  text-align: center;
  padding: 16px;
  margin: 0 auto;
  background: #F5FFE6;
}

/* --スポットページ固有-- */
.spot-page .detailed-info-area .detailed-info-area-wrapper section {
  width: calc(100% - 32px);
  max-width: 980px;
  margin: 36px auto 0;
}

.spot-page .detailed-info-area .detailed-info-area-wrapper section p a {
  color: #006E47;
  text-decoration: underline;
}

.spot-page .detailed-info-area .detailed-info-area-wrapper section .note {
  font-size: 1.2rem;
  margin: 16px auto 0;
}

.spot-page .detailed-info-area .detailed-info-area-wrapper h2+section {
  margin: 40px auto 0;
}

.spot-page .detailed-info-area .detailed-info-area-wrapper h3 {
  font-size: 1.8rem;
  line-height: 1.5;
  font-weight: 700;
  color: #006E47;
  text-align: left;
  margin: 0 0 16px 0;
  padding: 0 0 0 12px;
  position: relative;
}

.spot-page .detailed-info-area .detailed-info-area-wrapper h3 span {
  font-size: 1.2rem;
  font-weight: 500;
  color: #687E72;
  padding: 0 0 0 8px;
}

.spot-page .detailed-info-area .detailed-info-area-wrapper h3::before {
  display: block;
  content: '';
  width: 4px;
  height: 24px;
  background: #BBA53D;
  position: absolute;
  top: 3px;
  left: 0;
}

.spot-page .detailed-info-area .detailed-info-area-wrapper .map-area .map-wrapper iframe {
  width: 100%;
  aspect-ratio: 1 / 0.618;
  border-radius: 8px;
  overflow: hidden;
}

.spot-page .detailed-info-area .detailed-info-area-wrapper .map-area p {
  margin: 16px auto 0;
}

.spot-page .detailed-info-area .detailed-info-area-wrapper .access-btn-area .access-btn-wrapper {
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: center;
}

.spot-page .detailed-info-area .detailed-info-area-wrapper .access-btn-area .access-btn-wrapper .btn-access {
  width: 100%;
  max-width: 316px;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  margin: 0 auto;
  padding: 18px 8px;
  border: 2px solid #006E47;
  position: relative;
  border-radius: 4px;
}

.spot-page .detailed-info-area .detailed-info-area-wrapper .access-btn-area .access-btn-wrapper .btn-access.transport {
  background: #006E47;
  color: #fff;
}

.spot-page .detailed-info-area .detailed-info-area-wrapper .access-btn-area .access-btn-wrapper .btn-access::after {
  display: block;
  content: '';
  width: 20px;
  height: 20px;
  background: url(../images/icon-link-g.svg) no-repeat top 50% left 50% / 20px 20px;
  position: absolute;
  top: 25%;
  right: 8px;
}

.spot-page .detailed-info-area .detailed-info-area-wrapper .access-btn-area .access-btn-wrapper .btn-access.transport::after {
  background: url(../images/icon-link-w.svg) no-repeat top 50% left 50% / 20px 20px;
}

.spot-page .detailed-info-area .detailed-info-area-wrapper .access-btn-area .access-btn-wrapper .btn-access span {
  width: fit-content;
  padding-left: 28px;
}

.spot-page .detailed-info-area .detailed-info-area-wrapper .access-btn-area .access-btn-wrapper .btn-access.car span {
  background: url(../images/icon-car.svg) no-repeat top 50% left 0 / 20px 20px;
}

.spot-page .detailed-info-area .detailed-info-area-wrapper .access-btn-area .access-btn-wrapper .btn-access.transport span {
  background: url(../images/icon-public-transport.svg) no-repeat top 50% left 0 / 20px 20px;
}

.spot-page .detailed-info-area .detailed-info-area-wrapper .access-btn-area .access-btn-wrapper .btn-access.walk span {
  background: url(../images/icon-walking.svg) no-repeat top 50% left 0 / 20px 20px;
}

/* --関連チケット・コース　コースページと共通-- */
.spot-page .recommend-area,
.course-page .recommend-area {
  width: 100%;
  max-width: 100%;
  margin: 64px auto 0;
}

.spot-page .recommend-area .recommend-area-wrapper h2,
.course-page .recommend-area .recommend-area-wrapper h2 {
  width: 100%;
  max-width: 980px;
  font-size: 2.4rem;
  line-height: 1.5;
  font-weight: 700;
  color: #006E47;
  text-align: center;
  padding: 16px;
  margin: 0 auto;
  background: #F5FFE6;
}

.spot-page .recommend-area .recommend-area-wrapper h2::before,
.course-page .recommend-area .recommend-area-wrapper h2::before {
  display: none;
}

.spot-page .recommend-area .recommend-area-wrapper .recommend-content,
.course-page .recommend-area .recommend-area-wrapper .recommend-content {
  width: calc(100% - 32px);
  max-width: 980px;
  margin: 40px auto 0;
}

.spot-page .recommend-area .recommend-area-wrapper .recommend-content li:first-child,
.course-page .recommend-area .recommend-area-wrapper .recommend-content li:first-child,
.ticket-info-page .recommend-area .recommend-area-wrapper .recommend-content li:first-child {
  width: calc((100% - 16px) / 2);
}

.spot-page .back-btn,
.course-page .back-btn {
  margin: 80px auto 0;
}

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

  /* --トップ部分 見出し　コースページと共通-- */
  .introduction-area .introduction-img-wrapper .area-tag {
    bottom: 16px;
    left: 16px;
  }

  .introduction-area .tag-area-wrapper {
    gap: 16px;
  }

  .introduction-area .tag-area-wrapper .tag a {
    font-size: 1.4rem;
    padding: 12px;
  }

  /* --スポットページ固有-- */
  .spot-page .detailed-info-area .detailed-info-area-wrapper .map-area .map-wrapper iframe {
    width: 100%;
    aspect-ratio: 1 / 0.5;
  }

  .spot-page .detailed-info-area .detailed-info-area-wrapper .map-area p {
    margin: 16px auto 0;
  }

  .spot-page .detailed-info-area .detailed-info-area-wrapper .access-btn-area .access-btn-wrapper {
    flex-direction: row;
  }

  /* --関連チケット・コース　コースページと共通-- */
  .spot-page .recommend-area .recommend-area-wrapper .recommend-content li:first-child,
  .course-page .recommend-area .recommend-area-wrapper .recommend-content li:first-child,
  .ticket-info-page .recommend-area .recommend-area-wrapper .recommend-content li:first-child {
    width: calc((100% - 16px) / 3);
  }
}

@media screen and (min-width:1024px) {

  /* --トップ部分 見出し　コースページと共通-- */
  .introduction-area h1 {
    font-size: 2.8rem;
    margin: 40px auto 0;
  }

  .introduction-area .tag-area-wrapper {
    margin: 40px auto 0;
  }

  .introduction-area .content-txt {
    margin: 40px auto 0;
    line-height: 2;
  }

  .spot-page .detailed-info-area h2,
  .course-page .detailed-info-area h2 {
    padding: 20px;
  }

  /* --スポットページ固有-- */
  .spot-page .detailed-info-area .detailed-info-area-wrapper section {
    margin: 40px auto 0;
  }

  .spot-page .detailed-info-area .detailed-info-area-wrapper h2+section {
    margin: 56px auto 0;
  }

  .spot-page .detailed-info-area .detailed-info-area-wrapper h3 {
    margin: 0 0 24px 0;
  }

  .spot-page .detailed-info-area .detailed-info-area-wrapper .map-area .map-wrapper iframe {
    aspect-ratio: 1 / 0.3;
  }

  /* --関連チケット・コース　コースページと共通-- */
  .spot-page .recommend-area,
  .course-page .recommend-area {
    width: 100%;
    max-width: 100%;
    margin: 64px auto 0;
  }

  .spot-page .recommend-area .recommend-area-wrapper h2,
  .course-page .recommend-area .recommend-area-wrapper h2 {
    padding: 20px;
  }

  .spot-page .recommend-area .recommend-area-wrapper .recommend-content,
  .course-page .recommend-area .recommend-area-wrapper .recommend-content {
    margin: 56px auto 0;
  }

  .spot-page .recommend-area .recommend-area-wrapper .recommend-content li:first-child,
  .course-page .recommend-area .recommend-area-wrapper .recommend-content li:first-child,
  .ticket-info-page .recommend-area .recommend-area-wrapper .recommend-content li:first-child {
    width: calc((100% - 80px) / 3);
  }

  .spot-page .back-btn,
  .course-page .back-btn {
    margin: 120px auto 0;
  }
}

/* ----------------------------
個別コースページ
------------------------------ */
.route-area .route-area-wrapper {
  width: 100%;
  margin: 64px auto 0;
}

.route-area .route-area-wrapper h2 {
  width: 100%;
  max-width: 980px;
  font-size: 2.4rem;
  line-height: 1.5;
  font-weight: 700;
  color: #006E47;
  text-align: center;
  padding: 16px;
  margin: 0 auto;
  background: #F5FFE6;
}

/* --個別コース メニュー部分-- */
.route-area .route-area-wrapper .route-area-menu {
  width: calc(100% - 32px);
  max-width: 736px;
  margin: 40px auto 0;
}

.route-area .route-area-wrapper .route-area-menu ol {
  counter-reset: my-counter;
}

.route-area .route-area-wrapper .route-area-menu ol li {
  padding-left: 28px;
  position: relative;
  border-bottom: 1px solid #F2F2F2;
}

.route-area .route-area-wrapper .route-area-menu ol li::before {
  content: counter(my-counter);
  counter-increment: my-counter;
  background-color: #006E47;
  border-radius: 50%;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 20px;
  width: 20px;
  color: #fff;
  font-size: 75%;
  line-height: 1;
  font-weight: 700;
  position: absolute;
  top: 30%;
  left: 8px;
}

.route-area .route-area-wrapper .route-area-menu ol li a {
  display: block;
  width: 100%;
  padding: 16px 32px 16px 8px;
  font-weight: 700;
  position: relative;
  line-height: 1.5;
}

.route-area .route-area-wrapper .route-area-menu ol li a::after {
  display: block;
  content: '';
  width: 20px;
  height: 20px;
  background: url(../images/arrow_bottom-g.svg) no-repeat top 50% left 50% / 20px 20px;
  position: absolute;
  top: 30%;
  right: 8px;
}

.route-area .route-area-wrapper .route-area-menu ol li .ticket {
  display: inline-block;
  width: 20px;
  height: 13px;
  position: relative;
  padding: 2px 0 0 8px;
}

.route-area .route-area-wrapper .route-area-menu ol li .ticket::after {
  display: block;
  content: '';
  width: 31px;
  height: 20px;
  background: url(../images/icon-ticketmark.svg) no-repeat top 50% left 50% / 30px 21px;
  position: absolute;
  top: -2px;
  left: 8px;
}

/* --個別コース スポット内容-- */
.route-area .route-area-wrapper .route-area-content {
  width: calc(100% - 32px);
  max-width: 736px;
  margin: 64px auto 0;
}

.route-area-content .route-wrapper .route-spot .route-img {
  width: 100%;
  aspect-ratio: 1 / 0.618;
  border-radius: 8px;
  overflow: hidden;
}

.route-area-content .route-wrapper .route-spot .route-spot-ttl {
  width: 100%;
  display: flex;
  gap: 4px;
  align-items: center;
  justify-content: center;
  margin: 16px auto;
}

.route-area-content .route-wrapper .route-spot .route-spot-ttl span {
  background-color: #006E47;
  border-radius: 50%;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 20px;
  width: 20px;
  color: #fff;
  font-size: 75%;
  line-height: 1;
  font-weight: 700;
}

.route-area-content .route-wrapper .route-spot .route-spot-ttl h3 {
  font-size: 1.8rem;
  line-height: 1.5;
  font-weight: 700;
  color: #006E47;
}

.route-area-content .route-wrapper .route-spot .spot-txt {
  font-size: 1.4rem;
  line-height: 1.75;
}

.detail-btn {
  display: block;
  width: fit-content;
  height: fit-content;
  font-size: 1.4rem;
  line-height: 1;
  font-weight: 500;
  color: #006E47;
  border: 1px solid #006E47;
  border-radius: 50px;
  margin: 16px 0 0 0;
  margin-left: auto;
  padding: 6px 8px;
}

/* --個別コース 移動方法-- */
.route-area-content .route-wrapper .howtomove {
  width: 100%;
  margin: 40px auto 0;
}

.route-area-content .route-wrapper .howtomove h3 {
  width: 100%;
  font-size: 1.6rem;
  line-height: 1.5;
  font-weight: 700;
  color: #687E72;
  text-align: center;
  padding: 4px;
  background: #F5FFE6;
  border-radius: 50px;
}

.route-area-content .route-wrapper .howtomove .route-wrapper {
  margin: 16px auto 0;
  padding: 0 0 0 28px;
  position: relative;
}

.route-area-content .route-wrapper .howtomove .route-wrapper::before {
  display: block;
  content: '';
  width: 20px;
  height: 20px;
  position: absolute;
  top: 2px;
  left: 0;
}

.route-area-content .route-wrapper .howtomove .route-wrapper.bus::before {
  background: url(../images/icon-public-transport.svg) no-repeat top 50% left 50% / 20px 20px;
}

.route-area-content .route-wrapper .howtomove .route-wrapper.train::before {
  background: url(../images/icon-train.svg) no-repeat top 50% left 50% / 20px 20px;
}

.route-area-content .route-wrapper .howtomove .route-wrapper.walk::before {
  background: url(../images/icon-walking.svg) no-repeat top 50% left 50% / 20px 20px;
}

.route-area-content .route-wrapper .howtomove .route-wrapper .route {
  font-size: 1.4rem;
  font-weight: 700;
}

.route-area-content .route-wrapper .howtomove .route-wrapper .route-detail {
  font-size: 1.4rem;
}

.route-area-content .route-wrapper .howtomove .route-wrapper .route-detail a {
  font-size: 1.4rem;
  color: #006E47;
  text-decoration: underline;
}

.route-area-content .route-wrapper .howtomove .travel-time {
  font-size: 1.4rem;
  font-weight: 700;
  margin: 8px auto 0;
  padding: 0 0 0 28px;
  position: relative;
}

.route-area-content .route-wrapper .howtomove .travel-time::before {
  display: block;
  content: '';
  width: 20px;
  height: 20px;
  position: absolute;
  top: 2px;
  left: 0;
  background: url(../images/icon-time.svg) no-repeat top 50% left 50% / 20px 20px;
}

/* --個別コース チケット-- */
.related-ticket-area {
  width: calc(100% - 32px);
  margin: 40px auto 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
}

.related-ticket-area h2 {
  width: 100%;
  font-size: 1.6rem;
  line-height: 1.5;
  text-align: center;
  color: #fff;
  background: #006E47;
  margin: 0 auto;
  padding: 4px 0;
  border-radius: 50px;
  position: relative;
}

.related-ticket-area h2::after {
  content: "";
  height: 0px;
  width: 0px;
  pointer-events: none;
  position: absolute;
  border-top-width: 14px;
  border-bottom-width: 14px;
  border-left-width: 9px;
  border-right-width: 9px;
  top: 100%;
  left: 50%;
  margin-left: -9px;
  border-style: solid;
  border-image: initial;
  border-color: rgb(0, 110, 71) rgba(242, 237, 233, 0) rgba(242, 237, 233, 0);
}

.related-ticket {
  width: 100%;
  border: 1px solid #F2F2F2;
  padding: 16px 16px 24px;
  border-radius: 4px;
}

.related-ticket picture img {
  margin: 0 auto;
  width: 100%;
}

.related-ticket h3 {
  font-size: 1.6rem;
  line-height: 1.75;
  font-weight: 700;
  text-align: center;
  margin: 16px auto 0;
}

.related-ticket p {
  font-size: 1.4rem;
  margin: 16px auto 0;
}

.related-ticket .cart-btn {
  margin: 16px auto 0;
  align-self: end;
}

.route-area-content .route-wrapper .related-ticket {
  margin: 16px auto 0;
}

/* --個別コース 矢印-- */
.route-area-content .dotted_arrow {
  width: 8px;
  height: 50px;
  background: url(../images/dotted_arrow.svg) no-repeat top 50% left 50% / 8px 50px;
  margin: 16px auto;
}

/* --個別コース 注釈-- */
.route-area-content .route-wrapper .route-note h3 {
  width: 100%;
  font-size: 1.6rem;
  line-height: 1.5;
  font-weight: 700;
  color: #fff;
  text-align: center;
  padding: 4px;
  background: #006E47;
  border-radius: 50px;
}

.route-area-content .route-wrapper .route-note p {
  margin: 16px auto 0;
}

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

  /* --個別コース チケット-- */
  .related-ticket {
    display: grid;
    grid-template-columns: 50% auto;
    grid-template-rows: auto auto;
    gap: 32px 16px;
    padding: 20px 20px 32px;
  }

  .related-ticket picture {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
  }

  .related-ticket .ticket-detail-wrapper {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
  }

  .related-ticket h3 {
    text-align: left;
    margin: 0;
  }

  .related-ticket p {
    margin: 20px auto 0;
  }

  .related-ticket .detail-btn {
    margin: 20px 0 0 0;
    margin-left: auto;
  }

  .related-ticket .cart-btn {
    grid-column: 1 / 3;
    grid-row: 2 / 3;
    margin: 0 auto;
  }
}

@media screen and (min-width:1024px) {
  .related-ticket-area {
    max-width: 1024px;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .route-area .route-area-wrapper {
    width: 980px;
    display: grid;
    grid-template-columns: 320px auto;
    grid-template-rows: auto auto;
    gap: 56px 24px;
  }

  .route-area .route-area-wrapper h2 {
    grid-column: 1 / 3;
    grid-row: 1 / 2;
  }

  .related-ticket {
    max-width: 500px;
  }

  /* --個別コース メニュー部分-- */
  .route-area .route-area-wrapper .route-area-menu-wrapper {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
  }

  .route-area .route-area-wrapper .route-area-menu {
    width: 100%;
    margin: 0 auto;
  }

  .route-area .route-area-wrapper .route-area-menu ol {
    border: 1px solid #F2F2F2;
    border-radius: 4px;
  }

  .route-area .route-area-wrapper .route-area-menu ol li {
    padding-left: 32px;
  }

  .route-area .route-area-wrapper .route-area-menu ol li:last-child {
    border-bottom: none;
  }

  .route-area .route-area-wrapper .route-area-menu ol li::before {
    left: 12px;
  }

  .route-area .route-area-wrapper .route-area-menu ol li a {
    font-size: 1.4rem;
  }

  /* --個別コース スポット内容-- */
  .route-area .route-area-wrapper .route-area-content {
    width: 100%;
    margin: 0 auto;
    grid-column: 2 / 3;
    grid-row: 2 / 3;
  }

  .route-area-content .route-wrapper .route-spot .spot-txt {
    font-size: 1.6rem;
    line-height: 2;
  }

  /* --個別コース 移動方法-- */
  .route-area-content .route-wrapper .howtomove .route-wrapper {
    margin: 24px auto 0;
  }

  .route-area-content .route-wrapper .howtomove .route-wrapper .route {
    font-size: 1.6rem;
    font-weight: 700;
  }


  .route-area-content .route-wrapper .howtomove .route-wrapper .route-detail {
    font-size: 1.6rem;
  }

  .route-area-content .route-wrapper .howtomove .route-wrapper::before {
    top: 5px;
  }

  .route-area-content .route-wrapper .howtomove .route-wrapper .route-detail a {
    font-size: 1.6rem;
  }

  .route-area-content .route-wrapper .howtomove .travel-time {
    font-size: 1.6rem;
  }

  .route-area-content .route-wrapper .howtomove .travel-time::before {
    top: 5px;
  }

  /* --個別コース チケット-- */
  .related-ticket-area {
    margin: 64px auto 0;
  }

  .route-area-content .route-wrapper .related-ticket {
    margin: 24px auto 0;
  }

  /* --個別コース 矢印-- */
  .route-area-content .dotted_arrow {
    margin: 24px auto;
  }

  /* --個別コース 注釈-- */
  .route-area-content .route-wrapper .route-note h3 {
    width: 100%;
    font-size: 1.6rem;
    line-height: 1.5;
    font-weight: 700;
    color: #fff;
    text-align: center;
    padding: 4px;
    background: #006E47;
    border-radius: 50px;
  }

  .route-area-content .route-wrapper .route-note p {
    margin: 24px auto 0;
    line-height: 2;
  }
}

/* ----------------------------
個別チケットページ
------------------------------ */
.ticket-info-area {
  background: #004D32;
  padding: 0 0 32px 0;
  position: relative;
}

.ticket-info-area::after {
  display: block;
  content: '';
  width: 100%;
  height: 32px;
  background: #fff;
  border-radius: 20px 20px 0 0;
  position: absolute;
  bottom: 0;
}

.ticket-info-area .ticket-info-area-wrapper {
  width: calc(100% - 32px);
  max-width: 800px;
  margin: 32px auto 0;
}

.ticket-info-area .ticket-info-area-wrapper .ticket-img {
  width: 100%;
  max-width: 540px;
  height: fit-content;
  margin: 0 auto;
  border-radius: 8px;
  box-shadow: 0px 5px 11px 0 rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

.ticket-info-area .ticket-info-area-wrapper h1 {
  font-size: 2rem;
  line-height: 1.5;
  font-weight: 700;
  color: #fff;
  text-align: center;
  margin: 16px auto 0;
}

.ticket-info-area .ticket-info-area-wrapper .ticket-price {
  width: calc(100% - 72px);
  max-width: 400px;
  height: fit-content;
  margin: 16px auto 0;
  background: #fff;
  font-size: 1.6rem;
  line-height: 1;
  font-weight: 500;
  border-radius: 4px;
  overflow: hidden;
}

.ticket-info-area .ticket-info-area-wrapper .ticket-price tr {
  border-bottom: 1px solid #004D32;
}

.ticket-info-area .ticket-info-area-wrapper .ticket-price tr:last-child {
  border-bottom: none;
}

.ticket-info-area .ticket-info-area-wrapper .ticket-price tr th {
  width: 38%;
  border-right: 1px solid #004D32;
  background: #F5FFE6;
  padding: 9px 8px;
}

.ticket-info-area .ticket-info-area-wrapper .ticket-price tr td {
  padding: 9px 16px;
}

.ticket-info-area .ticket-info-area-wrapper .content-txt {
  width: 100%;
  color: #fff;
  margin: 16px auto 0;
}

.ticket-info-area .ticket-info-area-wrapper .cart-btn {
  margin: 20px auto 40px;
}

.ticket-info-page .recommend-wrapper .recommend-area {
  margin: 40px auto 0;
  position: relative;
}

.ticket-info-page .recommend-wrapper .recommend-area:first-child {
  margin: 0 auto;
}

.ticket-info-page .recommend-area .recommend-area-wrapper h2 {
  text-align: center;
  margin: 0 0 32px 0;
  padding: 0 0 16px 0;
}

.ticket-info-page .recommend-area .recommend-area-wrapper h2::before {
  width: 52px;
  height: 4px;
  bottom: 0;
  top: unset;
  left: 50%;
  transform: translate(-50%, -50%);
}

.ticket-info-page .back-btn {
  margin: 80px auto 0;
}

@media screen and (min-width:1024px) {
  .ticket-info-area {
    padding: 0;
    position: unset;
  }

  .ticket-info-area::after {
    display: none;
  }

  .ticket-info-area .ticket-info-area-wrapper {
    display: grid;
    grid-template-columns: 360px auto;
    grid-template-rows: auto auto auto auto;
    margin: 40px auto 0;
    gap: 0 40px;
  }

  .ticket-info-area .ticket-info-area-wrapper .ticket-img {
    grid-column: 1 / 2;
    grid-row: 2 / 4;
  }

  .ticket-info-area .ticket-info-area-wrapper h1 {
    font-size: 3.2rem;
    margin: 0 auto 40px;
    grid-column: 1 / 3;
    grid-row: 1 / 2;
  }

  .ticket-info-area .ticket-info-area-wrapper .ticket-price {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    margin: 0;
  }

  .ticket-info-area .ticket-info-area-wrapper .content-txt {
    margin: 16px auto 0;
    grid-column: 2 / 3;
    grid-row: 3 / 4;
  }

  .ticket-info-area .ticket-info-area-wrapper .cart-btn {
    margin: 48px auto 64px;
    grid-column: 1 / 3;
    grid-row: 4 / 5;
  }

  .ticket-info-page .recommend-wrapper .recommend-area {
    margin: 80px auto 0;
    position: unset;
  }

  .ticket-info-page .recommend-wrapper .recommend-area:first-child {
    margin: 64px auto 0;
  }

  .ticket-info-page .recommend-area .recommend-area-wrapper h2 {
    text-align: left;
    margin: 0 0 40px 0;
    padding: 0 0 0 12px;
  }

  .ticket-info-page .recommend-area .recommend-area-wrapper h2::before {
    width: 4px;
    height: 36px;
    bottom: unset;
    top: 50%;
    left: 0;
  }

  .ticket-info-page .back-btn {
    margin: 120px auto 0;
  }
}

/* ----------------------------
リストページ共通
------------------------------ */
.list-page .list-area h1 {
  font-size: 2.4rem;
  line-height: 1.5;
  font-weight: 700;
  color: #004D32;
  margin: 32px auto 40px;
  text-align: center;
}

.list-content-wrapper ul {
  width: calc(100% - 32px);
  max-width: 1024px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64px;
}

.list-content .list-img-wrapper {
  position: relative;
}

.list-content .list-img-wrapper .list-img {
  width: 100%;
  aspect-ratio: 340 / 210;
  border-radius: 8px;
  overflow: hidden;
}

.list-content .list-img-wrapper .area-tag {
  position: absolute;
  bottom: 8px;
  left: 8px;
}

.list-content h2 {
  font-size: 1.6rem;
  line-height: 1.5;
  font-weight: 700;
  margin: 16px auto 0;
  text-align: center;
}

.list-content .tag-area-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 16px auto 0;
}

.list-content .tag-area-wrapper .tag {
  font-size: 1.2rem;
  line-height: 1;
  font-weight: 500;
  text-align: center;
  color: #687E72;
  background: #E7ECE3;
  padding: 8px;
  border-radius: 50px;
}

.list-content .content-txt {
  font-size: 1.4rem;
  margin: 16px auto 0;
}

.list-page .more-btn {
  margin: 64px auto;
}

/* --タブ--- */
.spot-list .list-content-wrapper,
.category-list .list-content-wrapper {
  display: flex;
  flex-wrap: wrap;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  gap: 1px;
  overflow: hidden;
  width: calc(100% - 16px);
  max-width: 1024px;
  margin: 0 auto;
}

.tab-content>ul {
  width: 100%;
  margin: 40px auto 0;
}

.tab-label {
  flex: 1;
  order: -1;
  color: #BCC7BC;
  font-size: 1.6rem;
  line-height: 1;
  font-weight: 700;
  text-align: center;
  padding: 8px;
  border-radius: 4px 4px 0 0;
  transition: opacity .5s 80ms;
  user-select: none;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  background: #E7ECE3;
  position: relative;
  cursor: pointer;
}

.tab-switch:checked+.tab-label {
  color: #fff;
  padding: 12px 8px;
  background: #006E47;
}

.tab-switch:checked+.tab-label+.tab-content {
  height: auto;
  opacity: 1;
  order: 1;
  pointer-events: auto;
}

.tab-switch {
  display: none;
}

.tab-content {
  height: 0;
  opacity: 0;
  padding: 0;

  pointer-events: none;
  transition: opacity .5s 80ms;
  width: 100%;
}

/* --セレクトボックス--- */
.select-box {
  margin: 40px auto 0;
  text-align: center;
}

.select-box select {
  width: 100%;
  max-width: 340px;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, Arial, Helvetica, sans-serif;
  font-size: 1.6rem;
  line-height: 1;
  font-weight: 500;
  color: #222222;
  background: #fff url(../images/arrow_bottom-g.svg) no-repeat top 50% right 8px / 20px 20px;
  border: 1px solid #687E72;
  border-radius: 4px;
  padding: 19px 54px 19px 16px;
}

@media screen and (min-width:768px) {
  .list-content-wrapper ul {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 40px 48px;
  }

  .list-content-wrapper ul {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 48px 40px;
  }

  .list-content-wrapper ul li {
    width: calc((100% - 40px) / 2);
  }

  .list-page .more-btn {
    margin: 80px auto;
  }
}

@media screen and (min-width:1024px) {
  .list-page .list-area h1 {
    font-size: 3.2rem;
    margin: 40px auto 56px;
  }

  .list-content-wrapper ul li {
    width: calc((100% - 80px) / 3);
  }

  /* --セレクトボックス--- */
  .select-box {
    margin: 48px auto;
  }
}

/* ----------------------------
AI Chat
------------------------------ */
.AIchat-page {
  background: #FFFDC6;
}

.AIchat-page .back-btn {
  margin: 0 auto 80px;
}

.AIchat-page~#footer footer {
  margin: 0;
}

.AIchat-page~#footer .SNS-area {
  padding-top: 24px;
}

.AIchat-hero-area {
  width: calc(100% - 32px);
  max-width: 980px;
  margin: 32px auto 0;
}

.AIchat-hero-area-wrapper h1 {
  width: calc(100% - 120px);
  min-width: 270px;
  max-width: 388px;
  margin: 0 auto;
}

.AIchat-hero-area-wrapper .AI-hero-img {
  margin: 8px auto 0;
}

.AIchat-hero-area-wrapper p {
  text-align: center;
  font-weight: 700;
  margin: 8px auto 0;
  padding: 24px 16px;
  background: #fff;
  border-radius: 16px;
}

.itineraryEditor-area {
  margin: 24px auto 0;
  width: calc(100% - 32px);
  max-width: 980px;
}

.itineraryEditor-area .itineraryEditor_wrapper {
  position: relative;
}

.itineraryEditor-area .itineraryEditor_wrapper .itineraryEditor-area-input {
  width: 100%;
  height: 64px;
  border: 4px solid #E7173A;
  border-radius: 50px;
  padding: 18px 56px 18px 24px;
  font-size: 1.6rem;
  line-height: 1.4;
  box-shadow: 0px 4px 12px 0 rgba(0, 0, 0, 0.2);
  overflow: hidden;
  resize: none;
}

.itineraryEditor-area .itineraryEditor_wrapper .itineraryEditor-btn {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 50px;
  background: #E7173A url(../images/icon-transmission.svg) no-repeat top 50% left 50% / 20px 20px;
  position: absolute;
  top: 20%;
  right: 16px;
  padding: 0;
}

.itineraryEditor_wrapper:has(.itineraryEditor-btn.disabled) .itineraryEditor-area-input {
  border: 4px solid #80595e;
}

.itineraryEditor-area .itineraryEditor_wrapper .itineraryEditor-btn.disabled {
  background: #80595e url(../images/icon-transmission.svg) no-repeat top 50% left 50% / 20px 20px;
}

.suggestion-btn-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 40px auto 80px;
}

.suggestion-btn {
  width: calc((100% - 16px) / 2);
  max-width: 100%;
  max-height: fit-content;
  background: #fff;
  margin: 0 auto;
  padding: 40px 12px 16px;
  font-size: 1.4rem;
  line-height: 1.5;
  font-weight: 500;
  text-align: center;
  border-radius: 16px;
  box-shadow: 0px 4px 12px 0 rgba(0, 0, 0, 0.15);
  position: relative;
}

.suggestion-btn::before {
  display: block;
  content: '';
  width: 24px;
  height: 24px;
  background: url(../images/icon-speechbubble.svg) no-repeat top 50% left 50% / 24px 24px;
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translate(-50%, 0);
}

@media screen and (min-width:768px) {
  .AIchat-page .back-btn {
    margin: 0 auto 100px;
  }

  .AIchat-hero-area-wrapper {
    display: grid;
    grid-template-columns: auto 53%;
    grid-template-rows: auto auto;
    gap: 24px 16px;
    justify-content: start;
    align-items: end;
  }

  .AIchat-hero-area-wrapper h1 {
    width: calc(100% - 32px);
    grid-column: 1;
    grid-row: 1;
    margin: 24px auto 0;
  }

  .AIchat-hero-area-wrapper picture {
    grid-column: 2 / 3;
    grid-row: 1 / 3;
  }

  .AIchat-hero-area-wrapper .AI-hero-img {
    margin: 0 auto;
  }

  .AIchat-hero-area-wrapper p {
    font-size: clamp(1.2rem, 1.8vw, 1.4rem);
    margin: 0 auto;
    background: #fff;
    height: fit-content;
  }

  .itineraryEditor-area {
    margin: 40px auto 0;
    width: calc(100% - 160px);
  }

  .itineraryEditor-area .itineraryEditor_wrapper .itineraryEditor-area-input {
    height: 200px;
    border-radius: 16px;
  }

  .itineraryEditor-area .itineraryEditor_wrapper .itineraryEditor-btn {
    top: unset;
    bottom: 16px;
    right: 16px;
  }

  .suggestion-btn {
    padding: 10px 8px;
    border-radius: 8px;
    position: unset;
  }

  .suggestion-btn::before {
    display: none;
  }

  .suggestion-btn span {
    position: relative;
    padding-left: 32px;
  }

  .suggestion-btn span::before {
    display: block;
    content: '';
    width: 24px;
    height: 24px;
    background: url(../images/icon-speechbubble.svg) no-repeat top 50% left 50% / 24px 24px;
    position: absolute;
    top: -1px;
    left: 0;
  }
}

@media screen and (min-width:1024px) {
  .AIchat-page .back-btn {
    margin: 0 auto 160px;
  }

  .AIchat-hero-area-wrapper {
    gap: 24px 40px;
  }

  .AIchat-hero-area-wrapper p {
    font-size: 1.6rem;
    padding: 24px;
  }

  .suggestion-btn-wrapper {
    margin: 40px auto 120px;
  }
}

/* ----------------------------
AI Chat　talk
------------------------------ */
.AIchat-area {
  width: calc(100% - 32px);
  max-width: 980px;
  margin: 32px auto 0;
}

.AIchat-area h1 {
  width: calc(100% - 80px);
  max-width: 387px;
  margin: 0 auto 32px;
}

.AIchat-area-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.user-message-bubble {
  width: 70%;
  margin-left: auto;
  background: #fff;
  border-radius: 16px 0 16px 16px;
  box-shadow: 0px 4px 12px 0 rgba(0, 0, 0, 0.15);
  padding: 24px 16px;
}

.AI-message-bubble {
  width: 100%;
  min-height: 128px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0px 4px 12px 0 rgba(0, 0, 0, 0.15);
  padding: 24px 16px;
}

.AI-message-bubble .AI-message-wrapper ul li,
.AI-message-bubble .AI-message-wrapper ol li,
.AI-message-bubble .AI-message-wrapper a,
.AI-message-bubble .AI-message-wrapper p {
  font-size: 1.6rem;
  line-height: 1.75;
  font-weight: 400;
}

.AI-message-bubble .AI-message-wrapper a {
  color: #006e47;
  text-decoration: underline;
}

.AI-message-bubble .AI-message-wrapper p strong {
  font-size: 2rem;
  display: block;
  color: #006e47;
  margin: 16px auto 0;
  padding-left: 15px;
  position: relative;
}

.AI-message-bubble .AI-message-wrapper p strong::before {
  display: block;
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 10px solid #006e47;
  border-right: 0;
  position: absolute;
  top: 30%;
  left: 0;
}

.AI-message-bubble .AI-message-wrapper ul li strong,
.AI-message-bubble .AI-message-wrapper ol li strong {
  display: inline;
  font-size: 1.6rem;
  color: #004D32;
  padding-left: 0;
  position: unset;
}

.AI-message-bubble .AI-message-wrapper ul li strong::before,
.AI-message-bubble .AI-message-wrapper ol li strong::before {
  display: none;
}

.AI-message-bubble .AI-message-wrapper ol li {
  list-style: decimal;
  margin: 8px 0 8px 24px;
}

.AI-message-bubble .AI-message-wrapper ol li::marker {
  color: #004D32;
  font-weight: bold;
}

.AI-message-bubble .AI-message-wrapper ul li {
  list-style: none;
  margin: 8px 0 8px 24px;
}

.AI-message-bubble .AI-message-wrapper.icon {
  padding-left: 88px;
  position: relative;
}

.AI-message-bubble .AI-message-wrapper.icon::before {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  content: '';
  width: 80px;
  height: 80px;
}

.AI-message-bubble .AI-message-wrapper.icon.icon-A::before {
  background: url(../images/AI/icon_A.png)no-repeat top 50% left 50% / 80px 80px;
}

.AI-message-bubble .AI-message-wrapper.icon.icon-B::before {
  background: url(../images/AI/icon_B.png)no-repeat top 50% left 50% / 80px 80px;
}

.AI-message-bubble .AI-message-wrapper.icon.icon-C::before {
  background: url(../images/AI/icon_C.png)no-repeat top 50% left 50% / 80px 80px;
}

.AI-message-bubble .ticket-introduce {
  width: 100%;
  margin: 0 auto;
}

.AI-message-bubble .ticket-introduce picture {
  max-width: 440px;
  margin: 24px auto;
}

.AI-message-bubble .ticket-introduce picture img {
  width: fit-content;
  border-radius: 4px;
  overflow: hidden;
}

.AI-message-bubble .ticket-introduce .ticket-introduce-btn {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.AIchat-area .itineraryEditor-area {
  width: calc(100% - 16px);
  margin: 32px auto 40px;
  transition-duration: .6s;
}

.AIchat-area .itineraryEditor-area.fixed {
  width: calc(100% - 32px);
  position: fixed;
  bottom: 16px;
  margin: 0 auto;
}

.AIchat-area .caution {
  margin: 8px auto 10px;
}

.AIchat-area .caution p {
  font-size: 1.2rem;
  line-height: 1.5;
  font-weight: 700;
  color: #004D32;
}

.AIchat-area .loading-animation {
  width: 100%;
  margin: 24px auto -32px;
}

.AIchat-area .loading-animation img {
  margin: 0 auto;
  width: 120px;
  height: auto;
}

@media screen and (min-width:768px) {
  .AI-message-bubble .ticket-introduce {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 24px auto 0;
    padding: 16px;
    border: 1px solid #F2F2F2;
    border-radius: 4px;
  }

  .AI-message-bubble .ticket-introduce picture {
    width: 50%;
    margin: 0 auto;
  }

  .AI-message-bubble .ticket-introduce .ticket-introduce-btn {
    width: 50%;
    gap: 16px;
  }

  .AI-message-bubble .ticket-introduce .ticket-introduce-btn .button {
    width: 100%;
  }

  .AIchat-area .itineraryEditor-area .itineraryEditor_wrapper .itineraryEditor-area-input {
    height: 64px;
    border-radius: 50px;
  }

  .AIchat-area .itineraryEditor-area .itineraryEditor_wrapper .itineraryEditor-btn {
    bottom: 13px;
    right: 13px;
  }
}

@media screen and (min-width:1024px) {
  .AI-message-bubble {
    padding: 24px 32px;
  }

  .AI-message-bubble .AI-message-wrapper.icon {
    padding-left: 104px;
  }

  .AI-message-bubble .ticket-introduce {
    padding: 24px;
    gap: 24px;
  }
}

/* ----------------------------
News-list
------------------------------ */
.news-page {
  width: calc(100% - 32px);
  max-width: 1024px;
  align-items: center;
  margin: 0 auto;
  padding: 85px 0 0;
}

.news-page h1 {
  width: 100%;
  font-size: 2.4rem;
  line-height: 1.5;
  text-align: center;
  color: #004D32;
}

.news-category-area {
  width: 100%;
  margin: 32px auto 0;
}

.news-category-area .news-category-wrapper ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 8px;
}

.news-category-area .news-category-wrapper ul li {
  width: calc(50% - 4px);
}

.news-category-area .news-category-wrapper ul li .news-category-btn {
  width: 100%;
  max-width: unset;
  background: #fff;
  border: 1px solid #687E72;
  border-radius: 50px;
  margin: 0 auto;
  padding: 12px 8px;
  font-size: 1.4rem;
  line-height: 1;
  font-weight: 500;
  color: #687E72;
}

.news-category-area .news-category-wrapper ul li .news-category-btn.checked {
  background: #006E47;
  border: 1px solid #006E47;
  color: #fff;
}

.news-category-area .news-category-wrapper ul li .news-category-btn:hover {
  background: #E7ECE3;
}

.news-category-area .news-category-wrapper ul li .news-category-btn.checked:hover {
  background: #006E47;
}

.news-category-area .select-box-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 24px auto 0;
  max-width: 400px;
}

.news-category-area .select-box-wrapper p {
  font-weight: 700
}

.news-category-area .select-box-wrapper .select-box {
  width: 85%;
  margin: 0;
}

.news-list-wrapper {
  margin: 40px auto 0;
}

.news-list-wrapper ul li {
  padding: 24px;
  border-top: 1px solid #F2F2F2;
}

.news-list-wrapper ul li:last-child {
  border-bottom: 1px solid #F2F2F2;
}

.news-list-wrapper .more-btn {
  margin: 56px auto 0;
}

.news-page .news-list-wrapper {
  width: 100%;
}

@media screen and (min-width:768px) {
  .news-category-area .news-category-wrapper ul li {
    width: calc(24.6% - 4px);
  }

  .news-category-area .news-category-wrapper ul li .news-category-btn {
    padding: 10px 8px;
    font-size: 1.6rem;
  }
}

@media screen and (min-width:1024px) {
  .news-page {
    padding: 90px 0 0;
  }

  .news-page h1 {
    font-size: 4rem;
  }

  .news-category-area {
    margin: 44px auto 0;
  }

  .news-category-area .select-box-wrapper {
    margin: 32px auto 0;
  }

  .news-list-wrapper .more-btn {
    margin: 80px auto 0;
  }
}

/* ----------------------------
News-content
------------------------------ */
.news-content-wrapper {
  width: 100%;
  margin: 40px auto 0;
}

.news-content-ttl {
  width: 100%;
  display: grid;
  grid-template-columns: min-content auto;
  grid-template-rows: min-content min-content;
  gap: 16px 8px;
  padding: 0 0 16px 0;
  border-bottom: 1px solid #F2F2F2;
}

.news-content-ttl .news-date {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  padding: 3px 0 0;
}

.news-content-ttl .news-tag {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
}

.news-content-ttl h1 {
  font-size: 1.6rem;
  color: #222222;
  text-align: left;
  grid-column: 1 / 3;
  grid-row: 2 / 3;
}

.news-content {
  margin: 16px auto 0;
}

.news-content picture img {
  width: calc(100% - 64px);
  margin: 24px auto;
}

.news-page .back-btn {
  margin: 56px auto 0;
}

@media screen and (min-width:1024px) {
  .news-content-wrapper {
    margin: 56px auto 0;
  }

  .news-content-ttl .news-date {
    padding: 5px 0 0;
  }

  .news-content-ttl h1 {
    font-size: 1.8rem;
    line-height: 2;
  }

  .news-content {
    margin: 24px auto 0;
  }

  .news-content picture img {
    width: calc(100% - 64px);
    margin: 40px auto;
  }

  .news-page .back-btn {
    margin: 80px auto 0;
  }
}

/* ----------------------------
error
------------------------------ */
.contents-load-error,
.contents-not-found {
  width: calc(100% - 32px);
  max-width: 800px;
  margin: 24px auto 0;
  background: #F5FFE6;
  border-radius: 16px;
  padding: 24px 16px 40px;
}

.contents-load-error p,
.contents-not-found p {
  font-size: 1.8rem;
  line-height: 1.5;
  font-weight: 700;
  color: #004D32;
  text-align: center;
}

.contents-load-error p::before,
.contents-not-found p::before {
  display: block;
  content: '';
  width: 72%;
  max-width: 320px;
  height: auto;
  aspect-ratio: 260 / 236;
  background: url(../images/img-character-bow.svg)no-repeat top 0 left 10% / contain;
  margin: 0 auto 32px;
}

@media screen and (min-width:1024px) {

  .contents-load-error,
  .contents-not-found {
    padding: 24px 100px 32px;
    min-height: 236px;
  }

  .contents-load-error p,
  .contents-not-found p {
    font-size: 2.4rem;
  }
}