footer {
    background-color: #eee;
}

footer dl {
    grid-template-rows: auto auto;
    gap: 0.5em 1em;
    place-content: center start;
    margin: 0.75em 0;
    padding: 0;
}

footer dt, dd {
    box-sizing: border-box;
    padding: 5px;
}

footer dt {
    float: left;
    font-weight: bold;
    background-color: #666;
    color: #fff;
    border: 1px solid #666;
    border-radius: 8px;
    width: 80px; /* dtの幅を指定 */
    text-align: center;
}

footer dd {
    margin-left: 90px; /* dtの幅に余白を追加してddの幅を指定 */
}

.copylight {
    text-align: center;
    padding: 10px;
}



/* SNSボタン全体 */
.sns-button {
    margin: 3px;
    padding: 0px;
    text-align: left;
    list-style: none;
    overflow: visible;
    padding: 0;
  }
  
  /* 各 SNS ボタンのボックス */
  .sns-button li {
    display: inline-block; 
    margin: 7px;
    padding: 0px 0px;
    border-radius: 4px;
    width: 70px;
    height: 70px;
    line-hight: 70px;
  }
  .sns-button li a::before {
    display: inline-block;
    font-family: FontAwesome;
    font-size: 40px;
    background-color: #fff;
    border-radius: 4px;
    transition: all .3s ease;
    text-align: center;
    height: 70px; 
    line-height: 70px; 
    width: 70px; 
    border-style: solid;
    border-width: 1px;
  }
  
  
  .sns-button li a[href*="x.com"]::before    { content: "\f099"; color: #55acee; }
  .sns-button li a[href*="youtube.com"]::before    { content: "\f16a"; color: #cd201f; }
  .sns-button li a[href*="instagram.com"]::before  { content: "\f16d"; color: #CF2E92; }
  .sns-button li a[href*="facebook.com"]::before   { content: "\f09a"; color: #3b5998; }
  .sns-button li a[href*="line.com"]::before       { content: "\f3c0"; color: #6cc755; }
  .sns-button li a[href*="pocket.com"]::before     { content: "\f265"; color: #ee4056; }
  .sns-button li a[href*="evernote.com"]::before   { content: "\f839"; color: #2DBE60; }
  .sns-button li a[href*="tumblr.com"]::before     { content: "\f173"; color: #39475D; }
  .sns-button li a[href*="linkedin.com"]::before   { content: "\f08c"; color: #0e76a8; }
  .sns-button li a[href*="pinterest.com"]::before  { content: "\f0d2"; color: #BD081C; }
  
  
  .sns-button li a[href*="x.com"]:hover::before   { 
    background-color: #55acee; 
    color:#fff;
  }
  .sns-button li a[href*="youtube.com"]:hover::before   { 
    background-color: #cd201f; 
    color:#fff;
  }
  .sns-button li a[href*="instagram.com"]:hover::before {      
    background-color: #CF2E92;
    color:#fff;
  }
  .sns-button li a[href*="facebook.com"]:hover::before  {       
    background-color: #3b5998; 
    color:#fff;
  }
  .sns-button li a[href*="line.com"]:hover::before      {   
    background-color: #6cc755; 
    color:#fff;
  }
  .sns-button li a[href*="pocket.com"]:hover::before    { 
    background-color: #ee4056; 
    color:#fff;
  }
  .sns-button li a[href*="linkedin.com"]:hover::before  {       
    background-color: #0e76a8; 
    color:#fff;
  }
  .sns-button li a[href*="evernote.com"]:hover::before  {   
    background-color: #2DBE60; 
    color:#fff;
  }
  .sns-button li a[href*="tumblr.com"]:hover::before    { 
    background-color: #39475D; 
    color:#fff;
  }
  .sns-button li a[href*="pinterest.com"]:hover::before { 
    background-color: #BD081C; 
    color:#fff;
  }