@charset "UTF-8";

/* アーティスト一覧 */

h3 {
  position: relative;
  font-size: 36px;
  font-family: 'Zen Antique', serif;

}

/* 必要な処理らしい↓ */
.name1 {
  display: flex;
  /* flex-wrap: nowrap; */
}

/* アンダーバー＆矢印ここから */
h3 a {
  position: relative;
  text-decoration: none;
}

h3 a::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  color: #333;
  line-height: 1;
  width: 18px;
  height: 18px;
  border: 2px solid currentColor;
  border-left: 0;
  border-bottom: 0;
  box-sizing: border-box;
  transform: translateX(-25%) rotate(45deg);
  margin-left: 5px; /* 矢印とテキストの間隔 */
  position: absolute;
  top: 33%;
  left: 105%; /* テキストの後ろに移動 */
  animation: fadein 3.5s forwards;
}

/* フェードイン */
@keyframes fadein {
  0% {opacity: 0 ; left: 90%; }
  50%{opacity: 0 ; left: 100%; }
  100% {opacity: 1 ,left 110%}
}/* フェードインここまで */

/* h3 a:hover::before {
  opacity: 1;
  left: 110%; 
} */

h3 a::after {
  content: "";
  display: block;
  height: 1px;
  background-color: #333;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  transform: scaleX(0); /* アンダーバーを非表示にする */
  transform-origin: bottom right;
  transition: transform 300ms ease-out; /* アンダーバーのトランジション */
}

h3 a:hover::after {
  transform: scaleX(1); /* アンダーバーを表示する */
  transform-origin: bottom left;
}
/* アンダーバーここまで */

/* 狭画面 */
@media screen and (max-width:960px) {

}
  /* スマホ版 */
@media screen and (max-width:640px) {
  h2 {
    top: 30vh;
    top: 30dvh;
  }
  .pageArtist {
    height: 340px;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
}