div.animation_box {
  padding: 10px;
  animation: fadeIn 5s ease 1s 1 normal backwards;
  animation-iteration-count: infinite;
}
 
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}


.snsh2 { 
	font-size:150%;
	font-weight:600;
	padding: 15px 15px 15px 15px; 
	border-bottom: 1px solid #363636; 
	width: 100%; 
	margin: 30px 0 40px 0; 
	text-align: left; 
}


.bbbody { 
width: 100%; 
text-align:right; 
}

.toggle-btn {
  padding: 5px 10px 5px 10px;
  font-size: 16px;
  color: #363636;
  border: none;
  cursor: pointer;
  z-index: 1000;
    border-radius: 3px;
}

.modal-btn {
  padding: 5px 10px 5px 10px;
  font-size: 16px;
  color: #ffffff;
  background-color:#ca9b0d;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

.toggle-btn:hover {
  padding: 5px 10px 5px 10px;
  background-color: #ca9b0d;
  color:#ffffff;
    border-radius: 3px;
}

.slide-panel {
  z-index: 10000;
  position: fixed;
  top: 0;
  right: -350px; /* 初期状態で画面外 */
  width: 350px;
  height: 100%;
  background-color: #fff;
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2);
  padding: 20px;
  transition: right 0.7s ease; 
  overflow: scroll; 
}

.slide-panel.is-visible {
  right: 0; /* 横にスライドイン */
}