@font-face {
  font-family: "Gotham";
  src: url(../font/Gotham/Gotham-Book.otf);
}
html,
body {
  font-family: "Gotham", sans-serif;
  font-style: normal;
  width: 100%;
  font-size: 16px;
  margin: 0 auto;
}

img {
  width: 100%;
  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 {
  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;
}

.top_logo {
  width: 48.2666666667%;
  transform: translateX(-50%);
  position: fixed;
  left: 50%;
  top: clamp(10px, 2.6666666667vw, 30px);
  z-index: 100;
  max-width: 400px;
}

.lead {
  text-align: center;
  padding: clamp(42px, 11.2vw, 100px) 0 clamp(55px, 14.6666666667vw, 120px);
  font-size: clamp(11px, 2.9333333333vw, 14px);
  line-height: 1.5;
}

.credit {
  font-family: "futura-pt", sans-serif;
  font-style: normal;
  margin: clamp(40px, 10.6666666667vw, 60px) auto clamp(125px, 33.3333333333vw, 150px);
  text-align: center;
}
.credit li:not(li:last-child) {
  margin-bottom: 12px;
}
.credit a {
  text-decoration: underline;
  width: fit-content;
  margin: 0 auto;
  font-size: clamp(12px, 3.2vw, 14px);
}
.credit a[href=""] {
  text-decoration: none;
}

footer .sns_li {
  width: 220px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
footer .sns_li li {
  width: 35px;
}
footer .logo {
  width: 130px;
  margin: clamp(60px, 16vw, 180px) auto clamp(30px, 8vw, 40px);
}
footer .copy {
  font-size: 10px;
  transform: scale(0.9);
  transform-origin: center center;
  text-align: center;
}

.img_wrap1 .img1,
.img_wrap5 .img1 {
  width: 86.6666666667%;
  margin: 0 auto clamp(50px, 13.3333333333vw, 80px);
}
.img_wrap1 .img2,
.img_wrap5 .img2 {
  width: 66.6666666667%;
  margin: 0 auto;
}

.img_wrap2 .img1,
.img_wrap13 .img1 {
  width: 66.6666666667%;
  margin: 0 30px clamp(25px, 6.6666666667vw, 40px) auto;
}
.img_wrap2 .img2,
.img_wrap13 .img2 {
  width: 53.3333333333%;
  margin: 0 auto 0 25px;
}

.img_wrap3 .grid {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(10px, 2.6666666667%, 16px);
  justify-content: center;
}
.img_wrap3 li:nth-child(1) {
  margin-left: clamp(-25px, -6.6666666667%, -40px);
}
.img_wrap3 li:nth-child(4) {
  margin-right: clamp(-25px, -6.6666666667%, -40px);
}
.img_wrap3 li:nth-child(1),
.img_wrap3 li:nth-child(4) {
  width: 46.6666666667%;
}
.img_wrap3 li:nth-child(2) {
  margin: auto 0 0 0;
}
.img_wrap3 li:nth-child(2),
.img_wrap3 li:nth-child(3) {
  width: 36%;
}

.img_wrap4 .img1,
.img_wrap8 .img1 {
  width: 86.6666666667%;
  margin: 0 auto;
}
.img_wrap4 .img2,
.img_wrap8 .img2 {
  width: 66.6666666667%;
  margin: clamp(40px, 10.6666666667%, 80px) auto clamp(40px, 10.6666666667%, 80px) 6.6666666667%;
}
.img_wrap4 .img3,
.img_wrap8 .img3 {
  width: 53.3333333333%;
  margin: 0 6.6666666667% 0 auto;
}

.img_wrap6 .fade_slider {
  width: 86.6666666667%;
  margin: 0 auto;
}

.img_wrap7 .img1,
.img_wrap7 .img2,
.img_wrap10 .img1,
.img_wrap10 .img2,
.img_wrap11 .img1,
.img_wrap11 .img2 {
  width: 86.6666666667%;
  margin: 0 auto;
}
.img_wrap7 .img1,
.img_wrap10 .img1,
.img_wrap11 .img1 {
  margin: 0 auto clamp(10px, 2.6666666667%, 20px);
}

.img_wrap9 .img2 {
  width: 80%;
  margin: clamp(40px, 10.6666666667vw, 80px) 0 clamp(25px, 6.6666666667vw, 50px) auto;
}
.img_wrap9 .img3 {
  width: 80%;
}

.img_wrap11 .img3 {
  margin: clamp(25px, 6.6666666667vw, 40px) auto 0;
}

.img_wrap12 .img1 {
  width: 86.6666666667%;
  margin: 0 auto;
}
.img_wrap12 .grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: clamp(25px, 6.6666666667vw, 80px) auto 0;
}

.img_wrap13 .img1 {
  margin: 0 auto 30px clamp(25px, 6.6666666667vw, 40px);
}
.img_wrap13 .img2 {
  margin: 0 25px 0 auto;
}

section .bg {
  background-size: cover;
  background-repeat: no-repeat;
  left: 0;
  top: -10%;
  width: 100%;
  z-index: -1;
}

#sec2 {
  position: relative;
}
#sec2 .bg {
  background-image: url(../images/bg1.png);
  background-position: right top;
  position: absolute;
  height: 220%;
}

#sec5 {
  position: relative;
}
#sec5 .bg {
  background-image: url(../images/bg2.png);
  background-position: right top;
  position: absolute;
  height: 190%;
}

#sec8 {
  position: relative;
}
#sec8 .bg {
  background-image: url(../images/bg3.png);
  background-position: 40% top;
  position: absolute;
  height: 120%;
}

#sec10 {
  position: relative;
}
#sec10 .bg {
  background-image: url(../images/bg4.png);
  background-position: 40% top;
  position: absolute;
  height: 260%;
}

#sec13 {
  position: relative;
}
#sec13 .bg {
  background-image: url(../images/bg5.png);
  background-position: 20% top;
  background-size: cover;
  position: absolute;
  height: max(200%, 10.101010101vw);
}

.footer_top figure {
  width: max(150px, 40%);
  margin: 0 auto 200px;
  max-width: 300px;
}

@media screen and (max-width: 768px) {
  .fv {
    height: 100svh;
  }
  .fv .container {
    padding: 25px;
    position: relative;
  }
  .fv .container::before, .fv .container::after {
    position: absolute;
    writing-mode: vertical-rl;
    font-size: min(36px, 4.8vw);
    transform: translateY(-50%);
    top: 50%;
  }
  .fv .container::before {
    content: "REFINED NATURAL";
    left: 15px;
    letter-spacing: 0.039em;
  }
  .fv .container::after {
    content: "COLLAGE GALLARDAGALANTE  2024 SPRING";
    right: 15px;
    white-space: nowrap;
    letter-spacing: 0.047em;
  }
  .fv .box {
    height: calc(100svh - 50px);
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
  }
}
@media screen and (min-width: 769px) {
  .fv {
    height: 100vh;
  }
  .fv .container {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: left top;
    background-repeat: no-repeat;
    position: relative;
  }
  .fv h1 {
    position: absolute;
    transform: translateY(-50%);
    top: 50%;
    text-align: center;
    font-size: min(24px, 1.6666666667vw);
    right: 150px;
    line-height: 1.25;
    letter-spacing: 0.05em;
  }
  section .container {
    max-width: 635px;
    margin: 0 auto;
  }
}/*# sourceMappingURL=style.css.map */