.f-bt {
  bottom: 0;
  display: flex;
  height: 7rem;
  left: 0;
  position: fixed;
  width: 100%;
  z-index: 1000000;
  @media (width >= 961px) {
    display: none;
  }
  > a {
    align-items: center;
    display: flex;
    font-size: 1.5rem;
    height: 100%;
    justify-content: center;
    line-height: 1.25;
    margin: 0;
    padding: 0 1.8em 0 1.5rem;
    text-decoration: none;
    white-space: no-wrap;
    width: 50%;
    &.f-tel {
      background: #E6E61F;
      color: #1a1a1a;
    }
    &.f-mail {
      background: #1a1a1a;
      color: #fff;
    }
    > img {
      height: 3.5rem;
      margin: 0 1.2rem 0 0;
      padding: 0;
      width: 3.5rem;
    }
  }
}

.r-bt {
  display: none;
  @media (width >= 961px) {
    display: block;
    height: 39rem;
    position: fixed;
    right: -33.5rem;
    top: 50%;
    transform: translateY(-50%);
     width: 41.5rem;
     z-index: 1000000;
     > div, > a {
      height: 50%;
      margin: 0;
      padding: 0;
      text-decoration: none;
      transition: .5s;
      &.r-tel {
        display: flex;
        width: 41.5rem;
        .yellow {
          background: #E6E61F;
          border: .1rem solid #fff;
          border-radius: 1rem 0 0 1rem;
          color: #1a1a1a;
          display: flex;
          flex-wrap: wrap;
          justify-content: flex-start;
          padding: 1.6rem 0 0;
          writing-mode: vertical-rl;
          width: 8rem;
          img {
            height: 3.7rem;
            margin: 0 auto .8rem;
            width: 3.7rem;
          }
          span {
            font-size: 1.6rem;
            letter-spacing: .12em;
            line-height: 1.2;
            margin: 0 auto;
          }
        }
        .white {
          background: #fff;
          color: #1a1a1a;
          padding: 3.5rem 4rem 0 ;
          width: 33.5rem;
          .tel {
            font-family: "Roboto", sans-serif;
            font-size: 4rem;
            margin: 0 0 .4rem;
            white-space: nowrap;
          }
          .time {
            font-size: 1.4rem;
            line-height: 1.8;
            margin: 0 0 1.4rem;
            span {
              color: #E6E61F;
              margin: 0 1rem;
            }
          }
          .text {
            font-size: 1.4rem;
            line-height: 1.8;
            margin: 0;
          }
        }
        &:hover {
          cursor: w-resize;
          margin: 0 0 0 -33.5rem;
        }
      }
      &.r-mail {
        background: #4B4B4B;
        border-radius: 1rem 0 0 1rem;
        color: #fff;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        padding: 1.6rem 0 0;
        writing-mode: vertical-rl;
        width: 8rem;
        img {
          height: 3.7rem;
          margin: 0 auto .8rem;
          transition: .5s;
          width: 3.7rem;
        }
        span {
          font-size: 1.6rem;
          letter-spacing: .12em;
          line-height: 1.2;
          margin: 0 auto;
        }
        &:hover {
          background: #1a1a1a;
          img {
            transform: rotate(30deg);
          }
        }
      }
     }
  }
}
.passive .f-bt,
.passive .r-bt {
  opacity: 0;
  transition: .5s;
}
.passive .f-bt {
   height: 0;
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.p-top {
  bottom: 9rem;
  display: none;
  height: 6.4rem;
  position: fixed;
  right: 2rem;
  transition: .5s;
  width: 6.4rem;
  z-index: 100;
  @media (width >= 961px) {
    right: 9rem;
    bottom: 8.4rem;
  }

  img {
    height: 100%;
    object-fit: cover;
    width: 100%;
  }
}
.active .p-top {
  animation: fade-in .5s;
  display: block;
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.passive .p-top {
  bottom: 2rem;
  @media (width >= 961px) {
    bottom: 8.4rem;
  }
}

footer {
  background-color: #292813;
  color: #ffffff;
  padding: 5.4rem 2rem 0;
  text-align: left;
  @media (width >= 961px) {
    padding: 12rem 0 9.9rem;
  }

  > div {
    margin: 0 auto;
    width: 32rem;
    @media (width >= 961px) {
      display: flex;
      justify-content: space-between;
      padding: 0 2rem;
      width: 96rem;
    }

    >div {
      @media (width >= 961px) {
        width: 30rem;
      }
      .logo {
        display: block;
        height: 4.5rem;
        margin: 0 auto 2.4rem 0;
        width: 30rem;
      
        img {
          height: auto;
          width: 100%;
        }
      }

      address {
        font-size: 1.6rem;
        font-style: normal;
        line-height: 1.8;
        margin: 0 0 1rem;
      }
    
      > p {
        font-size: 1.6rem;
        line-height: 1.8;
        margin: 0 0 1rem;

        a {
          color: #fff;;
          text-decoration: none;
        }
      
        &:last-of-type {
          margin: 0 0 2.4rem;
          @media (width >= 961px) {
            margin: 0 0 3.1rem;
          }
        }
      }

      .insta {
        display: block;
        height: 3.2rem;
        margin: 0 auto 4.8rem 0;
        width: 3.2rem;
        @media (width >= 961px) {
          margin: 0 auto 0 0;
        }
      
        img {
          height: 100%;
          object-fit: cover;
          width: 100%;
        }
      }
    }

    > nav {
      display: flex;
      flex-wrap: wrap;
      @media (width >= 961px) {
        justify-content: flex-end;
        width: calc(100% - 30rem);
      }

      > ul {
        list-style: none;
        margin: 0;
        padding: 0 0 4.8rem;
        &:first-of-type {
          width: 12.7rem;
        }

        > li {
          font-size: 1.6rem;
          line-height: 1.8;
          margin: 0;
          padding: 0;

          a {
            color: #ffffff;
            text-decoration: none;
            &:hover {
              color: #E6E61F;
            }
          }

          > ul {
            list-style: none;
            margin: 2rem 0 0;
            padding: 0;
            position: relative;
            &::before {
              background: #E6E61F;
              content: "";
              display: block;
              height: .1rem;
              left: 0;
              position: absolute;
              top: -1rem;
              width: 1.5rem;
            }

            li {
              font-size: 1.4rem;
              line-height: 1.8;
              margin: 0;
              padding: 0;
              &:first-of-type {
                margin: 0 0 .4rem;
              }
            }
          }
        }
        
        &:nth-of-type(3) {
          @media (width >= 961px) {
            width: 36.2rem;
          }
          >li {
            >a {
              pointer-events: none;
            }
          }
        }
        &:nth-of-type(4),
        &:nth-of-type(5) {
          width: 100%;
          > li {
            font-size: 1.6rem;
            line-height: 1.8;
            margin: 0 0 1.4rem;
            padding: 0;

            &:last-of-type {
              margin: 0;
            }
          }
        }

        &:nth-of-type(2),
        &:nth-of-type(4) {
          width: calc(100% - 12.7rem);
          @media (width >= 961px) {
            width: 39.5rem;
          }

          > li:first-of-type > a::after {
            background: url(../img/icon-out-w.png) center center / cover no-repeat;
            content: "";
            display: inline-block;
            height: 1.3rem;
            margin: 0 0 .5rem .8rem;
            vertical-align: middle;
            width: 1.3rem;
          }
        }

        @media (width >= 961px) {
          &:nth-of-type(4) {
            display: inline-block;
            margin: -15.1rem 0 0;
            width: auto;
          }

          &:nth-of-type(5) {
            display: flex;
            gap: 3.2rem;
            justify-content: flex-end;
            width: 100%;
          }
        }
      }
    }
  }
}