/***********************************************************************
media queries setting
**********************************************************************/
.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  z-index: 1000; }
  @media (max-width: 768px) {
    .loading {
      display: none !important; } }
  .loading.dispnone {
    display: none; }
  .loading .loading-logo {
    opacity: 1;
    position: relative;
    margin-top: 90px;
    z-index: 10; }
    .loading .loading-logo img {
      width: 200px;
      height: auto; }
  .loading .loading-dot {
    display: flex;
    flex-wrap: wrap;
    position: absolute;
    top: 0 !important;
    left: 0;
    width: 100%;
    height: 100%; }
    .loading .loading-dot .dot {
      background: #02030a;
      box-sizing: border-box;
      transition: 0.2s; }

@keyframes LRShowHide {
  0% {
    transform: scaleX(0);
    transform-origin: left top; }
  50% {
    transform: scaleX(1);
    transform-origin: left top; }
  50.1% {
    transform: scaleX(1);
    transform-origin: right top; }
  100% {
    transform: scaleX(0);
    transform-origin: right top; } }
@keyframes LRMask {
  0% {
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); }
  50% {
    clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0); }
  100% {
    clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0); } }
@keyframes LRMaskHide {
  0% {
    clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0); }
  100% {
    clip-path: polygon(100% 0, 100% 100%, 100% 100%, 100% 0); } }
@keyframes RLMaskHide {
  0% {
    clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0); }
  100% {
    clip-path: polygon(0 0, 0 100%, 0 100%, 0 0); } }
@keyframes LRShow {
  0% {
    transform: scaleX(0);
    transform-origin: left top; }
  100% {
    transform: scaleX(1);
    transform-origin: left top; } }
@keyframes RLHide {
  0% {
    transform: scaleX(1);
    transform-origin: left top; }
  100% {
    transform: scaleX(0);
    transform-origin: left top; } }
@keyframes Up {
  0% {
    transform: translateY(0); }
  100% {
    transform: translateY(-25px); } }
@keyframes Down {
  0% {
    transform: translateY(0); }
  100% {
    transform: translateY(25px); } }
#fv {
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
  /*overflow: hidden;*/
  /*scroll-wrapper*/ }
  @media (max-width: 768px) {
    #fv {
      display: none !important; } }
  #fv .copy {
    position: absolute;
    /*top: calc(50% - 105px);*/
    top: 55%;
    left: 3%;
    z-index: 101; }
    #fv .copy p {
      line-height: 1;
      margin: 0 0 12px;
      padding: 0;
      position: relative;
      display: inline-block; }
      #fv .copy p img {
        height: 100px;
        width: auto;
        clip-path: polygon(0 0, 0 0, 100% 0, 100% 0);
        filter: drop-shadow(0 0 3px black); }
      #fv .copy p .ribbon {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #b01e2d;
        z-index: 10;
        transform: scaleX(0);
        transform-origin: left top; }
    #fv .copy.show .ribbon {
      animation: LRShowHide 1s cubic-bezier(0.215, 0.61, 0.355, 1) forwards; }
    #fv .copy.show img {
      animation: LRMask 1s cubic-bezier(0.215, 0.61, 0.355, 1) forwards; }
    #fv .copy .eyecatch {
      position: absolute;
      top: -3px;
      left: 0; }
      #fv .copy .eyecatch span {
        opacity: 0;
        position: absolute;
        top: 0px;
        left: 0;
        z-index: -1;
        background: linear-gradient(-45deg, #750b15, #b01e2d); }
        #fv .copy .eyecatch span:nth-child(1) {
          width: 100px;
          height: 100px;
          top: 0;
          left: 5px; }
        #fv .copy .eyecatch span:nth-child(2) {
          width: 44px;
          height: 44px;
          left: -45px;
          top: 18px; }
        #fv .copy .eyecatch span:nth-child(3) {
          width: 41px;
          height: 41px;
          left: -18px;
          top: 84px; }
        #fv .copy .eyecatch span:nth-child(4) {
          width: 46px;
          height: 46px;
          left: 81px;
          top: -25px;
          z-index: -2; }
        #fv .copy .eyecatch span:nth-child(5) {
          width: 35px;
          height: 35px;
          left: 134px;
          top: -3px; }
        #fv .copy .eyecatch span:nth-child(6) {
          width: 25px;
          height: 25px;
          left: 212px;
          top: 89px; }
        #fv .copy .eyecatch span:nth-child(7) {
          width: 35px;
          height: 35px;
          left: 188px;
          top: 119px; }
  #fv .copyw {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    overflow: hidden;
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); }
    #fv .copyw .slide {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
      background: url(../images/top-anim/main.jpg) no-repeat center center/cover; }
  #fv .black1 {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 6;
    transform: scaleX(0);
    transform-origin: left top;
    background-color: black; }
  #fv .movs {
    display: flex;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5; }
    #fv .movs video {
      width: 100%;
      height: 100%;
      object-fit: cover; }
    #fv .movs .mov {
      opacity: 0; }
      @media (max-width: 768px) {
        #fv .movs .mov video {
          display: none !important; } }
    #fv .movs .mov1, #fv .movs .mov2 {
      width: 50%;
      position: relative;
      z-index: 4; }
      #fv .movs .mov1 .black2,
      #fv .movs .mov1 .black3, #fv .movs .mov2 .black2,
      #fv .movs .mov2 .black3 {
        position: absolute;
        width: 100%;
        height: 100%;
        opacity: 0;
        transform: scaleX(1);
        transform-origin: left top;
        background-color: black;
        z-index: 10; }
    #fv .movs .mov3 {
      position: absolute;
      top: 0;
      right: 0;
      opacity: 0;
      width: 100%;
      height: 50%;
      z-index: 5; }
    #fv .movs .mov4 {
      position: absolute;
      top: 50%;
      right: 0;
      opacity: 0;
      width: 100%;
      height: 50%;
      z-index: 5; }
    #fv .movs .mov5,
    #fv .movs .mov6,
    #fv .movs .mov7,
    #fv .movs .mov8 {
      width: 25%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 10;
      clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0); }
      #fv .movs .mov5.show,
      #fv .movs .mov6.show,
      #fv .movs .mov7.show,
      #fv .movs .mov8.show {
        animation: RLMaskHide 1s cubic-bezier(0.215, 0.61, 0.355, 1) forwards; }
      #fv .movs .mov5 .black,
      #fv .movs .mov6 .black,
      #fv .movs .mov7 .black,
      #fv .movs .mov8 .black {
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: black;
        z-index: 10;
        transform-origin: bottom left;
        position: absolute; }
      #fv .movs .mov5 video,
      #fv .movs .mov6 video,
      #fv .movs .mov7 video,
      #fv .movs .mov8 video {
        opacity: 0; }
      #fv .movs .mov5 .img,
      #fv .movs .mov6 .img,
      #fv .movs .mov7 .img,
      #fv .movs .mov8 .img {
        /*height: 100%;*/
        height: 110%;
        object-fit: cover;
        opacity: 0; }
        #fv .movs .mov5 .img.up-down,
        #fv .movs .mov6 .img.up-down,
        #fv .movs .mov7 .img.up-down,
        #fv .movs .mov8 .img.up-down {
          animation: Up 1.8s steps(50) forwards; }
    #fv .movs .mov6 .img.up-down,
    #fv .movs .mov7 .img.up-down {
      animation: Down 1.8s steps(50) forwards; }
    #fv .movs .mov6 {
      left: 25%; }
      #fv .movs .mov6 .black {
        transform-origin: top left; }
    #fv .movs .mov7 {
      left: 50%; }
      #fv .movs .mov7 .black {
        transform-origin: top left; }
      #fv .movs .mov7.show {
        animation: LRMaskHide 1s cubic-bezier(0.215, 0.61, 0.355, 1) forwards; }
    #fv .movs .mov8 {
      left: 75%;
      transform-origin: bottom left; }
      #fv .movs .mov8.show {
        animation: LRMaskHide 1s cubic-bezier(0.215, 0.61, 0.355, 1) forwards; }
    #fv .movs .mov9 {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 3; }
    #fv .movs .mov10 {
      position: absolute;
      z-index: 4;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      overflow: hidden; }
      #fv .movs .mov10 .white {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 20%;
        background-color: #fff;
        transform-origin: left top;
        z-index: 2; }
        #fv .movs .mov10 .white:nth-child(2) {
          top: 20%; }
        #fv .movs .mov10 .white:nth-child(3) {
          top: 40%; }
        #fv .movs .mov10 .white:nth-child(4) {
          top: 60%; }
        #fv .movs .mov10 .white:nth-child(5) {
          top: 80%; }
  #fv .copyright {
    opacity: 0;
    background: none;
    position: absolute;
    top: 150px;
    left: 2%;
    width: 26px;
    z-index: 101; }
  #fv .scroll-wrapper {
    opacity: 0;
    position: absolute;
    left: 2%;
    bottom: -100px;
    z-index: 101; }
    #fv .scroll-wrapper .scroll-text {
      width: 200px;
      animation: 13s linear infinite rotation; }
    #fv .scroll-wrapper .scroll-arrow {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -1px;
      width: 13px; }
  #fv .white-text {
    opacity: 0;
    position: absolute;
    right: 2%;
    bottom: 2%;
    width: 458px;
    z-index: 101; }
@keyframes rotation {
  0% {
    transform: rotate(0); }
  100% {
    transform: rotate(360deg); } }
/*#fv*/
.sp-main {
  background: url("../images/top-anim/main-sp.jpg") no-repeat center center;
  background-size: cover;
  /*height: 100svh;*/
  height: 650px;
  position: relative;
  /*scroll-wrapper*/ }
  .sp-main .scroll-wrapper {
    position: absolute;
    left: 4%;
    bottom: -40px;
    z-index: 101; }
    .sp-main .scroll-wrapper .scroll-text {
      width: 100px;
      animation: 13s linear infinite rotation; }
    .sp-main .scroll-wrapper .scroll-arrow {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -1px;
      width: 6px; }
  .sp-main .white-text {
    position: absolute;
    right: 4%;
    bottom: 2%;
    width: 157px;
    z-index: 101; }
@keyframes rotation {
  0% {
    transform: rotate(0); }
  100% {
    transform: rotate(360deg); } }
  .sp-main .copy {
    position: absolute;
    top: 15%;
    left: 5%;
    z-index: 101; }
    .sp-main .copy p {
      line-height: 1;
      margin: 0 0 12px;
      padding: 0;
      position: relative;
      display: inline-block; }
      .sp-main .copy p img {
        height: 52px;
        width: auto;
        clip-path: polygon(0 0, 0 0, 100% 0, 100% 0);
        filter: drop-shadow(0 0 3px black); }
      .sp-main .copy p .ribbon {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #b01e2d;
        z-index: 10;
        transform: scaleX(0);
        transform-origin: left top; }
    .sp-main .copy.show .ribbon {
      animation: LRShowHide 1s cubic-bezier(0.215, 0.61, 0.355, 1) forwards; }
    .sp-main .copy.show img {
      animation: LRMask 1s cubic-bezier(0.215, 0.61, 0.355, 1) forwards; }
    .sp-main .copy .eyecatch {
      position: absolute;
      top: -36px;
      left: 0;
      zoom: .54; }
      .sp-main .copy .eyecatch span {
        opacity: 0;
        position: absolute;
        top: 0px;
        left: 0;
        z-index: -1;
        background: linear-gradient(-45deg, #750b15, #b01e2d); }
        .sp-main .copy .eyecatch span:nth-child(1) {
          width: 100px;
          height: 100px;
          top: 0;
          left: 5px; }
        .sp-main .copy .eyecatch span:nth-child(2) {
          width: 44px;
          height: 44px;
          left: -45px;
          top: 18px; }
        .sp-main .copy .eyecatch span:nth-child(3) {
          width: 41px;
          height: 41px;
          left: -18px;
          top: 84px; }
        .sp-main .copy .eyecatch span:nth-child(4) {
          width: 46px;
          height: 46px;
          left: 81px;
          top: -25px;
          z-index: -2; }
        .sp-main .copy .eyecatch span:nth-child(5) {
          width: 35px;
          height: 35px;
          left: 134px;
          top: -3px; }
        .sp-main .copy .eyecatch span:nth-child(6) {
          width: 25px;
          height: 25px;
          left: 212px;
          top: 89px; }
        .sp-main .copy .eyecatch span:nth-child(7) {
          width: 35px;
          height: 35px;
          left: 188px;
          top: 119px; }

/*wp-main*/