@font-face {
  font-family: 'MPLUS1p';
  src: url('fonts/MPLUS1p-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* 背景画像（全画面・最背面） */
.bg-image {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('img/bg.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -999;
}

/* ページ全体の初期化 */
html, body {
  margin: 0;
  padding: 0;
  background-color: transparent;
}

/* ヘッダー */
.fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #ffffff;
  z-index: 999;
  text-align: center;
  padding: 10px 0;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.logo {
  max-width: 100px;
  height: auto;
}

/* 本文画像 */
.image-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 45px;
  filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.4));
}

.shadow-image {
  display: block;
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 828px;
  height: auto;
  box-sizing: border-box;
}

/* フッター */
.footer {
  text-align: center;
  padding: 20px 10px;
  font-size: 14px;
  color: #666666;
  background-color: transparent;
  margin-top: 40px;
  font-family: 'MPLUS1p', sans-serif;
}

/* 共通ボタンスタイル */
#scrollToTopBtn,
#detailBtn {
  position: fixed;
  right: 20px;
  z-index: 1000;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  opacity: 1;
  transition: opacity 0.3s ease;
}

/* ボタンの位置（デスクトップ） */
#scrollToTopBtn {
  bottom: 20px;
}

#detailBtn {
  bottom: 150px;
}

/* ボタンサイズ（デスクトップ） */
#scrollToTopBtn img,
#detailBtn img {
  width: 120px;
  height: 120px;
}

/* スクロール中に不透明度50% */
#scrollToTopBtn.scrolling,
#detailBtn.scrolling {
  opacity: 0.5;
}

/* 画像保存防止 */
.image-container img,
.image-container video {
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
  touch-action: none;
}

/* スマホ対応 */
@media screen and (max-width: 768px) {
  .image-container {
    align-items: stretch;
  }

  .shadow-image {
    max-width: 100%;
  }

  #scrollToTopBtn img,
  #detailBtn img {
    width: 85px;
    height: 85px;
  }

  #scrollToTopBtn {
    bottom: 20px;
  }

  #detailBtn {
    bottom: 115px;
  }
}