@media screen and (max-width: 560px) {

  .Index header {
    position: fixed;
    margin-bottom: 0;
  }

  .Index nav h2 {display: block !important;}
  .Index footer {display: none;}
  body.scrolled .Index nav {opacity: 0 !important;}
  .header-sp h3::before {display: none;}
  nav.sp-first svg {
    width: 7rem;
    margin-right: -2.5px;
  }


}

.Index #Header,.Index #Nav {visibility: hidden;}
.Index nav {visibility: hidden;}

/* SpHeader */
/* SpHeader */
.header-scrolled header {top: 0 !important;}







.About .header-sp h2, .Work .header-sp h2,
.Contact .header-sp h2, .Product .header-sp h2 {display: none;}



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

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

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

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



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

.Works .header-sp h3::before,
.Work .header-sp h3::before {content: "これまで手掛けた空間";}
.Work .header-sp h3::after {content: "Works _ Spatial design";}

.Product .header-sp h3::before {content: "デザインしたプロダクト";}
.Product .header-sp h3::after {content: "Product _ Furniture and items";}

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



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

nav h3::before, .header-sp h3::before {
  display: block;
  font-size: 1.2rem;
  letter-spacing: .1em;
  font-family: neue-haas-unica, TsukuGoPr5-D, TsukuGoPro-D, sans-serif;
  margin-top: .5rem;
}
.header-sp h3::before {margin-top: -.25rem;}
nav h3::after {
  display: block;
  font-size: 1.1rem;
  letter-spacing: -.01em;
  font-family: neue-haas-unica, TsukuGoPr5-D, TsukuGoPro-D, sans-serif;
  margin-top: -.1rem;
  margin-left: 1px;
}
.header-sp h3::after {display: none;}

.header-sp .Menu {
  margin-left: calc(-1 * var(--padding));
  margin-top: -4.5rem;
}
/* SpHeader */
/* SpHeader */


header .pc-center ul li a {
  opacity: .3;
  transition: .8s 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: .8s ease-in-out;}
.Products header .pc-center ul li:nth-of-type(3) a {opacity: 1;transition: .8s ease-in-out;}
.About header .pc-center ul li:nth-of-type(2) a {opacity: 1;transition: .8s ease-in-out;}
.Contact header .pc-center ul li:nth-of-type(4) a {opacity: 1;transition: .8s ease-in-out;}

header h2 {display: none;}
.Index header h2 {display: block;}

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

.About header h3::before,
.About nav h3::before {content: "エトセトラについて";}
.About header h3::after,
.About nav h3::after {content: "About _ etcetera inc.";}

.scrolled .Index header .sp-top h3::before,
.Works header h3::before,
.Works nav h3::before,
.wSlug header h3::before,
.wSlug nav h3::before {content: "これまで手掛けた空間";}

.scrolled .Index header h3::after,
.Works header h3::after,
.Works nav h3::after,
.wSlug header h3::after,
.wSlug nav h3::after {content: "Works _ Spatial design ";}

.Products nav h3::before,
.Products header h3::before {content: "デザインしたプロダクト";}
.Products nav h3::after,
.Products header h3::after {content: "Product _ Furniture and items";}

.Contact header h3::before,
.Contact nav h3::before {content: "お問い合わせはこちら";}
.Contact nav h3::after,
.Contact header 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: 100vw;
  margin: 0 auto;
  margin-left: calc(-1 * var(--padding));
  margin-bottom: -2px;
}

#slug-body .wrapper .body h2,
#slug-body .wrapper .body h3 {
  font-family: TsukuGoPr5-D, TsukuGoPro-D, sans-serif;
  font-size: 1.6rem;
  letter-spacing: .1em;
  margin-left: -.5px;
  margin-left: 0;
  margin-bottom: 1.5rem;
}

#slug-body .credit p {line-height: 2.0;}




.Contact footer {display: none;}

@media screen and (min-width: 720px) {

  header h2 {display: block;}
  header h3::before,header h3::after {display: none;}
    .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: 0 auto;
      margin-left: 0px;
    }

    #slug-body .wrapper .body h2,
    #slug-body .wrapper .body h3 {font-size: 1.8rem;}

    #slug-body .wrapper .body h2 {margin-bottom: 1.8rem;}

    

}