@media screen and (max-width: 480px) {
  .Index header {
    position: fixed;
    margin-bottom: 0;
  }
}


.first-section {padding-top: 15rem;}


body::-webkit-scrollbar,
::-webkit-scrollbar {display: none;}


#index-top,.scrolled #index-top,
.scrolled.scrollback #index-top,
header, .scrolled header,
.scrolled.scrollback header {
  transition: transform 2400ms cubic-bezier(0.2, 0.8, 0.4, 1);
}
#second img,.scrolled #second img {
  transition: opacity 2400ms cubic-bezier(0.2, 0.8, 0.4, 1);
}


.mySwiper .swiper-slide:nth-of-type(2).swiper-slide-active {
}

.scrolled header {transform: translate3d(0, 0, 0) !important;}
.scrolled.scrollback header {transform: translate3d(0, -5rem, 0) !important;}
.scrolled #index-top {transform: translate3d(0, -50%, 0);}
.scrolled.scrollback #index-top {transform: translate3d(0, 0, 0);}

#second img {opacity: 0 !important;}
.scrolled #second img {opacity: 1 !important;}
.scrolled.scrollback #second img {opacity: 0 !important;}


.swiper {
  width: 100%;
  height: 100%;
}

.swiper-wrapper {
  transition-timing-function: cubic-bezier(.6,0,.6,1);
  transition-timing-function: cubic-bezier(.55,.25,.65,.85);
  transition-timing-function: cubic-bezier(0.2, 0.8, 0.4, 1);
}  

.swiper-slide {
  background: transparent;
}

.swiper-slide img {
  height: 100vh;
  object-fit: cover;
}


header .pc-center ul li a {transition: 1.5s ease-in-out;}
.Works header .pc-center ul li:nth-of-type(1) a,
.wSlug header .pc-center ul li:nth-of-type(1) a {opacity: 1;transition: 1.5s ease-in-out;}
.Products header .pc-center ul li:nth-of-type(2) a {opacity: 1;transition: 1.5s ease-in-out;}
.About header .pc-center ul li:nth-of-type(3) a {opacity: 1;transition: 1.5s ease-in-out;}
.Contact header .pc-center ul li:nth-of-type(4) a {opacity: 1;transition: 1.5s ease-in-out;}

header .sp-top h2 {display: none;}
.Index header .sp-top h2 {display: block;}

header .sp-top h3::before, header .sp-top h3::after {display: block;}
header .sp-top h3::after {white-space: pre;font-size: 1.1rem;}

.About header .sp-top h3::before {content: "エトセトラについて";}
.About header .sp-top h3::after {content: "About etcetera inc.";}

.Works header .sp-top h3::before,
.wSlug header .sp-top h3::before {content: "デザインとスタイリング";}
.Works header .sp-top h3::after,
.wSlug header .sp-top h3::after {content: "Design and styling";}


.Products header .sp-top h3::before {content: "手掛けたプロダクト";}
.Products header .sp-top h3::after {content: "Product collcetions";}

.Contact header .sp-top h3::before {content: "お問い合わせはこちら";}
.Contact header .sp-top h3::after {content: "Get in touch with us";}

header .sp-top h3::before, header .sp-top h3::after {
  display: block;
  font-size: 1.35rem;
}
header .sp-top h3::before {margin-left: -0.2rem;}
header .sp-top h3::after {margin-top: -.3rem; font-size: 1.25rem;}





#slug-body .wrapper img {
  width: 100%;
  margin: 2.5rem auto;
}
#slug-body .wrapper h3 {
  font-family: TsukuGoPr5-D, TsukuGoPro-D, sans-serif;
  font-size: 1.4rem;
  letter-spacing: .1em;
  margin-left: -.5px;
}

#slug-body .credit * {line-height: 1.6;}

@media screen and (min-width: 720px) {
    .first-section {padding-top: 7rem;}
    .Index section, .Works section, .Work section, .Product section,
    .About section, .Contact section, .Slug section {padding-left: 25%;}

    #slug-body .wrapper img {
      width: 100%;
      margin: 4rem auto;
      margin-left: 2.2px;
    }
    #slug-body .wrapper h3 {font-size: 1.6rem;}

    

}