.character__more {
  position: absolute;
  bottom: -21.4vw;
  right: -16.7vw;
  height: 27.3vw;
  width: 27.3vw;
  z-index: 11;
}
@media (min-width: 835px) {
  .character__more {
    position: absolute;
    left: -28px;
    bottom: -50px;
    height: max(9.1vw, 175px);
    width: max(9.1vw, 175px);
  }
}
.character__more .body {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 19.6vw;
  transform: translate(-50%, -50%);
  width: 16.4vw;
}
@media (min-width: 835px) {
  .character__more .body {
    height: max(6.3vw, 121px);
    width: max(5.4vw, 105px);
  }
}
.character__more .body:after {
  position: absolute;
  top: 50%;
  left: 50%;
  background: url(../../assets/img/top/introduction/ico_plus.svg) no-repeat 0 0/100%;
  content: "";
  height: 6.4vw;
  transform: translate(-50%, -50%);
  transition: none;
  transition: all 0.3s 0s ease;
  width: 6.4vw;
}
@media (min-width: 835px) {
  .character__more .body:after {
    height: max(2vw, 40px);
    width: max(2vw, 40px);
  }
}
.character__more .body:before {
  position: absolute;
  top: 0;
  left: 0;
  background: #fff;
  -webkit-clip-path: polygon(0 25%, 50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%);
          clip-path: polygon(0 25%, 50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%);
  content: "";
  height: 100%;
  transition: none;
  transition: all 0.3s 0s ease;
  width: 100%;
}
.character__more .txt {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-animation: twittertxtanim 50s 0s linear infinite;
          animation: twittertxtanim 50s 0s linear infinite;
  background: #fff;
  background: url(../../assets/img/top/introduction/txt_more.svg) no-repeat 0 0/100%;
  height: 100%;
  transform: translate(-50%, -50%);
  width: 100%;
}
@media (min-width: 835px) {
  .character__more .txt {
    height: max(9.1vw, 176px);
    width: max(9.1vw, 175px);
  }
}
.character__more:hover .body:before {
  transform: rotate(180deg) scale(0.95);
}
.character__more:hover .body:after {
  transform: translate(-50%, -50%) scale(1.05);
}
.character__more:hover .txt {
  -webkit-animation: twittertxtanim 10s 0s linear infinite;
          animation: twittertxtanim 10s 0s linear infinite;
}

.character {
  position: relative;
}

.character__head {
  margin: 0 auto;
  width: 64.9vw;
}
@media (min-width: 835px) {
  .character__head {
    width: 564px;
  }
}

.character__field {
  background: url(../../assets/img/top/character/ph_bgmain_nrw.svg) no-repeat 0 0/100%;
  height: 97.3vw;
  margin: 64.6vw auto 0;
  position: relative;
  width: 61.3vw;
}
@media (min-width: 835px) {
  .character__field {
    background: url(../../assets/img/top/character/ph_bgmain.svg) no-repeat 0 0/100%;
    height: 858px;
    margin: 148px auto 60px;
    width: 978px;
  }
}

.character__field__phmask {
  opacity: 0;
  pointer-events: none;
  transform: translate(0, 10%);
  width: 100%;
  z-index: 11;
}
@media (max-width: 834px) {
  .character__field__phmask {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%);
            clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%);
    height: 61.3vw;
    overflow: hidden;
    width: 41.4vw;
    position: absolute;
    top: -64.7vw;
    left: -13.9vw;
  }
}
@media (min-width: 835px) {
  .character__field__phmask {
    position: absolute;
    top: -155px;
    left: 0;
    -webkit-clip-path: polygon(0 0%, 0 0, 0 0, 100% 0%, 100% 78.9%, 62% 100%, 50% 93.4%, 38% 100%, 0 79.1%, 0 0);
            clip-path: polygon(0 0%, 0 0, 0 0, 100% 0%, 100% 78.9%, 62% 100%, 50% 93.4%, 38% 100%, 0 79.1%, 0 0);
    height: calc(100% + 155px);
  }
}
.character__field__phmask:before {
  content: "";
}
@media (max-width: 834px) {
  .character__field__phmask:before {
    background: url(../../assets/img/top/character/ph_chbg.svg) no-repeat 0 0/100%;
    height: 47.8vw;
    width: 41.4vw;
    position: absolute;
    left: 0;
    bottom: 0;
  }
}
.character__field__phmask.-reveal {
  opacity: 1;
  transform: translate(0, 0);
  transition: all 1s 0s ease;
}

@-webkit-keyframes chphin {
  0% {
    opacity: 0;
    transform: scale(1.05);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes chphin {
  0% {
    opacity: 0;
    transform: scale(1.05);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.character__field__ph {
  position: absolute;
  left: -24vw;
  bottom: -97vw;
  height: 166.4vw;
  pointer-events: none;
  width: 96vw;
}
@media (min-width: 835px) {
  .character__field__ph {
    position: absolute;
    left: 0;
    bottom: -155px;
    height: 1165px;
    pointer-events: none;
    width: 672px;
  }
}
[data-character="1"] .character__field__ph .obj {
  background: url(../../assets/img/top/character/ch/ph_1.png) no-repeat 0 0/100%;
}
[data-character="2"] .character__field__ph .obj {
  background: url(../../assets/img/top/character/ch/ph_2.png) no-repeat 0 0/100%;
}
[data-character="3"] .character__field__ph .obj {
  background: url(../../assets/img/top/character/ch/ph_3.png) no-repeat 0 0/100%;
}
[data-character="4"] .character__field__ph .obj {
  background: url(../../assets/img/top/character/ch/ph_4.png) no-repeat 0 0/100%;
}
[data-character="5"] .character__field__ph .obj {
  background: url(../../assets/img/top/character/ch/ph_5.png) no-repeat 0 0/100%;
}
[data-character="6"] .character__field__ph .obj {
  background: url(../../assets/img/top/character/ch/ph_6.png) no-repeat 0 0/100%;
}
[data-character="7"] .character__field__ph .obj {
  background: url(../../assets/img/top/character/ch/ph_7.png) no-repeat 0 0/100%;
}
[data-character="8"] .character__field__ph .obj {
  background: url(../../assets/img/top/character/ch/ph_8.png) no-repeat 0 0/100%;
}
[data-character="9"] .character__field__ph .obj {
  background: url(../../assets/img/top/character/ch/ph_9.png) no-repeat 0 0/100%;
}
[data-character="10"] .character__field__ph .obj {
  background: url(../../assets/img/top/character/ch/ph_10.png) no-repeat 0 0/100%;
}
.character__field__ph .obj {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.-change .character__field__ph .obj {
  -webkit-animation: chphin 1s 0s cubic-bezier(0.85, 0, 0.15, 1);
          animation: chphin 1s 0s cubic-bezier(0.85, 0, 0.15, 1);
}
@media (max-width: 834px) {
  [data-character="2"] .character__field__ph {
    left: -26.7vw;
  }
}
@media (max-width: 834px) {
  [data-character="4"] .character__field__ph {
    left: -31vw;
  }
}
@media (max-width: 834px) {
  [data-character="7"] .character__field__ph {
    left: -19vw;
  }
}
@media (max-width: 834px) {
  [data-character="9"] .character__field__ph {
    left: -20vw;
  }
}

@-webkit-keyframes chobjin {
  0% {
    transform: scaleX(0);
  }
  100% {
    transform: scaleX(1);
  }
}

@keyframes chobjin {
  0% {
    transform: scaleX(0);
  }
  100% {
    transform: scaleX(1);
  }
}
@-webkit-keyframes chobjbain {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes chobjbain {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes chnamein {
  0% {
    opacity: 0;
    transform: translate(0, -10%);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes chnamein {
  0% {
    opacity: 0;
    transform: translate(0, -10%);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
.character__field__infomask {
  height: 100%;
  position: relative;
}
@media (min-width: 835px) {
  .character__field__infomask {
    -webkit-clip-path: polygon(36% 3%, 49% 10.5%, 62% 1.5%, 98.7% 25.8%, 98.7% 74.2%, 62% 98.4%, 50% 90%, 38% 98.4%, 1.2% 74.2%, 1.2% 26%);
            clip-path: polygon(36% 3%, 49% 10.5%, 62% 1.5%, 98.7% 25.8%, 98.7% 74.2%, 62% 98.4%, 50% 90%, 38% 98.4%, 1.2% 74.2%, 1.2% 26%);
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
}

@media (max-width: 834px) {
  .character__info {
    height: calc(100% - 2.6vw);
    position: relative;
    top: 1.3vw;
  }
}
@media (min-width: 835px) {
  .character__info {
    height: 100%;
    margin-left: auto;
    margin-right: 116px;
    padding-top: 125px;
    width: 335px;
  }
}
[data-character="1"] .character__info {
  color: #a8b3b2;
}
[data-character="1"] .character__info .obj {
  background: #a8b3b2;
}
[data-character="1"] .character__info .obj:after, [data-character="1"] .character__info .obj:before {
  border-color: #a8b3b2;
}
[data-character="2"] .character__info {
  color: #cc481d;
}
[data-character="2"] .character__info .obj {
  background: #cc481d;
}
[data-character="2"] .character__info .obj:after, [data-character="2"] .character__info .obj:before {
  border-color: #cc481d;
}
[data-character="3"] .character__info {
  color: #676767;
}
[data-character="3"] .character__info .obj {
  background: #676767;
}
[data-character="3"] .character__info .obj:after, [data-character="3"] .character__info .obj:before {
  border-color: #676767;
}
[data-character="4"] .character__info {
  color: #8aa600;
}
[data-character="4"] .character__info .obj {
  background: #8aa600;
}
[data-character="4"] .character__info .obj:after, [data-character="4"] .character__info .obj:before {
  border-color: #8aa600;
}
[data-character="5"] .character__info {
  color: #7a94cc;
}
[data-character="5"] .character__info .obj {
  background: #7a94cc;
}
[data-character="5"] .character__info .obj:after, [data-character="5"] .character__info .obj:before {
  border-color: #7a94cc;
}
[data-character="6"] .character__info {
  color: #754c99;
}
[data-character="6"] .character__info .obj {
  background: #754c99;
}
[data-character="6"] .character__info .obj:after, [data-character="6"] .character__info .obj:before {
  border-color: #754c99;
}
[data-character="7"] .character__info {
  color: #733a2d;
}
[data-character="7"] .character__info .obj {
  background: #733a2d;
}
[data-character="7"] .character__info .obj:after, [data-character="7"] .character__info .obj:before {
  border-color: #733a2d;
}
[data-character="8"] .character__info {
  color: #008c8c;
}
[data-character="8"] .character__info .obj {
  background: #008c8c;
}
[data-character="8"] .character__info .obj:after, [data-character="8"] .character__info .obj:before {
  border-color: #008c8c;
}
[data-character="9"] .character__info {
  color: #005e66;
}
[data-character="9"] .character__info .obj {
  background: #005e66;
}
[data-character="9"] .character__info .obj:after, [data-character="9"] .character__info .obj:before {
  border-color: #005e66;
}
[data-character="10"] .character__info {
  color: #bfb713;
}
[data-character="10"] .character__info .obj {
  background: #bfb713;
}
[data-character="10"] .character__info .obj:after, [data-character="10"] .character__info .obj:before {
  border-color: #bfb713;
}
.character__info .head {
  position: relative;
}
@media (max-width: 834px) {
  .character__info .head {
    position: absolute;
    top: -25.4vw;
    right: -13.6vw;
  }
}
.character__info .obj {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 100%;
}
.character__info .obj:before, .character__info .obj:after {
  position: absolute;
  top: 0;
  left: 0;
  border: 1px solid #ddd;
  border-radius: 50%;
  content: "";
  height: 9px;
  transform: translate(-100%, -50%);
  width: 9px;
}
.character__info .obj:after {
  position: absolute;
  top: 0;
  left: auto;
  right: 0;
  transform: translate(100%, -50%);
}
@media (max-width: 834px) {
  .character__info .obj {
    display: none;
  }
}
.-change .character__info .obj {
  -webkit-animation: chobjin 1s 0s cubic-bezier(0.85, 0, 0.15, 1);
          animation: chobjin 1s 0s cubic-bezier(0.85, 0, 0.15, 1);
}
.character__info .name {
  letter-spacing: 0.15em;
  padding-bottom: 25px;
  font-size: 2.5rem;
}
@media (max-width: 834px) {
  .character__info .name {
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    color: #fff;
    font-size: 4.5vw;
    height: 8.6vw;
    line-height: 8.4vw;
    padding-bottom: 0;
    text-align: center;
    width: 41.3vw;
  }
}
@media (max-width: 834px) {
  [data-character="1"] .character__info .name {
    background: url(../../assets/img/top/character/ch_info/ph_namebg_1.svg) no-repeat 0 0/100%;
  }
}
@media (max-width: 834px) {
  [data-character="2"] .character__info .name {
    background: url(../../assets/img/top/character/ch_info/ph_namebg_2.svg) no-repeat 0 0/100%;
  }
}
@media (max-width: 834px) {
  [data-character="3"] .character__info .name {
    background: url(../../assets/img/top/character/ch_info/ph_namebg_3.svg) no-repeat 0 0/100%;
  }
}
@media (max-width: 834px) {
  [data-character="4"] .character__info .name {
    background: url(../../assets/img/top/character/ch_info/ph_namebg_4.svg) no-repeat 0 0/100%;
  }
}
@media (max-width: 834px) {
  [data-character="5"] .character__info .name {
    background: url(../../assets/img/top/character/ch_info/ph_namebg_5.svg) no-repeat 0 0/100%;
  }
}
@media (max-width: 834px) {
  [data-character="6"] .character__info .name {
    background: url(../../assets/img/top/character/ch_info/ph_namebg_6.svg) no-repeat 0 0/100%;
  }
}
@media (max-width: 834px) {
  [data-character="7"] .character__info .name {
    background: url(../../assets/img/top/character/ch_info/ph_namebg_7.svg) no-repeat 0 0/100%;
  }
}
@media (max-width: 834px) {
  [data-character="8"] .character__info .name {
    background: url(../../assets/img/top/character/ch_info/ph_namebg_8.svg) no-repeat 0 0/100%;
  }
}
@media (max-width: 834px) {
  [data-character="9"] .character__info .name {
    background: url(../../assets/img/top/character/ch_info/ph_namebg_9.svg) no-repeat 0 0/100%;
  }
}
@media (max-width: 834px) {
  [data-character="10"] .character__info .name {
    background: url(../../assets/img/top/character/ch_info/ph_namebg_10.svg) no-repeat 0 0/100%;
  }
}
.-change .character__info .name {
  -webkit-animation: chnamein 0.3s 0.6s ease forwards;
          animation: chnamein 0.3s 0.6s ease forwards;
  opacity: 0;
}
.character__info .name_en {
  font-weight: 700;
  letter-spacing: 0.1em;
  position: relative;
}
@media (max-width: 834px) {
  .character__info .name_en {
    font-size: 0.65625rem;
    color: #fff;
    letter-spacing: 0.2em;
    text-align: center;
    width: 100%;
    position: absolute;
    top: 10vw;
    left: 0;
  }
}
@media (min-width: 835px) {
  .character__info .name_en {
    font-size: 0.9375rem;
    margin-bottom: 5px;
  }
}
.-change .character__info .name_en {
  -webkit-animation: chnamein 0.3s 0.4s ease forwards;
          animation: chnamein 0.3s 0.4s ease forwards;
  opacity: 0;
}
.character__info .twitter {
  height: 100%;
  overflow-y: scroll;
  padding-bottom: 100px;
  position: relative;
}
@media (min-width: 835px) {
  .character__info .twitter {
    height: calc(100% - 115px);
    padding: 0 10px;
    padding-bottom: 300px;
  }
}

.character__field__saccount {
  color: #fff;
  font-weight: 700;
  line-height: 1;
}
@media (max-width: 834px) {
  .character__field__saccount {
    position: absolute;
    left: -10.7vw;
    bottom: -23.4vw;
    font-size: 0.5625rem;
    padding-top: 8vw;
    text-align: center;
  }
}
@media (min-width: 835px) {
  .character__field__saccount {
    position: absolute;
    left: auto;
    bottom: -25px;
    right: 35px;
    font-size: 0.875rem;
    padding-top: 40px;
    text-align: right;
  }
}
.character__field__saccount:before {
  position: absolute;
  top: 0;
  left: calc(50% - 5.6vw);
  background: url(../../assets/img/top/character/ico_plus.svg) no-repeat 0 0/100%;
  content: "";
  height: 4vw;
  width: 11.3vw;
}
@media (min-width: 835px) {
  .character__field__saccount:before {
    position: absolute;
    top: 0;
    left: auto;
    right: 0;
    height: 27px;
    width: 72px;
  }
}
.-change .character__field__saccount:before {
  -webkit-animation: chsaccAnim 1s 0s cubic-bezier(0.85, 0, 0.15, 1);
          animation: chsaccAnim 1s 0s cubic-bezier(0.85, 0, 0.15, 1);
}
.character__field__saccount .name {
  display: block;
  margin-top: 5px;
}

.character__field__line {
  background: #fff;
  height: 12.6vw;
  transform: translate(-50%, 100%);
  transform-origin: 0 0;
  width: 1px;
}
.character__field__line.-l1 {
  position: absolute;
  left: 25%;
  bottom: -6.7vw;
}
.character__field__line.-l2 {
  position: absolute;
  left: 75%;
  bottom: -6.7vw;
}
.character__field__line:before, .character__field__line:after {
  position: absolute;
  top: 0;
  left: 50%;
  border: 1px solid #fff;
  border-radius: 50%;
  content: "";
  height: 1.2vw;
  transform: translate(-50%, -100%);
  width: 1.2vw;
}
.character__field__line:after {
  position: absolute;
  top: auto;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 100%);
}

@-webkit-keyframes chsnameSpin {
  0% {
    opacity: 0;
    transform: rotate(0deg) scale(1.2);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: rotate(360deg) scale(1);
  }
}

@keyframes chsnameSpin {
  0% {
    opacity: 0;
    transform: rotate(0deg) scale(1.2);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: rotate(360deg) scale(1);
  }
}
@-webkit-keyframes chsaccAnim {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes chsaccAnim {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
.character__field__sname {
  color: #fff;
  font-weight: 700;
  line-height: 1;
}
@media (max-width: 834px) {
  .character__field__sname {
    position: absolute;
    left: 50%;
    bottom: -23.4vw;
    font-size: 0.5625rem;
    padding-top: 11.3vw;
    text-align: center;
    transform: translate(-50%, 0);
  }
}
@media (min-width: 835px) {
  .character__field__sname {
    position: absolute;
    top: -25px;
    left: auto;
    bottom: auto;
    right: 35px;
    font-size: 0.875rem;
    padding-bottom: 80px;
    text-align: right;
  }
}
.character__field__sname:before {
  position: absolute;
  top: 0;
  left: calc(50% - 4.6vw);
  content: "";
  height: 9.3vw;
  width: 9.3vw;
}
@media (min-width: 835px) {
  .character__field__sname:before {
    position: absolute;
    top: auto;
    left: auto;
    bottom: 0;
    right: 0;
    height: 66px;
    width: 66px;
  }
}
[data-character="1"] .character__field__sname:before {
  background: url(../../assets/img/top/character/ch_ico/ico_1.png) no-repeat 50% 50%/100%;
}
[data-character="2"] .character__field__sname:before {
  background: url(../../assets/img/top/character/ch_ico/ico_2.png) no-repeat 50% 50%/100%;
}
[data-character="3"] .character__field__sname:before {
  background: url(../../assets/img/top/character/ch_ico/ico_3.png) no-repeat 50% 50%/100%;
}
[data-character="4"] .character__field__sname:before {
  background: url(../../assets/img/top/character/ch_ico/ico_4.png) no-repeat 50% 50%/100%;
}
[data-character="5"] .character__field__sname:before {
  background: url(../../assets/img/top/character/ch_ico/ico_5.png) no-repeat 50% 50%/100%;
}
[data-character="6"] .character__field__sname:before {
  background: url(../../assets/img/top/character/ch_ico/ico_6.png) no-repeat 50% 50%/100%;
}
[data-character="7"] .character__field__sname:before {
  background: url(../../assets/img/top/character/ch_ico/ico_7.png) no-repeat 50% 50%/100%;
}
[data-character="8"] .character__field__sname:before {
  background: url(../../assets/img/top/character/ch_ico/ico_8.png) no-repeat 50% 50%/100%;
}
[data-character="9"] .character__field__sname:before {
  background: url(../../assets/img/top/character/ch_ico/ico_9.png) no-repeat 50% 50%/100%;
}
[data-character="10"] .character__field__sname:before {
  background: url(../../assets/img/top/character/ch_ico/ico_10.png) no-repeat 50% 50%/100%;
}
.-change .character__field__sname:before {
  -webkit-animation: chsnameSpin 1s 0s cubic-bezier(0.85, 0, 0.15, 1);
          animation: chsnameSpin 1s 0s cubic-bezier(0.85, 0, 0.15, 1);
}
.character__field__sname .name {
  margin-top: 5px;
}

.character__nav {
  align-items: center;
  display: flex;
  justify-content: center;
}
@media (max-width: 834px) {
  .character__nav {
    position: absolute;
    top: 26.6vw;
    left: 50.6vw;
    width: 48vw;
  }
}
.character__nav .arw {
  background: url(../../assets/img/top/character/ico_arw.svg) no-repeat 0 0/100%;
  height: 10px;
  margin: 0 18px;
  transition: transform 0.3s 0s ease;
  width: 9px;
}
.character__nav .arw:hover {
  transform: scale(1.5);
}
@media (max-width: 834px) {
  .character__nav .arw {
    display: none;
  }
}
.character__nav .arw.-next {
  transform: rotate(180deg);
}
.character__nav .arw.-next:hover {
  transform: scale(1.5) rotate(180deg);
}
.character__nav .list {
  display: flex;
}
@media (max-width: 834px) {
  .character__nav .list {
    flex-wrap: wrap;
    margin: 0 -2.3vw;
    width: 100%;
  }
}
.character__nav .item {
  background: transparent;
  cursor: pointer;
  height: 5.3vw;
  margin: 2.4vw 2.2vw;
  position: relative;
  width: 4.6vw;
}
@media (min-width: 835px) {
  .character__nav .item {
    height: 32px;
    margin: 0 16px;
    width: 28px;
  }
}
.character__nav .item:after {
  position: absolute;
  top: 50%;
  left: 50%;
  background: #a8b3b2;
  -webkit-clip-path: polygon(0 25%, 50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%);
          clip-path: polygon(0 25%, 50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%);
  content: "";
  height: 3.7vw;
  transform: translate(-50%, -50%);
  width: 3.2vw;
}
@media (min-width: 835px) {
  .character__nav .item:after {
    height: 23px;
    width: 20px;
  }
}
.character__nav .item.-active, .character__nav .item:hover {
  background: url(../../assets/img/top/character/ico_hexaline.svg) no-repeat 0 0/100%;
}
.character__nav .item[data-character="1"]:after {
  background: #a8b3b2;
}
.character__nav .item[data-character="2"]:after {
  background: #cc481d;
}
.character__nav .item[data-character="3"]:after {
  background: #676767;
}
.character__nav .item[data-character="4"]:after {
  background: #8aa600;
}
.character__nav .item[data-character="5"]:after {
  background: #7a94cc;
}
.character__nav .item[data-character="6"]:after {
  background: #754c99;
}
.character__nav .item[data-character="7"]:after {
  background: #733a2d;
}
.character__nav .item[data-character="8"]:after {
  background: #008c8c;
}
.character__nav .item[data-character="9"]:after {
  background: #005e66;
}
.character__nav .item[data-character="10"]:after {
  background: #bfb713;
}

@-webkit-keyframes sideinPrev {
  0% {
    opacity: 0;
    transform: translate(-100%, 0) scaleX(1.5);
  }
  100% {
    opacity: 1;
    transform: translate(-100%, 0) scaleX(1);
  }
}

@keyframes sideinPrev {
  0% {
    opacity: 0;
    transform: translate(-100%, 0) scaleX(1.5);
  }
  100% {
    opacity: 1;
    transform: translate(-100%, 0) scaleX(1);
  }
}
@-webkit-keyframes sideinNext {
  0% {
    opacity: 0;
    transform: translate(100%, 0) scaleX(1.5);
  }
  100% {
    opacity: 1;
    transform: translate(100%, 0) scaleX(1);
  }
}
@keyframes sideinNext {
  0% {
    opacity: 0;
    transform: translate(100%, 0) scaleX(1.5);
  }
  100% {
    opacity: 1;
    transform: translate(100%, 0) scaleX(1);
  }
}
.character__field__side {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  background: #000;
  -webkit-clip-path: polygon(0 25%, 50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%);
          clip-path: polygon(0 25%, 50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%);
  cursor: pointer;
  height: 188.4vw;
  width: 163.2vw;
}
@media (min-width: 835px) {
  .character__field__side {
    height: 831px;
    transition: opacity 0.4s 0s ease;
    width: 720px;
  }
}
.character__field__side:after {
  background: url(../../assets/img/top/character/ico_arw_big.svg) no-repeat 0 0/100%;
  content: "";
  height: 9.3vw;
  transition: transform 0.3s 0s ease;
  width: 4.9vw;
}
@media (min-width: 835px) {
  .character__field__side:after {
    height: 45px;
    width: 24px;
  }
}
.character__field__side.-prev {
  position: absolute;
  top: -47%;
  left: 2.3%;
  transform: translate(-100%, 0);
}
.character__field__side.-prev:after {
  position: absolute;
  top: 50%;
  right: 6vw;
  transform: translate(0, -50%) rotate(180deg);
}
@media (min-width: 835px) {
  .character__field__side.-prev:after {
    position: absolute;
    top: 50%;
    right: 23px;
  }
}
@media (min-width: 835px) {
  .character__field__side.-prev {
    position: absolute;
    top: 1.6%;
    left: 1.3%;
  }
}
.-change .character__field__side.-prev {
  -webkit-animation: sideinPrev 1s 0s cubic-bezier(0.85, 0, 0.15, 1);
          animation: sideinPrev 1s 0s cubic-bezier(0.85, 0, 0.15, 1);
  transform-origin: 100% 0;
}
.character__field__side.-next {
  position: absolute;
  top: -47%;
  left: auto;
  right: 2.3%;
  transform: translate(100%, 0);
}
.character__field__side.-next:after {
  position: absolute;
  top: 50%;
  left: 6vw;
  transform: translate(0, -50%);
}
@media (min-width: 835px) {
  .character__field__side.-next:after {
    position: absolute;
    top: 50%;
    left: 23px;
  }
}
@media (min-width: 835px) {
  .character__field__side.-next {
    position: absolute;
    top: 1.6%;
    left: auto;
    right: 1.3%;
  }
}
.-change .character__field__side.-next {
  -webkit-animation: sideinNext 1s 0s cubic-bezier(0.85, 0, 0.15, 1);
          animation: sideinNext 1s 0s cubic-bezier(0.85, 0, 0.15, 1);
  transform-origin: 0 0;
}
@media (min-width: 835px) {
  .character__field__side:hover {
    opacity: 0.75;
  }
  .character__field__side:hover.-prev:after {
    transform: translate(-10px, -50%) rotate(180deg);
  }
  .character__field__side:hover.-next:after {
    transform: translate(10px, -50%);
  }
}
.character__field__side[data-character="1"] {
  background: linear-gradient(-90deg, rgba(168, 179, 178, 0) 85%, #a8b3b2 100%);
}
@media (min-width: 835px) {
  .character__field__side[data-character="1"] {
    background: linear-gradient(-90deg, rgba(168, 179, 178, 0) 30%, #a8b3b2 100%);
  }
}
.character__field__side[data-character="1"].-prev {
  background: linear-gradient(90deg, rgba(168, 179, 178, 0) 85%, #a8b3b2 100%);
}
@media (min-width: 835px) {
  .character__field__side[data-character="1"].-prev {
    background: linear-gradient(90deg, rgba(168, 179, 178, 0) 30%, #a8b3b2 100%);
  }
}
.character__field__side[data-character="2"] {
  background: linear-gradient(-90deg, rgba(204, 72, 29, 0) 85%, #cc481d 100%);
}
@media (min-width: 835px) {
  .character__field__side[data-character="2"] {
    background: linear-gradient(-90deg, rgba(204, 72, 29, 0) 30%, #cc481d 100%);
  }
}
.character__field__side[data-character="2"].-prev {
  background: linear-gradient(90deg, rgba(204, 72, 29, 0) 85%, #cc481d 100%);
}
@media (min-width: 835px) {
  .character__field__side[data-character="2"].-prev {
    background: linear-gradient(90deg, rgba(204, 72, 29, 0) 30%, #cc481d 100%);
  }
}
.character__field__side[data-character="3"] {
  background: linear-gradient(-90deg, rgba(103, 103, 103, 0) 85%, #676767 100%);
}
@media (min-width: 835px) {
  .character__field__side[data-character="3"] {
    background: linear-gradient(-90deg, rgba(103, 103, 103, 0) 30%, #676767 100%);
  }
}
.character__field__side[data-character="3"].-prev {
  background: linear-gradient(90deg, rgba(103, 103, 103, 0) 85%, #676767 100%);
}
@media (min-width: 835px) {
  .character__field__side[data-character="3"].-prev {
    background: linear-gradient(90deg, rgba(103, 103, 103, 0) 30%, #676767 100%);
  }
}
.character__field__side[data-character="4"] {
  background: linear-gradient(-90deg, rgba(138, 166, 0, 0) 85%, #8aa600 100%);
}
@media (min-width: 835px) {
  .character__field__side[data-character="4"] {
    background: linear-gradient(-90deg, rgba(138, 166, 0, 0) 30%, #8aa600 100%);
  }
}
.character__field__side[data-character="4"].-prev {
  background: linear-gradient(90deg, rgba(138, 166, 0, 0) 85%, #8aa600 100%);
}
@media (min-width: 835px) {
  .character__field__side[data-character="4"].-prev {
    background: linear-gradient(90deg, rgba(138, 166, 0, 0) 30%, #8aa600 100%);
  }
}
.character__field__side[data-character="5"] {
  background: linear-gradient(-90deg, rgba(122, 148, 204, 0) 85%, #7a94cc 100%);
}
@media (min-width: 835px) {
  .character__field__side[data-character="5"] {
    background: linear-gradient(-90deg, rgba(122, 148, 204, 0) 30%, #7a94cc 100%);
  }
}
.character__field__side[data-character="5"].-prev {
  background: linear-gradient(90deg, rgba(122, 148, 204, 0) 85%, #7a94cc 100%);
}
@media (min-width: 835px) {
  .character__field__side[data-character="5"].-prev {
    background: linear-gradient(90deg, rgba(122, 148, 204, 0) 30%, #7a94cc 100%);
  }
}
.character__field__side[data-character="6"] {
  background: linear-gradient(-90deg, rgba(117, 76, 153, 0) 85%, #754c99 100%);
}
@media (min-width: 835px) {
  .character__field__side[data-character="6"] {
    background: linear-gradient(-90deg, rgba(117, 76, 153, 0) 30%, #754c99 100%);
  }
}
.character__field__side[data-character="6"].-prev {
  background: linear-gradient(90deg, rgba(117, 76, 153, 0) 85%, #754c99 100%);
}
@media (min-width: 835px) {
  .character__field__side[data-character="6"].-prev {
    background: linear-gradient(90deg, rgba(117, 76, 153, 0) 30%, #754c99 100%);
  }
}
.character__field__side[data-character="7"] {
  background: linear-gradient(-90deg, rgba(115, 58, 45, 0) 85%, #733a2d 100%);
}
@media (min-width: 835px) {
  .character__field__side[data-character="7"] {
    background: linear-gradient(-90deg, rgba(115, 58, 45, 0) 30%, #733a2d 100%);
  }
}
.character__field__side[data-character="7"].-prev {
  background: linear-gradient(90deg, rgba(115, 58, 45, 0) 85%, #733a2d 100%);
}
@media (min-width: 835px) {
  .character__field__side[data-character="7"].-prev {
    background: linear-gradient(90deg, rgba(115, 58, 45, 0) 30%, #733a2d 100%);
  }
}
.character__field__side[data-character="8"] {
  background: linear-gradient(-90deg, rgba(0, 140, 140, 0) 85%, #008c8c 100%);
}
@media (min-width: 835px) {
  .character__field__side[data-character="8"] {
    background: linear-gradient(-90deg, rgba(0, 140, 140, 0) 30%, #008c8c 100%);
  }
}
.character__field__side[data-character="8"].-prev {
  background: linear-gradient(90deg, rgba(0, 140, 140, 0) 85%, #008c8c 100%);
}
@media (min-width: 835px) {
  .character__field__side[data-character="8"].-prev {
    background: linear-gradient(90deg, rgba(0, 140, 140, 0) 30%, #008c8c 100%);
  }
}
.character__field__side[data-character="9"] {
  background: linear-gradient(-90deg, rgba(0, 94, 102, 0) 85%, #005e66 100%);
}
@media (min-width: 835px) {
  .character__field__side[data-character="9"] {
    background: linear-gradient(-90deg, rgba(0, 94, 102, 0) 30%, #005e66 100%);
  }
}
.character__field__side[data-character="9"].-prev {
  background: linear-gradient(90deg, rgba(0, 94, 102, 0) 85%, #005e66 100%);
}
@media (min-width: 835px) {
  .character__field__side[data-character="9"].-prev {
    background: linear-gradient(90deg, rgba(0, 94, 102, 0) 30%, #005e66 100%);
  }
}
.character__field__side[data-character="10"] {
  background: linear-gradient(-90deg, rgba(191, 183, 19, 0) 85%, #bfb713 100%);
}
@media (min-width: 835px) {
  .character__field__side[data-character="10"] {
    background: linear-gradient(-90deg, rgba(191, 183, 19, 0) 30%, #bfb713 100%);
  }
}
.character__field__side[data-character="10"].-prev {
  background: linear-gradient(90deg, rgba(191, 183, 19, 0) 85%, #bfb713 100%);
}
@media (min-width: 835px) {
  .character__field__side[data-character="10"].-prev {
    background: linear-gradient(90deg, rgba(191, 183, 19, 0) 30%, #bfb713 100%);
  }
}

.headcont__dots.-d1 {
  position: absolute;
  top: 22.2vw;
  left: 8.8vw;
}
@media (min-width: 835px) {
  .headcont__dots.-d1 {
    position: absolute;
    top: 46px;
    left: -54px;
  }
}

.headcont__debri.-d1 {
  position: absolute;
  top: -5.3vw;
  right: -178px;
  background: url(../../assets/img/top/introduction/debri/ph_debri_1.png) no-repeat 0 0/100%;
  height: 286px;
  mix-blend-mode: multiply;
  width: 201px;
}
.headcont__debri.-d2 {
  position: absolute;
  top: 13.3vw;
  left: 53.8vw;
  background: url(../../assets/img/top/introduction/debri/ph_debri_2.png) no-repeat 0 0/100%;
  height: 21.6vw;
  mix-blend-mode: multiply;
  width: 24.5vw;
}
@media (min-width: 835px) {
  .headcont__debri.-d2 {
    position: absolute;
    top: 80px;
    left: 50%;
    height: 204px;
    width: 232px;
  }
}
.headcont__debri.-d3 {
  position: absolute;
  top: 24vw;
  left: 28vw;
  background: url(../../assets/img/top/introduction/debri/ph_debri_3_nrw.png) no-repeat 0 0/100%;
  height: 15.7vw;
  mix-blend-mode: multiply;
  width: 15.7vw;
}
@media (min-width: 835px) {
  .headcont__debri.-d3 {
    position: absolute;
    top: 60px;
    left: 363px;
    background: url(../../assets/img/top/introduction/debri/ph_debri_3.png) no-repeat 0 0/100%;
    height: 148px;
    width: 148px;
  }
}
.headcont__debri.-d4 {
  position: absolute;
  top: 53.3vw;
  left: -13.2vw;
  background: url(../../assets/img/top/introduction/debri/ph_debri_4_nrw.png) no-repeat 0 0/100%;
  height: 28.1vw;
  mix-blend-mode: multiply;
  width: 28.1vw;
}
@media (min-width: 835px) {
  .headcont__debri.-d4 {
    position: absolute;
    top: -150px;
    left: -170px;
    background: url(../../assets/img/top/introduction/debri/ph_debri_4.png) no-repeat 0 0/100%;
    height: 180px;
    width: 154px;
  }
}
.headcont__debri.-d5 {
  position: absolute;
  top: 324px;
  left: -360px;
  background: url(../../assets/img/top/introduction/debri/ph_debri_5.png) no-repeat 0 0/100%;
  height: 403px;
  mix-blend-mode: multiply;
  width: 395px;
}
.headcont__debri.-d6 {
  position: absolute;
  top: 300px;
  right: -210px;
  background: url(../../assets/img/top/introduction/debri/ph_debri_6.png) no-repeat 0 0/100%;
  height: 265px;
  mix-blend-mode: multiply;
  width: 265px;
}

.headcont {
  padding-bottom: 34.6vw;
}
@media (min-width: 835px) {
  .headcont {
    padding-bottom: 250px;
  }
}

.introduction__bodytxt {
  margin-top: 37.3vw;
  position: relative;
}
@media (min-width: 835px) {
  .introduction__bodytxt {
    margin-top: 242px;
  }
}
.introduction__bodytxt .txtwrap {
  -webkit-clip-path: inset(0 0 100% 0);
          clip-path: inset(0 0 100% 0);
  opacity: 0;
  padding: 13.3vw 0;
}
@media (min-width: 835px) {
  .introduction__bodytxt .txtwrap {
    height: 618px;
    padding: 88px 92px 80px;
    text-orientation: upright;
    -ms-writing-mode: tb-rl;
        writing-mode: vertical-rl;
  }
}
.introduction__bodytxt.-reveal .txtwrap {
  -webkit-clip-path: inset(0 0 0 0);
          clip-path: inset(0 0 0 0);
  opacity: 1;
  transition: all 2s 0s cubic-bezier(0.85, 0, 0.15, 1);
}
.introduction__bodytxt p {
  color: #555f64;
  font-size: 3.2vw;
  letter-spacing: 0.3em;
  line-height: 2.1;
  text-align: center;
}
@media (min-width: 835px) {
  .introduction__bodytxt p {
    font-size: 1.25rem;
    color: #555f64;
    letter-spacing: 0.25em;
    line-height: 2.1;
    text-align: left;
  }
}
.introduction__bodytxt p + p {
  margin-top: 6.6vw;
}
@media (min-width: 835px) {
  .introduction__bodytxt p + p {
    margin-right: 32px;
    margin-top: 0;
  }
}
.introduction__bodytxt strong {
  filter: blur(5px);
  font-weight: 400;
}
.introduction__bodytxt.-reveal strong {
  -webkit-animation: txtstronganim 1s 1.5s ease forwards;
          animation: txtstronganim 1s 1.5s ease forwards;
}
.introduction__bodytxt:before {
  position: absolute;
  top: 0;
  right: 0;
  background: url(../../assets/img/top/introduction/ico_bodytxt_br_1_nrw.svg) no-repeat 0 0/100%;
  content: "";
  height: 8.4vw;
  transform: translate(0, -100%);
  width: 85.8vw;
}
@media (min-width: 835px) {
  .introduction__bodytxt:before {
    position: absolute;
    top: 0;
    left: 0;
    right: auto;
    background: url(../../assets/img/top/introduction/ico_bodytxt_br_1.svg) no-repeat 0 0/100%;
    height: 107px;
    width: 1376px;
  }
}
.introduction__bodytxt:after {
  position: absolute;
  left: 0;
  bottom: 0;
  background: url(../../assets/img/top/introduction/ico_bodytxt_br_2_nrw.svg) no-repeat 0 0/100%;
  content: "";
  height: 12.4vw;
  transform: translate(0, 100%);
  width: 86vw;
}
@media (min-width: 835px) {
  .introduction__bodytxt:after {
    position: absolute;
    left: -259px;
    bottom: 0;
    background: url(../../assets/img/top/introduction/ico_bodytxt_br_2.svg) no-repeat 0 0/100%;
    height: 92px;
    width: 1359px;
  }
}

.introduction__dots.-d1 {
  position: absolute;
  top: 22.2vw;
  left: 8.8vw;
}
@media (min-width: 835px) {
  .introduction__dots.-d1 {
    position: absolute;
    top: 46px;
    left: -54px;
  }
}
.introduction__dots.-d2 {
  position: absolute;
  bottom: -8.6vw;
  right: 12.8vw;
}
@media (min-width: 835px) {
  .introduction__dots.-d2 {
    position: absolute;
    bottom: -97px;
    right: 0;
  }
}
.introduction__dots.-d3 {
  position: absolute;
  left: 21.2vw;
  bottom: -36vw;
}
@media (min-width: 835px) {
  .introduction__dots.-d3 {
    position: absolute;
    left: 126px;
    bottom: -160px;
  }
}

.introduction__debri.-d1 {
  position: absolute;
  top: -5.3vw;
  right: -178px;
  background: url(../../assets/img/top/introduction/debri/ph_debri_1.png) no-repeat 0 0/100%;
  height: 286px;
  mix-blend-mode: multiply;
  width: 201px;
}
.introduction__debri.-d2 {
  position: absolute;
  top: 13.3vw;
  left: 53.8vw;
  background: url(../../assets/img/top/introduction/debri/ph_debri_2.png) no-repeat 0 0/100%;
  height: 21.6vw;
  mix-blend-mode: multiply;
  width: 24.5vw;
}
@media (min-width: 835px) {
  .introduction__debri.-d2 {
    position: absolute;
    top: 28px;
    left: 50%;
    height: 204px;
    width: 232px;
  }
}
.introduction__debri.-d3 {
  position: absolute;
  top: 24vw;
  left: 28vw;
  background: url(../../assets/img/top/introduction/debri/ph_debri_3_nrw.png) no-repeat 0 0/100%;
  height: 15.7vw;
  mix-blend-mode: multiply;
  width: 15.7vw;
}
@media (min-width: 835px) {
  .introduction__debri.-d3 {
    background: url(../../assets/img/top/introduction/debri/ph_debri_3.png) no-repeat 0 0/100%;
    height: 148px;
    width: 148px;
  }
}
.introduction__debri.-d4 {
  position: absolute;
  top: 53.3vw;
  left: -13.2vw;
  background: url(../../assets/img/top/introduction/debri/ph_debri_4_nrw.png) no-repeat 0 0/100%;
  height: 28.1vw;
  mix-blend-mode: multiply;
  width: 28.1vw;
}
@media (min-width: 835px) {
  .introduction__debri.-d4 {
    position: absolute;
    top: -224px;
    left: -170px;
    background: url(../../assets/img/top/introduction/debri/ph_debri_4.png) no-repeat 0 0/100%;
    height: 180px;
    width: 154px;
  }
}
.introduction__debri.-d5 {
  position: absolute;
  top: 74px;
  left: -242px;
  background: url(../../assets/img/top/introduction/debri/ph_debri_5.png) no-repeat 0 0/100%;
  height: 403px;
  mix-blend-mode: multiply;
  width: 395px;
}
.introduction__debri.-d6 {
  position: absolute;
  top: 240px;
  right: -210px;
  background: url(../../assets/img/top/introduction/debri/ph_debri_6.png) no-repeat 0 0/100%;
  height: 265px;
  mix-blend-mode: multiply;
  width: 265px;
}
.introduction__debri.-d7 {
  position: absolute;
  top: 50px;
  left: 0;
  background: url(../../assets/img/top/introduction/debri/ph_debri_bodytxt_1_nrw.png) no-repeat 0 0/100%;
  height: 18.1vw;
  mix-blend-mode: multiply;
  width: 18.1vw;
}
@media (min-width: 835px) {
  .introduction__debri.-d7 {
    position: absolute;
    top: 20px;
    left: -231px;
    background: url(../../assets/img/top/introduction/debri/ph_debri_7.png) no-repeat 0 0/100%;
    height: 161px;
    width: 160px;
  }
}
.introduction__debri.-d8 {
  position: absolute;
  top: calc(41vw + 50px);
  left: 74.6vw;
  background: url(../../assets/img/top/introduction/debri/ph_debri_bodytxt_2_nrw.png) no-repeat 0 0/100%;
  height: 29.8vw;
  mix-blend-mode: multiply;
  width: 29.8vw;
}
@media (min-width: 835px) {
  .introduction__debri.-d8 {
    position: absolute;
    top: 269px;
    left: auto;
    right: -258px;
    background: url(../../assets/img/top/introduction/debri/ph_debri_8.png) no-repeat 0 0/100%;
    height: 241px;
    width: 261px;
  }
}
.introduction__debri.-d9 {
  position: absolute;
  top: calc(110.1vw + 50px);
  left: 1.6vw;
  background: url(../../assets/img/top/introduction/debri/ph_debri_bodytxt_3_nrw.png) no-repeat 0 0/100%;
  height: 21.3vw;
  mix-blend-mode: multiply;
  width: 21.3vw;
}
@media (min-width: 835px) {
  .introduction__debri.-d9 {
    position: absolute;
    top: 269px;
    right: -258px;
    background: url(../../assets/img/top/introduction/debri/ph_debri_8.png) no-repeat 0 0/100%;
    height: 241px;
    width: 261px;
  }
}

.introduction__phobj.-o1 {
  position: absolute;
  top: 217px;
  right: -222px;
  background: url(../../assets/img/top/introduction/phobj/ph_obj_1.png) no-repeat 0 0/100%;
  height: 351px;
  width: 55px;
}
.introduction__phobj.-o2 {
  position: absolute;
  top: 470px;
  right: -126px;
  background: url(../../assets/img/top/introduction/phobj/ph_obj_2.png) no-repeat 0 0/100%;
  height: 293px;
  width: 36px;
}
.introduction__phobj.-o3 {
  position: absolute;
  left: -12.4vw;
  bottom: -13.4vw;
  background: url(../../assets/img/top/introduction/phobj/ph_obj_3.png) no-repeat 0 0/100%;
  height: 4.4vw;
  width: 35.6vw;
}
@media (min-width: 835px) {
  .introduction__phobj.-o3 {
    position: absolute;
    left: -291px;
    bottom: -36px;
    height: 33px;
    width: 267px;
  }
}
.introduction__phobj.-o4 {
  position: absolute;
  left: 8.5vw;
  bottom: -20vw;
  background: url(../../assets/img/top/introduction/phobj/ph_obj_4.png) no-repeat 0 0/100%;
  height: 8.6vw;
  width: 39.6vw;
}
@media (min-width: 835px) {
  .introduction__phobj.-o4 {
    position: absolute;
    left: -113px;
    bottom: -131px;
    height: 65px;
    width: 297px;
  }
}

.introduction {
  position: relative;
}

.introduction__cont {
  margin: 0 0 42.6vw;
}
@media (min-width: 835px) {
  .introduction__cont {
    margin-bottom: 310px;
  }
}

@-webkit-keyframes introheadbgmove {
  0% {
    background-position: 0 0;
  }
  0% {
    background-position: -571px 0;
  }
}

@keyframes introheadbgmove {
  0% {
    background-position: 0 0;
  }
  0% {
    background-position: -571px 0;
  }
}
.introduction__bttl {
  margin: 0 auto;
  margin-bottom: 17.3vw;
  opacity: 0;
  width: 78.4vw;
  z-index: 2;
}
@media (min-width: 835px) {
  .introduction__bttl {
    margin-bottom: 0;
    transform: translate(88px, -20%) rotate(90deg);
    transform-origin: 0 0;
    width: 681px;
    position: absolute;
    top: -35px;
    left: 81px;
  }
}
.introduction__bttl.-reveal {
  opacity: 1;
}
@media (min-width: 835px) {
  .introduction__bttl.-reveal {
    transform: translate(88px, 0) rotate(90deg);
    transition: all 1s 0s ease;
  }
}

@-webkit-keyframes curtainAnim {
  0% {
    transform: scaleX(0);
    transform-origin: 0 0;
  }
  50% {
    transform: scaleX(1);
    transform-origin: 0 0;
  }
  51% {
    transform: scaleX(1);
    transform-origin: 100% 0;
  }
  100% {
    transform: scaleX(0);
    transform-origin: 100% 0;
  }
}

@keyframes curtainAnim {
  0% {
    transform: scaleX(0);
    transform-origin: 0 0;
  }
  50% {
    transform: scaleX(1);
    transform-origin: 0 0;
  }
  51% {
    transform: scaleX(1);
    transform-origin: 100% 0;
  }
  100% {
    transform: scaleX(0);
    transform-origin: 100% 0;
  }
}
.introduction__bttl_sub {
  margin: 0 auto 21.3vw;
  position: relative;
  width: 78.1vw;
}
@media (min-width: 835px) {
  .introduction__bttl_sub {
    margin: 0 auto 150px;
    width: 543px;
  }
}
.introduction__bttl_sub:before, .introduction__bttl_sub:after {
  position: absolute;
  top: 50%;
  left: 0;
  background: url(../../assets/img/top/introduction/ico_bracket.svg) no-repeat 0 0/100%;
  content: "";
  height: 3.2vw;
  transform: translate(0, -50%);
  width: 0.9vw;
}
@media (min-width: 835px) {
  .introduction__bttl_sub:before, .introduction__bttl_sub:after {
    height: 22px;
    width: 6px;
  }
}
.introduction__bttl_sub:after {
  position: absolute;
  top: 50%;
  left: auto;
  right: 0;
  transform: translate(0, -60%) rotate(180deg);
}
.introduction__bttl_sub span {
  display: block;
  letter-spacing: 0.1em;
  margin-top: 1.3vw;
  position: relative;
  font-size: 0.5625rem;
}
@media (min-width: 835px) {
  .introduction__bttl_sub span {
    margin-top: 12px;
    font-size: 1rem;
  }
}
.introduction__bttl_sub span:first-child {
  margin-top: 0;
}
.introduction__bttl_sub span:after {
  background: #555f64;
  content: "";
  height: 100%;
  transform: scaleX(0);
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.introduction__bttl_sub em {
  align-items: center;
  display: flex;
  font-style: normal;
  height: 2.6vw;
  justify-content: center;
  opacity: 0;
}
@media (min-width: 835px) {
  .introduction__bttl_sub em {
    height: 12px;
  }
}
.introduction__bttl_sub.-reveal span:after {
  -webkit-animation: curtainAnim 1s 0s cubic-bezier(0.85, 0, 0.15, 1) forwards;
          animation: curtainAnim 1s 0s cubic-bezier(0.85, 0, 0.15, 1) forwards;
}
.introduction__bttl_sub.-reveal em {
  opacity: 1;
  transition: opacity 0.5s 0.5s ease;
}

.introduction__intro_1 {
  margin: 0 auto;
  position: relative;
  width: 64.6vw;
  z-index: 1;
}
@media (min-width: 835px) {
  .introduction__intro_1 {
    margin: 98px 0 0 412px;
    width: 586px;
  }
}
.introduction__intro_1:before {
  position: absolute;
  top: 50%;
  left: 0;
  background: url(../../assets/img/top/introduction/ico_intro_1_l_nrw.svg) no-repeat 0 0/100%;
  content: "";
  height: 8.1vw;
  transform: translate(-100%, -100%);
  width: 17.3vw;
}
@media (min-width: 835px) {
  .introduction__intro_1:before {
    background: url(../../assets/img/top/introduction/ico_intro_1_l.svg) no-repeat 0 0/100%;
    height: 92px;
    width: 714px;
  }
}
.introduction__intro_1:after {
  position: absolute;
  top: 50%;
  right: 0;
  background: url(../../assets/img/top/introduction/ico_intro_1_r_nrw.svg) no-repeat 0 0/100%;
  content: "";
  height: 8.1vw;
  transform: translate(100%, 0);
  width: 16.1vw;
}
@media (min-width: 835px) {
  .introduction__intro_1:after {
    background: url(../../assets/img/top/introduction/ico_intro_1_r.svg) no-repeat 0 0/100%;
    height: 62px;
    width: 342px;
  }
}

.introduction__mainph {
  border-radius: 50%;
  margin-left: -33.6vw;
  margin-top: 6.9vw;
  width: 81.6vw;
}
@media (min-width: 835px) {
  .introduction__mainph {
    margin-left: -270px;
    margin-top: -55px;
    width: 787px;
  }
}

.introduction__maintxt_1 {
  position: absolute;
  top: calc(21.3vw + 50px);
  right: 4.4vw;
  width: 22.8vw;
  z-index: 2;
}
@media (min-width: 835px) {
  .introduction__maintxt_1 {
    position: absolute;
    top: 175px;
    right: 107px;
    width: 198px;
  }
}

@-webkit-keyframes i_maintxtinanim {
  0% {
    opacity: 0;
    transform: translate(0, 20px);
  }
  50% {
    opacity: 1;
    transform: translate(0, 0);
  }
  100% {
    filter: blur(10px);
    opacity: 0;
    transform: translate(0, -20px);
  }
}

@keyframes i_maintxtinanim {
  0% {
    opacity: 0;
    transform: translate(0, 20px);
  }
  50% {
    opacity: 1;
    transform: translate(0, 0);
  }
  100% {
    filter: blur(10px);
    opacity: 0;
    transform: translate(0, -20px);
  }
}
.introduction__maintxt_2 {
  position: absolute;
  top: calc(2.1vw + 75px);
  right: 18.9vw;
  height: 104.5vw;
  width: 49vw;
  z-index: 1;
}
@media (min-width: 835px) {
  .introduction__maintxt_2 {
    position: absolute;
    top: 13px;
    right: 235px;
    height: 905px;
    width: 425px;
  }
}
.introduction__maintxt_2 .fadeobj {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.introduction__maintxt_2.-reveal .fadeobj.-f1 {
  -webkit-animation: i_maintxtinanim 3s 0s ease forwards;
          animation: i_maintxtinanim 3s 0s ease forwards;
}
.introduction__maintxt_2 .fadeobj.-f2 {
  filter: blur(10px);
  opacity: 0;
  ransform: translate(0, -20px);
}
.introduction__maintxt_2.-reveal .fadeobj.-f2 {
  filter: blur(0px);
  opacity: 1;
  transform: translate(0, 0);
  transition: all 1s 0.5s ease;
}

.introduction__row1 {
  position: relative;
}

@-webkit-keyframes txtstronganim {
  0% {
    filter: blur(5px);
  }
  100% {
    color: #dc3700;
    filter: blur(0);
  }
}

@keyframes txtstronganim {
  0% {
    filter: blur(5px);
  }
  100% {
    color: #dc3700;
    filter: blur(0);
  }
}
.introduction__more {
  display: block;
  margin-left: auto;
  margin-right: 14vw;
  margin-top: 26px;
}
@media (min-width: 835px) {
  .introduction__more {
    margin-left: auto;
    margin-top: 46px;
  }
}

.loader {
  position: fixed;
  top: 0;
  left: 0;
  background: #c8c3b8;
  height: 100%;
  width: 100%;
  z-index: 20;
}
.-ready .loader {
  opacity: 0;
  pointer-events: none;
  transition: all 1s 2.5s ease;
  visibility: hidden;
}

@-webkit-keyframes l_logoin {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes l_logoin {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes l_logomask {
  0% {
    -webkit-clip-path: inset(100% 0 0 0);
            clip-path: inset(100% 0 0 0);
  }
  100% {
    -webkit-clip-path: inset(0 0 0 0);
            clip-path: inset(0 0 0 0);
  }
}
@keyframes l_logomask {
  0% {
    -webkit-clip-path: inset(100% 0 0 0);
            clip-path: inset(100% 0 0 0);
  }
  100% {
    -webkit-clip-path: inset(0 0 0 0);
            clip-path: inset(0 0 0 0);
  }
}
@-webkit-keyframes l_logoscale {
  0% {
    transform: translate(-50%, -50%) scale(1.05);
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
}
@keyframes l_logoscale {
  0% {
    transform: translate(-50%, -50%) scale(1.05);
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
}
.loader__logowrap {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 15vw;
  transform: translate(-50%, -50%) scale(1.05);
  width: 53vw;
}
@media (min-width: 835px) {
  .loader__logowrap {
    height: 141px;
    width: 496px;
  }
}
.-ready .loader__logowrap {
  -webkit-animation: l_logoscale 3s 0.5s ease forwards;
          animation: l_logoscale 3s 0.5s ease forwards;
}

.loader__logo_1c {
  position: absolute;
  top: 0;
  left: 0;
  background: url(../../assets/img/common/ph_logo_bk.png) no-repeat 0 0/100%;
  height: 100%;
  opacity: 0;
  width: 100%;
}
.-ready .loader__logo_1c {
  -webkit-animation: l_logoin 2s 0.5s ease forwards;
          animation: l_logoin 2s 0.5s ease forwards;
}

.loader__logo_4c {
  position: absolute;
  top: 0;
  left: 0;
  background: url(../../assets/img/common/ph_logo_4c.svg) no-repeat 0 0/100%;
  -webkit-clip-path: inset(100% 0 0 0);
          clip-path: inset(100% 0 0 0);
  height: 100%;
  width: 100%;
}
.-ready .loader__logo_4c {
  -webkit-animation: l_logomask 1s 0.75s cubic-bezier(0.85, 0, 0.15, 1) forwards;
          animation: l_logomask 1s 0.75s cubic-bezier(0.85, 0, 0.15, 1) forwards;
}

@-webkit-keyframes l_logoslash {
  0% {
    -webkit-clip-path: inset(0 100% 0 0);
            clip-path: inset(0 100% 0 0);
  }
  50% {
    -webkit-clip-path: inset(0 0 0 0);
            clip-path: inset(0 0 0 0);
  }
  100% {
    -webkit-clip-path: inset(0 0 0 100%);
            clip-path: inset(0 0 0 100%);
  }
}

@keyframes l_logoslash {
  0% {
    -webkit-clip-path: inset(0 100% 0 0);
            clip-path: inset(0 100% 0 0);
  }
  50% {
    -webkit-clip-path: inset(0 0 0 0);
            clip-path: inset(0 0 0 0);
  }
  100% {
    -webkit-clip-path: inset(0 0 0 100%);
            clip-path: inset(0 0 0 100%);
  }
}
.loader__logo__slash {
  background: #000;
  -webkit-clip-path: inset(0 100% 0 0);
          clip-path: inset(0 100% 0 0);
  height: 1px;
  transform: rotate(-30deg);
  transform-origin: 0 0;
  width: 7.4vw;
}
@media (min-width: 835px) {
  .loader__logo__slash {
    width: 70px;
  }
}
.-ready .loader__logo__slash {
  -webkit-animation: l_logoslash 1s 0.5s cubic-bezier(0.85, 0, 0.15, 1) forwards;
          animation: l_logoslash 1s 0.5s cubic-bezier(0.85, 0, 0.15, 1) forwards;
}
.loader__logo__slash.-s1 {
  position: absolute;
  top: 24%;
  left: 0;
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
}
.loader__logo__slash.-s2 {
  position: absolute;
  top: 72%;
  left: 32%;
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
}
.loader__logo__slash.-s3 {
  position: absolute;
  top: 24%;
  left: 57%;
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}
.loader__logo__slash.-s4 {
  position: absolute;
  top: 72%;
  left: 86%;
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}

@-webkit-keyframes l_logoout {
  0% {
    filter: blur(0);
    opacity: 1;
  }
  100% {
    filter: blur(20px);
    opacity: 0;
  }
}

@keyframes l_logoout {
  0% {
    filter: blur(0);
    opacity: 1;
  }
  100% {
    filter: blur(20px);
    opacity: 0;
  }
}
.loader__logo__back {
  position: fixed;
  top: 50%;
  left: 50%;
  display: flex;
  height: 15vw;
  transform: translate(-50%, -50%);
  width: 53vw;
  z-index: 1;
}
@media (min-width: 835px) {
  .loader__logo__back {
    height: 141px;
    width: 496px;
  }
}
.loader__logo__back .obj {
  background: url(../../assets/img/common/ph_logo_w.png) no-repeat 0 0/53vw;
  width: 25%;
}
@media (min-width: 835px) {
  .loader__logo__back .obj {
    background-size: 498px;
  }
}
.loader__logo__back .-o1 {
  background-position: 0 0;
}
.-ready .loader__logo__back .-o1 {
  -webkit-animation: l_logoout 1s 3s cubic-bezier(0.85, 0, 0.15, 1) forwards;
          animation: l_logoout 1s 3s cubic-bezier(0.85, 0, 0.15, 1) forwards;
}
.loader__logo__back .-o2 {
  background-position: -13.25vw 0;
}
@media (min-width: 835px) {
  .loader__logo__back .-o2 {
    background-position: -124px 0;
  }
}
.-ready .loader__logo__back .-o2 {
  -webkit-animation: l_logoout 1s 3.2s cubic-bezier(0.85, 0, 0.15, 1) forwards;
          animation: l_logoout 1s 3.2s cubic-bezier(0.85, 0, 0.15, 1) forwards;
}
.loader__logo__back .-o3 {
  background-position: -26.5vw 0;
}
@media (min-width: 835px) {
  .loader__logo__back .-o3 {
    background-position: -248px 0;
  }
}
.-ready .loader__logo__back .-o3 {
  -webkit-animation: l_logoout 1s 3.4s cubic-bezier(0.85, 0, 0.15, 1) forwards;
          animation: l_logoout 1s 3.4s cubic-bezier(0.85, 0, 0.15, 1) forwards;
}
.loader__logo__back .-o4 {
  background-position: -39.75vw 0;
}
@media (min-width: 835px) {
  .loader__logo__back .-o4 {
    background-position: -372px 0;
  }
}
.-ready .loader__logo__back .-o4 {
  -webkit-animation: l_logoout 1s 3.6s cubic-bezier(0.85, 0, 0.15, 1) forwards;
          animation: l_logoout 1s 3.6s cubic-bezier(0.85, 0, 0.15, 1) forwards;
}

:root {
  --screenHeight: 0px;
}

.mainvisual {
  aspect-ratio: 750/1570;
  position: relative;
  z-index: 11;
}
@media (min-width: 835px) {
  .mainvisual {
    aspect-ratio: 1920/1644;
  }
}

.mainvisual__mask {
  position: absolute;
  top: 0;
  left: 0;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 90.6369426752%, 50% 100%, 0 90.6369426752%);
          clip-path: polygon(0 0, 100% 0, 100% 90.6369426752%, 50% 100%, 0 90.6369426752%);
  height: 100%;
  width: 100%;
}
@media (min-width: 835px) {
  .mainvisual__mask {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 77.3114355231%, 50% 100%, 0 77.3114355231%);
            clip-path: polygon(0 0, 100% 0, 100% 77.3114355231%, 50% 100%, 0 77.3114355231%);
  }
}

@-webkit-keyframes mv_phin {
  0% {
    filter: grayscale(1) brightness(0.5);
    transform: scale(1.1);
  }
  100% {
    filter: grayscale(0) brightness(1);
    transform: scale(1);
  }
}

@keyframes mv_phin {
  0% {
    filter: grayscale(1) brightness(0.5);
    transform: scale(1.1);
  }
  100% {
    filter: grayscale(0) brightness(1);
    transform: scale(1);
  }
}
.mainvisual__ph {
  position: absolute;
  top: 0;
  left: 0;
  background: #000;
  height: 100%;
  width: 100%;
}
@media (min-width: 835px) {
  .mainvisual__ph {
    background: url(../../assets/img/top/mainvisual/ph_main.jpg) no-repeat 0 0/100%;
  }
}
.-ready .mainvisual__ph {
  -webkit-animation: mv_phin 4s 2s ease;
          animation: mv_phin 4s 2s ease;
}

@-webkit-keyframes mvchangein {
  0% {
    filter: blur(10px);
    opacity: 0;
    transform: translate(0, 1%);
  }
  100% {
    filter: blur(0px);
    opacity: 1;
    transform: translate(0, 0);
  }
}

@keyframes mvchangein {
  0% {
    filter: blur(10px);
    opacity: 0;
    transform: translate(0, 1%);
  }
  100% {
    filter: blur(0px);
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes mvchangeout {
  0% {
    opacity: 1;
    transform: translate(0%, 0);
  }
  100% {
    opacity: 0;
    transform: translate(0, -1%);
  }
}
@keyframes mvchangeout {
  0% {
    opacity: 1;
    transform: translate(0%, 0);
  }
  100% {
    opacity: 0;
    transform: translate(0, -1%);
  }
}
.mainvisual__slide {
  position: absolute;
  top: 0;
  left: 0;
  background: #000;
  height: 100%;
  width: 100%;
  z-index: 0;
}
.-ready .mainvisual__slide {
  -webkit-animation: mv_phin 4s 2s ease;
          animation: mv_phin 4s 2s ease;
}
.mainvisual__slide .ph {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  opacity: 0;
  width: 100%;
}
.mainvisual__slide .ph.-p1 {
  background: url(../../assets/img/top/mainvisual/ph_main_1_nrw.jpg) no-repeat 0 0/100%;
}
.mainvisual__slide .ph.-p2 {
  background: url(../../assets/img/top/mainvisual/ph_main_2_nrw.jpg) no-repeat 0 0/100%;
}
.mainvisual__slide .ph.-p3 {
  background: url(../../assets/img/top/mainvisual/ph_main_3_nrw.jpg) no-repeat 0 0/100%;
}
.mainvisual__slide .ph.-out {
  -webkit-animation: mvchangeout 2s 0s ease forwards;
          animation: mvchangeout 2s 0s ease forwards;
}
.mainvisual__slide .ph.-active {
  -webkit-animation: mvchangein 2s 0s ease forwards;
          animation: mvchangein 2s 0s ease forwards;
  z-index: 1;
}

.mainvisual__logo {
  position: absolute;
  top: 126.1vw;
  left: 50%;
  height: 19.7vw;
  transform: translate(-50%, 0);
  width: 69.3vw;
}
@media (min-width: 835px) {
  .mainvisual__logo {
    position: absolute;
    top: auto;
    left: 50%;
    bottom: 23.5vw;
    height: 7.5vw;
    width: 26.6vw;
  }
}
.mainvisual__logo .obj {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  opacity: 0;
  width: 100%;
}
.-ready .mainvisual__logo .obj {
  -webkit-animation: mv_catchin 1s 4s ease forwards;
          animation: mv_catchin 1s 4s ease forwards;
}

@-webkit-keyframes mv_catchin {
  0% {
    opacity: 0;
    transform: translate(0, -5%);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}

@keyframes mv_catchin {
  0% {
    opacity: 0;
    transform: translate(0, -5%);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
.mainvisual__catch {
  position: absolute;
  top: 3.4vw;
  left: 8.6vw;
  opacity: 0;
  width: 70.4vw;
}
@media (min-width: 835px) {
  .mainvisual__catch {
    width: 6vw;
    position: absolute;
    top: 4.3vw;
    left: 23.6vw;
  }
}
.-ready .mainvisual__catch {
  -webkit-animation: mv_catchin 1s 4s ease forwards;
          animation: mv_catchin 1s 4s ease forwards;
}

.mainvisual__debri {
  position: absolute;
  left: 25.6vw;
  bottom: -13.6vw;
  background: url(../../assets/img/top/mainvisual/ph_debri_nrw.svg) no-repeat 0 0/100%;
  height: 37.4vw;
  opacity: 0;
  transform: translate(0, 10%);
  width: 53.3vw;
}
@media (min-width: 835px) {
  .mainvisual__debri {
    background: url(../../assets/img/top/mainvisual/ph_debri.svg) no-repeat 0 0/100%;
    height: 16.7vw;
    width: 23.7vw;
    position: absolute;
    left: 40.3vw;
    bottom: -5.8vw;
  }
}
.mainvisual__debri.-reveal {
  opacity: 1;
  transform: translate(0, 0);
  transition: all 1s 0s ease;
}

.mainvisual__scroller {
  position: absolute;
  left: 50%;
  bottom: 19vw;
  background: #fff;
  height: 44.8vw;
  transform: translate(-50%, 100%) scaleY(0);
  transform-origin: 0 0;
  width: 1px;
}
@media (min-width: 835px) {
  .mainvisual__scroller {
    position: absolute;
    left: 50%;
    bottom: min(15.4vw, 296px);
    background: #fff;
    height: min(22.3vw, 430px);
  }
}
.mainvisual__scroller:before, .mainvisual__scroller:after {
  position: absolute;
  top: 0;
  left: 50%;
  border: 1px solid #fff;
  border-radius: 50%;
  content: "";
  height: 1.2vw;
  transform: translate(-50%, -100%);
  width: 1.2vw;
}
@media (min-width: 835px) {
  .mainvisual__scroller:before, .mainvisual__scroller:after {
    height: 7px;
    width: 7px;
  }
}
.mainvisual__scroller:after {
  position: absolute;
  top: auto;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 100%);
}
.mainvisual__scroller.-reveal {
  transform: translate(-50%, 100%) scaleY(1);
  transition: transform 1s 0s cubic-bezier(0.85, 0, 0.15, 1);
}

@-webkit-keyframes twittertxtanim {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes twittertxtanim {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
.mainvisual__twitter {
  position: absolute;
  bottom: 3.6vw;
  right: 4vw;
  height: 20.9vw;
  width: 20.6vw;
}
@media (min-width: 835px) {
  .mainvisual__twitter {
    position: absolute;
    bottom: 12.8vw;
    right: 6.5vw;
    height: max(6.5vw, 125px);
    width: max(6.5vw, 125px);
  }
}
.mainvisual__twitter .body {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 14.4vw;
  transform: translate(-50%, -50%);
  width: 12.5vw;
}
@media (min-width: 835px) {
  .mainvisual__twitter .body {
    height: max(4.5vw, 87px);
    width: max(3.9vw, 75px);
  }
}
.mainvisual__twitter .body:after {
  position: absolute;
  top: 50%;
  left: 50%;
  background: url(../../assets/img/common/ico/ico_twitter.svg) no-repeat 0 0/100%;
  content: "";
  height: 4.4vw;
  transform: translate(-50%, -50%);
  transition: none;
  transition: all 0.3s 0s ease;
  width: 5.4vw;
}
@media (min-width: 835px) {
  .mainvisual__twitter .body:after {
    height: max(1.4vw, 27px);
    width: max(1.7vw, 33px);
  }
}
.mainvisual__twitter .body:before {
  position: absolute;
  top: 0;
  left: 0;
  background: url(../../assets/img/common/ico/ico_twitter.svg) no-repeat 0 0/100%;
  background: #fff;
  -webkit-clip-path: polygon(0 25%, 50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%);
          clip-path: polygon(0 25%, 50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%);
  content: "";
  height: 100%;
  transition: none;
  transition: all 0.3s 0s ease;
  width: 100%;
}
.mainvisual__twitter .txt {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-animation: twittertxtanim 50s 0s linear infinite;
          animation: twittertxtanim 50s 0s linear infinite;
  background: #fff;
  background: url(../../assets/img/common/ico/ico_twitter_txt.svg) no-repeat 0 0/100%;
  height: 100%;
  transform: translate(-50%, -50%);
  width: 100%;
}
@media (min-width: 835px) {
  .mainvisual__twitter .txt {
    height: max(6.5vw, 125px);
    width: max(6.4vw, 123px);
  }
}
.mainvisual__twitter:hover .body:before {
  transform: rotate(180deg) scale(0.95);
}
.mainvisual__twitter:hover .body:after {
  transform: translate(-50%, -50%) scale(1.05);
}
.mainvisual__twitter:hover .txt {
  -webkit-animation: twittertxtanim 10s 0s linear infinite;
          animation: twittertxtanim 10s 0s linear infinite;
}

.mainvisual__obj {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

@-webkit-keyframes motxtin {
  0% {
    transform: translate(0, 100%) skewY(45deg);
  }
  100% {
    transform: translate(0, 25%) skewY(45deg);
  }
}

@keyframes motxtin {
  0% {
    transform: translate(0, 100%) skewY(45deg);
  }
  100% {
    transform: translate(0, 25%) skewY(45deg);
  }
}
@-webkit-keyframes motxtout {
  0% {
    transform: translate(0, 25%) skewY(45deg);
  }
  100% {
    transform: translate(0, 100%) skewY(45deg);
  }
}
@keyframes motxtout {
  0% {
    transform: translate(0, 25%) skewY(45deg);
  }
  100% {
    transform: translate(0, 100%) skewY(45deg);
  }
}
@-webkit-keyframes molinein {
  0% {
    transform: scaleX(0);
  }
  100% {
    transform: scaleX(1);
  }
}
@keyframes molinein {
  0% {
    transform: scaleX(0);
  }
  100% {
    transform: scaleX(1);
  }
}
@-webkit-keyframes molineout {
  0% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(0);
  }
}
@keyframes molineout {
  0% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(0);
  }
}
@-webkit-keyframes motriin {
  0% {
    opacity: 0;
    transform: translate(0, -20px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes motriin {
  0% {
    opacity: 0;
    transform: translate(0, -20px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@-webkit-keyframes motriout {
  0% {
    opacity: 1;
    transform: translate(0, 0px);
  }
  100% {
    opacity: 0;
    transform: translate(0, -20px);
  }
}
@keyframes motriout {
  0% {
    opacity: 1;
    transform: translate(0, 0px);
  }
  100% {
    opacity: 0;
    transform: translate(0, -20px);
  }
}
.mainvisual__obj__item {
  color: #fff;
  font-size: 2.8125rem;
  font-weight: 500;
  width: 60px;
  height: 60px;
}
@media (min-width: 835px) {
  .mainvisual__obj__item {
    font-size: 4.5rem;
    width: 100px;
    height: 100px;
  }
}
.mainvisual__obj__item.-tf {
  position: absolute;
  top: 10%;
  left: 75%;
}
@media (min-width: 835px) {
  .mainvisual__obj__item.-tf {
    position: absolute;
    top: 10%;
    left: 75%;
  }
}
.mainvisual__obj__item.-tl {
  position: absolute;
  top: 50%;
  left: 5%;
}
@media (min-width: 835px) {
  .mainvisual__obj__item.-tl {
    position: absolute;
    top: 65%;
    left: 5%;
  }
}
.mainvisual__obj__item.-to {
  position: absolute;
  top: 90%;
  left: 15%;
}
@media (min-width: 835px) {
  .mainvisual__obj__item.-to {
    position: absolute;
    top: 80%;
    left: 20%;
  }
}
.mainvisual__obj__item.-tw {
  position: absolute;
  top: 55%;
  left: 55%;
}
.mainvisual__obj__item.-t2 {
  position: absolute;
  top: 5%;
  left: 35%;
}
@media (min-width: 835px) {
  .mainvisual__obj__item.-t2 {
    position: absolute;
    top: 5%;
    left: 30%;
  }
}
.mainvisual__obj__item.-t6 {
  position: absolute;
  top: 75%;
  left: 85%;
}
.mainvisual__obj__item .txtwrap {
  width: 100%;
  height: 100%;
  transform: skewY(-45deg);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: 0 0;
}
.mainvisual__obj__item .txt {
  transform: translate(0, 100%) skewY(45deg);
}
.-ready .mainvisual__obj__item .txt {
  -webkit-animation: motxtin 1s 0.5s cubic-bezier(0.85, 0, 0.15, 1) forwards;
          animation: motxtin 1s 0.5s cubic-bezier(0.85, 0, 0.15, 1) forwards;
}
.-mvscroll .mainvisual__obj__item .txt {
  transform: translate(0, 25%) skewY(45deg);
  -webkit-animation: motxtout 1s 0.5s cubic-bezier(0.85, 0, 0.15, 1) forwards;
          animation: motxtout 1s 0.5s cubic-bezier(0.85, 0, 0.15, 1) forwards;
}
.mainvisual__obj__item.-secondary .line, .mainvisual__obj__item.-secondary .tri {
  display: none;
}
.mainvisual__obj__item .line {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80px;
  height: 1px;
  transform: translate(-50%, -50%) rotate(-45deg);
}
@media (min-width: 835px) {
  .mainvisual__obj__item .line {
    width: 200px;
  }
}
.mainvisual__obj__item .line .obj {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  transform: scaleX(0);
}
.-ready .mainvisual__obj__item .line .obj {
  -webkit-animation: molinein 1s 0s cubic-bezier(0.85, 0, 0.15, 1) forwards;
          animation: molinein 1s 0s cubic-bezier(0.85, 0, 0.15, 1) forwards;
}
.-mvscroll .mainvisual__obj__item .line .obj {
  -webkit-animation: molineout 1s 0s cubic-bezier(0.85, 0, 0.15, 1) forwards;
          animation: molineout 1s 0s cubic-bezier(0.85, 0, 0.15, 1) forwards;
}
.mainvisual__obj__item .tri {
  position: absolute;
  top: -10px;
  left: -10px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 10px 10px;
  border-color: transparent transparent #00bcff transparent;
  opacity: 0;
}
@media (min-width: 835px) {
  .mainvisual__obj__item .tri {
    border-width: 0 0 20px 20px;
    position: absolute;
    top: -20px;
    left: -20px;
  }
}
.mainvisual__obj__item .tri.-i0, .mainvisual__obj__item .tri.-i2, .mainvisual__obj__item .tri.-i4 {
  border-color: transparent transparent #c8c3b8 transparent;
}
.-ready .mainvisual__obj__item .tri {
  -webkit-animation: motriin 1s 1s cubic-bezier(0.85, 0, 0.15, 1) forwards;
          animation: motriin 1s 1s cubic-bezier(0.85, 0, 0.15, 1) forwards;
}
.-mvscroll .mainvisual__obj__item .tri {
  -webkit-animation: motriout 1s 0s cubic-bezier(0.85, 0, 0.15, 1) forwards;
          animation: motriout 1s 0s cubic-bezier(0.85, 0, 0.15, 1) forwards;
}

.movie {
  position: relative;
}
@media (min-width: 835px) {
  .movie {
    padding: 0 18px 0;
  }
}
.movie .c-inner {
  height: 41.7vw;
}
@media (min-width: 835px) {
  .movie .c-inner {
    height: 356px;
  }
}

.movie__dots.-d1 {
  position: absolute;
  top: 10.6vw;
  right: 20vw;
}
@media (min-width: 835px) {
  .movie__dots.-d1 {
    position: absolute;
    top: 126px;
    right: -123px;
  }
}

.movie__head {
  margin: 0 auto;
  position: relative;
  width: 40.9vw;
  z-index: 1;
}
@media (min-width: 835px) {
  .movie__head {
    width: 356px;
  }
}

.movie__container {
  aspect-ratio: 16/9;
  margin-top: -4vw;
  position: relative;
}
@media (min-width: 835px) {
  .movie__container {
    margin-top: -42px;
  }
}
.movie__container:before {
  position: absolute;
  top: 50%;
  left: 0;
  background: #fff;
  content: "";
  height: 1px;
  transform: translate(0, -50%) scaleX(0);
  transform-origin: 100% 0;
  width: calc(50% - 4.9vw - 4px);
  z-index: 1;
}
@media (min-width: 835px) {
  .movie__container:before {
    width: calc(50% - 92px - 23px);
  }
}
.movie__container:after {
  position: absolute;
  top: 50%;
  left: calc(50% + 4.9vw + 4px);
  background: #fff;
  content: "";
  height: 1px;
  transform: translate(0, -50%) scaleX(0);
  transform-origin: 0 0;
  width: calc(50% - 4.9vw - 4px);
  z-index: 1;
}
@media (min-width: 835px) {
  .movie__container:after {
    position: absolute;
    top: 50%;
    left: calc(50% + 92px + 23px);
    width: calc(50% - 92px - 23px);
  }
}
.movie__container.-reveal::before, .movie__container.-reveal::after {
  transform: translate(0, -50%) scaleX(1);
  transition: transform 1s 1s cubic-bezier(0.85, 0, 0.15, 1);
}

.movie__container__video {
  height: 100%;
  position: relative;
  width: 100%;
}
.movie__container__video:after {
  position: absolute;
  top: 0;
  left: 0;
  background: #4e545b;
  content: "";
  height: 100%;
  mix-blend-mode: multiply;
  width: 100%;
}
.movie__container__video video {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  width: 100%;
}

@-webkit-keyframes mvplayin {
  0% {
    background: white;
    transform: translate(-50%, -50%) scale(0);
  }
  100% {
    background: rgba(255, 255, 255, 0);
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes mvplayin {
  0% {
    background: white;
    transform: translate(-50%, -50%) scale(0);
  }
  100% {
    background: rgba(255, 255, 255, 0);
    transform: translate(-50%, -50%) scale(1);
  }
}
.movie__container__play {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px solid #fff;
  border-radius: 50%;
  height: 9.8vw;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: all 0.3s 0s ease;
  width: 9.8vw;
}
@media (min-width: 835px) {
  .movie__container__play {
    height: 186px;
    width: 186px;
  }
}
.movie__container__play.-reveal {
  -webkit-animation: mvplayin 1s 0s cubic-bezier(0.85, 0, 0.15, 1);
          animation: mvplayin 1s 0s cubic-bezier(0.85, 0, 0.15, 1);
  opacity: 1;
}
.movie__container__play:hover {
  transform: translate(-50%, -50%) scale(0.9);
}
.movie__container__play .tri {
  position: absolute;
  top: 50%;
  left: 50%;
  background: url(../../assets/img/top/movie/ico_tri_nrw.svg) no-repeat 0 0/100%;
  height: 8vw;
  transform: translate(-37%, -50%) scale(1.5);
  width: 7.8vw;
}
@media (min-width: 835px) {
  .movie__container__play .tri {
    background: url(../../assets/img/top/movie/ico_tri.svg) no-repeat 0 0/100%;
    height: 150px;
    width: 147px;
  }
}
.-reveal .movie__container__play .tri {
  transform: translate(-37%, -50%) scale(1);
  transition: transform 1s 1s cubic-bezier(0.85, 0, 0.15, 1);
}

.news__bnr {
  margin-bottom: 40.6vw;
  position: relative;
  z-index: 11;
}
@media (min-width: 835px) {
  .news__bnr {
    margin-bottom: 195px;
  }
}
.news__bnr.-has1item {
  margin-bottom: 26.6vw;
}
@media (min-width: 835px) {
  .news__bnr.-has1item {
    margin-bottom: 150px;
  }
}

.news__bnr.-has1item .swiper-slide {
  width: 46.6vw !important;
}
@media (min-width: 835px) {
  .news__bnr.-has1item .swiper-slide {
    width: 350px !important;
  }
}
.news__bnr.-has1item .swiper-wrapper {
  justify-content: center;
}
.news__bnr.-has1item .swiper-button-prev,
.news__bnr.-has1item .swiper-button-next {
  display: none;
}

.news__bnr .swiper-button-prev,
.news__bnr .swiper-button-next {
  height: 8vw;
  margin-top: 0;
  width: 4.2vw;
}
@media (min-width: 835px) {
  .news__bnr .swiper-button-prev,
.news__bnr .swiper-button-next {
    height: 60px;
    margin-top: -30px;
    transition: transform 0.3s 0s ease;
    width: 32px;
  }
}
.news__bnr .swiper-button-prev:after,
.news__bnr .swiper-button-next:after {
  background: url(../../assets/img/top/news/ico_arw.svg) no-repeat 0 0/100% 100%;
  content: "" !important;
  height: 100%;
  width: 100%;
}
.news__bnr .swiper-button-prev {
  left: 50%;
  top: 100%;
  transform: translate(-450%, 80%);
}
@media (min-width: 835px) {
  .news__bnr .swiper-button-prev {
    left: -64px;
    top: 50%;
    transform: translate(0, 0);
  }
}
@media (min-width: 835px) {
  .news__bnr .swiper-button-prev:hover {
    transform: translate(-10px, 0);
  }
}
.news__bnr .swiper-button-next {
  right: 50%;
  top: 100%;
  transform: translate(450%, 80%) rotate(180deg);
}
@media (min-width: 835px) {
  .news__bnr .swiper-button-next {
    right: -64px;
    top: 50%;
    transform: translate(0, 0) rotate(180deg);
  }
}
@media (min-width: 835px) {
  .news__bnr .swiper-button-next:hover {
    transform: translate(10px, 0) rotate(180deg);
  }
}

.news__dots.-d1 {
  position: absolute;
  left: 25.3vw;
  bottom: -20vw;
}

.news {
  position: relative;
}

.news__head {
  margin: 0 auto;
  position: relative;
  width: 34.1vw;
  z-index: 1;
}
@media (min-width: 835px) {
  .news__head {
    width: 312px;
  }
}

.news__cont {
  aspect-ratio: 750/840;
  height: 100%;
  margin: 4.6vw auto 34.6vw;
  position: relative;
}
@media (min-width: 835px) {
  .news__cont {
    aspect-ratio: 1226/832;
    margin: 56px auto 0;
    margin-bottom: 250px;
    max-width: 1226px;
  }
}
.news__cont:before {
  position: absolute;
  top: 0;
  left: -5.4vw;
  background: url(../../assets/img/top/news/ph_line_nrw.svg) no-repeat 0 0/100%;
  content: "";
  height: 100%;
  width: 110.6vw;
}
@media (min-width: 835px) {
  .news__cont:before {
    position: absolute;
    top: 0;
    left: 0;
    background: url(../../assets/img/top/news/ph_line.svg) no-repeat 0 0/100%;
    height: 100%;
    width: 100%;
  }
}

.news__more {
  color: #fff;
  display: block;
  line-height: 1;
  text-align: center;
}
@media (max-width: 834px) {
  .news__more {
    font-size: 5.8vw;
    position: absolute;
    bottom: 0;
    right: 10.6vw;
  }
}
@media (min-width: 835px) {
  .news__more {
    font-size: 2.5rem;
    margin-top: -30px;
  }
}
.news__more span {
  display: block;
}
.news__more .line {
  background: #fff;
  height: 1px;
  margin: 2vw auto 0;
  position: relative;
  transition: width 0.2s 0s ease;
  width: 100%;
}
@media (min-width: 835px) {
  .news__more .line {
    margin: 15px auto 0;
    width: 20px;
  }
}
.news__more .line:after {
  position: absolute;
  top: 0;
  right: 0;
  background: inherit;
  content: "";
  height: 1px;
  transform: translate(0, -2px) rotate(50deg);
  width: 4px;
}
@media (min-width: 835px) {
  .news__more .line:after {
    opacity: 0;
    transform: translate(0, -3px) rotate(50deg);
    width: 6px;
  }
}
.news__more:hover .line {
  width: 58px;
}
.news__more:hover .line:after {
  opacity: 1;
}

.sidebnr {
  aspect-ratio: 190.3835/111.2436;
  background: url(../../assets/img/top/bnr/bnr_dl_nrw.png) no-repeat 0 0/100%;
  transition: background 0.5s 0s ease, opacity 0.3s 0.15s ease, transform 0.3s 0.15s ease;
  width: 100%;
  width: 25.3vw;
  z-index: 12;
  position: fixed;
  bottom: 10.6vw;
  right: 0;
}
@media (min-width: 835px) {
  .sidebnr {
    aspect-ratio: 201/146;
    background: url(../../assets/img/top/bnr/bnr_dl.png) no-repeat 0 0/100%;
    transform: translate(0, 0);
    width: min(201px, 10.4vw);
    position: fixed;
    left: auto;
    bottom: min(33px, 1.7vw);
    right: calc(50px + min(33px, 1.7vw));
  }
}
@media (min-width: 835px) {
  .sidebnr:hover {
    background: url(../../assets/img/top/bnr/bnr_dl_active.png) no-repeat 0 0/100%;
  }
}
.-gnav_hidden .sidebnr, .-sq_in .sidebnr {
  opacity: 0;
  pointer-events: none;
  transform: translate(10%, 0);
}

.sidebnr__clickarea {
  display: block;
  height: 100%;
}

.sidebnr_mv {
  position: absolute;
  top: 148.8vw;
  left: 0;
  width: 100%;
}

/* page entries */