@charset "utf-8";

/* ====================================================
Font
==================================================== */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Sans+SC:wght@100..900&family=Noto+Sans+TC:wght@100..900&display=swap');

/* ====================================================
Common
==================================================== */
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}
body {
  color: #222222;
  font-size: 100%;
  font-style: normal;
  overflow-x: hidden;
}
.noto-sans-jp { font-family: "Noto Sans JP", sans-serif; }
.noto-sans-sc { font-family: "Noto Sans SC", sans-serif; }
.noto-sans-tc { font-family: "Noto Sans TC", sans-serif; }

.w-100 { width: 100%; }

.color-blue { color: #008896; }
.color-pink { color: #D60080; }

@media screen and (max-width: 750px) {
  .sp-none { display: none !important; }
}
@media screen and (min-width: 751px) {
  .pc-none { display: none !important; }
}

.white-space-nowrap { /* テキスト折り返し禁止 */
  white-space: nowrap;
}

/* -- Section Title
---------------------------------------------------------- */
.sec-title {
  display: flex;
  justify-content: center;
  align-items: center;
}
.sec-title:before {
  content: "";
  width: calc( (250 / 1280) * 100vw);
  height: calc( (250 / 1280) * 100vw);
  background: url("/hatsunemiku/img/dlc/common/title_left_bg.svg") left top no-repeat;
  background-size: cover;
  margin-right: calc( (30 / 1280) * -100vw);
}
.sec-title:after {
  content: "";
  width: calc( (250 / 1280) * 100vw);
  height: calc( (250 / 1280) * 100vw);
  background: url("/hatsunemiku/img/dlc/common/title_right_bg.svg") left top no-repeat;
  background-size: cover;
  margin-left: calc( (30 / 1280) * -100vw);
}
.sec-title h2 {
  position: relative;
  font-size:  calc( (40 / 1280) * 100vw);
  line-height: 150%;
  text-align: center;
  color: #008896;
  margin: 0;
}
.sec-title p {
  font-size: calc( (16 / 1280) * 100vw);
  font-weight: bold;
  letter-spacing: 0.2rem;
  text-align: center;
  color: #D60080;
  margin: 0;
}

@media screen and (max-width: 750px) {
  .sec-title {
    display: flex;
    align-items: center;
    min-height: 31vw;
    background: url("/hatsunemiku/img/dlc/common/title_bg_sp.svg") center center no-repeat;
    background-size: 100%;
  }
  .sec-title:before,
  .sec-title:after {
    display: none;
  }
  .sec-title h2 {
    font-size:  calc( (24 / 390) * 100vw);
    line-height: 150%;
    text-align: center;
    color: #008896;
    margin: 0;
  }
  .sec-title p {
    font-size: calc( (12 / 390) * 100vw);
    font-weight: bold;
    letter-spacing: 0.2rem;
    text-align: center;
    color: #D60080;
    margin: 0;
  }
}


/* ====================================================
Header
==================================================== */
#header {
  position: relative;
  background: url("/hatsunemiku/img/dlc/common/header_bg.jpg") no-repeat top center;
  background-size: cover;
  aspect-ratio: 1280 / 757;
}
.header__main {
  width: calc( (900 / 1280) * 100%);
  margin: 0 auto;
}
.main-logo {
  margin: 0 0 0 auto;
  padding-top: 4.8vw;
  width: calc( (677 / 900) * 100%);
}
.main-about {
  margin: 0 0 0 auto;
  padding-top: 1.8vw;
  width: calc( (580 / 900) * 100%);
}
.main-cta {
  margin: 0 1vw 0 auto;
  padding-top: 1.4vw;
  width: calc( (560 / 900) * 100%);
}
.header__nav {
  position: absolute;
  bottom: 8vw;
  width: 100%;
}
.header__nav ul {
  display: flex;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-editor    { width: calc( (330 / 1280) * 100%); } /* 日本語 */
.nav-bgm       { width: calc( (387 / 1280) * 100%); }
.nav-song      { width: calc( (404 / 1280) * 100%); }

.nav-editor-en { width: calc( (319 / 1280) * 100%); } /* 英語調整 */
.nav-bgm-en    { width: calc( (368 / 1280) * 100%); }
.nav-cta-en    { width: calc( (342 / 1280) * 100%); }

.nav-editor-kr { width: calc( (305 / 1280) * 100%); } /* 韓国語調整 */
.nav-bgm-kr    { width: calc( (297 / 1280) * 100%); }
.nav-cta-kr    { width: calc( (231 / 1280) * 100%); }

.nav-editor-tc { width: calc( (236 / 1280) * 100%); } /* 繁体字調整 */
.nav-bgm-tc    { width: calc( (290 / 1280) * 100%); }
.nav-cta-tc    { width: calc( (321 / 1280) * 100%); }

.nav-editor-sc { width: calc( (236 / 1280) * 100%); } /* 簡体字調整 */
.nav-bgm-sc    { width: calc( (297 / 1280) * 100%); }
.nav-cta-sc    { width: calc( (321 / 1280) * 100%); }



/* -- Header Localize
---------------------------------------------------------- */
.header--localize .main-logo {
  padding-top: 14vw;
}
.main-about--localize {
  padding: 1.8vw 4vw 0 0;
  width: calc( (590 / 900) * 100%);
}

@media screen and (max-width: 750px) {
  #header {
    position: relative;
    background: url("/hatsunemiku/img/dlc/common/header_bg_sp.jpg") no-repeat top center;
    background-size: cover;
    aspect-ratio: 780 / 1830;
  }

  .header__main {
    width: 100%;
    margin: 0 auto;
  }
  .main-logo {
    margin: 0 auto;
    padding-top: 18vw;
    width: 86%;
  }
  .main-about {
    margin: 0 auto;
    padding-top: 1.8vw;
    width: 86%;
  }
  .main-cta {
    margin: 0 auto;
    padding-top: 80vw;
    width: 70%;
  }
  .header__nav {
    position: inherit;
    bottom: 0;
    width: 65%;
    margin: 29vw auto 0 auto;
  }
  .header__nav ul {
    display: inherit;
  }
  .header__nav ul li {
    margin-top: 5vw;
  }
  .nav-editor,
  .nav-bgm,
  .nav-song,
  .nav-cta {
    width: 100%;
  }

  /* -- Header Localize
  ---------------------------------------------------------- */
  .header--localize {
    aspect-ratio: 1002 / 1830 !important;
  }
  .header--localize .main-logo {
    padding-top: 18vw;
  }
  .header__nav--localize {
    margin: 72vw auto 0 auto;
  }
  .main-about--localize {
    padding: 3.8vw 0 0 0;
  }
}


/* ====================================================
Components
==================================================== */
/* -- Components > Modal Library
---------------------------------------------------------- */
.swiper {
  width: calc( (796 / 1280) * 100%);
  margin-top: calc( (20 / 1280) * 100vw);
}
.swiper-slide__inner {
  width: 72%;
  margin: 0 auto;
}
.swiper-slide__inner h4 {
  font-size: calc( (32 / 1280) * 100vw);
  color: #D60080;
  text-align: center;
}
.swiper-slide__inner p {
  font-size: calc( (24 / 1280) * 100vw);
  color: #008896;
  text-align: center;
}
.swiper-slide__inner a {
  position: relative;
}
.swiper-slide__inner a:before {
  content: "";
  position: absolute;
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: rgba(0, 0, 0, 0.2);
}
.swiper-slide__inner a:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7vw;
  height: 7vw;
  margin: -3.5vw 0 0 -3.5vw;
  background: url("/hatsunemiku/img/dlc/common/btn_movie.svg") center center no-repeat;
  background-size: cover;
}
@media screen and (max-width: 750px) {
  .swiper-slide__inner a:after {
    width: 12vw;
    height: 12vw;
    margin: -6vw 0 0 -6vw;
  }
}

.swiper-bgm {
  position: relative;
  overflow: hidden;
}
.swiper-bgm-slide__inner {
  width: 90%;
  margin: 0 auto;
}
.swiper-bgm-slide__inner .bgm-img {
  width: 86%;
  margin: 0 auto;
}
.swiper-bgm-slide__inner h4 {
  font-size: calc( (24 / 1280) * 100vw);
  text-align: center;
}
.swiper-bgm-slide__inner p {
  width: 86%;
  margin: 0.5rem auto 0 auto;
  font-size: calc( (18 / 1280) * 100vw);
  text-align: left;
}
.swiper-bgm-slide__inner p span {
  padding: 0 0.2rem 0 0.5rem;
  font-size: 120%;
}

.swiper-button-next,
.swiper-button-prev {
  top: 12.5vw;
}

.swiper-bgm .swiper-button-next,
.swiper-bgm .swiper-button-prev {
  top: 19vw;
  margin-right: 13vw;
}
.sec-song .swiper-bgm .swiper-button-next,
.sec-song .swiper-bgm .swiper-button-prev {
  margin-left: 12vw;
  margin-right: 0;
}
/* 前へ次への矢印カスタマイズ */
.swiper-button-prev,
.swiper-button-next {
  height: 50px;
  width: 50px;
}
/* 前へ次への矢印カスタマイズ */
.swiper-button-prev::after,
.swiper-button-next::after {
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  height: 50px;
  margin: auto;
  width: 50px;
}
/* 前への矢印カスタマイズ */
.swiper-button-prev::after {
  background-image: url("/hatsunemiku/img/dlc/common/arrow_prev.svg");
}
/* 次への矢印カスタマイズ */
.swiper-button-next::after {
  background-image: url("/hatsunemiku/img/dlc/common/arrow_next.svg");
}

.swiper-rtl .swiper-button-prev:after,
.swiper-rtl .swiper-button-next::after {
  content: "";
}
.swiper-rtl .swiper-button-prev::after {
  background-image: url("/hatsunemiku/img/dlc/common/arrow_next.svg");
}
.swiper-rtl .swiper-button-next::after {
  background-image: url("/hatsunemiku/img/dlc/common/arrow_prev.svg");
}

/* 画像サイズ調整 */
.swiper-slide img {
  height: auto;
  width: 100%;
}

@media screen and (max-width: 750px) {
  .swiper {
    width: 96%;
    margin-top: 4vw;
  }
  .swiper-slide__inner {
    width: 78%;
  }
  .swiper-slide__inner h4 {
    font-size: calc( (19 / 390) * 100vw);
    letter-spacing: -0.2vw;
  }
  .swiper-slide__inner p {
    font-size: calc( (14 / 390) * 100vw);
  }

  .swiper-bgm {
    position: relative;
    overflow: hidden;
    margin: -3vw 0 0 0;
  }
  .swiper-bgm-slide__inner {
    width: 100%;
    margin: 0 auto;
  }
  .swiper-bgm-slide__inner h3 {
    margin: 0 auto;
  }
  .swiper-bgm-slide__inner .bgm-img {
    width: 80%;
    margin: 0 auto;
  }
  .swiper-bgm-slide__inner h4 {
    font-size: calc( (18 / 390) * 100vw);
    text-align: center;
    margin: 2vw 0 0 0;
  }
  .swiper-bgm-slide__inner p {
    width: 80%;
    margin: 0 auto;
    font-size: calc( (16 / 390) * 100vw);
  }

  .swiper-button-next,
  .swiper-button-prev {
    top: 22vw;
  }
  .swiper-bgm .swiper-button-next,
  .swiper-bgm .swiper-button-prev {
    top: 37vw;
    margin-right: -3vw;
    margin-left: -3vw;
  }
  .sec-song .swiper-bgm .swiper-button-next,
  .sec-song .swiper-bgm .swiper-button-prev {
    margin-right: -3vw;
    margin-left: -3vw;
  }
  /* 前へ次への矢印カスタマイズ */
  .swiper-button-prev,
  .swiper-button-next {
    height: 8vw;
    width: 8vw;
  }
  /* 前へ次への矢印カスタマイズ */
  .swiper-button-prev::after,
  .swiper-button-next::after {
    background-repeat: no-repeat;
    background-size: contain;
    content: "";
    height: 50px;
    margin: auto;
    width: 50px;
  }
  .swiper-button-prev::after {
    background-image: url("/hatsunemiku/img/dlc/common/arrow_prev.svg");
  }
  .swiper-button-next::after {
    background-image: url("/hatsunemiku/img/dlc/common/arrow_next.svg");
  }
  /* 画像サイズ調整 */
  .swiper-slide img {
    height: auto;
    width: 100%;
  }
}

/* -- Components > Modal Library
---------------------------------------------------------- */
@media screen and (max-width: 750px) {
  .modaal-video-wrap {
    margin: auto 0;
  }
}


/* ====================================================
Main
==================================================== */

/* -- Main > Schedule
---------------------------------------------------------- */
.sec-schedule {
  background: url("/hatsunemiku/img/dlc/common/sec-schedule.jpg") top center no-repeat;
  background-size: cover;
  padding: calc( (60 / 1280) * 100vw) 0;
}

.sec-schedule__wrapper {
  display: flex;
  align-items: center;
  width: calc( (820 / 1280) * 100%);
  margin: -8vw auto 0 auto;
}
.sec-schedule__wrapper__list {
  width: calc( (343 / 820) * 100%);
}
.sec-schedule__wrapper__chara {
  width: calc( (474 / 820) * 100%);
}
.schedule-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.schedule-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  font-size: calc( (18 / 1280) * 100vw);
  font-weight: bold;
  margin: 1.5vw 0 0 0;
}
.schedule-list li:before {
  content: "";
  position: absolute;
  top: -1.5vw;
  left: 2.5vw;
  width: 4px;
  height: 1.5vw;
  background-color: #ffe300;
}
.schedule-list li.schedule-list__checked:before,
.schedule-list li.schedule-list__focus:before {
  content: "";
  position: absolute;
  top: -1.5vw;
  left: 2.5vw;
  width: 4px;
  height: 1.5vw;
  background-color: #E0E0E0;
}
.schedule-list li:first-child:before {
  display: none;
}
.schedule-list__detail {
  width: calc( 100% - ((80 / 1280) * 100vw));
}
.schedule-list__detail p {
  margin: 0;
}
.circle {
  width: calc( (70 / 1280) * 100vw);
  height: calc( (70 / 1280) * 100vw);
  border-radius:50%;
  line-height: calc( (70 / 1280) * 100vw);
  text-align:center;
  background-color: #FFE300;
  font-size: calc( (32 / 1280) * 100vw);
  font-weight: bold;
  color: #008896;
}
.schedule-list li.schedule-list__focus .circle {
  width: calc( (60 / 1280) * 100vw);
  height: calc( (60 / 1280) * 100vw);
  border-radius:50%;
  line-height: calc( (60 / 1280) * 100vw);
  text-align:center;
  background-color: #008896;
  font-size: calc( (29 / 1280) * 100vw);
  font-weight: bold;
  color: #FFE300;
}
.schedule-list li.schedule-list__checked .circle {
  width: calc( (60 / 1280) * 100vw);
  height: calc( (60 / 1280) * 100vw);
  border-radius:50%;
  line-height: calc( (60 / 1280) * 100vw);
  text-align:center;
  background-color: #E0E0E0;
  font-size: calc( (29 / 1280) * 100vw);
  font-weight: bold;
  color: #C0C0C0;
}
.schedule-list li.schedule-list__checked .circle:before {
  content: "";
  position: absolute;
  top: calc( (10 / 1280) * 100vw);
  left: calc( (10 / 1280) * 100vw);
  width: calc( (40 / 1280) * 100vw);
  height: calc( (40 / 1280) * 100vw);
  background: url("/hatsunemiku/img/dlc/common/schedule_list_checked.png") center center no-repeat;
  background-size: cover;
}

@media screen and (max-width: 750px) {
  .sec-schedule {
    background: url("/hatsunemiku/img/dlc/common/sec-schedule_sp.jpg") top center no-repeat;
    background-size: cover;
    padding: calc( (50 / 390) * 100vw) 0;
  }

  .sec-schedule__wrapper {
    display:inherit;
    width: 70%;
    margin: 10vw auto 0 5vw;
  }
  .sec-schedule__wrapper__list {
    width: 100%;
  }
  .schedule-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    font-size: calc( (16 / 390) * 100vw);
    font-weight: bold;
    margin: 3vw 0 0 0;
  }
  .schedule-list li:before {
    content: "";
    position: absolute;
    top: -3vw;
    left: 5.5vw;
    width: 1.2vw;
    height: 3vw;
    background-color: #ffe300;
  }
  .schedule-list li.schedule-list__checked:before,
  .schedule-list li.schedule-list__focus:before {
    content: "";
    position: absolute;
    top: -3vw;
    left: 5.5vw;
    width: 1.2vw;
    height: 3vw;
    background-color: #E0E0E0;
  }

  .schedule-list__detail {
    width: calc( 100% - ((60 / 390) * 100vw));
  }
  .schedule-list__detail p {
    margin: 0;
  }
  .circle,
  .schedule-list li.schedule-list__focus .circle,
  .schedule-list li.schedule-list__checked .circle {
    width: calc( (50 / 390) * 100vw);
    height: calc( (50 / 390) * 100vw);
    border-radius: 50%;
    line-height: calc( (50 / 390) * 100vw);
    text-align:center;
    font-size: calc( (24 / 390) * 100vw);
    font-weight: bold;
  }
  .circle {
    background-color: #FFE300;
    color: #008896;
  }
  .schedule-list li.schedule-list__focus .circle {
    background-color: #008896;
    color: #FFE300;
  }
  .schedule-list li.schedule-list__checked .circle {
    background-color: #E0E0E0;
    color: #C0C0C0;
  }
  .schedule-list li.schedule-list__checked .circle:before {
    content: "";
    position: absolute;
    top: calc( (5 / 390) * 100vw);
    left: calc( (5 / 390) * 100vw);
    width: calc( (40 / 390) * 100vw);
    height: calc( (40 / 390) * 100vw);
    background: url("/hatsunemiku/img/dlc/common/schedule_list_checked.png") center center no-repeat;
    background-size: cover;
  }
}


/* -- Main > Editor
---------------------------------------------------------- */
.sec-editor {
  background: url("/hatsunemiku/img/dlc/common/sec_editor.jpg") top center no-repeat;
  background-size: cover;
  padding-top: calc( (60 / 1280) * 100vw);
}

.sec-editor__cta {
  margin-top: calc( (40 / 1280) * 100vw);
}
.sec-editor__cta__bnr {
  width: calc( (1024 / 1280) * 100%);
  margin: 0 auto;
}
.sec-editor__cta__link {
  width: calc( (524 / 1280) * 100%);
  margin: calc( (24 / 1280) * 100vw) auto 0 auto;
}

.sec-editor__slider__title {
  margin: calc( (110 / 1280) * 100vw) auto 0 auto;
}
.title-step-01     { width: calc( (656 / 1280) * 100%); }
.title-step-01--en { width: calc( (932 / 1280) * 100%); }
.title-step-01--kr { width: calc( (628 / 1280) * 100%); }
.title-step-01--tc { width: calc( (592 / 1280) * 100%); }
.title-step-01--sc { width: calc( (592 / 1280) * 100%); }

.title-step-02     { width: calc( (604 / 1280) * 100%); }
.title-step-02--en { width: calc( (592 / 1280) * 100%); }
.title-step-02--kr { width: calc( (544 / 1280) * 100%); }
.title-step-02--tc { width: calc( (477 / 1280) * 100%); }
.title-step-02--sc { width: calc( (509 / 1280) * 100%); }

.title-step-03     { width: calc( (733 / 1280) * 100%); }
.title-step-03--en { width: calc( (858 / 1280) * 100%); }
.title-step-03--kr { width: calc( (710 / 1280) * 100%); }
.title-step-03--tc { width: calc( (797 / 1280) * 100%); }
.title-step-03--sc { width: calc( (669 / 1280) * 100%); }

.title-step-04     { width: calc( (701 / 1280) * 100%); }
.title-step-04--en { width: calc( (667 / 1280) * 100%); }
.title-step-04--kr { width: calc( (603 / 1280) * 100%); }
.title-step-04--tc { width: calc( (505 / 1280) * 100%); }
.title-step-04--sc { width: calc( (509 / 1280) * 100%); }

@media screen and (max-width: 750px) {
  .sec-editor {
    background: url("/hatsunemiku/img/dlc/common/sec_editor_sp.jpg") top center no-repeat;
    background-size: cover;
    padding: 14vw 0 0 0;
  }

  .sec-editor__cta {
    margin-top: 10vw;
  }
  .sec-editor__cta__bnr {
    width: 100%;
  }
  .sec-editor__cta__link {
    width: 70%;
    margin: 5vw auto 0 auto;
  }

  .sec-editor__slider__title {
    margin: calc( (110 / 1280) * 100vw) auto 0 auto;
  }
  .title-step-01     { width: 90%; }
  .title-step-01--en { width: 90%; }
  .title-step-01--kr { width: 86%; }
  .title-step-01--tc { width: 86%; }
  .title-step-01--sc { width: 86%; }

  .title-step-02     { width: 82%; }
  .title-step-02--en { width: 76%; }
  .title-step-02--kr { width: 76%; }
  .title-step-02--tc { width: 70%; }
  .title-step-02--sc { width: 70%; }

  .title-step-03     { width: 93%; }
  .title-step-03--en { width: 90%; }
  .title-step-03--kr { width: 93%; }
  .title-step-03--tc { width: 86%; }
  .title-step-03--sc { width: 90%; }

  .title-step-04     { width: 90%; }
  .title-step-04--en { width: 88%; }
  .title-step-04--kr { width: 82%; }
  .title-step-04--tc { width: 75%; }
  .title-step-04--sc { width: 75%; }

  .sec-editor__end {
    overflow: hidden;
    width: 100%;
  }
  .sec-editor__end img {
    width: 162%;
    margin: 0px 0 0 -30vw;
    padding-bottom: 4vw;
  }
}

/* -- Main > CTA
---------------------------------------------------------- */
.sec-cta {
  background: #d60080;
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.3) 1px, transparent 0), linear-gradient(rgba(255, 255, 255, 0.3) 1px, transparent 0);
  background-size: 2vw 2vw;
  padding: calc( (120 / 1280) * 100vw) 0;
}
.sec-cta__wrapper {
  width: calc( (810 / 1280) * 100vw);
  margin: 0 auto;
}
.sec-cta__wrapper__detail {
  display: flex;
  gap: 2vw;
}
.sec-cta__wrapper__detail__bnr {
  width: calc( (440 / 810) * 100vw);
}
.sec-cta__wrapper__detail__txt {
  width: calc( (340 / 810) * 100vw);
  color: #ffffff;
}
.sec-cta__wrapper__detail__txt h2 {
  font-size: calc( (32 / 1280) * 100vw);
  color: #D60080;
  text-align: center;
  padding: 0.5vw 0;
  background: #ffffff;
  margin: 0;
}
.sec-cta__wrapper__detail__txt dl {
  display: flex;
  font-size: calc( (20 / 1280) * 100vw);
  font-weight: normal;
  margin: 0.7vw 0 0 0;
}
.sec-cta__wrapper__detail__txt dl dt {
  width: 32%;
  text-align: right;
}
.sec-cta__wrapper__detail__txt dl dd {
  margin: 0 0 0 0.7vw;
}
.sec-cta__wrapper__detail__txt p {
  font-size: calc( (16 / 1280) * 100vw);
  font-weight: normal;
}
.sec-cta__wrapper__link {
  width: calc( (524 / 810) * 100%);
  margin: calc( (24 / 1280) * 100vw) auto 0 auto;
}

@media screen and (max-width: 750px) {
  .sec-cta {
    background: #d60080;
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.3) 1px, transparent 0), linear-gradient(rgba(255, 255, 255, 0.3) 1px, transparent 0);
    background-size: 3vw 3vw;
    padding: calc( (60 / 390) * 100vw) 0;
  }
  .sec-cta__wrapper {
    width: 100%;
  }
  .sec-cta__wrapper__detail {
    display: inherit;
  }
  .sec-cta__wrapper__detail__bnr {
    width: 100%;
  }
  .sec-cta__wrapper__detail__txt {
    width: 86%;
    margin: 7vw auto 0 auto;
    color: #ffffff;
  }
  .sec-cta__wrapper__detail__txt h2 {
    font-size: calc( (28 / 390) * 100vw);
    color: #D60080;
    text-align: center;
    padding: 0.5vw 0;
    background: #ffffff;
    margin: 0;
  }
  .sec-cta__wrapper__detail__txt dl {
    display: flex;
    font-size: calc( (20 / 390) * 100vw);
    font-weight: normal;
    margin: 2vw 0 0 0;
  }
  .sec-cta__wrapper__detail__txt dl dt {
    width: 32%;
    text-align: right;
  }
  .sec-cta__wrapper__detail__txt dl dd {
    margin: 0 0 0 0.7vw;
  }
  .sec-cta__wrapper__detail__txt p {
    font-size: calc( (14 / 390) * 100vw);
    font-weight: normal;
  }
  .sec-cta__wrapper__link {
    width: 70%;
    margin: 5vw auto 0 auto;
  }
}


/* -- Main > BGM
---------------------------------------------------------- */
.sec-bgm {
  background: url("/hatsunemiku/img/dlc/common/sec-bgm.jpg") top center no-repeat;
  background-size: cover;
  padding: calc( (60 / 1280) * 100vw) 0;
}

.sec-bgm__slider {
  display: flex;
  align-items: center;
  width: 82%;
  margin: -8vw 0 0 auto;
}
.sec-bgm__slider.sec-bgm__slider-reverse {
  flex-direction: row-reverse;
  margin: -8vw auto 0 0;
}
.sec-bgm__slider__chara {
  width: 31%;
}
.sec-bgm__slider__swiper {
  width: 69%;
}
.sec-bgm-cta {
  width: 60%;
  margin: calc( (60 / 1280) * 100vw) 0 0 5vw;
}

/* -- Header Localize 
---------------------------------------------------------- */
.sec-bgm__slider--localize {
  width: 94%;
}
.sec-bgm__slider--localize .sec-bgm__slider__chara {
  width: 40%;
}
.sec-bgm__slider--localize .sec-bgm__slider__swiper {
  width: 60%;
}

@media screen and (max-width: 750px) {
  .sec-bgm {
    background: url("/hatsunemiku/img/dlc/common/sec-bgm.jpg") top center no-repeat;
    background-size: cover;
    padding: calc( (50 / 390) * 100vw) 0;
  }

  .sec-bgm__slider {
    display: inherit;
    align-items: center;
    width: 90%;
    margin: 0 auto;
  }
  .sec-bgm__slider.sec-bgm__slider-reverse {
    flex-direction: row;
    margin: 0 auto;
  }
  .sec-bgm__slider__chara {
    width: 70% !important;
    margin: 0 auto;
  }
  .sec-bgm__slider__swiper {
    width: 100% !important;
  }
  .sec-bgm-cta {
    width: 80%;
    margin: 5vw auto 0 auto;
  }
}


/* -- Main > Song
---------------------------------------------------------- */
.sec-song {
  background: url("/hatsunemiku/img/dlc/common/sec-song.jpg") top center no-repeat;
  background-size: cover;
  padding: calc( (60 / 1280) * 100vw) 0;
}
.sec-song-cta {
  width: 60%;
  margin: calc( (60 / 1280) * 100vw) 5vw 0 auto;
}

@media screen and (max-width: 750px) {
  .sec-song {
    background: url("/hatsunemiku/img/dlc/common/sec-song.jpg") top center no-repeat;
    background-size: cover;
    padding: calc( (50 / 390) * 100vw) 0;
  }
  .sec-song-cta {
    width: 80%;
    margin: 5vw auto 0 auto;
  }
}


/* ====================================================
Footer
==================================================== */
#footer {
  padding: 2vw 0 0 0;
}

/* -- Footer > Intro
---------------------------------------------------------- */
.footer__top__info {
  background: -webkit-gradient(linear, left top, right top, from(rgba(0, 189, 211, 0.5)), color-stop(10%, rgba(0, 189, 211, 0.35)), to(rgba(0, 189, 211, 0.05)));
  background: -o-linear-gradient(left, rgba(0, 189, 211, 0.5), rgba(0, 189, 211, 0.35) 10%, rgba(0, 189, 211, 0.05));
  background: linear-gradient(90deg, rgba(0, 189, 211, 0.5), rgba(0, 189, 211, 0.35) 10%, rgba(0, 189, 211, 0.05));
  padding: 45px 0 57px;
}
.footer__top__info_wrapper {
  display: flex;
  align-items: center;
}
.footer-info {
  display: flex;
  justify-content: end;
  align-items: center;
  width: 50%;
}
.footer-info-package {
  width: 24%;
}
.footer-info-title {
  width: 64%;
  padding-left: 2vw;
}
.footer-info-title h2 {
  margin: 0;
}
.footer-info-title p {
  font-size: 1.4vw;
  margin-bottom: 0;
  font-weight: bold;
}
.footer-info-link {
  width: 50%;
  text-align: center;
}
.footer-info-link img {
  width: 60%;
}

@media screen and (max-width: 750px) {
  .footer__top__info_wrapper {
    display: inherit;
    align-items: center;
  }
  .footer-info {
    justify-content: center;
    width: 90%;
    margin: 0 auto;
  }
  .footer-info-package {
    width: 24%;
  }
  .footer-info-title {
    width: 64%;
    padding-left: 2vw;
  }
  .footer-info-title h2 {
    margin: 0;
  }
  .footer-info-title p {
    font-size: 2.8vw;
  }
  .footer-info-link {
    width: 80%;
    margin: 5vw auto 0 auto;
    text-align: center;
  }
  .footer-info-link img {
    width: 100%;
  }
}


/* -- Footer > Series
---------------------------------------------------------- */
.footer__top__series {
  background: -webkit-gradient(linear, right top, left top, color-stop(10%, rgba(255, 227, 0, 0.35)), color-stop(rgba(255, 227, 0, 0.3)), color-stop(60%, rgba(255, 227, 0, 0.1)), to(rgba(255, 227, 0, 0)));
  background: -o-linear-gradient(right, rgba(255, 227, 0, 0.35) 10%, rgba(255, 227, 0, 0.3), rgba(255, 227, 0, 0.1) 60%, rgba(255, 227, 0, 0));
  background: linear-gradient(-90deg, rgba(255, 227, 0, 0.35) 10%, rgba(255, 227, 0, 0.3), rgba(255, 227, 0, 0.1) 60%, rgba(255, 227, 0, 0));
  padding: 45px 0 57px;
  margin: 25px 0 18px;
}
.footer__top__series__wrapper {
  display: flex;
  align-items: center;
}
.series-logo {
  width: 50%;
  text-align: center;
}
.series-logo img {
  width: 80%;
}
.series-link {
  width: 50%;
  text-align: center;
}
.series-link img {
  width: 60%;
}


/* -- Footer > Series Localize
---------------------------------------------------------- */
.footer__top__series--localize {
  margin: 0 0 18px;
}
.footer__top__series__wrapper--localize {
  display: inherit;
}
.footer__top__series__wrapper--localize .series-logo {
  margin: 0 auto;
}
.footer__top__series__wrapper--localize .series-link {
  margin: 1vw auto 0 auto;
}
.series-link__cero {
  display: flex;
  justify-content: center;
  width: 40%;
  max-width: 140px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.series-link__cero img {
  width: 90%;
}

@media screen and (max-width: 750px) {
  .footer__top__series {
    margin: 2vw 0 0 0;
  }
  .footer__top__series__wrapper {
    display: inherit;
    align-items: center;
  }
  .series-logo {
    width: 100%;
    margin: 0 auto;
    text-align: center;
  }
  .series-logo img {
    width: 80%;
  }
  .series-link {
    width: 80%;
    margin: 5vw auto 0 auto;
    text-align: center;
  }
  .series-link img {
    width: 100%;
  }

  /* -- Footer > Series Localize
  ---------------------------------------------------------- */
  .footer__top__series__wrapper--localize .series-link {
    margin: 2vw auto 0 auto;
  }
  .series-link__cero img {
    width: 90%;
  }
}


/* -- Footer > Bottom
---------------------------------------------------------- */
.footer__bottom {
  color: #ffffff;
  background: #1F2B30;
  padding: 24px 0;
}
.footer__bottom__inner {
  display: flex;
  justify-content: center;
  margin: 0 auto;
}
.footer__bottom__inner ul {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-imagineer {
  width: 5vw;
  margin-right: 2vw;
}
.footer-hexadrive {
  width: 9vw;
  margin-right: 2vw;
}
.footer__bottom__inner p {
  font-size: 1vw;
}
.footer__bottom__inner p span {
  display: inline-block;
  width: 5vw;
  padding: 0 0.5vw;
}

@media screen and (max-width: 750px) {
  .footer__bottom {
    margin: 2vw 0 0 0;
    padding: 5vw 0;
  }
  .footer__bottom__inner {
    display: inherit;
    margin: 0 auto;
  }
  .footer__bottom__inner ul {
    display: flex;
    justify-content: center;
  }
  .footer-imagineer {
    width: 13vw;
    margin-right: 3vw;
  }
  .footer-hexadrive {
    width: 22vw;
    margin-right: 0;
  }
  .footer__bottom__inner p {
    font-size: 2.2vw;
    text-align: center;
    margin-top: 3vw;
    font-weight: 100;
  }
  .footer__bottom__inner p span {
    display: inline-block;
    width: 14vw;
    padding: 0 2vw;
  }
}


/*改行用追記*/
.sp{
 display: none;
}
.pc{
  display: inline;

}

@media screen and (max-width: 750px) {
  .sp{
    display: inline;
   }
   .pc{
    display: none;
   }
}

/*追加衣装*/
.sec-costume{
  padding: 6.4vw 0;
}
.costume-img{
  margin: 10% 10% 0;
}
.costume-img img{
  width: 100%;
}
.swiper-bgm-slide__inner p.costume_p {
  text-align: center;
}
@media screen and (max-width: 750px) {
  .sec-costume{
    padding: 12.8vw 0;
  }
  .swiper-bgm-slide__inner p.costume_p {
    width: 95%;
  }
}

/*DLCページ追加コンテンツ注意書き追加*/
.swiper-bgm-slide__inner p.additional_attention{
    font-size: 0.9vw;
    margin-right: 0%;
    width: 92%;
    color: red;
    font-weight: bold;
    margin-top: -1.2rem;
}
@media screen and (max-width: 750px) {
  .swiper-bgm-slide__inner p.additional_attention{
    font-size: 2vw;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    width: 90%;
    margin-top: unset;
  }
}
/****************
 add imagineer
****************/
/** @override **/
.sec-schedule__wrapper {
	margin: -4vw auto 0 auto;
}
/** @override **/
@media only screen and (max-width:750px){
	.sec-schedule__wrapper {
		margin: 10vw auto 0 5vw;
	}
}
/** @override **/
.circle, .schedule-list li.schedule-list__focus .circle, .schedule-list li.schedule-list__checked .circle {
	z-index: 1;
}
/** @override **/
.schedule-list li.schedule-list__checked:before, .schedule-list li.schedule-list__focus:before {
	top: -1.9vw;
	height: 2.5vw;
	left: 2.2vw;
}
/** @override **/
@media only screen and (max-width:750px){
	.schedule-list li.schedule-list__checked:before, .schedule-list li.schedule-list__focus:before {
		top: -6.9vw;
		height: 10.3vw;
		left: 5.5vw;
	}
}
/** @override **/
.schedule-list li.schedule-list__checked .circle:before {
	top: 50%;
	transform: translateY(-50%);
}
/** @override **/
.schedule-list li {
  font-size: calc( (16 / 1280) * 100vw);
}
/** @override **/
@media only screen and (max-width:750px){
	.schedule-list li {
		font-size: calc( (14 / 390) * 100vw);
	}
}

.costume__link {
	width: 90%;
	max-width: 1100px;
	margin: 8% auto;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 3vw;
}
.costume__link-image {
	width: 100%;
	text-align: center;
}
.costume__link-image a {
	display: block;
}
.costume__link-image img {
	width: 100%;
	vertical-align: bottom;
	margin-bottom: 1%;
}

@media only screen and (max-width:750px){
	.costume__link {
		width: 85%;
		margin: 8% auto 0;
		grid-template-columns: repeat(1, 1fr);
		gap: 8vw;
	}
}
.costume__link-image span {
	font-size: min(2vw, 18px);
}
@media only screen and (max-width:750px){
	.costume__link-image span {
		font-size: min(4vw, 20px);
	}
}