@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%;
}

.wrap_2, .wrap_4 {
  padding: calc((100vh - 89.0666666667vw) / 4) 0;
  position: sticky;
  top: 0;
}
@media screen and (max-width: 768px) {
  .wrap_2 .inner, .wrap_4 .inner {
    margin: 0 auto;
    width: 66.6666666667vw;
    position: sticky !important;
    top: calc((100svh - 89.0666666667vw) / 2);
  }
}
.wrap_2 .inner .inner_li > li:not(li:first-child), .wrap_4 .inner .inner_li > li:not(li:first-child) {
  position: absolute;
  top: 0;
  left: 0;
}
.wrap_2 .inner li:first-of-type, .wrap_4 .inner li:first-of-type {
  transform: rotate(-4deg);
}
.wrap_2 .inner li:nth-of-type(2), .wrap_4 .inner li:nth-of-type(2) {
  transform: rotate(4deg);
}

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

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

.wrap_3 .img1, .wrap_8 .img1 {
  width: 100%;
}
.wrap_3 .img2, .wrap_3 .img3, .wrap_3 .img6, .wrap_3 .img7, .wrap_8 .img2, .wrap_8 .img3, .wrap_8 .img6, .wrap_8 .img7 {
  width: 58.6666666667vw;
}
.wrap_3 .img2, .wrap_3 .img7, .wrap_8 .img2, .wrap_8 .img7 {
  margin-top: 0;
  position: relative;
  z-index: 1;
}
.wrap_3 .img7, .wrap_8 .img7 {
  margin-top: -7.4666666667vw;
  z-index: 0;
}
.wrap_3 .img3, .wrap_3 .img6, .wrap_8 .img3, .wrap_8 .img6 {
  position: relative;
  margin-right: 0;
  margin-left: auto;
  z-index: 0;
  margin-top: -7.4666666667vw;
}
.wrap_3 .img6, .wrap_8 .img6 {
  z-index: 1;
  margin-top: 0;
}
.wrap_3 .img4, .wrap_8 .img4 {
  width: 66.6666666667vw;
  margin: 170px auto;
}
.wrap_3 .wrap_3_1, .wrap_8 .wrap_3_1 {
  position: sticky;
  top: 0;
}
.wrap_3 .dummy, .wrap_8 .dummy {
  padding-top: 294px;
}

.wrap_3_1_b .img6, .wrap_3_1_b .img7 {
  width: 58.6666666667vw;
}
.wrap_3_1_b .img6 {
  position: relative;
  margin-right: 0;
  margin-left: auto;
  z-index: 0;
}

.wrap_3_1_c {
  padding-bottom: 170px;
}

.wrap_3_2 .img9 {
  width: 66.6666666667vw;
  margin: 0px auto;
  padding-bottom: 100px;
  top: 0;
}

.wrap_5, .wrap_6 {
  position: relative;
}
.wrap_5 .img1, .wrap_6 .img1 {
  position: sticky;
  top: 0;
  margin-inline: auto;
  z-index: 0;
  padding: calc((100vh - 133.3333333333vw) / 2) 0;
}
.wrap_5 .wrap_5_mid, .wrap_5 .wrap_6_mid, .wrap_6 .wrap_5_mid, .wrap_6 .wrap_6_mid {
  position: absolute;
  top: 100vh;
  z-index: 10;
  pointer-events: none;
}
.wrap_5 .img2, .wrap_6 .img2 {
  width: 58.6666666667vw;
  padding-left: 2.6666666667vw;
}
.wrap_5 .img2 figure:first-of-type, .wrap_6 .img2 figure:first-of-type {
  padding-bottom: 40px;
}
.wrap_5 .dummy_2, .wrap_6 .dummy_2 {
  pointer-events: none;
  position: sticky;
  top: 0;
  height: calc(78.1333333333vw + (100vh - 133.3333333333vw) / 2 + 20px);
}

.dummy_3 {
  padding-top: 78.1333333333vw;
}

.dummy_short {
  padding-top: 45.3333333333vw;
}

.wrap_6_2 {
  padding-bottom: 170px;
}

.wrap_7 {
  padding-bottom: 45.3333333333vw;
}
.wrap_7 .img1, .wrap_7 .img2 {
  width: 72vw;
  margin: 0 auto;
}
.wrap_7 div:first-of-type {
  margin-bottom: 20px;
}

.wrap_9 .img1,
.wrap_9 .img2 {
  position: sticky;
  top: 0;
  margin-inline: auto;
}
.wrap_9 .img1 {
  padding: calc((100vh - 133.3333333333vw) / 2) 0;
}
.wrap_9 .img2 {
  width: 74.4vw;
  padding: calc((100vh - 99.2vw) / 2) 0;
  pointer-events: none;
}

.wrap_9_2 {
  width: 89.0666666667vw;
  margin: 0 auto;
}

.wrapper {
  overflow: clip;
}

.wrap_test1, .wrap_test2, .wrap_test3, .wrap_test4, .wrap_test5, .wrap_test6 {
  padding: calc((100vh - 89.0666666667vw) / 3) 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(-4deg);
}
.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(4deg);
}

/* ----------------------------------------------------------
   PC用
 ---------------------------------------------------------- */
@media screen and (min-width: 769px) {
  .height,
  .harf {
    -o-object-fit: contain;
       object-fit: contain;
  }
  .harf {
    align-items: center;
    height: 80vh;
  }
  .wrap_3 .img2, .wrap_3 .img3, .wrap_3 .img6, .wrap_3 .img7, .wrap_8 .img2, .wrap_8 .img3, .wrap_8 .img6, .wrap_8 .img7 {
    width: min(20.3472222222vw, 293px);
  }
  .wrap_3 .img2, .wrap_3 .img7, .wrap_8 .img2, .wrap_8 .img7 {
    margin-top: 0;
    position: relative;
    z-index: 1;
  }
  .wrap_3 .img7, .wrap_8 .img7 {
    margin-top: max(-1.9444444444vw, -28px);
    z-index: 0;
  }
  .wrap_3 .img3, .wrap_3 .img6, .wrap_8 .img3, .wrap_8 .img6 {
    position: relative;
    margin-right: 0;
    margin-left: auto;
    z-index: 0;
    margin-top: max(-1.9444444444vw, -28px);
  }
  .wrap_3 .img6, .wrap_8 .img6 {
    z-index: 1;
    margin-top: 0;
  }
  .wrap_3 .img4, .wrap_8 .img4 {
    width: min(22.5694444444vw, 325px);
    margin: 170px auto;
  }
  .wrap_3 .img9, .wrap_8 .img9 {
    width: min(22.5694444444vw, 325px);
    margin: 170px auto;
    position: sticky;
    top: 0;
  }
  .wrap_3 .dummy, .wrap_8 .dummy {
    padding-top: 391px;
  }
  .wrap_3_1_b .img6, .wrap_3_1_b .img7 {
    width: min(20.3472222222vw, 293px);
  }
  .wrap_3_1_b .img6 {
    position: relative;
    margin-right: 0;
    margin-left: auto;
    z-index: 0;
  }
  .wrap_3_1_c {
    padding-bottom: 170px;
  }
  .wrap_3_2 .img9 {
    width: min(22.5694444444vw, 325px);
    margin: 0px auto;
    padding-bottom: 100px;
    top: 0;
  }
  .wrap_5, .wrap_6 {
    position: relative;
  }
  .wrap_5 .img1, .wrap_6 .img1 {
    position: sticky;
    margin-inline: auto;
    z-index: 0;
    padding: 0;
    width: min(500px, 41.6666666667vw);
    height: min(1381px, 115.0833333333vw);
  }
  .wrap_5 .wrap_5_mid, .wrap_5 .wrap_6_mid, .wrap_6 .wrap_5_mid, .wrap_6 .wrap_6_mid {
    position: absolute;
    top: 103vh;
    z-index: 10;
    pointer-events: none;
  }
  .wrap_5 .img2, .wrap_6 .img2 {
    width: min(294px, 24.5vw);
    padding-left: 2vw;
  }
  .wrap_5 .img2 figure:first-of-type, .wrap_6 .img2 figure:first-of-type {
    padding-bottom: 40px;
  }
  .wrap_5 .dummy_2, .wrap_6 .dummy_2 {
    pointer-events: none;
    position: sticky;
    top: 0;
    height: calc(100vh - min(666px, 55.5vw) + min(392px, 32.6666666667vw) + min(40px, 3.3333333333vw));
  }
  .dummy_3 {
    padding-top: 78.2vw;
  }
  .dummy_short {
    padding-top: 56vw;
  }
  .dummy_short2 {
    padding-top: 40vw;
  }
  .wrap_7 {
    margin-top: -15vw;
    padding-bottom: 0;
  }
  .wrap_7 .img1, .wrap_7 .img2 {
    width: min(24.375vw, 351px);
    margin: 0 auto;
  }
  .wrap_7 .img2 {
    padding-bottom: 170px;
  }
  .wrap_7 div:first-of-type {
    margin-bottom: 0;
    padding-bottom: 20px;
  }
  .wrap_9 {
    padding-top: 100px;
  }
  .wrap_9 .img1,
  .wrap_9 .img2 {
    position: sticky;
    top: 0;
    margin-inline: auto;
  }
  .wrap_9 .img1 {
    width: min(34.7222222222vw, 500px) !important;
    height: 100vh;
    display: grid;
    place-content: center;
  }
  .wrap_9 .img2 {
    width: min(25.1388888889vw, 362px) !important;
    height: 100vh;
    place-content: center;
    pointer-events: none;
  }
  .wrap_9 .dummy {
    display: none;
  }
  .wrap_9_2 {
    width: min(30.1388888889vw, 434px);
    margin: 0 auto;
  }
  .wrapper {
    overflow: clip;
  }
  .wrap_test1, .wrap_test2, .wrap_test3, .wrap_test4, .wrap_test5, .wrap_test6 {
    padding: calc((100vh - 36.1666666667vw) / 3) 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(22.5694444444vw, 325px);
    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(-4deg);
  }
  .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(4deg);
  }
  .dummy_4 {
    height: 70vh;
    position: sticky;
    top: 0;
  }
  .dummy_4b {
    padding: calc((100vh - 36.1666666667vw) / 6) 0;
  }
}
/* 左から */
.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);
  }
}
/* スクロールをしたら出現する要素にはじめに透過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: 50%;
    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 .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: 1;
}
.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;
}
.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 .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: 10;
}

.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 */