@charset "utf-8";


.edit-area {
  &.staff {

    padding-bottom: 24rem;

    @media screen and (max-width: 767px) {
      padding-bottom: 12rem;
    }

    .local-list {
      display: flex;
      flex-wrap: wrap;
      gap: 2rem;
      margin-bottom: 7rem;

      @media screen and (max-width: 767px) {
        gap: 0.5rem;
        margin-bottom: 3rem;

        & li {
          width: calc(50% - 0.5rem);
        }

      }

      .cover {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 6rem;
        padding: 0 2.4rem;
        font-weight: 700;
        font-size: 1.8rem;
        text-align: center;
        letter-spacing: 0.05em;
        font-feature-settings: 'palt' on;
        color: #FFFFFF;
        text-decoration: none;
        background: #6E6E6E;
        border-radius: 3rem;
        overflow: hidden;
        cursor: pointer;

        @media screen and (max-width: 767px) {
          width: 100%;
          padding: 0 0.5rem;
          height: 4rem;
          font-size: 1.4rem;
        }

        &:before{
          content: "";
          position: absolute;
          left: 0;
          top: 0;
          z-index: 1;
          display: block;
          width: 100%;
          height: 100%;
          background: linear-gradient(120.28deg, #000000 2.66%, #140470 24.18%, #0638BB 58.35%, #2691D7 84.07%);
          transition: ease 0.25s opacity;
          opacity: 0;
        }

        @media (hover: hover) and (pointer: fine) {
          &:hover{
            &:before{
              opacity: 1;
            }
          }
        }

        & span{
          position: relative;
          z-index: 1;
        }
      }

      .active {
        .cover {
          background: linear-gradient(120.28deg, #000000 2.66%, #140470 24.18%, #0638BB 58.35%, #2691D7 84.07%);
        }
      }

    }

    .staff-box {
      margin-bottom: 5.8rem;
      padding: 9rem 12rem;
      background: #FFFFFF;
      border-radius: 6rem;

      @media screen and (max-width: 767px) {
        margin-bottom: 3rem;
        padding: 3rem 2rem;
        border-radius: 2rem;
      }

      .box-title {

        &.type01 {
          margin-bottom: 4rem;

          @media screen and (max-width: 767px) {
            margin-bottom: 2.4rem;
          }

          .title-en {
            margin-bottom: 2.4rem;
            font-family: 'Roboto Flex';
            font-weight: 300;
            font-size: 2.6rem;
            letter-spacing: 0.06em;
            color: #0033B3;

            @media screen and (max-width: 767px) {
              margin-bottom: 1rem;
              font-size: 1.6rem;
            }
          }

          .title-jp {
            font-weight: 700;
            font-size: 3rem;
            letter-spacing: 0.08em;
            color: #000000;

            @media screen and (max-width: 767px) {
              font-size: 2rem;
            }
          }
        }

        &.type02 {
          position: relative;
          margin-bottom: 1.8rem;
          padding: 1.1rem 2.6rem;
          font-weight: 700;
          font-size: 2rem;
          letter-spacing: 0.08em;
          font-feature-settings: 'palt' on;
          color: #FFFFFF;
          background: linear-gradient(120.28deg, #000000 2.66%, #140470 24.18%, #0638BB 58.35%, #2691D7 84.07%);
          border-radius: 2.1rem;
          cursor: pointer;

          @media screen and (max-width: 767px) {
            padding: 1.2rem 4.6rem 1.2rem 2rem;
            font-size: 1.6rem;
            line-height: 1.4;
            border-radius: 4rem;
          }

          &:before,
          &:after {
            content: "";
            position: absolute;
            right: 2.3rem;
            top: calc(50% - 0.1rem);
            z-index: 1;
            display: block;
            width: 2.4rem;
            height: 0.2rem;
            background: #FFF;
            transition: ease 0.25s transform;
          }
          @media screen and (max-width: 767px) {
            &:before,
            &:after {
              width: 1.8rem;
            }
          }

          &::after {
            transform: rotate(90deg);
          }

          &.active {
            &::after {
              transform: rotate(0);
            }
          }
        }
      }

      .box-detail {
        display: none;
        margin-bottom: 3rem;
        font-weight: 400;
        line-height: 1.625;
        letter-spacing: 0.06em;
        font-feature-settings: 'palt' on;
        &:last-child {
          margin-bottom: 0;
        }
      }

      .box-cover {
        margin-bottom: 9rem;

        @media screen and (max-width: 767px) {
          margin-bottom: 4rem;
        }

        &:last-child {
          margin-bottom: 0;
        }
      }

      .box-set {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin-bottom: 5rem;

        @media screen and (max-width: 767px) {
          flex-direction: column-reverse;
          margin-bottom: 2rem;
        }

        .set-photo {
          position: relative;
          width: 60.7rem;
          padding-bottom: 5.6rem;
          overflow: hidden;

          @media screen and (max-width: 767px) {
            margin-top: 2rem;
            padding-bottom: 3rem;
            width: 100%;
          }

          .slide-caption {
            margin-top: 1.6rem;
            font-weight: 400;
            font-size: 1.4rem;
            line-height: 1.43;
            letter-spacing: 0.06em;
            font-feature-settings: 'palt' on;

            @media screen and (max-width: 767px) {
              margin-top: 1rem;
              font-size: 1.2rem;
            }
          }

          .swiper-pagination-bullet {
            margin: 0 1.5rem;
            width: 1.6rem;
            height: 1.6rem;

            @media screen and (max-width: 767px) {
              margin: 0 0.7rem;
              width: 1rem;
              height: 1rem;
            }

            &.swiper-pagination-bullet-active {
              background: linear-gradient(120.28deg, #000000 2.66%, #140470 24.18%, #0638BB 58.35%, #2691D7 84.07%);
            }
          }
        }

        .set-text {
          width: calc(100% - 60.7rem - 5rem);

          @media screen and (max-width: 767px) {
            width: 100%;
          }

          .text-label {
            margin-bottom: 1.8rem;

            & span {
              display: inline-block;
              font-family: 'Roboto Flex';
              font-weight: 300;
              font-size: 2.6rem;
              letter-spacing: 0.06em;
              color: #FFFFFF;
              padding: 0.7rem 1.1rem;
              background-color: #0033B3;

              @media screen and (max-width: 767px) {
                font-size: 1.8rem;
              }
            }
          }

          .text-name {
            margin-bottom: 4rem;
            font-family: 'Roboto Flex';
            font-weight: 700;
            font-size: 2.8rem;
            letter-spacing: 0.06em;

            @media screen and (max-width: 767px) {
              margin-bottom: 3rem;
              font-size: 2rem;
            }
          }

          .text-info {
            .info-list {
              >div {
                display: flex;
                flex-wrap: wrap;
                padding: 2rem 0;
                font-size: 1.8rem;
                letter-spacing: 0.06em;
                font-feature-settings: 'palt' on;
                border-bottom: 1px solid #000;

                @media screen and (max-width: 767px) {
                  padding: 1.5rem 0;
                  font-size: 1.5rem;
                }

                &:first-child {
                  padding-top: 0;
                }
              }

              & dt {
                width: 16rem;
                font-weight: 700;
                color: #0033B3;

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

              & dd {
                width: calc(100% - 16rem);

                @media screen and (max-width: 767px) {
                  width: calc(100% - 10rem);
                }
              }
            }
          }

        }
      }
    }
  }
}