@charset "UTF-8";
.u-font-amiri {
  font-family: "Amiri", YakuHanJPs, "游明朝", "YuMincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ 明朝", "ＭＳ Ｐ明朝", serif;
}

.u-font-roboto {
  font-family: "Roboto", YakuHanJPs, "游ゴシック", YuGothic, "Helvetica", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "Helvetica Neue", Arial, sans-serif;
}

.u-fs-1em {
  font-size: 0.1em;
}

.u-fs-2em {
  font-size: 0.2em;
}

.u-fs-3em {
  font-size: 0.3em;
}

.u-fs-4em {
  font-size: 0.4em;
}

.u-fs-5em {
  font-size: 0.5em;
}

.u-fs-6em {
  font-size: 0.6em;
}

.u-fs-7em {
  font-size: 0.7em;
}

.u-fs-8em {
  font-size: 0.8em;
}

.u-fs-9em {
  font-size: 0.9em;
}

@media screen and (min-width: 961px) {
  .u-hov-alpha {
    cursor: pointer;
    transition: opacity 0.65s cubic-bezier(0.165, 0.84, 0.44, 1);
  }
  .u-hov-alpha:hover {
    opacity: 0.6;
  }
}

.p-song_list {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-flow: row dense;
  position: relative;
}
@media screen and (max-width: 1100px) {
  .p-song_list {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media screen and (min-width: 1600px) {
  .p-song_list {
    grid-template-columns: repeat(8, 1fr);
  }
}
@media screen and (min-width: 2000px) {
  .p-song_list {
    grid-template-columns: repeat(10, 1fr);
  }
}
@media screen and (min-width: 2300px) {
  .p-song_list {
    grid-template-columns: repeat(12, 1fr);
  }
}
@media screen and (min-width: 2600px) {
  .p-song_list {
    grid-template-columns: repeat(14, 1fr);
  }
}
@media screen and (min-width: 2900px) {
  .p-song_list {
    grid-template-columns: repeat(16, 1fr);
  }
}
@media screen and (min-width: 3200px) {
  .p-song_list {
    grid-template-columns: repeat(18, 1fr);
  }
}
@media screen and (min-width: 3500px) {
  .p-song_list {
    grid-template-columns: repeat(20, 1fr);
  }
}
@media screen and (min-width: 3800px) {
  .p-song_list {
    grid-template-columns: repeat(22, 1fr);
  }
}
@media screen and (min-width: 4100px) {
  .p-song_list {
    grid-template-columns: repeat(24, 1fr);
  }
}
@media screen and (min-width: 4400px) {
  .p-song_list {
    grid-template-columns: repeat(26, 1fr);
  }
}
@media screen and (min-width: 4700px) {
  .p-song_list {
    grid-template-columns: repeat(28, 1fr);
  }
}
@media screen and (min-width: 5000px) {
  .p-song_list {
    grid-template-columns: repeat(30, 1fr);
  }
}
.p-song_list__item {
  grid-column: span 2;
  grid-row: span 2;
  display: block;
  position: relative;
}
.p-song_list__item::before {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  border-right: 1px solid #303642;
  border-bottom: 1px solid #303642;
  box-sizing: border-box;
}
.p-song_list__item.is-large {
  grid-column: span 4;
  grid-row: span 4;
}
@media screen and (min-width: 1101px) {
  .p-song_list__item.is-large {
    grid-column: span 3;
    grid-row: span 3;
  }
}
@media screen and (min-width: 1600px) {
  .p-song_list__item.is-large {
    grid-column: span 4;
    grid-row: span 4;
  }
}