#animation_container {
  position: absolute;
  margin: auto;
  left: -100%;
  right: -100%;
  top: -100%;
  bottom: -100%; }

.top-main {
  width: 100%;
  margin: 0 auto;
  position: relative;
  background-image: url("../img/top/main/bg_img.jpg");
  background-size: cover; }
  .top-main .pc-size {
    display: block; }
  .top-main .sp-size {
    display: none; }
  .top-main .hide {
    opacity: 0;
    pointer-events: none; }
  .top-main .top-main-carten {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #eeeeee;
    display: flex;
    justify-content: center;
    align-items: center; }
    .top-main .top-main-carten .top-main-loader {
      width: 40px;
      display: flex;
      justify-content: space-between; }
@keyframes loaderMotion {
  0% {
    opacity: 0.2; }
  10% {
    opacity: 1; }
  30% {
    opacity: 0.2; }
  100% {
    opacity: 0.2; } }
      .top-main .top-main-carten .top-main-loader li {
        opacity: 0.2;
        width: 5px;
        height: 5px;
        display: block;
        background-color: #003e86;
        animation: loaderMotion 1.2s linear 0s infinite; }
        .top-main .top-main-carten .top-main-loader li:nth-child(1) {
          animation-delay: 0s; }
        .top-main .top-main-carten .top-main-loader li:nth-child(2) {
          animation-delay: 0.2s; }
        .top-main .top-main-carten .top-main-loader li:nth-child(3) {
          animation-delay: 0.4s; }
        .top-main .top-main-carten .top-main-loader li:nth-child(4) {
          animation-delay: 0.6s; }
        .top-main .top-main-carten .top-main-loader li:nth-child(5) {
          animation-delay: 0.8s; }
    .top-main .top-main-carten.fadeOut {
      animation: cartenMotion 0.3s linear 0s forwards; }
@keyframes cartenMotion {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }
  .top-main .cjs-container {
    position: absolute;
    top: 5%;
    left: 1%;
    width: 50%; }
    .top-main .cjs-container .cjs-inner {
      width: 100%;
      position: relative;
      padding-bottom: 111.8881118881%; }
  .top-main .copy-container {
    position: absolute;
    top: 7%;
    right: 0;
    width: 50%;
    height: 100%;
    display: flex;
    align-items: center; }
    .top-main .copy-container img {
      width: 70%;
      height: auto;
      display: block;
      margin-bottom: 15%;
      margin-left: 3rem; }
    .top-main .copy-container .txt_five {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 93%; }
      .top-main .copy-container .txt_five img {
        opacity: 0.5;
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center center; }
    .top-main .copy-container .copy {
      width: calc(100% - 2rem);
      font-size: 2vw;
      line-height: 1.5;
      letter-spacing: 0.12em;
      margin-left: 3rem;
      font-weight: bold;
      color: #484848; }
  @media screen and (max-width: 960px) {
    .top-main .copy-container img {
      margin-bottom: 10%; }
    .top-main .copy-container .copy {
      font-size: 2.5vw; } }
  @media screen and (max-width: 700px) {
    .top-main {
      background-image: url("../img/top/main/bg_img_sp.jpg"); }
      .top-main .pc-size {
        display: none; }
      .top-main .sp-size {
        display: block; }
      .top-main .cjs-container {
        width: 80%;
        left: 10%;
        top: 30%; }
      .top-main .copy-container {
        top: 8.5%;
        left: 0%;
        width: 100%;
        display: block;
        height: calc(100% - 8.5%); }
        .top-main .copy-container img {
          width: 80%;
          max-width: none;
          margin: 0 auto; }
        .top-main .copy-container .txt_five {
          display: none; }
        .top-main .copy-container .copy {
          position: absolute;
          left: 50%;
          bottom: 3%;
          transform: translateX(-50%);
          text-align: center;
          font-size: 4.5vw;
          margin-left: auto; } }