@charset "UTF-8";
/*! Writen  by SCSS */
.mainvisual {
  position: relative;
  overflow: hidden;
  /*	メイン内　鳥	*/ }
  .mainvisual .main_slider_wrap {
    opacity: 0;
    /*
    transform: scale(1.25) translateY(5%);
    filter: blur(55px) saturate(0%) contrast(0%) brightness(500%);
    */ }
    body.loaded .mainvisual .main_slider_wrap {
      opacity: 1;
      transition: 1s opacity cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s;
      will-change: opacity,transform,filter; }
    .mainvisual .main_slider_wrap .swiper-container {
      z-index: 0; }
      .mainvisual .main_slider_wrap .swiper-container .swiper-wrapper {
        z-index: 0; }
        .mainvisual .main_slider_wrap .swiper-container .swiper-wrapper .main_slider .swiper-slide .main_img a {
          display: block; }
        .mainvisual .main_slider_wrap .swiper-container .swiper-wrapper .main_slider .swiper-slide .main_img img {
          width: 100%; }
  .mainvisual .main_image {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    		/*
    		.mv{
    			position: relative;
    			opacity: 0;
        		transform: scale(1.25) translateY(5%);
        		filter: blur(55px) saturate(0%) contrast(0%) brightness(500%);
    			body.loaded &{
    				filter: blur(0) saturate(100%) contrast(100%) brightness(100%);
    				opacity: 1;
    				transform: scale(1) translateY(0);
    				transition:3s opacity cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s,3s transform cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s, 3s filter cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s;
    				will-change:opacity,transform,filter;
    			}
    			&:before{
    				content:"";
    				display: block;
    				position: absolute;
    				inset:0;
    				background-size:cover;
    				background-repeat:no-repeat;
    				background-position:center;
    				background-image:url("../images/top/main/main.jpg");
    				@include mq($br_sp){
    					background-image:url("../images/top/main/main_sp.png");
    				}
    			}
    			&:after{
    				content:"";
    				display: block;
    				padding-bottom:77.75%;
    				pointer-events: none;
    				@include mq($br_sp){
    					padding-bottom:158.213%;
    				}
    			}
    		}
    		*/ }
    .mainvisual .main_image .maincopy {
      position: absolute;
      right: 3.5%;
      top: 20.5%;
      text-align: right;
      line-height: 1.1;
      letter-spacing: 0.05em;
      font-size: clamp(38px, 5vw, 90px);
      opacity: 0;
      filter: blur(55px) saturate(0%) contrast(0%) brightness(500%);
      text-shadow: 0px 0px 0px rgba(66, 224, 224, 0.2), 0px 0px 1px rgba(66, 224, 224, 0.2), 0px 0px 2px rgba(66, 224, 224, 0.2), 0px 0px 3px rgba(66, 224, 224, 0.2), 0px 0px 4px rgba(66, 224, 224, 0.2), 0px 0px 5px rgba(66, 224, 224, 0.2), 0px 0px 6px rgba(66, 224, 224, 0.2), 0px 0px 7px rgba(66, 224, 224, 0.2), 0px 0px 8px rgba(66, 224, 224, 0.2), 0px 0px 9px rgba(66, 224, 224, 0.2), 0px 0px 10px rgba(66, 224, 224, 0.2), 0px 0px 11px rgba(66, 224, 224, 0.2), 0px 0px 12px rgba(66, 224, 224, 0.2), 0px 0px 13px rgba(66, 224, 224, 0.2), 0px 0px 14px rgba(66, 224, 224, 0.2), 0px 0px 15px rgba(66, 224, 224, 0.2); }
      body.loaded .mainvisual .main_image .maincopy {
        filter: blur(0) saturate(100%) contrast(100%) brightness(100%);
        opacity: 1;
        transition: 3s opacity cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s, 3s transform cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s, 3s filter cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s;
        will-change: opacity,transform,filter; }
      @media screen and (max-width: 768px) {
        .mainvisual .main_image .maincopy {
          font-size: 5vw; } }
      @media screen and (max-width: 480px) {
        .mainvisual .main_image .maincopy {
          left: 0;
          right: 0;
          top: 20%;
          text-align: center;
          font-size: 10vw; } }
  .mainvisual .bird {
    position: absolute;
    inset: 0;
    left: -10px;
    width: 8px;
    height: 8px;
    transform: rotate(45deg);
    animation: moving 16s linear infinite; }
    @media screen and (max-width: 480px) {
      .mainvisual .bird {
        width: 5px;
        height: 5px;
        animation-duration: 10s; } }
    .mainvisual .bird:before, .mainvisual .bird:after {
      content: "";
      position: absolute;
      bottom: 0;
      right: 0;
      background-color: #FFF;
      transform: rotate(-30deg);
      transform-origin: right bottom; }
      @media screen and (max-width: 480px) {
        .mainvisual .bird:before, .mainvisual .bird:after {
          background-color: rgba(255, 255, 255, 0.7); } }
    .mainvisual .bird:before {
      width: 100%;
      height: 1px;
      animation: leftWing 7s linear infinite; }
    .mainvisual .bird:after {
      width: 1px;
      height: 100%;
      animation: rightWing 7s linear infinite; }
    .mainvisual .bird.bird2 {
      animation: moving02 16s linear infinite;
      animation-delay: 1.5s; }
      .mainvisual .bird.bird2:before, .mainvisual .bird.bird2:after {
        animation-delay: -2s; }
    .mainvisual .bird.bird3 {
      animation: moving03 16s linear infinite;
      animation-delay: 3.5s; }
@keyframes moving {
  0% {
    top: 6vh;
    left: -2vw; }
  25% {
    top: 11vh;
    left: 30vw; }
  40% {
    top: 25vh;
    left: 50vw; }
  100% {
    top: 15vh;
    left: 120vw; } }
@keyframes moving02 {
  0% {
    top: 9vh;
    left: -2vw; }
  25% {
    top: 10vh;
    left: 30vw; }
  40% {
    top: 22vh;
    left: 50vw; }
  100% {
    top: 12vh;
    left: 120vw; } }
@keyframes moving03 {
  0% {
    top: 15vh;
    left: -2vw; }
  25% {
    top: 20vh;
    left: 30vw; }
  40% {
    top: 15vh;
    left: 50vw; }
  100% {
    top: 14vh;
    left: 120vw; } }
@keyframes leftWing {
  0% {
    transform: rotate(-30deg); }
  2% {
    transform: rotate(-110deg); }
  4% {
    transform: rotate(-30deg); }
  6% {
    transform: rotate(-110deg); }
  8% {
    transform: rotate(-30deg); }
  10% {
    transform: rotate(-110deg); }
  12% {
    transform: rotate(-30deg); }
  30% {
    transform: rotate(-30deg); }
  42% {
    transform: rotate(-35deg); }
  72% {
    transform: rotate(-35deg); }
  74% {
    transform: rotate(10deg); }
  76% {
    transform: rotate(-30deg); }
  78% {
    transform: rotate(-110deg); }
  80% {
    transform: rotate(-30deg); }
  82% {
    transform: rotate(-110deg); }
  84% {
    transform: rotate(-30deg); }
  86% {
    transform: rotate(-110deg); }
  88% {
    transform: rotate(-30deg); }
  90% {
    transform: rotate(-110deg); }
  92% {
    transform: rotate(-30deg); }
  94% {
    transform: rotate(-110deg); }
  96% {
    transform: rotate(-30deg); }
  98% {
    transform: rotate(-110deg); }
  100% {
    transform: rotate(-30deg); } }
@keyframes rightWing {
  0% {
    transform: rotate(30deg); }
  2% {
    transform: rotate(110deg); }
  4% {
    transform: rotate(30deg); }
  6% {
    transform: rotate(110deg); }
  8% {
    transform: rotate(30deg); }
  10% {
    transform: rotate(110deg); }
  12% {
    transform: rotate(30deg); }
  30% {
    transform: rotate(30deg); }
  42% {
    transform: rotate(35deg); }
  72% {
    transform: rotate(35deg); }
  74% {
    transform: rotate(0deg); }
  76% {
    transform: rotate(30deg); }
  78% {
    transform: rotate(110deg); }
  80% {
    transform: rotate(30deg); }
  82% {
    transform: rotate(110deg); }
  84% {
    transform: rotate(30deg); }
  86% {
    transform: rotate(110deg); }
  88% {
    transform: rotate(30deg); }
  90% {
    transform: rotate(110deg); }
  92% {
    transform: rotate(30deg); }
  94% {
    transform: rotate(110deg); }
  96% {
    transform: rotate(30deg); }
  98% {
    transform: rotate(110deg); }
  100% {
    transform: rotate(30deg); } }
  .mainvisual .swiper-container-horizontal .swiper-pagination-bullets {
    left: 20px;
    bottom: 20px;
    height: 16px;
    display: flex;
    justify-content: flex-start;
    column-gap: 10px;
    align-items: flex-start; }
    .mainvisual .swiper-container-horizontal .swiper-pagination-bullets .swiper-pagination-bullet {
      max-width: 16px;
      width: 100%;
      max-height: 16px;
      height: 100%;
      background: #fff;
      border: 2px solid #fff;
      opacity: 1;
      margin: 0;
      transition: background 0.3s ease-in-out; }
      .mainvisual .swiper-container-horizontal .swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active {
        background: #082F90; }
  .mainvisual .robot_text {
    z-index: 5;
    position: absolute;
    right: 40px;
    top: 17%;
    display: flex;
    align-items: flex-start;
    opacity: 0;
    filter: blur(55px) saturate(0%) contrast(0%) brightness(500%); }
    body.loaded .mainvisual .robot_text {
      filter: blur(0) saturate(100%) contrast(100%) brightness(100%);
      opacity: 1;
      transition: 3s opacity cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s, 3s transform cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s, 3s filter cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s;
      will-change: opacity,transform,filter; }
    @media screen and (max-width: 768px) {
      .mainvisual .robot_text {
        top: 20%;
        right: 20px; } }
    @media screen and (max-width: 480px) {
      .mainvisual .robot_text {
        padding: 30px 0 40px;
        justify-content: center;
        position: static; } }
    .mainvisual .robot_text .text {
      background: #FFF;
      padding: 5px;
      position: relative;
      margin-right: 20px;
      border-radius: 10px;
      margin-top: 15px;
      filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.6)); }
      @media screen and (max-width: 480px) {
        .mainvisual .robot_text .text {
          width: 100%;
          margin-right: 0; } }
      .mainvisual .robot_text .text:before {
        position: absolute;
        left: 100%;
        top: 40px;
        width: 0;
        height: 0;
        border: 8px solid transparent;
        border-left: 20px solid #FFF; }
        @media screen and (max-width: 768px) {
          .mainvisual .robot_text .text:before {
            top: 15px; } }
        @media screen and (max-width: 480px) {
          .mainvisual .robot_text .text:before {
            top: 25px; } }
      .mainvisual .robot_text .text .cloud_txt {
        font-size: clamp(14px, 1.25vw, 20px);
        color: #062C90;
        position: relative;
        font-weight: 400;
        line-height: 1.6; }
        @media screen and (max-width: 480px) {
          .mainvisual .robot_text .text .cloud_txt {
            font-size: 4.6vw; } }
        .mainvisual .robot_text .text .cloud_txt .big {
          font-size: 128%;
          display: block;
          line-height: 1.4;
          margin-bottom: 5px; }
        .mainvisual .robot_text .text .cloud_txt .uline {
          text-decoration: underline; }
        .mainvisual .robot_text .text .cloud_txt .text_lg {
          display: block;
          line-height: 1.4; }
          @media screen and (max-width: 480px) {
            .mainvisual .robot_text .text .cloud_txt .text_lg {
              width: fit-content;
              margin: auto;
              text-align: center; } }
          .mainvisual .robot_text .text .cloud_txt .text_lg strong {
            font-weight: 900; }
      .mainvisual .robot_text .text .cloud {
        position: absolute;
        inset: 0; }
        .mainvisual .robot_text .text .cloud span {
          display: block;
          position: absolute;
          width: 25%;
          aspect-ratio: 1;
          background: #FFF;
          border-radius: 100%; }
          @media screen and (max-width: 1200px) {
            .mainvisual .robot_text .text .cloud span {
              width: 23%; } }
          @media screen and (max-width: 480px) {
            .mainvisual .robot_text .text .cloud span {
              width: 25%; } }
        .mainvisual .robot_text .text .cloud.cloud01 span:nth-child(1) {
          left: -5%;
          top: -20px; }
        .mainvisual .robot_text .text .cloud.cloud01 span:nth-child(2) {
          left: 8%;
          top: -15px; }
        .mainvisual .robot_text .text .cloud.cloud01 span:nth-child(3) {
          left: 20%;
          top: -25px; }
        .mainvisual .robot_text .text .cloud.cloud01 span:nth-child(4) {
          left: 32%;
          top: -30px; }
        .mainvisual .robot_text .text .cloud.cloud01 span:nth-child(5) {
          left: 45%;
          top: -20px; }
        .mainvisual .robot_text .text .cloud.cloud01 span:nth-child(6) {
          left: 60%;
          top: -20px; }
        .mainvisual .robot_text .text .cloud.cloud01 span:nth-child(7) {
          left: 78%;
          top: -20px; }
        .mainvisual .robot_text .text .cloud.cloud02 span {
          width: 30%; }
          .mainvisual .robot_text .text .cloud.cloud02 span:nth-child(1) {
            left: -5%;
            bottom: -20px; }
          .mainvisual .robot_text .text .cloud.cloud02 span:nth-child(2) {
            left: 20%;
            bottom: -30px; }
          .mainvisual .robot_text .text .cloud.cloud02 span:nth-child(3) {
            left: 40%;
            bottom: -35px; }
          .mainvisual .robot_text .text .cloud.cloud02 span:nth-child(4) {
            left: 60%;
            bottom: -30px; }
        .mainvisual .robot_text .text .cloud.cloud03 span {
          width: 20%; }
          .mainvisual .robot_text .text .cloud.cloud03 span:nth-child(1) {
            left: -12%;
            top: -10px; }
          .mainvisual .robot_text .text .cloud.cloud03 span:nth-child(2) {
            left: -8%;
            top: 40px; }
        .mainvisual .robot_text .text .cloud.cloud04 span {
          width: 25%; }
          @media screen and (max-width: 480px) {
            .mainvisual .robot_text .text .cloud.cloud04 span {
              width: 25%; } }
          .mainvisual .robot_text .text .cloud.cloud04 span:nth-child(1) {
            right: -10%;
            top: -15px; }
          .mainvisual .robot_text .text .cloud.cloud04 span:nth-child(2) {
            right: -5%;
            top: 60px; }
            @media screen and (max-width: 480px) {
              .mainvisual .robot_text .text .cloud.cloud04 span:nth-child(2) {
                top: 50px; } }
    .mainvisual .robot_text .robot {
      display: none; }
      @media screen and (max-width: 1200px) {
        .mainvisual .robot_text .robot {
          width: 80px; } }
      @media screen and (max-width: 768px) {
        .mainvisual .robot_text .robot {
          width: 60px; } }
      @media screen and (max-width: 480px) {
        .mainvisual .robot_text .robot {
          width: 120px;
          transform: translateX(70px); } }

/*# sourceMappingURL=mainvisual.css.map */