.l-footer {
    padding: 52px 35px 77px;
    border-top: 1px solid #d4d4d4;
    @media (max-width: 767px) {
      padding: 50px 25px 35px;
    }

    .l-footer-inner {
    }
    img {
        width: 100%;
    }

    .l-footer-head {
        display: flex;
        justify-content: space-between;

        @media (max-width: 767px) {
          display: block;
        }
    }

    .l-footer-logo {
        display: block;
        width: 256px;

        @media (max-width: 767px) {
          width: 180px;
        }
    }

    .l-footer-sns {
        display: flex;
        align-items: center;
        gap: 24px;

        @media (max-width: 767px) {
          gap: 18px;
          margin-top: 30px;
        }
        >li {
          a{
            transition: .1s linear;
            
            @media (min-width:768px) {
              &:hover {
                opacity: .6;;
              }
            }
          }
        }

        .l-footer-sns__x {
            width:28px;

            @media (max-width: 767px) {
              width: 20px;
            }
        }
        .l-footer-sns__youtube {
            width: 40px;
            @media (max-width: 767px) {
              width: 26px;
            }
        }
    }
    .l-footer-mid {
      margin-top: 35px;
    }
    .l-footer-list__l {
        display: flex;
        align-items: center;
        gap: 30px;

        @media (min-width: 768px) {
          justify-content: end;
        }
        @media (max-width: 767px) {
          flex-wrap: wrap;
          gap:15px 30px;
        }
        >li {
            a{  
              font-weight: 500;
              font-size: 14px;
              color: #333;

              @media (max-width: 767px) {
                font-size: 13px;
              }
              transition: .1s linear;
            
              @media (min-width:768px) {
                &:hover {
                  color: #861c3c;
                }
              }
            }
        }
        + .l-footer-list__l {
          margin-top: 20px;

          @media (max-width: 767px) {
            margin-top: 25px;
            padding-top: 25px;
            border-top: 1px solid #d4d4d4;
          }

        }
    }

    .l-footer-list__bar {
      width: 1px;
      height: 18px;
      background-color: #adadad;

      + li {
        margin-top: 5px;
      }
    }
    .l-footer-bottom {
     
       margin-top: 0px;
       @media (max-width: 767px) {
        margin-top: 40px;
       }
        small {
          font-family: Arial, Helvetica, sans-serif;
            color: #969696;
            font-size: 14px;

            @media (max-width: 767px) {
              font-size: 10px;
            }
        }
    }
}

#l-footer-back__top {
  position:fixed;
  background-image: url(/cmn/img/icon_2024/icon-back.png);
  right:20px;
  bottom:20px; 
  width:50px;
  height:50px;
  background-repeat: no-repeat;
  z-index:3;
  background-size: 50px 50px;
  transition: .1s linear;
  cursor: pointer;
  @media (max-width: 767px) {
    right:10px;
    bottom:10px; 
    width:40px;
    height:40px;
    background-size: 40px 40px;
  }
  @media (min-width: 768px) {
   &:hover {
      background-image: url(/cmn/img/icon_2024/icon-back__hover.png);
    }
  }
}

.l-footer-cookie{
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 4;
  background-color: rgb(0, 0, 0,0.8);
  opacity: 0;
  visibility: hidden;
  &[aria-expanded="true"] {
    opacity: 1;
    visibility: visible;
  }
  .l-footer-cookie__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 35px;

    @media (max-width: 767px) {
      display: block;
    }

    @media (min-width: 768px) {
      gap: 30px;
    }
      

    >p {
      font-size: 15px;
      font-weight: 500;
      font-weight: 500;
      color: #fff;
      line-height: 1.5;
      flex: 1;

      @media (max-width: 767px) {
        font-size:13px;
      }

      a {
        text-decoration: underline;
        text-decoration-color: #fff;
      }
    }
    .l-footer-cookie__btn {
      @media (max-width: 767px) {
        text-align: center;
        margin-top: 10px;
      }
      >button {
        color: #222;
        font-size: 13px;
        padding: 5px 20px;
        background-color: #fff;
        display: inline-block;
        border-radius: 15px;
        cursor: pointer;
        font-family: "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, "ＭＳ Ｐゴシック";
        
      }
    }

  }
}