@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* ローディング */
#page-loading {
  position: fixed;
  inset: 0;
  background: #fff;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.7s ease, visibility 0.7s ease;
}
#page-loading.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.loading-stage {
  position: relative;
  width: 280px;
  height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.loading-logo {
  width: 160px;
  height: auto;
  position: relative;
  z-index: 1;
}
.loading-dot {
  position: absolute;
  background: #3f7d6a;
  will-change: transform;
  animation: dotFloat 2.2s ease-in-out infinite;
}
.ld-1 { width: 18px; height: 14px; top: 18px;  left: 30px;  border-radius: 60% 40% 70% 30% / 50% 60% 40% 70%; animation-duration: 2.2s; animation-delay: 0s;   }
.ld-2 { width: 11px; height: 13px; top: 40px;  right: 25px; border-radius: 40% 60% 30% 70% / 70% 40% 60% 30%; animation-duration: 1.9s; animation-delay: 0.3s; }
.ld-3 { width: 22px; height: 15px; bottom: 25px; left: 15px; border-radius: 70% 30% 50% 50% / 40% 70% 30% 60%; animation-duration: 2.5s; animation-delay: 0.6s; }
.ld-4 { width: 13px; height: 19px; bottom: 55px; right: 45px; border-radius: 30% 70% 60% 40% / 60% 30% 70% 40%; animation-duration: 2.0s; animation-delay: 0.9s; }
.ld-5 { width: 16px; height:  9px; top: 110px; left:  8px;  border-radius: 50% 50% 40% 60% / 30% 70% 50% 50%; animation-duration: 2.3s; animation-delay: 0.4s; background: #2f5e50; opacity: 0.7; }
.ld-6 { width:  9px; height:  9px; top: 25px;  right: 75px; border-radius: 50% 40% 60% 50% / 60% 50% 40% 50%; animation-duration: 1.8s; animation-delay: 1.1s; background: #5a9e8a; opacity: 0.6; }
.ld-7 { width: 14px; height: 20px; bottom: 18px; right: 18px; border-radius: 40% 60% 30% 70% / 50% 40% 60% 50%; animation-duration: 2.1s; animation-delay: 0.7s; background: #4a9c82; opacity: 0.8; }

@keyframes dotFloat {
  0%,  100% { transform: translateY(0)    rotate(0deg);  }
  33%        { transform: translateY(-10px) rotate(6deg);  }
  66%        { transform: translateY(5px)  rotate(-4deg); }
}

/* パララックス */
#main_visual {
  position: relative;
  overflow: hidden;
}

.p-mainVisual__img {
  will-change: transform;
  transform-origin: top center;
}