@charset "utf-8";

/*---------------------- 基本 ----------------------*/


/* 背景をscroll に（固定だと動きが分かりにくい） */
#main {
  background-attachment: scroll;
  background-position: calc(50% + var(--bgx, 0px)) calc(50% + var(--bgy, 0px));
}

/* 背景として最背面 背景用の専用マーカー*/
[data-parax-bg] {
  position: fixed;
  inset: 0;
  background: url("../../img/j-paper.png") center/cover;
  background-repeat: repeat;
  background-position: center center;
  background-size: cover;
  transform: translate3d(var(--px, 0), var(--py, 0), 0);
  z-index: -1;
}




/* ===== セクションを位置基準とする ===== */
section {
  position: relative;
}

/* ===== パララックス用の土台 ===== */
.pin {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}



/* 動かす対象の共通（★ここで var(--px/--py) を反映） */
.pin>.parax {
  position: absolute;
  pointer-events: auto;
  will-change: transform;
  transform: translate3d(var(--px, 0), var(--py, 0), 0);
}

/* 置き場所プリセット（座標だけ決める。transformは触らない） */
.pin.at-left-top>.parax {
  left: 0;
  top: 0;
  display: flex;
  justify-content: start;
}

.pin.at-right-top>.parax {
  right: 0;
  top: 0;
  display: flex;
  justify-content: end;
}

.pin.at-left-center>.parax {
  left: 0;
  top: 50%;
  transform: translateY(-50%) translate3d(var(--px, 0), var(--py, 0), 0);
  display: flex;
  justify-content: start;
}

.pin.at-right-center>.parax {
  right: 0;
  top: 50%;
  transform: translateY(-50%) translate3d(var(--px, 0), var(--py, 0), 0);
  display: flex;
  justify-content: end;
}

.pin.at-left-bottom>.parax {
  left: 0;
  bottom: 0;
  display: flex;
  justify-content: start;
}

.pin.at-right-bottom>.parax {
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: end;
}

.pin.at-center>.parax {
  left: 50%;
  top: 0;
  transform: translateX(-50%) translate3d(var(--px, 0), var(--py, 0), 0);
}

.pin.at-center-center>.parax {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) translate3d(var(--px, 0), var(--py, 0), 0);
}

.pin.at-center-bottom>.parax {
  left: 50%;
  bottom: 0;
  transform: translateX(-50%) translate3d(var(--px, 0), var(--py, 0), 0);
}





/* 見た目（任意） */
.parax-text {
  display: block;
}

.parax-text-wrap {
  position: relative;
  display: inline-block;
}

.parax-text-wrap::before {
  content: "";
  position: absolute;
  top: -8.33vw;
  left: 50%;
  transform: translatex(-50%);
  width: 1px;
  height: 8.33vw;
  background: #fff;
}

.parax-text-wrap h2 {
  font-size: clamp(30px, 3vw, 38px);
  writing-mode: vertical-rl;
}

.parax-text-wrap h2 span {
  font-size: clamp(20px, 2vw, 30px);
  padding: 15px 0;
}



/* テキスト */
.parax-text-p p {
  font-size: clamp(12px, 2vw, 18px);
  line-height: 2em;
}

.parax img {
  display: block;
  height: auto;
}

.z-back {
  z-index: 1;
}

.z-front {
  z-index: 3;
}


@media (max-width: 1820px) {

  #page .parax img,
  #top .parax img {
    width: 80%;
  }


}

@media (max-width: 1620px) {

  #top .parax img {
    width: 65%;
  }

  #page .parax img {
    width: 55%;
  }


}


@media (max-width: 1460px) {


  #top .parax img {
    width: 65%;
  }

  #page .parax img {
    width: 45%;
  }

  #page .pin {
    display: none;
  }


  .parax-text-wrap h2 {
    writing-mode: initial;
    margin-bottom: initial;
    display: flex;
    flex-direction: column;
  }

  #top #info .parax-text-wrap h2,
  #top #hotspring .parax-text-wrap h2 {
    writing-mode: vertical-rl;
    flex-direction: row;
  }

}


@media (max-width: 1260px) {


  #top .parax img {
    width: 60%;
  }

  #page .parax img {
    width: 45%;
  }




}

@media (max-width: 1023px) {

  #top #info .parax-text-wrap h2 {
    writing-mode: initial;
  }
}

@media (max-width: 800px) {

  #page .parax img,
  #top .parax img {
    width: 100%;
  }

}