@charset "UTF-8";
body {
  font-family: "Noto Sans JP", sans-serif;
  color: #282828;
  min-width: 375px;
}

/* ① 色をまとめて定義（必要ならここだけ差し替え） */
:root {
  --scroll-track: #282828; /* 溝の色 */
  --scroll-thumb: #006fcf; /* つまみの色 */
  --scroll-thumb-hover: #006fcf;
}

/* ② 本体 */
html {
  scroll-behavior: smooth;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable; /* レイアウトのガタつき防止 */
  scrollbar-width: thin; /* Firefox: 太さ */
  scrollbar-color: var(--scroll-thumb) var(--scroll-track); /* Firefox: つまみ / 溝 */
}

/* ③ Chrome/Edge/Safari 用（太さと色） */
html::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

html::-webkit-scrollbar-track {
  background: var(--scroll-track);
}

html::-webkit-scrollbar-thumb {
  background-color: var(--scroll-thumb);
  border-radius: 0px;
  border: 0px solid var(--scroll-track);
}

html:hover::-webkit-scrollbar-thumb {
  background-color: var(--scroll-thumb-hover);
}

a.hover,
button.hover {
  position: relative; /* 擬似要素の基準 */
  isolation: isolate; /* 重なり順を閉じる：これ大事 */
  transition: opacity 200ms ease;
}

a.hover::after,
button::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.18); /* 白い“薄膜” */
  opacity: 0;
  pointer-events: none; /* クリック妨げない */
  z-index: 1; /* 中身より上に置く！ */
  transition: opacity 200ms ease;
}

a.hover:hover,
button:hover {
  opacity: 1; /* 本体の不透明度は落とさない（任意） */
}

a.hover:hover::after,
button:hover::after {
  opacity: 1; /* ホバー時に白膜オン */
}

a.hover2:hover,
button:hover {
  opacity: 0.6;
  transition-property: opacity;
  transition-duration: 300ms;
}

/* HTML: <div class="loader"></div> */
.loader {
  height: 4px;
  width: 130px;
  --c: no-repeat linear-gradient(#ffffff 0 0);
  background: var(--c), var(--c), #000539;
  background-size: 60% 100%;
  animation: l16 3s infinite;
}

@keyframes l16 {
  0% {
    background-position: -150% 0, -150% 0;
  }
  66% {
    background-position: 250% 0, -150% 0;
  }
  100% {
    background-position: 250% 0, 250% 0;
  }
}
/* 初期は少し下＆非表示 */
.fade-in-up {
  opacity: 0;
  transform: translateY(2rem); /* Tailwindのtranslate-y-8相当 */
  transition: all 0.7s ease;
}

.fade-in-up.show {
  opacity: 1;
  transform: translateY(0);
}

.spinner {
  display: inline-block; /* 画像の余白ズレ防止に推奨 */
  animation: spin 30s linear infinite;
  transform-origin: 50% 50%; /* 中心回転（既定でOKだが明示） */
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
/* 基本色（任意） */
.splide__pagination__page {
  background-color: #d1d5db; /* gray-300 相当 */
  opacity: 1; /* デフォの薄さが気になる場合 */
  transform: scale(1.1);
}

/* アクティブを青に */
.splide__pagination__page.is-active {
  background-color: #006fcf; /* blue-500 */
  transform: scale(1.2); /* ちょい大きく（任意） */
}

/* 読み込みは splide.min.css の後で */
#slide1 .splide__track {
  position: relative;
} /* 基準にする */
#slide1 .splide__pagination {
  position: absolute;
  bottom: -8px;
  right: 1rem;
  left: auto; /* デフォの left:0 を打ち消し */
  top: auto;
  display: flex;
  justify-content: flex-end;
  z-index: 10;
}

@media (min-width: 1280px) {
  #slide1 .splide__pagination {
    padding-right: 27vw;
    bottom: -8px;
  }
}
/* そのスライダーだけに適用（IDは適宜変更） */
#slide1 .splide__list {
  align-items: stretch;
} /* 子(li)の高さを揃える */

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