html {
  font-size: clamp(15px, 4.266666666666667vw, 20px);

}

body {
  &:has(.top-section4) {
    overflow: hidden;
  }
}

dt, dd {
  font-weight: 400;
}

.open-menu-button, .close-menu-button {
  font-size: 0.9375rem;
}

.open-menu-button {
  position: fixed;
  top: 2.5rem;
  left: 50%;
  transform: translateX(-50%);

  &.menu-night {
    color: white;
    border-bottom: 3px solid white;

    &.scrolled {
      color: black;
      border-bottom: 3px solid black;
    }
  }
}

.close-menu-button {
  position: fixed;
  z-index: 100;
  top: unset;
  bottom: 4rem;
  left: 50%;
  transform: translateX(-50%);
  color: white;
  border-bottom: 0.1875rem solid white;
}

.menu-container {
  position: fixed;
  z-index: 200;
  top: 0.8rem;
  right: 0.8rem;
  bottom: 0.8rem;
  left: 0.8rem;
  display: none;
  overflow: hidden;
  padding: 1.25rem;

  .menu {
    display: flex;
    flex-direction: column;
    height: 100%;
    grid-template-columns: 1fr;
  }

  .menu-header {
    font-size: 0.75rem;
    justify-content: center;

    .menu-copyright {
      font-family: Fujisawa, serif;
    }
  }

  .menu-content {
    display: flex;
    flex-direction: column;
    margin-top: auto;
    margin-bottom: auto;
    padding: 1rem 1rem 3.5rem;

    .menu-title, .menu-sub-title {
      text-align: center;
      grid-column: 1 / 4;
    }

    .menu-title {
      display: none;
    }

    .icons {
      img {
        width: 2.6875rem;
        height: auto;

        &:nth-child(2) {
          margin-top: 0.5rem;
          margin-bottom: -0.5rem;
        }
      }
    }

    .menu-sub-title {
      font-size: 2.625rem;
    }

    .links1, .links2 {
      ul {
        list-style: none;
      }
    }

    .links1 {
      display: flex;
      width: 100%;
      margin-top: 0.5rem;
      text-align: start;
      margin-inline: 0;

      .menu-projects {
        font-size: 1.5rem;
        margin-bottom: -1.75rem;
        transform: none;
      }

      ul {
        font-family: Helvetica, "Open Sans", serif;
        font-size: 0.75rem;
        margin-top: 0;

        li {
          padding-block: 0.5em;
        }
      }
    }

    .links2 {
      font-size: 1.125rem;
      order: 5;

      ul {
        margin-top: 0.8rem;
        padding-left: 0;

        li {
          padding-block: 0.3em;
        }
      }
    }

    .links3 {
      font-size: 1.5rem;
      margin-top: 1.25rem;
      text-align: start;
    }

    a:has(> .menu-logo) {
      display: block;
      width: 3.3rem;
      margin-right: auto;
      margin-left: auto;
    }

    .menu-logo {
      width: 3.3rem;
      max-width: 100%;
      height: auto;
    }

    a:has(> .kadowakamatsu-logo) {
      display: block;
      width: 3.3rem;
      margin: 0.75rem auto 1rem;
    }

    .kadowakamatsu-logo {
      width: 3.3rem;
      max-width: 100%;
      height: auto;
    }
  }

  a {
    text-decoration: none;
    color: white;
  }
}

.menu-footer {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
}

footer {
  position: relative;
  margin-top: 1rem;
  margin-bottom: 2rem;
  padding-top: 2.5rem;

  .links {
    display: grid;
    grid-template-columns: 1fr;
  }

  .links1, .links2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: 1rem;

    a {
      text-decoration: none;
      color: black;
    }

    > div {
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }
  }

  .links1 {
    min-height: unset;
    margin-top: 1rem;
    margin-bottom: 3.75rem;

    > div:nth-child(3) {
      order: 5;
    }
  }

  .links2 {
    font-size: var(--font-size-16);
    gap: 1.15rem;

    div:nth-child(1) {
      grid-column: 1 / 3;
    }
  }

  .K {
    font-size: 18.75rem;
    position: absolute;
    z-index: -1;
    top: 6.75rem;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
    color: #A0271E;
    mix-blend-mode: multiply;
  }

  .logo {
    width: 2.6875rem;
    max-width: 100%;
    margin-inline: auto;
  }
}

.top {
  .background {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    img {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
}

.top-section1 {
  position: relative;
  height: calc(var(--vh, 1vh) * 100);

  .image-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    .images {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 18.125rem;

      > img {
        margin-inline: auto;

        &.background-vision {
          width: clamp(calc(69px * 1.45), calc(6.388888888888888vw * 1.45), calc(69px * 1.5 * 1.45));
        }
      }

      > span.background {
        font-size: 2.25rem;
        text-align: center;
        color: #A0271E;
      }

      span:not(.background) {
        font-size: 18.75rem;
        line-height: 18.75rem;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #0000FF;
        mix-blend-mode: multiply;
      }
    }

    > p {
      font-family: Helvetica, "Open Sans", serif;
      font-size: 0.625rem;
      line-height: 2;
      max-width: 18.75rem;
      margin-top: 2.25rem;
      text-align: center;
    }

    &.fujisawa-font-images {
      .images {
        > img {
          transform: translateY(-5%);
        }
      }
    }
  }

  &.top-section-fujisawa-font {
    height: max(calc(var(--vh, 1vh) * 100), calc(546px + 20rem));

    .image-container {
      > p {
        max-width: 100%;
      }
    }
  }

  &.top-section-history {
    .message1 {
      position: absolute;
      bottom: -14rem;
      left: 50%;
      width: var(--container-width);
      transform: translate(-50%, -50%);
    }

    .top-footer {
      position: absolute;
      right: 0;
      bottom: -1rem;
      left: 0;
      text-align: center;
      padding-inline: calc((100vw - var(--container-width)) / 2);

      img {
        width: 5.125rem;
        height: auto;
        margin-inline: auto;
      }
    }
  }

  &.top-section1-team {
    .image-container {
      span:not(.background) {
        transform: translate(-51%, -54%);
      }
    }
  }

  &.top-section-company {
    height: min(40rem, max(calc(var(--vh, 1vh) * 100), 35rem));
  }
}

.section-title {
  position: relative;
  padding-top: 2rem;
  padding-bottom: 4.0625rem;

  .section-title-forward {
    font-size: 1.375rem;
    line-height: 2.25;
  }

  .section-title-backward {
    font-size: 3.125rem;
    top: 0.58em;
  }
}

.vision {
  .section-title {
    padding-top: 6rem;
    padding-bottom: 0;
    transform: translateY(-7rem);

    .section-title-forward {
      font-size: 1.875rem;
      line-height: 2.75;
    }

    .section-title-backward {
      font-size: 5.5rem;
      top: 0;
    }
  }

  .content {
    margin-top: 3rem;
    margin-bottom: 6rem;

    > .grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1rem;

      > p:nth-child(1) {
        font-size: 3.125rem;
        order: 2;
      }

      > p:nth-child(2) {
        font-size: 1rem;
      }

      &:nth-child(1) {
        p {
          margin-bottom: 1rem;
          padding-bottom: 1rem;
        }

        > p:nth-child(1) {
          font-size: 3.125rem;
        }

        > p:nth-child(2) {
          font-size: 1.875rem;
          line-height: 1.25;
        }
      }

      &:nth-child(2) {
        gap: 5rem;

        .font-14 {
          font-size: var(--font-size-12);
        }
      }
    }

    > p {
      font-size: 1.25rem;
      margin-top: 2rem;
    }
  }

  .message1 {
    margin-top: 0;
  }

  .typing-text-2 {
    font-size: 1rem;
  }
}

.team {
  margin-top: -3rem;

  .list {
    margin-bottom: 0;
    gap: 2.25rem;

    > a {
      align-items: baseline;

      > span {
        font-size: 1rem;
        font-weight: bold;
      }

      > div {
        > span {
          font-size: 0.9375rem;
        }
      }
    }
  }
}

.top14 {
  .questions {
    margin-bottom: 8rem;

    .title {
      padding-bottom: 2rem;
      border-bottom: 0.0625rem solid black;
    }

    .question-list {
      display: flex;
      flex-direction: column;
      margin-top: 7rem;
      gap: 5rem;

      .question {
        margin-top: 0.8rem;
        padding-bottom: 0.8rem;
        border-bottom: 0.0625rem solid black;
      }

      .hr {
        display: inline-block;
        width: 100%;
        margin-top: 1rem;
        padding-bottom: 1rem;
        border-bottom: 0.0625rem solid black;

        &:before {
          font-size: 0.75rem;
          font-weight: 700;
          display: inline-block;
          content: "<<";
          transform: rotate(-90deg);
        }
      }

      .answer {
        line-height: 2;
        display: none;
        max-width: var(--container-sm-width);
        padding-top: 4.3rem;
        padding-bottom: 3.3rem;
        transition: font-size ease .1s;
        text-align: left;
        margin-inline: auto;

        &.open {
          font-size: 1.5rem;
          display: block;
          max-width: var(--container-width);

          + .hr:before {
            transform: rotate(90deg);
          }
        }
      }
    }
  }
}

.company {
  margin-top: -4.5rem;
  margin-bottom: 0;

  .company-message1 {
    font-size: 1rem;
  }

  .icon, .logo {
    width: 4.125rem;
    max-width: 100%;
  }

  .logo {
    width: 4.75rem;
    margin-top: 1.25rem;
    margin-bottom: -3rem;
  }

  .company-message1 {
    margin-top: 4.375rem;
  }

  .company-info-container {
    max-width: min(min(14rem, 60vw), calc(var(--container-width) - 2rem));
    margin-top: 11.25rem;
    padding-top: 0;
    margin-inline: auto;
  }

  .title {
    &:after {
      width: 100%;
    }
  }

  .grid {
    font-size: 0.8125rem;
    display: flex;
    flex-direction: column-reverse;
    margin-top: 2.25rem;
    gap: 2.25rem;

    .fujisawa {
      font-size: 0.875rem;
      line-height: 1.85;
    }
  }

  .company-project {
    margin-top: 11.25rem;

    .image-container {
      .images {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 18.125rem;

        > img {
          margin-inline: auto;
        }

        span:not(.background) {
          font-size: 15rem;
          line-height: 15rem;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-52%, -47%);
          color: #0000FF;
          mix-blend-mode: multiply;
        }
      }

      > p {
        font-size: 0.625rem;
        line-height: 1.6;
        max-width: 9.125rem;
        margin-top: 1.5rem;
        text-align: center;
        margin-inline: auto;
      }
    }

    .grid-3 {
      margin-top: 4.9375rem;
      grid-template-columns: 1fr;
      gap: 2.25rem;
      padding-inline: 0;

      > a {
        > span {
          font-size: 0.9rem;
        }

        > div {
          font-size: 1.25rem;
        }
      }
    }
  }
}

.fujisawa-font {
  margin-bottom: 0;

  .grid {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;

    &:nth-child(1) {
      display: flex;
      flex-direction: column-reverse;
      margin-top: 1rem;
      letter-spacing: 0.05em;
      gap: 7.5rem;
    }

    &:nth-child(2) {
      display: flex;
      flex-direction: column-reverse;
      margin-top: 0;
      gap: 5.625rem;
    }

    img {
      width: 100%;
      margin-inline: auto;
    }

    .texts1 {
      display: flex;
      padding-bottom: 0;
      gap: 2rem;
      padding-block: 1.5rem;
    }

    .texts2 {
      padding-top: 0;

      .auto-resize-textarea {
        max-width: 80%;
        height: 2.25rem;
        margin-inline: auto;
      }

      textarea {
        width: 100%;
        max-width: 100%;
        padding: 0.2rem 0.5rem 0.1rem;
        text-align: center;
        margin-inline: auto;
      }

      .mt-2-5 {
        margin-top: 1rem;
      }

      .button-wrapper {
        margin-bottom: 2.5rem;
        padding-bottom: 2.5rem;
        border-bottom: 0.0625rem solid #707070;
        margin-inline: 0;

        .button {
          padding: 0.8em 1.6em;
          border-radius: 10rem;
        }
      }

      .message2 {
        font-family: "Hiragino Sans", sans-serif;
      }
    }

    .background {
      font-size: 7.5rem;
      position: absolute;
      top: 12rem;
      left: 50%;
      transform: translateX(-50%);
      opacity: 8%;
    }
  }
}

.top-section2 {
  display: flex;
  align-content: center;
  flex-direction: column;
  justify-content: center;
  min-height: calc(var(--vh, 1vh) * 100);
  margin-top: 0;
  padding-top: 1rem;
  background-color: unset;

  &.top-section-fujisawa-area-management {
    min-height: max(calc(var(--vh, 1vh) * 100), calc(541px + 12rem));
  }
}

.top-section3 {
  display: flex;
  align-content: center;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  min-height: calc(var(--vh, 1vh) * 100);
  margin-top: 0;
  padding-top: 1rem;

  &.top-section-project {
    min-height: max(calc(var(--vh, 1vh) * 100), calc(541px + 12rem));
  }
}

.top-section2, .top-section3 {
  .artwork-by {
    margin-top: 10px;
    padding-right: 5%;
    text-align: right;
  }
}

.top-section4 {
  .panel-title {
    position: absolute;
    top: 40px;
    bottom: 40px;
    left: 1rem;

    > div:nth-child(1) {
      bottom: 0;

      span:nth-child(2) {
        font-size: 3.75rem;
      }

      img {
        width: 26px;
        height: auto;
        margin-bottom: 3px;
        margin-left: 1px;
      }
    }

    > div:nth-child(2) {
      margin-top: 0;
      transform: translateX(-0.38rem);
      writing-mode: vertical-rl;

      p:nth-child(1) {
        transform: translateX(-0.38rem);
      }
    }
  }
}

.top-section5 {
  display: grid;
  max-width: 95vw;
  height: calc(var(--vh, 1vh) * 100);
  grid-template-columns: 1fr 1fr;

  > div:nth-child(1) {
    position: relative;

    .image-container {
      position: absolute;
      top: 50%;
      right: 0;
      left: 0;
      transform: translate(0, -50%);
      border-right: none;

      .images {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 18.125rem;

        > img {
          max-width: 2.8125rem;
        }

        span:not(.background) {
          font-size: 12.5rem;
          line-height: 12.5rem;
        }
      }

      > p {
        font-size: 0.625rem;
        line-height: 2;
        max-width: 100%;
        margin-top: 1rem;
        text-align: center;
      }
    }
  }

  .splide__track {
    height: calc(var(--vh, 1vh) * 100) !important;
  }

  .splide__slide {
    position: relative;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 0;

    .arrow {
      display: none;
    }

    .img {
      position: unset;
      top: unset;
      left: unset;
      max-width: 100%;
      transition: all 0.1s linear;
      transform: unset;
    }

    &.p-slide-prev {
      .img {
        top: unset;
        transform: unset;
      }
    }

    &.p-slide-next {
      .img {
        top: unset;
        transform: unset;
      }
    }
  }
}

.top-section6 {
  .bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    img {
      width: 9.0625rem;
      max-width: 100svw;
      height: auto;
    }

    #sub-text {
      font-size: var(--font-size-16);
      position: absolute;
      left: calc(-50vw + 9.0625rem / 2);
      transform: translate(100%, -50%);
      white-space: nowrap;
      writing-mode: vertical-lr;
    }
  }

  #scroll-font-size-wrapper {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
  }

  .scroll {
    position: relative;
    width: 100%;

    .welcome {
      position: absolute;
      bottom: calc((var(--vh, 1vh) * 100) / 2 - min(9.0625rem, 100svw) / 2 - 5.8rem);
      left: 50%;
      transform: translateX(-50%);
      text-align: center;
    }

    img {
      position: absolute;
      right: calc(100vw - var(--container-width));
      bottom: 0;
    }
  }

  .swiper-container {
    padding-right: 3rem;
    padding-left: 3.8rem;

    p {
      font-family: Fujisawa, serif;
      font-size: 0.625rem;
      line-height: 0.8;
      left: 1.25rem;
      margin: 0;
      padding-top: 0.1em;
      padding-bottom: 0.1em;
    }
  }

  .texts, .texts-dummy {
    position: absolute;
    top: 50%;
    right: 3rem;
    bottom: 0;
    left: 3.8rem;
    display: flex;
    overflow: visible;
    flex-direction: column;
    transition: top 0.5s ease-in-out;

    p {
      font-family: Fujisawa, serif;
      font-size: 0.625rem;
      line-height: 0.8;
      left: 1.25rem;
      margin: 0;
      padding-top: 0.1em;
      padding-bottom: 0.1em;
    }

    &.texts-dummy {
      visibility: hidden;
      transition: none;

      p {
        transition: none;
      }
    }
  }
}

.project {
  overflow: hidden;
  max-width: 100svw;

  .project-img1 {
    img {
      width: 100%;
      max-height: calc(100vw * 11 / 15);
      object-fit: cover;
      object-position: 50% 70%;
    }
  }

  .project-img2 {
    img {
      width: 100%;
      aspect-ratio: 1 / 1;
      object-fit: cover;
    }
  }

  .scroll-section {
    img {
      position: absolute;
      z-index: 50;
      right: unset;
      bottom: 0;
      left: 50%;
      width: 1rem;
      height: auto;
      transform: translate(50%, 20%);
    }
  }

  .sp-message1 {
    font-size: 0.625rem;
  }

  .grid {
    grid-template-columns: 1fr;
  }

  .grid1 {
    margin-top: 5rem;

    &.has-border {
      margin-top: 7.5rem;
      padding-top: 5rem;
      border-top: 0.0625rem solid #707070;
    }

    > div:nth-child(1) {
      margin-right: 0;
      border-right: none;

      > p:nth-child(1) {
        font-size: 4.375rem;
      }

      > p:nth-child(2) {
        font-size: 0.625rem;
        max-width: 100%;
        margin-top: 2.5rem;
      }

      > a {
        display: inline-block;
        margin-top: 1.1rem;
      }
    }

    > div:nth-child(2) {
      display: flex;
      flex-direction: column;
      margin-top: 5rem;
      margin-left: min(4.25rem, 30vw);
      padding-left: 0.75rem;
      border-left: 0.0625rem solid #707070;

      > *:nth-child(2) {
        line-height: 1.75;
        margin-top: 0;
      }

      > *:nth-child(3) {
        font-size: 0.9375rem;
      }

      > *:nth-child(4) {
        font-size: 0.625rem;
        margin-top: 0.5rem;
      }
    }

    &.grid1-1 {
      .font-30 {
        font-size: 1.375rem;
      }

      > div:nth-child(2) {
        .img {
          width: min(100%, calc(100vw - 0.75rem - min(4.25rem, 30vw)));
          margin-top: 5rem;
        }

        > *:nth-child(1) {
          order: 10;
        }

        > *:nth-child(2) {
          order: -1;
        }
      }
    }

    &.grid1-2 {
      > div:nth-child(2) {
        .img {
          width: min(100%, calc(100vw - 0.75rem - min(4.25rem, 30vw)));
          margin-top: 0;
        }

        > p {
          font-size: 0.8125rem;
          margin-top: 5rem;
        }
      }
    }

    &.grid1-grid1 {
      .img {
        margin-top: 3.4375rem;
      }

      > div:nth-child(1) {
        padding-bottom: 5rem;

        > p:nth-child(2) {
          margin-top: 2.5rem;
        }
      }
    }

    &.grid1-grid2 {
      > div:nth-child(1) {
        > p:nth-child(2) {
          font-size: 0.625rem;
          margin-top: 10rem;

          &.area-management-text1 {
            margin-top: 2.5rem;
          }
        }

        a {
          margin-top: 1.1rem;
        }
      }
    }
  }

  .project-content2 {
    margin-top: 7.5rem;

    .img {
      width: 100svw;
      max-width: unset;

      p {
        margin-top: 0.75rem;
        padding-right: calc((100vw - var(--container-width)) / 2);
      }

      &.area-management-img1 {
        img {
          max-height: calc(100vw * 11 / 15);
        }
      }
    }

    .grid2 {
      line-height: 2;
      margin-top: 5.9375rem;
      margin-left: min(4.25rem, 30vw);
      padding-right: 0;
      padding-left: 0.75rem;

      > div:nth-child(2) {
        font-size: 0.8125rem;
        display: flex;
        flex-direction: column;
        padding-left: 0;

        .label {
          font-size: 1rem;
          position: static;
          order: -1;
          margin-bottom: 0.15rem;
          padding: 0 0 0.15rem;
          border-right: none;
          border-bottom: 1px solid var(--color-gray);
        }

        p:not(.label) {
          padding-left: 0;
          border-left: none;
        }
      }
    }
  }

  .img2 {
    max-width: 35rem;
    margin-top: 5rem;
    margin-inline: auto;

    p {
      margin-top: 0.75rem;
    }
  }

  .project-detail-item {
    margin-top: 5.625rem !important;

    &.is-top {
      margin-top: 5.625rem !important;
    }

    .project-detail-item-content {
      font-size: 1rem;
    }
  }
}

.grid-3col {
  position: relative;
  width: 100%;

  > div {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: unset;
    padding-left: unset;
  }

  .cols {
    position: relative;
    display: block;
    width: 100%;
    padding-left: 0;
    transition: all 0.5s ease-in-out;
    will-change: left;

    &.open {
      left: 0;
    }
  }

  .col {
    position: relative;
    top: 0;
    width: var(--container-width);
    margin-inline: auto;
  }

  .col1 {
    position: relative;

    .top-section1 {
      will-change: top;
    }
  }

  .col2 {
    > div {
      position: relative;
      width: 100%;
      transition: opacity 0.5s ease;

      .number {
        font-size: 18.75rem;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        color: var(--main-color);

        img {
          width: 150px;
          max-width: 150px;
          height: auto;
          margin-top: 2rem;

          &.img1 {
            transform: translateX(-15px);
          }
        }
      }

      .title {
        font-size: 3.125rem;
        position: absolute;
        top: 5.25rem;
        left: 50%;
        transform: translateX(-50%);
        white-space: nowrap;
      }

      .sub-title {
        white-space: nowrap;
      }

      .row-foot {
        position: absolute;
        top: 14rem;
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
      }
    }
  }

  .toggle-detail {
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-top: 0.75rem;
    cursor: pointer;
    transition: all 0.5s ease-in-out;
    gap: 1rem;
    margin-inline: auto;

    &:before, &:after {
      display: inline-block;
      width: 12rem;
      content: "";
      transition: all 0.5s ease-in-out;
      opacity: 0;
      border-bottom: 0.0625rem solid #707070;
    }

    &.open {
      margin-top: 5rem;

      &:before, &:after {
        opacity: 1;
      }
    }

    &.toggle-read {
      &:before, &:after {
        opacity: 1;
      }
    }
  }

  .col3 {
    display: flex;
    flex-direction: column;
    gap: 8.125rem;
  }

  .col2, .col3 {
    > div {
      transition: opacity 0.5s ease;

      .logo {
        width: 4.4375rem;
        height: auto;
        margin-bottom: 3rem;
        margin-inline: auto;
      }

      .quote {
        position: relative;
        max-width: var(--container-width);
        margin: 4.6875rem auto 3.75rem;

        p {
          font-size: 1rem;

          &:nth-child(2) {
            font-size: 0.625rem;
            position: absolute;
            bottom: 1.5rem;
            left: 0;
          }
        }

        &:before, &:after {
          font-size: 6.25rem;
          margin-bottom: -2rem;
        }

        &:after {
          transform: translateY(1rem);
        }
      }

      .message1 {
        line-height: 2;
        margin-top: 4rem;
      }

      .interviewed {
        margin-top: 15rem;
      }
    }
  }
}

.wrapper:has(> .history) {
  padding-bottom: 12rem;
}

.history {
  padding-top: 6rem;

  .cols {
    position: absolute;
    left: 0;
    display: grid;
    overflow: visible;
    width: 200vw;
    transition: all 0.5s ease-in-out;
    grid-template-columns: 50vw 50vw 100vw;

    &.open {
      left: -100vw;
    }
  }

  .col1 {
    width: 100%;
    margin-inline: 0;

    > p {
      font-size: 4.375rem;
      position: relative;
      z-index: 2;
      max-width: var(--container-width);
      margin-inline: auto;
    }

    .img {
      position: relative;
      z-index: 1;
      transform: translateY(-2rem);

      p {
        max-width: var(--container-width);
        margin-top: 0.5rem;
        margin-inline: auto;
      }
    }

    .top-section-history {
      width: 50vw;

      .image-container {
        margin-top: 2rem;
        padding-bottom: 0.5rem;

        .images {
          position: relative;
          margin-top: 1.5rem;

          > img {
            &.background-fujisawa-kadowakamatsu {
              width: 7.5rem;
              max-width: 40vw;
              transform: translate(-6%, -12%);
              margin-inline: auto;
            }
          }

          span:not(.background) {
            font-size: var(--top-charactor-200);
            line-height: var(--top-charactor-200);
          }

          > div {
            > span:nth-child(1) {
              transform: translate(-32%, -20%);
            }

            > span:nth-child(2) {
              transform: translate(-75%, -90%);
            }
          }
        }

        > p {
          line-height: 1.2;
          width: min(8rem, 40vw);
          margin-top: 0.5rem;
          transform: translate(-0%, 0);
        }

        &:after {
          position: absolute;
          top: 0;
          right: -24%;
          width: 0;
          height: 100%;
          content: "";
          border-right: 1px solid #b5b5b5;
        }
      }
    }
  }

  .text1 {
    font-size: 3rem;
    position: relative;
    z-index: 2;
    max-width: var(--container-width);
    margin-bottom: 2rem;
    color: var(--main-color);
    margin-inline: auto;
  }

  .col2 {
    width: 100%;
    margin-inline: 0;

    > div {
      .number {
        font-size: 13.75rem;
      }

      .title {
        font-size: 2.5rem;
        text-align: center;
      }

      > div:last-child {
        margin-top: 0;
        padding-top: 0;
        padding-bottom: 6rem;

        > div:first-of-type p {
          font-size: 0.625rem;
        }
      }
    }

    p {
      max-width: var(--container-width);
      margin-inline: auto;
    }

    .text1 {
      padding-top: 7rem;
      transform: translateX(-1.1rem);
      letter-spacing: -1px;
    }

    .toggle-read {
      padding-bottom: 2rem;

      &:before, &:after {
        opacity: 0 !important;
      }
    }
  }

  .toggle-detail {
    &.open {
      margin-top: 5rem;

      &.mt-4 {
        margin-top: 4rem;
      }

      &:before, &:after {
        opacity: 0;
      }
    }
  }

  .col3 {
    padding-top: 8rem;

    .number-text {
      .row-body {
        position: relative;
        text-align: center;

        .number {
          font-size: 13.75rem;
          text-align: center;
          color: var(--main-color);
          margin-inline: auto;
        }

        .title {
          font-size: 2.5rem;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          white-space: nowrap;
        }
      }

      > div:last-child {
        margin-top: 0;
        padding-top: 0;
        padding-bottom: 5rem;
        text-align: center;

        > div:first-of-type p {
          font-size: 0.625rem;
        }
      }
    }
  }

  .kadowakamatsu-k-sp {
    margin-top: 1.25rem;
  }

  .history-footer {
    img, .img-label {
      width: 100%;
      max-width: 100%;
    }

    .font-30 {
      font-size: var(--font-size-22);
      text-align: center;
    }

    .font-15 {
      font-size: var(--font-size-30);
      text-align: center;
    }

    .font-11 {
      font-size: var(--font-size-10);
    }

    .eye {
      margin-top: 0.5rem;
    }

    .interview {
      margin-top: 2.5rem;
    }

    .history-footer-table {
      display: grid;
      margin-top: 0.25rem;
      grid-template-columns: repeat(1, 1fr);
    }
  }

  .history-footer-1 {
    margin-top: -100px;
    padding-right: 1rem;
    padding-left: 1rem;

    .history-footer-table {
      p {
        width: 100%;
        margin-left: 2.9em;
        padding-right: 2em;
        text-align: left;
        text-indent: -2.9em;
      }
    }
  }
}

.team-detail {
  > div {
    height: unset;
    margin-left: 0;
    padding-left: 0;
  }

  .top-section7 {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    height: calc(var(--vh, 1vh) * 100);

    .image-container {
      position: relative;

      .images {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 15.625rem;

        > img {
          margin-inline: auto;
        }

        > span.background {
          font-size: 2.25rem;
          text-align: center;
          color: #A0271E;
        }

        span:not(.background) {
          font-size: 12.5rem;
          line-height: 18.75rem;
          position: absolute;
          top: 40%;
          left: 50%;
          transform: translate(-50%, -50%);
          color: #0000FF;
          mix-blend-mode: multiply;

          &.y {
            transform: translate(-55%, -50%);
          }
        }
      }
    }
  }

  .col1 {
    width: 100%;

    img {
      display: block;
      width: 100%;
      height: calc(var(--vh, 1vh) * 100);
      padding-right: 0;
      border-right: none;
      object-fit: cover;
    }

    .top-section7 {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
    }

    &.anim {
      img, .photo-copyright {
        animation: fadeIn 0.75s ease forwards;
        animation-delay: 0.75s;
        opacity: 0;
      }

      .top-section7 {
        animation: fadeOut 0.5s ease forwards;
        animation-delay: 1s;

        .background {
          margin-top: -3.5rem !important;
        }
      }
    }
  }

  .col2 {
    .top-section7 {
      justify-content: center;
      height: unset;
      margin-top: 7rem;

      .image-container {
        > p {
          font-family: Helvetica, "Open Sans", serif;
          font-size: 0.625rem;
          line-height: 2;
          max-width: 18.75rem;
          margin-top: 2.25rem;
          text-align: center;
          margin-inline: auto;
        }

        .background {
          margin-top: -4rem !important;
        }
      }

      .bio {
        .font-10 {
          margin-top: 2rem;
        }

        .font-22 {
          font-size: 1.5rem;
          margin-top: 0.5rem;
        }

        .info {
          font-size: 0.625rem;
          margin-top: 5rem;
          gap: 0;
        }
      }
    }

    .profile {
      .profile-content {
        font-size: 0.8125rem;
        font-weight: bold;
        line-height: 1.75;
        max-width: 17rem;
        margin-top: 5rem;
        border-top: 0.0625rem solid #707070;
        border-bottom: 0.0625rem solid #707070;
        padding-block: 2.5rem;
        margin-inline: auto;
      }
    }

    .chart {
      .profile-title {
        font-size: 1.25rem;
        margin-top: 5rem;
      }

      .profile-content {
        margin-top: 2.5rem;
        padding-top: 0;
        border: none;
      }

      canvas {
        width: 110% !important;
        height: auto !important;
        aspect-ratio: 1 / 1;
      }

      dl {
        display: grid;
        margin-top: 1.875rem;
        margin-left: 0;
        padding-bottom: 3rem;
        grid-template-columns: 1.5rem auto;

        dt {
          font-size: 0.8rem;
          padding-top: 0.09rem;
        }

        dd {
          font-size: 0.8125rem;
        }
      }
    }

    .question {
      &:nth-child(1) {
        margin-top: 4rem;
      }

      .question-title {
        font-size: 2rem;

        &.personal-story {
          font-size: 2.25rem;
        }
      }

      > div:nth-child(1) {
        margin-inline: 0;
      }

      > div:nth-child(2) {
        p {
          font-size: 1.375rem;
        }
      }

      > div:nth-child(3) {
        margin-top: 3.5rem;
        padding-bottom: 1rem;
        border-bottom: 0.0625rem solid #707070;

        p:nth-child(2) {
          font-size: 1rem;
          margin-top: 1.25rem;
        }
      }

      > div:nth-child(4) {
        display: none;
      }

      .answer {
        padding-top: 1.2rem;
        padding-bottom: 1rem;
        transition: all 0.5s ease;
        border-bottom: 0.0625rem solid #707070;

        > div {
          display: flex;
          align-items: center;
          flex-direction: column;
          padding: 0;
          transition: all 0.5s ease;
          border: 0;

          > div {
            overflow: hidden;
            height: 0;
            transition: all 0.5s ease;

            p {
              font-size: 1rem;
              font-weight: bold;
              line-height: 2;
              transition: all 0.5s ease;
              word-break: break-all;

              &.font-22 {
                font-size: 1.375rem;
                line-height: 2;
                margin-top: 1rem;
                margin-bottom: 1rem;
              }
            }
          }

          &:after {
            display: inline-block;
            margin-top: 0;
            content: ">>";
            transform: rotate(90deg);
          }
        }

        &.open {
          margin-top: 1rem;
          padding-top: 0;
          padding-bottom: 2rem;

          > div {
            > div {
              height: unset;
            }

            &:after {
              margin-top: 2rem;
              transform: rotate(-90deg);
            }
          }
        }
      }
    }

    .question2 {
      > div:nth-child(3) {
        p:nth-child(2) {
          margin-top: 0;
        }
      }

      > div:nth-child(4) {
        margin-top: 9.375rem;
      }
    }

    .question3 {
      > div:nth-child(1) {
        margin-top: 4rem;
      }

      > div:nth-child(2) {
        display: none;
      }

      > div:nth-child(3) {
        margin-top: 3.5rem;
      }
    }
  }

  .col3 {
    .answer {
      p {
        line-height: 2.2;
        max-width: max(17rem, 25vw);
        margin-inline: auto;
      }
    }

    .answer2 {
      p:nth-child(2) {
        margin-top: 2.5rem;
      }
    }
  }
}

.fujisawa-area-management {
  .interviewed-by {
    margin-bottom: 0;
  }
}

.auto-resize-textarea {
  textarea {
    font-size: 6.25rem;
    line-height: 1.2;
    overflow: hidden;
    box-sizing: border-box;
    width: 100%;
    padding: 0.625rem;
    resize: none;
    white-space: nowrap;
    overflow-wrap: normal;
  }
}

.kadowakamatsu-k {
  display: none;
}

.kadowakamatsu-k-sp {
  text-align: center;

  a {
    display: inline-block;
    margin: var(--margin-7-5) auto 3rem;

    img {
      width: 5.4375rem;
    }
  }

  &.area-management {
    margin-top: 1.25rem;
  }
}

.image-container.anim {
  .anim-target {
    animation: fadeIn 1.5s ease forwards;
    opacity: 0;
  }
}

.image-container.image-container-team {
  transform: translate(-52%, -50%);
}

.typing {
  &::after {
    content: "|";
    animation: blink 1s infinite;
    color: inherit;
  }
}

.window-wrapper {
  position: fixed;
  bottom: 3rem;
  left: 15rem;
}

.window {
  line-height: 2;
  position: relative;
  width: 7.8125rem;
  height: 7.5rem;
  color: var(--window-theme-color);
  border: 2px solid var(--window-theme-color);
  border-top: none;
  background-color: #fff;
  --window-theme-color: #A0271E;

  .window-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 1.0625rem;
    padding-left: 0.3125rem;
    cursor: move;
    color: white;
    background-color: var(--window-theme-color);

    img {
      cursor: pointer;
    }
  }

  .window-content {
    display: flex;
    flex-direction: column;
    padding: 0.75rem 0.5rem;
  }

  .fujisawa {
    line-height: 1.8;
  }

  a {
    color: var(--window-theme-color);
    text-decoration-color: var(--window-theme-color);
  }

  &:after {
    position: absolute;
    z-index: -1;
    top: 0.3rem;
    left: 0.3rem;
    display: inline-block;
    width: 7.8125rem;
    height: 7.5rem;
    content: "";
    background-color: var(--window-theme-color);
  }
}

.toggle-auto-scroll {
  position: fixed;
  z-index: 50;
  right: 1rem;
  bottom: 1rem;
  cursor: pointer;

  &.stopped, &.paused {
    .pause {
      display: none;
    }
  }

  &.running {
    .play {
      display: none;
    }
  }
}

.scroll-section {
  margin-top: 3.75rem;

  text-align: center;

  img {
    width: auto;
    height: 3.125rem;
    margin-top: 1.25rem;
    margin-inline: auto;
  }
}

.photo-copyright {
  padding-left: 0.5rem;
}

.instagram-wrapper {
  margin: var(--margin-7-5) 0 0;
}

.something-might {
  font-size: 2.5rem;
  letter-spacing: -2px;
}

.kadowakamatsu-building {
  .section-title {
    .section-title-backward {
      font-size: 2.4rem;
      line-height: 3.125rem;
      top: 0.68em;
      letter-spacing: -4px;
    }
  }
}

.top-section-project-kadowakamatsu-building, .top-section-project-bread-market {
  background-color: white;
}

.top-section-project-kadowakamatsu-building, .top-section-project-market251 {
  background-color: #b99a84;
}

.top-section-project-kadowakamatsu-building, .top-section-project-night-market {
  background-color: #000000;
}

.top-section-project-kadowakamatsu-building, .top-section-project-craft-beer-fest {
  background-color: #fcf5ea;
}

.sp-market {
  letter-spacing: -6px;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}