:root {
  --fonts-notosansjp: "Noto Sans JP", sans-serif;
  --fonts-isego: "Isego", sans-serif;
  --fonts-arial: "Arial", sans-serif;
  --fonts-notoserifjp: "Noto Serif JP", serif;
  --color-black: #000;
  --color-white: #fff;
  --color-red1: #FF0000;
  --color-red2: #A81B20;
  --color-blue: #6D7CEC;
  --color-gray1: #1A1212;
  --color-gray2: #0D0404;
  --color-gray3: #535353;
  --color-base: var(--color-white);
  --color-footer: var(--color-gray3);
  --color-complete1: var(--color-black);
  --color-complete2: var(--color-gray1);
  --shadow-red: 0 2px 14px rgb(209, 0, 0);
  --easing-cubic1: cubic-bezier(0, 0, .2, 1)
}
.complete-limit {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-wrap: wrap;
  z-index: 1;
  position: relative;
  flex-wrap: wrap;
  padding: 24px 20px;
  gap: 8px 24px;
  background-color: var(--color-complete1)
}
.l-footer .complete-limit {
  background-color: var(--color-complete2)
}
.complete-limit__txt {
  color: var(--color-white);
  font-weight: 700;
  font-size: calc(28/10*1rem);
  line-height: 1.3928571429;
  letter-spacing: calc(200/1000*1em)
}
.l-footer .complete-limit__txt {
  line-height: 1.2580645161
}
.complete-limit__notice {
  color: var(--color-white);
  font-weight: 400;
  font-size: calc(14/10*1rem);
  line-height: 1.7142857143;
  letter-spacing: calc(25/1000*1em)
}
.c-section {
  padding-right: 20px;
  padding-left: 20px
}
.c-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  gap: 5px;
  text-align: center;
  -webkit-animation-delay: .3s !important;
  animation-delay: .3s !important
}
.c-title .is-mainlabel {
  font-weight: 400;
  font-size: calc(44/10*1rem);
  line-height: 1;
  font-family: var(--fonts-isego);
  letter-spacing: calc(15/1000*1em)
}
.c-title .is-sublabel {
  font-weight: 400;
  font-size: calc(25/10*1rem);
  font-family: var(--fonts-isego)
}
.movie {
  position: relative;
  padding-top: 98px;
  padding-bottom: 98px
}
.movie::before {
  z-index: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("../img/bg-movie_pc.jpg") center top no-repeat var(--color-black);
  background-size: cover;
  content: "";
  opacity: .51;
  pointer-events: none
}
.movie .c-title {
  margin-bottom: 68px
}
.movie__container {
  width: 100%;
  max-width: 1020px;
  margin-right: auto;
  margin-left: auto
}
.movie__list {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr;
  grid-template-columns: 1fr;
  gap: 68px
}
.movie__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 38px;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center
}
.movie__item .movie__title {
  padding-left: 24px
}
.movie__item .movie__title::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 100%;
  background-color: var(--color-white);
  content: "";
  opacity: .5;
  -webkit-transform: skewX(-2.5deg);
  transform: skewX(-2.5deg)
}
.movie__item:nth-child(even) {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row
}
.movie__item:nth-child(even) .movie__title {
  padding-right: 24px;
  padding-left: 0;
  text-align: right
}
.movie__item:nth-child(even) .movie__title::before {
  display: none
}
.movie__item:nth-child(even) .movie__title::after {
  position: absolute;
  top: 0;
  right: 0;
  width: 2px;
  height: 100%;
  background-color: var(--color-white);
  content: "";
  opacity: .5;
  -webkit-transform: skewX(-2.5deg);
  transform: skewX(-2.5deg)
}
.movie__title {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 4px;
  -webkit-box-flex: 0;
  -ms-flex: 0 1 auto;
  position: relative;
  flex: 0 1 auto;
  -ms-flex-item-align: start;
  align-self: flex-start
}
.movie__title .is-mainlabel {
  font-weight: 400;
  font-size: calc(30/10*1rem);
  line-height: 1.175;
  font-family: var(--fonts-isego);
  letter-spacing: calc(30/1000*1em)
}
.movie__title .is-sublabel {
  font-weight: 400;
  font-size: calc(12/10*1rem);
  line-height: 1.1666666667;
  font-family: var(--fonts-arial);
  letter-spacing: calc(30/1000*1em)
}
.movie__thumbnail {
  width: 100%;
  max-width: 680px;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto
}
.movie__embed {
  position: relative;
  width: 100%;
  padding-top: 56.6176%
}
.movie__embed img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
  -webkit-transform: skewX(-2.5deg);
  transform: skewX(-2.5deg)
}
.movie__embed--play {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  z-index: 2;
  position: absolute;
  top: 50%;
  left: 50%;
  align-items: center;
  width: 82px;
  height: 82px;
  gap: 10px;
  translate: -50% -50%;
  pointer-events: none
}
.movie__frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  pointer-events: all
}
.movie__frame > * {
  width: 100%;
  height: 100%
}
.concept {
  position: relative;
  height: 100%;
  min-height: 57.6866764275vw;
  overflow: hidden
}
.concept::after {
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("../img/bg-concept_pc.jpg") center top no-repeat var(--color-black);
  background-size: cover;
  content: "";
  pointer-events: none
}
.concept .c-title {
  margin-bottom: clamp(24px, 2.9282576867vw, 56px);
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start
}
.concept__title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  margin-bottom: clamp(24px, 2.0497803807vw, 32px);
  font-weight: 400;
  font-size: calc(38/10*1rem);
  line-height: 1.4210526316;
  font-family: var(--fonts-isego);
  letter-spacing: calc(15/1000*1em)
}
.concept__title .is-label1 {
  translate: -20px 0
}
.concept__title .is-label3 {
  font-size: calc(28/10*1rem)
}
.concept__txt {
  font-weight: 700;
  font-size: calc(13/10*1rem);
  line-height: 1.9230769231;
  letter-spacing: calc(30/1000*1em)
}
.concept__txt + .concept__txt {
  margin-top: 1.9em
}
.concept__bgconts {
  z-index: 2;
  position: absolute;
  top: 0;
  left: 50%;
  width: 100%;
  max-width: 42.8257686676vw;
  height: 100%;
  mix-blend-mode: multiply
}
.concept__bgconts img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover
}
.concept__conts {
  z-index: 3;
  position: absolute;
  top: 0;
  left: 50%;
  width: 100%;
  max-width: 42.8257686676vw;
  padding: 108px 42px 42px
}
.point {
  position: relative;
  padding-top: 98px;
  padding-bottom: 98px;
  overflow: hidden
}
.point .c-title {
  margin-bottom: 64px
}
.point__list {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr;
  grid-template-columns: 1fr;
  gap: 32px;
  counter-reset: num
}
.point__item {
  padding-block: 70px;
  background-color: #1c0101
}
.point__item:nth-child(odd) .point__img {
  translate: -14px 0
}
.point__item:nth-child(odd) .point__text {
  -webkit-padding-end: 40px;
  padding-inline-end: 40px
}
.point__item:nth-child(even) .point__contents {
  grid-template-areas: "img title""img text";
  -ms-grid-columns: 758px auto;
  grid-template-columns: 758px auto
}
.point__item:nth-child(even) .point__text {
  -webkit-padding-start: 24px;
  padding-inline-start: 24px
}
.point__item:nth-child(2) .point__contents {
  grid-template-areas: "img title""img text""notice notice";
  -ms-grid-rows: auto auto auto;
  grid-template-rows: auto auto auto
}
.point__item:nth-child(2) .point__title {
  -webkit-margin-start: 24px;
  margin-inline-start: 24px
}
.point__item:nth-child(2) .flow__notice {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  grid-area: notice;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 0 1em
}
.point__item:nth-child(2) .flow__notice--item {
  font-size: calc(12/10*1rem)
}
.point__item:last-child .point__contents {
  display: block
}
.point__contents {
  display: -ms-grid;
  display: grid;
  -webkit-box-align: center;
  -ms-flex-align: center;
  grid-template-areas: "title img""text img";
  align-items: center;
  max-width: 1080px;
  margin-inline: auto;
  gap: 12px 0;
  -ms-grid-columns: auto 0 758px;
  grid-template-columns: auto 758px;
  -ms-grid-rows: auto 12px auto;
  grid-template-rows: auto auto
}
.point__title {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  grid-area: title;
  -webkit-box-align: end;
  -ms-flex-align: end;
  z-index: 1;
  position: relative;
  position: relative;
  align-items: flex-end;
  height: 100%;
  font-weight: 400;
  font-size: calc(40/10*1rem);
  line-height: 1.175;
  font-family: var(--fonts-isego);
  letter-spacing: calc(30/1000*1em);
  white-space: nowrap
}
.point__item:nth-child(2) .point__contents > .point__title {
  -ms-grid-row: 1;
  -ms-grid-column: 2
}
.point__contents > .point__title {
  -ms-grid-row: 1;
  -ms-grid-column: 1
}
.point__title::before {
  position: absolute;
  bottom: 94px;
  left: 0;
  content: counter(num);
  color: #781c18;
  font-size: calc(62/10*1rem);
  line-height: 1;
  letter-spacing: calc(30/1000*1em);
  counter-increment: num;
  opacity: .9
}
.point__title::after {
  position: absolute;
  bottom: 82px;
  left: 52px;
  width: 2px;
  height: 80px;
  background-color: #781c18;
  content: "";
  opacity: .9;
  -webkit-transform: skewX(-2.5deg);
  transform: skewX(-2.5deg)
}
.point__img {
  -ms-grid-row: 1;
  -ms-grid-row-span: 2;
  -ms-grid-column: 1;
  grid-area: img
}
.point__item:nth-child(2) .point__contents > .point__img {
  -ms-grid-row: 1;
  -ms-grid-row-span: 2;
  -ms-grid-column: 1
}
.point__contents > .point__img {
  -ms-grid-row: 1;
  -ms-grid-row-span: 3;
  -ms-grid-column: 3
}
.point__img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center
}
.point__thumbnail {
  -ms-grid-row: 1;
  -ms-grid-row-span: 2;
  -ms-grid-column: 1;
  grid-area: img
}
.point__item:nth-child(2) .point__contents > .point__thumbnail {
  -ms-grid-row: 1;
  -ms-grid-row-span: 2;
  -ms-grid-column: 1
}
.point__contents > .point__thumbnail {
  -ms-grid-row: 1;
  -ms-grid-row-span: 3;
  -ms-grid-column: 3
}
.point__embed {
  position: relative;
  width: 100%;
  padding-top: 56.6176%
}
.point__embed img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center
}
.point__embed--play {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  z-index: 2;
  position: absolute;
  top: 50%;
  left: 50%;
  align-items: center;
  width: 82px;
  height: 82px;
  gap: 10px;
  translate: -50% -50%;
  pointer-events: none
}
.point__trigger {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  pointer-events: all
}
.point__trigger > * {
  width: 100%;
  height: 100%
}
.point__text {
  -ms-grid-row: 2;
  -ms-grid-column: 2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  grid-area: text;
  -webkit-box-align: start;
  -ms-flex-align: start;
  z-index: 1;
  position: relative;
  align-items: flex-start;
  height: 100%;
  font-weight: 700;
  font-size: calc(13/10*1rem);
  line-height: 1.9230769231;
  letter-spacing: calc(30/1000*1em)
}
.point__item:nth-child(2) .point__contents > .point__text {
  -ms-grid-row: 2;
  -ms-grid-column: 2
}
.point__contents > .point__text {
  -ms-grid-row: 3;
  -ms-grid-column: 1
}
.point__text ruby {
  -webkit-font-feature-settings: "palt"1;
  position: relative;
  font-size: calc(22/10*1rem);
  font-feature-settings: "palt"1;
  letter-spacing: calc(0/1000*1em)
}
.point__text rt {
  position: absolute;
  top: -10px;
  left: 0;
  font-size: calc(13/10*1rem)
}
.point__hgroup {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-bottom: 48px;
  gap: 40px
}
.point__hgroup--title {
  font-weight: 400;
  font-size: calc(40/10*1rem);
  line-height: 1.175;
  font-family: var(--fonts-isego);
  letter-spacing: calc(30/1000*1em);
  -webkit-padding-start: 96px;
  z-index: 1;
  position: relative;
  padding-inline-start: 96px
}
.point__hgroup--title::before {
  position: absolute;
  bottom: 6px;
  left: 0;
  content: counter(num);
  color: #781c18;
  font-size: calc(62/10*1rem);
  line-height: 1;
  letter-spacing: calc(30/1000*1em);
  counter-increment: num;
  opacity: .9
}
.point__hgroup--title::after {
  position: absolute;
  bottom: 10px;
  left: 52px;
  width: 2px;
  height: 64px;
  background-color: #781c18;
  content: "";
  opacity: .9;
  -webkit-transform: skewX(-2.5deg);
  transform: skewX(-2.5deg)
}
.point__hgroup--text {
  z-index: 1;
  position: relative;
  font-weight: 700;
  font-size: calc(17/10*1rem);
  line-height: 1.4705882353;
  letter-spacing: calc(30/1000*1em)
}
.point__rushblock {
  display: -ms-grid;
  display: grid;
  max-width: 1020px;
  gap: 50px clamp(50px, 5.4904831625vw, 100px);
  -ms-grid-columns: 1fr 1fr;
  grid-template-columns: 1fr 1fr
}
.point__rushblock--title {
  margin-bottom: 4px;
  padding-inline: 8px;
  font-weight: 400;
  font-size: calc(32/10*1rem);
  line-height: 1.15625;
  font-family: var(--fonts-isego);
  letter-spacing: calc(30/1000*1em)
}
.point__rushblock--text {
  padding-inline: 8px;
  font-weight: 700;
  font-size: calc(14/10*1rem);
  line-height: 1.9285714286;
  letter-spacing: calc(30/1000*1em)
}
.point__rushblock--img {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-top: 24px
}
#point_movie .point__embed video {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain
}
.direction {
  position: relative;
  margin-bottom: 72px;
  padding-top: 60px;
  padding-bottom: 0;
  background: url("../img/bg-direction_pc.jpg") center top no-repeat;
  background-size: cover
}
.direction__container {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr;
  grid-template-columns: 1fr;
  gap: 48px
}
.direction__item.is-4th {
  margin-top: 120px;
  padding-inline: 20px;
  border-top: 1px solid #d1000d;
  border-bottom: 1px solid #d1000d;
  background: url("../img/img-direction4_pc.jpg") center no-repeat;
  background-size: cover
}
.direction__title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  z-index: 1;
  position: relative;
  justify-content: center;
  translate: 0 52px
}
.is-4th .direction__title {
  margin-bottom: -126px;
  translate: 0 -50%
}
.direction__img {
  border-top: 1px solid #d1000d;
  border-bottom: 1px solid #d1000d
}
.direction__img img {
  width: 100%
}
.direction__inner {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 643px 1fr;
  position: relative;
  grid-template-columns: 643px 1fr;
  max-width: 1080px;
  margin-inline: auto;
  padding-bottom: 72px;
  gap: 28px
}
.direction__contents {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr;
  grid-template-columns: 1fr;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  gap: 54px
}
.direction__contents img {
  -webkit-filter: drop-shadow(0 0 6px rgb(0, 0, 0));
  filter: drop-shadow(0 0 6px rgb(0, 0, 0))
}
.direction__contents--desc {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr;
  grid-template-columns: 1fr;
  gap: 18px
}
.direction__thumbnail {
  border: 1px solid #d1000d
}
.direction__embed {
  position: relative;
  width: 100%;
  padding-top: 56.6176%
}
.direction__embed img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center
}
.direction__embed--play {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  z-index: 2;
  position: absolute;
  top: 50%;
  left: 50%;
  align-items: center;
  width: 82px;
  height: 82px;
  gap: 10px;
  translate: -50% -50%;
  pointer-events: none
}
.direction__trigger {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  pointer-events: all
}
.direction__trigger > * {
  width: 100%;
  height: 100%
}
#direction_movie .point__embed video {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain
}
.flow {
  position: relative;
  padding-top: 64px;
  padding-bottom: 80px
}
.flow .c-title {
  margin-bottom: 24px
}
.flow__container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  max-width: 1064px;
  margin-inline: auto;
  gap: 20px
}
.flow__img {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center
}
.flow__notice--item {
  padding-left: 1em;
  font-size: calc(14/10*1rem);
  line-height: 1.9285714286;
  letter-spacing: calc(30/1000*1em);
  text-indent: -1em
}
.story {
  position: relative;
  padding-top: 52px;
  padding-bottom: 100px;
  background: url("../img/bg-contents_pc.jpg") center no-repeat;
  background-size: cover
}
.story .c-title {
  z-index: 1;
  position: relative;
  margin-bottom: 112px
}
.story__container {
  position: relative;
  max-width: 1020px;
  margin-inline: auto
}
.story__inner {
  width: 100%;
  max-width: 646px;
  min-height: 712px;
  padding-top: 80px;
  padding-left: 52px;
  background: url("../img/bg-about_pc.jpg") center top no-repeat;
  background-size: cover
}
.story__title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  margin-bottom: 64px
}
.story__title .is-label1 {
  font-size: calc(36/10*1rem);
  line-height: 1;
  font-family: var(--fonts-isego);
  letter-spacing: calc(15/1000*1em)
}
.story__title .is-label2 {
  translate: -22px 0;
  font-weight: 400;
  font-size: calc(40/10*1rem);
  line-height: 1.1785714286;
  font-family: var(--fonts-isego);
  letter-spacing: calc(15/1000*1em)
}
.story__title .is-label3 {
  font-weight: 400;
  font-size: calc(14/10*1rem);
  font-family: var(--fonts-isego);
  letter-spacing: calc(30/1000*1em)
}
.story__txt {
  font-weight: 700;
  font-size: calc(13/10*1rem);
  line-height: 1.9230769231;
  letter-spacing: calc(30/1000*1em)
}
.story__txt + .story__txt {
  margin-top: 1.9em
}
.story__img {
  z-index: 1;
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  max-width: 388px;
  translate: 0 -42px
}
.story__img .is-1st {
  display: inline-block;
  margin-inline: auto;
  translate: 0 40px;
  opacity: 0;
  -webkit-transition: opacity .6s .2s var(--easing-cubic1), translate .6s .2s var(--easing-cubic1);
  transition: opacity .6s .2s var(--easing-cubic1), translate .6s .2s var(--easing-cubic1)
}
.story__img .is-2nd {
  position: absolute;
  top: 464px;
  left: -70px;
  translate: 20px -40px;
  opacity: 0;
  -webkit-transition: opacity .6s .5s var(--easing-cubic1), translate .6s .5s var(--easing-cubic1);
  transition: opacity .6s .5s var(--easing-cubic1), translate .6s .5s var(--easing-cubic1)
}
.story__img .is-3rd {
  position: absolute;
  top: 612px;
  right: -52px;
  translate: -20px -40px;
  opacity: 0;
  -webkit-transition: opacity .6s .4s var(--easing-cubic1), translate .6s .4s var(--easing-cubic1);
  transition: opacity .6s .4s var(--easing-cubic1), translate .6s .4s var(--easing-cubic1)
}
.story__img.is-view .is-1st {
  translate: 0 0;
  opacity: 1
}
.story__img.is-view .is-2nd {
  translate: 0 0;
  opacity: 1
}
.story__img.is-view .is-3rd {
  translate: 0 0;
  opacity: 1
}
.introduction__container {
  position: relative;
  padding-top: 196px;
  padding-bottom: 196px;
  padding-inline: clamp(30px, 9.2118730809vw, 120px)
}
.introduction__container .c-title {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none
}
.introduction__container .c-title .is-number {
  position: absolute;
  top: 80px;
  left: 20px
}
.introduction__container .c-title .is-number img {
  width: clamp(36px, 9.0071647902vw, 142px);
  height: auto
}
.introduction__container .c-title .is-mainlabel {
  position: absolute;
  top: 192px;
  right: 20px
}
.introduction__container .c-title .is-mainlabel img {
  width: clamp(26px, 7.3694984647vw, 90px);
  height: auto
}
.introduction__container.is-1st {
  background: url("../img/bg-introduction1_pc.jpg") center top no-repeat;
  background-size: cover
}
.introduction__container.is-1st::before, .introduction__container.is-1st::after {
  z-index: 1;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  translate: 0 50%;
  content: ""
}
.introduction__container.is-1st::before {
  z-index: 2;
  height: 4px;
  background-color: #e50112
}
.introduction__container.is-1st::after {
  height: 270px;
  background: url("../img/separate-introduction_pc.png") center no-repeat;
  mix-blend-mode: screen
}
.introduction__container.is-2nd {
  background: url("../img/bg-introduction2_pc.jpg") center 85% no-repeat;
  background-size: cover
}
.introduction__frame {
  position: relative;
  max-width: 1110px;
  margin-inline: auto;
  padding: 48px 44px
}
.introduction__frame::before, .introduction__frame::after {
  z-index: 1;
  position: absolute;
  width: clamp(336px, 73.6949846469vw, 1105px);
  height: clamp(467px, 88.0245649949vw, 1255px);
  background: url("../img/frame-introduction_pc.svg") left top no-repeat;
  background-size: contain;
  content: "";
  pointer-events: none
}
.introduction__frame::before {
  top: 0;
  left: 0
}
.introduction__frame::after {
  right: 0;
  bottom: 0;
  scale: -1
}
.introduction__contents {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr;
  position: relative;
  grid-template-columns: 1fr;
  width: 100%;
  height: 100%;
  padding: 96px 40px 210px;
  gap: 88px
}
.introduction__contents::before {
  z-index: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  content: "";
  clip-path: polygon(9vw 0%, 70% 0%, 100% 0%, 100% calc(100% - 9vw), calc(100% - 9vw) 100%, 0% 100%, 0% 70%, 0% 9vw);
  opacity: .6;
  pointer-events: none
}
.introduction__contents--logo {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  z-index: 1;
  position: relative;
  justify-content: center;
  max-width: 740px;
  margin-inline: auto
}
.introduction__contents--word {
  z-index: 1;
  position: relative;
  width: 100%;
  max-width: 740px;
  margin-inline: auto
}
.introduction__contents--inner {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr;
  z-index: 1;
  position: relative;
  grid-template-columns: 1fr;
  max-width: 740px;
  margin-inline: auto;
  gap: 1.5em
}
.introduction__contents--txt {
  font-weight: 700;
  font-size: clamp(16px, 4.0941658137vw, 14px);
  line-height: 2;
  letter-spacing: calc(30/1000*1em)
}
.character {
  position: relative
}
.character .c-title {
  z-index: 1;
  position: absolute;
  top: 50px;
  left: 50%;
  translate: -50% 0
}
.character__tabs {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  z-index: 1;
  position: absolute;
  top: 135px;
  left: calc(50% + 16px);
  justify-content: center
}
.character__tabsitem {
  z-index: 2;
  position: relative;
  translate: 11px 21px
}
.character__tabsitem .character__tabslink::after {
  background: url("../img/character-tabnav1_pc.png") center no-repeat;
  background-size: contain
}
.character__tabsitem:nth-child(2) {
  z-index: 1;
  translate: -11px 0
}
.character__tabsitem:nth-child(2) .character__tabslink::after {
  background: url("../img/character-tabnav2_pc.png") center no-repeat;
  background-size: contain
}
.character__tabslink {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  position: relative;
  align-items: center
}
.character__tabslink::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
  opacity: 0;
  pointer-events: none;
  -webkit-transition: opacity .6s var(--easing-cubic1);
  transition: opacity .6s var(--easing-cubic1)
}
.character__tabslink[aria-selected=true]::after {
  opacity: 1
}
.character__tabslink:hover::after {
  opacity: 1
}
.character__container {
  -webkit-padding-before: 262px;
  padding-block-start: 262px;
  -webkit-padding-after: 138px;
  height: 985px;
  padding-block-end: 138px
}
.character__container#ghoul {
  position: relative;
  height: 100%;
  background: url("../img/bg-character-ghoul_pc.jpg") center top repeat-x;
  background-size: auto 100%
}
.character__container#human {
  position: relative;
  height: 100%;
  background: url("../img/bg-character-human_pc.jpg") center top repeat-x;
  background-size: auto 100%
}
.character__container[aria-hidden=false] {
  display: block;
  -webkit-animation: fadeIn .6s var(--easing-cubic1) forwards;
  animation: fadeIn .6s var(--easing-cubic1) forwards
}
.character__container[aria-hidden=true] {
  display: none
}
.character__title {
  position: absolute;
  top: 172px;
  left: 0
}
.character__trigger {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: baseline;
  -ms-flex-align: baseline;
  align-items: baseline;
  width: 360px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer
}
.character__trigger img {
  -webkit-transition: opacity .6s var(--easing-cubic1);
  transition: opacity .6s var(--easing-cubic1)
}
.character__trigger:hover img {
  opacity: .7
}
.character-slide {
  overflow: hidden
}
.character-slide .swiper {
  max-width: 1020px;
  margin-inline: auto;
  overflow: visible
}
.character-slide .swiper-slide {
  width: 100% !important;
  max-width: 360px
}
.character-slide__controller {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-top: 16px;
  gap: 40px
}
.character-slide__controller .swiper-button-next {
  scale: -1 1
}
.character-slide__controller .swiper-button-next:after, .character-slide__controller .swiper-button-prev:after {
  display: none
}
.character-slide__controller .swiper-button-next, .character-slide__controller .swiper-button-prev {
  position: static;
  width: 59px;
  height: 59px;
  margin-top: 0
}
.character-slide__controller .swiper-button-prev {
  grid-area: charaprev;
  -webkit-box-ordinal-group: 2;
  -ms-flex-order: 1;
  order: 1
}
.character-slide__controller .swiper-button-next {
  grid-area: charanext;
  -webkit-box-ordinal-group: 4;
  -ms-flex-order: 3;
  order: 3
}
.character-slide__controller .swiper-scrollbar {
  position: static;
  grid-area: charascrollbar;
  max-width: 274px;
  height: 8px;
  background-color: rgba(0, 0, 0, .6);
  -webkit-box-ordinal-group: 3;
  -ms-flex-order: 2;
  order: 2
}
.character-slide__controller .swiper-scrollbar-drag {
  height: 8px;
  background-color: #fff
}
.character-modal .modal__overlay {
  padding: 20px 40px 60px
}
.character-modal .modal__container {
  max-width: 1200px;
  height: 100%;
  translate: 0 0
}
.character-modal .swiper-button-next:after, .character-modal .swiper-button-prev:after {
  display: none
}
.character-modal .swiper-button-next, .character-modal .swiper-button-prev {
  width: 59px;
  height: 59px
}
.character-modal .swiper-button-next {
  scale: -1 1
}
.character-modal .modal__close {
  width: 34px;
  height: 34px
}
.character-modalslide {
  height: calc(100% - 42px);
  padding: 42px 80px 42px 50px
}
#character-ghoul .character-modalslide {
  position: relative;
  background: url("../img/modal-bgghoul_pc.jpg") center top no-repeat;
  background-size: cover
}
#character-human .character-modalslide {
  position: relative;
  background: url("../img/modal-bghuman_pc.jpg") center top no-repeat;
  background-size: cover
}
.character-modalslide__item {
  display: -ms-grid;
  display: grid;
  grid-template-areas: "chara name""chara inner";
  -ms-grid-columns: 1fr 30px 693px;
  grid-template-columns: 1fr 693px;
  -ms-grid-rows: 1fr 36px 100%;
  grid-template-rows: 1fr 100%;
  gap: 36px 30px;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  height: 100%
}
.character-modalslide__img {
  -ms-grid-row: 1;
  -ms-grid-row-span: 3;
  -ms-grid-column: 1;
  grid-area: chara
}
.character-modalslide__img img {
  position: absolute;
  top: -24px;
  left: 50px;
  max-width: 325px;
  height: auto
}
.character-modalslide__hgroup {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: baseline;
  -ms-flex-align: baseline;
  grid-area: name;
  align-items: baseline;
  -webkit-padding-after: 6px;
  position: relative;
  padding-block-end: 6px;
  border-bottom: 1px solid var(--color-white)
}
.character-modalslide__hgroup::after {
  position: absolute;
  right: 0;
  bottom: -5px;
  width: 86px;
  height: 5px;
  translate: 0 100%;
  background: url("../img/modal-character-deco_pc.svg") center no-repeat;
  background-size: contain;
  content: ""
}
.character-modalslide__name {
  color: var(--color-white);
  font-size: calc(80/10*1rem);
  line-height: 1.1625;
  font-family: var(--fonts-isego);
  letter-spacing: calc(15/1000*1em)
}
.character-modalslide__name .is-em {
  color: var(--color-red1)
}
#character-human .character-modalslide__name .is-em {
  color: var(--color-blue)
}
.character-modalslide__cv {
  color: var(--color-white);
  font-size: calc(32/10*1rem);
  line-height: 1.15625;
  font-family: var(--fonts-isego);
  letter-spacing: calc(15/1000*1em)
}
.character-modalslide__inner {
  -ms-grid-row: 3;
  -ms-grid-column: 3;
  position: relative;
  grid-area: inner;
  height: 100%;
  max-height: 432px;
  padding: 60px
}
.character-modalslide__inner::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #0d0404;
  content: "";
  mix-blend-mode: multiply;
  opacity: .8
}
.character-modalslide__text {
  z-index: 1;
  position: relative;
  font-size: calc(18/10*1rem);
  line-height: 2.3333333333;
  letter-spacing: calc(30/1000*1em)
}
.music {
  position: relative;
  padding-top: 100px;
  padding-bottom: 164px;
  border-top: 2px solid #4a3d90;
  border-bottom: 2px solid #4a3d90;
  background: url("../img/bg-music_pc.jpg") center center no-repeat;
  background-size: cover
}
.music__hgroup {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr;
  grid-template-columns: 1fr;
  margin-bottom: 30px;
  gap: clamp(18px, 2.3426061493vw, 40px)
}
.music__hgroup--read {
  font-weight: 700;
  font-size: clamp(12px, 1.756954612vw, 30px);
  line-height: 1.6666666667;
  letter-spacing: calc(30/1000*1em);
  text-align: center
}
.music .c-title {
  margin-bottom: 0
}
.music__list {
  max-width: 1000px;
  margin-inline: auto
}
.music__item {
  position: relative;
  padding-top: clamp(20px, 1.9033674963vw, 30px);
  padding-bottom: clamp(20px, 1.9033674963vw, 30px)
}
.music__item::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--color-white);
  content: "";
  opacity: .6
}
.music__item--title {
  font-weight: 700;
  font-size: clamp(13px, 1.756954612vw, 30px);
  line-height: 1.6666666667;
  letter-spacing: calc(30/1000*1em)
}
.music__item--name {
  font-weight: 700;
  font-size: clamp(18px, 1.4641288433vw, 22px);
  line-height: 1.6666666667;
  letter-spacing: calc(30/1000*1em)
}
.music__item--text {
  font-weight: 700;
  font-size: clamp(13px, 1.756954612vw, 30px);
  line-height: 1.6666666667;
  letter-spacing: calc(30/1000*1em)
}
.spec {
  position: relative;
  padding-top: 60px;
  padding-bottom: 80px;
  overflow: hidden;
  background: url("../img/bg-spec_pc.jpg") center top no-repeat;
  background-size: contain
}
.spec .c-title {
  z-index: 1;
  position: relative;
  margin-bottom: 0px
}
.spec__container {
  position: relative;
  max-width: 1184px;
  margin-inline: auto
}
.spec__case {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-top: -88px
}
.is-fan .spec__case {
  margin-top: -72px
}
.spec__img {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-top: -156px;
  margin-inline: -96px
}
.spec__img img {
  position: relative;
  left: 50%;
  width: 120%;
  translate: -50% 0
}
.spec__inner {
  display: -ms-grid;
  display: grid;
  grid-template-areas: "data graph""notice graph";
  -ms-grid-columns: 1fr 30px 672px;
  grid-template-columns: 1fr 672px;
  -ms-grid-rows: auto 30px 1fr;
  grid-template-rows: auto 1fr;
  margin-top: -32px;
  gap: 30px
}
.is-fan .spec__inner {
  margin-top: 64px
}
.spec__data {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  grid-area: data;
  flex-direction: column;
  gap: 24px
}
.is-fan .spec__data {
  gap: 18px
}
.spec__data--list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 24px
}
.spec__data--title {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 144px;
  flex: 0 0 144px;
  font-weight: 400;
  font-size: calc(23/10*1rem);
  line-height: 1.1304347826;
  font-family: var(--fonts-isego);
  letter-spacing: calc(30/1000*1em)
}
.spec__data--title {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 144px;
  flex: 0 0 144px;
  font-weight: 400;
  font-size: calc(23/10*1rem);
  line-height: 1.1304347826;
  font-family: var(--fonts-isego);
  letter-spacing: calc(30/1000*1em)
}
.is-fan .spec__data--title {
  font-weight: 700;
  font-size: calc(20/10*1rem);
  line-height: 1.45;
  font-family: var(--fonts-notoserifjp)
}
.spec__data--title span {
  font-size: 78.5714%
}
.spec__data--desc span {
  font-size: 58.5714%
}
.is-fan .spec__data--desc {
  font-weight: 700;
  font-size: calc(23/10*1rem);
  line-height: 1.4347826087;
  font-family: var(--fonts-notoserifjp)
}
.spec__data--text {
  font-weight: 400;
  font-size: calc(28/10*1rem);
  line-height: 1.1785714286;
  font-family: var(--fonts-isego);
  letter-spacing: calc(40/1000*1em)
}
.spec__data--text span {
  font-size: 78.5714%
}
.spec__graph {
  -ms-grid-row: 1;
  -ms-grid-row-span: 3;
  -ms-grid-column: 3;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  grid-area: graph;
  justify-content: center
}
.is-fan .spec__graph {
  margin-top: 64px
}
.spec__notice {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  grid-area: notice
}
.spec__inner > .spec__notice {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
  -ms-grid-column-span: 1
}
.is-fan .spec__notice {
  margin-top: 18px
}
.spec__notice--item {
  padding-left: 1em;
  font-size: calc(14/10*1rem);
  line-height: 1.9285714286;
  letter-spacing: calc(30/1000*1em);
  text-indent: -1em
}
.modal {
  display: none
}
.modal.is-open {
  display: block
}
.modal__overlay {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  z-index: 40;
  position: fixed;
  top: 0;
  left: 0;
  justify-content: center;
  width: 100%;
  height: 100dvh;
  padding: 60px 40px;
  background-color: rgba(0, 0, 0, .8);
  -webkit-overflow-scrolling: touch
}
[aria-hidden=false] .modal__overlay {
  -webkit-animation: fadeIn .3s ease-out;
  animation: fadeIn .3s ease-out
}
[aria-hidden=true] .modal__overlay {
  -webkit-animation: fadeOut .3s ease-out;
  animation: fadeOut .3s ease-out
}
.modal__close {
  display: block;
  width: 70px;
  height: 70px;
  margin-bottom: 20px;
  margin-left: auto;
  padding: 0;
  translate: 10px 0;
  border: none;
  background: none;
  cursor: pointer;
  pointer-events: all;
  -webkit-transition: opacity .3s ease-out, rotate .3s ease-out;
  position: relative;
  transition: opacity .3s ease-out, rotate .3s ease-out
}
.modal__close::before, .modal__close::after {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 2px;
  translate: -50% -50%;
  border-radius: 10px;
  background-color: var(--color-white);
  content: ""
}
.modal__close::before {
  rotate: 45deg
}
.modal__close::after {
  rotate: -45deg
}
.modal__container {
  width: 100%;
  max-width: 840px;
  margin-right: auto;
  margin-left: auto;
  translate: 0 -70px
}
[data-fadein] {
  opacity: 0
}
[data-fadein].is-view {
  -webkit-animation: fadeIn .6s var(--easing-cubic1) forwards;
  animation: fadeIn .6s var(--easing-cubic1) forwards
}
[data-slideup] {
  opacity: 0
}
[data-slideup].is-view {
  -webkit-animation: slideUp .6s var(--easing-cubic1) forwards;
  animation: slideUp .6s var(--easing-cubic1) forwards
}
[data-slidedown] {
  opacity: 0
}
[data-slidedown].is-view {
  -webkit-animation: slideDown .6s var(--easing-cubic1) forwards;
  animation: slideDown .6s var(--easing-cubic1) forwards
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0
  }
  to {
    opacity: 1
  }
}
@keyframes fadeIn {
  from {
    opacity: 0
  }
  to {
    opacity: 1
  }
}
@-webkit-keyframes fadeOut {
  from {
    opacity: 1
  }
  to {
    opacity: 0
  }
}
@keyframes fadeOut {
  from {
    opacity: 1
  }
  to {
    opacity: 0
  }
}
@-webkit-keyframes slideUp {
  from {
    opacity: 0;
    -webkit-transform: translateY(30px);
    transform: translateY(30px)
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0)
  }
}
@keyframes slideUp {
  from {
    opacity: 0;
    -webkit-transform: translateY(30px);
    transform: translateY(30px)
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0)
  }
}
@-webkit-keyframes slideDown {
  from {
    opacity: 0;
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px)
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0)
  }
}
@keyframes slideDown {
  from {
    opacity: 0;
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px)
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0)
  }
}
@media screen and (max-width: 1458px) {
  .concept__title {
    margin-bottom: 24px;
    font-size: clamp(26px, 2.3426061493vw, 38px)
  }
  .concept__conts {
    padding-top: clamp(40px, 5.270863836vw, 108px);
    padding-right: clamp(20px, 2.3426061493vw, 42px);
    padding-bottom: clamp(20px, 2.3426061493vw, 42px);
    padding-left: clamp(20px, 2.3426061493vw, 42px)
  }
}
@media screen and (max-width: 1200px) {
  .character-modal .modal__container {
    max-width: 87.8477306003vw
  }
  .character-modalslide {
    -webkit-padding-before: 3.074670571vw;
    padding-block-start: 3.074670571vw;
    -webkit-padding-after: 3.074670571vw;
    padding-block-end: 3.074670571vw;
    -webkit-padding-start: 3.6603221083vw;
    padding-inline-start: 3.6603221083vw;
    -webkit-padding-end: 5.8565153734vw;
    padding-inline-end: 5.8565153734vw
  }
  .character-modalslide__item {
    -ms-grid-columns: 23.7920937042vw 1fr;
    grid-template-columns: 23.7920937042vw 1fr;
    gap: 2.635431918vw 2.196193265vw
  }
  .character-modalslide__img img {
    left: 4.1666666667vw;
    max-width: 27.0833333333vw
  }
  .character-modalslide__hgroup {
    -webkit-padding-after: .439238653vw;
    padding-block-end: .439238653vw
  }
  .character-modalslide__hgroup::after {
    width: 6.2957540264vw;
    height: .3660322108vw
  }
  .character-modalslide__name {
    font-size: 5.8565153734vw
  }
  .character-modalslide__cv {
    font-size: 2.3426061493vw
  }
  .character-modalslide__inner {
    padding: 4.39238653vw
  }
  .character-modalslide__text {
    font-size: clamp(14px, 1.3333333333vw, 18px)
  }
}
@media screen and (max-width: 1080px) {
  .concept__bgconts {
    max-width: 50%
  }
  .concept__conts {
    max-width: 50%
  }
}
@media screen and (max-width: 1050px) {
  .story__inner {
    padding-left: 24px
  }
}
@media screen and (max-width: 1040px) {
  .spec__img {
    padding-inline: 40px
  }
  .spec__inner {
    -ms-grid-columns: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
    padding-inline: 20px
  }
}
@media screen and (max-width: 1024px) {
  .character__title {
    top: 274px
  }
}
@media screen and (max-width: 1023px) {
  .story {
    padding-bottom: 0
  }
  .story__container {
    margin-inline: -20px
  }
  .story__inner {
    max-width: 100%;
    min-height: auto;
    padding: 120px 20px 62px;
    background: url("../img/bg-about_sp.jpg") center top no-repeat;
    background-size: cover
  }
  .story__title .is-label2 {
    margin-top: 10px
  }
  .story__title .is-label2 span {
    display: block;
    translate: 32px 0
  }
  .story__title .is-label3 {
    margin-top: 10px
  }
  .story__img {
    position: relative;
    margin-bottom: 64px;
    margin-inline: auto;
    translate: 0 0
  }
  .story__img .is-2nd {
    top: 484px;
    right: -70px;
    left: auto
  }
  .story__img .is-3rd {
    top: 526px;
    right: auto;
    left: -52px
  }
  .spec__container {
    margin-inline: -20px
  }
  .spec__container.is-fan {
    margin-inline: auto
  }
}
@media screen and (max-width: 977px) {
  .complete-limit {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    text-align: center
  }
  .complete-limit__txt {
    font-size: clamp(16px, 2.8659160696vw, 28px)
  }
  .l-footer .complete-limit__txt {
    font-size: clamp(22px, 3.1729785056vw, 31px)
  }
  .movie {
    padding-top: 80px;
    padding-bottom: 80px
  }
  .movie .c-title {
    margin-bottom: 42px
  }
  .movie__list {
    max-width: 680px;
    margin-inline: auto;
    gap: 38px
  }
  .movie__item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 0
  }
  .movie__item .movie__title {
    margin-left: 40px
  }
  .movie__item:nth-child(even) {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
  }
  .movie__item:nth-child(even) .movie__title {
    margin-right: 40px;
    margin-left: auto
  }
  .movie__title {
    padding-bottom: 10px
  }
  .concept {
    min-height: 141.8666666667vw;
    padding-top: 486px;
    padding-right: 0;
    padding-left: 0
  }
  .concept::after {
    background: url("../img/bg-concept_sp.jpg") center top no-repeat var(--color-black);
    background-size: 100% auto
  }
  .concept .c-title {
    margin-bottom: 32px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
  }
  .concept__title {
    margin-bottom: 24px;
    font-size: calc(26/10*1rem)
  }
  .concept__title .is-label1 {
    translate: -10px 0
  }
  .concept__title .is-label3 {
    font-size: calc(26/10*1rem)
  }
  .concept__bgconts {
    position: absolute;
    top: 486px;
    bottom: 0;
    left: 0;
    max-width: 100%
  }
  .concept__conts {
    position: relative;
    left: 0;
    max-width: 100%;
    padding: 40px 20px
  }
  .point {
    padding-top: 60px;
    padding-bottom: 60px
  }
  .point .c-title {
    margin-bottom: 36px
  }
  .point__list {
    gap: 48px
  }
  .point__item {
    padding-block: 42px
  }
  .point__item:nth-child(odd) .point__img {
    translate: 0 0
  }
  .point__item:nth-child(odd) .point__text {
    -webkit-padding-end: 0;
    padding-inline-end: 0
  }
  .point__item:nth-child(even) .point__text {
    -webkit-padding-start: 0;
    padding-inline-start: 0
  }
  .point__item:nth-child(2) .point__title {
    -webkit-margin-start: 0;
    margin-inline-start: 0
  }
  .point__item .flow__notice {
    display: block
  }
  .point__contents {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    padding-inline: 20px;
    gap: 8px
  }
  .point__title {
    height: auto
  }
  .point__title::before {
    bottom: 88px;
    left: 0
  }
  .point__title::after {
    bottom: 90px;
    left: 52px;
    height: 64px
  }
  .point__img {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100vw;
    margin-inline: -20px
  }
  .point__thumbnail {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100vw;
    margin-inline: -20px
  }
  .point__embed {
    max-width: 758px
  }
  .point__hgroup {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    margin-bottom: 32px;
    gap: 4px
  }
  .point__hgroup--title {
    -webkit-padding-start: 0;
    padding-inline-start: 0
  }
  .point__hgroup--title::before {
    bottom: 88px;
    left: 0
  }
  .point__hgroup--title::after {
    bottom: 90px;
    left: 52px
  }
  .point__hgroup--text {
    font-size: calc(13/10*1rem);
    line-height: 1.9230769231
  }
  .point__rushblock--title {
    font-size: calc(24/10*1rem);
    line-height: 1.1666666667
  }
  .point__rushblock--text {
    font-size: calc(12/10*1rem);
    line-height: 1.4166666667
  }
  .direction__embed {
    max-width: 758px
  }
  .flow {
    padding-top: 90px;
    padding-bottom: 46px
  }
  .flow__notice--item {
    font-size: calc(12/10*1rem);
    line-height: 1.4166666667
  }
  .character__tabs {
    left: 50%;
    width: 100%;
    max-width: calc(100% - 40px);
    translate: -50% 0
  }
  .music {
    padding-top: 48px;
    padding-bottom: 48px;
    background: url("../img/bg-music_sp.jpg") center bottom no-repeat;
    background-size: cover
  }
  .is-fan .spec__inner {
    margin-top: 24px;
    gap: 0
  }
  .is-fan .spec__graph {
    margin-top: 50px
  }
  .spec__notice--item {
    font-size: calc(12/10*1rem);
    line-height: 1.4166666667
  }
}
@media screen and (max-width: 768px) {
  .spec__inner {
    gap: 40px;
    -ms-grid-rows: auto 40px auto 40px auto;
    grid-template-areas: "data""graph""notice";
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr
  }
  .spec__inner > .flow__notice {
    -ms-grid-row: 5;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1
  }
  .spec__data {
    -ms-grid-row: 1;
    -ms-grid-column: 1
  }
  .spec__graph {
    -ms-grid-row: 3;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1
  }
  .spec__inner > .spec__notice {
    -ms-grid-row: 5;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1
  }
}
@media screen and (max-width: 767px) {
  .complete-limit {
    padding-top: 10px;
    padding-bottom: 10px
  }
  .l-footer .complete-limit {
    padding-top: 24px;
    padding-bottom: 24px
  }
  .c-title .is-mainlabel {
    font-size: calc(30/10*1rem)
  }
  .c-title .is-sublabel {
    font-size: calc(20/10*1rem)
  }
  .movie {
    padding-top: 60px;
    padding-bottom: 60px
  }
  .movie::before {
    background: url("../img/bg-movie_sp.jpg") center top no-repeat var(--color-black);
    background-size: cover
  }
  .movie .c-title {
    margin-bottom: 36px
  }
  .movie__title .is-mainlabel {
    font-size: calc(19/10*1rem)
  }
  .movie__title .is-sublabel {
    font-size: calc(9/10*1rem)
  }
  .movie__thumbnail {
    max-width: 100%
  }
  .movie__embed--play {
    width: 40px;
    height: 40px
  }
  .point__embed--play {
    width: 40px;
    height: 40px
  }
  .point__text {
    padding-top: 8px
  }
  .point__rushblock {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    gap: 32px
  }
  .direction {
    margin-bottom: 60px;
    background: url("../img/bg-direction_sp.jpg") center no-repeat;
    background-size: cover
  }
  .direction__container {
    gap: 16px
  }
  .direction__item.is-2nd {
    margin-top: -48px
  }
  .direction__item.is-4th {
    margin-top: 196px;
    background: url("../img/img-direction4_sp.jpg") center no-repeat;
    background-size: 100% auto
  }
  .direction__title {
    translate: 0 44px
  }
  .is-2nd .direction__title {
    translate: 0 80px
  }
  .is-4th .direction__title {
    margin-bottom: -164px;
    translate: 0 calc(-100% + 72px)
  }
  .direction__inner {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    padding-bottom: 48px;
    gap: 28px
  }
  .direction__contents {
    gap: 32px
  }
  .direction__contents--text {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
  }
  .direction__contents--desc {
    justify-items: center;
    gap: 24px
  }
  .direction__embed--play {
    width: 40px;
    height: 40px
  }
  .story {
    padding-top: 40px;
    background: url("../img/bg-contents_sp.jpg") center no-repeat;
    background-size: cover
  }
  .story .c-title {
    margin-bottom: 35px
  }
  .story__inner {
    padding-top: 88px
  }
  .story__title {
    margin-bottom: 40px
  }
  .story__title .is-label1 {
    font-size: calc(23/10*1rem)
  }
  .story__title .is-label2 {
    font-size: calc(28/10*1rem)
  }
  .story__img {
    max-width: 335px
  }
  .story__img .is-2nd {
    top: 410px;
    right: -20px
  }
  .story__img .is-3rd {
    top: 450px;
    left: -20px
  }
  .introduction__container {
    padding-top: 120px;
    padding-bottom: 120px
  }
  .introduction__container .c-title .is-number {
    top: calc(100% - 176px);
    left: 4px
  }
  .introduction__container .c-title .is-number img {
    width: 26px;
    height: auto
  }
  .introduction__container .c-title .is-mainlabel {
    top: calc(100% - 480px);
    right: auto;
    left: 4px
  }
  .introduction__container .c-title .is-mainlabel img {
    width: 26px;
    height: auto
  }
  .introduction__container.is-1st {
    background: url("../img/bg-introduction1_sp.jpg") center top no-repeat;
    background-size: cover
  }
  .introduction__container.is-1st::before {
    height: 2px
  }
  .introduction__container.is-1st::after {
    height: 345px;
    background: url("../img/separate-introduction_sp.png") center no-repeat
  }
  .introduction__container.is-2nd {
    background: url("../img/bg-introduction2_sp.jpg") center bottom no-repeat;
    background-size: cover
  }
  .introduction__frame {
    padding: 32px 20px
  }
  .introduction__frame::before, .introduction__frame::after {
    width: 100%;
    background: url("../img/frame-introduction_sp.svg") left top no-repeat;
    background-size: contain
  }
  .introduction__frame::before {
    left: -20px
  }
  .introduction__frame::after {
    right: -20px
  }
  .introduction__contents {
    padding: 40px 30px 60px;
    gap: 40px
  }
  .introduction__contents::before {
    clip-path: polygon(44px 0%, 70% 0%, 100% 0%, 100% calc(100% - 60px), calc(100% - 44px) 100%, 0% 100%, 0% 70%, 0% 60px)
  }
  .introduction__contents--word {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
  }
  .introduction__contents--txt {
    line-height: 2.25
  }
  .character .c-title {
    top: 40px
  }
  .character__tabs {
    top: 84px
  }
  .character__container {
    -webkit-padding-before: 230px;
    padding-block-start: 230px;
    -webkit-padding-after: 62px;
    height: 652px;
    padding-block-end: 62px
  }
  .character__container#ghoul {
    background: url("../img/bg-character-ghoul_sp.jpg") center no-repeat;
    background-size: cover
  }
  .character__container#human {
    background: url("../img/bg-character-human_sp.jpg") center top no-repeat;
    background-size: cover
  }
  .character__trigger {
    width: 200px
  }
  .character-slide .swiper {
    -webkit-padding-end: 20px;
    padding-inline-end: 20px
  }
  .character-slide .swiper-slide {
    width: 100% !important;
    max-width: 200px
  }
  .character-slide__controller {
    margin-top: 48px;
    gap: 40px 60px;
    -webkit-margin-end: -20px;
    margin-inline-end: -20px;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
  }
  .character-slide__controller .swiper-scrollbar {
    max-width: 100%;
    height: 6px;
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1
  }
  .character-slide__controller .swiper-scrollbar-drag {
    height: 6px
  }
  .character-slide {
    display: contents
  }
  .character-modal .modal__overlay {
    padding: 0
  }
  .character-modal .modal__container {
    max-width: 100%;
    height: 100%
  }
  .character-modal .modal__close {
    z-index: 10;
    position: fixed;
    top: 10px;
    right: 10px;
    translate: 0 0
  }
  .character-modalslide {
    height: 100%;
    padding: 42px 0 0px;
    overflow-y: auto
  }
  #character-ghoul .character-modalslide {
    background: url("../img/modal-bgghoul_sp.jpg") center top no-repeat;
    background-size: cover
  }
  #character-human .character-modalslide {
    background: url("../img/modal-bghuman_sp.jpg") center top no-repeat;
    background-size: cover
  }
  .character-modalslide__item {
    grid-template-areas: "name""chara""inner";
    max-width: calc(100% - 40px);
    margin-inline: auto;
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    -ms-grid-rows: 1fr 0px auto;
    grid-template-rows: 1fr auto;
    gap: 0px;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    height: auto
  }
  .character-modalslide__img {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
  }
  .character-modalslide__img img {
    position: static;
    max-width: 267px
  }
  .character-modalslide__hgroup {
    -webkit-padding-after: 6px;
    padding-block-end: 6px
  }
  .character-modalslide__hgroup::after {
    bottom: -4px;
    width: 58px;
    height: 4px;
    background: url("../img/modal-character-deco_sp.svg") right center no-repeat;
    background-size: contain
  }
  .character-modalslide__name {
    font-size: clamp(40px, 5.2151238592vw, 45px);
    line-height: 1.1777777778
  }
  .character-modalslide__cv {
    font-size: calc(18/10*1rem);
    line-height: 1.1666666667
  }
  .character-modalslide__img {
    -ms-grid-row: 3;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1
  }
  .character-modalslide__hgroup {
    -ms-grid-row: 1;
    -ms-grid-column: 1
  }
  .character-modalslide__inner {
    -ms-grid-row: 5;
    -ms-grid-column: 1
  }
  .character-modalslide__inner {
    width: 100%;
    height: auto;
    margin-top: 24px;
    margin-left: auto;
    padding: 20px;
    translate: 20px 0
  }
  .character-modalslide__text {
    line-height: 2.1428571429
  }
  .spec {
    padding-top: 56px;
    padding-bottom: 56px;
    background: url("../img/bg-spec_sp.jpg") center top no-repeat;
    background-size: contain
  }
  .spec__contents {
    margin-top: -48px
  }
}
@media screen and (max-width: 576px) {
  .concept {
    padding-top: 248px
  }
  .concept__title {
    font-size: calc(24/10*1rem)
  }
  .concept__title .is-label1 {
    translate: -10px 0
  }
  .concept__title .is-label3 {
    font-size: calc(24/10*1rem)
  }
  .concept__bgconts {
    top: 248px
  }
  .concept__conts {
    padding-right: 16px;
    padding-left: 16px
  }
  .introduction__frame {
    padding: 20px 0
  }
  .introduction__contents {
    padding-right: 20px;
    padding-left: 20px
  }
  .character__tabsitem {
    translate: 7px 21px
  }
  .character__tabsitem:nth-child(2) {
    translate: -7px 0
  }
  .character__title {
    top: 190px
  }
  .spec__case {
    margin-top: -40px
  }
  .is-fan .spec__case {
    margin-top: -48px
  }
  .spec__img {
    margin-top: -96px;
    margin-inline: -20px
  }
  .spec__img img {
    width: auto;
    max-width: 132%
  }
  .spec__inner {
    margin-top: -16px
  }
  .spec__contents {
    margin-top: -16px
  }
  .spec__data--list {
    gap: 12px
  }
  .spec__data--title {
    font-size: calc(20/10*1rem)
  }
  .is-fan .spec__data--title {
    font-size: calc(16/10*1rem)
  }
  .spec__data--desc {
    font-size: calc(20/10*1rem)
  }
  .is-fan .spec__data--desc {
    font-size: calc(20/10*1rem)
  }
  .spec__data--text {
    font-size: calc(20/10*1rem)
  }
  .modal__overlay {
    padding: 40px 20px
  }
  .modal__close {
    width: 50px;
    height: 50px;
    margin-bottom: 10px
  }
  .modal__container {
    translate: 0 -50px
  }
}
@media screen and (max-width: 360px) {
  .complete-limit {
    padding-right: 10px;
    padding-left: 10px
  }
  .c-section {
    padding-right: 10px;
    padding-left: 10px
  }
  .movie {
    padding-right: 16px;
    padding-left: 16px
  }
  .concept__title span {
    display: contents
  }
  .concept__conts {
    padding-right: 10px;
    padding-left: 10px
  }
  .point__title {
    font-size: calc(34/10*1rem)
  }
  .story__container {
    margin-inline: -10px
  }
  .story__img .is-2nd {
    right: -10px
  }
  .story__img .is-3rd {
    left: -10px
  }
  .introduction__container {
    padding-inline: 20px
  }
  .character__tabs {
    max-width: calc(100% - 20px)
  }
  .character__title {
    top: 172px
  }
  .character-modalslide__item {
    max-width: calc(100% - 32px)
  }
  .character-modalslide__name {
    font-size: clamp(35px, 10.6666666667vw, 45px)
  }
  .character-modalslide__cv {
    font-size: clamp(14px, 4.2666666667vw, 18px)
  }
  .character-modalslide__inner {
    padding: 10px
  }
  .spec__container {
    margin-inline: -16px
  }
  .spec__container.is-fan {
    margin-inline: auto
  }
  .spec__data--title {
    font-size: calc(18/10*1rem)
  }
  .is-fan .spec__data--title {
    font-size: calc(15/10*1rem)
  }
  .spec__data--desc {
    font-size: calc(18/10*1rem)
  }
  .is-fan .spec__data--desc {
    font-size: calc(18/10*1rem)
  }
  .spec__data--text {
    font-size: calc(18/10*1rem)
  }
}
@media (any-hover: hover) {
  .modal__close:hover {
    opacity: .5
  }
}
/*# sourceMappingURL=style.css.map */