/* サイドバーの設定 */
.hjp-sidebar {
  position: fixed;
  right: 0px; /* サイドバー右側 */
  top: 50%;
  transform: translateY(-50%);
  z-index: 1000;
  background-color: rgba(0, 0, 0, 0.4); 
  padding: 20px;
  max-width: 120px; 
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  height: 100vh;
  box-sizing: border-box; 
}

.hjp-sidebar li {
  list-style: none;
}

.hjp-sidebar a {
  display: block;
  text-decoration: none; /* リンクの下線を削除 */
  margin-bottom: 10px;
}

.hjp-sidebar img {
  width: 10vh; 
  height: 10vh;
  opacity: 0.8;
  transition: transform 0.5s, opacity 0.3s;
  display: block; 
  margin: 0 auto;
}

.hjp-sidebar img:hover {
  opacity: 1;
  transform: rotate(360deg);
}

.hjp-sidebar span {
  display: block;
  color: white;
  text-align: center;
  margin-top: 1px;
  font-size: 1.6vh;
  transition: opacity 0.3s;
}

.hjp-sidebar a:hover .button-description {
  opacity: 1;
}

/* PCおよびタブレットでのみ表示 */
@media screen and (min-width: 751px) {
  .hjp-sidebar {
    display: flex;
  }
}

/* モバイルデバイスで非表示 */
@media screen and (max-width: 750px) {
  .hjp-sidebar {
    display: none;
  }
}

/* サイドバーの設定終わり */

/* フッターの設定開始 */
.hjp-footer {
  position: fixed;
  left: 0px ;
  bottom: 0px;
  padding: 5px 5px 15px 5px;
  background-color: rgba(255, 255, 255, 0.9);
  width: auto;
  max-width: 100% ;
  margin: 0 ; 
  text-align: center;
  z-index: 1000; 
  list-style: none;
  opacity: 0; 
  animation: fadeIn 3s ease forwards; /* フェードイン */
}

.hjp-footer ul {
  letter-spacing: -.2em;
  align-items: stretch;
  display: flex;
  justify-content: center;
  padding: 0;
  margin: 0;
}

.hjp-footer li {
  flex: 1; 
  width: 19%;
  display: block;
  justify-content: center;
  padding: 0px 0px 0px 0px; 
  border: 1px solid #d3d3d3; 
  margin: 1px ;
 
}
.hjp-footer li a img {
 width: 60%; /* 各アイコンの幅 */
 height: auto;
 object-fit: contain; /* 画像の比率を維持 */
 padding: 5px 0px 0px 0px;
 margin: 0;
}

.hjp-footer li a {
  object-fit: contain; /* 画像の比率を維持 */
  display: block;
  text-decoration: none; /* リンクの下線を削除 */
  padding: 0;
  margin: 0;
}

.hjp-footer li span {
 display: block;
 font-size: 3vw ; /* テキストのサイズ */
 letter-spacing: normal;
 white-space: nowrap; /* テキストの折り返し */
 color: black; /* 文字色 */
 padding: 0px ;
}


/* フェードインアニメーションの設定 */
@keyframes fadeIn {
0% {
  opacity: 0; /* 完全に透明 */
}
100% {
  opacity: 1; /* 完全に不透明 */
}
}

/* スマホでのみフッターの表示 */
@media screen and (max-width: 750px) {
.hjp-footer {
  display: block; /* スマホではフッターを表示 */
}
}
/* タブレットやPCでフッターを非表示 */
@media screen and (min-width: 751px) {
.hjp-footer {
    display: none !important;
  }
}

/* TOP戻るボタン */
.p-fixBtnWrap {
  bottom: 192px;
  right: auto; /* 右側の配置を無効にする */
  left: 20px; /* 左側に配置する位置を指定する。必要に応じて値を調整 */
}

/* コピーライトを見える位置に */
.l-footer {
  padding-bottom: 20vw ;
  }