@charset "UTF-8";
:root {
  --ViewWidth: 1280;
  --ViewHeight: 800;
  --HeaderHeight: 86px;
  --Font__Ja: "Noto Sans JP",
  serif;
  --Font__En: "Poppins",
  sans-serif;
  --ColorWht: #fff;
  --ColorBlk: #000;
  --ColorGrayscale__100: #000;
  --ColorGrayscale__85: #262626;
  --ColorGrayscale__75: #4C4C4C;
  --ColorGrayscale__55: #737373;
  --ColorGrayscale__40: #999999;
  --ColorGrayscale__25: #BFBFBF;
  --ColorGrayscale__10: #E5E5E5;
}
@media screen and (max-width: 768px) {
  :root {
    --ViewWidth: 375;
    --ViewHeight: 812;
  }
}
@media screen and (max-width: 768px) {
  :root {
    --HeaderHeight: 48px;
  }
}

.forPCview {
  display: block;
}
@media screen and (max-width: 768px) {
  .forPCview {
    display: none !important;
  }
}

.forSPview {
  display: none;
}
@media screen and (max-width: 768px) {
  .forSPview {
    display: block !important;
  }
}

.lp__wrapper * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  height: auto;
}
.lp__wrapper * h1,
.lp__wrapper * h2,
.lp__wrapper * h3,
.lp__wrapper * h4,
.lp__wrapper * h5,
.lp__wrapper * h6 {
  font-size: unset;
  font-weight: unset;
}
.lp__wrapper * picture,
.lp__wrapper * img {
  width: 100%;
  display: block;
}
.lp__wrapper * ul,
.lp__wrapper * li {
  list-style: none;
}
.lp__wrapper * a {
  text-decoration: none;
  color: unset;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
.lp__wrapper * a:hover {
  cursor: pointer;
  opacity: 0.6;
}

.lp__intro {
  /* アニメーション */
}
.lp__intro #intro,
.lp__intro #videoOverlay {
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 1;
  -webkit-transition: opacity 1s;
  transition: opacity 1s;
}
@media screen and (max-width: 768px) {
  .lp__intro #intro,
  .lp__intro #videoOverlay {
    top: unset;
    left: unset;
    right: unset;
    bottom: unset;
    height: calc(335 / var(--ViewWidth) * 100vw);
  }
}
.lp__intro #mainContent {
  position: relative;
  overflow-y: hidden;
}
.lp__intro #mainContent .scroll-enabled {
  overflow-y: auto;
}
.lp__intro .fade-in-intro {
  -webkit-animation: fadeInIntro__anim 0.6s forwards;
          animation: fadeInIntro__anim 0.6s forwards;
}
@-webkit-keyframes fadeInIntro__anim {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeInIntro__anim {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.lp__intro .fade-out-intro {
  -webkit-animation: fadeOutIntro__anim 1s forwards;
          animation: fadeOutIntro__anim 1s forwards;
}
@-webkit-keyframes fadeOutIntro__anim {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes fadeOutIntro__anim {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.lp__intro .hidden {
  display: none !important;
}
.lp__intro #intro {
  position: absolute;
  top: var(--HeaderHeight);
  width: 100%;
  height: calc(100vh - var(--HeaderHeight));
  z-index: 10;
}
@media screen and (max-width: 768px) {
  .lp__intro #intro {
    height: calc(100svh - var(--HeaderHeight));
  }
}
.lp__intro #intro span {
  position: absolute;
  left: 50%;
  -webkit-transform: translate(-50%);
          transform: translate(-50%);
  bottom: calc(30 / var(--ViewWidth) * 100vw);
  display: grid;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  height: auto;
  padding: calc(9 / var(--ViewWidth) * 100vw) calc(30 / var(--ViewWidth) * 100vw);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border: solid 1px var(--ColorWht);
  border-radius: 62px;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  background-color: var(--ColorBlk);
  cursor: pointer;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
  color: var(--ColorWht);
}
.lp__intro #intro span:hover {
  background-color: var(--ColorWht);
  color: var(--ColorBlk);
}
.lp__intro #intro span#startBtn {
  font-family: var(--Font__En);
  font-size: calc(12 / var(--ViewWidth) * 100vw);
  font-weight: 400;
  letter-spacing: 0em;
  line-height: 1;
  text-align: center;
}
.lp__intro #videoOverlay {
  position: fixed;
  top: var(--HeaderHeight);
  width: 100%;
  height: calc(100vh - var(--HeaderHeight));
  background-color: var(--ColorWht);
  z-index: 999;
}
.lp__intro #videoOverlay video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  top: 0;
  left: 0;
}
@media screen and (max-width: 768px) {
  .lp__intro #videoOverlay video {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
    position: fixed;
    top: 0;
    left: 0;
  }
}
.lp__intro #videoOverlay span {
  position: absolute;
  top: calc(20 / var(--ViewWidth) * 100vw);
  right: calc(20 / var(--ViewWidth) * 100vw);
  padding: calc(6 / var(--ViewWidth) * 100vw) calc(18 / var(--ViewWidth) * 100vw);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border: solid 1px var(--ColorBlk);
  border-radius: 62px;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  background-color: rgba(255, 255, 255, 0.5);
  color: var(--ColorBlk);
  cursor: pointer;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
.lp__intro #videoOverlay span:hover {
  background-color: rgb(0, 0, 0);
  color: var(--ColorWht);
}
.lp__intro #videoOverlay span#skipBtn {
  font-family: var(--Font__En);
  font-size: calc(10 / var(--ViewWidth) * 100vw);
  font-weight: 400;
  letter-spacing: 0em;
  line-height: 1;
  text-align: center;
}

.lp__wrapper {
  position: relative;
}
.lp__wrapper .lp__mv {
  position: relative;
  width: 100%;
  height: calc(100vh - var(--HeaderHeight));
  background-color: var(--ColorBlk);
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .lp__wrapper .lp__mv {
    height: calc(100svh - var(--HeaderHeight));
  }
}
.lp__wrapper .lp__mv .mv__elms {
  position: relative;
  height: auto;
  z-index: 1;
}
@media screen and (max-width: 768px) {
  .lp__wrapper .lp__mv .mv__elms {
    height: calc(100svh - var(--HeaderHeight));
  }
}
.lp__wrapper .lp__mv .mv__elms svg {
  position: relative;
  top: initial;
  left: initial;
  -webkit-transform: initial;
          transform: initial;
  width: 100%;
  height: calc(100svh - var(--HeaderHeight));
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center;
     object-position: center;
}
@media screen and (max-width: 768px) {
  .lp__wrapper .lp__mv .mv__elms svg {
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    width: 100%;
    height: auto;
  }
}
.lp__wrapper .lp__mv .mv__elms#mv__kv__pc svg .lgo__mv__st0 {
  -webkit-filter: url(#outer-glow-2);
          filter: url(#outer-glow-2);
}
.lp__wrapper .lp__mv .mv__elms#mv__kv__pc svg .lgo__mv__st1 {
  -webkit-filter: url(#outer-glow-3);
          filter: url(#outer-glow-3);
}
.lp__wrapper .lp__mv .mv__elms#mv__kv__pc svg .lgo__mv__st2 {
  -webkit-filter: url(#outer-glow-4);
          filter: url(#outer-glow-4);
}
.lp__wrapper .lp__mv .mv__elms#mv__kv__pc svg .lgo__mv__st3 {
  -webkit-filter: url(#outer-glow-5);
          filter: url(#outer-glow-5);
}
.lp__wrapper .lp__mv .mv__elms#mv__kv__pc svg .lgo__mv__st4 {
  -webkit-filter: url(#outer-glow-1);
          filter: url(#outer-glow-1);
}
.lp__wrapper .lp__mv .mv__elms#mv__kv__pc svg .lgo__mv__st5 {
  fill: url(#_new_gradient_swatch_9);
}
.lp__wrapper .lp__mv .mv__elms#mv__kv__pc svg .lgo__mv__st6 {
  fill: #fff;
}
.lp__wrapper .lp__mv .mv__elms#mv__kv__pc svg .lgo__mv__st7 {
  fill: url(#_new_gradient_swatch_97);
}
.lp__wrapper .lp__mv .mv__elms#mv__kv__pc svg .lgo__mv__st8 {
  fill: url(#_new_gradient_swatch_94);
}
.lp__wrapper .lp__mv .mv__elms#mv__kv__pc svg .lgo__mv__st9 {
  fill: url(#_new_gradient_swatch_91);
}
.lp__wrapper .lp__mv .mv__elms#mv__kv__pc svg .lgo__mv__st10 {
  fill: url(#_new_gradient_swatch_96);
}
.lp__wrapper .lp__mv .mv__elms#mv__kv__pc svg .lgo__mv__st11 {
  fill: url(#_new_gradient_swatch_93);
}
.lp__wrapper .lp__mv .mv__elms#mv__kv__pc svg .lgo__mv__st12 {
  fill: url(#_new_gradient_swatch_92);
}
.lp__wrapper .lp__mv .mv__elms#mv__kv__pc svg .lgo__mv__st13 {
  fill: url(#_new_gradient_swatch_95);
}
.lp__wrapper .lp__mv .mv__elms#mv__kv__pc svg .lgo__mv__st14 {
  fill: #3e3a39;
  -webkit-filter: url(#outer-glow-6);
          filter: url(#outer-glow-6);
}
.lp__wrapper .lp__mv .mv__elms#mv__kv__pc svg .lgo__mv__st15 {
  fill: #333;
}
.lp__wrapper .lp__mv .mv__elms#mv__kv__pc svg .lgo__mv__st16 {
  fill: url(#_mv_gradient_93);
}
.lp__wrapper .lp__mv .mv__elms#mv__kv__sp svg .lgo__mv__st_sp0 {
  -webkit-filter: url(#outer-glow-7);
          filter: url(#outer-glow-7);
}
.lp__wrapper .lp__mv .mv__elms#mv__kv__sp svg .lgo__mv__st_sp1 {
  -webkit-filter: url(#outer-glow-8);
          filter: url(#outer-glow-8);
}
.lp__wrapper .lp__mv .mv__elms#mv__kv__sp svg .lgo__mv__st_sp2 {
  -webkit-filter: url(#outer-glow-9);
          filter: url(#outer-glow-9);
}
.lp__wrapper .lp__mv .mv__elms#mv__kv__sp svg .lgo__mv__st_sp3 {
  -webkit-filter: url(#outer-glow-2);
          filter: url(#outer-glow-2);
}
.lp__wrapper .lp__mv .mv__elms#mv__kv__sp svg .lgo__mv__st_sp4 {
  -webkit-filter: url(#outer-glow-3);
          filter: url(#outer-glow-3);
}
.lp__wrapper .lp__mv .mv__elms#mv__kv__sp svg .lgo__mv__st_sp5 {
  -webkit-filter: url(#outer-glow-4);
          filter: url(#outer-glow-4);
}
.lp__wrapper .lp__mv .mv__elms#mv__kv__sp svg .lgo__mv__st_sp6 {
  -webkit-filter: url(#outer-glow-5);
          filter: url(#outer-glow-5);
}
.lp__wrapper .lp__mv .mv__elms#mv__kv__sp svg .lgo__mv__st_sp7 {
  -webkit-filter: url(#outer-glow-1);
          filter: url(#outer-glow-1);
}
.lp__wrapper .lp__mv .mv__elms#mv__kv__sp svg .lgo__mv__st_sp8 {
  fill: url(#_new_gradient_sp_9);
}
.lp__wrapper .lp__mv .mv__elms#mv__kv__sp svg .lgo__mv__st_sp9 {
  fill: #fff;
}
.lp__wrapper .lp__mv .mv__elms#mv__kv__sp svg .lgo__mv__st_sp10 {
  fill: url(#_new_gradient_sp_97);
}
.lp__wrapper .lp__mv .mv__elms#mv__kv__sp svg .lgo__mv__st_sp11 {
  fill: url(#_new_gradient_sp_94);
}
.lp__wrapper .lp__mv .mv__elms#mv__kv__sp svg .lgo__mv__st_sp12 {
  fill: url(#_new_gradient_sp_91);
}
.lp__wrapper .lp__mv .mv__elms#mv__kv__sp svg .lgo__mv__st_sp13 {
  fill: url(#_new_gradient_sp_96);
}
.lp__wrapper .lp__mv .mv__elms#mv__kv__sp svg .lgo__mv__st_sp14 {
  fill: url(#_new_gradient_sp_93);
}
.lp__wrapper .lp__mv .mv__elms#mv__kv__sp svg .lgo__mv__st_sp15 {
  fill: url(#_new_gradient_sp_92);
}
.lp__wrapper .lp__mv .mv__elms#mv__kv__sp svg .lgo__mv__st_sp16 {
  fill: url(#_new_gradient_sp_95);
}
.lp__wrapper .lp__mv .mv__elms#mv__kv__sp svg .lgo__mv__st_sp17 {
  -webkit-filter: url(#outer-glow-6);
          filter: url(#outer-glow-6);
}
.lp__wrapper .lp__mv .mv__elms#mv__kv__sp svg .lgo__mv__st_sp17,
.lp__wrapper .lp__mv .mv__elms#mv__kv__sp svg .lgo__mv__st_sp18 {
  fill: #3e3a39;
}
.lp__wrapper .lp__mv .mv__elms#mv__kv__sp svg .lgo__mv__st_sp18 {
  -webkit-filter: url(#outer-glow-12);
          filter: url(#outer-glow-12);
}
.lp__wrapper .lp__mv .mv__elms#mv__kv__sp svg .lgo__mv__st_sp19 {
  fill: #333;
}
.lp__wrapper .lp__mv .mv__elms#mv__kv__sp svg .lgo__mv__st_sp20 {
  display: none;
}
.lp__wrapper .lp__mv .mv__elms#mv__kv__sp svg .lgo__mv__st_sp21 {
  fill: url(#_mv_gradient_sp_93);
}
.lp__wrapper .lp__mv .mv__elms#mv__kv__sp svg .lgo__mv__st_sp22 {
  -webkit-filter: url(#outer-glow-11);
          filter: url(#outer-glow-11);
}
.lp__wrapper .lp__mv .mv__elms#mv__kv__sp svg .lgo__mv__st_sp23 {
  -webkit-filter: url(#outer-glow-10);
          filter: url(#outer-glow-10);
}
.lp__wrapper .lp__mv .mv__background {
  position: absolute;
  top: 0;
  left: 0;
  background-image: url("../img/mv__background__pc.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: calc(100vh - var(--HeaderHeight));
}
@media screen and (max-width: 768px) {
  .lp__wrapper .lp__mv .mv__background {
    background-image: url("../img/mv__background__sp.png");
    height: 100svh;
  }
}
.lp__wrapper .lp__video {
  position: relative;
  padding: calc(72 / var(--ViewWidth) * 100vw);
}
@media screen and (max-width: 768px) {
  .lp__wrapper .lp__video {
    padding: calc(72 / var(--ViewWidth) * 100vw) 0;
  }
}
.lp__wrapper .lp__video .video__container {
  position: relative;
  width: calc(928 / var(--ViewWidth) * 100vw);
  height: calc(522 / var(--ViewWidth) * 100vw);
  margin: 0 auto 0;
}
@media screen and (max-width: 768px) {
  .lp__wrapper .lp__video .video__container {
    width: 100%;
    height: unset;
  }
}
.lp__wrapper .lp__video .video__container img {
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.lp__wrapper .lp__video .video__container video {
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.lp__wrapper .pc__view {
  position: relative;
  width: auto;
  height: calc(888.09 / var(--ViewWidth) * 100vw);
  background-color: var(--ColorBlk);
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .lp__wrapper .pc__view {
    height: calc(359.66 / var(--ViewWidth) * 100vw);
  }
}
.lp__wrapper .pc__view .pc__view__head {
  position: absolute;
  top: calc(46.3 / var(--ViewWidth) * 100vw);
  width: 100%;
  height: auto;
  z-index: 2;
}
@media screen and (max-width: 768px) {
  .lp__wrapper .pc__view .pc__view__head {
    top: calc(20.8 / var(--ViewWidth) * 100vw);
  }
}
.lp__wrapper .pc__view .pc__view__head h2 {
  display: grid;
  gap: calc(18 / var(--ViewWidth) * 100vw);
  width: 100%;
  height: auto;
}
@media screen and (max-width: 768px) {
  .lp__wrapper .pc__view .pc__view__head h2 {
    gap: calc(10 / var(--ViewWidth) * 100vw);
  }
}
.lp__wrapper .pc__view .pc__view__head h2 span {
  position: relative;
  display: block;
}
.lp__wrapper .pc__view .pc__view__head h2 span.pc__view__head__main {
  left: calc(201.3 / var(--ViewWidth) * 100vw);
  width: calc(876.04 / var(--ViewWidth) * 100vw);
}
@media screen and (max-width: 768px) {
  .lp__wrapper .pc__view .pc__view__head h2 span.pc__view__head__main {
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    width: calc(333.73 / var(--ViewWidth) * 100vw);
  }
}
.lp__wrapper .pc__view .pc__view__head h2 span.pc__view__head__sub {
  font-family: var(--Font__En);
  font-size: calc(30 / var(--ViewWidth) * 100vw);
  font-weight: 400;
  letter-spacing: 0em;
  line-height: 1;
  text-align: center;
  color: #A3A3A3;
}
@media screen and (max-width: 768px) {
  .lp__wrapper .pc__view .pc__view__head h2 span.pc__view__head__sub {
    font-size: calc(12 / var(--ViewWidth) * 100vw);
    line-height: 1;
  }
}
.lp__wrapper .pc__view .pc__background {
  position: relative;
  background-image: url("../img/pc__background.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  width: auto;
  height: calc(888.09 / var(--ViewWidth) * 100vw);
  z-index: 1;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .lp__wrapper .pc__view .pc__background {
    height: calc(359.66 / var(--ViewWidth) * 100vw);
  }
}
.lp__wrapper .pc__view .pc__viewmonitor {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(888.09 / var(--ViewWidth) * 100vw);
}
@media screen and (max-width: 768px) {
  .lp__wrapper .pc__view .pc__viewmonitor {
    height: calc(359.66 / var(--ViewWidth) * 100vw);
  }
}
.lp__wrapper .pc__view .pc__viewmonitor img {
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  width: 100%;
  height: 100%;
}
@media screen and (max-width: 768px) {
  .lp__wrapper .pc__view .pc__viewmonitor img {
    height: calc(359.66 / var(--ViewWidth) * 100vw);
  }
}
.lp__wrapper .logo__design {
  position: relative;
  width: 100%;
  height: calc(100vh - var(--HeaderHeight));
}
@media screen and (max-width: 768px) {
  .lp__wrapper .logo__design {
    height: calc(276 / var(--ViewWidth) * 100vw);
  }
}
.lp__wrapper .logo__design .pp__logo {
  position: relative;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  display: block;
  width: calc(887.76 / var(--ViewWidth) * 100vw);
}
@media screen and (max-width: 768px) {
  .lp__wrapper .logo__design .pp__logo {
    width: calc(287.72 / var(--ViewWidth) * 100vw);
  }
}
.lp__wrapper .logo__design .pp__logo svg {
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center;
     object-position: center;
  width: 100%;
  height: 100%;
}
.lp__wrapper .logo__design .pp__logo svg .pp__logo__st0 {
  fill: url(#_pp__logo__gradient_7);
}
.lp__wrapper .logo__design .pp__logo svg .pp__logo__st1 {
  fill: #c8c8c8;
}
.lp__wrapper .logo__identity {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #F2F2F2;
  padding: calc(124 / var(--ViewWidth) * 100vw) 0 calc(106 / var(--ViewWidth) * 100vw);
}
@media screen and (max-width: 768px) {
  .lp__wrapper .logo__identity {
    padding: calc(86 / var(--ViewWidth) * 100vw) 0 calc(54 / var(--ViewWidth) * 100vw);
  }
}
.lp__wrapper .logo__identity .logo__identity__container {
  position: relative;
  top: 0;
  left: calc(234 / var(--ViewWidth) * 100vw);
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  gap: calc(136 / var(--ViewWidth) * 100vw);
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
@media screen and (max-width: 768px) {
  .lp__wrapper .logo__identity .logo__identity__container {
    left: calc(42.2 / var(--ViewWidth) * 100vw);
    display: grid;
    gap: calc(46.5 / var(--ViewWidth) * 100vw);
  }
}
.lp__wrapper .logo__identity .logo__identity__container .logo__identity__data {
  position: relative;
  display: grid;
  gap: calc(91 / var(--ViewWidth) * 100vw);
}
@media screen and (max-width: 768px) {
  .lp__wrapper .logo__identity .logo__identity__container .logo__identity__data {
    gap: calc(30 / var(--ViewWidth) * 100vw);
  }
}
.lp__wrapper .logo__identity .logo__identity__container .logo__identity__data .identity__item {
  position: relative;
  display: grid;
  gap: calc(16 / var(--ViewWidth) * 100vw);
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
@media screen and (max-width: 768px) {
  .lp__wrapper .logo__identity .logo__identity__container .logo__identity__data .identity__item {
    gap: calc(10 / var(--ViewWidth) * 100vw);
  }
}
.lp__wrapper .logo__identity .logo__identity__container .logo__identity__data .identity__item h4 span {
  display: inline-block;
}
.lp__wrapper .logo__identity .logo__identity__container .logo__identity__data .identity__item h4 span.identity__item__name {
  font-family: var(--Font__En);
  font-size: calc(31 / var(--ViewWidth) * 100vw);
  font-weight: 600;
  letter-spacing: 0em;
  line-height: 1;
  color: #FF0000;
}
@media screen and (max-width: 768px) {
  .lp__wrapper .logo__identity .logo__identity__container .logo__identity__data .identity__item h4 span.identity__item__name {
    font-size: calc(27 / var(--ViewWidth) * 100vw);
    line-height: 1;
  }
}
.lp__wrapper .logo__identity .logo__identity__container .logo__identity__data .identity__item p.identity__item__desc {
  font-family: var(--Font__Ja);
  font-size: calc(16 / var(--ViewWidth) * 100vw);
  font-weight: 400;
  letter-spacing: 0.07em;
  line-height: 1.5625;
  color: var(--ColorBlk);
}
@media screen and (max-width: 768px) {
  .lp__wrapper .logo__identity .logo__identity__container .logo__identity__data .identity__item p.identity__item__desc {
    font-size: calc(14 / var(--ViewWidth) * 100vw);
    line-height: 1.5714285714;
  }
}
.lp__wrapper .logo__identity .logo__identity__container .logo__identity__elm {
  position: relative;
}
.lp__wrapper .logo__identity .logo__identity__container .logo__identity__elm .logo__elm__wrapp {
  position: relative;
  width: calc(362.03 / var(--ViewWidth) * 100vw);
  height: 100%;
}
@media screen and (max-width: 768px) {
  .lp__wrapper .logo__identity .logo__identity__container .logo__identity__elm .logo__elm__wrapp {
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    width: calc(238.61 / var(--ViewWidth) * 100vw);
  }
}
.lp__wrapper .logo__identity .logo__identity__container .logo__identity__elm .logo__elm__wrapp .logo__path {
  position: absolute;
  top: 0;
  right: 0;
  width: calc(286.32 / var(--ViewWidth) * 100vw);
  z-index: 1;
}
@media screen and (max-width: 768px) {
  .lp__wrapper .logo__identity .logo__identity__container .logo__identity__elm .logo__elm__wrapp .logo__path {
    width: calc(188.53 / var(--ViewWidth) * 100vw);
  }
}
.lp__wrapper .logo__identity .logo__identity__container .logo__identity__elm .logo__elm__wrapp .logo__body {
  position: relative;
  width: 100%;
  height: auto;
}
.lp__wrapper .logo__identity .logo__identity__container .logo__identity__elm .logo__elm__wrapp .logo__body img {
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: top center;
     object-position: top center;
  width: 100%;
  height: 100%;
}
.lp__wrapper .logo__color {
  position: relative;
  width: 100%;
  height: auto;
  padding: calc(128.6 / var(--ViewWidth) * 100vw) 0 calc(118 / var(--ViewWidth) * 100vw);
}
@media screen and (max-width: 768px) {
  .lp__wrapper .logo__color {
    padding: calc(71.7 / var(--ViewWidth) * 100vw) 0 calc(42.4 / var(--ViewWidth) * 100vw);
  }
}
.lp__wrapper .logo__color .logo__color__container {
  position: relative;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  gap: calc(172 / var(--ViewWidth) * 100vw);
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: calc(961.88 / var(--ViewWidth) * 100vw);
  height: auto;
}
@media screen and (max-width: 768px) {
  .lp__wrapper .logo__color .logo__color__container {
    display: grid;
    gap: calc(48 / var(--ViewWidth) * 100vw);
    width: calc(269.97 / var(--ViewWidth) * 100vw);
  }
}
.lp__wrapper .logo__color .logo__color__container .logo__color__wrapp {
  position: relative;
  display: grid;
  gap: calc(28.9 / var(--ViewWidth) * 100vw);
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  min-width: calc(380 / var(--ViewWidth) * 100vw);
}
@media screen and (max-width: 768px) {
  .lp__wrapper .logo__color .logo__color__container .logo__color__wrapp {
    gap: calc(19.5 / var(--ViewWidth) * 100vw);
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    min-width: calc(269.97 / var(--ViewWidth) * 100vw);
  }
}
.lp__wrapper .logo__color .logo__color__container .logo__color__wrapp .logo__color__image {
  position: relative;
  display: grid;
  gap: calc(26.4 / var(--ViewWidth) * 100vw);
}
@media screen and (max-width: 768px) {
  .lp__wrapper .logo__color .logo__color__container .logo__color__wrapp .logo__color__image {
    gap: calc(20.3 / var(--ViewWidth) * 100vw);
  }
}
.lp__wrapper .logo__color .logo__color__container .logo__color__wrapp .logo__color__image .logo__color__name {
  position: relative;
  width: 100%;
}
.lp__wrapper .logo__color .logo__color__container .logo__color__wrapp .logo__color__image .logo__color__name h4 span {
  position: relative;
  display: block;
  font-family: var(--Font__En);
  font-size: calc(21 / var(--ViewWidth) * 100vw);
  font-weight: 500;
  letter-spacing: 0em;
  line-height: 1;
  color: var(--ColorBlk);
}
@media screen and (max-width: 768px) {
  .lp__wrapper .logo__color .logo__color__container .logo__color__wrapp .logo__color__image .logo__color__name h4 span {
    font-size: calc(14 / var(--ViewWidth) * 100vw);
    line-height: 1;
  }
}
.lp__wrapper .logo__color .logo__color__container .logo__color__wrapp .logo__color__image .color__circle {
  position: relative;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  width: calc(380 / var(--ViewWidth) * 100vw);
  height: calc(380 / var(--ViewWidth) * 100vw);
}
@media screen and (max-width: 768px) {
  .lp__wrapper .logo__color .logo__color__container .logo__color__wrapp .logo__color__image .color__circle {
    width: calc(269.97 / var(--ViewWidth) * 100vw);
    height: calc(269.97 / var(--ViewWidth) * 100vw);
  }
}
.lp__wrapper .logo__color .logo__color__container .logo__color__wrapp .logo__color__image .color__circle.red {
  background-image: url("../img/color__circle__red.svg");
}
.lp__wrapper .logo__color .logo__color__container .logo__color__wrapp .logo__color__image .color__circle.gray {
  background-image: url("../img/color__circle__gray.svg");
}
.lp__wrapper .logo__color .logo__color__container .logo__color__wrapp .logo__color__data {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: calc(43 / var(--ViewWidth) * 100vw);
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
@media screen and (max-width: 768px) {
  .lp__wrapper .logo__color .logo__color__container .logo__color__wrapp .logo__color__data {
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
            justify-content: space-between;
    gap: calc(20 / var(--ViewWidth) * 100vw);
  }
}
.lp__wrapper .logo__color .logo__color__container .logo__color__wrapp .logo__color__data .color__detail {
  position: relative;
  display: grid;
  gap: calc(16 / var(--ViewWidth) * 100vw);
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
@media screen and (max-width: 768px) {
  .lp__wrapper .logo__color .logo__color__container .logo__color__wrapp .logo__color__data .color__detail {
    gap: calc(10 / var(--ViewWidth) * 100vw);
  }
}
.lp__wrapper .logo__color .logo__color__container .logo__color__wrapp .logo__color__data .color__detail span {
  position: relative;
  display: inline-block;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  overflow: hidden;
  font-family: var(--Font__En);
  font-size: calc(17 / var(--ViewWidth) * 100vw);
  font-weight: 500;
  letter-spacing: 0em;
  line-height: 1;
  color: var(--ColorBlk);
}
@media screen and (max-width: 768px) {
  .lp__wrapper .logo__color .logo__color__container .logo__color__wrapp .logo__color__data .color__detail span {
    font-size: calc(11 / var(--ViewWidth) * 100vw);
    line-height: 1;
  }
}
.lp__wrapper .logo__color .logo__color__container .logo__color__wrapp .logo__color__data .color__detail span.todata::before {
  content: none !important;
}
.lp__wrapper .logo__color .logo__color__container .logo__color__wrapp .logo__color__data .color__detail span.color__rgb::before {
  content: "RGB :";
}
.lp__wrapper .logo__color .logo__color__container .logo__color__wrapp .logo__color__data .color__detail span.color__process::before {
  content: "Process :";
}
.lp__wrapper .logo__color .logo__color__container .logo__color__wrapp .logo__color__data .color__detail span.color__hex::before {
  content: "#";
}
.lp__wrapper .logo__color .logo__color__container .logo__color__wrapp .logo__color__data .arrw__color__detail {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: calc(22.4 / var(--ViewWidth) * 100vw);
  height: calc(43.49 / var(--ViewWidth) * 100vw);
}
@media screen and (max-width: 768px) {
  .lp__wrapper .logo__color .logo__color__container .logo__color__wrapp .logo__color__data .arrw__color__detail {
    width: calc(15.92 / var(--ViewWidth) * 100vw);
    height: calc(31.04 / var(--ViewWidth) * 100vw);
  }
}
.lp__wrapper .logo__color .logo__color__container .logo__color__wrapp .logo__color__data .arrw__color__detail img {
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center;
     object-position: center;
  width: 100%;
  height: 100%;
}
.lp__wrapper .logo__scrolling {
  position: relative;
  height: calc(100vh + var(--HeaderHeight));
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .lp__wrapper .logo__scrolling {
    height: calc(100vh + var(--HeaderHeight));
  }
}
.lp__wrapper .logo__scrolling .logo__scrolling__background {
  position: relative;
  width: auto;
  height: calc(100vh + var(--HeaderHeight));
  background-image: -webkit-gradient(linear, left top, right top, color-stop(20%, rgb(255, 130, 130)), color-stop(160%, rgb(255, 0, 0)));
  background-image: -webkit-linear-gradient(left, rgb(255, 130, 130) 20%, rgb(255, 0, 0) 160%);
  background-image: linear-gradient(90deg, rgb(255, 130, 130) 20%, rgb(255, 0, 0) 160%);
  z-index: 1;
}
@media screen and (max-width: 768px) {
  .lp__wrapper .logo__scrolling .logo__scrolling__background {
    height: calc(100vh + var(--HeaderHeight));
  }
}
.lp__wrapper .logo__scrolling .logo__scrolling__background svg {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  left: calc(124 / var(--ViewWidth) * 100vw);
  right: unset;
  width: 100%;
  height: calc(100vh + var(--HeaderHeight));
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  padding: calc(72 / var(--ViewWidth) * 100vw) 0 calc(42 / var(--ViewWidth) * 100vw);
}
@media screen and (max-width: 768px) {
  .lp__wrapper .logo__scrolling .logo__scrolling__background svg {
    top: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    left: calc(-144 / var(--ViewWidth) * 100vw);
    width: auto;
    height: calc(100vh + var(--HeaderHeight));
    padding: calc(64.1 / var(--ViewWidth) * 100vw) 0 calc(36.6 / var(--ViewWidth) * 100vw);
  }
}
.lp__wrapper .logo__scrolling .logo__scrolling__background svg .lgo__scrllng__bg__st0 {
  fill: none;
}
.lp__wrapper .logo__scrolling .logo__scrolling__background svg .lgo__scrllng__bg__st1 {
  fill: url(#lgo__scrllng__bg_5);
}
.lp__wrapper .logo__scrolling .logo__scrolling__background svg .lgo__scrllng__bg__st2 {
  fill: #cfcfcf;
}
.lp__wrapper .logo__scrolling .logo__scrolling__background svg .lgo__scrllng__bg__st3 {
  fill: url(#lgo__scrllng__bg_54);
}
.lp__wrapper .logo__scrolling .logo__scrolling__background svg .lgo__scrllng__bg__st4 {
  fill: url(#lgo__scrllng__bg_52);
}
.lp__wrapper .logo__scrolling .logo__scrolling__background svg .lgo__scrllng__bg__st5 {
  fill: url(#lgo__scrllng__bg_53);
}
.lp__wrapper .logo__scrolling .logo__scrolling__background svg .lgo__scrllng__bg__st6 {
  fill: url(#lgo__scrllng__bg_51);
}
.lp__wrapper .logo__scrolling .logo__scrolling__title {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  left: 100%;
  width: calc(1880 / var(--ViewWidth) * 100vw);
  z-index: 2;
}
.lp__wrapper .logo__scrolling .logo__scrolling__title svg {
  position: absolute;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center;
     object-position: center;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  left: 0;
}
.lp__wrapper .logo__details {
  position: relative;
  display: grid;
  gap: calc(105.7 / var(--ViewWidth) * 100vw);
  width: 100%;
  height: auto;
  padding: calc(197.5 / var(--ViewWidth) * 100vw) 0 calc(72.9 / var(--ViewWidth) * 100vw);
}
@media screen and (max-width: 768px) {
  .lp__wrapper .logo__details {
    gap: calc(66.8 / var(--ViewWidth) * 100vw);
    padding: calc(84.3 / var(--ViewWidth) * 100vw) 0 calc(33.4 / var(--ViewWidth) * 100vw);
  }
}
.lp__wrapper .logo__details .logo__details__image {
  position: relative;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: calc(1017 / var(--ViewWidth) * 100vw);
  height: auto;
}
@media screen and (max-width: 768px) {
  .lp__wrapper .logo__details .logo__details__image {
    width: calc(332 / var(--ViewWidth) * 100vw);
  }
}
.lp__wrapper .logo__details .logo__details__image svg {
  position: relative;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center;
     object-position: center;
  width: 100%;
  height: 100%;
}
.lp__wrapper .logo__details .logo__details__image svg .lgo__dtls__st0 {
  fill: url(#_lgo__dtls__gradient_3);
}
.lp__wrapper .logo__details .logo__details__image svg .lgo__dtls__st0,
.lp__wrapper .logo__details .logo__details__image svg .lgo__dtls__st1,
.lp__wrapper .logo__details .logo__details__image svg .lgo__dtls__st2 {
  opacity: 0.6;
}
.lp__wrapper .logo__details .logo__details__image svg .lgo__dtls__st3 {
  stroke-miterlimit: 10;
  stroke-width: 0.5px;
}
.lp__wrapper .logo__details .logo__details__image svg .lgo__dtls__st3,
.lp__wrapper .logo__details .logo__details__image svg .lgo__dtls__st4,
.lp__wrapper .logo__details .logo__details__image svg .lgo__dtls__st5,
.lp__wrapper .logo__details .logo__details__image svg .lgo__dtls__st6,
.lp__wrapper .logo__details .logo__details__image svg .lgo__dtls__st7 {
  fill: none;
  stroke: #000;
}
.lp__wrapper .logo__details .logo__details__image svg .lgo__dtls__st4 {
  stroke-miterlimit: 10;
  stroke-width: 0.5px;
}
.lp__wrapper .logo__details .logo__details__image svg .lgo__dtls__st5 {
  stroke-miterlimit: 10;
  stroke-width: 0.5px;
}
.lp__wrapper .logo__details .logo__details__image svg .lgo__dtls__st6 {
  stroke-miterlimit: 10;
  stroke-width: 0.5px;
}
.lp__wrapper .logo__details .logo__details__image svg .lgo__dtls__st7 {
  stroke-miterlimit: 10;
  stroke-width: 0.5px;
}
.lp__wrapper .logo__details .logo__details__image svg .lgo__dtls__st1 {
  fill: url(#_lgo__dtls__gradient_12);
}
.lp__wrapper .logo__details .logo__details__image svg .lgo__dtls__st2 {
  fill: url(#_lgo__dtls__gradient_31);
}
.lp__wrapper .logo__details .logo__details__image svg .lgo__dtls__st8 {
  fill: #c8c8c8;
}
.lp__wrapper .logo__details .logo__details__image svg .lgo__dtls__st9 {
  fill: url(#_lgo__dtls__gradient_32);
}
.lp__wrapper .logo__details .logo__details__image svg .lgo__dtls__st10 {
  fill: url(#_lgo__dtls__gradient_33);
}
.lp__wrapper .logo__details .logo__details__foot {
  position: relative;
  left: calc(104 / var(--ViewWidth) * 100vw);
  width: 100%;
  height: auto;
}
@media screen and (max-width: 768px) {
  .lp__wrapper .logo__details .logo__details__foot {
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}
.lp__wrapper .logo__details .logo__details__foot .logo__details__foot__wrapp {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  gap: calc(71.5 / var(--ViewWidth) * 100vw);
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
@media screen and (max-width: 768px) {
  .lp__wrapper .logo__details .logo__details__foot .logo__details__foot__wrapp {
    display: grid;
    gap: calc(21 / var(--ViewWidth) * 100vw);
    -webkit-box-align: unset;
    -webkit-align-items: unset;
        -ms-flex-align: unset;
            align-items: unset;
    justify-items: center;
  }
}
.lp__wrapper .logo__details .logo__details__foot .logo__details__foot__wrapp .pp__logo {
  position: relative;
  width: calc(286.5 / var(--ViewWidth) * 100vw);
}
@media screen and (max-width: 768px) {
  .lp__wrapper .logo__details .logo__details__foot .logo__details__foot__wrapp .pp__logo {
    width: calc(169.53 / var(--ViewWidth) * 100vw);
  }
}
.lp__wrapper .logo__details .logo__details__foot .logo__details__foot__wrapp .download__logo__wrapp {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  gap: calc(67 / var(--ViewWidth) * 100vw);
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
@media screen and (max-width: 768px) {
  .lp__wrapper .logo__details .logo__details__foot .logo__details__foot__wrapp .download__logo__wrapp {
    display: grid;
    gap: calc(23 / var(--ViewWidth) * 100vw);
  }
}
.lp__wrapper .logo__details .logo__details__foot .logo__details__foot__wrapp .download__logo__wrapp .download__logo__mssg {
  position: relative;
  display: inline-block;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
@media screen and (max-width: 768px) {
  .lp__wrapper .logo__details .logo__details__foot .logo__details__foot__wrapp .download__logo__wrapp .download__logo__mssg {
    width: auto;
  }
}
.lp__wrapper .logo__details .logo__details__foot .logo__details__foot__wrapp .download__logo__wrapp .download__logo__mssg p {
  position: relative;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  font-family: var(--Font__Ja);
  font-size: calc(20 / var(--ViewWidth) * 100vw);
  font-weight: 400;
  letter-spacing: 0em;
  line-height: 1;
  white-space: nowrap;
}
@media screen and (max-width: 768px) {
  .lp__wrapper .logo__details .logo__details__foot .logo__details__foot__wrapp .download__logo__wrapp .download__logo__mssg p {
    width: 100%;
    font-size: calc(15 / var(--ViewWidth) * 100vw);
    line-height: 1;
    text-align: center;
  }
}
.lp__wrapper .logo__details .logo__details__foot .logo__details__foot__wrapp .download__logo__wrapp .download__logo__button {
  position: relative;
}
.lp__wrapper .logo__details .logo__details__foot .logo__details__foot__wrapp .download__logo__wrapp .download__logo__button a {
  position: relative;
  display: block;
  width: calc(203 / var(--ViewWidth) * 100vw);
  padding: calc(7 / var(--ViewWidth) * 100vw) 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border-radius: 64px;
  border: solid 1px #707070;
}
@media screen and (max-width: 768px) {
  .lp__wrapper .logo__details .logo__details__foot .logo__details__foot__wrapp .download__logo__wrapp .download__logo__button a {
    margin: 0 auto 0;
  }
}
.lp__wrapper .logo__details .logo__details__foot .logo__details__foot__wrapp .download__logo__wrapp .download__logo__button a img {
  position: relative;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  display: inline-block;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center;
     object-position: center;
  width: calc(86.03 / var(--ViewWidth) * 100vw);
  vertical-align: middle;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
.lp__wrapper .logo__details .logo__details__foot .logo__details__foot__wrapp .download__logo__wrapp .download__logo__button a .button__body {
  position: relative;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  display: grid;
  content: "";
  background-image: url("../img/button__name__download.svg");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  width: calc(86.03 / var(--ViewWidth) * 100vw);
  height: calc(14.78 / var(--ViewWidth) * 100vw);
  vertical-align: middle;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
.lp__wrapper .logo__details .logo__details__foot .logo__details__foot__wrapp .download__logo__wrapp .download__logo__button a:hover {
  background-color: #FF0000;
  opacity: 1;
}
.lp__wrapper .logo__details .logo__details__foot .logo__details__foot__wrapp .download__logo__wrapp .download__logo__button a:hover img {
  -webkit-filter: invert(100%) sepia(2%) saturate(7%) hue-rotate(9deg) brightness(103%) contrast(106%);
          filter: invert(100%) sepia(2%) saturate(7%) hue-rotate(9deg) brightness(103%) contrast(106%);
}
.lp__wrapper .logo__details .logo__details__foot .logo__details__foot__wrapp .download__logo__wrapp .download__logo__button a:hover .button__body {
  -webkit-filter: invert(100%) sepia(2%) saturate(7%) hue-rotate(9deg) brightness(103%) contrast(106%);
          filter: invert(100%) sepia(2%) saturate(7%) hue-rotate(9deg) brightness(103%) contrast(106%);
}
.lp__wrapper .logo__guideline {
  position: relative;
  width: 100%;
  height: auto;
  padding: calc(103 / var(--ViewWidth) * 100vw) 0 calc(78 / var(--ViewWidth) * 100vw);
  background-color: #E5E5E5;
}
@media screen and (max-width: 768px) {
  .lp__wrapper .logo__guideline {
    padding: calc(63 / var(--ViewWidth) * 100vw) 0 calc(57 / var(--ViewWidth) * 100vw);
  }
}
.lp__wrapper .logo__guideline .swiper.guideline__slider {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: calc(807 / var(--ViewWidth) * 100vw);
}
@media screen and (max-width: 768px) {
  .lp__wrapper .logo__guideline .swiper.guideline__slider {
    width: calc(333 / var(--ViewWidth) * 100vw);
  }
}
.lp__wrapper .logo__guideline .swiper.guideline__slider .swiper-wrapper {
  -webkit-transition-timing-function: 0.4s ease;
          transition-timing-function: 0.4s ease;
}
.lp__wrapper .logo__guideline .swiper__nav__wrapper {
  position: relative;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: calc(70.29 / var(--ViewWidth) * 100vw);
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  margin-top: calc(37 / var(--ViewWidth) * 100vw);
  z-index: 1;
}
@media screen and (max-width: 768px) {
  .lp__wrapper .logo__guideline .swiper__nav__wrapper {
    margin-top: calc(27 / var(--ViewWidth) * 100vw);
  }
}
.lp__wrapper .logo__guideline .swiper-button-prev,
.lp__wrapper .logo__guideline .swiper-button-next {
  width: calc(26.05 / var(--ViewWidth) * 100vw);
  height: calc(22.33 / var(--ViewWidth) * 100vw);
}
.lp__wrapper .logo__guideline .swiper-button-prev::after,
.lp__wrapper .logo__guideline .swiper-button-next::after {
  position: relative;
  display: inline-block;
  content: "" !important;
  background-image: url("../img/arrw__guideline__slider.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: calc(26.05 / var(--ViewWidth) * 100vw);
  height: calc(22.33 / var(--ViewWidth) * 100vw);
}
.lp__wrapper .logo__guideline .swiper-button-prev:hover::after,
.lp__wrapper .logo__guideline .swiper-button-next:hover::after {
  -webkit-filter: invert(14%) sepia(99%) saturate(6450%) hue-rotate(358deg) brightness(92%) contrast(118%);
          filter: invert(14%) sepia(99%) saturate(6450%) hue-rotate(358deg) brightness(92%) contrast(118%);
}
.lp__wrapper .logo__guideline .swiper-button-prev {
  left: 0 !important;
  top: 100%;
}
.lp__wrapper .logo__guideline .swiper-button-prev::after {
  left: 0 !important;
  top: 100%;
  -webkit-transform: rotate(-180deg);
          transform: rotate(-180deg);
}
.lp__wrapper .logo__guideline .swiper-button-next {
  right: 0 !important;
  top: 100%;
}
.lp__wrapper .logo__guideline .swiper-button-next::after {
  right: 0 !important;
  top: 100%;
}

.section__head {
  position: absolute;
  top: calc(60.6 / var(--ViewWidth) * 100vw);
  left: calc(69 / var(--ViewWidth) * 100vw);
  display: block;
  width: auto;
}
@media screen and (max-width: 768px) {
  .section__head {
    top: calc(26 / var(--ViewWidth) * 100vw);
    left: calc(22 / var(--ViewWidth) * 100vw);
  }
}
.section__head h3 span {
  position: relative;
  display: block;
  font-family: var(--Font__En);
  font-size: calc(20 / var(--ViewWidth) * 100vw);
  font-weight: 500;
  letter-spacing: 0em;
  line-height: 1;
  color: var(--ColorBlk);
}
@media screen and (max-width: 768px) {
  .section__head h3 span {
    font-size: calc(14 / var(--ViewWidth) * 100vw);
    line-height: 1;
  }
}

.scramble-target {
  opacity: 0;
  -webkit-transition: opacity 0.6s ease;
  transition: opacity 0.6s ease;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
}

.scramble-visible {
  opacity: 1;
}

.anim-delay-1 {
  --delay: 0.1s;
}

.anim-delay-2 {
  --delay: 0.2s;
}

.anim-delay-3 {
  --delay: 0.3s;
}

.anim-delay-4 {
  --delay: 0.4s;
}

.anim-delay-5 {
  --delay: 0.5s;
}

.anim-delay-6 {
  --delay: 0.6s;
}

.anim-delay-7 {
  --delay: 0.7s;
}

.anim-delay-8 {
  --delay: 0.8s;
}

.anim-delay-9 {
  --delay: 0.9s;
}

.anim-delay-10 {
  --delay: 1s;
}

.anim-delay-11 {
  --delay: 1.1s;
}

.anim-delay-12 {
  --delay: 1.2s;
}

.anim-delay-13 {
  --delay: 1.3s;
}

.anim-delay-14 {
  --delay: 1.4s;
}

.anim-delay-15 {
  --delay: 1.5s;
}

.anim-delay-16 {
  --delay: 1.6s;
}

.anim-delay-17 {
  --delay: 1.7s;
}

.anim-delay-18 {
  --delay: 1.8s;
}

.anim-delay-19 {
  --delay: 1.9s;
}

.anim-delay-20 {
  --delay: 2s;
}

.anim-delay-21 {
  --delay: 2.1s;
}

.anim-delay-22 {
  --delay: 2.2s;
}

.anim-delay-23 {
  --delay: 2.3s;
}

.anim-delay-24 {
  --delay: 2.4s;
}

.anim-delay-25 {
  --delay: 2.5s;
}

.anim-delay-26 {
  --delay: 2.6s;
}

.anim-delay-27 {
  --delay: 2.7s;
}

.anim-delay-28 {
  --delay: 2.8s;
}

.anim-delay-29 {
  --delay: 2.9s;
}

.anim-delay-30 {
  --delay: 3s;
}

.anim-delay-31 {
  --delay: 3.1s;
}

.anim-delay-32 {
  --delay: 3.2s;
}

.anim-delay-33 {
  --delay: 3.3s;
}

.anim-delay-34 {
  --delay: 3.4s;
}

.anim-delay-35 {
  --delay: 3.5s;
}

.anim-delay-36 {
  --delay: 3.6s;
}

.anim-delay-37 {
  --delay: 3.7s;
}

.anim-delay-38 {
  --delay: 3.8s;
}

.anim-delay-39 {
  --delay: 3.9s;
}

.anim-delay-40 {
  --delay: 4s;
}

.anim-delay-41 {
  --delay: 4.1s;
}

.anim-delay-42 {
  --delay: 4.2s;
}

.anim-delay-43 {
  --delay: 4.3s;
}

.anim-delay-44 {
  --delay: 4.4s;
}

.anim-delay-45 {
  --delay: 4.5s;
}

.anim-delay-46 {
  --delay: 4.6s;
}

.anim-delay-47 {
  --delay: 4.7s;
}

.anim-delay-48 {
  --delay: 4.8s;
}

.anim-delay-49 {
  --delay: 4.9s;
}

.anim-delay-50 {
  --delay: 5s;
}

[data-effect] {
  will-change: opacity, transform, filter;
  -webkit-animation-delay: var(--delay, 0s);
          animation-delay: var(--delay, 0s);
}

.fade-in {
  opacity: 0;
}
.fade-in.is-show {
  -webkit-animation-name: fadeIn_anim;
          animation-name: fadeIn_anim;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-timing-function: ease-out;
          animation-timing-function: ease-out;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

@-webkit-keyframes fadeIn_anim {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeIn_anim {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.fade-out {
  opacity: 0;
}
.fade-out.is-show {
  -webkit-animation-name: fadeOut_anim;
          animation-name: fadeOut_anim;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-timing-function: ease-out;
          animation-timing-function: ease-out;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

@-webkit-keyframes fadeOut_anim {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes fadeOut_anim {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.slide-up {
  opacity: 0;
}
.slide-up.is-show {
  -webkit-animation-name: slideUp_anim;
          animation-name: slideUp_anim;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
          animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

@-webkit-keyframes slideUp_anim {
  from {
    opacity: 0;
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes slideUp_anim {
  from {
    opacity: 0;
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
.blur-in.is-show {
  opacity: 0;
}
.blur-in.is-show.is-show {
  -webkit-filter: blur(10px);
          filter: blur(10px);
  -webkit-animation-name: blurIn_anim;
          animation-name: blurIn_anim;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
          animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}

@-webkit-keyframes blurIn_anim {
  from {
    opacity: 0;
    -webkit-filter: blur(30px);
            filter: blur(30px);
  }
  to {
    opacity: 1;
    -webkit-filter: blur(0);
            filter: blur(0);
  }
}

@keyframes blurIn_anim {
  from {
    opacity: 0;
    -webkit-filter: blur(30px);
            filter: blur(30px);
  }
  to {
    opacity: 1;
    -webkit-filter: blur(0);
            filter: blur(0);
  }
}
.clipPath-c {
  opacity: 0;
}
.clipPath-c.is-show {
  -webkit-animation-name: clipPathCenter_anim;
          animation-name: clipPathCenter_anim;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
          animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  opacity: 0;
}

@-webkit-keyframes clipPathCenter_anim {
  from {
    opacity: 0;
    -webkit-clip-path: inset(100% 0 100%);
            clip-path: inset(100% 0 100%);
  }
  to {
    opacity: 1;
    -webkit-clip-path: inset(0);
            clip-path: inset(0);
  }
}

@keyframes clipPathCenter_anim {
  from {
    opacity: 0;
    -webkit-clip-path: inset(100% 0 100%);
            clip-path: inset(100% 0 100%);
  }
  to {
    opacity: 1;
    -webkit-clip-path: inset(0);
            clip-path: inset(0);
  }
}
.clipPath-l {
  opacity: 0;
}
.clipPath-l.is-show {
  -webkit-animation-name: clipPathLeft_anim;
          animation-name: clipPathLeft_anim;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
          animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  opacity: 0;
}

@-webkit-keyframes clipPathLeft_anim {
  from {
    opacity: 0;
    -webkit-clip-path: inset(0 100% 0 0);
            clip-path: inset(0 100% 0 0);
  }
  to {
    opacity: 1;
    -webkit-clip-path: inset(0);
            clip-path: inset(0);
  }
}

@keyframes clipPathLeft_anim {
  from {
    opacity: 0;
    -webkit-clip-path: inset(0 100% 0 0);
            clip-path: inset(0 100% 0 0);
  }
  to {
    opacity: 1;
    -webkit-clip-path: inset(0);
            clip-path: inset(0);
  }
}
.splitTypo-in {
  overflow: hidden;
}
.splitTypo-in.is-show span {
  display: inline-block;
  -webkit-transition: -webkit-transform;
  transition: -webkit-transform;
  transition: transform;
  transition: transform, -webkit-transform;
  -webkit-transform-origin: left;
          transform-origin: left;
  -webkit-animation-name: splitTypo-in_anim;
          animation-name: splitTypo-in_anim;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
          animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

@-webkit-keyframes splitTypo-in_anim {
  from {
    opacity: 0;
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
}

@keyframes splitTypo-in_anim {
  from {
    opacity: 0;
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
}/*# sourceMappingURL=styles.css.map */