@charset "UTF-8";

/* ========================================
  Design tokens (CSS Custom Properties)
======================================== */
:root {

  /* Layout */
  --header-height: 10rem;

  /* Brand Color */
  --color-primary: #373737;
  --color-secondary: #4C5E70;
  --color-border: #CCC;
  --color-background: #E8EBEC;

  /* Font */
  --font-sans: "Noto Sans JP", sans-serif;
  --font-serif: "Noto Serif JP", serif;
  --font-en: "Jost", sans-serif;

  @media screen and (max-width: 767px) {
    --header-height: 6rem;
  }
}


/* ========================================
  HTML/BODY Settings
======================================== */
html {
  scroll-behavior: smooth;
  font-size: min(62.5%, calc((10 / 1200) * 100vw));

  @media screen and (max-width: 767px) {
    font-size: min(62.5%, 2.4vw);
  }
}
body {
  position: relative;
  padding-top: var(--header-height);
  line-height: 1.8;
  font-family: "Noto Sans JP", sans-serif;
  font-feature-settings: "palt";
  font-size: 1.4rem;
  font-weight: 300;
  color: var(--color-primary);
  opacity: 0;
  transition: opacity 1s ease;

  &.is-visible {
    opacity: 1;
  }
  @media screen and (max-width: 767px) {
    padding-top: var(--header-height);

    &.is-nav-open {
      overflow: hidden;
    }
  }
}


/* ========================================
Elements (global default styles)
======================================== */
ul, ol {
  list-style-type: none;
}
table {
  width: 100%;
  border-collapse: collapse;
}
th {
  text-align: inherit;
  font-weight: inherit;
}
img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}
a {
  text-decoration: none;
  color: inherit;
}
em, i {
  font-style: normal;
}
[id] {
  scroll-margin-top: var(--header-height);
}


/* ========================================
  Layout
======================================== */

/* Common
---------------------------------------- */
.l-container {
  margin-inline: auto;

  &.u-sz-xs { width: min(90%, 80rem); }
  &.u-sz-sm { width: min(90%, 90rem); }
  &.u-sz-md { width: min(90%, 120rem); }
  &.u-sz-lg { width: min(100%, 120rem); }
  &.u-pt { padding-top: min(10rem, 10vw); }
  &.u-pb { padding-bottom: min(10rem, 10vw); }
  &.u-border {
    padding-bottom: min(10rem, 10vw);
    border-bottom: solid 1px var(--color-border);
  }
}

.l-col-block {
  display: grid;

  + .l-col-block {
    margin-top: min(10rem, 10vw);
  }
}
.l-2col {
  @media screen and (min-width: 768px) {
    grid-template-columns: repeat(2, 1fr);
    gap: 0 5%;

    &.u-va-md {
      align-items: center;
    }
    &.u-reverse {
      grid-template-areas: "left right";

      > * {
        &:first-child {
          grid-area: right;
        }
        &:last-child {
          grid-area: left;
        }
      }
    }
  }
  @media screen and (max-width: 767px) {
    grid-template-columns: 1fr;
    gap: 10vw 0;

    &.u-reverse {
      grid-template-areas: none;
    }
  }
}
.l-3col {
  grid-template-columns: repeat(3, 1fr);
  gap: 0 7%;

  @media screen and (max-width: 767px) {
    grid-template-columns: repeat(2, 1fr);
    gap: 5%;
  }
}

/* Header
---------------------------------------- */
.header {
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  width: 100%;
  background-color: rgba(255, 255, 255, .7);
  backdrop-filter: blur(.7rem);
  transition: background-color .3s ease, backdrop-filter .3s ease;
}
.header__inner {
  display: flex;
  justify-content: space-between;
}
.header__logo {
  a {
    height: var(--header-height);
    padding-top: .5rem;
    display: flex;
    align-items: center;
    transition: opacity .2s ease;

    img {
      width: auto;
      height: min(calc(var(--header-height) * .7), 6.6rem);
    }
    @media (hover: hover) {
      &:hover {
        opacity: .7;
      }
    }
  }
}
.header__nav {
  padding-bottom: 1.2rem;
  display: flex;
  align-items: flex-end;

  ul {
    display: flex;
    gap: 0 2em;
    font-family: var(--font-serif);
    font-size: 1.2rem;
    font-weight: 500;
    letter-spacing: .2em;

    li a {
      position: relative;
      display: block;
      padding-bottom: .5em;

      &::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 0;
        height: 0;
        border-bottom: solid .2rem #D9D9D9;
        transition: left .3s ease, width .3s ease;
      }
      @media (hover: hover) {
        &:hover::after {
          left: 0;
          width: 100%;
        }
      }
    }
  }
  @media screen and (max-width: 767px) {
    display: none;
  }
}
.nav-toggle {
  @media screen and (max-width: 767px) {
    position: fixed;
    z-index: 30;
    top: 0;
    right: 0;
    width: var(--header-height);
    aspect-ratio: 1;
    display: flex;
    justify-content: center;
    align-items: center;

    span {
      position: relative;
      width: calc(var(--header-height) * .4);
      height: .3rem;
      background-color: currentColor;
      transition: background-color .3s ease;

      &::before, &::after {
        content: "";
        position: absolute;
        left: 0;
        width: 100%;
        height: .3rem;
        background-color: currentColor;
        transition: all .3s ease;
      }
      &::before {
        top: -.7rem;
      }
      &::after {
        bottom: -.7rem;
      }
    }
    &.is-open {
      span {
        background-color: #FFF;

        &::before {
          top: 0;
          transform: rotate(45deg);
        }
        &::after {
          bottom: 0;
          transform: rotate(-45deg);
        }
      }
    }
  }
}

/* Main
---------------------------------------- */
.main {
  padding-top: min(10rem, 10vw);
  background-color: #FFF;

  &.dummy {
    height: 50vh;
    background-color: #EEE;
    display: flex;
    justify-content: center;
    align-items: center;

    h1 {
      margin-bottom: 5em;
      font-weight: 400;
      color: #999;
    }
  }
}
.top-main {
  padding-top: 0;
}


/* Aside
---------------------------------------- */
.aside {
  padding: min(9rem, 10vw) 0;
  background-color: #E8EBEC9C;

  &.top-aside {
    background-color: #FFF;

  }
  @media screen and (max-width: 767px) {
    .cta-banner {
      grid-template-rows: repeat(2, 1fr);
      gap: 1em 0;
    }
  }
}
.bnr-catalog {
  display: block;
  aspect-ratio: 568 / 220;
  border: solid 1px #4C5E70;
  background-color: #4C5E70;
  color: #FFF;
  transition: background-color .3s ease;

  figure {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0 min(4.5rem, 5vw);

    img {
      width: auto;
      height: calc((184 / 220) * 100%);
      box-shadow: .6rem .6rem .6rem rgba(0, 0, 0, .3);
    }
    figcaption {
      display: grid;
      grid-template-columns: 1fr;
      letter-spacing: .2em;

      strong {
        font-family: var(--font-en);
        font-size: min(2.8rem, 5vw);
        letter-spacing: .25em;
      }
    }
  }
  @media (hover: hover) {
    &:hover {
      background-color: #FFF;
      color: #4C5E70;
    }
  }
  @media screen and (max-width: 767px) {
    aspect-ratio: unset;
    width: 100%;
    height: 13rem;
  }
}
.bnr-shop {
  display: block;
  aspect-ratio: 568 / 220;
  background: url(../images/common/bnr-shop.jpg) center center / cover no-repeat rgba(45, 45, 45, 0.61);
  background-blend-mode: multiply;
  transition: background-color .3s ease;

  figure {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    img {
      width: min(28.7rem, 70%);
      margin-right: calc((40 / 568) * 100%);
    }
    figcaption {
      margin-top: -1rem;
      letter-spacing: .2em;
      color: #FFF;
    }
  }
  @media (hover: hover) {
    &:hover {
      background-color: var(--color-primary);
    }
  }
}
.bnr-contact {
  width: 100%;
  aspect-ratio: 568 / 220;
  border: solid 1px #4C5E70;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2rem 0;
  text-align: center;
  transition: background-color .3s ease, color .3s ease;

  .title {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0 1em;
    font-family: var(--font-serif);
    font-size: min(2.2rem, 4.6vw);
    letter-spacing: .22em;

    &::before {
      content: "";
      width: 1.5em;
      aspect-ratio: 30 / 22;
      background-color: currentColor;
      mask: url(../images/common/icon-mail.svg) center center / contain no-repeat;
    }
  }
  .text {
    line-height: 2;
  }
  @media (hover: hover) {
    &:hover {
      background-color: #4C5E70;
      color: #FFF;
    }
  }
  @media screen and (max-width: 767px) {
    gap: .5em 0;

    .text {
      line-height: 1.6;
    }
  }
}
.related-page {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.related-page__image {
  width: 100%;
  aspect-ratio: 568 / 220;
  overflow: hidden;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
  }
}
@media (hover: hover) {
  .related-page:hover {
    .related-page__image {
      img {
        transform: scale(1.05);
      }
    }
    .c-button-link {
      background-color: var(--color-primary);
      color: #FFF;

      &::after {
        transform: translateX(.5em);
      }
    }
  }
}
.related-page__title {
  margin: min(3rem, 4vw) 0 min(1.5rem, 2vw);
  display: grid;

  .en {
    font-family: var(--font-en);
    font-weight: 400;
    letter-spacing: .18em;
  }
  .ja {
    font-family: var(--font-serif);
    font-size: 1.8rem;
    letter-spacing: .3em;
  }
}
.related-page__more {
  margin-top: auto;
  padding-top: 1rem;
  text-align: right;

  @media screen and (max-width: 767px) {
    padding-top: 2em;
    text-align: center;
  }
}

/* Footer
---------------------------------------- */
.footer {
  border-top: solid 1px #E9E9E9;
  background-color: #FFF;
  font-size: 1.1rem;

  @media screen and (max-width: 767px) {
    font-size: 1.3rem;
  }
}
.footer__inner {
  padding-top: min(6rem, 10vw);
  display: flex;
  justify-content: space-between;

  @media screen and (max-width: 767px) {
    display: block;
  }
}
.footer__address {
  display: flex;
  flex-direction: column;
  gap: 1em 0;

  @media screen and (max-width: 767px) {
    text-align: center;
  }
}
.footer__logo {
  width: 50vw;
  margin: 0 auto 1em;
  text-align: center;
}
.footer__bottom {
  padding-bottom: 3rem;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2rem 0;
  letter-spacing: .1em;

  @media screen and (max-width: 767px) {
    display: block;
    padding-bottom: 1.5em;
  }
}
.footer-name {
  font-family: var(--font-serif);
  font-size: min(2.2rem, 4.2vw);
}
.footer-sns {
  margin-top: 1.5em;
}
.footer-nav {
  ul {
    width: 100vw;
    margin: 2em -5vw 1em;
    border-top: solid 1px var(--color-border);
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    li {
      border-bottom: solid 1px var(--color-border);

      &:nth-child(odd) {
        border-right: solid 1px var(--color-border);
      }
      a {
        display: block;
        padding: 1em;
      }
    }
  }
  p {
    margin: 1em 0 0;
    text-align: left;
  }
}
.footer-certificate {
  margin-top: auto;

  @media screen and (max-width: 767px) {
    max-width: 15%;
    margin: -2.5em 0 0 auto;
  }
}

/* GLobal Nav
---------------------------------------- */
.global-nav {
  > ul {
    display: flex;
    gap: 0 3em;

    a {
      &[href="#"] {
        pointer-events: none;
      }
      @media (hover: hover) {
        &:hover {
          text-decoration: underline;
        }
      }
    }
    > li {
      margin-top: 1rem;

      > p {
        margin-bottom: 1em;
        font-weight: 500;
      }
      > ul {
        ul {
          li {
            position: relative;
            padding-left: 1em;

            &::before {
              content: "・";
              position: absolute;
              left: 0;
            }
          }
        }
      }
    }
  }
  @media screen and (max-width: 767px) {
    position: fixed;
    z-index: 20;
    top: 0;
    left: 100vw;
    width: 100%;
    height: 100vh;
    overflow-y: auto;
    background-color: #FFF;
    color: var(--color-primary);
    opacity: 0;
    transition: opacity .5s ease, left 0s .5s linear;

    &.is-open {
      left: 0;
      opacity: 1;
      transition: opacity .5s ease;
    }
    > ul {
      display: block;
      padding: 10% 10% min(6rem, 10vw);
      font-size: 1.5rem;

      a {
        display: block;
      }
      > li {
        margin: 0;
        padding: 1.25em 0;
        border-bottom: solid 1px var(--color-border);

        > p {
          margin: 0;
          padding: 0;
        }
        > ul {
          margin-top: 1em;

          > li {
            position: relative;
            margin-top: 1em;
            padding-left: 1.5em;

            &::before {
              content: "−";
              position: absolute;
              left: 0;
            }
            &:not(:first-child) {
              padding-top: 1em;
              border-top: solid 1px #EEE;
            }
            > ul {
              margin-bottom: 1.5em;
              line-height: 1.6;
              font-size: 1.4rem;

              > li {
                display: inline-flex;
                min-width: 45%;
                margin: 1em 1em 0 0;
              }
            }
          }
        }
      }
    }
    .footer__address {
      padding-bottom: 3em;
    }
  }
}

/* Form
---------------------------------------- */
.form-message {
  margin-bottom: 5rem;

  p {
    font-size: 1.5rem;
    font-weight: 400;

    &:not(:first-child) {
      margin-top: 1em;
    }
  }
  &.form-thanks {
    margin-bottom: min(10rem, 15vw);

    .form-thanks__title {
      font-size: 2.4rem;
      font-weight: 400;
      letter-spacing: .05em;
    }
    .form-thanks__button {
      margin-top: 3rem;
    }
  }
}
.kanieform {
  padding-bottom: min(12rem, 15vw);

  table {
    width: min(100%, 100rem);
    font-weight: 400;

    th, td {
      padding: 1.35em;
      vertical-align: top;
      letter-spacing: .1em;
    }
    th {
      min-width: 26rem;
      font-weight: 500;
      letter-spacing: .2em;
    }
    &.kanieform-input {
      th {
        padding-top: calc(1.35em + .9em + 1px);
      }
    }
    @media screen and (max-width: 767px) {
      th, td {
        display: block;
        width: 100%;
        padding: 0;
      }
      th {
        min-width: initial;
      }
      td {
        padding-top: .5em;
      }
    }
  }
  .kanieform-inner {
    position: relative;
    padding-top: calc(.9em + 1px);

    .mfp_err {
      position: absolute;
      bottom: -1.5em;
      left: 0;
    }
    @media screen and (max-width: 767px) {
      padding-top: 0;
    }
  }
  .kanieform-required {
    display: inline-block;
    margin: -.2em 0 0 1em;
    vertical-align: middle;
    border: solid 1px #F00;
    border-radius: 9999px;
    padding: 0 .8em;
    line-height: 1.6;
    font-size: 1.2rem;
    color: #F00;
  }
  .kanieform-privacy {
    position: relative;
    margin-top: min(5rem, 5vw);
    text-align: center;
    font-size: 1.3rem;

    p {
      margin-bottom: 1em;
      font-family: var(--font-serif);

      a {
        text-decoration: underline;
      }
    }
    label {
      font-weight: 400;
    }
    .mfp_err {
      position: absolute;
      bottom: -1.5em;
      left: 0;
      width: 100%;
      text-align: center;
    }
  }
  .kanieform-confirm {
    margin-top: 5rem;
    text-align: center;
  }
  label {
    display: inline-flex;
    align-items: center;
    gap: 0 .5rem;
    outline: none;
    cursor: pointer;

    &:not(:last-child) {
      margin-right: 3em;
    }
  }
  input[type="radio"] {
    width: 1.4em;
    height: 1.4em;
    outline: none;
  }
  input[type="checkbox"] {
    width: 1.4em;
    height: 1.4em;
    border: solid 1px #C2C2C2;
    border-radius: 0;
    outline: none;
  }
  input[type="text"] {
    width: 100%;
    padding: .9em 1.42em;
    border: solid 1px #C2C2C2;
    border-radius: 1rem;
    outline: none;
  }
  textarea {
    width: 100%;
    height: min(36rem, 60vw);
    padding: .9em 1.42em;
    border: solid 1px #C2C2C2;
    border-radius: 1rem;
    outline: none;
  }
  ::placeholder {
    color: #CCC;
  }
  button {
    margin: 1rem;
    padding: .5em 1em;
    border-radius: 9999px;
    transition: background-color .3s ease, color .3s ease;

    &[type="submit"],
    &#mfp_button_send {
      width: min(80%, 23.4rem);
      border: solid 1px var(--color-secondary);
      background-color: var(--color-secondary);
      color: #FFF;

      @media (hover: hover) {
        &:hover {
          background-color: #FFF;
          color: var(--color-secondary);
        }
      }
    }
    &[type="reset"],
    &#mfp_button_cancel {
      width: min(60%, 18rem);
      border: solid 1px #CCC;
      background-color: #CCC;
      color: var(--color-primary);

      @media (hover: hover) {
        &:hover {
          background-color: #EEE;
        }
      }
    }
  }
  #mfp_phase_confirm_inner {
    &:not(:empty) {
      padding-top: min(10rem, 7vw);
    }
    p {
      font-size: 1.5rem;
      font-weight: 400;
    }
    table#mfp_confirm_table {
      margin: min(10rem, 7vw) 0 5rem;

      tr:not(:first-child) th {
        padding-top: 1.5em;
      }
    }
  }
}

/* Page Components
---------------------------------------- */
.page-header {
  position: relative;
}
.page-header__image {
  position: relative;
  aspect-ratio: 1440 / 473;
  width: 100%;
  max-height: 47.3rem;

  &::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(91, 91, 91, .7);
    mix-blend-mode: multiply;
  }
  &.u-no-overlay {
    &::after {
      content: none;
    }
  }
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  @media screen and (max-width: 767px) {
    aspect-ratio: 16 / 9;
  }
}
.page-header__body {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  > div {
    margin-top: auto;
    margin-bottom: min(7rem, 7vw);
  }
}
.page-title {
  display: grid;
  gap: 1.5rem 0;
  line-height: 1.2;
  font-weight: 400;
  color: #FFF;

  .title-en {
    font-family: var(--font-en);
    font-size: min(3.8rem, 6vw);
    letter-spacing: .2em;
  }
  .title-ja {
    font-family: var(--font-serif);
    font-size: min(2rem, 3.5vw);
    letter-spacing: .3em;
  }
}



/* ========================================
  Components
======================================== */

/* Page
---------------------------------------- */
.c-page-lead {
  padding-bottom: min(7rem, 10vw);
  border-bottom: solid 1px var(--color-border);

  > *:not(:first-child) {
    margin-top: 1em;
  }
  + * {
    padding-top: min(7rem, 10vw);
  }
}

/* Section
---------------------------------------- */
.c-sec-title.u-type01 {
  margin-bottom: min(5rem, 5vw);
  display: grid;
  gap: 1.5rem 0;
  line-height: 1.2;

  .en {
    display: block;
    font-family: var(--font-en);
    font-size: min(3rem, 6vw);
    font-weight: 400;
    letter-spacing: .18em;
  }
  .ja {
    display: block;
    font-family: var(--font-serif);
    font-size: min(1.5rem, 3vw);
    font-weight: 400;
    letter-spacing: .3em;
  }
  @media screen and (max-width: 767px) {
    gap: 0.8rem 0;
  }
}
.c-sec-title.u-type02 {
  margin-bottom: min(6.5rem, 5vw);
  display: flex;
  justify-content: space-between;
  align-items: center;

  .ja {
    font-family: var(--font-serif);
    font-size: min(2.4rem, 5.4vw);
    font-weight: 400;
    letter-spacing: .3em;
  }
  .en {
    font-family: var(--font-en);
    font-size: min(1.4rem, 3vw);
    font-weight: 300;
    letter-spacing: .2em;
    color: #7F7F7F;
  }
  @media screen and (max-width: 767px) {
    flex-direction: column-reverse;
    align-items: flex-start;

    .ja {
      letter-spacing: .1em;
    }
    .en {
      letter-spacing: .15em;
    }
  }
}
.c-sec-copy {
  margin-bottom: min(1.5em, 5vw);
  font-family: var(--font-serif);
  font-size: min(2.2rem, 4.6vw);
  font-weight: 400;

  &:not(:first-child) {
    margin-top: 2em;
  }
  .c-num {
    display: block;
    margin-bottom: 1rem;
    font-family: var(--font-en);
    font-size: 1.4rem;
    font-weight: 300;
    letter-spacing: .1em;
    color: #7F7F7F;
  }
}
.c-sec-text {
  line-height: 2.14;
  letter-spacing: .1em;

  + .c-sec-text {
    margin-top: min(2em, 5vw);
  }
}

/* Figure
---------------------------------------- */
.c-img-cap {
  margin-top: 1rem;
  font-size: 1.3rem;
}

/* Button
---------------------------------------- */
.c-button-link {
  padding: .25em 1em .25em 2em;
  border: solid 1px var(--color-primary);
  border-radius: 9999px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 0 1.5em;
  font-family: var(--font-en);
  font-size: 1.2rem;
  letter-spacing: .1em;
  transition: background-color .3s ease, color .3s ease;

  &::after {
    content: "";
    width: .8em;
    aspect-ratio: 1;
    background-color: currentColor;
    mask: url(../images/common/icon-link-button.svg) center center / contain no-repeat;
    transition: transform .3s ease;
  }
  &.u-white {
    border-color: #FFF;
    color: #FFF;
  }
  &.u-secondary {
    border-color: var(--color-secondary);
    background-color: var(--color-secondary);
    color: #FFF;
  }
  &.u-back {
    min-width: 16rem;
    padding: .25em 2em .25em 1em;
    flex-direction: row-reverse;

    &::after {
      transform: scale(-1, 1);
    }
    span {
      flex: 1;
      text-align: center;
    }
    @media (hover: hover) {
      &:hover {
        &::after {
          transform: scale(-1, 1) translateX(.5em);
        }
      }
    }
  }
  @media (hover: hover) {
    &:hover {
      background-color: var(--color-primary);
      color: #FFF;

      &::after {
        transform: translateX(.5em);
      }
    }
    &.u-white&:hover, 
    &.u-secondary:hover {
      background-color: #FFF;
      color: var(--color-primary);
    }
  }
}


/* ========================================
  Utilities
======================================== */

/* Display */
@media screen and (min-width: 768px) {
  .u-only-sp { display: none !important; }
  .u-nobr-pc { white-space: nowrap; }
}
@media screen and (max-width: 767px) {
  .u-only-pc { display: none !important; }
}

/* Text */
.u-underline { text-decoration: underline; }


/* ========================================
  Javascript
======================================== */

/* Inview */
.js-inview,
.js-inview-wrap > *,
.main > *,
.aside {
  opacity: 0;
  filter: blur(1rem);
  transition: opacity 1s ease, filter 1s ease;
  transition-delay: .5s, .5s;

  &.is-visible {
    opacity: 1;
    filter: blur(0);
  }
}
.history-item {
  .history-item__year {
    opacity: 0;
    transition: opacity 1s ease;

    > div {
      &::after {
        width: 0;
        opacity: 0;
        transition: all .5s ease;
        transition-delay: .5s;
      }
      span {
        letter-spacing: .5em;
        transition: letter-spacing 1s ease;
      }
    }
  }
  .history-item__text {
    transform: translateX(3em);
    opacity: 0;
    transition: transform 1s ease, opacity 1s ease;
  }
  &.is-visible {
    .history-item__year {
      opacity: 1;

      > div {
        &::after {
          width: min(1.4rem, 3vw);
          opacity: 1;
        }
        span {
          letter-spacing: 0;
        }
      }
    }
    .history-item__text {
      transform: translateX(0);
      opacity: 1;
    }
  }
}