@charset "UTF-8";
.p-music {
  display: block;
  position: relative;
  padding-top: 4rem;
}
@media screen and (max-width: 960px) {
  .p-music {
    padding-top: 2.8rem;
  }
}
.p-music__header {
  display: block;
  position: relative;
  margin-bottom: 5.4rem;
}
@media screen and (max-width: 960px) {
  .p-music__header {
    margin-bottom: 3.4rem;
  }
}
.p-music__inner {
  display: block;
  position: relative;
}

.p-music_nav {
  display: block;
  position: relative;
}
.p-music_nav__list {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.p-music_nav__list-item {
  min-width: 27rem;
  display: block;
  position: relative;
}
@media screen and (max-width: 960px) {
  .p-music_nav__list-item {
    min-width: 17.5rem;
  }
}
.p-music_nav__list-item + .p-music_nav__list-item::before {
  content: "";
  width: 3px;
  height: 50%;
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
  background: var(--color-black);
}

.p-music_nav_btn {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  padding: 0 3rem;
}
@media screen and (max-width: 960px) {
  .p-music_nav_btn {
    padding: 0 1rem;
  }
}
.p-music_nav_btn__text {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  display: block;
  position: relative;
  font-size: 4rem;
  line-height: 1;
  font-weight: 700;
  font-family: "din-2014", source-han-sans-japanese, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
  letter-spacing: -0.1rem;
  text-align: center;
  overflow: hidden;
}
.is-music-current .p-music_nav_btn__text {
  pointer-events: none;
}
@media screen and (max-width: 960px) {
  .p-music_nav_btn__text {
    font-size: 2.6rem;
  }
}
.p-music_nav_btn__text::before {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  border-bottom: 4.5px solid var(--color-black);
  opacity: 0;
}
@media screen and (max-width: 960px) {
  .p-music_nav_btn__text::before {
    border-bottom-width: 0.2rem;
  }
}
.is-music-current .p-music_nav_btn__text::before {
  opacity: 1;
}
.p-music_nav_btn__text::after {
  content: attr(data-text);
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(-100%);
  color: var(--color-white);
  -webkit-text-stroke: 0.5px var(--color-text);
  padding: 0.8rem 0;
}
@media (hover: hover) and (pointer: fine) {
  .p-music_nav_btn__text::after {
    transition: transform 0.5s var(--ease_inout);
  }
  .p-music_nav_btn__text:hover::after {
    transform: translateY(0);
  }
}
.p-music_nav_btn__text-word {
  display: block;
  position: relative;
  padding: 0.8rem 0;
}
@media screen and (max-width: 960px) {
  .p-music_nav_btn__text-word {
    padding: 0.6rem 0;
  }
}
@media (hover: hover) and (pointer: fine) {
  .p-music_nav_btn__text-word {
    transition: transform 0.5s var(--ease_inout);
  }
  .p-music_nav_btn__text:hover .p-music_nav_btn__text-word {
    transform: translateY(100%);
  }
}

.p-music_content {
  display: block;
  position: relative;
}
.p-music_content__container {
  width: 100%;
  display: block;
  position: relative;
  margin: 0 auto;
}
.p-music_content__header {
  display: block;
  position: relative;
  margin-bottom: 5rem;
}
@media screen and (max-width: 960px) {
  .p-music_content__header {
    margin-bottom: 3.5rem;
  }
}
.p-music_content__title {
  display: block;
  position: relative;
  font-size: 5.2rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}
@media screen and (max-width: 960px) {
  .p-music_content__title {
    font-size: 3.5rem;
  }
}
.p-music_content__artist {
  display: block;
  position: relative;
  margin-top: -0.8rem;
  font-size: 3rem;
  letter-spacing: 0;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}
@media screen and (max-width: 960px) {
  .p-music_content__artist {
    margin-top: -0.4rem;
    font-size: 2.2rem;
  }
}
.p-music_content__artist small {
  font-size: 0.5em;
}
.p-music_content__info {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  display: block;
  position: relative;
  margin: 1.2rem auto 0;
  padding: 0.3rem 3rem;
  font-size: 1.6rem;
  letter-spacing: 0.05rem;
  line-height: 1.5;
  text-align: center;
}
@media screen and (max-width: 960px) {
  .p-music_content__info {
    padding: 0.15rem 1.5rem;
    margin-top: 0.5rem;
    font-size: 1.4rem;
  }
}
.p-music_content__info small {
  font-size: 0.5em;
}
.p-music_content__info::before {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  border: 1px solid var(--color-black);
}
.p-music_content__visual {
  display: block;
  position: relative;
  margin-bottom: 3.5rem;
}
@media screen and (max-width: 960px) {
  .p-music_content__visual {
    margin-bottom: 2.4rem;
  }
}
.p-music_content__visual:not(:first-child) {
  margin-top: 9.4rem;
}
.p-music_content__profile {
  display: block;
  position: relative;
}

.p-music_profile {
  display: block;
  position: relative;
}
.p-music_profile__name {
  display: block;
  position: relative;
  margin-bottom: 3rem;
  font-size: 3rem;
  letter-spacing: 0;
  font-weight: 700;
}
@media screen and (max-width: 960px) {
  .p-music_profile__name {
    margin-bottom: 2.4rem;
    font-size: 2rem;
  }
}
.p-music_profile__data {
  display: block;
  position: relative;
}
@media screen and (min-width: 961px) {
  .p-music_profile__data {
    display: grid;
    grid-template-columns: 9rem 1fr;
    gap: 1rem;
  }
}
.p-music_profile__data + .p-music_profile__data {
  margin-top: 4rem;
}
.p-music_profile__data-cap {
  display: block;
  position: relative;
  font-size: 1.5rem;
  font-family: "din-2014", source-han-sans-japanese, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
  letter-spacing: 0;
  color: var(--color-red);
}
@media screen and (max-width: 960px) {
  .p-music_profile__data-cap {
    margin-bottom: 0.6rem;
    font-size: 1.5rem;
  }
}
.p-music_profile__data-text {
  display: block;
  position: relative;
  font-size: 1.5rem;
  line-height: 1.65;
  letter-spacing: 0.05rem;
}
@media screen and (max-width: 960px) {
  .p-music_profile__data-text {
    font-size: 1.4rem;
    line-height: 1.8;
  }
}

.p-music_streaming {
  display: block;
  position: relative;
  padding: 10rem 0;
  margin-top: 13rem;
}
@media screen and (max-width: 960px) {
  .p-music_streaming {
    padding: 8rem 0;
    margin-top: 9rem;
  }
}
.p-music_streaming + .p-music_streaming {
  margin-top: 0;
}
.p-music_streaming:last-child {
  margin-bottom: -18.5rem;
}
@media screen and (max-width: 960px) {
  .p-music_streaming:last-child {
    margin-bottom: -8.2rem;
  }
}
.p-music_streaming::before {
  content: "";
  width: 100vw;
  height: 100%;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  background: linear-gradient(to top, #fff6f7 0%, #fff6f7 50%, rgba(255, 246, 247, 0) 100%) no-repeat 50% 100%/100% 300%;
}
.p-music_streaming__container {
  width: 100%;
  display: block;
  position: relative;
  margin: 0 auto;
}
.p-music_streaming__header {
  display: block;
  position: relative;
  margin-bottom: 2rem;
}
@media screen and (max-width: 960px) {
  .p-music_streaming__header {
    margin-bottom: 1.4rem;
  }
}
.p-music_streaming__title {
  display: block;
  position: relative;
  font-size: 2rem;
  font-weight: 700;
}
.p-music_streaming__inner {
  display: block;
  position: relative;
  margin-bottom: 8.2rem;
}
@media screen and (min-width: 961px) {
  .p-music_streaming__inner {
    display: grid;
    gap: 5rem;
    grid-template-columns: 40rem 1fr;
  }
}
@media screen and (max-width: 960px) {
  .p-music_streaming__inner {
    margin-bottom: 2.4rem;
  }
}
.p-music_streaming__inner:last-child {
  margin-bottom: 0;
}
.p-music_streaming__visual {
  display: block;
  position: relative;
}
@media screen and (max-width: 960px) {
  .p-music_streaming__visual {
    margin-bottom: 2rem;
  }
}
.p-music_streaming__name {
  display: block;
  position: relative;
  font-size: 4.2rem;
  font-weight: 700;
  line-height: 1.5;
}
@media screen and (max-width: 960px) {
  .p-music_streaming__name {
    font-size: 3.2rem;
  }
}
.p-music_streaming__artist {
  display: block;
  position: relative;
  margin-top: -0.4rem;
  font-size: 2.6rem;
  letter-spacing: 0;
  font-weight: 700;
  line-height: 1.5;
}
@media screen and (max-width: 960px) {
  .p-music_streaming__artist {
    margin-top: 0.4rem;
    font-size: 2rem;
  }
}
.p-music_streaming__artist small {
  font-size: 0.5em;
}
.p-music_streaming__cap {
  display: block;
  position: relative;
  margin-top: 5rem;
  margin-bottom: 1rem;
  font-size: 2rem;
  letter-spacing: 0.1rem;
  font-weight: 500;
  line-height: 1.5;
}
@media screen and (max-width: 960px) {
  .p-music_streaming__cap {
    margin-top: 3.4rem;
    font-size: 1.8rem;
  }
}
.p-music_streaming__btn {
  width: 30rem;
  min-height: 6rem;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  color: var(--color-white);
  background: var(--color-black);
  overflow: hidden;
}
@media screen and (max-width: 960px) {
  .p-music_streaming__btn {
    width: 26rem;
    min-height: 5.4rem;
  }
}
@media (hover: hover) and (pointer: fine) {
  .p-music_streaming__btn {
    transition: background-color 0.5s var(--ease_out);
  }
  .p-music_streaming__btn:hover {
    background-color: var(--color-red);
  }
}
.p-music_streaming__btn-text {
  display: block;
  position: relative;
  font-size: 1.6rem;
}
@media screen and (max-width: 960px) {
  .p-music_streaming__btn-text {
    font-size: 1.4rem;
  }
}
.p-music_streaming__btn-arrow {
  width: 3.5rem;
  display: block;
  position: absolute;
  top: 50%;
  right: 3rem;
  transform: translate(50%, -50%);
  filter: invert(1);
}
@media screen and (max-width: 960px) {
  .p-music_streaming__btn-arrow {
    width: 3rem;
  }
}