/*--------------
  common
--------------*/
:root{
  --ys-c-pink:#dfbbc6;
  --ys-c-lGreen:#b5c3a6;
  --ys-c-vPink:#ca5572;
  --ys-c-brown:#4f321b;
}

main.c-ys{
  background: var(--ys-c-pink);
  position: relative;
  display: block;
}
main.c-ys::before{
  position: absolute;
  content: "";
  background: url(img/feature/yakumo/c-ys_deco.svg) no-repeat center top / 100%;
  top: -17vw;
  left: 0;
  width: 100%;
  height: 24vw;
}

main.c-ys .p-bgStream_image1{
  top: 2.4%;
}
main.c-ys .p-bgStream_image2{
  top: 4.4%;
}

.pin-white path {
  fill: none;
  stroke: var(--color-white);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.31px;
}

.feature-contents{
  margin-bottom: var(--section-margin);
  position: relative;
}

.contents-slideLoop{
  display: flex;
  flex-shrink: 0;
  margin-top: 5.5rem;
  overflow: hidden;
}

.contents-slideLoop ul{
  display: flex;
  animation: scroll-left 60s linear infinite;
  gap: min(2rem, 4vw);
  width: max-content;
}

.contents-slideLoop ul li{
    width: 73vw;
}

@keyframes scroll-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.feature-flex{
  display: grid;
  gap: min(4rem, 8vw);
  grid-template-columns: repeat(1, 1fr);
}

.feature-pageTop{
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  z-index: 3;
  transition: var(--transition);
}

.feature-pageTop a{
  display: flex;
  flex-direction: column;
  text-align: center;
  justify-content: center;
  background: url(img/top/scroll-sunset.png) no-repeat center;
  background-size: 100%;
  color: var(--color-white);
  line-height: 1.4;
  width: min(5rem);
  height: min(5rem);
}

#js-page-top,#js-page-top.DownMove{
  opacity: 0;
}
#js-page-top.UpMove{
  opacity: 1;
}


/*--------------
  八雲とセツゆかりの地を訪ねて
--------------*/
.p-KV.KV-featureYakumo{
background-image: url(img/feature/yakumo/p-KV_featureYakumo.webp);
}

.feature-main{
  position: relative;
  margin: calc(var(--section-margin) / 2) auto var(--section-margin);
}

.feature-main .-deco-jizou1{
  position: absolute;
  right: -10%;
  bottom: -19%;
  width: min(8rem,16vw);
}

.ys-KV_wrapper{
  position: relative;
  width: 80%;
  margin: 0 auto;
}

.ys-KV_textRight,
.ys-KV_textLeft,
.ys-KV_textCenter{
  position: absolute;
}

.ys-KV_textRight{
  top: 3%;
  right: -8%;
  width: min(5.4rem,10vw);
}

.ys-KV_textLeft{
  bottom: -2%;
  left: -9%;
  width:min(5.4rem,10vw);
}

.ys-KV_textCenter{
  bottom: 2%;
  width: min(83%);
  left: 50%;
  transform: translateX(-50%);
}

/*---intro---*/
.feature-intro{
  margin: calc(var(--section-margin) / 2) 0 var(--section-margin);
  z-index: 1;
  position: relative;
}

.ys-intro .-deco-jizou2{
  position: absolute;
  width: min(9rem, 18vw);
  bottom: -16%;
  left: 0;
}

.ys-intro_main{
  position: relative;
}

.ys-intro_main h2{
  font-size: min(4.64rem, 11vw);
  font-weight: 400;
  line-height: 1.5;
  writing-mode: tb;
  height: auto;
  margin: min(18rem,32vw) auto min(6rem,14vw);
}

.ys-intro_image{
  position: absolute;
  width: min(16rem,25vw);
}

.ys-intro_image._image__setsu{
  bottom: -17%;
  left: min(-4%);
}

.ys-intro_image._image__yakumo{
  top: -34%;
  right: min(-4%);
}

.ys-intro_textArea{
  font-size: min(1.2rem, 3.83vw);
  display: flex;
  flex-direction: column;
  gap: min(2rem, 4vw);
  line-height: 2;
}

.ys-links .contents{
  width: min(52rem, 86%);
}

.ys-links .contents .feature-flex{
  gap: min(4rem, 4vw);
}

.ys-links_modelCourse{
  width: min(37rem,100%);
  margin: min(var(--section-margin) / 3) auto 0;
}

.ys-links_item{
  width: 73%;
  margin: 0 auto;
}

/*---spot---*/
.ys-spot{
  z-index: 1;
}

.ys-spot_mainTitle{
  position: relative;
  width: min(62rem, 89%);
  margin: 0 auto min(6rem, 18vw);
}

.ys-spot_mainTitle>.ys-spot_enTitle{
  position: absolute;
  color: var(--color-white);
  text-align: center;
  font-size: min(1.2rem,3.24vw);
  left: 50%;
  transform: translate(-50%, -50%);
  width: 72%;
  bottom: -61%;
}

.ys-spot_introText{
  color: var(--ys-c-brown);
  margin: 0 auto min(var(--section-margin) / 3);
  writing-mode: tb;
  font-size: var(--font-size-subTitle1);
  font-weight: 600;
  line-height: 2;
}

.ys-spot_item h3{
  display: flex;
  font-size: var(--font-size-title2);
  padding: min(.8rem, 4vw) 0;
  line-height: 1.4;
  gap: min(.6rem);
}

.ys-spot_item h3 .pin{
  width: min(2rem, 6vw);
}

.ys-spot_itemImage picture{
  display: block;
  padding-top: 65.25%;
  position: relative;
  overflow: hidden;
}
.ys-spot_itemImage picture img{
  position: absolute;
  top: 0;
  left: 0;
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
}

.ys-spot .spot-bgStream_image1,.ys-spot .spot-bgStream_image2{
-webkit-transform: translate(0, 0);
  transform: translate(0, 0);
  -webkit-transition: all 3s;
  transition: all 3s;
}

.ys-spot .spot-bgStream_image1{
  top: 4%;
  right: 0;
  width: min(50rem, 52vw);
  z-index: -1;
}
.ys-spot .spot-bgStream_image1 img{
  -webkit-animation: fuwafuwa 20s -15s infinite linear;
  animation: fuwafuwa 20s -15s infinite linear;
}

.ys-spot .spot-bgStream_image2{
  top: -2%;
  z-index: -1;
  width: min(27rem,27vw);
}
.ys-spot .spot-bgStream_image2 img,.ys-spot .spot-bgStream_image3 img{
  -webkit-animation: fuwafuwa 25s -15s infinite linear;
  animation: fuwafuwa 25s -15s infinite linear;
}

.ys-spot .spot-bgStream_image3{
  transform: scale(-1, -1);
  right: 0;
  bottom: 0%;
  width: min(27rem,27vw);
  z-index: -1;
}

.ys-spot .spot-bgStream_image4{
  right: 0;
  width: min(75rem, 91vw);
  bottom: -4.6%;
}


/*---swiper/model corse---*/
.feature-swiper{
  position: relative;
}

.ys-modelCorse{
  position: relative;
  z-index: 1;
}

.ys-modelCorse_contents{
background: linear-gradient(0deg,rgba(225, 136, 56, .7) 0%, rgba(225, 160, 98, .7) 6%, rgba(226, 242, 244, .7) 14%);
  border-radius: var(--border-radius);
  padding:min(8rem,6vw);
}

.ys-modelCorse .ys-spot_mainTitle{
  margin: 0 auto min(6rem, 10vw);
}
.ys-modelCorse .ys-spot_mainTitle>.ys-spot_enTitle{
  bottom: -15%;
}

.ys-modelCorse_item{
  margin-bottom: calc(var(--section-margin) / 2);
}
.ys-modelCorse_item:last-of-type{
  margin-bottom: 0;
}

.ys-modelCorse_detailsTitle{
  padding: min(2rem, 4vw) 0;
  margin-bottom: min(2rem, 4vw);
  position: relative;
}
.ys-modelCorse_detailsTitle::before{
  position: absolute;
  content: "";
  background: var(--color-black);
  width: min(6rem);
  height: 1px;
  bottom: 0;
  left: 0;
}

.ys-modelCorse_detailsTitle h3{
  font-size: min(2.4rem, 5vw);
  line-height: 1.5;
}

.deco-foot{
  position: absolute;
  z-index: -1;
  width: min(16rem, 32vw);
}

.deco-foot.-foot1{
  top: 2%;
  right: 0;
}

.deco-foot.-foot2{
  top: 22%;
  left: 0;
}

.deco-foot.-foot3{
  top: 32%;
  right: 0;
}

.deco-foot.-foot4{
  top: 42%;
  left: 0;
}

.deco-foot.-foot5{
  top: 52%;
  right: 0;
}

.deco-foot.-foot6{
  top: 62%;
  left: 0;
}

.deco-foot.-foot7{
  top: 72%;
  right: 0;
}

.deco-foot.-foot8{
  top: 82%;
  left: 0;
}


@media screen and (min-width:1024px) {
main.c-ys .p-bgStream_image1{
  top: 5%;
}
main.c-ys .p-bgStream_image2{
  top: 7%;
}

main.c-ys::before{
  top: -16vw;
  height: 24vw;
}

.p-KV.KV-featureYakumo{
  top: 8%;
}

.deco-foot{
  width: min(22rem, 24vw);
}

.deco-foot.-foot1{
  top: 46rem;
}

.deco-foot.-foot2{
  top: 114rem;
}
.deco-foot.-foot3{
  top: 215rem;
}
.deco-foot.-foot4{
  top: 338rem;
}
.deco-foot.-foot5{
  top: 436rem;
}
.deco-foot.-foot6{
  top: 527rem;
}
.deco-foot.-foot7{
  top: 620rem;
}
.deco-foot.-foot8{
  top: 872rem;
}

}


@media screen and (min-width:768px) {
.feature-flex{
  grid-template-columns: repeat(2, 1fr);
}

.feature-main .-deco-jizou1{
    bottom: 0;
}

.contents-slideLoop ul li{
    width: 48vw;
}

/*--------------
  八雲とセツゆかりの地を訪ねて
--------------*/
  .ys-KV_wrapper{
    width: min(980px, 64%);
  }

  .ys-KV_textRight{
    top: 7%;
    right: -6%;
    width: min(6rem, 7vw);
  }

  .ys-KV_textLeft{
    width: min(6rem, 7vw);
  }

  .ys-KV_textCenter{
    width: min(89%);
  }

  /*---intro---*/
  .ys-intro_image{
    width: min(16rem, 19vw);
  }

  .ys-intro_image._image__setsu{
    bottom: -17%;
    left: min(11%);
  }

  .ys-intro_image._image__yakumo{
    top: -52%;
    right: min(8%);
  }

  .ys-intro .-deco-jizou2{
    bottom: -3%;
  }

  .ys-intro_textArea{
    writing-mode: tb;
    line-height: 2;
    height: 19rem;
    text-align: justify;
    margin: 0 auto;
  }

  .ys-links_item{
    width: 100%;
  }
  .ys-links_item img,.ys-links_modelCourse img{
    display: block;
    transition: var(--transition);
  }

  .ys-links_item a:hover img,
  .ys-links_modelCourse a:hover img{
    transform: scale(.96);
    opacity: .9;
  }

  /*---spot---*/
  .ys-spot_mainTitle>.ys-spot_enTitle{
    bottom: -12%;
    transform: translate(-50%, -50%);
  }

  .ys-spot .spot-bgStream_image2{
    top: -6%;
  }

  .ys-spot .spot-bgStream_image1{
    top: 13%;
  }

  .ys-spot .spot-bgStream_image3{
    bottom: 3%;
  }

  .ys-spot .spot-bgStream_image4{
    bottom: -13%;
  }

  /*---swiper/model corse---*/
  .ys-modelCorse_contents{
    padding:min(8rem,8vw) min(12rem,10vw);
  }

  .ys-modelCorse .ys-spot_mainTitle>.ys-spot_enTitle{
    bottom: 2%;
  }

  .feature-pageTop a:hover{
    transform: scale(.95);
  }
}