@charset "UTF-8";
@-webkit-keyframes spin-right {
  0% {
    transform: rotate(0deg); /* 初期位置 */
  }
  100% {
    transform: rotate(360deg); /* 360度回転 */
  }
}
@keyframes spin-right {
  0% {
    transform: rotate(0deg); /* 初期位置 */
  }
  100% {
    transform: rotate(360deg); /* 360度回転 */
  }
}
@-webkit-keyframes spin-left {
  0% {
    transform: rotate(0deg); /* 初期位置 */
  }
  100% {
    transform: rotate(-360deg); /* 360度回転 */
  }
}
@keyframes spin-left {
  0% {
    transform: rotate(0deg); /* 初期位置 */
  }
  100% {
    transform: rotate(-360deg); /* 360度回転 */
  }
}
@-webkit-keyframes spin-right-center {
  0% {
    transform: translate(-50%, -50%) rotate(0deg); /* 初期位置 */
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg); /* 360度回転 */
  }
}
@keyframes spin-right-center {
  0% {
    transform: translate(-50%, -50%) rotate(0deg); /* 初期位置 */
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg); /* 360度回転 */
  }
}
@-webkit-keyframes arrow-fade {
  0% {
    fill: rgba(255, 255, 255, 0); /* 初期位置 */
  }
  40% {
    fill: #B100FF;
  }
  80% {
    fill: #fff;
  }
  100% {
    fill: #fff;
  }
}
@keyframes arrow-fade {
  0% {
    fill: rgba(255, 255, 255, 0); /* 初期位置 */
  }
  40% {
    fill: #B100FF;
  }
  80% {
    fill: #fff;
  }
  100% {
    fill: #fff;
  }
}
@-webkit-keyframes scaleFit {
  0% {
    transform: scale(0.5); /* 初期位置 */
  }
  75% {
    transform: scale(1.03); /* 初期位置 */
  }
  100% {
    transform: scale(1); /* 初期位置 */
  }
}
@keyframes scaleFit {
  0% {
    transform: scale(0.5); /* 初期位置 */
  }
  75% {
    transform: scale(1.03); /* 初期位置 */
  }
  100% {
    transform: scale(1); /* 初期位置 */
  }
}
@-webkit-keyframes poemSlide {
  0% {
    transform: translateX(-50px);
  }
  100% {
    transform: translateX(0px);
  }
}
@keyframes poemSlide {
  0% {
    transform: translateX(-50px);
  }
  100% {
    transform: translateX(0px);
  }
}
@-webkit-keyframes fontChange {
  0% {
    font-family: "DotGothic16", sans-serif;
  }
  80% {
    font-family: "Zen Old Mincho", serif;
    transform: skewY(5deg) scale(1.2);
  }
  100% {
    font-family: "Shippori Antique", sans-serif;
    transform: skewY(0deg);
    font-weight: normal;
  }
}
@keyframes fontChange {
  0% {
    font-family: "DotGothic16", sans-serif;
  }
  80% {
    font-family: "Zen Old Mincho", serif;
    transform: skewY(5deg) scale(1.2);
  }
  100% {
    font-family: "Shippori Antique", sans-serif;
    transform: skewY(0deg);
    font-weight: normal;
  }
}
@-webkit-keyframes albumAnime {
  0% {
    background: #fff;
  }
  20% {
    background: #8337E6;
  }
  40% {
    background: #831550;
  }
  60% {
    background: #FB33BF;
  }
  80% {
    background: #61C3BB;
  }
  100% {
    background: #fff;
  }
}
@keyframes albumAnime {
  0% {
    background: #fff;
  }
  20% {
    background: #8337E6;
  }
  40% {
    background: #831550;
  }
  60% {
    background: #FB33BF;
  }
  80% {
    background: #61C3BB;
  }
  100% {
    background: #fff;
  }
}
/*=============================================================
 tools
=============================================================*/
.page__ttlBox__title .glitch {
  background-image: url("../img/album/title-pc.png");
}
@media only screen and (max-width: 768px) {
  .page__ttlBox__title .glitch {
    background-image: url("../img/album/title-sp.png");
  }
}
.page .album__deco {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.page .album__deco__item {
  position: absolute;
}
.page .album__deco .deco1 {
  top: 2356px;
  left: calc(50% - 881px);
  width: 116px;
}
@media only screen and (max-width: 1350px) {
  .page .album__deco .deco1 {
    top: 174.5185185185vw;
    left: calc(50% - 65.2592592593vw);
    width: 8.5925925926vw;
  }
}
@media only screen and (max-width: 768px) {
  .page .album__deco .deco1 {
    top: 310.15625vw;
    left: 1.5625vw;
    width: 10.9375vw;
  }
}
.page .album__deco .deco2 {
  top: 395px;
  left: calc(50% - 1046px);
  transform: rotate(170deg);
  width: 417px;
}
@media only screen and (max-width: 1350px) {
  .page .album__deco .deco2 {
    top: 29.2592592593vw;
    left: calc(50% - 77.4814814815vw);
    width: 30.8888888889vw;
  }
}
@media only screen and (max-width: 768px) {
  .page .album__deco .deco2 {
    top: 125.46875vw;
    left: -10.625vw;
    width: 32.8125vw;
  }
}
.page .album__deco .deco3 {
  top: 1513px;
  right: calc(50% - 1070px);
  transform: rotate(270deg);
  width: 550px;
}
@media only screen and (max-width: 1350px) {
  .page .album__deco .deco3 {
    top: 112.0740740741vw;
    right: calc(50% - 79.2592592593vw);
    width: 40.7407407407vw;
  }
}
@media only screen and (max-width: 768px) {
  .page .album__deco .deco3 {
    top: 493.4375vw;
    right: -10vw;
    width: 43.4375vw;
  }
}
.page .album__deco .deco4 {
  bottom: 662px;
  left: calc(50% - 894px);
  transform: rotate(77deg);
  width: 417px;
}
@media only screen and (max-width: 1350px) {
  .page .album__deco .deco4 {
    bottom: 49.037037037vw;
    left: calc(50% - 66.2222222222vw);
    width: 30.8888888889vw;
  }
}
@media only screen and (max-width: 768px) {
  .page .album__deco .deco4 {
    bottom: 78.4375vw;
    left: -6.875vw;
    width: 32.96875vw;
  }
}
.page .album__deco .deco5 {
  bottom: -130px;
  right: calc(50% - 804px);
  width: 479px;
}
@media only screen and (max-width: 1350px) {
  .page .album__deco .deco5 {
    bottom: -9.6296296296vw;
    right: calc(50% - 59.5555555556vw);
    width: 35.4814814815vw;
  }
}
@media only screen and (max-width: 768px) {
  .page .album__deco .deco5 {
    bottom: -9.84375vw;
    right: -2.34375vw;
    width: 37.8125vw;
  }
}
.page .album__block {
  position: relative;
  display: grid;
  grid-template-columns: 568px 600px;
  justify-content: space-between;
  margin-bottom: 125px;
}
@media only screen and (max-width: 1350px) {
  .page .album__block {
    grid-template-columns: 42.0740740741vw 44.4444444444vw;
    margin-bottom: 9.2592592593vw;
  }
}
@media only screen and (max-width: 768px) {
  .page .album__block {
    display: block;
    width: 87.5vw;
    margin-bottom: 20vw;
    z-index: 2;
  }
}
.page .album__block__thumb__list {
  display: flex;
  gap: 0 30px;
  margin-top: 30px;
}
@media only screen and (max-width: 1350px) {
  .page .album__block__thumb__list {
    gap: 0 2.2222222222vw;
    margin-top: 2.2222222222vw;
  }
}
@media only screen and (max-width: 768px) {
  .page .album__block__thumb__list {
    justify-content: center;
    gap: 0 4.6875vw;
    margin: 4.6875vw 0;
  }
}
.page .album__block__thumb__list__item {
  width: 100px;
  border: 2px solid transparent;
  box-sizing: border-box;
  background-color: #000;
  transition: all 0.25s ease;
}
@media only screen and (max-width: 1350px) {
  .page .album__block__thumb__list__item {
    width: 7.4074074074vw;
  }
}
@media only screen and (max-width: 768px) {
  .page .album__block__thumb__list__item {
    width: 15.625vw;
  }
}
.page .album__block__thumb__list__item img {
  transition: all 0.25s ease;
}
.page .album__block__thumb__list__item:hover img {
  opacity: 0.8;
}
.page .album__block__thumb__list__item.active {
  border-color: #B100FF;
  pointer-events: none;
}
.page .album__block__name {
  font-size: 20px;
  color: #fff;
  font-weight: bold;
  margin-bottom: 26px;
}
@media only screen and (max-width: 1350px) {
  .page .album__block__name {
    font-size: 1.4814814815vw;
    margin-bottom: 1.9259259259vw;
  }
}
@media only screen and (max-width: 768px) {
  .page .album__block__name {
    font-size: 3.75vw;
    margin-bottom: 3.125vw;
  }
}
.page .album__block__name span {
  padding: 0 0.4em 0.1em;
  background-color: #B100FF;
}
.page .album__block__type {
  font-size: 40px;
  color: #fff;
  font-weight: bold;
  padding: 0 0.4em;
  background-color: #B100FF;
  margin-bottom: 45px;
}
@media only screen and (max-width: 1350px) {
  .page .album__block__type {
    font-size: 3.2592592593vw;
    margin-bottom: 3.3333333333vw;
  }
}
@media only screen and (max-width: 768px) {
  .page .album__block__type {
    font-size: 6.875vw;
    margin-bottom: 7.8125vw;
  }
}
.page .album__block__info {
  position: relative;
  padding: 25px 25px 45px;
  margin-bottom: 50px;
}
@media only screen and (max-width: 1350px) {
  .page .album__block__info {
    padding: 1.8518518519vw 1.8518518519vw 3.3333333333vw;
    margin-bottom: 3.7037037037vw;
  }
}
@media only screen and (max-width: 768px) {
  .page .album__block__info {
    padding: 3.90625vw 3.90625vw 7.03125vw;
    margin-bottom: 4.6875vw;
  }
}
.page .album__block__info::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 5px);
  left: 0;
  display: block;
  width: 491px;
  height: 6px;
  background: url("../img/parts/frame_deco_text.png") no-repeat top left;
  background-size: contain;
}
@media only screen and (max-width: 1350px) {
  .page .album__block__info::before {
    bottom: calc(100% + basevw(5));
    width: basevw(491);
    height: basevw(6);
  }
}
@media only screen and (max-width: 768px) {
  .page .album__block__info::before {
    bottom: calc(100% + 0.9375vw);
    width: 76.71875vw;
    height: 0.9375vw;
  }
}
.page .album__block__info__data {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: 147px 1fr;
  align-items: center;
}
@media only screen and (max-width: 1350px) {
  .page .album__block__info__data {
    width: 10.8888888889vw 1fr;
  }
}
@media only screen and (max-width: 768px) {
  .page .album__block__info__data {
    grid-template-columns: 22.96875vw 1fr;
  }
}
.page .album__block__info__data dt {
  position: relative;
  font-size: 16px;
  color: #FFEB55;
  line-height: 50px;
  border-bottom: 1px solid #fff;
}
@media only screen and (max-width: 1350px) {
  .page .album__block__info__data dt {
    line-height: 3.7037037037vw;
  }
}
@media only screen and (max-width: 1000px) {
  .page .album__block__info__data dt {
    font-size: 1.6vw;
  }
}
@media only screen and (max-width: 768px) {
  .page .album__block__info__data dt {
    font-size: 2.5vw;
    line-height: 7.8125vw;
  }
}
.page .album__block__info__data dt::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 100%;
  width: 1px;
  height: 10px;
  background-color: #fff;
}
@media only screen and (max-width: 1350px) {
  .page .album__block__info__data dt::after {
    bottom: -0.3703703704vw;
    height: 0.7407407407vw;
  }
}
@media only screen and (max-width: 768px) {
  .page .album__block__info__data dt::after {
    bottom: -0.78125vw;
    height: 1.5625vw;
  }
}
.page .album__block__info__data dd {
  font-size: 20px;
  color: #fff;
  line-height: 50px;
  padding-left: 24px;
  border-bottom: 1px solid #fff;
}
@media only screen and (max-width: 1350px) {
  .page .album__block__info__data dd {
    line-height: 3.7037037037vw;
    padding-left: 1.7777777778vw;
  }
}
@media only screen and (max-width: 1000px) {
  .page .album__block__info__data dd {
    font-size: 2vw;
  }
}
@media only screen and (max-width: 768px) {
  .page .album__block__info__data dd {
    font-size: 3.125vw;
    line-height: 7.8125vw;
    padding-left: 3.75vw;
  }
}
.page .album__block__info__detail {
  position: relative;
  padding: 20px 0 0;
}
@media only screen and (max-width: 1350px) {
  .page .album__block__info__detail {
    padding: 1.4814814815vw 0 0;
  }
}
@media only screen and (max-width: 768px) {
  .page .album__block__info__detail {
    padding-top: 3.75vw;
  }
}
.page .album__block__info__detail p {
  font-size: 14px;
  line-height: 2;
  color: #fff;
}
@media only screen and (max-width: 1000px) {
  .page .album__block__info__detail p {
    font-size: 1.4vw;
  }
}
@media only screen and (max-width: 768px) {
  .page .album__block__info__detail p {
    font-size: 3.125vw;
  }
}
.page .album__block .btn {
  width: 540px;
}
@media only screen and (max-width: 1350px) {
  .page .album__block .btn {
    width: 40vw;
  }
}
@media only screen and (max-width: 768px) {
  .page .album__block .btn {
    width: 71.875vw;
  }
}
.page .album__block .btn__arrow {
  width: 56px;
}
@media only screen and (max-width: 1350px) {
  .page .album__block .btn__arrow {
    width: 4.1481481481vw;
  }
}
@media only screen and (max-width: 768px) {
  .page .album__block .btn__arrow {
    width: 8.75vw;
  }
}
.page .album__block.normal .album__block__name {
  color: #B100FF;
}
.page .album__block.normal .album__block__name span {
  background-color: #fff;
}
.page .album__block.normal .album__block__type {
  color: #B100FF;
  background-color: #fff;
}
.page .con__ttlBox__sub {
  margin-bottom: 6px;
}
@media only screen and (max-width: 768px) {
  .page .con__ttlBox__sub {
    margin-bottom: 0.9375vw;
  }
}
.page .con__ttlBox__title {
  line-height: 1.15;
}
.page .songs__block {
  margin-bottom: 128px;
}
@media only screen and (max-width: 1350px) {
  .page .songs__block {
    margin-bottom: 9.4814814815vw;
  }
}
@media only screen and (max-width: 768px) {
  .page .songs__block {
    margin-bottom: 20vw;
  }
}
.page .songs__block__list {
  margin: -20px 100px -10px;
}
@media only screen and (max-width: 1350px) {
  .page .songs__block__list {
    margin: -1.4814814815vw 7.4074074074vw -0.7407407407vw;
  }
}
@media only screen and (max-width: 768px) {
  .page .songs__block__list {
    margin: -3.125vw 3.125vw 2.34375vw;
  }
}
.page .songs__block__list__item {
  display: grid;
  grid-template-columns: 54px 1fr auto;
  align-items: center;
  gap: 0 30px;
  padding: 30px 0;
  border-bottom: 1px solid #B100FF;
}
@media only screen and (max-width: 1350px) {
  .page .songs__block__list__item {
    grid-template-columns: 4vw 1fr auto;
    gap: 0 2.2222222222vw;
    padding: 2.2222222222vw 0;
  }
}
@media only screen and (max-width: 768px) {
  .page .songs__block__list__item {
    grid-template-columns: 8.4375vw 1fr;
  }
}
.page .songs__block__list__item.new .songs__block__list__num::after {
  content: "";
  position: absolute;
  top: -19px;
  right: -10px;
  display: block;
  width: 27px;
  height: 29px;
  background: url("../img/album/new.png") no-repeat top center;
  background-size: contain;
}
@media only screen and (max-width: 1350px) {
  .page .songs__block__list__item.new .songs__block__list__num::after {
    top: -1.4074074074vw;
    right: -0.7407407407vw;
    width: 2vw;
    height: 2.1481481481vw;
  }
}
@media only screen and (max-width: 768px) {
  .page .songs__block__list__item.new .songs__block__list__num::after {
    top: -2.96875vw;
    right: -1.5625vw;
    width: 4.21875vw;
    height: 4.53125vw;
  }
}
.page .songs__block__list__num {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 54px;
  background: url("../img/album/bg_num.png") no-repeat top center;
  background-size: contain;
}
@media only screen and (max-width: 1350px) {
  .page .songs__block__list__num {
    height: 4vw;
  }
}
@media only screen and (max-width: 768px) {
  .page .songs__block__list__num {
    grid-area: 1/1/3/2;
    height: 8.4375vw;
  }
}
.page .songs__block__list__num span {
  font-size: 16px;
  font-family: "Dela Gothic One", sans-serif;
  color: #fff;
}
@media only screen and (max-width: 1000px) {
  .page .songs__block__list__num span {
    font-size: 1.6vw;
  }
}
@media only screen and (max-width: 768px) {
  .page .songs__block__list__num span {
    font-size: 2.5vw;
  }
}
@media only screen and (max-width: 768px) {
  .page .songs__block__list__song {
    grid-area: 1/2/2/3;
    margin-bottom: 2.34375vw;
  }
}
.page .songs__block__list__song__name {
  font-size: 20px;
  line-height: 1.5;
  color: #fff;
  margin-bottom: 10px;
}
@media only screen and (max-width: 1350px) {
  .page .songs__block__list__song__name {
    margin-bottom: 0.7407407407vw;
  }
}
@media only screen and (max-width: 1000px) {
  .page .songs__block__list__song__name {
    font-size: 2vw;
  }
}
@media only screen and (max-width: 768px) {
  .page .songs__block__list__song__name {
    font-size: 3.125vw;
    margin-bottom: 1.5625vw;
  }
}
.page .songs__block__list__song__info {
  font-size: 14px;
  color: #fff;
}
@media only screen and (max-width: 1000px) {
  .page .songs__block__list__song__info {
    font-size: 1.4vw;
  }
}
.page .songs__block__list__link {
  display: flex;
  gap: 0 60px;
}
@media only screen and (max-width: 1350px) {
  .page .songs__block__list__link {
    gap: 0 4.4444444444vw;
  }
}
@media only screen and (max-width: 768px) {
  .page .songs__block__list__link {
    grid-area: 2/2/3/3;
    gap: 0 9.375vw;
    margin-left: 3.125vw;
  }
}
.page .songs__block__list__link__item.btn {
  width: unset;
  height: 38px;
}
@media only screen and (max-width: 1350px) {
  .page .songs__block__list__link__item.btn {
    height: 2.8148148148vw;
  }
}
@media only screen and (max-width: 768px) {
  .page .songs__block__list__link__item.btn {
    height: 5.9375vw;
    margin: 0;
  }
}
.page .songs__block__list__link__item.btn::before, .page .songs__block__list__link__item.btn::after {
  width: 20px;
}
@media only screen and (max-width: 1350px) {
  .page .songs__block__list__link__item.btn::before, .page .songs__block__list__link__item.btn::after {
    width: 1.4814814815vw;
  }
}
@media only screen and (max-width: 768px) {
  .page .songs__block__list__link__item.btn::before, .page .songs__block__list__link__item.btn::after {
    width: 3.125vw;
  }
}
.page .songs__block__list__link__item.btn .btn__link {
  font-size: 16px;
  font-family: "Zen Kaku Gothic New", sans-serif;
  padding: 0 25px;
}
@media only screen and (max-width: 1000px) {
  .page .songs__block__list__link__item.btn .btn__link {
    font-size: 1.6vw;
  }
}
@media only screen and (max-width: 768px) {
  .page .songs__block__list__link__item.btn .btn__link {
    font-size: 2.5vw;
    padding: 0 3.90625vw;
  }
}
.page .songs__block__list__link__item.btn .btn__arrow {
  width: 8px;
}
@media only screen and (max-width: 1350px) {
  .page .songs__block__list__link__item.btn .btn__arrow {
    width: 0.5925925926vw;
  }
}
@media only screen and (max-width: 768px) {
  .page .songs__block__list__link__item.btn .btn__arrow {
    width: 1.25vw;
  }
}
.page .songs__block__list__link__item.btn .btn__arrow svg {
  width: 100%;
  height: auto;
}
.page .songs__block__list__link__item.btn:hover .btn__arrow {
  transform: translateY(-50%) translateX(5px) scale(0.8);
}
@media only screen and (max-width: 1350px) {
  .page .songs__block__list__link__item.btn:hover .btn__arrow {
    transform: translateY(-50%) translateX(0.3703703704vw) scale(0.8);
  }
}
@media only screen and (max-width: 768px) {
  .page .songs__block__list__link__item.btn:hover .btn__arrow {
    transform: translateY(-50%);
  }
}
.page .benefit__block {
  margin-bottom: 128px;
}
@media only screen and (max-width: 1350px) {
  .page .benefit__block {
    margin-bottom: 9.4814814815vw;
  }
}
@media only screen and (max-width: 768px) {
  .page .benefit__block {
    margin-bottom: 20vw;
  }
}
@media only screen and (max-width: 768px) {
  .page .benefit__block .con__ttlBox {
    margin-bottom: 6.25vw;
  }
}
.page .spotify {
  margin-bottom: 55px;
}
@media only screen and (max-width: 768px) {
  .page .spotify {
    position: relative;
    margin-bottom: 4.6875vw;
    z-index: 2;
  }
}