@charset "UTF-8";
/*
----------
探検しよう
----------
*/
/*
----------------------------------------------------------
keyvisual
----------------------------------------------------------
*/
.mainvisual {
  position: relative;
}
.mainvisual__copy {
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 2;
}
.mainvisual__copy h1 {
  text-align: center;
}
.mainvisual__copy h1 img {
  max-width: 900px;
  /* 最小px, 画面幅のX%, 最大 */
  width: clamp(18.75rem, -5.288rem + 51.282vw, 56.25rem);
}
.mainvisual__copy h2 {
  color: #004986;
  font-size: clamp(18px, 2vw, 33px);
  font-family: "Mochiy Pop One", serif;
  font-weight: 400;
  line-height: 1.8;
  text-align: center;
}
.mainvisual a.btn_motion {
  position: absolute;
  right: 2%;
  top: 240px;
  z-index: 10;
}

@media screen and (min-width: 768px) and (max-width: 1200px), screen and (min-width: 1201px) {
  .illust_area img.map_illust {
    width: 100%;
  }
}
@media screen and (max-width: 767px) {
  .mainvisual__copy {
    top: -4.5vw;
  }
  .mainvisual__copy h2 span {
    display: block;
  }
  .mainvisual a.btn_motion {
    top: 37%;
    width: 92px;
  }
}
/*
----------------------------------------------------------
マップ
----------------------------------------------------------
*/
.map_container {
  height: auto;
  margin: 0 auto 6em auto;
  position: relative;
  width: 100%;
}

@media screen and (max-width: 767px) {
  .map_container {
    margin: -80px auto 6em auto;
    /* IE, Edge 対応 */
    -ms-overflow-style: none;
    overflow-x: scroll;
    /* Firefox 対応 */
    scrollbar-width: none;
    width: 100%;
  }
  .map_container .illust_area {
    position: relative;
    text-align: center;
    width: 845px;
  }
  .map_container .illust_area::-webkit-scrollbar {
    /* Webkit系（Chrome, Safari, Edge）のスクロールバーを非表示にする */
    display: none;
  }
}
/* クリッカブルボタン 共通 */
.map-button {
  color: white;
  display: flex;
  padding: left top;
  position: absolute;
}
.map-button:hover {
  opacity: 0.9;
  transform: translateY(-4px);
}

/*
----------------------------------------------------------
KV ボタンの位置調整　PC
----------------------------------------------------------
*/
.map-button {
  max-height: 102px;
  height: clamp(3.75rem, -7.5rem + 15vw, 5.625rem);
}
.map-button.btn01 {
  left: 50%;
  top: 39%;
}
.map-button.btn02 {
  left: 10%;
  top: 34%;
}
.map-button.btn03 {
  left: 5%;
  top: 45%;
}
.map-button.btn04 {
  left: 5%;
  top: 68%;
}
.map-button.btn05 {
  left: 20%;
  top: 80%;
}
.map-button.btn06 {
  left: 43%;
  top: 62%;
}
.map-button.btn07 {
  left: 46%;
  top: 86%;
}
.map-button.btn08 {
  left: 80%;
  top: 68%;
}
.map-button.btn09 {
  left: 82%;
  top: 38%;
}

/*
----------------------------------------------------------
KV ボタンの位置調整　SP
----------------------------------------------------------
*/
@media screen and (max-width: 767px) {
  .map-button {
    height: clamp(2.5rem, -4.389rem + 14.352vw, 6.375rem);
  }
  .map-button.btn01 {
    left: 52%;
    top: 45%;
  }
  .map-button.btn02 {
    left: 12%;
    top: 42%;
  }
  .map-button.btn03 {
    left: 5%;
    top: 52%;
  }
  .map-button.btn04 {
    left: 6%;
    top: 70%;
  }
  .map-button.btn05 {
    left: 18%;
    top: 83%;
  }
  .map-button.btn06 {
    left: 50%;
    top: 66%;
  }
  .map-button.btn07 {
    left: 45%;
    top: 87%;
  }
  .map-button.btn08 {
    left: 81%;
    top: 69%;
  }
  .map-button.btn09 {
    left: 85%;
    top: 45%;
  }
}
/*
----------------------------------------------------------
探検しようの各ページへのボタン
----------------------------------------------------------
*/
.p-exploration {
  background-color: #fff5b0;
}
.p-exploration__content {
  background-image: url("../../../assets/img/exploration/content_bg.png");
  background-position: center 0;
  background-size: cover;
  height: auto;
  position: relative;
  text-align: center;
  width: 100%;
}
.p-exploration__content h2 {
  left: 0;
  margin: 0 auto;
  position: absolute;
  right: 0;
  text-align: center;
  top: -1em;
  width: clamp(335px, 38vw, 674px);
}
.p-exploration__btns {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 12em 0 5em 0;
  position: relative;
  z-index: 5;
}
.p-exploration__btns dl {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-bottom: 5rem;
  width: calc(33.3333333333% - 30px);
}
.p-exploration__btns dl dt {
  text-align: left;
  width: 100%;
}
.p-exploration__btns dl dt img {
  margin: 0;
  min-height: 50px;
  width: auto;
}
.p-exploration__btns dl .thumb {
  align-items: center;
  display: flex;
  flex-grow: 1;
  justify-content: center;
  width: 100%;
}
.p-exploration__btns dl .thumb img {
  height: auto;
  max-width: 100%;
}
.p-exploration__bottom {
  background-image: url("../../../assets/img/exploration/content__border.png");
  background-position: center 0;
  background-repeat: repeat-x;
  background-size: auto;
  min-height: 20px;
  position: relative;
}
.p-exploration__bottom img {
  position: absolute;
  top: -50px;
  z-index: 10;
}
.p-exploration__bottom img.illust_01 {
  left: 5%;
}
.p-exploration__bottom img.illust_02 {
  right: 5%;
}

@media screen and (max-width: 767px) {
  .p-exploration__content {
    background-size: cover;
  }
  .p-exploration__content h2 {
    width: 90%;
  }
  .p-exploration__btns {
    padding: 6em 0 6em 0;
  }
  .p-exploration dl {
    width: calc(50% - 10px);
    margin-bottom: 2.5rem;
  }
  .p-exploration dl dt {
    margin-bottom: 5px;
    text-align: center;
  }
  .p-exploration dl dt img {
    min-height: auto;
  }
  .p-exploration__bottom {
    background-size: auto 100%;
    height: 13px;
    min-height: 13px;
  }
  .p-exploration__bottom img.illust_01 {
    display: none;
  }
  .p-exploration__bottom img.illust_02 {
    height: 60px;
    top: -30px;
  }
}
/*
----------------------------------------------------------
キャラクターの位置
----------------------------------------------------------
*/
@media screen and (max-width: 1400px) {
  .p-exploration .charactors_area {
    display: none;
  }
}
.p-exploration .charactors_area img.charactor {
  position: absolute;
  z-index: 1;
}
.p-exploration .charactors_area img.charactor.charactor_01 {
  left: 1%;
  position: absolute;
  top: 13%;
  width: clamp(5.625rem, 2.642rem + 12.727vw, 12.188rem);
}
.p-exploration .charactors_area img.charactor.charactor_02 {
  position: absolute;
  right: 0;
  top: 22%;
  width: clamp(5.625rem, 2.642rem + 12.727vw, 12.188rem);
}
.p-exploration .charactors_area img.charactor.charactor_03 {
  left: 0;
  position: absolute;
  top: 60%;
  width: clamp(6.25rem, -12.583rem + 44.444vw, 15.75rem);
}

/*# sourceMappingURL=exploration.css.map */