/*========= LoadingのためのCSS ===============*/

/* Loading背景画面設定 */
#splash {
    /*fixedで全面に固定*/
    position: fixed;
    width: 100%;
    height: 100%;
    background: #333;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 999;
    color: #fff;
    gap: 24px;
}

/* Loading画像中央配置 */
#splash_text {
    width: 80%;
    max-width: 400px;
    position: relative;
    margin-bottom: 20px;
}

/* Loading画像（下に配置してくるくる回す） */
#loading_image {
    width: 80px;
    height: auto;
    animation: spin 1.2s linear infinite;
}

/* 回転アニメーション */
@keyframes spin {
    0% { transform: rotate(0deg);}
    100% { transform: rotate(360deg);}
}

/* 割れる画面のアニメーション */
.loader_cover {
    width: 100%;
    height: 50%;
    background-color: #333;
    transition: all .2s cubic-bezier(.04, .435, .315, .9);
    transform: scaleY(1);
}

/* 上の画面 */
.loader_cover-up {
    transform-origin: center top;
}

/* 下の画面 */
.loader_cover-down {
    position: absolute;
    bottom: 0;
    transform-origin: center bottom;
}

/* coveranimeを付与すると縮んで消える */
.coveranime {
    transform: scaleY(0);
    transition: all 1.4s cubic-bezier(.04, .435, .315, .9);
}

/* spin.js を splash より上に */
#spinner {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2000; /* splash より上 */
}

/* マウスカーソルのCSS */
/*デフォルトのマウスカーソルを非表示にする*/
html,
body {
  height: 100%;
  background: #000; /* 背景を黒に */
  color: #fff;       /* 文字を白に */
  margin: 0;
  padding: 0;
  flex-direction: column;      /* 上から下へ配置 */
  justify-content: center;     /* 上下中央揃え */
  align-items: center;         /* 左右中央揃え */
  text-align: center;          /* テキストの中央揃え */
}

a {
  cursor: none;
}

/*独自のマウスカーソルを作成*/
.cursor {
  position: fixed;
  top: -5px;
  left: -5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(0, 0, 255, 0.5);
  z-index: 1000;
  transition: width 0.5s, height 0.5s, top 0.5s, left 0.5s;
  transform: translate(0, 0);
  pointer-events: none;
}

/*aタグにホバーした時に見た目変化*/
.cursor.cursor--hover {
  top: -20px;
  left: -20px;
  width: 40px;
  height: 40px;
  background: rgba(205, 114, 113, 0.5);
}

/* popupのCSS */
#modal-container {
  display: none;
  position: fixed;
  background: rgba(0, 0, 0, 0.6);
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 99;
}

#modal-container > div {
  display: flex;
  flex-direction: column; /* 縦並びにする */
  height: 100vh;
  justify-content: center;
  align-items: center;
  gap: 20px; /* 要素間の上下の間隔を統一 */
}

#modal-container > div > img {
  max-width: calc(100vw - 30px);
  max-height: calc(100vh - 30px);
}

.image-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* 左揃え */
  margin-top: 40px;
}

img.popup {
  cursor: pointer;
  width: 100px;
}

/* explosion container */
.explosion {
  position: absolute; /* required if positioned on click else 'relative' */
  width: 600px;
  height: 600px;
  pointer-events: none; /* make it clickable through */
}

/* particle styling */
.explosion .particle {
  position: absolute; /* required */
  width: 10px;
  height: 10px;
  border-radius: 50%;
  animation: pop 1s reverse forwards; /* required */
}

/* animation for particle fly away from the cursor */
@keyframes pop {
  from {
    opacity: 0;
  }
  to {
    top: 50%;
    left: 50%;
    opacity: 1;
  }
}