.about {
}

:where(.about) {
  .about-concept {
    display: flex;
    background: #FAFAFA;
    @media screen and (max-width: 768px) {
      flex-direction: column;
      padding-top: calc(var(--vw) * 113);
      gap: calc(var(--vw) * 40);
      padding-bottom: calc(var(--vw) * 114);
    }
    @media screen and (min-width: 769px) {
      gap: calc(var(--vw) * 90);
      padding-bottom: calc(var(--vw) * 90);
      padding-top: min(calc(var(--vw) * 131), 131px);
    }
  }

  .about-concept__image {
    @media screen and (max-width: 768px) {
      width: calc(var(--vw) * 279);
      margin-left: auto;
    }
    @media screen and (min-width: 769px) {
      width: calc(var(--vw) * 727);
    }
  }

  .about-concept__text-warp {
    display: flex;
    flex-direction: column;
    justify-content: center;

    @media screen and (min-width: 769px) {
      gap: calc(var(--vw) * 40);
    }
  }

  .about-concept__title {
    font-family: "Noto Serif", serif;
    color: #928572;
    font-size: calc(var(--rem) * 14);
    letter-spacing: 0.7px;
    @media screen and (max-width: 768px) {
      padding-left: calc(var(--vw) * 30);
      margin-bottom: calc(var(--vw) * 30);
    }
  }

  .about-concept__title-ja {
    @media screen and (max-width: 768px) {
      padding-left: calc(var(--vw) * 30);
      margin-bottom: calc(var(--vw) * 40);
      font-size: calc(var(--rem) * 18);
      letter-spacing: 2.7px;
    }
    @media screen and (min-width: 769px) {
      font-size: calc(var(--rem) * 22);
      letter-spacing: 3.3px;
      line-height: 43px;
    }
  }

  .about-concept__text {
    @media screen and (max-width: 768px) {
      padding: 0 calc(var(--vw) * 16) 0 calc(var(--vw) * 51);
      font-size: calc(var(--rem) * 13);
      letter-spacing: 1.3px;
      line-height: 33px;
    }
    @media screen and (min-width: 769px) {
      font-size: calc(var(--rem) * 14);
      letter-spacing: 1.4px;
      line-height: 33px;
      padding-left: calc(var(--vw) * 22);
    }
  }

  .about-type {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #FAFAFA;
    padding-bottom: calc(var(--vw) * 67);
    @media screen and (min-width: 769px) {
      padding-bottom: calc(var(--vw) * 129);
    }
  }

  .about-type__lead {
    width: calc(var(--vw) * 271);
    margin-bottom: calc(var(--vw) * 26);
    @media screen and (min-width: 769px) {
      width: calc(var(--vw) * 330);
      margin-bottom: calc(var(--vw) * 38);
    }
  }

  .about-type__sub {
    font-size: calc(var(--rem) * 13.5);
    letter-spacing: 0.675px;
    margin-bottom: calc(var(--vw) * 30);
    @media screen and (min-width: 769px) {
      font-size: calc(var(--rem) * 15);
      letter-spacing: 0.75px;
      margin-bottom: calc(var(--vw) * 39);
    }
  }

  .about-type__list {
    display: flex;
    @media screen and (max-width: 768px) {
      flex-direction: column;
      margin-bottom: calc(var(--vw) * 20);
      gap: calc(var(--vw) * 6);
    }
    @media screen and (min-width: 769px) {
      gap: calc(var(--vw) * 59);
      margin-bottom: calc(var(--vw) * 34);
    }
  }

  .about-type__item {
    width: calc(var(--vw) * 280);
    @media screen and (min-width: 769px) {
      width: calc(var(--vw) * 361);
    }
  }

  .about-type__annotation {
    @media screen and (max-width: 768px) {
      font-size: calc(var(--rem) * 10);
      letter-spacing: 0.8px;
      padding: 0 calc(var(--vw) * 5);
    }
    @media screen and (min-width: 769px) {
      font-size: calc(var(--rem) * 11);
      letter-spacing: 0.88px;
    }
  }

  .about-problem-wrap {
    background: #FAFAFA;
    padding-bottom: calc(var(--vw) * 71);
    @media screen and (min-width: 769px) {
      padding-bottom: calc(var(--vw) * 104);
    }
  }
  .about-problem {
    background: rgba(232, 231, 226, 0.6);
    border-radius: 50px 50px 0 0;
    padding: calc(var(--vw) * 60) calc(var(--vw) * 11)  calc(var(--vw) * 65);

    @media screen and (min-width: 769px) {
      padding: calc(var(--vw) * 85) 0;
    }
  }

  .about-problem__title {
    text-align: center;
    font-size: calc(var(--rem) * 20);
    letter-spacing: 2px;
    margin-bottom: calc(var(--vw) * 30);
    @media screen and (min-width: 769px) {
      margin-bottom: calc(var(--vw) * 50);
    }
  }

  .about-problem__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: calc(var(--vw) * 20);
    @media screen and (min-width: 769px) {
      margin: 0 auto;
      max-width: calc(var(--vw) * 1136);
      grid-template-columns: 1fr 1fr 1fr 1fr;
      column-gap: calc(var(--vw) * 80);
      row-gap: calc(var(--vw) * 29);
    }
  }

  .about-feature {
    background: #FAFAFA;
  }
  .about-feature__title {
    margin: 0 auto calc(var(--vw) * 51);
    width: calc(var(--vw) * 179);
    @media screen and (min-width: 769px) {
      margin: 0 auto calc(var(--vw) * 80);
      width: calc(var(--vw) * 224);
    }
  }

  .about-sample {
    background: #FAFAFA;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: calc(var(--vw) * 72) 0 calc(var(--vw) * 60);

    @media screen and (min-width: 769px) {
      padding: calc(var(--vw) * 305) 0 calc(var(--vw) * 95);
    }
  }

  .about-sample__title {
    text-align: center;

    @media screen and (max-width: 768px) {
      font-size: calc(var(--rem) * 21);
      letter-spacing: 1.05px;
      line-height: 40px;
      margin-bottom: calc(var(--vw) * 26);
      padding: 0 calc(var(--vw) * 20);
    }

    @media screen and (min-width: 769px) {
      font-size: calc(var(--rem) * 25);
      letter-spacing: 1.25px;
      line-height: 28px;
      margin-bottom: calc(var(--vw) * 30);
    }
  }

  .about-sample__sub {
    text-align: center;

    @media screen and (max-width: 768px) {
      font-size: calc(var(--rem) * 13);
      letter-spacing: 0.65px;
      line-height: 24px;
      margin-bottom: calc(var(--vw) * 60);
      padding: 0 calc(var(--vw) * 30);
    }

    @media screen and (min-width: 769px) {
      font-size: calc(var(--rem) * 15);
      letter-spacing: 0.75px;
      line-height: 26px;
      margin-bottom: calc(var(--vw) * 58);
    }
  }

  .about-sample__list {
    display: grid;

    @media screen and (max-width: 768px) {
      grid-template-columns: 1fr 1fr;
      gap: calc(var(--vw) * 34);
      padding: 0 calc(var(--vw) * 25);
    }

    @media screen and (min-width: 769px) {
      gap: calc(var(--vw) * 66);
      grid-template-columns: 1fr 1fr 1fr 1fr;
    }
  }

  .about-sample__item {
    display: flex;
    align-items: center;
    flex-direction: column;

    @media screen and (max-width: 768px) {
      gap: calc(var(--vw) * 15);
    }

    @media screen and (min-width: 769px) {
      gap: calc(var(--vw) * 29);
      width: calc(var(--vw) * 251);
    }
  }

  .about-sample__item-text {
    font-size: calc(var(--rem) * 12.5);
    letter-spacing: 1px;
    line-height: 15px;
    text-align: center;

    @media screen and (min-width: 769px) {
      font-size: calc(var(--rem) * 17);
      letter-spacing: 1.36px;
      line-height: 24px;
    }
  }
  .about__contact {
    transition: opacity 0.2s linear;
    width: calc(var(--vw) * 250);
    @media screen and (min-width: 769px) {
      width: calc(var(--vw) * 334);
    }
    &:hover {
      opacity: 0.6;
    }
  }
  .about__contact-wrap {
    display: flex;
    justify-content: center;
    background: #FAFAFA;
    padding-bottom: calc(var(--vw) * 60);
    @media screen and (min-width: 769px) {
      padding-bottom: calc(var(--vw) * 90);
    }
  }

  .video-section {
    height: 80vh;
    width: 100vw;
  }
  .video {
    height: 100vh;
    width: 100vw;
    position: fixed;
    top: 0;
    z-index: -1;
  }
  .video__src {
    object-fit: fill;
    width: 100%;
    height: 100%;
    @media screen and (min-width: 769px) {
      object-fit: cover;
    }
  }

  .about-feature__image {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    @media screen and (min-width: 769px) {
      clip-path: polygon(0 10%, 93% 10%, 93% 100%, 0% 100%);
      animation-fill-mode: both;
      opacity: 0;
      transition: opacity 0.5s linear;
      grid-column: 1 / 2;
      grid-row: 1 / 7;
    }
    &.is-shown {
      opacity: 1;
      -webkit-animation: fadeCorner 0.8s ease-out forwards;
      animation: fadeCorner 0.8s ease-out forwards
    }
  }
  .about-feature__text-wrap {
    display: flex;
    flex-direction: column;
    @media screen and (max-width: 768px) {
      padding-left: calc(var(--vw) * 32);
      grid-column: 1 / 4;
      grid-row: 4 / 5;
    }
    @media screen and (min-width: 769px) {
      grid-column: 3 / 4;
      grid-row: 3 / 4;
    }
  }
  .about-feature__point {
    color: #928572;
    font-size: calc(var(--rem) * 16);
    letter-spacing: 1.28px;
    margin-bottom: calc(var(--vw) * 20);
    @media screen and (min-width: 769px) {
      margin-bottom: calc(var(--vw) * 50);
    }
  }
  .about-feature__lead {
    font-size: calc(var(--rem) * 21);
    letter-spacing: 2.1px;
    line-height: 44px;
    margin-bottom: calc(var(--vw) * 15);
    @media screen and (min-width: 769px) {
      font-size: calc(var(--rem) * 27);
      letter-spacing: 2.7px;
      line-height: 53px;
      margin-bottom: calc(var(--vw) * 40);
      opacity: 0;
    }
    &.is-shown {
      -webkit-animation: blur 0.7s ease-out forwards;
      animation: blur 0.7s ease-out forwards
    }
  }
  .about-feature__effect {
    font-size: calc(var(--rem) * 13);
    letter-spacing: 1.3px;
    line-height: 35px;
    @media screen and (min-width: 769px) {
      font-size: calc(var(--rem) * 16);
      letter-spacing: 1.6px;
      line-height: 45px;
      opacity: 0;
      transform: translate(0, 5%);
      transition: 2s;
    }
    &.is-shown {
      transform: translate(0, 0);
      opacity: 1;
    }
  }
  .about-feature__sub-lead {
    writing-mode: vertical-rl;
    @media screen and (max-width: 768px) {
      grid-column: 3 / 4;
      grid-row: 1 / 4;
      font-size: calc(var(--rem) * 16);
      letter-spacing: 3px;
      line-height: 28px;
      margin-right: auto;
    }
    @media screen and (min-width: 769px) {
      font-size: calc(var(--rem) * 17);
      letter-spacing: 3px;
      line-height: 30px;
      grid-column: 5 / 6;
      grid-row: 2 / 4;
    }
  }
  .about-feature__annotation {
    grid-column: 1 / 4;
    grid-row: 6 / 7;
    font-size: calc(var(--rem) * 9);
    letter-spacing: 0.72px;
    padding-left: calc(var(--vw) * 32);
    @media screen and (min-width: 769px) {
      font-size: calc(var(--rem) * 11);
      letter-spacing: 0.88px;
      grid-column: 3 / 6;
      grid-row: 4 / 5;
      display: flex;
      align-items: end;
      padding-left: calc(var(--vw) * 89);
    }
  }
  .about-feature__list {
    @media screen and (min-width: 769px) {
      position: relative;
      height: 100vh;
      padding-right: calc(var(--vw) * 171);
    }
  }
  .about-feature__item {
    display: grid;
    grid-template-rows: calc(var(--vw) * 71) max-content calc(var(--vw) * 42) max-content calc(var(--vw) * 20) max-content;
    grid-template-columns: calc(var(--vw) * 241) calc(var(--vw) * 45) 1fr;
    @media screen and (min-width: 769px) {
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0;
      pointer-events: none;
      grid-template-rows: calc(var(--vw) * 98) calc(var(--vw) * 59) max-content calc(var(--vw) * 128) max-content calc(var(--vw) * 68);
      grid-template-columns: minmax(0, calc(var(--vw) * 756)) calc(var(--vw) * 84) 413px calc(var(--vw) * 43) 1fr;
    }
  }
  .about-feature__item:first-child {
    @media screen and (min-width: 769px) {
      opacity: 1;
    }
  }

  .about-feature__item + .about-feature__item {
    @media screen and (max-width: 768px) {
      margin-top: calc(var(--vw) * 55);
    }
  }

  .price {
    background: #FAFAFA;
    padding-bottom: calc(var(--vw) * 70);
    @media screen and (min-width: 769px) {
      padding-bottom: calc(var(--vw) * 97);
    }
  }
  .price__title {
    text-align: center;
    font-size: calc(var(--rem) * 17);
    margin-bottom: 19px;
    @media screen and (min-width: 769px) {
      font-size: calc(var(--rem) * 23);
      margin-bottom: 28px;
    }
  }
  .price__num {
    text-align: center;
    font-size: calc(var(--rem) * 24);
    letter-spacing: 1.92px;
    margin-bottom: 34px;
    @media screen and (min-width: 769px) {
      font-size: calc(var(--rem) * 27);
      letter-spacing: 2.16px;
      margin-bottom: 28px;
    }
  }
  .price__annotation {
    text-align: center;
    font-size: calc(var(--rem) * 12);
    letter-spacing: 0.96px;
    line-height: 22px;
  }
}

@keyframes fadeCorner {
  0% {
    clip-path: polygon(0 10%, 93% 10%, 93% 100%, 0% 100%);
  }
  100% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  }
}

@keyframes blur {
  0% {
    opacity: 0;
    filter: blur(15px);
  }
  100% {
    opacity: 1;
    filter: blur(0px);
  }
}