/* トップページのスタイル */
@charset "UTF-8";

/*=========================================================================================
メインビジュアル
==========================================================================================*/
#input:checked ~ #content {
  transform: translateX(0px);
}
.hover-box {
  text-decoration: none; 
  color: inherit; 
  display: inline-block; 
}

.hover-box:hover {
  border: 2px solid #cc0000; 
  padding: 5px; 
}

.headline {
  background: url(images/AdobeStock_1114498993.jpg) no-repeat 0 0;
  background-size: 100% 100%;
  background-color: rgba(246, 248, 249, 0.605);
  background-position: center;
  background-blend-mode: lighten;
  font-size: 2.75rem;
  font-weight: bold;
  margin: auto;
  text-align: center;
  animation: fadein 3s forwards;
}

@keyframes fadein {
  0% {opacity: 0}
  100% {opacity: 1}
}

.headlinesp{
  display: none;
}

@media screen and (max-width: 768px){
  .headline {display: none;
  }
}

@media screen and (max-width: 768px){
  .headlinesp {
    display: block;
    background: url(images/AdobeStock_1114498993.jpg) no-repeat 0 0;
    background-size: 100% 100%;
  background-color: rgba(246, 248, 249, 0.605);
  background-position: center;
  background-blend-mode:lighten ;
  font-size: 1.75rem;
  font-weight: bold;
  margin: auto;
  text-align: center;
}
}

@media screen and (max-width: 480px){
  .headlinesp {
    font-size: 1.25rem;
  }}