@charset "utf-8";

/*ヘッダーとフッターのcss読み込み*/
@import url("style.css");

.sp_header {
  opacity: 1;
}

main {
  background-color: #FAF9F6;
  margin: 0;
  padding: 0 5%;
  text-align: center;
}

#reserve-top-img {
  height: 30vh;
  width: 100%;
  object-fit: cover;
  object-position: 50% 70%;
}

h1 {
  font-size: 30px;
  text-align: center;
  margin: 120px auto 80px;
}

#top-word {
  padding-top: 60px;
}

main p {
  margin-bottom: 20px;
}

.tel {
  margin-top: 50px;
  margin-bottom: 5px;
  border: 1px solid #333;
  border-radius: 10px;
}

.tel a {
  text-decoration: none;
  color: #333;
  font-size: 21px;
  display: block;
  padding-top: 15px;
  padding-bottom: 15px;
}

.tel:hover {
  background-color: #dcdcdc;
  transition: 0.3s;
}

.web {
  margin-top: 50px;
  border: 1px solid #333;
  border-radius: 10px;
}

.web a {
  text-decoration: none;
  color: #333;
  font-size: 21px;
  display: block;
  padding-top: 15px;
  padding-bottom: 15px;
}

.web:hover {
  background-color: #dcdcdc;
  transition: 0.3s;
}

#space {
  height: 80px;
}

footer {
  margin-top: 30px;
}

/*文字の前にアイコン*/
.tel a::before {
  content: "";
  display: inline-block;
  background-image: url(../img/icon/phone.png);
  background-size: cover;
  background-repeat: no-repeat;
  width: 1em;
  height: 1em;
  margin-right: 10px;
  vertical-align: bottom;
}

.web a::before {
  content: "";
  display: inline-block;
  background-image: url(../img/icon/web.png);
  background-size: cover;
  background-repeat: no-repeat;
  width: 1em;
  height: 1em;
  margin-right: 10px;
  vertical-align: bottom;
}

/*タイトル文をフェードイン*/
h1 {
  animation: textAnimation 2s forwards;
}

@keyframes textAnimation {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/*TOP画像を右から表示*/
#reserve-top-img {
  transition: 2s;
  clip-path: inset(0 0 0 100%);
  animation: imgAnimation 2s forwards;
}

@keyframes imgAnimation {
  0% {
    clip-path: inset(0 0 0 100%);
  }

  100% {
    clip-path: inset(0);
  }
}

/*スクロールすると要素がフェードイン*/
main {
  transform: translateY(100px);
  transition: 1.5s;
  opacity: 0;
  visibility: hidden;
}

.is_active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/*以下PC用のcss*/
@media screen and (min-width: 850px) {
  .pc_header {
    display: block;
    opacity: 1;
  }

  .sp_header {
    display: none;
  }

  h1 {
    margin: 200px auto 160px;
  }

  #reserve-top-img {
    height: 60vh;
  }

  #top-word {
    padding-top: 120px;
  }

  .tel {
    width: 45%;
    margin: 50px auto 10px;
  }

  .web {
    width: 45%;
    margin: 50px auto 50px;
  }

}