@charset "UTF-8";
/*--------------------------------------*
* foundation
*--------------------------------------*/
/*--------------------------------------*
* ベースカラー
*--------------------------------------*/
/*--------------------------------------*
* フォント
*--------------------------------------*/
/*--------------------------------------*
* ブレイクポイント
*--------------------------------------*/
/*--------------------------------------*
* vw変換(SP用)
*--------------------------------------*/
/*--------------------------------------*
* vw変換(PC用)
*--------------------------------------*/
/*--------------------------------------*
* デフォルトスタイル
*--------------------------------------*/
html,
body {
  width: 100%;
  font-size: 16px;
  margin: 0 auto;
  font-family: "orpheuspro", serif;
  font-weight: 400;
  font-style: normal;
}

img,
video,
object {
  width: 100%;
  border: none;
  display: block;
}

@media screen and (min-width: 958px) {
  .spNone {
    display: block;
  }
}
@media screen and (max-width: 960px) {
  .spNone {
    display: none;
  }
}

@media screen and (min-width: 958px) {
  .pcNone {
    display: none;
  }
}
@media screen and (max-width: 960px) {
  .pcNone {
    display: block;
  }
}

/*--------------------------------------*
* aタグ
*--------------------------------------*/
a {
  display: block;
  text-decoration: none;
  transition: all 0.4s;
  color: #000;
}
@media screen and (min-width: 958px) {
  a:hover {
    opacity: 0.6;
    transition: all 0.4s;
  }
}
a[href=""] {
  pointer-events: none;
}

/*--------------------------------------*
* ローディング
*--------------------------------------*/
#loading-bg {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background: #fff;
  z-index: 999;
}

/*--------------------------------------*
* layout
*--------------------------------------*/
/*--------------------------------------*
* foundation
*--------------------------------------*/
/*--------------------------------------*
* ヘッダー
*--------------------------------------*/
/*--------------------------------------*
* foundation
*--------------------------------------*/
/*--------------------------------------*
* フッター
*--------------------------------------*/
footer .btn_wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
footer .btn_wrap a {
  width: 260px;
  background-color: #34393d;
  color: #fff;
  text-align: center;
  padding: 15px 0;
  font-size: 14px;
  margin: 0 auto;
}
footer .btn_wrap .instagram {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
footer .btn_wrap .instagram span {
  width: 13px;
  display: block;
}
footer .bg {
  margin-top: 170px;
  padding: 280px 0;
  background-color: #34393d;
  position: relative;
}
footer .logo {
  width: 125px;
  margin: 0 auto;
}
footer .copy {
  font-size: 10px;
  color: #fff;
  text-align: center;
  position: absolute;
  width: 100%;
  bottom: 30px;
}

/*--------------------------------------*
* object
*--------------------------------------*/
/*-------------------
* component
-------------------*/
/*--------------------------------------*
* foundation
*--------------------------------------*/
/*--------------------------------------*
* コンテンツ幅
*--------------------------------------*/
/*-------------------
* project
-------------------*/
/*--------------------------------------*
* foundation
*--------------------------------------*/
/*--------------------------------------*
* FV
*--------------------------------------*/
.fv .fv_slider {
  overflow: hidden;
  position: relative;
  height: 100vh;
}
.fv .fv_slider > li {
  position: absolute;
  inset: 0;
}
.fv .fv_slider img {
  height: 100%;
  object-fit: cover;
  object-position: top;
}

@media screen and (min-width: 958px) {
  .fv .fv_slider {
    overflow: hidden;
    position: relative;
    height: 100vh;
    margin: 0 auto;
  }
  .fv .fv_slider > li {
    position: absolute;
    inset: 0;
  }
  .fv .fv_slider img {
    height: 100%;
    object-fit: cover;
    object-position: top;
  }
  .fv .title {
    width: 18.3333333333vw;
    padding: 3.3333333333vw 0;
    margin: 0 auto;
  }
  .fv_bottom {
    width: 18.3333333333vw;
    margin: 0 auto;
    padding: 8.3333333333vw 0;
  }
}
/*--------------------------------------*
* foundation
*--------------------------------------*/
/*--------------------------------------*
* lead
*--------------------------------------*/
/*--------------------------------------*
* foundation
*--------------------------------------*/
/*--------------------------------------*
* セクション共通
*--------------------------------------*/
figure {
  height: 100%;
}
figure img {
  height: 100%;
  object-fit: cover;
}

.grid .fade_slider {
  max-width: 450px;
  width: 50vw;
  height: 100%;
}

.curten {
  position: relative;
  overflow: hidden;
}
.curten:after {
  content: "";
  width: 100%;
  height: 100%;
  background-color: #34393d;
  position: absolute;
  inset: 0;
  z-index: 10;
}
.curten.active:after {
  transition: all 1.2s cubic-bezier(0.5, 1, 0.89, 1);
  opacity: 0;
}

.fade_slider .swiper-slide {
  translate: 0 0;
  transition: all 0.4s;
}
.fade_slider .swiper-slide-prev {
  translate: -100% 0;
  transition: all 0.4s;
}
.fade_slider .swiper-slide-active {
  translate: 0 0;
}
.fade_slider .swiper-slide-active img {
  opacity: 1 !important;
}
.fade_slider .swiper-slide-next {
  translate: 0 0;
  transition: all 0.4s;
}

.sticky_anim1 .layer_bottom,
.sticky_anim2 .layer_bottom {
  position: sticky;
  top: 0;
  z-index: -1;
}
.sticky_anim1 .layer_top,
.sticky_anim2 .layer_top {
  position: sticky;
  top: 0;
  margin: 0 auto;
}

.sec1 .grid,
.sec3 .grid,
.sec6 .grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.sec1 .grid > li,
.sec3 .grid > li,
.sec6 .grid > li {
  max-width: 450px;
  width: 50vw;
  height: 100%;
}

.sec2 .layer_top figure {
  overflow: hidden;
}
.sec2 .layer_top figure img {
  scale: 1.05;
  object-position: center;
}

.sec3 .grid > li:nth-child(3) {
  grid-column: 1/3;
  width: 100vw;
  max-width: 900px;
}

.sec6 .grid > li:nth-child(1),
.sec8 .grid > li:nth-child(1) {
  grid-column: 1/3;
  width: 100vw;
  max-width: 900px;
}

.sec6 {
  margin-bottom: 200px;
}
.sec6 li:has(.credit) {
  display: flex;
  align-items: flex-end;
}
.sec6 .credit {
  text-align: right;
  margin: 0 2.6666666667vw 0 auto;
}

.sec9 {
  width: 94.6666666667vw;
  margin: 0 auto;
}

.credit {
  font-size: 12px;
  margin: 20px auto 50px;
  width: fit-content;
}
.credit li:not(li:last-child) {
  margin-bottom: 15px;
}
.credit li a:has(.nolink) {
  color: #9a9a9a;
}
.credit li a:has(.nolink) .creditAjax_price {
  display: none;
}

@media screen and (max-width: 960px) {
  .fv_bottom figure {
    width: 58.6666666667vw;
    margin: 36vw auto;
  }
  .sticky_anim1 .layer_bottom {
    height: 100vh;
    display: grid;
    place-content: center;
  }
  .sticky_anim1 .layer_top {
    width: 80vw;
    padding: calc((100vh - 120vw) / 2) 0;
  }
  .sticky_credit {
    margin: -13.3333333333vw auto 200px;
  }
  .sticky_anim2 {
    width: 94.6666666667vw;
    margin: 0 auto;
  }
  .sticky_anim2 .layer_bottom {
    height: 100vh;
    display: grid;
    place-content: center;
    width: 77.3333333333vw;
  }
  .sticky_anim2 .layer_top {
    margin: 0 0 0 auto;
    width: 77.3333333333vw;
    padding: calc((100vh - 116vw) / 2 + 10vw) 0;
  }
  .sticky_anim2 .layer_top figure {
    height: auto;
  }
  .credit2 {
    margin: -29.3333333333vw auto 200px;
  }
  .sec6 .grid > li:nth-child(2) img {
    margin: -10.6666666667vw 0 0 5.3333333333vw;
  }
  .side_sticky .grid > li {
    position: sticky;
    top: 200px;
    width: 50vw;
  }
  .side_sticky .grid > li:nth-child(2) {
    margin: 0 0 0 auto;
  }
  .sec4 {
    margin-bottom: 50px;
  }
  .sec4 .pcNone {
    width: 100vw;
  }
  .sec4 .grid > li:nth-child(2) {
    position: sticky;
    top: 66.6666666667vw;
    margin: 0 0 0 auto;
  }
  .sec7 {
    margin-bottom: 50px;
  }
  .sec7 .pcNone {
    width: 100vw;
  }
  .sec7 .grid > li:nth-child(2) {
    position: sticky;
    top: 66.6666666667vw;
    margin: 0 0 0 auto;
  }
  .sec8.side_sticky {
    margin-bottom: 50px;
  }
  .sec8.side_sticky .grid > li:nth-child(1) {
    position: sticky;
    top: 0;
    padding-bottom: 74.9333333333vw;
  }
  .sec8.side_sticky .grid > li:nth-child(2),
  .sec8.side_sticky .grid > li:nth-child(3) {
    width: 50vw;
  }
  .sec8.side_sticky .grid > li:nth-child(2) {
    margin: -74.9333333333vw 0 0 0;
    top: 66.6666666667vw;
  }
  .sec8.side_sticky .grid > li:nth-child(3) {
    position: sticky;
    top: 66.6666666667vw;
    margin: 0 0 0 auto;
  }
  .sec8.side_sticky .pcNone {
    width: 100vw;
  }
  .sec9 {
    margin-bottom: 150px;
  }
}
@media screen and (min-width: 958px) {
  .wrapper {
    margin: 0 auto;
    max-width: 900px;
  }
  .credit {
    font-size: 14px;
    margin: 30px auto 300px;
  }
  .sec2 .layer_bottom {
    top: calc((100svh - 88.8888888889vh) / 2);
  }
  .sec2 .layer_bottom figure {
    max-width: 600px;
    width: 69.1666666667vw;
    margin: 0 auto;
  }
  .sec2 .layer_top {
    padding: 80px 0;
  }
  .sec2 .layer_top figure {
    max-width: 500px;
    width: 50vw;
    margin-inline: auto;
  }
  .sec5 .layer_bottom {
    width: min(55.5555555556vw, 800px);
  }
  .sec5 .layer_top {
    width: min(48.6111111111vw, 700px);
    margin: 0 0 0 auto;
    padding: 80px 0;
  }
  .sec6 .grid > li:nth-child(2) img {
    margin: max(-9.7222222222vw, -140px) 0 0 min(2.7777777778vw, 40px);
  }
  .sec6 li:has(.credit) {
    align-items: flex-start;
  }
  .sec6 .credit {
    margin: min(2.0833333333vw, 30px) 0 0 auto;
  }
  .sec9 {
    width: 100%;
  }
  .sec9 .slider {
    max-width: 500px;
    margin: 0 auto;
  }
  .side_sticky .grid > li {
    position: sticky;
    top: 200px;
    max-width: 450px;
  }
  .side_sticky .grid > li:nth-child(2) {
    margin: 0 0 0 auto;
  }
  .sec8.side_sticky .grid > li:nth-child(1) {
    position: sticky;
    top: 0;
    padding-bottom: min(46.875vw, 675px);
  }
  .sec8.side_sticky .grid > li:nth-child(2),
  .sec8.side_sticky .grid > li:nth-child(3) {
    width: 50vw;
  }
  .sec8.side_sticky .grid > li:nth-child(2) {
    margin: max(-46.875vw, -675px) 0 0 0;
    top: min(41.6666666667vw, 600px);
  }
  .sec8.side_sticky .grid > li:nth-child(3) {
    position: sticky;
    top: min(41.6666666667vw, 600px);
    margin: 0 0 0 auto;
  }
}/*# sourceMappingURL=style.css.map */