@charset "UTF-8";

/*  news
--------------------------------------------- */
.single-container{
  background: var(--bg-color-key);
  padding: var(--mg-50) 0;
}
.page-news-ttl{
  color: var(--fc-wht);
  text-align: center;
  font-size: var(--fs-50);
}
.single-block-title .single-date{
  color: var(--fc-sub);
  font-weight: var(--fw-600);
}
.single-block-title .single-enttl{
  margin-top: var(--mg-25);
}
.single-block-title .single-ttl{
  font-size: var(--fs-24);
  font-weight: var(--fw-600);
  margin-top: var(--mg-50);
  line-height: 1.7em;
}
.single-block-contents{
  margin-top: var(--mg-50);
}
.single-block-contents p{
  font-size: var(--fs-18);
  margin-top: var(--mg-50);
  line-height: 2.0em;
}
.single-block-contents img{
  margin-top: var(--mg-90);
  max-width: 100%;
  text-align: center;
}

.back-button{
  margin-top: var(--mg-200);
  margin-inline: auto;
  max-width: 42.0rem;
}
.back-button a{
  color: var(--fc-wht);
  font-size: var(--fs-24);
  font-weight: var(--fw-600);
  display: block;
  background: var(--bg-color-key);
  border: 0.1rem solid var(--fc-txt);
  border-radius: 999px;
  padding: var(--mg-30) 0;
  text-align: var(--t-c);
  position: relative;
}
.back-button a::after{
  position: absolute;
  content: "";
  top: 50%;
  right: var(--mg-40);
  transform:  translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
  width: 2.0rem;
  height: 0.7rem;
  background: url(../../assets/img/common/icon_arrow.svg) no-repeat center / contain;
  filter: brightness(0) saturate(100%) invert(93%) sepia(0%) saturate(28%) hue-rotate(61deg) brightness(107%) contrast(106%);
}
@media (hover: hover) and (pointer: fine) {
  .back-button a:hover::after{ 
    animation: arrowSlide 0.5s ease-in-out forwards; 
  }
}
@keyframes arrowSlide { 
  0% { transform: translate(0, -50%); opacity: 1; }
  49% { transform: translate(100%, -50%); opacity: 0; }
  50% { transform: translate(-100%, -50%); opacity: 0; }
  100% { transform: translate(0, -50%); opacity: 1; } 
}
@media  only screen and (max-width: 1280px){
  .back-button{
    max-width: 32.813vw;
  }
  .back-button a::after{
    width: 1.953vw;
    height: 0.684vw;
  }
}
@media screen and (max-width: 768px) {
  .single-block-title .single-ttl{
    margin-top: var(--mg-90); 
  }
  .single-block-contents{
    margin-top: var(--mg-90); 
  }
  .single-block-contents p{
    font-size: var(--fs-14);
  }
  .single-block-contents img{
    margin-top: var(--mg-100); 
  }

  .back-button{
    max-width: 66.667vw;
  }
  .back-button a{
    padding: 5.333vw 0;
  }
  .back-button a .hover-arrow-img {
    right: 6.4vw;
    width: 5.867vw;
    height: 5.867vw;
  }
  .back-button a::after{
    right: 5.867vw;
    width: 3.2vw;
    height: 1.2vw;
  }
}