@charset "UTF-8";
.main {
  /* =====================
    MV
  ===================== */
  .u-mv {
    &::after {
      background-image: url('../img/works/mv.png');
    }
  }

  /* =====================
    photo
  ===================== */
  .photo {
    position: relative;
    padding-block-start: 132px;
    padding-block-end: 120px;

    @media (width <= 768px) {
      padding-block-start: calc((100 / 390) * 46 * 1vw);
      padding-block-end: calc((100 / 390) * 64 * 1vw);
    }

    .u-inner {
      .list {
        margin-block-start: 43px;
        display: block grid;
        grid-template-columns: repeat(3, auto);
        gap: 32px 23.5px;

        @media (width <= 768px) {
          grid-template-columns: 1fr;
          gap: calc((100 / 390) * 24 * 1vw);
          margin-block-start: calc((100 / 390) * 32 * 1vw);

          & img {
            inline-size: 100%;
          }
        }
      }
    }
  }

  /* =====================
    History
  ===================== */
  .history {
    padding-block-start: 120px;
    padding-block-end: 120px;

    @media (width <= 768px) {
      padding-block-start: calc((100 / 390) * 64 * 1vw);
      padding-block-end: calc((100 / 390) * 64 * 1vw);
    }

    .u-inner {
      padding-inline: 40px;

      @media (width <= 768px) {
        padding-inline: calc((100 / 390) * 16 * 1vw);
      }

      .wrap {
        background-color: #fff;
        padding-inline: 120px;
        padding-block: 92px 80px;

        @media (width <= 768px) {
          padding-inline: calc((100 / 390) * 16 * 1vw);
          padding-block: calc((100 / 390) * 64 * 1vw);
        }

        /* ==== TAB ==== */
        .tab {
          position: relative;
          display: block flex;
          gap: 20px;
          margin-block-start: 42px;
          padding-inline: 32px;

          @media (width <= 768px) {
            display: block grid;
            grid-template-columns: repeat(2, 1fr);
            flex-direction: column;
            align-items: center;
            gap: calc((100 / 390) * 16 * 1vw);
            margin-block-start: calc((100 / 390) * 33 * 1vw);
            padding-inline: 0;
          }
          & li {
            border-radius: 50rem;
            font-weight: 500;
            text-align: center;
            color: var(--primary);
            border: solid 1px var(--primary);
            line-height: 1.2;

            @media (width <= 768px) {
              font-size: calc((100 / 390) * 16 * 1vw);
            }
            .link-anchor {
              display: block flow;
              inline-size: 100%;
              block-size: 100%;
              padding-block: 13px;
              padding-inline: 36px;

              @media (width <= 768px) {
                padding-inline: calc((100 / 390) * 16 * 1vw);
                padding-block: calc((100 / 750) * 14 * 1vw);
              }
            }
            /* ==== active ==== */
            &.active {
              border: solid 1px #fff;
              background: linear-gradient(232deg, #d2d200 -8.93%, #007635 37.32%, #18562a 83.58%);
              color: #fff;
              pointer-events: none;
            }
          }
        }

        /*エリアの表示非表示と形状*/
        .area {
          display: none;
          /*はじめは非表示*/
          opacity: 0;
          /*透過0*/
          margin-block-start: 47px;

          @media (width <= 768px) {
            margin-block-start: calc((100 / 390) * 32 * 1vw);
          }
        }
        /*areaにis-activeというクラスがついた時の形状*/
        .area.is-active {
          display: block;
          /*表示*/
          animation-name: displayAnime;
          /*ふわっと表示させるためのアニメーション*/
          animation-duration: 0.5s;
          animation-fill-mode: forwards;
          opacity: 1;
        }

        .table {
          display: block grid;
          grid-template-columns: 240px 1fr;
          margin-inline: auto;

          @media (width <= 768px) {
            grid-template-columns: 1fr;
          }
          .tr {
            display: block grid;
            grid-template-columns: subgrid;
            grid-column: 1 / -1;
            align-items: self-start;

            & dt,
            & dd {
              border: 1px solid #789676;
              padding-inline: 32px;
              padding-block: 9px;

              @media (width <= 768px) {
                padding-inline: calc((100 / 390) * 16 * 1vw);
                padding-block: calc((100 / 390) * 8 * 1vw);
              }
            }

            & dt {
              place-content: center;
              font-weight: 500;
              color: var(--primary);
              border-block-end: 1px solid transparent;
              border-inline-end: 1px solid transparent;
              background-color: #e8f6e7;

              @media (width <= 768px) {
                border-inline-end: 1px solid #789676;
              }
            }

            /* ==== dd ==== */
            & dd {
              border-block-end: 1px solid transparent;
            }

            &:last-child {
              & dt {
                border-block-end-color: #789676;

                @media (width <= 768px) {
                  border-block-end-color: transparent;
                }
              }

              & dd {
                word-break: break-all;
                border-block-end-color: #789676;
              }
            }
          }
        }
      }
    }
  }
}