@charset "utf-8";

/* ↓↓↓ .contents ↓↓↓ */
.contents {
  background: url(../img/movie/movie-bg_pc.jpg) no-repeat;
  background-size: cover;
  background-position: center top;
  padding: min(6.588579795vw, 90px) 0 min(4.392387vw, 60px);
  margin-top: min(6.588579795vw, 90px);
}

@media (max-width: 768px) {
  .contents {
    padding: 60px 0 20px;
    margin-top: 0;
    background: url(../img/movie/movie-bg_sp.jpg) no-repeat;
    background-size: cover;
    background-position: center top;
  }
}

.contents .sec_inner .sec_ttl {
  position: relative;
}

@media (max-width: 768px) {
  .contents .sec_inner .sec_ttl {
    padding-top: 55px;
  }
}

.contents .sec_inner .sec_ttl .title {
  font-family: var(--text-fif);
  font-size: min(3.07467057101vw, 4.2rem);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2;
  color: #fff;
}

@media (max-width: 768px) {
  .contents .sec_inner .sec_ttl .title {
    font-size: 3.2rem;
  }
}

.contents .sec_inner .sec_ttl .cap {
  font-size: min(1.024890190336vw, 1.4rem);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  color: #fff;
}

@media (max-width: 768px) {
  .contents .sec_inner .sec_ttl .cap {
    font-size: 1.5rem;
    margin-top: 13px;
  }
}

/* ↑↑↑ .contents ↑↑↑ */

/* ↓↓↓ container ↓↓↓ */
.container {
  width: 100%;
  margin-top: min(3.660322vw, 50px);
  display: flex;
  flex-wrap: wrap;
  gap: min(9.150805vw, 125px) min(2.928258vw, 40px);

  @media (max-width: 768px) {
    flex-direction: column;
    gap: 65px;
    margin-top: 40px;
  }

  .item {
    width: min(38.799414vw, 530px);

    @media (max-width: 768px) {
      width: 100%;
    }

    .movie {
      width: 100%;
      aspect-ratio: 16/9;

      iframe {
        display: block;
        width: 100%;
        aspect-ratio: 16/9;
      }
    }

    .date {
      width: 100%;
      margin-top: min(2.562225vw, 35px);
      display: block;
      font-size: min(1.464129vw, 20px);
      font-weight: bold;
      letter-spacing: 0;
      line-height: 1;
      color: #fff;

      @media (max-width: 768px) {
        margin-top: 17px;
        font-size: 14px;
      }
    }

    .cap {
      display: block;
      margin-top: min(1.830161vw, 25px);
      font-size: min(2.196193vw, 30px);
      font-weight: bold;
      letter-spacing: 0;
      line-height: 1;
      background: linear-gradient(135deg, #00db00 0%, #00e9f0 50%);
      color: transparent;
      background-clip: text;
      text-fill-color: transparent;

      @media (max-width: 768px) {
        margin-top: 10px;
        font-size: 20px;
      }

      .-small {
        font-size: min(1.7569546120058566vw, 24px);
        @media (max-width: 768px) {
          font-size: 16px;
        }
      }
    }

    .text {
      display: block;
      width: 100%;
      margin-top: min(2.562225vw, 35px);
      font-size: min(1.24451vw, 17px);
      font-weight: bold;
      letter-spacing: 0;
      line-height: 2;
      text-align: justify;
      word-break: break-all;
      color: #fff;

      @media (max-width: 768px) {
        margin-top: 10px;
        font-size: 13px;
      }
    }
  }
}

/* ↑↑↑ container ↑↑↑ */

/* ↓↓↓ sns_link_group ↓↓↓ */
.sns_link_group {
  width: fit-content;
  display: flex;
  gap: min(1.0248901903367496vw, 14px);
  margin: min(10.980966vw, 150px) auto 0;

  .sns_link {
    display: block;
    width: min(3.6603221083455346vw, 50px);
  }
}

@media (max-width: 768px) {
  .sns_link_group {
    gap: 12px;
    margin: 75px auto 0;

    .sns_link {
      display: block;
      width: 38px;
    }
  }
}

/* ↑↑↑ sns_link_group ↑↑↑ */