@charset "utf-8";
/* ===================================================================
 * # imports
 *
 * ------------------------------------------------------------------- */
@import url("https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700|Nunito+Sans:300,400,400i,600,600i,700,700i");
@import url("micons/micons.css");
@import url("font-awesome/css/fontawesome.min.css");
@import url("font-awesome/css/solid.min.css");
@import url("font-awesome/css/brands.min.css");

/* ===================================================================
 * basic.css - Modern Minimal Base Styles (2026)
 *
 * ---------------------------------------------------------------- */
html {
	font-size: 10px;
  box-sizing: border-box;
  scroll-behavior: smooth; /* class="smoothscroll"全てをカバー */
}
*, *::before, *::after {
  box-sizing: inherit;
}
@media (max-width:400px) {
  html {
    font-size: 9.411764705882353px;
  }
}
body {
  margin: 0;
  padding: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
  min-height: 100vh;
  background: #555647;
  font-family: Arial, "Helvetica Neue", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, "Meiryo", sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: #333;
  overflow-x: hidden; /* スマホでの横揺れ・横スクロール防止 */
}
img, .img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

/* ===================================================================
 * # preloader（100% CSS制御改訂版）
 *
 * ---------------------------------------------------------------- */
#preloader {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: #555647;
  z-index: 800;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  opacity: 1;
  visibility: visible;
}
/* 連携：ロード完了後の強制可視化 */
html.ss-loaded #preloader {
  opacity: 0 !important;
  visibility: hidden !important;
  display: none !important;
}
#loader {
  position: absolute;
  left: 50%; top: 50%;
  width: 6px; height: 6px;
  padding: 0;
  display: inline-block;
  transform: translate3d(-50%, -50%, 0);
}
#loader > div {
  content: "";
  background: #FFFFFF;
  width: 6px; height: 6px;
  position: absolute;
  top: 0; left: 0;
  border-radius: 50%;
}
#loader > div:nth-of-type(1) {
  left: 15px;
}
#loader > div:nth-of-type(3) {
  left: -15px;
}
/* -------------------------------------------------
	dots jump
* ----------------------------------------------- */
.dots-jump > div {
  animation: dots-jump 1.2s infinite ease;
  animation-delay: 0.2s;
}
.dots-jump > div:nth-of-type(1) {
  animation-delay: 0.4s;
}
.dots-jump > div:nth-of-type(3) {
  animation-delay: 0s;
}
@keyframes dots-jump {
  0% {
    top: 0;
  }
  40% {
    top: -6px;
  }
  80% {
    top: 0;
  }
}
/* -------------------------------------------------
	dots fade
* ----------------------------------------------- */
.dots-fade > div {
  animation: dots-fade 1.6s infinite ease;
  animation-delay: 0.4s;
}
.dots-fade > div:nth-of-type(1) {
  animation-delay: 0.8s;
}
.dots-fade > div:nth-of-type(3) {
  animation-delay: 0s;
}
@keyframes dots-fade {
  0% {
    opacity: 1;
  }
  40% {
    opacity: 0.2;
  }
  80% {
    opacity: 1;
  }
}
/* -------------------------------------------------
	dots pulse
* ----------------------------------------------- */
.dots-pulse > div {
  animation: dots-pulse 1.2s infinite ease;
  animation-delay: 0.2s;
}
.dots-pulse > div:nth-of-type(1) {
  animation-delay: 0.4s;
}
.dots-pulse > div:nth-of-type(3) {
  animation-delay: 0s;
}
@keyframes dots-pulse {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.3);
  }
  80% {
    transform: scale(1);
  }
}

/* ===================================================================
 * fade-up（100% CSS制御改訂版）
 * ---------------------------------------------------------------- */
/* 最初は透明、少し下（30px）に配置 */
html body [data-aos="fade-up"] {
  opacity: 0 !important;
  transform: translate3d(0, 30px, 0) !important;
  transition: opacity 0.8s ease, transform 0.8s ease !important;
}
/* JavaScriptがこの「aos-animate」クラスを付与したら定位置に表示 */
html body [data-aos="fade-up"].aos-animate {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) !important;
}