@charset "UTF-8";

body:not(.loaded) {
  opacity: 0;
  pointer-events: none;
}

body.loaded {
  opacity: 1;
  transition: opacity 0.8s ease;
}

/* MV  */
.mv {
  .bg_video {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
    pointer-events: none;
  }

  .mask_overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: -1;
    pointer-events: none;
  }

  .black_overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index: -1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s linear;
  }

  .hero {
    height: 83vh;
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: start;
    text-align: center;
    color: white;

    p {
      padding: 140px 0 60px;
      font-size: 20px;
      font-weight: bold;
    }

    h2 {
      font-size: 36px;
      font-weight: bold;
    }
  }

  .desc {
    height: 110vh;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    background: transparent;
    text-align: center;

    .desc_inner {
      display: flex;
      flex-direction: column;
      gap: 30px;

      p {
        font-size: 20px;
        font-weight: bold;
      }
    }
  }
}

/* CREATERS */
.creaters {
  padding: 20px 0 100px;
  background-color: #1e1e1e;
  color: #fff;

  .creaters_inner {
    .title_desc {
      margin: 52px auto;
    }

    .creaters_grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 22px;
      margin: 0 auto 60px;

      .creaters_item {
        border-radius: 12px;
        overflow: hidden;

        .creaters_thumb {
          position: relative;
		.zoom_img::before {
		    content: "";
		    display: block;
		    background-image: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 70%, rgba(0, 0, 0, 0.8) 100%);
		    position: absolute;
		    width: 100%;
		    height: 60%;
		    left: 0;
		    bottom: 0;
                        z-index: 1;
		}
          img {
            display: block;
            width: 100%;
            height: 25em;
            object-fit: cover;
          }


          .creaters_info {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 20px;
            color: #fff;
                        z-index: 3;

            .creaters_info_title {
              font-size: 20px;
              font-weight: bold;
              margin-bottom: 27px;
            }

            .creaters_info_role {
              font-size: 10px;
              line-height: 1.7;
            }
            .creaters_info_name {
              margin-top: 5px;
              font-size: 16px;
            }
          }
        }
      }
    }

    .creaters_link {
      display: flex;
      justify-content: center;

      a {
        min-width: 200px;
        height: 40px;
        line-height: 40px;
        padding: 0 55px;
        font-size: 16px;
      }
    }
  }
}

/* title */
.title_wrap {
  margin-top: 0;
  margin-bottom: 32px;

  &.title_flex {
    display: flex;
    gap: 24px;
    justify-content: left;
    align-items: baseline;

    .title_desc {
      width: auto;
      margin: 0;
    }
  }

  .title_desc {
    margin: 10px auto;
    text-align: center;
    font-size: 16px;
    line-height: 2;
  }

  .title_desc_bold {
    margin: 10px auto;
    line-height: 2;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    color: #000;
  }

  .title_link {
    margin-left: auto;
  }

  h2 {
    line-height: 1.5;
    font-size: 30px;
    text-align: center;

    small {
      font-size: 83%;
    }
  }
}

/* section_header */
.section_header {
  display: flex;
  flex-direction: column;
  text-align: left;

  .section_header_title {
    font-size: 20px;
    font-weight: bold;
    color: #fff;
  }

  .select_tag {
    margin: 35px 0 30px;

    ul {
      list-style: none;
      padding: 0;
      display: flex;
      flex-wrap: wrap;
      gap: 24px 15px;

      li {
        a {
          display: block;
          padding: 5px 35px 3px;
          text-align: center;
          font-weight: bold;
          font-size: 13px;
          color: #fff;
          white-space: nowrap;
          border-radius: 50px;
          border: 1px solid #fff;
          cursor: pointer;
        }
      }
    }
  }
}

@media screen and (max-width: 768px) {
  /* MV */
  .mv {
    .hero {
      height: 50vh;

      p {
        padding: 30vh 0 3vh;
        font-size: clamp(18px, 5.3vw, 20px);
      }

      h2 {
        font-size: clamp(28px, 8vw, 35px);
      }
    }

    .desc {
      height: 100vh;

      .desc_inner {
        p {
          font-size: clamp(16px, 4.3vw, 18px);
        }
      }
    }
  }

  /* CREATERS */
  .creaters {
    padding: 5% 2%;

    .creaters_inner {
      .creaters_grid {

        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        margin: 0 auto 50px;
/*
		display: flex;
		flex-wrap: wrap;
		gap: 20px;
		margin: 0 auto 50px;
*/


        .creaters_item {
                    width: 100%;
          .creaters_thumb {
		display: block;
		width: 100%;
		img{height: 20em;}
            .creaters_info {
                            padding: 10px 5px;
                            display: block;


              .creaters_info_title {
		/*font-size: 3.8vw;*/
		font-size: 14px;
		margin-bottom: 1em;
              }

              .creaters_info_role {
                font-size: clamp(10px, 3vw, 12px);
              }
              .creaters_info_name {
                margin-top: 0;
                font-size: clamp(14px, 4.2vw, 16px);
              }
            }
          }
        }
      }

      .creaters_link {
        a {
          min-width: 200px;
          height: 40px;
          line-height: 40px;
          padding: 0 55px;
          font-size: 16px;
        }
      }
    }
  }

  /* title */
  .title_wrap {
    margin-bottom: 20px;

    &.title_flex {
      position: relative;
      flex-wrap: wrap;
      align-items: center;
      gap: 10px;

      .title_desc {
        margin-top: 6px;
        font-size: 12px;
        text-align: left;
      }
    }

    .title_desc {
      margin: 30px auto;
      line-height: 1.8;
      font-size: clamp(12px, 2.5vw, 16px);
    }

    .title_desc_bold {
      font-size: clamp(12px, 2.5vw, 16px);
    }

    h2 {
      font-size: clamp(18px, 5vw, 30px);
    }
  }

  .section_header {
    .section_header_title {
      font-size: clamp(18px, 5.3vw, 20px);
    }

    .select_tag {
      margin: 30px 0;

      ul {
        gap: 15px 7px;

        li {
          a {
            padding: 5px 15px 3px;
            font-size: clamp(11px, 3.2vw, 13px);
          }
        }
      }
    }
  }
}