@charset "utf-8";

/* ============================================ 
 footer sp
===============================================*/

@media screen and (max-width: 980px) {

  .footer_sp {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 11;
    background-color: #B8925A;
  }

  .footer_1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  .footer_1 a {
    color: #310D0D;
    text-decoration-line: none;
  }

  .footer_text,
  .footer_tel,
  .footer_info {
    display: flex;
    flex-direction: column;
  }

  .footer_text {
    width: 20%;
    padding: 0 2vw 0 4vw;
  }

  /* tel 
  =================================*/

  .footer_tel {
    width: 40%;
  }

  .footer_tel a {
    display: flex;
    align-items: center;
  }

  .footer_tel .footer_icon {
    width: 20%;
  }

  .footer_tel .footer_icon img {
    width: 100%;
  }

  .footer_tel_text {
    padding-left: 2vw;
  }

  .footer_info {
    width: 30%;
    background-color: #06c755;
    text-align: center;
    padding: 1vw 2vw 3vw;
  }


  .footer_text p {
    font-size: 3.2vw;
    line-height: 1.4;
    color: #310D0D;
    text-align: center;
    font-weight: 700;
  }

  .footer_tel_text p {
    font-size: 3vw;
    line-height: 1.7;
    color: #310D0D;
    text-align: center;
    font-weight: 600;
  }

  .footer_tel_text .text1 {
    font-size: 4vw;
    font-weight: 700;
  }

  .footer_info p {
    font-size: 2.6vw;
    color: #FFF;
    text-align: center;
  }

  .footer_info img {
    width: 30%;
  }

}




/* tel animetion */

.color {
  filter: brightness(0) saturate(100%) invert(100%) sepia(6%) saturate(1%) hue-rotate(34deg) brightness(105%) contrast(100%);
}

.telCalling_position {
  position: relative;
}

.icon_telCalling {
  filter: brightness(0) invert(1);
}

.icon_telCalling {
  float: left;
  width: 9vw;
  height: 12vw;
  background-position: 0% 47%;
  background-size: auto 50%;
  background-image: url(../img/00_common/tel.png);
  background-repeat: no-repeat;
  display: inline-block;
  position: absolute;
  filter: brightness(0) saturate(100%) invert(8%) sepia(31%) saturate(2159%) hue-rotate(327deg) brightness(103%) contrast(100%);
}

.icon_telCalling .calling {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: rotate(35deg);
}

.icon_telCalling .calling:before,
.icon_telCalling .calling:after {
  position: absolute;
  border: 2px solid transparent;
  border-top: solid 2px currentColor;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  animation-name: calling;
  animation-duration: 1.4s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  content: '';
}

.icon_telCalling .calling:first-child:before {
  width: 2.6vw;
  height: 2.6vw;
  animation-delay: -1.16s;
}

.icon_telCalling .calling:first-child:after {
  width: 3.9vw;
  height: 3.9vw;
  animation-delay: -1.08s;
}

.icon_telCalling .calling:last-child:before {
  width: 5.1vw;
  height: 5.1vw;
  animation-delay: -1.00s;
}

.icon_telCalling .calling:last-child:after {
  width: 3.9vw;
  height: 3.9vw;
  animation-delay: -1.08s;
}

@media screen and (max-width:600px) {

  .icon_telCalling .calling {
    top: 47%;
    left: 41%;
  }

  .icon_telCalling .calling:first-child:before {
    width: 16px;
    height: 16px;
  }

  .icon_telCalling .calling:first-child:after {
    width: 28px;
    height: 28px;
  }

  .icon_telCalling .calling:last-child:before {
    width: 40px;
    height: 40px;
  }

  .icon_telCalling .calling:last-child:after {
    width: 28px;
    height: 28px;
  }
}

@keyframes calling {

  8%,
  64% {
    opacity: 1;
  }

  78% {
    opacity: 0;
  }
}