.scroll-animations > .scrollsection > .item.-big.-vertical {
  height: calc(60vh * 1.5);
  width: 60vh;
}

.scroll-animations > .scrollsection > .item.-big.-horizontal {
  height: 80vh;
  width: calc(80vh * 1.6);
}

.scroll-animations > .scrollsection > .item.-big.-horizontal.ratio15 {
  height: 80vh;
  width: calc(80vh * 1.5);
}

.scroll-animations > .scrollsection > .item.-big.-horizontal.ratio_piecenord {
  height: 80vh;
  width: calc(80vh * calc(1440 / 1076));
}

.scroll-animations > .scrollsection > .item.-big.-horizontal.ratio_sabonginza {
  height: 80vh;
  width: calc(80vh * calc(1440 / 1211));
}

.scroll-animations > .scrollsection > .item.-normal {
  height: 60vh;
  width: 45vh;
  z-index: 1;
}

.scroll-animations > .scrollsection > .item.-normal.-horizontal {
  height: 55vh;
  width: calc(55vh * 1.6);
}

.scroll-animations > .scrollsection > .item.-normal.-horizontal.ratio15 {
  height: 55vh;
  width: calc(55vh * 1.5);
}

.scroll-animations > .scrollsection > .item.-horizontal.ratio_yukizaki {
  height: 65vh;
  width: calc(65vh * calc(2560 / 2303));
}

.scroll-animations > .scrollsection > .item.-horizontal.ratio_yukizaki2,
.scroll-animations > .scrollsection > .item.-horizontal.ratio_yukizaki3 {
  height: 65vh;
  width: calc(65vh * calc(2560 / 2480));
}

.scroll-animations > .scrollsection > .item.-normal.-horizontal.ratio_rucoline {
  height: 55vh;
  width: calc(55vh * calc(1304 / 1090));
}

.scroll-animations > .scrollsection > .item.-small {
  height: 40vh;
  width: 30vh;
  z-index: 2;
}

.scroll-animations > .scrollsection > .item.-small.-vertical.ratio15 {
  height: calc(40vh * 1.5);
  width: 40vh;
}

.scroll-animations > .scrollsection > .item.-small.-horizontal {
  height: 40vh;
  width: calc(40vh * 1.6);
}

.scroll-animations > .scrollsection > .item.-small.-horizontal.ratio15 {
  height: 40vh;
  width: calc(40vh * 1.5);
}

@media (max-width: 1025px) {
  .scrollsection {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding-bottom: 12%;
  }
  .scroll-animations > .scrollsection > .item {
    margin-bottom: 3%;
  }
  .scroll-animations > .scrollsection > .item.-big.-vertical {
    width: 90vw;
    height: calc(90vw * 1.5);
  }
  .scroll-animations > .scrollsection > .item.-big.-horizontal {
    width: 90vw;
    height: calc(90vw / 1.6);
  }
  .scroll-animations > .scrollsection > .item.-big.-horizontal.ratio15 {
    width: 90vw;
    height: calc(90vw / 1.5);
  }
  .scroll-animations > .scrollsection > .item.-big.-horizontal.ratio_piecenord {
    width: 90vw;
    height: calc(90vw / calc(1440 / 1076));
  }
  .scroll-animations > .scrollsection > .item.-big.-horizontal.ratio_sabonginza {
    width: 90vw;
    height: calc(90vw / calc(1440 / 1211));
  }
  .scroll-animations > .scrollsection > .item.-normal {
    width: 90vw;
    height: calc(90vw / 1.5);
    z-index: 1;
  }
  .scroll-animations > .scrollsection > .item.-normal.-horizontal {
    width: 90vw;
    height: calc(90vw / 1.6);
  }
  .scroll-animations > .scrollsection > .item.-normal.-horizontal.ratio15 {
    width: 90vw;
    height: calc(90vw / 1.5);
  }
  .scroll-animations > .scrollsection > .item.-normal.-horizontal.ratio_rucoline {
    width: 90vw;
    height: calc(90vw / calc(1304 / 1090));
  }
  .scroll-animations > .scrollsection > .item.-small {
    width: 90vw;
    height: calc(90vw / 1.5);
    z-index: 2;
  }
  .scroll-animations > .scrollsection > .item.-small.-vertical.ratio15 {
    width: 90vw;
    height: calc(90vw / 1.5);
  }
  .scroll-animations > .scrollsection > .item.-small.-horizontal {
    width: 90vw;
    height: calc(90vw / 1.6);
  }
  .scroll-animations > .scrollsection > .item.-small.-horizontal.ratio15 {
    width: 90vw;
    height: calc(90vw / 1.5);
  }
  .scroll-animations > .scrollsection > .item.-horizontal.ratio_yukizaki3 {
    width: 90vw;
    height: calc(90vw * 1.5);
  }
}

@media (min-width: 1025px) {
  html,
  body {
    height: 100%;
    background: #eee;
  }
  body {
    overflow: hidden;
  }
  .scroll-animations > .scrollsection {
    /* padding: 10vw 10vh 10vh 10vmax; */
  }
  .scroll-animations > .scrollsection > .item {
    display: inline-block;
    position: relative;
    margin: 0 -20vh 0 0;
  }
  .scroll-animations > .scrollsection > .item:nth-child(2n) {
    top: 0;
  }
  .scroll-animations > .scrollsection > .item:nth-child(3n) {
    top: 20%;
  }
  .scroll-animations > .scrollsection > .item:nth-child(5n) {
    top: 0;
  }
  .scroll-animations > .scrollsection > .item.-vertical {
    top: 10%;
  }
  .scroll-animations > .scrollsection > .item::before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: 100%;
  }
  /*--added on Jul 26--*/
  /*--/added on Jul 26--*/
  .scroll-animations > .scrollsection > .item.-normal:nth-of-type(3n) {
    bottom: 5vh;
  }
  .scroll-animations > .scrollsection > .item.-normal:nth-of-type(4n) {
    bottom: -5vh;
  }
  .scroll-animations > .scrollsection > .item.-small:nth-of-type(3n) {
    bottom: 13vh;
  }
  .scroll-animations > .scrollsection > .item.-small:nth-of-type(4n) {
    bottom: -13vh;
  }
  .scroll-animations > .scrollsection > .item > .image {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    /* filter: grayscale(1); */
    opacity: 0;
    pointer-events: none;
    -webkit-transform: translateX(0) translateY(0) scale(1);
    transform: translateX(0) translateY(0) scale(1);
    -webkit-transition: opacity 1s ease, -webkit-filter 0.3s ease, -webkit-transform 1s ease;
    transition: opacity 1s ease, -webkit-filter 0.3s ease, -webkit-transform 1s ease;
    transition: filter 0.3s ease, opacity 1s ease, transform 1s ease;
    transition: filter 0.3s ease, opacity 1s ease, transform 1s ease, -webkit-filter 0.3s ease, -webkit-transform 1s ease;
  }
  .scroll-animations > .scrollsection > .item:nth-of-type(4n) > .image {
    -webkit-transform: translateX(-30vh) translateY(-30vh) scale(0.8);
    transform: translateX(-30vh) translateY(-30vh) scale(0.8);
    -webkit-transition-delay: 0;
    transition-delay: 0;
  }
  .scroll-animations > .scrollsection > .item:nth-of-type(4n - 1) > .image {
    -webkit-transform: translateX(30vh) translateY(30vh) scale(0.8);
    transform: translateX(30vh) translateY(30vh) scale(0.8);
    -webkit-transition-delay: 0.05s;
    transition-delay: 0.05s;
  }
  .scroll-animations > .scrollsection > .item:nth-of-type(4n - 2) > .image {
    -webkit-transform: translateX(-30vh) translateY(30vh) scale(0.8);
    transform: translateX(-30vh) translateY(30vh) scale(0.8);
    -webkit-transition-delay: 0.1s;
    transition-delay: 0.1s;
  }
  .scroll-animations > .scrollsection > .item:nth-of-type(4n - 3) > .image {
    -webkit-transform: translateX(-30vh) translateY(-30vh) scale(0.8);
    transform: translateX(-30vh) translateY(-30vh) scale(0.8);
    -webkit-transition-delay: 0.15s;
    transition-delay: 0.15s;
  }
  .scroll-animations > .scrollsection > .item > .image.-active {
    -webkit-transform: translateX(0) translateY(0) scale(1);
    transform: translateX(0) translateY(0) scale(1);
    opacity: 1;
    pointer-events: auto;
    -webkit-transition: opacity 1s ease, -webkit-filter 0.3s ease, -webkit-transform 1s ease;
    transition: opacity 1s ease, -webkit-filter 0.3s ease, -webkit-transform 1s ease;
    transition: filter 0.3s ease, opacity 1s ease, transform 1s ease;
    transition: filter 0.3s ease, opacity 1s ease, transform 1s ease, -webkit-filter 0.3s ease, -webkit-transform 1s ease;
  }
  .scroll-animations > .scrollsection > .item > .image.-clicked {
    -webkit-transform: translateX(0) translateY(0) scale(5);
    transform: translateX(0) translateY(0) scale(5);
    opacity: 0;
    pointer-events: auto;
    -webkit-transition: opacity 1s ease, -webkit-filter 0.3s ease, -webkit-transform 1s ease;
    transition: opacity 1s ease, -webkit-filter 0.3s ease, -webkit-transform 1s ease;
    transition: filter 0.3s ease, opacity 1s ease, transform 1s ease;
    transition: filter 0.3s ease, opacity 1s ease, transform 1s ease, -webkit-filter 0.3s ease, -webkit-transform 1s ease;
  }
  .scroll-animations > .scrollsection > .item > .image.-active:hover {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-filter: grayscale(0);
    filter: grayscale(0);
    opacity: 0.8;
    cursor: pointer;
  }
  .fake-ui {
    font-size: 0;
  }
  .fake-ui > .logo {
    position: fixed;
    top: 2vh;
    left: 2vh;
    height: 3vh;
    width: 2.5vh;
    border: solid 1vh #999;
  }
  .fake-ui > .nav {
    position: fixed;
    top: 2vh;
    right: 2vh;
  }
  .fake-ui > .nav > .item {
    background: #999;
    display: inline-block;
    height: 2vh;
    width: 10vh;
    margin-left: 2vh;
  }
  .fake-ui > .footer {
    position: fixed;
    bottom: 3vh;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    height: 2vh;
    width: 40vh;
    background: #999;
  }
  .item {
    position: relative;
    top: 10%;
  }
}
/*# sourceMappingURL=home.css.map */