/* =========================
   RESET
========================= */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


html {
  scroll-behavior: smooth;
}


body {
  font-family:
    Arial,
    "Noto Sans JP",
    sans-serif;

  color: #111;

  background: #f4f4f1;

  line-height: 1.8;

  overflow-x: hidden;
}


img {
  width: 100%;

  display: block;
}


a {
  color: inherit;

  text-decoration: none;
}


/* =========================
   HEADER
========================= */

.header {

  position: fixed;

  top: 0;
  left: 0;

  width: 100%;

  height: 90px;

  padding: 0 5vw;

  display: flex;

  align-items: center;

  justify-content: space-between;

  z-index: 100;

  mix-blend-mode: difference;

  color: #fff;

}


.logo {

  width: 110px;

}


.logo img {

  filter:
    grayscale(1)
    brightness(0)
    invert(1);

}


.nav {

  display: flex;

  gap: 30px;

}


.nav a {

  font-size: 10px;

  letter-spacing: .18em;

}


.menu {

  display: none;

}


/* =========================
   HERO
========================= */

.hero {

  position: relative;

  height: 100vh;

  min-height: 700px;

  overflow: hidden;

  color: #fff;

}


.hero-image {

  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;

  object-position: center 30%;

}


.hero-overlay {

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(0,0,0,.48),
      rgba(0,0,0,.05)
    );

}


.hero-content {

  position: absolute;

  left: 7vw;

  bottom: 13vh;

  z-index: 2;

}


.hero-small {

  font-size: 11px;

  letter-spacing: .2em;

  margin-bottom: 30px;

}


.hero h1 {

  font-size:
    clamp(
      55px,
      8vw,
      130px
    );

  line-height: .9;

  letter-spacing: -.06em;

  font-weight: 400;

}


.hero-copy {

  margin-top: 40px;

  font-size: 15px;

}


.hero-scroll {

  position: absolute;

  left: 7vw;

  bottom: 40px;

  z-index: 3;

  font-size: 9px;

  letter-spacing: .2em;

  display: flex;

  align-items: center;

  gap: 20px;

}


.hero-scroll span {

  width: 70px;

  height: 1px;

  background: #fff;

}


/* =========================
   COMMON
========================= */

.section {

  padding:
    160px 7vw;

}


.section-label {

  font-size: 10px;

  letter-spacing: .2em;

  color: #777;

  margin-bottom: 90px;

}


.line-link {

  display: inline-flex;

  gap: 35px;

  align-items: center;

  border-bottom:
    1px solid #111;

  padding-bottom: 8px;

  margin-top: 50px;

  font-size: 10px;

  letter-spacing: .15em;

}


.line-link span {

  transition:
    transform .3s;

}


.line-link:hover span {

  transform:
    translateX(8px);

}


/* =========================
   ABOUT
========================= */

.about {

  background: #f4f4f1;

}


.about-layout {

  display: grid;

  grid-template-columns:
    1.2fr 1fr;

  gap: 10vw;

}


.about h2 {

  font-size:
    clamp(
      50px,
      7vw,
      100px
    );

  line-height: 1;

  font-weight: 400;

  letter-spacing: -.06em;

}


.about-text {

  max-width: 500px;

}


.about-text .large {

  font-size: 21px;

  line-height: 1.8;

  margin-bottom: 35px;

}


/* =========================
   MAKING
========================= */

.making {

  position: relative;

  height: 80vh;

  overflow: hidden;

}


.making-image {

  width: 100%;

  height: 100%;

}


.making-image img {

  height: 100%;

  object-fit: cover;

  object-position: center;

}


.making-caption {

  position: absolute;

  bottom: 50px;

  left: 7vw;

  color: #fff;

  display: flex;

  flex-direction: column;

  font-size:
    clamp(
      50px,
      8vw,
      120px
    );

  line-height: .85;

  letter-spacing: -.06em;

}


/* =========================
   BUSINESS
========================= */

.business {

  background: #e7e7e3;

}


.business-header {

  display: grid;

  grid-template-columns:
    1.2fr 1fr;

  gap: 10vw;

  margin-bottom: 100px;

}


.business-header h2 {

  font-size:
    clamp(
      55px,
      7vw,
      100px
    );

  line-height: .9;

  font-weight: 400;

  letter-spacing: -.06em;

}


.business-header p {

  max-width: 480px;

}


.business-list {

  border-top:
    1px solid #aaa;

}


.business-item {

  display: grid;

  grid-template-columns:
    70px 1fr 30px;

  gap: 30px;

  align-items: center;

  padding: 40px 0;

  border-bottom:
    1px solid #aaa;

  transition:
    padding .4s;

}


.business-item:hover {

  padding-left: 20px;

}


.business-item h3 {

  font-size: 24px;

  font-weight: 400;

  letter-spacing: .05em;

}


.business-item p {

  color: #777;

  font-size: 13px;

}


/* =========================
   PROCESS
========================= */

.process {

  padding:
    150px 7vw;

  background: #111;

  color: #fff;

}


.process-grid {

  display: grid;

  grid-template-columns:
    1.3fr .7fr;

  gap: 50px;

  align-items: center;

}


.process-photo img {

  height: 100%;

  object-fit: cover;

}


.photo-large {

  height: 700px;

}


.process-copy {

  padding: 40px;

}


.process-copy span {

  font-size: 10px;

  letter-spacing: .2em;

  color: #999;

}


.process-copy h2 {

  font-size:
    clamp(
      45px,
      5vw,
      80px
    );

  line-height: 1;

  font-weight: 400;

  margin:
    35px 0;

}


.process-copy p {

  color: #aaa;

  font-size: 14px;

}


.photo-small {

  grid-column: 2;

  height: 450px;

  margin-top: -100px;

}


/* =========================
   BRANDS
========================= */

.brands {

  background: #f4f4f1;

}


.brands-heading {

  display: grid;

  grid-template-columns:
    1.2fr 1fr;

  gap: 10vw;

  margin-bottom: 100px;

}


.brands-heading h2 {

  font-size:
    clamp(
      60px,
      8vw,
      120px
    );

  line-height: .85;

  font-weight: 400;

  letter-spacing: -.07em;

}


.brands-heading p {

  max-width: 450px;

}


.brand-grid {

  display: grid;

  grid-template-columns:
    repeat(2,1fr);

  gap: 30px;

}


.brand-photo {

  height: 700px;

  overflow: hidden;

}


.brand-photo img {

  height: 100%;

  object-fit: cover;

  transition:
    transform .8s;

}


.brand-card:hover
.brand-photo img {

  transform:
    scale(1.05);

}


.brand-bottom {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 25px 0;

  border-bottom:
    1px solid #aaa;

}


.brand-bottom img {

  width: 100px;

  max-height: 50px;

  object-fit: contain;

}


.brand-bottom span {

  font-size: 9px;

  letter-spacing: .15em;

}


/* =========================
   GALLERY
========================= */

.gallery {

  background: #e7e7e3;

}


.gallery-header {

  display: grid;

  grid-template-columns:
    1.2fr 1fr;

  gap: 10vw;

  margin-bottom: 100px;

}


.gallery-header h2 {

  font-size:
    clamp(
      55px,
      7vw,
      100px
    );

  line-height: .9;

  font-weight: 400;

  letter-spacing: -.06em;

}


.gallery-grid {

  display: grid;

  grid-template-columns:
    repeat(2,1fr);

  gap: 30px;

}


.gallery-item {

  height: 500px;

  overflow: hidden;

}


.gallery-item img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition:
    transform .8s;

}


.gallery-item:hover img {

  transform:
    scale(1.04);

}


.gallery-wide {

  grid-column:
    1 / -1;

  height: 650px;

}


.gallery-model {

  height: 700px;

}


/* =========================
   COMPANY
========================= */

.company {

  background: #f4f4f1;

}


.company-layout {

  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 10vw;

}


.company h2 {

  font-size:
    clamp(
      60px,
      8vw,
      120px
    );

  line-height: .85;

  font-weight: 400;

  letter-spacing: -.07em;

}


.company-info dl {

  display: grid;

  grid-template-columns:
    150px 1fr;

  padding: 25px 0;

  border-top:
    1px solid #aaa;

}


.company-info dt {

  font-size: 9px;

  letter-spacing: .15em;

  color: #777;

}


/* =========================
   RECRUIT
========================= */

.recruit {

  min-height: 90vh;

  padding:
    150px 7vw;

  display: flex;

  align-items: center;

  background:
    url("images/model-black.jpg")
    center / cover;

  color: #fff;

  position: relative;

}


.recruit::before {

  content: "";

  position: absolute;

  inset: 0;

  background:
    rgba(0,0,0,.45);

}


.recruit-inner {

  position: relative;

  z-index: 2;

}


.recruit-inner > span {

  font-size: 10px;

  letter-spacing: .2em;

}


.recruit h2 {

  font-size:
    clamp(
      80px,
      13vw,
      200px
    );

  line-height: .8;

  font-weight: 400;

  letter-spacing: -.08em;

  margin:
    50px 0;

}


.recruit p {

  font-size: 16px;

}


.recruit-button {

  display: inline-flex;

  gap: 50px;

  margin-top: 50px;

  padding:
    20px 30px;

  border:
    1px solid #fff;

  font-size: 10px;

  letter-spacing: .2em;

}


/* =========================
   CONTACT
========================= */

.contact {

  background: #111;

  color: #fff;

}


.contact .section-label {

  color: #777;

}


.contact-layout {

  display: grid;

  grid-template-columns:
    1.2fr 1fr;

  gap: 10vw;

}


.contact h2 {

  font-size:
    clamp(
      70px,
      10vw,
      150px
    );

  line-height: .8;

  font-weight: 400;

  letter-spacing: -.07em;

}


.contact-layout p {

  color: #aaa;

}


.contact-button {

  display: flex;

  justify-content: space-between;

  padding:
    25px 0;

  margin-top: 50px;

  border-bottom:
    1px solid #555;

  font-size: 10px;

  letter-spacing: .2em;

}


/* =========================
   FOOTER
========================= */

.footer {

  padding:
    70px 7vw 30px;

  background: #111;

  color: #fff;

}


.footer > img {

  width: 120px;

  filter:
    grayscale(1)
    brightness(0)
    invert(1);

  margin-bottom: 100px;

}


.footer > div {

  display: flex;

  justify-content: space-between;

  padding-top: 25px;

  border-top:
    1px solid #444;

  color: #777;

  font-size: 10px;

}


/* =========================
   MOBILE
========================= */

@media
(max-width: 768px) {


  .header {

    height: 70px;

    padding:
      0 25px;

  }


  .nav {

    position: fixed;

    inset: 0;

    background: #111;

    color: #fff;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 25px;

    opacity: 0;

    visibility: hidden;

    transition:
      .4s;

  }


  .nav.active {

    opacity: 1;

    visibility: visible;

  }


  .nav a {

    font-size: 18px;

  }


  .menu {

    display: block;

    width: 40px;

    height: 40px;

    background: none;

    border: none;

    position: relative;

    z-index: 10;

  }


  .menu span {

    position: absolute;

    left: 7px;

    width: 25px;

    height: 1px;

    background: currentColor;

    transition:
      .3s;

  }


  .menu span:first-child {

    top: 15px;

  }


  .menu span:last-child {

    top: 23px;

  }


  .menu.active span:first-child {

    top: 19px;

    transform:
      rotate(45deg);

  }


  .menu.active span:last-child {

    top: 19px;

    transform:
      rotate(-45deg);

  }


  .hero {

    min-height:
      100svh;

  }


  .hero-image {

    object-position:
      55% center;

  }


  .hero-content {

    left: 25px;

    bottom: 120px;

  }


  .hero h1 {

    font-size:
      15vw;

  }


  .section {

    padding:
      100px 25px;

  }


  .section-label {

    margin-bottom:
      50px;

  }


  .about-layout,
  .business-header,
  .brands-heading,
  .gallery-header,
  .company-layout,
  .contact-layout {

    grid-template-columns:
      1fr;

    gap:
      50px;

  }


  .making {

    height:
      60vh;

  }


  .making-caption {

    left: 25px;

  }


  .business-item {

    grid-template-columns:
      35px 1fr 20px;

    gap:
      15px;

  }


  .process {

    padding:
      100px 25px;

  }


  .process-grid {

    grid-template-columns:
      1fr;

  }


  .photo-large {

    height:
      500px;

  }


  .photo-small {

    grid-column:
      auto;

    height:
      350px;

    margin-top:
      0;

  }


  .brand-grid {

    grid-template-columns:
      1fr;

  }


  .brand-photo {

    height:
      600px;

  }


  .gallery-grid {

    grid-template-columns:
      1fr;

  }


  .gallery-wide {

    grid-column:
      auto;

    height:
      400px;

  }


  .gallery-item,
  .gallery-model {

    height:
      500px;

  }


  .recruit {

    min-height:
      80vh;

    padding:
      100px 25px;

  }


  .recruit h2 {

    font-size:
      22vw;

  }


  .footer {

    padding:
      50px 25px 25px;

  }


  .footer > div {

    flex-direction:
      column;

    gap:
      20px;

  }

}

/* =========================
   COMPANY INFO
========================= */

.company-info dl {

  display: grid;

  grid-template-columns:
    150px 1fr;

  gap: 30px;

  padding: 25px 0;

  border-top:
    1px solid #aaa;

}


.company-info dl:last-of-type {

  border-bottom:
    1px solid #aaa;

}


.company-info dt {

  font-size: 9px;

  letter-spacing: .15em;

  color: #777;

}


.company-info dd {

  font-size: 14px;

  line-height: 1.8;

}


.company-info dd a {

  transition:
    opacity .3s;

}


.company-info dd a:hover {

  opacity: .5;

}


@media (max-width: 768px) {

  .company-info dl {

    grid-template-columns:
      1fr;

    gap: 5px;

  }

}