@charset "UTF-8";
/*$font02: "Comfortaa", sans-serif;
$font03: "vdl-penletter", sans-serif;*/
/* @font-face {
  font-family: 'font02';
  src: url('../../font/FOT-TsukuARdGothicStd-E.otf');
} */
/*
$width640: 640px;
$width768: 768px;
$width992: 992px;
$width1200: 1200px;
$width1400: 1400px;

@mixin w640 {
  @media (max-width: ($width640)) {
    @content;
  }
}
@mixin w768 {
  @media (max-width: ($width768)) {
    @content;
  }
}
@mixin w992 {
  @media (max-width: ($width992)) {
    @content;
  }
}
@mixin w1200 {
  @media (max-width: ($width1200)) {
    @content;
  }
}
@mixin w1400 {
  @media (max-width: ($width1400)) {
    @content;
  }
}
*/
@keyframes pyon {
  0% {
    transform: scale(1, 1) translate(0%, 0%); }
  50% {
    transform: scale(1, 1) translate(0%, -7%); }
  100% {
    transform: scale(1, 1) translate(0%, 0%); } }
@keyframes fuwa {
  from {
    opacity: 0;
    margin-top: 60px; }
  to {
    opacity: 1;
    margin-top: 0; } }
@keyframes fuwa2 {
  from {
    opacity: 0;
    margin-top: -30px; }
  to {
    opacity: 1;
    margin-top: 0; } }
/*白*/
/*グレー*/
/*グレー2*/
/*紺*/
/*水色*/
/*グレー3*/
/*オレンジ*/
/*水色2*/
/*透明*/
/*オレンジ2*/
/*水色3*/
/*水色4*/
.top-inner1 {
  display: block;
  width: 100%;
  height: 900px;
  /*height: calc(100vh - 90px);*/ }
  @media (min-width: 768px) {
    .top-inner1 {
      width: 85%;
      margin: 0 auto; } }
  @media (min-width: 1450px) {
    .top-inner1 {
      width: 1200px;
      height: 1000px;
      margin: auto; } }
  .top-inner1 .maru-all {
    position: relative;
    z-index: 2; }
    .top-inner1 .maru-all .maru-inner {
      position: relative;
      display: block;
      margin: 0 auto;
      width: 70%;
      padding: 55px 0;
      z-index: 5; }
      @media (min-width: 1200px) {
        .top-inner1 .maru-all .maru-inner {
          padding: 100px 0; } }
    .top-inner1 .maru-all.maru-all1 {
      float: right;
      top: 10px;
      right: -3.5%;
      width: 320px;
      height: 320px; }
      @media (min-width: 550px) {
        .top-inner1 .maru-all.maru-all1 {
          top: 20px;
          right: 5%;
          width: 380px;
          height: 380px; } }
      @media (min-width: 768px) {
        .top-inner1 .maru-all.maru-all1 {
          right: -5%; } }
      @media (min-width: 1200px) {
        .top-inner1 .maru-all.maru-all1 {
          width: 450px;
          height: 450px; } }
      @media (min-width: 1450px) {
        .top-inner1 .maru-all.maru-all1 {
          top: 30px;
          right: 0;
          width: 530px;
          height: 530px; } }
      .top-inner1 .maru-all.maru-all1 .maru-inner {
        width: 70%; }
        .top-inner1 .maru-all.maru-all1 .maru-inner .link-01 {
          position: relative;
          top: -120px;
          right: -30px;
          float: right;
          margin: 0 0 0 auto; }
        .top-inner1 .maru-all.maru-all1 .maru-inner .pic-01 {
          position: relative;
          width: 150px;
          height: 150px;
          margin: -30px -30px 0 auto; }
          @media (min-width: 768px) {
            .top-inner1 .maru-all.maru-all1 .maru-inner .pic-01 {
              width: 200px;
              height: 200px;
              margin: -35px -30px 0 auto; } }
          .top-inner1 .maru-all.maru-all1 .maru-inner .pic-01 img {
            position: absolute;
            top: 0;
            width: 100%;
            height: 100%; }
    .top-inner1 .maru-all.maru-all2 {
      top: 300px;
      left: -35px;
      width: 210px;
      height: 210px; }
      @media (min-width: 550px) {
        .top-inner1 .maru-all.maru-all2 {
          left: 2%;
          width: 230px;
          height: 230px; } }
      @media (min-width: 768px) {
        .top-inner1 .maru-all.maru-all2 {
          top: 60px;
          left: 0; } }
      @media (min-width: 1200px) {
        .top-inner1 .maru-all.maru-all2 {
          width: 300px;
          height: 300px; } }
      @media (min-width: 1450px) {
        .top-inner1 .maru-all.maru-all2 {
          width: 350px;
          height: 350px; } }
      .top-inner1 .maru-all.maru-all2 .maru-inner {
        width: 55%;
        padding: 45px 0; }
        @media (min-width: 768px) {
          .top-inner1 .maru-all.maru-all2 .maru-inner {
            width: 75%;
            padding: 70px 0; } }
        .top-inner1 .maru-all.maru-all2 .maru-inner .link-01 {
          position: absolute;
          right: 0;
          left: 0;
          margin: 10px auto 0 auto; }
    .top-inner1 .maru-all.maru-all3 {
      top: 290px;
      left: auto;
      right: auto;
      width: 290px;
      height: 290px;
      margin: auto; }
      @media (min-width: 550px) {
        .top-inner1 .maru-all.maru-all3 {
          width: 320px;
          height: 320px;
          left: 0;
          bottom: 0; } }
      @media (min-width: 768px) {
        .top-inner1 .maru-all.maru-all3 {
          top: 150px; } }
      @media (min-width: 992px) {
        .top-inner1 .maru-all.maru-all3 {
          top: auto; } }
      @media (min-width: 1200px) {
        .top-inner1 .maru-all.maru-all3 {
          width: 390px;
          height: 390px; } }
      @media (min-width: 1450px) {
        .top-inner1 .maru-all.maru-all3 {
          width: 430px;
          height: 430px;
          left: -7%; } }
      .top-inner1 .maru-all.maru-all3 .maru-inner {
        width: 83%;
        padding: 55px 0; }
        @media (min-width: 550px) {
          .top-inner1 .maru-all.maru-all3 .maru-inner {
            width: 80%; } }
        @media (min-width: 1200px) {
          .top-inner1 .maru-all.maru-all3 .maru-inner {
            width: 70%;
            padding: 70px 0; } }
        .top-inner1 .maru-all.maru-all3 .maru-inner .link-01 {
          margin: 10px auto 0 auto; }
    .top-inner1 .maru-all .maru {
      position: absolute;
      display: block;
      background-color: #ffffff;
      top: 0;
      width: 100%;
      height: 100%;
      left: 0; }
      .top-inner1 .maru-all .maru.maru1 {
        border-radius: 45% 55% 46% 54% / 48% 41% 59% 52%;
        animation: 30s linear infinite rotation1; }
      .top-inner1 .maru-all .maru.maru2 {
        border-radius: 38% 62% 62% 38% / 56% 43% 57% 44%;
        animation: 10s linear infinite rotation1; }
      .top-inner1 .maru-all .maru.maru3 {
        border-radius: 42% 58% 40% 60% / 51% 53% 47% 49%;
        animation: 20s linear infinite rotation1; }