@charset "UTF-8";
/* CSS Document */

body {
  margin: 0;
  padding: 0;
}

:root {
  --model-aqua: #1fc1dd;
  --model-green: #00B281;
  --model-darkblue: #284679;
  --model-blue: #3c66c4;
  --model-fontEN32px: normal 400 32px "Fugaz One", sans-serif;
}

.container {
  max-width: 992px;
  margin: 30px auto 0;
}

.spot-label {
  color: var(--model-green);
  font-size: 14px;
  font-weight: 500;
  padding: 1em 0;
}

.catch.zen-bold {
  font-size: 24px;
  padding-bottom: 1em;
}

/* メイン写真とキャプションの配置 */
.single-mainph {
  display: flex;
  flex-direction: column;
  padding-bottom: 0; /* single.cssのpadding-bottomを上書き */
  overflow: visible; /* overflow: hiddenを上書き */
}

.single-mainph img {
  position: relative !important; /* absoluteからrelativeに変更 */
  top: auto; /* top: 0を上書き */
  left: auto; /* left: 0を上書き */
  width: 100%;
  height: auto; /* アスペクト比を維持 */
  object-fit: cover;
  border-radius: 15px;
}

.main-cap {
  position: relative;
  z-index: 1; /* 画像の上に表示 */
  margin-top: 10px; /* 画像との間隔 */
}

.single_date a {
	text-decoration: underline;
}

/***目次**/

.toc-list a {
	line-height: 2;
}

.toc-list a::before {
	top: 0.5em;
}

@media screen and (max-width: 768px) {
.catch.zen-bold {
	line-height: 1.5em;
}
}

/* ============== 
spot-tab
============== */
.tab-wrapper {
  position: relative;
}

.tab-day {
  padding-top: 82.59px;
  padding-bottom: 34.85px;
  display: flex;
  gap: 11px;
  justify-content: center;
}

.tab-day-title {
  position: absolute;
  left: 0;
  /* .tab-day の padding-bottom を考慮した位置にする */
  bottom: 1rem;
  width: 18rem;
  height: 6rem;
  z-index: 1; /* 必要に応じて重ね順を調整 */
}

.tab-day-title img {
	width: auto;
    height: 100%;
}

.day {
  color: var(--model-green);
  background-color: #fff;
  font-weight: 500;
  font-size: 22px;
  padding: 0.3em 1.818em;
  border-radius: 3em;
  border: 2px var(--model-green) solid;
  position: relative;
  transition: 0.3s ease-in-out;
}

/* 後で調整 */
.day.is-active {
  background-color: var(--model-green);
  color: var(--model-darkblue);
}

.day:hover {
  background-color: var(--model-green);
  color: var(--model-darkblue);
}

.day::after {
  position: absolute;
  content: "";
  left: 50%;
  bottom: -14px;
  transform: translateX(-50%);
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 15px 12px 0;
  border-color: var(--model-green) transparent transparent transparent;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s ease-in-out;
}

.day:not(.is-active):hover::after {
  opacity: 1;
  visibility: visible;
}

.day.is-active::after {
  opacity: 1;
  visibility: visible;
  bottom: -14px;
}

.day:not(.is-active):hover {
  background-color: var(--model-green);
  color: var(--model-darkblue);
}

/* Tab Contents */

.spot-tab__content {
  border: 2px solid var(--model-green);
  border-radius: 23px;
  background-color: #E9F8EE;
  display: none;
  justify-content: space-between;
  position: relative;
  opacity: 0;
}

.spot-tab__content.is-active {
  display: flex;
  animation: tabFadeIn 0.8s ease forwards;
}

@keyframes tabFadeIn {
  0% {
    opacity: 0;
    transform: translateY(
      10px
    ); /* 少し下から浮き上がる演出（不要なら削除可） */
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.tab__content {
  border-radius: 20px 0 0 20px;
  background-image: url("../img/modelcourse/tab__content-bg.svg");
  background-size: auto 100%; /* 横幅はそのまま、縦幅を100%に */
  background-position: right center; /* 右端に配置 */
  background-repeat: no-repeat;
  width: 14%;
  display: flex;
  flex-direction: column;
  justify-content: center; /* 垂直方向中央に配置 */
  align-items: center; /* 水平方向も中央に配置 */
  gap: 34px;
  padding-right: 0.5rem;
  flex-shrink: 0; /* ★追加: 縮小を禁止し、14%を保持する */
}

.date .en {
  color: #fff;
  text-align: center;
  font-family: "Fugaz One", sans-serif;
  font-size: 28px;
}

.date .jp {
  color: #fff;
  font-size: 1.294rem;
  font-weight: 500;
  background-color: var(--model-darkblue);
  border-radius: 2em;
  padding: 0 0.58rem;
  text-align: center;
  width: 82px;
  margin: 0 auto;
}

.time {
  width: 98px;
  height: 76px;
  background-color: #fff;
  border-radius: 9px;
  color: var(--model-darkblue);
  font-weight: 500;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center; /* 垂直方向中央に配置 */
  align-items: center; /* 水平方向も中央に配置 */
}

.icon-text {
  display: flex;
  justify-content: center;
  align-items: center;
}

.icon-text span {
  display: flex;
  align-items: center;
}

.time-text {
  text-align: center;
}

.carousel-container {
  width: 86%;
  flex-shrink: 0;
  padding: 1.8rem 4.706rem 1.5rem 4.706rem;
  position: relative;
}

.splide__track {
  border-left: 1px solid var(--model-green);
  border-right: 1px solid var(--model-green);
}

.splide__pagination__page.is-active {
	background: var(--model-green);
}

@media (max-width: 900px) {
  .tab-day-title {
    position: static;
    margin: 0 auto 10px;
  }

  .tab-day {
    padding-top: 5px;
  }
}

@media (max-width: 768px) {
	
  .tab-wrapper {
    margin-top: 80px;
    text-align: center;
  }
	
  .spot-tab__content {
    flex-direction: column;
  }

  .spot-tab__content.is-active {
    display: flex;
    flex-direction: column;
  }

  .tab__content {
    width: 100%;
    flex-direction: row;
    padding: 0.5rem 0 0.7rem 0;
    gap: 3%;
  }

  .time {
    margin: unset;
  }

  .tab__content {
    /* デフォルトのbackground-imageを非表示/リセット */
    background-image: url("../img/modelcourse/tab__content-bg-sp.svg");

    /* レスポンシブ時のデザイン調整 */
    width: 100%; /* 横幅いっぱいに広げる */
    /* topへの配置に対応するため、border-radiusを調整する場合 */
    border-radius: 20px 20px 0 0;
  }

  .date {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
  }

  .date .en {
    padding-bottom: 0;
  }

  .date .jp {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .carousel-container {
    width: 100%;
    padding: 1rem 0 0.3rem 0;
  }

  .tab-item .number {
    margin-bottom: -0.9em;
  }

  .splide__track {
    border: none;
  }
}

/* ============================
  Splideカスタム矢印のスタイル
   ============================ */
/* 矢印コンテナ (.splide__arrows) の設定 
  親 (.spot-tab__content) を基準に絶対配置し、ボタンを中に入れる
*/
.splide__arrows {
  position: absolute;
  top: 0;
  right: 0;
  width: 86%;
  height: 100%;
  pointer-events: none;
  z-index: 20;
  display: flex;
  justify-content: flex-end;
}

.splide__arrow {
  /* デフォルトの Splide ボタンをリセットし、位置とサイズを設定 */
  position: absolute;
  top: 50%; /* splide__arrows の中で中央寄せ */
  transform: translateY(-50%);

  width: 33px;
  height: 33px;
  background: none;
  border: none;
  padding: 0;
  margin: 0;

  pointer-events: auto; /* 矢印ボタン自体はクリック可能 */
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  z-index: 30; /* 確実に前面に表示 */
}

/* Prev 矢印の位置と装飾 (carousel-containerの左パディングの内側) */
/* ★修正: .tab__content の幅 (14%) + 1.5rem の位置に配置する */
/* .splide__arrow--prev {
  left: calc(14% + 1.5rem);
} */

.splide__arrow--prev::after {
  /* btn-slide-db-l.svg を表示 */
  content: "";
  display: block;
  width: 33px;
  height: 33px;
  background: url(../img/common/btn-slide-db-l.svg);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 0;
  left: 0;
}

/* Next 矢印の位置と装飾 (carousel-containerの右パディングの内側) */
.splide__arrow--next {
  /* .spot-tab__content の右端から 1.5rem の位置 */
  right: 1.5rem;
}

.splide__arrow--next::after {
  /* btn-slide-db-r.svg を表示 */
  content: "";
  display: block;
  width: 33px;
  height: 33px;
  background: url(../img/common/btn-slide-db-r.svg);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 0;
  left: 0;
}

.splide__arrow--prev:disabled::after {
  display: none;
}

/* 次のスライドが無い場合の矢印 */
.splide__arrow--prev[disabled] {
	display: none;
}
.splide__arrow--next[disabled] {
	display: none;
}

/* Tab Item */

.tab-item {
  display: flex;
  align-items: center; /* 垂直方向中央 */
  justify-content: center; /* 水平方向中央 */
  flex-direction: column; /* 縦方向に配置 */
  flex-shrink: 0;
  width: 144px;
  position: relative;
}

.tab-item::before {
  position: absolute;
  content: "";
  width: 8.735px;
  height: 13.931px;
  background: url(../img/common/arrow.svg);
  background-repeat: no-repeat;
  background-size: contain;
  top: 50%;
  transform: translateY(-50%);
  right: -1.2rem;
}

 .tab-item:last-of-type::before {
  content: none;
}

.tab-item-link {
	text-align: center;
}

.tab-item-link:hover {
	opacity: 0.7;
}


/* 場所画像を円形にトリミング */
.place {
  width: 144px; /* 画像のサイズに合わせて幅を固定 */
  display: flex;
  flex-direction: column;
  align-items: center; /* 水平方向中央 */
}

.place img {
  width: 144px;
  height: 144px;
  border-radius: 50%; /* 円形にする */
  object-fit: cover; /* 画像をトリミングして領域を埋める */
  object-position: center; /* 中央を基準にトリミング */
  display: block; /* インライン要素の余白を削除 */
}

.place-name {
  color: var(--model-darkblue);
  font-weight: 500;
  background-color: #fff;
  font-size: 0.875rem;
  border: 1px solid var(--model-darkblue);
  border-radius: 2em;
  padding: 0.7em 0.714em 0.7em 0.8em;
  position: relative;
  top: -0.625rem; /* 0.625remだけ上に配置 */
  line-height: 1em;
}

.place-name::before {
  position: absolute;
  content: "";
  width: 1.214em;
  height: 1.214em;
  left: -0.65em;
  top: 50%;
  transform: translateY(-50%);
  background: url(../img/common/btn-anchor-db.svg);
  background-size: contain;
  background-repeat: no-repeat;
}

/* 旗番号 */
.number {
  color: #fff;
  display: inline-block;
  font: var(--model-fontEN32px);
  font-size: 1.059rem;
  padding: 0.1em 0.944em 0.667em 0.856em;
  margin-bottom: 0.444em;
  position: relative;
  z-index: 1;
}

.number::before {
  position: absolute;
  content: "";
  width: 2.298rem;
  height: 2.329rem;
  top: 0;
  left: 50%;
  background: url(../img/common/icon-course.svg);
  background-size: contain;
  background-repeat: no-repeat;
  z-index: -1;
  transform: translateX(-50%);
}

.number.spring::before {
  background-image: url("../img/common/icon-course-pink.svg");
}
.number.autumn::before {
  background-image: url("../img/common/icon-course-orange.svg");
}
.number.winter::before {
  background-image: url("../img/common/icon-course-aqua.svg");
}
.number.sea::before {
  background-image: url("../img/common/icon-course-aqua.svg");
}
.number.country::before {
  background-image: url("../img/common/icon-course-lightgreen.svg");
}
.number-jp {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 16px;
  font-weight: 500;
}

@media (max-width: 768px) {
  .splide__arrows {
    width: 100%;
  }

  .splide__arrow {
    top: 109%;
  }

  .splide__arrow--next {
    right: 7em;
  }

  .splide__arrow--prev {
    left: 7em;
  }

  .tab-item::before {
    right: -0.5rem;
  }
}

@media (max-width: 370px) {
  .tab-item::before {
    right: 2.5rem;
  }

  .tab-item::after {
    position: absolute;
    content: "";
    width: 8.735px;
    height: 13.931px;
    background: url(../img/common/arrow.svg);
    background-repeat: no-repeat;
    background-size: contain;
    top: 50%;
    transform: translateY(-50%);
    left: 2.3rem;
  }
	
	.splide__list .tab-item:last-child::before,
	.splide__list .tab-item:first-child::after {
	display: none;
	}

  .splide__arrow--next {
    right: 5em;
  }

  .splide__arrow--prev {
    left: 5em;
  }
}

/* ============== 
search
============== */

.search-top-wave {
  width: 100vw;
  /* .search と同じ幅設定 */
  margin: 5.671rem calc(50% - 50vw) 0 calc(50% - 50vw);
  background-image: url(../img/common/search_bg.svg);
  aspect-ratio: 2084.999 / 37.43;
  background-position: center bottom;
  background-size: 130.312rem 2.34rem;
  background-repeat: repeat-x;
  height: 2.34rem;
  position: relative;
  top: 1px; /* わずかに下に移動させて下の要素を隠す */
  z-index: 2;
}

.search {
  background-color: #d9e1f4;
  width: 100vw;
  margin: 0 calc(50% - 50vw) 0 calc(50% - 50vw);
  position: relative;
}

.search .container {
  font-weight: 500;
  padding: 1.941rem 2.824rem 2.824rem 2.824rem;
  margin-top: 0;
}

.search-box {
  width: 90%;
  height: 47px;
  background-color: var(--model-blue);
  color: #fff;
  padding: 0.647rem;
  margin: 0 auto;
  position: relative;
}

.search-text {
  text-align: center;
}

.search-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0.647rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  color: var(--model-blue);
  padding: 0.294rem 1.765rem 0.294rem 0.471rem;
  cursor: pointer;
}

.search-button::after {
  position: absolute;
  content: "";
  width: 19px;
  height: 19px;
  top: 0.294rem;
  right: 0.294rem;
  background: url(../img/common/btn-anchor-blue.svg);
  background-size: contain;
  background-repeat: no-repeat;
}

.search-button.accordion-trigger {
  width: 103.77px;
}

.search-button.accordion-trigger[aria-expanded="true"]::after {
  background: url(../img/common/search_close.svg);
}

.search-accordion-content {
  border: 1px solid var(--model-blue);
  background-color: #fff;
  width: 90%;
  margin: 0 auto;

  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.3s ease-out, opacity 0.3s ease-out 0.3s;
}

.search-accordion-content.open {
  max-height: 1000px;
  opacity: 1;
  transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
}

.search-accordion-body {
  width: 79%;
  margin: 0 auto;
  text-align: center;
  padding: 1rem 0 2em 0;
  /* overflow: scroll; */
}

.search-accordion-body p {
  font-size: 1.059rem;
  text-align: center;
}

.start-select {
  margin-bottom: 22px;
}

.start-place-list {
  font-size: 1.176rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  color: var(--model-blue);
  margin-bottom: 2.294rem;
  gap: 1.2em;
}

.start-place-item {
  padding: 0.7em 0;
  border: 2px solid var(--model-blue);
  width: 22%;
  height: 2.85em;
  border-radius: 2em;
}

.other-place {
  margin-bottom: 0.765rem;
}

.other-place-holder {
  color: #adadad;
  font-size: 0.882rem;
  width: 100%;
  text-align: start;
  padding: 0.933em 1.267em;
  border: 1px solid #adadad;
  border-radius: 2em;
  margin-bottom: 4.765rem;
}

.goal-place {
  font-size: 1.059rem;
  font-weight: 600;
  color: var(--model-blue);
  position: relative;
  margin-bottom: 0.471rem;
}

.goal-place::before {
  content: "";
  position: absolute;
  width: 30.56px;
  height: 35.35px;
  background: url(../img/common/search-arrow.svg);
  background-repeat: no-repeat;
  background-size: contain;
  top: -51.05px;
  left: 50%;
  transform: translateX(-50%);
}

.search-accordion-body .goal-place-bay {
  border-radius: 2em;
  color: #fff;
  font-size: 1.353rem;
  padding: 0.5em 0;
  width: 310px;
  margin: 0 auto 50px;
  background-color: var(--model-blue);
}

.google-search {
  background-color: #fa8a16;
  color: #fff;
  font-size: 1.176rem;
  padding: 0.45em 3.35em 0.45em 1em;
  width: 74%;
  position: relative;
}

.google-search::before {
  content: "";
  position: absolute;
  background: url(../img/common/search-google.svg);
  background-size: contain;
  background-repeat: no-repeat;
  width: 25px;
  height: 25px;
  top: 50%;
  right: 21px;
  transform: translateY(-50%);
}

@media (max-width: 768px) {
  .search-box {
    height: 88px;
  }

  .search-button {
    top: 52%;
    left: 50%;
    transform: translateX(-50%);
  }

  .start-place-item {
    width: 120px;
  }

  .search-accordion-body .goal-place-bay {
    width: 230px;
  }
}

@media (max-width: 420px) {
  .search-accordion-body .goal-place-bay {
    width: 100%;
  }
}

/* ============== 
day-spot
============== */
.course-list .container {
  margin-top: 5rem;
}

.course-list + .course-list {
  margin-top: 2.656rem; /* 元の5.312remの半分 */
}

.day-spot {
  padding: 0 10%;
  padding-top: 4rem;
}
.course-list + .course-list .day-spot {
  padding-left: 7rem;
}

.day-title {
  color: #fff;
  background-color: var(--model-darkblue);
  width: 6.941rem;
  height: 6.941rem;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  margin-bottom: 7rem;
}

.day-title::before {
  position: absolute;
  content: "";
  width: 8.294rem;
  height: 10.118rem;
  top: -3.353rem;
  left: 6.941rem;
  background: url(../img/modelcourse/model-start.png);
  background-size: contain;
  background-repeat: no-repeat;
}

.day-title::after {
  position: absolute;
  content: "";
  width: 4.059rem;
  height: 7.412rem;
  bottom: -6.941rem;
  left: 0.824rem;
  background: url(../img/modelcourse/model-wave.svg);
  background-size: contain;
  background-repeat: no-repeat;
  z-index: -1;
}

/* 1. タイトルのStartアイコン(before)と波線(after)を消す */
.course-list + .course-list .day-title::before,
.course-list + .course-list .day-title::after {
  display: none;
  content: none;
}

/* 2. 波線が消えた分の下の余白(7rem)を詰める */
.course-list + .course-list .day-title {
  margin-bottom: 1.941rem;
  z-index: 2;
}

.day-title .jp {
  font-size: 1.412rem;
  font-weight: 600;
}

.day-title .en {
  font: var(--model-fontEN32px);
  font-size: 1.176rem;
}

.day-spot-item {
  display: flex;
  justify-content: space-between;
  padding: 2rem 1.471rem 1.941rem 3.706rem;
  background-color: #E9F8EE;
  border-radius: 1.5rem;
  position: relative;
  z-index: 2;
  margin-bottom: 0.5em
}

.day-spot-item.is-full .img-box {
  display: none;
}

.day-spot-item.is-full .text-box {
  width: 100%;
}

.text-box {
  width: 50%;
}

.text-box__container {
  display: flex;
  gap: 1.312rem;
  margin-bottom: 1.412rem;
}

.day-number {
  color: #fff;
  display: inline-block;
  font: var(--model-fontEN32px);
  padding: 0.07em 0.8em;
  position: relative;
  z-index: 0;
}

.day-number::before {
  position: absolute;
  content: "";
  width: 4.412rem;
  height: 4.471rem;
  top: 0;
  left: 50%;
  background-image: url("../img/common/icon-course.svg");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: -1;
  transform: translateX(-50%);
}

.day-number.spring::before {
  background-image: url("../img/common/icon-course-pink.svg");
}
.day-number.autumn::before {
  background-image: url("../img/common/icon-course-orange.svg");
}
.day-number.winter::before {
  background-image: url("../img/common/icon-course-aqua.svg");
}
.day-number.sea::before {
  background-image: url("../img/common/icon-course-aqua.svg");
}
.day-number.country::before {
  background-image: url("../img/common/icon-course-lightgreen.svg");
}

.day-number-jp {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 30px;
  font-weight: 500;
}

.day-place .en {
  font: var(--model-fontEN32px);
  font-size: 1.176rem;
}

.single-wrap .day-placeName {
  font-size: 1.412rem;
  line-height: 1.4;
  margin-top: 0.412rem;
  margin-bottom: 0;
  color: #000;
  font-weight: 600;
}

.single-wrap .day-spot__title {
  line-height: 1.9;
  font-weight: 600;
  margin-bottom: 1.294rem;
  color: var(--model-green);
}

.day-spot__text {
  margin-bottom: 1.294rem;
  font-size: 0.941rem;
}

.day-spot__subtext {
  font-size: 15px;
  line-height: 1.6em;
  margin-bottom: 1.294rem;
}

.day-spot-item .text-box .btn-model {
  border-radius: 2rem;
  background-color: var(--model-blue);
  font-size: 1.059rem;
  color: #fff;
  font-weight: 600;
  width: max-content;
  height: 50.5px;
  min-width: 236.55px;
  margin-top: 12.5px;
  display: inline-flex;
  padding: 0 2.5em;
  justify-content: center;
  align-items: center;
  position: relative;
}

.day-spot-item .text-box .btn-model::after {
  position: absolute;
  content: "";
  width: 1.623rem;
  height: 1.623rem;
  top: 50%;
  transform: translateY(-50%);
  right: 0.724rem;
  background-color: #fff;
  background: url(../img/common/btn-white.svg);
  background-size: contain;
  background-repeat: no-repeat;
  border-radius: 50%;
}
.day-spot-item .text-box .btn-model-p {
  border-radius: 2rem;
  background-color: #fc44c0;
  display: inline-block;
  font-size: 1.059rem;
  color: #fff;
  font-weight: 600;
  width: 236.55px;
  height: 50.5px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 12.5px;
  position: relative;
}

.day-spot-item .text-box .btn-model-p::after {
  position: absolute;
  content: "";
  width: 1.623rem;
  height: 1.623rem;
  top: 50%;
  transform: translateY(-50%);
  right: 0.724rem;
  background-color: #fff;
  background: url(../img/common/btn-white.svg);
  background-size: contain;
  background-repeat: no-repeat;
  border-radius: 50%;
}

.img-box {
  width: 50%;
}

.img-box .stay-time {
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 2px solid var(--model-green);
  border-radius: 2em;
  width: 9.412rem;
  padding: 0 0.7rem 0rem;
  margin-left: auto;
  margin-right: 30px;
  margin-bottom: 1.835rem;
  position: relative;
}

.img-box .stay-time::before {
  background-color: var(--model-green);
  position: absolute;
  content: "";
  width: 4.647rem;
  height: 2rem;
  border-radius: 1rem 0 0 1rem;
  left: 0;
}

.stay-time .stay-time__left {
  font-size: 0.824rem;
  color: #fff;
  font-weight: 600;
  z-index: 1;
}

.stay-time .stay-time__right {
  font-size: 0.941rem;
  font-weight: 500;
  position: relative;
  padding-left: 25px;
}

.stay-time .stay-time__right::before {
  position: absolute;
  content: "";
  width: 25px;
  height: 23px;
  background: url(../img/modelcourse/model-time.svg);
  background-size: contain;
  background-repeat: no-repeat;
  top: 0.2rem;
  left: 0;
}

.img-box .stay-img {
  overflow: hidden;
  padding: 0 2.235rem;
  position: relative;
}

/*.img-box .stay-img::before {
  position: absolute;
  content: "";
  width: 1.765rem;
  height: 1.765rem;
  background: url(../img/common/btn-slide-green-l.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}*/

.img-box .stay-img img {
  border-radius: 10px;
}

/*.img-box .stay-img::after {
  position: absolute;
  content: "";
  width: 1.765rem;
  height: 1.765rem;
  background: url(../img/common/btn-slide-green-r.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right center;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}*/

.stay-img-cap {
  font-size: 0.824rem;
  margin-top: 11px;
  text-align: center;
}

.move-way-b {
  font-size: 0.941rem;
  font-weight: 500;
  padding-top: 2.176rem;
  padding-left: 31.7px;
  padding-bottom: 1.882rem;
  margin-top: 0.731rem;
  margin-bottom: 0.731rem;
  margin-left: 12.5rem;
  position: relative;
  display: flex;
  align-items: center;
}

.move-way-b::before {
  position: absolute;
  content: "";
  width: 25px;
  height: 25px;
  background: url(../img/modelcourse/model-icon-baygurun.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
  left: 0;
}

.day2 .move-way-b::before {
  background: url(../img/modelcourse/model-icon-baygurun-white.svg);
	 background-repeat: no-repeat;
}

.move-way-b::after {
  position: absolute;
  content: "";
  width: 4.059rem;
  height: 7.412rem;
  top: -0.731rem;
  left: -4.118rem;
  background: url(../img/modelcourse/model-wave02.svg);
  background-size: contain;
  background-repeat: no-repeat;
}


.move-way-w {
  font-size: 0.941rem;
  font-weight: 500;
  padding-top: 2.176rem;
  padding-left: 31.7px;
  padding-bottom: 1.882rem;
  margin-top: 0.731rem;
  margin-bottom: 0.731rem;
  margin-left: 12.5rem;
  position: relative;
  line-height: 1.2em;
  display: flex;
  align-items: center;
}

.move-way-w::before {
  position: absolute;
  content: "";
  width: 25px;
  height: 25px;
  background: url(../img/modelcourse/model-icon-walk.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
  left: 0;
}

.day2 .move-way-w::before {
  background: url(../img/modelcourse/model-icon-walk-white.svg);
	 background-repeat: no-repeat;
	top: 2.5rem;
}

.move-way-w::after {
  position: absolute;
  content: "";
  width: 4.059rem;
  height: 20rem;
  top: -0.731rem;
  left: -4.118rem;
  background: url(../img/modelcourse/model-wave02.svg);
  background-size: contain;
 ackground-repeat: repeat-y;
  z-index: -1;
}

.move-last {
	padding-left: 10px;
}

.move-last::before {
	content: none;
}

.move-last::after {
	height: 30rem;
	background-size: auto;
	background-repeat: repeat-y;
	z-index: 1;
}

@media (max-width: 768px) {
  .single-wrap.model h1::before {
    top: 6px;
  }

  .single-wrap .day-spot__title {
    line-height: 1.4;
  }
	
  .day-spot-item {
    flex-direction: column;
    gap: 1.941rem;
    /* padding: 2.75rem 1em 1.294rem 1.471rem; */
    padding: 0;
  }

  .text-box {
    width: 100%;
    padding: 2.75rem 1em 0 1.471rem;
  }
	
  .day-spot-item .text-box .btn-model {
	display: flex;
    width: 100%;
	max-width: 300px;
	padding: 0 2em;
  }

  .day-spot-item .text-box .btn-model,
  .day-spot-item .text-box .btn-model-p {
    margin: 10px auto;
  }

  .day-spot-item .text-box .btn-model-p {
    margin-top: 0.629rem;
  }

  .day-spot-item.is-full > .text-box {
    padding-bottom: 2.75rem;
  }

  .img-box {
    width: 100%;
  }

  .img-box .stay-time {
    margin-left: 1.471rem;
	margin-bottom: 0.5em;
  }

  .img-box .stay-img {
    padding: 0 1rem 0 1.353rem;
  }

  .img-box .stay-img::before {
    left: 2%;
  }
  .img-box .stay-img::after {
    right: 1%;
  }

  .stay-img-cap {
    padding-bottom: 1.294rem;
  }

  .move-way-w,
  .move-way-b, 
  .move-way-br {
    margin-left: 8.5rem;
	line-height: 1em;
  }

  .move-way-b::after {
    left: -5.118rem;
  }
}

/* ============== 
day-spot day2
============== */

.course-list.day2 {
  padding: 0 16px 3.618rem 16px;
}

.day2 {
  background-color: #09ab80;
  width: 100vw;
  margin: 0 calc(50% - 50vw);
  position: relative;
}

/*.course-list.day2 .day-spot-item:last-of-type::before {
  position: absolute;
  content: "";
  width: 69.34px;
  height: 221.99px;
  background: url(../img/modelcourse/model-wave04.svg);
  background-position: center;
  background-repeat: no-repeat;
  bottom: -221.99px;
  left: 7.5rem;
}*/

.course-list.day2::before {
  position: absolute;
  content: "";
  display: block;
  background-image: url("../img/common/wave-green.svg");
  left: 0;
  transform: scaleY(-1);
  transform-origin: center;
  width: 100%;
  background-size: 113.87rem 5rem;
  background-repeat: repeat-x;
  background-position: center bottom;
  top: -2rem;
  height: 5rem;
}

.course-list.day2::after {
  position: absolute;
  content: "";
  display: block;
  background-image: url("../img/common/wave-green.svg");
  left: 0;
  transform-origin: center;
  width: 100%;
  background-size: 113.87rem 5rem;
  background-repeat: repeat-x;
  background-position: center top;
  bottom: -2rem;
  height: 5rem;
}

.course-list.day2 .day-spot-item {
  position: relative; /* z-indexを有効にするために必須 */
  z-index: 2; /* 波線の z-index: 1 よりも大きな数字を指定 */
  background-color: #fff;
}

/* .day2 の中にある .move-way-w の擬似要素(波線)の設定を上書き */
.course-list.day2 .move-way-w::after {
  z-index: 1; /* -1 から 1 に変更して、背景色の上に表示させる */
}

/*ベイカート*/

.move-way-br {
  font-size: 0.941rem;
  font-weight: 500;
  padding-top: 2.176rem;
  padding-left: 31.7px;
  padding-bottom: 1.882rem;
  margin-top: 0.731rem;
  margin-bottom: 0.731rem;
  margin-left: 12.5rem;
  position: relative;
}

.move-way-br::before {
  position: absolute;
  content: "";
  width: 25px;
  height: 25px;
  background: url(../img/modelcourse/model-icon-baycart.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
  top: 2.176rem;
  left: 0;
}

.move-way-br::after {
  position: absolute;
  content: "";
  width: 4.059rem;
  height: 7.412rem;
  top: -0.731rem;
  left: -4.118rem;
  background: url(../img/modelcourse/model-wave02.svg);
  background-size: contain;
  background-repeat: no-repeat;
}

.day2 .move-way-br::before {
  background: url(../img/modelcourse/model-icon-baycart-white.svg);
   background-repeat: no-repeat;
	top: 2.6rem;
}


/* 自転車 */
.move-way-c {
  font-size: 0.941rem;
  font-weight: 500;
  padding-top: 2.176rem;
  padding-left: 31.7px;
  padding-bottom: 1.882rem;
  margin-top: 0.731rem;
  margin-bottom: 0.731rem;
  margin-left: 12.5rem;
  position: relative;
}

.move-way-c::before {
  position: absolute;
  content: "";
  width: 25px;
  height: 25px;
  background: url("../img/modelcourse/model-icon-bicycle.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
  top: 2.4rem;
  left: 0.3rem;
}

.move-way-c::after {
  position: absolute;
  content: "";
  width: 4.059rem;
  height: 7.412rem;
  top: -0.731rem;
  left: -4.118rem;
  background: url(../img/modelcourse/model-wave02.svg);
  background-size: contain;
  background-repeat: no-repeat;
}

.day2 .move-way-c::before {
  background: url("../img/modelcourse/model-icon-bicycle-white.svg");
   background-repeat: no-repeat;
	top: 2.6rem;
}

/* 車 */

.move-way-car {
  font-size: 0.941rem;
  font-weight: 500;
  padding-top: 2.176rem;
  padding-left: 31.7px;
  padding-bottom: 1.882rem;
  margin-top: 0.731rem;
  margin-bottom: 0.731rem;
  margin-left: 12.5rem;
  position: relative;
}

.move-way-car::before {
  position: absolute;
  content: "";
  width: 25px;
  height: 25px;
  background: url("../img/modelcourse/model-icon-car.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
  top: 2.4rem;
  left: 0.3rem;
}

.move-way-car::after {
  position: absolute;
  content: "";
  width: 4.059rem;
  height: 7.412rem;
  top: -0.731rem;
  left: -4.118rem;
  background: url(../img/modelcourse/model-wave02.svg);
  background-size: contain;
  background-repeat: no-repeat;
}

.day2 .move-way-car::before {
  background: url("../img/modelcourse/model-icon-car-white.svg");
   background-repeat: no-repeat;
	top: 2.6rem;
}


.end {
  font-size: 1.412rem;
  font-weight: 600;
  color: #fff;
  width: 6.941rem;
  height: 6.941rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 13rem 10% 0 5.7rem;
  position: relative;
  z-index: 2;
  background-color: var(--model-darkblue);
}

/*.end::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border-radius: 50%;
  background-color: var(--model-darkblue);
  z-index: -1;
}*/

.end-wrap {
  position: relative;
  z-index: 1;
}

.end-wrap::before {
  position: absolute;
  content: "";
  width: 69.34px;
  height: 221.99px;
  background: url(../img/modelcourse/model-wave04.svg);
  background-position: center;
  background-repeat: no-repeat;
  bottom: -221.99px;
  left: 7.3rem;
  top: -214px;
  z-index: 0;
}

.end::after {
  content: "";
  position: absolute;
  width: 260.524px;
  height: 222.979px;
  top: -6.941rem;
  left: 6.941rem;
  background: url("../img/modelcourse/goal.webp");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 1;
}

.day2 .move-way-b,
.day2 .move-way-w,
.day2 .move-way-br,
.day2 .move-way-c,
.day2 .move-way-car {
	color: #fff;
}

@media (max-width: 768px) {
  .course-list + .course-list .day-spot {
    padding-left: 2rem;
  }

  /*.course-list.day2 .day-spot-item:last-of-type::before {
    left: 3.5em;
  }*/

  .end-wrap::before {
    left: 3.5em;
  }
	
  .move-way-br,
  .move-way-c, 
  .move-way-car	{
    margin-left: 8.5rem;
	line-height: 1em;
  }

  .end {
    margin-left: 2.5rem;
  }

  .end::after {
    content: "";
    position: absolute;
    width: 13.741rem;
    height: 11.353rem;
    top: -7.941rem;
    left: 4.941rem;
    background: url("../img/modelcourse/goal.webp");
    background-size: contain;
    background-repeat: no-repeat;
    z-index: -1;
  }
}

@media (max-width: 350px) {
  .end::after {
    top: -8.941rem;
    left: 3.941rem;
    width: 12.5rem;
  }
}

/* ============== 
map
============== */

.map-wrapper {
  position: relative;
  width: 100%;
  height: 480px;
  margin: 5rem auto 7rem auto;
}

.mymap {
  border: 1px solid #ccc;
  border-radius: 10px;
  width: 100%;
  height: 100%;
}

.map {
  background-color: #e2e2e2;
  border-radius: 0.588rem;
  height: 412px;
}

.map-title {
  width: 100%;
  height: auto;
  position: absolute;
  left: 1.235rem;
  top: -3.471rem;
  z-index: 10;
}

.map-title img {
  width: 140px;
  height: 177px;
}

@media (max-width: 768px) {
  .map-wrapper {
    margin: 10rem auto 0rem auto;
  }
  .map-title {
    text-align: center;
	top: -7.471rem;
	left: auto;
  }
}