/* ページ全体の余白をなくす場合 */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

.font-yumincho {
  font-family: 'Noto Serif JP', serif;
}

.font-noto {
  font-family: "Noto Sans JP", sans-serif;
}


/* 画面全体を覆う親コンテナ */
.bg-video-wrap {
  width: 100%;
  height: auto;       /* 背景として扱うため後ろに */
  overflow: hidden;    /* はみ出た部分を隠す */
}

/* 動画自体を画面いっぱいに敷き詰める */
.bg-video-wrap video {
  width: 100%;
  height: auto;
  object-fit: contain;   /* 短辺基準で余白なく表示 */
}

.bg-custom-hero {
  background-image: url("./img/image_1.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.form-area-bg {
  background-image: url("./img/footer_image.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}


@keyframes gentle-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.animate-gentle-bounce {
  animation: gentle-bounce 1.6s ease-in-out infinite;
}






/*------------------
 setting
------------------*/
.section-wrap {
  position: relative;
  padding: 48px 0;
}
@media (min-width: 768px) {
  .section-wrap {
    padding: 60px 0;
  }
}

.section-ttl {
  margin-bottom: 28px;
}
@media (min-width: 768px) {
  .section-ttl {
    margin-bottom: 48px;
  }
}
.section-ttl h2 {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.05rem;
  color: #46A9A3;
}
@media (min-width: 768px) {
  .section-ttl h2 {
    font-size: 16px;
  }
}
.section-ttl p {
  font-size: 48px;
  font-weight: 900;
  line-height: 1.2;
  text-transform: uppercase;
  font-family: Futura, sans-serif;
}
@media (min-width: 768px) {
  .section-ttl p {
    font-size: 80px;
  }
}
.section-ttl.white h2,
.section-ttl.white p {
  color: #fff;
}
.section-ttl.outline-ttl p {
  color: transparent;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #fff;
}

a {
  transition: all 0.2s ease-in;
}
a:hover, a:focus, a:hover img, a:focus img {
  opacity: 0.8;
  transition: all ease 0.25;
}

.btn_area a::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  background: #333;
  transform-origin: 100% 50%;
  transform: scaleX(0);
  transition: transform ease .3s;
}
.btn_area a:hover {
  color: #fff;
}
.btn_area a:hover::before {
  transform-origin: 0% 50%;
  transform: scaleX(1);
}

.list1 a:hover::before {
  transform-origin: 0% 50%;
  transform: scaleX(1);
}

/*------------------
 artist
------------------*/
.section-artist {
  background-image: url(../img/artist_bg.png);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
}
.section-artist .artist-inner__image {
  width: 150px;
}
@media (min-width: 768px) {
  .section-artist .artist-inner__image {
    width: 240px;
  }
}
.section-artist .artist-inner__txt {
  padding-left: 12px;
  width: calc(100% - 150px);
}
@media (min-width: 768px) {
  .section-artist .artist-inner__txt {
    padding-left: 16px;
    width: calc(100% - 240px);
  }
}
.section-artist .artist-inner__txt .artist-info dt,
.section-artist .artist-inner__txt .artist-info dd {
  font-size: 12px;
}
@media (min-width: 768px) {
  .section-artist .artist-inner__txt .artist-info dt,
  .section-artist .artist-inner__txt .artist-info dd {
    font-size: 14px;
  }
}
.section-artist .artist-inner__txt .artist-info dt {
  width: 64px;
  padding-right: 8px;
  margin-right: 8px;
  border-right: solid 1px #DFDFDF;
}
@media (min-width: 768px) {
  .section-artist .artist-inner__txt .artist-info dt {
    width: 80px;
  }
}
.section-artist .artist-inner__txt .artist-info dd {
  width: calc(100% - 64px - 8px);
}
@media (min-width: 768px) {
  .section-artist .artist-inner__txt .artist-info dd {
    width: calc(100% - 80px - 8px);
  }
}


.horizontal-wrapper {
  height: 300px
  position: relative;
}
.horizontal-scroll {
  display: flex;
  height: 100%;
  width: calc(5 * 33.333vw); /* 3枚表示したいので1枚=1/3画面 */
}

.card {
  width: 33.333vw;
  flex-shrink: 0;
  padding: 1rem;
}


@media (max-width: 768px) {
  .horizontal-scroll {
    display: flex;
    flex-wrap: nowrap; /* ← ここ追加！！ */
    height: 100%;
    width: calc(8.05 * 100vw); /* スマホでは1枚＝100vwと想定 */
  }
  
  .card {
    width: 100vw; /* スマホでは1枚ずつ表示 */
    flex-shrink: 0;
    padding: 1rem;
  }
  
}

/* 最初は両方非表示にしておく */
.img-pc,
.img-sp {
  display: none;
  width: 100%;
  height: auto;
  margin: 0 auto;
}

/* PC用画像：768px以上で表示 */
@media screen and (min-width: 768px) {
  .img-pc {
    display: block;
  }
}

/* スマホ用画像：768px未満で表示 */
@media screen and (max-width: 767px) {
  .img-sp {
    display: block;
  }
}

.video-pc,
.video-sp {
  display: none;
}

/* PC用（768px以上で表示） */
@media screen and (min-width: 768px) {
  .video-pc {
    display: block;
  }
}

/* スマホ用（767px以下で表示） */
@media screen and (max-width: 767px) {
  .video-sp {
    display: block;
  }
}



.clip-triangle {
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

 /* 初期状態：PC画像表示、SP画像非表示 */
 .section-pc {
  display: block;
  width: 100%;
  margin: auto;
}

.section-sp {
  display: none;
}

/* 768px以下：SP画像表示、PC画像非表示 */
@media screen and (max-width: 768px) {
  .section-pc {
    display: none;
  }

  .section-sp {
    display: block;
  }
}