@charset "UTF-8";

/* --------------------------------- global --------------------------------- */

html {
  scroll-behavior: auto;
  body {
    background-color: var(--color-black);
    color: var(--color-white);
    font-family: "EB Garamond", "a-otf-ryumin-pr6n", "Hiragino Mincho ProN",
      "Noto Serif JP", "Yu Mincho", YuMincho, serif;
    .wrapper {
      width: 100%;
      max-width: 1920px;
      margin: 0 auto;
    }
  }
}

.content {
  width: 80%;
  margin: 0 auto;
}

.break-keep {
  word-break: keep-all;
}.section {
  padding-bottom: var(--margin-xl);
}

.section__title {
  font-size: clamp(
    65px,
    calc(-13.883495145631073px + 21.035598705501616vw),
    390px
  );
  font-family: var(--font-garamond);
  font-weight: var(--bold);
  text-box: trim-both cap alphabetic;
  letter-spacing: 0.7rem;
  color: #b7b7b7;
  position: fixed;
  z-index: var(--zindex-bg);
  bottom: 10%;
  left: 15%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s ease, visibility 0.8s;
  pointer-events: none;
}
.section__title.is-active {
  visibility: visible;
  opacity: 0.7;
}

/* --------------------------------- loader --------------------------------- */

#loader {
  position: fixed;
  inset: 0;
  display: grid;
  align-items: center;
  justify-items: start;
  background: var(--color-black);
  z-index: 10000;
  transition: opacity 0.8s ease, visibility 0.8s;
  .loader__box {
    color: var(--color-white);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    .loader__text {
      font-size: var(--text-m);
      letter-spacing: 0.15rem;
      display: block;
      padding-bottom: 0.5rem;
    }
    .loader__bar {
      display: block;
      width: 0;
      height: 1px;
      background: var(--color-white);
      animation: load 1.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    }
  }
}

@keyframes load {
  to {
    width: 100%;
  }
}

.loaded {
  opacity: 0;
  visibility: hidden;
}

/* ----------------------------------- bg ----------------------------------- */

#bg {
  position: fixed;
  inset: 0;
  z-index: var(--zindex-bg);
  transition: background-image 0.6s ease, opacity 0.6s ease;
}

.bg {
  background: center / cover no-repeat url(../img/bg1.jpg);
}

/* --------------------------------- header --------------------------------- */

.header {
  width: 100%;
  background-color: var(--color-black);
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--zindex-header);
  opacity: 0.93;
  .header-nav {
    padding: 0.8rem 2rem;
    display: flex;
    justify-content: space-between;
    .header-logo {
      width: 20%;
      display: flex;
      justify-content: center;
      align-items: center;
      .header-logo__img {
        width: 100%;
      }
    }
    .nav-group {
      display: flex;
      justify-content: space-between;
      gap: var(--margin-m);
      .nav-group__link {
        font-family: var(--font-garamond);
        font-weight: 600;
        font-size: var(--text-ms);
        letter-spacing: 0.15rem;
        text-align: center;
        line-height: 3rem;
        display: flex;
        align-items: center;
        position: relative;
      }
      /* 下線のスタイル */
      .nav-group__link::after {
        content: ""; /* 要素に内容を追加 */
        background-color: var(--color-gray); /* 下線の色 */
        width: 100%; /* 要素の幅 */
        height: 0.5px; /* 下線の高さ */
        left: 0; /* 要素の左端からの距離 */
        bottom: 30%; /* 要素の下端からの距離 */
        position: absolute; /* 絶対位置指定 */
        transform: scale(
          0,
          1
        ); /* 下線を横方向に0倍、縦方向に1倍に変形（非表示） */
        transform-origin: right top; /* 変形の原点を右上に指定 */
        transition: transform 0.3s; /* 変形をアニメーション化 */
      }
      /* リンクにホバーした際の下線の表示 */
      .nav-group__link:hover::after {
        transform-origin: left top; /* 変形の原点を左上に指定 */
        transform: scale(
          1,
          1
        ); /* 下線を横方向に1倍、縦方向に1倍に変形（表示） */
      }
    }
  }
}

/* ------------------------------- first view ------------------------------- */

.first-view {
  height: 100svh;
  position: relative;
  .title-box {
    width: 100%;
    height: 100svh;
    .content-title {
      font-size: var(--text-m);
      font-weight: unset;
      letter-spacing: 0.15rem;
      padding-bottom: 0.5rem;
      display: inline-block;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    .under-title {
      display: block;
      width: 0;
      height: 1px;
      opacity: 0;
    }
    .scroll-down {
      letter-spacing: 0.18rem;
      writing-mode: vertical-rl;
      display: inline-block;
      position: absolute;
      bottom: 3rem;
      right: 3rem;
      transform: translate(-50%, -50%);
      .scroll {
        font-size: var(--text-s);
        font-weight: unset;
      }
      .scroll-bar {
        background-color: var(--color-white);
        width: 0.5px;
        height: 100%;
        display: block;
        animation: scroll 2.8s ease-in-out infinite;
      }
    }
  }
}

@keyframes scroll {
  0% {
    transform: scale(0, 0);
    transform-origin: 0 0;
  }
  35.7% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  67.85% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  67.86% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}

/* ---------------------------------- about --------------------------------- */

.title {
  font-family: var(--font-garamond);
  font-weight: var(--bold);
  font-size: var(--text-l);
  text-align: center;
  letter-spacing: 0.8rem;
  padding: var(--margin-l) 0;
}

.section:has(.about-section) {
  .about-section {
    position: relative;
    .text-box {
      margin: 0 calc((100% - 87%) / 2) var(--margin-l);
      letter-spacing: 0.3rem;
      line-height: 2.7;
      .text-box__unit {
        font-size: var(--text-m);
        padding-bottom: var(--margin-m);
        .text-box__para {
          /* opacity: 0; */
          transform: translateY(20px);
          transition: opacity 1.2s ease-out, transform 1.2s ease-out;
        }
        .text-box__para.is-show {
          opacity: 1;
          transform: translateY(0);
        }
      }
    }
    .img-box {
      width: 40%;
      min-width: 30%;
      position: fixed;
      transform-origin: bottom left;
      bottom: 75%;
      left: 50%;
      z-index: var(--zindex-behind);
      pointer-events: none;
    }
  }
}

.img-box__img {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s ease, visibility 0.8s, display 0.8s;
  .shadow {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    box-shadow: 0 0 8px 3px rgba(0, 0, 0, 0.2) inset;
  }
  .img {
    position: relative;
    z-index: -1;
  }
}

.is-active {
  opacity: 1;
  visibility: visible;
}

/* --------------------------------- product -------------------------------- */

.product-title {
  font-size: var(--text-ml);
  font-weight: var(--medium);
  margin-bottom: var(--margin-m);
}

.product-section:nth-of-type(1),
.product-section:nth-of-type(2) {
  margin-bottom: var(--margin-l);
}

.product-list {
  width: 87%;
  display: flex;
  gap: var(--margin-m);
  margin: 0 auto;
  .item-card {
    width: calc(100% / 3 - var(--margin-m) * 2 / 3);
    .item-card__img {
      padding-bottom: var(--margin-xs);
    }
    .item-card__title {
      font-size: var(--text-m);
      font-weight: var(--medium);
    }
  }
}

/* --------------------------------- contact -------------------------------- */

.contact-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--margin-m);
  .contact-section__img {
    width: 100%;
  }
  .contact-group {
    font-size: var(--text-m);
    width: 100%;
    height: fit-content;
    .contact-group__title {
      font-size: var(--text-m);
      font-weight: var(--medium);
      margin-bottom: var(--margin-xs);
    }
  }
}

.tel,
.mail {
  display: inline;
}

/* --------------------------------- footer --------------------------------- */

footer {
  padding: var(--margin-xs) 0 var(--margin-xs) 0;
  background-color: var(--color-black);
  .footer-wrap {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--margin-xs);
    .footer-logo {
      width: 20%;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--margin-xs);
      .kenbando {
        width: 50%;
      }
    }
    .address-group {
      font-size: var(--text-s);
      .address-group__text {
        line-height: 3.2rem;
      }
    }
    .footer-nav {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: var(--margin-s);
      .footer-nav__logo {
        width: 3.2rem;
      }
    }
  }
  small {
    font-size: var(--text-xs);
    font-weight: var(--light);
    display: block;
    text-align: center;
  }
}

/* -------------------------------- hamburger ------------------------------- */

.p-header__nav {
  display: none;
}

.p-header__hamburger {
  display: none;
}

/* ------------------------------- responsive ------------------------------- */

@media screen and (max-width: 1280px) {
  .header {
    .header-nav {
      .header-logo {
        width: 24%;
      }
    }
  }

  .section:has(.about-section) {
    .about-section {
      .text-box {
        letter-spacing: 0.25rem;
      }
      .img-box {
        width: 40%;
        top: 26%;
        left: 58.4%;
      }
    }
  }
}

@media screen and (max-width: 960px) {
  .header {
    .header-nav {
      .header-logo {
        width: 30%;
      }
    }
  }

  .title {
    letter-spacing: 0.6rem;
  }

  .section:has(.about-section) {
    .about-section {
      .text-box {
        letter-spacing: 0.2rem;
      }
    }
  }

  .section:has(.about-section) {
    .about-section {
      .section__title {
        transform-origin: left top;
        transform: rotate(-90deg);
        bottom: -3%;
        left: 1.5%;
      }
    }
    .about-section {
      .img-box {
        width: 50%;
        top: 27%;
        left: 49%;
      }
    }
  }
}

@media screen and (min-width: 769px) {
  a[href^="tel:"] {
    pointer-events: none;
  }
}
@media screen and (max-width: 768px) {
  .first-view {
    & .title-box {
      .scroll-down {
        bottom: 1%;
        right: 0.4%;
      }
    }
  }
  .header {
    .header-nav {
      padding: 1.6rem 2rem;
      justify-content: center;
      .header-logo {
        width: 45%;
      }
      .nav-group {
        .nav-group__link {
          display: none;
        }
      }
    }
    /* -------------------------------- hamburger ------------------------------- */

    .p-header__nav {
      display: block;
    }

    .p-header__hamburger {
      display: block;
      position: absolute;
      top: 0%;
      right: 0;
      height: 100%;
      width: 11%;
      .c-hamburger {
        position: relative;
        z-index: 11;
        width: 100%;
        height: 100%;
        margin: 0;
        background-color: unset;
        border: unset;
        cursor: pointer;
        span {
          display: block;
          position: relative;
          left: 50%;
          width: 60%; /*線の横幅*/
          height: 1px; /* 線の高さ*/
          transform: translateX(-50%);
          background: var(--color-white); /*線の色*/
          transition: all 0.6s;
        }
      }
    }

    /* 三本線それぞれtopプロパティで位置指定する */
    .c-hamburger span:nth-of-type(1) {
      top: -0.8rem;
    }

    .c-hamburger span:nth-of-type(2) {
      top: 0;
    }

    .c-hamburger span:nth-of-type(3) {
      top: 0.8rem;
    }

    /* is-activeクラスが付いたら、×にする */
    .c-hamburger.is-active span:nth-of-type(1) {
      top: 0;
      transform: translateX(-50%) rotate(225deg);
    }

    .c-hamburger.is-active span:nth-of-type(2) {
      opacity: 0;
    }

    .c-hamburger.is-active span:nth-of-type(3) {
      top: -2.7px;
      transform: translateX(-50%) rotate(-225deg);
    }

    /* ナビメニュー */
    .p-header__nav {
      display: flex;
      z-index: 10;
      position: absolute;
      top: 0;
      right: -100%;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100svh;
      background: transparent;
      font-weight: 700;
      opacity: 0;
      transition: 0.6s;
      .p-nav__inner {
        .p-nav__list {
          display: flex;
          flex-direction: column;
          gap: var(--margin-xl);
          align-items: center;
          .p-nav__item {
            text-box: trim-both cap alphabetic;
            font-family: var(--font-garamond);
            font-size: var(--text-l);
            padding: var(--margin-s);
          }
        }
      }
    }
    .p-header__nav.is-active {
      position: fixed;
      top: 0;
      right: 0;
      background: var(--color-black);
      opacity: 1;
      transition: 0.6s;
    }
  }

  .title {
    letter-spacing: 0.5rem;
  }

  .section:has(.about-section) {
    .about-section {
      .text-box {
        letter-spacing: 0.18rem;
      }
    }
  }

  .section:has(.about-section) {
    .about-section {
      .section__title {
        bottom: 4%;
        left: 1.7%;
      }
    }
    .about-section {
      .img-box {
        width: 55%;
        top: 36.6%;
        left: 43%;
      }
    }
  }

  .product-list {
    width: 87%;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: var(--margin-m);
    .item-card {
      width: calc(100% / 2 - var(--margin-m) / 2);
      .item-card__img {
        padding-bottom: var(--margin-xs);
      }
    }
  }

  .contact-section {
    width: 87%;
    flex-direction: column;
    margin: 0 auto;
    .contact-group {
      font-weight: var(--light);
      .contact-group__title {
        font-weight: var(--light);
      }
    }
  }

  footer {
    padding-top: var(--margin-m);
    .footer-wrap {
      text-align: center;
      flex-direction: column;
      align-items: center;
      gap: var(--margin-m);
      padding-bottom: var(--margin-m);
      margin-bottom: unset;
      .footer-logo {
        width: 60%;
        flex-direction: row;
        gap: var(--margin-s);
      }
    }
  }
}

@media screen and (max-width: 430px) {
  .first-view {
    & .title-box {
      .scroll-down {
        bottom: 1%;
        right: 1%;
      }
    }
  }
  .header {
    .header-nav {
      justify-content: center;
      .header-logo {
        width: 60%;
      }
    }

    /* -------------------------------- hamburger ------------------------------- */
    .p-header__hamburger {
      width: 13%;
    }

    /* 三本線それぞれtopプロパティで位置指定する */
    .c-hamburger span:nth-of-type(1) {
      top: -0.7rem;
    }

    .c-hamburger span:nth-of-type(2) {
      top: 0;
    }

    .c-hamburger span:nth-of-type(3) {
      top: 0.7rem;
    }
  }

  .title {
    letter-spacing: 0.3rem;
  }

  .section:has(.about-section) {
    .about-section {
      .section__title {
        font-size: 2.4rem;
        letter-spacing: 0.2rem;
        bottom: 44%;
        left: 3%;
      }
      .text-box {
        letter-spacing: 0.1rem;
        margin: 0 unset var(--margin-l);
      }
      .img-box {
        width: 70%;
        top: 43%;
        left: 28%;
      }
    }
  }
  .section {
    .section__title {
      font-size: 2.4rem;
      letter-spacing: 0.2rem;
      margin: 0 unset var(--margin-l);
      transform-origin: left top;
      transform: rotate(-90deg);
      bottom: 44%;
      left: 3%;
    }
    .section__title.is-active {
      visibility: visible;
      opacity: 0.95;
    }
  }

  .product-list {
    width: 100%;
  }

  .contact-section {
    width: 100%;
  }

  footer {
    .footer-wrap {
      .footer-logo {
        width: 100%;
      }
    }
  }
}