@charset "UTF-8";

/*==================================== MV ==================================== */

.mv {
    position: relative;
    margin: 18rem 0 6.5rem;
}
@media (max-width: 768px) {
    .mv {
        margin: 12rem 0 5rem;
    }
}

/*============================ MV 画像スライド ============================ */

/* スライドする要素 */
.content_slide{
  width: 360px;
  height: auto;
  margin: 0 4px;
}
.content_slide span {
    font-size: 16px;
    color: #767373;
}
/* スライドレールの枠 */
.slideshow_wrap {
  overflow: hidden;
  display: flex;
  align-items: center;
  height: 100%;
}
/* content4つをまとめたスライドブロック */
.slideshow_2 {
  display: flex;
  -webkit-animation: loop-slide 50s infinite linear 1s both;
  animation: loop-slide 50s infinite linear 1s both;
}
@-webkit-keyframes loop-slide {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes loop-slide {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}
@media (max-width: 768px) {
    .content_slide{
        width: 240px;
        margin: 0 2px;
    }
}

/*============================ リード ============================ */

.read {
    position: relative;
    margin-bottom: 4rem;
}
@media (max-width: 768px) {
    .read {
        margin-bottom: 2rem;
    }
}

/*========================== コンセプト ========================== */

.concept {
    margin-bottom:5.5rem;
    padding: 12.5rem 0;
    background-image: url( "../images/top/concept_bg.webp");
    background-size:  cover;
    background-repeat: round;
}
.l-concept-slider {
    margin: 2rem 0 6.5rem;
}
.l_concept-flex{
    color: #fff;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 4.5rem;
}
.concept-text {
    width: 58%;
}
.concept-img {
    width: 42%;
}
.concept-img h4 {
    font-size: 1.5rem;
    font-weight: 300;
    padding-top: 2rem;
}
.concept-img p {
    font-size: 0.9rem;
}

@media (max-width: 768px) {
    .concept {
        margin-bottom: 2.5rem;
        padding: 7rem 0;
        background-image: url( "../images/top/concept_bg_sp.webp");
    }
    .l-concept .scroll-list li {
      font-size: 10vw!important;
    }
    .l-concept .scroll-list {
        height: 3rem;
        line-height: 3rem;
    }
    .l-concept-slider {
        margin: 1rem 0 3.5rem;
    }
    .l_concept-flex{
        flex-direction: column;
        gap: 2.5rem;
    }
    .concept-text, .concept-img {
        width: 100%;
    }
    .concept-img h4 {
        margin: 1rem 0 0.5rem;
        font-size: 1.3rem;
    }
}

/*========================== INDEX ========================== */

.index h2 {
    font-size: 5.5rem;
    line-height: 1;
    font-weight: 200;
    text-align: center;
}
.l-index-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    margin: 6.5rem 0;
}
.l-index-img {
    margin:0 auto;
    overflow:hidden;
}
.l-index-img img {
    transition:1s all;
}
.l-index-img :hover{
  transform:scale(1.05,1.05);
  transition:1s all;
}
.l-index-box {
    background: #f1f1f1;
}
.l-index-box .text{
    border-top: solid 2px #fff;
    text-align: center;
    padding: 2.5rem;
}
.l-index-box .text h3 {
    font-size: 1.5rem;
    font-weight: 400;
}
.l-index-box .text h4 {
    font-size: 0.8rem;
    font-weight: 400;
}
.l-index-box .text h5 {
    font-size: 1rem;
    font-weight: 400;
    margin-top: 1.5rem;
}

@media (max-width: 768px) {
   .l-index-grid {
       grid-template-columns: repeat(1, 1fr);
    }
    .index h2 {
        font-size: 3.5rem;
        font-weight: 100;
    }
    .l-index-grid {
        margin: 3.5rem 0 0;
    }
    .l-index-box .text {
        padding: 2rem 4%;
    }
    .l-index-box .text h3 {
        font-size: 1.3rem;
    }
    .l-index-box .text h5 {
        margin-top: 1rem;
    }
}


/*========================== アーティストズ ========================== */

.the-artists {
    position: relative;
    padding: 8rem 0;
    margin: 5rem 0;
}
.the-artists h2 {
    position: absolute;
    font-size: 12rem;
    font-weight: 100;
    top: 5%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 50;
    width: 100%;
    text-align: center;
}
.the-artists .wrapper {
  width: 100%;
  margin: -90px auto;
  
}
.the-artists .target {
  display: block;
  width: 100%;
  height: auto;
}

/* Animation */
.the-artists .wrapper {
  animation: floating-x 7.2s ease-in-out infinite alternate-reverse;
}
.the-artists .target {
  animation: floating-y 1.8s ease-in-out infinite alternate-reverse;
}
@keyframes floating-x {
  0% {
    transform: translateX(-2%);
  }
  100% {
    transform: translateX(2%);
  }
}
@keyframes floating-y {
  0% {
    transform: translateY(-3%);
  }
  100% {
    transform: translateY(3%);
  }
}

@media (max-width: 1440px) {
    .the-artists h2 {
        font-size: 6.5rem;
        top: 20%;
    }
}
@media (max-width: 768px) {
    .the-artists{
        padding: 8rem 0 4rem;
        margin: 2rem 0;
    }
    .the-artists h2 {
        font-size: 3.5rem;
        top: 20%;
    }
}