/*------------------------------

main

-------------------------------*/
.main-container {
  width: 100%;
  position: relative; }
  .main-container .pc-size {
    display: block; }
  .main-container .sp-size {
    display: none; }
  .main-container .mv-note {
    position: absolute;
    bottom: 0rem;
    right: 0rem;
    font-size: 0.6rem;
    padding: 0.25rem 0.5rem;
    color: #fff;
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
    font-weight: bold;
    font-feature-settings: "palt" 1;
    background-color: rgba(0, 0, 0, 0.4); }
  .main-container .main-inner {
    width: 100%;
    aspect-ratio: 1600 / 854;
    overflow: hidden;
    background-color: #fffeee; }
  .main-container .main-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }
    .main-container .main-video video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center center; }
    .main-container .main-video .mv-note-op {
      opacity: 0;
      transition: opacity 1s ease 0s; }
      .main-container .main-video .mv-note-op.active {
        opacity: 1; }
  .main-container .main-loading {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
    background-color: #fffeee; }
    .main-container .main-loading ul {
      display: flex;
      justify-content: center;
      flex-direction: row;
      flex-wrap: wrap;
      gap: 0 1rem; }
      .main-container .main-loading ul li {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background-color: #41aa92;
        opacity: 0.2;
        animation: loadingMotion 0.6s linear 0s infinite; }
@keyframes loadingMotion {
  0% {
    opacity: 0.2; }
  10% {
    opacity: 1; }
  80% {
    opacity: 0.2; }
  100% {
    opacity: 0.2; } }
        .main-container .main-loading ul li:nth-child(1) {
          animation-delay: 0s; }
        .main-container .main-loading ul li:nth-child(2) {
          animation-delay: 0.2s; }
        .main-container .main-loading ul li:nth-child(3) {
          animation-delay: 0.4s; }
    .main-container .main-loading.fadeOut {
      pointer-events: none;
      animation: loadingFadeOutMotion 0.5s linear 0.5s forwards; }
@keyframes loadingFadeOutMotion {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }
  .main-container .main-visual {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
    transition: 1s linear 0s opacity;
    overflow: hidden; }
    .main-container .main-visual img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center center; }
@keyframes mainFrameMotion {
  0% {
    background-position: 0% 0%; }
  100% {
    background-position: 300% 0%; } }
    .main-container .main-visual .main-frame-over,
    .main-container .main-visual .main-frame-under {
      position: absolute;
      top: -2%;
      left: 0;
      width: 100%;
      aspect-ratio: 1133 / 230;
      background-image: url("../images/top/main/main_slide_frame_over.png");
      background-position: 0% 0%;
      background-repeat: repeat-x;
      background-size: 300% auto;
      pointer-events: none;
      animation: mainFrameMotion 260s linear 0s infinite reverse; }
    .main-container .main-visual .main-frame-under {
      top: auto;
      bottom: 0;
      background-image: url("../images/top/main/main_slide_frame_under.png");
      animation: mainFrameMotion 260s linear 0s infinite; }
    .main-container .main-visual .mv-slider {
      width: 100%;
      margin-bottom: 0;
      /*.cell-2{
      	.copy-1{ top: 25.5%; left: 4.5%; width: 20.5%;}
      }*/ }
      .main-container .main-visual .mv-slider .cell-cls {
        width: 100%;
        aspect-ratio: 1600 / 854;
        position: relative;
        overflow: hidden;
        background-color: #fffeee; }
        .main-container .main-visual .mv-slider .cell-cls .img {
          position: relative; }
        .main-container .main-visual .mv-slider .cell-cls .mv-copy-cls {
          position: absolute;
          opacity: 0;
          z-index: 10; }
          .main-container .main-visual .mv-slider .cell-cls .mv-copy-cls img {
            width: 100%;
            height: auto;
            transform: scale(1.3, 1.3); }
@keyframes mvCopyMotion {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@keyframes mvCopyMotionImg {
  0% {
    transform: scale(1.2, 1.2); }
  100% {
    transform: scale(1, 1); } }
        .main-container .main-visual .mv-slider .cell-cls.active .copy-1 {
          animation: mvCopyMotion 0.2s linear 0.4s forwards; }
          .main-container .main-visual .mv-slider .cell-cls.active .copy-1 img {
            animation: mvCopyMotionImg 0.5s cubic-bezier(0.39, 1.57, 0.34, 1) 0.4s forwards; }
        .main-container .main-visual .mv-slider .cell-cls.active .copy-2 {
          animation: mvCopyMotion 0.2s linear 0.6s forwards; }
          .main-container .main-visual .mv-slider .cell-cls.active .copy-2 img {
            animation: mvCopyMotionImg 0.5s cubic-bezier(0.39, 1.57, 0.34, 1) 0.6s forwards; }
        .main-container .main-visual .mv-slider .cell-cls.active .copy-3 {
          animation: mvCopyMotion 0.2s linear 0.8s forwards; }
          .main-container .main-visual .mv-slider .cell-cls.active .copy-3 img {
            animation: mvCopyMotionImg 0.5s cubic-bezier(0.39, 1.57, 0.34, 1) 0.8s forwards; }
      .main-container .main-visual .mv-slider .cell-1 .copy-1 {
        top: 18.5%;
        left: 28.5%;
        width: 31.2%; }
      .main-container .main-visual .mv-slider .cell-1 .copy-2 {
        top: 39.8%;
        left: 56.5%;
        width: 17.6%; }
      .main-container .main-visual .mv-slider .cell-1 .copy-3 {
        top: 28%;
        left: 67%;
        width: 21.40335393%; }
      .main-container .main-visual .mv-slider .cell-2 .copy-1 {
        top: 27.5%;
        left: 77.8%;
        width: 20.5%; }
      .main-container .main-visual .mv-slider .cell-3 .copy-1 {
        top: 17.5%;
        left: 70.8%;
        width: 23%; }
      .main-container .main-visual .mv-slider .cell-4 .copy-1 {
        top: 17.2%;
        left: 60.5%;
        width: 35%; }
      .main-container .main-visual .mv-slider .cell-5 .copy-1 {
        top: 20%;
        left: 36.5%;
        width: 28%; }
      .main-container .main-visual .mv-slider .cell-5 .copy-2 {
        top: 43%;
        left: 47.5%;
        width: 4.2%; }
      .main-container .main-visual .mv-slider .cell-5 .copy-3 {
        top: 56%;
        left: 38.0%;
        width: 24%; }
      .main-container .main-visual .mv-slider .cell-6 .copy-1 {
        top: 36.5%;
        left: 4.2%;
        width: 38.1%; }
      .main-container .main-visual .mv-slider .slick-dots {
        bottom: 1.5rem;
        z-index: 10; }
        .main-container .main-visual .mv-slider .slick-dots li {
          width: auto;
          height: auto; }
          .main-container .main-visual .mv-slider .slick-dots li button {
            width: 18px;
            height: 18px;
            background-color: #39aa92;
            border: 3px solid #39aa92;
            border-radius: 100%;
            overflow: hidden;
            padding: 0;
            box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); }
            .main-container .main-visual .mv-slider .slick-dots li button::before {
              display: none; }
            .main-container .main-visual .mv-slider .slick-dots li button::after {
              content: "";
              width: 18px;
              height: 18px;
              display: block; }
          .main-container .main-visual .mv-slider .slick-dots li.slick-active button::after {
            background-color: #fff; }
    .main-container .main-visual.fadeIn {
      opacity: 1;
      pointer-events: auto; }
  .main-container .main-btn-cls {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 70px;
    padding: 0.25rem 0;
    font-size: 1rem;
    background-color: #39aa92;
    color: #fff;
    text-align: center;
    pointer-events: none;
    opacity: 0;
    transition: 1s linear 0s opacity;
    cursor: pointer;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); }
    .main-container .main-btn-cls.active {
      pointer-events: auto;
      opacity: 1; }
  @media screen and (max-width: 768px) {
    .main-container .pc-size {
      display: none; }
    .main-container .sp-size {
      display: block; }
    .main-container .main-inner {
      aspect-ratio: 673 / 605; }
    .main-container .main-btn-cls {
      box-shadow: 0 0 1px rgba(0, 0, 0, 0.5); }
    .main-container .main-visual .mv-slider {
      /*.cell-2{
      	.copy-1{ 
      		top: 21.5%;
      		left: 3.0%;
      		width: 33.8%;
      	}
      }*/ }
      .main-container .main-visual .mv-slider .cell-cls {
        aspect-ratio: 673 / 605; }
      .main-container .main-visual .mv-slider .cell-1 .copy-1 {
        top: 18.5%;
        left: 7.5%;
        width: 52.2%; }
      .main-container .main-visual .mv-slider .cell-1 .copy-2 {
        top: 39.8%;
        left: 54.5%;
        width: 29.6%; }
      .main-container .main-visual .mv-slider .cell-1 .copy-3 {
        top: 28%;
        left: 68%;
        width: 30%; }
      .main-container .main-visual .mv-slider .cell-2 .copy-1 {
        top: 52.8%;
        left: 61.8%;
        width: 33.8%; }
      .main-container .main-visual .mv-slider .cell-3 .copy-1 {
        top: 18.5%;
        left: 54.8%;
        width: 39%; }
      .main-container .main-visual .mv-slider .cell-4 .copy-1 {
        top: 20.2%;
        left: 36.5%;
        width: 59.5%; }
      .main-container .main-visual .mv-slider .cell-5 .copy-1 {
        top: 20.0%;
        left: 26.8%;
        width: 47.8%; }
      .main-container .main-visual .mv-slider .cell-5 .copy-2 {
        top: 42%;
        left: 45.5%;
        width: 8%; }
      .main-container .main-visual .mv-slider .cell-5 .copy-3 {
        top: 56.5%;
        left: 30%;
        width: 40%; }
      .main-container .main-visual .mv-slider .cell-6 .copy-1 {
        top: 61.5%;
        left: 18.2%;
        width: 64.0%; }
      .main-container .main-visual .mv-slider .slick-dots li button {
        width: 14px;
        height: 14px;
        border-width: 2px; }
        .main-container .main-visual .mv-slider .slick-dots li button::after {
          width: 14px;
          height: 14px; } }