@charset "UTF-8";
/*--------------------------------------*
* foundation
*--------------------------------------*/
/*--------------------------------------*
* ベースカラー
*--------------------------------------*/
.bg {
  background-color: #F4F2EF;
}

/*--------------------------------------*
* フォント
*--------------------------------------*/
/*--------------------------------------*
* ブレイクポイント
*--------------------------------------*/
/*--------------------------------------*
* vw変換(SP用)
*--------------------------------------*/
/*--------------------------------------*
* vw変換(PC用)
*--------------------------------------*/
/*--------------------------------------*
* デフォルトスタイル
*--------------------------------------*/
html,
body {
  width: 100%;
  font-size: 16px;
  margin: 0 auto;
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-style: normal;
  color: #fff;
}

.en {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-style: normal;
}

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

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

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

/*--------------------------------------*
* aタグ
*--------------------------------------*/
a {
  display: block;
  text-decoration: none;
  transition: all 0.4s;
  color: #fff;
}
@media screen and (min-width: 769px) {
  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 {
  padding-top: 160px;
  color: #000;
}
footer a {
  color: #422B12;
}
@media screen and (min-width: 769px) {
  footer .insta_box {
    width: min(34.7222222222vw, 500px);
    margin: 0 auto;
  }
}
footer .insta_box a {
  text-align: center;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto 50px;
  display: flex;
  align-items: center;
  gap: 5px;
  text-decoration: underline;
}
footer .insta_box a .ico {
  width: 15px;
}
footer .brand_top {
  width: 74.4vw;
  margin: 0 auto;
}
@media screen and (min-width: 769px) {
  footer .brand_top {
    width: min(34.7222222222vw, 500px);
  }
  footer .brand_top a {
    width: min(24.3055555556vw, 350px);
    margin: 0 auto;
  }
}
footer .copyright {
  text-align: center;
  font-size: 10px;
  padding: 10px 0 160px;
  color: #422B12;
}

/*--------------------------------------*
* object
*--------------------------------------*/
/*-------------------
* component
-------------------*/
/*--------------------------------------*
* foundation
*--------------------------------------*/
/*--------------------------------------*
* コンテンツ幅
*--------------------------------------*/
/*--------------------------------------*
* foundation
*--------------------------------------*/
/*--------------------------------------*
* 共通ボタン
*--------------------------------------*/
/*--------------------------------------*
* foundation
*--------------------------------------*/
/*--------------------------------------*
* セクション共通
*--------------------------------------*/
.inner {
  height: -moz-fit-content;
  height: fit-content;
  position: relative;
}

.dummy {
  position: sticky;
  top: 0;
  z-index: -1;
  height: calc((100vh - 30000vw) / 2);
  width: 100%;
}

.dummy_4 {
  height: 70vh;
  position: sticky;
  top: 0;
}

.dummy_4b {
  padding: calc((100vh - 89.0666666667vw) / 4) 0;
}

.wrap_3, .wrap_9 {
  position: relative;
}
.wrap_3 .img1, .wrap_9 .img1 {
  position: sticky;
  top: 0;
  margin-inline: auto;
  z-index: 0;
  padding: calc((100vh - 133.3333333333vw) / 2) 0; /*上下真ん中に配置*/
}
.wrap_3 .wrap_3_mid, .wrap_3 .wrap_9_mid, .wrap_9 .wrap_3_mid, .wrap_9 .wrap_9_mid {
  position: absolute;
  top: 100vh;
  z-index: 10;
  pointer-events: none;
}
.wrap_3 .wrap_3_mid .img2, .wrap_3 .wrap_9_mid .img2, .wrap_9 .wrap_3_mid .img2, .wrap_9 .wrap_9_mid .img2 {
  width: 58.6666666667vw;
  padding-left: 2.6666666667vw;
}
.wrap_3 .wrap_3_mid .img2 figure:first-of-type, .wrap_3 .wrap_9_mid .img2 figure:first-of-type, .wrap_9 .wrap_3_mid .img2 figure:first-of-type, .wrap_9 .wrap_9_mid .img2 figure:first-of-type {
  padding-bottom: 40px;
}
.wrap_3 .wrap_9_mid, .wrap_9 .wrap_9_mid {
  width: 100%;
}
.wrap_3 .wrap_9_mid .img3, .wrap_9 .wrap_9_mid .img3 {
  padding-top: 40px;
  width: 58.6666666667vw;
  display: block;
  margin-left: auto;
  padding-right: 5.3333333333%;
}
.wrap_3 .dummy_2, .wrap_9 .dummy_2 {
  pointer-events: none;
  position: sticky;
  top: 0;
  height: calc(78.1333333333vw + (100vh - 133.3333333333vw) / 2 + 20px);
  /*img2の高さ / 画面幅　* 100vw + 100vh - img1高さ / 画面幅　* 100vw /2　*/
}

.wrap_9_bottom {
  position: relative;
  padding-bottom: 180px;
}
.wrap_9_bottom .img4 {
  width: 58.6666666667vw;
  padding-top: 38.9333333333%;
}

.dummy_99 {
  padding-top: 72vw;
}

.dummy_3 {
  padding-top: 78.1333333333vw;
}

.dummy_short {
  padding-top: 45.3333333333vw;
}

/*  wrap_3_test  */
.wrap_3_test {
  position: relative;
}
.wrap_3_test .img1 {
  position: sticky;
  margin-inline: auto;
  top: 0;
  z-index: 0;
  padding: calc((100vh - 133.3333333333vw) / 2) 0; /*上下真ん中に配置*/
  height: min(1268px, 338.1333333333vw); /* 次の画像が重ならない高さ　(1268=294*2+500+180) */
}
.wrap_3_test .wrap_3_mid_test {
  position: absolute;
  top: 100vh;
  z-index: 10;
}
.wrap_3_test .wrap_3_mid_test .img2_1, .wrap_3_test .wrap_3_mid_test .img2_2 {
  width: 58.6666666667vw;
  padding-bottom: 40px;
  padding-left: 2.6666666667vw;
}
.wrap_3_test .dummy_2 {
  pointer-events: none;
  position: sticky;
  top: 0;
  height: calc(78.1333333333vw + (100vh - 133.3333333333vw) / 2 + 20px);
}

/*  wrap_3_test  */
/* 9 */
.wrap_9_test {
  position: relative;
}
.wrap_9_test .img1 {
  position: sticky;
  margin-inline: auto;
  top: 0;
  z-index: 0;
  padding: 0;
  padding: calc((100vh - 133.3333333333vw) / 2) 0; /*上下真ん中に配置*/
  height: min(1096px, 292.2666666667vw); /* 次の画像が重ならない高さ */
}
.wrap_9_test .wrap_9_mid_test {
  position: absolute;
  top: 100vh;
  z-index: 10;
}
.wrap_9_test .wrap_9_mid_test .img2_1 {
  width: 58.6666666667vw;
  padding-bottom: 50px;
  padding-left: 3.2vw;
}
.wrap_9_test .wrap_9_mid_test .img2_2 {
  width: 58.6666666667vw;
  padding-bottom: 0px;
  float: right;
  padding-right: 6.6666666667vw;
}
.wrap_9_test .wrap_9_mid_test .img2_3 {
  position: relative;
  z-index: -1;
  display: inline-block;
  width: 58.6666666667vw;
  padding-left: 6.6666666667vw;
  margin-top: -85px;
}
.wrap_9_test .dummy_2 {
  pointer-events: none;
  position: sticky;
  top: 0;
  height: calc(78.1333333333vw + (100vh - 133.3333333333vw) / 2 + 20px);
}

/*  wrap_9_test  */
.wrapper {
  overflow: clip;
}

.wrap_test1, .wrap_test2, .wrap_test3, .wrap_test4, .wrap_test5, .wrap_test6 {
  padding: calc((100vh - 89.0666666667vw) / 2) 0;
  position: sticky !important;
  top: 0;
}
.wrap_test1 .wrap_img1, .wrap_test1 .wrap_img2, .wrap_test1 .wrap_img3, .wrap_test2 .wrap_img1, .wrap_test2 .wrap_img2, .wrap_test2 .wrap_img3, .wrap_test3 .wrap_img1, .wrap_test3 .wrap_img2, .wrap_test3 .wrap_img3, .wrap_test4 .wrap_img1, .wrap_test4 .wrap_img2, .wrap_test4 .wrap_img3, .wrap_test5 .wrap_img1, .wrap_test5 .wrap_img2, .wrap_test5 .wrap_img3, .wrap_test6 .wrap_img1, .wrap_test6 .wrap_img2, .wrap_test6 .wrap_img3 {
  width: 66.6666666667vw;
  margin: 0 auto;
  position: sticky !important;
  top: 0;
}
.wrap_test1 .wrap_img1, .wrap_test2 .wrap_img1, .wrap_test3 .wrap_img1, .wrap_test4 .wrap_img1, .wrap_test5 .wrap_img1, .wrap_test6 .wrap_img1 {
  transform: rotate(-5deg);
}
.wrap_test1 .wrap_img2, .wrap_test2 .wrap_img2, .wrap_test3 .wrap_img2, .wrap_test4 .wrap_img2, .wrap_test5 .wrap_img2, .wrap_test6 .wrap_img2 {
  transform: rotate(5deg);
}

.wrap_4 {
  padding-top: 180px;
}
.wrap_4 .img1 {
  width: 53.3333333333vw;
  position: relative;
  z-index: 10;
}
.wrap_4 .img2 {
  width: 80vw;
  margin-left: auto;
  margin-right: 0;
  margin-top: -44.75%;
  padding-bottom: 40px;
}

.wrap_4_2 {
  width: 100%;
}
.wrap_4_2 .img1 {
  width: 80vw;
  margin: 0 auto;
  z-index: 0 !important;
}
.wrap_4_2 .img_box {
  position: relative;
  z-index: 100;
  padding-top: 40px;
}
.wrap_4_2 .img2 {
  position: relative;
}
.wrap_4_2 .img3 {
  position: relative;
}

.wrap_5 .img1 {
  width: 66.6666666667vw;
  margin: 0 auto;
  padding: 180px 0;
}

.wrap_5_2 .img1,
.wrap_5_2 .img2 {
  position: sticky;
  top: 0;
  margin-inline: auto;
  height: 100vh;
  display: grid;
  place-content: center;
}
.wrap_5_2 .img2 {
  width: 74.4vw;
}

.wrap_5_3 .img3 {
  width: 89.0666666667vw;
  margin: 0 auto;
  padding-bottom: 120px;
}

.wrap_6 .img2, .wrap_6 .img3, .wrap_10 .img2, .wrap_10 .img3 {
  width: 58.6666666667vw;
}
.wrap_6 .img2, .wrap_10 .img2 {
  margin-top: 0;
  margin-right: 0;
  z-index: 10;
  position: relative;
}
.wrap_6 .img3, .wrap_10 .img3 {
  position: relative;
  margin-right: 0;
  margin-left: auto;
  z-index: 0;
  margin-top: -17.0666666667vw;
}

.wrap_6_2 {
  width: 100%;
}
.wrap_6_2 .img1 {
  top: 0;
}
.wrap_6_2 .img2 {
  position: relative;
  padding-top: 40px;
}
.wrap_6_2 .img3 {
  position: relative;
}
.wrap_6_2 .img5 {
  margin-top: 180px;
}

.wrap_8 {
  width: 100%;
}
.wrap_8 .img1 {
  position: sticky;
  top: 0;
}
.wrap_8 .dummy_98 {
  padding-top: 50vh;
}

.wrap_8_2 {
  padding-bottom: 26.6666666667%;
}
.wrap_8_2 .img2, .wrap_8_2 .img3 {
  width: 58.6666666667vw;
}
.wrap_8_2 .img2 {
  margin-top: 0;
  margin-right: 0;
  z-index: 10;
  position: relative;
}
.wrap_8_2 .img3 {
  position: relative;
  margin-right: 0;
  margin-left: auto;
  z-index: 0;
  margin-top: -17.0666666667vw;
}

.container {
  width: 100%;
}
.container p {
  color: #000;
}
.container .sticky {
  position: sticky;
  top: 0;
}

.archive {
  color: #422B12;
  padding: 180px 0 20px;
}
.archive .ac_box {
  font-size: 18px;
  line-height: 1.5;
  text-align: center;
  background-color: #ebe8e3;
  padding: 100px 0;
}
.archive .ac_box p {
  margin-bottom: 20px;
}
.archive .ac_box p .fontL {
  font-size: 28px;
}
.archive .ac_box a {
  width: 80%;
  margin: 0 auto;
}

/* ----------------------------------------------------------
   PC用
 ---------------------------------------------------------- */
@media screen and (min-width: 769px) {
  .height,
  .harf {
    -o-object-fit: contain;
       object-fit: contain;
  }
  .harf {
    align-items: center;
    height: 80vh;
  }
  .wrap_3, .wrap_9 {
    position: relative;
  }
  .wrap_3 .img1, .wrap_9 .img1 {
    position: sticky;
    margin-inline: auto;
    z-index: 0;
    padding: 0;
    width: min(500px, 41.6666666667vw);
    height: min(1381px, 115.0833333333vw);
    height: min(1381px, 75vw);
  }
  .wrap_3 .wrap_3_mid, .wrap_3 .wrap_9_mid, .wrap_9 .wrap_3_mid, .wrap_9 .wrap_9_mid {
    top: 102vh;
  }
  .wrap_3 .wrap_3_mid .img2, .wrap_3 .wrap_9_mid .img2, .wrap_9 .wrap_3_mid .img2, .wrap_9 .wrap_9_mid .img2 {
    width: min(294px, 24.5vw);
    padding-left: 2vw;
  }
  .wrap_3 .wrap_3_mid .img2 figure:first-of-type, .wrap_3 .wrap_9_mid .img2 figure:first-of-type, .wrap_9 .wrap_3_mid .img2 figure:first-of-type, .wrap_9 .wrap_9_mid .img2 figure:first-of-type {
    padding-bottom: 40px;
  }
  .wrap_3 .wrap_9_mid, .wrap_9 .wrap_9_mid {
    width: min(500px, 41.6666666667vw);
  }
  .wrap_3 .wrap_9_mid .img3, .wrap_9 .wrap_9_mid .img3 {
    padding-top: 40px;
    display: block;
    margin-left: auto;
    margin-right: 1.6666666667%;
    width: min(294px, 24.5vw);
  }
  .wrap_3 .dummy_2, .wrap_9 .dummy_2 {
    pointer-events: none;
    position: sticky;
    top: 0;
    height: calc(100vh - min(666px, 55.5vw) + min(392px, 32.6666666667vw) + min(40px, 3.3333333333vw));
  }
  .wrap_3_bottom .dummy_99 {
    padding-top: 2.25vw;
  }
  .wrap_3_bottom figure {
    margin-top: 3.3333333333vw;
  }
  .wrap_9_bottom {
    position: relative;
    padding-bottom: 180px;
  }
  .wrap_9_bottom .img4 {
    width: min(20.5555555556vw, 296px);
    padding-top: 19.1666666667%;
    margin-left: 1.6666666667vw;
  }
  /*  wrap_3_test  */
  .wrap_3_test {
    position: relative;
  }
  .wrap_3_test .img1 {
    position: sticky;
    margin-inline: auto;
    top: 0;
    z-index: 0;
    padding: 0;
    width: min(500px, 41.6666666667vw);
    height: min(1723px, 143.5833333333vw);
  }
  .wrap_3_test .wrap_3_mid_test {
    position: absolute;
    top: 103vh;
    z-index: 10;
  }
  .wrap_3_test .wrap_3_mid_test .img2_1, .wrap_3_test .wrap_3_mid_test .img2_2 {
    width: min(20.4166666667vw, 294px);
    padding-bottom: 50px;
    padding-left: 1vw;
  }
  .wrap_3_test .wrap_3_mid_test .img2_3 {
    width: min(500px, 41.6666666667vw);
  }
  .wrap_3_test .dummy_2 {
    pointer-events: none;
    position: sticky;
    top: 0;
    height: calc(100vh - min(667px, 55.5833333333vw) + min(391px, 32.5833333333vw) + min(50px, 4.1666666667vw));
  }
  /* 9 */
  .wrap_9_test {
    position: relative;
  }
  .wrap_9_test .img1 {
    position: sticky;
    margin-inline: auto;
    top: 0;
    z-index: 0;
    padding: 0;
    width: min(500px, 41.6666666667vw);
    height: min(1606px, 133.8333333333vw);
  }
  .wrap_9_test .wrap_9_mid_test {
    width: min(500px, 41.6666666667vw);
    position: absolute;
    top: 103vh;
    z-index: 10;
  }
  .wrap_9_test .wrap_9_mid_test .img2_1 {
    width: min(20.4166666667vw, 294px);
    padding-bottom: 50px;
    padding-left: 1vw;
  }
  .wrap_9_test .wrap_9_mid_test .img2_2 {
    width: min(20.4166666667vw, 294px);
    padding-bottom: 0px;
    float: right;
    padding-right: 2.0833333333vw;
  }
  .wrap_9_test .wrap_9_mid_test .img2_3 {
    position: relative;
    z-index: -1;
    display: inline-block;
    width: min(20.4166666667vw, 294px);
    padding-left: 2.0833333333vw;
    margin-top: -85px;
  }
  .wrap_9_test .dummy_2 {
    pointer-events: none;
    position: sticky;
    top: 0;
    height: calc(100vh - min(667px, 55.5833333333vw) + min(391px, 32.5833333333vw) + min(50px, 4.1666666667vw));
  }
  /*  wrap_9_test  */
  .wrap_4 {
    padding-top: 240px;
  }
  .wrap_4 .img1 {
    width: min(18.5416666667vw, 267px);
    position: relative;
    z-index: 10;
  }
  .wrap_4 .img2 {
    width: min(27.7777777778vw, 400px);
    margin-left: auto;
    margin-right: 0;
    margin-top: -44.75%;
    padding-bottom: 50px;
  }
  .wrap_4_2 {
    width: 100%;
  }
  .wrap_4_2 .img1 {
    top: 0;
    width: min(27.7777777778vw, 400px);
    margin: 0 auto;
    z-index: 0;
  }
  .wrap_4_2 .img2 {
    position: relative;
    padding-top: 50px;
    z-index: 10;
  }
  .wrap_4_2 .img3 {
    position: relative;
    z-index: 10;
  }
  .wrap_5 .img1 {
    width: min(23.1944444444vw, 334px);
    margin: 0 auto;
    padding: 180px 0;
  }
  .wrap_5_2 .img1,
  .wrap_5_2 .img2 {
    position: sticky;
    top: 0;
    margin-inline: auto;
    height: 100vh;
    display: grid;
    place-content: center;
  }
  .wrap_5_2 .img2 {
    width: min(24.9305555556vw, 359px);
  }
  .wrap_5_3 .img3 {
    width: min(30.9027777778vw, 445px);
    margin: 0 auto;
    padding-bottom: 160px;
  }
  .wrap_6 .img2, .wrap_6 .img3, .wrap_10 .img2, .wrap_10 .img3 {
    width: min(20.3472222222vw, 293px);
  }
  .wrap_6 .img2, .wrap_10 .img2 {
    margin-top: 0;
    margin-right: 0;
    z-index: 10;
    position: relative;
  }
  .wrap_6 .img3, .wrap_10 .img3 {
    position: relative;
    margin-right: 0;
    margin-left: auto;
    z-index: 0;
    margin-top: max(-4.4444444444vw, -64px);
  }
  .wrap_6_2 {
    width: 100%;
  }
  .wrap_6_2 .img1 {
    position: initial;
    top: 0;
  }
  .wrap_6_2 .img2 {
    position: relative;
    padding-top: 40px;
  }
  .wrap_6_2 .img3 {
    position: relative;
  }
  .wrap_6_2 .img5 {
    margin-top: 180px;
  }
  .wrap_8 .dummy_98 {
    padding-top: 50vh;
  }
  .wrap_8_2 {
    padding-bottom: 8.3333333333%;
  }
  .wrap_8_2 .img2, .wrap_8_2 .img3 {
    width: min(20.3472222222vw, 293px);
  }
  .wrap_8_2 .img3 {
    margin-top: max(-5.7638888889vw, -83px);
  }
  .wrapper {
    overflow: clip;
  }
  .wrap_test1, .wrap_test2, .wrap_test3, .wrap_test4, .wrap_test5, .wrap_test6 {
    padding: calc((100vh - 37.0833333333vw) / 2) 0;
    position: sticky !important;
    top: 0;
  }
  .wrap_test1 .wrap_img1, .wrap_test1 .wrap_img2, .wrap_test1 .wrap_img3, .wrap_test2 .wrap_img1, .wrap_test2 .wrap_img2, .wrap_test2 .wrap_img3, .wrap_test3 .wrap_img1, .wrap_test3 .wrap_img2, .wrap_test3 .wrap_img3, .wrap_test4 .wrap_img1, .wrap_test4 .wrap_img2, .wrap_test4 .wrap_img3, .wrap_test5 .wrap_img1, .wrap_test5 .wrap_img2, .wrap_test5 .wrap_img3, .wrap_test6 .wrap_img1, .wrap_test6 .wrap_img2, .wrap_test6 .wrap_img3 {
    width: min(23.125vw, 333px);
    margin: 0 auto;
    position: sticky !important;
    top: 0;
  }
  .wrap_test1 .wrap_img1, .wrap_test2 .wrap_img1, .wrap_test3 .wrap_img1, .wrap_test4 .wrap_img1, .wrap_test5 .wrap_img1, .wrap_test6 .wrap_img1 {
    transform: rotate(-5deg);
  }
  .wrap_test1 .wrap_img2, .wrap_test2 .wrap_img2, .wrap_test3 .wrap_img2, .wrap_test4 .wrap_img2, .wrap_test5 .wrap_img2, .wrap_test6 .wrap_img2 {
    transform: rotate(5deg);
  }
  .dummy_4 {
    height: 70vh;
    position: sticky;
    top: 0;
  }
  .dummy_4b {
    padding: calc((100vh - 36.1666666667vw) / 6) 0;
  }
  .archive {
    color: #422B12;
    padding: 180px 0 20px;
  }
  .archive .ac_box {
    font-size: 20px;
    line-height: 1.7;
    text-align: center;
    background-color: #ebe8e3;
    padding: 100px 0;
  }
  .archive .ac_box p {
    margin-bottom: 30px;
  }
  .archive .ac_box p .fontL {
    font-size: 28px;
  }
  .archive .ac_box a {
    width: min(34.7222222222vw, 500px);
    margin: 0 auto;
  }
}
/* 左から */
.fadeLeft {
  animation-name: fadeLeftAnime;
  animation-duration: 1s;
  animation-delay: 0.5s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-out;
  opacity: 0;
}

@keyframes fadeLeftAnime {
  from {
    opacity: 0;
    transform: translateX(-100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
/* 右から */
.fadeRight {
  animation-name: fadeRightAnime;
  animation-duration: 1s;
  animation-delay: 0.5s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-out;
  opacity: 0;
}

@keyframes fadeRightAnime {
  from {
    opacity: 0;
    transform: translateX(100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
/* 下から */
.fadeUp {
  animation-name: fadeUpAnime;
  animation-duration: 1s;
  animation-delay: 0.5s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-out;
  opacity: 0;
}

@keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.fadeLeftTrigger,
.fadeRightTrigger {
  opacity: 0;
}

/*-------------------
* project
-------------------*/
/*--------------------------------------*
* foundation
*--------------------------------------*/
/*--------------------------------------*
* FV,1
*--------------------------------------*/
.fv {
  position: relative;
}
.fv .fv_bg {
  position: sticky;
  top: 0;
  z-index: -1;
}
.fv .fv_bg img {
  -o-object-fit: cover;
     object-fit: cover;
  height: 100vh;
}
.fv h1 {
  letter-spacing: 0.02em;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .fv h1 {
    position: absolute;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 12.2666666667vw;
  }
}
@media screen and (min-width: 769px) {
  .fv h1 {
    position: absolute;
    width: 100%;
    top: 50%;
    left: 20%;
    transform: translate(-50%, -50%);
    font-size: 5.3333333333vw;
  }
}
.fv h1 .sub {
  font-size: 4.2666666667vw;
  padding-top: 2.1333333333vw;
}
@media screen and (min-width: 769px) {
  .fv h1 .sub {
    font-size: 1.6vw;
    padding-top: 1.0666666667vw;
  }
}
.fv .wrap_1 {
  padding-bottom: 40px;
}
.fv .wrap_1 .img1 {
  width: 100%;
}
.fv .wrap_1 .img2, .fv .wrap_1 .img3 {
  width: 58.6666666667vw;
}
.fv .wrap_1 .img2 {
  margin-top: 0;
  margin-right: 0;
  margin-left: auto;
  z-index: 10;
  position: relative;
}
.fv .wrap_1 .img3 {
  position: relative;
  z-index: 0;
  margin-top: -26.1333333333vw;
}
.fv .wrap_1_2 {
  width: 100%;
}
.fv .wrap_1_2 .img4 {
  position: sticky;
  top: 0;
  width: 66.6666666667%;
  margin: 0 auto;
}
.fv .wrap_1_2 .img5 {
  position: relative;
  margin-top: 26.6666666667vw;
}

@media screen and (min-width: 769px) {
  .wrap_pc {
    width: min(34.7222222222vw, 500px);
    margin: 0 auto;
  }
  .fv .fv_bg img {
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: 50% 0;
       object-position: 50% 0;
  }
  .fv .wrap_1 {
    padding-bottom: 55px;
  }
  .fv .wrap_1 .img2, .fv .wrap_1 .img3 {
    width: min(20.3472222222vw, 293px);
  }
  .fv .wrap_1 .img2 {
    margin-top: 0;
    margin-right: 0;
    margin-left: auto;
    z-index: 1;
  }
  .fv .wrap_1 .img3 {
    position: relative;
    z-index: 0;
    margin-top: max(-6.8055555556vw, -98px);
  }
}
/*--------------------------------------*
* foundation
*--------------------------------------*/
/*--------------------------------------*
* FV
*--------------------------------------*/
/*--------------------------------------*
* foundation
*--------------------------------------*/
/*--------------------------------------*
* credit
*--------------------------------------*/
.credit_card {
  position: relative;
}
.credit_card.active .plus {
  transform: rotate(45deg);
  transition: all 0.4s;
}

.credit {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  left: 50%;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  z-index: 8;
}

.credit_li {
  text-align: right;
}
@media screen and (max-width: 768px) {
  .credit_li {
    margin-bottom: 14.6666666667vw;
    font-size: 3.2vw;
    max-width: 64vw;
    margin-right: 11.7333333333vw;
  }
}
@media screen and (min-width: 769px) {
  .credit_li {
    font-size: vw(16);
    margin-bottom: min(6.9444444444vw, 100px);
    max-width: min(16.6666666667vw, 240px);
    margin-right: min(3.0555555556vw, 44px);
  }
}
.credit_li li {
  text-align: right;
}
@media screen and (max-width: 768px) {
  .credit_li li {
    margin-bottom: 4vw;
  }
}
@media screen and (min-width: 769px) {
  .credit_li li {
    margin-bottom: min(1.0416666667vw, 15px);
  }
}
.credit_li li a {
  text-decoration: underline;
}
.credit_li span {
  font-size: 10px;
  padding: 3px 0;
  white-space: nowrap;
}

.plus {
  position: absolute;
  transition: all 0.4s;
  z-index: 15;
}
@media screen and (max-width: 768px) {
  .plus {
    width: 5.3333333333vw;
    height: 5.3333333333vw;
    bottom: 5.3333333333vw;
    right: 5.3333333333vw;
  }
}
@media screen and (min-width: 769px) {
  .plus {
    width: min(1.7361111111vw, 25px);
    height: min(1.7361111111vw, 25px);
    bottom: min(2.0833333333vw, 30px);
    right: min(2.0833333333vw, 30px);
  }
}
.plus:before, .plus:after {
  content: "";
  background-color: #fff;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
}
@media screen and (max-width: 768px) {
  .plus:before {
    width: 5.3333333333vw;
    height: 1px;
  }
}
@media screen and (min-width: 769px) {
  .plus:before {
    width: min(1.7361111111vw, 25px);
    height: 1px;
  }
}
@media screen and (max-width: 768px) {
  .plus:after {
    width: 1px;
    height: 5.3333333333vw;
  }
}
@media screen and (min-width: 769px) {
  .plus:after {
    width: 1px;
    height: min(1.7361111111vw, 25px);
  }
}/*# sourceMappingURL=style.css.map */