@media (min-width: 1024px) {
  #header-online-store {
    padding: 0 1.5rem;
  }
}

@media (max-width: 767px) {
  div.sp-online-btn {
    position:fixed;
    bottom: 10px;
    right: 10px;
    z-index: 1;
    animation: fadeIn 3s linear;
    animation-fill-mode: both;
    opacity: 0;
  }
  
  @keyframes fadeIn{
    0%{opacity: 0;}
    90% {opacity: 0;}
    100%{opacity: 1;}
  }
  
  div.sp-online-btn a {
    width: calc(100vw - 20px - 2rem);
    background: rgba(255, 255, 255, 0.9);
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
}

/*グロナビの文字サイズ調整*/
@media (min-width: 1024px) and (max-width: 1128px) {
  #header a {
    font-size: 86%;
  }
}

/*TOPページに注意喚起エリア追加*/
.attention-banner-area {
  background: #e7ff00;
}

.attention-banner-area a {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
}
.attention-banner-area a:hover {
  background-color: #000;
}

.attention-banner-area p{
    display: block;
    padding: 1em 4em;
    text-align: center;
    color: #000;
    text-decoration: none;
    font-size: 1.2em;
}

.attention-banner-area a:hover p {
  color: #fff;;
}

@media (max-width: 767px) {
  .attention-banner-area p{
    padding: 1em 1.5em;
    text-align: left;
    font-size: 0.9em;
    line-height: 1.4;
  }
}