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

img,
video,
object {
  height: auto;
  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: #000;
}
@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;
}
#loading-bg .fv_title {
  position: absolute;
  z-index: 5;
  translate: -50% -50%;
  top: 50%;
  left: 50%;
  width: 66.6666666667%;
}

@media screen and (min-width: 769px) {
  #loading-bg .fv_title {
    width: 30.5555555556%;
  }
}
/*-------------------
* コンテンツのスタイル
-------------------*/
/*--------------------------------------*
* 基本設定
*--------------------------------------*/
/*--------------------------------------*
* FV
*--------------------------------------*/
.fv {
  position: relative;
}
.fv .fv_li {
  display: grid;
}
.fv .fv_li li {
  overflow: hidden;
}
.fv .fv_li li img,
.fv .fv_li li video {
  object-fit: cover;
  height: 102%;
  width: 102%;
  object-position: center;
}
.fv .fv_title {
  position: absolute;
  z-index: 5;
  translate: -50% -50%;
  top: 50%;
  left: 50%;
  width: 66.6666666667%;
}

@media screen and (max-width: 768px) {
  .fv .fv_li {
    grid-template-columns: repeat(3, 1fr);
    height: 100vh;
  }
  .fv .fv_li li figure,
  .fv .fv_li li .movie {
    height: 25vh;
  }
}
@media screen and (min-width: 769px) {
  .fv .fv_li {
    grid-template-columns: repeat(5, 1fr);
    height: 100vh;
  }
  .fv .fv_li li figure,
  .fv .fv_li li .movie {
    height: 50vh;
  }
  .fv .fv_title {
    width: 30.5555555556%;
  }
}
/*--------------------------------------*
* 基本設定
*--------------------------------------*/
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.opacity {
  opacity: 0;
}

@keyframes maskLeft {
  0% {
    mask-position: left;
    -webkit-mask-position: left;
  }
  100% {
    mask-position: right;
    -webkit-mask-position: right;
  }
}
@keyframes maskRight {
  0% {
    mask-position: right;
    -webkit-mask-position: right;
  }
  100% {
    mask-position: left;
    -webkit-mask-position: left;
  }
}
.mask_left {
  clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
}

.mask_right {
  clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
}

.mask_full {
  clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%);
}

@keyframes zoomIn {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.2);
  }
}
@keyframes zoomOut {
  0% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
figure.zoom {
  overflow: hidden;
}

/*--------------------------------------*
* セクション共通
*--------------------------------------*/
.code_image {
  position: relative;
}
.code_image .icon {
  position: absolute;
  z-index: 10;
}

.code1 .fade_slider {
  width: 80%;
  margin: 0 auto;
}
.code1 .icon1 {
  width: 10.6666666667%;
  top: 4%;
  left: 4%;
}
.code1 .icon2 {
  width: 9.3333333333%;
  bottom: -4%;
  right: 4%;
}

.code2 .code_image_li {
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.code2 .code_image_li li:nth-child(2) {
  margin-top: 75%;
}
.code2 .code_image_li li:nth-child(3) {
  margin-top: -75%;
}
.code2 .icon1 {
  width: 10.6666666667%;
  top: -8%;
  left: 4%;
}
.code2 .icon2 {
  width: 9.3333333333%;
  bottom: 17.3333333333%;
  right: 5.3333333333%;
}

.code3 .code_image_li {
  display: flex;
}
.code3 .code_image_li figure {
  width: 50%;
}
.code3 .icon1 {
  width: 8%;
  top: -2.6666666667%;
  left: 21.3333333333%;
}
.code3 .icon2 {
  width: 6.6666666667%;
  bottom: -4%;
  right: 40%;
}

.code4 .code_image_li {
  width: 80%;
  margin: 0 auto;
}
.code4 .icon1 {
  width: 10.6666666667%;
  top: -5.3333333333%;
  right: 2.6666666667%;
}
.code4 .icon2 {
  width: 10.6666666667%;
  padding-top: 53.3333333333%;
  left: 1.3333333333%;
}
.code4 .icon3 {
  width: 8%;
  padding-top: 122.6666666667%;
  right: 1.3333333333%;
}

.code5 {
  position: relative;
}
.code5 .main {
  width: 66.6666666667%;
  margin: 0 auto 0 0;
}
.code5 .code_image_li {
  width: 40%;
  display: grid;
  gap: 1.3333333333vw;
  margin-top: -49.3333333333%;
  margin-left: auto;
}
.code5 .icon1 {
  width: 6.6666666667%;
  top: 10.6666666667%;
  left: 0;
}
.code5 .icon2 {
  width: 6.9333333333%;
  top: 26.6666666667%;
  right: 2.6666666667%;
}
.code5 .icon3 {
  width: 8%;
  bottom: vw-35;
  left: 50.6666666667%;
}

.code6 .icon1 {
  width: 10.6666666667%;
  bottom: -10.6666666667%;
  left: 1.3333333333%;
}

.code7 .code_image_li li {
  width: 50%;
}
.code7 .code_image_li li:nth-child(1) {
  margin: 0 8% 0 auto;
}
.code7 .code_image_li li:nth-child(2) {
  margin: -31.2% auto 0 6.6666666667%;
}
.code7 .code_image_li li:nth-child(3) {
  margin: -41.0666666667% 0 0 auto;
}
.code7 .code_image_li li:nth-child(4) {
  margin: -31.2% auto 0 0;
  position: relative;
}
.code7 .code_image_li li:nth-child(5) {
  margin: -41.0666666667% 8% 0 auto;
}
.code7 .icon1 {
  width: 6.6666666667%;
  top: 1.3333333333vw;
  right: 2.6666666667%;
}
.code7 .icon2 {
  width: 8%;
  bottom: 13.3333333333vw;
  left: 2.6666666667%;
}
.code7 .icon3 {
  width: 8%;
  bottom: 8vw;
  right: 2.6666666667%;
}

.code8 .main {
  width: 66.6666666667%;
  margin: 0 0 0 auto;
}
.code8 .code_image_li {
  width: 66.6666666667%;
  margin: -33.3333333333% auto 0 0;
  display: grid;
  gap: 2.6666666667vw;
}

.code9 .main {
  width: 53.3333333333%;
  margin: 0 0 2.6666666667% auto;
}
.code9 .code_image_li {
  width: 80%;
  margin: 0 auto 0 3.3333333333%;
}
.code9 .icon1 {
  width: 8%;
  padding-bottom: 58.6666666667%;
  left: 4%;
}
.code9 .icon2 {
  width: 5.3333333333%;
  padding-top: 53.3333333333%;
  right: 8%;
}
.code9 .icon3 {
  width: 4%;
  padding-top: 200%;
  right: 18.6666666667%;
}

.code10 .icon1 {
  width: 13.3333333333%;
  top: -12%;
  left: 4%;
}
.code10 .icon2 {
  width: 5.3333333333%;
  top: -2.6666666667%;
  right: 8%;
}

.code11 .main {
  width: 80%;
  margin: 0 auto 13.3333333333% auto;
}
.code11 .code_image_li {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.code11 .icon1 {
  width: 8%;
  top: -8%;
  right: 5.3333333333%;
}
.code11 .icon2 {
  width: 6.6666666667%;
  bottom: 2.6666666667%;
  left: 5.3333333333%;
}

.loop_slider .swiper-wrapper {
  transition-timing-function: linear;
}

.credit {
  display: grid;
  width: fit-content;
  margin: 0 auto;
  will-change: transform;
}

footer {
  height: 100vh;
  display: grid;
  place-content: center;
}
footer .logo {
  width: 66.6666666667vw;
  margin: 0 auto;
  mask-image: url(../assets/images/fv_title.svg);
  height: 36.5333333333vw;
  mask-repeat: no-repeat;
  mask-size: contain;
  mask-position: center;
  background-color: #000;
}

@media screen and (max-width: 768px) {
  .code:not(.code1) {
    margin-top: 26.6666666667%;
  }
  .credit {
    font-size: 3.7333333333vw;
    gap: 2.6666666667vw;
  }
  .code1 {
    margin-top: 10%;
  }
  .code4 .icon_wrapper,
  .code9 .icon_wrapper {
    position: sticky;
    top: 26.6666666667vw;
    z-index: 10;
  }
  .code4 .sticky-wrapper,
  .code9 .sticky-wrapper {
    height: 360vw;
    position: relative;
  }
  .code4 .code_image_li,
  .code9 .code_image_li {
    position: sticky;
    top: 26.6666666667vw;
    height: 120vw;
    overflow: hidden;
  }
  .code4 .code_image_li li,
  .code9 .code_image_li li {
    position: sticky;
    top: 0;
  }
  .code1 .credit,
  .code3 .credit,
  .code6 .credit,
  .code10 .credit,
  .code11 .credit {
    margin: 6.6666666667% auto 0;
  }
  .code2,
  .code5 {
    position: relative;
  }
  .code2 .credit,
  .code5 .credit {
    position: absolute;
  }
  .code2 .credit {
    bottom: 0;
    right: 6.6666666667%;
  }
  .code4 .credit {
    margin: 6.6666666667% 13.3333333333% 0 auto;
  }
  .code5 .credit {
    top: 106.6666666667vw;
    left: 6.6666666667%;
  }
  .code7 .credit {
    margin: 6.6666666667% auto 0 6.6666666667%;
  }
  .code8 .credit {
    margin: 6.6666666667% 33.3333333333% 0 auto;
  }
  .code9 .credit {
    margin: 6.6666666667vw auto 0 3.3333333333%;
  }
}
@media screen and (min-width: 769px) {
  .code {
    margin-top: 15.2777777778vw;
  }
  .code_wrapper {
    max-width: 45.1388888889vw;
    margin: 0 auto;
  }
  .credit {
    font-size: 1.0416666667vw;
    gap: 0.6944444444vw;
  }
  .code4 .icon_wrapper,
  .code9 .icon_wrapper {
    position: sticky;
    top: 2.0833333333vw;
    z-index: 10;
  }
  .code4 .sticky-wrapper,
  .code9 .sticky-wrapper {
    height: 162.5vw;
    position: relative;
  }
  .code4 .code_image_li,
  .code9 .code_image_li {
    position: sticky;
    top: 2.0833333333vw;
    height: 54.1666666667vw;
  }
  .code1 .credit,
  .code3 .credit,
  .code4 .credit,
  .code6 .credit,
  .code10 .credit {
    margin: 2.0833333333vw auto 0;
  }
  .code2,
  .code5,
  .code7,
  .code8,
  .code9 {
    position: relative;
  }
  .code2 .credit {
    position: absolute;
    bottom: 0;
    left: 54.6153846154%;
  }
  .code5 .credit {
    position: absolute;
    bottom: 0;
    left: 27.6923076923%;
  }
  .code7 .credit {
    position: absolute;
    bottom: 0;
    left: 11.5384615385%;
  }
  .code8 .credit {
    position: absolute;
    bottom: 0;
    right: 1.5384615385%;
  }
  .code9 .credit {
    position: absolute;
    bottom: 0;
    right: -13.8888888889%;
  }
  .code11 .credit {
    margin: 2.0833333333vw auto 0 0;
  }
  .loop_slider {
    margin: 0 calc(50% - 50vw);
    width: 100vw;
  }
  footer .logo {
    width: 17.3611111111vw;
  }
}/*# sourceMappingURL=style.css.map */