@font-face {
  font-family: "NotoSansCJKjp-Regular";
  src: url(../fonts/NotoSansCJKjp-Regular.otf);
}
@font-face {
  font-family: "PPSupplyMono-Regular";
  src: url(../fonts/PPSupplyMono-Regular.ttf);
}
@font-face {
  font-family: "Stolzl-Regular";
  src: url(../fonts/Stolzl-Regular.ttf);
}
* {
  font-family: "NotoSansCJKjp-Regular";
}

img {
  -o-object-fit: contain;
     object-fit: contain;
  max-height: 100%;
  max-width: 100%;
}

@media screen and (max-width: 520px) {
  * {
    font-size: 12px;
  }
}
.centerCont {
  margin: 0 auto;
  padding: 0 30px;
  max-width: 1020px;
}
@media screen and (max-width: 960px) {
  .centerCont {
    max-width: 100%;
    padding: 0 15px;
  }
}

@-webkit-keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
.slide__img {
  height: 100%;
}
.slide__img img {
  width: 100% !important;
  max-width: 100%;
}
.slide__link {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
}
.slide__wrap {
  width: 80%;
  aspect-ratio: 2.5/1;
  overflow: hidden;
  margin-right: auto;
  margin-left: auto;
}

@media screen and (max-width: 960px) {
  .slide__img {
    width: 100% !important;
    max-width: 100%;
  }
  .slide__img img {
    -o-object-fit: cover;
       object-fit: cover;
    height: 100%;
  }
  .slide__wrap {
    aspect-ratio: 5/4;
  }
}
.vertPosts__icon {
  display: inline-block;
  width: 42px;
  height: 42px;
}
.vertPosts__item {
  position: relative;
  border-bottom: 1px solid #fff;
}
.vertPosts__item:first-child {
  border-top: 1px solid #fff;
}
.vertPosts__item:hover, .vertPosts__item:active {
  color: #D900AA;
}
.vertPosts__link {
  display: block;
  padding: 1em 0.5em;
}
.vertPosts__term {
  font-size: 1rem;
  display: inline-block;
  text-align: center;
  width: 120px;
  padding: 0.5rem 0;
  margin: 0 2rem;
  background-color: #fff;
  color: black;
}
.vertPosts__icon {
  position: absolute;
  height: 2em;
  width: 2em;
  right: 0.5em;
  top: 50%;
  transform: translateY(-50%);
}

@media screen and (max-width: 960px) {
  .vertPosts__ttl {
    display: block;
    padding-top: 1rem;
    padding-right: 3rem;
  }
}
.content {
  position: relative;
  padding-top: 50px;
  padding-bottom: 50px;
}
.content__icon {
  position: absolute;
  display: inline-block;
}
.content__icon--right {
  width: 30%;
  right: 0;
  top: 0;
  transform: translateY(-100%);
}
.content__icon--left {
  width: 15%;
  left: 5%;
  top: 33.3333%;
  transform: translateX(-25%);
}
.content__icon--HR {
  width: 15%;
}
.content__heading {
  display: flex;
  align-items: center;
}
.content__num {
  font-size: 4.5rem;
  font-family: "PPSupplyMono-Regular";
  margin-right: 1em;
}
.content__ttl {
  font-size: 2.5rem;
  font-weight: bold;
}
.content__ttl--rotate {
  font-size: 2.5rem;
  font-family: "PPSupplyMono-Regular";
  transform: rotate(-90deg) translateX(25%);
  transform-origin: left top;
  position: absolute;
  left: 1em;
  top: 500px;
}
.content__ttl--rotate p {
  font-family: "PPSupplyMono-Regular";
}
.content__body {
  margin-top: 50px;
}
.content__body--horizontal {
  display: flex;
  flex-shrink: 1;
  justify-content: space-between;
  margin-left: 12.5rem;
}
.content__body--horizontal .content__txt {
  margin-right: 50px;
}
.content__txt {
  font-size: 1.25rem;
  line-height: 1.666;
}
.content__txt p + p {
  margin-top: 1em;
}
.content__logo {
  margin-top: 1em;
}
.content__img {
  width: 50%;
  flex-shrink: 0;
}
.content__card {
  width: 60%;
  margin-left: auto;
  margin-right: auto;
}
.content__card:not(:first-child) {
  margin-top: 50px;
}

@media screen and (max-width: 960px) {
  .content {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
  .content__ttl {
    font-size: 2rem;
  }
  .content__ttl--rotate {
    font-size: 2.5rem;
    font-family: "PPSupplyMono-Regular";
    transform: rotate(-90deg);
    transform-origin: right bottom;
    left: auto;
    right: 0.5em;
    top: 10%;
    text-align: right;
  }
  .content__num {
    font-size: 3rem;
  }
  .content__heading {
    align-items: start;
  }
  .content__icon--left {
    width: 15%;
    left: 5%;
    top: -5%;
    transform: none;
  }
  .content__body {
    margin-top: 50px;
  }
  .content__body--horizontal {
    flex-direction: column;
    margin-left: 0;
  }
  .content__body--horizontal .content__txt {
    width: 60%;
    margin-left: auto;
    margin-right: auto;
  }
  .content__logo {
    margin-left: auto;
    margin-right: auto;
  }
  .content__img {
    aspect-ratio: 16/9;
    max-width: 520px;
    width: 100%;
    margin-top: 2rem;
    margin-left: auto;
    margin-right: auto;
  }
  .content__card {
    max-width: 520px;
    width: 100%;
  }

  .sp--norotate {
    transform: none;
    top: 50px;
  }
}
@media screen and (max-width: 520px) {
  .content__num {
    font-size: 2rem;
  }
  .content__ttl {
    font-size: 1.5rem;
  }
  .content__ttl--rotate {
    font-size: 2rem;
    top: 5rem;
  }
  .content__ttl--rotate p {
    font-size: 1em;
  }
  .content__icon--left {
    width: 20%;
  }
}
.infoList {
  font-size: 3vh;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.infoList__item {
  display: flex;
  line-height: 2rem;
}
.infoList__item:not(:first-child) {
  margin-top: 2rem;
}
.infoList__head {
  display: inline-block;
  width: 20%;
}
.infoList__desc {
  display: inline-block;
  width: 80%;
}

@media screen and (max-width: 960px) {
  .infoList {
    font-size: 1rem;
  }
  .infoList__item {
    margin-top: 2rem;
  }
  .infoList__item:not(:first-child) {
    margin-top: 2rem;
  }
}
@media screen and (max-width: 520px) {
  .infoList__head {
    width: 30%;
  }
}
.socialIcons {
  display: flex;
  margin-top: 5em;
}
.socialIcons__item:not(:last-child) {
  margin-right: 5em;
}
.socialIcons__bg {
  width: 80px;
  height: 80px;
  background-color: #36042D;
  border-radius: 20%;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}
.socialIcons__img {
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}
.socialIcons__txt {
  font-family: "PPSupplyMono-Regular";
  text-align: center;
  font-size: 1.5rem;
  margin-top: 1em;
}
.socialIcons__link {
  display: block;
}
.socialIcons__link:hover .socialIcons__bg, .socialIcons__link:active .socialIcons__bg {
  background-color: #1E008C;
}
.socialIcons__link:hover .socialIcons__img img, .socialIcons__link:active .socialIcons__img img {
  -webkit-animation: shake 0.1s 5;
          animation: shake 0.1s 5;
}
.socialIcons__link:hover .socialIcons__txt, .socialIcons__link:active .socialIcons__txt {
  color: #D900AA;
}

@-webkit-keyframes shake {
  0% {
    transform: translate(0px, 0px) rotateZ(0deg);
  }
  25% {
    transform: translate(2px, 2px) rotateZ(1deg);
  }
  50% {
    transform: translate(0px, 2px) rotateZ(0deg);
  }
  75% {
    transform: translate(2px, 0px) rotateZ(-1deg);
  }
  100% {
    transform: translate(0px, 0px) rotateZ(0deg);
  }
}

@keyframes shake {
  0% {
    transform: translate(0px, 0px) rotateZ(0deg);
  }
  25% {
    transform: translate(2px, 2px) rotateZ(1deg);
  }
  50% {
    transform: translate(0px, 2px) rotateZ(0deg);
  }
  75% {
    transform: translate(2px, 0px) rotateZ(-1deg);
  }
  100% {
    transform: translate(0px, 0px) rotateZ(0deg);
  }
}
@media screen and (max-width: 960px) {
  .socialIcons {
    justify-content: space-between;
  }
}
@media screen and (max-width: 520px) {
  .socialIcons {
    margin-top: 7vw;
    justify-content: center;
  }
  .socialIcons__item:not(:last-child) {
    margin-right: 15vw;
  }
  .socialIcons__bg {
    width: 60px;
    height: 60px;
  }
  .socialIcons__txt {
    font-size: 1rem;
  }
}
.menu__btn {
  cursor: pointer;
}
.menu__btnTxt {
  text-align: center;
}
.menu__btn--close {
  width: 50px;
  margin-left: auto;
  margin-right: 30px;
  margin-top: 30px;
}
.menu__list {
  margin-top: 2rem;
}
.menu__item {
  text-align: center;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
}
.menu__item:last-child {
  border-bottom: unset;
}
.menu__item:not(:last-child) a {
  padding: 2rem 0;
  display: block;
  text-align: center;
}
.menu__item:not(:last-child):hover, .menu__item:not(:last-child):active {
  background-color: #D900AA;
}
.menu__item > .btn {
  margin-top: 2rem;
  margin-left: auto;
  margin-right: auto;
}

.line {
  width: 36px;
  height: 36px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}

.top, .middle, .bottom {
  position: absolute;
}

.top {
  display: block;
  width: 100%;
  height: 1px;
  background-color: #fff;
  top: 0;
}

.middle {
  display: block;
  width: 100%;
  height: 1px;
  background-color: #fff;
  top: 10px;
}

.bottom {
  display: block;
  width: 60%;
  height: 1px;
  background-color: #fff;
  top: 20px;
  right: 0;
}

.cross {
  width: 50px;
  height: 50px;
  position: relative;
}

.left {
  display: block;
  content: "";
  background-color: #fff;
  height: 1px;
  width: 100%;
  transform: rotate(45deg);
  position: absolute;
  top: 50%;
  left: 0;
}

.right {
  display: block;
  content: "";
  background-color: #fff;
  height: 1px;
  width: 100%;
  transform: rotate(-45deg);
  position: absolute;
  top: 50%;
  left: 0;
}

@media (orientation: landscape) and (max-device-width: 960px) {
  .menu__btn--close {
    margin-right: 15px;
    margin-top: 15px;
  }
  .menu__btn .cross {
    margin-right: auto;
    margin-left: auto;
  }
  .menu__item:not(:last-child) a {
    padding: 1rem 0;
  }

  .cross {
    width: 30px;
    height: 30px;
  }
}
.btn {
  font-family: "PPSupplyMono-Regular";
  position: relative;
  width: 160px;
  height: 48px;
  font-size: 1.5em;
  display: inline-block;
  text-align: center;
  transition: all 0.5s cubic-bezier(0.39, 0.5, 0.15, 1.36);
  border-radius: 36px;
  border-color: #D900AA;
  border-width: 1px;
  border-style: solid;
}
.btn > span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -45%);
  font-family: "PPSupplyMono-Regular";
}
.btn--contact {
  background-color: #D900AA;
  box-shadow: #D900AA 0 0px 0px 2px inset;
}
.btn--contact:hover, .btn--contact:active {
  color: #D900AA;
  box-shadow: #000000 0 80px 0px 2px inset;
}
.btn--transparent {
  color: #D900AA;
}
.btn--transparent:hover, .btn--transparent:active {
  color: #fff;
  box-shadow: #D900AA 0 80px 0px 2px inset;
}

@media screen and (max-width: 520px) {
  .btn {
    width: 120px;
    height: 36px;
    font-size: 1em;
    width: 30%;
  }
}
.logo img {
  width: 150px;
}
.logo__wrap {
  display: block;
  width: 100%;
  height: 100%;
}

@media screen and (max-width: 520px) {
  .logo {
    width: 120px;
  }
}
.media {
  position: relative;
  cursor: pointer;
  aspect-ratio: 824/491;
}
.media__frame {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  pointer-events: none;
  aspect-ratio: 824/491;
}
.media__frame img {
  height: 100%;
  width: 100%;
}
.media__cont {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 85%;
  z-index: 2;
  padding: 2%;
  aspect-ratio: 824/491;
}

@media screen and (max-width: 960px) {
  .media__cont {
    height: auto;
  }
}
.card {
  text-align: center;
}
.card__txt {
  display: inline-block;
}
.card__txt p {
  text-align: left;
}

.scroll-top {
  position: fixed;
  z-index: 100;
  bottom: 1em;
  right: 2em;
  cursor: pointer;
  transform: rotate(90deg);
  transform-origin: right bottom;
}
.scroll-top a {
  font-size: 1.5em;
  display: block;
  white-space: nowrap;
  font-family: "PPSupplyMono-Regular";
  text-align: center;
  color: #D900AA;
}

@media screen and (max-width: 960px) {
  .scroll-top a {
    font-size: 1em;
  }
}
.header {
  color: #fff;
  position: relative;
  overflow: hidden;
}
.header__bg {
  background-image: url(../img/00_fv_bg.png);
  background-repeat: no-repeat;
  background-size: cover;
  aspect-ratio: 16/9;
}
.header__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 30px;
}
.header__nav ul {
  display: flex;
  align-items: center;
}
.header__nav--sp {
  display: none;
}
.header__item:not(:last-child) {
  margin-right: 2.5em;
}
.header__item:hover .header__link, .header__item:active .header__link {
  color: #D900AA;
}
.header__link {
  font-size: 1.5rem;
  font-family: "PPSupplyMono-Regular";
}
.header__body {
  height: 100%;
  position: relative;
  pointer-events: none;
}
.header__slide {
  width: 100%;
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
}
.header__cont {
  position: absolute;
  bottom: 0;
  left: 5%;
  padding-bottom: 5%;
}
.header__txt {
  font-size: 5vw;
  padding-bottom: 0.75em;
}
.header__txt p {
  font-family: "Stolzl-Regular";
}
.header__menu {
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #1E008C;
  transform: translateY(-100%);
  transition: 0.5s;
}
.header__menu.active {
  transform: translateY(0);
  transition: 0.5s;
}

@media screen and (max-width: 960px) {
  .header__bg {
    aspect-ratio: 4/5;
    background-position: center;
  }
  .header__top {
    padding-top: 15px;
  }
  .header__nav {
    display: none;
  }
  .header__nav--sp {
    display: flex;
    align-items: center;
  }
  .header__btn--centered {
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
  }
  .header__cont {
    width: 100%;
    max-width: 100%;
    padding-bottom: 20%;
    left: 0;
  }
  .header__txt {
    padding-left: 5%;
    padding-bottom: 10%;
    font-size: 10vw;
  }
}
@media screen and (max-width: 520px) {
  .header__btn--centered {
    left: 60%;
  }
  .header__txt p {
    font-size: 1em;
  }
}
.section {
  padding: 5rem 0;
  color: #1E008C;
}
.section__ttl {
  font-family: "Stolzl-Regular";
  font-size: 6rem;
  margin-bottom: 2rem;
}
.section__ttl--centered {
  text-align: center;
  color: #D900AA;
  margin-bottom: 0;
}
.section__ttl--grad {
  font-family: "Stolzl-Regular";
  display: inline-block;
  background: linear-gradient(to right, #D900AA, #1E008C);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.section--bgBlack {
  background-color: #000000;
  color: #fff;
}
.section--bgImg {
  aspect-ratio: 16/9;
  color: #fff;
  position: relative;
  padding: 5% 0;
  background-image: url(../img/3D_frame.png);
  background-repeat: no-repeat;
  background-size: cover;
}
.section__cont--vertPosts {
  margin-top: 5rem;
}
.section__wrap:first-child {
  margin-top: 5rem;
}
.section__list {
  padding-left: 2.5rem;
  padding-top: 1rem;
  height: 100%;
}
.section__txt--EN {
  font-family: "PPSupplyMono-Regular";
  font-size: 2rem;
}
.section__container {
  padding-top: 5rem;
  padding-bottom: 5rem;
  position: relative;
  height: 100%;
}
.section__imgWrap {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 40%;
}
.section__infoWrap {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@media screen and (max-width: 960px) {
  .section {
    padding: 2.5rem 0;
  }
  .section__ttl {
    font-size: 4rem;
    margin-top: 2.5rem;
  }
  .section__ttl--centered {
    margin-top: 0;
  }
  .section__imgWrap {
    position: unset;
    width: 100%;
    max-width: 520px;
    padding-top: 10%;
    margin-left: auto;
    margin-right: auto;
  }
  .section__list {
    padding-left: 15px;
  }
  .section__txt--EN {
    margin-top: 5rem;
    font-size: 1.75rem;
  }
  .section__container {
    max-width: 520px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .section--bgImg {
    aspect-ratio: 750/1142;
    background-image: url(../img/3D_frame_sp.png);
  }
  .section__list {
    padding: 0 15px;
    width: 100%;
    height: auto;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
  }
}
@media screen and (max-width: 520px) {
  .section__ttl {
    margin-top: 0;
    font-size: 3rem;
  }
  .section__ttl--grad {
    font-size: 14vw;
  }
  .section__cont--vertPosts {
    margin-top: 3rem;
  }
  .section__txt--EN {
    margin-top: 7vw;
    font-size: 5vw;
  }
}
.footer {
  background-color: #000000;
  color: #fff;
}
.footer * {
  font-family: "PPSupplyMono-Regular";
}
.footer--sp {
  display: none;
}
.footer__inner {
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
}
.footer__wrap {
  display: flex;
  height: 240px;
  max-width: 960px;
  margin-right: auto;
  margin-left: auto;
  border-left: 1px solid #fff;
  border-right: 1px solid #fff;
}
.footer__logo {
  position: relative;
  aspect-ratio: 1/1;
}
.footer__logo img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.footer__socialWrap {
  width: 150px;
}
.footer__socialLink {
  height: 33.3333%;
  display: block;
  border: 1px solid #fff;
  position: relative;
}
.footer__socialLink span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}
.footer__socialLink:hover, .footer__socialLink:active {
  background-color: #D900AA;
  border-color: #D900AA;
  color: #000000;
}
.footer__company {
  margin-right: 2em;
}
.footer__txt {
  margin-top: 2em;
}
.footer__nav {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
.footer__nav li {
  height: 50%;
  position: relative;
}
.footer__nav li:first-child, .footer__nav li:nth-child(1) {
  margin-right: 5em;
}
.footer__link {
  display: block;
  line-height: 1.5;
}
.footer__link:hover:before, .footer__link:active:before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  background-color: #D900AA;
  position: absolute;
  top: 0.5em;
  left: -1em;
  border-radius: 50%;
}
.footer__cont {
  display: flex;
  padding-top: 2rem;
  padding-left: 2rem;
  padding-bottom: 2rem;
}
.footer__copy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2.5rem 3.75rem;
}

@media screen and (max-width: 960px) {
  .footer {
    display: none;
  }
  .footer--sp {
    display: block;
  }
  .footer__wrap {
    height: auto;
    max-width: 100%;
    margin-right: none;
    margin-left: none;
    border-left: none;
    border-right: none;
  }
  .footer__logo {
    position: unset;
    aspect-ratio: unset;
  }
  .footer__logo img {
    width: auto;
    position: unset;
    transform: none;
  }
  .footer__cont {
    padding-top: 0;
    padding-left: 0;
    padding-bottom: 0;
  }
  .footer__cont--left {
    padding-top: 2rem;
    padding-left: 2rem;
    padding-bottom: 2rem;
    border-right: 1px solid #fff;
    width: 70%;
  }
  .footer__cont--right {
    padding: 2rem 0;
    margin-left: auto;
    margin-right: auto;
  }
  .footer__company {
    margin-top: 2em;
  }
  .footer__txt {
    margin-top: 1em;
  }
  .footer__nav {
    justify-content: space-between;
  }
  .footer__nav li {
    height: auto;
    position: relative;
  }
  .footer__nav li:first-child, .footer__nav li:nth-child(1) {
    margin-right: 0;
  }
  .footer__nav li:not(:first-child) {
    margin-top: 1em;
  }
  .footer__link--small {
    font-size: 12px;
  }
  .footer__copy {
    padding: 1em;
  }
  .footer__socialLink {
    height: auto;
    border: none;
    position: unset;
    display: inline-block;
    vertical-align: middle;
  }
  .footer__socialLink span {
    position: unset;
    transform: none;
  }
  .footer__socialLink:hover, .footer__socialLink:active {
    background-color: #D900AA;
    border-color: #D900AA;
    color: #000000;
  }
  .footer__socialLink:not(:last-child) {
    margin-right: 1em;
  }
  .footer__socialWrap {
    width: auto;
  }
}
@media screen and (max-width: 520px) {
  .footer__cont--left {
    padding-top: 1.5rem;
    padding-left: 1.5rem;
    padding-bottom: 1.5rem;
    width: 60%;
  }
  .footer__socialLink {
    width: 25%;
  }
  .footer__socialLink:not(:last-child) {
    margin-right: 0.5em;
  }
}
.swiper-button-prev {
  font-size: 1rem;
}
.swiper-button-prev, .swiper-button-next {
  color: #fff;
  opacity: 0.7;
}

.underline {
  text-decoration: underline;
}
.underline:hover, .underline:active {
  color: #D900AA;
}

.dot::before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 1rem;
  height: 1rem;
  background-color: currentColor;
  vertical-align: middle;
  margin-right: 1rem;
}

._sp {
  display: none;
}

.js_fadeIn {
  opacity: 0;
  visibility: hidden;
}

.js_scrolled {
  opacity: 1;
  visibility: visible;
  transition: 1s;
}

@media screen and (max-width: 960px) {
  ._pc {
    display: none;
  }

  ._sp {
    display: block;
  }
}
@media screen and (max-width: 520px) {
  ._sp-nopadding {
    padding: 0;
  }
}
/*# sourceMappingURL=style.css.map */