@charset "UTF-8";
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

html {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

q, blockquote {
  quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}

a img {
  border: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
}

html, body {
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  background-image: url(../img_2x/bk.png);
  background-size: 80px 112px;
  background-position: 50% 0;
  color: #6f757e;
  font-family: YakuHanJP, "M PLUS 1", sans-serif;
  font-size: 16px;
  line-height: 28px;
  font-weight: 400;
  -webkit-text-size-adjust: 100%;
     -moz-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
          text-size-adjust: 100%;
}

#container {
  position: relative;
  width: 100%;
  max-width: 1920px;
  min-width: 1200px;
  margin: 0 auto;
}
#container img {
  vertical-align: bottom;
}
#container a {
  text-decoration: none;
}
#container .deco {
  position: absolute;
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  font-size: 0;
}

#jumbotron {
  position: relative;
  width: 100%;
  height: 1215px;
  background-color: #fff;
  background-image: url(../img_2x/jumbotron_bk.png);
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-size: cover;
}
#jumbotron .inner {
  position: relative;
  width: 980px;
  margin: 0 auto;
  padding-top: 580px;
}
#jumbotron .inner h1 {
  display: block;
  width: 619px;
  height: 282px;
  margin: 0 auto;
  background-image: url(../img_2x/jumbotron_h1.png);
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  font-size: 0;
}
#jumbotron .inner .release {
  margin-top: -15px;
}
#jumbotron .inner .release .title {
  display: block;
  width: 295px;
  height: 35px;
  margin: 0 auto;
  background-image: url(../img_2x/jumbotron_date_01.png);
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  font-size: 0;
}
#jumbotron .inner .release .date {
  display: block;
  width: 434px;
  height: 57px;
  margin: 0 auto;
  background-image: url(../img_2x/jumbotron_date_02.png);
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  font-size: 0;
}
#jumbotron .inner .staff {
  width: 635px;
  height: 35px;
  margin: 20px auto 0;
  background-image: url(../img_2x/jumbotron_staff.png);
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  font-size: 0;
}
#jumbotron .copy {
  position: absolute;
  display: block;
  width: 12%;
  max-width: 210px;
  height: 1170px;
  top: 0;
  left: 0;
  display: -webkit-flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: row;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-justify-content: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-align-items: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-align-content: center;
  -ms-flex-line-pack: center;
      align-content: center;
  z-index: 4;
}
#jumbotron .copy p {
  width: 50px;
  height: 954px;
  background-image: url(../img_2x/jumbotron_copy.png);
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  font-size: 0;
}

#news {
  width: 610px;
  height: 32px;
  margin: 75px auto 0;
  border-radius: 18px;
  border: 2px solid #483a5d;
  background-color: #695c7d;
  overflow: hidden;
  z-index: 10;
}
#news ul {
  position: relative;
  width: 610px;
  height: 32px;
}
#news ul li {
  width: 610px;
  height: 32px;
  display: -webkit-flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: row;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-justify-content: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-align-items: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-align-content: center;
  -ms-flex-line-pack: center;
      align-content: center;
}
#news ul li .date {
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 12px;
}
#news ul li .text {
  position: relative;
  top: -1px;
  color: #fff;
  margin-left: 25px;
  font-size: 14px;
  line-height: 14px;
}
#news ul li .text a {
  color: #fff;
  text-decoration: underline;
  -webkit-transition: 0.2s ease opacity;
  transition: 0.2s ease opacity;
}
#news ul li .text a:hover {
  opacity: 0.5;
}

.global_nav {
  background-color: rgba(255, 255, 255, 0.7);
  -webkit-box-shadow: 0px 4px 12px 0px rgba(75, 74, 72, 0.1);
          box-shadow: 0px 4px 12px 0px rgba(75, 74, 72, 0.1);
}
.global_nav ul {
  width: 880px;
  height: 48px;
  margin: 0 auto;
  display: -webkit-flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: row;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-justify-content: space-between;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-align-items: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-align-content: center;
  -ms-flex-line-pack: center;
      align-content: center;
}
.global_nav ul li {
  position: relative;
  top: 1px;
}
.global_nav ul li a {
  position: relative;
  display: block;
  font-size: 0;
  -webkit-transition: 0.2s ease opacity, 0.2s ease transform;
  transition: 0.2s ease opacity, 0.2s ease transform;
  cursor: pointer;
}
.global_nav ul li a:hover {
  opacity: 0.5;
}
.global_nav ul li a::before {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  z-index: 10;
  content: "";
}
.global_nav ul li a::after {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  z-index: 11;
  opacity: 0;
  content: "";
}
.global_nav ul li.item_01 a {
  width: 30px;
  height: 18px;
}
.global_nav ul li.item_01 a::before {
  background-image: url(../img_2x/nav_01.png);
}
.global_nav ul li.item_01 a::after {
  background-image: url(../img_2x/nav_01_on.png);
}
.global_nav ul li.item_02 a {
  width: 45px;
  height: 18px;
}
.global_nav ul li.item_02 a::before {
  background-image: url(../img_2x/nav_02.png);
}
.global_nav ul li.item_02 a::after {
  background-image: url(../img_2x/nav_02_on.png);
}
.global_nav ul li.item_03 a {
  width: 72px;
  height: 18px;
}
.global_nav ul li.item_03 a::before {
  background-image: url(../img_2x/nav_03.png);
}
.global_nav ul li.item_03 a::after {
  background-image: url(../img_2x/nav_03_on.png);
}
.global_nav ul li.item_04 a {
  width: 87px;
  height: 15px;
  top: -2px;
}
.global_nav ul li.item_04 a::before {
  background-image: url(../img_2x/nav_04.png);
}
.global_nav ul li.item_04 a::after {
  background-image: url(../img_2x/nav_04_on.png);
}
.global_nav ul li.item_05 a {
  width: 62px;
  height: 19px;
}
.global_nav ul li.item_05 a::before {
  background-image: url(../img_2x/nav_05.png);
}
.global_nav ul li.item_05 a::after {
  background-image: url(../img_2x/nav_05_on.png);
}
.global_nav ul li.item_06 a {
  width: 70px;
  height: 19px;
}
.global_nav ul li.item_06 a::before {
  background-image: url(../img_2x/nav_06.png);
}
.global_nav ul li.item_06 a::after {
  background-image: url(../img_2x/nav_06_on.png);
}
.global_nav[data-inview="1"] .item_01 a::after {
  opacity: 1;
}
.global_nav[data-inview="1"] .item_01 a::before {
  opacity: 0;
}
.global_nav[data-inview="2"] .item_02 a::after {
  opacity: 1;
}
.global_nav[data-inview="2"] .item_02 a::before {
  opacity: 0;
}
.global_nav[data-inview="3"] .item_03 a::after {
  opacity: 1;
}
.global_nav[data-inview="3"] .item_03 a::before {
  opacity: 0;
}
.global_nav[data-inview="4"] .item_04 a::after {
  opacity: 1;
}
.global_nav[data-inview="4"] .item_04 a::before {
  opacity: 0;
}
.global_nav[data-inview="5"] .item_05 a::after {
  opacity: 1;
}
.global_nav[data-inview="5"] .item_05 a::before {
  opacity: 0;
}
.global_nav[data-inview="6"] .item_06 a::after {
  opacity: 1;
}
.global_nav[data-inview="6"] .item_06 a::before {
  opacity: 0;
}

#relative_nav {
  position: relative;
  display: block;
  width: 100%;
  height: 48px;
  margin-top: -48px;
}

#fixed_nav {
  position: fixed;
  display: block;
  width: 100%;
  height: 48px;
  top: -60px;
  left: 0;
  z-index: 50;
  -webkit-transition: 0.3s ease transform;
  transition: 0.3s ease transform;
}
#fixed_nav.active {
  -webkit-transform: translateY(60px);
  transform: translateY(60px);
}

#pickup {
  width: 100%;
}
#pickup ul {
  width: 100%;
  aspect-ratio: 1920/320;
  background-color: #fff;
  display: -webkit-flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: row;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-justify-content: space-between;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-align-items: flex-start;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-align-content: flex-start;
  -ms-flex-line-pack: start;
      align-content: flex-start;
}
#pickup ul li {
  width: 33.3333333333%;
  height: 100%;
}
#pickup ul li a {
  display: block;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  font-size: 0;
  -webkit-transition: 0.2s ease opacity, 0.2s ease transform;
  transition: 0.2s ease opacity, 0.2s ease transform;
  cursor: pointer;
}
#pickup ul li a:hover {
  opacity: 0.5;
}
#pickup ul .banner_01 {
  background-image: url(../img_2x/banner_01.png);
}
#pickup ul .banner_02 {
  background-image: url(../img_2x/banner_02.png);
}
#pickup ul .banner_03 {
  background-image: url(../img_2x/banner_03.png);
}

.section_box {
  width: 100%;
  background-size: cover;
  background-position: 50% 0;
  background-repeat: no-repeat;
}
.section_box > .header {
  padding-top: 70px;
}
.section_box > .header h2 {
  margin: 0 auto;
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  font-size: 0;
}

#story {
  height: 929px;
  background-image: url(../img_2x/story_bk.png);
}
#story > .header h2 {
  width: 127px;
  height: 58px;
  background-image: url(../img_2x/story_h2.png);
}
#story > .inner {
  width: 980px;
  margin: 65px auto 0;
}
#story > .inner p .text {
  display: block;
  width: 100%;
  background-image: url(../img_2x/story_text.png);
  background-size: 626px 641px;
  background-position: 0 0;
  background-repeat: no-repeat;
  font-size: 0;
}
#story > .inner p .text.text_01 {
  height: 40px;
  background-position: 0 0;
}
#story > .inner p .text.text_02 {
  height: 45px;
  background-position: 0 -40px;
}
#story > .inner p .text.text_03 {
  height: 40px;
  background-position: 0 -85px;
}
#story > .inner p .text.text_04 {
  height: 35px;
  background-position: 0 -125px;
}
#story > .inner p .text.text_05 {
  height: 35px;
  background-position: 0 -160px;
}
#story > .inner p .text.text_06 {
  height: 35px;
  background-position: 0 -195px;
}
#story > .inner p .text.text_07 {
  height: 40px;
  background-position: 0 -250px;
}
#story > .inner p .text.text_08 {
  height: 50px;
  background-position: 0 -290px;
}
#story > .inner p .text.text_09 {
  height: 60px;
  background-position: 0 -340px;
}
#story > .inner p .text.text_10 {
  height: 80px;
  background-position: 0 -400px;
}
#story > .inner p .text.text_11 {
  height: 40px;
  background-position: 0 -480px;
}
#story > .inner p .text.text_12 {
  height: 40px;
  background-position: 0 -520px;
}
#story > .inner p .text.text_13 {
  height: 50px;
  background-position: 0 -560px;
}
#story > .inner p .text.text_14 {
  height: 31px;
  background-position: 0 -610px;
}

#concept {
  height: 957px;
  background-image: url(../img_2x/concept_bk.png);
}
#concept > .header h2 {
  width: 201px;
  height: 58px;
  background-image: url(../img_2x/concept_h2.png);
}
#concept > .inner {
  position: relative;
  width: 1000px;
  margin: 30px auto 0;
  padding-top: 50px;
}
#concept > .inner .visual {
  position: absolute;
  width: 299px;
  height: 826px;
  top: -30px;
  left: -20px;
  background-image: url(../img_2x/concept_img.png);
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  font-size: 0;
}
#concept > .inner .concept_box {
  position: relative;
  width: calc(100% - 310px);
  padding-left: 310px;
  margin-bottom: 85px;
}
#concept > .inner .concept_box h3 {
  display: block;
  margin-bottom: 15px;
  background-size: cover;
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  font-size: 0;
}
#concept > .inner .concept_box p {
  font-size: 16px;
  line-height: 32px;
}
#concept > .inner #concept_01 .num {
  position: absolute;
  display: block;
  width: 22px;
  height: 53px;
  top: 0;
  left: 255px;
  background-image: url(../img_2x/concept_01_num.png);
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  font-size: 0;
}
#concept > .inner #concept_01 h3 {
  width: 651px;
  height: 28px;
  background-image: url(../img_2x/concept_01_title.png);
}
#concept > .inner #concept_02 .num {
  position: absolute;
  display: block;
  width: 34px;
  height: 53px;
  top: 0;
  left: 255px;
  background-image: url(../img_2x/concept_02_num.png);
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  font-size: 0;
}
#concept > .inner #concept_02 h3 {
  width: 584px;
  height: 73px;
  background-image: url(../img_2x/concept_02_title.png);
}
#concept > .inner #concept_03 .num {
  position: absolute;
  display: block;
  width: 35px;
  height: 55px;
  top: 0;
  left: 255px;
  background-image: url(../img_2x/concept_03_num.png);
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  font-size: 0;
}
#concept > .inner #concept_03 h3 {
  width: 252px;
  height: 28px;
  background-image: url(../img_2x/concept_03_title.png);
}

#character {
  height: 1058px;
  background-image: url(../img_2x/character_bk.png);
}
#character > .header {
  display: none;
}
#character > .inner {
  position: relative;
  width: 960px;
  margin: 0 auto;
  padding-top: 78px;
}
#character > .inner .profile h3 .en {
  width: 199px;
  height: 19px;
  margin: 0 0 4px 2px;
  background-image: url(../img_2x/character_name_en.png);
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  font-size: 0;
}
#character > .inner .profile h3 .jp {
  width: 198px;
  height: 40px;
  background-image: url(../img_2x/character_name_jp.png);
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  font-size: 0;
}
#character > .inner .profile .cv {
  width: 82px;
  height: 16px;
  margin: 12px 0 10px 0;
  background-image: url(../img_2x/character_cv.png);
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  font-size: 0;
}
#character > .inner .profile dl {
  padding-top: 25px;
  display: -webkit-flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
#character > .inner .profile dl.dl_01 {
  -webkit-flex-direction: row;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-justify-content: flex-start;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-align-items: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-align-content: center;
  -ms-flex-line-pack: center;
      align-content: center;
}
#character > .inner .profile dl.dl_02 {
  height: 100px;
  -webkit-flex-direction: column;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-justify-content: flex-start;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-align-items: flex-start;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-align-content: flex-start;
  -ms-flex-line-pack: start;
      align-content: flex-start;
}
#character > .inner .profile dl dt {
  height: 22px;
  border-radius: 11px;
  background-color: #8059b8;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  font-size: 0;
}
#character > .inner .profile dl dt.dt_01 {
  width: 70px;
  background-image: url(../img_2x/character_prof_dt_01.png);
  background-size: 28px 14px;
}
#character > .inner .profile dl dt.dt_02 {
  width: 130px;
  background-image: url(../img_2x/character_prof_dt_02.png);
  background-size: 83px 14px;
}
#character > .inner .profile dl dt.dt_03 {
  width: 90px;
  background-image: url(../img_2x/character_prof_dt_03.png);
  background-size: 48px 13px;
}
#character > .inner .profile dl dt.dt_04 {
  width: 155px;
  background-image: url(../img_2x/character_prof_dt_04.png);
  background-size: 103px 12px;
}
#character > .inner .profile dl dd.dd_01 {
  width: 56px;
  height: 14px;
  margin: 0 15px 0 10px;
  background-image: url(../img_2x/character_prof_dd_01.png);
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  font-size: 0;
}
#character > .inner .profile dl dd.dd_02 {
  width: 154px;
  height: 18px;
  margin: 0 15px 0 10px;
  background-image: url(../img_2x/character_prof_dd_02.png);
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  font-size: 0;
}
#character > .inner .profile dl dd.dd_03 {
  width: 213px;
  height: 59px;
  margin: 15px 28px 0 -10px;
  background-image: url(../img_2x/character_prof_scene.png);
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  font-size: 0;
}
#character > .inner .profile dl dd.dd_04 {
  padding: 24px 0 0 3px;
}
#character > .inner .profile dl dd.dd_04 #voice {
  display: -webkit-flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: row;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-justify-content: space-between;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-align-items: flex-start;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-align-content: flex-start;
  -ms-flex-line-pack: start;
      align-content: flex-start;
}
#character > .inner .profile dl dd.dd_04 #voice li {
  position: relative;
  width: 40px;
  height: 40px;
  margin-right: 10px;
  border-radius: 20px;
  font-size: 0;
}
#character > .inner .profile dl dd.dd_04 #voice li.cs {
  background-color: #c3becb !important;
}
#character > .inner .profile dl dd.dd_04 #voice li.cs::before {
  opacity: 0.5 !important;
}
#character > .inner .profile dl dd.dd_04 #voice li:not(.cs) {
  -webkit-transition: 0.2s ease opacity, 0.2s ease transform;
  transition: 0.2s ease opacity, 0.2s ease transform;
  cursor: pointer;
}
#character > .inner .profile dl dd.dd_04 #voice li:not(.cs):hover {
  opacity: 0.5;
  -webkit-transform: translateY(2px);
  transform: translateY(2px);
}
#character > .inner .profile dl dd.dd_04 #voice li.active::before {
  opacity: 0;
}
#character > .inner .profile dl dd.dd_04 #voice li.active::after {
  opacity: 1;
}
#character > .inner .profile dl dd.dd_04 #voice li::before, #character > .inner .profile dl dd.dd_04 #voice li::after {
  position: absolute;
  width: 40px;
  height: 40px;
  top: 0;
  left: 0;
  background-image: url(../img_2x/character_voice_icons.png);
  background-size: 120px 40px;
  background-position: -80px 0;
  background-repeat: no-repeat;
  opacity: 0;
  content: "";
}
#character > .inner .profile dl dd.dd_04 #voice li.normal {
  background-color: #695c7d;
}
#character > .inner .profile dl dd.dd_04 #voice li.normal::before {
  background-position: 0 0;
  opacity: 1;
}
#character > .inner .profile dl dd.dd_04 #voice li.scene {
  background-color: #af5abc;
}
#character > .inner .profile dl dd.dd_04 #voice li.scene::before {
  background-position: -40px 0;
  opacity: 1;
}
#character > .inner .profile .event_cg {
  margin-top: 35px;
}
#character > .inner .profile .event_cg ul {
  width: 412px;
  display: -webkit-flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: row;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-justify-content: space-between;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-align-items: flex-start;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-align-content: flex-start;
  -ms-flex-line-pack: start;
      align-content: flex-start;
}
#character > .inner .profile .event_cg ul li {
  width: 132px;
  height: 92px;
  padding-bottom: 8px;
}
#character > .inner .profile .event_cg ul li span {
  display: block;
  width: 130px;
  height: 90px;
  border-radius: 2px;
  background-color: rgba(105, 92, 125, 0.2);
  border: 1px solid rgba(105, 92, 125, 0.4);
  background-size: cover;
  background-position: 50% 50%;
  font-size: 0;
}
#character > .inner .profile .event_cg ul li span.open_gallery {
  border: 1px solid #695c7d;
  -webkit-transition: 0.2s ease opacity, 0.2s ease transform;
  transition: 0.2s ease opacity, 0.2s ease transform;
  cursor: pointer;
}
#character > .inner .profile .event_cg ul li span.open_gallery:hover {
  opacity: 0.5;
  -webkit-transform: translateY(2px);
  transform: translateY(2px);
}
#character > .inner .profile .event_cg ul li span.item_01 {
  background-image: url(../img_2x/character_gallery_thumbnail_01.png);
}
#character > .inner .profile .event_cg ul li span.item_02 {
  background-image: url(../img_2x/character_gallery_thumbnail_02.png);
}
#character > .inner .profile .event_cg ul li span.item_03 {
  background-image: url(../img_2x/character_gallery_thumbnail_03.png);
}
#character > .inner .profile .text {
  margin-top: 25px;
}
#character > .inner .profile .text p {
  padding-bottom: 1em;
}
#character > .inner .profile .text p span {
  display: block;
  font-size: 14px;
  line-height: 24px;
}
#character > .inner .visual {
  position: absolute;
  width: 358px;
  height: 994px;
  top: 20px;
  right: 100px;
  background-image: url(../img_2x/character_visual.png);
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  font-size: 0;
}
#character > .inner .serif {
  position: absolute;
  width: 113px;
  height: 748px;
  top: 110px;
  right: -30px;
  background-image: url(../img_2x/character_serif.png);
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  font-size: 0;
}

#special > .header h2 {
  width: 181px;
  height: 61px;
  background-image: url(../img_2x/special_h2.png);
}
#special > .inner .header h3 {
  margin: 0 auto 40px;
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  font-size: 0;
}
#special .special_box {
  margin: 50px 0 0;
}
#special .special_box .header h3 {
  width: 265px;
  height: 50px;
  background-image: url(../img_2x/special_01_h3.png);
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  font-size: 0;
}
#special .special_box .inner ul {
  width: 752px;
  margin: 0 auto;
  display: -webkit-flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: row;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-justify-content: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-align-items: flex-start;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-align-content: flex-start;
  -ms-flex-line-pack: start;
      align-content: flex-start;
}
#special .special_box .inner ul li {
  margin: 0 12px 24px;
}
#special .special_box .inner ul li a {
  display: block;
  border: 1px solid #695c7d;
  border-radius: 6px;
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  font-size: 0;
  -webkit-transition: 0.2s ease opacity, 0.2s ease transform;
  transition: 0.2s ease opacity, 0.2s ease transform;
  cursor: pointer;
}
#special .special_box .inner ul li a:hover {
  opacity: 0.5;
  -webkit-transform: translateY(2px);
  transform: translateY(2px);
}
#special .special_box .inner ul li.item_01 a {
  width: 200px;
  height: 200px;
  background-image: url(../special/sns_icon_01.png);
}
#special .special_box .inner ul li.item_02 a {
  width: 200px;
  height: 200px;
  background-image: url(../special/sns_icon_02.png);
}
#special .special_box .inner ul li.item_03 a {
  width: 750px;
  height: 250px;
  background-image: url(../special/sns_header.png);
}

#product > .header h2 {
  width: 196px;
  height: 61px;
  background-image: url(../img_2x/product_h2.png);
}
#product > .inner {
  width: 920px;
  margin: 75px auto 0;
  display: -webkit-flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: row;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-justify-content: space-between;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-align-items: flex-start;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-align-content: flex-start;
  -ms-flex-line-pack: start;
      align-content: flex-start;
}
#product .product_box {
  margin-bottom: 50px;
}
#product .product_box h3 {
  width: 100%;
  height: 21px;
  border-bottom: 1px solid #b6b3bf;
  background-position: 4px 0;
  background-repeat: no-repeat;
  font-size: 0;
}
#product .product_box dl {
  padding: 25px 0 0 2px;
}
#product .product_box dl dt {
  padding-bottom: 5px;
  color: #695c7d;
  font-size: 14px;
  line-height: 14px;
  font-weight: 700;
}
#product .product_box dl dd {
  position: relative;
  left: -1px;
  padding-bottom: 20px;
  color: #6f757e;
  font-size: 18px;
  line-height: 30px;
}
#product .product_box .caution {
  padding-top: 5px;
}
#product .product_box .caution li {
  position: relative;
  padding: 0 0 0 1.5em;
  color: #a78fca;
  font-size: 16px;
  line-height: 25px;
}
#product .product_box .caution li::before {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  content: "※";
}
#product #product_01 {
  width: 380px;
}
#product #product_01 h3 {
  background-image: url(../img_2x/product_h3_01.png);
  background-size: 50px 13px;
}
#product #product_02 {
  width: 490px;
}
#product #product_02 h3 {
  background-image: url(../img_2x/product_h3_02.png);
  background-size: 79px 13px;
}
#product #product_03 {
  width: 920px;
}
#product #product_03 h3 {
  background-image: url(../img_2x/product_h3_03.png);
  background-size: 43px 13px;
}

#footer {
  width: 100%;
  margin-top: 100px;
  background-color: #f0f0f2;
}
#footer .inner {
  padding: 100px 0;
}
#footer .inner .pagetop {
  position: relative;
  display: block;
  width: 87px;
  height: 80px;
  margin: 0 auto;
}
#footer .inner .pagetop .icon {
  position: absolute;
  display: block;
  width: 87px;
  height: 50px;
  bottom: 0;
  left: 0;
  background-image: url(../img_2x/footer_pagetop_arrow.png);
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  font-size: 0;
  -webkit-transition: 0.2s ease opacity, 0.2s ease transform;
  transition: 0.2s ease opacity, 0.2s ease transform;
}
#footer .inner .pagetop .text {
  position: absolute;
  display: block;
  width: 70px;
  height: 14px;
  top: 0;
  left: 9px;
  background-image: url(../img_2x/footer_pagetop_label.png);
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  font-size: 0;
  -webkit-transition: 0.2s ease opacity, 0.2s ease transform;
  transition: 0.2s ease opacity, 0.2s ease transform;
}
#footer .inner .pagetop:hover .text {
  opacity: 0.6;
}
#footer .inner .pagetop:hover .icon {
  opacity: 0.6;
  -webkit-transform: translateY(-3px);
  transform: translateY(-3px);
}
#footer .inner .sns {
  width: 100%;
  height: 70px;
  padding: 80px 0 0;
  display: -webkit-flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: row;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-justify-content: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-align-items: flex-start;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-align-content: flex-start;
  -ms-flex-line-pack: start;
      align-content: flex-start;
}
#footer .inner .sns li {
  width: 70px;
  height: 70px;
  margin: 0 22px;
}
#footer .inner .sns li a {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-size: 70px 70px;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  font-size: 0;
  -webkit-transition: 0.2s ease opacity, 0.2s ease transform;
  transition: 0.2s ease opacity, 0.2s ease transform;
  cursor: pointer;
}
#footer .inner .sns li a:hover {
  opacity: 0.5;
  -webkit-transform: translateY(2px);
  transform: translateY(2px);
}
#footer .inner .sns li.sns_x a {
  background-image: url(../img_2x/footer_btn_01.png);
}
#footer .inner .sns li.sns_yt a {
  background-image: url(../img_2x/footer_btn_02.png);
}
#footer .inner .brand {
  display: block;
  width: 135px;
  height: 71px;
  margin: 80px auto 0;
  background-image: url(../img_2x/footer_maker.png);
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  font-size: 0;
  -webkit-transition: 0.2s ease opacity, 0.2s ease transform;
  transition: 0.2s ease opacity, 0.2s ease transform;
  cursor: pointer;
}
#footer .inner .brand:hover {
  opacity: 0.5;
  -webkit-transform: translateY(2px);
  transform: translateY(2px);
}
#footer .inner .copyright {
  display: block;
  width: 366px;
  height: 12px;
  margin: 30px auto 0;
  background-image: url(../img_2x/footer_copyright.png);
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  font-size: 0;
}

#gallery_modal {
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  z-index: 80;
}
#gallery_modal .inner {
  position: absolute;
  width: 500px;
  height: 500px;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
#gallery_modal .inner div {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: 50% 50%;
  border-radius: 10px;
  -webkit-box-shadow: 0 0 5px rgba(105, 92, 125, 0.2);
          box-shadow: 0 0 5px rgba(105, 92, 125, 0.2);
  background-color: #fff;
  overflow: hidden;
}
#gallery_modal .close {
  position: fixed;
  display: block;
  width: 20px;
  height: 20px;
  top: 30px;
  right: 30px;
  background-image: url(../img_2x/close.png);
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  font-size: 0;
  -webkit-transition: 0.2s ease opacity, 0.2s ease transform;
  transition: 0.2s ease opacity, 0.2s ease transform;
  cursor: pointer;
}
#gallery_modal .close:hover {
  opacity: 0.5;
  -webkit-transform: translateY(2px);
  transform: translateY(2px);
}
#gallery_modal #gallery_01 {
  background-image: url(../zoom/event_cg_01.png);
}
#gallery_modal #gallery_02 {
  background-image: url(../zoom/event_cg_02.png);
}
#gallery_modal #gallery_03 {
  background-image: url(../zoom/event_cg_03.png);
}

#loading {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #fff;
  z-index: 100;
  display: -webkit-flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: row;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-justify-content: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-align-items: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-align-content: center;
  -ms-flex-line-pack: center;
      align-content: center;
}
#loading .progress {
  position: relative;
  width: 40%;
  height: 2px;
  border-radius: 1px;
  background-color: #d8b6d8;
}
#loading .progress .bar {
  position: absolute;
  display: block;
  width: 100%;
  height: 2px;
  top: 0;
  right: 0;
  background-color: #f4f4f4;
}

#blur {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  background-color: rgba(255, 255, 255, 0.8);
  z-index: 99;
}/*# sourceMappingURL=style_2x.css.map */