@charset "utf-8";
/*==================================
  Top
==================================*/
.top-key-image {
  margin-bottom: 5rem;
}
.top-image-area {
  position: relative;
}
.top-image-area {
  position: relative;
}
.top-image {
  width: 100%;
  height: auto;
}
.top-text {
  position: absolute;
  top: -20%;
  left: 50%;
  margin-left: -37.5%;
  width: 75%;
  height: auto;
}
.secession-title {
  display: block;
  padding: 0 0 3rem 4rem;
  background-repeat: no-repeat;
  background-image: url(../img/bg_title.svg);
  background-position: 0% 100%;
  background-size: 450px auto;
}
.background-road {
  padding-top: 300px;
  background-repeat: no-repeat;
  background-image: url(../img/bg_road.svg);
  background-position: 50% 0%;
  background-size: 100% auto;
}
.secession-mark {
  padding-bottom: 200px;
  background-repeat: no-repeat;
  background-image: url(../img/bg_paragraphe.svg);
  background-position: 50% 100%;
  background-size: 7% auto;
}
.plorogue-movie {
  position: relative;
  width: 100%;
  padding: calc(570 / 1012 * 100%) 0 0;
}
.plorogue-movie {
  display: block;
  overflow: hidden;
}
.plorogue-movie iframe {
  display: block;
  overflow: hidden;
  width: 1200px;
  margin: 0 auto;
}
.plorogue-movie iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/*==================================
  Map
==================================*/
.map-img {
  width: 100%;
}
.area-map {
  position: relative;
}
.area_item {
  display: block;
  width: calc((60 / 1220)* 100%); /* 親要素に対する比率計算 */
  text-align: center;
}
.area_item img {
  width: 100%;
  height: auto;
}
.pos1 {
  position: absolute;
  top: 47%;
  left: 64%;
  z-index: 999;
}
.pos2 {
  position: absolute;
  top: 47%;
  left: 32%;
  z-index: 999;
}
.pos3 {
  position: absolute;
  top: 26%;
  left: 23%;
  z-index: 999;
}
.pos4 {
  position: absolute;
  top: 13%;
  left: 34%;
  z-index: 999;
}
.pos5 {
  position: absolute;
  top: 17%;
  left: 57%;
  z-index: 999;
}
.pos6 {
  position: absolute;
  top: 10%;
  left: 78%;
  z-index: 999;
}
.spot-area .area_item img:hover {
  opacity: 1.0 !important;
  filter: saturate(300%) !important;
}
/*-------- Animation ----------------*/
.map-img {
  transform: scale(0);
  opacity: 0;
}
.pos1, .pos2, .pos3, .pos4, .pos5, .pos6 {
  transition: 0.5s ease-out;
  transform: translateY(-50px);
  opacity: 0;
}
.map-img.on {
  transition: 1.0s ease;
  transform: scale(1);
  opacity: 1.0;
}
.pos1.on {
  transition-delay: 0ms;
  transform: translateY(0);
  opacity: 1.0;
  animation: spot_anime 2s infinite;
}
.pos2.on {
  transition-delay: 200ms;
  transform: translateY(0);
  opacity: 1.0;
  animation: spot_anime 2s infinite;
}
.pos3.on {
  transition-delay: 400ms;
  transform: translateY(0);
  opacity: 1.0;
  animation: spot_anime 2s infinite;
}
.pos4.on {
  transition-delay: 600ms;
  transform: translateY(0);
  opacity: 1.0;
  animation: spot_anime 2s infinite;
}
.pos5.on {
  transition-delay: 800ms;
  transform: translateY(0);
  opacity: 1.0;
  animation: spot_anime 2s infinite;
}
.pos6.on {
  transition-delay: 1000ms;
  transform: translateY(0);
  opacity: 1.0;
  animation: spot_anime 2s infinite;
}
@keyframes spot_anime {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}
.icon-scroll {
  display: none;
}
/*==================================
  List
==================================*/
.area-title {
  font-size: 3rem;
  text-align: center;
  color: #FFFFFF;
  letter-spacing: 0.5rem;
  width: 18vw;
  border-radius: 50px;
  padding: 1.3% 1.0% 0.8% 2%;
  margin-bottom: 3rem;
}
.area {
  background-color: #f88a94;
}
.environment {
  background-color: #0695d1;
}
.lt-06 {
  letter-spacing: 0.6rem;
}
.rwd-grid-cardlist01 a.nolink {
  pointer-events: none;
}
.br-pc {
  display: none;
}
.text-l {
  display: inline-block;
  transform: scale(3.0, 1);
  padding: 0 2rem;
}
/*==================================
  sp
==================================*/
@media screen and (max-width: 767px) {
  .top-image {
    width: 140%;
    margin-left: -20%;
  }
  .top-text {
    position: absolute;
    top: -10%;
    left: 50%;
    margin-left: -45%;
    width: 90%;
    height: auto;
  }
  .secession-title {
    background-size: 300px auto;
    padding: 0 0 2.5rem 1rem;
  }
  .secession-mark {
    padding-bottom: 70px;
    margin-bottom: 70px;
    background-position: 50% 100%;
    background-size: 10% auto;
  }
  .background-road {
    padding-top: 70px;
  }
  .area-title {
    font-size: 1.8rem;
    line-height: 1rem;
    letter-spacing: 0.2rem;
    padding: 4% 2% 3.5% 2%;
    border-radius: 50px;
    width: 35%;
    margin-bottom: 3rem;
  }
  iframe {
    width: 100%;
    height: 200px;
  }
  .area-map {
    position: relative;
    width: 230%;
  }
  .overflow {
    overflow: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none
  }
  .overflow::-webkit-scrollbar {
    display: none
  }
  .area_item {
    width: 5%;
  }
  .pos1 {
    position: absolute;
    top: 46%;
    left: 64%;
  }
  .pos2 {
    position: absolute;
    top: 45%;
    left: 32%;
  }
  .pos3 {
    position: absolute;
    top: 25.5%;
    left: 23%;
  }
  .pos4 {
    position: absolute;
    top: 12%;
    left: 34%;
  }
  .pos5 {
    position: absolute;
    top: 16.5%;
    left: 57%;
  }
  .pos6 {
    position: absolute;
    top: 10%;
    left: 78%;
  }
  .icon-scroll {
    display: block;
    position: absolute;
    z-index: 999;
    top: 50.0vw;
    left: 87.5vw;
    width: 32vw;
    height: 32vw;
    opacity: 0.0;
  }
  .icon-scroll-on {
    transition-delay: 1500ms !important;
    opacity: 1.0 !important;
    -webkit-animation: map_swipe_animation 3s ease infinite both;
    animation: map_swipe_animation 3s ease infinite both;
    -webkit-transition: opacity .5s ease, visibility .5s ease;
    transition: opacity .5s ease, visibility .5s ease
  }
  @-webkit-keyframes map_swipe_animation {
    0% {
      -webkit-transform: translateX(-20%);
      transform: translateX(-20%);
      -webkit-animation-timing-function: ease;
      animation-timing-function: ease
    }
    45%, 55% {
      -webkit-animation-timing-function: ease;
      animation-timing-function: ease;
      -webkit-transform: translateX(20%);
      transform: translateX(20%)
    }
    100% {
      -webkit-animation-timing-function: ease;
      animation-timing-function: ease;
      -webkit-transform: translateX(-20%);
      transform: translateX(-20%)
    }
  }
  @keyframes map_swipe_animation {
    0% {
      -webkit-transform: translateX(-20%);
      transform: translateX(-20%);
      -webkit-animation-timing-function: ease;
      animation-timing-function: ease
    }
    45%, 55% {
      -webkit-animation-timing-function: ease;
      animation-timing-function: ease;
      -webkit-transform: translateX(20%);
      transform: translateX(20%)
    }
    100% {
      -webkit-animation-timing-function: ease;
      animation-timing-function: ease;
      -webkit-transform: translateX(-20%);
      transform: translateX(-20%)
    }
  }
  .area-map::before {
    opacity: 1;
    visibility: visible
  }
  .icon-scroll.fade {
    transition-delay: 0ms !important;
    opacity: 0 !important;
    visibility: hidden
  }
  .br-pc {
    display: block;
  }
  .map-img {
    transform: scale(0.46);
    opacity: 1;
  }
  .map-img.on {
    transition-delay: 1.5s !important;
    transition: 1.0s ease;
    transform: scale(1);
    opacity: 1.0;
  }
}