:root {
  --color-black: #000;
  --color-green: #38421f;
  --color-green-soft: #6a7342;
  --color-white: #e2e0d5;
  --font-main: "Chivo", sans-serif;
}

html,
body {
  margin: 0;
  padding: 0;
}
body {
  background-color: var(--color-green);
  color: var(--color-white);
  font-family: var(--font-main);
  font-optical-sizing: auto;
  font-size: 20px;
  -webkit-font-smoothing: antialiased;
  font-style: normal;
  font-synthesis: none;
  font-weight: 100;
  min-height: 100vh;
  min-height: 100dvh;
  text-rendering: optimizeLegibility;
  transition-delay: 1000ms;
  transition-duration: 500ms;
  transition-property: filter;
}

*:first-child {
  margin-top: 0;
}
*:last-child {
  margin-bottom: 0;
}
a:link,
a:hover,
a:active,
a:visited {
  color: inherit;
  text-decoration: inherit;
}
figure {
  margin: 0;
  padding: 0;
}
figure img,
figure svg {
  display: block;
}
.blur {
  filter: blur(10px);
  will-change: filter;
}
.carousel {
  overflow: visible;
  position: relative;
}
.carousel .slide {
  align-items: center;
  display: flex;
  font-size: 3rem;
  font-weight: bold;
  height: auto;
  justify-content: center;
  left: 0;
  opacity: 0;
  overflow: visible;
  position: absolute;
  top: 0;
  width: 100%;
}
.container {
  margin: auto;
}

section.hero .logo {
  left: 50%;
  margin: auto;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -67.5%);
  width: clamp(61.458333vw, 61.458333vw, 61.458333vw); /* 308px */
}
section.hero .logo svg {
  height: auto;
  width: 100%;
}
section.hero .images {
  margin: auto;
  width: clamp(29.58333vw, 29.58333vw, 29.58333vw); /* 255px */
  transform: translateX(1.1111vw); /* 16px */
}
section.hero .images .image {
  width: 100%;
}
section.hero .images .image img {
  height: auto;
  width: 100%;
}
section.hero .container {
  display: flex;
  align-content: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  position: relative;
}

section.about {
  margin: 0 0 clamp(12.84722222vw, 12.84722222vw, 12.84722222vw); /* 0 0 185px */
  position: relative;
}
section.about .title {
  font-size: clamp(1.041666667vw, 1.041666667vw, 1.041666667vw); /* 15px */
  font-weight: inherit;
  margin: 0;
}
section.about .subtitle {
  font-size: clamp(1.666666667vw, 1.666666667vw, 1.666666667vw); /* 24px */
  font-weight: inherit;
  margin: 0;
}
section.about .description {
  font-size: clamp(1.388888889vw, 1.388888889vw, 1.388888889vw); /* 20px */
  font-weight: inherit;
  line-height: 1.5;
  margin: 0;
}
section.about .vertical {
  text-orientation: upright;
  writing-mode: vertical-rl;
}
section.about .detail.en {
  display: grid;
  gap: 0 clamp(5.069444444vw, 5.069444444vw, 5.069444444vw); /* 0 73px */
  grid-template-areas: "title ." "subtitle ." "description image";
  grid-template-columns: clamp(42.36111111vw, 42.36111111vw, 42.36111111vw) clamp(26.52777778vw, 26.52777778vw, 26.52777778vw); /* 610px 382px */
  margin: 0 0 clamp(11.59722222vw, 11.59722222vw, 11.59722222vw); /* 0 0 167px */
}
section.about .detail.en .title {
  grid-area: title;
  margin: 0 0 clamp(3.472222222vw, 3.472222222vw, 3.472222222vw); /* 0 0 50px */
}
section.about .detail.en .subtitle {
  grid-area: subtitle;
  margin: 0 0 clamp(1.944444444vw, 1.944444444vw, 1.944444444vw); /* 0 0 28px */
}
section.about .detail.en .description {
  grid-area: description;
}
section.about .detail.en .image {
  grid-area: image;
  width: clamp(26.52777778vw, 26.52777778vw, 26.52777778vw); /* 382px */
}
section.about .detail.en .image img {
  width: 100%;
}
section.about .detail.jp {
  display: grid;
  font-family: "dnp-shuei-gothic-kin-std", sans-serif;
  grid-template-areas: "group-2 group-1";
  grid-template-columns: clamp(13.88888889vw, 13.88888889vw, 13.88888889vw) auto; /* 200px auto */
  font-weight: 400;
  letter-spacing: 0.1867em;
  line-height: 1.8;
  position: relative;
}
section.about .detail.jp .group-1 {
  height: max-content;
  left: clamp(26.94444444vw, 26.94444444vw, 26.94444444vw); /* 388px */
  position: absolute;
  top: clamp(-17.5vw, -17.5vw, -17.5vw); /* -252px */
}
section.about .detail.jp .group-2 {
  grid-area: group-2;
}
section.about .detail.jp .group-2 .description {
  display: none;
}
section.about .detail.jp .subtitle {
  font-size: clamp(1.388888889vw, 1.388888889vw, 1.388888889vw); /* 20px */
  line-height: 1.2;
  margin: auto 2em;
}
section.about .detail.jp .description {
  font-size: clamp(0.9722222222vw, 0.9722222222vw, 0.9722222222vw); /* 14px */
}
section.about .detail.jp .description p {
  margin: auto 3em;
}
section.about .detail.jp .description p:first-child {
  margin-right: 0;
}
section.about .detail.jp .description p:last-child {
  margin-left: 0;
}
section.about .detail.jp .description span {
  display: block;
}
section.about .detail.jp .images {
  margin: auto;
  width: clamp(13.88888889vw, 13.88888889vw, 13.88888889vw); /* 200px */
  transform: translateX(clamp(2.083333333vw, 2.083333333vw, 2.083333333vw)); /* 30px */
}
section.about .detail.jp .images .image {
  width: 100%;
}
section.about .detail.jp .images .image img {
  height: auto;
  width: 100%;
}
section.about .container {
  padding: 0 clamp(11.11111111vw, 11.11111111vw, 11.11111111vw); /* 0 160px */
}

section.stockist {
  margin: clamp(12.84722222vw, 12.84722222vw, 12.84722222vw) auto clamp(16.52777778vw, 16.52777778vw, 16.52777778vw); /* 185px auto 238px */
}
section.stockist .title,
section.stockist .list {
  width: clamp(53.81944444vw, 53.81944444vw, 53.81944444vw); /* 775px */
}
section.stockist .title {
  font-size: clamp(1.041666667vw, 1.041666667vw, 1.041666667vw); /* 15px */
  font-weight: inherit;
  margin: 0 0 clamp(3.819444444vw, 3.819444444vw, 3.819444444vw); /* 0 0 55px */
}
section.stockist .list {
  list-style: none;
  margin: 0;
  padding: 0;
}
section.stockist .list .item {
  align-items: flex-end;
  border-bottom: solid clamp(0.03472222222vw, 0.03472222222vw, 0.03472222222vw) var(--color-green-soft); /* solid 0.5px var(--color-green-soft) */
  display: grid;
  grid-template-areas: "title address hyperlink";
  grid-template-columns: clamp(23.95833333vw, 23.95833333vw, 23.95833333vw) auto clamp(1.25vw, 1.25vw, 1.25vw); /* 345px auto 18px */
  padding: 0 0 clamp(0.9722222222vw, 0.9722222222vw, 0.9722222222vw); /* 0 0 14px */
}
section.stockist .list .item .title {
  grid-area: title;
  font-size: clamp(1.666666667vw, 1.666666667vw, 1.666666667vw); /* 24px */
  line-height: 1.25;
  margin: 0;
}
section.stockist .list .item .address {
  grid-area: address;
  font-size: clamp(1.111111111vw, 1.111111111vw, 1.111111111vw); /* 16px */
  font-style: normal;
  line-height: 1.4;
  margin: 0 auto 0 0;
  width: clamp(22.70833333vw, 22.70833333vw, 22.70833333vw); /* 327px */
}
section.stockist .list .item .hyperlink {
  grid-area: hyperlink;
  height: clamp(1.25vw, 1.25vw, 1.25vw); /* 18px */
  width: clamp(1.25vw, 1.25vw, 1.25vw); /* 18px */
}
section.stockist .list .item .hyperlink svg {
  display: block;
  height: auto;
  width: 100%;
}
section.stockist .container {
  justify-items: end;
  padding: 0 clamp(11.11111111vw, 11.11111111vw, 11.11111111vw); /* 0 160px */
}

section.contact {
  margin: clamp(16.52777778vw, 16.52777778vw, 16.52777778vw) auto clamp(5.833333333vw, 5.833333333vw, 5.833333333vw); /* 238px auto 84px */
}
section.contact .title {
  font-size: clamp(1.041666667vw, 1.041666667vw, 1.041666667vw); /* 15px */
  font-weight: inherit;
  margin: 0 0 clamp(1.180555556vw, 1.180555556vw, 1.180555556vw); /* 0 0 17px */
}
section.contact .image img {
  height: auto;
  width: 100%;
}
section.contact .content {
  align-self: end;
  font-size: clamp(1.111111111vw, 1.111111111vw, 1.111111111vw); /* 16px */
  grid-area: content;
}
section.contact .inquiries {
  font-size: clamp(2.222222222vw, 2.222222222vw, 2.222222222vw); /* 32px */
  grid-area: inquiries;
}
section.contact .inquiries .list .item {
  display: block;
}
section.contact .social-media {
  align-self: end;
  grid-area: social-media;
}
section.contact .social-media .item {
  height: auto;
  width: clamp(1.319444444vw, 1.319444444vw, 1.319444444vw); /* 19px */
}
section.contact .social-media .item svg {
  display: block;
  height: auto;
  width: 100%;
}
section.contact .image-small {
  align-self: end;
  grid-area: image-small;
  margin: 0 0 clamp(3.402777778vw, 3.402777778vw, 3.402777778vw); /* 0 0 49px */
  width: clamp(13.88888889vw, 13.88888889vw, 13.88888889vw); /* 200px */
}
section.contact .image-large {
  align-self: end;
  grid-area: image-large;
  justify-self: end;
  margin: 0 0 clamp(3.402777778vw, 3.402777778vw, 3.402777778vw); /* 0 0 49px */
  width: clamp(45.55555556vw, 45.55555556vw, 45.55555556vw); /* 656px */
}
section.contact .container {
  display: grid;
  grid-template-areas: "image-small image-large image-large" "content inquiries social-media";
  grid-template-columns: clamp(31.94444444vw, 31.94444444vw, 31.94444444vw) auto clamp(1.319444444vw, 1.319444444vw, 1.319444444vw); /* 460px auto 19px */
  padding: 0 clamp(3.402777778vw, 3.402777778vw, 3.402777778vw) 0 clamp(3.125vw, 3.125vw, 3.125vw); /* 0 49px 0 45px */
}

[role="main"] {
  min-height: 100vh;
  min-height: 100dvh;
}
[role="header"] {
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 9999;
}
[role="header"] .logo {
  display: block;
  position: absolute;
}
[role="header"] .logo.type {
  left: clamp(3.680555vw, 3.680555vw, 3.680555vw); /* 53px */
  top: clamp(2.36888vw, 2.36888vw, 2.36888vw); /* 38px */
  width: clamp(7.430555556vw, 7.430555556vw, 7.430555556vw); /* 107px */
}
[role="header"] .logo.gram {
  right: clamp(3.125vw, 3.125vw, 3.125vw); /* 45px */
  top: clamp(2.08333vw, 2.08333vw, 2.08333vw); /* 30px */
  width: clamp(6.527777778vw, 6.527777778vw, 6.527777778vw); /* 94px */
}
[role="header"] .logo svg {
  height: auto;
  width: 100%;
}
[role="footer"] {
  border-top: solid clamp(0.0347222vw, 0.0347222vw, 0.0347222vw) var(--color-green-soft); /* 0.5px */
  font-size: clamp(0.8333vw, 0.8333vw, 0.8333vw); /* 12px */
  line-height: 1.4;
}
[role="footer"] .copyright {
  font-size: inherit;
}
[role="footer"] .container {
  padding: clamp(6.9444vw, 6.9444vw, 6.9444vw) clamp(3.125vw, 3.125vw, 3.125vw) clamp(2.36888vw, 2.36888vw, 2.36888vw); /* 100px 45px 38px */
}

@media (max-width: 767px) {
  section.hero .logo {
    width: clamp(308px, 82.13333333vw, 82.13333333vw);
  }
  section.hero .images {
    width: clamp(255px, 68vw, 68vw);
    transform: translateX(0);
  }

  section.about {
    margin: 0 0 clamp(185px, 49.33333333vw, 49.33333333vw); /* 0 0 185px */
  }
  section.about .title {
    font-size: clamp(15px, 4vw, 4vw); /* 15px */
  }
  section.about .subtitle {
    font-size: clamp(24px, 6.4vw, 6.4vw); /* 24px */
  }
  section.about .description {
    font-size: clamp(14px, 3.733333333vw, 3.733333333vw); /* 14px */
  }
  section.about .detail.en {
    display: grid;
    gap: 0;
    grid-template-areas: "title" "subtitle" "description" "image";
    grid-template-columns: auto;
    margin: 0;
  }
  section.about .detail.en .title {
    margin: 0 0 clamp(50px, 13.33333333vw, 13.33333333vw); /* 0 0 50px */
  }
  section.about .detail.en .subtitle {
    margin: 0 0 clamp(28px, 7.466666667vw, 7.466666667vw); /* 0 0 28px */
  }
  section.about .detail.en .description {
    padding-right: clamp(84px, 22.4vw, 22.4vw); /* 84px */
    position: relative;
    z-index: 2;
  }
  section.about .detail.en .image {
    margin: clamp(-65px, -17.33333333vw, -17.33333333vw) 0 0 auto; /* -65px 0 0 auto */
    width: clamp(221px, 58.93333333vw, 58.93333333vw); /* 221px */
    z-index: 0;
  }
  section.about .detail.jp {
    grid-template-areas: "group-1" "group-2";
    grid-template-columns: auto;
    margin: clamp(-20px, -5.333333333vw, -5.333333333vw) auto auto; /* -20px auto auto */
  }
  section.about .detail.jp .group-1 {
    height: max-content;
    left: initial;
    margin: 0 auto clamp(55px, 14.66666667vw, 14.66666667vw); /* auto auto 55px */
    position: relative;
    top: initial;
  }
  section.about .detail.jp .group-1 .description p:nth-child(2) {
    display: none;
  }
  section.about .detail.jp .group-2 {
    display: grid;
    grid-template-columns: min-content auto;
  }
  section.about .detail.jp .group-2 .description {
    display: block;
  }
  section.about .detail.jp .subtitle {
    font-size: clamp(16px, 4.266666667vw, 4.266666667vw); /* 16px */
    line-height: 1.2;
    margin: auto 2em;
  }
  section.about .detail.jp .description {
    font-size: clamp(12px, 3.2vw, 3.2vw); /* 12px */
  }
  section.about .detail.jp .description p {
    margin: auto 3em;
  }
  section.about .detail.jp .description p:first-child {
    margin-right: 0;
  }
  section.about .detail.jp .description p:last-child {
    margin-left: 0;
  }
  section.about .detail.jp .description span {
    display: block;
  }
  section.about .detail.jp .images {
    margin: 0 0 0 auto;
    transform: translateX(0);
    width: clamp(150px, 40vw, 40vw); /* 150px */
  }
  section.about .container {
    padding: 0 clamp(7.466666667vw, 7.466666667vw, 7.466666667vw); /* 0 28px */
  }

  section.stockist {
    margin: clamp(185px, 49.33333333vw, 49.33333333vw) auto clamp(205px, 54.66666667vw, 54.66666667vw); /* 185px auto 205px */
  }
  section.stockist .title,
  section.stockist .list {
    width: auto;
  }
  section.stockist .title {
    font-size: clamp(15px, 4vw, 4vw); /* 15px */
    margin: 0 0 clamp(70px, 18.66666667vw, 18.66666667vw); /* 0 0 70px */
  }
  section.stockist .list .item {
    border-bottom: solid clamp(0.5px, 0.1333333333vw, 0.1333333333vw) var(--color-green-soft); /* solid 0.5px var(--color-green-soft) */
    gap: clamp(29px, 7.733333333vw, 7.733333333vw) 0; /* 29px 0 */
    grid-template-areas: "title title" "address hyperlink";
    grid-template-columns: auto clamp(18px, 4.8vw, 4.8vw); /* auto 18px */
    padding: 0 0 clamp(14px, 3.733333333vw, 3.733333333vw); /* 0 0 14px */
  }
  section.stockist .list .item .title {
    font-size: clamp(24px, 6.4vw, 6.4vw); /* 24px */
    line-height: 1.25;
    margin: 0 auto 0 0;
    width: clamp(235px, 62.66666667vw, 62.66666667vw); /* 235px */
  }
  section.stockist .list .item .address {
    font-size: clamp(14px, 3.733333333vw, 3.733333333vw); /* 14px */
    margin: 0 auto 0 0;
    width: clamp(235px, 62.66666667vw, 62.66666667vw); /* 235px */
  }
  section.stockist .list .item .hyperlink {
    height: clamp(18px, 4.8vw, 4.8vw); /* 18px */
    width: clamp(18px, 4.8vw, 4.8vw); /* 18px */
  }
  section.stockist .container {
    justify-items: initial;
    padding: 0 clamp(7.466666667vw, 7.466666667vw, 7.466666667vw); /* 0 28px */
  }

  section.contact {
    margin: clamp(205px, 54.66666667vw, 54.66666667vw) auto clamp(27px, 7.2vw, 7.2vw); /* 205px auto 27px */
  }
  section.contact .title {
    font-size: clamp(15px, 4vw, 4vw); /* 15px */
    margin: 0 0 clamp(17px, 4.533333333vw, 4.533333333vw); /* 0 0 17px */
  }
  section.contact .content {
    font-size: clamp(16px, 4.266666667vw, 4.266666667vw); /* 16px */
  }
  section.contact .inquiries {
    font-size: clamp(32px, 8.533333333vw, 8.533333333vw); /* 32px */
    margin: 0 0 clamp(219px, 58.4vw, 58.4vw); /* 0 0 219px */
  }
  section.contact .image-small {
    justify-self: end;
    margin: 0 0 clamp(50px, 13.33333333vw, 13.33333333vw); /* 0 0 50px */
    width: clamp(150px, 40vw, 40vw); /* 150px */
  }
  section.contact .image-large {
    margin: 0 0 clamp(214px, 57.06666667vw, 57.06666667vw); /* 0 0 214px */
    width: 100%;
  }
  section.contact .container {
    display: grid;
    grid-template-areas: "image-large image-large" "image-small image-small" "inquiries inquiries" "content social-media";
    grid-template-columns: auto clamp(19px, 5.066666667vw, 5.066666667vw); /* auto 19px */
    padding: 0 clamp(28px, 7.466666667vw, 7.466666667vw); /* 0 28px */
  }

  [role="header"] .logo.type {
    left: clamp(28px, 7.466666667vw, 7.466666667vw);
    top: clamp(52px, 13.86666667vw, 13.86666667vw);
    width: clamp(107px, 28.53333vw, 28.53333vw);
  }
  [role="header"] .logo.gram {
    right: clamp(28px, 7.466666667vw, 7.466666667vw);
    top: clamp(34px, 9.066666667vw, 9.066666667vw);
    width: clamp(65px, 17.3333vw, 17.3333vw);
  }
  [role="footer"] {
    border-top-width: clamp(0.5px, 0.13333vw, 0.13333vw);
    font-size: clamp(12px, 3.2vw, 3.2vw);
  }
  [role="footer"] .container {
    padding: clamp(52px, 13.86666667vw, 13.86666667vw) clamp(28px, 7.466666667vw, 7.466666667vw) clamp(49px, 13.06666667vw, 13.06666667vw);
  }
}