/* @use '../base/base' as *; */

/*footer*/
.footer{
  width:100%;
  padding-top: 70px;
  color: #505050;
  img{
    width: 100%;
    height: auto;
  }
  a{
    color: #505050;
  }
  .footer-logo{
    width: min(100%, 270px);
    @include mq(sp){
      margin-inline: auto;
    }
  }
  .footer-grid{
    display: grid;
    grid-template-columns: 1fr;
    gap: 50px;
    @include mq(sp){
      text-align: center;
    }
    @include mq(tb){
      grid-template-columns: 1fr 340px 100px;
    }
    @include mq(pc){
      grid-template-columns: 1fr 400px 200px;
    }
  }
  .footer-menu{
    display: grid;
    grid-template-columns: 1fr;
    @include mq(sp){
      order: 3;
      gap: 1em;
      li + li{
        margin-top: 1em;
      }
    }
    @include mq(tb){
      gap: 30px;
      grid-template-columns: repeat(2, 1fr);
    }
  }
  .footer-sns{
    @include mq(sp){
      order: 2;
    }
    li{
      display: inline-block;
      width: 30px;
      & + li{
        margin-left: 20px;
      }

    }
  }


  .copy{
    margin-top: 60px;
    padding: 20px 15px 80px;
    color: var(--c-white);
    background: var(--c-font);
    font-size: 1.2rem;
    text-align: center;
    @include mq(tb){
      padding: 20px 15px 20px;
    }
  }

}//.footer

.footBtn{
  position: fixed;
  opacity: 0;
  z-index: 1000;

  &.is-footBtn{
    opacity: 1;
    width: 100%;

    .foot-btn-grid{
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      align-items: center;
      height: 60px;
      border-top: 1px solid var(--c-accent);

    }

    .foot-btn-item{
      line-height: 1.2;
      height: 100%;
      & + .foot-btn-item{
        border-left: 1px solid var(--c-accent);
      }
      a{
        font-size: 1.4rem;
        font-weight: 600;
        background: var(--c-white);
        color: var(--c-font);
        text-align: center;
        padding: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        span{
          position: relative;
          padding-left: 25px;
          &::before {
            top: 50%;
            left: 0;
            position: absolute;
            content: '';
            display: block;
            width: 20px;
            height: 20px;
            transform: translateY(-50%);
            background-repeat: no-repeat;
            background-size: 100%;
          }
        }


      }
      .foot-btn-shiryou{
        span{
          &::before {
            background-image: url('../img/icon/icon-book-bk.svg');
          }
        }
      }
      .foot-btn-contact{
        span{
          &::before {
            background-image: url('../img/icon/icon-beginner-bk.svg');
          }
        }
      }
    }
  }
}